@charset "utf-8";
/*
Theme Name:YasuyoshiOshima
Theme URI:https://yasuyoshioshima.com/
Description: 大島康義公式サイト 親テーマ — yasuyoshioshima.com
Version:1.0
Author:SPEC, Inc.
Author URI:https://yasuyoshioshima.com/
*/

/* ==========================================================================
   1. CSS VARIABLES - COMPLETE STANDARDIZATION
   ========================================================================== */
:root{
    /* === Brand Colors === */
    --clr-cream:        #f8f3ec;
    --clr-cream-dark:   #f0e9dc;
    --clr-cream-border: #e2d8c8;
    --clr-navy:         #1a2a4a;
    --clr-navy-mid:     #2d3f63;
    --clr-navy-light:   #3d5278;
    --clr-gold:         #9a7130;
    --clr-gold-mid:     #c09050;
    --clr-gold-light:   #d4a96a;
    --clr-brown:        #7a4e28;
    --clr-brown-light:  #a0693a;
    --clr-white:        #ffffff;
    --clr-black:        #0d1520;
    --clr-text-main:    #1e2d40;
    --clr-text-sub:     #4a5a70;
    --clr-text-muted:   #5c6b7d;
    --clr-border:       #ddd4c4;

    /* === Gradients === */
    --grad-navy:   linear-gradient(135deg, #1a2a4a 0%, #2d3f63 100%);
    --grad-gold:   linear-gradient(135deg, #9a7130 0%, #c09050 100%);
    --grad-brown:  linear-gradient(135deg, #7a4e28 0%, #a0693a 100%);
    --grad-cream:  linear-gradient(180deg, #f8f3ec 0%, #f0e9dc 100%);
    --grad-hero:   linear-gradient(135deg, #f0e9dc 0%, #f8f3ec 60%, #ede3d4 100%);

    /* === Typography === */
    --font-serif:  'Noto Serif JP', 'YuMincho', 'Yu Mincho', '游明朝', serif;
    --font-sans:   'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    --font-en:     'Cormorant Garamond', 'EB Garamond', Georgia, serif;

    /* === Font Sizes === */
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  1.875rem;
    --fs-3xl:  2.25rem;
    --fs-4xl:  3rem;
    --fs-5xl:  3.75rem;

    /* === Line Heights === */
    --lh-tight:  1.25;
    --lh-snug:   1.4;
    --lh-base:   1.7;
    --lh-loose:  1.9;
    --lh-xloose: 2.1;

    /* === Spacing === */
    --sp-1:   0.25rem;
    --sp-2:   0.5rem;
    --sp-3:   0.75rem;
    --sp-4:   1rem;
    --sp-5:   1.25rem;
    --sp-6:   1.5rem;
    --sp-8:   2rem;
    --sp-10:  2.5rem;
    --sp-12:  3rem;
    --sp-16:  4rem;
    --sp-20:  5rem;
    --sp-24:  6rem;
    --sp-32:  8rem;
    --sp-m:   1rem;
    --sp-container: 1.25rem;

    /* === Container === */
    --cnt-max:       1200px;
    --cnt-max-ultra: 1600px;
    --w-full:        100%;

    /* === Grid Widths (12col) === */
    --wg-1:  8.3333%;
    --wg-2:  16.6667%;
    --wg-3:  25%;
    --wg-4:  33.3333%;
    --wg-5:  41.6667%;
    --wg-6:  50%;
    --wg-7:  58.3333%;
    --wg-8:  66.6667%;
    --wg-9:  75%;
    --wg-10: 83.3333%;
    --wg-11: 91.6667%;
    --wg-12: 100%;

    /* === Border Radius === */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 9999px;

    /* === Shadows === */
    --shadow-sm:  0 1px 3px rgba(26,42,74,.06), 0 1px 2px rgba(26,42,74,.04);
    --shadow-md:  0 4px 16px rgba(26,42,74,.10), 0 2px 6px rgba(26,42,74,.06);
    --shadow-lg:  0 12px 40px rgba(26,42,74,.14), 0 4px 12px rgba(26,42,74,.08);
    --shadow-xl:  0 24px 60px rgba(26,42,74,.18), 0 8px 20px rgba(26,42,74,.10);
    --shadow-gold: 0 4px 20px rgba(154,113,48,.25);

    /* === Transitions === */
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:   150ms;
    --dur-base:   250ms;
    --dur-slow:   400ms;

    /* === Layout sizing（複数箇所で共有する寸法） === */
    --header-h:        72px;
    --header-h-mobile: 60px;
    --size-icon-box:   44px;
    --ar-card:         16 / 9;

    /* === Typography（複数箇所で共有するサイズ） === */
    --fs-page-title: clamp(1.75rem, 3vw, 2.5rem);

    /* === ネイビー背景上のテキスト（不透明度スケール） === */
    --on-navy-strong: rgba(240,233,220,.8);
    --on-navy:         rgba(240,233,220,.75);
    --on-navy-muted:   rgba(240,233,220,.65);
    --on-navy-soft:    rgba(240,233,220,.55);
    --on-navy-faint:   rgba(240,233,220,.5);
    --on-navy-subtle:  rgba(240,233,220,.45);
    --on-navy-border:  rgba(240,233,220,.12);
    --on-navy-ghost:   rgba(240,233,220,.08);

    /* === ゴールドの薄い重ね色 === */
    --clr-gold-wash:        rgba(154,113,48,.07);
    --clr-gold-wash-strong: rgba(154,113,48,.1);
}


/* ==========================================================================
   2. RESET & LAYOUT SYSTEM
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    font-size: 112.5%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
blockquote,
figure {
    margin: 0;
    padding: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}
ol,ul{list-style:none}
img,amp-img{max-width:var(--w-full)!important;height:auto!important}
.home-banner img{width:var(--w-full);margin-bottom:var(--sp-m)}
table{border-collapse:collapse}
textarea{white-space:revert}

/* ==========================================================================
** DO NOT CHANGE THIS AREA ** FROM HERE
========================================================================== */
/* --- Container System --- */
.container{position:relative;width:var(--w-full);max-width:var(--cnt-max);margin:0 auto;padding-left:var(--sp-container);padding-right:var(--sp-container)}
@media (min-width:768px){
    .container{width:100%}
}
@media (min-width:1921px){
    .container{max-width:var(--cnt-max-ultra)}
}

/* --- Grid System --- */
.row{margin-left:calc(var(--sp-container) * -1);margin-right:calc(var(--sp-container) * -1);position:relative}
.row.float [class*=column-]{float:left}
.row.float:after{display:table;clear:both;content:""}
.lg-1,.lg-2,.lg-3,.lg-4,.lg-5,.lg-6,.lg-7,.lg-8,.lg-9,.lg-10,.lg-11,.lg-12,.md-1,.md-2,.md-3,.md-4,.md-5,.md-6,.md-7,.md-8,.md-9,.md-10,.md-11,.md-12,.row[class*=columns-] .column,.sm-1,.sm-2,.sm-3,.sm-4,.sm-5,.sm-6,.sm-7,.sm-8,.sm-9,.sm-10,.sm-11,.sm-12,.xl-1,.xl-2,.xl-3,.xl-4,.xl-5,.xl-6,.xl-7,.xl-8,.xl-9,.xl-10,.xl-11,.xl-12,.xs-1,.xs-2,.xs-3,.xs-4,.xs-5,.xs-6,.xs-7,.xs-8,.xs-9,.xs-10,.xs-11,.xs-12{position:relative;width:var(--w-full);padding-left:var(--sp-container);padding-right:var(--sp-container)}
.xs-1{max-width:var(--wg-1);flex:0 0 var(--wg-1)}
.xs-2{max-width:var(--wg-2);flex:0 0 var(--wg-2)}
.xs-3{max-width:var(--wg-3);flex:0 0 var(--wg-3)}
.xs-4{max-width:var(--wg-4);flex:0 0 var(--wg-4)}
.xs-5{max-width:var(--wg-5);flex:0 0 var(--wg-5)}
.xs-6{max-width:var(--wg-6);flex:0 0 var(--wg-6)}
.xs-7{max-width:var(--wg-7);flex:0 0 var(--wg-7)}
.xs-8{max-width:var(--wg-8);flex:0 0 var(--wg-8)}
.xs-9{max-width:var(--wg-9);flex:0 0 var(--wg-9)}
.xs-10{max-width:var(--wg-10);flex:0 0 var(--wg-10)}
.xs-11{max-width:var(--wg-11);flex:0 0 var(--wg-11)}
.xs-12{max-width:var(--wg-12);flex:0 0 var(--wg-12)}
@media (min-width:768px){
    .sm-1{max-width:var(--wg-1);flex:0 0 var(--wg-1)}
    .sm-2{max-width:var(--wg-2);flex:0 0 var(--wg-2)}
    .sm-3{max-width:var(--wg-3);flex:0 0 var(--wg-3)}
    .sm-4{max-width:var(--wg-4);flex:0 0 var(--wg-4)}
    .sm-5{max-width:var(--wg-5);flex:0 0 var(--wg-5)}
    .sm-6{max-width:var(--wg-6);flex:0 0 var(--wg-6)}
    .sm-7{max-width:var(--wg-7);flex:0 0 var(--wg-7)}
    .sm-8{max-width:var(--wg-8);flex:0 0 var(--wg-8)}
    .sm-9{max-width:var(--wg-9);flex:0 0 var(--wg-9)}
    .sm-10{max-width:var(--wg-10);flex:0 0 var(--wg-10)}
    .sm-11{max-width:var(--wg-11);flex:0 0 var(--wg-11)}
    .sm-12{max-width:var(--wg-12);flex:0 0 var(--wg-12)}
    .span_1{width:var(--wg-1)}
    .span_2{width:var(--wg-2)}
    .span_3{width:var(--wg-3)}
    .span_4{width:var(--wg-4)}
    .span_5{width:var(--wg-5)}
    .span_6{width:var(--wg-6)}
    .span_7{width:var(--wg-7)}
    .span_8{width:var(--wg-8)}
    .span_9{width:var(--wg-9)}
    .span_10{width:var(--wg-10)}
    .span_11{width:var(--wg-11)}
    .span_12{width:var(--wg-12)}
}
@media (min-width:1024px){
    .md-1{max-width:var(--wg-1);flex:0 0 var(--wg-1)}
    .md-2{max-width:var(--wg-2);flex:0 0 var(--wg-2)}
    .md-3{max-width:var(--wg-3);flex:0 0 var(--wg-3)}
    .md-4{max-width:var(--wg-4);flex:0 0 var(--wg-4)}
    .md-5{max-width:var(--wg-5);flex:0 0 var(--wg-5)}
    .md-6{max-width:var(--wg-6);flex:0 0 var(--wg-6)}
    .md-7{max-width:var(--wg-7);flex:0 0 var(--wg-7)}
    .md-8{max-width:var(--wg-8);flex:0 0 var(--wg-8)}
    .md-9{max-width:var(--wg-9);flex:0 0 var(--wg-9)}
    .md-10{max-width:var(--wg-10);flex:0 0 var(--wg-10)}
    .md-11{max-width:var(--wg-11);flex:0 0 var(--wg-11)}
    .md-12{max-width:var(--wg-12);flex:0 0 var(--wg-12)}
}
@media (min-width:1279px){
    .lg-1{max-width:var(--wg-1);flex:0 0 var(--wg-1)}
    .lg-2{max-width:var(--wg-2);flex:0 0 var(--wg-2)}
    .lg-3{max-width:var(--wg-3);flex:0 0 var(--wg-3)}
    .lg-4{max-width:var(--wg-4);flex:0 0 var(--wg-4)}
    .lg-5{max-width:var(--wg-5);flex:0 0 var(--wg-5)}
    .lg-6{max-width:var(--wg-6);flex:0 0 var(--wg-6)}
    .lg-7{max-width:var(--wg-7);flex:0 0 var(--wg-7)}
    .lg-8{max-width:var(--wg-8);flex:0 0 var(--wg-8)}
    .lg-9{max-width:var(--wg-9);flex:0 0 var(--wg-9)}
    .lg-10{max-width:var(--wg-10);flex:0 0 var(--wg-10)}
    .lg-11{max-width:var(--wg-11);flex:0 0 var(--wg-11)}
    .lg-12{max-width:var(--wg-12);flex:0 0 var(--wg-12)}
}
@media (min-width:1366px){
    .xl-1{max-width:var(--wg-1);flex:0 0 var(--wg-1)}
    .xl-2{max-width:var(--wg-2);flex:0 0 var(--wg-2)}
    .xl-3{max-width:var(--wg-3);flex:0 0 var(--wg-3)}
    .xl-4{max-width:var(--wg-4);flex:0 0 var(--wg-4)}
    .xl-5{max-width:var(--wg-5);flex:0 0 var(--wg-5)}
    .xl-6{max-width:var(--wg-6);flex:0 0 var(--wg-6)}
    .xl-7{max-width:var(--wg-7);flex:0 0 var(--wg-7)}
    .xl-8{max-width:var(--wg-8);flex:0 0 var(--wg-8)}
    .xl-9{max-width:var(--wg-9);flex:0 0 var(--wg-9)}
    .xl-10{max-width:var(--wg-10);flex:0 0 var(--wg-10)}
    .xl-11{max-width:var(--wg-11);flex:0 0 var(--wg-11)}
    .xl-12{max-width:var(--wg-12);flex:0 0 var(--wg-12)}
}

/* --- Flexbox & Utility Helpers --- */
.d-flex{display:flex}
.d-inline-flex{display:inline-flex}
.flex-d-row{flex-direction:row}
.flex-d-row-reverse{flex-direction:row-reverse}
.flex-d-column{flex-direction:column}
.flex-d-column-reverse{flex-direction:column-reverse}
.flex-wrap{flex-wrap:wrap}
.flex-wrap-reverse{flex-wrap:wrap-reverse}
.flex-nowrap{flex-wrap:nowrap}
.flex-flow-rw{flex-flow:row wrap}
.flex-flow-rrw{flex-flow:row-reverse wrap}
.flex-flow-rnw{flex-flow:row nowrap}
.flex-flow-rrnw{flex-flow:row-reverse nowrap}
.flex-flow-cw{flex-flow:column wrap}
.flex-flow-crw{flex-flow:column-reverse wrap}
.flex-flow-cnw{flex-flow:column nowrap}
.flex-flow-crnw{flex-flow:column-reverse nowrap}
.justify-content-start{justify-content:flex-start}
.justify-content-end{justify-content:flex-end}
.justify-content-center{justify-content:center}
.justify-content-baseline{justify-content:baseline}
.justify-content-around{justify-content:space-around}
.justify-content-between{justify-content:space-between}
.align-items-start{align-items:flex-start}
.align-items-end{align-items:flex-end}
.align-items-center{align-items:center}
.align-items-baseline{align-items:baseline}
.align-items-stretch{align-items:stretch}
.align-self-start{align-self:flex-start}
.align-self-end{align-self:flex-end}
.align-self-center{align-self:center}
.align-self-baseline{align-self:baseline}
.align-self-stretch{align-self:stretch}
.align-content-start{align-content:flex-start}
.align-content-end{align-content:flex-end}
.align-content-center{align-content:center}
.align-content-between{align-content:space-between}
.align-content-around{align-content:space-around}
.flex-order-first{order:-1}
.flex-order-last{order:1}
.flex-order-unordered{order:0}
.flex-ml-auto{margin-left:auto}
.flex-mr-auto{margin-right:auto}
.flex-mt-auto{margin-top:auto}
.flex-mb-auto{margin-bottom:auto}
.order-0{order:0}
.order-1{order:1}
.order-2{order:2}
.order-3{order:3}
.order-4{order:4}
.order-5{order:5}
.order-6{order:6}
.order-7{order:7}
.order-8{order:8}
.order-9{order:9}
.order-10{order:10}
.order-11{order:11}
.order-12{order:12}

/* --- Visibility Helpers --- */
@media (min-width:0px){
    .hidden-xs{display:none}
}
@media (min-width:768px){
    .hidden-sm{display:none}
}
@media (min-width:1024px){
    .hidden-md{display:none}
}
@media (min-width:1279px){
    .hidden-lg{display:none}
}
@media (min-width:1366px){
    .hidden-xl{display:none}
}
/* ==========================================================================
** DO NOT CHANGE THIS AREA ** TO HERE
========================================================================== */


/* ==========================================================================
   3. BASE TYPOGRAPHY & UTILITIES
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--clr-text-main);
    background-color: var(--clr-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--clr-navy);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
a:hover { color: var(--clr-gold); }

::selection {
    background: var(--clr-gold);
    color: var(--clr-white);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--clr-gold);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Google Fonts は子テーマ functions.php で preconnect 付きの <link> として読み込む（@importはレンダリングブロックのため使用しない） */

/* ==========================================================================
   4. FORM CONTROLS & BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.75rem 2rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        background-color var(--dur-base) var(--ease-out),
        color            var(--dur-base) var(--ease-out),
        border-color     var(--dur-base) var(--ease-out),
        box-shadow       var(--dur-base) var(--ease-out),
        transform        var(--dur-base) var(--ease-out);
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover {
    transform: translateY(-2px);
}

/* Primary (Gold fill) */
.btn-primary {
    background: var(--grad-gold);
    color: var(--clr-white);
    border-color: transparent;
    box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #7a5a20 0%, #9a7030 100%);
    box-shadow: 0 8px 28px rgba(154,113,48,.35);
    color: var(--clr-white);
}

/* Contact (Navy outline → fill) */
.btn-contact {
    background: transparent;
    color: var(--clr-navy);
    border-color: var(--clr-navy);
    padding: 0.6rem 1.3rem;
    font-size: var(--fs-base);
}
.btn-contact:hover {
    background: var(--clr-navy);
    color: var(--clr-white);
    border-color: var(--clr-navy);
    transform: translateY(-2px);
}

/* CTA footer */
.btn-cta-footer {
    background: transparent;
    color: var(--clr-cream);
    border: 2px solid var(--on-navy-faint);
    padding: 0.85rem 2.5rem;
    font-size: var(--fs-sm);
    border-radius: var(--radius-pill);
    letter-spacing: 0.1em;
}
.btn-cta-footer:hover {
    background: rgba(255,255,255,.12);
    border-color: var(--clr-cream);
    color: var(--clr-white);
    transform: translateY(-2px);
}

.btn-arrow { font-size: 1.1em; }

/* Read more link */
.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--clr-gold);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.read-more-link::after {
    content: '›';
    font-size: 1.2em;
    transition: transform var(--dur-base) var(--ease-out);
}
.read-more-link:hover { color: var(--clr-brown); }
.read-more-link:hover::after { transform: translateX(4px); }

/* --- フォーム（Contact Form 7 標準出力） --- */
.wpcf7-form {
    max-width: 640px;
}
.wpcf7-form p {
    margin-bottom: var(--sp-6);
}
.wpcf7-form label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--clr-navy);
    letter-spacing: 0.03em;
    margin-bottom: var(--sp-2);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="password"],
.wpcf7-form input[type="search"],
.wpcf7-form textarea,
.wpcf7-form select {
    display: block;
    width: 100%;
    padding: 0.85rem 1.1rem;
    background: var(--clr-white);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--clr-text-main);
    line-height: var(--lh-base);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.wpcf7-form textarea {
    min-height: 10rem;
    resize: vertical;
}
.wpcf7-form select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6b7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}
.wpcf7-form ::placeholder {
    color: var(--clr-text-muted);
    opacity: .7;
}
.wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    outline: none;
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 3px var(--clr-gold-wash-strong);
}

