:root {
  --base-vw-sp: 2.666vw;
  --base-vw-tab: 1.3vw;
  --base-vw-pc: 10px;
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #BFBFBF;
  --color-green-100: #F4F5F4;
  --color-green-200: #EEEFEB;
  --color-green-300: #E7E8E0;
  --color-green: #14291D;
  --color-yellow: #D4C68B;
  --color-yellow-500: #CAB96F;
  --color-red: #E50020;
  --color-green-tp: rgba(20, 41, 29, 0.05);
  --color-blue: #005BAB;

  --size-10: 1rem;
  --size-15: 1.5rem;
  --size-20: 2rem;
  --size-25: 2.5rem;
  --size-30: 3rem;
  --size-50: 5rem;

  --text-shadow-white: 0.1rem 0.1rem 0rem rgba(255, 255, 255, 0.5);
  --text-shadow-green: 0 0 0.9rem rgba(20, 41, 90, 0.5);
  --text-shadow-green-dark: 0 0 0.6rem rgba(20, 41, 29, 0.5);
  --shadow: 0.3rem 0.3rem 0.6rem rgba(0, 0, 0, 0.15);

  --font-size-xs: 1rem;
  --font-size-sm: 1.1rem;
  --font-size-md: 1.2rem;
  --font-size-lg: 1.4rem;
  --font-size-xl: 1.6rem;
  --font-size-2xl: 1.8rem;
  --font-size-3xl: 2.1rem;
  --font-size-4xl: 2.4rem;
  --font-size-5xl: 2.8rem;

  --line-height-reset: 1;
  --line-height-snug: 1.3;
  --line-height-body: 1.5;
  --line-height-relaxed: 1.8;
  --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;

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

  --cta-area-height: 10rem;
  --header-height: 6rem;
  --header-text-color: #fff;
  --header-text-color-scrolled: #000;

  --content-screen-height: calc(100vh - var(--header-height));
  --width-logo: 25rem;

  --o-t-bottom: 31vw;
  --f-t-bottom: 11vw;
  --s-n-bottom: 7vw;
  --o-o-bottom: 22vw;
  --t-f-bottom: 22vw;
  --n-s-bottom: 40vw;

}

@media screen and (min-width:768px) {
  :root {
    --layout-content-side: 5rem;
    --font-size-md: 1.8rem;
    --font-size-lg: 2.1rem;
    --font-size-xl: 2.4rem;
    --font-size-2xl: 2.7rem;
    --font-size-3xl: 3.2rem;
    --font-size-4xl: 3.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);
}

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

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



body {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* フォントプラス：MpW7Sf7DYgc%3D*/
  font-family: 'FP-HiraKakuProN-W3', sans-serif;
  font-weight: 300;
  font-style: normal;

  overflow-anchor: none;
}

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

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

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

@media screen and (min-width: 1024px) {
  section {
    --section-space-v: 15rem;
  }
}

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

h1,
h2,
h3,
h4,
h5,
p,
span,
li,
dt,
dd {
  letter-spacing: var(--letter-spacing-reset);
}

/* -------------------------------------------------------------------------
fonts
------------------------------------------------------------------------- */
.u-font-en {
  /* フォントプラス：MpW7Sf7DYgc%3D*/
  font-family: 'Augereau-Regular', serif !important;
  font-weight: 400;

}

.u-font-mincho {
  /* フォントプラス：MpW7Sf7DYgc%3D*/
  font-family: 'TsukuAOldMinPr6-D', serif !important;
  font-weight: 600;

  /* font-family: yu-mincho-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal; */
}

.u-font-ja-500 {
  font-family: 'FP-HiraKakuProN-W5', sans-serif !important;
  font-weight: 500;
}

.u-font-ja-600 {
  /* フォントプラス：MpW7Sf7DYgc%3D*/
  font-family: 'FP-HiraKakuProN-W6', sans-serif !important;
  font-weight: 600;
}

.u-font-ja-300 {
  /* フォントプラス：MpW7Sf7DYgc%3D*/
  font-family: 'FP-HiraKakuProN-W3', sans-serif !important;
  font-weight: 300;
}


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

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

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

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

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

.l-stack--sm {
  --stack-gap: 2rem;
}

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

}

.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--narrow {
  --layout-max-width: calc(68rem + var(--layout-content-side) * 2);
}

/* 画面幅いっぱい */
.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);
  }
}

/* -------------------------------------------------------------------------
sticky（peel）の大枠
------------------------------------------------------------------------- */
/* .l-peel-wrap {
  position: relative;
  z-index: 1;
}

.l-peel-wrap+.l-peel-wrap {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
} */
.l-peel-wrap {
  margin-top: calc(var(--cta-area-height) * -1);
  position: relative;
  z-index: 30;
}

/* -------------------------------------------------------------------------
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--first .l-peel__item>* {
  /* 仮 */
  min-height: 100vh;
}

.l-peel--last {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.l-peel--last>.l-peer__item {
  position: relative;
}

.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);
  overflow: hidden;
}

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

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

.u-anchor-target {
  --adjust-scroll-amount: 0;
  --_adjusted-position-top: calc(var(--adjust-scroll-amount) + 100vh);

  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 分「下」に配置しています。
    */

  /* 調整時：位置を可視化 */
  /* width: 100%;
  height: 1px;
  background-color: red;
  z-index: 9999;
  visibility: visible; */
}

#tg-lineup-sora {
  /* u-anchor-targetを可視化して、基準幅で目視で合わせる */
  --adjust-scroll-amount: 137.2rem;
  top: var(--_adjusted-position-top);
}

@media screen and (min-width: 768px) {
  #tg-lineup-sora {
    --adjust-scroll-amount: 108rem;
  }
}

@media screen and (min-width: 1024px) {
  #tg-lineup-sora {
    --adjust-scroll-amount: 120rem;
  }
}

#tg-lineup-rin {
  /* u-anchor-targetを可視化して、基準幅で目視で合わせる*/
  --adjust-scroll-amount: 281rem;
  top: var(--_adjusted-position-top);
}

@media screen and (min-width: 768px) {
  #tg-lineup-rin {
    --adjust-scroll-amount: 223.3rem;
  }
}

@media screen and (min-width: 1024px) {
  #tg-lineup-rin {
    --adjust-scroll-amount: 248.8rem;
  }

}

/* -------------------------------------------------------------------------
 COMPONENT
------------------------------------------------------------------------- */
/* button */
.c-cta-button {
  height: 7rem;
  padding-inline: calc(2.5rem - 2px);
  border: solid 2px var(--color-white);
  display: flex;
  align-items: center;
  width: 30rem;
  border-radius: 1.5rem;
}

.c-cta-button__content {
  width: 100%;
  text-align: center;
  line-height: var(--line-height-reset);
}

