@charset "UTF-8";

/*PC SP画像表示
---------------------------------------------------------------------------*/

img {
max-width: 100%;
height: auto;
vertical-align: middle;
}


.sp-img {
  display: block;
}

.pc-img {
  display: none;
}




/*PC --*/
@media (min-width: 767px) {
	.modalImg{
		display: block;
		width:80%;

		position: absolute;
		left: 50%;
		top:50%;

		transform: translate(-50%,-50%)

	}

.sp-img {
    display: none;
  }

  .pc-img {
    display: block;
  }



}

.view_sp {
	display: none;
}
@media (max-width: 766px) {
	.view_sp {
		display: block;
	}
}


/*
---------------------------------------------------------------------------*/


.LP_header_container {
    display: flex;
    margin: 0 auto; position: relative;
}

.header_images {
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; 
    height: 650px; /* 親要素の高さを指定（高さを指定しないと中央揃えになりません） */
    width: 420px;
    margin:50px 0 0 10px;
}


.header_h1 {
    display: flex;
    justify-content: center; 
    margin-left:20px;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .header_images {
        align-items: center; /* 縦方向の中央揃え */
        justify-content: center; 
        height: 100%;
        width: 80%;
        margin:0 auto;
        margin-top: 50px;
    }

}




.header_btn {
    display: flex;
    justify-content: center; 
    margin-top:20px;
}


/* リストの基本スタイル（マークや余白をリセット） */
.nav-list {
    display: flex;
    margin: 0 auto; position: relative;
    width:1200px;
    list-style: none;
    padding: 0;
    display: flex; 
    justify-content: right; 
}

/* メニュー項目（li）の間隔を調整 */
.nav-item {
  margin: 10px 25px; /* 左右の余白 */
}

/* リンク（aタグ）の装飾 */
.nav-item a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  padding: 10px 0;
  display: block;
}

/* ホバー時のアクション */
.nav-item a:hover {
  color: #007bff;
}


/* 初期状態：PCではハンバーガーボタンを非表示にする */
.hamburger-btn {
    display: none;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {
    /* --- ハンバーガーボタンの配置とデザイン --- */
    .hamburger-btn {
        display: block;
        position: fixed;   /* 画面の右上に固定 */
        top: 20px;
        right: 15px;
        width: 30px;
        height: 24px;
        z-index: 9999;     /* 一番手前に表示 */
        cursor: pointer;
    }
    
    /* 三本線の共通スタイル */
    .hamburger-btn span {
        display: block;
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #000; /* 三本線の色（背景に応じて #fff などに変更してください） */
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }
    
    /* 三本線のそれぞれの位置 */
    .hamburger-btn span:nth-child(1) { top: 0; }
    .hamburger-btn span:nth-child(2) { top: 10px; }
    .hamburger-btn span:nth-child(3) { top: 20px; }

    /* ボタンがクリックされたとき（activeクラス）の×アニメーション */
    .hamburger-btn.active span:nth-child(1) {
        transform: translateY(10px) rotate(-45deg);
    }
    .hamburger-btn.active span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    .hamburger-btn.active span:nth-child(3) {
        transform: translateY(-10px) rotate(45deg);
    }

    /* --- ナビゲーションメニューのスタイル --- */
    .global-nav {
            position: fixed;
            top: 0;
            right: 0;                /* 左（left）から右（right）基準に変更 */
            width: 50%;              /* 幅を100%から50%に変更 */
            height: 100vh;           /* 高さは画面いっぱいに維持 */
            background-color: rgba(0, 0, 0, 0.75); /* 背景色 */
            z-index: 9998;           /* ボタンのすぐ後ろ */
            
            /* 【アニメーション：右側からスライドインさせる設定】 */
            transform: translateX(100%); /* 初期状態は画面の右外側に隠す */
            visibility: hidden;
            transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
            
            /* メニュー内の中央配置 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

    /* メニューが開いたとき（activeクラスがついたとき） */
    .global-nav.active {
        transform: translateX(0); /* 隠れていたメニューを元の位置に戻す */
        visibility: visible;
    }

    /* メニューのリスト（縦並び・中央揃え） */
    .nav-list {
        flex-direction: column;  /* 縦並びに変更 */
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0;
    }

    .nav-item {
        margin: 20px 0;          /* 押しやすいように上下の間隔を広げる */
        width: 100%;
        text-align: center;
    }

    .nav-item a {
        font-size: 1.2rem;       /* スマホのフル画面で見やすいように少し大きめ */
        color: #fff;             /* 背景が黒なので文字は白に */
        font-weight: bold;
        display: block;
        padding: 10px 0;
    }
}




/*コンテンツ
---------------------------------------------------------------------------*/

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}


#main .green {
    background-color:#beffef;
    padding-bottom:40px;
}

#main .green_top {
    margin-top:-60px;
}

.gray_bg {
    background-color:#e4e4e4;
    padding-bottom:40px;
}


.CTA {
    display: flex;
    justify-content: center;
    align-items: center;
    margin:60px auto;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .CTA {
        margin:1em auto;
    }

}