/* チェックボックス / ラジオボタン */
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
    width: 1.15em;
    height: 1.15em;
    margin: 0 0.5em 0 0;
    accent-color: var(--clr-gold);
    cursor: pointer;
    vertical-align: -0.2em;
}
.wpcf7-form .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    margin: 0 var(--sp-5) var(--sp-2) 0;
}
.wpcf7-form .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--clr-text-sub);
    margin-bottom: 0;
    cursor: pointer;
}

/* 送信ボタン */
.wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.9rem 3rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--grad-gold);
    color: var(--clr-white);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-gold);
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.wpcf7-form input[type="submit"]:hover {
    background: linear-gradient(135deg, #7a5a20 0%, #9a7030 100%);
    box-shadow: 0 8px 28px rgba(154,113,48,.35);
    transform: translateY(-2px);
}
.wpcf7-form input[type="submit"]:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* エラー・送信結果表示 */
.wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #c0392b;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
    border-color: #c0392b;
}
.wpcf7 .wpcf7-response-output {
    margin: var(--sp-6) 0 0;
    padding: var(--sp-4) var(--sp-5);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    background: var(--clr-cream-dark);
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--clr-gold-mid);
    background: var(--clr-gold-wash);
    color: var(--clr-navy);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
    border-color: #c0392b;
    background: rgba(192,57,43,.06);
    color: #8a2a20;
}