.c-cta-button__main-text {
  display: block;
  font-size: 2.2rem;
  line-height: var(--line-height-reset);
  margin-bottom: 0.15em;
}

@media screen and (min-width: 1024px) {
  .c-cta-button__main-text {
    margin-bottom: 0;
  }
}

.c-cta-button__sub-text {
  font-size: 1.2rem;
  line-height: var(--line-height-reset);
  text-align: center;
}

.c-button-check {
  position: relative;
  display: block;
  padding: var(--size-10);
  z-index: 1;
}

.c-button-check__text {
  position: relative;
  display: block;
  width: fit-content;
  padding: 0.5em 1em;
  font-size: 1rem;
  line-height: var(--line-height-reset);
  background-color: var(--color-white);
  border-radius: 1em;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .c-button-check__text {
    font-size: 1.5rem;
    margin-inline: auto;
  }

}

.c-button-check__text::before {
  content: "▶︎";
  display: inline-block;
  margin-right: 0.4em;
}

/* deco */
.c-deco-border-bottom {
  position: relative;
}

.c-deco-border-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-white);
}

.c-deco-border-bottom--black::after {
  background-color: var(--color-black);
}

/* 線で区切る */
.c-separate {
  position: relative;
  padding-bottom: var(--size-50);
  margin-bottom: var(--size-50);
}

@media screen and (min-width: 768px) {
  .c-separate {
    padding-bottom: 10rem;
    margin-bottom: 10rem;
  }
}

.c-separate::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;

}

/* テキスト装飾 */
.c-text-outline {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-reset);
}

.c-text-outline::before {
  content: "";
  display: block;
  width: 0.35em;
  height: .75em;
  background-color: currentColor;
}

.c-text-outline__text-en {
  transform: translateY(0.1em);
}

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

/* -------------------------------------------------------------------------
  loadiong
  ------------------------------------------------------------------------- */
.p-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: var(--layer-toast);

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

  opacity: 1;
  visibility: visible;
  transition: opacity 2s ease, visibility 2s ease;
}

.p-loading.is-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.p-loading__content {
  /* position: absolute;
  left: 50%;
  top: 25vh;
  transform: translate(-50%, -50%);
  width: 30vh; */

  position: absolute;
  left: 50%;
  bottom: 50vh;
  transform: translate(-50%, 0%);
  transform-origin: bottom;
  width: 30vh;
  margin-bottom: 3.5vh;
}

.p-loading__logo {
  /* width: var(--width-logo); */
}

.p-loading__bar-area {
  /* svg要素の高さを擬似的に置いておく */
  width: 3.6rem;
  height: 10rem;

}

.p-loading__logo img {
  width: 100%;
  filter: drop-shadow(0 0 0.6rem rgba(255, 255, 255, 1));
}


/* ===================================================
 * Fireflower Animation
 * =================================================== */
.fireflower {
  /* 下から、の位置指定をするためにabosluteする */
  position: absolute;
  /* 動画のハイライト部分に合わせる */
  bottom: calc(var(--o-t-bottom) + var(--cta-area-height));
  left: 0;
  right: 0;
  width: 3.6rem;
  margin: auto;
  height: calc(50vh - calc(var(--o-t-bottom) + var(--cta-area-height)));
}

.fireflower.f_line {
  bottom: calc(var(--o-t-bottom) + 1.8rem + var(--cta-area-height));
  height: calc(50vh - 1.8rem - calc(var(--o-t-bottom) + var(--cta-area-height)));
}

@media screen and (min-aspect-ratio: 9/16) {
  .fireflower {
    bottom: calc(var(--n-s-bottom) + var(--cta-area-height));
    height: calc(50vh - calc(var(--n-s-bottom) + var(--cta-area-height)));
  }

  .fireflower.f_line {
    bottom: calc(var(--n-s-bottom) + 1.8rem + var(--cta-area-height));
    height: calc(50vh - 1.8rem - calc(var(--n-s-bottom) + var(--cta-area-height)));
  }
}

@media screen and (min-aspect-ratio: 3/4) {
  .fireflower {
    bottom: calc(var(--t-f-bottom) + var(--cta-area-height));
    height: calc(50vh - calc(var(--t-f-bottom) + var(--cta-area-height)));
  }

  .fireflower.f_line {
    bottom: calc(var(--t-f-bottom) + 1.2rem + var(--cta-area-height));
    height: calc(50vh - 1.2rem - calc(var(--t-f-bottom) + var(--cta-area-height)));
  }
}

@media screen and (min-aspect-ratio: 1/1) {
  .fireflower {
    bottom: calc(var(--o-o-bottom) + var(--cta-area-height));
    height: calc(50vh - calc(var(--o-o-bottom) + var(--cta-area-height)));
  }

  .fireflower.f_line {
    bottom: calc(var(--o-o-bottom) + 1.8rem + var(--cta-area-height));
    height: calc(50vh - 1.8rem - calc(var(--o-o-bottom) + var(--cta-area-height)));
  }
}

@media screen and (min-aspect-ratio: 4/3) {
  .fireflower {
    bottom: calc(var(--f-t-bottom) + var(--cta-area-height));
    height: calc(50vh - calc(var(--f-t-bottom) + var(--cta-area-height)));
  }

  .fireflower.f_line {
    bottom: calc(var(--f-t-bottom) + 1.6rem + var(--cta-area-height));
    height: calc(50vh - 1.6rem - calc(var(--f-t-bottom) + var(--cta-area-height)));
  }
}

@media screen and (min-aspect-ratio: 16/9) {
  .fireflower {
    bottom: calc(var(--s-n-bottom) + var(--cta-area-height));
    height: calc(50vh - calc(var(--s-n-bottom) + var(--cta-area-height)));
  }

  .fireflower.f_line {
    bottom: calc(var(--s-n-bottom) + 1.8rem + var(--cta-area-height));
    height: calc(50vh - 1.8rem - calc(var(--s-n-bottom) + var(--cta-area-height)));
  }
}




#fireflower line {
  stroke-width: 1px;
}

.fireflower line {
  stroke: currentColor;
  filter: drop-shadow(0 0 0.3rem rgba(255, 255, 255, 1));
}

/* -------------------------------------
 * フェーズ1: 落ちるしずく（移動）
 * ------------------------------------- */
#line-vertical {
  /* opacity: 0; */
}

.animation-start #line-vertical {
  animation: drop-fall 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drop-fall {
  0% {
    transform: translateY(-20px);
    opacity: 1;
  }

  35% {
    transform: translateY(73.5px);
    opacity: 1;
  }

  36%,
  100% {
    transform: translateY(73.5px);
    /* opacity: 0; */
  }
}

/* -------------------------------------
 * フェーズ2: 花火の広がり（拡大）
 * ------------------------------------- */
#sparks {
  transform-origin: 19px 93.467px;
  transform: scale(0);
  /* opacity: 0; */
}

