/* ============================================================ 加藤税理士・社労士事務所 — Production Theme CSS katotax_classic / WordPress Classic Theme ============================================================ このファイルをそのまま wp-content/themes/katotax_classic/assets/css/style.css として配置し、functions.php の wp_enqueue_style で読み込んでください。 Font Awesome 6 と Google Fonts はに CDN リンクを追加。仕様書「07 · テーマファイル構成」の functions.php スケルトン参照。 ============================================================ */ /* ============================================================ Contact Form 7 Bridge ============================================================ CF7 が出力するクラス (.wpcf7-form-control 等) とこの CSS の .c-form__* セレクタは一致しないため、 CF7 出力にスタイルを当てるブリッジ。 .c-form クラスを CF7 ショートコードの外側のラッパに付けて使う:

============================================================ */ .c-form .wpcf7-form{display:grid;gap:18px;background:transparent;padding:0;border:0;box-shadow:none} .c-form .wpcf7-form p{margin:0;display:grid;gap:8px} .c-form .wpcf7-form label{font-size:13px;font-weight:600;color:var(--ink-base);display:block} .c-form .wpcf7-form label br{display:none} .c-form .wpcf7-form-control-wrap{display:block} .c-form .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]){ width:100%;padding:14px 16px;border-radius:12px; border:1.5px solid var(--ink-line);background:var(--paper); font-size:14px;font-family:inherit;color:var(--ink-base); outline:none;box-sizing:border-box; transition:border-color .15s, box-shadow .15s; } .c-form .wpcf7-form-control:not([type="submit"]):focus{ border-color:var(--accent);box-shadow:0 0 0 3px rgba(36,85,199,.15); } .c-form .wpcf7-textarea{min-height:140px;resize:vertical} /* Reset for acceptance / checkbox wrappers (these have .wpcf7-form-control class but should NOT be styled like inputs) */ .c-form .wpcf7-acceptance, .c-form .wpcf7-list-item{ background:transparent !important;border:0 !important;padding:0 !important; border-radius:0 !important;box-shadow:none !important; display:inline; } .c-form .wpcf7-list-item{margin:0} .c-form .wpcf7-list-item label{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-muted);line-height:1.7;cursor:pointer} .c-form .wpcf7-list-item input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);margin-top:2px;flex-shrink:0} .c-form .wpcf7-list-item-label{display:inline} .c-form .wpcf7-submit{ display:inline-flex;align-items:center;justify-content:center;gap:10px; width:100%;padding:16px 28px;border-radius:999px; background:var(--accent);color:#fff; font-weight:600;font-size:15px;border:0;cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s; } .c-form .wpcf7-submit:hover{ background:var(--accent-dark);transform:translateY(-1px); box-shadow:0 8px 24px -10px rgba(36,85,199,.6); } .c-form .wpcf7-not-valid{border-color:var(--danger) !important} .c-form .wpcf7-not-valid-tip{color:var(--danger);font-size:12px;margin-top:4px} .c-form .wpcf7-response-output{ margin-top:16px;padding:12px 16px;border-radius:8px; font-size:13px;border:1px solid var(--ink-line); } .c-form .wpcf7-mail-sent-ok{background:rgba(20,133,76,.08);border-color:var(--success);color:var(--success)} .c-form .wpcf7-validation-errors, .c-form .wpcf7-acceptance-missing{background:rgba(201,54,46,.06);border-color:var(--danger);color:var(--danger)} .c-form .wpcf7-spinner{margin-left:12px} /* Override grid for trust row inside CF7 (3 inline checks) */ .c-form .wpcf7-form p.c-form__trust{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 18px;font-size:12px;color:var(--ink-muted);text-align:center;margin-top:8px} .c-form .wpcf7-form p.c-form__trust > span, .c-form .wpcf7-form p.c-form__trust .c-form__trust-icon{display:inline} .c-form .wpcf7-form p.c-form__trust .c-form__trust-icon{color:var(--gold);margin-right:4px;font-weight:700} /* CF7 submit wrapper should not be a grid either */ .c-form .wpcf7-form p.c-form__submit{display:block} .c-form .wpcf7-form p.c-form__consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-muted);line-height:1.7} /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;padding:0; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-feature-settings:"palt" 1; color:var(--ink-base);background:var(--paper); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; line-height:1.85;font-size:16px; } img{max-width:100%;height:auto;display:block} button{font:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit} a{color:inherit;text-decoration:none;transition:color .2s} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,h5,h6,p{margin:0} input,select,textarea{font:inherit;color:inherit} /* ---------- Tokens ---------- */ :root{ /* ink */ --ink-deep:#0E1A33; --ink-dark:#1B2944; --ink-base:#2D3B58; --ink-muted:#6B7794; --ink-soft:#9AA3B8; --ink-line:#E1E5EF; --ink-faint:#EEF0F7; /* paper */ --paper:#FFFFFF; --paper-soft:#F6F7FB; --paper-hero:#ECEDF5; --paper-warm:#FAF7F1; /* accents */ --accent:#2455C7; --accent-dark:#1B3F95; --accent-faint:#E5ECFA; --gold:#C8A765; --gold-soft:#E8D8B4; --gold-ink:#6F5524; --warm:#FCE7C0; --warm-ink:#7A4F12; /* state */ --success:#14854C; --danger:#C9362E; /* radius */ --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px; /* shadow */ --sh-sm:0 1px 2px rgba(14,26,51,.06); --sh-md:0 6px 24px -8px rgba(14,26,51,.18); --sh-lg:0 18px 60px -20px rgba(14,26,51,.25); /* layout */ --container:1200px; --container-narrow:880px; /* container edge alignment helper — used to align inner content with the central container */ --edge:max(56px, calc((100vw - 1200px) / 2 + 56px)); /* breakpoints (for use in JS) */ --bp-tablet:768px; --bp-desktop:1024px; } /* ---------- Typography helpers ---------- */ .t-mincho{font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:600;letter-spacing:.05em} .t-jakarta{font-family:"Plus Jakarta Sans",sans-serif} .t-deep{color:var(--ink-deep)} .t-muted{color:var(--ink-muted)} .t-accent{color:var(--accent)} .t-gold{color:var(--gold)} /* ---------- Layout ---------- */ .container{max-width:var(--container);margin:0 auto;padding:0 56px} .container--narrow{max-width:var(--container-narrow)} .section{padding:120px 0} .section--soft{background:var(--paper-soft)} .section--hero{background:var(--paper-hero)} .section--dark{background:var(--ink-deep);color:#fff} .section__head{text-align:center;max-width:720px;margin:0 auto 64px} .section__head--left{text-align:left;margin-left:0} .section__kicker{display:inline-block;font-size:11px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;color:var(--accent);margin-bottom:16px} .section__title{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--ink-deep);margin-bottom:16px} .section__lede{font-size:16px;color:var(--ink-muted);line-height:1.95;max-width:680px;margin:0 auto} /* ---------- Eyebrow tag ---------- */ .c-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--warm);color:var(--warm-ink);border-radius:var(--r-pill);font-size:12px;font-weight:600;letter-spacing:.04em} .c-eyebrow--blue{background:var(--accent-faint);color:var(--accent-dark)} .c-eyebrow--ghost{background:transparent;border:1px solid var(--ink-line);color:var(--ink-muted)} /* ---------- Buttons ---------- */ .c-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--r-pill);font-weight:600;font-size:14px;transition:transform .15s,box-shadow .15s,background .15s,color .15s;white-space:nowrap;cursor:pointer} .c-btn--primary{background:var(--ink-dark);color:#fff} .c-btn--primary:hover{background:var(--ink-deep);color:#fff} .c-btn--accent{background:var(--accent);color:#fff} .c-btn--accent:hover{background:var(--accent-dark);color:#fff} .c-btn--ghost{background:transparent;color:var(--ink-dark);border:1px solid var(--ink-line)} .c-btn--ghost:hover{border-color:var(--ink-dark)} .c-btn--lg{padding:16px 28px;font-size:15px} .c-btn .fa-arrow-right{transition:transform .2s;font-size:.9em} .c-btn:hover .fa-arrow-right{transform:translateX(3px)} .c-btn--block{display:flex;width:100%;justify-content:center} /* ---------- Gold ornaments ---------- */ .gold-line{display:inline-flex;align-items:center;gap:14px;color:var(--gold);font-family:"Plus Jakarta Sans",sans-serif;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase} .gold-line::before,.gold-line::after{content:"";display:inline-block;width:48px;height:1px;background:currentColor;opacity:.7} .gold-line--start::before{display:none} .gold-line--end::after{display:none} .gold-diamond{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);display:inline-block;margin:0 8px} .gold-separator{display:flex;align-items:center;gap:0;color:var(--gold);margin:0 0 32px} .gold-separator span:first-child,.gold-separator span:last-child{display:inline-block;width:60px;height:1px;background:currentColor} .gold-separator--center{justify-content:center} .gold-corners{position:relative} .gold-corners::before,.gold-corners::after{content:"";position:absolute;width:40px;height:40px;border-style:solid;border-color:var(--gold);border-width:0;pointer-events:none} .gold-corners::before{top:0;left:0;border-top-width:2px;border-left-width:2px} .gold-corners::after{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px} /* ---------- Cards ---------- */ .c-card{background:var(--paper);border:1px solid var(--ink-line);border-radius:var(--r-lg);padding:36px;transition:transform .2s,box-shadow .2s;display:block} .c-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .c-card__icon{width:56px;height:56px;border-radius:14px;background:var(--paper-warm);display:grid;place-items:center;margin-bottom:24px;color:var(--warm-ink);font-size:22px} .c-card__icon--blue{background:var(--accent-faint);color:var(--accent-dark)} .c-card__icon i{line-height:1} .c-card__title{font-size:20px;font-weight:700;color:var(--ink-deep);margin-bottom:12px;line-height:1.5} .c-card__body{font-size:15px;color:var(--ink-muted);line-height:1.95} .c-card__more{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:13px;font-weight:600;margin-top:18px} /* ---------- Tech tile ---------- */ .tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .tech-grid--wide{grid-template-columns:repeat(9,1fr)} .tech-tile{display:flex;align-items:center;justify-content:center;padding:24px 16px;border-radius:14px;background:var(--paper-soft);transition:background .2s,transform .2s;aspect-ratio:5/3} .tech-tile:hover{background:var(--accent-faint);transform:translateY(-2px)} .tech-tile img{max-width:90px;max-height:28px;width:auto;height:auto;display:block;opacity:.85} .tech-tile--dark{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)} .tech-tile--dark img{filter:brightness(0) invert(1);opacity:.75} /* ---------- Site header ---------- */ .site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--ink-line);padding:18px 0} .site-header__inner{max-width:var(--container);margin:0 auto;padding:0 56px;display:flex;align-items:center;justify-content:space-between;gap:24px} .site-header__brand{display:flex;align-items:center;gap:14px} .site-header__brand-mark{width:32px;height:32px;color:var(--accent);flex-shrink:0} .site-header__brand-name{font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:600;font-size:17px;color:var(--ink-deep);letter-spacing:.05em;line-height:1;white-space:nowrap} .site-nav{display:flex;align-items:center;gap:32px} .site-nav__list{display:flex;gap:32px;align-items:center} .site-nav__list a{font-size:14px;font-weight:500;color:var(--ink-base);transition:color .15s} .site-nav__list a:hover,.site-nav__list a.is-current{color:var(--accent)} .site-nav .c-btn--primary{color:#fff} /* ---------- Site footer ---------- */ .site-footer{background:var(--ink-deep);color:#fff;padding:80px 0 40px} .site-footer__inner{max-width:var(--container);margin:0 auto;padding:0 56px} .site-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} .site-footer h4{font-size:13px;letter-spacing:.1em;font-weight:600;margin-bottom:18px;color:rgba(255,255,255,.6);text-transform:uppercase} .site-footer__brand{font-size:17px;font-weight:600;font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;margin-bottom:18px;display:flex;align-items:center;gap:12px;color:#fff} .site-footer__brand-mark{width:28px;height:28px;color:var(--accent);flex-shrink:0} .site-footer ul li{font-size:13.5px;line-height:2;color:rgba(255,255,255,.75)} .site-footer ul li a{color:rgba(255,255,255,.75)} .site-footer ul li a:hover{color:#fff} .site-footer__social{display:flex;gap:10px;margin-top:18px} .site-footer__social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;font-size:14px} .site-footer__social a:hover{background:rgba(255,255,255,.16)} .site-footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:12px;color:rgba(255,255,255,.45);padding-top:32px;border-top:1px solid rgba(255,255,255,.08)} .site-footer__legal{display:flex;gap:24px} .site-footer__legal a{color:rgba(255,255,255,.6)} /* ---------- Page head (with marble/gold texture) ---------- */ .page-head{position:relative;background:var(--paper-hero);padding:96px 56px;text-align:center;overflow:hidden;isolation:isolate} .page-head::before{content:"";position:absolute;inset:0;z-index:-2;background-image:url("../img/brand/texture-marble-gold.jpg");background-size:cover;background-position:center 30%;opacity:.55} .page-head::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.55) 60%,rgba(236,237,245,.85) 100%)} .page-head__title{font-size:48px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px;color:var(--ink-deep);position:relative} .page-head__crumbs{font-size:12px;color:var(--ink-muted);letter-spacing:.1em;position:relative;margin-top:16px} .page-head__crumbs a{color:var(--ink-muted)} /* ---------- Cinematic Hero (front-page) ---------- */ .hero-cinematic{position:relative;overflow:hidden;background:var(--paper-hero);min-height:760px;display:grid;grid-template-columns:1fr 1fr} .hero-cinematic__light{padding:120px 32px 120px var(--edge);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start} .hero-cinematic__circle{position:absolute;left:-370px;top:50%;transform:translateY(-50%);width:calc(50vw + 370px);aspect-ratio:1;border-radius:50%;background:#fff;border:1px solid var(--gold-soft);z-index:0} .hero-cinematic__content{position:relative;z-index:1;width:100%;max-width:520px} .hero-cinematic__kmark{width:72px;height:72px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;margin-bottom:28px;color:var(--ink-deep)} .hero-cinematic__kmark svg{width:32px;height:32px} .hero-cinematic__title{font-size:56px;font-weight:700;line-height:1.25;letter-spacing:-.025em;color:var(--ink-deep);margin:0 0 28px} .hero-cinematic__sub{font-size:22px;font-weight:600;color:var(--accent);margin-bottom:14px;letter-spacing:.02em} .hero-cinematic__lede{font-size:16px;color:var(--ink-muted);line-height:1.95;margin-bottom:40px;max-width:440px} .hero-cinematic__cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .hero-cinematic__dark{position:relative;background:var(--ink-deep);padding:80px var(--edge) 80px 32px;display:flex;align-items:center;justify-content:flex-end} .hero-cinematic__decor{position:absolute;inset:0;overflow:hidden;pointer-events:none} .hero-cinematic__decor svg{position:absolute;inset:0;width:100%;height:100%} .hero-cinematic__dots-gold{position:absolute;top:60px;right:60px;width:80px;height:80px;background-image:radial-gradient(circle,rgba(200,167,101,.5) 1.2px,transparent 1.2px);background-size:12px 12px} .hero-cinematic__dots-white{position:absolute;bottom:100px;right:240px;width:60px;height:60px;background-image:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1px);background-size:10px 10px} .hero-cinematic__stack{position:relative;z-index:1;width:min(380px,100%);display:flex;flex-direction:column;gap:16px} .hero-cinematic__portrait{position:relative;aspect-ratio:4/5;width:100%;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);border:1px solid rgba(200,167,101,.4)} .hero-cinematic__portrait img{width:100%;height:100%;object-fit:cover;display:block} .hero-cinematic__profile{background:#fff;padding:18px 22px;border-radius:14px;box-shadow:0 18px 50px -20px rgba(0,0,0,.4);display:flex;align-items:center;gap:16px;white-space:nowrap;border:1px solid var(--ink-faint)} .hero-cinematic__profile-avatar{width:48px;height:48px;border-radius:50%;background:var(--paper-warm);border:1px solid var(--gold-soft);display:grid;place-items:center;color:var(--gold-ink);font-family:"Plus Jakarta Sans",sans-serif;font-size:13px;font-weight:700;flex-shrink:0} .hero-cinematic__profile-info{flex:1;min-width:0} .hero-cinematic__profile-label{font-size:10px;color:var(--ink-muted);letter-spacing:.14em;font-weight:700;font-family:"Plus Jakarta Sans",sans-serif} .hero-cinematic__profile-name{font-size:15px;font-weight:700;color:var(--ink-deep);margin-top:2px;letter-spacing:.02em} .hero-cinematic__profile-role{font-size:11px;color:var(--accent);font-weight:600;margin-top:1px} .hero-cinematic__profile-div{width:1px;align-self:stretch;background:var(--ink-line)} .hero-cinematic__profile-licenses{text-align:center;flex-shrink:0} .hero-cinematic__profile-licenses-num{font-family:"Plus Jakarta Sans",sans-serif;font-size:24px;font-weight:700;color:var(--ink-deep);line-height:1.1;margin-top:2px} .hero-cinematic__profile-licenses-unit{font-size:11px;color:var(--ink-muted);font-weight:500;margin-left:3px} /* ---------- Service row (alternating image+text) ---------- */ .service-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .service-row--flip{direction:rtl} .service-row__content,.service-row__media{direction:ltr} .service-row__media{position:relative} .service-row__media img{aspect-ratio:5/4;width:100%;border-radius:20px;object-fit:cover} .service-row__num{position:absolute;top:-28px;left:-16px;font-family:"Plus Jakarta Sans",sans-serif;font-size:96px;font-weight:700;color:var(--gold);letter-spacing:-.04em;line-height:1;opacity:.9;text-shadow:0 1px 0 rgba(255,255,255,.5);pointer-events:none} .service-row--flip .service-row__num{left:auto;right:-16px} .service-row__title{font-size:36px;font-weight:700;line-height:1.25;letter-spacing:-.02em;margin:18px 0;color:var(--ink-deep)} .service-row__body{font-size:15px;color:var(--ink-muted);line-height:1.95;margin-bottom:24px} .service-row__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px} .service-row__tags span{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--paper-soft);color:var(--ink-base);border:1px solid var(--ink-line)} /* ---------- CTA Band (with consultation-scene bg) ---------- */ .cta-band{position:relative;padding:120px 0;color:#fff;overflow:hidden;background:var(--ink-deep)} .cta-band__bg{position:absolute;inset:0;background-image:url("../img/people/consultation-scene.jpg");background-size:cover;background-position:center;opacity:.35} .cta-band__overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(14,26,51,.92) 0%,rgba(14,26,51,.55) 55%,rgba(14,26,51,.7) 100%)} .cta-band__inner{position:relative;max-width:var(--container);margin:0 auto;padding:0 56px;display:grid;grid-template-columns:1.2fr 1fr;column-gap:56px;row-gap:36px;align-items:start} .cta-band__text{grid-column:1;grid-row:1} .cta-band__action{grid-column:1;grid-row:2;display:flex;gap:14px;flex-wrap:wrap;align-items:center} .cta-band__why{grid-column:2;grid-row:1 / span 2;align-self:center;background:rgba(255,255,255,.06);border:1px solid rgba(200,167,101,.3);backdrop-filter:blur(6px);border-radius:18px;padding:32px} .cta-band__corner{position:absolute;width:64px;height:64px;border-style:solid;border-color:var(--gold);border-width:0} .cta-band__corner--tl{top:48px;left:var(--edge);border-top-width:1.5px;border-left-width:1.5px} .cta-band__corner--br{bottom:48px;right:var(--edge);border-bottom-width:1.5px;border-right-width:1.5px} .cta-band__title{font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:16px 0 20px} .cta-band__title-accent{color:var(--gold)} .cta-band__lede{font-size:16px;color:rgba(255,255,255,.78);line-height:1.95;margin-bottom:36px;max-width:520px} .cta-band__tel-block{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.85)} .cta-band__tel-icon{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold)} .cta-band__tel-label{font-size:10px;color:rgba(255,255,255,.55);letter-spacing:.14em;font-weight:600;font-family:"Plus Jakarta Sans",sans-serif} .cta-band__tel-num{font-family:"Plus Jakarta Sans",sans-serif;font-size:18px;font-weight:700;color:#fff;letter-spacing:.02em} .cta-band__why{background:rgba(255,255,255,.06);border:1px solid rgba(200,167,101,.3);backdrop-filter:blur(6px);border-radius:18px;padding:32px} .cta-band__why-label{font-size:11px;color:var(--gold);letter-spacing:.18em;font-weight:700;margin-bottom:18px;font-family:"Plus Jakarta Sans",sans-serif} .cta-band__why-list{display:grid;gap:14px} .cta-band__why-list li{display:flex;gap:12px;font-size:14px;color:rgba(255,255,255,.9);line-height:1.7} .cta-band__why-list li i{color:var(--gold);margin-top:3px;flex-shrink:0} /* ---------- Pricing cards ---------- */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .pricing-card{background:var(--paper);color:var(--ink-base);border:1px solid var(--ink-line);border-radius:20px;padding:32px;position:relative} .pricing-card--featured{background:var(--ink-deep);color:#fff;border:0;box-shadow:var(--sh-md)} .pricing-card__badge{position:absolute;top:-12px;left:32px;padding:6px 14px;background:var(--accent);color:#fff;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.05em;font-family:"Plus Jakarta Sans",sans-serif} .pricing-card__name{font-size:13px;font-weight:600;color:var(--ink-muted)} .pricing-card--featured .pricing-card__name{color:rgba(255,255,255,.7)} .pricing-card__price{display:flex;align-items:baseline;gap:6px;margin:12px 0 14px} .pricing-card__price-mark{font-size:18px;font-weight:700} .pricing-card__price-num{font-family:"Plus Jakarta Sans",sans-serif;font-size:48px;font-weight:700;line-height:1;letter-spacing:-.02em} .pricing-card__price-suffix{font-size:14px;opacity:.7} .pricing-card__desc{font-size:13px;color:var(--ink-muted);margin-bottom:20px;line-height:1.8} .pricing-card--featured .pricing-card__desc{color:rgba(255,255,255,.7)} .pricing-card__items{display:grid;gap:10px;margin-bottom:24px} .pricing-card__items li{display:flex;gap:10px;font-size:13.5px;line-height:1.6} .pricing-card__items li i{color:var(--accent);margin-top:4px} .pricing-card--featured .pricing-card__items li i{color:var(--accent-faint)} /* ---------- News card (blog list) ---------- */ .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .news-card{background:var(--paper);border:1px solid var(--ink-line);border-radius:20px;overflow:hidden;transition:transform .2s,box-shadow .2s} .news-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .news-card__thumb{aspect-ratio:5/3;background:var(--paper-soft)} .news-card__thumb img{width:100%;height:100%;object-fit:cover} .news-card__body{padding:24px} .news-card__meta{display:flex;gap:10px;align-items:center;margin-bottom:12px} .news-card__date{font-size:12px;color:var(--ink-muted);font-family:"Plus Jakarta Sans",sans-serif} .news-card__title{font-size:15px;font-weight:700;line-height:1.55;color:var(--ink-deep)} /* ---------- Timeline ---------- */ .timeline{position:relative;padding-left:28px} .timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--ink-line)} .timeline__item{position:relative;margin-bottom:18px} .timeline__item::before{content:"";position:absolute;left:-25px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--paper)} .timeline__item--past::before{background:var(--ink-line)} .timeline__item-title{font-size:15px;font-weight:500;color:var(--ink-deep);line-height:1.6} /* ---------- Forms ---------- */ .c-form{display:grid;gap:18px;background:#fff;padding:40px 44px;border-radius:20px;border:1px solid var(--ink-line);box-shadow:var(--sh-md)} .c-form__row--cols{display:grid;grid-template-columns:1fr 1fr;gap:18px} .c-form__field{display:grid;gap:8px} .c-form__label{font-size:13px;font-weight:600;color:var(--ink-base)} .c-form__req{color:var(--danger)} .c-form__input,.c-form__textarea,.c-form__select{padding:14px 16px;border-radius:12px;border:1.5px solid var(--ink-line);background:var(--paper);font-size:14px;font-family:inherit;width:100%;color:var(--ink-base);outline:none;transition:border-color .15s,box-shadow .15s} .c-form__input:focus,.c-form__textarea:focus,.c-form__select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(36,85,199,.15)} .c-form__textarea{resize:vertical;min-height:120px} .c-form__consent{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-muted);margin-top:4px} .c-form__consent input{width:16px;height:16px;accent-color:var(--accent)} .wpcf7-not-valid-tip{color:var(--danger);font-size:12px;margin-top:4px} .wpcf7-response-output{margin-top:16px;padding:12px 16px;border-radius:8px;font-size:13px} /* contact office info strip */ .office-strip{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:32px 8px;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);text-align:center} .office-strip__cell{padding:0 8px} .office-strip__cell--mid{border-left:1px solid var(--ink-line);border-right:1px solid var(--ink-line)} .office-strip__label{font-size:10px;color:var(--gold);letter-spacing:.18em;font-weight:700;font-family:"Plus Jakarta Sans",sans-serif;margin-bottom:6px} .office-strip__value{font-size:13px;color:var(--ink-base);line-height:1.7} .office-strip__tel{font-size:18px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:var(--ink-deep);letter-spacing:.02em} /* ---------- Tabs ---------- */ .c-tabs{display:flex;gap:6px;padding:6px;background:var(--paper-soft);border-radius:14px;width:fit-content} .c-tabs button{padding:12px 24px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-muted);font-family:"Plus Jakarta Sans",sans-serif;letter-spacing:.02em;transition:background .2s,color .2s} .c-tabs button.is-active{background:var(--ink-dark);color:#fff} .c-tabs__panel{margin-top:20px;font-size:15px;color:var(--ink-base);line-height:1.85;max-width:640px} /* ---------- Accordion ---------- */ .c-accordion{background:var(--paper);border:1px solid var(--ink-line);border-radius:14px;overflow:hidden} .c-accordion__item{border-top:1px solid var(--ink-line);transition:background .25s} .c-accordion__item:first-child{border-top:0} .c-accordion__item[aria-expanded="true"]{background:var(--paper-soft)} .c-accordion__head{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;padding:22px 26px;text-align:left;font-size:15px;font-weight:600;color:var(--ink-deep);cursor:pointer;transition:padding .25s} .c-accordion__item[aria-expanded="true"] .c-accordion__head{padding-bottom:14px} .c-accordion__num{font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink-muted);margin-right:12px;transition:color .25s} .c-accordion__item[aria-expanded="true"] .c-accordion__num{color:var(--gold)} .c-accordion__chev{transition:transform .4s cubic-bezier(.4,0,.2,1),color .25s;color:var(--ink-muted);flex-shrink:0} .c-accordion__item[aria-expanded="true"] .c-accordion__chev{transform:rotate(180deg);color:var(--accent)} .c-accordion__body{ max-height:0;opacity:0;overflow:hidden; padding:0 26px; font-size:14px;color:var(--ink-muted);line-height:1.95; transition:max-height .5s cubic-bezier(.4,0,.2,1), opacity .35s ease, padding .4s ease; } .c-accordion__item[aria-expanded="true"] .c-accordion__body{ max-height:800px;opacity:1;padding:0 26px 22px; } /* slide-in for body content */ .c-accordion__body > *{transform:translateY(-6px);transition:transform .45s cubic-bezier(.4,0,.2,1) .1s} .c-accordion__item[aria-expanded="true"] .c-accordion__body > *{transform:translateY(0)} /* FAQ variant with Q badge (contact page) */ .c-faq-list{display:grid;gap:14px} .c-faq-item{background:var(--paper);border:1px solid var(--ink-line);border-radius:16px;overflow:hidden;transition:border-color .25s, box-shadow .25s} .c-faq-item[aria-expanded="true"]{border-color:var(--gold-soft);box-shadow:0 12px 36px -16px rgba(200,167,101,.35)} .c-faq-item__head{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:22px 26px;text-align:left;font-size:15px;font-weight:700;color:var(--ink-deep);cursor:pointer} .c-faq-item__q-wrap{display:flex;gap:14px;align-items:center;flex:1} .c-faq-item__q-badge{width:30px;height:30px;border-radius:50%;background:var(--paper-warm);border:1px solid var(--gold-soft);display:grid;place-items:center;color:var(--gold-ink);font-family:"Plus Jakarta Sans",sans-serif;font-size:13px;font-weight:700;flex-shrink:0;transition:background .25s,border-color .25s,color .25s,transform .4s cubic-bezier(.4,0,.2,1)} .c-faq-item[aria-expanded="true"] .c-faq-item__q-badge{background:var(--gold);border-color:var(--gold);color:#fff;transform:rotate(-10deg) scale(1.08)} .c-faq-item__chev{color:var(--ink-muted);transition:transform .4s cubic-bezier(.4,0,.2,1),color .25s;flex-shrink:0} .c-faq-item[aria-expanded="true"] .c-faq-item__chev{transform:rotate(180deg);color:var(--accent)} .c-faq-item__body{ max-height:0;opacity:0;overflow:hidden; padding:0 26px 0 70px; font-size:14px;color:var(--ink-muted);line-height:1.95; transition:max-height .55s cubic-bezier(.4,0,.2,1), opacity .35s ease, padding .4s ease; } .c-faq-item[aria-expanded="true"] .c-faq-item__body{ max-height:600px;opacity:1;padding:0 26px 24px 70px; } .c-faq-item__body > *{transform:translateY(-8px);transition:transform .5s cubic-bezier(.4,0,.2,1) .12s} .c-faq-item[aria-expanded="true"] .c-faq-item__body > *{transform:translateY(0)} /* ---------- Tables ---------- */ .c-table{width:100%;border-collapse:collapse;font-size:14px} .c-table th{padding:16px 20px;background:var(--ink-faint);font-size:12px;letter-spacing:.08em;color:var(--ink-muted);text-transform:uppercase;text-align:left;font-weight:600} .c-table th.is-right{text-align:right;color:var(--ink-deep);font-weight:700} .c-table td{padding:14px 20px;border-top:1px solid var(--ink-line);vertical-align:top} .c-table td.is-name{font-weight:600;color:var(--ink-deep)} .c-table td.is-num{text-align:right;font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink-base)} .c-table--zebra tbody tr:nth-child(even){background:var(--paper-soft)} .c-table-wrap{background:var(--paper);border:1px solid var(--ink-line);border-radius:20px;overflow:hidden} /* ---------- Contact page hero ---------- */ .contact-hero{position:relative;padding:120px 0;overflow:hidden;background:var(--ink-deep);color:#fff;text-align:center} .contact-hero__bg{position:absolute;inset:0;background-image:url("../img/brand/texture-marble-gold.jpg");background-size:cover;background-position:center;opacity:.22;filter:saturate(.6)} .contact-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,51,.7) 0%,rgba(14,26,51,.92) 100%)} .contact-hero__corner{position:absolute;width:72px;height:72px;border-style:solid;border-color:var(--gold);border-width:0;pointer-events:none} .contact-hero__corner--tl{top:56px;left:var(--edge);border-top-width:1.5px;border-left-width:1.5px} .contact-hero__corner--br{bottom:56px;right:var(--edge);border-bottom-width:1.5px;border-right-width:1.5px} .contact-hero__inner{position:relative;max-width:760px;margin:0 auto;padding:0 56px} /* ---------- Pricing options layout (responsive 2-col) ---------- */ .pricing-options-layout{ max-width:1100px;margin:0 auto; display:grid;grid-template-columns:1.2fr 1fr;gap:48px; } .pricing-options-layout__sidebar{position:sticky;top:40px;align-self:start;display:grid;gap:24px} .pricing-options-row{ display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:16px 0;border-bottom:1px solid var(--ink-line); font-size:14px;color:var(--ink-base); } .pricing-options-row__label{flex:1;min-width:0} .pricing-options-row__price{font-family:"Plus Jakarta Sans",sans-serif;color:var(--ink-deep);font-weight:700;white-space:nowrap;flex-shrink:0} /* ---------- Service detail blocks ---------- */ .svc-detail{padding:96px 56px} .svc-detail--soft{background:var(--paper-soft)} .svc-detail__inner{max-width:1000px;margin:0 auto} .svc-detail__header{text-align:center;margin-bottom:56px} .svc-detail__chip{display:inline-block;padding:8px 24px;background:var(--ink-deep);color:#fff;border-radius:999px;font-size:12px;letter-spacing:.1em;font-weight:600;font-family:"Plus Jakarta Sans",sans-serif} .svc-detail__title{font-size:36px;font-weight:700;letter-spacing:-.02em;margin-top:16px;color:var(--ink-deep)} .svc-detail__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:24px} .svc-detail__pain,.svc-detail__support,.svc-detail__reasons{border-radius:20px;padding:32px} .svc-detail__pain{background:var(--paper-warm)} .svc-detail__support,.svc-detail__reasons{background:#fff;border:1px solid var(--ink-line)} .svc-detail__label{font-size:12px;font-weight:700;letter-spacing:.1em;margin-bottom:16px} .svc-detail__pain .svc-detail__label{color:var(--warm-ink)} .svc-detail__support .svc-detail__label{color:var(--accent)} .svc-detail__reasons .svc-detail__label{color:var(--ink-muted);margin-bottom:18px} .svc-detail__list{display:grid;gap:12px} .svc-detail__list li{display:flex;gap:10px;font-size:14px;color:var(--ink-base);line-height:1.7} .svc-detail__list i{flex:0 0 auto;margin-top:4px} .svc-detail__pain .svc-detail__list i{color:var(--warm-ink)} .svc-detail__reasons-list{display:grid;gap:12px;counter-reset:list} .svc-detail__reasons-list li{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--ink-deep);line-height:1.7} .svc-detail__num{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--ink-deep);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;font-family:"Plus Jakarta Sans",sans-serif} /* ---------- Campaign banner ---------- */ .campaign{background:linear-gradient(135deg,var(--ink-deep) 0%,var(--accent-dark) 100%);color:#fff;border-radius:24px;padding:48px 56px;display:flex;justify-content:space-between;align-items:center;gap:32px;position:relative;overflow:hidden} .campaign__title{font-size:32px;font-weight:700;line-height:1.3;margin:16px 0 8px} .campaign__num{font-family:"Plus Jakarta Sans",sans-serif;font-size:48px;font-weight:700;color:var(--warm)} /* ---------- Single post ---------- */ .single-header{padding:72px 56px 40px;background:var(--paper-soft)} .single-header__title{font-size:40px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--ink-deep);margin-bottom:16px} .single-author{display:flex;align-items:center;gap:12px} .single-author__avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-faint);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--accent-dark)} .single-content{padding:64px 56px} .single-content__inner{max-width:720px;margin:0 auto;font-size:16px;color:var(--ink-base);line-height:2} .single-content__inner h2{font-size:24px;font-weight:700;color:var(--ink-deep);margin-top:32px;margin-bottom:16px} .single-content__inner p{margin-bottom:16px} .single-point{padding:24px;background:var(--paper-warm);border-radius:16px;border-left:3px solid var(--warm-ink);margin-bottom:16px} /* ---------- Legal pages (privacy / terms) ---------- */ .legal{padding:72px 56px} .legal__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start} .legal__toc{position:sticky;top:40px} .legal__toc-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink-muted);text-transform:uppercase;margin-bottom:14px} .legal__toc ul{display:grid;gap:6px} .legal__toc a{display:block;padding:10px 12px;border-radius:8px;font-size:13px;color:var(--ink-muted);font-weight:500} .legal__toc a.is-active{color:var(--ink-deep);background:var(--paper-soft);font-weight:600} .legal__article{max-width:720px} .legal__section{padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid var(--ink-line)} .legal__section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .legal__section h2{font-size:24px;font-weight:700;color:var(--ink-deep);margin-bottom:16px;letter-spacing:-.01em} .legal__section p{font-size:15px;color:var(--ink-base);line-height:2;margin-bottom:12px} /* ---------- 404 ---------- */ .not-found{padding:160px 56px;text-align:center;background:var(--paper-hero)} .not-found__big{font-family:"Plus Jakarta Sans",sans-serif;font-size:160px;font-weight:700;line-height:1;color:var(--ink-deep);letter-spacing:-.04em} .not-found__title{font-size:32px;font-weight:700;margin-top:16px;color:var(--ink-deep)} .not-found__lede{font-size:15px;color:var(--ink-muted);margin-top:12px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.85} /* ---------- Utility ---------- */ .text-center{text-align:center} .mt-8{margin-top:64px} .mb-8{margin-bottom:64px} /* ============================================================ RESPONSIVE — Mobile First ============================================================ */ /* Tablet (≥768px) はベーススタイルがそのまま */ /* Mobile (<768px) */ @media (max-width:767px){ body{font-size:15px} .container{padding:0 20px} .section{padding:56px 0} .section__title{font-size:26px} .section__lede{font-size:14px} .section__head{margin-bottom:32px} /* Header */ .site-header{z-index:120;position:sticky} .site-header__inner{padding:0 20px;position:relative} .site-header__brand-name{font-size:14px} .site-nav{margin-left:auto;gap:0} .site-nav__list{display:none} .site-nav .c-btn--primary{display:none} .site-header__toggle{ display:inline-flex !important; position:absolute !important; right:12px;top:50%;transform:translateY(-50%); margin:0 !important;z-index:130; width:44px;height:44px; flex-direction:column;align-items:flex-end;justify-content:center;gap:5px; border-radius:8px;background:transparent;border:0;cursor:pointer;padding:0 6px 0 0; } .site-header__toggle::after{ content:"\f00d";font-family:"Font Awesome 6 Free";font-weight:900; font-size:24px;color:var(--ink-deep); position:absolute;inset:0;display:none;align-items:center;justify-content:center; } .site-header__toggle[aria-expanded="true"]::after{display:flex} .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar{display:none !important} .site-header__toggle-bar{ display:block !important; width:24px;height:2px;background:var(--ink-deep);border-radius:2px; transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s,background .2s; } body.is-nav-open .site-header__toggle-bar{background:var(--ink-deep)} .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-of-type(1){transform:translateY(7px) rotate(45deg)} .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-of-type(2){opacity:0} .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-of-type(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile drawer is anchored below the header via top: var(--header-h) (set in animations-loader.css). JS keeps --header-h in sync with the actual header offsetHeight, so the drawer can NEVER overlap the header. Repeated here as a safety net in case animations-loader.css's older `inset:0; padding:80px ...` definition is still active. */ .site-nav__mobile{ inset:auto !important; top:var(--header-h, 80px) !important; right:0 !important;bottom:0 !important;left:0 !important; padding:40px 32px 32px !important; } /* Lock body scroll while drawer is open so the underlying page can't trigger header hide/show during interaction */ body.is-nav-open{overflow:hidden;touch-action:none} /* Hero */ .hero-cinematic{grid-template-columns:1fr;min-height:auto} .hero-cinematic__light{padding:48px 20px 56px} .hero-cinematic__circle{width:600px;height:600px;left:-206px} .hero-cinematic__title{font-size:32px} .hero-cinematic__sub{font-size:18px} .hero-cinematic__dark{padding:48px 20px 80px} .hero-cinematic__cta .c-btn--ghost{display:none} /* Cloud accounting / large section h2 — fluid scale to fit 2 lines */ .cloud-split h2, .cloud-split [id="cloud-title"]{font-size:clamp(26px, 8vw, 36px) !important;line-height:1.3 !important} /* Page head */ .page-head{padding:56px 20px} .page-head__title{font-size:32px} /* Cards */ .c-card{padding:24px} .tech-grid,.tech-grid--wide{grid-template-columns:repeat(3,1fr);gap:10px} .tech-tile{padding:18px 10px;aspect-ratio:1/1} .tech-tile img{max-width:70px;max-height:22px} .pricing-grid{grid-template-columns:1fr} .pricing-card--featured{order:-1} .news-grid{grid-template-columns:1fr} /* Service row → stack image then text */ .service-row{grid-template-columns:1fr;gap:24px;direction:ltr !important;padding-top:56px;margin-top:8px;border-top:1px solid var(--ink-line);position:relative} .service-row:first-child{padding-top:24px;border-top:0;margin-top:0} .service-row__num{font-size:48px;top:18px;left:0;right:auto !important;background:var(--paper);padding:0 10px 0 0;line-height:1} /* CTA Band */ .cta-band{padding:64px 20px} .cta-band__inner{grid-template-columns:1fr;gap:24px;padding:0} .cta-band__text{grid-column:auto;grid-row:auto;order:1} .cta-band__why{grid-column:auto;grid-row:auto;order:2;padding:24px} .cta-band__action{grid-column:auto;grid-row:auto;order:3;flex-direction:column;align-items:stretch;gap:18px;margin-top:8px} .cta-band__action .c-btn{width:100%;justify-content:center} .cta-band__title{font-size:28px} .cta-band__corner{display:none} /* Contact */ .c-form{padding:24px} .c-form__row--cols{grid-template-columns:1fr} .office-strip{grid-template-columns:1fr;gap:24px} .office-strip__cell--mid{border-left:0;border-right:0;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);padding:24px 0} /* Footer */ .site-footer{padding:48px 0 32px} .site-footer__inner{padding:0 20px} .site-footer__cols{grid-template-columns:1fr;gap:32px} .site-footer__bottom{flex-direction:column;text-align:left;align-items:flex-start} /* Service grid */ .services-grid{grid-template-columns:1fr !important} /* Service detail */ .svc-detail{padding:56px 20px} .svc-detail__title{font-size:26px} .svc-detail__cols{grid-template-columns:1fr;gap:16px} .svc-detail__pain,.svc-detail__support,.svc-detail__reasons{padding:20px} /* Single */ .single-header{padding:56px 20px 32px} .single-header__title{font-size:26px} .single-content{padding:48px 20px} /* Legal */ .legal{padding:48px 20px} .legal__inner{grid-template-columns:1fr;gap:32px} .legal__toc{position:static} /* Timeline */ .timeline__item-title{font-size:14px} /* Image-right split layouts: on PC the image sits in column 2 via inline grid-column: 2; on mobile we collapse to a single column AND reset all grid-column/row overrides so DOM order wins — DOM order is always image-first, so mobile shows: 画像 → コンテンツ consistently across pages. */ .rwd-img-right{ grid-template-columns:1fr !important; gap:32px !important; } .rwd-img-right > *{ grid-column:1 !important; grid-row:auto !important; position:static !important; } /* Tables overflow scroll */ .c-table-wrap{ overflow-x:auto;position:relative; background:linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), var(--paper) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(14,26,51,.15), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(14,26,51,.15), rgba(0,0,0,0)) 100% 0; background-repeat:no-repeat;background-color:var(--paper); background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment:local, local, scroll, scroll; -webkit-overflow-scrolling:touch; } .c-table-wrap::before{ content:"\f0a4 スワイプ"; font-family:"Font Awesome 6 Free","Noto Sans JP",sans-serif;font-weight:900; position:absolute;top:12px;right:10px;z-index:2; /* 下の文字がうっすら見えるよう半透明 + ぼかし */ background:rgba(14,26,51,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:rgba(255,255,255,.95); padding:4px 12px;border-radius:999px; font-size:10px;letter-spacing:.06em; pointer-events:none; /* 初期は非表示。ビューポートに入ったら .is-hint-active で表示 + アニメ開始 */ opacity:0;visibility:hidden; box-shadow:0 4px 12px -4px rgba(14,26,51,.32); transition:opacity .25s ease, visibility .25s ease; } .c-table-wrap.is-hint-active::before{ opacity:.85;visibility:visible; animation:tbl-hint 1.6s ease-in-out 3 forwards; } /* スワイプ中 or 自動消滅後は完全に非表示（クリックも透過） */ .c-table-wrap.is-scrolled::before, .c-table-wrap.is-hint-dismissed::before{ opacity:0;visibility:hidden; } .c-table{min-width:680px;font-size:12.5px} .c-table th,.c-table td{padding:10px 12px} .c-table th{font-size:10.5px;letter-spacing:.04em;line-height:1.5} /* Profile card in hero shrinks */ .hero-cinematic__profile{padding:14px 16px;gap:12px} .hero-cinematic__profile-name{font-size:13px} /* Campaign */ .campaign{flex-direction:column;text-align:center;padding:36px 24px;gap:18px} .campaign__title{font-size:16px;line-height:1.8;font-weight:600;margin:8px 0 4px} .campaign__num{font-size:36px;display:inline-block;margin:0 4px;vertical-align:baseline;line-height:1} /* Pricing options layout — stack to 1 column on mobile */ .pricing-options-layout{grid-template-columns:1fr;gap:32px} .pricing-options-layout__sidebar{position:static} .pricing-options-row{font-size:13px;padding:12px 0;gap:12px} /* Cost simulator result panel — mobile compact layout */ .cost-sim__result{ flex-direction:column;align-items:stretch !important; padding:24px 22px !important;gap:18px !important;text-align:left; } .cost-sim__result .cost-sim__label{font-size:10px !important;letter-spacing:.14em !important;line-height:1.5} .cost-sim__result .cost-sim__num{font-size:42px !important;line-height:1 !important} .cost-sim__result .cost-sim__breakdown{font-size:12px !important;line-height:1.7 !important;padding:12px 14px;background:rgba(255,255,255,.05);border-radius:10px;border-left:2px solid var(--gold)} .cost-sim__result .c-btn{width:100%;justify-content:center;padding:14px 20px} /* 404 */ .not-found{padding:80px 20px} .not-found__big{font-size:96px} } /* Tablet (768-1023px) */ @media (min-width:768px) and (max-width:1023px){ .container{padding:0 32px} .section{padding:88px 0} .section__title{font-size:32px} .site-header__inner{padding:0 32px;position:relative} .site-nav__list{gap:20px;flex-wrap:nowrap;white-space:nowrap} .site-nav .c-btn--primary{display:none} .site-header__toggle{position:absolute !important;right:20px;top:50%;transform:translateY(-50%);margin:0 !important} .hero-cinematic{min-height:600px} .hero-cinematic__light{padding:64px 32px} .hero-cinematic__title{font-size:42px} .hero-cinematic__dark{padding:48px 32px} .page-head{padding:72px 32px} .page-head__title{font-size:38px} .tech-grid--wide{grid-template-columns:repeat(3,1fr)} /* Pricing — stack to single column on tablet for breathing room */ .pricing-grid{grid-template-columns:1fr;gap:24px;max-width:520px;margin:0 auto} .pricing-card--featured{order:-1} .cta-band{padding:88px 0} .cta-band__inner{gap:32px;padding:0 32px} .cta-band__title{font-size:36px} .c-form{padding:32px} .site-footer{padding:64px 0 32px} .site-footer__inner{padding:0 32px} .site-footer__cols{grid-template-columns:1fr 1fr;gap:32px} } /* ============================================================ Accessibility & Motion ============================================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } :focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media print{ .site-header,.site-footer,.cta-band__bg{display:none} } @keyframes tbl-hint{ /* 揺れアニメのみ。消滅は JS が .is-hint-dismissed を付与して制御 */ 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }