/* design_token.css */
/* ================================
      RESET
      :where() で囲んで詳細度を 0 にしている
   ================================ */
:where(*, ::before, ::after) {
   box-sizing: border-box;
   margin:     0;
   padding:    0;
}
:where(html) {
   -webkit-text-size-adjust: 100%;
   text-size-adjust:         100%;
}
:where(a) {
   text-decoration: none;
}
:where(li) {
   list-style: none;
}

/* 画像：親からはみ出さない / 下にできる数 px の隙間を消す */
:where(img, svg, video, picture) {
   max-width:      100%;
   height:         auto;
   vertical-align: bottom;
}

/* フォーム要素は OS のフォントではなくページのフォントを使う */
:where(button, input, select, textarea) {
   font:  inherit;
   color: inherit;
}

/* button：OS の見た目を消す */
:where(button, [type="button"], [type="reset"], [type="submit"]) {
   -webkit-appearance: none;
   appearance:         none;
   background:         transparent;
   border:             0;
   cursor:             pointer;
}
:where(button, [type="button"], [type="reset"], [type="submit"]):disabled {
   cursor: default;
}

/* input：iOS の角丸・内側の影を消す（outline は消さない） */
:where(input[type="text"], input[type="email"], input[type="password"],
   input[type="search"], input[type="tel"], input[type="number"], textarea) {
   -webkit-appearance: none;
   appearance:         none;
   border-radius:      0;
}
:where(textarea) {
   resize: vertical; /* 横方向に伸ばされてレイアウトが崩れないように */
}
:where(table) {
   border-collapse: collapse;
   border-spacing:  0;
}
/* 長い英単語・URL がはみ出さないように */
:where(h1, h2, h3, h4, h5, h6, p) {
   overflow-wrap: break-word;
}
/* スクロールバーの分の幅を常に確保する
   → ページの長さが変わってスクロールバーが出たり消えたりしても、中身が左右にずれない */
:where(html) {
   scrollbar-gutter: stable;
}
/* scrollbar-gutter に未対応のブラウザ用：スクロールバーを常に表示しておく */
@supports not (scrollbar-gutter: stable) {
   :where(html) {
      overflow-y: scroll;
   }
}
/* -----/reset----- */

/* ================================
      GLOBAL TOKENS
   ================================ */
:root {
   /* Typography - Size */
	--font-size-8: 8px;
   --font-size-11: 11px;
	--font-size-12: 12px;
	--font-size-14: 14px;
	--font-size-16: 16px;
	--font-size-18: 18px;
	--font-size-20: 20px;
	--font-size-22: 22px;
	--font-size-26: 26px;
	--font-size-28: 28px;
	--font-size-32: 32px;
	--font-size-36: 36px;
	--font-size-40: 40px;
	--font-size-46: 46px;
	--font-size-52: 52px;
	--font-size-58: 58px;
	--font-size-74: 74px;
	--font-size-82: 82px;
	--font-size-94: 94px;

   /* Typography - Weight */
   --font-weight-regular-400:   400;
   --font-weight-semibold-600:  600;
   --font-weight-bold-700:      700;
   --font-weight-black-800:     800;

   /* Typography - Line Height */
   --line-height-none-100:    1;
   --line-height-tight-120:   1.2;
   --line-height-snug-140:    1.4;
   --line-height-normal-160:  1.6;
   --line-height-loose-175:   1.75;

   /* Typography - Font Family */
   --font-family-default: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;

   /* Color - Primary */
   --color-primary-50:   #FAF5F9;
   --color-primary-100:  #F7ECF4;
   --color-primary-200:  #F1D9EB;
   --color-primary-300:  #E6BBDA;
   --color-primary-400:  #D591C1;
   --color-primary-500:  #C56FA9;
   --color-primary-600:  #B1518D;
   --color-primary-700:  #923D70;
   --color-primary-800:  #7D3760;
   --color-primary-900:  #6A3152;
   --color-primary-950:  #3F182F;

   /* Color - Neutral */
   --color-neutral-50:   #FAFAFA;
   --color-neutral-100:  #F5F5F5;
   --color-neutral-200:  #E5E5E5;
   --color-neutral-300:  #D4D4D4;
   --color-neutral-400:  #A1A1A1;
   --color-neutral-500:  #737373;
   --color-neutral-600:  #525252;
   --color-neutral-700:  #404040;
   --color-neutral-800:  #262626;
   --color-neutral-900:  #171717;
   --color-neutral-950:  #0A0A0A;

   /* Color - Semantic */
   --color-critical-default:  #FF297F; /*DEL*/
   --color-critical-light:    #FFD4E5; /*DEL*/

   /* Color - Semantic（状態を表す色 / 50・200・500・700・900） */
   /* Critical（エラー・削除など） */
   --color-critical-50:   #FFF0F0;
   --color-critical-200:  #FFCCCC;
   --color-critical-500:  #E53935;
   --color-critical-700:  #C62828;
   --color-critical-900:  #7F0000;
   /* Warning（注意） */
   --color-warning-50:    #FFF8E6;
   --color-warning-200:   #FFE0A0;
   --color-warning-500:   #F59E0B;
   --color-warning-700:   #D97706;
   --color-warning-900:   #78350F;
   /* Success（完了・成功） */
   --color-success-50:    #F0FAF4;
   --color-success-200:   #BBF0D0;
   --color-success-500:   #16A34A;
   --color-success-700:   #15803D;
   --color-success-900:   #14532D;
   /* Info（お知らせ・補足） */
   --color-info-50:       #EFF6FF;
   --color-info-200:      #BFDBFE;
   --color-info-500:      #2563EB;
   --color-info-700:      #1D4ED8;
   --color-info-900:      #1E3A8A;


   /* Color - Basic */
   --color-basic-black:     #000000;
   --color-basic-white:     #FFFFFF;
   --color-basic-grey:      #D4D4D4;

   /* Color - Genre */
   --color-shojo-default:  #E37F27;
   --color-shojo-light:    #F9E5D4;
   --color-bl-default:     #6265B6;
   --color-bl-light:       #E0E0F0;
   --color-tl-default:     #D83783;
   --color-tl-light:       #F7D7E6;
   --color-yuri-default:   #2D9F70;
   --color-yuri-light:     #D5ECE2;

   /* Color - SNS Logo */
   --color-facebook-default:  #1877F2;
   --color-x-default:         #000000;

   /* Layout - Breakpoint */
   --layout-breakpoint-mobile:  360px;
   --layout-breakpoint-tablet:  768px;
   --layout-breakpoint-desktop: 989px;

   /* Layout - Spacing */
   --layout-spacing-0:      0px;
   --layout-spacing-4:      4px;
   --layout-spacing-8:      8px;
   --layout-spacing-12:     12px;
   --layout-spacing-16:     16px;
   --layout-spacing-20:     20px;
   --layout-spacing-24:     24px;
   --layout-spacing-32:     32px;
   --layout-spacing-40:     40px;
   --layout-spacing-48:     48px;
   --layout-spacing-64:     64px;

   /* Layout - Cover - Cover width */
   --cover-width-90:  90px;
   --cover-width-96:  96px;
   --cover-width-120: 120px;
   --cover-width-140: 140px;
   --cover-width-160: 160px;
   --cover-width-180: 180px;
   --cover-width-200: 200px;
   --cover-width-220: 220px;

   /* Layout - Icon Size */
   --icon-size-16: 16px;
   --icon-size-20: 20px;
   --icon-size-24: 24px;
   --icon-size-32: 32px;
   --icon-size-40: 40px;

   /* Border - Radius */
   --border-radius-none:  0px;
   --border-radius-sm:    4px;
   --border-radius-md:    8px;
   --border-radius-lg:    16px;
   --border-radius-full:  999px;

   /* Border - Width */
   --border-width-none:  0px;
   --border-width-sm:    1px;
   --border-width-md:    2px;
   --border-width-lg:    4px;

   /* Box Shadow (Elevation) */
   --box-shadow-lv0-none:     none;
   --box-shadow-lv1-subtle:   0 1px 3px  0px rgba(64, 64, 64, 0.30);
   --box-shadow-lv2-medium:   0 2px 6px  0px rgba(64, 64, 64, 0.30);
   --box-shadow-lv3-strong:   0 4px 12px 0px rgba(64, 64, 64, 0.30);

   /* Opacity */
   --opacity-0:   0;
   --opacity-10:  0.1;
   --opacity-20:  0.2;
   --opacity-30:  0.3;
   --opacity-40:  0.4;
   --opacity-50:  0.5;
   --opacity-60:  0.6;
   --opacity-70:  0.7;
   --opacity-80:  0.8;
   --opacity-90:  0.9;
   --opacity-100: 1;

   /* Interactive / Control */
   /* 操作要素の高さ — btn と form-input-field で共有する
      並べたときに高さがズレないよう、同じトークンを参照させる */
   --control-height-sm: 32px;
   --control-height-md: 40px;
   --control-height-lg: 48px;
   --control-height-xl: 56px; /* btn-round のみ使用（テキストを持たない大きめのタップ領域） */
}

