/* style.css (最終修正版) */

*, *::before, *::after {
    box-sizing: border-box;
}

/* ===============
   基本スタイル
   =============== */
body {
    font-family: sans-serif;
    margin: 0;
}


/* ===================================
   ヘッダーのスタイル（完全版）
   =================================== */

/* ヘッダー全体を囲むコンテナ */
.header-inner {
    display: flex;
    justify-content: space-between; /* 両端に配置 */
    align-items: center;             /* 上下中央揃え */
    padding: 10px 30px;              /* ヘッダーの余白 */
}

/* ロゴのスタイル */
.header-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.header-logo img {
    height: 50px;
    margin-right: 10px;
}
.header-logo h1 {
    font-size: 1.5em;
    margin: 0;
}

/* 右側のコンテンツ全体を囲むコンテナ */
.header-right-content {
    display: flex;
    align-items: center; /* このコンテナ内の要素を中央揃え */
    gap: 30px;           /* 電話番号エリアとボタンの間の隙間 */
}

/* 電話番号と受付時間を囲むエリア */
.header-contact {
    text-align: right; /* このエリア内のテキストを右揃えに */
}

/* 電話番号の行 */
.header-tel {
    display: flex;
    justify-content: flex-end; /* 右揃えにする */
    align-items: center;
    margin-bottom: 2px;
}
.header-tel .icon-phone {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    fill: #333;
}
.header-tel a {
    text-decoration: none;
    color: inherit;
}
.header-tel span {
    font-size: 1.8em;
    font-weight: bold;
    color: #333;
}

/* 受付時間の行 */
.header-reception-time {
    font-size: 0.8em;
    color: #666;
}

/* お問い合わせボタン */
.header-cta-button {
    background-image: linear-gradient(45deg, #24bed5, #1893a8);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: all 0.3s;
}

/* ヘッダーのお問い合わせボタン内アイコンのスタイル */
.header-cta-button .icon-mail {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    margin-right: 8px;
    position: relative;
    top: 1px;
}

.header-cta-button:hover {
    transform: translateY(-3px); /* animated-cta-buttonと同じ値に揃えます */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* animated-cta-buttonと同じ値に揃えます */
}

/* ===============
   ハンバーガーメニューのボタン（PCでは隠す）
   =============== */
.hamburger-button {
    display: none;
}


/* ===============
   追従ヘッダーとナビゲーションのスタイル
   =============== */
.sticky-header-container {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.global-nav {
    background-color: #ffffff;
    border-top: 1px solid #eee;
}
.global-nav > ul {
    display: grid;
    grid-template-columns: 140px repeat(7, 1fr);
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.global-nav > ul > li {
    text-align: center;
    border-left: 1px solid #e0e0e0;
}
.global-nav > ul > li:first-child {
    border-left: none;
}
.global-nav li a {
    display: block;
    padding: 15px 0;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: background-color 0.2s;
    font-size: 15px;
}
.global-nav li a:hover {
    background-color: #f5f5f5;
}


/* ===============
   ドロップダウンメニューのスタイル
   =============== */
.global-nav li.has-submenu {
    position: relative;
}
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1caac3;
    padding: 10px 0;
    margin-top: 5px;
    border-radius: 5px;
    min-width: 300px;
    z-index: 10;
    list-style-type: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.global-nav li.has-submenu:hover > .submenu {
    display: block;
}
.submenu li a {
    padding: 12px 20px;
    color: white;
    font-weight: normal;
    white-space: nowrap;
}
.submenu li a:hover {
    background-color: #158a9e;
}
.submenu::before {
    content: '';
    position: absolute;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #1caac3 transparent;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
}


/* ===============
   トップページ：ヒーローエリア
   =============== */
/* ▼▼▼【重要】.hero のスタイルを元の状態に戻します ▼▼▼ */
.hero {
    background-image: url('hero-background.jpg');
    background-size: cover;
    background-position: center 100%;
    background-repeat: no-repeat;
    padding: 100px 40px;
    text-align: left;
    color: #333;
    position: relative;
    overflow: hidden;
    background-attachment: fixed; /* パララックス効果をここで指定 */
}


/* ▼▼▼【ここから追加】ヒーローエリアを覆うカバーとアニメーション ▼▼▼ */

/* カバーのスタイル */
.hero-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* サイトの背景色に合わせてください */
    z-index: 1; /* コンテンツより手前、背景より奥に配置 */

    /* アニメーションの設定 */
    animation-name: slide-out-up;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-delay: 0.3s; /* 少し遅れてアニメーション開始 */
    animation-fill-mode: forwards; /* アニメーション終了時の状態を維持 */
}


/* カバーが上に消えていくアニメーション */
@keyframes slide-out-up {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%); /* 上にスライドして消える */
    }
}
.hero-inner {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 40px;
    display: inline-block;
    border-radius: 8px;
    position: relative; /* z-indexを有効にするため */
    z-index: 2;
    
    
}
.hero-inner h2 {
    font-size: 3.5em;
    margin: 0 0 15px 0;

    /* ▼▼▼ 文字色をグラデーションにする設定を追加 ▼▼▼ */
    background: linear-gradient(45deg, #1caac3, #1893a8); /* 青系のグラデーション */
    -webkit-background-clip: text; /* 背景をテキストの形で切り抜く (Chrome/Safari用) */
    background-clip: text;         /* 背景をテキストの形で切り抜く */
    color: transparent;            /* 元の文字色を透明にする */
    font-weight: 900;              /* 文字を少し太くして見やすくする */
}

.hero-inner p {
    font-size: 1.1em;
    margin: 5px 0;
}

/* トップページの横スクロールを無効にする */
.home {
    overflow-x: hidden;
}


/* ===============
   トップページ：コンテンツセクション共通
   =============== */
.section-title {
    text-align: center;
    margin-bottom: 50px;
}
.section-title h2 {
    font-size: 2.2em;
    margin: 0;
}
.section-cta {
    text-align: center;
    margin-top: 50px;
}
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}


/* ===============
   トップページ：パートナーロゴ
   =============== */
.partner-section {
    padding: 60px 20px;
    text-align: center;
}
.partner-section img {
    max-width: 320px;
    height: auto;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: white;
}


/* ===============
   トップページ：選ばれる理由
   =============== */
.reasons-section {
    padding: 120px 20px;
}
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.reason-card {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}
.reason-card h3 {
    font-size: 1.5em;
    margin: 0 0 15px 0;
}
.reason-card p {
    line-height: 1.7;
    margin: 0 0 25px 0;
    flex-grow: 1;
}
.reason-button {
    display: inline-block;
    background-color: #1caac3;
    color: white;
    padding: 10px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease; /* transition を all に変更し、ease を追加 */
}
.reason-button:hover {
    background-color: #1893a8;
    transform: translateY(-3px); /* animated-cta-button と同じ値に揃えます */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* animated-cta-button と同じ値に揃えます */
}

/* 選ばれる理由セクションのカード内画像スタイル */
.reason-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;    /* 画像が引き伸ばされず、領域をきれいに満たすように調整 */
    border-radius: 8px;   /* 画像の角を丸くする */
    margin-bottom: 25px;  /* 画像とタイトルの間の余白 */
}
/* ===============
   下層ページ：選ばれる理由
   =============== */
.feature-list .feature-item {
    display: flex;
    align-items: center;
    gap: 40px; /* 画像とテキストの間の隙間 */
    margin-bottom: 60px;
}

/* 偶数番目のアイテムは、画像とテキストの位置を反転させる */
.feature-list .feature-item:nth-child(even) {
    flex-direction: row-reverse;
}

.feature-list .feature-item:last-child {
    margin-bottom: 0;
}

.feature-image {
    flex: 1;
    max-width: 45%;
}

.feature-image img {
    width: 100%;
    border-radius: 8px;
    display: block; /* 画像下の余分な隙間をなくす */
}

.feature-text {
    flex: 1;
    max-width: 55%;
}

.feature-label {
    color: #1caac3;
    font-weight: bold;
    margin-bottom: 5px;
}

.feature-title {
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 15px;
}

/* ===============
   トップページ：サービス一覧
   =============== */
.home-services-section {
    padding: 120px 20px;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}
.service-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
}
.service-card-link:hover .service-card {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.service-card {
    position: relative; /* オーバーレイのための基準点 */
    padding: 40px 30px;
    border-radius: 8px;
    overflow: hidden; /* 角丸からはみ出した画像を隠す */
    color: white;
    text-align: center;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s;
    z-index: 1;
}

/* --- 画像の上に暗いフィルターをかける --- */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 背景を半透明の黒に戻し、少し濃くする */
    background-color: rgba(0, 0, 0, 0.3);
    /* ↓↓↓ この2行で「ぼかし効果」を追加します ↓↓↓ */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: -1;
}

/* ▼▼▼ この部分を、下の新しいコードに置き換えてください ▼▼▼ */
/* =====【最新版】各サービスカードに固有の背景画像を設定 ===== */
.service-grid .service-card-link:nth-child(1) .service-card {
    background-image: url('tax.jpg');
}
.service-grid .service-card-link:nth-child(2) .service-card {
    background-image: url('mf.jpg');
}
.service-grid .service-card-link:nth-child(3) .service-card {
    background-image: url('startup.jpg');
}
.service-grid .service-card-link:nth-child(4) .service-card {
    background-image: url('souzoku.jpg');
}
/* ▲▲▲ ここまでを置き換え ▲▲▲ */

/* --- カード内の文字やアイコンのスタイル調整 --- */
.service-card .service-icon {
    font-size: 3em;
    margin-bottom: 20px;
    color: white; /* アイコンの色も白に */
}

.service-card h3 {
    font-size: 1.6em;
    margin-bottom: 15px;
    color: white; /* 見出しの色も白に */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* ← 文字に影を追加 */
}
.service-card p {
    color: rgba(255, 255, 255, 0.9); /* 説明文は少し透明度を下げて調整 */
    line-height: 1.8;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* ← 文字に影を追加 */
}

/* --- マウスオーバー時の効果 --- */
.service-card:hover {
    transform: translateY(-10px);
}

