@charset "UTF-8";
/* =========================================================
   花本宏樹税理士事務所 — HANAMOTO Tax Accountant Office
   Photo-led editorial layout (faithful to OGINO reference)
   navy #073061 / orange tick #fa723d / Shippori Mincho + Noto Sans JP
   ========================================================= */

:root{
  --navy:#073061;
  --navy-2:#16456a;
  --navy-3:#0c2f4e;
  --orange:#fa723d;
  --ink:#1f2430;
  --sub:#666c75;
  --gray:#9aa0a8;
  --line:#e6e7ec;
  --bg:#fff;
  --soft:#f5f5f7;

  --serif:"Shippori Mincho","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  --sans:"Noto Sans JP","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --en-serif:"Cormorant Garamond","Times New Roman",serif;
  --en-sans:"Jost","Helvetica Neue",Arial,sans-serif;

  --brand-w:130px;
  --gutter:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.19,1,.22,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  line-height:1.95;letter-spacing:.04em;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .3s var(--ease),opacity .3s var(--ease)}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,dl,dd,figure{margin:0}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
time{font-family:var(--en-sans)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- shared bits ---------- */
.tick{display:inline-block;width:3px;height:1em;background:var(--orange);margin-right:.7em;
  transform:translateY(.12em);flex:0 0 auto}
.ttl-en{display:flex;align-items:center;font-family:var(--en-serif);font-style:italic;
  font-weight:500;font-size:clamp(22px,2.6vw,30px);color:var(--navy);letter-spacing:.02em;line-height:1}
.ttl-en--light{color:#fff}
.ttl-en--center{justify-content:center}
.sec-ja{font-family:var(--sans);font-size:12px;letter-spacing:.32em;color:var(--sub);margin-top:1em}

.viewmore{display:inline-flex;align-items:center;gap:14px;font-family:var(--en-sans);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.viewmore i{position:relative;width:46px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.viewmore 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)}
.viewmore:hover i{width:64px}
.viewmore--dark{color:var(--navy)}

.btn{display:inline-flex;align-items:center;gap:16px;height:64px;padding:0 38px;border-radius:999px;
  font-size:14px;letter-spacing:.12em;background:var(--navy);color:#fff;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s var(--ease)}
.btn i{width:30px;height:1px;background:currentColor;position:relative}
.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)}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -16px rgba(7,48,97,.6)}
.btn--light{background:#fff;color:var(--navy)}
.btn--orange{background:var(--orange);box-shadow:0 14px 30px -14px rgba(250,114,61,.6)}
.btn--orange:hover{background:#e85f2b}

/* =========================================================
   Loader
   ========================================================= */
.loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--navy);
  transition:opacity .8s var(--ease),visibility .8s var(--ease)}
