@charset "utf-8";
/* ===== Base tokens ===== */
:root{
  --frame-w: 1920px;      /* 画面幅 */
  --hero-h: 1225px;       /* ヒーロー高さ */
  --thumb-w: 347px;       /* 左下カード W/H */
  --thumb-h: 264px;
  --thumb-gap: 24px;      /* カード間隔（28ならここを28に） */
  --right-col: 600px;     /* 右の大カードの幅（FIGMAに合わせて） */
  --col-gap: 140px;       /* 左右カラム間の余白 */
  /* 左列幅＝カード3枚＋ギャップ2本 */
  --left-col: calc(var(--thumb-w) * 3 + var(--thumb-gap) * 2);  /* 1089px */
  /* インナー（実レイアウト）幅＝左＋右＋ギャップ ＝ 1829px */
  --inner-w: calc(var(--left-col) + var(--right-col) + var(--col-gap));  /* 1829px */
  --hero-visW: 28vw;   /* 例: 31.25vw(=600px) → 28vw(≈538px) */

  --c-text:#222; --c-muted:#666; --c-gray:#e9e9e9; --c-black:#111;
  --ryuna-text: #222;
  --ryuna-muted:#666;
  --ryuna-bg: #fff;
  --ryuna-topbar:#bdb9b9; /* 上部の細いグレー帯 */
  --ryuna-gray:#e6e6e6;   /* プレースホルダ色 */
  --ryuna-black:#111;
  --ryuna-radius: 16px;
  --ribbon-w: 204px;        /* 幅：Figmaと同じ */
  --ribbon-h: 201px;        /* 高さ：Figmaと同じ */
  --ribbon-pad-y: 18px;     /* 上下余白：文字が上寄せに見える程度 */
  --ribbon-pad-x: 22px;     /* 左右余白 */
  --notch-d: 32px;          /* くぼみの深さ（Figma見た目に合わせて深め） */
  --notch-w: 24px;          /* くぼみ左右（片側）*/
  --c-ribbon: #2b2b2b;      /* 本体色 */
  --c-ribbon-shadow:#483c3c;/* 影ライン色 */
}

img {
  max-width: 100%;
  height: auto;
}

body{
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
}

/* =========================================================
   PC共通サイドガター（Hero以外）— 強めの特異性で“必ず効かせる”
   ========================================================= */
@media screen and (min-width:769px){
  .lp-ryuna{
    --section-gutter: clamp(24px, 3.75vw, 72px);
    --section-max:    1200px;
  }

  /* 直下の __inner と、__inner が無いパネル系（sec15__panel）も対象にする */
  .lp-ryuna section:not(.hero-ryuna):not(.sec15):not(.aboutx) > [class$="__inner"]{
    width: min(100%, calc(var(--section-max) + var(--section-gutter) * 2));
    margin-inline: auto;
    padding-inline: var(--section-gutter);
    box-sizing: border-box;
  }

  /* 念のため、aboutx も明示（後段でpaddingを消していない限り二重適用にはならない） */
  .lp-ryuna .aboutx__inner{
    padding-inline: var(--section-gutter);
  }
}


/* =========================================================
   PC版（769px〜）：1920px基準のフルスケール（vw）レイアウト
   画面幅に応じて要素サイズ/余白/列幅を等比スケール
   ========================================================= */

/* セクション全体 */
@media screen and (min-width:769px){
.hero-ryuna{
    /* 余白の元凶になりやすい固定 “高さ” を外し、内容高さに合わせる */
    min-height: 0;                 /* ← 既存の 63.8021vw を解除 */
    /* Figmaの指定に合わせて、セクション下マージン相当をここで管理 */
    padding-bottom: 10.75rem;      /* = 172px（必要なら数値だけ調整） */

  position: relative;
  background:#fff; color:var(--c-text);
    /* 上だけ 4.583vw → 3.2vw にして余白を詰める */
    padding: 3.2vw 0 5.0vw;
  color: var(--ryuna-text);
  /* padding:88px 0 96px;   上下の余白をPDF比に調整 */
  overflow: hidden;
}


/* =======================
   独自ヘッダー（ピル型）
   ======================= */
.lp-ryuna {
  --hdr-max: 980px;           /* ピル幅上限（好みで） */
  --hdr-pad: 10px;            /* ピル内パディング */
  --hdr-gap: 28px;            /* メニュー項目間 */
  --hdr-blur: 14px;           /* ガラスぼかし強さ */
  --hdr-border: rgba(255,255,255,.75);
  --hdr-bg: rgba(255,255,255,.65);
}

.ryuna-header{
  position: static;/* ── ヘッダーのスクロール追従を無効化 ───────────────── */
  top: auto;          /* ← 念のため無効化 */
  z-index: auto;      /* ← 特に不要なら戻す */

  display: grid; place-items: center;
  margin-inline: calc(50% - 50vw);        /* ← full-bleed */
  padding-inline: 0;                      /* 端の余白をゼロに */

}

.ryuna-header__bar{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: min(var(--hdr-max), 96%);
  padding: var(--hdr-pad) clamp(16px, 2.5vw, 24px);
  background: var(--hdr-bg);
  border: 1px solid var(--hdr-border);
  -webkit-backdrop-filter: saturate(150%) blur(var(--hdr-blur));
  backdrop-filter: saturate(150%) blur(var(--hdr-blur));
}

/* 背景のぼかしが未対応な環境のフェールセーフ */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .ryuna-header__bar{ background: rgba(255,255,255,0.95); }
}

/* PCメニュー */
.ryuna-nav__list{
  display: flex; align-items: center; gap: 32px;
  list-style: none; margin: 0; padding: 0;
  font-weight: 500; letter-spacing: .02em;
}
.ryuna-nav__list a{
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
  display: inline-block; text-decoration: none; color: #9191cb;
  padding: 30px 34px; border-radius: 8px; line-height: 1;
  font-size: 22px;   /* 例：14 → 16 or 18px など好みで */
}
.ryuna-nav__list a:hover{ background: rgba(0,0,0,.06); }

/* ==== Header Nav：1024px帯は1440と同じ比率で縮小 ==== */
/* 1440px時の実寸（px）を定義 */
:root{
  --nav-font-1440: 20;   /* メニュー文字サイズ 20px @1440 */
  --nav-padY-1440: 30;   /* 縦パディング 30px @1440 */
  --nav-padX-1440: 34;   /* 横パディング 34px @1440 */
  --nav-gap-1440: 32;    /* メニュー間隔 32px @1440 */
}

@media (min-width:769px) and (max-width:1200px){
  /* gap ＝ 32px @1440 → 1024では約22.8px */
  .ryuna-nav__list{
    gap: clamp(16px,
      calc((var(--nav-gap-1440) / 14.4) * 1vw),
      calc(var(--nav-gap-1440) * 1px));
  }

  /* font-size 20px @1440 → 1024では約14.2px
     padding も同率でスケール */
  .ryuna-nav__list a{
    font-size: clamp(12px,
      calc((var(--nav-font-1440) / 14.4) * 1vw),
      calc(var(--nav-font-1440) * 1px));
    padding:
      clamp(10px, calc((var(--nav-padY-1440) / 14.4) * 1vw), calc(var(--nav-padY-1440) * 1px))
      clamp(12px, calc((var(--nav-padX-1440) / 14.4) * 1vw), calc(var(--nav-padX-1440) * 1px));
    line-height: 1; /* クリック領域を安定 */
  }
}

/* 1600px 以上（2560 含む）のとき：ヘッダー文字を少し大きくして 1440 に近い見た目に */
@media (min-width:1600px){
  /* メニュー同士の間隔を少し広げる */
  .ryuna-nav__list{
    gap: 40px;  /* 32 → 40px。広すぎたら 36px とかに調整 */
  }

  /* 文字サイズ＆余白を大きめにして、2560でも痩せて見えないように */
  .ryuna-nav__list a{
    font-size: 32px;     /* 22px → 24px（もっと大きくしたければ 26px くらい） */
    padding: 32px 40px;  /* 上下32px / 左右40px に少しだけ増量 */
    line-height: 1;
  }
}





/* 背景の花画像、見せたい量はここで調整 */
:root{
  --fv-gap: 80px;         /* ヘッダー“上”に花を見せる高さ */
  --fv-height: 860px;     /* ヒーローで花を見せる高さ */
  --fv-img: url("./assets/flower1.png"); /* ←スペースは%20。できれば英数字名にリネーム */
}

html,body{ margin:0; }
body{
  position: relative;
  padding-top: var(--fv-gap);   /* ← 余白は padding で作る！（重要） */
}

/* 花をページ土台に敷く＝ヘッダー上にも届く */
body::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height: calc(var(--fv-gap) + var(--fv-height));
  background: var(--fv-img) center top / cover no-repeat;
  z-index:0; pointer-events:none;
}

/* ヘッダーは前面。余白はもう不要なので margin-top は付けない */
.ryuna-header{
  margin-inline: calc(50% - 50vw);   /* full-bleed */
  position: relative; z-index: 1;
  background: transparent;           /* 背面の花を見せる */
}
/* 白帯を横いっぱい・長方形に（丸 pill を解除） */
.ryuna-header__bar{
  width: 100vw !important;
  max-width: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  border: 0;
  padding: clamp(5px, 1.8vw, 8px) 0;      /* 上下だけ余白 */

  display: flex;
  justify-content: center;                  /* 中身（ナビ）を中央寄せ */
  align-items: center;
}

/* ヒーローの白塗りが花を隠さないよう透明に */
.hero-ryuna{
  background: transparent !important;
  position: relative; z-index:1;
}
/* 二重敷き防止（hero 側の ::before を使っていたら消す） */
.lp-ryuna .hero-ryuna::before{ content:none !important; }




/* ---------------------- */
/*ヒーロー部 芯幅を直接指定（小さく見える対策） */
/* ---------------------- */
.hero-ryuna__inner{
    width: min(95.2604vw, 100%); /* 1829 / 1920 * 100 */
  margin: 0 auto;
  display: grid;
    /* 左列=1089px, 右列=600px, カラム間=140px をすべてvw化 */
  grid-template-columns: minmax(0, 1fr) clamp(420px, 28vw, 560px);
  padding-right: 0;                                    /* ← 右の空き6.25vwを解除 */
    /* 元: 7.2917vw （=140px） → 3.75pxぶん詰め：7.2917 - 0.1953 = 7.0964vw */
    column-gap: calc(7.2917vw - 3.7500vw);
    justify-items: start;      /* 各アイテムの水平方向は左基準 */
  /* grid-template-areas:
    "content visual"
    "thumbs  visual";                右画像を上下ぶち抜き */
     align-items: start;          /* 下揃え→上揃え */
       position: relative;  /* ← これを付与 */
}

/* 左カラムのテキストブロック */
.hero-ryuna__content{ 
  /* padding-top: 1.25vw;     24px → 1.25vw（微調整） */
grid-column: 1; 
}

/* ===== Hero：タイトルだけ少し左に飛び出させる・最終調整 ===== */
@media (min-width: 1200px){
  /* キッカー＆リード：ちょい右寄り（ベースの位置） */
  .lp-ryuna .hero-ryuna__kicker,
  .lp-ryuna .hero-ryuna__lead{
    padding-left: clamp(40px, 7vw, 150px) ;
  }

  /* タイトル：それより少し左からスタートさせる */
  .lp-ryuna .hero-ryuna__title{
    text-align: left;  /* 念のため左寄せも固定 */
    padding-left: clamp(60px, 3.5vw, 240px) ;
  }
}


/* キャッチ（上のテキスト） */
.hero-ryuna__kicker{
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
      /* transform: translateY(2.0625vw); 78px※実装すると型崩れするので予備でおいてる */
  padding-left: clamp(20px, 6.25vw, 120px);
  text-align: left; 
    font-size: clamp(22px, 2.2vw, 51px); /* 1.9792vw = 38px at 1920px */
    line-height: 1.6;
    margin-bottom: clamp(4px, 0.3125vw, 6px);   /* 今は6px相当 */
  font-style: normal;
  letter-spacing: -1px;
  font-weight: 400;
  position: relative;   /* 疑似要素の基準にする */
  color: #ae717f;
  /* line-height: 180%; 68.4px */
}

  .hero-ryuna__kicker::after{
    content:"";
    position: absolute;
    /* テキストの左端に合わせる：親の左から“同じだけ”ずらす */
    left: 0;
    margin-left: clamp(20px, 6.25vw, 120px);               /* ← kickerと同じ値にして揃える */
    /* 文字のすぐ下に配置（オフセットは好みで微調整） */
    top: calc(100% + clamp(6px, .5vw, 12px));
    /* ラインの長さは好みで調整（見本に近づけるなら 24〜34vw くらい） */
    width: clamp(670px, 36vw, 920px);
    height: 2px;
    /* 上半分=白、下半分=ピンクで“ピンク白の線”に見せる */
    background: linear-gradient(
      to bottom,
      #ffffff 0 50%,
      #ae717f 50% 100%
    );
    border-radius: 2px;                   /* 端をほんの少し丸める */
    pointer-events: none;
  }

  

/* タイトル */
.hero-ryuna__title{ 
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
    /* 最小=78px、通常=5.5vw（1920px時 ≈106px）、最大=108px */
    font-size: clamp(78px, 5.5vw, 108px);
    letter-spacing: .03em;     /* 文字間ほんの少し広げる */
    font-feature-settings: "palt" 1;  /* 句読点等の詰めを整える */
    margin-bottom: clamp(12px, 1.1vw, 22px);
   padding-bottom: 10px;
   /* ★実装だと崩れるので、ここを追加：キャッチの下線との間の余白 */
  margin-top: clamp(24px, 2.8vw, 44px);  /* 好みで微調整 */
}

/* タイトルSVG */
.hero-ryuna__titleSvg{
  display: block;          /* 余計な下のスキマを消す */
  width: min(100%, 740px); /* 最大幅はお好みで調整（例：640px相当） */
  height: auto;
}

/* リード文 */
.hero-ryuna__lead{
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
  padding-left: clamp(20px, 6.25vw, 120px); /* 269 / 1920 * 100 */
  text-align: left;
    font-size: clamp(16px, 1.35vw, 24px);       /* 1.25vw = 24px at 1920px */
    line-height: 1.6;
    letter-spacing: -1px;
    margin-bottom: clamp(10px, 0.9375vw, 18px); /* 今は18px相当 */
  font-style: normal;
   padding-bottom: 30px;
   font-weight: 500;                 /* ← 少し太く */
}

/* === Hero：CTA行（バッジ＋ボタン） ======================= */
/* CTA行を左カラムに固定して横並び＆中央揃え */
.hero-ryuna__ctaRow{
  grid-column: 1;                     /* ← 左カラムに固定 */
  display: flex;
  flex-wrap: nowrap;                  /* ← 改行させない */
  align-items: center;                /* ← 垂直中央 */
  justify-content: flex-start;        /* ← 左寄せ */
  gap: clamp(12px, 1.25vw, 24px);     /* ボタンとの間隔 */

  /* 左の見出しと左端を揃えたい場合だけ有効に */
  margin-left: clamp(20px, 6.25vw, 120px);            /* 269/1920*100 */
  margin-top: clamp(8px, 1vw, 20px);
  margin-bottom: clamp(60px, 6.51vw, 125px);
}

/* ボタン：右へ飛ばないように固定。縮小はOK・改行はしない */
.cta__label{ 
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
  font-size: clamp(18px, 1.683vw, 26px); line-height:1; letter-spacing:.03em; 
}

.hero-ryuna__cta{
  margin: 0;                          /* ← auto で右寄せになるのを防止 */
  flex: 0 1 auto;                     /* ← できるだけ幅を守りつつ縮む */
  inline-size: clamp(240px, 23vw, 480px);   /* 280/28.8vw/553 → 240/23vw/480 */
  block-size: clamp(48px, 5.3646vw, 103px);
  padding-inline: clamp(16px, 1.4vw, 22px); /* 20/1.8vw/28 → 16/1.4vw/22 */
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1vw, 14px);          /* 文字と丸アイコンの間隔 */
  background: #f184ac; color: #fff; text-decoration: none;
  font-size: clamp(16px, 1.25vw, 24px); font-weight: 400;
    position: relative;     /* 擬似要素の基準 */
  overflow: hidden;       /* はみ出し防止 */
    --icon: clamp(28px, 2.1vw, 36px);           /* ← 白丸の大きさ（変えるならここ） */
    padding-right: calc(var(--icon) + clamp(12px, 1vw, 18px));
    justify-content: center;                    /* ← テキストは中央のまま */

   margin-right: clamp(48px, 4.5vw, 80px);    /* 右のバッジとの距離感 */
}



/* 白い丸 */
.hero-ryuna__cta .cta__icon{
  position: absolute;                         /* ← ここを relative → absolute に */
  right: clamp(30px, .9vw, 36px);           /* 40/1.1vw/46 → 30/.9vw/36 */
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon);
  height: var(--icon);
  border-radius: 50%;
  background: #fff;
  pointer-events: none;                       /* クリックはボタン全体 */
}

/* ▶ をCSSで描画（白丸の中心より少し右寄せ） */
.hero-ryuna__cta .cta__icon::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-35%, -50%); /* ちょい右寄せで“再生ボタン”っぽく */
  width: 0; height: 0;
  border-left: clamp(9px, .7vw, 12px) solid #f184ac;      /* 三角の色＝ボタン文字色に合わせる */
  border-top:  clamp(6px, .5vw, 8px) solid transparent;
  border-bottom: clamp(6px, .5vw, 8px) solid transparent;
}

/* 内側の白い枠（画像のような内側ライン） */
.hero-ryuna__cta::before{
  content: "";
  position: absolute;
  inset: clamp(2px, .55vw, 4px);             /* 外周からのオフセット量＝枠の位置 */
  border-radius: inherit;                      /* 丸みをボタンと同じに */
  border: clamp(1px, .1vw, 2px) solid rgba(255,255,255,.95);  /* 白枠の太さ/色 */
  pointer-events: none;                        /* クリックを邪魔しない */
}

.hero-ryuna__cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.hero-ryuna__cta:active{ transform: translateY(0); opacity: .9; }


/* =========================
   0円バッチ : 画像っぽい見た目
   ========================= */
:root{
  /* 直径：PCで約140～150px、画面に応じて自動可変 */
  --fee-d: clamp(135px, 7.4vw, 167px);
}

.hero-ryuna__feeBadge{
  position: relative;
  flex: 0 0 auto;
  inline-size: var(--fee-d);
  block-size: var(--fee-d);
  margin: 0;
  padding: 0;
  border-radius: 50%;

  /* ゴールド系の質感（内側に明るさ＋下側に少し濃い影） */
  background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
    gap: clamp(1px, .5vw, 2px);  /* ← 小さくすると 0 に近づく */
}

/* 上のラベル（入会費／年会費） */
.hero-ryuna__feeBadge small{
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
  margin:20px 0 0 clamp(-6px, -.45vw, -10px);
  line-height: 1;        /* 行間も詰める */
  font-weight: 700;
  font-size: clamp(21px, .45vw, 22px);
  letter-spacing: .05em;
  color: #42210b;    /* 少しブラウンで上品に */
  transform: none;  /* 既存の translateY は無効化 */
}

/* 0円の数字まわり */
.hero-ryuna__feeBadge .price{
  display: inline-flex;
  align-items: baseline;
  /* gap: .1em; */
}

.hero-ryuna__feeBadge .price{
  /* さらに少しだけ上へ寄せる（不要なら削除OK） */
  margin-top: clamp(-2px, -.15vw, -4px);
}

.hero-ryuna__feeBadge .price .num{
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
  font-weight: 800;
  font-size: clamp(60px, 3.4vw, 82px); /* ← 36/2.6vw/54 を上げる */
  line-height: .95;
  color: #42210b;
  /* text-shadow: 0 1px 0 rgba(255,255,255,.4); */
}

.hero-ryuna__feeBadge .price .yen{
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
  font-weight: 700;
  font-size: clamp(30px, .9vw, 41px);
  color: #42210b;
  /* margin-left: .05em; */
}

/*（任意）ボタンとの離れ具合は CTA 行の gap で調整 */
.hero-ryuna__ctaRow { gap: clamp(12px, 1.2vw, 22px); }


/* 右の大きいビジュアル */
.hero-ryuna__visual{
  position: absolute;
  top: var(--vis-top, 0);       /* ← 微調整したければ 0.5rem や 1vw に */
  right: 8vw;

  width: clamp(420px, 28vw, 560px);
  aspect-ratio: 639/898;
  height: auto;

  /* 以降は見た目そのまま */
  border-radius: 0.5208vw;
  overflow: hidden;
}
.hero-ryuna__visual img{ width:100%; height:100%; object-fit:cover; }
}






/* ==== Ultra-wide(≥1600px)：中央寄せ＆見た目を整える（上書き） ==== */
:root{
  --hero-max: 1520px;    /* ヒーロー全体の最大幅（お好みで 1440〜1600） */
  --hero-gap-wide: 96px; /* 左右カラムの間隔 */
  --hero-vis-px: 560px;  /* 右ビジュアルの見た目サイズ（据え置き） */
  --hero-left-wide: 120px; /* 左テキストのインデントをpx固定（1400px時の感覚） */
}

@media (min-width:1600px){
    /* 花を見せる “高さ” を大きくする（860px → 1100px） */
  :root{
    --fv-height: 1350px;   /* 1000〜1200pxで好みの位置に調整 */
  }

  /* 見え方を少し落ち着かせる（位置だけ明示・スケールは cover のまま） */
  body::before{
    background-position: center top;
    /* 必要ならここで高さを直接いじることもできます
       height: calc(var(--fv-gap) + 1100px);
    */
  }

  .hero-ryuna__inner{
    width: min(100%, clamp(1500px, 88vw, 1720px)); /* ← 余白が広すぎるなら 90vw/1760px に */
    max-width: clamp(1500px, 88vw, 1720px);
    margin-inline: auto;                    /* 画面中央に配置 */
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--hero-vis-px);
    column-gap: var(--hero-gap-wide);
    padding-right: 0;

    /* 左カラムの実効幅を算出（下線長の基準に使う） */
    --hero-leftcol: calc(var(--hero-max) - var(--hero-vis-px) - var(--hero-gap-wide));
  }

  /* 右ビジュアルはサイズ据え置き（横に広がらせない） */
  .hero-ryuna__visual{
    right: 0;                   /* ← 8vw を 0 に。内側コンテナの右端に揃う */
    width: var(--hero-vis-px);
  }

    /* タイトルボックスの上下余白を固定 */
  .lp-ryuna .hero-ryuna__title{
    margin-top: 40px;   /* 1440px 時の 2.8vw ≒ 40px に合わせる */
    margin-bottom: 16px;/* 1440px 時の 1.1vw ≒ 16px に合わせる */
  }

  /* SVG のサイズも 1440px と同じ 740px で固定 */
  .lp-ryuna .hero-ryuna__titleSvg{
    width: 1440px;
  }

    .lp-ryuna .hero-ryuna__title{
    padding-left: 110px;   /* ← ここが“飛び出し”量。もっと出したければ 50px などに */
  }

  /* 左テキスト群の“基準線”をpxで固定（vwだと超ワイドで離れすぎるため） */
  .hero-ryuna__kicker,
  .hero-ryuna__lead{ padding-left: var(--hero-left-wide)  }
  .hero-ryuna__ctaRow{ margin-left: var(--hero-left-wide)  }

  .hero-ryuna__kicker::after{
    content:"";
    position: absolute;
    /* テキストの左端に合わせる：親の左から“同じだけ”ずらす */
    left: 0;
    margin-left: clamp(100px, 8vw, 170px);  /* 6.25vw → 8vw に統一 */
    /* 文字のすぐ下に配置（オフセットは好みで微調整） */
    top: calc(100% + clamp(30px, .5vw, 40px));
    /* ラインの長さは好みで調整（見本に近づけるなら 24〜34vw くらい） */
    width: clamp(550px, 40vw, 900px);
    height: 2px;
    /* 上半分=白、下半分=ピンクで“ピンク白の線”に見せる */
    background: linear-gradient(
      to bottom,
      #ffffff 0 50%,
      #ae717f 50% 100%
    );
    border-radius: 2px;                   /* 端をほんの少し丸める */
    pointer-events: none;
  }
}

