@charset "utf-8";



:root {
  --cl-white:#fff;
  --cl-gray:#efefef;	
  --cl-text: #333;
  --cl-pale: #f5f2eb;
  --cl-vivid:#bb1e5e;
  --cl-base: #e8eced;	
	--cl-base2: #6c6c6c;	
  --cl-dark: #af2450;
	--font-en-title: 'Funnel Sans', sans-serif;
	--font-base:"Zen Kaku Gothic Antique","Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	--font-en-text:	Arial, Helvetica,"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}


/*==============================================
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-family: "Funnel Sans", sans-serif;

==============================================*/

/*==============================================
body
==============================================*/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  text-align: center;
  font-size: 16px;
	font-family:var(--font-base);
	color: var(--cl-text);
	background-color: var(--cl-white);
}
@media screen\0 {
  body {	 }
}


#main{
	width: 95%;
    margin: 0 auto;
    max-width: 950px;
}
			@media screen and (max-width:600px) { 
				#main{ width: 94%; margin: 0 auto;}

			}

.flex{
	display: flex;
	flex-wrap: wrap;
}
p{
	letter-spacing: 2px;
	line-height: 1.6;
}




/*headeer
------------------------------------------------------------------------------*/
.wrapper div.header{
	width:100%;
	padding:7px 0;
	background-color:#231815;
	text-align:center;}


.wrapper div.header img{
	width:150px;
	height:auto;
	
}


/*footer
------------------------------------------------------------------------------*/
footer{
	margin-top:70px;
	background-color:#231815;
	padding:50px 0;
	text-align:center;}

footer p{
	color:#fff;
	font-size:12px;
letter-spacing: 1px;}


/*==============================================
common
==============================================*/

h1 {
	width: 100%;
	box-sizing: border-box;
	font-size: 25px;
	padding: 50px 0 15px 0;
}

@media screen and (max-width:800px) { 
	h1 {
	}
}
@media screen and (max-width:500px) { 
}




::placeholder{	color:#D4D4D4;}

div.wrapper h1 span{
  border-bottom: 1px solid #17656a;
}
p.front{
	letter-spacing: 2px;
    padding: 17px 0 4px 0px;
	font-size: 15px;
	color: #5e5742;
	font-weight: bold;
}

table.xf_block td .front:first-of-type{padding-top: 5px}

.em-fr{font-weight: bold;	}



@media screen and (max-width:500px) { p.front{font-size: 14px;} }


p.back{
    width: 90%;
    margin-top: 0.2em;
    box-sizing: border-box;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--cl-dark);
	background-color:#fdeaeb;
	padding: 0.5em;
}

@media screen and (max-width:700px) { p.back{width: 100%;} }


.short{	width: 30%;}
@media screen and (max-width:1200px) { .short{	width: 40%;} }
@media screen and (max-width:500px) { .short{	width: 55%;} }

.short2{width: 40%;}
@media screen and (max-width:800px) { .short2{width: 60%;} }
@media screen and (max-width:500px) { .short2{width: 80%;} }
@media screen and (max-width:400px) { .short2{width: 90%;} }


/*==============================================
common
==============================================*/

.flexbox{ display: flex; flex-wrap: wrap;}
.flexbox .wid50{ width: 44%; margin-right: 1em}

.radioBoxArea{
	display: flex;
	flex-wrap: wrap;
}
.radioBoxArea .radioBox{
	width: 30%;
}
		@media (max-width:600px) {
				.radioBoxArea .radioBox{
					width: 45%;
				}
		}

.checkBoxArea{
	display: flex; 
	flex-wrap: wrap;     
	margin: 10px 0;
}



table.xf_block {
	margin: 2em 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  border-top: 1px solid #ccc;
  text-align: left;
}
table.xf_block th {
	width: 20%;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: bold;
  padding: 0 20px;
  text-align: left;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid #cccccc;
  border-left: none;
}

table.xf_block th span.xf_essential{
border-radius: 3px;
    margin-left: 0.5em;
    background-color: var(--cl-white);
    color: var(--cl-vivid);
    padding: 2px 5px;
    font-size: 10px;
    letter-spacing: 2px;
    border: 1px solid var(--cl-vivid);
}

table.xf_block th.xf_table_title{
    font-size: 18px;
    padding: 10px 0 10px 10px;
    border-left: none;
    background-color: var(--cl-base2);
    color: var(--cl-white);
    border: none;
    letter-spacing: 3px;
}

table.xf_block td{
	box-sizing: border-box;
	width: 80%;
	  padding: 20px 0 20px 20px;
	  border-bottom: 1px solid #cccccc;
	  border-left: none;
	  border-right: none;
	  border-top: none;
}
input[type="text"], input[type="tel"], input[type="email"], textarea{
	width: 100%;
    padding: 13px;
    border: 1px solid var(--cl-pale);
    border-radius: 2px;
    background: var(--cl-pale);
    font-size: 16px;
    line-height: 1.3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    display: inline-block;
 	border-radius: 10px;
}

input[type="radio"],input[type="checkbox"]{
     margin-bottom: 12px;
    margin-right: 5px;
}
input[type="radio"]{
  margin-top: 10px;
}
input[type="radio"] + label{
  font-size: 16px;
}



input[type=checkbox] :checked+label::before {
background: cornflowerblue;
}


input[type=checkbox] + label{
	font-size: 15px;
    letter-spacing: 1px;
    margin-right: 14px;
}

