@charset "UTF-8";

/* ////////////////////////////////////////////////////////////////////
///// 全ページ共通CSS ///////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////// */
/* ==================================================
FONT SETTING
================================================== */
@font-face {
  font-family: "Aspekta Variable";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url("/common/font/AspektaVF.woff2") format("woff2");
}

html {
  font-size: 2.97vw;
}
@media screen and (min-width: 769px) {
  html {
    font-size: 2.47vw;
  }
}
@media screen and (min-width: 961px) {
  html {
    font-size: 1.35vw;
  }
}
@media screen and (min-width: 1281px) {
  html {
    font-size: 17px;
  }
}

body {
  /*ゴシック系*/
  font-family: "Aspekta Variable", "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  /*明朝系
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;*/
  letter-spacing: 0.05em;
  background: var(--bgClr);
  line-height: 1.7;
  -ms-font-feature-settings: "normal";
  font-feature-settings: "palt";
  overflow-x: hidden;
}
.enSerif {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.enGothic {
  font-family: "Aspekta Variable", "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  /* font-weight: 200; */
  font-style: normal;
}
.enGothicMono {
  font-family: "B612 Mono", monospace;
  font-weight: 400;
  font-optical-sizing: auto;
  /* font-weight: 200; */
  font-style: normal;
}

.jpSerif {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.jpSerif.fwBold {
  font-weight: 700;
}
.pagerTxt,
.mbTitle {
  line-height: 0.9;
  letter-spacing: -0.05em;
}
:root {
  --STxt: 1.719vw;
  --MTxt: 2.59vw;
  --LTxt: 2.65vw;
  --STitle: 3.75vw;
  --MTitle: 4.75vw;
  --hdrTtl: 6.45vw;
}
@media screen and (min-width: 769px) {
  :root {
    --STxt: 1.563vw;
    --MTxt: 1.875vw;
    --LTxt: 2.5vw;
    --STitle: 3.125vw;
    --MTitle: 3.75vw;
    --hdrTtl: 3.75vw;
  }
}
@media screen and (min-width: 961px) {
  :root {
    --STxt: 0.859vw;
    --MTxt: 0.938vw;
    --LTxt: 1.25vw;
    --STitle: 1.875vw;
    --MTitle: 2.75vw;
    --hdrTtl: 3.75vw;
  }
}
.STxt {
  font-size: clamp(5.5px, var(--STxt), 11px);
}
.MTxt {
  font-size: clamp(10px, var(--MTxt), 12px);
}
.LTxt {
  font-size: clamp(8px, var(--LTxt), 16px);
}
.STitle {
  font-size: clamp(12px, var(--STitle), 24px);
}
.MTitle {
  font-size: clamp(20px, var(--MTitle), 44px);
}
.hdrTtl {
  font-size: clamp(12px, var(--hdrTtl), 46px);
  letter-spacing: 0;
  line-height: 1.25;
}
.fwBold {
  font-weight: 600;
}
.fs-15 {
  font-size: clamp(7.5px, var(--fs-15), 15px);
}
.fs-14 {
  font-size: clamp(7px, var(--fs-14), 14px);
}
@media screen and (min-width: 961px) {
  .pcFBig {
    font-size: 120%;
  }
}

/* ==================================================
font line height
================================================== */
.js-setLoad .spinner {
  width: 84vw;
  height: 10vw;
  max-width: 420px;
  max-height: 50px;
}
/* ==================================================
color
================================================== */

:root {
  --mainClr: #000;
  --bgClr: #e9e8dd;
  --clrwh: #fff;
}
body {
  color: var(--mainClr);
}
.mainColor {
  color: var(--mainClr);
}
.titColor {
  color: var(--mainClr);
}
.weakColor {
  color: var(--mainClr);
}
.backColor {
  color: var(--mainClr);
}
.attention {
  color: var(--mainClr);
}
/* ==================================================
link
 ================================================== */

a:link {
  color: var(--mainClr);
  text-decoration: underline;
}
a:visited {
  color: inherit;
  text-decoration: underline;
}
a:active {
  color: var(--mainClr);
  text-decoration: underline;
}
.weakColor a:link {
  color: var(--mainClr);
  text-decoration: underline;
}
.weakColor a:visited {
  color: var(--mainClr);
  text-decoration: underline;
}
.weakColor a:active {
  color: var(--mainClr);
  text-decoration: underline;
}
.backColor a:link {
  color: var(--mainClr);
  text-decoration: underline;
}
.backColor a:visited {
  color: var(--mainClr);
  text-decoration: underline;
}
.backColor a:active {
  color: var(--mainClr);
  text-decoration: underline;
}
.swiper-slide a,
.FMANaviList a,
.mainMenuList a,
.btnCenter a {
  text-decoration: none;
}
.NewsLists .NewsList a {
  text-decoration: none;
}
.NewsLists .NewsList a .NewsLStxtObj {
  text-decoration: underline;
}
/* ==================================================
common
================================================== */
.new::after {
  color: #d83232;
  font-family: "Work Sans", sans-serif;
  padding: 0 0 0 1rem;
}
.stckrCircle {
  background: #d4510f;
  color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 100%;
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bdrCnts {
  border-bottom: 1px solid #aeaeae;
}

svg {
  fill: var(--mainClr);
}

input {
  -webkit-appearance: none;
}

.scrollArrow span {
  width: 1px;
}

.js-appSlidein {
  transition:
    transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 1.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.js-nowPage {
  position: relative;
}

.js-nowPage::after {
  content: "";
  display: none;
  background: #000;
  width: 70%;
  height: 1px;
  position: absolute;
  bottom: 5px;
  left: 8vw;
}

@media screen and (min-width: 769px) {
  .js-nowPage::after {
    left: 4vw;
  }
}

@media screen and (min-width: 961px) {
  .js-nowPage::after {
    bottom: -5px;
    left: 50%;
    width: 80%;
    transform: translate(-50%, 0);
  }
}

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

/* ==================================================
BtnSet
================================================== */
.btnObj {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 3.6em;
  box-sizing: border-box;
  transition: 0.8s all ease-in;
  line-height: 1;
  overflow: hidden;
}

.btnObj svg {
  height: 2em;
  width: 2em;
  margin: 0 10px 0 0;
}

.btnObj a {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

.btnObj.mainBtn {
  display: flex;
  align-items: flex-start;
  position: relative;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 50px;
}
.btnObj.mainBtn a {
  padding: 0.8em 2em;
  text-decoration: none;
  line-height: 1;
}
.btnObj.mainBtn a .icon {
  display: block;
  width: 1em;
  position: relative;
  height: 1em;
  padding: 0 0 0 2em;
}
.btnObj.mainBtn a .icon::before,
.btnObj.mainBtn a .icon::after {
  content: "";
  position: absolute;
  width: 0.8em;
  height: 0.8em;
  /* background: var(--mainClr); */
}
.btnObj.mainBtn a .icon::before {
  right: 0;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: rotate(-90deg);
  top: 0;
  right: 0;
}
.btnObj.mainBtn a .icon::after {
  width: 1em;
  height: 1px;
  top: calc(50% - 1.5px);
  right: -1px;
  background: var(--mainClr);
  transform: rotate(-45deg);
}

/* ==================================================
js-setLoad
================================================== */

/* ==================================================
header（Figma：各ページの「HEADER」と、PC_TOP 2848:204 のメニューパネル）
・左上に日時、右上にハンバーガーボタン。中央のロゴは Figma で非表示のため置かない
・メニューパネル（.mainMenuSet）：PC は右上から 52px の位置に 301×701。
  画面が低いときは高さを縮めて中をスクロールする
・パネルの背景は液体ガラス（common/css/layout.css の .menuLiquidLayer）。
  位置・サイズは JS（common/js/setting.js の menuLiquidSync）が .mainMenuSet に合わせる
・メニューの文字：Instrument Serif 24px・行送り 160%・先頭に「-」
================================================== */
#hdrSct {
  height: 10vw;
  position: fixed;
  z-index: 1020;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 日時（TOP では index/css/style.css がセクションに合わせて白・黒を切り替える） */
#hdrSct .nowdate {
  position: absolute;
  left: 16px;
  top: 28px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #262222;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings:
    "tnum" 1,
    "palt" 0;
}

#hdrSct .menuArea {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 120px;
  height: 100%;
  position: absolute;
  right: 0;
}

#hdrSct .menuArea .mainMenuSet {
  position: fixed;
  top: 48px;
  right: 48px;
  width: min(301px, calc(100vw - 64px));
  height: min(701px, calc(100svh - 96px));
  padding: 62px 0 40px 41px;
  opacity: 0;
  z-index: -1;
  text-align: left;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  pointer-events: none;
  /* 閉じる時：短くフェードアウトし、終わってから奥（z-index:-1）へ下げる */
  transform: scale(0.96);
  transform-origin: top right;
  transition:
    opacity 0.2s ease,
    transform 0.3s ease,
    z-index 0s linear 0.2s;
}
/* パネル内のロゴ（トップページへのリンク） */
#hdrSct .menuArea .mainMenuSet .sublogo {
  flex: none;
  display: block;
  width: 140px;
  line-height: 0;
}
#hdrSct .menuArea .mainMenuSet .sublogo svg {
  display: block;
  width: 100%;
  height: auto;
  fill: #262222;
}
/* 開く時：液体の背景（common/css/layout.css の .menuLiquidLayer--goo）が広がり始めてから、
   少し遅れて中身をフェード＋わずかに拡大させて表示する */