/* ==========================================================================
   5. HEADER AREA & NAVIGATION
   ========================================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--clr-cream-border);
    box-shadow: var(--shadow-sm);
}
/* 背景のぼかしは疑似要素に分離する。
   backdrop-filterを.site-header自身に付けると、子孫である.site-navの
   position:fixedの基準（containing block）が.site-header自身になってしまい、
   モバイルのフルスクリーンメニューがヘッダーの狭い領域に閉じ込められるため。 */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(248,243,236,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: var(--sp-4);
}

/* Logo */
.site-logo a,
.logo-text {
    display: flex;
    align-items: baseline;
    gap: 2px;
    text-decoration: none;
}
.logo-main {
    font-family: var(--font-en);
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--clr-navy);
    letter-spacing: 0.02em;
    line-height: 1;
}
.logo-tm {
    font-size: 1.25rem;
    color: var(--clr-gold);
    vertical-align: super;
    font-family: var(--font-en);
}

/* Nav */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.nav-menu-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: var(--sp-1);
    margin: 0;
    padding: 0;
}
.nav-menu-list li a {
    display: block;
    padding: 0.5rem 0.65rem;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--clr-navy);
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.nav-menu-list li a:hover {
    color: var(--clr-gold);
    background: var(--clr-gold-wash);
}
.nav-menu-list li.current-menu-item > a,
.nav-menu-list li.current_page_item > a {
    color: var(--clr-gold);
}

