@charset "UTF-8";

.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;*/
}

.video-container {
  /*height: 100vh;*/
  position: relative;
  overflow: hidden;
  /*background-color: #fff000;*/
}

/*
.video{
object-fit: fill;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
*/

.video{
 width: auto;
 height: auto;
 z-index: 0 !important;
}

/*position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
/*background: url('../image/monster_preview.png') no-repeat;
background-size: cover;*/

.videoin_img{
  position:absolute;
  top:40%;
  left:20%;
  width:60%;
  display:flex;
  justify-content:center;
  align-items: center;
  z-index: 1 !important;
  animation: buru 2s infinite;
  animation-delay: 0s;
}

@media(max-width:550px){
  .videoin_img{
    position:absolute;
    top:40%;
    left:5%;
    width:90%;
  }
}

@keyframes buru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    5% {transform: translate(20px, 20px) rotateZ(1deg)}
    10% {transform: translate(0px, 20px) rotateZ(0deg)}
    15% {transform: translate(20px, 0px) rotateZ(-1deg)}
    20% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(0px, 0px) rotateZ(0deg)}
    30% {transform: translate(20px, 20px) rotateZ(1deg)}
    35% {transform: translate(0px, 20px) rotateZ(0deg)}
    40% {transform: translate(20px, 0px) rotateZ(-1deg)}
    45% {transform: translate(0px, 0px) rotateZ(0deg)}
    50% {transform: translate(0px, 0px) rotateZ(0deg)}
    55% {transform: translate(20px, 20px) rotateZ(1deg)}
    60% {transform: translate(0px, 20px) rotateZ(0deg)}
    65% {transform: translate(20px, 0px) rotateZ(-1deg)}
    70% {transform: translate(0px, 0px) rotateZ(0deg)}
    75% {transform: translate(0px, 0px) rotateZ(0deg)}
    80% {transform: translate(20px, 20px) rotateZ(1deg)}
    85% {transform: translate(0px, 20px) rotateZ(0deg)}
    90% {transform: translate(20px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

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

.lb-headreg {
    position:relative;
    z-index:1;
    border-radius:10px;
    padding:18px 46px;
    width:auto;
    background:linear-gradient(to bottom, #7F6230, #E9D278 5%, #fff 35%, #fff 49%,#EDE7EB 50%,#340401 51%,#884A1B 70%,#FEF8D5 96%,#EFE5B2 99%,#BAB176);
    text-align:center;
     overflow: hidden;
}

.lb-headreg:before {
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
        box-sizing:border-box;
        border-radius:10px;
        padding:6px;
        width:100%;
        height:100%;
        background:linear-gradient(to bottom, #90C320 50%, #39A54F 50%);
        background-clip:content-box;
        content:"";
}

.lb-headreg:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}

.lb-headreg: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;
}

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

.gods7_mailtoroku:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}

.gods7_mailtoroku: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; }
}

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

gakushu  CSS
ヘッダ、フッタ　　　各部共通部分

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

/*head 固定 PC*/
#header{
  position: fixed;
  padding:0;
  margin: 0;
  width: 100%;
  height: 100px;/*80px*/
  padding: 5px 0 0 0;

  z-index: 9 !important;
  display: flex;
  justify-content:center;
  align-items: center;

  background-color:#1b1464;
  /*background-image: radial-gradient(circle at 24% 0%, rgba(41, 0, 252, 0.62) 14%, rgba(250, 0, 209, 0.85) 65%, rgba(35, 197, 247, 0.85) 95%);*/
  /*background-image: radial-gradient(at 1% 98%, rgba(70, 34, 255, 1) 14%, rgba(238, 39, 177, 1) 56%, rgba(35, 197, 247, 1) 86%);*/
}

.headerin{
  width: 100%;
  max-width: 1200px;
  height: 100%;
  padding: 0 min(3%,20px);
  margin: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headlogo{
width: calc(207vw / 12);
max-width: 207px;
min-width: 180px;
height: auto;
}

.headline{
  width: calc(260vw / 12);
  max-width: 260px;
  min-width: 190px;
  height: auto;


}

/*head 固定 SP*/
@media(max-width:550px){
  #header{  
    width: 100vw;
    height:calc(65vw / 5);
    padding:1vw 0 0 0;
  
  }

  .headerin{
    width: 100%;
    max-width:initial;
    height: 100%;
    padding: 0 1.5vw;
    margin: 0;
  }
  
  .headlogo{
  width: calc(142vw / 5);
  max-width: initial;
  min-width: initial;
  height: auto;
  }

  .headline{
    width: calc(208vw / 5);
    max-width: initial;
    min-width: initial;
    height: auto;


  }
  
}


/*フッター********************/

footer{
  width: 100%;
  padding: 36px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00299e;

  font-feature-settings:"palt";
}

