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

/*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,br.spm,.nsp{
	display:inherit;
}
br.sm,br.smt,br.smm,br.smm2,.nst,.nss{
	display:none;
}
@media only screen and (max-width: 1080px) {
br.sp,br.spm,br.smm,.smm,br.smm2,.nsp,.nss,.nsm{
	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{
	display:none;
}
br.spm,br.smm,.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{
	display:inherit;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 2% 15px 10%;
background: #0d3854;
text-align: left;
}
@media only screen and (max-width: 1600px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 2% 15px 5%;
background: #0d3854;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 0 0 0;
background: #0d3854;
text-align: center;
}
}

header img{
max-width: 20%;
margin: 0;
}
@media only screen and (max-width: 1080px) {
header img{
float: none;
max-width: 20%;
margin: 0 0 15px;
}
}
@media only screen and (max-width: 835px) {
header img{
float: none;
max-width: 20%;
margin: 0 0 15px;
}
}
@media only screen and (max-width: 480px) {
header img{
float: none;
max-width: 25%;
margin: 0 0 15px;
}
}
@media only screen and (max-width: 414px) {
header img{
float: none;
max-width: 30%;
margin: 0 0 15px;
}
}

/*メニュー
--------------------------------------------------------------------------*/
menu{
float: right;
width: 80%;
height: auto;
margin:0 0 0;
padding:25px 0 0;
text-align: left;
}

menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: right;
}
menu li{
float: left;
margin: 0 0 0 3%;
padding: 0;
list-style-type: none;
font-size: 19px;
color: #fff;
line-height: 100%;
text-align: center;
font-weight: 400;
}
@media only screen and (max-width: 1280px) {
menu li{
float: left;
margin: 0 0 0 3%;
padding: 0;
list-style-type: none;
font-size: 16px;
color: #fff;
line-height: 100%;
text-align: center;
font-weight: 400;
}
}
menu li.toi{
margin: -15px 0 0 3%;
border: 1px solid #fff;
background: #0e6bb2;
}
menu li a:link,menu li a:visited{
text-decoration: none;
color: #fff;
}
menu li a:hover{
text-decoration: underline;
color: #fff;
}
menu li.toi a:link,menu li.toi a:visited{
display: block;
width: 7em;
height: auto;
padding: 15px 3%;
}
menu li.toi a:hover{
color: #fff;
}

@media only screen and (max-width:1080px) {
menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:0;
background: #0d3854;
}
menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
border-top:1px solid #fff;
border-left:1px solid #fff;
}
menu li,menu li.toi{
display: block;
width: 33.3%;
float: left;
list-style-type: none;
font-size: 17px;
margin: 0;
padding: 20px 0 20px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
text-align: center;
background: none;
}
menu li.toi{
border:none;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
background: none;
text-align: center;
}
menu li a:link,menu li a:visited,menu li.toi a:link,menu li.toi a:visited{
float: none;
display: block;
width: 100%;
text-decoration: none;
color: #fff;
background:none;
padding: 0;
text-align: center;
border-right: none;
}
menu li a:hover,menu li.toi a:hover{
text-decoration: underline;
}
}
@media only screen and (max-width: 640px) {
menu li,menu li.toi{
display: block;
width: 33.3%;
float: left;
list-style-type: none;
font-size: 15px;
margin: 0;
padding: 15px 0 15px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
text-align: center;
background: none;
}
menu li.toi{
border:none;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
background: none;
text-align: center;
}
}
@media only screen and (max-width: 480px) {
menu li,menu li.toi{
display: block;
width: 33.3%;
float: left;
list-style-type: none;
font-size: 14px;
margin: 0;
padding: 15px 0 15px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
text-align: center;
background: none;
}
menu li.toi{
border:none;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
background: none;
text-align: center;
}
}
@media only screen and (max-width: 414px) {
menu li,menu li.toi{
display: block;
width: 50%;
float: left;
list-style-type: none;
font-size: 14px;
margin: 0;
padding: 15px 0 15px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
text-align: center;
background: none;
}
menu li.toi{
border:none;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
background: none;
text-align: center;
}
}

/*main
--------------------------------------------------------------------------*/
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 530px;
margin: 0;
padding: 80px 0 0 10%;
background: url(image/header.webp) no-repeat left top/cover;
}
@media only screen and (max-width: 1600px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 530px;
margin: 0;
padding: 80px 0 0 5%;
background: url(image/header.webp) no-repeat left top/cover;
}
}
@media only screen and (max-width: 1440px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 450px;
margin: 0;
padding: 50px 0 0 5%;
background: url(image/header.webp) no-repeat left top/cover;
}
}
@media only screen and (max-width: 1280px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 400px;
margin: 0;
padding: 30px 0 0 5%;
background: url(image/header.webp) no-repeat left top/cover;
}
}
@media only screen and (max-width: 1080px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 450px;
margin: 0;
padding: 30px 0 0 5%;
background: url(image/header.webp) no-repeat left top/cover;
}
}
@media only screen and (max-width: 640px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 400px;
margin: 0;
padding: 30px 0 0 5%;
background: url(image/header.webp) no-repeat left top/cover;
}
}
@media only screen and (max-width: 480px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 350px;
margin: 0;
padding: 25px 0 0 5%;
background: url(image/header.webp) no-repeat 15% top/cover;
}
}