/* ハンバーガーボタン（CSS-only: チェックボックスハック） */
.nav-toggle-input {
    display: none;
}
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    z-index: 1010;
}
.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--clr-navy);
    border-radius: 2px;
    transition: transform var(--dur-base) var(--ease-inout), opacity var(--dur-base) var(--ease-inout);
    transform-origin: center;
}
.nav-toggle-input:checked ~ .nav-toggle .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle-input:checked ~ .nav-toggle .hamburger-line:nth-child(2) {
    opacity: 0;
}
.nav-toggle-input:checked ~ .nav-toggle .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.nav-toggle-input:focus-visible ~ .nav-toggle {
    outline: 2px solid var(--clr-gold);
    outline-offset: 2px;
}

/* ==========================================================================
   6. FOOTER AREA
   ========================================================================== */

/* フッターCTAバー */
.footer-cta {
    background: var(--grad-navy);
    padding: var(--sp-10) 0;
}
.footer-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
}
.footer-cta__headline {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--clr-cream);
    line-height: var(--lh-snug);
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-2);
}
.footer-cta__sub {
    font-size: var(--fs-sm);
    color: var(--on-navy);
    line-height: var(--lh-loose);
}

/* メインフッター */
.site-footer {
    background: var(--clr-navy);
    color: var(--on-navy-strong);
    padding: var(--sp-10) 0 0;
}
.footer-grid {
    row-gap: var(--sp-8);
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid var(--on-navy-border);
}
.footer-logo-text {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--clr-cream);
    letter-spacing: 0.04em;
    text-decoration: none;
}
.footer-tagline {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    margin: var(--sp-4) 0;
    color: var(--on-navy);
}
.footer-profile-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--on-navy-soft);
    line-height: var(--lh-loose);
}
.footer-col-title {
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--clr-gold-light);
    text-transform: uppercase;
    margin-bottom: var(--sp-6);
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.footer-links a {
    font-size: var(--fs-sm);
    color: var(--on-navy-muted);
    transition: color var(--dur-base) var(--ease-out);
}
.footer-links a:hover { color: var(--clr-gold-light); }

.footer-nap {
    list-style: none;
    padding: 0;
    margin: var(--sp-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    border-top: 1px solid var(--on-navy-border);
    padding-top: var(--sp-4);
}
.footer-nap li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--on-navy-muted);
    line-height: var(--lh-snug);
}
.footer-nap i {
    color: var(--clr-gold-light);
    width: 1em;
    padding-top: 2px;
    flex-shrink: 0;
}
.footer-nap a { color: var(--on-navy-muted); }
.footer-nap a:hover { color: var(--clr-gold-light); }

.footer-copy-text {
    font-size: var(--fs-xs);
    color: var(--on-navy-faint);
    line-height: var(--lh-loose);
}
.footer-nav {
    margin-top: var(--sp-6);
}
.footer-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav-list a {
    font-size: var(--fs-xs);
    color: var(--on-navy-subtle);
}
.footer-nav-list a:hover { color: var(--clr-gold-light); }

.footer-bottom {
    padding: var(--sp-6) 0;
    text-align: right;
}
.footer-bottom-text {
    font-family: var(--font-en);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--on-navy-ghost);
    letter-spacing: 0.1em;
}

/* ==========================================================================
   7. CARD BLOCK
   ========================================================================== */

.card {
    position: relative;
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
/* カード全体をクリック可能にする（タイトルリンクを.card全体に引き伸ばす） */
.card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.card__thumb {
    aspect-ratio: var(--ar-card);
    overflow: hidden;
}
.card__thumb--placeholder {
    background: var(--clr-cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}
.card__thumb-icon {
    font-size: 2rem;
    color: var(--clr-border);
}
.card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__thumb img {
    transform: scale(1.04);
}
.card__body {
    padding: var(--sp-6);
}
.card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--clr-navy);
    margin-bottom: var(--sp-3);
}
.card__meta {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-3);
}
.card__excerpt {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-loose);
}

/* ==========================================================================
   8. TYPOGRAPHY DETAILS
   ========================================================================== */

.section-label {
    display: inline-block;
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: var(--sp-3);
}
.section-title {
    font-family: var(--font-serif);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--clr-navy);
    letter-spacing: 0.03em;
}
.section-title--sm { font-size: var(--fs-xl); }
.section-title--spaced { margin-bottom: var(--sp-10); }
.section-lead {
    font-size: var(--fs-md);
    color: var(--clr-text-sub);
    line-height: var(--lh-loose);
    max-width: 60ch;
}
.empty-state__lead {
    margin: 0 auto var(--sp-8);
    text-align: center;
}
.section-lead--wide { max-width: 70ch; }

/* Divider */
.divider-gold {
    width: 48px;
    height: 2px;
    background: var(--grad-gold);
    border-radius: 2px;
    margin: var(--sp-4) 0 var(--sp-6);
}

/* ==========================================================================
   9. UTILITY COLORS & TEXT
   ========================================================================== */

.text-navy  { color: var(--clr-navy); }
.text-gold  { color: var(--clr-gold); }
.text-cream { color: var(--clr-cream); }
.text-muted { color: var(--clr-text-muted); }
.bg-cream   { background-color: var(--clr-cream); }
.bg-navy    { background-color: var(--clr-navy); }
.bg-white   { background: var(--clr-white); }
.mt-0  { margin-top: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }
.pt-0  { padding-top: 0 !important; }
.mt-4  { margin-top: var(--sp-4) !important; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* 結果なし表示（一覧・検索・404で共通） */
.empty-state {
    text-align: center;
    padding: var(--sp-16) 0;
}
.empty-state--lg  { padding: var(--sp-24) 0; }
.empty-state--404 { padding: var(--sp-8) 0 var(--sp-16); }
.empty-state__icon {
    font-size: 3rem;
    color: var(--clr-border);
    margin-bottom: var(--sp-4);
    display: block;
}
.empty-state__text {
    color: var(--clr-text-muted);
    font-size: var(--fs-md);
}

/* ==========================================================================
   10. SECTION LAYOUT
   ========================================================================== */

.section {
    padding: var(--sp-24) 0;
}
.section--sm { padding: var(--sp-16) 0; }
.section--lg { padding: var(--sp-32) 0; }
.section--cream { background: var(--clr-cream); }
.section--white { background: var(--clr-white); }
.section--navy  { background: var(--clr-navy); color: var(--clr-cream); }

/* ==========================================================================
   11. FRONT-PAGE: HERO
   ========================================================================== */

.hero {
    padding-top: calc(var(--header-h) + var(--sp-16));
    padding-bottom: var(--sp-16);
    background: var(--grad-hero);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 70% 50%, var(--clr-gold-wash) 0%, transparent 60%);
    pointer-events: none;
}
.hero-inner {
    row-gap: var(--sp-8);
    position: relative;
    z-index: 1;
}
.hero-content {}

