@charset "UTF-8";
/* 日本語＝Shippori Mincho B1 / 英数字＝EB Garamond（setting.txt準拠） */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Shippori+Mincho+B1:wght@500;600&display=swap');

/*-----------------------

         変数

-----------------------*/
:root {
  --baseColor: #231815;
  --mainColor: #06a8a2;
  --subColor: #beb368;
  --accentColor: transparent; /* accentColor：なし */
  --colorW: #fff;
  /* 50%トーン＝白と50%混色 */
  --base50Color: #918c8a;
  --main50Color: #83d4d1;
  --sub50Color: #dfd9b4;
  --accent50Color: transparent;
  /* 10%トーン＝白と10%混色 */
  --base10Color: #392f2c;
  --main10Color: #1fb1ab;
  --sub10Color: #c5bb77;
  --accent10Color: transparent;
  /* プレミアム（ゴールド）系：フレーム／ボタン／見出しで共通使用 */
  --goldDeep: #b8912f;
  --goldGradient: linear-gradient(180deg, #dcc16a 0%, var(--goldDeep) 52%, #caa64a 100%);
  /* フォント */
  --fontJp: "Shippori Mincho B1", serif;
  --fontEn: "EB Garamond", serif;
}
/*-----------------------

         COMMON

-----------------------*/
body {
  width: 100%;
  color: var(--baseColor);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  /* 明朝体＋欧文セリフ（数字・英字はEB Garamondが優先される） */
  font-family: "EB Garamond", "Shippori Mincho B1", serif;
}

/*-----------------------

         ヘッダー

-----------------------*/
/* ヘッダーはMVの上に重ねる（MVを最上部に配置＝MENUコーナー下端に密着させる） */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  box-sizing: border-box;
  padding: 1.4rem 15rem 1rem 3.5rem;
  background: transparent;
}
.site-header .pc {
  position: relative;
}
.pc > .hdr-inner {
  align-items: flex-start;
}
.site-logo {
  margin: 0;
}
.site-logo img {
  width: auto;
  height: 11.5rem;
  max-width: 50vw;
}
/* 右上ユーティリティ（お問い合わせ／ログイン）＝最上部・右端をナビ（オンラインショップ）に揃える */
.pc .hdr-utility {
  position: absolute;
  top: 0.6rem;
  right: 3.5rem;
  gap: 2.5rem;
  align-items: center;
  margin-top: 0;
}
.hdr-utility p {
  margin: 0;
  line-height: 1;
}
.hdr-utility a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--baseColor);
  white-space: nowrap;
}
/* マイページメニュー（暗い下地のドロップダウン）は上の .hdr-utility a の影響を打ち消し、
   ドロワー版と同じ＝白文字・ブロック表示にする */
.hdr-utility .mypage-list .mypage-item a {
  display: block;
  color: #fff;
  font-size: 1.4rem;
  gap: 0;
  line-height: 1.2;
  /* 上下パディングを均等かつ大きく */
  padding: 1.7rem 0;
}
/* MENUコーナー(z-index:1100)より前面に出す（隠れないように）。
   ただしドロワー展開中は適用しない（ヘッダー側リストがドロワー上に出て
   ドロワー側リストと2重表示になるのを防ぐ＝この時はstyle.cssの z-index:100 に戻す） */
body:not(.drawer-open) .hdr-utility .mypage-list {
  z-index: 1200;
}
.hdr-utility img {
  width: 24px;
  height: 24px;
}
/* ログインアバターは丸い顔写真・少し大きめ（.hdr-utility img の24pxを上書き） */
.loginBtn .img-circle {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
}
/* グローバルナビ＝ユーティリティ直下・右寄せ（少し下げる）
   ※ドロワー内の ul.drawer-menu.navi に漏れないよう直下の .navi のみを対象にする */
.pc > .navi {
  position: absolute;
  top: 4.6rem;
  right: 3.5rem;
  margin: 0;
  justify-content: flex-end;
  line-height: 1;
}
header nav {
  margin-top: 0;
}
/* style.css の header .navi .flex（line-height:2.1 / margin-top:0.8vw）を打ち消す */
.site-header .navi ul.gnav {
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  line-height: 1;
  margin-top: 0;
  max-width: none;
}
.gnav li a {
  font-family: var(--fontJp);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--baseColor);
  white-space: nowrap;
}
/* 区切りの「/」 */
.gnav li:not(:last-child) a::after {
  content: "/";
  padding: 0 1.6rem;
  color: var(--base50Color);
  font-weight: 400;
}
/* MENU（斜めのティール角／斜辺はMVの斜め＝45°に一致させるため inset=高さ） */
.site-header .drawer-hamburger,
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-hamburger {
  position: fixed;
  top: 0;
  right: 0;
  width: auto;
  /* 高さ＝画面幅の約7.9%＝MVのメインカラー部分が始まる位置。幅可変でも隙間なく密着 */
  height: 7.9vw;
  padding: 0 3rem 0 9vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: var(--mainColor);
  /* inset(7.9vw) = height(7.9vw) → 斜辺45°（MVのメインカラー斜めと一致） */
  clip-path: polygon(7.9vw 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1100;
}
/* ハンバーガーは細く長い2本線 */
.site-header .drawer-hamburger-icon {
  background-color: transparent;
  position: relative;
  display: block;
  width: 4.6rem;
  height: 1rem;
}
.site-header .drawer-hamburger-icon:before,
.site-header .drawer-hamburger-icon:after {
  content: "";
  position: absolute;
  left: 0;
  width: 4.6rem;
  height: 1px;
  background-color: #fff;
}
.site-header .drawer-hamburger-icon:before { top: 0; }
.site-header .drawer-hamburger-icon:after { top: 9px; }
.site-header .drawer-hamburger .text {
  margin-top: 0;
  color: #fff;
  font-family: var(--fontEn);
  letter-spacing: 0.12em;
  font-size: 1.4rem;
  line-height: 1;
}
/* 開いた状態ではMENUボタンをそのまま最前面に */
.drawer--right.drawer-open .drawer-hamburger {
  background: var(--mainColor);
}
/* ドロワー展開時はヘッダー（＝ドロワーを含むスタッキングコンテキスト）を
   フローティング（z-index:500）より前面へ。これでドロワーがフローティングを覆う */
.drawer-open .site-header {
  z-index: 1100;
}
/* 開いた状態＝2本線を中央で交差させて×にする（MENU文字は隠す） */
.drawer-open .site-header .drawer-hamburger-icon {
  height: 4.6rem;
}
.drawer-open .site-header .drawer-hamburger-icon:before,
.drawer-open .site-header .drawer-hamburger-icon:after {
  top: 50%;
  margin-top: -0.5px;
}
.drawer-open .site-header .drawer-hamburger-icon:before {
  transform: rotate(45deg);
}
.drawer-open .site-header .drawer-hamburger-icon:after {
  transform: rotate(-45deg);
}
.drawer-open .site-header .drawer-hamburger .text {
  display: none;
}
/* ドロワー右上のログインが×コーナーに重ならないよう右余白を確保 */
.drawer--right .drawer-nav {
  padding-right: 20rem;
}
/* ドロワー内ロゴ・ログイン */
.drawer-nav .site-logo img {
  width: 24rem;
}
/* ログインは開く前（ヘッダー）と同じ高さに上端揃え（背の高いロゴで中央寄せされ下がるのを防ぐ） */
.drawer-nav .hdr-inner .mypage.login {
  align-self: flex-start;
  margin-top: -0.5rem;
}
/* ログイン時の「スクマネ 太郎」も開く前（ヘッダー top21.5px）と同じ位置に上端揃え */
.drawer-nav .hdr-inner .linkG {
  align-self: flex-start;
  margin-top: -0.35rem;
}
.drawer-nav .mypage.login a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--baseColor);
}
.drawer--right .drawer-nav .drawer-menu a {
  font-family: var(--fontJp);
  font-weight: 600;
}
/* SP：ヘッダー内ログイン */
.sp-login {
  margin: 0;
}
.sp-login a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.4rem;
  color: var(--baseColor);
}
.sp-login img {
  width: 24px;
  height: 24px;
}

/*-----------------------

     メインビジュアル

-----------------------*/
.top-mv {
  margin-bottom: 0;
}
.mv-visual {
  position: relative;
}
.mv-catch img {
  width: 100%;
  vertical-align: bottom;
}
/* PCリード文（背景画像の左下に重ねる） */
.mv-lead {
  position: absolute;
  left: 15%;
  bottom: 4%;
  font-family: var(--fontJp);
  font-weight: 500;
  font-size: clamp(1.2rem, 0.85rem + 0.6vw, 1.8rem);
  line-height: 1.8;
  color: var(--baseColor);
  text-align: left;
}
/* 実績カウンター */
.mv-stats {
  background: linear-gradient(90deg, #1a1310 0%, var(--baseColor) 50%, #1a1310 100%);
  padding: 2.5rem 3rem;
}
.stats-list {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 128rem;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.stats-list li {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0.5rem 1rem;
}
/* 斜めの区切り線（MVの斜めモチーフ＝45°と角度を揃える） */
.stats-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 8.5rem;
  background: var(--sub50Color);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.7;
}
.stats-list .label {
  color: #cfcac2;
  font-family: var(--fontJp);
  font-size: clamp(1.1rem, 0.8rem + 0.5vw, 1.5rem);
  margin-bottom: 0.4rem;
  line-height: 1.3;
  text-align: center;
}
.stats-list .value {
  color: #fff;
  font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 1.4vw, 4rem);
  line-height: 1.1;
  text-align: center;
}
.stats-list .value small {
  font-size: 0.5em;
  margin-left: 0.2em;
}
.stats-list .value.sm {
  font-size: clamp(1.6rem, 1.1rem + 0.9vw, 2.6rem);
}