.loader.is-hidden{opacity:0;visibility:hidden}
.no-intro .loader{display:none}
.loader__box{display:flex;flex-direction:column;align-items:center;gap:16px}
.loader__crest img{width:64px;height:64px;animation:fadeUp 1s var(--ease)}
.loader__word{font-family:var(--en-serif);font-style:italic;font-size:30px;color:#fff;letter-spacing:.04em}
.loader__word i{color:var(--orange);font-style:normal}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* =========================================================
   Fixed brand box (top-left navy square)
   ========================================================= */
.brand{position:fixed;top:0;left:0;z-index:1000;width:var(--brand-w);
  background:var(--navy);color:#fff;padding:22px 0 26px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  box-shadow:0 18px 40px -24px rgba(7,48,97,.55)}
.brand__crest img{width:46px;height:46px}
.brand__word{font-family:var(--en-serif);font-style:italic;font-size:26px;line-height:1;letter-spacing:.03em}
.brand__word i{color:var(--orange);font-style:normal}
.brand__name{writing-mode:vertical-rl;font-family:var(--serif);font-size:12px;letter-spacing:.3em;
  color:rgba(255,255,255,.9);margin-top:6px;white-space:nowrap}

/* =========================================================
   Top-right utility + menu button
   ========================================================= */
.util{position:fixed;top:0;right:0;z-index:1000;display:flex;align-items:center;gap:26px;
  padding:26px clamp(20px,3vw,40px)}
.util__en{font-family:var(--en-sans);font-size:11px;letter-spacing:.18em;color:var(--navy);
  transition:color .3s var(--ease)}
.menu-btn{display:flex;align-items:center;gap:12px}
.menu-btn__lines{display:flex;flex-direction:column;gap:5px;width:26px}
.menu-btn__lines i{height:1.6px;background:var(--navy);transition:transform .4s var(--ease),opacity .3s var(--ease),background .3s var(--ease)}
.menu-btn__txt{font-family:var(--en-sans);font-size:12px;letter-spacing:.14em;color:var(--navy);transition:color .3s var(--ease)}
.is-menu-open .util__en{color:#fff}
.is-menu-open .menu-btn__txt{color:#fff}
.is-menu-open .menu-btn__lines i{background:#fff}
.is-menu-open .menu-btn__lines i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.is-menu-open .menu-btn__lines i:nth-child(2){opacity:0}
.is-menu-open .menu-btn__lines i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* =========================================================
   Overlay navigation
   ========================================================= */
.ovnav{position:fixed;inset:0;z-index:999;background:var(--navy);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;clip-path:circle(0% at calc(100% - 70px) 44px);
  transition:clip-path .7s var(--ease),opacity .4s var(--ease),visibility .4s var(--ease)}
.is-menu-open .ovnav{opacity:1;visibility:visible;clip-path:circle(150% at calc(100% - 70px) 44px)}
.ovnav__list{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,26px);text-align:center}
.ovnav__list a{display:flex;flex-direction:column;gap:.3em;align-items:center;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
.is-menu-open .ovnav__list a{opacity:1;transform:none}
.ovnav__list li:nth-child(1) a{transition-delay:.18s}
.ovnav__list li:nth-child(2) a{transition-delay:.24s}
.ovnav__list li:nth-child(3) a{transition-delay:.30s}
.ovnav__list li:nth-child(4) a{transition-delay:.36s}
.ovnav__list li:nth-child(5) a{transition-delay:.42s}
.ovnav__list li:nth-child(6) a{transition-delay:.48s}
.ovnav__list li:nth-child(7) a{transition-delay:.54s}
.ovnav__en{font-family:var(--en-serif);font-style:italic;font-size:clamp(28px,4vw,46px);color:#fff;line-height:1.1}
.ovnav__ja{font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.6)}
.ovnav__list a:hover .ovnav__en{color:var(--orange)}

/* =========================================================
   Right-edge side navigation (dots + contact)
   ========================================================= */
.sidenav{position:fixed;right:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:900;
  display:flex;flex-direction:column;align-items:center;gap:26px}
.sidenav__dots{display:flex;flex-direction:column;gap:16px}
.sidenav__dots a{display:block;width:10px;height:10px;border-radius:50%;border:1px solid var(--navy);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.sidenav__dots a:hover{transform:scale(1.25)}
.sidenav__dots a.is-active{background:var(--navy)}
.sidenav__contact{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:#fff;box-shadow:0 12px 26px -12px rgba(7,48,97,.6);
  transition:transform .35s var(--ease),background .3s var(--ease)}
.sidenav__contact:hover{background:var(--orange);transform:translateY(-3px)}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero__slider{position:absolute;inset:0;z-index:0}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(246,249,252,.5) 64%,rgba(246,249,252,.82) 100%),
    linear-gradient(0deg,rgba(255,255,255,.34),rgba(255,255,255,0) 26%),
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 18%)}
.hero__catch,.hero__foot,.hero__scroll{z-index:2}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);transition:opacity 1.4s var(--ease),transform 7s linear}
.hero__slide.is-active{opacity:1;transform:scale(1)}
/* 1枚目は人物が左側にいるため左寄せで表示 */
.hero__slide:first-child{background-position:left center}

.hero__copy{position:absolute;top:0;bottom:0;right:clamp(48px,5vw,104px);
  writing-mode:vertical-rl;text-align:center;z-index:2;pointer-events:none;
  padding-top:clamp(72px,10vh,112px);padding-bottom:clamp(56px,8vh,96px)}
.hero__catch{font-family:var(--serif);font-weight:600;color:var(--navy);white-space:nowrap;
  font-size:clamp(19px,min(2.5vw,3.7vh),32px);letter-spacing:.18em;line-height:1.62;
  margin-block-end:clamp(8px,1vw,16px);
  text-shadow:0 1px 16px rgba(255,255,255,.85),0 0 2px rgba(255,255,255,.7)}
.hero__sub{font-family:var(--sans);font-weight:400;color:var(--navy);white-space:nowrap;
  font-size:clamp(11px,min(1.25vw,1.7vh),13.5px);letter-spacing:.13em;line-height:1.7;
  text-shadow:0 1px 12px rgba(255,255,255,.9),0 0 2px rgba(255,255,255,.75)}
/* 縦書き内の英字（IT等）を正立させる縦中横。親の字間が内側に効いて中心がずれるのを防ぐため letter-spacing:0 */
.tcy{-webkit-text-combine:horizontal;text-combine-upright:all;letter-spacing:0}

.hero__foot{position:absolute;left:calc(var(--brand-w) + clamp(24px,4vw,64px));bottom:clamp(34px,5vw,60px);
  display:flex;align-items:center;gap:clamp(24px,4vw,56px)}
.hero__foot .viewmore{color:var(--navy)}
.hero__pager{display:flex;align-items:center;gap:18px}
.hero__pager button{font-family:var(--en-sans);font-size:12px;letter-spacing:.1em;color:var(--gray);
  position:relative;padding-bottom:6px;transition:color .3s var(--ease)}
.hero__pager button.is-active{color:var(--navy)}
.hero__pager button.is-active::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--orange)}