/* Breadcrumb（get_full_breadcrumb_array() / full_breadcrumb_html() が出力する nav > ol > li 構造に対応） */
.breadcrumb { margin-bottom: var(--sp-6); }
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
    color: var(--clr-text-muted);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; }
.breadcrumb li:first-child i { display: none; }
.breadcrumb i { font-size: 0.7em; color: var(--clr-cream-border); }
.breadcrumb a { color: var(--clr-text-muted); transition: color var(--dur-base) var(--ease-out); }
.breadcrumb a:hover { color: var(--clr-gold); }
.breadcrumb li.current { color: var(--clr-navy); font-weight: 600; }

/* Hero Heading Box */
.hero-heading-box {
    border: 1px solid var(--clr-gold-mid);
    border-radius: var(--radius-md);
    padding: var(--sp-8) var(--sp-10);
    margin-bottom: var(--sp-8);
    position: relative;
    background: rgba(248,243,236,.6);
    backdrop-filter: blur(4px);
}
.hero-heading-box::before,
.hero-heading-box::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--clr-gold);
    border-style: solid;
}
.hero-heading-box::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
    border-radius: 2px 0 0 0;
}
.hero-heading-box::after {
    bottom: -1px; right: -1px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 2px 0;
}
.hero-subtitle {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    color: var(--clr-navy-mid);
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-3);
    font-weight: 400;
}
.hero-title {
    font-family: var(--font-serif);
    font-size: var(--fs-page-title);
    font-weight: 700;
    color: var(--clr-gold);
    letter-spacing: 0.06em;
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-4);
}
.hero-service {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    color: var(--clr-navy-mid);
    letter-spacing: 0.1em;
    font-weight: 400;
}
.hero-desc {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-xloose);
    margin-bottom: var(--sp-8);
    max-width: 48ch;
}

/* Hero Image */
.hero-image-wrap {
    position: relative;
}
.hero-image-wrap img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    object-fit: cover;
}

/* Vertical Copy */
.hero-vertical-copy {
    position: absolute;
    right: -32px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-family: var(--font-serif);
    font-size: var(--fs-sm);
    color: var(--clr-navy-mid);
    letter-spacing: 0.2em;
    line-height: 1;
    padding: var(--sp-4) var(--sp-2);
    border-left: 2px solid var(--clr-gold-mid);
}

/* ==========================================================================
   12. FRONT-PAGE: STATS
   ========================================================================== */

.stats-section {
    padding: var(--sp-12) 0;
    background: var(--clr-white);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}
.stats-grid {
    row-gap: var(--sp-4);
}
.stat-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    transition: background var(--dur-base) var(--ease-out);
}
.stat-item:hover {
    background: var(--clr-cream);
}
.stat-icon {
    width: var(--size-icon-box);
    height: var(--size-icon-box);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-gold-wash-strong);
    border-radius: var(--radius-md);
    color: var(--clr-gold);
    font-size: var(--fs-lg);
    flex-shrink: 0;
}
.stat-content {}
.stat-number {
    font-family: var(--font-en);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--clr-navy);
    line-height: 1.1;
}
.stat-unit {
    font-family: var(--font-serif);
    font-size: var(--fs-base);
    color: var(--clr-navy-mid);
    margin-left: 2px;
}
.stat-label {
    font-size: var(--fs-xs);
    color: var(--clr-text-sub);
    margin-top: var(--sp-1);
    line-height: var(--lh-snug);
}

/* ==========================================================================
   13. FRONT-PAGE: PROFILE / HISTORY
   ========================================================================== */

.profile-section {
    padding: var(--sp-24) 0;
    background: var(--clr-cream);
}
.profile-grid {
    row-gap: var(--sp-12);
}

/* タイムライン */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.timeline-item {
    display: grid;
    grid-template-columns: 40px 70px 1fr;
    align-items: start;
    gap: var(--sp-3);
    padding: var(--sp-6) 0;
    border-bottom: 1px solid var(--clr-cream-border);
    position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--clr-gold-wash-strong);
    color: var(--clr-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    flex-shrink: 0;
}
.timeline-year {
    font-family: var(--font-en);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--clr-gold);
    padding-top: 10px;
    letter-spacing: 0.03em;
}
.timeline-body {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-loose);
}

/* 大切にしていること */
.values-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}
.value-item {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.value-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}
.value-icon {
    width: var(--size-icon-box);
    height: var(--size-icon-box);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-gold-wash-strong);
    border-radius: var(--radius-md);
    color: var(--clr-gold);
    font-size: var(--fs-lg);
    flex-shrink: 0;
}
.value-title {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--clr-navy);
    margin-bottom: var(--sp-1);
}
.value-desc {
    font-size: var(--fs-xs);
    color: var(--clr-text-sub);
    line-height: var(--lh-base);
}

/* ==========================================================================
   14. FRONT-PAGE: CTA BANNER (リ・コード思考)
   ========================================================================== */

.cta-banner {
    background: var(--grad-navy);
    padding: var(--sp-16) 0;
    position: relative;
    overflow: hidden;
}
.cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 50%, rgba(154,113,48,.15) 0%, transparent 55%);
    pointer-events: none;
}
.cta-banner-inner {
    row-gap: var(--sp-8);
    position: relative;
    z-index: 1;
}
.cta-banner__label {
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--clr-gold-light);
    margin-bottom: var(--sp-2);
}
.cta-banner__title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--clr-cream);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-2);
    letter-spacing: 0.05em;
}
.cta-banner__sub {
    font-size: var(--fs-sm);
    color: var(--on-navy-muted);
    margin-bottom: var(--sp-3);
    font-family: var(--font-en);
    letter-spacing: 0.1em;
}
.cta-banner__desc {
    font-size: var(--fs-sm);
    color: var(--on-navy);
    line-height: var(--lh-loose);
    margin-bottom: var(--sp-8);
    max-width: 50ch;
}
.cta-banner__image {
    position: relative;
}
.cta-banner__image img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    aspect-ratio: 4/3;
    opacity: .9;
}

/* ==========================================================================
   15. FRONT-PAGE: 3-COLUMN INFO
   ========================================================================== */

