/* compale */
:root,
.editor-styles-wrapper {
/* 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);
}

.editor-styles-wrapper p:not(.news_title):not(.has-text-color):not([style*="color"]),
.editor-styles-wrapper p:not(.news_date):not(.has-text-color):not([style*="color"]) {
    color: var(--c-text);
}

/* =========================================================
  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: normal;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 15px !important;
}


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

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


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


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

/* 下層ヘッダー */
.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: 1.2rem;
        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-primary);
        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;
    }
}


/* ============================================================
  Animation Settings (Scroll Action)
============================================================ */

/* 1. 実際のサイト表示時のみ初期状態を隠す */
/* bodyに .is-anim-ready 等がついている場合のみ、または管理画面を除外 */
body:not(.block-editor-page):not(.wp-admin) [class*="u-anim-"] {
    opacity: 0;
    transition: 
        opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
        transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0s;
    pointer-events: none; /* 消えている間はクリックできないようにする */
}

/* 2. 各アニメーションの初期配置 */
body:not(.block-editor-page):not(.wp-admin) .u-anim-fade-up {
    transform: translateY(30px);
}

body:not(.block-editor-page):not(.wp-admin) .u-anim-slide-left {
    transform: translateX(-40px);
}

/* 3. 表示状態（クラス .is-show が付与された時） */
body [class*="u-anim-"].is-show {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* 4. 自動時間差（スタッガー）の設定 */
body:not(.block-editor-page):not(.wp-admin) .u-anim-fade-up:nth-child(2) { transition-delay: 0.2s; }
body:not(.block-editor-page):not(.wp-admin) .u-anim-fade-up:nth-child(3) { transition-delay: 0.4s; }

/* 5. 【重要】編集画面（Gutenberg）では強制的に全て表示する */
.block-editor-block-list__layout [class*="u-anim-"],
.editor-styles-wrapper [class*="u-anim-"],
.block-editor-page [class*="u-anim-"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
}

/* ============================================================
  MV Text Split Animation (White & Orange)
============================================================ */

/* 文字のコンテナ（はみ出た文字を隠す） */
.js-split {
    overflow: hidden; 
    color: var(--c-text); /* ★ 基本の文字色は「白」 */
}

/* ★ span タグの中（「彩り」など）は「オレンジ」 */
.js-split span {
    color: var(--c-primary); /* コンパル様のロゴオレンジ */
}

/* 各文字の初期状態 */
.js-split .char {
    display: inline-block; /* transformを効かせるために必須 */
    transform: translateY(110%); /* 文字の高さ分、下に隠す */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    /* 親のcolor（白）を継承させる */
    color: inherit; 
}

/* ★ span 内の .char は、親のオレンジを継承させる */
.js-split span .char {
    color: inherit;
}

/* 表示された時 */
.js-split.is-show .char {
    transform: translateY(0);
}

/* --- 1文字ずつの遅延設定（コピー＆ペースト） --- */
.js-split.is-show .char:nth-child(1) { transition-delay: 0.05s; }
.js-split.is-show .char:nth-child(2) { transition-delay: 0.10s; }
.js-split.is-show .char:nth-child(3) { transition-delay: 0.15s; }
.js-split.is-show .char:nth-child(4) { transition-delay: 0.20s; }
.js-split.is-show .char:nth-child(5) { transition-delay: 0.25s; }
.js-split.is-show .char:nth-child(6) { transition-delay: 0.30s; }
.js-split.is-show .char:nth-child(7) { transition-delay: 0.35s; }
.js-split.is-show .char:nth-child(8) { transition-delay: 0.40s; }
.js-split.is-show .char:nth-child(9) { transition-delay: 0.45s; }
.js-split.is-show .char:nth-child(10) { transition-delay: 0.50s; }
.js-split.is-show .char:nth-child(11) { transition-delay: 0.55s; }
.js-split.is-show .char:nth-child(12) { transition-delay: 0.60s; }
.js-split.is-show .char:nth-child(13) { transition-delay: 0.65s; }
.js-split.is-show .char:nth-child(14) { transition-delay: 0.70s; }
.js-split.is-show .char:nth-child(15) { transition-delay: 0.75s; }





/* =========================================================
  compale_style
========================================================= */
.l-content {
    z-index: 5;
}

#main_content {
    min-height: 800px;
}

.p-drawer {
    z-index: 10;
    height: auto;
}

h2 {
    font-size: var(--fz-h2);
}

h3 {
    font-size: var(--fz-h3);
}

