/* design_token.css */
/* ================================
      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;
   --color-critical-light:    #FFD4E5;

   /* 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;
}

/* ================================
      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);

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

   /* Color - Page Background */
   --page-background-default: var(--color-basic-white);

   /* 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 */
   --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);
   --cover-hover-filter:   opacity(0.7);
   --cover-disabled-filter:   opacity(0.3);

   /* 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 - Common */
   --btn-border-width: var(--border-width-sm);
   --btn-font-weight: var(--font-weight-base-text-strong);
   /* Component - Button Square */
   --btn-square-radius: var(--border-radius-md);
   /* Component - Button Square -- Primary */
   --btn-square-primary-bg-default:            var(--color-primary-700);
   --btn-square-primary-text-color-default:    var(--color-basic-white);
   --btn-square-primary-border-color-default:  var(--color-primary-700);
   /* Component - Button Square -- Secondary */
   --btn-square-secondary-bg-default:            var(--color-basic-white);
   --btn-square-secondary-text-color-default:    var(--color-primary-700);
   --btn-square-secondary-border-color-default:  var(--color-primary-700);
   /* Component - Button Square -- Ghost */
   --btn-square-ghost-bg-default:            var(--color-basic-white);
   --btn-square-ghost-text-color-default:    var(--color-neutral-700);
   --btn-square-ghost-border-color-default:  var(--color-neutral-700);
   /* Component - Button Pill */
   --btn-pill-radius: var(--border-radius-full);
   /* Component- Button Pill -- Primary */
   --btn-pill-primary-bg-default:            var(--color-primary-700);
   --btn-pill-primary-text-color-default:    var(--color-basic-white);
   --btn-pill-primary-border-color-default:  var(--color-primary-700);
   /* Component- Button Pill -- Secondary */
   --btn-pill-secondary-bg-default:            var(--color-primary-200);
   --btn-pill-secondary-text-color-default:    var(--color-primary-700);
   --btn-pill-secondary-border-color-default:  var(--color-primary-700);
   /* Component- Button Pill -- Ghost */
   --btn-pill-ghost-bg-default:            var(--color-basic-white);
   --btn-pill-ghost-text-color-default:    var(--color-neutral-700);
   --btn-pill-ghost-border-color-default:  var(--color-neutral-700);
}

/* ================================
      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);
   }
}

/* ================================
      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);
}

/* 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);
}

/* Icon */
.icon-base {
	display:			   inline-flex;
	align-items:		center;
	justify-content:	center;
}
/* 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%;
}
/* Icon - Round */
.icon-base--round-sm {
	border-radius:	var(--border-radius-full);
	padding:		var(--icon-padding-sm);
}
.icon-base--round-md {
	border-radius:	var(--border-radius-full);
	padding:		var(--icon-padding-md);
}
.icon-base--round-lg {
	border-radius:	var(--border-radius-full);
	padding:		var(--icon-padding-lg);
}
/* Icon - Background Color */
.icon-base--bg-primary {
	background-color:	var(--color-primary-700);
}
.icon-base--bg-white {
	background-color:	var(--color-basic-white);
}
/* Icon - 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--subtle{ /*not yet*/
   display:         inline-flex;
}
.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--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);
}

/* 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.active, .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);
   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 {
   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{
   display: none;
}
@media (min-width: 989px) {
   .section-tab {
      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);
   }
}

/* Button Square */
.btn-square{
   display:          inline-flex;
   align-items:      center;
   justify-content:  center;
   gap:              var(--layout-spacing-8);
   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(--link-hover-state);
}
.btn-square:disabled, .btn-square.is-disabled {
   opacity:         var(--link-disabled-state);
   cursor:          not-allowed;
   pointer-events:  none;
}
.btn-square:focus-visible {
   outline:         var(--border-width-md) solid var(--color-primary-700);
   outline-offset:  var(--layout-spacing-4);
}
.btn-square--primary {
   background-color:  var(--btn-square-primary-bg-default);
   border-color:      var(--btn-square-primary-border-color-default);
   color:             var(--btn-square-primary-text-color-default);
}
.btn-square--secondary {
   background-color:  var(--btn-square-secondary-bg-default);
   border-color:      var(--btn-square-secondary-border-color-default);
   color:             var(--btn-square-secondary-text-color-default);
}
.btn-square--ghost {
   background-color:  var(--btn-square-ghost-bg-default);
   border-color:      var(--btn-square-ghost-border-color-default);
   color:             var(--btn-square-ghost-text-color-default);
}
.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(--layout-spacing-8);
   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(--link-hover-state);
}
.btn-pill:disabled, .btn-pill.is-disabled {
   opacity:         var(--link-disabled-state);
   cursor:          not-allowed;
   pointer-events:  none;
}
.btn-pill:focus-visible {
   outline:         var(--border-width-md) solid var(--color-primary-700);
   outline-offset:  var(--layout-spacing-4);
}
.btn-pill--primary {
   background-color:  var(--btn-pill-primary-bg-default);
   border-color:      var(--btn-pill-primary-border-color-default);
   color:             var(--btn-pill-primary-text-color-default);
}
.btn-pill--secondary{
   background-color:  var(--btn-pill-secondary-bg-default);
   border-color:      var(--btn-pill-secondary-border-color-default);
   color:             var(--btn-pill-secondary-text-color-default);
}
.btn-pill--ghost{
   background-color:  var(--btn-pill-ghost-bg-default);
   border-color:      var(--btn-pill-ghost-border-color-default);
   color:             var(--btn-pill-ghost-text-color-default);
}
.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);
}

/*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 {
   display:        flex;
   flex-direction: column;
   gap:            var(--layout-spacing-4);
   width:          fit-content;
   position:       relative;
}
.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 {
   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);
   overflow:      hidden;
   display:       -webkit-box;
   -webkit-box-orient: vertical;
   width:         100%;
   white-space: nowrap;
   text-overflow: ellipsis;
}
.item-card__title--line1 {
   -webkit-line-clamp: 1;
}
.item-card__title--line2 {
   -webkit-line-clamp: 2;
}
.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__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%;
   mix-blend-mode: multiply;
   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;
}
.carousel__info{
   display: block;
   width: 100%;
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 3;
   padding: var(--layout-spacing-12) var(--layout-spacing-8);
}
.disp-overlayHide{
   display: none;
}
.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;
}
.carousel__desc-primary{
   color: var(--color-neutral-50);
   font-size: var(--font-size-20);
   font-weight: var(--font-weight-bold-700);
   text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
   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;
   padding: 6px; /*text-shadow*/
   margin: -6px; /*text-shadow*/
}
.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{
   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__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%;
   mix-blend-mode: multiply;
   background: linear-gradient(180deg, rgba(115, 115, 115, 0.00) 0%,rgba(38, 38, 38, 0.90) 100%);
   z-index: 3;
   opacity: 0;
   transition: opacity 0.3s ease;
}
.fadeIn-image-loaded ~ .pick-card__img-overlay{
   opacity: 1;
}
.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-neutral-200);
   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);
}