/* === 全体スタイル === */
body {
    font-family: 'DM Sans', Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #333;
}
html {
    scroll-behavior: smooth;
}
/* ページ内リンクの基本の余白を設定 */
[id] {
    scroll-margin-top: 80px;
}

/* === ヘッダー === */
header {
    background-color: #0f3f6f;
    color: #fff;
    padding: 0 20px;             /* 上下は0、左右のみ */
    display: flex;
    justify-content: space-between;
    align-items: center;         /* 子要素を縦中央に */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 70px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
}

.hamburger-menu {
    display: none;
}

/* === ロゴ（画像＋テキスト） === */
/* a 直下で確実に横並び＆縦中央 */
.header-left a {
    display: inline-flex;
    align-items: center;       /* 画像と文字をど真ん中に */
    text-decoration: none;
}

/* ロゴ画像：ヘッダー高さ70pxに収まるサイズ */
.header-left img.logo {
    height: 40px;              /* 40〜48pxで微調整可 */
    width: auto;
    margin: 0;
    display: block;            /* baseline影響を避ける */
}

/* ロゴ横の文字 */
.header-left .logo-text {
    margin-left: 6px;
    font-family: Baskerville, "Baskerville Old Face", Garamond, "Times New Roman", serif;
    font-weight: 700;
    font-size: 26px;           /* 28〜32pxで微調整可 */
    line-height: 1;            /* 上下の余白を排除してズレ防止 */
    color: #fff;
    display: inline-block;
    letter-spacing: 0.05em; /* ← 文字間を少し広げる（0.05〜0.1emで調整可） */
}

/* === PC版ナビゲーション === */
.global-nav-wrapper {
    display: flex;
    align-items: center;
    margin-left: auto;
    text-align: left;
}

.global-nav-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.global-nav-wrapper li {
    margin-left: 30px;
}

.global-nav-wrapper li.has-dropdown {
    position: relative;
}

.global-nav-wrapper ul li:first-child a {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
}
.global-nav-wrapper ul li:first-child img {
    display: block;
    height: 20px;
}

.global-nav-wrapper a {
    color: #fff;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.global-nav-wrapper a span {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
    transition: transform 0.3s ease-out;
}

.global-nav-wrapper a span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}
.global-nav-wrapper a:hover span::after {
    transform: scaleX(1);
}

/* インスタロゴ用の下線 */
.global-nav-wrapper ul li:first-child a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}
.global-nav-wrapper ul li:first-child a:hover::after {
    transform: scaleX(1);
}

.global-nav-wrapper a:hover span {
    transform: translateY(-3px);
}
.global-nav-wrapper li.contact-button {
    display: flex;
    align-items: center;
}

/* === PC版プルダウンメニュー (ヘッダー・フッター共通) === */
.dropdown-menu {
    display: none; /* ホバーで表示 */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;   /* 最長項目に合わせる */
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 10;
    list-style: none;
    padding: 0 !important; /* 背景BOXの余白は0 */
    margin: 0;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-sizing: border-box;
}

.dropdown-menu li {
    margin: 0;
    width: 100%;
}

.dropdown-menu a {
    color: #fff;
    padding: 8px 25px;  /* 各リンクの内側余白 */
    text-decoration: none;
    display: block;
    white-space: nowrap;
    transition: color 0.3s ease, background-color 0.3s ease;
    font-size: 0.9em;
    text-align: center;
    border-radius: 5px;
}

.dropdown-menu a::after { /* プルダウン内リンクの下線はなし */
    display: none !important;
}

.dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fCDF8A;
}


/* === CONTACTボタン (新方式) === */

/* ボタン本体 (aタグ) のスタイル */
.global-nav-wrapper li.contact-button a {

    color: #0f3f6f;
    background-color: #fff;
    border-radius: 50px;
    padding: 0.8em 1.5em;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: color 0.4s ease-out;
}

/* 他のメニュー項目にある下線やホバーエフェクトを無効化 */
.global-nav-wrapper li.contact-button a::after {
    display: none;
}

/* アニメーションの主役：グラデーションの背景レイヤー */
.global-nav-wrapper li.contact-button a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #fCDF8A, #F38381);
    z-index: -1;

    /* 初期状態：中央で幅を0にして隠しておく */
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

/* ホバー時のスタイル */
.global-nav-wrapper li.contact-button a:hover {
    color: #fff;
    transform: none;
}

/* ホバー時にグラデーションをスライドインさせる */
.global-nav-wrapper li.contact-button a:hover::before {
    /* 幅を100%に戻して表示させる */
    transform: scaleX(1);
}
/* === メインコンテンツ (変更なし) === */
main { padding-top: 70px; }
.hero { background-image: url('images/toppage.jpg'); background-size: cover; background-position: center; height: 900px; display: flex; align-items: flex-start; justify-content: flex-start; padding-top: 170px; box-sizing: border-box; padding-left: max(15%, 10px); position: relative; }
.hero-content { 
    color: #08315b; 
    max-width: 600px; 
    width: 100%; 
    box-sizing: border-box; }
.hero-content h1 { 
    font-size: 54px; 
    line-height: 1.2; 
    margin-bottom: 20px; 
    word-break: break-word; }
.hero-content p { 
    font-size: 1.1em; 
    line-height: 1.6; 
    margin-bottom: 30px; 
    word-break: break-word; }
/* === ヒーローセクションの「VIEW MORE」ボタン関連スタイル === */

/* ボタンの基本スタイル */
.arrow-button {
    display: inline-flex;
    align-items: center;
    background-color: transparent; /* ボタン自体の背景は透明です */
    color: #0f3f6f;
    border: 2px solid #0f3f6f;
    border-radius: 50px;   /* ★ボタンの丸い形を定義します */
    padding: 10px 20px;    /* ★ボタンの内側の余白（文字と枠線の間） */
    text-decoration: none;
    /* ★変更：グラデーションをスムーズに見せるため、background関連のtransitionは削除 */
    transition: color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    position: relative;      /* ★追加：::before要素の基準位置となります */
    overflow: hidden;        /* ★追加：::beforeが角丸からはみ出ないようにします */
}

/* ボタン内の文字(span)とSVGアイコンが手前に来るように */
.arrow-button span,
.arrow-button svg {
    position: relative; /* z-indexを有効にするため */
    z-index: 1;         /* ::before要素よりも手前に表示されるように */
}

/* ヒーローボタン内のSVGのスタイル */
.hero .arrow-button svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease-in-out; /* 元のスタイルを維持 */
}

