@charset "utf-8";

@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css"); /* gothic [font-family: "Noto Sans Japanese";] */





*{
	margin:0;
	padding:0;
}
body{
	background:#FFFFFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-family: "Noto Sans Japanese";
	-webkit-appearance: none;
}
html, body {
  margin: 0;
  padding: 0;
}
br.sp{
	display:none;
}
@media screen and (max-width:640px) {
	br.sp{
		display:block;
	}
}



.mv{
	width:100%;
	position:relative;
	font-size: 0;
    line-height: 0;
}
.mv img{
	display:block;
	width:100%;
}


.mv img.pc {
    display: none;
}

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


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

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

    .mv img.sp {
        display: none;
    }

}


/*-----------------------
          text 
-----------------------*/

.description{
	width:87%;
	max-width:810px;
	margin:40px auto;
}
.description h1{
	font-size:26px;
	letter-spacing:2px;
	font-weight:normal;
	text-align:center;
}
.description p{
	font-size:18px;
	letter-spacing:2px;
	font-weight:bold;
	text-align:center;
}
@media screen and (max-width:640px) {
	.description{
		margin:35px auto;
	}
	.description h1{
		font-size:21px;
	}
	.description p{
		font-size:14px;
	}
}



.topRead{
	width:100%;
	max-width:760px;
	margin:auto;
	padding:40px 0;
}
.topRead h2{
	font-size:20px;
	text-align:center;
	letter-spacing:1px;
	color:#4DB4C7;
}
.topRead h2::after{
	content:"";
	display:block;
	width:120px;
	height:2px;
	background:#4DB4C7;
	margin:20px auto;
}
.topRead p{
	text-align:center;
	font-size:16px;
	line-height:165%;
	color:#333333;
}
@media screen and (max-width: 768px) {
	.topRead{
		width:90%;
		padding:25px 0;
	}
	.topRead h2{
		font-size:18px;
	}
	.topRead h2::after{
		width:80px;
		margin:15px auto;
	}
	.topRead p{
		font-size:14px;
	}
}





.tx_read{
	/*border:solid 1px #D3d3d3;*/
	border-radius:2px;
	width:90%;
	max-width:760px;
	margin:20px auto;
}
.tx_read.max{
	width:auto;
	margin:70px auto 0 auto;
	height:240px;
}
.tx_read .area{
	padding:25px;
	background-color:#e5f9f9 ;
}
.tx_read.max .area{
	/*
	overflow:scroll;
	height:240px;
	*/
}
.tx_read .area div{
	margin-bottom:22px;
}
.tx_read .area div p{
	font-size:14px;
	line-height:165%;
}
.tx_read .area div span{
	font-size:12px;
	line-height:165%;
	display:block;
	margin-top:5px;
}

.tx_read .area div span.red{
	font-size:12px;
    color:#ff0000;
	line-height:165%;
	display:block;
	margin-top:5px;
}

.tx_read .area div span a{
	color:#2081C8;
	text-decoration: underline;
}

.tx_read .area div span.red a{
	font-size:14px;
	color:#ff0000;
	text-decoration: underline;
}



.tx_read .area div h2{
	font-size:18px;
	font-weight:bold;
	margin-bottom:8px;
}
.tx_read .area div h3{
	font-size:16px;
	font-weight:450;
	margin-bottom:8px;
}


span.min{
	clear:both;
	display:block;
	font-size:13px;
	color:#888888;
}
@media screen and (max-width:640px) {
	.tx_read .area{
		padding:18px;
	}
	.tx_read .area div{
		margin-bottom:18px;
	}
	.tx_read .area div p{
		font-size:13px;
		line-height:160%;
	}
	.tx_read .area div span{
		font-size:11px;
		line-height:155%;
	}
	.tx_read .area div h2{
		font-size:16px;
		font-weight:bold;
		margin-bottom:6px;
	}
	.tx_read .area div h3{
		font-size:14px;
		margin-bottom:6px;
	}
	span.min{
		font-size:12px;
	}
}


.Thanks{
	width:100%;
	margin:40px auto;
}
.Thanks h2{
	font-size:20px;
	text-align:center;
	letter-spacing:1px;
	margin-bottom:15px;
	color:#3ABAD4;
}
.Thanks p{
	text-align:center;
	font-size:16px;
	line-height:175%;
}