.info-section {
    padding: var(--sp-24) 0;
    background: var(--clr-cream);
}
.info-grid {
    row-gap: var(--sp-8);
}
.info-col {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-slow) var(--ease-out);
}
.info-col:hover {
    box-shadow: var(--shadow-md);
}
.info-col__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--clr-navy);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 2px solid var(--clr-gold-mid);
    letter-spacing: 0.04em;
}
.info-col__title i {
    color: var(--clr-gold);
    font-size: 0.9em;
}
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.info-list li {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-snug);
    padding-left: var(--sp-5);
    position: relative;
}
.info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grad-gold);
    flex-shrink: 0;
}
.info-list--check li::before {
    content: '✓';
    background: none;
    color: var(--clr-gold);
    font-size: 0.75em;
    font-weight: 700;
    top: 0.2em;
    width: auto;
    border-radius: 0;
}

/* ==========================================================================
   16. FRONT-PAGE: BOOKS & TESTIMONIAL
   ========================================================================== */

.books-section {
    padding: var(--sp-24) 0;
    background: var(--clr-white);
}
.books-grid {
    row-gap: var(--sp-8);
}
.books-cover img {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.books-info__label {
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    color: var(--clr-gold);
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
}
.books-info__title {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--clr-navy);
    margin-bottom: var(--sp-3);
    line-height: var(--lh-snug);
}
.books-info__subtitle {
    font-size: var(--fs-sm);
    color: var(--clr-gold-mid);
    font-weight: 600;
    margin-bottom: var(--sp-4);
}
.books-info__desc {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-loose);
    margin-bottom: var(--sp-6);
}
.books-btns {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.btn-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.75rem 1.5rem;
    border: 1.5px solid var(--clr-navy);
    border-radius: var(--radius-sm);
    background: var(--clr-white);
    color: var(--clr-navy);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.btn-book:hover {
    background: var(--clr-navy);
    color: var(--clr-white);
    transform: translateY(-2px);
}
.btn-book span { font-size: 0.9em; }

/* 推薦者の声 */
.testimonial-card {
    background: var(--clr-cream);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    border: 1px solid var(--clr-cream-border);
    position: relative;
}
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 12px;
    left: 20px;
    font-family: var(--font-en);
    font-size: 5rem;
    color: rgba(154,113,48,.12);
    line-height: 1;
}
.testimonial-text {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-xloose);
    margin-bottom: var(--sp-6);
    position: relative;
    z-index: 1;
}
.testimonial-author {
    text-align: center;
    gap: var(--sp-4);
}
.testimonial-author__img {
    margin:0 auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--clr-gold-light);
    flex-shrink: 0;
}
.testimonial-author__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-author__name {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--clr-navy);
    margin-bottom: 2px;
}
.testimonial-author__role {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
}

/* ==========================================================================
   17. ARCHIVE PAGE
   ========================================================================== */

.archive-header {
    padding-top: calc(var(--header-h) + var(--sp-12));
    padding-bottom: var(--sp-8);
    background: var(--grad-hero);
    text-align: center;
}
.archive-header .breadcrumb ol { justify-content: center; }
.archive-header__label {
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: var(--sp-2);
}
.archive-header__title {
    font-family: var(--font-serif);
    font-size: var(--fs-page-title);
    font-weight: 700;
    color: var(--clr-navy);
}
.archive-main {
    padding: var(--sp-16) 0 var(--sp-24);
    background: var(--clr-cream);
}
.archive-grid {
    row-gap: var(--sp-8);
    margin-bottom: var(--sp-12);
}

/* ページネーション */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-12);
}
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-box);
    height: var(--size-icon-box);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    border: 1.5px solid var(--clr-border);
    color: var(--clr-navy);
    background: var(--clr-white);
    transition: all var(--dur-base) var(--ease-out);
}
.pagination a:hover,
.pagination .current {
    background: var(--clr-navy);
    color: var(--clr-white);
    border-color: var(--clr-navy);
}

/* ==========================================================================
   18. SINGLE PAGE
   ========================================================================== */

.single-header {
    padding-top: calc(var(--header-h) + var(--sp-16));
    padding-bottom: var(--sp-12);
    background: var(--grad-hero);
}
.single-header__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
}
.single-header__cat {
    background: var(--clr-gold);
    color: var(--clr-white);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.single-header__title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--clr-navy);
    line-height: var(--lh-snug);
    letter-spacing: 0.03em;
}

.single-main {
    padding: var(--sp-16) 0 var(--sp-24);
    background: var(--clr-cream);
}
.single-layout {
    row-gap: var(--sp-8);
}

/* 記事本文 */
.article-body {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-10);
    box-shadow: var(--shadow-sm);
}
:where(.article-body) h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--clr-navy);
    margin: var(--sp-8) 0 var(--sp-4);
    padding-left: var(--sp-4);
    border-left: 3px solid var(--clr-gold);
}
:where(.article-body) h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--clr-navy-mid);
    margin: var(--sp-6) 0 var(--sp-3);
}
:where(.article-body) p {
    font-size: var(--fs-base);
    color: var(--clr-text-sub);
    line-height: var(--lh-xloose);
    margin-bottom: var(--sp-4);
}
:where(.article-body) img {
    border-radius: var(--radius-md);
    margin: var(--sp-6) 0;
}
:where(.article-body) ul, :where(.article-body) ol {
    padding-left: var(--sp-6);
    margin-bottom: var(--sp-4);
}
:where(.article-body) li {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-loose);
    margin-bottom: var(--sp-2);
}
.article-thumbnail {
    width: 100%;
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-8);
    overflow: hidden;
    aspect-ratio: var(--ar-card);
}
.article-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 記事フッター（タグ） */
.article-footer {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--clr-border);
}
.article-tags {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.article-tags__label {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
}
.tag-badge {
    background: var(--clr-cream-dark);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    font-size: var(--fs-xs);
    color: var(--clr-navy);
}

/* 前後の投稿ナビゲーション */
.post-nav {
    margin-top: var(--sp-8);
    row-gap: var(--sp-4);
}
.post-nav__link {
    background: var(--clr-white);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    display: block;
}
.post-nav__link--next { text-align: right; }
.post-nav__label {
    font-size: var(--fs-xs);
    color: var(--clr-gold);
}
.post-nav__title {
    font-size: var(--fs-sm);
    color: var(--clr-navy);
    margin-top: var(--sp-1);
    font-weight: 600;
}

/* サイドバー */
.sidebar {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
}
.sidebar-widget {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-6);
}
.sidebar-widget__title {
    font-family: var(--font-serif);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--clr-navy);
    letter-spacing: 0.08em;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--clr-border);
}
.sidebar-widget__title i {
    color: var(--clr-gold);
    font-size: 0.9em;
}
.sidebar-widget__desc {
    font-size: var(--fs-xs);
    line-height: var(--lh-loose);
    margin-bottom: var(--sp-4);
    color: var(--clr-text-sub);
}

/* サイドバー: Aboutカード */
.sidebar-about__avatar-wrap {
    text-align: center;
    margin-bottom: var(--sp-4);
}
.sidebar-about__avatar {
    border-radius: 50%;
    margin: 0 auto;
}
.sidebar-about__name {
    font-family: var(--font-serif);
    font-weight: 700;
    text-align: center;
    color: var(--clr-navy);
    margin-bottom: var(--sp-2);
}
.sidebar-about__desc {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    text-align: center;
    line-height: var(--lh-loose);
}