/* ================================
      SEMANTIC TOKENS
   ================================ */
:root{
   /* Typography - Size */
   --font-size-h1: var(--font-size-26);
   --font-size-h2: var(--font-size-22);
   --font-size-h3: var(--font-size-18);
   --font-size-base-text: var(--font-size-14);
   --font-size-remark: var(--font-size-11);

   /* Typography - Weight */
   --font-weight-h1: var(--font-weight-black-800);
   --font-weight-h2: var(--font-weight-bold-700);
   --font-weight-h3: var(--font-weight-semibold-600);
   --font-weight-base-text: var(--font-weight-regular-400);
   --font-weight-base-text-strong: var(--font-weight-semibold-600);
   --font-weight-remark: var(--font-weight-regular-400);

   /* Typography - Line Height */
   --line-height-heading: var(--line-height-tight-120);
   --line-height-heading-loose: var(--line-height-snug-140);
   --line-height-base-text: var(--line-height-normal-160);
   --line-height-base-text-tight: var(--line-height-snug-140);
   --line-height-base-text-loose: var(--line-height-loose-175);
   --line-height-remark: var(--line-height-tight-120);

   /* Color - Text */
   --text-color-base: var(--color-neutral-700);
   --text-color-base-light: var(--color-neutral-500);
   --text-color-primary: var(--color-primary-700);
   --text-color-link: var(--color-primary-700);
   --text-color-on-primary: var(--color-basic-white);

   /* Color - Icon Background */
   --icon-bg-primary: var(--color-primary-700);
   --icon-bg-white: var(--color-basic-white);
   --icon-bg-critical: var(--color-critical-default);

   /* Color - Page Background */
   --page-bg-default: var(--color-basic-white);
   --page-bg-neutral-light: var(--color-neutral-100);
   --page-bg-neutral-dark: var(--color-neutral-700);
   --page-bg-primary-light: var(--color-primary-100);
   --page-bg-primary-dark: var(--color-primary-700);

   /* Layout- Page - Max Width */
   --page-max-width-mobile: var(--layout-breakpoint-mobile);
   --page-max-width-tablet: var(--layout-breakpoint-tablet);
   --page-max-width-desktop: var(--layout-breakpoint-desktop);
   --page-max-width-auth: 500px;

   /* Layout- Page - Padding X */
   --page-padding-x-sm: var(--layout-spacing-8);
   --page-padding-x-md: var(--layout-spacing-16);
   --page-padding-x-lg: var(--layout-spacing-24);

   /* Layout - Cover Width */
   --cover-width-sm: clamp(96px,  calc(84px  + 3.6vw), 120px);
   --cover-width-md: clamp(140px, calc(130px + 3vw),   160px);
   --cover-width-lg: clamp(180px, calc(161px + 6vw),   220px);

   /* Layout - Icon Size */
   --icon-size-default: var(--icon-size-24);

   /* Layout - Round Icon Padding */
   /* ※ 未使用（DEPRECATED）：icon-base--round-* は padding ではなく
      btn-round と同じ外形サイズで定義するようになったため。参照が0なら削除可 */
   --icon-padding-sm: var(--layout-spacing-4);
   --icon-padding-md: var(--layout-spacing-8);
   --icon-padding-lg: var(--layout-spacing-16);

   /* State */
   --link-hover-state:     var(--opacity-70);
   --link-disabled-state:  var(--opacity-30);

   /* State - Focus Ring（キーボード操作の可視化 / 全操作要素で共通）
      button だけでなく text-link・tab・card など、Tab で止まる要素すべてに同じ見た目を使う */
   --focus-ring-color:          var(--color-primary-700);
   --focus-ring-color-on-dark:  var(--color-basic-white); /* 暗い背景の上に置く場合 */
   --focus-ring-width:          var(--border-width-md); /*2px*/
   --focus-ring-offset:         var(--layout-spacing-4); /*4px*/
   --focus-ring-offset-tight:   2px; /* overflow を持つ container の中で使う */
   --cover-hover-filter:   opacity(0.7);
   --cover-disabled-filter:   opacity(0.3);

   /* Component - Logo */
   /* Logo - Size（高さ / Mobile・Desktop 共通） */
   --logo-height-sm: var(--layout-spacing-16); /* 最低限。これ以下にはしない（用途は未定） */
   --logo-height-md: var(--layout-spacing-24); /* header */
   --logo-height-lg: var(--layout-spacing-32); /* ページ内で logo を単独で見せるとき（用途は未定） */

   /* Component - Navigation Tab (<a>) */
   --nav-tab-text-color-default: var(--color-neutral-500);
   --nav-tab-text-color-active:  var(--color-primary-700);

   /* Component - Section Tab (<button>) */
   --section-tab-bg-default:     var(--color-neutral-100);
   --section-tab-border-default: var(--color-neutral-400);
   --section-tab-text-default:   var(--color-neutral-600);

   --section-tab-bg-active:      var(--color-primary-100);
   --section-tab-border-active:  var(--color-primary-300);
   --section-tab-text-active:    var(--color-primary-900);

   --swiper-navigation-sides-offset: -8px;

   /* Component - Swiper Slide */
   --swiper-slide-width-default: clamp(144px, calc(106px + 10.5vw), 210px);
   --swiper-slide-border-style-default: var(--border-width-sm) solid var(--color-neutral-300);

   /* ---------------------------------------------
      Component - Button
      shape（Square / Pill / Round）で変わるのは「radius と 1:1 かどうか」だけ。
      色（Type = Primary / Secondary / Ghost）と構造値は全 shape 共通。
      --------------------------------------------- */

   /* Button - Common（shape 非依存の構造値） */
   --btn-border-width:  var(--border-width-sm);
   --btn-font-weight:   var(--font-weight-base-text-strong);
   --btn-inner-gap:     var(--layout-spacing-8);

   /* Button - Common / State */
   --btn-state-hover:     var(--opacity-70);
   --btn-state-disabled:  var(--opacity-30);

   /* Button - Type / Primary（画面の目的そのもの。1画面1つ） */
   --btn-primary-bg:            var(--color-primary-700);
   --btn-primary-text-color:    var(--color-basic-white);
   --btn-primary-border-color:  var(--color-primary-700);
   /* Button - Type / Secondary（繰り返し出る有料アクション・無料導線） */
   --btn-secondary-bg:            var(--color-basic-white);
   --btn-secondary-text-color:    var(--color-primary-700);
   --btn-secondary-border-color:  var(--color-primary-700);
   /* Button - Type / Ghost（ユーザーに取ってほしくないアクション） */
   --btn-ghost-bg:            var(--color-basic-white);
   --btn-ghost-text-color:    var(--color-neutral-700);
   --btn-ghost-border-color:  var(--color-neutral-500);

   /* Button - Shape（差分は radius のみ） */
   --btn-square-radius:  var(--border-radius-md);
   --btn-pill-radius:    var(--border-radius-full);
   --btn-round-radius:   var(--border-radius-full);

   /* Button - Round（1:1）
      size 名が同じなら shape をまたいで高さも同じ、という規則を守る。
      square / pill は文字を持つため xs（padding だけ詰めた段階）を持ち、
      round は文字を持たないため代わりに xl を持つ。 */
   --btn-round-size-sm:  var(--control-height-sm); /*32px*/
   --btn-round-size-md:  var(--control-height-md); /*40px*/
   --btn-round-size-lg:  var(--control-height-lg); /*48px*/
   --btn-round-size-xl:  var(--control-height-xl); /*56px*/

   /* Button - Group */
   --btn-group-gap:        var(--layout-spacing-8);
   --btn-group-padding:    var(--layout-spacing-8);
   --btn-group-max-width:  480px;

   /* Accordion */
   --accordion-trigger-padding: var(--layout-spacing-8);
   --accordion-body-padding:    var(--layout-spacing-8);
   --accordion-trigger-gap:     var(--layout-spacing-4);

   /* Header */
   --header-min-height: var(--control-height-xl);
   --header-z-index: 20;
}

