@charset "UTF-8";
html,body{
    /*font-size: 2.5vw;*/
    font-size: 16px;
}

body {
	/*スマホのスクロールをスムーズにするらしい*/
	-webkit-overflow-scrolling: touch;
}

body::before{/*
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;m
    background-image: url(../image/lbr_bk1.png);
    top: 0;
    left: 0;
    background-position: top center;
    z-index: -2;
    opacity: 0;
    transform: translateY(-1em);
    animation: first_scale  6s;
    animation-fill-mode: forwards;
    background-size: cover;
    */
}

.contents{
    width:100%;
}

@keyframes first_scale {
    0% {
      opacity: 0;
        }
    100% {
      opacity:1;
      transform: scale(1);
      transform: translateY(0);
      }
    }

@media screen and (max-width: 768px) and (min-width: 501px) {
    html,body{
    font-size: 14px;/*3.5vw*/
    }
}
@media screen and (max-width: 500px) {
    html,body{
    font-size: 3vw;/*3.5vw*/
    }
}

footer{
    width:100%;
    height:auto;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    /*background-color:#060542;*/
    color:#fff;
    /*max-width: 1800px;*/
}

@media screen and (max-width: 500px) {
    footer{

    }
}

/*遊明朝フォント*/
.yufont{
    font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','游明朝体+36ポかな','YuMincho +36p Kana',sans-serif;
    font-weight: 900;
}

.leftborder{
    border-left:1px solid #fff;
}
.rightborder{
    border-right:1px solid #fff;
}
.leftborder2{
    border-left:1px dotted #333;
}

@media screen and (max-width: 500px) {/*768px*/
    .leftborder2{
        border-left:0 dotted #333;
    }
}

.loginbtn {
    width:200px;
    background: url("../image/lbr_login_btnon.png") no-repeat;
    background-position: center;
    background-size: contain;
}

.top-video{
 /*position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;*/

 width: 100%;/*auto;*/
 height: auto;
 background: url('../image/movie.png') no-repeat;
 background-size: cover;
 z-index: -1 !important;
}

.video_text{
width:90%;
max-width: 900px;
height: auto;
 display:flex;
 justify-content:center;
 align-items: center;
 z-index: 1 !important;
}

@media screen and (max-width: 500px) {
    .video_text{
    width:31%;
    height: auto;
     display:flex;
     justify-content:center;
     align-items: center;
    }
}

@media only screen and (min-width: 501px) {
.top-bg {
	display:block;
	width:100%;
	height: 100%;
	background-image: url(../image/top-bg.png);/*固定する背景画像*/
	background-size:cover;/*背景画像のサイズを指定*/
	background-attachment: fixed;/*背景画像を固定したままにするかしないか*/
	text-align: center;
    z-index: -2 !important;
	}
}

@media only screen and (max-width: 500px) {
	.top-bg::before{
	  content: "";
	  background: url(../image/top-bg.png) no-repeat center center;
	  background-size: cover;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100vw;
	  height: 100vh;
	  z-index: -2 !important;
	  transform: translateZ(0);
	}
}

.regdit-bg{
    border-radius: 20px;
    background: rgb(168,131,53);
    background: linear-gradient(90deg, rgba(168,131,53,1) 0%, rgba(251,233,163,1) 50%, rgba(168,131,53,1) 100%);
}
.sec-mail{
background-color:#fff;
padding:35px 0;
}
@media (max-width:500px){
    .sec-mail{
    background-color:#fff;
    padding:35px 2%;
    }
}

.bluesea-bg {
  position: relative;
}
.bluesea-bg::after {
  content: "";
  width: 100vw;
  height: 100vh;
  background-image: url(../image/haikei1.jpg);
  background-size: cover;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -4 !important;
}


.azulbox-bg {
  position: relative;
}
.azulbox-bg::after {
  content: "";
  width: 100vw;
  height: 100vh;
  background-image: url(../image/head-mainback.png);
  background-size: cover;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -3 !important;
}

.boats3-bg {
	display:block;
	width:100%;
	height: 100%;/*100vh;*/
	background-image: url(../image/boats3-bg.png);/*固定する背景画像*/
	background-size:cover;/*背景画像のサイズを指定*/
	background-attachment: fixed;/*背景画像を固定したままにするかしないか*/
	text-align: center;
    z-index: -2 !important;
}

@media (max-width:500px){
    .boats3-bg {
    	display:block;
    	width:100%;
    	height: 100%;
    	background-image: url(../image/boats3-bg_sp.png);/*固定する背景画像*/
    	background-size:cover;/*背景画像のサイズを指定*/
    	background-attachment: fixed;/*背景画像を固定したままにするかしないか*/
    	text-align: center;
        z-index: -2 !important;
    }
}

.stars-bg {
	display:block;
	width:100%;
	height: 100%;
	background-image: url(../image/stars.png);/*固定する背景画像*/
	background-size:cover;/*背景画像のサイズを指定*/
	background-attachment: fixed;/*背景画像を固定したままにするかしないか*/
	text-align: center;
    z-index: -2 !important;
}

.top-regdit{
    background-color: #fff;
    padding:20px;
}

.orange-bg{
    border-radius: 20px;
    background-color: #F1C5B5;
}


.toroku{
width:100%;
height:15vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*text-align: center;
  margin: 0 auto;*/
}

/* 背景画像の読み込み */
.toroku-bg{
  background: url(../image/reditin-bg.png) no-repeat;
  background-position: center center;
  background-size: 100%;
}

.toroku-input{
    width:96%;
    line-height:3;
    margin-left: 7%;
    padding-left:15px;
    /*box-shadow:0px 0px 2px 3px rgba(0, 0, 0, 0.2)
                ,0px 0px 2px 3px rgba(0, 0, 0, 0.2) inset;*/
    /*box-shadow:0px 0px 3px 3px rgba(0, 0, 0, 0.2) inset;*/
    box-shadow: 0px 1px 3px 3px rgba(0, 0, 0, 0.3) inset;
     border:1px solid #9DAAB1;/*#888F95;*/
     background-color:#AFC3D3;
     color:#575859;
     border-radius: 5px;
}

.toroku-btn{
    border:1px solid #8B3A00;
    border-radius:10px;
    background-color:#1C9E30;
    color:#fff;
    font-size:2em;
    font-weight:bold;
    padding:4px 14px;
}


.toroku-btn:hover{
    opacity: 0.7;
}

@media screen and (max-width: 500px) {
    .toroku{
    width:100%;
    height:8vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /*text-align: center;
      margin: 0 auto;*/
    }

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

    .toroku-input{
        width:95%;
        line-height:1.9;
        margin-left: 7%;
        padding-left:15px;
        box-shadow:0px 0px 5px 3px rgba(0, 0, 0, 0.2)
                    ,0px 0px 5px 3px rgba(0, 0, 0, 0.2) inset;
         border:1px solid #000;
         background-color:#A7BBCD;
         color:#575859;
    }
    .toroku-btn{
        border:1px solid #8B3A00;
        border-radius:10px;
        background-color:#1C9E30;
        color:#fff;
        font-size:1.2em;
        font-weight:bold;
        padding:3px 10px;
    }
}

@media screen and (max-width: 768px) {/*500px*/
    .loginbtn {
        width:100px;
    }
}

.loginbtn a {
    display: inline-block;
}

.loginbtn a:hover {
	background-color: transparent; /* IE6対応 */
}

.loginbtn a:hover img {
    visibility: hidden;
}

.dp-none{display: none;}


.fixedfooter{
    width:100%;
    height: auto;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:#35A54F;
    position: fixed;
    bottom:0;
    z-index: 9;
}

.w8h9vw{
    width:500px;/*80%;*/
    height: 5em;/*auto;*/
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 500px) {
    .fixedfooter{
        width:100%;
        height: 16vw;
    }
    .w8h9vw{
        width:80%;
    }
}

