/*
 * Gunseisha X Lab — スタイルシート
 *
 * 編集ガイド
 * ・色：先頭の :root にある変数
 * ・TOP：.hero / .hero-copy / .hero-art / .hero h1
 * ・共通ボタン：.cta
 * ・本文の幅：.inner
 * ・各セクション：.about-grid / .mission-card / .support-row など
 * ・今回の見やすさ調整：「Readability refinement」以降
 * ・スマートフォン：各 @media(max-width:700px) のブロック
 *
 * 後に書かれた指定が優先されます。見た目を微調整するときは
 * 下部の可読性調整ブロック内の該当セレクターを編集してください。
 * 素材は assets/、文言とリンクは index.html、動作は script.js です。
 */

:root {
  --ink:#0a1923;
  --green:#489b25;
  --blue:#0077ed;
  --grad:linear-gradient(115deg,#91cc29 0%,#36a69b 52%,#0075f7 100%);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:#fff;
}

h1,h2,h3,p {
  margin:0;
}

p {
  line-height:1.95;
}

em {
  font-style:normal;
  background:var(--grad);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}

strong {
  color:#278b21;
}

.blue {
  color:#0072ce;
}

a {
  color:inherit;
}

.skip {
  position:fixed;
  top:-100px;
  z-index:10;
  background:white;
  padding:15px;
}

.skip:focus {
  top:0;
}

a:focus-visible {
  outline:3px solid #002c69;
  outline-offset:5px;
}

.hero {
  position:relative;
  min-height:min(56.25vw,900px);
  max-width:1800px;
  margin:auto;
  isolation:isolate;
  overflow:hidden;
  background:#fff;
}

.hero-copy {
  position:relative;
  z-index:1;
  width:49%;
  padding:5.2% 0 6% 4.5%;
}

.brand {
  font-size:clamp(18px,2.6vw,42px);
  color:#0b204d;
  letter-spacing:.1em;
  font-weight:500;
  text-align:center;
  white-space:nowrap;
}

.brand span {
  color:#169ea3;
}

.tagline {
  font-size:clamp(12px,1.38vw,22px);
  text-align:center;
  color:#42506e;
  font-weight:300;
}

.kana {
  letter-spacing:.3em;
  text-align:center;
  font-size:clamp(11px,1.3vw,20px);
  margin:8px 0 24px;
}

.locations {
  font-size:clamp(10px,1.35vw,20px);
  font-weight:700;
  border:1px solid #b4dedb;
  background:linear-gradient(100deg,#f5f9ee,#eaf4ff);
  border-radius:40px;
  text-align:center;
  line-height:1.5;
  padding:11px 8px;
  max-width:480px;
  margin:0 auto 24px;
  color:#278e50;
}

.hero h1 {
  font-size:clamp(28px,4.1vw,67px);
  line-height:1.4;
  letter-spacing:-.055em;
  font-weight:800;
  white-space:nowrap;
}

.hero h1 em:first-child {
  font-size:1.3em;
  letter-spacing:.015em;
}

.hero-lead {
  font-size:clamp(14px,1.85vw,28px);
  font-weight:700;
  line-height:1.8;
  margin-top:20px;
}

.hero-detail {
  font-size:clamp(11px,1.28vw,20px);
  margin-top:8px;
}

.hero-art {
  position:absolute;
  inset:0 0 0 44%;
  z-index:-1;
  background:url('assets/hero-clean.png') right center/auto 100% no-repeat;
  mask-image:linear-gradient(to right,transparent,#000 8%);
}

.hero:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:12%;
  height:100%;
  z-index:-1;
  background:url('assets/01.png') left top/auto 100% no-repeat;
  opacity:.5;
}

.cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:55px;
  width:min(520px,90%);
  min-height:68px;
  margin:36px auto 0;
  padding:12px 25px;
  border-radius:80px;
  background:var(--grad);
  color:#fff;
  text-decoration:none;
  font-size:26px;
  font-weight:700;
  letter-spacing:.08em;
  border:2px solid #fff;
  box-shadow:0 9px 16px #29677b28;
  transition:transform .2s,box-shadow .2s;
}

.cta span {
  font-size:38px;
  line-height:1;
}

.cta:hover {
  transform:translateY(-3px);
  box-shadow:0 13px 23px #29677b40;
}

.hero .cta {
  margin:24px 0 0;
  width:90%;
  min-height:62px;
  font-size:clamp(18px,2vw,30px);
}

.scene {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:65px 0;
  background:radial-gradient(ellipse at 100% 90%,#eaf6ff77,transparent 55%),radial-gradient(ellipse at 0 100%,#eaf7d855,transparent 45%),#fff;
}

.scene:before,.scene:after {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  width:17%;
  background:url('assets/01.png') left center/auto 100% no-repeat;
  pointer-events:none;
}

.scene:before {
  left:0;
  mask-image:linear-gradient(to right,#000,transparent);
}

.scene:after {
  right:0;
  background-position:right center;
  mask-image:linear-gradient(to left,#000,transparent);
}

.inner {
  width:min(1140px,84%);
  margin:auto;
}

.section-head {
  text-align:center;
  margin-bottom:30px;
}

.icon {
  width:48px;
  height:48px;
  flex-shrink:0;
  color:#339527;
}

.section-head>.icon {
  width:38px;
  height:38px;
  margin-bottom:8px;
}

.section-head h2 {
  font-size:clamp(30px,3.4vw,54px);
  line-height:1.4;
  font-weight:800;
  letter-spacing:.015em;
}

.section-head h2:after {
  content:"";
  display:block;
  background:var(--grad);
  height:2px;
  width:min(620px,85%);
  margin:12px auto 14px;
  border-radius:50%;
}

.section-head h2 small {
  display:block;
  font-size:.57em;
  letter-spacing:0;
}

.section-head p {
  font-size:18px;
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  align-items:center;
  margin-bottom:28px;
}

.about-copy {
  font-size:19px;
  font-weight:650;
  line-height:2;
}

.checks {
  list-style:none;
  margin:0;
  padding:12px 28px;
  background:#fff;
  border-radius:24px;
  box-shadow:0 8px 22px #1a4c6620;
}

.checks li {
  font-size:17px;
  line-height:1.8;
  padding:18px 0 18px 45px;
  position:relative;
}

.checks li+li {
  border-top:1px dashed #c4d8df;
}

.checks li:before {
  content:'✓';
  position:absolute;
  left:0;
  top:20px;
  width:30px;
  height:30px;
  text-align:center;
  border-radius:50%;
  background:#eaf6e2;
  color:#388e20;
  font-weight:bold;
}

.cards {
  display:grid;
  gap:22px;
}

.three {
  grid-template-columns:repeat(3,1fr);
  max-width:950px;
  margin:auto;
}

.two {
  grid-template-columns:repeat(2,1fr);
}

.card {
  background:#fff;
  border-radius:24px;
  box-shadow:0 7px 19px #163f5719;
  padding:25px;
  display:flex;
  align-items:center;
  gap:24px;
}

.three .card {
  display:block;
  text-align:center;
  padding:24px 12px;
}

.icon-bubble {
  width:100px;
  height:100px;
  flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#ecf6de,#f1f8fc);
  display:grid;
  place-items:center;
}

.icon-bubble .icon {
  width:61px;
  height:61px;
}

.three .icon-bubble {
  margin:0 auto 16px;
}

.card:nth-child(even) .icon-bubble {
  background:linear-gradient(135deg,#ecf7ff,#e2efff);
}

.card:nth-child(even) .icon {
  color:#0072de;
}

h3 {
  font-size:23px;
  line-height:1.5;
}

.card h3 {
  color:#298c2e;
  margin-bottom:9px;
}

.card:nth-child(even) h3 {
  color:#086dca;
}

.card p {
  font-size:17px;
}

.mission-top {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  min-height:260px;
  align-items:center;
  margin-bottom:24px;
}

.mission-top p {
  font-size:18px;
  line-height:2.3;
  position:relative;
  z-index:1;
}

.mission-top p strong {
  font-size:22px;
}

.mission-art {
  height:290px;
  background:url('assets/02.png') 100% 0/205% auto no-repeat;
  border-radius:50% 15% 10% 40%;
  mask-image:linear-gradient(to right,transparent,#000 18%);
}

.mission-card {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:30px;
  background:#fff;
  border-radius:30px;
  padding:28px;
  box-shadow:0 5px 22px #1a4c6618;
  align-items:center;
}

.mission-photo {
  width:180px;
  aspect-ratio:1;
  background:url('assets/02.png');
  background-size:510% auto;
  background-position:4.7% 75%;
  border-radius:50%;
}

.mission-card h2 {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:30px;
  color:#308f25;
  letter-spacing:.18em;
  margin-bottom:10px;
}

.mission-card p {
  font-size:16px;
  font-weight:600;
  line-height:2;
}

.values {
  grid-column:1/-1;
  display:flex;
  justify-content:center;
  gap:50px;
}

.values>div {
  display:flex;
  align-items:center;
  gap:12px;
  color:#079b88;
  font-weight:bold;
}

.values .icon {
  width:37px;
  height:37px;
}

.support-list {
  display:grid;
  gap:14px;
}

.support-row {
  display:grid;
  grid-template-columns:74px 60px 1fr 30%;
  gap:24px;
  align-items:center;
  background:#fff;
  border-radius:20px;
  box-shadow:0 5px 15px #1a4c661a;
  overflow:hidden;
  min-height:120px;
  padding-left:24px;
}

.number {
  width:65px;
  height:65px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eaf5e3;
  color:#469b2b;
  font-size:35px;
  font-weight:600;
}

.support-row h3 {
  font-size:24px;
}

.support-row p {
  font-size:16px;
  margin-top:7px;
  line-height:1.7;
}

.support-photo {
  height:100%;
  min-height:120px;
  background-image:url('assets/03.png');
  background-size:393.4% 672%;
  border-radius:60px 0 0 60px;
  background-position-x:80.1%;
}

.photo-0 {
  background-position-y:25%;
}

.photo-1 {
  background-position-y:44%;
}

.photo-2 {
  background-position-y:62.7%;
}

.photo-3 {
  background-position-y:81%;
}

.wanted .card {
  padding:26px 24px;
  min-height:176px;
}

.wanted h3,.wanted .card:nth-child(even) h3 {
  color:var(--ink);
  font-size:22px;
  font-weight:650;
  line-height:1.85;
  margin:0;
}

.wanted p:empty {
  display:none;
}

.center {
  text-align:center;
}

.closing {
  font-size:21px;
  line-height:1.8;
  margin:32px auto 0;
  text-align:center;
}

.flow {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  list-style:none;
  padding:0;
  margin:35px 0;
}

.flow li {
  position:relative;
  background:#fff;
  border-radius:26px;
  box-shadow:0 6px 18px #234c6119;
  text-align:center;
  padding:32px 15px 25px;
}

.flow .icon-bubble {
  margin:0 auto 17px;
}

.flow h3 {
  font-size:20px;
  margin-bottom:10px;
}

.flow p {
  font-size:17px;
  line-height:1.8;
}

.flow li:not(:last-child):after {
  content:'→';
  position:absolute;
  right:-29px;
  top:85px;
  font-size:40px;
  color:#40a533;
  z-index:1;
}

.step {
  position:absolute;
  left:15px;
  top:15px;
  color:#369429;
  font-size:19px;
}

.exit-card {
  position:relative;
  overflow:hidden;
  border:1px solid #dfecea;
  background:#fff;
  text-align:center;
  border-radius:20px;
  padding:30px 20px 145px;
  box-shadow:0 8px 20px #22556a18;
}

.exit-card .icon-bubble {
  margin:0 auto 20px;
}

.exit-card h3 {
  color:#188b4b;
  font-size:32px;
  margin-bottom:15px;
}

.exit-card:nth-child(2) h3 {
  color:#066dd5;
}

.exit-card p {
  font-size:18px;
}

.ghost {
  position:absolute;
  top:18px;
  left:20px;
  font-size:100px;
  color:#f0f7f1;
  font-weight:700;
}

.exit-sky {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:125px;
  background-image:url('assets/06.png');
  background-size:260% auto;
  background-position-y:80%;
}

.sky-0 {
  background-position-x:11%;
}

.sky-1 {
  background-position-x:90%;
}

.pill {
  background:#fff;
  border:1px solid #e2edf5;
  border-radius:50px;
  padding:16px 25px;
  font-size:18px;
}

.contact {
  padding:110px 0;
}

.contact-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:50px;
  align-items:center;
}

.contact h2 {
  font-size:clamp(29px,3.1vw,46px);
  line-height:1.65;
  letter-spacing:-.03em;
  margin-bottom:25px;
}

.contact p {
  font-size:17px;
  line-height:2.2;
}

.contact .cta {
  margin-left:0;
  width:360px;
  font-size:23px;
}

.contact .note {
  margin-top:25px;
  font-size:16px;
}

.contact-card {
  background:#fff;
  border-radius:28px;
  box-shadow:0 8px 24px #244c6325;
  padding:32px;
}

.contact-card>.icon-bubble {
  margin:-72px auto 25px;
  background:#fff;
  box-shadow:0 5px 12px #163f5720;
}

.contact-card h3 {
  font-size:24px;
  color:#239968;
  text-align:center;
}

.contact-card dl {
  margin:30px 0 0;
}

.contact-card dt {
  border-bottom:1px dashed #a7d1c3;
  padding-bottom:10px;
  font-size:16px;
}

.contact-card dd {
  margin:18px 0 28px;
  font-size:22px;
  font-weight:700;
}

.contact-card dd:last-child {
  margin-bottom:0;
}

.phone {
  font-size:clamp(28px,3vw,43px);
  text-decoration:none;
  white-space:nowrap;
  letter-spacing:.015em;
}

.back-top {
  position:fixed;
  right:20px;
  bottom:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  color:#188c73;
  border:1px solid #c9e3da;
  display:grid;
  place-items:center;
  text-decoration:none;
  box-shadow:0 3px 12px #17453520;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}

.back-top.visible {
  opacity:1;
  pointer-events:auto;
}


/* 画面幅・表示設定に応じた調整 */
@media(min-width:1600px) {
  .hero-copy {
    padding-top:80px;
  }

  .hero-art {
    background-size:auto 100%;
  }

  .hero {
    min-height:900px;
  }

}


/* 画面幅・表示設定に応じた調整 */
@media(max-width:1000px) and (min-width:701px) {
  .inner {
    width:90%;
  }

  .scene {
    padding:48px 0;
  }

  .card {
    gap:15px;
    padding:20px;
  }

  .icon-bubble {
    width:75px;
    height:75px;
  }

  .icon-bubble .icon {
    width:47px;
    height:47px;
  }

  h3,.card h3 {
    font-size:19px;
  }

  .card p {
    font-size:15px;
  }

  .about-copy {
    font-size:16px;
  }

  .checks {
    padding:8px 18px;
  }

  .checks li {
    font-size:14px;
  }

  .support-row {
    gap:15px;
    grid-template-columns:50px 40px 1fr 26%;
    padding-left:15px;
  }

  .number {
    width:45px;
    height:45px;
    font-size:25px;
  }

  .support-row>.icon {
    width:36px;
  }

  .support-row h3 {
    font-size:20px;
  }

  .flow {
    gap:15px;
  }

  .flow h3 {
    font-size:17px;
  }

  .flow p {
    font-size:15px;
  }

  .mission-top p {
    font-size:15px;
  }

  .mission-top p strong {
    font-size:18px;
  }

  .contact-grid {
    gap:25px;
  }

  .contact-card {
    padding:25px;
  }

  .contact-card dd {
    font-size:19px;
  }

}


/* 画面幅・表示設定に応じた調整 */
@media(max-width:700px) {
  .hero {
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  .hero-copy {
    width:100%;
    padding:30px 22px 10px;
    text-align:center;
  }

  .brand {
    font-size:24px;
    letter-spacing:.075em;
  }

  .tagline {
    font-size:13px;
  }

  .kana {
    font-size:12px;
    margin:10px 0 22px;
  }

  .locations {
    font-size:12px;
    max-width:360px;
    margin-bottom:22px;
    padding:10px 5px;
  }

  .hero h1 {
    font-size:clamp(25px,6.9vw,45px);
    line-height:1.5;
    letter-spacing:-.065em;
  }

  .hero h1 em:first-child {
    font-size:1.4em;
  }

  .hero-lead {
    font-size:clamp(14px,3.8vw,22px);
    line-height:1.9;
    margin-top:20px;
  }

  .hero-detail {
    font-size:12px;
    margin-top:10px;
  }

  .hero .cta {
    margin:22px auto 0;
    width:94%;
    font-size:22px;
    min-height:62px;
  }

  .hero-art {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:1.13;
    background-size:auto 100%;
    background-position:right center;
    mask-image:linear-gradient(to bottom,transparent,#000 8%);
    z-index:0;
  }

  .hero:before {
    width:19%;
    opacity:.4;
  }

  .scene {
    padding:48px 0;
  }

  .scene:before,.scene:after {
    width:19%;
    opacity:.45;
  }

  .inner {
    width:calc(100% - 36px);
  }

  .section-head {
    margin-bottom:24px;
  }

  .section-head h2 {
    font-size:clamp(25px,6.3vw,38px);
    letter-spacing:-.04em;
  }

  .section-head>.icon {
    width:30px;
    height:30px;
  }

  .section-head p {
    font-size:14px;
    line-height:1.9;
  }

  .section-head h2:after {
    margin:12px auto;
  }

  .cta {
    font-size:21px;
    min-height:62px;
    gap:35px;
    margin-top:28px;
    width:94%;
  }

  .cta span {
    font-size:31px;
  }

  .about-grid {
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:20px;
  }

  .about-copy {
    font-size:16px;
    line-height:2;
    text-align:justify;
  }

  .checks {
    padding:4px 18px;
    border-radius:20px;
  }

  .checks li {
    font-size:14px;
    padding-left:37px;
  }

  .checks li br {
    display:none;
  }

  .checks li:before {
    width:25px;
    height:25px;
  }

  .cards {
    gap:14px;
  }

  .three,.two {
    grid-template-columns:1fr;
  }

  .card,.three .card {
    display:flex;
    text-align:left;
    padding:20px 18px;
    gap:18px;
    border-radius:20px;
  }

  .icon-bubble {
    width:74px;
    height:74px;
  }

  .icon-bubble .icon {
    width:46px;
    height:46px;
  }

  .three .icon-bubble {
    margin:0;
  }

  .card h3,.wanted h3,.wanted .card:nth-child(even) h3 {
    font-size:18px;
    line-height:1.7;
    letter-spacing:-.02em;
  }

  .card p {
    font-size:14px;
    line-height:1.8;
  }

  .mission-top {
    display:flex;
    flex-direction:column-reverse;
    min-height:0;
    gap:18px;
    margin-bottom:24px;
  }

  .mission-art {
    width:100%;
    height:auto;
    aspect-ratio:1.9;
  }

  .mission-top p {
    font-size:15px;
    line-height:2.1;
  }

  .mission-top p br {
    display:none;
  }

  .mission-top p strong {
    font-size:19px;
  }

  .mission-card {
    display:block;
    padding:22px 20px;
  }

  .mission-photo {
    width:120px;
    margin:0 auto 18px;
  }

  .mission-card h2 {
    font-size:25px;
    justify-content:center;
  }

  .mission-card h2 .icon {
    width:33px;
    height:33px;
  }

  .mission-card p {
    font-size:14px;
    font-weight:500;
    line-height:2.1;
    text-align:justify;
  }

  .values {
    gap:18px;
    margin-top:22px;
    justify-content:center;
  }

  .values>div {
    flex-direction:column;
    gap:7px;
    font-size:12px;
  }

  .values .icon {
    width:32px;
    height:32px;
  }

  .support-row {
    grid-template-columns:40px 1fr;
    gap:10px 13px;
    padding:18px;
    min-height:0;
    border-radius:20px;
  }

  .support-row>.icon {
    display:none;
  }

  .number {
    width:40px;
    height:40px;
    font-size:23px;
    align-self:start;
  }

  .support-row h3 {
    font-size:18px;
  }

  .support-row p {
    font-size:14px;
    line-height:1.8;
    margin-top:6px;
  }

  .support-photo {
    grid-column:1/-1;
    min-height:100px;
    height:auto;
    aspect-ratio:3.05;
    border-radius:13px;
    margin-top:4px;
  }

  .wanted .card {
    padding:22px 16px;
    min-height:0;
  }

  .wanted .icon-bubble {
    width:70px;
    height:70px;
  }

  .wanted h3 br {
    display:none;
  }

  .closing {
    font-size:16px;
    margin-top:24px;
  }

  .flow {
    grid-template-columns:1fr;
    gap:24px;
    margin:25px 0;
  }

  .flow li {
    display:grid;
    grid-template-columns:80px 1fr;
    text-align:left;
    padding:24px 20px 24px 34px;
    gap:0 16px;
    align-items:center;
    border-radius:20px;
  }

  .flow .icon-bubble {
    grid-column:1;
    grid-row:1/3;
    margin:0;
  }

  .flow h3 {
    grid-column:2;
    font-size:18px;
    margin:0 0 5px;
  }

  .flow p {
    grid-column:2;
    font-size:14px;
  }

  .flow .step {
    left:10px;
    top:10px;
    font-size:13px;
  }

  .flow li:not(:last-child):after {
    content:'↓';
    top:auto;
    bottom:-28px;
    left:70px;
    right:auto;
    font-size:31px;
  }

  .exit-card {
    padding:26px 15px 135px;
    border-radius:20px;
  }

  .exit-card h3 {
    font-size:26px;
  }

  .exit-card p {
    font-size:15px;
  }

  .exit-card .icon-bubble {
    margin-bottom:15px;
  }

  .ghost {
    font-size:80px;
  }

  .exit-sky {
    height:110px;
  }

  .pill {
    font-size:14px;
    padding:15px 18px;
    border-radius:20px;
  }

  .contact {
    padding:50px 0 70px;
  }

  .contact-grid {
    grid-template-columns:1fr;
    gap:68px;
  }

  .contact h2 {
    font-size:clamp(27px,7vw,40px);
    line-height:1.65;
    text-align:center;
    margin-bottom:20px;
  }

  .contact p {
    font-size:15px;
    line-height:2;
  }

  .contact p br {
    display:none;
  }

  .contact .cta {
    width:94%;
    margin:26px auto 0;
    font-size:22px;
  }

  .contact .note {
    text-align:center;
    font-size:14px;
    margin-top:22px;
  }

  .contact-card {
    padding:25px 24px;
  }

  .contact-card>.icon-bubble {
    margin-top:-61px;
    margin-bottom:20px;
  }

  .contact-card h3 {
    font-size:21px;
  }

  .contact-card dd {
    font-size:20px;
    line-height:1.7;
  }

  .phone {
    font-size:clamp(26px,8vw,42px);
  }

  .back-top {
    right:12px;
    bottom:12px;
    width:38px;
    height:38px;
  }

}


/* 画面幅・表示設定に応じた調整 */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *,*:before,*:after {
    transition:none!important;
  }

}


/* Decorative edges keep the source captions outside the visible area. */
.scene:before,.scene:after {
  width:8%;
  max-width:115px;
  opacity:.65;
}


/* Supplied clean hero artwork: HTML copy sits over its blank left half. */
.hero:before {
  display:none;
}


/* 画面幅・表示設定に応じた調整 */
@media(min-width:701px) {
  .hero-art {
    inset:0;
    width:100%;
    height:100%;
    background-position:center;
    background-size:100% 100%;
    mask-image:none;
  }

}


/* Readability refinement — type scale, spacing and responsive grids. */
:root {
  --grad:linear-gradient(115deg,#55a52b 0%,#168f96 52%,#0875dc 100%);
}

body {
  line-height:1.85;
  -webkit-text-size-adjust:100%;
}

p {
  line-height:1.95;
  overflow-wrap:anywhere;
}

h1,h2,h3 {
  overflow-wrap:anywhere;
}

.scene {
  padding:88px 0;
}

.scene:nth-of-type(even) {
  background-color:#f8fbfa;
}

.scene:before,.scene:after {
  opacity:.24;
}

.inner {
  width:min(1120px,calc(100% - 80px));
}

.section-head {
  margin-bottom:40px;
}

.section-head h2 {
  font-size:clamp(28px,3vw,42px);
  line-height:1.5;
  letter-spacing:.02em;
}

.section-head h2:after {
  width:80px;
  height:3px;
  border-radius:2px;
  margin:20px auto;
}

.section-head p {
  font-size:17px;
  color:#40535d;
  max-width:760px;
  margin:auto;
}

.hero {
  min-height:min(56.28vw,960px);
}

.hero-copy {
  width:46%;
  padding:5% 0 6% 5%;
}

.brand {
  font-size:clamp(18px,2.1vw,34px);
  letter-spacing:.08em;
}

.tagline {
  font-size:clamp(12px,1.2vw,18px);
}

.kana {
  font-size:clamp(11px,1.1vw,16px);
  margin:8px 0 24px;
}

.locations {
  font-size:clamp(11px,1.1vw,16px);
  padding:10px 8px;
  margin:0 0 26px;
}

.hero h1 {
  font-size:clamp(27px,3.45vw,56px);
  line-height:1.5;
  letter-spacing:-.045em;
}

.hero h1 em:first-child {
  font-size:1.22em;
}

.hero-lead {
  font-size:clamp(15px,1.5vw,23px);
  line-height:1.95;
  margin-top:24px;
}

.hero-detail {
  font-size:clamp(12px,1.1vw,16px);
  margin-top:10px;
}

.cta,.hero .cta,.contact .cta {
  width:min(390px,100%);
  min-height:60px;
  padding:12px 48px 12px 24px;
  font-size:20px;
  letter-spacing:.06em;
  position:relative;
  gap:0;
  margin-top:36px;
  box-shadow:0 6px 16px #29677b20;
}

.cta span {
  position:absolute;
  right:25px;
  font-size:30px;
}

.about-grid {
  gap:40px;
  margin-bottom:32px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.about-copy {
  font-size:17px;
  font-weight:500;
  line-height:2.15;
}

.checks li {
  font-size:16px;
}

.cards {
  gap:24px;
}

.three {
  max-width:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.two {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.card {
  padding:30px 26px;
  gap:22px;
  border:1px solid #e4ece8;
  box-shadow:0 5px 16px #163f570c;
  border-radius:20px;
}

.card>div {
  min-width:0;
}

.three .card {
  padding:28px 20px;
}

.icon-bubble {
  width:80px;
  height:80px;
}

.icon-bubble .icon {
  width:48px;
  height:48px;
}

.card h3 {
  font-size:20px;
  line-height:1.65;
}

.card p {
  font-size:16px;
  color:#40515b;
}

.mission-top {
  gap:28px;
  grid-template-columns:1.2fr 1fr;
}

.mission-top p {
  font-size:17px;
  line-height:2.1;
}

.mission-top p strong {
  display:block;
  font-size:24px;
  line-height:1.8;
  margin-bottom:12px;
}

.mission-top p br {
  display:none;
}

.mission-art {
  height:auto;
  aspect-ratio:1.95;
}

.mission-card {
  padding:36px;
  gap:28px;
  grid-template-columns:150px minmax(0,1fr);
  align-items:start;
}

.mission-photo {
  width:150px;
  margin-top:12px;
}

.mission-card h2 {
  font-size:28px;
  letter-spacing:.08em;
  margin-bottom:20px;
}

.mission-card p {
  font-weight:400;
  font-size:16px;
  line-height:2.1;
}

.mission-card p+p {
  margin-top:20px;
}

.values {
  border-top:1px solid #e6efea;
  padding-top:24px;
}

.support-list {
  gap:18px;
}

.support-row {
  grid-template-columns:54px 42px minmax(0,1fr) 28%;
  gap:20px;
  min-height:126px;
  border:1px solid #e4ece8;
}

.number {
  width:50px;
  height:50px;
  font-size:26px;
}

.support-row>.icon {
  width:40px;
  height:40px;
}

.support-row h3 {
  font-size:21px;
  line-height:1.65;
}

.support-row p {
  font-size:15px;
}

.support-photo {
  border-radius:28px 0 0 28px;
}

.wanted .card {
  min-height:180px;
  padding:28px 24px;
}

.wanted h3,.wanted .card:nth-child(even) h3 {
  font-size:20px;
  line-height:1.85;
}

.closing {
  font-size:18px;
  max-width:900px;
}

.flow {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}

.flow li {
  padding:34px 16px 26px;
  border:1px solid #e4ece8;
  border-radius:20px;
}

.flow h3 {
  font-size:18px;
  line-height:1.7;
  min-height:3.4em;
  display:flex;
  align-items:center;
  justify-content:center;
}

.flow p {
  font-size:15px;
  color:#40515b;
}

.flow li:not(:last-child):after {
  font-size:30px;
  right:-25px;
  top:70px;
}

.exit-card h3 {
  font-size:28px;
}

.exit-card p {
  font-size:16px;
}

.contact-grid {
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:48px;
}

.contact h2 {
  font-size:clamp(27px,2.65vw,38px);
}

.contact p {
  font-size:16px;
}

.contact-card {
  padding:32px 28px;
  border:1px solid #e4ece8;
}

.contact-card h3 {
  font-size:22px;
}

.contact-card dd {
  font-size:20px;
  overflow-wrap:anywhere;
}

.phone {
  font-size:clamp(26px,2.7vw,38px);
  letter-spacing:0;
}


/* 画面幅・表示設定に応じた調整 */
@media(min-width:701px) and (max-width:1050px) {
  .hero-copy {
    width:48%;
    padding-left:4%;
  }

  .inner {
    width:calc(100% - 48px);
  }

  .scene {
    padding:64px 0;
  }

  .about-grid {
    gap:24px;
  }

  .three .card {
    padding:24px 15px;
  }

  .card {
    gap:16px;
    padding:24px 20px;
  }

  .card h3 {
    font-size:18px;
  }

  .card p {
    font-size:15px;
  }

  .wanted h3,.wanted .card:nth-child(even) h3 {
    font-size:18px;
  }

  .icon-bubble {
    width:66px;
    height:66px;
  }

  .icon-bubble .icon {
    width:40px;
    height:40px;
  }

  .support-row {
    grid-template-columns:42px minmax(0,1fr) 28%;
    gap:16px;
  }

  .support-row>.icon {
    display:none;
  }

  .support-row h3 {
    font-size:19px;
  }

  .number {
    width:40px;
    height:40px;
    font-size:23px;
  }

  .flow {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .flow li:nth-child(2):after {
    display:none;
  }

  .mission-card {
    grid-template-columns:110px minmax(0,1fr);
    padding:28px;
  }

  .mission-photo {
    width:110px;
  }

  .contact-grid {
    gap:28px;
  }

  .contact-card {
    padding:28px 20px;
  }

  .contact-card h3 {
    font-size:19px;
  }

}


/* 画面幅・表示設定に応じた調整 */
@media(max-width:700px) {
  .inner {
    width:calc(100% - 40px);
  }

  .scene {
    padding:54px 0;
  }

  .section-head {
    margin-bottom:28px;
  }

  .section-head h2 {
    font-size:27px;
    line-height:1.6;
  }

  .section-head p {
    font-size:15px;
    text-align:left;
  }

  .hero {
    min-height:0;
  }

  .hero-copy {
    width:100%;
    padding:32px 24px 12px;
  }

  .brand {
    font-size:clamp(20px,5.6vw,30px);
  }

  .tagline {
    font-size:13px;
  }

  .kana {
    font-size:12px;
    margin:8px 0 24px;
  }

  .locations {
    font-size:12px;
    margin:0 auto 24px;
    max-width:350px;
  }

  .hero h1 {
    font-size:clamp(25px,6.4vw,42px);
    letter-spacing:-.045em;
  }

  .hero h1 em:first-child {
    font-size:1.22em;
  }

  .hero-lead {
    font-size:clamp(14px,3.8vw,20px);
    margin-top:22px;
  }

  .hero-detail {
    font-size:13px;
  }

  .cta,.hero .cta,.contact .cta {
    width:min(350px,100%);
    font-size:18px;
    min-height:58px;
    margin:28px auto 0;
  }

  .about-grid,.three,.two,.contact-grid {
    grid-template-columns:1fr;
  }

  .about-copy {
    font-size:16px;
    text-align:left;
    line-height:2.05;
  }

  .checks {
    padding:4px 18px;
  }

  .checks li {
    font-size:15px;
  }

  .cards {
    gap:16px;
  }

  .card,.three .card,.wanted .card {
    padding:22px 18px;
    gap:16px;
    min-height:0;
  }

  .card h3,.wanted h3,.wanted .card:nth-child(even) h3 {
    font-size:18px;
  }

  .card p {
    font-size:15px;
  }

  .card p br {
    display:none;
  }

  .icon-bubble,.wanted .icon-bubble {
    width:62px;
    height:62px;
  }

  .icon-bubble .icon {
    width:39px;
    height:39px;
  }

  .mission-top p {
    font-size:16px;
  }

  .mission-top p strong {
    font-size:21px;
  }

  .mission-card {
    display:block;
    padding:24px 20px;
  }

  .mission-photo {
    width:120px;
    margin:0 auto 20px;
  }

  .mission-card h2 {
    font-size:25px;
  }

  .mission-card p {
    font-size:15px;
    text-align:left;
    line-height:2.05;
  }

  .values {
    gap:20px;
    margin-top:24px;
  }

  .support-row {
    grid-template-columns:40px minmax(0,1fr);
    padding:18px;
    gap:12px;
  }

  .support-row>.icon {
    display:none;
  }

  .number {
    width:38px;
    height:38px;
    font-size:22px;
  }

  .support-row h3 {
    font-size:18px;
  }

  .support-row p {
    font-size:15px;
  }

  .support-photo {
    border-radius:12px;
  }

  .flow {
    grid-template-columns:1fr;
    gap:26px;
  }

  .flow li {
    grid-template-columns:62px minmax(0,1fr);
    padding:24px 18px 24px 28px;
    gap:0 16px;
  }

  .flow h3 {
    display:block;
    min-height:0;
    font-size:18px;
  }

  .flow li:not(:last-child):after {
    right:auto;
    left:52px;
    top:auto;
    bottom:-29px;
  }

  .flow p {
    font-size:15px;
  }

  .closing,.pill {
    font-size:16px;
    text-align:left;
  }

  .exit-card h3 {
    font-size:25px;
  }

  .exit-card p {
    font-size:15px;
  }

  .contact-grid {
    gap:64px;
  }

  .contact h2 {
    font-size:clamp(25px,6.5vw,34px);
  }

  .contact p {
    font-size:15px;
  }

  .contact-card {
    padding:28px 22px;
  }

  .contact-card h3 {
    font-size:20px;
  }

  .contact-card dd {
    font-size:18px;
  }

  .phone {
    font-size:clamp(25px,7.5vw,36px);
    text-align: center;
  }

}


/* 画面幅・表示設定に応じた調整 */
@media(max-width:360px) {
  .inner {
    width:calc(100% - 32px);
  }

  .hero-copy {
    padding-left:16px;
    padding-right:16px;
  }

  .card,.three .card,.wanted .card {
    gap:12px;
    padding:20px 14px;
  }

  .icon-bubble,.wanted .icon-bubble {
    width:48px;
    height:48px;
  }

  .icon-bubble .icon {
    width:32px;
    height:32px;
  }

  .card h3,.wanted h3,.wanted .card:nth-child(even) h3 {
    font-size:17px;
  }

  .section-head h2 {
    font-size:25px;
  }

}

/* 公式ロゴ：原画の比率を保持。画像内の上下余白を表示枠で隠します。 */
.official-logo {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1672 / 285;
  overflow: hidden;
  margin: 0 auto 12px;
}
.official-logo img {
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
  top: -122.8%;
  left: 0;
}
.hero .hero-detail {
  margin-top: 20px;
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 600;
}
@media (max-width: 700px) {
  .official-logo {
    max-width: 360px;
    margin-bottom: 10px;
  }
  .hero .hero-detail {
    font-size: 16px;
    margin-top: 24px;
  }
}

@media (max-width: 700px) {
  .contact-card dd {
    text-align: center;
  }
}

@media (max-width: 700px) {
  .hero-art {
    aspect-ratio: 1 / 1;
    background-size: auto 115%;
    background-position: 92% 25%;
  }
}
/* ========================================
   ヘッダーメニュー
======================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(34, 115, 100, 0.12);
  box-shadow: 0 4px 20px rgba(20, 60, 70, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1200px, calc(100% - 48px));
  min-height: 80px;
  margin: 0 auto;
}

/* 元ロゴの上下余白を表示枠で調整 */
.header-logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 230px;
  aspect-ratio: 1672 / 285;
  overflow: hidden;
}

.header-logo img {
  position: absolute;
  top: -122.8%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-menu > a {
  padding: 10px 0;
  color: #263e48;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.site-menu > a:hover {
  color: #168f80;
}

.site-menu > .menu-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 12px rgba(25, 125, 130, 0.16);
}

.site-menu > .menu-apply:hover {
  color: #fff;
  filter: brightness(1.06);
}

.menu-toggle {
  display: none;
}

/* 移動先の見出しがヘッダーに隠れないように */
main section[id] {
  scroll-margin-top: 100px;
}

.skip {
  z-index: 200;
}

/* ========================================
   モバイル・タブレット
======================================== */

@media (max-width: 1000px) {
  .header-inner {
    width: calc(100% - 32px);
    min-height: 68px;
    flex-wrap: wrap;
    gap: 0;
  }

  .header-logo {
    width: 195px;
  }

  .menu-toggle:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid #dcebe6;
    border-radius: 13px;
    background: #f4f9f7;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #187d75;
    transition: transform 0.2s, opacity 0.2s;
  }

  /* 開いているときは「×」に変化 */
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 12px 0 20px;
  }

  /* JS有効時だけ折りたたむ */
  .site-header.menu-ready .site-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    width: auto;
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    padding: 12px 20px 20px;
    border: 1px solid #e2ece8;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 55, 65, 0.14);
  }

  .site-header.menu-ready.is-open .site-menu {
    display: flex;
  }

  .site-menu > a {
    padding: 16px 4px;
    border-bottom: 1px solid #edf2ef;
    font-size: 15px;
  }

  .site-menu > .menu-apply {
    margin-top: 16px;
    padding: 15px 20px;
    border-bottom: 0;
  }

  main section[id] {
    scroll-margin-top: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle span,
  .site-menu > a {
    transition: none;
  }
}