/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:20px;
font-family: 'M PLUS 1p', sans-serif;
	LINE-HEIGHT: 180%;
	text-align: center;
	font-weight: 300;
	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: #00a269;
}

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

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

/*ヘッダ
--------------------------------------------------------------------------*/
header{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 10px 0 0;
background: #000;
text-align: left;
}
header img{
margin: 0 0 10px 5%;
max-width: 20%;
}

menu{
float: right;
width: 50%;
height: auto;
margin: 0;
padding: 20px 5% 0 0;
text-align: left;
}
@media only screen and (max-width: 1366px) {
header img{
margin: 0 0 10px 3%;
max-width: 20%;
}
menu{
float: right;
width: 80%;
height: auto;
margin: 0;
padding: 20px 3% 0 0;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
header img{
margin: 0 0 10px 3%;
max-width: 17%;
}
menu{
float: right;
width: 80%;
height: auto;
margin: 0;
padding: 20px 3% 0 0;
text-align: left;
}
}
@media only screen and (max-width: 835px) {
header img{
margin: 0 0 10px 3%;
max-width: 20%;
}
menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 5px 3% 15px;
text-align: left;
}
}
@media only screen and (max-width: 640px) {
header img{
margin: 0 0 10px 3%;
max-width: 25%;
}
menu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 5px 0 0 0;
}
}
@media only screen and (max-width: 480px) {
header img{
margin: 0 0 10px 3%;
max-width: 30%;
}
}
@media only screen and (max-width: 414px) {
header img{
margin: 0 0 10px 3%;
max-width: 35%;
}
}

menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
}
menu li{
text-align: left;
float:left;
list-style-type: none;
font-size:20px;
line-height: 100%;
margin: 0 0 0 7%;
padding: 0;
color: #fff;
}
menu li a:link,menu li a:visited{
display: block;
color: #fff;
text-decoration: none;
}
menu li a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 1366px) {
menu li{
text-align: left;
float:left;
list-style-type: none;
font-size:17px;
line-height: 100%;
margin: 0 0 0 7%;
padding: 0;
color: #fff;
}
}
@media only screen and (max-width: 835px) {
menu li{
text-align: left;
float:left;
list-style-type: none;
font-size:17px;
line-height: 100%;
margin: 0 7% 0 0;
padding: 0;
color: #fff;
}
}
@media only screen and (max-width: 640px) {
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;
border-bottom:1px solid #fff;
}
menu li{
width: 20%;
border-right:1px solid #fff;
text-align:center;
float:left;
list-style-type: none;
font-size:14px;
line-height: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
menu li a:link,menu li a:visited{
display: block;
width: 100%;
color: #fff;
padding: 12px 0;
text-decoration: none;
}
menu li a:hover{
text-decoration: underline;
}
}
@media only screen and (max-width: 480px) {
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;
border-bottom:none;
}
menu li{
width: 50%;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
text-align:center;
float:left;
list-style-type: none;
font-size:14px;
line-height: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
menu li.bno{
display: none;
}
}
@media only screen and (max-width: 414px) {
menu li{
width: 50%;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
text-align:center;
float:left;
list-style-type: none;
font-size:13px;
line-height: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}

#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 150px;
background: url(image/photo-back.webp) repeat-x center top/cover;
}
#photo-back{
position:relative;
clear: both;
float: left;
width: 80%;
height: 700px;
margin: 0 0 0 20%;
padding-top:30%;
background: url(image/photo.webp) no-repeat right top/contain;
}
@media only screen and (max-width: 1440px) {
#photo-back{
position:relative;
clear: both;
float: left;
width: 80%;
height: 600px;
margin: 0 0 0 20%;
padding-top:30%;
background: url(image/photo.webp) no-repeat right top/contain;
}
}
@media only screen and (max-width: 1280px) {
#photo-back{
position:relative;
clear: both;
float: left;
width: 80%;
height: 500px;
margin: 0 0 0 20%;
padding-top:30%;
background: url(image/photo.webp) no-repeat right top/contain;
}
}
@media only screen and (max-width: 1080px) {
#photo-back{
position:relative;
clear: both;
float: left;
width: 80%;
height: 450px;
margin: 0 0 0 20%;
padding-top:30%;
background: url(image/photo.webp) no-repeat right top/contain;
}
}
@media only screen and (max-width: 835px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 120px;
background: url(image/photo-back.webp) repeat-x center top/cover;
}
#photo-back{
position:relative;
clear: both;
float: left;
width: 80%;
height:350px;
margin: 0 0 0 20%;
padding-top:30%;
background: url(image/photo.webp) no-repeat right top/contain;
}
}
@media only screen and (max-width: 640px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 90px;
background: url(image/photo-back.webp) repeat-x center top/cover;
}
#photo-back{
position:relative;
clear: both;
float: left;
width: 90%;
height:350px;
margin: 0 0 0 10%;
padding-top:30%;
background: url(image/photo.webp) no-repeat right top/contain;
}
}
@media only screen and (max-width: 480px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 100px;
background: url(image/photo-back.webp) repeat-x center top/cover;
}
}
@media only screen and (max-width: 414px) {
#photo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 60px;
background: url(image/photo-back.webp) repeat-x center top/cover;
}
}
h1,h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
font-size: 35px;
font-weight: 300;
text-align: left;
line-height: 120%;
}
@media only screen and (max-width: 1280px) {
h1,h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
font-size: 30px;
font-weight: 300;
text-align: left;
line-height: 120%;
}
}
@media only screen and (max-width: 835px) {
h1,h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
font-size: 25px;
font-weight: 300;
text-align: left;
line-height: 120%;
}
}
@media only screen and (max-width: 640px) {
h1,h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
font-size: 20px;
font-weight: 300;
text-align: left;
line-height: 120%;
}
}
@media only screen and (max-width: 480px) {
h1,h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
font-size: 20px;
font-weight: 300;
text-align: left;
line-height: 120%;
}
}
@media only screen and (max-width: 414px) {
h1,h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
font-size: 17px;
font-weight: 300;
text-align: left;
line-height: 120%;
}
}

