@charset "utf-8";
/* CSS Document */

:root{
  --red:#b5222e;
  --red-dark:#8f1a24;
  --pink-bg:#f6e2e0;
  --pink-bg2:#f0d9d4;
  --cream:#fdf7f2;
  --text:#4a3230;
  --sub:#7a5d58;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.7;
	 overflow-x:hidden;
}
img{max-width:100%;display:block;}
.ph{
  background:linear-gradient(135deg,#e8c7c7,#d8a7a7);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  text-align:center;
  border-radius:8px;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
.btn{
  display:inline-block;
  background:var(--red);
  color:#fff;
  padding:10px 28px;
  border-radius:30px;
  text-decoration:none;
  font-size:14px;
  font-weight:bold;
  transition:.2s;
}
.btn:hover{background:var(--red-dark);}
.btn-outline{
  background:#fff;
  color:var(--red);
  border:1px solid var(--red);
}
h2.section-title{
  text-align:center;
  font-size:26px;
  color:var(--red);
  margin-bottom:8px;
  letter-spacing:1px;
}
.section-sub{
  text-align:center;
  color:var(--sub);
  font-size:14px;
  margin-bottom:40px;
}
section{padding:70px 0;}
.bg-pink{background:var(--pink-bg);}
.bg-pink2{background:var(--pink-bg2);}

/* ===== HERO（画像1枚） ===== */
.hero{
  line-height:0; /* 画像下の余分な隙間防止 */
	width:100%;
  margin:0;
}
.hero-img-full{
  width:100%;
  max-width:100%;  /* ← これを追加：sp.cssのimg{max-width:90%}を打ち消す */
  height:auto;
  display:block;
  margin:0;
}

/* ===== こだわり：見出し部分（テキスト＋画像） ===== */
.commit-intro{
  display:flex;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.commit-intro-text{
  flex:1;
  min-width:280px;
}
.commit-intro-line{
  width:120px;
  height:1px;
  background:#770c13;
  margin-bottom:20px;
}
.commit-intro-title{
  display:block;
  margin:0 0 24px;
}

.commit-intro-title-top{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:14px;
}
.commit-intro-logo{
  height:44px;
  width:auto;
  max-width:100%;
  display:block;
}
.commit-intro-title-sub{
  display:block;
  color:#770c13;
  font-family:"YuMincho StdN","游明朝 StdN","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
  font-size:32px;
  font-weight:900;
  line-height:1.4;
}
.commit-intro-subtitle{
  color:#770c13;
	font-family:"YuMincho StdN","游明朝 StdN","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
  font-size:19px;
  font-weight:700;
  margin:0 0 16px;
  padding-bottom:6px;
  border-bottom:2px solid #770c13;
  display:inline-block;
}
.commit-intro-desc{
  font-size:17px;
  color:var(--sub);
  line-height:2;
  margin:0;
}
.commit-intro-img{
  flex:0 0 320px;
  max-width:100%;
}
.commit-intro-img-full{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
}

@media (max-width:700px){
  .commit-intro-title{font-size:24px;}
  .commit-intro-title span{font-size:20px;}
  .commit-intro-subtitle{font-size:16px;}
  .commit-intro-img{flex:0 0 220px;margin:0 auto;}
}

@media (max-width:700px){
  .commit-intro-logo{
    height:32px;      /* PC版の44pxより小さく */
    margin-top:20px;  /* 上の画像との間に余白を作る */
  }
}
/* ===== こだわり4ポイント ===== */
.commit4{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}
.commit4-col{
  flex:1;
  min-width:260px;
  display:flex;
  flex-direction:column;
  gap:40px;
}
.commit4-item{
  text-align:center;
}
.commit4-item h3{
	font-family:"YuMincho StdN","游明朝 StdN","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
  color:#770c13;
  font-size:24px;
  font-weight:700;
  line-height:1.5;
  margin:0 0 14px;
	letter-spacing:1px;
  -webkit-text-stroke:0.2px #770c13; /* 文字の輪郭を太らせる */
  text-shadow:0.4px 0 0 #770c13, -0.4px 0 0 #770c13; /* Firefox等、text-strokeが効かない環境向けの保険 */
  position:relative;
  padding-bottom:14px;
}
.commit4-item h3::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:36px;
  height:3px;
  background:#770c13;
  border-radius:2px;
}
.commit4-item p{
  font-size:16px;
  color:var(--sub);
  line-height:1.8;
  margin:0;
}
.commit4-img{
  flex:0 0 260px;
  max-width:100%;
  text-align:center;
}
.commit4-img-full{
  width:100%;
  max-width:260px;
  height:auto;
  display:block;
  margin:0 auto;
}

@media (max-width:700px){
  .commit4{
    flex-direction:column;
  }
  .commit4-img{
    order:-1;
    margin-bottom:20px;
  }
  .commit4-col{
    gap:30px;
  }
}

/* ===== こだわり ===== */
.commit-grid{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:40px;
}
.commit-card{
  flex:1;
  min-width:220px;
  background:#fff;
  border-radius:12px;
  padding:20px;
  text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
}
.commit-card .ph{height:140px;margin-bottom:14px;}
.commit-card h3{color:var(--red);font-size:15px;margin:10px 0;}
.commit-card p{font-size:12px;color:var(--sub);}

.nutri-grid{
  display:flex;
  gap:24px;
  margin-top:40px;
	margin-bottom:0;
	padding-bottom: 40px;
  flex-wrap:wrap;
}
.nutri-card{
  flex:1;
  min-width:240px;
  background:#fff;
  border:1px solid #eed;
  border-radius:12px;
  padding:24px;
  display:flex;
  gap:16px;
}



.nutri-card-img{
  flex:0 0 70px;
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nutri-card-img img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
}

.nutri-card h4{
  margin:0 0 8px;
  color:#770c13;
  font-family:"YuMincho StdN","游明朝 StdN","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
  font-size:22px;   
}
.nutri-card p{
  font-size:16px;   
  color:var(--sub);
  line-height:1.8;
  margin:0;
}

/* ===== 専門家：見出し ===== */
.expert-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:#770c13;
  font-family:"YuMincho StdN","游明朝 StdN","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
  font-size:24px;
  font-weight:900;
  margin:0 0 30px;
}
.expert-title-line{
  flex:0 0 60px;
  height:1px;
  background:#770c13;
}


/* ===== 専門家：本文 ===== */

.expert-section{
  padding-top:80px;
  padding-bottom:80px;
}
.expert-box{
  background:#fff;
  border-radius:16px;
  padding:30px;
  display:flex;
  gap:24px;
  align-items:flex-start;
  flex-wrap:nowrap;   /* ← 追加：横並びを維持する */
}
.expert-photo{
  flex:0 0 160px;
  width:160px;        /* ← 追加：幅を明示して縮まないようにする */
}
.expert-photo img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}
.expert-text{
	flex:1 1 auto;       /* ← flex:1 のままでOK（1 1 autoで明示） */
  min-width:0;          /* ← 追加：子要素がはみ出して強制改行されるのを防ぐ */
  position:relative;
  padding-bottom:20px; /* 画像の高さ分、下に余白を確保 */
}
.expert-affil{
  font-size:15px;
  color:var(--sub);
  margin:4px 0 4px;
}
.expert-name{
  font-size:24px;
  font-weight:700;
  color:var(--text);
  margin:0 0 16px;
}
.expert-name span{
  font-size:20px;
  font-weight:400;
}
.expert-comment-img{
  position:absolute;
  right:0;
  bottom:0;
  width:70px;
  max-width:70px;
}
.expert-comment{
  font-size:16px;
  color:var(--text);
  line-height:1.9;
  margin:0;
}

