/* ==========================================
   site.css
   ※ tokens / core / layout / unit の上に積む
   ※ 必要なブロックだけ残してOK
========================================== */

/* ------------------------------------------
   1) Brand / Colors / Border
   - キーカラーや文字色の微調整
------------------------------------------ */
:root{
  /* キー/サブカラー */
  --colr-key: #009FDE;        /* 例：ブランド基準色 */
  --colr-sub1: #16A7C1;
  --colr-sub2: #5D95EF;
  --colr-sub3: #F28495;

  /* 文字色（必要ならトーン変更） */
  --colr-text-base: #111;     /* 本文の既定色をやや濃く */
  /* --colr-text-thin: #2d2d2d;
  --colr-text-weak: #616161; */

/* 蛍光色（必要に応じて上書き） */
  --mark-color: color-mix(in srgb, var(--colr-key) 30%, transparent);


  /* section.bg） */
  --colr-bg-item: #F6F3F0; /* */
  --colr-bg-sub: #E2EBEF;

  /* 枠線（微調整） */
  /* --colr-border: #e0e3e7; */

  /* ボタン影の濃さ（0–1） */
  /* --btn-shadow-alpha: .18; */
}

/* ------------------------------------------
   2) Typography / Headings
   - 見出しフォントの差し替えや字間
------------------------------------------ */
h1, h2{
  font-family: var(--font-head);
  font-synthesis-weight: none;
}
h1{ letter-spacing:.02em; }   /* 細字補正 */
h2{ letter-spacing:.01em; }

/* h2 デフォルト（unit.css はセンター＋ライン）
   → サイト事情で「左バー」にしたい場合の上書き例 */
/*
h2{
  text-align:left;
  padding-block-end:0;
  padding-inline-start:1.2em;
  border-inline-start:.4rem solid var(--colr-key);
}
h2::after{ content:none; }
*/

/* ------------------------------------------
   3) Container / Column tuning
   - 列幅やストレッチ余白の調整
------------------------------------------ */
/* .block.strch の左右余白を案件で微調整したい場合 */
/* :root{ --side-pad: 2.8rem; } */

/* 固定幅（センタリング）の調整 */
/* :root{
  --container: 110rem;   --container-tb: 80rem; --container-sp: 54rem;
} */

/* 列幅（自動ガター算出の基礎値） */
/* :root{
  --colw2: 53rem;  --colw3: 34rem;  --colw4: 26rem;
} */

/* .block.full / .block.strch 時に使う固定ガターを変更したい場合 */
/* :root{
  --gap2: 3.6rem; --gap3: 3.2rem; --gap4: 3rem;
} */

/* ------------------------------------------
   4) Header / Pagehead
------------------------------------------ */
/* ロゴ幅（マーク）・名称表示幅の調整 */
/*header .logo .mark{ width: 7.2rem; }   既定: 8rem → サイトで調整 */
header .logo{
  width: auto;
}
/* メニューアイコンの見た目を暗背景用に反転したい等の例 */
/*
header .menu{
  filter: invert(1) saturate(0);
}
*/

/* ページヘッダ（ローカルヘッダ）背景差し替え */
section.pagehead{
  /* 背景画像を敷く例（必要時のみ） */
  /* */background:
      /*linear-gradient(to bottom, color-mix(in srgb, var(--colr-key) 85%, transparent), var(--colr-key)),*/
       url("../img/pagehead.jpg") center/cover no-repeat; 
       padding: 0;
  /* min-block-size: 28rem; */   /* 高さを増やしたい場合 */
}

/* ------------------------------------------
   5) Breadcrumb
------------------------------------------ */
.pankuzu{
  /* 少し弱いトーンにする例 */
  color: var(--colr-text-weak);
}