.card-button {
    font-weight: bold;
    color: white;              /* ← 文字色を白に変更 */
    align-self: flex-end;
    border: 2px solid white;   /* ← 枠線も白に変更 */
    padding: 8px 25px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
}
.card-button:hover {
    background-color: white;   /* ← 背景色を白に */
    color: #1caac3;           /* ← 文字色をテーマカラーの青に */
}

/* ===============
   トップページ：お知らせ
   =============== */
.home-news-section {
    padding: 120px 0;
}


/* ===============
   フッター前の「お問い合わせ情報」セクション
   =============== */
.pre-footer-contact-section {
    padding: 60px 20px;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
}
.pre-footer-wrapper {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center; /* ← この行を追加 */
}
.pre-footer-col {
    flex: 1;
    border-left: 1px solid #e0e0e0;
    padding-left: 40px;
}
.pre-footer-wrapper > .pre-footer-col:first-child {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
}
.pre-footer-title {
    font-size: 1.2em;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 2px solid #1caac3;
    margin-top: 0;
    margin-bottom: 20px;
}
.pre-footer-wrapper > .pre-footer-col:nth-child(2) {
    text-align: center; /* ← center から left に変更 */
}
.pre-footer-col.contact-col {
    text-align: center; /* ← このように left に変更してください */
}
.pre-footer-col .info-logo a {
    display: flex;
    align-items: center;
    justify-content: center; /* ← この行を追加 */
    text-decoration: none;
    color: inherit;
    margin-bottom: 20px;
}
.pre-footer-col .info-logo h4 {
    font-size: 1.2em;
    margin: 0 0 0 15px;
}
.pre-footer-col .info-logo img {
    height: 40px;
    margin-bottom: 0;
}
.pre-footer-col p {
    font-size: 0.9em;
    line-height: 1.8;
    color: #333;
}
.pre-footer-col .map-container-small iframe {
    width: 100%;
    height: 200px;
    border: none;
    border-radius: 8px;
}
.pre-footer-col .tel-number {
    font-size: 1.8em;
    font-weight: bold;
    color: #333;
}
.pre-footer-col .reception-time {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 20px;
}
/* ボタンだけ中央に配置したい場合 */
.pre-footer-col.contact-col .reason-button {
    display: block;
    margin: 0 auto;
    width: fit-content;
}

/* フッター前「お問い合わせ」セクションをすべて中央揃えにする修正 */

/* 1. カラム内のすべての要素を中央揃えにする */
.pre-footer-col.contact-col {
    text-align: center;
}

/* 2. 「お問い合わせ」というタイトルの下線も、文字幅に合わせて中央に配置する */
.pre-footer-col.contact-col .pre-footer-title {
    display: inline-block;
}

/* ===============
   サイトフッターエリア
   =============== */
.site-footer {
    background-color: #343a40;
    color: #f8f9fa;
    padding: 30px 20px;
}
.footer-main {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
    border-bottom: 1px solid #495057;
}
.footer-info, .footer-links, .footer-map {
    flex: 1;
}
.footer-info { flex: 1.5; }
.footer-map { flex: 1.5; }

.footer-info .info-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-bottom: 20px;
}
.footer-info .info-logo img {
    height: 40px;
}
.footer-info .info-logo h4 {
    font-size: 1.2em;
    margin: 0 0 0 15px;
}
.footer-info p {
    margin: 0 0 15px 0;
    line-height: 1.8;
    font-size: 0.9em;
}
.footer-links h4, .footer-map h4 {
    font-size: 1.2em;
    color: white;
    margin-top: 0;
    margin-bottom: 20px;
}
.footer-links ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.footer-links li a {
    color: #adb5bd;
    text-decoration: none;
    line-height: 2.2;
    font-size: 0.9em;
}
.footer-links li a:hover {
    color: white;
}
.footer-map iframe {
    width: 100%;
    height: 100%;
    min-height: 200px;
    border-radius: 8px;
    border: none;
}
.footer-copyright {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 15px;
    text-align: center;
    font-size: 0.8em;
}


/* ===============
   追従ボタン（サイド・ページトップ）
   =============== */
.side-sticky-buttons {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}
.side-sticky-buttons.show {
    opacity: 1;
    visibility: visible;
}
.sticky-tel-button,
.sticky-mail-button {
    display: block;
    writing-mode: vertical-rl;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 1em;
    padding: 20px 12px;
    transition: opacity 0.3s;
}
.sticky-tel-button:hover,
.sticky-mail-button:hover {
    opacity: 0.8;
}
.sticky-tel-button {
    background-color: #1caac3;
    border-radius: 10px 0 0 10px;
}
.sticky-mail-button {
    background-color: #f59f00;
    margin-top: 1px;
    border-radius: 10px 0 0 10px;
}
.side-sticky-buttons svg {
    margin-bottom: 10px;
    width: 20px;
    height: 20px;
}
#page-top-button {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 50px;
    height: 50px;
    background-color: #1caac3;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    /* ▼▼▼ 以下の2行を追加・修正 ▼▼▼ */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 影の初期状態を追加 */
    transition: all 0.3s ease;
}
#page-top-button:hover {
    transform: translateY(-3px);
}
#page-top-button.show {
    display: flex;
    opacity: 1;
}
#page-top-button svg {
    width: 20px;
    height: 20px;
}


/*
  ▼▼▼【ここから下層ページのスタイル】▼▼▼
  PC・スマホ両方で適用される共通のスタイルです。
*/

/* ===============
   下層ページ共通のスタイル
   =============== */
.page-header {
    background-color: #f8f9fa;
    padding: 30px 40px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.page-header h1 {
    margin: 0;
    font-size: 2.6em; /* ← この値を大きくしました */
}

/* ▼▼▼ ここからが、サービスページに背景画像を設定する部分です ▼▼▼ */

/* --- 背景画像を持つヘッダーに共通のスタイル --- */
.page-service-tax .page-header,
.page-service-mf .page-header,
.page-service-startup .page-header,
.page-service-inheritance .page-header {
    padding: 120px 40px;
    color: white;
    border-bottom: none;
    background-size: cover;
    background-position: center;
}
.page-service-tax .page-header h1,
.page-service-mf .page-header h1,
.page-service-startup .page-header h1,
.page-service-inheritance .page-header h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- 各ページ固有の背景画像 --- */
.page-service-tax .page-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('tax.jpg');
}
.page-service-mf .page-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('mf.jpg');
}
.page-service-startup .page-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('startup.jpg');
}
.page-service-inheritance .page-header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('souzoku.jpg');
}

.page-content {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ★追加: reason.html専用の .page-content 幅 */
.page-reason .page-content {
    max-width: 1200px; /* reason.html のみ、この幅が適用されます */
}

.page-content section {
    margin-bottom: 40px;
}


/* ===============
   下層ページ：サービス一覧ページ
   =============== */
.service-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
a.service-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
a.service-item-link:hover .service-item {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.service-item {
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.2s, box-shadow 0.2s;
}
.service-item h3 {
    margin-top: 0;
    color: #1caac3;
}


/* ===============
   下層ページ：サービス"詳細"ページ
   =============== */
.service-detail-page .service-summary h2 {
    font-size: 1.8em;
    line-height: 1.6;
}
.service-detail-page .service-summary p {
    line-height: 1.8;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.service-recommend {
    background-color: #eef7fb;
    padding: 30px 40px;
    border-radius: 8px;
    margin-bottom: 60px;
}
.service-recommend h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
}
.service-recommend ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
.service-recommend li {
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%231caac3"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>') no-repeat left center;
    background-size: 20px;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 1.1em;
}
.service-content-detail .content-block {
    margin-bottom: 40px;
}
.service-content-detail .content-block h4 {
    border-bottom: 2px solid #1caac3;
    padding-bottom: 8px;
    font-size: 1.3em;
}
/* サービス詳細ページの見出し「主なサービス内容」と「ご契約までの流れ」のスタイル */
.service-content-detail h3,
.service-flow h3 {
    font-size: 1.6em; /* 文字サイズを大きくします */
    text-align: center;   /* 中央揃えにします */
    margin-bottom: 40px;  /* 見出しの下に余白を追加します */
}

/* --- サービスの流れ (service-flow) --- */
.service-flow .flow-steps {
    list-style: none;
    padding-left: 0;
}

/* liは「枠」と「矢印」を縦に並べるための、透明なコンテナです */
.service-flow li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 矢印(::after) は li に設定し、枠の外に配置します */
.service-flow li:not(:last-child)::after {
    content: '↓';
    display: block;
    font-size: 1.8em;
    font-weight: bold;
    color: #1caac3;
    margin: 25px 0; /* 枠と次の枠との間の余白を調整 */
}

/* これが「四角い枠」本体のスタイルです */
.flow-step-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 30px 25px;
    border: 2px solid #e0e0e0; /* 枠線 */
    border-radius: 8px;      /* 枠の角を丸くする */
    width: 100%;
    box-sizing: border-box;
    background-color: white; /* 枠の背景色 */
}

/* 番号とタイトルをまとめるヘッダー部分のスタイル */
.service-flow .flow-step-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.service-flow .flow-step-number {
    font-weight: bold;
    color: #1caac3;
    font-size: 1.1em;
    flex-shrink: 0;
}

.service-flow .flow-step-title {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
}

/* 説明文のスタイル */
.service-flow .flow-step-description {
    margin: 0;
    line-height: 1.8;
    max-width: 650px;
    text-align: center;
}


/* ===============
   下層ページ：スタッフ紹介ページ
   =============== */
.staff-member {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #eee;
}
.staff-member:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.staff-photo {
    flex-shrink: 0;
}
.staff-photo img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
}
.staff-title {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}
.staff-name {
    font-size: 1.8em;
    margin: 5px 0;
}
.staff-qualification {
    font-weight: bold;
    margin: 0 0 25px 0;
}
.staff-bio {
    line-height: 1.8;
}
.staff-section-title {
    font-size: 1.1em;
    border-left: 5px solid #1caac3;
    padding-left: 10px;
    margin-top: 30px;
    margin-bottom: 15px;
}
.staff-history {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
.staff-history li {
    margin-bottom: 8px;
}


/* ===============
   下層ページ：会社概要・採用情報・料金表など
   =============== */
.profile-table, .recruitment-table, .pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
}
.profile-table th, .profile-table td,
.recruitment-table th, .recruitment-table td,
.pricing-table th, .pricing-table td {
    border: 1px solid #e0e0e0;
    padding: 18px;
    vertical-align: top;
}
.profile-table th, .recruitment-table th {
    width: 25%;
    font-weight: bold;
    background-color: #f9f9f9;
    text-align: left;
}
.profile-table td, .recruitment-table td {
    width: 75%;
}
.profile-table td ul {
    margin: 0;
    padding-left: 20px;
}
/* ▼▼▼ このセクションをまるごと置き換え ▼▼▼ */
.pricing-table thead th {
    background-color: #f9f9f9;
    font-weight: bold;
}
.pricing-table {
    text-align: center;
}
/* 項目名（rowspanで結合したセル）を上下中央に配置するスタイル */
.pricing-table td[rowspan] {
    vertical-align: middle;
}

