/* VL-ABOUT-VISUAL-1 (2026-10-01): /about/ 専用。白＋淡いピンク＋クリームに、既存のボルドーとゴールドを差し色として使う写真中心の構成。
   共通 styles.css は触らず、新しいクラス(.abv-*)だけで完結させる。会社概要の表(.company-profile dl)とボタンは共通CSSのまま使う。
   商品は assets/products/ の実物写真を切り抜き・縮小のみで使用(加工・生成なし)。花びらはCSSの図形で、画像は使わない。 */
:root{--abv-pink:#e8557d;--abv-blush:#fdeef1;--abv-blush-2:#f8dce3;--abv-cream:#fffaf6;--abv-gold:#c39a55;--abv-gold-2:#e2c792;--abv-ink:#2c2529;--abv-soft:#6d6267;--abv-wine:#5b2439}

/* 花びら(装飾) */
.abv-petal{position:absolute;z-index:1;pointer-events:none;width:120px;height:78px;border-radius:80% 0 80% 0;
  background:radial-gradient(ellipse at 30% 30%,#fff 0%,#fbd3dd 45%,#f19fb5 100%);opacity:.75;filter:blur(.4px);box-shadow:0 10px 24px rgba(214,110,140,.18)}
.abv-petal--1{left:-30px;top:110px;transform:rotate(28deg)}
.abv-petal--2{left:44%;bottom:70px;width:84px;height:54px;transform:rotate(-24deg);opacity:.6}
.abv-petal--3{right:3%;top:26px;width:70px;height:44px;transform:rotate(60deg);opacity:.55}
.abv-petal--4{right:-24px;bottom:40px;width:170px;height:110px;transform:rotate(-30deg);opacity:.5}
.abv-petal--5{right:150px;bottom:-20px;width:90px;height:58px;transform:rotate(18deg);opacity:.42}
.abv-petal--6{left:-26px;bottom:-14px;width:110px;height:70px;transform:rotate(-14deg);opacity:.7;z-index:4}

/* 1. ヒーロー */
.abv-hero{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:2vw;min-height:640px;padding:30px 0 70px 8vw;overflow:hidden;
  background:radial-gradient(ellipse at 10% 25%,#fff 0%,rgba(255,255,255,0) 55%),linear-gradient(118deg,#fffafa 0%,var(--abv-blush) 50%,#fbe1e8 100%)}
.abv-hero:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-1px;height:70px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0;z-index:2}
.abv-hero-copy{position:relative;z-index:3;padding:40px 0}
.abv-hero-copy .eyebrow{color:var(--abv-pink);letter-spacing:.2em}
.abv-hero-copy h1{font:600 clamp(40px,4.4vw,66px)/1.38 var(--jp);letter-spacing:.03em;margin:0 0 26px;color:var(--abv-ink)}
.abv-hero-copy h1 em{font-family:var(--serif);font-weight:500;color:var(--abv-pink)}
.abv-hero-copy>p:not(.eyebrow){font:400 16px/2.05 var(--jp);max-width:560px;color:var(--abv-soft);margin:0}
.abv-outline{display:inline-flex;align-items:center;gap:22px;margin-top:34px;padding:15px 30px;border:1px solid var(--abv-pink);border-radius:999px;background:rgba(255,255,255,.7);color:var(--abv-pink);font:600 14px var(--jp);transition:.25s}
.abv-outline:hover{background:var(--abv-pink);color:#fff}
.abv-hero-visual{position:relative;z-index:1;height:600px}
.abv-hero-visual figure{margin:0;position:absolute;overflow:hidden;background:#f6e9ec}
.abv-hero-visual img{width:100%;height:100%;object-fit:cover;display:block}
.abv-hero-main{right:0;top:0;width:82%;height:100%;border-radius:340px 0 0 0;box-shadow:0 30px 60px rgba(120,60,80,.14)}
.abv-hero-main img{object-position:62% 40%}
.abv-hero-main:after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(255,255,255,0) 45%,rgba(240,170,190,.35) 100%)}
.abv-hero-room{left:0;bottom:70px;width:30%;aspect-ratio:4/5;border-radius:999px 999px 18px 18px;border:6px solid #fff;box-shadow:0 18px 40px rgba(120,60,80,.18);z-index:2}
.abv-hero-products{list-style:none;margin:0;padding:0;position:absolute;left:24%;bottom:14px;display:flex;gap:10px;z-index:3}
.abv-hero-products li{width:96px;aspect-ratio:1;border-radius:14px;overflow:hidden;border:4px solid #fff;box-shadow:0 12px 26px rgba(120,60,80,.2);background:#f3e6d6}
.abv-hero-products li:nth-child(2){transform:translateY(-16px)}
.abv-hero-script{position:absolute;right:7%;bottom:96px;z-index:3;margin:0;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.abv-hero-script span{display:block;height:1em;overflow:visible;font:400 clamp(40px,4.2vw,64px)/1 "Great Vibes",cursive;color:#fff;text-shadow:0 2px 14px rgba(160,70,100,.45)}
.abv-hero-script small{margin-top:14px;padding-left:46px;position:relative;font:600 14px/1.8 var(--jp);color:#fff;text-shadow:0 1px 10px rgba(120,50,80,.55);letter-spacing:.08em}
.abv-hero-script small:before{content:"";position:absolute;left:0;top:13px;width:34px;height:1px;background:#fff}

/* 2. OUR MISSION */
.abv-mission{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:5vw;align-items:center;background:#fff}
.abv-mission h2{font:600 clamp(30px,3vw,46px)/1.6 var(--jp);margin:24px 0 30px}
.abv-mission h2:after{content:"";display:block;width:54px;height:2px;margin-top:26px;background:var(--abv-pink)}
.abv-mission-copy p{font:400 15px/2.15 var(--jp);margin:0 0 18px}
.abv-collage{display:grid;grid-template-columns:1.15fr .82fr .9fr;grid-template-rows:230px 250px;gap:14px}
.abv-collage figure{margin:0;overflow:hidden;border-radius:4px;background:#f4ece8}
.abv-collage img{width:100%;height:100%;object-fit:cover;display:block}
.abv-c-therapist{grid-column:1;grid-row:1/3;border-radius:200px 200px 4px 4px!important}
.abv-c-product{grid-column:2;grid-row:1}
.abv-c-training{grid-column:3;grid-row:1}
.abv-c-training img{object-position:60% 40%}
.abv-c-script{grid-column:2;grid-row:2;margin:0;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 8px;background:linear-gradient(160deg,#fff 0%,var(--abv-blush) 100%);border-radius:4px;
  font:400 clamp(30px,2.6vw,42px)/1.05 "Great Vibes",cursive;color:var(--abv-pink)}
.abv-c-script span:nth-child(2){padding-left:.8em}.abv-c-script span:nth-child(3){padding-left:.35em}
.abv-c-staff{grid-column:3;grid-row:2}

/* 3. WHAT WE VALUE */
.abv-values{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(330px,.85fr) minmax(0,2.15fr);gap:3.5vw;align-items:start;background:var(--abv-wine);color:#fff}
.abv-values-head h2{font:600 clamp(30px,2.6vw,38px)/1.6 var(--jp);margin:22px 0 0}
.abv-values-head h2 span{font-family:var(--jp);color:#f1a5ba}
.abv-values-head:after{content:"";display:block;width:100%;max-width:200px;height:1px;margin-top:40px;background:rgba(255,255,255,.3)}
.abv-value-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.abv-value-grid article{display:flex;flex-direction:column}
.abv-value-grid figure{margin:0 0 22px;aspect-ratio:7/4;overflow:hidden;border-radius:3px;box-shadow:0 18px 40px rgba(20,4,10,.35)}
.abv-value-grid figure img{width:100%;height:100%;object-fit:cover;display:block}
.abv-value-grid b{font:italic 500 32px/1 var(--serif);color:#f1a5ba}
.abv-value-grid small{display:block;margin:14px 0 8px;font-size:9px;letter-spacing:.18em;color:#dfb9c5}
.abv-value-grid h3{font:600 19px/1.7 var(--jp);margin:0 0 10px}
.abv-value-grid p{font:400 13px/2 var(--jp);color:#e2d3d9;margin:0}

/* 4. VAVITTE NETWORK */
.abv-network{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:6vw;align-items:center;background:linear-gradient(180deg,#fff 0%,#fff6f7 100%)}
.abv-network h2{font:600 clamp(34px,4vw,56px)/1.48 var(--jp);margin:24px 0}
.abv-network h2 em{font-family:var(--serif);font-weight:500;color:var(--abv-pink)}
.abv-network-copy>div>p{font:400 15px/2.15 var(--jp);margin:0}
.abv-links{margin-top:40px}
.abv-links a{grid-template-columns:96px 70px 1fr auto;gap:18px;padding:14px 5px}
.abv-links a img{width:96px;height:64px;object-fit:cover;border-radius:3px}
.abv-network-visual{position:relative;height:540px}
.abv-network-visual figure{position:absolute;margin:0;overflow:hidden;background:#f6eee9}
.abv-network-visual img{width:100%;height:100%;object-fit:cover;display:block}
.abv-n-lineup{left:8%;right:3%;top:56px;bottom:56px;border-radius:220px 220px 6px 6px;background:radial-gradient(ellipse at 50% 70%,#fff 0%,var(--abv-blush) 70%,var(--abv-blush-2) 100%)!important;box-shadow:inset 0 0 0 1px rgba(226,199,146,.6)}
.abv-n-lineup img{object-fit:contain;padding:44px 34px 18px;mix-blend-mode:multiply}
.abv-n-lecture{right:0;top:0;width:38%;aspect-ratio:4/3;border:6px solid #fff;border-radius:4px;box-shadow:0 18px 40px rgba(120,60,80,.18);z-index:2}
.abv-n-staff{left:0;bottom:0;width:26%;aspect-ratio:6/7;border:6px solid #fff;border-radius:999px 999px 4px 4px;box-shadow:0 18px 40px rgba(120,60,80,.18);z-index:3}
.abv-n-staff img{object-position:50% 20%}

/* 5. COMPANY PROFILE */
.abv-company-photos{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;margin:40px 0 70px}
.abv-company-photos figure{margin:0;overflow:hidden;border-radius:4px;aspect-ratio:3/2;background:#f2ecec}
.abv-company-photos .abv-co-academy{aspect-ratio:auto}
.abv-company-photos img{width:100%;height:100%;object-fit:cover;display:block}
.abv-co-team{border-radius:4px 160px 4px 4px!important}

@media(max-width:1180px){
  .abv-values{grid-template-columns:1fr}
  .abv-network{grid-template-columns:1fr;gap:50px}
  .abv-network-visual{max-width:720px;width:100%;margin:0 auto}
}
@media(max-width:900px){
  .abv-hero{grid-template-columns:1fr;gap:0;padding:0 0 60px;min-height:0}
  .abv-hero-copy{order:2;padding:34px 24px 0}
  .abv-hero-copy h1{font-size:36px;line-height:1.45}
  .abv-hero-copy>p:not(.eyebrow){font-size:14px}
  .abv-hero-visual{order:1;height:auto;aspect-ratio:375/390}
  .abv-hero-main{width:100%;border-radius:0 0 0 160px}
  .abv-hero-main img{object-position:66% 30%}
  .abv-hero-room{display:none}
  .abv-hero-products{left:18px;bottom:-30px}
  .abv-hero-products li{width:64px;border-width:3px;border-radius:10px}
  .abv-hero-products li:nth-child(2){transform:translateY(-10px)}
  .abv-hero-script{right:18px;bottom:22px}
  .abv-hero-script span{font-size:40px}
  .abv-hero-script small{font-size:12px;padding-left:34px}
  .abv-hero-script small:before{width:24px;top:11px}
  .abv-hero:after{display:none}
  .abv-petal--1{left:auto;right:-20px;top:auto;bottom:20px;width:80px;height:52px}
  .abv-petal--2,.abv-petal--3{display:none}
  .abv-mission{grid-template-columns:1fr;gap:40px}
  .abv-collage{grid-template-columns:1.1fr .9fr;grid-template-rows:170px 150px 190px;gap:10px}
  .abv-c-therapist{grid-column:1;grid-row:1/3;border-radius:140px 140px 4px 4px!important}
  .abv-c-product{grid-column:2;grid-row:1}
  .abv-c-training{grid-column:2;grid-row:2}
  .abv-c-script{grid-column:1;grid-row:3;font-size:32px}
  .abv-c-staff{grid-column:2;grid-row:3}
  .abv-values{gap:40px}
  .abv-value-grid{grid-template-columns:1fr;gap:44px}
  .abv-links a{grid-template-columns:72px 1fr auto;gap:6px 14px}
  .abv-links a img{width:72px;height:54px;grid-row:1/3}
  .abv-links a small{grid-column:2}
  .abv-links a strong{grid-column:2}
  .abv-links a span{grid-column:3;grid-row:1/3}
  .abv-network-visual{height:auto;aspect-ratio:1/1.02}
  .abv-n-lineup{left:4%;right:0;top:12%;bottom:12%;border-radius:160px 160px 6px 6px}
  .abv-n-lineup img{padding:30px 16px 10px}
  .abv-n-lecture{width:46%;right:0}
  .abv-n-staff{width:34%}
  .abv-company-photos{grid-template-columns:1fr;margin:30px 0 50px}
  .abv-co-team{border-radius:4px 110px 4px 4px!important}
  .abv-company-photos .abv-co-academy{aspect-ratio:3/2}
}
@media (prefers-reduced-motion:reduce){.abv-outline{transition:none}}