#photo-box{
position:absolute;
text-align: left;
width: 80%;
margin: 80px 0 0 20%;
}
h1 span,h2 span{
background: #fff;
padding: 0 5px;
}
#photo-box img.pb{
margin: 100px 0 0 10%;
}
@media only screen and (max-width: 1280px) {
#photo-box{
position:absolute;
text-align: left;
width: 80%;
margin: 70px 0 0 20%;
}
#photo-box img.pb{
margin: 50px 0 0 5%;
max-width: 55%;
}
}
@media only screen and (max-width: 1080px) {
#photo-box{
position:absolute;
text-align: left;
width: 90%;
margin: 50px 0 0 10%;
}
#photo-box img.pb{
margin: 40px 0 0 5%;
max-width: 50%;
}
}
@media only screen and (max-width: 835px) {
#photo-box img.pb{
margin:20px 0 0 5%;
max-width: 55%;
}
}
@media only screen and (max-width: 640px) {
#photo-box{
position:absolute;
text-align: left;
width: 95%;
margin: 30px 0 0 5%;
}
#photo-box img{
max-width: 40%;
}
#photo-box img.pb{
margin:15px 0 0 7%;
max-width: 60%;
}
}
@media only screen and (max-width: 480px) {
#photo-box{
position:absolute;
text-align: left;
width: 95%;
margin: 90px 0 0 5%;
}
#photo-box img{
max-width: 55%;
}
#photo-box img.pb{
margin:15px 0 0 7%;
max-width: 75%;
}
}
@media only screen and (max-width: 414px) {
#photo-box{
position:absolute;
text-align: left;
width: 95%;
margin: 70px 0 0 5%;
}
#photo-box img{
max-width: 65%;
}
#photo-box img.pb{
margin:15px 0 0 5%;
max-width: 85%;
}
}

#mail-bu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -110px 0 0;
padding: 0;
text-align: center;
}
@media only screen and (max-width: 1080px) {
#mail-bu img{
max-width: 40%;
}
}
@media only screen and (max-width: 835px) {
#mail-bu{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -90px 0 0;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#mail-bu img{
max-width: 50%;
}
}
@media only screen and (max-width: 480px) {
#mail-bu img{
max-width: 60%;
}
}
@media only screen and (max-width: 414px) {
#mail-bu img{
max-width: 70%;
}
}

/*main
--------------------------------------------------------------------------*/
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 100px 0 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{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 80px 0 0;
padding: 0;
text-align: center;
}
main p{
font-size: 16px;
margin: 0 0 35px;
text-align: left;
line-height: 180%;
}
}
@media only screen and (max-width: 480px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 414px) {
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 35px 0 0;
padding: 0;
text-align: center;
}
}