/* ------------------------------------------
   6) Headings alternatives (opt-in)
   - デフォルトは unit.css のまま
   - 部分的にパターン差し替えたい時の例
------------------------------------------ */
/* トップページだけ h2 を左ボーダーに切替（bodyにクラス付与でスコープ） */
/*
.home h2{
  text-align:left;
  padding-block-end:0;
  padding-inline-start:1.2em;
  border-inline-start:.4rem solid var(--colr-key);
}
.home h2::after{ content:none; }
*/

/* ------------------------------------------
   7) Buttons
------------------------------------------ */
/* ボタンをブランド塗り（primary）にしたい場合のバリエーション */
.btn .primary{
  color: var(--colr-wt);
  background: var(--colr-key);
  border-color: transparent;
}
.btn .primary:hover{
  background: var(--colr-key-darken);
  box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0);
}
.btn .primary::before{ background: var(--colr-wt); }     /* 右端の丸 */
.btn .primary::after { background-color: var(--colr-key); } /* › の色 */

/* 左寄せボタン群（複数行想定） */
/* .btn.left ul{ justify-content:flex-start; } */

/* ------------------------------------------
   8) Article spacing presets
------------------------------------------ */
/* セクション間の上下マージンを強める例 */
/* section{ padding-block: var(--sp-ML); } */
/* .bg セクションだけ余白を広げる例 */
/* article.bg{ padding-block: var(--sp-L); } */

/* カード等で .dan の下マージンを詰めたい場面 */
/* .column .dan{ margin-block-end: var(--sp-MS); } */

/* ------------------------------------------
   9) Page specific tweaks (スコープ推奨)
------------------------------------------ */
/* 例：会社概要ページ（<body class="page-about">） */
/*
.page-about .pagehead{ min-block-size: 32rem; }
.page-about h2{ letter-spacing: .02em; }
*/



/* =========================
   フッタ調整
========================= */
/* ===== footer 上段（ロゴ＆会社情報＆ボタン） ===== */
footer .column.freesize3{
  margin-block-end: var(--sp-ML);
}
footer .column.freesize3 .logo img{
  inline-size: 16rem;  /* ロゴ上限（必要に応じて調整） */
  height: auto;
  display:block;
}

/* 住所・TEL を少し小さめに */
footer .info{text-align: center;}
footer .column.freesize3 .info .adds,
footer .column.freesize3 .info .telnum{
  font-size: var(--tx-SS);
  line-height: 1.7;
}

/* tb+では会社情報を左せ */
@media (min-width:601px){
  footer .column.freesize3 { margin-block-end: 0; }
  footer .column.freesize3 .info{ text-align: left; }
}

.copyright{
  padding-block-end: 7rem !important;
}




/* ------------------------------------------
   TOP
------------------------------------------ */
/* ===== HERO (movie background) ===== */
:root{
  /* フェード時間（ロゴ/オーバーレイ共通） */
  --hero-fade-ms: 1400ms;
}

.mov.hero {
  position: relative;
  min-height: clamp(50rem, 150vw, 65rem);
  overflow: hidden;
  background: var(--colr-key);
}
@media (min-width:601px){
  .mov.hero {
    min-height: clamp(50rem, 60vw, 80rem);
  }
}

.mov.hero .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}

/* ソフトライトのオーバーレイ（動画上・ロゴ下） */
.mov.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #003348;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* ロゴを中央に重ねるためのレイヤ */
.mov.hero .copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
}
/* ローディングロゴと本番ロゴを完全に同じ場所へ重ねる */
.mov.hero .copy > *{ grid-area: 1 / 1; }

.mov.hero .copy img {
  max-inline-size: 55vw; /* モバイル基準 */
  height: auto;
}
@media (min-width:601px){
  .mov.hero .copy img { max-inline-size: 45vw; }
}

/* poster表示のためのオーバーレイ（キー色のベタ） */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--colr-key);
  opacity: 0;
  transition: opacity var(--hero-fade-ms) ease; /* ← フェード時間を統一 */
  pointer-events: none;
  z-index: 3;
}
.hero__overlay.is-active {
  opacity: 1; /* フェードイン */
}

/* hover/focus */
.hero__scroll:hover{ background: var(--colr-key-lighten); }