/* --- ここから料金表の背景色設定 --- */

/* 1. まず、全ての料金表をゼブラ模様にする */
.pricing-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
/* 2. ただし、グループ分けテーブルは、一旦すべての行を白に戻す */
.pricing-table.table-grouped tbody tr {
    background-color: #ffffff;
}
/* 3. そして、グループ分けテーブルの中の .shaded-group だけに色を付ける */
.pricing-table.table-grouped .shaded-group {
    background-color: #f9f9f9;
}
/* ▲▲▲ ここまでを置き換え ▲▲▲ */

/* 項目名（rowspanで結合したセル）を上下中央に配置するスタイル */
.pricing-table td[rowspan] {
    vertical-align: middle;
}

.price-subtitle {
    text-align: center;
    font-size: 1.3em;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}
/* 料金表ページの見出し（h2）を中央揃えにする */
.page-content section > h2 {
    text-align: center;
}
.access-section {
    margin-top: 60px;
}
.access-section .address {
    line-height: 1.8;
    margin-bottom: 25px;
}
.access-section-fullwidth {
    margin-top: 60px;
    padding: 60px 0;
    background-color: #f8f9fa;
}
.map-container-fullwidth {
  width: 100%;
  height: 450px;
  line-height: 0;
}
.map-container-fullwidth iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.map-container iframe {
    width: 100%;
    height: 450px;
    border: none;
}
.notes {
    font-size: 0.9em;
    color: #666;
    text-align: left;
}
.recruitment-message {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    line-height: 1.8;
}

/* =====【追加】採用していない旨の案内ボックス ===== */
.recruitment-notice {
    background-color: #fff5f5; /* 背景を薄い赤色に */
    border: 2px solid #e53e3e;   /* 枠線を太く、濃い赤色に */
    color: #c53030;             /* 文字色を赤色に */
    font-weight: bold;           /* 文字を太字にして強調 */
    padding: 25px;
    margin-bottom: 50px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.8;
}
.recruitment-notice p {
    margin: 0; /* pタグのデフォルトの余白をなくす */
}

/* ===============
   下層ページ：お知らせ一覧
   =============== */
.news-list {
    list-style-type: none;
    padding-left: 0;
}
.news-list li {
    border-bottom: 1px solid #eee;
}
.news-list li a {
    display: flex;
    align-items: center;
    padding: 25px 15px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}
.news-list li a:hover {
    background-color: #f8f9fa;
}
/* お知らせ一覧の日付 */
.news-list time {
    background-color: transparent; /* 背景色をなくす */
    color: #1caac3;             /* 文字色を青に変更 */
    padding: 5px 0;              /* 余白を調整 */
    border-radius: 0;            /* 角丸をなくす */
    font-size: 1em;              /* フォントサイズを調整 */
    margin-right: 30px;
    font-weight: bold;
}
.news-list h3 {
    margin: 0;
    font-size: 1.2em;
}
/* ===============
   お問い合わせフォームのスタイル
   =============== */
