@charset "utf-8";


/*------------- reset -------------*/

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
form p .att {
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section,img {
display: block;
}

body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}



 
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
     font-size: 100%;
}
.serif {
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}

h1,h2,h3,h4,h5,h6{
	font-weight:normal;
	margin: 0;
	padding: 0;
}

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

html,body{
     height:100%;
}

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

.clr {	clear:both; }

.fr{ float:right;}

.fl{ float:left;}


a img:hover{ opacity:0.7;}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

html{ font-size:62.5%;}

body {
	font-size: 1.0rem;
	line-height: 1.8;
	color: #231815;

}

.wrap {
	margin: auto;
	width: 640px;
}
.wrap:after {
    content:" ";
    display:block;
    clear:both;
}

a{
	color: #231815;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}


.tab{ display:none;}
.tab640{display: none;}
.sp{ display:none;}
.ip{ display:none;}


.mb30{
	margin-bottom: 30px !important;
}



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

	.wrap {
		margin: auto;
		width: 100%;
		padding: 0 10px;
	}
}



/*--------------- form ------------------*/



button, input, select, textarea {
font-family : inherit;
font-size : 100%;
}


input[type="checkbox"],
input[type="radio"] {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

label {
  position: relative;
  display: block;
  word-break: break-all;
}
label input[type="checkbox"] + span,
label input[type="radio"] + span {
  position: relative;
  padding-left: 15px;
}

/*--- checkbox --*/

label input[type="checkbox"] + span::before {
  border-color: #6A3906;
}
label input[type="checkbox"]:checked + span::before {
  background-color: #6A3906;
}
label span {
  display: inline-block;
}
label input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
}
label input[type="checkbox"] + span::before,
label input[type="checkbox"] + span::after {
  position: absolute;
  top: 7px;
  left: 0;
  display: inline-block;
  content: '';
  box-sizing: border-box;
}
label input[type="checkbox"] + span::before {
  z-index: 0;
  background-color: transparent;
  width: 12px;
  height: 12px;
  border: 1px #313131 solid;
}
label input[type="checkbox"] + span::after {
  z-index: 1;
  margin: 2px 4px;
  width: 6px;
  height: 9px;
}
label input[type="checkbox"]:checked + span::before {
  background-color: #fff;
}
label input[type="checkbox"]:checked + span::after {
  border: 2px solid #313131;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

/*--- radio ----*/

label input[type="radio"] + span::before {
  border-color: #6A3906;
}
label span {
  display: inline-block;
}
label input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
}
label input[type="radio"] + span::before {
  position: absolute;
  display: inline-block;
  content: '';
  box-sizing: border-box;
	border: 1px solid #313131;
	border-radius: 50%;
}
label input[type="radio"] + span::before {
  z-index: 0;
  top: 5px;
  left: 0;
  background-color: transparent;
  width: 14px;
  height: 14px;

}
label input[type="radio"]:checked + span::before {
  border: 4px solid #313131;
}

/*-------- text email tel ---------*/

input[type="text"],
input[type="email"],
input[type="tel"] ,
textarea,select,
input[type=button],
input[type=submit]{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	padding:5px;
	background-color: #fff;
	border: 1px solid #c9c9c9;
	border-radius: 5px;

}

/*-------- select ------------*/

select {
	width: 200px;
	background-image: url(../images/contact_select_arr.png);
	background-repeat: no-repeat;
	background-position: 92% center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font-weight: bold;
}
select::-ms-expand {
    display: none;
}

input[type="text"],
input[type="email"],
input[type="tel"] ,
textarea{
	width: 100%;
	max-width: 100%;

}

textarea{
	resize: vertical;
    overflow: auto;
    height: 160px;
}


input[type=button],
input[type=submit]{
    padding: 10px 10px;
    font-size: 1.2em;
    background-color: #6a3906;
    color: #fff;
    border-style: none;
	cursor: pointer;
	
}
input[type=submit]:hover{
/*	opacity: 0.7;*/

}


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

	input[type="text"],
	input[type="email"],
	input[type="tel"] ,
	textarea{
		width: 100%;
	}
}


/* header
------------------------------------------- */


#header{
	background-color: #4c4c4c;
	padding: 5px 0 7px;
}


/*---------- section---------------*/


section p{
	font-size: 2rem;
	line-height: 1.5;
	color: #001111;
	margin-bottom: 15px;
}

.maru {
 height:36px;
 width:36px;
 border-radius:50%;
 line-height:37px;
 text-align:center;
	background-color: #ff4b46;
	font-size: 2.73rem;
	color: #fff;
	display: inline-block;
	margin-right: 22px;
}
#q04 .maru{
	margin-right: 11px;
}


