/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:20px;
font-family: 'BIZ UDPGothic', sans-serif;
	LINE-HEIGHT: 180%;
	text-align: center;
	font-weight: 400;
	background: #fff;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
	height:auto;
	margin:0px auto;
	padding:0;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height:0;
}

img{
	border:0;
}
@media only screen and (max-width: 479px) {
img{
	border:0;
	max-width: 100%;
}
}

a:link,a:visited{
	outline:0;
	color:#333;
}

a:hover{
	outline:0;
	color: #75d0d0;
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

br.sp,br.spt,br.spt2,.nsp{
	display:inherit;
}
br.sm,br.smt,br.smm,br.smm2,br.spm,.nst,.nss,br.smm3{
	display:none;
}
@media only screen and (max-width: 1080px) {
br.sp,br.spm,br.smm,.smm,br.smm2,.nsp,.nss,.nsm,br.smm3{
	display:none;
}
br.spt,br.sm,br.smt,.nst{
	display:inherit;
}
}
@media only screen and (max-width: 640px) {
br.spt,br.smt,br.smm2,.nsp,.nst,.nsm,br.smm3{
	display:none;
}
br.spm,br.smm,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 480px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2,br.smm3{
	display:none;
}
br.spm,br.smm,br.smm2,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 414px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2{
	display:none;
}
br.spm,br.smm,br.smm2,.nss,br.smm3{
	display:inherit;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:10px 3% 10px 3%;
text-align: left;
}
@media only screen and (max-width: 1080px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:10px 0 10px 0;
text-align: left;
position:sticky;
top:0;
left: 0;
background: #fff;
z-index: 9999;
}
}

header img{
max-width: 20%;
}
@media only screen and (max-width: 1080px) {
header img{
max-width: 25%;
margin: 0 0 10px 3%;
}
}
@media only screen and (max-width: 835px) {
header img{
max-width: 30%;
}
}
@media only screen and (max-width: 640px) {
header img{
max-width: 35%;
margin: 0 0 10px 3%;
}
}
@media only screen and (max-width: 480px) {
header img{
max-width: 45%;
margin: 0 0 10px 3%;
}
}

/*メニュー
--------------------------------------------------------------------------*/
menu{
float: right;
width: 80%;
height: auto;
margin: 0;
padding: 35px 0 0 5%;
text-align: left;
}
@media only screen and (max-width: 1280px) {
menu{
float: right;
width: 80%;
height: auto;
margin: 0;
padding: 25px 0 0 5%;
text-align: left;
}
}
@media only screen and (max-width:1080px) {
menu{
clear: both;
float: right;
width: 100%;
height: auto;
margin: 0;
padding: 0 0% 0 0%;
text-align: left;
}
}

menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
menu li{
float: left;
list-style-type: none;
margin: 0 5% 0 0;
padding: 0;
text-align: left;
font-size: 20px;
line-height: 100%;
}
menu li a:link,menu li a:visited{
color: #111;
text-decoration: none;
}
menu li a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 1280px) {
menu li{
float: left;
list-style-type: none;
margin: 0 5% 0 0;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 100%;
}
}
@media only screen and (max-width:1080px) {
menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
border-top:1px solid #666;
border-left:1px solid #666;
border-bottom:1px solid #666;
}
menu li{
width: 25%;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
text-align:center;
font-size: 13px;
line-height: 100%;
border-right:1px solid #666;
}
menu li a:link,menu li a:visited{
display: block;
padding: 15px 0 12px;
text-align: center;
}
}
@media only screen and (max-width: 414px) {
menu li{
width: 25%;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
text-align:center;
font-size: 12px;
line-height: 100%;
border-right:1px solid #666;
}
menu li a:link,menu li a:visited{
display: block;
padding: 20px 0 17px;
text-align: center;
}
}

header menu img{
max-width: 20%;
margin: -20px 0 0;
}
@media only screen and (max-width: 1280px) {
header menu img{
max-width: 25%;
margin: -20px 0 0;
}
}
@media only screen and (max-width: 1080px) {
header menu img{
max-width:45%;
margin: 0;
position: fixed;
top:10px;
right: 10px;
}
}
@media only screen and (max-width: 640px) {
header menu img{
max-width:45%;
margin: 0;
position: fixed;
top:10px;
right: 10px;
}
}

