@charset "utf-8";

/* 埋め込みGoogleMapの設定 */
.google_map {
    /* 画面の7割の大きさにする */
    height: 70vh;
    /* 画面幅いっぱいに表示 */
    width: 100%;
    /* 概要欄との間に余白を設ける */
    margin-bottom: var(--section-gutter);
}

.google_map iframe {
    /* GoogleMapの大きさを親要素に合わせる */
    height: 100%;
    width: 100%;
}

/* 概要欄の設定 */
.access_text_wrap {
    /* 最大幅を950pxにして中央配置 */
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    /* ボタンとの間に余白を設ける */
    margin-bottom: var(--section-gutter);
}

.access_text_inner {
    /* テキスト周りの余白 */
    margin: 0 var(--gutter-base);
}

.access_text_title {
    /* 文字サイズを大きめにする */
    font-size: var(--size-lg);
    /* 本文との間に余白を設ける */
    margin-bottom: var(--gutter-2x);
}

.access_text {
    /* 一覧との間に余白を設ける */
    margin-bottom: var(--content-gutter);
}

.access_box_text {
    /* 1項目ごとに下線で区切る */
    border-bottom: var(--sub-color) 1px solid;
    /* 下線との間に余白を設ける */
    padding-bottom: var(--gutter-base);
}

.access_box:not(:last-child) {
    /* 次の項目との間に余白を設ける 最後以外 */
    margin-bottom: var(--gutter-base);
}

/****************************************
 ボタンの設定 
 PC版で見ても違和感なしなのでスマホPC兼用
 ****************************************/
.google_map_btn_wrap {
    /* 最大幅を950pxにして中央配置 */
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    /* ボタン内文字を中央配置 */
    text-align: center;
}

.google_map_btn_inner {
    /* テキスト横余白 */
    margin: 0 var(--gutter-base);
}

.google_map_btn {
    /* ボタンらしく囲い線を作る */
    border: var(--sub-color) 2px solid;
    /* リンク範囲を親要素の横幅いっぱいにする */
    display: block;
    /* 上下余白 */
    padding: var(--content-gutter) 0;
    /* 文字サイズを大きめにする */
    font-size: var(--size-lg);
    /* リンク文字の下線を消す */
    text-decoration: none;
    /* 文字色を囲い線と同じにする */
    color: var(--sub-color);
    /* hoverアニメーションの速さを通常程度にする */
    transition: 0.2s;
}

.google_map_btn:hover {
    /* hover時ボタン色変更文字白抜き */
    background-color: var(--sub-color);
    color: var(--white);
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .access_text_wrap {
        /* ボタンとの間の余白を倍にする */
        margin-bottom: var(--section-gutter-pc);
    }

    .access_text_title {
        /* 文字サイズを1サイズ大きくする */
        font-size: var(--size-xl);
        /* 本文との間の余白を倍にする */
        margin-bottom: var(--gutter-4x);
    }

    .access_text {
        /* 一覧との間に余白を設ける PC版 */
        margin-bottom: var(--content-gutter-pc);
    }

    .access_box {
        /* 項目名と内容を横並びにする */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 1項目ごとに下線で区切る PC版 */
        border-bottom: var(--sub-color) 1px solid;
        /* 下線との間の余白を倍にする */
        padding-bottom: var(--gutter-2x);
    }

    .access_box:not(:first-child) {
        /* 前の項目との間に、下線の間の余白と同じ大きさの余白を設ける */
        padding-top: var(--gutter-2x);
    }

    /* 横並びにした場合に不要な初期下線を消す */
    .access_box_text {
        /* 下線を消す */
        border-bottom: 0;
        /* 余白を消す */
        padding-bottom: 0;
    }
}

/*=====min-width:950px=====*/

/* 240706追記 */
/* トップ画像を設定 */
.page_title_wrap {
    background-image: url(../../img/access_top_img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 20%;
}

/* 240706追記ここまで */

/* 240711追記 */

/* トップ画像表示位置を広げる */
@media screen and (min-width:950px) {
    .page_title_wrap {
        height: 70vh;
        background-position: center;
    }

    .page_title_text_wrap {
        transform: translateY(240px);
    }
}

/*=====min-width:950px=====*/

/* 240711追記ここまで */