@charset "utf-8";
/* ========================================
   たいわゴルフクラブ - アクセスページ専用CSS
   ファイル名: access.css
   説明: アクセスページ（access.html）のスタイル定義
   ======================================== */

/* ========================================
   パンくずリスト
   説明: ページ上部のナビゲーション表示
   ======================================== */

.breadcrumb {
    /* 背景: 白から薄いグレーへのグラデーション */
    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
    
    /* 余白 */
    padding: 10px 0;
    
    /* 下部の装飾 */
    border-bottom: 2px solid #e0e0e0; /* 2pxの灰色ボーダー */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 軽い影で立体感 */
}

/* パンくずリストのコンテナ */
.breadcrumb .container {
    max-width: 1360px; /* 最大幅 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 20px; /* 左右に20pxの余白 */
}

/* パンくずリストの順序付きリスト */
.breadcrumb ol {
    list-style: none; /* リストマーカーを非表示 */
    display: flex; /* 横並び配置 */
    align-items: center; /* 垂直方向中央揃え */
    margin: 0;
    padding: 0;
    flex-wrap: wrap; /* 折り返しを許可（スマホ対応） */
}

/* パンくずリストの各アイテム */
.breadcrumb li {
    font-size: 13px;
    color: #555; /* グレー系のテキスト */
    font-weight: 500; /* やや太字 */
    display: flex;
    align-items: center;
}

/* パンくずリストの区切り文字（最後の要素以外） */
.breadcrumb li:not(:last-child)::after {
    content: '|'; /* 縦棒で区切る */
    margin: 0 15px; /* 左右に15pxの余白 */
    color: #666;
    font-weight: normal;
}

/* パンくずリストのリンク */
.breadcrumb a {
    color: #003d82; /* ブランドカラー（青） */
    text-decoration: none; /* 下線なし */
    transition: all 0.3s ease; /* スムーズな変化 */
    padding: 5px 10px; /* クリック領域を広げる */
    border-radius: 4px; /* 角を丸める */
}

/* パンくずリストのリンク - ホバー時 */
.breadcrumb a:hover {
    background-color: #003d82; /* 背景を青に */
    color: #ffffff; /* テキストを白に */
    transform: translateY(-1px); /* 1px上に移動 */
}

/* パンくずリストの現在ページ（最後の要素） */
.breadcrumb li:last-child {
    color: #333; /* 濃いグレー */
    font-weight: 600; /* 太字 */
}

/* ========================================
   ヒーロー画像エリア
   説明: ページタイトル画像とテキストのオーバーレイ
   ======================================== */

.hero-image {
    position: relative; /* 子要素の絶対配置の基準 */
    width: 100%;
    height: 400px; /* 高さ固定 */
    overflow: hidden; /* はみ出しを隠す */
}

/* ヒーロー画像 */
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠内に収める（トリミング） */
    object-position: center; /* 中央を基準にトリミング */
}

/* ヒーロー画像上のテキスト */
.hero-text {
    position: absolute; /* 画像の上に重ねる */
    top: 50%; /* 上から50% */
    left: 50%; /* 左から50% */
    transform: translate(-50%, -50%); /* 中央に配置 */
    text-align: center;
    color: #ffffff; /* 白いテキスト */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* 黒い影で視認性向上 */
}

/* ヒーローエリアのメインタイトル */
.hero-title {
    font-family: 'Montserrat', sans-serif; /* 英字フォント */
    font-size: clamp(48px, 8vw, 72px); /* 可変サイズ: 最小48px、最大72px */
    font-weight: 800; /* 極太 */
    font-style: italic; /* 斜体 */
    margin: 0;
    letter-spacing: 0.05em; /* 文字間隔を広げる */
}

/* ヒーローエリアのサブタイトル */
.hero-subtitle {
    font-size: clamp(14px, 2.5vw, 18px); /* 可変サイズ: 最小14px、最大18px */
    margin: 8px 0 0;
    letter-spacing: 0.2em; /* 文字間隔を広げる */
    font-weight: 500;
}

/* ========================================
   アクセスページメインエリア
   説明: コンテンツ全体の背景と余白設定
   ======================================== */

.access-page {
    padding: 80px 0px 40px; /* 上80px、下40pxの余白 */
    background: #ffffff; /* 白い背景 */
}

/* コンテンツラッパー */
.wrap {
    max-width: 1400px; /* 最大幅 */
    margin: auto; /* 中央揃え */
    padding: 40px 20px; /* 上下40px、左右20pxの余白 */
}

/* ========================================
   ページタイトルセクション
   説明: たいわゴルフクラブのロゴ表示
   ======================================== */

