.masked-image{
  position: relative;
  height: 100vh;
}

.masked-image__logo{
  position: absolute;
  top: 10px;
  right: 100px;
  color: #fff;
  z-index: 2000;
}

@media screen and (max-width:430px) {
  .masked-image__logo{
    right: 20px;
  }
  }

.masked-image img{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image1{
  z-index: 10;
}

.image2 {
  /* background-image: url('/images/car2.jpg');
  background-size: cover;
background-repeat: no-repeat; */
  /* -webkit-mask-image: radial-gradient(circle,black 50%,white 70%); */
  mask-image: radial-gradient(circle,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 30%);
  /* mask-size: 30%; */
  /* mask-size: cover; */
  mask-repeat: no-repeat;
  mask-position: center; 
  z-index: 100;
  transition: all 10s;
  mask-size: 0%;
}

.image2.active{
  /* mask-image: radial-gradient(circle,rgba(0,0,0,1) 100%,rgba(0,0,0,0) 110%); */
  
  mask-size: 1000%;
}

/* fv */
.fv{
  height: 100vh;
  position: relative;
  /* mask-image: none; */
  mask-image: url('../../images/fv_front.jpg');
}

.fv::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: .5;
  z-index: 10;
}

.fv__logo{
  position: absolute;
  top: 10px;
  right: 100px;
  color: #fff;
  z-index: 20;
}

@media screen and (max-width:430px) {
    .fv__logo{
      right: 20px;
    }
  }

.fv img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
object-fit: cover;
}

 .fv__back {
}

.fv__front{
  mask-image: radial-gradient(circle,rgba(0,0,0,1)10%,rgba(0,0,0,0)30%);
  z-index: 10;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 0%;
  transition: all 10s;
}

.fv__front.active {
  mask-size:1000%;
}

/* product */
.product{
padding-top: 120px;
padding-bottom: 120px;
background-color: #fff;
}

.product__heading{
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.product__list{
  display: flex;
  gap: 15px;
  margin-top: 60px;
}

  @media screen and (max-width:430px) {
    .product__list{
      flex-direction: column;
      height: 600px;
    }
  }

.product__item{
  flex-basis: 18%;
  height: 300px;
  transition: all 0.1s;
  position: relative;
  cursor: pointer;
}

  @media screen and (max-width:430px) {
    .product__item{
      height: 80px;
    }
  }

.product__item::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0, .5);
border-radius: 48px;
z-index: 10;
}

.product__item.scale{
  flex: 0 0 50%;
}

.circle-wrapper{
  display: flex;
  align-items: center;
  gap: 16px;
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 15;
}

.circle{
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: transparent;
}

.circle.hover{
border: 2px solid greenyellow;
}

.kuma{
  font-size: 24px;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: transform .3s;
}

.kuma.active{
  opacity: 1;
  transform: translateY(0)
}

.product__item img{
  width: 100%;
  height: 100%;
  border-radius: 48px;
  object-fit: cover;
}

/* blog */

.blog {
padding-top: 120px;
padding-bottom: 120px;
background-color: #000;
}

.blog__inner {

}

.inner {

}

.blog__heading.heading{
color: #fff;
}

.blog__container {
margin-top: 80px;
}

.blog__list {
display: flex;
gap: 35px;
align-items: flex-start;
flex-wrap: wrap;
}

  @media screen and (max-width:430px) {
    .blog__list{
      flex-direction: column;
      align-items: center;
    }
  }

.blog__item {
width: 31%;
aspect-ratio: 31/25;
border-radius: 8px;
display: flex;
flex-direction: column;
transition: all .3s;
position: relative;
overflow: hidden;
}

  @media screen and (max-width:430px) {
   .blog__item{
    width: 100%;
   } 
  }

.blog__item.active{
  aspect-ratio: 310/482;
  overflow: initial;
}

.card__image {
  border-radius: 0 ;
  transition: all .3s;
}

.card__image.active{
  position: absolute;
  top: -21.9512%;
  z-index: 5;
  
}

.card__image img{
  width: 100%;
  aspect-ratio: 31/18;
border-radius: 8px 8px 0 0;
}

.card__image.active img{
  transform: scale(.5);
  border-radius: 8px;
} 

.card__body {
height: 100%;
background-color: #fff;
/* padding:0 16px 20px; */
padding: 20px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
border-radius:0 0 8px;
overflow: hidden;
/* position: absolute; */
z-index: 1;
}

.card__body.active{
  border-radius: 8px;
}

