/* =====================================================================
   心通う島ご飯 / 花椿縁 CameliaEN
   デザインシステム「島の食卓」— 食・人とのつながり・島時間(リゾート)
   温かいクリーム地に、椿の赤を一点
   ===================================================================== */

:root{
  --paper:#F2F8FB;      /* 主キャンバス: ライトブルーの白 */
  --paper-2:#E3EFF6;    /* 副バンド: 少し深いライトブルー */
  --navy:#12293D;       /* インク / 暗部 */
  --navy-2:#1d3c56;
  --sea:#3F97C0;        /* 海の水色(明るいスカイブルー) */
  --camellia:#E15A32;   /* 椿寄りの朱(ビタミン) */
  --camellia-d:#C24623;
  --ink:#283A47;        /* 本文(ブルーグレーの黒) */
  --muted:#5F7484;      /* 補助テキスト(ブルーグレー) */
  --line:#CBDEE9;       /* 罫線(ライトブルーグレー) */
  --white:#fff;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--gothic);color:var(--ink);background:var(--paper);
  line-height:1.95;font-size:16px;letter-spacing:.015em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
.serif{font-family:var(--serif)}

.wrap{max-width:1080px;margin:0 auto;padding:0 26px}
.narrow{max-width:720px}
section{padding:104px 0}

/* --- セクション見出し: 椿赤の短い罫 + 字間ラベル(全セクション統一) --- */
.kick{margin-bottom:22px}
.emb{display:none}
.kick span:not(.emb){display:inline-flex;align-items:center;font-size:12px;letter-spacing:.32em;
  color:var(--camellia);font-weight:700}
.kick span:not(.emb)::before{content:"";width:26px;height:1.5px;background:var(--camellia);margin-right:13px;display:inline-block}

h2{font-family:var(--serif);font-weight:600;font-size:33px;line-height:1.5;color:var(--navy);
  margin-bottom:30px;letter-spacing:.04em}
h3{font-size:18px;color:var(--navy);margin-bottom:10px;font-weight:700}
p{margin-bottom:17px}

/* ===================== ヘッダー ===================== */
header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:50px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.nav .mark{height:38px;width:auto;display:block}
.brandname{display:flex;flex-direction:column;line-height:1.02}
.brandname b{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--navy);letter-spacing:.14em}
.brandname i{font-style:normal;font-size:9px;letter-spacing:.26em;color:var(--sea);font-weight:700;margin-top:3px;text-transform:uppercase}
.langs{display:flex;gap:0}
.langs button{background:transparent;border:none;color:var(--muted);font-size:12px;
  letter-spacing:.06em;padding:6px 11px;cursor:pointer;transition:.2s;font-weight:700;position:relative}
.langs button+button::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:12px;background:var(--line)}
.langs button.active,.langs button:hover{color:var(--camellia)}

/* ===================== ヒーロー ===================== */
.hero{display:flex;align-items:stretch;min-height:0;background:var(--paper-2);padding:0}
.hero-panel{flex:0 0 46%;max-width:580px;background:var(--paper-2);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;padding:40px 56px;position:relative;z-index:2}
.hero-panel .kick{margin-bottom:20px}
.hero-panel .kick span:not(.emb){color:var(--camellia)}
.hero-panel .kick span:not(.emb)::before{background:var(--camellia)}
.hero-brand{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.hero-logo{width:62px;height:auto;flex:none}
.hero-brand h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.2vw,44px);
  letter-spacing:.08em;line-height:1.2;color:var(--navy);margin:0}
.hero .catch{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--navy);margin-bottom:14px;letter-spacing:.04em}
.hero .sub{color:var(--muted);line-height:1.9;margin-bottom:26px}
.tags{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:30px;font-size:12px;
  letter-spacing:.14em;color:var(--sea)}