/*-----------------------

     下層ページ タイトル

-----------------------*/
/* 下層（トップ以外の全ページ）はMVが無く重ねる相手がいないため、絶対配置ヘッダーの高さぶんだけ本文を下げる。
   ※以前は body-kouza-list 限定だったが、実アプリはページ毎に body クラスが異なる（login/form/member等）ため、
     「トップ(.body-page-detail-top)以外」を全て対象に一般化。これで login 等でも本文がヘッダーに潜り込まない。 */
body:not(.body-page-detail-top) .container {
  padding-top: 14rem;
}
.content-header {
  background: none;
  width: auto;
  left: auto;
  transform: none;
  padding: 3rem 0;
  /* タイトルを下げたぶん、本文が下がりすぎないよう下余白を詰める */
  margin-bottom: clamp(2rem, 4vw, 6rem);
}
.page-header {
  color: var(--baseColor);
  font-family: var(--fontJp);
  font-weight: 600;
  text-align: left;
  padding-inline: 0;
  letter-spacing: 0.08em;
}

/*-----------------------

         フッター

-----------------------*/
footer.main-footer {
  position: relative;
  margin-top: 9rem;
  padding: 0;
  background-color: #f2f1ee;
  overflow: hidden;
}
/* 七宝柄の背景 */
footer.main-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/pattern.webp);
  background-repeat: repeat;
  background-size: 90px 90px;
  opacity: 0.55;
  z-index: 0;
}
/* 「織」の透かし */
footer.main-footer::after {
  content: "";
  position: absolute;
  right: 3%;
  bottom: 0;
  width: 38%;
  max-width: 60rem;
  aspect-ratio: 1 / 1.1;
  background: url(../img/watermark-ori.webp) no-repeat center bottom;
  background-size: contain;
  opacity: 0.55;
  z-index: 0;
}
.ftr-inner {
  position: relative;
  z-index: 1;
  max-width: 128rem;
  margin: 0 auto;
  padding: 6rem 3rem 3rem;
}
.ftr-catch {
  text-align: left;
  margin-bottom: 5rem;
  transform: translateX(5rem);
}
.ftr-catch img {
  width: 72%;
  max-width: 82rem;
}
/* ロゴ・ナビのブロック：少し右へ寄せ＋下げてコピーライトに近づける */
.ftr-info {
  padding-left: 6rem;
  margin-top: 9rem;
}
.ftr-logo {
  margin-bottom: 2rem;
}
.ftr-logo img {
  width: 42%;
  max-width: 42rem;
}
ul.ftr-navi {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
ul.ftr-navi li {
  display: inline-block;
}
ul.ftr-navi li:not(:last-child)::after {
  content: "/";
  padding-left: 2rem;
  color: var(--base50Color);
}
ul.ftr-navi a {
  color: var(--baseColor);
  font-family: var(--fontJp);
  font-size: 1.5rem;
}
/* SNSアイコン */
ul.ftr-sns {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}
ul.ftr-sns li {
  line-height: 0;
}
ul.ftr-sns a {
  display: block;
  transition: opacity 0.3s;
}
ul.ftr-sns a:hover {
  opacity: 0.8;
}
ul.ftr-sns img {
  width: 4rem;
  height: 4rem;
  display: block;
}
/* コピーライト：右へ寄せ＋ナビとの間隔を詰める（style.cssのpadding/clampを上書き） */
footer.main-footer p.copy {
  padding-left: 6rem;
  margin-top: 1.5rem;
  padding-top: 0;
  text-align: left;
}
footer.main-footer p.copy small {
  color: #000;
  font-family: var(--fontEn);
  letter-spacing: 0.08em;
  font-size: 1.3rem;
  font-weight: 400;
}

/*-----------------------

     フローティングバナー

-----------------------*/
.floating-banners a {
  transition: opacity 0.3s;
}
/* PC：右側固定（ドロワー z-index:1000 より下のレイヤー） */
.fb-sponsor.pc {
  position: fixed;
  right: 1.5rem;
  top: 26%;
  width: 18.5rem;
  z-index: 500;
}
.fb-dojo.pc {
  position: fixed;
  right: 1.8rem;
  top: calc(26% + 19.5rem);
  width: 17.5rem;
  z-index: 500;
}
/* SP用バナーはPCでは非表示（.spで制御） */

/*-----------------------

     レスポンシブ

-----------------------*/
@media screen and (max-width:1440px) {
  .gnav li a {
    font-size: 1.6rem;
  }
}
@media screen and (max-width:1024px) {
  .site-header {
    padding: 0 10rem 0 2rem;
  }
  /* コーナー高はベース(8.5rem)のまま＝ヘッダー高と一致 */
}
@media screen and (max-width:559px) {
  body {
    padding-bottom: 7rem; /* SP下部固定バーの逃げ */
  }
  /* ヘッダー（SPもMVに重ねる＝ロゴをMVの上に載せる） */
  .site-header {
    position: relative;
    z-index: 30;
    background: transparent;
    padding: 1.2rem 8rem 0 1.2rem;
  }
  /* MVをヘッダー下の余白ぶん引き上げてロゴに重ねる（コーナー下端7remと一致） */
  .top-container {
    position: relative;
    z-index: 1;
    margin-top: -2.2rem;
  }
  /* SP下層（トップ以外）：MVが無いので引き上げを解除し、タイトルを少し下げる余白を持たせる */
  body:not(.body-page-detail-top) .top-container {
    margin-top: 0;
  }
  body:not(.body-page-detail-top) .container {
    padding-top: 3rem;
  }
  .site-header .hdr-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .site-logo img {
    width: 40vw;
    height: auto;
    max-width: 24rem;
  }
  .sp-login {
    align-self: flex-start; /* ログインを上寄せ＝少し上へ */
    margin-top: 1rem;
  }
  .sp-login a {
    flex-direction: row;
  }
  /* SPログイン時：名前は入りきらないためヘッダーはアイコンのみ表示（ドロワー内は名前あり） */
  .sp .hdr-inner .mypage.loginBtn p {
    display: none;
  }
  /* アイコンのみのSPヘッダーは下線不要（login.cssの header .mypage border-bottom を打ち消す） */
  .sp .hdr-inner .mypage.loginBtn {
    border-bottom: none;
    margin-bottom: 0;
  }
  /* アイコンがMENUコーナーと重ならないよう少し左へ */
  .sp .hdr-inner .linkG.sp-login {
    margin-right: 3.5rem;
  }
  /* アイコンのみになるSPヘッダーは顔写真を大きめに */
  .sp .hdr-inner .loginBtn .img-circle {
    width: 4.6rem;
    height: 4.6rem;
  }
  /* メニュー文字は白＋中央寄せ（.sp-login a の baseColor/inline-flex が漏れるのを打ち消す） */
  .sp .hdr-inner .mypage-list .mypage-item a {
    color: #fff;
    display: block;
    text-align: center;
  }
  .sp .hdr-inner .mypage-list .mypage-item a i {
    color: #fff;
  }
  /* アイコンが右端に寄るため右揃え。アイコンとの距離も少し近づける */
  .sp .hdr-inner .mypage-list {
    left: auto;
    right: 0;
    top: 5.4rem;
  }
  /* ドロワー内のマイページメニューもヘッダーと統一：名前のすぐ下に近づけ、
     左端をアイコン（アバター）に揃える */
  .drawer-nav .mypage-list {
    top: 5.5rem;
    left: 0;
    right: auto;
  }
  .site-header .drawer-hamburger,
  .drawer--right .drawer-hamburger,
  .drawer--right.drawer-open .drawer-hamburger {
    height: 7rem;
    /* 開閉で幅が変わらないよう固定（開くとMENU文字が消えて狭くなるのを防ぐ） */
    width: 10.5rem;
    /* 2本線＋文字を少し下へ（上パディングで下寄せ／外寸は7remのまま） */
    box-sizing: border-box;
    justify-content: flex-start;
    padding: 2.9rem 1.4rem 0 5rem;
    gap: 0.6rem;
    clip-path: polygon(7rem 0, 100% 0, 100% 100%, 0 100%);
  }
  /* 開いた状態は×を絶対配置で、閉じた2本線＋MENU文字の重心(cx364.5,cy42.5)に合わせる */
  .drawer-open .site-header .drawer-hamburger-icon {
    position: absolute;
    left: 5.95rem;
    top: 1.95rem;
  }
  /* 開いた状態のドロワー内ロゴは閉じたヘッダーロゴと同じくらいに */
  .drawer-nav .site-logo img {
    width: 40vw;
    max-width: 24rem;
  }
  .site-header .drawer-hamburger-icon {
    width: 2.2rem;
  }
  .site-header .drawer-hamburger-icon:before,
  .site-header .drawer-hamburger-icon:after {
    width: 2.2rem;
  }
  .site-header .drawer-hamburger-icon:after {
    top: 7px;
  }
  .site-header .drawer-hamburger .text {
    margin-top: 0;
    font-size: 1.1rem;
  }
  /* メインビジュアル：SPは実績を2列に */
  .stats-list {
    flex-wrap: wrap;
  }
  .stats-list li {
    flex: 0 0 50%;
    padding: 1.2rem 1rem;
  }
  .stats-list li:nth-child(odd)::after {
    display: block;
  }
  .stats-list li:nth-child(even)::after {
    display: none;
  }
  /* フッター */
  .ftr-inner {
    padding: 4rem 6% 2.5rem;
  }
  /* SPは中央寄せ配置のためPCの左右・上下調整をリセット */
  .ftr-catch {
    transform: none;
    text-align: center;
  }
  .ftr-info {
    margin-top: 0;
  }
  .ftr-info,
  footer.main-footer p.copy {
    padding-left: 0;
  }
  .ftr-catch img {
    width: 84%; /* SPは縦積みキャッチ（catch-sp）に合わせて大きめ */
    margin-left: auto; /* .spでdisplay:blockになるため中央寄せ（text-alignでは効かない） */
    margin-right: auto;
  }
  .ftr-logo {
    text-align: center; /* フッターロゴをセンタリング */
  }
  .ftr-logo img {
    width: 62%;
    max-width: 34rem;
  }
  ul.ftr-navi {
    justify-content: center;
    gap: 1rem 1.5rem;
  }
  ul.ftr-navi a {
    font-size: 1.3rem;
  }
  /* SNSは中央寄せ・やや大きめ */
  ul.ftr-sns {
    justify-content: center;
    gap: 1.8rem;
    margin-top: 1.8rem;
  }
  ul.ftr-sns img {
    width: 4.4rem;
    height: 4.4rem;
  }
  footer.main-footer p.copy {
    text-align: center;
  }
  footer.main-footer::after {
    width: 70%;
    opacity: 0.4;
  }
  /* 下層タイトル */
  .content-header {
    padding: 2rem 0;
  }
  /* フローティング：SP六角バナー＋下部固定バー */
  .fb-sponsor.sp {
    position: fixed;
    right: 1rem;
    bottom: 8.5rem;
    width: 13.5rem;
    z-index: 1002;
  }
  .fb-bottombar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* 黒い透過の下地 */
    background: rgba(0, 0, 0, 0.6);
    padding: 0.9rem 1.2rem;
    z-index: 1003;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
  }
  .fb-bottombar a {
    flex: 1 1 50%;
    line-height: 0;
  }
  .fb-bottombar img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

/*==============================================================

   トップ コンテンツ Section 01
   侍伊織とは？／侍伊織スイングとは？／オンラインサロン導入

==============================================================*/
.sec01 {
  font-family: var(--fontJp);
  color: var(--baseColor);
  line-height: 1.75;
}
/* 各ブロック共通の中央寄せインナー */
.sec01 .sec-inner {
  position: relative;
  z-index: 2;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 4rem;
}
/* 英語サブ見出し（EB Garamond） */
.sec01 .sec-en {
  font-family: var(--fontEn);
  letter-spacing: 0.16em;
  font-weight: 500;
}

/*---- 侍伊織とは？（ティール背景） ----*/
.sec01-about {
  position: relative;
  background: var(--mainColor);
  padding: 8rem 0;
  overflow: hidden;
}
/* 七宝柄あしらい（左上＋右下の2レイヤー） */
.sec01-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* 左：七宝柄をティール背景の下端まで（高さ100%・アスペクト維持）。
       幅広の上部は中央の写真の背後に隠れ、左端に縦帯として見える */
    url(../img/about-pattern-l.webp) no-repeat left top / auto 100%,
    url(../img/about-pattern-r.webp) no-repeat right bottom / 52rem 44rem;
  z-index: 0;
  pointer-events: none;
}
/* 「侍」透かし（中央寄り） */
.sec01-about::after {
  content: "";
  position: absolute;
  right: 16%;
  top: 50%;
  transform: translateY(-50%);
  width: 50rem;
  height: 54rem;
  background: url(../img/wm-samurai.webp) no-repeat center / contain;
  z-index: 0;
  pointer-events: none;
}
.sec01-about .sec-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5rem;
}
.about-photo {
  flex: 0 0 46%;
}
.about-photo img {
  width: 100%;
  border: 5px solid #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18);
  vertical-align: bottom;
}
.about-body {
  flex: 1;
  color: #fff;
}
.about-title img {
  width: 36rem;
  max-width: 90%;
  vertical-align: bottom;
}
.about-body .sec-en {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 1.2rem 0 2.6rem;
}
.about-body .sec-lead {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 2.2rem;
}
.about-body p {
  font-size: 1.5rem;
  line-height: 1.95;
  margin-bottom: 1.6rem;
}
.about-body p:last-child {
  margin-bottom: 0;
}