@media (max-width:700px){
  .expert-box{
    flex-wrap:wrap;   /* スマホのときだけ折り返しOKにする */
  }
  .expert-photo{
    flex:0 0 100%;
    width:100%;
    max-width:200px;
    margin:0 auto 16px;
  }
}

/* ===== 商品紹介：見出し ===== */
#products{
  padding-top:50px; 
	background:url("../img/pickup/zakuro/back3.jpg");
	background-size: 100% auto; 
	 
}


.products-title{
  display:flex;
  align-items:center;
  gap:24px;
  color:#770c13;
  font-family:"YuMincho StdN","游明朝 StdN","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
  font-size:50px;
  font-weight:700;
  letter-spacing:10px;   /* 文字間を広げる */
  margin:0 0 40px;
}

@media (max-width:700px){
  .products-title{
    font-size:30px;
    letter-spacing:9px;     /* 10px → 4px に縮小 */
    white-space:nowrap;     /* 折り返しを禁止 */
    gap:14px;               /* 線とのすき間も詰める */
  }
  .products-title-line{
    flex:0 0 40px;          /* 線を短くして文字側に幅を確保 */
  }

  .effort-heading{
    font-size:28px;         /* 32px → 28px（念のためもう少し詰める）*/
    font-weight:900;
    letter-spacing:2px;     /* 6px → 2px に縮小 */
    white-space:nowrap;     /* 折り返しを禁止 */
    gap:14px;
  }
  .effort-heading-line{
    flex:0 0 40px;
  }
}

