/*
Theme Name: 20260522_kujimichi
THEME URI:
DESCRIPTION:
VERSION: 0.1
AUTHOR:
AUTHOR URI:
TAGS:
*/
@import url('style_page.css');

/* ==========================================
   全体に適用する基本ベースCSS設定
========================================== */

/* すべての要素で余白の計算方法を統一する設定 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* サイト全体の基準となる背景色や文字の設定 */
body {
    background-color: #FAFAFA; /* ご指定の背景色 */
    color: #333333; /* 全体の基本文字色 */
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased; /* 文字を滑らかに表示する設定 */
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6; /* 全体の標準的な行間 */
    overflow-x: hidden; /* スマホ等での横スクロールによる画面のガタつきを防止 */
	
	/* 【CLS崩れ対策】追従ヘッダーの高さの分だけ、最初からコンテンツ全体を下に押し下げておく
    padding-top: 85px; */
}

/* リンク全体の共通設定 */
a {
    color: inherit; /* 親要素の文字色を引き継ぐ */
    text-decoration: none; /* 下線を一括で消去 */
    transition: opacity 0.2s ease; /* ホバー時の動きを滑らかにする */
}

/* 画像が親要素からはみ出して画面が崩れるのを防ぐ設定 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle; /* 画像の下にできる謎の隙間を消去 */
}

/* リスト（箇条書き）のポッチや余白を初期化 */
ul, ol {
    list-style: none;
}

/*==========================================================================================header.php*/

/* ==========================================
   全共通・PCレイアウト（ドロップダウン追加版）
========================================== */
.site-header {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    
    /* 画面の一番上にヘッダーを完全に固定して追従させる設定 */
    position: fixed;
    top: 0;
    left: 0;
    
    z-index: 1000; /* 他のコンテンツ（背景画像など）の下に潜り込まないように最前面にキープ */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 30px;
}

.logo-title img {
    display: block;
    width: clamp(220px, 23vw, 300px); 
    height: auto;
}

.main-navigation .nav-list {
    display: flex;
    gap: clamp(12px, 1.5vw, 24px); 
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 親メニューの<li>設定 */
.main-navigation .nav-list > li {
    position: relative; /* 子メニューの配置基準にするため必須 */
    padding: 10px 0;    /* ホバーを外れにくくするための隙間埋め */
}

.main-navigation .nav-list a {
    text-decoration: none;
    color: #333333;
    font-weight: medium;
    transition: color 0.2s;
    font-size: clamp(13px, 1.1vw, 15px); 
    white-space: nowrap; 
}

.main-navigation .nav-list a:hover {
    color: #0066cc;
}

/* ------------------------------------------
   【PC用】子メニュー（.sub-menu）のスタイル
------------------------------------------ */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;                  /* 親メニューのすぐ下に配置 */
    left: 50%;
    transform: translateX(-50%); /* 中央揃え */
    background-color: #ffffff;
    border-radius: 16px;        /* 添付画像のようなキレイな角丸 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* 画像通りのふんわりした影 */
    list-style: none;
    padding: 15px 0;
    margin: 0;
    min-width: 180px;           /* メニューの最低横幅 */
    
    /* 初期状態は非表示（不透明度0、やや下に配置してアニメーションの準備） */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* 子メニュー内の各リンク */
.main-navigation .sub-menu li {
    width: 100%;
}

.main-navigation .sub-menu a {
    display: block;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: normal;       /* 子メニューは少し細めの文字ですっきり見せる */
    color: #555555;
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}


/* 子メニュー内のホバー効果 */
.main-navigation .sub-menu a:hover {
    background-color: #f4f9ff;  /* 薄いブルー（お好みの色に変えてください） */
    color: #0066cc;
}

/* 親メニュー（会社情報）にホバーした時、子メニューを表示する */
.main-navigation .nav-list > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ハンバーガー用の隠し要素 */
.menu-toggle-input,
.hamburger-btn {
    display: none;
}


/* ==========================================
   【レスポンシブ】スマホ表示（max-width: 768px）
========================================== */
@media (max-width: 768px) {
    .header-container {
        padding: 15px 20px;
    }

    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 1010;
    }

    .hamburger-btn .bar {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #333333;
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
    }

    .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .main-navigation .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
    }

    .main-navigation .nav-list > li {
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
        padding: 0;
    }

    .main-navigation .nav-list a {
        display: block;
        padding: 15px 25px;
        font-size: 16px;
        white-space: normal;
    }

    /* スマホ時：子メニューを縦並びに馴染ませる設定（影や角丸を解除） */
    .main-navigation .sub-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        background-color: #fafafa; /* 少しグレーにして階層を分かりやすく */
        padding: 0;
        min-width: auto;
    }

    .main-navigation .sub-menu a {
        padding: 12px 40px; /* インデントを下げて子要素だと見せる */
        font-size: 14px;
        border-top: 1px solid #f0f0f0;
    }

    /* ハンバーガー開閉ロジック */
    .menu-toggle-input:checked ~ .main-navigation {
        max-height: 600px; /* 子メニューが増えた分、最大高さを引き上げ */
    }

    /* 三本線が「×」になるアニメーション */
    .menu-toggle-input:checked ~ .hamburger-btn .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle-input:checked ~ .hamburger-btn .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle-input:checked ~ .hamburger-btn .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/*==========================================================================================home.php*/