/* サイドバー: お問合わせCTAカード（ネイビー背景） */
.sidebar-widget--cta {
    background: var(--grad-navy);
    color: var(--clr-cream);
    text-align: center;
}
.sidebar-widget--cta .sidebar-widget__title {
    color: var(--clr-cream);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--sp-3);
}
.sidebar-widget--cta .sidebar-widget__desc {
    color: var(--on-navy);
}
.sidebar-cta__btn {
    width: 100%;
    justify-content: center;
    font-size: var(--fs-xs);
}
.sidebar-post-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-post-list li a {
    font-size: var(--fs-xs);
    color: var(--clr-text-sub);
    line-height: var(--lh-snug);
    transition: color var(--dur-base) var(--ease-out);
}
.sidebar-post-list li a:hover { color: var(--clr-gold); }

/* ==========================================================================
   19. PAGE-WRAPPER OFFSET (fixed header)
   ========================================================================== */

#page-wrapper {
    /* ヘッダー高さ分のオフセット（front-page.phpはhero内で処理） */
}

/* ==========================================================================
   20. ANIMATIONS (scroll-in)
   ========================================================================== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp {
    animation: fadeInUp 0.7s var(--ease-out) both;
}
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* ==========================================================================
   21. INNER PAGES (プロフィール / 夢・理念 / 実績・活動 共通コンポーネント)
   ========================================================================== */

/* --- Eyebrow（線付きラベル） --- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: var(--sp-4);
}
.eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--clr-gold);
}

/* --- ページヘッダー（パンくず＋見出し＋透かし文字） --- */
.page-header {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-h) + var(--sp-12));
    padding-bottom: var(--sp-10);
    background: var(--grad-hero);
}
.page-header__crumb {
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-6);
}
.page-header__title {
    font-family: var(--font-serif);
    font-size: var(--fs-page-title);
    font-weight: 700;
    color: var(--clr-navy);
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-4);
}
.page-header__lead {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-loose);
    max-width: 56ch;
}
.page-header__watermark {
    position: absolute;
    top: 50%;
    right: -0.05em;
    transform: translateY(-45%);
    font-family: var(--font-en);
    font-size: clamp(6rem, 16vw, 12rem);
    font-weight: 600;
    color: var(--clr-navy);
    opacity: .05;
    letter-spacing: 0.05em;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
.page-header .container { position: relative; z-index: 1; }

/* --- プロフィール: 写真＋紹介文 --- */
.profile-intro {
    padding: var(--sp-24) 0;
    background: var(--clr-cream);
}
.profile-photo img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.profile-intro__title {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--clr-navy);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-6);
}
.profile-intro__body p {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-xloose);
    margin-bottom: var(--sp-4);
}
.profile-intro__name {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--clr-navy);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-1);
}
.profile-intro__name-en {
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    letter-spacing: 0.15em;
    color: var(--clr-gold);
    margin-bottom: var(--sp-3);
}
.profile-intro__role {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    line-height: var(--lh-loose);
}

/* --- 統計ボックス（枠付き） --- */
.stat-box {
    /*
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    */
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-white);
    margin-top: var(--sp-10);
    overflow: hidden;
}
/* .stat-box--3 { grid-template-columns: repeat(3, 1fr); } */
.stat-box__item {
    padding: var(--sp-6) var(--sp-8);
    border-left: 1px solid var(--clr-border);
}
.stat-box__item:first-child { border-left: none; }
.stat-box__number {
    font-family: var(--font-en);
    font-size: var(--fs-3xl);
    font-weight: 600;
    color: var(--clr-gold);
    line-height: 1.1;
    margin-bottom: var(--sp-2);
}
.stat-box__label {
    font-size: var(--fs-xs);
    color: var(--clr-text-sub);
    line-height: var(--lh-snug);
}

/* --- 引用/ステートメント（ネイビー背景） --- */
.statement-block {
    position: relative;
    overflow: hidden;
    background: var(--grad-navy);
    padding: var(--sp-20) 0;
    text-align: center;
}
.statement-block::before,
.statement-block::after {
    content: '';
    position: absolute;
    border: 1px solid var(--on-navy-border);
    border-radius: 50%;
    pointer-events: none;
}
.statement-block::before { width: 480px; height: 480px; top: -200px; left: -160px; }
.statement-block::after  { width: 360px; height: 360px; bottom: -180px; right: -120px; }
.statement-block__quote {
    position: relative;
    z-index: 1;
    max-width: 46ch;
    margin: 0 auto;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--clr-cream);
    line-height: var(--lh-snug);
    letter-spacing: 0.04em;
}
.statement-block__mark {
    display: block;
    font-family: var(--font-en);
    font-size: 3.5rem;
    color: var(--clr-gold-light);
    line-height: 1;
    margin-bottom: var(--sp-4);
}

/* --- 大見出しステートメント（夢・理念のヒーロー） --- */
.vision-statement {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    font-weight: 700;
    color: var(--clr-navy);
    line-height: var(--lh-snug);
    letter-spacing: 0.03em;
}
.vision-statement + .vision-statement { margin-top: var(--sp-10); }
.vision-statement em {
    font-style: normal;
    color: var(--clr-gold);
}

/* --- 番号付きリスト（Journey / Principles / Lecture Themes 共通） --- */
.numbered-list__item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--sp-6);
    padding: var(--sp-8) 0;
    border-bottom: 1px solid var(--clr-cream-border);
    align-items: start;
}
.numbered-list__item:first-child { padding-top: 0; }
.numbered-list__item:last-child { border-bottom: none; }
.numbered-list__label {
    font-family: var(--font-en);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--clr-gold);
    letter-spacing: 0.03em;
}
.numbered-list__label--word {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
}
.numbered-list__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.numbered-list__title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--clr-navy);
    margin-bottom: var(--sp-2);
}
.numbered-list__desc {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-loose);
}
.numbered-list__badge {
    flex-shrink: 0;
    align-self: flex-start;
    background: var(--clr-cream-dark);
    color: var(--clr-navy);
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* --- 番号付きカード（活動領域） --- */
.numbered-card {
    background: var(--clr-white);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-slow) var(--ease-out);
}
.numbered-card:hover { box-shadow: var(--shadow-md); }
.numbered-card__num {
    font-family: var(--font-en);
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--clr-gold-mid);
    opacity: .5;
    margin-bottom: var(--sp-4);
}
.numbered-card__title {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--clr-navy);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-3);
}
.numbered-card__desc {
    font-size: var(--fs-sm);
    color: var(--clr-text-sub);
    line-height: var(--lh-loose);
}

/* --- 固定ページ（page.php）: 本文の可読幅を制限 --- */
.article-body--page,
.article-thumbnail--page {
    /* max-width: 800px; */
    margin-left: auto;
    margin-right: auto;
}
.article-thumbnail--page { margin-bottom: var(--sp-8); }

/* --- 注記ボックス --- */
.note-box {
    background: var(--clr-cream-dark);
    border-left: 3px solid var(--clr-gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--sp-4) var(--sp-6);
    margin-top: var(--sp-8);
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    line-height: var(--lh-loose);
}

/* --- クライアント/講演先グリッド --- */
.client-grid {
    row-gap: var(--sp-4);
}
.client-grid--spaced { margin-top: var(--sp-8); }
.client-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 88px;
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--clr-navy-mid);
}