#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
}
#info h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
text-align: center;
font-size: 40px;
font-weight: 500;
line-height: 120%;
}
#info p{
text-align: center;
font-size: 20px;
line-height: 200%;
margin: 0 0 70px;
}
#info img{
margin: 0 2%;
max-width: 31%;
}
@media only screen and (max-width: 1080px) {
#info{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0;
}
#info h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0;
text-align: center;
font-size: 40px;
font-weight: 500;
line-height: 120%;
}
#info p{
text-align: center;
font-size: 17px;
line-height: 200%;
margin: 0 0 60px;
}
#info img{
margin: 0 2%;
max-width: 23%;
}
}
@media only screen and (max-width: 835px) {
#info img{
margin: 0 2%;
max-width: 25%;
}
}
@media only screen and (max-width: 640px) {
#info h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: center;
font-size: 40px;
font-weight: 500;
line-height: 120%;
}
#info p{
text-align: center;
font-size: 15px;
line-height: 200%;
margin: 0 5% 40px;
}
#info img{
margin: 0 2%;
max-width: 29%;
}
}
@media only screen and (max-width: 480px) {
#info h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-size: 35px;
font-weight: 500;
line-height: 120%;
}
#info p{
text-align: center;
font-size: 14px;
line-height: 200%;
margin: 0 5% 30px;
}
}
@media only screen and (max-width: 414px) {
#info p{
text-align: left;
font-size: 13px;
line-height: 180%;
margin: 0 3% 30px;
}
#info img{
margin: 0 1%;
max-width: 31%;
}
}

#jisseki{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 6% 5% 700px 0;
background: url(image/jisseki2.webp) no-repeat right bottom/55%,url(image/jisseki1.webp) no-repeat left top/55%,url(image/jisseki-title.png) no-repeat 62% 27%;
}
@media only screen and (max-width: 1440px) {
#jisseki{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 6% 5% 600px 0;
background: url(image/jisseki2.webp) no-repeat right bottom/55%,url(image/jisseki1.webp) no-repeat left top/55%,url(image/jisseki-title.png) no-repeat 62% 27%;
}
}
@media only screen and (max-width: 1366px) {
#jisseki{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 6% 5% 550px 0;
background: url(image/jisseki2.webp) no-repeat right bottom/55%,url(image/jisseki1.webp) no-repeat left top/55%,url(image/jisseki-title.png) no-repeat 62% 27%;
}
}
@media only screen and (max-width: 1280px) {
#jisseki{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 3% 5% 550px 0;
background: url(image/jisseki2.webp) no-repeat right bottom/55%,url(image/jisseki1.webp) no-repeat left top/55%,url(image/jisseki-title.png) no-repeat 62% 27%;
}
}
@media only screen and (max-width: 1080px) {
#jisseki{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0% 5% 350px 0;
background: url(image/jisseki2.webp) no-repeat right bottom/45%,url(image/jisseki1.webp) no-repeat left top/45%,url(image/jisseki-title.png) no-repeat 50% 10%;
}
}
@media only screen and (max-width: 835px) {
#jisseki{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0% 5% 250px 0;
background: url(image/jisseki2.webp) no-repeat right bottom/40%,url(image/jisseki1.webp) no-repeat left top/40%,url(image/jisseki-title.png) no-repeat 45% top/25%;
}
}
@media only screen and (max-width: 640px) {
#jisseki{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0% 5% 180px 0;
background: url(image/jisseki2.webp) no-repeat right bottom/40%,url(image/jisseki1.webp) no-repeat left bottom/40%,url(image/jisseki-title.png) no-repeat 5% top/25%;
}
}
@media only screen and (max-width: 480px) {
#jisseki{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0% 5% 150px 0;
background: url(image/jisseki2.webp) no-repeat right bottom/45%,url(image/jisseki1.webp) no-repeat left bottom/45%,url(image/jisseki-title.png) no-repeat -30px top/25%;
}
}
@media only screen and (max-width: 414px) {
#jisseki{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0% 5% 130px 0;
background: url(image/jisseki2.webp) no-repeat right bottom/45%,url(image/jisseki1.webp) no-repeat left bottom/45%,url(image/jisseki-title.png) no-repeat -30px top/28%;
}
}

