:root {
  --base-vw-sp: 2.666vw;
  --base-vw-tab: 1.3vw;
  --base-vw-pc: 10px;
  --color-white: #fff;
  --color-off-white: #EFF0EC;
  --color-black: #000;
  --color-black-100: #272727;
  --color-gray-100: #EBEBEB;
  --color-gray-200: #E2E0DC;
  --color-gray-300: #D9D9D9;
  --color-gray: #707070;
  --color-red: #E40220;
  --color-blue-100: #DFF0FB;
  --color-blue-300: #006CB6;
  --color-blue: #005BAB;
  --color-blue-500: #0E3E81;
  --color-beige: #F4F1ED;

  --font-size-caution: 1rem;
  --font-size-xs: 1rem;
  --font-size-sm: 1.1rem;
  --font-size-base: 1.2rem;
  --font-size-md: 1.4rem;
  --font-size-lg: 1.6rem;
  --font-size-xl: 1.8rem;

  --line-height-reset: 1;
  --line-height-snug: 1.3;
  --line-height-body: 1.5;
  --line-height-loose: 2;
  --line-height-extra-loose: 2.4;

  --letter-spacing-reset: 0;
  --letter-spacing-sm: 0.02em;
  --letter-spacing-md: 0.05em;
  --letter-spacing-lg: 0.1em;
  --letter-spacing-catch-sm: 0.2em;
  --letter-spacing-catch-md: 0.3em;
  --letter-spacing-catch-lg: 0.4em;
  --letter-spacing-catch-xl: 0.6em;

  --layer-bg-back: 10;
  --layer-bg: 15;
  --layer-bg-mask: 20;
  --layer-content: 30;
  --layer-overlay-light: 50;
  --layer-overlay-heavy: 60;
  --layer-cta: 100;
  --layer-header: 300;
  --layer-modal: 1000;
  --layer-toast: 9999;

  --duration-fast: 0.35s;
  --duration-base: 0.7s;
  --duration-slow: 1.05s;
  --duration-nav-base: 0.2s;

  --linear-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --linear: cubic-bezier(0.4, 0, 1, 1);

  --max-width-size: 90rem;
  --layout-content-side: 3rem;
  --layout-max-width: calc(var(--max-width-size) + var(--layout-content-side) * 2);
  --layout-max-width-header: calc(96rem + 4rem);

  --header-height: 7.5rem;
  --header-text-color: #fff;
  --header-text-color-scrolled: #000;

  --content-screen-height: calc(100vh - var(--header-height));

  --cta-area-height: 6.4rem;
}

@media screen and (min-width:768px) {
  :root {
    --layout-content-side: 5.5rem;
    --font-size-xs: 1.5rem;

    --font-size-base: 1.8rem;
    --font-size-md: 2.1rem;
    --font-size-lg: 2.4rem;
    --font-size-xl: 2.6rem;
  }

}

/* ==========================================================================
    normalize
  ========================================================================== */
img,
.svg {
  width: 100%;
  height: auto;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
figure,
p {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* ==========================================================================
   base
  ========================================================================== */

html {
  font-size: var(--base-vw-sp);

  scroll-behavior: smooth;
}

body {
  font-size: 1.4rem;
  line-height: 1.7;
  color: #000;
  letter-spacing: 0.05em;

  /* adobefont: */
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-weight: 300;
  font-style: normal;
}

section {
  --section-space-v: 10rem;
  padding-top: var(--section-space-v);
  padding-bottom: var(--section-space-v);
}

@media screen and (min-width: 768px) {
  html {
    font-size: var(--base-vw-tab);
  }

  body {
    font-size: 1.8rem;
  }

  section {
    --section-space-v: 12rem;
  }
}

@media screen and (min-width: 1024px) {
  html {
    /*   10 / 1024 = 0.9765625... */
    font-size: var(--base-vw-pc);
  }

  section {
    --section-space-v: 15rem;
  }
}

@media screen and (min-width: 1280px) {
  html {
    font-size: 10px;
  }
}

/* ==========================================================================
   fonts
  ========================================================================== */
.en {
  font-family: sofia-pro, sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

.mincho {
  font-family: yu-mincho-pr6n, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.ja-600 {
  font-family: hiragino-kaku-gothic-pron, sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

.ja-300 {
  font-family: hiragino-kaku-gothic-pron, sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
}


/* ==========================================================================
    リキャプチャ
  ========================================================================== */
.grecaptcha-badge {
  visibility: hidden;
}

.recaptcha-message {
  display: none;
  background-color: #fff;
  position: relative;
}

.recaptcha-message.opentext {
  display: block;
}

.recaptcha-message>small {
  display: block;
  padding: 0 10px 5px;
  font-size: 10px;
}

/* ==========================================================================
    footer
  ========================================================================== */
.l-footer {
  position: relative;
  background-color: #fff;
}

.l-footer {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

@media screen and (min-width: 1024px) {
  .l-footer {
    padding-top: 20rem;
    padding-bottom: 20rem;
  }
}

.l-footer__logo {
  max-width: 13rem;
  margin: 0 auto;
}



/* -------------------------------------------------------------------------
  base
  ------------------------------------------------------------------------- */
body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}




h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: var(--letter-spacing-lg);
}

h2,
.h2 {
  font-size: var(--font-size-lg);
}



h3,
.h3 {
  font-size: var(--font-size-md);
}

p,
li,
dl,
dt,
dd {
  letter-spacing: var(--letter-spacing-lg);
}

/* -------------------------------------------------------------------------
layout
------------------------------------------------------------------------- */

.l-stack {
  --content-gap: 5rem;
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  width: 100%;
}

@media screen and (min-width: 768px) {
  .l-stack {
    --content-gap: 7.5rem;
  }
}

.l-stack>* {
  margin-top: 0;
  margin-bottom: 0;
}

.l-stack--lg {
  --content-gap: 10rem;
}

.l-stack--sm {
  --content-gap: 3rem;
}

@media screen and (min-width: 768px) {
  .l-stack--sm {
    --content-gap: 6rem;
  }

}

.l-container {
  --content-padding: var(--layout-content-side);
  --content-max-width: var(--layout-max-width);
  padding-inline: var(--content-padding);
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* 画面幅いっぱい */
.l-container--full {
  padding-inline: 0;
  max-width: none;
}

/* 画面幅いっぱい（モバイルのみ） */
.l-container--sp-full {
  padding-inline: 0;
}

@media screen and (min-width:768px) {
  .l-container--sp-full {
    padding-inline: var(--content-padding);
  }
}

/* l-peel (めくりレイアウト) */
.l-peel {
  position: relative;
  height: auto;
  background-color: var(--color-white);
}

.l-peel::after {
  content: "";
  display: block;
  height: 100vh;
  pointer-events: none;
}

.l-peel--first::after {
  display: none;
}

.l-peel--first .l-peel__item {
  padding-top: 0;
}

.l-peel--first .l-peel__item>section {
  min-height: 100vh;
}

.l-peel--next-layer {
  margin-top: -100vh;
}

.l-peel--z8 {
  z-index: 8;
}

.l-peel--z7 {
  z-index: 7;
}

.l-peel--z6 {
  z-index: 6;
}

.l-peel--z5 {
  z-index: 5;
}

.l-peel--z4 {
  z-index: 4;
}

.l-peel--z3 {
  z-index: 3;
}

.l-peel--z2 {
  z-index: 2;
}

.l-peel--z1 {
  z-index: 1;
}

.l-peel__item {
  position: sticky;
  top: 0;
  width: 100%;
  min-height: 100vh;
  padding-top: var(--header-height);
}

.l-peel__item>section {
  min-height: var(--content-screen-height);
}

/* ページ内リンク（アンカー）位置調整 */
.u-anchor-wrap {
  position: relative;
}

.u-anchor-target {
  position: absolute;
  top: 100vh;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  /* 【座標相殺ルール】
       構造イメージ:
         .l-peel--next-layer  ← margin-top: -100vh（ブラウザ座標が 100vh 上にずれる）
           .u-anchor-wrap     ← position: relative（アンカー基点）
             .u-anchor-target ← top: 100vh で意図的に 100vh 下へずらす
                                → 結果、見た目の上辺と一致する
  
       理由: 親要素（.l-peel--next-layer）に「margin-top: -100vh」がかかっているため、
             ブラウザが認識する絶対座標が 100vh 分、上にずれています。
             それを相殺して正しい着地位置にするため、
             あらかじめ 100vh 分「下」に配置しています。
    */
}

/* -------------------------------------------------------------------------
    components
  ------------------------------------------------------------------------- */
/* ------------------------------------
    データ属性によるパブリック変数の定義
  ---------------------------------------*/
[data-theme="t-red"] {
  --theme-key-color: var(--color-red);
  --theme-key-color-sub: var(--color-red);
}

[data-theme="s-blue"] {
  --theme-key-color: var(--color-blue);
  --theme-key-color-sub: var(--color-blue-300);
}

[data-theme="on-dark"] {
  --theme-key-color: var(--color-white);
  --theme-key-color-sub: var(--color-white);
}

/* ------------------------------------
 c-heade
---------------------------------------*/
/* 左四角見出し */
.c-head-square {
  --_square-color: var(--theme-key-color-sub, var(--color-black-100));
  position: relative;
  padding-left: 1.9em;
}

.c-head-square::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  transform: translateY(-50%);

  display: block;
  width: 1.15em;
  height: 1.15em;
  background-color: var(--_square-color);
}

/* 角丸バンド見出し */
.c-head-band {
  --_bg-color: var(--theme-key-color-sub, var(--color-black-100));
  padding: 0.35em 0.7em;
  text-align: center;

  background-color: var(--_bg-color);
  color: var(--color-white);
  border-radius: 2.4em;
}

/* @media screen and (min-width:1024px) {
  .c-head-band {
    padding: 0.5em 1em;
    border-radius: 3em;
  }
} */

/* ------------------------------------
  c-fade-overlay
---------------------------------------*/
.c-fade-overlay {
  position: relative;
  /* サイズ */
  --fade-height-top: 38%;
  --fade-height-bottom: 38%;

  /* 色 */
  --fade-color-top: #ffffff;
  --fade-color-bottom: #ffffff;

  /* 開始地点 */
  --fade-start-top: 0%;
  --fade-start-bottom: 0%;

  overflow: hidden;
}

.c-fade-overlay::before,
.c-fade-overlay::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
}

.c-fade-overlay::before {
  top: -2px;
  background: linear-gradient(to bottom, var(--fade-color-top) var(--fade-start-top), transparent);
  height: var(--fade-height-top);
  z-index: 1;
}

.c-fade-overlay::after {
  bottom: -2px;
  background: linear-gradient(to top, var(--fade-color-bottom) var(--fade-start-bottom), transparent);
  height: var(--fade-height-bottom);
}

/* ------------------------------------
  c-feature-block
---------------------------------------*/
.c-feature-block {
  --key-color: var(--color-red);
}

/* ------------------------------------
  c-logo-block
---------------------------------------*/
.c-logo-block {
  --logo-width: 25.6rem;
  display: block;
  width: var(--logo-width);
  margin-inline: auto;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .c-logo-block {
    --logo-width: 30rem;
  }
}



/* ------------------------------------
  c-list
---------------------------------------*/
.c-list-caution {}

.c-list-caution__item {
  position: relative;
  padding-left: 1em;
  font-size: var(--font-size-caution);
}

.c-list-caution__item::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

.c-list-caution--ib .c-list-caution__item {
  display: inline-block;
}

/* インラインの注釈ブロック */
.c-caution-note {
  font-size: var(--font-size-caution);
}

.c-caution-note__item::before {
  content: "※";
}



/* ------------------------------------
  c-section-header
---------------------------------------*/
.c-section-header {
  --_header-flag-color: var(--theme-key-color, var(--color-black-100));

  position: relative;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 3rem;
}

@media screen and (min-width: 768px) {
  .c-section-header {
    height: 6rem;
  }

}

.c-section-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--layout-content-side) * -1);
  display: block;
  width: 5rem;
  height: 100%;
  background-color: var(--_header-flag-color);
}

