@charset "utf-8";
/* main
================================================ */
.word-break>span,
.word-break>span span {display:inline-block}
.btn-normal {
	font-size: 1.6rem;
}
.box-shuttle h2.font-size_LL {
	margin: 3rem auto;
}

.box-shuttle h2.font-size_L {
	margin: 10rem auto 2rem ;
}


#shuttle_01 .btn-shuttle_plan { 
	margin: 1.5em auto 2em;
}

#shuttle_01 .shuttle_lead p {
	margin: 60px auto;
    line-height: 2;
}

#shuttle_02  p.font-size_L {
	margin:2rem auto 2rem ;
}

#shuttle_02 .kome {
	margin-top: 1em;
}

#shuttle_03 div.image-box {
	margin: 2rem auto;
}

#shuttle_03  p {
	margin:2rem auto 2rem ;
	line-height: 2;
	font-size: 1.8rem;
}



.shuttle-schedule dl  {
    display:grid;
    grid-template-columns: 1fr;
    flex-flow: column nowrap;
    margin:5rem auto;

    gap:20px;
    color: #333;
}
.shuttle-schedule dl div {
	display: inherit;
	grid-template-columns: 1fr 1fr;
}

.shuttle-schedule dt {
	grid-column: 1 / -1;
    font-weight: bold;
    color: #B79E6C;
}

.shuttle-schedule dd {
    background-color: #FFF;
    padding: 1em 1.2em;
}
.shuttle-schedule dd span {
    font-weight: bold;
}
.shuttle-schedule dd + dd {
    border-left: 1px dotted #000;
}

.shuttle-caution ul {
    margin-left: 1em;
}
.shuttle-caution ul li {
    text-indent: -1em;
}
.shuttle-caution ul li::before { 
    content:"・";
    width: 1em;
}




/* シャトルバス乗り場 */
.shuttle_map-wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	border-radius: clamp(5px, calc((100vw - 428px) * 0.008389 + 5px), 10px);
	margin-top: 40px;
	margin-bottom: 40px;
}
.shuttle_map-wrapper img {
	position: absolute; /* ドラッグ用に絶対配置 */
	top: 0;
	left: 0;
	object-fit: cover; /* 必要に応じて変更 */
	pointer-events: auto; /* ドラッグ可能にする */
	user-select: none;
	touch-action: none;
	cursor: grab;
}
.shuttle_map-wrapper img:active {
	cursor: grabbing;
}
.shuttle_map-wrapper::before,
.shuttle_map-wrapper::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 40px;
	pointer-events: none;
	transition: opacity 0.3s;
	z-index: 1;
}
/* 上フェード */
.shuttle_map-wrapper::before {
	top: 0;
	background: linear-gradient(to bottom,
		rgba(0,0,0,0.4) 0%,  /* 上端はやや濃い黒 */
		rgba(0,0,0,0.2) 40%, /* 中間で薄く */
		rgba(0,0,0,0) 100%   /* 下で完全透明 */
	);
	opacity: 1;
}
/* 下フェード */
.shuttle_map-wrapper::after {
	bottom: 0;
	background: linear-gradient(to top,
		rgba(0,0,0,0.4) 0%,
		rgba(0,0,0,0.2) 40%,
		rgba(0,0,0,0) 100%
	);
	opacity: 1;
}
/* 上端に到達したとき */
.shuttle_map-wrapper.at-top::before {
	opacity: 0;
}
/* 下端に到達したとき */
.shuttle_map-wrapper.at-bottom::after {
	opacity: 0;
}




/* ================================================
 タブレット
================================================ */
@media screen and (max-width: 896px) {
/* main
================================================ */
.line_list{
	border-left: 4px solid #E5E5E5;
	padding-left: 1.2em;
}
}
@media screen and (max-width: 673px) {
/* main
================================================ */

.line_list{
	width: 100%;
	border-left: 4px solid #E5E5E5;
	margin-top: 4%;
	margin-left: 0;
	padding-left: 1em;
}
.line_list h5{
	margin-bottom: 0.4em;
}


.shuttle-schedule dl div {
	display: inherit;
	grid-template-columns: 1fr;
}
.shuttle-schedule dd + dd {
    border-top: 1px dotted #000;
    border-left: initial;
}

}


/* ================================================
 スマホ
================================================ */
@media screen and (max-width: 480px) {
/* main
================================================ */

#shuttle_03  p {

	font-size: 1.6rem;
}

.line_list{
	border-left: 3px solid #E5E5E5;
	margin-top: 5%;
	padding-left: 0.8em;
}


}