/* ===== ローディング用（待機ベタ＋ロゴ切替＋回転） ===== */

/* ローディング中はキー色ベタを出す */
.mov.hero.is-loading .hero__overlay { opacity: 1; }

/* ローディングロゴ：回転アニメ＋フェード */
@keyframes hero-spin { to { transform: rotate(30deg); } }

.mov.hero .logo--loading{
  inline-size: 6rem;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--hero-fade-ms) ease,
    visibility 0s linear var(--hero-fade-ms);
  /*animation: hero-spin 0.3s linear infinite;  ← ゆっくり回転 */
}
@media (min-width:601px){
  .mov.hero .logo--loading{ max-inline-size: 45vw; }
}

/* 本番ロゴ：フェード */
.mov.hero .logo--main{
  max-inline-size: 55vw;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--hero-fade-ms) ease,
    visibility 0s linear var(--hero-fade-ms);
}
@media (min-width:601px){
  .mov.hero .logo--main{ max-inline-size: 45vw; }
}

/* is-loading 中はローディングロゴのみ表示 */
.mov.hero.is-loading .logo--loading{
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
/* 12分割(=30°)でカクッと回るローディング */
  animation: spin-steps var(--spin-speed, 1.2s) steps(var(--spin-steps, 12), end) infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes spin-steps{
  to{ transform: rotate(360deg); }
}
.mov.hero.is-loading .logo--main{
  opacity: 0;
  visibility: hidden;
}

/* ローディング解除後は本番ロゴをフェードイン */
.mov.hero:not(.is-loading) .logo--main{
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}

/* 動画UIは引き続き出さない（既存） */
.mov.hero .hero__video{ pointer-events: none; }





/* ==== Hero: 再生/一時停止ボタン（カスタム） ==== */
/* ヒーローの再生/停止ボタン（画像版） */
.hero__controls{
  position: absolute;
  right: var(--side-pad);
  bottom: var(--side-pad);
  line-height: 1;
  z-index: 3;
}
.vbtn {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../img/stop.svg");
  opacity: 0.5;
  cursor: pointer;
}
.vbtn.is-paused {
  background-image: url("../img/play.svg");
}
.vbtn.is-disabled {
  display: none;
}

/* 動画は引き続きUIを出さない */
.mov.hero .hero__video{ pointer-events: none; }



/* 下へボタン（丸・白矢印・境界に半分かける） */
.mov.hero{ overflow: visible; } /* はみ出しを見せる */

.hero__scroll{
  position: absolute;
  left: 50%;
  bottom: calc(-5rem);    /* 半分ほど下に飛び出す */
  translate: -50% 0;
  inline-size: 8rem;
  block-size: 8rem;
  border-radius: 50%;
  background: var(--colr-key);                 /* 青丸 */
  border: 1rem solid var(--colr-wt);          /* 白の縁取りで境界を際立たせる */
  display: grid; place-items: center;
  text-decoration: none;
  z-index: 3;
}

/* 中の白い矢印（右矢印SVGを下向きに） */
.hero__scroll::after{
  content:"";
  inline-size: 4rem; block-size: 4.5rem;
  -webkit-mask: url("../img/arw.svg") no-repeat center / contain;
  mask:         url("../img/arw.svg") no-repeat center / contain;
  background: var(--colr-wt);
  transform: translateY(0.5rem) rotate(90deg);
}


/* ==== Opening ==== */
#opening h1{
  text-align: center;
  font-size: 3.2rem;
  line-height: 2;
  margin-block: var(--sp-ML);
}
#opening .pic img{
  border: 1rem solid var(--colr-wt);
  box-shadow: 0 .1rem .7rem rgba(0,0,0,.15);
}
#opening .txt p:first-child{
  margin-block-start: 0;
}
#opening .txt p.daihyo{
  text-align: right;
}
#opening .txt p.daihyo span{
  font-size: var(--tx-SS);
}