.hero__scroll{position:absolute;right:clamp(20px,2.4vw,38px);bottom:clamp(30px,5vw,54px);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--en-sans);font-size:10px;letter-spacing:.24em;color:var(--navy);writing-mode:vertical-rl}
.hero__scroll i{width:1px;height:56px;background:rgba(7,48,97,.3);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;height:50%;background:var(--navy);animation:scrolldown 2s var(--ease) infinite}
@keyframes scrolldown{0%{transform:translateY(-100%)}60%,100%{transform:translateY(200%)}}

/* =========================================================
   About
   ========================================================= */
.about{position:relative;display:grid;grid-template-columns:46% 1fr;align-items:center;
  gap:clamp(36px,5vw,80px);padding:clamp(80px,10vw,150px) clamp(40px,6vw,110px) clamp(80px,10vw,150px) 0;overflow:hidden}
.about__media{position:relative;align-self:stretch;min-height:420px}
.about__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.about__name{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;align-items:baseline;gap:.5em;
  padding:56px 28px 22px;color:#fff;font-family:var(--serif);font-weight:500;
  font-size:clamp(16px,1.5vw,20px);letter-spacing:.12em;
  background:linear-gradient(to top,rgba(7,48,97,.78),rgba(7,48,97,0))}
.about__name small{font-size:.68em;font-weight:400;letter-spacing:.18em;opacity:.85}
.about__body{max-width:560px;padding-right:clamp(0px,3vw,40px)}
.about__title{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,42px);
  line-height:1.55;letter-spacing:.05em;color:var(--navy);margin:1em 0 1.2em}
.about__text p{font-size:14.5px;color:var(--sub);line-height:2.15;margin-bottom:1.3em}
.about__slogan{font-family:var(--en-serif);font-style:italic;font-size:clamp(18px,2.2vw,26px);
  color:var(--navy);letter-spacing:.04em;margin:1.4em 0}
.about__slogan span{color:var(--orange)}
.about__deco{position:absolute;right:-2vw;top:8%;font-family:var(--en-serif);font-style:italic;
  font-size:clamp(120px,22vw,300px);line-height:1;color:var(--soft);z-index:-1;pointer-events:none}

/* =========================================================
   Gateway (Service / Voice / History)
   ========================================================= */
.gateway{padding:clamp(70px,8vw,120px) 0;background:var(--bg)}
.gateway__inner{display:grid;grid-template-columns:repeat(3,1fr);
  max-width:1320px;margin-inline:auto;padding-inline:clamp(40px,6vw,90px)}
.gw{padding:0 clamp(22px,2.6vw,44px);position:relative}
.gw + .gw{border-left:1px solid var(--line)}
.gw__ttl{display:flex;align-items:center;font-family:var(--en-serif);font-style:italic;font-weight:500;
  font-size:clamp(20px,2.2vw,27px);color:var(--navy);margin-bottom:30px;line-height:1}
.gw__lead{font-size:13px;line-height:2;color:var(--sub);margin:24px 0 22px}

