/* -----------------------------------------------------------------
 * Front Page (トップページ)
 * ----------------------------------------------------------------- */
.hero {
    /* 画像パスはWordPressのパスに合わせて調整 */
    background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
                url('https://corporate-website-images.s3.ap-northeast-1.amazonaws.com/asset/images/toppage-background-image.png');
    background-size: cover; background-position: center;
    padding: 120px 40px 100px; text-align: center; position: relative; overflow: hidden;
}
.hero h1 {
    font-size: 56px; margin-bottom: 30px; font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    word-wrap: break-word; /* 長い単語での改行 */
}
/* スマホ修正：ヒーローセクション */
@media (max-width: 768px) {
    .hero { padding: 80px 20px 60px; }
    .hero h1 { font-size: 32px; line-height: 1.3; }
    .hero .tagline { font-size: 18px !important; }
}

.business-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; }
/* スマホ修正：カードを1列に */
@media (max-width: 768px) {
    .business-cards { grid-template-columns: 1fr; gap: 30px; }
    /* レイアウト調整: SPでのカード内余白調整 */
    .business-card-header, .business-card-body { padding: 30px 20px; }
}

/* レイアウト調整: カード全体のデザイン変更（参考画像ベース） */
.business-card {
    background: white;
    border-radius: 20px; /* 角丸を強めに */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    transition: all 0.4s;
    display: flex; /* Flexboxで縦並びを制御 */
    flex-direction: column;
}
.business-card:hover { transform: translateY(-10px); }

/* レイアウト調整: ヘッダー部分を赤背景・白文字に */
.business-card-header {
    padding: 30px 40px;
    background: var(--primary-color); /* 赤背景 */
    color: white;
    text-align: center;
    flex-grow: 0;
}
.business-card-header h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white; /* 確実に白文字に */
}
.business-card-subtitle {
    font-size: 16px;
    opacity: 0.9;
    color: white; /* 確実に白文字に */
}

/* レイアウト調整: ボディ部分 */
.business-card-body {
    padding: 50px 40px;
    text-align: left; /* リストを見やすく左揃えに */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* レイアウト調整: 見出し（一般消費者向けサービス等） */
.business-card-body h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-main);
}

/* レイアウト調整: リストデザイン */
.business-card-body ul {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
    flex-grow: 1; /* ボタンを下部に押し下げる */
}
.business-card-body ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    color: var(--text-sub);
    font-size: 15px;
}
.business-card-body ul li:last-child {
    border-bottom: none;
}
/* レイアウト調整：リスト内のアイコン */
.business-card-body ul li {
    display: flex;
    align-items: center;
    gap: 8px; /* アイコンと文字の間隔 */
}

/* Feather Iconsのサイズと色調整 */
.icon-inline {
    width: 13px;   /* アイコンの大きさ */
    height: 13px;
    stroke: var(--primary-color); /* アイコンの色をブランドカラー（赤）に */
    stroke-width: 3; /* 線の太さ（お好みで2?3程度） */
}
/* レイアウト調整: ボタンを中央寄せ・赤色に */
.business-card-body .btn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    text-align: center;
    background: var(--primary-color); /* 赤背景 */
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(220, 20, 60, 0.3);
    transition: all 0.3s;
}
.business-card-body .btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 6px 15px rgba(220, 20, 60, 0.4);
    transform: translateY(-2px);
    color: white;
}


.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
/* スマホ修正：特徴エリアを1列に */
@media (max-width: 768px) {
    .features-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
}

.feature-item {
    text-align: center; padding: 50px 30px; background: white; border-radius: 20px;
    transition: all 0.4s;
}
.feature-item:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.12); }
.feature-icon { font-size: 60px; margin-bottom: 25px; display: inline-block; }

/* 強みセクション専用のアイコンサイズ設定 */
.icon-feature {
    width: 80px;   /* ここで大きさを調整 */
    height: 80px;
    stroke: var(--primary-color);
    stroke-width: 1.5; /* 大きいアイコンなので線は少し細めが綺麗です */
    margin-bottom: 10px;
}