/* カプセル型アウトラインボタンの基本スタイル */
.wp-block-button.c-btn-outline .wp-block-button__link {
    background-color: var(--c-bg) !important;
    color: var(--c-primary) !important;
    border: 1px solid #ff8000;
    border-radius: 50px;
    padding: 10px 30px;
    display: flex;
    justify-content: center;
    position: relative;
    transition: all 0.3s;
    font-weight: bold;
    margin-top: 30px;
}

/* ホバー時の挙動（お好みで） */
.wp-block-button.c-btn-outline .wp-block-button__link:hover {
    background-color: var(--c-primary) !important;
    color: var(--c-bg) !important;
    opacity: 1;
}

/* 右側のアイコン（疑似要素）を再現する場合 */
.wp-block-button.c-btn-outline .wp-block-button__link::after {
    content: "\f0a9";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 50px;
    color: var(--c-primary);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

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

/* navigation */
.c-gnav__li.menu-item-20 > .c-gnav__a {
    background-color: var(--c-primary);
    color: var(--c-bg);
    border-radius: 50px;
    margin-left: 1em;
    padding: 7px 15px !important;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    transition: opacity 0.3s;
}

/* ホバー時の挙動 */
.c-gnav__li.menu-item-20 > .c-gnav__a:hover {
    opacity: 0.8;
    color: #fff;
}

/* 電話アイコン（正円）の装飾 */
.c-gnav__li.menu-item-123 > .c-gnav__a {
    background-color: var(--c-primary);
    color: var(--c-bg);

    width: 30px;
    height: 30px !important;
    border-radius: 50%;
    padding: 0 !important;
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    margin-top: auto;
    margin-bottom: auto;
    transition: opacity 0.3s;
}

/* アイコン自体のサイズ調整（必要であれば） */
.c-gnav__li.menu-item-123 .fa-phone-flip {
    font-size: 15px;
}

/* ホバー設定 */
.c-gnav__li.menu-item-123 > .c-gnav__a:hover {
    opacity: 0.8;
    color: var(--c-bg);
}

/* 会社概要テーブル */
.compale_table table{
    width: 100%;
    border-collapse: collapse;
  }
  
  .compale_table th,
  .compale_table td{
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-bg-soft);
    vertical-align: top;
    font-size: 0.95rem;
  }
  
  .compale_table th{
    width: 25%;
    background: var(--c-bg-soft); /* muted */
    font-weight: 600;
  }
  
  .compale_table table,
  .compale_table th,
  .compale_table td{
    border: none;
  }
  
  .compale_table th {
      border-bottom: 3px solid var(--c-bg);
  }
  
  /* SP：縦積み */
  @media (max-width: 640px){
    .compale_table tr{
      display: block;
      margin-bottom: 12px;
    }
    .compale_table th,
    .compale_table td{
      display: block;
      width: 100%;
    }
    .compale_table th{
      border-bottom: none;
      padding-bottom: 6px;
    }
  }
  
  


/* =========================================================
  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;
}

.title_en {
    color: var(--c-primary);
    font-weight: bold;
    letter-spacing: 0.33em;
    line-height: 1.6;
}

.top_h1 {
    font-size: 18px;
    font-weight: 700;
}

h1.line_org1,
h2.line_org1,
h3.line_org1 {
    position: relative;
    padding-bottom: 26px;
    margin-bottom: 26px !important;
}

h1.line_org1::after,
h2.line_org1::after,
h3.line_org1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 2px;
    background-color: var(--c-primary);
}

h1.line_org1_center,
h2.line_org1_center,
h3.line_org1_center {
    position: relative;
    padding-bottom: 26px;
    margin-bottom: 26px !important;
}

h1.line_org1_center::after,
h2.line_org1_center::after,
h3.line_org1_center::after {
    content: "";
    position: absolute;
    left: calc(50% - 30px);
    bottom: 0;
    width: 60px;
    height: 2px;
    background-color: var(--c-primary);
}

.c-gifts_wrap {
    background-color: var(--c-bg-soft);
    background-image: radial-gradient(#DFDFDF 15%, transparent 15%);
    background-size: 7px 7px;
    background-repeat: repeat;
}

.c-gifts_inner {
    max-width: 1200px !important;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 60px;
    padding-left: var(--ark-padding--container);
    padding-right: var(--ark-padding--container);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.c-gifts_wrap.color2 {
    background-color: var(--c-bg-warm) !important;
}

@media (min-width: 1200px) {
    .c-gifts_inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

i.fa-solid.fa-gift {
    color: var(--c-primary);
    text-align: center;
    font-size: 25px;
}

i.fa-solid.fa-1 {
    color: var(--c-primary);
    font-size: calc(var(--fz-h3) * 1.5);
    margin-right: 20px;
}


.c-gifts_inner.wp-block-group p:not(:first-child),
.c-gifts_inner.wp-block-group h2:not(:first-child) {
    margin-top: 20px;
    margin-bottom: 30px;
}

.c-gifts_cont {
    background-color: var(--c-bg);
    box-shadow: var(--shadow1);
    padding-left: var(--ark-padding--container);
    padding-right: var(--ark-padding--container);
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 10px;

    position: relative;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.c-gifts_cont a.full-stack-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

.c-gifts_cont:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--c-primary);
}

.c-gifts_cont:hover svg {
    transform: translateX(10px);
}

.c-gifts_cont svg {
    display: block;
    align-self: flex-start;
    margin-left: 0;
    transition: transform 0.3s ease;
}

i.fa-solid.fa-arrow-right{
    color: var(--c-primary);
    text-align: center;
    font-size: 25px;
}




/* --- news --- */
.news_wrap {
    background-color: var(--c-bg-warm);
}

