/*=======================
contents.css
=======================*/
@font-face {
  font-family: "NotoSansCJKjp-Jxck";
  font-style: normal;
  font-weight: 400;
  src: local("NotoSansCJKjp-Regular.otf"),
       local("NotoSansJP-Regular.otf"),
       url("../font/NotoSans_regular.woff") format("woff");
}

@font-face {
  font-family: "NotoSansCJKjp-Jxck";
  font-style: bold;
  font-weight: 700;
  src: local("NotoSansCJKjp-Bold.otf"),
       local("NotoSansJP-Bold.otf"),
       url("../font/NotoSans_bold.woff") format("woff");
}

html{
	margin:0;
	padding:0;
}

body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family: "Noto Sans", "Noto Sans CJK JP", "NotoSansCJKjp-Jxck", sans-serif;
	font-size:80%;
	font-size:1.4vw;
	line-height: 1.8em;
	letter-spacing: 1px;
	color:#222222;
	background: #ffffff;
	overflow-x: hidden;
}

/** -------------------------------------------
common
-----------------------------------------------**/

*, *:before, *:after {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
 }


img, p{
	margin: 0;
	padding: 0;
}
dl,ul{
	padding:0;
	list-style: none;
}

section{
	position:relative;
	width:100%;
	padding:30vh 0 20vh 0;
}
section h2{
	font-size:11vw;
	text-align: center;
	line-height: 0.66;
	padding-bottom: 0.2em;
	letter-spacing: -2px;
}
section h3{
	font-size:1.8vw;
	text-align: center;
	font-weight: 400;
	padding-bottom: 4.5em;
}
section h4{
	font-size:2.5vw;
	text-align: center;
	font-weight: 300;
	padding-bottom:40px;
}

.lede{
	width:81.5vw;
	margin:-1.5em auto 2em auto;
	text-align: justify;
	text-justify: inter-ideograph;
}

.button{
	display:block;
	width:28vw;
	min-width:269px;
	padding:1em 0;
	margin-left:auto;
	margin-right:auto;
	color:#FFF;
	background-color:#3479E8;
	text-decoration: none;
	font-size:2.3vw;
	font-weight: 400;
	vertical-align:middle;
	text-align:center;
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	transition: background-color 0.5s ease;
	-webkit-transition: background-color 0.5s ease;
}
.button span{
	font-size:75%;
	vertical-align:1px;
}
.button:hover{
	background-color:#D6380D;
}

.link{
	color:#FFF;
	font-size:115%;
	text-align: center;
}
.link a{
	color:#FFF;
}

.whiteCont{
	width:81.5vw;
	margin:50px auto 100px auto;
	padding:1.5em;
	background-color: #FFF;
}

/** -------------------------------------------
header
-----------------------------------------------**/
#header{
	position:relative;
	margin:0;
	padding:17px 0 0 0;
	width:100%;
	z-index: 0;
}

h1{
	position:relative;
	margin:0.6em 0 0 6vw;
	padding:0;
	width:64%;
	color:#D6380D;
	font-size:4vw;
	line-height:1.3;
	font-weight:500;
}

#header .mv1,
#header .mv2{
	position: absolute;
	top:150px;
	left:51vw;
	width:60.1vw;
}
#header .mv1 img,
#header .mv2 img{
	width:100%;
}
#header .mvsp{

	width:100%;
}
#header .mvsp img{
	width:100%;
}
#header #ezlogo{
	margin-top:45px;
	margin-left:6vw;
	width:45vw;
}
#header #ezlogo img{
	width:100%;
}

#header .button{
	margin-top:1.5em;
	margin-left:6vw;
	width:45vw;
}

.ua-sp #header .button{
	margin:1em auto 0 auto;
	width:80vw;
}

#ledeCont{
	position:relative;
	width:73.4vw;
	margin:100px auto 0 auto;
	padding:10px 0 0 0;
	font-size:115%;
	z-index: 40;
	background: rgba(255,255,255,0.9);
	z-index: 100;
}

