/* リセットと土台（要素の初期値、ユーティリティ、表示アニメーション） */
* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
  overflow-anchor: none;
}

@media (max-width:768px) {
  html {
    scroll-padding-top: 130px;
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--jp);
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:lang(ja) {
  line-break: strict;
  font-feature-settings: "palt" 1;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: .045;
  background-image: var(--grain);
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0% { transform:translate(0,0) }
  20% { transform:translate(-3%,2%) }
  40% { transform:translate(2%,-3%) }
  60% { transform:translate(-2%,-1%) }
  80% { transform:translate(3%,3%) }
  100% { transform:translate(0,0) }
}

@keyframes wstreak {
  0%,100% { translate:0 -14% }
  50% { translate:0 14% }
}

.wrap {
  max-width: calc(var(--max) + var(--pad) * 2);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.jp-wrap {
  word-break: auto-phrase;
}

[data-rv] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--ease),transform 1s var(--ease);
}

[data-rv].in {
  opacity: 1;
  transform: none;
}

html.pv [data-rv],
html.nomo [data-rv] {
  opacity: 1;
  transform: none;
  transition: none;
}

@keyframes mnin {
  from { opacity:0;transform:translateY(-6px) }
  to { opacity:1;transform:none }
}

@media (max-width:768px) {
  br.pc {
    display: none;
  }
}

#worry {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #fff;
  padding-bottom: clamp(40px,4vw,64px);
}

#worry::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  animation: glowdrift 22s ease-in-out infinite;
  background: radial-gradient(closest-side,rgba(228,0,25,.09),rgba(228,0,25,.035) 50%,rgba(228,0,25,0));
  filter: blur(60px);
}

@media (max-width:768px) {
  #worry::before {
    width: 120%;
    right: -50%;
  }
}

#worry::before {
  right: -14%;
  top: -20%;
  width: 62%;
  height: 100%;
}

@media (prefers-reduced-motion:reduce) {
  #worry::before {
    animation: none;
  }
}

#worry::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  animation: glowdrift 28s ease-in-out infinite reverse;
  left: -18%;
  bottom: 6%;
  width: 50%;
  height: 70%;
  background: radial-gradient(closest-side,rgba(228,0,25,.05),rgba(228,0,25,0));
  filter: blur(60px);
}

@media (prefers-reduced-motion:reduce) {
  #worry::after {
    animation: none;
  }
}

@keyframes glowdrift {
  0%,100% { transform:translate(0,0) scale(1) }
  50% { transform:translate(-4%,6%) scale(1.06) }
}

#policy {
  padding: clamp(80px,7.4vw,112px) 0;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
  word-break: auto-phrase;
}

p,
dd {
  text-wrap: pretty;
}

@media (max-width:768px) {
  dd {
    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
    text-wrap: wrap;
  }
}

li {
  text-wrap: pretty;
}

@media (max-width:768px) {
  p.jp-wrap {
    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
    text-wrap: wrap;
  }
}

.ct p.jp-wrap {
  margin: 12px 0 0;
  font-family: var(--jp);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .04em;
}

.ct p.jp-wrap br.pc {
  display: inline;
}

@media (max-width:768px) {
  .ct p.jp-wrap br.pc {
    display: none;
  }
}

/* 見出し・ラベル・リードなどの文字組み */
.cap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font: 400 11.5px/1 var(--en);
  letter-spacing: .34em;
  color: var(--sub);
  text-transform: uppercase;
}

.cap::after {
  content: "";
  width: 56px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.cap--w {
  color: rgba(255,255,255,.75);
}

.h2 {
  margin: 22px 0 0 -.05em;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(28px,3.2vw,48px);
  line-height: 1.4;
  letter-spacing: .04em;
  margin-top: 18px;
  text-wrap: balance;
  word-break: auto-phrase;
}

.lead {
  margin: 24px 0 0;
  max-width: 40em;
  font-size: 15.5px;
  line-height: 2.05;
  letter-spacing: .05em;
  color: #2A2A2A;
}

.sec-head .lead {
  margin: 18px 0 0;
}

.topics .cap {
  color: rgba(255,255,255,.7);
}

.ct .cap {
  color: rgba(255,255,255,.75);
  justify-content: flex-start;
}

.ct .cap::before {
  width: 56px;
  height: 1px;
  background: currentColor;
  opacity: .6;
  content: none;
}

/* 下層ページのヒーローとパンくず */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #0B0B0B;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -20%;
  pointer-events: none;
  filter: blur(34px);
  animation: wstreak 30s ease-in-out infinite;
  background: radial-gradient(42% 50% at 80% 48%,rgba(228,0,25,.40),rgba(228,0,25,0) 70%), radial-gradient(30% 36% at 62% 92%,rgba(140,0,18,.32),rgba(140,0,18,0) 70%);
}