/* ===== Hero：超ワイド(≥1600)で左テキスト／CTA／バッジも比例拡大 ===== */
@media (min-width:1600px){
  /* 内側コンテナを画面幅に合わせて広げつつ、右ビジュアルは比率保持 */
  .lp-ryuna .hero-ryuna__inner{
    width: min(92vw, 1920px);                 /* 2560でも余白が揃うよう内側幅を可変 */
    max-width: min(92vw, 1920px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(520px, 36vw, 760px);
    column-gap: clamp(40px, 6vw, 64px);
    padding-right: 0;

    /* 左カラム実効幅（下線の長さ計算に使用） */
    --hero-leftcol: calc(min(92vw, 1920px) - clamp(520px,36vw,760px) - clamp(80px,6vw,128px));
  }

  /* 右アーチ画像は右端に固定＆スケール */
  .lp-ryuna .hero-ryuna__visual{ right: 0; width: clamp(520px, 36vw, 760px); }

  /* 左側の始点をvwで増やして“同じ感じ”を維持 */
  .lp-ryuna .hero-ryuna__kicker,
  .lp-ryuna .hero-ryuna__lead{ padding-left: clamp(120px, 8vw, 180px) !important; }
  .lp-ryuna .hero-ryuna__ctaRow{ margin-left: clamp(120px, 8vw, 180px) !important; }



  /* 文字サイズ：2560まで伸びるよう clamp を広めに */
  .lp-ryuna .hero-ryuna__kicker{ font-size: clamp(44px, 2.0vw, 44px); line-height:1.2; }
  .lp-ryuna .hero-ryuna__title { font-size: clamp(72px, 7.2vw, 120px); line-height:1.06; }
  .lp-ryuna .hero-ryuna__lead  { font-size: clamp(16px, 1.15vw, 40px); max-width: 60ch; }

  /* CTA：幅・高さ・アイコンも比例拡大（Section4/6と同じ見た目キープ） */
  .lp-ryuna .hero-ryuna__cta{
    inline-size: clamp(360px, 28vw, 560px);
    block-size:  clamp(56px, 5vw, 88px);
    font-size:   clamp(16px, 1.2vw, 22px);
    --icon:      clamp(28px, 2.1vw, 40px);
    padding-right: calc(var(--icon) + clamp(12px, 1vw, 18px));
  }
  .lp-ryuna .hero-ryuna__cta .cta__icon{ right: clamp(26px, 1.7vw, 40px); }

  /* 黄色バッジ（名称どちらでも拾えるように両方指定） */
  .lp-ryuna .hero-ryuna__badge,
  .lp-ryuna .hero-ryuna__priceBadge{
    --badge-d: clamp(120px, 10vw, 200px);  /* 直径 */
    width: var(--badge-d); height: var(--badge-d);
    display:grid; place-items:center; border-radius:50%;
  }
  .lp-ryuna .hero-ryuna__badge .price,
  .lp-ryuna .hero-ryuna__priceBadge .price{
    font-size: clamp(40px, 3.6vw, 72px);
    line-height: 1;
  }
}

/* === Hero：超ワイド時の縦余白（上書きポイント） === */
@media (min-width:1600px){
  /* セクション上の余白（全体の押し下げ量） */
  .lp-ryuna .hero-ryuna{
    padding-top: clamp(40px, 6vw, 100px);
  }

  /* キッカーの下余白：キッカー→タイトル間 */
  .lp-ryuna .hero-ryuna__kicker{
    margin-bottom: clamp(8px, 1.4vw, 60px);
  }

  /* タイトルの下余白：タイトル→リード間 */
  .lp-ryuna .hero-ryuna__title{
    margin: 120px 0 clamp(16px, 2vw, 120px);
  }

  /* リードの下余白：リード→CTA行間 */
  .lp-ryuna .hero-ryuna__lead{
    margin: 0 0 clamp(20px, 2.4vw, 50px);
  }

  /* CTA行の上／下余白（必要なら） */
  .lp-ryuna .hero-ryuna__ctaRow{
    margin-top: clamp(16px, 2vw, 26px);
  }
}




/* 1440px のとこ */
@media (min-width: 1400px) and (max-width: 1500px){
  .lp-ryuna .hero-ryuna{ --vis-top: 28px; }  /* ← ここを 24px / 32px などで調整 */

  .lp-ryuna .hero-ryuna{
    --vis-top: 28px;      /* ← 既存の“右アーチを少し下げる” */
    --fee-d: 152px;       /* ← 直径を増やす（例: 100px → 132px） */
  }

  /* CTAボタンの横幅だけ広げる */
  .hero-ryuna__cta{
    inline-size: clamp(300px, 27vw, 520px);
    /* 必要ならパディングも少し増やせる */
    /* padding-inline: clamp(18px, 1.8vw, 28px); */
  }

 /*バッジ 外側の丸 */
  .lp-ryuna .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    --fee-d: clamp(150px, 11vw, 184px); /* 目安：150〜184px */
    inline-size: var(--fee-d);
    block-size:  var(--fee-d);
    width: var(--fee-d);                 /* 念のため width/height も指定 */
    height: var(--fee-d);
    border-width: 2px;
        /* ★ここを追加：右に少しずらす */
    margin-left: 10px;   /* 8〜20pxくらいで好みに調整してOK */
  }

  /* 上の「入会費・年会費」 */
  .lp-ryuna .hero-ryuna__feeBadge > small{
    font-size: clamp(21px, 1.0vw, 26px);
    letter-spacing: .04em;
    font-weight: 500;
  }

  /* 下の「0円」 */
  .lp-ryuna .hero-ryuna__feeBadge .price{
    display:flex; align-items:flex-end; gap:.12em; line-height:1;
  }
  .lp-ryuna .hero-ryuna__feeBadge .price .num{
    font-size: clamp(70px, 3.8vw, 90px);  /* 0（数字） */
    line-height:1;
  }
  .lp-ryuna .hero-ryuna__feeBadge .price .yen{
    font-size: clamp(22px, 1.3vw, 28px);  /* 円（単位） */
    line-height:1.05;
    transform: translateY(-1px);
  }
}






  /* ==== Kickerの下線：1024px帯は1440と同じ比率に縮小 ==== */
/* 1440px時の見た目の“実寸”を変えたいときはここだけ変更 */
:root{
  --kickerline-1440: 600; /* px @1440 */
}

@media (min-width:769px) and (max-width:1200px){
    body::before{
    /* 画像の表示サイズを固定して、1440のときと近い縮尺にする */
    background-size: 1200px auto;      /* ← 1500〜1800pxくらいで好みの位置に調整 */
    background-position: center top;   /* 念のため位置も明示 */
  }

  .hero-ryuna__kicker::after{
    /* 600px@1440 → 1024では約 600 * 1024/1440 ≒ 426.7px */
    width: clamp(
      430px,
      calc((var(--kickerline-1440) / 20.4) * 1vw),
      calc(var(--kickerline-1440) * 1px)
    );
  }
}


/* ==== Hero: 1024px帯で1440と同じ比率で縮むように調整 ==== */
:root{
  --hero-h1-1440: 72;   /* 例：H1は 72px @1440 */
  --hero-lead-1440: 18; /* 例：リードは 18px @1440 */
  --hero-kicker-1440: 20; /* 例：キッカー 20px @1440（必要なら） */
}
@media (min-width: 769px) and (max-width: 1200px){

    /* 1vw = 14.4px（@1440）。pxをvwに換算： px / 14.4 vw */
  .hero-ryuna__title{
    font-size: clamp(36px, calc((var(--hero-h1-1440) / 11.4) * 1vw), calc(var(--hero-h1-1440) * 1px));
    line-height: 1.18;
    letter-spacing: .01em;
  }
    .hero-ryuna__titleSvg{
    width: min(100%, 450px);
  }

    .hero-ryuna__title{
    padding-left: clamp(8px, 2.6vw, 60px);
  }

  .hero-ryuna__lead{
    font-size: clamp(15px, calc((var(--hero-lead-1440) / 54.4) * 1vw), calc(var(--hero-lead-1440) * 1px));
    line-height: 1.6;
  }
  /* 必要ならキッカーも同様に */
  .hero-ryuna__kicker{
    font-size: clamp(21px, calc((var(--hero-kicker-1440) / 6.4) * 1vw), calc(var(--hero-kicker-1440) * 1px));
  }

  /* 右カラム＝ 420px@1440 の比率（29.17vw）で縮む。最小320pxまで許容 */
  .hero-ryuna__inner{
    grid-template-columns: minmax(0, 1fr) clamp(320px, 29.17vw, 560px);
    column-gap: clamp(24px, 3.2vw, 40px);
    width: min(95.26vw, 100%);
  }

  /* 共通：まずは余白の元凶をゼロ化して、row-gapで管理 */
.lp-ryuna .hero-ryuna__content{
  display: grid;
  row-gap: clamp(6px, 1vw, 12px);  /* ← 全体の縦ギャップをここで一括管理 */
  padding-block: 0;                /* コンテナ上下パディングを無効化 */
}
.lp-ryuna .hero-ryuna__content > *{ margin: 0; }  /* 子要素の上下マージンを一旦ゼロに */

/* 要素ごとの“最小マージン”だけ戻す（詰め気味） */
  /* 要素ごとの“最小マージン”だけ戻す（詰め気味だけどメリハリ維持） */
  .lp-ryuna .hero-ryuna__kicker{
    /* 1024px で ≒ 4〜5px くらい */
    margin-bottom: clamp(3px, 1.45vw, 7px);
  }

  .lp-ryuna .hero-ryuna__title{
    /* 1024px で ≒ 12〜13px くらい（タイトルだけ少し大きめ） */
    margin-top: clamp(8px, 1.3vw, 18px);
    margin-bottom: clamp(4px, 0.3vw, 9px);
  }

  .lp-ryuna .hero-ryuna__lead{
    /* 1024px で ≒ 10〜11px くらい */
    margin-bottom: clamp(3px, 0.1vw, 8px);
  }

/* キッカーの下線（擬似要素）も近づける */
.lp-ryuna .hero-ryuna__kicker::after{
  margin-top: clamp(1px, 0.5vw, 2px);
}

  /* 絶対配置のままでも比率で縮むように。端の余白も比率ベースに */
  .hero-ryuna__visual{
    width: clamp(320px, 29.17vw, 560px);
    right: clamp(24px, 6.67vw, 120px); /* 96px@1440 ≒ 6.67vw を基準 */
  }

  /* 左側のインデントを少し詰めて、1024帯での圧迫を回避（任意） */
  :root{ --hero-left: clamp(16px, 5vw, 96px); }
  .hero-ryuna__kicker,
  .hero-ryuna__lead{ padding-left: var(--hero-left) !important; }
  .hero-ryuna__kicker::after{ margin-left: 50px ; }
  .hero-ryuna__ctaRow{ margin-left: var(--hero-left) !important; }
}


/* ================================
   769–1200px：1440デザインを等比で縮小
   CTA/バッチ
   （基準1440px → 1vw = 14.4px を使って計算）
   ================================ */
@media (min-width:769px) and (max-width:1200px){

  /* --- ボタン本体（どちらのクラスでも効くように） --- */
  .lp-ryuna .hero-ryuna__cta,
  .lp-ryuna .hero-ryuna__ctaRow .cta__btn{
    /* 1440での目安 → 1024で等比縮小（1vw@1440=14.4px） */
    /* 高さ：60px → 約42px / フォント：20px → 約14px */
    height: clamp(42px, calc(90 / 14.4 * 1vw), 60px);
    padding: 0
             clamp(56px, calc(80 / 14.4 * 1vw), 80px)  /* 右：アイコン分を広め */
             0
             clamp(28px, calc(40 / 14.4 * 1vw), 40px); /* 左 */
    border-radius: 9999px;
    font-size: clamp(18px, calc(20 / 14.4 * 1vw), 24px);
    line-height: 1;               /* テキストの天地を詰める */
    display: inline-flex;
    align-items: center;
    position: relative;           /* 内側白枠/アイコンの基準 */
    gap: 0;                       /* 文字とアイコンの空きはアイコン側で調整 */
    /* （背景やボーダーは既存のままでOK） */
  }

  /* --- 右の白丸アイコン（位置とサイズ） --- */
  .lp-ryuna .hero-ryuna__cta .cta__icon,
  .lp-ryuna .hero-ryuna__ctaRow .cta__btn .cta__icon{
    --icon: clamp(26px, calc(44 / 18.4 * 1vw), 44px);       /* 直径：44px→約31px */
    position: absolute;
    top: 50%;
    right: clamp(22px, calc(36 / 14.4 * 1vw), 36px);        /* 36px→約25px */
    transform: translateY(-50%);
    width: var(--icon);
    height: var(--icon);
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
  }
  /* 三角（▶） */
  .lp-ryuna .hero-ryuna__cta .cta__icon::before,
  .lp-ryuna .hero-ryuna__ctaRow .cta__btn .cta__icon::before{
    content:"";
    position:absolute; left:50%; top:50%;
    transform: translate(-38%, -50%);  /* 少し右寄せ */
    width:0; height:0;
    border-left:  clamp(7px,  calc(12 / 14.4 * 1vw), 12px) solid #f184ac;
    border-top:   clamp(5px,  calc( 8 / 14.4 * 1vw),  8px) solid transparent;
    border-bottom:clamp(5px,  calc( 8 / 14.4 * 1vw),  8px) solid transparent;
  }

  /* --- CTA内側の白いストローク（内枠） --- */
  .lp-ryuna .hero-ryuna__cta::before,
  .lp-ryuna .hero-ryuna__ctaRow .cta__btn::before{
    content:"";
    position:absolute;
    inset: clamp(2px, .55vw, 3px);            /* 余白：8px→約5px */
    border-radius: inherit;
    border: clamp(1px, calc(2 / 14.4 * 1vw), 2px) solid rgba(255,255,255,.95);
    pointer-events:none;
  }
}

/* --- バッジ --- */
@media (min-width:769px) and (max-width:1200px){
  /* 念のため重なり順と余白を整える */
  .lp-ryuna .hero-ryuna__inner{ position: relative; }
  .lp-ryuna .hero-ryuna__ctaRow{
    position: relative;
    z-index: 5;              /* 写真より前に出したい時だけ */
    flex-wrap: nowrap;
  }

  /* ▼ここが“ノブ”：バッジを右へ寄せる量（＝CTAからの距離） */
  .lp-ryuna .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    flex: 0 0 auto;
    margin-right: 80px;
    /* 縦位置の微調整が必要なら↓を使う（＋で下げる） */
    /* transform: translateY(2px); */
  }

    /* 上の「入会費・年会費」を細めに */
  .lp-ryuna .hero-ryuna__feeBadge > small{
    font-weight: 400;
  }

  /* 0 の数字も少しだけ軽くしたいなら */
  .lp-ryuna .hero-ryuna__feeBadge .price .num{
    font-weight: 600;
  }

  /* 「円」も合わせて軽く */
  .lp-ryuna .hero-ryuna__feeBadge .price .yen{
    font-size: 20px;
    font-weight: 500;
  }
}


/* ===== HERO：769–1000px は 1024 の見た目を維持 ===== */
@media (min-width:769px) and (max-width:1000px){

  /* 2カラムを強制（左=テキスト、右=アーチ画像） */
  .lp-ryuna .hero-ryuna__inner{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) min(38vw, 420px) !important;
    column-gap: clamp(16px,3vw,28px);
    align-items: center;
  }

  /* 左カラムの幅を制限して、右画像の下に潜らせない */
  .lp-ryuna .hero-ryuna__content{
    grid-column: 1 !important;
    max-width: 560px;
  }
  .lp-ryuna .hero-ryuna__title,
  .lp-ryuna .hero-ryuna__lead{
    max-width: 48ch;   /* 文字行幅を制御 */
  }

  /* 右：アーチ画像は右端に固定 */
  .lp-ryuna .hero-ryuna__visual{
    grid-column: 2 !important;
    justify-self: end;
    width: min(38vw, 320px);
    height: auto;
  }

  /* CTA行は改行OKにして、バッジが重ならないようにする */
  /* 折り返し禁止＆幅制限を解除 */
  .lp-ryuna .hero-ryuna__ctaRow{
    flex-wrap: nowrap !important;
    max-width: none !important;
    width: max-content;              /* 中身に合わせて必要分だけ */
    gap: clamp(2px,1.2vw,4px);
  }
  /* CTAを少しだけ短めにして並びやすく */
  .lp-ryuna .hero-ryuna__cta{
    inline-size: clamp(220px, 20vw, 280px);  /* お好みで ± */
    flex: 0 1 auto;
  }
  /* バッジは実寸のまま右側に */
  .lp-ryuna .hero-ryuna__feeBadge{
    flex: 0 0 auto;
  }
}








/* ================================
   SP(<=768px) ヒーロー部レイアウト
   ================================ */
@media (max-width:768px){
  :root{
    --fv-img: url("assets/SPflower1.png");  /* SP用の花画像 */
    --fv-gap: 22px;                         /* ヘッダー上の花の見せ量 */
    --fv-height: 1400px;
  }

  /* ヒーローを「画面端まで」広げる */
  .lp-ryuna .hero-ryuna{
    position: relative;
    z-index: 0;
    --fv-extra: 100px;

    margin-inline: calc(50% - 50vw); /* ← wrapper からはみ出して full-bleed に */
    padding-inline: 0;               /* 左右のパディングをいったんゼロに */
    margin-bottom: 40px;
  }

  .lp-ryuna .hero-ryuna::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--fv-gap));
    bottom: calc(-1 * var(--fv-extra));
    z-index: -1;

    background-image: var(--fv-img);
    background-repeat: no-repeat;
    background-size: 100% 100%;   /* 幅・高さとも少しズーム */
    background-position: center -30px;
  }

  /* 基本トークン */
  .lp-ryuna .hero-ryuna{
    --pad-x: clamp(16px, 5vw, 24px);
    --gap  : clamp(12px, 4.8vw, 24px);
    --fz-kicker: clamp(15px, 3.6vw, 20px);
    --fz-title : clamp(28px, 9.6vw, 44px);
    --fz-lead  : clamp(14px, 3.9vw, 16px);
  }

  /* コンテナ */
  .hero-ryuna__inner{
    position: relative;
    display:flex; flex-direction:column; gap:var(--gap);
    width:min(640px,100%); margin:0 auto;
    padding: clamp(50px, 6vw, 72px) var(--pad-x) 0;
  }

  /* キッカー */
  .hero-ryuna__kicker{
    font-size:var(--fz-kicker); color:#B68A95; letter-spacing:-2.2px;
    line-height:1.5; text-align:left; position:relative;
    font-weight: 500;
    z-index: 4;              /* ★ アーチ画像より手前に */
  }
  .hero-ryuna__kicker::after{
    content:""; display:block; 
    width: min(98%, 440px);   /* 72% → 92% に拡張 */
    height:1px;
    margin-top: clamp(6px, 1.6vw, 10px);
    background: linear-gradient(#fff 0 50%, #B68A95 50%);
  }

  /* タイトル */
  .hero-ryuna__title{
    margin-top: clamp(-20px, 2.4vw, -30px);  /* 上の余白をかなり控えめに */
    margin-bottom:clamp(-36px, 2.4vw, -60px);                  /* 下はそのまま無し or 8pxくらいでもOK */
    z-index: 4;              /* ★ アーチ画像より前へ */
  }
    /* タイトル（SVG）のサイズ調整：SPだけ少し大きく */
  .hero-ryuna__titleSvg{
    width: 110%;          /* 100% → 115% に拡大 */
    max-width: none;      /* 上限を外す */
    margin-left: -6%;     /* 左にはみ出させて中央寄せっぽく見せる */
  }

  /* ビジュアル（アーチ） */
  .hero-ryuna__visual{
    order:2; align-self:center; position:relative;
    width:min(72vw,520px); aspect-ratio:3/4;
    border-radius:220px 220px 24px 24px; overflow:hidden;
  }
  .hero-ryuna__visual img{
    width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block;
  }

  /* 0円バッジ（左上に重ね） */
  .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    position:absolute;
    left: calc(50% - min(41vw, 260px) + 12px);  /* アーチ左端 + 12px */
    top:  clamp(120px, 26vw, 180px);            /* アーチ上端 + 余白 */
    z-index:6; pointer-events:none;

    inline-size: var(--fee-d, 100px);
    block-size: var(--fee-d, 100px);
    border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; line-height:1.2;
      /* ▼ここが「ふわっと」追加部分 ▼ */
    box-shadow: 0 0 20px rgba(255,255,166, .9);
    /*  0 0 ぼかしの強さ 色(透明度)  */
  }
  .hero-ryuna__feeBadge small{
    font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
                margin:12px 0 0 -6px;
    font-weight:800; font-size:clamp(12px,3.7vw,14px); letter-spacing:.10em; line-height:1.2; color:#3A2D1A;
  }
  .hero-ryuna__feeBadge .price{ display:inline-flex; align-items:baseline; margin-top:-2px; }
  .hero-ryuna__feeBadge .price .num{
    font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
                font-weight:800; color:#3B2B1A;
    font-size: clamp(42px, 10vw, 82px); line-height:.95;
  }
  .hero-ryuna__feeBadge .price .yen{
    font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
               font-weight:700; color:#3B2B1A;
    font-size: clamp(16px, 3.2vw, 34px); margin-left:.08em; vertical-align:.18em;
  }

  /* リード：写真の下へ */
  .hero-ryuna__content{ display:contents; }
  .hero-ryuna__kicker{ order:0; }
  .hero-ryuna__title { order:1; }
  .hero-ryuna__visual{ order:2; }
  .hero-ryuna__lead{
    order:3;
    font-weight: 500;
    font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
    font-size: clamp(17px, 1.6vw, 54px);
    letter-spacing: -2px;
    color:#333;
    text-align:center; 
    margin-top: clamp(-4px, 2.4vw, -10px);  /* 上の余白をかなり控えめに */
    margin-bottom:clamp(-18px, 2.4vw, -28px);                  /* 下はそのまま無し or 8pxくらいでもOK */
    max-width:min(92%,520px); margin-left:auto; margin-right:auto;
  }
}


/* タブレットだけリード文を大きめに（768–1024px） */
@media (min-width:768px) and (max-width:1024px){
  /* 変数を上書きする方式：既存の var(--fz-lead) を拡張 */
  .lp-ryuna .hero-ryuna{
    --fz-lead: clamp(22px, 2.3vw, 26px); /* 目安：SPより大、PCより控えめ */
  }


  /* CTA 行 */
  .hero-ryuna__ctaRow{
    order:4; display:flex; justify-content:center;
    width:min(92vw,600px);
    margin: clamp(16px, 5vw, 28px) auto 0;
    padding-inline:16px; /* 端の食い込み防止 */
  }

  /* CTA 本体：
  /* 行コンテナ：中央、はみ出し防止 */
  .hero-ryuna__ctaRow{
    order: 4;
    display: flex;
    justify-content: center;
    width: min(92vw, 600px);
    margin: clamp(16px, 5vw, 28px) auto 0;
    padding-inline: 16px;
  }

  /* a版(.hero-ryuna__cta) / button版(.cta__btn) の両対応 */
  .hero-ryuna__cta,
  .hero-ryuna__ctaRow .cta__btn{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    border: 0;
    border-radius: 9999px;
    text-decoration: none;

    /* 1440の色味：上→下のグラデ。背景は重要なので明示上書き */
    /* background-color: #f184ac */

    /* 文字まわり：1440相当の詰め具合 */
    color: #fff;
    font-weight: 400;             /* ← PCと同じ軽さに */
    font-size: clamp(18px, 5.6vw, 24px);
    letter-spacing: .03em;        /* ← 広がり過ぎ防止 */

    /* 高さと内側余白（1440の比率に寄せる） */
    padding: clamp(14px, 4.8vw, 20px) clamp(22px, 7vw, 28px);
  }

  /* 内側の白い“枠線” */
  .hero-ryuna__cta::before,
  .hero-ryuna__ctaRow .cta__btn::before{
    content: "";
    position: absolute;
    inset: clamp(2px, .55vw, 4px);  
    border-radius: inherit;
    border: clamp(1px, .3vw, 2px) solid rgba(255,255,255,.95);
    pointer-events: none;
  }

  /* 右の白丸アイコン（サイズ/位置/内側の光） */
  .hero-ryuna__cta .cta__icon,
  .hero-ryuna__ctaRow .cta__icon{
    flex: 0 0 auto;
    position: absolute;
    right: clamp(18px, 4.5vw, 30px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(28px, 8.6vw, 36px);
    height: clamp(28px, 8.6vw, 36px);
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  /* 三角（▶）をCSSで描く：PCと同じ位置感 */
  .hero-ryuna__cta .cta__icon::before,
  .hero-ryuna__ctaRow .cta__icon::before{
    content: "";
    display: block;
    width: 0; height: 0;
    border-left: clamp(9px, .7vw, 12px) solid #f184ac;
    border-top:  clamp(6px, .5vw, 8px)  solid transparent;
    border-bottom: clamp(6px, .5vw, 8px) solid transparent;
    transform: translateX(10%); /* 少し右寄せで“再生ボタン”っぽく */
  }

    .hero-ryuna__cta,
  .hero-ryuna__ctaRow .cta__btn{
    /* 右だけ大きめにしてテキストを相対的に左へ */
    padding-left: clamp(20px, 6vw, 28px);
    padding-right: clamp(56px, 12vw, 72px);
  }

  /* アイコン位置はそのまま。必要なら微調整 */
  .hero-ryuna__cta .cta__icon,
  .hero-ryuna__ctaRow .cta__icon{
    right: clamp(18px, 4.5vw, 30px);
  }
}




/* === SP: ヒーローでリード文をアーチ写真の下へ === */
@media (max-width:768px){
    /* まず白丸のサイズを変数にしておく（既存に追記OK） */
  .hero-ryuna__cta .cta__icon,
  .hero-ryuna__ctaRow .cta__icon{
    --icon: clamp(28px, 8.6vw, 36px);   /* ← 直径を可変に */
    width: var(--icon);
    height: var(--icon);
  }

  /* .hero-ryuna__content の“箱”を外して、中身を親のflex直下にする */
  .hero-ryuna__content{ display: contents; }

  /* 並び順：キッカー(0) → タイトル(1) → 写真(2) → リード(3) → CTA(4) */
  .hero-ryuna__kicker{ order: 0; }
  .hero-ryuna__title { order: 1; }
  .hero-ryuna__visual{ order: 2; }  /* 既存指定と重複しても問題なし */

  .hero-ryuna__lead{
    order: 3;  }

  .hero-ryuna__ctaRow{
    order: 4;  }

  .cta__label{
    font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
    margin-left: 20px;          
  }

    .hero-ryuna__ctaRow{
    order:4; display:flex; justify-content:center;
    width:min(92vw,600px);
    margin: clamp(16px, 5vw, 28px) auto 0;
    padding-inline:16px;
  }
  .hero-ryuna__cta,
  .hero-ryuna__ctaRow .cta__btn{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:100%; border:0; border-radius:9999px; text-decoration:none;
    background-color:#f184ac; color:#fff; font-weight:400;
    font-size: clamp(20px, 6.6vw, 28px);
    padding: clamp(14px, 4.8vw, 20px) clamp(22px, 7vw, 28px); /* 高さ・内余白 */
  }
  .hero-ryuna__cta::before,
  .hero-ryuna__ctaRow .cta__btn::before{
    content:""; position:absolute;   inset: clamp(2px, .55vw, 4px);  
    border-radius:inherit; border: clamp(1px, .3vw, 2px) solid rgba(255,255,255,.95);
    pointer-events:none;
  }
  .hero-ryuna__cta .cta__icon,
  .hero-ryuna__ctaRow .cta__icon{
    position:absolute; right: clamp(18px, 4.5vw, 30px); top:50%; transform:translateY(-50%);
    width: clamp(28px, 8.6vw, 36px); height: clamp(28px, 8.6vw, 36px); border-radius:50%; background:#fff;
  }

    /* 三角（▶）を白丸の中央より少し右に */
  .hero-ryuna__cta .cta__icon::before,
  .hero-ryuna__ctaRow .cta__icon::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-36%, -50%);  /* ちょい右寄せ */
    width: 0;
    height: 0;
    /* 三角の辺長は白丸サイズに追従（約1/3と1/4） */
    border-left:  calc(var(--icon) * .33) solid #f184ac;
    border-top:   calc(var(--icon) * .22) solid transparent;
    border-bottom:calc(var(--icon) * .22) solid transparent;
    pointer-events: none;
  }
}