#jisseki ul{
clear: both;
float: right;
width: 35%;
height: auto;
margin: 0 0 10px;
padding: 0;
}
#jisseki li{
list-style-type: none;
font-size: 20px;
line-height: 150%;
margin: 0 0 15px;
text-align: left;
padding: 0 0 0 30px;
background: url(image/jisseki-li.png) no-repeat left center;
}
#jisseki p{
clear: both;
float: right;
width: 40%;
text-align: center;
font-size: 20px;
line-height: 100%;
margin: 0;
}
@media only screen and (max-width: 1080px) {
#jisseki ul{
clear: both;
float: right;
width: 55%;
height: auto;
margin: 0 0 5px;
padding: 0;
}
#jisseki li{
list-style-type: none;
font-size: 17px;
line-height: 150%;
margin: 0 0 15px 15%;
text-align: left;
padding: 0 0 0 25px;
background: url(image/jisseki-li.png) no-repeat left center;
}
#jisseki p{
clear: both;
float: right;
width: 40%;
text-align: right;
font-size: 17px;
line-height: 100%;
margin: 0;
}
}
@media only screen and (max-width: 835px) {
#jisseki li{
list-style-type: none;
font-size: 15px;
line-height: 150%;
margin: 0 0 15px 15%;
text-align: left;
padding: 0 0 0 25px;
background: url(image/jisseki-li.png) no-repeat left center;
}
#jisseki p{
clear: both;
float: right;
width: 40%;
text-align: right;
font-size: 15px;
line-height: 100%;
margin: 0;
}
}
@media only screen and (max-width: 640px) {
#jisseki ul{
clear: both;
float: right;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#jisseki li{
list-style-type: none;
font-size: 15px;
line-height: 150%;
margin: 0 0 15px 35%;
text-align: left;
padding: 0 0 0 25px;
background: url(image/jisseki-li.png) no-repeat left center;
}
#jisseki p{
clear: both;
float: right;
width: 100%;
text-align: right;
font-size: 15px;
line-height: 100%;
margin: -35px 0 0;
}
}
@media only screen and (max-width: 480px) {
#jisseki li{
list-style-type: none;
font-size: 14px;
line-height: 150%;
margin: 0 0 10px 25%;
text-align: left;
padding: 0 0 0 6%;
background: url(image/jisseki-li.png) no-repeat left center/4%;
}
#jisseki p{
clear: both;
float: right;
width: 100%;
text-align: right;
font-size: 14px;
line-height: 100%;
margin: -30px 0 0;
}
}
@media only screen and (max-width: 414px) {
#jisseki li{
list-style-type: none;
font-size: 13px;
line-height: 150%;
margin: 0 0 10px 15%;
text-align: left;
padding: 0 0 0 6%;
background: url(image/jisseki-li.png) no-repeat left center/4%;
}
#jisseki p{
clear: both;
float: right;
width: 100%;
text-align: right;
font-size: 13px;
line-height: 100%;
margin: -30px 0 0;
}
}

#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 100px;
padding: 0;
}
#photo2 ul{
margin: 0;
padding: 0;
}
/*スライダーのためのcss*/
#photo2 .slider2 img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
#photo .slider2 .slick-slide {
    margin:0 40px;/*スライド左右の余白調整*/
}
#photo2 .slider2 img{
max-width: 100%;
}
@media only screen and (max-width: 1080px) {
#photo2 .slider2 .slick-slide {
    margin:0 20px;/*スライド左右の余白調整*/
}
}
@media only screen and (max-width: 835px) {
#photo2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 30px;
padding: 0;
}
}
@media only screen and (max-width: 640px) {
#photo2 .slider2 .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}
}

#price{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 60px 0 80px;
background: url("image/price-back.webp") repeat center top;
}
#price h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 70px 0 10px; 
text-align: center;
font-weight: 500;
line-height: 100%;
font-size: 40px;
background: url(image/price-h4.png) no-repeat center bottom;
}
@media only screen and (max-width: 1280px) {
#price h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 70px 0 10px; 
text-align: center;
font-weight: 500;
line-height: 100%;
font-size: 40px;
background: url(image/price-h4.png) no-repeat center bottom/20%;
}
}
@media only screen and (max-width: 1080px) {
#price{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 40px 0 60px;
background: url("image/price-back.webp") repeat center top;
}
}
@media only screen and (max-width: 835px) {
#price{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:10px 0 50px;
background: url("image/price-back.webp") repeat center top;
}
#price h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 50px 0 10px; 
text-align: center;
font-weight: 500;
line-height: 100%;
font-size: 40px;
background: url(image/price-h4.png) no-repeat center bottom/20%;
}
}
@media only screen and (max-width: 640px) {
#price h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 50px 0 10px; 
text-align: center;
font-weight: 500;
line-height: 100%;
font-size: 40px;
background: url(image/price-h4.png) no-repeat center bottom/30%;
}
}
@media only screen and (max-width: 480px) {
#price h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding:50px 0 5px; 
text-align: center;
font-weight: 500;
line-height: 100%;
font-size: 35px;
background: url(image/price-h4.png) no-repeat center bottom/30%;
}
}

#price-waku{
clear: both;
float: left;
width: 80%;
height: auto;
margin: 0 10% 30px;
padding: 50px 5% 10px;
background: #fff;
}
#price-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
}
@media only screen and (max-width: 1440px) {
#price-waku{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5% 30px;
padding: 50px 5% 10px;
background: #fff;
}
}
@media only screen and (max-width: 1080px) {
#price-waku{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5% 30px;
padding: 50px 3% 10px;
background: #fff;
}
}
@media only screen and (max-width: 835px) {
#price-waku{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5% 30px;
padding: 50px 6% 0;
background: #fff;
}
}
@media only screen and (max-width: 480px) {
#price-waku{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5% 30px;
padding: 30px 6% 0;
background: #fff;
}
}

