@charset "UTF-8";
/* CSS Document */
/* =========================================================
　メインビジュアル
========================================================= */
.page_title{
	background:url(images/title_bg.jpg),#D1E08C;
	background-repeat: no-repeat,no-repeat;
	background-size: 1000px auto,cover;
	background-position: center center;
	width: 100%;
	height :440px;
	text-align : center;
}
.page_title h2{
	display: none;
}
.main{
	background-color: #fff;
}
.contents-line-y{
	position: relative;
	background:  url(../spring_special/images/contents-line-p.png) repeat-x center top;
	z-index : 10000;
	height : 5px;
	display : block;
	top : -5px;
	width: 100%;
}
.footer-line{
	display : block;
	width: 100%;
	height: 5px;
}
.bg{
	padding: 4.3em 0 5em;	
}
.footer_sitemap::before{
	background-image: url("images/contents-line-p_b.png");
}
.p_red{
	color: #E10500;
}
@media screen and (max-width:736px){
	body{
		font-size: 13px;
	}
	.page_title{
		background-size: 100% auto,cover;
		padding-top: 43%;
		height: auto;
	}
	.site_title a {
		width: 250px;
		height: 60px;
		display: block;
	}
	.footer_address address::before {
		background-image: url("images/contents-line-p_b.png");
		background-size: auto 6px;
		height: 6px;
	}
}

/* 共通パーツ
--------------------------------------------------------- */
/*タイトル*/
.title{
	text-align: center;
	margin: 80px auto 30px;
	width: 100%;
	max-width: 380px;
	line-height: 1.2;
}
.announce h3{
	width: 100%;
	max-width: 550px;
}
h4{
	font-weight: bold;
	font-size: 1.5em;
	text-align: center;
	margin-top:40px;
}
.title{
	max-width: 565px;
	font-size: 2.5em;
	font-weight: bold;
}
.title span{
	font-weight: bold;
	color: #74A64B;
	font-size: .6em;
}
.title img{
	width: 100%;
}
.catch_warp{
	margin: 4em 0;
}
@media screen and (min-width:1001px){
	.sp_br{
		display: none;
	}
}

/*冒頭------------------------------------------------------*/
.about_warp{
	background: url("images/sightseeing_bg.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center bottom;
}
.about_warp div{
	background: url("images/about_bg01.png"),url("images/about_bg02.png");
	background-repeat: no-repeat,no-repeat;
	background-size: 80px,80px;
	background-position: right 10px top,left 10px bottom 10px;
	max-width: 900px;
	margin: 0 auto;
	padding: 4.3em 0 5em;
}
.about_warp p{
	padding: 0 40px;
	text-align: center;
	font-weight: bold;
	line-height: 2.5;
}
/*ページ内リンク*/
.pagelink_hayachine{
	display: flex;
	flex-wrap: wrap;
	margin: 10px auto;
	gap: 5px 5px;
	padding: 0 10px;
	max-width: 900px;
}
.pagelink_hayachine li{
	background-color: #74A64C;
	color: #fff;
	padding: 1em;
	text-align: center;
	width: calc(48% - 20px);
	background-image: url(images/arrow_w_l_bottom.png);
    background-repeat: no-repeat;
    background-size: 15px 8px;
    background-position: right 10px center;
}
.pagelink_hayachine li a{
	color: #fff;
}
@media screen and (min-width:1001px){
	}
@media screen and (max-width:444px){
	.pagelink_hayachine li{
		width: 100%;
	}
}


/*早池峰山について
------------------------------------------------------*/
#about_hayachine{
	padding: 0 10px;
	max-width: 900px;
	margin: 0 auto;
}
#about_hayachine p{
	padding: 10px;
}
#about_hayachine .about_flowering{
	max-width: 658px;
	margin: 0 auto;
}
#about_hayachine .about_flowering h4{
	max-width: 658px;
	margin-top: 50px;
}
#about_hayachine .about_flowering img{
	width: 100%;
}
/*スライド*/
.top_slider{
	position: relative;
	opacity: 0;
	transition: opacity .3s linear;
	z-index: 1;
	margin: 0 auto;
	display: block;
}
.top_slider::before{
	content: "";
	position: absolute;
	background: url("images/hayachine_deco.png");
	background-repeat: no-repeat;
	bottom: -40px;
    right: 1em;
    width: 130px;
    height: 121px;
	z-index: 10;
	background-size: contain;
    pointer-events: none;
}
.top_slider.slick-initialized{
	opacity: 1;
}
.top_slider .slide_text {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	background: rgba(0,0,0,0.5);
	padding: .2em 1em;
	width: 100%;
}
.top_slider .slid_box{
	display: block;
	height: auto;
	position: relative;
}
.top_slider .slid_box img {
	width: 100%;
	height: auto;
	display: block;
}
/*ボタン*/
.top_slider_box .slick-prev:before,
.top_slider_box .slick-next:before {
	content: "";
}
.top_slider_box .slick-prev {
	width: 30px;
	height: 30px;
	background: url("images/slide_prev.png") no-repeat center;
	background-size: contain;
	z-index: 10;
}
.top_slider_box .slick-next {
	width: 30px;
	height: 30px;
	background: url("images/slide_next.png") no-repeat center;
	background-size: contain;
	z-index: 10;
	right: 7px;
}
.slick-dots li button::before {
	font-size:10px;
	content: '●';
}
@media screen and (max-width:444px){
	.top_slider::before{
		display: none;
	}
}