/* ==========================================
   メインビジュアル（TOP画像）セクション
========================================== */
.main-visual {
    position: relative;
    width: 100%;
    /* PC表示時はアスペクト比を維持し、画面幅に合わせて可変 */
    height: 56.25vw; 
    max-height: 650px; /* 大画面モニターでも縦に広がりすぎないように上限を制限 */
    min-height: 450px;
    overflow: hidden;
    background-color: #e0f2fe; /* 画像遅延時の下地バックグラウンドカラー */
}

/* 背景画像の配置（CLS対策） */
.mv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.mv-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を崩さず、画面いっぱいにフィット */
    object-position: center;
}

/* 前面の文字やScrollを囲む最大幅コンテナ */
.mv-container {
    position: relative;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2; /* 画像レイヤーより前面に表示 */
    box-sizing: border-box;
}

/* ------------------------------------------
   左から右へふわっと現れるアニメーション設定
------------------------------------------ */
.mv-copy-box {
    max-width: 600px;
}

.mv-lead-text {
	/* 【最重要】h1の文字だけに游明朝（と互換性のある美しい明朝体）を指定 */
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
    /* clampを使い、PCからタブレットの画面幅に応じて文字サイズを滑らかに縮小 */
    font-size: clamp(24px, 2.8vw, 36px); 
    font-weight: medium;
    color: #444444; /* 視認性の高い濃いグレー */
    line-height: 1.6;
    margin: 0;
    letter-spacing: 0.05em;

    /* アニメーションの基本トリガー */
    opacity: 0; /* 読み込み開始時は非表示 */
    
    /* 滑らかかつ高級感のある加速・減速を演出 */
    animation: fadeLeftToRight 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    
    /* ヘッダーが読み込まれた後、少し遅らせて動かすためのディレイ */
    animation-delay: 0.3s; 
}

/* アニメーションの挙動定義 */
@keyframes fadeLeftToRight {
    0% {
        opacity: 0;
        transform: translateX(-40px); /* 40px左にずれた状態からスタート */
    }
    100% {
        opacity: 1;
        transform: translateX(0);    /* 本来の位置へ */
    }
}

/* ------------------------------------------
   右側のScroll表示（見本通りに再現）
------------------------------------------ */
.mv-scroll-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-end; /* コンテナの最下部に寄せる */
    margin-bottom: 40px;
}

.scroll-text {
    font-size: 14px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333333;
    writing-mode: vertical-rl; /* 文字を縦書きに変換 */
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

/* スクロールの縦線（アニメーションの土台となる枠） */
.scroll-line {
    position: relative;
    width: 1px;
    height: 80px;
    background-color: rgba(51, 51, 51, 0.2); /* 線の全体を薄いグレーにしてガイド線にする */
    overflow: hidden; /* 枠からはみ出たアニメーション線を隠すために必須 */
}

/* 縦線の中を流れる動く線（疑似要素を使用） */
.scroll-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px; /* 動く線の長さ */
    background-color: #333333; /* 動く線の色 */
    
    /* 【修正】2.0秒周期で、上から下へ滑らかに無限ループさせる */
    animation: scrollLineMove 2.0s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* 【ゴールデンループ定義】ちぎれ現象を100%バグ撃破するアニメーション */
@keyframes scrollLineMove {
    0% {
        top: -40px;            /* ガイド線の「枠外の上」に見えない状態で待機 */
        transform: scaleY(0);  /* 最初は縮んだ状態 */
    }
    30% {
        top: 0;
        transform: scaleY(1);  /* 枠内に入りながら、40pxの長さにスッと伸びる */
    }
    60% {
        top: 40px;
        transform: scaleY(1);  /* 40pxの長さを保ったまま、下へスルスル滑り落ちる */
    }
    100% {
        top: 80px;             /* ガイド線の最下部を突き抜けて「枠外の下」へ */
        transform: scaleY(0);  /* 底に吸い込まれるように縮んで消える */
    }
}


/* ==========================================
   【レスポンシブ】スマホ表示（max-width: 768px）
========================================== */
@media (max-width: 768px) {
    .main-visual {
        /* スマホ時は添付画像2のような縦長比率（120vw）に自動切り替え */
        height: 120vw; 
        max-height: 500px;
        min-height: 400px;
    }

    .mv-container {
        padding: 0 24px; /* スマホ用に左右の余白を少し調整 */
    }

    .mv-lead-text {
        /* スマホ画面で改行されても最も美しく収まるサイズに変更 */
        font-size: clamp(20px, 6vw, 24px);
        line-height: 1.5;
    }

    .mv-scroll-box {
        margin-bottom: 20px;
    }

    .scroll-line {
        height: 50px; /* スマホの縦幅に合わせて線を少し短く調整 */
    }
	
	.scroll-line::before {
        height: 25px; /* 全体が短くなった分、動く線の長さも調整 */
	}
}
	
/* ==========================================
   企業概要・コンセプト紹介セクション
========================================== */

/* 企業概要セクション全体の背景と上下余白の設定 */
.home-intro-section {
    background-color: #FFFFFF;
    padding: clamp(60px, 8vw, 100px) 0;
    width: 100%;
    box-sizing: border-box;
}

/* 中央配置のための最大幅コンテナ */
.home-intro-container {
    max-width: 870px; /*1200px;*/
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* PC時のテキストボックスの設定 */
.intro-lead-text {
    text-align: left;
    color: #333333;
    font-weight: 500;
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin: 0 auto;
    
    /* PC表示時に文字が横に広がりすぎるのを防ぐ設定 */
    max-width: 820px; 
    
    /* 画面幅に応じて文字サイズを15pxから20pxの間で滑らかに可変 */
    font-size: clamp(15px, 1.8vw, 20px); 
    
    padding: 0 20px;
    box-sizing: border-box;
}

/* 横幅768px以下のスマートフォン時の設定 */
@media (max-width: 768px) {
    /* スマートフォン時は上下の余白を少し狭くする */
    .home-intro-section {
        padding: 50px 0;
    }

    .home-intro-container {
        padding: 0;
    }
    
    /* スマートフォン時のテキストボックスの挙動 */
    .intro-lead-text {
        font-size: 14px;
        line-height: 2.0;
        
        /* 横幅の制限を解除して画面いっぱいに広げる */
        max-width: 100%;
        
        /* 画面の端に文字がくっつかないように左右に24pxの余白を確保 */
        padding: 0 24px; 
    }
}


/* ==========================================
   会社情報（COMPANY）セクション
========================================== */
.home-company-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* 背景画像とオーバーレイ設定 */
.company-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 通常時は2枚目の画像に合わせて背景を少し暗く保つ */
.company-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    transition: background-color 0.4s ease;
}

.company-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* コンテンツ全体の設定 */
.company-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    z-index: 3;
    box-sizing: border-box;
}

