/* --------------------------------
style.css
---------------------------------*/
:root{
  --bg: linear-gradient(135deg, #eaf3ff 0%, #ffeaf6 100%);
  --txt: #3a2a3a;
  --muted: #6b5f6b;

  --pink: #ff8ac3;
  --blue:#8fc9ff;
  --purple:#c0a7ff;

  --shadow: 0 8px 24px rgba(151, 120, 180, .24);

  /* 選考フロー */
  --tl-line: #d7d7e0;
  --tl-node: #df89ad;
  --tl-final: #ffa6b6;
  --tl-final-text: #ff8aa5;
}

*{box-sizing:border-box}
html,body{
  height:100%
}
html { scroll-behavior: smooth; }

body{
  margin:0;color:var(--txt);
  font-family:'Zen Maru Gothic','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  background:var(--bg);line-height:1.8;letter-spacing:.02em;
}

.container{
  width:min(1100px,92%);
  margin-inline:auto;
}

.br-md{
  display:none;
}

@media (min-width:760px){
  .br-md{display:inline;}
}

/* ボタンデザイン(共通) */
.btn{
  display:inline-block;
  padding:.7rem 1rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  box-shadow:var(--shadow);
}
.btn-cta{
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;
}

#apply .btn-cta{
  background: #4f4a55;
  color:#fff;
}

#note .btn-cta{
  background: #4f4a55;
  color:#fff;
}

.btn-outline{
  background:#fff;
  border:2px solid var(--pink);color:var(--txt);
  box-shadow:none;
}
.btn-lg{padding:1rem 1.2rem;}

/* ==== トップ画面画像を画面いっぱいに収める ==== */
.hero{
  position:relative;
  height:100svh; height:100vh; min-height:480px;
  width:100%; overflow:hidden;
}

/* 背景の下地（レターボックスの色） */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
 }

