@charset "utf-8";
/* CSS Document */

img{max-width: 100%;}
h2 img{
  height: 40px;
}

/*-- 上書き --*/
.tss_footer{
  background-color:#FFFFFF;
}
.tss_footer a{
  color:#929292;
}

.spl_body{
  padding-bottom: 24px;
  background-image: url(../img/il_bg.png);
  background-position: center top;
  background-repeat: space;
  background-color: #45C0F0;
}

.spl_keyvisual{
  position: relative;
  max-width: 1100px;
  margin: auto;
}
.spl_nav{
  position: absolute;
  right: 0;
  bottom: 24px;
}
.spl_nav ul:first-of-type{
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  padding: 0.75em 48px;
  border-radius: 100vh;
  background: rgba(255,255,255,0.9);
  box-shadow: 0px 3px 30px rgba(0, 92, 162, 0.54);
}
.spl_nav ul:first-of-type li a{
  display: block;
  padding: 4px 0;
  max-width: 480px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.25em;
  color: #1E6C8A;
}
.spl_nav ul:last-of-type{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:0 8px;
}
.spl_nav ul:last-of-type li{max-width:40px;}
.spl_nav ul:last-of-type li a{display: block;}


.spl_notice{
  display: flex;
  align-items: flex-start;
  max-width: 1400px;
  margin: 0 auto;
  width: calc(100% - 32px);
}
.spl_noticevideo{
  position: relative;
  width: 62%;
  aspect-ratio: 16/9;
  padding:10px;
  background-color:#FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.spl_noticevideo img{
  width: 100%;
  object-fit: contain;
}
.spl_noticetxt{
  width: 40%;
  margin-left: -2%;
  margin-top: 32px;
  padding: 0;
  background-image: url(../img/il_notice_lftp.png), url(../img/il_notice_ribm.png);
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
  background-color: #FFFFFF;
  border: 3px solid #0f5976;
  box-shadow: 0px 3px 30px rgba(0, 92, 162, 0.54);
}
.spl_noticetxt div{
  padding: 10% 1%;
  background-image: url(../img/il_notice_deco.png), url(../img/il_notice_deco.png);
  background-position: center top, center bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: 12.5%;
}
.spl_noticetxt div p{
  line-height: 1.6;
  font-weight: bold;
  font-size: 1.12em;
}

.spl_noticetxt div p span{
  color:#157A16;
  display:block;
}