/*-----------------------
       annotation 
-----------------------*/

.annotation{
	display:block;
	width:90%;
	max-width:840px;
	font-size:13px;
	color:#EE0000;
	margin:4px auto;
}
.required{
	background-color:#F1E8E8;	
}
@media screen and (max-width:640px) {


}








/*-----------------------
     required object
-----------------------*/

.any_tx,.required_tx{
	font-size:11px !important;
	color:#FFFFFF !important;
	margin-left:6px;
	border-radius:2px;
	text-align:center;
	display:inline-block;
	padding:0 4px;
	height:15px;
	line-height:15px;
}
.required_tx{
	background:#EE0000;
	border:solid 1px #D50000;
}
.ni_tx{
	font-size:11px !important;
	color:#333333 !important;
	margin-left:6px;
	border-radius:2px;
	text-align:center;
	display:inline-block;
	padding:1px 5px;
	height:15px;
	line-height:15px;
	background:#EEEEEE;
}
.required_tx.min{
	font-size:10px !important;
	height:12px;
	padding:0 2px;
	line-height:12px;
	margin:-2px 4px 0 0;
	vertical-align: middle;
}
@media screen and (max-width:640px) {


}









/*-----------------------
       Subheading
-----------------------*/

.Inputarea .Captx{
	clear:both;
	font-size:14px;
	display:block;
	line-height: normal !important;
	padding:12px 0 5px 0;
}
.Inputarea .Captx.Captx_first{
	padding-top:0;
}
@media screen and (max-width:640px) {


}










/*-----------------------
        Mail area 
-----------------------*/

#Mail_area{
	width:90%;
	max-width:760px;
	margin:0 auto;
}

/* Input Wrap */
.Inputarea{
	width:auto;
}
.Inputleft{
	width:100%;
	clear:both;
}
.Inputright{
	width:100%;
}

/* Input inner */
.Inputleft div{
	padding:14px 0;
	padding-bottom:6px;
}
.Inputleft div p{
	font-size:16px;
}
.Inputright div{
	padding:14px 0;
	padding-top:6px;
}
.Inputright div .conf{
	width:97.5%;
	height:auto;
	font-size:16px !important;
	padding:7px 8px;
	margin-top:7px;
	background:#FFFFFF !important;
	border:solid 1px #CCCCCC;
	border-radius:3px;
}
@media screen and (max-width:640px) {
	.Inputarea{
		display: block;
	}
	.Inputleft{
		width:100%;
		border-right:none;
		padding-top:10px;
	}
	.Inputright{
		width:100%;
		padding-bottom:20px;
	}
	
	/* Input inner */
	.Inputleft div{
		line-height:normal;
		padding:0 8px 10px 8px;
	}
	.Inputleft div p{
		padding-top:10px;
	}
	.Inputright div{
		padding:0px 8px;
	}
	.Inputright div .conf{
		width:94.5%;
		margin-top:0;
	}
}









/*-----------------------
    Input Type Style
-----------------------*/

/* text */
input:focus,textarea:focus{
	background:#F7EBCA;
}
.Inputright div input[type="text"],.Inputright div input[type="tel"],.Inputright div input[type="email"]{
	width:90%;
	font-size:16px;
	padding:10px;
	border-radius:2px;
	border:solid 1px #CCCCCC;
}
#name,#kana,#tel{ width:50%; }
#zip{ width:25%; }
#add1,#add2,#add3,#mail,#mail_con{ width:75%; }
@media screen and (max-width:640px) {
	#name,#kana,#tel{ width:92%; }
	#zip{ width:50%; }
	#add1,#add2,#add3,#mail,#mail_con{ width:92%; }
	
}



/* radio */
.Inputright div input[type="radio"]{
  display: none;
}
.radio_area label{
	width:46.55%;
	float:left;
	list-style-type:none;
	margin-right:8px;
	margin-bottom:8px;
	padding:8px;
	border:solid 1px #D3D3D3;
	border-radius:2px;
	display:block;
	cursor:pointer;
}