/* ================================
      SEMANTIC TOKENS (TABLET + DESKTOP)
   ================================ */
@media (min-width: 768px) {
   :root {
   /* Typography - Size */
   --font-size-h1: var(--font-size-28);
   --font-size-h2: var(--font-size-20);
   --font-size-h3: var(--font-size-18);
   --font-size-base-text: var(--font-size-16);
   --font-size-remark: var(--font-size-11);

   /* Layout- Page - Padding X */
   --page-padding-x-sm: var(--layout-spacing-8);
   --page-padding-x-md: var(--layout-spacing-24);
   --page-padding-x-lg: var(--layout-spacing-40);

    /* Accordion */
   --accordion-trigger-gap:     var(--layout-spacing-12);
   }
}

/* ================================
      UTILITY CLASSES
   ================================ */
/* bg */
.u-bgColor__primary{
   background: var(--color-primary-200);
}
.u-bgColor__shojo{
   background: var(--color-shojo-light);
}
.u-bgColor__bl{
   background: var(--color-bl-light);
}
.u-bgColor__tl{
   background: var(--color-tl-light);
}
.u-bgColor__yuri{
   background: var(--color-yuri-light);
}
/* padding */
.u-paddingA__sm{
   padding: var(--layout-spacing-4);
}
.u-paddingA__md{
   padding: var(--layout-spacing-8);
}
.u-paddingA__lg{
   padding: var(--layout-spacing-16);
}
/* margin */
.u-marginA__sm{
   margin: var(--layout-spacing-4);
}
.u-marginA__md{
   margin: var(--layout-spacing-8);
}
.u-marginA__lg{
   margin: var(--layout-spacing-16);
}
/* margin top */
.u-marginT__sm{
   margin-top: var(--layout-spacing-4);
}
.u-marginT__md{
   margin-top: var(--layout-spacing-8);
}
.u-marginT__lg{
   margin-top: var(--layout-spacing-16);
}
/* margin bottom */
.u-marginB__sm{
   margin-bottom: var(--layout-spacing-4);
}
.u-marginB__md{
   margin-bottom: var(--layout-spacing-8);
}
.u-marginB__lg{
   margin-bottom: var(--layout-spacing-16);
}

@media (min-width: 768px) {
   .u-marginA__sm{
   margin: var(--layout-spacing-8);
   }
   .u-marginA__md{
      margin: var(--layout-spacing-12);
   }
   .u-marginA__lg{
      margin: var(--layout-spacing-24);
   }
   .u-marginT__sm{
      margin-top: var(--layout-spacing-8);
      }
   .u-marginT__md{
      margin-top: var(--layout-spacing-12);
   }
   .u-marginT__lg{
      margin-top: var(--layout-spacing-24);
   }
   .u-marginB__sm{
      margin-bottom: var(--layout-spacing-8);
   }
   .u-marginB__md{
      margin-bottom: var(--layout-spacing-12);
   }
   .u-marginB__lg{
      margin-bottom: var(--layout-spacing-24);
   }
}

/* ================================
      COMPONENTS STYLE
   ================================ */
/* Heading */
h1.heading-h1 {
   font-size:   var(--font-size-h1);
   font-weight: var(--font-weight-h1);
   line-height: var(--line-height-heading);
   color:       var(--text-color-base);
   overflow-wrap:  break-word;
}
h2.heading-h2 {
   font-size:   var(--font-size-h2);
   font-weight: var(--font-weight-h2);
   line-height: var(--line-height-heading);
   color:       var(--text-color-base);
   overflow-wrap:  break-word;
}
h3.heading-h3 {
   font-size:   var(--font-size-h3);
   font-weight: var(--font-weight-h3);
   line-height: var(--line-height-heading);
   color:       var(--text-color-base);
   overflow-wrap:  break-word;
}
.heading--loose { /* for H2, H3 */
   line-height: var(--line-height-heading-loose);
}

/* Base Text (.bodyから変更) */
.base-text {
	font-size:   var(--font-size-base-text);
	font-weight: var(--font-weight-base-text);
	line-height: var(--line-height-base-text);
	color:       var(--text-color-base);
   overflow-wrap: break-word;
}
.base-text--strong {
	font-weight: var(--font-weight-base-text-strong);
}
.base-text--italic {
	font-style:	italic;
}
.base-text--tight {
	line-height: var(--line-height-base-text-tight);
}
.base-text--loose {
	line-height: var(--line-height-base-text-loose);
}
/* Error Text */
.error-text{
   font-size:   var(--font-size-base-text);
	font-weight: var(--font-weight-base-text-strong);
	line-height: var(--line-height-base-text);
   color:       var(--color-critical-700);
   overflow-wrap: break-word;
}

/* Remark */
.remark {
	font-size:	 var(--font-size-remark);
	font-weight: var(--font-weight-remark);
	line-height: var(--line-height-remark);
	color:		 var(--text-color-base);
}

/* List (ul,ol) */
ul.list-ul {
   list-style-type: disc;
   padding-left:    var(--layout-spacing-24);
}
ol.list-ol {
   list-style-type: decimal;
   padding-left:    var(--layout-spacing-24);
}
.list-ul li, .list-ol li {
   font-size:   var(--font-size-base-text);
   font-weight: var(--font-weight-base-text);
   line-height: var(--line-height-base-text);
   color:       var(--text-color-base);
}
.list-ul li{ /* en_pc.css */
   list-style-type: disc;
}
.list-ol li{ /* en_pc.css */
   list-style-type: decimal;
}
.list-ol--alpha-upper li {
  list-style-type: upper-alpha;  /* A. B. C. */
}
.list-ol--alpha-lower li {
  list-style-type: lower-alpha;  /* a. b. c. */
}
.list-ul.list--tight li, .list-ol.list--tight li {
   line-height: var(--line-height-base-text-tight);
}
.list-ul.list--loose li, .list-ol.list--loose li {
   line-height: var(--line-height-base-text-loose);
}

/* Renta! Logo（自社 logo 専用 / header・footer・login など共通）
   高さで揃える → 15 周年などで横長の logo に差し替えても高さは同じ
   ※ 他社・スポンサーの logo には使わない */
.renta-logo--sm { height: var(--logo-height-sm); }
.renta-logo--md { height: var(--logo-height-md); }
.renta-logo--lg { height: var(--logo-height-lg); }
.renta-logo {
   display:  block;
   width:    auto;
   height:   var(--logo-height-md);
}


/* Icon
   .icon-base は「アイコン画像の器」= 装飾用。クリックできる丸ボタンは .btn-round を使う。
   判定基準：href / onclick が付く（＝操作要素）なら btn-round、
             他コンポーネントの中に置くだけの飾りなら icon-base。 */