/*---- 侍伊織スイングとは？（ダーク背景） ----*/
.sec01-swing {
  position: relative;
  background: #1a1310;
  padding: 8rem 0 9rem;
  /* キャラの頭部を上のティールセクションへ食い込ませ前面に出すため overflow は visible。
     食い込み量は min-height で制御（背景はセクション枠内のまま） */
  min-height: 52rem;
  overflow: visible;
}
/* ダーク背景をセクション枠内に限定しつつ、はみ出すキャラだけを前面に見せる */
.sec01-swing > .sec-inner {
  z-index: 2;
}
/* 「伊」透かし（右） */
.sec01-swing::after {
  content: "";
  position: absolute;
  right: 9%;
  top: 44%;
  transform: translateY(-50%);
  width: 42rem;
  height: 44rem;
  background: url(../img/wm-brush.webp) no-repeat center / contain;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}
.swing-body {
  /* 右のキャラとの間に余白を確保するため本文幅を狭める */
  max-width: 44rem;
  color: #fff;
}
.swing-title {
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
}
.swing-body .sec-en {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 3rem;
}
.swing-body p {
  font-size: 1.5rem;
  line-height: 2;
}
/* 着物キャラ（右） */
.swing-figure {
  position: absolute;
  right: 30%;
  bottom: 0;
  width: 33rem;
  z-index: 3;
  pointer-events: none;
}

/*---- オンラインサロン導入（白背景） ----*/
.sec01-salon {
  position: relative;
  background: #fff;
  padding: 7rem 0 0;
  overflow: hidden;
}
/* 左上ティール斜め */
.sec01-salon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30rem;
  height: 16rem;
  background: url(../img/diag-teal-b.webp) no-repeat left top / contain;
  z-index: 1;
}
/* 右下ティール斜め＋「織」透かし */
.sec01-salon::after {
  content: "";
  position: absolute;
  top: 2rem;
  right: 0;
  width: 60rem;
  height: 74rem;
  background: url(../img/wm-ori-teal.webp) no-repeat right top / contain;
  z-index: 1;
  pointer-events: none;
}
.sec01-salon .sec-inner {
  text-align: center;
}
.salon-logo {
  margin: 0 0 3rem;
  text-align: center;
}
.salon-logo img {
  width: 30rem;
  max-width: 70%;
}
.salon-lead {
  max-width: 88rem;
  margin: 0 auto 4rem;
  font-size: 1.6rem;
  line-height: 2;
  text-align: center;
}
.salon-map {
  position: relative;
  display: inline-block;
  width: 58rem;
  max-width: 100%;
  /* salon-lead との間に余白を確保 */
  margin: 1rem auto 0;
  z-index: 2;
}
.salon-map .map {
  width: 100%;
  vertical-align: bottom;
}
.salon-map .chibi {
  position: absolute;
  left: -13rem;
  /* キャラの足元をCTA帯の背景に少し触れる位置まで下げる */
  bottom: -3rem;
  width: 21rem;
  z-index: 3;
}
/* CTA帯（ダーク七宝） */
.salon-cta {
  position: relative;
  /* マップ画像とCTA帯の間に少し余白 */
  margin-top: 2.5rem;
  padding: 6rem 2rem 6rem;
  text-align: center;
  background-color: var(--baseColor);
}
/* 七宝柄あしらい（アセット15をタイル） */
.salon-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/pattern-shippou.webp) repeat;
  background-size: 64px 64px;
  opacity: 0.16;
}
/* CTA帯の上・右に配置するティール斜め（アセット9） */
.salon-cta::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  width: 34rem;
  height: 22rem;
  background: url(../img/salon-diag-br.webp) no-repeat right bottom / contain;
  z-index: 1;
  pointer-events: none;
}
.salon-cta > * {
  position: relative;
  z-index: 2;
}
/* 金グラデ CTAボタン（セクション共通で使用） */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-width: 46rem;
  max-width: 90%;
  box-sizing: border-box;
  padding: 2.1rem 4rem;
  color: #fff;
  font-family: var(--fontJp);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 0.1em;
  background: var(--goldGradient);
  border: 1px solid #ecd68f;
  box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.35);
  transition: opacity 0.3s;
}
.cta-btn:hover {
  opacity: 0.9;
  color: #fff;
}
.cta-btn::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.cta-en {
  margin-top: 2.2rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--fontEn);
  letter-spacing: 0.22em;
  font-size: 1.4rem;
  text-align: center;
}