img{
    width:100%;
	max-width: 100%;
	height: auto;
    align-self: flex-start;/*追加safari対策*/

}


#wrapper{
    width:100%;
    height: auto;
    overflow: hidden;
}

.containerflex{
    width:100%;
    height: auto;
    /*max-width: 1800px;*/
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (min-width: 501px) {
    .containerflex{
    /*max-width: 900px;*/
    }
}


.topboat{
    position:absolute;
    top:38%;/*20%*/
    left:0;/*-28%*/
    width:50%;/*100%;*/
    z-index:1 !important;
}

@media screen and (max-width: 500px) {
    .topboat{
        top:40%;/*25%;*/
        left:0;/*-20%;*/
    }
}

.topboat_end{
    position:absolute;
    top:20%;
    left:-28%;
    width:100%;/*100%;*/
    z-index:1 !important;
}

@media screen and (max-width: 500px) {
    .topboat_end{
        top:25%;
        left:-20%;
    }
}

.top{
    width:100%;
    max-width: 900px;
    height:auto;
    margin: 0 auto;
}
.top2{
    width:100%;
    max-width: 1200px;
    height:auto;
    margin: 0 auto;
}



@media screen and (min-width: 501px) {
    .fx_bk2{
        width:100%;
        height:auto;
        background: url("../image/lbr_bk2.png") no-repeat center center;
        background-size: cover;/*contain*/
        background-repeat: no-repeat;
    	background-attachment: fixed;
    }
}

@media screen and (max-width: 500px) {
	.fx_bk2::before {
	  content: "";
	  background: url(../image/lbr_bk2.png) no-repeat center center;
	  background-size: cover;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100vw;
	  height: 100vh;
	  z-index: -1;
	  transform: translateZ(0);
	}
}

@media screen and (min-width: 501px) {
    .fx_bk3{
        width:100%;
        height:auto;
        background: url("../image/lbr_bk3.png") no-repeat center center;
        background-size: cover;/*contain*/
        background-repeat: no-repeat;
    	background-attachment: fixed;
    }
}

@media screen and (max-width: 500px) {
	.fx_bk3::before {
	  content: "";
	  background: url(../image/lbr_bk3.png) no-repeat center center;
	  background-size: cover;
	  display: block;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100vw;
	  height: 100vh;
	  z-index: -1;
	  transform: translateZ(0);
	}
}

.skybk{
    width:100%;
    height:auto;
    background: url("../image/lbr_skybk.png") no-repeat center center;
    background-size: cover;/*contain*/
    background-repeat: no-repeat;
}

.deepseabk{
    width:100%;
    height:auto;
    background: url("../image/lbr_deepseabk.png") no-repeat center center;
    background-size: cover;/*contain*/
    background-repeat: no-repeat;
}

.bg_goldw{
    width:737px;
    height:109px;
    padding:11px 11px;
    background: url("../image/lbr_bg_goldw.png") no-repeat center center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width:850px) and (min-width: 501px) {
    .bg_goldw{
        width:95%;/*100%*/
        height:auto;
        background: url("../image/lbr_bg_goldw_tb.png") no-repeat center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}


@media screen and (max-width: 500px) {
    .bg_goldw{
        width:100%;
        height:auto;
        background: url("../image/lbr_bg_goldw_sp.png") no-repeat center center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

.bg_gwaku {

	width: 100%;
	border: 12px solid;
	border-image-source: url("../image/lbr_bg_gwaku.png");
	border-image-slice: 33%;
	border-image-repeat: repeat;
	border-image-width: 35px;
}

.beerbk{
    width:100%;
    height:auto;
    background: url("../image/lbr_beerbk.jpg") no-repeat center center;
    background-size: cover;/*contain*/
    background-repeat: no-repeat;
}

.sibukibk{
    width:100%;
    height:auto;
    background: url("../image/lbr_sibukibk.png") no-repeat center center;
    background-size: cover;/*contain*/
    background-repeat: no-repeat;
}



.tatetext {
	/*writing-mode: vertical-rl;*/
	text-orientation: upright;
    /*line-height: 0.8;*/
    color:#fff;/*#da3c41;*/
    font-size: 1.4em;
    font-weight: 900;
/*
 font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
*/
 font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','游明朝体+36ポかな','YuMincho +36p Kana',sans-serif;

 -webkit-font-feature-settings: 'pkna';
 font-feature-settings: 'pkna';
 /*font-size: 17px;*/

 line-height: 1.4;
 letter-spacing: 0.03em;
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
}

@media screen and (max-width: 800px) and (min-width:501px){
    .tatetext {
        font-size: 1.4em;
    	line-height: 1.4;
    }
}
@media screen and (max-width: 500px) {
    .tatetext {
        font-size: 1.4em;
    	line-height: 1.4;
    }
}

.oyaji{
    position:absolute;bottom:50px;
    right:-10%;
    width:60%;
    opacity: 0.7;
    z-index: 0 !important;
}
@media screen and (max-width: 500px) {
    .oyaji{
        position:absolute;bottom:-25px;
        right:-5%;
        width:80%;
    }
}


/*.pickup_top{
    display: block;
     -webkit-animation-name: pickup;
    animation-name: pickup;
     -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
     -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
     -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }*/

 .anime .pickup_top{
     display: block;
     animation-name: none;
     -webkit-animation-name: none;
 }

 .action .pickup_top{
     display: block;
      -webkit-animation-name: pickup;
     animation-name: pickup;
      -webkit-animation-duration: 1.5s;
     animation-duration: 1.5s;
      -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     -webkit-animation-delay: 0.1s;/*3s*/
     animation-delay: 0.1s;/*3s*/
      -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
   }

.pickup{
  display: block;
   -webkit-animation-name: pickup;
  animation-name: pickup;
   -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
   -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
   -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes pickup {
  0% {
    left: 15%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  50% {
    left: 15%;
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    left: 15%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}

.top-pick{
  display: block;
   -webkit-animation-name: top-pick;
  animation-name: top-pick;
   -webkit-animation-duration: 5s;
  animation-duration: 5s;
   -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
   -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes top-pick {
  0% {
    left: 15%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }
  25% {
    left: 15%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
  }
  49% {
    left: 15%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }
  50% {
    left: 53%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }
  75% {
    left: 53%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }
  100% {
    left: 53%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
  }
}






.top-fade1{
  display: block;
   -webkit-animation-name: top-fade1;
  animation-name: top-fade1;
   -webkit-animation-duration: 10s;
  animation-duration: 10s;
   -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
   -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes top-fade1 {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }

  50% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
  }
  100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }
}


.top-fade2{
  display: block;
   -webkit-animation-name: top-fade2;
  animation-name: top-fade2;
   -webkit-animation-duration: 10s;
  animation-duration: 10s;
   -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
   -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes top-fade2 {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
  }

  50% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }
  100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
  }
}




@media (max-width:500px){

.top-fade1-sp{
  display: block;
   -webkit-animation-name: top-fade1-sp;
  animation-name: top-fade1-sp;
   -webkit-animation-duration: 10s;
  animation-duration: 10s;
   -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
   -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes top-fade1-sp {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }

  50% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
  }
  100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }
}


.top-fade2-sp{
  display: block;
   -webkit-animation-name: top-fade2-sp;
  animation-name: top-fade2-sp;
   -webkit-animation-duration: 10s;
  animation-duration: 10s;
   -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
   -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes top-fade2-sp {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
  }

  50% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
  }
  100% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
  }
}


}







  @-webkit-keyframes pickup2 {
    0% {
        opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
      -webkit-transform: scale3d(0.7, 0.7, 0.7);
              transform: scale3d(0.7, 0.7, 0.7);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
                transform: scale3d(1.1, 1.1, 1.1);
      }
  }

  @keyframes pickup2 {
    0% {
        opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
      -webkit-transform: scale3d(0.7, 0.7, 0.7);
              transform: scale3d(0.7, 0.7, 0.7);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
                transform: scale3d(1.1, 1.1, 1.1);
      }
  }

  .pickup2{
    -webkit-animation-name: pickup2;
   animation-name: pickup2;
 }