section h2,
section .h2{
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 23px;
	line-height: 1.25;
}
section .h2,
#q01 h2,
#q02 h2,
#q03 h2{
	font-size: 2.2rem;	
	line-height: 1.36;
}
#q04 h2{
	font-size: 2.1rem;	
}

section h2 .att{
	font-size: 1.2rem;
	color: #fff;
	display: inline-block;
	background-color: #d55553;
	margin-left: 15px;
	letter-spacing: 0.25em;
	text-align: center;
	padding:4px 4px 4px 6px;
	position: relative;
	top: -4px;
	line-height: 1;
}
section .wrap{
	border-bottom: 1px solid #d1d2d4;
}
#q04 .wrap{
	border-bottom: none;
}


#sec_txt{
	background-image: url(../images/sec_txt_bg.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	padding: 59px 0 0px;
}
section .wrap{
	padding-top: 18px;
	padding-bottom: 50px;
}
#sec_txt .wrap{
	padding-bottom: 40px;
}

#sec_txt img{
	margin: auto;
	margin-bottom: 52px;
	max-width: 100%;
}
#sec_txt p span{
	color: #cc0000;
	font-size: 3rem;
}
.marker {
background: linear-gradient(transparent 60%, #ffc80b 60%);
}
section dl{
	padding: 0 0 0 10px;
}
#q00 dl{
	padding: 0;
}
section dl::after{
	content: "";
	display: block;
	clear: both;
}
section dl dt{
	font-size: 2.2rem;
}
#q00 dl dt{
	font-size: 2.4rem;
	float: left;
	clear: both;
}
#q00 dl dt{
	padding-left: 18px;
	padding-top: 6px;
	padding-bottom: 20px;
}

#q00 dl dd{
	padding-left: 212px;
	padding-bottom: 1px;
	
}
#q00 dl dd.sex{
	padding-top: 10px;
}
section dl dd::after{
	content: "";
	display: block;
	clear: both;
	
}
section select{
	width: 255px;
	height: 50px;
	border:1px solid #999999;
    background-image: url( ../images/select_arr.png);
	font-size: 2rem;
	font-weight: normal;
}
section input[type="text"], 
section input[type="email"], 
section input[type="tel"], 
section textarea{
	border:1px solid #999999;	
}
section input[type="text"], 
section input[type="email"], 
section input[type="tel"]{
	height: 50px;
}
#q00 .sex label{
	float: left;
	font-size: 2.4rem;
}
#q01 label + label{
	margin-left: 32px;
}

#q00 .sex label + label{
	margin-left: 41px;
}
#q00 input[type=text],
#q00 input[type=email]{
	width: 380px;
	max-width: 100%;
	font-size: 2rem;
}
#q01 label{
	float: left;
	font-size: 2.2rem;
	font-weight: bold;

}
section label input[type="radio"] + span{
	padding-left: 0;
}
section label input[type="radio"] + span::before{
	width: 24px;
	height: 24px;
	border: 1px solid #999999;
	background-color: #fafafa;
	border-radius: 50%;
	position: relative;
	top: 3px;
	margin-right: 18px;
}
section label input[type="radio"]:checked + span::before{
	border: 7px solid #999999;
}
section label input[type="checkbox"] + span{
	font-size: 2.2rem;
	padding-left: 50px;
}
section label input[type="checkbox"] + span::before{
	width: 24px;
	height: 24px;
	border: 1px solid #999999;
	background-color: #fafafa;
	border-radius: 5px;
}
section label input[type="checkbox"]:checked + span::before{
	background-color: #fafafa;
	
}
section label input[type="checkbox"] + span::after{
	margin: 2px 7px;
    width: 10px;
    height: 14px;
}
section textarea{
	height: 310px;
	width: calc(100% - 20px);
	margin: auto 10px;
	font-size: 2rem;
}
section h2::after{
	content: "";
	display: block;
	clear: both;
}

section h2 .h2box,
section h2 .h2box02{
	float: left;
}
section h2 .h2box{
	width: 58px;
}
#q04 h2 .h2box{
	width: 47px;
}
section h2 .h2box02{
	width: calc( 100% - 58px);
}
#q04 h2 .h2box02{
	width: calc( 100% - 47px);
}

section .wrap{
	padding-top: 30px;
}

.form_btn{
	width: 640px;
	text-align: center;
	margin: 50px auto 115px;
}
.form_btn input[type=button],
.form_btn input[type=submit]{
	background-color: #339933;
	width: 477px;
	height: 71px;
	font-size: 2.4rem;
	font-weight: bold;
	max-width: 100%;
}
.form_btn input[type=button]:hover,
.form_btn input[type=submit]:hover{
	opacity: 0.7;
}

#sec_txt .imgbox{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}
#sec_txt .imgbox img{
	width: 33%;
	height: auto;
	margin: inherit!important;
}
#sec_txt .imgbox div{
	width: 67%;
}


