@charset "utf-8";

/*  common
----------------------------------------------------------------------------------------------------------- */
h2{font-family: 'Philosopher', sans-serif;
    font-weight: 700;
    font-size: clamp(20px,8vw,130px);
    color: #fff;
    text-align: center;
    width: 95%;
    margin: 0 auto 3% auto;
    text-shadow: -1px 1px 10px #7e5344, -1px 1px 10px #7e5344;
}


h4{width: 98%; max-width: 574px; background:url(../img/system/h4-title-bg.png) top center no-repeat; color : #fff1db; padding: 5px;
-moz-background-size:auto 100%;
background-size: auto 100%; font-size: clamp(14px,2vw,25px);}

h5{width: 84%; text-align: left; margin: 0 auto;}



/*  system
----------------------------------------------------------------------------------------------------------- */


.system-wrapper{
background:url(../img/system/system-bg.jpg) #fff1dc top center repeat-y;
-moz-background-size:100% auto;
background-size:100% auto;
padding-top: 10%;
padding-bottom:10%;
font-weight: 600;
color: #685348;
text-align: center;
line-height:1.81;
font-size: clamp(18px,1.5vw,47px); /*最小値, 基準値, 最大値 */
}

.sub-title{width: 70%; max-width: 678px; margin: 0 auto;}


@media screen and (max-width: 768px) {
h2{font-size: clamp(30px,10vw,130px);

}


.system-wrapper{
background:url(../img/system/system-bg.jpg) #fff1dc top center no-repeat;
-moz-background-size: auto 100%;
background-size: auto 100%;
padding-top: 10%;
padding-bottom:10%;
font-weight: 600;
color: #685348;
text-align: center;
}

}

/*  systemcont1
----------------------------------------------------------------------------------------------------------- */
.systemcont1{padding-bottom: 10%;}
.systemcont1-list{ display: flex; flex-direction:column-reverse;}
.systemcont1 .swiper-wrapper{width: auto;}
.systemcont1 { overflow: hidden;}
.systemcont1 .swiper{ width: 95%; max-width: 1250px; margin: auto; }
.systemcont1 .thumb-wrapper { width: 92%; max-width: 1000px; margin: 0 auto; padding: 3% 0;}
.systemcont1 .thumb-wrapper-pc-box{width: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin-bottom: 10px;}
.systemcont1 .swiper { overflow: visible;}
.systemcont1 .swiper-fade .swiper-slide-active { pointer-events: auto; }
.systemcont1 .swiper-controller { position: absolute; top: 0; left: 0; right:0; width: 100%; max-width: 1330px; padding-top: 29.5%;}
  
.systemcont1 .swiper-button-prev,
.systemcont1 .swiper-button-next { height: 50px; width: 50px; display:inline-block;}