/*主な登山コース&アクセス------------------------------------------------------*/

#course_access{
	padding-top: 50px;
}
#course_access .course_access_box{
	background: #F3F3F3;
	padding: 200px 10px 100px;
	position: relative;
}
#course_access .course_access_box::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px;
	background: url("images/course_bg.jpg") no-repeat center top;
	background-size: cover;
}
.course_box .beginner,.course_box .intermediate,.course_box .advanced{
	margin: 0 auto 7px;
	max-width: 900px;
}
#course_access .course_map{
	max-width: 900px;
	margin: 0 auto 1em;
}
#course_access .course_map img{
	width: 100%;
}
#course_access .course_pick{
	border-top-right-radius: 10px;
	display: inline-block;
	padding: .5em 1em;
	color: #fff;
}
.accordion-004{
	background-color: #fff;
}
.accordion-004 summary {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 1em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}
.accordion-004 summary::-webkit-details-marker {
    display: none;
}
.accordion-004 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .3s;
}
.accordion-004[open] summary::after {
    transform: rotate(225deg);
}
.accordion-004 summary img{
	height: 90px;
}
.accordion-004 summary div{
	line-height : 1.8em;
	display: block;
	padding-left: .8em;
	color: #797979
}
.accordion-004 .course_imglist{
	display: flex;
	justify-content: space-between;
	padding: 0 1em;
	margin: 0;
}
.accordion-004 .course_imglist li{
	display: block;
	width: 49%;
}
.accordion-004 .course_imglist img{
	width: 100%;
}
.accordion-004 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 1em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}
.accordion-004[open] p {
    transform: none;
    opacity: 1;
}
.accordion-004 .point{
	padding: 1em;
	margin: 0 1em;
	border-radius: 10px;
}
.accordion-004 .point ul{
	display: block;
	padding: 0;
}
.accordion-004 .point ul li{
	margin: 0;
	widht: 100%;
}
.accordion-004 .point h5{
	font-weight: bold;
	font-size: 1.2em;
}
.accordion-004 .btn_box_s a {
	max-width: 320px;
	margin: 10px auto 0;
	background-image: url(images/root_icon.png),url(../../common/img/arrow_w_l.png);
	background-size: 20px 20px,12px 20px;
	background-position: left 10px center,right 10px center;
}
/*初心者におすすめコース*/
.beginner .course_pick{
	background-color: #E36AA0;
}
.beginner .accordion-004 {
    border: 5px solid #E36AA0;
}
.beginner .accordion-004 summary::after {
	border-bottom: 3px solid #E36AA0;
    border-right: 3px solid #E36AA0;
	margin-left: auto;
}
.beginner .accordion-004 summary span{
	color: #E36AA0;
	font-size: 1.5em;
	line-height: 2em;
}
.beginner .accordion-004 .btn_box_s a {
	background-color: #E36AA0;
}
.beginner .accordion-004 .point{
	background: rgba(227, 106, 160, 0.15);
}
/*登山慣れした人向け*/
.intermediate .course_pick{
	background-color: #775496;
}
.intermediate .accordion-004 {
    border: 5px solid #775496;
}
.intermediate .accordion-004 summary::after {
	border-bottom: 3px solid #775496;
    border-right: 3px solid #775496;
	margin-left: auto;
}
.intermediate .accordion-004 summary span{
	color: #775496;
	font-size: 1.5em;
	line-height: 2em;
}
.intermediate .accordion-004 .btn_box_s a {
	background-color: #775496;
}
.intermediate .accordion-004 .point{
	background: rgba(119, 84, 150, 0.15);
}
/*登山上級者向け*/
.advanced .course_pick{
	background-color: #00A296;
}
.advanced .accordion-004 {
    border: 5px solid #00A296;
}
.advanced .accordion-004 summary::after {
	border-bottom: 3px solid #00A296;
    border-right: 3px solid #00A296;
	margin-left: auto;
}
.advanced .accordion-004 summary span{
	color: #00A296;
	font-size: 1.5em;
	line-height: 2em;
}
.advanced .accordion-004 .btn_box_s a {
	background-color: #00A296;
}
.advanced .accordion-004 .point{
	background: rgba(0, 162, 150, 0.15);
}