.price-title{
clear: both;
float: left;
width: 47%;
height: auto;
margin: 0 3% 0 0;
padding: 0;
}
.price-text{
float: right;
width: 50%;
height: auto;
margin: 0 0 50px;
padding: 20px 3% 0;
border: 1px solid #000;
}
@media only screen and (max-width: 1080px) {
.price-title{
clear: both;
float: left;
width: 42%;
height: auto;
margin: 0 3% 0 0;
padding: 0;
}
.price-text{
float: right;
width: 55%;
height: auto;
margin: 0 0 40px;
padding: 20px 3% 0;
border: 1px solid #000;
}
}
@media only screen and (max-width: 835px) {
.price-title{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.price-text{
float: right;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 20px 3% 0;
border: 1px solid #000;
}
}
@media only screen and (max-width: 480px) {
.price-text{
float: right;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 20px 5% 0;
border: 1px solid #000;
}
}

#price h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
font-weight: 800;
font-size: 50px;
line-height: 100%;
color: #285fc1;
text-align: left;
}
.price-title p{
text-align: left;
font-size: 17px;
line-height: 180%;
}
.price-text p{
font-size: 15px;
margin: 0 0 20px;
line-height: 150%;
}
.f35b{
font-size: 35px;
font-weight: 800;
line-height: 200%;
}
.f20{
font-size: 20px;
font-weight: 500;
}
@media only screen and (max-width: 1280px) {
#price h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
font-weight: 800;
font-size: 45px;
line-height: 100%;
color: #285fc1;
text-align: left;
}
.f20{
font-size: 20px;
font-weight: 300;
}
}
@media only screen and (max-width: 1080px) {
.price-text p{
font-size: 14px;
margin: 0 0 20px;
line-height: 150%;
}
}
@media only screen and (max-width: 835px) {
#price h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 5px;
padding: 0;
font-weight: 800;
font-size: 45px;
line-height: 100%;
color: #285fc1;
text-align: left;
}
.price-title p{
text-align: left;
font-size: 14px;
line-height: 160%;
margin: 0 0 20px;
}
.price-text p{
font-size: 14px;
margin: 0 0 20px;
line-height: 150%;
}
.f35b{
font-size: 30px;
font-weight: 800;
line-height: 200%;
}
.f20{
font-size: 15px;
font-weight: 300;
}
}
@media only screen and (max-width: 480px) {
#price h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 5px;
padding: 0;
font-weight: 800;
font-size: 40px;
line-height: 100%;
color: #285fc1;
text-align: left;
}
.price-title p{
text-align: left;
font-size: 13px;
line-height: 160%;
margin: 0 0 20px;
}
.price-text p{
font-size: 13px;
margin: 0 0 20px;
line-height: 150%;
}
.f35b{
font-size: 25px;
font-weight: 800;
line-height: 200%;
}
.f20{
font-size: 13px;
font-weight: 300;
}
}
@media only screen and (max-width: 414px) {
#price h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 5px;
padding: 0;
font-weight: 800;
font-size: 35px;
line-height: 100%;
color: #285fc1;
text-align: left;
}
}

#sikaku{
clear: both;
float: left;
width: 50%;
height: auto;
margin: 0 25% 50px;
padding: 10px 5%;
text-align: center;
border: 1px solid #000;
}
#sikaku p{
text-align: left;
font-size: 17px;
line-height: 150%;
margin: 0;
text-indent: -3em;
}
@media only screen and (max-width: 1366px) {
#sikaku{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0 20% 50px;
padding: 10px 5%;
text-align: center;
border: 1px solid #000;
}
#sikaku p{
text-align: left;
font-size: 16px;
line-height: 150%;
margin: 0;
}
}
@media only screen and (max-width: 1080px) {
#sikaku{
clear: both;
float: left;
width: 70%;
height: auto;
margin: 0 15% 40px;
padding: 10px 3% 10px 10%;
text-align: center;
border: 1px solid #000;
}
#sikaku p{
text-align: left;
font-size: 15px;
line-height: 150%;
margin: 0;
}
}
@media only screen and (max-width: 835px) {
#sikaku{
clear: both;
float: left;
width: 80%;
height: auto;
margin: 0 10% 30px;
padding: 10px 3% 10px 10%;
text-align: center;
border: 1px solid #000;
}
#sikaku p{
text-align: left;
font-size: 14px;
line-height: 150%;
margin: 0;
}
}
@media only screen and (max-width: 640px) {
#sikaku{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5% 30px;
padding: 10px 3% 10px 10%;
text-align: center;
border: 1px solid #000;
}
#sikaku p{
text-align: left;
font-size: 13px;
line-height: 150%;
margin: 0;
}
}
@media only screen and (max-width: 414px) {
#sikaku{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5% 30px;
padding: 10px 3% 10px 15%;
text-align: center;
border: 1px solid #000;
}
}