.titlebk{
    position: relative;
    width:100%;
    height:auto;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    z-index: 2;
}

.titlebk0 {
    position: relative;
    width: 100%;
    height:auto;
     > img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
}

.titlebk0-in {
    display:flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width:100%;
    /*top: 55%;
    left: 0;*/
    margin-top: -12%;
    z-index: 9 !important;
    /*-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
    > div {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
}

@media screen and (max-width: 500px) {
    .titlebk0-in {
        margin-top: -22%;
    /*top:40%;
    left:0;*/
    }
}

.shadow {
  display     : inline-block;
  color       : #E51874;            /* 文字の色 */
  font-weight: bold;
  font-size   : 2.3em;/*4vw;*/               /* 文字のサイズ */
  text-shadow: 0.1em 0.1em #fff;
  /*text-shadow : 6px 3px #FFF;  文字の影 */
  z-index: 9 !important;
}

@media screen and (max-width: 500px) {
    .shadow  {
    font-size   : 6.5vw;
    text-shadow: 0.3vw 0.3vw #fff;
    }
}



.bg_kousi{
  width:100%;
  height:auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #FCF9E1;
  background-image: linear-gradient(#FEF7B0 2px, transparent 0),
                    linear-gradient(90deg, #FEF7B0 2px, transparent 0);
  background-size: 30px 30px;
}

.tab-wrap {
  width:85%;/*90%*/
  display: flex;
  flex-wrap: wrap;
  margin:30px 0;/*20px 0*/
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #012652;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  background: LightGray;
  font-weight: bold;
  font-size: 1.8em;
  white-space: nowrap;
  text-align: center;
  padding: 10px 1.5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  /*border-radius: 5px 5px 0 0;*/
  flex: 1;
}

@media screen and (max-width: 500px) {
    .tab-label {
      font-size: 2vw;
    }
}

.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: auto;/*0;*/
  display: flex;
  padding: 20px 1em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  overflow: hidden;
  opacity: 1;/*0;*/
}
/*.tab-switch:checked+.tab-label {
  background: #012652;
}*/

.tab-switch {
  background: #012652;
}

/*.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}*/
.tab-switch {
  /*display: none;*/
}

.bg_wash{
  width:100%;
  height:auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('../img/side_bgwash.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.blbox{
    height:200px;
    width:800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 500px) {
    .blbox{
        height:auto;
        width:90%;
    }
}



.list_check {
    font-size: 1.6em;/*2vw;*/
    padding: 0px;
    margin: 0px;
    list-style: none;
}

@media screen and (max-width: 500px) {
    .list_check {
        font-size: 5vw;
    }
}

.list_check > li {
    position: relative;
    padding: 0px 0px 0px 2.5em;/*0px 0px 0px 2em*/
    margin: 0px;
}
.list_check > li::before,
.list_check > li::after {
    position: absolute;
    top: 50%;
    height: 1em;
    content: "";
}
.list_check > li::before {
    left: 0px;
    transform: translateY(-50%);
    width: 1.2em;
    height: 1.2em;
    border: 2px solid #000;/*#7F8080;*/
    border-radius: 3px;
}
.list_check > li::after {
    left: 0.5em;/*0.5em*/
    transform: translateY(-75%) rotate(45deg);
    width: 0.6em;/*0.5em*/
    border-bottom: 5px solid #E60012;/*3px*/
    border-right: 5px solid #E60012;/*3px*/
}

.list_check > li + li {
    margin: 1em 0px 0px;
}

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

.u_ylw {
background: linear-gradient(transparent 70%, #FFF100 70%);
}

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

.ctw-marker-bold.ctw-marker-position {
    background-position: -100% 80%;/*-100% 10px*/
}
.ctw-marker-yellow {
background-image: -webkit-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(255,241,0,0.75) 50%);
background-image: -moz-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(255,241,0,0.75) 50%);
background-image: -o-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(255,241,0,0.75) 50%);
background-image: -ms-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(255,241,0,0.75) 50%);
background-image: linear-gradient(left, rgba(255,235,6,0) 50%, rgba(255,241,0,0.75) 50%);
}
/*#8B754A #D4BC70 #A16C2C*/


.iabg{
    text-align: center;
    color:#fff;
    font-size: 3.5vw;
    padding:8px 0;
    background-color: #012652;
    border: 1px solid #012652;
    border-radius: 5px 5px 0 0;
}

.yabg{
    text-align: center;
    color:#fff;
    font-size: 3.5vw;
    padding:8px 0;
    background-color: #B18247;
    border: 1px solid #B18247;
    /*border-radius: 5px 5px 0 0;*/
}

.yawaku{
    border: solid #B18247;
    border-size:0 1px 1px 1px;
}

.whtbox{
    text-align: center;
    font-size: 3.5vw;
    padding:8px 0;
    background-color: #fff;
    border: 1px solid #E3E3E6;
}
.grbg{
    background-color: #EEEFEF;
    border: 1px solid #E3E3E6;
    border-radius: 0 0 5px 5px;
}