#photo h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
font-weight:500;
font-size: 63px;
line-height: 100%;
}
#photo h1 span{
font-size: 38px;
font-weight: 400;
}
#photo h1 .fc{
color: #0e6bb2;
font-weight:500;
font-size: 67px;
}
@media only screen and (max-width: 1280px) {
#photo h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight:500;
font-size: 55px;
line-height: 100%;
}
#photo h1 span{
font-size: 34px;
font-weight: 400;
}
}
@media only screen and (max-width: 480px) {
#photo h1{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
text-align: left;
font-weight:500;
font-size: 45px;
line-height: 100%;
}
#photo h1 span{
font-size: 28px;
font-weight: 400;
}
#photo h1 .fc{
color: #0e6bb2;
font-weight:500;
font-size: 53px;
}
}

#photo p{
text-align: left;
color: #43b12d;
font-size: 25px;
line-height: 150%;
margin: 0;
padding: 0;
text-shadow: 2px 2px 0 #fff;
}
#photo p strong{
font-size: 35px;
font-weight: 500;
}
#photo p span{
background: #43b12d;
color: #fff;
font-size: 30px;
font-weight: 500;
padding:0 15px;
line-height: 200%;
text-shadow: none;
}
@media only screen and (max-width: 1280px) {
#photo p{
text-align: left;
color: #43b12d;
font-size: 20px;
line-height: 150%;
margin: 0;
padding: 0;
text-shadow: 2px 2px 0 #fff;
}
#photo p strong{
font-size: 30px;
font-weight: 500;
}
}
@media only screen and (max-width: 480px) {
#photo p{
text-align: left;
color: #43b12d;
font-size:18px;
line-height: 150%;
margin: 0;
padding: 0;
text-shadow: 2px 2px 0 #fff;
font-weight: 500;
}
#photo p strong{
font-size: 28px;
font-weight: 500;
}
#photo p span{
background: #43b12d;
color: #fff;
font-size: 28px;
font-weight: 500;
padding:0 15px;
line-height: 200%;
text-shadow: none;
}
}

#cha{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 100px 10%;
background: url(image/se.png) no-repeat 95% center,#0e6bb2;
}
#cha h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
color: #fff;
font-size: 30px;
line-height: 150%;
font-weight: 500;
text-indent: -0.5em;
}
#cha h2 span{
font-size: 20px;
font-weight: 400;
}
@media only screen and (max-width: 1280px) {
#cha{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 100px 5%;
background: url(image/se.png) no-repeat 95% center/30%,#0e6bb2;
}
#cha h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
color: #fff;
font-size: 25px;
line-height: 150%;
font-weight: 500;
text-indent: -0.5em;
}
}
@media only screen and (max-width: 1080px) {
#cha{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0 80px 3%;
background: url(image/se.png) no-repeat 95% 80%/25%,#0e6bb2;
}
#cha h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
color: #fff;
font-size: 28px;
line-height: 150%;
font-weight: 500;
}
#cha h2 span{
font-size: 18px;
font-weight: 400;
}
}
@media only screen and (max-width: 835px) {
#cha h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align:left;
color: #fff;
font-size: 23px;
line-height: 150%;
font-weight: 500;
}
#cha h2 span{
font-size: 15px;
font-weight: 400;
}
}
@media only screen and (max-width: 640px) {
#cha{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0 180px 3%;
background: url(image/se.png) no-repeat 90% 70%/45%,#0e6bb2;
}
#cha h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
color: #fff;
font-size: 20px;
line-height: 150%;
font-weight: 500;
}
#cha h2 span{
font-size: 13px;
font-weight: 400;
}
}
@media only screen and (max-width: 480px) {
#cha{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0 180px 3%;
background: url(image/se.png) no-repeat 85% 70%/50%,#0e6bb2;
}
#cha h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
color: #fff;
font-size: 18px;
line-height: 150%;
font-weight: 500;
}
}
@media only screen and (max-width: 414px) {
#cha{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 0 180px 3%;
background: url(image/se.png) no-repeat 85% 80%/60%,#0e6bb2;
}
#cha h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
color: #fff;
font-size: 17px;
line-height: 150%;
font-weight: 500;
}
}

#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -50px 0 100px;
padding: 0 5%;
display: flex;
}
@media only screen and (max-width: 1600px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -50px 0 100px;
padding: 0 3%;
display: flex;
}
}
@media only screen and (max-width: 1280px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -65px 0 100px;
padding: 0 3%;
display: flex;
}
}
@media only screen and (max-width: 1080px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -55px 0 80px;
padding: 0 1%;
display:inherit;
}
}
@media only screen and (max-width: 414px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -25px 0 50px;
padding: 0 1%;
display:inherit;
}
}