#price-pict{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#price-pict img{
max-width: 30%;
margin: 0 1%;
}
@media only screen and (max-width: 480px) {
#price-pict img{
max-width: 80%;
margin: 0 0 15px;
}
}

#contact-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:400px 0 0;
background: url(image/contact-back.webp) no-repeat right top/auto 400px,#eee;
position: relative;
}
@media only screen and (max-width: 1080px) {
#contact-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:300px 0 0;
background: url(image/contact-back.webp) no-repeat right top/auto 300px,#eee;
position: relative;
}
}
@media only screen and (max-width: 835px) {
#contact-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:200px 0 0;
background: url(image/contact-back.webp) no-repeat right top/auto 200px,#eee;
position: relative;
}
}
@media only screen and (max-width: 640px) {
#contact-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:150px 0 0;
background: url(image/contact-back.webp) no-repeat right top/auto 150px,#eee;
position: relative;
}
}
@media only screen and (max-width: 480px) {
#contact-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding:150px 0 0;
background: url(image/contact-back.webp) no-repeat right top/auto 150px,#eee;
position: relative;
}
}

#one-point{
clear: both;
float: left;
width: 45%;
height: auto;
margin: 0 55% 0 0;
padding: 0 3%;
background: #fff;
text-align: left;
z-index: 9998;
position: absolute;
top:100px;
left: 0;
}
#one-point img{
max-width: 50%;
margin: -30px 0 10px;
}
@media only screen and (max-width: 1280px) {
#one-point{
clear: both;
float: left;
width: 55%;
height: auto;
margin: 0 45% 0 0;
padding: 0 3%;
background: #fff;
text-align: left;
z-index: 9998;
position: absolute;
top:100px;
left: 0;
}
}
@media only screen and (max-width: 1080px) {
#one-point{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0 40% 0 0;
padding: 0 3%;
background: #fff;
text-align: left;
z-index: 9998;
position: absolute;
top:100px;
left: 0;
}
}
@media only screen and (max-width: 835px) {
#one-point{
clear: both;
float: left;
width: 65%;
height: auto;
margin: 0 35% 0 0;
padding: 0 3%;
background: #fff;
text-align: left;
z-index: 9998;
position: absolute;
top:80px;
left: 0;
}
}
@media only screen and (max-width: 640px) {
#one-point{
clear: both;
float: left;
width: 70%;
height: auto;
margin: 0 30% 0 0;
padding: 0 3%;
background: #fff;
text-align: left;
z-index: 9998;
position: absolute;
top:70px;
left: 0;
}
}
@media only screen and (max-width: 480px) {
#one-point{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0 0;
padding: 0 3%;
background: #fff;
text-align: left;
z-index: 9998;
position:relative;
top:0;
left: 0;
}
}

#one-point h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-weight: 500;
font-size: 30px;
line-height: 120%;
}
#one-point p{
font-size: 17px;
line-height: 180%;
margin: 0 0 25px;
text-align: left;
}
#one-point p span{
background: #285fc1;
color: #fff;
padding: 0 5px;
}
@media only screen and (max-width: 1080px) {
#one-point p{
font-size: 15px;
line-height: 180%;
margin: 0 0 25px;
text-align: left;
}
}
@media only screen and (max-width: 640px) {
#one-point h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
text-align: left;
font-weight: 500;
font-size:25px;
line-height: 120%;
}
#one-point p{
font-size: 13px;
line-height: 180%;
margin: 0 0 20px;
text-align: left;
}
}

/*光るテキスト*/
.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;}
}

#contact{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0; 
padding: 150px 0 100px;
background: url(image/contact-ar.png) no-repeat left top,linear-gradient(to bottom left,#c4d8fd,#285fc1);
text-align: center;
}
@media only screen and (max-width: 835px) {
#contact{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0; 
padding: 260px 0 100px;
background: url(image/contact-ar.png) no-repeat left top/80%,linear-gradient(to bottom left,#c4d8fd,#285fc1);
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#contact{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0; 
padding: 250px 0 60px;
background: url(image/contact-ar.png) no-repeat left top/90%,linear-gradient(to bottom left,#c4d8fd,#285fc1);
text-align: center;
}
}
@media only screen and (max-width: 480px) {
#contact{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0; 
padding: 40px 0 40px;
background: url(image/contact-ar.png) no-repeat left top/40%,linear-gradient(to bottom left,#c4d8fd,#285fc1);
text-align: center;
}
}

#contact h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 100px;
line-height: 100%;
}
#contact h6 span{
text-align: center;
font-size: 40px;
font-weight: 300;
line-height: 100%;
}
@media only screen and (max-width: 1440px) {
#contact h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 80px;
line-height: 100%;
}
#contact h6 span{
text-align: center;
font-size: 35px;
font-weight: 300;
line-height: 100%;
}
}
@media only screen and (max-width: 640px) {
#contact h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 60px;
line-height: 100%;
}
#contact h6 span{
text-align: center;
font-size: 30px;
font-weight: 300;
line-height: 100%;
}
}
@media only screen and (max-width: 480px) {
#contact h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 40px;
line-height: 110%;
}
#contact h6 span{
text-align: center;
font-size: 25px;
font-weight: 300;
line-height: 110%;
}
}

