@charset "utf-8";
/* ================================================== *
   0.75 0.875 1 1.125 1.5 1.625 1.75 1.875 2 
 * ================================================== */

/* ================================================== *
.xxxxxx-xxxx{
  color: var(--btn-accent-text);

  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  white-space: nowrap;

  background: var(--color-surface);

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;

  width: 100%;
  height: calc(var(--spb-vh, 1vh) * 100) !important;
  max-height: calc(var(--spb-vh, 1vh) * 100) !important;
  padding-inline: 1.5rem;
  margin-bottom: 1rem;

  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-sizing: border-box;

  position: fixed;
  inset: 0;
  z-index: var(--spb-z-search-panel-above);

  transform: translate3d(0, -12%, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
  will-change: transform, opacity;

  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: auto;

  touch-action: pan-y;
  cursor: pointer;
  user-select: none;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
 * ================================================== */
:root{
  /* -- layout -------------------------------------- */
  --layout-inner-width: 1440px;
  --layout-inner-padding: clamp(1rem, 4vw, 4rem);
  --layout-rail-width: 128px;
  --layout-header-height: 80px; 
  
  /* -- space ---------------------------------------- */
  --space-panel-block: clamp(4rem, 8vw, 8rem);
  
  /* -- font-family --------------------------------- */
  --font-en: "Jost", sans-serif;

  /* -- color-base ---------------------------------- */
  --color-white: #FFF;
  --color-black: #000;
  --color-accent-warm: #726962;
  --color-accent-cool: #4B5260;

  /* -- color-fg ------------------------------------ */
  --color-fg-white: var(--color-white);
  --color-fg-black: var(--color-black);
  --color-fg-base: #363636;
  --color-fg-base-soft: #666666;
  --color-fg-brand: #726962;
  --color-fg-brand-dark: #4A474B;
  --color-fg-accent-warm: var(--color-accent-warm);
  --color-fg-accent-cool: var(--color-accent-cool);

  /* -- color-bg ------------------------------------ */
  --color-bg-white: var(--color-white);
  --color-bg-black: var(--color-black);
  --color-bg-base: #F6F6F6;
  --color-bg-base-dark: #E6E6E6;
  --color-bg-brand: #383841;
  --color-bg-brand-dark: #26262D;
  --color-bg-accent-warm: var(--color-accent-warm);
  --color-bg-accent-cool: var(--color-accent-cool);

  /* -- color-alpha --------------------------------- */
  --color-white-alpha-10: rgba(255,255,255,.10);
  --color-white-alpha-20: rgba(255,255,255,.20);
  --color-white-alpha-40: rgba(255,255,255,.40);
  --color-white-alpha-80: rgba(255,255,255,.80);
  --color-black-alpha-10: rgba(0,0,0,.10);
  --color-black-alpha-20: rgba(0,0,0,.20);
  --color-black-alpha-40: rgba(0,0,0,.40);
  --color-black-alpha-80: rgba(0,0,0,.80);

  /* -- font-size scale ----------------------------- */
  --fs-2xs: clamp(0.75rem, 0.74rem + 0.05vw, 0.8125rem);   /* 12px → 13px | 注釈、極小補足、コピーライト */
  --fs-xs:  clamp(0.8125rem, 0.80rem + 0.08vw, 0.875rem);  /* 13px → 14px | 英語アイブロウ、小ラベル、キャプション */
  --fs-sm:  clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);  /* 14px → 15px | 小さめUIテキスト、メタ情報、補助テキスト */
  --fs-md:  clamp(0.9375rem, 0.92rem + 0.08vw, 1rem);      /* 15px → 16px | 本文、説明文、通常リスト、カード本文 */
  --fs-lg:  clamp(1rem, 0.98rem + 0.10vw, 1.0625rem);      /* 16px → 17px | リード文、やや強い本文、CTA説明文 */
  --fs-xl:  clamp(1.125rem, 1.08rem + 0.18vw, 1.25rem);    /* 18px → 20px | 小見出し、カードタイトル、小ブロック見出し */
  --fs-2xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);      /* 20px → 24px | 中見出し、h3相当、小セクション見出し */
  --fs-3xl: clamp(1.5rem, 1.35rem + 0.65vw, 1.75rem);      /* 24px → 28px | セクション見出し、h2相当 */
  --fs-4xl: clamp(1.75rem, 1.55rem + 0.95vw, 2rem);        /* 28px → 32px | 強めのセクション見出し、ページ内主要見出し */
  --fs-5xl: clamp(2rem, 1.75rem + 1.25vw, 2.5rem);         /* 32px → 40px | 大見出し、小ヒーロー、強調コピー */
  --fs-6xl: clamp(2.5rem, 2.1rem + 1.8vw, 3rem);           /* 40px → 48px | ディスプレイ見出し、ページ冒頭の主見出し */
  --fs-7xl: clamp(3rem, 2.5rem + 2.4vw, 3.5rem);           /* 48px → 56px | 大ヒーロー見出し、ブランドコピー */
  --fs-8xl: clamp(3.5rem, 2.9rem + 2.8vw, 4rem);           /* 56px → 64px | 特別に強く見せたい大ヒーロー見出し */

  /* -- line-height role ----------------------------- */
  --line-height-tight: 1.15;      /* ヒーロー、大きい見出し */
  --line-height-heading: 1.3;     /* セクション見出し、大見出し */
  --line-height-heading-sm: 1.45; /* 小見出し、中見出し */
  --line-height-body: 1.75;       /* 本文 */
  --line-height-lead: 1.9;        /* リード文、導入文 */
  --line-height-ui: 1.5;          /* 小さめUI、ラベル、メタ情報 */
  --line-height-caption: 1.4;     /* キャプション、英語アイブロウ */
  
  /* -- radius -------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* -- shadow -------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.10);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10);
}

/* ==================================================
 * reset
 * ================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input, textarea, select{padding: 0;margin: 0;border: 0;}
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section{display: block;}
audio, canvas, video{display: inline-block;}
audio:not([controls]){display: none;}
embed, iframe, object, video{max-width: 100%;}
h1, h2, h3, h4, h5, h6{font-size: 1rem;font-weight: inherit;line-height: inherit;}
img{display: block;max-width: 100%;height: auto;}
svg{display: block;max-width: 100%;height: auto;}
ol, ul{list-style: none;}
input, select, textarea{color: inherit;font: inherit;font-size: 16px;}
textarea{resize: vertical;}
button{color: inherit;font: inherit;background-color: transparent;padding: 0;margin: 0;border: none;appearance: none;touch-action: manipulation;-webkit-tap-highlight-color: transparent;cursor: pointer;}
button[disabled],
button[aria-disabled="true"] {cursor: default;}
strong{font-weight: inherit;}
em{font-style: italic;}
address{font-style: normal;}
a:link,a:active,a:visited{color: inherit;text-decoration: none;}
a:hover,a:focus-visible{text-decoration: none;}

/* ==================================================
 * base
 * ================================================== */