.icon-base {
   display:          inline-flex;
   align-items:      center;
   justify-content:  center;
   flex-shrink:      0;
   width:   var(--icon-size-default);
   height:  var(--icon-size-default);
}
/* Icon - Size */
.icon-base--16 { width: var(--icon-size-16); height: var(--icon-size-16); }
.icon-base--20 { width: var(--icon-size-20); height: var(--icon-size-20); }
.icon-base--24 { width: var(--icon-size-24); height: var(--icon-size-24); }
.icon-base--32 { width: var(--icon-size-32); height: var(--icon-size-32); }
.icon-base--40 { width: var(--icon-size-40); height: var(--icon-size-40); }
/* Icon - Image Element */
.icon-base__img {
   display:     block;
   width:       100%;
   height:      100%;
   max-width:   100%;
   max-height:  100%;
}
/* Icon - Round（装飾用の丸背景。btn-round と外形サイズを揃える）
   サイズ名・外形・中の img のサイズは btn-round と完全に共通：
   sm 32 / md 40 / lg 48 / xl 56、img は 16 / 24 / 32 / 40。
   round-* を付けたら icon-base--16 などの size class は不要（外形と img の両方を round-* が決める）。
   → 押せるものは btn-round、飾りは icon-base--round-*。見た目は同じで責務だけが違う。 */
.icon-base--round-sm,
.icon-base--round-md,
.icon-base--round-lg,
.icon-base--round-xl {
   border-radius:  var(--border-radius-full);
   flex-shrink:    0;
   padding:        0;
}
.icon-base--round-sm { width: var(--control-height-sm); height: var(--control-height-sm); } /*32px*/
.icon-base--round-md { width: var(--control-height-md); height: var(--control-height-md); } /*40px*/
.icon-base--round-lg { width: var(--control-height-lg); height: var(--control-height-lg); } /*48px*/
.icon-base--round-xl { width: var(--control-height-xl); height: var(--control-height-xl); } /*56px*/
.icon-base--round-sm > .icon-base__img { width: var(--icon-size-20); height: var(--icon-size-20); }
.icon-base--round-md > .icon-base__img { width: var(--icon-size-24); height: var(--icon-size-24); }
.icon-base--round-lg > .icon-base__img { width: var(--icon-size-32); height: var(--icon-size-32); }
.icon-base--round-xl > .icon-base__img { width: var(--icon-size-40); height: var(--icon-size-40); }
.icon-base--round-sm > img { width: var(--icon-size-20); height: var(--icon-size-20); }
.icon-base--round-md > img { width: var(--icon-size-24); height: var(--icon-size-24); }
.icon-base--round-lg > img { width: var(--icon-size-32); height: var(--icon-size-32); }
.icon-base--round-xl > img { width: var(--icon-size-40); height: var(--icon-size-40); }
/* Icon - Background*/
.icon-base--bg-primary {
	background:	var(--icon-bg-primary);
}
.icon-base--bg-white {
	background:	var(--icon-bg-white);
}
.icon-base--bg-critical {
   background:	var(--icon-bg-critical);
}
/* Icon - Float（非推奨 / DEPRECATED：操作要素なので .btn-round--float に移行する）*/
.icon-base--float{
   box-shadow: var(--box-shadow-lv3-strong);
}
.icon-base--float:hover{
   cursor:  pointer;
}
.icon-base--float:disabled, .icon-base--float.is-disabled {
   opacity:         var(--link-disabled-state);
   cursor:          not-allowed;
   pointer-events:  none;
}


/* Text Link */
.text-link {
   cursor:  pointer;
}
.text-link:hover {
   opacity: var(--link-hover-state);
}
.text-link--inline {
   font-size:       inherit;
   font-weight:     inherit;
   color:           inherit;
   text-decoration: underline;
}
.text-link--standalone {
   display:         inline-flex;
   align-items:     center;
   font-size:       var(--font-size-base-text);
   font-weight:     var(--font-weight-base-text-strong);
   text-decoration: underline;
}
.text-link--index {
   display:         inline-flex;
   align-items:     center;
   font-size:       var(--font-size-base-text);
   font-weight:     var(--font-weight-base-text);
   text-decoration: none;
}
.text-link--with-icon { /* Icon: use .icon-base */
   display:         inline-flex;
   align-items:     center;
   gap:             var(--layout-spacing-4);
   padding:         var(--layout-spacing-4);
   font-size:       var(--font-size-base-text);
   font-weight:     var(--font-weight-base-text-strong);
   line-height:     var(--line-height-none-100);
   white-space:     nowrap;
}
.text-link--primary {
   color: var(--text-color-link);
}
.text-link--base {
   color: var(--text-color-base);
}
.text-link--subtle{
   color: var(--text-color-base-light);
   font-weight: var(--font-weight-base-text);
}
.text-link--index:hover {
   text-decoration: underline;
}


/* Cover */
.cover {
   /* fadeIn-base
   display:          flex;
   justify-content:  center;
   overflow:         hidden;
   position:         relative; */
   width:            100%;
   height:           auto;
   /* max-width は親要素に任せる 推奨 220px まで */
}
.cover--90 {
   width: var(--cover-width-90);
}
.cover--96 {
   width: var(--cover-width-96);
}
.cover--120 {
   width: var(--cover-width-120);
}
.cover--140 {
   width: var(--cover-width-140);
}
.cover--160 {
   width: var(--cover-width-160);
}
.cover--180 {
   width: var(--cover-width-180);
}
.cover--200 {
   width: var(--cover-width-200);
}
.cover--220 {
   width: var(--cover-width-220);
}
.cover--sm {
   width: var(--cover-width-sm);
}
.cover--md {
   width: var(--cover-width-md);
}
.cover--lg {
   width: var(--cover-width-lg);
}
a.cover:hover {
   filter: var(--cover-hover-filter);
}

/* Page */
.page {
   width: 100%;
   min-height: 100vh;
   min-height: 100dvh;
   background: var(--page-bg-default);
   position: relative;
   font-family: var(--font-family-default);
   color: var(--text-color-base);
}
.page__contents{
   max-width: var(--page-max-width-desktop);
   padding:  var(--page-padding-x-md) var(--page-padding-x-md) 0;;
   margin: 0 auto;
}
.page__contents--sm{
   padding:  var(--page-padding-x-sm) var(--page-padding-x-sm) 0;
}
.page__contents--auth{
   max-width: var(--page-max-width-auth);
   padding:  var(--page-padding-x-lg) var(--page-padding-x-lg) 0;
   margin: 0 auto;
}
/* Loading */
.js-loader {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: auto;
   height: 100vh;
   height: 100dvh;
   z-index: 19;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--page-bg-default);
   opacity: 1;
   transition: opacity 0.3s ease;
}
.js-loader::after {
   content: "";
   display: block;
   width: 50px;
   height: 50px;
   border: 5px solid var(--color-primary-700);
   border-right: 5px solid var(--color-primary-200);
   border-top: 5px solid var(--color-primary-200);
   border-radius: 50%;
   animation: loader 0.5s linear infinite;
   transform-origin: 50% 50%;
}
@keyframes loader {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}
.js-loadingHide {
   opacity: 0;
   transition: opacity 0.4s ease;
}
.js-loadingHide.is-visible {
   opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
   .js-loader::after {
      animation: none;
   }
}
/* Tab */
/* Navigation Tab */
.navigation-tab {
   display:     flex;
   width:       100%;
   padding:     0 var(--layout-spacing-8) var(--layout-spacing-8) var(--layout-spacing-8);
   align-items: flex-start;
   gap:         var(--layout-spacing-0);
   overflow-x:  auto;
   font-family: var(--font-family-default);
}
.navigation-tab__item {
   display:         inline-flex;
   flex-direction:  column;
   justify-content: center;
   align-items:     center;
   padding:         var(--layout-spacing-8);
   gap:             var(--layout-spacing-0);
   font-size:       var(--font-size-base-text);
   font-weight:     var(--font-weight-bold-700);
   color:           var(--nav-tab-text-color-default);
   line-height:     var(--line-height-none-100);
   text-decoration: none;
   white-space:     nowrap;
   cursor:          pointer;
   scrollbar-width:    none;
   -ms-overflow-style: none;
   font-family: var(--font-family-default);
}
.navigation-tab::-webkit-scrollbar {
   display: none;
}
.navigation-tab__item:hover {
   opacity: var(--link-hover-state);
}
.navigation-tab__item.is-active__navigation-tab, .navigation-tab__item.is-active{
   color:         var(--nav-tab-text-color-active);
   border-bottom: var(--border-width-md) solid var(--nav-tab-text-color-active);
}
@media (min-width: 768px) {
   .navigation-tab{
      padding:  0 var(--layout-spacing-8) var(--layout-spacing-12) var(--layout-spacing-8);
      gap:      var(--layout-spacing-8);
   }
}