.iconlist{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px}
.iconlist li{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.iconlist__ic{width:46px;height:46px;color:var(--navy)}
.iconlist__ic svg{width:100%;height:100%}
.iconlist b{font-weight:500;font-size:13.5px;color:var(--ink);letter-spacing:.02em}
.iconlist small{font-size:10.5px;color:var(--gray);letter-spacing:.06em}

.gw__media img{width:100%;height:auto;border-radius:2px}
.gw__media--stack{display:flex;flex-direction:column;gap:14px}

/* =========================================================
   News
   ========================================================= */
.news{padding:clamp(70px,8vw,120px) 0;background:var(--soft)}
.news__inner{max-width:1100px;margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,5vw,70px)}
.news__head{display:flex;flex-direction:column;gap:0}
.news__head .viewmore{margin-top:auto}
.news__list li{border-bottom:1px solid #e0e1e6}
.news__list li:first-child{border-top:1px solid #e0e1e6}
.news__list a{display:flex;align-items:center;gap:22px;padding:20px 6px;transition:background .3s var(--ease)}
.news__list a:hover{background:#fff}
.news__list a:hover .news__txt{color:var(--orange)}
.news__list time{font-size:13px;color:var(--gray);letter-spacing:.06em;flex:0 0 auto}
.news__cat{position:relative;flex:0 0 auto;min-width:5.2em;padding-left:14px;
  font-size:11.5px;letter-spacing:.14em;color:var(--navy)}
.news__cat::before{content:"";position:absolute;left:0;top:.2em;width:2px;height:1em;background:var(--orange)}
.news__txt{font-size:14px;color:var(--ink);transition:color .3s var(--ease);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =========================================================
   Contact
   ========================================================= */
.contact{background:#fff;padding:clamp(80px,10vw,140px) var(--gutter);text-align:center}
.contact__inner{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.contact__title{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.4vw,40px);
  color:var(--navy);letter-spacing:.05em;margin-top:.4em}
.contact__text{font-size:14.5px;color:var(--sub);line-height:2.1}
.contact__actions{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,56px);
  flex-wrap:wrap;margin-top:1.4em}
.contact__note{font-size:12px;letter-spacing:.08em;color:var(--gray);margin-top:1.2em}

/* =========================================================
   Footer
   ========================================================= */
.footer{background:var(--navy-3);color:rgba(255,255,255,.78)}
.footer__top{max-width:1100px;margin-inline:auto;padding:clamp(54px,6vw,84px) var(--gutter);
  display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:clamp(30px,4vw,60px)}
.footer__brand{display:flex;flex-direction:column;gap:10px}
.footer__crest img{width:54px;height:54px}
.footer__word{font-family:var(--en-serif);font-style:italic;font-size:28px;color:#fff;line-height:1}
.footer__word i{color:var(--orange);font-style:normal}
.footer__name{font-size:11px;letter-spacing:.24em;color:rgba(255,255,255,.7)}
.footer__info dl{display:flex;flex-direction:column;gap:12px}
.footer__info div{display:grid;grid-template-columns:90px 1fr;gap:14px;font-size:12.5px;line-height:1.7}
.footer__info dt{color:rgba(255,255,255,.5);letter-spacing:.08em}
.footer__info dd{color:rgba(255,255,255,.9)}
.footer__info dd a{color:rgba(255,255,255,.9)}
.footer__info dd a:hover{color:var(--orange)}
.footer__nav ul{display:flex;flex-direction:column;gap:12px}
.footer__nav a{font-size:12.5px;color:rgba(255,255,255,.8);position:relative;padding-left:16px}
.footer__nav a::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--orange)}
.footer__nav a:hover{color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12)}
.footer__bottom{max-width:1100px;margin-inline:auto;padding:22px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer__copy{font-family:var(--en-sans);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.footer__sub{display:flex;gap:22px}
.footer__sub a{font-size:11.5px;color:rgba(255,255,255,.7)}
.footer__sub a:hover{color:#fff}

/* =========================================================
   Reveal
   ========================================================= */
.reveal-init{opacity:0;transform:translate3d(0,28px,0);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-init.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal-init{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
  .hero__slide{opacity:1}
  .hero__scroll i::after{animation:none}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  :root{--brand-w:112px}
  /* tablet & narrow: switch hero copy to horizontal, anchored bottom-left */
  .hero__copy{top:auto;bottom:clamp(96px,13vh,150px);right:auto;left:clamp(24px,5vw,56px);
    writing-mode:horizontal-tb;text-align:left;padding-top:0;padding-bottom:0;
    max-width:min(82vw,640px)}
  .hero__catch{writing-mode:horizontal-tb;white-space:normal;
    font-size:clamp(27px,4.6vw,42px);letter-spacing:.04em;line-height:1.5;margin-block-end:16px}
  .hero__sub{writing-mode:horizontal-tb;white-space:normal;
    font-size:clamp(13px,1.9vw,16px);letter-spacing:.06em;line-height:1.85}
  .gateway__inner{grid-template-columns:1fr;gap:0;max-width:600px}
  .gw{padding:clamp(34px,5vw,48px) 0}
  .gw + .gw{border-left:0;border-top:1px solid var(--line)}
  .iconlist{grid-template-columns:1fr 1fr 1fr 1fr}
  .about{grid-template-columns:1fr;padding:0 0 clamp(60px,8vw,90px)}
  .about__media{min-height:62vw;max-height:520px}
  .about__body{max-width:none;padding:clamp(40px,6vw,64px) var(--gutter) 0}
  .about__deco{font-size:30vw;top:auto;bottom:2%;right:2%}
}
@media (max-width:767px){
  .util{padding:18px 18px}
  .util__en{display:none}
  .brand{flex-direction:row;width:auto;padding:10px 14px;gap:10px;align-items:center}
  .brand__crest img{width:30px;height:30px}
  .brand__word{font-size:19px}
  .brand__name{writing-mode:horizontal-tb;height:auto;font-size:9px;letter-spacing:.18em;margin:0}
  .sidenav__dots{display:none}
  .sidenav{right:14px;bottom:14px;top:auto;transform:none}
  .news__inner{grid-template-columns:1fr;gap:22px}
  .news__head .news__more{margin-top:18px}
  .news__list a{flex-wrap:wrap;gap:8px 14px}
  .news__txt{white-space:normal;width:100%}
  .hero__copy{right:auto;left:18px;top:auto;bottom:122px;
    writing-mode:horizontal-tb;text-align:left;padding-top:0;padding-bottom:0;max-width:88vw}
  .hero__catch{white-space:normal;font-size:clamp(22px,6.2vw,30px);letter-spacing:.03em;line-height:1.45;margin-block-end:12px}
  .hero__sub{white-space:normal;font-size:12px;letter-spacing:.04em;line-height:1.7}
  .hero__foot{left:18px;bottom:50px}
  .hero__scroll{display:none}
  /* mobile: 横長ヒーロー写真の過度なズームを緩和（縦長すぎる100svhをやめて比率で制御） */
  .hero{height:auto;min-height:0;aspect-ratio:4/5;max-height:90svh}
  /* mobile: About代表写真を本文（View moreの下）に、小さめの縦長写真として確実に表示 */
  .about{display:flex;flex-direction:column}
  .about__body{order:1}
  .about__media{order:2;position:relative;aspect-ratio:auto;min-height:0;max-height:none;
    width:min(66%,260px);margin:clamp(22px,6vw,34px) auto 0;align-self:center}
  .about__media img{position:static;width:100%;height:auto;border-radius:6px}
  .about__name{padding:34px 16px 12px;font-size:15px;letter-spacing:.1em;border-radius:0 0 6px 6px}
  .footer__top{grid-template-columns:1fr;gap:34px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .contact__actions{flex-direction:column;gap:26px}
}
@media (max-width:414px){
  .iconlist{grid-template-columns:1fr 1fr}
  .hero__catch{font-size:26px}
  .btn{height:58px;padding:0 30px}
}

/* =========================================================
   Sub-pages (about / service / voice / history / news / privacy / sitemap)
   ========================================================= */
.container{width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.page-section{padding-block:clamp(60px,8vw,104px)}
.page-section--soft{background:var(--soft)}

/* page header band */
.page-head{position:relative;background:var(--soft);text-align:center;overflow:hidden;
  padding:clamp(132px,17vh,196px) var(--gutter) clamp(46px,6vw,72px)}
.page-head__deco{position:absolute;right:-1vw;bottom:-4%;font-family:var(--en-serif);font-style:italic;
  font-size:clamp(110px,20vw,260px);line-height:1;color:#fff;opacity:.6;pointer-events:none;z-index:0}
.page-head__inner{position:relative;z-index:1}
.breadcrumb{display:flex;justify-content:center;flex-wrap:wrap;gap:.6em;font-family:var(--en-sans);
  font-size:11px;letter-spacing:.08em;color:var(--gray);margin-bottom:1.7em}
.breadcrumb a{color:var(--sub)}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb span{color:var(--line)}
.page-head__en{display:block;font-family:var(--en-serif);font-style:italic;font-weight:500;
  font-size:clamp(38px,6vw,66px);color:var(--navy);line-height:1.05;letter-spacing:.02em}
.page-head__ja{display:block;margin-top:.9em;font-size:12px;letter-spacing:.34em;color:var(--sub)}

/* generic block head + lead */
.block-head{text-align:center;margin-bottom:clamp(38px,5vw,60px)}
.block-head .ttl-en{justify-content:center}
.block-head__title{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,34px);
  color:var(--navy);line-height:1.5;letter-spacing:.05em;margin-top:.5em}
.lead{max-width:760px;margin:0 auto;text-align:center;font-size:15px;line-height:2.15;color:var(--sub)}
.note{margin-top:24px;font-size:12px;color:var(--gray);text-align:center}
.portrait{max-width:520px;margin:0 auto clamp(28px,4vw,44px)}
.portrait img{width:100%;border-radius:6px;box-shadow:0 30px 60px -30px rgba(7,48,97,.4)}
.portrait figcaption{text-align:center;margin-top:1.1em;font-size:12px;letter-spacing:.12em;color:var(--sub)}

/* service detail list */
.svc-list{max-width:940px;margin:clamp(38px,5vw,60px) auto 0}
.svc{display:grid;grid-template-columns:96px 1fr;gap:clamp(20px,3vw,44px);
  padding:clamp(30px,4vw,46px) 0;border-top:1px solid var(--line)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc__lead{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.svc__no{font-family:var(--en-serif);font-style:italic;font-size:18px;color:var(--orange);line-height:1}
.svc__icon{width:52px;height:52px;color:var(--navy)}
.svc__icon svg{width:100%;height:100%}
.svc__title{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.2vw,23px);
  color:var(--navy);margin-bottom:.7em;letter-spacing:.03em}
.svc__text{font-size:14px;line-height:2.05;color:var(--sub);margin-bottom:1.1em}
.svc__feats{display:flex;flex-wrap:wrap;gap:8px 28px}
.svc__feats li{position:relative;padding-left:18px;font-size:13px;color:var(--navy);letter-spacing:.05em}
.svc__feats li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--orange)}

/* pricing */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  max-width:1000px;margin-inline:auto;align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:clamp(30px,3vw,44px) clamp(22px,2.5vw,32px);text-align:center;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(7,48,97,.3)}
.plan--feature{border:1.5px solid var(--navy);box-shadow:0 24px 50px -30px rgba(7,48,97,.45)}
.plan__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--orange);
  color:#fff;font-size:11px;letter-spacing:.14em;padding:5px 16px;border-radius:999px}
.plan__name{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--navy);letter-spacing:.07em}
.plan__price{display:flex;align-items:baseline;justify-content:center;gap:.22em;
  margin:.7em 0 1.1em;padding-bottom:1.1em;border-bottom:1px dashed var(--line)}
.plan__price b{font-family:var(--en-serif);font-weight:600;font-size:clamp(30px,4vw,46px);color:var(--navy);line-height:1}
.plan__price small{font-size:12px;color:var(--sub)}
.plan__feats{display:flex;flex-direction:column;gap:.8em;text-align:left}
.plan__feats li{position:relative;padding-left:24px;font-size:13px;color:var(--sub);line-height:1.7}
.plan__feats li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;
  border-left:1.5px solid var(--orange);border-bottom:1.5px solid var(--orange);transform:rotate(-45deg)}
.fee-table{max-width:760px;margin:clamp(40px,5vw,64px) auto 0;border-top:1px solid var(--line)}
.fee-table div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:18px 6px;border-bottom:1px solid var(--line)}
.fee-table dt{font-size:14px;color:var(--navy)}
.fee-table dd{font-size:14px;color:var(--sub);text-align:right;font-family:var(--sans)}
.fee-table dd b{font-family:var(--en-serif);font-size:19px;color:var(--navy);font-weight:600;margin-right:.2em}

/* history — representative profile */
.profile{display:grid;grid-template-columns:330px 1fr;gap:clamp(30px,5vw,66px);
  align-items:center;max-width:900px;margin-inline:auto}
.profile__media{margin:0}
.profile__media img{width:100%;border-radius:6px;box-shadow:0 30px 60px -30px rgba(7,48,97,.4)}
.profile__role{font-family:var(--en-serif);font-style:italic;font-size:18px;color:var(--orange);
  line-height:1;margin-bottom:.5em}
.profile__name{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,32px);
  color:var(--navy);letter-spacing:.06em;line-height:1.4}
.profile__name small{display:block;margin-top:.7em;font-family:var(--en-sans);font-weight:400;
  font-size:11.5px;letter-spacing:.18em;color:var(--gray)}
.profile__text{font-size:14px;line-height:2.1;color:var(--sub);margin:1.4em 0}
.profile__facts{border-top:1px solid var(--line)}
.profile__facts div{display:flex;gap:16px;padding:13px 2px;border-bottom:1px solid var(--line)}
.profile__facts dt{flex:0 0 4em;font-size:12px;letter-spacing:.1em;color:var(--navy)}
.profile__facts dd{font-size:13.5px;line-height:1.85;color:var(--sub)}

/* history — timeline */
.timeline{max-width:720px;margin:clamp(40px,5vw,60px) auto 0}
.timeline__item{position:relative;margin-left:6px;padding:0 0 clamp(26px,3vw,38px) clamp(30px,5vw,50px);
  border-left:1px solid var(--line)}
.timeline__item:last-child{border-left-color:transparent;padding-bottom:0}
.timeline__item::before{content:"";position:absolute;left:-6px;top:5px;width:11px;height:11px;
  border-radius:50%;background:#fff;border:2px solid var(--orange)}
.timeline__year{display:inline-block;font-family:var(--en-serif);font-style:italic;font-size:22px;
  color:var(--orange);line-height:1;margin-bottom:.4em}
.timeline__title{font-family:var(--serif);font-weight:600;font-size:clamp(16px,2vw,19px);
  color:var(--navy);letter-spacing:.04em;line-height:1.6}
.timeline__text{font-size:13.5px;line-height:2;color:var(--sub);margin-top:.55em}

/* strengths — differentiation / 選ばれる理由 */
.strengths{padding:clamp(70px,8vw,120px) 0;background:var(--soft)}
.strength-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px);
  max-width:1000px;margin-inline:auto}
