@charset "UTF-8";
html{scroll-behavior: smooth;}
body{ background: #e4e4e4;}
#content{background:url("../lib/main_back.jpg") left top no-repeat; background-size:cover; width:100%; max-width: 1000px; margin: 0 auto;}
#fv{max-width: 1000px; margin: 0 auto; background:url("../lib/fv_back.jpg") left top repeat; background-size:cover; width:100%; }
.bluebg{background: #014073;}
#fv .bluebg{padding: 50px 10px 15px 10px;}
.btn{max-width: 900px; margin: 0 auto; width: 94%; position: relative;}
#fv .btn img{position: absolute; bottom: -40px;}
.btn img {
  animation: anime1 0.5s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}
.btn:hover{opacity: 0.8;}

#fv h1{padding:20% 0 30% 0;}
#fv .fvat img{max-width: 700px; margin: 0 auto; width: 96%;}
@media only screen and (min-width:1000px) {
body{ background: #fff;}
}
#sec01{padding: 3% 3% 0 3%;}
#sec01 img{padding-bottom: 3%;}
@media only screen and (min-width:769px) {
#sec01{padding: 7% 7% 0 7%;}
#sec01 img{padding-bottom: 7%;}
}

#sec02 .box{padding: 3%;}
#sec02 .photo{max-width: 900px; }
#sec02 .txtbox{position: relative;}
#sec02 .txt{width: 80%; margin: 5% 0;}
@media only screen and (min-width:769px) {
#sec02 .box{padding: 7%;}
}

#sec03 .box{padding: 7% 3%;}
@media only screen and (min-width:769px) {
#sec03 .box{padding: 7%;}
}

#sec04 .box{padding: 3% 3% 0 3%;}
#sec04 .box img{padding-bottom: 3%;}

@media only screen and (min-width:769px) {
#sec04 .box{padding: 7% 7% 0 7%;}
#sec04 .box img{padding-bottom: 7%;}
}

#sec05{padding-bottom: 4%;}
#sec05 .box{padding: 3%; background: #e4e4e4;}
#sec05 .box .photo, #sec05 .box .txt{margin-bottom: 3%;}
@media only screen and (min-width:769px) {
#sec05 .box{padding: 7%;}
#sec05 .box .photo, #sec05 .box .txt{margin-bottom: 2%;}
}
@media only screen and (min-width:1000px) {
#sec05{padding-bottom: 0; max-width: 1000px; margin: 0 auto; }
}

.pagetop {
    height: 40px;
    width: 40px;
    position: fixed;
    right: 10px;
    bottom: 30%;
    background: #014073;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateY(20%) rotate(-45deg);
}

@media only screen and (min-width:1000px) {
	.pagetop {display: none;}
}

header{padding: 2%; background: #fff; position: relative; width: 100%; max-width: 1000px; margin: 0 auto; }
header ul{display: flex;}
header ul li{width: 10%; margin-right: 7px;}
header ul li.logo{width: 60%; margin-right:10%; padding-top: 2%; max-width: 400px;}
header ul li.icon img{width: 35px;}
#headernv.fixed{padding: 1% 2%; z-index: 1000;position: fixed; left: 50%; transform: translateX(-50%) translateY(0); top: 0;}

@media only screen and (min-width:400px) {
header ul li.logo{max-width: 300px; margin-right: calc(100% - 420px);}
header ul li.icon img{width: 40px;}
}
@media only screen and (min-width:769px) {
header{padding: 1% 2%;}
header ul li{width: 10%; margin-right: 10px;}
header ul li.logo{max-width: 400px; margin-right: calc(100% - 535px);  padding-top: 1%;}
header ul li.icon img{width: 45px;}
}

/*footernav*/
#footernv {width: 100%; max-width: 1000px; 
    position: fixed;
    bottom: 1%;
	left: 50%;
	transform: translateX(-50%) translateY(0);    overflow: hidden;
    width: 100%;
    z-index: 2;
}
#footernv .fvat{padding:5px 10px;}
#footernv .fvat img{max-width: 700px; margin: 0 auto; width: 96%; }

@media only screen and (min-width:769px) {
#footernv .fvat{padding:10px 15px;}
}
/*footer*/

footer{padding:2% 2% 29% 2%; margin: 0 auto; max-width: 1000px; text-align: center; background: #e4e4e4; border-top: 1px solid #ccc;}
footer .logo{margin: 0 auto; max-width: 300px; padding: 10px 0 20px 0;}
footer a{color: #000; text-decoration: none; font-weight: 600; font-size: 12px;}
footer a:hover{text-decoration: underline; color: #585858;}
footer a:visited{color: #000;}
footer .copyright{font-size: 10px; margin-top: 10px; color: #000;}
@media only screen and (min-width:1000px) {
	footer{padding-bottom: 220px;}
footer a{font-size: 16px;}
footer .copyright{font-size: 14px;}
}