/* compale */
:root{
/* Corporate tone: a bit tighter */
--ark-color--border--table: transparent !important;

/* --- Font Family --- */
--wp--preset--font-family--sans: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;

/* --- 1. マイクロテキスト（注釈・キャプション用） --- */
--fz-xs:  clamp(10px, 1vw, 12px);
--fz-sm:  clamp(12px, 1.2vw, 13px);
--fz-md:  clamp(13px, 1.5vw, 14px);

/* --- 2. 本文・標準テキスト --- */
--fz-body: clamp(15px, 1.2vw, 16px);
--fz-lead: clamp(16px, 1.5vw, 20px); /* h3 (20px) と共通化可能 */

/* --- 3. 見出し・タイトル（要件反映版） --- */
--fz-h3:   clamp(18px, 1.8vw, 20px); /* ご指定の20pxを最大値に */
--fz-h2:   clamp(24px, 3.2vw, 36px); /* ご指定の36pxを最大値に */
--fz-st-lg: clamp(20px, 2vw, 26px);

/* --- 4. MV・ヒーローセクション（要件反映版） --- */
--fz-mv-sub: clamp(20px, 2.5vw, 28px); /* ご指定の28pxを最大値に */
--fz-mv-main: clamp(36px, 7vw, 64px); /* ご指定の64pxを最大値に */

/* --- 5. 装飾用・特大サイズ --- */
--fz-ttl-lg: clamp(32px, 5vw, 56px);
--fz-display-sm: clamp(40px, 8vw, 80px);
--fz-display-md: clamp(60px, 12vw, 120px);
--fz-display-lg: clamp(80px, 18vw, 200px);

/* --- 6. 互換用ステップ --- */
--fz-14-16: var(--fz-body);
--fz-18-24: clamp(18px, 1.8vw, 24px);
--fz-20-36: var(--fz-h2);
--fz-30-48: clamp(30px, 7vw, 48px);

/* --- Brand Colors --- */
--c-primary: #FD7E00;           /* アクセントカラー：オレンジ */
--c-primary-dark: #e57200;      /* ホバー時などの暗めオレンジ */

/* --- Neutral Colors --- */
--c-text: #000000;              /* テキストカラー：黒 */
--c-text-muted: #666666;        /* 補足テキスト用 */
--c-border: #e9e9e9;            /* 標準的な境界線 */

/* --- Background Colors --- */
--c-bg: #FFFFFF;                /* 基本背景色 */
--c-bg-soft: #FAF7F2;           /* 背景色2：薄いベージュ（セクション等） */
--c-bg-warm: #FFF9F0;           /* 背景色3：より温かいベージュ */
--c-bg-footer: #FFF9F0;         /* フッター背景（背景色3と共通） */

/* --- Layout Elements --- */
--c-header-bg: rgba(255, 255, 255, 0.9);
--c-cta-orange: #FD7E00;        /* お問い合わせボタン等 */
--c-cta-white: #FFFFFF;         /* CTA内の白背景パーツ */


--c-grad: linear-gradient(to left, #3bab9d, #64c76b);
--c-blue: #3773B1;
--c-l-blue: #DDE5FF;
--c-ghost: #f7f7f7;
--c-ghost-border: rgba(255, 255, 255, .7);

--shadow1: 2px 2px 4px rgba(222, 222, 222, 1);
--shadow2: 0 2px 0 rgb(255 255 255);
--shadow3: 0 2px 3px rgba(0, 0, 0, 0.14);
}

/* =========================================================
  common_style
========================================================= */
body {
    font-family: var(--wp--preset--font-family--sans);
}

.font-mincho {
    font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

a {
    text-decoration: none;
    color: var(--c-linktext);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background-color: var(--c-blue);
    border-radius: 4px;
}

h1, h2, h3 {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
h1 {
    font-size: var(--fz-14-16);
    font-weight: normal;
}

.width1000 {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

.line-height24 {
    line-height: 2.4;
}

@media (min-width: 1000px) {
    /* 右側エリアを縦並び（2段）にする */
    .l-header__right {
        display: flex;
        flex-direction: column-reverse; 
        align-items: flex-end; /* 右寄せ */
        justify-content: center;
        gap: 5px; /* 上段と下段の間の余白 */
        margin-top: 10px;
    }

    /* 上段（TEL・Contact）のスタイル */
    .header-top-info {
        display: flex;
        align-items: center;
        gap: 15px; /* TELとContactの間の余白 */
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 0;
    }

    /* Contactボタンを装飾する場合 */
    .header-contact-btn {
        background: var(--c-pink);
        color: var(--c-bg);
        padding: 10px 12px;
        border-radius: 4px;
        text-decoration: none;
        margin-left: 10px;
    }

    /* 下段（グローバルナビ）の余白をリセット */
    .p-gnav {
        margin: 0 !important;
    }

    .c-gnav__li, .c-gnav__li>.c-gnav__a {
        align-content: center;
    }
}

/* ナビゲーション自体の幅を調整 */
.l-header {
    box-shadow: var(--shadow3);        
}

.c-gnav {
    width: 100%;
}

h1.l-header__logo {
    margin-bottom: 0;
}

.c-gnav__li > .c-gnav__a {
    font-weight: 700;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 15px !important;
}


.c-gnav .sub-menu {
    background-color: var(--c-blue);
}

.c-gnav__li.-current, .c-gnav__li.focus, .c-gnav__li:hover {
    color: var(--c-blue);
}


.c-gnav__depth1:before {
    background-color: var(--c-blue);
}


/* スマホナビ */
.p-drawer {
    background-color: var(--c-blue);
}

/* 下層ヘッダー */
.p-topArea {
    min-height: 20vh;
}

.p-topArea.-noimg {
    background: #555;
    background: url(../images/bg_h1.webp) center center no-repeat;
    background-size: cover;
}

.p-topArea.c-filterLayer::before {
    background-color: unset;
}

.c-filterLayer.-filter-dot:after {
    background-color: unset;
    background-image: none;
}

.p-topArea__title.c-pageTitle {
    color: var(--c-text);
}

h1.c-pageTitle__main {
    font-weight: 700;
    font-size: var(--fz-hero);
    margin-bottom: 0;
    text-shadow: var(--shadow2);
}

/* 下層パンくず */
.p-breadcrumb__list.l-container {
    max-width: var(--ark-width--container);
    padding: 0;
}

.p-breadcrumb__list {
    justify-content: flex-end;
}

/* フッターCTA */
/* PCでは非表示 */
.p-mobile-nav {
    display: none;
}

/* スマホ表示の設定 */
@media screen and (max-width: 767px) {
    .p-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        z-index: 9999;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }

    .p-mobile-nav__item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
    }

    /* 電話ボタンの色 */
    .p-mobile-nav__item.-tel {
        background-color: var(--c-bg);
        color: var(--c-text);
        font-size: var(--fz-20-36);
        font-family: "Times New Roman", "Noto Serif JP", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    }

    /* お問い合わせボタンの色 */
    .p-mobile-nav__item.-mail {
        background-color: var(--c-blue);
        color: #fff;
    }

    .p-mobile-nav__item .fa-phone {
        font-size: var(--fz-16-20);
    }

    .l-footer {
        margin-bottom: 80px;
    }
}

@media (min-width: 1000px) {
    [data-sidebar=on] .l-content__body {
        flex-direction: row-reverse;
    }
}

/* =========================================================
  compale_style
========================================================= */

.l-header__center {
    padding: 6px 0;
}

/* =========================================================
  index.html
========================================================= */

.wp-block-cover, .wp-block-cover-image {
    min-height: 640px;
}

:root {
    --c-text-outline: #FFFFFF;
    --w-text-outline: 1px;
  }
  

.mv_text_l,
.mv_text_sub
 {
/* mv_text　境界線 */
text-shadow: 
    var(--w-text-outline) var(--w-text-outline) 0 var(--c-text-outline),
    calc(var(--w-text-outline) * -1) var(--w-text-outline) 0 var(--c-text-outline),
    var(--w-text-outline) calc(var(--w-text-outline) * -1) 0 var(--c-text-outline),
    calc(var(--w-text-outline) * -1) calc(var(--w-text-outline) * -1) 0 var(--c-text-outline),
    0 var(--w-text-outline) 0 var(--c-text-outline),
    0 calc(var(--w-text-outline) * -1) 0 var(--c-text-outline),
    var(--w-text-outline) 0 0 var(--c-text-outline),
    calc(var(--w-text-outline) * -1) 0 0 var(--c-text-outline);
}

.mv_text_l {
    font-size: var(--fz-mv-main);
    line-height: 1.28;
    letter-spacing: 0.006em;
    font-weight: 900;
}

.mv_text_l span {
    color: var(--c-primary);
}

.mv_text_sub {
    font-size: var(--fz-mv-sub);
    font-weight: 900;
}