.contact-intro {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto 30px auto !important;
    padding: 0 !important; /* パディングを一度リセット */
    box-sizing: border-box !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* 念のため、親要素もここで強制的に影響を排除 */
.page-content, .contact-container {
    text-align: unset !important; /* 親からの text-align 継承をリセット */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.contact-form .form-group {
    margin-bottom: 5%;
}
.contact-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.contact-form .required-badge {
    background-color: #e44d26;
    color: white;
    font-size: 0.75em;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: normal;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}
.contact-form textarea {
    resize: vertical;
}
.contact-form .form-submit {
    text-align: center;
    margin-top: 40px;
}
.contact-form .submit-button {
    background-color: #1caac3;
    color: white;
    padding: 15px 60px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s;
}
.contact-form .submit-button:hover {
    background-color: #1893a8;
}

/* 電話番号リンクのスタイル調整 */
.header-tel a,
.tel-number a {
    text-decoration: none; /* 下線を消す */
    color: inherit;      /* 親要素から文字色を継承する（元の黒色にする） */
}

@media (max-width: 768px) {
    /* ... (既存のスマートフォン用スタイル) ... */
    
    .page-content, .contact-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .contact-intro {
        padding: 0 10px !important; /* スマホ用に再設定 */
    }

    /* 質問間の間隔を狭める */
    .contact-form .form-group {
        margin-bottom: 25px;
    }

    /* ラベルの下の余白を調整 (質問と入力フィールドの距離) */
    .contact-form label {
        margin-bottom: 5px;
    }

    /* 入力フィールドの上下の余白を調整 (フィールドの高さ) */
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        padding: 10px;
    }
}

/* ▲▲▲【ここまで】お問い合わせフォームのスタイル ▲▲▲ */


/* ==========================================================
   レスポンシブデザイン（スマートフォン用スタイル）
   ========================================================== */
@media (max-width: 768px) {

    /* --- ヘッダー --- */
    .header-inner {
        justify-content: center;
    }
    .header-logo {
        padding-left: 0px;
        box-sizing: border-box;
    }
    .header-right-content {
        display: none;
    }
    .sticky-header-container {
        position: static;
        box-shadow: none;
    }

    /* --- ハンバーガーボタン --- */
    .hamburger-button {
        display: block;
        position: fixed;
        top: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1500;
    }
    .hamburger-bar {
        display: block;
        position: absolute;
        left: 10px;
        width: 30px;
        height: 2px;
        background-color: #333;
        transition: all 0.3s;
    }
    .hamburger-bar:nth-child(1) { top: 15px; }
    .hamburger-bar:nth-child(2) { top: 24px; }
    .hamburger-bar:nth-child(3) { top: 33px; }

    .hamburger-button.is-active .hamburger-bar:nth-child(1) {
        top: 24px;
        transform: rotate(45deg);
    }
    .hamburger-button.is-active .hamburger-bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-button.is-active .hamburger-bar:nth-child(3) {
        top: 24px;
        transform: rotate(-45deg);
    }
    .page-header, .page-content {
    /* 左右の余白を適切に再設定して、ズレを解消します */
    padding-left: 20px;
    padding-right: 20px;
    }
    .page-header {
    /* 左右の余白を調整してズレを解消 */
    padding-left: 20px;
    padding-right: 20px;
    }

    /* --- スマホ用のスライドメニュー --- */
    .global-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background-color: #f8f9fa;
        z-index: 1400;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
        border-top: none;
    }
    .global-nav.is-open {
        transform: translateX(0);
    }
    .global-nav > ul {
        display: block;
        grid-template-columns: none;
        width: 100%;
        padding: 40px 0 40px 0;
    }
    .global-nav > ul > li {
        border-left: none;
        border-bottom: 1px solid #e0e0e0;
        text-align: left;
    }
    .global-nav > ul > li:first-child {
        border-top: 1px solid #e0e0e0;
    }
    .global-nav li a {
        font-size: 16px;
        font-weight: normal;
        padding: 14px 25px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* スマホメニュー内のサブメニューのスタイル調整 */
    .global-nav li.has-submenu .submenu {
        display: block;                /* サブメニューを表示状態に */
        position: static;              /* PC用の絶対配置を解除 */
        transform: none;               /* PC用の変形を解除 */
        background-color: transparent; /* PC用の背景色をなくす */
        padding: 0;
        margin: 0;
        border-radius: 0;
        min-width: 100%;
        box-shadow: none;              /* PC用の影をなくす */
    }

    /* サブメニューの各項目のスタイル */
    .global-nav .submenu li a {
        padding-left: 45px;          /* 左に余白を作ってインデント（字下げ）する */
        color: #555;                 /* 文字色を少し薄くして階層を表現 */
        font-size: 14px;             /* 文字を少し小さくする */
        background-color: #f0f0f0;   /* 背景色を少し変えて分かりやすくする */
    }

    /* PC表示用のサブメニュー上部の矢印を非表示に */
    .submenu::before {
        display: none;
    }
    /* ▲▲▲ ここまで追加 ▲▲▲ */

    /* 料金シミュレーションの選択ボタン（横並び・スマホ版） */
    .page-nav-buttons {
        gap: 10px;
        padding: 0 20px; /* 左右に20pxの余白を追加 */
        box-sizing: border-box; /* paddingを含めて幅を計算 */
    }

    .page-nav-button {
        width: 35%;          /* 横幅を微調整し、画面端との余白を確保 */
        padding: 5px 5px;
        font-size: 13px;
        line-height: 1.3;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1; /* ボタンが利用可能なスペースを均等に埋めるように */
    }

    /* ▼▼▼ このコードを追記 ▼▼▼ */
    /* 料金シミュレーターのボックスの余白をスマホ用に調整 */
    .simulator-box {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 料金シミュレーターの選択肢を縦並びにするスタイル */
    .radio-group-vertical {
        flex-direction: column; /* 縦に並べる */
        align-items: center;    /* 中央に配置 */
        gap: 1px;              /* ボタン間の隙間を調整 */
        width: 100%;
    }
    .radio-group-vertical label {
        width: 90%;
        max-width: 300px;
        box-sizing: border-box;
        text-align: center;
    }
    
    
    /* --- カラムレイアウトを1列に --- */
    .reasons-grid,
    .service-grid,
    .service-list {
        grid-template-columns: 1fr;
    }

    /* --- フッターエリアを縦並びに --- */
    .pre-footer-wrapper,
    .footer-main {
        flex-direction: column;
        gap: 40px;
    }
    .pre-footer-col {
        border-left: none;
        padding-left: 0;
        text-align: center;
    }
    .pre-footer-title {
        display: inline-block;
    }
    .footer-main {
        padding-bottom: 30px;
        align-items: center;
    }
    .footer-info, .footer-links, .footer-map {
        flex: none;
        width: 100%;
        max-width: 350px;
    }

    /* --- スタッフ紹介を縦並びに --- */
    .staff-member {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* --- 横幅いっぱいセクションに余白を追加 --- */
    .access-section-fullwidth {
        padding: 40px 20px;
    }

    /* --- 追従ボタンは非表示 --- */
    .side-sticky-buttons {
        display: none;
    }   
    
    /* --- 選ばれる理由セクションのモバイル表示（画像、タイトル、本文の調整） --- */

    /* feature-item のFlexbox設定を調整（画像もテキストも中央揃えにするため） */
    .feature-list .feature-item,
    .feature-list .feature-item:nth-child(even) {
        flex-direction: column; /* 要素を縦に並べる */
        align-items: center;    /* 子要素（画像とテキストブロック）を水平方向の中央に配置 */
        gap: 0;                 /* 要素間の隙間をなくす */
        margin-bottom: 60px;
        text-align: center;     /* このコンテナ内のテキストをデフォルトで中央揃えに */
        /* ▼▼▼ 以下の3行を追記 ▼▼▼ */
        background: none;    /* 背景色と背景画像を削除 */
        box-shadow: none;    /* 影を削除 */
        padding: 0;          /* 内側の余白（パディング）を削除 */
    }
    

    /* feature-image (画像コンテナ) のスタイル調整 */
    .feature-image {
        width: 100%;             /* 親要素の幅いっぱいに広げる */
        max-width: 100%;         /* 最大幅の制限をなくす（必要に応じて調整） */
        margin-bottom: 20px;     /* 画像の下に余白 */
        margin-left: auto;       /* 中央配置のため */
        margin-right: auto;      /* 中央配置のため */
        text-align: center;      /* 画像コンテナ内のコンテンツを中央に寄せる */
    }

    /* feature-image 内の img タグ自体のスタイル調整 */
    .feature-image img {
        width: 100%;             /* 親要素の幅いっぱいに広がる */
        /* max-width: 300px;  この行は削除済みのはずです */
        height: auto;
        display: block;
        margin: 0 auto;          /* 画像自体を中央に配置 */
    }

    /* feature-label (REASON 01 など) のスタイル */
    .feature-label {
        display: block !important;
        width: 100% !important;
        margin: 0 auto 10px auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important; /* ★強制的に中央揃えを再指定 */
    }

    /* feature-title (ITツールに強く、効率化を徹底サポート など) のスタイル */
    .feature-title {
        display: block !important;
        width: 100% !important;
        margin: 0 auto 25px auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;

        font-size: 1.5em;
        line-height: 1.4;
        text-align: center !important; /* ★強制的に中央揃えを再指定 */
    }

    /* ▼▼▼【ここから修正】▼▼▼
    */

    /* feature-text のスタイル (本文ブロック全体) */
    .feature-text {
        /* text-align: left !important; を削除し、親(.feature-item)の中央揃えを継承させます */
        width: 100%;
        max-width: none; /* 最大幅の制限を解除 */
        box-sizing: border-box;
    }

    /* feature-text内の本文pタグのみを左揃えにする */
    .feature-text p:not(.feature-label) {
        text-align: left !important; /* ★本文のテキストだけを強制的に左揃え */
        padding: 0;
        width: 100%;
        margin-bottom: 1.5em; /* 段落間の間隔 */
    }

    /* ▲▲▲【ここまで修正】▲▲▲
    */

    .feature-text p:last-child {
        margin-bottom: 0 !important;
    }

    /* お知らせボックスを右寄せに配置 (スマホ版) */
    #animated-news-box {
        display: block;
        position: relative;
        width: 90%;
        max-width: 400px;
        margin-top: 60px; /* 上のテキストとの間隔を確保 */
        left: 10%;        /* 親要素の左端から10%の位置に配置し、右寄せを実現 */
        
        right: auto; 
        bottom: -150px; 
        animation: none;
        opacity: 1;
        position: absolute;
        z-index: 2;
    }

    /* お知らせボックス内のテキストを左寄せに */
    #animated-news-box h3,
    #animated-news-box li {
        text-align: left;
    }

    /* 【ヒーローエリアのスマホ用スタイル最終修正版】 */
    .hero {
        position: relative;
        padding: 30px 20px 220px 20px;
        text-align: center;
        background-position: center center;
    background-attachment: scroll; /* ← この一行を追加してください */
    }

    .hero-inner {
        display: inline-block;
        text-align: center;
        width: auto;
        max-width: 100%;
        margin-bottom: 80px; /* お知らせボックスを下に押し出すための余白 */
    }

    .hero-inner h2 {
        font-size: 2.0em;
        line-height: 1.5;
        text-align: center;
    }

    /* ▼▼▼ スマホ版トップページのヘッダー背景色 ▼▼▼ */
    body.home .header {
        background-color: #cdfffe;
    }
}

/* =====【追加】スクロールアニメーション設定 ===== */
.fade-in {
    opacity: 0;
    transition: opacity 1.5s, transform 0.8s;
    transition-timing-function: ease-out;
}

.fade-in-up {
    transform: translateY(40px);
}

.fade-in-left {
    transform: translateX(-40px);
}

.fade-in-right {
    transform: translateX(40px);
}

.fade-in.visible {
    opacity: 1;
    transform: translate(0, 0);
}
/* =====【追加】テキストが浮かび上がるアニメーション ===== */
.text-reveal-container {
    overflow: hidden;
}

.text-reveal-item {
    display: block;
    transform: translateY(100%);
    transition: transform 1.5s;
    transition-timing-function: ease-out;
}

.text-reveal-container.visible .text-reveal-item {
    transform: translateY(0);
}

/* =====【最終版】固定ボタンのすべてのスタイル ===== */
.side-sticky-buttons {
    position: fixed;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
    z-index: 999;
}

#page-top-button {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 998;
}

#sticky-price-cta-wrapper {
    position: fixed;
    right: 30px;
    bottom: 90px;
    z-index: 998;
}

#sticky-price-cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    width: 110px;
    height: 110px;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: 50% 50%;
    border: 1px solid #f0f0f0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

#sticky-price-cta-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

#sticky-price-cta-link span {
    background-color: rgba(255, 255, 255, 0.92);
    color: #f41d1d;
    font-weight: 900;
    padding: 8px 12px;
    border-radius: 5px;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}

#sticky-price-cta-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(40%, -40%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background-color: #333;
    color: white;
    border-radius: 50%;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background-color 0.2s;
}

#sticky-price-cta-close:hover {
    background-color: #e44d26;
}

.side-sticky-buttons, 
#page-top-button, 
#sticky-price-cta-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

.side-sticky-buttons.show, 
#page-top-button.show, 
#sticky-price-cta-wrapper.show {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 769px) {
    #sticky-price-cta-wrapper {
        right: 90px;
        bottom: 25px;
    }
}

/* =====【追加】料金シミュレーションのスタイル ===== */
.simulator-box {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px 40px;
    background-color: #fdfdfd;
}

.sim-question {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.question-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 15px 0;
    text-align: center;
}
.radio-group {
    display: flex;
    justify-content: center;
    gap: 40px;
}
.radio-group label {
    display: block;
    padding: 15px 30px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.radio-group input[type="radio"] {
    display: none;
}
.radio-group input[type="radio"]:checked + label {
    background-color: #1caac3;
    color: white;
    border-color: #1caac3;
}
.sim-select {
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    border-radius: 8px;
    border: 2px solid #aaa;
    text-align-last: center;
}
#sim-results {
    border-top: 2px dashed #1caac3;
    margin-top: 50px;
    padding-top: 30px;
}
.results-title {
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 0 30px 0;
}
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}
.result-item {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}
.result-label {
    margin: 0 0 10px 0;
    font-size: 0.9em;
}
.result-value {
    margin: 0;
    font-size: 1.8em;
    font-weight: bold;
    color: #1caac3;
}
.result-total {
    background-color: #343a40;
    color: white;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
}
.result-total .result-label {
    color: #f8f9fa;
    font-size: 1.1em;
}
.result-total .result-value-total {
    margin: 0;
    font-size: 2.5em;
    font-weight: bold;
}
.results-note {
    text-align: center;
    font-size: 0.8em;
    color: #666;
    margin-top: 20px;
}
@media (max-width: 768px) {
    #fee-simulator {
        padding: 20px;
    }
    .results-grid {
        grid-template-columns: 1fr;
    }
}

/* =====【追加】サービス一覧ページに画像を追加するためのスタイル ===== */
.service-item {
    overflow: hidden; 
}

.service-item-img {
    width: calc(100% + 60px);
    height: 200px;
    margin: -30px -30px 25px -30px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* =====【追加】下層ページの概要テキストのスタイル ===== */
.page-summary {
    font-size: 1.1em;
    text-align: center;
    line-height: 1.8;
    margin-bottom: 50px;
}

.service-summary {
    text-align: center;
}
/* =====【追加】ページ内リンクボタンのスタイル ===== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; 
}

.page-nav-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative; /* 重なり順を制御するために必要 */
    z-index: 10;
    margin-top: 30px;
    margin-bottom: 50px;
}

.page-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    padding: 12px 10px;
    background-color: #1caac3;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    line-height: 1.4;
    border-radius: 8px;
    border: 2px solid #1caac3;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.page-nav-button:hover {
    /* 少し上に移動させる */
    transform: translateY(-5px);
    background-color: #ffffff;
    color: #1caac3;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08); /* 影の値を animated-cta-button に近づけます */
}