/* triangle-class */
section.tri {
  position: relative;
  overflow: hidden;
}

/* コンテンツは上に載せる */
section.tri > .block {
  position: relative;
  z-index: 1;
}

/* 左上の三角意匠 */
section.tri::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-right: 80vw solid transparent; /* 横幅 */
  border-top: 20vw solid #ECE8E4;    /* 高さ＋色 */
  z-index: 0;
}

/* タブレット */
@media (min-width:601px) and (max-width:900px){
  section.tri::after {
    border-right-width: 55vw;
    border-top-width: 12vw;
  }
}

/* PC */
@media (min-width:901px) {
  section.tri::after {
    border-right-width: 45vw;
    border-top-width: 8vw;
  }
}


/* lead-p */
p.lead{
  text-align: center;
  margin-block-end: var(--sp-ML);
}




/* :::::: jigyou-shoukai :::::: */
#intro .lead{
  text-align: left;
}
@media (min-width:601px) {
  #intro .lead{
    text-align: center;
  }
}

/* jigyobu-obi */
.jigyobu{
  text-align: center;
  color: var(--colr-wt);
  background-color: var(--colr-sub1);
}
.j2 .jigyobu{
  background-color: var(--colr-sub2);
}
.j3 .jigyobu{
  background-color: var(--colr-sub3);
}






/* :::::: interview :::::: */
#interview .pic{
  height: auto;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
#interview .jigyobu{
  block-size: 8rem;
  position: relative;
  top: -8rem;
  margin-block-end: -8rem;
  display: flex;
  justify-content: center;
  padding-block-start: 2rem;
}
#interview h3{
  background: none;
  font-size: 4rem;
  text-align: center;
}
#interview h3 span{
  font-size: var(--tx-MS);
}
#interview .dan p{
  margin-block-start: var(--sp-XS);
  text-align: center;
}


/* ===============================
   SONOTA（その他の情報） – Cards
   #sonota 配下だけに作用
=============================== */
#sonota .column.dan3.keep .dan{
  background: var(--colr-bg-sub);
  border: 1.5rem solid var(--colr-wt);
  border-radius: 3rem;
  box-shadow: 0 .2rem 1rem rgba(0,0,0,.12);
  display: flex;              /* ボタンを下に寄せる */
  flex-direction: column;
}

/* タイトル帯（青いラベル＋左の三角意匠） */
#sonota .pegettl{
  position: relative;
  display: block;
  text-align: center;
  color: var(--colr-wt);
  background: var(--colr-key);
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  padding: 1.5rem 1rem;
  margin: 0 0 3rem 0;
  box-shadow: 0 .15rem .6rem rgba(0,0,0,.15);
}
/* ラベル下の“折り返し”三角（左寄せ） */
#sonota .pegettl::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  inline-size:7.5rem;
  block-size:2.5rem;
  background: color-mix(in srgb, var(--colr-key) 60%, black);
  clip-path: var(--clip-serif);
}

/* 本文 */
#sonota .dan > p{
  margin-block: 1rem;
  margin-inline: 2rem;
  text-align: left;               /* 読みやすさ優先。必要ならユーティリティで上書き可 */
}

/* ボタンをカード下に固定（自動で下がる） */
#sonota .dan .btn{
  margin-inline: var(--sp-MS);
  margin-block: auto 1.5rem;
}







/* =========================
   下層ページ共通
========================= */
.p-lead{
  font-family: var(--font-serif);
  font-size: 2.8rem;
  margin-block-end: var(--sp-ML);
  text-align: center;
}

section#eigyo h2::after{
  background-color: var(--colr-sub1);
}section#gijutsu h2::after{
  background-color: var(--colr-sub2);
}section#soumu h2::after{
  background-color: var(--colr-sub3);
}