/* セクションタイトル（Futura＋Geologica設定を適用） */
.company-title {
    font-family: "Futura", "Geologica", "Helvetica Neue", Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #FAFAFA; /* #FAFAFAに修正 */
    line-height: 1.2;
    margin-bottom: 60px;
    text-align: left;
    letter-spacing: 0.1em;
    transition: color 0.4s ease;
}

.company-subtitle {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin-top: 8px;
    letter-spacing: 0.02em;
}

/* 4つのボタンを配置するグリッドレイアウト */
.company-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* 各ボタンの基本スタイル（通常時） */
.company-item {
    display: block;
    position: relative;
    border: 3px solid rgba(250, 250, 250, 0.7); /* 枠線の白を#FAFAFAベースの透過に修正 */
    border-radius: 12px;
    height: 150px;
    text-decoration: none;
    overflow: hidden;
    background-color: rgba(250, 250, 250, 0); /* 通常時は透明（ベースは#FAFAFA） */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ボタンのインナーコンテナ */
.company-item-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

/* ボタン内のタイトル（ごあいさつ など） */
.company-item-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FAFAFA; /* 通常時は#FAFAFAの文字色に修正 */
    display: block;
    transform: translateY(14px); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease;
}

/* view more テキスト */
.company-item-more {
    font-family: "Futura", "Geologica", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333333;
    margin-top: 8px;
    display: block;
    position: relative;
    border-bottom: 1.5px solid #0082D2;
    padding-bottom: 2px;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}


/* ------------------------------------------
   ホバー（マウスを重ねた時）のデザイン変化
------------------------------------------ */

/* セクション全体：ホバー時に背景幕を一瞬明るく透過させる 
.home-company-section:hover .company-bg::after {
    background-color: rgba(0, 0, 0, 0.2); 
}*/

/* セクション全体：ホバー時にcompany-itemの背景をほんのり明るく透過させる */
.home-company-section:hover .company-item {
    background-color: rgba(250, 250, 250, 0.15) !important;
}

/* セクション全体：ホバー時に COMPANY タイトルを濃いグレーにする 
.home-company-section:hover .company-title {
    color: #333333;
}*/

