@charset "UTF-8";
/* 
// common
// onsp onpc
// title
// link
// text
// button
// scrollArrow
// modal
// cookie notice
*/


/*
// onsp onpc
*/

.onsp{
  display: none;
}

@media screen and (max-width:767px){
  .onpc{
    display: none;
  }
  
  .onsp{
    display: block;
  }
}



/*
// title
*/


.contents__title{
  align-items: center;
  background: var(--color-gray);
  border-radius: 2.5rem;
  color:#fff;
  display: flex;
  font-size:2.5rem;
  font-weight: 500;
  height: 5rem;
  justify-content: center;
  line-height: 1.35;
  margin: 0 auto 3.5rem;
  min-width: 30rem;
  padding: 0 1em;
  width: fit-content;
}

.contents__title--yellow{
  background: var(--color-yellow);
  color:#000;
}

.contents__title--white{
  background: #fff;
  color:#000;
}

@media screen and (max-width:767px){
  .contents__title{
    border-radius: 3.6rem;
    font-size:3.5rem;
    height: 7.2rem;
    margin: 0 auto 2.5rem;
    min-width: 43.2rem;
  }
}


.item__title--border{
  position: relative;
}

.item__title--border:before{
  background: var(--color-black);
  content:'';
  height: 0.1rem;
  left:0;
  position: absolute;
  top:50%;
  width: 100%;
  z-index: -1;
}
@media screen and (max-width:767px){
  .item__title--border:before{
    background: #666;
    height: 0.2rem;
  }
}

.item__title--border h2,
.item__title--border h3{
  background: #fff;
  font-size:2.6rem;
  font-weight: 700;
  margin: auto;
  padding: 0 0.5em;
  text-align: center;
  width: fit-content;
}

@media screen and (max-width:767px){
  .item__title--border h2,
  .item__title--border h3{
    font-size:3.3rem;
  }
}



/*
// link
*/

