/* =====================================================================
   v7（2026-10-10）全ページ共通。sections.css のあとに読む
   1. LINEの導線：「LINEで相談受付中」＋小さく「5〜50人の組織で…資料を配布中」の2行
   2. 開閉する部品（details.tg）：押せると一目で分かるカードの形にそろえる
   ===================================================================== */

/* ---------- 1. LINEの導線（広いCTAは2行。ヘッダー・固定バーは1行のまま） ---------- */
.btn.btn--2l{flex-direction:column;gap:3px;line-height:1.3;text-align:center;padding-top:12px;padding-bottom:12px}
.btn--2l .cta-main{display:block;font-weight:700}
.btn--2l .cta-sub,.text-link--2l .cta-sub{word-break:keep-all;overflow-wrap:anywhere}
.btn--2l .cta-sub{display:block;font-size:12.5px;font-weight:500;letter-spacing:.01em;line-height:1.45;opacity:.86;text-wrap:balance}
.btn-row:has(.btn--2l){align-items:stretch}
/* ヒーローのテキストリンク */
.hero .text-link.text-link--2l{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;padding-bottom:6px}
.hero .text-link--2l .cta-main{font-size:15px;font-weight:700;color:#fff}
.hero .text-link--2l .cta-sub{font-size:12.5px;line-height:1.5;color:rgba(245,247,252,.78)}
@media (max-width:760px){
  .btn.btn--2l{padding-left:18px;padding-right:18px}
  .btn--2l .cta-sub{font-size:12px}
  .hero .text-link.text-link--2l{align-items:center;text-align:center}
}

/* ---------- 2. 開閉する部品（サービスの「7つの工程」、よくあるご質問） ---------- */
.space details.tg.tg{border:0;box-shadow:none;background:none;overflow:visible;margin-top:12px}
.space.sub .road6+details.tg.tg{margin-top:clamp(28px,3.4vw,44px)}
.space .faq details.tg.tg:first-child{margin-top:0}
.space.sub .faq:has(details.tg){border-bottom:0;gap:0}
.space details.tg.tg>summary.tg-sum{list-style:none;cursor:pointer;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(14px,2vw,24px);row-gap:6px;align-items:center;
  padding:clamp(16px,1.8vw,22px) clamp(16px,2vw,26px);border-radius:16px;border:1px solid rgba(150,180,255,.35);background:rgba(120,160,255,.07);color:#fff;
  transition:border-color 250ms ease,background-color 250ms ease}
.space details.tg.tg>summary.tg-sum::-webkit-details-marker{display:none}
.tg-sum .tg-label{grid-column:1;grid-row:1;min-width:0}
.tg-sum .tg-hint{grid-column:1;grid-row:2;font-size:12.5px;line-height:1.4;font-weight:500;letter-spacing:.04em;color:#8DB8FF}
.tg-sum .tg-hint::before{content:"クリックで開く"}
details.tg[open]>.tg-sum .tg-hint::before{content:"クリックで閉じる"}
@media (hover:none){
  .tg-sum .tg-hint::before{content:"タップで開く"}
  details.tg[open]>.tg-sum .tg-hint::before{content:"タップで閉じる"}
}
/* 右端の開閉アイコン：青い丸の中の＋。開くと45度回って×になる */
.space details.tg.tg>summary.tg-sum::after{content:"";grid-column:2;grid-row:1/span 2;position:static;margin:0;width:40px;height:40px;border-radius:50%;box-sizing:border-box;
  border:2px solid #3B82F6;background:linear-gradient(#3B82F6,#3B82F6) center/16px 2px no-repeat,linear-gradient(#3B82F6,#3B82F6) center/2px 16px no-repeat,rgba(59,130,246,.08);
  transform:none;transition:transform 320ms cubic-bezier(.16,1,.3,1),background-color 250ms ease}
.space details.tg.tg[open]>summary.tg-sum::after{transform:rotate(45deg);margin:0}
.space details.tg.tg>summary.tg-sum:hover{border-color:rgba(170,200,255,.75);background:rgba(120,160,255,.15)}
.space details.tg.tg>summary.tg-sum:hover::after{background:linear-gradient(#fff,#fff) center/16px 2px no-repeat,linear-gradient(#fff,#fff) center/2px 16px no-repeat,#3B82F6}
.space details.tg.tg>summary.tg-sum:focus-visible{outline:2px solid #8DB8FF;outline-offset:3px}
.space details.tg.tg[open]>summary.tg-sum{border-color:rgba(150,180,255,.6);background:rgba(120,160,255,.11)}
.space .faq details.tg .faq-a{padding:clamp(14px,1.6vw,20px) clamp(16px,2vw,26px) clamp(8px,1vw,14px)}
.space.sub details.tg>.fold-body{padding-top:clamp(8px,1vw,14px)}
@media (max-width:760px){
  .space details.tg.tg>summary.tg-sum::after{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .space details.tg.tg>summary.tg-sum,.space details.tg.tg>summary.tg-sum::after{transition:none}
}

/* ---------- 3. サービスのカード（トップ #service の3つ、サービスページ #more の2つ） ----------
   カード全体がリンク。2. の開閉部品と同じ言葉（角丸の枠・少し明るい地・青い丸のアイコン）にそろえる。
   トップの3枚目は space.js が style.transform で視差を付けているので、浮かせるのは transform ではなく translate で行う */
.space .pcards a.pcard.pcard{position:relative;padding:clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px) clamp(72px,6vw,84px);border-radius:20px;
  border:1px solid rgba(150,180,255,.35);background:rgba(120,160,255,.06);
  transition:translate 320ms cubic-bezier(.16,1,.3,1),border-color 250ms ease,background-color 250ms ease,box-shadow 320ms ease}
.space .pcards a.pcard.pcard .pcard-img{margin-left:0;margin-right:0;border-radius:12px}
.space .pcards a.pcard.pcard>*:not(.pcard-img):not(.pcard-go){padding-inline:clamp(4px,.6vw,8px)}
.pcard-go{position:absolute;right:clamp(14px,1.6vw,20px);bottom:clamp(14px,1.6vw,20px);display:inline-flex;align-items:center;gap:12px;
  font-size:15px;line-height:1.4;font-weight:700;color:#fff;margin:0}
.pcard-go-i{flex:none;width:44px;height:44px;border-radius:50%;background:#3B82F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px 20px no-repeat;
  box-shadow:0 6px 18px -6px rgba(59,130,246,.8);transition:transform 320ms cubic-bezier(.16,1,.3,1)}
@media (hover:hover){
  .space .pcards a.pcard.pcard:hover{translate:0 -4px;border-color:rgba(170,200,255,.8);background:rgba(120,160,255,.12);box-shadow:0 22px 48px -22px rgba(59,130,246,.7)}
  .space .pcards a.pcard.pcard:hover .pcard-go-i{transform:translateX(4px)}
}
@media (hover:none){
  .space .pcards a.pcard.pcard:active{translate:0 2px;border-color:rgba(170,200,255,.8);background:rgba(120,160,255,.14);transition-duration:80ms}
}
.space .pcards a.pcard.pcard:focus-visible{outline:3px solid #8DB8FF;outline-offset:4px}
@media (max-width:760px){
  .pcard-go{font-size:14px;gap:10px}
  .pcard-go-i{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .space .pcards a.pcard.pcard,.pcard-go-i{transition:none}
  .space .pcards a.pcard.pcard:hover{translate:none}
}