/* Section Tab (items が少ない場合は通常表示,items が多い場合は自動で横スクロール) */
.section-tab {
   display:                    flex;
   width:                      100%;
   align-items:                center;
   gap:                        var(--layout-spacing-8);
   padding-block:              var(--focus-ring-offset-tight); /* focus ring の上下が切れないように */
   overflow-x:                 auto;
   flex-wrap:                  nowrap;
   scrollbar-width:            none;
   -ms-overflow-style:         none;
}
.section-tab::-webkit-scrollbar {
   display: none;
}
.section-tab__item {
   display:         inline-flex;
   min-width:       60px;
   padding:         var(--layout-spacing-8) var(--layout-spacing-16);
   justify-content: center;
   align-items:     center;
   border-radius:   var(--border-radius-full);
   border:          var(--border-width-sm) solid var(--section-tab-border-default);
   background:      var(--section-tab-bg-default);
   color:           var(--section-tab-text-default);
   font-size:       var(--font-size-base-text);
   font-weight:     var(--font-weight-base-text);
   line-height:     var(--line-height-none-100);
   white-space:     nowrap;
   flex-shrink:     0;
   cursor:          pointer;
}
.section-tab__item.active, .section-tab__item.is-active, .section-tab__item.is-active__section-tab {
   border:      var(--border-width-sm) solid var(--section-tab-border-active);
   background:  var(--section-tab-bg-active);
   color:       var(--section-tab-text-active);
   font-weight: var(--font-weight-bold-700);
}
.section-tab__panel--hidden, .swiper.section-tab__panel--hidden{
   display: none;
}
@media (min-width: 989px) {
   .section-tab {
      padding-bottom: var(--layout-spacing-4);
      scrollbar-width: thin;
      scrollbar-color: var(--color-neutral-300) transparent;
   }
   .section-tab::-webkit-scrollbar {
      display: block;
      height: 6px;
   }
   .section-tab::-webkit-scrollbar-thumb {
      background-color: var(--color-neutral-300);
      border-radius: var(--border-radius-full);
   }
}

/* ================================
      FOCUS RING
      Tab キーで到達できる要素はすべてここで一括定義する。
      個別コンポーネント側で outline を上書きしないこと（見た目がバラつく原因になる）。
      新しい操作要素を作ったら、このセレクタリストに追加する。
   ================================ */
.text-link:focus-visible,
.cover:focus-visible,
.navigation-tab__item:focus-visible,
.section-tab__item:focus-visible,
.btn-square:focus-visible,
.btn-pill:focus-visible,
.btn-round:focus-visible,
.icon-base--float:focus-visible,
.accordion__trigger:focus-visible,
.account-edit__input:focus-visible,       {
   outline:         var(--focus-ring-width) solid var(--focus-ring-color);
   outline-offset:  var(--focus-ring-offset);
}
/* overflow-x を持つ container の中では offset 4px が切られるため詰める
   （section-tab / navigation-tab の子要素） */
.section-tab__item:focus-visible,
.navigation-tab__item:focus-visible,
.btn-group--scroll > *:focus-visible,
.accordion__trigger:focus-visible {
   outline-offset:  var(--focus-ring-offset-tight);
}
/* 暗い背景・画像の上に置く操作要素に付ける
   primary-700 の ring は neutral-700 背景に対して 1.5:1 しか出ないため */
.u-focus-on-dark:focus-visible {
   outline-color: var(--focus-ring-color-on-dark);
}
/* Windows ハイコントラストモードでも ring を残す */
@media (forced-colors: active) {
   .text-link:focus-visible,
   .cover:focus-visible,
   .navigation-tab__item:focus-visible,
   .section-tab__item:focus-visible,
   .btn-square:focus-visible,
   .btn-pill:focus-visible,
   .btn-round:focus-visible,
   .icon-base--float:focus-visible,
   .accordion__trigger:focus-visible {
      outline-color: Highlight;
   }
}

/* ================================
      Button
      Shape: Square / Pill / Round
      Type:  Primary / Secondary / Ghost（色は shape 共通）
   ================================ */

/* Button Square */
.btn-square{
   display:          inline-flex;
   align-items:      center;
   justify-content:  center;
   gap:              var(--btn-inner-gap);
   box-sizing:       border-box;
   width:            fit-content;
   border-style:     solid;
   border-width:     var(--btn-border-width);
   border-radius:    var(--btn-square-radius);
   font-size:        var(--font-size-base-text);
   font-weight:      var(--btn-font-weight);
   font-family:      inherit;
   line-height:      var(--line-height-none-100);
   text-align:       center;
   text-decoration:  none;
   white-space:      nowrap;
   cursor:           pointer;
}
.btn-square:hover:not(:disabled):not(.is-disabled){
   opacity:  var(--btn-state-hover);
}
.btn-square:disabled, .btn-square.is-disabled {
   opacity:         var(--btn-state-disabled);
   cursor:          not-allowed;
   pointer-events:  none;
}
/* Size: xs / sm は同じ高さ（32px）で padding-x だけが違う。
   xs = 集合で並ぶ・幅を詰めたい場合、sm = 単独で置く場合 */
.btn-square--xs{
   font-size:  var(--font-size-14);
   padding:    0 var(--layout-spacing-8);
   min-height: var(--control-height-sm); /*32px*/
}
.btn-square--sm {
   font-size:  var(--font-size-14);
   padding:    0 var(--layout-spacing-12);
   min-height: var(--control-height-sm); /*32px*/
}
.btn-square--md {
   font-size:  var(--font-size-16);
   padding:    0 var(--layout-spacing-20);
   min-height: var(--control-height-md); /*40px*/
}
.btn-square--lg {
   font-size:   var(--font-size-18);
   padding:     0 var(--layout-spacing-24);
   min-height:  var(--control-height-lg); /*48px*/
}
.btn-square--fill {
   display: flex;
   width:   100%;
   min-width:  0;
}
/* Button Pill */
.btn-pill {
   display:          inline-flex;
   align-items:      center;
   justify-content:  center;
   gap:              var(--btn-inner-gap);
   box-sizing:       border-box;
   width:            fit-content;
   border-style:     solid;
   border-width:     var(--btn-border-width);
   border-radius:    var(--btn-pill-radius);
   font-weight:      var(--btn-font-weight);
   font-family:      inherit;
   line-height:      var(--line-height-none-100);
   text-align:       center;
   text-decoration:  none;
   white-space:      nowrap;
   cursor:           pointer;
}
.btn-pill:hover:not(:disabled):not(.is-disabled):not(.btn-pill--float){
   opacity:  var(--btn-state-hover);
}
.btn-pill:disabled, .btn-pill.is-disabled {
   opacity:         var(--btn-state-disabled);
   cursor:          not-allowed;
   pointer-events:  none;
}
/* Size: btn-square と同じ段階。xs / sm は btn-square--xs / --sm と同値 */
.btn-pill--xs {
   font-size:  var(--font-size-14);
   padding:    0 var(--layout-spacing-8);
   min-height: var(--control-height-sm); /*32px*/
}
.btn-pill--sm {
   font-size:  var(--font-size-14);
   padding:    0 var(--layout-spacing-12);
   min-height: var(--control-height-sm); /*32px*/
}
.btn-pill--md {
   font-size:  var(--font-size-16);
   padding:    0 var(--layout-spacing-20);
   min-height: var(--control-height-md); /*40px*/
}
.btn-pill--lg {
   font-size:   var(--font-size-18);
   padding:     0 var(--layout-spacing-24);
   min-height:  var(--control-height-lg); /*48px*/
}
.btn-pill--float {
   padding:    var(--layout-spacing-8) var(--layout-spacing-16);
   font-size:  var(--font-size-18);
   min-width:  180px;
   box-shadow: var(--box-shadow-lv3-strong);
}
/* Button Round（テキストなし / アイコン・ロゴのみ / 1:1）
   中身は .icon-base を入れ子にする（icon-base は「画像の器」、色と当たり判定は btn-round が持つ） */