html{
  font-size: 100%;
  scrollbar-gutter: stable;
}
body{
  color: #363636;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-md);
  font-weight: 500;
  font-style: normal;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  line-height: 1.75;
  letter-spacing: 0.025rem;
  text-align: left;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #F6F6F6;
}

/* ==================================================
 * c-heading
 * ================================================== */
.c-heading{
  font-size: clamp(1rem, 1.125vw, 1.125rem);
  margin-bottom: 2rem;
}

/* ==================================================
 * c-heading--underline
 * ================================================== */
[data-ui-theme="light"]{
  --c-heading-underline-before: rgba(0,0,0,.20);
  --c-heading-underline-after: rgba(0,0,0,.40);
}
[data-ui-theme="dark"]{
  --c-heading-underline-before: rgba(255,255,255,.20);
  --c-heading-underline-after: rgba(255,255,255,.40);
}
.c-heading--underline{
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  padding-bottom: 1rem;
  position: relative;
}
.c-heading--underline::before,
.c-heading--underline::after{
  content: '';
  height: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  position: absolute;
  left: 0;bottom: 0;
}
.c-heading--underline::before{
  width: 4rem;
  border-bottom-color: var(--c-heading-underline-before);
}
.c-heading--underline::after{
  width: 2rem;
  border-bottom-color: var(--c-heading-underline-after);
}

/* ==================================================
 * c-heading--marker-square
 * ================================================== */
.c-heading--marker-square{
  position: relative;
  padding-left: 1.5rem;
}
.c-heading--marker-square::before{
  content: '';
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background: currentColor;
  position: absolute;
  left: 0;
  top: 0.9em;
  transform: translateY(-50%);
}

/* ==================================================
 * c-external-mark
 * ================================================== */
.c-external-mark{
  display: inline-block;
  padding-right: 1em;
  position: relative;
}
.c-external-mark::before,
.c-external-mark::after{
  content:'';
  width: 0.5em;
  height: 0.5em;
  position:absolute;
}
.c-external-mark::before{
  border: 1px solid currentColor;
  right: 0.15em;top: 0.3em;
}  
.c-external-mark::after{
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  right: 0;top: 0.15em;
}

/* ==================================================
 * u-underline-sweep
 * ================================================== */