input[type=checkbox]:checked + label, input[type="radio"]:checked + label{
  font-weight:bold;
  color: var(--cl-vivid);
	background-color: var(--cl-pale);
}

div.zip input[type="text"] {
  width: 250px;
}

select {
	  width: 100%;
	  padding: 13px 0 13px 12px;
	  font-size: 1em;
	border-radius: 10px;
	border: 1px solid var(--cl-pale);
	font-weight: bold;
	background-color: var(--cl-pale);
}

input[type="submit"] ,
input[type="button"] {
	display: inline-block;
    text-decoration: none;
    background: var(--cl-vivid);
    border: 1px solid var(--cl-vivid);
    color: #FFF;
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
    margin: 30px auto;
    padding: 18px 0;
    transition: 0.7s;
    width: 41%;
}

@media screen and (max-width:600px) {input[type="submit"] {width: 65%}}

input[type="submit"]:hover{
  background: #523473;
  border: 1px solid #523473;
}






@media screen and (min-width:769px) {
	.pc_display{
		display: block;
	}
	.sp_display{
		display: none;
	}
}

@media screen and (max-width:600px) {
  .sp_display{
    display: block;
  }
  .pc_display{
    display: none;
  }
	
	table.xf_block{
		
	}
    table.xf_block tr{
      display: block;
    }
	
    table.xf_block th{
        width: 100%;
        padding: 16px 0px 17px 0;
        text-align: left;
        border-right: none;
        border-left: none;
        display: flex;
        align-items: flex-end;

	}
	
	
	       
	
	
    table.xf_block td{
      display: block;
      width: 100%;
      padding: 15px 10px;
		border-right: none;
		border-left: none;
		
    }
 
	input[type="text"], input[type="tel"], input[type="email"], textarea{
      width: 100%;
      box-sizing: border-box;
      padding: 9px 13px;
      border: 1px solid #ACACAC;
      border-radius: 4px;
      background: #FFF;
      font-size: 16px;
      line-height: 1.3;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;
      display: inline-block;
    }
	
}



.googlemapArea{
	clear:both;
	text-align:center;
	margin:50px auto;
	}
	
.googlemap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
margin:0 auto;
}
.googlemap iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
	height: 500px;
}


			@media screen and (max-width: 1024px) {
			.googlemap {
			width: 100%;
			}
			.googlemap iframe {
			height: 100%;
			}
			}



/*====================
part
======================*/

.note{
    width: 95%;
    max-width: 700px;
    margin: 0 auto;	
	text-align: center!important;
}

.target-item{ flex-direction: row-reverse;}
.target-item .text{width: 75%; box-sizing: border-box; padding-right: 1em;}
.target-item .text table.itemtable{ background-color: #F4EFE6; margin: 15px 0; width: 100%;}
.target-item .text table.itemtable th{ padding: 0 5px 0 10px; font-size: 15px; border-bottom:none; width: 30%; text-align: center;}
.target-item .text table.itemtable td{ padding: 5px 0 5px 0 ; font-size: 15px; border-bottom:none; width: 70%;}
.target-item .img{width: 25%;}
.target-item .img img{width: 100%; height: auto; max-width: 100px;}

			@media screen and (max-width: 800px) {
			.target-item{flex-direction: row;}
			.target-item .text{width: 75%; box-sizing: border-box; padding-left: 1em; padding-right: 0;}
			.target-item .text table.itemtable{ background-color: #F4EFE6; margin-bottom: 15px; width: 100%;}
			.target-item .text table.itemtable th{ padding: 0 0 0 0; font-size: 13px; border-bottom:none; width: 100%; display: block; text-align: left;}
			.target-item .text table.itemtable td{ padding: 5px 0 5px 0 ; font-size: 14px; border-bottom:none;width: 100%; display: block;}
			.target-item .img{width: 25%;}
			.target-item .img img{width: 100%; height: auto; max-width: 100px;}
			}

.flexbox-container .flex-mass{
	display:flex;
	align-items: flex-end;
	margin-bottom: 10px;
}
.flexbox-container .flex-mass .item{ padding-right: 10px;}
.flexbox-container .flex-mass .figure{}
.flexbox-container .flex-mass .figure select{width: 4em;}
.flexbox-container .flex-mass .counter{padding-left: 10px;}

.name-flex{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.name-flex .nbox{
	width: 49%;
}
.name-flex .nbox input[type=text]{
    width: 100%;
	
}
@media screen and (max-width: 550px) { 
.name-flex .nbox{	width: 100%;}}


.flow{
	width: 95%;
	max-width: 600px;
   
    margin: 4em auto 2em auto;
}
.flow-title{
	font-weight: bold;
	    font-size: 20px;
}
.flow ul{
	border:1px solid  #c5bfbf; 
}
.flow ul li{
	list-style-type: none;
    font-weight: bold;
    border-bottom: 1px solid #c5bfbf;
	padding: 0 0 10px 0;
}
.flow ul li:last-of-type{
    border-bottom: none;
	
}


.flow ul li span{
	text-align: center;
    font-size: 23px;
    font-weight: bold;
    color: #a39999;
	margin-right: 5px;
}

.flow ul li p{
	margin: 15px 0;
    color: #EF2327;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
    line-height: 1.2;
	    
}

.flow address{
	margin-top: 15px;
}

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