.info-box{
flex: 1;
padding: 150px 1% 0 3%;
background: url(image/info1.png) no-repeat left top;
}
.info-box2{
background: url(image/info2.png) no-repeat left top;
}
.info-box3{
background: url(image/info3.png) no-repeat left top;
}
.info-box4{
background: url(image/info4.png) no-repeat left top;
}
@media only screen and (max-width: 1600px) {
.info-box{
flex: 1;
padding: 135px 1% 0 2%;
background: url(image/info1.png) no-repeat left top/45%;
}
.info-box2{
background: url(image/info2.png) no-repeat left top/45%;
}
.info-box3{
background: url(image/info3.png) no-repeat left top/45%;
}
.info-box4{
background: url(image/info4.png) no-repeat left top/45%;
}
}
@media only screen and (max-width: 1280px) {
.info-box{
flex: 1;
padding: 115px 2% 0 2%;
background: url(image/info1.png) no-repeat left top/45%;
}
.info-box2{
background: url(image/info2.png) no-repeat left top/45%;
}
.info-box3{
background: url(image/info3.png) no-repeat left top/45%;
}
.info-box4{
background: url(image/info4.png) no-repeat left top/45%;
}
}
@media only screen and (max-width: 1080px) {
.info-box{
width: 50%;
float: left;
flex: none;
padding: 140px 4% 0 4%;
background: url(image/info1.png) no-repeat left top/35%;
}
.info-box2{
background: url(image/info2.png) no-repeat left top/35%;
}
.info-box3{
background: url(image/info3.png) no-repeat left top/35%;
}
.info-box4{
background: url(image/info4.png) no-repeat left top/35%;
}
}
@media only screen and (max-width: 835px) {
.info-box{
width: 50%;
float: left;
flex: none;
padding: 120px 4% 0 4%;
background: url(image/info1.png) no-repeat left top/35%;
}
.info-box2{
background: url(image/info2.png) no-repeat left top/35%;
}
.info-box3{
background: url(image/info3.png) no-repeat left top/35%;
}
.info-box4{
background: url(image/info4.png) no-repeat left top/35%;
}
}
@media only screen and (max-width: 640px) {
.info-box{
width: 50%;
float: left;
flex: none;
padding: 90px 4% 0 4%;
background: url(image/info1.png) no-repeat left top/35%;
}
.info-box2{
background: url(image/info2.png) no-repeat left top/35%;
}
.info-box3{
background: url(image/info3.png) no-repeat left top/35%;
}
.info-box4{
background: url(image/info4.png) no-repeat left top/35%;
}
}
@media only screen and (max-width: 480px) {
.info-box{
width: 50%;
float: left;
flex: none;
padding: 90px 4% 0 4%;
background: url(image/info1.png) no-repeat left top/50%;
}
.info-box2{
background: url(image/info2.png) no-repeat left top/50%;
}
.info-box3{
background: url(image/info3.png) no-repeat left top/50%;
}
.info-box4{
background: url(image/info4.png) no-repeat left top/50%;
}
}
@media only screen and (max-width: 414px) {
.info-box{
width:100%;
float: left;
flex: none;
margin: -30px 0 0;
padding: 120px 5% 0 5%;
background: url(image/info1.png) no-repeat left top/40%;
}
.info-box2{
background: url(image/info2.png) no-repeat left top/40%;
}
.info-box3{
background: url(image/info3.png) no-repeat left top/40%;
}
.info-box4{
background: url(image/info4.png) no-repeat left top/40%;
}
}

#info h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 35px;
font-weight: 400;
line-height: 100%;
color: #0e6bb2;
}
@media only screen and (max-width: 1600px) {
#info h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 30px;
font-weight: 400;
line-height: 100%;
color: #0e6bb2;
}
}
@media only screen and (max-width: 640px) {
#info h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
text-align: left;
font-size: 28px;
font-weight: 400;
line-height: 100%;
color: #0e6bb2;
}
}

#info p{
font-size: 17px;
line-height: 180%;
margin: 0 0 30px;
text-align: left;
}
#info p.plink{
text-align: right;
margin: 0;
line-height: 100%;
}
#info p a:link,#info p a:visited{
background: url(image/info-a.png) no-repeat left 50%;
text-decoration: underline;
color: #111;
padding: 0 0 0 20px;
}
#info p a:hover{
color: #0e6bb2;
}
@media only screen and (max-width: 1600px) {
#info p{
font-size: 15px;
line-height: 180%;
margin: 0 0 30px;
text-align: left;
}
}
@media only screen and (max-width: 640px) {
#info p{
font-size: 14px;
line-height: 180%;
margin: 0 0 25px;
text-align: left;
}
}
@media only screen and (max-width: 480px) {
#info p{
font-size: 13px;
line-height: 180%;
margin: 0 0 25px;
text-align: left;
}
}

#info p span{
background: #43b12d;
color: #fff;
padding: 0 5px 1px;
margin: 0 0 0 2%;
}

main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
main p{
font-size: 17px;
margin: 0 0 40px;
text-align: left;
line-height: 180%;
}
@media only screen and (max-width: 1080px) {
main p{
font-size: 16px;
margin: 0 0 30px;
text-align: left;
line-height: 180%;
}
}
@media only screen and (max-width: 835px) {
main p{
font-size: 15px;
margin: 0 0 30px;
text-align: left;
line-height: 180%;
}
}
@media only screen and (max-width: 480px) {
main p{
font-size: 14px;
margin: 0 0 30px;
text-align: left;
line-height: 180%;
}
}
@media only screen and (max-width: 414px) {
main p{
font-size: 13px;
margin: 0 0 25px;
text-align: left;
line-height: 180%;
}
}

/*光るテキスト*/
.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }

@keyframes glow_anime_on{
  0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
  50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
  100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}

#carte,#soft,#yoyaku,#kessai{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
@media only screen and (max-width: 835px) {
#carte,#soft,#yoyaku,#kessai{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}

#carte h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 0 50px 10%;
padding: 70px 0 70px 3%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 60px;
line-height: 100%;
background: url(image/carte2.webp) no-repeat right top/30%,url(image/carte1.png) no-repeat left top,url(image/logo-w.png) no-repeat 65% bottom,#0d3854; 
}
@media only screen and (max-width: 1080px) {
#carte h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 0 40px 10%;
padding: 50px 0 50px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 50px;
line-height: 100%;
background: url(image/carte2.webp) no-repeat right top/30%,url(image/carte1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 835px) {
#carte h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 0 30px 10%;
padding: 40px 0 40px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 40px;
line-height: 100%;
background: url(image/carte2.webp) no-repeat right top/30%,url(image/carte1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 640px) {
#carte h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 0 30px 10%;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 35px;
line-height: 100%;
background: url(image/carte2.webp) no-repeat right top/30%,url(image/carte1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 480px) {
#carte h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 30px;
line-height: 100%;
background: url(image/carte2.webp) no-repeat right top/30%,url(image/carte1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 414px) {
#carte h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 25px;
line-height: 100%;
background: url(image/carte2.webp) no-repeat right top/35%,url(image/carte1.png) no-repeat left top/20%,url(image/logo-w.png) no-repeat 53% bottom/25%,#0d3854; 
}
}

#carte-box,#soft-box,#yoyaku-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 10% 0 15%;
}
@media only screen and (max-width: 1440px) {
#carte-box,#soft-box,#yoyaku-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 0 15%;
}
}
@media only screen and (max-width: 835px) {
#carte-box,#soft-box,#yoyaku-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 0 10%;
}
}
@media only screen and (max-width: 480px) {
#carte-box,#soft-box,#yoyaku-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 4% 0 4%;
}
}

