@charset "utf-8";

/* ============================================
   access.css
   access.html専用スタイル
   共通パーツ（header/footer/page-hero/pankuzu/
   contact/btn_contact/sp-br 等）は style.css を使用。

   本ファイルは other_style.css に定義されていた
   本文テキスト（main_txt）・余白ユーティリティ関連の
   スタイルを移植したものです。
   other_style.css側の該当ルールは削除していないため、
   他ページで参照している場合はそのまま動作します。
   ============================================ */

/* 本文テキスト（.content p.main_txt は style.css に共通化済み） */
.content div.main_txt {
    width: 94%;
    margin: 8px auto;
    line-height: 1.5;
    text-align: left;
    font-size: 14px;
}

/* 余白ユーティリティ（.mgb20 / .mgb30 / .mgb50 は style.css に共通化済み） */


/* ============================================
   本文テキスト（p.main_txt）タイポグラフィ改修
   lesson.css の .lesson-card__desc を参考に、
   読みやすい行間・文字色（グレー）に統一。
   ============================================ */
.content p.main_txt {
    width: 94%;
    margin: 4px auto 16px;
    font-size: 14px;
    line-height: 1.65;
    color: #555;
}
@media screen and (max-width: 560px) {
    .content p.main_txt {
        font-size: 13px;
    }
}


/* ============================================
   見出しブロック（access-section__header）
   lesson.css の .lesson-list-section__header を参考にした
   「タイトル＋英字ラベル＋下線」のシンプルな見出しデザイン。
   従来の h2_title_01（箱型）から乗り換え。
   ============================================ */
.access-section__header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 12px;
    width: 94%;
    margin: 60px auto 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e8f0fa;
}
.access-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.4;
}
.access-section__title i {
    color: #1E73BE;
    font-size: 0.9em;
}
.access-section__en {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    color: #999;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
@media screen and (max-width: 560px) {
    .access-section__title {
        font-size: 17px;
        line-height: 1.4;
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}
@media screen and (max-width: 400px) {
    .access-section__title {
        font-size: 15px;
    }
}

/* セクション区切り（lesson.css の .lesson-section-divider を参考） */
.access-section-divider {
    height: 0;
    border: none;
    border-top: 1px solid #e8f0fa;
    margin: 6px auto;
    width: 94%;
}


/* ============================================
   クイックナビ（ページ内アンカーリンク）
   ページの内容を先に把握できるようにするためのチップ状ナビ。
   ============================================ */
.access-quicknav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 94%;
    margin: 16px auto 0;
}
.access-quicknav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid #1E73BE;
    border-radius: 999px;
    background: #fff;
    color: #1E73BE;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.access-quicknav a:hover {
    background: #1E73BE;
    color: #FFF;
}
.access-quicknav i {
    color: #1E73BE;
}
.access-quicknav a:hover i {
    color: #FFF;
}
@media screen and (max-width: 560px) {
    .access-quicknav a {
        font-size: 12px;
        padding: 7px 12px;
    }
}


/* ============================================
   所在地の基本情報（住所・電話・営業時間）
   ============================================ */
.access-info-box {
    width: 94%;
    margin: 10px auto 20px;
    padding: 16px 20px;
    background: #F9F9F9;
    border-radius: 8px;
    border: 1px solid #E3E3E3;
}
.access-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.access-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    padding: 4px 0;
    color: #333;
}
.access-info-list li i {
    color: #1E73BE;
    width: 18px;
    text-align: center;
    margin-top: 2px;
}
.access-info-list a {
    color: #1E73BE;
}

/* 地図埋め込み（iframe）中央寄せ */
.access-map-embed {
    display: block;
    margin: 0 auto;
}

/* 地図の下のアクションボタン（Googleマップで開く／ルート検索） */
.access-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 14px auto 4px;
    width: 94%;
}
.access-map-actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid #1E73BE;
    color: #1E73BE;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.access-map-actions a:hover {
    background: #1E73BE;
    color: #FFF;
}


/* ============================================
   アクセス方法カード（電車／お車 など）
   ============================================ */
.access-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 94%;
    margin: 16px auto 10px;
}
.access-card {
    background: #FFF;
    border: 1px solid #E3E3E3;
    border-radius: 8px;
    padding: 20px 18px;
    text-align: center;
}
.access-card__icon {
    font-size: 26px;
    color: #1E73BE;
    margin-bottom: 10px;
}
.access-card__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: 0.02em;
}
.access-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}
.access-card__desc strong {
    color: #F59E0B;
}
@media screen and (max-width: 560px) {
    .access-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   案内ボックス（駐車場・目印など、注意喚起を含む説明文）
   ============================================ */
.access-box {
    width: 94%;
    margin: 10px auto 16px;
    padding: 16px 20px;
}
.access-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}


/* ============================================
   FAQ（アコーディオン）
   ネイティブの details / summary を使用し、
   JS不要・アクセシブルな開閉に対応。
   ============================================ */
.access-faq {
    width: 94%;
    margin: 14px auto 10px;
}
.access-faq details {
    border: 1px solid #E3E3E3;
    border-radius: 6px;
    margin-bottom: 10px;
    background: #FFF;
    overflow: hidden;
}
.access-faq summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 14px 44px 14px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    background: #F9F9F9;
    line-height: 1.5;
}
.access-faq summary::-webkit-details-marker {
    display: none;
}
.access-faq summary::before {
    content: "Q.";
    color: #1E73BE;
    margin-right: 8px;
}
.access-faq summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #1E73BE;
    transition: transform 0.2s;
}
.access-faq details[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}
.access-faq details p {
    margin: 0;
    padding: 14px 18px 16px 18px;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}