@charset "utf-8";

/* CSS Document */
/*-----------------------------------------------setting*/

*{ box-sizing: border-box;}

html { font-size: 62.5%; }
body {-webkit-text-size-adjust: 100%; font-size:1.2rem; color: #fff; font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; line-height: 1.6; }
html, body{
  position: relative;
  width: 100%;
  overflow-x: hidden;
  min-width: auto;
}

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


html.modal-is-locked{overflow:hidden;touch-action:none}
.modal-is-locked .overlay:before{background-color:rgba(0,0,0,0.8)!important}
.commonHeader{position:relative}
.disp-overlay .commonHeader{ position: fixed;}
.wrapper{padding-top:0}

.commonHeader .hamburger{
    z-index: 999;
}

.CommonTtl{
	width: 86%;
	margin: 0 auto;
	margin-bottom: 20px;
}
.CommonTtl .main{
	font-size: 4.8vw;
	letter-spacing: 0;
}
.CommonTtl .sub{
	font-size: 12px;
}
.CommonTtl .txt{
}

.btn{
}
.btn.btnArea{width: 100%;/* margin-top: 30px; */}
.btn a{}
.btn.btnArea a{padding: 13px 14px;display: block;font-size: 4vw;}
.btn.btnArea a.sizeS{padding: 15px 14px;font-size: 13px;line-height: 1.5;}
.btn.btnArea a + a{
}

br.smp{display: block;}

/*-----------------------------menuArea*/
.menuArea{position: fixed;padding: 5px 10px 0px 10px;display: flex;width: 100%;justify-content: space-between;box-sizing: border-box;}
.menuArea.header_change{
	display: none;
}
.menuArea.header_fixed{
	margin-top: 0;
}
.menuArea.fixed{position:fixed;width:100%;top:0;z-index:999}

.menuArea .smpLogo{
	display: block;
	color: #000;
	flex: 1;
}
.menuArea .smpLogo ul{
	display: flex;
	align-items: center;
}
.menuArea .smpLogo li{
	width: 100px;
}
.menuArea .smpLogo li img{
	width: 100%;
}
.menuArea .smpLogo li.txt{
	width: auto;
	margin: 0 9px 0 2px;
	font-size: 22px;
}
.menuArea .Inner{display:none;width: auto;}
.menuArea .humb{font-size:10px;text-align:center;width: 5em;height: 45px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;border-radius: 2px;background-color: #dcdcdc;color: #000;padding-top: 3px;letter-spacing: 1px;margin-top: 3px;border: 1px solid #ccc;}
.menuArea.fixed .humb{
	top: 10px;
}
.menuArea.header_change .humb{/* display:none; */}
.menuArea .humb span{border-top: 1px solid #000;display:block;padding-top:5px;position:relative;margin-top:5px;font-weight:700;}
.menuArea .humb span:before,.menuArea .humb span:after{content:"";border-top: 1px solid #000;display:block;width:100%;height:1px}
.menuArea .humb span:before{margin-bottom:3px}
.menuArea .humb span:after{content:"";position:absolute;left:0;top:-6px}
.menuArea.open{display:block;width:100%;height:100%;position:fixed;overflow-y:scroll;top:0;right:-100%;z-index:9999;text-align:center;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;transition:all .4s;-webkit-overflow-scrolling:touch;right:0;background-color:#000;padding: 0;}
.menuArea.open .smpLogo{
	display: none;
}
.menuArea.open .humb{right:auto;left:15px;top:20px;padding:0;display:block;box-shadow:none;z-index:999999;background-color:initial;position:fixed;border: none;}
.menuArea.open .humb span{display:none}
.menuArea.open .humb:before,.menuArea.open .humb:after{content:"";width:2px;height:47px;background:#fff;top:20px;display:block;left:20px;position:absolute}
.menuArea.open .humb:before{transform:translate(-50%,-50%) rotate(45deg)}
.menuArea.open .humb:after{transform:translate(-50%,-50%) rotate(-45deg)}
.menuArea.open .Inner{margin-left: 17%;background-color:#fff;min-height:100%;text-align:left;box-sizing: border-box;min-width: auto;padding: 10px;box-sizing: border-box;}

.menuArea .Inner{}
.menuArea .Inner .logo{}
.menuArea .Inner .logo ul{
	justify-content: center;
}
.menuArea .Inner .logo li{}
.menuArea .Inner .logo li img{}
.menuArea .Inner .logo li.txt{}
.menuArea .Inner .main{
	margin: 0;
}
.menuArea .Inner .main ul{
	display: block;
}
.menuArea .Inner .main ul + ul{}
.menuArea .Inner .main li{
	border-top: 1px solid #a5a5a5;
}
.menuArea .Inner .main li a{
	display: block;
	text-align: center;
	padding: 10px 0;
	font-size: 14px;
}
.menuArea .Inner .main li a:hover,.menuArea .Inner .main li a.active{}
.menuArea .Inner .main li + li{
	margin: 0;
}
.menuArea .Inner .main li + li:before{
	content: none;
}
.menuArea .Inner .other{
	margin-top: 10px;
}
.menuArea .Inner .other ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.menuArea .Inner .other li{
	width: 49%;
}
.menuArea .Inner .other li + li{
	margin: 0;
}
.menuArea .Inner .other li a{
	padding: 10px 11px;
}
.menuArea .Inner .other li a:hover{}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*  MV
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
#MV{height: auto;padding-bottom: 30px;}
#MV:before{}
#MV .Inner{
	width: 90%;
	padding-top: 90px;
}
#MV .Inner h1{
	margin-bottom: 10px;
}
#MV .Inner h1 .main{
	font-size: 4vw;
}
#MV .Inner h1 .main strong{}
#MV .Inner h1 .sub{
	font-size: 11vw;
	margin-top: -30px;
}

#MV .Inner .MainBox{
    padding: 10px;
    margin-top: 12px;
}
#MV .Inner .MainBox .SubTtl{
    font-size: 4vw;
}
#MV .Inner .MainBox .MainTxt{font-size: 3.5vw;padding: 0;}
#MV .Inner .MainBox .MainTxt + .MainTxt{
    margin-top: 12px;
}
#MV .Inner .MainBox .MainTxt + .MainTxt br{display: none;}
#MV .Inner .MainBox .MainTxt + .MainTxt:before{
	margin-bottom: 14px;
}
#MV .Inner .MVbtn{	position: relative;
	right: auto;
	bottom: auto;
	margin-top: 20px;}