#ledeCont p.text{
	text-align: justify;
	text-justify: inter-ideograph;
}

#ledeCont img{
	width:100%;
}

#ledeCont p:last-child{
	margin-top:40px;
	line-height: 0;
}


/** -------------------------------------------
contents
-----------------------------------------------**/
#contents{
	background-color: #FF6641;
	color:#FFF;
}

#contents .lede{
	width:81.5vw;
	margin:-2em auto 100px auto;
}

#contents .lede p{
	display: inline-block;
	width:65vw;
	vertical-align: middle;
}

#contents .lede img{
	display: inline-block;
	width:12vw;
	max-width:117px;
	margin-right:20px;
	vertical-align: middle;
}

#contents h4{
	font-size:2.2vw;
	text-align: center;
	padding-bottom:40px;
}

#contents .link{
	padding-top:1em;
}

#contents h5{
	font-size:135%;
	padding-bottom:1em;
	color:#FF6641;
	font-weight: 500;
}

#contents .whiteCont{
	color:#222;
}

#contents .whiteCont .price{
	display:flex;
	margin:1em 0 0 0;
	justify-content: center;
	color:#FF6641;
}
#contents .whiteCont .price p{
	border:1.5px solid #FF6641;
	padding:0.3em 1.5em;
}
#contents .whiteCont .price p:nth-child(2){
	padding:0.3em 0.5em;
	border:0;
	font-weight: bold;
}

#contents .button{
	background-color: #FFF;
	color:#FF6641;
}

#contents .button:hover{
	background-color: #3479E8;
	color:#FFF;
}

/** -------------------------------------------
introductionRecord
-----------------------------------------------**/

#introductionRecord{
	background-color: #F5F5F5;
}

#introductionRecord h2,
#introductionRecord h3{
	color:#FF6641;
}

#introductionRecord h4{
	width:78.5vw;
	margin:0 auto 0 auto;
	padding-bottom:1em;
	text-align: left;
	font-size: 130%;
	font-weight: 700;
}

#introductionRecord h4 + ul{
	display:flex;
	width:78.5vw;
	margin:0 auto 2em auto;
	flex-wrap:wrap;
	padding:0;
}
#introductionRecord h4 + ul li{
	padding-right:1.5em;
}

#introductionRecord .lede{
	text-align: center;
	margin-bottom:7em;
}

#introductionRecord .link a{
	color:#FF6641;
}

#introductionRecord .button{
	margin-top:4em;
}

.tabs {
	width:81.5vw;
	margin:-2em auto 40px auto;
	background-color: #fff;
	border:1px solid #FF6641;
}

.tabbutton{
	margin-top:-39px;
}
/*タブのスタイル*/
.tab_item {
	display: block;
	float: left;
	width: 18vw;
	height: 40px;
	overflow: hidden;
	
	margin-top:-39.9px;
	margin-right:4px;
	
	background-color: #DDDDDD;
	border-bottom:1px solid #FF6641;
	
	text-align: center;
	line-height: 40px;
	font-weight: 700;
	color: #2D2D2D;
	
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	
	transition: all 0.2s ease;
}
.tab_item:hover {
	opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 1.5em;
	clear: both;
	overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#ir1:checked ~ #ir1_content,
#ir2:checked ~ #ir2_content,
#ir3:checked ~ #ir3_content,
#ir4:checked ~ #ir4_content{
	display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
	background-color: #FF6641;
	color: #fff;
	font-weight: 400;
}

#introductionRecord .tab_content section{
	display: flex;
	justify-content: center;
	width:100%;
	height:auto;
	padding:1em;
}
#introductionRecord .tab_content section h4{
	width:auto;
	color:#FF6641;
	font-size: 140%;
	font-weight: 500;
	padding-bottom:0.8em;
}
#introductionRecord .tab_content section h5{
	width:auto;
	color:#000;
	font-size: 110%;
	font-weight: bold;
	padding-bottom:0.5em;
}
#introductionRecord .tab_content section p{
	padding-bottom:1.5em;
}