/*カルーセル コース
---------------------------------------------------------------------------*/

#course_slider {
    width:100%;
    overflow: hidden;
}

ul.swiper-wrapper {
    border: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.swiper-wrapper li.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.swiper-wrapper {
    border: none;
    list-style: none;
    margin: 0;
    padding: 0;
}


ul.swiper-wrapper li.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    position: relative;
    z-index: 1;
}
ul.swiper-wrapper li.swiper-slide:nth-child(4) {
    border: none;
}
ul.swiper-wrapper li.swiper-slide.swiper-slide-thumb-active {
    color: #FFF;
}
.tab-content {
    opacity: 1;
}

.swiper-container {
    padding-bottom: 0px;
}
.swiper-slide:first-child.swiper-slide-thumb-active ~ .Tabs__presentation-slider {
  transform: translateX(0) scaleX(0.20);
}
.swiper-slide:nth-child(2).swiper-slide-thumb-active ~ .Tabs__presentation-slider {
  transform: translateX(20%) scaleX(0.20);
}
.swiper-slide:nth-child(3).swiper-slide-thumb-active ~ .Tabs__presentation-slider {
  transform: translateX(calc(20% * 2)) scaleX(0.20);
}
.swiper-slide:nth-child(4).swiper-slide-thumb-active ~ .Tabs__presentation-slider {
  transform: translateX(calc(20% * 3)) scaleX(0.20);
}

.swiper-slide:nth-child(5).swiper-slide-thumb-active ~ .Tabs__presentation-slider {
  transform: translateX(calc(20% * 4)) scaleX(0.20);
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.swiper-container_course {
    margin-top: -30px;
}


.swiper-container_plan {
    height:200px;
    margin-top: -30px;
}


}



.Tabs__presentation-slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform-origin: 0 0;
  transition: transform 0.25s;
}

.Tabs__presentation-slider img {
     opacity: 0.5;
}

.swiper-slide {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

/* カード */
article.card {
    width: 100%;
    background-color: #fff;
}
article.card a {
    display: flex;
    flex-direction: column;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    padding-bottom: 0;
    text-decoration: none;
}
article.card a:hover {
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
    transform: translateY(-4px);
}
article.card img {
    margin-bottom: 10px;
}
article.card time, article.card p {
    padding: 0 20px;
    color: #313131;
}
article.card time {
    font-size: 0.9rem;
    color: #aaa;
    font-weight: 600;
}
p.cardTitle {
    font-size: 1.3rem;
    margin: 0;
    font-weight: 600;
}

.course_contents {
    padding:10px 15px;
    background-color: #fff;
    width:100%;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.course_contents {
    padding:10px 0px;
}


}

p.course_sub {
    font-size: 1.3rem;
    line-height: 2.2rem;
    margin: 10px 0;
}


/*SP調整 -----------------------*/
@media (max-width: 766px) {

    p.course_sub {
        font-size: 1.0rem;
        line-height: 1.7rem;
        margin: 1em 0;
    }
}



.course_imgs {
    display: flex;
    justify-content: center; 
}

.course_imgs img {
    text-align:center;
    margin:0 auto;
    width: 33%;
}

.course_detail {
    padding :0 15px;
}


p.course_sub02 {
    font-size: 1.3rem;
    line-height: 2.2rem;
    margin: 15px 0;
    text-align: left;
}

@media (max-width: 766px) {

.course_detail {
    padding :0;
}


p.course_sub02 {
    font-size: 1.0rem;
    line-height: 1.7rem;
    margin: 5px 0;
}

}

.course_food {
    display: flex;
  justify-content: center; 
  margin: 0 auto;
  padding: 0;
}

.course_food_img {
    width: 70%; /* 上の.course_imgs imgと同じ横幅 */
}

.course_food_img img {
    width: 100%;
    max-width: 100% !important;  /* スマホ用の縮小指定(140px)を無効化 */
    max-height: none !important; /* スマホ用の高さ制限を無効化 */
    height: auto;
}

@media (max-width: 766px) {
  .course_food {
    flex-direction: column; /* 横並びから縦並びに変更 */
    align-items: center;    /* 中央揃えに */
  }

  .course_food_img {
    width: 100%;            /* 横幅をいっぱいにする */
    margin-bottom: 15px;    /* 下のタイトル画像との間に隙間を作る */
    text-align: center;
  }

  /* 「ml_15（margin-left: 15px）」がついている要素の調整 */
  .course_food .ml_15 {
    margin-left: 0;         /* 縦並びになるため、左側の余白をリセット */
    width: 100%;
    display: flex;
    flex-direction: column; /* 中のタイトル画像とテキストも縦並びに */
    align-items: center;    /* 中央揃えに */
    text-align: center;
  }

  .course_food .ml_15 img {
    margin-bottom: 10px;    /* タイトル画像と下の説明文の間に隙間を作る */
  }
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.img_shurink {
    max-width: 140px;
    max-height: 103px;
}

}


.course_info {
    padding :50px 10px 0 10px;
    background-color: #f0e4c9;
    border-radius: 20px;
}

.course_info img {

    margin:0 auto;    
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.course_info {
    padding :30px 0;

}


}


/* =========================================================================
   GUAM_LP_course_47 インフォメーションモジュール（縦並び完全再現）
========================================================================= */

/* コンテナ全体：画像の丸みのある角と背景色、文字の基本色を定義 */
.course_info_container {
    margin: 30px auto;
    padding: 60px 0px;
    background-color: #f0e4c9; /* 画像の背景色に調整 */
    border-radius: 30px;       /* 画像に合わせた大きな角丸 */
    box-sizing: border-box;
    color: #87703a;            /* 画像全体のベースとなるブラウン系の文字色 */
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
}

/* メイン見出し：INFORMATION */
.info_main_ttl {
    margin-bottom: 40px;
}
.info_main_ttl img {
    max-width: 380px; /* 画像の存在感に合わせたサイズ */
    height: auto;
}

/* 上部：コース基本仕様のレイアウトブロック */
.info_spec_block {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.info_spec_block {
    margin-bottom: 20px;
}


}

/* 均等に並べるためのテーブルスタイル（線なし） */
.info_spec_table {
    border-collapse: collapse;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2.2rem;
}

.info_spec_table th {
    text-align: right;
    padding: 2px 0;
    font-weight: bold;
    color: #87703a;
    vertical-align: top;
    white-space: nowrap;
}
.info_spec_table td {
    text-align: left;
    padding: 2px 0 2px 10px;
    font-weight: bold;
    color: #87703a;
}

/* ★★★★☆ の星の色（画像準拠の渋みのあるゴールド） */
.star_color {
    color: #87703a;
}

/* 各情報の縦並びセクション（料金・レンタル・アクセス共通） */
.info_row_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 45px;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .info_row_section {
        margin-bottom: 20px;
    }


}

