@charset "UTF-8";

/*リセット*/
dl, dt, dd, ol, ul, li{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

html {
  font-size:16px;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
 }

body{
  font-family: 'ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Yu Gothic UI','MS UI Gothic',sans-serif;
  /*
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN','游明朝体+36ポかな','YuMincho +36p Kana',sans-serif;
  */
	/*スマホのスクロールをスムーズにするらしい*/
	-webkit-overflow-scrolling: touch;
}

@media(max-width:500px){
  html{
  font-size:3.5vw;
  }
}

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

a {
  display: block;
}

#container{
  width: 100%;
}

.wrapper{
  width:100%;
  overflow-x: hidden;
}

.block{
  display: block;
}

.relative{
  position: relative;
  z-index: 1 !important;
}

@media(max-width:550px){
  .wrapper{
    width:100vw;
    overflow-x: hidden;
  }
}

/*固定バックグラウンド
.monster{
width: 100%;
}
.monster:before{
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../image/hanabi-bg.png);
    top: 0;
    left: 0;
    background-position: top center;
    z-index: -2;
    background-size: cover;
}
*/

.blur {
	position: relative;
}
.blur:before {
	content: "";
	position: absolute;
	top: -7px;
	left: 0;
	background: inherit;
	background-clip: content-box;
	width: 100%;
	height: 100px;
	-webkit-filter: blur(2px);
	filter: blur(2px);
  z-index: 5 !important;
}

.blur_bottom {
	position: relative;
}
.blur_bottom:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	background: inherit;
	background-clip: content-box;
	width: 100%;
	height: 100px;
	-webkit-filter: blur(5px);
	filter: blur(5px);
  /*z-index: 5 !important;*/
}


/*-----------------------------------
全体
------------------------------------*/
.flex-c{
  display: flex;
  justify-content: center;
}

.visible_pc{
  display: block;
}

.visible_sp{
  display: none;
}

@media(max-width:550px){
  .visible_pc{
    display: none;
  }

  .visible_sp{
    display: block;
  }
}

/*-----------------------------------------
header
------------------------------------------*/

#header{
  width:100%;
  height: 100px;
  position:sticky;
  top:0;
  background-color: #1E2083;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9 !important;
}

.head-in{
  width:100%;
  max-width: 1200px;
  padding:0 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headlogo{
  width:533px;
}

.head-linebtn{
  width:237.5px;
}

.pikeen {
    position:relative;
    z-index:1;
     overflow: hidden;
}

.pikeen:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}
.pikeen:after {
    position: absolute;
    z-index: 1;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    transition: 0.2s;
    animation: shiny-btn2 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn2 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}




@media(max-width:900px) and (min-width:551px){

}

@media(max-width:550px){
  #header{
    width:100vw;
    height: 9vw;
  }
  
  .head-in{
    width:100vw;
    padding:0 4%;
  }
  
  .headlogo{
    width:53vw;
  }
  
  .head-linebtn{
    width:23vw;
  }
}

/*---------------------------------------------------
 End header 
---------------------------------------------------*/

