@charset "UTF-8";

#loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;/*#CCC5C1;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  z-index: 9999;
}

/*
.loader {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
*/
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

.completed {
  opacity: 0;
  visibility: hidden;
}







.h-top{
    width:100vw;
    max-width: 900px;
}

.fixed-top{
    display:flex;
    position: fixed;
    top:0;
    left:0;
    z-index: 5 !important;/*8*/
    width:100vw;
    height: 60px;
}

.fixed-skyblbg{
    width:72vw;
    height: 60px;
    background-color: #53A5DB;
}

.fixed-skyblbg_sp{
    display: none;
    width:0;
}

.fixed-bluebg{
    display: block;
    width:8vw;
    height: 60px;
    background-color: #1E2082;
}

.fixed-green{
    width:20vw;
    height: 60px;
    background-color: #50AB6E;
}

.fixed-green-bg{
    background-color: #50AB6E;
}

.fixed-bagurmenu{
    display: none;
    width:0;
}





/*ハンバーガーメニュー*/
/*=============================
.btn-trigger
=============================*/
.btn-trigger {
  position: relative;
  width: 36px;/*50px;*/
  height: 32px;/*44px;*/
  cursor: pointer;
  z-index: 9999 !important;/*追加*/
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 14px;/*20px*/
}
.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}


/*=============================
#btn05
=============================*/
#btn05.active span:nth-of-type(1) {
  -webkit-transform: translateY(14px) rotate(-45deg);/*translateY(20px) rotate(-45deg);*/
  transform: translateY(14px) rotate(-45deg);/*translateY(20px) rotate(-45deg);*/
}
#btn05.active span:nth-of-type(2) {
  left: 50%;
  opacity: 0;
  -webkit-animation: active-btn05-bar02 .8s forwards;
  animation: active-btn05-bar02 .8s forwards;
}
@-webkit-keyframes active-btn05-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-btn05-bar02 {
  100% {
    height: 0;
  }
}
#btn05.active span:nth-of-type(3) {
  -webkit-transform: translateY(-14px) rotate(45deg);/*translateY(-20px) rotate(45deg);*/
  transform: translateY(-14px) rotate(45deg);/*translateY(-20px) rotate(45deg);*/
}


/*=============================
#btn13
=============================*/
#btn13.active span:nth-of-type(1),
#btn13.active span:nth-of-type(3) {
  width: 16px;/*16px*/
}
#btn13.active span:nth-of-type(1) {
  -webkit-transform: translate(-1px,13px) rotate(-45deg);/*translate(-1px,13px) rotate(-45deg);*/
  transform: translate(-1px,13px) rotate(-45deg);/*translate(-1px,13px) rotate(-45deg);*/
}
#btn13.active span:nth-of-type(3) {
  -webkit-transform: translate(-1px,-13px) rotate(45deg);/*translate(-1px,13px) rotate(45deg);*/
  transform: translate(-1px,-13px) rotate(45deg);/*translate(-1px,13px) rotate(45deg);*/
}




.bagurbox {
  position: relative;
  width: 150px;
  padding: 80px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  counter-increment: section;
}
/* 1 2 3 4 5 ... */
.bagurbox:before {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #bababa;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  z-index: +1;
  display: flex;
  justify-content: center;
  align-items: center;
  content: counter(section);
}
p._a {
  font-size: 13px;
  margin: 30px;
}
p._a .link {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding-left: 1.3em;
  text-indent: -1.3em;
}
p._a .link:before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-right: 10px;
}
/*ハンバーガーメニューここまで*/








@media (max-width:500px){

    .fixed-skyblbg{
        display: none;
        width:0;
    }

    .fixed-skyblbg_sp{
        display: block;
        background-color: #53A5DB;
        width:20vw;
        height: 55px;
    }

    .fixed-bluebg{
        display: none;
        width:0;
    }

    .fixed-green{
        width:calc(60vw - 100px);
        height: 55px;
    }
    .fixed-bagurmenu{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1E2082;
        width:20vw;
        height: 55px;
    }
}



.fixed-logo{
    position: fixed;
    top:0;
    left:0;
    width:154px;
    height:154px;
    z-index: 9 !important;
    margin-left: 5%;
}

@media (max-width:500px){
    .fixed-top{
        position: fixed;
        top:0;
        left:100px;
        z-index: 8 !important;
        width:100%;
        height: 55px;/*85px;*/
    }
    .fixed-logo{
        position: fixed;
        top:0;
        left:0;
        width:100px;/*130px;*/
        height:100px;/*130px;*/
        z-index: 9 !important;
        margin-left: 0;
    }
}

.f-menu{
    border-left:1px #000 solid;
    padding:0 15px;
}
.f-menu:last-of-type {
    border-right: 1px #000 solid;
}

.h100{
    height:100%;
}

