@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Cabin:wght@400;600&display=swap');
@charset "utf-8";
html, body {margin:0;padding:0;background-color:#fff;height:100%;width:100%;font-family:'Noto Sans JP', sans-serif;font-size:18px;color:#181818;}

h1,h2,h3,h4,h5,h6 {padding:0;font-family:'Cabin',sans-serif; color:#2a91b0; letter-spacing:0.06em;}
h1 {margin:10px 0 15px 0; text-align:left; font-size:40px; text-transform:uppercase;}
h2 {margin-bottom:30px;text-align:left;font-size:28px;}
h3 {margin:15px 0; padding-bottom:10px; height:40px; text-align:center; font-size:18px; font-weight:600;}
h4 {margin:20px 0; text-align:left; color:#fff; font-size:56px; text-shadow:0 0 6px #333; letter-spacing:0.15em;}
h5 {margin-bottom:20px; padding-bottom:20px; text-align:center; font-size:16px; color:#fff; font-weight:600; border-bottom:1px solid #fff;}
h6 {margin-bottom:30px;text-align:center;font-size:28px;}

* {margin:0; padding:0;}

p {margin-bottom:20px; padding:0; text-align:left; line-height:1.8; font-weight:300;}
hr.dots {width:120px; border:0; outline:0; text-align:left; margin-bottom:30px; border-bottom:2px solid #2a91b0;}

a {color:#202a5e; text-decoration:none; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;-ms-transition: all .3s ease;transition: all .3s ease;}
a:hover {color:#2c92b1;}


header {background:#202a5e url('../../graphics/Pattern-bg.png') top center no-repeat;}

.wide {display:flex; width:96%; margin:0 auto; padding-bottom:10px; flex-wrap:no-wrap; align-items:top; justify-content:space-between; }
.flag {padding-top:10px; height:40px;}
.flag img:hover {opacity:0.85;}

.small {display:none;}

.navicon {display:block; margin:50px -90px 0 0; font-family:'Noto Sans JP',sans-serif; font-size:60px;cursor:pointer; color:#f9ed2d; font-weight:400;}
.navicon:hover {color:#fff;}

.sidenav {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
	background: #202a5e url('../../graphics/Fuji-bg.jpg') no-repeat top center;
	background-size:cover;
    overflow-x: hidden;
    transition: 0.75s;
    padding-top: 60px;
	margin-bottom:50px;
	z-index:1000;
}

.sidenav a {text-decoration:none; outline:none; border:none;}

.closer {display:block; margin:-45px auto 20px auto; padding-bottom:5px; width:980px; cursor:pointer; overflow:hidden;}
.closer .closebtn {position: relative; float:right; margin-top:-10px; padding-right:5px; padding-bottom:25px; height:47px; font-size:56px; font-weight:300; color:#fff;}
.close-left {float:left;}
.close-right {float:right;}

nav {display:flex; width:1140px; margin:0 auto; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; text-align:center; font-size:13px;}
nav > div {width:264px; padding:10px; text-align:left; align-self:stretch; color:#fff; border-right:1px solid #fff;}
nav > div:last-child {border:none;}
/*nav > div.single {width:195px;}
nav > div.double {width:330px;}*/
nav ul {margin:0 auto; list-style:none;}
nav ul li {display:inline-block; margin:0 2px 5px 0; width:100%; text-align:left;}
nav ul li a {display:block; padding:10px; color:#fff; background-color:transparent;}
nav ul li a:hover {color:#f9ed2d; background-color:#2a91b0;}
/*nav > div.single ul li {width:190px;}
nav > div.double ul li {width:160px;}*/



.home-banner {display:flex; width:90%; height:640px !important; padding-left:10%; flex-direction:column; flex-wrap:wrap; align-items:left; justify-content:center;}
.home-banner > div {width:50%; padding-bottom:120px; color:#fff; font-family:'Cabin',sans-serif;}
.home-banner p {color:#fff; font-size:32px; font-family:'Cabin',sans-serif; letter-spacing:0.075em; font-weight:600; text-shadow:0 0 6px #333;}

.row {display:block; padding:60px 0; text-align:center; background-color:#fff;}
.row:nth-of-type(even) {background-color:#f8fcfd;}

.content, .top-content {display:flex; width:1140px; margin:0 auto; flex-wrap:no-wrap; align-items:center; justify-content:space-between;}
.top-content > div {width:44%; padding:0 2%;}
.content img {width:auto; max-width:100%; height:auto;}
section {max-width:1100px; margin:0 auto; padding:0 20px;}

.half {width:44%; padding:0 2%;}
.left {width:600px;}
.right {width:400px;}
.right img {margin-bottom:30px;}

.left ul {margin-left:30px; list-style-image:url('../../graphics/check.png');}
.right ul {margin-left:30px; list-style-image:url('../../graphics/check.png');}
.left ul li, .right ul li {margin-bottom:15px; padding-left:15px; text-align:left; color:#2a91b0; font-size:16px;}

.home-pic {position:relative; width:560px; height:540px;}
img.pic1 {position:absolute; top:0; left:10px; width:360px; height:auto; border:10px solid #dfeff3; -webkit-transition: all .4s ease; -moz-transition: all .4s ease;-o-transition: all .4s ease; transition: all .4s ease; box-shadow:3px 3px 3px #c0c0c0;}
img.pic2 {position:absolute; top:240px; right:10px; width:360px; height:auto; border:10px solid #dfeff3; -webkit-transition: all .4s ease; -moz-transition: all .4s ease;-o-transition: all .4s ease; transition: all .4s ease; box-shadow:3px 3px 3px #c0c0c0;}
img.pic1:hover, img.pic2:hover {border:10px solid #2a91b0;}
.icon-content {display:flex; width:1140px; margin:0 auto; flex-wrap:no-wrap; align-items:stretch; justify-content:space-between;}
.icons {width:220px; padding:0 10px; text-align:center;}
.icons:hover {background-color:#fff; box-shadow:0 0 5px 5px #f7f7f7; cursor:pointer;}
.icons p {text-align:center; font-size:15px; line-height:1.5;}
.icons a {color:#333;}

.top-pic {display:block; padding:0 10px 15px 10px; height:auto;}
.top-pic img {margin:0 auto; width:auto; max-width:100%; height:auto; border:10px solid #dfeff3; box-shadow:3px 3px 3px #c0c0c0; -webkit-transition: all .4s ease; -moz-transition: all .4s ease;-o-transition: all .4s ease; transition: all .4s ease;}
.top-pic img:hover {border:10px solid #2a91b0;}

.video {margin:0 auto; width:900px; padding:10px; overflow:hidden;}

.vidContainer {
	margin:0 auto;
	width:auto; max-width:900px;
	height:auto;
}
  
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0; line-height:0;
}
.videoWrapper iframe {
	position: absolute;
	top: 10px;
	left: 0;
	width: 100%;
	height: 100%;
}

/*.page-menu {display:block; max-width:1100px; margin:0 auto;}
.page-menu ul {display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, max-content)); grid-gap:0; justify-content:center; padding:initial;}
.page-menu ul li {list-style-type:none; width:250px; padding:5px 10px;}
.page-menu ul li a {display:block; width:230px; padding:15px 10px; text-align:center; color:#fff; font-size:15px; background-color:#202a5e;} 
.page-menu ul li a:hover {background-color:#2c92b1;}
.page-menu ul li a.active {opacity:0.25;}*/

.page-menu {display:block; max-width:980px; margin:0 auto;}
.page-menu ul {display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, max-content)); gap:10px; justify-content:center; /*padding:initial; align-items:stretch;*/justify-items:center;}
.page-menu ul li {display:flex; list-style-type:none; width:100%; min-height:70px;}
.page-menu ul li a {display:flex; width:100%; padding:0 2%; align-items:center; justify-content:center; color:#fff; font-size:15px; background-color:#202a5e;} 
.page-menu ul li a:hover {background-color:#2c92b1;}
.page-menu ul li a.active {opacity:0.25;}

.thanks {display:block; margin:40px auto; width:900px; padding:50px 0; background-color:#202a5e;}
.thanks h3 {margin-top:0; text-align:center; font-size:27px; color:#fff;}
.thanks p {margin:0 auto; max-width:700px; text-align:center; color:#fff; font-size:18px;}


footer {padding:60px 0; background-color:#202a5e;}
.foot-content {display:flex; width:1136px; margin:0 auto; flex-wrap:no-wrap; align-items:top; justify-content:space-between; color:#fff; text-align:center;}
.foot-content p {width:300px; margin-top:10px; font-size:14px; text-align:center; line-height:1.5;}
.foot-content ul {list-style:none;}
.foot-content ul li {margin-bottom:5px; padding-left:30px; font-size:15px;}
.foot-content ul li a {display:block; padding:10px; text-align:left; color:#fff; background-color:transparent;}
.foot-content ul li a:hover {background-color:#2c92b1;}
.social img {display:inline;block; padding:0 10px 30px 10px;}
.social img:hover {opacity:0.85;}
footer hr {border:0; outline:0; margin:60px auto; width:auto; max-width:1140px; border-bottom:1px solid #2c92b1;}
.btm {width:45%;}
.btm p {width:500px; text-align:left; font-size:13px;}
.btm a {color:#2c92b1;}
.btm a:hover {color:#fff;}
p.website {text-align:right;}

@media screen and (max-width:1140px) {
h4 {font-size:52px; text-shadow:0 0 5px #333;}
.closer {margin:-55px auto 10px auto;}
nav {width:100%;}
nav > div {border-right:0;}
nav > div:last-child {margin-top:20px;}
.home-banner {height:480px !important;}
.home-banner > div {width:70%; padding-bottom:80px;}
.home-banner p {font-size:28px; letter-spacing:0.07em; text-shadow:0 0 5px #333;}
.content, .top-content {width:96% !important;}
.top-content {align-items:flex-start;}
.home-pic {width:420px; height:380px; background-size:cover;}
img.pic1 {width:260px;}
img.pic2 {top:180px; width:260px;}
.top-pic {margin-bottom:20px; background-size:cover; align-self:flex-start;}
.icon-content {width:96%; flex-wrap:wrap; justify-content:space-around;}
.icons {width:200px;}
.foot-content {width:950px; margin:0 auto; flex-wrap:no-wrap; align-items:top; justify-content:space-between; color:#fff; text-align:center;}
.btm p {width:auto; max-width:400;}
}


@media screen and (max-width:1024px) {
.flag {margin-right:20px;}
.navicon {margin:70px -110px 0 0;}
}

@media screen and (max-width:1023px) {
header {background-repeat:repeat-y;}
.wide {display:none;}
.small {display:block; padding:10px 0;}
.top {display:flex; width:90%; margin:0 auto; align-items:center; align-content:center; justify-content:space-between; flex-wrap:no-wrap; padding:10px 0;}
.navicon {display:block; margin:0; font-size:40px;}
.logo {display:block; padding:5px 0; text-align:center;}
.logo img {width:auto; max-width:100%; height:auto;}
.closer {margin:-45px auto 20px auto; width:90%;}
nav {display:flex; width:80%; font-size:16px;}
nav ul li {display:block; margin:0 0 10px 0; text-align:left;}
nav ul li a {padding:15px;}
.top-content {flex-wrap:wrap;}
}

@media screen and (max-width:960px) {
h4 {font-size:48px; letter-spacing:0.1em;}

.home-banner {height:440px !important;}
.home-banner > div {width:75%; padding-bottom:60px;}
.home-banner p {font-size:24px; line-height:1.6;}
.icon-content {width:96%; flex-wrap:wrap; justify-content:space-around;}
.icons {margin:0 5px 25px 5px; padding:0 15px; flex:35%; border-bottom:1px dashed #2c92b1;}	
.top-content {flex-wrap:wrap; align-items:center; align-content:center; justify-content:space-around; flex-direction:column;}
.top-content > div {width:86%; padding:0 2%;}
.video {width:90%; padding:10px 0;}
.foot-content {width:90%; flex-wrap:wrap; align-items:top; justify-content:space-around;}
.foot-content ul {margin-bottom:30px;}
}

@media screen and (max-width:840px) {
h4 {font-size:32px; text-align:center;}
.home-banner {width:100%; height:360px !important; padding-left:0; align-items:center; background-position:bottom center;}
.home-banner > div {width:80%; padding-bottom:40px;}
.home-banner p {text-align:center; font-size:21px; letter-spacing:0.065em;}
.content {width:96%; flex-wrap:wrap; align-items:center; justify-content:space-around; flex-direction:column;}
.home-pic {display:none;}
.half {width:94%; padding:0 2%;}
.left {width:96%;}
.right {width:96%;}
.right img {margin-top:20px;}
}


@media screen and (max-width:540px) {
.icon-content {width:94%; flex-wrap:wrap; align-items:center; justify-content:center; flex-direction:column;}
.icons {padding:0 15px; flex:80%;}
.social img {display:inline;block; margin:20px 6px 30px 6px; padding:10px;}
.btm {width:100%;}
.btm p {margin-bottom:40px; text-align:center;}
p.website {text-align:center;}
}