.info_row_section:last-child {
    margin-bottom: 0; /* 最後のブロックの下余白をクリア */
}


.info_section_badge img {
    max-width: 220px; /* 料金・レンタル・アクセスの画像幅 */
    height: auto;
}

/* 各セクションの本文コンテナ */
.info_section_body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 料金データ用のインラインテーブル */
.info_data_table {
    border-collapse: collapse;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.6rem;
}
.info_data_table th {
    text-align: right;
    color: #87703a;
    font-weight: bold;
    padding: 3px 0;
    vertical-align: top;
    white-space: nowrap;
}
.info_data_table td {
    text-align: left;
    color: #87703a;
    font-weight: bold;
    padding: 3px 0 2px 5px;
}

/* ※9ホール料金あり */
.info_bullet_note {
    font-size: 1.2rem;
    font-weight: bold;
    color: #87703a;
    margin: 10px 0; /* 画像の配置に合わせてやや左に寄せる */
}

/* 中央配置のプレーンテキスト（レンタル、アクセスで使用） */
.info_center_text {
    font-size: 1.4em;
    font-weight: bold;
    color: #87703a;
    margin: 4px 0;
    line-height: 1.6rem;
    text-align: center;
}



/* =========================================================================
   スマホ表示（766px以下）の表示最適化
========================================================================= */
@media (max-width: 766px) {
    .course_info_container {
        margin: 20px 0px;
        padding: 30px 1em;
        border-radius: 20px;
    }

    .info_main_ttl {
        margin-bottom: 25px;
    }
    .info_main_ttl img {
        max-width: 260px;
    }

    .info_spec_table {
        font-size: 1.0rem;
        line-height: 1.4rem;
    }
    .info_spec_table th {
        font-size: 1.0rem;

    }

    .info_section_badge {
        padding: 8px 0%;
        margin-bottom: 0px;
    }
    .info_section_badge img {
        max-width: 200px;
    }

    .info_data_table {
        font-size: 1.0rem;
        line-height: 1.4rem;
        width: 100%;
    }
    .info_data_table th,
    .info_data_table td {
        display: block; /* スマホではテーブルを縦積みにしてはみ出しを防ぐ */
        text-align: center;
        padding: 2px 0;
    }
    .info_data_table td {
        margin-bottom: 8px;
    }

    .info_bullet_note {
        font-size: 0.95rem;
        margin: 5px 0 0 0;
        text-align: center;
    }

    .info_center_text {
        font-size: 1.0rem;
        line-height: 1.5;
    }

.info_section_course_btn {
    margin:30px 0 10px 0;
}


}

/*カルーセル/プラン/アフター
---------------------------------------------------------------------------*/

/* 1. 通常時（選択されていないタブ）の画像 */
.tab-menu .swiper-slide img {
  opacity: 0.4; /* 好みに合わせて数値を変更してください（0.4 = 透過40%） */
  transition: opacity 0.3s ease; /* 変化をふわっと滑らかにする */
  cursor: pointer; /* マウスホバー時にポインターにしてクリックできることを伝える */
}

