@charset "utf-8";
.hero{position:relative; min-height:calc(100svh - var(--gh-h)); display:flex; align-items:flex-start;
  overflow:hidden; background:#F2F6FA}
.hero__img{position:absolute; inset:0; z-index:0}
.hero__img img{width:100%; height:100%; object-fit:cover; object-position:62% 50%}
.hero__ov{display:none}
.hero__in{position:relative; z-index:4; width:auto; max-width:none; margin-inline:0;
  padding-inline:var(--edge); padding-block:clamp(3rem,9vh,6rem) 4rem}
.hero h1{font-family:"Noto Serif JP",serif; font-size:clamp(1.875rem,4.6vw,6rem); line-height:1.5;
  font-weight:600; letter-spacing:.02em; margin:0}
.hero h1 span:first-child{color:var(--nv-3)}
.hero h1 span:last-child{background:linear-gradient(90deg,var(--nv-3) 0%,var(--bl) 75%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}
.hero__sub{margin-top:2rem; font-weight:700; font-size:clamp(1rem,1.7vw,2.125rem);
  letter-spacing:.06em; color:var(--nv)}
.hero::after{content:""; position:absolute; z-index:5; left:0; right:0; bottom:0; height:8rem;
  pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--wh) 92%)}

.sec{padding-block:8rem}
.zm{display:block; overflow:hidden}
.zm img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
a:hover .zm img,.zm:hover img{transform:scale(1.06)}
.apr{position:relative; padding-block:7rem 8rem}
.apr::before{content:""; position:absolute; z-index:0; right:-6%; top:-12%; width:34rem; height:34rem;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,var(--cr) 0%,rgba(253,246,236,0) 70%)}
.apr > .wrap{position:relative; z-index:1}
.apr__hd{display:grid; grid-template-columns:1fr 1.1fr; gap:6rem; align-items:start}
.apr__lb{display:flex; align-items:center; gap:1rem; font-size:.875rem; font-weight:700;
  letter-spacing:.16em; color:var(--bl); line-height:1.4}
.apr__lb::before{content:""; flex:0 0 1.75rem; height:1px; background:var(--bl)}
.apr h2{margin-top:1.5rem; text-wrap:pretty; font-family:"Noto Serif JP",serif;
  font-size:clamp(1.75rem,3.4vw,2.75rem); font-weight:600; color:var(--nv);
  letter-spacing:.04em; line-height:1.55}
.apr__tx{padding-top:2.5rem; font-size:1rem; line-height:2.15; color:var(--tx-2)}
.apr__tx p + p{margin-top:1.5rem}
.apr__st{margin-top:5rem; list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:4rem}
.apr__st li{position:relative; padding-top:1.5rem}
.apr__st li::before{content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:var(--ln)}
.apr__st li::after{content:""; position:absolute; left:0; top:0; width:100%; height:1px;
  background:var(--bl); transform-origin:left;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.rv--on .apr__st li::after{transform:scaleX(0)}
.rv--on.is-in .apr__st li::after{transform:scaleX(1)}
.rv--on.is-in .apr__st li:nth-child(2)::after{transition-delay:.16s}
.rv--on.is-in .apr__st li:nth-child(3)::after{transition-delay:.32s}
.apr__st h3{display:flex; align-items:baseline; gap:1rem; white-space:nowrap;
  font-size:1.1875rem; font-weight:800; color:var(--nv); letter-spacing:.04em}
.apr__no{font-family:"Noto Serif JP",serif; font-size:2rem; font-weight:600; line-height:1;
  color:var(--bl-2); letter-spacing:.04em}
.apr__st p{margin-top:1rem; font-size:1rem; line-height:2; color:var(--tx-2)}



.abt{position:relative; overflow:hidden; background:var(--nv); color:var(--wh); padding-block:8rem}
.abt::after{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,rgba(205,144,89,0) 0%,var(--am-2) 30%,var(--bl-2) 70%,rgba(31,101,193,0) 100%)}
.abt::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 90% at 50% 0%, rgba(243,198,149,.34) 0%, rgba(0,35,82,0) 68%)}
.abt__loop{position:absolute; z-index:0; left:0; right:0; top:50%; transform:translateY(-50%);
  display:flex; column-gap:2rem; overflow:hidden; pointer-events:none; opacity:.05}
.abt__loop span{flex:0 0 auto; white-space:nowrap; font-size:clamp(3rem,8vw,7rem); font-weight:800;
  letter-spacing:.08em; line-height:1; animation:loopslide 60s linear infinite}
@keyframes loopslide{to{transform:translateX(-100%)}}
.abt__in{position:relative; z-index:1; text-align:center}
.abt__logo{width:auto; height:2.25rem; margin-inline:auto}
.abt__lb{display:block; margin-top:1.5rem; font-size:.875rem; font-weight:800;
  letter-spacing:.18em; color:#9CC4F2}
.abt h2{margin-top:1rem; font-family:"Noto Serif JP",serif; font-size:clamp(1.625rem,2.9vw,2.5rem);
  font-weight:600; letter-spacing:.06em}
.abt p:not(.shd__more){margin-top:1.5rem; font-size:1.125rem; line-height:2.2;
  color:rgba(255,255,255,.86)}





@media (max-width:1279px){

.sec{padding-block:6rem}
.apr__hd{grid-template-columns:1fr; gap:2.5rem}
.apr__tx{padding-top:0}
}
@media (max-width:1023px){
}
@media (max-width:767px){

.sec{padding-block:4.5rem}
.hero__img img{object-position:62% 12%}
.hero__in{padding-block:3rem}
.hero__in::before{content:""; position:absolute; z-index:-1; left:calc(var(--edge) * -1);
  right:calc(var(--edge) * -1); top:0; bottom:-2rem; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.86) 62%,rgba(255,255,255,0) 100%)}
.hero h1{font-size:2.625rem; line-height:1.45; letter-spacing:0}
/* 385px 未満は「次の成長を描く。」が1行に入らないため、幅に合わせて字を小さくする */
@media (max-width:384px){.hero h1{font-size:clamp(2.0625rem,10.5vw,2.625rem)}}
.hero__sub{margin-top:1.5rem; font-size:1rem; letter-spacing:.02em; line-height:1.9}
.hero::after{height:5rem}
.apr{padding-block:3.5rem 4.5rem}
.apr__st{margin-top:2.5rem; grid-template-columns:1fr; gap:1.5rem}
.abt{padding-block:4rem}
.cta2{gap:2rem}
}