.btn-round {
   display:          inline-flex;
   align-items:      center;
   justify-content:  center;
   flex-shrink:      0;
   box-sizing:       border-box;
   padding:          0;
   border-style:     solid;
   border-width:     var(--btn-border-width);
   border-radius:    var(--btn-round-radius);
   line-height:      var(--line-height-none-100);
   text-decoration:  none;
   cursor:           pointer;
}
.btn-round:hover:not(:disabled):not(.is-disabled):not(.btn-round--float){
   opacity:  var(--btn-state-hover);
}
.btn-round:disabled, .btn-round.is-disabled {
   opacity:         var(--btn-state-disabled);
   cursor:          not-allowed;
   pointer-events:  none;
}
/* Round -- Size（btn-square / btn-pill と同じ control-height。横に並べても高さが揃う）
   btn-round 自体が「固定サイズ・中央揃えの箱」なので、内側に icon-base を入れ子にしない。
   img は直下に置き、サイズは size modifier から自動で決まる（内側の余白は全段階 8px）。 */
.btn-round--sm {
   width:   var(--btn-round-size-sm); /*32px*/
   height:  var(--btn-round-size-sm);
}
.btn-round--md {
   width:   var(--btn-round-size-md); /*40px*/
   height:  var(--btn-round-size-md);
}
.btn-round--lg {
   width:   var(--btn-round-size-lg); /*48px*/
   height:  var(--btn-round-size-lg);
}
.btn-round--xl {
   width:   var(--btn-round-size-xl); /*56px*/
   height:  var(--btn-round-size-xl);
}
/* Round -- Icon（サイズは btn-round--* から導出。個別指定しないので不一致が起こらない） */
.btn-round__icon {
   display:      block;
   flex-shrink:  0;
   width:        var(--icon-size-default);
   height:       var(--icon-size-default);
   max-width:    100%;
   max-height:   100%;
}
.btn-round--sm .btn-round__icon { width: var(--icon-size-16); height: var(--icon-size-16); }
.btn-round--md .btn-round__icon { width: var(--icon-size-24); height: var(--icon-size-24); }
.btn-round--lg .btn-round__icon { width: var(--icon-size-32); height: var(--icon-size-32); }
.btn-round--xl .btn-round__icon { width: var(--icon-size-40); height: var(--icon-size-40); }
/* Round -- Float（追従・オーバーレイ上に浮かせる） */
.btn-round--float {
   box-shadow: var(--box-shadow-lv3-strong);
}
/* Round -- Plain（SNS ロゴなど、色をアセット側が持つ場合。当たり判定と形だけ提供） */
.btn-round--plain {
   background-color:  transparent;
   border-color:      transparent;
}

/* Button Type（色）— Square / Pill / Round 共通
   shape をまたいで同じ Type は必ず同じ色になるよう、セレクタをまとめて定義する */
.btn-square--primary,
.btn-pill--primary,
.btn-round--primary {
   background-color:  var(--btn-primary-bg);
   border-color:      var(--btn-primary-border-color);
   color:             var(--btn-primary-text-color);
}
.btn-square--secondary,
.btn-pill--secondary,
.btn-round--secondary {
   background-color:  var(--btn-secondary-bg);
   border-color:      var(--btn-secondary-border-color);
   color:             var(--btn-secondary-text-color);
}
.btn-square--ghost,
.btn-pill--ghost,
.btn-round--ghost {
   background-color:  var(--btn-ghost-bg);
   border-color:      var(--btn-ghost-border-color);
   color:             var(--btn-ghost-text-color);
}

/* Button Group
   複数の button をまとめる container。
   レイアウト（並べ方 / gap / 折り返し）は container が持ち、button の見た目には一切触れない。 */
.btn-group {
   display:      flex;
   align-items:  center;
   gap:          var(--btn-group-gap);
}
/* Group -- Pair（等幅。一番広い button に合わせて揃え、container までは広がらない）
   inline-grid + grid-auto-columns で「中身に合わせた等幅」を作る。
   子に btn-square--fill を付ける必要はない（付けると二重指定になる）
   ※ 現時点で実際の使いどころが未確定。--fill との差が小さいため、
     使用実績が出ないようなら削除を検討する（当面は保留） */
.btn-group--pair {
   display:             grid;
   grid-auto-flow:      column;
   grid-auto-columns:   minmax(0, 1fr);
   align-items:         stretch;
   width:               fit-content;
}
/* Group -- Fill（等幅かつ container いっぱいに広がる） */
.btn-group--fill {
   display:             grid;
   grid-auto-flow:      column;
   grid-auto-columns:   minmax(0, 1fr);
   align-items:         stretch;
   width:               100%;
   max-width:           var(--btn-group-max-width);
}
/* Group -- Stack（縦積み。モバイルの CTA など） */
.btn-group--stack {
   flex-direction:  column;
   align-items:     stretch;
   width:           100%;
   max-width:       var(--btn-group-max-width);
}
/* 等幅・縦積みでは子を枠いっぱいにする（見た目ではなくレイアウトの責務） */
.btn-group--pair > *,
.btn-group--fill > *,
.btn-group--stack > * {
   width:      100%;
   min-width:  0;
}
/* Group -- Inset（group 自身が余白を持つ。背景付きのフッターバー・固定バーなど）
   base は padding: 0 のまま。base に余白を入れると、カード内などで
   親側の padding と二重になり button が内容の端に揃わなくなるため。 */
.btn-group--inset {
   padding:     var(--btn-group-padding);
   box-sizing:  border-box;
}
/* Group -- Align
   2つの状況があるので両方を指定する：
   ・group が中身より広いとき（auto / wrap）→ justify-content が効く
   ・group に幅があるとき（pair / fill / stack）→ 箱ごと動かす margin-inline が効く */
.btn-group--center {
   justify-content:  center;
   margin-inline:    auto;
}
.btn-group--end {
   justify-content:  flex-end;
   margin-inline:    auto 0;
}
/* Group -- Wrap（Tag のように数が可変で、全部見せたい集合） */
.btn-group--wrap {
   flex-wrap: wrap;
}
/* Group -- Scroll（横スクロール）は未実装。
   端の見切れ表現・PC でのスクロール発見性・矢印の有無が未決のため、
   集合はいったん --wrap（折り返し）で扱う。section-tab の挙動を流用するか要検討。 */

/*Float CTA*/
.float-cta{
   position:   fixed;
   right:      var(--layout-spacing-12);
   bottom:     var(--layout-spacing-40);
   z-index:    3;
   display:    flex;
   flex-direction: column;
   align-items: flex-end;
}
.float-cta--dismissible{
   gap: var(--layout-spacing-8);
}

/* Section */
.section {
   display: block;
   width:   100%;
   max-width: 989px;
}
.section--itemshelf{
   display: block;
}
.section--itemshelf--bg {
   padding: var(--layout-spacing-8);
}
.section--itemtab{
   display: flex;
   flex-direction: column;
   gap: var(--layout-spacing-8);
}

/* Section - Headline */
.section-headline{
   display:         flex;
   flex-direction:  column;
   gap:             var(--layout-spacing-8);
   width:           100%;
}
.section-headline__top {
   display:         flex;
   align-items:     center;
   justify-content: space-between;
   gap:             var(--layout-spacing-8);
}
.section-headline__title {
   font-size:     var(--font-size-h2);
   font-weight:   var(--font-weight-h2);
   line-height:   var(--line-height-heading);
   color:         var(--text-color-base);
   overflow-wrap: break-word;
   white-space:   nowrap;
   overflow:      hidden;
   text-overflow: ellipsis;
   margin: -1px;
   padding: 1px;
}
.section-headline__desc {
   font-size:   var(--font-size-base-text);
   font-weight: var(--font-weight-base-text);
   line-height: var(--line-height-base-text);
   color:       var(--text-color-base);
   overflow-wrap: break-word;
}
@media (min-width: 768px) {
   .section-headline__title {
      font-size:     var(--font-size-26);
}
}