/* =========================
   募集部署
========================= */
.p-busho .shoukai .pic img:nth-child(2){
  margin-block-start: 2rem;
}
.shoukai h3{
  background: none;
  padding-block-end: 0;
}
.shoukai h3 .shubetsu{
  display: inline-block;
  text-align: center;
  inline-size: fit-content;
    min-inline-size: 20rem;
  border-radius: 100vmax; 
  padding: .5rem 3rem;
  margin-block-end: 1rem;
  line-height: 1.2;
  font-size: var(--tx-S);
  font-weight: 400;
  color: var(--colr-wt);
  background: gray;
}

#eigyo h3 .shubetsu{ background-color: var(--colr-sub1);}
#gijutsu h3 .shubetsu{ background-color: var(--colr-sub2);}
#soumu h3 .shubetsu{ background-color: var(--colr-sub3);}

#eigyo .hl em{
  background: linear-gradient(to top, #B5EAF4 var(--mark-h), transparent var(--mark-h));
}
#gijutsu .hl em{
  background: linear-gradient(to top, #A5CFFF var(--mark-h), transparent var(--mark-h));
}
#soumu .hl em{
  background: linear-gradient(to top, #FFBFC9 var(--mark-h), transparent var(--mark-h));
}
/* jigyo-shoukai */
#jigyo-shoukai .jigyobu{
  padding-block: var(--sp-XS);
}
#jigyo-shoukai .dan p{
  text-align: center;
}

@media (min-width:601px) {
  #jigyo-shoukai .dan figure{
    border-radius: 2rem; overflow: hidden;
  }
  #jigyo-shoukai .dan.j1 figure{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  #jigyo-shoukai .dan.j3 figure{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.yarigai {
  margin-block-start: 6rem;
}
.yarigai ul {
  background-color: var(--colr-wt);
  border-radius: 1rem;
  border: .4rem solid #666;
  margin-block-start: 1rem;
  padding: 2rem 2rem 2rem 5rem;
}


#eigyo .yarigai ul{
  border-color: var(--colr-sub1);
}
#gijutsu .yarigai ul{
  border-color: var(--colr-sub2);
}
#soumu .yarigai ul{
  border-color: var(--colr-sub3);
}

@media (min-width:601px) and (max-width:900px) {
  .yarigai h3 {
    clear: both; text-align: center;
  }
}



/* =========================
   インタビュー
========================= */

.koe .head-block .txt{

}


.koe .head-block p.lead{
  font-size: 4rem;
  font-family: var(--font-serif);
  line-height: 1.5;
  margin-block-end: 4rem;
}

.interview article{
  margin-block: 5rem;
}
.interview article h3{
  background: none;
}
.interview article h3 span{
  display: inline-block;
  margin-block-end: 1.5rem;
  padding: .7rem 3rem;
  font-weight: normal;
  font-size: var(--tx-MS);
  background: #555;
  color: var(--colr-wt);
  border-radius: 99rem; 
}
#eigyo .interview article h3 span{background-color: var(--colr-sub1);}
#gijutsu .interview article h3 span{background-color: var(--colr-sub2);}
#soumu .interview article h3 span{background-color: var(--colr-sub3);}

.interview .dan2{
  margin-block-start: 5rem;
}



@media (min-width:601px){
  .koe .head-block p.lead{
  text-align: left;
  font-size: 3.2rem;
  padding-block-start: 10rem;
  margin-block-end: 2rem;
  }
  .interview article h3{
  font-size: 2.4rem;
  line-height: 1.5;
  }
  .interview article h3 span{
  margin-inline-end: 1.5rem;
  line-height: 1.5;
  }
  .interview .dan2 .dan{
    margin-block-end: 0;
  }

}
@media (min-width:901px){
  .koe .head-block p.lead{
  font-size: 4rem;
  padding-block-start: 12rem;
  margin-block-end: 3rem;
  }
  .koe .head-block p{
  font-size: 2.4rem;
  text-align: left;
  }
}



/* :::::::::::: fukuri ::::::::::::3.4 2.3 2.8 */
.p-fukuri #intro a,
.p-qa #intro a{
  text-decoration: none !important;
}
.p-fukuri .figcirc,
.p-qa .figcirc{
  inline-size: 85%;
}