.top-btn{
    width:20vw;
    height: 60px;
}
.top-btn-bg{
    background: url('../image/head-btn.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;

    display: flex;
    justify-content: center;/*flex-start; enter;*/
    align-items: center;
}

@media (max-width:500px){
    .top-btn{
        width:30vw;
        height: 55px;
    }
    .top-btn-bg{
        background: url('../image/head-btn_sp.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;

        display: flex;
        justify-content: center;/*flex-start; enter;*/
        align-items: center;
    }
}
.top-slide-wrap>.top-slide:after{background-size:100% 100% !important}

.top-slide-wrap {
   width: 100%;
   height: 92.203898051vh;
   position: relative; }

.top-slide-wrap > .top-slide {
   height: 100%;
   width: 100%;
   overflow: hidden;
   position: relative; }

.top-slide-wrap > .top-slide:after {
   content: '';
   width: 100%;
   height: 100%;
   z-index: 1;
   position: absolute;
   top: 0;
   left: 0;
   background: url(../images/index/slide-shadow.png) no-repeat left center;
   background: -webkit-image-set(url(../images/index/slide-shadow.png) 1x, url(../images/index/slide-shadow@2x.png) 2x) no-repeat left center;
   background-size: 100% 100%; }

.top-slide-wrap > .top-slide .slide-content {
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(45deg); }

.top-slide-wrap > .top-slide .slide-content li {
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   overflow: hidden;
   transition: width 2s;
   z-index: 1; }

.top-slide-wrap > .top-slide .slide-content li.current {
   width: 100%;
   transition: width 0s;
   z-index: 0; }

.top-slide-wrap > .top-slide .slide-content li .slide-image {
   display: block;
   position: absolute;
   top: 50%;
   left: 0;
   transform-origin: left top;
   transform: rotate(-45deg);
   background-size: cover; }

.top-slide-wrap > .top-slide .slide-nav {
   position: absolute;
   z-index: 2;
   right: 4.75%;
   bottom: 0;
   margin-bottom: 28px;
   z-index: 2; }

.top-slide-wrap > .top-slide .slide-nav ul {
   display: flex; }

.top-slide-wrap > .top-slide .slide-nav ul li {
   color: #fff;
   margin: 0 7px;
   padding: 5px;
   transition: color 0.2s; }

.top-slide-wrap > .top-slide .slide-nav ul li.current,  .top-slide-wrap > .top-slide .slide-nav ul li:hover {
   cursor: pointer;
   color: #0067CC; }

.top-slide-wrap > .top-slide .slide-text {
   position: absolute;
   z-index: 2;
   top: 20.4444444444vh;
   left: 7.5625%;
   display: flex;
   flex-direction: column;
   align-items: flex-start; }

.top-slide-wrap > .top-slide .slide-text li {
   white-space: nowrap;
   line-height: 1.4em;
   letter-spacing: 0.05em;
   font-size: 1.625rem;
   background: linear-gradient(90deg, #00BAFF, #0067CC);
   font-weight: bold;
   color: #fff;
   display: block;
   overflow: hidden;
   width: 0;
   transition: width 0.5s; }

.top-slide-wrap > .top-slide .slide-text li .text-inner {
   display: inline-block;
   padding: 0.3846153846em 0.9615384615em; }

.top-slide-wrap > .top-slide .slide-text li br {
   display: none; }

.top-slide-wrap > .top-slide .slide-text li:nth-of-type(2) {
   margin-left: 2.3076923077em;
   margin-top: 1.0384615385em; }

@media (max-width: 850px) {
    .top-slide-wrap > .top-slide .slide-text {
   left: 1%; }
    .top-slide-wrap > .top-slide .slide-text li:nth-of-type(2) {
     margin-left: 1.1538461538em; }
}

.top-slide-wrap .slide-scroll-box {
   position: absolute;
   bottom: 10px;
   left: 0;
   width: 100%;
   z-index: 1;
   text-align: center; }

.top-slide-wrap .slide-scroll-box .slide-scroll {
   display: inline-block;
   padding: 10px; }

.top-slide-wrap .slide-scroll-box .slide-scroll:hover {
   cursor: pointer; }



.top-slide-wrap {
   overflow: hidden; }

.top-slide-wrap > .top-slide {
   height: calc(100% - 285px);
   margin-bottom: 285px;
   overflow: visible; }

.top-slide-wrap > .top-slide:after {
   background-size: auto 100%; }

.top-slide-wrap > .top-slide .slide-nav {
   width: 100%;
   right: auto;
   left: 0;
   margin-bottom: 8px; }

.top-slide-wrap > .top-slide .slide-nav ul {
   justify-content: center; }

.top-slide-wrap > .top-slide .slide-nav ul li {
   margin: 0 4px;
   font-size: 0.875rem; }

.top-slide-wrap > .top-slide .slide-text {
   top: 100%;
   left: 0;
   width: 100%;
   display: block;
   text-align: center;
   background: linear-gradient(90deg, #00BAFF, #0067CC);
   box-sizing: border-box;
   padding-top: 30px;
   height: 285px; }

.top-slide-wrap > .top-slide .slide-text li {
   background: none;
   width: 100% !important;
   margin: 0 !important;
   white-space: pre-wrap;
   padding: 0;
   font-size: 1.125rem;
   line-height: 1.75em;
   transition: all 0s; }

.top-slide-wrap > .top-slide .slide-text li br {
display: block; }

.top-slide-wrap .slide-scroll-box {
   margin-bottom: 60px; }

.top-slide-wrap .slide-scroll-box .slide-scroll img {
   width: 15px;
   height: auto; }

@media (max-width: 768px) and (orientation: landscape) {
    .top-slide-wrap .top-slide {
       height: calc(100% - 150px); }
    .top-slide-wrap .slide-scroll-box {
       margin-bottom: 0;
       bottom: 0; }
    .top-slide-wrap .slide-text {
       height: 150px; }
    .top-slide-wrap .slide-text .text-inner br {
       display: none !important; }
}


#wpimage-1{
background-image:url(/image/mainbg.png);
}

@media (max-width:2048px){
#wpimage-1{
background-image:url(/image/mainbg.png);
}
}
@media (max-width:1536px){
#wpimage-1{
background-image:url(/image/mainbg.png);
}
}
@media (max-width:1242px){
#wpimage-1{
background-image:url(/image/mainbg.png);
}
}
@media (max-width:1080px){
#wpimage-1{
background-image:url(/image/mainbg.png);
}
}
@media (max-width:768px){
#wpimage-1{
background-image:url(/image/mainbg.png);
}
}
@media (max-width:640px){
#wpimage-1{
background-image:url(/image/mainbg.png);
}
}

#wpimage-2{
background-image:url(/image/remainbg.png);
}

@media (max-width:2048px){
#wpimage-2{
background-image:url(/image/remainbg.png);
}
}
@media (max-width:1536px){
#wpimage-2{
background-image:url(/image/remainbg.png);
}
}
@media (max-width:1242px){
#wpimage-2{
background-image:url(/image/remainbg.png);
}
}
@media (max-width:1080px){
#wpimage-2{
background-image:url(/image/remainbg.png);
}
}
@media (max-width:768px){
#wpimage-2{
background-image:url(/image/remainbg.png);
}
}
@media (max-width:640px){
#wpimage-2{
background-image:url(/image/remainbg.png);
}
}

#wpimage-3{
background-image:url(/mainbg.png);
}

@media (max-width:2048px){
#wpimage-3{
background-image:url(/image/bgbg.png);
}
}
@media (max-width:1536px){
#wpimage-3{
background-image:url(/image/bgbg.png);
}
}
@media (max-width:1242px){
#wpimage-3{
background-image:url(/image/bgbg.png);
}
}
@media (max-width:1080px){
#wpimage-3{
background-image:url(/image/bgbg.png);
}
}
@media (max-width:768px){
#wpimage-3{
background-image:url(/image/bgbg.png);
}
}
@media (max-width:640px){
#wpimage-3{
background-image:url(/image/bgbg.png);
}
}

.bganime{
   width: 100vw;
   height: auto;

   animation  : bgAnime 6.5s infinite;   /* 4画像 × 各5s = 20s */
}

.bganime img{
   width: 100vw;
   height: auto;
   object-fit:cover;
}

.bganime2{
   width: 100%;
   height: auto;

   animation  : bgAnime 6.5s infinite;   /* 4画像 × 各5s = 20s */
}

.bganime2 img{
   width: 100%;
   height: auto;
   object-fit:cover;
}

@keyframes bgAnime {
  0% { opacity: 1; transform: scale(1.0, 1.0); }
 100% { opacity: 1; transform: scale(1.2, 1.2); }
}




.blue,
.yellow,
.red{
 height: 500px;
 line-height: 500px;
 position: relative;
}
.black{
   width:auto;
   height: auto;
   position: relative;
}

span {
 position: relative;
}

.blue {
 background: blue;
}

.yellow::before{
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 100%;
 background: yellow;
 transition: 0.5s;
}

.red::before{
 content: '';
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 width: 0;
 height: 100%;
 background: red;
 transition: 0.5s;
}

.black::before{
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 100%;
 background: #000;
 transition: 0.5s;
}

.fade::before {
 width: 100%;
}



/*------------------*/




/*------------------------------------------------------------------------------
 common
------------------------------------------------------------------------------*/

/* title */

.c-ttl01 {
 border-bottom: 3px solid #2e7dd8;
 font-size: 28px;
 font-weight: bold;
 margin-bottom: 50px;
 padding-bottom: 5px;
}
.c-ttl01 .large {
 font-size: 38px;
 color: #2e7dd8;
 letter-spacing: -0.05em;
}

.c-ttl02 {
 background: #e0f6f8;
 font-size: 20px;
 font-weight: bold;
 margin: 60px 0 30px;
 padding: 10px;
}

.c-ttl03 {
 font-size: 18px;
 margin: 40px 0 10px;
}

.note {
 color: #404040;
 font-size: 14px;
 margin-top: 10px;
}

/* もくじ */

.contents-li {
 border: 1px solid #e0f6f8;
 padding: 15px;
 margin: 10px 0;
}

.contents-li li + li {
 margin-top: 5px;
}

.contents-li li a {
 color: #2e7dd8;
}
@media screen and (min-width: 641px) {
 .contents-li li a:hover {
   text-decoration: underline;
 }
}

.pagetop {
 border: 1px solid #362ae0;
 color: #362ae0;
 display: inline-block;
 margin-top: 150px;
 padding: 60px 40px 20px;
 position: relative;
 text-align: center;
}
.pagetop::before {
 border: solid #362ae0;
 border-width: 1px 0 0 1px;
 content: "";
 display: inline-block;
 margin: auto;
 position: absolute;
 top: 25px;
 left: 0;
 right: 0;
 -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
 transform: rotate(45deg) translate3d(0, 0, 0);
 width: 20px;
 height: 20px;
}

