@charset "UTF-8";
/* =========================================================
   チームA コーポレートサイト：トップページ
   - 余白を大きく取った落ち着いた誌面。紺と生成り色を基調に、オレンジは細部だけ
   - モバイルファースト（768px・1100px で広げる）
   ========================================================= */
:root{
  --navy:#172D3E;
  --navy-2:#213A4D;
  --paper:#F7F4ED;
  --white:#ffffff;
  --ink:#20252B;
  --sub:#5F6670;
  --rule:#d9d5cc;
  --acc:#C54432;
  --acc-2:#A8362A;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  --latin:"Barlow Condensed","Noto Sans JP",sans-serif;
  --max:1120px;
  --gut:24px;
  --head:68px;
}
@media (min-width:768px){:root{--gut:48px;--head:80px}}
@media (min-width:1100px){:root{--gut:64px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--head)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (min-width:1100px){body{font-size:16px}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sp{display:inline}.pc{display:none}
@media (min-width:768px){.sp{display:none}.pc{display:inline}}
body.is-locked{overflow:hidden}

.hp-wrap{width:100%;max-width:calc(var(--max) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}
.hp-sec{padding-block:120px}
@media (min-width:768px){.hp-sec{padding-block:160px}}
@media (min-width:1100px){.hp-sec{padding-block:200px}}

.hp-label{display:flex;align-items:baseline;gap:14px;font-family:var(--latin);font-weight:600;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--sub)}
.hp-label span{font-size:13px;color:var(--acc)}
.hp-label::after{content:"";width:48px;height:1px;background:currentColor;opacity:.5;align-self:center}
.hp-label--light{color:rgba(255,255,255,.7)}
.hp-h2{margin-top:28px;font-family:var(--serif);font-weight:600;font-size:clamp(24px,6.6vw,30px);line-height:1.7;letter-spacing:.08em;color:var(--navy)}
@media (min-width:768px){.hp-h2{font-size:36px}}
@media (min-width:1100px){.hp-h2{font-size:42px}}
.hp-h2--center{text-align:center}
.hp-text{margin-top:40px;display:grid;gap:22px;color:var(--ink);line-height:2.15}
.hp-text--wide{max-width:780px}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* buttons */
.hp-btn{display:inline-flex;align-items:center;gap:16px;padding:16px 28px;border:1px solid currentColor;border-radius:999px;text-decoration:none;font-weight:500;letter-spacing:.12em;transition:background .3s,color .3s}
.hp-btn i{width:28px;height:1px;background:currentColor;position:relative}
.hp-btn i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* ---------- header ---------- */
.hp-head{position:fixed;z-index:50;inset:0 0 auto;height:var(--head);color:#fff;transition:background .4s,color .4s,box-shadow .4s}
.hp-head__in{display:flex;align-items:center;gap:28px;height:100%}
.hp-head__logo{position:relative;display:block;width:40px;height:43px;flex:none}
@media (min-width:768px){.hp-head__logo{width:46px;height:50px}}
.hp-head__logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s}
.hp-head__logo .is-dark{opacity:0}
.hp-nav{display:none;margin-left:auto}
.hp-nav ul{display:flex;gap:36px}
.hp-nav a{display:grid;justify-items:center;gap:0;text-decoration:none;font-size:13px;letter-spacing:.14em;line-height:1.5;opacity:.86;transition:opacity .2s}
.hp-nav a span{font-family:var(--latin);font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.hp-nav a:hover{opacity:1}
.hp-head__cta{display:none;padding:10px 22px;border:1px solid currentColor;border-radius:999px;text-decoration:none;font-size:13px;letter-spacing:.14em;transition:background .3s,color .3s}
.hp-head__cta:hover{background:#fff;color:var(--navy)}
.hp-menu{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.hp-menu span,.hp-menu span::before{display:block;width:26px;height:1px;background:currentColor;transition:transform .3s}
.hp-menu span{position:relative}
.hp-menu span::before{content:"";position:absolute;left:0;top:8px}
.hp-menu[aria-expanded="true"] span{transform:translateY(4px) rotate(20deg)}
.hp-menu[aria-expanded="true"] span::before{transform:translateY(-8px) rotate(-40deg)}
.hp-head.is-solid{background:rgba(247,245,241,.94);color:var(--navy);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--rule)}
.hp-head.is-solid .is-light{opacity:0}
.hp-head.is-solid .is-dark{opacity:1}
.hp-head.is-solid .hp-head__cta:hover{background:var(--navy);color:#fff}
@media (min-width:1100px){.hp-nav{display:block}.hp-head__cta{display:inline-block}.hp-menu{display:none}}
.hp-drawer{position:fixed;z-index:45;inset:0;padding:calc(var(--head) + 32px) var(--gut) 48px;background:var(--navy);color:#fff;overflow-y:auto}
.hp-drawer[hidden]{display:none}
.hp-drawer ul{display:grid;border-top:1px solid rgba(255,255,255,.14)}
.hp-drawer li a{display:grid;padding:20px 4px;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none;font-family:var(--serif);font-size:18px;letter-spacing:.1em}
.hp-drawer li a span{font-family:var(--latin);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.hp-drawer .hp-btn{margin-top:40px;color:#fff}
.hp-head.is-open{background:transparent;box-shadow:none;color:#fff}
.hp-head.is-open .is-light{opacity:1}.hp-head.is-open .is-dark{opacity:0}

/* ---------- FV ---------- */
.hp-fv{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#172D3E;color:#fff}
.hp-fv__bg{position:absolute;inset:0;pointer-events:none}
.hp-fv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:94% 50%;opacity:0;transition:opacity 1s ease}
.hp-fv__video.is-ready{opacity:1}
/* 文字を読みやすくするグラデーション：文字のある左を濃く、右は動画を見せる */
/* グラデーション：下は黒へ。文字のある左上の空は少しだけ暗くして白い文字を読めるように */
.hp-fv__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,45,62,0) 12%,rgba(23,45,62,.45) 30%,rgba(23,45,62,.68) 48%,rgba(23,45,62,.76) 72%,rgba(23,45,62,.84) 88%,#172D3E 99%),radial-gradient(ellipse 110% 55% at 0% 0%,rgba(23,45,62,.72) 0%,rgba(23,45,62,.42) 50%,rgba(23,45,62,0) 100%),linear-gradient(180deg,rgba(23,45,62,.6) 0%,rgba(23,45,62,0) 20%),linear-gradient(rgba(23,45,62,.3),rgba(23,45,62,.3)),rgba(23,45,62,.14)}
@media (min-width:768px){.hp-fv__bg::after{background:linear-gradient(180deg,rgba(23,45,62,0) 12%,rgba(23,45,62,.45) 30%,rgba(23,45,62,.68) 48%,rgba(23,45,62,.76) 72%,rgba(23,45,62,.84) 88%,#172D3E 99%),radial-gradient(ellipse 64% 62% at 0% 0%,rgba(23,45,62,.72) 0%,rgba(23,45,62,.42) 50%,rgba(23,45,62,0) 100%),linear-gradient(180deg,rgba(23,45,62,.6) 0%,rgba(23,45,62,0) 20%),linear-gradient(rgba(23,45,62,.3),rgba(23,45,62,.3)),rgba(23,45,62,.14)}}
.hp-fv::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 文字は画面の左端に寄せる（中央寄せの幅には入れない） */
.hp-fv__in{position:relative;z-index:1;flex:1 0 auto;width:100%;padding:calc(var(--head) + 36px) var(--gut) 40px}
@media (min-width:768px){.hp-fv__video{object-position:50% 50%}.hp-fv__in{padding-top:calc(var(--head) + 40px)}}
.hp-fv__copy{text-shadow:0 2px 24px rgba(23,45,62,.35)}
.hp-fv__br{display:inline}
@media (min-width:1280px){.hp-fv__br{display:none}}
.hp-fv__copy{font-family:var(--serif);font-weight:600;font-size:clamp(32px,9.6vw,44px);line-height:1.65;letter-spacing:.12em}
@media (min-width:768px){.hp-fv__copy{font-size:52px;line-height:1.55}}
@media (min-width:1100px){.hp-fv__copy{font-size:50px;line-height:1.5}}
@media (min-width:1280px){.hp-fv__copy{font-size:clamp(48px,3.5vw,64px);letter-spacing:.08em}}
.hp-line{display:block;overflow:hidden;padding-block:.04em}
.hp-line>span{display:inline-block;transform:translateY(105%);animation:hp-rise 1.6s cubic-bezier(.2,.7,.2,1) forwards}
.hp-line:nth-child(2)>span{animation-delay:.18s}
.hp-line:nth-child(3)>span{animation-delay:.36s}

/* ---------- concept ---------- */
.hp-concept{background:var(--paper)}
@media (min-width:1100px){
  .hp-concept__grid{display:grid;grid-template-columns:240px 1fr;gap:80px}
  .hp-concept__grid .hp-label{padding-top:18px}
  .hp-concept .hp-h2{margin-top:0}
}
.hp-concept .hp-text{max-width:620px}

/* ---------- value ---------- */
.hp-value{position:relative;overflow:hidden;background:var(--white)}
.hp-value__in{position:relative;z-index:1;display:grid;justify-items:center;text-align:center}
.hp-value__art{position:absolute;left:50%;top:50%;width:min(680px,140vw);transform:translate(-50%,-50%);opacity:.9;pointer-events:none}
.hp-value__art svg{width:100%;height:auto;overflow:visible}
.hp-value__art circle{fill:none;stroke:var(--rule);stroke-width:1}
.hp-value__art .dot{fill:var(--acc);stroke:none;transform-origin:300px 300px;animation:hp-orbit 48s linear infinite}
.hp-value__art .dot.is-b{fill:var(--navy);opacity:.5;animation-duration:64s;animation-direction:reverse}
.hp-value__art .dot.is-c{fill:var(--acc);opacity:.6;animation-duration:36s}
.hp-value__lines{margin-top:48px;display:grid;gap:18px;font-family:var(--serif);font-weight:500;font-size:clamp(15px,4.1vw,17px);line-height:2;letter-spacing:.1em;color:var(--ink)}
@media (min-width:1100px){.hp-value__lines{font-size:19px;gap:22px;margin-top:64px}}
.hp-value__lines p:last-child{margin-top:12px;color:var(--navy);font-weight:600}
.hp-value .hp-label::before{content:"";width:48px;height:1px;background:currentColor;opacity:.5;align-self:center}

/* ---------- approach ---------- */
.hp-approach{background:var(--navy);color:#fff}
.hp-approach .hp-h2{color:#fff}
.hp-approach .hp-label{color:rgba(255,255,255,.7)}
.hp-stages{margin-top:56px;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.16)}
.hp-stages li{display:flex;align-items:baseline;gap:24px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.hp-stages__no{flex:none;width:36px;font-family:var(--latin);font-style:italic;font-size:22px;color:var(--acc)}
.hp-stages p{font-family:var(--serif);font-weight:500;font-size:clamp(18px,5vw,22px);letter-spacing:.1em;line-height:1.7}
@media (min-width:900px){
  .hp-stages{grid-template-columns:repeat(3,1fr);border-top:0}
  .hp-stages li{flex-direction:column;gap:18px;padding:36px 32px 40px;border-bottom:0;border-left:1px solid rgba(255,255,255,.16)}
  .hp-stages li:last-child{border-right:1px solid rgba(255,255,255,.16)}
  .hp-stages__no{font-size:28px}
  .hp-stages p{font-size:24px}
}
.hp-approach .hp-text{color:rgba(255,255,255,.86);margin-top:56px}
@media (min-width:1100px){.hp-approach .hp-text{margin-top:72px}}

/* ---------- contact ---------- */
.hp-contact{background:var(--navy-2);color:#fff;padding-block:100px}
@media (min-width:1100px){.hp-contact{padding-block:140px}}
.hp-contact__in{display:grid;gap:28px}
.hp-contact__link{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.3);text-decoration:none;transition:border-color .3s}
.hp-contact__ja{font-family:var(--serif);font-weight:600;font-size:clamp(28px,8vw,40px);letter-spacing:.14em}
@media (min-width:1100px){.hp-contact__ja{font-size:64px}}
.hp-contact__link i{position:relative;flex:none;width:64px;height:64px;border:1px solid rgba(255,255,255,.5);border-radius:50%;transition:background .3s,border-color .3s}
.hp-contact__link i::before{content:"";position:absolute;left:20px;right:20px;top:50%;height:1px;background:#fff}
.hp-contact__link i::after{content:"";position:absolute;right:20px;top:calc(50% - 4px);width:8px;height:8px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg)}
.hp-contact__link:hover{border-color:var(--acc)}
.hp-contact__link:hover i{background:var(--acc);border-color:var(--acc)}
@media (min-width:1100px){.hp-contact__link i{width:96px;height:96px}.hp-contact__link i::before{left:30px;right:30px}.hp-contact__link i::after{right:30px}}

/* ---------- footer ---------- */
.hp-foot{background:var(--navy);color:rgba(255,255,255,.6);padding-block:56px 40px;font-size:12px}
.hp-foot__in{display:grid;gap:24px;justify-items:start}
.hp-foot img{width:44px;height:auto}
.hp-foot nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.hp-foot nav a{color:rgba(255,255,255,.82);text-decoration:none;letter-spacing:.1em}
.hp-foot nav a:hover{text-decoration:underline}
@media (min-width:768px){.hp-foot__in{grid-template-columns:auto 1fr auto;align-items:center}.hp-foot nav{justify-self:center}}

@keyframes hp-rise{to{transform:none}}
@keyframes hp-fade{to{opacity:1}}
@keyframes hp-draw{to{transform:scaleX(1)}}
@keyframes hp-flow{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes hp-drift{to{transform:translate(4vmax,3vmax) scale(1.08)}}
@keyframes hp-orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hp-line>span{transform:none}
  .js [data-reveal]{opacity:1;transform:none}
}
/* 調整：見出しラベルの線のずれ、FVのサブコピーの折り返し、アプローチの文の折り返し */
.hp-concept__grid .hp-label{align-self:start}
.hp-stages p{word-break:keep-all;overflow-wrap:anywhere}
@media (min-width:900px){.hp-stages p{font-size:22px}}

/* ---------- 03の中のサービス図：円の周りに6つのサービス、中央にチームA ---------- */
/* サービスの円：グラデーションの円＋回転する多角形、周りにサービス */
.hp-orbit{--d:clamp(150px,calc(((100vw - 48px) / 2 - 108px) / .382),300px);--rn:54%;margin-top:72px;padding:64px 0 72px}
.hp-orbit__stage{position:relative;width:var(--d);aspect-ratio:1;margin-inline:auto}
.hp-orbit__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hp-orbit__logo{position:absolute;left:50%;top:50%;width:auto;height:25.3%;transform:translate(-50%,-50%)}
@media (min-width:768px){.hp-orbit__logo{height:20%}}
.hp-orbit__nodes{position:absolute;inset:0}
.hp-orbit__node{--x:cos(var(--as));--y:sin(var(--as));position:absolute;left:calc(50% + var(--rn) * var(--x));top:calc(50% + var(--rn) * var(--y));display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12.5px;font-weight:500;letter-spacing:.04em;line-height:1.5;color:#fff;opacity:0;transition:opacity .8s ease calc(.4s + var(--k) * .12s)}
.hp-orbit.is-in .hp-orbit__node,html:not(.js) .hp-orbit__node{opacity:1}
.hp-orbit__node i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.hp-orbit__node[data-sp="r"]{transform:translate(-4px,-50%)}
.hp-orbit__node[data-sp="l"]{flex-direction:row-reverse;transform:translate(calc(-100% + 4px),-50%)}
.hp-orbit__node[data-sp="t"]{flex-direction:column-reverse;gap:8px;transform:translate(-50%,calc(-100% + 4px))}
.hp-orbit__node[data-sp="b"]{flex-direction:column;gap:8px;transform:translate(-50%,-4px)}
@media (min-width:768px){
  .hp-orbit{--d:380px;margin-top:88px}
  .hp-orbit__node{font-size:15px;gap:12px}
}
@media (min-width:1100px){
  .hp-orbit{--d:440px;margin-top:96px;padding:48px 0 32px}
  .hp-orbit__node{--x:cos(var(--a));--y:sin(var(--a));font-size:17px}
  .hp-orbit__node[data-pc]{gap:14px;flex-direction:row;transform:translate(-4.5px,-50%)}
  .hp-orbit__node[data-pc="l"]{flex-direction:row-reverse;transform:translate(calc(-100% + 4.5px),-50%)}
  .hp-orbit__node i{width:9px;height:9px}
}
@media (min-width:1280px){.hp-orbit{--d:480px}.hp-orbit__node{font-size:18px}}
@media (prefers-reduced-motion:reduce){.hp-orbit__node{opacity:1}}

/* FVの上にいる間のヘッダー：明るい動画の上でも読めるように影を付ける */
.hp-head:not(.is-solid):not(.is-open) .hp-nav a,.hp-head:not(.is-solid):not(.is-open) .hp-head__cta{text-shadow:0 1px 10px rgba(23,45,62,.7)}
.hp-head:not(.is-solid):not(.is-open) .hp-menu span,.hp-head:not(.is-solid):not(.is-open) .hp-menu span::before{box-shadow:0 0 6px rgba(23,45,62,.8)}
.hp-head:not(.is-solid):not(.is-open) .hp-head__logo img.is-light{filter:drop-shadow(0 1px 8px rgba(23,45,62,.6))}
/* ヘッダーも画面の左右いっぱいに（FVの文字の左端とロゴをそろえる） */
.hp-head__in{max-width:none}

/* スクロール表示：縦書きの文字と、下へ流れる縦線 */
.hp-fv__scroll{position:absolute;z-index:1;right:var(--gut);bottom:0;display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;font-family:var(--latin);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.hp-fv__scroll span{writing-mode:vertical-rl}
.hp-fv__scroll i{position:relative;width:1px;height:72px;background:rgba(255,255,255,.25);overflow:hidden}
.hp-fv__scroll i::after{content:"";position:absolute;inset:0;background:#fff;transform:translateY(-100%);animation:hp-flow-y 2.4s ease-in-out infinite}
@media (min-width:1100px){.hp-fv__scroll i{height:96px}}
@keyframes hp-flow-y{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
/* 実績：草原の上に白い文字だけで置く。3つを中央にそろえ、間に細い縦線 */
.hp-fv__stats{position:absolute;z-index:1;left:calc(var(--gut) + 8px);right:calc(var(--gut) + 8px);bottom:172px;max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));color:#fff;text-shadow:0 2px 16px rgba(23,45,62,.5)}
.hp-fv__stats div{display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:8px;padding:2px 2px;text-align:center}
.hp-fv__stats div+div{border-left:1px solid rgba(255,255,255,.55)}
.hp-fv__stats dt{font-size:clamp(10px,2.8vw,11px);letter-spacing:0;line-height:1.5;color:rgba(255,255,255,.85);white-space:nowrap}
.hp-fv__stats dd{margin:0;display:flex;align-items:baseline;justify-content:center;gap:4px;line-height:1}
.hp-fv__stats b{font-family:"Helvetica Neue",Arial,var(--sans);font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(28px,8.6vw,40px);letter-spacing:-.01em}
.hp-fv__stats small{font-size:13px;font-weight:500;letter-spacing:.04em}
@media (min-width:768px){.hp-fv__stats{left:calc(var(--gut) + 56px);right:calc(var(--gut) + 56px);bottom:80px}.hp-fv__stats div{gap:12px}.hp-fv__stats dt{font-size:15px;letter-spacing:.08em}.hp-fv__stats b{font-size:52px}.hp-fv__stats small{font-size:18px}.hp-fv__stats dd{gap:8px}}
@media (min-width:1100px){.hp-fv__stats{bottom:96px}.hp-fv__stats b{font-size:clamp(56px,4.4vw,72px)}.hp-fv__stats small{font-size:22px}.hp-fv__stats dt{font-size:17px}}

/* =========================================================
   LP（チームA 広告運用LP）とトンマナをそろえる
   紺 #172D3E と白・薄いグレーの交互、オレンジのグラデ、太めのゴシック、数字は Barlow Condensed
   ========================================================= */
:root{--lp-night:#172D3E;--lp-night-2:#213A4D;--lp-mist:#F7F4ED;--lp-text:#20252B;--lp-sub:#5F6670;--lp-rule:#E3DDD0;--acc:#C54432;--lp-grad:linear-gradient(90deg,#C54432,#A8362A);--lp-num:"Barlow Condensed","Noto Sans JP",sans-serif}
body{color:var(--lp-text);font-weight:500}
/* 見出しラベル：「— CONCEPT」の形。短い線＋オレンジの小さな英字 */
.hp-label{gap:10px;font-family:var(--lp-num);font-weight:700;font-size:13px;letter-spacing:.22em;color:var(--acc)}
.hp-label::after,.hp-value .hp-label::before{display:none}
.hp-label::before{content:"";width:32px;height:2px;background:var(--acc);align-self:center}
.hp-label span{font-size:13px;color:var(--acc)}
.hp-label--light,.hp-approach .hp-label{color:var(--acc)}
.hp-value .hp-label{justify-content:center}
/* 見出し：太いゴシック。キーワードはオレンジのグラデ */
.hp-h2{font-family:var(--sans);font-weight:700;font-size:clamp(26px,7vw,30px);line-height:1.5;letter-spacing:.02em;color:var(--lp-night)}
@media (min-width:768px){.hp-h2{font-size:36px}}
@media (min-width:1100px){.hp-h2{font-size:42px}}
.hp-em{font-style:normal;background:var(--lp-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-text{color:var(--lp-text);line-height:2}
/* 各セクションの色：白 → 薄いグレー → 紺 → 紺（お問い合わせ）→ 濃紺（フッター） */
.hp-concept{background:#fff}
.hp-value{background:var(--lp-mist)}
.hp-value__art circle{stroke:var(--lp-rule)}
.hp-value__art .dot.is-b{fill:var(--lp-night)}
.hp-value__lines{font-family:var(--sans);font-weight:500;color:var(--lp-text)}
.hp-value__lines p:last-child{font-weight:700;color:var(--lp-night)}
.hp-approach{background:var(--lp-night)}
.hp-approach .hp-h2{color:#fff}
.hp-approach .hp-text{color:rgba(255,255,255,.86)}
/* 3つの段階：LPのカードと同じ、角丸の紺カード＋オレンジの数字 */
.hp-stages{gap:12px;border:0}
.hp-stages li,.hp-stages li:last-child{border:0!important;background:var(--lp-night-2);border-radius:14px;padding:24px 24px 26px}
.hp-stages__no{font-family:var(--lp-num);font-style:normal;font-weight:700;font-size:30px;line-height:1;color:var(--acc)}
.hp-stages p{font-family:var(--sans);font-weight:700;letter-spacing:.04em}
@media (min-width:900px){.hp-stages{gap:16px}.hp-stages li{padding:32px 30px 36px}.hp-stages__no{font-size:40px}}
/* お問い合わせ：LPの締めと同じ紺に、オレンジのグラデのボタン */
.hp-contact{position:relative;overflow:hidden;background:var(--lp-night);text-align:center}
.hp-contact::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,140vw);aspect-ratio:2/1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(207,99,84,.18),rgba(207,99,84,0));pointer-events:none}
.hp-contact__in{position:relative;justify-items:center;gap:32px}
.hp-contact__link{display:inline-flex;align-items:center;gap:20px;padding:16px 18px 16px 40px;border:0;border-radius:999px;background:var(--lp-grad);box-shadow:0 14px 30px -12px rgba(197,68,50,.7);color:#fff;text-decoration:none;transition:transform .2s,box-shadow .2s}
.hp-contact__link:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(197,68,50,.8)}
.hp-contact__ja{font-family:var(--sans);font-weight:700;font-size:clamp(18px,5vw,22px);letter-spacing:.08em}
.hp-contact__link i,.hp-contact__link:hover i{width:44px;height:44px;border:0;border-radius:10px;background:#fff}
.hp-contact__link i::before{left:12px;right:12px;background:var(--acc)}
.hp-contact__link i::after{right:12px;border-color:var(--acc)}
@media (min-width:1100px){.hp-contact__link{padding:20px 22px 20px 56px}.hp-contact__ja{font-size:26px}.hp-contact__link i{width:52px;height:52px}.hp-contact__link i::before{left:15px;right:15px}.hp-contact__link i::after{right:15px}}
/* フッター：LPと同じ濃紺 */
.hp-foot{background:#11222F}
/* ヘッダー：スクロール後はLPと同じ紺のバー。お問い合わせはオレンジのグラデ */
.hp-head.is-solid{background:rgba(23,45,62,.96);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.hp-head.is-solid .is-light{opacity:1}.hp-head.is-solid .is-dark{opacity:0}
.hp-head.is-solid .hp-head__cta{border-color:transparent;background:var(--lp-grad);color:#fff}
.hp-head.is-solid .hp-head__cta:hover{background:var(--lp-grad);color:#fff;opacity:.9}
.hp-nav a span{font-family:var(--lp-num);font-weight:600}
/* メニュー（スマホ） */
.hp-drawer li a{font-family:var(--sans);font-weight:700}
.hp-drawer li a span{font-family:var(--lp-num);font-weight:700}
.hp-drawer .hp-btn{border:0;background:var(--lp-grad);font-weight:700}
.hp-contact{border-top:1px solid rgba(255,255,255,.07)}

/* FVのサブコピー */
.hp-fv__sub{margin-top:28px;display:flex;align-items:center;gap:14px;font-size:clamp(13px,3.6vw,15px);font-weight:500;letter-spacing:.14em;color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(23,45,62,.8)}
.hp-fv__sub::before{content:"";flex:none;width:28px;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;animation:hp-draw 1.2s ease 1.3s forwards}
.hp-fv__sub span{opacity:0;animation:hp-fade 1.4s ease 1.4s forwards}
@media (min-width:1100px){.hp-fv__sub{margin-top:32px;gap:18px;font-size:18px;letter-spacing:.2em}.hp-fv__sub::before{width:56px}}
@media (prefers-reduced-motion:reduce){.hp-fv__sub span{opacity:1}.hp-fv__sub::before{transform:none}}
/* サービスの円：6項目のあいだを、控えめな光が不規則に飛び交う */
.hp-orbit__links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hp-orbit__beam{fill:none;stroke-linecap:round}
.hp-orbit__beam.is-core{stroke:#F5CFC6;stroke-width:1.2}
.hp-orbit__beam.is-glow{stroke:rgba(215,126,113,.45);stroke-width:5;filter:blur(3px)}
.hp-orbit__beam.is-trail{stroke:rgba(227,164,156,.12);stroke-width:1}
.hp-orbit__node i{transition:transform .6s ease,box-shadow .6s ease}
.hp-orbit__node.is-hit i{transform:scale(1.35);box-shadow:0 0 0 4px rgba(207,99,84,.18),0 0 12px 1px rgba(215,126,113,.6)}

/* FVの下端：ざらつきの質感を消し、下のコンセプトと同じ紺にぴったりそろえる */

/* 私たちの考え：富士山と五重塔の写真に紺のグラデーションをかける（文字は白） */
.hp-value{background:var(--lp-night)}
.hp-value__photo{position:absolute;inset:0;pointer-events:none}
.hp-value__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hp-value__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,45,62,0) 12%,rgba(23,45,62,.45) 30%,rgba(23,45,62,.68) 48%,rgba(23,45,62,.76) 72%,rgba(23,45,62,.84) 88%,#172D3E 99%),radial-gradient(ellipse 110% 55% at 0% 0%,rgba(23,45,62,.72) 0%,rgba(23,45,62,.42) 50%,rgba(23,45,62,0) 100%),linear-gradient(180deg,rgba(23,45,62,.6) 0%,rgba(23,45,62,0) 20%),linear-gradient(rgba(23,45,62,.3),rgba(23,45,62,.3)),rgba(23,45,62,.14)}
@media (min-width:768px){.hp-value__photo::after{background:linear-gradient(180deg,rgba(23,45,62,0) 12%,rgba(23,45,62,.45) 30%,rgba(23,45,62,.68) 48%,rgba(23,45,62,.76) 72%,rgba(23,45,62,.84) 88%,#172D3E 99%),radial-gradient(ellipse 64% 62% at 0% 0%,rgba(23,45,62,.72) 0%,rgba(23,45,62,.42) 50%,rgba(23,45,62,0) 100%),linear-gradient(180deg,rgba(23,45,62,.6) 0%,rgba(23,45,62,0) 20%),linear-gradient(rgba(23,45,62,.3),rgba(23,45,62,.3)),rgba(23,45,62,.14)}}
@media (max-width:767px){.hp-value__photo img{object-position:62% 40%}}
.hp-value .hp-h2{color:#fff}
.hp-value__lines{color:rgba(255,255,255,.88)}
.hp-value__lines p:last-child{color:#fff}
.hp-value__art circle{stroke:rgba(255,255,255,.16)}
.hp-value__art .dot.is-b{fill:#fff;opacity:.5}
.hp-value__lines,.hp-value .hp-h2{text-shadow:0 2px 14px rgba(23,45,62,.6)}
.hp-value__art{z-index:0}
.hp-value .hp-em{text-shadow:none}

/* サービスの円：球いっぱいに、点で描いた地球がゆっくり回る */
.hp-orbit__globe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* 事業内容：薄いグレーの面に白いカード */
.hp-business{background:var(--lp-mist)}
.hp-label em{font-style:normal;margin-left:6px;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--lp-night)}
.hp-business .hp-text{margin-top:28px}
.hp-biz{margin-top:48px;display:grid;gap:20px}
@media (min-width:900px){.hp-biz{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:64px}}
.hp-biz__card{position:relative;padding:32px 26px 34px;background:#fff;border-radius:14px;box-shadow:0 18px 40px -24px rgba(23,45,62,.35);overflow:hidden}
.hp-biz__card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--lp-grad)}
@media (min-width:1100px){.hp-biz__card{padding:44px 44px 46px}}
.hp-biz__head{display:flex;align-items:center;justify-content:space-between}
.hp-biz__no{font-family:var(--lp-num);font-weight:700;font-size:40px;line-height:1;color:var(--acc)}
.hp-biz__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--lp-night);color:#fff}
.hp-biz__icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hp-biz__title{margin-top:24px;font-family:var(--sans);font-weight:700;font-size:clamp(19px,5.2vw,22px);line-height:1.5;letter-spacing:.04em;color:var(--lp-night)}
@media (min-width:1100px){.hp-biz__title{font-size:24px}}
.hp-biz__catch{margin-top:14px;padding-left:12px;border-left:3px solid var(--acc);font-weight:700;line-height:1.7;color:var(--lp-night)}
.hp-biz__text{margin-top:16px;line-height:2;color:var(--lp-sub)}

/* 会社概要・お知らせ：左に見出し、右に内容（PC）。LPと同じ白とグレーの交互 */
.hp-company{background:#fff}
.hp-news{background:var(--lp-mist)}
.hp-company__grid{display:grid;gap:36px}
@media (min-width:1100px){.hp-company__grid{grid-template-columns:320px minmax(0,1fr);gap:64px;align-items:start}}
.hp-company__list{margin:0;border-top:1px solid var(--lp-rule)}
.hp-company__list div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px 4px;border-bottom:1px solid var(--lp-rule)}
@media (min-width:768px){.hp-company__list div{grid-template-columns:160px minmax(0,1fr);padding:24px 8px}}
.hp-company__list dt{font-weight:700;color:var(--lp-night)}
.hp-company__list dd{margin:0;color:var(--lp-text);line-height:1.8}
.hp-company__en{display:inline-block;margin-left:12px;font-family:var(--lp-num);font-weight:600;letter-spacing:.06em;color:var(--lp-sub)}
.hp-news__list{border-top:1px solid var(--lp-rule)}
.hp-news__list a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 16px;padding:20px 4px;border-bottom:1px solid var(--lp-rule);text-decoration:none;color:var(--lp-text);transition:background .2s}
.hp-news__list a:hover{background:rgba(255,255,255,.7)}
.hp-news__list a:hover .hp-news__title{color:var(--lp-night)}
.hp-news__list time{font-family:var(--lp-num);font-weight:600;font-size:16px;letter-spacing:.06em;color:var(--lp-sub)}
.hp-news__tag{justify-self:start;padding:3px 10px;border-radius:999px;background:var(--lp-night);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1.6}
.hp-news__tag.is-press{background:var(--acc)}
.hp-news__title{grid-column:1/3;font-weight:700;line-height:1.7;transition:color .2s}
.hp-news__list i{grid-row:1/3;grid-column:3;position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--lp-rule)}
.hp-news__list i::after{content:"";position:absolute;left:10px;top:11px;width:6px;height:6px;border-top:1.5px solid var(--lp-night);border-right:1.5px solid var(--lp-night);transform:rotate(45deg)}
@media (min-width:768px){.hp-news__list a{grid-template-columns:110px 120px minmax(0,1fr) auto;padding:24px 8px}.hp-news__tag{justify-self:start}.hp-news__title{grid-column:auto}.hp-news__list i{grid-row:auto;grid-column:auto}}
/* メニューの項目が増えたので、横並びのメニューは1280px以上で表示。それより狭い画面はハンバーガー */
.hp-nav a{white-space:nowrap}
@media (min-width:1100px) and (max-width:1279px){.hp-nav,.hp-head__cta{display:none!important}.hp-menu{display:grid!important}}
@media (min-width:1280px){.hp-nav ul{gap:26px}}
@media (min-width:1440px){.hp-nav ul{gap:34px}}

/* 実績と受賞：コピーの下に普通に積む（画面が低くても重ならない）。高さがあれば画面下に寄る */
.hp-fv__proof{position:relative;z-index:1;width:100%;padding:0 calc(var(--gut) + 8px) 168px}
.hp-fv__stats{position:static;max-width:960px;margin:0 auto}
@media (min-width:768px){.hp-fv__proof{padding:0 calc(var(--gut) + 56px) 64px}}
@media (min-width:1100px){.hp-fv__proof{padding-bottom:72px}}
@media (max-height:620px) and (min-width:568px){.hp-fv__proof{padding-bottom:40px;padding-right:calc(var(--gut) + 56px)}}
.hp-fv__awards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:26px auto 0;max-width:960px}
.hp-fv__awards li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(23,45,62,.6)}
.hp-fv__awards svg{flex:none;width:26px;height:26px;fill:none;stroke:#C54432;stroke-width:1.3;stroke-linecap:round}
.hp-fv__awards span{display:grid;font-size:11px;line-height:1.4;letter-spacing:.04em}
.hp-fv__awards b{font-family:var(--lp-num);font-weight:700;font-size:12px;letter-spacing:.12em;color:#C54432}
@media (min-width:768px){.hp-fv__awards{margin-top:34px;gap:12px 48px}.hp-fv__awards span{font-size:13px}.hp-fv__awards b{font-size:13px}.hp-fv__awards svg{width:30px;height:30px}}
@media (max-width:359px){.hp-fv__stats dt{white-space:normal;font-size:10px}.hp-fv__stats b{font-size:26px}.hp-fv__stats small{font-size:11px}.hp-fv__stats dd{flex-wrap:wrap;gap:2px}}

/* 見出しは意味のまとまりで改行（「日本」「支援」などが行をまたいで割れないように） */
.hp-nb{display:inline-block}
.hp-h2,.hp-biz__title,.hp-biz__catch,.hp-fv__copy{word-break:keep-all;overflow-wrap:anywhere}
/* FVの見出し：320px幅でも「続ける」が割れない大きさに */
@media (max-width:374px){.hp-fv__copy{font-size:calc((100vw - 48px) / 8.6);letter-spacing:.06em}.hp-fv__sub{font-size:12px;letter-spacing:.06em}}
/* サービスの円：狭い画面では円を小さくし、外側の文字が画面からはみ出さない */
@media (max-width:374px){.hp-orbit{--d:132px}.hp-orbit__node{font-size:11.5px;gap:7px}}


/* FV：背景動画の停止ボタン（左下） */
.hp-fv__pause{position:absolute;z-index:2;left:var(--gut);bottom:24px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(23,45,62,.35);color:#fff;font:inherit;font-size:12px;letter-spacing:.08em;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hp-fv__pause:hover{background:rgba(23,45,62,.6)}
.hp-fv__pause i{position:relative;width:10px;height:12px}
.hp-fv__pause i::before,.hp-fv__pause i::after{content:"";position:absolute;top:0;width:3px;height:12px;background:#fff;border-radius:1px}
.hp-fv__pause i::before{left:1px}.hp-fv__pause i::after{right:1px}
.hp-fv__pause[aria-pressed="true"] i::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;border-radius:0}
.hp-fv__pause[aria-pressed="true"] i::after{display:none}
@media (min-width:1100px){.hp-fv__pause{bottom:32px}}
/* 事業内容のあとの相談ボタン */
.hp-biz__cta{margin-top:40px;display:flex;justify-content:center}
.hp-btn-cta{display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:0 14px 0 32px;border-radius:999px;background:var(--lp-grad);color:#fff;text-decoration:none;font-weight:700;font-size:16px;letter-spacing:.06em;box-shadow:0 14px 30px -14px rgba(197,68,50,.7);transition:transform .2s}
.hp-btn-cta:hover{transform:translateY(-2px)}
.hp-btn-cta i{position:relative;width:34px;height:34px;border-radius:8px;background:#fff}
.hp-btn-cta i::before{content:"";position:absolute;left:9px;right:9px;top:50%;height:1.5px;background:var(--acc)}
.hp-btn-cta i::after{content:"";position:absolute;right:9px;top:calc(50% - 4px);width:7px;height:7px;border-top:1.5px solid var(--acc);border-right:1.5px solid var(--acc);transform:rotate(45deg)}
/* お問い合わせの案内文 */
.hp-contact__lead{color:rgba(255,255,255,.86);line-height:1.9}
/* スマホ：私たちの考えの本文は左揃えで読みやすく（見出しは中央のまま） */
@media (max-width:767px){.hp-value__lines{justify-items:start;text-align:left}}
/* 会社概要・お知らせは情報量に合わせて余白を小さく */
.hp-company,.hp-news{padding-block:88px}
@media (min-width:768px){.hp-company,.hp-news{padding-block:112px}}
@media (min-width:1100px){.hp-company,.hp-news{padding-block:128px}}

/* 02 進め方：3つの手順（紺と写真の上） */
.hp-value__lead{margin-top:32px;color:rgba(255,255,255,.88);text-shadow:0 2px 14px rgba(23,45,62,.6)}
.hp-value__steps{margin-top:40px;display:grid;gap:14px;width:100%;max-width:1040px;text-align:left}
@media (min-width:900px){.hp-value__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:52px}}
.hp-value__steps li{padding:26px 24px 28px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(23,45,62,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (min-width:1100px){.hp-value__steps li{padding:32px 30px 34px}}
.hp-value__no{display:block;font-family:var(--lp-num);font-weight:700;font-size:30px;line-height:1;color:var(--acc)}
.hp-value__steps b{display:block;margin-top:14px;font-size:clamp(19px,5vw,22px);letter-spacing:.08em;color:#fff}
.hp-value__steps p{margin-top:10px;line-height:1.9;color:rgba(255,255,255,.84)}
.hp-value__close{margin-top:40px;font-weight:700;font-size:clamp(15px,4.2vw,18px);letter-spacing:.06em;color:#fff;text-shadow:0 2px 14px rgba(23,45,62,.6)}
@media (min-width:1100px){.hp-value__close{margin-top:52px}}

/* 桜吹雪：FVより下〜フッターまで、画面全体に花びらが舞い落ちる（クリック等は邪魔しない） */
.hp-petals{position:fixed;inset:0;z-index:40;width:100vw;height:100vh;pointer-events:none;opacity:0;transition:opacity .4s ease}
.hp-petals.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.hp-petals{display:none}}

/* 受賞：月桂冠を左右に分けて文字を囲む */
.hp-fv__awards li{gap:6px}
.hp-fv__awards span{text-align:center}
.hp-fv__awards .hp-laurel{flex:none;width:auto;height:40px;fill:none;stroke:none;color:#C54432}
.hp-fv__awards .hp-laurel.is-r{transform:scaleX(-1)}
@media (min-width:768px){.hp-fv__awards .hp-laurel{height:46px}.hp-fv__awards li{gap:8px}}
/* 02 進め方のカード：色の濃い面をやめ、背景が透けるすりガラス */
.hp-value__steps li{background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px -24px rgba(0,0,0,.5)}
.hp-value__steps p{color:rgba(255,255,255,.9)}
.hp-value__steps b,.hp-value__steps p{text-shadow:0 1px 8px rgba(23,45,62,.45)}
/* 桜吹雪は文字やアイコンの裏を落ちる：各セクションの背景 ＜ 花びら（z=1）＜ 中身（z=2） */
.hp-petals{z-index:1}
.hp-sec>.hp-wrap,.hp-value__in,.hp-contact__in,.hp-foot__in{position:relative;z-index:2}

/* 会社概要の中のメンバー：同じ背景・同じ大きさの写真で並べる */
.hp-member{grid-column:1/-1;margin-top:24px}
@media (min-width:1100px){.hp-member{margin-top:40px}}
.hp-member__ttl{display:flex;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--lp-rule);font-size:20px;font-weight:700;letter-spacing:.08em;color:var(--lp-night)}
.hp-member__ttl span{font-family:var(--lp-num);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.hp-member__list{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
@media (min-width:900px){.hp-member__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.hp-member__item img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px}
.hp-member__role{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--acc)}
.hp-member__name{margin-top:2px;font-size:18px;font-weight:700;letter-spacing:.06em;line-height:1.5;color:var(--lp-night)}
.hp-member__name span{display:block;font-family:var(--lp-num);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--lp-sub)}
.hp-member__bio{margin-top:10px;font-size:13px;line-height:1.85;color:var(--lp-sub)}
@media (min-width:768px){.hp-member__bio{font-size:14px}}

/* メンバー写真：背景画像として表示（「画像を新しいタブで開く」が出ない）。
   ファイル自体も表示サイズ（320px）だけなので、拡大した画像は存在しない */
.hp-member__photo{width:100%;max-width:320px;aspect-ratio:1;border-radius:14px;background:#e4e9f1 center/cover no-repeat;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hp-member__item{min-width:0}
/* ラベルの日本語：紺の背景のセクションでは白に */
.hp-value .hp-label em,.hp-approach .hp-label em{color:rgba(255,255,255,.9)}
.hp-value .hp-label{justify-content:center}
/* 04 提供サービス：円の下に6つのサービスの説明 */
.hp-service .hp-orbit{margin-top:40px}
@media (min-width:1100px){.hp-service .hp-orbit{margin-top:56px}}
.hp-svc2{margin-top:56px;display:grid;gap:12px}
@media (min-width:768px){.hp-svc2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.hp-svc2{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:72px}}
.hp-svc2 li{padding:24px 24px 26px;border-radius:14px;background:var(--lp-night-2);border:1px solid rgba(255,255,255,.06)}
@media (min-width:1100px){.hp-svc2 li{padding:28px 28px 30px}}
.hp-svc2__no{display:block;font-family:var(--lp-num);font-weight:700;font-size:26px;line-height:1;color:var(--acc)}
.hp-svc2 h3{margin-top:14px;font-size:18px;font-weight:700;letter-spacing:.04em;line-height:1.5;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
.hp-svc2 p{margin-top:10px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.8)}

.hp-label em{white-space:nowrap}
.hp-value__steps b{line-height:1.5;word-break:keep-all}

/* =========================================================
   修正版（v56）
   ========================================================= */
/* 余白：Concept・Business・Method・Service はスマホ80px前後／PC120px前後 */
.hp-concept,.hp-business,.hp-value,.hp-service{padding-block:80px}
@media (min-width:768px){.hp-concept,.hp-business,.hp-value,.hp-service{padding-block:100px}}
@media (min-width:1100px){.hp-concept,.hp-business,.hp-value,.hp-service{padding-block:120px}}
.hp-company,.hp-news{padding-block:72px}
@media (min-width:768px){.hp-company,.hp-news{padding-block:96px}}
@media (min-width:1100px){.hp-company,.hp-news{padding-block:104px}}
.hp-contact{padding-block:88px}
@media (min-width:1100px){.hp-contact{padding-block:112px}}
.hp-business .hp-biz{margin-top:40px}
@media (min-width:1100px){.hp-business .hp-biz{margin-top:52px}}

/* 事業カード：本文の下に相談ボタン（カードの下端にそろえる） */
.hp-biz__card{display:flex;flex-direction:column}
.hp-biz__btn{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 10px 0 22px;border-radius:999px;background:var(--lp-grad);color:#fff;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.04em;box-shadow:0 12px 24px -14px rgba(197,68,50,.7);transition:transform .2s}
.hp-biz__text+.hp-biz__btn{margin-top:auto}
.hp-biz__card>.hp-biz__btn{position:relative}
.hp-biz__card>.hp-biz__text{margin-bottom:24px}
.hp-biz__btn:hover{transform:translateY(-2px)}
.hp-biz__btn i{position:relative;flex:none;width:30px;height:30px;border-radius:8px;background:#fff}
.hp-biz__btn i::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:1.5px;background:var(--acc)}
.hp-biz__btn i::after{content:"";position:absolute;right:8px;top:calc(50% - 3.5px);width:6px;height:6px;border-top:1.5px solid var(--acc);border-right:1.5px solid var(--acc);transform:rotate(45deg)}
@media (min-width:768px){.hp-biz__btn{font-size:15px;padding-left:24px}}

/* Service：円形図をコンパクトに、説明カードまでの間隔を詰める */
.hp-service .hp-orbit{margin-top:24px;padding:40px 0 44px}
.hp-service .hp-svc2{margin-top:24px}
@media (min-width:768px){.hp-service .hp-orbit{--d:340px;margin-top:32px;padding:24px 0 24px}.hp-service .hp-svc2{margin-top:40px}}
@media (min-width:1100px){.hp-service .hp-orbit{--d:380px;margin-top:32px;padding:16px 0 8px}.hp-service .hp-svc2{margin-top:48px}}
@media (min-width:1280px){.hp-service .hp-orbit{--d:400px}}

/* スマホ・タブレット：固定ヘッダーの「相談する」ボタン（ロゴとメニューの間） */
.hp-head__sp-cta{margin-left:auto;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--lp-grad);color:#fff;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.06em;white-space:nowrap;box-shadow:0 8px 18px -10px rgba(197,68,50,.8)}
.hp-head__sp-cta+.hp-menu{margin-left:6px}
@media (min-width:1280px){.hp-head__sp-cta{display:none}}
.hp-head.is-open .hp-head__sp-cta{visibility:hidden}

/* Contact：記入内容の案内 */
.hp-contact__lead{max-width:760px;margin-inline:auto}
.hp-contact__note{max-width:760px;margin:0 auto;padding:20px 22px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.04);text-align:left}
.hp-contact__note h3{font-size:15px;font-weight:700;letter-spacing:.06em;color:#fff}
.hp-contact__note h3::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--acc);vertical-align:middle}
.hp-contact__note p{margin-top:8px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.82)}
@media (min-width:768px){.hp-contact__note{padding:24px 28px}}

/* 円形図：スマホでは「商品コンセプト設計」を2行にして画面内に収める */
.hp-orbit__br{display:none}
@media (max-width:767px){.hp-orbit__br{display:inline}.hp-orbit__node[data-sp="r"] span{line-height:1.35}}


/* =========================================================
   修正版（v57）
   ========================================================= */
/* 1. セクションラベル：横棒は全セクション共通（32×2px・縮まない）。日本語は収まらなければ次の行へ */
.hp-label{flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:6px}
.hp-label::before,.hp-value .hp-label::before{content:"";display:block;flex:none;width:32px;height:2px;background:var(--acc);opacity:1;align-self:center}
.hp-label em{margin-left:0}
/* Methodのラベルは、Business・Serviceと同じコンテンツ左端に（大見出しは中央のまま） */
.hp-value .hp-label{justify-content:flex-start;justify-self:stretch;width:100%}
.hp-value__steps{max-width:none}
/* 2. Methodのカード：1024px未満は1列、1024px以上は3列。見出しは文節で改行し、カード内に収める */
.hp-value__steps{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.hp-value__steps{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1024px){.hp-value__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.hp-value__steps li{min-width:0}
.hp-value__steps b{word-break:keep-all;overflow-wrap:anywhere}
/* 3. 事業カードの相談ボタン：1行に収める */
.hp-biz__btn{white-space:nowrap;max-width:100%}

/* 5. 読みやすさ（オレンジは --acc と --lp-grad のまま。文字色と装飾の使い分けで調整）
   オレンジ背景のボタン・タグ：文字を紺に */
.hp-head.is-solid .hp-head__cta,.hp-head.is-solid .hp-head__cta:hover,.hp-head__sp-cta,.hp-biz__btn,.hp-contact__link,.hp-drawer .hp-btn,.hp-news__tag.is-press{color:var(--lp-night)}
.hp-contact__link .hp-contact__ja{color:var(--lp-night)}
/* 白・薄いグレー背景の小さな文字：紺に（横棒などの装飾はオレンジのまま） */
.hp-biz__no{color:var(--lp-night)}
/* 白・薄いグレー背景の大見出しの強調：紺の文字＋オレンジの下線（文字に重ならない位置） */
/* お知らせのホバー：色ではなくオレンジの下線で示す */
/* キーボードフォーカス：明るい背景では紺の枠、紺の背景ではオレンジの枠 */
.hp-concept :focus-visible,.hp-business :focus-visible,.hp-company :focus-visible,.hp-news :focus-visible{outline-color:var(--lp-night)}

/* 6. Contact：案内枠（国内と海外を分けて左揃え） */
.hp-contact__note h3{font-size:15px}
.hp-contact__note dl{margin:12px 0 0;display:grid;gap:12px}
.hp-contact__note dt{font-weight:700;font-size:14px;color:#fff}
.hp-contact__note dd{margin:2px 0 0;font-size:14px;line-height:1.85;color:rgba(255,255,255,.82)}
@media (min-width:768px){.hp-contact__note dl{gap:14px}}

/* 文中の改行：要約文は通常の日本語の改行（句読点だけが行頭に残らない）、名称は文節で */
.hp-biz__catch{word-break:normal;overflow-wrap:normal;line-break:strict}
.hp-contact__note h3{word-break:keep-all;overflow-wrap:anywhere}
/* 本文：長音「ー」や小さい「ゃ」などが行頭に来ない改行 */
.hp-text p,.hp-value__steps p,.hp-biz__text,.hp-svc2 p,.hp-member__bio,.hp-contact__lead,.hp-contact__note dd{line-break:strict}

/* =========================================================
   修正（v58）：ラベル・役割はオレンジ、見出しの強調はオレンジのグラデ文字、お知らせのホバーは下線なし
   ========================================================= */
.hp-news__list a:hover .hp-news__title{text-decoration:none}
.hp-news__list a:hover i{border-color:var(--acc)}
/* 会社概要：社名の由来と支援の姿勢（見出しの下） */
.hp-company__intro{margin-top:24px;display:grid;gap:14px;font-size:15px;line-height:2;color:var(--lp-text);line-break:strict}
@media (min-width:1100px){.hp-company__intro{margin-top:32px;font-size:15px}}
.hp-company__intro br{display:none}
.hp-company__intro p{text-wrap:pretty}

/* =========================================================
   v59：配色「深い藍 × 生成り × 朱」＋和の質感（2026-11-07 確定）
   藍 #172D3E（濃い面）／生成り #F7F4ED（地）／朱 #C54432（アクセント）／墨 #20252B（文字）
   ========================================================= */
:root{--lp-grad:linear-gradient(90deg,#C54432,#A8362A);--em-grad:linear-gradient(90deg,#C54432 15%,#D96650);--kinari:#F7F4ED;--kinari-2:#FBF9F4}
body{background:var(--kinari)}
.hp-concept,.hp-company{background:var(--kinari-2)}
.hp-business,.hp-news{background:var(--kinari)}
.hp-biz__card,.hp-news__list a:hover{background:#fff}
/* 朱の面の文字は白（紺だと読みにくい） */
.hp-head.is-solid .hp-head__cta,.hp-head.is-solid .hp-head__cta:hover,.hp-head__sp-cta,.hp-biz__btn,.hp-contact__link,.hp-contact__link .hp-contact__ja,.hp-drawer .hp-btn,.hp-news__tag.is-press{color:#fff}
/* 見出しの強調：朱 → 明るい朱のグラデ文字 */
.hp-em{background:var(--em-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-contact__link{background:var(--lp-grad)}
.hp-contact__link i::before{background:#C54432}.hp-contact__link i::after{border-color:#C54432}
.hp-biz__btn i::before,.hp-btn-cta i::before{background:#C54432}.hp-biz__btn i::after{border-color:#C54432}
/* コンセプト：見出しはFVと同じ明朝、背景にうっすら和紙 */
.hp-concept .hp-h2{font-family:var(--serif);font-weight:600;line-height:1.7;letter-spacing:.06em}
.hp-concept{background-color:var(--kinari-2);background-image:url("../img/washi.svg");background-size:cover;background-position:center}
/* 事業内容のカード：角丸を小さく、影を弱く、細い輪郭線。上端の線は朱のグラデ */
.hp-biz__card{border-radius:5px;border:1px solid rgba(23,45,62,.10);box-shadow:0 6px 14px -12px rgba(23,45,62,.28)}
.hp-biz__card::before{background:var(--em-grad)}

/* ---------- 言語の切り替え（ヘッダー右上：相談ボタンの左。スマホはメニューの中） ---------- */
.hp-lang{display:none;align-items:center;margin-left:-8px;padding-left:16px;border-left:1px solid rgba(255,255,255,.22)}
.hp-lang a{position:relative;padding:4px 7px;font-family:var(--lp-num);font-weight:600;font-size:12px;letter-spacing:.12em;line-height:1.5;color:rgba(255,255,255,.62);text-decoration:none;white-space:nowrap;transition:color .2s}
.hp-lang a:hover{color:#fff}
.hp-lang a.is-on{color:#fff}
.hp-lang a.is-on::after{content:"";position:absolute;left:7px;right:7px;bottom:-3px;height:2px;background:var(--acc)}
.hp-head:not(.is-solid):not(.is-open) .hp-lang a{text-shadow:0 1px 10px rgba(23,45,62,.7)}
@media (min-width:1280px){.hp-lang{display:flex}}
.hp-drawer__lang{display:flex;justify-content:center;gap:8px 22px;flex-wrap:wrap;margin-top:32px}
.hp-drawer__lang a{padding:6px 2px;font-size:14px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.66);text-decoration:none;border-bottom:2px solid transparent}
.hp-drawer__lang a.is-on{color:#fff;border-bottom-color:var(--acc)}
/* 簡体字中国語：日本語フォントにない字があるため中国語フォントを先に。行の折り返しは中国語の規則で */
html:lang(zh){--sans:"Noto Sans SC","Noto Sans JP","PingFang SC","Microsoft YaHei",sans-serif;--serif:"Noto Serif SC","Noto Serif JP",serif}
html:lang(zh) body{font-family:var(--sans)}
/* 英語：欧文は字間を詰める */
html:lang(en) .hp-fv__copy{letter-spacing:.02em}
html:lang(en) .hp-h2,html:lang(en) .hp-concept .hp-h2{letter-spacing:0}
/* 英語：スマホではサービスの円の周りの項目名が長いので、2行まで折り返す */
@media (max-width:767px){html:lang(en) .hp-orbit__node span{white-space:normal;max-width:7.5em;line-height:1.35}html:lang(en) .hp-orbit__node[data-sp="l"] span{text-align:right}html:lang(en) .hp-orbit__node[data-sp="t"] span,html:lang(en) .hp-orbit__node[data-sp="b"] span{text-align:center;max-width:12em}}
@media (max-width:767px){html:lang(en) .hp-fv__copy{font-size:clamp(24px,7.2vw,32px);line-height:1.45}}
/* FVのアワード：月桂冠と「PinPro Award 20xx」は金 #C9A86A の単色（アクセントの朱とは別。ご指定） */
.hp-fv__awards .hp-laurel{color:#C9A86A}
.hp-fv__awards b{color:#C9A86A}