.systemcont1 .swiper-button-prev:after,
.systemcont1 .swiper-button-next:after{ background-repeat: no-repeat; background-size: contain; content: ""; height: 55px; margin: auto; width: 55px; display:block;}
.systemcont1 .swiper-button-next, .systemcont1 .swiper-container-rtl .swiper-button-prev{background:none; right:-5px; left: auto; position: absolute; top:50%;  z-index:200; boder: solid 1px #ff0;}
.systemcont1 .swiper-button-prev, .systemcont1 .swiper-container-rtl .swiper-button-next{background:none; right:auto; left:-5px; position: absolute; top:50%;  z-index:200;}


.systemcont1 .swiper-button-prev:after{ background-image: url(../img/top/arrow-back.png); }
.systemcont1 .swiper-button-next:after{ background-image: url(../img/top/arrow-next.png);}

.systemcont1 img { height: auto; width: 100%;}

.systemcont1 .slide { width: 98.5%; display: block; overflow: hidden;  }
.systemcont1 .slide-media { display: block;}
.systemcont1 .thumb-media { cursor: pointer; padding: 1.5% 0; width: 23%; background:#fff1dc; margin: 0.2% 1%; border-radius: 50px;}
.systemcont1 .thumb-media-active { background:#ff6732; color: #fff1db; }
.systemcont1 .thumb-media-active{}

.systemcont1-bg-all{ width: calc(100% - 2px); font-feature-settings: "palt" 1; margin:0 auto 0 auto; text-align: center;}

.movie-thumbnail-btn{position: absolute; top:0;}
.systemcont1-ss-box{ width: calc(48% - 20px); border: solid 10px #fff1db; border-radius: 10px; position: relative; margin: 1%;}
.systemcont1-text-box{ width: 48%; border-radius: 10px; background:#fff1db; margin: 1%; padding: 3% 0;}
.systemcont1-text-box_txt{width: 80%; margin: 0 auto; padding-top: 5%; text-align: left; font-size: clamp(14px,2vw,25px); transform: rotate(0.05deg);}
.systemcont1-ss-box .movie_emb_box{margin-top:0;}


@media screen and (max-width: 768px) {
h4{font-size: 25px; max-width:574px; padding: 2% 0; margin: 0 auto;}
.systemcont1-ss-box{ width: calc(100% - 20px); border: solid 10px #fff1db; border-radius: 10px; position: relative; margin: 1% 0;}
.systemcont1-text-box{ width: 100%; border-radius: 10px; background:#fff1db; margin: 1% 0; padding: 3% 0 4% 0;}
.systemcont1-text-box_txt{width: 90%; margin: 0 auto; padding-top: 5%; text-align: left; font-size: clamp(18px,2vw,25px); transform: rotate(0.05deg);}
.systemcont1 .swiper-controller { padding-top: 60.5%;}
}



/*  systemcont2
----------------------------------------------------------------------------------------------------------- */
.systemcont2{padding-bottom: 10%;}
.systemcont2-list{ display: flex; flex-direction:column-reverse;}
.systemcont2 .swiper-wrapper{width: auto;}
.systemcont2 { overflow: hidden;}
.systemcont2 .swiper2{ width: 95%; max-width: 1250px; margin: auto; }




.systemcont2 .thumb2-wrapper { width: 95%; max-width: 1200px; margin: 0 auto; padding: 5% 0 3% 0;}
.systemcont2 .thumb-wrapper-pc-box{width: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin-bottom: 10px;}
.systemcont2 .swiper2 { overflow: visible;}
.systemcont2 .swiper-fade .swiper-slide-active { pointer-events: auto; }
.systemcont2 .swiper-controller { position: absolute; top: 0; left: 0; right:0; width: 100%; max-width: 1330px; padding-top: 29.5%;}
  
.systemcont2 .swiper-button-prev,
.systemcont2 .swiper-button-next { height: 50px; width: 50px; display:inline-block;}

.systemcont2 .swiper-button-prev:after,
.systemcont2 .swiper-button-next:after{ background-repeat: no-repeat; background-size: contain; content: ""; height: 55px; margin: auto; width: 55px; display:block;}
.systemcont2 .swiper-button-next, .systemcont2 .swiper-container-rtl .swiper-button-prev{background:none; right:-5px; left: auto; position: absolute; top:50%;  z-index:200; boder: solid 1px #ff0;}
.systemcont2 .swiper-button-prev, .systemcont2 .swiper-container-rtl .swiper-button-next{background:none; right:auto; left:-5px; position: absolute; top:50%;  z-index:200;}


.systemcont2 .swiper-button-prev:after{ background-image: url(../img/top/arrow-back.png);}
.systemcont2 .swiper-button-next:after{ background-image: url(../img/top/arrow-next.png);}

.systemcont2 img { height: auto; width: 100%;}

.systemcont2 .slide { width: 98.5%; display: block; overflow: hidden;  }
.systemcont2 .slide-media { display: block;}

.systemcont2 .thumb2-media { cursor: pointer; padding: 1.5% 0; width: 18.7%; background:#fff1dc; margin: 0.2% 0.5%; border-radius: 50px; }
.systemcont2 .thumb2-media-active { background:#ff6732; color: #fff1db; }
.systemcont2 .thumb2-media-active{}








.systemcont2-bg-all{ width: calc(100% - 2px); font-feature-settings: "palt" 1; margin:0 auto 0 auto; text-align: center;}

.movie-thumbnail-btn{position: absolute; top:0;}
.systemcont2-ss-box{ width: calc(48% - 20px); border: solid 10px #fff1db; border-radius: 10px; position: relative; margin: 1%;}
.systemcont2-text-box{ width: 48%; border-radius: 10px; background:#fff1db; margin: 1%; padding: 3% 0;}
.systemcont2-text-box_txt{width: 80%; margin: 0 auto; padding-top: 5%; text-align: left; font-size: clamp(14px,2vw,25px); transform: rotate(0.05deg);}


.system-cont2-bg{
	 width: 85%;
	 max-width: 1250px;
	 margin: 5% auto 10% auto;
  background:#fef0da;
  border-radius: 10px;
  border: solid 3px #b29466;
font-size: clamp(18px,2vw,24px);
}



@media screen and (max-width: 768px) {
h4{font-size: 5vw; max-width:574px; padding: 2% 0; margin: 0 auto;}
.systemcont2-ss-box{ width: calc(100% - 20px); border: solid 10px #fff1db; border-radius: 10px; position: relative; margin: 1% 0;}
.systemcont2-text-box{ width: 100%; border-radius: 10px; background:#fff1db; margin: 1% 0; padding: 3% 0 4% 0;}
.systemcont2-text-box_txt{width: 90%; margin: 0 auto; padding-top: 5%; text-align: left; font-size: clamp(18px,2vw,25px); transform: rotate(0.05deg);}
.systemcont2 .swiper-controller { padding-top: 155.5%;}

.systemcont2 .thumb2-wrapper { width: 95%; max-width: 1000px;}
.systemcont2 .thumb-wrapper-pc-box {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; padding-top: 5%; }

.systemcont2 .thumb2-media { cursor: pointer; padding: 3% 0; width: 32%; background:#fff1dc; margin: 1% 0.5%; border-radius: 50px; }
.systemcont2 .thumb2-media-active { background:#ff6732; color: #fff1db; }
.systemcont2 .thumb2-media-active{}




h5{width: 95%; font-size: 30px;}

.system-cont2-bg{
	width: 100%;
	border: none;
	border-radius: 0;
}



}










/*  new-system
----------------------------------------------------------------------------------------------------------- */



.system-container2{
	 width: 90%;
	 max-width: 1200px;
	 margin: 5% auto 0 auto;
  background:#fef0da;
  border-radius: 10px;
  border: solid 3px #b29466;
font-size: clamp(18px,2vw,24px);
}


.hr-img{width: 90%; margin: 0 auto 3% auto;}


.new-system-link{width: 100%; max-width: 800px; margin: 0 auto 0 auto; padding: 5% 0 1% 0;  font-size: clamp(18px,2.4vw,22px); font-weight: 600; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; letter-spacing: 0.2em; justify-content: center;}
.new-system-link li{margin-bottom: 3%;}
.new-system-link li:nth-child(1){width: 25.5%;  padding:0 2% 0 2%;}
.new-system-link li:nth-child(2){width: calc(25.5% - 2px);  padding:0 2% 0 2%;}
.new-system-link li:nth-child(3){width: 35%;  padding:0 2% 0 2%;}
.new-system-link li:nth-child(4){width: 25.5%;  padding:0 2% 0 2%;}
.new-system-link li:nth-child(5){width: 25.5%;  padding:0 2% 0 2%;}


.new-system-link li:nth-child(2){border-left: solid 2px #806d60; border-right: solid 2px #806d60; padding: 0 2.5% 0 3%;}
.new-system-link li:nth-child(4){border-right: solid 2px #806d60; padding: 0 2.5% 0 3%;}




.new-system-link a{ color: #806d60; text-decoration: none;}
.new-system-link a:visited { color: #806d60; }
.new-system-link a:hover { color: #806d60; text-decoration: underline;}
.new-system-link a:active { color: #806d60; }



.new-system-container-list{width: 90%; margin: 0 auto 5% auto; text-align: left; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap;}

.new-system-container-list1{flex-flow: row-reverse;}
.new-system-container-list1 .new-system-txt{-webkit-flex: 1; flex: 1; padding: 5% 2.5% 5% 0;}
.new-system-container-list1 .new-system-img{width: 50%; max-width: 600px;}


.new-system-container-list2{}
.new-system-container-list2 .new-system-txt{-webkit-flex: 1; flex: 1; padding: 3% 0 5% 2.5%;}
.new-system-container-list2 .new-system-img{width: 50%; max-width: 600px;}

.new-system-container-list3{flex-flow: row-reverse;}
.new-system-container-list3 .new-system-txt{-webkit-flex: 1; flex: 1; padding: 3% 2.5% 5% 0;}
.new-system-container-list3 .new-system-txt2{-webkit-flex: 1; flex: 1; padding: 0 2.5% 5% 0;}
.new-system-container-list3 .new-system-img{width: 50%; max-width: 600px;}



.new-system-txt-title{font-size: clamp(20px,2.5vw,30px); margin-left:-3%; margin-bottom: 2%; font-weight: 600;}
.new-system-txt-subtitle{background:#f8dec3; padding: 2.5% 2% 2% 2%; font-size: clamp(18px,2vw,20px); font-weight: 600; text-indent: -8%; padding-left: 10%;  transform: rotate(0.05deg);}
.new-system-txt-subtitle2{background:#f8dec3; padding: 2.5% 2% 2% 2%; font-size: clamp(14px,1.8vw,16px); font-weight: 600; transform: rotate(0.05deg); line-height:1.21;}
.new-system-txt-main{ line-height:1.2; padding: 2% 0; line-height:1.61; font-size: clamp(14px,1.5vw,20px); font-weight: 600; transform: rotate(0.05deg);}






@media screen and (max-width: 768px) {




.new-system-title{
	 width: 99%;
	 max-width: 100%;
	 margin: 5% auto 0 auto ;
	background:#ff6732;
	color: #fff;
	text-align: center;
	font-size: clamp(25px,3vw,30px); 
	padding: 2% 0.5%;
}

.system-container2{
	width: 100%;
	border: none;
	border-radius: 0;
}



.new-system-container-list1{flex-flow: row; display: block;}
.new-system-container-list1 .new-system-txt{display: block; width: 100%; padding: 0 0 5% 0;}
.new-system-container-list1 .new-system-img{width: 100%; max-width: 800px;}


.new-system-container-list2{display: block;}
.new-system-container-list2 .new-system-txt{display: block; width: 100%; padding: 3% 0 5% 0;}
.new-system-container-list2 .new-system-img{width: 100%; max-width: 800px;}

.new-system-container-list3{flex-flow: row; display: block;}
.new-system-container-list3 .new-system-txt{display: block; width: 100%; padding: 3% 0 5% 0;}
.new-system-container-list3 .new-system-txt2{display: block; width: 100%; padding: 3% 0 5% 0;}
.new-system-container-list3 .new-system-img{width: 100%; max-width: 800px;}










.new-system-link{display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; justify-content: center; width: 95%; padding-top: 10%;}
.new-system-link li{margin-bottom: 3%;}
.new-system-link li:nth-child(1){width: 44%;  padding:0 2% 0 2%;}
.new-system-link li:nth-child(2){width: calc(44% - 1px);  padding:0 2% 0 2%;}
.new-system-link li:nth-child(3){width: 49%;  padding:0 2% 0 2%;}
.new-system-link li:nth-child(4){width: calc(40% - 1px);  padding:0 2% 0 2%;}
.new-system-link li:nth-child(5){width: 44%;  padding:0 2% 0 2%;}


.new-system-link li:nth-child(2){border-left: solid 2px #806d60; border-right: none; padding: 0 2.5% 0 3%;}
.new-system-link li:nth-child(3){border: none;}
.new-system-link li:nth-child(4){border-left: solid 2px #806d60; border-right: none; padding: 0 2.5% 0 3%;}





.new-system-txt-title{font-size: clamp(20px,7vw,30px);}
.new-system-txt-main{ line-height:1.2; padding: 2% 0; line-height:1.61; font-size: clamp(16px,1.6vw,20px);}

}





/*  arrow-img1
----------------------------------------------------------------------------------------------------------- */

.arrow-img1 .swiper-button-prev,
.arrow-img1 .swiper-button-next{
  height: 50px;
  width: 50px;
  display:inline-block;
}


.arrow-img1 .swiper-button-prev:after,
.arrow-img1 .swiper-button-next:after{
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
  display:block;
}
.arrow-img1 .swiper-button-next, .arrow-img1 .swiper-container-rtl .swiper-button-prev{background:none; right:0; left: auto; position: absolute; }
.arrow-img1 .swiper-button-prev, .arrow-img1 .swiper-container-rtl .swiper-button-nex{background:none; right:auto; left: 0; position: absolute; }


.arrow-img1 img {
  height: auto;
  width: 100%;
}



@media screen and (max-width: 768px) {
.arrow-img1 .swiper-button-prev:after,
.arrow-img1 .swiper-button-next:after{
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
  display:block;
}


}