@charset "UTF-8";

/* =========================Recipe ブロック========================= */
.block-recipe{
width:100%;
box-sizing:border-box;
margin-top:90px;
}

.recipe_title {
padding-bottom:10px!important;
margin-bottom:0;
}

/* タイトル行（画像＋h2 横並び） */
.block-recipe__title-row{
max-width:1000px;
margin:0 auto;
display:flex;
align-items:flex-start;
justify-content:center;
gap:44px;
box-sizing:border-box;
}

/* 左右画像 */
.block-recipe__img{
display:block;
width:auto;
height:auto;
max-width:100px;
max-height:100px;
object-fit:contain;
margin-top:20px;
}

/* 説明文 */
.block-recipe__lead{
margin:0 auto 0;
max-width:600px;
text-align:center;
font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
font-size:16px;
font-weight:400;
line-height:1.6;
color:#333;
}

/* =========================SP========================= */
@media (max-width:767px){
.block-recipe{
margin-top:90px;
}
.block-recipe__title-row{
gap:0;/* ← 指定：一旦0 */
}
.block-recipe__img{
max-width:80px;
max-height:80px;
margin-top:-40px;
margin-left:-28px;
margin-right:-28px;
}
.block-recipe__lead{
font-size:clamp(14px, 4vw, 16px);
line-height:1.4em;
}
}

/* =========================レシピFV（タイトル部分）========================= */
.block-recipe-fv{
position:relative;
width:100%;
min-height:420px;
background:url("../../img/usr/recipe/fv_pc.jpg") center center / cover no-repeat;
display:flex;
align-items:center;/* 縦中央 */
justify-content:center;
}

.fv_sub{
min-height:300px;
}

@media (max-width: 767px){
.block-recipe-fv{
min-height:360px;
background:url("../../img/usr/recipe/fv_sp.jpg") center center / cover no-repeat;
}
.fv_sub{
min-height:280px;
}
}

/* 半透明白エリア */
.block-recipe-fv__inner{
width:100%;
background:rgba(255,255,255,0.92);
text-align:center;
padding:40px 20px;
box-sizing:border-box;
}

@media (max-width: 767px){
.block-recipe-fv__inner{
padding:40px 20px 20px;
}
}

/* タイトル */
.block-recipe-fv__title{
margin:0;
font-size:34px;
letter-spacing:0.05em;
line-height:1.3;
color:#333;
font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}

@media (max-width: 767px){
.block-recipe-fv__title{
font-size:26px;
}
}

/* サブテキスト（任意） */
.block-recipe-fv__desc{
margin:15px 0 0;
font-size:16px;
color:#333;
line-height:1.6;
font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}

.block-recipe-detail{
background:#fffcf0;
color:#333;
width:100%;
}

/* ページ左右余白（全体） */
.block-recipe-detail__inner{
max-width:1180px;
margin:0 auto;
box-sizing:border-box;
padding:0 40px 90px;
}

@media (max-width: 767px){
.block-recipe-detail__inner{
padding:0 20px 70px;
}
}

/* =========================ヘッダー========================= */
.block-recipe-detail__header-row{
display:block;
}

/* レシピ名 */
.block-recipe-detail__recipe-title{
margin:50px 0 18px;
color:#333;
font-weight:600;
letter-spacing:0.02em;
line-height:1.2;
font-size:26px;
font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}

@media (max-width: 767px){
.block-recipe-detail__recipe-title{
margin:60px 0 12px;
font-size:22px;
padding:10px 0;
}
}

/* 説明文 */
.block-recipe-detail__recipe-desc{
margin:10px 0 0;
font-size:16px;
line-height:1.6;
color:#555;
font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}

@media (max-width: 767px){
.block-recipe-detail__recipe-desc{
margin:0 0 12px;
font-size:16px;
}
}

/* =========================レシピ画像========================= */
.block-recipe-detail__main-photo{
width:100%;
margin:40px auto 0;
padding:10px 0!important;
background:#fbfaf9;
}

.block-recipe-detail__main-photo img{
width:100%;
height:auto;
display:block;
border-radius:10px;
max-width:700px;
margin:0 auto;
}