.news-item {
    display: flex; gap: 30px; padding: 35px; background: white;
    border-radius: 15px; margin-bottom: 25px; border-left: 5px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.3s;
}
.news-date { font-weight: 600; color: var(--primary-color); white-space: nowrap; font-size: 18px; }
/* スマホ修正：ニュースリストを縦並びに */
@media (max-width: 768px) {
    .news-item { flex-direction: column; gap: 10px; padding: 20px; }
    .news-date { font-size: 14px; margin-bottom: 5px; }
    .news-list { max-width: 100% !important; /* 強制的に幅を合わせる */ }
}
.news-item:hover { transform: translateX(10px); }


/* -----------------------------------------------------------------
 * About Page (会社概要) - デザイン修正版
 * ----------------------------------------------------------------- */
.vision-mission { background: linear-gradient(180deg, var(--bg-light) 0%, #ffffff 100%); }

/* レイアウト調整: ビジョン・ミッションボックスの共通デザイン */
.vision-box, .mission-box {
    background: white;
    padding: 50px 50px 50px 50px; /* 左の余白を少し多めに */
    border-radius: 12px; /* 角丸を少し引き締める */
    margin-bottom: 40px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.08); /* 影を柔らかく広げる */
    transition: all 0.4s;
    position: relative;
    overflow: hidden; /* 透かし文字のはみ出し防止 */
    /*border-left: 6px solid var(--primary-color); /* 左側にアクセントカラーを追加 */*/
    z-index: 1;
    text-align: center; /* 修正: 全体を中央寄せに変更 */
}

/* レイアウト調整: ホバー時の動き */
.vision-box:hover, .mission-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(220, 20, 60, 0.15); /* 赤色のニュアンスを含んだ影 */
}

/* レイアウト調整: 背景の英語透かし文字（装飾） */
.vision-box::before, .mission-box::before {
    position: absolute;
    top: -15px;
    right: -10px;
    font-size: 100px;
    font-weight: 900;
    font-family: var(--font-base); /* 英字フォント */
    color: var(--primary-color);
    opacity: 0.04; /* 極めて薄く表示 */
    line-height: 1;
    z-index: -1; /* 文字の後ろに配置 */
    pointer-events: none;
    letter-spacing: 2px;
}

.vision-box::before { content: 'VISION'; }
.mission-box::before { content: 'MISSION'; }

/* レイアウト調整: 見出しデザイン */
.vision-box h3, .mission-box h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* 修正: Flexboxで中央寄せ */
    align-items: center;
    gap: 15px;
}

/* 修正: 見出し横の装飾線を削除したため、該当のCSSブロックを削除しました */

/* レイアウト調整: 本文テキスト */
.vision-box p, .mission-box p {
    font-size: 18px; /* 少し大きめに */
    line-height: 1.8;
    color: var(--text-main);
    font-weight: 500;
    /* text-align: center; が親要素から継承されるので不要ですが明示的に書くならここ */
}

/* レイアウト調整: スマホ修正（About Page） */
@media (max-width: 768px) {
    .vision-box, .mission-box {
        padding: 30px 25px;
        border-left-width: 5px; /* ボーダーを少し細く */
    }

    .vision-box h3, .mission-box h3 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .vision-box p, .mission-box p {
        font-size: 15px;
        line-height: 1.6;
    }

    /* 透かし文字をスマホ向けに調整 */
    .vision-box::before, .mission-box::before {
        font-size: 60px;
        top: -5px;
        right: -5px;
    }
}