/*main
--------------------------------------------------------------------------*/
#photo,#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 50px 5% 50px;
background: url(image/photo-back.webp) no-repeat left top/100% 100%;
}
#photo img,#photo2 img{
max-width: 60%;
margin: 70px 0 0;
}
@media only screen and (max-width: 835px) {
#photo,#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 20px 5% 50px;
background: url(image/photo-back.webp) no-repeat left top/150% 100%;
}
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 50px 5% 20px;
background: url(image/photo-back.webp) no-repeat left top/100% 100%;
}
#photo img,#photo2 img{
max-width: 100%;
margin: 40px 0 0;
}
}
@media only screen and (max-width: 480px) {
#photo,#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 3% 40px;
background: url(image/photo-back.webp) no-repeat left top/100% 100%;
}
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 30px 3% 5px;
background: url(image/photo-back.webp) no-repeat left top/100% 100%;
}
#photo img,#photo2 img{
max-width: 100%;
margin: 0;
}
}
@media only screen and (max-width: 414px) {
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 30px 3% 0;
background: url(image/photo-back.webp) no-repeat left top/100% 100%;
}
}

#photo-text{
clear: both;
float: left;
width: 40%;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
@media only screen and (max-width: 835px) {
#photo-text{
clear: both;
float: left;
width: 100%;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
}
@media only screen and (max-width: 640px) {
#photo-text{
clear: both;
float: left;
width: 100%;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
}
@media only screen and (max-width: 480px) {
#photo-text{
clear: both;
float: left;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
}

#photo h1,#photo2 h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 150%;
font-weight: 700;
font-size: 50px;
color: #0d304c;
}
#photo p,#photo2 p{
text-align: left;
line-height: 150%;
margin: 0 0 30px;
padding: 0;
font-size: 15.5px;
color: #0d304c;
}
@media only screen and (max-width: 1440px) {
#photo h1,#photo2 h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 150%;
font-weight: 700;
font-size: 40px;
color: #0d304c;
}
#photo p,#photo2 p{
text-align: left;
line-height: 150%;
margin: 0 0 30px;
padding: 0;
font-size: 13px;
color: #0d304c;
}
}
@media only screen and (max-width: 1080px) {
#photo h1,#photo2 h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 150%;
font-weight: 700;
font-size: 32px;
color: #0d304c;
}
}
@media only screen and (max-width: 835px) {
#photo h1,#photo2 h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
line-height: 150%;
font-weight: 700;
font-size: 40px;
color: #0d304c;
}
}
@media only screen and (max-width: 480px) {
#photo h1,#photo2 h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align:center;
line-height: 130%;
font-weight: 700;
font-size: 35px;
color: #0d304c;
}
#photo p,#photo2 p{
text-align: center;
line-height: 150%;
margin: 0 0 30px;
padding: 0;
font-size: 13px;
color: #0d304c;
}
}
@media only screen and (max-width: 414px) {
#photo h1,#photo2 h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align:center;
line-height: 130%;
font-weight: 700;
font-size: 30px;
color: #0d304c;
}
}

#photo #photo-text img,#photo2 #photo-text img{
max-width: 100%;
margin: 0 0 20px;
mix-blend-mode:Multiply;
}
@media only screen and (max-width: 835px) {
#photo #photo-text img,#photo2 #photo-text img{
max-width: 48%;
margin: 0 1% 0;
mix-blend-mode:Multiply;
}
}
@media only screen and (max-width: 480px) {
#photo #photo-text img,#photo2 #photo-text img{
display: none;
max-width: 100%;
margin: 0 0 20px;
mix-blend-mode:Multiply;
}
}

#service{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0;
text-align: center;
}
@media only screen and (max-width: 1080px) {
#service{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 0;
text-align: left;
}
}
@media only screen and (max-width: 640px) {
#service{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 20px 0;
text-align: left;
}
}
@media only screen and (max-width: 480px) {
#service{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 0 10px;
text-align: center;
}
}