.js-spMenuOn #hdrSct .menuArea .mainMenuSet {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.35s ease 0.12s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
    z-index 0s linear 0s;
  z-index: 10;
}
.js-spMenuOn #hdrSct .menuArea .mainMenuSet .sublogo {
  pointer-events: auto;
}

#hdrSct .menuArea .mainMenuSet .mainMenuLists {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin-top: 40px; /* ロゴの下端から 1 項目目の行の上端まで（Figma） */
  padding: 0 16px 0 1px;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;
  pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}
.js-spMenuOn #hdrSct .menuArea .mainMenuSet .mainMenuLists {
  pointer-events: auto;
}
#hdrSct .menuArea .mainMenuSet .mainMenuLists::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}
#hdrSct .menuArea .mainMenuSet .mainMenuLists::-webkit-scrollbar-track {
  background: transparent;
}
#hdrSct .menuArea .mainMenuSet .mainMenuLists::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

#hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList {
  margin: 0;
  text-align: left;
}
#hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList a {
  display: block;
  color: #000;
  text-decoration: none;
}
#hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList .txtObj {
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: nowrap;
}
#hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList .txtObj::before {
  content: "-   "; /* Figma の「-   News」と同じく、ハイフン＋半角スペース 3 つ */
  white-space: pre;
}
@media (hover: hover) {
  #hdrSct .menuArea .mainMenuSet .mainMenuLists .mainMenuList a:hover,
  #hdrSct .menuArea .mainMenuSet .sublogo:hover {
    opacity: 0.6;
  }
}