/* Section — Item Card */
/* Basic: cover + title(1) */
.item-card, .swiper-slide.item-card {
   display:        flex;
   flex-direction: column;
   gap:            var(--layout-spacing-4);
   width:          fit-content;
   position:       relative;
}
a.item-card:hover {
   opacity: var(--link-hover-state);
}
.item-card--sm, .swiper-slide.item-card--sm {
   width: var(--cover-width-sm);
}
.item-card--md {
   width: var(--cover-width-md);
}
.item-card--lg {
   width: var(--cover-width-lg);
}
.item-card--90 {
   width: var(--cover-width-90);
}
.item-card--96 {
   width: var(--cover-width-96);
}
.item-card--120 {
   width: var(--cover-width-120);
}
.item-card--140 {
   width: var(--cover-width-140);
}
.item-card--160 {
   width: var(--cover-width-160);
}
.item-card--180 {
   width: var(--cover-width-180);
}
.item-card--200 {
   width: var(--cover-width-200);
}
.item-card--220 {
   width: var(--cover-width-220);
}
.item-card--swiper-default, .swiper-slide.item-card--swiper-default {
   width: var(--swiper-slide-width-default);
}
.item-card__title {
   font-size:     var(--font-size-base-text);
   font-weight:   var(--font-weight-base-text);
   line-height:   var(--line-height-base-text-tight);
   color:         var(--text-color-base);
   display:       block;
   -webkit-box-orient: vertical;
   width:         100%;
}
.item-card__title--line1 {
   white-space:   nowrap;
   overflow:      hidden;
   text-overflow: ellipsis;
}
.item-card__title--line2 {
   overflow:            hidden;
   display:             -webkit-box;
   -webkit-box-orient:  vertical;
   -webkit-line-clamp:  2;
   white-space:         normal;
}
.item-card__cover-wrap{
   position: relative;
   width:    100%;
}

/* Section — Banner Grid
   --multi : 600×300 / Desktop 1×4 / Mobile 2×2（3枚以上）
   --2     : 600×200 / Desktop 1×2 / Mobile 2×1（固定2枚） */
.section--banner-grid {
   display:        flex;
   flex-direction: column;
   gap:            var(--layout-spacing-8);
}
.banner-grid {
   display: grid;
   gap:     var(--layout-spacing-8);
}

/* --multi：600×300 / Desktop 1×4 / Mobile 2×2（3枚以上）-- */
.banner-grid--multi {
   grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
   .banner-grid--multi {
      grid-template-columns: repeat(4, 1fr);
   }
}

/* --2：600×200 / Desktop 1×2 / Mobile 2×1（固定2枚） */
.banner-grid--2 {
   grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 768px) {
   .banner-grid--2 {
      grid-template-columns: repeat(2, 1fr);
   }
}
.banner-grid__item {
   display:       block;
   width:         100%;
   border-radius: var(--border-radius-md);
   overflow:      hidden;
}
.banner-grid__item img {
   display: block;
   width:   100%;
   height:  auto;
}
.banner-grid__item:hover {
   opacity: var(--link-hover-state);
}

/* Section — Banner H
出し分け（Desktop 973×158, Mobile 688×230）*/
.banner-h {
   display:       block;
   width:         100%;
   border-radius: var(--border-radius-md);
   overflow:      hidden;
}
.banner-h__img {
   display: block;
   width:   100%;
   height:  auto;
}
.banner-h:hover {
   opacity: var(--link-hover-state);
}

/* Section — Genre Key Visual
出し分け（Desktop 973×105, Mobile 360×100）*/
.genre-key-visual {
   display:       block;
   width:         100%;
}
.genre-key-visual__img {
   display: block;
   width:   100%;
   height:  auto;
}

/* Section — Carousel */
.carousel{
   display: block;
   width: 100%;
   overflow: hidden;
}
.carousel__card{
   display: block;
   box-sizing: border-box;
   border:  var(--swiper-slide-border-style-default);
   border-radius: var(--border-radius-md);
   overflow: hidden;
   position: relative;
}
.carousel__card:hover{
   opacity: var(--link-hover-state);
}
.carousel__imgframe{
   display: block;
   width: 100%;
   aspect-ratio: 4 / 3;
   box-sizing: border-box;
   position: relative;
   overflow: hidden;
}
.carousel__img{
   display: block;
   width: 100%;
   height:auto;
   max-width: none;
}
.carousel__img-overlay{
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(
      180deg,
      rgba(20, 20, 20, 0)    0%,
      rgba(20, 20, 20, 0)    55%,
      rgba(20, 20, 20, 0.4)  72%,
      rgba(20, 20, 20, 0.92) 100%
   );
   z-index: 2;
   opacity: 1;
   will-change: transform;
   transform: translateZ(0);
}
.disp-overlayHide{
   opacity: 0;
}
.carousel__info{
   display: block;
   width: 100%;
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 3;
   padding: var(--layout-spacing-12) var(--layout-spacing-8);
   will-change: transform;
   transform: translateZ(0);
}
.carousel__label{
   display: block;
   background: var(--color-primary-900);
   color: var(--color-neutral-50);
   font-size: var(--font-size-14);
   font-weight: var(--font-weight-semibold-600);
   line-height: var(--line-height-none-100);
   max-width: fit-content;
   padding: var(--layout-spacing-4) var(--layout-spacing-8);
   margin-bottom: var(--layout-spacing-4);
   border-radius: var(--border-radius-full);
   border: var(--border-width-sm) solid var(--color-primary-900);
}
.carousel__desc{
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 220px;
   gap: var(--layout-spacing-4);
   min-height: 100px;
   text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
   padding: 6px; /*text-shadow*/
   margin: -6px; /*text-shadow*/
}
.carousel__desc-primary{
   color: var(--color-neutral-50);
   font-size: var(--font-size-20);
   font-weight: var(--font-weight-bold-700);
   line-height: var(--line-height-snug-140);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   word-break: break-word;
   word-wrap: break-word;
}
.carousel__desc-secondary{
   color: var(--color-neutral-50);
   font-size: var(--font-size-14);
   font-weight: var(--font-weight-regular-400);
   word-wrap: break-word;
   line-height: var(--line-height-snug-140);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   word-break: break-word;
   word-wrap: break-word;
}
.carousel__copyright{
   width:  100%;
   color:  var(--color-basic-white);
   font-size:  var(--font-size-11);
   line-height: var(--line-height-none-100);
   margin-top: var(--layout-spacing-8);
}
@media (min-width: 768px) {
   .carousel__info{
      padding: var(--layout-spacing-12);
   }
   .carousel__desc{
      max-width: 240px;
      min-height: 112px;
   }
   .carousel__desc-primary{
      font-size: var(--font-size-22);
   }
   .carousel__desc-secondary{
      font-size: var(--font-size-16);
   }
   .carousel__copyright{
      margin-top: var(--layout-spacing-16);
   }
}

/* Section — Pick Card */
.pick-card, .swiper-slide.pick-card{
   display:        flex;
   flex-direction: column;
   box-sizing:     border-box;
   border-radius:  var(--border-radius-md);
   overflow:       hidden;
   background:     var(--color-primary-900);
   border:         var(--swiper-slide-border-style-default);
   width:          var(--cover-width-lg);
}
.pick-card--shojo, .swiper-slide.pick-card--shojo{
   background: var(--color-shojo-default);
}
.pick-card--bl, .swiper-slide.pick-card--bl{
   background: var(--color-bl-default);
}
.pick-card--tl, .swiper-slide.pick-card--tl{
   background: var(--color-tl-default);
}
.pick-card--yuri, .swiper-slide.pick-card--yuri{
   background: var(--color-yuri-default);
}
.pick-card__banner{
   position: relative;
}
.pick-card__imgframe{
   display:      block;
   width:        100%;
   aspect-ratio: 4 / 3;
   box-sizing:   border-box;
   position:     relative;
   overflow:     hidden;
}
.pick-card__imgframe--square{
   aspect-ratio: 1 / 1;
}
.pick-card__img{
   display:     block;
   width:       100%;
   height:      100%;
}
.pick-card__img-overlay{
   position: absolute;
   bottom:   0;
   left:     0;
   width:    100%;
   height:   30%;
   background: linear-gradient(180deg, rgba(115, 115, 115, 0.00) 0%,rgba(38, 38, 38, 0.90) 100%);
   z-index: 3;
   will-change: transform;
   transform: translateZ(0);
}
.pick-card__copyright{
   position:    absolute;
   bottom:      var(--layout-spacing-8);
   left:        var(--layout-spacing-8);
   z-index:     4;
   color:       var(--color-basic-white);
   font-size:   var(--font-size-11);
   line-height: var(--line-height-none-100);
   margin:      0 var(--layout-spacing-8);
}
.pick-card__info{
   display:        flex;
   flex-direction: column;
   flex:           1;
   padding:        var(--layout-spacing-12);
   gap:            var(--layout-spacing-12);
}
.pick-card__desc{
   display:        flex;
   flex-direction: column;
   flex:           1;
   gap:            var(--layout-spacing-4);
   min-height:     88px;
   overflow:       hidden;
}
.pick-card__desc-primary{
   color:       var(--color-basic-white);
   font-size:   var(--font-size-16);
   font-weight: var(--font-weight-bold-700);
   line-height: var(--line-height-snug-140);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   word-break: break-word;
   overflow-wrap: break-word;
   margin: 0;
}
.pick-card__desc-secondary{
   color:       var(--color-basic-white);
   font-size:   var(--font-size-14);
   font-weight: var(--font-weight-regular-400);
   line-height: var(--line-height-snug-140);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   word-break: break-word;
   overflow-wrap: break-word;
   margin: 0;
}