#service h2{
clear: both;
float: left;
width: 100%;
margin: 0 0 70px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 70px;
background: url(image/h-back.png) no-repeat center bottom;
}
#service h2 span{
font-weight: 400;
font-size: 25px;
}
@media only screen and (max-width: 1080px) {
#service h2{
clear: both;
float: left;
width: 100%;
margin: 0 0 60px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 60px;
background: url(image/h-back.png) no-repeat center bottom;
}
#service h2 span{
font-weight: 400;
font-size: 25px;
}
}
@media only screen and (max-width: 640px) {
#service h2{
clear: both;
float: left;
width: 100%;
margin: 0 0 50px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 50px;
background: url(image/h-back.png) no-repeat center bottom;
}
#service h2 span{
font-weight: 400;
font-size: 25px;
}
}
@media only screen and (max-width: 480px) {
#service h2{
clear: both;
float: left;
width: 100%;
margin: 0 0 50px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 45px;
background: url(image/h-back.png) no-repeat center bottom;
}
#service h2 span{
font-weight: 400;
font-size:20px;
}
}
@media only screen and (max-width: 414px) {
#service h2{
clear: both;
float: left;
width: 100%;
margin: 0 0 40px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 40px;
background: url(image/h-back.png) no-repeat center bottom;
}
#service h2 span{
font-weight: 400;
font-size:16px;
}
}

#se1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0 5% 0 50%;
text-align: left;
background: url(image/se1.webp) no-repeat left top/45%;
}
#se2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 50% 0 5%;
text-align: left;
background: url(image/se2.webp) no-repeat right top/45%;
}
@media only screen and (max-width: 1080px) {
#se1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 450px 5% 0 5%;
text-align: center;
background: url(image/se1.webp) no-repeat center top/80%;
}
#se2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 450px 5% 0 5%;
text-align:center;
background: url(image/se2.webp) no-repeat center top/80%;
}
}
@media only screen and (max-width: 640px) {
#se1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 300px 5% 0 5%;
text-align: center;
background: url(image/se1.webp) no-repeat center top/85%;
}
#se2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 300px 5% 0 5%;
text-align:center;
background: url(image/se2.webp) no-repeat center top/85%;
}
}
@media only screen and (max-width: 480px) {
#se1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 250px 3% 0;
text-align: left;
background: url(image/se1.webp) no-repeat center top/90%;
}
#se2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 50px;
padding:250px 3% 0;
text-align: left;
background: url(image/se2.webp) no-repeat center top/90%;
}
}
@media only screen and (max-width: 414px) {
#se1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 220px 3% 0;
text-align: left;
background: url(image/se1.webp) no-repeat center top/90%;
}
#se2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 30px;
padding:220px 3% 0;
text-align: left;
background: url(image/se2.webp) no-repeat center top/90%;
}
}

#service h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 15px 3% 12px 4%;
text-align: left;
line-height: 100%;
font-weight: 700;
font-size: 26px;
background: #f7f7f7;
border-left:20px solid #386487;
}
#service h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
font-weight: 400;
font-size: 20px;
line-height: 100%;
}
@media only screen and (max-width: 1080px) {
#service h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 20px;
padding: 0 0 5px;
text-align: left;
font-weight: 400;
font-size: 20px;
line-height: 100%;
border-bottom: 1px solid #666;
}
}
@media only screen and (max-width: 640px) {
#service h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 3% 12px 4%;
text-align: left;
line-height: 100%;
font-weight: 700;
font-size: 20px;
background: #f7f7f7;
border-left:20px solid #386487;
}
}
@media only screen and (max-width: 480px) {
#service h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 3% 12px 4%;
text-align: left;
line-height: 100%;
font-weight: 700;
font-size: 20px;
background: #f7f7f7;
border-left:15px solid #386487;
}
#service h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 20px;
padding: 0 0 5px;
text-align: left;
font-weight: 400;
font-size: 18px;
line-height: 100%;
border-bottom: 1px solid #666;
}
}
@media only screen and (max-width: 414px) {
#service h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 3% 12px 4%;
text-align: left;
line-height: 100%;
font-weight: 700;
font-size: 18px;
background: #f7f7f7;
border-left:10px solid #386487;
}
#service h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 20px;
padding: 0 0 5px;
text-align: left;
font-weight: 400;
font-size: 15px;
line-height: 100%;
border-bottom: 1px solid #666;
}
}