#hdrSct .menuArea .js-menuHmbrgr {
  margin: 10px 15px 7.5px 0;
  position: relative;
  right: 0;
  z-index: 100;
}

@media screen and (min-width: 769px) {
  #hdrSct {
    height: min(7.5vw, 80px);
    align-items: center;
  }
  #hdrSct .nowdate {
    left: 32px;
    top: 34px;
  }
  /* ボタンは右上から：右 17px・上 13px の 50×50（Figma のガラスの丸） */
  #hdrSct .menuArea {
    top: 0;
    height: auto;
    align-items: flex-start;
  }
  #hdrSct .menuArea .js-menuHmbrgr {
    margin: 13px 17px 0 0;
  }
  #hdrSct .menuArea .mainMenuSet {
    top: 52px;
    right: 52px;
    width: 301px;
    height: min(701px, calc(100svh - 104px));
  }
}

/* ==================================================
humberger-menu animation
================================================== */
.js-menuHmbrgr {
  width: 48px;
  height: 48px;
}

.js-menuTrggr {
  position: relative;
  width: 100%;
  height: 100%;
}

.js-menuTrggr,
.js-menuTrggr span {
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
}
.js-menuTrggr {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.js-menuTrggr span {
  position: absolute;
  left: 0;
  right: 0;
  width: 20px;
  height: 1px;
  background: #262222;
  margin: auto;
}
.js-hdr_ch .js-menuTrggr span {
  transition: var(--speed-slow);
  background: var(--clr-def);
}

.js-menuTrggr span:nth-of-type(1) {
  top: calc(50% - 7px);
}

.js-menuTrggr span:nth-of-type(2) {
  top: calc(50% - 1px);
}

.js-menuTrggr span:nth-of-type(3) {
  bottom: calc(50% - 6px);
}

.js-menuTrggr span:nth-of-type(1) {
  animation: menu-bar01 0.75s forwards;
}

@keyframes menu-bar01 {
  0% {
    transform: translateY(6px) rotate(45deg);
  }

  50% {
    transform: translateY(-6px) rotate(0);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

.js-menuTrggr span:nth-of-type(2) {
  transition: all 0.25s 0.25s;
  opacity: 1;
}

.js-menuTrggr span:nth-of-type(3) {
  animation: menu-bar02 0.75s forwards;
}

@keyframes menu-bar02 {
  0% {
    transform: translateY(-6px) rotate(-45deg);
  }

  50% {
    transform: translateY(6px) rotate(0);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

.js-spMenuOn .js-menuTrggr span:nth-of-type(1) {
  animation: active-menu-bar01 0.75s forwards;
}

@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-7px) rotate(0);
  }

  100% {
    transform: translateY(5px) rotate(45deg);
  }
}

.js-spMenuOn .js-menuTrggr span:nth-of-type(2) {
  opacity: 0;
}

.js-spMenuOn .js-menuTrggr span:nth-of-type(3) {
  animation: active-menu-bar03 0.75s forwards;
}

@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(6px) rotate(0);
  }

  100% {
    transform: translateY(-6px) rotate(-45deg);
  }
}