/*アクセス*/
.access_box{
	margin: 0 auto 7px;
	max-width: 900px;
}
.access_box .car_map{
	margin-bottom: 1em;
}
.access_box th,.access_box td{
	padding-top: 1em;
	padding-bottom: 1em;
}
.access_box h4{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.access_box h4::before{
	content: "";
	display: block;
	flex-shrink: 0; /* 縮まないようにする */
	width: 20px;
	height: 20px;
	background: url("images/access_icon.png") no-repeat center;
	background-size: contain;
}
.access_important{
	border: 1px solid #74A64B;
	background-color: #fff;
	padding: 1em;
	margin-top: 1em;
	text-align: left;
}
.access_important .access_important_p{
	font-weight: bold;
	border-bottom: 1px solid #000;
	display: inline-block;
}
.access_important table{
	border: none;
	margin: 0;
}
.access_important table th{
	border: none;
	padding : .5em 0;
	width: 20%;
}
.access_important table td{
	border: none;
	padding : .5em 0;
}
.access_important table span{
	font-weight: bold;
}
.table_box{
	margin: 20px 16px 0;
}
.table_04{
	width: 100%;
	background-color: #fff;
}
.table_04 th{
	font-weight: bold;
	text-align: left;
	width: 46%;
}
.car details{
	background-color: #fff;
}
.car summary{
	background-color: #74A64C;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 1em;
	color: #fff;
	position: relative;
	justify-content: center;
	margin-top: 30px;
}
.car summary::after {
	content: "";
	width: 8px;
 	height: 8px;
	border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
	position: absolute;
	right: 16px;
	transform: rotate(45deg);
}
.car details[open] summary::after {
	transform: rotate(225deg); 
}
.car img{
	width: 100%;
}
.access_box .btn_box_s a {
    max-width: 320px;
    margin: 10px auto;
    background: #74A64C url(../../common/img/arrow_w_l.png);
	background-repeat: no-repeat;
    background-size: 12px 20px;
    background-position: right 10px center;
}
.access_box .access_att{
	color: #E10500;
	text-align: center;
	font-weight: bold;
}
.access_box ul{
	display: flex;
	justify-content: space-between;
}
.access_box ul li{
	display: block;
	width: 49%;
	background-color: #fff;
}
.access_box img{
	width: 100%;
}
.access_parking h4::before{
	background: url(images/access_icon03.png) no-repeat center;
}
.access_parking div{
	margin: 1em;
}
.access_box ul li .access_catch{
	background-color: rgba(116, 166, 75, 0.15);
	border-radius: 10px;
	padding: 1em;
	margin-bottom: 20px;
	text-align: center;
	font-size: .9em;
	font-weight: bold;
}
.access_box h5{
	font-size: 1.2em;
	font-weight: bold;
}
.access_box h5.access_kisei{
	display: flex;
	align-items: center;
	gap: 8px;
}
.access_box h5.access_kisei::before{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url("images/access_icon02.png");
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}
.access_box h5.access_kisei.winter::before{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url("images/access_icon02_w.png");
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}
.access_box div p span{
	font-size: .8em;
}
.taxi details{
	background-color: #fff;
}
.taxi summary{
	background-color: #74A64C;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 1em;
	color: #fff;
	position: relative;
	justify-content: center;
	margin-top: 30px;
}
.taxi summary::after {
	content: "";
	width: 8px;
 	height: 8px;
	border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
	position: absolute;
	right: 16px;
	transform: rotate(45deg);
}
.taxi details[open] summary::after {
	transform: rotate(225deg); 
}
.taxi .sub-text_texi{
	margin: 20px 16px 0;
}
.shuttle-bus details{
	background-color: #fff;
}
.shuttle-bus table{
	margin: 0;
}
.shuttle-bus summary{
	background-color: #B56D72;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 1em;
	color: #fff;
	position: relative;
	justify-content: center;
	margin-top: 30px;
}
.shuttle-bus summary::after {
	content: "";
	width: 8px;
 	height: 8px;
	border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
	position: absolute;
	right: 16px;
	transform: rotate(45deg);
}
.shuttle-bus details[open] summary::after {
	transform: rotate(225deg); 
}
.shuttle-bus p span{
	font-size: .8em;
}
.shuttle-bus .info-text {
	background-color: rgba(181, 109, 114, 0.15);
}
.shuttle-bus .btn_box_s a {
    background: #B56D72 url(../../common/img/arrow_w_l.png) no-repeat;
	background-size: 12px 20px;
    background-position: right 10px center;
}
.direct-bus details{
	background-color: #fff;
}
.direct-bus summary{
	background-color: #6E94A6;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 1em;
	color: #fff;
	position: relative;
	justify-content: center;
	margin-top: 30px;
}
.direct-bus summary::after {
	content: "";
	width: 8px;
 	height: 8px;
	border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
	position: absolute;
	right: 16px;
	transform: rotate(45deg);
}
.direct-bus details[open] summary::after {
	transform: rotate(225deg); 
}
.direct-bus .info-text {
	background-color: rgba(110, 148, 166, 0.15);
}
.direct-bus .btn_box_s a {
    background: #6E94A6 url(../../common/img/arrow_w_l.png) no-repeat;
	background-size: 12px 20px;
    background-position: right 10px center;
}
.local-bus details{
	background-color: #fff;
}
.local-bus summary{
	background-color: #74A64C;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 1em;
	color: #fff;
	position: relative;
	justify-content: center;
	margin-top: 30px;
}
.local-bus summary::after {
	content: "";
	width: 8px;
 	height: 8px;
	border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
	position: absolute;
	right: 16px;
	transform: rotate(45deg);
}
.local-bus details[open] summary::after {
	transform: rotate(225deg); 
}
@media screen and (min-width:768px){
	.local_btnbox{
		display: flex;
		justify-content: center;
		margin: 0 auto;
		column-gap: 10px;
	}
	.local_btnbox section.btn_box_s {
		max-width: 320px;
	}
}
@media screen and (max-width:737px){
	.accordion-004 summary img{
		height: 70px;
	}
	.beginner .accordion-004 summary span{
		font-size: 1.2em;
	}
	.intermediate .accordion-004 summary span{
		font-size: 1.2em;
	}
	.advanced .accordion-004 summary span{
		font-size: 1.2em;
	}

	#course_access .course_access_box::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		background: url(images/course_bg.jpg) no-repeat center top;
		background-size: cover;
	}
	#course_access .course_access_box{
		padding: 100px 10px 100px;
	}
	#course_access .title {
		margin: 0 auto 30px;
	}
}