#service ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
}
#service li{
display: block;
float: left;
list-style-type: none;
font-size: 26px;
margin: 0 4% 15px 0;
padding: 5px 15px;
border: 2px solid #7ac38c;
text-align: center;
line-height: 100%;
}
#service li.bno{
clear: both;
}
#service li.la{
border: none;
font-size: 20px;
line-height: 100%;
margin: 0;
padding: 0;
text-align: left;
}
@media only screen and (max-width: 640px) {
#service li{
display: block;
float: left;
list-style-type: none;
font-size: 22px;
margin: 0 4% 15px 0;
padding: 5px 15px;
border: 2px solid #7ac38c;
text-align: center;
line-height: 100%;
}
}
@media only screen and (max-width: 480px) {
#service ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
}
#service li{
display: block;
float: left;
list-style-type: none;
font-size: 18px;
margin: 0 3% 15px 0;
padding: 5px 10px;
border: 2px solid #7ac38c;
text-align: center;
line-height: 100%;
}
#service li.la{
border: none;
font-size: 15px;
line-height: 100%;
margin: 0;
padding: 0;
text-align: left;
}
}
@media only screen and (max-width: 414px) {
#service li{
display: block;
float: left;
list-style-type: none;
font-size: 16px;
margin: 0 3% 10px 0;
padding: 5px 10px 3px;
border: 2px solid #7ac38c;
text-align: center;
line-height: 100%;
}
#service li.la{
border: none;
font-size: 14px;
line-height: 100%;
margin: 0;
padding: 0;
text-align: left;
}
}

#service p{
text-align: left;
line-height: 180%;
margin: 0 0 40px;
font-size: 20px;
}
#service p strong{
font-weight: 700;
font-size: 30px;
line-height: 200%;
}
@media only screen and (max-width: 640px) {
#service p{
text-align: left;
line-height: 180%;
margin: 0 0 30px;
font-size: 16px;
}
#service p strong{
font-weight: 700;
font-size: 25px;
line-height: 200%;
}
}
@media only screen and (max-width: 480px) {
#service p{
text-align: left;
line-height: 180%;
margin: 0 0 30px;
font-size: 15px;
}
#service p strong{
font-weight: 700;
font-size: 20px;
line-height: 170%;
}
}
@media only screen and (max-width: 414px) {
#service p{
text-align: left;
line-height: 180%;
margin: 0 0 30px;
font-size: 13px;
}
#service p strong{
font-weight: 700;
font-size: 18px;
line-height: 170%;
}
}

#service img{
margin: 0 2% 15px 0;
}
@media only screen and (max-width: 1080px) {
#service #se1 img{
float: left;
margin: 0 2% 15px 0;
max-height: 40px;
}
#service #se2 img{
float: left;
margin: 0 2% 15px 0;
max-height: 55px;
}
}
@media only screen and (max-width: 480px) {
#service #se1 img{
margin: 0 2% 15px 0;
max-height: 35px;
}
#service #se2 img{
margin: 0 2% 15px 0;
max-height: 45px;
}
}
@media only screen and (max-width: 414px) {
#service #se1 img{
margin: 0 2% 15px 0;
max-height: 30px;
}
#service #se2 img{
margin: 0 2% 15px 0;
max-height: 40px;
}
}

#office{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 80px 5% 60px;
background: #f7f7f7;
}
@media only screen and (max-width: 640px) {
#office{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 5% 30px;
background: #f7f7f7;
}
}
@media only screen and (max-width: 480px) {
#office{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 5% 40px;
background: #f7f7f7;
}
}

#office h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 70px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 70px;
background: url(image/h-back.png) no-repeat center bottom;
}
#office h5 span{
font-weight: 400;
font-size: 25px;
}
@media only screen and (max-width: 1080px) {
#office h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 60px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size:60px;
background: url(image/h-back.png) no-repeat center bottom;
}
}
@media only screen and (max-width: 640px) {
#office h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 50px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size:50px;
background: url(image/h-back.png) no-repeat center bottom;
}
}
@media only screen and (max-width: 480px) {
#office h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 50px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 45px;
background: url(image/h-back.png) no-repeat center bottom;
}
#office h5 span{
font-weight: 400;
font-size: 20px;
}
}
@media only screen and (max-width: 414px) {
#office h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 30px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 40px;
background: url(image/h-back.png) no-repeat center bottom;
}
#office h5 span{
font-weight: 400;
font-size: 16px;
}
}