.animation-start #sparks {
  animation: firework-explode 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes firework-explode {

  0%,
  34% {
    transform: scale(0);
    /* opacity: 0; */
  }

  35% {
    transform: scale(0.2);
    /* opacity: 1; */
  }

  60% {
    transform: scale(1);
    /* opacity: 1; */
  }

  80%,
  100% {
    transform: scale(1.1);
    /* opacity: 0; */
  }
}

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

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

.l-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--header-border-color);
}

.l-header:has(.l-header__nav.is-active)::after {
  display: none;
}

body:has(.mov-showoff-strat) .l-header,
.l-header.is-scrolled {
  /* 元のロゴの配色を代入 */
  --header-logo-color: var(--color-black);
  --header-border-color: var(--color-gray);
  background-color: var(--color-white);
}

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

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

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

.l-header__logo {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 1.5rem;
  color: var(--header-logo-color);
  transition: color 0.3s ease-out;
}

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

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

.l-header__logo path,
.l-header__logo rect:not(.p-header__logo-red) {
  fill: currentColor;
}

.l-header__logo .p-header__logo-red {
  fill: #e50020 !important;
}

.p-header__logo {
  display: block;
  width: 100%;
  height: auto;

}

.p-header__logo--cardinalhouse {
  width: 11.1rem;
  flex-shrink: 0;
}

.p-header__logo--yours {
  width: 15rem;
  flex-shrink: 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);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.15s var(--linear) visibility 0s linear 0.15s;
}

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

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

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



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

.l-header__hamburger::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1px;
  background-color: var(--header-border-color);
}

.l-header__hamburger.is-active::before {
  display: none;
}


.l-header__hamburger-line {
  display: block;
  width: var(--line-width);
  height: var(--line-thickness);
  background-color: var(--header-border-color);
  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:has(.l-header__nav.is-active) .l-header__hamburger-line {
  background-color: var(--color-black) !important;
}

/* トップ動画開始時 */
body:has(.mov-start) .l-header__hamburger-line {
  background-color: var(--color-white);
}

/* トップ動画がフェイドを始めた時 */
body:has(.mov-showoff-strat) .l-header__hamburger-line {
  background-color: var(--color-black);
}

/* スクロールした時 */
.l-header.is-scrolled .l-header__hamburger-line {
  background-color: var(--color-black) !important;
}

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

/* -------------------------------------------------------------------------
  l-footer
  ------------------------------------------------------------------------- */

.l-footer {
  position: relative;
  padding-top: 10rem;
  padding-bottom: 10rem;
  background-color: var(--color-white);
  margin-bottom: var(--cta-area-height);
}

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

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

.l-footer {
  min-height: var(--content-screen-height);
  display: flex;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 1;
}

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

/* -------------------------------------------------------------------------
    cta
  ------------------------------------------------------------------------- */
.l-floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--cta-area-height);
  z-index: var(--layer-cta);
  padding: 1.5rem;
}

/*--------------------------------------------------------------------------
  p-hero  
------------------------------------------------------------------------- */
.p-hero {
  height: 100vh;
  padding-top: 0;
  padding-bottom: var(--cta-area-height);
}


.p-hero__inner {
  position: relative;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  width: 100%;
  height: 100%;
}

.p-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.p-hero__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-green-tp);
  pointer-events: none;
}

.p-hero__video {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left bottom;
}

.p-hero__logo {
  position: relative;
  width: var(--width-logo);
  margin: 0 auto;
  opacity: 0;
  top: 12rem;
  transition: opacity 1s;
}

/* オープニング連動 */
/* ローディング後の3D動画 */
.p-hero-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 15;
  pointer-events: none;
  padding-bottom: var(--cta-area-height);
  background-color: #fff;
}

.p-hero-container__inner {
  opacity: 0;
  transition: opacity 1s;
}

.p-hero-container__inner:has(.loadend) {
  opacity: 1;
}

.p-hero-container:has(.mov-showoff-strat) {
  animation: fadeOutVideo 1s ease 0s forwards;
}

.p-hero-container:has(.mov-start) .p-hero__logo {
  opacity: 1;
}

.p-hero-container:has(.plus3) .p-hero__logo {
  opacity: 0;
}

@keyframes fadeOutVideo {
  to {
    opacity: 0;
  }
}

@keyframes fadeInVideo {
  to {
    opacity: 1;
  }
}

.p-hero-container__inner {
  height: 100%;
}

/*--------------------------------------------------------------------------
  p-top
------------------------------------------------------------------------- */
.p-mv-container {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 100vh;
  padding-top: var(--header-height);
  padding-bottom: var(--cta-area-height);
  background-color: var(--color-white);
}

@media screen and (min-width: 1024px) {
  .p-top-container {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 57vw;
    height: calc(100vh - var(--header-height));
    padding-top: 30px;
    padding-bottom: var(--cta-area-height);
  }
}

@media screen and (min-width: 1735px) {
  .p-top-container {
    /* min-heightが要素の最大高さを超えるタイミングで固定値に変更 */
    min-height: 100rem;
  }
}

.p-top {
  --logo-size-pc: 25vw;
  --logo-max-size-pc: 31.5rem;
  --top-content-max-width: 145rem;
  --top-side-space: 8rem;
  position: relative;
  height: 100%;
  background-color: var(--color-white);
  overflow: hidden;
  margin-inline: auto;

  display: flex;
  align-items: center;
}

@media screen and (min-width:768px) {
  .p-top {
    display: flex;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: var(--cta-area-height);
  }
}

@media screen and (min-width:1024px) {
  .p-top {
    display: block;
    height: auto;
    max-height: 100%;
    padding: 0;
    overflow: hidden;
  }
}


.p-top__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  max-width: calc(var(--top-content-max-width) + (var(--top-side-space) * 2));
  margin-inline: auto;
}

@media screen and (min-width: 1024px) {
  .p-top__inner {
    display: block;
    padding-inline: var(--top-side-space);
  }
}

.p-top-head {}


.p-top-head__lead-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
}

.p-top-head__lead {
  width: 20rem;
  margin-inline: auto;
}


@media screen and (min-width:768px) {
  .p-top-head__lead {
    width: var(--width-logo);

  }
}

@media screen and (min-width: 1024px) {
  .p-top-head__lead {
    /* 1024pxで310pxを基準  */
    width: var(--logo-size-pc);
    max-width: var(--logo-max-size-pc);
    margin-left: 0;
    background-color: var(--color-white);

    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;

  }
}

.p-top-head__logo {}

@media screen and (min-width: 1024px) {
  .p-top-head__logo {
    display: block;
    padding: 14%;
  }
}

/* @media screen and (min-width: 1280px) {
  .p-top-head__logo {
    padding: 14%;
  }
} */