/*---- Section 01 スマホ ----*/
@media screen and (max-width:559px) {
  .sec01 .sec-inner {
    padding: 0 6%;
  }
  /* 侍伊織とは？：写真→本文の縦積み */
  .sec01-about {
    padding: 5rem 0;
  }
  /* 七宝柄あしらいはSPでは小さめに */
  .sec01-about::before {
    background:
      url(../img/about-pattern-l.webp) no-repeat left top / 20rem 17rem,
      url(../img/about-pattern-r.webp) no-repeat right bottom / 20rem 17rem;
  }
  /* 「侍」透かしもSPでは控えめに */
  .sec01-about::after {
    width: 26rem;
    height: 28rem;
    right: 2%;
  }
  .sec01-about .sec-inner {
    flex-direction: column;
    gap: 3rem;
  }
  .about-photo {
    flex: none;
    width: 100%;
  }
  .about-photo img {
    border-width: 3px;
  }
  .about-title img {
    width: 24rem;
  }
  .about-body .sec-en {
    font-size: 1.3rem;
    margin: 1rem 0 2rem;
  }
  .about-body .sec-lead {
    font-size: 2rem;
    margin-bottom: 1.8rem;
  }
  .about-body p {
    font-size: 1.4rem;
    line-height: 1.9;
  }
  /* 侍伊織スイングとは？：本文→キャラを下に */
  .sec01-swing {
    /* SP はキャラ（アセット7）の下端をセクション下端にぴったり合わせるため下パディング0 */
    padding: 5rem 0 0;
  }
  .sec01-swing::after {
    width: 24rem;
    height: 26rem;
    right: 2%;
    top: 30%;
  }
  .swing-body {
    max-width: none;
  }
  .swing-title {
    font-size: 2.6rem;
  }
  .swing-body .sec-en {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }
  .swing-body p {
    font-size: 1.4rem;
  }
  .swing-figure {
    position: static;
    display: block;
    width: 56%;
    margin: 1rem 0 0 auto;
  }
  /* オンラインサロン導入 */
  .sec01-salon {
    padding: 5rem 0 0;
  }
  .sec01-salon::before {
    width: 16rem;
    height: 9rem;
  }
  .sec01-salon::after {
    width: 16rem;
    height: 22rem;
  }
  .salon-logo img {
    width: 22rem;
    max-width: 80%;
  }
  .salon-lead {
    font-size: 1.4rem;
    text-align: left;
    margin-bottom: 3rem;
  }
  .salon-map {
    width: 100%;
  }
  .salon-map .chibi {
    left: -1rem;
    width: 11rem;
    bottom: -1.5rem;
  }
  .salon-cta {
    margin-top: 2rem;
    padding: 4rem 6% 4.5rem;
  }
  /* ティール斜め（アセット9）はSPでは小さめに */
  .salon-cta::after {
    width: 15rem;
    height: 10rem;
  }
  .cta-btn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: 1.6rem;
    padding: 1.8rem 2rem;
  }
  .cta-en {
    font-size: 1.2rem;
    letter-spacing: 0.16em;
  }
}

/*==============================================================

   トップ コンテンツ Section 02  SNS紹介

==============================================================*/
.sec02 {
  position: relative;
  background: #fff;
  padding: 9rem 0 8rem;
  overflow: hidden;
  font-family: var(--fontJp);
  color: var(--baseColor);
}
.sec02 .sec-inner {
  position: relative;
  z-index: 1;
  max-width: 112rem;
  margin: 0 auto;
  padding: 0 4rem;
  text-align: center;
}
/* .content p の左寄せを打ち消してセンタリング */
.sec02 .sec-inner p {
  text-align: center;
}
.sec02 .sec-en {
  color: var(--mainColor);
  font-family: var(--fontEn);
  letter-spacing: 0.2em;
  font-size: 1.5rem;
  margin: 0.8rem 0 2.4rem;
}

/* 見出し（里 家紋 透かし） */
.sns-head {
  position: relative;
}
.sns-head::before {
  content: "";
  position: absolute;
  left: 30%;
  top: -3rem;
  transform: translateX(-50%);
  width: 24rem;
  height: 24rem;
  background: url(../img/seal-sato.webp) no-repeat center / contain;
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}
.sns-logo {
  margin-bottom: 1rem;
}
.sns-logo img {
  width: 13rem;
}
.sns-title {
  font-weight: 600;
  font-size: 3.6rem;
  letter-spacing: 0.1em;
}
.sns-desc {
  font-size: 1.6rem;
  line-height: 1.9;
}

/* キャッチ（＼ ／付き） */
.sns-catch-sub {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  margin-top: 5.5rem;
  font-size: 1.9rem;
  letter-spacing: 0.04em;
}
.sns-catch-sub::before,
.sns-catch-sub::after {
  content: "";
  width: 2px;
  height: 2.6rem;
  background: var(--baseColor);
}
.sns-catch-sub::before { transform: rotate(-20deg); }
.sns-catch-sub::after { transform: rotate(20deg); }
.sns-catch {
  font-weight: 600;
  font-size: 3.4rem;
  letter-spacing: 0.04em;
  margin: 1.2rem 0 4.5rem;
}
.sns-catch span {
  color: var(--mainColor);
}

/* SNS 3カラム */
.sns-cards {
  display: flex;
  justify-content: center;
  max-width: 100rem;
  margin: 0 auto 4rem;
  padding: 0;
  list-style: none;
}
.sns-cards li {
  position: relative;
  flex: 1;
  padding: 0 2rem;
}
.sns-cards li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15rem;
  background: #dcdcdc;
}
.sns-cards .ico img {
  width: 6.2rem;
  height: 6.2rem;
}
.sns-cards .follow {
  font-size: 1.7rem;
  margin-top: 1.4rem;
}
.sns-cards .follow strong {
  color: var(--mainColor);
  font-family: var(--fontEn);
  font-weight: 600;
  font-size: 3rem;
  margin: 0 0.3rem;
}
.sns-cards .views-label {
  font-size: 1.4rem;
  margin-top: 1.4rem;
}
.sns-cards .views {
  font-size: 1.6rem;
  line-height: 1.2;
}
.sns-cards .views strong {
  color: var(--mainColor);
  font-family: var(--fontEn);
  font-weight: 600;
  font-size: 3.4rem;
  margin-right: 0.3rem;
}
/* 「億」「千万」の単位もmainColorに */
.sns-cards .views .unit {
  color: var(--mainColor);
  font-weight: 600;
  font-size: 2rem;
  margin-right: 0.2rem;
}
.sns-cards .views small {
  font-size: 1.3rem;
}
.sns-cards .note {
  margin-top: 1.4rem;
  font-size: 1.3rem;
  line-height: 1.65;
  color: #666;
}

/* 2億以上バッジ */
.sns-badge {
  max-width: 100rem;
  margin: 3rem auto 1.2rem;
}
.sns-badge img {
  width: 100%;
}
.sns-badge .sp {
  display: none;
}
.sns-date {
  font-size: 1.3rem;
  margin-bottom: 2.6rem;
}
.sns-line {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 1.6rem;
}
.sns-line img {
  width: 4rem;
  height: 4rem;
}

/*---- Section 02 スマホ ----*/
@media screen and (max-width:559px) {
  .sec02 {
    padding: 6rem 0 5rem;
  }
  .sec02 .sec-inner {
    padding: 0 6%;
  }
  .sns-head::before {
    width: 22rem;
    height: 22rem;
    top: -2rem;
  }
  .sns-logo img { width: 11rem; }
  .sns-title { font-size: 2.8rem; }
  .sns-desc { font-size: 1.4rem; }
  .sns-catch-sub {
    font-size: 1.5rem;
    gap: 1.4rem;
    margin-top: 4rem;
  }
  .sns-catch {
    font-size: 2.3rem;
    margin: 1rem 0 3.5rem;
  }
  /* 3カラム → 縦積み（区切り線は下線に） */
  .sns-cards {
    flex-direction: column;
    max-width: 32rem;
    gap: 2.5rem;
  }
  .sns-cards li {
    padding: 0 0 2.5rem;
  }
  .sns-cards li:not(:last-child)::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
  }
  .sns-badge .pc { display: none; }
  .sns-badge .sp {
    display: block;
    max-width: 34rem;
    margin: 0 auto;
  }
  .sns-line {
    font-size: 1.35rem;
    gap: 0.8rem;
  }
  .sns-line img { width: 3.4rem; height: 3.4rem; }
}