@media screen and (min-width: 768px) {
  .c-section-header::before {
    width: 7.5rem;
  }
}

.c-section-header__title {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-reset);
  letter-spacing: 0.6em;
}

@media screen and (min-width: 768px) {
  .c-section-header__title {
    font-size: 1.5rem;
  }
}

.c-section-header__sub-title {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-reset);
  letter-spacing: var(--letter-spacing-catch-md);
}

@media screen and (min-width: 768px) {
  .c-section-header__sub-title {
    font-size: 1.4rem;
  }
}


/* ------------------------------------
  c-deco
---------------------------------------*/
/* 下ボーダー */
.c-deco-border-bottom {
  border-bottom: solid 1px var(--color-gray);
}

/* 吹き出し */
.c-bubble {
  position: relative;
  /* 仮 */
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
  .c-bubble {
    /* 仮 */
    margin-bottom: 3rem;
  }

}

.c-figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: var(--line-height-reset);
}

.c-figcaption::before {
  content: "※";
}


/* -------------------------------------------------------------------------
  l-header
  ------------------------------------------------------------------------- */
.l-header {
  --header-logo-color: var(--color-white);
  --header-logo-line-color: var(--color-white);

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: var(--layer-header);
  background-color: var(--color-black);
  transition: background-color 0.3s ease;
}

.l-header.is-scrolled {
  /* 元のロゴの配色を代入 */
  --header-logo-color: #dc0017;
  --header-logo-line-color: #1a1311;
  background-color: var(--color-white);
}

.l-header__inner {
  max-width: var(--max-width-size);
  margin-left: auto;
  margin-right: auto;

  display: flex;
  justify-content: space-between;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .l-header__inner {
    padding-inline: var(--layout-content-side);
    /*ハンバーガーナビの内余白分の調整*/
    padding-right: 3.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .l-header__inner {
    padding-inline: 0;
  }

}

.l-header__logo {
  height: 100%;
  padding: 0 2rem;

  display: flex;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .l-header__logo {
    padding: 0;
  }
}


/* -------------------------------------------------------------------------
    header nav
    ------------------------------------------------------------------------- */
.l-header__nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100vh;
  padding-top: var(--header-height);
  background-color: var(--color-white);
  /* background-color: var(--color-gray-200); */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.15s var(--linear) visibility 0s linear 0.15s;
}

/* @media screen and (min-width: 1024px) {
  .l-header__nav {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
} */

/* SPメニュー展開時のアクティブ状態 */
.l-header__nav.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity var(--duration-nav-base) var(--ease-out),
    visibility 0s linear 0s;
}

/* ナビゲーション内部レイアウト */
/* navコンテンツラッパー */
.l-header-nav {
  height: 100%;
  padding: 5rem 0;
}

.l-header-nav__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  max-width: var(--max-width-size);
  margin-inline: auto;
}

/* @media screen and (min-width: 1024px) {
  .l-header-nav {
    padding: 0;
  }

  .l-header-nav__inner {
    display: block;
  }
} */