.strength{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:clamp(30px,3.4vw,46px) clamp(26px,3vw,40px);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.strength:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(7,48,97,.3)}
.strength__no{position:absolute;top:16px;right:26px;font-family:var(--en-serif);font-style:italic;
  font-size:clamp(44px,5vw,64px);line-height:1;color:var(--soft);pointer-events:none}
.strength__label{font-family:var(--en-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);margin-bottom:1.1em}
.strength__title{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.2vw,23px);
  color:var(--navy);line-height:1.6;letter-spacing:.03em;margin-bottom:.9em}
.strength__title em{font-style:normal;color:var(--orange)}
.strength__text{font-size:14px;line-height:2.05;color:var(--sub);margin-bottom:1.4em}
.strength__points{display:flex;flex-wrap:wrap;gap:8px}
.strength__points li{font-size:12px;letter-spacing:.04em;color:var(--navy);background:var(--soft);
  border:1px solid var(--line);border-radius:999px;padding:5px 14px}

/* voice (quote cards) */
.qcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px);max-width:1000px;margin-inline:auto}
.qcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:6px;padding:clamp(28px,3vw,40px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.qcard:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(7,48,97,.28)}
.qcard__mark{position:absolute;top:14px;right:24px;font-family:var(--en-serif);font-size:58px;line-height:1;color:var(--soft)}
.qcard__text{position:relative;font-size:14.5px;line-height:2.05;color:var(--ink);margin-bottom:1.6em}
.qcard__meta{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.qcard__meta b{font-size:14px;color:var(--navy);font-weight:500}
.qcard__meta span{font-size:12px;color:var(--gray)}

/* prose (legal) */
.prose{max-width:820px;margin-inline:auto}
.prose > p:first-child{margin-top:0}
.prose h2{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--navy);
  margin:2.2em 0 .8em;letter-spacing:.04em}