/* === SP: CTA を中央に・左右の内側余白を均等に※他だとレイアウト崩れが生じるのでこれはいじらない === */
@media (max-width:768px){

  /* ① 行（ラッパー）は親幅基準でセンター。92vw をやめる */
  .lp-ryuna .hero-ryuna__ctaRow{
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;                 /* 任意で上限だけ付ける */
    margin: clamp(16px, 5vw, 28px) auto 0;  /* ← auto で中央揃え */
    padding-inline: 0;                /* ガターは親に任せる */
  }

  /* ② ボタン本体：右パディング = 左パディング + 白丸 + すき間 */
  .lp-ryuna .hero-ryuna__cta,
  .lp-ryuna .hero-ryuna__ctaRow .cta__btn{
    --icon: clamp(28px, 8.6vw, 36px);                /* 白丸の直径 */
    --gap : clamp(12px, 3.8vw, 18px);                /* 白丸と文字のすき間 */
    --padL: clamp(22px, 7vw, 28px);                  /* 左パディング */
    --padR: calc(var(--padL) + var(--icon) + var(--gap)); /* 右を自動計算 */

    box-sizing: border-box;
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(14px, 4.8vw, 20px) var(--padR) clamp(14px, 4.8vw, 20px) var(--padL);
    border-radius: 9999px;
  }

  /* ③ 白丸アイコンは右端から“すき間”分だけ離す */
  .lp-ryuna .hero-ryuna__cta .cta__icon,
  .lp-ryuna .hero-ryuna__ctaRow .cta__btn .cta__icon{
    position: absolute;
    top: 50%; right: var(--gap); transform: translateY(-50%);
    width: var(--icon); height: var(--icon); border-radius: 50%; background:#fff;
    pointer-events: none;
  }

  /* ④ 白丸内の▶。大きさは白丸に追従 */
  .lp-ryuna .hero-ryuna__cta .cta__icon::before,
  .lp-ryuna .hero-ryuna__ctaRow .cta__btn .cta__icon::before{
    content:"";
    position:absolute; left:50%; top:50%; transform:translate(-36%, -50%);
    width:0; height:0;
    border-left:  calc(var(--icon) * .33) solid #f184ac;
    border-top:   calc(var(--icon) * .22) solid transparent;
    border-bottom:calc(var(--icon) * .22) solid transparent;
  }
}



/* 641–768px：バッジを“下げて＆大きく” */
@media (min-width:641px) and (max-width:768px){
  .hero-ryuna__inner{ position: relative; } /* 基準 */

  .hero-ryuna__kicker{
    font-size: 28px;
  }

  .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    /* サイズを拡大（元が var(--fee-d,100px) なのでここで上書き） */
    --fee-d: clamp(120px, 22vw, 168px);
    /* 位置：少し下へ（top を強めに下げる）＋ 左端は微調整 */
    left: calc(45% - min(41vw, 260px) + 14px);
    top:  clamp(300px, 34vw, 380px);
    z-index: 6;
    transform: none;
    pointer-events: none;
        box-shadow: 0 0 20px rgba(255,255,166, .9);
    /*  0 0 ぼかしの強さ 色(透明度)  */
  }

  /* 中の文字サイズも比率維持で少しだけ拡大 */
  .hero-ryuna__feeBadge small{
    font-size: clamp(22px, 2.3vw, 25px);
    margin-top: 10px;
  }
  .hero-ryuna__feeBadge .price .num{
    font-size: clamp(86px, 8.8vw, 106px);
    line-height: .95;
  }
  .hero-ryuna__feeBadge .price .yen{
    font-size: clamp(28px, 2.6vw, 32px);
  }
}


/* --- 425px 付近だけ：バッジを少し上へ --- */
@media (max-width: 768px){
  .hero-ryuna__kicker{
    margin-top: 24px;
    font-size: 30px;
  }

    .hero-ryuna__kicker::after{
    content:""; display:block; 
    width: min(98%, 660px);   /* 72% → 92% に拡張 */
    height:3px;
    margin-top: clamp(6px, 1.6vw, 10px);
    background: linear-gradient(#fff 0 50%, #B68A95 50%);
  }

  .hero-ryuna__lead{
    font-size: 22px;
  }

  .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    /* 位置だけ上書き（上に寄せる＝top を小さく） */
    top: clamp(372px, 22vw, 396px) ;
    left: calc(40% - min(41vw, 260px) + 12px);
        box-shadow: 0 0 20px rgba(255,255,166, .9);
    /*  0 0 ぼかしの強さ 色(透明度)  */
  }
}

/* --- 425px 付近だけ：バッジを少し上へ --- */
@media (max-width: 430px){
  .hero-ryuna__kicker{
    margin-top: 24px;
    font-size: 20px;
  }

  .hero-ryuna__lead{
    font-size: 16px;
  }

  .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    /* 位置だけ上書き（上に寄せる＝top を小さく） */
    top: clamp(272px, 22vw, 296px) ;
    left: calc(40% - min(41vw, 260px) + 12px);
        box-shadow: 0 0 20px rgba(255,255,166, .9);
    /*  0 0 ぼかしの強さ 色(透明度)  */
  }
}

/* --- 375px 付近だけ：バッジを少し上へ --- */
@media (max-width: 380px){
  .hero-ryuna__kicker{
    margin-top: 22px;
    font-size: 18px;
  }

  .hero-ryuna__lead{
    font-size: 14px;
  }

  .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    /* 位置だけ上書き（上に寄せる＝top を小さく） */
    top: clamp(232px, 22vw, 256px) ;
    left: calc(40% - min(41vw, 260px) + 12px);
        box-shadow: 0 0 20px rgba(255,255,166, .9);
    /*  0 0 ぼかしの強さ 色(透明度)  */
  }
}


/* --- 320px 付近だけ：バッジを少し上へ --- */
@media (max-width: 340px){
  .hero-ryuna__kicker{
    margin-top: 20px;
    font-size: 15px;
  }

  .hero-ryuna__lead{
    font-size: 12px;
  }

  .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    /* 位置だけ上書き（上に寄せる＝top を小さく） */
    top: clamp(222px, 22vw, 246px) ;
    left: calc(40% - min(41vw, 260px) + 12px);
    --fee-d: clamp(80px, 22vw, 108px);
        box-shadow: 0 0 20px rgba(255,255,166, .9);
    /*  0 0 ぼかしの強さ 色(透明度)  */
  }
}


/* ===== 2560px以上だけサイズを抑える（1440は無変更） ===== */
@media (min-width: 2560px){
  /* 変数運用している場合は、変数だけ小さめにキャップ */
  .lp-ryuna .hero-ryuna{
    --fz-title: 86px;         /* タイトル上限（お好みで 60–68px） */
    --fz-lead : 26px;         /* リード少し控えめ（任意） */
    --fz-kicker: 26px;        /* キッカーも少し控えめ（任意） */
  }

    .lp-ryuna .hero-ryuna .hero-ryuna__kicker{
    font-size: 46px;  
    letter-spacing: -4px;
  }

  .hero-ryuna__kicker{
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
      /* transform: translateY(2.0625vw); 78px※実装すると型崩れするので予備でおいてる */
  position: relative;   /* 疑似要素の基準にする */
}

  .hero-ryuna__kicker::after{
    content:"";
    position: absolute;
    /* テキストの左端に合わせる：親の左から“同じだけ”ずらす */
    left: 0;
    margin-left: clamp(100px, 8vw, 170px);  /* 6.25vw → 8vw に統一 */
    /* 文字のすぐ下に配置（オフセットは好みで微調整） */
    top: calc(100% + clamp(30px, .5vw, 40px));
    /* ラインの長さは好みで調整（見本に近づけるなら 24〜34vw くらい） */
    width: clamp(550px, 40vw, 900px);
    height: 2px;
    /* 上半分=白、下半分=ピンクで“ピンク白の線”に見せる */
    background: linear-gradient(
      to bottom,
      #ffffff 0 50%,
      #ae717f 50% 100%
    );
    border-radius: 2px;                   /* 端をほんの少し丸める */
    pointer-events: none;
  }

  /* タイトル行の横伸びも抑えて見た目を締める（任意） */
  .hero-ryuna__title{
    font-size: var(--fz-title);
    max-width: 1600px;         
    letter-spacing: .04em;    
    text-wrap: balance;
  }

  .hero-ryuna__lead{ 
    letter-spacing: .04em; 
  }

  /* 左カラムが広がり過ぎる場合の保険（任意） */
  .hero-ryuna__content{ max-width: 1600px; }

  /* === CTAボタン：まず全体的にひと回り大きく ========================= */
.hero-ryuna__cta{
  inline-size: clamp(360px, 30vw, 600px);     /* ← 幅 最大600に拡大 */
    block-size: clamp(88px, 6vw, 152px);
  padding-inline: clamp(18px, 1.6vw, 26px);
  --icon: clamp(32px, 2.2vw, 44px);           /* 白丸サイズ拡大 */
  padding-right: calc(var(--icon) + clamp(14px, 1.1vw, 24px));
}
.hero-ryuna__cta::before{ inset: clamp(4px, .6vw, 8px); }  /* 内側白枠も調整 */
.hero-ryuna__cta .cta__icon{ right: clamp(30px, 1.1vw, 42px); }
.hero-ryuna__cta .cta__icon::before{
  border-left:  clamp(10px, .8vw, 16px) solid #f184ac;
  border-top:   clamp(7px,  .6vw, 12px) solid transparent;
  border-bottom:clamp(7px,  .6vw, 12px) solid transparent;
}
/* ラベル文字（ヒーローCTAだけ大きく） */
.hero-ryuna__cta .cta__label{ font-size: clamp(20px, 2.2vw, 46px); }

/* === Ultra-wide(≥1600px)：さらに拡大 =========================== */
@media (min-width:1600px){
  /* 花を見せる “高さ” を大きくする（860px → 1100px） */
  :root{
    --fv-height: 1350px;   /* 1000〜1200pxで好みの位置に調整 */
  }

  /* 見え方を少し落ち着かせる（位置だけ明示・スケールは cover のまま） */
  body::before{
    background-position: center top;
    /* 必要ならここで高さを直接いじることもできます
       height: calc(var(--fv-gap) + 1100px);
    */
  }

  .lp-ryuna .hero-ryuna .hero-ryuna__cta{
    /* 高さだけ上げたいなら block-size を主に上げる */
    block-size: clamp(84px, 5.8vw, 136px);
    /* 右の白丸に合わせてパディングと白丸サイズも少し増やす */
    --icon: clamp(34px, 2.2vw, 50px);
    padding-right: calc(var(--icon) + clamp(14px, 1.1vw, 26px));
  }
  .lp-ryuna .hero-ryuna .hero-ryuna__cta::before{
    inset: clamp(5px, .6vw, 10px);
  }
}
}

/* 1601px〜：入会費0円バッジを一回り拡大（外側＋内側まとめて） */
@media (min-width:1601px){
  /* 外側の丸（直径を拡大） */
  .lp-ryuna .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    --fee-d: clamp(180px, 13vw, 220px);   /* 好みで 200–300px 程度に調整 */
    inline-size: var(--fee-d);
    block-size:  var(--fee-d);
    border-width: 2px;                    /* 枠が細く見える場合の微調整（任意） */
  }

  /* 上の「入会費・年会費」 */
  .lp-ryuna .hero-ryuna__feeBadge > small{
    font-size: clamp(26px, 2.05vw, 34px);
    letter-spacing: .04em;
  }

  /* 下の「0円」：数字と単位を個別にスケール */
  .lp-ryuna .hero-ryuna__feeBadge .price{
    display:flex; align-items:flex-end; gap:.12em;
    line-height:1;                         /* 余白詰め */
  }
  .lp-ryuna .hero-ryuna__feeBadge .price .num{
    font-size: clamp(72px, 4.6vw, 120px);  /* 0（数字） */
    line-height:1;
  }
  .lp-ryuna .hero-ryuna__feeBadge .price .yen{
    font-size: clamp(28px, 1.5vw, 42px);   /* 円（単位） */
    line-height:1.05;
    transform: translateY(-2px);           /* 見た目のベース合わせ（任意） */
  }
}


/* 2560px〜：入会費0円バッジを一回り拡大（外側＋内側まとめて） */
@media (min-width:2560px){
  /* 外側の丸（直径を拡大） */
  .lp-ryuna .hero-ryuna__feeBadge{
    background:
    radial-gradient( rgba(255,255,166,.78) );  /* 0.78 = 78% */
    --fee-d: clamp(220px, 13vw, 260px);   /* 好みで 200–300px 程度に調整 */
    inline-size: var(--fee-d);
    block-size:  var(--fee-d);
    border-width: 2px;                    /* 枠が細く見える場合の微調整（任意） */
  }

  /* 上の「入会費・年会費」 */
  .lp-ryuna .hero-ryuna__feeBadge > small{
    font-size: clamp(26px, 2.05vw, 34px);
    letter-spacing: .04em;
  }

  /* 下の「0円」：数字と単位を個別にスケール */
  .lp-ryuna .hero-ryuna__feeBadge .price{
    display:flex; align-items:flex-end; gap:.12em;
    line-height:1;                         /* 余白詰め */
  }
  .lp-ryuna .hero-ryuna__feeBadge .price .num{
    font-size: clamp(72px, 4.6vw, 120px);  /* 0（数字） */
    line-height:1;
  }
  .lp-ryuna .hero-ryuna__feeBadge .price .yen{
    font-size: clamp(28px, 1.5vw, 42px);   /* 円（単位） */
    line-height:1.05;
    transform: translateY(-2px);           /* 見た目のベース合わせ（任意） */
  }
}


/* 381～640px：ヒーローのテキストサイズを少し小さく */
@media screen and (min-width: 381px) and (max-width: 640px) {

  .lp-ryuna .hero-ryuna__kicker {
    font-size: clamp(20px, 4vw, 27px);
  }

  .lp-ryuna .hero-ryuna__lead {
    font-size: clamp(16px, 3.5vw, 22px);
  }
}






/* ---------------------- */
/* PC専用：セクション1.5 */
/* ---------------------- */
@media screen and (min-width:769px){

  
  /* パネル幅を変えたらここだけ直す */
  :root{
    --sec15-panel-w: 43.125vw; /* = .sec15__panel の幅 */
        /* Figmaの数値：43.125rem（≈690px）を上限にする */
    --sec15-text-max: 43.125rem;
  }

  .sec15{
    position: relative;
    padding: 5.208vw 0 6.25vw;           /* 上100 / 下120 */
    background: #fff;
    overflow: visible;
        --sec15-box-max: 36rem;   /* ← ここを 32rem / 40rem などに調整 */
    --sec15-box-pad: 0.75rem; /* 行頭が窮屈なら 1rem に */
  }

    /* セクション1.5全体に対して蝶アイコンを配置 */
  .sec15::before{
    content:"";
    position: absolute;

    /* 上方向：セクション上端から少し下（王冠より少し上〜同じくらいの高さ） */
    top: 6.8vw;          /* 2.5〜3.5vw の範囲で微調整してOK */

    /* 左右方向：タイトルより少し左寄り */
    left: 28%;           /* 30〜35% くらいで好みの位置に */

    transform: translateX(-50%);
    width: clamp(52px, 4.6vw, 76px);   /* 蝶の大きさ */
    aspect-ratio: 85 / 96;
    background: url("./assets/Butterfly.png") center / contain no-repeat;

    pointer-events: none;
    z-index: 2;          /* 後でタイトル＆パネルを前面にする */
  }

  /* タイトルとグレーパネルを前面にしておく（念のため） */
  .sec15__title,
  .sec15__panel{
    position: relative;
    z-index: 1;
  }


  /* 中央のグレーパネル（Figma: W≈979px H≈1156px の雰囲気） */
  .sec15__panel{
        position: relative;  
    /* 1440px で約 750px、1920px で最大 980px くらいの幅 */
    width: clamp(720px, 57vw, 980px);
    min-height: 46.375vw;               /* 1156 / 1920 */
    margin: 0 auto;
    background: #fff;                 /* お好みなら var(--ryuna-gray) に変更可 */
    border-radius: 0.8333vw;             /* 16px */
    padding: 3.125vw 2.4479vw;           /* 60 / 47 */
    /* box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.0417vw;                        /* 20 */
        padding-bottom: calc(1.5625vw + 12.7604vw + 0.8vw);
    /*           右下の余白  +  直径(245px)  + 少し余白 */
        padding-inline: max(2.4479vw, 24px);
  }

    /* グレーボックス下部の飾りライン＋お花 */
  .sec15__panel::after{
    content:"";
    position: absolute;
    left: 50%;
    bottom: clamp(8px, 1.2vw, 20px);        /* グレーボックスの底からの距離 */
    transform: translateX(-50%);

    /* 飾りの横幅（パネル幅に合わせてリサイズ） */
    width: min(100% - 48px, 640px);
    aspect-ratio: 875 / 226;               /* 画像の縦横比（875x226px 想定） */

    background: url("./assets/Rose.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 1;
  }


  .sec15__title{
    font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
    font-weight: 500;
    text-align: center;
    margin: 1.25vw 0 2.0833vw;           /* 上24 下40 */
    font-size: clamp(24px, 2.1875vw, 42px);  /* 38px基準 */
    line-height: 1.4;
    margin-bottom:6.25vw ;
  }

.sec15__title{
  --deco-w: 220px;
  --deco-h: 1.5px;        /* 1pxだと表示倍率で消えやすいので2px推奨 */
}
.sec15__title::after{
  content:"";
  display:block;
  width:var(--deco-w);
  height:var(--deco-h);
  margin:10px auto 0;
  background-color:var(--deco-c2);  /* ← これ */
  border-radius:999px;
}

  /* セクション1.5 タイトル色＆下線色をラベンダーに */
  .sec15__title{
    color: #9191cb;           /* タイトルの文字色 */
  }
  .sec15__title::after{
    background-color: #9191cb;/* 下線の色 */
  }

    /* 「私たちについて」の上に王冠アイコン */
  .sec15__title::before{
    content: "";
    display: block;
    width: clamp(60px, 4vw, 90px);      /* 横幅：お好みで調整 */
    height: clamp(20px, 2.5vw, 32px);   /* 高さ：お好みで調整 */
    margin: 0 auto 0.8rem;              /* 下に少し余白を作る */
    background: url("./assets/oukan.png") center / contain no-repeat;
  }

  .sec15__body{
    width: 100%;          /* パネルの内側いっぱいまで広げる */
    margin-inline: 0;     /* 中央寄せ用の余白を削除 */
    display: grid;
    place-items: center; /* 中央寄せ */
    text-align: center;
  }

    /* 内側ボックスでさらに幅を絞る */
  .sec15__box{
    width: 100%;          /* さらに制限を外す */
    padding-inline: clamp(16px, 2.2vw, 32px);
    /* グレーボックスの端と文字の間に少しだけ余白を残す */
    margin-inline: auto;                 /* まんなか */
    text-align: center;
      --trk: 0.02em;   /* 全体の字間（お好みで 0.015–0.04em） */
      --lh : 1.95;     /* 行間 */
  }

  .sec15__body p{
    font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
    font-size: clamp(12px, calc(12.333px + 0.5604vw), 24px);
    line-height: 2;                           /* Figma感のゆったり行間 */
      line-height: var(--lh);
  letter-spacing: -1.9px;          /* ベースの詰め／開き */
  font-kerning: normal;                /* 欧文のカーニングペア */
  font-feature-settings: "palt" 1,     /* 句読点などのプロポーショナル代替幅 */
                        "pkna" 1,      /* 仮名のプロポーショナル */
                        "kern" 1;      /* カーニング */
  text-rendering: optimizeLegibility;  /* レンダリング最適化（対応ブラウザ） */
  -webkit-font-smoothing: antialiased; /* 視認性向上（WebKit系） */
  }
  .sec15__body p + p{ margin-top: 1.2em; }
}

/* 769〜1200px：セクション1.5の縦方向の余白を少し詰める */
@media screen and (min-width:769px) and (max-width:1200px){

  .sec15{
    /* 上下の白余白を少しだけ減らす */
    padding-top: clamp(60px, 4.8vw, 80px);
    padding-bottom: clamp(80px, 5.8vw, 110px);
  }

  /* 「私たちについて」見出しの下のマージンを減らす */
  .sec15__title{
    margin-bottom: clamp(32px, 3.5vw, 52px);
  }

  /* グレーボックスの上パディングも少しだけ減らす */
  .sec15__panel{
    padding-top: clamp(32px, 3vw, 44px);
  }

    /* 1024付近ではバラ画像を少し小さめに */
  .sec15__panel::after{
    width: clamp(360px, 44vw, 520px);
    /* 1024px幅のとき ≒ 450px 前後になるイメージ */
  }
}


/* 1600px以上：セクション1.5 読みやすさアップ */
@media screen and (min-width:1600px){
   /* セクション全体の上余白を少し減らす */
  .sec15{
    padding-top: clamp(64px, 4vw, 80px);
  }

  /* タイトル下のマージンを詰める */
  .sec15__title{
    margin-bottom: clamp(32px, 3vw, 48px);
  }

  /* グレーボックス上のパディングも少しだけ減らす */
  .sec15__panel{
    padding-top: clamp(32px, 2.6vw, 44px);
  }

  /* グレーボックス自体を少しワイドに */
  .sec15__panel{
    width: min(64vw, 1200px);          /* 画面の約6割 or 最大1200px まで広げる */
  }

  /* 中のテキストボックスも制限をゆるめる */
  .sec15__body{
    width: 100%;
  }
  .sec15__box{
    width: 100%;
    padding-inline: clamp(32px, 3vw, 56px);  /* 端との余白だけ少し多めに */
  }

  /* 本文テキストをひと回り大きく */
  .sec15__body p{
    font-size: clamp(24px, 1.3vw, 28px);
    /* 1600px 時 → 24px
       1920px 前後 → 25〜26px
       もっと広い画面 → 最大 28px で頭打ち */
  }

    /* 蝶アイコンを大きく */
  .sec15::before{
    /* もともとの width を上書き */
    width: clamp(80px, 5vw, 120px);
    /* 1600px時 ≒ 80px、2560px前後で最大120pxくらい */
  }

  /* 下部のバラ＆ラインも大きく */
  .sec15__panel::after{
    /* パネルの幅に応じて拡大。最大を少し増やす */
    width: clamp(560px, 44vw, 860px);
    /* 1600px時 ≒ 704px、もっと広いモニターでは最大860pxまで */
  }
}



  
/* <!-- SPはこちらに書く --> */
/* ===================================
   SP（〜768px）：sec15 私たちについて
   =================================== */
@media (max-width: 768px){

  .sec15{
    position: relative;
    padding-block: clamp(60px, 12vw, 72px);
    background: #fff;
    overflow-x: clip; /* 横スク防止 */
    margin-bottom: 10px;
  }

      /* セクション1.5全体に対して蝶アイコンを配置 */
  .sec15::before{
    content:"";
    position: absolute;

    /* 上方向：セクション上端から少し下（王冠より少し上〜同じくらいの高さ） */
    top: 10.8vw;          /* 2.5〜3.5vw の範囲で微調整してOK */

    /* 左右方向：タイトルより少し左寄り */
    left: 14%;           /* 30〜35% くらいで好みの位置に */

    transform: translateX(-50%);
    width: clamp(40px, 4.6vw, 60px);   /* 蝶の大きさ */
    aspect-ratio: 85 / 96;
    background: url("./assets/Butterfly.png") center / contain no-repeat;

    pointer-events: none;
    z-index: 2;          /* 後でタイトル＆パネルを前面にする */
  }

  /* タイトル */
  .sec15__title{
    --accent: #8D93C6;            /* 淡いラベンダー */
    margin: 0 auto clamp(18px, 5vw, 28px);
    text-align: center;
    font-size: clamp(22px, 6.2vw, 28px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--accent);
  }
  .sec15__title::after{
    content:"";
    display:block;
    width: clamp(140px, 52vw, 280px);
    height: 2px;
    margin: clamp(8px, 2.4vw, 12px) auto 0;
    background: currentColor;     /* タイトル色＝線色 */
    opacity: .35;
    border-radius: 2px;
  }

      /* 「私たちについて」の上に王冠アイコン */
  .sec15__title::before{
    content: "";
    display: block;
    width: clamp(60px, 4vw, 90px);      /* 横幅：お好みで調整 */
    height: clamp(20px, 2.5vw, 32px);   /* 高さ：お好みで調整 */
    margin: 0 auto 0.8rem;              /* 下に少し余白を作る */
    background: url("./assets/oukan.png") center / contain no-repeat;
  }

  /* パネル（白いカード） */
  .sec15__panel{
    width: min(90vw, 700px);
    margin-inline: auto;
  }
  .sec15__body{
    background: #fff;
    border-radius: 14px;
    padding: clamp(22px, 6.5vw, 32px) clamp(18px, 6vw, 28px);
  }

  /* テキストブロック */
  .sec15__box{
    text-align: center;
  }
  .sec15__box p{
    margin: 0 0 clamp(14px, 4.8vw, 20px);
    font-size: clamp(12px, 4.4vw, 16px);
    line-height: 2.0;
    letter-spacing: -2.8px;
    color: #333;
  }
  .sec15__box p:last-child{ margin-bottom: 0; }

  /* 飾り（右下の花など）を使う場合だけ */
  .sec15__badge{
    position: absolute;
    right: min(4vw, 24px);
    bottom: min(2vw, 12px);
    width: clamp(92px, 32vw, 160px);
    pointer-events: none;
    user-select: none;
  }
  .sec15__badge img{
    display:block;
    width:100%;
    height:auto;
  }

    /* グレーボックス下部の飾りライン＋お花 */
  .sec15__panel::after{
    content:"";
    position: absolute;
    left: 30%;
    bottom: clamp(2px, 1.2vw, 8px);        /* グレーボックスの底からの距離 */
    transform: translateX(-30%);

    /* 飾りの横幅（パネル幅に合わせてリサイズ） */
    width: min(100% - 48px, 640px);
    aspect-ratio: 875 / 226;               /* 画像の縦横比（875x226px 想定） */

    background: url("./assets/Rose.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 1;
  }
}

@media (min-width:768px) and (max-width:1023px){
    .sec15{
    position: relative;
    padding-block: clamp(60px, 12vw, 72px);
    background: #fff;
    overflow-x: clip; /* 横スク防止 */
    margin-bottom: 80px;
  }

      /* セクション1.5全体に対して蝶アイコンを配置 */
  .sec15::before{
    content:"";
    position: absolute;

    /* 上方向：セクション上端から少し下（王冠より少し上〜同じくらいの高さ） */
    top: 7.8vw;          /* 2.5〜3.5vw の範囲で微調整してOK */

    /* 左右方向：タイトルより少し左寄り */
    left: 24%;           /* 30〜35% くらいで好みの位置に */

    transform: translateX(-50%);
    width: clamp(50px, 4.6vw, 70px);   /* 蝶の大きさ */
    aspect-ratio: 85 / 96;

    pointer-events: none;
    z-index: 2;          /* 後でタイトル＆パネルを前面にする */
  }

  /* タイトル */
  .sec15__title{
    --accent: #8D93C6;            /* 淡いラベンダー */
    margin: 0 auto clamp(18px, 5vw, 28px);
    text-align: center;
    font-size: clamp(22px, 6.2vw, 28px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--accent);
  }
  .sec15__title::after{
    content:"";
    display:block;
    width: clamp(140px, 52vw, 280px);
    height: 2px;
    margin: clamp(8px, 2.4vw, 12px) auto 0;
    background: currentColor;     /* タイトル色＝線色 */
    opacity: .35;
    border-radius: 2px;
  }

      /* 「私たちについて」の上に王冠アイコン */
  .sec15__title::before{
    content: "";
    display: block;
    width: clamp(60px, 4vw, 90px);      /* 横幅：お好みで調整 */
    height: clamp(20px, 2.5vw, 32px);   /* 高さ：お好みで調整 */
    margin: 0 auto 0.8rem;              /* 下に少し余白を作る */
  }

  /* パネル（白いカード） */
  .sec15__panel{
    width: min(90vw, 700px);
    margin-inline: auto;
  }
  .sec15__body{
    background: #fff;
    border-radius: 14px;
    padding: clamp(22px, 6.5vw, 32px) clamp(18px, 6vw, 28px);
  }

  /* テキストブロック */
  .sec15__box{
    text-align: center;
  }
  .sec15__box p{
    margin: 0 0 clamp(14px, 4.8vw, 20px);
    font-size: clamp(16px, 4.4vw, 18px);
    line-height: 2.0;
    letter-spacing: -2px;
    color: #333;
  }
  .sec15__box p:last-child{ margin-bottom: 0; }

  /* 飾り（右下の花など）を使う場合だけ */
  .sec15__badge{
    position: absolute;
    right: min(4vw, 24px);
    bottom: min(2vw, 12px);
    width: clamp(92px, 32vw, 160px);
    pointer-events: none;
    user-select: none;
  }
  .sec15__badge img{
    display:block;
    width:100%;
    height:auto;
  }

    /* グレーボックス下部の飾りライン＋お花 */
  .sec15__panel::after{
    content:"";
    position: absolute;
    left: 30%;
    bottom: -68px;  /* -5〜-20pxぐらいでお好み調整 */       /* グレーボックスの底からの距離 */
    transform: translateX(-35%);

    /* 飾りの横幅（パネル幅に合わせてリサイズ） */
    width: min(100% - 48px, 640px);
    aspect-ratio: 875 / 226;               /* 画像の縦横比（875x226px 想定） */

    pointer-events: none;
    z-index: 1;
  }
}



/* =========================================================
   Section 2–3（PC基準・等比縮小）：
   上段=画像/右テキスト、下段=テキスト/右画像
   ========================================================= */
@media screen and (min-width:769px){
  /* 共通トークン：ここを変えると全体が揃って動きます */
  .lp-ryuna .aboutx{
    --about-gap  : clamp(28px, 3.5vw, 72px);  /* 画像↔テキストの間隔 */
    --about-safe : clamp(8px, 1vw, 16px);     /* テキスト側に足す内側余白 */
    --about-visW: 30.46875vw; 
    --about-textW : clamp(520px, 42vw, 760px);    /* テキスト列の幅（上下共通） */
  --off-x:16px;         /* 左右のずらし量 */
  --off-y:16px;         /* 下方向のずらし量 */
  --about-radius:10px;  /* 角丸を画像と共有 */
    padding: clamp(56px, 7vw, 120px) 0;
    background:#fff;
  }

  /* インナー：中央寄せ。ガターは全体の共通ルールがあればそれに委ねてOK */
  .lp-ryuna .aboutx__inner{
    width: 100%;
    max-width: calc(var(--about-visW) + var(--about-textW) + var(--about-gap) + 2 * var(--section-gutter, 72px));
    margin: 0 auto;
    display: grid;
    row-gap: clamp(56px, 6vw, 120px);
  }

  /* 上段：画像列 → テキスト列（幅はトークンで固定） */
  .lp-ryuna .aboutx__block{
    display: grid;
    grid-template-columns: var(--about-visW) var(--about-textW);
    column-gap: var(--about-gap);
    align-items: start;
  }

  /* 旧スタイルの余分なマージン/位置指定が残っている場合に備えたリセット */
  .lp-ryuna .aboutx__visual,
  .lp-ryuna .aboutx__text{
    margin: 0;               /* 被りの原因になりがちな余白をリセット */
    position: static;        /* 絶対配置が残っていても無効化 */
    max-width: 100%;
  }

  /* 下段は左右反転：テキスト列 → 画像列（同じ幅を使用） */
  .lp-ryuna .aboutx__block--b{
    grid-template-columns: var(--about-textW) var(--about-visW);
  }

/* ===== AboutX タイトル：単色パープル下線（確実に表示） ===== */
.lp-ryuna .aboutx__title{
  position: relative;                 /* ← 疑似要素の基準 */
  display: inline-block;              /* タイトル幅ぶんで扱う */

  margin: 0 0 clamp(8px, .9vw, 16px);
  font-size: clamp(28px, 1.5vw, 46px);
  font-weight: 500;
  line-height: 1.35;
  font-family: "Noto Sans JP" ;
  color: #9191cb;

  /* 調整用トークン */
  --u-line-w: 600px;                  /* 線の横幅 */
  --u-line-h: 2px;                    /* 線の太さ */
  --u-gap: 10px;                      /* 文字との間隔 */
  --u-color: #9191cb;                 /* 線の色（単色） */

  /* 下線の分だけ下に余白を確保（はみ出し防止） */
  padding-bottom: calc(var(--u-gap) + var(--u-line-h));
}

.lp-ryuna .aboutx__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;                          /* padding-bottom で確保した位置に置く */
  width: var(--u-line-w);
  height: var(--u-line-h);
  border-radius: 999px;
  background: var(--u-color);
}


  .lp-ryuna .aboutx__text{
    max-width: var(--about-textW);  /* 念のため */
    color: #222;
        max-width: 36rem;        /* テキスト幅を細めに固定して、Figmaっぽい段組みに */
  }
  .lp-ryuna .aboutx__text p{
    font-size: clamp(13px, 1.18vw, 24px);
    font-family: "Noto Sans JP" ;
    line-height: 2;

  }
  .aboutx__text p + p{
    margin-top: 1.6em;       /* 段落同士の余白 */
  }
}

/* 1440px 前後：about セクションの画像を大きめに */
@media screen and (min-width:1366px){

  /* 画像列をワイドに／テキスト列はそのぶん少しだけ細く */
  .lp-ryuna .aboutx{
    --about-visW : clamp(480px, 36vw, 600px);   /* ←画像の見た目サイズ */
    --about-textW: clamp(520px, 42vw, 720px);   /* ←テキスト列の幅 */
    --about-gap  : clamp(28px, 3vw, 48px);      /* 列間のすき間（任意） */
  }

  /* 変数で幅指定していない場合に備えて直接も上書き */
  .aboutx__visual{ width: var(--about-visW); }
  .aboutx__block{ column-gap: var(--about-gap); grid-column-gap: var(--about-gap); }

  /* 画像はフィギュア幅いっぱいで表示 */
  .aboutx__visual img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
}



/* 769〜1200px：about セクションの画像を 1024 でも大きめに見せる */
@media screen and (min-width:769px) and (max-width:1200px){
  .lp-ryuna .aboutx__title{
    font-size: 20px;
  }

  .lp-ryuna .aboutx{
    /* 画像列を少しワイドに（1440 の見た目に近づける） */
    --about-visW : clamp(380px, 40vw, 460px);

    /* その分テキスト列を少しだけ細くする */
    --about-textW: clamp(460px, 40vw, 640px);

    /* 余裕がなければ画像とテキストの間のすき間も少しだけ詰める */
    --about-gap  : clamp(24px, 3vw, 40px);
  }

  .lp-ryuna .aboutx__title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;                          /* padding-bottom で確保した位置に置く */
  width: 450px;
}
}