.radio_area label span{
	transition:.4s;
	padding-left: 32px;
	position:relative;
	margin-right: 20px;
	cursor:pointer;
}
.Inputright div input[type="radio"]:checked + span{
	color: #3ABAD4;
  }
.radio_area label span::before{
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border:solid 1px #D3D3D3;
  background:#FFFFFF;
}
.radio_area label span::after{
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:#3ABAD4;
  transition:.4s;
  opacity:0;
}

.Inputright div input[type="radio"]:checked + span::after{
  border-radius: 50%;
  background: #3ABAD4;
  opacity:1;
}
@media screen and (max-width:640px) {
	.radio_area label{
		width:94.5%;
		float:none;
		margin:0 auto 5px auto;
	}
}



/* check box */

.Checklist{
	width:100%;
	overflow:hidden;
}

/* 元のボタン非表示 */
.Inputright div input[type="checkbox"]{
  display: none;
}

/* 通常チェックリスト */
.Checklist li{
	width:48.85%;
	float:left;
	list-style-type:none;
	margin-right:8px;
	margin-bottom:8px;
}
.Checklist li label{
	padding:8px;
	border:solid 1px #D3D3D3;
	border-radius:2px;
	display:block;
	cursor:pointer;
}

.check_area label span{
transition:.4s;
	padding-left: 32px;
  position:relative;
  margin-right: 20px;
  cursor:pointer;
}
.check_area input[type="checkbox"]:checked + span{
  color: #3ABAD4;
}
.check_area label span::before{
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border:solid 1px #D3D3D3;
  background:#FFFFFF;
}
.check_area label span::after{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 8px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #FFFFFF;
  border-right: 3px solid #FFFFFF;
  transition:.4s;
  opacity:0;
}
.check_area input[type="checkbox"]:checked + span::before{
  background:#3ABAD4;
}
.check_area input[type="checkbox"]:checked + span::after{
  opacity:1;
}
.check_area textarea{
	width:60%;
	height:50px;
}
@media screen and (max-width:640px) {
	/* check box */
	.Checklist li{
		width:100%;
		float: none;
		margin:0 auto 5px auto;
	}
}



/* select */
.select_label{
	display:inline-block;
	position:relative;
}
select{
	width:260px;
	font-size:16px;
	padding: 10px;
	border-radius:2px;
	border:solid 1px #CCCCCC;
	appearance: none;
	position:relative;
	background:#FFFFFF url(../_img/select_allow.png) no-repeat center right;
	background-size:15px;
}

/* select custom [birth] */
.Inputarea div select[name="birth1"]{
	width:330px;
}
.Inputarea div select[name="birth2"],
.Inputarea div select[name="birth3"]{
	width:180px;
}

/* text custom [yoyaku] */
.Inputarea input[name="yoyaku"]{
	width:160px !important;
	margin-left:0;
	margin-right:10px !important;
}

/* select custom [ytime] */
.Inputarea select[name="ytime"]{
	width:160px;
	margin-left:0;
	display:inline;
}
@media screen and (max-width:640px) {
	.Inputarea div select[name="birth1"]{
		width:270px;
	}
	.Inputarea div select[name="birth2"],
	.Inputarea div select[name="birth3"]{
		width:160px;
	}
}



/* textarea */
textarea{
	width:97.2%;
	height:180px;
	font-size:16px;
	padding:10px;
	border-radius:2px;
	border:solid 1px #CCCCCC;
}
@media screen and (max-width:640px) {
	
	/* textarea */
	textarea{
		width:92%;
	}
}



/* check box custom [agreement] */
.agreement_tx{
	border-top:dotted 2px #CCCCCC;
	padding:8px 10px;
	font-size:14px;
	line-height:145%;
	color:#6A1A1B;
	margin-top:10px;
}
.agreement_check{
	display:block;
	width:90%;
	
}
@media screen and (max-width:640px) {


}