.card__title {
  font-family: 'Noto sans JP';
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  /* margin-top: 200px; */
  transition: all .3s;
}

  @media screen and (max-width:430px) {
    .card__title{
      /* margin-top: 80.3703%; */
    }
  }

.card__title.active{
margin-top: 152px;
}

.card__title.red{
  color: red;
}

.card__title.blue{
  color: blue;
}

.card__title.green{
  color: yellowgreen;
}

.card__description {
margin-top: 20px;
display: -webkit-box;
-web-line-clamp:5;
/* opacity: 0;
visibility: hidden; */

}

/* .card__description.active{
  opacity: 1;
  visibility: visible;
} */

.card__button-wrapper{
  /* opacity: 0;
  visibility: hidden; */
  display: flex;
  justify-content: center;
}

/* .card__button-wrapper.active{
  opacity: 1;
  visibility: visible;
} */

.card__button {
margin-top: 20px;
display: inline-block;
border-radius: 16px;
background-color: greenyellow;
color: #fff;
padding: 12px 24px;
}

.blog__button-wrapper{
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.blog__button {
  width: 300px;
  height: 60px;
  padding: 10px 78px;
  line-height: 40px;
  color: #fff;
  text-align: center;
border: 2px solid #fff;
border-radius: 30px;
font-family: 'Orbitron';
}

.blog-modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
z-index: 9999;
background-color: #333;
height: 100%;
  display: none;
  margin-inline: auto;
}

.blog-modal.fade-in{
display: block;
}

/* scale */

.scaling {
padding-top: 120px;
padding-bottom: 120px;
background-color: #333;
}

.inner__scaling {
display: flex;
align-items: center;
justify-content: center;
}

.inner {

}

.scaling__container {
width: 400px;
height: 400px;
border-radius: 50%;
box-shadow:
  0 0 10px rgba(0, 255, 255, 0.5),   /* 一番内側 */
  0 0 20px rgba(0, 255, 255, 0.3),   /* 真ん中 */
  0 0 30px rgba(0, 255, 255, 0.2);   /* 一番外側 */
position: relative;
transition: all 1s ease 1s;
display: flex;
align-items: center;
justify-content: center;
transform: scaling(1);
}

  @media screen and (max-width:430px) {
    .scaling__container{
      width: 335px;
      height: 335px;
    }
  }
  
  .scaling__container.active {
    width: 100%;
    border-radius: initial;
    background-color:rgba(0, 255, 255, 0.5);
  }

  @media screen and (max-width:430px) {
    .scaling__container.active{
      height: 851px;
    }
  }

.scaling__circle{
  transition: transform 1s;
}

.scaling__container.active .scaling__circle{
  transform: scale(0) ;
transform-origin: 50%;
}

.scaling__logo {
width: 200px;
}

.scaling__logo img{
  width: 100%;
}

.scaling__name {
  font-size: 24px;
  color: #fff;
  text-align: center;
}

.profile__container {
  display: flex;
  gap: 100px;
  padding-inline: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
opacity: 0;
  transition: all 1s 1s;
}

  @media screen and (max-width:430px) {
   .profile__container{
    flex-direction: column;
    gap: 40px;
   } 
  }

.scaling__container.active .profile__container{
  width: 100%;
  opacity: 1;
}

@media screen and (max-width:430px) {
  .scaling__container.active .profile__container{
    padding-bottom: 48px;
  }
  }

.profile__body{
width: 70%;
}

  @media screen and (max-width:430px) {
    .profile__body{
      width: 100%;
    }
  }

.profile__name {
font-size: 32px;
color: red;
margin-top: 32px;
}

.profile__desc {
font-size: 18px;
color: #fff;
margin-top: 60px;
}

.profile__man {
flex: 1;
transition: transform 2s;
transform: rotate(180deg);
}

@media screen and (max-width:430px) {
    .profile__man {
      width: 100%;
    }
  }

.scaling__container.active .profile__man{
  transform: rotate(0deg);
}

.profile__man img{
  width: 100%;
}

/* change */

.change {
padding-top: 120px;
padding-bottom: 120px;
/* background-color: #313132; */
background-color: #fff;
}

.change__inner {

}

.inner {

}

.heading {

}

.change__heading.heading {
color: black;
}

.change__mode{
  margin-top: 80px;
  text-align: center;
}

.light-icon {
display: none;
color: #333;
font-size: 24px;
/* position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%); */
cursor: pointer;
}