.link--arrow{
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.link--arrow span{
  align-items: center;
  display: flex;
}

.link--arrow span:after{
  border-bottom: 0.4em solid transparent;
  border-left: 0.6em solid var(--color-black);
  border-right: 0.6em solid transparent;
  border-top: 0.4em solid transparent;
  content: '';
  margin: 0 0 0 0.5em;
  height: 0.8em;
  width: 0.8em;
}

.link--arrow:hover span:after{
  border-left: 0.6em solid var(--color-yellow);
}

.link--arrow:before,
.link--arrow:after{
  background-color: #000;
  content: '';
  height: 0.2rem;
  position: absolute;
  z-index: -1;
}

.link--arrow:before {
  bottom: 0.14em;
  left: 0;
  transition: width ease 0.4s;
  width: 0%;
}
 
.link--arrow:after {
  bottom: 0.14em;
  left: 0;
  transition: all ease 0.6s;
  width: calc(100% + 0.6em - 1em);
}

.link--arrow:hover:before {
  width: calc(100% + 0.6em - 1em);
}
    
.link--arrow:hover:after {
  left: calc(100% + 0.6em - 1em);    
  transition: all ease 0.2s;
  width: 0%;
}

.link--arrow_anchorLink span:after{
  border-bottom: 0.6em solid transparent;
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  border-top: 0.6em solid var(--color-black);
  margin: 0.5em 0 0 0.2em;
}

.link--arrow_anchorLink:hover span:after{
  border-left: 0.4em solid transparent;
  border-top: 0.6em solid var(--color-yellow);
}

.link--arrow_anchorLink:after {
  width: calc(100%);
}

.link--arrow_anchorLink:hover:before {
  width: calc(100%);
}

.link--open-in-new-window:after{
  background: url(../images/common/icon--link--open-in-new-window.svg) no-repeat center center/100% auto;
  content: '';
  display: inline-block;
  margin: 0 0 0 0.2em;
  height: 0.8em;
  width: 0.8em;
}


.common-btn .link--open-in-new-window:after{
  background: url(../images/common/icon--link--open-in-new-window--white.svg) no-repeat center center/100% auto;
}

.common-btn:hover .link--open-in-new-window:after{
  background: url(../images/common/icon--link--open-in-new-window.svg) no-repeat center center/100% auto;
}

.more-btn .link--open-in-new-window:after{
  height: 0.65em;
  width: 0.65em;
}

.more-btn:hover .link--open-in-new-window:after{
  background: url(../images/common/icon--link--open-in-new-window--white.svg) no-repeat center center/100% auto;
  height: 0.65em;
  width: 0.65em;
}

@media screen and (max-width:767px){
  .more-btn .link--open-in-new-window:after{
    margin: 0.2em 0 0 0.2em
  }
}


/*
// text
*/
.text--marker_yellow{
  background: linear-gradient(-180deg,#fff000,#fff000) no-repeat bottom left;
  background-size: 0% 40%;
  display: inline;
  font-weight: 700;
  opacity: 1 !important;
  transition: all 1s ease-in-out;
  transition-delay: 2s;
}

.text--marker_yellow--thin{
  background: linear-gradient(-180deg,#fff000,#fff000) no-repeat bottom 0.2em left;
  background-size: 0% 20%;
}

/*
// button
*/

.common-btn{
  align-items: center;
  background: #000;
  border-radius: 3.4rem;
  color:#fff;
  display: flex;
  font-size:2.1rem;
  font-weight: 500;
  height: 6.8rem;
  justify-content: center;
  line-height: 1;
  margin: 0 auto 2rem;
  padding: 0 0 0 4.5rem;
  position: relative;
  transition: .2s;
  width: 40.8rem;
  z-index: 2;
}

.common-btn:hover{
  background: #fff;
  border:0.2rem solid #000;
  color:#000;
  transform: scale(1.05);
  transform-origin: center;
}

.common-btn:after{
  background: url("../images/common/arrow--common-btn--white--pc.svg") no-repeat center left 0/100% auto;
  content:'';
  height: 1.42rem;
  margin: 0 0 0 1rem;
  width: 4rem;
}

.common-btn:hover:after{
  background: url("../images/common/arrow--common-btn--black--pc.svg") no-repeat center left 0/100% auto;
  animation:arrow--common-btn .9s linear infinite;
}

@keyframes arrow--common-btn{
  0%{
    background-position: center left -4rem;
  }
  
  100%{
    background-position: center left 0;
  }
}

.common-btn--bg_yellow{
  background: var(--color-yellow);
  color: var(--color-black);
}

.common-btn--bg_yellow:after{
  background: url("../images/common/arrow--common-btn--black--pc.svg") no-repeat center left 0/100% auto;
}

@media screen and (max-width:767px){
  .common-btn{
    border-radius: 5.5rem;
    font-size:3.4rem;
    height: 12rem;
    margin: 0 auto 4rem;
    padding: 0 0 0 5.5rem;
    width: 62rem;
  }

  .common-btn:after{
    background: url("../images/common/arrow--common-btn--white--sp.svg") no-repeat center left 0/100% auto;
    height: 2.13rem;
    margin: 0 0 1rem 2.5rem;
    width: 6rem;
  }

  .common-btn:hover:after{
    background: url("../images/common/arrow--common-btn--black--sp.svg") no-repeat center left 0/100% auto;
  }
  
  .common-btn--bg_yellow:after{
    background: url("../images/common/arrow--common-btn--black--sp.svg") no-repeat center left 0/100% auto;
  }
}


.more-btn{
  border: 0.1rem solid #666;
  color:#000;
  font-size: 1.6rem;
  height: 5.12rem;
  overflow: hidden;
  position: relative;
  transition-duration: .3s;
  transition-delay: .3s;
  width: 19.2rem;
}

.more-btn span{
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  line-height: 1;
  position: relative;
  width: 100%;
}

.more-btn span:before{
  background: url("../images/common/arrow--more-btn.svg") no-repeat center center/100% auto; 
  content:'';
  height: 0.8rem;
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6947rem;
}

.more-btn:before,
.more-btn:after{
  border-left: 0.1rem solid #666;
  border-right: 0.1rem solid #666;
  content:'';
  height: 120%;
  position: absolute;
  top:0;
  transform: skewX(-15deg);
  transition: .3s;
  width: 100%;
}

.more-btn:before{
  left: -100%;
}

.more-btn:after{
  right: -100%;
}

.more-btn:hover{
  background: #000;
  border: 0.1rem solid #666;
  color:#fff;
}

.more-btn:hover span:before{
  animation:arrow--more-btn .9s linear infinite;
  background: url("../images/common/arrow--more-btn--hover.svg") no-repeat center center/100% auto;  
}

@keyframes arrow--more-btn{
  0%{
    opacity: 0;
    right: 3rem;
  }
  
  50%{
    opacity: 1;
    right: 2.5rem;
  }

  100%{
    opacity: 1;
    right: 2rem;
  }
}

.more-btn:hover:before,
.more-btn:hover:after{
  background: #000;
  border-left: 0.1rem solid #666;
  border-right: 0.1rem solid #666;
}

.more-btn:hover:before{
  left: 100%;
}

.more-btn:hover:after{
  right: 100%;
}

@media screen and (max-width:767px){
  .more-btn{
    font-size: 2.97rem;
    height: 9.50437rem;
    width: 35.64138rem;
  }
  
  .more-btn span:before{
    height: 1.61062rem;
    right: 5rem;
    width: 1.28959rem;
  }
}



.btn--anim_shiny{
  overflow: hidden;
  position:relative;
  transition:.2s;
}

.btn--anim_shiny:hover{
  box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,0.02);
  transform:scale(1.03);
  transform-origin: center;
}

.btn--anim_shiny:before{
  animation:btn--shiny 5s ease-out .8s infinite;
  background-image: repeating-linear-gradient(45deg,transparent, rgba(255,171,254,0.5) 25%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.5) 75%, rgba(255,171,254,0.5) 75%, rgba(255,139,254,0.8)), repeating-linear-gradient(45deg,transparent, rgba(255,171,254,0.5) 25%, rgba(255,255,255,0.5) 25%, rgba(255,255,255,0.5) 75%, rgba(255,171,254,0.5) 75%, rgba(255,139,254,0.8)),radial-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0));
  background-position: 0 0, 0.8rem 0.8rem, 0 0;
  background-size: 1.6rem 1.6rem;
  content:'';
  height: 100%;
  position: absolute;
  opacity: 0;
  width: 100%;
}