#introductionRecord .tab_content section .text{
}
#introductionRecord .tab_content section .text .graybox{
	padding:0.9em 0.9em 0;
	border:1px dotted #DDD;
	background-color: #FAFAFA;
}
#introductionRecord .tab_content section .text .graybox h4{
	font-size:120%;
}
#introductionRecord .tab_content section .text .graybox ul{
	width:100%;
	list-style:decimal;
	padding-left:1.5em;
	margin-bottom:0.5em;
}
#introductionRecord .tab_content section .text .graybox ul li{
	width:100%;
	padding:0 0 0.5em 0;
}
#introductionRecord .tab_content section .text .graybox .notice{
	font-size:90%;
}
#introductionRecord .tab_content section .img{
	width:350px;
}
#introductionRecord .tab_content section .img p{
	width:35vw;
	max-width:350px;
	padding-left:15px;
	padding-bottom:0;
	font-size:90%;
	line-height: 1.6;
	text-align: center;
	color:#666;
}
#introductionRecord .tab_content section .img img{
	width:100%;
}

#introductionRecord .tab_content section .img .bnr img{
	margin-top:2em;
	width:80%;
}

/** -------------------------------------------
setting
-----------------------------------------------**/

#setting{
	background-color: #3479E8;
	color:#FFF;
}

#setting .lede{
}
#setting h2{
	line-height:0.84;
}
#setting h3{
	margin-top:-0.8em;
}

#setting ul{
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
	width:81.5vw;
	margin:0 auto 3em auto;
	padding:0;
}
#setting ul li{
	background-color: #FFF;
	color:#4E4E4E;
	margin:5px;
	padding:0.3em 1em;
	font-size: 110%;
	font-weight: 600;
}
#setting ul li.etc{
	background-color: #3479E8;
	color:#FFF;
	font-weight: 400;
}

#setting dl dt{
	color:#222;
	font-weight: bold;
	line-height: 1.2;
}
#setting dl dd{
	margin-bottom:1.3em;
}
#setting dl dd:last-child{
	margin-bottom:0;
}

#setting .contimg{
	margin-left:auto;
	margin-right:auto;
	margin-bottom:3em;
	width:81.5vw;
}
#setting .contimg img{
	width:100%;
}

#setting .whiteCont{
	margin-top:1em;
}
#setting .button{
	background-color:#FFF;
	color:#3479E8;
}
#setting .button:hover{
	background-color: #D6380D;
	color:#FFF;
}

/** -------------------------------------------
contact
-----------------------------------------------**/

#contact{
	background-color: #26C1B5;
	color:#FFF;
}
#contact .border{
	margin:0 auto 2.7em auto;
	text-align: center;
}
#contact .border span{
	border:1px solid #FFF;
	width:auto;
	padding:0.3em 1.5em;
	font-size:170%;
}
#contact h4{
	font-size:270%;
	padding-bottom:0.8em;
}
#contact .contactbtn{
	display: flex;
	justify-content: center;
}

#contact .contactbtn p{
	width:30vw;
	background-color:#FFF;
	border-radius: 10px;
	box-shadow: 5px 5px #E2E2E2;
	text-align: center;
	padding:15px 0 20px 0;
	
	transition: background-color 0.5s ease;
	-webkit-transition: background-color 0.5s ease;
}

#contact .contactbtn p:hover{
	background-color:#FFF8D2;
}

#contact .contactbtn p:nth-child(1){
	margin-right:4vw;
}

#contact .contactbtn p a{
	display: inline;
	min-width:100%;
	background-color:rgba(255,255,255,0);
	border-radius: 0px;
	color:#222222;
	margin:1em 0 0 0;
	padding:0;
	font-size:160%;
	line-height: 1;
	text-align: center;
}
#contact .contactbtn p a img{
	display: block;
	margin:0 auto 0.6vw auto;
	padding:0;
	text-align:center;
	width:50%;
}