@media screen and (min-width: 641px) {
 .pagetop:hover {
   background: #e7fbff;
 }
}


/*------------------------------------------------------------------------------
 anim
------------------------------------------------------------------------------*/

.anim-box {
 background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
 border-radius: 5px;
 max-width: 300px;
 height: 180px;
 opacity: 0;
 margin: 15px 25px;
}

/* フェードイン */
.anim-box.fadein.is-animated {
 animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}

/* スライドイン */
.anim-box.slidein.is-animated {
 animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn {
 0% {
   transform: translateX(180px);
   opacity: 0;
 }
 100% {
   transform: translateX(0);
 }
 40%,100% {
   opacity: 1;
 }
}

/* ズームイン */
.anim-box.zoomin.is-animated {
 animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes zoomIn {
 0% {
   transform: scale(0.8);
   opacity: 0;
 }
 100% {
   opacity: 1;
   transform: scale(1);
 }
}

/* ぽよよん */
.anim-box.poyoyon.is-animated {
 animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

@keyframes poyoyon {
 0% {
   transform: translateX(140px);
   opacity: 0;
 }
 50% {
   transform: translateX(0);
 }
 65% {
   transform: translateX(30px);
 }
 100% {
   transform: translateX(0);
 }
 20%,100% {
   opacity: 1;
 }
}

/* ぽよよん2 */
.anim-box.poyoyon2.is-animated {
 animation: poyoyon2 1s ease-in-out 1 forwards;
}

@keyframes poyoyon2 {
 0%  {
   transform: scale(1.0, 1.0) translate(0, 0);
 }
 15% {
   transform: scale(0.98, 0.9) translate(0, 5px);
 }
 30% {
   transform: scale(1.02, 1.0) translate(0, 8px);
 }
 50% {transform: scale(0.98, 1.05) translate(0, -8px);
 }
 70% {
   transform: scale(1.0, 0.9) translate(0, 5px);
 }
 100% {
   transform: scale(1.0, 1.0) translate(0, 0);
 }
 0%, 100% {
   opacity: 1;
 }
}

/* ぽよよん3 */
.anim-box.poyoyon3 {
 animation: poyoyon3 2.5s infinite;
 opacity: 1;
}
@keyframes poyoyon3 {
 0%, 40% {
   transform: skew(0deg, 0deg);
 }
 5% {
   transform: skew(5deg, 5deg);
 }
 10% {
   transform: skew(-4deg, -4deg);
 }
 15% {
   transform: skew(3deg, 3deg);
 }
 20% {
   transform: skew(-2deg, -2deg);
 }
 25% {
   transform: skew(1deg, 1deg);
 }
 30% {
   transform: skew(-0.6deg, -0.6deg);
 }
 35% {
   transform: skew(0.3deg, 0.3deg);
 }
}


/* ポップアップ */
.anim-box.popup.is-animated {
 animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes popup {
 0% {
   transform: translateY(40px) scale(0.8);
   opacity: 0;
 }
 100% {
   transform: translateY(0) scale(1.0);
 }
 80%, 100% {
   opacity: 1;
 }
}

/* どくどく */
.anim-box.poyopoyo {
 animation: poyopoyo 2s ease-out infinite;
 opacity: 1;
}
@keyframes poyopoyo {
 0%, 40%, 60%, 80% {
   transform: scale(1.0);
 }
 50%, 70% {
   transform: scale(0.95);
 }
}

/* ななめから出てくる */
.anim-box.slide-skew.is-animated {
 animation: slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slide-skew {
 0% {
   transform: translate(180px,30px);
   opacity: 0;
 }
 100% {
   transform: translate(0,0);
 }
 20%,100% {
   opacity: 1;
 }
}


/* きらん */
.anim-box.kiran {
 opacity: 1;
 overflow: hidden;
 position: relative;
 cursor: pointer;
}
.anim-box.kiran::before {
 background-color: #fff;
 content: "";
 display: block;
 position: absolute;
 top: -100px;
 left: 0;
 width: 30px;
 height: 100%;
 opacity: 0;
 transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.anim-box.kiran:hover::before {
 animation: kiran 0.5s linear 1;
}

@keyframes kiran {
 0% {
   transform: scale(2) rotate(45deg);
   opacity: 0;
 }
 20% {
   transform: scale(20) rotate(45deg);
   opacity: 0.6;
 }
 40% {
   transform: scale(30) rotate(45deg);
   opacity: 0.4;
 }
 80% {
   transform: scale(45) rotate(45deg);
   opacity: 0.2;
 }
 100% {
   transform: scale(50) rotate(45deg);
   opacity: 0;
 }
}

/* 背景色が流れてくる */
.bg .bg-wrap {
 position: relative;
 display: inline-block;
 margin-top: 5px;
}
.bg.is-animated .bg-wrap::before {
 animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 transform-origin: left center;
}
.bg .bg-wrap .inn {
 color: #fff;
 display: inline-block;
 font-size: 36px;
 font-weight: bold;
 padding: 5px 15px;
 position: relative;
 z-index: 1;
}

@keyframes bg {
 0% {
   opacity: 0;
   transform: scaleX(0) translateX(-5%);
 }
 30% {
   transform: scaleX(1) translateX(0);
 }
 100% {
   transform: scaleX(1) translateX(0);
 }
 30%, 100% {
   opacity: 1;
 }
}

/* 文字がぬるりと現れる */
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
 display: block;
}

.matrix .bg-wrap {
 overflow: hidden;
 opacity: 0;
}

.matrix .bg-wrap + .bg-wrap {
 margin-top: 10px;
}

.matrix .bg-wrap .inn.large {
 font-size: 36px;
 font-weight: bold;
}
.matrix .bg-wrap .inn.small {
 font-size: 15px;
}

.matrix .bg-wrap .inn {
 opacity: 0;
 transform: matrix(1, 0, 0, 1, 0, 100);
 transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.matrix.is-animated .bg-wrap {
 opacity: 1;
}

.matrix.is-animated .bg-wrap .inn {
 opacity: 1;
 transform: matrix(1, 0, 0, 1, 0, 0);
}

/* 背景色が消えてから表示されるテキスト */
.mask-bg {
opacity: 0;/*追加*/
 color: transparent;
 display: inline-block;/*inline-block*/
 /*width:100%;800px;*/
 overflow: hidden;
 position: relative;
 transition: color 0ms 450ms;
}

.mask-bg1 {
opacity: 0;/*追加*/
 color: transparent;
 display: inline-block;/*inline-block*/
 /*width:100%;800px;*/
 overflow: hidden;
 position: relative;
 transition: color 0ms 450ms;
}

.mask-bg2 {
opacity: 0;/*追加*/
 color: transparent;
 display: inline-block;/*inline-block*/
 /*width:100%;800px;*/
 overflow: hidden;
 position: relative;
 transition: color 0ms 450ms;
}

/*
.mask-bg p{
   font-size: 36px;
   font-weight: bold;
}*/

.mask-item{
   opacity: 0;
}

.mask-bg::after {
 /*background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);*/
 background-color: #333;/*#C2C3C3;*/
 bottom: 0;
 content: '';
 display: block;
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 transform: translate(0, 100%);
}

.mask-bg1::after {
 /*background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);*/
 background-color: #1D2088;/*#C2C3C3;*/
 bottom: 0;
 content: '';
 display: block;
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 transform: translate(0, 100%);
}

.mask-bg2::after{
     background-color: #EA9416;/*#C2C3C3;*/
     bottom: 0;
     content: '';
     display: block;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     transform: translate(0, 100%);
}

.mask-bg.is-animated {
 opacity: 1;/*追加*/
 color: #1C2A73;
}

.mask-bg1.is-animated {
 opacity: 1;/*追加*/
 color: #1C2A73;
}

.mask-bg2.is-animated {
 opacity: 1;/*追加*/
 color: #1C2A73;
}

.mask-bg.is-animated::after {
 animation: mask-bg 1s cubic-bezier(0.8, 0, 0.170, 1);
 animation-delay: 0s;
}

.mask-bg1.is-animated::after {
 animation: mask-bg 1s cubic-bezier(0.8, 0, 0.170, 1);
 animation-delay: 0s;
}

.mask-bg2.is-animated::after {
 animation: mask-bg 1s cubic-bezier(0.8, 0, 0.170, 1);
 animation-delay: 0s;
}

@keyframes mask-bg {
 0% {
   /*transform: translate(0, 101%)*/
   transform: translate(-101%,0)
 }
 40%, 60% {
   /*transform: translate(0, 0%)*/
   transform: translate(0, 0%)
 }
 100% {
   /*transform: translate(0, -100%)*/
   transform: translate(100%,0)
 }
}

.mask-item.is-animated {
   animation: mask-item 1s cubic-bezier(0.8, 0, 0.170, 1);
   animation-delay: 0s;
   animation-fill-mode: forwards;
}
@keyframes mask-item {
 0% {
   opacity: 0;
 }
 70% {
   opacity: 1;
 }
 100% {
   opacity:1;
 }
}


/* 線が伸びる */
.line {
 display: block;
 position: relative;
 margin-top: 20px;
}
.line::after {
 background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
 content: '';
 display: block;
 height: 1px;
 width: 0;
 transform: translateX(-50%);
 transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
 position: absolute;
 bottom: 0;
 left: 50%;
}
.line.is-animated::after {
 width: 100%;
}


/* フェードアップ */
.anim-box.fadeup.is-animated {
 animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeup {
 0% {
   transform: translateY(30px);
   opacity: 0;
 }
 80% {
   opacity: 1;
 }
 100% {
   opacity: 1;
   transform: translateY(0);
 }
}

/* ボーダーが緩やかにつく */
.stroke {
 background: #f0f0f0;
 max-width: 400px;
 height: 250px;
 position: relative;
}

.stroke .border {
 content: "";
 position: absolute;
 opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
 width: calc(100% - 20px);
}
.stroke .border.top {
 border-top: 3px solid #362ae0;
 right: 0;
 top: 0;
}
.stroke .border.bottom {
 border-bottom: 3px solid #362ae0;
 left: 0;
 bottom: 0;
}

.stroke .border.right,
.stroke .border.left {
 height: calc(100% - 20px);
}
.stroke .border.right {
 border-right: 3px solid #362ae0;
 right: 0;
 top: 0;
}
.stroke .border.left {
 border-left: 3px solid #362ae0;
 left: 0;
 bottom: 0;
}

.stroke.is-animated .border {
 opacity: 1;
}

.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
 animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
 animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes stroke-width {
 0% {
   width: 0;
   opacity: 1;
 }
 100% {
   width: calc(100% - 20px);
   opacity: 1;
 }
}

@keyframes stroke-height {
 0% {
   height: 0;
   opacity: 1;
 }
 100% {
   height: calc(100% - 20px);
   opacity: 1;
 }
}

/* 文字が滑らかに表示される */
.smooth {
 clip-path: inset(0 100% 0 0);
 display: inline-block;
 font-size: 36px;
 font-weight: bold;
 transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
 transition-property: clip-path;
 line-height: 1;
 height: 40px;
 margin-top: 15px;
}
.smooth.is-animated {
 clip-path: inset(0);
}

/* ふわふわ */
.fuwafuwa {
 animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
 background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
 display: inline-block;
 transition: 1.5s ease-in-out;
 width: 70px;
 height: 70px;
 margin-top: 15px;
}

@keyframes fuwafuwa {
 0% {
   transform:translate(0, 0) rotate(-7deg);
 }
 50% {
   transform:translate(0, -7px) rotate(0deg);
 }
 100% {
   transform:translate(0, 0) rotate(7deg);
 }
}

/* ゆったりスクロールボタン */

.scroll {
 display: inline-block;
 padding-top: 70px;
 position: relative;
}
.scroll::before {
 animation: scroll 3.5s infinite;
 border: solid #000;
 border-width: 0 0 1px 1px;
 content: "";
 display: inline-block;
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 transform: rotate(-45deg);
 width: 20px;
 height: 20px;
}
@keyframes scroll {
 0% {
   transform: rotate(-45deg) translate(0, 0);
 }
 80% {
   transform: rotate(-45deg) translate(-30px, 30px);
 }
 0%, 80%, 100% {
   opacity: 0;
 }
 40% {
   opacity: 1;
 }
}

/* くるくる回りながら出現 */
.kurukuru {
 background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
 width: 50px;
 height: 50px;
 opacity: 0;
 padding-bottom: 40px;
}
.kurukuru.is-animated {
 animation: kurukuru 1.4s ease-out;
 opacity: 1;
}
@keyframes kurukuru {
 0%{
   transform: rotateY(0) translateY(40px);
   opacity: 0;
 }
 100%{
   transform: rotateY(360deg) translateY(0);
   opacity: 1;
 }
}


/*------------------------------------------------------------------------------
 clearfix
------------------------------------------------------------------------------*/

.clearfix:after,
.inner-block:after {
 clear: both;
 content: "";
 display: block;
 height: 0px;
 font-size: 0;
 visibility: hidden;
}

/*------------------------------------------------------------------------------
無料会員登録以降

青縞模様
------------------------------------------------------------------------------*/

.flx-leaf{
    display: none;
}

.l-mt30x{
    margin-top: 30px;
}

@media (max-width:500px){
    .flx-leaf{
        width:50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .l-mt30x{
        margin-top: 0;
    }
}

.blue_sima {
   width:100%;
   background: linear-gradient(
   45deg,
   #2EA7E0 25%, #5ECAEF 25%,
   #5ECAEF 50%, #2EA7E0 50%,
   #2EA7E0 75%, #5ECAEF 75%,
   #5ECAEF
 );
 background-size: 10px 10px;
}

.blue_sima1 {
   width:100%;
   background: linear-gradient(
   135deg,
   #fff 25%, #83CEE8 25%,
   #83CEE8 50%, #fff 50%,
   #fff 75%, #83CEE8 75%,
   #83CEE8
 );
 background-size: 12px 12px;
}

/*トップ　スライド*/
.top-s2{
    width:100%;
    height: auto;
    overflow: hidden;
    position:relative;
}
/*
@media (min-width:2561px) and (max-width:5120px){
    .top-s2{
        width:5120px;
    }
}

@media (min-width:1281px) and (max-width:2560px){
    .top-s2{
        width:2560px;
    }
}

@media (min-width:641px) and (max-width:1280px){
    .top-s2{
        width:1280px;
    }
}

@media (max-width:640px){
    .top-s2{
        width:640px;
    }
}
*/

.b900{
    font-weight: 900;
}

.top-s2-item1{/*For Win*/
    position:absolute;
    top:10%;
    left:53%;
}

.top-s2-item11{/*For Win*/
    position:absolute;
    top:10%;
    left:23%;
}

.top-s2-item1f{/*For Win footer*/
    position:absolute;
    top:10%;
    left:53%;
}

@media (max-width:500px){
    .top-s2-item1{
        width:90%;
        position:absolute;
        top:15%;
        left:5%;
    }
    .top-s2-item11{/*For Win*/
        width:90%;
        position:absolute;
        top:50%;
        left:5%;
    }
    .top-s2-item1f{/*For Win footer*/
        position:absolute;
        top:2%;
        left:3%;
        width:95%;
    }
}




.top-s2-item2{/*黄色タイトル*/
    position:absolute;
    top:17%;
    left:74%;
}

.top-s2-item2f{/*黄色タイトル footer*/
    position:absolute;
    top:17%;
    left:74%;
}


.top-s2-item22{/*青色タイトル*/
    position:absolute;
    top:17%;
    left:19%;
}

.top-s2-item22f{/*青色タイトルfooter*/
    position:absolute;
    top:40%;
    left:19%;
}

@media (max-width:500px){
    .top-s2-item2{
        width:50%;
        position:absolute;
        top:20%;
        left:45%;
    }
    .top-s2-item2f{/*黄色タイトル footer*/
        position:absolute;
        top:9%;
        left:49%;
        width:50%;
    }
    .top-s2-item22{/*青色タイトル*/
        position:absolute;
        top:54%;/*44%*/
        left:49%;
        width:50%;
    }
    .top-s2-item22f{/*青色タイトルfooter*/
        position:absolute;
        top:50%;
        left:4%;
        width:50%;
    }
}


.top-s2-item3{/*星３蓮*/
    width:450px;
    position:absolute;
    top:45%;
    left:35%;
}

.top-s2-item33{/*星３蓮　ｓｐのみ*/
    display: none;
}

.top-s2-item4{
    width:550px;
    /*width:38%;*/
    position: absolute;
    top: 35%;/*50%*/
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    margin: auto;
}

@media (max-width:500px){
    .top-s2-item3{/*星３蓮*/
        width:330px;
        position:absolute;
        top:55%;
        left:-2%;
    }
    .top-s2-item33{/*星３蓮　ｓｐのみ*/
        display:block;
        width:330px;
        position:absolute;
        top:7%;
        left:8%;
    }

    .top-s2-item4{
        width:330px;/*360px*/
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit- transform: translateY(-50%) translateX(-50%);
        margin: auto;
    }
}

.star{
    width:200px;/*400px*/
    height:200px;/**/
      display: flex;
      justify-content: center;/*flex-start;center;*/
      align-items: center;
      /*text-align: center;
      margin: 0 auto;*/
      padding:40px 20px 20px 20px;
      margin-bottom: 15px;
}

.star2{
    width:230px;/*400px*/
    height:230px;/**/
      display: flex;
      justify-content: center;/*flex-start;center;*/
      align-items: center;
      /*text-align: center;
      margin: 0 auto;*/
      padding:45px 25px 25px 25px;
      margin-bottom: 20px;
}

.star3{
    width:250px;/*400px*/
    height:230px;/**/
      display: flex;
      justify-content: center;/*flex-start;center;*/
      align-items: center;
      /*text-align: center;
      margin: 0 auto;*/
      padding:45px 25px 25px 25px;
      margin-bottom: 20px;
}

.star-bg{
    background: url('../image/star.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

@media (max-width:500px){
    .star{
        width:165px;/*400px*/
        height:165px;/**/
          display: flex;
          justify-content: center;/*flex-start;center;*/
          align-items: center;
          /*text-align: center;
          margin: 0 auto;*/
          padding:32px 16px 16px 16px;
          margin-bottom: 12px;
    }

    .star2{
        width:180px;/*400px*/
        height:180px;/**/
          padding:36px 18px 18px 18px;
          margin-bottom: 13px;
    }
    .star3{
        width:132px;
        height:132px;/**/
          padding:32px 12px 12px 12px;
          margin-bottom: 10px;
    }
}

.yb{
    color:yellow;
    font-size: 1.2em;
    font-weight: 900;
}

.whb{
    color:#fff;
    font-size: 1.6em;
    font-weight: 900;
}
.whn{
    text-align: left;
    color:#fff;
    font-size: 1.2rem;
    line-height: 2;
}

.bln{
    text-align: left;
    color:#000;
    font-size: 1.2rem;
    line-height: 2;
}

@media (max-width:500px){
    .whn{
        font-size: 1.6rem;
    }
    .bln{
        font-size: 1.6rem;
    }
    .sp-lh18{
        line-height: 1.8;
    }
}

.freethis{
    position: relative;
    z-index: 1 !important;
    border-radius: 10px;
    color: #fff;
    font-size: 1.6em;/*1.2em*/
    font-weight: 900;
    background-color: #1D2088;
    padding:5px 35px;
    margin-bottom: -1em;
}

.poligonsea{
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;/*flex-start;center;*/
    border-radius: 10px;
    border:1px solid #1D2088;
}

.poligonsea-bg{
    background: url('../image/poligonsea.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.leaf{
    width:230px;/*400px*/
    height:170px;/**/
      display: flex;
      justify-content: center;/*flex-start;center;*/
      align-items: center;
      /*text-align: center;
      margin: 0 auto;*/
      padding:20px 20px 20px 20px;
      margin-bottom: 15px;
}

.leaf-bg{
    background: url('../image/leaf.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.leaf-center{
    margin-left: 15px;
    margin-right: 15px;
}

@media (max-width:500px){
    .leaf{
        width:46%;/*400px*/
        height:auto;/**/
          display: flex;
          justify-content: center;/*flex-start;center;*/
          align-items: center;
          /*text-align: center;
          margin: 0 auto;*/
          padding:20px 20px 20px 20px;
          margin-bottom: 0;
    }
    .leaf-center{
        margin-left: 0;
        margin-right: 0;
    }
}

.aka{
    color:#E60013;
    font-weight: bold;
}

.siro{
    color:#fff;
    font-size: 0.8em;
}

@media (max-width:500px){
    .siro{
        color:#fff;
        font-size: 1em;
        text-align: center;
    }
    .sp_mt150x{
        margin-top: 150px;
    }
    .sp_mt200x{
        margin-top: 200px;
    }
    .sp_mt230x{
        margin-top: 230px;
    }
    .sp_mt250x{
        margin-top: 250px;
    }
    .sp_mt270x{
        margin-top: 270px;
    }
}

.balloon-red {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  text-align: center;
  padding: 7px 10px;
  /*min-width: 120px;*/
  width:100%;
  max-width: 100%;
  color: #fff;
  background: #E60013;
  border-radius: 10px;
}

.balloon-red:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 25%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #E60013;
}

.balloon-red:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 75%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #E60013;
}

@media (max-width:500px){
    .balloon-red:before {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -15px;
      border: 15px solid transparent;
      border-top: 15px solid #E60013;
    }

    .balloon-red:after {
      border: 0;
      border-top: 0;
    }
}

.balloon-red p {
  margin: 0;
  padding: 0;
  font-size:1.4em;
  font-weight: normal;
  color:#fff;
}

.green1{
    position: relative;
    width:380px;
    padding:20px 20px;
    border-radius: 10px;
    border:1px #34B157 solid;
    background-color: #fff;
}


.green1::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 47%;
  border-radius: 50%;
  background-color: #34B157;
  width: 32px;
  height:32px;
}

.green1 .num1{
    position: absolute;
    z-index: 1 !important;
    top: -22px;
    left: calc(47% + 4px);
    color:#fff;
    font-size: 1.6em;
    font-size: normal;
}

.green1 p{
    color:#34B157;
    font-size: 1.4em;
    font-weight: bold;
}

.blue2{
    position: relative;
    width:380px;
    padding:20px 20px;
    border-radius: 10px;
    border:1px #225DAB solid;
    background-color: #fff;
}

.blue2::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 47%;
  border-radius: 50%;
  background-color: #225DAB;
  width: 32px;
  height:32px;
}

.blue2 .num1{
    position: absolute;
    z-index: 1 !important;
    top: -22px;
    left: calc(47% + 4px);
    color:#fff;
    font-size: 1.6em;
    font-size: normal;
}
.blue2 p{
    color:#225DAB;
    font-weight: bold;
    font-size: 1.4em;
}

@media (max-width:500px){
    .green1{
        position: relative;
        width:100%;
        padding:20px 20px;
        border-radius: 10px;
        border:1px #34B157 solid;
        background-color: #fff;
    }


    .green1::after {
      content: "";
      position: absolute;
      top: -18px;
      left: 45%;
      border-radius: 50%;
      background-color: #34B157;
      width: 32px;
      height:32px;
    }

    .green1 .num1{
        position: absolute;
        z-index: 1 !important;
        top: -18px;
        left: calc(45% + 6px);
        color:#fff;
        font-size: 1.9em;
    }
    .blue2{
        position: relative;
        width:100%;
        padding:20px 20px;
        border-radius: 10px;
        border:1px #225DAB solid;
        background-color: #fff;
    }

    .blue2::after {
      content: "";
      position: absolute;
      top: -18px;
      left: 45%;
      border-radius: 50%;
      background-color: #225DAB;
      width: 32px;
      height:32px;
    }

    .blue2 .num1{
        position: absolute;
        z-index: 1 !important;
        top: -18px;
        left: calc(45% + 6px);
        color:#fff;
        font-size: 1.9em;
    }
}


.boat1{
    position: absolute;
    z-index: 0 !important;
    top: 10%;
    left: 80%;
}
.people1{
    position: absolute;
    z-index: 1 !important;
    top: 30%;
    left: 60%;
}
.money1{
    position: absolute;
    z-index: 2 !important;
    top: 65%;
    left: 75%;
}

@media (max-width:500px){

    .boat1{
        position: absolute;
        z-index: 0 !important;
        top: 16%;
        left: 60%;
    }
    .people1{
        position: absolute;
        z-index: 1 !important;
        top: 25%;
        left: 30%;
    }
    .money1{
        position: absolute;
        z-index: 2 !important;
        top: 40%;
        left: 55%;
    }

}

.point1{
    width:100%;
    background-color: #D9F1FC;
}
.point2{
    background-color: #fff;
    width:100%;
}

.point3{
    width:100%;
    background-color: #D9F1FC;
}
.point4{
    background-color: #fff;
    width:100%;
}


/*
.appeal2-bg {
	display:block;
	width:100%;
	height: 100%;
	background-image: url(../image/bgbg.png);
	background-size:cover;
	background-attachment: fixed;
	text-align: center;
    z-index: -3 !important;
}*/

.appeal{

    background-color: #fff;
}

    .appeal2-bg {
        width:100%;
        position: relative;
    }
    .appeal2-bg:before{
    position: absolute;
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-3;
    width:100%;
    height:100vh;
    background:url(../image/bgbg.png) center no-repeat;
    background-size:cover;
    }

.cth-marker-bold {
    padding: 3px 1px;/*3px 1px*/
    background-size: 100% 200%;/*100% 200%   30%    12px*/
    background-position: /*bottom;*/-100% 100%;/*-90% 200%   80% 0   10px*/
    background-repeat: repeat-y;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
}

.cth-marker-bold.cth-marker-position {
    background-position: 100% 0;/*90% 0    -90% 200%     -100% 10px*/
}
.cth-marker-yellow {
background-image: -webkit-linear-gradient(bottom, rgba(255,235,6,0) 50%, rgba(255,241,52,0.9) 50%);
background-image: -moz-linear-gradient(bottom, rgba(255,235,6,0) 50%, rgba(255,241,52,0.9) 50%);
background-image: -o-linear-gradient(bottom, rgba(255,235,6,0) 50%, rgba(255,241,52,0.9) 50%);
background-image: -ms-linear-gradient(bottom, rgba(255,235,6,0) 50%, rgba(255,241,52,0.9) 50%);
background-image: linear-gradient(bottom, rgba(255,235,6,0) 50%, rgba(255,241,52,0.9) 50%);
}


.tatetext2 {
text-orientation: upright;
color:#000;/*#da3c41;*/
font-size: 1.4em;
font-weight: 900;
font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
/*
-webkit-font-feature-settings: 'pkna';
font-feature-settings: 'pkna';
*/
line-height: 1.4;
letter-spacing: 0;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
text-align: left;
}

.tate-sub{
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.white{
    color:#fff;
}

@media (max-width:500px){
    .sp-w160px{
        width:160px;
    }

    .tatetext2 {
        /*margin-left: 20%;*/

    }
}

.art-bg1 {
	background-image: url(../image/art-bg1.png);/*固定する背景画像*/
    background-position: center;
	background-size:cover;/*背景画像のサイズを指定*/
}

.art-bg2 {
	background-image: url(../image/art-bg2.png);/*固定する背景画像*/
    background-position: center;
	background-size:cover;/*背景画像のサイズを指定*/
}

@media (max-width:500px){
    .art-bg1 {
    	background-image: url(../image/art-bg2_sp.png);/*固定する背景画像*/
        background-position: center;
    	background-size:cover;/*背景画像のサイズを指定*/
    }

    .art-bg2 {
    	background-image: url(../image/art-bg2_sp.png);/*固定する背景画像*/
        background-position: center;
    	background-size:cover;/*背景画像のサイズを指定*/
    }

}

.art-bg-kyo {
    position:relative;
	display:block;
	width:100%;
	height: 100%;
	background-image: url(../image/kyo-bg.png);/*固定する背景画像*/
	background-size:cover;/*背景画像のサイズを指定*/
    z-index: -2 !important;
}

.shoko{
    width:100%;
    position:relative;
    background-color: #A3D3E7;
    padding:50px 0;
}
.shoko:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -30px;
  border: 30px solid transparent;
  border-top: 30px solid #A3D3E7;
}

.line-white{
    width:100%;
    background-color: #FFF;
    padding:30px 0;
}

.performance{
    background-color: #FFF;
}

.usvoice{
    background-color: #FFF;
}

.org{
    color:#E69C2F;
    /*background-color: #1E2082;*/
    line-height: 2.4;
    font-weight:900;
    font-size: 2.2rem;
    padding:10px 20px;
}

.kon{
    background-color:#E69C2F;
    color: #1E2082;
    line-height: 2.4;
    font-weight:900;
    font-size: 2.2rem;
    padding:10px 20px;
}

@media (max-width:500px){
    .org{
        font-size: 1.8rem;
        padding:10px 10px;
    }

    .kon{
        font-size: 1.8rem;
        padding:10px 10px;
    }
}




table, th, td {
  /*width: auto !important;*/
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 380px;/*650px;*/
  height:200px !important;
  table-layout: fixed;
}

tr{
    width:380px  !important;
}

table tr {
  background-color: #fff;
  padding:5px .35em;
  border-bottom: 2px solid #1E2082;
  border-right: 2px solid #1E2082;
  border-left: 2px solid #1E2082;
}

table th{
  padding: 0.5em 10px 0.5em 1em;
  border-right: 2px solid #fff;
}

table td {
  padding: 0.5em 10px 0.5em 1em;
  border-right: 2px solid #1E2082;
}

table th {
  font-size: .85em;
}
table thead tr{
  background-color: #1E2082;
  color:#fff;
}
table tbody th {
    background: #1E2082;
    color: #fff;
}

.txt{
   text-align: left;
   font-size: 1.2em;
}

.txts{
   text-align: left;
   font-size: .85em;
}

.price{
  text-align: center;
  color: #D32D26;
  font-weight: bold;
  font-size: 1.8em;
}
.non{
  background:#fff
}
.border-r{
  border-right: 2px solid #1E2082;
}
.sk3{
    border: 1px #000 solid;
    padding:0 5px;
}
.sk4{
    display     : inline-block;    /* 変形するためのブロック化 */
    font-size   : 1em;            /* 文字サイズ */
    line-height : 1em;             /* 行の高さ */
    transform   : scale(1);   /* 変形 横,縦 */


    /*width:1em;
    height: 1em;*/
    padding:0 0.2em;
    border: 1px #000 solid;
}
.sk-{
    display     : inline-block;    /* 変形するためのブロック化 */
    font-size   : 0.8em;            /* 文字サイズ */
    line-height : 1em;             /* 行の高さ */
    transform   : scale(1);   /* 変形 横,縦 */
/*
    width:0.8em;
    height: 0.8em;
*/
    padding:0;
}

.bg-blue{
    background-color: #1E2082;
    color:#fff;
}
.bg-red{
    background-color: #D32D26;
    color:#fff;
}

.bg-cap1{
    background-color: #fff;
    color:#000;
}
.bg-cap2{
    background-color: #000;
    color:#fff;
}
.bg-cap3{
    background-color: #D32D26;
    color:#fff;
}
.bg-cap4{
    background-color: #1E2082;
    color:#fff;
}
.bg-cap5{
    background-color: #FFF134;
    color:#000;
}
.bg-cap6{
    background-color: #196739;
    color:#fff;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
    width:100%
  }
  table th{
    background-color: #167F92;
    display: block;
    border-right: none;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size: .8em;
    text-align: right;
    position: relative;
    padding: .625em .625em .625em 4em;
    border-right: none;
  }

  table td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
    color: #167F92;
  }
  table td:last-child {
    border-bottom: 0;
  }
  table tbody th {
    color: #fff;
}
}

.plan1{
    width:450px;/*345px;400px*/
    height:auto;/*200px;*/
      display: flex;
      flex-direction: column;
      justify-content: center;/*center;*/
      align-items:center;
      /*text-align: center;
      margin: 0 auto;*/
      padding:30px 35px 0 15px;
      margin-bottom:0;/* 15px;*/
}


.plan1-bg{
    background: url(../image/plan1.png) no-repeat;
    background-position:center center;
    background-size: contain;/*cover*/
}


ul.price-flex{
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

ul.price-flex ul{
  display: flex;
}
ul.price-flex ul.ul01{
  border-bottom: 0;
}
ul.price-flex ul li{
  flex-grow: 1;
  width: 25%;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  padding: 10px;
}
ul.price-flex ul li:last-child{
  border-right: none;
}
ul.price-flex ul.ul01 li{
  background-color: #ffeaea;
}
ul.price-flex ul.ul01 li.li01{
  background-color: #ff9191;
}


@media screen and (max-width: 640px) {
  ul.price-flex ul{
    flex-wrap:wrap;
  }
  ul.price-flex ul .li04,
  ul.price-flex ul .li03,
  ul.price-flex ul .li01{
    border-right: none;
  }
  ul.price-flex ul .li04,
  ul.price-flex ul .li01{
    width: 100%;
  }
  ul.price-flex li.price{
  }
}


.grid-sima{
    display: flex;
    justify-content: center;/*flex-start;*/
    align-items: center;
    width:399px;/*479px; 460px*/
    height:286px;/*344px; 329pxauto;*/
    position: relative;
}

@media (max-width:500px){
    .grid-sima{
        width:350px;/*96%350px;*/
        height:250px;/*250px;*/
    }
}

.grid-sima-bg{
    background: url(../image/smkage.png) no-repeat;
    background-position:center center;/*top right;center center;top right;*/
    background-size: contain;/*cover*/
}

.grid-mato{
    position: absolute;
    z-index: 2 !important;
    top:-5px;
    right:0;/*12px*/
    width:52px;/*62px*/
    height: 52px;/*62px*/
}

@media (max-width:500px){
    .grid-mato{
        top:0;
        right:0;/*12px*/
        width:45px;/*62px*/
        height: 45px;/*62px*/
    }
}

.grid-mato-bg{
    /*background: url(../image/g-mato.png) no-repeat;
    background-position:center center;
    background-size: contain;*/
}

.grid-cont {
 display: grid;
 /*grid-template-rows: repeat(3, 50px);*/
  /*grid-template-rows:139px 35px 85px 48px;=307*/
  grid-template-rows:115px 29px 71px 40px;
/* grid-template-columns: repeat(3, 150px);*/
 /*grid-template-columns:90px 150px 200px;=440*/
 grid-template-columns:75px 125px 166px;
}

@media (max-width:500px){
    .grid-cont {
    /*grid-template-rows:100px 25px 62px 35px;
    grid-template-columns:20% 35% 45%;*/
     grid-template-rows:100px 25px 62px 35px;
     grid-template-columns:65px 110px 145px;
    }
}

.grid-img{
    display: flex;
    justify-content: center;/*flex-end;*/
    align-items: center;
    grid-column: 1/4;
    grid-row: 1;
}

.grid-img-bg1{
    background: url(../image/pb1.png) no-repeat;
    background-position:center center;
    background-size: contain;/*cover*/
}

.grid-img-bg2{
    background: url(../image/pb2.png) no-repeat;
    background-position:center center;
    background-size: contain;/*cover*/
}

.grid-img-bg3{
    background: url(../image/pb3.png) no-repeat;
    background-position:center center;
    background-size: contain;/*cover*/
}

.grid-img-bg4{
    background: url(../image/pb4.png) no-repeat;
    background-position:center center;
    background-size: contain;/*cover*/
}

.grid-img-bg5{
    background: url(../image/pb5.png) no-repeat;
    background-position:center center;
    background-size: contain;/*cover*/
}

.grid-img-bg6{
    background: url(../image/pb6.png) no-repeat;
    background-position:center center;
    background-size: contain;/*cover*/
}

.grid-img-bg7{
    background: url(../image/pb7.png) no-repeat;
    background-position:center center;
    background-size: contain;/*cover*/
}

.grid-img-bg8{
    background: url(../image/pb8.png) no-repeat;
    background-position:center center;
    background-size: contain;/*cover*/
}
.grid-ttl{
    color:yellow;
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.2;
    width: 9em;
    margin-right: 5px;
    text-align: left;
}

@media (max-width:500px;){
    .grid-ttl{
        color:yellow;
        font-size: 1.6em;
        font-weight: bold;
        line-height: 1.2;
        width: 9em;
        margin-right: 3px;
        text-align: left;
    }
}

.grid1-1 {
display: flex;
justify-content: center;
align-items: center;
 grid-column: 1/2;
 grid-row: 2/3;
 background-color: #1E2082;
 color: #fff;
 border-left:1px solid #1E2082;
 border-right:1px solid #fff;
}
.grid1-2 {
    display: flex;
    justify-content: center;
    align-items: center;
 grid-column: 2/3;
 grid-row: 2/3;
 background-color: #1E2082;
 color: #fff;
 border-right:1px solid #fff;
}
.grid1-3 {
display: flex;
justify-content: center;
align-items: center;
 grid-column: 3/4;
 grid-row: 2/3;
 background-color: #1E2082;
 color: #fff;
 border-right:1px solid #1E2082;
}

.grid2-1 {
    display: flex;
    justify-content: center;
    align-items: center;
 grid-column: 1/2;
 grid-row: 3/4;
 background-color: #fff;
 color:#000;
 border-left:1px solid #1E2082;
 border-right:1px solid #1E2082;
}
.grid2-2 {
    display: flex;
    justify-content: center;
    align-items: center;
 grid-column: 2/3;
 grid-row: 3/4;
 background-color: #fff;
 color: #000;
 border-right:1px solid #1E2082;
}
.grid2-3 {
    display: flex;
    justify-content: center;
    align-items: center;
 grid-column: 3/4;
 grid-row: 3/4;
 background-color: #fff;
 color: #000;
 border-right:1px solid #1E2082;
}

.grid2-3 p{
    line-height: 1;
}

.grid3-1 {
    display: flex;
    justify-content: center;
    align-items: center;
 grid-column: 1/2;
 grid-row: 4/5;
 background-color: #1E2082;
 color:#fff;
 border-left:1px solid #1E2082;
 border-right:1px solid #fff;
 border-bottom:1px solid #1E2082;
}
.grid3-2 {
    display: flex;
    justify-content: center;
    align-items: center;
 grid-column: 2/4;
 grid-row: 4/5;
 background-color: #fff;
 color:#000;
 border-right:1px solid #1E2082;
 border-top:1px solid #1E2082;
 border-bottom:1px solid #1E2082;
}









/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
  top:10px;
  right: 10px;
  cursor: pointer;
    width: 50px;
    height:50px;
}

/*×に変化*/
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #666;
    width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
  top:15px;
}

.openbtn1 span:nth-of-type(2) {
  top:23px;
}

.openbtn1 span:nth-of-type(3) {
  top:31px;
}

.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}


#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
  top:0;
    right: -120%;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background:#999;
    /*動き*/
  transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
    text-align: center;
}

#g-nav li a{
  color: #333;
  text-decoration: none;
  padding:10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

.l-l-l{
    overflow: hidden;/*左右アニメーションで画面からはみ出る際に出る横スクロールバーを隠す*/
}



/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-delay: 0s;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*-100% 要素を左の枠外に移動*/
  opacity: 0;
  }

  to {
  transform: translateX(0);/*0 要素を元の位置に移動*/
  opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-delay: 0s;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*100% 要素を右の枠外に移動*/
  opacity: 0;
  }

  to {
  transform: translateX(0);/* 0 要素を元の位置に移動*/
  opacity: 1;
  }
}




.boatgo_outer{
    width:100%;
    max-width: 900px;
    overflow: hidden;
    display: flex;
    justify-content: center;/*flex-start;center;*/
    align-items: center;
}

.boatgo5{
    position: relative;
    width:900px;/*400px*/
    height:auto;/*200px;*/
      display: flex;
      justify-content: center;/*flex-start;center;*/
      align-items: center;
      /*text-align: center;
      margin: 0 auto;
      padding:20px 20px 20px 20px;
      margin-bottom: 15px;*/
}

.boatgo5-bg{
    background: url(../image/boat-go.png) no-repeat;
    background-position: center center;
    background-size: cover;/*cover*/
}

.boatgo-item-in{
    width:70%;
    top:0;
    left:15%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boatgo-item-inin{
    width:700px;
    height: 360px;
    position: relative;
    background-color: #ff00ff;
}

.boatgo-item1{
    position: absolute;
    top:0;
    left:35%;
}

.boatgo-item2{
    position: absolute;
    top:33%;
    left:10%;
}

.boatgo-item3{
    position: absolute;
    top:33%;
    left:60%;
}

@media screen and (max-width: 500px) {
    .boatgo5{
        width:100%;/*48% 155px;400px*/
        height:auto;
          display: flex;
          justify-content: flex-start;/*center;*/
          align-items: center;
          /*text-align: center;
          margin: 0 auto;*/
          padding:5px;
          margin-bottom: 3%;

    }
}


.s-point1{
    top:-30%;left:5%;
}
.s-point3{
    top:-30%;left:5%;
}
.s-point2{
    top:-30%;left:65%;
}
.s-point4{
    top:-30%;left:65%;
}


@media (max-width:500px){
    .s-point1{
        top:-25%;left:5%;
    }
    .s-point3{
        top:-25%;left:5%;
    }
    .s-point2{
        top:-25%;left:18%;
    }
    .s-point4{
        top:-25%;left:18%;
    }

    .sp-ml-50x{
        margin-left: -50px;
    }

    .sp-ml50x{
        margin-left: 50px;
    }
    .sp-ml70x{
        margin-left: 70px;
    }
    .sp-ml90x{
        margin-left: 90px;
    }
}


/*privacy rule.html用*/
.rule ul{
    margin-bottom: 2em;
    margin-left: 1em;
}

.rule ul li{
    list-style-type:circle;
    text-align: left;
}

.minchotai {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}




/*--------------------------------------------------*/
/* サイドメニュー関連-------------------------------------
--------------------------------------------------------*/
#menu-btn-check input[type="checkbox"]{
    display: none !important;
}

#menu-btn-check:checked ~ .menu-content {
	/*メニューを画面内へ*/
    /*left: 80%;left:1050px;*/
	left:calc(100% - 400px);
}