.news_inner>div>div {
    max-width: 1200px !important;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 30px;
    padding-left: var(--ark-padding--container);
    padding-right: var(--ark-padding--container);

    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 350px;
}

@media (min-width: 1200px) {
    .neews_inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 871px) {
    .news_inner>div>div {
        padding-top: 30px;
        height: auto;
    }
}

.news_left {
    display: flex;
    flex-direction: column;
}

.news_inner h2 {
    margin-top: 10px !important;
}

.news_sns {
    margin-top: 60px !important;
}

.news_sns figure img {
    width: 35px;
}

.news_right {
    max-height: 250px;
    overflow-y: scroll;
}


/* --- news list --- */
.p-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p-news-list__item {
    display: flex;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--c-border);
}

/* 最後の線の処理（デザインに合わせて調整） */
.p-news-list__item:last-child {
    border-bottom: none;
}

/* 日付 */
.p-news-list__date {
    font-size: var(--fz-sm);
    color: var(--c-text-muted);
    width: 100px;
    flex-shrink: 0;
}

/* カテゴリーラベル（ベージュ背景） */
.p-news-list__cat {
    background-color: var(--c-bg-soft);
    color: var(--c-text-muted);
    font-size: var(--fz-xs);
    padding: 0.3em 1em;
    border-radius: 20px;
    margin-right: 1.5rem;
    white-space: nowrap;
}

/* タイトル */
.p-news-list__title {
    font-size: var(--fz-body);
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    line-height: 1.6;
}

.p-news-list__title:hover {
    color: var(--c-primary);
    text-decoration: underline;
}