/* 1600px以上：about セクションを1440px の見た目に寄せる */
@media screen and (min-width:1600px){

  .lp-ryuna .aboutx{
    /* 写真は今のサイズ感を維持 */
    --about-visW : clamp(560px, 34vw, 700px);

    /* テキスト列は広がりすぎないように少し絞る */
    --about-textW: 640px;   /* 必要なら 600〜680px の間で微調整OK */
    --about-gap  : 56px;    /* 画像との間隔（広すぎたら 48px くらいに） */
  }

  /* テキストブロックの横幅も少しだけ絞る */
  .lp-ryuna .aboutx__text{
    max-width: 40rem;       /* ≒640px。行の長さを1440時に近づける */
  }

  /* 見出しと本文の間を少し詰める */
  .lp-ryuna .aboutx__title{
    margin-bottom: 0.9em;
  }

  /* 本文の文字サイズ＆行間を1440に近い感じで固定 */
  .lp-ryuna .aboutx__text p{
    font-size: 20px;        /* 1440のときより少し大きい程度で固定 */
    line-height: 1.9;       /* 2 → 1.9 にして、ユルさを少しだけ締める */
    letter-spacing: 0.03em;
  }

  /* 段落間の余白を揃えてスッキリ見せる */
  .lp-ryuna .aboutx__text p + p{
    margin-top: 1.6em;
  }
}