address{
font-style: normal;
margin: 0;
padding: 0;
text-align: center;
line-height: 200%;
font-size: 20px;
}
address strong{
font-size: 25px;
line-height: 250%;
}
@media only screen and (max-width: 640px) {
address{
font-style: normal;
margin: 0;
padding: 0;
text-align: center;
line-height: 200%;
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
address{
font-style: normal;
margin: 0;
padding: 0;
text-align: center;
line-height: 200%;
font-size: 15px;
}
address strong{
font-size: 20px;
line-height: 250%;
}
}
@media only screen and (max-width: 414px) {
address{
font-style: normal;
margin: 0;
padding: 0;
text-align: center;
line-height: 200%;
font-size: 13px;
}
address strong{
font-size: 20px;
line-height: 250%;
}
}

#map{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#map iframe{
width: 100%;
height: 500px;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 640px) {
#map iframe{
width: 100%;
height: 400px;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 480px) {
#map iframe{
width: 100%;
height: 350px;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 414px) {
#map iframe{
width: 100%;
height: 250px;
margin: 0;
padding: 0;
}
}

#toi{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 70px 0 50px;
}
@media only screen and (max-width: 1080px) {
#toi{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 30px;
}
}
@media only screen and (max-width: 640px) {
#toi{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 60px 0 30px;
}
}
@media only screen and (max-width: 480px) {
#toi{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 30px;
}
}
@media only screen and (max-width: 414px) {
#toi{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 0px;
}
}

#toi h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 70px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 70px;
background: url(image/h-back.png) no-repeat center bottom;
}
#toi h5 span{
font-weight: 400;
font-size: 25px;
}
@media only screen and (max-width: 1080px) {
#toi h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 40px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 60px;
background: url(image/h-back.png) no-repeat center bottom;
}
}
@media only screen and (max-width: 640px) {
#toi h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 40px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 50px;
background: url(image/h-back.png) no-repeat center bottom;
}
}
@media only screen and (max-width: 480px) {
#toi h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 50px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 45px;
background: url(image/h-back.png) no-repeat center bottom;
}
#toi h5 span{
font-weight: 400;
font-size: 20px;
}
}
@media only screen and (max-width: 414px) {
#toi h5{
clear: both;
float: left;
width: 100%;
margin: 0 0 20px;
padding: 0 0 10px;
text-align: center;
line-height: 100%;
font-weight: 700;
font-size: 40px;
background: url(image/h-back.png) no-repeat center bottom;
}
#toi h5 span{
font-weight: 400;
font-size: 16px;
}
}

#mail-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 25%;
}
@media only screen and (max-width: 1440px) {
#mail-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0;
padding: 0 20%;
}
}
@media only screen and (max-width: 1080px) {
#mail-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0;
padding: 0 15%;
}
}
@media only screen and (max-width: 835px) {
#mail-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 10%;
}
}
@media only screen and (max-width: 640px) {
#mail-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 5%;
}
}
@media only screen and (max-width: 480px) {
#mail-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3%;
}
}

table {
	clear:both;
	width:80%;
	margin:0 10% 30px;
    border:1px solid #999;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
}
table.form{
width:100%;
margin:5px 0 30px;
}
th,td{
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	padding: 10px 2%;
	font-size: 17px;
	}
th{
	width:30%;
	background:#f7f7f7;
	text-align:right;
	font-weight: normal;
	font-size: 17px;
}
@media only screen and (max-width: 1080px) {
th,td{
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	padding: 10px 2%;
	font-size: 15px;
	line-height: 120%;
	}
th{
	width:30%;
	background:#f7f7f7;
	text-align:right;
	font-weight: normal;
	font-size: 15px;
	line-height: 120%;
}
}
@media only screen and (max-width: 480px) {
th,td{
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	padding: 10px 2%;
	font-size: 13px;
	line-height: 120%;
	}
th{
	width:30%;
	background:#f7f7f7;
	text-align:right;
	font-weight: normal;
	font-size: 13px;
	line-height: 120%;
}
}

