/* CSS Document */

a.blankBr{
	display: inline-block;
	padding-right: 1.2em;
	background: url("../img/arw_blank_br.png") no-repeat center right;
	background-size: 1em auto;
	margin-right: 0.25em;
}
a.blankWh{
	display: inline-block;
	padding-right: 1.2em;
	background: url("../img/arw_blank_wh.png") no-repeat center right;
	background-size: 1em auto;
	margin-right: 0.25em;
}
a.blankYe{
	display: inline-block;
	padding-right: 1.2em;
	background: url("../img/arw_blank_ye.png") no-repeat center right;
	background-size: 1em auto;
	margin-right: 0.25em;
}
/* intro
-------------------------------------------------------------*/
#intro{
	padding: 0 5% 5%;
	background: url("../img/bg_red.svg") no-repeat 0 0;
	background-size: cover;
	text-align: center;
	color: #fff;
}
#intro .icon{
	margin: 0 -2.5%;
	transform: translateY(-25%);
}
#intro .txtIntroCatch{
	font-size: clamp(15px, calc(3.8889vw - 0.1667px), 29px);
	font-weight: 600;
}
#intro .txtIntro{
	margin-top: 1em;
	font-size: clamp(13px, 3.4667vw, 26px);
	line-height: 1.55;
}
#intro .txtIntro a{
	display: inline-block;
	padding-right: 1.2em;
	color: #fff;
	background: url("../img/arw_blank_wh.png") no-repeat center right;
	background-size: 1em auto;
}
#intro .txtIntroBtm{
	padding: 5% 20%;
}
#introBtn{
	padding: 5%;
}
#introBtn li+li{
	padding: 4% 0 0;
}
#introBtn li a{
	display: block;
}
/* campaign
-------------------------------------------------------------*/
#campaign{
	text-align: center;
	background-color: #fccf00;
	padding: 0 0 9%;
}
#campaign p.txt{
	padding: 0 5% 5%;
	font-size: clamp(14px, calc(3.8889vw - 1.1667px), 28px);
	font-weight: 600;
}
#campaign ul{
	padding: 0 7%;
}
#campaign ul li+li{
	padding: 3% 0 0;
}
/* houhou
-------------------------------------------------------------*/
#houhou{
	padding: 8% 6% 0;
}
#houhou .box{
	margin: 5% 0 0;
	padding: 6%;
	background-color: #fccf00;
	border-radius: 1em;
	line-height: 1.35;
	box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3);
}
#houhou .box>div{
	display: flex;
	padding: 3%;
	justify-content: space-between;
	align-items: center;
}
#houhou .box>div p{
	text-align: center;
	font-size: clamp(21px, calc(5.8333vw - 1.75px), 42px);
	font-weight: 600;
}
#houhou .box.step1>div figure{
	width: 45%;
}
#houhou .box.step1>div p{
	width: 55%;
}
#houhou .box.step2>div figure{
	width: 30%;
}
#houhou .box.step2>div p{
	width: 70%;
}
#houhou .box.step3>div figure{
	width: 38%;
}
#houhou .box.step3>div p{
	width: 62%;
}
#houhou .box>p{
	padding-top: 3%;
	font-size: clamp(11px, 2.9333vw, 22px);
}

/* kiyaku
-------------------------------------------------------------*/
#kiyaku{
	padding: 8% 6% 0;
}
#kiyaku .kiyakuInner{
	height: 345px;
	margin: 3%;
	overflow: auto;
	overflow-x: hidden;
	background: #fff;
	line-height: 1.45;
	border: 1px solid #a30000;
}
#kiyaku .kiyakuInner div{
	padding: 5% 4%;
}
#kiyaku .kiyakuInner p{
	font-size: clamp(12px, calc(1.1268vw + 7.6056px), 20px);
}
#kiyaku .kiyakuInner p+p,
#kiyaku .kiyakuInner table+p{
	padding: 1em 0 0 ;
}
#kiyaku .kiyakuInner table{
	width: auto;
	border-collapse: collapse;
}
#kiyaku .kiyakuInner th{
	width: auto;
	padding: 0;
	font-size: clamp(12px, calc(1.1268vw + 7.6056px), 20px);
}
#kiyaku .kiyakuInner td{
	width: auto;
	padding: 0;
	font-size: clamp(12px, calc(1.1268vw + 7.6056px), 20px);
}