/*--------------------
アクセス略図
--------------------*/
.method-content {
      padding: 20px 16px;
    }
    .case-title {
      font-size: 1.05em;
      color: #0056b3;
      margin: 0 0 15px 0;
      padding-bottom: 5px;
      border-bottom: 2px solid #e9ecef;
    }
    .info-text {
/*      background-color: #fff3cd;*/
	  background-color: rgba(116, 166, 75, 0.15);
      color: #856404;
      padding: 10px;
      border-radius: 4px;
      font-size: 0.9em;
      margin-bottom: 15px;
      font-weight: bold;
      text-align: center;
    }

    /* 縦型タイムライン（経路）のデザイン */
    .access_box ul.route-timeline {
      list-style: none;
      padding: 0;
      margin: 0;
      flex-direction: column;
      margin-bottom: 1rem;
    }
    .access_box ul.route-timeline li {
      position: relative;
      padding-left: 28px; /* 丸と重ならないように余白をとる */
      padding-bottom: 16px;
	  background-color: inherit;
		width: auto;
    }

    /* 左側の縦線 */
    .route-timeline li::before {
      content: '';
      position: absolute;
      left: 5px;
      top: 8px;
      bottom: -8px;
      width: 2px;
      background-color: #cce5ff;
    }
 	.route-timeline li.bus-point::before {
      background-color: #FFE7A8;
    }
    .route-timeline li:last-child::before {
      display: none; /* 最後の項目は線を引かない */
    }

    /* 経由地（青い丸） */
    .route-timeline li .point {
      font-weight: bold;
      font-size: 1em;
      line-height: 1.4;
    }
    .route-timeline li .point::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      width: 12px;
      height: 12px;
      background-color: #007bff;
      border-radius: 50%;
    }
    .route-timeline li .point.bus-point::before {
      background-color: #E78B00;
    }

    /* 乗り換え・移動手段のラベル */
    .route-timeline li.transit {
      padding-top: 0;
      padding-bottom: 16px;
    }
    /* 移動手段がある場合は縦線を繋げる */
    .route-timeline li.transit::before {
      bottom: -8px; 
    }
    .transit-label {
      display: inline-block;
      font-size: 0.85em;
      color: #495057;
      background-color: rgba(116, 166, 75, 0.15);
      padding: 6px 12px;
      border-radius: 20px;
      margin-top: 4px;
    }
    .mb-4 {
      margin-bottom: 32px;
    }
	.sub-text{
		display: none;
	}
	.sub-text_sp {
		display: block;
		font-size: 0.8em;
		color: #6c757d;
		margin-top: 4px;
        line-height: 1.4;
      }
 /* === 追加：デスクトップ向けの横書きレイアウト === */
    @media (min-width: 768px) {
      .access-container {
        max-width: 900px; /* デスクトップ画面に合わせて幅を広げる */
      }
      
      .access_box ul.route-timeline {
        display: flex;
        align-items: flex-start; /* 補足テキストがあっても上端を揃える */
        flex-wrap: wrap; /* 画面幅が狭い場合は自動で折り返す */
    	justify-content: flex-start;
    	flex-direction: row;
      }
      
      .access_box ul.route-timeline li {
        padding: 0;
        margin-right: 28px; /* 右向き矢印を入れるための余白 */
        display: flex;
        flex-direction: column; /* 補足テキストを地点の下に配置する */
        align-items: center;
        position: relative;
        width: auto;
    	background-color: initial;
      }
      
      /* スマホ用の縦線を非表示にする */
      .route-timeline li::before,
      .route-timeline li.transit::before {
        display: none;
      }
      
      /* 地点名と移動手段ラベルの縦の高さを揃える */
      .route-timeline li .point,
      .transit-label {
        height: 32px; 
        display: flex;
        align-items: center;
        margin-top: 0;
      }
      
      .route-timeline li .point {
        padding-left: 20px;
      }
      
      /* 青い丸の位置をテキストの縦中央に配置 */
      .route-timeline li .point::before {
        top: 50%;
        transform: translateY(-50%);
      }
      
      /* 経路の進行方向を示す右向き矢印(▶)を要素の間に追加 */
      .route-timeline li:not(:last-child)::after {
        content: '⇄';
        position: absolute;
        right: -20px;
        top: 16px; /* height 32px の半分 */
        transform: translateY(-50%);
        color: #adb5bd;
        font-size: 14px;
      }
		.sub-text_sp{
		display: none;
		}
		.sub-text {
		display: block;
		font-size: 0.8em;
		color: #6c757d;
		margin-top: 4px;
        line-height: 1.4;
      }
    }