/*--------------------------------------------------
top
---------------------------------------------------*/
.topbg{

  width: 100vw;/*1200px*/
  height: 85.83vw;
  /*aspect-ratio: 100 / 85.8;*/
  padding:6% 0 1% 0;
  background-image: url(../image/bc-topbg2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.topbg2{
  width: 100vw;/*1200px*/
  height: 70vw;
  /*aspect-ratio: 100 / 85.8;*/
  padding:10% 0 10% 0;
  background-image: url(../image/bc-topbg2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.topbox{
  margin: 0 auto;
  width: 100%;
  height: 90.83%;/*85.83*/
  max-width: 1200px;
  max-height: 1000px;
  position: relative;
}

.top-ttl{
  position: absolute;
  z-index: 2;
  top:8%;
  left:10%;
  right: 10%;
  width: 80%;
}

.top-mainflex{
  position: absolute;
  top:18%;
  left:2%;
  right: 2%;
  width: 96%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.top-main{
  position: relative;
  z-index: 2;
  margin: 3% 0 0 -2%;
  width:82%;
}

.top-boat{
  position: relative;
  z-index: 1;
  margin: 0 -8% 0 0;
  width: 75%;
}

.top-slideout{
  width:86%;
  position:absolute;
  bottom:0;
  left:7%;
  right: 7%;
  padding:2% 2%;
  background-color: #D3F0FD;
  border-radius: 14px;
  border: #000 2px solid;
  box-shadow: 5px 5px 0px 5px rgba(0, 0, 0, 1);
}

.top-slidein{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-slideflm{
  width: 76%;  
}

.top-slideitem{
  margin: 0 5px;
  width:166px;
  height:205px;
}

.top-slidelogo{
  margin: 0 0 0 -6%;
  padding:2%;
  width:30%;
}


@media(max-width:550px){

  .topbg{
    width: 100vw;/*1200px*/
    height: 147.25vw;
    /*aspect-ratio: 100 / 85.8;*/
    padding:1% 0 1% 0;
    background-image: url(../image/bc-topbg2_sp.jpg);
    background-size: cover;
  }

  .topbg2{
    width: 100vw;/*1200px*/
    height: 115vw;
    /*aspect-ratio: 100 / 85.8;*/
    padding:10% 0 10% 0;
    background-image: url(../image/bc-topbg3_sp.jpg);
    background-size: cover;
  }

  .topbox{
    width: 100%;
    height: 100%;/*85.83*/
  }
  
  .top-ttl{
    top:3%;
    left:10%;
    right: 10%;
    width: 80%;
  }
  
  .top-mainflex{
    top:18%;
    left:2%;
    right: 2%;
    width: 96%;
    flex-wrap: wrap;
  }
  
  .top-main{
    margin: -19% 0 0 0;
    width:92%;
  }
  
  .top-boat{
    margin: -16% 0 0 0;
    width: 80%;/*85%*/
  }

  .top-slideout{
    width:86%;
    bottom:2%;
    left:7%;
    right: 7%;
    padding:2% 2%;
    border-radius: 7px;
    border: #000 2px solid;
    box-shadow: 2px 2px 0px 2px rgba(0, 0, 0, 1);
  }
  
  
  .top-slideflm{
    width: 76%;  
  }
  
  .top-slideitem{
    margin: 0 3px;/*0 5px*/
    width:25.2vw;/*166px;*/
    height:31.11vw;/*205px;*/
  }
  
  .top-slidelogo{
    margin: 0 0 0 -6%;
    padding:2%;
    width:43%;/*30%*/
  }
}

/*--------------------------------------------------
section2 登録部分　reg
---------------------------------------------------*/

.top-regbg{
  margin-top: -2px;
  width: 100vw;/*1200px*/
  padding:6% 0;
  background-image: url(../image/bc-regbg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media(max-width:550px){
  .top-regbg{
    margin-top: 0;
  }
}

.top-regbox{
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
}

.top-regflm{
  width: 65%;
  position: relative;
  padding:4% 4%;
  background-color: #F2FDFF;
}

.top-regflm::before {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  border: solid 10px transparent;
  z-index: 1;
}

.top-regflm::after {
  content: "";
  position: absolute;
  top: -25px;
  bottom: -25px;
  left: -25px;
  right: -25px;
  border: solid 8px #F2FDFF;
  z-index: 1;
}

.top-regbunflm{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.top-regbun_l{
  width: 308px;
  height: 228px;
  background-image: url(../image/bc-regflm_l.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding:4% 4%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.top-regbun_r{
  width:308px;
  height: 228px;
  background-image: url(../image/bc-regflm_r.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding:4% 4%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.top-regbun0{
  position: relative;
  width:290px;
  height: 210px;
  background-image: url(../image/bc-regflm0.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding:3% 3% 9% 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.top-regbun0:first-child{
  margin: 0 2% 0 0;
}

.top-regbun0:nth-child(2){
margin: 0 0 0 2%;
}

.reg-money{
  position: absolute;
  top:-10%;
  right:-6%;
  width:91px;
  height: 73px;
  z-index: 2;
}
.reg-tel{
  position: absolute;
  top:-12%;
  right:-5%;
  width:82px;
  height: 105px;
  z-index: 2;
}

.top-regttl{
  width:80%;
}

.top-regttl1{
  width:98%;
}

.top-reglinebtn{
  width:60%;
}

.regtxt_red{
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 900;
  color:#D32D26;
}

.regtxt_grey{
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 900;
  color:#3D3A39;
}

.top-regtxt{
  margin-top: 3%;
  font-size: 1.2rem;
  text-align: center;

}

.lb-circle{
    margin: 0 5px;
    width: calc(3.4rem + 16px);/*calc(2.4rem + 16px);*/
    height: calc(3.4rem + 16px);
    border-radius: 50%;
    background-color: #48A099;
    color:#fff;
    font-size: 3.4rem;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media(max-width:550px){
  .top-regflm{
    width: 92vw;
    position: relative;
    padding:4% 4%;
    background-color: #F2FDFF;
  }

  .top-regflm{
    width: 92%;
    position: relative;
    padding:4% 2%;
    background-color: #F2FDFF;
  }
  
  .top-regflm::before {
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    border: solid 5px transparent;
  }
  
  .top-regflm::after {
    top: -12px;
    bottom: -12px;
    left: -12px;
    right: -12px;
    border: solid 4px #F2FDFF;
  }

  .top-regbun0{
    position: relative;
    width:41vw;/*290px;*/
    height:29.68vw;/* 210px;*/
    padding:3% 2% 9% 1%;
  }
  
  .top-regbun0:first-child{
    margin: 0 1.5% 0 0;
  }
  
  .top-regbun0:nth-child(2){
  margin: 0 0 0 1.5%;
  }

  .reg-money{
    top:-10%;
    right:-6%;
    width:10.8vw;/*91px;*/
    height:8.668vw;/*73px;*/
  }
  .reg-tel{
    top:-12%;
    right:-5%;
    width:9.737vw;/*82px;*/
    height:12.46vw;/* 105px;*/
  }

  .regtxt_red{
    font-size: 1.6rem;
    font-weight: 900;
  }
  
  .regtxt_grey{
    font-size: 1.2rem;
    font-weight: 900;
  }

  .top-regtxt{
    margin-top: 2%;
    font-size: 0.8rem;
  }

  .lb-circle{
    margin: 0 3px;
    width: calc(1.4rem + 16px);/*calc(2.4rem + 16px);*/
    height: calc(1.4rem + 16px);
    font-size: 1.4rem;
  }
}

/*--------------------------------------------------
section3
---------------------------------------------------*/

.sec3bf{
  position: relative;
  background-color: #5EB7D6;
  padding:4% 0;
  display: flex;
  justify-content: center;
}

.sec3bf::before{
  content: "";
  position: absolute;
  right: 0;
  bottom: -60px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #5EB7D6 transparent transparent transparent;
  border-width: 60px 60px 0 60px;
}

.sec3-ttl{
  width: 40%;
  max-width: 448px;
}

.sec3bg{
  padding:8% 0 4% 0;
  background-color: #C0EDE9;
  background-image:
 repeating-linear-gradient(-45deg,
 #EBFEFD, #EBFEFD 7px,
 transparent 0, transparent 14px);
}

.sec3flm{
  position: relative;
  width: 86%;
  max-width: 890px;
  border:#48A099 6px solid;
  border-radius: 14px;
  background-color: #fff;
  padding:2% 2%;

}

.sec3-borretflx{
  margin: 2% 0;
  width: 100%;
  display: flex;
  justify-content:flex-start;
  align-items: center;
}

.sec3-check{
  width:61px;
  height:57px;
  margin-right: 2%;
}

.sec3-borrettxt{
  font-size: 1.8rem;
  font-weight: 900;
}

.contact-borrettxt{
  font-size: 1.2rem;
  font-weight: 900;
}

.sec3-rabit{
  position: absolute;
  top:-18%;
  right: -2%;
  width:208px;
  height:206px;
}

.sec3-txt1{
  margin: 2% 0 1% 0;
  text-align: center;
  color:#3D3A39;
  font-size: 2rem;
  font-weight: 700;
}

.sec3-ttlflm{
  /*position: relative;*/
  width: 749px;
  height: 151px;
  background-image: url(../image/bc-sec3fukiflm.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 2% 0 2% 0;
  padding:30px 0 45px 0;/*4% 0 6% 0;*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2.8rem;
  font-weight: 900;
}

.sec3-logo{
  width:90%;
  max-width: 800px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: -7% 0 0 -10%;
}

.sec3-panda{
  width:148px;
  height: 187px;
}

.sec3-logoimg{
  width: 70%;
  max-width: 594px;
}

@media(max-width:768px){
  .sec3-ttlflm{
    /*position: relative;*/
    width: 74.9vw;
    height: 15.1vw;
    margin: 2% 0 2% 0;
    padding:4% 3% 6% 3%;
    font-size: 1.8rem;
  }
}

@media(max-width:550px){

  .sec3bf{
    padding:4% 0;
  }
  
  .sec3bf::before{
    bottom: -25px;
    border-width: 25px 25px 0 25px;
  }

  .sec3-ttl{
    width: 70%;
    max-width: 448px;
  }

  .sec3flm{
    width: 86%;
    border:#48A099 3px solid;
    border-radius: 7px;
    padding:2% 2%;
  }

  .sec3-rabit{
    top:-9%;
    right: -4%;
    width:27.17vw;/*24.7vw;208px;*/
    height:26.9vw;/*24.46vw;206px;*/
  }

  .sec3-borretflx{
    margin: 3% 0;
  }

  .sec3-check{
    width:8.4vw;/*61px;*/
    height:7.86vw;/*57px;*/
    margin-right: 2%;
  }
  
  .sec3-borrettxt{
    font-size: 1.4rem;
    font-weight: 900;
  }

  .sec3-txt1{
    font-size: 1.6rem;
  }

  .sec3-ttlflm{
    /*position: relative;*/
    width: 88vw;/*749px;*/
    height: 17.74vw;/*151px;*/
    margin: 3% 0 2% 0;
    padding:4% 0 6% 0;
    font-size: 1.4rem;
  }

  .sec3-logo{
    width:98%;
    max-width: 800px;
    margin: -8% 0 0 -8%;
  }

  .sec3-panda{
    width:14.92vw;/*148px;*/
    height:18.85vw;/* 187px;*/
  }
  
  .sec3-logoimg{
    width: 75%;
    max-width: 594px;
  }

}

/**********************************************
.lb-section3{
    background-color: #FDFBE4;
    background-image:
    repeating-linear-gradient(
      90deg,
      #FDF689 ,
      #FDF689 1px,
      transparent 1px,
      transparent 32px
    ),
    repeating-linear-gradient(
      0deg,
      #FDF689 ,
      #FDF689 1px,
      transparent 1px,
      transparent 32px
    );
}

.lb-sec3txt3{
    display: inline-block;
    position: relative;
    background-color: #E60012;
    color:#fff;
    letter-spacing: 0.1em;
    font-size: 3.2em;
    font-weight: 900;
    padding:2px 18px;
}

.lb-sec3txt3:before{
    content:"";
    display: inline-block;
    position:absolute;
    top:0;
    left:100%;
    width: 40px;
    height: 40px;
    border-top:40px transparent solid;
    border-left:20px #E60012 solid;
    border-right:20px transparent solid;
    border-bottom:40px transparent solid;
}

@media(max-width:1100px) and (min-width:551px){
    .lb-sec3txt3:before{
        width: 36px;
        height: 30px;
        border-top:36px transparent solid;
        border-left:15px #E60012 solid;
        border-right:15px transparent solid;
        border-bottom:36px transparent solid;
    }
}

@media(max-width:550px){
    .lb-sec3txt3:before{
        width: 20px;
        height: 20px;
        border-top:20px transparent solid;
        border-left:10px #E60012 solid;
        border-right:10px transparent solid;
        border-bottom:20px transparent solid;
    }
}

******************************************/

.ctw-marker-bold {
    padding: 3px 1px;/*3px 1px*/
    background-size: 200% 30%;/*200% 30% 12px*/
    background-position: /*bottom;*/0 100%;/*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% 100%;/*-100% 10px*/
}
.ctw-marker-yellow {
background-image: -webkit-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
background-image: -moz-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
background-image: -o-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
background-image: -ms-linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
background-image: linear-gradient(left, rgba(255,235,6,0) 50%, rgba(253,241,80,1) 50%);
}

@media(max-width:1100px) and (min-width:551px){

}

@media(max-width:550px){

}

/*---------------------------------------------------
 section4
-----------------------------------------------------*/

.sec4-ttl{
  width: 50%;
  max-width: 667px;
}

.sec4bg{
  background-color: #C8F1D1;
  background-image:
    radial-gradient(#fff 16%, transparent 16%),
    radial-gradient(#fff 10%, transparent 10%);
  background-size: 80px 80px;
  background-position: 0 0, 40px 40px;
  padding:8% 0 4% 0;
}

.section4{
    width: 100%;
    max-width: 1200px
}

.sec4ttl{
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.8;
}

.sec4txt{
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.8;
}

.sec4sharkflm{
  margin:2% 0 1% 0;
  position:relative;
  width:80%;
  max-width: 680px;
  border:#479EE3 solid 3px;
  background-color: #fff;
  border-radius: 14px;
  padding:2% 1% 2% 5%;
}

.sec4sharkimg{
  position: absolute;
  top:-14%;
  left:-10%;
  width:162px;
  height:181px;
}

.sec4sharktxt{
  text-align: center;
  font-size: 2.8rem;
  font-weight: 900;
}

.sec4kyoteiflm{
  margin:3% 0 1% 0;
  width:84%;
  max-width: 820px;
  border:#479EE3 solid 3px;
  background-color: #fff;
  border-radius: 14px;
  padding:0;
}

.sec4kyoteiflm_up{
  position: relative;
  width: 100%;
  max-width: 820px;
  background-color: #479EE3;
  color:#fff;
  padding:2% 2%;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}

.sec4kyoteiflm_up::before{
  content: "";
  position: absolute;
  right: 0;
  bottom: -60px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #479EE3 transparent transparent transparent;
  border-width: 60px 410px 0 410px;
}

.sec4kyflm_bear{
  position: absolute;
  top:5%;
  left:-5%;
  width:202px;
  height: 140px;
}

.sec4kyflm_rabit{ 
  position: absolute;
  top:5%;
  right:-5%;
  width:204px;
  height: 154px;
}

.sec4ttl2{
  margin-top: 70px;
  text-align: center;
  font-size: 4.4rem;
  letter-spacing: 1rem;
  font-weight: 900;
}

.sec4ttl3{
  margin:10px 0 20px 0;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
}

.sec4ttl4{
  margin: 10px 0 0 0;
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.8;
}

.sec4ttl5{
  margin:10px 0 10px 0;
  text-align: center;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.8;
}

.sec4ttl6{
  text-align: center;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.8;
}

@media(max-width:1199px){
  .sec4kyoteiflm_up::before{
    border-width: 60px 35vw 0 35vw;
  }
}

@media(max-width:550px){
  .sec4-ttl{
    width: 90%;
    max-width: 667px;
  }
  .sec4ttl{
    font-size: 1.6rem;
  }
  
  .sec4txt{
    font-size: 1.2rem;
  }

  .sec4sharkflm{
    margin:2% 0 1% 0;
    position:relative;
    width:72%;
    max-width: 680px;
    border:#479EE3 solid 3px;
    background-color: #fff;
    border-radius: 7px;
    padding:2% 0.5% 2% 14%;
  }
  
  .sec4sharkimg{
    position: absolute;
    top:-8%;
    left:-16%;
    width:29.699vw;/*26.99vw;162px;*/
    height:33.18vw;/*30.166vw181px;*/
  }
  
  .sec4sharktxt{
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
  }

  .sec4kyoteiflm{
    margin:8% 0 1% 0;
    width:84%;
    max-width: 820px;
    border:#479EE3 solid 3px;
    background-color: #fff;
    border-radius: 7px;
    padding:0;
  }
  
  .sec4kyoteiflm_up{
    position: relative;
    width: 100%;
    max-width: 820px;
    background-color: #479EE3;
    color:#fff;
    padding:2% 2%;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
  }
  
  .sec4kyoteiflm_up::before{
    content: "";
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #479EE3 transparent transparent transparent;
    border-width: 20px 40vw 0 40vw;
  }

  .sec4kyflm_bear{
    top:25%;
    left:-19%;
    width:30.59vw;/*202px;*/
    height:20.99vw;/* 140px;*/
  }
  
  .sec4kyflm_rabit{ 
    top:23%;
    right:-18%;
    width:30.59vw;/*204px;*/
    height: 23.09vw;/*154px;*/
  }

  .sec4ttl2{
    margin-top: 30px;
    font-size: 3.2rem;
    letter-spacing: 0.5rem;
  }

  .sec4ttl3{
    margin:10px 0 20px 0;
    font-size: 1.2rem;
    font-weight: 500;
  }

  .sec4ttl4{
    margin: 10px 0 0 0;
  
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.8;
  }
  
  .sec4ttl5{
    margin:1px 0 1px 0;
 
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.8;
  }
  
  .sec4ttl6{
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.8;
  }
}

/*---------------------------------------------------
 section5
-----------------------------------------------------*/
.flex-fwrap{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.sec5-ttl{
    width: 50%;
    max-width: 423px;
}

.sec5bg{
  background-color: #F6E7FD;
  background-image:
    radial-gradient(#C3A4D3 10%, transparent 10%),
    radial-gradient(#C3A4D3 10%, transparent 10%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  padding:8% 0 4% 0;
}

.sec5-box{
  width: 100%;
  max-width: 1100px;
}

.sec5-pfflm_out{
padding:20px 20px;

}

.sec5-pfflm_upout{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.sec5-pfflm_up{
width:180px;
margin-bottom: -8px;
padding:4px 6px;
background-color: #479EE3;
color:#fff;
font-size: 1rem;
border: #479EE3 6px solid;
border-radius: 14px 14px 0 0;
}

.sect-pfdate{
  color:#fff;
  font-size: 0.9rem;
}

.sec5-pfflm{
  position: relative;
  width:316px;
  height: 280px;
  background-color: #fff;
  border: #479EE3 6px solid;
  border-radius: 14px 14px 14px 14px;
  padding:2% 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.sec5-pfmato{
  position: absolute;
  top:-26px;
  left:-46px;
  width:102px;
  height:86px;
}

.sec5-pfimg{
  width: 281px;
  height: 152px;
}

.sec5-pfrace{
width:100%;
padding:0 10px;
display: flex;
justify-content: space-between;
align-items: center;
}

.sec5-pfrace1{
  position: relative;
  border:#D32D26 1px solid;
  padding:3px 8px;
  font-size: 1.2rem;
  font-weight: 900;
  color:#000;
  margin: 0 15px 0 0;
}

.sec5-pfrace1::before{
  content: "";
  position: absolute;
  top:50%;
  left: 100%;
  width: 0px;
  height: 0px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 10px solid #D32D26;
}

.sec5-racenum{
  padding:4px 4px;
  background-color: #000;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
}

.sec5-pfrace2{
  position: relative;
  border:#D32D26 1px solid;
  padding:3px 8px;
  font-size: 1.2rem;
  font-weight: 900;
  color:#000;
}

.sec5-pfvalueflx{
  width:100%;
  padding:0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sec5-pfvalue{
font-size: 1.7rem;
font-weight: 900;
color:#E60012;
letter-spacing: 0.2rem;
}

.sec5-pfteki{
  margin: 0;
  padding:4px 4px;
  line-height: 1;
  width: calc(1.8rem + 8px);/*calc(2.4rem + 16px);*/
  height: calc(1.8rem + 8px);
  border-radius: 50%;
  background-color: #E60012;
  color:#FFF100;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.yen{
  font-size: 1.1rem;
}



.sec_lb-section5{
    width: 100%;
    max-width: 1200px
}

@media(max-width:1100px) and (min-width:551px){

}

@media(max-width:550px){
  .sec5-ttl{
    width: 60%;
    max-width: 423px;
  }

  .sec5-box{
    width: 100vw;
    max-width: 1100px;
  }

  .sec5-pfflm_out{
    padding:2vw 1vw 2vw 1vw;
    
    }
    
    .sec5-pfflm_up{
    width:28.33vw;
    margin-bottom: -8px;
    padding:2px 2px;
    background-color: #479EE3;
    color:#fff;
    font-size: 0.7rem;
    border: #479EE3 2.5px solid;
    border-radius: 3px 3px 0 0;
    }
    
    .sect-pfdate{
      font-size: 0.6rem;
    }
    
    .sec5-pfflm{
      position: relative;
      width:44vw;/*316px;*/
      height:38.98vw;/* 280px;*/
      background-color: #fff;
      border: #479EE3 2.5px solid;
      border-radius: 3px 3px 3px 3px;
      padding:2% 1px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
    
    .sec5-pfmato{
      position: absolute;
      top:-13px;
      left:-26px;
      width:14.2vw;/*102px;*/
      height:11.96vw;/*86px;*/
    }
    
    .sec5-pfimg{
      width: 39.11vw;/*281px;*/
      height: 21.16vw;/*152px;*/
    }

    .sec5-pfrace{
      padding:0 5px;
    }
      
      .sec5-pfrace1{
        padding:1.5px 2px;
        font-size: 0.9rem;
        margin: 0 5px 0 0;
      }
      
      .sec5-pfrace1::before{
        margin-top: -5px;
        border: 5px solid transparent;
        border-left: 5px solid #D32D26;
      }
      
      .sec5-racenum{
        padding:2px 2px;
        background-color: #000;
        color: #fff;
        font-size: 0.8rem;
        font-weight: 900;
      }
      
      .sec5-pfrace2{
        padding:1.5px 2px;
        font-size: 0.9rem;
      }
      
      .sec5-pfvalueflx{
        padding:0 4px;
      }
      
      .sec5-pfvalue{
      font-size: 1.2rem;
      letter-spacing: 0.1rem;
      }
      
      .sec5-pfteki{
        margin: 0;
        padding:2px 2px;
        line-height: 1;
        width: calc(1rem + 8px);/*calc(2.4rem + 16px);*/
        height: calc(1rem + 8px);
        border-radius: 50%;
        background-color: #E60012;
        color:#FFF100;
        font-size: 0.7rem;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      
      .yen{
        font-size: 0.7rem;
      }
}


/*---------------------------------------------------
 section6
-----------------------------------------------------*/
.sec6-ttl{
  width: 50%;
  max-width: 531px;
}

.sec6bg{
  padding:8% 0 4% 0;
  background-image: url(../image/bc-sec6bg.png);
  background-repeat: repeat;
  background-position:top center;
  background-size:147px 295px;
}

.sec6-box{
  width: 100%;
  max-width: 1100px;
}



.sec6-aflx{
  width:332px;
  height: 567px;
  margin:10px 5px;
  padding:320px 40px 30px 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8;
  color:#3E3A39;
}

.sec6-a1bg{
  background-image: url(../image/sec6-a1bg.png);
}

.sec6-a2bg{
  background-image: url(../image/sec6-a2bg.png);
}

.sec6-a3bg{
  background-image: url(../image/sec6-a3bg.png);
}

@media(max-width:1100px) and (min-width:551px){

}

@media(max-width:550px){
  .sec6-ttl{
    width: 70%;
    max-width: 531px;
  }

  .sec6-box{
    width: 98vw;
  }

  .sec6-aflx{
    width:47vw;/*332px;*/
    height:80.2vw;/* 567px;*/
    margin:2vw 1vw;
    padding:45.3vw 5.66vw 4.247vw 5.66vw;/*320px 40px 30px 40px;*/
    font-size: 1.2rem;
  }

}

/*------------------------------
section7
------------------------------*/
.sec7-ttl{
  width: 30%;
  max-width: 237px;
}

.sec7bg{
  padding:8% 0 4% 0;
  background-color: #98E3F4;
  background-image:
 repeating-linear-gradient(-45deg,
 #E6FFFD, #E6FFFD 7px,
 transparent 0, transparent 14px);
}

.sec7-box{
  width:100%;
  max-width: 1200px;

}

.sec7-slideout{
  width:86%;
  padding:2% 2%;
  background-color: #D3F0FD;
  border-radius: 14px;
  border: #000 2px solid;
  box-shadow: 5px 5px 0px 5px rgba(0, 0, 0, 1);
}

.sec7-slidelogo{
  margin: -7% 0 0 -8%;
  padding:0;
  width:30%;
}

.sec7-margin{
  margin: 5% 0;
}

.sec7-customflm{
  width:311px;
  height: 434px;
  margin:8px 8px;
  padding:50px 45px 40px 45px;
  background-image: url(../image/sec-customflm.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.custom-nm{
text-align: center;
padding:20px 0;
color:#3E3A39;
font-size: 1.4rem;
font-weight: 700;
}

.custom-ttl{
  border: #3E3A39 solid;
  border-width: 1.5px 0 1.5px 0;
  text-align: center;
  padding:10px 0;
  color:#3E3A39;
  line-height: 1.8;
  font-size: 1.4rem;
  font-weight: 700;
}

.custom-txt{
  text-align: center;
  padding:10px 0;
  color:#3E3A39;
  font-size: 1.2rem;
  line-height: 2.1;
}


@media(max-width:550px){
  .sec7-ttl{
    width: 35%;
    max-width: 237px;
  }

  .sec7-slideout{
    width:86%;
    padding:2% 2%;
    background-color: #D3F0FD;
    border-radius: 7px;
    border: #000 2px solid;
    box-shadow: 2px 2px 0px 2px rgba(0, 0, 0, 1);
  }

  .sec7-box{
    width:98vw;
  }

  .sec7-customflm{
    width:47vw;/*311px;*/
    height:65.588vw;/* 434px;*/
    margin:2vw 1vw;
    padding:7.55vw 6.8vw 6.04vw 6.8vw;/*50px 45px 40px 45px;*/
  }
  .custom-nm{
    padding:3vw 0;
    font-size: 1rem;
    }
    
    .custom-ttl{
      border-width: 1px 0 1px 0;
      padding:1.5vw 0;
      color:#3E3A39;
      line-height: 1.4;
      font-size: 1rem;
    }
    
    .custom-txt{
      padding:1.5vw 0;
      color:#3E3A39;
      font-size: 0.9rem;
      line-height: 1.6;
    }
}

/*-----------------------------------
contact,privacy,outline,rule
-------------------------------------*/

.contacttel{
  font-size: 2.4rem;
  font-weight: 900;
  text-align: center;
}

.contacttime{
  margin: 20px 0;
  font-size: 1.8rem;
  font-size: 700;
  text-align: center;
}

.input-mail{
width: 100%;
height: 1.8rem;
padding:0.4rem 0.4rem;
margin: 1rem 0 0 0;
border: 1px solid #333;
border-radius: 6px;
}

.contact-area{
  width: 100%;
  height: 24rem;
  border: 1px solid #333;
  border-radius: 6px;
  padding:0.4rem 0.4rem;
  margin:0.4rem 0 1rem 0;
}

.contact-btn{
  width:360px;
  height: 3rem;
  border: 4px #00732E solid;
  border-radius: 36px;
  background-color: #48A099;
  color:#fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  padding:0.4rem 0;
}

.txttype1{
  font-size:1rem;
  line-height: 1.8;
}

.outlineflx{
  margin: 0.5rem 0 0 0;
  width:100%;
  display: flex;
  justify-content: flex-start;
}
.outline_th{
  width:40%;
  font-weight: 700;
}
.outline_td{
  width: 60%;
  margin: 0 0 0 0.5rem;
}

@media(max-width:550px){
  .contacttel{
    font-size: 1.8rem;
  }

  .contacttime{
    font-size: 1.2rem;
  }
}


/*-----------------------------------
footer
-------------------------------------*/

.footerup{
  width:100%;
  background-color:#31BADA;
}

.footerup-box{
  width:100%;
  max-width: 1200px;
  padding:20px 20px;
}

.footerup-flm{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.7;
  font-size:1rem;
}

.foot-item{
  margin-top: 8px;
  color:#fff;
  border:#fff solid;
  border-width: 0 1px 0 0;
}

.foot-item:first-of-type{
  border:#fff solid;
  border-width: 0 1px 0 1px;
}

.foot-item:nth-of-type(7){
  border:#fff solid;
  border-width: 0 1px 0 1px;
}

.foot-in{
  padding:0 50px;
}

.footerbox{
  width:100%;
  max-width:1200px;
  padding:20px 20px;
}

.footerflx{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.footerlogo{
  width:40%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:20px 20px;
}

.footertxtarea{
  width:60%;
  display: flex;
  justify-content: center;
}

.footertxt{
  font-size: 0.7rem;
  color:#fff;
  line-height: 1.8;
}

.copyrighttxt{
  color:#FFF100;
}


@media(max-width:550px){

  .footerlogo{
    width:90%;
    padding:10px 10px;
  }
  
  .footertxtarea{
    width:90%;
  }

  .foot-item:nth-of-type(4){
    border:#fff solid;
    border-width: 0 1px 0 1px;
  }
  .foot-item:nth-of-type(7){
    border:#fff solid;
    border-width: 0 1px 0 1px;
  }
  .foot-item:nth-of-type(9){
    border:#fff solid;
    border-width: 0 1px 0 1px;
  }
  .foot-item:last-of-type{
    border:#fff solid;
    border-width: 0 1px 0 1px;
  }

  .foot-in{
    padding:0 20px;
  }

}






/*---------------------------------------*/
/*text color text bgcolor text writing*/
/*---------------------------------------*/

.bg-white{
  background-color: #fff;
}

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

.bg-transparent{
  background-color: transparent;
}

.white08{
  color:rgba(255,255,255,0.8);
}

.red08{
  color:rgba(204,51,102,0.8);
}

.blue08{
  color:rgba(94,144,179,0.8);
}

.green08{
  color:rgba(0,128,0,0.8);
}

.yellow08{
  color:rgba(250,210,106,0.8);
}

.under_yellow{
background:linear-gradient(transparent 70%, #FFFF00 0%);
}

.under_yellow2{
background:linear-gradient(transparent 50%, #FFFF00 0%);
}

.c{
  text-align: center;
}

.tate-txt{
  /*color:#fff;*/
  display: inline-block;
  text-align: left;/*上揃い*/
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  /*text-orientation: upright;*/
}

@media(max-width:550px){
  .sp-yoko-txt{
    /*color:#fff;*/
    display: inline-block;
    text-align: center;/*上揃い*/
    -webkit-writing-mode:horizontal-tb;
    writing-mode: horizontal-tb;
    /*text-orientation: upright;*/
  }
}

.sk4{
    display     : inline-block;    /* 変形するためのブロック化 */
    font-size   : 12px;/*1.1em;             文字サイズ */
    line-height : 1em;             /*行の高さ */
    transform   : scale(1);   /* 変形 横,縦 */

    /*width:1em;
    height: 1em;*/
    padding:0 4px;/*0 0.2em;*/
    border: 1px #000 solid;
}
.sk-{
    display     : inline-block;
    font-size   : 4px;
    line-height : 1.8em;
    transform   : scale(1);
    color:#000;
    /*padding:0;*/
    padding:0 0 0 1px;
  /*width:0.8em;height: 0.8em;*/

}

@media (max-width:500px){
  .sk4{
      font-size   : 16px;/*1.1em;             文字サイズ */
      line-height : 1em;             /*行の高さ */
      padding:0 4px;

  }
  .sk-{
      font-size   :8px;
      /*
      line-height : 1em;
      padding:0;
      */
  }
}

.bg-cap1{
    padding:0 4px;
    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;
}

/***************************************************
loading
****************************************************/

#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,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-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;
  }
}







/************************************************************/
/*Menu*/
/************************************************************/
/*メニューボタン*/

/*チェックボックスを非表示*/
#menu-btn-check{
  display: none !important;
}

.menu-btn {
    display: flex;
    height: 84px;/*50px*/
    width: 84px;/*50px*/
    justify-content: center;
    align-items: center;
    background-color:#fff;
    border-radius: 50%;
    border: 3px solid #333;
}

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

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

/*メニュー内コンテンツ*/
.menu-content {
	display: inline-block;
    width: 300px;/*100%*/
    height: auto;
    position: fixed;
    top: 100px;
    left: 100%;
    z-index: 80;
    padding:50px 10px;
    background-color : #fff;
}

@media(max-width:550px){
  /*メニュー内コンテンツ*/
  .menu-content {
      top: 40px;
      left: 100%;
      padding:50px 10px;
  }
}

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

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

@media(max-width:550px){
  .menu-btn {
    height: 28px;
    width: 28px;
  }
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
      height: 2px;
      width: 20px;

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


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

.anime .mask-bg1:after {
 background-color: #1C1D7C;
 bottom: 0;
 content: '';
 display: block;
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 transform: translate(0, 100%);
}

.action .mask-bg1{
 opacity: 1;/*追加*/
 /*color: #E11769;*/
}

.action .mask-bg1:after {
 animation: mask-bg 1s cubic-bezier(0.8, 0, 0.170, 1);
 animation-delay: 0s;
 animation-fill-mode: forwards;
}

@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)
 }
}

.anime .mask-item{
   opacity: 0;
}

.action .mask-item{
   animation: mask-item 1s cubic-bezier(0.8, 0, 0.170, 1);
   animation-delay: 0.1s;
   animation-fill-mode: forwards;
}

@keyframes mask-item {
 0% {
   opacity: 0;
 }
 70% {
   opacity: 1;
 }
 100% {
   opacity:1;
 }
}

.anime .arm_l-r{
  animation-name: none;
  opacity:0;
}
.action .arm_l-r{
  -webkit-animation-name: arm_l-r;
  animation-name: arm_l-r;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-delay : 0.3s;
  animation-timing-function:linear;
}

.anime .arm_r-l{
  animation-name: none;
  opacity:0;
}
.action .arm_r-l{
  -webkit-animation-name: arm_r-l;
  animation-name: arm_r-l;
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-delay : 0.3s;
  animation-timing-function:linear;
}

@keyframes arm_l-r {
 0% {
   transform: translateX(150%);
   opacity: 1;
 }

 100% {
   transform: translateX(0);
   opacity: 1;
 }
}

@keyframes arm_r-l {
 0% {
   transform: translateX(-150%);
   opacity: 1;
 }

 100% {
   transform: translateX(0);
   opacity: 1;
 }
}

@media(max-width:550px){

  @keyframes arm_l-r {
   0% {
     transform: translateX(50%);
     opacity: 1;
   }

   100% {
     transform: translateX(0);
     opacity: 1;
   }
  }

  @keyframes arm_r-l {
   0% {
     transform: translateX(-50%);
     opacity: 1;
   }

   100% {
     transform: translateX(0);
     opacity: 1;
   }
  }

}

.foot-txt-bg{
  background-color: #0D254F;
  padding:3px 6px;
  margin: 3px 0;
}

.pddb50_10{
  padding-bottom: 50px;
}

.padd-reg{
  padding:40px 0;
}

.h80_40{
  height:80px;
  width:auto;
}

.padd20040_0{
  padding:20px 0 20px 40px;
}

@media(max-width:550px){
  .pddb50_10{
    padding-bottom: 60px;
  }
  .h80_40{
    height:30px;
    width:auto;
  }
  .padd20040_0{
    padding:10px 0;
  }

}

.gold-bg{
  background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);

}

.sliver-bg{
  background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}

.price-text{
 	position: relative;
    text-align: center;
	font-size: 1.6em;
	font-weight: 900;
    letter-spacing: 0.1em;
	color: #E20013;/*#4169e1*/
	-webkit-text-stroke: 6px #333;/*#4169e1*/
}

.price-text:before {
	content: attr(data-text);
	position: absolute;
	color: #E20013;/*#4169e1*/
	-webkit-text-stroke: 1px #FFF100;/*#fff*/
}

.price-text_s{
 	position: relative;
    text-align: center;
	font-size: 1.2em;
	font-weight: 900;
    letter-spacing: 0.1em;
	color: #E20013;/*#4169e1*/
	-webkit-text-stroke: 6px #333;/*#4169e1*/
}

.price-text_s:before {
	content: attr(data-text);
	position: absolute;
	color: #E20013;/*#4169e1*/
	-webkit-text-stroke: 1px #FFF100;/*#fff*/
}

@media(max-width:550px){
    .price-text{
    	font-size: 2em;
    }
    .price-text_s{
        font-size: 1.4em;
    }

}


.text-fuchi{
  -webkit-text-stroke: 3px #FFF;
  text-stroke: 3px #FFF;
}

.outline2{
	text-shadow:
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00,
  0 0 3px #f00;
}

.text-kage{
  text-shadow:
  2px 0 0 #fff,
  0 2px 0 #fff,
  2px 2px 0 #fff,
  -2px 0 0 #fff,
  0 -2px 0 #fff,
  -2px -2px 0 #fff,
  3px 3px 0 #000,
  3px 0 0 #000,
  0 3px 0 #000,
  4px 4px 0 #000,
  4px 0 0 #000,
  0 4px 0 #000,
  -3px 0 0 #000,
  0 -3px 0 #000,
  -3px -3px 0 #000,
  -4px 0 0 #000,
  0 -4px 0 #000,
  -4px -4px 0 #000;
}

.text-kage2{
  text-shadow:
  2px 0 0 #fff,
  0 2px 0 #fff,
  2px 2px 0 #fff,
  -2px 0 0 #fff,
  0 -2px 0 #fff,
  -2px -2px 0 #fff,
  4px 4px 0 #000,
  4px 0 0 #000,
  0 4px 0 #000,
  -4px 0 0 #000,
  0 -4px 0 #000,
  -4px -4px 0 #000,
  6px 0 0 #000,
  0 6px 0 #000,
  6px 6px 0 #000,
  -6px 0 0 #000,
  0 -6px 0 #000,
  -6px -6px 0 #000;
}

.text-kage21{
 -webkit-text-stroke-width: 2px;
  -webkit-text-fill-color: #fff;
}

.text-kage22{
  text-shadow:
  0 0 2px #000,
    0 0 2px #fff,
      0 0 2px #fff,
        0 0 2px #fff,
          0 0 2px #fff;
        }

.text-kage3{
  text-shadow:
  2px 0 0 #DA0216,
  0 2px 0 #DA0216,
  2px 2px 0 #DA0216,
  -2px 0 0 #DA0216,
  0 -2px 0 #DA0216,
  -2px -2px 0 #DA0216,
  4px 0 0 #000,
  4px 2px 0 #000,
  0 4px 0 #000,
  2px 4px 0 #000,
  4px 4px 0 #000,
  -4px 0 0 #000,
  -4px -2px 0 #000,
  0 -4px 0 #000,
  -2px -4px 0 #000,
  -4px -4px 0 #000;
}

.transformY-5{
  transform: skewY(-5deg);
}

.transformY-10{
  width:fit-content;
  height:auto;
  transform: skewY(-10deg);
}

.transformY10{
  transform: skewY(10deg);
}

.line-catch{
  width:450px;
  position:absolute;
  top:-10px;
  left:10px;
  z-index:2 !important;
}

@media(max-width:550px){
  .line-catch{
    width:75vw;
    position:absolute;
    top:-10px;
    left:0;
    z-index:2 !important;
  }
}

.gold-grand-txt {
  background: linear-gradient(to bottom, #C69D4A, #E9DA90 ,#926321 ,#BF862D);
  background: -webkit-linear-gradient(to bottom, #C69D4A, #E9DA90 ,#926321 ,#BF862D);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-grand1-txt {
  background: linear-gradient(to bottom, #D4B364, #E6DC8A ,#9D5F20,#BC8E44);
  background: -webkit-linear-gradient(to bottom, #D4B364, #E6DC8A ,#9D5F20,#BC8E44);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-grand2-txt {
  background: linear-gradient(to bottom, #A17516, #FDE18C ,#A17516);
  background: -webkit-linear-gradient(to bottom, #A17516, #FDE18C ,#A17516);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-grand3-txt {
  background: linear-gradient(to bottom, #AE7316, #FFE18B ,#AE7316);
  background: -webkit-linear-gradient(to bottom, #AE7316, #FFE18B ,#AE7316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


















/******************************************************
Ranking site
*******************************************************/
.mainbg{
  width: 100%;
  padding:4% 0;
  background-image: url(../img/rnk11-bg.png);
  background-repeat: repeat;
  background-position: top left;
  background-size: 25px 25px;
}

.mainbox{
  margin: 0 auto;
  width:90%;
  max-width: 900px;
  background-color: #fff;
}

.wave{
  margin-top: -1.4vw;
  width: 100vw;
  height: 5.8vw;

  background-image: url(../img/bg-wave.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.bg-point1{
  width:100%;
  position: relative;
  background-color: #fff;
  background-image:
    radial-gradient(#CAE9F7 10%, transparent 10%),
    radial-gradient(#CAE9F7 10%, transparent 10%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  padding:8% 0 4% 0;
}

@media(max-width:550px){
  .bg-point1{

    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;

  }
}

.bg-point1::before {
  position: absolute;  /*  */
  top: 0;
  left: 0;
  content: "";         /* 疑似要素に必須 */
  width: 100%;         /* 幅いっぱい */
  height: 100%;        /* 高さいっぱい */
  display: block;      /* 高さを指定するためにブロック要素にする */
  background: linear-gradient(rgba(255,255,255,0) 0, #fff 80%); /* 徐々に透明にする */
}

.top-imgbox{
  width: 100%;
  position: relative;
}

.top-imgmark{
  position: absolute;
  width:39%;
  top:28%;
  right:5%;
}

.rnk-textbox{
  width:100%;
  padding:40px 10% 60px 10%;
}

.rnk-textbox0{
  width:100%;
  padding:0 10% 0 10%;
}

.rnk-textbox1{
  width:100%;
  padding:40px 10% 0 10%;
}

.rnk-text_ttl{
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.8;
}

.rnk-text{
  font-size: 1.2rem;
  line-height: 1.8;
}

.imgbox{
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width:72.23%;
  max-width: 650px;
}

.rankingbar_out{
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width:85%;
  height: 152px;
  padding:42px 0;
}

.rankingbar_mark{
  position: absolute;
  z-index: 2;
  top:0;
  left:5%;
  width:152px;
  height: 152px;
}

.rankingbar{
  width: 100%;
  background-color:#E4007F;/*#3B4093;*/
  border-radius: 34px;
  color:#fff;
  font-size: 1.8rem;
  font-weight: 700;
  padding:1.5% 0;
  text-align: center;
}

.rankingbar2_out{
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width:85%;
  height: 152px;
  padding:42px 0;
}

.rankingbar2{
  width: 100%;
  background-color:#EB6EA5;/*#00A1E9;*/
  border-radius: 34px;
  color:#fff;
  font-size: 1.8rem;
  font-weight: 700;
  padding:1.5% 0;
  text-align: center;
}

.text-bullet{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  color:#E50060;

}
.mark-bullet{
  font-size: 1.8rem;
  font-weight: 900;
  color:#E50060;
  margin:0 5px 0 5%;
}

.kuchi_up{
  width:100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.kuchi_up-2{
  margin-top: 30px;
}

.kuchi_l{
  display: flex;
  font-size: 1rem;
}
.kuchi_idimg{
  width: 33px;
  height: 22px;
}
.kuchi_id{
  margin-left: 3px;
  font-weight: 700;
}
.kuchi_mark{
  width:132px;
  height: 26px;
}

.kuchi_comm{
  background-color: #EEEFEF;
  padding:30px 5%;
  font-size: 1.2rem;
  line-height: 1.8;
}

.eval{
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.eval-img{
  margin: 0 3% 0 0;
  width:45%;
}

.eval-hyo{
  margin: 0 0 0 3%;
  width:45%;
}

.eval-hyoflx{
display: flex;
}
.eval-th{
width:50%;
background-color: #C9CACA;
border: solid #A4A5A5;
border-width: 0 0 1px 1px;
padding:4px 14px;
font-size: 1.2rem;
}

.eval-td{
  width:50%;
  background-color: #fff;
  border: solid #A4A5A5;
  border-width: 0 1px 1px 1px;
  padding:4px 8px;
}

.eval-th_first{
  border-width: 1px 0 1px 1px;
}
.eval-td_first{
  border-width: 1px 1px 1px 1px;
}

.offical-btnbox{
  width:100%;
  padding:86px 0;
  display: flex;
  justify-content: center;
}

.offical-btn{
  width:36%;
  padding:20px 10%;
  display: flex;
  justify-content: center;
  border-radius: 34px;
  background-color: #F8B62B;
  box-shadow: 0px 5px 0px 0px #F39800;
}


.rank2topbgcolor{
 background-color: #E4007F;
}

.rank2bgcolor{
  background-color: #EB6EA5;
}

.rank2txtcolor{
  color: #E4007F;
}

.rank2markcolor{
  color: #E50060;
}



.rank3topbgcolor{
  background-color: #00A58E;
 }

 .rank3bgcolor{
   background-color: #62C0AF;
 }
 
 .rank3txtcolor{
   color: #00A58E;
 }
 
 .rank3markcolor{
   color: #00876F;
 }



@media(max-width:550px){

  .rnk-textbox{
    width:100%;
    padding:20px 5% 30px 5%;
  }
  
  .rnk-textbox0{
    width:100%;
    padding:0 5% 0 5%;
  }
  
  .rnk-textbox1{
    width:100%;
    padding:20px 5% 0 5%;
  }


  .rnk-text_ttl{
    font-size: 1.3rem;
    font-weight: 900;
  }
  .rnk-text{
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .wave{
    margin-top: -2.7vw;
    width: 100vw;
    height: 10vw;
    background-image: url(../img/bg-wave_sp.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }

  .imgbox{
    width:85%;/*72.23%;*/
    max-width: 650px;
  }
  
  .rankingbar_out{
    position: relative;
    z-index: 2;
    margin: 0 auto;
    width:98%;/*85%;*/
    height: 20vw;/*152px;*/
    padding:3.3vw 0;/*42px 0;*/
  }
  
  .rankingbar_mark{
    position: absolute;
    z-index: 2;
    top:0;
    left:5%;
    width:16vw;/*152px;*/
    height:16vw;/* 152px;*/
  }

  .rankingbar{
    width: 100%;
    border-radius:5.4vw;/* 34px;*/
    color:#fff;
    font-size: 1.4rem;
    font-weight: 700;
    padding:1.5% 0;
    text-align: center;
  }
  
  .rankingbar2_out{
    position: relative;
    z-index: 2;
    margin: 0 auto;
    width:98%;/*85%;*/
    height: 24vw;/*20vw 152px;*/
    padding:6.3vw 0 1vw 0;/*3.3vw  42px 0;*/
  }
  
  .rankingbar2{
    width: 100%;
    border-radius:5.4vw;/* 34px;*/
    color:#fff;
    font-size: 1.4rem;
    font-weight: 700;
    padding:1.5% 0;
    text-align: center;
  }

  .text-bullet{
    font-size: 0.95rem;
    font-weight: 900;
  }
  .mark-bullet{
    font-size: 1.2rem;
    margin:0 2px 0 0;
  }

  .kuchi_up-2{
    margin-top: 30px;
  }
  
  .kuchi_l{
    display: flex;
    font-size: 0.9rem;
  }
  .kuchi_idimg{
    width:6.6vw; /*33px;*/
    height:4.4vw; /*22px;*/
  }
  .kuchi_id{
    margin-left: 2px;
  }
  .kuchi_mark{
    width:26.4vw;/*132px;*/
    height:5.2vw;/* 26px;*/
  }
  
  .kuchi_comm{
    background-color: #EEEFEF;
    padding:6vw 5%;/*30px 5%;*/
    font-size: 1rem;/*1.2rem*/
    line-height: 1.8;
  }

  .eval{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .eval-img{
    margin: 0 0 0 0;
    width:80%;
  }
  
  .eval-hyo{
    margin: 10% 0 0 0;
    width:80%;
  }

  .eval-th{
  border-width: 0 0 1px 1px;
  padding:4px 14px;
  font-size: 1rem;
  }
  
  .eval-td{
    border-width: 0 1px 1px 1px;
    padding:4px 8px;
  }
  
  .eval-th_first{
    border-width: 1px 0 1px 1px;
  }
  .eval-td_first{
    border-width: 1px 1px 1px 1px;
  }
  
  .offical-btnbox{
    width:100%;
    padding:14vw 0;/*86px 0;*/
  }
  
  .offical-btn{
    width:65%;/*36%;*/
    padding:3vw 16%; /*20px 10%;*/
    display: flex;
    justify-content: center;
    border-radius:6.4vw;/* 34px;*/
    background-color: #F8B62B;
    box-shadow: 0px 3px 0px 0px #F39800;
  }

  .rank2topbgcolor{
    background-color: #E4007F;
   }
   
   .rank2bgcolor{
     background-color: #EB6EA5;
   }
   
   .rank2txtcolor{
     color: #E4007F;
   }
   
   .rank2markcolor{
     color: #E50060;
   }
   
   .rank3topbgcolor{
     background-color: #00A58E;
    }
   
    .rank3bgcolor{
      background-color: #62C0AF;
    }
    
    .rank3txtcolor{
      color: #00A58E;
    }
    
    .rank3markcolor{
      color: #00876F;
    }

}