#mail{
clear: both;
float: left;
width: 70%;
height: auto;
margin: 0 15%;
padding: 50px 5%;
background: #fff;
}
#mail p{
font-size: 20px;
}
@media only screen and (max-width: 1080px) {
#mail{
clear: both;
float: left;
width: 80%;
height: auto;
margin: 0 10%;
padding: 40px 3%;
background: #fff;
}
#mail p{
font-size: 15px;
}
}
@media only screen and (max-width: 835px) {
#mail{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5%;
padding: 30px 3%;
background: #fff;
}
#mail p{
font-size: 13px;
}
}

table {
	clear:both;
	float: left;
	width:100%;
	margin:5px 0 50px;
    border:1px solid #333;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
	font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
table caption{
width: 25%;
font-size: 17px;
text-align: center;
margin: 0;
padding: 15px 0 7px ;
background: #ccc;
border-radius: 10px 10px 0 0;
font-weight: 300;
}
th{
	width:25%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 17px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 17px;
}
@media only screen and (max-width: 1280px) {
th{
	width:25%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 15px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 15px;
}
}
@media only screen and (max-width: 835px) {
table caption{
width: 30%;
font-size: 17px;
text-align: center;
margin: 0;
padding: 15px 0 7px ;
background: #ccc;
border-radius: 10px 10px 0 0;
font-weight: 300;
}
th{
	width:30%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 14px;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 14px;
}
}
@media only screen and (max-width: 640px) {
table caption{
width: 35%;
font-size: 15px;
text-align: center;
margin: 0;
padding: 15px 0 7px ;
background: #ccc;
border-radius: 10px 10px 0 0;
font-weight: 300;
}
th{
	width:35%;
	background:#eee;
	text-align:center;
	font-weight: normal;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 13px;
	line-height:110%;
	}
td{
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	padding: 10px;
	font-size: 13px;
}
}
@media only screen and (max-width: 480px) {
table caption{
width: 35%;
font-size: 15px;
text-align: center;
margin: 0;
padding: 10px 0 7px ;
background: #ccc;
border-radius: 10px 10px 0 0;
font-weight: 300;
}
}

input[type="text"],input[type="email"],textarea{
width: 100%;
}
textarea{
height:200px;
}
@media only screen and (max-width: 480px) {
input[type="checkbox"]{
line-height: 110%;
}
textarea{
font-size: 13px;
}
}

#mail-check{
clear: both;
float: left;
width: 50%;
margin: 30px 25% 30px;
}
@media only screen and (max-width: 1080px) {
#mail-check{
clear: both;
float: left;
width: 80%;
margin: 30px 10% 30px;
}
}
@media only screen and (max-width: 640px) {
#mail-check{
clear: both;
float: left;
width: 90%;
margin: 30px 5% 30px;
}
}
@media only screen and (max-width: 480px) {
#mail-check{
clear: both;
float: left;
width: 94%;
margin: 30px 3% 30px;
}
}

input.btn_submit{
margin: 0 1%;
width: 160px;
height: 50px;
border-radius: 7px;
border: 3px solid #ba9b51;
background: #285fc1;
color: #fff;
font-size: 20px;
cursor: pointer;
}
input.btn_submit2,input.btn_submit3{
margin: 0 1%;
width: 120px;
height: 40px;
border-radius: 7px;
border: 2px solid #ba9b51;
background: #888;
color: #fff;
font-size: 16px;
cursor: pointer;
}
@media only screen and (max-width: 480px) {
input.btn_submit{
margin: 0 2%;
width: 44%;
height: 50px;
border-radius: 7px;
border: 3px solid #ba9b51;
background: #285fc1;
color: #fff;
font-size: 15px;
cursor: pointer;
}
input.btn_submit2,input.btn_submit3{
margin: 0 2%;
width: 44%;
height: 40px;
border-radius: 7px;
border: 2px solid #ba9b51;
background: #888;
color: #fff;
font-size: 13px;
cursor: pointer;
}
}

.hissu{
background: #e05061;
color: #fff;
border-radius:4px;
font-size: 11px;
padding: 0 5px;
margin: 0 0 0 5px;
line-height: 100%;
}