@media screen and (min-width: 769px) {
  /* Figma：50×50 のガラスの丸に、幅 20px の線を 5px 間隔で 3 本 */
  .js-menuHmbrgr {
    width: 50px;
    height: 50px;
  }

  .js-menuTrggr span {
    height: 1px;
  }

  .js-menuTrggr span:nth-of-type(1) {
    top: calc(50% - 6px);
  }

  .js-menuTrggr span:nth-of-type(2) {
    top: calc(50% - 1px);
  }

  .js-menuTrggr span:nth-of-type(3) {
    bottom: calc(50% - 5px);
  }

  .js-menuTrggr span:nth-of-type(1) {
    animation: menu-bar01 0.75s forwards;
  }

  @keyframes menu-bar01 {
    0% {
      transform: translateY(5px) rotate(45deg);
    }

    50% {
      transform: translateY(0px) rotate(0);
    }

    100% {
      transform: translateY(0) rotate(0);
    }
  }

  .js-menuTrggr span:nth-of-type(3) {
    animation: menu-bar02 0.75s forwards;
  }

  @keyframes menu-bar02 {
    0% {
      transform: translateY(-5px) rotate(-45deg);
    }

    50% {
      transform: translateY(0px) rotate(0);
    }

    100% {
      transform: translateY(0) rotate(0);
    }
  }

  .js-spMenuOn .js-menuTrggr span:nth-of-type(1) {
    animation: active-menu-bar01 0.75s forwards;
  }

  @keyframes active-menu-bar01 {
    0% {
      transform: translateY(0) rotate(0);
    }

    50% {
      transform: translateY(0px) rotate(0);
    }

    100% {
      transform: translateY(5px) rotate(45deg);
    }
  }

  .js-spMenuOn .js-menuTrggr span:nth-of-type(3) {
    animation: active-menu-bar03 0.75s forwards;
  }

  @keyframes active-menu-bar03 {
    0% {
      transform: translateY(0) rotate(0);
    }

    50% {
      transform: translateY(0px) rotate(0);
    }

    100% {
      transform: translateY(-5px) rotate(-45deg);
    }
  }
}