#carte h5,#soft h5,#yoyaku h5,#kessai h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 30px;
padding: 0 0 0 15px;
text-align: left;
color: #0d3854;
font-size: 35px;
line-height: 100%;
font-weight: 400;
border-left:20px solid #0d3854;
}
@media only screen and (max-width: 1080px) {
#carte h5,#soft h5,#yoyaku h5,#kessai h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 30px;
padding: 0 0 0 15px;
text-align: left;
color: #0d3854;
font-size: 30px;
line-height: 100%;
font-weight: 400;
border-left:20px solid #0d3854;
}
}
@media only screen and (max-width: 835px) {
#carte h5,#soft h5,#yoyaku h5,#kessai h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 30px;
padding: 0 0 0 15px;
text-align: left;
color: #0d3854;
font-size: 25px;
line-height: 100%;
font-weight: 400;
border-left:20px solid #0d3854;
}
}
@media only screen and (max-width: 480px) {
#carte h5,#soft h5,#yoyaku h5,#kessai h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 30px;
padding: 0 0 0 15px;
text-align: left;
color: #0d3854;
font-size: 20px;
line-height: 100%;
font-weight: 400;
border-left:20px solid #0d3854;
}
}

#cas{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
display: flex;
}
.cas-box{
flex: 1;
margin: 0 2% 0 0;
padding: 30px 3%;
border: 1px solid #999;
text-align:center;
}
@media only screen and (max-width: 1080px) {
#cas{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
display:inherit;
}
.cas-box{
float: left;
width: 46%;
flex: 1;
margin: 0 2% 25px;
padding: 30px 3%;
border: 1px solid #999;
text-align:center;
}
}
@media only screen and (max-width: 640px) {
#cas{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display:inherit;
}
}
@media only screen and (max-width: 480px) {
.cas-box{
float: left;
width: 100%;
flex: 1;
margin: 0 0 25px;
padding: 30px 3%;
border: 1px solid #999;
text-align:center;
}
}
@media only screen and (max-width: 414px) {
.cas-box{
float: left;
width: 100%;
flex: 1;
margin: 0 0 20px;
padding: 20px 5%;
border: 1px solid #999;
text-align:center;
}
}

#cas img{
max-height: 110px;
margin: 0 auto 25px;
}
@media only screen and (max-width: 480px) {
#cas img{
max-height: 90px;
margin: 0 auto 25px;
}
}

#cas h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
line-height: 100%;
text-align: left;
font-size: 25px;
font-weight: 400;
}
#cas p{
text-align: left;
line-height: 180%;
margin: 0;
font-size: 15px;
}
@media only screen and (max-width: 1440px) {
#cas h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
line-height: 110%;
text-align: left;
font-size: 22px;
font-weight: 400;
}
}
@media only screen and (max-width: 480px) {
#cas h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
line-height: 120%;
text-align:center;
font-size: 22px;
font-weight: 400;
}
#cas p{
text-align: left;
line-height: 180%;
margin: 0;
font-size: 14px;
}
}
@media only screen and (max-width: 414px) {
#cas p{
text-align: left;
line-height: 180%;
margin: 0;
font-size: 13px;
}
}

#carte ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
}
#carte li{
list-style-type: none;
font-size: 15px;
line-height: 180%;
margin: 0 0 30px 5%;
text-align: left;
padding: 0 0 0 20px;
background: url(image/cas-ul.png) no-repeat left 15px;
list-style-position: outside;
}
#carte li strong{
font-size: 18px;
line-height: 200%;
font-weight: 400;
}
@media only screen and (max-width: 480px) {
#carte li{
list-style-type: none;
font-size: 14px;
line-height: 180%;
margin: 0 0 20px 3%;
text-align: left;
padding: 0 0 0 20px;
background: url(image/cas-ul.png) no-repeat left 15px;
list-style-position: outside;
}
#carte li strong{
font-size: 16px;
line-height: 200%;
font-weight: 500;
}
}
@media only screen and (max-width: 414px) {
#carte li{
list-style-type: none;
font-size: 13px;
line-height: 180%;
margin: 0 0 20px 3%;
text-align: left;
padding: 0 0 0 20px;
background: url(image/cas-ul.png) no-repeat left 15px;
list-style-position: outside;
}
#carte li strong{
font-size: 15px;
line-height: 160%;
font-weight: 500;
}
}

.banner{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 0;
text-align: center;
}
.banner img{
max-width: 40%;
margin: 0 2%;
}
@media only screen and (max-width: 480px) {
.banner{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0;
text-align: center;
}
.banner img{
max-width: 44%;
margin: 0 2%;
}
}
@media only screen and (max-width: 414px) {
.banner img{
max-width: 48%;
margin: 0 1%;
}
}