.footerin{
  width: 100%;
  max-width: 1040px;

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


.footer_menu{
  width: 100%;
  margin: 0;
  /*width:190px;*/

  display: flex;
  justify-content: center;
  align-items: center;
}

.footer_item{
  display: flex;
  align-items: center;
  margin:16px 12px;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  color: #fff;
  font-size: 0.95rem;
}

.footer_itemarr{
  display: none;
  /*margin: 0 1rem 0 0;
  transform: scale(1.4,0.7);*/
}

.footattention{
  width:calc(788vw / 12);/*84%*/
  max-width:788px; /*1008px;960px*/
  /*border: 1px #fff solid;*/
  margin:20px 0 0 0;
}

.footattentiont_txt{
  margin: 0;
  color:#fff;
  font-size: 0.85rem;
  line-height: 2;
  letter-spacing: 1px;
  text-align: center;
}

.footerlogo{
  margin:20px 0 0 0;
  width: calc(350vw / 12);
  max-width: 350px;
  height: auto;
}

.footer_copyright{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
  text-align: center;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  color:#fff;
  font-size: 0.7rem;
  background-color: #1b1464;
}

  .ttl_bg1{
  margin:56px 0 0 0;
  width: calc(800vw / 12);
  max-width: 800px;
  height: calc(75vw / 12);
  max-height: 75px;

display: flex;
justify-content: center;
align-items: center;

color: #fff000;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 1px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../image/ttl_bg1.webp");
}


.ttl_bg2{
  margin:56px 0 0 0;
  width: calc(800vw / 12);
  max-width: 800px;
  height: calc(60vw / 12);
  max-height: 60px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #1b1464;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 2px;
}

.contentflm{
  margin:36px 0 0 0;
  width:calc(800vw / 12) ;
  max-width: 800px;
  height:auto;
  padding: 32px 42px;

  background-color: #fff;
  box-shadow: 3px 3px 0px 0px #f99c2a;

  color:#1b1464;
  font-size: 0.95rem;
  letter-spacing: 1px;
  line-height: 1.6;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contentflm_input{
  margin: 36px 0 0 0;
  width:calc(800vw / 12) ;
  max-width: 800px;
  height:48px;
  padding: 8px 42px;

  display: flex;
  justify-content: flex-start;
  align-items: center;

  border: 1px #ccc solid;
}


.contentflmfixed{
  margin:36px 0 0 0;
  width:calc(800vw / 12) ;
  max-width: 800px;
  height:640px;
  padding: 32px 42px;

  background-color: #fff;
  box-shadow: 3px 3px 0px 0px #f99c2a;

  color:#1b1464;
  font-size: 0.95rem;
  letter-spacing: 1px;
  line-height: 1.6;

  display: flex;
  flex-direction: column;
  align-items: center;
}


.contentflmfixed::placeholder{
  font-size: 0.9rem;
}


.mainbtn{
  margin:36px auto 0 auto;
  width:390px;
  height:70px;

  display: flex;
  justify-content: center;
  align-items: center;

  border: #fff solid 1.5px;
  border-radius: 36px;
  background-color: #0000ff;

  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 2px;
  font-weight: 500;
} 



/*footer tablet*/
@media(max-width:768px){
  .footerin{
    width: 100%;
    max-width: 1040px;
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .footattention{
    width:100%;
    max-width:initial;
    margin:20px 0 0 0;
    padding: 0 16px;
  }

  .footerlogo{
    margin:20px auto 0 auto;
    width: calc(310vw / 8);
    height: auto;
  }

}

/*footer SP*/
@media(max-width:550px){
  footer{
    width: 100vw;
    padding: calc(24vw / 5) 0;
  }
  
  .footerin{
    width: 100%;
    max-width: initial;

    padding:0 calc(36vw / 5);
  
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items:flex-start;
  }
  
  
  .footer_menu{
    margin: 0;
    width:100%;
    flex-direction: column;
    align-items: center;
  }
  
  .footer_item{
    margin:calc(16vw / 5) 0;
    font-size: 1.2rem;
    letter-spacing: 2px;
  }
  
  .footattention{
    width:100%;/*84%*/
    padding: 0;
    max-width:initial;
    margin:calc(24vw / 5) 0 0 0;
  }
  
  .footattentiont_txt{
    margin: 0;
    color:#fff;
    font-size: 0.95rem;
    line-height: 1.8;
  }
  
  .footerlogo{
    margin:calc(30vw / 5) auto 0 auto;
    width: calc(310vw / 5);
    height: auto;
  }
  
  .footer_copyright{
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 6px 0;
    text-align: center;
    font-size: 0.6rem;
  }


  .ttl_bg1{
  margin:calc(58vw / 5) 0 0 0;
  width: calc(480vw / 5);
  max-width: initial;
  height: calc(58vw / 5);
  max-height: initial;

  color: #fff000;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 1px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../image/ttl_bg1_sp.webp");
}


.ttl_bg2{
  margin:calc(58vw / 5) 0 0 0;
  width: calc(450vw / 5);
  max-width: initial;
  height: calc(60vw / 5);
  max-height: initial;

  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 1px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../image/ttl_bg2_sp.webp");
}

.contentflm{
  margin:calc(6vw / 5) 0 0 0;
  width:calc(450vw / 5) ;
  max-width: initial;
  height:auto;
  padding:calc(32vw / 5) calc(16vw / 5);

  color:#1b1464;
  font-size: 0.95rem;
  letter-spacing: 1px;
  line-height: 1.6;
}

.contentflmfixed{
  margin:calc(36vw / 5) 0 0 0;
  width:calc(450vw / 5) ;
  max-width: initial;
  height:calc(345vw / 5);
  padding: calc(32vw / 5) calc(16vw / 5);
  color:#1b1464;
  font-size: 0.95rem;
  letter-spacing: 1px;
  line-height: 1.6;
}

.contentflm_input{
  margin: calc(36vw / 5) 0 0 0;
  width:calc(450vw / 5) ;
  max-width: initial;
  height:calc(48vw / 5);
  padding: calc(8vw / 5) calc(42vw / 5);

}

  .mainbtn{
  margin:calc(36vw / 5) auto 0 auto;
  width:calc(390vw / 5);
  height:calc(70vw / 5);

  border: #fff solid 2px;
  border-radius: calc(36vw / 5);
  background-color: #0000ff;

  color: #fff;
  font-size: 1.3rem;
  letter-spacing: 2px;
  font-weight: 600;
} 

}


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

CSS
section1 
PC

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

/*section1 PC*/
.sec1{
  width: 100%;
  aspect-ratio: 1200 / 500;
  margin: 90px 0 0 0;
  padding:min(16px , calc(16vw / 12)) 0 0 0;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../image/topbg.webp');
  background-size:cover;
}

.sec1flm{
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  padding: 0;

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

.sec1img1{/*左上寄せ*/
  margin: 0 0 0 0;
  width:calc(581vw / 12);
  max-width: 581px;
  height: auto;
}

.sec1img2{
  margin: auto 0 auto auto;

  width:calc(516vw / 12);
  max-width: 516px;
  height: auto;
}

/*********************************************
24inch
**********************************************/
@media(min-width:1700px){
  .sec1img1{
  max-width: 1162px;

}

.sec1img2{
  max-width: 1032px;
}
}


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

CSS
section1 
SP

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

@media(max-width:550px){

.sec1{
  width: 100%;
  aspect-ratio: 500 / 700;
  margin: calc(65vw / 5) 0 0 0;
  padding:0 0 0 0;
    
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../image/topbg_sp.webp');
  background-size:cover;
}

.sec1flm{
  position: relative;
  width: 100%;
  max-width: initial;
  height: 100%;
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec1img1{/*上寄せ*/
  margin: 0 0 0 0;
  width:calc(450vw / 5);
  max-width: initial;
  height: auto;
}

.sec1img2{
  position: absolute;
  top: initial;
  bottom: 14%;
  right:0;
  left:0;
  margin:0 auto;

  width:calc(410vw / 5);
  max-width: initial;
  height: auto;
}

}


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

section1-2 
PC
CSS

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


.sec1-2{
  width: 100%;
  height: auto;
  padding:min(36px,calc(36vw / 12)) 0;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;


  background-color: #1f21d9;
  /*background-image: linear-gradient(90deg, #03A9F4 0.5px, transparent 0.5px), linear-gradient(#03A9F4 0.5px, transparent 0.5px);
  background-position: 10px 10px;
  background-size: 14px 14px;*/
}



.sec1-2flm{
  width: 100%;
  max-width: 1200px;
  padding: 0;


  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.sec1-2-item1{
  margin: 0 20px;
  max-width: 450px;
  width: calc(450vw / 12);
  max-height: 260px;
  height: calc(260vw / 12);
}

.sec1-2-item2{
  margin: 0 20px;
  padding: 0 0 3.7% 0;
  max-width: 450px;
  width: calc(450vw / 12);
  max-height: 260px;
  height: calc(260vw / 12);

  background-image: url("../image/linebg.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;
}

.sec1-2-linebtn{
  width: calc(390vw / 12);
  max-width: 390px;
  height: auto;
}



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

section1-2 
SP
CSS

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

@media(max-width:550px){
.sec1-2{
  width: 100%;
  height: auto;
  padding:calc(24vw / 5) 0;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-position: 10px 10px;
  background-size: 14px 14px;
}

.sec1-2flm{
  width: 100%;
  max-width: initial;
  padding: 0;


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

.sec1-2-item1{
  margin:0;
  width: calc(450vw / 5);
  height: auto;
}

.sec1-2-item2{
  margin: calc(20vw / 5) 0 0 0;
  padding: 0 0 6% 0;
  width: calc(450vw / 5);
  height:calc(260vw / 5);
}

.sec1-2-linebtn{
  width:calc(390vw / 5);
  height:calc(74vw / 5);
}


}

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

section2 
PC
CSS

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

.sec2{
  width: 100%;
  height: auto;
  padding: 24px 0 76px 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image:url("../image/sec2bg.webp");
  background-position: center;
  background-size: cover;
}

.sec2flm{
  width: 100%;
  max-width: 1200px;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}


.sec2ttl1{
  margin: 0 0 0 0;
  width: calc(900vw / 12);
  max-width: 900px;
  height: auto;
}

.sec2ttl2{
  margin:-14px 0 0 0;
  width: calc(614vw / 12);
  max-width: 614px;
  height: auto;
}

.sec2item{
  margin:24px 0 0 0;
  width: 100%;
  height: auto;
}

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

section2 
SP
CSS

******************************************************/
@media(max-width:550px){

.sec2{
  width: 100%;
  /*aspect-ratio:500 / 1960;*/
  height: auto;
  padding: calc(76vw / 5) 0 calc(76vw / 5) 0;/*calc(76vw / 5) 0 calc(56vw / 5) 0;*/

  display: flex;
  justify-content: center;
  align-items: center;

  background-image:url("../image/sec2bg_sp.webp");
  background-position: center;
  background-size: cover;
}

.sec2flm{
  width: 100%;
  max-width: initial;
  height: 100%;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:flex-start;/*space-between*/
}


.sec2ttl1{
  margin: 0 0 0 0;
  width: 100vw;
  max-width: initial;
  height: auto;
}

.sec2ttl2{
  margin:calc(-20vw / 5) 0 0 0;
  width: calc(344vw / 5);
  max-width: initial;
  height: auto;
}

.sec2item{
  margin:calc(18vw / 5) 0 0 0;
  width: 100vw;
  height: auto;
}



}






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

sec3
CSS
PC

*******************************************************************/
.sec3{
  width: 100%;
  height: auto;
  padding:min(46px,calc(46vw / 12)) 0 min(66px,calc(66vw / 12)) 0;
  margin: 0;

  display: flex;
  justify-content: center;

  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../image/sec3bg.webp');
  background-size:cover;
}

.sec3flm{
  width: 100%;
  max-width: 1200px;
  padding: 0;

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

.sec3ttl1{
  width:calc(678vw / 12) ;
  max-width: 678px;
  height: auto;
}

.sec3img{
  margin: 24px 0 0 0;
  width:calc(1000vw / 12) ;
  max-width: 1000px;
  height: auto;
}

.sec3ttl2{
  margin: 24px 0 0 0;
  width:calc(990vw / 12) ;
  max-width: 990px;
  height: auto;
}


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

section3
CSS
SP

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

@media(max-width:550px){

.sec3{
  width: 100%;
  aspect-ratio: 500 / 860;/*890*/
  padding:calc(36vw / 5) 0;
  margin: 0;

  display: flex;
  justify-content: center;

  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../image/sec3bg_sp.webp');
  background-size:cover;
}

.sec3flm{
  width: 100%;
  height: 100%;
  max-width: initial;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sec3ttl1{
  width:calc(422vw / 5) ;/*382vw / 5*/
  max-width: initial;
  height: auto;
}

.sec3img{
  margin: 0;
  width:calc(450vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec3ttl2{
  margin: 0;
  width:100vw;
  max-width: initial;
  height: auto;
}

}


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

section4
CSS
PC

************************************************************/
.sec4{
  width: 100%;
  height: auto;
  padding:min(46px,calc(46vw / 12)) 0 min(66px,calc(66vw / 12)) 0;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #457bff;
  background-image: linear-gradient(90deg, #03A9F4 0.5px, transparent 0.5px), linear-gradient(#03A9F4 0.5px, transparent 0.5px);
  background-position: 10px 10px;
  background-size: 14px 14px;
}

.sec4flm{
  width: 100%;
  max-width: 1200px;
  padding: 0;

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

.sec4ttl1{
   margin:0 0 0 0;
  width:calc(1000vw / 12) ;
  max-width: 1000px;
  height: auto;
}

.sec4ttl2{
   margin: 24px 0 0 0;
  width:calc(913vw / 12) ;
  max-width: 913px;
  height: auto;
}

.sec4ttl3{
   margin: 24px 0 0 0;
  width:calc(964vw / 12) ;
  max-width: 964px;
  height: auto;
}

.sec4ttl4{
   margin:0 0 0 0;
  width:calc(1200vw / 12) ;
  max-width: 1200px;
  height: auto;
}


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

section4
CSS
SP

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

@media(max-width:550px){

.sec4{
  width: 100%;
  aspect-ratio: 500 / 920;/**/
  padding:calc(76vw / 5) 0;
  margin: 0;
}

.sec4flm{
  width: 100%;
  height: 100%;
  max-width: initial;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sec4ttl1{
  margin: 0;
  width:calc(410vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec4ttl2{
  margin: 0;
  width:calc(434vw / 5);
  max-width: initial;
  height: auto;
}

.sec4ttl3{
  margin: 0;
  width:calc(436vw / 5);
  max-width: initial;
  height: auto;
}

.sec4ttl4{
  margin: -7vw 0 0 0;
  width:100vw;
  max-width: initial;
  height: auto;
}

}



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

お客様の声
CSS
PC

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

.sec5{
  width: 100%;
  height: auto;
  padding:min(46px,calc(36vw / 12)) 0 min(66px,calc(36vw / 12)) 0;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image:url("../image/sec5bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sec5flm{
  width: 100%;
  max-width: 1200px;
  padding: 0;

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

.sec5-ttl{
  width: calc(434vw / 12);
  max-width: 434px;
  height: auto;
  margin: 0;
}

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

お客様の声
PC

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

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

.custom-item{
  margin: 12px 18px;
  width:425px;
  height:500px;
  padding:205px 31px 43px 35px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.custom1{
  background-image: url("../image/sec5-custom1bg.webp");
}

.custom2{
  background-image: url("../image/sec5-custom2bg.webp");
}

.custom3{
  background-image: url("../image/sec5-custom3bg.webp");
}

.custom4{
  background-image: url("../image/sec5-custom4bg.webp");
}

.custom5{
  background-image: url("../image/sec5-custom5bg.webp");
}

.custom6{
  background-image: url("../image/sec5-custom6bg.webp");
}

.custom-head{
  margin: 0;
  width: 100%;
  height:56px;

  color: #ff0000;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1px;
  text-align: center;
}

.custom-body{
  margin: 0;
  width: 100%;
  height:177px;
  color: #1b1464;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0px;
}

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

お客様の声
SP

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

@media(max-width:550px){
.sec5{
  width: 100%;
  aspect-ratio: 500 / 3380;
  padding:calc(22vw / 5) 0;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image:url("../image/sec5bg_sp.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sec5flm{
  width: 100%;
  max-width:initial;
  padding: 0;

  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: space-between;
}

.sec5-ttl{
  width: calc(434vw / 5);
  max-width: initial;
  margin: 0;
  height: auto;
}

.customflx{
  margin: 4vw 0 0 0;
}

.custom-item{
  margin:calc(12vw / 5) calc(18vw / 5);
  width:calc(425vw / 5);
  height:calc(500vw / 5);
  padding:calc(205vw / 5) calc(27vw / 5) calc(43vw / 5) calc(32vw / 5);
}

.custom-head{
  margin: 0;
  width: 100%;
  height:calc(56vw / 5);

  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1px;
  text-align: center;
}

.custom-body{
  margin: 0;
  width: 100%;
  height:calc(177vw / 5);
  color: #1b1464;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0px;
}

}



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

実績
PC

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

.sec6{
  width: 100%;
  height: auto;
  padding:min(46px,calc(36vw / 12)) 0 min(66px,calc(36vw / 12)) 0;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image:url("../image/sec6bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sec6flm{
  width: 100%;
  max-width: 1200px;
  padding: 0;

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

.sec6-ttl{
  width: calc(434vw / 12);
  max-width: 434px;
  height: auto;
  margin: 0;
}


.pfslick{
  margin: 24px 0 0 0;
  width: 100%;
  max-width: 1200px;
}

.pfslick-rev{
  margin: 24px 0 0 0;
  width: 100%;
  max-width: 1200px;
}

.pf-flx{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pf-item{
  margin: 0;
  width:455px;
  /*aspect-ratio: 455 / 455;*/
  height: 455px;
  padding:32px 35px 36px 30px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  color: #1b1464;
  font-size: 1rem;
  background-image: url("../image/pfbg.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.pfslick-rev .pf-item{
  margin: 0;
  width:455px;
  /*aspect-ratio: 455 / 455;*/
  height: 455px;
  padding:32px 35px 36px 30px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  color: #1b1464;
  font-size: 1rem;
  background-image: url("../image/pfbg.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.pf-date{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  font-size: 0.85rem;
  line-height: 1.1;
}

.pfslick-rev .pf-date{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  font-size: 0.85rem;
  line-height: 1.1;
}

.pf-img{
  width: 100%;
  height: auto;
}

.pf-planrow{
  width: 100%;
  height: auto;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  line-height: 1.4;
  font-weight: 600;
}

.pfslick-rev .pf-planrow{
  width: 100%;
  height: auto;

  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;

  line-height: 1.4;
  font-weight: 600;
}

.pf-day{
  width: 55px;
  height: auto;
}

.pf-night{
  width: 87px;
  height: auto;
}

.pf-border{
  width: 100%;
  height: 2px;
  border: 1px solid #fbb03b;
}

.pf-racenm{
  width: 100%;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
}

.pf-value{
  width: 100%;
  height: 60px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;

  color: #ffff00;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 36px;
  background: linear-gradient(to top,#ff0017 0%,#ff9325 100%);
}

.pfslick-rev .pf-value{
  width: 100%;
  height: 60px;

  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;

  color: #ffff00;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 36px;
  background: linear-gradient(to top,#ff0017 0%,#ff9325 100%);
}

.pf-valueyen{
  font-size: 0.6em;
}




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

的中実績
SP

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

@media(max-width:550px){

.sec6{
  width: 100%;
  aspect-ratio: 500 / 1720;
  padding:calc(42vw / 5) 0;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-image:url("../image/sec6bg_sp.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.sec6flm{
  width: 100%;
  max-width: initial;
  padding: 0;

  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: space-between;
}

.sec6-ttl{
  width: calc(434vw / 5);
  max-width: initial;
  margin: 0 0 calc(20vw / 5) 0;
  height: auto;
}




.pf-flx{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.pf-item{
  margin: 0;
  /*
  width:calc(455vw / 5);
  aspect-ratio: 455 / 455;
  */
  width: 91vw;
  height: 91vw;
  padding:calc(32vw / 5) calc(35vw / 5) calc(36vw / 5) calc(30vw / 5);
}

.pfslick-rev .pf-item{
    margin: 0;
  /*
  width:calc(455vw / 5);
  aspect-ratio: 455 / 455;
  */
  width: 91vw;
  height: 91vw;
  padding:calc(32vw / 5) calc(35vw / 5) calc(36vw / 5) calc(30vw / 5);
}

.pf-date{
  font-size: 0.85rem;
  line-height: 1.1;
}
/*
.pf-img{
  width: 100%;
  height: auto;
}*/

.pf-planrow{
  line-height: 1.4;
  font-weight: 600;
}

.pfslick-rev .pf-planrow{
  line-height: 1.4;
  font-weight: 600;
}

.pf-day{
  width:calc(55vw / 5);
  height: auto;
}

.pf-night{
  width:calc(87vw / 5);
  height: auto;
}

/*
.pf-border{
  width: 100%;
  height: 2px;
  border: 1px solid #fbb03b;
}*/

.pf-racenm{
  width: 100%;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
}

.pf-value{
  width: 100%;
  height:calc(60vw / 5);

  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius:calc(36vw / 5);
}

.pfslick-rev .pf-value{
  width: 100%;
  height:calc(60vw / 5);

  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius:calc(36vw / 5);
}

.pf-valueyen{
  font-size: 0.6em;
}


}


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

sec7
CSS
PC

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

.sec7{
  width: 100%;
  height: auto;
  padding:0 0 0 0;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #fff;
  background-image: linear-gradient(90deg, #c4e5f5 0.5px, transparent 0.5px), linear-gradient(#c4e5f5 0.5px, transparent 0.5px);
  background-position: 10px 10px;
  background-size: 14px 14px;
}

.sec7flm{
  width: 100%;
  max-width: 1200px;
  padding: 0;

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

.sec7ttl1{
  margin:-18px 0 0 0;
  width:calc(900vw / 12) ;
  max-width: 900px;
  height: auto;
}

.sec7ttl2{
  margin:44px 0 0 0;
  width:calc(846vw / 12) ;
  max-width: 846px;
  height: auto;
}

.sec7item{
  margin:20px 0 0 0;
  width:calc(900vw / 12) ;
  max-width: 900px;
  height: auto;
}

.sec7item-first{
  margin:44px 0 0 0;
  width:calc(900vw / 12) ;
  max-width: 900px;
  height: auto;
}

.sec7ttl3{
  margin:24px 0 0 0;
  width:calc(798vw / 12) ;
  max-width: 798px;
  height: auto;
}

.sec7ttl4{
  margin:-36px 0 -8px 0;
  width:calc(1200vw / 12) ;
  max-width: 1200px;
  height: auto;
}


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

sec7
CSS
SP

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

@media(max-width:550px){

.sec7{
  width: 100%;
  height: auto;
  padding:calc(36vw / 5) 0;
  margin: 0;
}

.sec7flm{
  width: 100%;
  height: 100%;
  max-width: initial;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sec7ttl1{
  margin: 0;
  width:calc(500vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec7ttl2{
  margin: calc(36vw / 5) 0 0 0;
  width:calc(452vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec7item{
  margin: calc(24vw / 5) 0 0 0;
  width:calc(450vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec7item-first{
margin:calc(44vw / 5) 0 0 0;
  width:calc(450vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec7ttl3{
  margin: calc(24vw / 5) 0 0 0;
  width:calc(430vw / 5) ;
  max-width: initial;
  height: auto;
}

.sec7ttl4{
  margin: calc(24vw / 5) 0 0 0;
  width:calc(500vw / 5) ;
  max-width: initial;
  height: auto;
}

}
















.gk-sec4text2-1{
  margin: min(calc(36vw / 12),36px) 0 0 0;
  color: #fff;
  text-align: center;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 1px;
}

.gk-sec4text2-2{
  margin: 0;
  color: #fff;
  text-align: center;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.gk-sec4performflx{
  margin: 24px 0 0 0;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.gk-sec4performflx-hide{
  margin: 24px 0 0 0;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


.gk-sec4performitembg1{

  margin: 5px 5px;

  width:257px;
  height:360px;

  display: flex;
  justify-content: center;
  align-items: center;

/*
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('../image/gk-performbg1.webp');
  background-size:cover;
*/

background: linear-gradient(-225deg, #000 0%, #000 20%, #200fff 20% , #200fff 22% , #000 22%, #000 28% , #200fff 28% , #200fff 32% , #e66363 32% , #e66363 33% , #200fff 33% , #200fff 80% ,#000 80%, #000 86% , #200fff 86% , #200fff 88% ,  #000 88% , #000 89.5%, #200fff 89.5% , #200fff 93.5% , #000 93.5%, #000 94.5% , #200fff 94.5% , #200fff 100%);
}

.gk-csbg1{
  background: linear-gradient(-225deg, #000 0%, #000 20%, #200fff 20% , #200fff 22% , #000 22%, #000 28% , #200fff 28% , #200fff 32% , #e66363 32% , #e66363 33% , #200fff 33% , #200fff 80% ,#000 80%, #000 86% , #200fff 86% , #200fff 88% ,  #000 88% , #000 89.5%, #200fff 89.5% , #200fff 93.5% , #000 93.5%, #000 94.5% , #200fff 94.5% , #200fff 100%);
}

.gk-csbg2{
  background: linear-gradient(-225deg, #000 0%, #000 20%, #9fc238 20% , #9fc238 22% , #000 22%, #000 28% , #9fc238 28% , #9fc238 32% , #e66363 32% , #e66363 33% , #9fc238 33% , #9fc238 80% ,#000 80%, #000 86% , #9fc238 86% , #9fc238 88% ,  #000 88% , #000 89.5%, #9fc238 89.5% , #9fc238 93.5% , #000 93.5%, #000 94.5% , #9fc238 94.5% , #9fc238 100%);
}

.gk-csbg3{
  background: linear-gradient(-225deg, #000 0%, #000 20%, #c83b2d 20% , #c83b2d 22% , #000 22%, #000 28% , #c83b2d 28% , #c83b2d 32% , #e66363 32% , #e66363 33% , #c83b2d 33% , #c83b2d 80% ,#000 80%, #000 86% , #c83b2d 86% , #c83b2d 88% ,  #000 88% , #000 89.5%, #c83b2d 89.5% , #c83b2d 93.5% , #000 93.5%, #000 94.5% , #c83b2d 94.5% , #c83b2d 100%);
}

.gk-csbg4{
  background: linear-gradient(-225deg, #000 0%, #000 20%, #faed9f 20% , #faed9f 22% , #000 22%, #000 28% , #faed9f 28% , #faed9f 32% , #e66363 32% , #e66363 33% , #faed9f 33% , #faed9f 80% ,#000 80%, #000 86% , #faed9f 86% , #faed9f 88% ,  #000 88% , #000 89.5%, #faed9f 89.5% , #faed9f 93.5% , #000 93.5%, #000 94.5% , #faed9f 94.5% , #faed9f 100%);
}


.gk-sec4performitem{

  width:230px;/*228 230*/
  height:332px;/*330 332px*/

  padding:8px 0;/* 9px 9px;*/

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
/*
  clip-path: polygon(0 0, 93% 0, 100% 7%, 100% 100%, 7% 100%, 0 93%);
  background: #fff;
  border: 2px solid #000;
*/

  background-image: url("../image/gk-planinbg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

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

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #232584;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

.gk-sec4perform_headicon{
  margin: 0 0 2px 0;
  width: 16px;
  height: 16px;
}

.gk-sec4perform_head_r{
  width:auto;
  font-size: 0.9rem;
  font-weight: 400;
  color: #232584;

  display: flex;
  align-items: center;
}

.gk-sec4performitem_pimg{
  width: 207px;
  height:164px;
}

.pk-sec4performitem_date{
  width: 100%;
  padding:0 10px; 
  font-size: 0.7rem;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

.gk-sec4perform_border{
  width:calc(100% - 7px);/* 100%;*/
  padding:8px 10px;
  height: auto;
  background-color: #faed9f;
}

.gk-pf_kaime{
  display: flex;
  align-items: center;
}

.gk-sec4perform_race{
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 500;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

.gk-sec4perform_race p{
  width: 38%;/**/
}

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

.gk-sec4kaime_arr{
  margin: 0 0 2px 0;/*8px*/
  width: 13px;
  height: 18px;
}

.gk-kaime_redarrow{
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color: #c50018;
}

.gk-sec4perform_value{
  width: 100%;
  padding:0 10px 0 8px;/*0 10px 0 12px*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gk-sec4perform_valuenum{
  color: #a71527;
  font-family:'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  transform: scale(1,0.9);
}

.gk-sec4perform_valueyen{
  color: #a71527;
  font-family:'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.gk-sec4perform_tekichu{
  width: 28.5px;
  height: 28.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #a71527;
  font-size: 0.6rem;
  color: #f8e11b;
}



/*的中実績　SP*/
@media(max-width:550px){

  .gk-sec4text2-1{
    margin: calc(36vw / 5) 0 0 0;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 1px;
  }
  
  .gk-sec4text2-2{
    margin: 0;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .gk-sec4performflx{
    margin: calc(24vw / 5) 0 0 0;
    width: 100%;
    height: auto;
  }

  .gk-sec4performflx-hide{
    margin: calc(24vw / 5) 0 0 0;
    width: 100%;
    height: auto;
  }
  
  .gk-sec4performitembg1{
    margin:1vw 1vw;
    width:calc(218vw / 5);
    height:calc(305vw / 5);
  }

  .gk-sec4performitem{
    width:calc(195vw / 5);/*230*/
    height:calc(282vw / 5);/*332px*/
    padding:calc(6vw / 5) 0;/* 9px 9px;*/
  
  /*
    clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%);
    background: #fff;
    border: 2px solid #000;
  */
  }
  
  .gk-sec4perform_head{
    width: 100%;
    padding: 0 calc(8vw / 5);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: #232584;
    font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  }
  
  .gk-sec4perform_headicon{
    width: calc(14vw / 5);
    height:calc(14vw / 5);
  }
  
  .gk-sec4perform_head_r{
    width:auto;
    font-size: 0.7rem;
    font-weight: 400;
    color: #232584;
  
    display: flex;
    align-items: center;
  }


  .gk-sec4performitem_pimg{
    width:calc(176vw / 5);
    height:calc(140vw / 5);
  }
  
  .pk-sec4performitem_date{
    width: 100%;
    padding:0 calc(8vw / 5); 
    font-size: 0.6rem;
    font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  }
  
  .gk-sec4perform_border{
    width:calc(100% - calc(7vw / 5));
    padding:calc(6vw / 5) calc(8vw / 5); 
  }
  
  .gk-sec4perform_race{
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 500;
  }
  
  .gk-sec4perform_kaime{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .gk-sec4kaime_arr{
    margin:0 0 0 0;/*0 0 calc(1w / 5) 0*/
    width: calc(11vw / 5);
    height: calc(16vw / 5);
  }
  
  .gk-sec4perform_value{
    width: 100%;
    padding: 0 calc(8vw / 5);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .gk-sec4perform_valuenum{
    transform: scale(1,1);
    letter-spacing: -0.5px;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
  }
  
  .gk-sec4perform_valueyen{
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
  }
  
  .gk-sec4perform_tekichu{
    padding:1px 0 0 0;
    width: calc(24vw / 5);
    height: calc(24vw / 5);
    font-size: 0.6rem;
  }

}


/****************************************************************/
/*section4-4 PC*/

.gk-sec4text3-1{
  margin: min(calc(52vw / 12),52px) 0 0 0;
  color: #fff;
  text-align: center;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 1px;
}

.gk-sec4text3-2{
  margin: 0;
  color: #fff;
  text-align: center;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.gk-customslick{
  margin: 24px auto 0 auto;
  width: 100%;
  max-width: 1200px;
}

.gk-sec4smpimg{
  margin: 14px 0;
  width:321px;
  height: 434px;
}

/*section4-4 SP*/
@media(max-width:550px){
  .gk-sec4text3-1{
    margin: calc(36vw / 5) 0 0 0;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 1px;
  }
  
  .gk-sec4text3-2{
    margin: 0;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .gk-customslick{
    margin: calc(24vw / 5) auto 0 auto;
    width: 100%;
    max-width: initial;
  }

  .gk-sec4smpimg{
    margin: calc(14vw / 5) 0;
    width:calc(321vw / 5);
    height:calc(434vw / 5);
  }
}



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


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


質問ページ
 PC CSS

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

.gk-questbg{
  position: relative;
  z-index: 2 !important;
  width: 100%;
  height: auto;
  padding: 36px 0;
  background-color:#009fe6;
}

.gk-questtext1{
  margin: min(calc(36vw / 12),36px) 0 0 0;
  color: #fff;
  text-align: center;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 1px;
}

.gk-questtext2{
  margin: 0;
  color: #fff;
  text-align: center;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.accordion{
  margin:0 auto;
  padding: 36px 0 0 0;
  width: calc(890vw / 12);
  max-width: 890px;
}

/*ベース*/
.toggle {
	display: none;
}

.Label {		/*タイトル*/
  position: relative;
  width: 100%;
	padding: 0.9rem 1rem 0.9rem 4rem;
  font-size: 1.2rem;
  font-weight: 500;
	display: block;
	color: #fff;
  letter-spacing: 1px;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
	background:#c2007b;
  border-radius: 4px 4px 0 0;
}

.qmark{
  position: absolute;
  width: 32px;
  height: 32px;
  top:14px;
  left: 16px;

  filter: invert(92%) sepia(93%) saturate(0%) hue-rotate(202deg) brightness(106%) contrast(106%);
/*
  background-image: url("../image/q_icon.webp");
  background-repeat: no-repeat;
  background-position:center;
  background-size: cover;*/
}

.Label:before,
.Label:after {
  position: absolute;
  content:"";
  width: 30px;
  height: 3px;
  background-color: #fff;

  top:calc( 50% - 3px );
	right: 20px;

  transition: all 0.3s ease;
}

.Label::before{		/*タイトル横の矢印*/
	/*content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);*/
}

.Label::after{
	transform: rotate(90deg);
}

/*
.Label,
.quest_content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s ease;
}*/

.quest_content {		/*本文*/
  position: relative;
  /*display: none;*/
	/*height: 0;*/

	margin-bottom:20px;
	padding:0 24px 0 24px;
	overflow: hidden;
  border: #20215C solid 0;

  background-color: #fff;
  color: #000;
  font-size: 1.1rem;
  font-family:'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
  letter-spacing: 1px;
  border-radius:0 0 4px 4px;

  /* 閉じている状態 */
  line-height: 0;
  opacity: 0;
  visibility: hidden;
  /* 閉じるアニメーション */
  transition:
    line-height .3s ease-out,
    opacity     .1s linear,
    visibility  .1s linear;
}


/*開閉*/
.toggle:checked + .Label + .quest_content {
	/*height: auto;
	padding:20px 1rem 20px 4rem;
	transition: all 0.3s ease;*/

  padding:20px 24px 20px 24px;
    /* 開いている状態 */
    line-height: 1.8;
    opacity: 1;
    visibility: visible;
    /* 開くアニメーション */
    transition:
      line-height .3s ease-out,
      opacity     .1s linear .1s,
      visibility  .1s linear .1s;
}

.toggle:checked + .Label::after {
	transform: rotate(0deg) !important;
}



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

academy 
質問ページ
 SP CSS

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

@media(max-width:550px){

  .gk-questbg{
    width: 100vw;
    height: auto;
    padding:calc(24vw / 5) 0 calc(36vw / 5) 0;
  }

  .gk-questtext1{
    margin:calc(36vw / 5) 0 0 0;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 1px;
  }
  
  .gk-questtext2{
    margin: 0;
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 1px;
  }
  
  .accordion{
    margin:0 auto;
    padding: calc(36vw / 5) 0 0 0;
    width: calc(400vw / 5);
    max-width:initial;
  }

  .Label {		/*タイトル*/
    position: relative;
    width: 100%;
    padding: calc(45vw / 5) 3vw calc(15vw / 5) 3vw;
    font-size: 1rem;
    font-weight: 500;
    display: block;
    letter-spacing: 1px;
    border-radius: 4px 4px 0 0;
  }
  
  .qmark{
    position: absolute;
    width:calc(30vw / 5);
    height:calc(30vw / 5);
    top:2vw;
    left:2vw;
  }

.Label:before,
.Label:after {
  width:20px;/* 30px;*/
  height:2px;/*px;*/
  top:5vw;/*50% - 3px*/
	right:3vw;/*10px*/
}

.quest_content {		/*本文*/
  position: relative;
  /*display: none;*/
	/*height: 0;*/

	margin-bottom:3vw;
	padding:0 3vw 0 3vw;
	overflow: hidden;
  font-size: 0.9rem;
  font-feature-settings:"palt";
  letter-spacing: 1px;
  border-radius:0 0 4px 4px;

  /* 閉じている状態 */
  line-height: 0;
  opacity: 0;
  visibility: hidden;
  /* 閉じるアニメーション */
  transition:
    line-height .3s ease-out,
    opacity     .1s linear,
    visibility  .1s linear;
}

/*開閉*/
.toggle:checked + .Label + .quest_content {
	/*height: auto;
	padding:20px 1rem 20px 4rem;
	transition: all 0.3s ease;*/

  padding:3vw 3vw 3vw 3vw;
    /* 開いている状態 */
    line-height: 1.8;
    opacity: 1;
    visibility: visible;
    /* 開くアニメーション */
    transition:
      line-height .3s ease-out,
      opacity     .1s linear .1s,
      visibility  .1s linear .1s;
}

.toggle:checked + .Label::after {
	transform: rotate(0deg) !important;
}

  
}



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

rule,privacy,outline,linereg
css

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

.gk-subflm{
  margin:min(calc(32vw / 12),32px) 0 0 0;
  width:calc(1000vw / 12) ;
  max-width: 1000px;
  height:auto;
  padding: min(calc(42vw / 12),42px) min(calc(36vw / 12),36px);

  background-color: #fff;

  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1.7;
}

/*左によせるため*/
.gk-leftsideflm{
  width: calc(730vw / 12);
  max-width: 730px;
  height: auto;

  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1.7;
}


.gk-subfixdflm{
  margin:min(calc(24vw / 12),24px) 0 0 0;
  width:calc(1000vw / 12) ;
  max-width: 1000px;
  height:408px;
  padding: min(calc(32vw / 12),32px) min(calc(36vw / 12),36px);

  background-color: #fff;
}

.gk-subfixdflmin{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.gk-subtxt1{
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.4;
  text-align: center;
}

.gk-subtxt2{
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.6;
  text-align: center;
}

.gk-subtxt3{
  margin: 12px 0;
  color:#ff0000;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.4;
  text-align: center;
}


.gk-bigtxt1{
  margin: 22px 0 0 0;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.7;
}

.gk-txt_normal{
  margin: 6px 0 0 0;
}

.gk-txt_reindent{
  margin: 6px 0 0 1rem;
  text-indent: -1rem;
}





.ttltxt2{
  color:#4A4886;
  font-size: 1.4em;
  font-weight: 700;
}

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

rule,privacy,outline,linereg
css

********************************************************/
@media(max-width:550px){

  .gk-subflm{
    margin:calc(24vw / 5) 0 0 0;
    width:calc(420vw / 5) ;
    max-width: initial;
    height:auto;
    padding: calc(24vw / 5) calc(24vw / 5);
  }

  /*左によせ解除*/
.gk-leftsideflm{
  width:100%;
  max-width:initial;
  height: auto;

  font-size: 0.95rem;
  letter-spacing: 0.5px;
  line-height: 1.7;
}

  .gk-subfixdflm{
    margin:calc(24vw / 5) 0 0 0;
    width:calc(420vw / 5) ;
    max-width: initial;
    height:calc(354vw / 5);
    padding: calc(32vw / 5) calc(12vw / 5);
  }

  .gk-subtxt1{
    margin: 0 0 calc(10vw / 5) 0;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.4;
    text-align: center;
  }
  
  .gk-subtxt2{
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
    text-align: center;
  }
  
  .gk-subtxt3{
    margin: calc(12vw / 5) 0;
    color:#ff0000;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.4;
    text-align: center;
  }
  
  .gk-subtxt4{
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.7;
  }

  .gk-bigtxt1{
    margin: calc(22vw / 5) 0 0 0;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.7;
  }
  
  .gk-txt_normal{
    margin:calc(6vw / 5) 0 0 0;
  }
  
  .gk-txt_reindent{
    margin:calc(6vw / 5) 0 0 1rem;
    text-indent: -1rem;
  }
}


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

会員ページ
汎用　CSS
PC

*************************************************************/
.mainflm{
  /*margin: min(calc(150vw / 12),150px) auto min(calc(150vw / 12),150px) auto;*/

  margin:120px auto 100px auto;/*head 150+56 +24*/
  width: 100%;
  max-width: 1200px;

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

.gk-mainttlbg0{
  margin:0;
  width: calc(750vw / 12);
  max-width: 750px;
  height: calc(75vw / 12);
  max-height: 75px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 2px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../image/gk-ttlbg.webp");
}

.gk-mainttlbg{
  margin:min(calc(76vw / 12),76px) 0 0 0;
  width: calc(750vw / 12);
  max-width: 750px;
  height: calc(75vw / 12);
  max-height: 75px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 2px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../image/gk-ttlbg.webp");
}

.gk-mainbtn{
  position: relative;
  margin:36px auto 0 auto;
  width:235px;
  height:42px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 4px;
  background-color: #3f6ef6;

  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 2px;
  font-weight: 400;
}

.gk-mainbtn::before{
  position: absolute;
  content: ">";
  width: 6px;
  height: 10px;
  top:calc(50% - 17px);
  right: 10%;

  color: #fff;
  font-size: 1.2rem;
}

.more{

}

.more::before{
  position: absolute;
  content: "もっと見る";
  width:100%;
  height:auto;
  top:6px;
  left:72px;/*62px*/

  transition: .2s;
  -erbkit-transition: .2s;
}

/*
.more::after{
  position: absolute;
  content: "＞";
  width:12px;
  height:12px;
  transform: rotate(90deg);
  top:12px;
  right: 16px;
}*/

.on-click::before{
  position: absolute;
  content: "閉じる";
  width:100%;
  height:auto;
  top:6px;
  left:94px;/*90*/
  transition: .2s;
  -erbkit-transition: .2s;
}

/*
.on-click::after{
  position: absolute;
  content: "＞";
  width:12px;
  height:12px;
  transform: rotate(-90deg);
  top:16px;
  right: 24px;
}*/

.gk-ttlbg20{
  margin:0;
  width: calc(408vw / 12);
  max-width: 408px;
  height: calc(68vw / 12);
  max-height: 68px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 2px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../image/gk-ttlbg20.webp");
}

.gk-ttlbg2{
  margin:min(calc(68vw / 12),68px) 0 0 0;
  width: calc(408vw / 12);
  max-width: 408px;
  height: calc(68vw / 12);
  max-height: 68px;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 2px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../image/gk-ttlbg20.webp");
}

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

会員ページ
汎用　CSS
SP

*************************************************************/
@media(max-width:550px){
  .mainflm{
    margin: calc(48vw / 5) auto calc(62vw / 5) auto;/*140 + 48*/
    width: 100vw;
    max-width: initial;
  }

  .gk-mainttlbg0{
    margin:0;
    width: calc(421vw / 5);
    max-width:initial;
    height: calc(61vw / 5);
    max-height:initial;

    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;

    background-image: url("../image/gk-ttlbg_sp.webp");
  }

  .gk-mainttlbg{
    margin:calc(62vw / 5)0 0 0;
    width: calc(421vw / 5);
    max-width:initial;
    height: calc(61vw / 5);
    max-height:initial;

    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;

    background-image: url("../image/gk-ttlbg_sp.webp");
  }

  .gk-mainbtn{
    margin:calc(46vw / 5) auto 0 auto;
    width:calc(235vw / 5);
    height:calc(55vw / 5);
  
    font-size: 1.2rem;
    letter-spacing: 2px;
  }
  
  .gk-mainbtn::before{
    content: ">";
    width: calc(6vw / 5);
    height: calc(10vw / 5);
    top:calc(50% - 3.5vw);
    right: 10%;
  
    color: #fff;
    font-size: 1.2rem;
  }

  .more{

  }
  
  .more::before{
    position: absolute;
    content: "もっと見る";
    width:100%;
    height:auto;
    top:calc(12vw / 5);
    left:calc(64vw / 5);/*58*/
  
    transition: .2s;
    -erbkit-transition: .2s;
  }
  
  /*
  .more::after{
    position: absolute;
    content: "＞";
    width:12px;
    height:12px;
    transform: rotate(90deg);
    top:16px;
    right: 16px;
  }*/
  
  .on-click::before{
    position: absolute;
    content: "閉じる";
    width:100%;
    height:auto;
    top:calc(12vw / 5);
    left:calc(90vw / 5);/*36*/
    transition: .2s;
    -erbkit-transition: .2s;
  }
  
  /*
  .on-click::after{
    position: absolute;
    content: "＞";
    width:12px;
    height:12px;
    transform: rotate(-90deg);
    top:16px;
    right: 16px;
  }*/
  
  .gk-ttlbg20{
    margin:0;
    width: calc(350vw / 5);
    max-width:initial;
    height: calc(52vw / 5);
    max-height:initial;

    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;

    background-image: url("../image/gk-ttlbg20_sp.webp");
  }

  .gk-ttlbg2{
    margin:calc(52vw / 5)0 0 0;
    width: calc(350vw / 5);
    max-width:initial;
    height: calc(52vw / 5);
    max-height:initial;

    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;

    background-image: url("../image/gk-ttlbg20_sp.webp");
  }

}


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

contact
css
PC

********************************************************/
.gk-contactflm{
  margin:min(calc(24vw / 12),24px) 0 0 0;
  width:calc(1000vw / 12) ;
  max-width: 1000px;
  height:400px;
  padding: min(calc(28vw / 12),28px) min(calc(36vw / 12),36px);

  background-color: #fff;
}

.gk-contacttop0{
  margin:min(calc(40vw / 12),40px) 0 0 0;
}


.gk-point_text5{
  margin: 12px 0 0 0;
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.gk-formflx{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gk-regdit_email{
  margin:min(calc(24vw / 12),24px) 0 0 0;
  width:calc(750vw / 12) ;
  max-width: 750px;
  height: 32px;
  padding: 6px 12px;
}

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

contact
css
SP

********************************************************/
@media(max-width:550px){

  .gk-contactflm{
    margin:calc(24vw / 5) 0 0 0;
    width:calc(420vw / 5) ;
    max-width: initial;
    height:calc(354vw / 5);
    padding: calc(24vw / 5) calc(24vw / 5);
  }

  .gk-contacttop0{
    margin:calc(24vw / 5) 0 0 0;
  }

  .gk-regdit_email{
    margin:calc(24vw / 5) 0 0 0;
    width:calc(420vw / 5) ;
    max-width: initial;
    height: calc(32vw / 5);
    padding: calc(6vw / 5) calc(12vw / 5);
  }

}


















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


PC sp
rule privacyページ
css

************************************************************************/
  .bc-bl02bg{
    background-color: rgba(0,0,0,1);
    width:83.34vw;
    max-width: 1000px;
    padding:4% 0;
  }

  @media(max-width:550px){

    .bc-bl02bg{
      width:88vw;
      padding:4% 0;
    }

  }

  .rule{
    padding:40px 40px 40px 40px;
  }
  
  .rule h3 {
    color: #03A9F4;
    display: table;
    border-bottom: 2px #03A9F4 solid;
    margin: 1em 0;
    font-weight: 900;
  }
  
  .rule p {
    color: #fff;
  }
  
  ul li {
    margin: 1em 0;
    color: #fff;
  }
  
  ul li ul li {
    margin: 0.5em 0;
    position: relative;
    padding-left: 1em;
  }
  
  ul li ul li::before {
    content: "";
    position: absolute;
    width: 0.25em;
    height: 0.25em;
    background-color: #fff;
    top: 0.625em;
    left: 0.3em;
    border-radius: 100%;
  }
  
  ul.number {
    position: relative;
    padding-left: 1.5em;
  }
  
  ul.number span {
    position: absolute;
    top: auto;
    left: 0;
  }
  
  @media(max-width:550px){
    .rule{
      padding:6vw 3vw;
    }
  
  }
  
  
  /***********************************************************************
  
  boat cross css
  
  PC
  プライバシーページ
  css
  
  ************************************************************************/
  .document_out{
    padding:40px 40px 40px 40px;
  }
  
  @media(max-width:550px){
    .document_out{
      padding:6vw 3vw;
    }
  
  }
  
  
  .document h1 {
    text-align: center;
    font-weight: 900;
    font-size: 1.4em;
    letter-spacing: 0.2em;
    padding-left: 0.2em;
    margin: 1em 0;
    color: #fff;
  }
  
  .document p {
    color: #fff;
  }
  
  .document section>div {
    padding: 0 1em;
  }
  
  .document dl {
    margin: 1em 0;
  }
  
  .document dt {
    color: #fff;
    margin-bottom: 0.5em;
  
  }
  
  .document dd {
    padding-left: 1.5em;
    color: #fff;
  }
  
  .document dd>ul {}
  
  .document dd>ul li {
    margin: 0.5em 0;
    padding-left: 1em;
    position: relative;
  }
  
  .document dd>ul li::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 0.5em;
    height: 0.5em;
    background-color: #fff;
    left: 0;
    border-radius: 100%;
  }
  
  .document p {
    margin: 0.5em 0;
  }
  
  .outline_h1{
    font-size: 1.5rem;
  }
  
  
  @media(max-width:550px){
    .outline_h1{
      font-size: 1.1rem;
    }
  }