body {
line-height: 1.6;
color: #464646;
/* ⭐️追記：フォント */
font-family: "Shippori Mincho", serif;
font-weight: 400;
font-style: normal;
overflow-x: hidden;
}

li {
   list-style: none;
}

.l-container {
   margin-inline: 16%;
}

.l-wapper {
   width: 100%;
   background-image: url(../img/back1.jpg);
   background-size: cover;
   margin-top: 50px;
}

.c-button {
   display: block;
   padding: 16px 24px;
   background: #83A869;
   border: solid #83A869;
   border-radius: 30px;
   color: #fff;
   font-size:24px;
   text-align: center;

    /* ⭐️追記：光の演出がボタンからはみ出さないように隠す */
   position: relative;
   overflow: hidden;
   
   /* ⭐️追記：若干のグラデーションとハイライトを追加して質感を高める */
   display: block;
   padding: 16px 24px;
   background: linear-gradient(135deg, #83A869 0%, #6d8e56 100%);
   border: none;
   border-radius: 30px;
    /* 軽い影で立体感を出す */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   color: #fff;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
   /* ホバー時の動き用 */
   transition: transform 0.3s ease; 
}
/* ⭐️追記：ボタンにマウスを乗せた時に少し大きくする */
.c-button:hover {
   transform: scale(1.03);
}
/* ⭐️追記：左から右に波打つキラキラ（光の筋）を作成する */
.c-button::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%; /* スタート位置はボタンの左外側 */
   width: 50%;
   height: 100%;
   background: linear-gradient(
         to right,
         rgba(255, 255, 255, 0) 0%,
         rgba(255, 255, 255, 0.3) 50%,
         rgba(255, 255, 255, 0) 100%
   );
   /* 斜めにして「キラキラ感」を出す */
   transform: skewX(-25deg); 
   /* 5秒ごとに無限ループさせる */
   animation: shine-wave 5s infinite; 
}
/* ⭐️追記：キラキラが左から右へ流れるアニメーションを定義する */
@keyframes shine-wave {
   0% {
         left: -100%;
   }
   30% {
      /* 一気に右へ駆け抜ける */
         left: 150%; 
   }
   100% {
       /* 残りの時間は待機してループの間隔を作る */
         left: 150%;
   }
}

/* -----------------------------------------------------------------------
Hero
---------------------------------------------------------------------------
*/
.p-hero {
   width: 100%;
/* ⭐️追記：要素が入り切らない場合の崩れを防ぐため min-height にする */
   min-height: 100vh;
   background-image: url(../img/originalmainvisual.png);
   background-size: cover;
   background-position: center;
   position: relative;
}
.p-hero_title {
   /* font-size: 48px; */
   font-size:48px;
   color: #464646;
   position: absolute;
   top: 150px;
   left: 140px;
   text-shadow: 3px 2px 2px white;
   position: relative;
}
.p-hero_sub-title {
   /* font-size: 25px; */
   font-size:30px;
   position:absolute;
   top: 400px;
   left: 180px;
}
.p-hero_sub-title mark {
   background: linear-gradient(transparent 0%,#EBECE7 60%);
}

/* --------------------------------------------------------------------------
Product Card
================--------------------------- */

.p-product-card {
   border: solid 2px #83A869;
   margin-top: 50px;
   padding: 8% 10%;
}
.p-product-card_heading {
   margin-bottom: 30px;
   text-align: center;
   /* font-size: 28px; */
   font-size: 28px;
}
/* 　　　　　　　　　　　　　　　　　itemとimｇ間あけたい */
.p-product-card_content {
   display: flex;
   /* ⭐️追記：画像と情報を両端に配置する */
   justify-content: space-between;
   align-items: flex-start;
/* ⭐️追記：gapを使用して要素間の隙間を効率的に作成する */
   gap: 40px;
}
.p-product-card_info {
   /* ⭐️追記：情報を可変にする */
   flex: 1;
}
.p-product-card_image {
   /* ⭐️追記：画像の幅を固定してレイアウトを安定させる */
   width: 40%;
}
.p-product-card_image img {
   display: block;
   width: 100%;
}

.p-price-box {
   position: relative;
   text-align: center;
}
/* =========================================================== */
.p-price-box--regular {
   padding: 10px;
/* ⭐️追記：矢印を表示するスペースを確保する */
   margin-bottom: 30px; 
}

/* ⭐️追記：通常購入価格の下にある矢印記号を擬似要素で配置する */
.p-price-box--regular::after {
   content: "↓↓↓";
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   /* padding-top:10px; */
}
.p-price-box--regular h4 span {
   position: relative;
   display: inline-block;
   padding-inline: 10px;
   font-size: 45px;
   font-weight: 500;
}
/* ⭐️追記：打ち消し線を擬似要素で作成し、位置を調整する */ */
.p-price-box--regular h4 span::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 4px;
   background: #000;
   transform: rotate(-20deg);
}