#soft h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 10% 50px 0;
padding: 70px 0 70px 3%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 60px;
line-height: 100%;
background: url(image/soft2.webp) no-repeat right top/30%,url(image/soft1.png) no-repeat left top,url(image/logo-w.png) no-repeat 65% bottom,#0d3854; 
}
@media only screen and (max-width: 1080px) {
#soft h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 10% 40px 0;
padding: 50px 0 50px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 50px;
line-height: 100%;
background: url(image/soft2.webp) no-repeat right top/30%,url(image/soft1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 835px) {
#soft h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 10% 30px 0;
padding: 40px 0 40px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 40px;
line-height: 100%;
background: url(image/soft2.webp) no-repeat right top/30%,url(image/soft1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 640px) {
#soft h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 10% 30px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 35px;
line-height: 100%;
background: url(image/soft2.webp) no-repeat right top/30%,url(image/soft1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 480px) {
#soft h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 30px;
line-height: 100%;
background: url(image/soft2.webp) no-repeat right top/30%,url(image/soft1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 414px) {
#soft h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 25px;
line-height: 100%;
background: url(image/soft2.webp) no-repeat right top/35%,url(image/soft1.png) no-repeat left top/20%,url(image/logo-w.png) no-repeat 53% bottom/25%,#0d3854; 
}
}

#soft h5 span,#yoyaku h5 span{
background: #ccc;
padding: 0 5px;
margin: 0 0 0 15px;
font-size: 15px;
color: #111;
}
@media only screen and (max-width: 640px) {
#soft h5 span,#yoyaku h5 span{
background: #ccc;
padding: 0 5px;
margin: 0 0 0 10px;
font-size: 13px;
color: #111;
}
}
@media only screen and (max-width: 414px) {
#soft h5 span,#yoyaku h5 span{
background: #ccc;
padding: 0 5px;
margin: 0 0 0 0;
font-size: 13px;
color: #111;
line-height: 250%;
}
}

main p.soft-p,main p.yoyaku-p,main p.kessai-p{
margin: 0 0 30px 3%;
}
@media only screen and (max-width: 835px) {
main p.soft-p,main p.yoyaku-p,main p.kessai-p{
margin: 0 0 25px 0;
}
}

blockquote{
clear: both;
float: left;
width: 54%;
height: auto;
margin: 0 43% 50px 3%;
padding:20px 3%;
border: 1px solid #999;
text-align: left;
font-size: 15px;
line-height: 160%;
}
@media only screen and (max-width: 1280px) {
blockquote{
clear: both;
float: left;
width: 74%;
height: auto;
margin: 0 23% 50px 3%;
padding:20px 3%;
border: 1px solid #999;
text-align: left;
font-size: 15px;
line-height: 160%;
}
}
@media only screen and (max-width: 1080px) {
blockquote{
clear: both;
float: left;
width: 94%;
height: auto;
margin: 0 3% 50px 3%;
padding:20px 3%;
border: 1px solid #999;
text-align: left;
font-size: 15px;
line-height: 160%;
}
}
@media only screen and (max-width: 835px) {
blockquote{
clear: both;
float: left;
width: 97%;
height: auto;
margin: 0 3% 50px 0;
padding:20px 3%;
border: 1px solid #999;
text-align: left;
font-size: 14px;
line-height: 160%;
}
}
@media only screen and (max-width: 480px) {
blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px 0;
padding:15px 4%;
border: 1px solid #999;
text-align: left;
font-size: 13px;
line-height: 160%;
}
}

#yoyaku h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 0 50px 10%;
padding: 70px 0 70px 3%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 60px;
line-height: 100%;
background: url(image/yoyaku2.webp) no-repeat right bottom/30%,url(image/yoyaku1.png) no-repeat left top,url(image/logo-w.png) no-repeat 65% bottom,#0d3854; 
}
@media only screen and (max-width: 1080px) {
#yoyaku h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 0 40px 10%;
padding: 50px 0 50px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 50px;
line-height: 100%;
background: url(image/yoyaku2.webp) no-repeat right top/30%,url(image/yoyaku1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 835px) {
#yoyaku h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 0 30px 10%;
padding: 40px 0 40px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 40px;
line-height: 100%;
background: url(image/yoyaku2.webp) no-repeat right top/30%,url(image/yoyaku1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 640px) {
#yoyaku h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 0 30px 10%;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 35px;
line-height: 100%;
background: url(image/yoyaku2.webp) no-repeat right top/30%,url(image/yoyaku1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 480px) {
#yoyaku h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 30px;
line-height: 100%;
background: url(image/yoyaku2.webp) no-repeat right top/30%,url(image/yoyaku1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 414px) {
#yoyaku h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 25px;
line-height: 100%;
background: url(image/yoyaku2.webp) no-repeat right top/35%,url(image/yoyaku1.png) no-repeat left top/20%,url(image/logo-w.png) no-repeat 53% bottom/25%,#0d3854; 
}
}

#kessai h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 10% 50px 0;
padding: 70px 0 70px 3%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 60px;
line-height: 100%;
background: url(image/kessai2.webp) no-repeat right bottom/30%,url(image/kessai1.png) no-repeat left top,url(image/logo-w.png) no-repeat 65% bottom,#0d3854; 
}
@media only screen and (max-width: 1080px) {
#kessai h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 10% 40px 0;
padding: 50px 0 50px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 50px;
line-height: 100%;
background: url(image/kessai2.webp) no-repeat right top/30%,url(image/kessai1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 835px) {
#kessai h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 10% 30px 0;
padding: 40px 0 40px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 40px;
line-height: 100%;
background: url(image/kessai2.webp) no-repeat right top/30%,url(image/kessai1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 640px) {
#kessai h4{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 10% 30px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 35px;
line-height: 100%;
background: url(image/kessai2.webp) no-repeat right top/30%,url(image/kessai1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 480px) {
#kessai h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 30px;
line-height: 100%;
background: url(image/kessai2.webp) no-repeat right top/30%,url(image/kessai1.png) no-repeat left top/15%,url(image/logo-w.png) no-repeat 60% bottom/20%,#0d3854; 
}
}
@media only screen and (max-width: 414px) {
#kessaih4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px 0;
padding: 30px 0 30px 5%;
text-align: left;
color: #fff;
font-weight: 400;
font-size: 25px;
line-height: 100%;
background: url(image/kessai2.webp) no-repeat right top/35%,url(image/kessai1.png) no-repeat left top/20%,url(image/logo-w.png) no-repeat 53% bottom/25%,#0d3854; 
}
}

#kessai-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 10% 0 15%;
background: url(image/kessai3.webp) no-repeat 85% top/30%;
}
@media only screen and (max-width: 1440px) {
#kessai-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 0 5%;
background: url(image/kessai3.webp) no-repeat 85% top/30%;
}
}
@media only screen and (max-width: 1080px) {
#kessai-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 0 3%;
background: url(image/kessai3.webp) no-repeat 95% top/30%;
}
}
@media only screen and (max-width: 835px) {
#kessai-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 3% 0 3%;
background: url(image/kessai3.webp) no-repeat 95% bottom/30%;
}
}
@media only screen and (max-width: 480px) {
#kessai-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:300px 4% 0 4%;
background: url(image/kessai3.webp) no-repeat center top/60%;
}
}
@media only screen and (max-width: 414px) {
#kessai-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:280px 4% 0 4%;
background: url(image/kessai3.webp) no-repeat center top/70%;
}
}

