/*
Theme Name: Vivid Axium
Theme URI: http://axium.tantoma.com
Author: Cowork
Description: 印刷工房「Vivid Axium」サンプルサイト用のオリジナルテーマ。WordPress向けに制作したオリジナルデザイン。余白を活かしたスイス系ミニマル・エディトリアルデザイン。画像は初期状態でサンプル画像を表示し、カスタマイザーから差し替えできます。
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vivid-axium
*/

:root{
  --ink:#181818;
  --bg:#ffffff;
  --gray:#efeeea;
  --dark:#1b1b1d;
  --muted:#6f6f6c;
  --line:#dcdbd6;
  --maxw:1400px;
  --sans:"Inter",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;font-weight:400;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:.22s}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:34px}
.eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.btn{display:inline-block;padding:12px 26px;border:1px solid var(--ink);color:var(--ink);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;border-radius:40px;background:transparent}
.btn:hover{background:var(--ink);color:#fff}
.btn--light{border-color:#fff;color:#fff}
.btn--light:hover{background:#fff;color:var(--ink)}

/* ヘッダー */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 34px}
.brand{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:1rem}
.brand small{font-weight:400}
.nav-area{display:flex;align-items:center;gap:34px}
.site-nav__list{display:flex;gap:34px}
.site-nav__list a{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.site-nav__list a:hover,.site-nav__list .current-menu-item>a{color:var(--muted)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:.3s}

/* ヒーロー */
.hero{padding:56px 0 0}
.hero__top{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:30px;align-items:start;margin-bottom:46px}
.hero__title{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:500;letter-spacing:-.01em;line-height:1.05}
.hero__meta{font-size:.78rem;color:var(--muted);line-height:1.7}
.hero__meta b{color:var(--ink);font-weight:600;display:block}
.hero__quote{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-align:right;border-bottom:1px solid var(--ink);padding-bottom:2px}
.hero__imgs{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
.hero__imgs img{width:100%;height:clamp(240px,30vw,380px);object-fit:cover}

/* ステートメント */
.statement{padding:120px 0;text-align:center}
.statement p{font-size:clamp(1.4rem,3vw,2.1rem);font-weight:400;line-height:1.4;max-width:20ch;margin:0 auto;letter-spacing:-.01em}

/* セクション共通 */
.section{padding:96px 0}
.section--gray{background:var(--gray)}
.section--dark{background:var(--dark);color:#fff}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-bottom:60px}
.sec-title{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.sec-head__right{color:var(--muted);font-size:.92rem}
.sec-head__right .btn{margin-top:20px}

/* Capabilities グリッド */
.caps{display:grid;grid-template-columns:1fr 1fr;gap:44px 50px}
.cap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.cap__text h3{font-size:1.05rem;font-weight:600;margin-bottom:10px}
.cap__text p{color:var(--muted);font-size:.84rem;line-height:1.6}
.cap__img{aspect-ratio:1/1;overflow:hidden}
.cap__img img{width:100%;height:100%;object-fit:cover}

/* Axiom Advantage */
.adv-head{text-align:center;max-width:680px;margin:0 auto 64px}
.adv-head h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:500;margin-bottom:18px;letter-spacing:-.01em}
.adv-head p{color:var(--muted);font-size:.95rem}
.advantage{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.advantage__img img{width:100%;height:clamp(360px,40vw,540px);object-fit:cover}
.adv-list{display:flex;flex-direction:column}
.adv-item{padding:30px 0;border-top:1px solid var(--line)}
.adv-item:last-child{border-bottom:1px solid var(--line)}
.adv-item__num{font-size:.74rem;color:var(--muted);letter-spacing:.1em;margin-bottom:8px}
.adv-item h3{font-size:1.3rem;font-weight:500;margin-bottom:10px}
.adv-item p{color:var(--muted);font-size:.9rem}

/* Crafted in Color */
.work{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.work__big img{width:100%;height:auto;object-fit:cover}
.work__col{display:flex;flex-direction:column;gap:30px}
.work figcaption{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.work-cta{margin-top:44px}

/* Testimonials (dark) */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.voice__mark{font-size:1.4rem;line-height:1;margin-bottom:22px}
.voice__quote{font-size:1.02rem;line-height:1.5;margin-bottom:26px;min-height:120px}
.voice__name{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.25);padding-top:14px}

/* Start Your Project */
.project{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.project__body h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:500;margin-bottom:24px;letter-spacing:-.01em}
.project__img img{width:100%;height:clamp(280px,32vw,420px);object-fit:cover}

/* マーキー */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:26px 0;white-space:nowrap}
.marquee__inner{display:inline-block;animation:marquee 22s linear infinite;font-size:clamp(2rem,5vw,3.4rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.marquee__inner span{padding:0 .4em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* フッター */
.site-footer{padding:60px 0 30px}
.footer-brand{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:1.2rem;margin-bottom:36px}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;font-size:.82rem;color:var(--muted)}
.footer-cols h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;font-weight:600}
.footer-cols a:hover{color:var(--ink)}
.footer-cols p,.footer-cols li{margin-bottom:5px;line-height:1.6}
.footer-copy{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.74rem;color:var(--muted)}

/* 下層 */
.page-head{padding:80px 0 0}
.page-head h1{font-size:clamp(2rem,5vw,3rem);font-weight:500;letter-spacing:-.01em}
.entry{max-width:820px;margin:30px auto 0;color:var(--muted)}
.entry h2{color:var(--ink);margin:24px 0 10px;font-weight:500}

/* reveal */
.reveal{transition:opacity .7s ease,transform .7s ease}
.reveal.is-hidden{opacity:0;transform:translateY(24px)}

/* レスポンシブ */
@media(max-width:920px){
  .nav-area{position:fixed;inset:0 0 0 auto;width:78%;max-width:300px;background:#fff;flex-direction:column;align-items:flex-start;padding:90px 30px;gap:24px;transform:translateX(100%);transition:.35s;box-shadow:-10px 0 40px rgba(0,0,0,.12);z-index:55}
  .nav-area.is-open{transform:none}
  .site-nav__list{flex-direction:column;gap:20px}
  .nav-toggle{display:flex;z-index:60}
  .hero__top{grid-template-columns:1fr 1fr;gap:20px}
  .hero__title{grid-column:1/-1}
  .hero__quote{text-align:left}
  .caps,.advantage,.work,.project,.sec-head,.voices{grid-template-columns:1fr;gap:28px}
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ .hero__top{grid-template-columns:1fr} .hero__imgs{grid-template-columns:1fr} .cap{grid-template-columns:1fr} .footer-cols{grid-template-columns:1fr} }

/* PHONE-POLISH */
@media(max-width:600px){
  .section{padding:58px 0}
  .wrap{padding-inline:18px}
  .sec-title{font-size:1.5rem;margin-bottom:30px}
  .page-head{padding-left:18px;padding-right:18px}
}