/*-------------------- footer ----------------------*/


#footer{
	text-align: center;
	background-color: #000000;
	color: #fff;
	font-size: 1.2rem;
	padding: 33px 0 48px;
	letter-spacing: 0.075em;
}
#footer p{
	margin-bottom: 3px;
}
#footer ul{
	text-align: center;
	margin-bottom: 3px;
}
#footer ul li{
	display: inline-block;
}
#footer ul li::after{
	content: "|";
	display: inline-block;
	margin-left: 8px;
	margin-right: 2px;
}
#footer ul li:last-of-type::after{
	content: none;
}
#footer ul li a{
	color: #fff;
	text-decoration:none;
}
#footer ul li a:hover{
	text-decoration:underline;
}

/*---------------- 768 ----------------*/

@media screen and (max-width: 768px) {
	
	.tellink a{
		color: #fff;
	}
	
	.tab{
		display: block;
	}

	.form_btn{
		width: 100%;
		padding:  0 10px;
	}
}
/*---------------- 640 ----------------*/

@media screen and (max-width: 640px) {
	
	.tab640{
		display: block;
	}
	
	#sec_txt img{
		width: 100%;
	}
	
	#q00 dl dt{
		float: none;
		padding-bottom: 0;
		padding-left: 0;
	}
	#q00 dl dd{
		padding-left: 0;
		padding-bottom: 20px;
	}
	#q04 h2 br{
		display: none;
	}
	#sec_txt .imgbox{
		display: block;
	}
	#sec_txt .imgbox div{
		width: 100%;
	}
	#sec_txt .imgbox img{
		width: 30%;
		margin: 0 auto 5% auto!important;
	}

}
/*---------------- 425 ----------------*/

@media screen and (max-width: 425px) {
	
	.sp{
		display: block;
	}
	.mb30{
		margin-bottom: 15px !important;
	}
	
	section p{
		font-size: 1.8rem;
	}
	#sec_txt p span{
		font-size: 2.6rem;
	}
	.maru{
		margin-right: 10px;
	}
	section h2 .h2box{
		width: 46px;
	}
	section h2{
		font-size: 2.2rem;
	}
	section dl{
		padding: 0;
	}
	section dl dt{
		font-size: 2rem;
	}
	
	#q00 dl dt{
		font-size: 2rem;
	}
	#q00 .sex label{
		font-size: 2rem;
	}
	section label input[type="checkbox"] + span{
		font-size: 2rem;
	}

	#sec_txt {
		padding: 30px 0 0px;
	}
	section .wrap{
		padding-bottom: 20px;
	}
	#sec_txt .wrap{
		padding-bottom: 10px;
	}
	#sec_txt img {
		margin-bottom: 25px;
	}
	section label input[type="checkbox"] + span{
		padding-left: 35px;
	}
	.form_btn{
		margin: 20px auto 50px;
	}
	.form_btn input[type=button], .form_btn input[type=submit]{
		font-size: 2rem;
	}

}


/*---------------- 375 ----------------*/

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

	section p{
		font-size: 1.6rem;
	}
	#sec_txt p span{
		font-size: 2.4rem;
	}
	section .h2,
	section h2,
	#q01 h2, 
	#q02 h2, 
	#q03 h2,
	#q04 h2{
		font-size: 2.0rem;
	}
	section dl dt,
	#q00 dl dt,
	#q00 .sex label,
	section label input[type="checkbox"] + span,
	section select{
		font-size: 1.8rem;
	}	
	label input[type="checkbox"] + span::before, 
	label input[type="checkbox"] + span::after{
		top: 3px;
	}
	
}
/*---------------- 320 ----------------*/

@media screen and (max-width: 320px) {
	
	.ip{
		display: block;
	}

}

/*---------------------------------------------------

　　　　　　　　　confirm

----------------------------------------------------*/
.confirm #confirm_txt{
	padding: 60px 0 0;
}

.confirm #confirm_txt p{
	text-align: center;
}

.confirm section p,
.confirm section li,
.confirm section dd{
	font-size: 2.2rem;
}

.confirm #q00 dl dt{
	padding-top: 0;
}
.confirm section li{
	padding-left: 1em;
	text-indent: -1em;
}
.confirm section li::before{
	content: "・";
	display: inline;
}

.confirm .form_btn input{
	width: calc( 50% - 10px);
	float: left;
	margin: 0 5px;
	
}

.confirm .form_btn input[type=button]{
	background-color: #999999;
	
}

/*---------------- 425 ----------------*/

@media screen and (max-width: 425px) {
	
	.confirm #confirm_txt{
		padding-top: 30px;
		
	}
	.confirm .form_btn input{
		width: 100%;
		float: none;
		margin: 0 0 10px;

	}
	.confirm section p, .confirm section li, .confirm section dd{
		font-size: 2rem;
	}
}