/* 2. マウスホバー時（選択されていないが、マウスが乗ったとき） */
.tab-menu .swiper-slide:hover img {
  opacity: 0.7; /* ホバーした時に少し明るくする */
}

/* 3. 選択されている（アクティブな）タブ */
.tab-menu .swiper-slide-thumb-active img {
  opacity: 1; /* 透過を解除して100%はっきり見せる */
}



#plan_slider {
    width:100%;
    overflow: hidden;
}

#after_slider {
    width:100%;
    overflow: hidden;
}





/*特典CSS
---------------------------------------------------------------------------*/
/* バナー全体のコンテナ */
        .benefit-banner {
            position: relative;
            background-color: #ff6b7d; /* サーモンピンクの背景色 */
            border-radius: 24px;       /* 角丸 */
            width: 100%;
            box-sizing: border-box;
            padding: 50px 10px;
            text-align: center;
            color: #ffffff;
            margin-top: 30px;          /* 「特典」ラベルが飛び出すための余白 */
        }

        /* 「特典」ラベル */
        .banner-badge {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #ffffff;
            color: #ff6b7d;
            font-size: 3.0rem;
            font-weight: 900;
            padding: 10px 35px;
            border-radius: 12px;
            letter-spacing: 0.1em;
            white-space: nowrap;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        /* 18ホール（1ラウンド）プレーのお客様に */
        .banner-lead {
            display: inline-block;
            background-color: #e60012; /* 濃い赤の背景 */
            color: #ffffff;
            font-size: 1.8rem;
            font-weight: bold;
            padding: 10px 15px;
            margin: 25px auto;
            letter-spacing: 0.05em;
        }

        /* 黄色い大文字エリアを囲むカギカッコのコンテナ */
        .content-bracket-box {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 1000px;
            padding: 0 35px;
            box-sizing: border-box;
            margin: 25px auto;
        }


        /* ドライビングレンジ練習ボール... */
        .main-target {
            color: #fff100; /* 黄色 */
            font-size: 1.8rem;
            font-weight: bold;
            margin: 0 0 10px 0;
            letter-spacing: 0.02em;
            line-height: 1.4;
        }

        /* 無料贈呈 */
        .main-action {
            color: #fff100; /* 黄色 */
            font-size: 64px;
            font-weight: 900;
            margin: 0;
            line-height: 3.0rem;
        }

        /* 注意書きエリア */
        .banner-notes {
            font-size: 1.2rem;
            font-weight: bold;
            line-height: 2.0rem;
            color: #ffffff;

        }

        /* 画面が狭いときのレスポンシブ調整 */
        @media (max-width: 766px) {
            .benefit-banner {
                padding: 15px 10px;
            }
            .banner-badge {
                font-size: 24px;
                top: -20px;
            }
            .banner-lead {
                font-size: 18px;
							line-height: 1.2;
							margin-bottom: 0;
            }
            .content-bracket-box {
                padding: 0 20px;
            }
            .content-bracket-box::before,
            .content-bracket-box::after {
                width: 12px;
                border-width: 3px;
            }
            .main-target {
                font-size: 18px;
            }
            .main-action {
                font-size: 40px;
            }
            .banner-notes {
                font-size: 1.0rem;
                line-height: 1.6rem;
            }
        }


/*section
---------------------------------------------------------------------------*/

    #main {
        max-width: 100%;
        height:700px;
        background-repeat: no-repeat;
        background-position: top center;   /* 必要に応じて位置を調整 */
        background: url("../img/mainimg.png") center no-repeat;
    }

/*SP調整 -----------------------*/
@media (max-width: 766px) {
	#main {
			max-width: 100%;
			height:650px;
			background-repeat: no-repeat;
			background-position: top center;   /* 必要に応じて位置を調整 */
			background: url("../img/mainimg_sp.png") center no-repeat;
		background-size: cover;
	}
}
@media (max-width: 390px) {
	#main {
		height: 600px;
	}
}
@media (max-width: 375px) {
	#main {
		height: 550px;
	}
}

.ttl_sub {
    font-size:1.3rem;
    line-height:2.2rem;
    width: 100%;
    margin-top:20px;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.ttl_sub {
    font-size:1.0rem;
    line-height:1.7rem;
    width: 100%;
	margin-top: 1em;
		padding: 0;
}

}


#guam01 {
    max-width: 100%;
   /*  background-color:#ecdebd; */
    padding:0 5px;
}


.guam01_ttl {
    padding-top:1.5em;
    /*background: url("../img/course_ttl_bg.png") center no-repeat;*/
    justify-content: flex-start;
}

.guam01_ttl,guam02_ttl img {
    text-align:left;
    display: flex;
    justify-content: flex-start;
}

.guam_sub_ttl img {
    text-align:left;
    display: flex;
    justify-content: flex-start;
    margin-bottom:15px;
}


/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .guam_sub_ttl img {
        max-width:86%;
    }

}



#guam02 {
    max-width: 100%;
    background-color:#fff;
    padding:0 5px;
}