.btn--anim_shiny:after{
  animation:btn--shiny_light 5s ease-out .2s infinite;
  background:linear-gradient(-30deg,transparent 40%,rgba(255,255,255,1) 40%, rgba(255,255,255,0));
  content:'';
  height: 100%;
  position: absolute;
  left:-80%;
  opacity: 0.5;
  width: 100%;
}

@keyframes btn--shiny{
  0%{
    opacity:0;
  }
  
  75%{
    opacity:0;
  }
  
  80%{
    background-position: 0 0, 0.8rem 0.8rem, 0 0;
    opacity:0.1;
  }
  
  85%{
    background-position: 0.8rem 0.8rem, 0 0, 0 0;
    opacity:0.1;
  }
  
  90%{
    opacity:0;
  }
}


@keyframes btn--shiny_light{
  0%{
    left:-80%;
  }
  
  92%{
    left:-80%;
  }
  
  95%{
    left:-20%;
  }
  
  100%{
    left:80%;
  }
}



/*
// scrollArrow
*/

@keyframes scrollArrow {
  0% {
    background-position: center top -7.077rem;
  }
  
  50% {
    background-position: center top 0;
  }
}

@keyframes scrollArrow--sp {
  0% {
    background-position: center top -7.726rem;
  }
  
  50% {
    background-position: center top 0;
  }
}



/*
// modal
*/

.common-modal--wrap{
  align-items: center;
  background: rgba(255,255,255,0.65);
  display: flex;
  height: 100vh;
  justify-content: center;
  left:0;
  opacity: 0;
  position: fixed;
  top:0;
  transition: .5s;
  visibility: hidden;
  width: 100%;
}

.common-modal--wrap.active{
  opacity: 1;
  visibility: visible;
  z-index: 2;
}


.common-modal{
  background: rgba(26,26,26,0.85);
  color: #fff;
  height: calc(100vh - 9.6rem - 8vh);
  margin: 3rem 0 0;
  max-height: 65rem;
  padding: 9rem 5.5rem 5.5rem;
  position: relative;
  text-align: center;
  width: 100rem;
}

.common-modal--inner{
  height:100%; 
  overflow-y: scroll;
  scrollbar-width: thin; /* scrollbar for firefox */
  scrollbar-color: var(--color-yellow) #666; /* scrollbar for firefox */
  width: 100%;
}

.common-modal--inner::-webkit-scrollbar{
  background: #fff;
  width: 1px;
}

.common-modal--inner::-webkit-scrollbar-track{
  background: #fff;
  width: 1px;
}

.common-modal--inner::-webkit-scrollbar-thumb{
  background: var(--color-yellow);
}

.common-modal__close-btn{
  align-items: center;
  display: flex;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

.common-modal__close-btn__text{
  color: #fff;
  font-size:2.034rem;
  font-weight: 300;
}

.common-modal__close-btn__icon{
  transform: rotate(45deg) translate(5%,10%);
  width: 3.04153rem;
}

.common-modal__close-btn__icon span{
  background: #fff;
  display: block;
  height: 0.1rem;
  width: 100%;
}

.common-modal__close-btn__icon span:nth-child(2){
  transform: rotate(90deg) translateX(-2%);
  transform-origin: center;
}

.common-modal__heading{
  font-size:3.5rem;
  font-weight:500;
  line-height: 1.35;
  margin: 0 0 5rem;
}

.common-modal__description{
  font-size: 2rem;
}


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

  .common-modal--wrap{

  }

  .common-modal{
    height: 80vh;
    margin: 0;
    max-height: none;
    padding: 9rem 2vw 5.5rem;
    width: 94vw;
  }

  .common-modal--inner{
    max-height: none;
    padding: 0 6vw;
    width: 100%;
  }

  .common-modal__close-btn{
    align-items: center;
    display: flex;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
  }

  .common-modal__close-btn__text{
    color: #fff;
    font-size:2.034rem;
    font-weight: 300;
  }

  .common-modal__close-btn__icon{
    transform: rotate(45deg) translate(5%,10%);
    width: 3.04153rem;
  }

  .common-modal__close-btn__icon span{
    background: #fff;
    display: block;
    height: 0.1rem;
    width: 100%;
  }

  .common-modal__close-btn__icon span:nth-child(2){
    transform: rotate(90deg) translateX(-2%);
    transform-origin: center;
  }

  .common-modal__heading{
    font-size:3.6rem;
    font-weight:500;
    line-height: 1.35;
    margin: 0 0 5rem;
  }

  .common-modal__description{
    font-size: 2.6rem;
  }
}



/*
// cookie notice
*/
#cookie-notice #cn-accept-cookie.footer_cookie_confirm_btn{
  background-color: #fff000;
  border-radius: 0.2em;
  color: #000;
  padding: 0.2em 0.5em;
}

#cookie-notice #cn-more-info.footer_cookie_confirm_btn{
  color:#fff;
  text-decoration: underline;
}