.p-top-head__image {
  margin-top: 2rem;
}

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


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

.p-top-desc {
  text-align: center;
}

@media screen and (min-width: 1024px) {
  .p-top-desc {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    width: 100%;
    /* max-width: calc(120rem + 16rem); */
    max-width: calc(var(--top-content-max-width) + (var(--top-side-space) * 2));
    padding-inline: 8rem;
    text-align: left;
  }
}

@media screen and (min-width: 1024px) {
  .p-top-desc::before {
    content: "";
    display: block;
    aspect-ratio: 1/ 1;
    width: var(--logo-size-pc);
    max-width: var(--logo-max-size-pc);
  }
}

@media screen and (min-width: 1024px) {
  .p-top-desc__inner {
    margin-left: 3vw;
  }
}

@media screen and (min-width: 1360px) {
  .p-top-desc__inner {
    margin-left: 4rem;
  }
}



.p-top-desc__lead {
  margin-bottom: 0.5em;
  font-size: var(--font-size-xl);
}

@media screen and (min-width: 1024px) {
  .p-top-desc__lead {
    /* 1024px幅で24px基準 */
    font-size: 2.2vw;
  }
}

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

  /* p-top-desc__innerの横幅がストップする幅で止める*/
  .p-top-desc__lead {
    font-size: 3rem;
    /* font-size: 2.7rem; */
  }
}

.p-top-desc__catch {
  margin-bottom: 0.3em;
  font-size: var(--font-size-5xl);
  letter-spacing: var(--letter-spacing-sm);
}

@media screen and (min-width: 1024px) {
  .p-top-desc__catch {
    /* 1024px幅で28px基準 */
    font-size: 2.6vw;
  }
}

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

  /* p-top-desc__innerの横幅がストップする幅で止める*/
  .p-top-desc__catch {
    font-size: 3.5rem;
    /* font-size: 3.2rem; */
  }
}

.p-top-desc__address {
  font-size: var(--font-size-xl);

}

@media screen and (min-width: 1024px) {
  .p-top-desc__address {
    /* 1024px幅で24px基準 */
    font-size: 2.2vw;
  }
}

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

  /* p-top-desc__innerの横幅がストップする幅で止める*/
  .p-top-desc__address {
    font-size: 3rem;
    /* font-size: 2.7rem; */

  }
}

/* オープニング連動 */
.p-top-head__image img {
  transform: scale(1.2);
  transform-origin: bottom center;
  transition: 1s ease-out;
}

body:has(.mov-showoff-strat) .p-top-head__image img {
  transform: scale(1);
}

/*--------------------------------------------------------------------------
  p-property-list
------------------------------------------------------------------------- */
.p-property-list {
  padding-top: 0;
  padding-bottom: 0;
  --icon-size: 15rem;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-property-list {
    --icon-size: 24rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-property-list {
    display: flex;
    align-items: center;

    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-property-list__inner {
    display: flex;
    gap: 3rem;
    padding-inline: 3rem;
    max-width: calc(120rem + 6rem);
    margin-inline: auto;
  }
}


.p-property {
  padding: var(--section-space-v) 0;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .p-property {
    padding: 0;
    width: 33.33%;
  }

  .p-property.c-deco-border-bottom::after {
    display: none;
  }

  .p-property>.l-container {
    padding: 0;
  }
}

.p-property__visual {
  position: relative;
  padding-top: 12rem;
}

@media screen and (min-width: 768px) {
  .p-property__visual {
    padding-top: 18rem;
  }
}

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

.p-property__icon {
  position: absolute;
  top: 3rem;
  right: 0;
  display: block;
  height: var(--icon-size);
  width: auto;
  pointer-events: none;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-property__icon {
    top: 4.5rem;
    right: 10rem;
  }
}

.p-property__copy {
  position: absolute;
  top: 0;
  left: 1.5rem;
  font-size: 1.6rem;
  letter-spacing: var(--letter-spacing-lg);
  line-height: var(--line-height-relaxed);
  writing-mode: vertical-rl;
  text-shadow: var(--text-shadow-white);
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-property__copy {
    font-size: 2.4rem;
    left: 6.5rem;
  }
}

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

.p-property__interior {
  display: block;
  width: calc(100% + 1rem);
  margin-left: calc(var(--layout-content-side) * -1);
}


@media screen and (min-width: 768px) {
  .p-property__interior {
    width: 100%;
    margin-left: auto;
  }
}


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

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-property__interior img {

    aspect-ratio: 2 / 1;

  }
}

.p-property__body {
  position: relative;
  margin-top: -0.5rem;
  padding-right: 60%;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-property__body {
    padding-right: 65%;
    margin-top: -1.3rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-property__body {
    padding-right: 0;
    padding-left: 57.5%;
  }
}

.p-property__title {
  position: relative;
  z-index: 2;
}

.p-property__title-img {
  display: block;
  width: 12.5rem;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-property__title-img {
    width: 18rem;
    margin-inline: auto;
  }
}

.p-property__facade {
  position: absolute;
  bottom: 1rem;
  right: -8rem;

  width: 90%;
}

@media screen and (min-width: 768px) {
  .p-property__facade {
    right: -2rem;
    width: 64%;
  }
}

@media screen and (min-width: 1024px) {
  .p-property__facade {
    right: auto;
    left: 0;
    width: 70%;
  }
}

.p-property__facade--sora {
  right: -9rem;
}

.p-property__facade-img {
  display: block;
}

@media screen and (max-width:1023px) {
  .p-property--reverse .p-property__icon {
    right: auto;
    left: 0;
  }
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-property--reverse .p-property__icon {
    left: 11rem;
    top: 0;
  }
}

@media screen and (max-width:1023px) {
  .p-property--reverse .p-property__copy {
    right: 0;
    left: auto;
  }
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-property--reverse .p-property__copy {
    top: 4.5rem;
    right: 4.5rem;
    z-index: 1;
  }
}



.p-property--reverse .p-property__interior {
  margin-left: auto;
  margin-right: calc(var(--layout-content-side) * -1);
}

@media screen and (min-width: 768px) {
  .p-property--reverse .p-property__interior {
    margin-right: auto;
  }

}

/* -------------------------------------------------------------------------
  p-collaboration
  ------------------------------------------------------------------------- */
.c-figcaption-note {
  display: block;
  padding-left: 1rem;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0;
  font-feature-settings: "palt";
}

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

.p-collaboration {}

.p-collaboration__header {}

.p-collaboration__header.c-separate::after {
  width: calc(100% + 2rem);
  margin-left: -1rem;
}

.p-collaboration__body {}

@media screen and (min-width: 1024px) {
  .p-collaboration__body {
    display: flex;
    flex-wrap: wrap;
  }
}

/* イントロ */
.p-intro {}

.p-intro__heading {
  margin-bottom: 1em;

  font-size: var(--font-size-5xl);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-sm);
}

@media screen and (min-width: 768px) {
  .p-intro__heading {
    font-size: 5.2rem;
    text-align: center;
  }
}

.p-intro__copy {
  margin-bottom: 1em;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-reset);
  letter-spacing: 0.08em;
}