/*SP調整 -----------------------*/
@media (max-width: 766px) {

    #guam02 {
        margin-bottom: 3em;
    }

}



.guam02_ttl {
    padding:20px;
    justify-content: flex-start;
}

#guam03 {
    max-width: 100%;
    background-color:#fff;
    padding:0 5px;
}

.guam03_ttl {
    margin-top: -16px;
    padding-top:20px;
    /*background: url("../img/plan_ttl_bg.png") center no-repeat;*/
    justify-content: flex-start;
}

.plan_red {
    font-size: 1.0rem;
    line-height: 1.4rem;
    color:#ff0000;
    margin:5px 0;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

        .plan_red {
        font-size: 1.0rem;
        line-height: 1.6rem;
        color:#ff0000;
        margin: 1em 0;
    }


}



/* PLANのタイムライン */
/* タイムライン全体のコンテナ */
.timeline-container {
  max-width: 1100px;
  margin: 20px 0 0 0;
}
@media (max-width: 766px) {
	.timeline-container {
		margin: 1em 0 0;
	}
}

/* 各日程のセクション */
.day-section {
  margin-bottom: 10px;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.day-section {
  margin-bottom: 0px;
}


}


/* DAY.01 / DAY.02 のタイポグラフィ */
.day-title {
  margin: 0 0 15px 0;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .day-title {
    margin: 0 0 5px 0;
    }

    .day-title img {
    max-width: 180px;
    }


}

/* 縦線とコンテンツを包むブロック */
.timeline-block {
  display: flex;
  position: relative;
  margin-bottom: 15px;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.timeline-block {
  margin-bottom: 0px;
}


}


/* 左側の縦線エリア */
.timeline-line-wrapper {
  width: 40px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  justify-content: center;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.timeline-line-wrapper {
  width: 15px;
  padding-bottom: 20px;
  margin-left: -4px;
}


}


/* タイムラインの黒い実線 */
.timeline-line {
  width: 3px;
  background-color: #000000;
  height: 100%;
  position: relative;
}

/* 最後の縦線の先端を矢印にする */
.timeline-line.has-arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #000000;
}


/*SP調整 -----------------------*/
@media (max-width: 766px) {

.timeline-line.has-arrow::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #000000;
}


}



/* コンテンツが集まる右側グループ */
.timeline-content-group {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px; /* アイテム同士の間隔 */
  padding-bottom: 40px; /* 矢印の先端と被らないための余白 */
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.timeline-content-group {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 5px; /* アイテム同士の間隔 */
  padding-bottom: 10px; /* 矢印の先端と被らないための余白 */
	padding-left: 0.5em;
}


}


/* 各スケジュールアイテム（画像とテキストの横並び） */
.schedule-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}



/* 画像エリア */
.item-image {
  width: 316px;
  height: 238px;
  flex-shrink: 0;
  background-color: #f0f0f0; /* 画像がない場合のプレースホルダー色 */
  overflow: hidden;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストエリア */
.item-text {
  flex-grow: 1;
}

/* 曜日バッジのベース */
.badge {
  display: inline-block;
  padding: 7px 0;
    width: 200px;
    text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  border: 3px solid #000000;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.badge {
  display: inline-block;
  padding: 6px 0;
    width: 140px;
    text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  border: 3px solid #000000;
  margin-bottom: 10px;
}


}


/* 金曜日夜（白背景） */
.badge-white {
  background-color: #ffffff;
  color: #000000;
}

/* 土曜日（薄い青背景） */
.badge-blue {
  background-color: #c9ebf7;
  color: #000000;
}

/* 日曜日（薄い赤背景） */
.badge-red {
  background-color: #ffafb1;
  color: #000000;
}


/* スケジュール見出し */
.item-title {
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.item-title {
  margin: 0 0 10px 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}


}

/* スケジュール説明文 */
.item-description {
  margin: 0;
  font-size: 1.3rem;
  line-height: 2.2rem;
  color: #000000;
  text-align: justify;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .item-description {
    font-size: 1.0rem;
    line-height: 1.7rem;

    }


}

/* レスポンシブ対応：画面幅が狭い時は縦並びにする */
@media (max-width: 766px) {
  .schedule-item {
    flex-direction: column;
    gap: 5px;
    margin-top: -10px;
    margin-bottom: 15px;
  }

  .item-image {
    width: 100%;
    height: 200px;
  }
}





#guam04 {
    max-width: 100%;
    background-color:#2f3031;
	padding: 50px 0;
}
@media (max-width: 766px) {
	#guam04 {
		padding: 20px 5px 20px;
	}
	#guam04 .CTA {
		padding: 0 1em;
	}
}


.after_line {
    border-left: solid 3px #000;/*左線*/
}

.guam04_bg {
    background-color:#2f3031;
}

.guam04_ttl {
    /*margin-top: px;*/
    /*background: url("../img/plan_ttl_bg.png") center no-repeat;*/
    justify-content: flex-start;
}

.after_contents {
    width:100%;
}