/*---------------- 375 ----------------*/

@media screen and (max-width: 375px) {
	
	.confirm section p, .confirm section li, .confirm section dd{
		font-size: 1.8rem;
	}
}


/*---------------------------------------------------

　　　　　　　　　thanks

----------------------------------------------------*/


.thanks section{
	padding: 150px 0;
}
.thanks section{
	height: 100%;
}
.thanks section .wrap{
	border: none;

}
.thanks section p{
	text-align: center;
}

.thanks{
	position: relative;
	height: 100%;
}

.thanks #footer{
	position: absolute;
	width: 100%;
	bottom: 0;
}
@media all and (-ms-high-contrast: none) {
	.thanks #header{
		position: absolute;
		width: 100%;
		top: 0;
	}
}

/*---------------- 425 ----------------*/

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

	.thanks section{
		padding: 100px 0;
	}
	.thanks #footer {
		position: static;
	}

}


/*---------------- 375 ----------------*/

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

	.thanks section{
		padding: 92px 0;
	}

}

/*---------------- 360 ----------------*/

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

	.thanks section{
		padding: 70px 0;
	}

}
/*---------------- 320 ----------------*/

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

	.thanks section{
		padding: 50px 0;
	}

}













/*---------------- radio →　checkbox -------------------------*/



#q02 label input[type="radio"] + span,
#q03 label input[type="radio"] + span,
#q04 label input[type="radio"] + span,
#q05 label input[type="radio"] + span{
	font-size: 2.4rem;
	padding-left: 42px;
	text-indent: -42px;
}

#q01 label input[type="radio"] + span::before,
#q02 label input[type="radio"] + span::before,
#q03 label input[type="radio"] + span::before,
#q04 label input[type="radio"] + span::before,
#q05 label input[type="radio"] + span::before{
	border-radius:5px;
}

.confirm section li::before{
	content: none;
}
.confirm section li {
    padding-left: 0;
    text-indent: 0;
}


/*---------------- 425 ----------------*/

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

	#q02 label input[type="radio"] + span,
	#q03 label input[type="radio"] + span,
	#q04 label input[type="radio"] + span,
	#q05 label input[type="radio"] + span{
		font-size: 2rem;
	}
	
}

/*---------------- 375 ----------------*/

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

	#q02 label input[type="radio"] + span,
	#q03 label input[type="radio"] + span{
		font-size: 1.8rem;
		padding-left: 34px;
		text-indent: -34px;
	}

	#q01 label input[type="radio"] + span::before{
		top: 4px;
	}
	#q02 label input[type="radio"] + span::before,
	#q03 label input[type="radio"] + span::before{
		top: 7px;
		margin-right: 10px;
	}	
	
}






/*------------------
footer
----------------------*/

#spt_footer {
	color: #FFF;
	background-color: #000;
	padding: 15px;
    margin-top: 100px;
}

#spt_footer .link {
	font-size: 1.2rem;
	line-height: 130%;
	text-align: center;
}

#spt_footer .link a {
	color: #FFF;
	text-decoration: none;
    padding: 10px;
}

#spt_footer .link a:hover {
	text-decoration: underline;
	color: #999;
}

#spt_footer .copy {
    color: #FFF;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-top: 25px;
    width: 753px;
    text-align: left;
    margin: 30px auto 0;
    padding-left: 88px;
}

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

	#spt_footer {
		color: #FFF;
		background-color: #000;
		padding: 15px;
		overflow: hidden;
	}

	#spt_footer .link {
		font-size: 1.2rem;
		line-height: 130%;
		text-align: center;
	}

	#spt_footer .link a {
		color: #FFF;
		text-decoration: none;
	}

	#spt_footer .link a:hover {
		text-decoration: underline;
		color: #999;
	}

	#spt_footer .copy {
		text-align: center;
		color: #FFF;
		font-size: 1.2rem;
		line-height: 1.6;
		margin-top: 25px;
		padding-left: 0;
	}

	.pc,.sp{display: none;}
	.pc_video{display: block;}
	.tb{display: inline-block;}



}


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

	#spt_footer {
		color: #FFF;
		background-color: #000;
		padding: 15px;
	    margin-top: 10%;
	}
	#spt_footer span {
		display: block;
	}
	#spt_footer .link {
		font-size: 1.4rem;
		line-height: 130%;
		text-align: center;
	}

	#spt_footer .link a {
		color: #FFF;
		text-decoration: none;
	}

	#spt_footer .link a:hover {
		text-decoration: underline;
		color: #999;
	}

	#spt_footer .copy {
		text-align: center;
		color: #FFF;
		font-size: 1.2rem;
		line-height: 1.6;
		margin-top: 25px;
	    width: auto;
	    padding: 0;
	}

}