/* --- クロスリンクCTA（Y透かし・次ページ誘導） --- */
.cross-cta {
    position: relative;
    overflow: hidden;
    background: var(--grad-brown);
    padding: var(--sp-16) 0;
}
.cross-cta__watermark {
    position: absolute;
    right: var(--sp-8);
    bottom: -0.15em;
    font-family: var(--font-en);
    font-size: clamp(6rem, 14vw, 10rem);
    font-weight: 700;
    color: rgba(255,255,255,.1);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
.cross-cta .container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    flex-wrap: wrap;
}
.cross-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    margin-bottom: var(--sp-3);
}
.cross-cta__eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: rgba(255,255,255,.75);
}
.cross-cta__title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 700;
    color: var(--clr-white);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-2);
}
.cross-cta__desc {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.85);
    max-width: 46ch;
}
.cross-cta__text { flex: 1 1 320px; }
.cross-cta .btn-primary {
    background: var(--clr-navy);
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
}
.cross-cta .btn-primary:hover { background: var(--clr-navy-mid); }

/* ==========================================================================
   22. BREAKPOINT: MAX-1023PX（タブレット幅: ヘッダーナビをハンバーガー化）
   768〜1023px ではメインナビ + お問合わせボタンが横幅に収まりきらないため、
   768px未満と同じハンバーガーメニューに切り替える。
   ヘッダーの高さ・ロゴサイズ自体はデスクトップのまま（--header-h）。
   ========================================================================== */
@media screen and (max-width:1023px){
    .nav-toggle-input {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }
    .nav-toggle { display: flex; }
    .site-nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(248,243,236,.98);
        backdrop-filter: blur(16px);
        flex-direction: column;
        align-items: center;
        gap: var(--sp-6);
        overflow-y: auto;
        padding: var(--sp-8) 0;
        transform: translateX(100%);
        transition: transform var(--dur-slow) var(--ease-out);
        z-index: 999;
    }
    .nav-toggle-input:checked ~ .site-nav { transform: translateX(0); }
    .site-nav .nav-menu-list { margin-top: auto; }
    .site-nav > .btn { margin-bottom: auto; }
    .nav-menu-list {
        flex-direction: column;
        align-items: center;
        gap: var(--sp-4);
    }
    .nav-menu-list li a {
        font-size: var(--fs-lg);
        padding: var(--sp-3) var(--sp-6);
    }
}

/* ==========================================================================
   23. BREAKPOINT: 768〜1280PX（フロントページ: ヒーロー縦書きコピーの位置調整）
   「企業は『人』で決まり、『人』は行動で変わる。」を、幅広い画面と同じく写真の
   右に並べたい。この幅ではコンテナ自体に外側の余白がほぼ無いため、right/left
   を使った絶対配置（コンテナの外の余白を当てにする方式）はどう調整しても画面
   外に出てしまう。そこで .hero-image-wrap 自体を横並びのflexboxにし、写真と
   テキストで「同じ枠内」の横幅を分け合う形に変更する。外側の余白に依存しない
   ため、この幅でも必ず画面内に収まる。
   ========================================================================== */
@media screen and (min-width:768px) and (max-width:1280px){
    .hero-image-wrap {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }
    .hero-image-wrap img {
        flex: 1 1 0%;
        width: auto;
        min-width: 0;
    }
    .hero-vertical-copy {
        position: static;
        flex: 0 0 auto;
        right: auto;
        top: auto;
        transform: none;
        font-size: var(--fs-xs);
        padding: var(--sp-3) 4px;
    }
}

/* ==========================================================================
   24. BREAKPOINT: MAX-767PX (MOBILE SPECIFICS)
   ========================================================================== */
@media screen and (max-width:767px){
    /* Header */
    .header-inner { height: var(--header-h-mobile); }
    .nav-toggle-input {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }
    .nav-toggle   { display: flex; }
    .site-nav {
        position: fixed;
        top: var(--header-h-mobile);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(248,243,236,.98);
        backdrop-filter: blur(16px);
        flex-direction: column;
        align-items: center;
        gap: var(--sp-6);
        overflow-y: auto;
        padding: var(--sp-8) 0;
        transform: translateX(100%);
        transition: transform var(--dur-slow) var(--ease-out);
        z-index: 999;
    }
    .nav-toggle-input:checked ~ .site-nav { transform: translateX(0); }
    /* 中身が画面高さを超えても上端が隠れないよう、center代わりに
       auto marginで疑似センタリング（はみ出た分はoverflow-yでスクロール可能） */
    .site-nav .nav-menu-list { margin-top: auto; }
    .site-nav > .btn { margin-bottom: auto; }
    .nav-menu-list {
        flex-direction: column;
        align-items: center;
        gap: var(--sp-4);
    }
    .nav-menu-list li a {
        font-size: var(--fs-lg);
        padding: var(--sp-3) var(--sp-6);
    }
    /* Hero */
    .hero {
        padding-top: calc(var(--header-h-mobile) + var(--sp-8));
        padding-bottom: var(--sp-8);
    }
    .hero-image-wrap { order: -1; }
    .hero-vertical-copy {
        position: static;
        writing-mode: horizontal-tb;
        transform: none;
        text-align: center;
        margin-top: var(--sp-4);
        padding: var(--sp-3) var(--sp-4);
        border-left: none;
        border-top: 2px solid var(--clr-gold-mid);
    }
    .hero-heading-box { padding: var(--sp-6) var(--sp-6); }
    .hero-title { font-size: 1.6rem; }

    .cta-banner__image { display: none; }

    .books-cover {
        max-width: 180px;
        margin: 0 auto;
    }

    /* Footer CTA */
    .footer-cta__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--sp-6);
    }
    .footer-cta__headline { font-size: var(--fs-xl); }

    .sidebar { position: static; }

    /* Inner pages */
    .page-header__watermark { font-size: 4.5rem; }
    /* .stat-box { grid-template-columns: 1fr; } */
    /* .stat-box--3 { grid-template-columns: 1fr; } */
    .stat-box__item { border-left: none; border-top: 1px solid var(--clr-border); }
    .stat-box__item:first-child { border-top: none; }
    .numbered-list__item { grid-template-columns: 1fr; gap: var(--sp-2); }
    .numbered-list__body { flex-direction: column; }
    .client-grid .xs-6 { max-width: 50%; flex: 0 0 50%; }
    .cross-cta .container { flex-direction: column; align-items: flex-start; text-align: left; }
    .cross-cta__watermark { display: none; }

    /* Form */
    .wpcf7-form input[type="submit"] { width: 100%; }
    .wpcf7-form .wpcf7-list-item { margin-right: var(--sp-4); }
}

/* ==========================================================================
   25. BREAKPOINT: 1024PX / 1360PX / 1680PX (SCALING)
   ========================================================================== */
@media screen and (min-width:1360px){
    .hero-title { font-size: 2.75rem; }
    .stat-number { font-size: var(--fs-3xl); }
}

@media screen and (min-width:1680px){
    .section { padding: var(--sp-16) 0; }
    .hero { padding-top: calc(var(--header-h) + var(--sp-24)); padding-bottom: var(--sp-24); }
}