.access-title-section {
    margin-bottom: 60px; /* 下に60pxの余白 */
    max-width: 1400px; /* 最大幅を制限 */
    margin-left: auto; /* 左右中央揃え用 */
    margin-right: auto; /* 左右中央揃え用 */
}

.page-logo {
    max-width: 250px; /* 最大幅250px（小さく） */
    height: auto; /* 高さ自動調整 */
    display: block; /* ブロック要素化 */
    margin-left: 20px; /* 住所の左端に合わせる */
}

/* ========================================
   アクセス情報セクション
   説明: 住所、電話、アクセス方法の表示
   ======================================== */

.access-info-section {
    max-width: 1400px; /* 最大幅を制限 */
    margin: 0 auto; /* 中央揃え */
}

/* 情報ブロック */
.info-block {
    margin-bottom: 50px; /* 下に50pxの余白 */
    border-bottom: 2px solid #e0e0e0; /* 下に薄いグレーの線 */
    padding-bottom: 40px; /* 下に40pxの内側余白 */
}

.info-block:last-child {
    border-bottom: none; /* 最後のブロックは下線なし */
}

/* 情報ヘッダー（タイトルとボタンの横並び） */
.info-header {
    display: flex; /* フレックスレイアウト */
    align-items: center; /* 垂直方向中央揃え */
    justify-content: space-between; /* 両端揃え */
    margin-bottom: 20px; /* 下に20pxの余白 */
}

/* 情報タイトル */
.info-title {
    font-size: clamp(20px, 2.5vw, 24px); /* 可変サイズ */
    font-weight: 700; /* 太字 */
    color: #333; /* 濃いグレー */
    margin: 0; /* 余白なし */
    padding-left: 15px; /* 左に15pxの内側余白 */
    border-left: 4px solid #003d82; /* 左に青い線 */
}

/* Google mapボタン */
.map-button {
    display: inline-block; /* インラインブロック要素 */
    background: #003d82; /* ブランドカラー（青） */
    color: #ffffff; /* 白いテキスト */
    text-decoration: none; /* 下線なし */
    font-size: clamp(13px, 1.5vw, 14px); /* 可変サイズ */
    font-weight: 600; /* やや太字 */
    padding: 10px 0px; /* 上下10px、左右20pxの余白 */
	margin-top: 15px;
    border-radius: 6px; /* 角を丸める */
    transition: all 0.3s ease; /* スムーズな変化 */
    box-shadow: 0 2px 4px rgba(0, 61, 130, 0.2); /* 軽い影 */
}

.map-button:hover {
    background: #0051a8; /* 明るい青に */
    transform: translateY(-2px); /* 上に2px移動 */
    box-shadow: 0 4px 8px rgba(0, 61, 130, 0.3); /* 影を強く */
}

/* 情報コンテンツ */
.info-content {
    padding-left: 20px; /* 左に20pxの余白 */
}

/* 郵便番号 */
.postal-code {
    font-size: clamp(16px, 2vw, 18px); /* 可変サイズ */
    color: #666; /* グレー */
    margin: 0 0 8px; /* 下に8pxの余白 */
    font-weight: 500; /* やや太字 */
}

/* 住所 */
.address {
    font-size: clamp(18px, 2.2vw, 22px); /* 可変サイズ */
    color: #333; /* 濃いグレー */
    margin: 0;
    font-weight: 600; /* やや太字 */
    line-height: 1.6; /* 行間を広く */
}

/* 駐車場 */
.postal-park {
    font-size: clamp(16px, 2vw, 18px); /* 可変サイズ */
    color: #333; /* グレー */
    margin: 20px 0 8px; /* 下に8pxの余白 */
    font-weight: 500; /* やや太字 */
}

/* 連絡先情報 */
.contact-info {
    font-size: clamp(16px, 2vw, 18px); /* 可変サイズ */
    color: #333; /* 濃いグレー */
    margin: 0;
    display: flex; /* フレックスレイアウト */
    align-items: center; /* 垂直方向中央揃え */
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 8px; /* 要素間に8pxの余白 */
}

/* 連絡先ラベル */
.contact-label {
    font-weight: 600; /* やや太字 */
    color: #666; /* グレー */
}

/* 連絡先リンク（電話番号） */
.contact-link {
    color: #003d82; /* ブランドカラー（青） */
    text-decoration: none; /* 下線なし */
    font-weight: 700; /* 太字 */
    transition: all 0.3s ease; /* スムーズな変化 */
    padding: 4px 8px; /* 上下4px、左右8pxの余白 */
    border-radius: 4px; /* 角を丸める */
}

.contact-link:hover {
    background-color: #003d82; /* 背景を青に */
    color: #ffffff; /* テキストを白に */
}