.after_contents img {
    margin:0 auto;
}


.after_sub_wt {
    font-size:1.3rem;
    line-height:2.2rem;
    width: 100%;
    color:#fff;
}


.after_bar_sub {
    font-size:1.3rem;
    line-height:2.2rem;
    width: 800px;
    max-width:100%;
    margin:0 auto;
    text-align: left;
}



/* コンテナ全体のスタイリング */
.info-container {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  margin: 20px auto;
  padding:0 5px;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.info-container {
  margin: 10px auto;
  padding:0 1em;
}



}


/* 各セクションの縦並び配置 */
.info-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.0rem; /* ラベルとテキストの間の余白 */
}

.info-ttl {
    margin:0 auto;
    text-align:center;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.info-ttl {
    margin:10px auto;
    max-width: 250px;
}



}

/* 金色のラベル部分 */
.info-label {
    width:160px;
  margin: 0;
  background-color: #d9b264; /* 画像の背景色に近いゴールド */
  color: #000000;
  font-size: 1.6rem; /* ご指定のサイズ */
  font-weight: bold;
  padding: 0.7rem ; /* ラベルの内側の余白 */
  letter-spacing: 0.1em;
  text-align:center;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.info-label {
  width:120px;
  font-size: 1.1rem; /* ご指定のサイズ */
  font-weight: bold;
  padding: 0.4rem ; /* ラベルの内側の余白 */
  letter-spacing: 0.1em;
}


}


/* テキストコンテンツ部分 */
.info-content {
  margin: 0;
  text-align: left;
  color: #d9b264; /* 画像の文字色に近いゴールド */
  font-size: 1.3rem; /* ご指定のサイズ */
  line-height: 2.2rem; /* ご指定の行間 */
}


/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .after_sub_wt {
        font-size:1.0rem;
        line-height:1.7rem;
			margin: 1em 0;
    }

    .after_bar_sub {
        font-size:1.0rem;
        line-height:1.7rem;
        text-align: left;
        padding:0 1em;
        margin-top:1em;
    }

    /* テキストコンテンツ部分 */
    .info-content {
    font-size: 1.0rem; /* ご指定のサイズ */
    line-height: 1.4rem; /* ご指定の行間 */
    }

}



#guam05 {
    max-width: 100%;
    background-color:#fff;
    padding:20px 5px;
}


.map_red {
    font-size: 1.0rem;
    line-height: 1.4rem;
    color:#ff0000;
    margin:-80px 0 0 0;
    text-align: left;
}

#guam06 {
    max-width: 100%;
    height:300px;
    background-repeat: no-repeat;
    background-position: top center;   /* 必要に応じて位置を調整 */
    background: url("../img/access_bg.png") center no-repeat;
    padding:0 5px;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {
#guam06 {
    max-width: 100%;
    height:150px;
    background-repeat: no-repeat;
    background-position: top center;   /* 必要に応じて位置を調整 */
    background: url("../img/access_bg.png") center no-repeat;
    padding:0 5px;
}
}


#guam07 {
    padding:0 5px;
}
#guam07 .block {
	padding: 0 0 2em;
}
.btn-baggage {
	text-align: center;
}
.btn-baggage a {
	display: inline-block;
	border: 1px solid #000;
	border-radius: 100vh;
	color: #000;
	text-decoration: none;
	margin: 1em 0 0;
	padding: 1em 3em;
	position: relative;
}
.btn-baggage a::after {
	position: absolute;
	top: 50%;
	right: 1.2em;
	display: inline-block;
	content: "";
	width: 0.6em;
	height: 0.6em;
	border: 0.1em solid #000;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 766px) {
	#guam07 .wrap {
		display: block;
	}
	#guam07 .wrap .center:nth-child(1) {
		padding-left: 1em;
	}
	#guam07 .wrap .center:nth-child(2) {
		margin: 2em 0 0;
		padding-right: 1em;
	}
	#guam07 .wrap .center:nth-child(1) .btn-baggage {
		padding-right: 1em;
	}
	#guam07 .wrap .center:nth-child(2) .btn-baggage {
		padding-left: 1em;
	}
	#guam07 .wrap .btn-baggage a {
		display: block;
		padding: 1em 2em;
	}
}


.acces_h2 {
    margin:30px 0;
    font-size:2.0rem;
    font-weight: 600;
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    color: #000;/*文字色*/
    background: transparent;/*背景透明に*/
    border-left: solid 5px #000;/*左線*/
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.acces_h2 {
    margin: 1.5em 0 15px;
    font-size:1.3rem;
}


}


.acces_h3 {
    font-size:1.6rem;
    font-weight: 600;
    margin:20px 0;
}

.acces_mini_ttl {
    color:#ae7800;
    background-color :#f0e4c9;
    padding: 20px;
    width:100%;
    margin: 0 0 20px;
    font-weight: 600;
    font-size:1.6rem;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.acces_mini_ttl {
    font-size:1rem;
}



}