/* ↑これはなにがかわるんでしょうか？ */

.p-price-box--special {
margin-top: 30px;
}

.p-price-box--special .p-price-box_title {
   margin-block: 20px;
   padding: 4px;
   background: #bbd8a5;
   border: solid #bbd8a5;
   font-size: 20px;
   letter-spacing: 4px;
}

.p-price-box_main {
display: flex;
justify-content: space-between;
align-items: center;
}
.p-price-box_badge {
/* ⭐️追記：子要素を中央配置するための基準にする */
   position: relative; 
   width: 120px;
   height: 120px;
   border: solid 4px #83A869;
   border-radius: 50%;
}

.p-price-box_badge p {
   position: absolute;
   top: 50%;
   left: 50%;
/* ⭐️追記：position absolute で浮かせた要素を上下左右中央にする */
   transform: translate(-50%, -50%);
   font-size: 28px;
   line-height: 1.1;
}
.p-price-box_badge p span {
   font-size: 40px;
}
.p-price-box_price-group{
   flex: 1;
   margin-left: 20px;
   border-bottom: solid 2px #464646;
}
.p-price-box_price-group h5{
   font-size:64px;
   letter-spacing: 2px;
}
.p-price-box_price-group h5 span{
   font-size:23px;
}
.p-price-box_price-group p span {
   letter-spacing: 3px;
   margin-left: 6px;
}
/* ? */
.p-price-box_current {
font-size: 72px;
}

.p-price-box_notes {
   margin-block: 20px;
   text-align: left;
}

.p-price-box_notes li {
   margin-bottom: 5px;
}

/* ==================================================
Intro
=========================================================*/

.p-intro {
position: relative;
z-index: 0;
margin-inline: 16%;
padding-block: 100px;
}


.p-intro_title {
margin-bottom: 60px;
font-size: 30px;
text-align: center;
}

/* ⭐️追記：中身は左揃えのまま、塊ごと中央に配置する */
.p-intro_box {
display: flex;
justify-content: center;
margin-bottom: 60px;
}

.p-intro_list {
display: inline-block;
}

.p-intro_list li {
margin-bottom: 15px;
font-size: 20px;
}

/* ⭐️追記：CSSで余白を消すときは none ではなく 0 を指定する */
.p-intro_list li:last-child {
margin-bottom: 0;
}

.p-intro_lead {
font-size:32px;
text-align: center;
}



.p-features {
position: relative;
z-index: 0;
margin-inline: 16%;
padding-bottom: 100px;
padding-inline: 2%;
}

.p-features::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
}

.p-features_title {
   display: block;
   margin-bottom: 80px;
   text-align: center;
   font-size: 28px;  
}

.p-features_title span {
   font-size:32px;
}
.p-features_item {
/* ⭐️修正：中身を横並びにする */
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
margin-block: 60px;
}
.p-features_item:nth-of-type(2) {
flex-direction: row-reverse; 
}
.p-features_image {
/* ⭐️修正：画像の幅をバランス調整 */
width: 50%; 
}
.p-features_image img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.p-features_text {
/* ⭐️修正：残りの幅をテキストが使う */
flex: 1; 
text-align: left;
}

.p-features_item-title {
font-size: 24px;
margin-bottom: 10px;
font-weight: bold;
text-align: center;
}

.p-features_item-text {
font-size: 16px;
}

.p-features_footer-lead {
   margin-top: 80px;
   font-size: 28px;
   text-align: center;
}

.p-visual-secondary {
width: 100%;
min-height: 500px; 
margin-top: 50px;
background-image: url(../img/originalmain2.png);
background-size: cover;
background-position: center;
}

/* ==========================================================
Additive-free
==============================================================*/
.p-additive-free {
   width: 100%;
   padding-block: 80px;
   background-image: url(../img/original-back3.jpg);
   background-size: cover;
}

.p-additive-free_title {
   margin-bottom: 60px;
   font-size:30px;
   text-align: center;
}

.p-additive-free_inner {
   position: relative;
   margin-inline: 16%;
   padding: 40px;
}

.p-additive-free_inner::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.8);
}
.p-additive-free_list {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   z-index: 2;
   width: 100%;
}

.p-additive-free_list dt {
   width: 25%;
   padding: 0 0 15px 10px;
   font-weight: bold;
}

.p-additive-free_list dd {
width: 75%;
padding: 0 0 15px 10px;
}

/* ============================================================
ingredient
=============================================================*/

.p-ingredient {
   width: 100%;
   background-image: url(../img/original-back2.png);
   background-size: cover;
   background-position: center;
}
.p-ingredient_title {
   padding-top: 80px;
   font-size: clamp(20px,2vw,24px);
   text-align: center;
}
.p-ingredient_title span {
   font-size:36px;
}
.p-ingredient_sub-title {
   margin-top: 30px;
   text-align: center;
   font-size: 24px;
   margin-bottom: 40px;
}
.p-ingredient_content {
   display: flex;
   align-items: center;
   gap: 20px;
   padding-bottom: 88px;
}
.p-ingredient_text {
   width: 100%;
   font-size: 18px;
}
.p-ingredient_image img {
   width: 100%;
}