/* <!-- SPはこちらに書く --> */
/* ===== SP（〜768px）: Section 2–3 aboutx ===== */
@media (max-width: 768px){

  .lp-ryuna .aboutx{
    padding-block: clamp(32px, 10vw, 60px);
    background: #fff;
    overflow-x: clip;
  }
  .lp-ryuna .aboutx__inner{
    width: min(92vw, 720px);
    margin-inline: auto;
  }

  /* 1カラム：見出し → 画像 → 本文 */
  .lp-ryuna .aboutx__block{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "visual"
      "copy";
    gap: clamp(14px, 4.6vw, 22px);
    align-items: start;
  }

  /* 旧アクセントがあれば無効化 */
  .lp-ryuna .aboutx__visual::before{
    content: none !important;
  }

  /* 見出し */
  .lp-ryuna .aboutx__title{
    grid-area: title;
    --accent: #8D93C6;
    margin: 0;
    margin-top: 30px;
    text-align: center;
    font-size: clamp(20px, 5.6vw, 26px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
    color: var(--accent);
  }
  
  .lp-ryuna .aboutx__title::after{
    content: "";
    display: block;
     width: min(100%, 300px);   /* ★画面幅より大きくならないように変更 */
    height: 2px;
    margin-top: clamp(6px, 1.8vw, 10px);
    background: currentColor;
    opacity: .35;
    border-radius: 2px;
  }

  /* 画像（PC方式：画像=前面／同寸の紫ボックスを背面に敷く） */
  .lp-ryuna .aboutx__visual{
    grid-area: visual;
    --radius: 12px;
    --box: rgba(141,147,198,.22);
    --dx: clamp(8px, 2.4vw, 12px);
    --dy: clamp(8px, 2.4vw, 12px);
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;       /* CLS対策 */
    border-radius: var(--radius);
    overflow: visible;
    margin: 0;
  }

  /* 本文 */
  .lp-ryuna .aboutx__text{
    grid-area: copy;      /* テキスト全体を1つのグリッド要素に */
    display: contents;     /* h2 と p を flex アイテムにする */
  }

  .lp-ryuna .aboutx__text p{
    font-family: "Noto Sans JP" ;
    margin: 0;
    text-align: left;
    font-size: clamp(15px, 2.4vw, 16px);
    color: #333;
    font-weight: 500;
    letter-spacing: -0.05em;
  }

  .lp-ryuna .aboutx__text p + p{
    margin-top: clamp(18px, 3.6vw, 24px);
  }
}

@media (max-width: 380px){
    .lp-ryuna .aboutx__title::after{
    content: "";
    display: block;
     width: min(100%, 340px);   /* ★画面幅より大きくならないように変更 */
  }
}

@media (max-width: 430px){
    .lp-ryuna .aboutx__title::after{
    content: "";
    display: block;
     width: min(100%, 380px);   /* ★画面幅より大きくならないように変更 */
  }
}

@media (min-width:768px) and (max-width:1023px){
    .lp-ryuna .aboutx__title::after{
    content: "";
    display: block;
     width: min(100%, 700px);   /* ★画面幅より大きくならないように変更 */
  }

    .lp-ryuna .aboutx__text p{
    font-size: 17px;
  }

    /* Block A ↔ Block B の間（セクション内のスキマ）を詰める */
  .lp-ryuna .aboutx__inner{
    /* 元は row-gap: clamp(56px, 6vw, 120px); なのでかなり広い */
    row-gap: clamp(20px, 4vw, 32px);
  }

  /* 1ブロック内の「見出し↔写真↔テキスト」のスキマ */
  .lp-ryuna .aboutx__block{
    /* マイナスは効かないので、小さめの正の値にする */
        gap: 0;
    row-gap: 0;
  }

  /* それでもまだ広く感じたら、下の block だけさらに上に寄せる */
  .lp-ryuna .aboutx__block--b{
    margin-top: -8px;   /* -4〜-16px くらいでお好み調整OK */
  }
}


/* ==============================================
   Section 3.5：フルブリード・ビジュアル （※ラフ案ではあったが非コメに）
   他セクションのガター（padding-inline）を無効化して
   画面幅いっぱい（100vw）で中央に敷く
   ============================================== */
/* PC 共通 */
/* .sec35-full{
  margin-block: clamp(40px, 6vw, 80px);
  padding: 0 !important;            
  max-width: none;                  
} */

/* 画像コンテナを“画面幅ぴったり”で中央寄せ */
/* .sec35-full__visual{
  display: block;
  inline-size: 100vw;               
  margin-inline: calc(50% - 50vw);   
  aspect-ratio: 1920 / 533;
  overflow: hidden;
  background: #000;
} */

/* 新しいビューポート単位が使える環境ではこちらを優先（スクロールバー差を解消） */
/* @supports (width: 100dvw){
  .sec35-full__visual{
    inline-size: 100dvw;
    margin-inline: calc(50% - 50dvw);
  }
} */

/* 画像は必ず全域を埋める */
/* .sec35-full__visual img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* ====== レスポンシブ ====== */
/* @media screen and (max-width: 768px){
  .sec35-full{
    margin-block: clamp(40px, 10vw, 72px);
  }
  .sec35-full__visual{ */
    /* SP は少し背を高く（見栄えの良い 16:9 に） */
    /* aspect-ratio: 16 / 9;
  }
} */

/* ====== （任意）ダーク境界のにじみ防止 ======
   ブラウザの小数ピクセルで左右に薄い線が出る場合の微調整 */
/* @supports (outline: 1px solid transparent){
  .sec35-full__visual{ outline: 1px solid transparent; }
} */


/* <!-- SPはこちらに書く --> */



/* ---------------------- */
/* ===== Section 4: 会員特典（中央揃え） ===== */
/* ---------------------- */
/* ===== 会員特典（スクショ再現） ===== */
.benefits{ position:relative; }
.benefits__head{ text-align:center; margin-block: clamp(24px,3.5vw,40px) clamp(8px,1.8vw,20px); }
.benefits__title{
  font-family: "Shippori Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
  font-weight: 600; font-size: clamp(26px,2.5vw,32px); color:#333;
  margin: 0 0 clamp(6px,.8vw,10px);
}

/* タイトル上の王冠画像 */
.benefits__title::before{
  content: "";
  display: block;
  width: clamp(60px, 4vw, 90px);      /* 王冠の横幅：お好みで調整OK */
  height: clamp(20px, 2.5vw, 32px);   /* 高さ */
  margin: 0 auto 0.8rem;              /* 下に少し余白 → 見出しとの間 */

  background: url("./assets/oukan.png") center / contain no-repeat;
}

/* 今だけ限定（左右のアーム付き） */
.benefits__limited{
  margin: 60px 0 clamp(5px,1.6vw,8px);
  color:#333; 
  font-weight:800; font-size: clamp(15px,1.3vw,22px);
}
.benefits__limited .arm{ color:#333; }

/* 紫のピル */
.benefits__pill{
  display:inline-block;
  margin: 0 auto clamp(18px,2.6vw,28px);
  padding: clamp(10px, 1.5vw, 16px) clamp(40px, 6vw, 72px);
  border-radius: 9999px;
  background:
    linear-gradient(180deg, #898fc5 0%, #8a91cf 100%);
  color:#fff; font-weight:800; letter-spacing:.02em;
  width: fit-content;
  font-size: clamp(16px, 1.5vw, 31px);
  font-family: "Noto Sans JP" ;
}
.benefits__pill strong{
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 31px);
}

/* 100Pだけ少し大きく＋赤い下線 */
.benefits__pill strong span{
  position: relative;
  display: inline-block;
  color: #ffffa6;      /* 既存の黄色 */
  font-size: 1.25em;   /* strongより15％だけ大きく */
}

.benefits__pill strong span::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.20em;      /* 文字からちょっと離した位置に線 */
  height: 1px;
  background-color: #ff4b6a;  /* 赤系のライン色（お好みで変更OK） */
  border-radius: 999px;
}


/* 帯背景（独立レイヤ）— 上へ延長してピルの高さまでカバー */
/* セクション全体に独立スタッキングコンテキストを作る */
.benefits{
  position: relative;
  isolation: isolate; /* 子のz-indexが祖先を飛び越えない */
}

/* ヘッダー（タイトル／ピル）を最前面に固定 */
.benefits__head{
  position: relative;
  z-index: 2;         /* ← これで常に前面 */
}

/* 帯はヘッダーより下に。背景はさらに下へ */
.benefits__band{
  font-family: "Noto Sans JP" ;
  position: relative;
  z-index: 0;
  overflow: visible;  /* 上方向に背景を伸ばすため */
  padding-bottom: clamp(26px, 7vw, 66px);  /* ちょい多め→好みで調整可 */
}

/* inset:0 は使わず、上へ延長した疑似を“背面”へ */
.benefits__band::before{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* ピルの上端までの延長量（必要なら微調整） */
  --extend-top: clamp(70px, 7vw, 70px);
  top: calc(-1 * var(--extend-top));
  bottom: 0;
  width: 100vw;
  z-index: -1;        /* ← 帯本体より背面 */
  pointer-events: none;
  border-radius: 0;
  background:
    linear-gradient(180deg, #ECE8F2 0%, #D9D4E6 100%);
}

/* 端末差異が気になる場合だけ */
@supports (width: 100svw){
  .benefits__band::before{ width: 100svw; }
}


/* 見出し・説明 */
.benefits__subtitle{
  text-align:center; color:#f184ac; font-weight:600;
  font-size: clamp(16px,2vw,38px); margin: 0;
}
.benefits__desc{
  text-align:center; color:#666; font-size: clamp(14px,1.2vw,18px);
  margin: clamp(6px,.9vw,10px) 0 clamp(52px,2vw,68px);
}

/* 3カード */
.benefits__cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap: clamp(12px,2vw,24px);
    grid-template-columns: repeat(3, clamp(220px, 21vw, 380px)); /* ←列幅を上限付きに */
  justify-content: center;  /* 余白は中央に集める */
}
.bcard{
  position:relative; background:#fff; border-radius: 18px;
  padding: clamp(18px,2.4vw,24px) clamp(12px,1.8vw,18px);
  text-align:center;
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* ★ 縦方向をしっかりめに（140〜200 → 180〜260くらいのイメージ） */
  min-block-size: clamp(180px, 22vw, 260px);

  /* ★ 上下パディングも増やして“箱感”を出す */
  padding-block: clamp(34px, 3vw, 44px) clamp(24px, 2.8vw, 32px);
  padding-inline: clamp(18px, 2.2vw, 26px);
}
.bcard__badge{
  font-family: "Noto Sans JP" ;
  position:absolute;
  left:50%;
  top:0;
  transform: translate(-50%, -50%);
  /* 丸を少し大きめに＆中の数字も見やすく */
  width: clamp(58px, 3.2vw, 68px);
  height: clamp(58px, 3.2vw, 68px);
  border-radius:50%;
  background:#8D93C6;
  color:#fff;
  font-weight:500;
  font-size: clamp(40px, 1.6vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
    z-index: 1;
}
.bcard__kicker{ color:#7c7c7c; font-weight:700; margin: clamp(4px,.7vw,8px) 0; font-size: clamp(13px, 1.25vw, 24px);}
.bcard__main{ margin: clamp(4px,.7vw,8px) 0 0; color:#333; font-weight:700; line-height:1.5;  font-size: clamp(14px, 1.5vw, 26px); }
.bcard__main em{ font-style:normal; color:#E11E63; font-weight:800;   font-size: clamp(28px, 3vw, 51px); }

/* === Section4 CTA：ヒーロー風（白丸▶＋内側白枠） === */
.benefits__ctaWrap{
  display:flex; justify-content:center; align-items:center;
  margin-top: clamp(50px, 2.2vw, 88px);
}

.benefits .btn-promo{
  /* 既存.btn-promoの見た目を上書きして“ヒーロー風”に */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0;
  inline-size: min(92vw, 480px);            /* 幅可変 */
  block-size: clamp(48px, 5.36vw, 103px);   /* 高さ可変 */
  padding-inline: clamp(16px, 1.4vw, 22px);
  border-radius: 999px;
  gap: clamp(10px, 1vw, 14px);
  color: #fff; text-decoration: none; font-weight: 400;
  background: #f184ac;                   /* ベース（必要ならグラデに変更OK） */
  overflow: hidden;                          /* 角丸からはみ出さない */
  --icon: clamp(28px, 2.1vw, 36px);         /* 右の白丸サイズ */
  padding-right: calc(var(--icon) + clamp(12px, 1vw, 18px)); /* テキスト中央維持のため右だけ広め */

  /* 既存の.btn-promoで付けていた白丸/▶などを無効化（競合回避） */
  box-shadow: none;
}
.benefits .btn-promo::after{ content: none !important; }   /* 既存の白丸擬似を消す */
.benefits .btn-promo::before{
  /* 内側の白い枠線 */
  content:"";
  position:absolute;
  inset: clamp(6px, .55vw, 12px);
  border-radius: inherit;
  border: clamp(1px, .1vw, 2px) solid rgba(255,255,255,.95);
  pointer-events:none;
}

/* ラベルのタイポ（ヒーロー準拠） */
.benefits .btn-promo .cta__label4{
    font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1; letter-spacing: .03em;
}

/* 右の白丸アイコン */
.benefits .btn-promo .cta__icon{
  position: absolute;
  right: clamp(30px, .9vw, 36px);
  top: 50%; transform: translateY(-50%);
  width: var(--icon); height: var(--icon);
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}
/* 白丸の中の ▶（三角） */
.benefits .btn-promo .cta__icon::before{
  content:"";
  position:absolute; left:50%; top:50%;
  transform: translate(-35%, -50%);         /* 少し右寄せで“再生ボタン”風 */
  width:0; height:0;
  border-left: clamp(9px, .7vw, 12px) solid #f184ac;  /* 三角色＝ボタン色 */
  border-top:  clamp(6px, .5vw, 8px) solid transparent;
  border-bottom: clamp(6px, .5vw, 8px) solid transparent;
}

/* ふるまい */
.benefits .btn-promo:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.benefits .btn-promo:active{
  transform: translateY(0);
  opacity:.9;
}

/* 幅ごとの微調整 */
@media (min-width: 769px){
  .benefits .btn-promo{ inline-size: clamp(240px, 23vw, 480px); }
}

/* このCTAバリアントでは既存の::after白丸を無効化 */
.benefits__ctaWrap .btn-promo::after{ content: none !important; }

/* 変数と右側余白（.benefits スコープ外でも効くように） */
.benefits__ctaWrap .btn-promo{
  position: relative;
  --icon: clamp(28px, 2.1vw, 36px);
  padding-right: calc(var(--icon) + clamp(12px, 1vw, 18px));
}

/* 白丸アイコン（cta__icon4 を確実に当てる） */
.benefits__ctaWrap .btn-promo .cta__icon4{
  position: absolute;
  right: clamp(30px, .9vw, 36px);
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon);
  height: var(--icon);
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}

/* 中の ▶ 三角 */
.benefits__ctaWrap .btn-promo .cta__icon4::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-35%, -50%); /* 少し右寄せで“再生”風 */
  width: 0; height: 0;
  border-left: clamp(9px, .7vw, 12px) solid #f184ac;
  border-top:  clamp(6px, .5vw, 8px) solid transparent;
  border-bottom: clamp(6px, .5vw, 8px) solid transparent;
}

/* 1024px帯だけもう少し右へ寄せる */
@media (min-width: 1000px) and (max-width: 1060px){
  .benefits__ctaWrap .btn-promo .cta__icon4{ right: 15px; }
  .benefits__ctaWrap .btn-promo{
    padding-right: calc(var(--icon) + 8px);
  }
  .benefits__ctaWrap .btn-promo .cta__icon4::before{
    transform: translate(-32%, -50%);
  }
}


/* 1024px 前後（PC中サイズ）の丸バッジを少しだけ小さくする */
@media screen and (min-width: 769px) and (max-width: 1279px){

  .lp-ryuna .bcard__badge{
    /* 丸のサイズを ひと回り小さく */
    width: 42px;
    height: 42px;

    /* 中の数字も少し小さめにしてバランスを取る */
    font-size: 24px;
  }
}


/* 1600px 以上：3カードとCTAボタンの間に余白を増やす */
@media screen and (min-width:1600px){

  .lp-ryuna .benefits__cards{
    margin-bottom: clamp(50px, 4vw, 92px);
    /* 1600pxなら約64pxくらい、もっと広くしたければ 4vw→4.5vw などに調整 */
  }
/* 1600px以上：3つのカードの高さをもう少し高くする */
    .lp-ryuna .bcard{
    /* 最低高さをアップ（だいたい＋40〜50pxくらい） */
    min-block-size: clamp(300px, 19vw, 380px);

    /* 中身の上下の余白も少し増やして、縦長感を出す */
    padding-block: clamp(40px, 3.6vw, 52px) clamp(26px, 3vw, 36px);
  }
}


/* spはここに書く */
/* ===== SP: 会員特典の3カード（文字組み・余白を調整） ===== */
@media (max-width: 768px){
  .benefits__inner{
    margin-top: 60px;
  }

  .benefits__title{
    font-weight: 500;
  }

    .lp-ryuna .benefits__limited{
    /* 上だけグッと詰める（数字はお好みで調整） */
    margin: 32px 0 clamp(5px, 3vw, 10px);
    /* もっと詰めたければ 8px とかでもOK */
    font-size: 16px;
  }

  .benefits__subtitle{
    font-size: 24px;
  }

  /* リストは縦1列（前のパッチが入っていればそのままでOK） */
  .lp-ryuna .benefits__cards{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(25px, 4.5vw, 40px);
    list-style: none;
    width: min(70vw, 480px);   /* 82vw → 70vw / 560px → 480px などに変更 */
    margin: clamp(30px, 4vw, 40px) auto 0;
    padding: 0;
  }

  /* カード：中央寄せ＋角丸カード、バッジ分の天マージンを確保 */
  .lp-ryuna .benefits__cards .bcard{
    --badge: clamp(38px, 10vw, 50px);                /* 丸バッジ直径 */
    text-align: center;
    background: #fff;
    border-radius: 16px;
    border: 2px solid rgba(141,147,198,.18);
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin: 0;
    padding: clamp(18px, 5.2vw, 24px) clamp(14px, 4vw, 18px);
    /* バッジが半分かぶる分だけ上に余白を追加 */
    padding-top: calc(var(--badge) / 2 + clamp(14px, 4vw, 18px));
    min-height: clamp(160px, 52vw, 220px);
  }

  /* 上の丸い番号バッジ（カード中央上に半分重ねる） */
  .lp-ryuna .bcard__badge{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);                 /* 半分かぶせる */
    width: var(--badge);
    height: var(--badge);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #8D93C6;
    color: #fff;
    font-weight: 700;
    font-size: clamp(18px, 4.4vw, 24px);
    line-height: 1;
    z-index: 1;
  }

  /* 小さな前置き（グレーで控えめ） */
  .lp-ryuna .bcard__kicker{
    margin: clamp(6px, 2vw, 10px) 0 clamp(6px, 2vw, 10px);
    font-size: clamp(12px, 3.6vw, 13px);
    line-height: 1.6;
    color: #6B7280;
    letter-spacing: .06em;
  }

  /* 本文：上段（太字）＋ 下段（割引の大文字） */
  .lp-ryuna .bcard__main{
    margin: 0;
    line-height: 1.55;
    color: #222;
    font-size: clamp(16px, 4.4vw, 17px);             /* strongの基準 */
  }
  .lp-ryuna .bcard__main strong{
    display: inline-block;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: clamp(6px, 2vw, 10px);
  }
  .lp-ryuna .bcard__main em{
    display: block;
    font-style: normal;
    font-weight: 800;
    font-size: clamp(30px, 7.5vw, 42px);             /* 「10%OFF」 */
    line-height: 1;
    color: #E11E63;                   /* 既存のブランドピンクがあれば置き換わります */
    letter-spacing: .02em;
  }

  /* SP用のCTA */
  .lp-ryuna .benefits__ctaWrap{
    box-sizing: border-box;
    width: 100%;                             /* 親幅を基準に */
    max-width: 280px;                        /* ボタンの最大幅だけ制限 */
    margin: clamp(30px, 5vw, 54px) auto      /* ← 左右 auto で中央寄せ */
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }
  /* CTAテキスト：位置＆文字サイズ */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4{
    margin-left: 9px;
    font-size: clamp(16px, 4.8vw, 22px);  /* 好みで 16〜22px に調整OK */
  }

  /* 右の白丸（ヒーローCTAとほぼ同じサイズ感） */
.lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4{
  right: clamp(12px, 3.6vw, 20px);   /* 右端からのすき間 */
  width:  clamp(28px, 8.6vw, 36px);  /* 白丸の直径 */
  height: clamp(28px, 8.6vw, 36px);
}

/* 白丸内の ▶（アイコンサイズにだいたい比例する値） */
.lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4::before{
  border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;  /* 底辺（▶の横幅） */
  border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
  border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
}
}

@media (min-width:768px) and (max-width:1023px){
    .lp-ryuna p.benefits__pill > br.sp-only{
    display: none !important;
  }

  /* 紫のピル */
.benefits__pill{
  display:inline-block;
  margin: 0 auto clamp(18px,2.6vw,28px);
  padding: clamp(10px, 1.5vw, 16px) clamp(40px, 6vw, 72px);
  border-radius: 9999px;
  background:
    linear-gradient(180deg, #898fc5 0%, #8a91cf 100%);
  color:#fff; font-weight:800; letter-spacing:.02em;
  width: fit-content;
  font-size: clamp(18px, 1.5vw, 31px);
  font-family: "Noto Sans JP" ;
}

      /* 小さな前置き（グレーで控えめ） */
  .lp-ryuna .bcard__kicker{
    font-size: clamp(14px, 3.6vw, 15px);
  }

  /* 本文：上段（太字）＋ 下段（割引の大文字） */
  .lp-ryuna .bcard__main{
    font-size: clamp(18px, 4.4vw, 19px);             /* strongの基準 */
  }

  .lp-ryuna .bcard__main em{
    font-size: clamp(36px, 7.5vw, 50px);             /* 「10%OFF」 */
  }

      /* SP用のCTA */
  .lp-ryuna .benefits__ctaWrap{
    box-sizing: border-box;
    width: 100%;                             /* 親幅を基準に */
    max-width: 580px;                        /* ボタンの最大幅だけ制限 */
    margin: clamp(60px, 8vw, 90px) auto
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

    /* ボタン自体の上下の高さをアップ */
  .lp-ryuna .benefits__ctaWrap .btn-promo{
    /* 上下 / 左右 の順で指定 */
    padding: clamp(26px, 5vw, 32px) clamp(26px, 7vw, 32px);
    /* もっとふかふかにしたければ、16→18〜20px にしてOK */
  }
  /* CTAテキスト：位置＆文字サイズ */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4{
    margin-left: -20px;
    font-size: clamp(22px, 4.8vw, 26px);  /* 好みで 16〜22px に調整OK */
  }
    /* 右の白丸（ヒーローCTAとほぼ同じサイズ感） */
.lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4{
  right: clamp(10px, 3.6vw, 18px);   /* 右端からのすき間 */
  width:  clamp(20px, 8.6vw, 30px);  /* 白丸の直径 */
  height: clamp(20px, 8.6vw, 30px);
}

.benefits .btn-promo{
  /* 既存.btn-promoの見た目を上書きして“ヒーロー風”に */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0;
  inline-size: min(92vw, 480px);            /* 幅可変 */
  block-size: clamp(48px, 5.36vw, 103px);   /* 高さ可変 */
  padding-inline: clamp(16px, 1.4vw, 22px);
  border-radius: 999px;
  gap: clamp(10px, 1vw, 14px);
  color: #fff; text-decoration: none; font-weight: 400;
  background: #f184ac;                   /* ベース（必要ならグラデに変更OK） */
  overflow: hidden;                          /* 角丸からはみ出さない */
  --icon: clamp(28px, 2.1vw, 36px);         /* 右の白丸サイズ */
  padding-right: calc(var(--icon) + clamp(12px, 1vw, 18px)); /* テキスト中央維持のため右だけ広め */
}
}

@media (max-width: 430px){
    /* 小さな前置き（グレーで控えめ） */
  .lp-ryuna .bcard__kicker{
    font-size: clamp(14px, 3.6vw, 15px);
  }

  /* 本文：上段（太字）＋ 下段（割引の大文字） */
  .lp-ryuna .bcard__main{
    font-size: clamp(18px, 4.4vw, 19px);             /* strongの基準 */
  }

  .lp-ryuna .bcard__main em{
    font-size: clamp(36px, 7.5vw, 50px);             /* 「10%OFF」 */
  }

      /* SP用のCTA */
  .lp-ryuna .benefits__ctaWrap{
    box-sizing: border-box;
    width: 100%;                             /* 親幅を基準に */
    max-width: 350px;                        /* ボタンの最大幅だけ制限 */
    margin: clamp(40px, 5vw, 54px) auto      /* ← 左右 auto で中央寄せ */
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }
  /* CTAテキスト：位置＆文字サイズ */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4{
    font-size: clamp(16px, 4.8vw, 22px);  /* 好みで 16〜22px に調整OK */
  }
    /* 右の白丸（ヒーローCTAとほぼ同じサイズ感） */
.lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4{
  right: clamp(10px, 3.6vw, 18px);   /* 右端からのすき間 */
  width:  clamp(16px, 8.6vw, 26px);  /* 白丸の直径 */
  height: clamp(16px, 8.6vw, 26px);
}

/* 白丸内の ▶（アイコンサイズにだいたい比例する値） */
.lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4::before{
  border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;  /* 底辺（▶の横幅） */
  border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
  border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
}
}

@media (max-width: 380px){
    /* 小さな前置き（グレーで控えめ） */
  .lp-ryuna .bcard__kicker{
    font-size: clamp(13px, 3.6vw, 14px);
  }

  /* 本文：上段（太字）＋ 下段（割引の大文字） */
  .lp-ryuna .bcard__main{
    font-size: clamp(17px, 4.4vw, 18px);             /* strongの基準 */
  }

  .lp-ryuna .bcard__main em{
    font-size: clamp(34px, 7.5vw, 46px);             /* 「10%OFF」 */
  }

    /* SP用のCTA */
  .lp-ryuna .benefits__ctaWrap{
    box-sizing: border-box;
    width: 100%;                             /* 親幅を基準に */
    max-width: 300px;                        /* ボタンの最大幅だけ制限 */
    margin: clamp(35px, 5vw, 54px) auto      /* ← 左右 auto で中央寄せ */
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }
  /* CTAテキスト：位置＆文字サイズ */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4{
    font-size: clamp(16px, 4.8vw, 22px);  /* 好みで 16〜22px に調整OK */
  }
    /* 右の白丸（ヒーローCTAとほぼ同じサイズ感） */
.lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4{
  right: clamp(10px, 3.6vw, 18px);   /* 右端からのすき間 */
  width:  clamp(14px, 8.6vw, 24px);  /* 白丸の直径 */
  height: clamp(14px, 8.6vw, 24px);
}

/* 白丸内の ▶（アイコンサイズにだいたい比例する値） */
.lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4::before{
  border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;  /* 底辺（▶の横幅） */
  border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
  border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
}
}

@media (max-width: 330px){
    /* SP用のCTA */
  .lp-ryuna .benefits__ctaWrap{
    box-sizing: border-box;
    width: 100%;                             /* 親幅を基準に */
    max-width: 280px;                        /* ボタンの最大幅だけ制限 */
    margin: clamp(30px, 5vw, 54px) auto      /* ← 左右 auto で中央寄せ */
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }
  /* CTAテキスト：位置＆文字サイズ */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4{
    margin-left: 9px;
    font-size: clamp(16px, 4.8vw, 22px);  /* 好みで 16〜22px に調整OK */
  }

  /* 右の白丸（ヒーローCTAとほぼ同じサイズ感） */
.lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4{
  right: clamp(12px, 3.6vw, 20px);   /* 右端からのすき間 */
  width:  clamp(14px, 8.6vw, 24px);  /* 白丸の直径 */
  height: clamp(14px, 8.6vw, 24px);
}

/* 白丸内の ▶（アイコンサイズにだいたい比例する値） */
.lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4::before{
  border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;  /* 底辺（▶の横幅） */
  border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
  border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
}
}



/* === SP：3番目カード（特別価格商品の販売）だけ赤文字を小さく調整 === */
@media (max-width: 768px){
  .lp-ryuna .bcard--price .bcard__main em{
    font-size: clamp(18px, 6vw, 28px);   /* ← これだけ小さく */
    line-height: 1.2;
  }
}

/* PC・タブレット：769px以上 */
@media (min-width: 769px){
  .lp-ryuna .bcard--price .bcard__main em{
    font-size: clamp(24px, 2.4vw, 40px);  /* 既存の10%OFF(28px,3vw,51px)より小さく */
    line-height: 1.2;
  }
}

/* =========================
   Section 4.5 さらに充実予定
   ========================= */

/* 色（既存に無ければ使われます） */
:root{
  --ryuna-lilac: #8D93C6;
  --ryuna-pink:  #f184ac;
}

/* セクション本体 */
.benefits-more{
  font-family: "Noto Sans JP" ;
  position: relative;
  margin-block: clamp(28px, 6vw, 52px);
}

.benefits-more__head{
  text-align: center;
  /* 下の余白を増やす */
  margin-bottom: clamp(38px, 4.5vw, 58px);
}
.benefits-more__title{
  margin: 0 0 clamp(6px, 1vw, 10px);
  font-family: "Noto Sans JP" ;
  font-weight: 700;
  color:#333;
  font-size: clamp(20px, 2.2vw, 26px);
}
.benefits-more__subtitle{
  margin: 0;
  color:#333;
  font-size: clamp(12px, 1.2vw, 14px);
}

/* ===== PC: さらに充実予定（4カラム） ===== */
.benefits-more__grid{
  list-style: none;
  margin: clamp(24px, 3vw, 32px) auto 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2vw, 24px);

  /* カードを少しだけワイドにする */
  grid-template-columns: repeat(4, minmax(210px, 1fr)); /* 180px → 210px */
  max-width: 1040px;                                    /* 960px → 1040px */

  justify-content: center;
  margin-bottom: clamp(32px, 4.5vw, 60px);
}

/* カード本体：高さをそろえて中身をきれいに配置 */
.lp-ryuna .benefits-more__card{
  background:#fff;
  border-radius: 10px;
  border: 2px solid #edd6ce;
  text-align: center;
  padding: clamp(20px, 2.4vw, 44px) clamp(16px, 2vw, 42px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;         /* space-between をやめて上詰め */          
  min-height: clamp(190px, 20vw, 230px);       /* 4枚とも高さをほぼ固定 */
}

.lp-ryuna .benefits-more__icon{
  display: block;
  width: auto;
  height: clamp(80px, 6vw, 96px);
  object-fit: contain;
  margin: 0 auto clamp(12px,1.6vw,16px);
  flex-shrink: 0;
}

/* タイトル＆本文の文字サイズを“ちょい大きめ”に */
.benefits-more__card-title{
  color: #ae717f;
  font-weight: 600;
  line-height: 1.55;
  font-size: clamp(13px, 1.35vw, 20px);       /* 1440pxでだいたい16〜18px */
  margin: 0 0 clamp(6px, 1vw, 8px);

  /* 中身を下寄せ or 中央寄せにしたい場合は flex に */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* 下そろえ。真ん中にしたいなら center */
  align-items: center;
  text-align: center;
}

.benefits-more__card-desc{
  color:#333;
  font-weight: 500;
  font-size: clamp(11px, 1.1vw, 18px);        /* 1440pxで13〜15pxくらい */
  line-height: 1.7;
  margin: 0;
}


/* 1600px以上：さらに充実予定セクションをもっと大きく */
@media screen and (min-width:1600px){

  /* 見出しまわり */
  .lp-ryuna .benefits-more__title{
    font-size: 36px;
  }
  .lp-ryuna .benefits-more__subtitle{
    font-size: 18px;
  }

  /* グリッド全体をさらにワイドに＆カード幅アップ */
  .lp-ryuna .benefits-more__grid{
    max-width: 1600px;                              /* 1440 → 1600 に拡張 */
    gap: 40px;                                      /* カード間も少し広く */
    grid-template-columns: repeat(4, minmax(320px, 1fr));
    /* 4枚並べても 320*4 + 40*3 = 1400px なので余裕あり */
  }

  /* カード本体を一回り（＋もう一回り）大きく */
  .lp-ryuna .benefits-more__card{
    padding: 44px 40px;                             /* 36×32 → 44×40 に */
    min-height: 320px;                              /* 280 → 320 */
  }

  /* 写真（アイコン）をしっかり大きく */
  .lp-ryuna .benefits-more__icon{
    height: 80px;              /* レイアウト上の高さは控えめに戻す */
    transform: scale(1.2);     /* 見た目だけ 1.2倍に拡大 */
    transform-origin: center center;
    margin-bottom: 6px;        /* 下の余白が広く見えるなら少し詰める */
  }                              /* 80 → 96 */


  /* タイトル・本文もそれに合わせて少し拡大 */
  .lp-ryuna .benefits-more__card-title{
    font-size: 24px;                                /* 20 → 22 */
    min-height: 4.8em;                              /* 高さそろえキープ */
  }

  .lp-ryuna .benefits-more__card-desc{
    font-size: 18px;                                /* 15 → 16 */
    line-height: 1.8;
  }

    /* ▼ 見出し（h2）の“上”の余白を増やす */
  .lp-ryuna .benefits-more{
    margin-top: 120px;   /* 好みで 72〜96px くらいに調整してOK */
  }

  /* ▼ 4枚のカード（benefits-more__grid）の“下”の余白を増やす */
  .lp-ryuna .benefits-more__grid{
    margin-bottom: 120px;  /* 好みで 64〜96px くらい */
  }
}



/* 下のラベンダー帯（お知らせ） */
.benefits-more__band{
  /* 追加 ↓ */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  border-radius: 0; /* 端まで伸ばすなら角丸は0が自然 */
  /* ↑ここまでフルブリード指定 */

    /* 縦だけ増やす（上下） */
  padding-block: clamp(12px, 2vw, 36px);  /* ← 好みで 32–96px 程度まで上げてもOK */

  /* 横はそのまま/揃えたいならページのガターに合わせる */
  padding-inline: var(--page-pad, clamp(8px, 2.5vw, 20px));

  margin-top: clamp(18px, 3.2vw, 28px);
  text-align: center;
  color:#6f6f6f;
  background:
    linear-gradient(180deg,
      #E9E4F1 0%,
      #D9D4E6 100%);                    /* Figmaの薄紫帯の雰囲気 */

        /* 1024px付近で13px → 2560pxで15px にゆるやかに変化 */
  font-size: clamp(15px, 1.5vw, 30px);
  line-height: 1.9;
  letter-spacing: .04em;
  font-weight: 500;           /* もう少し軽くしたいなら 600/500 に */
}



/* spはここに書く */
/* ===== SP: さらに充実予定（2×2グリッド） ===== */
@media (max-width: 768px){

  /* セクション帯の上下余白（お好みで調整OK） */
  .lp-ryuna .benefits-more__band{
    margin-top: 40px;
    padding: clamp(20px, 6vw, 40px) 0;
  }

  /* グリッド本体：2列・中央寄せ・均等ギャップ */
  .lp-ryuna .benefits-more__grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 3.6vw, 16px);
    width: min(90vw, 560px);
    margin: clamp(14px, 4vw, 22px) auto 0;
    padding: 0;
    list-style: none;
  }

    /* 2枚目（右上）のカード内コンテンツをほんの少し右へ */
  .lp-ryuna .benefits-more__grid .benefits-more__card:nth-child(2) > *{
    transform: translateX(14px);   /* 1〜3pxくらいで好み調整 */
  }

      /* 3枚目（左下）のカード内コンテンツをほんの少し右へ */
  .lp-ryuna .benefits-more__grid .benefits-more__card:nth-child(3) > *{
    transform: translateX(5px);   /* 1〜3pxくらいで好み調整 */
  }

  /* カード：角丸＋薄ラベンダー枠＋影＋3行グリッド（icon / title / desc） */
  .lp-ryuna .benefits-more__card{
    background: #fff;
    border: 2px solid #edd6ce;
    padding: clamp(12px, 4vw, 16px) clamp(10px, 3.6vw, 14px);
    text-align: center;
    justify-items: center;   /* グリッド上の水平位置を中央に */

    display: grid;
    grid-template-rows:
      auto                      /* 1行目：画像 */
      minmax(2.6em, auto)       /* 2行目：タイトル（2行分くらい確保） */
      minmax(3.8em, 1fr);       /* 3行目：説明文（2〜3行分） */
    align-items: start;
    min-height: clamp(150px, 44vw, 190px);
  }

  .benefits-more__title{
    font-weight: 500;
        font-size: clamp(18px, 5.2vw, 22px);  /* 好みで18〜24pxくらいに調整OK */
    line-height: 1.4;
    margin-bottom: clamp(4px, 1.8vw, 8px);
  }

    /* サブコピー「今後、以下の特典を〜」 */
  .lp-ryuna .benefits-more__subtitle{
    font-size: clamp(13px, 3.8vw, 15px);  /* 少し小さめ・読みやすいサイズ */
    line-height: 1.6;
  }

    .lp-ryuna .benefits-more__card-title,
  .lp-ryuna .benefits-more__card-desc{
    display: block;          /* PCのflex指定を打ち消す */
    margin-left: auto;       /* 左右の余白を均等に */
    margin-right: auto;
    text-align: center;
  }

  /* 念のためアイコンも中央寄せを明示 */
  .lp-ryuna .benefits-more__card img,
  .lp-ryuna .benefits-more__icon{
    margin-left: auto;
    margin-right: auto;
  }

  /* アイコン画像：サイズ＆下余白を統一 */
  .lp-ryuna .benefits-more__card img,
  .lp-ryuna .benefits-more__icon{
    display: block;
    width:  clamp(56px, 18vw, 72px);
    height: clamp(56px, 18vw, 72px);
    object-fit: contain;
    margin: 0 auto clamp(6px, 2.6vw, 12px);
  }

  /* タイトル */
  .lp-ryuna .benefits-more__card-title,
  .lp-ryuna .benefits-more__card h3{
    margin: 0 0 clamp(6px, 2vw, 10px);
    font-weight: 700;
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 1.5;
    letter-spacing: -1px;
    color: var(--ry-pink, #ae717f);
  }

  /* 説明文 */
  .lp-ryuna .benefits-more__card p{
    margin: 0;
    font-size: clamp(11px, 3.2vw, 14px);
    line-height: 1.6;
        letter-spacing: -1px;
    text-align: center;
  }
}

@media (max-width: 430px){
    /* 2枚目（右上）のカード内コンテンツをほんの少し右へ */
  .lp-ryuna .benefits-more__grid .benefits-more__card:nth-child(2) > *{
    transform: translateX(20px);   /* 1〜3pxくらいで好み調整 */
  }

  /* タイトル */
  .lp-ryuna .benefits-more__card-title,
  .lp-ryuna .benefits-more__card h3{
    font-size: clamp(15px, 3.6vw, 18px);
  }

  /* 説明文 */
  .lp-ryuna .benefits-more__card p{
    font-size: clamp(13px, 3.2vw, 16px);
  }
}


@media (max-width: 380px){
    /* 2枚目（右上）のカード内コンテンツをほんの少し右へ */
  .lp-ryuna .benefits-more__grid .benefits-more__card:nth-child(2) > *{
    transform: translateX(14px);   /* 1〜3pxくらいで好み調整 */
  }

  /* タイトル */
  .lp-ryuna .benefits-more__card-title,
  .lp-ryuna .benefits-more__card h3{
    font-size: clamp(14px, 3.6vw, 17px);
  }

  /* 説明文 */
  .lp-ryuna .benefits-more__card p{
    font-size: clamp(12px, 3.2vw, 15px);
  }
}

@media (max-width: 340px){
    /* 2枚目（右上）のカード内コンテンツをほんの少し右へ */
  .lp-ryuna .benefits-more__grid .benefits-more__card:nth-child(2) > *{
    transform: translateX(14px);   /* 1〜3pxくらいで好み調整 */
  }

  /* タイトル */
  .lp-ryuna .benefits-more__card-title,
  .lp-ryuna .benefits-more__card h3{
    font-size: clamp(13px, 3.6vw, 16px);
  }

  /* 説明文 */
  .lp-ryuna .benefits-more__card p{
    font-size: clamp(11px, 3.2vw, 14px);
  }
}

@media (min-width:768px) and (max-width:1023px){
    /* カードの中身をど真ん中にそろえる */
  .lp-ryuna .benefits-more__card{
    display: flex;
    flex-direction: column;
    align-items: center;   /* 中身を水平中央 */
    text-align: center;    /* テキストも中央 */
  }

  /* 直下の要素をすべて中央寄せに（念のため） */
  .lp-ryuna .benefits-more__card > *{
    margin-left: auto;
    margin-right: auto;
  }      
  /* 2枚目（右上）のカード内コンテンツをほんの少し右へ */
  .lp-ryuna .benefits-more__grid .benefits-more__card:nth-child(2) > *{
    transform: translateX(-3px);   /* 1〜3pxくらいで好み調整 */
  }

  /* アイコンを少し大きく＆中央寄せを明示 */
  .lp-ryuna .benefits-more__icon{
    display: block;
    width: auto;
    height: clamp(100px, 9vw, 120px);   /* ← ここで“少し大きく” */
    object-fit: contain;
    margin: 0 auto clamp(12px, 2vw, 16px);
  }

  /* タイトル＆説明文も中央寄せを強める */
  .lp-ryuna .benefits-more__card-title,
  .lp-ryuna .benefits-more__card-desc{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

    /* タイトル */
  .lp-ryuna .benefits-more__card-title,
  .lp-ryuna .benefits-more__card h3{
    font-size: clamp(18px, 3.6vw, 22px);
  }

  /* 説明文 */
  .lp-ryuna .benefits-more__card p{
    font-size: clamp(18px, 3.2vw, 22px);
  }

  .benefits-more__band{
    font-size: 24px;
  }
}

/* 特典CTAの変更 */
/* 431〜767px：会員特典のボタンを会社紹介CTAと同じ感じに */
@media (min-width: 431px) and (max-width: 767px){

  /* ラッパー：中央寄せ＆幅・余白 */
  .lp-ryuna .benefits__ctaWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 580px;  /* 会社紹介CTAと同じくらいの横幅 */
    margin: clamp(40px, 7vw, 70px) auto
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  /* ボタン本体：高さ・横幅など（会社紹介CTAに寄せる） */
  .lp-ryuna .benefits__ctaWrap .btn-promo{
    inline-size: clamp(260px, 92vw, 600px);
    margin-inline: auto;
    padding: clamp(26px, 5vw, 32px) clamp(26px, 7vw, 32px);
  }

  /* テキスト：少し左に寄せて、フォントサイズも調整 */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4{
    margin-left: -20px;
    font-size: clamp(18px, 4.4vw, 24px);
  }

  /* 右の白丸アイコンサイズ＆位置 */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4{
    right: clamp(10px, 3.6vw, 18px);
    width:  clamp(20px, 8.6vw, 30px);
    height: clamp(20px, 8.6vw, 30px);
  }

  /* 三角（▶）がまだ小さかったら、会社紹介CTAと同じ形に */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-35%, -50%);
    width:0;
    height:0;
    border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;
    border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
    border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
  }
}





/* ----------------------
   Section 5: こんな方におすすめ（PC >= 769px）
   丸 = 18.125vw、3列を中央寄せ
---------------------- */
@media (min-width: 769px){
  .recommend__inner{
    width:min(1200px,94%);
    margin-inline:auto;
  }

  .recommend__head{
    display: grid;
    justify-items: center;
    gap: clamp(10px, 1.4vw, 16px);
    margin-top: clamp(30px, 1.2vw, 70px);
  }

  /* タイトル上の王冠 */
  .recommend__head::before{
    content: "";
    display: block;
    width: clamp(60px, 4vw, 90px);
    height: clamp(20px, 2.5vw, 32px);
    margin: 0 auto 0.8rem;
    background: url("assets/oukan.png") no-repeat center / contain;
  }

  .recommend__eyebrow{
    display:inline-block;
    font-size:12px;
    letter-spacing:.18em;
    font-weight:700;
    border-radius:999px;
    padding:6px 12px;
    margin:0 0 12px;
  }
  .recommend__eyebrow:empty{ display:none; }

  .recommend__title{
    color: #9191cb;
      font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
    font-size:clamp(24px,3vw,32px);
    font-weight:600;
    letter-spacing:.02em;
    margin:0;
    padding-bottom: 64px;
  }

  .recommend__gallery{
    list-style:none;
    padding:0;
    margin:24px auto 0;
    display:grid;
    grid-template-columns: repeat(3, 18.125vw);
    justify-content:center;
    justify-items: center;
    column-gap: 8.81rem;
    row-gap: clamp(12px, 2vw, 24px);
    width:fit-content;
    max-width:100%;
  }

  .recommend__item{
    display:grid;
    gap:14px;
    justify-items:center;
    margin-bottom: clamp(40px, 5vw, 80px);
  }

  .recommend__circle{
    width:20.125vw;
    height:20.125vw;
    border-radius:50%;
    background-repeat:no-repeat;
    background-position:center;
    background-size: 92%;
  }

  .recommend__caption{
    margin:0;
    font-size:1.5rem;
    line-height: normal;
    text-align:center;
    font-family: "Noto Sans JP" ;
  }
}


/* PC だけど 1024px 前後ではキャプションを少し小さく */
@media (min-width: 769px) and (max-width: 1279px){
  .recommend__caption{
    font-size: 1.2rem;      /* 1.5rem → 1.2rem くらいに */
    line-height: 1.6;       /* 行間も少し広めにして読みやすく */
  }

    .recommend__gallery{
    column-gap: 5rem;   /* 8.81rem → 5rem くらいに。まだ広いなら 4rem などに調整 */
  }

    .recommend__title{
    padding-bottom: 60px;    /* 100px → 60px くらいに */
  }

  .recommend__gallery{
    margin-top: 12px;        /* 24px → 12px にしてさらに少し詰める */
  }
}


/* 1600px 以上：キャプションを 1440px 時と近い見え方に */
@media (min-width:1600px){
    /* 見出し：こんな方におすすめ */
  .lp-ryuna .recommend__title{
    font-size: 36px;      /* 32px → 36px くらいにアップ */
    line-height: 1.4;     /* 余白感を保つ */
  }

  .lp-ryuna .recommend__caption{
    font-size: 1.85rem;   /* もとの 1.5rem より少し大きめ */
    line-height: 1.6;     /* 読みやすい行間をキープ */
  }
}

/* PC用：こんな方におすすめ 背景を写真にして画面いっぱい */
@media (min-width: 769px){
  .lp-ryuna .recommend{
    position: relative;
    background: none;     /* ↑の linear-gradient を上書きして消す */
    overflow: visible;    /* clip を解除しないと 100vw が切られる */
    padding: 56px 0 64px; /* 好きならここで余白も上書き */
  }

  .lp-ryuna .recommend::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;               /* 画面幅いっぱい */
    height: 100%;               /* セクションの高さ分 */
    background: url("assets/nami.png") center top / cover no-repeat;
    z-index: -1;                /* コンテンツの背面に */
  }
}

/* Section5：丸い写真の背景（PC/SP共通） */
.lp-ryuna .recommend__circle--1{
  background-image: url("assets/Ryuna4.png");
}
.lp-ryuna .recommend__circle--2{
  background-image: url("assets/Ryuna5.png");
}
.lp-ryuna .recommend__circle--3{
  background-image: url("assets/Ryuna6.png");
}



/* spはここに書く */
/* ===== SP: Section 5 こんな方におすすめ ===== */
@media (max-width: 768px){

  .lp-ryuna .recommend{
    position: relative;
    /* 既存の padding-block を少し調整したい場合はここで上書き */
    padding-block: clamp(32px, 10vw, 64px);
    background: none;        /* もともとの linear-gradient を消す */
    overflow: visible;       /* 100vw の背景が切れないように */
    padding-bottom: 100px;

    z-index: 0;              /* ★追加：この中で背景を完結させる */
  }

  .lp-ryuna .recommend::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;               /* ★height:100% を消して bottom:0 に変更 */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;            /* 画面幅いっぱい */
    /* height: 100%;  ← これは削除 */

    background: url("assets/SPnami.png") center top / cover no-repeat;
    z-index: -1;             /* コンテンツの背面に敷く */
  }

  .lp-ryuna .recommend__inner{
    width: min(92vw, 720px);
    margin-inline: auto;
  }

    /* 上の王冠（recommend__eyebrow を画像用の箱にする） */
  .lp-ryuna .recommend__eyebrow{
    display: block;
    width:  clamp(60px, 18vw, 80px);   /* 王冠の横幅 */
    height: clamp(20px, 6vw, 28px);    /* 高さ */
    margin: 0 auto clamp(8px, 3vw, 12px); /* 下＝タイトルとの余白 */
    padding: 0;
    border-radius: 0;
    font-size: 0;                      /* 文字は使わないので消す */
    background: url("assets/oukan.png") no-repeat center / contain;
  }

  /* 見出し */
  .lp-ryuna .recommend__title{
    --accent: #8D93C6;
    margin: 0 0 clamp(18px, 5vw, 28px);
    text-align: center;
    font-size: clamp(22px, 6.2vw, 28px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--accent);
    letter-spacing: .02em;
  }

  /* 丸写真のギャラリー（縦3つ） */
  .lp-ryuna .recommend__gallery{
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 9vw, 40px);  /* 各アイテムの縦間隔 */
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .lp-ryuna .recommend__item{
    display: grid;
    justify-items: center;
    gap: clamp(10px, 3.6vw, 16px);
  }

  /* 大きな丸（背景画像 or <img>どちらでもOK） */
  .lp-ryuna .recommend__circle{
    width: min(70vw, 280px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    /* ここを変更 */
    /* background: var(--circle-bg, #eee) center/cover no-repeat; */
    background-color: var(--circle-bg, #eee);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  /* 万一 <img> を中に入れる場合の埋め込み対応 */
  .lp-ryuna .recommend__circle img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* キャプション */
  .lp-ryuna .recommend__caption{
    font-family: Noto Sans JP;
    margin: -10px 0 0;
    text-align: center;
    font-size: clamp(15px, 4.4vw, 24px);
    line-height: 1.85;
    color: #333;
    letter-spacing: .01em;
    width: min(86%, 520px);
    font-weight: 500;
  }
}






/* ----------------------
   Section 6: 参加方法（PC: ≥769px）
   ---------------------- */
@media (min-width: 769px){
  .howto{
    position: relative;                 /* ← 擬似要素用 */
    color: var(--ryuna-text, #222);
    padding: 0 0 56px;
    border-top: 1px solid #eee;
    text-align: center;

    /* ここでは background は付けない（消してOK） */
    background: none;
  }

  /* 画面いっぱいに広がるグラデ帯 */
  .howto::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);        /* 中央基準で広げる */
    width: 100vw;                       /* ビュー幅いっぱい */
    height: 100%;                       /* セクションの高さ分 */

    background: linear-gradient(
      90deg,
      #ddd3f4 0%,    /* 左端：薄いラベンダー */
      #F5E0F1 50%,   /* 真ん中：ほぼ白 */
      #FFE2EC 100%   /* 右端：淡いピンク */
    );
    z-index: -1;                        /* コンテンツの背面に */
  }

  .howto__inner{
    width: min(1200px, 94%);
    margin-inline: auto;      /* 中央配置 */
  }

  /* 縦リボン（中央上） */
.ribbon14{
  --ribbon-bg: #9191cb;  /* 好きな色 */
  --rib-w: 204px;
  --rib-pad: 40px;
  --tip-h: 40px;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  display: inline-block;
  width: var(--rib-w);
  padding: var(--rib-pad) 0;
  text-align: center;
  font-size: 2rem;
  font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  font-weight: 500;
  color: #fff;
  background: var(--ribbon-bg);
  line-height: 1;
  letter-spacing: .02em;
}

.ribbon14::after{
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: -1px;  /* ★これを追加（-1 〜 -2px で微調整） */
  width: 0;
  height: 0;
  border-left: calc(var(--rib-w) / 2) solid var(--ribbon-bg);
  border-right: calc(var(--rib-w) / 2) solid var(--ribbon-bg);
  border-bottom: var(--tip-h) solid transparent;
}


/* ステップカード全体（白い大きな箱） */
.howto__box{
  font-family: "Noto Sans JP" ;
  max-width: 760px;
  margin: 200px auto 8px;          /* リボンからの距離はお好みで調整OK */
  padding: 34px 32px;
  background: #fff;
  border: 1px solid #f3f3f3;
}

/* 中のステップリスト */
.howto__steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;                       /* 1 と 2 の行間 */
}

/* 各行（1行 = 「番号 + テキスト」） */
.howto__step{
  display: grid;
  grid-template-columns: auto 1fr; /* 左に番号、右に本文 */
  align-items: flex-start;
  gap: 12px;
  padding: 0;                      /* 個別の枠は無し */
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  max-width: 100%;
}

/* 本文 */
.howto__text{
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
}

/* 強調部分だけピンクに */
.howto__text strong{
  color: #E11E63;
}

.howto__catch{
  margin: 88px 0 -12px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;   /* 少し紫がかったピンク */
  font-family: "Yomogi", "Hannari Mincho", "Yuji Syuku",
               "Yu Mincho", "Hiragino Mincho ProN", serif;

  position: relative;
}



/* === Hero風 CTA（Section4 & Section6 共通） ================= */
.howto__ctaWrap{ display:flex; justify-content:center; margin-top:clamp(16px,2.2vw,24px); }

/* 本体 */
.benefits .btn-promo,
.howto__cta{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:clamp(10px,1vw,14px);
  inline-size:min(92vw,480px);                 /* 幅可変 */
  block-size:clamp(48px,5.36vw,103px);         /* 高さ可変 */
  padding-inline:clamp(16px,1.4vw,22px);
  border-radius:999px; text-decoration:none; color:#fff; font-weight:400;
  background:#f184ac;                          /* 必要ならここをグラデに変更 */
  overflow:hidden;
  --icon:clamp(28px,2.1vw,36px);
  padding-right:calc(var(--icon) + clamp(12px,1vw,18px)); /* テキスト中央維持 */
}
/* Section4の旧擬似（白丸）対策 */
.benefits .btn-promo::after{ content:none !important; }

/* 内側白枠 */
.benefits .btn-promo::before,
.howto__cta::before{
  content:""; position:absolute;   inset: clamp(2px, .55vw, 4px);  
  border-radius:inherit; border:clamp(1px,.1vw,2px) solid rgba(255,255,255,.95);
  pointer-events:none;
}

/* ラベル */
.benefits .btn-promo .cta__label,
.howto__cta .cta__label{
  font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  font-size:clamp(16px,1.25vw,24px);
  line-height:1; letter-spacing:.03em;
}

/* 右の白丸 */
.benefits .btn-promo .cta__icon,
.howto__cta .cta__icon{
  position:absolute; top:50%; right:clamp(30px,.9vw,36px);
  transform:translateY(-50%);
  width:var(--icon); height:var(--icon); border-radius:50%; background:#fff;
  pointer-events:none;
}
/* 白丸内の▶ */
.benefits .btn-promo .cta__icon::before,
.howto__cta .cta__icon::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);
  width:0; height:0;
  border-left:clamp(9px,.7vw,12px) solid #f184ac;
  border-top:clamp(6px,.5vw,8px) solid transparent;
  border-bottom:clamp(6px,.5vw,8px) solid transparent;
}