/* ============================================================
   Section 03: 伊織の里「7つの魅力」
============================================================ */
.sec03 {
  background: #fff7ec;
  padding: 8rem 0 9rem;
}
.sec03 .sec-inner {
  text-align: center;
}

/* ---- ヘッダー ---- */
.hl-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.hl-head-chibi {
  flex: 0 0 auto;
  width: 17rem;
  align-self: flex-end;
}
.hl-head-phone {
  flex: 0 0 auto;
  width: 21rem;
}
.hl-head-main {
  flex: 0 1 auto;
  position: relative;
}
/* 里 家紋 透かし */
.hl-head-main::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 3.5rem;
  width: 15rem;
  height: 15rem;
  background: url(../img/hl-seal.webp) no-repeat center / contain;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
.hl-title {
  position: relative;
  z-index: 1;
}
.hl-title img {
  width: 44rem;
  max-width: 100%;
  vertical-align: bottom;
}
.hl-catch {
  position: relative;
  z-index: 1;
  margin-top: 2rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hl-catch span {
  color: var(--mainColor);
}
.hl-lead {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.9;
  text-align: center;
}

/* ---- カード共通 ---- */
.hl-cards {
  display: grid;
  list-style: none;
  padding: 0;
  margin: 6rem auto 0;
  max-width: 116rem;
}
.hl-cards-top {
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 3.5rem;
}
.hl-cards-bottom {
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 2rem;
  margin-top: 4.5rem;
}
.hl-card {
  /* 各項目を白パネル化 */
  position: relative;
  background: #fff;
  border-radius: 1.2rem;
  padding: 2.6rem 2.2rem 2.8rem;
  box-shadow: 0 0.6rem 1.8rem rgba(35, 24, 21, 0.07);
  text-align: center;
}
/* 番号バッジはパネル左上に配置 */
.hl-badge {
  position: absolute;
  top: -0.8rem;
  left: -0.8rem;
  width: 5.6rem;
  height: 5.6rem;
  z-index: 2;
}
.hl-card-head {
  /* タイトルはバッジ下に中央寄せ */
  margin-top: 2.2rem;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 上段01〜03のバッジは大きめ */
.hl-cards-top .hl-badge {
  width: 7.2rem;
  height: 7.2rem;
}
.hl-cards-top .hl-card-head {
  margin-top: 3.8rem;
}
.hl-card-title {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.hl-cards-bottom .hl-badge {
  width: 5rem;
  height: 5rem;
}
.hl-cards-bottom .hl-card-head {
  margin-top: 1.8rem;
}
.hl-cards-bottom .hl-card-title {
  font-size: 1.6rem;
  line-height: 1.3;
}
.hl-card-title span {
  color: var(--mainColor);
}
.hl-card-figure {
  margin: 1.8rem 0 1.6rem;
}
.hl-card-figure img {
  max-width: 100%;
  vertical-align: bottom;
}
.hl-cards-top .hl-card-figure img {
  height: 30rem;
  object-fit: contain;
}
.hl-cards-bottom .hl-card-figure {
  margin: 1.4rem 0 1.4rem;
  min-height: 17rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hl-cards-bottom .hl-card-figure img {
  max-height: 17rem;
  max-width: 100%;
}
.hl-card-sub {
  text-align: center;
  color: var(--mainColor);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.2rem;
}
.hl-cards-bottom .hl-card-sub {
  font-size: 1.6rem;
}
.hl-card-body {
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.9;
}
.hl-cards-bottom .hl-card-body {
  font-size: 1.35rem;
  line-height: 1.85;
}
.hl-card-note {
  text-align: left;
  margin-top: 1.4rem;
  font-size: 1.2rem;
  color: #999;
}

/* ---- フッターCTA ---- */
.hl-cta {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  margin-top: 7rem;
}
.hl-cta-chibi {
  flex: 0 0 auto;
}
.hl-cta-chibi-l { width: 12rem; }
.hl-cta-chibi-r { width: 14rem; }
.hl-cta-main {
  flex: 0 1 auto;
  padding: 0 1rem 1rem;
}
.hl-cta-logo {
  text-align: center;
}
.hl-cta-logo img {
  width: 26rem;
  max-width: 80%;
  vertical-align: bottom;
}
.hl-cta-catch {
  margin: 1.4rem 0 2.2rem;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hl-cta-catch span {
  color: var(--mainColor);
}
.hl-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  min-width: 42rem;
  max-width: 90%;
  box-sizing: border-box;
  padding: 1.9rem 3rem;
  background: var(--mainColor);
  color: #fff;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0.6rem;
  box-shadow: 0 0.5rem 1.2rem rgba(6, 168, 162, 0.3);
  transition: opacity 0.2s;
}
.hl-cta-btn:hover { opacity: 0.88; color: #fff; }
/* 白丸＋ティール矢印 */
.hl-cta-btn::after {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7l5 5-5 5' fill='none' stroke='%2306a8a2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.4rem no-repeat,
    #fff;
}

/* ---- Section 03 スマホ ---- */
@media screen and (max-width:559px) {
  .sec03 {
    padding: 5rem 0 6rem;
  }
  .sec03 .sec-inner {
    padding: 0 6%;
  }
  /* ヘッダー：チラビ・電話を縦積み気味に */
  .hl-head {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .hl-head-chibi {
    order: 2;
    width: 10rem;
  }
  .hl-head-phone {
    order: 3;
    width: 13rem;
  }
  .hl-head-main {
    order: 1;
    flex: 1 0 100%;
  }
  .hl-head-main::before {
    width: 14rem;
    height: 14rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .hl-title img { width: 30rem; }
  .hl-catch { font-size: 1.7rem; margin-top: 1.4rem; }
  .hl-lead { font-size: 1.4rem; text-align: left; }
  /* カード：全て1カラム */
  .hl-cards-top,
  .hl-cards-bottom {
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-top: 4rem;
    max-width: 40rem;
  }
  .hl-cards-top .hl-card-figure img {
    height: auto;
    max-height: 32rem;
  }
  .hl-card-title { font-size: 1.8rem; }
  .hl-cards-bottom .hl-card-title { font-size: 1.8rem; }
  .hl-card-sub { font-size: 1.7rem; }
  .hl-cards-bottom .hl-card-sub { font-size: 1.7rem; }
  .hl-card-body,
  .hl-cards-bottom .hl-card-body { font-size: 1.4rem; }
  /* フッターCTA */
  .hl-cta {
    flex-wrap: wrap;
    margin-top: 5rem;
  }
  .hl-cta-chibi-l { order: 2; width: 9rem; }
  .hl-cta-chibi-r { order: 3; width: 10rem; }
  .hl-cta-main { order: 1; flex: 1 0 100%; }
  .hl-cta-logo img { width: 20rem; }
  .hl-cta-catch { font-size: 1.9rem; margin: 1.2rem 0 1.8rem; }
  .hl-cta-btn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: 1.6rem;
    padding: 1.7rem 2rem;
  }
}

/* ============================================================
   Section 04: 料金プラン＋最終CTA
============================================================ */
.sec04 {
  background: #fff;
}
/* 料金プラン（白背景＋七宝あしらい） */
.price-wrap {
  position: relative;
  overflow: hidden;
}
/* 七宝柄あしらい（アセット48）を全面にタイル */
.price-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/price-pattern.webp) repeat;
  background-size: 92px 92px;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
/* 右下ティール斜め（アセット60） */
.price-diag {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24rem;
  z-index: 0;
  pointer-events: none;
  vertical-align: bottom;
}
.sec04 .sec-inner {
  position: relative;
  z-index: 1;
  padding-top: 8rem;
  padding-bottom: 8rem;
  text-align: center;
}
.price-logo {
  text-align: center;
}
.price-logo img {
  width: 20rem;
  max-width: 60%;
  vertical-align: bottom;
}
.price-title {
  margin: 1.4rem 0 0.6rem;
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sec04 .sec-en {
  text-align: center;
  font-size: 1.5rem;
  color: var(--mainColor);
  font-family: var(--fontEn);
  letter-spacing: 0.16em;
}

/* ---- プランカード ---- */
.price-cards {
  display: flex;
  justify-content: center;
  gap: 3rem;
  max-width: 96rem;
  margin: 5rem auto 0;
}
.price-card {
  position: relative;
  flex: 1;
  background: #fff;
  padding: 3.4rem 3rem 3.2rem;
  text-align: center;
}
/* ベーシック：ティール二重枠 */
.price-basic {
  border: 2px solid var(--mainColor);
}
.price-basic::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--mainColor);
  pointer-events: none;
}
/* プレミアム：装飾ゴールドフレーム（アセット54=上／55=下／56=左右レール） */
.price-premium {
  border: none;
  /* 上下の装飾帯は幅100%で高さ自動、左右レールは全高にストレッチ */
  background:
    url(../img/frame-top.webp) top center / 100% auto no-repeat,
    url(../img/frame-bottom.webp) bottom center / 100% auto no-repeat,
    url(../img/frame-side.webp) center center / 100% 100% no-repeat,
    #fff;
}
.plan-en {
  text-align: center;
  font-family: var(--fontEn);
  font-size: 1.3rem;
  letter-spacing: 0.2em;
}
.price-basic .plan-en { color: var(--mainColor); }
.price-premium .plan-en { color: var(--goldDeep); }
.plan-name {
  margin: 0.6rem 0 1.4rem;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.price-basic .plan-name { color: var(--mainColor); }
.price-premium .plan-name { color: var(--goldDeep); }
.plan-price {
  text-align: center;
  padding-bottom: 2rem;
  margin-bottom: 2.2rem;
  border-bottom: 1px dashed #d5d5d5;
  font-size: 1.7rem;
  font-weight: 600;
}
.plan-price strong {
  font-family: var(--fontEn);
  font-size: 3.8rem;
  margin: 0 0.3rem;
}
.price-basic .plan-price strong { color: var(--mainColor); }
.price-premium .plan-price strong { color: var(--goldDeep); }
.plan-price small {
  font-size: 1.3rem;
  font-weight: 400;
  color: #777;
}
/* ベーシック特典（2カラム・ティールボール） */
.plan-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 2rem;
  list-style: none;
  padding: 0;
  text-align: left;
  max-width: 38rem;
  margin: 0 auto;
}
.plan-feats li {
  padding-left: 2.6rem;
  font-size: 1.45rem;
  line-height: 1.4;
  background: url(../img/ball-teal.webp) no-repeat left 0.1em / 1.8rem;
}
.plan-feats .feat-wide {
  grid-column: 1 / -1;
}
/* プレミアム特典
   左のボール画像は共通幅のカラムに右揃え、文章の左端を揃える */
.plan-feats-premium {
  --ball-col: 5.4rem;   /* ボール用カラム幅（大ボールの幅に合わせる） */
  --ball-gap: 1.4rem;   /* ボールと文章の間隔 */
  list-style: none;
  padding: 0;
  text-align: left;
  max-width: 34rem;
  margin: 0 auto;
}
.plan-feats-premium .feat-basic,
.plan-feats-premium .feat-main {
  display: flex;
  align-items: center;
  gap: var(--ball-gap);
  font-size: 1.45rem;
}
.plan-feats-premium .feat-basic {
  margin-bottom: 1.4rem;
}
/* 小ボールをカラム内で右揃え → 大ボールと右端が揃う */
.plan-feats-premium .feat-basic::before {
  content: "";
  flex: 0 0 var(--ball-col);
  height: 1.8rem;
  background: url(../img/ball-gold.webp) no-repeat right center / 1.8rem;
}
.plan-feats-premium .feat-main {
  line-height: 1.55;
  font-weight: 600;
}
.feat-ball {
  flex: 0 0 var(--ball-col);
  width: var(--ball-col);
  height: var(--ball-col);
}
/* プランボタン */
.plan-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84%;               /* フレーム（特に装飾角）と被らないよう少し細く */
  box-sizing: border-box;
  margin: 2.6rem auto 0;    /* 中央寄せ */
  padding: 1.5rem 2rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0.4rem;
  background: linear-gradient(180deg, #1cb3ad 0%, var(--mainColor) 100%);
  box-shadow: 0 0.4rem 0.9rem rgba(6, 168, 162, 0.28);
  transition: opacity 0.2s;
}
.plan-btn-gold {
  background: var(--goldGradient);
  box-shadow: 0 0.4rem 0.9rem rgba(184, 145, 47, 0.28);
}
/* hover/focus/active いずれでも文字を白のまま維持（グローバル a:hover/:focus の color:inherit 対策） */
.plan-btn:hover,
.plan-btn:focus,
.plan-btn:active { opacity: 0.9; color: #fff; }
.plan-btn::after {
  content: "";
  position: absolute;
  right: 1.8rem;
  width: 0;
  height: 0;
  border-left: 0.7rem solid #fff;
  border-top: 0.45rem solid transparent;
  border-bottom: 0.45rem solid transparent;
}
/* プレミアムのキャラ */
.premium-chibi {
  position: absolute;
  right: -9rem;
  bottom: 0;
  width: 13rem;
  z-index: 2;
  pointer-events: none;
}

/* ---- 最終CTA（フルブリード写真） ---- */
.final-cta {
  position: relative;
  padding: 8rem 0 8.5rem;
  background: url(../img/cta-bg.webp) no-repeat center / cover;
  /* overflow:hidden を外し、女性(63)が上のセクションへはみ出て前面に出られるように */
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 35, 20, 0.55) 0%, rgba(15, 35, 20, 0.3) 55%, rgba(15, 35, 20, 0.1) 100%);
}
.final-woman {
  position: absolute;
  right: 16%;
  bottom: 0;
  width: 34rem;
  z-index: 3;   /* 上のセクションより前面 */
  pointer-events: none;
}
.final-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 4rem 0 12rem;   /* 文章・ボタンを少し右寄りに */
  color: #fff;
}
.final-logo img {
  width: 22rem;
  max-width: 70%;
  vertical-align: bottom;
}
.final-catch {
  margin: 1.6rem 0 1.4rem;
  font-size: 4.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.3);
}
.final-lead {
  font-size: 1.7rem;
  margin-bottom: 3rem;
  text-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.3);
}
.final-cta-inner .cta-btn {
  margin: 0;
}