#kessai-it{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0 3%;
}
#kessai-it img{
vertical-align:text-bottom;
}
#kessai-it p{
margin: 0;
color: #43b12d;
font-size: 23px;
}
#kessai-it p strong{
font-weight: 500;
font-size: 30px;
}
#kessai-it p span{
background: #43b12d;
color: #fff;
font-size: 15px;
line-height: 100%;
padding: 0 5px 1px;
margin: 0 15px 0 0;
}
@media only screen and (max-width: 640px) {
#kessai-it p{
margin: 0;
color: #43b12d;
font-size: 20px;
}
#kessai-it p strong{
font-weight: 500;
font-size: 25px;
}
#kessai-it p span{
background: #43b12d;
color: #fff;
font-size: 14px;
line-height: 200%;
padding: 0 5px 1px;
margin: 0 15px 0 0;
}
}
@media only screen and (max-width: 414px) {
#kessai-it p{
margin: 0;
color: #43b12d;
font-size:16px;
}
#kessai-it p strong{
font-weight: 500;
font-size: 22px;
}
#kessai-it p span{
background: #43b12d;
color: #fff;
font-size: 13px;
line-height: 200%;
padding: 0 5px 1px;
margin: 0 15px 0 0;
}
#kessai-it img{
max-width: 4%;
}
}

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

#toi h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
line-height: 100%;
font-weight: 500;
font-size: 50px;
color: #fff;
}
@media only screen and (max-width: 1080px) {
#toi h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
line-height: 100%;
font-weight: 500;
font-size:40px;
color: #fff;
}
}
@media only screen and (max-width: 640px) {
#toi h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
line-height: 100%;
font-weight: 500;
font-size:35px;
color: #fff;
}
}
@media only screen and (max-width: 480px) {
#toi h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: center;
line-height: 100%;
font-weight: 500;
font-size:30px;
color: #fff;
}
}
@media only screen and (max-width: 414px) {
#toi h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
line-height: 100%;
font-weight: 500;
font-size:25px;
color: #fff;
}
}

#mail-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 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:5px 10% 30px;
    border:1px solid #000;
    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 #000;
	border-bottom:1px solid #000;
	padding: 10px 2%;
	font-size: 17px;
	}
th{
	width:30%;
	background:#eee;
	text-align:right;
	font-weight: normal;
	font-size: 17px;
}
@media only screen and (max-width: 1080px) {
th,td{
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	padding: 10px 2%;
	font-size: 15px;
	line-height: 120%;
	}
th{
	width:30%;
	background:#eee;
	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 #000;
	border-bottom:1px solid #000;
	padding: 10px 2%;
	font-size: 13px;
	line-height: 120%;
	}
th{
	width:35%;
	background:#eee;
	text-align:right;
	font-weight: normal;
	font-size: 13px;
	line-height: 120%;
}
}

.hissu{
	font-size: 11px;
	background: #da4896;
	border-radius: 5px;
	margin: 0 0 0 5px;
	padding: 0 5px;
	color: #fff;
}
input[type="text"],input[type="email"]{
	width: 100%;
}
input[type="submit"]{
width: 20%;
padding: 10px 5px;
}
form p{
	text-align: center;
}
textarea{
	width: 100%;
	height: 150px;
}
@media only screen and (max-width: 1080px) {
input[type="submit"]{
width: 30%;
padding: 10px 5px;
font-size: 17px;
}
}

#thanks{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 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: 50px 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: 50px 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: 50px 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: 50px 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%;
}
@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%;
}
}

#office{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 70px 0 0;
text-align: center;
background: #eee;
}
#office h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 40px;
line-height: 100%;
}
@media only screen and (max-width: 835px) {
#office{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 0 0;
text-align: center;
background: #eee;
}
#office h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 35px;
line-height: 100%;
}
}
@media only screen and (max-width: 480px) {
#office{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 0 0;
text-align: center;
background: #eee;
}
#office h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 30px;
line-height: 100%;
}
}
@media only screen and (max-width: 414px) {
#office h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 25px;
line-height: 100%;
}
}