#MV .Inner .MVbtn a{
	width: 100%;
	height: auto;
	border-radius: 2px;
	padding: 10px 0;
}
#MV .Inner .MVbtn a .main{
	font-size: 3.8vw;
}
#MV .Inner .MVbtn a .main br{
	display: none;
}
#MV .Inner .MVbtn a .sub{}
#MV .Inner .MVbtn a:after{position: absolute;right: 8px; top:50%; margin-top:-0.5em;content:"\f105"; font-family:FontAwesome; line-height: 1}
#MV .Inner .MVbtn a:hover{}


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*  .Item.Column1
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.Item.Column1 .Entry{
}
.Item.Column1 .Entry + .Entry{}
body#Train .Item.Column1 .Entry,
.Item.Column1 .Entry .linkArea{	padding: 15px;}
.Item.Column1 .Entry .photo{
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	margin-bottom: 10px;
}
.Item.Column1 .Entry .photo .dst{}
.Item.Column1 .Entry .photo img{
	height: auto;
}
.Item.Column1 .Entry .photo .caption{}
.Item.Column1 .Entry .photo .pamf{}
.Item.Column1 .Entry .main{
	margin: 0;
	margin-bottom: 15px;
}
.Item.Column1 .Entry .data{}
.Item.Column1 .Entry .data li{}
.Item.Column1 .Entry .data li + li{}
.Item.Column1 .Entry .states{}
.Item.Column1 .Entry h4{
	font-size: 4.3vw;
	font-weight: normal;
	line-height: 1.5;
}
.Item.Column1 .Entry .htl{}
.Item.Column1 .Entry .btm{
	margin: 0;
}
.Item.Column1 .Entry .price{
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	text-align: right;
	justify-content: flex-end;
}
.Item.Column1 .Entry .price dt{
	font-size: 5vw;
	margin: 0;
	margin-bottom: 4px;
	order: 3;
}
.Item.Column1 .Entry .price dt span{}
.Item.Column1 .Entry .price dd{
	color: #fff;
	order: 1;
}
.Item.Column1 .Entry .price .per{
	color: #c9a775;
	order: 2;
	margin-top: 4px;
}
.Item.Column1 .Entry .btn{
	width: 100%;
}
.Item.Column1 .Entry .btn a{}
.Item.Column1 .Entry .btn a:after{}
.Item.Column1 .Entry .freetext{
	padding: 5px 10px;
	line-height: 1.7;
	font-size: 12px;
}
.Item.Column1 .Entry:hover{}
.Item.Column1 .Entry:hover .btn a{}