/* ==================================================
footer（Figma「ftr」：1280×832）
・--fd：Figma の px 値に掛けて使う
  PC（961px〜）… 1280px 基準の 1px（画面幅に合わせて伸縮）
  SP（〜960px）… 375px 基準の 1px（最大 1.4px）。SP 用のデザインは無いため独自に縦積み
・PC：本文の上端を画面の高さの 368/832、ロゴの下端を 91/832 の位置に置く
・行送り（1.29 倍）と空行の高さ（1.22em）は、Figma の書き出し画像と文字の位置が揃うよう実測した値
================================================== */

#FtrSct {
  --fd: min(calc(100vw / 375), 1.4px);
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  align-items: center;
  min-height: 100lvh;
  padding: calc(120 * var(--fd)) calc(16 * var(--fd)) calc(48 * var(--fd));
  background: #d9d9d9;
  color: #000;
  letter-spacing: 0;
  text-align: center;
}
#FtrSct .ftrInner {
  margin: auto 0;
  line-height: 1.29;
}
#FtrSct .ftrInner p {
  line-height: inherit; /* lib.css の p { line-height: 1.5 } を打ち消す */
}
#FtrSct .cpContact {
  font-size: calc(32 * var(--fd));
  margin-bottom: 1.22em; /* Figma では「Contact Us」の下に空行が 1 行ある */
}
#FtrSct .cpContact a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  #FtrSct .cpContact a:hover {
    opacity: 0.6;
  }
}
#FtrSct .cpInfo {
  margin: 0;
}
#FtrSct .cpInfo .cpSet {
  display: flex;
  flex-flow: column;
  align-items: center;
}
#FtrSct .cpInfo .cpSet + .cpSet {
  margin-top: calc(8 * var(--fd));
}
#FtrSct .cpInfo .cpTtl {
  font-size: 10px;
}
#FtrSct .cpInfo .cpTxt,
#FtrSct .nameObj {
  margin: 0;
  font-size: calc(16 * var(--fd));
  text-wrap: balance;
}
#FtrSct .nameObj {
  margin-top: calc(8 * var(--fd));
}
#FtrSct .ftrLogo {
  flex: none;
  width: calc(102.281 * var(--fd));
  margin-top: calc(40 * var(--fd));
  line-height: 0;
}
#FtrSct .ftrLogo svg {
  display: block;
  width: 100%;
  height: auto;
  fill: #262222;
}
/* スマホ（768px 以下）：上下の余白を以前の半分に（2026-10-19 ユーザー指定）。
   以前は画面の高さいっぱい（100lvh）で、375×812 では文字の上 312・文字とロゴの間 約 230・ロゴの下 48。
   高さを「画面の半分＋中身（文字＋ロゴ 約 221）の半分」にし、上下の余白も半分にして、余白の合計がおおよそ半分になるようにした */