/* kikan
-------------------------------------------------------------*/
#kikan{
	padding: 8% 6% 0;
}
#kikan>div{
	padding: 6% 6% 0;
}
#kikan>div p{
	padding: 6% 3% 0;
	font-size: clamp(12px, calc(1.1268vw + 7.6056px), 20px);
}
/* qa
-------------------------------------------------------------*/
#qa{
	padding: 8% 6% 0;
}
#qa dl{
	margin: 5% 0 0;
	background-color: #f0f0e6;
	border-radius: 1em;
	font-size: clamp(12px, calc(1.1268vw + 7.6056px), 20px);
	font-weight: 500;
	overflow: hidden;
	line-height: 1.45;
	cursor: pointer;
}
#qa dl dt{
	padding: 5% 10% 4% 3.5em;
	background: url("../img/icn_q.svg") no-repeat 5% 1.6em;
	background-size: 1.5em auto;
	position: relative;
}
#qa dl dt:before,
#qa dl dt:after{
	content: "";
	width: 1.25em;
	height: 2px;
	background: #a30000;
	position: absolute;
	right: 5%;
	top:  clamp(2.1em, calc(1.8833em + 0.05556vw), 2.3em);
	transition:all 0.6s ease 0.2s;
}
#qa dl dt:after{
	transform: rotate(90deg);
}
#qa dl.open dt:before{
	transform: rotate(180deg);
}
#qa dl.open dt:after{
	transform: rotate(180deg);
}

#qa dl dd{
	padding: 5% 10% 4% 3.5em;
	background: #fccf00 url("../img/icn_a.svg") no-repeat 5% 1.6em;
	background-size: 1.5em auto;
	display: none;
}
/* contact
-------------------------------------------------------------*/
#contact{
	padding: 8% 6%;
	font-size: clamp(14px, calc(3.8889vw - 1.1667px), 28px);
	line-height: 1.45;
	text-align: center;
}
#contact>div{
	padding: 0.2em;
	background: url("../img/bg_contact.svg") no-repeat 0 bottom;
	background-size: 100% auto;
}
#contact>div>div{
	padding: 1em;
}
#contact>div>div h3{
	color: #a30000;
	font-size: clamp(21px, calc(5.8333vw - 1.75px), 42px);
}
#contact>div>div h3+p{
	padding: 1em 0;
	font-size: clamp(15px, 4vw, 30px);
	font-weight: 600;
}
#contact>div>div p+p{
}
/* about
-------------------------------------------------------------*/
#about{
	background-color: #fff;
}
#about>div{
	background-color: #fccf00;
}
#about>div h3{
	padding: 0 3%;
}
#about>div p{
	padding: 5% 10%;
}
#about>div ul{
	padding: 0 6% 6%;
}
#about>div li{
	margin: 0;
	padding: 0;
}

/* service
-------------------------------------------------------------*/