.spl_nextnoph .spl_noticetxt{
  width:100%;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

.spl_nextnoph .spl_noticetxt div{
  padding:6% 1%;
}



.spl_recruitment{
  max-width: 1200px;
  margin: 56px auto;
  padding: 44px 16px;
  background: url(../img/il_recbg.svg) center top;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.23);
}
.spl_recruitment h2{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 635px;
  max-height: 32px;
  margin: 0 auto 18px;
}
.spl_recruitment h2 p:nth-of-type(1) img,
.spl_recruitment h2 p:nth-of-type(3) img{
  height: 21px;
}
.spl_recruitment h2 p:nth-of-type(2){margin: 0 80px;}
.spl_recflx{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}
.spl_recruitment ul{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.spl_recruitment ul li{
  width: 300px;
  background-color: #FFFFFF;
}
.spl_recruitment ul li a{
  display: block;
  text-decoration: none;
}
.spl_recruitment ul li div{
  line-height: 1.5;
  padding: 7px 10px;
  font-size: 0.875rem;
  font-weight: bold;
  color: #000000;
}
.spl_persent{
  position: relative;
  width: 526px;
  height: 224px;
  padding: 8px 4px 4px 20px;
  border: 2px solid #FFFFFF;
  background: linear-gradient(#ffc400 0%, #fff384 100%);
}
.spl_persent::after{
  content: "";
  position: absolute;
  display: block;
  width: 202px;
  height: 166px;
  right: 7px;
  bottom: 12px;
  background-image: url(../img/il_present.png);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.spl_persent h3{
  margin-bottom: 18px;
  text-align: center;
}
.spl_persent div{width: 306px;}
.spl_persent div:nth-of-type(2){margin-top: 14px;}
.spl_persent div a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  border-radius: 32px;
  background-color: #FFFFFF;
}
.spl_persent div:first-of-type a{
  border: 2px solid #E0568F;
  box-shadow: 0px 3px 0px #E0568F;
}
.spl_persent div:nth-of-type(2) a{
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: bold;
  color: #000000;
  border: 2px solid #ED6E00;
  box-shadow: 0px 3px 0px #ED6E00;
}
.spl_persent div a picture{
  display: block;
  width: 100%;
  text-align: center;
}



.spl_videocontainer{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 56px auto;
}
.spl_videobox{
  position: relative;
  width: 48.3%;
}
.spl_videobox:nth-last-of-type(n+3){
  margin-bottom: 64px;
  text-align: center;
}
.spl_videobox h2{
  margin-bottom: 16px;
  margin-left: 16px;
  text-align: center;
}
.spl_videoslide{
  display: none;
  width: calc(100% - 32px);
  aspect-ratio: 16/9;
  margin: auto;
}
.slick-list.draggable{
  border: 10px solid #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.spl_videoslide.slick-initialized{display: block;}
.spl_videoslide p{
  overflow: hidden;
  position:relative;  
}
.spl_videoslide p img{
  width: 100%;
  height: 100%;
  transition: all 0.2s linear;
  aspect-ratio: 16 / 9;
}

.spl_mdlvideothumb{
  position:relative;
  aspect-ratio: 16/9;
  width: 100%;
  height:auto;
}

.spl_mdlvideobox img{
  display:block;
}

.spl_videoslide p::before,
.spl_mdlvideothumb::before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 4px solid #FFFFFF;
    width: 60px;
    height: 60px;
    z-index: 30;
    transition: transform .5s;
    pointer-events: none;
}

.spl_videoslide p::after,
.spl_mdlvideothumb::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-color: transparent transparent transparent #FFFFFF;
    border-width: 15px 0 15px 25px;
    z-index: 31;
    transition: opacity .5s;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
    pointer-events: none;
}

.spl_mdlvideothumb.spl_videoplayed::before,
.spl_mdlvideothumb.spl_videoplayed::after{
  display:none;
}

.spl_modalthumb .slick-slide{
  cursor:pointer;
}

.spl_videoslide.slick-dotted.slick-slider{margin-bottom: 68px;}
.spl_videoslide .slick-dots{
  text-align: right;
  padding-right: 234px;
  bottom: -53px;
}
.spl_videoslide .slick-dots li{margin: 0 12px;}
.spl_videoslide .slick-dots li button{
  width: 21px;
  height: 21px;
  border-radius: 100%;
  background-color: #0F5F7E;
  border: 2px solid #FFFFFF;
  filter: drop-shadow(0px 3px 0px #006A94);
}
.spl_videoslide .slick-dots li.slick-active button{background-color: #E62C22;}
.spl_videoslide .slick-dots li button:before{content: none;}

.slick-prev,
.slick-next{
  width: 46px;
  height: 49px;
}
.slick-prev{left: -16px;}
.slick-next{right: -16px;}
.slick-next:before,
.slick-prev:before{
  content: "";
  display: block;
  width: 46px;
  height: 49px;
}
.slick-next:before{background: url(../img/slidearw_next.svg);}
.slick-prev:before{background: url(../img/slidearw_preview.svg);}

.spl_more{
  position: absolute;
  right: 16px;
  bottom: 0;
}
.spl_more a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 210px;
  height: 50px;
  padding: 1px 32px 0;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: bold;
  color: #006A94;
  border-radius: 25px;
  background-color: #FFFFFF;
  border: 2px solid #000000;
  box-shadow: 0px 3px 0px #006A94;
}



.spl_actor{
  max-width: 1200px;
  margin: 0 auto 64px;
}
.spl_actor h2{
  margin-bottom: 32px;
  text-align: center;
}
.spl_actor ul{
  display: flex;
  justify-content: center;
  gap: 3%;
}
.spl_actor ul li{
  width: 272px;
  max-width: 29.3%;
  background: #FFFFFF;
}
.spl_actor ul li:nth-of-type(1) div{background-color: #FFF24B;}
.spl_actor ul li:nth-of-type(2) div{background-color: #A9EC5B;}
.spl_actor ul li:nth-of-type(3) div{background-color: #FF638D;}
.spl_actor ul li p{
  line-height: 1.6;
  padding: 22px 16px;
  font-size: 0.875em;
}



.spl_corner{
  max-width: 1400px;
  margin: 0 auto 56px;
  padding: 2% 0 3%;
  background: url(../img/il_cornerbg.svg) center center no-repeat;
  background-size: cover;
}
.spl_corner h2{
  display: flex;
  align-items: center;
  justify-content: center;
  margin:0 auto 2em;
}
.spl_corner h2::after,
.spl_corner h2::before{
  display: block;
  content: "";
  width: 100%;
  max-width: 152px;
  background: url("../img/il_notice_deco.png") center center no-repeat;
  margin: 0 1%;
}

.spl_corner ul{
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 3%;
  width: 88%;
  margin: auto;
}
.spl_corner ul li{width: 300px;}
.spl_corner ul li div{margin-bottom: 12px;}
.spl_corner ul li p{
  line-height: 1.5;
  font-size: 0.875rem;
  font-weight: bold;
}



.tss_sports_banner {
  display: flex;
  gap: 3%;
  justify-content: center;
  margin: 72px 0;
  padding: 0 16px;
}
.tss_sports_banner div{
  width: 240px;
}
.tss_sports_banner img{
 border-radius: 7px;
 aspect-ratio: calc(16 / 9);
}



.spl_modal{display: none;}
.spl_modalslider{margin-bottom: 24px;}
.spl_modalslider .slick-slide{
  width: 100%;
  aspect-ratio: 16/9;
}
.spl_modalslider img{
  width:100%;
  height: 100%;
}
.spl_modalslider iframe{
  width: 100%;
  height: 100%;
}
.spl_modalthumb .slick-track{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  width: 100% !important;
  transform: none !important;
}
.spl_modalthumb .slick-track:before,
.spl_modalthumb .slick-track:after{content: none;}
.spl_modalthumb p{
  width: 160px;
  aspect-ratio: 16/9;
}
.spl_modalthumb p.slick-current{border: 5px solid #E62C22;}
.spl_modalthumb p img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/*-- プレゼント追加 --*/
.spl_weekpresent{
  width:88%;
  max-width:720px;
  margin:auto;
  padding:24px 0;
}

.spl_weekpresent a{
  display:block;
  background-color:#FFFFFF;
}

.spl_weekpresent img{
  width:100%;
}





@media screen and (min-width:801px){
  .spl_nav ul:first-of-type li a:hover{color: #4EC24F;}
  .spl_nav ul:last-of-type li a:hover{opacity: 0.5;}

  .spl_persent div:first-of-type a:hover img{
    opacity: 0.5;
  }
  .spl_persent div:nth-of-type(2) a:hover{
    color: #ED6E00;
  }

  .spl_modalslider img:hover{cursor: pointer;}
  .spl_videoslide p:hover img{transform: scale(1.2);cursor:pointer;}
  .spl_videoslide .slick-dots li button:hover{background-color: #E62C22;}
  .spl_more a:hover{opacity: 0.5;}

  .spl_recruitment ul li a:hover{opacity: 0.5;}
  .spl_weekpresent a img:hover{opacity: 0.5;}


  .tss_gotop a:hover{opacity: 0.5;}
}






@media screen and (max-width:1400px){
  
}


@media screen and (max-width:1250px){
  .spl_nav{
    bottom: clamp(-3rem, -11rem + 16vw, 1.5rem);
    /* 800-1250 -48 - 24 */
    right: 0.5%;
}
  .modaal-container{max-width: 800px;}
}
@media screen and (max-width:1202px){/*デザイン依存*/
  .spl_recflx{flex-wrap: wrap;}
  .spl_recruitment ul{order: 2;}
  .spl_persent{order: 1;}
}
@media screen and (max-width:800px){
  .spl_body{
    padding-bottom: calc(17.5vw + 120px);
    background-size: 100% auto;
  }
  h2 img{
    height: clamp(1.5rem, 0.919rem + 2.16vw, 2rem);
    /* 24-32 430-800 */
  }
  .spl_nav{
    position: inherit;
    bottom: 0;
    /*bottom: clamp(-5.5rem, -8.405rem + 10.81vw, -3rem);*/
    /* 430-800 -88 - -48 */
}
  .spl_notice{
    display: block;
    margin-top: min(40px,29vw,108px);
  }
  .spl_noticevideo{
    width: calc(100% - 16px);
    margin: auto;
    padding: 2px;
  }
  .spl_noticetxt{
    width: calc(100% - 16px);
    margin: 0 auto;
    padding: 6px 10px;
    background-size: 10vw auto;
  }
  .spl_noticetxt div{
    padding: 3.5vw 16px;
    background-size: auto 2vw;
  }

  .spl_videocontainer{
    max-width: 640px;
    margin-top:40px;
  }
  .spl_videobox{width: 100%;}
  .spl_videobox:nth-last-of-type(n+2){margin-bottom: 64px;}
  .spl_videobox h2{text-align: center;}


  .spl_corner{padding: 2% 4%;}
  .spl_corner ul{
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .spl_corner ul li{width: 48%;}
  .spl_corner ul li:nth-last-of-type(n+3){margin-bottom: 40px;}
  .spl_corner ul li img{width: 100%;}
  .spl_recruitment h2 p:nth-of-type(2) {margin: 0 2vw;}
  .spl_recruitment ul{
    justify-content: center;
  }


  .modaal-container{max-width: calc(100vw - 50px);}
  .spl_modalthumb .slick-track{gap:8px 8px;}
  .spl_modalthumb p{width:22.5%;}
  .spl_modalthumb p img{height:auto;}
}
@media screen and (max-width:640px){/*デザイン依存の設定*/
  .spl_persent{
    max-width: 100%;
    height: auto;
    padding: 4.8vw 6.4vw;
  }
  .spl_persent h3{
    text-align: left;
  }
  .spl_persent h3 img{
    width: 40.53vw;
  }
  .spl_persent::after{
    width: 32vw;
    height: 26.13vw;
    right: 2.93vw;
    bottom: auto;
    top: -4.26vw;
  }
  .spl_persent div{
    width: 100%;
  }
  .spl_persent div:first-of-type a{
    height: 21.33vw;
    border-radius: 40vw;
  }
  .spl_persent div:first-of-type a img{
    width: 68%;
  }
  .spl_persent div:nth-of-type(2) a{
    height: 16vw;
    font-size: 4.26vw;
    border-radius: 30vw;
  }



  .spl_videoslide.slick-dotted.slick-slider{margin-bottom: 64px;}
  .spl_videoslide .slick-dots{
    text-align: center;
    padding-right: 0;
    bottom: -40px;
  }
  .spl_more{position: static;}
  .spl_more a{
    height: 44px;
    width: 170px;
    margin: auto;
  }
}
@media screen and (max-width:430px){
  .spl_nav ul:first-of-type{
    padding: 0.75em 0;
  }
  .spl_nav{
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
  }
  .spl_nav ul:first-of-type li a{
    padding: 4px 0;
    text-align: center;
    font-size:0.875em;
  }


  .spl_recruitment h2{
    justify-content: space-between;
    height: 16px;
    padding: 0 16px;
  }
  .spl_recruitment h2 p:nth-of-type(odd){height: 10px;}
  .spl_recruitment h2 p:nth-of-type(odd) img{
    height: 100%;
    vertical-align: top;
  }
  .spl_recruitment ul li{
    width: 100%;
  }
  .spl_recruitment ul li img{
    width: 100%;
  }


  .spl_noticetxt div p{
    font-size:0.875em;
  }


  h2 img{max-height: 30px;}


  .spl_actor{padding: 0 16px;}
  .spl_actor ul{
    flex-wrap: wrap;
    justify-content: center;
  }
  .spl_actor ul li{
    width: 100%;
    max-width: 340px;
  }
  .spl_actor ul li:nth-last-of-type(n+2){margin-bottom: 24px;}
  .spl_actor ul li div{
    height: 200px;
    text-align: center;
  }
  .spl_actor ul li div img{height: 200px;}


  .spl_corner{background-image: url(../img/il_cornerbg_sp.svg);}
  .spl_corner h2::after,
  .spl_corner h2::before{
    height: 12px;
    background-size: contain;
  }


  .modaal-inner-wrapper{padding: 64px 16px;}
  .modaal-content-container{padding: 24px 10px;}
  .modaal-container{max-width: calc(100vw - 32px);}

  .spl_modalslider{margin-bottom: 14px;}
  .spl_modalthumb .slick-track{
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 10px;
    gap: 12px 5%;
  }
  .spl_modalthumb p{width: 30%;}
}