@media screen and (max-width: 768px) {
  #FtrSct {
    min-height: calc(50lvh + 110 * var(--fd));
    padding-top: calc(60 * var(--fd));
    padding-bottom: calc(24 * var(--fd));
  }
}
@media screen and (min-width: 961px) {
  #FtrSct {
    --fd: calc(100vw / 1280);
    padding: calc(368 / 832 * 100lvh) 0 calc(91 / 832 * 100lvh);
  }
  #FtrSct .ftrInner {
    margin: 0;
  }
  #FtrSct .cpContact {
    font-size: calc(36 * var(--fd));
  }
  #FtrSct .cpInfo .cpSet {
    flex-flow: row;
    justify-content: center;
    align-items: baseline;
  }
  #FtrSct .cpInfo .cpSet + .cpSet,
  #FtrSct .nameObj {
    margin-top: 0;
  }
  #FtrSct .cpInfo .cpTtl {
    margin-right: 0.28em; /* Figma の「Our Service : 」末尾の半角スペース分 */
    font-size: max(8px, calc(10 * var(--fd)));
  }
  #FtrSct .cpInfo .cpTxt,
  #FtrSct .nameObj {
    font-size: calc(24 * var(--fd));
  }
  #FtrSct .ftrLogo {
    margin-top: auto;
  }
}

/* ==================================================
popupArea
================================================== */
body.js-modalOn {
  overflow: hidden;
}
body.js-modalOn::before {
  content: "";
}
.popupWrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100svh;
  z-index: 100;
  opacity: 1;
  margin: 0;
  /* background: rgba(255, 255, 255, 0.8); */
}
.popupWrap::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--popup_bg);
  opacity: 1;
}

.popupWrap.js-popupOn {
  z-index: 1000000;
  opacity: 1;
  display: block;
  max-width: 600px;
}
.popupBlk {
  position: fixed;
  top: 50%;
  left: 0;
  width: min(90%, 800px);
  max-height: 90svh;
  z-index: 100;
  transform: translate(0, -50%);
  right: 0;
  margin: 0 auto;
  overflow-y: scroll;
  border-top: 1em solid #fff;
  border-bottom: 1em solid #fff;
  padding: 0 1em;
  background: #fff;
}
.popupWrap .popupSet {
  right: 0;
  margin: 0 auto;
  width: 100%;
  /* overflow-y: scroll; */
  height: 100%;
  background: #fff;
  padding: 4em 0;
  text-align: left;
}

.js-btnClose {
  position: fixed;
  top: 8px;
  right: 10px;
  width: 25px;
  height: 25px;
  background: none;
  cursor: pointer;
  left: auto;
  padding-top: 0;
  position: fixed;
}
.js-btnClose::before,
.js-btnClose::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--mainClr);
  left: 0;
  top: 50%;
  transform: rotate(45deg) translate(0, -50%);
}
.js-btnClose::after {
  transform: rotate(-45deg) translate(0, -50%);
}

.popupSet .txtObj {
}
.popupSet .popObj {
  display: block;
}
.popupSet .popObj + .popObj {
  margin: 2.5% auto 0;
}

@media screen and (min-width: 961px) {
  .popupWrap.js-popupOn {
    max-width: 1000px;
  }
  .popupWrap {
  }
  .popupBlk {
    /* padding: 0 0 0 1em; */
  }
  .popupWrap .popupSet {
    margin: 0 auto;
    overflow: auto;
    padding: 0;
  }
  .js-btnClose {
    top: 12px;
    right: 25px;
  }
}

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

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

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

/* レイアウト確認用のグリッド（ローカルのみ。common/inc/loading.php）
   ON/OFF と表示する列数（5・3・2・1、複数可）は左下のパネルか Shift+G で切り替える（common/js/gridDebug.js）。
   列数ごとのレイヤーを重ね、.styleGuide の show-5 などで表示するレイヤーを決める。is-off で全体を隠す */