.company-info-table {
    width: 100%; border-collapse: collapse; background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06); border-radius: 12px; overflow: hidden;
}
.company-info-table th, .company-info-table td { padding: 30px 35px; border-bottom: 1px solid #f0f0f0; }
.company-info-table th { background: var(--bg-light); text-align: left; width: 30%; color: var(--text-main); }
/* スマホ修正：テーブルをブロック表示に */
@media (max-width: 768px) {
    .company-info-table th, .company-info-table td {
        display: block; width: 100%; padding: 15px 20px;
    }
    .company-info-table th { background: #f0f0f0; font-size: 14px; }
}

.history-timeline { position: relative; padding-left: 50px; }
.history-timeline::before {
    content: ''; position: absolute; left: 15px; top: 10px; bottom: 10px;
    width: 3px; background: linear-gradient(180deg, var(--primary-color), var(--primary-dark));
}
.history-item { position: relative; margin-bottom: 50px; padding-left: 40px; }
.history-date { font-size: 22px; font-weight: 600; color: var(--primary-color); margin-bottom: 12px; }

/* -----------------------------------------------------------------
 * Store / Member / Benefits (事業ページ共通)
 * ----------------------------------------------------------------- */
.concept-box {
    background: linear-gradient(135deg, var(--bg-light) 0%, #ffffff 100%);
    padding: 70px; border-radius: 20px; text-align: center; margin-bottom: 70px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
@media (max-width: 768px) {
    .concept-box { padding: 40px 20px; margin-bottom: 40px; }
    .concept-box h3 { font-size: 26px; }
}
.concept-box h3 {
    font-size: 40px; color: var(--primary-color); margin-bottom: 30px; font-weight: 700;
}

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 80px; }
/* スマホ修正：サービスグリッドを1列に */
@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
}

/* レイアウト調整: Member Pageの「主要サービス」を横並びにするためのクラス追加 */
.services-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列で横並び */
    gap: 40px;
    margin-bottom: 60px;
}
@media (max-width: 768px) {
    .services-overview {
        grid-template-columns: 1fr; /* スマホでは縦並び */
        gap: 30px;
    }
}

.service-card, .service-overview-card, .loan-card {
    background: white; padding: 55px; border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); transition: all 0.4s; text-align: center;
}
@media (max-width: 768px) {
    .service-card, .service-overview-card, .loan-card { padding: 30px 20px; }
}

/* レイアウト調整: ホバー時に背景を暗くする（service-overview-cardのみ適用） */
.service-overview-card:hover {
    background-color: #ffffff; /* 薄いグレーで背景を暗く表現 */
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(220,20,60,0.2);
}

/* 他のカードのホバー効果（背景色変更なし） */
.service-card:hover, .loan-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 60px rgba(220,20,60,0.2); 
}

.service-icon, .icon { font-size: 56px; margin-bottom: 25px; display: inline-block; }

/* Service Detail (Member Page) */
.service-detail {
    background: white;
    margin-bottom: 60px;
}

.service-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* スマホ修正：詳細エリアを1列に */
@media (max-width: 768px) {
    .service-detail-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .service-detail-image {
        height: 250px;
        order: -1; /* 画像を上に */
    }
}

.service-detail-image {
    background: var(--bg-light);
    height: 400px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
}

/* リスト全体のレイアウト */
.service-detail-features {
    list-style: none !important; /* デフォルトの黒丸を消す */
    padding: 0;
    margin-top: 20px;
}

/* リストアイテム（行）の並び */
.service-detail-features li {
    display: flex;             /* アイコンと文字を横並びにする */
    align-items: flex-start;   /* 長文でもアイコンを行の「上」に固定 */
    gap: 10px;                 /* アイコンと文字の間隔 */
    margin-bottom: 0px;       /* 行の間隔 */
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-main);
}

/* アイコン設定（.icon-inline と同じ13pxサイズを適用） */
.service-detail-features li svg.feather {
    width: 13px;               /* サイズを小さく固定 */
    height: 13px;
    color: var(--primary-color); /* 赤色 */
    stroke-width: 3;           /* 線を太くして視認性アップ */
    flex-shrink: 0;            /* アイコンが潰れないように */
    margin-top: 6px;           /* テキストの高さに合わせて位置調整 */
}
/* -----------------------------------------------------------------
 * Target Users Section (こんな事業者様におすすめ)
 * ----------------------------------------------------------------- */