.hero__in {
  padding-top: clamp(140px,15vw,200px);
  padding-bottom: clamp(110px,11vw,160px);
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(36px,4vw,56px);
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
}

.crumb li+li::before {
  content: "/";
  margin-right: 10px;
  opacity: .5;
}

.crumb a:hover {
  color: #fff;
}

.hero h1 {
  margin: 18px 0 0 -.05em;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(44px,6.4vw,92px);
  line-height: 1.15;
  letter-spacing: .04em;
}

.hero__txt {
  margin: 28px 0 0;
  font-size: clamp(15px,1.25vw,17px);
  line-height: 2;
  letter-spacing: .06em;
  color: rgba(255,255,255,.86);
  max-width: none;
}

.hero__txt span {
  display: inline-block;
}

.hero--ai .hero__in {
  padding-bottom: clamp(80px,8vw,120px);
}

/* SP：パンくずの最後（記事名など長いもの）は1行で省略する */
@media (max-width:768px) {
  .crumb {
    flex-wrap: nowrap;
  }
  .crumb li {
    flex: none;
  }
  .crumb li[aria-current] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* セクション・白いシート・ページ内ナビ（目次） */
.sec {
  padding: clamp(88px,9vw,140px) 0;
}

.sec + .sec {
  border-top: 1px solid #EFEFEF;
}

.sec-head {
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(28px,5vw,96px);
  align-items: end;
  display: block;
  max-width: 760px;
}

@media (max-width:768px) {
  .sec-head {
    grid-template-columns: 1fr;
  }
}

.sheet {
  position: relative;
  z-index: 2;
  border-radius: 36px 36px 0 0;
  margin-top: -36px;
  overflow: clip;
  background: #fff;
}

@media (max-width:768px) {
  .sheet > .sec:last-child {
    padding-bottom: 12px;
  }
}

/* ページ下部の相談の帯と「ほかの支援」 */
.ct {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(120% 95% at 70% 40%,#E5152A 0%,#C40018 42%,#8E0012 74%,#5C000B 100%);
  isolation: isolate;
}

.ct::before {
  position: absolute;
  z-index: -1;
  inset: -30% -20%;
  pointer-events: none;
  content: "";
  background: radial-gradient(40% 70% at 82% 50%,rgba(255,140,130,.35),rgba(255,140,130,0) 70%);
  filter: blur(30px);
  animation: none;
}

.ct h2 {
  font-family: var(--min);
  font-weight: 600;
  line-height: 1.35;
  margin: 14px 0 0;
  font-size: clamp(26px,2.9vw,40px);
  letter-spacing: .04em;
}

@media (max-width:768px) {
  .ct h2 {
    font-size: 24px;
  }
}

.ct p {
  margin: 22px 0 0;
  font-family: var(--min);
  font-size: clamp(14px,1.2vw,18px);
  line-height: 2.1;
  letter-spacing: .12em;
  color: rgba(255,255,255,.88);
}

.ct__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 22px 32px 22px 22px;
  border-radius: var(--r);
  background: #fff;
  color: var(--red);
  font-size: clamp(15px,1.25vw,18px);
  font-weight: 800;
  letter-spacing: .06em;
  box-shadow: 0 24px 60px -20px rgba(60,0,8,.7);
  transition: transform .35s,box-shadow .35s;
  white-space: nowrap;
  margin-top: 14px;
}

@media (max-width:900px) {
  .ct__btn {
    justify-self: start;
    white-space: normal;
  }
}

@media (max-width:768px) {
  .ct__btn {
    padding: 18px 22px 18px 16px;
    font-size: 14px;
  }
}

.ct__btn span {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  letter-spacing: .1em;
}

.others {
  background: var(--paper);
  padding-top: clamp(24px,2.4vw,36px);
  padding-bottom: clamp(64px,6vw,96px);
}

.others ul {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width:768px) {
  .others ul {
    grid-template-columns: 1fr;
  }
}

.others a {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 26px 28px;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background .3s,color .3s;
}

.others a:hover {
  background: var(--ink);
  color: #fff;
}

.others small {
  display: block;
  font: 400 11px/1 var(--en);
  letter-spacing: .2em;
  color: var(--sub);
  margin-bottom: 10px;
}

.others b {
  font-family: var(--min);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .04em;
}

.ct__in {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(24px,4vw,64px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px,5.6vw,84px) var(--pad);
  text-align: left;
  padding-top: calc(clamp(56px,5.6vw,84px) - 14px);
  padding-bottom: calc(clamp(56px,5.6vw,84px) + 14px);
}

@media (max-width:900px) {
  .ct__in {
    grid-template-columns: 1fr;
  }
}

.others + .ct {
  margin-top: 0;
}

/* SP：ほかの支援が2つのときは横に並べる */
@media (max-width:768px) {
  .others ul:has(> li:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .others ul:has(> li:nth-child(2)) a {
    padding: 18px 16px;
    gap: 8px;
  }
  .others ul:has(> li:nth-child(2)) b {
    font-size: 15px;
  }
}

/* ボタンに矢印は入れない（2026-10 共通ルール）。文字は中央に */
.others a {
  justify-content: flex-start;
}

/* ほかの支援：白地のまま（タッチ端末で押したあとに黒く残らないように） */
@media (hover:none) {
  .others a:hover:not(:active) {
    background: #fff;
    color: inherit;
  }
}

/* 複数ページで使う部品（FAQ・トピックス・準備中の表示など） */
.topics {
  background: var(--ink);
  color: #fff;
}

.faq {
  margin: clamp(36px,4vw,52px) 0 0;
  border-top: 1px solid var(--line);
  overflow-anchor: none;
}

@media (max-width:768px) {
  .faq {
    padding-bottom: 12px;
  }
}

.faq details {
  border-bottom: 1px solid var(--line);
  overflow-anchor: none;
}

.faq summary {
  list-style: none;
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--min);
  font-weight: 600;
  font-size: clamp(16px,1.4vw,18px);
  line-height: 1.6;
  letter-spacing: .04em;
  grid-template-columns: 44px 1fr 32px;
}

@media (max-width:768px) {
  .faq summary {
    gap: 10px;
    grid-template-columns: 32px 1fr 32px;
  }
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary b {
  font: 700 14px/1 var(--en);
  color: var(--red);
  font-family: var(--min);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  padding: 0;
}

@media (max-width:768px) {
  .faq summary b {
    font-size: 23px;
  }
}

.faq summary i {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #CFCFCF;
  transition: background .3s;
}

.faq summary i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  background: var(--ink);
  transition: transform .35s;
  transition-duration: .6s;
}

.faq summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  background: var(--ink);
  transition: transform .35s;
  transform: rotate(90deg);
  transition-duration: .6s;
}