.prose p{font-size:14px;line-height:2.1;color:var(--sub);margin-bottom:1em}
.prose ul{margin:0 0 1em;padding-left:1.3em}
.prose li{font-size:14px;line-height:2;color:var(--sub);list-style:disc;margin-bottom:.3em}
.prose .updated{font-size:12px;color:var(--gray);margin-top:2.6em;text-align:right}

/* sitemap */
.sitemap{max-width:820px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px)}
.sitemap__group h2{font-family:var(--en-serif);font-style:italic;font-weight:500;font-size:20px;
  color:var(--navy);margin-bottom:1.1em;border-bottom:1px solid var(--line);padding-bottom:.6em}
.sitemap__group ul{display:flex;flex-direction:column;gap:.9em}
.sitemap__group a{font-size:14px;color:var(--sub);position:relative;padding-left:16px}
.sitemap__group a::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--orange)}
.sitemap__group a:hover{color:var(--orange)}

/* article (news / column detail) */
.article-head{position:relative;background:var(--soft);overflow:hidden;
  padding:clamp(132px,17vh,196px) var(--gutter) clamp(44px,6vw,66px)}
.article-head__inner{position:relative;z-index:1;max-width:840px;margin-inline:auto;text-align:center}
.article-head__meta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-bottom:1.3em}
.article-head__date{font-family:var(--en-sans);font-size:13px;letter-spacing:.06em;color:var(--gray)}
.article-head__cat{position:relative;padding-left:14px;font-size:12px;letter-spacing:.14em;color:var(--navy)}
.article-head__cat::before{content:"";position:absolute;left:0;top:.2em;width:2px;height:1em;background:var(--orange)}
.article-head__title{font-family:var(--serif);font-weight:600;font-size:clamp(21px,3.2vw,32px);
  line-height:1.65;letter-spacing:.04em;color:var(--navy)}