/* =====【追加】シミュレーター間の区切り線のスタイル ===== */
.section-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin-top: 100px;
    margin-bottom: 60px;
}
/* =====【最新版】相続税シミュレーター加算項目用 ===== */
.addon-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 550px;
    margin: 0 auto;
}
.addon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.addon-item:last-child {
    border-bottom: none;
}
.addon-item > label {
    font-weight: bold;
    text-align: left;
    width: 350px;
    flex-shrink: 0;
    margin-right: 0px;
}
.sim-select-small {
    padding: 8px 12px;
    font-size: 1em;
    border-radius: 5px;
    border: 2px solid #ccc;
    text-align-last: center;
    width: 260px;
}
.sim-select-small:focus {
    border-color: #aaa;
    outline: none;
}
.radio-group-small {
    display: flex;
    gap: 10px;
    width: 260px;
    justify-content: center;
}
.radio-group-small label {
    font-weight: normal;
    padding: 6px 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}
.radio-group-small input[type="radio"] {
    display: none;
}
.radio-group-small input[type="radio"]:checked + label {
    background-color: #1caac3;
    color: white;
    border-color: #1caac3;
    font-weight: bold;
}

@media (max-width: 768px) {
    .addon-item {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .addon-item > label {
        width: 100%;
        text-align: center;
    }
}
/* =====【追加】動くボタンのスタイル ===== */
.animated-cta-container {
    padding: 60px 20px;
    text-align: center;
}

.animated-cta-button {
    display: inline-flex;
    align-items: center;
    padding: 18px 35px;
    background-color: #1caac3;
    color: white;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(28, 170, 195, 0.4);
    transition: all 0.3s ease;
}

.animated-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(28, 170, 195, 0.5);
}

.arrow-icon {
    display: block;
    width: 20px;
    height: 20px;
    border-top: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin-left: 20px;
    animation: arrow-bounce 1.5s infinite ease-in-out;
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: rotate(45deg) translateX(0);
    }
    50% {
        transform: rotate(45deg) translateX(5px);
    }
}

/* =====【追加】ポップアップモーダルのスタイル ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
}
.modal.is-open {
    display: flex;
}
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.modal-content {
    position: relative;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    text-align: center;
    z-index: 2001;
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
}
.modal-content h2 {
    margin-top: 0;
}
.modal-choices {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.modal-choice-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: #1caac3;
    color: white;
    text-decoration: none;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    transition: all 0.3s;
    border: 3px solid #1caac3;
}
.modal-choice-button:hover {
    background-color: white;
    color: #1caac3;
}

/* =====【最終版】吹き出し風タブコンテンツのスタイル ===== */
.new-features-section {
    padding: 80px 20px;
    background-color: #f8f9fa;
}

.new-features-section .container {
    max-width: 1100px;
}

.feature-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.feature-tab-button {
    padding: 15px 30px;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}
.feature-tab-button:hover {
    background-color: #f1f3f5;
}

.feature-tab-button.active {
    background-color: #1caac3;
    color: white;
    border-color: #1caac3;
}

.feature-content-container {
    position: relative;
    margin-top: 25px;
}

.feature-content-pane {
    display: none;
    background-color: #eef7fb;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    border: 1px solid #d0e3eb;
    gap: 30px; /* Flexbox gap for columns */
    align-items: center; /* Vertically align items in the flex container */
}
.feature-content-pane.active {
    display: flex; /* Active content panes are flex containers */
}

/* =====【追加】動く三角形のスタイル ===== */
#tab-triangle {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #e4eff4 transparent;
    transition: left 0.3s ease-in-out;
    z-index: 3;
}

.feature-content-pane h3 {
    font-size: 1.6em;
    margin-top: 0;
    color: #111;
}
.feature-content-pane p {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #333;
}
.feature-content-pane .reason-button {
    background-color: #1caac3;
    color: white;
    border: 2px solid #1caac3;
}
.feature-content-pane .reason-button:hover {
    background-color: #1893a8;
}

@media (max-width: 768px) {
    .feature-tabs {
        flex-direction: column;
        gap: 5px;
    }
    .feature-content-pane::before,
    .feature-content-pane::after {
        display: none;
    }
    .feature-content-container {
        margin-top: 20px;
    }
}

/* トップページのセクション背景色を個別に指定 */
.new-features-section,
.home-news-section{
    background-color: #ffffff;
}

.reasons-section,
.home-services-section {
    background-color: #f8f9fa;
}

/* =====【追加】ポップアップ内コンテンツの2カラムレイアウト ===== */
/* Left side: main text area */
.content-main-text {
    flex: 2; /* Takes more space */
    text-align: left;
}
.content-main-text h3 {
    font-size: 1.5em;
    margin-top: 0;
    color: #111;
}
.content-main-text p {
    font-size: 1em;
    line-height: 1.8;
    color: #333;
}

/* Right side: point box */
.content-point-box {
    flex: 1; /* Takes less space */
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 2px solid #1caac3;
}
/* =====【最新版】ポイントボックス内のチェックリスト ===== */
.content-point-box h4 {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    color: #1caac3;
}

.point-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.point-checklist li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 12px;
    font-weight: bold;
    line-height: 1.5;
}
.point-checklist li:last-child {
    margin-bottom: 0;
}

.point-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #1caac3;
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="white"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .feature-content-pane {
        flex-direction: column;
    }
    .content-main-text {
        text-align: center;
    }
}

/* ========== ここから追加するコード ========== */
@keyframes keyframe-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes keyframe-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.initial-animation-bg {
    animation-name: keyframe-fade-in-up;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.initial-animation-main {
    animation-name: keyframe-fade-in-left;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#animated-news-box {
    position: absolute;
    bottom: 25px;
    right: -50px;
    width: 500px;
    background-color: rgba(28, 170, 195, 0.8);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 10;
    padding: 15px;

    animation-name: keyframe-fade-in-up;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 1.4s;
    animation-fill-mode: forwards;
    opacity: 0;
}

#animated-news-box h3 {
    font-size: 1.2em;
    margin: 0;
    padding-bottom: 15px;
    color: white;
    text-align: left;
}

.news-box-content {
    background-color: white;
    border-radius: 5px;
}

#animated-news-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#animated-news-box li {
    border-bottom: 1px solid #eee;
}
#animated-news-box li:last-child {
    border-bottom: none;
}

#animated-news-box a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
    font-size: 0.95em;
}
#animated-news-box a:hover {
    background-color: #f8f9fa;
}

#animated-news-box time {
    margin-right: 15px;
    color: #666;
    font-size: 0.9em;
}

/* ===== お知らせ詳細ページ（新デザイン）===== */
.article-hero {
    padding: 100px 40px;
    color: white;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}
.article-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}
.article-hero h1 {
    font-size: 2.8em;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.article-hero .article-date {
    font-size: 1.5em;
    font-weight: bold;
}

.article-body-content {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
    line-height: 1.9;
    font-size: 1.1em;
}
.article-body-content h2 {
    font-size: 1.6em;
    border-bottom: 2px solid #1caac3;
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 25px;
}
.article-body-content p {
    margin-bottom: 1.5em;
}
.article-back-link-container {
    text-align: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}

@media (max-width: 768px) {
    .article-hero {
        padding: 80px 20px;
    }
    .article-hero h1 {
        font-size: 1.8em;
    }
    .article-body-content {
        margin: 40px auto;
        font-size: 1em;
    }
}

/* ===== お知らせ詳細ページ（シンプルデザイン）===== */
.news-article-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 3px solid #1caac3;
}

.news-article-header h1 {
    font-size: 2.2em;
    margin: 0 0 10px 0;
}

.news-date {
    color: #666;
    font-weight: bold;
}

.news-body {
    max-width: 800px;
    margin: 40px auto 0 auto;
    line-height: 1.9;
    font-size: 1.1em;
}

.news-body h2 {
    font-size: 1.6em;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-top: 50px;
    margin-bottom: 25px;
}

.article-back-link-container {
    text-align: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}
@media (max-width: 768px) {
    .article-back-link-container {
        text-align: center;
    }
}
.no-wrap {
    white-space: nowrap;
}
/* ===============================
   業務フロー図のスタイル（改訂版）
   =============================== */
.workflow-diagram {
    margin-top: 80px;
}

.workflow-list {
    list-style: none;
    padding-left: 0;
    margin: 0 auto;
    max-width: 900px;
}

/* 各ステップのボックス */
.workflow-box {
    width: 100%;
    background-color: #eef7fb; /* 背景色を青系に統一 */
    border-left: 5px solid #1caac3;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    box-sizing: border-box;
    margin-bottom: 30px; /* ボックス間のスペースを確保 */
}

.workflow-list li:last-child .workflow-box {
     margin-bottom: 0; /* 最後のボックスの下の余白は削除 */
}

/* ステップ番号のスタイル */
.workflow-box .workflow-step-number {
    display: inline-block;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    background-color: #1caac3; /* 番号の背景色をテーマカラーに */
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 15px;
}

/* ステップのタイトル */
.workflow-box h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
}

/* ステップの説明文 */
.workflow-box p {
    margin: 0;
    line-height: 1.8;
}
/* ===============================
   フェーズ別フロー図のスタイル
   =============================== */
.phased-workflow {
    margin-top: 80px;
}

.workflow-phase {
    background-color: #f8f9fa;
    padding: 40px;
    border-radius: 10px;
    margin-bottom: 60px; /* フェーズ間の間隔 */
}
.workflow-phase:last-child {
    margin-bottom: 0;
}

.workflow-phase h3 {
    font-size: 1.8em;
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
}

.workflow-phase h3 .phase-label {
    display: block;
    font-size: 0.7em;
    font-weight: bold;
    color: #1caac3;
    margin-bottom: 5px;
}

.workflow-phase .phase-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
    line-height: 1.8;
}
/* 業務フロー図の見出しのスタイル */
.workflow-diagram h3 {
    font-size: 1.8em;   /* 文字を大きくする */
    text-align: center; /* 中央に配置する */
    margin-bottom: 40px;/* 見出しとリストの間に余白を設ける */
}

/* ===============================
   業務フロー（パターン分け）の見出しスタイル
   =============================== */