/* ---- Section 04 スマホ ---- */
@media screen and (max-width:559px) {
  .sec04 .sec-inner {
    padding: 5rem 6% 5rem;
  }
  .price-title { font-size: 2.8rem; }
  .price-logo img { max-width: 55%; }
  /* カードは縦積み */
  .price-cards {
    flex-direction: column;
    gap: 4rem;
    margin-top: 3.5rem;
  }
  .price-card { padding: 3rem 2rem 2.8rem; }
  .plan-name { font-size: 2.3rem; }
  .plan-price strong { font-size: 3.2rem; }
  /* 特典はSPでは1カラム */
  .plan-feats {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 30rem;
    margin: 0 auto;
  }
  .plan-feats li,
  .plan-feats-premium .feat-basic { font-size: 1.4rem; }
  .plan-feats-premium { max-width: 30rem; margin: 0 auto; }
  /* SP: 文章がボールに圧迫されて折り返さないようボールを少し縮小 */
  .plan-feats-premium .feat-main { gap: 1rem; font-size: 1.35rem; }
  .feat-ball { width: 4.4rem; height: 4.4rem; }
  .premium-chibi {
    right: 1rem;
    bottom: auto;
    top: -1rem;
    width: 8.5rem;
  }
  /* 最終CTA */
  .final-cta {
    /* 下パディングで女性(63)の下端位置を調整し、挙げた指先がCTAボタンに触れる位置に。
       ※スマホはJSでviewportが width=414 固定になるため、414px基準で調整している。
       指先は画像上端付近(約2.8%)にあるため、下端を下げて指先がボタン下端に触れる位置へ。 */
    padding: 5rem 0 34rem;
    background-position: 30% center;
  }
  .final-woman {
    right: 50%;
    transform: translateX(50%);
    width: 20rem;
    z-index: 3;   /* SP は前面に出し、指先がボタンに乗って見えるようにする */
  }
  .final-cta-inner { padding: 0 6%; }
  .final-catch { font-size: 3.2rem; }
  .final-lead { font-size: 1.45rem; }
  .final-cta-inner .cta-btn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: 1.6rem;
    padding: 1.7rem 2rem;
  }
}

/* ============================================================
   Section 05: 公式オンラインショップ＋伊織TOKYO
============================================================ */