/* hover/active */
.benefits .btn-promo:hover,
.howto__cta:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.14); }
.benefits .btn-promo:active,
.howto__cta:active{ transform:translateY(0); opacity:.9; }

/* PC幅での最大幅調整 */
@media (min-width:769px){
  .benefits .btn-promo,
  .howto__cta{ inline-size:clamp(240px,23vw,480px); }
}
}



/* === Section 6：リボンをセクション上端にピタ付け === */
@media (min-width: 769px){
  /* セクション本体をリボンの基準にする */
  .howto{
    position: relative;
    /* リボン寸法（必要ならここだけ変えればOK） */
    --rib-w: 204px;
    --rib-pad: 40px;
    --tip-h: 40px;
    padding-top: 0;                 /* 上端に余白を作らない */
  }

  /* 見出しブロックは余白ゼロ、リボン分だけ“下で”スペースを作る */
  .howto__head{
    position: static;               /* ← 子の絶対配置を .howto 基準にするため */
    padding-top: 0;
    /* リボン本体(上下パディング×2) + 先端三角 + 少しの間隔 */
    margin-top: calc(var(--rib-pad,40px)*2 + var(--tip-h,40px) + 8px);
    margin-bottom: 28px;
  }

  /* リボンをセクション上端に固定（中央） */
  .ribbon14{
    position: absolute;
    top: 0;                         /* ← 上端にピタッ */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: var(--rib-w);
    padding: var(--rib-pad) 0;
  }

  /* （好み）上の1px枠の上に重ねたい場合は -1px で重ねる */
  /* .ribbon14{ top: -1px; } */
}




/* SPここに打つ */
/* ===== SP: Section 6 参加方法 ===== */
@media (max-width: 768px){

  /* セクション背景（淡いグラデ）＋リボン分の上余白 */
  .lp-ryuna .howto{
    position: relative;
    background: none;  /* ← ここで本体からグラデーションを外す */
    padding-top: clamp(76px, 22vw, 120px);   /* リボン高さぶん */
    padding-bottom: clamp(40px, 12vw, 72px);
    text-align: center;
    overflow: visible; 
  }

    /* 画面幅いっぱいのグラデーション背景 */
  .lp-ryuna .howto::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;   /* 画面の端から端まで */
    height: 100%;   /* セクションの高さ分すべて */
    background: linear-gradient(90deg,      
      #ddd3f4 0%,    /* 左端：薄いラベンダー */
      #F5E0F1 50%,   /* 真ん中：ほぼ白 */
      #FFE2EC 100%   /* 右端：淡いピンク */);
    z-index: -1;    /* 中身の後ろに敷く */
  }

  /* 中央上の縦リボン */
  .lp-ryuna .ribbon14{
    --ribbon-bg: #8D93C6;
    --rib-w: clamp(120px, 32vw, 150px);
    --rib-pad: clamp(36px, 4.6vw, 62px);
    --tip-h: clamp(8px, 5vw, 18px);

    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    z-index: 3;

    display: inline-block;
    width: var(--rib-w);
    padding: var(--rib-pad) 0;
    background: var(--ribbon-bg);
    color: #fff;
    font-weight: 500;
    font-size: clamp(22px, 4.8vw, 28px);
    line-height: 1.2;
    text-align: center;
    border-radius: 6px 6px 0 0;
  }
  .lp-ryuna .ribbon14::after{
    content: "";
    position: absolute;
    top: 100%; left: 0;
    width: 0; height: 0;
    border-left: calc(var(--rib-w)/2) solid var(--ribbon-bg);
    border-right: calc(var(--rib-w)/2) solid var(--ribbon-bg);
    border-bottom: var(--tip-h) solid transparent;
  }

    /* ★元のリボン装飾を殺す（裏に見えていたやつ） */
  .lp-ryuna .ribbon14::before{
    content: none !important;
    border: 0;
  }

  /* ① 外側コンテナ：幅と位置だけを持たせる（枠はナシ） */
  .lp-ryuna .howto__inner{
    width: min(88vw, 520px);
    margin: 80px auto clamp(24px, 6vw, 32px);
    padding: 0;                 /* カードの余白は box 側へ */
    background: transparent;    /* ← 白背景を消す */
    border: none;
    box-shadow: none;
  }

  /* ② 中の白いカード：手順だけを囲む */
  .lp-ryuna .howto__box{
    background: #fff;
    border-radius: 12px;
    padding: clamp(34px, 6vw, 40px) clamp(18px, 5vw, 26px);
  }

  /* ステップ：中身だけ縦2行に並べる */
  .lp-ryuna .howto__steps{
    list-style: none;
    margin: 0;
    padding: 0;
    display: block; /* グリッドをやめて1列に */
  }

  .lp-ryuna .howto__step{
    background: transparent;  /* 内側のミニカードはやめる */
    border: none;
    box-shadow: none;
    padding: 0;
    text-align: center;       /* テキストは中央揃え */
  }

  /* 1行目と2行目の間の余白 */
  .lp-ryuna .howto__step + .howto__step{
    margin-top: clamp(18px, 4.8vw, 24px);
  }

  /* 文章（参考画像とほぼ同じバランス） */
  .lp-ryuna .howto__text{
    font-family: "Noto Sans JP";
    margin: 0;
    font-size: clamp(14px, 4.4vw, 27px);
    line-height: 1.9;
    color: #333;
    font-weight: 500;
    letter-spacing: -0.1em;   /* ★ 文字間を少し詰める */
  }
  .lp-ryuna .howto__text strong{
    font-weight: 900;
    color: var(--ry-pink, #D94B79);  /* 10%OFF をピンクで強調 */
  }

  /* “たったの1分で完了！” */
  .lp-ryuna .howto__catch{
    margin: clamp(32px, 4vw, 48px) 0 -20px;
    font-size: clamp(14px, 4.2vw, 22px);
    letter-spacing: .04em;
    color: #333;
  }

  .howto__ctaWrap{ display:flex; justify-content:center; margin-top:clamp(16px,2.2vw,24px); }

/* 本体 */
.benefits .btn-promo,
.howto__cta{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:clamp(10px,1vw,14px);
  inline-size:min(92vw,480px);                 /* 幅可変 */
  block-size:clamp(48px,5.36vw,103px);         /* 高さ可変 */
  padding-inline:clamp(16px,1.4vw,22px);
  border-radius:999px; text-decoration:none; color:#fff; font-weight:400;
  background:#f184ac;                          /* 必要ならここをグラデに変更 */
  overflow:hidden;
  --icon:clamp(28px,2.1vw,36px);
  padding-right:calc(var(--icon) + clamp(12px,1vw,18px)); /* テキスト中央維持 */
}
/* Section4の旧擬似（白丸）対策 */
.benefits .btn-promo::after{ content:none !important; }

/* 内側白枠 */
.benefits .btn-promo::before,
.howto__cta::before{
  content:""; position:absolute;   inset: clamp(2px, .55vw, 4px);  
  border-radius:inherit; border:clamp(1px,.1vw,2px) solid rgba(255,255,255,.95);
  pointer-events:none;
}

/* ラベル */
.benefits .btn-promo .cta__label,
.howto__cta .cta__label{
  font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  font-size:clamp(16px,1.25vw,24px);
  line-height:1; letter-spacing:.03em;
}

/* 右の白丸 */
.benefits .btn-promo .cta__icon,
.howto__cta .cta__icon{
  position:absolute; top:50%; right:clamp(30px,.9vw,36px);
  transform:translateY(-50%);
  width:var(--icon); height:var(--icon); border-radius:50%; background:#fff;
  pointer-events:none;
}
/* 白丸内の▶ */
.benefits .btn-promo .cta__icon::before,
.howto__cta .cta__icon::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);
  width:0; height:0;
  border-left:clamp(9px,.7vw,12px) solid #f184ac;
  border-top:clamp(6px,.5vw,8px) solid transparent;
  border-bottom:clamp(6px,.5vw,8px) solid transparent;
}

/* hover/active */
.benefits .btn-promo:hover,
.howto__cta:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.14); }
.benefits .btn-promo:active,
.howto__cta:active{ transform:translateY(0); opacity:.9; }
}


@media (min-width:768px) and (max-width:1023px){

    .lp-ryuna .howto__catch{
      margin-bottom: -50px;
    }

  /* ラッパー：中央寄せ＆幅 */
  .lp-ryuna .benefits__ctaWrap,
  .lp-ryuna .howto__ctaWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 580px;
    margin: clamp(60px, 8vw, 90px) auto
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  /* ボタン本体（上下の高さアップ） */
  .lp-ryuna .benefits__ctaWrap .btn-promo,
  .lp-ryuna .howto__ctaWrap .howto__cta{
    padding: clamp(26px, 5vw, 32px) clamp(26px, 7vw, 32px);
  }

  /* テキスト */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__label{
    margin-left: -20px;
    font-size: clamp(22px, 4.8vw, 26px);
  }

  /* 右の白丸 */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__icon{
    right: clamp(10px, 3.6vw, 18px);
    width:  clamp(20px, 8.6vw, 30px);
    height: clamp(20px, 8.6vw, 30px);
  }
}


@media (max-width: 430px){
    .lp-ryuna .howto__catch{
      margin-bottom: -30px;
    }

  .lp-ryuna .benefits__ctaWrap,
  .lp-ryuna .howto__ctaWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 350px;
    margin: clamp(40px, 5vw, 54px) auto
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__label{
    font-size: clamp(16px, 4.8vw, 22px);
  }

  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__icon{
    right: clamp(10px, 3.6vw, 18px);
    width:  clamp(16px, 8.6vw, 26px);
    height: clamp(16px, 8.6vw, 26px);
  }

  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4::before,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__icon::before{
    border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;
    border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
    border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
  }
}