/* コンテンツエリア（スクロール領域） */
.l-header-nav__content {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* @media screen and (min-width: 1024px) {
  .l-header-nav__content {
    display: block;
    height: 100%;
    overflow: hidden;
  }
} */

/* @media screen and (min-width: 1024px) {
  .menu-wrapper {
    display: flex;
    height: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .menu-wrapper>li {
    height: 100%;
    transition: background-color 0.3s var(--ease-out);
  }

  .menu-wrapper>li:hover {
    background-color: #eee;
  }
} */

.menu-wrapper>li>a {
  display: block;
  padding: 1.5rem 3rem;
}

/* @media screen and (min-width: 1024px) {
  .menu-wrapper>li>a {
    height: 100%;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
} */

/* -------------------------------------------------------------------------
    header hamburger 
    ------------------------------------------------------------------------- */
.l-header__hamburger {
  --line-width: 2rem;
  --line-space: 0.6rem;
  --line-thickness: 0.2rem;

  /*  変形（×印）時に中央へ移動させる距離 */
  --move-distance: calc((var(--line-space) + var(--line-thickness)) / 2);

  width: var(--header-height);
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--line-space);

  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

/* @media screen and (min-width: 1024px) {
  .l-header__hamburger {
    display: none;
  }
} */

.l-header__hamburger-line {
  display: block;
  width: var(--line-width);
  height: var(--line-thickness);
  background-color: var(--color-white);
  transition: transform 0.3s ease, opacity 0.25s ease;
}

.l-header__hamburger.is-active .l-header__hamburger-line:nth-child(1) {
  transform: translateY(var(--move-distance)) rotate(45deg);
}

.l-header__hamburger.is-active .l-header__hamburger-line:nth-child(2) {
  transform: translateY(calc(var(--move-distance) * -1)) rotate(-45deg);
}

.l-header.is-scrolled .l-header__hamburger-line {
  background-color: var(--color-black);
}

/* -------------------------------------------------------------------------
  haeder logo
    ------------------------------------------------------------------------- */
/* SVG全体にカラーを伝播させる */
.p-header-logo-svg {
  width: 11.5rem;
  color: var(--header-logo-color);
  transition: color 0.3s ease;
}

/* 3本の細いライン部分だけ別色（#1a1311）にする制御 */
.p-header-logo-svg__lines {
  stroke: var(--header-logo-line-color);
  transition: stroke 0.3s ease;
}

/* 小さい漢字のテキスト部分も別色にする場合 */
.p-header-logo-svg__texts {
  color: var(--header-logo-line-color);
  transition: color 0.3s ease;
}

/* -------------------------------------------------------------------------
  top
  ------------------------------------------------------------------------- */
.p-top {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .p-top {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.p-top__inner {
  width: 100%;
  /* 画像の透過してない部分がコンテンツエリアに揃う幅に調整 */
  max-width: 126rem;
  margin-inline: auto;
}

@media screen and (min-width: 1024px) {
  .p-top__inner {
    /* max-width: 75rem; */
    /* width: 73%; */
    /* width: 107vh; */
    max-width: 93rem;
    width: 80vh;
  }
}

.p-top__hero {
  width: 100%;
}

.p-hero-svg {
  width: 100%;
  overflow: visible;

}

.p-top__content {}

@media screen and (min-width: 1024px) {
  .p-top__content {
    width: 100%;
  }

}

.p-top__title-image {
  display: block;
  width: 25.6rem;
  margin-inline: auto;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .p-top__title-image {
    width: 51rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-top__title-image {
    width: 38rem;
  }
}

/* -------------------------------------------------------------------------
  top-img
  ------------------------------------------------------------------------- */
.p-hero-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1500 / 1220;
  overflow: visible;
}

.p-hero-canvas__layer {
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: contain;
  --bg-outset: 75%;
  --_bg-outset-left: calc(var(--bg-outset) * -1);
  --_bg-outset-right: var(--bg-outset);
  --bg-duration: 1s;
  --delay-time: 0.2s;
  --bg-text-delay: calc(var(--bg-duration) + var(--delay-time));
  --bg-test-duration: 0.3s;

  --ease-custom: cubic-bezier(0.2, 0, 0.5, 1);
  --ease-custom-2: cubic-bezier(0.6, 0, 1, 1);

  /* --bg-duration: 1.1s;
  --ease-custom: ease-in; */
}

.p-hero-canvas__base-image {
  position: relative;
}

.p-hero-canvas__layer--transition-1 {
  transition: transform var(--bg-duration) var(--ease-custom), opacity var(--bg-duration) ease-in;
  will-change: transform, opacity;
}

.p-hero-canvas__layer--transition-2 {
  transition: transform var(--bg-test-duration) var(--ease-custom-2), opacity var(--bg-test-duration) ease-in;
  transition-delay: var(--bg-text-delay), var(--bg-text-delay);
  will-change: transform, opacity;
}

.p-hero-canvas__layer--bg-left {
  width: 50%;
  left: 0;
  opacity: 0;
  transform: translateX(var(--_bg-outset-left));
}

.p-hero-canvas__layer--bg-right {
  width: 50%;
  right: 0;
  opacity: 0;
  transform: translateX(var(--_bg-outset-right));
}

.p-hero-canvas__layer--text-bg {
  width: 100%;
  left: 0;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(1.2);
}

.p-hero-canvas__layer--text-bg-right,
.p-hero-canvas__layer--text-bg-left {
  transform: scale(1.2);
}

.p-hero-canvas__layer--text-bg-left {
  width: 100%;
  left: 0;
  opacity: 0;
  transform-origin: 70% 50%;
}

.p-hero-canvas__layer--text-bg-right {
  width: 100%;
  right: 0;
  opacity: 0;
  transform-origin: 30% 50%;
}

/* 左右背景の最終位置（定位置に戻る） */
.is-inview .p-hero-canvas__layer--bg-left,
.is-inview .p-hero-canvas__layer--bg-right {
  opacity: 1;
  transform: translateX(0);
}

/* 背景テキストの最終位置（等倍に戻る） */
.is-inview .p-hero-canvas__layer--text-bg {
  opacity: 1;
  transform: scale(1);
}

.is-inview .p-hero-canvas__layer--text-bg-left,
.is-inview .p-hero-canvas__layer--text-bg-right {
  opacity: 1;
  transform: scale(1);
}

.is-inview .p-hero-canvas__layer--text-bg-right {}

/* -------------------------------------------------------------------------
  about
  ------------------------------------------------------------------------- */
.p-about {
  padding-bottom: 0;
}

.p-about .p-cta {
  margin-top: 0;
}

.p-about .p-cta__inner {
  align-items: flex-start;
}

@media screen and (min-width:1024px) {
  .p-about .p-cta__inner {
    justify-content: flex-start;
  }
}

.p-about .c-fade-overlay {
  --fade-height-top: 19%;
  --fade-color-top: #0E3E81;
  --fade-start-top: 0%;
}

.p-about .c-fade-overlay::after {
  display: none;
}

.p-about__body {
  position: relative;
  z-index: 2;

  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-content-side);

  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

@media screen and (min-width: 768px) {
  .p-about__body {
    gap: 6rem;
  }
}

.p-about__bg {
  margin-top: -20rem;
  z-index: 1;
}

@media screen and (min-width: 1024px) {
  .p-about__bg {
    margin-top: -30rem;
  }
}

@media screen and (min-width: 1280px) {
  .p-about__figure {
    height: 90rem;
    overflow: hidden;
  }
}

@media screen and (min-width: 2560px) {
  .p-about__figure {
    width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 1280px) {
  .p-about__figure img {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: auto;
    height: 100%;
  }
}

@media screen and (min-width: 2560px) {
  .p-about__figure img {
    position: relative;
    width: 100%;
    height: auto;
  }
}

/* .p-about__figure {
  position: relative;
  max-width: 102.4rem;
  margin-inline: auto;
}

@media screen and (min-width: 1024px) {

  .p-about__figure::before,
  .p-about__figure::after {
    content: "";
    position: absolute;
    top: 0;
    width: 20%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }

  .p-about__figure::before {
    left: 0;
    background: linear-gradient(to right, #0E3E81, transparent);
  }

  .p-about__figure::after {
    right: 0;
    background: linear-gradient(to left, #0E3E81, transparent);
  }
} */

.p-about__title {
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing-catch-lg);
}

.p-about__title-en {
  letter-spacing: var(--letter-spacing-catch-sm);

}

.p-about__logo {
  width: 18.5rem;
  background-color: var(--color-white);
}

@media screen and (min-width: 768px) {
  .p-about__logo {
    width: 28rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-about__logo {
    width: 28rem;
  }
}



/* -------------------------------------------------------------------------
  tech
  ------------------------------------------------------------------------- */
.p-tech {}

@media screen and (min-width: 768px) {
  .p-tech .l-stack {
    gap: 9rem;
  }
}


/* 強みのいいとこどり */
.p-strengths {}

.p-strengths__title {
  margin-bottom: 0.9em;
}

@media screen and (min-width: 1024px) {
  .p-strengths__title {
    margin-bottom: -1.5em;
  }
}

.p-strengths__figure {
  margin-inline: -1.5rem;
  margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
  .p-strengths__figure {
    margin-inline: 0;
  }

}

.p-strengths__caution {
  font-size: var(--font-size-caution);
  text-align: justify;
  letter-spacing: var(--letter-spacing-md);
  padding-left: 1em;
  text-indent: -1em;
}

.p-strengths__caution::before {
  content: "※";

}

.p-strengths__caution--num1::before {
  content: "※1.";
}

/* 
@media screen and (min-width: 1024px) {
  .p-tech__figure {
    max-width: 80rem;
    margin-inline: auto;
  }
} */

/* ワイドリビング */
.p-wideliving {}

.p-wideliving__title {
  letter-spacing: var(--letter-spacing-md);
  margin-bottom: 1.9em;
}

.p-wideliving__visual {
  --triangle-base: 2.5rem;
  --triangle-height: 2.2rem;
  --triangle-color: #989898;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1024px) {
  .p-wideliving__visual {

    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

@media screen and (min-width: 1280px) {
  .p-wideliving__visual {
    margin-left: -5.5rem;
    margin-right: -5.5rem;
  }

}

.p-wideliving__visual::after {
  content: "";
  display: block;
  width: var(--triangle-base);
  height: var(--triangle-height);
  margin: 1.5rem auto;
  background-color: var(--triangle-color);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media screen and (min-width: 1024px) {
  .p-wideliving__visual::after {
    width: var(--triangle-height);
    height: var(--triangle-base);
    margin: auto 1.5rem;
    clip-path: polygon(0 0, 100% 50%, 0% 100%);
    transform: translateX(16.7%);
    order: 1;
  }
}

.p-wideliving__figure {
  position: relative;
}

@media screen and (min-width: 1024px) {
  .p-wideliving__figure {
    width: calc(50% - var(--triangle-height) - 1rem);
  }
}

.p-wideliving__figure--before {
  order: 0;
}

.p-wideliving__figure--after {
  order: 2;
}

.p-wideliving__figcaption {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 0.4em;

  font-size: var(--font-size-xs);
  line-height: var(--line-height-reset);
  text-align: center;
  color: var(--color-white);
  background-color: var(--color-black);
}

@media screen and (min-width: 1024px) {
  .p-wideliving__figcaption {
    font-size: 1.2rem;

  }
}



.p-wideliving__caution {
  margin-top: 1em;
  font-size: var(--font-size-caution);
  letter-spacing: var(--letter-spacing-md);
  order: 3;
}

@media screen and (min-width: 1024px) {
  .p-wideliving__caution {
    width: 100%;
  }
}

.p-wideliving__caution::before {
  content: "※";
}

/* ------------------------------------
 c-tech-feature
---------------------------------------*/
.c-tech-feature {
  --deco-color: var(--color-gray-300);
  --deco-width: 18rem;
  --deco-outset: 2rem;
  --deco-height: 4rem;
  --deco-2-outset: 0.5rem;
  position: relative;
  padding-bottom: 1rem;
}

@media screen and (min-width: 768px) {
  .c-tech-feature {
    --deco-width: 26.5rem;
    --deco-outset: 3rem;
    --deco-height: 6rem;
    --deco-2-outset: 0.75rem;
    padding-bottom: 1.5rem;
  }
}

.c-tech-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--deco-outset) * -1);
  width: var(--deco-width);
  height: 100%;
  background: linear-gradient(to top, var(--deco-color), #fff);
}

.c-tech-feature::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(var(--deco-outset) * -1);

  display: block;
  width: var(--deco-width);
  height: var(--deco-height);
  background-color: var(--deco-color);
  /* 下三角に切り抜く：左上、右上、下中央 */
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.c-tech-feature__body {
  --_corner-color: var(--theme-key-color, var(--color-black-100));
  position: relative;
  padding-bottom: 0.5rem;
}

@media screen and (min-width: 768px) {
  .c-tech-feature__body {
    padding-bottom: 0.75rem;
  }
}

@media screen and (min-width: 1024px) {
  .c-tech-feature__body {
    display: flex;
    flex-wrap: wrap;
  }
}

.c-tech-feature__body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(-1rem + 1px);
  display: block;
  width: 10rem;
  height: 10rem;
  border: solid 1rem var(--_corner-color);
  border-top: transparent;
  border-right: transparent;
}

@media screen and (min-width: 768px) {
  .c-tech-feature__body::after {
    width: 15rem;
    height: 15rem;
    left: calc(-0.75rem + 1px);
    border-width: 1.5rem;
  }
}

.c-tech-feature__title {
  --tf-padding-v: 5rem;
  --tf-margin-size: calc(var(--tf-padding-v) * 2);
  aspect-ratio: 1 / 1;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-top: var(--tf-padding-v);
  padding-bottom: var(--tf-padding-v);
  padding-inline: 3rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .c-tech-feature__title {
    --tf-padding-v: 8rem;
    /* アカデミー比 */
    aspect-ratio: 1.37 / 1;
    padding-inline: 10rem;
  }
}

@media screen and (min-width: 1024px) {
  .c-tech-feature__title {
    width: 50%;
    aspect-ratio: 1 / 1;
  }
}

.c-tech-feature__title-image {
  /* display: block;
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  position: relative;
  z-index: 1; */

  display: block;
  height: calc(100% - var(--tf-margin-size));
  width: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.c-tech-feature__visual {
  --_visual-deco-color: var(--theme-key-color, var(--color-black-100));
  position: relative;
}

@media screen and (min-width: 1024px) {
  .c-tech-feature__visual {
    width: 50%;
    aspect-ratio: 1 / 1;
  }
}

.c-tech-feature__visual::after {
  content: "";
  position: absolute;
  top: 3rem;
  right: calc(var(--deco-2-outset) * -1);
  display: block;
  width: 1rem;
  height: 10rem;
  background-color: var(--_visual-deco-color);
}

@media screen and (min-width: 768px) {
  .c-tech-feature__visual::after {
    width: 1.5rem;
    height: 15rem;
    top: 50%;
    transform: translateY(-50%);

    margin: auto;
  }
}

@media screen and (min-width: 1024px) {
  .c-tech-feature__visual::after {
    top: auto;
    transform: none;
    bottom: -3rem;
    z-index: 1;
  }

}


.c-tech-feature__content {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  padding: 5rem 3rem;
}

@media screen and (min-width: 768px) {
  .c-tech-feature__content {
    /* アカデミー比 */
    aspect-ratio: 1.37 / 1;
    padding: 8rem 10rem;
  }
}

@media screen and (min-width: 1024px) {
  .c-tech-feature__content {
    width: 100%;
    aspect-ratio: unset;
    padding: 5rem;
  }
}

.c-tech-feature__comapny {
  position: absolute;
  right: -1.5rem;
  bottom: 1rem;
  width: 4rem;
}

@media screen and (min-width: 768px) {
  .c-tech-feature__comapny {
    bottom: 0;
    width: 6rem;
    right: 0;
    transform: translateX(50%);

  }
}

.c-tech-feature--reverse {}

.c-tech-feature--reverse::before,
.c-tech-feature--reverse::after {
  left: auto;
  right: calc(var(--deco-outset) * -1);
}

.c-tech-feature--reverse .c-tech-feature__visual::after {
  top: 50%;
  right: auto;
  left: calc(var(--deco-2-outset) * -1);
  transform: translateY(-50%);
}

.c-tech-feature--reverse .c-tech-feature__body::after {
  left: auto;
  right: calc(-1rem + 1px);
  border-left: transparent;
  border-right: solid 1rem var(--_corner-color);
}

@media screen and (min-width: 768px) {
  .c-tech-feature--reverse .c-tech-feature__body::after {
    right: calc(-0.75rem + 1px);
    border-right: solid 1.5rem var(--_corner-color);
  }
}

.c-tech-feature--reverse .c-tech-feature__comapny {
  right: auto;
  left: -1.5rem;
}

@media screen and (min-width: 768px) {
  .c-tech-feature--reverse .c-tech-feature__comapny {
    left: 0;
    transform: translateX(-50%);
  }
}

/* ------------------------------------
 p-tech-detail
---------------------------------------*/
.p-tech-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

@media screen and (min-width: 768px) {
  .p-tech-detail {
    gap: 7.5rem;
  }

}

.p-tech-detail__title {
  margin-bottom: 2.1em;
}

.p-tech-detail__content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media screen and (min-width: 768px) {
  .p-tech-detail__content {
    gap: 6.5rem;
  }
}

/* ------------------------------------
    p-tech-tip
---------------------------------------*/
.p-tech-tip {
  --_tip-border-color: var(--theme-key-color, var(--color-black-100));

  position: relative;
  margin-top: 2.5rem;
  padding: 3rem;
  padding-top: 5rem;
  border: solid 0.2rem var(--_tip-border-color);
  border-radius: 2rem;
}

@media screen and (min-width: 768px) {
  .p-tech-tip {
    padding: 4.5rem;
    padding-top: 6rem;
  }
}


.p-tech-tip__title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  transform: translateY(-50%);
  margin-inline: 2.5rem;
}

@media screen and (min-width: 768px) {
  .p-tech-tip__title {
    margin-inline: 5rem;
    padding: 0.5em 1em;
    font-size: 2rem;
    border-radius: 3em;
  }
}

.p-tech-tip__copy {
  --_copy-color: var(--theme-key-color, var(--color-black-100));
  color: var(--_copy-color);
  letter-spacing: var(--letter-spacing-catch-md);
}

.p-tech-tip__content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media screen and (min-width: 768px) {
  .p-tech-tip__content {
    gap: 4.5rem;
  }
}

.p-tech-tip__list {}

.p-tech-tip__list-item {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: solid 1px var(--color-gray);
}

@media screen and (min-width: 768px) {
  .p-tech-tip__list-item {
    margin-bottom: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.p-tech-tip__list-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 土屋 */
@media screen and (min-width: 1024px) {

  .p-tech-tip--tsuchiya .p-tech-tip__content {
    gap: 3rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-tech-tip--tsuchiya .p-tech-tip__title {
    width: fit-content;
    margin-inline: auto;
  }
}

@media screen and (min-width: 768px) {
  .p-tech-tip--tsuchiya .p-tech-tip__list {
    max-width: 68%;
    margin-inline: auto;
  }
}

@media screen and (min-width: 1024px) {
  .p-tech-tip--tsuchiya .p-tech-tip__list {
    display: flex;
    max-width: none;
  }
}

@media screen and (min-width: 1024px) {
  .p-tech-tip--tsuchiya .p-tech-tip__list-item {
    position: relative;
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;

    padding-inline: 1rem;
  }

  .p-tech-tip--tsuchiya .p-tech-tip__list-item+.p-tech-tip__list-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 1px;
    background-color: var(--color-gray);
  }
}

/* 積水 */
@media screen and (min-width: 768px) {
  .p-tech-tip--sekisui .p-tech-tip__title {
    max-width: 58%;
    margin-inline: auto;
  }
}

@media screen and (min-width: 1024px) {
  .p-tech-tip--sekisui .p-tech-tip__list {
    --gap: 4rem;
    display: flex;
    gap: var(--gap);
  }
}

@media screen and (min-width: 1024px) {
  .p-tech-tip--sekisui .p-tech-tip__list-item {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;

    width: calc((100% - var(--gap)) * 0.5);
  }
}



/* -------------------------------------------------------------------------
  tsuchiya-tech
  ------------------------------------------------------------------------- */
.p-tsuchiya-tech {
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .p-tsuchiya-tech .c-tech-feature__visual img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
  }
}

@media screen and (min-width: 1024px) {
  .p-tsuchiya-tech .c-tech-feature__content {
    padding: 7.5rem 11.5rem;
  }
}

/* 省エネ対象受賞 */
.p-prize {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

@media screen and (min-width: 768px) {
  .p-prize {
    gap: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-prize {
    padding-left: 12rem;
    position: relative;
  }
}

.p-prize__icon {
  width: 5.5rem;
  flex-shrink: 0;
}

@media screen and (min-width: 768px) {
  .p-prize__icon {
    width: 9.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-prize__icon {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.p-prize__title {
  display: flex;
  flex-direction: column;
  gap: 0.3em;

  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  text-align: center;
}

@media screen and (min-width: 768px) {
  .p-prize__title {
    gap: 1em;
  }
}

@media screen and (min-width: 1024px) {
  .p-prize__title {
    font-size: 3.5rem;
    gap: 0.8em;
  }
}

.p-prize__category {
  display: block;
  font-size: 0.66em;
  letter-spacing: var(--letter-spacing-lg);
}

@media screen and (min-width: 1024px) {
  .p-prize__category {
    font-size: 0.5em;
  }
}

.p-prize__prize {
  display: block;
  letter-spacing: var(--letter-spacing-lg);
}

.p-prize__name {
  display: block;
  font-size: 0.55em;
  letter-spacing: var(--letter-spacing-lg);
}

@media screen and (min-width: 768px) {
  .p-prize__name {
    font-size: 0.65em;
  }
}

@media screen and (min-width: 1024px) {
  .p-prize__name {
    font-size: 0.43em;
  }
}

.p-prize__desc {
  width: 100%;
  margin-top: 1rem;
  font-size: var(--font-size-caution);
  line-height: 1.6;
}

/* 断熱技術 */
@media screen and (min-width: 1024px) {
  .p-feature-wrap {
    --mother-gap: 6rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--mother-gap);
  }
}

.p-feature {
  --gap: 1rem;
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
}

@media screen and (min-width: 768px) {
  .p-feature {
    --gap: 2.5rem;
    align-items: flex-start;
  }
}

@media screen and (min-width: 1024px) {
  .p-feature {
    flex-direction: column;
    width: calc((100% - var(--mother-gap)) * 0.5);
  }
}

.p-feature--sp-nogap {
  gap: 0;
}

@media screen and (min-width: 768px) {
  .p-feature--sp-nogap {
    gap: var(--gap);
  }
}

.p-feature__title {
  font-size: var(--font-size-md);
  margin-bottom: 0.7em;
}

.p-feature__image {
  width: 14rem;
  flex-shrink: 0;
}

@media screen and (min-width: 768px) {
  .p-feature__image {
    width: 21rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-feature__image {
    height: 30rem;
    width: 100%;
    margin-top: auto;
  }
}

@media screen and (min-width: 1024px) {
  .p-feature__image img {
    display: block;
    height: 100%;
    width: auto;
    margin-inline: auto;
  }
}

/* こだわり */
@media screen and (min-width: 1024px) {
  .p-commit-wrap {
    --mother-gap: 6rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--mother-gap);
  }
}

.p-commit {}

@media screen and (min-width: 768px) {
  .p-commit {
    display: flex;
    gap: 2.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-commit {
    flex-direction: column;
    gap: 2rem;
    width: calc((100% - var(--mother-gap)) * 0.5);
  }
}

.p-commit__image {
  margin-bottom: 1rem;
}

@media screen and (min-width:768px) {
  .p-commit__image {
    flex-shrink: 0;
    width: 53%;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1024px) {
  .p-commit__image {
    width: 100%;
  }
}

.p-commit__title {
  font-size: var(--font-size-md);
  margin-bottom: 0.3em;
}

/* -------------------------------------------------------------------------
  sekisui-tech
  ------------------------------------------------------------------------- */
.p-sekisui-tech {}

@media screen and (min-width: 1024px) {
  .p-sekisui-tech .c-tech-feature__title {
    --tf-padding-v: 11.5rem;
    --_title-deco-color: var(--theme-key-color, var(--color-black-100));
    position: relative;
    width: 55%;
    padding-inline: 6rem;
    aspect-ratio: unset;
  }
}

@media screen and (min-width: 1024px) {
  .p-sekisui-tech .c-tech-feature__title::before {
    content: "";
    position: absolute;
    top: auto;
    left: calc(var(--deco-2-outset) * -1);
    display: block;
    width: 1.5rem;
    height: 15rem;
    background-color: var(--_title-deco-color);

    bottom: 3rem;
    z-index: 1;
  }
}

@media screen and (min-width: 1024px) {
  .p-sekisui-tech .c-tech-feature__visual {
    width: 45%;
    aspect-ratio: unset;
  }
}

@media screen and (min-width: 1024px) {
  .p-sekisui-tech .c-tech-feature__visual::after {
    /* display: none; */
  }
}

@media screen and (min-width: 1024px) {
  .p-sekisui-tech .c-tech-feature__visual img {
    display: block;
    height: 100%;
    object-fit: cover;
  }
}



@media screen and (min-width: 768px) {
  .p-earthquake {
    padding-inline: 3rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-earthquake {
    display: flex;
    gap: 3rem;
    width: 100%;
    padding-inline: 0;
  }
}

@media screen and (min-width: 1024px) {
  .p-earthquake__header {
    width: 55%;
  }
}

.p-earthquake__title {
  margin-bottom: 1.1em;
}

@media screen and (min-width: 768px) {
  .p-earthquake__title {
    text-align: center;
  }
}

@media screen and (min-width: 1024px) {
  .p-earthquake__title {
    text-align: left;
    margin-bottom: 0.5em;
  }
}

.p-earthquake__desc {
  margin-bottom: 1.1em;
  text-align: justify;
}

@media screen and (min-width: 1024px) {
  .p-earthquake__desc {
    margin-bottom: 0;
  }
}

.p-earthquake__graph {}

@media screen and (min-width: 1024px) {
  .p-earthquake__graph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    width: 45%;
  }
}

.p-earthquake__image {
  width: 100%;
  padding-left: 1.5em;
}

@media screen and (min-width: 1024px) {
  .p-earthquake__image {
    padding-left: 2.2em;
  }
}

.p-earthquake__figcaption {
  font-size: var(--font-size-sm);
  margin-bottom: 1.1em;
}

@media screen and (min-width: 768px) {
  .p-earthquake__figcaption {
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-earthquake__figcaption {
    margin-bottom: 0;
  }
}

.p-source {
  position: relative;
  padding-left: 3rem;
  font-size: var(--font-size-caution);
  letter-spacing: var(--letter-spacing-reset);
}

@media screen and (min-width: 768px) {
  .p-source {
    padding-left: 6rem;
    padding-right: 16rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-source {
    padding-right: 39rem;
  }
}

/* block */
.p-s-tech-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media screen and (min-width: 768px) {
  .p-s-tech-detail {
    gap: 4.5rem;
  }
}

.p-s-tech-detail__title {
  font-size: 2.1rem;
  text-align: center;
  line-height: var(--line-height-snug);
}

@media screen and (min-width: 768px) {
  .p-s-tech-detail__title {
    font-size: 3.1rem;
  }
}

.p-s-tech-detail__title>span {
  display: inline-block;
}

.p-s-tech-detail__title>span:nth-of-type(1) {
  font-size: 0.65em;
}

.p-s-tech-detail__title small {
  font-size: 0.65em;
}

.p-s-tech-detail__title>span:nth-of-type(3) {
  font-size: 0.65em;
}

/* block */
.p-s-tech-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media screen and (min-width: 768px) {
  .p-s-tech-list {
    gap: 4.5rem;
  }
}

.p-s-tech-list__item {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

@media screen and (min-width: 768px) {
  .p-s-tech-list__item {
    gap: 2rem;
  }
}

@media screen and (min-width: 768px) {
  .p-s-tech-list__figure {
    margin-top: 1rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-s-tech-list__figure {
    padding-left: 32.5rem;
    margin-top: 0;
  }
}

.p-s-tech-list__figure-caution {
  margin-top: 1em;
  font-size: 10px;
  text-align: right;
  letter-spacing: var(--letter-spacing-reset);
  line-height: var(--line-height-reset);
}

@media screen and (min-width: 768px) {
  .p-s-tech-list__figure-caution {
    margin-top: 1.5em;
  }
}

.p-s-tech-list__figure-caution::before {
  content: "※";
}

.p-s-tech-list__content {
  display: flow-root;
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .p-s-tech-list__content {
    display: block;
    padding-left: 32.5rem;
  }
}

.p-s-tech-list__content figure {
  float: left;
  margin-right: 1.2rem;
  margin-bottom: 1.2rem;
  max-width: 10.5rem;
}

@media screen and (min-width: 768px) {
  .p-s-tech-list__content figure {
    max-width: 21rem;
    margin-right: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-s-tech-list__content figure {
    float: none;
    position: absolute;
    left: 0;
    margin: 0;
    max-width: 30rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-s-tech-list .c-list-caution {
    order: 3;
  }
}

.p-s-tech-list__content .p-s-tech-list__content-image-large {
  max-width: 14rem;
}

@media screen and (min-width: 768px) {
  .p-s-tech-list__content .p-s-tech-list__content-image-large {
    max-width: 21rem;
  }
}

@media screen and (min-width:1024px) {
  .p-s-tech-list__content .p-s-tech-list__content-image-large {
    max-width: 30rem;
  }
}

.p-s-tech-list__content figure img {
  width: 100%;
  height: auto;
  display: block;
}

.p-s-tech-list__content .c-list-caution {
  clear: both;
  padding-top: 1rem;
}

/* block */
.p-s-tech-achieve {
  font-size: var(--font-size-lg);
  letter-spacing: var(--letter-spacing-sm);
}

/* block */
.p-s-tech-patent {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media screen and (min-width: 768px) {
  .p-s-tech-patent {
    gap: 4.5rem;
  }

}

.p-s-tech-patent__content {
  padding: 2rem;
  display: flex;
  gap: 1rem;
}

@media screen and (min-width: 768px) {
  .p-s-tech-patent__content {
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem;
  }
}

.p-s-tech-patent__image {
  width: 10rem;
}

@media screen and (min-width: 768px) {
  .p-s-tech-patent__image {
    width: 15rem;
  }
}

.p-s-tech-patent__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
}

@media screen and (min-width: 768px) {
  .p-s-tech-patent__text {
    gap: 0.8rem;
  }
}

.p-s-tech-patent__text-01 {
  letter-spacing: var(--letter-spacing-reset);
}

@media screen and (min-width: 768px) {
  .p-s-tech-patent__text-01 {
    font-size: 1.5rem;
  }
}

.p-s-tech-patent__text-02 {
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-reset);
}

.p-s-tech-patent__text-03 {
  letter-spacing: var(--letter-spacing-reset);
}

@media screen and (min-width: 768px) {
  .p-s-tech-patent__text-03 {
    font-size: 1.4rem;
  }
}

/* block */
.s-tech-merit {}

@media screen and (min-width: 1024px) {
  .s-tech-merit {
    display: flex;
    flex-direction: column;
  }
}

.s-tech-merit__title {
  font-size: var(--font-size-md);
  margin-bottom: 0.6em;
}

.s-tech-merit__desc {
  margin-bottom: 0.7em;
}

.s-tech-merit__caution {
  margin-bottom: 2rem;

}

@media screen and (min-width: 1024px) {
  .s-tech-merit__caution {
    position: relative;
    order: 5;
    margin-top: 1rem;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1024px) {
  .s-tech-merit__sub {
    margin-top: auto;
  }
}



/* -------------------------------------------------------------------------
  si-modelhouse
  ------------------------------------------------------------------------- */
.p-si-modelhouse {}

.l-peel__item>.p-si-modelhouse {
  min-height: auto;
}

.p-si-modelhouse__title {
  margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
  .p-si-modelhouse__title {
    margin-bottom: 4.5rem;
  }
}

.p-si-modelhouse__title>img {
  display: block;
  width: 27rem;
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .p-si-modelhouse__title>img {
    width: 47rem;

  }
}

.p-si-modelhouse__desc {
  font-size: var(--font-size-md);
}

/* -------------------------------------------------------------------------
 取得部分 
------------------------------------------------------------------------- */
/* 親 */
@media screen and (min-width: 768px) {
  .p-entry-modelhouse {
    max-width: 47rem;
    margin-inline: auto;
  }
}

.modelhouse-thum-list {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.p-entry-modelhouse .-thum-inc-action-link {
  display: block;
  margin-bottom: 2rem;
}

.p-entry-modelhouse .-thum-inc-action-images {
  padding-bottom: 20px;
  background-color: #f4f1ed;
  position: relative;
  z-index: 1;
}

.p-entry-modelhouse .-thum-txt-link-side-line .-thum-txt-link-images {

  position: relative;
}

.p-entry-modelhouse .-thum-inc-action-images img {
  display: block;
  aspect-ratio: 7 / 4;
  object-fit: cover;
}

/* ラベル */
.-thum-type-label {
  width: 100%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  min-height: 47px;
}

.-thum-type-label.-min {
  width: 120px;
  height: 45px;
}

.-thum-type-label.-cardinal {
  background-color: #1a1311;
}

.-thum-txt-link-side-line .-thum-txt-link-images .-thum-type-label {
  bottom: 20px;
}

.-thum-type-label.-liznas {
  background-color: #d6b374;
}

.-thum-type-label:before {
  content: "";
  display: block;
  width: 80px;
  height: 27px;
  flex: 1;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.-thum-type-label.-liznas:before {
  background-image: url("../../images/si_collaboration/logo-liznas-white.svg");
  height: 12px;
}

.-thum-type-label.-cardinal:before,
.-thum-type-label.-liznas:before {
  width: 80px;
  height: 22px;
}

.-thum-type-label.-cardinal:before {
  background-image: url("../../images/si_collaboration/logo-cardinalhouse-white.svg");
  width: 80px;
}

.-thum-type-label.-cardinal:before {
  max-width: 80px;
  width: 33%;
}

/* テキスト部分 */
.p-entry-modelhouse .-thum-inc-action-line {
  padding-inline: 2rem;
}

.p-entry-modelhouse .-thum-inc-action-wrapper {
  padding-inline: 2rem;
}

.p-entry-modelhouse .-tit-small {
  font-size: var(--font-size-xl);
  margin-bottom: 0.7em;
}

.p-entry-modelhouse .-body-small {
  font-size: var(--font-size-md);
}

@media screen and (min-width: 768px) {
  .p-entry-modelhouse .-body-small {
    font-size: 1.4rem;
  }
}

/* 左右の線 */
.p-entry-modelhouse .-thum-txt-link-side-line {
  position: relative;
}

.p-entry-modelhouse .-thum-txt-link-side-line:after,
.p-entry-modelhouse .-thum-txt-link-side-line:before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #e3dfda;
  position: absolute;
  top: 0;
  z-index: 0;
}

.p-entry-modelhouse .-thum-txt-link-side-line:after {
  right: 0;
}

/* ボタン */

.p-card-bh__footer,
.p-entry-modelhouse .-thum-txt-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-card-bh__button,
.p-entry-modelhouse .-thum-txt-btn-row-item {
  width: 100%;
  /* max-width: calc((100% - 2rem) / 2); */
}

.c-button,
.p-card-bh__button>a,
.p-entry-modelhouse .-btn-ol {
  display: block;
  width: 100%;
  padding: 1em;

  font-size: var(--font-size-md);
  line-height: var(--line-height-reset);
  text-align: center;
  color: var(--color-white);
  background-color: #45413e;
  border: 1px solid #45413e;
  border-radius: 10rem;

}

.c-button--black,
.p-card-bh__button>a {
  background-color: var(--color-black-100);
  border: 1px solid var(--color-black-100);
}

.p-card-bh__button>a {
  width: 18em;
  margin-inline: auto;
  display: block;
  box-shadow: 0.2rem 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
}

.c-button--red,
.p-card-bh__button--booking>a,
.p-entry-modelhouse .-btn-ol.-red {
  background-color: #dc0017;
  border: 1px solid #dc0017;
}

.c-button {
  font-size: 1.4rem;
  box-shadow: 0.2rem 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
}

@media screen and (min-width: 1024px) {
  .c-button {
    font-size: 1.6rem;
  }
}

/* -------------------------------------------------------------------------
  section内のcta block
  ------------------------------------------------------------------------- */
.p-cta {
  margin-top: 5rem;
}

.p-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media screen and (min-width: 1024px) {
  .p-cta__inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;

  }

}

.p-cta__item .c-button {
  width: 18em;
}


/* -------------------------------------------------------------------------
  si-build-house
  ------------------------------------------------------------------------- */
.p-si-build-house {}

@media screen and (min-width: 1160px) {

  /* フレックスアイテム要素（最小幅315px）が3列で入る最小の画面幅でコンテンツエリアを拡大 */
  .p-si-build-house .l-container {
    max-width: calc(104rem + var(--layout-content-side) * 2);
  }
}

.p-si-build-list {
  --gap: 6rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

@media screen and (min-width: 768px) {
  .p-si-build-list {
    --gap: 2rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6rem var(--gap);
  }
}

@media screen and (min-width: 1024px) {
  .p-si-build-list {
    --gap: 4.5rem;
    justify-content: center;
    /* max-width: 67.5rem;
    margin-inline: auto; */
  }

  .p-si-build-list::after {
    content: "";
    display: block;
    width: calc((100% - var(--gap) * 2) * 0.3333);
    height: 0;
  }
}

@media screen and (min-width: 768px) {
  .p-si-build-list__item {
    width: calc((100% - var(--gap)) * 0.5);
  }
}

@media screen and (min-width: 1024px) {
  .p-si-build-list__item {
    min-width: 31.5rem;
    width: calc((100% - var(--gap) * 2) * 0.3333);
  }

}

.p-card-bh {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (min-width: 768px) {
  .p-card-bh {
    height: 100%;
  }
}

.p-card-bh__band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  padding-left: 1.5rem;
  color: var(--color-white);
  background-color: var(--color-black);
}

.p-card-bh__band>img {
  display: block;
  width: 16.5rem;
}

.p-card-bh__band>span {
  font-size: 1.4rem;
}

.p-card-bh__header {
  border: solid 1px var(--color-gray-100);
}

.p-card-bh__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
}

.p-card-bh__visual figure {
  position: absolute;
  bottom: 0;
  background-color: var(--color-white);
  /* border: solid 1px var(--color-gray-100); */
}

.p-card-bh__visual .-thum-type-label {
  bottom: 2.5rem;
}

.p-card-bh__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.p-card-bh__visual.modelhouse img {
  aspect-ratio: 4 / 3;
}

.c-tag {
  position: absolute;
  z-index: 1;
  /* margin-top: -1.2em; */
  padding: 0 0.7em;
  line-height: 1;
  top: 0.5em;
  color: #fff;
}

@media screen and (min-width: 1024px) {
  .c-tag {
    /* margin-top: -0.8em; */
  }
}

.c-tag__madori,
.c-tag__other {
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0;
  padding: 0.7em 1.15em;
  background-color: #d6b374;
  margin-right: 0.7em;
  border-radius: 1.15em;
}

.c-tag__madori {
  background-color: var(--color-black);
}

.p-card-bh__title {
  font-size: 1.8rem;
  margin-top: 0.7rem;
}

.p-card-bh__copy {
  font-size: 1.4rem;
}

.p-card-bh__copy.limit-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-card-bh__detail {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.p-card-bh__point {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 13rem;
  flex-shrink: 0;
}

.p-card-bh__point>li {
  padding: 0.4em 0.35em 0.3em;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-reset);
  background-color: var(--color-black);
  color: var(--color-white);
  text-align: center;
}

.p-card-bh__address {
  font-size: var(--font-size-sm);
  margin-bottom: 0.4em;
}

.p-card-bh__price-title {
  display: inline-block;
  font-size: 1.2rem;
  line-height: var(--line-height-reset);
  letter-spacing: var(--letter-spacing-reset);
  text-align: center;
}

.p-card-bh__price-title small {
  display: inline-block;
  width: 100%;
  font-size: var(--font-size-caution);
  margin-top: 0.3em;
}

.p-card-bh__num {
  margin-left: 0.5rem;
  margin-right: 0.3rem;
  font-size: 2.8rem;
}

.p-card-bh__price-unit {
  font-size: 1.2rem;
}

.p-card-bh__footer {
  margin-top: 1rem;
}

@media screen and (min-width: 768px) {
  .p-card-bh__footer {
    margin-top: auto;
    padding-top: 1.5rem;
  }
}

.p-card-bh__button>a {
  font-size: 1.4rem;
}



/* -------------------------------------------------------------------------
  contact
  ------------------------------------------------------------------------- */
.contact {
  overflow: hidden;
}

.p-contact {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media screen and (min-width: 768px) {
  .p-contact {
    gap: 4.5rem;
  }
}

.p-contact__header {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media screen and (min-width: 768px) {
  .p-contact__header {
    max-width: 40rem;
    margin-inline: auto;
  }
}

.p-contact__title {
  text-align: center;
}

.p-contact__title-image {
  display: block;
  width: 27rem;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
  .p-contact__title-image {
    width: 40rem;
    margin-bottom: 3rem;
  }
}

.p-contact__sub-title {
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-catch-md);
}

.p-contact__desc {
  font-size: 1.4rem;
  line-height: var(--line-height-loose);
}

.p-contact__figure {
  width: calc(100% + var(--layout-content-side));
}

@media screen and (min-width: 768px) {
  .p-contact__figure {
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  .p-contact__body {
    max-width: 65rem;
    margin-inline: auto;
  }
}

.l-main {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------------------
  l-footer
  ------------------------------------------------------------------------- */
.l-footer {
  min-height: calc(var(--content-screen-height) + var(--cta-area-height));
  display: flex;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 1;

  padding-bottom: calc(10rem + var(--cta-area-height));

}

@media screen and (min-width:1024px) {
  .l-footer {
    min-height: 76.8rem;
  }
}

.l-footer__caution {
  position: absolute;
  bottom: var(--cta-area-height);
  left: 0;

  font-size: 1rem;
  padding: 0 1em 2em;
  letter-spacing: 0;
}

.l-footer__logo {
  max-width: 20rem;
}

/* -------------------------------------------------------------------------
  画面追従CTA
  ------------------------------------------------------------------------- */
.l-floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;

  width: 100%;
  padding: 1rem;
  z-index: var(--layer-cta);
}

.l-floating-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}



.l-floating-cta__inner {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1rem;
}



.l-floating-cta__item {
  width: calc((100% - 1rem) * 0.5);
  max-width: 16rem;
  /* display: flex; */
  /* justify-content: flex-end; */
}

@media screen and (min-width: 768px) {
  .l-floating-cta__item {
    max-width: 21rem;
  }

}

/* モーダルフォーム */
/* お問い合わせセクション全体（背景・オーバーレイ） */
.p-sec-contact-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: var(--layer-modal);
  /* 最前面に配置 */
  background-color: rgba(0, 0, 0, 0.7);
  /* 背景を暗くする */

  /* 初期状態：隠しておく */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s;

  /* 中身のスクロールを許可 */
  overflow-y: auto;

  padding: 7.5rem 1.5rem;
}

@media screen and (min-width:768px) {
  .p-sec-contact-2 {

    padding: 7.5rem 0;
  }

}

.p-sec-contact-2 .l-container {
  --container-inner-width: 66rem;
}

/* 内側のコンテンツコンテナ（ここが右からスライドする） */

.p-sec-contact-2>.l-container {
  width: 100%;

  /* 幅を調整（基準幅の変数を使用） */
  min-height: 100vh;

  /* スライドの初期状態：右側に100%押し出す */
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);

  padding-top: 3rem;
}



/* アクティブ時の挙動 */
.p-sec-contact-2.is-active {
  opacity: 1;
  visibility: visible;
}

.p-sec-contact-2.is-active .l-container {
  transform: translateX(0);
  /* スライドイン */
}

/* 閉じるボタン（右上に固定） */
.js-trigger-close-contact-2 {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 100;
  background: transparent;
  border: none;
  color: var(--color-white);
  font-size: 3rem;
  cursor: pointer;
  line-height: 1;

  visibility: hidden;
}

.p-sec-contact-2.is-active .js-trigger-close-contact-2 {
  visibility: visible;
}

/* フェイドアップアニメーション */
/* アニメーション前の初期状態（透明 ＆ 少し下に配置） */
.js-fade-up {
  opacity: 0;
  transform: translateY(15px);
  /* 30px下から */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

@media screen and (min-width: 768px) {
  .js-fade-up {
    transform: translateY(30px);
  }

}

/* 画面に入ってクラスが付与された時の状態（不透明 ＆ 元の位置） */
.js-fade-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
  Utilities
  ------------------------------------------------------------------------- */
.bg-black {
  background-color: var(--color-black);
}

.bg-gray {
  background-color: var(--color-gray-200);
}

.bg-black-light {
  background-color: var(--color-black-100);
}

.bg-blue-heavy {
  background-color: var(--color-blue-500);
}

.bg-off-white {
  background-color: var(--color-off-white);
}

.bg-stone {
  background-image: url(../../images/si_collaboration/bg-stone.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-blue-light {
  background-color: var(--color-blue-100);
}

.bg-beige {
  background-color: var(--color-beige);
}

.color-on-dark {
  color: var(--color-white);
}

.color-s-blue {
  color: var(--color-blue-300);
}


.u-text-center {
  text-align: center;
}

@media screen and (min-width: 1024px) {
  .u-text-center-pc {
    text-align: center;
  }
}

.u-lh-reset {
  line-height: var(--line-height-reset);
}

.u-lh-snug {
  line-height: var(--line-height-snug);
}

.u-lh-body {
  line-height: var(--line-height-body);
}

.u-lh-loose {
  line-height: var(--line-height-loose);
}

.u-lh-extra-loose {
  line-height: var(--line-height-extra-loose);
}

.u-mt-sm {
  margin-top: 1rem;
}

.u-mt-md {
  margin-top: 3rem;
}

.u-mt-lg {
  margin-top: 5rem;
}

.u-ib {
  display: inline-block;
}

@media screen and (min-width: 1024px) {
  .sp1024 {
    display: none;
  }
}