:root{
  --base:#fffbf5;        /* ベースカラー */
  --lime:#FBFFEB;        /* 補助色（ライム） */
  --green:#5fbb46;      /* 補助色（緑） */
  --blue:#2a93d1;       /* 補助色（青） */
  --orange:#f5841b;      /* 補助色（オレンジ） */
  --white:#FFFFFF;       /* 補助色（白） */
  --pink:#e54eae; /* 補助色、ボタン等（桃） */
  --purple:#8e44ad;     /* 補助色（紫） */
  --mauve:#D8CCFF;
  --ink:#1d1739;
  --ink-soft:#635C87;
  --lime-ink:#5E6B24;
  --font:"Kosugi Maru","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--base);color:var(--ink);
  font-family:var(--font);line-height:1.95;font-size:16px;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:1060px;margin:0 auto;padding:0 24px;position:relative}
.honbun {
  background:var(--white);
  padding: 80px 40px;
}
.sec{
  padding:86px 0;
  background-color:var(--base);
}
.sec--white{background:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
.sec--whiteall{background-color:#FFF;}
.sec--lime{background:var(--lime)}
.hover:hover {
  opacity: 0.8;
}

.bg-dots {
  background-image: url('../images/bg_dots.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.pad {
  padding: 40px 40px;
}
.subtitle {
  text-align: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 24px;
}
.subtitle_movie {
  text-align: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 24px;
}


.bg-white {
  background-color: var(--white);
}

.program-lists {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.program-lists .program {
  border-radius: 8px;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 16px;
  border: solid 1px;
  width: 100%;
  line-height: 24px;
}
.program-lists .program-title {
  font-weight: bold;
  font-size: 20px;
  width: 220px;
}
.program-lists .program-title span {
  color: #FFF;
  background-color: #000;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-block;
  text-align: center;
  margin-right: 8px;
  font-size: 18px;
}
.program-lists .program-text {
  font-size: 16px;
  border-left: solid 1px;
  padding-left: 16px;
}
.program-lists .program:nth-child(1) { border-color: var(--pink); background-color: #fff8fc; }
.program-lists .program:nth-child(1) .program-title { color: var(--pink); }
.program-lists .program:nth-child(1) .program-title span { background-color: var(--pink); }
.program-lists .program:nth-child(1) .program-title span { background-color: var(--pink); }
.program-lists .program:nth-child(1) .program-text { border-color: var(--pink); }

.program-lists .program:nth-child(2) { border-color: var(--blue); background-color: #f0f8ff; }
.program-lists .program:nth-child(2) .program-title { color: var(--blue); }
.program-lists .program:nth-child(2) .program-title span { background-color: var(--blue); }
.program-lists .program:nth-child(2) .program-text { border-color: var(--blue); }

.program-lists .program:nth-child(3) { border-color: var(--orange); background-color: #fff8f0; }
.program-lists .program:nth-child(3) .program-title { color: var(--orange); }
.program-lists .program:nth-child(3) .program-title span { background-color: var(--orange); }
.program-lists .program:nth-child(3) .program-text { border-color: var(--orange); }

.program-lists .program:nth-child(4) { border-color: var(--green); background-color: #f0fff0; }
.program-lists .program:nth-child(4) .program-title { color: var(--green); }
.program-lists .program:nth-child(4) .program-title span { background-color: var(--green); }
.program-lists .program:nth-child(4) .program-text { border-color: var(--green); }

.program-lists .program:nth-child(5) { border-color: var(--purple); background-color: #f8f0ff; }
.program-lists .program:nth-child(5) .program-title { color: var(--purple); }
.program-lists .program:nth-child(5) .program-title span { background-color: var(--purple); }
.program-lists .program:nth-child(5) .program-text { border-color: var(--purple); }

.voicetitle {
  text-align: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 24px;
}

.voice-lists {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.voice-lists .voice {
  border-radius: 8px;
  padding: 16px;
  border: solid 1px;
  width: calc(50% - 8px);
}
.voice-lists .voice-head {
  font-size: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  margin-bottom: 16px;
}
.voice-lists .voice-head-title{
  font-weight: bold;
  font-size: 18px;
  width: calc(100% - 160px - 16px);
  text-align: center;
}
.voice-lists .voice-head-title label{
  rotate: -5deg;
  display: inline-block;
  padding: 8px 24px;
  background-color: #FFF;
  border-radius: 50%;
  width: 220px;
}
.voice-lists .voice-head-name{
  width: 160px;
  font-size: 15px;
  border-bottom: solid 1px #000;
}
.voice-lists .voice-text {
  font-size: 15px;
}
.voice-lists .voice-text span {
  font-weight: bold;
}

.voice-lists .voice:nth-child(1) { border-color: var(--pink); background-color: #fff8fc; }
.voice-lists .voice:nth-child(1) .voice-head-title { color: var(--pink); }
.voice-lists .voice:nth-child(1) .voice-head-title label { background-color: #f8e1ee; }
.voice-lists .voice:nth-child(1) .voice-head-name { border-color: var(--pink); }
.voice-lists .voice:nth-child(1) .voice-text { border-color: var(--pink); }
.voice-lists .voice:nth-child(1) .voice-text span { color: var(--pink); }

.voice-lists .voice:nth-child(2) { border-color: var(--blue); background-color: #f0f8ff; }
.voice-lists .voice:nth-child(2) .voice-head-title { color: var(--blue); }
.voice-lists .voice:nth-child(2) .voice-head-title label { background-color: #e1f0f8; }
.voice-lists .voice:nth-child(2) .voice-head-name { border-color: var(--blue); }
.voice-lists .voice:nth-child(2) .voice-text { border-color: var(--blue); }
.voice-lists .voice:nth-child(2) .voice-text span { color: var(--blue); }

.voice-lists .voice:nth-child(3) { border-color: var(--green); background-color: #f0fff0; }
.voice-lists .voice:nth-child(3) .voice-head-title { color: var(--green); }
.voice-lists .voice:nth-child(3) .voice-head-title label { background-color: #e1f8e1; }
.voice-lists .voice:nth-child(3) .voice-head-name { border-color: var(--green); }
.voice-lists .voice:nth-child(3) .voice-text { border-color: var(--green); }
.voice-lists .voice:nth-child(3) .voice-text span { color: var(--green); }

.voice-lists .voice:nth-child(4) { border-color: var(--orange); background-color: #fff8f0; }
.voice-lists .voice:nth-child(4) .voice-head-title { color: var(--orange); }
.voice-lists .voice:nth-child(4) .voice-head-title label { background-color: #f8e9e1; }
.voice-lists .voice:nth-child(4) .voice-head-name { border-color: var(--orange); }
.voice-lists .voice:nth-child(4) .voice-text { border-color: var(--orange); }
.voice-lists .voice:nth-child(4) .voice-text span { color: var(--orange); }




/* ---------- headings ---------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pink);margin:0 0 14px;display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--mauve)}
.h2{
  font-size:clamp(1.45rem,4.2vw,2.05rem);line-height:1.6;
  margin:0 0 10px;letter-spacing:.03em;color:var(--ink);
}
.lead{font-size:1rem;color:var(--ink-soft);margin:0 0 40px}

/* ---------- top bar ---------- */
.topbar{background:linear-gradient(45deg, #f5b859, #e54eae);color:#fff;font-size:.78rem;letter-spacing:.06em;padding:10px 0}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;text-align:center}
.tag-official{border:1px solid rgba(255,255,255,.6);border-radius:2px;padding:2px 12px;white-space:nowrap}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.8);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--mauve);
}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 24px}
.hdr-id{font-size:.9rem;letter-spacing:.04em;line-height:1.5;-webkit-text-stroke:.3px currentColor}
.hdr-id .sub{display:block;font-size:.68rem;color:var(--ink-soft);letter-spacing:.1em;-webkit-text-stroke:0}
.hdr-act{
  display:flex;
  align-items:center;
  gap:24px;
}
.hdr-tel{font-size:1.05rem;color:var(--pink);text-decoration:none;letter-spacing:.04em;white-space:nowrap}
.hdr-tel span{text-decoration:underline;}
.hdr-tel small{display:block;font-size:.62rem;letter-spacing:.14em;color:var(--ink-soft)}
.hdr-line img{
  width: 40px;
  vertical-align: bottom;
}


/* ---------- buttons ---------- */
.btn{
  background:var(--pink);color:#fff;text-decoration:none;
  font-size:.95rem;letter-spacing:.06em;padding:15px 30px;border-radius:999px;
  border:2px solid var(--pink);
  box-shadow:0 6px 18px rgba(107,78,230,.22);
  transition: .25s,transform .25s,box-shadow .25s;
  text-align: center;
}
.btn:hover{color:var(--pink);background-color:#fff;}
.btn.btn-app {
  background:var(--blue);
  border:2px solid var(--blue);
}
.btn.btn-app:hover {
  color:var(--blue);
  background-color:#fff;
}

.btn--sm{padding:10px 20px;font-size:.85rem;box-shadow:none;}
.btn--ghost{
  background:var(--white);
  color:#F58221;
  box-shadow:none;
  border:2px solid #F58221;
}
.btn--ghost:hover{
  color:#F58221;
  box-shadow:none;
}

/* -- top img -- */
.top-img{
  position:fixed;
  top: 50px;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
  background:var(--base);
  text-align:center;
}
.top-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 32%;
  max-width: 1600px;
}


/* ---------- hero ---------- */
.hero {
  position:relative;
  overflow:hidden;
  min-height:620px;
  display:flex;
  align-items:center;
  padding:24px 0 78px;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:var(--base)}
.hero-bg img{width:100%;height:100%;display:block;object-fit:cover;object-position:75% 32%}
.hero-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:flex-end;
  background:repeating-linear-gradient(135deg,var(--white) 0 22px,var(--base) 22px 44px);
}
.hero-ph span{
  margin-right:6%;padding:26px 34px;border:2px dashed var(--green);border-radius:20px;
  background:rgba(255,255,255,.86);color:var(--pink);font-size:.85rem;
  letter-spacing:.08em;text-align:center;line-height:1.9;
}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--base) 0%,rgba(241,237,255,.98) 32%,rgba(241,237,255,.8) 52%,rgba(241,237,255,.34) 76%,rgba(241,237,255,.14) 100%);
}
.hero .wrap{
  position:relative;
  z-index:2;
  display:flex;
  align-items: center;
  gap:0;
  flex-wrap:wrap;
}
.hero-inner{
  max-width:1060px;
  width:100%;
  text-align: center;
}
.hero-photo {
  width: 90%;
  height: auto;
  max-width: 720px;
  opacity:0;animation:stepIn .8s ease forwards;
  animation-delay: .12s;
}
.hero-sub{font-size:.86rem;letter-spacing:.14em;color:var(--pink);margin:0 0 22px}
.hero-sub::before{content:"";display:inline-block;width:24px;height:2px;background:#37b660;vertical-align:middle;margin-right:12px;border-radius:2px}
.hero-title {
  width: 100%;
  max-width: calc(100% - 540px);
}
.hero-title img {
  width: 100%;
  vertical-align: bottom;
  opacity:0;animation:stepIn .8s ease forwards;
  animation-delay: .6s;
}
.hero-content{
  position:relative;
  z-index:2;
  display:flex;
  align-items: center;
  gap:0;
  flex-wrap:wrap;
  justify-content: center;
}
.hero-content-point {
  width: 100%;
  max-width: 540px;
}

/* signature: the staircase */
.stair{margin:0 0 30px;padding:0;letter-spacing:.04em}
.step{
  font-size:3rem;line-height:1.3;color:var(--pink);
  display:block;
  -webkit-text-stroke:.8px currentColor;
  margin-bottom:3px;
}
.step span {
  color: #FFF;
  display: inline;
  padding: 8px;
}
.step-i span { background:var(--green); }
.step-ii span { background:var(--blue); }
.step-iii span { background:var(--orange); }
.step-ii { 
  margin-left:1.5em;
}
.step-iii {
  margin-left:3em;
}
.step-tread{display:block;height:3px;background:var(--green);opacity:.5;border-radius:3px;margin:0 0 8px;max-width:8.5em}
.stair-final{
  display:block;margin-top:20px;font-size:1.8rem;line-height:1.45;
  color:var(--ink);border-left:5px solid #37b660;padding-left:18px;border-radius:2px;
}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.hero-facts li{
  background:var(--white);border:1px solid var(--mauve);border-radius:2px;
  padding:6px 8px;font-size:.84rem;letter-spacing:.05em;
}
.hero-facts li.is-free{background:var(--lime);border-color:#DEE9AF;color:var(--lime-ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-note{font-size:.8rem;color:var(--ink-soft);margin:16px 0 0}

/* ---------- body copy ---------- */
.copy{max-width:1060px}
.copy p{margin:0 0 22px;font-size:1.02rem}
.copy p:last-child{margin-bottom:0}
.copy .kicker{
  font-size:clamp(1.1rem,3.6vw,1.45rem);line-height:1.75;color:var(--pink);
  font-weight: bold;
}
.copy em{font-style:normal;background:linear-gradient(transparent 60%,#5fbb46 60%);padding:0 2px}

/* ---------- points ---------- */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.point{background:var(--white);border:1px solid var(--mauve);border-radius:18px;padding:30px 26px}
.point-n{font-size:.76rem;letter-spacing:.16em;color:var(--pink);display:block;margin-bottom:10px}
.point-t{
  font-size:1.12rem;line-height:1.6;margin:0 0 10px;color:var(--pink);
  padding-left: 40px;
  position: relative;
}
.point-t:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 32px;
  height: 24px;
}
.point-t.p1:before { background-image: url('../images/picon_1.png'); }
.point-t.p2:before { background-image: url('../images/picon_2.png'); }
.point-t.p3:before { background-image: url('../images/picon_3.png'); }
.point-t.p4:before { background-image: url('../images/picon_4.png'); }
.point-t.p5:before { background-image: url('../images/picon_5.png'); }

.point-d{font-size:.9rem;color:var(--ink-soft);margin:0}
.point--free{background:var(--lime);border-color:#DEE9AF}
.point--free .point-n{color:var(--lime-ink)}
.point--free .point-t{color:#4C5A19}
.point--free .point-d{color:#5F6A35}

/* ---------- target ---------- */
.target{display:grid;grid-template-columns:1fr 1fr;gap:16px;list-style:none;padding:0;margin:0}
.target li{
  background:var(--base);border-radius:16px;padding:20px 22px 20px 58px;
  position:relative;font-size:.95rem;line-height:1.8;
}
.target li:before {
  content: "";
  background-image: url('../images/point.png');
  background-size: contain;
  background-repeat: no-repeat;
  position:absolute;
  left:16px;
  top:24px;
  width:32px;
  height:32px;
}
.def{margin:38px 0 0;background:var(--lime);border-radius:16px;padding:24px 26px;font-size:.9rem;color:#5A6430}
.def dt{color:var(--lime-ink);font-size:1.1rem;margin-bottom:6px;}
.def dd{margin:0;line-height:1.85;font-size:1rem;}

/* ---------- timeline ---------- */
.phase{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;padding:0;list-style:none;font-size:.9rem}
.phase li{display:flex;align-items:center;gap:9px;background:var(--white);border-radius:2px;padding:6px 18px;color:var(--pink)}
.phase li::before{content:"";width:9px;height:9px;background:var(--green);border-radius:50%}
.tl{position:relative;margin:0;padding:0;list-style:none; margin-top:40px}
.tl::before{content:"";position:absolute;left:57px;top:16px;bottom:16px;width:2px;background:var(--mauve);border-radius:2px}
.day{position:relative;display:grid;grid-template-columns:114px 1fr;gap:0 26px;padding:0 0 26px}
.day:last-child{padding-bottom:0}
.day-n{position:relative;text-align:right;padding-right:22px}
.day-n b{font-size:1.5rem;color:var(--pink);display:block;line-height:1.15;letter-spacing:.02em;font-weight:400}
.day-n span{font-size:.62rem;letter-spacing:.2em;color:var(--pink);opacity:.75}
.day-n::after{
  content:"";position:absolute;right:-7px;top:10px;width:14px;height:14px;border-radius:50%;
  background:var(--white);border:3px solid var(--green);
}
.day-body{background:var(--white);border-radius:18px;padding:22px 26px;box-shadow:0 2px 10px rgba(107,78,230,.06)}
.day-chip{
  display: inline-block;
  font-size: 1rem;
  letter-spacing: .09em;
  color: var(--blue);
  font-weight: bold;
}
.day-t{font-size:1.08rem;margin:0 0 8px;color:var(--ink);}
.day-d{margin:0;font-size:.9rem;color:var(--ink-soft)}
.day--final .day-body{ border: solid var(--pink) 2px; }
.tl-block{
  margin-top: 32px;
  text-align:center;
  padding: 8px 16px;
  background: var(--lime);
}
.tl-note{
  font-size:1rem;
  color:var(--ink-soft);
  display: inline-block;
  text-align: left;
  margin: 0;
}
.tl-note em{
  font-style:normal;
  background:linear-gradient(transparent 80%,var(--green) 80%);
  padding:0 2px;}


/* ---------- briefing ---------- */
.brief{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bcard{background:var(--base);border-radius:20px;padding:26px 28px}
.bcard-date{font-size:1.35rem;color:var(--pink);margin:0 0 4px;}
.bcard-date small{font-size:.8rem;-webkit-text-stroke:0}
.bslot{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:2px solid var(--white);padding:13px 0 0;margin-top:10px}
.bslot-time{font-size:1.1rem;color:var(--ink)}
.bslot-time span{font-size:.78rem;color:var(--ink-soft);margin-left:3px}
.bslot-mode{font-size:.78rem;letter-spacing:.05em;padding:4px 14px;border-radius:2px;white-space:nowrap}
.mode-onsite{background:var(--green);color:#fff}
.mode-online{background:var(--white);color:var(--pink);border:1px solid var(--mauve)}
.brief-note{margin:22px 0 0;font-size:.85rem;color:var(--ink-soft)}
.brief-btn{text-align:center;margin-top:40px}
.brief-btn .btn {
  padding: 20px 30px;
}

.brief-period {
  margin: 40px auto 0;
  border: 1px solid var(--ink-soft);
  border-radius: 2px;
  display: flex;
  width: 100%;
  max-width: 420px;
  justify-content: center;
  box-sizing: content-box;
}

.brief-period-label {
  background: var(--ink-soft);
  color: var(--white);
  width: 120px;
  font-size: .85rem;
  padding-top: 2px;
}
.brief-period-date {
  font-size: .95rem;
  width: 300px;
}
.brief-period-date span {
  font-size: .85rem;
  margin-right: 1px;
}

.flyer-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 32px;
}
.flyer-flex a {
  width: calc(50% - 16px);
}
.flyer-flex img {
  border-radius: 4px;
  width: 100%;
}


/* ---------- final cta ---------- */
.cta{background:linear-gradient(45deg, #f5b859, #e54eae);padding:74px 0;color:#fff}
.cta .h2{color:#fff}
.cta .eyebrow{color:#FFFFFF}
.cta .eyebrow::after{background:rgba(255,255,255,.5)}
.cta-lead{margin:0 0 32px;font-size:.98rem;color:#fff;}
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap: 48px 32px;
  align-items:center;
}
.cta-tel{
  display:inline-flex;flex-direction:column;text-decoration:none;background:var(--white);
  padding:18px 34px;border-radius:20px;color:var(--pink);
}
.cta-tel small{font-size:.7rem;letter-spacing:.16em;color:var(--ink-soft);margin-bottom:2px}
.cta-tel b{text-decoration: underline; font-size:2rem;letter-spacing:.04em;line-height:1.25;font-weight:400;}

.cta-line{
  color:var(--ink-soft);
  display:inline-flex;
  flex-direction:column;
  text-decoration:none;
  background:var(--white);
  padding:18px 34px 18px 34px;
  border-radius:20px;
}
.cta-line img{
  width: 64px;
  vertical-align: bottom;
  opacity:0;
  animation:stepIn .8s ease forwards;
  animation-delay: .52s;
}

/* ---------- footer ---------- */
.ft{background:#371e2e;color:#D5CEF2;padding:46px 0 32px;font-size:.85rem}
.ft-official{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.ft-official li{border:1px solid rgba(255,255,255,.35);border-radius:2px;padding:4px 14px;font-size:.75rem}
.ft-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
.ft dt{font-size:.68rem;letter-spacing:.18em;color:#b3b3b3;margin-bottom:5px}
.ft dd{margin:0 0 14px;font-size:1rem;color:#fff}
.ft-bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:18px;font-size:.75rem;color:#AFA5D8}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
.rise-app{margin-top: 80px;}
.step,.stair-final{opacity:0;animation:stepIn .8s ease forwards;}
.step-i{animation-delay:.12s}
.step-ii{animation-delay:.3s}
.step-iii{animation-delay:.48s}
.stair-final{animation-delay:.7s}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise,.step,.stair-final{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

.day-program { 
  font-size: 1rem;
  padding-left: 32px;
  margin-top: 16px;
}
.day-program li {
  line-height: 1.8;
  font-size: 1.1rem;
}
.ft-logo {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 12px;
}
.ft-logo .logo_himeji {
  width: 200px;
}
.ft-logo .logo_human {
  width: 48px;
}

/* --- faq --- */
.faq {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  margin-top: 40px;
}
.faq .faq-item {
  width: 100%;
  background-color: var(--white);
  padding: 0px 40px;
  text-align: left;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
}
.faq .faq-q {
  padding: 16px 20px 16px 40px;
  position: relative;
  color: var(--ink);
}
.faq .faq-q::before {
  content: "Q.";
  position: absolute;
  left: 0;
  font-size: 24px;
  top: 8px;
}
.faq .faq-a {
  padding: 16px 20px 16px 40px;
  position: relative;
  border-top: dotted 1px var(--ink);
  color: var(--pink);
}
.faq .faq-a::before {
  content: "A.";
  position: absolute;
  left: 0;
  font-size: 24px;
  top: 8px;
}

/* ---------- request ---------- */
.request-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  justify-content: flex-start;
}
.request-area {
  border-radius: 16px;
  color: var(--white);
  padding: 16px 24px 8px;
  text-align: center;
  text-decoration: none;
  width: 260px;
  box-shadow: 0 6px 18px rgba(107, 78, 230, .22);
}
.request-area.tel {
  background-color: var(--orange);
}
.request-area.line {
  background-color: #35BC5C;
}
.request-area h5 {
  font-size: 1.3rem;
  line-height: 1.2;
  position: relative;
  margin: 0;
  display: block;
  font-weight: normal;
  letter-spacing: 2px;
}
.request-area h5:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 1px;
  border-top: 1px solid var(--white);
}
.request-area h5:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 1px;
  border-top: 1px solid var(--white);
}
.request-area small {
  font-size: 0.8rem;
  display: block;
  margin-bottom: 8px;
}
.request-area-main {
  position: relative;
  font-weight: bold;
  background-color: var(--white);
  color: var(--orange);
  padding: 4px 16px 4px 40px;
  border-radius: 999px;
  font-size: 1.08rem;
  text-align: center;
  letter-spacing: 1px;
}
.request-area.tel .request-area-main {
  color: var(--orange);
}
.request-area.line .request-area-main {
  color: var(--green);
}
.request-area-main::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.request-area.tel .request-area-main::before {
  background-image: url('../images/icon_freetel.gif');
}
.request-area.line .request-area-main::before {
  background-image: url('../images/icon_line.png');
}
.request-area-sub {
  font-size: 0.85rem;
  margin-top: 4px;
}
.request-area-sub span {
  font-size: 0.7rem;
}
.sp{
  display:none;
}

/* ---------- header request ---------- */
.hdr-first .request-flex {
  gap: 24px;
}
.hdr-first .request-area {
  padding: 8px 20px 4px;
  width: 240px;
}
.hdr-first .request-area small {
  margin-bottom: 4px;
}
.hdr-first .request-area-main{
  font-size: 1rem;
  padding: 4px 12px 4px 36px;
}
.hdr-first .request-area-sub{
  margin-top: 2px;
  font-size: 0.8rem;
}

.hdr-first { display: block; }
.hdr-first.scroll { display: none; }

.hdr-act { display: none; }
.hdr-act.scroll { display: flex; }

.hdr-photo {
  display: block;
  max-width: 360px;
}
.hdr-photo.scroll {
  display: none;
}

.hdr-photo-sub {
  display: none;
  max-width: 260px;
}
.hdr-photo-sub.scroll {
  display: block;
}


.def--wide {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
}
.def--wide dt {
  width: 120px;
  margin-bottom: 0;
  line-height: 32px;
}
.def--wide dd {
  width: calc(100% - 120px - 40px);
  line-height: 32px;
}
.bg-orange {
  background-color: #FDF9F4;
}
.jobtitle {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 24px;
}
.job-lists {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.job-lists img {
  width: calc(100% / 3 - 12px);
  max-width: 330px;
  border-radius: 8px;
}

.flyer-video {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.intro-video {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

@media (max-width:1080px){
  .hdr-photo {
    display: none;
  }
  .hdr-photo-sub {
    display: block;
  }
}

/* ---------- responsive ---------- */
@media (max-width:900px){

  .hdr-first { display: none; }
  .hdr-first.scroll { display: none; }

  .hdr-act { display: flex; }
  .hdr-act.scroll { display: flex; }

  .pad { padding: 20px 20px; }

  .h2 { font-size: 1.8rem; }
  .points{grid-template-columns:1fr 1fr}
  .brief{grid-template-columns:1fr}
  .hero-veil{background:linear-gradient(115deg,var(--base) 0%,rgba(241,237,255,.97) 44%,rgba(241,237,255,.82) 66%,rgba(241,237,255,.3) 100%)}
  .hdr-tel{font-size:.95rem;}
  .hdr-id{font-size:.85rem;letter-spacing:.02em;}
  .btn--sm {
    padding: 6px 10px;
    font-size: .8rem;
  }
  .stair .step {
    display: inline-block;
    padding: 4px;
    font-size: 24px;
  }
  .step-ii{margin-left:0;}
  .step-iii{margin-left:0;}

  .hero {
    padding: 40px 0 60px;
  }
  .hero .wrap{
    flex-direction: column-reverse;
    gap: 24px;
  }
  .hero-inner {
    max-width: 100%;
  }
  .hero-title {
    max-width: 100%;
    text-align: center;
  }
  .hero-title img {
    max-width: 480px;
  }
  .request-area {
    width: 240px;
    padding: 16px 20px 8px;
  }
  .request-area-main {
    font-size: 1rem;
  }
  .job-lists img {
    width: calc(100% / 2 - 16px);
  }

  .voice-lists .voice-head {
    font-size: 20px;
    flex-wrap: wrap;
  }
  .voice-lists .voice-head-title{
    width: 100%;
  }
  .voice-lists .voice-head-name{
    width: 100%;
  }
  .voice-lists .voice-head-name br{
    display: none;
  }

  .hdr-photo {
    display: none;
  }
  .hdr-photo-sub {
    display: block;
  }
  .hdr-photo-sub {
    max-width: 240px;
  }

}

@media (max-width:640px){
  .pc { display: none !important; }
  .sp { display:block; }

  .lead { font-size: 0.85rem; }

  .stair-final { font-size: 1.2rem; }

  .hdr-act { gap: 12px; }
  .hdr-line img { width: 32px; }
  .sec{padding:60px 0}
  .wrap{padding:0 16px}
  .honbun{padding:40px 20px}
  .pad { padding: 20px 12px; }
  .hdr .wrap{padding:8px 12px}
  .hdr-tel{display:none}
  .hero{min-height:0;padding:0 0 100px}
  .hero-bg img{object-position:center 26%}
  .hero-ph span{margin:0 auto;font-size:.78rem;padding:18px 22px}
  .hero-ph{align-items:flex-end;padding-bottom:40px}
  .hero-veil{background:linear-gradient(180deg,var(--base) 0%,rgba(241,237,255,.98) 46%,rgba(241,237,255,.72) 66%,rgba(241,237,255,.1) 100%)}
  .points{grid-template-columns:1fr}
  .target{grid-template-columns:1fr}
  .day{grid-template-columns:60px 1fr;gap:0 16px}
  .tl::before{left:29px}
  .day-n{padding-right:12px}
  .day-n b{font-size:1.18rem}
  .day-n::after{right:-6px;width:12px;height:12px;border-width:2px}
  .ft-grid{grid-template-columns:1fr}
  .cta-tel b{font-size:1.4rem}
  .point-t{
    padding-left: 36px;
    font-size: 1rem;
  }
  .point-t::before{
    width: 24px;
    height: 20px;
    top: 2px;
  }
  .stair .step {
    font-size: 20px;
  }

  .tag-official{ display:none; }
  .hdr-id { font-size: 0.70rem; }
  .hdr-id .lineb { display:block; }
  .hdr-id .sub { display:none; }
  .btn{
    font-size:.85rem;
    letter-spacing:.04em;
    padding: 12px 16px;
    width: 230px;
  }
  .btn.btn--sm {
    padding: 4px 12px;
    font-size: .75rem;
    width: auto;
  }

  .bcard { padding: 16px 20px; }
  .bcard-date { font-size: 1.2rem; }

  .point {
    padding: 16px 12px;
  }
  .day {
    display: flex;
  }
  .day-body {
    padding: 16px 12px;
    width: 100%;
    font-size: 0.9rem;
  }
  .day-program { 
    font-size: 0.9rem;
    padding-left: 24px;
  }
  .day-program li {
    font-size: 0.9rem;
  }
  .rise-app{margin-top: 60px;}

  .ft-logo span {
    font-size: 0.9rem;
  }

  .ft-logo .logo_himeji {
    /* width: 64px;*/
  }
  .ft-logo .logo_human {
    width: 40px;
  }

  .flyer-flex {
    flex-wrap: wrap;
    gap: 16px;
  }
  .flyer-flex a {
    width: 100%;
  }

  .h2 { font-size: 1.2rem; }

  .hero-facts li {
    font-size: 0.8rem;
    padding: 4px 8px;
  }
  .copy p { font-size: 0.9rem; }

  .def dt { font-size: 1.1rem; }
  .def dd { font-size: 0.85rem; }

  .target li {
    padding: 16px 20px 16px 44px;
    font-size: 0.9rem;
  }
  .target li:before {
    left: 12px;
    top: 20px;
    width: 24px;
    height: 24px;
  }
  .tl-note { font-size: 0.85rem; }

  .cta-row {
    justify-content: center;
    gap: 32px;
  }
  .cta-lead { font-size: 0.85rem;}
  .cta-tel{ padding: 12px 20px;}
  .cta-line{ padding: 14px 16px;}
  .cta-line img { width: 48px; }
  .faq {
    margin-top: 32px;
  }
  .faq .faq-item {
    padding: 0px 20px;
    font-size: 14px;
  }
  .faq .faq-q {
    padding: 12px 0 12px 24px;
  }
  .faq .faq-q::before {
    font-size: 18px;
    top: 8px;
  }
  .faq .faq-a {
    padding: 12px 0 12px 24px;
  }
  .faq .faq-a::before {
    font-size: 18px;
    top: 8px;
  }
  
  .brief-period { flex-wrap: wrap; }
  .brief-period-label { width: 100%; }
  .brief-period-date { width: 100%; }

  .request-flex {
    justify-content: center;
  }
  .request-area {
    min-height: 140px;
  }

  .def--wide {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .def--wide dt {
    width: 100%;
  }
  .def--wide dd {
    width: 100%;
  }
  .def--wide dt:first-child {
    margin-top: 0;
  }
  .def--wide dt:not(:first-child) {
    margin-top: 16px;
  }

  .subtitle {
    margin-bottom: 8px;
  }
  .subtitle_movie {
    max-width: 240px;
    margin-bottom: 8px;
  }
  .flyer-flex {
    margin-top: 16px;
  }

  .program-lists .program {
    flex-wrap: wrap;
    gap: 8px;
  }
  .program-lists .program-title {
    width: 100%;
    font-size: 20px;
  }
  .program-lists .program-text {
    width: 100%;
    border-left: none;
    padding-left: 0;
    font-size: 16px;
  }
  .job-lists img {
    width: 100%;
  }
  .voicetitle {
    margin-bottom: 8px;
  }

  .voice-lists .voice {
    width: 100%;
  }

  .hdr-photo-sub {
    max-width: 160px;
  }
}