.Item.Column1 .Entry .Otherbtn{
	display: block;
}
.Item.Column1 .Entry .Otherbtn p{
	padding-bottom: 10px;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*  .Item.Column4
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.Item.Column4 .Entry{
	width: 100%;
	padding: 15px;
}
.Item.Column4 .Entry + .Entry{
	margin-top: 20px;
}
.Item.Column4 .Entry .linkArea{
	border: none;
}
.Item.Column4 .Entry .photo{
	margin-bottom: 10px;
}
.Manual.Item.Column4 .Entry .photo .img{
	height: 190px;
}
.Item.Column4 .Entry .photo .dst{}
.Item.Column4 .Entry .photo img{}
.Item.Column4 .Entry .photo .caption{}
.Item.Column4 .Entry .main{
	padding: 0;
	margin-bottom: 10px;
}
.Item.Column4 .Entry .data{}
.Item.Column4 .Entry .data li{}
.Item.Column4 .Entry .data li + li{}
.Item.Column4 .Entry .states{}
.Item.Column4 .Entry h4{
	font-size: 15px;
}
.Item.Column4 .Entry .htl{}
.Item.Column4 .Entry .btm{
	text-align: right;
}
.Item.Column4 .Entry .price{}
.Item.Column4 .Entry .price dt{
	font-size: 4.5vw;
}
.Item.Column4 .Entry .price dt span{}
.Item.Column4 .Entry .price dd{}
.Item.Column4 .Entry .price .per{}
.Item.Column4 .Entry .btn{
	padding: 0;
}
.Item.Column4 .Entry .btn a{
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}
.Item.Column4 .Entry .btn a:after{}
.Item.Column4 .Entry:hover{}
.Item.Column4 .Entry:hover .btn a{}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*  BenefitPoint
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.BenefitArea{
	margin-bottom: 30px;
}
.BenefitPoint{
	width: 86%;
	/* margin-top: 40px; */
	padding: 15px;
}
.BenefitPoint .ribbon{
	position: relative;
	width: 100%;
	height: auto;
	overflow: visible;
}
.BenefitPoint .ribbon span{
	position: relative;
	left: auto;
	top: auto;
	width: 100%;
	line-height: 1.2;
	transform: rotate(0deg);
}
.BenefitPoint .box{
	margin: 0;
	margin-top: 10px;
}
.BenefitPoint .box h3{
	font-size: 4vw;
}
.BenefitPoint .box h3:before,.BenefitPoint .box h3:after{
	content: none;
}
.BenefitPoint .box ul{
	font-family: inherit;
}
.BenefitPoint .box li{
	font-size: 13px;
	font-weight: bold;
}
.BenefitPoint .box li br{
	display: none;
}
.BenefitPoint .box li span{}
.BenefitPoint .box li + li{}
.BenefitPoint .box li:before{}
.BenefitPoint .box li dl{flex-wrap: wrap;}
.BenefitPoint .box li dt{
	font-weight: bold;
}
.BenefitPoint .box li dd{
	font-weight: normal;
}

.BenefitPoint .box .LinkArea{display: block;
	width: 100%;
	text-align: center;}
.BenefitPoint .box .LinkArea .ttl{
	display: block;
	padding: 4px 0;
}
.BenefitPoint .box .LinkArea .btn{}
.BenefitPoint .box .LinkArea .btn a{
	padding: 5px 9px;
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.BenefitPoint .box .LinkArea .btn a:hover{}
.BenefitPoint .box .LinkArea dd{
	padding-bottom: 1px;
}
.BenefitAtte{
	width: 86%;
}
.BenefitPoint .box li dd br{
	display: block;
}
.BenefitAtte ul{}
.BenefitAtte li{}
.BenefitAtte li + li{}
.BenefitAtte li:before{}
.BenefitCode{
	width: 86%;
	margin-bottom: 30px;
}
.BenefitCode dl{}
.BenefitCode dt{
	font-size: 15px;
}
.BenefitCode dd{}
.BenefitCode dd ul{}
.BenefitCode dd li{
	font-size: 13px;
}
.BenefitCode dd li:before{}
.BenefitCode dd li + li{}
.BenefitCode .atte{
	font-size: 12px;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*  popup
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.popup{
	width: 80%;
	padding: 20px 20px;
}
.popup p{
	font-size: 16px;
}
.popup p.atte{}
.popup ul{
	display: block;
}
.popup ul li{
	margin: 0;
	margin-bottom: 10px;
}
.popup ul li button{
	width: 100%;
}
.popup ul li button:hover{}
.popup ul li button.no{
	padding: 8px 0;
}
.popup ul li button.no:hover{}


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/*  Contact
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
#Contact{
	padding: 30px 0 120px 0;
}
#Contact:before{}
#Contact h2{}
#Contact .photo{
	width: 86%;
	margin-bottom: 20px;
}
#Contact .photo li{}
#Contact .photo li img{}
#Contact dl{
	width: 86%;
	display: block;
}
#Contact dt{
	display: flex;
	align-items: center;
	font-size: 4.5vw;
	justify-content: center;
	margin-bottom: 15px;
}
#Contact dt p.title{
	padding-bottom: 0;
	padding-right: 10px;
}
#Contact dt .tel{
	font-size: 5vw;
}
#Contact dd{
	margin: 0;
}
#Contact dd p{
	font-size: 14px;
}
#Contact dd p + p{
	font-size: 12px;
}
#Contact .atte{
	width: 86%;
	margin: 0 auto;
	font-size: 14px;
}
#Contact .btn.btnArea{
	width: 86%;
}
#Contact .btn.btnArea a{
	font-size: 4.5vw;
	padding: 15px 30px;
}