/* スマホ閲覧時の折り返し対応 */
@media (max-width: 767px) {
    .p-news-list__item {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .p-news-list__title {
        width: 100%; /* タイトルを改行して下に落とす */
    }
}


/* CTAセクション全体の外枠 */
.cta_wrap {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 50px 30px;
    background-color: var(--c-primary);
    color: var(--c-bg);
    border-radius: 8px;
    overflow: hidden;
    z-index: 5;
}

/* 背景画像のみを透過させるための疑似要素 */
.cta_wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* style.cssから見た相対パス */
    background-image: url("../images/noshi.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

/* --- 以下、コンテンツの装飾（変更なし） --- */

.cta_wrap .wp-block-heading {
    color: #fff;
    font-size: clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    margin-bottom: 0;
    border: none;
}

.cta_wrap .wp-block-heading::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: #fff;
    margin: 15px auto 30px;
}

.cta_wrap p {
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    position: relative;
}

.cta_wrap .wp-block-columns {
    gap: 2em;
    position: relative;
}

.cta_wrap .wp-block-button {
    margin: 0 auto;
    width: 320px;
    height: 60px;
}

.cta_wrap .wp-block-button a {
    border-radius: 50px !important;
}

.cta_wrap .wp-block-button__link {
    background-color: #fff !important;
    color: #FD7E00 !important;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.cta_wrap .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    opacity: 1;
}

/* アイコン付与 */
.cta_wrap .wp-block-column:first-child .wp-block-button__link::before {
    content: "\f095";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 10px;
}

.cta_wrap .wp-block-column:last-child .wp-block-button__link::before {
    content: "\f0e0";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 400;
    margin-right: 10px;
}

@media (max-width: 781px) {
    .cta_wrap {
        padding: 40px 20px;
    }
    .cta_wrap .wp-block-columns {
        gap: 40px;
    }
}


/* footer */
.l-footer {
    position: relative;
    z-index: 1;
}

.l-footer__inner {
    background-color: #F5F5F5;
    padding-top: 100px;
    margin-top: -100px;
    position: relative;
    z-index: 1;
}

.footer_left .ft_name {
    font-size: var(--fz-h3);
    font-weight: 700;
}

.footer_left>div>p:not(:first-child) {
    margin-top: 8px;
}

.single-post .l-footer__inner {
    margin-top: 30px;
    padding-top: 30px;
}

/* =========================================================
  single-page
========================================================= */

body:not(.home) h1 {
    font-size: var(--fz-h2);
    font-weight: bold;
}

.cont_bg_white {
    background-color: var(--c-bg);
    border-radius: 10px;
    padding: var(--ark-pad--container);
    position: relative;
}

i.fa-solid.fa-file-signature,
i.fa-solid.fa-list-check {
    font-size: 3em;
}

.point_style {
    position: absolute;
    top: -10px;
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
    background: var(--c-primary);
    border-radius: 25px;
    padding: 0px 20px;
    display: block;
    width: calc(100% - (var(--ark-pad--container) * 2));
}

.point_style span {
    font-size: var(--fz-14-16);
}

.l-main .cont_bg_white h3 {
    margin-top: 0;
}

@media (max-width: 741px) {
    .l-main .cont_bg_white h3 {
        margin-top: 30px;
    }
}

/* shaddy */

.shaddy1_wrap {
    background-color: var(--c-bg-warm);
    padding-top: 60px;
    padding-bottom: 80px;
}

.shaddy1_inner>div>div {
    max-width: 1200px !important;
    margin: 0 auto;
    padding-bottom: 10px;
    padding-left: var(--ark-padding--container);
    padding-right: var(--ark-padding--container);

    display: flex;
    flex-direction: row;
    justify-content: center;
}

@media (min-width: 1200px) {
    .shaddy1_inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 871px) {
    .shaddy1_inner>div>div {
        padding-top: 30px;
        height: auto;
    }
}

.scene_col>div {
    background: var(--c-bg);
    box-shadow: var(--shadow1);
    border: 1px solid oklch(0.73 0.19 52.58 / 0.4);
    border-radius: 10px;
}

.scene_col>div figure>img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.l-main .scene_text {
    padding: 1em;
    margin-top: 0;
}

.l-main .scene_text div p {
    margin-top: 1em;
}


.shaddy2_wrap {
    background-color: var(--c-bg-soft);
    padding-top: 60px;
    padding-bottom: 50px;
}

.shaddy2_inner>div>div {
    max-width: 1200px !important;
    margin: 0 auto;
    padding-bottom: 10px;
    padding-left: var(--ark-padding--container);
    padding-right: var(--ark-padding--container);
}

@media (min-width: 1200px) {
    .shaddy2_inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 871px) {
    .shaddy2_inner>div>div {
        padding-top: 30px;
        height: auto;
    }
}

/* カタログ全体のラップ要素 */
.l-content .e-catalog-wrap {
    display: flex !important; /* 強制的にflexを適用 */
    flex-wrap: wrap !important; /* 既存のnowrapを上書き */
    gap: 16px; 
    justify-content: center;
}

/* 各カタログアイテムの基本設定（スマホ2カラム） */
.e-catalog-gp {
    flex: 0 0 calc(50% - 8px); /* 50%幅からgapの半分を引く */
    max-width: 280px; /* PCでの広がりすぎ防止 */
    text-align: center;
    box-sizing: border-box;
}

.l-content .e-catalog-gp {
    margin-bottom: 40px;
}

/* 画像のサイズ調整 */
.e-catalog-gp .wp-block-image {
    margin-bottom: 8px;
}

/* テキストとボタンの微調整 */
.e-catalog-gp p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4;
}

/* ボタンのスタイル調整 */
.e-catalog-btn {
    font-size: 13px;
    margin-top: auto; /* 下揃えにする場合 */
}

.l-content .e-catalog-gp .e-catalog-btn .wp-block-button__link {
    padding: 8px 12px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}


/* PCサイズ（タブレット以上）の調整 */
@media (min-width: 871px) {
    .l-content .e-catalog-wrap {
        flex-wrap: nowrap !important; /* PCでは1行に収める */
        gap: 20px;
    }
    
    .e-catalog-gp {
        flex: 1; /* 均等幅 */
        width: auto;
    }
}