#toi{
clear: both;
float: left;
width: 100%;
height: auto;
text-align: center;
margin: 100px 0 30px;
padding: 0;
}
#toi h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 20px 0;
text-align: center;
background: #285fc1;
color: #fff;
font-size: 25px;
line-height: 100%;
font-weight: 300;
}
#toi p{
font-size: 17px;
line-height: 160%;
margin: 0 5% 50px;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
@media only screen and (max-width: 835px) {
#toi{
clear: both;
float: left;
width: 100%;
height: auto;
text-align: center;
margin: 50px 0 30px;
padding: 0;
}
#toi p{
font-size: 16px;
line-height: 160%;
margin: 0 5% 40px;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}
@media only screen and (max-width: 480px) {
#toi{
clear: both;
float: left;
width: 100%;
height: auto;
text-align: center;
margin: 30px 0 30px;
padding: 0;
}
#toi h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 20px 0;
text-align: center;
background: #285fc1;
color: #fff;
font-size: 20px;
line-height: 100%;
font-weight: 300;
}
#toi p{
font-size: 13px;
line-height: 160%;
margin: 0 5% 40px;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}

/*フッタ
--------------------------------------------------------------------------*/
#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;
}

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

#footer-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
background: #000;
text-align: left;
}
#footer-box img{
margin: 0 0 0 5%;
max-width: 20%;
}
@media only screen and (max-width: 1080px) {
#footer-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
background: #000;
text-align:center;
}
#footer-box img{
margin: 0;
max-width: 20%;
}
}
@media only screen and (max-width: 835px) {
#footer-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 10px 0;
background: #000;
text-align:left;
}
#footer-box img{
margin: 0 0 0 3%;
max-width:17%;
}
}
@media only screen and (max-width: 640px) {
#footer-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 10px 0 0;
background: #000;
text-align:center;
}
#footer-box img{
margin: 0;
max-width:25%;
}
}
@media only screen and (max-width: 480px) {
#footer-box img{
margin: 0;
max-width: 30%;
}
}
@media only screen and (max-width: 414px) {
#footer-box img{
margin: 0;
max-width: 35%;
}
}

nav{
float: right;
width: 50%;
height: auto;
margin: 0;
padding: 25px 0 0 0;
text-align: left;
}
nav ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
}
nav li{
text-align: left;
float:left;
list-style-type: none;
font-size:20px;
line-height: 100%;
margin: 0 0 0 7%;
padding: 0;
color: #fff;
}
nav li a:link,nav li a:visited{
display: block;
color: #fff;
text-decoration: none;
}
nav li a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 1280px) {
nav li{
text-align: left;
float:left;
list-style-type: none;
font-size:15px;
line-height: 100%;
margin: 0 0 0 5%;
padding: 0;
color: #fff;
}
}
@media only screen and (max-width: 1080px) {
nav{
float: right;
width: 50%;
height: auto;
margin: 0;
padding: 25px 0 0 0;
text-align: left;
font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}
@media only screen and (max-width: 835px) {
nav{
float: right;
width: 80%;
height: auto;
margin: 0;
padding: 15px 0 0 0;
text-align: left;
}
}
@media only screen and (max-width: 640px) {
nav{
clear: both;
float: right;
width:100%;
height: auto;
margin: 0;
padding: 10px 0 0 0;
text-align: left;
}
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{
width: 20%;
text-align: center;
float:left;
list-style-type: none;
font-size:14px;
line-height: 100%;
margin: 0;
padding: 0;
color: #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
nav li a:link,nav li a:visited{
display: block;
padding: 10px 0;
color: #fff;
text-decoration: none;
}
nav li a:hover{
text-decoration: underline;
}
}
@media only screen and (max-width: 480px) {
nav li.bno{
display: none;
}
nav li{
width: 25%;
text-align: center;
float:left;
list-style-type: none;
font-size:13px;
line-height: 100%;
margin: 0;
padding: 0;
color: #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
}
@media only screen and (max-width: 414px) {
nav li{
width: 50%;
text-align: center;
float:left;
list-style-type: none;
font-size:13px;
line-height: 100%;
margin: 0;
padding: 0;
color: #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
}

address{
clear: both;
float: left;
width: 100%;
margin: 15px 0 0;
padding: 0 0 0 5%;
font-style: normal;
}
address p{
font-size: 17px;
line-height: 150%;
margin: 0 0 20px;
text-align: left;
}
address p strong{
font-weight: 500;
font-size: 25px;
}
@media only screen and (max-width: 1080px) {
address{
clear: both;
float: left;
width: 100%;
margin: 0;
padding: 0;
font-style: normal;
}
address p{
font-size: 13px;
line-height: 120%;
margin: 5px 0;
text-align: center;
}
address p strong{
display: none;
font-weight: 500;
font-size: 25px;
}
}