/* 準備とマナー
--------------------------------------------------------- */
#rules h4{
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
#rules h4::before{
	content: "";
    display: block;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
	background: url("images/rules_icon.png") no-repeat center;
}
#rules .rules_box{
	background: url("images/rules_bg.png");
	padding: 10px 40px 100px;
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}
#rules .rules_box::before{
    content: "";
    position: absolute;
    top: -50px;
    right: 1em;
    width: 100px;
    height: 90px;
    background: url("images/rules_deco.png") no-repeat;
    background-size: contain;
    pointer-events: none;
}
#rules .rules_box_s{
	background: #fff;
	margin: 1em auto;
	padding: 1em;
}
#rules h5{
	font-size: 1.2em;
	font-weight: bold;
	display: flex;
    align-items: center;
    gap: 8px;
}
#rules h5::before{
	content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}
#rules h5.traffic::before{
	background: url(images/rules_traffic.png) no-repeat center;
}
#rules h5.toilet::before{
	background: url(images/rules_toilet.png) no-repeat center;
}
#rules h5.plant::before{
	background: url(images/rules_plant.png) no-repeat center;
}
#rules h5.animal::before{
	background: url(images/rules_animal.png) no-repeat center;
}
#rules h5.water::before{
	background: url(images/rules_water.png) no-repeat center;
}
#rules .btn_box_s a{
	max-width: 320px;
    margin: 10px auto 0;
    background: #E67400 url(../../common/img/arrow_w_l.png);
    background-repeat: no-repeat;
    background-size: 12px 20px;
    background-position: right 10px center;
}
.rules_box_s div{
	display: flex;
	justify-content: space-between;
}
.rules_box_s div img{
	width: 49%;
}

