@charset "shift_jis";

:root {
  --cl-white:#fff;
  --cl-gray:#efefef;	
  --cl-text: #333;
  --cl-pale: #e8e8ed;
  --cl-vivid: #003481;
  --cl-base: #e8eced;	
	--cl-base2: #b7b5cf;	
  --cl-dark: #244c5a;
	--font-en-title: 'Alegreya Sans SC', sans-serif;
	--font-en-title2: 'Alegreya Sans', sans-serif;
	--font-base:"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: 'BIZ UDPGothic', sans-serif;
  font-family: 'Sawarabi Gothic', sans-serif;
    font-family: 'Sawarabi Mincho', serif;
==============================================*/
/*==============================================
body
==============================================*/

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

body{
  text-align: center;
  font-size: 15px;
	font-family:'Sawarabi Gothic',  "sans-serif";
	color: var(--cl-text);
	background-color: var(--cl-white);
}
@media screen\0 {
  body {	 }
}



.pcNone{ display: none;}
.spNone{ display: inherit;}
@media screen and (max-width:600px) { 
.spNone{ display: none;}
.pcNone{ display: inherit;}
}


div.wrapper{
	width: 80%;
    margin: 0 auto;
    max-width: 1000px;
}

@media screen and (max-width:1094px) { 
div.wrapper{ width: 80%; max-width: 800px; }
}
@media screen and (max-width:600px) { 
div.wrapper{ width: 94%; }
}

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

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

h1 {
	width: 100%;
    padding: 23px 0 15px 2em;
	box-sizing: border-box;
}
h1 div p{
	width: 200px;
}
h1 div p a img{
	width: 100%;
	height: auto;
}





.head-obi{
	box-sizing: border-box;
	background-color: #EEEEEE;
    width: 100%;
	padding-top: 0.7em;
}
.head-obi div{
	background-color: var(--cl-white);
	width: 80%;
	margin: 0 auto;
	position: relative;
	padding: 3em 0 2em 0;
	opacity: 0.95;
}

			@media screen and (max-width:1050px) { 
				.head-obi div{width: 90%;}
			}
			@media screen and (max-width:700px) { 
				.head-obi{background-size: 40%;}
				.head-obi div{width: 93%; padding-top: 1em; padding-bottom: 1em}
			}


.head-obi div .titleimg{
	width: 65%;
	max-width: 700px;
	margin: 0 auto;
}

@media screen and (max-width:500px) { 
.head-obi div .titleimg{
		width: 80%;
	}
}


.head-obi div .titleimg img{
	width: 100%;
	height: auto;
	text-align: center;
}

.head-obi div .area{
	position: absolute;
	font-size: 25px;
}




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



/*
h2{ 
	font-family: 'Zen Antique Soft', serif;
    font-size: 55px;
    letter-spacing: 1px;
	color: #151aa9;
	line-height: 1.1;
}
h2 span{
	font-size: 80%;
    color: #E954A3;
    display: block;
    font-style: oblique;
} 

*/



::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;
}

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

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


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

.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%;
				}
		}

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: 30%; */
  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: 70%;
	  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: 93%;
    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:15px;
}
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;
}

p.done{
  padding: 10px;
  background-color: var(--cl-white);
  line-height: 1.7em;
}





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

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

	div.wrapper{
		width: 95%;
		margin: 0 auto;
	}
		
	h1{width: 100%;}
	h1 picture{
		width:60%;
	}
	h1 picture img{width: 100%; height: auto}
	
	


}
@media screen and (max-width:600px) {
  .sp_display{
    display: block;
  }
  .pc_display{
    display: none;
  }
  div.wrapper{
    width: 95%;
  }
  h1{
    font-size: 16px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.7em;
    margin: 0 auto;
    padding: 10px;
  }
  h1 img{
    width: 100%;
	  height: auto;
  }

    p.present span::before{
      content: '';
    }
    p.present span::after{
      content: '';
    }
  
  div.PhotoBox{
    padding: 10px;
    flex-wrap: wrap;
  }
  div.PhotoBox p{
  width: calc(100% / 2 - 10px);
  text-align: center;
  font-weight: normal;
    margin-top: 6px;
}

	div.PhotoBox p span{
  font-size: 12px;
  padding: 3px 0 0;
  display: inline-block;
  letter-spacing: 1px;
}

div.PhotoBox p img{
  width: 100%;
  border: 6px solid #fff;
}
	table.xf_block{
		border: 1px solid #ccc;
		
	}
    table.xf_block tr{
      display: block;
    }
	
    table.xf_block th{
      display: block;
      width: 100%;
      padding: 5px;
      text-align: left;
		border-right: none;
		border-left: none;

	}
	
    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;
    }
	
}


p.img-full{
	margin: 2em 0
}
				@media screen and (max-width:864px) {
					p.img-full{
						width: 90%;
						margin: 2em auto;
					}
					p.img-full img{
						width: 100%;
						height: auto;	}


				}

.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%;
			}
			}




table.table-normal{
	width: 100%;
	border:1px solid #ccc;
}
table.table-normal tr{
	display: flex;
	flex-wrap:wrap;
}

table.table-normal th{
	width:20%;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	padding: 10px 0;
}
table.table-normal td{
	width:80%;
	border-bottom:1px solid #ccc;
	text-align: left;
	padding: 10px 0 10px 2em;
	box-sizing: border-box;
}
table.table-normal tr:last-child th,
table.table-normal tr:last-child td{
	border-bottom:none;
}


			@media screen and (max-width: 600px) {
				table.table-normal td{
					padding: 10px 0 10px 10px;
					
				}
			}


.number-cont{ display: flex; flex-wrap: wrap; align-items: flex-end;}
.number-cont div{width: 50%; max-width:200px; }
.number-cont p{ padding-left: 1em; font-size: 19px;}