.privacy{
    width:100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.toku{
    width:100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.honbun{
    width:85%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.7;
}

.ttl{
    font-size: 1.5em;
    font-weight: bold;
}

.ttl2{
    font-size: 1.3em;
}

/*---------------メニュー　装飾など------------*/
.idpoint{
    /*width:30%;*/
    padding:5px 15px;
    border: #132A88 1px solid;
    border-radius: 20px;
    background-color: #fff;
    color: #132A88;
}
@media screen and (max-width: 500px) {
    .idpoint{
    /*width:90%;*/
    }
}

.loginflm{
	font-size: 1em;
	line-height: 1;
	color:#fff;
	border-radius: 20px;
    background: linear-gradient(#A77DB6, #78529E);
	padding:7px 15px;
}
.loginflm:hover{
	background: linear-gradient(#78529E,#A77DB6);
}

.loginon{
	font-size: 1em;
	line-height: 1;
    background:url("../image/lp/btn0.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
	padding:7px 15px;
}
.loginon:hover{
	background:url("../image/lp/btn0_on.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
	padding:7px 15px;
}

.mtel{
	font-size: 1em;
    padding:5px 15px;
    line-height: 1.7;
    background-color: #1E2082;
    color:#fff;
}
@media screen and (max-width: 500px) {
    .mtel{
    }
}

.subject {
   text-align: left;  /* 文章を左寄せする(※) */
   float: left;     /* 左端に寄せて、後続を右側へ回り込ませる */
}
.point {
   text-align: right; /* 文章を右寄せする */
}

.flexmenu{
    max-width:1200px;
    border: solid 1px #6F7D94;
    background-color: #6F7D94;
    border-radius: 8px;
    padding:12px 18px;
    margin-top: 15px;
    color:#fff;
}

.flexmenu li{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-left:#fff 1px solid;
}

.flexmenu li:last-child  {
    border-right:#fff 1px solid;
}

.two-single{
    width:100%;
    max-width: 1200px;
}
@media screen and (max-width: 500px) {
    .two-single{
    width:90%;
    }
}

.btd{
    border-top:1px #666 dotted;
}
.btd p{
    line-height: 3;
}

input[type="text"]{
    width:8em;
}

input[type="checkbox"]{
    display: none;
}
/* チェックボックスの代わりを成すラベル */
input[type="checkbox"]+label{
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 25px;
    padding-right: 10px;
}
/* ラベルの左に表示させる正方形のボックス□ */
input[type="checkbox"]+label::before{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    left: 0;
    top: 50%;
    border: 1px solid;
    border-color:  #585753; /* 枠の色変更 お好きな色を */
    background-color: #FFF; /* 背景の色変更 お好きな色を */
}
/* チェックが入った時のレ点 */
input[type="checkbox"]:checked+label::after{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 9px;
    margin-top: -9px;
    top: 50%;
    left: 3px;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color:  #585753; /* チェックの色変更 お好きな色を */
}

.cp_iptxt {
	position: relative;
	/*width: 80%;*/
	/*margin: 40px 3%;*/
}
.cp_iptxt input[type=text] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	margin: 8px 0;
	padding: 0.3em;
	transition: 0.3s;
	border: 1px solid #1b2538;
	border-radius: 4px;
	outline: none;
}
.cp_iptxt input[type=text]:focus {
	border-color: #da3c41;
}
.cp_iptxt input[type=text] {
	padding-left: 40px;
}

.flexmenu div:hover {
    color:#fff;
    background:#5794C6;
}

.hmenu.active{
    color:#fff;
    background:#5794C6;
}

.btn-radius-solid {
    padding:5px 12px;
    font-size: 0.9em;
    font-weight: bold;
    color:#132A88;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  -webkit-box-shadow: inset 1px 1px 1px #fff;
  box-shadow: inset 1px 1px 1px #fff;
}

.btn-radius-solid:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
}

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

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


/*スマホ　PC　表示　非表示*/
.visible_pcwide{display:none;}
.visible_pc{display:block;}
.visible_sp{display: none !important;}

@media screen and (min-width: 1050px) {
    .visible_pcwide{
    	display: block !important;
    }
}

@media screen and (max-width: 500px) {
	.visible_pc{
		display: none !important;
	}
	.visible_sp{
		display: block !important;
	}
}

.l{text-align: left;}
.r{text-align: right;}
.c{text-align: center;}
.b{font-weight: bold;}
.red{color:#da3c41;}




.anime{
    opacity: 0;
    transition-duration:0.3s;
}

.action{
    opacity: 1;
    transform: scale(1)!important;
    transform: translateX(0)!important;
    transform: translateY(0)!important;
}

/*
.action {
  animation-name:anime-action;
  animation-delay: 0.5s;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes anime-action {
  from {
      opacity: 0;
      transform: scale(1)!important;
      transform: translateX(0)!important;
      transform: translateY(0)!important;
  }

  to {
      opacity: 1;
      transform: scale(1)!important;
      transform: translateX(0)!important;
      transform: translateY(0)!important;
  }
}
*/

.anime .yrote{
    animation-name: none;
}
.action .yrote{
  animation: rotate-anime 5s;
  animation-fill-mode: infinite;
  animation-delay : 0.1s;
  animation-timing-function:linear;
}
@keyframes rotate-anime {
    0% {
        -webkit-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
    12% {
        -webkit-transform:rotateY(45deg);
        transform:rotateY(45deg);
    }
    25% {
        -webkit-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    38% {
        -webkit-transform:rotateY(45deg);
        transform:rotateY(45deg);
    }
    50% {
        -webkit-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
    63% {
        -webkit-transform:rotateY(45deg);
        transform:rotateY(45deg);
    }
    75% {
        -webkit-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    83% {
        -webkit-transform:rotateY(45deg);
        transform:rotateY(45deg);
    }
    100% {
        -webkit-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
}

/*.pickup_top{
    display: block;
     -webkit-animation-name: pickup;
    animation-name: pickup;
     -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
     -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
     -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }*/

 .anime .pickup_top{
     display: block;
     animation-name: none;
     -webkit-animation-name: none;
 }

 .action .pickup_top{
     display: block;
      -webkit-animation-name: pickup;
     animation-name: pickup;
      -webkit-animation-duration: 1.5s;
     animation-duration: 1.5s;
      -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     -webkit-animation-delay: 0s;
     animation-delay: 0s;
      -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
   }

.pickup{
  display: block;
   -webkit-animation-name: pickup;
  animation-name: pickup;
   -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
   -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
   -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes pickup {
  0% {
    left: 15%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
  50% {
    left: 15%;
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    left: 15%;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}

  @-webkit-keyframes pickup2 {
    0% {
        opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
      -webkit-transform: scale3d(0.7, 0.7, 0.7);
              transform: scale3d(0.7, 0.7, 0.7);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
                transform: scale3d(1.1, 1.1, 1.1);
      }
  }

  @keyframes pickup2 {
    0% {
        opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
              transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
      -webkit-transform: scale3d(0.7, 0.7, 0.7);
              transform: scale3d(0.7, 0.7, 0.7);
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
                transform: scale3d(1.1, 1.1, 1.1);
      }
  }

  .pickup2{
    -webkit-animation-name: pickup2;
   animation-name: pickup2;
 }

 .anime .l-appaer{
     animation-name: none;
 }
 .action .l-appaer{
   animation: l-appaer 0.5s;
   animation-fill-mode: infinite;
   animation-delay : 0s;
   animation-timing-function:linear;
 }
 @keyframes l-appaer {
     from {
     transform: translateX(100%);/*要素を右の枠外に移動*/
       opacity: 0;
     }

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

 .anime .l-slide{
     animation-name: none;
 }
 .action .l-slide{
   animation: l-slide 0.5s;
   animation-fill-mode: infinite;
   animation-delay : 0s;
   animation-timing-function:linear;
 }
 @keyframes l-slide {
     0% {
       opacity: 0;
       -webkit-transform: translate3d(-10%, 0, 0);
       transform: translate3d(-10%, 0, 0);
     }

     50% {
       opacity: .5;
       -webkit-transform: translate3d(-5%, 0, 0);
       transform: translate3d(-5%, 0, 0);
     }

     to {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
     }
   }

   .anime .r-slide{
       animation-name: none;
   }
   .action .r-slide{
     animation: r-slide 0.5s;
     animation-fill-mode: infinite;
     animation-delay : 0s;
     animation-timing-function:linear;
   }
   @keyframes r-slide {
       0% {
         opacity: 0;
         -webkit-transform: translate3d(10%, 0, 0);
         transform: translate3d(10%, 0, 0);
       }

       50% {
         opacity: .5;
         -webkit-transform: translate3d(5%, 0, 0);
         transform: translate3d(5%, 0, 0);
       }

       to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
       }
     }


   .anime .zoom1{
       animation-name: none;
   }
   .action .zoom1{
     animation: zoom1 0.5s;
     animation-fill-mode: forwards;
     animation-delay : 0s;
     animation-timing-function:linear;
   }

   @-webkit-keyframes zoom1{
     from {
       opacity: 0;
       -webkit-transform: scale3d(0.7, 0.7, 0.7);
       transform: scale3d(0.7, 0.7, 0.7);
     }

     to{
       opacity: 1;
       -webkit-transform: scale3d(1, 1, 1);
       transform: scale3d(1, 1, 1);
     }
   }

   @keyframes zoom1 {
     from {
       opacity: 0;
       -webkit-transform: scale3d(0.7, 0.7, 0.7);
       transform: scale3d(0.7, 0.7, 0.7);
     }

    to{
       opacity: 1;
       -webkit-transform: scale3d(1, 1, 1);
       transform: scale3d(1, 1, 1);
     }
   }

.top-1{
    opacity: 0;
    animation: top-1 0.2s;
    animation-fill-mode: forwards;
    animation-delay : 3s;
    animation-timing-function:linear;
}

.top-1t{
    z-index: 0 !important;
    animation: top-1t 0.2s;
    animation-fill-mode: forwards;
    animation-delay : 3s;
    animation-timing-function:linear;
}

@keyframes top-1 {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-10%,30%, 0);
      transform: translate3d(-10%,30%, 0);
    }

    50% {
      opacity: .5;
      -webkit-transform: translate3d(-5%,15%, 0);
      transform: translate3d(-5%,15%, 0);
    }

    to {
        opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

@keyframes top-1t {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1);
      transform: scale3d(0.1, 0.1, 0.1);
    }

    50% {
      opacity: .5;
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.top-2{
    opacity: 0;
    animation: top-2 0.2s;
    animation-fill-mode: forwards;
    animation-delay : 3.4s;
    animation-timing-function:linear;
}

.top-2t{
    z-index: 0 !important;
    animation: top-1t 0.2s;
    animation-fill-mode: forwards;
    animation-delay : 3.4s;
    animation-timing-function:linear;
}

@keyframes top-2 {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(10%,-30%, 0);
      transform: translate3d(10%,-30%, 0);
    }

    50% {
      opacity: .5;
      -webkit-transform: translate3d(5%,-15%, 0);
      transform: translate3d(5%,-15%, 0);
    }

    to {
        opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

.top-3{
    opacity: 0;
    animation: top-3 0.2s;
    animation-fill-mode: forwards;
    animation-delay : 3.6s;
    animation-timing-function:linear;
}

.top-3t{
    z-index: 0 !important;
    animation: top-1t 0.2s;
    animation-fill-mode: forwards;
    animation-delay : 3.6s;
    animation-timing-function:linear;
}

@keyframes top-3 {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-10%,30%, 0);
      transform: translate3d(-10%,30%, 0);
    }

    50% {
      opacity: .5;
      -webkit-transform: translate3d(-5%,15%, 0);
      transform: translate3d(-5%,15%, 0);
    }

    to {
        opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

.top-4{
    opacity: 0;
    animation: top-4 0.2s;
    animation-fill-mode: forwards;
    animation-delay : 3.8s;
    animation-timing-function:linear;
}

.top-4t{
    z-index: 0 !important;
    animation: top-1t 0.2s;
    animation-fill-mode: forwards;
    animation-delay : 3.8s;
    animation-timing-function:linear;
}

@keyframes top-4 {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0,30%, 0);
      transform: translate3d(0,30%, 0);
    }

    50% {
      opacity: .5;
      -webkit-transform: translate3d(0,15%, 0);
      transform: translate3d(0,15%, 0);
    }

    to {
        opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

.top-5{
    opacity: 0;
    animation: top-5 1.5s;
    animation-fill-mode: forwards;
    animation-delay : 4.3s;
    /*animation-timing-function:linear;*/
    animation-timing-function: steps(18, end);
}

.top-5t{
    z-index: 0 !important;
    animation: top-5t 1.5s;
    animation-fill-mode: forwards;
    animation-delay : 4.3s;
    animation-timing-function:linear;
}

.top-6{
    opacity: 0;
    animation: top-5 1.5s;
    animation-fill-mode: forwards;
    animation-delay : 4.4s;
    /*animation-timing-function:linear;*/
    animation-timing-function: steps(18, end);
}

.top-6t{
    z-index: 0 !important;
    animation: top-5t 1.5s;
    animation-fill-mode: forwards;
    animation-delay : 4.4s;
    animation-timing-function:linear;
}

@keyframes top-5t {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(14, 14, 14);
      transform: scale3d(14, 14, 14);
    }

    50% {
      opacity: .5;
      -webkit-transform: scale3d(7, 7, 7);
      transform: scale3d(7, 7, 7);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes top-5 {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0,-100%, 0);
      transform: translate3d(0,-100%, 0);
    }

    50% {
      opacity: .5;
      -webkit-transform: translate3d(0,-50%, 0);
      transform: translate3d(0,-50%, 0);
    }

    to {
        opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}




.anime .top-1e{
    animation-name: none;
}
.action .top-1e{
  animation: top-1e 0.2s;
  animation-fill-mode: both;
  animation-delay : 0s;
  animation-timing-function:linear;
}

.anime .top-1te{
    animation-name: none;
}
.action .top-1te{
    z-index: 0 !important;
    animation: top-1te 0.2s;
    animation-fill-mode: both;
    animation-delay : 0s;
    animation-timing-function:linear;
}


@keyframes top-1e {
    0% {
      -webkit-transform: translate3d(-10%,30%, 0);
      transform: translate3d(-10%,30%, 0);
    }

    50% {
      -webkit-transform: translate3d(-5%,15%, 0);
      transform: translate3d(-5%,15%, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

@keyframes top-1te {
    0% {
      -webkit-transform: scale3d(0, 0, 0);
      transform: scale3d(0, 0, 0);
    }

    50% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.anime .top-2e{
    animation-name: none;
}
.action .top-2e{
    animation: top-2e 0.2s;
    animation-fill-mode: both;
    animation-delay : .4s;
    animation-timing-function:linear;
}
.anime .top-2te{
    animation-name: none;
}
.action .top-2te{
    z-index: 0 !important;
    animation: top-1te 0.2s;
    animation-fill-mode: both;
    animation-delay : .4s;
    animation-timing-function:linear;
}

@keyframes top-2e {
    0% {
      -webkit-transform: translate3d(10%,-30%, 0);
      transform: translate3d(10%,-30%, 0);
    }

    50% {
      -webkit-transform: translate3d(5%,-15%, 0);
      transform: translate3d(5%,-15%, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}


.anime .top-3e{
    animation-name: none;
}
.action .top-3e{
    animation: top-3e 0.2s;
    animation-fill-mode: both;
    animation-delay : .6s;
    animation-timing-function:linear;
}
.anime .top-3te{
    animation-name: none;
}
.action .top-3te{
    z-index: 0 !important;
    animation: top-1te 0.2s;
    animation-fill-mode: both;
    animation-delay : .6s;
    animation-timing-function:linear;
}

@keyframes top-3e {
    0% {
      -webkit-transform: translate3d(-10%,30%, 0);
      transform: translate3d(-10%,30%, 0);
    }

    50% {
      -webkit-transform: translate3d(-5%,15%, 0);
      transform: translate3d(-5%,15%, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

.anime .top-4e{
    animation-name: none;
}
.action .top-4e{
    animation: top-4e 0.2s;
    animation-fill-mode: both;
    animation-delay : .8s;
    animation-timing-function:linear;
}

.anime .top-4te{
    animation-name: none;
}
.action .top-4te{
    z-index: 0 !important;
    animation: top-1te 0.2s;
    animation-fill-mode: both;
    animation-delay : .8s;
    animation-timing-function:linear;
}

@keyframes top-4e {
    0% {
      -webkit-transform: translate3d(0,30%, 0);
      transform: translate3d(0,30%, 0);
    }

    50% {
      -webkit-transform: translate3d(0,15%, 0);
      transform: translate3d(0,15%, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

.anime .top-5e{
    animation-name: none;
}
.action .top-5e{
    animation: top-5e 1s;
    animation-fill-mode: both;
    animation-delay : 1.1s;
    /*animation-timing-function:linear;*/
    animation-timing-function: steps(18, end);
}
.anime .top-5te{
    animation-name: none;
}
.action .top-5te{
    z-index: 0 !important;
    animation: top-5te 1s;
    animation-fill-mode: both;
    animation-delay : 1.1s;
    animation-timing-function:linear;
}

.anime .top-6e{
    animation-name: none;
}
.action.top-6e{
    animation: top-5e 1s;
    animation-fill-mode: both;
    animation-delay : 1.2s;
    /*animation-timing-function:linear;*/
    animation-timing-function: steps(18, end);
}
.anime .top-6te{
    animation-name: none;
}
.action.top-6te{
    z-index: 0 !important;
    animation: top-5te 1s;
    animation-fill-mode: both;
    animation-delay : 1.2s;
    animation-timing-function:linear;
}

@keyframes top-5te {
    0% {
      -webkit-transform: scale3d(14, 14, 14);
      transform: scale3d(14, 14, 14);
    }

    50% {
      -webkit-transform: scale3d(7, 7, 7);
      transform: scale3d(7, 7, 7);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes top-5e {
    0% {
      -webkit-transform: translate3d(0,-100%, 0);
      transform: translate3d(0,-100%, 0);
    }

    50% {
      -webkit-transform: translate3d(0,-50%, 0);
      transform: translate3d(0,-50%, 0);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}






   .anime .up-slide{
       animation-name: none;
   }
   .action .up-slide{
     animation: up-slide 0.5s;
     animation-fill-mode: infinite;
     animation-delay : 0s;
 animation-timing-function:linear;
   }
   @keyframes up-slide {
       0% {
         opacity: 0;
         -webkit-transform: translate3d(0,30%, 0);
         transform: translate3d(0,30%, 0);
       }

       50% {
         opacity: .5;
         -webkit-transform: translate3d(0,15%, 0);
         transform: translate3d(0,15%, 0);
       }

       to {
           opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
       }
     }




.head-w{
    width:80px;
    position:fixed;
    top:7%;
    right:7%;
    z-index:1 !important;
}

@media screen and (max-width:500px){
    .head-w{
        width:12%;
        position:fixed;
        top:4%;
        right:4%;
        z-index:1 !important;
    }
}

.maintop{
    position:relative;
    width: 600px;/*auto;追加*/
    height:600px;/* auto;*/
    background-color:#000;
    /*z-index:-2 !important;*/
}

.movie-set{
    position:relative;
    width:600px;/*auto;*/
    height:600px;/*900px;*/
    z-index: 0 !important;/*-2*/
}

.mt-act{
    margin-top: -10px;
}

@media screen and (min-width:501px) and (max-width:900px){
    .maintop{
        width: auto;
        height:100%;
    }
    .movie-set{
        width:100%;
        height:100%
    }
    .mt-act{
        margin-top: 6%;
    }
}

@media screen and (max-width:500px){
    .maintop{
        position:relative;
        width:auto;
        height:auto;
        background-color:#000;
        /*z-index:-2 !important;*/
    }
    .movie-set{
        position:relative;
        width:auto;/*100vw;100% auto;*/
        height:600px;/*100vw;100%;*/
        z-index: 0 !important;/*-2*/
    }
    .mt-act{
        margin-top: 30%;
    }
}

.redboat-p{
    /*position:absolute;top:20%;left:55%;z-index:-1 !important;*/
    position:absolute;top:20%;left:55%;z-index:-1 !important;
}
.boattwo-p{
    /*position:absolute;top:32%;left:-13%;z-index:-1 !important;*/
    position:absolute;top:19%;left:0;z-index:-1 !important;
}

@media screen and (min-width:501px) and (max-width:900px){
    .redboat-p{
        /*position:absolute;top:20%;left:40%;z-index:-1 !important;*/
        position:absolute;top:20%;left:55%;z-index:-1 !important;
    }
    .boattwo-p{
        /*position:absolute;top:20%;left:-28%;z-index:-1 !important;*/
        position:absolute;top:19%;left:0;z-index:-1 !important;
    }
}

@media screen and (max-width:500px){
    .redboat-p{
        /*position:absolute;top:30%;left:40%;z-index:-1 !important;*/
        position:absolute;top:25%;left:50%;z-index:-1 !important;
    }
    .boattwo-p{
        /*position:absolute;top:21%;left:-35%;z-index:-1 !important;*/
        position:absolute;top:21%;left:-20%;z-index:-1 !important;
    }
}

.fred{
    color:#E60012;
    font-weight: 900;
}

.sec3{
    margin: 0 auto;
    padding:50px 40px 20px 40px;
}
.sec3_p{
    text-align: left;font-size:1.8em;font-weight:bold;line-height:3.2;
}

.sec3_p2{
    text-align:left;font-size:1.4em;line-height:2.1;
}
.sec3_p3{
    color:#444;font-weight:900;font-size:3.5em;
}

@media screen and (max-width:500px){
    .sec3{
        margin: 0 auto;
        padding:30px 15px 10px 15px;
    }
    .sec3_p{
        text-align: left;font-size:1.4em;font-weight:bold;line-height:1.4;
    }
    .sec3_p2{
        text-align:left;font-size:1em;line-height:1.4;
    }
    .sec3_p3{
        color:#444;
        font-weight:900;
        font-size:2.7em;
        text-align:center;
    }
}

.sec4{
    margin: 0 auto;
    padding:50px 40px 20px 40px;
}

.sec4_p{
    color:#fff;font-weight:bold;font-size:1.6em;line-height:3;
}


.sec4waku{
    width:510px;/*425px;*/
    height:204px;/*169px;*/
      display: flex;
      justify-content: center;
      align-items: center;
      /*text-align: center;
      margin: 0 auto;*/
}

.sec4waku-bg{
    background: url(../image/sec4waku.png) no-repeat;
    background-position: center center;
    background-size: contain;/*cover*/
}
.sec4_p2{
    text-align: left;line-height: 1.4;font-size:1.6em;font-weight:bold;
}

@media screen and (max-width:500px){
    .sec4{
        margin: 0 auto;
        padding:30px 15px 10px 15px;
    }
    .sec4_p{
        color:#fff;font-weight:bold;font-size:1.3em;line-height:1.4;text-align: left;
    }
    .sec4waku{
        width:320px;height:127px;
          display: flex;
          justify-content: center;
          align-items: center;
          /*text-align: center;
          margin: 0 auto;*/
    }
    .sec4_p2{
        text-align: left;line-height: 1.3;font-size:1.3em;font-weight:bold;
    }
}

.chat-box1{
    display:block;
    position: relative;
	border-radius: 2em;
    /*width: 70%;100%; 250px;*/
    /*height:auto;250px;*/
    padding:2em;

    background: linear-gradient(to top, #6BB548, #BCDBA9);
    border: 3px solid #6BB548;
}
.chat-box1:after {
	content: '';
	position: absolute;
	right: 0;
    bottom: 10%;
	width: 0;
	height: 0;
	border: 24px solid transparent;
	border-left-color: #6BB548;
	border-right: 0;
	border-bottom: 0;
	margin-top: -12px;
	margin-right: -24px;
}

.chat-box2{
    display:block;
    position: relative;
	border-radius: 2em;

    /*width: 70%;/*100%;250px;*/
    /*height:auto;250px;*/
    padding:2em;

    background: linear-gradient(to top, #6BB548, #BCDBA9);
    border: 3px solid #6BB548;
}
.chat-box2:after {
	content: '';
	position: absolute;
	left: 0;
	/*top: 50%;*/
    bottom: 10%;
	width: 0;
	height: 0;
	border: 24px solid transparent;
	border-right-color: #6BB548;
	border-left: 0;
	border-bottom: 0;
	margin-top: -12px;
	margin-left: -24px;
}

.human{
    width:100%;/*200px; 425px;*/
    height:100%;/*200px;169px;*/
      display: flex;
      justify-content: center;
      align-items: flex-end;
      /*text-align: center;
      margin: 0 auto;*/
}

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

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

.boatlp{
    position:absolute;
    top:20%;
    left:0;/*calc(40% - 200px);*/
    z-index:-1 !important;
}
.boatrp{
    position:absolute;
    top:70%;
    left:calc(55% + 200px);
    z-index:-1 !important;
}

@media only screen and (max-width: 500px) {
    .boatlp{
        position:absolute;
        top:14%;
        left:-14%;
        z-index:-1 !important;
    }
    .boatrp{
        position:absolute;
        top:75%;
        left:calc(57%);
        z-index:-1 !important;
    }
}

.scroll_left{
    animation: scroll_left 1s forwards;
}
.anime .scroll_left1{
    animation-name: none;
}
.action .scroll_left1{
    animation: scroll_left 1s forwards;
}
@keyframes scroll_left {
  0% {
  transform: translateX(-80%);/*0px*/
  }
  100% {
  transform: translateX(0%);/*-80%*/
  }
}

@media screen and (max-width: 500px) {
    @keyframes scroll_left {
      0% {
      transform: translateX(-50%);/*0px*/
      }
      100% {
      transform: translateX(0%);/*-30%*/
      }
    }
}

.scroll_right{
    animation: scroll_right 1s forwards;
}
.anime .scroll_right1{
    animation-name: none;
}
.action .scroll_right1{
    animation: scroll_right 1s forwards;
}
@keyframes scroll_right {
  0% {
  transform: translateX(80%);/*0px*/
  }
  100% {
  transform: translateX(0%);/*80%*/
  }
}

@media screen and (max-width: 500px) {
    @keyframes scroll_right {
      0% {
      transform: translateX(50%);/*0px*/
      }
      100% {
      transform: translateX(0%);/*30%*/
      }
    }
}

.paf-mato{
    width:100%;
    /*height: 100%;*/
    /*display: flex;
    flex-wrap:wrap;*/
            /*align-content:space-around;*/
    /*justify-content:space-around; space-evenly;space-around;space-between;*/
}
.paf-mato-wrap{
    width:100%;
    height: 100%;
    display: flex;
    flex-wrap:wrap;
    align-content:space-around;
    justify-content:space-around; /*space-evenly;space-around;space-between;*/
}

.mato{
    width:345px;/*400px*/
    height:200px;/*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;
}

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

@media screen and (max-width: 500px) {
    .mato{
        width:48%;/*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%;

    }

    .mato_s{
        width:210px;/*250px 48% 155px;400px*/
        height:120px;/*140px*/
          display: flex;
          justify-content: flex-start;/*center;*/
          align-items: center;
          /*text-align: center;
          margin: 0 auto;*/
          padding:5px;
          margin-bottom: 3%;

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

.jiss-date {
    width: 100%;/*9em 87px*/;
    display: block;
    /*margin-bottom: 8px;*/
    margin-top: 10px;
    margin-left: 0;/*20px;*/
    font-size: 1.1em;
    font-weight: bold;
    padding:0;/*0 10px;*/
    /*border: 1px solid #000;
    border-radius: 14px;*/
}

@media screen and (max-width: 500px) {
    .jiss-date {
        width: 100%;/*9em 87px*/;
        display: block;
        /*margin-bottom: 8px;*/
        margin-top: 5px;
        margin-left: 0;/*20px;*/
        font-size: 0.9em;
        font-weight: bold;
        padding:0;/*0 10px;*/
        /*border: 1px solid #000;
        border-radius: 14px;*/
    }
}

.jiss-round {
  font-weight: bold;
  background: #000;
  color: #fff;
  padding: 5px;
  margin-left: 5px;
  vertical-align: middle;
}

.jiss-arrow {
  margin: 0 7px;
  vertical-align: middle;
}

.sec7{
    margin: 0 auto;
    padding:40px 40px 30px 40px;
}

.sec7-top{
    position:absolute;
    top:6%;
    left:29%;
}

@media screen and (max-width: 500px) {
    .sec7{
        margin: 0 auto;
        padding:40px 2% 30px 2%;
    }
    .sec7-top{
        position:absolute;
        top:10%;
        left:18%;
    }
}

.leftborder{
    border-left:1px solid #fff;
}
.rightborder{
    border-right:1px solid #fff;
}

@media screen and (max-width:500px){
    .sp-visible_no{
         display: none;
     }
     .sp-flx_c{
         display: flex;
         flex-direction: column;
     }
}




/*会員ページ用*/
.head-member{
    position: fixed;
    z-index: 2 !important;
    top:0;
    left:0;
    right:0;
    width:100%;
    height: auto;
    padding:16px 0;
    background-color: rgba(48,95,164,.8);
}
@media screen and (max-width:768px){

}
.head-member a:hover{
        opacity: 0.7;
}
.topmenutxt{
    color:#fff;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    margin: 5px 5px 0 5px;
}
.bd-r{
    padding-right: 4%;
    border-right: 1px #fff solid;
}
@media (max-width:900px) and (min-width:769px){
    .bd-r{
        padding-right: 3%;
        border-right: 1px #fff solid;
    }
}
@media screen and (max-width:768px){
    .bd-r{
        padding-right: 1%;
        border-right: 1px #fff solid;
    }
}

@media screen and (max-width:500px){
    .topmn{
      width:60px;
        height: 65px;
    }
}

.mv-nav {
  background-color: #000;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: space-between;
  padding: 10px 10px;
  width: 100%;/*900px*/
  margin: auto;
  margin-top:60px;
}

.mv-nav_list {
  color: #FFF100;
}

@media screen and (max-width:500px){
    .mv-nav {
        margin-top:97px;
    }

}

/* --- BOXの定義 -------------------------------------------------*/
.box {
 position      : relative;            /* タイトル用に親要素定義  */
 box-sizing    : border-box;          /* 罫線・余白も含む大きさ  */
 margin        : 21px auto 0 auto;    /* BOXの位置               */
 width:100%;
 /*max-width     : 500px;              BOXの最大横幅           */
 background    : translate;                /* BOXの背景色             */
 padding       : 36px 10px 25px 10px; /* BOX内の余白             */
 border-bottom        : 1px solid #000000;   /* BOXの枠線               */
 border-left        : 1px solid #000000;   /* BOXの枠線               */
 border-right        : 1px solid #000000;   /* BOXの枠線               */
}

/* --- タイトル部分の定義 ----------------------------------------*/
.box::before {
 position      : absolute;          /* 親からの相対位置の定義  */
 display       : inline-block;      /* インラインボックス定義  */
 box-sizing    : border-box;        /* 罫線・余白も含む大きさ  */
 line-height   : 1;                 /* 1行の高さを初期化       */
 background    : translate;           /* タイトル背景色          */
 color         : #000000;           /* タイトルの文字色        */
 content       : attr(title);       /* タイトルに[title]を表示 */
 font-weight   : bold;              /* タイトルは太字          */
 padding       : 12px 30px;          /* タイトル内の余白        */
 top           : -22px;             /* タイトル上位置はマイナス*/
 left          : 32%;              /* タイトル右位置は1文字分 */
 font-size     : 20px;              /* タイトルの文字サイズ    */
}

.l-line{
    position:absolute;
    top:0;
    left:0;
    width:31%;
    border-bottom:1px solid #000;
}
.r-line{
    position:absolute;
    top:0;
    left:69%;/*31+38*/
    width:31%;
    border-bottom:1px solid #000;
}

@media (max-width:500px){
    .box::before {
     top           : -22px;             /* タイトル上位置はマイナス*/
     left          : 22%;              /* タイトル右位置は1文字分 */
     font-size     : 20px;              /* タイトルの文字サイズ    */
    }

    .l-line{
        position:absolute;
        top:0;
        left:0;
        width:31%;
        border-bottom:1px solid #000;
    }
    .r-line{
        position:absolute;
        top:0;
        left:69%;/*31+38*/
        width:31%;
        border-bottom:1px solid #000;
    }
}

.id-pass{
    width:48%;
    min-width: 6em;
    color:#1AA65B;
    font-size:0.9e;
    background-color: #fff;
    border:1px solid #1AA65B;
    border-radius: 20px;
    padding:8px 15px;
}
.id-text{
    text-align: left;
}
.value{
    text-align: right;
    margin-left: 1.5em;
    /*margin-right: .5em;*/
}

.tel-text{
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.7;
}

.psc-item{
    margin-left: 10px;
    margin-right:10px;
}

.w-planall{
    width:500px;
}


.icon-check{
    width:40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8087C1;
    border-radius:50%;
    margin:10px 1px 10px 5px;
    padding:17px 5px 10px 20px;
}

@media (max-width:1000px) and (min-width:501){
    .w-planall{
        width:400px;
    }
}

@media (max-width:500px){
    .w-planall{
        width:450px;
    }
    .icon-check{
        width:35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #8087C1;
        border-radius: 50%;
        margin:10px 1px 10px 5px;
        padding:17px 5px 10px 20px;
    }
}


.btn-style::before,
.btn-style::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.btn-style,
.btn-style::before,
.btn-style::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.btn-style{
    text-align:center;
    position: relative;
    width:100%;
    border:solid 4px #FFF;
    border-radius:1.5em;
    color:#000;
    background-color:#fff;
    padding:3px 7px;
    font-size:0.8em;
    font-weight:bold;
    line-height:1;
    box-shadow: 0 0 0 3px #3A87C8, 0 0 0 8px #fff;
    box-sizing: border-box;
}

.btn-s-large{
    /*padding:7px 15px;
    width:300px;
    font-size:1.4em;
    line-height:1.7;*/

        padding:5px 10px;
        width:230px;
        font-size:1em;
        line-height:1.4;

}

.btn-s-mid{
    padding:7px 15px;
    width:250px;
    font-size:1.4em;
    line-height:1.7;
}

/*会員ページ　courseone1.html*/
@media screen and (max-width: 768px) and (min-width:501px) {
    .btn-s-large{
        padding:5px 10px;
        width:230px;
        font-size:1em;
        line-height:1.4;
    }
}

@media screen and (max-width: 500px){
    .btn-s-large{
        padding:5px 10px;
        width:70%;
        font-size:1em;
        line-height:1.4;
    }
}

.btn-style:hover{
    border:solid 4px #3A87C8;
    color:#fff;
    background-color:#3A87C8;
    box-shadow: 0 0 0 3px #fff, 0 0 0 8px #3A87C8;
    opacity: 0.8;
}

.type_b{

    border:solid 4px #C0C0C0;
    background-color:#C0C0C0;
    box-shadow: 0 0 0 3px #285e8c, 0 0 0 8px #C0C0C0;
    pointer-events: none;
}

.type_c{

    border:solid 4px #87cefa;
    color:#fff;
    background-color:#87cefa;
    box-shadow: 0 0 0 3px #fff, 0 0 0 8px #87cefa;
    opacity: 0.8;
}

.maillist{
    width:600px;
    background:#fff;
    color:#000;
}

.maillist100{
    width:100%;
    background:#fff;
    color:#000;
}
.list-item{
    height:3.5em;
    padding-right: 10px;
}

.maillist .list-item{
	background: #eee;
}
.maillist .list-item:nth-child(odd) {
	background: #fff;
}

@media (max-width:500px){
    .maillist{
        width:100%;
        padding-left: 1%;
        padding-right: 1%;
    }
    .list-item{
        width:100%;
        height:5.5em;
        padding-right: 5px;
    }
}


.m-hover:hover{
    opacity: 0.8;
}

.numbering{
    width:1.7em;
    height: 1.7em;
    color:#000;
    font-size: 1.7em;
    line-height: 1.7;
    font-weight:bold;
    background:#fff;
    transition: 0.8s;
    -webkit-transition: 0.8s;
	-moz-transition: 0.8s;
}

.numbering:hover{
    color:#fff;
    font-weight:bold;
    background:#000;
}


/*--会員ページ course.html--*/
.date-size{
    width:150px;/*200px*/
    text-align: center;
}

.mess-size{
    width:400px;/*450px*/
}

.mess-text{
width:450px;
padding:0 20px;
}

.mail-text{
  font-size: 0.8em;
  text-align: left;
  font-weight:bold;
  width:28em;
  text-overflow: ellipsis;
}

@media (max-width:500px){
    .date-size{
        width:100%;
        text-align: left;
    }

    .mess-size{
        /*width:100%;*/
      width:15em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

      .mess-text{
        /*width:100%;*/
        padding:0;
      width:15em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .sp-ml0p{
        margin-left: 0;
    }
    .mail-text{
      width:15em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
}

.plangr-size{
    width:158px;/*183px;*/
    height: 315px;/* 370px;*/
}
.course-bg{
    width:325px;/*300px*/
    height:315px/* 370px;*/
}

@media (max-width:500px){
    .plangr-size{
        width:128px;/*123px*/
        height: 255px;
    }
    .course-bg{
        width:230px;
        height: 255px;
    }
}

/*会員ページ privacy.html*/
.ul-style-on{
    list-style-type: disc;
}
/*会員ページ pointadd.html*/
@media (max-width:500px){
	.ul-style-none {
		list-style-type: none;
		padding-left: 0;
	}

	.sp-visible_no{
	    display: none;
	}
}

/*購入ボタン*/
.balloon1 {
  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: #181D62;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #181D62;
}

.balloon1 p {
  margin: 0;
  padding: 0;
  font-size:1.4em;
  font-weight: bold;
}


/*アイテム購入ボタン-------------*/
.payment_money {
  width: 100%;
  display: flex;
  justify-content:center;
}
.payment_money ul {
  width: 900px;
}

@media screen and (max-width: 500px) {
    .payment_money ul {
      width: 94%;/*100%;*/
    }
}

.payment_money ul li {
  margin-bottom: 10px;
}

@media screen and (max-width: 500px) {
    .payment_money ul li{
      width: 100%;/*100%;*/
    }
}

.payment_money ul li:nth-child(odd) .price,.payment_money ul li:nth-child(odd) .itempoint {
  background-color: rgba(255,255,255,1);
}

.payment_money ul li:nth-child(even) .price,  .payment_money ul li:nth-child(even) .itempoint  {
  background-color: rgba(24,29,98,1);
  color:#fff;
}

.payment_money ul li:nth-child(n + 2) {
  border-top: none;
}

.payment_money_item {
  position: relative;
  cursor: pointer;
  padding-left:0;/* 30px;*/
}

.payment_money_item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
}


.img-arrow {
  margin: 10px
}

.money {
  margin: 14px 15px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  width: 300px;
  text-align: center;
  padding: 15px 0;
  margin-left: 10px;
}

.itempoint {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  width: 317px;
  padding: 15px 0;
}

@media screen and (max-width: 500px) {
  .money {
    margin: 14px 5px 14px 15px;
  }

  .price {
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    width: 35%;/*300px;*/
    text-align: center;
    padding: 10px 0;
    margin-left: 6px;
  }

  .itempoint {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    width: 36%;/*317px;*/
    padding: 10px 0;
  }
}

/*ラジオボタン*/
input[type="radio"]{
      -webkit-appearance: none;/*radio*/
      appearance: none;/*radio;*/
}

input[type="radio"] {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  content: "";
  background-color: #FFFFFF;
  border: 1px solid #999999;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
}

@media screen and (max-width: 500px) {
  input[type="radio"] {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    content: "";
    background-color: #FFFFFF;
    border: 1px solid #999999;
    border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
  }
}

input[type="radio"]:checked:after {
      display: block;
      position: absolute;
      top:7px;
      left: 7px;
      content: "";
      width: 20px;
      height: 20px;
      background: rgba(24,29,98,1);
      border-radius: 50%;
    }

@media screen and (max-width: 500px) {
input[type="radio"]:checked:after {
      display: block;
      position: absolute;
      top:2px;
      left: 2px;
      content: "";
      width: 12px;
      height: 12px;
      background: rgba(24,29,98,1);
      border-radius: 50%;
    }
}


/*会員ページ　login.html*/
.paddwh{
    padding:35px 22px;
}
@media (max-width:500px){
    .paddwh{
        padding:15px 22px;
    }
}

/*会員ページ　privasy.html & rule.html*/
.list-style li{
    list-style: square;
}

/*会員ページ　courceon1.html*/
.shohin{
    width:400px;
    height: 400px;
    margin-left: 20px;
    padding:5%;
    line-height:1.7;
    background-color:rgba(255,255,255, 0.7) ;

    display:flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width:500px){
.shohin{
    width:90%;
    margin-left: 0;
    margin-top: 20px;
}
}

.shohin_t{
font-size:1.2em;
font-weight: bold;
width:8em;
padding:0.5em;
margin-left:30%;
}

@media (max-width:500px){
.shohin_t{
    margin-left:20px;
}
}

.shohin_p{
font-size:1.2em;
width:25em;
padding:0.5em;
font-weight:bold;
}

.padd2123{
padding:20px 10px 20px 30px;
}

.bg-wh07{
background-color:rgba(255, 255, 255, 0.7) ;
}