@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   meilabo.co.jp のメインビジュアルを CSS で再現
   ─ 値はすべて実サイトの style.min.css から抽出したものをそのまま使用 ─
   変更したのは「写真を4枚のスライドにした」ことだけ。
   枠・位置・余白・文字サイズは1つも変えていません。
   ══════════════════════════════════════════════════════════════ */

/* ── リセット（ress.css 相当・実サイトと同じ） ── */
*,::after,::before{box-sizing:inherit}
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%;font-size:62.5%}
body,h1,h2,h3,p,ul,li,figure,button{margin:0;padding:0}
ul,li{list-style:none}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
svg:not(:root){overflow:hidden}

/* ── 実サイトの body ── */
body{
  background:#fff;
  font-family:"Noto Sans JP",sans-serif;
  color:#00192c;
  font-size:1.6rem;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.1em;
}
@media screen and (max-width:600px){ html{font-size:58%} }


/* ══════════════════════════════════════════════════════════════
   ヘッダー ─ recruit.oyatsu.co.jp の l-header を完全コピー
   値はすべて実サイトの style.css から抽出したものをそのまま使用
   ══════════════════════════════════════════════════════════════ */
:root{
  --base:#000; --red1:#E70012; --yellow1:#FFD506; --yellow2:#FAF7EC;
  --gray1:#CECECE; --gray2:#E6E4D9; --gray3:#848484;
}
/* ★おやつのルート基準（1320で10px、以下は縮む）
   ※meilabo側は 62.5%＝10px。1320px以下でのみ おやつ式に縮小する */
@media only screen and (max-width:1320px){ html{font-size:.7575757576vw} }
@media only screen and (max-width:768px){ html{font-size:2.6666666667vw} }

.l-header{display:block;width:100%;position:relative;top:0;left:0;z-index:20}

.l-header__logo{
  display:block;width:24rem;padding:5rem 5.5rem 3.6rem;border-radius:0 0 9rem 0;
  box-sizing:border-box;background:#FFF;position:absolute;top:0;left:0;
}
.l-header__logo_inner{display:flex;flex-direction:column;gap:2rem}
.l-header__logo_inner picture{display:block;font-size:1px}
.l-header__logo img{width:100%;height:auto}

.l-header__container{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  width:calc(100% - 24rem);height:10rem;margin:0 0 0 auto;padding:0 3rem 0 0;
  box-sizing:border-box;background:#FFF;position:relative;
}
.l-header__container::before{
  content:"";width:9rem;height:8.97rem;
  background:url(../img/oyatsu/header-decoration.webp) 50% 50%/100% no-repeat;
  position:absolute;top:100%;left:0;
}

.l-header-globals{display:flex;align-items:center;gap:2rem}
.l-header-globals__list{display:flex;align-items:center;gap:3rem;
  line-height:1.4285714286;letter-spacing:.1em;font-size:1.4rem;font-weight:600}
.l-header-globals__list_link{text-decoration:none;color:var(--base);transition:opacity .3s}
.l-header-globals__list_link:hover{opacity:.6}

.l-header__entry-wrap{position:relative;z-index:40}
.l-header__entry-toggle{
  display:grid;place-content:center;width:21.2rem;min-height:5rem;border:none;border-radius:50px;
  box-sizing:border-box;background:var(--red1);cursor:pointer;font-family:inherit;color:#FFF;
  text-align:center;position:relative;
}
.l-header__entry-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.l-header__entry-line1{line-height:1;letter-spacing:.1em;font-size:1.8rem;font-weight:700}
.l-header__entry-line2{margin-top:.3rem;line-height:1;letter-spacing:.1em;font-size:1.3rem;font-weight:700}
.l-header__entry-icon{position:absolute;top:50%;right:1.9rem;width:1.164rem;height:.682rem;
  transform:translateY(-50%);background:url(../img/oyatsu/accordion-icon.svg) 50% 50%/100% no-repeat}