/* ---- 公式オンラインショップ（白背景） ---- */
.shop-inner {
  max-width: 98rem;
  margin: 0 auto;
  padding: 8rem 4rem 7rem;
  text-align: center;
}
/* 見出し：中央にロゴ＋タイトル、両サイドにちびキャラ */
.shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.5rem;
}
.shop-chibi {
  width: 9rem;
  align-self: flex-end;
  /* 足元が区切り線に少し重なる位置まで下げる */
  transform: translateY(2.6rem);
}
.shop-logo {
  text-align: center;
  margin: 0 0 1.6rem;
}
.shop-logo img { width: 13rem; }
.shop-title {
  margin: 0;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mainColor);
}
.shop-en {
  text-align: center;
  margin: 0.6rem 0 0;
  font-family: var(--fontEn);
  font-size: 1.4rem;
  letter-spacing: 0.32em;
  color: var(--subColor);
}
/* 区切り線＋菱形 */
.shop-divider {
  display: flex;
  align-items: center;
  margin: 1rem 0 2rem;
}
.shop-divider::before,
.shop-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mainColor);
}
.shop-divider img {
  width: 2.2rem;
  margin: 0 1.6rem;
}
.shop-lead {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* トップページのみ：最終セクション（伊織TOKYO・ダーク）とフッターの間の白い余白を詰める */
.body-page-detail-top .container { margin-bottom: 0; }
.body-page-detail-top .main-footer { margin-top: 0; }

.shop-lead .lead-hl { color: var(--mainColor); }
.shop-lead strong {
  color: var(--mainColor);
  font-size: 2.4rem;
  margin: 0 0.2rem;
}
/* カテゴリー（3＋2） */
.shop-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem 5rem;
  list-style: none;
  padding: 0;
  margin: 3.5rem auto 3rem;
  max-width: 82rem;
}
.shop-cats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24rem;
}
.cat-diamond {
  width: 2.1rem;
  margin-bottom: 0.5rem;
}
.cat-name {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cat-name::before,
.cat-name::after {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: #c4a24a;   /* あしらい（金の菱形）に合わせたゴールド */
}
.cat-sub {
  margin-top: 0.4rem;
  font-size: 1.25rem;
  color: #666;
}
/* 商品画像 */
.shop-products {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0 0 4rem;
}
.shop-products li {
  flex: 1;
  max-width: 17.5rem;
}
.shop-products img {
  width: 100%;
  display: block;
}
/* ポイント訴求 */
.shop-point {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 0 0 3rem;
}
.point-coin { width: 6rem; }
.point-text {
  text-align: left;
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
}
.point-sub {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
}
.point-text em { font-style: normal; }
.point-text em.gold { color: var(--subColor); }
.point-text em.teal { color: var(--mainColor); }
/* ショップCTA（濃色ボタン＋丸アロー） */
.shop-cta-wrap { text-align: center; }
.shop-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.5rem 2.4rem 1.5rem 3.2rem;
  background: var(--baseColor);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0.4rem;
  transition: opacity 0.2s;
}
.shop-btn:hover,
.shop-btn:focus,
.shop-btn:active { opacity: 0.88; color: #fff; }
.shop-btn-arrow { width: 3rem; }
/* シミュレーターバナー（ベージュカード） */
.sim-banner {
  display: flex;
  align-items: stretch;
  margin-top: 5rem;
  border-radius: 1rem;
  overflow: hidden;
  background: url(../img/paper-bg.webp) center / cover, #f3ead3;
  box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.1);
  text-align: left;
}
.sim-photo {
  flex: 0 0 45%;
  margin: 0;
  display: flex;
}
.sim-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sim-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 3rem;
  text-align: center;
}
.sim-catch {
  text-align: center;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--baseColor);
}
.sim-logo {
  text-align: center;
  margin: 1rem 0 1.8rem;
}
.sim-logo img { width: 26rem; max-width: 90%; }
.sim-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 30rem;
  padding: 1.1rem 4rem 1.1rem 2rem;
  background: var(--goldGradient);
  color: #fff;
  border-radius: 0.4rem;
  box-shadow: 0 0.3rem 0.8rem rgba(184, 145, 47, 0.3);
  transition: opacity 0.2s;
}
.sim-btn:hover,
.sim-btn:focus,
.sim-btn:active { opacity: 0.9; color: #fff; }
.sim-btn-sub {
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  opacity: 0.9;
}
.sim-btn-main {
  font-size: 1.7rem;
  font-weight: 600;
}
.sim-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.8rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 0.5rem solid transparent;
  border-left: 0.7rem solid #fff;
}

/* ---- 伊織TOKYO（ダーク背景・フルブリード） ---- */
.tokyo {
  position: relative;
  background: #26262a;
  overflow: hidden;
}
/* 菱形パターンの薄いテクスチャ */
.tokyo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/diamond-faint.webp) repeat;
  background-size: 84px 84px;
  opacity: 0.5;
  z-index: 0;
}
.tokyo-inner {
  position: relative;
  z-index: 1;
  max-width: 108rem;
  margin: 0 auto;
  padding: 7rem 4rem;
  color: #fff;
}
.tokyo-top {
  display: flex;
  align-items: center;
  gap: 4.5rem;
}
.tokyo-lead-box { flex: 1; }
.tokyo-logo {
  text-align: left;
  margin: 0;
}
.tokyo-logo img { width: 27rem; }
.tokyo-lead {
  text-align: left;
  margin: 2.2rem 0 0;
  font-size: 1.5rem;
  line-height: 2;
  color: #e6e6e6;
}
.tokyo-photo {
  flex: 0 0 47%;
  margin: 0;
}
.tokyo-photo img {
  width: 100%;
  display: block;
  border-radius: 0.6rem;
}
/* 3つの特長 */
.tokyo-feats {
  display: flex;
  justify-content: center;
  gap: 5.5rem;
  list-style: none;
  padding: 0;
  margin: 4.5rem 0 3.8rem;
}
.tokyo-feats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tf-diamond {
  width: 2rem;
  margin-bottom: 0.8rem;
}
.tf-title {
  font-size: 1.9rem;
  font-weight: 600;
  color: #d3b667;   /* ゴールド */
  letter-spacing: 0.04em;
}
.tf-sub {
  margin-top: 0.7rem;
  font-size: 1.3rem;
  line-height: 1.7;
  color: #fff;
}
/* TOKYO CTA（ゴールドボタン） */
.tokyo-cta-wrap { text-align: center; }
.tokyo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36rem;
  padding: 1.9rem 3rem;
  background: var(--goldGradient);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 0.4rem;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s;
}
.tokyo-btn:hover,
.tokyo-btn:focus,
.tokyo-btn:active { opacity: 0.9; color: #fff; }
.tokyo-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.2rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 0.5rem solid transparent;
  border-left: 0.7rem solid #fff;
}