.products-title-line{
  flex:0 0 100px;        /* 線を長めに */
  height:1.5px;           /* 線を少し太く */
  background:#770c13;
}

/* ===== 商品紹介：本文 ===== */
.product-size{
  font-size:21px;
  color:var(--sub);
	
  margin:0 0 14px;
}
.product-desc{
  font-size:18px;    
  color:var(--text);
  line-height:1.5;
  margin:0 0 22px;
}
.product-desc strong{
  color:var(--text);
  font-weight:700;
  font-size:19px;   
}
.product-desc small{
  font-size:14px;
  color:#9c2b20;
  display:block;
  margin-top:10px;
  line-height:1.7;
}

.potion-section{
 
  padding-bottom:1px;
	
}
.supplement-section{
  padding-top:30px;
  padding-bottom:1px;
}
/* ===== 「詳しくはこちら」ボタン画像 ===== */
.product-btn{
  display:inline-block;
	background-img:none;
}
.product-btn img{
  width:180px;
  max-width:100%;
  height:auto;
  display:block;
  transition:opacity .2s;
}
.product-btn:hover img{
  opacity:.8;
}

/* ===== 商品紹介 ===== */
.product-row{
  display:flex;
  align-items:center;
  gap:30px;
	padding-bottom: 100px;
  
  flex-wrap:wrap;
}
.product-row:nth-child(even){flex-direction:row-reverse;}
.product-row .ph{flex:0 0 260px;height:200px;}
.product-text{flex:1;min-width:240px;}
.product-label{
  font-family:"Georgia",serif;
  font-style:italic;
  color:#a8574f;
  font-size:30px;
}
.product-text h3{color:#770c13;
	font-family:"YuMincho StdN","游明朝 StdN","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
	font-size:40px;
	font-weight:900;
	line-height:1.3;
	margin:4px 0 10px;
}

@media (max-width:700px){
  .product-text h3{
    font-size:clamp(20px, 6vw, 28px);
    white-space:nowrap;
  }
}

.feature-block .ph{flex:0 0 240px;height:280px;}

.product-row .product-img{
  flex:0 0 340px;
  height:260px;
  border-radius:8px;
  overflow:hidden;
}
.product-row .product-img img{
  width:100%;
	max-width:100%;   
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== レシピ：見出し ===== */

.recipe-section{
  padding-bottom:50px;
}
.recipe-title-en{
  display:block;
  font-family:"Georgia",serif;
  font-style:italic;
  color:#c9a9a3;
  font-size:40px;
	margin-bottom:8px; /* 文字が大きくなった分、下の余白も少し調整 */
  margin:0 0 4px;
	padding-top:50px;
}

.recipe-title-img{
  display:block;
  height:48px;
  width:auto;
  max-width:100%;
  margin-bottom:30px;
}
@media screen and (max-width:767px){
  .recipe-title-img{
    height:36px;
  }
}


/* ===== レシピ：メイン＋人気レシピ ===== */
.recipe-main-wrap{
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.recipe-main{
  flex:1 1 420px;
	min-width:0;
}
.recipe-main-label{
  font-size:20px;
  font-weight:700;
  color:var(--text);
  margin:0 0 12px;
}
.recipe-main-img{
  display:block;
  border-radius:16px;
  overflow:hidden;
}
.recipe-main-img img{
  width:100%;
	max-width:100%;   /* ← 追加 */
  height:auto;
  display:block;
  transition:opacity .2s;
}
.recipe-main-img:hover img{
  opacity:.85;
}

.recipe-popular{
  flex:0 1 350px;
	min-width:0;
	max-width:100%;
  
}
.recipe-popular-label{
	font-family:"Georgia",serif;
  font-style:italic;
  font-size:20px;
	font-weight:700;
  color:var(--red);
  text-align:center;
  margin:0 0 14px;
}
.recipe-popular-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);  
  gap:10px;
}
.recipe-popular-grid a{
  display:block;
  border-radius:16px;
  overflow:hidden;
}
.recipe-popular-grid img{
  width:100%;
	max-width:100%;   /* ← 追加 */
	aspect-ratio:1 / 1;   /* 幅と高さの比率を1:1に固定（正方形） */
  height:auto;
  object-fit:cover;
  display:block;
 
}
.recipe-popular-grid a:hover img{
  opacity:.85;
}
@media (max-width:700px){
  .recipe-popular{
    margin:0 auto;   /* 左右の余白を自動にして中央寄せ */
  }
}
/* ===== レシピ：もっと見るボタン ===== */
.recipe-more{
  text-align:center;
  margin-top:40px;
}
.recipe-more-btn{
  padding:14px 50px;
  border-radius:30px;
}