/* 花巻温泉郷に泊まろう！
--------------------------------------------------------- */
#hotspring{
	background: url("images/hotspring_bg.png") no-repeat center top / 100% 150px,#13522F;
}
#hotspring h3{
	margin-bottom: 0;
}
#hotspring .hanamakihotel{
	padding: 50px 10px;
	max-width: 900px;
	margin: 0 auto;
}
#hotspring .hanamakihotel h4{
	color: #fff;
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
#hotspring .hanamakihotel h4::before{
	content: "";
    display: block;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: url(images/hotspring_icon.png) no-repeat center;
}
#hotspring .hanamakihotel ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#hotspring .hanamakihotel ul li{
	width: 49%;
}
#hotspring .hanamakihotel ul li img{
	width: 100%;
}
#hotspring .hanamakihotel p{
	color: #fff;
}
#hotspring .btn_box_s a {
    max-width: 320px;
    margin: 10px auto 0;
    background: #74A64C url(../../common/img/arrow_w_l.png);
    background-repeat: no-repeat;
    background-size: 12px 20px;
    background-position: right 10px center;
}
#hotspring .lodging{
	padding: 10px 10px 50px;
	background-color: #fff;
}
#hotspring .lodging div{
	background: url("images/hotspring_bg01.png"),url("images/hotspring_bg02.png"),#fff;
	background-repeat: no-repeat,no-repeat;
	background-position: bottom 20px left 20px, bottom 20px right 20px;
	max-width: 900px;
	margin: 0 auto;
}
#hotspring .lodging h4{
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
#hotspring .lodging h4::before{
	content: "";
    display: block;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: url(images/lodging_icon.png) no-repeat center;
}
#hotspring .lodging ul{
	display: flex;
	flex-wrap: wrap;
    gap: 5px 5px;
	padding-bottom: 120px;
	max-width: 900px;
	margin: 0 auto 10px;
}
#hotspring .lodging ul li{
	width: calc(48% - 20px);
	background: #74A64C;
	padding: 1em;
	color: #fff;
}
#hotspring .lodging ul li p{
	color: #fff;
    background-image: url(../../common/img/arrow_w_l.png);
    background-repeat: no-repeat;
    background-size: 8px 15px;
    background-position: right 10px center;
}
#hotspring .hut{
	background-color: #fff;
}
#hotspring .hut h4{
	margin-bottom: 32px;
}
#hotspring .hut details{
	background-color: #F2F7D7;
	max-width: 900px;
	margin: 0 auto;
}
#hotspring .hut summary{
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 0 1em;
	color: #14522F;
	position: relative;
	justify-content: center;
}
#hotspring .hut summary span{
	color: #000;
	font-size: .6em;
}
#hotspring .hut summary::after {
	content: "";
	width: 8px;
 	height: 8px;
	border-bottom: 3px solid #14522F;
    border-right: 3px solid #14522F;
	position: absolute;
	right: 16px;
	transform: rotate(45deg);
}
#hotspring .hut details[open] summary::after {
	transform: rotate(225deg); 
}
#hotspring .hut ul{
	padding-bottom: 40px;
	max-width: 900px;
	margin: 0 auto 40px;
}
#hotspring .hut ul li{
	display: flex;
	padding-bottom: 30px;
}
#hotspring .hut li div{
	display: block;
	margin: 0 1em;
}
#hotspring .hut .hut_pick{
	background: #13522F;
	border-top-right-radius: 10px;
    display: inline-block;
    padding: .5em 1em;
    color: #fff;
}
#hotspring .hut .hut_img{
	width: 40%;
}
#hotspring .hut img{
	width: 100%;
}
#hotspring .hut_text{
	width: 60%;
}
#hotspring .hut_text p{
	border-bottom: 1px solid #919191;
	padding: .4em 0;
}
#hotspring .hut_text p span{
	font-weight: bold;
}
#hotspring .hut_text p.btn_box_s{
	border-bottom: none;
}
#hotspring .hut .btn_box_s a, .access_box ul .btn_box_s a{
	background-image: url(images/hut_icon.png),url(../../common/img/arrow_w_l.png);
	background-size: 16px 20px,6px 10px;
	background-position: left 10px center,right 10px center;
	margin: 2em auto 0;
	max-width: 200px;
	padding: .5em 1em;
}
@media screen and (max-width:444px){
	#hotspring .lodging ul li{
		width: 100%;
	}
}