.u-underline-sweep{ 
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.u-underline-sweep::after{
  content: '';
  width: 100%;
  height:0;
  border-bottom: 1px solid currentColor;
  position: absolute;
  left: -100%;bottom: 0;
  pointer-events: none;
  transition: left .4s ease;
}
.u-underline-sweep:hover::after{
  left: 0;
}

/* ==================================================
 * u-underline-swap
 * ================================================== */
.u-underline-swap{
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  position: relative;
  overflow: hidden; 
}
.u-underline-swap::before,
.u-underline-swap::after{
  content: '';
  height: 0;
  border-bottom: 1px solid currentColor;
  position: absolute;
  left: 0;right: 0;bottom: 0;   
  pointer-events: none;
  will-change: transform;
}
.u-underline-swap::before{
  transform: translateX(0);
  transition: transform .4s ease;
}
.u-underline-swap::after{
  transform: translateX(-120%);
  transition: transform .4s ease .2s;
}
.u-underline-swap:hover::before,
.u-underline-swap:focus-visible::before{
  transform: translateX(120%);
}
.u-underline-swap:hover::after,
.u-underline-swap:focus-visible::after{
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce){
  .u-underline-swap::before,
  .u-underline-swap::after{
    transition: none;
    transform: translateX(0);
  }
}

/* ==================================================
 * u-slot-clip + u-text-slot
 * ================================================== */
.u-slot-clip{
  line-height: 1.5;
  display: inline-block;align-self: flex-start;
  flex: 0 0 auto;
  height: 1.5em;
  position: relative;
  overflow: hidden;
}
.u-text-slot{
  display: inline-flex;
  position: relative;
  transform: translateY(0);
  transition: transform .4s ease;
  will-change: transform;
}
.u-text-slot::after{
  content: attr(data-text);
  width: 100%;
  position: absolute;
  left: 0;top: 100%;
}
.u-slot-clip:hover .u-text-slot,
.u-slot-clip:focus-visible .u-text-slot{
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce){
  .u-text-slot{
    transition: none;
  }
  .u-slot-clip:hover .u-text-slot,
  .u-slot-clip:focus-visible .u-text-slot{
    transform: translateY(0);
  }
}
/* ==================================================
 * u-gradient-shift
 * ================================================== */
.u-gradient-shift--fg{
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(62deg, #6B625A, #8A7C70, #5B5460, #3B414C);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 220% 220%;
  background-position: 50% 50%;
  animation: gradient-shift-fg 20s ease-in-out infinite;
}

.u-gradient-shift--bg{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #241F1F;
}

.u-gradient-shift--bg::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180vmax;
  height: 180vmax;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(62deg, #241F1F, #352A2A 42%, #353B4A 72%, #3E3837 100%);
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1.12);
  animation: gradient-shift-bg 28s linear infinite;
}


@keyframes gradient-shift-fg{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

@keyframes gradient-shift-bg{
  0%{ transform: translate(-50%, -50%) rotate(0deg) scale(1.12); }
  50%{ transform: translate(-50%, -50%) rotate(180deg) scale(1.16); }
  100%{ transform: translate(-50%, -50%) rotate(360deg) scale(1.12); }
}

@media (prefers-reduced-motion: reduce){
  .u-gradient-shift--fg,
  .u-gradient-shift--bg::before{
    animation: none;
  }
}

/* ==================================================
 * ui-list--dot
 * ================================================== */
.ui-list--dot > li{
  position: relative;
  padding-left: 1rem;
}
.ui-list--dot > li::before{
  content: '・';
  position: absolute;
  left: 0.2em;
  top: 0.9em;
  transform: translateY(-50%);
}

/* ==================================================
 * ui-list--note
 * ================================================== */
.ui-list--note > li{
  position: relative;
  padding-left: 1em;
}
.ui-list--note > li::before{
  content: '※';
  position: absolute;
  left: 0;
  top: 0.9em;
  transform: translateY(-50%);
}

/* ==================================================
 * ui-list--number
 * ================================================== */
.ui-list--number{
  counter-reset: item;
}
.ui-list--number > li{
  counter-increment: item;
  padding-left: 1.5rem;
  position: relative;
}
.ui-list--number > li::before{
  content: counter(item) ')';
  min-width: 2rem;
  position: absolute;
  left: 0;top: 0;
}

/* ================================================== *
   ui-parallax
 * ================================================== */
.ui-parallax{
  height: clamp(300px, 60vw, 600px);
  overflow: hidden;
}
.ui-parallax-image{
  display: flex;align-items: center;justify-content: center;
  width: 100%;
  height: 100%;
  margin-inline: auto;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.ui-parallax-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;top: 0;
  z-index: -1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: none;
}
.ui-parallax-overlay{
  background: rgba(0,0,0,0.2);
  width: 100%;
  height: 100%;
  position: absolute;left: 0;top: 0;
}
@media screen and (min-width: 1025px){
  .ui-parallax{
    height: 800px;min-height: 600px;
  }
}

/* ==================================================
 * nav-breadcrumb
 * ================================================== */
.nav-breadcrumb{
  font-size: clamp(0.75rem, 0.875vw, 0.875rem);background: #CCC;
  order: 9999;
}
.nav-breadcrumb__inner{
  display:flex;align-items:center;
  max-width: var(--layout-inner-width);
  padding-inline: var(--layout-inner-padding);
  margin-inline:auto;
}
.nav-breadcrumb__rule{
  width: 32px;
  height: 1px;
  margin-right: 1rem;
  flex: 0 0 auto;
  background: rgba(0,0,0,.20);
  position: relative;
  overflow: hidden;
}
.nav-breadcrumb__rule > span{
  position: absolute;
  inset: 0;
}
.nav-breadcrumb__rule > span::after{
  content: '';
  background: #363636;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  animation: rule-infinite 4.4s ease-in-out infinite;
}
.nav-breadcrumb__list{
  display: flex;align-items: center;
}
.nav-breadcrumb__item{
  display: flex;align-items: center;
}
.nav-breadcrumb__item + .nav-breadcrumb__item::before{
  content: '/';
  margin-inline: 0.5rem;
}
.nav-breadcrumb__link,
.nav-breadcrumb__text{
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 156px;
  overflow: hidden;
}
@media screen and (min-width: 1025px){
.nav-breadcrumb{
    padding-right: 128px;
  }
}
@keyframes rule-infinite{
  0%{transform: translateX(-100%);opacity: 0;}
  10%{opacity: 1;}
  50%{transform: translateX(0%);opacity: 1;}
  90%{opacity: 1;}
  100%{transform: translateX(100%);opacity: 0;}
}


/* ==================================================
 * container
 * ================================================== */
.container{
  width: 100%;
}



/* ==================================================
 * site-main
 * ================================================== */
.site-main{
  display: flex;flex-direction: column;
  width: 100%;
 /*  transform: translateY(20px);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease-in-out;
  will-change: transform, opacity; */
}/*
body.page-enter .site-main{
  transform: translateY(0);
  opacity: 1;
}
body.page-leave .site-main{
  transform: translateY(-10px);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .site-main{
    transition: none !important;
  }
} */



/* ==================================================
 * section
 * ================================================== */
.section{
  color: var(--section-fg, inherit);
  background: var(--section-bg, transparent);
  width: 100%;
  overflow-x: clip;
  --rail-width: 0px;
  --section-gutter: max( var(--layout-inner-padding), calc((100vw - var(--rail-width) - var(--layout-inner-width)) / 2 + var(--layout-inner-padding)) );
  --bg-inset: var(--layout-inner-padding);
}
@supports not (overflow: clip){
  .section{
    overflow-x: hidden;
  }
}
.section--bg-brand{
  --section-fg: var(--color-fg-invert-muted);
  --section-bg: var(--color-bg-brand);
}
.section--bg-brand-dark{
  --section-fg: var(--color-fg-invert-muted);
  --section-bg: var(--color-bg-brand-dark);
}
.section--bg-brand-light{
  --section-fg: var(--color-fg-base);
  --section-bg: var(--color-bg-base-dark);
}
.section--bg-accent-warm{
  --section-fg: var(--color-fg-white);
  --section-bg: var(--color-bg-accent-warm);
}
@media screen and (min-width: 1025px){
  .section{
    --rail-width: 128px;
    padding-right: var(--rail-width);
  }
  .section--full{
    padding-right: 0;
  }
}

/* ==================================================
 * section__inner
 * ================================================== */
.section__inner{
  width: 100%;
  max-width: var(--layout-inner-width);
  padding-inline: var(--layout-inner-padding);
  margin-inline: auto;
}
.section__inner--full{
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
  margin-inline: auto;
}

/* ==================================================
 * section__panel
 * ================================================== */
.section__panel{
  --section-space-top: var(--space-panel-block);
  --section-space-bottom: var(--space-panel-block);
  padding-top: var(--section-space-top);
  padding-bottom: var(--section-space-bottom);
  padding-right: 0;
  padding-left: 0;
}
.section__panel--bg-brand{
  color: rgba(255,255,255,0.4);
  background: var(--color-bg-brand);
}
.section__panel--bg-brand-dark{
  color: rgba(255,255,255,0.4);
  background: var(--color-bg-brand-dark);
}
.section__panel--bg-brand-light{
  color: #363636;
  background: var(--color-bg-base-dark);
}
.section__panel--accent-warm{
  color: #FFF;
  background: var(--color-accent-warm);
}
/* ==================================================
 * section--bleed
 * ================================================== */
.section--bleed-left .section__panel,
.section--bleed-right .section__panel{
  width: 100%;
  padding-right: var(--bg-inset);
  padding-left: var(--bg-inset);
}

.section--bleed-left .section__inner,
.section--bleed-right .section__inner{
  width: 100%;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}

/* ==================================================
 * section--bleed-left
 * ================================================== */
@media screen and (min-width: 1025px){
  .section--bleed-left .section__panel{
    padding-right: var(--section-gutter);
    padding-left: var(--section-gutter);
  }

  
}

/* ==================================================
 * section--bleed-right
 * ================================================== */
@media screen and (min-width: 1025px){
  .section.section--bleed-right{
    background: transparent;
    position: relative;
  }
  .section.section--bleed-right::before{
    content: '';
    background: var(--section-bg, transparent);
    position: absolute;
    top: 0;right: 0;bottom: 0;left: var(--section-gutter);
    z-index: 0;
    pointer-events: none;
  }
  .section.section--bleed-right > .section__panel{
    position: relative;
    z-index: 1;
  }
  .section--bleed-right .section__panel--bg-brand,
  .section--bleed-right .section__panel--bg-brand-dark{
    background: transparent;
  }
  .section--bleed-right .section__panel{
    padding-right: var(--section-gutter);
    padding-left: calc(var(--section-gutter) * 2);
  }
  .section--bleed-right .section__inner{
    width: 100%;
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
  }
}

/* ==================================================
 * section space
 * ================================================== */
.section--space-top-none .section__panel{
  --section-space-top: 0;
}
.section--space-bottom-none .section__panel{
  --section-space-bottom: 0;
}
.section--space-none .section__panel{
  --section-space-top: 0;
  --section-space-bottom: 0;
}



/* ==================================================
 * section--overlap
 * ================================================== */
.section--overlap{
  position: relative;
  z-index: 2;
}
.section--overlap .section__panel--overlap{
  --section-space-top: clamp(4rem, 8vw, 8rem);
  background: var(--color-bg-base);
  position: relative;
}


/* ==================================================
 * overlap shell
 * ================================================== */
.overlap-shell{
  width: 100%;
  padding-inline: var(--layout-inner-padding);
}

@media (min-width: 1025px){
  .overlap-shell--wide{
    width: min(100%, calc(var(--layout-inner-width) + var(--layout-rail-width)));
    padding-left: var(--layout-inner-padding);
    padding-right: calc(var(--layout-inner-padding) + var(--layout-rail-width));
    margin-inline: auto;
  }
}



/* ==================================================
 * page-hero
 * ================================================== */
.page-hero{
  background: radial-gradient(circle at 12% 14%, rgba(255,255,255,1) 0, rgba(255,255,255,0) 30%), linear-gradient(180deg, #F6F6F6 0%, #ECECEC 100%);
  position: relative;
  overflow: clip;
  isolation: isolate;
}
@supports not (overflow: clip){
  .page-hero{
    overflow: hidden;
  }
}
.page-hero::after{
  content: "";
  width: clamp(64px, 8vw, 128px);
  border-top: 1px solid rgba(0,0,0,.20);
  position: absolute;
  left: var(--layout-inner-padding);
  bottom: clamp(2rem, 4vw, 4rem);
  z-index: 3;
}
.page-hero__panel{
  padding-top: calc(var(--layout-header-height) + clamp(2rem, 4vw, 4rem));
  padding-bottom: clamp(4rem, 8vw, 8rem);
  position: relative;
  z-index: 2;
}
.page-hero__inner{
  display: grid;
  gap: clamp(1.5rem, 2vw, 2rem);
  max-width: var(--layout-inner-width);
  padding-inline: var(--layout-inner-padding);
  margin-inline: auto;
}
.page-hero__rail{
  display: grid;
  align-content: start;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  min-width: 0;
  position: relative;
  z-index: 3;
}
.page-hero__rail::after{
  content: "";
  width: 100%;
  border-top: 1px solid rgba(0,0,0,.20);
}
.page-hero__title-ja,
.page-hero__title-en{
  color: var(--color-fg-base-soft);
  font-weight: 600;
}
.page-hero__title-ja{
  letter-spacing: 0.1em;
}
.page-hero__title-en{
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.page-hero__media{
  min-width: 0;
}
.page-hero__main{
  display: grid;
  gap: clamp(2rem, 3vw, 3rem);
  min-width: 0;
}
.page-hero__figure{
  background: var(--color-bg-base-dark);
  width: 100%;
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}
.page-hero__figure::before,
.page-hero__figure::after{
  content: "";
  width: clamp(48px, 6vw, 96px);
  border-top: 1px solid rgba(255,255,255,.80);
  position: absolute;
  z-index: 2;
}
.page-hero__figure::before{
  inset: 1rem 1rem auto auto;
}
.page-hero__figure::after{
  inset: auto auto 1rem 1rem;
}
.page-hero__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
}
.page-hero__content{
  display: grid;
  align-content: start;
  gap: 1.5rem;
  min-width: 0;
}
.page-hero__heading{
  color: var(--color-fg-base);
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.page-hero__lead{
  color: var(--color-fg-base-soft);
  font-size: var(--fs-lg);
}

@media (min-width: 1025px){
  .page-hero{
    min-height: 100svh;
  }
  .page-hero__inner{
    grid-template-columns: var(--layout-rail-width) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    max-width: none;
    min-height: calc(100svh - (var(--layout-header-height) + clamp(2rem, 4vw, 4rem)) - clamp(4rem, 8vw, 8rem));
    padding-left: var(--layout-inner-padding);
    padding-right: calc(var(--layout-inner-padding) + var(--layout-rail-width));
    margin-inline: 0;
  }
  .page-hero__rail::after{
    width: 0;
    height: clamp(64px, 8vw, 128px);
    border-top: none;
    border-left: 1px solid rgba(0,0,0,.20);
  }
  .page-hero__title-en{
    text-orientation: mixed;
    writing-mode: vertical-rl;
  }
  .page-hero__main{
    width: min(100%, var(--layout-inner-width));
    justify-self: start;
  }
  .page-hero__lead{
    max-width: min(32rem, 88%);
  }
}

/* ==================================================
 * page-hero--default
 * ================================================== */
.page-hero--default{
  display: grid;
  grid-template-areas:
    "rail"
    "media"
    "main";
  gap: clamp(1.5rem, 2vw, 2rem);
  padding-top: calc(var(--layout-header-height) + clamp(2rem, 4vw, 4rem));
  padding-bottom: clamp(4rem, 8vw, 8rem);
}
.page-hero--default .page-hero__panel,
.page-hero--default .page-hero__inner{
  display: contents;
}
.page-hero--default .page-hero__rail{
  grid-area: rail;
  width: 100%;
  padding-inline: var(--layout-inner-padding);
}
.page-hero--default .page-hero__media{
  grid-area: media;
  padding-inline: var(--layout-inner-padding);
}
.page-hero--default .page-hero__main{
  grid-area: main;
  width: 100%;
  padding-inline: var(--layout-inner-padding);
  position: relative;
  z-index: 2;
}

@media (min-width: 768px){
  .page-hero--default .page-hero__figure{
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1025px){
  .page-hero--default{
    min-height: 100svh;
    grid-template-columns: var(--layout-rail-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "rail media"
      "main main";
    align-content: stretch;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: clamp(2rem, 3vw, 3rem);
    width: 100%;
    padding-left: var(--layout-inner-padding);
    padding-right: calc(var(--layout-inner-padding) + var(--layout-rail-width));
    margin-inline: 0;
  }
  .page-hero--default .page-hero__rail{
    justify-self: start;
    align-self: start;
    width: var(--layout-rail-width);
    padding-inline: 0;
  }
  .page-hero--default .page-hero__media{
    position: relative;
    width: 100%;
    padding-inline: 0;
  }
  .page-hero--default .page-hero__main{
    width: min(100%, var(--layout-inner-width));
    padding-inline: 0;
    justify-self: start;
    align-self: stretch;
    align-content: end;
    min-height: 0;
  }
  .page-hero--default .page-hero__figure{
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 1440px){
  .page-hero--default{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "rail"
      "main";
  }
  .page-hero--default .page-hero__main{
    width: min(100%, calc(var(--layout-inner-width) - 32rem - clamp(2rem, 4vw, 4rem)));
    align-self: stretch;
    align-content: end;
  }
  .page-hero--default .page-hero__media{
    position: absolute;
    top: calc(var(--layout-header-height) + clamp(2rem, 4vw, 4rem));
    right: calc(var(--layout-inner-padding) + var(--layout-rail-width));
    bottom: clamp(4rem, 8vw, 8rem);
    width: 32rem;
  }
  .page-hero--default .page-hero__figure{
    aspect-ratio: 3 / 4;
  }
}

/* ==================================================
 * page-hero--overlay
 * ================================================== */
.page-hero--overlay{
  color: var(--color-fg-white);
  background: var(--color-bg-base-dark);
  min-height: calc(100svh + 12px);
}
.page-hero--overlay::after{
  border-top-color: rgba(255,255,255,.20);
}
.page-hero--overlay .page-hero__panel{
  min-height: calc(100svh + 12px);
}
.page-hero--overlay .page-hero__inner{
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  max-width: none;
  min-height: calc(100svh - (var(--layout-header-height) + clamp(2rem, 4vw, 4rem)) - clamp(4rem, 8vw, 8rem) + 12px);
  margin-inline: 0;
}
.page-hero--overlay .page-hero__rail{
  display: inline-grid;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}
.page-hero--overlay .page-hero__rail::after{
  border-top-color: rgba(255,255,255,.20);
}
.page-hero--overlay .page-hero__title-ja,
.page-hero--overlay .page-hero__title-en{
  color: rgba(255,255,255,.80);
}
.page-hero--overlay .page-hero__main{
  align-self: stretch;
  align-content: end;
}
.page-hero--overlay .page-hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero--overlay .page-hero__figure{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  position: relative;
}
.page-hero--overlay .page-hero__figure::before,
.page-hero--overlay .page-hero__figure::after{
  display: none;
}
.page-hero--overlay .page-hero__scrim{
  background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.40) 38%, rgba(0,0,0,.60) 100%), radial-gradient(circle at 14% 18%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 32%);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.page-hero--overlay .page-hero__content{
  align-self: end;
  align-content: end;
  max-width: 56rem;
}
.page-hero--overlay .page-hero__heading{
  color: var(--color-fg-white);
  text-shadow: 0 8px 30px rgba(0,0,0,.20);
}
.page-hero--overlay .page-hero__lead{
  color: rgba(255,255,255,.80);
  text-shadow: 0 4px 18px rgba(0,0,0,.20);
}

@media (min-width: 1025px){
  .page-hero--overlay{
    min-height: 100svh;
  }
  .page-hero--overlay .page-hero__panel{
    min-height: 100svh;
  }
  .page-hero--overlay .page-hero__inner{
    min-height: calc(100svh - (var(--layout-header-height) + clamp(2rem, 4vw, 4rem)) - clamp(4rem, 8vw, 8rem));
    padding-right: var(--layout-inner-padding);
  }
  .page-hero--overlay .page-hero__rail{
    display: grid;
    width: var(--layout-rail-width);
    max-width: none;
  }
  .page-hero--overlay .page-hero__rail::after{
    border-left-color: rgba(255,255,255,.20);
  }
  .page-hero--overlay .page-hero__main{
    justify-self: start;
    width: min(100%, var(--layout-inner-width));
  }
}


.ui-table{width: 100%;margin-inline: auto;
  table-layout: fixed;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}
.ui-table tr th {
  font-weight: 400;
}
.ui-table tr th,
.ui-table tr td {
  vertical-align: middle;
  word-wrap: break-word;
}



/*----------------------------------- */
/*----------------------------------- */
/*-- #wrapper ----------------------- */
/*----------------------------------- */
/*----------------------------------- */
#wrapper{text-align: left;width: 100%;position: relative;}
/*----------------------------------- */
/*----------------------------------- */
/*-- @keyframes --------------------- */
/*----------------------------------- */
/*----------------------------------- */
@keyframes spin-infinite{from{transform: rotateY(0deg);}to{transform: rotateY(360deg);}}
@keyframes text-infinite{0%{transform: translateX(0%);} 100%{transform: translateX(-50%);}}
@keyframes char-fade-in{to{opacity: 1;transform: translateY(0);}}














/*----------------------------------- */
/*----------------------------------- */
/*-- .js-split-text ----------------- */
/*----------------------------------- */
/*----------------------------------- */
.js-split-text{display: block;}
.js-split-text span{display: inline-block;opacity: 0;transform: translateY(10px);will-change: transform, opacity;}
.js-split-text.active span{animation: char-fade-in .6s forwards;}
/*----------------------------------- */
/*----------------------------------- */
/*-- .js-reveal-onload -------------- */
/*----------------------------------- */
/*----------------------------------- */
.js-reveal-onload .reveal-target{display: block;opacity: .6;filter: blur(8px);transform: scale(1.05);transition: filter 600ms ease-out, opacity 600ms ease-out, transform 600ms ease-out;will-change: filter, opacity, transform;}
.js-reveal-onload .reveal-target.loaded{opacity: 1;filter: blur(0);transform: scale(1);}



/*----------------------------------- */
/*----------------------------------- */
/*-- .js-ticker --------------------- */
/*----------------------------------- */
/*----------------------------------- */
.js-ticker{display: flex;justify-content: center;position: relative;z-index: 3;}
.js-ticker .outer{background: var(--color-slt-tint);width: 100%;max-width: 720px;height: 100px;border-radius: 5px 0 0 0;position: relative;}
.js-ticker .outer::before,
.js-ticker .outer::after{content: '';background: transparent;display: block;width: 20px;height: 20px;border-radius: 0 0 5px 0;box-shadow: 10px 10px 0px var(--color-slt-tint);position: absolute;}
.js-ticker .outer::before{right: 0;;top: -20px;display: none;}
.js-ticker .outer::after{left: -20px;;bottom: 0;}
.js-ticker .inner{height: 100%;padding-right: 60px;position: relative;overflow: hidden;}
.js-ticker ul{margin-bottom: 0;}
.js-ticker ul li{height: 100px;padding: 20px;}
.js-ticker ul li a{color: var(--color-slt-base);font-size: .889rem;background: var(--color-blk-alpha05);display: flex;align-items: center;gap: 0 20px;height: 60px;padding: 0 20px;border-radius: 3px;overflow: hidden;}
.js-ticker ul li a:hover{background: var(--color-wht-alpha40);}
.js-ticker .btn{display: flex;flex-direction: column;width: 40px;height: 80px;position: absolute;right: 20px;top: 10px;}
.js-ticker .btn .ticker-arrow{text-indent: 100%;white-space: nowrap;background: transparent;width: 40px;height: 40px;position: relative;overflow: hidden;cursor: pointer;}
.js-ticker .btn .ticker-arrow::after{content: '';width: 8px;height: 8px;border-top: 2px solid var(--color-slt-base);border-left: 2px solid var(--color-slt-base);position: absolute;top: 50%;left: 50%;transition: border-color .3s ease;backface-visibility: hidden;will-change: transform;}
.js-ticker .btn .ticker-arrow.prev{border-bottom: 1px solid var(--color-blk-alpha20);}
.js-ticker .btn .ticker-arrow.prev::after{transform: translate(-50%, -50%) rotate(45deg);}
.js-ticker .btn .ticker-arrow.next::after{transform: translate(-50%, -50%) rotate(-135deg);}
.js-ticker .btn .ticker-arrow.prev:hover::after,
.js-ticker .btn .ticker-arrow.next:hover::after{border-top-color: var(--color-blu-base);border-left-color: var(--color-blu-base);}
@media screen and (min-width: 1025px){
.js-ticker{justify-content: flex-end;margin-top: -100px;}	
}
/*----------------------------------- */ 
/*-- .js-loop-image ----------------- */
/*----------------------------------- */ 
/*----------------------------------- */ 
/*-- .js-loop-image ----------------- */
/*----------------------------------- */ 
.js-loop-image{width: 100%;overflow: hidden;}
.js-loop-image ul{margin-bottom: 0;display: flex;gap: 0 1px;}
.js-loop-image ul li{flex: 0 0 auto;}
.js-loop-image ul li img{display: block;width: auto;height: clamp(200px, 40vw, 400px);}

/* ui-estimator-video.css */

.ui-estimator{
  width: 100%;
}

.ui-estimator__lead{
  margin-top: 8px;
  opacity: .85;
}

.ui-estimator__grid{
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.ui-estimator__step{
  background: var(--color-wht-alpha40);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 16px;
}

.ui-estimator__step-title{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px 0;
}

.ui-estimator__step-no{
  font-weight: 700;
  opacity: .7;
}

.ui-estimator__options{
  display: grid;
  gap: 10px;
}

.ui-estimator__radio{
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  cursor: pointer;
  background: rgba(255,255,255,.35);
}

.ui-estimator__radio input{
 position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ui-estimator__radio.is-checked{
  border-color: var(--color-slt-base);
}

.ui-estimator__radio-title{
  font-weight: 700;
}

.ui-estimator__radio-sub{
  font-size: .95em;
  opacity: .8;
}

.ui-estimator__range{
  display: grid;
  gap: 10px;
}

.ui-estimator__range-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ui-estimator__range-value{
  font-weight: 700;
}

.ui-estimator__range input[type="range"]{
  width: 100%;
}

.ui-estimator__songs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ui-estimator__pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.35);
  cursor: pointer;
}

.ui-estimator__pill input{
position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ui-estimator__pill.is-checked{ border-color: var(--color-slt-base); }

.ui-estimator__result{
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 18px;
}

.ui-estimator__result-title{
  margin: 0 0 10px 0;
}

.ui-estimator__result-price{
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  margin: 0;
}

.ui-estimator__result-formula{
  margin-top: 6px;
  opacity: .85;
}

.ui-estimator__kpi{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.ui-estimator__kpi-item{
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 12px;
}

.ui-estimator__kpi-label{
  font-size: .9em;
  opacity: .75;
}

.ui-estimator__kpi-value{
  font-weight: 800;
  margin-top: 4px;
}

.ui-estimator__includes{
  margin-top: 14px;
  padding-left: 18px;
}

.ui-estimator__notes{
  margin-top: 14px;
  display: grid;
  gap: 6px;
  font-size: .95em;
  opacity: .85;
}

.ui-estimator__note-strong{
  opacity: 1;
  font-weight: 700;
}

@media screen and (min-width: 1025px){
  .ui-estimator__grid{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .ui-estimator__result{
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: 24px;
  }
}





/* ================================================== *
   page-test
 * ================================================== */
.page-test{
  width: 100%;
  position: relative; /* パンくずoverlayの基準 */
}

.page-test__header{
  position: relative;
  overflow: hidden; /* 画像のはみ出し等はheader側で隠す */
}

.page-test__content{
  color: #FFF;
  display: flex;flex-direction: column;justify-content: center;
  width: 100%;
  height: 100%;
  padding-inline: clamp(1rem, 2vw, 2rem);
  position: absolute;
  inset: 0;
  z-index: 2;
}
.page-test__title{
  
  font-size: 3.5rem;
  order: 2;
}
.page-test__title-en{
  font-family: var(--font-en);
  font-weight: 700 !important;
  font-size: 1rem;color: rgba(255,255,255,1);
  order: 1;
}
.page-test__image.ui-parallax{
  height: clamp(500px, 60vw, 600px);
}
.page-test__image-layer.ui-parallax-image{
  width: 100%;
  height: 100%;
  position: relative;
}
.page-test__image-layer.ui-parallax-image::after{
  content: '';
  display: block;
  background: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;top: 0;
}
@media screen and (min-width: 1025px){
  

  .page-test__image.ui-parallax{
    height: 100vh;
    min-height: 600px;
  }
}




/* UL側でカウンター開始 */
.ui-card-grid{
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  /* 付番開始 */
  counter-reset: card;
}

/* LIでインクリメント */
.ui-card-grid__item{
  font-size: 1.25rem;
  background: rgba(0,0,0,.1);
  padding: 3.5rem 3rem 3rem 3rem;

  position: relative; /* 疑似要素の配置用 */
  counter-increment: card;
}

.ui-card-grid__item::before{
  font-family: var(--font-en);
  content: counter(card, decimal-leading-zero);

  position: absolute;
  top: 1rem;
  left: 1rem;

  /* 見た目（白文字×黒背景の正円） */
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #000;
  color: #fff;

  /* 中央寄せ */
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0.75rem;
  line-height: 1;
}

.ui-card-grid__item span{
  display: block;
}

@media (min-width: 960px){
  .ui-card-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==================================================
 * cols
 * ================================================== */
/* ==================================================
 * cols（SPベース：1カラム）
 * ================================================== */
.cols {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 24px;
}

.cols__side,
.cols__main {
  min-width: 0;
}

/* SPベース：HTML順序に依存せず「縦の並び順」を固定
   デフォルト：上main / 下side */
.cols > .cols__main { grid-row: 1; }
.cols > .cols__side { grid-row: 2; }



/* ==================================================
 * PC（2カラム：min-widthのみ）
 * ================================================== */
/* ==================================================
 * cols: PCで必ず2カラム化（上書きに負けない強制版）
 * - min-widthのみ。max-widthは使わない。
 * - HTML順序に依存しない。
 * ================================================== */
@media (min-width: 960px) {
  .cols {
    --sidebar-min: 240px;
    --sidebar-ideal: 10vw;
    --sidebar-max: 300px;
    --sidebar-w: clamp(var(--sidebar-min), var(--sidebar-ideal), var(--sidebar-max));

    display: grid;
    /* 左がサイド（固定幅）、右がメイン（可変） */
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }

  .cols > .cols__side {
    grid-column: 1;
    grid-row: 1 !important;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 24px;
    min-width: 0;
  }

  .cols > .cols__main {
    grid-column: 2;
    grid-row: 1 !important;
    min-width: 0;
  }
}


/* ==================================================
 * section
 * ================================================== */

/* cols */
.block__cols{
  display: grid;
  gap: 1.5rem;
}

.block__cols--bleed-right .block__col--media{ margin-right: 0; }
.block__cols--bleed-left  .block__col--media{ margin-left: 0; }

.block__cols--bleed-right .block__col--text{ padding-right: var(--gutter); }
.block__cols--bleed-left  .block__col--text{ padding-left:  var(--gutter); }


.block__media{
  height: 100%;        /* お好みで */
  overflow: hidden;           /* coverのはみ出しを切る */
}

.block__media-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@media (min-width: 960px){
  .block__cols{
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    align-items: stretch;
  }
  
.block__col--media.ui-parallax{
    height: 400px;
  }
  
  
  .block__cols--bleed-right .block__col--media{
    margin-right: calc(50% - 50vw);
  }
  .block__cols--bleed-left .block__col--media{
    margin-left: calc(50% - 50vw);
  }
  .block__cols--bleed-right .block__col--text{padding-right: 0; display: flex;
  flex-direction: column;
  justify-content: flex-end;gap: 2rem;
  min-height: 0;}
  .block__cols--bleed-left  .block__col--text{ padding-left:  0; }
}
@media (min-width: 960px){
  .block__cols--bleed-left .block__col--text{
    grid-column: 2;grid-row: 1;
  }
  .block__cols--bleed-left .block__col--media{
    grid-column: 1;grid-row: 1;
  }
  
  
  
  
}

/* block */
.block__title{
  font-size: 1.5rem;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  position: relative;
}
.block__title::before,
.block__title::after{
  content:'';
  height:1px;
  position:absolute;
  left:0;
  bottom:0;
}
.block__title::before{
  width:4rem;
  border-bottom:1px solid #c6c6c6;
}
.block__title::after{
  width:2rem;
  border-bottom:1px solid #363636;
}

.block__body{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.block__lead--lg{
  font-size: 1.25rem;
}

.block__list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.block__note{
  color:#666;
  font-size:0.75rem;
}


.block--renkei{
  max-width: 960px;
  margin-inline: auto;
  padding: 3rem;
  margin-top: 5rem;
  border: 1px solid #868686;
  border-radius: 1rem; 
}

.ui-price-sum{
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.5rem;
  align-items: start;
  text-align: center;
  justify-items: center;
}

.ui-price-sum__label,
.ui-price-sum__value{
  margin: 0;
}

/* 上：内訳（小さめ） */
.ui-price-sum__label{
  line-height: 1.4;
}

/* 下：￥0（大きく） */
.ui-price-sum__value{
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 5rem;
  line-height: 1;
}


.price-dl{
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.75rem;
  align-items: baseline;
}

.price-dl dt,
.price-dl dd{ margin: 0; }

.price-dl dt{ }
.price-dl dd{ white-space: nowrap; text-align: right; }

/* 2行目以降の上に線（dt側で管理） */
.price-dl dt:nth-of-type(n+2){
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.12);
}
.price-dl dd:nth-of-type(n+2){
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.12);
}







/*----------------------------------- */
/*-- UI Section Nav (sticky) -------- */
/*----------------------------------- */
.ui-section-nav{
  position: sticky;
  top: var(--ui-sticky-top, 0px);
  z-index: 30;
  margin: 0 0 18px 0;
  padding: 10px 0;

  backdrop-filter: blur(8px);
}

.ui-section-nav__list{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 0 0 4px 0;
  margin: 0;
  list-style: none;
}
.ui-section-nav__list{ scroll-behavior: smooth; }
.ui-section-nav__item{
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.ui-section-nav__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;

  padding: 10px 12px;
  border-radius: 9999px;
  text-decoration: none;

  border: 1px solid rgba(0,0,0,.12);
  background: var(--color-wht-alpha40);
}

.ui-section-nav__link.is-active{
  border-color: var(--color-slt-base);
}

.ui-section-nav__link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/*----------------------------------- */
/*----------------------------------- */ 
/*-- .js-hover-list ----------------- */
/*----------------------------------- */
/*----------------------------------- */
.js-hover-list ul{margin-bottom: 0;}
.js-hover-list ul li:not(:last-of-type){border-bottom: 1px solid var(--color-blk-alpha10);}
.js-hover-list ul li a{color: var(--color-slt-base);font-size: clamp(1.125rem, 2vw, 1.266rem);display: block;display: flex;align-items: baseline;padding: 20px 30px;position: relative;overflow: hidden;transition: color .25s ease;z-index: 0;}
.js-hover-list ul li a span{color: var(--color-blk-alpha20);font-size: clamp(1.125rem, 2vw, 1.266rem);margin-left: auto;display: flex;align-items: center;}
.js-hover-list ul li a span::after{content: '';display: inline-flex;width: 8px;height: 8px;margin-left: 20px;border-top: 2px solid var(--color-blk-alpha20);border-right: 2px solid var(--color-blk-alpha20);transform: rotate(45deg);}
.js-hover-list ul li a::before,
.js-hover-list ul li a::after{content: '';background: var(--color-blu-tint);width: 100%;height: 100%;position: absolute;left: 0;top: 110%;z-index: -1;transition: top 0.7s cubic-bezier(.19,1,.22,1);}
.js-hover-list ul li a.no-trans::before,
.js-hover-list ul li a.no-trans::after{transition: none !important;}
.js-hover-list ul li a.enter-from-top::before,
.js-hover-list ul li a.enter-from-top::after{top: -110%;}
.js-hover-list ul li a.enter-from-bottom::before,
.js-hover-list ul li a.enter-from-bottom::after{top: 110%;}
.js-hover-list ul li a.animate-in::before,
.js-hover-list ul li a.animate-in::after{top: 0;}
.js-hover-list ul li a.leave-to-top::before,
.js-hover-list ul li a.leave-to-top::after{top: -110%;}
.js-hover-list ul li a.leave-to-bottom::before,
.js-hover-list ul li a.leave-to-bottom::after{top: 110%;}
/*----------------------------------- */
/*----------------------------------- */ 
/*-- .hero-slider ------------------- */
/*----------------------------------- */
/*----------------------------------- */
.hero-slider{width: 100%;height: 100vh;min-height: 600px;position: relative;overflow: hidden;}
.hero-slider-wrap{width: 100%;height: 100%;position: absolute;left: 0;top: 0;overflow: hidden;z-index: -1;}
.hero-slider-item{width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;visibility: hidden;transition: opacity 1s ease-in-out, visibility 0s linear 1s;}
.hero-slider-item.active{opacity: 1;visibility: visible;transition: opacity 1s ease-in-out, visibility 0s linear 0s;}
.hero-slider-item .image{background: var(--color-nvy-base);width: 100%;height: 100%;position: relative;overflow: hidden;}
.hero-slider-item .image::after{content: '';background: var(--color-blk-alpha10);width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.hero-slider-item .image img{width: 110%;height: 110%;object-fit: cover;transform: translateY(0) scale(1.1);transition: transform 10s linear;will-change: transform;}
.hero-slider-mover{width: 100%;height: 100%;position: absolute;left: 0;top: 0;will-change: transform;}
.hero-grid-wrap{color: var(--color-wht-base);width: 100%;position: absolute;left: 0;bottom: 0;z-index: 2;}
.hero-grid-item{display: flex;flex-direction: column;padding: 0 clamp(20px, 5vw, 40px);box-sizing: border-box;}
.hero-grid-item.item2,
.hero-grid-item.item4,
.hero-grid-item.item6,
.hero-grid-item.item7,
.hero-grid-item.item8{display: none;}
.hero-grid-item.item1 .hero-title-en{display: flex;flex-direction: column;gap: 10px;margin-bottom: 20px;}
.hero-grid-item.item1 .hero-title-en > span{display: block;}
.hero-grid-item.item1 .hero-title-en > span:first-of-type{font-size: clamp(3.653rem, 7vw, 6.584rem);line-height: 1;}
.hero-grid-item.item1 .hero-title-en > span:last-of-type{font-size: clamp(1.125rem, 2vw, 1.266rem);}
.hero-grid-item.item3 .hero-title-ja{font-size: clamp(1.424rem, 2vw, 1.602rem);margin-bottom: 20px;}
.hero-grid-item.item3 .hero-title-ja span{display: block;}
.hero-grid-item.item5{padding: 0;border-top: 1px solid var(--color-wht-alpha40);}
.hero-grid-item.item5 p{font-size: .889rem;width: 60%;padding: clamp(20px, 5vw, 40px);margin-bottom: 0;border-right: 1px solid var(--color-wht-alpha40);}
@media (min-width: 1025px) {
.hero-slider{height: auto;min-height: auto;}
.hero-grid-wrap{display: grid;grid-auto-rows: minmax(500px, auto);grid-template-columns: repeat(3, 1fr);gap: 0;position: relative;z-index: 1;}
.hero-grid-item{height: 100%;padding-top: clamp(20px, 5vw, 40px);padding-bottom: clamp(20px, 5vw, 40px);border-top: 1px solid var(--color-wht-alpha40);border-left: 1px solid var(--color-wht-alpha40);position: relative;}
.hero-grid-item.item2,
.hero-grid-item.item4,
.hero-grid-item.item6,
.hero-grid-item.item7,
.hero-grid-item.item8{display: flex;}
.hero-grid-item.item1{grid-row: 1;grid-column: 1 / span 2;align-items: center;justify-content: flex-end;border-top: none;border-left: none;}
.hero-grid-item.item2{grid-row: 1;grid-column: 3;border-top: none;}
.hero-grid-item.item3{grid-row: 2;grid-column: 1;border-left: none;}
.hero-grid-item.item4{grid-row: 2;grid-column: 2;}
.hero-grid-item.item5{grid-row: 2;grid-column: 3;background: var(--color-nvy-alpha80);justify-content: center;padding: clamp(20px, 5vw, 40px);}
.hero-grid-item.item5 p{width: 100%;padding: 0;margin-bottom: 0;border-right: none;}
.hero-grid-item.item6{grid-row: 3;grid-column: 1;border-left: none;}
.hero-grid-item.item7{grid-row: 3;grid-column: 2;}
.hero-grid-item.item8{grid-row: 3;grid-column: 3;}
.hero-grid-item.item2::before,
.hero-grid-item.item6::before{content: '';background: var(--color-wht-base);width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;
-webkit-mask: radial-gradient(circle clamp(100px, 15vw, 200px) at center, transparent 99%, var(--color-wht-alpha20) 100%);-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: cover;
mask: radial-gradient(circle clamp(100px, 15vw, 200px) at center, transparent 99%, var(--color-wht-alpha20) 100%);mask-repeat: no-repeat;mask-position: center;mask-size: cover;}	
}
@media screen and (min-width: 1025px){
.index-flex-post .wrap{display: flex;flex-direction: row;}
.index-flex-post .item{padding: clamp(60px, 5vw, 80px) clamp(20px, 5vw, 40px) clamp(30px, 5vw, 50px);}
.index-flex-post .item:first-of-type{width: 60%;}
.index-flex-post .item:last-of-type{width: 40%;}
}
/*----------------------------------- */
/*----------------------------------- */ 
/*-- .index-menu-list --------------- */
/*----------------------------------- */
/*----------------------------------- */
.index-menu-list .wrap{border-top: 1px solid var(--color-blk-alpha10);border-bottom: 1px solid var(--color-blk-alpha10);}
.index-menu-list .item .row-text{padding: 60px clamp(20px, 5vw, 40px) 0;}
.index-menu-list .item .row-image{background: no-repeat center center / cover;width: 100%;height: clamp(200px, 40vw, 400px);}
@media screen and (min-width: 1025px){
.index-menu-list .wrap{display: flex;flex-direction: row;}
.index-menu-list .item{width: 50%;display: flex;flex-direction: column;justify-content: flex-start;}
.index-menu-list .item:first-of-type{border-right: 1px solid var(--color-blk-alpha10);}
.index-menu-list .item .row-text{flex: 1;padding-bottom: 30px;}
.index-menu-list .item .row-image{flex: 1;height: auto;}
}
/*----------------------------------- */
/*----------------------------------- */
/*-- .index-carousel ---------------- */
/*----------------------------------- */
/*----------------------------------- */
.index-carousel{background: var(--color-wht-alpha60);padding-top: clamp(80px, 10vw, 120px);position: relative;overflow: hidden;}
.index-carousel .wrap{background: var(--color-blk-alpha05);display: flex;gap: 1px;padding: 1px 0;transition: transform .3s ease;will-change: transform;}
.index-carousel .item{flex: 1;background: var(--color-wht-alpha60);display: flex;flex-direction: column;gap: 30px;padding: 20px 20px 80px;box-sizing: border-box;}
.index-carousel .item .text{flex: 1;display: flex;flex-direction: column;padding: 0 20px;}
.index-carousel .item .text::after{content: attr(data-label);font-size: .702rem;display: flex;justify-content: flex-end;width: 100%;padding-top: 20px;margin-top: auto;margin-bottom: 30px;border-top: 1px solid var(--color-blk-alpha10);}
.index-carousel .item .text .title{font-size: clamp(1.266rem, 2vw, 1.424rem);display: flex;align-items: baseline;margin-bottom: 20px;}
.index-carousel .item .text .title::before{content: attr(data-num);font-size: clamp(2.027rem, 3vw, 2.281rem);margin-right: 10px;}
.index-carousel .carousel-btn{color: var(--color-wht-base);display: flex;justify-content: space-between;width: 120px;position: absolute;left: 50%;bottom: 30px;transform: translateX(-50%);z-index: 1;}
.index-carousel .carousel-btn .prev,
.index-carousel .carousel-btn .next{background: var(--color-blu-base);display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;cursor: pointer;border-radius: 9999px;}
.index-carousel .carousel-btn .icon-arrow-wrap{display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;}
.index-carousel .carousel-btn .prev .icon-arrow-wrap{transform: rotate(180deg);}
.index-carousel .carousel-btn .next .icon-arrow-wrap{transform: rotate(0deg);}
.index-carousel .carousel-btn .icon-arrow-wrap .icon-arrow{display: block;width: 15px;height: 15px;}
.index-carousel .carousel-btn .prev.disabled,
.index-carousel .carousel-btn .next.disabled{background: var(--color-blk-alpha05);}
.index-carousel .carousel-btn .prev.disabled::after,
.index-carousel .carousel-btn .next.disabled::after{cursor: default;}



/*----------------------------------- */
/*-- UI Breadcrumb ------------------ */
/*----------------------------------- */
.nav-breadcrumb{order: 9999;
}/*
.ui-breadcrumb__inner{

  display: inline-block;

}

.ui-breadcrumb__list{
  display: flex;
  gap: 8px;
  white-space: nowrap;

  list-style: none;
  margin: 0;
  padding: 8px 12px;

  background: var(--color-wht-alpha40);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 9999px;
}

.ui-breadcrumb__list{
  max-width: calc(100vh - 40px); 
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-breadcrumb__item{
  display: inline-flex;
  align-items: center;
}

.ui-breadcrumb__item:not(:first-child)::before{
  content: '>';
  display: inline-block;
  margin: 0 8px 0 0;
  opacity: .6;
}

.ui-breadcrumb__link{
  text-decoration: none;
}

.ui-breadcrumb__link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.ui-breadcrumb__current{
  opacity: .9;
}*/