/* ホバー時のグラデーション背景用の::before要素（ヒーローボタン専用）*/
.hero .arrow-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #fCDF8A, #F38381);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;                     /* ★初期状態では透明 */
    transition: opacity 0.3s ease;  /* ★透明度をスムーズにアニメーションさせます */
    z-index: 0;                     /* ★文字(span)やSVG(z-index:1)よりも後ろ（下）に配置 */
    border-radius: inherit;         /* ★親要素（.arrow-button）の角丸設定を継承します */
}

/* ヒーローボタンのホバー時のスタイル */
.hero .arrow-button:hover {
    color: white;                 /* 文字色を白に */
    border-color: transparent;    /* ★元の枠線を透明にして、::beforeの背景を見せます */
    transform: translateX(5px);   /* 元の右に動くアニメーション */
    /* background: linear-gradient(...); ← ★ボタン本体のホバー時の背景指定は削除 */
}

/* ヒーローボタンのホバー時に::before要素を表示 */
.hero .arrow-button:hover::before {
    opacity: 1; /* ★ホバー時にグラデーション背景を表示 */
}

/* ヒーローボタン内のSVGのホバー時の動き */
.hero .arrow-button:hover svg {
    transform: translateX(5px); /* 元のスタイルを維持 */
}
.hero .arrow-button:hover svg { transform: translateX(5px); }
.arrow-button:active { transform: scale(0.95); }
.service-section { background-color: #0f3f6f; padding: 80px 0; color: #fff; }
.service-container { max-width: 960px; width: 95%; margin: 0 auto; }
.service-section h2 { font-size: 3.5em; text-align: left; margin-bottom: 60px; }
.service-item { margin-bottom: 80px; }
.service-item:last-child { margin-bottom: 0; }
.image-wrapper { width: 100%; height: auto; margin-bottom: 20px; }
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.text-wrapper { text-align: left; }
.text-wrapper h3 { font-size: 2em; margin-bottom: 10px; }
.text-wrapper p { line-height: 1.6; margin-bottom: 20px; font-size: 1em; margin-top: -10px; }
.service-section .service-arrow-button { position: relative; display: inline-flex; align-items: center; background-color: transparent; color: #fff; border: 2px solid #fff; border-radius: 50px; padding: 10px 20px; text-decoration: none; transition: transform 0.3s ease; overflow: hidden; }
.service-section .service-arrow-button svg { width: 24px; height: 24px; fill: currentColor; margin-left: 10px; transition: transform 0.3s ease-in-out; position: relative; z-index: 1; }
.service-section .service-arrow-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #fCDF8A, #F38381); opacity: 0; transition: opacity 0.3s ease; z-index: 0; }
.service-section .service-arrow-button:hover::before { opacity: 1; }
.service-section .service-arrow-button:hover { border-color: transparent; transform: translateX(5px); }
.service-section .service-arrow-button:hover svg { transform: translateX(10px); }
.service-section .service-arrow-button:active { transform: scale(0.95); }
.service-section .service-arrow-button span { position: relative; z-index: 2; }
.recruit-section { background-color: #f8f8f8; padding: 80px 0; color: #08315b; }
.recruit-container { max-width: 960px; width: 95%; margin: 0 auto; }
.recruit-section h2 { font-size: 3.5em; color: #0f3f6f; margin-bottom: 40px; text-align: left; }
.recruit-item .image-wrapper { margin-bottom: 50px; }
.recruit-item .text-wrapper p { line-height: 1.6; margin-bottom: 20px; font-size: 1em; }
.recruit-item .button-container { margin-top: 30px; }
.recruit-section .recruit-arrow-button { position: relative; display: inline-flex; align-items: center; background-color: transparent; color: #0f3f6f; border: 2px solid #0f3f6f; border-radius: 50px; padding: 10px 20px; text-decoration: none; transition: transform 0.3s ease; overflow: hidden; z-index: 1; }
.recruit-section .recruit-arrow-button span { position: relative; z-index: 2; }
.recruit-section .recruit-arrow-button svg { width: 24px; height: 24px; fill: currentColor; margin-left: 10px; transition: transform 0.3s ease-in-out; position: relative; z-index: 2; }
.recruit-section .recruit-arrow-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #fCDF8A, #F38381); opacity: 0; transition: opacity 0.3s ease; z-index: 0; }
.recruit-section .recruit-arrow-button:hover { color: #fff; border-color: transparent; transform: translateX(5px); }
.recruit-section .recruit-arrow-button:hover::before { opacity: 1; }
.recruit-section .recruit-arrow-button:active { transform: scale(0.95); }
.contact-section { background-color: #fff; padding: 120px 0; text-align: center; transition: background-color 0.3s ease; }
.contact-section:hover { background-color: #f1efef; }
.contact-container { max-width: 960px; width: 95%; margin: 0 auto; }
.contact-section h2 { font-size: 4em; color: #0f3f6f; margin-bottom: 20px; }
.contact-section .contact-text { font-size: 1em; line-height: 1.6; margin-bottom: 60px; color: #777; }
.buttonNeumorphism { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; color: #222; background-color: #efefef; border-radius: 50%; box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgb(0 0 0 / 24%); text-decoration: none; transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out; }
.buttonNeumorphism:hover { box-shadow: -6px -6px 12px #fff, 6px 6px 12px rgb(0 0 0 / 24%); transform: scale(1.05); }
.buttonNeumorphism:active { box-shadow: inset -4px -4px 8px #fff, inset 4px 4px 8px rgb(0 0 0 / 24%); transform: scale(0.95); }
.fade-in-element { opacity: 0; transform: translateY(30px); transition: opacity 1.2s ease-out, transform 1.2s ease-out; }
.fade-in-element.animate { opacity: 1; transform: translateY(0); }


/* === フッター (PC表示用) === */
footer {
    background-color: #0f3f6f;
    color: #fff;
    padding: 40px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start; /* ロゴとナビを上端揃え */
    width: 100%;
    /* flex-direction: row; はデフォルトなので指定不要 */
}
.footer-left {
    /* PCでは特に指定せず、flexの子要素として自然な幅に */
}
.footer-left .footer-logo img { height: 120px; margin-bottom: 10px; }
.footer-left .footer-address { font-size: 0.8em; 
    line-height: 1.4; 
    margin-left: 20px; 
    white-space: nowrap; 
    text-align: left;
}

.footer-nav {
    margin-top: 20px;
    margin-left: auto;  /* ナビゲーションを中央に寄せる */
    margin-right: auto; /* ナビゲーションを中央に寄せる */
}
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    /* flex-direction: row; はデフォルトなので指定不要 */
}
.footer-nav li { margin: 0 15px; }
.footer-nav li.has-dropdown { position: relative; }
.footer-nav a { color: #fff; text-decoration: none; position: relative; padding-top: -10px; padding-bottom: -10px; display: block; }

.footer-nav a span {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
    transition: transform 0.3s ease-out;
}
.footer-nav a span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}
.footer-nav a:hover span::after { transform: scaleX(1); }


.footer-nav ul li.footer-instagram-item a {
    display: inline-block; /* 元のスタイルを維持、または適切なもの */
    position: relative;
    padding-bottom: 5px;   /* 下線とのスペース（元のスタイルを維持） */
}
.footer-nav ul li.footer-instagram-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}
.footer-nav ul li.footer-instagram-item a:hover::after {
    transform: scaleX(1);
}


.footer-nav .footer-instagram-icon { height: 20px; }

.footer-separator { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 30px 0 20px; width: 100%; max-width: 1400px; }
.copyright { font-size: 0.8em; width: 100%; text-align: center; }

/* thanks.htmlページ専用レイアウト */
body.page-thanks {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* ページの最小の高さを画面の高さ100%にする */
}

body.page-thanks main {
    flex-grow: 1; /* main要素が残りの空間をすべて埋めるように広がる */

    /* 以下3行で、mainの中のコンテンツを垂直・水平中央揃えにする */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 100px; /* この余白で表示位置を上に調整 */
}
/* === PC版プルダウン表示 (769px以上) === */
@media screen and (min-width: 769px) {
    .global-nav-wrapper li.has-dropdown:hover .dropdown-menu,
    .footer-nav li.has-dropdown:hover .dropdown-menu {
        display: block; /* PCではプルダウンをブロック表示 */
        opacity: 1;
        visibility: visible;
    }
}



/* === ★★★ これがスマホ・タブレット版の新しいスタイルです ★★★ === */
/* 既存の @media screen and (max-width: 768px) { ... } のブロック全体をこれで置き換えてください */

@media screen and (max-width: 768px) {
    /* --- 基本設定 --- */
    main { padding-top: 60px; }
    header { height: 60px; padding: 0 15px; }
    .header-left .logo { height: 70px; margin: 10px 0 0 -5px; }

    /* --- ハンバーガーメニューのアイコン --- */
    .hamburger-menu { display: block; width: 30px; height: 21px; cursor: pointer; z-index: 101; position: relative; }
    .hamburger-menu .bar { width: 100%; height: 3px; background-color: #fff; transition: 0.3s ease-in-out; position: absolute; left: 0; }
    .hamburger-menu .bar:nth-child(1) { top: 0; }
    .hamburger-menu .bar:nth-child(2) { top: 9px; }
    .hamburger-menu .bar:nth-child(3) { bottom: 0; }
    .hamburger-menu.active .bar:nth-child(1) { top: 9px; transform: rotate(45deg); }
    .hamburger-menu.active .bar:nth-child(2) { opacity: 0; }
    .hamburger-menu.active .bar:nth-child(3) { top: 9px; transform: rotate(-45deg); }
    
    .global-nav-wrapper li.contact-button a {
    
        background: none;
        border: none;
        border-radius: 0;

        /* 他のリンクと見た目を揃える */
        color: #fff;
        font-size: 0.9em; /* 他のメニュー項目と同じサイズ */
        padding: 5px 10px; /* 他のメニュー項目と同じ余白 */
    }
    /* --- オーバーレイナビゲーション全体 --- */
    .global-nav-wrapper {
        display: none; /* 初期状態は非表示 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9); /* ご希望の黒の透過背景 */
        z-index: 99;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        overflow-y: auto;
        transition: transform 0.3s ease-out;
        transform: translateX(100%);
    }
    .global-nav-wrapper.open { display: flex; transform: translateX(0); }

    /* --- メニュー項目リスト (縦並び) --- */
    .global-nav-wrapper ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0;
        padding-top: 80px;
    }
    .global-nav-wrapper li {
        margin: 12px 0;
        width: 100%;
        text-align: center;
    }
    .global-nav-wrapper a { /* ハンバーガーメニュー内のリンク共通 */
        display: inline-block;
        padding: 5px 10px;
        overflow: visible;
        font-size: 1.2em;
        color: #fff; /* 基本の文字色 */
        text-decoration: none;
    }
    
    .global-nav-wrapper a:hover span { transform: none; } /* PC用ホバー解除 */
    /* ハンバーガーメニュー内のCONTACTボタンを中央揃え */
    .global-nav-wrapper li.contact-button {
        display: flex; /* Flexboxコンテナとして定義 */
        justify-content: center; /* 中の要素を水平方向中央に配置 */
    }
    /* ハンバーガーメニューのインスタグラムアイコンを非表示にする */
    .global-nav-wrapper ul li:first-child {
        display: none;
    }
    /* ハンバーガーメニュー内の「+」記号を非表示にする */
    .global-nav-wrapper li.has-dropdown > a::after {
        display: none !important;
    }
    .footer-nav li.has-dropdown > a::after {
        display: none !important;
    }

    /* PC用の下線(::after)をスマホでは「具体的」に非表示にする */
    .global-nav-wrapper a span::after,
    .global-nav-wrapper ul li:first-child a::after { /* インスタロゴのPC用下線 */
        display: none !important;
    }
    .footer-nav a span::after, /* フッターのPC用下線も同様 */
    .footer-nav ul li:first-child a::after {
        display: none !important;
    }
    
    /* CONTACTボタンのスタイル調整 */
    .global-nav-wrapper .contact-button .cssbuttons-io,
    .global-nav-wrapper .contact-button .cssbuttons-io:hover { background: none; color: #fff; }
    .global-nav-wrapper .contact-button .cssbuttons-io span { padding: 0; }
    .global-nav-wrapper .contact-button .cssbuttons-io::before { display: none; }
    .global-nav-wrapper .contact-button { font-size: 1.2em; } /* 他の項目とフォントサイズを合わせる */

    /* === スマホ版アコーディオンメニュー (ここから) === */

/* 「+」「-」を表示させる親リンクの共通スタイル */
.global-nav-wrapper li.has-dropdown > a,
.footer-nav li.has-dropdown > a {
    display: inline-flex; /* 文字と記号を横並びにするため */
    align-items: center;
    justify-content: center;
}

/* 「+」「-」記号のスタイル */
.global-nav-wrapper li.has-dropdown > a::after,
.footer-nav li.has-dropdown > a::after {
    display: inline-block; /* !important を削除 */
    content: '+';
    font-size: 1em;
    font-weight: normal;
    margin-left: 10px;
    transition: transform 0.3s ease;
    position: relative;
    top: -3px;
    color: #fff;
}

.global-nav-wrapper li.has-dropdown.active > a::after,
.footer-nav li.has-dropdown.active > a::after {
    content: '-';
}

/* アコーディオンで開くプルダウンメニューのスタイル */
.global-nav-wrapper .dropdown-menu,
.footer-nav .dropdown-menu {
    display: none; /* !important を削除 */
    position: static;
    transform: none;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    padding-top: 5px;
    padding-bottom: 5px;
    opacity: 1;
    visibility: visible;
    min-width: auto;
}

/* ★★★ こちらが重要 ★★★
   .activeクラスがついた時に、上の display: none; を上書きします */
.global-nav-wrapper li.has-dropdown.active > .dropdown-menu,
.footer-nav li.has-dropdown.active > .dropdown-menu {
    display: block; /* !important を削除 */
}

/* アコーディオン内の各リンクのスタイル */
.global-nav-wrapper .dropdown-menu a,
.footer-nav .dropdown-menu a {
    font-size: 0.85em;
    color: #ccc;
    padding: 8px 10px;
    text-align: center;
}

.global-nav-wrapper a:hover span,
.global-nav-wrapper a:active span {
    transform: none; /* !important を削除 */
}

.global-nav-wrapper .dropdown-menu a:hover,
.footer-nav .dropdown-menu a:hover {
    color: #fCDF8A;
    background-color: transparent;
}
/* === スマホ版アコーディオンメニュー (ここまで) === */
    
    /* --- スマホ版タップ時のフィードバック（文字色変更） --- */
    .global-nav-wrapper a:active,
    .global-nav-wrapper .contact-button:active span,
    .footer-nav a:active { /* フッターのリンクにも適用 */
        color: #fCDF8A;
        transition: none;
    }

    /* --- メインコンテンツ以下のレスポンシブスタイル (変更なし、元のCSSから) --- */
    .hero { padding: 80px 40px; height: auto; align-items: center; justify-content: center; text-align: center; }
    .hero-content { max-width: 90%; }
    .hero-content h1 { font-size: 2.0em; text-align: left; }
    .hero-content p { font-size: 1em; text-align: left; }
    .hero .button-container {
        text-align: left; /* ボタンを左揃えにする */
    }
    .hero .arrow-button {
        font-size: 14px;      /* 文字を少し小さく */
        padding: 8px 16px;    /* ボタンの余白も小さくして、全体をコンパクトに */
    }
    .service-section, .recruit-section { padding: 60px 20px; }
    .service-container, .recruit-container, .contact-container { width: 90%; }
    .service-section .service-arrow-button {
        font-size: 14px;
        padding: 8px 16px;
    }
    .text-wrapper, .recruit-item .text-wrapper, .service-section h2, .recruit-section h2 { text-align: center; }
    .text-wrapper h3 { font-size: 1.5em; }
    .service-section h2, .recruit-section h2, .contact-section h2 { font-size: 2.5em; }
    .contact-section { padding: 80px 20px; }
    .buttonNeumorphism { width: 60px; height: 60px; }
    .recruit-section .recruit-arrow-button {
        font-size: 12px;
        padding: 8px 16px;
    }
    
    /* --- フッターのレスポンシブ (変更なし、元のCSSから) --- */
    footer { padding: 30px 20px 20px; }
    .footer-container { flex-direction: column; align-items: center; text-align: center; }
    .footer-left { order: 2; margin-bottom: 30px; display: flex; align-items: center; justify-content: center; gap: 20px; }
    .footer-left .footer-logo img { height: 100px; margin: 0; }
    .footer-left .footer-address { margin: 0; white-space: normal; }
    .footer-nav { order: 1; margin-top: 0; width: 100%; margin-bottom: 30px; }
    .footer-nav ul { display: flex; flex-direction: column; align-items: center; width: 100%; }
    .footer-nav li { margin: 10px 0; width: 100%; }
    .footer-separator { margin: 20px 0; max-width: 960px;  }
}
/* 【PC版フッタープルダウン内のリンク：中央揃えと表示形式の最終確定版】 */
@media screen and (min-width: 769px) { /* PC表示のみに適用 */
    .footer-nav .dropdown-menu li { /* li要素にtext-align:centerは不要になります */
        width: 100%; /* これは汎用の .dropdown-menu li から継承 */
        margin: 0;   /* これも汎用から継承 */
    }

    .footer-nav .dropdown-menu a {
        display: block !important;      /* 表示形式をブロックレベル要素に強制 */
        width: 100% !important;         /* 親要素(li)の幅いっぱいに強制 */
        padding: 8px 25px !important;   /* 上下8px、左右25pxの余白を強制（「完璧！」の時の値） */
        box-sizing: border-box !important;/* paddingを幅の内側に含める */
        text-align: center !important;    /* 文字揃えを中央に強制 */
        /* white-space, font-size, color, border-radius などは汎用の .dropdown-menu a から継承されます */
    }
}
/* === ナビゲーションで現在地を示すためのスタイル === */


/* PC表示でアクティブなページの下線を常に表示させる */
@media screen and (min-width: 769px) {
    .global-nav-wrapper > ul > li.active-page > a span::after,
    .footer-nav > ul > li.active-page > a span::after {
        transform: scaleX(1);
    }
}
/* 【スマホ版】現在地のメニュー項目に下線を表示 */
@media screen and (max-width: 768px) {
    /* アクティブなページのspanに下線の基準点(position:relative)などを設定 */
    /* .global-nav-wrapper > ul > li.active-page > a > span,
    .footer-nav > ul > li.active-page > a > span {
        position: relative;
        padding-bottom: 3px; /* 文字と下線の間のスペース */
    } */

    /* スマホ表示でもアクティブなページの下線(::after)を強制的に表示 */
    .global-nav-wrapper > ul > li.active-page > a span::after,
    .footer-nav > ul > li.active-page > a span::after {
        display: block !important; /* display:none !important; を上書きして表示 */
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px; /* スマホでは少し細い下線に */
        background-color: #fff; /* 下線の色を金色に */
        transform: scaleX(1); /* 最初から表示された状態に */
        animation: none; /* ホバーアニメーションは不要 */
        transition: none; /* ホバーアニメーションは不要 */
    }

/* === 下層ページの共通コンテンツスタイル === */

/* ページ全体のコンテナ（幅と中央揃え） */
.page-container {
    max-width: 960px;   /* 最大幅 */
    margin: 0 auto;       /* 左右中央揃え */
    padding: 40px 40px 80px 40px;  /* 上下の余白と、左右の最小限の余白 */
    box-sizing: border-box;
}

/* ページタイトルの上の小さな文字（例：「会社案内」） */
.page-eyebrow {
    font-size: 0.9em;
    color: #555;
    margin: 0 0 5px 0; /* 下に少しだけ余白 */
}

/* ページタイトル（例：「ABOUT US」） */
.page-title {
    font-size: 3em; /* 文字サイズ */
    color: #0f3f6f; /* メインカラーの紺色 */
    margin: 0 0 60px 0; /* タイトルの下に大きな余白 */
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ビジョンなどを記述するテキストブロック */
.vision-text h2 {
    font-size: 1.8em;
    color: #333;
    line-height: 1.5;
    margin: 0 0 40px 0;
}

.vision-text p {
    font-size: 1em;
    color: #333;
    line-height: 2.0; /* 行間を広めに設定して読みやすく */
    margin-bottom: 2em; /* 段落ごとの余白 */
}
/* === MESSAGEセクションのスタイル === */

/* セクション上部の画像エリア */
.section-image-wrapper {
    margin-bottom: 80px; /* 画像と下のコンテンツとのスペース */
}

.section-image-wrapper img {
    width: 100%;      /* 親要素の幅いっぱいに */
    height: auto;     /* 高さは自動調整 */
    display: block;   /* 画像下の余分な隙間をなくす */
}
/* === ABOUTページ：左右いっぱいの画像セクション === */
.section-image-fullwidth {
    width: 100%;
    max-height: 400px;      /* ★画像の「高さの上限」を500pxに設定します。この数値を調整してください。 */
    overflow: hidden;         /* はみ出した部分を隠します */
    margin-bottom: 80px;      /* 画像と下のコンテンツとのスペース */
    line-height: 0;           /* 画像の下にできる余分な隙間をなくします */
}

.section-image-fullwidth img {
    width: 100%;
    height: 100%; /* ★親要素の高さ（450px）いっぱいに広がるように変更 */
    object-fit: cover; /* ★比率を保ったまま、エリアを埋める */
    display: block;
    
}

/* === ABOUTページ：MESSAGEセクションの余白調整 === */

/* 「MESSAGE」という文字より上の余白を調整 */
#message {
    padding-top: 80px; /* 画像と「代表挨拶」の間のスペース */
}

/* セクションタイトル (例: "MESSAGE") */
.section-title {
    font-size: 2.5em; /* <h1> より少し小さいサイズ */
    color: #0f3f6f;
    margin: 0 0 50px 0; /* タイトルの下に余白 */
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* メッセージのテキストブロック */
.message-text h3 {
    font-size: 1.6em;
    color: #333;
    line-height: 1.6;
    margin: 0 0 40px 0;
}

.message-text p {
    font-size: 1em;
    color: #333;
    line-height: 2.0;
    margin-bottom: 2em;
}

/* 署名部分 */
.message-signature {
    text-align: right; /* 右揃え */
    margin-top: 40px;  /* 上の文章とのスペース */
    font-size: 1.1em;
}
/* style.css の適当な場所に追記 */
.message-signature .signature-name {
    font-size: 1.5em;  /* お好みのサイズに調整してください */
    /* font-weight: 600; で太くするなども可能です */
  }
  
/* === OVERVIEWセクションの会社概要リスト === */

.definition-list {
    border-top: 1px solid #e0e0e0; /* リストの一番上の線 */
}

.definition-list-item {
    display: flex; /* dtとddを横並びにするため */
    padding: 25px 0; /* 各項目の上下の余白 */
    border-bottom: 1px solid #e0e0e0; /* 各項目の下の線 */
}

.definition-list-item dt {
    width: 220px;       /* 左側の項目名エリアの幅を固定（お好みで調整） */
    flex-shrink: 0;     /* コンテンツが詰まってもこの幅を維持 */
    font-weight: 600;   /* 少し太字に */
    padding-right: 20px; /* 右側の内容との間のスペース */
    font-size: 0.9em;
}

.definition-list-item dd {
    flex-grow: 1; /* 残りの幅をすべて内容エリアが使う */
    line-height: 1.8; /* 行間を少し広めに */
    font-size: 0.9em;
}

/* OVERVIEWセクションの上下の余白を調整 */
#overview.page-container {
    padding-top: 0;
    padding-bottom: 100px; /* フッターとのスペース */
}
/* === スマホ版：会社概要セクションのレスポンシブ対応 === */
@media screen and (max-width: 768px) {

    /* OVERVIEWセクション全体の上下の余白をスマホ用に調整 */
    #overview.page-container {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /* 「会社概要」の文字の左に装飾線を追加 */
    #overview .page-eyebrow {
        position: relative;
        padding-left: 15px; /* 線の分のスペースを確保 */
        font-weight: bold;  /* 少し太字に */
    }

    #overview .page-eyebrow::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;  /* 線の幅 */
        height: 90%; /* 線の高さ */
        background-color: #0f3f6f; /* 線の色 */
        border-radius: 2px;
    }
    
    /* OVERVIEWタイトルの下の余白をスマホ用に調整 */
    #overview .section-title {
        margin-bottom: 40px;
    }

    /* 各項目のレイアウトを縦積みに変更 */
    .definition-list-item {
        flex-direction: column;  /* ★PC版の横並び(row)から、縦積み(column)に変更 */
        align-items: flex-start; /* 内容を左揃えに */
        padding: 20px 0;         /* スマホ用の上下余白 */
    }

    /* 項目名（dt）のスタイルをスマホ用に変更 */
    .definition-list-item dt {
        width: auto;            /* PC用の固定幅を解除 */
        font-size: 0.9em;       /* 少し小さく */
        font-weight: bold;    /* 通常の太さに */
        color: #2c2c2c;            /* 少し薄い色に */
        margin-bottom: 8px;     /* 下の内容との間のスペース */
        padding-right: 0;       /* PC用の右余白を解除 */
    }

    /* 内容（dd）のスタイルをスマホ用に変更 */
    .definition-list-item dd {
        font-size: 1em; /* 内容の文字を少し大きくして見やすく */
        line-height: 1.7;   /* 行間 */
        color: #555
    }
}
/* 【スマホ版s：会社概要リストのテキストを左揃えに】 */
@media screen and (max-width: 768px) {
    /* dt（項目名）と dd（内容）の両方に左揃えを強制 */
    .definition-list-item dt,
    .definition-list-item dd {
        text-align: left !important;
    }
}
/* 【スマホ版：会社概要リストのインデント解除と完全な左揃え】 */
@media screen and (max-width: 768px) {
    /* ddタグにブラウザが自動でつける左の余白（margin-left）をリセット */
    .definition-list-item dd {
        margin-left: 0;
    }
}
/* === SERVICEページ専用スタイル === */

/* サービス紹介セクション全体を囲むラッパー */
.service-content-wrapper {
    max-width: 960px;   /* 最大幅 */
    margin: 0 auto;       /* 左右中央揃え */
    padding: 0 40px;      /* 左右の最小限の余白 */
    box-sizing: border-box;
}

/* 各サービス項目のブロック */
.service-item-block {
    display: flex;
    align-items: center;
    gap: 60px; /* テキストと画像の間のスペース */
    padding: 80px 0; /* 各サービス間の上下のスペース */
    border-bottom: 1px solid #e0e0e0; /* サービス間の区切り線 */
}
.service-item-block:last-child {
    border-bottom: none; /* 最後の項目の下線は消す */
}

/* テキストコンテンツ側のエリア */
.service-text-content {
    flex: 1; /* 幅の比率（画像と1:1） */
    order: 1; /* 表示順：通常は1番目（左） */
    padding-left: 40px;
}

/* 画像側のエリア */
.service-image-content {
    flex: 2; /* 幅の比率（テキストと1:1） */
    order: 2; /* 表示順：通常は2番目（右） */
}

.service-image-content img {
    width: 100%;
    height: 350px;          /* ★例：高さを350pxに固定します。この数値を調整してください。 */
    object-fit: cover;      /* ★画像の比率を保ったまま、エリア全体をきれいに埋めます */
    display: block;
    border-radius: 15px;
}

/* テキストと画像の順番を逆にするための指定 */
.service-item-block.layout-reverse .service-text-content {
    order: 2; /* 表示順を2番目（右）に */
}
.service-item-block.layout-reverse .service-image-content {
    order: 1; /* 表示順を1番目（左）に */
}

/* サービスごとの小さな見出し（例：「セールスプロモーション事業」） */
.service-eyebrow {
    font-size: 0.9em;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px;
}

/* サービスごとのタイトル（例：「SALES PROMOTION」） */
.service-title {
    font-size: 2em;
    font-weight: 700;
    color: #0f3f6f;
    margin: 0 0 25px 0;
}

/* サービスごとの小見出し（例：「事業説明...」） */
.service-subheading {
    font-size: 1.5em;
    font-weight: 600;
    color: #333;
    line-height: 1.5;
    margin: 0 0 25px 0;
}

/* サービスの説明文 */
.service-text-content p {
    font-size: 1em;
    line-height: 1.8;
    color: #444;
}

/* スマホ表示では、サービス項目を縦積みに */
@media screen and (max-width: 768px) {
    .service-item-block {
        flex-direction: column; /* 縦積みに変更 */
        gap: 30px; /* テキストと画像の間のスペース（スマホ用） */
        padding: 60px 0;
    }
    .service-item-block.layout-reverse .service-text-content,
    .service-item-block.layout-reverse .service-image-content {
        order: 0; /* 表示順の指定をリセット */
    }
}
/* === Strengthセクションのスタイル === */

.strength-section {
    padding: 60px 0 60px 0; /* セクションの上下の余白 */
    background-color: #f8f9fa; /* 背景色を少しだけグレーに */
}

/* Strengthセクション内のタイトルを中央揃えに */
.strength-section .page-eyebrow,
.strength-section .section-title {
    text-align: center;
}

/* 3つの強みを横に並べるためのグリッド（Flexboxを使用） */
.strength-grid {
    display: flex;
    justify-content: center; /* 中央揃え */
    gap: 40px; /* 各項目の間のスペース */
    margin-top: 60px; /* タイトルとの間のスペース */
}

/* 各強みのカード */
.strength-card {
    flex: 1; /* 3つのカードでスペースを均等に分け合う */
    max-width: 300px; /* カードが広がりすぎないように最大幅を指定 */
    text-align: center; /* 中の画像とタイトルを中央揃え */
}

/* 強みの画像エリア */
.strength-image {
    width: 100%;
    aspect-ratio: 1 / 1; /* 縦横比を1:1（正方形）に */
    background-color: #e9ecef; /* 画像がない場合の背景色 */
    border-radius: 25px; /* 角を丸くする */
    margin: 0 auto 25px auto; /* 画像を中央に配置し、下に余白 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.strength-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を保ったままエリアを埋める */
    border-radius: 25px; /* 画像自体の角も丸くする */
}

/* 強みのタイトル (例：「テキストボックス」) */
.strength-card-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

/* 強みの説明文 */
.strength-card p {
    font-size: 0.9em;
    color: #555;
    line-height: 1.8;
    text-align: left; /* ★説明文だけは左揃えにする */
}


/* === スマホ表示でのStrengthセクションの調整 === */
@media screen and (max-width: 768px) {
    .strength-grid {
        flex-direction: column; /* 縦積みに変更 */
        align-items: center; /* 中央に寄せる */
    }
}
/* 【スマホ版：全コンテンツコンテナの左右余白を強制的に設定】 */
@media screen and (max-width: 768px) {
    main .page-container {
        padding-left: 25px !important;  /* ★スマホ用の左の余白 */
        padding-right: 25px !important; /* ★スマホ用の右の余白 */
        width: auto !important;         /* 既存のwidth指定をリセット */
        max-width: 100%;                /* 親要素からはみ出さないように */
        box-sizing: border-box;         /* paddingを幅の内側に含める */
    }
}
/* === サービス紹介セクションの上下の余白を調整するスタイル === */

/* PC表示用のスタイル */
.service-layout-section {
    padding-top: 80px;    /* ★セクションの「上」の余白 */
    padding-bottom: 80px; /* ★セクションの「下」の余白 */
}

/* スマホ表示用のスタイル */
@media screen and (max-width: 768px) {
    .service-layout-section {
        padding-top: 60px;    /* ★スマホでの「上」の余白 */
        padding-bottom: 60px; /* ★スマホでの「下」の余白 */
    }
}
/* === RECRUITページ専用スタイル === */

/* 採用メッセージセクション全体の上下余白 */
.recruit-message-section {
    padding-top: 100px;
    padding-bottom: 100px;
    
}

/* 採用スローガン（大きな見出し） */
.recruit-slogan {
    font-size: 2em;
    font-weight: bold;
    color: #0f3f6f;
    line-height: 1.6;
    margin: 0 auto 40px auto; /* 上下左右中央に配置し、下に余白 */
    
}

/* スローガン下の段落テキスト */
.recruit-message-section p {
    font-size: 1em;
    line-height: 2.0;
    color: #444;
    
}
/* === CONTACTページ専用スタイル === */

/* 注意書きリストのスタイル */
.contact-notes {
    list-style: none; /* デフォルトの黒丸を削除 */
    padding: 0;
    margin: 20px auto 0 auto; /* タイトルからのスペース確保と中央揃え */
    max-width: 800px; /* リストが横に広がりすぎないように */
}

.contact-notes li {
    position: relative;
    padding-left: 1.5em; /* 「・」の分のスペースを確保 */
    margin-bottom: 1.5em; /* 各項目間のスペース */
    font-size: 1em;
    line-height: 1.8;
    color: #444;
}

/* 箇条書きの「・」を独自に設定 */
.contact-notes li::before {
    content: '・';
    position: absolute;
    left: 0;
    top: 0;
    color: #0f3f6f; /* 先頭の「・」だけ色を変更 */
    font-weight: bold;
}

/* 注意書きの中のリンクスタイル */
.contact-notes a {
    color: #0f3f6f;
    font-weight: bold;
    text-decoration: underline;
}
.contact-notes a:hover {
    text-decoration: none;
}

/* === ナビゲーションで現在地を示すためのスタイル（CONTACTボタン用） === */
/* PC表示でアクティブなCONTACTボタンに影をつける */
@media screen and (min-width: 769px) {
    .global-nav-wrapper > ul > li.contact-button.active-page .cssbuttons-io {
        /* 例：アクティブなボタンに内側の影をつけて少しへこんで見えるように */
        box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
    }
}

/* スマホ表示でアクティブなCONTACTに下線をつける */
@media screen and (max-width: 768px) {
    .global-nav-wrapper > ul > li.contact-button.active-page span {
        position: relative;
        display: inline-block;
        padding-bottom: 3px;
    }
    .global-nav-wrapper > ul > li.contact-button.active-page span::after {
        display: block !important;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #fCDF8A; /* 金色 */
    }
}
/* === ページタイトルエリアのスタイル === */
.page-title-area {
    /* ★この数値を調整して、タイトル「下」の余白を変更します */
    padding-bottom: 0px; /* 例：下に40pxの余白 */

    /* ★この数値を調整して、タイトル「上」の余白を変更します */
    padding-top: 100px; /* 例：上に100pxの余白 */
}
/* === CONTACTページ：フォームセクションのスタイル === */
.form-section {
    background-color: #f8f9fa; /* 背景色を薄いグレーに */
    padding: 80px 0;
}

.contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-item {
    display: flex;
    padding: 25px 0;
   
}

.form-label {
    width: 200px;
    flex-shrink: 0;
    padding-right: 20px;
    font-weight: 600;
}

.form-input-wrapper {
    flex-grow: 1;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #ccc;
    background-color: transparent;
    font-size: 1em;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-bottom-color: #0f3f6f; /* フォーカス時に下線の色を変更 */
}

.contact-form textarea {
    resize: vertical; /* 上下方向のみリサイズ可能に */
}

/* ラジオボタンのスタイル */
.form-radio-group {
    display: flex;
    flex-wrap: wrap; /* 画面が狭い時に折り返す */
    gap: 20px;
}
.form-radio-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.form-radio-group input[type="radio"] {
    margin-right: 8px;
}

/* 送信ボタンのコンテナ */
.form-submit-button-container {
    text-align: center;
    margin-top: 60px;
}

/* 送信ボタンのスタイル（既存の.arrow-buttonを再利用） */
.form-submit-button-container .arrow-button {
    /* 必要であれば、ここでさらにスタイルを調整 */
}

/* スマホ表示での調整 */
@media screen and (max-width: 768px) {
    .form-item {
        flex-direction: column; /* 縦積みに変更 */
        gap: 10px;
    }
    .form-label {
        width: auto;
    }
}
/* === CONTACTページ：送信ボタンの専用スタイル === */

.submit-button {
    /* 基本の形状 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    border: 2px solid #0f3f6f; /* 枠線の色 */
    border-radius: 50px;
    background-color: transparent; /* 背景は透明 */
    color: #0f3f6f; /* 文字色 */
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;

    /* アニメーションのための準備 */
    position: relative;
    overflow: hidden; /* はみ出す背景を隠します */
    transition: color 0.4s ease-out; /* 文字色の変化をアニメーション */
}

/* 文字とSVGアイコンを前面に表示するための設定 */
.submit-button span,
.submit-button svg {
    position: relative;
    z-index: 1; /* 背景(::before)より手前に */
    transition: transform 0.3s ease-in-out; /* SVGの動きもここに含めます */
}
.submit-button svg {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    fill: #0f3f6f; /* SVGの初期の色 */
    transition: fill 0.4s ease-out, transform 0.3s ease-in-out;
}

/* スライドインしてくるグラデーション背景（::before要素） */
.submit-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #fCDF8A, #F38381); /* グラデーション */
    z-index: 0; /* 文字やSVGより後ろに */

    /* ★初期状態では左側に隠しておく */
    transform: translateX(-101%);
    transition: transform 0.4s ease-out; /* スライドアニメーション */
}

/* --- ホバー時の変化 --- */
.submit-button:hover {
    color: white; /* 文字色を白に */
    border-color: transparent; /* ホバー時に枠線を透明に */
}

.submit-button:hover::before {
    transform: translateX(0); /* ★背景をスライドインさせる */
}

.submit-button:hover svg {
    transform: translateX(5px); /* SVGも少し動かす */
    fill: white; /* SVGの色も白に */
}

/* --- クリック時の変化 --- */
.submit-button:active {
    transform: scale(0.95); /* 少し縮むエフェクト */
}
/* 【PC版ヘッダーCONTACTボタン：ホバーエフェクト無効化】 */

/* CONTACTボタンの文字がホバーで上に動くのを防ぐ */
.global-nav-wrapper .contact-button a.cssbuttons-io:hover span {
    transform: none !important;
}

/* CONTACTボタンの文字の下にホバーで線が表示されるのを防ぐ */
.global-nav-wrapper .contact-button a.cssbuttons-io span::after {
    display: none !important;
}
/* ABOUTページ専用のヘッダー下余白調整 */
body.page-about .page-container {
    margin-top: 60px;
}
/* ABOUTページ専用のページ内リンク余白調整 */
body.page-about #overview {
    scroll-margin-top: 200px; /* 「会社概要」の余白は100pxに設定 */
}
body.page-about #message {
    scroll-margin-top: 100px;  /* 「代表挨拶」の余白を個別に調整 */
}
/* SERVICEページ専用の余白調整 */
body.page-service [id] {
    scroll-margin-top: 20px;
}
/* RECRUITページ専用の余白調整 */
body.page-recruit [id] {
    scroll-margin-top: 150px;
}
.form-input-wrapper-confirm { line-height: 1.8; }

/* スマホの時だけ表示される改行タグ用のCSS */
.br-sp {
    display: none; /* PCでは非表示にする */
}
@media screen and (max-width: 768px) {
    .br-sp {
        display: block; /* スマホでは表示する */
    }
    .br-pc {
        display: none;
    }
}
@media screen and (max-width: 768px) {
  .global-nav-wrapper li.contact-button a::before,
  .global-nav-wrapper li.contact-button a:hover::before {
    display: none !important;
    transform: none !important;
    transition: none !important;
  }

  .global-nav-wrapper li.contact-button a {
    background: none !important;
    color: #fff !important;
    transform: none !important;
    transition: none !important;
  }

  .global-nav-wrapper li.contact-button a:hover {
    color: #fff !important;
    transform: none !important;
  }
  .global-nav-wrapper li.contact-button a:active {
    /* 他のメニューと同じく「:active」で黄色に */
    color: #fCDF8A !important;
    /* お好みで transition を無効化 */
    transition: none !important;
  }
/* SERVICEページのスマホ画像を自動高さに */
.page-service .service-image-content img {
    height: auto;    /* 固定高さを解除 */
    width: 100%;     /* 横幅いっぱいに */
    object-fit: cover; /* アスペクト比を保って切り取り */
  }
.recruit-section .text-wrapper,
  .recruit-section .text-wrapper p {
    text-align: left;
  } 

  /* スマホ版の文字調整*/
  /* ヒーローセクション */
  .hero-content h1 {
    font-size: 2em;
  }
  .hero-content p {
    font-size: 0.9em;
  }

  /* SERVICEセクション */
  .service-eyebrow {
    font-size: 0.75em;
  }
  .service-title {
    font-size: 1.5em;
  }
  .service-subheading {
    font-size: 1.2em;
  }
  .service-text-content p {
    font-size: 0.9em;
  }

  /* RECRUITセクション */
  .recruit-slogan {
    font-size: 1.5em;
  }
  .recruit-message-section p {
    font-size: 0.9em;
  }
  .contact-section .contact-text {
    font-size: 0.8em;
  } 
  /* ABOUTページ共通 */
  .page-eyebrow {
    font-size: 0.8em;
  }
  .page-title {
    font-size: 2em;
  }

  /* Vision セクション */
  .vision-text h2 {
    font-size: 1.4em;
  }
  .vision-text p {
    font-size: 0.9em;
  }

  /* MESSAGE セクション */
  .message-text h3 {
    font-size: 1.3em;
  }
  .message-text p {
    font-size: 0.9em;
  }
  .message-signature {
    font-size: 0.9em;
  }

  /* OVERVIEW セクションのタイトル */
  .section-title {
    font-size: 2em;
  }
  .definition-list dt,
  .definition-list dd {
    font-size: 0.9em;
  }

}
.global-nav-wrapper ul li:first-child a::after {
    display: none !important;
}
/* ===== Instagramアイコンを全ページで同じサイズに固定 ===== */
.global-nav-wrapper a[href*="instagram.com"] img,
.footer-nav a[href*="instagram.com"] img {
  height: 20px !important;  /* 必要なら 18〜24px で微調整 */
  width: auto !important;
  display: block;
}

/* ===== Instagramアイコンだけは hover 下線を完全に無効化（ヘッダー＆フッター） ===== */
.global-nav-wrapper a[href*="instagram.com"]::after,
.global-nav-wrapper a[href*="instagram.com"] span::after,
.footer-nav a[href*="instagram.com"]::after,
.footer-nav a[href*="instagram.com"] span::after {
  content: none !important;
  display: none !important;
  transform: none !important;
}

/* （保険）hover時に下線アニメーションを走らせない */
.global-nav-wrapper a[href*="instagram.com"]:hover::after,
.global-nav-wrapper a[href*="instagram.com"]:hover span::after,
.footer-nav a[href*="instagram.com"]:hover::after,
.footer-nav a[href*="instagram.com"]:hover span::after {
  content: none !important;
  display: none !important;
  transform: none !important;
}
/* --- フッターメニューを中央寄せ（PC時） --- */
.footer-nav ul {
    justify-content: center;  /* ← これでUL内の並びを中央に */
    gap: 30px;                /* 間隔はお好みで 24〜36px */
  }
  
  /* --- Instagramアイコンの縦位置をテキスト中央に --- */
  .footer-nav a[href*="instagram.com"] img {
    display: inline-block;    /* block だとベースライン調整が効きません */
    vertical-align: middle;
    height: 20px;
    width: auto;
  }

/* === スマホ時の全体フォント一括スケール === */
@media screen and (max-width: 768px) {
    /* 100% = PC時の基準。数字を変えるだけで全体のサイズ感を一括調整できます。 */
    html { font-size: 87.75%; } /* 例：やや小さく（100% → 93.75% = 15px相当） */
    /* html { font-size: 87.5%; }   ← もっと小さくしたい時 */
    /* html { font-size: 106.25%; } ← 逆に少し大きくしたい時 */
  }
  @media screen and (max-width: 768px) {
    /* ヒーローエリア */
    .hero-content h1 {
      font-size: 1.6em;   /* ← 2em → 1.6em にして小さめに */
      line-height: 1.3;   /* 行間も少し詰める */
    }
    .hero-content p {
      font-size: 0.85em;  /* ← 0.9em よりさらに小さく */
    }
    .page-thanks p {
    font-size: 0.9em;   /* 文字を少し小さく */
    line-height: 1.6;   /* 行間をゆとり */
  }
  }