.p-fukuri #intro a figure,
.p-qa #intro a figure{
  background-image: url(../img/square-bg.jpg);
  background-size: cover;
  text-align: center;
  align-content: center;
  color: var(--colr-bk);
  font-size: 3.4rem; line-height: 1.3;
  font-weight: 700;
  border: solid #FFF 1rem;
  box-shadow: 0 .2rem .8rem rgba(0,0,0,.12);
} 
@media (min-width:601px) and (max-width:900px) {
  .p-fukuri #intro a figure,
  .p-qa #intro a figure{
    font-size: 2.3rem;
  }
}
@media (min-width:901px) {
  .p-fukuri #intro a figure,
  .p-qa #intro a figure{
    font-size: 2.8rem;
  }
}
.p-fukuri #intro .figcirc figcaption,
.p-qa #intro .figcirc figcaption{
  font-size: 2.2rem;
  font-weight: 300;
}


/* H3 */
.p-fukuri article h3{
  background: none;
  position: relative;
  padding-inline-start: 4.5rem; 
  border: 0;
  text-decoration: none; 
  text-align: left; 
}


/* ◯マーク（3rem） */
.p-fukuri article h3::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .15em;            /* 1行目のベースライン寄りに置く */
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  border: .8rem solid var(--colr-key); /* 色はブランドカラー。必要なら変更 */
  box-sizing: border-box;
}
.p-fukuri .dan ul.list{
  margin-inline-start: 3.6rem;
  margin-block-start: 1rem;
}



/* ===== 特別枠：POINT ===== */
.point{
  position: relative;
  
}

/* 上部の「POINT」バッジ（擬似要素で生成） */
.point::before{
  content: "POINT";
  position: absolute;
  top: -3rem;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  padding: .6rem 3rem;
  font-size: var(--tx-S);
  letter-spacing: .2em;
  color: var(--colr-wt);
  background: var(--colr-key);
  border-radius: 9rem; /* pill */
  box-shadow: 0 .2rem .6rem rgba(0,0,0,.12);
}

/* 説明文（バッジと同じ左右位置にそろえる） */
.point > p{
  margin: 0 0 2rem 1.5rem;
}


/* ===== POINT：枠（モバイル基準で“上にイラスト → 下に見出し”） ===== */
.point .waku{
  --pt-fig: 17rem; /* イラスト一辺（必要なら調整） */
  position: relative;
  margin: 0; /* 必要に応じて `0 var(--side-pad)` に戻してください */
  background: #fff;
  border: .6rem solid color-mix(in srgb, var(--colr-key) 55%, transparent);
  border-radius: 1.2rem;

  /* 上にイラスト分 + 余白を確保（SP：上配置） */
  padding: 25rem 3rem 3rem 3rem;
}

/* 枠内イラスト：SPは上部中央に固定 */
.point .waku::before{
  content: "";
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  inline-size: 20rem;
  block-size: 20rem;
  background: url("../img/fukuri/atsusa-kuma.png") center / contain no-repeat;
  pointer-events: none;
}
@media (min-width:601px) {
  .point .waku::before{
  inline-size: 17rem;
  block-size: 17rem;
  }
}