/*早池峰山周辺観光スポット
--------------------------------------------------------- */
#sightseeing{
    background: url("images/sightseeing_bg.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center bottom;
}
#sightseeing ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 900px;
	padding: 0 10px 200px;
	margin: 0 auto;
}
#sightseeing ul li{
	display: block;
	width:49%;
	padding-bottom:15px;
}
#sightseeing ul li img{
	width:100%;
	}
#sightseeing ul li p{
	background: #74A64C;
	padding: 1em;
	color: #fff;
	background-image: url(../../common/img/arrow_w_l.png);
    background-repeat: no-repeat;
    background-size: 8px 15px;
    background-position: right 10px center;
}
.backbtn{
	background: #D1E08C;
}
.backbtn div{
	max-width: 600px;
	margin: 0 auto;
    padding: 60px 20px 4em;
}

/* 下部ナビゲーション
--------------------------------------------------------- */
.bottom-nav {
            position: sticky;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.95); /* 透明度を上げる */
            backdrop-filter: blur(12px); /* ぼかしを強める */
            -webkit-backdrop-filter: blur(12px); /* Safari対応 */
            border-top: 1px solid rgba(243, 244, 246, 0.5);
            z-index: 50;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out;
        }

        .bottom-nav.show {
            transform: translateY(0);
        }
        .nav-wrapper {
            position: relative;
        }

        /* 端のフェード効果（もっとあるよ、という視覚的ヒント） */
        .nav-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
            pointer-events: none;
        }

        /* 横スクロールメニューのコンテナ */
        .nav-scroll-container {
            display: flex;
            padding: 1rem 1rem 2rem;
            gap: 1.5rem;
            overflow-x: auto;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
			border-top: solid 8px #74A64C;
        }
        
        .nav-scroll-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }

        a.nav-link {
            text-decoration: none;
            color: #1f2937;
            white-space: nowrap;
            font-size: 13px;
            font-weight: 500;
            padding-bottom: 0.25rem;
            border-bottom: 2px solid transparent;
            transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
        }

        /* アクティブなメニューのスタイル */
        .nav-link.active {
            color: #74A64C;
            border-bottom-color: #74A64C;
            font-weight: bold;
        }

 @media (min-width: 768px) {
            .bottom-nav {
                display: none !important;
            }
        }