@media screen and (min-width: 768px) {
  .p-intro__copy {
    font-size: 3rem;
    text-align: center;
  }
}

.p-intro__explain {
  font-size: var(--font-size-md);
  line-height: var(--line-height-extra-loose);
}

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

/* スペースコンセプト */
.p-concept {
  margin-bottom: 8.5rem;
}

@media screen and (min-width: 1024px) {
  .p-concept {
    width: 50%;
    padding-right: 3rem;
    border-right: solid 1px var(--color-gray);
    margin-bottom: 0;

    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

.p-concept__heading {
  margin-bottom: var(--size-20);
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-concept__heading {
    margin-bottom: var(--size-30);
  }
}

@media screen and (min-width: 1024px) {
  .p-concept__heading {
    width: 100%;
    margin-bottom: 5rem;
  }
}


.p-concept__subheading {
  margin-bottom: 3rem;
  line-height: var(--line-height-reset);
}


@media screen and (min-width: 768px) {
  .p-concept__subheading>img {
    display: block;
    width: 19em;
  }
}

.p-concept__subheading-en {
  letter-spacing: 0.02em;
}

.p-concept__subheading-ja {
  display: block;
  font-size: 0.25em;
  letter-spacing: 0.8em;
  padding: 0 1rem;
}

.p-concept__catchphrase {
  font-size: 1.5rem;
  margin-bottom: 1em;
  line-height: var(--line-height-relaxed);
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-concept__catchphrase {
    font-size: 2.25rem;
  }
}

.p-concept__text {
  font-size: 1.2rem;
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-reset);
}

.p-concept__text>span {
  width: 100%;
}

.p-concept__description {
  font-size: 1.15rem;
  line-height: var(--line-height-loose);
  margin-bottom: 1em;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-concept__description {
    font-size: var(--font-size-md);
  }
}

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

.p-concept__figure {
  margin-top: 3rem;
}

@media screen and (min-width: 768px) {
  .p-concept__figure.u-breakout-1-5 {
    margin-left: 0;
    margin-right: 0;
  }
}



@media screen and (min-width: 1024px) {
  .p-concept__figure {
    margin-top: 0;
    flex: 1;
  }

  .p-concept__figure .c-figcaption-note {
    padding-left: 0;
  }
}

.p-concept__image {}

@media screen and (min-width: 1024px) {
  .p-concept__image {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: 15%;
  }
}

/* 構法 */
.p-method {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

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

@media screen and (min-width: 1024px) {
  .p-method {
    width: 50%;
    padding-left: 3rem;
    gap: 0;
  }
}

.p-method__header {}

.p-method__title {
  font-size: 1.8rem;
}

@media screen and (min-width: 1024px) {
  .p-method__title {
    margin-bottom: 3.5rem;
  }
}

.p-method__title-image {
  display: block;
  max-width: 17.5em;
  margin-inline: auto;
  margin-bottom: 0.5em;
}

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

.p-method__lead {
  display: flex;
  align-items: center;
  gap: 1.2em;
  width: fit-content;
  margin-inline: auto;

  font-size: 1.3rem;
  line-height: 1.7;
}

@media screen and (min-width: 1024px) {
  .p-method__lead {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
  }
}

.p-method__lead-icon {
  display: block;
  /* width: 4.8em; */
  width: 5em;
  flex-shrink: 0;
}

.p-method__lead-text {
  display: block;
}

.p-method__body {}

.p-method__content {
  margin-top: 1.5rem;
}

.p-method__list {
  display: flex;
  padding: 3rem 1.5rem;

}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-method__list {
    padding: 6rem 3.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .p-method__list.u-breakout-2 {
    margin-left: 0;
    margin-right: 0;
  }
}

.p-method__item {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-method__item {
    gap: 1rem;
  }
}

.p-method__item--tsuchiya {
  padding-right: 1.5rem;
  border-right: solid 1px var(--color-black);
}

.p-method__item--sekisui {
  padding-left: 1.5rem;
}

.p-method__logo {
  width: 11.5rem;
  margin-inline: auto;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-method__logo {
    width: 23rem;
  }
}

.p-method__subtitle {
  /* font-size: var(--font-size-md); */
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-method__subtitle {
    font-size: var(--font-size-xl);
  }
}

.p-method__text {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  /* font-size: var(--font-size-md); */
  font-size: 1.2rem;
  font-feature-settings: "palt";
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-method__text {
    font-size: var(--font-size-xl);
  }
}

.p-method__text>span {
  display: inline-block;
  width: 100%;
}

.p-method__title-logo {
  display: inline-block;
  width: 17.5em;
  max-width: 100%;
}

@media screen and (min-width: 768px) and (max-width:1023px) {
  .p-method__title-logo {
    width: 24em;
  }
}

.p-method__figure {}

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

.p-method__note {
  font-size: 10px;
  line-height: var(--line-height-body);
  margin-top: 5rem;
}


.p-method-compare {
  --flex-item-side-space: 1.5rem;
  display: flex;
  padding: 2rem 1.8rem;
  background-color: var(--color-green-100);

  text-align: center;
}

@media screen and (min-width: 768px) {
  .p-method-compare {
    width: 31.5rem;
    margin-inline: auto;
  }

  .p-method-compare.u-breakout-1-5 {
    margin-left: 0;
    margin-right: 0;
    margin-inline: auto;
  }
}

@media screen and (min-width: 1024px) {
  .p-method-compare {
    width: 100%;
    padding: 2.5rem 2.5rem 2rem;
  }
}

.p-method-compare__item {
  width: 50%;
}

.p-method-compare__item--start {
  border-right: solid 1px #000;
  padding-right: var(--flex-item-side-space);
}

.p-method-compare__item--end {
  border-right: 0;
  padding-left: var(--flex-item-side-space);
}

.p-method-compare__title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  line-height: var(--line-height-reset);
}

@media screen and (min-width: 1024px) {
  .p-method-compare__title {
    font-size: 1.8rem;
  }
}

.p-method-compare__catch {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: var(--line-height-reset);
}

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

.p-method-compare__text {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 4.2em;
}

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

.p-sekisui-dj-container {
  margin-top: 10rem;
}

.p-sekisui-dj {
  padding: 5rem 2rem;
  margin-inline: -2rem;

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

@media screen and (min-width: 768px) {
  .p-sekisui-dj {
    padding: 7.5rem 4.5rem;
    margin-inline: 0;
  }
}

@media screen and (min-width: 1024px) {
  .p-sekisui-dj {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }
}

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

@media screen and (min-width: 1024px) {
  .p-sekisui-dj__header {
    gap: 5rem;
    width: 100%;
    margin-bottom: 2rem;
    padding: 0 1em;
  }
}

.p-sekisui-dj__title {
  font-size: var(--font-size-lg);
  text-align: center;
}

.p-sekisui-dj__title>span {
  font-size: 1.5em;
}

.p-sekisui-dj__title>span>small {
  font-size: 0.6em;
  display: inline-block;
  vertical-align: middle;
}

.p-sekisui-dj__lead {
  font-size: var(--font-size-md);
}

@media screen and (min-width: 1024px) {
  .p-sekisui-dj__list {
    width: calc(50% - 1.6rem);

  }
}

.p-sekisui-dj__list--start {}

.p-sekisui-dj__list--end {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media screen and (min-width: 1024px) {
  .p-sekisui-dj__list--end {
    gap: 1.5rem;
  }
}

.p-sekisui-dj__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-sekisui-dj__item+.p-sekisui-dj__item {
  margin-top: 1rem;
}

.p-sekisui-dj__subtitle {
  display: flex;
  gap: 0.7em;

  font-size: var(--font-size-md);
}

.p-sekisui-dj__subtitle::before {
  content: "";
  display: block;
  height: 1em;
  width: 1em;
  background-color: var(--color-blue);
  margin-top: 0.25em;
  flex-shrink: 0;
}

.p-sekisui-dj__caution {
  font-size: 1rem;
}

.p-sekisui-dj__caution::before {
  content: "※";
}

.p-sekisui-dj__sublead {
  font-size: var(--font-size-md);
}

/* -------------------------------------------------------------------------
  lineup
  ------------------------------------------------------------------------- */
.c-card-lineup {
  --title-img-height: 2.2rem;
  --col-gap: 2rem;
  --row-gap: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--col-gap) var(--row-gap);
}

@media screen and (min-width: 768px) {
  .c-card-lineup {
    --col-gap: 6rem;
    --row-gap: 2.5rem;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.c-card-lineup__header {
  position: relative;
  padding-top: var(--size-50);
}

@media screen and (min-width: 768px) {
  .c-card-lineup__header {
    width: 50%;
    /* padding-bottom: 3rem;
    padding-right: 6rem; */
    padding-bottom: 5.6rem;
    padding-right: 6rem;
  }
}

.c-card-lineup__icon {
  position: absolute;
  top: 0;
  right: -1.5rem;
  display: block;
  width: 16rem;
}

.c-card-lineup__title {
  margin-bottom: var(--size-25);
}

.c-card-lineup__title-img {
  display: block;
  height: 2.2rem;
  width: auto;
}

.c-card-lineup__title-img--sora {
  height: 2.5rem;
}

.c-card-lineup__title-img--rin {
  height: 2.4rem;

}

.c-card-lineup__lead {
  margin-bottom: var(--size-10);
  font-size: var(--font-size-md);
  line-height: var(--line-height-extra-loose);
}

.c-card-lineup__feature {
  margin-bottom: 0.5rem;
}

.c-card-lineup__lead {
  /* font-size: var(--font-size-md); */
  font-size: 1.2rem;
}

.c-card-lineup__facade {}

@media screen and (min-width: 768px) {
  .c-card-lineup__facade {
    position: relative;
    width: calc(50% - var(--row-gap));
  }
}

@media screen and (min-width: 768px) {
  .c-card-lineup__facade>img {
    width: 60rem;
    position: absolute;
    bottom: 0;
    left: -9.5rem;
  }
}

.c-card-lineup__interior {}

@media screen and (min-width: 768px) {
  .c-card-lineup__interior {
    width: calc((100% - var(--row-gap)) *0.5);
  }
}

.c-card-lineup__note {
  margin-top: 3rem;
  font-size: 10px;
  line-height: var(--line-height-body);
}



.c-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.c-tag__item {
  padding: 0.5rem;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-reset);
  font-feature-settings: "palt";
  background-color: var(--color-yellow);
}

.c-house-data {}

.c-card-lineup__data {
  line-height: 1;
}

.c-house-data__row {
  display: inline-block;
}

.c-house-data__term {
  display: inline;
  font-size: var(--font-size-xs);
}

.c-house-data__term::after {
  content: "／";
}

.c-house-data__desc {
  display: inline;
  font-size: var(--font-size-xs);
}

.c-floor-plan {
  position: relative;
  padding: 1rem;
}

@media screen and (min-width: 768px) {
  .c-floor-plan {
    width: calc((100% - var(--row-gap)) *0.5);
    display: flex;
    flex-direction: column;

  }
}

@media screen and (min-width: 1024px) {
  .c-floor-plan {}
}

.c-floor-plan__title {
  margin-bottom: var(--size-20);
  /* font-size: var(--font-size-md); */
  font-size: 1.2rem;
}

.c-floor-plan__title::before {
  content: "■";
}

.c-floor-plan__content {
  --gap: 1.5rem;
  display: flex;
  gap: var(--gap);
}

@media screen and (min-width: 1024px) {
  .c-floor-plan__content {
    flex: 1;
    align-items: center;
  }
}

.c-floor-plan__fig {
  width: calc((100% - var(--gap)) * 0.5);

}

.c-floor-plan__img {}

.c-floor-plan__button {
  display: block;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 1rem;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .c-floor-plan__button {
    margin-top: auto;
  }
}

.c-floor-plan__compass {
  position: absolute;
  bottom: 1.3rem;
  left: 1.5rem;

  display: flex;
  align-items: flex-end;
  height: 4.5rem;
  width: 2rem;
  pointer-events: none;

}

@media screen and (min-width: 768px) {
  .c-floor-plan__compass {
    width: 2.5rem;
  }

}

.p-lineup-detail {
  display: flex;
  flex-direction: column;
  gap: var(--size-20);
}

@media screen and (min-width: 768px) {
  .p-lineup-detail {
    --lineup-detail-gap: var(--row-gap);
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.p-lineup-detail__item {
  --gap: var(--size-15);
  display: flex;
  gap: var(--gap);
}

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

.p-lineup-detail__fig {
  width: calc((100% - var(--gap)) * 0.5);
}

.p-lineup-detail__img {}

.p-lineup-detail__content {
  width: calc((100% - var(--gap)) * 0.5);
}

.p-lineup-detail__title {
  /* font-size: var(--font-size-md); */
  font-size: 1.2rem;
  margin-bottom: 0.2em;
}

.p-lineup-detail__desc {
  /* font-size: var(--font-size-md); */
  font-size: 1.2rem;
}


.js-click-zoom {}

.js-dialog-open {
  font-size: var(--font-size-xs);
}

/* 平面図拡大 */
/* dialog本体のリセットとスタイル */
.c-floor-plan__dialog {
  padding: 0;
  border: none;
  background: transparent;
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;

  transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, opacity 0.2s ease;
  opacity: 0;
  /* 閉じている時は透明 */
}

.c-floor-plan__dialog[open] {
  opacity: 1;
}

@starting-style {

  /*@starting-styel→safari確認*/
  .c-floor-plan__dialog[open] {
    opacity: 0;
  }
}

/* dialogが開いている時の背景（黒い半透明） */
.c-floor-plan__dialog::backdrop {
  background-color: transparent;
  transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete, background-color 0.2s ease;
}

/* 開いている時の状態 */
.c-floor-plan__dialog[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 開き始めの初期状態 */
@starting-style {
  .c-floor-plan__dialog[open]::backdrop {
    background-color: transparent;
  }
}

/* モーダルの中身の白枠 */
.c-floor-plan__dialog-inner {
  position: relative;
  background: var(--color-white);
  padding: 5rem 2.5rem;
}

@media screen and (min-width: 1024px) {
  .c-floor-plan__dialog-inner {
    padding: 10rem 5rem;
  }

}

.c-floor-plan__dialog-content {}

@media screen and (min-width: 768px) {
  .c-floor-plan__dialog-content {
    display: flex;
    --gap: 3rem;
    gap: var(--gap);
  }
}

.c-floor-plan__dialog-content figure {
  margin-bottom: 3rem;
}

@media screen and (min-width: 768px) {
  .c-floor-plan__dialog-content figure {
    margin: 0;
  }
}

.c-floor-plan__dialog-content figure:last-child {
  margin-bottom: 0;
}


/* 閉じるボタン */
.c-floor-plan__dialog-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}

.c-floor-plan__dialog-compass {
  display: block;
  width: 3rem;
  margin-top: 0.5rem;
  margin-left: -1rem;
  margin-bottom: -3.5rem;
}

@media screen and (min-width: 1024px) {
  .c-floor-plan__dialog-compass {
    width: 4rem;
    margin-top: 4rem;
    margin-left: -2rem;
    margin-bottom: -7rem;
  }
}

/* 杜 */
.p-lineup__item--mori .c-card-lineup__facade>img {
  margin-right: -1.5rem;
  display: block;
  margin-left: auto;
}



/* -------------------------------------------------------------------------
  location
  ------------------------------------------------------------------------- */
.p-sec-location {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0 !important;
  height: calc(100vh - var(--cta-area-height) - var(--header-height));
}

.p-location {
  position: relative;
  height: 100%;
}

.p-location__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-location__bg.c-fade-overlay {
  --fade-height-top: 75%;
  --fade-color-top: var(--color-white);
  /* 開始地点 */
  --fade-start-top: 22%;

}

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

.p-location__video {
  display: block;
  width: 100%;
  height: auto;

  position: absolute;
  bottom: 0;
  left: 0;
}

.p-location__content {
  position: relative;
  z-index: 1;
  padding-top: var(--section-space-v);
  padding-bottom: var(--section-space-v);
}

.p-location__heading {
  margin-bottom: var(--size-50);
}

.p-location__address {
  margin-bottom: 1em;
  font-size: var(--font-size-4xl);
  letter-spacing: var(--letter-spacing-lg);
}

.p-location__text {
  /* font-size: var(--font-size-xl); */
  font-size: 1.6rem;
  line-height: var(--line-height-loose);
}



/*---------------------------------------------
周辺
/---------------------------------------------*/
figure:has(>.c-caption) {
  position: relative;
}

.c-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  padding: 0.4em;
  /* font-size: var(--font-size-md); */
  font-size: 1.2rem;
  line-height: var(--line-height-reset);
  background-color: var(--color-black);
  color: var(--color-white);
}

.p-around {
  min-height: auto !important;
}

.p-around__header {
  margin-bottom: var(--size-50);

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

.p-around__title {
  /* font-size: var(--font-size-3xl); */
  font-size: 2.1rem;
  letter-spacing: var(--letter-spacing-lg);
  line-height: var(--line-height-relaxed);
}

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

.p-around__list {
  --padding-v: 1.8rem;
  --space-left: 0;
  --space-right: 0;
  --gap-element: 1rem;
  --icon-size: 1.5rem;
}

@media screen and (min-width: 768px) {
  .p-around__list {
    --space-left: 1.5rem;
    --space-right: 1.5rem;
  }
}

.p-around__item {
  position: relative;
}

.p-around__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-black);

  width: calc(100% + 2rem);
  margin-left: -1rem;
}

@media screen and (min-width: 768px) {
  .p-around__item::before {
    width: 100%;
    margin-left: auto;
  }
}

.p-around__item:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-black);

  width: calc(100% + 2rem);
  margin-left: -1rem;
}

@media screen and (min-width: 768px) {
  .p-around__item:last-child::after {
    width: 100%;
    margin-left: auto;
  }
}

.p-around__head {}

.p-around__button {
  width: 100%;
  display: flex;
  align-items: center;
  /* 上下中央 */
  justify-content: space-between;
  gap: var(--gap-element);

  padding-top: var(--padding-v);
  padding-right: var(--space-right);
  padding-bottom: var(--padding-v);
  padding-left: var(--space-left);

  cursor: pointer;
}


.p-around__subtitle {
  flex: 1;
}



.p-around__subtitle-en {
  display: inline-block;
  /* font-size: var(--font-size-4xl); */
  font-size: 2.4rem;
  line-height: var(--line-height-reset);
  transform: translateY(0.1em);
}

.p-around__subtitle-ja {
  display: inline-block;
  margin-left: 2rem;
  /* font-size: var(--font-size-md); */
  font-size: 1.2rem;
  line-height: var(--line-height-reset);
  vertical-align: middle;
}

/* +,- アイコン */
.p-around__icon {
  position: relative;
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

.p-around__icon::before,
.p-around__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: currentColor;
  transition: transform 0.3s ease-out,
    opacity 0.3s ease-out;
}

/* 横の棒 */
.p-around__icon::before {
  width: 100%;
  height: 0.1rem;
}

/* 縦の棒 */
.p-around__icon::after {
  width: 0.1rem;
  height: 100%;
}

/* 開いている時のスタイル */
.p-around__button[aria-expanded="true"] .p-around__icon::after {
  /* 回転しながら消える */
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* （モダンなアコーディオンアニメーションの肝） */
.p-around__item-body {
  display: grid;
  grid-template-rows: 0fr;
  /* 閉じた状態：高さ0 */
  transition: grid-template-rows 0.15s ease-out,
    padding 0.15s ease-out;
  overflow: hidden;
}

.p-around__item-body[aria-hidden="false"] {
  grid-template-rows: 1fr;
  padding-top: var(--padding-v);
  padding-bottom: calc(var(--padding-v) * 2);
}

.p-around__item-body-inner {
  min-height: 0;
  min-width: 0;
  /* gridのバグ回避用 */
  display: flex;
  gap: var(--gap-element);
  margin-left: var(--space-left);
  margin-right: var(--space-right);

}

.p-around__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.p-around__content-subtitle {
  /* font-size: var(--font-size-xl); */
  font-size: 1.6rem;
  letter-spacing: var(--letter-spacing-lg);
}

.p-around__block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.p-around__subtext {
  font-size: 1.4rem;
}

.p-around__figure img {
  display: block;
  aspect-ratio: 7 / 4;
}

@media screen and (min-width: 768px) {
  .p-around__figure {
    margin-left: calc(var(--space-left) * -1);
    margin-right: calc(var(--space-right) * -1);
  }
}

.p-around__flex-images {
  --gap: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

@media screen and (min-width: 768px) {
  .p-around__flex-images {
    margin-left: calc(var(--space-left) * -1);
    margin-right: calc(var(--space-right) * -1);
  }
}




.p-around__flex-col {
  margin: 0;
  width: calc((100% - var(--gap)) * 0.5);
}

.p-around__flex-col-100 {
  width: 100%;
}


/* -------------------------------------------------------------------------
 googlemap
  ------------------------------------------------------------------------- */
.p-map {
  width: 100%;
  height: 150vw;
}

@media screen and (min-width: 768px) {
  .p-map {
    height: var(--content-screen-height);
  }
}

@media screen and (min-width: 1024px) {
  .p-map {
    height: 75vw;
  }
}

@media screen and (min-width: 1280px) {
  .p-map {
    height: 56.25vw;
    max-height: 720px;
  }
}

.p-map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------
 p-present
  ------------------------------------------------------------------------- */
.c-inline-notes {
  font-size: 10px;
  line-height: var(--line-height-snug);
}

.c-inline-notes__item {

  display: inline-block;
}

.c-inline-notes__item::before {
  content: "※";
}

.p-present {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

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

.p-present__heading {}

.p-present__summary {}

.p-present__summary-image {
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
  .p-present__summary-image {
    width: 47rem;
    margin-inline: auto;
    margin-bottom: 2rem;
  }
}

.p-present__summary-info {}

.p-present__summary-text {}

.p-present__summary-label {
  display: block;
  margin-bottom: 0.6em;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-reset);
}

.p-present__summary-date {
  display: block;
  width: 20.5em;
  margin-inline: auto;
  margin-bottom: 1.2em;
}

.p-present__summary-time {
  margin-bottom: 1.2em;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-reset);
}

.p-present__summary-grand {
  padding: 1rem 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-reset);
  border-top: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
}

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

.p-present__detail {
  position: relative;
  padding-top: 1.5rem;
}

.p-present__detail-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10em;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-reset);
  text-align: center;
  padding: 0.35em 0;
}