#contact .tel{
	font-size:5vw;
	text-align: center;
	font-weight: bold;
	padding-top:1em;
}
#contact .tel span{
	font-size: 4vw;
	font-weight: normal;
	letter-spacing: 0.1em;
	padding:0 0.5em;
}
#contact .receptionT{
	padding:1.3em 1em 7em 1em;
	text-align: center;
	font-size: 1.8vw;
}

#contact h5{
	font-size:190%;
	text-align: center;
	font-weight: normal;
	padding-bottom:0.7em;
}

/** -------------------------------------------
footer
-----------------------------------------------**/
#footer{
	position:relative;
	margin:-1px 0 0 0;
	padding:0 0 5em 0;
	width:100%;
	text-align:center;
	background-color: #26C1B5;
	color:#FFF;
}

#footer p{
	font-size: 85%;
}

#footer a{
	font-size:115%;
	color:#FFF;
}

/** -------------------------------------------
gototop
-----------------------------------------------**/
#scrolltop{
	position:fixed;
	bottom:35px;
	right:30px;
	margin:0;
	padding:0;
	width:54px;
	height: 54px;
	-webkit-opacity: 0;
	opacity: 0;
}
.gototop{
	width:100%;
}

/** -------------------------------------------
mobileMenu
-----------------------------------------------**/
#mobileCont{
	position: fixed;
	right:0;
	top:0;
	width:450px;
	height:100vh;
	background-color: rgba(58,74,100,0.95);
	z-index: 3000;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-webkit-transform: translate(100%, 0%);
  	transform: translate(100%, 0%);
	padding:0;
}

#mobileCont.active{
	-webkit-transform: translate(0%, 0%);
  	transform: translate(0%, 0%);
}

#mobileCont ul{
	list-style: none;
	padding:2em 0 0 0;
	margin:0;
	width:100vw;
}

#mobileCont ul li{
	font-size:130%;
	color:#FFF;
	border-bottom:1px solid rgba(255,255,255,0.3);
	padding:1em;
}
#mobileCont ul li a{
	display:block;
	width:100%;
	text-decoration: none;
	color:#FFF;
}
#mobileCont ul li:hover{
	background-color: rgba(52,121,232,0.5);
}

#mobilemenu{
	position: fixed;
	top:-1px;
	right:-1px;
	width:65px;
	height:60px;
	padding:15px;
	z-index: 3100;
	opacity: 1;
	-webkit-opacity:1;
	transition: opacity 0.5s 2s ease;
	background-color: rgba(58,74,100,0.8);
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 30px;
  height: 28px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-45deg);
  transform: translateY(12px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
}


/** -------------------------------------------
module
-----------------------------------------------**/
.ua-pc .sp,
.ua-tab .sp{
	display: none;
}
.ua-sp .pc{
	display: none;
}
.centering{
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

.marginB2em{
	margin-bottom:2em;
}
.marginB10em{
	margin-bottom:25em;
}
.margin0{
	margin:0;
}

/** -------------------------------------------
mobile
-----------------------------------------------**/
.ua-sp{
	width:100vw;
	min-width:100vw;
	font-size:3.5vw;
}

.ua-tab{
	width:100vw;
	min-width:100vw;
	font-size:2.1vw;
}

.ua-tab h3{
	font-size:3vw;
}
.ua-sp h2{
	padding-bottom:0.5em;
}
.ua-sp h3{
	font-size:4vw;
}
.ua-sp h4{
	font-size:5vw;
}

.ua-tab .button{
	font-size:3vw;
	height:80px;
	border-radius:40px;
}

.ua-sp .button{
	font-size:4vw;
	height:48px;
	border-radius:24px;
	min-width:50%;
}

/** header **/

.ua-tab #header .mv1,
.ua-tab #header .mv2{
	position: absolute;
	top:250px;
	left:51vw;
	width:60.1vw;
}

/** contents **/

.ua-sp #contents .lede{
	margin:1em auto 6em auto;
}

.ua-sp #contents .lede p{
	display: inline;
}

.ua-sp #contents .lede img{
	display: inline;
	width:40vw;
	margin-right:20px;
	float:left;
}