.hero-area{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-area img{
  width: 100%;
  height: 100%;
  display: block;
}

/* SP時は画像を差し替え */
@media (max-width: 760px){
  .hero-area img{
    content: url("../image/hero_sp2.webp");
  }
}

/* Sections */
.section{padding:84px 0;position:relative;overflow:visible}


/* ======= 各項目の枠 ======= */
.section-inner.fancy-frame{
  position:relative; z-index:1;
  background:rgba(255,255,255,.96);
  border-radius:24px;
  padding:2.2rem 1.6rem;
  border:1px solid rgba(136,136,255,.28);
  box-shadow:0 12px 36px rgba(60,50,120,.12);
}
.section-inner.fancy-frame::before{
  content:""; position:absolute;
  top:-10px; left:-10px; right:-10px; bottom:-10px;
  border:2px dashed rgba(136,136,255,.40);
  border-radius:24px;
  z-index:-1; transform:rotate(-1deg);
}
.section-inner.fancy-frame .section-title{
  text-align:center; letter-spacing:.1em;
  font-weight:700; font-family:'Arial', sans-serif;
  background:linear-gradient(to right, #e78fd3, #8364d1);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:1rem;
}
.section-inner.fancy-frame .section-lead,
.section-inner.fancy-frame p{ text-align:center; color:#333 }

/* サポート */
.cards{
  grid-template-columns:repeat(1,1fr);
  gap:1rem;
}
.card{
  background:#fff;
  padding:1.1rem 1.2rem;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(140,120,200,.10);
  border:1px solid #f0ebff}
.card h3{
  margin:.2rem 0 .6rem;
}
.card ul{
  margin:.2rem 0;
  padding-left:1.2rem;
}
.card li{
  margin:.2rem 0;
}
@media (min-width:760px){
  .cards{
    grid-template-columns:repeat(3,1fr);
  }
}

/* 注意事項 */
.req-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr;
}
.req-col{
  background:#fff;
  border-radius:18px;
  padding:1.2rem;
  border:1px solid #f0ebff;
  box-shadow:0 6px 18px rgba(140,120,200,.10);
}
.req-title{
  font-size:1.25rem;
  margin:.2rem 0 1rem;
}
.req-list{
  list-style:none;
  padding-left:.2rem;
  margin:0
}
.req-list li{
  padding:.5rem .75rem .5rem 2.25rem;
  margin:.35rem 0;
  border-radius:12px;
  border:1px dashed #eedcff;
  position:relative;background:#fff;
}
.req-list.must li::before{
  content:"★";
  position:absolute;
  left:.6rem;top:
  .55rem;font-size:
  1.1rem;color:var(--pink);
}
.req-list.nice li::before{
  content:"❤";
  position:absolute;
  left:.6rem;top:.55rem;
  font-size:
  1.1rem;color:var(--purple);
}
.req-list.precautions li::before{
  content:"⚠";
  position:absolute;
  left:.6rem;
  top:.55rem;
  font-size:1.1rem;
  color:var(--purple);
}
.apply-cta{
  text-align:center;
  margin-top:1.2rem;
}
.apply-cta .btn[aria-disabled="true"]{
  opacity:.7;
  cursor:not-allowed;
}

/* ======= 選考フロー ======= */
.flow{
  list-style:none;
  padding:0;
  margin:0;
}
.flow.timeline{
  position:relative;
  padding-left:0;
}
.flow.timeline::before{
  content:"";
  position:absolute;
  left:26px;
  top:0;
  bottom:0;
  width:3px;
  background:var(--tl-line);
}
.flow.timeline .flow-step{
  position:relative;
  padding:0 0 48px 76px;
}
.flow.timeline .flow-step:last-child{
  padding-bottom:0;
}
.flow.timeline .flow-step .num{
  position:absolute;
  left:12px;
  top:2px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#fff;
  border:6px solid var(--tl-node);
  box-sizing:border-box;
}
.flow.timeline .flow-step .body h3{
  margin:.1rem 0 .25rem;
  font-size:1.25rem;
  font-weight:700;
  color:#4f4a55;
}
.flow.timeline .flow-step .body p{
  margin:.1rem 0 0;
  color:var(--muted);
}
.flow.timeline .flow-step:last-child .num{
  border-color: var(--tl-final);
}
.flow.timeline .flow-step:last-child .body h3{
  color: var(--tl-final-text);
}

/* 質問 */
.faq details{
  background:#fff;
  border:1px solid #eeeaf7;
  border-radius:12px;
  padding:1rem 1.1rem;
  margin:.6rem 0;
  box-shadow:0 6px 18px rgba(140,120,200,.10);
}
.faq summary{
  cursor:pointer;
  font-weight:700;
}
.faq p{
  margin:.6rem 0 0;
  color:var(--muted);
}

/* フッター */
.site-footer{
  background:transparent;
  padding:2rem 0 3rem;
}
.footer-inner{
  display:flex;
  align-items:center;
  gap:.75rem;justify-content:space-between;
}
.footer-inner .brand{margin:0;}
.footer-inner .social{
  list-style:none;
  display:flex;
  gap:1rem;
  margin:0;
  padding:0;
}
.back-to-top{
  text-decoration:none;
  padding:.55rem .75rem;
  border-radius:999px;
  border:1px solid #eee;
  background:#fff;
  box-shadow:var(--shadow);
}
.back-to-top:hover{
  transform:translateY(-2px);
}

/* アニメーション */
.reveal{opacity:0;transform:translateY(12px);transition:.6s ease}
.reveal.is-visible{opacity:1;transform:none}


.kw{
  position: relative;
  display: inline-block;
  padding: 0 .06em;
  white-space: nowrap;
}

/* 太め下線（擬似要素） */
.kw::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: .12em;           /* 文字の下あたりに調整 */
  height: .42em;           /* 太さ（お好みで） */
  border-radius: 999px;

  /* かわいく：淡いグラデ下線 */
  background: linear-gradient(90deg, rgba(255,138,195,.55), rgba(192,167,255,.55));

  transform: scaleX(0);
  transform-origin: left;
  opacity: .95;
  z-index: -1;             /* 文字の“後ろ”に敷く */
}

/* セクションが表示されたら再生（JSで #about に is-anim を付けます） */
#about.is-anim .kw::after{
  animation: kw-underline .95s cubic-bezier(.2,.9,.2,1) forwards;
}

/* 2語目は少し遅らせる */
#about.is-anim .kw-pop::after{ animation-delay: .15s; }
#about.is-anim .kw-kawaii::after{ animation-delay: .45s; }

@keyframes kw-underline{
  0%   { transform: scaleX(0); }
  70%  { transform: scaleX(1.05); }
  100% { transform: scaleX(1); }
}

/* 動きを減らしたい設定の人にはアニメOFF */
@media (prefers-reduced-motion: reduce){
  #about.is-anim .kw::after{
    animation: none;
    transform: scaleX(1);
  }
}