.target-users {
    background-color: var(--bg-light); /* 背景を少しグレーにして区分け */
}

/* グリッドレイアウト（ここで横並びを指定） */
.target-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: 40px;                             /* カード間の隙間 */
    margin-top: 40px;
}

/* スマホ対応（縦並びに戻す） */
@media (max-width: 768px) {
    .target-grid {
        grid-template-columns: 1fr;        /* スマホは1列 */
        gap: 30px;
    }
}

/* カードのデザイン */
.target-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* 柔らかい影 */
    text-align: center;
    transition: all 0.3s ease;
    /*border-bottom: 5px solid var(--primary-color);*/ /* 下にアクセントの赤い線 */
    height: 100%; /* 高さを揃える */
}

/* ホバー時の動き */
.target-card:hover {
    transform: translateY(-10px);             /* ふわっと浮く */
    box-shadow: 0 20px 50px rgba(220,20,60,0.15); /* 影を赤っぽく強調 */
}

/* アイコンエリアの調整 */
.target-card .icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

/* アイコンサイズ（ここだけ個別に調整したい場合） */
.target-card .ph {
    font-size: 64px;              /* 適切な大きさに設定 */
    color: var(--primary-color);  /* ブランドカラー */
}

/* テキスト周り */
.target-card h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-main);
}

.target-card p {
    font-size: 15px;
    color: var(--text-sub);
    line-height: 1.8;
    text-align: left; /* 読みやすいように左揃え（中央が良い場合は center に） */
}

/* =================================================================
   Benefits Page (加盟のメリット) 専用デザイン
   ================================================================= */

/* -----------------------------------------------------------------
   1. イントロダクション (Intro Section)
   ----------------------------------------------------------------- */
.intro-section {
    /* PHP側のインラインスタイルを上書きしてリッチなグラデーションに */
    background: linear-gradient(180deg, #f9f9f9 0%, #ffffff 100%) !important;
    padding: 80px 20px !important;
}

.intro-section p {
    font-size: 16px;
    line-height: 2.0;
    color: var(--text-main);
    max-width: 800px;
    margin: 0 auto;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .intro-section { padding: 50px 20px !important; }
    .intro-section p { text-align: left; font-size: 14px; }
}

/* -----------------------------------------------------------------
   2. メリットカードセクション (Benefits Grid)
   ----------------------------------------------------------------- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PCは2列 */
    gap: 40px;
    margin-top: 50px;
}

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 30px;
    }
}

/* カード本体のデザイン */
.benefit-card {
    background: white;
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* 柔らかい影 */
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

/* ホバー時の浮き上がり効果 */
.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(220, 20, 60, 0.15); /* 赤みのある影 */
}

/* カード上部のアクセントライン */
.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), #ff4d6d);
}

/* 背景の透かし番号 (01, 02...) */
.benefit-number {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 100px;
    font-weight: 900;
    color: #f2f2f2;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    font-family: Arial, sans-serif;
    letter-spacing: -4px;
}

/* カードタイトル */
.benefit-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* タイトル左の赤い線 */
.benefit-card h3::before {
    content: '';
    display: block;
    width: 5px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 4px;
}