/* 3. 【競り勝ち指定】さらに「その中の特定のボタン」にマウスが乗った時：そこだけをパキッと白い座布団（0.95）にする */
.home-company-section .company-item:hover {
    background-color: rgba(250, 250, 250, 0.95) !important; /* !importantで0.15の命令に競り勝つ */
    border-color: rgba(250, 250, 250, 0);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* ホバー時：タイトル（ごあいさつ）の設定 */
.company-item:hover .company-item-title {
    color: #333333;
    transform: translateY(-4px);
}

/* ホバー時：下から view more がふわっと競り上がる挙動 */
.company-item:hover .company-item-more {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================
   【確定版・上書き】スマホ用：COMPANYセクション（右端丸矢印UI版）
   ========================================== */
@media (max-width: 768px) {
    /* セクション全体の余白調整 */
    .home-company-section {
        padding: 60px 0;
    }

    /* コンテナの左右余白 */
    .company-container {
        padding: 0 24px;
    }

    /* セクションタイトルを中央寄せ */
    .company-title {
        font-size: 32px;
        margin-bottom: 40px;
        text-align: center;
    }
	
    /* 4つのボタンを縦1列に並べる */
    .company-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 各カードの基本スタイル：不透明な白カードで固定し、矢印の配置基準（relative）をセット */
    .home-company-section .company-item,
    .home-company-section:hover .company-item {
        height: 120px;
        background-color: rgba(250, 250, 250, 0.95) !important;
        border-color: rgba(250, 250, 250, 0) !important;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06) !important;
        position: relative !important; /* 矢印の配置基準 */
        transform: translateY(0) !important;
    }
    
    /* スマホで直接カードをタップ、または指が触れている間、箱全体を3px浮き上がらせる（共通仕様に同期） */
    .home-company-section .company-item:hover,
    .home-company-section .company-item:active {
        transform: translateY(-3px) !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
    }
    
    /* 大タイトル（ごあいさつ等）：文字を濃いグレーにし、カードの「真ん中」に綺麗に配置 */
    .home-company-section .company-item .company-item-title,
    .home-company-section:hover .company-item .company-item-title,
    .home-company-section .company-item:hover .company-item-title {
        color: #333333 !important;
        transform: translateY(0) !important; /* くどいmore文字が消えるため、上下中央（0）に戻してスッキリ整えます */
    }
    
    /* 「view more >」の古いテキスト：スマホ時は完全に非表示（削除） */
    .home-company-section .company-item .company-item-more {
        display: none !important;
    }

    /* ----------------------------------------------------------------------
       COMPANY専用：右端中央に美しい「薄いグレー」の丸矢印UIを配置
       ---------------------------------------------------------------------- */
    
    /* 外側の「円（◯）」の設定：白背景に映える上品な薄いグレーの境界線 */
    .home-company-section .company-item::before {
        content: "" !important;
        position: absolute;
        top: 50%;
        right: 24px;
        transform: translateY(-50%);
        width: 34px;
        height: 34px;
        border: 1px solid rgba(51, 51, 51, 0.5); 
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0);
        z-index: 10;
        transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, border-color 0.2s ease !important;
    }

    /* 内側の「矢印（＞）」の設定：真右スライドバグ対策済み */
    .home-company-section .company-item::after {
        content: "" !important;
        position: absolute;
        top: 50%;
        right: 39px;                /* カンペキな中央値（39px）をそのまま適用 */
        width: 6px;
        height: 6px;
        border-top: 1.5px solid #888888; /* 落ち着いたグレーの矢印 */
        border-right: 1.5px solid #888888;
        transform: translateY(-50%) rotate(45deg); 
        z-index: 11;
        transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* ----------------------------------------------------------------------
       【タップ連動】指が触れた瞬間、丸矢印だけが「真右」に美しく走る
       ---------------------------------------------------------------------- */
    
    /* タップ時：外側の「丸（◯）」の動き */
    .home-company-section .company-item:hover::before,
    .home-company-section .company-item:active::before {
        transform: translateY(-50%) translateX(3px) !important; 
        background-color: rgba(0, 130, 210, 0.08) !important; /* コーポレートブルー（#0082D2）のベールがほんのり染まる */
        border-color: rgba(0, 130, 210, 0.4) !important;
    }

    /* タップ時：内側の「矢印（＞）」の動き（高さを下にズラさずに真右にスライド） */
    .home-company-section .company-item:hover::after,
    .home-company-section .company-item:active::after {
        transform: translateY(-50%) translateX(3px) rotate(45deg) !important; 
        border-color: #0082D2 !important; /* 矢印もコーポレートブルーに鮮やかに変化 */
    }
}


/* ==========================================================================
   【全共通：PC・スマホ対応】カードクリック時（押し込み）のアニメーション
   ========================================================================== */

/* 通常時のカードに、滑らかに動くためのアニメーション速度（0.15秒）を設定 */
.home-company-section .company-grid .company-item {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.4s ease, border-color 0.4s ease !important;
}

/* 【核心】カードがクリック（タップ）された瞬間の挙動 */
.home-company-section .company-grid .company-item:active {
    /* 1. 箱を少しだけ上に浮き上がらせる（1ミリ＝-3px分、スッと上に移動） */
    transform: translateY(-3px) !important;
    
    /* 2. 浮き上がった分、下側の影（ドロップシャドウ）を少しだけ強く・深くしてリアルな立体感を演出 */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================
   事業内容（BUSINESS）セクション
========================================== */
.home-business-section {
    background-color: #FAFAFA;
	/* 【修正】下側の余白（padding-bottom）を 100px から 0 に変更 */
    padding: 100px 0 0 0;
    width: 100%;
    box-sizing: border-box;
}

.business-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* セクションタイトル設定（Futuraベースで統一） */
.business-title {
    font-family: "Futura", "Geologica", "Helvetica Neue", Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #333333;
    line-height: 1.2;
    margin-bottom: 60px;
    text-align: left;
    letter-spacing: 0.1em;
}

.business-subtitle {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin-top: 8px;
    letter-spacing: 0.02em;
}

.business-content {
    width: 100%;
}

/* 画像の上に文字を重ねるためのベースボックス */
.business-inner-box {
    position: relative;
    width: 100%;
    height: 320px; /* PC時のボックスの高さを固定 */
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
	
    /* 【追加】通常時は影を付けず、アニメーションの準備をしておく */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    
    /* 【追加・修正】box-shadowの変化も滑らか（0.4秒間）にするように指定 */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 背景画像の配置と白マスクの設定 */
.business-img-wp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 白を重ねて背景写真を明るく透かせるマスク（通常時は75%透過） */
.business-img-wp::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 2;
    transition: background-color 0.4s ease;
}

.business-img-wp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画像の上に完全に重ねるレイヤー */
.business-text-wp {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    box-sizing: border-box;
}

.business-text-inner {
    width: 100%;
    text-align: center;
}

/* 事業内容の説明テキスト（通常時） */
.business-lead-text {
    font-family: "Noto Sans JP", sans-serif;
    color: #333333;
    font-weight: 500;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 2.2;
    letter-spacing: 0.05em;
    margin: 0 auto;
    max-width: 850px;
    text-align: center;
    
    /* 【移動アニメーションの核】通常時は下側に少し下げて中央に見せる */
    transform: translateY(16px); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.business-lead-text .pc-only {
    display: inline;
}

/* リンクボタンエリア（通常時） */
.business-link-area {
    display: flex;
    justify-content: center;
    
    /* 通常時は不透明度0で隠し、少し下側に配置しておく */
    opacity: 0;
    transform: translateY(24px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

/* 「事業内容はこちら >」のリンクボタン */
.business-link-btn {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    text-decoration: none;
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 1.5px solid #0082D2;
}


/* ------------------------------------------
   ホバー・クリック（マウスを重ねた時・タップした時）のデザイン変化
------------------------------------------ */

/* 通常時のカードに、滑らかに動くための共通アニメーション速度（0.15秒）を設定 */
.home-business-section .business-inner-box {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.4s ease !important;
}

/* ボックス全体にホバーした時、白マスクを少し濃くして文字をより引き立たせる設定 */
.home-business-section .business-inner-box:hover .business-img-wp::after {
    background-color: rgba(255, 255, 255, 0.75);
}

/* ホバー時：説明文をスッと上に移動させてボタンのスペースを空ける */
.home-business-section .business-inner-box:hover .business-lead-text {
    transform: translateY(-4px);
}

/* ホバー時：下からボタンがふわっと競り上がってくる挙動（動きを滑らかにするためtransitionを追加） */
.home-business-section .business-inner-box:hover .business-link-area {
    opacity: 1;
    transform: translateY(12px);
    transition: transform 0.15s ease, opacity 0.15s ease !important; /* クリック時の動きを滑らかにするためのお守り */
}

/* 【新・理想の挙動】リンクボタンがクリック（:active）された瞬間だけ、ボタンエリア自体をさらに上に持ち上げる */
.home-business-section .business-inner-box .business-link-area:active {
    /* ホバー時の定位置（12px）から、さらに3px分だけスッと上に引き上げる（12px - 3px = 9px） */
    transform: translateY(9px) !important;
}
 
/* ==========================================
    【レスポンシブ】スマートフォン表示：BUSINESSセクション（最適化版）
========================================== */
@media (max-width: 768px) {
    .home-business-section {
        padding: 60px 0 0 0;
    }

    .business-container {
        padding: 0 24px;
    }

    .business-title {
        font-size: 32px;
        margin-bottom: 40px;
        text-align: center;
    }

    /* ----------------------------------------------------------------------
       【一本化】ビジネスアウターボックス基本スタイル＆タップエフェクト
       ---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
       BUSINESSセクション：スマホ表示の初期露出＆タップ連動（確定版）
       ---------------------------------------------------------------------- */
    .home-business-section .business-inner-box {
        height: auto; 
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
    }

    /* 白マスク：最初からPCホバー時と同じ「75%」の濃さに固定 */
    .home-business-section .business-img-wp::after,
    .home-business-section .business-inner-box:hover .business-img-wp::after {
        background-color: rgba(255, 255, 255, 0.75) !important;
    }

    /* 説明テキスト：最初から上に引き上げた定位置（-4px）に美しくロック */
    .home-business-section .business-lead-text,
    .home-business-section .business-inner-box:hover .business-lead-text {
        font-size: 14px;
        line-height: 2.0;
        max-width: 100%;
        text-align: left;
        transform: translateY(-4px) !important;
    }

    .home-business-section .business-lead-text .pc-only {
        display: none;
    }
    
    /* リンクボタンエリア：通常時は「12px」に露出固定し、タップした瞬間だけは「9px」への移動を許可する */
    .home-business-section .business-link-area,
    .home-business-section .business-inner-box:hover .business-link-area {
        opacity: 1 !important;
        transform: translateY(12px); /* !importantを削除して、タップ時に動ける隙間（柔軟性）を作りました */
        justify-content: center;
        transition: transform 0.15s ease !important; /* スマホでも滑らかに動かすためのお守り */
    }
    
    /* 【スマホ専用：競り勝ち指定】スマホで直接ボタンエリアをタップ、または指が触れている間 */
    .home-business-section .business-inner-box .business-link-area:hover,
    .home-business-section .business-inner-box .business-link-area:active {
        transform: translateY(9px) !important; /* 指が触れた瞬間に強制的に3px分上に引き上げる！ */
    }
    
    .home-business-section .business-link-btn {
        font-size: 14px;
        margin: 0 auto;
    }

    /* ------------------------------------------
       【追加】スマホ・タブレットでのタップ（ホバー）時の挙動
    ------------------------------------------ */
    
    /* タップ時に白マスクを少し濃くする */
    .business-inner-box:hover .business-img-wp::after {
        background-color: rgba(255, 255, 255, 0.75);
    }

    /* タップ時に説明文を上に引き上げる */
    .business-inner-box:hover .business-lead-text {
        transform: translateY(-4px);
    }

    /* タップ時に下からボタンをふわっと出現させる */
    .business-inner-box:hover .business-link-area {
        opacity: 1;
        transform: translateY(12px); 
    }
}


/* ==========================================
   お知らせ（NEWS）セクション
========================================== */
.home-news-section {
    background-color: #FAFAFA; /* ベースの薄いグレー背景 */
    padding: 100px 0 0 0;
    width: 100%;
    box-sizing: border-box;
}

.news-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* セクションタイトル設定（Futuraベースで統一） */
.news-title {
    font-family: "Futura", "Geologica", "Helvetica Neue", Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #333333;
    line-height: 1.2;
    margin-bottom: 60px;
    text-align: left;
    letter-spacing: 0.1em;
}

.news-subtitle {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin-top: 8px;
    letter-spacing: 0.02em;
}

/* リスト全体のスタイル消去 */
.news-list {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
    border-top: 1px solid #DDDDDD; /* 一番上の細い境界線 */
}

/* 各行の設定 */
.news-item {
    border-bottom: 1px solid #DDDDDD; /* 各行を区切る細い境界線 */
}

/* 行全体のリンクエリア設定（横並び） */
.news-link {
    display: flex;
    align-items: center;
    padding: 22px 10px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* 行全体をホバーした時にほんのり背景を白くして反応させる */
.news-link:hover {
    background-color: #F9F9F9;
}

/* 日付とNEWバッジのラッパー */
.news-date-wp {
    flex: 0 0 160px; /* 固定ページの幅と完全に同期 */
    display: flex;
    align-items: center;
    text-align: left;
}

/* 日付テキスト */
.news-date {
    font-family: "Futura", "Geologica", sans-serif;
    font-size: 14px;
    color: #888888;
    line-height: 1;
    display: inline-block;
}

/* ★固定ページと完全に同期した「ふわふわ浮遊」NEW!バッジ★ */
.home-news-section .news-new-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    background-color: #0082d3; /* 赤から洗練されたコーポレートブルーへ */
    padding: 2px 7px;
    border-radius: 3px;
    margin-right: 12px;
    line-height: 1.2;
    display: inline-block;
    flex-shrink: 0;
    animation: homeNewsBadgeFloat 2.5s ease-in-out infinite;
    will-change: transform;
}

/* TOPページ専用のバッジ浮遊アニメーション定義 */
@keyframes homeNewsBadgeFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* 記事タイトル */
.news-item-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    color: #333333;
    margin: 0;
    line-height: 1.5;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 文字が長すぎる場合は「...」で自動省略 */
    transition: color 0.2s ease;
}

/* ホバー時に記事タイトルもコーポレートカラーに */
.news-link:hover .news-item-title {
    color: #0082d3;
}

/* 下部ボタンエリア */
.news-btn-area {
    display: flex;
    justify-content: center;
}

/* 「view more >」ボタンの設定 */
.news-more-btn {
    display: inline-block;
    font-family: "Futura", "Geologica", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    text-decoration: none;
    text-align: center;
    line-height: 54px;
    
    width: 240px;
    height: 56px;
    border: 1px solid #999999;
    border-radius: 6px;
    
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ボタンホバー時：白黒反転 */
.news-more-btn:hover {
    background-color: #333333;
    color: #FAFAFA;
    border-color: #333333;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* ==========================================
   【レスポンシブ】スマートフォン表示
========================================== */
@media (max-width: 768px) {
    .home-news-section {
        padding: 60px 0 0 0;
    }

    .news-container {
        padding: 0 24px;
    }

    .news-title {
        font-size: 32px;
        margin-bottom: 40px;
        text-align: center;
    }

    /* スマホ時は日付とタイトルを縦並びにして窮屈さを解消 */
    .news-link {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 5px;
    }

    .news-date-wp {
        width: 100%;
        flex: none;
        margin-bottom: 6px;
    }

    .news-item-title {
        font-size: 14px;
        line-height: 1.4;
        white-space: normal; /* スマホ時は折り返しを許可 */
        overflow: visible;
        text-overflow: clip;
    }
    
    .news-more-btn {
        width: 100%;
    }
}



/* ==========================================
   採用・問い合わせ（RECRUIT & CONTACT）セクション
========================================== */
.home-cta-section {
    background-color: #FAFAFA; /* セクション全体のベース背景を#FAFAFAに統一 */
    padding: 100px 0;
    width: 100%;
    box-sizing: border-box;
}

.cta-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* 各ボックスの基本スタイル（通常時：画像の上に文字を重ねるベース） */
.cta-item {
    display: block;
    position: relative; /* 内部の画像や文字を絶対配置するための基準点 */
    border: 1px solid rgba(250, 250, 250, 0.2); /* 通常時は枠線を馴染ませる */
    border-radius: 4px;
    height: 180px;
    text-decoration: none;
    overflow: hidden; /* 画像の角丸はみ出しをカット */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 【重要】各ボックス固有の背景写真と、通常時の黒マスク（二層構造） */
.cta-item-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 通常時は白文字を引き立たせるために黒の透過マスク（60%）を重ねる */
.cta-item-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    transition: background-color 0.4s ease;
}

.cta-item-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を崩さずにボックスいっぱいに広げる */
}

/* 画像の上に完全に重ねるインナーコンテンツ */
.cta-item-inner {
    position: relative;
    z-index: 3; /* 画像やマスクよりも上に配置 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

/* ボックス内のメインタイトル */
.cta-item-title {
    font-family: "Futura", "Geologica", sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #FAFAFA;
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.1em;
    display: block;
    
    transform: translateY(14px); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s ease;
}

.cta-item-subtitle {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-weight: normal;
    margin-top: 6px;
    letter-spacing: 0.05em;
}

/* ホバー時に下から現れるテキスト */
.cta-item-more {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin-top: 10px;
    display: block;
    position: relative;
    border-bottom: 1.5px solid #0082D2;
    padding-bottom: 2px;
    
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}


/* ------------------------------------------
   ホバー（マウスを重ねた時・タップした時）の挙動
------------------------------------------ */

/* ホバー時：ボックスの背景を#FAFAFAベースの白マスク（75%）へ反転させる */
.cta-item:hover .cta-item-bg::after {
    background-color: rgba(250, 250, 250, 0.75);
}

/* 各ボックス自体のホバー変化（影を浮き上がらせる） */
.cta-item:hover {
    border-color: rgba(250, 250, 250, 0);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* BUSINESSと統一した綺麗な影 */
}

/* ホバー時：タイトルを上に引き上げ、文字色を暗くする */
.cta-item:hover .cta-item-title {
    color: #333333;
    transform: translateY(-4px);
}

/* ホバー時：下からボタンテキストを滑り込ませる */
.cta-item:hover .cta-item-more {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================
   【レスポンシブ】スマートフォン表示
========================================== */
@media (max-width: 768px) {
    .home-cta-section {
        padding: 60px 0;
    }

    .cta-container {
        padding: 0 24px;
    }

    .cta-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

/* ----------------------------------------------------------------------
       RECRUIT & CONTACTセクション：スマホ専用・右端丸矢印UI実装（確定版）
       ---------------------------------------------------------------------- */
    
    /* 1. 各カードの基本スタイル（PCの暗めの背景のまま固定・不要なmore文字を非表示化） */
    .cta-item {
        height: 150px;
        border-color: rgba(250, 250, 250, 0);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(0);
        position: relative; /* 矢印を絶対に右端に配置するための基準点 */
    }
    
    /* 背景色固定：スマホ時は通常時もホバー時も、PC初期状態の「暗めのマスク」を100%維持 */
    .home-cta-section .cta-item .cta-item-bg::after,
    .home-cta-section .cta-item:hover .cta-item-bg::after {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    /* メインタイトル：スクショ通りの綺麗な中央配置に固定 */
    .home-cta-section .cta-item .cta-item-title,
    .home-cta-section .cta-item:hover .cta-item-title {
        color: #ffffff !important;
        transform: translateY(0) !important;
    }
    
    /* 「はこちら >」の古いテキスト：スマホ時は非表示（削除） */
    .home-cta-section .cta-item .cta-item-more {
        display: none !important;
    }

    /* ----------------------------------------------------------------------
       【確実な手法に変更】外側の「白い綺麗な正円（◯）」を作る設定
       ---------------------------------------------------------------------- */
    .home-cta-section .cta-item::before {
        content: "" !important;
        position: absolute;
        top: 50%;
        right: 24px;                /* 右端から24pxの内側 */
        transform: translateY(-50%); /* 完璧な上下中央配置 */
        
        width: 34px;                /* 丸の横幅 */
        height: 34px;               /* 丸の縦幅 */
        border: 1px solid rgba(255, 255, 255, 0.6); /* 繊細な白の線 */
        border-radius: 50%;         /* 完全な正円 */
        background-color: rgba(255, 255, 255, 0);
        z-index: 10;
        
        transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease !important;
    }

    /* 【確実な手法に変更】内側の「＞」の矢印をCSSの線で作る設定 */
    .home-cta-section .cta-item::after {
        content: "" !important;
        position: absolute;
        top: 50%;
        right: 39px;                /* 丸の真ん中に来るように位置を微調整 */
        
        /* ここがプロの技：上と右だけに1.5pxの白線を引き、45度回転させて「＞」の形を物理的に作ります */
        width: 6px;
        height: 6px;
        border-top: 1.5px solid #ffffff;
        border-right: 1.5px solid #ffffff;
        transform: translateY(-50%) rotate(45deg); /* 45度回転 */
        z-index: 11;
        
        transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* ----------------------------------------------------------------------
       【タップ連動】指が触れた瞬間、丸と中の矢印が連動して右にスッと走る
       ---------------------------------------------------------------------- */
    
    /* タップ時：外側の「丸（◯）」の動き */
    .home-cta-section .cta-item:hover::before,
    .home-cta-section .cta-item:active::before {
        transform: translateY(-50%) translateX(3px) !important; /* 右に3pxスライド */
        background-color: rgba(255, 255, 255, 0.15) !important; /* ほんのり中身を白く */
        border-color: rgba(255, 255, 255, 1) !important;
    }

/* 【修正：上書き対象】中の「矢印（＞）」のタップ時の動き */
    .home-cta-section .cta-item:hover::after,
    .home-cta-section .cta-item:active::after {
        /* 順番を変更：【先に】真右へ3pxスライド（translateX）させてから、【最後に】45度回転させる */
        transform: translateY(-50%) translateX(3px) rotate(45deg) !important;
    }
}


/*==========================================================================================footer.php*/

/* ==========================================
   FOOTER SECTION
========================================== */
.site-footer {
    background-color: #FFFFFF;
    color: #333333;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding-top: 60px;
}

.footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 60px;
    position: relative;
}

/* --- SITEMAP AREA --- */
.footer-nav-block {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    max-width: 650px;
    margin-right: 40px;
}

.footer-nav-col {
    flex: 1;
}

.footer-menu-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin: 0 0 12px 0;
}

.footer-nav-col .margin-top-20 {
    margin-top: 20px;
}

.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-list li {
    margin-bottom: 8px;
}

.footer-menu-list li a {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    color: #333333;
    text-decoration: none;
    transition: opacity 0.2s ease;
    display: inline-block;
}

.footer-menu-list li a:hover {
    opacity: 0.6;
}

/* --- LOGO & ADDRESS BLOCK --- */
.footer-info-block {
    flex: 0 0 300px;
    text-align: left;
}

.footer-logo {
    margin-bottom: 18px;
    /*border-left: 1px solid #0082D3;*/
    padding-left: 10px;
}

.footer-logo img {
    max-width: 260px;
    height: auto;
    display: block;
}

.footer-address {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    line-height: 1.6;
    color: #333333;
    margin: 0;
}

/* --- PAGE TOP BUTTON --- */
/* --- 右端：丸いページトップボタンの再現（PC表示） --- */
.footer-pagetop-wp {
    position: fixed;
    right: 40px;
    bottom: 90px;
    z-index: 9999;
    
    /* 【追加】初期状態は透明（非表示）にし、少し下にずらしておく */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    
    /* 【追加】出現時のふわっとしたアニメーション速度（0.3秒） */
    transition: all 0.3s ease;
}

/* 【新設】スクロールが指定位置を超えたら、このクラスがjQueryで自動付与されます */
.footer-pagetop-wp.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* 定位置に浮かび上がらせる */
}

.footer-pagetop-btn {
    display: block;
    width: 60px;
    height: 60px;
    background-color: #CBE4F5;
    border-radius: 50%;
    position: relative;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 画面固定時に見やすくなるよう薄い影を追加 */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.footer-pagetop-btn:hover {
    background-color: #A9D1EC;
    transform: translateY(-2px); /* PC時にホバーしたら少し浮くおまけエフェクト */
}

/* ボタン内部の白矢印 */
.footer-pagetop-btn::after {
    content: "";
    position: absolute;
    top: 55%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-top: 3px solid #FFFFFF;
    border-left: 3px solid #FFFFFF;
    transform: translate(-50%, -50%) rotate(45deg);
}


/* --- 最下部：鮮やかなブルーのコピーライトエリア --- */
.footer-bottom {
    background-color: #0082D3;
    width: 100%;
    padding: 18px 0;
    text-align: center;
    position: relative;
    z-index: 10000; /* 固定ボタンがこの青い帯の下に綺麗に潜り込むためのレイヤー順位 */
}

.copyright {
    font-family: "Futura", "Geologica", sans-serif;
    font-size: 13px;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: 0.03em;
}


/* ==========================================
   【レスポンシブ】スマートフォン表示
========================================== */
@media (max-width: 768px) {
    .site-footer {
        padding-top: 40px;
    }

    .footer-container {
        padding: 0 24px;
    }

    .footer-main {
        flex-direction: column;
        align-items: center;
        padding-bottom: 30px;
    }

    .footer-nav-block {
        display: none;
    }

    .footer-info-block {
        flex: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .footer-logo {
        border-left: none;
        padding-left: 0;
        margin-bottom: 15px;
    }

    .footer-logo img {
        margin: 0 auto;
        max-width: 240px;
    }

    .footer-address {
        font-size: 12px;
        line-height: 1.7;
    }

    /* 【重要】スマホ表示時の画面固定位置を微調整 */
    .footer-pagetop-wp {
        position: fixed;
        right: 20px;  /* スマホは画面が狭いので端に寄せる */
        bottom: 70px; /* スマホの青帯の高さに合わせた下からの距離 */
    }
    
    .footer-pagetop-btn {
        width: 50px;  /* スマホ用にボタンを一回りコンパクトに */
        height: 50px;
    }
    
    .footer-pagetop-btn::after {
        width: 11px;
        height: 11px;
        border-top: 2.5px solid #FFFFFF;
        border-left: 2.5px solid #FFFFFF;
    }

    .footer-bottom {
        padding: 18px 0;
    }

    .copyright {
        font-weight: normal;
        font-size: 12px;
        opacity: 0.95;
    }
}

/* ==========================================
   【全共通】スクロール時のふわっと出現アニメーション
========================================== */

/* 1. 動かしたいセクションの初期状態（最初は透明で、少し下に下げておく） */
.home-intro-section,
.home-company-section,
.home-business-section,
.home-news-section,
.home-cta-section {
    opacity: 0;
    transform: translateY(40px); /* 40px下から浮き上がらせる */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: opacity, transform; /* ブラウザの描画を滑らかにするお守り */
}

/* 2. スクロールが到達してクラス「is-visible」がついた瞬間の状態（本来の位置へ戻る） */
.home-intro-section.is-visible,
.home-company-section.is-visible,
.home-business-section.is-visible,
.home-news-section.is-visible,
.home-cta-section.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}