.faq details[open] summary i {
  background: var(--ink);
}

.faq details[open] summary i::before {
  background: #fff;
}

.faq details[open] summary i::after {
  background: #fff;
  transform: rotate(0);
}

.faq summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 8px;
}

.faq .a {
  display: grid;
  gap: 14px;
  padding: 0 0 26px;
  grid-template-columns: 44px 1fr 32px;
}

@media (max-width:768px) {
  .faq .a {
    gap: 10px;
    grid-template-columns: 32px 1fr 32px;
  }
}

.faq .a b {
  font: 700 14px/1 var(--en);
  font-family: var(--min);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  color: #9A9A9A;
  padding-top: 2px;
}

@media (max-width:768px) {
  .faq .a b {
    font-size: 23px;
  }
}

.faq .a p {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  color: #3a3a3a;
}

@media (max-width:768px) {
  .flow li:not(:last-child)::after {
    display: none;
  }
}

.faq summary span {
  text-wrap: balance;
  word-break: auto-phrase;
}

.faq details[open] .a {
  animation: mnin .8s cubic-bezier(.33,0,.15,1);
}

.pp-link {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(228,0,25,.5);
  text-underline-offset: 4px;
  transition: color .3s;
}

.pp-link:hover {
  color: var(--red);
}

/* FAQ：マウス・タップで開け閉めしたときは枠を出さない */
.faq details.by-ptr summary:focus-visible {
  outline: none;
}

/* =========================================================
   SP（2026-10 改修）：下層ページ共通のSPルール
   文字：特大34（ページタイトル）/ 大26（セクション見出し）/ 中20 / 本文15 / 小13 / ラベル11
   余白：セクションの間 56px。グループの中は 8・16・24・40
   ========================================================= */
@media (max-width:768px) {
  .sec {
    padding: 56px 0;
  }
  .hero__in {
    padding-top: 112px;
    padding-bottom: 72px;
  }
  .hero h1 {
    font-size: 34px;
    line-height: 1.3;
  }
  .hero__txt {
    font-size: 15px;
    line-height: 1.9;
  }
  .h2 {
    margin-top: 12px;
    font-size: 26px;
    line-height: 1.4;
  }
  .lead {
    font-size: 15px;
    line-height: 1.9;
  }
  .sec-head {
    gap: 16px;
  }
  .others {
    padding-bottom: 56px;
  }
  /* 文章は言葉の区切りで改行する（長い言葉だけ、はみ出す前に折り返す） */
  p.jp-wrap {
    word-break: auto-phrase;
    overflow-wrap: anywhere;
  }
}

/* 2026-10 山下の直し（下層共通） */
@media (max-width:768px) {
  /* 404：説明文はスマホでは改行を固定しない */
  main:has(.nf) .hero__txt span {
    display: inline;
  }
}