.hissu{
	font-size: 11px;
	background: #386487;
	margin: 0 0 0 5px;
	padding: 3px 5px;
	color: #fff;
}
input[type="text"],input[type="email"]{
	width: 100%;
}
input[type="submit"]{
width: 20%;
margin: 0 2%;
padding: 10px 5px 8px;
background: #e8744f;
border-radius: 8px;
color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}
input[type="reset"]{
background: #8a929d;
margin: 0 2%;
padding: 5px 7px 3px;
border-radius: 5px;
color: #fff;
border: none;
font-size: 15px;
cursor: pointer;
}
textarea{
	width: 100%;
	height: 150px;
}
@media only screen and (max-width: 1080px) {
input[type="submit"]{
width: 30%;
padding: 10px 5px;
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
textarea{
	width: 100%;
	height: 150px;
	font-size: 14px;
}
input[type="reset"]{
background: #8a929d;
margin: 0 2%;
padding: 5px 7px 3px;
border-radius: 5px;
color: #fff;
border: none;
font-size: 13px;
cursor: pointer;
}
}

main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#thanks{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 80px;
padding: 0 25%;
text-align: center;
}
@media only screen and (max-width: 1440px) {
#thanks{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 80px;
padding: 0 20%;
text-align: center;
}
}
@media only screen and (max-width: 1080px) {
#thanks{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 80px;
padding: 0 15%;
text-align: center;
}
}
@media only screen and (max-width: 835px) {
#thanks{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 80px;
padding: 0 10%;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#thanks{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 50px;
padding: 0 5%;
text-align: center;
}
#thanks img{
max-width:50%;
}
}
@media only screen and (max-width: 480px) {
#thanks img{
max-width:60%;
}
}
@media only screen and (max-width: 414px) {
#thanks img{
max-width:70%;
}
}

#thanks h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding:10px 0;
background: #eee;
text-align: center;
font-weight: 500;
font-size: 25px;
line-height: 100%;
}
#thanks p{
font-size: 17px;
margin: 0 0 50px;
}
@media only screen and (max-width: 640px) {
#thanks h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding:10px 0;
background: #eee;
text-align: center;
font-weight: 400;
font-size: 20px;
line-height: 100%;
}
#thanks p{
font-size: 15px;
margin: 0 0 40px;
line-height: 160%;
}
}
@media only screen and (max-width: 480px) {
#thanks p{
font-size: 14px;
margin: 0 0 30px;
line-height: 160%;
}
}
@media only screen and (max-width: 414px) {
#thanks p{
font-size: 13px;
margin: 0 0 30px;
line-height: 160%;
}
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
	line-height: 0;
} 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#386487;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	color:#fff;
} 
#page-top p:hover{
	background:#7ac38c;
	color:#fff;
} 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 15px 0 0;
border-top:1px solid #8a929d;
}
footer img{
max-width: 17%;
margin: 0 0 0 3%;
}
@media only screen and (max-width: 1080px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0;
border-top:none;
}
footer img{
display: none;
max-width: 17%;
margin: 0 0 0 3%;
}
}

nav{
float: right;
width: 77%;
height: auto;
margin: 0 3% 0 0;
padding: 35px 0 0 5%;
text-align: left;
}
@media only screen and (max-width: 1080px) {
nav{
display: none;
float: right;
width: 77%;
height: auto;
margin: 0 3% 0 0;
padding: 35px 0 0 5%;
text-align: left;
}
}

nav ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
nav li{
float: left;
list-style-type: none;
margin: 0 5% 0 0;
padding: 0;
text-align: left;
font-size: 20px;
line-height: 100%;
}
nav li a:link,nav li a:visited{
color: #111;
text-decoration: none;
}
nav li a:hover{
text-decoration: underline;
}

footer nav img{
max-width: 20%;
margin: -20px 0 0;
}

#footer-pict{
clear: both;
float: left;
width: 100%;
height: 150px;
margin: 15px 0 0;
padding: 0;
background: url(image/photo-back.webp) no-repeat 20% bottom/100%;
}
@media only screen and (max-width: 480px) {
#footer-pict{
clear: both;
float: left;
width: 100%;
height: 100px;
margin: 15px 0 0;
padding: 0;
background: url(image/photo-back.webp) no-repeat 20% bottom/100%;
}
}