@charset "UTF-8";

section {
width: 100%;
margin: 0 auto 10%;
}

.sec03 {padding: 3% 0;}
.sec04 {margin-top: 20%;}
.sec04 p {
display: block;
max-width: 400px;
margin: 0 auto 5%;
}

.s-01 {
border-top: 1px solid #786a3e;
margin: 8% 0;
}

.nobd{
	border: none;
}
.musashino-map{
	margin-top: 0px !important;
}
.s-02 {
border-top: 1px solid #786a3e;
border-bottom: 1px solid #786a3e;
margin: 8% 0;
}

.s-03 {
padding-bottom: 1%;
margin-bottom: 17%;
}

.sv-01 {margin: 0 auto 5%;}

.sv-02 {
	position: relative;
	margin: 0 auto 3%;
}

.sv-02 figcaption {
position: absolute;
top: -6%;
right: 2%;
width: 23%;
}

.t-01 {
line-height: 1.6;
}


.t-02 {
display: block;
text-align: left;
margin: 4% auto;
color: #000;
font-size: 100%;
line-height: 1.6;
font-feature-settings: "palt";
}

.ic-01 {margin: 0 auto 10%;}

.ic-01 figcaption {
	font-size: 9px;
	text-align: right;
	padding-top: 1%;
}

.ic-02 {margin: 0 auto 4%;}

.ic-03 {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto 5%;
}

.ic-03 figcaption {
position: absolute;
top: 89%;
right: 14%;
width: 18%;
}

.ic-04 {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 auto 5%;
}

.btn-01 {
width: 70%;
max-width: 230px;
margin: 6% auto 19%;
}

.col2 {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin: 0 auto 4%;
}

.col2 li {
	width: 100%;
	max-width: 170px;
}

.col2 li p {
text-align: center;
padding: 2% 0;
font-size: min(3vw,1rem);
line-height: 1.3;
font-weight: bold;
font-feature-settings: "palt";
}

.li-01 {
display: flex;
flex-flow: column;
margin: 0 auto 6%;
}

.li-01 li {
display: flex;
align-items: center;
height: 3rem;
}

.li-01 p:first-child {
width: 11%;
}

.li-01 p:last-child {
    width: 89%;
    font-size: min(4.5vw,0.9rem);
    padding-left: 2%;
    color: #786a3e;
    letter-spacing: -1px;
}

.scroll-box {
	width: 98%;
	margin: 0 auto 12%;
	padding-left: 2%;
}

.slick-slide {max-width: 300px;}
.slick-slider {margin: 10% 0;}

.slick-prev, .slick-next {
    background: none;
    border: none;
    font-size: 16px;
    color: #000000;
    position: absolute;
    top: 56%;
    height: 20%;
    padding: 0.5%;
    transform: translateY(-50%);
    z-index: 10;
    background: #ffffff9d;
    border-radius: 3px;
}
.slick-prev { left: 6px; }
.slick-next { right: 6px; }

/*イメージオートスライダー*/
.slider-box {
    position: relative;
    width: 100%;
}

.slider-container {
width: 100%;
overflow: hidden;
position: relative;
touch-action: pan-y;
}

.slider-track {
display: flex;
transition: transform 0.6s ease-in-out;
will-change: transform;
}

.slider {
display: flex;
max-width: 1200px;
margin: auto;
}

.slide {
margin: 0 8px;
max-width: 230px;
}

.slide img {
width: 100%;
height: auto;
display: block;
}


.mv figcaption {
bottom: 3px;
left: 3px;
}

.scap {
	opacity: 0;
	animation: 3s .1s slide01;
	/*transition: 1.5s 0s all;*/
}

@keyframes slide01 {
	from {opacity: 0;}
	20% {opacity: 1;}
	80% {opacity: 1;}
	to {opacity: 0;}
}

/*SP左右スクロール*/

.scroll-wrapper {
position: relative;
overflow-x:scroll;
width: 100%;
}

.scroll-container {
width: 200%;
}

.scroll-content {
width: 200%; /* ブラウザ幅の300% */
}

.scroll-content img {
width: 100%;
height: auto;
display: block;
}

#swipe-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem;
opacity: 1;
transition: opacity 0.6s ease;
pointer-events: none;
z-index: 10;
}

/*横スライドスワイプ*/

.scroll-section {
height: 200vh;
position: relative;
}

.scroll-track {
position: sticky;
top: 11%;
/*height: 80vh;*/
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 40px;
}

.route-image-wrapper {
width: 98vw;
max-width: 1080px;
overflow: hidden;
/*margin-top: -40%;*/
margin-bottom: 20px;
}

.route-image {
/*width: 235vw;*/
width: 300vw;
display: flex;
align-items: center;
will-change: transform;
padding: 0 28% 0 2%;
transform: translateX(0);
}

@media screen and (max-width: 377px) {
.route-image {
width: 230vw;
padding: 0 8% 0 2%;
}
}

.route-image img {
object-fit: contain;
width: 450vw;
height: auto;
}

.point-image-container {
width: 80%;
background-color: #786a3e;
padding: 20px;
margin: 0 auto 10px;
transition: background-color 0.3s;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}

.point-image-container img {
width: 80vw;
max-width: 400px;
height: auto;
display: block;
}

.point-text-wrapper {
width: 100%;
text-align: center;
margin: 1% auto;
font-size: min(4vw, 1.22rem);
color: #333;
height: 10%;
}