.article{max-width:760px;margin-inline:auto}
.article > p:first-child{margin-top:0}
.article .lead-p{font-size:15px;line-height:2.1;color:var(--ink);margin-bottom:1.6em}
.article-note{max-width:760px;margin:2.6em auto 0;padding:18px 22px;background:var(--soft);
  border-left:2px solid var(--orange);font-size:12.5px;line-height:1.95;color:var(--sub)}
.article-back{text-align:center;margin-top:clamp(40px,5vw,60px)}
.backlink{display:inline-flex;align-items:center;gap:12px;font-family:var(--en-sans);
  font-size:12px;letter-spacing:.14em;color:var(--navy)}
.backlink::before{content:"";width:30px;height:1px;background:currentColor;transition:width .35s var(--ease)}
.backlink:hover{color:var(--orange)}
.backlink:hover::before{width:46px}

@media (max-width:767px){
  .article-head__title{font-size:20px}
  .svc{grid-template-columns:1fr;gap:16px}
  .svc__lead{flex-direction:row;align-items:center;gap:16px}
  .plan-grid{grid-template-columns:1fr;gap:28px;max-width:360px}
  .plan--feature{order:-1}
  .qcard-grid{grid-template-columns:1fr;gap:16px}
  .sitemap{grid-template-columns:1fr;gap:30px}
  .profile{grid-template-columns:1fr;gap:28px;max-width:420px}
  .strength-grid{grid-template-columns:1fr;gap:16px;max-width:440px}
}