/* 極小画面（スマホ縦持ち）で1カラムにしたい場合 */
@media (max-width: 375px) {
    .e-catalog-gp {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* faq */
/* FAQ全体のコンテナ */
.faq_wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 2em 1em;
}

/* アコーディオンの各アイテム設定 */
.faq_acd .wp-block-accordion-item {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.4s ease;
}

/* 開いている時の外枠色（アクセントカラー） */
.faq_acd .wp-block-accordion-item.is-open {
    border-color: var(--c-primary);
}

/* 質問部分（ボタン）のスタイル */
.faq_acd .wp-block-accordion-heading__toggle {
    padding: 20px;
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #333;
    text-decoration: none !important; /* 下線を強制削除 */
    box-shadow: none !important;
}

/* 質問の頭に「Q.」を添える */
.faq_acd .wp-block-accordion-heading__toggle-title {
    text-decoration: none !important;
    display: flex;
    align-items: center;
}

.faq_acd .wp-block-accordion-heading__toggle-title::before {
    content: "Q";
    color: var(--c-primary);
    margin-right: 12px;
    font-size: 1.2em;
}

/* アイコン（＋マーク）の回転アニメーション */
.faq_acd .wp-block-accordion-heading__toggle-icon {
    font-size: 1.5rem;
    color: var(--c-primary);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq_acd .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    transform: rotate(45deg);
}

/* --- スムーズな開閉アニメーションの実装 --- */

/* パネル（回答部分）の初期状態 */
.faq_acd .wp-block-accordion-panel {
    display: grid !important; /* Arkheのhidden制御を上書き */
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none;
}

/* 開いた時の状態 */
.faq_acd .wp-block-accordion-item.is-open .wp-block-accordion-panel {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-top: 10px !important;
    padding-bottom: 25px !important;
}

/* 中身がはみ出さないための処理 */
.faq_acd .wp-block-accordion-panel > * {
    overflow: hidden;
    text-decoration: none !important;
}

/* 回答のテキストスタイル（A. を添える） */
.faq_acd .wp-block-accordion-panel p {
    margin: 0;
    padding: 0 25px;
    color: #555;
    line-height: 1.8;
}

.faq_acd .wp-block-accordion-panel p::before {
    content: "A";
    font-weight: bold;
    color: #333;
    margin-right: 12px;
}

/* FAQ内の全ての要素の下線を一括削除 */
.faq_wrap *,
.faq_acd * {
    text-decoration: none !important;
}

/* form */
.mail_form {
    max-width: 920px;
    margin: 20px auto;
}

.smf-form--business .smf-item__col {
    padding: 0.5em;
}

.smf-form .smf-text-control__control {
    padding: 0.3em;
}

.mail_form button {
    border-radius: 5px !important;
    font-size: 15px !important;
}

.smf-complete-content {
    background: var(--c-l-pink);
    padding: 2em;
    border: 3px solid var(--c-blue);
}



/* カプセル型アウトラインボタンの基本スタイル */
.wp-block-button.btn-tel,
.wp-block-button.btn-fax {
    width: 100%;
    margin: 0 auto;
    font-size: var(--fz-18-24);
}

.wp-block-button.btn-tel .wp-block-button__link {
    background-color: var(--c-bg) !important;
    color: var(--c-primary) !important;
    border: 1px solid var(--c-primary);
    border-radius: 50px;
    padding: 10px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s;
    font-weight: bold;
}

/* ホバー時の挙動（お好みで） */
.wp-block-button.btn-tel .wp-block-button__link:hover {
    background-color: var(--c-primary) !important;
    color: var(--c-bg) !important;
    opacity: 1;
}

/* 右側のアイコン（疑似要素）を再現する場合 */
.wp-block-button.btn-tel .wp-block-button__link::after {
    content: "\f2a0";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 50px;
    color: var(--c-primary);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-button.btn-fax .wp-block-button__link {
    background-color: var(--c-primary) !important;
    color: var(--c-bg);
    border-radius: 50px;
    padding: 10px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s;
    font-weight: bold;
}

/* 右側のアイコン（疑似要素）を再現する場合 */
.wp-block-button.btn-fax .wp-block-button__link::after {
    content: "\f1ac";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 50px;
    color: var(--c-bg);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 420px) {
    .wp-block-button.btn-fax .wp-block-button__link::after,
    .wp-block-button.btn-tel .wp-block-button__link::after {
        display: none;
}
}