.light-icon.active{
  display: block;
}

.moon-icon {
color: #fff;
font-size: 24px;
cursor: pointer;
}

.moon-icon.none{
  display: none;
}

.change__menu {
background-color: rgb(235, 229, 229);
width: 120px;
margin-inline: auto;
text-align: center;
display: none;
}

.change__menu.active{
  display: block;
}

.menu__list {
padding-top: 12px;
padding-bottom: 12px;
}

.menu__item {
color: #333;
position: relative;
cursor: pointer;
}

.menu__check{
display: block;
width: 8px;
height: 8px;
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%)  rotate(45deg);
border-bottom: 2px solid grey;
border-right: 2px solid grey;
display: none;
}

.menu__check.active{
  display: block;
}

.menu__item:not(:first-child){
  margin-top: 8px;
}

.change__alert {
width: 270px;
/* background-color: #F2F2F2; */
border-radius: 14px;
background-color: rgba(242, 242, 242,1);
margin-top: 40px;
margin-inline: auto;
}

.change__alert.dark{
  background-color: rgba(30, 30, 30,.75);
background-color: #6f6f70 ;
}

.alert {

}

.alert__upper {
border-radius: 14px 14px 0 0;
padding: 16px;
}

.alert__title {
font-size: 17px;
line-height: 22px;
color: #000;
}

.alert__text {
font-size: 13px;
line-height: 18px;
color: #000;
}

.alert__button-wrapper {
border-radius: 0 0 14px 14px;
border-top:1px solid #3C3C43;
display: flex;
}

.alert__button{
  width: 50%;
  color: #007AFF;
}

.alert__button:first-child {
border-right: 1px solid #3C3C43;
}

/* layer */
section h2 {
  font-size: 6rem;
  padding: 1rem;
}
section h2 span {
  font-size: 7rem;
}
.layer {
  margin-top: 0;
}
.layer .panel {
  height: 100vh;
  position: relative;
}
.layer .panel figure {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}
.layer .panel .title_desc {
  color: #000000;
  margin-left: auto;
  max-width: 40ch;
}
.layer .panel .title_desc h3 {
  font-size: 3rem;
  padding-top: 2rem;
}
.layer .panel .title_desc p {
  font-size: 1rem;
  padding-top: 1rem;
}
.layer .panel:first-of-type figure {
  background-image: url(../../images/soccer3.jpg);
}
.layer .panel:nth-of-type(2) figure {
  background-image: url(../../images/soccer.jpg);
}
.layer .panel:nth-of-type(3) figure {
  background-image: url(../../images/soccer2.jpg);
}
.layer .panel:nth-of-type(4) figure {
  background-image: url(../../images/soccer3.jpg);
}
.layer .panel:nth-of-type(odd) .title_desc {
  color: #ffffff;
  margin-left: 0;
  margin-right: auto;
  padding-left: 2rem;
}
.layer .panel:nth-of-type(even) {
  padding-right: 2rem;
}

/* parallax */

body {
  background-color: #212529;
  height: 600vh;
  width: 100vw;
}

.wrapper{
  overflow: hidden;
}

.parallax {
  border-radius: 8px;
  box-shadow: 0 0px 16px rgb(0, 0, 0, .16);
  position: absolute;
  aspect-ratio: 1 / 1;
}

.large {
  background-color: #62929E;
  width: 100px;
}

.medium {
  background-color: #B9314F;
  width: 75px;
}

.small {
  background-color: #DDB967;
  width: 50px;
}

@keyframes parallax-large-anim {
  from {
    transform: translateY(500px);
  }
  to {
    transform: translateY(0px);
  }
}

.large {
  animation: parallax-large-anim linear;
  animation-timeline: scroll();
}

.medium {
  background-color: #B9314F;
  width: 75px;
}

@keyframes parallax-small-anim {
  from {
    transform: translateY(-500px);
  }
  to {
    transform: translateY(0px);
  }
}

.small {
  animation: parallax-small-anim linear;
  animation-timeline: scroll();
}

.rellax.gold{
  background-color: gold;
  width: 100%;
  height: 60vh;
}
.rellax.gold img{
  height: 100%;
}
.rellax.red{
  background-color: red;
  width: 100%;
  height: 60vh;
}
.rellax.green{
  background-color: lime;
  width: 100%;
  height: 60vh;
}


/* scroll-magic */

.scroll-magic {
padding-top: 120px;
padding-bottom: 120px;
background-color: aqua;
}

.scroll-magic__inner {

}