/* =========================================================
   contact form
   ========================================================= */
.formwrap{max-width:720px;margin:clamp(40px,5vw,64px) auto 0}
.cform{display:flex;flex-direction:column;gap:clamp(22px,3vw,30px)}

/* honeypot — hidden from humans */
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field{display:flex;flex-direction:column;gap:10px}
.field__label{font-size:14px;font-weight:500;color:var(--navy);letter-spacing:.04em;
  display:flex;align-items:center;gap:.7em}
.req,.opt{display:inline-block;font-size:10.5px;letter-spacing:.08em;line-height:1;
  padding:4px 8px;border-radius:3px;font-weight:500}
.req{background:var(--orange);color:#fff}
.opt{background:var(--soft);color:var(--gray);border:1px solid var(--line)}

.field__control{position:relative}
.cform input[type="text"],
.cform input[type="email"],
.cform input[type="tel"],
.cform select,
.cform textarea{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);letter-spacing:.03em;
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:15px 16px;line-height:1.7;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.cform textarea{resize:vertical;min-height:150px}
.cform ::placeholder{color:#b7bcc4}
.cform input:hover,.cform select:hover,.cform textarea:hover{border-color:#c9ccd4}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(7,48,97,.12)}

/* select arrow */
.field__control--select{position:relative}
.field__control--select::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.cform select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:42px;cursor:pointer}
.cform select:invalid{color:#b7bcc4}

/* error state */
.field.is-error input,.field.is-error select,.field.is-error textarea{
  border-color:#d0453b;box-shadow:0 0 0 3px rgba(208,69,59,.1)}
.field__error{font-size:12.5px;color:#c0392b;letter-spacing:.02em;line-height:1.6}

/* consent checkbox */
.field--consent{margin-top:4px}
.consent{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:13.5px;
  line-height:1.9;color:var(--sub)}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent__box{flex:0 0 auto;width:22px;height:22px;margin-top:1px;border:1.5px solid var(--line);
  border-radius:4px;background:#fff;position:relative;transition:border-color .2s var(--ease),background .2s var(--ease)}
.consent input:hover + .consent__box{border-color:#c9ccd4}
.consent input:checked + .consent__box{background:var(--navy);border-color:var(--navy)}
.consent input:checked + .consent__box::after{content:"";position:absolute;left:7px;top:3px;
  width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.consent input:focus-visible + .consent__box{outline:2px solid var(--orange);outline-offset:2px}
.consent__text a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.consent__text a:hover{color:var(--orange)}
.consent__text .req{margin-left:.5em}

/* submit */
.cform__submit{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:6px}
.cform__submit .btn{min-width:280px;justify-content:center}
.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.is-loading span{opacity:.8}
.cform__status{font-size:13.5px;line-height:1.8;text-align:center;letter-spacing:.02em}
.cform__status.is-error{color:#c0392b}
.cform__status.is-loading{color:var(--sub)}
.cform__fallback{margin-top:8px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:2;color:var(--gray);text-align:center}
.cform__fallback a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.cform__fallback a:hover{color:var(--orange)}

/* success panel */
.form-success{max-width:560px;margin:0 auto;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:16px;padding:clamp(30px,4vw,20px) 0}
.form-success[hidden]{display:none}
.form-success__mark{color:var(--orange)}
.form-success__title{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.6vw,26px);
  color:var(--navy);letter-spacing:.04em}
.form-success__text{font-size:14px;line-height:2.1;color:var(--sub)}
.form-success .btn{margin-top:10px}

@media (max-width:767px){
  .cform input[type="text"],.cform input[type="email"],.cform input[type="tel"],
  .cform select,.cform textarea{font-size:16px} /* iOS 拡大防止 */
  .cform__submit .btn{width:100%;min-width:0}
}