.tags span:not(:last-child)::after{content:"／";margin:0 .55em;color:rgba(18,41,61,.28)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
/* 変則モザイク: 大1枚(左, 2段ぶち抜き) + 小2枚(右, 縦積み) */
.hero-images{flex:1;display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:2px;height:520px;min-height:0;overflow:hidden}
.hero-images img{width:100%;height:259px;object-fit:cover;display:block;min-height:0}
.hero-images img:first-child{grid-row:1 / 3;height:520px}

/* ボタン: 一次=椿塗り / 二次=白線 */
.btn{display:inline-block;background:var(--camellia);color:#fff;border:1px solid var(--camellia);
  text-decoration:none;font-weight:700;padding:13px 30px;border-radius:2px;letter-spacing:.06em;
  transition:.2s;font-size:14.5px}
.btn:hover{background:var(--camellia-d);border-color:var(--camellia-d)}
.btn-g{background:transparent;color:var(--navy);border:1px solid rgba(18,41,61,.45)}
.btn-g:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ===================== 汎用 図版 ===================== */
figure.ph{margin:0}
/* マット額装(印画紙風): エディトリアルな写真見せ */
.frame{background:#fff;padding:12px;border-radius:2px;box-shadow:0 22px 52px rgba(18,41,61,.16)}
.frame img{width:100%;display:block;border-radius:1px}

/* ===================== ワークショップ(exp) 食×手づくり ===================== */
.exp{background:#fff}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.exp figure.ph{background:#fff;padding:12px;border-radius:2px;box-shadow:0 22px 52px rgba(18,41,61,.16);
  position:relative}
.exp figure.ph::before{content:"";position:absolute;left:-14px;bottom:-14px;width:96px;height:96px;
  border-left:2px solid var(--camellia);border-bottom:2px solid var(--camellia);opacity:.5}
.exp figure.ph img{width:100%;height:400px;object-fit:cover}
.dlabel{font-size:13.5px;letter-spacing:.22em;color:var(--sea);font-weight:700;margin-bottom:8px}
.dname{font-family:var(--serif);font-size:24px;color:var(--camellia);margin-bottom:10px}
.steps{list-style:none;counter-reset:s;margin-top:8px}
.steps li{counter-increment:s;position:relative;padding:13px 0 13px 48px;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:12px;
  font-family:var(--serif);color:var(--camellia);font-size:16px;font-weight:600;letter-spacing:.05em}
.feats{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.feats span{font-size:12.5px;padding:6px 14px;border:1px solid var(--line);border-radius:2px;color:var(--muted)}

/* ===================== 開催情報・料金・講師(det) 人 ===================== */
.det{background:var(--paper-2)}
.det-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.dl{border-top:1px solid var(--line)}
.dl .row{display:flex;gap:18px;padding:16px 2px;border-bottom:1px solid var(--line)}
.dl .k{flex:0 0 108px;color:var(--navy);font-weight:700;font-size:13.5px;padding-top:2px}
.dl .v{font-size:16px}
.price{font-family:var(--serif);font-size:27px;color:var(--camellia);font-weight:700}
.price small{font-size:12px;color:var(--muted);font-weight:400;margin-left:7px}

/* 講師: 円形アバター */
.det-host{display:flex;flex-direction:column;align-items:flex-start;padding-left:12px}
.det-host .dlabel{margin-bottom:16px}
/* 講師: 額装のバストポートレート(縦) */
.det-host .ph{width:238px;max-width:100%;background:#fff;padding:9px;border-radius:2px;overflow:hidden;
  box-shadow:0 18px 42px rgba(18,41,61,.2);margin:0 0 18px}
.det-host .ph img{width:100%;height:300px;object-fit:cover;object-position:center 20%;display:block;border-radius:1px}
.det-host .hname{font-family:var(--serif);font-size:23px;color:var(--navy);margin-bottom:3px}
.det-host .hrole{font-size:11.5px;color:var(--camellia);font-weight:700;letter-spacing:.1em;margin-bottom:14px}
.det-host-bio{color:var(--muted);line-height:1.9;margin-bottom:11px}

/* アクセス: 均整のとれた枠パネル */
.access{margin-top:56px;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:34px 38px}
.access-h{font-family:var(--serif);font-size:19px;color:var(--navy);margin-bottom:12px;font-weight:600;letter-spacing:.04em}
.ac-intro{color:var(--muted);line-height:1.95;margin-bottom:22px;max-width:640px}
.ac-intro a{color:var(--sea);font-weight:700;text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(63,151,192,.45)}
.ac-intro a:hover{color:var(--camellia);border-color:var(--camellia)}
.access-cols{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start}
@media(max-width:820px){.access-cols{grid-template-columns:1fr;gap:22px}.access-map{max-width:400px}}
.access-map{margin:0}
.access-map img{width:100%;height:auto;display:block;border-radius:2px;border:1px solid var(--line)}
.access-map .map-wrap{position:relative;display:block}
.map-ic{position:absolute;width:46px;height:46px;transform:translate(-50%,-50%);
  background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(18,41,61,.22);transition:.15s}
.map-ic:hover{transform:translate(-50%,-50%) scale(1.12)}
.map-ic-ship{color:var(--camellia);border:2px solid var(--camellia)}
.map-ic-air{color:var(--navy);border:2px solid var(--navy)}
.map-ic svg{display:block}
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ac{display:flex;align-items:center;gap:15px;padding:18px 4px;text-decoration:none;color:inherit;
  border-top:1px solid var(--line);transition:.2s}
@media(min-width:721px){.access-grid .ac{padding-left:22px;padding-right:22px}
  .access-grid .ac:nth-child(2){border-left:1px solid var(--line)}}
.ac:hover{color:var(--camellia)}
.ac-ic{flex:none;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(18,41,61,.14)}
.access-grid .ac:first-child .ac-ic{border:2px solid var(--camellia);color:var(--camellia)}
.access-grid .ac:nth-child(2) .ac-ic{border:2px solid var(--navy);color:var(--navy)}
.ac-ic svg{display:block}
.ac-t{font-weight:700;color:var(--navy);font-size:14.5px;margin-bottom:2px}
.ac-d{font-size:12.5px;color:var(--muted);line-height:1.6}
.ac-go{margin-left:auto;flex:none;color:var(--sea);display:flex;opacity:.6;transition:.2s}
.ac-go svg{display:block}
.ac:hover .ac-go{opacity:1;color:var(--camellia)}
.ac-note{font-size:12.5px;color:var(--muted);margin-top:20px;line-height:1.85;
  padding-top:18px;border-top:1px solid var(--line)}

/* ===================== 島の時間(island) 島リゾートの全面ブリード ===================== */
.island{position:relative;background:#fff}
.island .wrap{position:relative;z-index:2}
.island h2{color:var(--navy);margin-bottom:8px}
.island .isl-lead{font-family:var(--serif);font-size:clamp(24px,3vw,32px);letter-spacing:.06em;margin-bottom:22px;color:var(--navy)}
.island .concept-copy{max-width:660px;margin-bottom:46px}
.island .concept-copy p{color:var(--ink);line-height:2.05;margin:0 0 14px}
.island .concept-copy .closing{font-family:var(--serif);font-size:18.5px;color:var(--navy);letter-spacing:.05em;margin-top:18px}
.island .lede{font-size:15px;color:var(--muted);max-width:600px;margin-bottom:40px;line-height:2}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:0}
.card{padding:4px 34px;position:relative}
.card:first-child{padding-left:0}
.card+.card{border-left:1px solid var(--line)}
.card h3{color:var(--navy);font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.04em;margin-bottom:12px}
.card p{margin:0;color:var(--ink);line-height:1.95}
.island figure.ph.port{max-width:340px;margin:46px auto 0;background:#fff;padding:10px;border-radius:2px;
  box-shadow:0 22px 50px rgba(0,0,0,.4)}
.island figure.ph.port img{width:100%;height:auto;display:block}
/* 体験写真ギャラリー(2枚: 横長=みんなの食卓 / 縦=桜ウィーク出店) */
.isl-gallery{display:flex;gap:26px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-top:48px}
.island figure.ph.isl-photo{margin:0;background:#fff;padding:11px;border-radius:2px;
  box-shadow:0 24px 54px rgba(0,0,0,.42);flex:1 1 380px;max-width:540px}
.island figure.ph.isl-photo img{width:100%;height:260px;object-fit:cover;display:block;border-radius:1px}
.island figure.ph.isl-photo .caption{margin-top:12px}
.island figure.ph.isl-photo-p{flex:0 1 250px;max-width:270px}
@media(max-width:820px){
  .isl-gallery{gap:22px;margin-top:34px}
  .island figure.ph.isl-photo,.island figure.ph.isl-photo-p{flex:1 1 100%;max-width:100%}
  .island figure.ph.isl-photo img{height:240px}
}
.caption{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.08em;margin-top:14px}

/* ===================== コンセプト 一期一会 ===================== */
.rule{width:48px;height:2px;background:var(--camellia);margin:0 auto 28px}

/* ===================== 最新情報(news) ===================== */
.news{background:var(--paper-2)}
.news-list{list-style:none;margin-top:6px;border-top:1px solid var(--line)}
.news-item{display:flex;gap:22px;padding:18px 2px;border-bottom:1px solid var(--line);line-height:1.85}
.news-item time{flex:0 0 92px;color:var(--sea);font-weight:700;font-size:13px;letter-spacing:.04em;padding-top:1px}
.news-item span{color:var(--ink)}

/* ===================== Instagram ===================== */
.ig{background:var(--paper)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.ig-cell{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:2px}
.ig-cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ig-cell:hover img{transform:scale(1.06)}
.ig-follow{text-align:center;margin-top:30px}
.ig-btn{display:inline-flex;align-items:center;gap:11px;background:transparent;border:1px solid var(--sea);
  color:var(--sea);text-decoration:none;font-weight:700;padding:12px 26px;border-radius:2px;font-size:14px;transition:.2s}
.ig-btn:hover{background:var(--sea);color:#fff}
.ig-btn svg{display:block}

/* ===================== FAQ ===================== */
.faq{background:#fff}
details{border-bottom:1px solid var(--line);padding:4px 2px}
summary{cursor:pointer;font-weight:700;color:var(--navy);padding:20px 34px 20px 30px;list-style:none;font-size:16px;position:relative}
summary::-webkit-details-marker{display:none}
summary::before{content:"Q";font-family:var(--serif);color:var(--camellia);font-weight:700;margin-right:14px}
summary::after{content:"+";position:absolute;right:6px;top:17px;color:var(--sea);font-size:22px;font-weight:300;transition:.2s}
details[open] summary::after{content:"–"}
details p{padding:0 0 20px 34px;margin:0;color:var(--muted);line-height:1.9}

/* ===================== 問い合わせ(cta) 紺で締める ===================== */
.cta{background:var(--paper-2);color:var(--ink);text-align:center}
.cta .kick{display:flex;justify-content:center}
.cta .kick span:not(.emb){color:var(--camellia)}
.cta .kick span:not(.emb)::before{background:var(--camellia)}
.cta h2{color:var(--navy)}
.cta p{color:var(--muted);max-width:520px;margin:0 auto 36px}
.contacts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.contact{display:flex;align-items:center;gap:15px;text-align:left;text-decoration:none;
  background:#fff;border:1px solid var(--line);
  border-radius:2px;padding:22px 30px;min-width:250px;transition:.2s;box-shadow:0 10px 26px rgba(18,41,61,.08)}
.contact:hover{border-color:var(--camellia);box-shadow:0 14px 32px rgba(18,41,61,.13)}
.contact .ic{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(225,90,50,.13);color:var(--camellia)}
.contact .ic svg{display:block}
.contact .l{font-size:11px;letter-spacing:.2em;color:var(--camellia);margin-bottom:5px}
.contact .v{font-size:16px;font-weight:700;color:var(--navy)}

/* ===================== フッター ===================== */
footer{background:var(--navy);color:rgba(255,255,255,.78);padding:44px 0;text-align:center}
footer .cam{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:16px}
footer .cam img{display:block}
footer .small{font-size:12.5px;line-height:1.9}

/* ===================== モバイル固定CTA ===================== */
.mcta{display:none}

/* ===================== レスポンシブ ===================== */
@media(max-width:820px){
  section{padding:64px 0}
  .wrap{padding:0 22px}
  h2{font-size:26px;margin-bottom:24px}
  .hero{flex-direction:column;min-height:0;padding:0} /* section既定余白の紺帯を除去(1画面目の密度) */
  .hero-panel{flex:none;max-width:none;padding:40px 26px 42px}
  .hero .catch{font-size:18px}
  .hero-images{min-height:0;height:340px;flex:none;overflow:hidden}
  .hero-images img{height:169px}
  .hero-images img:first-child{height:340px}
  .langs button{padding:12px 11px} /* タップ領域拡大 */
  .grid2,.det-grid{grid-template-columns:1fr;gap:34px}
  .exp figure.ph img{height:300px}
  .exp figure.ph::before{width:70px;height:70px;left:-8px;bottom:-8px}
  .det-host{padding-left:0;align-items:center;text-align:center}
  .det-host-bio{text-align:left}
  .access{padding:26px 22px}
  .access-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:0}
  .card{padding:22px 0}
  .card:first-child{border-bottom:1px solid rgba(255,255,255,.22)}
  .card+.card{border-left:none}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .news-item{flex-direction:column;gap:3px}
  .news-item time{flex:none}
  .contacts{flex-direction:column;align-items:stretch}
  .mcta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:96;padding:10px 14px;
    background:rgba(242,248,251,.97);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .mcta a{display:block;background:var(--camellia);color:#fff;text-align:center;padding:13px;border-radius:2px;
    text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.05em}
  body{padding-bottom:74px}
}

/* ヘッダー: 名称ロゴ(花椿縁 CameliaEN, 縁に赤の差し色) */
.nav .wordmark{height:30px;width:auto;display:block}
@media(max-width:820px){ .nav .wordmark{height:26px} }

/* === Cookie同意バナー === */
.consent{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--navy);color:#fff;
  padding:14px 22px;box-shadow:0 -6px 24px rgba(0,0,0,.25);align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.consent.show{display:flex}
.consent .consent-msg{font-size:13px;margin:0;color:rgba(255,255,255,.9)}
.consent .consent-msg a{color:#F6C445;text-decoration:underline}
.consent-btns{display:flex;gap:10px;flex:none}
.consent-btns button{border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;
  border-radius:3px;padding:9px 20px;font-size:13px;font-weight:700;cursor:pointer}
.consent-btns .c-yes{background:var(--camellia);border-color:var(--camellia)}
.consent-btns .c-yes:hover{background:var(--camellia-d)}
@media(max-width:820px){ .consent{padding:12px 16px 78px} }

/* === 規約ページ === */
.legal{padding:60px 0 80px;background:var(--paper)}
.legal h1{font-family:var(--serif);font-size:28px;color:var(--navy);margin-bottom:24px;letter-spacing:.03em}
.legal h2{font-size:17px;color:var(--navy);margin:28px 0 8px;letter-spacing:.02em}
.legal p,.legal li{font-size:14px;color:var(--ink);line-height:1.9}
.legal ul{margin:6px 0 6px 1.3em}
.legal a{color:var(--sea)}
.legal-date{color:var(--muted);font-size:12.5px;margin-top:26px}
.legal .en{color:var(--muted);margin-top:-6px}
.legal .en-inline{color:var(--muted);font-weight:400;font-size:.72em;letter-spacing:.02em}

/* === ワークショップ: べっこう寿司ができるまで(工程フォト) === */
.process{margin-top:56px;counter-reset:pr}
.process .dlabel{margin-bottom:16px}
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px;max-width:880px;margin:0 auto}
.proc-grid figure{margin:0;counter-increment:pr}
.proc-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;display:block}
.proc-grid figcaption{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.75;letter-spacing:.02em}
.proc-grid figcaption::before{content:counter(pr,decimal-leading-zero);font-family:var(--serif);
  color:var(--navy);font-weight:700;margin-right:8px;font-size:19px}
@media(max-width:820px){
  .process{margin-top:38px}
  .proc-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
}

/* 体験の流れ: S字動線ガイド(蛇行配置+矢印) */
.proc-grid figure{position:relative}
.proc-grid figure::after{content:"";position:absolute;width:48px;height:48px;border-radius:50%;
  background:#F0952F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23FFFFFF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px 26px no-repeat;
  border:3px solid #fff;box-shadow:0 5px 14px rgba(18,41,61,.25);z-index:2;display:none}
@media(min-width:821px){
  .proc-grid figure:nth-child(4){grid-row:2;grid-column:3}
  .proc-grid figure:nth-child(5){grid-row:2;grid-column:2}
  .proc-grid figure:nth-child(6){grid-row:2;grid-column:1}
  .proc-grid figure:nth-child(1)::after,.proc-grid figure:nth-child(2)::after{display:block;right:-41px;top:calc(50% - 48px)}
  .proc-grid figure:nth-child(3)::after{display:block;left:50%;bottom:-52px;transform:translateX(-50%) rotate(90deg)}
  .proc-grid figure:nth-child(4)::after,.proc-grid figure:nth-child(5)::after{display:block;left:-41px;top:calc(50% - 48px);transform:rotate(180deg)}
}
@media(max-width:820px){
  .proc-grid figure:nth-child(3){grid-row:2;grid-column:2}
  .proc-grid figure:nth-child(4){grid-row:2;grid-column:1}
  .proc-grid figure:nth-child(5){grid-row:3;grid-column:1}
  .proc-grid figure:nth-child(6){grid-row:3;grid-column:2}
  .proc-grid figure::after{width:42px;height:42px;background-size:23px 23px}
  .proc-grid figure:nth-child(1)::after,.proc-grid figure:nth-child(5)::after{display:block;right:-30px;top:calc(50% - 45px)}
  .proc-grid figure:nth-child(2)::after,.proc-grid figure:nth-child(4)::after{display:block;left:50%;bottom:-48px;transform:translateX(-50%) rotate(90deg)}
  .proc-grid figure:nth-child(3)::after{display:block;left:-30px;top:calc(50% - 45px);transform:rotate(180deg)}
}

/* === 体験者の声 === */
.det{padding-bottom:56px}
.voices{background:var(--paper);padding-top:64px}
.voices-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:stretch;max-width:880px;margin:0 auto}
.voice{background:#fff;border-radius:2px;padding:26px 24px 22px;box-shadow:0 14px 34px rgba(18,41,61,.09);position:relative;display:flex;flex-direction:column}
.voice::before{content:"\201C";font-family:var(--serif);font-size:34px;line-height:1;color:var(--camellia);display:block;margin-bottom:8px}
.voice p{color:var(--ink);line-height:1.95;margin:0 0 16px;flex:1}
.voice .who{font-size:12px;color:var(--muted);letter-spacing:.04em;border-top:1px solid var(--line);padding-top:12px}
.voice .who b{color:var(--navy);font-weight:700;margin-right:8px}
.voice .badge{position:absolute;top:16px;right:16px;font-size:10px;letter-spacing:.14em;color:var(--sea);border:1px solid rgba(63,151,192,.55);border-radius:2px;padding:2px 8px;background:rgba(255,255,255,.92)}
@media(max-width:820px){.voices-grid{grid-template-columns:1fr;gap:16px}}

/* 声カードの写真(参加者の一皿) */
.voice .vimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;margin-bottom:16px;display:block}
.voice.has-img::before{display:none}