.workflow-pattern-title {
    font-size: 1.5em;
    text-align: center;
    margin-top: 60px; /* 前のセクションとの間隔 */
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

/* 最初のパターン見出しの上部マージンは、メイン見出しからの距離で調整 */
.workflow-diagram > .workflow-pattern-title:first-of-type {
    margin-top: 40px;
}

/* ===============================
   フェーズ別フロー図のスタイル
   =============================== */
.phased-workflow {
    margin-top: 80px;
}


.workflow-phase:last-child {
    margin-bottom: 0;
}

.workflow-phase h3 {
    font-size: 1.8em;
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
}

.workflow-phase h3 .phase-label {
    display: block;
    font-size: 0.7em;
    font-weight: bold;
    color: #1caac3;
    margin-bottom: 5px;
}

.workflow-phase .phase-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
    line-height: 1.8;
}

/* ===============================
   導入メリット（ポイント別）のスタイル
   =============================== */
.merit-points-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCでは3列表示 */
    gap: 30px; /* 各ポイント間の余白 */
    margin-top: 40px;
}

.point-box {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-top: 5px solid #1caac3;
}

.point-box .point-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.point-box h4 {
    font-size: 1.25em;
    margin-top: 0;
    margin-bottom: 15px;
}

.point-box h4 .point-number {
    display: block;
    font-size: 0.8em;
    color: #1caac3;
    font-weight: bold;
    margin-bottom: 5px;
}

.point-box p {
    text-align: left;
    line-height: 1.8;
    margin: 0;
}

/* ===============================
   セクションタイトルの汎用スタイル追加
   =============================== */
/* 見出し(h2, h3)の共通スタイル */
.section-title h2,
.section-title h3 {
    font-size: 2.2em;
    margin: 0 0 15px 0;
}

/* 説明文のスタイル */
.section-description {
    font-size: 1.1em;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* --- スマートフォン用のスタイル --- */
@media (max-width: 768px) {
    .merit-points-grid {
        grid-template-columns: 1fr; /* スマホでは1列表示 */
    }
}

/* ===============================
   導入メリット（ポイント別）のスタイル
   =============================== */
.merit-points-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCでは3列表示 */
    gap: 30px; /* 各ポイント間の余白 */
    margin-top: 40px;
}

.point-box {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-top: 5px solid #1caac3;
}

.point-box .point-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.point-box h4 {
    font-size: 1.25em;
    margin-top: 0;
    margin-bottom: 15px;
}

.point-box h4 .point-number {
    display: block;
    font-size: 0.8em;
    color: #1caac3;
    font-weight: bold;
    margin-bottom: 5px;
}

.point-box p {
    text-align: left;
    line-height: 1.8;
    margin: 0;
}

/* --- スマートフォン用のスタイル --- */
@media (max-width: 768px) {
    .merit-points-grid {
        grid-template-columns: 1fr; /* スマホでは1列表示 */
    }
}

/* ===============================
   相続税対策（生前）フロー図のスタイル
   =============================== */
.inheritance-tax-section .workflow-box {
    background-color: #eef7fb; /* 背景を元々の薄い青に変更 */
    border-left-color: #1caac3;   /* 左のボーダーを元々のテーマカラー青に変更 */
}
.inheritance-tax-section .workflow-box .workflow-step-number {
    background-color: #1caac3; /* 番号の背景を元々のテーマカラー青に変更 */
}
.inheritance-tax-section .phase-label {
    color: #1caac3; /* ラベルの文字色を元々のテーマカラー青に変更 */
}

/* ===============================
   相続税対策（生前）フロー図のスタイル
   =============================== */
.inheritance-tax-section .workflow-box {
    background-color: #eef7fb; /* 背景を元々の薄い青に変更 */
    border-left-color: #1caac3;   /* 左のボーダーを元々のテーマカラー青に変更 */
}
.inheritance-tax-section .workflow-box .workflow-step-number {
    background-color: #1caac3; /* 番号の背景を元々のテーマカラー青に変更 */
}
.inheritance-tax-section .phase-label {
    color: #1caac3; /* ラベルの文字色を元々のテーマカラー青に変更 */
}

/* ===============================
   相続税申告（発生後）フロー図のスタイル
   =============================== */
.inheritance-tax-section-after .workflow-box {
    background-color: #f4f0f9; /* 背景を薄い紫に変更 */
    border-left-color: #6f42c1;   /* 左のボーダーを紫に変更 */
}
.inheritance-tax-section-after .workflow-box .workflow-step-number {
    background-color: #6f42c1; /* 番号の背景を紫に変更 */
}
.inheritance-tax-section-after .phase-label {
    color: #6f42c1; /* ラベルの文字色を紫に変更 */
}

/* ===============================
   贈与税フロー図の区別用スタイル
   =============================== */
.gift-tax-section .workflow-box {
    background-color: #eaf7ec; /* 背景を薄い緑に変更 */
    border-left-color: #28a745;   /* 左のボーダーを緑に変更 */
}
.gift-tax-section .workflow-box .workflow-step-number {
    background-color: #28a745; /* 番号の背景を緑に変更 */
}
.gift-tax-section .phase-label {
    color: #28a745; /* ラベルの文字色を緑に変更 */
}

/* ===============================
   各フロー図のタイトルを色分けするスタイル
   =============================== */

/* =====【色指定の強制上書き】===== */

/* 相続税申告（発生後）のタイトルを強制的に修正 */
.inheritance-tax-section-after h3 {
    color: #000000 !important; /* 見出し全体の色を強制的に黒に */
}
.inheritance-tax-section-after .phase-label {
    color: #6f42c1 !important; /* ラベルの色を強制的に紫に */
}

/* 贈与税申告のタイトルを強制的に修正 */
.gift-tax-section h3 {
    color: #000000 !important; /* 見出し全体の色を強制的に黒に */
}
.gift-tax-section .phase-label {
    color: #28a745 !important; /* ラベルの色を強制的に緑に */
}

/* =====【ここから追加】ケース2のフロー図を黄色系にするスタイル===== */

/* ケース2のボックスのスタイル */
.workflow-diagram .workflow-list:nth-of-type(2) .workflow-box {
    background-color: #fffbe6; /* 背景を薄い黄色に */
    border-left-color: #f59f00;   /* 左のボーダーをオレンジ系の黄色に */
}

/* ケース2のステップ番号のスタイル */
.workflow-diagram .workflow-list:nth-of-type(2) .workflow-box .workflow-step-number {
    background-color: #f59f00; /* 番号の背景をオレンジ系の黄色に */
}

/* ===== パートナーロゴのスタイル ===== */
.partner-logos {
    display: flex;
    justify-content: center; /* ロゴを中央揃えに */
    align-items: center;     /* 上下の位置を中央に揃える */
    gap: 40px;               /* ロゴとロゴの間の隙間 */
    flex-wrap: wrap;         /* スマホなどで画面が狭い場合に折り返す */
}

.partner-logo-img {
    max-width: 300px; /* ロゴの最大幅を少し調整 */
    height: auto;
    border: 1px solid #e0e0e0;
    padding: 20px;
    background-color: white;
    border-radius: 8px; /* 角を少し丸くする */
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* わずかに影をつける */
    transition: transform 0.3s;
}

.partner-logo-img:hover {
    transform: translateY(-5px); /* マウスを乗せると少し浮き上がる */
}

/* ===== パートナーロゴのスタイル（枠なし・横幅統一版） ===== */
.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* ロゴ間の隙間 */
    flex-wrap: wrap;
}

/* 各ロゴを囲む「透明な箱」のスタイル */
.partner-logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;  /* ★箱の横幅を固定して、すべてのロゴの占有幅を統一 */
    height: 80px;  /* 箱の高さを指定 */
    transition: transform 0.3s;
}

.partner-logo-link:hover {
    transform: translateY(-5px);
}

/* 画像のスタイル */
.partner-logo-link img {
    max-width: 100%;  /* 箱の幅を超えないようにする */
    max-height: 100%; /* 箱の高さを超えないようにする */
    width: auto;
    height: auto;
    border: none !important; /* ★他のスタイル設定を上書きして、枠線を強制的に削除 */
}

/* ===== 相続関連詳細ページのヘッダー画像 ===== */

/* ヘッダー画像に共通のスタイル */
.page-service-inheritance-pre .page-header,
.page-service-inheritance-post .page-header,
.page-service-inheritance-gift .page-header {
    padding: 120px 40px;
    color: white;
    border-bottom: none;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

/* 文字を読みやすくするための、半透明の黒いフィルター */
.page-service-inheritance-pre .page-header::before,
.page-service-inheritance-post .page-header::before,
.page-service-inheritance-gift .page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

/* 文字に影をつけて、さらに読みやすくする */
.page-service-inheritance-pre .page-header h1,
.page-service-inheritance-post .page-header h1,
.page-service-inheritance-gift .page-header h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* 各ページ固有の背景画像を指定 */
.page-service-inheritance-pre .page-header {
    background-image: url('images/header-pre-inheritance.jpg');
}
.page-service-inheritance-post .page-header {
    background-image: url('images/header-post-inheritance.jpg');
}
.page-service-inheritance-gift .page-header {
    background-image: url('images/header-gift-tax.jpg');
}
/* ==================================
   求人特設サイト用のスタイル
   ================================== */

/* ヒーローセクション */
/* ヒーローセクション */
.recruit-hero {
    padding: 120px 40px;
    color: white;
    text-align: center;
    /* ▼▼▼ この行の画像パスを変更 ▼▼▼ */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('recruit.jpg');
    /* ▲▲▲ ここまで変更 ▲▲▲ */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.recruit-hero h1 {
    font-size: 3em;
    margin: 0 0 15px 0;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}
.recruit-hero p {
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}

/* 数字で見るセクション */
/* 修正後 */
.stats-section {
    padding: 80px 20px;
    border-radius: 8px; /* 角を少し丸くすると綺麗に見えます */
}

.stats-section .section-title,
.interview-section .section-title,
.accordion-section .section-title {
    margin-bottom: 50px;
    font-size: 1.8em;
}
/* style.css を修正 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    /* max-width と margin を削除 */
}
.stat-item {
    background-color: white;
    padding: 30px 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.stat-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
}
.stat-value {
    font-size: 2.8em;
    font-weight: bold;
    color: #1caac3;
    line-height: 1;
}
.stat-value span {
    font-size: 0.4em;
    font-weight: normal;
    color: #333;
    margin-left: 5px;
}
.stat-label {
    margin-top: 10px;
    font-weight: bold;
    color: #555;
}


/* 社員インタビューセクション */
.interview-section {
    padding: 80px 0;
}
.interview-item {
    display: flex;
    gap: 50px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto 60px auto;
}
.interview-item:nth-child(even) {
    flex-direction: row-reverse;
}
.interview-image {
    flex: 1;
    max-width: 350px;
}
.interview-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.interview-text {
    flex: 1.5;
}
.interview-text h3 {
    font-size: 1.6em;
    margin: 0 0 5px 0;
}
.interview-meta {
    font-size: 0.9em;
    color: #666;
    font-weight: bold;
    margin-bottom: 20px;
}
.interview-text p {
    line-height: 1.8;
}

/* アコーディオンセクション */
.accordion-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}
.accordion {
    max-width: 900px;
    margin: 0 auto;
}
.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}
.accordion-header {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 25px 20px;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}
.accordion-header:hover {
    background-color: #f1f3f5;
}
.accordion-header.active {
    color: #1caac3;
}

