@charset "utf-8";

/* --- 1. 変数と基本設定 --- */
:root {
    --main-blue: #0066cc;
    --sub-green: #005638;
    --accent-red: #dc143c;
    --bg-gray: #f5f7f8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #444;
    background: var(--bg-gray);
    line-height: 1.6;
}

/* --- 2. レイアウト --- */
.container {
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 15px;
}

main {
    flex: 1;
    min-width: 320px;
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

aside {
    width: 300px;
}

/* --- 3. パーツ装飾 --- */
header { background: var(--main-blue); color: #fff; text-align: center; padding: 20px 0; }
h1 { font-size: 1.8rem; }
h2 { color: var(--main-blue); border-bottom: 3px solid var(--main-blue); margin: 30px 0 15px; padding-bottom: 5px; }

.breadcrumb { font-size: 0.85rem; margin-bottom: 20px; color: #666; }
.breadcrumb a { color: var(--main-blue); text-decoration: none; }

/* h1の改行、PCでは表示しない */
.sp-only {
    display: none;
}

/* 冒頭要約 */
.summary {
    font-size: 0.9rem;
    border-left: 3px solid #eee;
    padding-left: 15px;
    margin-bottom: 25px;
}
.outline { color: var(--sub-green); margin-bottom: 8px; }
.crimson { color: var(--accent-red); font-weight: bold; }

/* マザーズから本所へのリンク<span class="close-text">※境界地域にお住まいの方は、念のため公式サイトで詳細をご確認ください。</span> */
.mothers-link {
    margin: 20px 0;
    padding: 15px;
    background-color: #fff9fb; /* ほんのりピンク */
    border: 2px solid #ffccd5;
    border-radius: 8px;
    text-align: center;
}
.mothers-link a {
    text-decoration: none;
    color: #d63384; /* マザーズらしい濃いピンク */
    display: block;
}
.mothers-link strong {
    font-size: 1.1rem;
}

/* 施設情報カード */
.info-card { border: 2px solid var(--main-blue); border-radius: 10px; padding: 20px; margin: 20px 0; background: #fff; }
.info-row { display: flex; border-bottom: 1px solid #eee; padding: 12px 0; }
.info-row:last-child { border: none; } /* HTMLのstyle="border:none"を代替 */

.info-label { width: 110px; font-weight: bold; color: var(--main-blue); flex-shrink: 0; }
.info-content > div { margin-bottom: 8px; } /* HTMLの余白指定を代替 */

.time-tag { display: inline-block; background: var(--main-blue); color: #fff; padding: 2px 10px; border-radius: 4px; font-size: 0.85rem; margin-right: 8px; }
.tel-link { font-size: 1.6rem; font-weight: bold; color: var(--accent-red); text-decoration: none; }
.note-red { font-size: 0.85rem; color: var(--accent-red); margin-top: 10px; }

.info-facility-name {
    font-size: 0.9rem;      /* 本文より少し小さめ */
    font-weight: bold;      /* 視認性確保のため太字 */
    color: #555;            /* 主張しすぎないグレー */
    border-bottom: 1px dotted #ccc; /* 境界線 */
    margin-bottom: 15px;    /* 下の項目との余白 */
    padding-bottom: 5px;    /* 線の上の余白 */
    display: block;
}

/* 電話番号のラベル（新卒応援など）専用スタイル */
/* 括弧がある場合（【新卒応援】など） */
.tel-label {
    display: block;        /* 改行させる */
    color: #666;           /* グレー */
    font-size: 0.9rem;     /* 数字より一回り小さく（1.2remから調整） */
    font-weight: normal;
    margin-left: -0.4em;   /* 括弧「【」の隙間をフォントサイズに合わせて調整 */
    margin-bottom: -2px;   /* 下の電話番号との余白を詰める */
    line-height: 1.2;      /* 行間を狭くして番号に近づける */
}

/* 括弧がない場合（ハローワーク一宮内など）★今回追加 */
.tel-label-text {
    display: block;
    color: #666;
    font-size: 0.9rem;
    font-weight: normal;
    margin-left: 0;      /* 左端をピタッと揃える */
    margin-bottom: 2px;
    letter-spacing: 0;   /* 字間を標準に */
}

/* 電話番号リンク自体の調整 */
.tel-link {
    display: inline-block;
    line-height: 1.5;
    margin-bottom: 10px;    /* 2つの番号が並ぶ際の間隔 */
}

/* 休業日などの補足情報のテキストサイズ調整 */
.close-text{
    font-size: 0.85rem; /* .note-redに近いサイズ */
    color: #555;        /* 少しだけグレーにすることで視覚的な優先度を下げる */
    line-height: 1.5;
}

/* 地図 */
.map-frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 15px; border: 1px solid #ddd; }
.map-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* 体験談（修正版） */
.exp-box { 
    background: #fffef0; 
    border: 1px solid #e6db55; 
    padding: 20px; 
    border-radius: 8px; 
    margin-bottom: 20px; 
}
.exp-header {
    font-weight: bold;
    color: var(--main-blue);
    border-bottom: 1px solid #e6db55;
    margin-bottom: 15px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
}
.exp-header::before { content: "💬"; margin-right: 8px; }

.exp-title {
    font-weight: bold;
    font-size: 1rem;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
    display: block; /* 確実に改行させる */
}

.exp-user {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 15px;
    display: block; /* 確実に改行させる */
}

/* 本文エリアの文字サイズや行間 */
.exp-body { 
    font-size: 0.85rem; 
    line-height: 1.8; 
    color: #555; 
    text-align: justify;
}

/* 本文内の各段落に余白をつける（これが重要！） */
.exp-body p {
    margin-bottom: 1.2em; /* 段落と段落の間を空ける */
}

/* 最後の段落だけは、下の余白を消して枠に収まりよくする */
.exp-body p:last-child {
    margin-bottom: 0;
}

/* 広告・アフィリエイト */
.ads-slot { background: #fafafa; border: none; text-align: center; padding: 10px; margin: 25px 0; min-height: 250px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.8rem; 
width: 100%; overflow: hidden; } /* はみ出しをカット */

.multiplex-idx {
    display: block;
    width: 100%;
    min-height: 400px;
}

/* サイドバー広告専用の調整 */
.aside-ads {
    min-height: 250px; /* 300x250が収まる最小高 */
    background: transparent; /* 背景色を消して馴染ませる */
    border: none; /* ドット枠を消す */
    padding: 0;
    margin-bottom: 5px;
    display: flex;
    justify-content: center; /* 横中央 */
    align-items: flex-start; /* 上詰め */
}

.affiliate-box { background: #fff9e6; border-left: 5px solid #ffcc00; padding: 15px; margin: 20px 0; font-size: 0.95rem; }

/*　アフィリエイトのPR表記*/
.ad-notice {
    font-size: 12px;
    color: #888;
    text-align: right;
    margin: 5px 10px 0 0;
    font-family: sans-serif;
}

/* フッター */
footer { background: #fff; border-top: 1px solid #ddd; padding: 30px 15px; margin-top: 50px; text-align: center; font-size: 0.85rem; color: #666; }
footer a { color: #666; margin: 0 10px; text-decoration: none; }
.footer-links { margin: 15px 0; }
.footer-line { height: 4px; background: #f0c092; margin-bottom: 15px; }

/* --- 4. レスポンシブ --- */
@media (max-width: 900px) {
    aside { width: 100%; }
    .info-row { flex-direction: column; }
    .info-label { width: 100%; margin-bottom: 5px; }
}

/* --- 視認性向上・バグ修正（2026/03/30追記） --- */

/* 体験談タイトル：黒さを少し和らげ、左線で視認性アップ */
.exp-title {
    color: #555 !important; /* 少し柔らかい黒 */
    border-left: 4px solid #aaa;
    padding-left: 12px;
    margin-bottom: 8px;
    font-size: 1.05rem; /* 視認性確保のため、わずかにサイズアップ */
}

/* 管轄区域の赤文字：文字潰れ対策 */
.crimson {
    color: #d32f2f !important; /* 鮮やかすぎない深い赤 */
    font-weight: 600 !important; /* 700より少し細くして潰れを防止 */
    letter-spacing: 0.03em; /* わずかな字間 */
}

/* スマホ表示の最適化 */
@media screen and (max-width: 768px) {
    /* 全体的な文字の濃さとサイズ */
    body {
        color: #222; /* ベースの文字色をハッキリさせる */
    }
    .summary, .experience-text, .info-text {
        font-size: 15px !important; /* 0.9remは約14.4pxなので、少し大きく */
        line-height: 1.7;
    }
    h1 {
        padding: 0 15px; /* 左右に15pxの余白を作る */
        box-sizing: border-box; /* 余白を含めて100%幅に収める */
        word-break: break-all; /* どこでも切れるようにする（基本） */
    overflow-wrap: anywhere; /* 可能な限り単語の区切りを優先する */
    line-height: 1.4; /* 行間を少し広げて、2行になっても読みやすくする */
    }
    
    /*  h1の改行、スマホ（画面幅768px以下）の時だけ表示（改行）する */
    .sp-only {
        display: inline;
    }
}

/* 単語の泣き別れ（改行）防止用 */
.no-split {
    display: inline-block;
    white-space: nowrap;
}