.p-present__detail-body {
  padding: 2rem;
  padding-top: 4.5rem;
}

@media screen and (min-width: 768px) {
  .p-present__detail-body {
    padding: 3rem;
    padding-top: 6.5rem;
  }
}

.p-present__detail-lead {
  font-size: var(--font-size-2xl);
  margin-bottom: 0.7em;
}

.p-present__brand {
  width: 12rem;
  margin-inline: auto;
  margin-bottom: 3rem;
}

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

.p-present__gallery {
  position: relative;
  margin-bottom: 3rem;
}

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

.p-present__gallery-item-main {}

.p-present__gallery-item-sub {
  position: absolute;
  bottom: -1rem;
  left: -1rem;
  width: 50%;
}

@media screen and (min-width: 768px) {
  .p-present__gallery-item-sub {
    bottom: -2.2rem;
    left: -2.2rem;
  }
}

.p-contact__heading {
  margin-bottom: var(--size-50);
}

.p-present__note {
  font-size: 10px;
  color: var(--color-white);
  margin-top: 5px;
  line-height: var(--line-height-reset);
}

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

.p-address {
  display: flex;
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
  .p-address {
    margin-bottom: 2.5rem;
    max-width: 47rem;
    margin-inline: auto;
    font-size: 1.8rem;
  }
}