/* 見出し（下線なし） */
.point .waku h4{
  color: var(--colr-key);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
@media (min-width:601px) {
  .point .waku h4{
    text-align: left;
    margin: 0;
  }
}

/* ===== 601px以上：左にイラスト、右に本文 ===== */
@media (min-width:601px){
  .point .waku{
    /* 左にイラストぶんのパディングを割り当て */
    padding: 3rem 3rem 3rem 23rem;
  }
  .point .waku::before{
    top: 50%;
    left: calc(var(--side-pad) - .5rem);
    transform: translateY(-50%);
  }
}

/* ==========================================
  Q&Aユニット（全段・左寄せタイトル・折り返し三角）
========================================== */

.p-qa .qa-item{
  background: var(--colr-bg-sub);
  border: 1.5rem solid var(--colr-wt);
  border-radius: 3rem;
  box-shadow: 0 .2rem 1rem rgba(0,0,0,.12);
  margin-block-start: var(--sp-MS);
}

/* タイトル帯（左寄せ・複数行可／左の“折返し”付き） */
.p-qa .qa-item > h3{
  position: relative;
  margin: 0 0;
  font-size: 2.4rem;
  padding: 1.5rem 3rem;
  color: var(--colr-wt);
  background: var(--colr-key);
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  text-align: left;
  line-height: 1.5;
  box-shadow: 0 .15rem .6rem rgba(0,0,0,.15);
}

/* ラベル下の“折り返し”三角（左寄せ） */
.p-qa .qa-item > h3::after{
  content:"";
  position: absolute;
  top: 100%;
  left: 0;
  inline-size: 7.5rem;
  block-size: 2.5rem;
  background: color-mix(in srgb, var(--colr-key) 60%, black);
  /* トークン --clip-serif が無い環境でも形が出るようにフォールバック */
  clip-path: var(--clip-serif, polygon(0 0, 68% 0, 100% 100%, 0 100%));
}

/* 回答部 */
.p-qa .qa-item .kaitou{
  padding: 3rem;
}
.p-qa .qa-item .kaitou > h4{
  margin: 2rem 0 2rem 0;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--colr-text-base);
  text-decoration: none;
}
.p-qa .qa-item .kaitou > :last-child{ margin-block-end: 0; }

/* アイテム間の間隔（連続配置時） */
.p-qa .qa-item + .qa-item{
  margin-block-start: var(--sp-L);
}

/* タブレット以上で少しだけ余白を増やす（任意） */
@media (min-width:601px){
  .p-qa .qa-item .kaitou{ padding: 3rem 3rem 3rem 3rem; }
}





/* ===== Bottom fixed CTA ===== */
.fixed-cta{
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 1200;

  /* サイズ */
  inline-size: min(98vw, 50rem);
  block-size: 6rem;

  /* 初期は画面外（下）に隠す → is-visible で引き上げ */
  transform: translate(-50%, calc(100% + 1.2rem));
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;

  /* 見た目 */
  border-radius: 2rem 2rem 0 0;                   /* 右上・左上のみ角丸 */
  background: url("../img/pagehead.jpg") center / cover no-repeat;
  color: var(--colr-wt);
  text-decoration: none;
  display: grid; place-items: center;
  padding-inline: 5rem;                    /* 右に丸矢印分の余白 */
  font-weight: 700;
  box-shadow: 0 -.2rem .8rem rgba(0,0,0,.25);

  /* iOS セーフエリア対策（邪魔なら削除可） */
  padding-block-end: env(safe-area-inset-bottom, 0);
}

/* 白い丸 */
.fixed-cta::before{
  content:"";
  position:absolute;
  top:50%;
  right:1.2rem;
  transform: translateY(-50%);
  inline-size: var(--btn-dot-size, 1.8rem);
  block-size:  var(--btn-dot-size, 1.8rem);
  border-radius: 50%;
  background: var(--colr-wt);
  pointer-events:none;
}

/* 青い矢印（マスク） */
.fixed-cta::after{
  content:"";
  position:absolute;
  top:50%;
  right:1.1rem;
  transform: translateY(-50%);
  inline-size: var(--btn-dot-size, 1.8rem);
  block-size:  var(--btn-dot-size, 1.8rem);
  -webkit-mask: url("../img/arw.svg") no-repeat center / 70%;
  mask:         url("../img/arw.svg") no-repeat center / 70%;
  background-color: var(--colr-key);
  pointer-events:none;
}

/* 表示状態 */
.fixed-cta.is-visible{
  transform: translate(-50%, 0);
  opacity: 1;
}


/* ページによって出したくない場合（<body class="no-fixed-cta">） */
body.no-fixed-cta .fixed-cta{ display:none; }