/* ==================================
   アコーディオンのアイコン（修正版）
   ================================== */
.accordion-title {
    margin-right: 15px; /* テキストとアイコンの間に隙間を確保 */
}

.accordion-icon {
    position: relative; /* アイコンの基準位置 */
    width: 18px;  /* アイコンのサイズを固定 */
    height: 18px;
    flex-shrink: 0; /* アイコンが縮まないようにする */
}

/* 「+」と「-」の線をCSSで描画 */
.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background-color: #333; /* 線の色 */
    transition: transform 0.3s ease-out; /* アニメーション設定 */
}

/* アイコンの縦線 */
.accordion-icon::before {
    top: 0;
    left: 50%;
    width: 3px; /* 線の太さ */
    height: 100%;
    margin-left: -1.5px; /* 中央揃え */
}

/* アイコンの横線 */
.accordion-icon::after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px; /* 線の太さ */
    margin-top: -1.5px; /* 中央揃え */
}

/* 開いた状態（.activeクラスがついた時）のスタイル */
.accordion-item.active .accordion-icon::before {
    transform: rotate(90deg); /* 縦線を90度回転（横線と重なる）*/
}

.accordion-item.active .accordion-icon::after {
    transform: rotate(180deg); /* 横線を180度回転（見た目は変わらないが、アニメーションのため） */
}

/* 開いた状態のヘッダーの文字色とアイコンの色 */
.accordion-item.active .accordion-header {
    color: #1caac3;
}
.accordion-item.active .accordion-icon::before,
.accordion-item.active .accordion-icon::after {
    background-color: #1caac3; /* アイコンの色を青に変更 */
}

/* style.css にこの部分を追加 */

.accordion-content {
    max-height: 0; /* 最初は高さを0にして隠す */
    overflow: hidden; /* はみ出した内容を隠す */
    transition: max-height 0.3s ease-out; /* 高さが変わる時にアニメーションさせる */
    background-color: #fcfcfc; /* コンテンツの背景色（任意） */
}

/* ==================================
   求人特設サイト：福利厚生セクション
   ================================== */
.welfare-section {
    padding: 80px 20px;
}
.welfare-section .section-title {
    margin-bottom: 25px;
}
.welfare-section .section-description {
    max-width: 800px;
    margin: 0 auto 50px auto;
    text-align: center;
    line-height: 1.8;
}
.welfare-table-container {
    max-width: 900px;
    margin: 0 auto;
}

/* ==================================
   求人特設サイト：セクション区切り線
   ================================== */
.page-recruit-special .interview-section,
.page-recruit-special .welfare-section,
.page-recruit-special .accordion-section,
.page-recruit-special .animated-cta-container {
    border-top: 1px solid #e0e0e0;
    margin-top: 80px;
    padding-top: 80px;
}
/* 元々あったpaddingやmarginとの重複を避けるための調整 */
.page-recruit-special .interview-section,
.page-recruit-special .welfare-section,
.page-recruit-special .accordion-section {
    padding-bottom: 0;
}

/* ==================================
   求人特設サイト：セクション区切り線
   ================================== */
.page-recruit-special .page-content > section:not(:first-child) {
    border-top: 1px solid #e0e0e0;
    margin-top: 80px;
    padding-top: 80px;
}

/* 元々あったpaddingやmarginとの重複を避けるための調整 */
.page-recruit-special .interview-section,
.page-recruit-special .welfare-section,
.page-recruit-special .accordion-section {
    padding-bottom: 0;
    margin-bottom: 0; /* 既存のセクション下の余白をリセット */
}

/* ヒーローセクション下の最初のセクションの余白を調整 */
.page-recruit-special .stats-section {
    padding-top: 80px;
    padding-bottom: 0;
}

/* ==================================
   ある一日の流れ（最終確定版・アニメーション効果付き）
   ================================== */
.daily-flow-section {
    padding: 80px 20px;
}

.daily-flow-section .section-description {
    max-width: 800px;
    margin: 0 auto 50px auto;
    text-align: center;
    line-height: 1.8;
}

.daily-flow-section .timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* タイムラインの縦線（グラデーション効果を追加） */
.daily-flow-section .timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 90px;
    width: 3px;
    height: 100%;
    /* 背景色をグラデーションに変更 */
    background: linear-gradient(to bottom, #1caac3, #e0eaf0); 
    border-radius: 3px;
}

.daily-flow-section .timeline-entry {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    box-sizing: border-box;
}
.daily-flow-section .timeline-entry:last-child {
    margin-bottom: 0;
}

.daily-flow-section .timeline-time {
    width: 90px;
    padding-right: 20px;
    text-align: right;
    font-weight: bold;
    color: #555;
    flex-shrink: 0;
    padding-top: 3px;
    box-sizing: border-box;
}

/* ドット（アニメーション効果を追加） */
.daily-flow-section .timeline-dot {
    position: absolute;
    top: 8px;
    left: 82px; 
    width: 18px;
    height: 18px;
    background-color: #1caac3;
    border: 3px solid white;
    border-radius: 50%;
    z-index: 1;
    /* 脈動するアニメーションを適用 */
    animation: pulse-glow 2s infinite ease-in-out;
}

/* ドットの脈動アニメーションの定義 */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(28, 170, 195, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(28, 170, 195, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(28, 170, 195, 0);
  }
}

.daily-flow-section .timeline-content {
    padding-left: 30px;
    flex-grow: 1;
    box-sizing: border-box;
}

.daily-flow-section .timeline-icon {
    margin-right: 0.5em;
    font-size: 1.2em;
}

.daily-flow-section .timeline-content h4 {
    margin: 0 0 8px 0;
    font-size: 1.2em;
    color: #333;
}

.daily-flow-section .timeline-content p {
    margin: 0;
    color: #555;
    line-height: 1.7;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .daily-flow-section .timeline-container::before {
        left: 15px;
    }
    .daily-flow-section .timeline-entry {
        padding-left: 35px;
        flex-direction: column;
    }
    .daily-flow-section .timeline-time {
        width: auto;
        padding-left: 0;
        text-align: left;
        margin-bottom: 10px;
        padding-top: 0;
    }
    .daily-flow-section .timeline-dot {
        top: 5px;
        left: 7px;
    }
    .daily-flow-section .timeline-content {
        padding-left: 0;
    }

    /* ===== 【追加】数字で見るセクション（スマホ用） ===== */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 4列から2列に変更 */
        gap: 20px; /* PC用より隙間を少し狭める */
    }
}

/* ==================================
   曜日切り替えタブのスタイル
   ================================== */
.day-tabs {
    display: flex;
    justify-content: center;
    gap: 10px; /* ボタン間の隙間 */
    margin-bottom: 40px;
    flex-wrap: wrap; /* スマホ表示で折り返す */
}

.day-tab-button {
    padding: 12px 25px;
    font-size: 1em;
    font-weight: bold;
    color: #333;
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 50px; /* 角を丸くする */
    cursor: pointer;
    transition: all 0.3s;
}

.day-tab-button:hover {
    background-color: #f5f5f5;
    border-color: #1caac3;
}

/* 選択中のタブのスタイル */
.day-tab-button.active {
    background-color: #1caac3;
    color: white;
    border-color: #1caac3;
}

/* 土日ボタンの特別スタイル（赤色に変更） */
.day-tab-button[data-day="saturday-pane"],
.day-tab-button[data-day="sunday-pane"] {
    border-color: #e44d26; /* 赤色に変更 */
    color: #e44d26; /* 赤色に変更 */
}
.day-tab-button[data-day="saturday-pane"]:hover,
.day-tab-button[data-day="sunday-pane"]:hover {
    background-color: #fdf2f0; /* 薄い赤色に変更 */
    border-color: #e44d26; /* 赤色に変更 */
}
.day-tab-button[data-day="saturday-pane"].active,
.day-tab-button[data-day="sunday-pane"].active {
    background-color: #e44d26; /* 赤色に変更 */
    color: white;
    border-color: #e44d26; /* 赤色に変更 */
}


/* コンテンツパネルの表示制御 */
.day-content-pane {
    display: none; /* 初期状態では非表示 */
}

.day-content-pane.active {
    display: block; /* 選択されたパネルのみ表示 */
}

/* ===== 【修正】数字で見るセクションの余白 (スマホ用) ===== */
    .stats-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* ===== 【修正】働くスタッフの声セクション (スマホ用) ===== */
    .interview-item,
    .interview-item:nth-child(even) {
        flex-direction: column; /* 縦並びに変更 */
        gap: 25px; /* 画像とテキストの間の余白を調整 */
    }

    .interview-image {
        max-width: 100%; /* 画像が画面幅いっぱいに広がるように */
    }

    .interview-text {
        text-align: center; /* テキストを中央揃えに */
    }

    .interview-text p {
        text-align: left; /* 長い文章は読みやすいように左揃えに戻す */
    }


