/* 案4 FV の案 A〜D（PROD-20261108-hitaka-gakuen-02）
   RYO「なんで全部似たようなレイアウトなの？」を受けて、4案とも組み方（写真と文字の関係）を変えた。
   A＝真ん中に縦書きの理念・まわりに丸い写真／B＝大きな角丸の窓（写真）に文字のカードを重ねる／
   C＝横書きの大きな理念＋丸とカプセルの写真が横に流れる帯／D＝大きな写真の上に白の縦書き・文字は左の列 */

/* 共通の文字 */
.fx__label{font-size:13px;letter-spacing:.4em;color:var(--green);font-weight:700}
.fx__ttl{font-family:var(--f-min);font-weight:500;color:var(--green-d);letter-spacing:.2em;line-height:1.5}
.fx__name{font-family:var(--f-min);font-size:24px;letter-spacing:.16em;font-weight:700;color:var(--green-d)}
.fx__lead{margin-top:10px;font-size:15px;line-height:2}
.fx__chips{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.fx__chips a{display:inline-block;border:1.5px solid var(--green-m);border-radius:999px;padding:5px 16px;font-size:13px;font-weight:700;color:var(--green-d);background:#fff;transition:.25s}
.fx__chips a:hover{border-color:var(--green)}
.fv figure{margin:0;overflow:hidden}
.fv figure img{width:100%;height:100%;object-fit:cover}

/* ===== A 真ん中の理念 ===== */
.fv--a{min-height:max(760px,100svh);padding:120px 0 60px;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#fff 0,var(--kinari) 58%)}
.fv--a .fx__orbit figure{position:absolute;border-radius:50%;box-shadow:0 0 0 8px var(--kinari)}
.fv--a .o1{width:clamp(180px,26vw,390px);aspect-ratio:1;left:2%;top:13%}
.fv--a .o2{width:clamp(110px,15vw,230px);aspect-ratio:1;left:17%;bottom:3%}
.fv--a .o3{width:clamp(80px,10vw,150px);aspect-ratio:1;left:1%;bottom:20%}
.fv--a .o4{width:clamp(170px,24vw,360px);aspect-ratio:1;right:2%;top:11%}
.fv--a .o5{width:clamp(120px,16vw,240px);aspect-ratio:1;right:14%;bottom:3%}
.fv--a .o6{width:clamp(80px,10vw,150px);aspect-ratio:1;right:1%;bottom:26%}
.fv--a .fx__center{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:440px;padding:0 20px}
.fv--a .fx__label{order:-1}
.fv--a .fx__ttl{margin-top:16px;writing-mode:vertical-rl;font-size:clamp(40px,4vw,56px);height:7.6em}
.fv--a .fx__name{margin-top:26px}
.fv--a .fx__chips{justify-content:center}

/* ===== B 大きな窓 ===== */
.fv--b{padding:104px 0 70px}
.fv--b .fx__win{position:relative;width:calc(100% - 48px);max-width:1392px;margin:0 auto;height:min(64svh,580px);min-height:400px}
.fv--b .fx__winph{width:100%;height:100%;border-radius:240px 40px 40px 40px}
.fv--b .fx__winph img{object-position:50% 60%}
.fv--b .fx__c1,.fv--b .fx__c2{position:absolute;border-radius:50%;aspect-ratio:1;box-shadow:0 0 0 8px var(--kinari)}
.fv--b .fx__c1{width:clamp(110px,14vw,200px);left:5%;bottom:-60px}
.fv--b .fx__c2{width:clamp(80px,9vw,130px);left:calc(5% + clamp(110px,14vw,200px) + 8px);bottom:-30px}
.fv--b .fx__card{position:relative;width:min(560px,calc(100% - 48px));margin:-260px max(48px,calc((100% - 1392px)/2 + 72px)) 0 auto;background:var(--kinari);border-radius:40px 40px 40px 0;padding:40px 44px 36px}
.fv--b .fx__ttl{margin-top:12px;font-size:clamp(34px,3.4vw,46px);letter-spacing:.14em}

/* ===== C 写真の帯 ===== */
.fv--c{padding:130px 0 70px;background:var(--kinari)}
.fv--c .fx__head{width:min(1200px,100% - 48px);margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label ." "ttl ." "ttl name" "ttl lead" "ttl chips";grid-template-rows:auto 1fr auto auto auto;column-gap:72px}
.fv--c .fx__label{grid-area:label}
.fv--c .fx__ttl{grid-area:ttl;margin-top:10px;font-size:clamp(40px,5.4vw,78px);letter-spacing:.12em;line-height:1.35}
.fv--c .fx__name{grid-area:name}
.fv--c .fx__lead{grid-area:lead}
.fv--c .fx__chips{grid-area:chips}
.fv--c .fx__band{margin-top:56px;overflow:hidden}
.fv--c .fx__track{display:flex;width:max-content;animation:fxband 60s linear infinite}
.fv--c .fx__dup{display:flex}
.fv--c .fx__item{flex:none;margin-right:20px;height:260px}
.fv--c .fx__item--c{width:260px;border-radius:50%}
.fv--c .fx__item--p{width:190px;border-radius:999px}
@keyframes fxband{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.fv--c .fx__track{animation:none}}

/* ===== D 写真に縦書き ===== */
.fv--d{padding:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-height:max(720px,100svh);background:var(--kinari)}
.fv--d .fx__side{grid-column:1;grid-row:1;align-self:end;padding:0 40px 80px max(24px,calc((100vw - 1200px)/2))}
.fv--d .fx__ph{grid-column:2;grid-row:1;position:relative}
.fv--d .fx__main{position:absolute;inset:0;border-radius:0 0 0 240px}
.fv--d .fx__main img{object-position:45% 50%}
.fv--d .fx__ph::after{content:"";position:absolute;inset:0;border-radius:0 0 0 240px;background:linear-gradient(270deg,rgba(18,38,20,.45) 0,rgba(18,38,20,0) 45%);pointer-events:none}
.fv--d .fx__vt{position:absolute;z-index:1;right:max(40px,6%);top:130px;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:22px}
.fv--d .fx__vt .fx__ttl{writing-mode:vertical-rl;color:#fff;font-size:clamp(40px,4.4vw,64px);text-shadow:0 2px 18px rgba(0,0,0,.25)}
.fv--d .fx__vt .fx__label{margin-top:6px;writing-mode:vertical-rl;color:#fff;border-right:1px solid rgba(255,255,255,.8);padding-right:10px}
.fv--d .fx__c1{position:absolute;z-index:1;width:clamp(120px,15vw,220px);aspect-ratio:1;left:calc(clamp(120px,15vw,220px) / -2);bottom:16%;border-radius:50%;box-shadow:0 0 0 8px var(--kinari)}
.fv--d .fx__name{font-size:26px}

/* ---- TB ---- */
@media (max-width:1023px){
  .fv--b .fx__card{padding:36px 36px 32px}
  .fv--c .fx__head{grid-template-columns:1fr;grid-template-areas:"label" "ttl" "name" "lead" "chips";grid-template-rows:none}
  .fv--c .fx__name{margin-top:22px}
  .fv--c .fx__item{height:200px}.fv--c .fx__item--c{width:200px}.fv--c .fx__item--p{width:146px}
  .fv--d .fx__side{padding:0 32px 70px 24px}
}
/* ---- SP ---- */
@media (max-width:767px){
  .fx__name{font-size:20px}
  .fx__lead{font-size:14px}
  .fx__chips a{font-size:13px;padding:6px 14px}
  /* A：円を上に3つ・下に3つ */
  .fv--a{padding:96px 0 40px;min-height:0;display:block}
  .fv--a .fx__orbit{position:relative;height:208px;width:calc(100% - 40px);margin:0 auto}
  .fv--a .fx__orbit figure{box-shadow:0 0 0 5px var(--kinari)}
  .fv--a .o1{width:150px;left:-4px;top:0}
  .fv--a .o4{width:130px;right:-4px;top:6px}
  .fv--a .o2{width:92px;left:calc(50% - 46px);top:114px;bottom:auto}
  .fv--a .o3,.fv--a .o5,.fv--a .o6{display:none}
  .fv--a .fx__center{margin:30px auto 0}
  .fv--a .fx__ttl{font-size:40px}
  /* B */
  .fv--b{padding:84px 0 50px}
  .fv--b .fx__win{width:calc(100% - 20px);height:52svh;min-height:340px}
  .fv--b .fx__winph{border-radius:120px 24px 24px 24px}
  .fv--b .fx__c1{width:96px;left:14px;bottom:-40px}
  .fv--b .fx__c2{width:66px;left:120px;bottom:-20px}
  .fv--b .fx__card{width:calc(100% - 40px);margin:-30px 20px 0 auto;padding:60px 22px 28px;border-radius:28px 28px 28px 0}
  .fv--b .fx__ttl{font-size:32px}
  /* C */
  .fv--c{padding:100px 0 50px}
  .fv--c .fx__head{width:calc(100% - 40px)}
  .fv--c .fx__ttl{font-size:40px}
  .fv--c .fx__band{margin-top:36px}
  .fv--c .fx__item{height:150px;margin-right:12px}.fv--c .fx__item--c{width:150px}.fv--c .fx__item--p{width:108px}
  /* D */
  .fv--d{display:block;min-height:0}
  .fv--d .fx__ph{height:min(72svh,560px);min-height:440px}
  .fv--d .fx__main,.fv--d .fx__ph::after{border-radius:0 0 0 110px}
  .fv--d .fx__vt{right:24px;top:100px;gap:14px}
  .fv--d .fx__vt .fx__ttl{font-size:40px}
  .fv--d .fx__c1{width:110px;left:20px;bottom:-40px}
  .fv--d .fx__side{padding:64px 20px 50px}
}
.fv--b .fx__c1,.fv--b .fx__c2{z-index:2}
.fv--b .fx__name{margin-top:18px}
/* 768〜1199：A は小さい丸2つを外し、下の丸を左右の中ほどへ（文字にかからないように） */
@media (min-width:768px) and (max-width:1199px){
  .fv--a .o3,.fv--a .o6{display:none}
  .fv--a .o2{left:3%;bottom:auto;top:58%}
  .fv--a .o5{right:3%;bottom:auto;top:56%}
}
/* 768〜1023：B は丸を窓の右上へ */
@media (min-width:768px) and (max-width:1023px){
  .fv--b .fx__c1{left:auto;right:4%;top:20px;bottom:auto}
  .fv--b .fx__c2{display:none}
}
@media (max-width:767px){.fv--b .fx__card{padding-top:84px}}
/* D：左下の丸い写真がリード文にかからないよう、左の列の右側に丸の半分＋余白をあける（DIR r5 U1）。
   768〜1023 は列を半々にして法人名が1行に入るようにする（U2） */
.fv--d .fx__side{padding-right:calc(clamp(120px,15vw,220px) / 2 + 28px)}
@media (min-width:768px) and (max-width:1023px){
  .fv--d{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fv--d .fx__name{font-size:22px}
}
@media (max-width:767px){.fv--d .fx__side{padding-right:20px}}
/* A のスマホ：PC と同じく、真ん中の縦書きの理念の左右に丸い写真を置く（RYO「スマホの時写真横に入れたいんだけど／PCと同じレイアウトみたいな」）。
   法人名・リード・チップは丸の下に全幅で */
@media (max-width:767px){
  .fv--a{position:relative;padding:92px 0 44px}
  .fv--a .fx__orbit{position:absolute;left:0;right:0;top:92px;height:360px;width:auto;margin:0}
  .fv--a .fx__orbit figure{box-shadow:0 0 0 4px var(--kinari)}
  .fv--a .o1{display:block;width:clamp(84px,27vw,112px);left:3%;top:0;bottom:auto}
  .fv--a .o2{display:block;width:clamp(64px,20vw,84px);left:7%;top:138px;bottom:auto}
  .fv--a .o3{display:block;width:clamp(52px,16vw,66px);left:2%;top:250px;bottom:auto}
  .fv--a .o4{display:block;width:clamp(80px,26vw,106px);right:3%;top:18px;bottom:auto}
  .fv--a .o5{display:block;width:clamp(64px,21vw,88px);right:6%;top:152px;bottom:auto}
  .fv--a .o6{display:block;width:clamp(52px,16vw,66px);right:2%;top:268px;bottom:auto}
  .fv--a .fx__center{margin:0 auto;padding:0 20px}
  .fv--a .fx__ttl{font-size:36px;height:7.6em;margin-top:12px}
  .fv--a .fx__name{margin-top:30px}
}
/* A のスマホを縦に長く（RYO「もう少しFV縦に長くできない？」）：理念の文字を大きくし、丸を縦に広く散らし、画面の高さいっぱいまで使う */
@media (max-width:767px){
  .fv--a{min-height:0;padding:96px 0 56px}
  .fv--a .fx__orbit{top:96px;height:470px}
  .fv--a .o1{width:clamp(88px,29vw,124px);top:6px}
  .fv--a .o2{width:clamp(66px,21vw,90px);top:178px}
  .fv--a .o3{width:clamp(54px,17vw,72px);top:min(330px,88vw)}
  .fv--a .o4{width:clamp(84px,27vw,116px);top:30px}
  .fv--a .o5{width:clamp(66px,22vw,94px);top:200px}
  .fv--a .o6{width:clamp(54px,17vw,72px);top:min(352px,94vw)}
  .fv--a .fx__label{margin-top:8px}
  .fv--a .fx__ttl{font-size:clamp(36px,11.2vw,42px);margin-top:18px}
  .fv--a .fx__name{margin-top:48px}
  .fv--a .fx__lead{margin-top:14px}
  .fv--a .fx__chips{margin-top:24px}
}