/* 説明文 */
.benefit-card p {
    color: var(--text-sub);
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

/* 詳細エリア（グレーのボックス） */
.benefit-details {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    margin-top: auto; /* 下に寄せる */
    position: relative;
    z-index: 1;
}

.benefit-details strong {
    display: block;
    color: var(--primary-color) !important;
    font-size: 13px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* リストデザイン調整 */
.benefit-details ul {
    margin: 0;
    padding: 0;
    list-style: none !important;
}

.benefit-details ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.5;
}

/* アイコン (Feather Icons) の調整 */
.benefit-details ul li svg.feather {
    width: 18px;
    height: 18px;
    color: var(--primary-color);
    stroke-width: 2.5;
    flex-shrink: 0;
    margin-top: 3px;
}

/* -----------------------------------------------------------------
   3. 導入事例セクション (Success Stories)
   ----------------------------------------------------------------- */
.success-stories {
    background-color: #f9f9f9 !important; /* 背景色を変更して区切りを明確に */
    padding: 80px 0 !important;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .story-grid { grid-template-columns: 1fr; }
}

.story-card {
    background: white;
    padding: 35px 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.story-icon {
    width: 60px;
    height: 60px;
    background: #fff0f3; /* 薄い赤背景 */
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
}

.story-card h4 {
    font-size: 18px;
    margin-bottom: 15px;
}

.story-card p {
    font-size: 14px;
    color: var(--text-sub);
    flex-grow: 1;
    margin-bottom: 20px;
}

/* 結果バッジ */
.story-result {
    display: inline-block;
    padding: 8px 20px;
    background: var(--primary-color);
    color: white;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
}

/* -----------------------------------------------------------------
   4. お問い合わせセクション (Contact Section) - ダークテーマ化
   ----------------------------------------------------------------- */
.contact-section {
    background: #222 !important; /* 黒背景に変更 */
    color: white !important;
    padding: 80px 0 100px !important;
    text-align: center; /* 1. テキストやインライン要素を中央へ */
}

.contact-section h2 {
    color: white !important;
    margin-bottom: 50px;
}
/* 2. ボタンなどのブロック要素を中央に配置する設定 */
.contact-section .btn {
    margin: 0 auto; /* 左右のマージンをオートにして中央へ */
}

/* 連絡先グリッド */
.contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .contact-info { grid-template-columns: 1fr; gap: 20px; }
}

/* ガラス風カードデザイン */
.contact-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 30px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.contact-label {
    font-size: 13px;
    color: #ccc;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.contact-value {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.contact-value.phone {
    font-size: 26px;
    color: #ff4d6d; /* 明るめの赤 */
    font-family: Arial, sans-serif;
}

.contact-hours {
    font-size: 12px;
    color: #999;
}

/* リンクの色調整 */
.contact-value a { color: white; text-decoration: none; }
.contact-value a:hover { color: #ff4d6d; }

/* 下部のボタン周り */
.contact-content p { color: #ddd !important; }

.contact-section .btn {
    background: white !important;
    color: var(--primary-color) !important;
    font-weight: 800;
    padding: 18px 60px;
}
.contact-section .btn:hover {
    background: #ff4d6d !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(255, 77, 109, 0.5);
}

/* Shop Detail (Access Map) */
.map-wrapper { height: 500px; border-radius: 20px; overflow: hidden; }
@media (max-width: 768px) {
    .map-wrapper { height: 300px; }
}
.map-wrapper iframe { width: 100%; height: 100%; border: 0; }
.access-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px; }
@media (max-width: 768px) {
    .access-cards { grid-template-columns: 1fr; gap: 20px; }
}
.access-card {
    background: white; padding: 45px; border-radius: 20px; border-left: 5px solid var(--primary-color);
}
@media (max-width: 768px) {
    .access-card { padding: 30px 20px; }
}

/* Phosphor Icons 共通設定 */
.ph, [class^="ph-"] {
    font-size: 24px; /* アイコンの大きさ */
    color: var(--primary-color); /* ブランドカラー（赤）を適用 */
    vertical-align: middle;
    line-height: 1;
}

/* カード内などでとても大きくしたい場合 */
.feature-icon .ph {
    font-size: 96px;
}

/* カード内などで少し大きくしたい場合 */
.feature-middle-icon .ph {
    font-size: 36px;
}
/* =================================================================
   Nishitokyo Shop Page 専用デザイン (Modern Style)
   ================================================================= */

/* 1. 全体設定：背景と余白 */
.nishitokyo-page-design {
    background-color: #fafafa; /* 全体を明るいグレーにしてコンテンツを浮立たせる */
    padding-bottom: 0;
}

.nishitokyo-page-design section {
    padding: 80px 20px; /* 余白を広めにとって開放感を出す */
}

/* セクションタイトル：シンプルでモダンに */
.nishitokyo-page-design .section-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 60px;
    letter-spacing: 0.05em;
    color: var(--text-main);
}
.nishitokyo-page-design .section-title::after {
    width: 60px;
    height: 3px;
    background: var(--primary-color); /* グラデーションをやめてフラットな色に */
    border-radius: 3px;
}

/* 2. 店舗情報セクション (Shop Info) */
.nishitokyo-page-design .shop-info {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    padding: 50px;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,0.02);
}