/* ===== 取り組み ===== */
.effort-section{
  padding-top:120px;   /* 上部のスペースを拡大 */
  padding-bottom:70px;
	background-color:#e8d2cd;
}
.effort-heading{
  display:flex;
  align-items:center;
  gap:24px;
  color:#770c13;
  font-family:"YuMincho StdN","游明朝 StdN","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
  font-size:50px;
  font-weight:900;
  letter-spacing:6px;
  margin:0 0 50px;
}
.effort-heading-line{
  flex:0 0 80px;
  height:1.5px;
  background:#770c13;
}
.effort-row{
  display:flex;
  align-items:flex-start;
  gap:40px;
  margin-bottom:60px;
  flex-wrap:wrap;
}
.effort-text{
  flex:1 1 400px;
  min-width:280px;
}
.effort-text-title{
  color:var(--text);
  font-size:30px;
  font-weight:900;
  line-height:1.5;
  margin:0 0 20px;
}
.effort-text p{
  font-size:16px;
  color:var(--text);
  line-height:1.9;
  margin:0 0 16px;
}
.effort-url{
  font-size:13px;
  color:var(--sub);
  margin:10px 0 0;
  word-break:break-all;
}
.effort-img{
  flex:1 1 380px;
  min-width:280px;
  max-width:100%;
}
.effort-img img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  border-radius:4px;
}


@media (max-width:700px){
  .effort-heading{
    font-size:32px;
    font-weight:900;
  }
  .effort-text-title{font-size:24px;}
	.effort-text{order:1;}
  .effort-img{order:2;}
}

/* ===== FAQ ===== */
.faq-section{
  background-color:#eee2d3;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.6) 0%, transparent 45%),
    radial-gradient(circle at 75% 75%, rgba(120,90,60,0.12) 0%, transparent 55%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.3) 0px, rgba(255,255,255,0.3) 1px, transparent 1px, transparent 4px);
  padding-top:80px;
  padding-bottom:80px;
}
.faq-heading{
  display:flex;
  align-items:center;
  gap:24px;
  color:var(--red);
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
  font-size:45px;
  font-weight:900;
  letter-spacing:4px;   
  margin:0 0 40px;
}
.faq-heading-line{
  flex:0 0 100px;
  height:1.0px;
  background:#770c13;
}
.faq-heading-text{
  white-space:nowrap;
	color:#770c13 !important;
  font-size:45px !important;
  font-weight:900 !important;
	font-family:"YuMincho StdN","游明朝 StdN","Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif !important;
}
.faq-item{
  border-bottom:none;
  padding:10px 0;
}
.faq-item summary{
  cursor:pointer;
  font-size:20px;
  font-weight:900;
  color:var(--red);
  list-style:none;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-q{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-family:"Georgia",serif;
  font-style:italic;
  font-size:16px;
  font-weight:700;
  flex:0 0 28px;
}
.faq-item .ans{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#fff;
  border-radius:8px;
  padding:14px 18px;
  margin-top:10px;
  font-size:17px;
	 font-weight:500;
  color:var(--text);
}
.faq-a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#efe3df;
  color:var(--red);
  font-family:"Georgia",serif;
  font-style:italic;
  font-size:16px;
  font-weight:700;
  flex:0 0 28px;
}

.faq-more{
  text-align:center;
  margin-top:40px;
}
.faq-more-btn{
  padding:14px 36px;
	background:#5c2020;

}


  .faq-heading-line{
    flex:0 0 30px;
  }
@media (max-width:700px){
  .faq-heading-text{
    font-size:23px !important;
	  white-space:normal;
  }
	.faq-heading{
    flex-wrap:wrap;        /* 追加：アイコンの線と文字が並びきれない場合に折り返す余地を作る */
  }
}