/* ====================================================================
review
=======================================*/
.p-review {
   margin-top: 80px;
}
.p-review_heading {
   font-size: 32px;
   text-align: center;
   margin-bottom: 50px;
}
.p-review_item {
   display: flex;
   align-items: center;
   padding: 30px 3%;
   border-bottom: 1px solid #464646;
}

.p-review_title {
   font-size: 20px;
   margin-bottom: 20px;
   font-weight: bold;
}
.p-review_avatar {
   /* ? */
   flex-shrink: 0;
   width: 100px;
   height: 100px;
}
.p-review_body {
   padding-left: 4%;
}
.p-review_text {
   font-size: 16px;
   margin-bottom: 10px;
}
.p-reviewer_profile {
   font-size: 15px;
}
/* ==========================================
CTA
============================================*/
.p-cta {
   margin-top: 80px;
   margin-bottom: 50px;
}
.p-cta_text {
   font-size: 26px;
   text-align: center;
   margin-bottom: 80px;
}
/* =================================================
レスポンシブ
===================================================*/
@media (max-width:430px) {
   br {
      display: none; 
   }
   .p-hero br,
   .p-product-card_heading br,
   .p-cta_text br {
      display: block; 
   }
   .p-product-card_heading{
      font-size: 24px;
   }
   .l-container {
      margin-inline: 5%;
   }

/* ========Heroのタイトルとサブタイトルの場所が固定されてるの直し方？？？ */
   .p-hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-inline: 5%;
      min-height: 60vh; 
   }
   .p-hero_title {
      position: static; 
      text-align: center;
      font-size: 24px;
   }
   .p-hero_sub-title {
      position: static;
      margin-top: 20px;
      text-align: center;
       font-size: 20px;
   }


   .p-product-card {
      padding: 5%;
   }
   .p-product-card_content {
      flex-direction: column; 
      gap: 20px;
   }
   .p-product-card_info {
      width: 100%;
 /* ⭐️追記：画像を上、文字を下にする順番指定 */ 
      order: 2;
   }
   .p-price-box_badge p {
      font-size: 20px;
   }
   .p-price-box_badge p span {
      font-size:24px;
   margin-right: 5px;
   }
   .p-product-card_image {
      width: 80%;
      margin: 0 auto;
      order: 1; 
   }
   /* ＝＝＝＝＝＝＝＝文字の大きさ変わらん？？？？ */
   .p-price-box_notes li {
      font-size: 14px;
   }


   .p-intro {
      margin-inline: 5%;
      padding-block: 50px;
   }
   .p-intro_title {
      font-size: 22px; 
   }
   .p-intro_lead {
      font-size: 22px;
   }
   .p-intro_list li{
      font-size:18px;
   }


   .p-features {
      margin-inline: 5%;
      padding-bottom: 50px;
      padding-inline: none;
   } 
   .p-features_title {
      padding-top: 50px;
      margin-bottom: 40px;
      font-size: 28px;
   }

   
/* ⭐️追記 */
   .p-features_item,
   .p-features_item:nth-of-type(2) {
      flex-direction: column;
      text-align: center;
      margin-block: 20px;
   }

   .p-features_item {
      text-align: center;
/* ⭐️追記 */
      flex-direction: column;
   }
.p-features_title{
   font-size:30px;
}
   .p-features_title span{
      font-size:34px;
   }
   /* =====display:grid;の一列にする仕方あっているか、並び替えの方法わかんない===========*/
   .p-features_footer-lead {
      margin-top: 40px;
      font-size:24px;
   }

   /* --- Additive Free (⭐️修正：幅の適正化) --- */
.p-additive-free {
padding-block: 40px;
}
   .p-additive-free_title {
      margin-inline: 5%;
      font-size: 18px;
   }
   .p-additive-free_inner {
      margin-inline: 3%;
      padding: 20px 10px;
   }
   .p-additive-free_list {
      flex-direction: column;
   }
   .p-additive-free_list dt {
      width: 100%;
      padding-bottom: 5px;
      font-size: 15px;
   }
   .p-additive-free_list dd {
      width: 100%;
      padding-bottom: 15px;
      font-size: 13px;
      line-height: 1.4;
   }


   .p-ingredient_title {
      padding-top: 50px;
   }
   .p-ingredient_sub-title {
      margin-top: 20px;
      font-size: 20px;
   }
   
   .p-ingredient_content {
      flex-direction: column;
      gap: 40px;
   }
   .p-review_item {
      flex-direction: column;
      text-align: center;
      padding: 20px 0;
   }
   .p-review_body {
      padding-left: 0;
      margin-top: 20px;
   }
   .p-cta_text {
      font-size: 18px;
   }
}