.styleGuide {
  position: fixed;
  width: 100vw;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 5vw 0 2.5vw;
  display: flex;
  z-index: 10000;
  pointer-events: none; /* 重ねて表示するだけで、下のリンクやボタンは押せるようにする */
}
.styleGuide.is-off {
  display: none;
}
/* 列の色（"R, G, B"）。重ねたときに見分けられるよう列数ごとに変える。パネルの数字も同じ色 */
.styleGuide .guide-logo {
  --gdColor: 255, 0, 0;
}
.styleGuide .is-col5,
.gridDebugPanel .is-col5 {
  --gdColor: 0, 200, 0;
}
.styleGuide .is-col3,
.gridDebugPanel .is-col3 {
  --gdColor: 0, 120, 255;
}
.styleGuide .is-col2,
.gridDebugPanel .is-col2 {
  --gdColor: 255, 0, 200;
}
.styleGuide .is-col1,
.gridDebugPanel .is-col1 {
  --gdColor: 255, 140, 0;
}
/* 塗りは薄く、左右の端に線を入れる（重ねても境界がわかるように） */
.styleGuide .guide-logo,
.styleGuide .guideSet span {
  height: 100%;
  background: rgba(var(--gdColor), 0.12);
  box-shadow:
    inset 1px 0 rgba(var(--gdColor), 0.6),
    inset -1px 0 rgba(var(--gdColor), 0.6);
}
.styleGuide .guide-logo {
  width: 23.59vw;
}
/* コンテンツエリア：ロゴ列の右端からブラウザ幅の 2.5% あけ、右の余白（.styleGuide の padding-right）までを左から列数で等分する */
.styleGuide .guideLayers {
  position: relative;
  flex: 1;
  height: 100%;
  margin-left: 2.5vw;
}
.styleGuide .guideSet {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  gap: 3.75vw; /* 48px（TOP は全列数で同じ） */
}
.styleGuide.show-5 .guideSet.is-col5,
.styleGuide.show-3 .guideSet.is-col3,
.styleGuide.show-2 .guideSet.is-col2,
.styleGuide.show-1 .guideSet.is-col1 {
  display: flex;
}
.styleGuide .guideSet span {
  flex: 1;
  display: block;
}

/* 下層（TOP 以外。loading.php で is-lower を付ける）
   ロゴ列は Figma のグリッドスタイル「coogee_blk_PC」の 224px、右の余白 32px
   （上の指定は TOP 用。ロゴ列は PC_TOP フレームのグリッドの 302px、右の余白 64px） */
.styleGuide.is-lower {
  padding-right: 2.5vw; /* 32px */
}
.styleGuide.is-lower .guide-logo {
  width: 17.5vw; /* 224px */
}
.styleGuide.is-lower .guideSet.is-col5 {
  gap: 1.25vw; /* 16px（3列・2列は共通の 48px） */
}

/* グリッドの操作パネル（左下。ローカルのみ）。ページの文字や色の影響を受けないよう、ここで全部指定する */
.gridDebugPanel {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font: 11px/1 Menlo, Consolas, monospace;
  letter-spacing: 0;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.gridDebugPanel:hover {
  opacity: 1;
}
.gridDebugPanel button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.gridDebugPanel .gdToggle b {
  font-weight: 700;
  color: #6f6;
}
.gridDebugPanel.is-off .gdToggle b {
  color: #f66;
}
.gridDebugPanel label {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  color: rgb(var(--gdColor));
  cursor: pointer;
}
.gridDebugPanel.is-off label {
  opacity: 0.4;
}
.gridDebugPanel input {
  -webkit-appearance: auto; /* base.css の input { -webkit-appearance: none } を戻す */
  appearance: auto;
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: rgb(var(--gdColor));
  cursor: pointer;
}
.gridDebugPanel .gdOpen {
  display: none;
}
.gridDebugPanel.is-fold > * {
  display: none;
}
.gridDebugPanel.is-fold .gdOpen {
  display: block;
}