@media (max-width: 430px){

  .lp-ryuna .benefits__ctaWrap,
  .lp-ryuna .howto__ctaWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 350px;
    margin: clamp(40px, 5vw, 54px) auto
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__label{
    font-size: clamp(16px, 4.8vw, 22px);
  }

  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__icon{
    right: clamp(10px, 3.6vw, 18px);
    width:  clamp(16px, 8.6vw, 26px);
    height: clamp(16px, 8.6vw, 26px);
  }

  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4::before,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__icon::before{
    border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;
    border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
    border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
  }
}


@media (max-width: 330px){

  .lp-ryuna .benefits__ctaWrap,
  .lp-ryuna .howto__ctaWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 280px;
    margin: clamp(30px, 5vw, 54px) auto
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__label{
    margin-left: 11px;
    font-size: clamp(16px, 4.8vw, 22px);
  }

  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__icon{
    right: clamp(12px, 3.6vw, 20px);
    width:  clamp(14px, 8.6vw, 24px);
    height: clamp(14px, 8.6vw, 24px);
  }

  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4::before,
  .lp-ryuna .howto__ctaWrap .howto__cta .cta__icon::before{
    border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;
    border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
    border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
  }
}








/* ---------------------- */
/* ===== Section 7: 会社紹介 ===== */
/* ---------------------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

:root{ --ryuna-lilac:#9191cb; --ryuna-pink:#f184ac; --ink:#333; }
.company.company--v2{
  position: relative;
  background: none;
  border-top: 1px solid #eee;

  padding-top:    clamp(110px, 9vw, 140px);   /* 上：少し広め */
  padding-bottom: clamp(150px, 12vw, 190px);  /* 下：かなり広めに */
}

/* 画面端まで広がる背景画像 */
.company.company--v2::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0px; /* ← お好みで -40〜-80px くらいで微調整 */
  left: 50%;
  transform: translateX(-50%);        /* 画面中央基準で配置 */
  width: 100vw;                       /* ビュー幅いっぱい */
  background:
    url("assets/compa-sen.png")       /* ← 背景画像のパス */
    center top / cover
    no-repeat;
  z-index: -1;                        /* コンテンツの背面 */
}
.company.company--v2 .company__head{
  text-align: center;
  margin-bottom: clamp(50px, 4.2vw, 70px); /* ここを大きめに */
}
.company.company--v2 .company__head::before{
  content: "";
  display: block;
  width:  clamp(60px, 4vw, 90px);   /* 王冠の横幅 */
  height: clamp(20px, 2.5vw, 32px); /* 高さ */
  margin: 0 auto clamp(8px, 1.2vw, 12px);  /* 下の余白＝タイトルとの間 */

  /* 王冠画像のパスをあなたのファイル名に合わせて変更 */
  background: url("assets/oukan.png") no-repeat center / contain;
}

/* 会社紹介タイトル */
.company.company--v2 .company__title{
  margin: 0 0 clamp(18px, 2.4vw, 28px);   /* ← タイトルの“下”だけ余白を追加 */
  color: var(--ink);
  font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);      /* 他のセクションとほぼ同じ大きさ */
}

/* 幅 */
.company.company--v2 .company__inner{
  max-width:min(1120px,92vw); margin-inline:auto; padding-inline: clamp(16px,3vw,32px); box-sizing:border-box;
}

/* レイアウト：SP=1カラム → PC=2カラム */
.company.company--v2 .company__grid{
  display:grid; gap: clamp(16px,3vw,32px); grid-template-columns:1fr; align-items:center;
}
@media (min-width:769px){
  .company.company--v2 .company__grid{
    display: grid;
    grid-template-columns: auto auto;              /* ロゴ列＋テキスト列を“内容幅”に */
    justify-content: center;                       /* ２カラム全体をセンターに */
    column-gap: clamp(20px, 4vw, 52px);           /* ロゴとテキストの間隔 */
    align-items: center;
  }

  /* テキストは左揃えのまま、幅だけ決めておくと整います */
  .company.company--v2 .company__content{
    text-align: left;
    max-width: 480px;
    margin: 0;                                     /* 余計なマージンを消しておく */
  }
}

/* 左：ロゴ/画像 */
.company.company--v2 .company__media{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ロゴ画像（ROGO.png） */
.company.company--v2 .company__logo{
  display: block;
  width: min(100%, 320px);   /* ロゴが大きくなりすぎないように */
  height: auto;
  border-radius: 0;          /* 角丸・トリミングを解除 */
}

/* ダミーのプレースホルダ用（使わないなら残っていてもOK） */
.company.company--v2 .company__ph{
  display: none;             /* もう表示しない場合は非表示に */
}


/* 右：本文 */
.company.company--v2 .company__content{ text-align:center; }
.company.company--v2 .company__sub{
  font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  margin:0 0 clamp(8px,1.2vw,12px);
  color: #9191cb;
  font-weight:500; font-size: clamp(17px,1.7vw,22px);
}
.company.company--v2 .company__body{
  font-family: "Noto Sans JP" ;
  margin:0 auto clamp(17px,2vw,25px); max-width:48ch; color:#333; line-height:1.9;
  font-size: clamp(13px,1.45vw,15px);
}
@media (min-width:769px){
  .company.company--v2 .company__content{ text-align:left; }
  .company.company--v2 .company__body{ margin-inline:0; }
}

/* ボタン：下中央（グリッドの外） */
.company.company--v2 .company__btnWrap{
  display:flex;
  justify-content:center;
  margin-top: clamp(40px, 5vw, 88px);  /* 16→40 / 2.6vw→5vw / 28→72 に増量 */
}

/* === Section4/6 と同じ見た目に統一（ピンク＋内側白枠＋右白丸▶） === */
.company.company--v2 .company__btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: #fff; font-weight: 400;
  display:inline-flex; align-items:center; justify-content:center; gap:clamp(10px,1vw,14px);
  inline-size:min(92vw,480px);                 /* 幅可変 */
  block-size:clamp(48px,5.36vw,103px);         /* 高さ可変 */
  padding-inline:clamp(16px,1.4vw,22px);
  border-radius: 9999px; overflow: hidden;

  background: #f184ac;                 /* ← グラデ→単色に統一 */
  --icon: clamp(28px, 2.1vw, 36px);     /* 右の白丸サイズ */
  padding-right: calc(var(--icon) + clamp(12px, 1vw, 18px)); /* テキスト中央維持 */
}

/* 旧擬似対策（念のため） */
.company.company--v2 .company__btn::after{ content:none !important; }

/* 内側の白い枠線 */
.company.company--v2 .company__btn::before{
  content:"";
  position:absolute; inset: clamp(2px, .55vw, 4px);
  border-radius: inherit;
  border: clamp(1px, .1vw, 2px) solid rgba(255,255,255,.95);
  pointer-events: none;
}

/* ラベル（書体・サイズを統一） */
.company.company--v2 .company__btn .cta__label{
  font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1; letter-spacing: .03em;
}

/* 右の白丸 */
.company.company--v2 .company__btn .cta__icon{
  position: absolute; top: 50%;
  right: clamp(30px, .9vw, 36px);
  transform: translateY(-50%);
  width: var(--icon); height: var(--icon);
  border-radius: 50%; background: #fff;
  pointer-events: none;
}
/* 白丸内の ▶（三角） */
.company.company--v2 .company__btn .cta__icon::before{
  content:"";
  position:absolute; left:50%; top:50%;
  transform: translate(-35%, -50%);     /* 少し右寄せ */
  width:0; height:0;
  border-left: clamp(9px, .7vw, 12px) solid #f184ac;
  border-top:  clamp(6px, .5vw, 8px) solid transparent;
  border-bottom: clamp(6px, .5vw, 8px) solid transparent;
}

/* hover/active（浮き上がり挙動を統一） */
.company.company--v2 .company__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.company.company--v2 .company__btn:active{
  transform: translateY(0);
  opacity: .9;
}

/* PC幅での最大幅だけ調整（必要なら） */
@media (min-width: 769px){
  .company.company--v2 .company__btn{
    inline-size: clamp(240px, 23vw, 480px);  /* ← ここを 26vw,360 から統一 */
    --icon: clamp(24px, 2vw, 30px);
    padding-right: calc(var(--icon) + clamp(10px, .8vw, 16px));
  }
}


/* 1024px帯だけ：会社CTAの白丸＆▶をさらに右へ */
@media (min-width: 1000px) and (max-width: 1060px){
  /* 特異性を上げる：.company.company--v2 を含める */
  .company.company--v2 .company__btn{ 
    position: relative;
    padding-right: calc(var(--icon, clamp(28px, 2.1vw, 36px)) + 8px) !important;
  }
  .company.company--v2 .company__btn .cta__icon{
    right: 15px !important;  /* 既存の right: clamp(...) を確実に上書き */
  }
  .company.company--v2 .company__btn .cta__icon::before{
    transform: translate(-32%, -50%); /* ▶も少し右へ（任意） */
  }
}


/* 1600px以上で会社紹介セクションを大きく＋中央揃え */
@media screen and (min-width:1600px){
  .company.company--v2::before{
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);

    /* ★ここを変更：要素いっぱいまで伸ばす（比率は崩れてOK） */
    background-size: 100% 100%;

    background-position: center top;
  }

    .company.company--v2 .company__title{
    font-size: 36px;   /* 会員特典やおすすめの h2 に合わせたサイズ */
    font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
    line-height: 1.4;
  }

  /* インナーは中央に置いたまま（元と同じ感じ） */
  .company.company--v2 .company__inner{
    max-width: 1320px;          /* もっと広げたければ 1280px とかでもOK */
    margin-inline: auto;
  }

  /* ロゴ＋テキストの2カラム。その“かたまり”をセンター配置 */
  .company.company--v2 .company__grid{
    grid-template-columns: auto minmax(0, 1fr);   /* 左＝ロゴ / 右＝テキスト */
    column-gap: 80px;
    justify-content: center;                      /* ★ ここで中央寄せ */
    margin-top: 120px;
    margin-bottom: 120px;
  }

  .company.company--v2 .company__sub{
    font-size: 28px;
  }

  /* ロゴ少し大きく */
  .company.company--v2 .company__logo{
    width: 460px;
  }

  /* 右側テキストの箱を広げる */
  .company.company--v2 .company__content{
    max-width: 880px;          /* 好きな値に調整：680〜900pxくらい目安 */
    width: 100%;
  }

  .company.company--v2 .company__body{
    font-size: 20px;
    max-width: 100%;
  }
}





/* SPここに打つ */
/* ===== SP: Section 7 会社紹介：テキストの下にロゴ ===== */
@media (max-width: 768px){

  /* セクション本体に背景レイヤーを足す */
  .lp-ryuna .company.company--v2{
    padding-top:    clamp(60px, 9vw, 90px);   /* 上：少し広め */
    padding-bottom: clamp(30px, 12vw, 60px);  /* 下：かなり広めに */
    position: relative;
    overflow: visible;
    background: none;   /* 念のため、既存の背景を消す */
  }

  .lp-ryuna .company.company--v2::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 100vw を中央に配置 */
    width: 100vw;                /* 画面の端から端まで */
    height: 100%;                /* セクションの高さぶん */
    background-image: url("assets/SPcompa-sen.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;   /* 幅・高さとも少しズーム */
    z-index: -1;
  }

  .company.company--v2 .company__title{
    font-weight: 500;
        font-size: clamp(22px, 4.6vw, 30px);     /* スマホで20〜24pxくらい */
    line-height: 1.6;
    letter-spacing: 0.16em;
    margin-bottom: -30px;
  }

  /* ここから下は、すでに書いてあるレイアウト指定をそのまま使う */

  /* 並び順を content → media に変更 */
  .company.company--v2 .company__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "media";
    row-gap: clamp(6px, 3vw, 12px);  /* ★ここを小さめに */
    align-items: start;
  }

    /* 会社紹介セクションのロゴだけ小さくする */
  .lp-ryuna .company.company--v2 .company__media .company__logo{
    display: block;
    width: clamp(110px, 36vw, 260px);  /* ★SP幅に応じて90〜160pxで伸びる */
    height: auto;             /* 比率維持 */
    aspect-ratio: auto;       /* さっきの 3/2 を打ち消す */
    margin: clamp(4px, 1.6vw, 8px) auto 0;  /* ★上の余白をかなり減らす */
  }

    /* 「株式会社リュウナについて」 */
  .company.company--v2 .company__sub{
    font-size: clamp(16px, 3.6vw, 30px);     /* 見出しとして少し小さめ */
    line-height: 1.7;
    margin: 0 0 clamp(8px, 2.4vw, 12px);
  }

  .company.company--v2 .company__content{ 
    grid-area: content;
   }
  .company.company--v2 .company__media{ grid-area: media; }

  /* ロゴの見た目・幅をスマホ向けに少しだけ整える */
  .company.company--v2 .company__media{
    justify-self: center;
    width: min(70vw, 360px);
  }
  .company.company--v2 .company__media img,
  .company.company--v2 .company__ph{
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
  }

  .company.company--v2 .company__content{ text-align: center; }

  /* 本文テキスト */
  .company.company--v2 .company__body{
    margin-inline: auto;
    max-width: 40ch;
    font-size: clamp(13px, 3.4vw, 28px);      /* 本文は13〜16pxくらい */
    line-height: 1.9;
    letter-spacing: -0.08em;
    }
}


/* ===== Section7 会社紹介 CTA：benefits/howto と同じ見た目にする ===== */

/* 768〜1023px：タブレット */
@media (min-width:768px) and (max-width:1023px){

  /* ラッパー：中央寄せ＆幅 */
  .company.company--v2 .company__btnWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 580px;
    margin: clamp(60px, 8vw, 90px) auto
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  /* ボタン本体（高さアップ） */
  .company.company--v2 .company__btn{
    padding: clamp(26px, 5vw, 32px) clamp(26px, 7vw, 32px);
  }

  /* テキスト */
  .company.company--v2 .company__btn .cta__label{
    margin-left: -20px;
    font-size: clamp(22px, 4.8vw, 26px);
  }

  /* 右の白丸 */
  .company.company--v2 .company__btn .cta__icon{
    right: clamp(10px, 3.6vw, 18px);
    width:  clamp(20px, 8.6vw, 30px);
    height: clamp(20px, 8.6vw, 30px);
  }
}

/* 〜430px：小さめスマホ */
@media (max-width: 430px){
  .company.company--v2 .company__btnWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 350px;
    margin: clamp(40px, 5vw, 54px) auto
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  .company.company--v2 .company__btn .cta__label{
    font-size: clamp(16px, 4.8vw, 22px);
  }

  .company.company--v2 .company__btn .cta__icon{
    right: clamp(10px, 3.6vw, 18px);
    width:  clamp(16px, 8.6vw, 26px);
    height: clamp(16px, 8.6vw, 26px);
  }

  .company.company--v2 .company__btn .cta__icon::before{
    content:"";
    position:absolute; left:50%; top:50%;
    transform: translate(-35%, -50%);
    width:0; height:0;
    border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;
    border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
    border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
  }
}

/* 〜330px：さらに小さい端末 */
@media (max-width: 330px){

  .company.company--v2 .company__btnWrap{
    max-width: 280px;
    margin: clamp(30px, 5vw, 54px) auto
            clamp(15px, 5vw, 38px);
  }

  .company.company--v2 .company__btn .cta__label{
    margin-left: 9px;
    font-size: clamp(16px, 4.8vw, 22px);
  }

  .company.company--v2 .company__btn .cta__icon{
    right: clamp(12px, 3.6vw, 20px);
    width:  clamp(14px, 8.6vw, 24px);
    height: clamp(14px, 8.6vw, 24px);
  }

  .company.company--v2 .company__btn .cta__icon::before{
    border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;
    border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
    border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
  }
}








/* ---------------------- */
/* ===== Section 8: クロージング ===== */
/* ---------------------- */
:root{
  --closing-text: #333;
  --closing-pink: #f184ac;  /* 必要なら全体のピンクに合わせて変更 */
}

/* セクション全体 */
.closing{
  position: relative;
  color: var(--closing-text);
  text-align: center;
  padding: clamp(40px, 10vw, 62px) 0 clamp(40px, 10vw, 62px);
}

/* 背景画像を画面端まで伸ばす */
.closing::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);   /* 画面中央基準で配置 */
  width: 100vw;                  /* ビューポート幅いっぱい */

  background:
    url("./assets/arigatou.png")
    center center / cover
    no-repeat;

  z-index: -1;                   /* コンテンツの背面 */
}


.closing__inner{ width: min(1080px, 100%); margin-inline: auto; }

/* テキスト */
.closing__lead{
  font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  margin: clamp(50px, 6vw, 84px) 0 clamp(6px, 1.4vw, 10px);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .02em;
}
.closing__msg{
  font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  margin-bottom: clamp(2px, 0.7vw, 8px);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 22px);
}


/* ── CTA＋クマ：PCは横並び、SPは縦積み ───────────────────────── */
/* CTAボタン上の余白を詰める */
.closing__ctaWrap{
  margin-top: clamp(2px, 1.1vw, 4px);
}

.closing__ctaRow{
  display:flex; align-items:center; justify-content:center;
  gap: clamp(12px,2.4vw,28px); flex-wrap:wrap;
}

/* クマ画像 */
.closing__bear{ flex:0 0 auto; }
/* クマ画像（サイズ調整） */
.closing__bear img{
  display:block;
  width: clamp(50px, 7vw, 90px);  /* ★ここだけ変更 */
  height:auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.10));
  transform: translateY(2px);
}


/* ===== Section8：closing CTA を Section4/6 と同じ見た目に統一 ===== */
/* レイアウト用の変数（PCは他CTAと同幅に） */
.closing{
  --cta-w: min(92vw, 480px);
  --cta-h: clamp(48px, 5.36vw, 103px);
  --cta-gap: clamp(10px, 2vw, 16px);      /* CTAとクマの間隔 */
}
@media (min-width:769px){
  .closing{ --cta-w: clamp(240px, 23vw, 480px); }
}

/* CTAを中央にロック（既存の位置指定はそのまま） */
.closing__cta{
  position:absolute; left:50%; transform:translateX(-50%);
  inline-size: var(--cta-w);
  block-size: var(--cta-h);
  padding-inline: clamp(16px, 1.4vw, 22px);
  border-radius: 9999px; overflow: hidden;

  /* === 見た目を統一（ピンク＋内側白枠＋右白丸▶） === */
  display:inline-flex; align-items:center; justify-content:center; gap:clamp(10px,1vw,14px);
  text-decoration:none; color:#fff; font-weight:400;
  background:#f184ac;                                 /* 単色に統一 */
  --icon: clamp(28px, 2.1vw, 36px);                   /* 右白丸サイズ */
  padding-right: calc(var(--icon) + clamp(12px, 1vw, 18px)); /* テキスト中央維持 */
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
@media (min-width:769px){
  .closing__cta{
    --icon: clamp(24px, 2vw, 30px);
    padding-right: calc(var(--icon) + clamp(10px, .8vw, 16px));
  }
}

/* 内側の白い枠線 */
.closing__cta::before{
  content:"";
  position:absolute;   inset: clamp(2px, .55vw, 4px);  
  border-radius: inherit;
  border: clamp(1px, .1vw, 2px) solid rgba(255,255,255,.95);
  pointer-events: none;
}

/* ラベル（同書体・同サイズ） */
.closing__cta .cta__label{
  font-family: "Shippori Mincho",
               "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
               "游明朝", "Yu Mincho",
               "ＭＳ 明朝", "MS Mincho",
               serif;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1; letter-spacing: .03em;
}

/* 右の白丸（closing 用） */
.closing__cta .cta__icon{
  position: absolute; top: 50%;
  right: clamp(16px, .8vw, 24px);   /* 30→22 で右端に寄せる */
  transform: translateY(-50%);
  width: var(--icon); height: var(--icon);
  border-radius: 50%; background: #fff;
  pointer-events: none;
}
/* 白丸内の ▶（三角） */
.closing__cta .cta__icon::before{
  content:"";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-22%, -50%); /* -35%→-28% で三角も右寄せ */
  width: 0; height: 0;
  border-left: clamp(10px, .7vw, 13px) solid #f184ac;  /* ▶ の色はピンク */
  border-top:  clamp(7px, .5vw, 9px) solid transparent;
  border-bottom: clamp(7px, .5vw, 9px) solid transparent;
}
/* なめらかに動かすためのトランジション（あればOK） */
.closing__cta{
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* ホバー：中央基準(-50%)のまま、ちょっとだけ上に */
.closing__cta:hover{
  transform: translate(-50%, calc(-50% - 2px));  /* 2pxだけ上げる */
}

/* クリック中：元の位置に戻しつつ、少し暗く */
.closing__cta:active{
  transform: translate(-50%, -50%);
  opacity:.9;
}


/* 1024px帯だけ：白丸＆▶をさらに右へ寄せる */
@media (min-width: 1000px) and (max-width: 1060px){
  .closing__cta{
    padding-right: calc(var(--icon) + 8px) !important;  /* テキスト中央感を維持 */
  }
  .closing__cta .cta__icon{
    right: 9px !important; /* 既存の right:clamp(...) を確実に上書き */
  }
  .closing__cta .cta__icon::before{
    transform: translate(-32%, -50%); /* ▶もわずかに右へ */
  }
}


/* === PCだけ：CTAを中央、クマを右に固定配置 === */
@media (min-width:769px){
  .closing__ctaRow{
    position: relative;
    /* 行の高さを少し低くして、全体の余白を減らす */
    height: max(var(--cta-h), clamp(90px, 10vw, 150px));
  }

  /* CTA：少し下寄せ（真ん中よりちょい下くらい） */
  .closing__cta{
    position: absolute;
    left: 50%;
    top: 60%;                          /* ★ 25% → 60% に変更 */
    transform: translate(-50%, -50%);  /* 中心は保つ */
  }

  /* クマ：今まで通り CTA の右横 */
  .closing__bear{
    position: absolute;
    top: 50%;
    left: calc(50% + (var(--cta-w) / 2) + clamp(12px, 2.4vw, 28px));
    transform: translateY(-70%);
  }
}



/* ===== Section 8：CTAの文字を少し小さく ===== */
/* PC幅：14px〜16px くらいに抑える */
@media (min-width: 769px){
  /* 可変フォントサイズを変数で管理 */
  .closing{ --cta-font: clamp(12px, 1.05vw, 14px); }

  /* .cta__label を使っている場合 */
  .closing__cta .cta__label{
    font-size: var(--cta-font);
    line-height: 1.15;          /* 2行でも詰まりすぎないように */
  }

  /* ラベルのラッパーが無い場合（テキスト直書きでも効くように） */
  .closing__cta{
    font-size: var(--cta-font);
    line-height: 1.25;
  }
}

/* SP幅：少しだけ下げたい場合（任意） */
@media (max-width: 768.98px){
  .closing__cta .cta__label,
  .closing__cta{
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.2;
  }
}

/* 1061px〜 は文字を少しだけ大きくする */
@media (min-width:1061px){
  .lp-ryuna .closing__cta .cta__label{
    font-size: clamp(13px, 1.4vw, 20px);
  }
}



/* SPここに打つ */
/* ===== SP: Section 8 あなたの毎日に：クマをCTAの上に ===== */
@media (max-width: 768px){
    /* .closing::before の背景だけをSP時に上書き */
  .lp-ryuna #closing::before{
    background-image: url("./assets/SParigatou.png");
    background-position: center top;   /* 好みで center center 等に調整 */
    background-size: cover;            /* 既存のカバー表示を維持 */
    background-repeat: no-repeat;
  }

  .lp-ryuna .closing__ctaWrap{ margin-top: clamp(16px, 5vw, 24px); }

  /* 並び順を「bear → cta」に固定 */
  .lp-ryuna .closing__ctaRow{
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "bear"
      "cta";
    justify-items: center;
    gap: clamp(10px, 4vw, 18px);
  }
  .lp-ryuna .closing__bear{ 
    grid-area: bear; 
    margin: 0 0 16px; }
  .lp-ryuna .closing__bear img{
    width: clamp(48px, 18vw, 84px) !important;
    height: auto;
    display: block;
  }
  .lp-ryuna .closing__cta{
    grid-area: cta;
    inline-size: min(88vw, 560px);  /* 既存CTAスタイルに合わせて幅だけ明示 */
  }

  /* ← 追加：CTAをフローに戻す＆中央寄せ */
.lp-ryuna #closing .closing__cta{
    position: relative !important;   /* ← static ではなく relative */
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  
        /* SPで右の白丸ぶんの余白を確保（テキストが重ならない） */
    --icon: clamp(22px, 6.2vw, 28px);
    padding-right: calc(var(--icon) + clamp(10px, 3vw, 14px));
  }

  /* 白丸自体の基準をCTAの右端に固定 */
  .lp-ryuna #closing .closing__cta .cta__icon{
    right: clamp(10px, 3vw, 16px);
  }
}