@media screen and (max-width: 768px) {
	#menu-btn-check:checked ~ .menu-content {
	    /*メニューを画面内へ*/
		/*left:calc(100% - 200px);*/
        left:calc(100% - 400px);
	}
}

/*
#menu-btn-check:checked ~ .menu-btn {
    border-radius: 30px;
}

#menu-btn-check:checked ~ .visible_sp span {
    border-radius: 30px;メニューオープン時はborderを真円にする
}*/

#menu-btn-check {
    display: none;
}

/*メニュー内コンテンツ*/
.menu-content {
	display: inline-block;
    width: 200px;/*100%*/
    height: calc(99% + 5px);/*auto;*/
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    padding-top: 20px;/*250px*/
    /*background-color: #fff;*/
    background-color: #1E2082;/*transparent;*/
    /*background: url(../image/lp/bg_sideclassic_sp.png);*/
    background-repeat: no-repeat;
    background-size:200px auto;
	background-position:top center;
    /*background: linear-gradient(to bottom right, #AAC6D5, #0A3A54);*/
    transition: all 0.5s;/*アニメーション設定*/
	overflow-y: auto;/*scroll*/
	/*line-height: 1.7;*/
}


#menu-btn-check:checked ~ .menu-content {
	/*メニューを画面内へ*/
    /*left: 80%;left:1050px;*/
	left:calc(100% - 200px);
}