/* Section — Preview Card */
.preview-card-row {
   display:         flex;
   gap:             var(--layout-spacing-8);
   overflow-x:      auto;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
}
.preview-card-row::-webkit-scrollbar {
   display: none;
}
.preview-card {
   display:       block;
   flex:          0 0 auto;
   width:         100%;
   max-width:     340px;
   box-sizing:    border-box;
   border:        var(--border-width-sm) solid var(--color-neutral-300);
   border-radius: var(--border-radius-md);
   overflow:      hidden;
}
.preview-card__imagewrap {
   display:      flex;
   align-items:  flex-start;
   overflow:     hidden;
   background:   var(--color-neutral-100);
   border-top-left-radius:  var(--border-radius-md);
   border-top-right-radius: var(--border-radius-md);
}
.preview-card__imagewrap .cover {
   flex: 0 0 auto;
}
.preview-card__banner {
   position:     relative;
   flex:         1;
   min-width:    0;
   aspect-ratio: 4 / 3;
   overflow:     hidden;
}
.preview-card__banner-img {
   display:     block;
   width:       100%;
   height:      100%;
   max-width:   none;
}
.preview-card__footer {
   display:         flex;
   align-items:     center;
   justify-content: space-between;
   gap:             var(--layout-spacing-8);
   padding:         var(--layout-spacing-8);
}
.preview-card__meta {
   display:        flex;
   flex-direction: column;
   flex:           1;
   gap:            var(--layout-spacing-4);
}
.preview-card__title {
   font-size:   var(--font-size-base-text);
   font-weight: var(--font-weight-bold-700);
   color:       var(--text-color-base);
   line-height: var(--line-height-snug-140);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
   word-break: break-word;
   overflow-wrap: break-word;
   margin: 0;
}
.preview-card__tags {
   font-size:     var(--font-size-remark);
   color:         var(--text-color-base-light);
   line-height:   var(--line-height-snug-140);
   white-space:   nowrap;
   overflow:      hidden;
   text-overflow: ellipsis;
   margin: 0;
}
@media (min-width: 768px) {
   .preview-card-row {
      display:               grid;
      grid-template-columns: repeat(2, 1fr);
      gap:                   var(--layout-spacing-16);
      overflow-x:            visible;
   }
   .preview-card {
      width:     auto;
      max-width: none;
   }
   .preview-card__footer{
      padding: var(--layout-spacing-8) var(--layout-spacing-16);
   }
}

/* Form */
textarea{
   font-family: var(--font-family-default);
}

/* ================================
   Accordion
   .accordion          … item を縦に並べるだけの器
   .accordion__item    … 1 項目。開いている状態は .is-open（JS が付け外し）
   .accordion__trigger … クリック領域（heading + icon）
   .accordion__body    … 開閉されるコンテンツ
   ================================ */
.accordion {
   display:         flex;
   flex-direction:  column;
}
.accordion__trigger {
   display:      flex;
   align-items:  flex-start; /* タイトルが2行になっても icon は1行目に揃える */
   gap:          var(--accordion-trigger-gap);
   padding:      var(--accordion-trigger-padding);
   cursor:       pointer;
   user-select:  none;
}
/* heading は残りの幅をすべて使い、長い場合は折り返して高さが伸びる */
.accordion__trigger > :not(.icon-base) {
   flex:       1 1 auto;
   min-width:  0;
   margin:     0;
}
.accordion__trigger > .icon-base {
   flex:        none;
   transition:  transform 0.2s ease;
}
@media (hover: hover) {
   .accordion__trigger:hover {
      opacity: var(--link-hover-state);
   }
}
.accordion__body {
   display:  none;
   padding:  var(--accordion-body-padding);
}

/* Open（.is-open） */
.accordion__item.is-open > .accordion__body {
   display: block;
}
.accordion__item.is-open > .accordion__trigger > .icon-base {
   transform: rotate(180deg); /* arrow_down → 上向き */
}

@media (prefers-reduced-motion: reduce) {
   .accordion__trigger > .icon-base {
      transition: none;
   }
}
/* ================================
   Header（TEMP / 臨時）
   ※ 暫定版。固定（fixed）・スクロールで隠れる JS は後で対応
   .header--temp    … 外枠（TEMP）
   .header__inner   … max-width / logo と actions を左右に振り分け
   .header__logo    … logo のリンク（共通）
   .header__actions … 右側（Log In ／ icon + Log Out）
   .header__icons   … ログイン中の icon 群（btn-round--plain を並べる）
   ================================ */
.header--temp {
   background:  var(--page-bg-default);
   box-shadow:  var(--box-shadow-lv1-subtle);
}
.header__inner {
   display:          flex;
   align-items:      center;
   justify-content:  space-between;
   gap:              var(--layout-spacing-8);
   max-width:        var(--page-max-width-desktop);
   min-height:       var(--header-min-height);
   margin-inline:    auto;
   padding-block:    var(--layout-spacing-4);
   padding-inline:   var(--page-padding-x-md);
}
.header__logo {
   display:  inline-flex;
   flex:     none;
}
.header__logo-img {
   display:    block;
   width:      auto;
   height:     var(--header-logo-height);
   max-width:  40vw;
}
@media (hover: hover) {
   .header__logo:hover {
      opacity: var(--link-hover-state);
   }
}
.header__actions {
   display:      flex;
   align-items:  center;
   gap:          var(--layout-spacing-8);
}
.header__icons {
   display:      flex;
   align-items:  center;
   gap:          var(--layout-spacing-0); /* btn-round 自体に余白があるので 0 */
}
.btn-round--lg .header__icon-img{ /* TEMP header-icon */
   width: var(--icon-size-40);
   height: var(--icon-size-40);
}
/* 固定（スクロールしても上部に残る）
   sticky なので header は通常の流れに残り、本文の位置調整（padding-top）や JS は不要
   ※ 親要素（body / .page）や祖先に overflow: hidden / auto があると効かない
   ※ 今は navigation bar がないので常に表示。スクロールで隠す処理は nav を組み合わせるときに追加 */
.header--fixed {
   position:  sticky;
   top:       0;
   z-index:   var(--header-z-index);
}

/* ================================
   Footer（TEMP / 臨時）
   ================================ */
.footer--temp {
   display: flex;
   flex-direction: column;
   gap: var(--layout-spacing-12);
   align-items: center;
   padding: var(--page-padding-x-md);
}
.footer__index {
   display: flex;
   flex-wrap: wrap;
   gap: var(--layout-spacing-8);
   align-items: center;
   justify-content: center;
}
.footer__link {
   white-space: nowrap;
}
.footer__copyright {
   color: var(--text-color-base-light);
   text-align: center;
}
@media (min-width: 768px) {
   .footer__index {
      gap: var(--layout-spacing-16);
   }
}