.nishitokyo-page-design .shop-info-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.nishitokyo-page-design .shop-info-table th {
    width: 30%;
    padding: 24px 30px;
    background-color: #fff; /* 背景色なしですっきり */
    border-bottom: 1px solid #eee;
    color: var(--text-sub);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.nishitokyo-page-design .shop-info-table td {
    padding: 24px 30px;
    border-bottom: 1px solid #eee;
    color: var(--text-main);
    font-weight: 500;
    font-size: 16px;
}

/* 最後の行の線は消す */
.nishitokyo-page-design .shop-info-table tr:last-child th,
.nishitokyo-page-design .shop-info-table tr:last-child td {
    border-bottom: none;
}

/* 3. マップセクション */
.nishitokyo-page-design .map-container {
    background: white; /* マップエリアだけ白背景にしてメリハリ */
}
.nishitokyo-page-design .map-wrapper {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.03);
    height: 450px;
}
.nishitokyo-page-design .map-wrapper iframe {
    height: 100%;
    width: 100%;
}

/* 4. サービス紹介セクション */
.nishitokyo-page-design .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.nishitokyo-page-design .service-box {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: center;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nishitokyo-page-design .service-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(220, 20, 60, 0.1);
    border-color: rgba(220, 20, 60, 0.1);
}

.nishitokyo-page-design .service-icon {
    width: 70px;
    height: 70px;
    background: #fff0f3; /* 薄いピンク */
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
}

.nishitokyo-page-design .service-box h3 {
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 700;
}

.nishitokyo-page-design .service-box p {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* 詳細リンク風デザイン（ボタンではなくテキストリンク） */
.nishitokyo-page-design .service-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

/* 5. アクセス情報セクション */
.nishitokyo-page-design .access-info {
    background: white;
}

.nishitokyo-page-design .access-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.nishitokyo-page-design .access-card {
    background: #fafafa;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #eee;
}

.nishitokyo-page-design .access-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}