.acces_mini_sub {
    color:#000;
    width:100%;
    margin:0 0 1em;
    font-size:1.3rem;
    line-height: 2.2rem;
}

.acces_mini_sub_ttl {
    color:#000;
    width:100%;
    margin:0 0 0.2em;
    font-size:1.4rem;
    line-height: 2.2rem;
}
.wrap + .acces_mini_sub_ttl {
	margin-top: 2em;
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .acces_mini_ttl {
        padding: 15px;
        margin:5px 0 1em;
    }

    .acces_h3 {
        font-size:1.2rem;
    }

    .acces_mini_sub {
        font-size:1.0rem;
        line-height: 1.7rem;
        margin:0px 0 1em;
    }

.acces_mini_sub_ttl {
    color:#000;
    width:100%;
    margin:0 0 0.2em;
    font-size:1.1rem;
    line-height: 1.4rem;
}

}



#guam08 {
    max-width: 100%;
    /*background-color:#fff100;*/
    padding:0;
}

.check_ttl {
    margin:40px auto;
    text-align: center;

}

.check_ttl img {
    max-width: 700px;

}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.check_ttl {
    margin:20px auto;
}

}

.check_width {
    max-width: 860px;
}


.check_sub {
    margin-top:5px;
    font-size:1.3rem;
}

.check_img {
    padding: 10px;
}


/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .check_sub {
        margin-top:5px;
        font-size:0.8rem;
    }

.check_img {
    padding: 0px;
}

}




.check_img img {
    width:60%;
}

#guam09 {
    max-width: 100%;
    background-color:#fff;
    padding:0 10px;
}


/*youtube
---------------------------------------------------------------------------*/
.video-container {
	position: relative;
	padding-top: 56.25%; /* 16:9 アスペクト比 */
	height: 0;
    margin:0 auto;
    overflow: hidden;

    display: flex;
      justify-content: center;
      align-items: center;
}

.video-container iframe {
	position: absolute;
	top: -60px;
	left: 0;
	width: 100%;
	height: 100%;
    
}

/*SP調整 -----------------------*/
@media (max-width: 766px) {

.video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 アスペクト比 (9 ÷ 16 = 0.5625) */
    height: 0;
    margin: 0 auto;
    overflow: hidden;
    width: 100%; /* 横幅いっぱいに広げる */
}

.video-container iframe {
    position: absolute;
    top: 0;      /* -65px から 0 に変更 */
    left: 0;
    width: 100%;
    height: 100%;
}

}


/*map
---------------------------------------------------------------------------*/
.map-container {
	position: relative;
	padding-top: 76%; /* 16:9 アスペクト比 */
	height: 0;
    margin:0 auto;
    overflow: hidden;
    display: flex;
      justify-content: center;
      align-items: center;
}

.map-container iframe {
	position: absolute;
	top: -68px;
	left: 0;
	width: 100%;
	height: 100%;
    
}


/*SP調整 -----------------------*/
@media (max-width: 766px) {

    .map-container {
	position: relative;
	padding-top: 100%; /* 16:9 アスペクト比 */

    }

    .map-container iframe {
        position: absolute;
        top: -68px;
        left: 0;
       
    }

}


section .box00 {
    width: 790px;
    margin: 0 auto;
    padding:40px 0 20px;
    max-width: 100%;
}

section .box00 .h2_text {
    color: #31805c;
    font-size: 34px;
    text-align: center;
    margin: 20px;
    line-height: 3.2rem;
    font-weight: 900;
}

section .box00 .reason_text {
    color: #31805c;
    font-size: 28px;
    margin: 30px 50px;
    line-height: 2.5rem;
    font-weight: 700;
}


.section_inner {margin :30px 0;}

.section_sb {
    border: 2px solid #000;
    border-radius: 10px;
    font-size: 22px;
    font-weight: 500;
    line-height: 34px;
    text-align: left;
    padding: 10px 15px;
}


.img_box {
    display:flex;
    flex-flow:column; align-items:center;
    margin:0 auto;
    margin-bottom:30px;
}

.img_cap {
    color:#000;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    padding: 4px;

}