@media (max-width: 767px){
.block-recipe-detail__main-photo{
margin-top:0;
}
}

/* 動画 */
iframe.you,
.block-no-code-cms--youtube {
width:100%;
max-width:700px;
display: block;
margin:0 auto;
aspect-ratio: 1 / 1;
}

/* =========================セクション共通========================= */
.block-recipe-detail__section{
padding-top:70px;
/* background:#fbfaf9;*/
}

@media (max-width: 767px){
.block-recipe-detail__section{
padding-top:56px;
}
}

/* セクションタイトル（二重波＋フェード） */
.block-recipe-detail__section-title{
margin:0;
padding:0;
position:relative;
text-align:center;
color:#333;
font-size:22px;
font-weight:600;
letter-spacing:0.06em;
font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
border:none!important;
}

.block-recipe-detail__section-title::before{
content:none;
}

.block-recipe-detail__section-title::after{
content:"";
display:block;
width:180px;
height:25px;
margin:2px auto 0;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%2373aab7' stop-opacity='0'/%3E%3Cstop offset='50%25' stop-color='%2373aab7' stop-opacity='1'/%3E%3Cstop offset='100%25' stop-color='%2373aab7' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 18 C35 6 75 26 110 18 C145 6 185 26 220 18' stroke='url(%23g)' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M0 10 C35 -2 75 18 110 10 C145 -2 185 18 220 10' stroke='url(%23g)' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E")center/contain no-repeat;
}

/* 表示制御用 */
.js-recipe-ingredients-source,
.js-recipe-steps-source {
display:none!important;
}

