@charset "utf-8";

.access-page {
    padding: 200px 0 120px;
    background-color: #f7f6ee;
    position: relative;
    overflow: hidden;
    font-family: 'Zen Maru Gothic', sans-serif;
    color: #333;
}

.access-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 10;
}

/* タイトル部分 */
.access-head {
    text-align: center;
    margin-bottom: 80px;
}
.access-icon { width: 60px; margin: 0 auto 15px; display: block; }
.access-title-jp { font-size: 24px; font-weight: 900; }
.access-title-en { display: block; font-size: 13px; font-weight: 800; color: #aaa; letter-spacing: 0.15em; margin-top: 8px; }
.access-head::after { content: ""; display: block; width: 60px; height: 3px; background-color: #f1c40f; margin: 20px auto 0; border-radius: 2px; }

/* PCでの横並び設定 */
.access-flex-container {
    display: flex;
    align-items: stretch; /* 地図と情報の高さを揃える */
    gap: 40px;
    margin-top: 40px;
}

/* マップエリア */
.access-map-area {
    flex: 1.2;
    background-color: #fff;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.access-map-frame {
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.access-map-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 450px;
    display: block;
}

/* 情報エリア */
.access-info {
    flex: 0.8;
}

.access-info-list {
    background-color: #fff;
    padding: 40px;
    border-radius: 20px;
    height: 100%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.access-info-item {
    border-bottom: 1px dashed #eee;
    padding: 20px 0;
}
.access-info-item:first-child { padding-top: 0; }
.access-info-item:last-child { border-bottom: none; padding-bottom: 0; }

.access-info-label {
    display: block;
    font-weight: 900;
    color: #f1c40f;
    font-size: 16px;
    margin-bottom: 5px;
}

.access-info-text {
    font-size: 15px;
    line-height: 1.7;
    font-weight: 700;
    margin: 0;
}

/* 装飾 */
.deco-v { position: absolute; z-index: 1; pointer-events: none; }
.deco-v4 { top: 320px; left: -15vw; width: 65vw; max-width: 900px; opacity: 0.7; }
.deco-v6 { right: -10vw; bottom: -50px; width: 40vw; max-width: 600px; opacity: 0.8; }

/* レスポンシブ設定 */
@media screen and (max-width: 950px) {
    .access-flex-container {
        flex-direction: column; /* タブレット以下では縦並び */
    }
    .access-map-frame iframe {
        min-height: 350px;
    }
}

@media screen and (max-width: 850px) {
    .access-page { padding: 60px 0; }
    .access-info-list { padding: 25px; }
}