/* =================== base =================== */


:root {
  --ja-font: 'Gothic A1', "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --a-otf-font: 'A-OTF', sans-serif;
  --main-color: #005895;
  --sub-color:  #FFE93B;
}


@font-face {
  font-family: 'A-OTF';
  src: url("https://fabsounds.info/asset/font/A-OTF-MidashiGoPro-MB31.otf") format('opentype');
}


html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

html { margin: 0; overflow-x: hidden; font-size: 62.5%; box-sizing: border-box; }
body { font-size: 1.6rem; letter-spacing: .05em; font-family: var(--ja-font); color: #000; background: #fff; }
*{ box-sizing: border-box; color: #000; letter-spacing: normal;
 }
a{ text-decoration: none; color: #000; cursor: pointer; transition: 0.3s; }
a:hover{  }
img { vertical-align: bottom; width: 100%; height: auto; }
pre { width: 70%; margin: 1em auto; padding: 1em; border-radius: 5px; background: #fff; color: #fff; overflow-x: auto; /* ⭐ */ -webkit-overflow-scrolling: touch; /* ⭐ */ }
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
li{ list-style: none; }
strong{ font-weight: 700; }
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.clear{ clear: both; }
.pc { display: block; }
.sp { display: none; }
.ipad { display: none; }
p{ line-height: 1.5em; }
.midashi{ font-family: var(--a-otf-font); }
.blue{ color: var(--main-color); }
.yellow{ color: var(--sub-color); }
.bold{ font-weight: 700; }
.btn{ display: inline-block; border-radius: 100px; max-width: 330px; width: 100%; white-space: nowrap; padding: 20px 30px; background: #000; color: #fff; text-align: center; font-weight: 700; font-size: 1.5rem; }
.btn:hover{ background: #fff; color: var(--main-color); }

.brank{ padding-right: 20px; position: relative; }
.brank:before{ content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background: url(../images/brank.svg) no-repeat; background-size: contain; background-position: center; width: 11px; height: 11px; }
.wrapper{ overflow: hidden; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 25px; }

.wp-pagenavi{ margin: 30px 0 0; text-align: center; }
.wp-pagenavi a, .wp-pagenavi span{ font-weight: 700; padding: 0 0 5px; display: inline-block; width: 20px; text-indent: 0; position: relative; margin: 0 10px; font-family: var(--en-font); font-size: 1.9rem; border: none; }
.wp-pagenavi span{ color: var(--main-color); }
.wp-pagenavi span:before{ content: ""; position: absolute; background: var(--main-color); height: 1px; width: 100%; bottom: 0; left: 0; }
.wp-pagenavi a:before{ content: ""; position: absolute; bottom: 0px; left: 0px; width: 0%; height: 1px; background: #000; transition: all 0.2s; }
.wp-pagenavi a:hover{ opacity: 1; }
.wp-pagenavi a:hover:before{ width: 100%; left: 0px; }
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink{ width: 10px; }
.wp-pagenavi .nextpostslink:before{ content: ""; background:  none; transition: all 0.4s; position: absolute; left: 0; right: 0; top: 0; bottom: 5px; margin: auto; width: 5px; height: 5px; border-top: 2px solid #000; border-right: 2px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.wp-pagenavi .nextpostslink:hover:before{ width: 5px; }
.wp-pagenavi .previouspostslink:before{ content: ""; background: none; transition: all 0.4s; position: absolute; left: 0; right: 0; top: 0; bottom: 5px; margin: auto; width: 5px; height: 5px; border-top: 2px solid #000; border-right: 2px solid #000; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.wp-pagenavi .previouspostslink:hover:before{ width: 5px; }


@media screen and (max-width: 1280px) {
.container { max-width: 1100px; }
}

@media screen and (max-width: 820px) {
.container { padding: 0 25px; }
}


/* =================== header =================== */

header{ position: relative; }
header .box{ position: absolute; width: 100%;z-index: 1; }
header .box .container.flex{ padding: 25px 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
header .box .left{ width: 20%; }
header .box .left h1{  }
header .box .left h1 img{ max-width: 130px; }
header .box .right{ width: 80%; }
header .box .right .flex{ -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
header .box .right .nav-box nav ul li.nav-item.fadeRight{ animation-name: unset; opacity: 1; }
header .box .right .modalbtn{ display: none; }
header .box .right .nav-box{ margin-top: 20px; width: 100%; }
header .box .right .nav-box li{ position: relative; transition: 0.3s;  }
header .box .right .nav-box li:not(:last-child){ margin-right: 50px; }
header .box .right .nav-box li:before{ content: ""; position: absolute; bottom: 0px; left: 0; width: 0%; height: 2.5px; background: #fff; transition: all 0.4s; }
header .box .right .nav-box li:hover{ opacity: 1; }
header .box .right .nav-box li:hover:before{ width: 100%; }
header .box .right .nav-box li a{ letter-spacing: 1px; color: #fff; font-size: 1.7rem; display: block; font-weight: 700; padding-bottom: 15px; text-align: center; }
header.fixed{ position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
header.fixed .box{background:#1979BB}
header.fixed .box .right .nav-box{margin-top: 0px;}
header.fixed .box .container.flex {padding: 12px 12px;}
header.fixed .box .left h1 img{max-width: 55px;}
header.fixed .nav-box li a{ padding: 8px 0 5px; }
.black-bg { display: none; position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100vw; height: 100vh; z-index: 990; background-color: #000; opacity: 0; visibility: hidden; transition: all .3s; cursor: pointer; }
.nav-open .black-bg { display: block; opacity: .4; visibility: visible; }



/* =================== footer =================== */



/* =================== section =================== */


.fv{ background-color: #1B80BF; background-image: url(../images/bk.png);min-height: 800px;background-size: cover;background-position: center;}
.fv .container{text-align: center;}
.fv .container .flex{display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 800px;}
.fv .container h2{font-size: 60px;color: #fff;font-weight: bold;letter-spacing: 0.02em;line-height: 1.3;position: relative;}
.fv .container h2::after{ position: absolute;content: '';bottom: -100px;right:-50px;display: block;width: 300px;height: 160px;background-image: url(../images/fvtext.svg);background-size: contain;background-repeat: no-repeat;}
.fv .container h2 span{font-size: 30px;color: #fff;font-weight: bold;}
.fv .container img {width: 300px;}


section#about{  padding-bottom: 170px;position: relative;overflow: hidden;margin-top: 170px;}
#about::after{ position: absolute;content: '';top: 0px;left:0px;display: block;width: 100%;max-width: 210px;height: 100%;background-image: url(../images/aboutbkl.png);background-size: contain;background-repeat: no-repeat;}
#about::before{ position: absolute;content: '';top: 0px;right:0px;display: block;width: 100%;max-width: 210px;height: 100%;background-image: url(../images/aboutbkr.png);background-size: contain;background-repeat: no-repeat;background-position:top right;}
#about .container{width: 100%;margin: 0 auto;max-width: 590px;}
#about .container .ttl{font-size: 50px;font-weight: bold;color: #005895;margin-bottom: 50px;}
#about .container .subttl{font-size: 30px;color: #313131;font-weight: bold;line-height: 1.7;margin-bottom: 50px;}
#about .container .subttl2{font-size: 35px;font-weight: bold;color: #005895;margin-top: 90px;margin-bottom: 30px;line-height: 1.3;}
#about .container .text{font-size: 18px;color: #313131;font-weight: bold;line-height: 1.9;}
@media screen and (min-width: 1700px) {
  #about .container{width: 600px;}
  #about::after{ position: absolute;content: '';top: 0px;left:20%;display: block;width: 300px;height: 100%;background-image: url(../images/aboutbkl2.png);background-size: contain;background-repeat: no-repeat;}
  #about::before{ position: absolute;content: '';top: 0px;right:20%;display: block;width:   300px;height: 100%;background-image: url(../images/aboutbkr2.png);background-size: contain;  background-repeat: no-repeat;}
}



section#policy{ background: rgb(11,107,173);
background: linear-gradient(180deg, rgba(11,107,173,1) 0%, rgba(22,126,198,1) 100%);padding: 170px 0;position: relative;}
#policy .inner::after{position: absolute;content: '';top: -240px;right: 0px;display: block;width: 100%;max-width: 500px;height: 320px;background-image: url(../images/policy.png);background-size: contain;background-repeat: no-repeat;}
#policy .inner{position: relative;}
#policy .container{width: 100%;margin: 0 auto;max-width: 900px;padding: 0;}
#policy .container .ttl{font-size: 50px;font-weight: bold;color: #005895;margin-bottom: 50px;color: #fff;margin-bottom: 70px;}
#policy .container .policy01{margin-bottom: 80px;}
#policy .container .policy01 h4{font-size: 40px;color: #fff;margin-bottom: 70px;font-weight: bold;line-height: 1.2;}
#policy .container .policy01 h4 span{font-size: 30px;display: block;color: #fff;margin-bottom: 10px;font-weight: bold;line-height: 1;}
#policy .container .policy01 .flex{justify-content: flex-start;}
#policy .container .policy01 .flex p{font-size: 24px;color: #fff;padding-left: 50px;position: relative;font-weight: bold;}
#policy .container .policy01 .flex .text02{margin-left: 60px;}
#policy .container .policy01 .flex .text01::before{position: absolute;content: '';top: 0px;left:0px;display: block;width: 40px;height: 100%;background-image: url(../images/icon01.svg);background-size: contain;background-repeat: no-repeat;}
#policy .container .policy01 .flex .text02::before{position: absolute;content: '';top: 0px;left:0px;display: block;width: 40px;height: 100%;background-image: url(../images/icon02.svg);background-size: contain;background-repeat: no-repeat;}
#policy .container .policy02{margin-bottom: 70px;}
#policy .container .policy02 h5{font-size: 35px;color: #fff;font-weight: bold;line-height: 1.3;margin-bottom: 25px;}
#policy .container .policy02 p{font-size: 17px;color: #fff;font-weight: bold;line-height: 1.7;}
#policy .container .policy03{ background-color: #1f7fc2;padding: 55px 60px;border-radius: 10px;margin-bottom: 80px;}
#policy .container .policy03 .flex{justify-content: space-between;align-items: center;}
#policy .container .policy03 .flex .left{width: 53%;padding-top: 20px;}
#policy .container .policy03 .flex .left h5{font-size: 30px;font-weight: bold;color: #fff;margin-bottom: 25px;}
#policy .container .policy03 .flex .left p{font-size: 16px;font-weight: bold;color: #fff;line-height: 1.7;}
#policy .container .policy03 .flex .right{width: 41%;}
#policy .container .policy04{margin-bottom: 100px;}
#policy .container .policy05{}
#policy .container .policy05 h5{font-size: 33px;font-weight: bold;color: #fff;text-align: center;position: relative;margin-bottom: 40px;}
#policy .container .policy05 h5::after{position: absolute;content: '';top: -50px;right: 10%;display: block;width: 80px;height: 240px;background-image: url(../images/join.svg);background-size: contain;background-repeat: no-repeat;}
#policy .container .policy05 .flex{align-items: flex-start;justify-content: space-between;}
#policy .container .policy05 .flex .box{width: 25%;border-right: 1px solid #4697D0;}
#policy .container .policy05 .flex .box:last-of-type{border: none;}
#policy .container .policy05 .flex .box p{text-align: center;font-size: 16px;color: #fff;line-height: 2;font-weight: bold;}



section#content{ background-image: url(../images/grid.png);background-size: cover ;padding: 170px 0;overflow: hidden;}
#content .container{width: 100%;margin: 0 auto;max-width: 850px;}
#content .flex-top{display: flex;align-items: center;justify-content: space-between;margin-bottom: 40px;}
#content .flex-top .box{width: 48%;}
#content .flex-top .box h3{font-size: 50px;font-weight: bold; color: var(--main-color);margin-bottom: 37px; }
#content .flex-top .box p{font-size: 20px;font-weight: bold;color: #000;}
#content .flex-top .box img{width: 90%;}
#content .flex-bottom{display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: 50px;}
#content .flex-bottom .box{width: 48%;padding: 36px;border: 3px solid var(--main-color);background-color: #fff;border-radius: 10px;margin-bottom: 35px;}
#content .flex-bottom .box h4{ color: var(--main-color);font-weight: bold;font-size: 25px;margin-bottom: 20px;}
#content .flex-bottom .box p{font-size: 16px;font-weight: bold;color: #313131;}
#content .flex-bottom .box1{position: relative;}
#content .flex-bottom .box1::after{position: absolute;content: '';top: -10px;right: 10px;display: block;width: 100%;height: 70px;background-image: url(../images/active3.svg);background-size: contain;background-repeat: no-repeat;max-width: 190px;}
#content .flex-bottom .box4{position: relative;}
#content .flex-bottom .box4::after{position: absolute;content: '';top: -10px;right: 10px;display: block;width: 100%;height: 60px;background-image: url(../images/active4.svg);background-size: contain;background-repeat: no-repeat;max-width: 130px;}




section#join{
background: url(../images/bg2.png),linear-gradient(180deg, rgba(11,107,173,1) 0%, rgba(22,126,198,1) 100%);position: relative;background-repeat: no-repeat;    background-position: bottom;
    background-size: contain;
}
#join .m-inner .top{text-align: center;}
#join .m-inner .top h3{color: #fff;font-weight: bold;font-size: 36px;margin-bottom: 47px;}
#join .m-inner .top p{color: #fff;font-weight: bold;font-size: 20px;line-height: 1.7;}
#join .m-inner .top::before{
  position: absolute;content: '';top: 50px;left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);display: block;width: 550px;height: 550px;background-image: url(../images/bg3.png);background-size: contain;background-repeat: no-repeat;z-index: -1;
}
.joinbtn{    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    margin-top: 84px;}


footer{padding: 130px 0 40px;}
footer .flex{justify-content:space-between;}
footer .flex .left{width: 50%;}
footer .flex .left img{width: 100%;max-width: 344px;}
footer .flex .right{width: 50%;}
footer .flex .right .contact{font-size: 17px;color: #fff;margin-bottom: 40px;text-align: right;    display: flex;align-items: center;font-weight: bold;justify-content: flex-end;}
footer .flex .right .contact span{font-size: 30px;font-weight: bold;color: #fff;    display: inline-block;margin: 0 10px;}
footer .flex .right .flex{margin-bottom: 70px;    justify-content: flex-end;}
footer .flex .right .flex li{font-size: 14px;color: #fff;font-weight: bold;}
footer .flex .right .flex li a{font-size: 14px;color: #fff;    letter-spacing: 0.07em;}
footer .nav-item{margin-right: 64px;}


.cvbtn{ transition: 0.3s; }
/*.fv .cvbtn{ position: absolute; bottom: -50px; right: 50px; z-index: 10;  }*/
.cvbtn{ position: fixed; bottom: 30px;right: 0;
    width: 300px; z-index: 10; filter: drop-shadow(0px 0px 13px rgba(0,0,0,0.1));}
.cvbtn.none{ opacity: 0; pointer-events: none; }
.navopen_fixed.fixed{ width: 100%; height: 100%; position: fixed; }

#policy .container .inner{max-width: 850px;width: 100%;}
@media screen and (min-width: 1680px) {
  #policy .container {width: 100%;margin: 0 auto;}
  #content .container {width: 100%;margin: 0 auto;}
}

@media screen and (max-width: 820px) {
  .joinbtn {
    width: 100%;
    max-width: 270px;
    margin: 0 auto;
    margin-top: 24px;
}
  #policy .container{padding: 0 25px;}
  section#about{padding-top: 100px;margin-top: 0;}
    #about::before{background-image: url(../images/aboutbkrsp.png);
    top: 30px;
    right: 30px;
    display: block;
    width: 110px;
    height: 150px;}
  #about::after{display: none;}

footer .flex .right .contact{justify-content: center;}
#policy .container .policy01 .flex .text02{margin-left: 0;}
#policy .inner::after {
    position: absolute;
    content: '';
    top: -100px;
    right: 0px;
    display: block;
    width: 100%;
    max-width: 300px;
    height: 320px;
    background-image: url(../images/policy.png);
    background-size: contain;
background-repeat: no-repeat;}
footer .flex .left{width: 100%;text-align: center;}
  footer .flex .right{width: 100%;}
  footer .flex .right .contact{text-align: center;margin-top: 30px;display: block;}
  footer .flex .right .contact span{margin-top: 10px;color:#fff;}
  footer .flex{flex-direction: column;}
  footer .flex .right .flex li{margin-right: 0;}
}

@media screen and (max-width: 678px) {
  #content .flex-top .box p{font-size: 18px;}
  .button-inner{width: 100% !important;}
  #policy .inner::after {
    position: absolute;
    content: '';
    top: -40px;
    right: 0px;
    display: block;
    width: 100%;
    max-width: 200px;
    height: 320px;
    background-image: url(../images/policy.png);
    background-size: contain;
    background-repeat: no-repeat;
}
  #about::before{background-image: url(../images/aboutbkrsp.png);
    top: 30px;
    right: 30px;
    display: block;
    width: 110px;
    height: 150px;}
  .fv{min-height: 600px;}
  .fv .container .flex{min-height: 600px;}
  .fv .container img{width: 260px;}
  .fv .container h2{font-size: 40px;text-align: left;}
  .fv .container h2::after{bottom: -130px;right: 0px;width: 190px;}
  .fv .container h2 span{font-size: 16px;}

  section#about{padding: 100px 0;overflow: hidden;margin-bottom: 50px;margin-top: 0;}
  #about .container{width: 100%;}
  #about .container .ttl{font-size: 40px;}
  #about .container .subttl{font-size: 20px;line-height: 1.6;margin-bottom: 30px;}
  #about .container .subttl2{font-size: 25px;margin-top: 50px;}
  #policy::after{    top: -20px;width: 60%;height: 130px;right: 0;}
  section#policy{padding: 50px 0;}
  #policy .container{width: 100%;}
  #policy .container .ttl{font-size: 40px;margin-bottom: 50px;}
  #policy .container .policy01 h4{font-size: 30px;margin-bottom: 40px;}
  #policy .container .policy01 h4 span{font-size: 20px;}
  #policy .container .policy01 .flex p{font-size: 18px;margin-bottom: 20px;}
  #policy .container .policy01{margin-bottom: 40px;}
  #policy .container .policy02 h5{font-size: 25px;}
  #policy .container .policy02 p{font-size: 16px;}
  #policy .container .policy03 .flex .left{width: 100%;padding-top: 20px;}
  #policy .container .policy03 .flex .right{width: 100%;}
  #policy .container .policy03{    padding: 15px 30px;margin-bottom: 60px;}
  #policy .container .policy03 .flex .left h5{font-size: 27px;}
  #policy .container .policy05 h5::after{top: -90px;right: 0px;width: 80px;height: 80px;}
  #policy .container .policy05 .flex .box {width: 50%;padding-top: 30px;padding-bottom: 30px;border-bottom: 1px solid #4697D0;border-right:0;}
  #policy .container .policy05 .flex{flex-direction: row;flex-wrap: wrap;justify-content: center;}
  #content .flex-top{flex-direction: column;}
  #content .container{width: 100%;}
  #content .flex-top .box{width: 100%;}
  #content .flex-top .box img {width: 70%;margin: 0 auto;display: block;}
  #content .flex-bottom .box{width: 100%;    padding: 33px 30px;}
  #content .flex-top .box h3{font-size: 40px;}
  #policy .container .policy05 h5{line-height: 1.3;margin-bottom: 10px;}
  section#content{padding: 70px 0;}
  #join .m-inner .top::before{width: 280px;}

  #content .flex-top .box p{margin-bottom: 20px;}
  #content .flex-bottom .box h4{font-size: 24px;}
  .tel-number a {
    color:#fff;
    text-decoration:none;
    }
    .cvbtn{width: 200px;}
    footer .flex .right .flex {
    margin-bottom: 40px;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
}
section#join{background-size: auto;}
#policy .container .policy05 .flex .box:last-of-type{width: 90%;}
#policy .container .policy04{margin-bottom: 130px;}
#content .flex-bottom .box{margin-bottom: 25px;}
#content .flex-bottom .box4::after{top: -24px;}
header.fixed .nav-box li a{ padding: 0; }
header .box .right .nav-box li:before{display: none;}
#join .m-inner .top h3{font-size: 30px;}
#policy .container .inner{width: 100%;}
#policy .container .policy05 .flex .box p{text-align: left;font-size: 15px;}
#policy .container .policy05 .flex .box{width: 45%;border: none;}
#about .container .text{font-size: 16px;}
#policy .container .policy01 .flex .text01::before{background-image: url(../images/iconsp1.svg);background-size: 30px;}
#policy .container .policy01 .flex .text02::before{background-image: url(../images/iconsp2.svg);background-size: 30px;}
}