.SubmitBtn{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* submit [input] */
#Submit{
	width:760px;
	height:62px;
	margin:30px auto;
	position:relative;
}
#Submit .SubmitBtn{
	text-align:center;
	border-radius:3px;
	border:none;
	font-size:15px;
	font-weight:bold;
	color:#FFFFFF;
	background:#3ABAD4;
	margin:30px auto;
	display:block;
	width:758px;
	height:60px;
	line-height:60px;
	transition:all 0.5s;
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	cursor:pointer;
}
#Submit .SubmitBtn:hover{
	opacity:0.68;
}
#Submit div.SubmitBtn,#Submit div.SubmitBtn:hover{
	border-color:#CCCCCC;
	background:#EAEAEA;
	color:#AEAEAE;
	z-index:9;
	cursor:default;
}
@media screen and (max-width:640px) {
	#Submit{
		width:322px;
		height:52px;
		margin:0 auto 70px auto;
	}
	#Submit .SubmitBtn,#Submit .SubmitBtn:hover{
		margin:30px auto;
		width:320px;
		height:50px;
		line-height:50px;
	}
}



/* submit [confirm] */
#SubmitConfirm{
	width:760px;
	margin:30px auto;
}
#SubmitConfirm .SubmitBtn{
	text-align:center;
	border:none !important;
	border-radius:3px;
	font-size:15px;
	font-weight:bold;
	color:#FFFFFF;
	background:#3ABAD4;
	margin:30px auto;
	display:block;
	width:758px;
	height:60px;
	line-height:60px;
	transition:all 0.5s;
	cursor:pointer;
}
#SubmitConfirm .SubmitBtn:hover{
	opacity:0.68;
}
#SubmitConfirm .SubmitBtn_min{
	text-align:center;
	border:solid 1px #3ABAD4;
	border-radius:3px;
	font-size:13px;
	color:#3ABAD4;
	background:#FFFFFF;
	margin:30px auto;
	display:block;
	width:180px;
	height:36px;
	line-height:36px;
	transition:all 0.5s;
	cursor:pointer;
}
#SubmitConfirm .SubmitBtn_min:hover{
	opacity:0.68;
}
@media screen and (max-width:640px) {
	#SubmitConfirm{
		width:202px;
		margin:30px auto;
	}
	#SubmitConfirm .SubmitBtn,#SubmitConfirm .SubmitBtn:hover{
		margin:30px auto;
		width:200px;
		height:50px;
		line-height:50px;
	}
}










/*-----------------------
          error
-----------------------*/

.form_err{
	background-color:#EBC1C2 !important;
}
.form_err_radio label{
	background-color:#EBC1C2 !important;
	border-radius:3px !important;
}
.send_err{
	background-color:#EDD7D7 !important;
	width:80%;
	max-width:810px;
	margin:15px auto;
	padding:15px;
	border:solid 1px #DD2124;
	color:#DD2124;
}

.input_err{
	font-size:13px;
	color:#EE0000;
	margin:4px;
	display:none;
}
@media screen and (max-width:640px) {


}






/* 必須項目数メッセージ */
.message {
	background-color: rgba(255,255,255,0.7);
	width: 160px;
	height: auto;
	padding: 10px 3px;
	text-align: center;
	position: fixed;
	bottom:20px;
	left: 20px;
	font-size: 16px;
	line-height: 1.8em;
	font-weight: bold;
	border-radius:6px;
	z-index:10000;
	color:#444444;
	border:solid 1px #CCCCCC;
}
.message span{
	font-size:26px !important;
	color:#CC0000;

}
@media screen and (max-width:640px) {
	.message {
		background-color: rgba(255,255,255,0.7);
		width: 100%;
		height: auto;
		padding: 10px 0;
		text-align: center;
		position: fixed;
		bottom:0;
		left:0;
		font-size: 15px;
		line-height: 1.8em;
		font-weight: bold;
		border-radius:0;
		z-index:10000;
		color:#444444;
		border:none;
		border-top:solid 1px #CCCCCC;
	}
	.message span{
		font-size:22px !important;
		color:#CC0000;
		margin:0 4px;
	}
	.message br{
		display:none;
	}
}









address{
	font-size:12px;
	display:block;
	text-align:center;
	padding:12px 0;
	background:#3ABAD4;
	color:#FFFFFF;
	letter-spacing:1px;
	font-style:normal;
	margin-top:90px;
}
@media screen and (max-width:640px) {
	address{
		padding-bottom:64px;
		margin-top:0;
	}
	address.low{
		padding-bottom:12px;
		margin-top:0;
	}
}

.tx_read.max .area.bg_w{
	background: #fff;
}