.ua-sp #contents h4{
	font-size:5vw;
	padding-bottom:15px;
}

.ua-tab #contents h4,
.ua-tab #setting h4{
	font-size:4vw;
}

.ua-sp #introductionRecord .lede{
	text-align: left;
}

.ua-sp #setting dt{
	font-size:3.5vw;
}

.ua-sp #contact .contactbtn p{
	font-size:2.5vw;
}

.ua-sp #contact .tel{
	font-size:8vw;
}
.ua-sp #contact .tel span{
	font-size:6vw;
}
.ua-sp #contact .receptionT{
	font-size:3.5vw;
}


.ua-sp #contents .whiteCont .price,
.ua-tab #contents .whiteCont .price{
	display: block;
	text-align: center;
}

.ua-sp #introductionRecord .lede,
.ua-tab #introductionRecord .lede{
	margin-bottom: 3em;
}

.ua-sp #introductionRecord .tabs,
.ua-tab #introductionRecord .tabs{
	margin-top: 0;
	margin-bottom: 2em;
}

.ua-sp #introductionRecord .tabs input,
.ua-tab #introductionRecord .tabs input,
.ua-sp #introductionRecord .tabs label,
.ua-tab #introductionRecord .tabs label{
	display: none;
}

.ua-tab #ir1:checked ~ #ir1_content,
.ua-tab #ir2:checked ~ #ir2_content,
.ua-tab #ir3:checked ~ #ir3_content,
.ua-tab #ir4:checked ~ #ir4_content{
	display: block;
}

.ua-sp .tab_content ,
.ua-tab .tab_content {
	display: block;
}

.ua-sp #introductionRecord .tab_content section,
.ua-tab #introductionRecord .tab_content section{
	display: block;
}

.ua-sp #introductionRecord .tab_content section .img,
.ua-tab #introductionRecord .tab_content section .img{
	width:100%;
	text-align: center;
}

.ua-sp #introductionRecord .tab_content section .img p,
.ua-tab #introductionRecord .tab_content section .img p{
	width:100%;
	max-width: 100%;
	padding-left: 0;
	text-align: center;
}

.ua-sp #introductionRecord .tab_content section .img img,
.ua-tab #introductionRecord .tab_content section .img img{
	margin:2em auto 0 auto;
}

.ua-sp #introductionRecord .tab_content section h1,
.ua-tab #introductionRecord .tab_content section h1{
	border-radius: 5px;
	width: 100%;
	margin:0 0 1em 0;
	padding:0.2em 0 0.2em 1em;
	font-size:110%;
	
	background-color: #FF6641;
	
	text-align: left;
	font-weight: normal;
	color: #FFF;
}

.ua-pc #introductionRecord .tab_content section h1{
	display:none;
}


.ua-sp #contact h4{
	font-size:6.5vw;
}
.ua-sp #contact .border span{
	font-size:4.5vw;
}

.ua-pc .mbbr{
	display:none;
}

.ua-sp .pcbr{
	display:none;
}

.ua-sp .onlysphide{
	display:none;
}

.ua-pc .onlyspshow,
.ua-tab .onlyspshow{
	display:none;
}

/** -------------------------------------------
IE11 hack
-----------------------------------------------**/

_:-ms-lang(x)::-ms-backdrop, .button{padding:1.2em 0 0.7em 0;}
_:-ms-lang(x)::-ms-backdrop, #contents .whiteCont .price p{padding:0.5em 1.5em 0 1.5em;}
_:-ms-lang(x)::-ms-backdrop, .tab_item{padding-top: 0.2em;}

_:-ms-lang(x)::-ms-backdrop, #introductionRecord .tab_content section{width:59vw;}
_:-ms-lang(x)::-ms-backdrop, #introductionRecord .tab_content section .text .graybox ul{width:36vw;}
_:-ms-lang(x)::-ms-backdrop, #setting ul li{padding-top:0.7em;}
_:-ms-lang(x)::-ms-backdrop, #contact .border span{
	padding:0.4em 1.5em 0 1.5em;
}