@media screen and (max-width: 768px) {
	.menu-content {
		width: 200px;
		background-size:200px auto;
		padding-top: 10px;
	}
	#menu-btn-check:checked ~ .menu-content {
	    /*メニューを画面内へ*/
		left:calc(100% - 200px);
	}
}


/*メニューボタン*/
.menu-btn {
    position: fixed;
    top: 25px;/*5%*/
    left:93%;
    /*right: 25px;5%;/*25px;*/
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    z-index: 90;

	border: 2px solid transparent;/*#fff;#A07947;*/
    background-color:transparent;/*#fff;*/
	border-radius: 5px;
}

@media screen and (max-width: 768px) {
    .menu-btn{
        top:0.5%;/*top:10px;*/
        left:calc(85%);

        /*right:calc(1% + 85px); 8px;7%;right:10px;*/
        height: 50px;/*40px 60px;*/
        width: 50px;/*40px 60px;*/
        background-size: 50px 50px;/*60px 60px;*/
    }
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #fff;/*#A07947;*/
    position: absolute;

    transition-duration: 0.5s;
}

.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}


/*メニューオープン時はborderを真円にする*/
#menu-btn-check:checked ~ .menu-btn {
    /*border-radius: 30px;*/
}

/*
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
*/

/*メニューオープン時は真ん中の線を透明にする*/
#menu-btn-check:checked ~ .visible_sp span {
    background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .visible_sp span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .visible_sp span::after {
    top: 0;
    transform: rotate(-45deg);
}

/*サイドメニュー内ul li*/
.menu-content ul{
    font-size: 1.4em;
    line-height: 2.2;
    color:#122A88;
}
.menu-content ul li{

}

.lsideitem{
    font-size: 1.4em;
    line-height: 2.2;
    color:#fff;
}

.side-menu-foot{
    font-size: 1em;
    font-weight: bold;
    line-height: 2.2;
    color:#fff;
}

/*-------------------*/


.menu-content-item{
    color:#fff;
    font-size: 1.4em;
    line-height: 2.7;
}

.trans90{
     transform: rotateX(90deg);
}
.tatewidth{
    width:200px;
}

@media (max-width:500px){
    .tatewidth{
        width:250px;
    }
    .sp-w140px{
        width:140px;
    }
}