.p-address__term {
  display: inline-block;
  margin-right: 0.5em;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}

.p-address__text {
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}

.p-announce {
  margin-bottom: 3rem;
  padding: 0.6em;
  font-size: 1.6rem;
  text-align: center;
  line-height: var(--line-height-reset);
  color: var(--color-black);
  background-color: var(--color-white);
}

@media screen and (min-width: 768px) {
  .p-announce {
    margin-bottom: 6rem;
    max-width: 47rem;
    margin-inline: auto;
  }
}

/* -------------------------------------------------------------------------
  Utilities
  ------------------------------------------------------------------------- */
.bg-komorebi {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (max-width:767px) {
  .bg-komorebi {
    background-image: url(../../images/frontier-village-tonden/bg-komorebi_spv2.jpg);
  }
}

@media screen and (min-width:768px) and (max-width:1023px) {
  .bg-komorebi {
    background-image: url(../../images/frontier-village-tonden/bg-komorebi_tabv2.jpg);
  }
}

@media screen and (min-width:1024px) and (max-width: 1919px) {
  .bg-komorebi {
    background-image: url(../../images/frontier-village-tonden/bg-komorebi_pcv2.jpg);
  }
}

@media screen and (min-width:1920px) {
  .bg-komorebi {
    background-image: url(../../images/frontier-village-tonden/bg-komorebi_pc-lgv2.jpg);
  }
}

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

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

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

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

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

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

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

.bg-white-tp-8 {
  background-color: rgba(255, 255, 255, 0.8);
}

.bg-white-tp-9 {
  background-color: rgba(255, 255, 255, 0.9);
}

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

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

.color-black {
  color: var(--color-black);
}

.u-box-shadow {
  box-shadow: var(--shadow);
}

.u-text-shadow-black {
  text-shadow: var(--shadow);
}

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

.u-text-palt {
  font-feature-settings: "palt";
}

@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-ib {
  display: inline-block;
}

.u-breakout-1 {
  margin-right: -1rem;
  margin-left: -1rem;
}

.u-breakout-1-5 {
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}

.u-breakout-2 {
  margin-right: -2rem;
  margin-left: -2rem;
}

@media screen and (min-width: 768px) {
  .u-breakout-2 {
    margin-right: -2.5rem;
    margin-left: -2.5rem;
  }
}


.u-translate-en-font {
  display: block;
  transform: translateY(0.1em);
}




/* ==========================================================================
    リキャプチャ
  ========================================================================== */
.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;
}

.pc768,
.pc1024,
.pc1024-ib {
  display: none;
}

@media screen and (min-width: 768px) {
  .pc768 {
    display: block;
  }
}

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

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

  .sp1024 {
    display: none;
  }
}