/* ---- Section 05 スマホ ---- */
@media screen and (max-width:559px) {
  .shop-inner { padding: 5rem 6% 5rem; }
  .shop-head { gap: 0.4rem; }
  .shop-chibi { width: 4.8rem; }
  .shop-title { font-size: 2.1rem; letter-spacing: 0.04em; }
  .shop-en { font-size: 1.15rem; letter-spacing: 0.18em; }
  .shop-lead { font-size: 1.6rem; }
  .shop-lead strong { font-size: 2rem; }
  .shop-cats { gap: 1.6rem 2.5rem; max-width: 34rem; }
  .shop-cats li { width: 100%; }
  .cat-name { font-size: 1.6rem; }
  .shop-products {
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .shop-products li {
    flex: 0 0 calc((100% - 1.6rem) / 3);
    max-width: none;
  }
  .shop-point {
    gap: 1.2rem;
    margin-bottom: 2.5rem;
  }
  .point-coin { width: 4.6rem; }
  .point-text { font-size: 1.55rem; }
  .point-sub { font-size: 1.2rem; }
  .shop-btn { font-size: 1.5rem; padding: 1.4rem 2rem 1.4rem 2.6rem; }
  /* シミュレーターバナー：縦積み */
  .sim-banner {
    flex-direction: column;
    margin-top: 3.5rem;
  }
  .sim-photo { flex: none; }
  .sim-photo img { height: 22rem; }
  .sim-info { padding: 2.5rem 2rem; }
  .sim-logo img { width: 22rem; }
  .sim-btn { min-width: 0; width: 100%; padding: 1.1rem 3.4rem 1.1rem 1.5rem; }
  .sim-btn-main { font-size: 1.5rem; }

  /* 伊織TOKYO */
  .tokyo-inner { padding: 5rem 6%; }
  .tokyo-top { flex-direction: column; gap: 2.5rem; }
  .tokyo-lead-box { width: 100%; }
  .tokyo-logo { text-align: center; }
  .tokyo-logo img { width: 22rem; }
  .tokyo-lead { font-size: 1.4rem; line-height: 1.9; }
  .tokyo-photo { flex: none; width: 100%; }
  .tokyo-feats {
    flex-direction: column;
    gap: 2.5rem;
    margin: 3.5rem 0 3rem;
  }
  .tf-title { font-size: 1.8rem; }
  .tokyo-btn { min-width: 0; width: 100%; font-size: 1.55rem; }
}

/*-----------------------

  Froala本文（ページ管理 page.detail）対策：ボタン文字色の打ち消し

  本文は .content > .fr-element.fr-view の中に入るため、froala_style.css の
  「.fr-view a { color: ... }」（要素+クラスで詳細度が高い）が LPボタンの文字色(#fff)を奪う。
  各ボタンは <a class="○○-btn"> なので、.fr-view a.○○-btn（詳細度を上げて）白文字を再指定して打ち消す。

-----------------------*/
.fr-view a.tokyo-btn,  .fr-view a.tokyo-btn:hover,  .fr-view a.tokyo-btn:focus,  .fr-view a.tokyo-btn:active,
.fr-view a.cta-btn,    .fr-view a.cta-btn:hover,    .fr-view a.cta-btn:focus,    .fr-view a.cta-btn:active,
.fr-view a.plan-btn,   .fr-view a.plan-btn:hover,   .fr-view a.plan-btn:focus,   .fr-view a.plan-btn:active,
.fr-view a.shop-btn,   .fr-view a.shop-btn:hover,   .fr-view a.shop-btn:focus,   .fr-view a.shop-btn:active,
.fr-view a.sim-btn,    .fr-view a.sim-btn:hover,    .fr-view a.sim-btn:focus,    .fr-view a.sim-btn:active,
.fr-view a.hl-cta-btn, .fr-view a.hl-cta-btn:hover, .fr-view a.hl-cta-btn:focus, .fr-view a.hl-cta-btn:active {
  /* standard-form.css の「.col-lg-12.detail.fr-element.fr-view a」(詳細度0,4,1＋下線) に勝つため !important。
     ボタンは白文字・下線なしを強制する。 */
  color: #fff !important;
  text-decoration: none !important;
}

/*-----------------------

  ページ管理（Froala本文）でトップLPを表示する場合の器の打ち消し（.body-page-detail-top 限定）

  本文は .container > .col-lg-12.detail.fr-element.fr-view の中に入る。
  この器（Bootstrap列＋Froalaビュー）が overflow / 左右padding を持つため、
  絶対配置で「はみ出す」装飾キャラ（女性・ちびキャラ）が切られたり、フルブリードが崩れる。
  トップページ限定で overflow を解放し、列paddingを除去して、モック同等のはみ出し表示にする。

-----------------------*/
.body-page-detail-top .container,
.body-page-detail-top .col-lg-12,
.body-page-detail-top .detail.fr-element.fr-view,
.body-page-detail-top .content {
  overflow: visible;
}
/* Bootstrap列の左右余白を除去（フルブリード維持） */
.body-page-detail-top .col-lg-12.detail {
  padding-left: 0;
  padding-right: 0;
}
/* Froala/standard-form.css の「.col-lg-12.detail.fr-element.fr-view img」(詳細度0,4,1) が
   画像を position:relative / max-width:100% に上書きし、デザインの絶対配置キャラ(.swing-figure 等)が崩れる。
   装飾キャラは position:absolute と max-width:none を !important で復帰させる（各キャラの right/bottom/width はデザイン側が適用）。 */
/* (a) 絶対配置の装飾img（デザインで position:absolute の img を全網羅）：
       froalaの .fr-view img{position:relative} / inline max-width を !important で打ち消す。
       ※ .mv-lead は p要素なので対象外（froalaの .fr-view img は効かない）。 */
.body-page-detail-top .fr-view .swing-figure,
.body-page-detail-top .fr-view .premium-chibi,
.body-page-detail-top .fr-view .final-woman,
.body-page-detail-top .fr-view .price-diag,
.body-page-detail-top .fr-view .hl-badge,
.body-page-detail-top .fr-view .salon-map .chibi {
  position: absolute !important;
  max-width: none !important;
}
/* (b) flexアイテムの装飾（shop-chibi / hl-head-chibi / hl-head-phone / hl-cta-chibi）は
       position を触らず（absoluteにすると崩れる）、froalaのinline max-width だけ解除 */
.body-page-detail-top .fr-view .shop-chibi,
.body-page-detail-top .fr-view .hl-head-chibi,
.body-page-detail-top .fr-view .hl-head-phone,
.body-page-detail-top .fr-view .hl-cta-chibi {
  max-width: none !important;
}
/* (c) SP(≤559px)では .swing-figure だけ設計上 static（本文下に右寄せ width:56%）に変わるため、
       (a)のPC向け position:absolute 強制をSPで解除して設計値へ戻す。
       ※他の絶対配置img（premium-chibi/final-woman/hl-badge/price-diag/salon chibi）はSPも absolute のまま。 */
@media screen and (max-width:559px) {
  .body-page-detail-top .fr-view .swing-figure {
    position: static !important;
  }
}

/* SNSシェア（共有ボタン）ブロックを領域ごと非表示 */
.sns-detail {
  display: none;
}

/* ログイン画面はコンテナ上余白(14rem)を詰める。既存ルールより後・高詳細度で上書き */
body:not(.body-page-detail-top) .container.login-page {
  padding-top: 0rem;
  /* ヘッダーに被らない範囲で詰める。値は実機で調整 */
}

@media only screen and (max-width: 559px) {
  body:not(.body-page-detail-top) .container.login-page {
    padding-top: 0rem;
  }
}

.login-page .panel .panel-body .alert {
  box-sizing: border-box;
  margin: 0 auto 15px auto;
  max-width: 400px;
  width: 100%;
}

/* Bootstrapツールチップ（placement="top"）は class に "top" を持つ（<div class="tooltip fade top in">）ため、
   overwrite.css のヘッダー用 .top（position:sticky / max-width:var(--appW) / background:暗色 / box-shadow 等）に
   巻き込まれて崩れる。overwrite.css は編集不可なので、後読みの iori-sukumane.css で .tooltip.top を打ち消し、
   通常の吹き出しに戻す。※ヘッダーは <header class="top">（.tooltip を持たない）ので影響しない。 */
.tooltip.top {
  position: absolute;
  z-index: 1070;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 5px 0;
  background: none;
  box-shadow: none;
}

/* jquery-confirm（showMessage 等のダイアログ）は bootstrap の .container を使う（<div class="jc-bs3-container container">）。
   overwrite.css / iori-sukumane.css の .container（ページ本文列：max-width(--appW/1280px)/和紙背景/影/min-height 等）が
   このダイアログの .container にも当たって崩れる（和紙の柱・幅おかしい）。overwrite.css は編集不可なので jconfirm 側で打ち消す。
   ※背景・影・min-height は overwrite(.container=詳細度0,1,0)より強いので普通に上書きできるが、
     max-width だけは本文用ルール body:not(.iori-app) .container(0,2,1) の方が強いため、幅だけ !important で
     通常のダイアログ幅（bootstrap 相当 1170px）に戻す。 */
.jconfirm .container {
  /* standard 側と同じ「素の Bootstrap3 コンテナ」のレスポンシブ幅に戻す
     （overwrite.css の --appW / 本文用 body:not(.iori-app) .container の width:1280px の巻き込みを打ち消す）。
     ・スマホ(<768px)：width:auto＝画面幅にフィット → 中央寄せOK・横スクロール防止
       （padding は 0 15px に戻す。0 だと .row の負マージン -15px がはみ出して横スクロールになる）
     ・PC：768/992/1200px で 750/970/1170px（Bootstrap3 標準） */
  width: auto !important;
  max-width: none !important;
  min-height: 0;
  margin: 0 auto;
  padding: 0 15px;
  background: none;
  box-shadow: none;
}

@media (min-width: 768px) {
  .jconfirm .container {
    width: 750px !important;
  }
}

@media (min-width: 992px) {
  .jconfirm .container {
    width: 970px !important;
  }
}

@media (min-width: 1200px) {
  .jconfirm .container {
    width: 1170px !important;
  }
}

/* ============================================================================

   ★★★ ここから下は「標準機能（非iori）ページ」用の 専用css 上書きセクション ★★★

   ・body に iori-app が付かないページ（ショップ・ポイント・アカウント・イベント詳細 等の標準機能）向けに、
     standard 側（common/style/overwrite 等）のCSSを打ち消す／調整する指定をまとめる。
   ・【重要】iori系（会員ページ）のCSSは、必ずこの見出しより「上」に書くこと。
     ここより下に書くと標準機能ページの想定になり、意図がぼやけるため。

   ============================================================================ */


/* イベント詳細の見出し h3 の色（standard 側の color: var(--mainColor)）を打ち消す */
.body-event-detail .row .col-lg-12 h3 {
  color: inherit;
}

/* 申込テーブルの見出しセル th の背景（standard 側の background: var(--main10Color)）を打ち消す。
   ※vertical-align 等はそのまま。none だと透明になるため、標準の鼠色（#f5f5f5）を明示指定して戻す。 */
table.entry>tbody>tr>th,
table.entry table.product>tbody>tr>th {
  background-color: #f5f5f5;
}

/* box-footer の背景（standard 側の background-color: #ffffff）を透明にする */
.box-footer {
  background-color: transparent;
}

/* イベント詳細（会員）：申込済など data-event="entry" を持たない .btn-success は
   form.css の @media(max-width:559px) で margin-bottom:-25px が効き、直下の
   注意書き <p>（※お申し込みの前に…）に重なる。打ち消して 0 に戻す。 */
@media screen and (max-width: 559px) {
  .body-event-detail .btn-success {
    margin-bottom: 0px !important;
  }
}

/* SNS詳細の上部余白を詰める（PC・SP（559px以下）とも 0） */
.sns-detail {
  margin-top: 0rem;
}

@media screen and (max-width: 559px) {
  .sns-detail {
    margin-top: 0rem;
  }
}
/* label > .icon-checkbox-icon の margin-left: -1.6em を打ち消す（standard-overwrite.css は最後に読み込まれるため同セレクタで上書き） */
label > .icon-checkbox-icon {
  margin-left: 0;
}

/* ===== ドロワーメニューの初期チラつき（FOUC）防止 =====
   drawer プラグインは初期化時に祖先へ .drawer コンテナ（＋方向クラス）を付与し、
   その時点で .drawer-nav が画面外へ退避する。初期化までは position:fixed の
   .drawer-nav が画面左上に一瞬見えてしまうため、.drawer 付与前は非表示にしておく。
   ※方向（左右）に依存しないよう「祖先に .drawer が付いたら表示」で判定する。 */
.drawer-nav {
  display: none;
}
.drawer .drawer-nav {
  display: block;
}