.nishitokyo-page-design .access-icon-bg {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

/* アイコン(iタグ)をピンポイントで白くし、サイズを調整 */
.nishitokyo-page-design .access-icon-bg i.ph {
    color: #ffffff !important;   /* 強制的に白 */
    font-size: 22px;             /* アイコンの大きさを調整 */
    line-height: 1;              /* ズレ防止 */
    display: block;
}

.nishitokyo-page-design .access-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.nishitokyo-page-design .access-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nishitokyo-page-design .access-card li {
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.nishitokyo-page-design .access-label {
    background: white;
    border: 1px solid #ddd;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
}
.nishitokyo-page-design .access-card li.note {
    font-size: 13px;
    color: #888;
    margin-top: 10px;
}

/* 6. CTAセクション（お問い合わせ） */
.nishitokyo-page-design .cta-section {
    background: linear-gradient(135deg, #222 0%, #333 100%);
    color: white;
    text-align: center;
    padding: 100px 20px;
}
.nishitokyo-page-design .cta-section h2 {
    color: white;
    margin-bottom: 30px;
    font-size: 36px;
}
.nishitokyo-page-design .cta-section p {
    color: #ccc;
    margin-bottom: 40px;
    font-size: 16px;
}

.nishitokyo-page-design .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.nishitokyo-page-design .btn-white {
    background: white;
    color: var(--primary-color);
    padding: 18px 60px;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.3s;
}
.nishitokyo-page-design .btn-white:hover {
    background: #eee;
    transform: translateY(-3px);
}
.nishitokyo-page-design .btn-outline-white {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 600;
}
.nishitokyo-page-design .btn-outline-white:hover {
    border-color: white;
    background: rgba(255,255,255,0.1);
}

.nishitokyo-page-design .back-link a {
    color: #888;
    font-size: 14px;
    text-decoration: underline;
}
.nishitokyo-page-design .back-link a:hover {
    color: white;
}

/* -----------------------------------------------------------------
   スマホ対応 (SP Layout)
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .nishitokyo-page-design section { padding: 60px 20px; }

    .nishitokyo-page-design .shop-info { padding: 30px 20px; }

    .nishitokyo-page-design .shop-info-table th,
    .nishitokyo-page-design .shop-info-table td {
        display: block; width: 100%; padding: 10px 0; border: none;
    }
    .nishitokyo-page-design .shop-info-table th {
        color: var(--primary-color); padding-bottom: 5px;
    }
    .nishitokyo-page-design .shop-info-table tr {
        border-bottom: 1px dashed #eee; display: block; padding-bottom: 15px; margin-bottom: 15px;
    }

    .nishitokyo-page-design .services-grid,
    .nishitokyo-page-design .access-cards {
        grid-template-columns: 1fr;
    }

    .nishitokyo-page-design .cta-buttons {
        flex-direction: column;
    }
}
/* =================================================================
   Contact Form 7 (タグなし構成用・完全デザイン修正版)
   ================================================================= */

/* 1. フォーム全体を中央寄せ */
.wpcf7-form {
    max-width: 700px;      /* 幅を制限 */
    margin: 50px auto;     /* 上下50px、左右自動（中央寄せ） */
    padding: 0 20px;       /* スマホ用余白 */
    font-family: var(--font-base);
}

/* 2. 項目名（ラベル）のデザイン */
.wpcf7-form p {
    margin-bottom: 0;      /* 余計な余白削除 */
    font-weight: 700;
    color: var(--text-main);
    font-size: 16px;
    line-height: 2.0;
}

/* 自動挿入される br タグを消す（レイアウト崩れ防止） */
.wpcf7-form br {
    display: none;
}

/* 3. 入力欄（テキスト・メール・セレクト・テキストエリア） */
.wpcf7-text,
.wpcf7-email,
.wpcf7-select,
.wpcf7-textarea {
    width: 100%;                  /* 横幅いっぱい */
    box-sizing: border-box;       /* 枠を含めたサイズ計算 */
    padding: 18px 20px;           /* 内側の余白を大きく */
    margin-top: 5px;              /* ラベルとの隙間 */
    margin-bottom: 30px;          /* 次の項目との隙間 */
    
    background-color: #fcfcfc;    /* 背景をほんのりグレー */
    border: 1px solid #ddd;       /* 枠線を薄く */
    border-radius: 12px;          /* 角丸を大きく（柔らかい印象） */
    font-size: 16px;              /* 文字サイズ確保 */
    transition: all 0.3s ease;
}

/* テキストエリアの高さ確保 */
.wpcf7-textarea {
    min-height: 220px;
}

/* 4. クリックした時のフォーカス効果 */
.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-select:focus,
.wpcf7-textarea:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 4px rgba(220, 20, 60, 0.1); /* 赤色のふんわりした影 */
}

/* 5. 送信ボタンのデザイン */
.wpcf7-submit {
    display: block;
    width: 100%;
    max-width: 300px;             /* ボタン幅を制限 */
    margin: 30px auto 0;          /* 中央寄せ */
    padding: 18px;
    
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(220, 20, 60, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.wpcf7-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(220, 20, 60, 0.3);
}

/* 6. レスポンシブ対応（スマホ） */
@media (max-width: 768px) {
    .wpcf7-form {
        margin: 30px auto;
        padding: 0 15px;
    }
    .wpcf7-text,
    .wpcf7-email,
    .wpcf7-textarea {
        padding: 15px;
        margin-bottom: 20px;
    }
}}