/* ===== SP: Section 8 テキストの背後に半透明ボックス ===== */
@media (max-width: 768px){
  /* 途中の <br> は不要なので隠す */
  .lp-ryuna #closing .closing__msg + br{ display:none; }

    /* 本体の背景は消して、::before に任せる */
  .lp-ryuna #closing .closing__lead,
  .lp-ryuna #closing .closing__msg{
    position: relative;
    background: transparent !important;     /* ← 元の白半透明をOFF */
    z-index: 0;
  }

  /* 全幅の白半透明ボックスを背面に敷く */
  .lp-ryuna #closing .closing__lead::before,
  .lp-ryuna #closing .closing__msg::before{
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;                   /* 端から端まで */
    background: rgba(255,255,255,.82);  /* --glass-alpha 相当 */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: -1;
  }

  /* 角丸：上段だけ上を丸める／中段は0／最後だけ下を丸める */
  .lp-ryuna #closing .closing__lead::before{
    border-radius: 12px 12px 0 0;
  }
  .lp-ryuna #closing .closing__lead + .closing__msg::before,
  .lp-ryuna #closing .closing__msg + .closing__msg::before{
    border-radius: 0;
  }
  .lp-ryuna #closing .closing__msg:last-of-type::before{
    border-radius: 0 0 12px 12px;
  }

  /* 3つのテキストを1つのカード風に見せる */
  .lp-ryuna #closing .closing__lead,
  .lp-ryuna #closing .closing__msg{
    width: min(92vw, 740px);
    margin: 0 auto;                     /* 中央寄せ */
    padding: clamp(10px, 4vw, 14px) clamp(14px, 5vw, 22px);
    line-height: 1.6;
    text-align: center;
    font-size: clamp(12px, 3.4vw, 34px);
    letter-spacing: -1.3px;
    font-weight: 500;
  }
  /* 上・中・下で角丸を切り替え（1つの箱に見せる） */
  .lp-ryuna #closing .closing__lead{
    border-radius: 12px 12px 0 0;
    margin-bottom: 0 !important;
    /* 4px→さらに詰める。clampは最小2px〜最大6pxで安定 */
    padding-bottom: clamp(2px, 1vw, 6px) !important;
  }
  .lp-ryuna #closing .closing__lead + .closing__msg,
  .lp-ryuna #closing .closing__msg + .closing__msg{
    margin-top: 0 !important;
    padding-top: clamp(2px, 1vw, 6px) !important;
    /* まだ線が見える時だけ、ほんの少しだけ重ねる */
    /* margin-top: -2px; でもOK（必要なときだけ有効化） */
    border-radius: 0;
  }
  .lp-ryuna #closing .closing__msg:last-of-type{
    border-radius: 0 0 12px 12px;
  }
}



/* === 320px専用：Section 8 CTAの文字が重ならないように調整 === */
@media (max-width: 320px){
  /* ボタンを少しだけ背を高くする（2行想定） */
  .lp-ryuna #closing .closing__cta{
    block-size: 60px;                 /* 既存が48pxなら +12px */
    --icon: 28px;                      /* 右の白丸は少し小さめ */
    padding-right: calc(var(--icon) + 12px);
  }
  /* ラベルを小さく＆行間を詰めすぎない */
  .lp-ryuna #closing .closing__cta .cta__label{
    font-size: 12px;                   /* 必要なら 13.5px まで可 */
    line-height: 1.25;
    letter-spacing: -.01em;
  }
}

/* 768〜1023px：closing セクションのCTA（company版→置き換え） */
@media (min-width:768px) and (max-width:1023px){
  .closing__inner{ 
    margin-top: 60px;
  }

  /* ラッパー：中央寄せ＆幅 */
  .lp-ryuna #closing .closing__ctaWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 580px;
    margin: clamp(60px, 8vw, 90px) auto clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  /* ボタン本体（高さアップ＆アイコンの基準に） */
  .lp-ryuna #closing .closing__cta{
    position: relative;                    /* ← アイコンの絶対配置の基準 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    max-width: 580px;
    /* ←上下だけ増やす（旧 padding を削除 or 上書き） */
    padding-block: clamp(30px, 7vw, 50px);        /* ↑ 30–36px → 40–60px にUP */
    padding-inline: clamp(18px, 7vw, 26px);       /* 左右は据え置き気味 */

    /* 右の白丸ぶんの余白を確保 */
    --icon: clamp(20px, 8.6vw, 30px);
    padding-right: calc(var(--icon) + clamp(12px, 3.2vw, 18px));
  }

  /* テキスト */
  .lp-ryuna #closing .closing__cta .cta__label{
    margin-left: -20px;
    font-size: clamp(22px, 4.8vw, 26px);
    line-height: 1.2;
    text-align: center;
    letter-spacing: -1.3px;
  }

  /* 右の白丸（▶入り） */
  .lp-ryuna #closing .closing__cta .cta__icon{
    position: absolute;
    top: 50%;
    right: clamp(10px, 3.6vw, 18px);
    transform: translateY(-50%);
    width:  var(--icon);
    height: var(--icon);
    border-radius: 50%;
  }
}


/* ===== 769〜1023px：closing セクションのクマをCTAボタンの上に配置 ===== */
/* 769〜1023px：クマをCTAボタンの上に配置する */
@media (min-width:769px) and (max-width:1023px){

  /* 行全体を縦並びのグリッドにして順番を 「bear → cta」 にする */
  .lp-ryuna #closing .closing__ctaRow{
    position: static;          /* PC用の relative＋height を打ち消す */
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "bear"
      "cta";
    justify-items: center;
    gap: clamp(10px, 4vw, 18px);
  }

  /* クマを上の列に・絶対配置を解除 */
  .lp-ryuna #closing .closing__bear{
    grid-area: bear;
    position: static;
    margin: 0 0 16px;
    left: auto;
    top: auto;
    transform: none;
  }
  .lp-ryuna #closing .closing__bear img{
    width: clamp(72px, 14vw, 110px);
    height: auto;
    display: block;
  }

  /* CTAは下の列＋絶対配置を解除して普通に中央寄せ */
  .lp-ryuna #closing .closing__cta{
    grid-area: cta;
    position: relative;   /* 既存の 768〜1023 用スタイルの基準にする */
    left: auto;
    top: auto;
    transform: none;
  }
}








/* ================================
   FINAL OVERRIDE for SP (<=768px)
   — 必ず lp-ryuna.css の最後に置く —
================================ */
/* ===============================
   Simple Drawer (No Animation)
   =============================== */

/* PC：ハンバーガー隠す／PCナビ表示 */
/* ===== PC：ハンバーガー隠す／PCナビ表示 ===== */
@media (min-width:769px){
  .ryuna-nav__toggle{ display:none !important; }
  #ryuna-drawer{ display:none !important; }
  .ryuna-nav, .ryuna-nav__list{ display:flex !important; }
}

/* ===== SP：Figma風（右ラベンダードロワー／白◯×／丸い“menu”ボタン） ===== */
:root{
  --ryuna-lilac:#8D93C6;   /* ラベンダー色（好みで調整OK） */
  --ryuna-on:#ffffff;
}

@media (max-width:768px){
  /* PCナビは非表示 */
  .ryuna-nav, .ryuna-nav__list{ display:none !important; }

  /* 丸い “menu” トリガー */
  .ryuna-nav__toggle{
    position:fixed; z-index:3100;
    top:calc(env(safe-area-inset-top,0px) + 12px);
    right:calc(env(safe-area-inset-right,0px) + 12px);
    width:56px; height:56px; border:0; cursor:pointer; border-radius:999px;
    background:var(--ryuna-lilac); color:var(--ryuna-on);
    display:inline-block; box-shadow:0 8px 18px rgba(0,0,0,.12);
  }
  /* 白い三本線（上側に短く） */
  .ryuna-nav__toggle span{
    position:absolute; left:14px; right:14px; height:2px;
    background:var(--ryuna-on); border-radius:999px; transition:none;
  }
  .ryuna-nav__toggle span:nth-child(1){ top:16px; }
  .ryuna-nav__toggle span:nth-child(2){ top:24px; }
  .ryuna-nav__toggle span:nth-child(3){ top:32px; }
  /* “menu” ラベル（下側） */
  .ryuna-nav__toggle::after{
    content:"menu";
    position:absolute; left:0; right:0; bottom:8px;
    text-align:center; font-size:10px; font-weight:700; letter-spacing:.06em;
  }
  /* 開いている間は三本線を消す（×化はしない） */
  .ryuna-header.is-open .ryuna-nav__toggle span{ opacity:0; }

  /* ドロワー */
  #ryuna-drawer{ position:fixed; inset:0; z-index:3000; }
  #ryuna-drawer[hidden]{ display:none !important; }

  .drawer__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.28); }

  .drawer__panel{
    position:absolute; top:0; right:0;
    height:100dvh; width:min(84vw,360px);
    background:var(--ryuna-lilac); color:var(--ryuna-on);
    box-shadow:-10px 0 24px rgba(0,0,0,.12);
    display:flex; flex-direction:column; overflow:auto;
    padding:24px 28px 32px; overscroll-behavior:contain;
  }

  .drawer__menu{ list-style:none; margin:64px 0 0; padding:0; }
  .drawer__menu li a{
        font-family: "Noto Sans JP",
                 "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
                 "游ゴシック", "Yu Gothic",
                 "メイリオ", "Meiryo",
                 sans-serif;
    display:block; padding:clamp(14px,4vw,20px) 0;
    color:var(--ryuna-on); text-decoration:none; font-weight:600;
    font-size:clamp(18px,5.4vw,22px); line-height:1.35; opacity:.95;
  }
  .drawer__menu li a:hover{ opacity:1; }

  /* 右上の白い◯×ボタン */
  .drawer__close{
    position:absolute; top:16px; right:16px;
    width:44px; height:44px; border-radius:999px; border:0; cursor:pointer;
    background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.08);
  }
  .drawer__close::before,
  .drawer__close::after{
    content:""; position:absolute; left:12px; right:12px; height:2px; top:50%;
    background:var(--ryuna-lilac);
  }
  .drawer__close::before{ transform:translateY(-50%) rotate(45deg); }
  .drawer__close::after { transform:translateY(-50%) rotate(-45deg); }
}

/* アンカー見切れ対策（必要なら調整） */
[id]{ scroll-margin-top:12px; }
html{ scroll-behavior:smooth; }


/* === 追加パッチ：開いたら白◯×にする ===================== */
@media (max-width:768px){
  /* 開いている間はトリガーを白丸に変更・“menu”ラベルは消す */
  .ryuna-header.is-open .ryuna-nav__toggle{
    background:#fff; color:var(--ryuna-lilac);
    /* 位置・サイズはそのまま（56x56 / 右上固定） */
  }
  .ryuna-header.is-open .ryuna-nav__toggle span{ opacity:0; } /* 三本線は消す */
  .ryuna-header.is-open .ryuna-nav__toggle::after{ content:""; } /* ラベル消し */

  /* 白◯の中に × を描く（2本ライン） */
  .ryuna-header.is-open .ryuna-nav__toggle::before,
  .ryuna-header.is-open .ryuna-nav__toggle::after{
    content:"";
    position:absolute; left:16px; right:16px; top:50%;
    height:2px; border-radius:999px;
    background:var(--ryuna-lilac);
  }
  .ryuna-header.is-open .ryuna-nav__toggle::before{
    transform:translateY(-50%) rotate(45deg);
  }
  .ryuna-header.is-open .ryuna-nav__toggle::after{
    transform:translateY(-50%) rotate(-45deg);
  }

  /* もし .drawer__close を入れていたら隠す（重複防止） */
  .drawer__close{ display:none !important; }
}


/* === 追加パッチ：ドロワーのパープルを左右端まで（SP） === */
@media (max-width:768px){
  #ryuna-drawer{ position:fixed; inset:0; z-index:3000; }

  /* パネルをフルブリードにする：left:0/right:0 & width:100vw */
  #ryuna-drawer .drawer__panel{
    position:fixed; top:0; right:0; bottom:0; left:0;
    width:100vw !important; max-width:none; height:auto;
    background:var(--ryuna-lilac);
    /* 余白（左右は端まで伸ばしつつ、内側のパディングだけ確保） */
    padding-top:24px;
    padding-bottom:max(32px, env(safe-area-inset-bottom,0px));
    padding-left:clamp(20px, 6vw, 32px);
    padding-right:clamp(20px, 6vw, 32px);
    overflow:auto; overscroll-behavior:contain;
    box-shadow:none;                 /* 端までなので影は不要なら消す */
    z-index:1;
  }
  /* スクリーン（背景の黒半透明）はパネルの下に */
  #ryuna-drawer .drawer__scrim{ z-index:0; }

  /* 閉じる白◯は右上に固定（ノッチ対策） */
  .drawer__close{
    position:fixed;                  /* パネルと同じくfixedに */
    top:16px; right:calc(16px + env(safe-area-inset-right,0px));
    width:44px; height:44px; border-radius:999px; border:0;
    background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.08);
    z-index:2;                       /* パネルより前面 */
  }
}


/* ================================
   PC最終オーバーライド（>=769px）
   ================================ */
@media (min-width:769px){

  /* ハンバーガーはPCで非表示 */
  .ryuna-nav__toggle{ display:none !important; }

  /* ドロワーもPCでは出さない */
  #ryuna-drawer{ display:none !important; }

  /* PC用メニューを表示（横並びは既存CSSでOK。念のため表示を強制） */
  .ryuna-header .ryuna-nav__list{
    display:flex !important;
  }
}

/* =========================
   横スクロール完全阻止セット（PCだけ）
   ========================= */

*, *::before, *::after{
  box-sizing: border-box;
}
img, svg, video, canvas{
  max-width:100%;
  height:auto;
  display:block;
}

/* 1) まずはガード（はみ出しを切る）→ PC だけに適用 */
@media (min-width:769px){
  html, body{ overflow-x: clip; }         /* 近代ブラウザ */
}
@supports not (overflow-x: clip){
  @media (min-width:769px){
    html, body{ overflow-x: hidden; }     /* 旧ブラウザ用フォールバック */
  }
}



/* ===== 改行制御：PC／SP ===== */

/* 基本はPC用の設定 */
br.pc-only {
  display: inline !important;   /* PCでは改行させる */
}

br.sp-only {
  display: none !important;     /* PCではSP専用改行は消す */
}

/* タブレット専用：デフォルトは非表示 */
br.tab-only {
  display: none !important;     /* PC・SPでは改行しない */
}

/* SPのときだけ反転させる　767以下に変更 */
@media (max-width: 768px) {
  br.pc-only {
    display: none !important;   /* SPではPC用改行を消す */
  }

  br.sp-only {
    display: inline !important; /* SPではこちらで改行 */
  }

  /* tab-only はSPでも改行させないまま */
}

/* タブレットサイズのときだけ改行 */
@media (min-width: 769px) and (max-width: 1024px) {
  br.tab-only {
    display: inline !important; /* タブレットだけ改行 */
  }
}


/* CTAボタンの3つの769～1023の管理 */
/* 768〜1023px：closing と同じCTAレイアウトを benefits / howto / company に適用 */
@media (min-width:769px) and (max-width:1023px){

  /* ラッパー：中央寄せ＆幅（580px上限） */
  .lp-ryuna .benefits__ctaWrap,
  .lp-ryuna .howto__ctaWrap,
  .lp-ryuna .company.company--v2 .company__btnWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 460px;
    margin: clamp(60px, 8vw, 90px) auto clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  /* ボタン本体（高さアップ＆アイコン基準に） */
  .lp-ryuna .benefits__ctaWrap .btn-promo,
  .lp-ryuna .howto__cta,
  .lp-ryuna .company.company--v2 .company__btn{
    position: relative;              /* ← .cta__icon系の基準 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    max-width: 580px;

    /* ←上下だけ増やす（closingと同値） */
    padding-block: clamp(20px, 7vw, 40px);
    padding-inline: clamp(8px, 7vw, 16px);

    /* 右の白丸ぶんの余白を確保（closingと同値） */
    --icon: clamp(20px, 8.6vw, 30px);
    padding-right: calc(var(--icon) + clamp(12px, 3.2vw, 18px));
  }

  /* 右の白丸（クラス名の違いに対応） */
  .lp-ryuna .benefits__ctaWrap .cta__icon4,
  .lp-ryuna .howto__cta .cta__icon,
  .lp-ryuna .company.company--v2 .company__btn .cta__icon{
    position: absolute;
    top: 50%;
    right: clamp(10px, 3.6vw, 18px);
    transform: translateY(-50%);
    width:  var(--icon);
    height: var(--icon);
    border-radius: 50%;
  }
}


/* 431〜767px：ヒーロー部以外のCTAボタンを同じ見た目にそろえる */
@media (min-width: 431px) and (max-width: 767px){

  /* ラッパー：中央寄せ＆幅（benefits / howto / company / closing 共通） */
  .lp-ryuna .benefits__ctaWrap,
  .lp-ryuna .howto__ctaWrap,
  .lp-ryuna .company__btnWrap,
  .lp-ryuna .closing__ctaWrap{
    box-sizing: border-box;
    width: 100%;
    max-width: 580px;
    margin: clamp(40px, 7vw, 70px) auto
            clamp(15px, 5vw, 38px);
    display: flex;
    justify-content: center;
  }

  /* ボタン本体：サイズ感をそろえる */
  .lp-ryuna .benefits__ctaWrap .btn-promo,
  .lp-ryuna .howto__ctaWrap .howto__cta,
  .lp-ryuna .company__btnWrap .company__btn,
  .lp-ryuna .closing__ctaWrap .closing__cta{
    inline-size: clamp(260px, 92vw, 600px);
    margin-inline: auto;
    padding: clamp(26px, 5vw, 32px) clamp(26px, 7vw, 32px);
  }

  /* ラベル文字：位置とサイズを共通化 */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__label4,
  .lp-ryuna .howto__cta .cta__label,
  .lp-ryuna .company__btn .cta__label,
  .lp-ryuna .closing__cta .cta__label{
    margin-left: -20px;
    font-size: clamp(18px, 4.4vw, 24px);
  }

  /* 右の白丸アイコン：位置とサイズを共通化 */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4,
  .lp-ryuna .howto__cta .cta__icon,
  .lp-ryuna .company__btn .cta__icon,
  .lp-ryuna .closing__cta .cta__icon{
    right: clamp(10px, 3.6vw, 18px);
    width:  clamp(20px, 8.6vw, 30px);
    height: clamp(20px, 8.6vw, 30px);
  }

  /* 中の三角 ▶ を共通デザインに */
  .lp-ryuna .benefits__ctaWrap .btn-promo .cta__icon4::before,
  .lp-ryuna .howto__cta .cta__icon::before,
  .lp-ryuna .company__btn .cta__icon::before,
  .lp-ryuna .closing__cta .cta__icon::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-35%, -50%);
    width:0;
    height:0;
    border-left:   clamp(9px,  2.8vw, 12px) solid #f184ac;
    border-top:    clamp(6px,  1.9vw,  8px) solid transparent;
    border-bottom: clamp(6px,  1.9vw,  8px) solid transparent;
  }
}

/* 431〜767px：会社紹介ボタンだけ文字を一回り大きくする */
@media (min-width: 431px) and (max-width: 767px){
  .lp-ryuna .company.company--v2 .company__btn .cta__label{
    font-size: clamp(18px, 4.9vw, 24px); /* 無料で登録する と同じくらい */
    margin-left: -20px;                  /* 左の詰まり具合の微調整 */
  }
}








/* フッターCSS（共通より） */
/* ===================================================
   Ryuna フッター専用 CSS
   - #footerGuide（ショッピングガイド）
   - .footer ～ .footer-bottom（フッター本体）
   =================================================== */

/* =========================
   ショッピングガイド (#footerGuide)
   ========================= */
#footerGuide.footer-guide2 {
  background-color: #fdf9fe;
  padding: 0 20px 30px;
  color: #6e6e6e;
  font-size: 13px;
  line-height: 1.6em;
}

/* 見出し */
#footerGuide .s-guidetitle {
  padding-top: 50px;
  text-align: center;
  position: relative;
  margin-bottom: 5px;
  font-size: 16px;
}

#footerGuide .s-guidetitle::before {
  content: '';
  position: absolute;
  display: inline-block;
  bottom: -12px;
  width: 40px;
  height: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #999;
  border-radius: 2px;
}

/* 3カラムレイアウト */
#footerGuide .ft-guide-outer {
  display: flex;
  margin-top: 30px;
}

#footerGuide .ft-guide-inner {
  width: 33%;
}

#footerGuide .ft-guide-section {
  padding: 20px;
}

#footerGuide .ft-guide-section dl {
  padding-bottom: 10px;
}

/* テキストブロック */
#footerGuide .bank {
  padding: 15px 0;
}

#footerGuide .postage {
  padding-top: 10px;
}

#footerGuide .pad {
  padding-bottom: 16px;
}

#footerGuide .payfree {
  color: #B10B0E;
}

/* サブタイトルデザイン（「お支払いについて」など） */
#footerGuide .subtitle {
  text-align: center;
  margin-bottom: 24px;
}

#footerGuide .subtitle span {
  position: relative;
  display: inline-block;
  padding: 0 0.5em;
}

#footerGuide .subtitle span::before,
#footerGuide .subtitle span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 1em;
  height: 1px;
  background-color: #999;
}

#footerGuide .subtitle span::after {
  right: 100%;
}

#footerGuide .subtitle span::before {
  left: 100%;
}

/* 小見出しの先頭に ■ を付ける */
#footerGuide .ft-guide-subtitle::before {
  content: "■";
}



/* =========================
   フッター本体
   ========================= */
.footer {
  background: #F5F5F5;
}

.footer-contents {
  max-width: 1024px;
  margin: 0 auto;
  padding: 70px 0;
}

.footer-menu-container {
  display: flex;
  justify-content: center;
}

.footer-menu {
  margin: 0 calc(10px + 1vw);
}

.footer-menu:nth-child(3) {
  margin-right: 0;
}

.footer-menu-list-title {
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: bold;
  font-family: 'Marcellus', serif;
}

.footer-menu-list-item {
  margin-bottom: 30px;
}

/* 商品一覧リンク用（今回は未使用でも影響なし） */
.footer-item-list {
  display: flex;
  flex-direction: column;
  height: 700px;
  flex-wrap: wrap;
  justify-content: left;
  align-content: baseline;
  width: 440px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.4em;
}

.footer-item-list li {
  margin-right: 45px;
}

.mail-icon {
  vertical-align: middle;
}

/* SNSアイコン */
.sns-link-list {
  display: flex;
  margin-top: 36px;
}

.sns-link {
  margin-right: 16px;
}

/* メルマガ部分 */
.mail-magazine-text {
  text-align: center;
  margin: 56px 0 36px;
}

.mail-magazine-title {
  font-size: 32px;
  font-family: 'Marcellus', serif;
  margin-bottom: 24px;
}

.mail-magazine-caption {
  line-height: 1.4em;
  margin-bottom: 24px;
}

.mail-magazine-btn-wrap {
  margin-bottom: 0;
}

/* フッター内ボタンデザイン（メルマガボタン用） */
.footer .btn-wrap {
  text-align: center;
}

.footer .btn {
  position: relative;
  z-index: 2;
  background: #fff;
  color: #6E6E6E;
  border: 1px solid #6E6E6E;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  border-radius: 5px;

  width: 200px;
  height: 54px;
}

.footer .btn::before,
.footer .btn::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

.footer .btn,
.footer .btn::before,
.footer .btn::after {
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.footer .btn:hover {
  background: #6E6E6E;
  color: #fff;
  text-decoration: none;
  opacity: .8;
}

/* メルマガボタン幅 */
.footer .mail-magazine-btn {
  width: 100%;
}

/* コピーライト帯 */
.footer-bottom {
  background: #6E6E6E;
}

.footer-bottom-inner {
  padding: 28px 0;
  text-align: center;
  color: #fff;
}

.copy-right {
  font-family: 'Marcellus', serif;
  font-size: 10px;
  margin-top: 20px;
  letter-spacing: 0.1em;
}

/* フッターメニューの箇条書きの点を消す */
.footer-menu-list{
  list-style: none;   /* ● を消す */
  margin: 0;
  padding: 0;
}
.sns-link-list{
  list-style:none;
  padding-left:0;
}

/* =========================
   SP レイアウト調整 (～768px)
   ========================= */
@media screen and (max-width: 768px) {

  /* ショッピングガイド */
  #footerGuide .subtitle {
    margin-top: 40px;
  }

  #footerGuide .ft-guide-outer {
    display: block;
  }

  #footerGuide .ft-guide-inner {
    width: 100%;
  }

  #footerGuide .ft-guide-section {
    padding: 0;
  }

  #footerGuide .ft-guide-subtitle {
    padding-bottom: 5px;
  }

  /* フッター本体 */
  .footer-contents {
    width: 90%;
    padding: 30px 0;
  }

  .footer-menu-container {
    display: block;
  }

  .footer-menu {
    margin-bottom: 60px;
  }

  .footer-menu:last-child {
    margin-bottom: 0;
  }

  .footer-menu-list-item {
    margin-bottom: 20px;
  }

  .sns-link-list {
    margin-top: 20px;
  }

  .sns-link img {
    width: 24px;
  }
}




/* =========================
   フッター：偽サイト注意喚起ボックス
   （HTMLはいじらず、最初のボックスをCSSで装飾）
   ========================= */

/* #footerGuide 直下の「最初の div」＝偽サイトボックス */
#footerGuide > div:first-of-type{
  width: 80%;
  max-width: 960px;
  margin: 0 auto 24px;
  padding: 0;
  border: 1px solid #e60033;   /* 赤枠 */
  border-radius: 4px;
}

/* リンク全体をブロック化＋文字色を黒に固定 */
#footerGuide > div:first-of-type a,
#footerGuide > div:first-of-type a:link,
#footerGuide > div:first-of-type a:visited,
#footerGuide > div:first-of-type a:hover{
  display: block;
  text-decoration: none;
  color: #000 !important;
}

/* 1行目「偽サイトにご注意ください」だけ大きく＆太字 */
#footerGuide > div:first-of-type p:first-of-type{
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* 2行目の本文 */
#footerGuide > div:first-of-type p:last-of-type{
  font-size: 14px;
  line-height: 1.6;
}

/* SP調整 */
@media (max-width: 768px){
  #footerGuide > div:first-of-type{
    width: 92%;
    padding: 16px;
    margin-bottom: 20px;
  }

  #footerGuide > div:first-of-type p:first-of-type{
    font-size: 18px;
  }

  #footerGuide > div:first-of-type p:last-of-type{
    font-size: 13px;
  }
}