.pc-point-images {
display: none;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

.pc-point-images .point-item {
display: flex;
flex-direction: column;
align-items: center;
width: 31%;
}

.pc-point-images .point-item p:first-child {
display: flex;
justify-content: center;
width: 100%;
background: #786a3e;
padding: 5% 2% 4%;
}

.pc-point-images .point-item p:last-child {
    text-align: center;
    padding: 3% 1% 2%;
    font-size: min(1.3vw, .9rem);
}

.pc-point-images img {
width: 240px;
max-width: 30vw;
height: auto;
display: block;
}


.fade-switch {
  opacity: 1;
  transition: opacity 0.4s ease;
}
.fade-switch.hidden {
  opacity: 0;
}

.txt_gold {
	color: #786a3e!important;

}

.capArea.-bg.cap01 {
    text-align: center;
    padding: 0;
}

.mb10 {margin-bottom: 10%!important;}

@media screen and (max-width: 767.9px) {
	.capArea.-bg{
		background: transparent;
		padding:15px;
	}

}

@media screen and (min-width: 767.9px) {
	.musashino-map{
		margin-top: 50px !important;
	}
	.slider-box {
		margin-bottom: 60px;

	}

	.li-01 p:last-child {
	    width: 89%;
	    font-size: min(4.5vw,1.3rem);
	    padding-left: 2%;
	    color: #786a3e;
	    letter-spacing: -1px;
	}

	section {
	width: 100%;
	margin: 0 auto 7%;
	}

.sec04 {margin-top: 1%;}

.s-01 {margin: 4% 0;padding-top: 60px;}

.s-02 {margin: 4% 0;padding-top: 60px;}

.s-03 {
    margin-bottom: 5%;
    padding: 3% 0;
}

.s-03 .wrap_col {align-items: flex-start;}

.ic-01 {margin: 0 auto 0%;}
.ic-03 {width: 96%;}
.ic-04 {
    width: 96%;
    margin-top: 6%;
}

.ico-01 {
    top: -19%!important;
    left: 0%;
    width: 16%!important;
}

.t-01 {
display: block;
text-align: center;
margin: 4% auto;
color: #000;
font-size: 18px;
line-height: 1.6;
font-feature-settings: normal;
}

.sec04 p {
display: block;
max-width: 500px;
margin: 0 auto 2%;
}

.-secT{
	font-size: 22px;
}

.scroll-box {
	margin: 0 auto 5%;
}

.scroll-section {
height: auto;
}
.point-image-container {
display: none;
}
.point-text-wrapper {
display: none;
}
.pc-point-images {
display: flex;
width: 98%;
	}
.route-image {
width: 100%;
padding: 0;
}
.route-image img {
width: 100%;
}

.wrap_col {
    margin: 0 auto;
    align-items: flex-start;
}
.col2 li {max-width: 220px;}
.li-01 li {height: 4.5rem;}
.col2_box h3{margin-top: 0;}

.train_b2 .col2_box:first-child {width: 30%;}
.train_b2 .col2_box:nth-child(2) {width: 70%;}
.train_b2 .t-01 {margin: 0 auto 2%;}

.capArea {padding-bottom: 15px;}
.capArea.-bg{
	background: transparent;
	padding:15px 8px;
}
}

/*ライトボックスinスライダー*/
.ltbox-01 {margin: 3% auto 8% !important;}
.zoom-icon.zoom01 {
	bottom: auto;
	top:-10%;
}
.zoom-icon.zoom02 {
	bottom: -30%;
}

.lightbox {
  overflow-x: auto;
  overscroll-behavior-x: none;
}

.scroll-box.inner-scroll {
    width: 100%;
    margin: 0 auto 0%;
    background: #fff;
    padding: 0;
}

@media screen and (min-width: 767.9px) {
.ltbox-01 {margin: 0% auto 5% !important;}
.ltbox-01.box01,.ltbox-01.box02 {width: 100%;}
.ltbox-01.box02 {margin: 1% auto!important;}
}
/*//ライトボックスinスライダー*/


/*　縦→横→縦スクロール
-------------------------------------*/

.pinScroll {
  height: 250vh;
  position: relative;
}

.pinScroll__sticky {
    position: sticky;
    top: 10%;
    /*height: 52vh;*/
	height: 75vh;
	overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.pinScroll__track {
  height: 100%;
  display: flex;
  align-items: center;
}

.pinScroll__content {
  display: flex;
  align-items: center;
  will-change: transform;
}

.pinScroll__image {
    display: block;
    /*height: 43vh;*/
	height: 60vh;
    max-width: none;
    min-width: 200vw;
    padding: 0 1%;
}
.pinScroll.ps-02 .pinScroll__sticky {/*height: 35vh;*/ height: 70vh;}
.pinScroll.ps-02 .pinScroll__image {/*height: 30vh;*/ height: 40vh;}

@media screen and (max-width: 377px) {
.pinScroll__track {margin-top: 4%;}
.pinScroll__image {height: 50vh;}
}

@media screen and (min-width: 767.9px) {

.pinScroll {
    height: auto;
    margin: 0% auto 3%;
}
.pinScroll__image {
    height: auto;
	min-width: auto;
    max-width: 1100px;
}

.pinScroll__sticky {
    height: auto;
}

.pinScroll__inner {
    position: relative;
    top: 0;
    margin: 5% 0;
}
.pinScroll.ps-02 .pinScroll__sticky {height: auto;}
.pinScroll.ps-02 .pinScroll__image {
    height: auto;
    width: 100%;
}
}