/* 連絡先セパレーター */
.contact-separator {
    color: #ccc; /* 薄いグレー */
    margin: 0 4px; /* 左右に4pxの余白 */
}

/* 連絡先テキスト（FAX番号など） */
.contact-text {
    font-weight: 600; /* やや太字 */
}

/* アクセス方法 */
.access-method {
    margin-bottom: 30px; /* 下に30pxの余白 */
}

.access-method:last-child {
    margin-bottom: 0; /* 最後の要素は下余白なし */
}

/* アクセス方法タイトル */
.method-title {
    font-size: clamp(17px, 2vw, 19px); /* 可変サイズ */
    font-weight: 700; /* 太字 */
    color: #003d82; /* ブランドカラー（青） */
    margin: 0 0 12px; /* 下に12pxの余白 */
    display: inline-block; /* インラインブロック要素 */
    padding: 6px 16px; /* 上下6px、左右16pxの余白 */
    background: linear-gradient(135deg, #e8f4ff 0%, #d4e9ff 100%); /* 薄い青のグラデーション */
    border-radius: 6px; /* 角を丸める */
}

/* アクセス方法詳細 */
.method-details {
    padding-left: 10px; /* 左に10pxの余白 */
}

/* アクセス方法のポイント */
.method-point {
    font-size: clamp(16px, 1.8vw, 18px); /* 可変サイズ */
    font-weight: 700; /* 太字 */
    color: #333; /* 濃いグレー */
    margin: 0 0 10px; /* 下に10pxの余白 */
}

/* アクセス方法の説明文 */
.method-description {
    font-size: clamp(14px, 1.6vw, 16px); /* 可変サイズ */
    color: #666; /* グレー */
    line-height: 1.9; /* 行間を広く */
    margin: 0;
}

/* ========================================
   レスポンシブデザイン
   説明: 画面サイズに応じたスタイル調整
   ======================================== */

/* タブレット以下（768px以下） */
@media (max-width: 768px) {
    /* ヒーロー画像 */
    .hero-image {
        height: 250px; /* 高さを小さく */
    }
    
    /* コンテンツラッパー */
    .wrap {
        padding-left: 15px; /* 左余白を小さく */
        padding-right: 15px; /* 右余白を小さく */
    }
    
    /* アクセスページメイン */
    .access-page {
        padding: 0; /* 上下の余白をなくす */
    }
    
    /* ページタイトル */
    .access-title-section {
        margin-bottom: 40px; /* 下余白を小さく */
    }
    
    /* ページロゴ */
    .page-logo {
        max-width: 200px; /* 最大幅を小さく */
        margin-left: 10px; /* 左余白を調整 */
    }
    
    /* 情報ヘッダー */
    .info-header {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 左揃え */
        gap: 15px; /* 要素間に15pxの余白 */
    }
    
    /* Google mapボタン */
    .map-button {
        margin-left: 0px; /* 左に20pxの余白 */
    }
    
    /* 情報コンテンツ */
    .info-content {
        padding-left: 10px; /* 左余白を小さく */
    }
    
    /* 連絡先情報 */
    .contact-info {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 左揃え */
    }
}

/* スマートフォン（480px以下） */
@media (max-width: 480px) {
    /* ヒーロー画像 */
    .hero-image {
        height: 200px; /* 高さをさらに小さく */
    }
    
    /* 情報タイトル */
    .info-title {
        padding-left: 10px; /* 左余白を小さく */
        border-left-width: 3px; /* 左線を細く */
    }
    
    /* ページロゴ */
    .page-logo {
        max-width: 180px; /* 最大幅をさらに小さく */
        margin-left: 10px; /* 左余白を調整 */
    }
}

/* Google Maps アイコン */
.map-icon{
  width: 24px;         /* アイコンサイズ（調整可） */
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;   /* テキストとの間隔 */
}

/* ===== Google Map ===== */
.map-section{
  margin: clamp(24px, 5vw, 48px) 0;
}

.map-section .info-title{
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  margin: 0 0 12px;
}

.gmap-wrap{
  width: 100%;
  aspect-ratio: 16 / 9;          /* モダンブラウザ */
  background: #f2f2f2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* aspect-ratio 非対応ブラウザ用フォールバック */
@supports not (aspect-ratio: 16 / 9){
  .gmap-wrap{ position: relative; padding-top: 56.25%; }
  .gmap-wrap iframe{ position: absolute; inset: 0; height: 100%; }
}

.gmap-wrap iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-cta{
  margin-top: 10px;
  text-align: right;
}

.map-button{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0033cc;         /* ご指定色 */
  color: #fff;
  transition: filter .2s ease;
}
.map-button:hover{ filter: brightness(1.05); }