/* 相続スケジュール図のスタイル */
.inheritance-schedule {
    text-align: center;
}
.inheritance-schedule h3 {
    margin-bottom: 25px;
    font-size: 1.8em;
}
.schedule-summary {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    line-height: 1.8;
}
.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    width: 3px;
    background-color: #1caac3;
    opacity: 0.3;
}
.timeline-item {
    position: relative;
    margin-bottom: 40px;
    padding-left: 60px;
    text-align: left;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-point {
    position: absolute;
    top: 5px;
    left: 11px;
    width: 20px;
    height: 20px;
    background-color: #1caac3;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(28, 170, 195, 0.5);
}
.timeline-content h4 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    color: #1caac3;
}
.timeline-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.timeline-content li {
    padding: 5px 0;
    line-height: 1.7;
}
.timeline-content li strong.deadline {
    color: #d9534f; /* 期限の文字色 */
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .timeline-container::before {
        left: 10px;
    }
    .timeline-item {
        padding-left: 45px;
    }
    .timeline-point {
        left: 1px;
        width: 18px;
        height: 18px;
    }
    .schedule-summary {
        margin-bottom: 40px;
        text-align: left;
    }
}

/* ▼▼▼ 贈与税スケジュール図のスタイル ▼▼▼ */
.inheritance-schedule {
    text-align: center;
}
.inheritance-schedule h3 {
    margin-bottom: 25px;
    font-size: 1.8em;
}
.schedule-summary {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    line-height: 1.8;
    text-align: center; /* 中央ぞろえを維持 */
}
.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    width: 3px;
    background-color: #1caac3;
    opacity: 0.3;
}
.timeline-item {
    position: relative;
    margin-bottom: 40px;
    padding-left: 60px;
    text-align: left;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-point {
    position: absolute;
    top: 5px;
    left: 11px;
    width: 20px;
    height: 20px;
    background-color: #1caac3;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(28, 170, 195, 0.5);
}
.timeline-content h4 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    color: #1caac3;
}
.timeline-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.timeline-content li {
    padding: 5px 0;
    line-height: 1.7;
}
.timeline-content li strong.deadline {
    color: #d9534f;
}

@media (max-width: 768px) {
    .timeline-container::before {
        left: 10px;
    }
    .timeline-item {
        padding-left: 45px;
    }
    .timeline-point {
        left: 1px;
        width: 18px;
        height: 18px;
    }
    .schedule-summary {
        margin-bottom: 40px;
        text-align: left;
    }
}

/* ▼▼▼ スケジュール図のスタイル ▼▼▼ */
.inheritance-schedule {
    text-align: center;
}
.inheritance-schedule h3 {
    margin-bottom: 25px;
}
.schedule-summary {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    line-height: 1.8;
    text-align: center;
}
.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    height: 100%;
    width: 3px;
    background-color: #1caac3;
    opacity: 0.3;
}
.timeline-item {
    position: relative;
    margin-bottom: 40px;
    padding-left: 60px;
    text-align: left;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-point {
    position: absolute;
    top: 5px;
    left: 11px;
    width: 20px;
    height: 20px;
    background-color: #1caac3;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(28, 170, 195, 0.5);
}
.timeline-content h4 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    color: #1caac3;
}
.timeline-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.timeline-content li {
    padding: 5px 0;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .timeline-container::before {
        left: 10px;
    }
    .timeline-item {
        padding-left: 45px;
    }
    .timeline-point {
        left: 1px;
        width: 18px;
        height: 18px;
    }
    .schedule-summary {
        margin-bottom: 40px;
        text-align: left;
    }
}

/* ==================================
   求める人材セクションのスタイル（新デザイン）
   ================================== */
.ideal-candidate-section {
    padding: 80px 20px;
    border-top: 1px solid #e0e0e0;
}

.ideal-candidate-section .section-description {
    margin-bottom: 80px; /* 各項目との余白を確保 */
}

.candidate-feature-list {
    max-width: 1000px;
    margin: 0 auto;
}

.candidate-feature-item {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 70px;
}

.candidate-feature-item:last-child {
    margin-bottom: 0;
}

/* 偶数番目のアイテムは、アイコンとテキストの位置を反転 */
.candidate-feature-item:nth-child(even) {
    flex-direction: row-reverse;
}

.candidate-feature-icon {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eef7fb;
    border-radius: 50%;
    font-size: 5em;
    color: #1caac3;
}

.candidate-feature-text h3 {
    font-size: 1.6em;
    margin: 0 0 15px 0;
}

.candidate-feature-text p {
    line-height: 1.9;
    color: #333;
    margin: 0;
}

/* スマホ表示対応 */
@media (max-width: 768px) {
    .ideal-candidate-section .section-description {
        margin-bottom: 50px;
    }

    .candidate-feature-item,
    .candidate-feature-item:nth-child(even) {
        flex-direction: column; /* 縦並びにする */
        gap: 30px;
        text-align: center;
    }

    .candidate-feature-icon {
        width: 120px;
        height: 120px;
        font-size: 3em;
    }

    .candidate-feature-text h3 {
        font-size: 1.3em;
    }

    .candidate-feature-text p {
        text-align: left; /* 本文は読みやすいように左揃え */
    }
}
/* ==================================
   求人特設サイトのセクションタイトルを統一
   ================================== */
.stats-section .section-title,
.interview-section .section-title,
.daily-flow-section .section-title,
.welfare-section .section-title,
.ideal-candidate-section .section-title {
    font-size: 2.4em; /* すべての見出しサイズを統一 */
}

/* ==================================
   下層ページヘッダーの背景画像設定
   ================================== */

/* 背景画像を持つヘッダーに共通のスタイル */
.page-about .page-header,
.page-news .page-header,
.page-price .page-header,
.page-recruit .page-header,
.page-services .page-header,
.page-staff .page-header,
.page-fee-simulation .page-header,
.page-contact .page-header { /* ← .page-contact を追加 */
    padding: 120px 40px;
    color: white;
    border-bottom: none;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

/* 文字を読みやすくするための、半透明の黒いフィルター */
.page-about .page-header::before,
.page-news .page-header::before,
.page-price .page-header::before,
.page-recruit .page-header::before,
.page-services .page-header::before,
.page-staff .page-header::before,
.page-fee-simulation .page-header::before,
.page-contact .page-header::before { /* ← ここにも追加 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

/* 文字に影をつけて、さらに読みやすくする */
.page-about .page-header h1,
.page-news .page-header h1,
.page-price .page-header h1,
.page-recruit .page-header h1,
.page-services .page-header h1,
.page-staff .page-header h1,
.page-fee-simulation .page-header h1,
.page-contact .page-header h1 { /* ← ここにも追加 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* 各ページ固有の背景画像を指定 */
/* ... 既存のルールはそのまま ... */
.page-staff .page-header {
    background-image: url('staff.jpg');
}

/* ▼▼▼ このルールを新しく追加 ▼▼▼ */
.page-fee-simulation .page-header {
    background-image: url('fee-simulation.jpg'); /* 添付された画像を指定 */
}
/* 各ページ固有の背景画像を指定 */
.page-about .page-header {
    background-image: url('place.jpg');
}
.page-news .page-header {
    background-image: url('annouce.jpg');
}
.page-price .page-header {
    background-image: url('price.jpg');
}
.page-recruit .page-header {
    background-image: url('recruit2.jpg');
}
.page-services .page-header {
    background-image: url('service.jpg');
}
.page-staff .page-header {
    background-image: url('staff.jpg');
}
.page-fee-simulation .page-header {
    background-image: url('fee-simulation.jpg'); /* 添付された画像を指定 */
}
.page-contact .page-header {
    background-image: url('contact.jpg');
}


/* 新しい戻るボタンのスタイル */
.back-to-recruit-button {
    display: inline-flex; /* Flexboxを使って内容を中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    padding: 10px 25px; /* 上下左右のパディングを調整 */
    background: linear-gradient(to right, #00BCD4, #0d8b99); /* 背景グラデーション */
    color: white; /* テキストの色 */
    font-size: 1rem; /* フォントサイズを調整 */
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* 丸みを帯びた角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 影 */
    transition: all 0.3s ease; /* ホバー時のアニメーション */
    white-space: nowrap; /* テキストが改行されないように */
    margin-top: 30px; /* 上のテキストとの間隔を調整 */
    cursor: pointer;
}

.back-to-recruit-button:hover {
    transform: translateY(-2px); /* 少し上に浮き上がるアニメーション */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.back-to-recruit-button .arrow-icon {
    display: inline-block;
    width: 10px; /* 矢印の幅 */
    height: 10px; /* 矢印の高さ */
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg); /* 矢印の向き */
    margin-left: 8px; /* テキストと矢印の間隔 */
    transition: transform 0.3s ease;
}

.back-to-recruit-button:hover .arrow-icon {
    transform: translateX(3px) rotate(45deg); /* ホバー時に少し移動 */
}

/* フッターのリンク文字を白にする */
.site-footer a,
.site-footer a:visited {
    color: #FFFFFF; /* 文字色を白に指定 */
    text-decoration: none; /* 通常時の下線を消す */
}

/* フッターのリンクにマウスを乗せた時のスタイル */
.site-footer a:hover {
    text-decoration: underline; /* マウスオンで下線を表示 */
}

/* ==================================
   ポリシーページ等のヘッダー画像設定
   ================================== */

/* 背景画像を持つヘッダーに共通のスタイル */
.page-disclaimer .page-header,
.page-terms .page-header,
.page-privacy .page-header,
.page-harassment .page-header {
    padding: 120px 40px;
    color: white;
    border-bottom: none;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

/* 文字を読みやすくするための、半透明の黒いフィルター */
.page-disclaimer .page-header::before,
.page-terms .page-header::before,
.page-privacy .page-header::before,
.page-harassment .page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

/* 文字に影をつけて、さらに読みやすくする */
.page-disclaimer .page-header h1,
.page-terms .page-header h1,
.page-privacy .page-header h1,
.page-harassment .page-header h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}