.inner {

}


.scroll-magic__container.magic {
  position: relative;
  margin-top: 60px;
}

.scrollAmount{
  display: none;
}

.magic__circle{
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid #fff;
  position: absolute;
  
}

  @media screen and (max-width:430px) {
    .magic__list {
    width: 100%;
    }
  }
  
  .magic__item {
    display: flex;
    gap: 30px;
    position: relative;
    transform-origin: left;
    transition: transform .3s
  }

  
  .magic__item.active{
  transform: scale(2) translateX(80px);
}

@media screen and (max-width:430px) {
   .magic__item.active{
  transform: scale(1.8) translateX(0px);
} 
  }

.magic__item:not(:first-child){
  margin-top: 60px;
}

.magic__number {
  color: #000;
  width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
display:flex;
justify-content: center;
align-items: center;
}

.magic__text {
  align-self: flex-start;
background-color: #fff;
color: #000;
padding: 8px 20px;
position: relative;
width: 30%;
}

@media screen and (max-width:430px) {
  .magic__text {
  width: 40%;
  }
}

.magic__text::after{
content: '';
width: 20px;
height: 20px;
border-right: 10px solid #fff;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
top: 50%;
left: -20px;
transform: translateY(-50%);
} 

/* para */

.para{
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #fff;
  position: relative;
z-index: -20;
}

  @media screen and (max-width:700px) {
   .para{
    padding-top: 60px;
    padding-bottom: 60px;
   } 
  }

.image{
  width: 80%;
  height: 50vh;
  padding-inline: 20px;
  margin-inline: auto;
  position: relative;
}

  @media screen and (max-width:700px) {
    .image{
      width: 100%;
      margin-inline: initial;
    }
  }

.image figure{
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.image figure.venz{
  background-image: url(../../images/car2.jpg) ;
}
.image figure.sea{
  background-image: url(../../images/sea.jpg) ;
}
.image figure.mountain{
  background-image: url(../../images/mountain.jpg) ;
}
.image figure.camp{
  background-image: url(../../images/camp.jpg) ;
}

.para__description{
  padding-top: 40px;
  color: #fff;
}

.para__title{
font-size: 32px;
}

.para__text{
  margin-top: 24px;
}

/* SNS */

.sns {
padding-top: 120px;
padding-bottom: 120px;
background-color: #ddd;
}

.sns__inner {

}

.inner {

}

.sns__caution{
  font-size: 20px;
  padding:16px 32px;
  font-weight: bold;
}

.sns__wrapper {
margin-top: 60px;
}

.sns__list {
width: 40%;
margin-inline: auto;
}

  @media screen and (max-width:700px) {
    .sns__list{
      width: 100%;
    }
  }

.sns__item {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
position: relative;
cursor: pointer;
filter: blur(10px);
}

.sns__item.active{
  filter: blur(0);
}

.sns__item:not(:first-child){
  margin-top: 10px;
}

.sns__image{
  width: 20%;
}

.sns__item img{
width: 100%;
aspect-ratio: 1/1;
}

.sns__name {
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}

.sns__number {
font-size: 32px;
font-weight: bold;
position: absolute;
right: -10px;
transition: all .3s;
opacity: 0;
}

.sns__number.active{
right: 10px;
opacity: 1;
}

/* parallax second */

.parallax.second {
width: 100%;
padding-top: 120px;
padding-bottom: 1200px;
background-color: silver;
}

.second__resize.resize {
margin-top: 200px;
}

.resize__image {
width: 30%;
margin-inline: auto;
}

  @media screen and (max-width:430px) {
    .resize__image{
      width: 100%;
    }
  }

.resize__image img{
  width: 100%;
  aspect-ratio: 3/4;
}

.second__rotate.rotate {
margin-top: 300px;
}

.rotate__flex{
  display: flex;
justify-content: center;
gap: 80px;
  width: 90%;
}

.rotate__image.bakuten {
width: 25%;
}

.rotate__image.bakuten img{
  width: 100%;
  aspect-ratio: 1/1;
}

.rotate__image.ball{
  width: 25%;
}

.rotate__image.ball img{
  width: 100%;
  aspect-ratio: 1/1;

}


/* 共通 */

.inner{
  max-width: 1040px;
  padding-inline: 20px;
  margin-inline: auto;
}

.heading{
  font-family: 'Noto sans JP';
  font-weight: bold;
  color: #000;
  font-size: 32px;
  line-height: 46px;
  text-align: center;
}