/* =========================材料（枠線・シャドウ：青系）========================= */
.block-recipe-detail__ingredients{
list-style:none;
margin:26px auto 0;
padding:32px 70px;
max-width:650px;
box-sizing:border-box;
border-radius:22px;
border:0.5px solid transparent;
background:linear-gradient(180deg,#ffffff 0%,#fbfbfb 100%) padding-box,linear-gradient(120deg,#a9d3dc 0%,#d9eef3 30%,#73aab7 50%,#e6f5f8 72%,#5e9ead 100%) border-box;
box-shadow:0 16px 42px rgba(115,170,183,0.06),0 6px 16px rgba(115,170,183,0.10);
}

.block-recipe-detail__ing{
display:grid;
grid-template-columns:auto 1fr auto;
gap:12px;
align-items:baseline;
padding:10px 0;
border-bottom:none;
font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
font-size:16px;
}

@media (max-width: 767px){
.block-recipe-detail__ingredients{
padding:24px 30px;
border-radius:16px;
}
}

/* 長い材料名の折り返し */
.block-recipe-detail__ing-name{
white-space:normal;
word-break:break-word;
}

.block-recipe-detail__ing-qty{
white-space:nowrap;
}

/* 点線リーダー */
.block-recipe-detail__ing-dots{
height:1px;
align-self:center;
background:repeating-linear-gradient(90deg,rgba(0,0,0,0.18),rgba(0,0,0,0.18) 2px,transparent 2px,transparent 6px);
}

/* =========================作り方========================= */
.block-recipe-detail__steps{
list-style:none;
margin:26px auto 0;
padding:0;
max-width:720px;
box-sizing:border-box;
}

.block-recipe-detail__step{
display:flex;
gap:30px;
align-items:center;
padding:16px 0;
border-bottom:1px solid rgba(0,0,0,0.08);
font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
font-size:16px;
line-height:1.7;
}

/* ラッパー（尾ひれをここに付ける） */
.block-recipe-detail__step-no-wrap{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
}

/* 本体（変更なし） */
.block-recipe-detail__step-no{
position:relative;
flex:0 0 auto;
width:45px;
height:22px;
background:rgba(107,75,51,0.12);
/* ★ 左右2点のみ尖らせる（そのまま） */
clip-path: path("M0 11 Q22.5 -8 45 11 Q22.5 30 0 11 Z");
display:flex;
align-items:center;
justify-content:center;
transform:rotate(-20deg);
}

/* 尾ひれ（clip-pathの外側に出す） */
.block-recipe-detail__step-no-wrap::after{
content:"";
position:absolute;
right:-7px;
top:8%;
width:0;
height:0;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
border-left:11px solid rgba(107,75,51,0.12);
/* 本体が -20deg 回転しているので合わせる */
transform:translateY(-50%) rotate(150deg);
}

.block-recipe-detail__step-no-text{
transform:rotate(20deg);
font-weight:700;
color:#6b4b33;
}

.block-recipe-detail__step-body{
min-width:0;
}

h1.block-top-title{
display: flex;
flex-direction: column;
/* ★ column-reverse は使わない（順番は order で固定） */
font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
font-size: 32px;
line-height: 1.3;
color:#333;
padding-top:0;
color:#333;
}

/* Recipes（英） */
h1.block-top-title span.mini{
font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.4;
color:#333;
order:1;
}

/* 日本語1行目（同じ明朝・同じスタイルのまま） */
h1.block-top-title span.jp1{
display:block;
font: inherit;
font-size:18px;
color: inherit;
line-height: inherit;
order:2;
}

/* 日本語2行目（同じ明朝・同じスタイルのまま） */
h1.block-top-title span.jp2{
display:block;
font: inherit;
font-size:36px;
color: inherit;
line-height: inherit;
order:3;
}

@media (max-width: 768px){
h1.block-top-title{
font-size: 28px;
}
h1.block-top-title span.jp2{
font-size:clamp(28px, 9vw, 36px);
}
}

/* スタッフ */
.block-recipe-note{
position:relative;
max-width:920px;
margin:0 auto 0;
padding-bottom:50px;
}

.block-recipe-note__frame{
position:relative;
width:100%;
min-height:440px;
}

.block-recipe-note__svg{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;
}

.block-recipe-note__svg svg{
width:100%;
height:100%;
display:block;
}

.block-recipe-note__inner{
position:relative;
z-index:2;
padding:110px 110px 90px;
display:flex;
align-items:center;
gap:60px;
box-sizing:border-box;
}

.block-recipe-note__image{
flex:0 0 200px;
}

.block-recipe-note__image img{
width:100%;
height:auto;
display:block;
margin: 34px auto 0;
}

.block-recipe-note__content{
flex:1;
}

.block-recipe-note__text{
margin:0;
color:#555;
font-size:16px;
line-height:2;
font-family:"Yu Gothic","Yu Gothic Medium","游ゴシック体","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}

.block-recipe-note__strong{
margin:35px 0 0;
color:#333;
font-size:18px;
font-weight:600;
letter-spacing:0.06em;
line-height:1.6;
font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}

.pane-main{
background:#fffcf0;
}

@media (max-width:767px){
.block-recipe-note__image{
flex:0 0 110px;
}

.block-recipe-note__inner{
width:100%;
margin:0 auto;
padding:75px 36px 55px;
flex-direction:column;
gap:10px;
text-align:center;
}

.block-recipe-note__image{
width:100px;
}

.block-recipe-note__text{
font-size:16px;
line-height:1.5;
text-align:left;
}

.block-recipe-note__strong{
margin: 10px auto 50px;
font-size:18px;
}
}


/* 一覧に戻る */
.block-back-list{
  width:100%;
  text-align:center;
  margin:40px 0 60px;
}

.block-back-list a{
  display:inline-block;
  padding:14px 40px;
  border:1px solid #6f9fb0;
  border-radius:4px;
  color:#6f9fb0;
  text-decoration:none;
  font-family:
    "Zen Old Mincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS PMincho",
    serif;
  font-size:16px;

  letter-spacing:0.08em;
  line-height:1.4;
  transition:all 0.3s ease;
}

@media (hover:hover){
  .block-back-list a:hover{
    background:#6f9fb0;
    color:#fff;
  }
}

@media (max-width:767px){
  .block-back-list{
    margin:30px 0 50px;
  }

  .block-back-list a{
    padding:14px 40px;
    font-size:16px;
  }
}