.line_yellow {background: linear-gradient(transparent 50%, #fcee21 0%);}

.hr_green {
    height: 20px;
    width: 160px;
    background-image: repeating-linear-gradient(-45deg, #31805c 0, #31805c 4px, transparent 0, transparent 50%);
	background-size: 24px 24px;
	border: none;
    margin: 0 auto;
}


.point_text {
    font-size: 22px;
    font-weight: 500;
    line-height: 34px;
    text-align: left;
    padding: 10px 15px;
}


.btn_m {margin:20px auto;}



/*調整
---------------------------------------------------------------------------*/
.center {
    margin: 0 auto;    
    text-align:center;
}


    .left {text-align:left;}

.font_b {font-weight: 600;}

.bg_white {
    background-color: #fff;    
}

.font_yellow{color:#ffff00;}
.font_red{color:#ff0000;}

.font_60 {font-size:60%;}
.font_80 {font-size:80%;}
.font_120 {font-size:120%;}
.font_150 {font-size:150%;}



.mtb_10 {margin:10px auto;}
.mtb_20 {margin:20px auto;}
.mtb_30 {margin:30px auto;}
.mtb_40 {margin:40px auto;}
.mtb_60 {margin:60px auto;}

.mt_10 {margin-top:10px;}
.mt_20 {margin-top:20px;}
.mt_30 {margin-top:30px;}
.mt_40 {margin-top:40px;}
.mt_60 {margin-top:60px;}

.mt_140 {margin-top:140px;}

.mb_20 {margin-bottom:20px;}
.mb_30 {margin-bottom:30px;}
.mb_40 {margin-bottom:40px;}

.ml_15 {margin-left:15px;}

.plr_5 {padding:0 5px;}
.plr_10 {padding:0 10px;}
@media screen and (max-width: 766px) {
	.mt_30 {
		margin-top: 1.5em;
	}
	.mb_20 {
		margin-bottom: 1em;
	}
	.plr_5 {
		padding: 0 0.5em;
	}
}

.full-hr {
  /* 幅を画面いっぱいに指定 */
  width: 100vw;
  
  /* 親要素（bodyなど）の余白を無視して画面端まで広げる */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  
  /* 上下のマージンと太さ（高さ）の設定 */
  height: 10px;
  margin-top: -10px;
  
  /* デフォルトのボーダーを消し、背景色を指定 */
  border: none;
  background-color: #000;
}


.red-hr {
  width: 80%;
  height: 2px;
  border: none;
  background-color: #FF0000;
    margin: 10px auto;
}



/* 通常（PCなど大画面）は改行を非表示にする */
.sp-br {
  display: none;
}

/* スマホサイズ（例: 767px以下）になったら改行を表示する */
@media screen and (max-width: 766px) {
  .sp-br {
    display: inline;
  }
}


/* =========================================================================
   タブメニューのナビゲーションボタン（スマホ限定）
========================================================================= */

/* 初期状態（PC・大画面）は非表示 */
.tab-menu .swiper-button-prev,
.tab-menu .swiper-button-next {
    display: none;
}

/* スマホサイズ（766px以下）のときだけ表示・調整 */
@media (max-width: 766px) {
    /* 矢印を内側に配置するため、親要素に相対位置とハミ出し許可を設定 */
    .tab-menu.swiper-container {
        position: relative;
        overflow: visible !important; /* 矢印が隠れないようにする */
    }


    /* プランの矢印位置調整 */
    .tab-menu .swiper-button-plan {
        top: 65% !important;
 
    }


    .tab-menu .swiper-button-prev,
    .tab-menu .swiper-button-next {
        display: flex; /* スマホ版のみ表示 */
        width: 30px;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.75); /* 押しやすいように半透明の背景を設置 */
        border-radius: 50%;
        color: #fff; /* 矢印の色（デザインに合わせて変更してください） */
        z-index: 10;
        top: 50%;
        transform: translateY(-50%);
    }





    /* 矢印自体の大きさを少し小さく調整 */
    .tab-menu .swiper-button-prev::after,
    .tab-menu .swiper-button-next::after {
        font-size: 16px;
        font-weight: bold;
    }

    /* 左右の配置位置（メニューの端に微調整） */
    .tab-menu .swiper-button-prev {
        left: 5px;
    }
    .tab-menu .swiper-button-next {
        right: 5px;
    }
    
    /* 3つ目のアフターなど、背景が暗い場所で矢印を見えやすくしたい場合の調整 */
    .guam04_bg .swiper-button-prev,
    .guam04_bg .swiper-button-next {
        background-color: rgba(255, 255, 255, 0.75);
        color: #000;
    }
}



/* =========================================================================
   追記：画像ポップアップ（モーダル）のスタイリング
========================================================================= */

/* クリック対象の画像にマウスホバーで変化をつける（クリックできることを伝える） */
.course_imgs img {
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.course_imgs img:hover {
    opacity: 0.8;
}

/* ポップアップ背景のオーバーレイ（初期状態は非表示） */
.modal_overlay {
    display: none; 
    position: fixed;
    z-index: 10000; /* ナビゲーションより手前に表示 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85); /* 黒透過背景 */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* モーダル表示中のアクティブクラス */
.modal_overlay.is_active {
    display: flex;
    opacity: 1;
}

/* 拡大表示される中央の画像 */
.modal_large_image {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

/* 画像表示時のふわっとしたズーム効果 */
.modal_overlay.is_active .modal_large_image {
    transform: scale(1);
}

/* 右上の閉じるボタン（×） */
.modal_close_btn {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}
.modal_close_btn:hover {
    color: #ff6b7d; /* ホバーでブランドカラー寄りの色に */
}

/* スマホ用のレイアウト微調整 */
@media (max-width: 766px) {
    .modal_large_image {
        max-width: 95%;
        max-height: 75vh;
    }
    .modal_close_btn {
        top: 15px;
        right: 20px;
        font-size: 35px;
    }
}