#office p{
text-align: center;
margin: 0 0 40px;
line-height: 180%;
font-size: 17px;
}
#office p.o-title{
font-weight: 500;
line-height: 130%;
font-size: 25px;
color: #0e6bb2;
}
#office p.o-title span{
font-size: 20px;
font-weight: 400;
}
@media only screen and (max-width: 1080px) {
#office p{
text-align: center;
margin: 0 0 40px;
line-height: 180%;
font-size: 15px;
}
}
@media only screen and (max-width: 835px) {
#office p.o-title{
font-weight: 500;
line-height: 130%;
font-size: 20px;
color: #0e6bb2;
}
#office p.o-title span{
font-size:15px;
font-weight: 400;
}
}
@media only screen and (max-width: 480px) {
#office p{
text-align: center;
margin: 0 3% 30px;
line-height: 180%;
font-size: 13px;
}
#office p.o-title{
font-weight: 500;
line-height: 130%;
font-size:20px;
color: #0e6bb2;
}
#office p.o-title span{
font-size:13px;
font-weight: 400;
}
}

#office dl{
clear: both;
float: left;
width: 50%;
height: auto;
margin: 0 25% 60px;
padding: 0;
border: 1px solid #000;
background: #fff;
}
#office dt{
clear: both;
float: left;
width: 20%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
font-size: 17px;
line-height: 120%;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#office dd{
float: left;
width: 80%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: left;
text-indent: 1em;
font-size: 17px;
line-height: 120%;
border-bottom: 1px solid #ccc;
}
@media only screen and (max-width: 1280px) {
#office dl{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0 20% 50px;
padding: 0;
border: 1px solid #000;
background: #fff;
}
}
@media only screen and (max-width: 1080px) {
#office dl{
clear: both;
float: left;
width: 70%;
height: auto;
margin: 0 15% 50px;
padding: 0;
border: 1px solid #000;
background: #fff;
}
#office dt{
clear: both;
float: left;
width: 20%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
font-size: 15px;
line-height: 120%;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#office dd{
float: left;
width: 80%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: left;
text-indent: 1em;
font-size: 15px;
line-height: 120%;
border-bottom: 1px solid #ccc;
}
}
@media only screen and (max-width: 640px) {
#office dl{
clear: both;
float: left;
width: 80%;
height: auto;
margin: 0 10% 40px;
padding: 0;
border: 1px solid #000;
background: #fff;
}
}
@media only screen and (max-width: 480px) {
#office dl{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5% 40px;
padding: 0;
border: 1px solid #000;
background: #fff;
}
#office dt{
clear: both;
float: left;
width: 25%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: center;
font-size: 13px;
line-height: 120%;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#office dd{
float: left;
width: 75%;
height: auto;
margin: 0;
padding: 10px 0;
text-align: left;
text-indent: 1em;
font-size: 13px;
line-height: 120%;
border-bottom: 1px solid #ccc;
}
}

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

/*フッタ
--------------------------------------------------------------------------*/
#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:#000;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	color:#fff;
} 
#page-top p:hover{
	background:#285fc1;
	color:#fff;
} 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 530px;
margin: 0;
padding: 80px 0 0 10%;
background: url(image/header.webp) no-repeat center top/100%;
}
@media only screen and (max-width: 1600px) {
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 530px;
margin: 0;
padding: 80px 0 0 5%;
background: url(image/header.webp) no-repeat center top/100%;
}
}
@media only screen and (max-width: 1440px) {
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 450px;
margin: 0;
padding: 50px 0 0 5%;
background: url(image/header.webp) no-repeat center top/100%;
}
}
@media only screen and (max-width: 1280px) {
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 400px;
margin: 0;
padding: 30px 0 0 5%;
background: url(image/header.webp) no-repeat center top/100%;
}
}
@media only screen and (max-width: 1080px) {
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 450px;
margin: 0;
padding: 30px 0 0 5%;
background: url(image/header.webp) no-repeat left top/cover;
}
}
@media only screen and (max-width: 640px) {
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 400px;
margin: 0;
padding: 30px 0 0 5%;
background: url(image/header.webp) no-repeat left top/cover;
}
}
@media only screen and (max-width: 480px) {
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
min-height: 350px;
margin: 0;
padding: 25px 0 0 5%;
background: url(image/header.webp) no-repeat 15% top/cover;
}
}

#photo2 h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
font-weight:500;
font-size: 63px;
line-height: 100%;
}
#photo2 h6 span{
font-size: 38px;
font-weight: 400;
}
#photo2 h6 .fc{
color: #0e6bb2;
font-weight:500;
font-size: 67px;
}
@media only screen and (max-width: 1280px) {
#photo2 h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight:500;
font-size: 55px;
line-height: 100%;
}
#photo2 h6 span{
font-size: 34px;
font-weight: 400;
}
}
@media only screen and (max-width: 480px) {
#photo2 h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
text-align: left;
font-weight:500;
font-size: 45px;
line-height: 100%;
}
#photo2 h6 span{
font-size: 28px;
font-weight: 400;
}
#photo2 h6 .fc{
color: #0e6bb2;
font-weight:500;
font-size: 53px;
}
}

#photo2 p{
text-align: left;
color: #43b12d;
font-size: 25px;
line-height: 150%;
margin: 0;
padding: 0;
text-shadow: 2px 2px 0 #fff;
}
#photo2 p strong{
font-size: 35px;
font-weight: 500;
}
#photo2 p span{
background: #43b12d;
color: #fff;
font-size: 30px;
font-weight: 500;
padding:0 15px;
line-height: 200%;
text-shadow: none;
}
@media only screen and (max-width: 1280px) {
#photo2 p{
text-align: left;
color: #43b12d;
font-size: 20px;
line-height: 150%;
margin: 0;
padding: 0;
text-shadow: 2px 2px 0 #fff;
}
#photo2 p strong{
font-size: 30px;
font-weight: 500;
}
}
@media only screen and (max-width: 480px) {
#photo2 p{
text-align: left;
color: #43b12d;
font-size:18px;
line-height: 150%;
margin: 0;
padding: 0;
text-shadow: 2px 2px 0 #fff;
font-weight: 500;
}
#photo2 p strong{
font-size: 28px;
font-weight: 500;
}
#photo2 p span{
background: #43b12d;
color: #fff;
font-size: 28px;
font-weight: 500;
padding:0 15px;
line-height: 200%;
text-shadow: none;
}
}

footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 2% 15px 10%;
background: #0d3854;
text-align: left;
}
footer img{
max-width: 20%;
margin: 0;
}
@media only screen and (max-width: 1600px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 2% 15px 4%;
background: #0d3854;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 15px 0 0 0;
background: #0d3854;
text-align: center;
}
footer img{
max-width: 15%;
margin: 0 0 15px;
}
}
@media only screen and (max-width: 835px) {
footer img{
max-width: 20%;
margin: 0 0 15px;
}
}
@media only screen and (max-width: 640px) {
footer img{
max-width: 25%;
margin: 0 0 15px;
}
}
@media only screen and (max-width: 480px) {
footer img{
max-width: 30%;
margin: 0 0 15px;
}
}

nav{
float: right;
width: 80%;
height: auto;
margin:0 0 0;
padding: 30px 0 0;
text-align: left;
}

nav ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: right;
}
nav li{
float: left;
margin: 0 0 0 3%;
padding: 0;
list-style-type: none;
font-size: 19px;
color: #fff;
line-height: 100%;
text-align: center;
font-weight: 400;
}
nav li.toi{
display: none;
border:none;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
background: none;
text-align: center;
}
nav li a:link,nav li a:visited{
text-decoration: none;
color: #fff;
}
nav li a:hover{
text-decoration: underline;
color: #fff;
}
@media only screen and (max-width: 1280px) {
nav li{
float: left;
margin: 0 0 0 3%;
padding: 0;
list-style-type: none;
font-size: 15px;
color: #fff;
line-height: 100%;
text-align: center;
font-weight: 400;
}
}
@media only screen and (max-width:1080px) {
nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:0;
background: #0d3854;
}
nav ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
border-top:1px solid #fff;
border-left:1px solid #fff;
}
nav li,nav li.toi{
display: block;
width: 33.3%;
float: left;
list-style-type: none;
font-size: 17px;
margin: 0;
padding: 20px 0 20px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
text-align: center;
background: none;
}
nav li.toi{
display: inherit;
border:none;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
background: none;
text-align: center;
}
nav li a:link,nav li a:visited,nav li.toi a:link,nav li.toi a:visited{
float: none;
display: block;
width: 100%;
text-decoration: none;
color: #fff;
background:none;
padding: 0;
text-align: center;
border-right: none;
}
nav li a:hover,nav li.toi a:hover{
text-decoration: underline;
}
}
@media only screen and (max-width: 640px) {
nav li,nav li.toi{
display: block;
width: 33.3%;
float: left;
list-style-type: none;
font-size: 15px;
margin: 0;
padding: 15px 0 15px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
text-align: center;
background: none;
}
nav li.toi{
border:none;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
background: none;
text-align: center;
}
}
@media only screen and (max-width: 480px) {
nav li,nav li.toi{
display: block;
width: 33.3%;
float: left;
list-style-type: none;
font-size: 14px;
margin: 0;
padding: 15px 0 15px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
text-align: center;
background: none;
}
nav li.toi{
border:none;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
background: none;
text-align: center;
}
}
@media only screen and (max-width: 414px) {
nav li,nav li.toi{
display: block;
width: 50%;
float: left;
list-style-type: none;
font-size: 14px;
margin: 0;
padding: 15px 0 15px;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
text-align: center;
background: none;
}
nav li.toi{
border:none;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
background: none;
text-align: center;
}
}

address{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:20px 0 15px 10%;
font-style: normal;
}
address dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
address dt{
clear: both;
float: left;
width: 25%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-size: 30px;
}
address dd{
float: left;
width: 75%;
margin: 0;
padding: 0;
text-align: left;
font-size: 20px;
line-height: 140%;
}
@media only screen and (max-width: 1600px) {
address{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:20px 0 15px 4%;
font-style: normal;
}
}
@media only screen and (max-width: 1280px) {
address dt{
clear: both;
float: left;
width: 25%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-size: 25px;
}
address dd{
float: left;
width: 75%;
margin: 0;
padding: 0;
text-align: left;
font-size: 16px;
line-height: 140%;
}
}
@media only screen and (max-width: 1080px) {
address dt{
clear: both;
float: left;
width: 30%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-size: 25px;
}
address dd{
float: left;
width: 70%;
margin: 0;
padding: 0;
text-align: left;
font-size: 16px;
line-height: 140%;
}
}
@media only screen and (max-width: 835px) {
address dt{
clear: both;
float: left;
width: 35%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-size: 20px;
line-height: 140%;
}
address dd{
float: left;
width: 65%;
margin: 0;
padding: 0;
text-align: left;
font-size: 14px;
line-height: 140%;
}
}
@media only screen and (max-width: 640px) {
address dt{
clear: both;
float: left;
width: 40%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-size: 20px;
line-height: 140%;
}
address dd{
float: left;
width: 60%;
margin: 0;
padding: 0;
text-align: left;
font-size: 13px;
line-height: 140%;
}
}
@media only screen and (max-width: 480px) {
address{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:10px 3% 10px 3%;
font-style: normal;
}
address dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: center;
font-size: 20px;
line-height: 100%;
}
address dd{
clear: both;
float: left;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
font-size: 13px;
line-height: 140%;
}
}