@charset "UTF-8";
/********************************/
/* トップ　*/
/********************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

img{width:100%; height:auto;}
::before, ::after {box-sizing: border-box;}
body {width:100%;font-family: "Noto Serif JP", serif; font-weight:500;background-attachment:fixed;height:100%;padding:0;margin:0;vertical-align:top;height:100%;text-align:center;line-height:2.0;}

header{width:100%; margin:0 auto; padding:0; background: url(../img/mainback.jpg) no-repeat top center;background-size: cover;}
.hinimg{max-width:1310px; height:auto; margin:0 auto; position: relative;text-align:center;}
h1{font-family:"Avenir Next", "Helvetica neue", "Helvetica", sans-serif;position:absolute; bottom:30%; left:2%;font-size:150px; line-height:0.5; color:#000; text-align:left;}
.f32{font-family: "Noto Serif JP", sans-serif;color:#474f56; font-size:24px; line-height:5.8;}
.f78{font-size:78px; line-height:100%;}
#wrapper{width:100%; margin:0 auto; padding:4% 0 4%; background: url(../img/wrapback.jpg) no-repeat center center; background-color:#01164d;background-size: cover;}
h2{font-size:68px; text-align:center; color:#fff; line-height:120%; margin-bottom:3%;}
.protex{max-width:900px; margin:0 auto; padding:0;}
.protex p{ font-size:21px; text-align:left; line-height:2.0; color:#fff; padding:0 0 25px;}

footer{width:100%; background:#01164d; margin:0 auto; padding:5px 0 15px;}
ul.sns{max-width:360px; display:flex; margin:3% auto 0;}
ul.sns li{width:33%; list-style:none; margin:0; padding:0;}
ul.sns li img{width:50%; height:auto;}
ul.sns li a:hover{opacity:0.8;}
p.ad{color:#fff;text-align:center;font-size:14px;}

.linebt{ max-width:685px; margin:2% auto 4%; padding:0;}
.linebt a:hover{opacity:0.8;}
.brsp {display:none;}
.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (max-width:1068px) {
	h1{font-size:12.5vw; line-height:0.5;top:4%; left:4%;}
.f32{font-size:1.8vw; line-height:5.5;}
.f78{font-size:6.5vw; line-height:100%;}
}

@media only screen and (max-width:940px) {
.protex{max-width:none; width:86%;}
.protex p{ font-size:18px;line-height:1.8;padding:0 0 25px;}
}

@media only screen and (max-width: 820px) {
.pc { display: none !important; }
.sp { display: block !important;}
h1{font-size:14vw; line-height:0.5;}
.f32{font-size:2.5vw; line-height:5.0;}
.f78{font-size:7.5vw; line-height:100%;}
.spmain{width:100%; position:relative; margin:0 auto; padding:0;}
#wrapper{padding:7% 0 7%;}
h2{font-size:7vw;margin-bottom:5%;}
.protex{max-width:none; width:86%;}
.protex p{ font-size:18px;line-height:1.8;padding:0 0 25px;}
ul.sns{max-width:none; width:60%; display:flex; margin:5% auto 0;}
ul.sns li{width:33%; list-style:none; margin:0; padding:0;}
ul.sns li img{width:50%; height:auto;}
.linebt{ max-width:none; width:70%; margin:4% auto 10%; padding:0;}
}

@media only screen and (max-width: 480px) {
.pc { display: none !important; }
.sp { display: block !important;}
#wrapper{padding:7% 0 7%; background: url(../img/sp_wrapback.jpg) no-repeat center center;background-size: cover;}
ul.sns{width:70%;}
.protex p{ font-size:16px;line-height:1.7;padding:0 0 25px;}
.linebt{width:80%;}
}