.l-header__entry-wrap.is-open .l-header__entry-icon{transform:translateY(-50%) scaleY(-1)}
.l-header__entry-panel{
  display:none;position:absolute;top:calc(100% + .9rem);right:0;min-width:21.2rem;
  padding:1.8rem 2rem;border-radius:.5rem;box-sizing:border-box;background:#FBF7EC;
}
.l-header__entry-wrap.is-open .l-header__entry-panel{display:block}
.l-header__entry-panel_link{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  line-height:1;letter-spacing:.1em;text-decoration:none;font-size:1.4rem;font-weight:700;color:var(--base)}
.l-header__entry-panel_link+.l-header__entry-panel_link{margin-top:1rem}
.l-header__entry-panel_text{white-space:nowrap;color:#E70013}
.l-header__entry-panel_ico{flex:none;width:1.5rem;height:1.5rem;background:50% 50%/100% no-repeat}
.l-header__entry-panel_ico.is-arrow01{background-image:url(../img/oyatsu/link-arrow-01-red.svg)}
.l-header__entry-panel_ico.is-arrow02{background-image:url(../img/oyatsu/link-arrow-02-red.svg)}

.l-header__hamburger-btn{
  display:none;place-content:center;width:7rem;aspect-ratio:1/1;border:.3rem solid #FFF;border-radius:2.5rem;
  box-shadow:0 .3rem .6rem rgba(0,0,0,.08);box-sizing:border-box;background:var(--yellow1);
  position:fixed;top:1rem;right:1rem;z-index:30;
}
.l-header__hamburger-btn::before{content:"";width:2.8rem;height:2.5rem;margin:0 auto;
  background:url(../img/oyatsu/menu-btn-open.webp) 50% 50%/100% no-repeat}
.l-header__hamburger-btn::after{content:"menu";line-height:1;letter-spacing:.05em;font-size:1.2rem;
  font-weight:500;font-family:"futura-pt",sans-serif;color:var(--red1)}
.l-header__hamburger-btn.is-open::before{background-image:url(../img/oyatsu/menu-btn-close.webp)}
.l-header__hamburger-btn.is-open::after{content:"close"}

/* ── ドロワー（おやつ .l-hamburger を1:1移植） ── */
.l-hamburger{
  display:none;width:100%;height:100%;overflow:hidden;overflow-y:auto;
  position:fixed;top:0;left:0;z-index:20;
}
.l-hamburger.is-open{display:block}
.l-hamburger__head{padding:1.5rem 2rem 3rem;box-sizing:border-box;background:var(--yellow1)}
.l-hamburger__logo_link{display:flex;align-items:center;gap:1.5rem}
.l-hamburger__logo_company{width:16.5rem}
.l-hamburger__logo_company img{width:100%}
.l-hamburger__btns{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:2rem auto 0}
.l-hamburger__btns_row{display:flex;gap:.5rem;width:100%}
.l-hamburger__btns_item{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  width:100%;height:6rem;padding-left:1.2rem;border:.2rem solid var(--red1);border-radius:5rem;
  box-sizing:border-box;background:#FFF;line-height:1.9rem;letter-spacing:.05em;
  text-decoration:none;font-size:1.6rem;font-weight:600;color:var(--base);
}
.l-hamburger__btns_item--half{flex:1;width:auto;min-width:0}
.l-hamburger__btns_item span{display:flex;align-items:center;gap:.5rem;text-align:left}
.l-hamburger__btns_item span::before{content:"";flex:none;background:50% 50%/100% no-repeat}
.l-hamburger__btns_entry span::before{width:2.577rem;height:2.589rem;background-image:url(../img/oyatsu/link-arrow-01-red.svg)}
.l-hamburger__btns_career span::before{width:2.7rem;height:2.7rem;background-image:url(../img/oyatsu/link-arrow-02-red.svg)}
.l-hamburger__btns_casual span::before{width:2.7rem;height:2.7rem;background-image:url(../img/oyatsu/link-arrow-02-red.svg)}
.l-hamburger__body{padding:4rem 4rem 6rem;box-sizing:border-box;background:var(--red1);text-align:left}
.l-hamburger__list{border-top:1px solid #FFF}
.l-hamburger__list_item{padding:2rem 0;border-bottom:1px solid #FFF;box-sizing:border-box}
.l-hamburger__list_link{display:flex;align-items:center;gap:1.5rem;line-height:1.5;letter-spacing:.1em;
  text-decoration:none;font-size:1.8rem;font-weight:600;color:#FFF}
.l-hamburger__list_link::before{content:"";flex:none;width:3.4rem;height:3.4rem;
  background:url(../img/oyatsu/link-arrow-02-white.svg) 50% 50%/100% no-repeat}
.l-hamburger__child{margin:2rem 0 0;line-height:2.6666666667;letter-spacing:.1em;font-size:1.5rem;font-weight:700}
.l-hamburger__child_item{display:flex;align-items:center;gap:.5em}
.l-hamburger__child_item::before{content:"-";color:#FFF}
.l-hamburger__child_link{text-decoration:none;color:#FFF;line-height:1.4}
.l-hamburger__bottom{display:flex;justify-content:center;margin:5rem auto 0}
.l-hamburger__bottom_list{display:flex;flex-direction:column;gap:2rem;line-height:1.5;
  letter-spacing:.1em;font-size:1.5rem;font-weight:700}
.l-hamburger__bottom_link{display:flex;gap:1.36rem;text-decoration:none;color:#FFF}
.l-hamburger__bottom_link::before{content:"";flex:none;width:2.641rem;aspect-ratio:1/1;
  background:url(../img/oyatsu/link-arrow-01-white.svg) 50% 50%/100% no-repeat}

@media only screen and (max-width:768px){
  .l-header__logo{width:11rem;padding:1.7rem 2.6rem 2.1rem 2rem;border-radius:0 0 4rem 0}
  .l-header__logo_inner{gap:1rem}
  .l-header__container{display:none}
  .l-header__hamburger-btn{display:grid}
}
@media only screen and (min-width:769px){
  .l-hamburger{display:none !important}
}

/* ★おやつのヘッダーは通常フロー（高さ10rem）なので、
   meilabo のMVを上に引き上げてヘッダーを重ねる。
   MV自身の寸法（95vh/78%/22%…）は一切変えていない。 */
@media only screen and (min-width:769px){
  .main-visual{margin-top:-10rem}
}

/* ── ボタン（meilabo の .btn 群） ── */
.btn{display:inline-block;text-decoration:none;text-align:center;font-weight:700;position:relative;
  cursor:pointer;background:#fff;border-width:1px;border-style:solid;border-color:transparent}
.btn--default{min-width:240px;padding:14px 50px!important;font-size:1.6rem!important}
.btn--lg{min-width:270px;padding:14px 50px!important;font-size:2rem!important}
.btn--primary{background:#e8373d!important;color:#fff!important;border-color:transparent!important}
.btn--round{border-radius:200px}
.btn--animation{transition:all .3s}
.btn--animation.btn--primary:hover{border-color:#e8373d!important;background:#fff!important;color:#e8373d!important}
.btn--rize.btn--primary{box-shadow:0 0 15px rgba(232,55,61,.6)}

/* ══════════ メインビジュアル ══════════ */
.main-visual,.main-visual-img{height:95vh;min-height:850px;max-height:1100px}
.main-visual{position:relative;z-index:0;transition:transform .3s}
/* ★meilabo は position:fixed（写真だけ画面に貼り付き、枠だけがスクロールする）。
   枠と写真を一緒に動かすため absolute にして .main-visual の中に収めた。
   寸法（95vh / width:78% / top:0 / right:0）は変えていない。 */
.main-visual-img{position:absolute;top:0;right:0;width:78%;z-index:0;overflow:hidden;transition:transform .3s}

/* ★ここだけ変更：1枚の <img> を4枚のスライドに ★
   .main-visual-img img の指定（width:100%/absolute/top:0/left:50%/translateX(-50%)）は
   そのまま各スライドに適用している。 */
.mv-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.mv-slide.is-active{opacity:1}
.main-visual-img img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:50%;transform:translateX(-50%)}

.main-visual__mask{width:22%;height:100%;background:#fff;position:absolute;z-index:1;top:0;left:0}
.main-visual__mask-curve{position:absolute;z-index:1;bottom:0;left:22%}
.main-visual__mask-curve img{width:50%}

.main-visual__text{position:absolute;z-index:3;top:50%;left:10%;transform:translateY(-50%)}
.main-visual__text .catchcopy{font-size:4.6rem;font-weight:700;margin-bottom:3rem}
.main-visual__text .catchcopy p{
  letter-spacing:1rem;display:inline-block;background:rgba(255,255,255,.9);
  border-radius:20px;padding:1rem 3rem;margin-left:-3rem;
}
.main-visual__text .catchcopy p:nth-of-type(2){margin-top:1rem}
.main-visual__text .catchcopy p span:nth-child(1),
.main-visual__text .catchcopy p span:nth-child(4){color:var(--red1)}
.main-visual__text .catchcopy p span:nth-child(2){color:#F2A900}
.main-visual__text .catchcopy p span:nth-child(3){color:#B8860B}
.main-visual__text .intro{margin-bottom:6rem;line-height:2.2}

.main-visual .btn{position:relative;padding-left:80px!important}
.main-visual .btn .icon{display:block;background:#fff;position:absolute;padding:.7rem;border-radius:50%;
  left:6px;top:50%;transform:translate(0,-50%) rotate(0);transition:all .5s}
.main-visual .btn:hover .icon{transform:translate(20px,-50%) rotate(360deg)}

.main-visual__sub-text{position:absolute;top:25%;left:3em;z-index:2;font-size:1.4rem;color:#c4c4c4;
  transform:rotate(90deg);transform-origin:top left;white-space:nowrap;letter-spacing:.14em}

/* ★スライドのインジケータ（写真をスライドにしたため追加）
   位置は写真の内側・右下。既存の枠には一切干渉しない。 */
.mv-dots{position:absolute;z-index:4;right:5%;bottom:8%;display:flex;gap:10px}
.mv-dots button{width:30px;height:4px;border-radius:4px;background:rgba(255,255,255,.55);
  transition:background-color .3s,width .3s}
.mv-dots button.is-active{background:#e8373d;width:46px}

/* ══════════ 実サイトのブレークポイント（値そのまま） ══════════ */
@media screen and (max-width:1600px){
  .main-visual-img img{width:auto;height:130%}
}
@media screen and (max-width:1050px){
  .main-visual,.main-visual-img{min-width:auto;max-width:auto;min-height:800px;max-height:950px}
  .main-visual-img{width:85%}
  .main-visual-img img{height:100%}
  .main-visual__mask{width:15%}
  .main-visual__mask-curve{left:15%}
  .main-visual__text{top:auto;bottom:10%;left:3%;transform:translateY(0)}
  .main-visual__text .catchcopy{font-size:5rem;margin-bottom:0}
  .main-visual__text .intro{display:none}
  .main-visual__text .btn{display:none}
  .main-visual__sub-text{top:20%;left:6%}
  .mv-dots{right:4%;bottom:4%}
}
@media screen and (max-width:600px){
  .main-visual,.main-visual-img{height:600px;min-height:auto;max-height:none}
  .main-visual-img{width:90%}
  .main-visual__mask{width:10%}
  .main-visual__mask-curve{left:10%}
  .main-visual__text{bottom:8%;left:3%}
  .main-visual__text .catchcopy{font-size:3.2rem}
  .main-visual__text .catchcopy p{padding:1rem 2rem;margin-left:-2rem;letter-spacing:.1em}
  .main-visual__sub-text{font-size:1.2rem;top:110px;left:7%}
}
@media screen and (max-width:400px){
  .main-visual,.main-visual-img{height:500px}
  .main-visual__text .catchcopy{font-size:2.6rem}
  .main-visual__sub-text{display:none}
}

/* ══════════════════════════════════════════════════════════════
   ★追従CTA（スマホのみ）
   meilabo は SP で .intro と .btn を display:none にしており、
   そのままだとスマホのFVにボタンが1つも無くなる。
   MVの寸法は1pxも触らず、画面下に固定バーで導線を補う。
   仕様は 20260813_トップページ_設計体系.md §3 のとおり。
   ══════════════════════════════════════════════════════════════ */
.sp-cta{display:none}
@media only screen and (max-width:768px){
  .sp-cta{
    display:flex;gap:.8rem;width:100%;padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
    box-sizing:border-box;background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    box-shadow:0 -.2rem 1.2rem rgba(0,0,0,.12);
    position:fixed;left:0;bottom:0;z-index:19;
  }
  .sp-cta__item{
    display:flex;align-items:center;justify-content:center;gap:.6rem;
    flex:1;min-width:0;height:5.4rem;border-radius:5rem;box-sizing:border-box;
    line-height:1.25;letter-spacing:.04em;text-align:center;text-decoration:none;
    font-size:1.4rem;font-weight:700;
  }
  .sp-cta__item::before{content:"";flex:none;width:2.2rem;height:2.2rem;
    background:50% 50%/100% no-repeat}
  /* 主導線＝開業ガイド（赤ベタ） */
  .sp-cta__item--main{background:var(--red1);color:#FFF}
  .sp-cta__item--main::before{background-image:url(../img/oyatsu/link-arrow-02-white.svg)}
  /* 副導線＝説明会（白地・赤枠） */
  .sp-cta__item--sub{background:#FFF;border:.2rem solid var(--red1);color:var(--base)}
  .sp-cta__item--sub::before{background-image:url(../img/oyatsu/link-arrow-01-red.svg)}
  /* ドロワーを開いている間は隠す */
  body.is-nav-open .sp-cta{display:none}
}

/* ══════════════════════════════════════════════════════════════
   NEWS スライダー ─ autoro.io の「VOICE」セクションを完全コピー
   値はすべて実サイトのCSSから抽出したものをそのまま使用。
   スライダーは slick（実サイトと同じ設定 config.slick.js）。
   ・「導入事例」（ロゴ列＋ボタン）＝ .c-section-voice__foot / __btn は不採用
   ・ホバー時に出る猫のイラストは autoro のキャラクターなので不採用
   ══════════════════════════════════════════════════════════════ */

/* ── 黄色ゾーン（NEWS〜3つ山）──
   パン柄（柾木さん支給）をこのラッパーに敷くことで、NEWSと3つ山の
   セクションをまたいでも柄が途切れない。タイルはシームレス確認済み。 */
.bread-zone{background:var(--yellow1) url(../img/pattern-bread.webp) 0 0/640px auto repeat}
@media only screen and (max-width:768px){ .bread-zone{background-size:420px auto} }

/* ★meilaboのMV写真は position:fixed / z-index:-1 なので、MVより下の内容に
   地色を敷かないと写真が透ける。実サイトも以降のセクションは白地。
   MV自身の指定は触っていない。 */
/* display:flow-root ＝ 中の margin-top:200px が外に抜けない（マージン相殺の防止）。
   overflow:hidden だとスライダー側に影響が出るのでこちらを使う。 */
.l-contents{position:relative;z-index:1;background:#fff;display:flow-root;padding-bottom:100px}
/* スマホは下端の追従CTAバー（約74px）に隠れないよう余白を足す */
@media only screen and (max-width:768px){ .l-contents{padding-bottom:120px} }

/* ── slick 本体（実サイトの取り込み分をそのまま） ── */
.slick-slider{box-sizing:border-box;-webkit-touch-callout:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list,.slick-slider{position:relative;display:block}
.slick-list{overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer}
.slick-slider .slick-list,.slick-slider .slick-track{transform:translateZ(0)}
.slick-track{position:relative;top:0;left:0;display:block;margin-right:auto;margin-left:auto}
.slick-track:after,.slick-track:before{display:table;content:""}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;min-height:1px;height:100%}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-arrow.slick-hidden{display:none}
.slick-next,.slick-prev{position:absolute;top:50%;display:block;padding:0;width:20px;height:20px;border:none;
  font-size:0;line-height:0;cursor:pointer;transform:translateY(-50%)}
.slick-next,.slick-next:focus,.slick-next:hover,.slick-prev,.slick-prev:focus,.slick-prev:hover{outline:0;background:0 0;color:transparent}
.slick-prev{left:-25px} .slick-next{right:-25px}

/* ── セクション ── */
/* ★autoro は body font-size:16px 基準、当ページは meilabo/おやつ流儀の 62.5%（=10px）基準。
   remのまま持ってくると 0.625倍に縮むので、この区画の rem はすべて px に換算してある
   （3rem→48px, 1.125rem→18px, .75rem→12px, .6875rem→11px）。
   字送り・行間・書体も autoro の body 指定（letter-spacing:.02em / line-height:1.5）に合わせる。 */
/* ★autoro は margin-top:200px ／ __body margin-top:67px ＋ 大見出し48px だが、
   「FVのすぐ下にNEWSとスライドを出す」ため、見出しは NEWS だけにして間隔を詰めた。
   スライダー本体（カード300px・矢印・余白）は実サイトの値のまま。 */
.c-section-voice{margin-top:0;padding-top:56px;letter-spacing:.02em;line-height:1.5;color:#000;font-weight:500}
@media screen and (max-width:767px){ .c-section-voice{padding-top:8vw} }
.c-section-voice__head{text-align:center}
.c-section-voice__body{overflow:hidden;margin-top:24px;width:100%}
@media screen and (max-width:767px){ .c-section-voice__body{margin-top:5.33333vw} }

.c-ttl{letter-spacing:.02em;font-size:48px;font-weight:700;line-height:1.4}
@media screen and (max-width:767px){ .c-ttl{font-size:8.53333vw;line-height:1.5} }
.c-ttl__sub{display:block;letter-spacing:.1em;font-weight:900;font-size:18px;line-height:2.2}
@media screen and (max-width:767px){ .c-ttl__sub{font-size:4.8vw;line-height:2.2} }
@media screen and (min-width:768px){ .c-section-voice .pc-hide{display:none} }

/* ── スライダー ── */
.c-slider-voice .slick-next,.c-slider-voice .slick-prev{
  top:23%;z-index:1;width:40px;height:40px;border-radius:50%;background-color:#000;transform:translateZ(0)}
.c-slider-voice .slick-next:before,.c-slider-voice .slick-prev:before{content:""}
.c-slider-voice .slick-next:after,.c-slider-voice .slick-prev:after{
  position:absolute;top:50%;left:50%;width:14px;height:12px;content:"";transform:translate(-50%,-50%)}
.c-slider-voice .slick-prev{left:calc(50% - 480px)}
.c-slider-voice .slick-prev:after{background:url(../img/ui/icon_slider_arrow-left.svg) 0 0 no-repeat;background-size:100% 100%}
.c-slider-voice .slick-next{right:calc(50% - 480px)}
.c-slider-voice .slick-next:after{background:url(../img/ui/icon_slider_arrow-right.svg) 0 0 no-repeat;background-size:100% 100%}
@media screen and (min-width:768px){
  .c-slider-voice .slick-arrow:hover{animation:Bounce .5s cubic-bezier(.175,.885,.32,1.275)}
}
@keyframes Bounce{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.c-slider-voice__slides{opacity:0;transition:opacity .8s}
.c-slider-voice__slides.slick-initialized{opacity:1}
.c-slider-voice__slide{margin-right:10px;margin-left:10px;max-width:300px}
@media screen and (max-width:767px){ .c-slider-voice__slide{margin-right:2.66667vw;margin-left:2.66667vw;max-width:none} }
.c-slider-voice__slide img{width:100%}
.c-slider-voice__link{display:inline-block;width:300px;height:100%}
@media screen and (max-width:767px){ .c-slider-voice__link{width:80vw} }
@media screen and (min-width:768px){
  .c-slider-voice__link:hover .c-card__head img{opacity:.5}
  .c-slider-voice__link:hover .c-card__ttl{color:var(--red1)}
  .c-slider-voice__link:hover .c-card__list{opacity:.5}
}

/* ── カード ── */
.c-card__inner{display:block}
.c-card__head{position:relative;transition:.3s}
.c-card__head img{border-radius:20px}
.c-card__head-inner{position:relative;overflow:hidden}
.c-card--top .c-card__head-inner{height:180px}
.c-card--top .c-card__head-inner img{object-fit:cover;height:100%}
.c-card__body{margin-top:20px}
@media screen and (max-width:767px){ .c-card__body{margin-top:2.66667vw} }
.c-card__ttl{display:-webkit-box;overflow:hidden;font-weight:700;font-size:18px;line-height:1.556;
  transition:.3s;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media screen and (max-width:767px){ .c-card__ttl{font-size:4.8vw} }
.c-card__data{margin-top:14px;color:#969696;letter-spacing:.05em;font-size:12px}
@media screen and (max-width:767px){ .c-card__data{margin-top:2.66667vw;font-size:3.2vw} }
.c-card__data:before{position:relative;top:3px;display:inline-block;margin-right:6px;width:14px;height:14px;
  background:url(../img/ui/icon_clock.svg) 0 0 no-repeat;background-size:100% 100%;content:""}
@media screen and (max-width:767px){ .c-card__data:before{top:.53333vw;margin-right:1.6vw;width:3.73333vw;height:3.73333vw} }
.c-card__list{display:flex;margin-top:-3px;margin-left:-10px;flex-wrap:wrap}
@media screen and (max-width:767px){ .c-card__list{margin-top:0} }
.c-card__list-item{margin-top:10px;margin-left:10px}
@media screen and (max-width:767px){ .c-card__list-item{margin-top:2.66667vw;margin-left:2.66667vw} }
.c-label{display:inline-block;padding:0 12px;border-radius:100px;
  background-color:#FFF;color:#3A2400;border:1.5px solid #3A2400;
  font-weight:700;font-size:11px;line-height:2;cursor:pointer}
@media screen and (min-width:768px){ .c-label:hover{background:#3A2400;color:#FFF;transition:.3s} }
@media screen and (max-width:767px){ .c-label{padding:0 2.93333vw;font-size:2.93333vw} }
.c-label__txt{display:block;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════
   リエゾンプロジェクトとは ─ recruit.oyatsu.co.jp の
   「おやつ One Team」（.p-home-team）を完全コピー
   値はすべて実サイトの style.css から抽出したものをそのまま使用。
   変えたのは次の3点だけ：
   ① 白い部分の形 ＝ おやつは「中心(1400,1492)/半径1392 の円」（実測）だったが、
      リエゾンのロゴ img/logo.svg のアウトライン（3つ山）を全幅に伸ばした
      img/ui/bread-arch.svg に差し替え
   ② アーチ文字 ＝ おやつは背景画像に焼き込み。こちらは inline SVG の textPath
   ③ 写真・スナックのイラスト ＝ 先方の素材なので、リエゾンの写真の丸抜きに差し替え
   ══════════════════════════════════════════════════════════════ */
/* ★山のSVG＝ロゴ中央の山（いちばんなめらかな弧）を3回タイルしたもの。
   深さ/幅 0.191 はロゴの実比率そのまま。両端は谷の高さで終わるので
   画面端に黄色のポケットは出ない。
   山の頂上の位置は background-position で固定：PC=9vw / SP=15vw。
   SVGはCSSに直接埋め込み（別ファイルだとCSSとSVGでキャッシュ世代がずれるため）。 */
.p-about{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 94' preserveAspectRatio='none'%3E%3Cpath fill='%23FFF' d='M 0 94 L 0.0 89.0 L 0.9 87.8 L 3.8 84.3 L 6.7 80.9 L 9.8 77.6 L 12.9 74.3 L 16.2 71.1 L 19.6 68.0 L 23.1 64.9 L 26.7 61.9 L 30.3 59.0 L 34.1 56.2 L 38.0 53.4 L 41.9 50.7 L 46.0 48.0 L 50.1 45.5 L 54.3 43.0 L 58.6 40.6 L 63.0 38.2 L 67.4 35.9 L 72.0 33.7 L 76.6 31.6 L 81.2 29.5 L 86.0 27.5 L 90.8 25.6 L 95.6 23.7 L 100.5 21.9 L 105.5 20.2 L 110.5 18.6 L 115.6 17.0 L 120.7 15.5 L 125.9 14.1 L 131.1 12.7 L 136.4 11.4 L 141.7 10.2 L 147.1 9.1 L 152.4 8.0 L 157.9 7.0 L 163.3 6.0 L 168.8 5.2 L 174.3 4.4 L 179.8 3.7 L 185.4 3.0 L 190.9 2.4 L 196.5 1.9 L 202.1 1.5 L 207.8 1.1 L 213.4 0.8 L 219.0 0.6 L 224.7 0.4 L 230.3 0.3 L 235.9 0.3 L 241.6 0.4 L 247.2 0.5 L 252.9 0.7 L 258.5 1.0 L 264.1 1.3 L 269.7 1.7 L 275.3 2.2 L 280.9 2.8 L 286.4 3.4 L 291.9 4.1 L 297.4 4.9 L 302.9 5.7 L 308.3 6.6 L 313.8 7.6 L 319.1 8.7 L 324.5 9.8 L 329.8 11.0 L 335.0 12.2 L 340.3 13.6 L 345.4 15.0 L 350.6 16.5 L 355.6 18.0 L 360.6 19.6 L 365.6 21.3 L 370.5 23.1 L 375.4 24.9 L 380.1 26.8 L 384.9 28.8 L 389.5 30.8 L 394.1 32.9 L 398.6 35.1 L 403.0 37.4 L 407.4 39.7 L 411.7 42.1 L 415.9 44.6 L 420.0 47.1 L 424.0 49.7 L 428.0 52.4 L 431.8 55.2 L 435.6 58.0 L 439.3 60.9 L 442.8 63.9 L 446.3 66.9 L 449.6 70.0 L 452.9 73.2 L 456.1 76.5 L 459.1 79.8 L 462.0 83.2 L 464.9 86.6 L 467.6 87.8 L 470.4 84.3 L 473.4 80.9 L 476.4 77.6 L 479.6 74.3 L 482.9 71.1 L 486.3 68.0 L 489.7 64.9 L 493.3 61.9 L 497.0 59.0 L 500.8 56.2 L 504.7 53.4 L 508.6 50.7 L 512.7 48.0 L 516.8 45.5 L 521.0 43.0 L 525.3 40.6 L 529.7 38.2 L 534.1 35.9 L 538.6 33.7 L 543.2 31.6 L 547.9 29.5 L 552.6 27.5 L 557.4 25.6 L 562.3 23.7 L 567.2 21.9 L 572.2 20.2 L 577.2 18.6 L 582.3 17.0 L 587.4 15.5 L 592.6 14.1 L 597.8 12.7 L 603.1 11.4 L 608.4 10.2 L 613.7 9.1 L 619.1 8.0 L 624.5 7.0 L 630.0 6.0 L 635.5 5.2 L 641.0 4.4 L 646.5 3.7 L 652.0 3.0 L 657.6 2.4 L 663.2 1.9 L 668.8 1.5 L 674.4 1.1 L 680.0 0.8 L 685.7 0.6 L 691.3 0.4 L 697.0 0.3 L 702.6 0.3 L 708.3 0.4 L 713.9 0.5 L 719.5 0.7 L 725.2 1.0 L 730.8 1.3 L 736.4 1.7 L 742.0 2.2 L 747.5 2.8 L 753.1 3.4 L 758.6 4.1 L 764.1 4.9 L 769.6 5.7 L 775.0 6.6 L 780.4 7.6 L 785.8 8.7 L 791.1 9.8 L 796.4 11.0 L 801.7 12.2 L 806.9 13.6 L 812.1 15.0 L 817.2 16.5 L 822.3 18.0 L 827.3 19.6 L 832.3 21.3 L 837.2 23.1 L 842.0 24.9 L 846.8 26.8 L 851.5 28.8 L 856.2 30.8 L 860.8 32.9 L 865.3 35.1 L 869.7 37.4 L 874.1 39.7 L 878.4 42.1 L 882.6 44.6 L 886.7 47.1 L 890.7 49.7 L 894.6 52.4 L 898.5 55.2 L 902.3 58.0 L 905.9 60.9 L 909.5 63.9 L 913.0 66.9 L 916.3 70.0 L 919.6 73.2 L 922.7 76.5 L 925.8 79.8 L 928.7 83.2 L 931.5 86.6 L 934.3 87.8 L 937.1 84.3 L 940.0 80.9 L 943.1 77.6 L 946.3 74.3 L 949.5 71.1 L 952.9 68.0 L 956.4 64.9 L 960.0 61.9 L 963.7 59.0 L 967.5 56.2 L 971.3 53.4 L 975.3 50.7 L 979.3 48.0 L 983.5 45.5 L 987.7 43.0 L 992.0 40.6 L 996.3 38.2 L 1000.8 35.9 L 1005.3 33.7 L 1009.9 31.6 L 1014.6 29.5 L 1019.3 27.5 L 1024.1 25.6 L 1028.9 23.7 L 1033.9 21.9 L 1038.8 20.2 L 1043.9 18.6 L 1048.9 17.0 L 1054.1 15.5 L 1059.3 14.1 L 1064.5 12.7 L 1069.7 11.4 L 1075.1 10.2 L 1080.4 9.1 L 1085.8 8.0 L 1091.2 7.0 L 1096.6 6.0 L 1102.1 5.2 L 1107.6 4.4 L 1113.2 3.7 L 1118.7 3.0 L 1124.3 2.4 L 1129.9 1.9 L 1135.5 1.5 L 1141.1 1.1 L 1146.7 0.8 L 1152.4 0.6 L 1158.0 0.4 L 1163.6 0.3 L 1169.3 0.3 L 1174.9 0.4 L 1180.6 0.5 L 1186.2 0.7 L 1191.8 1.0 L 1197.4 1.3 L 1203.0 1.7 L 1208.6 2.2 L 1214.2 2.8 L 1219.7 3.4 L 1225.3 4.1 L 1230.8 4.9 L 1236.2 5.7 L 1241.7 6.6 L 1247.1 7.6 L 1252.5 8.7 L 1257.8 9.8 L 1263.1 11.0 L 1268.4 12.2 L 1273.6 13.6 L 1278.8 15.0 L 1283.9 16.5 L 1289.0 18.0 L 1294.0 19.6 L 1298.9 21.3 L 1303.8 23.1 L 1308.7 24.9 L 1313.5 26.8 L 1318.2 28.8 L 1322.8 30.8 L 1327.4 32.9 L 1331.9 35.1 L 1336.4 37.4 L 1340.7 39.7 L 1345.0 42.1 L 1349.2 44.6 L 1353.3 47.1 L 1357.4 49.7 L 1361.3 52.4 L 1365.2 55.2 L 1368.9 58.0 L 1372.6 60.9 L 1376.2 63.9 L 1379.6 66.9 L 1383.0 70.0 L 1386.2 73.2 L 1389.4 76.5 L 1392.4 79.8 L 1395.4 83.2 L 1398.2 86.6 L 1400.0 89.0 L 1400 94 Z'/%3E%3C/svg%3E") 0 9vw/100% 6.714vw no-repeat;
  padding:18vw 0 2rem;
  margin-top:0;
  position:relative;
  overflow:hidden;
}
/* 山の帯（44.429vw）より下は白ベタ。おやつの ::before と同じ考え方 */
.p-about::before{content:"";width:100%;height:calc(100% - 15.7vw);
  background:#FFF;position:absolute;left:0;bottom:0}
/* ※おやつの下端フリンジ（one-team_decoration）は、次のセクションも白地で
   白×白になり見えないため不採用。 */

/* アーチ文字（おやつの "Ouatsu one team" にあたる部分） */
.p-about__arc{position:absolute;top:0;left:0;width:100%;height:auto;z-index:0;pointer-events:none}
.p-about__arc text{fill:#FFF;font-size:86px;font-weight:700;letter-spacing:.06em;
  font-family:"Noto Sans JP",sans-serif}

.p-about__title{display:flex;flex-direction:column;align-items:center;gap:4.8rem;
  margin:0 auto 5.64vw;position:relative;z-index:1}
.p-about__title .is__sub{
  display:block;width:fit-content;padding:1.4rem 3.4rem;border-radius:50px;box-sizing:border-box;
  background:var(--red1);position:relative;line-height:1.4;letter-spacing:.05em;
  font-size:2rem;font-weight:600;color:#FFF;
}
.p-about__title .is__sub::after{content:"";width:3.6rem;height:2.5rem;
  background:url(../img/ui/tip-triangle.svg) 50% 50%/100% no-repeat;
  position:absolute;top:calc(100% - .7rem);left:50%;translate:-50% 0}
.p-about__title .is__main{line-height:1.5;letter-spacing:.1em;font-size:5rem;font-weight:600}

.p-about__content{max-width:54.5rem;width:100%;margin:0 auto;position:relative;z-index:1;
  line-height:2.4;letter-spacing:.05em;text-align:left;font-size:2rem;font-weight:600}
.p-about__content p+p{margin-top:1.8em}
.p-about__content p span{font-weight:900}
/* 黄色い波線（おやつ .c-underline-yellow1 と同じ敷き方） */
.c-underline-yellow1{padding-bottom:.5em;
  background:url(../img/ui/underline-wave.svg) 0 100%/auto .8rem repeat-x}

/* 左右の丸写真（おやつ __content::before / ::after と同じ位置指定）
   ★PCは本文の左右に絶対配置。SPは本文の「下」に横並びにして、文字と重ねない */
.p-about__figs{display:contents}
.p-about__fig{position:absolute;z-index:1}
.p-about__fig .ph,.p-about__fig .disc{position:absolute;inset:0;border-radius:50%;display:block}
.p-about__fig .ph{overflow:hidden;z-index:1}
.p-about__fig .ph img{width:100%;height:100%;object-fit:cover;display:block}
.p-about__fig .disc{z-index:0;translate:2.8rem 2.8rem}
.p-about__fig--l{width:17.3rem;height:17.3rem;top:-3.1rem;right:calc(100% + 12.54rem)}
.p-about__fig--r{width:22.4rem;height:22.4rem;top:4.1rem;left:calc(100% + 12.36rem)}
.p-about__fig--l .disc{background:var(--red1)}
.p-about__fig--r .disc{background:#8DC21F}

@media only screen and (max-width:768px){
  /* SPは山の幅が細くなるので、少しだけ縦に伸ばして立たせる（6.71vw→10.5vw） */
  .p-about{padding:30vw 0 4rem;margin-top:0;background-position:0 15vw;background-size:100% 10.5vw}
  .p-about::before{height:calc(100% - 25.45vw)}
  .p-about__arc text{font-size:108px}
  .p-about__title{gap:4.4rem;margin-bottom:3rem;padding:0 2rem}
  /* PC用の改行はSPでは外し、自然に折り返させる */
  .p-about__content br{display:none}
  .p-about__title .is__sub{padding:.8rem 2.2rem;line-height:1.3333;font-size:1.5rem}
  .p-about__title .is__sub::after{width:2.6rem;height:1.9rem;top:calc(100% - .5rem)}
  .p-about__title .is__main{line-height:1.2778;font-size:2.9rem}
  .p-about__content{max-width:none;padding:0 2rem;box-sizing:border-box;
    line-height:2;text-align:center;font-size:1.5rem}
  /* SPは絶対配置をやめ、本文のいちばん下に横並び（本文と重ならない） */
  .p-about__figs{display:flex;justify-content:center;align-items:center;gap:5rem;margin:6rem auto 0}
  .p-about__fig{position:relative;top:auto;left:auto;right:auto}
  .p-about__fig--l{width:12rem;height:12rem}
  .p-about__fig--r{width:13rem;height:13rem}
  .p-about__fig .disc{translate:1.8rem 1.8rem}
}

/* ══════════════════════════════════════════════════════════════
   実績（日本地図）─ 名古屋「ほぼ日本の真ん中」の構図
   地図 japan.svg は名古屋の実物。ステージは 1000×1080 の固定比率で、
   PCもスマホも同じ構図のまま縮尺だけ変わる。
   アニメーションは IntersectionObserver（.is-live 付与）で発火。
   ══════════════════════════════════════════════════════════════ */
/* ★書体・字間・行間は名古屋 common/css/main.css の html,body 指定に合わせる */
.p-results,.p-results__bubbles{
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.6;color:#222}
.p-results{padding:96px 0 40px;background:#FAF7EC;font-weight:400}
@media only screen and (max-width:768px){ .p-results{padding:14vw 0 6vw} }
/* スクラブ有効時（JSが .is-scrolly を付ける）：
   中身を sticky で1画面に固定し、後続の吹き出し群がその上をスクロールしていく
   （名古屋 .lcl-about-cnt と同じ構造）。 */
.p-results.is-scrolly{padding:0}
.p-results__pin{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#FAF7EC}
.is-scrolly .p-results__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1200px}
/* ★見出しは絶対配置にしてレイアウトから外す。
   こうしないと見出しの高さぶん地図が下にずれ、列島が画面中央に来ない */
.is-scrolly .p-results__title{position:absolute;left:0;right:0;top:7vh;z-index:4;margin:0}
.is-scrolly .p-results__stage{margin:0}
/* ズーム中に地図がステージ枠を越えて画面全体に広がれるように */
svg.p-results__map{overflow:visible}

/* 見出し（3つ山セクションと同じ組み） */
.p-results__title{display:flex;flex-direction:column;align-items:center;gap:4.8rem;
  margin:0 auto 4rem;position:relative;z-index:1}
.p-results__title .is__sub{
  display:block;width:fit-content;padding:1.4rem 3.4rem;border-radius:50px;box-sizing:border-box;
  background:var(--red1);position:relative;line-height:1.4;letter-spacing:.05em;
  font-size:2rem;font-weight:600;color:#FFF}
.p-results__title .is__sub::after{content:"";width:3.6rem;height:2.5rem;
  background:url(../img/ui/tip-triangle.svg) 50% 50%/100% no-repeat;
  position:absolute;top:calc(100% - .7rem);left:50%;translate:-50% 0}
.p-results__title .is__main{line-height:1.5;letter-spacing:.1em;font-size:5rem;font-weight:600}
@media only screen and (max-width:768px){
  .p-results__title{gap:4.4rem;margin-bottom:2rem;padding:0 2rem}
  .p-results__title .is__sub{padding:.8rem 2.2rem;line-height:1.3333;font-size:1.5rem}
  .p-results__title .is__sub::after{width:2.6rem;height:1.9rem;top:calc(100% - .5rem)}
  .p-results__title .is__main{line-height:1.2778;font-size:2.9rem}
}

/* ステージ（1000:1080固定比率。%配置なのでPC/SPで構図が同じ） */
.p-results__stage{position:relative;width:min(92vw,880px,70vh);aspect-ratio:1000/1080;margin:0 auto;z-index:1}
.p-results__map{position:absolute;inset:0;width:100%;height:100%;display:block}

/* クリーム円と地図：スクロール連動（GSAP scrub）で拡大するため、CSS側は素の状態のみ。
   スクラブが無効な環境（reduced-motion等）ではそのまま表示される。 */
.p-results__map .bgc{fill:#F4F0E8}

/* 点線（描画後にフェード） */
.p-results__map .lines path{opacity:0;transition:opacity .5s ease .75s}
.js-results.is-live .lines path{opacity:1}

/* 都道府県ドット：1つずつ跳ねて出る（--d は inline で個別指定） */
.p-results__map .dot{transform-box:fill-box;transform-origin:center;
  transform:scale(0);transition:transform .45s cubic-bezier(.54,.35,.17,1.32);transition-delay:var(--d)}
.js-results.is-live .dot{transform:scale(1)}

/* 岡山のピン：上から落ちて跳ねる */
.p-results__map .pin{transform-box:fill-box;transform-origin:50% 100%;
  transform:translateY(-26px) scale(0);opacity:0;
  transition:transform .55s cubic-bezier(.54,.35,.17,1.32) .55s,opacity .2s ease .55s}
.js-results.is-live .pin{transform:translateY(0) scale(1);opacity:1}

/* 数字カード（名古屋の area カードの組み：白角丸・黒の小見出し・赤の大数字）
   ★ズームが止まったあと、地図の空いている側に出る（.is-cards / .is-world で発火） */
.p-results__cards{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.p-results__cards--jp{opacity:0}
.is-cards .p-results__cards--jp{opacity:1}
.is-world .p-results__cards--wd{opacity:1}
.p-results__card{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:.3em;
  width:auto;min-width:clamp(148px,18vw,230px);padding:clamp(12px,1.7vw,22px) clamp(14px,1.8vw,26px);
  border-radius:clamp(16px,1.8vw,26px);background:#FFF;
  box-shadow:0 .8rem 2.6rem rgba(60,45,30,.14);text-align:center;
  opacity:0;transform:scale(.55);
  transition:opacity .35s ease,transform .5s cubic-bezier(.54,.35,.17,1.32);
  transition-delay:var(--d);
}
.is-cards .p-results__cards--jp .p-results__card,
.is-world .p-results__cards--wd .p-results__card{opacity:1;transform:scale(1)}
.p-results__card .lb{font-weight:700;color:#1A1A1A;
  font-size:clamp(11px,1.2vw,16px);line-height:1.4;white-space:nowrap;letter-spacing:.04em}
.p-results__card .num{display:flex;align-items:baseline;justify-content:center;gap:.12em;
  color:var(--red1);font-weight:700;line-height:1;white-space:nowrap}
.p-results__card .num em{font-style:normal;font-size:clamp(30px,3.8vw,56px);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.p-results__card .num small{font-size:clamp(12px,1.35vw,18px);font-weight:700}

/* 国内：列島は右上がりの帯なので、空いている左下と右上に置く */
.p-results__card--j1{left:4%;bottom:30%}
.p-results__card--j2{left:4%;bottom:9%}
.p-results__card--j3{right:4%;top:12%}
/* 海外：世界地図は横長なので、上下の余白に置く */
.p-results__card--w1{left:4%;top:9%}
.p-results__card--w2{left:4%;bottom:11%}
.p-results__card--w3{right:4%;bottom:11%}

@media only screen and (max-width:768px){
  .p-results__card{width:auto;min-width:36vw;padding:2.8vw 3vw;border-radius:3.4vw}
  .p-results__card .lb{font-size:3vw;white-space:nowrap}
  .p-results__card .num em{font-size:8.6vw}
  .p-results__card .num small{font-size:3.4vw}
  .p-results__card--j1{left:3%;bottom:26%}
  .p-results__card--j2{left:3%;bottom:8%}
  .p-results__card--j3{right:3%;top:9%}
  .p-results__card--w1{left:3%;top:8%}
  .p-results__card--w2{left:3%;bottom:9%}
  .p-results__card--w3{right:3%;bottom:9%}
}

/* ══ 世界地図 ══ */
/* ★ステージ（日本地図）の外に出して、画面いっぱいに置く。
   ステージの中に入れると、日本地図をフェードアウトさせたとき一緒に消えてしまう */
.p-results__world{position:absolute;left:50%;top:50%;width:min(96vw,1500px);
  translate:-50% -50%;opacity:0;z-index:2;overflow:hidden;pointer-events:none}
/* アメリカ直営のラベル（名古屋のフキダシ文字と同じ黒・太字） */
.p-results__world .wlabel{fill:#1A1A1A;font-size:20px;font-weight:700;letter-spacing:.05em;
  opacity:0;transition:opacity .4s ease 1.5s;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック",sans-serif}
.is-world .p-results__world .wlabel{opacity:1}
.p-results__world .wisle{opacity:0;transition:opacity .4s ease .2s}
.is-world .p-results__world .wisle{opacity:1}
@media only screen and (max-width:768px){
  .p-results__world{width:98vw}
  /* SPは地図が縮むぶん、マーカーとラベルをviewBox側で大きくする */
  .p-results__world .wdot{r:15}
  .p-results__world .usdot{r:22}
  .p-results__world .wlabel{font-size:44px}
  .p-results__world .wisle ellipse:first-child{rx:9;ry:5}
  .p-results__world .wisle ellipse:last-child{rx:5;ry:3}
}
.is-world .p-results__world{opacity:1}
.p-results__world .wdot{fill:var(--red1);stroke:#FFF;stroke-width:2;
  transform-box:fill-box;transform-origin:center;transform:scale(0);
  transition:transform .45s cubic-bezier(.54,.35,.17,1.32);transition-delay:var(--d)}
.is-world .p-results__world .wdot{transform:scale(1)}
/* アメリカの直営店は大きく・輪を広げて強調 */
.p-results__world .usdot{fill:var(--red1);stroke:#FFF;stroke-width:3;
  transform-box:fill-box;transform-origin:center;transform:scale(0);
  transition:transform .5s cubic-bezier(.54,.35,.17,1.32);transition-delay:var(--d)}
.is-world .p-results__world .usdot{transform:scale(1);animation:usPulse 2.4s ease-out infinite;
  animation-delay:var(--d)}
@keyframes usPulse{
  0%{filter:drop-shadow(0 0 0 rgba(231,0,18,.55))}
  60%{filter:drop-shadow(0 0 14px rgba(231,0,18,0))}
  100%{filter:drop-shadow(0 0 0 rgba(231,0,18,0))}
}


/* 動きを減らす設定の方にはアニメーションなしで表示 */
@media (prefers-reduced-motion:reduce){
  .p-results__map .bgc,.p-results__map .jp,.p-results__map .lines path,
  .p-results__map .dot,.p-results__map .pin,.p-results__card{transition:none;transform:none;opacity:1}
}

/* SPだけの改行 */
.sp-only{display:none}
@media only screen and (max-width:768px){ .sp-only{display:inline} }
@media only screen and (max-width:768px){ .pc-only{display:none} }

/* ══ 吹き出し群 ─ 名古屋 .lcl-about-cnt-bubble の再現 ══
   ピンの後ろに続く通常フローで、固定された灰色地の上をスクロールして流れる。
   1つずつ 名古屋と同じ跳ねイージング cubic-bezier(.54,.35,.17,1.32) でポップ。 */
.p-results__bubbles{position:relative;z-index:5;
  margin-top:340vh;padding:0 4vw 26vh;
  width:min(92vw,760px);margin-inline:auto;
  display:flex;flex-direction:column;gap:5vh}
.p-bubble{
  position:relative;width:min(78%,420px);
  padding:clamp(16px,4vw,30px) clamp(18px,4.5vw,34px);
  background:#FFF;border:3px solid #1A1A1A;border-radius:28px;
  text-align:center;font-weight:700;color:#1A1A1A;
  opacity:0;transform:translateY(.5rem) scale(.6);transform-origin:50% 80%;
  transition:opacity .4s ease,transform 0s .4s cubic-bezier(.54,.35,.17,1.32);
}
.p-bubble.is-in{opacity:1;transform:translateY(0) scale(1);
  transition:opacity .4s ease,transform .4s cubic-bezier(.54,.35,.17,1.32)}
.p-bubble:nth-child(odd){align-self:flex-start}
.p-bubble:nth-child(even){align-self:flex-end}
/* しっぽ（黒縁つき三角）＝名古屋の吹き出しと同じ下向き */
.p-bubble::before,.p-bubble::after{content:"";position:absolute;top:100%;
  border-style:solid;border-color:transparent}
.p-bubble::before{left:24%;margin-top:-1px;border-width:20px 13px 0 13px;border-top-color:#1A1A1A}
.p-bubble::after{left:24%;margin-left:3px;margin-top:-1px;border-width:15px 10px 0 10px;border-top-color:#FFF}
.p-bubble:nth-child(even)::before{left:auto;right:24%}
.p-bubble:nth-child(even)::after{left:auto;right:calc(24% + 3px)}
.p-bubble .t{display:block;font-size:clamp(13px,3.4vw,18px);line-height:1.6;letter-spacing:.05em}
.p-bubble .b{display:block;margin-top:.2em;color:var(--red1);white-space:nowrap;
  font-size:clamp(26px,6.8vw,42px);font-weight:900;line-height:1.25;letter-spacing:.02em}
.p-bubble .b small{font-size:.55em;font-weight:900;white-space:normal}
@media (prefers-reduced-motion:reduce){
  .p-bubble{opacity:1;transform:none;transition:none}
}

/* ══ ブロックの境目 ══
   白（リエゾンプロジェクトとは）→ クリーム（実績）。
   白側が下にふくらむカーブで、話題が変わったことが一目でわかる。 */
.sec-divider{position:relative;height:clamp(46px,7vw,120px);background:#FAF7EC;overflow:hidden}
.sec-divider::before{content:"";position:absolute;left:-4%;top:-1px;width:108%;height:100%;
  background:#FFF;border-radius:0 0 50% 50%/0 0 100% 100%}

/* ══════════════════════════════════════════════════════════════
   実績 v2 ─ 名古屋やさなご .lcl-about-cnt の完全コピー
   値の出典（css/index.css 実測）:
   ・ステージ 49.1rem×56rem ／ 円 49.1rem 正円 #f1efec
   ・出現は全要素共通: opacity .3s ease ＋ transform .5s cubic-bezier(.54,.35,.17,1.32)
     非表示へは transform 0s .3s（先に透明化→位置リセット）
   ・タイトル: translateY(.5rem) scale(.2) → 1、origin 50% 80%
   ・ピン: origin bottom center ／ 点線: #867465 dasharray 2 2・delay .2s
   ・カード: lead 1.3rem / num 3rem Jost / unit 1.5rem / how 1rem、赤 #df1806
   ・イラスト: translate3d(±1rem,-.6rem,0) からスライドポップ
   ・地図切替: 前の地図を zoom+fade → 次は scale(.95)→1 の .4s ease
   ══════════════════════════════════════════════════════════════ */
.sec-divider{display:none}

/* 丸枠の外側はファーストビュー下と同じパン柄（黄）。
   柄は sticky する .rs__frame に敷くので、スクロール中も柄が流れず落ち着く。
   上端は .rs__top の白いドームで「白→カーブ→黄」に切り替わる。 */
.rs{position:relative;background:transparent;--stg:1;height:calc(100vh + 300vh);
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.6;color:#222}
@media only screen and (min-width:769px){ .rs{--stg:1.42} }
/* SPは円がわずかに切れる程度まで縮めて、列島全体が画面に入るように */
@media only screen and (max-width:768px){ .rs{--stg:.84} }
.rs__frame{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:var(--yellow1) url(../img/pattern-bread.webp) 50% 0/640px auto repeat}
@media only screen and (max-width:768px){
  .rs__frame{background-size:420px auto}
}
/* 上端の切り替え：白がゆるく下にふくらんで柄へ渡す（sticky しないので流れて消える） */
.rs__top{position:absolute;top:0;left:0;width:100%;z-index:3;pointer-events:none;
  height:clamp(46px,7vw,120px);overflow:hidden}
.rs__top::before{content:"";position:absolute;left:-4%;top:-1px;width:108%;height:100%;
  background:#FFF;border-radius:0 0 50% 50%/0 0 100% 100%}
.rs__circle{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:calc(49.1rem*var(--stg));height:calc(49.1rem*var(--stg));
  border-radius:50%;background:#f1efec;scale:0;opacity:0}
.rs__stagewrap{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:49.1rem;height:56rem;transform:scale(var(--stg))}
.rs__stage{position:absolute;inset:0}
.rs__elm{position:absolute;inset:0;z-index:2;pointer-events:none}

/* ── タイトル（手書き風＝Yusei Magic。名古屋のレタリング画像の代役） ── */
.rs__ttl{position:absolute;z-index:5;top:.5rem;left:5.9rem;width:20rem;margin:0;
  text-align:center;rotate:-3deg;color:#222;
  font-family:"Yusei Magic","Hiragino Sans",sans-serif;font-weight:400;
  opacity:0;transform:translateY(.5rem) scale(.2);transform-origin:50% 80%;
  transition:opacity .3s ease,transform 0s .3s ease}
.rs__ttl .t1{display:block;font-size:2.4rem;line-height:1.3;letter-spacing:.04em}
.rs__ttl .t2{display:block;font-size:3.3rem;line-height:1.25;letter-spacing:.02em}
.rs__ttl .swash{display:block;width:13rem;margin:.3rem auto 0}
.rs__elm--active .rs__ttl{opacity:1;transform:translateY(0) scale(1);
  transition:opacity .3s ease,transform .5s cubic-bezier(.54,.35,.17,1.32)}

/* ── シーン1: 日本地図 ── */
.rs__japan{position:absolute;inset:0;z-index:1;scale:0;opacity:0}
.rs__japan svg{width:100%;height:100%;overflow:visible;transform-origin:35.6% 60.8%}
.rs__japan .dot{transform-box:fill-box;transform-origin:center;transform:scale(0);
  transition:transform .45s cubic-bezier(.54,.35,.17,1.32);transition-delay:calc(var(--d) + .25s)}
.rs__elm--01.rs__elm--active .rs__japan .dot{transform:scale(1)}

.rs__lines{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  opacity:0;transition:opacity .3s ease}
.rs__lines path{fill:none;stroke:#867465;stroke-width:2;stroke-dasharray:2 2}
.rs__elm--active .rs__lines{opacity:1;transition-delay:.2s}

.rs__pin{position:absolute;z-index:3;top:28.2rem;left:15.6rem;width:3.9rem;
  transform-origin:bottom center;opacity:0;transform:translateY(-1.2rem) scale(.3);
  filter:drop-shadow(0 .3rem .25rem rgba(0,0,0,.18));
  transition:opacity .3s ease,transform 0s .3s ease}
.rs__elm--active .rs__pin{opacity:1;transform:translateY(0) scale(1);
  transition:opacity .3s ease .12s,transform .5s cubic-bezier(.54,.35,.17,1.32) .12s}

/* ── 数字カード（名古屋 lcl-about-cnt-area の組版そのまま） ── */
.rs-area{position:absolute;z-index:4;display:flex;flex-direction:column;
  justify-content:center;align-items:center;width:9.5rem;min-height:9.1rem;
  padding:.9rem .5rem 1rem;box-sizing:border-box;text-align:center;
  background:#FFF;border-radius:1.8rem;
  opacity:0;transform:translateY(.5rem) scale(.2);transform-origin:50% 80%;
  transition:opacity .3s ease,transform 0s .3s ease}
.rs-area::after{content:"";position:absolute;top:100%;left:50%;translate:-50% -2px;
  border:.8rem solid transparent;border-top-color:#FFF;border-bottom-width:0}
.rs__elm--active .rs-area{opacity:1;transform:translateY(0) scale(1);
  transition:opacity .3s ease,transform .5s cubic-bezier(.54,.35,.17,1.32)}
.rs__elm--active .rs-area:nth-of-type(2){transition-delay:.08s}
.rs__elm--active .rs-area:nth-of-type(3){transition-delay:.16s}
.rs__elm--active .rs-area:nth-of-type(4){transition-delay:.24s}
.rs-area__lead{font-weight:700;font-size:1.3rem;line-height:1.7}
.rs-area__info{display:flex;justify-content:center;align-items:flex-end;gap:.2rem;color:#df1806}
.rs-area__num{padding-bottom:.2rem;font-family:"Jost",sans-serif;font-optical-sizing:auto;
  font-size:3rem;line-height:1;letter-spacing:0;font-weight:700;font-style:normal}
.rs-area__unit{font-weight:700;font-size:1.5rem;line-height:1.7}
.rs-area__unit--big{font-size:2.1rem;line-height:1.4;padding-bottom:.15rem}
.rs-area__how{font-size:1rem;font-weight:700;line-height:1.7;color:#222}
/* シーン1の配置（名古屋 area--01〜05 と同じ「地図の上に散らす」） */
.rs-area--j1{width:10.9rem;top:13.2rem;left:27.4rem}
.rs-area--j2{top:24.6rem;left:5.9rem}
.rs-area--j2 .rs-area__unit{font-size:1.15rem;white-space:nowrap;line-height:1.9}
.rs-area--j3{top:37.2rem;left:28.6rem}
/* シーン2 */
.rs-area--o1{width:10.5rem;top:13.6rem;left:27.6rem}
.rs-area--o2{top:28.6rem;left:29.4rem}
.rs-area--o3{width:9.5rem;top:37.6rem;left:4.8rem}
/* シーン3 */
.rs-area--w1{top:10.6rem;left:5.6rem}
.rs-area--w2{top:38.4rem;left:7.6rem}
.rs-area--w3{width:12.8rem;top:38.4rem;left:28.2rem}
.rs-area--w3 .rs-area__how{white-space:nowrap}

/* ── 線画イラスト（名古屋 illust の飛び込み） ── */
.rs-illust{position:absolute;z-index:3;opacity:0;
  transition:opacity .3s ease,transform 0s .3s ease}
.rs-illust svg{width:100%;height:auto;display:block}
.rs-illust--01{width:10.5rem;top:44.6rem;left:6.2rem;transform:translate3d(-1rem,-.6rem,0)}
.rs-illust--02{width:7.5rem;top:9rem;left:32.6rem;transform:translate3d(1rem,-.6rem,0)}
.rs-illust--03{width:8.5rem;top:9.2rem;left:31.6rem;transform:translate3d(1rem,-.6rem,0)}
.rs__elm--active .rs-illust{opacity:1;transform:translate3d(0,0,0);
  transition:opacity .3s ease .1s,transform .5s cubic-bezier(.54,.35,.17,1.32) .1s}

/* ── シーン2: 岡山県 ── */
.rs__okwrap{position:absolute;inset:0;z-index:1;transform-origin:53.8% 66.4%}
.rs__okayama{position:absolute;top:13rem;left:9.55rem;width:30rem;
  opacity:0;transform:scale(.95);transition:opacity .4s ease,transform .4s ease}
.rs__okayama img{width:100%;height:auto;display:block}
.rs__elm--02.rs__elm--active .rs__okayama{opacity:1;transform:scale(1)}
.rs__pin--hq{top:31.4rem;left:24.3rem}
.rs__shop{position:absolute;z-index:3;width:1.9rem;height:1.9rem;border-radius:50%;
  background:#df1806;border:.35rem solid #FFF;box-sizing:border-box;
  box-shadow:0 .15rem .3rem rgba(0,0,0,.18);
  opacity:0;transform:scale(0);transform-origin:center;
  transition:opacity .2s ease,transform 0s .3s ease}
.rs__shop--1{top:37rem;left:23.4rem}
.rs__shop--2{top:37.5rem;left:27.4rem}
.rs__elm--active .rs__shop{opacity:1;transform:scale(1);
  transition:opacity .2s ease,transform .45s cubic-bezier(.54,.35,.17,1.32);
  transition-delay:var(--d)}

/* ── シーン3: 世界地図 ── */
.rs__worldwrap{position:absolute;z-index:1;top:19.2rem;left:4.3rem;width:40.5rem;
  opacity:0;transform:scale(.95);transform-origin:50% 50%;
  transition:opacity .4s ease,transform .4s ease}
.rs__worldwrap svg{width:100%;height:auto;display:block;overflow:hidden}
.rs__elm--03.rs__elm--active .rs__worldwrap{opacity:1;transform:scale(1)}
.rs__worldwrap .wdot{fill:#df1806;stroke:#FFF;stroke-width:2.2;
  transform-box:fill-box;transform-origin:center;transform:scale(0);
  transition:transform .45s cubic-bezier(.54,.35,.17,1.32);transition-delay:var(--d)}
.rs__elm--03.rs__elm--active .wdot{transform:scale(1)}
.rs__worldwrap .usdot{fill:#df1806;stroke:#FFF;stroke-width:3;
  transform-box:fill-box;transform-origin:center;transform:scale(0);
  transition:transform .5s cubic-bezier(.54,.35,.17,1.32);transition-delay:var(--d)}
.rs__elm--03.rs__elm--active .usdot{transform:scale(1);
  animation:usPulse2 2.4s ease-out infinite;animation-delay:var(--d)}
@keyframes usPulse2{
  0%{filter:drop-shadow(0 0 0 rgba(223,24,6,.5))}
  60%{filter:drop-shadow(0 0 12px rgba(223,24,6,0))}
  100%{filter:drop-shadow(0 0 0 rgba(223,24,6,0))}
}

/* ── 吹き出し：名古屋のレンガ配置（block 18.2rem・2列互い違い・row-reverse） ── */
.rs .p-results__bubbles{position:relative;z-index:5;margin:498vh auto 0;padding:0 0 24vh;
  display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;gap:1.2rem 0;width:37rem;max-width:96vw}
.rs .p-bubble{position:relative;width:18.2rem;box-sizing:border-box;align-self:auto;
  padding:1.6rem 1rem 1.8rem;border-width:2.5px;border-radius:2rem}
.rs .p-bubble:nth-of-type(2){margin-top:15rem}
.rs .p-bubble:nth-of-type(2n+1){margin-left:-1.5rem}
.rs .p-bubble:nth-of-type(2n+1):not(:nth-of-type(-n+2)){margin-top:-10.4rem}
.rs .p-bubble:nth-child(odd),.rs .p-bubble:nth-child(even){align-self:auto}
.rs .p-bubble .t{font-size:1.25rem;line-height:1.55}
.rs .p-bubble .b{font-size:2.35rem;line-height:1.25}
.rs .p-bubble .b small{font-size:.58em}
.rs .p-bubble::before{left:50%;margin-left:-13px;border-width:16px 11px 0 11px}
.rs .p-bubble::after{left:50%;margin-left:-10px;border-width:12px 8px 0 8px}
.rs .p-bubble:nth-child(even)::before{left:50%;right:auto}
.rs .p-bubble:nth-child(even)::after{left:50%;right:auto}
@media (prefers-reduced-motion:reduce){
  .rs__ttl,.rs-area,.rs-illust,.rs__pin,.rs__lines,.rs__japan .dot,
  .rs__shop,.rs__worldwrap,.rs__okayama{transition:none}
}

/* ══ 実績v2 追補：店名ラベル・米国店リスト・遷移CTA ══ */

/* 直営店の店名ラベル（名古屋の地図注記風＝小さな白ピル＋引き出し線） */
.rs__shoplabel{position:absolute;z-index:4;padding:.5rem .9rem;border-radius:1rem;
  background:#FFF;box-shadow:0 .1rem .4rem rgba(60,45,30,.10);
  font-size:1.1rem;font-weight:700;line-height:1.45;text-align:center;letter-spacing:.03em;
  opacity:0;transform:translateY(.4rem) scale(.4);transform-origin:50% 0;
  transition:opacity .3s ease,transform 0s .3s ease}
.rs__shoplabel--1{top:41.6rem;left:16.6rem}
.rs__shoplabel--2{top:40.6rem;left:29.2rem}
.rs__elm--active .rs__shoplabel{opacity:1;transform:translateY(0) scale(1);
  transition:opacity .3s ease,transform .5s cubic-bezier(.54,.35,.17,1.32);
  transition-delay:var(--d)}

/* 米国直営5店リスト（名古屋 mapinfo の白パネル風） */
.rs__uslist{position:absolute;z-index:4;top:34.6rem;left:5.6rem;width:12.6rem;
  padding:.9rem 1rem 1rem;border-radius:1.4rem;background:#FFF;
  box-shadow:0 .15rem .5rem rgba(60,45,30,.10);text-align:left;
  opacity:0;transform:translateY(.5rem) scale(.4);transform-origin:50% 80%;
  transition:opacity .3s ease,transform 0s .3s ease}
.rs__uslist-ttl{display:block;margin-bottom:.3rem;font-size:1.15rem;font-weight:700;
  color:#df1806;letter-spacing:.03em;line-height:1.5}
.rs__uslist ul{margin:0;padding:0}
.rs__uslist li{list-style:none;position:relative;padding-left:1.1rem;
  font-size:1.05rem;font-weight:700;line-height:1.75;letter-spacing:.02em}
.rs__uslist li::before{content:"";position:absolute;left:0;top:.62em;
  width:.55rem;height:.55rem;border-radius:50%;background:#df1806}
.rs__elm--active .rs__uslist{opacity:1;transform:translateY(0) scale(1);
  transition:opacity .3s ease,transform .5s cubic-bezier(.54,.35,.17,1.32);
  transition-delay:var(--d)}

/* 遷移CTA（白ピル＋赤文字＋赤丸矢印。ポップはカードと同じ） */
.rs-cta{position:absolute;z-index:6;left:50%;bottom:1.6rem;translate:-50% 0;
  display:inline-flex;align-items:center;gap:.7rem;pointer-events:auto;
  padding:1rem 1.6rem 1rem 2rem;border-radius:5rem;background:#FFF;
  box-shadow:0 .25rem 0 rgba(60,45,30,.10);
  font-size:1.3rem;font-weight:700;letter-spacing:.05em;color:#df1806;
  opacity:0;transform:translateY(.5rem) scale(.4);transform-origin:50% 80%;
  transition:opacity .3s ease,transform 0s .3s ease}
.rs-cta__ico{width:1.9rem;height:1.9rem;flex:none;
  background:url(../img/oyatsu/link-arrow-02-red.svg) 50% 50%/100% no-repeat}
.rs__elm--active .rs-cta{opacity:1;transform:translateY(0) scale(1);
  transition:opacity .3s ease .35s,transform .5s cubic-bezier(.54,.35,.17,1.32) .35s}
.rs-cta:hover .rs-cta__ico{translate:.25rem 0;transition:translate .25s cubic-bezier(.54,.35,.17,1.32)}

/* ══════════════════════════════════════════════════════════════
   料金 ─ human.sankei.co.jp の Price ブロック構成を踏襲
   ・英字大見出し（45px/字間.17em相当）＋和文タイトル
   ・番号つきブロックを縦に積む（①オーダーメイド ②プラン ③研修）
   ・白カード＋下方向の大きな角丸（22px）＋「詳細を見る」リンク
   配色はサイト側に合わせて 黄#FFD506／赤#E70012／本文#222
   ══════════════════════════════════════════════════════════════ */
.pr{position:relative;z-index:2;background:#FFF;padding:9rem 0 10rem;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}
.pr__inner{width:min(92vw,108rem);margin-inline:auto}

.pr__head{text-align:center;margin-bottom:6.5rem}
.pr__en{display:block;font-family:"Jost",sans-serif;font-weight:700;
  font-size:clamp(30px,4.4vw,45px);line-height:1;letter-spacing:.17em;color:#E70012}
.pr__ttl{margin:1.6rem 0 0;font-size:clamp(21px,3vw,32px);font-weight:700;line-height:1.5}
.pr__lead{margin:1.4rem 0 0;font-size:clamp(13px,1.6vw,16px);line-height:1.9;color:#444}

/* 番号つきブロック */
.pr__block{position:relative;display:grid;grid-template-columns:auto 1fr;gap:0 2.4rem;
  margin-top:6rem;padding-top:.4rem}
.pr__block:first-of-type{margin-top:0}
.pr__num{flex:none}
.pr__num span{display:grid;place-content:center;width:4.6rem;height:4.6rem;border-radius:50%;
  background:#E70012;color:#FFF;font-family:"Jost",sans-serif;font-weight:700;
  font-size:2.4rem;line-height:1}
.pr__block-ttl{margin:.3rem 0 0;font-size:clamp(18px,2.4vw,26px);font-weight:700;line-height:1.55}
.pr__block-ttl::after{content:"";display:block;width:5.4rem;height:.5rem;margin-top:1.2rem;
  border-radius:1rem;background:var(--yellow1)}
.pr__block-txt{margin:1.8rem 0 0;font-size:clamp(13px,1.55vw,16px);line-height:2}
.pr__block-txt strong{font-weight:700;
  background:linear-gradient(transparent 62%,var(--yellow1) 62%)}

.pr__tags{display:flex;flex-wrap:wrap;gap:.9rem;margin:2rem 0 0;padding:0}
.pr__tags li{list-style:none;padding:.55rem 1.4rem;border-radius:5rem;
  border:1.5px solid #E70012;color:#E70012;font-size:clamp(11px,1.3vw,14px);font-weight:700}

/* プランカード */
.pr__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}
.pr-card{position:relative;display:flex;flex-direction:column;
  padding:3rem 2.2rem 2.4rem;border:2px solid #E8E4DC;border-radius:0 0 22px 22px;
  border-top:6px solid var(--yellow1);background:#FFF;text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.54,.35,.17,1.32),box-shadow .3s ease}
.pr-card:hover{transform:translateY(-.6rem);box-shadow:0 1.2rem 2.4rem rgba(60,45,30,.12)}
.pr-card--rec{border-color:#E70012;border-top-color:#E70012;
  box-shadow:0 .8rem 2rem rgba(231,0,18,.10)}
.pr-card__badge{position:absolute;top:-1.5rem;left:50%;translate:-50% 0;
  padding:.5rem 1.6rem;border-radius:5rem;background:#E70012;color:#FFF;
  font-size:clamp(11px,1.25vw,13px);font-weight:700;white-space:nowrap}
.pr-card__head{display:flex;flex-direction:column;gap:.4rem}
.pr-card__label{font-size:clamp(11px,1.25vw,13px);font-weight:700;color:#888}
.pr-card__name{font-size:clamp(17px,2vw,21px);font-weight:700;line-height:1.4}
.pr-card__price{display:flex;align-items:baseline;justify-content:center;gap:.2rem;
  margin-top:1.6rem;color:#E70012}
.pr-card__num{font-style:normal;font-family:"Jost",sans-serif;font-weight:700;
  font-size:clamp(38px,5.4vw,58px);line-height:1;letter-spacing:0}
.pr-card__unit{font-size:clamp(15px,1.8vw,19px);font-weight:700}
.pr-card__from{font-size:clamp(17px,2vw,22px);font-weight:700}
.pr-card__note{margin:.5rem 0 0;text-align:center;font-size:clamp(10px,1.15vw,12px);color:#888}
.pr-card__list{margin:1.8rem 0 0;padding:1.8rem 0 0;border-top:1px dashed #DDD8CE;list-style:none}
.pr-card__list li{position:relative;padding-left:1.5rem;margin-top:.7rem;
  font-size:clamp(12px,1.4vw,14px);line-height:1.75}
.pr-card__list li:first-child{margin-top:0}
.pr-card__list li::before{content:"";position:absolute;left:0;top:.65em;
  width:.7rem;height:.7rem;border-radius:50%;background:var(--yellow1)}
.pr-card__more{display:inline-flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:2rem;
  color:#E70012;font-size:clamp(12px,1.35vw,14px);font-weight:700}
.pr-card__ico{width:1.7rem;height:1.7rem;flex:none;
  background:url(../img/oyatsu/link-arrow-02-red.svg) 50% 50%/100% no-repeat}
.pr-card:hover .pr-card__ico{translate:.3rem 0;transition:translate .25s cubic-bezier(.54,.35,.17,1.32)}

.pr__kome{margin:2.4rem 0 0;font-size:clamp(11px,1.25vw,13px);line-height:1.9;color:#777}
.pr__btn{display:inline-flex;align-items:center;gap:.9rem;margin-top:2.6rem;
  padding:1.5rem 3rem;border-radius:5rem;background:#E70012;color:#FFF;
  text-decoration:none;font-size:clamp(13px,1.5vw,16px);font-weight:700;
  box-shadow:0 .4rem 0 rgba(160,0,12,.35);transition:transform .25s cubic-bezier(.54,.35,.17,1.32)}
.pr__btn:hover{transform:translateY(-.3rem)}
.pr__btn-ico{width:1.9rem;height:1.9rem;flex:none;
  background:url(../img/oyatsu/link-arrow-02-white.svg) 50% 50%/100% no-repeat}

/* 契約金の補足ボックス */
.pr__fee{display:flex;flex-direction:column;gap:.8rem;margin-top:2.8rem;
  padding:2.2rem 2.4rem;border-radius:18px;background:var(--yellow2);
  border-left:6px solid var(--yellow1)}
.pr__fee-lb{display:inline-block;width:fit-content;padding:.4rem 1.2rem;border-radius:5rem;
  background:#E70012;color:#FFF;font-size:clamp(11px,1.25vw,13px);font-weight:700}
.pr__fee-txt{margin:0;font-size:clamp(12px,1.45vw,15px);line-height:1.95}
.pr__fee-txt strong{font-weight:700;background:linear-gradient(transparent 62%,var(--yellow1) 62%)}

/* 研修カード（写真つき） */
.pr__trainings{display:grid;grid-template-columns:1.15fr 1fr;gap:2.4rem;margin-top:3rem;align-items:start}
.pr-tr{display:flex;flex-direction:column;overflow:hidden;background:#FFF;
  border:2px solid #E8E4DC;border-radius:22px}
.pr-tr--main{border-color:#E70012;box-shadow:0 .8rem 2rem rgba(231,0,18,.10)}
.pr-tr__photo{aspect-ratio:760/500;overflow:hidden;background:#EEE}
.pr-tr__photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pr-tr:hover .pr-tr__photo img{transform:scale(1.05)}
.pr-tr__body{padding:2.2rem 2.2rem 2.4rem}
.pr-tr__tag{display:inline-block;padding:.4rem 1.2rem;border-radius:5rem;
  background:var(--yellow1);color:#222;font-size:clamp(11px,1.25vw,13px);font-weight:700}
.pr-tr--main .pr-tr__tag{background:#E70012;color:#FFF}
.pr-tr__ttl{margin:1.2rem 0 0;font-size:clamp(19px,2.3vw,26px);font-weight:700;line-height:1.4}
.pr-tr__ttl em{font-style:normal;font-family:"Jost",sans-serif;font-weight:700;
  font-size:1.5em;margin-right:.06em;line-height:1}
.pr-tr__price{display:flex;align-items:baseline;gap:.25rem;margin-top:.8rem;color:#E70012}
.pr-tr__price em{font-style:normal;font-family:"Jost",sans-serif;font-weight:700;
  font-size:clamp(34px,4.6vw,50px);line-height:1}
.pr-tr__price span{font-size:clamp(14px,1.7vw,18px);font-weight:700}
.pr-tr__price small{margin-left:.4rem;color:#888;font-size:clamp(10px,1.2vw,12px);font-weight:700}
.pr-tr__lead{margin:1.4rem 0 0;font-size:clamp(13px,1.5vw,16px);line-height:1.85}
.pr-tr__lead strong{font-weight:700;background:linear-gradient(transparent 62%,var(--yellow1) 62%)}
.pr-tr__list{margin:1.4rem 0 0;padding:1.4rem 0 0;border-top:1px dashed #DDD8CE;list-style:none}
.pr-tr__list li{position:relative;padding-left:1.5rem;margin-top:.6rem;
  font-size:clamp(12px,1.4vw,14px);line-height:1.75}
.pr-tr__list li:first-child{margin-top:0}
.pr-tr__list li::before{content:"";position:absolute;left:0;top:.62em;
  width:.7rem;height:.7rem;border-radius:50%;background:var(--yellow1)}
.pr-tr--main .pr-tr__list li::before{background:#E70012}
.pr-tr__for{margin:1.6rem 0 0;padding:1.2rem 1.4rem;border-radius:12px;background:#FAF8F3;
  font-size:clamp(11px,1.3vw,13px);line-height:1.8}
.pr-tr__for span{display:block;margin-bottom:.3rem;color:#E70012;font-weight:700}

.pr__btn--line{background:#FFF;color:#E70012;border:2px solid #E70012;
  box-shadow:0 .4rem 0 rgba(231,0,18,.18)}
.pr__btn--line .pr__btn-ico{background-image:url(../img/oyatsu/link-arrow-02-red.svg)}

@media only screen and (max-width:768px){
  .pr{padding:7rem 0 8rem}
  .pr__head{margin-bottom:4.5rem}
  .pr__block{grid-template-columns:1fr;gap:1.4rem;margin-top:5rem}
  .pr__num span{width:4rem;height:4rem;font-size:2rem}
  /* スマホでは3枚を縦に積むと5画面ぶんになるので、横に並べて
     スワイプで比較できるようにする（画面の縦を約1.5画面ぶん節約） */
  /* grid/flex の子は min-width:auto で内容に押し広げられる。
     ここを 0 にしないと、下の overflow-x が効かずカードがはみ出したままになる */
  .pr__block-body{min-width:0}
  .pr__cards{display:flex;grid-template-columns:none;gap:1.4rem;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    /* 親の幅に固定しないと flex の子に押し広げられて横スクロールが効かない */
    width:calc(100% + 8vw);max-width:calc(100% + 8vw);
    margin-inline:-4vw;padding:.6rem 4vw 1.6rem;box-sizing:border-box}
  .pr__cards::-webkit-scrollbar{display:none}
  .pr-card{flex:none;width:78vw;scroll-snap-align:center;box-sizing:border-box}
  .pr-card{padding:2.6rem 2rem 2.2rem}
  .pr__trainings{grid-template-columns:1fr;gap:2rem}
  .pr-tr__body{padding:2rem 1.8rem 2.2rem}
  .pr__fee{padding:1.8rem 1.8rem}
  .pr__btn{width:100%;justify-content:center;padding:1.6rem 2rem}
}

/* 実績（黄のパン柄）→ 料金（白）の切り替え。白がふくらんで上がる */
.pr::before{content:"";position:absolute;left:-4%;bottom:100%;width:108%;
  height:clamp(40px,6vw,100px);background:#FFF;
  border-radius:50% 50% 0 0/100% 100% 0 0}

/* ══════════════════════════════════════════════════════════════
   開業までの流れ ─ ethicle.bscycle.co.jp「ご利用までの流れ」の構成
   ・グレー地のセクション（実測 #F1F1F1）
   ・1項目＝「番号 → イラスト → 見出し → 説明」の縦積み
   ・PCは2列グリッド（実測 216px×2）、前半／後半でブロックを分ける
   配色はサイト側に合わせて 黄#FFD506／赤#E70012／線画#8a6f52
   ══════════════════════════════════════════════════════════════ */
.fl{position:relative;z-index:2;padding:9rem 0 10rem;
  background-color:#FAF5E6;
  background-image:url(../img/kobo/wheat-tile.png);background-size:560px auto;
  animation:bgFlowXslow 140s linear infinite;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}
.fl__inner{width:min(92vw,108rem);margin-inline:auto}

.fl__head{text-align:center;margin-bottom:5.5rem}
.fl__en{display:block;font-family:"Jost",sans-serif;font-weight:700;
  font-size:clamp(30px,4.4vw,45px);line-height:1;letter-spacing:.17em;color:#E70012}
.fl__ttl{margin:1.6rem 0 0;font-size:clamp(21px,3vw,32px);font-weight:700;line-height:1.5}
.fl__lead{margin:1.4rem 0 0;font-size:clamp(13px,1.6vw,16px);line-height:1.9;color:#555}

/* ブロック見出し（前半／後半の仕切り） */
.fl__block+.fl__block{margin-top:5rem}
.fl__block-ttl{display:flex;align-items:center;gap:1.4rem;margin:0 0 2.8rem;
  font-size:clamp(14px,1.7vw,18px);font-weight:700;color:#E70012}
.fl__block-ttl::before,.fl__block-ttl::after{content:"";flex:1;height:2px;background:#E6D9AE}
.fl__block-ttl span{flex:none}

/* 項目 */
.fl__list{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem 2rem;
  margin:0;padding:0;list-style:none;counter-reset:none}
.fl__item{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:2.6rem 1.6rem 2.2rem;border-radius:20px;background:#FFF;text-align:center}
/* 次の項目へつながる矢印（PCは横、SPは縦） */
.fl__item::after{content:"";position:absolute;top:50%;right:-1.35rem;translate:0 -50%;
  width:0;height:0;border:.7rem solid transparent;border-left:.9rem solid #D9C99A;border-right:0}
.fl__list .fl__item:last-child::after{display:none}
.fl__num{display:block;margin-bottom:1rem}
.fl__num em{font-style:normal;font-family:"Jost",sans-serif;font-weight:700;
  font-size:clamp(22px,2.6vw,30px);line-height:1;letter-spacing:.02em;color:#E70012}
.fl__fig{margin:0 0 1.4rem;width:clamp(84px,9vw,116px)}
.fl__fig img{width:100%;height:auto;display:block}
.fl__item-ttl{margin:0;font-size:clamp(14px,1.7vw,18px);font-weight:700;line-height:1.5}
.fl__item-ttl::after{content:"";display:block;width:3.4rem;height:.4rem;margin:1rem auto 0;
  border-radius:1rem;background:var(--yellow1)}
.fl__item-txt{margin:1.2rem 0 0;font-size:clamp(11.5px,1.35vw,14px);line-height:1.85;color:#444}
.fl__tag{display:inline-block;margin-top:1.2rem;padding:.45rem 1.1rem;border-radius:5rem;
  background:#FFF8D6;border:1.5px solid var(--yellow1);
  font-size:clamp(10px,1.15vw,12px);font-weight:700;line-height:1.5}

.fl__after{margin:4.5rem 0 0;text-align:center;font-size:clamp(12px,1.5vw,15px);
  font-weight:700;line-height:1.9}
.fl__btn{display:flex;align-items:center;justify-content:center;gap:.9rem;
  width:fit-content;margin:2.2rem auto 0;padding:1.6rem 3.4rem;border-radius:5rem;
  background:#E70012;color:#FFF;text-decoration:none;
  font-size:clamp(13px,1.5vw,16px);font-weight:700;
  box-shadow:0 .4rem 0 rgba(160,0,12,.35);transition:transform .25s cubic-bezier(.54,.35,.17,1.32)}
.fl__btn:hover{transform:translateY(-.3rem)}
.fl__btn-ico{width:1.9rem;height:1.9rem;flex:none;
  background:url(../img/oyatsu/link-arrow-02-white.svg) 50% 50%/100% no-repeat}

@media only screen and (max-width:900px){
  .fl__list{grid-template-columns:repeat(2,1fr);gap:3.4rem 1.6rem}
  /* 2列のときは右端の矢印を消し、下向きに */
  .fl__item::after{top:auto;right:auto;bottom:-2.3rem;left:50%;translate:-50% 0;
    border:.7rem solid transparent;border-top:.9rem solid #D9C99A;border-bottom:0}
  .fl__list .fl__item:nth-child(2)::after,
  .fl__list .fl__item:nth-child(4)::after{display:none}
}
@media only screen and (max-width:768px){
  .fl{padding:7rem 0 8rem}
  .fl__head{margin-bottom:4rem}
  .fl__block+.fl__block{margin-top:4rem}
  .fl__item{padding:2.2rem 1.2rem 1.8rem;border-radius:16px}
  .fl__btn{width:100%;padding:1.6rem 2rem}
}


/* ══════════════════════════════════════════════════════════════
   選ばれる理由 ─ coco-terrace.com/lp/habataki の LIVING ブロック構成
   ・写真 →（丸バッジ）→ 黄色い帯にリード文 → ちぎり紙で次へ
   ・01は写真を組んだメインセル、02以降は写真＋本文の左右交互
   ・親しみを出すため、自社店舗サイト（okayamakobo.com/shop）の
     水彩パン・麦の穂・麦柄・円形マットを配置
   ══════════════════════════════════════════════════════════════ */
.rz{position:relative;z-index:2;background:#FFF;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}

/* ── ヘッダー写真 ── */
.rz__hero{position:relative;height:clamp(220px,30vw,420px);overflow:hidden}
.rz__hero-img{width:100%;height:100%;object-fit:cover;display:block}
.rz__hero-torn{position:absolute;left:0;right:0;bottom:-1px;height:clamp(26px,3vw,46px);
  background:url(../img/ui/torn-bottom.svg) 50% 100%/100% 100% no-repeat;
  filter:invert(88%) sepia(63%) saturate(1000%) hue-rotate(354deg) brightness(104%)}

/* ── 黄色い帯（リード） ── */
.rz__band{position:relative;background:var(--yellow1);
  background-image:url(../img/kobo/wheat-tile.png);background-size:520px auto;
  padding:clamp(56px,7vw,92px) 0 clamp(64px,8vw,110px)}
.rz__badge{position:absolute;top:clamp(-52px,-5.4vw,-40px);left:50%;translate:-50% 0;z-index:5;
  display:grid;place-content:center;gap:.2rem;text-align:center;
  width:clamp(78px,9vw,118px);aspect-ratio:1/1;border-radius:50%;
  background:#E70012;color:#FFF;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.14)}
.rz__badge-jp{font-size:clamp(20px,2.6vw,32px);font-weight:700;line-height:1}
.rz__badge-en{font-family:"Jost",sans-serif;font-weight:700;
  font-size:clamp(9px,1.05vw,12px);letter-spacing:.12em;line-height:1}
.rz__band-inner{position:relative;width:min(90vw,96rem);margin-inline:auto}
/* 水彩パンのはみ出しは帯の内側で切る（バッジは切らない） */
.rz__band{overflow-x:clip}
.rz__eyebrow{margin:0;font-family:"Jost",sans-serif;font-weight:600;color:#B8860B;
  font-size:clamp(12px,1.4vw,15px);letter-spacing:.14em}
.rz__ttl{margin:1.4rem 0 0;font-size:clamp(24px,3.6vw,44px);font-weight:700;line-height:1.45}
.rz__ttl span{color:#E70012}
.rz__lead{margin:2rem 0 0;font-size:clamp(13px,1.6vw,17px);line-height:2.15;max-width:62rem}
.rz__band-bread{position:absolute;pointer-events:none;
  filter:drop-shadow(0 .6rem 1rem rgba(120,80,20,.18))}
.rz__band-bread--1{width:clamp(90px,11vw,170px);right:-1rem;top:-2rem;rotate:-8deg}
.rz__band-bread--2{width:clamp(70px,8.5vw,130px);right:clamp(96px,12vw,190px);bottom:-3rem;rotate:10deg}
.rz__band-torn{position:absolute;left:0;right:0;bottom:-1px;height:clamp(26px,3vw,46px);
  background:url(../img/ui/torn-bottom.svg) 50% 100%/100% 100% no-repeat}

/* ── 共通パーツ ── */
.rz__list{width:min(92vw,110rem);margin:clamp(48px,6vw,86px) auto 0;
  padding-bottom:clamp(64px,8vw,110px)}
.rz-num{display:flex;align-items:baseline;gap:.8rem}
.rz-num em{font-style:normal;font-family:"Jost",sans-serif;font-weight:700;
  font-size:clamp(30px,3.6vw,46px);line-height:1;color:#E70012}
.rz-num i{font-style:normal;padding:.35rem 1.1rem;border-radius:5rem;
  background:var(--yellow1);font-size:clamp(11px,1.3vw,14px);font-weight:700}
.rz-ttl{margin:1.2rem 0 0;font-size:clamp(18px,2.5vw,29px);font-weight:700;line-height:1.6}
.rz-mark{background:linear-gradient(transparent 66%,var(--yellow1) 66%)}
.rz-txt{margin:1.8rem 0 0;font-size:clamp(13px,1.55vw,16px);line-height:2.05;color:#333}
.rz-txt strong{font-weight:700}
.rz-link{display:inline-flex;align-items:center;gap:.7rem;margin-top:2.2rem;
  padding:1.2rem 2.4rem;border:2px solid #E70012;border-radius:5rem;
  color:#E70012;text-decoration:none;font-size:clamp(12px,1.4vw,15px);font-weight:700;
  transition:background .25s ease,color .25s ease}
.rz-link:hover{background:#E70012;color:#FFF}
.rz-link__ico{width:1.7rem;height:1.7rem;flex:none;
  background:url(../img/oyatsu/link-arrow-02-red.svg) 50% 50%/100% no-repeat}
.rz-link:hover .rz-link__ico{background-image:url(../img/oyatsu/link-arrow-02-white.svg)}
.rz-chips{display:flex;flex-wrap:wrap;gap:.9rem;margin:2rem 0 0;padding:0;list-style:none}
.rz-chips li{padding:.55rem 1.4rem;border-radius:5rem;background:var(--yellow2);
  border:1.5px solid var(--yellow1);font-size:clamp(11px,1.3vw,14px);font-weight:700}

/* 吹き出し（黄色いピル＋しっぽ） */
.rz-balloon{position:absolute;z-index:3;padding:.9rem 1.6rem;border-radius:1.6rem;
  background:var(--yellow1);color:#222;text-align:center;
  font-size:clamp(11px,1.3vw,14px);font-weight:700;line-height:1.45;rotate:-4deg;
  box-shadow:0 .5rem 1.2rem rgba(120,90,20,.18)}
.rz-balloon::after{content:"";position:absolute;top:100%;left:2.2rem;
  border:.7rem solid transparent;border-top-color:var(--yellow1);border-bottom:0}
.rz-balloon--main{top:-1.8rem;left:-1rem}
.rz-balloon--r{rotate:4deg}
.rz-cell__figwrap>.rz-balloon{bottom:-1.6rem;right:1.6rem}
.rz-cell__figwrap>.rz-balloon.rz-balloon--r{right:auto;left:1.6rem}

/* 円形マット（背景の丸） */
.rz-main__disc,.rz-cell__disc{position:absolute;z-index:0;border-radius:50%;
  background:#FBE9C3;pointer-events:none}
.rz-main__disc{width:62%;aspect-ratio:1/1;left:-9%;bottom:-7%}
.rz-cell__disc{width:56%;aspect-ratio:1/1;right:-6%;bottom:-8%}
.rz-cell__disc--r{right:auto;left:-6%}

/* ── 01 メインセル ── */
.rz-main{position:relative;display:grid;grid-template-columns:1.2fr 1fr;
  gap:clamp(28px,4vw,64px);align-items:center}
.rz-main__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.rz-main__fig{position:relative;z-index:1;margin:0;overflow:hidden;border-radius:24px;aspect-ratio:4/3}
.rz-main__fig--lg{grid-column:1 / -1;aspect-ratio:19/13}
.rz-main__fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.rz-main__fig:hover img{transform:scale(1.05)}
.rz-main__body{position:relative}
.rz-wheat{position:absolute;right:0;top:-3.5rem;width:clamp(38px,4.4vw,64px);
  rotate:12deg;pointer-events:none}

/* ── 02以降のセル ── */
.rz-cell{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4.5vw,72px);
  align-items:center;margin-top:clamp(60px,8vw,120px)}
.rz-cell--rev .rz-cell__figwrap{order:2}
.rz-cell__figwrap{position:relative}
.rz-cell__fig{position:relative;z-index:1;margin:0;overflow:hidden;
  border-radius:26px;aspect-ratio:9/6.4}
.rz-cell__fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.rz-cell__fig:hover img{transform:scale(1.05)}

@media only screen and (max-width:900px){
  .rz-main{grid-template-columns:1fr;gap:3.4rem}
  .rz-cell{grid-template-columns:1fr;gap:2.6rem;margin-top:5.5rem}
  .rz-cell--rev .rz-cell__figwrap{order:0}
  .rz-wheat{top:auto;bottom:-2rem;right:.5rem}
}
@media only screen and (max-width:768px){
  .rz__band{padding:5.5rem 0 6.5rem;background-size:360px auto}
  .rz__list{margin-top:3.6rem;padding-bottom:5rem}
  .rz-main__fig,.rz-cell__fig{border-radius:16px}
  /* 背景の丸が画面外に出ないよう内側に */
  .rz-cell__disc{width:52%;right:0;bottom:-5%}
  .rz-cell__disc--r{right:auto;left:0}
  .rz-main__disc{width:58%;left:0;bottom:-5%}
  .rz-main__grid{gap:1rem}
  .rz-link{width:100%;justify-content:center}
  .rz__band-bread--1{width:82px;right:-.5rem;top:-1.4rem}
  .rz__band-bread--2{width:64px;right:76px;bottom:-2rem}
}

/* ══════════════════════════════════════════════════════════════
   イラストの統一 ─ 自社店舗サイト（okayamakobo.com/shop）の
   水彩パン・麦の穂を各ブロックに配置し、ふわふわ浮かせる
   ══════════════════════════════════════════════════════════════ */
@keyframes floatY{
  0%  {transform:translateY(0)      rotate(var(--rot,0deg))}
  50% {transform:translateY(-14px)  rotate(calc(var(--rot,0deg) + 3deg))}
  100%{transform:translateY(0)      rotate(var(--rot,0deg))}
}
.is-float{animation:floatY var(--dur,6s) ease-in-out infinite;animation-delay:var(--dly,0s);
  will-change:transform}

/* ── 実績（日本地図）に浮かぶパン ── */
.rs__floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.rs__float{position:absolute;
  filter:drop-shadow(0 .8rem 1.2rem rgba(120,80,20,.22));
  animation:floatY var(--dur,6s) ease-in-out infinite;animation-delay:var(--dly,0s);
  will-change:transform}
/* 円（クリームの地）と重ならないよう、画面の四隅寄りに置く */
.rs__float--1{--rot:-10deg;--dur:6.5s;--dly:0s;   width:clamp(74px,8vw,132px); left:3%;  top:9%}
.rs__float--2{--rot:12deg; --dur:7.4s;--dly:.9s;  width:clamp(60px,6.4vw,106px);right:4%; top:7%}
.rs__float--3{--rot:6deg;  --dur:8.2s;--dly:.4s;  width:clamp(56px,6vw,98px);  right:4%; bottom:9%}
.rs__float--4{--rot:-14deg;--dur:6.9s;--dly:1.4s; width:clamp(30px,3.2vw,52px);left:6%;  bottom:11%}
@media only screen and (max-width:768px){
  .rs__float--1{left:2%;top:12%}
  .rs__float--2{right:2%;top:9%}
  .rs__float--3{right:3%;bottom:14%}
  .rs__float--4{left:5%;bottom:17%}
}

/* ── 料金ブロック ── */
.pr{overflow-x:clip}
.pr__head{position:relative}
.pr__head::before,.pr__head::after{content:"";position:absolute;pointer-events:none;
  background:50% 50%/contain no-repeat;
  animation:floatY var(--dur,7s) ease-in-out infinite;animation-delay:var(--dly,0s)}
.pr__head::before{--rot:-12deg;--dur:7.2s;--dly:.2s;
  width:clamp(58px,7vw,112px);aspect-ratio:300/233;
  background-image:url(../img/kobo/bread-a.png);left:2%;top:-1.5rem}
.pr__head::after{--rot:10deg;--dur:8s;--dly:1s;
  width:clamp(48px,5.6vw,92px);aspect-ratio:250/210;
  background-image:url(../img/kobo/bread-b.png);right:3%;top:.5rem}
/* 契約金ボックスに麦の穂 */
.pr__fee{position:relative;overflow:hidden}
.pr__fee::after{content:"";position:absolute;right:-1rem;bottom:-1.4rem;
  width:clamp(52px,6vw,88px);aspect-ratio:70/87;opacity:.5;rotate:14deg;
  background:url(../img/kobo/wheat.png) 50% 50%/contain no-repeat;pointer-events:none}

/* ── 開業までの流れ ── */
.fl{overflow-x:clip}
.fl__head{position:relative}
.fl__head::before,.fl__head::after{content:"";position:absolute;pointer-events:none;
  background:50% 50%/contain no-repeat;
  animation:floatY var(--dur,7s) ease-in-out infinite;animation-delay:var(--dly,0s)}
.fl__head::before{--rot:14deg;--dur:7.6s;--dly:.5s;
  width:clamp(52px,6.2vw,100px);aspect-ratio:250/210;
  background-image:url(../img/kobo/bread-b.png);left:3%;top:0}
.fl__head::after{--rot:-9deg;--dur:6.8s;--dly:1.2s;
  width:clamp(56px,6.8vw,108px);aspect-ratio:300/233;
  background-image:url(../img/kobo/bread-a.png);right:2%;top:-1rem}
/* 最終ステップ（店舗クリニック）の脇に麦の穂 */
.fl__after{position:relative}
.fl__after::before{content:"";position:absolute;left:50%;top:-3.4rem;translate:-50% 0;
  width:clamp(30px,3.4vw,52px);aspect-ratio:70/87;opacity:.7;
  background:url(../img/kobo/wheat.png) 50% 50%/contain no-repeat;pointer-events:none}

/* ── NEWS（黄色ゾーン）にも1点 ── */
.c-section-voice{position:relative;overflow-x:clip}
.c-section-voice::before{content:"";position:absolute;left:2%;top:1rem;z-index:1;
  --rot:-8deg;--dur:8.4s;--dly:.6s;
  width:clamp(52px,6vw,96px);aspect-ratio:300/233;pointer-events:none;
  background:url(../img/kobo/bread-a.png) 50% 50%/contain no-repeat;
  filter:drop-shadow(0 .6rem 1rem rgba(120,80,20,.16));
  animation:floatY var(--dur) ease-in-out infinite;animation-delay:var(--dly)}

/* 動きを減らす設定の方には静止で */
@media (prefers-reduced-motion:reduce){
  .rs__float,.is-float,
  .pr__head::before,.pr__head::after,
  .fl__head::before,.fl__head::after,
  .c-section-voice::before{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   動画・SNS ─ ugokko.jp の構成を踏襲
   ・和文＋英字の見出し／サムネイル＋再生ボタン／クリックでポップアップ再生
   ・SNSは「和文＋英字＋矢印」のリンクボックス（.s-box の作法）
   ══════════════════════════════════════════════════════════════ */
.mv-sec{position:relative;z-index:2;overflow-x:clip;background:#FFF8E1;
  background-image:url(../img/kobo/wheat-tile.png);background-size:640px auto;
  padding:9rem 0 10rem;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}
.mv-sec__inner{width:min(92vw,110rem);margin-inline:auto}
.mv-sec__head{position:relative;text-align:center;margin-bottom:5rem}
.mv-sec__en{display:block;font-family:"Jost",sans-serif;font-weight:700;
  font-size:clamp(30px,4.4vw,45px);line-height:1;letter-spacing:.17em;color:#E70012}
.mv-sec__ttl{margin:1.6rem 0 0;font-size:clamp(21px,3vw,32px);font-weight:700;line-height:1.5}
.mv-sec__lead{margin:1.4rem 0 0;font-size:clamp(13px,1.6vw,16px);line-height:1.95;color:#555}

/* 再生ボタン付きサムネイル */
.mv-play{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  overflow:hidden;border-radius:20px;background:#000;aspect-ratio:16/9;line-height:0}
.mv-play img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .3s}
.mv-play:hover img{transform:scale(1.05);opacity:.85}
.mv-play__btn{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(52px,6vw,84px);aspect-ratio:1/1;border-radius:50%;
  background:#E70012;box-shadow:0 .6rem 1.8rem rgba(0,0,0,.3);
  transition:transform .3s cubic-bezier(.54,.35,.17,1.32)}
.mv-play__btn::after{content:"";position:absolute;left:56%;top:50%;translate:-50% -50%;
  border:.9rem solid transparent;border-left:1.4rem solid #FFF;border-right:0}
.mv-play:hover .mv-play__btn{transform:scale(1.12)}
.mv-play__pill{position:absolute;left:1.4rem;top:1.4rem;padding:.6rem 1.4rem;border-radius:5rem;
  background:var(--yellow1);color:#222;font-size:clamp(11px,1.3vw,14px);font-weight:700;line-height:1}

/* メイン動画 */
.mv-main{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3.4vw,52px);align-items:center}
.mv-tag{display:inline-block;padding:.5rem 1.3rem;border-radius:5rem;background:#E70012;color:#FFF;
  font-size:clamp(11px,1.25vw,13px);font-weight:700}
.mv-tag--sm{margin-top:1.4rem;background:#FFF;color:#E70012;border:1.5px solid #E70012}
.mv-main__ttl{margin:1.4rem 0 0;font-size:clamp(17px,2.2vw,26px);font-weight:700;line-height:1.6}
.mv-main__txt{margin:1.4rem 0 0;font-size:clamp(12.5px,1.5vw,15px);line-height:1.95;color:#444}
.mv-ch{display:flex;align-items:center;gap:1.2rem;margin-top:2rem;padding:1.4rem 1.8rem;
  border-radius:18px;background:#FFF;text-decoration:none;color:inherit;
  box-shadow:0 .3rem 1.2rem rgba(120,90,20,.10);transition:transform .25s cubic-bezier(.54,.35,.17,1.32)}
.mv-ch:hover{transform:translateY(-.3rem)}
.mv-ch__ico{flex:none;width:4.2rem;height:3rem;border-radius:.8rem;background:#FF0000;position:relative}
.mv-ch__ico::after{content:"";position:absolute;left:54%;top:50%;translate:-50% -50%;
  border:.6rem solid transparent;border-left:.95rem solid #FFF;border-right:0}
.mv-ch__body{display:flex;flex-direction:column;line-height:1.4}
.mv-ch__body em{font-style:normal;font-size:clamp(13px,1.5vw,16px);font-weight:700}
.mv-ch__body small{color:#777;font-size:clamp(10px,1.2vw,12px)}
.mv-ch__arrow{margin-left:auto;width:1.8rem;height:1.8rem;flex:none;
  background:url(../img/oyatsu/link-arrow-02-red.svg) 50% 50%/100% no-repeat}

/* 動画一覧 */
.mv-list{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  margin:clamp(40px,5vw,70px) 0 0;padding:0;list-style:none}
.mv-item{display:flex;flex-direction:column}
.mv-item .mv-play{border-radius:16px}
.mv-item__ttl{margin:.9rem 0 0;font-size:clamp(12px,1.4vw,14.5px);font-weight:700;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mv-item .mv-tag--sm{align-self:flex-start}

/* SNS */
.sns{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(56px,7vw,100px);padding:clamp(32px,4vw,56px);
  border-radius:28px;background:#FFF;box-shadow:0 .6rem 2rem rgba(120,90,20,.08)}
.sns__en{display:block;font-family:"Jost",sans-serif;font-weight:700;color:#E70012;
  font-size:clamp(16px,2vw,24px);letter-spacing:.14em;line-height:1}
.sns__ttl{margin:1.2rem 0 0;font-size:clamp(18px,2.3vw,27px);font-weight:700;line-height:1.55}
.sns__txt{margin:1.6rem 0 0;font-size:clamp(12.5px,1.5vw,15px);line-height:2}
.sns__txt strong{font-weight:700;background:linear-gradient(transparent 64%,var(--yellow1) 64%)}
.sns__links{display:grid;gap:1.2rem;margin-top:2.4rem}
.sns-link{display:flex;align-items:center;gap:1.2rem;padding:1.5rem 1.8rem;border-radius:16px;
  text-decoration:none;color:inherit;border:2px solid #EEE7DA;background:#FFF;
  transition:transform .25s cubic-bezier(.54,.35,.17,1.32),border-color .25s}
.sns-link:hover{transform:translateY(-.3rem)}
.sns-link--yt:hover{border-color:#FF0000}
.sns-link--ig:hover{border-color:#C13584}
.sns-link__ico{flex:none;width:3.6rem;height:3.6rem;border-radius:1rem;position:relative}
.sns-link--yt .sns-link__ico{background:#FF0000}
.sns-link--yt .sns-link__ico::after{content:"";position:absolute;left:55%;top:50%;translate:-50% -50%;
  border:.62rem solid transparent;border-left:1rem solid #FFF;border-right:0}
.sns-link--ig .sns-link__ico{background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7)}
.sns-link--ig .sns-link__ico::before{content:"";position:absolute;inset:.85rem;border:.28rem solid #FFF;border-radius:.85rem}
.sns-link--ig .sns-link__ico::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:1.2rem;height:1.2rem;border:.28rem solid #FFF;border-radius:50%}
.sns-link__body{display:flex;flex-direction:column;line-height:1.45}
.sns-link__body em{font-style:normal;font-weight:700;font-size:clamp(13px,1.5vw,16px)}
.sns-link__body small{color:#777;font-size:clamp(10px,1.2vw,12.5px)}
.sns-link__arrow{margin-left:auto;width:1.8rem;height:1.8rem;flex:none;
  background:url(../img/oyatsu/link-arrow-02-red.svg) 50% 50%/100% no-repeat}

/* スマホのモックアップ */
.sns__phone{position:relative;display:flex;justify-content:center}
.phone{position:relative;width:min(72vw,270px);aspect-ratio:9/18.4;
  border-radius:34px;background:#111;padding:9px;
  box-shadow:0 1.6rem 3.4rem rgba(60,40,10,.26);
  animation:phoneFloat 7s ease-in-out infinite}
@keyframes phoneFloat{
  0%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(1deg)}
  100%{transform:translateY(0) rotate(-2deg)}
}
.phone__notch{position:absolute;left:50%;top:9px;translate:-50% 0;z-index:3;
  width:36%;height:20px;border-radius:0 0 14px 14px;background:#111}
.phone__screen{position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:26px;background:#FFF;color:#111;font-size:9px;line-height:1.4}
.ig-bar{display:flex;align-items:center;gap:8px;padding:26px 10px 8px;
  border-bottom:1px solid #EEE;font-weight:700;font-size:10px}
.ig-back{width:7px;height:7px;border-left:1.6px solid #111;border-bottom:1.6px solid #111;rotate:45deg}
.ig-prof{display:flex;align-items:center;gap:10px;padding:10px}
.ig-avatar{flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;
  display:grid;place-content:center;background:var(--yellow1);padding:6px}
.ig-avatar img{width:100%;height:auto;display:block}
.ig-stats{display:flex;flex:1;justify-content:space-around;margin:0;padding:0;list-style:none;text-align:center}
.ig-stats li{display:flex;flex-direction:column}
.ig-stats em{font-style:normal;font-weight:700;font-size:11px}
.ig-stats small{color:#666;font-size:8px}
.ig-bio{padding:0 10px 10px}
.ig-bio strong{display:block;font-size:9.5px}
.ig-bio span{display:block;margin-top:2px;color:#555;font-size:8.5px;line-height:1.5}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0 2px}
.ig-grid span{aspect-ratio:1/1;background:50% 50%/cover no-repeat #EEE}
.sns__soon{position:absolute;top:-1rem;right:0;padding:.7rem 1.6rem;border-radius:5rem;
  background:#E70012;color:#FFF;font-family:"Jost",sans-serif;font-weight:700;
  font-size:clamp(11px,1.3vw,14px);rotate:6deg;
  box-shadow:0 .5rem 1.2rem rgba(231,0,18,.28)}

/* ポップアップ */
.mv-modal{position:fixed;inset:0;z-index:100;display:none;place-content:center;
  background:rgba(10,6,0,.86);padding:5vw}
.mv-modal.is-open{display:grid}
.mv-modal__inner{width:min(92vw,96rem);aspect-ratio:16/9}
.mv-modal__frame{width:100%;height:100%}
.mv-modal__frame iframe{width:100%;height:100%;border:0;border-radius:12px}
.mv-modal__close{position:absolute;top:3vh;right:5vw;width:4.4rem;height:4.4rem;
  border:0;border-radius:50%;background:#FFF;cursor:pointer}
.mv-modal__close::before,.mv-modal__close::after{content:"";position:absolute;
  left:50%;top:50%;width:2rem;height:.28rem;background:#222;border-radius:2px}
.mv-modal__close::before{translate:-50% -50%;rotate:45deg}
.mv-modal__close::after{translate:-50% -50%;rotate:-45deg}

@media only screen and (max-width:900px){
  .mv-main{grid-template-columns:1fr;gap:2.2rem}
  .mv-list{grid-template-columns:repeat(2,1fr)}
  .sns{grid-template-columns:1fr;gap:3.4rem}
  .sns__phone{order:2}
}
@media only screen and (max-width:768px){
  .mv-sec{padding:7rem 0 8rem;background-size:420px auto}
  .mv-sec__head{margin-bottom:3.4rem}
  .mv-list{gap:1.4rem}
  .sns{padding:2.4rem 1.8rem;border-radius:20px}
  .mv-modal__close{top:2vh;right:4vw;width:3.8rem;height:3.8rem}
}
@media (prefers-reduced-motion:reduce){ .phone{animation:none} }

/* ══════════════════════════════════════════════════════════════
   開業ストーリー ─ ugokko.jp の .story を実測どおりに移植
   ・背景を流れる英字（.loop-text ×2 を translateX 0→-100% で無限ループ）
   ・その下にカードの帯（.slide-wrapper ×2 を同じ 40s でループ）
   ・ugokko は rem が 16px 基準。当ページは 62.5%（10px）基準なので px に換算
     24.5rem→392px / 16.5rem→264px / 2rem→32px / 6rem→96px
   ══════════════════════════════════════════════════════════════ */
@keyframes loopSlide{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

.st{position:relative;z-index:2;overflow-x:clip;padding-top:104px;padding-bottom:96px;
  background:#F7F3E8;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}

/* ── 流れる英字 ── */
/* 見出し → 英字ループ → カードの帯、の順に縦に積む
   （ugokko は見出しがないので英字を絶対配置にしていたが、
     こちらは見出しを足したぶん重なるのでフローに戻した） */
.st__loopwrap{position:relative;height:98px;width:100%;margin-bottom:56px;
  display:flex;align-items:center;overflow:hidden;pointer-events:none}
.st__loop{display:flex;width:max-content;animation:loopSlide 40s linear 1s infinite both}
.st__loop p{position:relative;margin:0 96px 0 0;white-space:nowrap;
  font-family:"Jost",sans-serif;font-weight:600;font-size:100px;line-height:1;
  letter-spacing:.02em;color:#EFE2C0}

/* ── 見出し（英字ループの上に重ねる） ── */
.st__head{position:relative;width:min(92vw,110rem);margin:0 auto 56px;text-align:center;z-index:3}
.st__en{display:block;font-family:"Jost",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.22em;color:#B08A3E}
.st__ttl{margin:1.4rem 0 0;font-size:clamp(21px,3vw,32px);font-weight:700;line-height:1.5}
.st__lead{max-width:56rem;margin:1.4rem auto 0;font-size:clamp(13px,1.6vw,16px);line-height:1.95;color:#555}

/* ── カードの帯 ── */
.st__slide{width:100%;display:flex;align-items:center;overflow:hidden}
.st__wrap{display:flex;width:max-content;align-items:flex-end;gap:20px;margin-right:32px;
  animation:loopSlide 40s linear 1s infinite both}
.st:hover .st__wrap,.st:hover .st__loop{animation-play-state:paused}

/* カテゴリカード（写真の上に大きな和文） */
.st-card{position:relative;overflow:hidden;height:620px;width:290px;
  padding-top:240px;border-radius:60px;box-sizing:border-box;flex:none}
.st-card>a{display:block;height:100%;color:#FFF;text-decoration:none}
.st-card__bg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;margin:0}
.st-card__bg img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.st-card__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(60,35,10,.52) 0%,rgba(60,35,10,.30) 55%,rgba(60,35,10,.60) 100%)}
.st-card__en{display:table;margin:0 auto 10px;position:relative;z-index:10;
  font-family:"Jost",sans-serif;font-size:32px;font-weight:600;letter-spacing:0;line-height:1;
  text-align:center}
.st-card__ja{position:relative;z-index:10;text-align:center;margin:0;
  font-size:57px;font-weight:700;letter-spacing:.16em;line-height:1.15}
.st-card__more{display:flex;align-items:center;position:absolute;right:50px;bottom:52px;z-index:10}
.st-card__more p{margin:0 7px 0 0;font-size:18px;font-weight:700}
.st-arw{position:relative;display:block;width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9)}
.st-arw::before{content:"";position:absolute;left:11px;top:50%;width:11px;height:1.5px;
  background:#FFF;translate:0 -50%}
.st-arw::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;
  border-top:1.5px solid #FFF;border-right:1.5px solid #FFF;rotate:45deg;translate:0 -50%}
@media (hover:hover){ .st-card:hover .st-card__bg img{transform:scale(1.05)} }

/* 記事カード */
.st-kiji{position:relative;width:290px;box-sizing:border-box;flex:none}
.st-kiji>a{display:block;color:inherit;text-decoration:none}
.st-kiji__bg{position:relative;width:100%;height:430px;border-radius:60px;overflow:hidden;
  margin:0 0 20px}
.st-kiji__bg img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.st-kiji__txt{width:calc(100% - 30px);margin:0 auto}
.st-kiji__ttl{display:block;margin:0 0 10px;font-size:18px;font-weight:700;
  line-height:calc(52/36 * 1em);letter-spacing:.04em;
  padding-bottom:15px;border-bottom:1px solid #DCD5C4}
.st-kiji__day{display:inline-block;margin-right:10px;font-family:"Jost",sans-serif;
  font-size:14px;font-weight:500;letter-spacing:.04em;color:#9A9A9A}
.st-kiji__cate{display:inline-block;margin:0 10px 0 0;font-size:12px;font-weight:500;
  letter-spacing:0;color:var(--red1)}
@media (hover:hover){ .st-kiji:hover .st-kiji__bg img{transform:scale(1.05)} }

@media only screen and (max-width:800px){
  .st{padding-top:64px;padding-bottom:72px}
  .st__loopwrap{height:74px;margin-bottom:36px}
  .st__loop p{margin-right:72px;font-size:74px}
  .st__head{margin-bottom:36px}
  .st__wrap{gap:15px;margin-right:15px}
  .st-card{height:480px;width:215px;padding-top:188px;border-radius:46px}
  .st-card__en{margin:0 auto 15px;font-size:24px}
  .st-card__ja{font-size:44px}
  .st-card__more{right:40px;bottom:40px}
  .st-card__more p{font-size:14px;margin-right:5px}
  .st-arw{width:28px;height:28px}
  .st-arw::before{left:9px;width:9px}
  .st-arw::after{right:9px;width:5px;height:5px}
  .st-kiji{width:215px}
  .st-kiji__bg{height:340px;border-radius:46px;margin-bottom:14px}
  .st-kiji__txt{width:calc(100% - 20px)}
  .st-kiji__ttl{font-size:14px;line-height:calc(20/14 * 1em);padding-bottom:14px;margin-bottom:10px}
  .st-kiji__day{font-size:11px;margin-right:7px}
  .st-kiji__cate{font-size:10px;margin-right:5px}
}

/* ══════════════════════════════════════════════════════════════
   よくある質問（トップ） ─ ugokko.jp の .faq .top_con を実測どおりに移植
   左＝FAQ／和文／カテゴリリンク、右＝各カテゴリの代表質問カード
   ══════════════════════════════════════════════════════════════ */
.fq{position:relative;z-index:2;overflow-x:clip;padding:96px 0 104px;background:#FAF7EC;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}
/* パンはカテゴリリンクの下、左カラムの余白に置く。
   絶対配置にするとリンクへ重なるので、通常フローのまま下に積む。 */
.fq__illust{width:min(14vw,170px);margin:4.5rem 0 0;pointer-events:none;
  filter:drop-shadow(0 .8rem 1.2rem rgba(120,80,20,.18))}
.fq__illust img{width:100%;height:auto;display:block}
.fq__top{position:relative;z-index:1;width:min(92vw,122rem);margin-inline:auto;
  display:flex;flex-wrap:wrap;justify-content:space-between}
.fq__tit{width:240px;flex:none}
.fq__ttl{margin:0 0 40px;font-family:"Jost",sans-serif;font-size:99px;font-weight:600;
  line-height:1;letter-spacing:.01em;color:#222}
.fq__ja{position:relative;display:table;margin:0 0 96px;padding-left:2.4rem;
  font-size:19px;font-weight:700}
.fq__ja::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;
  border-radius:50%;background:var(--yellow1);border:2px solid #E0B400}
.fq__tit a{position:relative;display:flex;align-items:center;margin-bottom:18px;
  font-size:14px;font-weight:700;color:#222;text-decoration:none}
.fq__arw{position:relative;display:block;width:12px;height:12px;margin-right:8px;
  flex:none;transition:transform .4s}
.fq__arw::before{content:"";position:absolute;left:0;top:50%;width:11px;height:1.4px;
  background:#9A9A9A;translate:0 -50%;transition:background .4s}
.fq__arw::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;
  border-top:1.4px solid #9A9A9A;border-right:1.4px solid #9A9A9A;rotate:45deg;
  translate:0 -50%;transition:border-color .4s}
@media (hover:hover){
  .fq__tit a:hover .fq__arw{transform:translateX(3px)}
  .fq__tit a:hover .fq__arw::before{background:var(--red1)}
  .fq__tit a:hover .fq__arw::after{border-color:var(--red1)}
}
.fq__links{display:flex;flex:1 1 0;margin-left:48px;flex-direction:column;gap:16px}
.fq__links>div{border-radius:50px;overflow:hidden}
.fq__links>div a{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:30px 50px;overflow:hidden;background:#FFF;text-decoration:none;color:inherit;
  transition:background .4s}
.fq__q{margin:0;flex:none;font-family:"Jost",sans-serif;font-size:42px;font-weight:600;
  line-height:1;color:var(--red1);transition:color .4s}
.fq__qt{margin:0;flex:1 1 0;font-size:18px;font-weight:700;color:#222;transition:color .4s}
.fq__cate{display:inline-block;padding:6px 14px;border:1px solid #DDD8CB;border-radius:9999px;
  font-size:12px;white-space:nowrap;color:#848484;transition:border-color .4s,color .4s}
@media (hover:hover){
  .fq__links>div a:hover{background:var(--yellow1)}
  .fq__links>div a:hover .fq__q{color:#7A4A00}
  .fq__links>div a:hover .fq__cate{color:#5A3A00;border-color:#5A3A00}
}
@media only screen and (max-width:1100px){
  .fq__illust{display:none}
  .fq__top{display:block}
  .fq__tit{width:100%}
  .fq__ja{margin-bottom:40px}
  .fq__nav{display:flex;flex-wrap:wrap;gap:0 24px;margin-bottom:32px}
  .fq__links{display:block;margin-left:0}
  .fq__links>div{border-radius:12px;margin-bottom:12px}
  .fq__links>div a{display:block;padding:20px 30px;border-radius:12px}
  .fq__qt{display:block;margin-top:14px}
  .fq__cate{position:absolute;right:20px;top:20px}
}
@media only screen and (max-width:768px){
  .fq{padding:72px 0 80px}
  .fq__ttl{font-size:64px;margin-bottom:24px}
  .fq__ja{font-size:16px;margin-bottom:28px}
  .fq__nav{gap:0 18px}
  .fq__tit a{font-size:13px;margin-bottom:14px}
  .fq__links>div a{padding:15px 20px 22px}
  .fq__q{font-size:37px}
  .fq__qt{font-size:16px;margin-top:8px}
  .fq__cate{font-size:12px;padding:3px 12px 4px;right:10px;top:10px}
  .fq__illust{display:none}
}

/* ══════════════════════════════════════════════════════════════
   よくある質問（詳細ページ faq.html）
   ugokko.jp/faq/ の .qa-box を実測どおりに移植
   ・カードは白／角丸30px（PCは50px）／間隔16px
   ・Q. A. は欧文（当ページは Jost）でテーマカラー
   ・開閉は高さアニメーション（js-qa）
   ══════════════════════════════════════════════════════════════ */
.fqp-hero,.fqp,.fqp-nav{
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}

/* ── 見出し ── */
.fqp-hero{position:relative;overflow-x:clip;padding:18rem 0 7rem;
  background:var(--yellow1) url(../img/pattern-bread.webp) 50% 0/640px auto repeat}
.fqp-hero__inner{position:relative;z-index:2;width:min(92vw,122rem);margin-inline:auto;text-align:center}
.fqp-hero__crumb{margin:0 0 3.2rem;font-size:12px;color:#6B4E12;letter-spacing:.08em}
.fqp-hero__crumb a{color:#6B4E12;text-decoration:none}
.fqp-hero__crumb a:hover{text-decoration:underline}
.fqp-hero__crumb span::before{content:"／";margin:0 .8rem;opacity:.55}
.fqp-hero__en{margin:0;font-family:"Jost",sans-serif;font-weight:600;
  font-size:clamp(56px,9vw,99px);line-height:1;letter-spacing:.01em;color:#3A2400}
.fqp-hero__ja{position:relative;display:table;margin:2rem auto 0;padding-left:2.4rem;
  font-size:19px;font-weight:700;color:#3A2400}
.fqp-hero__ja::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;
  border-radius:50%;background:#FFF;border:2px solid #3A2400}
.fqp-hero__lead{margin:2.6rem 0 0;font-size:clamp(13px,1.6vw,16px);line-height:2;color:#4A3200}
.fqp-hero__illust{position:absolute;left:4vw;bottom:3rem;width:min(16vw,150px);margin:0;z-index:1;
  filter:drop-shadow(0 .8rem 1.2rem rgba(120,80,20,.2))}
.fqp-hero__illust--2{left:auto;right:5vw;bottom:auto;top:16rem;width:min(13vw,120px)}
.fqp-hero__illust img{width:100%;height:auto;display:block}

/* ── カテゴリナビ（追従） ── */
.fqp-nav{position:sticky;top:0;z-index:20;background:rgba(250,247,236,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid #E8E1CE}
.fqp-nav__inner{width:min(92vw,122rem);margin-inline:auto;display:flex;flex-wrap:wrap;
  gap:0 2.8rem;padding:1.6rem 0}
.fqp-nav a{display:flex;align-items:center;font-size:14px;font-weight:700;color:#222;
  text-decoration:none;padding:.4rem 0}
.fqp-nav a.is-current{color:var(--red1)}
.fqp-nav a.is-current .fq__arw::before{background:var(--red1)}
.fqp-nav a.is-current .fq__arw::after{border-color:var(--red1)}
@media (hover:hover){
  .fqp-nav a:hover .fq__arw{transform:translateX(3px)}
  .fqp-nav a:hover .fq__arw::before{background:var(--red1)}
  .fqp-nav a:hover .fq__arw::after{border-color:var(--red1)}
}

/* ── 本文 ── */
.fqp{background:#FAF7EC;padding:8rem 0 10rem}
.fqp-con{width:min(92vw,100rem);margin:0 auto 9rem;scroll-margin-top:9rem}
.fqp-con__head{margin-bottom:3.2rem}
.fqp-con__ttl{position:relative;margin:0;padding-left:3.2rem;font-size:clamp(20px,2.6vw,28px);
  font-weight:700;line-height:1.5}
.fqp-con__ttl::before{content:"";position:absolute;left:0;top:.45em;width:20px;height:20px;
  border-radius:50%;background:var(--yellow1);border:2px solid #E0B400}
.fqp-con__en{display:block;margin-top:.8rem;padding-left:3.2rem;font-family:"Jost",sans-serif;
  font-weight:600;font-size:14px;letter-spacing:.22em;color:var(--red1)}

.qa{background:#FFF;border-radius:30px;margin-bottom:16px;overflow:hidden}
.qa__q{display:flex;align-items:flex-start;gap:0;width:100%;
  padding:26px 78px 22px 30px;position:relative;
  background:none;border:0;text-align:left;cursor:pointer;
  font-family:inherit;font-size:18px;font-weight:700;line-height:1.65;letter-spacing:.03em;color:#222}
.qa__mark{flex:none;margin-right:12px;font-family:"Jost",sans-serif;font-weight:600;
  font-size:37px;line-height:1;color:var(--red1);translate:0 -.06em}
.qa__txt{flex:1 1 0;padding-top:.35em}
.qa__icon{position:absolute;right:30px;top:34px;width:26px;height:26px;border-radius:50%;
  background:var(--yellow1);flex:none}
.qa__icon::before,.qa__icon::after{content:"";position:absolute;left:50%;top:50%;
  width:12px;height:2px;border-radius:2px;background:#3A2400;translate:-50% -50%;
  transition:transform .3s ease}
.qa__icon::after{transform:rotate(90deg)}
.qa__q[aria-expanded="true"] .qa__icon::after{transform:rotate(0deg)}
.qa__a{overflow:hidden}
.qa__a-inner{display:flex;align-items:flex-start;padding:0 30px 30px}
.qa__mark--a{color:#B08A3E}
.qa__body{flex:1 1 0;padding-top:.5em;font-size:15px;font-weight:400;line-height:2;color:#444}
.qa__body p{margin:0 0 1.2em}
.qa__body p:last-child{margin-bottom:0}
.qa__body strong{font-weight:700;background:linear-gradient(transparent 64%,var(--yellow1) 64%)}
.qa__body a{color:var(--red1);font-weight:700}

/* ── 最後の導線 ── */
.fqp-cta{width:min(92vw,100rem);margin:0 auto;padding:6rem 4rem 6.4rem;text-align:center;
  border-radius:30px;background:#FFF;border:2px dashed #E4DCC6}
.fqp-cta__en{margin:0;font-family:"Jost",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.22em;color:#B08A3E}
.fqp-cta__ttl{margin:1.6rem 0 0;font-size:clamp(19px,2.4vw,26px);font-weight:700;line-height:1.6}
.fqp-cta__lead{margin:1.6rem 0 0;font-size:clamp(13px,1.6vw,15px);line-height:2;color:#555}
.fqp-cta__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:1.6rem;margin-top:3.2rem}
.fqp-cta__btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:26rem;padding:1.6rem 3rem;border-radius:5rem;
  border:2px solid #3A2400;background:#FFF;color:#3A2400;
  font-size:15px;font-weight:700;text-decoration:none;transition:background .3s,color .3s}
.fqp-cta__btn--main{background:var(--yellow1)}
@media (hover:hover){ .fqp-cta__btn:hover{background:#3A2400;color:#FFF} }

@media only screen and (max-width:768px){
  .fqp-hero{padding:12rem 0 5rem}
  .fqp-hero__illust{width:100px;left:2vw;bottom:1rem}
  .fqp-hero__illust--2{width:78px;right:3vw;top:11rem}
  .fqp-hero__ja{font-size:16px}
  /* スマホでは折り返さず、1行の横スクロールにする（追従バーを低く保つ） */
  .fqp-nav__inner{width:100%;gap:0 1.8rem;padding:1.1rem 4vw;
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .fqp-nav__inner::-webkit-scrollbar{display:none}
  .fqp-nav a{font-size:12px;white-space:nowrap;flex:none}
  .fqp{padding:5rem 0 7rem}
  .fqp-con{margin-bottom:6rem;scroll-margin-top:7rem}
  .fqp-con__ttl{padding-left:2.6rem;font-size:19px}
  .fqp-con__ttl::before{width:16px;height:16px}
  .fqp-con__en{padding-left:2.6rem;font-size:12px}
  .qa{border-radius:16px;margin-bottom:12px}
  .qa__q{padding:20px 54px 18px 20px;font-size:15px}
  .qa__mark{font-size:30px;margin-right:9px}
  .qa__icon{right:18px;top:24px;width:22px;height:22px}
  .qa__icon::before,.qa__icon::after{width:10px}
  .qa__a-inner{padding:0 20px 22px}
  .qa__body{font-size:14px;line-height:1.95}
  .fqp-cta{padding:4rem 2.2rem 4.4rem;border-radius:18px}
  .fqp-cta__btn{min-width:100%;padding:1.5rem 2rem}
}

/* ══════════════════════════════════════════════════════════════
   フッター ─ ugokko.jp の footer を構成そのままで移植
   info_area（ACCESS＋Instagram）→ links_area（会社情報／サイトマップ／
   お問い合わせ／コピーライト）の2段構成。
   Instagram の帯は背景写真を2組並べて translateX 0→-100% でループ。
   ══════════════════════════════════════════════════════════════ */
.ft{position:relative;z-index:2;overflow-x:clip;background:#FAF7EC;padding:9rem 0 0;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}

/* ── 共通の矢印 ── */
.ft-arw{position:relative;display:inline-block;width:12px;height:12px;flex:none;
  transition:transform .4s}
.ft-arw::before{content:"";position:absolute;left:0;top:50%;width:11px;height:1.4px;
  background:currentColor;translate:0 -50%}
.ft-arw::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;
  border-top:1.4px solid currentColor;border-right:1.4px solid currentColor;
  rotate:45deg;translate:0 -50%}
.ft-arw--md{width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor}
.ft-arw--md::before{left:10px;width:11px}
.ft-arw--md::after{right:10px}
.ft-arw--lg{width:52px;height:52px;border-radius:50%;border:1.5px solid currentColor}
.ft-arw--lg::before{left:17px;width:15px}
.ft-arw--lg::after{right:17px;width:7px;height:7px}
.ft-arw--white{color:#FFF}
.ft-arw--blank::after{rotate:-45deg}

/* ── info_area（Instagram の帯） ── */
.ft-info{width:min(92vw,130rem);margin-inline:auto}

/* ══ Instagram の帯 ══ */
.ft-insta{position:relative;border-radius:40px;overflow:hidden;background:#3A2400}
.ft-insta>a{position:relative;display:block;min-height:30rem;padding:5.6rem 6rem;
  color:#FFF;text-decoration:none}
.ft-insta__lead{position:relative;z-index:2;margin:0 0 1.6rem;font-size:clamp(15px,1.9vw,19px);
  font-weight:700;line-height:1.75}
.ft-insta__logo{position:relative;z-index:2;margin:0;font-family:"Jost",sans-serif;
  font-weight:600;font-size:clamp(34px,5.4vw,62px);line-height:1;letter-spacing:.02em}
.ft-insta__soon{position:relative;z-index:2;display:inline-block;margin-top:1.8rem;
  padding:.5rem 1.6rem;border-radius:5rem;background:var(--yellow1);color:#3A2400;
  font-size:12px;font-weight:700}
.ft-insta .ft-arw--lg{position:absolute;z-index:2;right:6rem;bottom:5.6rem;
  transition:transform .4s}
@media (hover:hover){ .ft-insta>a:hover .ft-arw--lg{transform:translateX(6px)} }

.ft-insta__bgwrap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;
  width:100%;opacity:.28;pointer-events:none}
/* 文字が写真に埋もれないよう、左から効く暗い膜を重ねる */
.ft-insta>a::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,#3A2400 0%,rgba(58,36,0,.92) 34%,rgba(58,36,0,.45) 62%,rgba(58,36,0,.25) 100%)}
.ft-insta__bg{display:flex;width:max-content;gap:12px;padding-right:12px;
  animation:loopSlide 46s linear infinite both}
.ft-insta__bg figure{width:200px;height:150px;margin:0;border-radius:16px;overflow:hidden;flex:none}
.ft-insta__bg img{width:100%;height:100%;object-fit:cover;display:block}

/* ══ links_area ══ */
.ft-links{position:relative;width:min(92vw,124rem);margin:9rem auto 0;padding-bottom:3rem;
  display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr) minmax(0,28rem);
  gap:0 5rem;align-items:start}

.ft-links__l{position:relative}
.ft-breads{position:relative;height:9rem;margin-bottom:1.6rem}
.ft-breads figure{position:absolute;margin:0}
.ft-breads figure:nth-child(1){left:0;top:0;width:8rem}
.ft-breads figure:nth-child(2){left:7.4rem;top:1.6rem;width:6.6rem}
.ft-breads figure:nth-child(3){left:14.4rem;top:.4rem;width:5rem}
.ft-breads img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 .6rem 1rem rgba(120,80,20,.18))}
.ft-logo{margin:0 0 2.4rem;width:min(20rem,60%)}
.ft-logo img{width:100%;height:auto;display:block}
.ft-company{margin:0 0 .8rem;font-size:15px;font-weight:700}
.ft-adr{margin:0 0 2rem;font-size:13px;line-height:1.9;color:#555}
.ft-tel{display:inline-flex;align-items:baseline;gap:.6rem;font-family:"Jost",sans-serif;
  font-weight:600;font-size:28px;letter-spacing:.02em;color:#222;text-decoration:none}
.ft-tel span{font-size:15px}
.ft-hours{margin:.6rem 0 0;font-size:12px;color:#6A6153}

/* サイトマップ */
.ft-sitemap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4rem;
  margin:0;padding:0;list-style:none}
.ft-blink{display:flex;align-items:center;gap:.9rem;margin-bottom:1.7rem;
  font-size:14px;font-weight:700;color:#222;text-decoration:none}
.ft-blink--mt{margin-top:3rem}
.ft-slink{display:block;margin:0 0 1.2rem 2.1rem;font-size:13px;color:#555;text-decoration:none}
@media (hover:hover){
  .ft-blink:hover{color:var(--red1)}
  .ft-blink:hover .ft-arw{transform:translateX(3px)}
  .ft-slink:hover{color:var(--red1)}
}

/* SNS */
.ft-sns{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:3.4rem}
.ft-sns__item{display:inline-flex;align-items:center;gap:.9rem;padding:1.1rem 2rem;
  border-radius:5rem;background:#FFF;border:1.5px solid #E8E1CE;
  font-size:13px;font-weight:700;color:#222;text-decoration:none;
  transition:background .3s,border-color .3s}
.ft-sns__ico{width:20px;height:20px;flex:none;background:50%/contain no-repeat}
.ft-sns__item--yt .ft-sns__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E70012' d='M23 7.5a3 3 0 0 0-2.1-2.1C19 4.9 12 4.9 12 4.9s-7 0-8.9.5A3 3 0 0 0 1 7.5C.5 9.4.5 12 .5 12s0 2.6.5 4.5a3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1c.5-1.9.5-4.5.5-4.5s0-2.6-.5-4.5Z'/%3E%3Cpath fill='%23fff' d='M9.8 15.5V8.5l6 3.5-6 3.5Z'/%3E%3C/svg%3E")}
.ft-sns__item--ig .ft-sns__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5' fill='none' stroke='%23222' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4.6' fill='none' stroke='%23222' stroke-width='1.8'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.3' fill='%23222'/%3E%3C/svg%3E")}
.ft-sns__item--web .ft-sns__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23222' stroke-width='1.8'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9.2' fill='none' stroke='%23222' stroke-width='1.8'/%3E%3Cpath d='M3.2 12h17.6M4.6 7h14.8M4.6 17h14.8' stroke='%23222' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")}
@media (hover:hover){ .ft-sns__item:hover{background:var(--yellow1);border-color:var(--yellow1)} }

/* お問い合わせカード */
.ft-contact>a{position:relative;display:block;padding:4.4rem 3rem 3.4rem;border-radius:30px;
  background:var(--yellow1);color:#3A2400;text-decoration:none;overflow:hidden;
  transition:background .3s}
.ft-contact__illust{position:absolute;right:1.6rem;top:-1rem;width:9rem;margin:0;opacity:.9}
.ft-contact__illust img{width:100%;height:auto;display:block}
.ft-contact__ja{position:relative;z-index:2;margin:0;font-size:19px;font-weight:700;line-height:1.6}
.ft-contact__en{position:relative;z-index:2;display:block;margin-top:.8rem;
  font-family:"Jost",sans-serif;font-weight:600;font-size:13px;letter-spacing:.18em;color:#7A5A10}
.ft-contact .ft-arw--md{position:absolute;right:2.6rem;bottom:2.6rem;transition:transform .4s}
@media (hover:hover){
  .ft-contact>a:hover{background:#FFE873}
  .ft-contact>a:hover .ft-arw--md{transform:translateX(4px)}
}

.ft-copy{grid-column:1/-1;margin:7rem 0 0;font-family:"Jost",sans-serif;font-size:12px;
  letter-spacing:.08em;color:#6A6153}
.ft-photo{grid-column:1/-1;margin:2.4rem 0 0;height:14rem;border-radius:24px;overflow:hidden}
.ft-photo img{width:100%;height:100%;object-fit:cover;display:block}

@media only screen and (max-width:1100px){
  .ft-links{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 4rem}
  .ft-contact{grid-column:1/-1;margin-top:4rem}
  .ft-contact>a{padding:3.4rem 3rem 3rem}
}
@media only screen and (max-width:768px){
  .ft{padding-top:6rem}
  .ft-insta{border-radius:20px}
  .ft-insta>a{min-height:24rem;padding:3.4rem 2.2rem}
  .ft-insta .ft-arw--lg{right:2.2rem;bottom:3rem;width:42px;height:42px}
  .ft-insta .ft-arw--lg::before{left:13px;width:13px}
  .ft-insta .ft-arw--lg::after{right:13px}
  .ft-insta__bg figure{width:140px;height:105px}
  .ft-links{display:block;margin-top:5rem}
  .ft-links__c{margin-top:4.4rem}
  .ft-sitemap{gap:0 2rem}
  .ft-blink{font-size:13px;margin-bottom:1.4rem}
  .ft-slink{font-size:12px;margin-left:1.8rem}
  .ft-sns{margin-top:2.6rem}
  .ft-sns__item{padding:.9rem 1.5rem;font-size:12px}
  .ft-contact{margin-top:3.4rem}
  .ft-copy{margin-top:4rem;text-align:center}
  .ft-photo{height:10rem;border-radius:16px}
  /* 追従CTA（固定・約7.4rem）に隠れないよう下を空ける */
  .ft-links{padding-bottom:calc(8.4rem + env(safe-area-inset-bottom))}
}

/* ══════════════════════════════════════════════════════════════
   追従CTA（PC）─ スマホには下部固定バーがあるが、PCには申し込み口が
   常駐していなかった。画面右端に貼り付く縦タブにして、本文の上に
   かぶらないようにしている（幅4.4rem＝右の余白に収まる）。
   FVを抜けたら右からせり出す。
   ══════════════════════════════════════════════════════════════ */
.pc-cta{display:none}
@media only screen and (min-width:769px){
  .pc-cta{
    display:flex;flex-direction:column;gap:.8rem;
    position:fixed;right:0;top:50%;z-index:18;
    transform:translate(calc(100% + 1rem),-50%);opacity:0;pointer-events:none;
    transition:transform .5s cubic-bezier(.33,1,.68,1),opacity .4s ease;
  }
  .pc-cta.is-shown{transform:translate(0,-50%);opacity:1;pointer-events:auto}
  .pc-cta__item{
    writing-mode:vertical-rl;text-orientation:upright;
    display:flex;align-items:center;justify-content:center;
    width:4.4rem;padding:2.6rem 0;box-sizing:border-box;
    border-radius:1.2rem 0 0 1.2rem;text-decoration:none;
    font-size:1.4rem;font-weight:700;letter-spacing:.12em;line-height:1;
    box-shadow:-.2rem .4rem 1.4rem rgba(0,0,0,.16);
    transition:padding-right .3s ease,box-shadow .3s ease;
  }
  .pc-cta__item:hover{padding-right:.6rem;box-shadow:-.2rem .6rem 2rem rgba(0,0,0,.22)}
  .pc-cta__item--main{background:var(--red1);color:#FFF}
  .pc-cta__item--sub{background:#FFF;border:.2rem solid var(--red1);border-right:0;color:var(--base)}
}
@media (prefers-reduced-motion:reduce){ .pc-cta{transition:opacity .3s ease} }

/* ══════════════════════════════════════════════════════════════
   あなたのケース ─ 個人／既存店／法人／福祉／海外の5つの入口。
   上段に主力2つを大きく、下段に個別見積の3つを小さく置く。
   ══════════════════════════════════════════════════════════════ */
.cs{position:relative;z-index:2;background:#FFF;padding:9rem 0 10rem;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}
.cs__inner{width:min(92vw,116rem);margin-inline:auto}
.cs__head{text-align:center;margin-bottom:5.6rem}
.cs__en{display:block;font-family:"Jost",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.22em;color:#B08A3E}
.cs__ttl{margin:1.6rem 0 0;font-size:clamp(21px,3vw,32px);font-weight:700;line-height:1.5}
.cs__lead{margin:1.6rem 0 0;font-size:clamp(13px,1.6vw,16px);line-height:1.95;color:#555}

.cs__main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem;
  margin-bottom:2.4rem}
.cs__sub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem}

.cs-card{position:relative;display:flex;overflow:hidden;border-radius:24px;
  background:#FFF;border:1.5px solid #EDE7D8;text-decoration:none;color:inherit;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.cs-card__ph{display:block;overflow:hidden;background:#EEE}
.cs-card__ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease}
.cs-card__body{display:flex;flex-direction:column;flex:1 1 0;position:relative}
.cs-card__no{font-family:"Jost",sans-serif;font-weight:600;line-height:1;color:var(--yellow1);
  -webkit-text-stroke:1px #E0B400}
.cs-card__ttl{font-weight:700;line-height:1.45}
.cs-card__for{color:#6A6153;line-height:1.6}
.cs-card__txt{color:#555;line-height:1.95;flex:1 1 auto}
.cs-card__foot{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  margin-top:auto;padding-top:1.8rem;border-top:1px dashed #E4DCC6}
.cs-card__price{font-weight:700;color:#3A2400}
.cs-card__badge{position:absolute;font-size:11px;font-weight:700;line-height:1;
  padding:.6rem 1.2rem;border-radius:5rem;background:var(--yellow1);color:#3A2400}
.cs-arw{position:relative;display:block;width:36px;height:36px;border-radius:50%;
  border:1.5px solid #3A2400;color:#3A2400;flex:none;transition:background .3s,color .3s}
.cs-arw::before{content:"";position:absolute;left:11px;top:50%;width:12px;height:1.5px;
  background:currentColor;translate:0 -50%}
.cs-arw::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  rotate:45deg;translate:0 -50%}
@media (hover:hover){
  .cs-card:hover{border-color:var(--yellow1);box-shadow:0 1rem 2.4rem rgba(120,80,20,.12);
    transform:translateY(-.4rem)}
  .cs-card:hover .cs-card__ph img{transform:scale(1.05)}
  .cs-card:hover .cs-arw{background:#3A2400;color:#FFF}
}

/* 大（01・02）＝写真を上に敷いて、その下に本文 */
.cs-card--lg{flex-direction:column}
.cs-card--lg .cs-card__ph{width:100%;aspect-ratio:16/9}
.cs-card--lg .cs-card__body{padding:3rem 3.2rem 2.8rem}
.cs-card--lg .cs-card__no{font-size:34px;margin-bottom:1.2rem}
.cs-card--lg .cs-card__ttl{font-size:clamp(19px,2.2vw,24px);margin-bottom:1rem}
.cs-card--lg .cs-card__for{font-size:13px;margin-bottom:1.6rem}
.cs-card--lg .cs-card__txt{font-size:14px}

/* 小（03〜05）＝写真を上に細く、下に要点だけ */
.cs-card--sm{flex-direction:column}
.cs-card--sm .cs-card__ph{width:100%;aspect-ratio:16/8}
.cs-card--sm .cs-card__body{padding:2.4rem 2.4rem 2.2rem}
.cs-card--sm .cs-card__no{font-size:26px;margin-bottom:1rem}
.cs-card--sm .cs-card__ttl{font-size:17px;margin-bottom:.8rem}
.cs-card--sm .cs-card__for{font-size:12px;margin-bottom:2rem}
.cs-card--sm .cs-card__price{font-size:14px}
.cs-card--sm .cs-arw{width:32px;height:32px}
.cs-card--sm .cs-arw::before{left:10px;width:10px}
.cs-card--sm .cs-arw::after{right:10px}
.cs-card--sm .cs-card__badge{right:1.6rem;top:-1.1rem}

.cs__note{margin:4.4rem 0 0;text-align:center;font-size:13px;line-height:1.95;color:#6A6153}

@media only screen and (max-width:900px){
  .cs__sub{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media only screen and (max-width:768px){
  .cs{padding:6rem 0 7rem}
  .cs__head{margin-bottom:3.4rem}
  .cs__main,.cs__sub{grid-template-columns:1fr;gap:1.6rem}
  .cs-card{border-radius:16px}
  .cs-card--lg .cs-card__ph{aspect-ratio:16/8}
  .cs-card--lg .cs-card__body{padding:2.2rem 2rem 2rem}
  .cs-card--lg .cs-card__no{font-size:26px;margin-bottom:.8rem}
  .cs-card--lg .cs-card__ttl{font-size:18px}
  .cs-card--lg .cs-card__txt{font-size:13px}
  /* 小カードはスマホでは写真を左に寄せた横並びにして、縦の長さを抑える */
  .cs-card--sm{flex-direction:row;align-items:stretch}
  .cs-card--sm .cs-card__ph{width:34%;flex:none;aspect-ratio:auto}
  .cs-card--sm .cs-card__body{padding:1.8rem 1.8rem 1.6rem}
  .cs-card--sm .cs-card__no{font-size:20px;margin-bottom:.6rem}
  .cs-card--sm .cs-card__ttl{font-size:15px}
  .cs-card--sm .cs-card__for{font-size:11px;margin-bottom:1.2rem}
  .cs-card--sm .cs-card__foot{padding-top:1.2rem}
  .cs-card--sm .cs-card__price{font-size:12px}
  /* 横並びにすると右下は矢印の位置なので、バッジは本文の右上へ逃がす */
  .cs-card--sm .cs-card__badge{right:1.2rem;top:1.2rem;bottom:auto;font-size:10px}
  .cs__note{margin-top:3rem;font-size:12px}
}

/* FVのボタン ── 主導線（開業ガイド）に、開業事例への遷移を並べる */
.mv-btns{display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap}
.mv-btns .btn{display:inline-flex;align-items:center;justify-content:center;gap:1rem}
.mv-btn2{display:inline-flex;align-items:center;gap:1rem;
  padding:1.4rem 3rem;box-sizing:border-box;border-radius:200px;
  background:rgba(255,255,255,.92);border:2px solid var(--base);color:var(--base);
  font-size:1.6rem;font-weight:700;text-decoration:none;
  transition:background .3s,color .3s}
.mv-btn2__arw{position:relative;display:block;width:18px;height:12px;flex:none}
.mv-btn2__arw::before{content:"";position:absolute;left:0;top:50%;width:17px;height:1.6px;
  background:currentColor;translate:0 -50%}
.mv-btn2__arw::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;
  rotate:45deg;translate:0 -50%}
@media (hover:hover){ .mv-btn2:hover{background:var(--base);color:#FFF} }
@media only screen and (max-width:768px){
  .mv-btns{gap:1.4rem}
  .mv-btn2{padding:1.2rem 2.2rem;font-size:1.4rem}
}

/* FVのキャッチを h1 にしたので、見出しの既定マージンだけ打ち消す */
h1.catchcopy{margin-top:0}

/* 画面には出さず、読み上げと見出し階層のためだけに置く見出し */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* 料金カードの「横にスワイプ」案内（スマホのみ） */
.pr__swipe{display:none}
@media only screen and (max-width:768px){
  .pr__swipe{display:flex;align-items:center;gap:.8rem;
    margin:2.6rem 0 0;font-size:11px;font-weight:700;color:#9A9A9A;letter-spacing:.04em}
  .pr__swipe::after{content:"";flex:1;height:1px;background:#E4DCC6}
  .pr__swipe::before{content:"";flex:none;width:16px;height:10px;
    background:no-repeat 50%/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M2 10h28M8 4 2 10l6 6M24 4l6 6-6 6' fill='none' stroke='%239A9A9A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
}

/* ══════════════════════════════════════════════════════════════
   ── ここから：サイト全体の「動き」の共通部品 ──
   ① 背景がゆっくり流れる面   ② スクロールで現れる  ③ 浮遊イラスト
   samabake-asuka.com が背景いっぱいに帯を流している作りを参考に、
   リエゾンでは「小麦パターン」と「パンの写真」を流す。
   ══════════════════════════════════════════════════════════════ */

/* ① 黄色い面：小麦パターンがゆっくり右へ流れる */
@keyframes bgFlowX{ from{background-position:0 0} to{background-position:640px 0} }
@keyframes bgFlowXslow{ from{background-position:0 0} to{background-position:-640px 0} }
.bg-wheat{background-color:var(--yellow1);
  background-image:url(../img/pattern-bread.webp);background-size:640px auto;
  animation:bgFlowX 90s linear infinite}
.bg-wheat--rev{animation-name:bgFlowXslow;animation-duration:120s}

/* ② スクロールで現れる（IntersectionObserver が .is-inview を付ける） */
.rv{opacity:0;transform:translateY(2.4rem);
  transition:opacity .7s ease,transform .9s cubic-bezier(.33,1,.68,1)}
.rv.is-inview{opacity:1;transform:none}
.rv--d1{transition-delay:.10s} .rv--d2{transition-delay:.20s}
.rv--d3{transition-delay:.30s} .rv--d4{transition-delay:.40s}
.rv--d5{transition-delay:.50s} .rv--d6{transition-delay:.60s}
/* 子を順番に */
.rv-stagger>*{opacity:0;transform:translateY(2.4rem);
  transition:opacity .7s ease,transform .9s cubic-bezier(.33,1,.68,1)}
.rv-stagger.is-inview>*{opacity:1;transform:none}
.rv-stagger.is-inview>*:nth-child(1){transition-delay:.05s}
.rv-stagger.is-inview>*:nth-child(2){transition-delay:.15s}
.rv-stagger.is-inview>*:nth-child(3){transition-delay:.25s}
.rv-stagger.is-inview>*:nth-child(4){transition-delay:.35s}
.rv-stagger.is-inview>*:nth-child(5){transition-delay:.45s}
.rv-stagger.is-inview>*:nth-child(6){transition-delay:.55s}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-stagger>*{opacity:1;transform:none;transition:none}
  .bg-wheat{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   パンが流れる帯 ─ 直営店の商品写真を上下2段で逆方向に流す
   ══════════════════════════════════════════════════════════════ */
.pb{position:relative;z-index:2;overflow:hidden;padding:9.4rem 0 9.8rem;
  background-color:var(--yellow1);
  background-image:url(../img/kobo/wheat-tile.png);background-size:520px auto;
  animation:bgFlowX 110s linear infinite;
  font-family:"Hiragino Sans","ヒラギノ角ゴシック","Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,sans-serif;
  letter-spacing:.05em;line-height:1.7;color:#222}
/* 上下の境目は「ちぎった紙」。白い面との切り替わりを .rz と揃える */
.pb::before,.pb::after{content:"";position:absolute;left:0;right:0;z-index:3;
  height:clamp(20px,2.6vw,42px);pointer-events:none}
.pb::before{top:-1px;background:url(../img/ui/torn-top.svg) 50% 0/100% 100% no-repeat}
.pb::after{bottom:-1px;background:url(../img/ui/torn-bottom.svg) 50% 100%/100% 100% no-repeat}

.pb__head{position:relative;z-index:4;text-align:center;margin-bottom:4rem}
.pb__en{display:block;font-family:"Jost",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.22em;color:#B8860B}
.pb__ttl{margin:1.4rem 0 0;font-size:clamp(18px,2.6vw,28px);font-weight:700;line-height:1.5}

.pb__row{display:flex;width:100%;overflow:hidden}
.pb__row+.pb__row{margin-top:1.2rem}
.pb__track{display:flex;flex:none;align-items:center;gap:2.4rem;padding-right:2.4rem;
  animation:loopSlide 60s linear infinite}
.pb__row--r .pb__track{animation-direction:reverse;animation-duration:72s}
.pb__track figure{margin:0;width:clamp(150px,14vw,212px);flex:none;
  filter:drop-shadow(0 1.2rem 1.8rem rgba(90,55,0,.26));
  transition:transform .4s ease}
.pb__track img{width:100%;height:auto;display:block}
.pb:hover .pb__track{animation-play-state:paused}
@media (hover:hover){ .pb__track figure:hover{transform:translateY(-.8rem) scale(1.06)} }

.pb__note{position:relative;z-index:4;margin:4rem 0 0;text-align:center;
  font-size:13px;line-height:1.95;color:#6B4E12}

@media only screen and (max-width:768px){
  .pb{padding:5.4rem 0 5.6rem}
  .pb__head{margin-bottom:2.6rem}
  .pb__track{gap:1.4rem;padding-right:1.4rem;animation-duration:42s}
  .pb__row--r .pb__track{animation-duration:52s}
  .pb__track figure{width:112px}
  .pb__note{margin-top:2.6rem;font-size:12px}
}
@media (prefers-reduced-motion:reduce){ .pb__track{animation:none} }

/* ══════════════════════════════════════════════════════════════
   浮遊イラスト（共通）─ 自社店舗サイトの水彩パンを各ブロックに散らす。
   位置・大きさ・速さ・傾きは、HTML側のカスタムプロパティで1つずつ指定する。
     --x --y   置く位置（％）
     --w       幅
     --dur     ゆれの周期   --dly ずらし   --rot 傾き
   ══════════════════════════════════════════════════════════════ */
.floats{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.floats--over{overflow:visible}
.float{position:absolute;left:var(--x,50%);top:var(--y,50%);
  width:var(--w,90px);aspect-ratio:1/1;
  background:50% 50%/contain no-repeat;
  filter:drop-shadow(0 .8rem 1.2rem rgba(120,80,20,.20));
  animation:floatY var(--dur,7s) ease-in-out infinite;animation-delay:var(--dly,0s)}
@media only screen and (max-width:768px){
  .float{width:calc(var(--w,90px) * .62)}
  .float--hide-sp{display:none}
}
@media (prefers-reduced-motion:reduce){ .float{animation:none} }

/* ══════════════════════════════════════════════════════════════
   「リエゾンプロジェクトとは」の入口に動きを足す
   ・パン型のアーチ（白い山）がごくゆっくり左右に呼吸する
   ・弧を描く Liaison Project が、スクロールで下から立ち上がる
   ══════════════════════════════════════════════════════════════ */
@keyframes archBreathe{
  0%  {background-position:0 9vw;background-size:100% 6.714vw}
  50% {background-position:-1.2vw 9vw;background-size:101.6% 6.9vw}
  100%{background-position:0 9vw;background-size:100% 6.714vw}
}
.p-about{animation:archBreathe 16s ease-in-out infinite}

.p-about__arc{opacity:0;transform:translateY(2.6rem) scale(.985);transform-origin:50% 100%;
  transition:opacity 1s ease,transform 1.3s cubic-bezier(.33,1,.68,1)}
.p-about__arc.is-inview{opacity:1;transform:none}

/* 弧の文字を、はみ出さずにゆっくり左右へ漂わせる */
@keyframes arcDrift{
  0%{transform:translateX(-.5%)} 50%{transform:translateX(.5%)} 100%{transform:translateX(-.5%)}
}
.p-about__arc.is-inview text{animation:arcDrift 14s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .p-about{animation:none}
  .p-about__arc{opacity:1;transform:none}
  .p-about__arc.is-inview text{animation:none}
}

/* 20260908 image restoration: keep the introductory copy readable over every photo. */
@media screen and (min-width:1051px){
 .main-visual__text .intro{display:table;background:rgba(255,255,255,.94);
   padding:1.2rem 1.8rem;margin-left:-1.8rem;border-radius:1.6rem;}
}