#service>div{
	padding: 0 0 8%;
	background-color: #fff;
}
#service #introService{
	padding: 0 6%;
}
#service #introService .box{
	font-size: clamp(13px, calc(3.3333vw + 0px), 25px);
}
#service #introService .box+.box{
	margin: 2em 0 0;
	padding: 2em 0 0;
	border-top: 3px solid #000;
}
#service #introService .boxTxt{
	text-align: center;
	font-size: clamp(14px, calc(3.8889vw - 1.1667px), 28px);
	line-height: 1.55;
	text-align: left;
}
#service #introService .boxFlex .boxHukidashi{
	width: 45%;
}
#service .tubArea{
	padding: 0 6%;
}
#service #tubMenu{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
}
#service #tubMenu li{
	width: 50%;
	border-radius: 1em 1em 0 0;
	padding: 0.5em 0.5em 0.5em 1.5em;
	cursor: pointer;
	font-size: clamp(19px, 5.0667vw, 38px);
	line-height: 1.35;
	text-align: center;
	background: url("../img/tub_non.svg") no-repeat 0 bottom;
	background-size: cover;
	color: #fff;
	position: relative;
}
#service #tubMenu li span{
	width: 8%;
	position: absolute;
	top: 50%;
	left: 8%;
	transform: translateY(-50%) rotate(0deg);
	animation: arw 1s linear infinite;
}
@keyframes arw {
  0% {
		left: 8%;
	}
  50% {
		left: 13%;
	}
  100% {
		left: 8%;
	}
}
#service #tubMenu.c01 li.c01{
	background: url("../img/tub_l.svg") no-repeat 0 bottom;
	background-size: cover;
}
#service #tubMenu.c01 li.c01 span{
	transform: translateY(-50%) rotate(90deg);
	animation: arw2 1s linear infinite;
}
#service #tubMenu.c02 li.c02{
	background: url("../img/tub_r.svg") no-repeat 0 bottom;
	background-size: cover;
}
#service #tubMenu.c02 li.c02 span{
	transform: translateY(-50%) rotate(90deg);
	animation: arw2 1s linear infinite;
}
@keyframes arw2 {
  0% {
		left: 8%;
	}
  50% {
		left: 8%;
	}
  100% {
		left: 8%;
	}
}
#tubContents #c01,
#tubContents #c02{
	display: none;
}
#tubContents.c01 #c01,
#tubContents.c02 #c02{
	display: block;
}
#tubContents #c01 .inner,
#tubContents #c02 .inner{
	padding: 6%;
	text-align: center;
	border-radius: 0 0 1em 1em;
}
#tubContents #c01 .inner{
	background: url("../img/bg_service_c01.svg") no-repeat 0 0;
	background-size: cover;
}
#tubContents #c02 .inner{
	background: url("../img/bg_service_c02.svg") no-repeat 0 0;
	background-size: cover;
}
#tubContents .boxTub+.boxTub{
	margin: 6% 0 0;
	padding: 6% 0 0;
	border-top: 3px solid #000;
}
#tubContents .boxTub .boxFlex{
	display: flex;
	align-items: center;
	margin-bottom: 1.5em;
}
#tubContents .boxTub h3{
	padding: 0;
	font-size: clamp(14px, calc(3.8889vw - 1.1667px), 28px);
	line-height: 1.45;
	flex: 1;
	padding-right: 0.5em;
	text-align: left;
}
#tubContents .boxTub .boxFlex figure{
	width: 48%;
	padding: 0.2em 0 0;
}
#tubContents .boxTub h3 strong{
	color: #dc0000;
}
#tubContents .boxTub ul{
	padding: 1em 0 0;
	text-align: left;
	color: #666;
	font-size: clamp(10px, 2.6667vw, 20px);
	line-height: 1.45;
}
#tubContents .riyoBox{
	margin-top: 15%;
	padding: 4%;
	position: relative;
	background-color: #fff;
	border-radius: 1em;
}
#tubContents .riyoBox h4{
	width: 80%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
}
#tubContents .riyoBox p{
	padding: 1em 0 0;
	font-size: clamp(13px, 3.4667vw, 26px);
}
#tubContents .riyoBox h5{
	width: 100%;
	display: flex;
	margin-top: 1em;
	font-size: clamp(12px, 3.2vw, 24px);
	text-align: left;
	font-weight: 600;
}
#tubContents .riyoBox h5 span.ttl{
	width: 35%;
	background-color: #fccf00;
	border-radius: 100px;
	text-align: center;
}
#tubContents .riyoBox h5 span.txt{
	flex: 1;
	padding-left: 0.5em;
	letter-spacing: -0.025em;
}
#tubContents .riyoBox figure{
	padding: 0.5em 0 0;
}
#tubContents .stepArea{
	margin-top: 2em;
}
#tubContents .stepArea .boxStep{
	width: 100%;
	display: flex;
	margin-top: 1em;
	background-color: #000;
	border-radius: 1em;
	padding: 0.5em 0.5em;
	line-height: 1.25;
	align-items: center;
}
#tubContents .stepArea .boxStep .num{
	width: 15%;
	color: #fccf00;
	padding: 0.5em 0;
	font-size: clamp(9px, calc(2.7778vw - 1.8333px), 19px);
	line-height: 1.1;
	border-right: 1px solid #fccf00;
}
#tubContents .stepArea .boxStep .num strong{
	color: #fccf00;
	font-size: clamp(21px, calc(5.8333vw - 1.75px), 42px);
}
#tubContents .stepArea .boxStep .txt{
	flex: 1;
	color: #fff;
	padding: 0 1em;
	text-align: left;
	font-size: clamp(14px, calc(3.3333vw + 1px), 26px);
}
#tubContents .stepArea .boxStep .txt a{
	color: #fccf00;
	display: block;
}
#tubContents .stepArea .boxBtmHukidashi{
	width: 90%;
	margin: 1em auto 0;
}
#tubContents .rinkBox h3{
	margin: 1em 0;
	padding: 0 0 0.5em;
	text-align: center;
	color: #a30000;
	border-bottom: 5px solid #a30000;
	font-size: clamp(22px, 5.8667vw, 44px);
	line-height: 1.35
}
#tubContents .rinkBox li+li{
	margin: 1em 0;
}
#tubContents .rinkBox li a{
	display: block;
}

/* 
-------------------------------------------------------------*/
#atn{
	padding: 8% 6%;
}
#atn dl{
	line-height: 1.45;
}
#atn dt{
	margin-top: 1em;
	font-size: clamp(14px, calc(3.8889vw - 1.1667px), 28px);
}
#atn dd{
	margin-top: 1%;
	font-size: clamp(12px, calc(1.1268vw + 7.6056px), 20px);
}
#atn p{
	margin-top: 1em;
	font-size: clamp(14px, calc(3.8889vw - 1.1667px), 28px);
	text-align: center;
}
#atn ul{
	margin-top: 1.5em;
	font-size: clamp(12px, calc(1.1268vw + 7.6056px), 20px);
	line-height: 1.55;
}