body{
  width: 100%;
}

.fv {
background-image: url(../../images/fv_water-pc.png),url(../../images/fv_image1.png);
background-size: contain ,cover;
background-repeat: no-repeat,no-repeat;
background-position: right center, center;
width: 100%;
padding-top: 82px;
padding-bottom: 81px;
padding-inline: 80px;
position: relative;
}

@media screen and (max-width:844px) {
 .fv{
  background-image: url(../../images/fv_water-sp.png),url(../../images/fv_image1.png);
  background-position: center,center;
  padding-top: 40px;
  padding-inline: 20px;
  padding-bottom: 48px;
 } 
}

.fv__body {
width: 58.3875%;
}

@media screen and (max-width:844px) {
 .fv__body{
  width: 335px;
  height: auto;
 } 
}

.fv__logo {
width: 425px;
height: 30px;
margin-top: 38px;
}

.fv__logo img{
  width: 100%;
}

@media screen and (max-width:844px) {
  .fv__logo{
    display: none;
  }
}

.fv__logo_sp{
  width: 335px;
  height: 23.56px;
  position: absolute;

  display: none;
}

@media screen and (max-width:844px) {
  .fv__logo_sp {
    display: block;
  }
}

.fv__contents{
display: flex;
gap: 52.64px;
height: 737px;
max-width: 1440px;
margin-inline: auto;
}

@media screen and (max-width:844px) {
  .fv__contents{
    flex-direction: column-reverse;
    gap: 0;
    height: auto;
    margin-top: 23.56px;
  }
}

.fv__catch {
margin-top: 152px;
display: flex;
justify-content: center;
position: relative;
}

.fv__catch img:first-child{
  width: 75.3318%;
  aspect-ratio: 563/268;
  opacity: .6;
}

.fv__catch img:last-child{
  width: 100%;
  aspect-ratio: 747.36/119;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media screen and (max-width:844px) {
  .fv__catch{
    margin-top: initial;
  }
  .fv__catch img:first-child{
    width: 250.36px;
    height: 124px; 
    margin-left: 1px;
  }
  .fv__catch img:last-child{
    width: 335px;
    height: 53.28px;
  }
}

.fv__description {
font-family: 'Noto Sans JP';
font-weight: 500;
font-size: 24px;
letter-spacing: .1em;
color: #fff;
margin-top: 24px;
text-shadow: 0 0 8px #020066;
}

@media screen and (max-width:844px) {
 .fv__description{
  font-size: 18px;
  letter-spacing: .09em;
  margin-top: 16px;
  line-height: 1.45;
 } 
}

.fv__image {
width: 33.90625%;
height: 100%;
align-self: center;
isolation: isolate;
}

.fv__image img{
width: 100%;
height: auto;
aspect-ratio: 434/737;
mix-blend-mode: multiply;
}

@media screen and (max-width:844px) {
 .fv__image{
  width: 48.3582%;
  height: 292px;
  margin-top: 52px;
 } 
 .fv__image img{
  height: auto;
  aspect-ratio: 162/275;
 }
}

/* model-viewer */

model-viewer {
  display: block;
  width: 102%; 
  height: 100.3%;
  aspect-ratio: 434/737;
  transform: rotate(17deg);
}

@media screen and (max-width:844px) {
 model-viewer{
  aspect-ratio: 162/275;
 }
}

/* header */

.header {
padding-top: 60px;
padding-bottom: 60px;
background-color: #1E1E1E;
}

  @media screen and (max-width:430px) {
   .header{
    padding-top: 40px;
    padding-bottom: initial;
   } 
  }

.header__inner.inner {
display: flex;
justify-content: space-between;
align-items: center;
}

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

.header__logo{
width: 425px;
height: 30px;
}

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

.header__logo img{
  width: 100%;
}

.header__list {
display: flex;
justify-content: space-between;
}

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

.header__item:not(:first-child) {
margin-left: 58px;
}

@media screen and (max-width:430px) {
  .header__item:not(:first-child) {
  margin-left: initial;
  }
  }

.header__link {
  font-family: 'Orbitron';
  font-weight: 400;
  font-size:18px;
  letter-spacing: .1em;
  line-height: 1;
  color: #fff;
}

  @media screen and (max-width:430px) {
    .header__link{
      letter-spacing: initial;
    }
  }

/* product */

.product {
padding-top: 120px;
padding-bottom: 60px;
background-size: 1440px 1147px;
background-repeat: no-repeat;
background-position:top center;
position: relative;
z-index: 1;
background-color: #000;
}

@media screen and (max-width:900px) {
  .product{
    padding-top: 60px;
    padding-bottom: 29px;
    background-size: 375px 679px;
  }
}

.product.red{
  background-color: red;
}

.product::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .8);
z-index: -1;
}

.product__contents {
display: flex;
justify-content: space-between;
}

@media screen and (max-width:430px) {
  .product__contents{
    gap: 17px;
  }
}

.product__name {
  height: auto;
}

.product__logo {
  width: 48px;
  height: 680px;
  position: sticky;
  top: 120px;
}

@media screen and (max-width:900px) {
 .product__logo{
  width: 26px;
  height: 368.33px;
  top: 60px;
 } 
}

.product__items{
  width: 91.4%;
}

@media screen and (max-width:900px) {
  .product__items{
  width: 87.2686%;
} 
}

.product__body{

display: flex;
justify-content: space-between;
padding-bottom: 60px;
}

@media screen and (max-width:430px) {
 .product__body{
  padding-bottom: 30px;
  height: auto !important;
 } 
}

.product__body.purple{
  background-color: rgb(79, 36, 220);
}

.product__body:not(:first-child){
  padding-top: 60px;
}

@media screen and (max-width:900px) {
.product__body:not(:first-child){
  padding-top: 30px;
}
}

.product__logo img{
  width: 100%;
  height: 100%;
}

.product__title{
  transition: all .3s;
}

.product__title.product__title_text_mixed {
  background-image:linear-gradient(to bottom,#128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
}

.product__title.product__title_text_green {
  background-image:linear-gradient(to bottom,#03B10F 0%,#3CFFB9 51%,#E7F91B 100%);
}

.product__title.product__title_text_hot{
  background-image:linear-gradient(to bottom,#B00202 0%,#FF8A00 51%,#E83A54 100%);
}

.product__title.active{
opacity: 1;
}

.product__detail {
width: 70.3%;
position: relative;

}

@media screen and (max-width:900px) {
 .product__detail{
  width: 83.0449%;
 } 
}

.product__detail img:nth-of-type(1){
position: absolute;
top: 0;
left: 0;
aspect-ratio: 642/340;
width: 100%;
margin-inline: auto;
z-index: 1;
opacity: .8;
}

@media screen and (max-width:900px) {
 .product__detail img:nth-of-type(1) {
  aspect-ratio: 240/127;
 }
}

.product__detail img:nth-of-type(2){
  aspect-ratio: 199/540;
  width: 30.9968%;
  margin-inline: auto;
  position: absolute;
  top: 88px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
}

@media screen and (max-width:900px) {
 .product__detail img:nth-of-type(2) {
  aspect-ratio: 70/189;
  width: 29.1666%;
  top: 36px;
}
}

.product__detail_title{
  font-family: 'Noto sans JP';
  font-weight: 500;
  font-size:42px;
  letter-spacing: .1em;
  line-height: 39px;
  color: #fff;
  text-align: center;
  margin-top: 106%;
}

@media screen and (max-width:430px) {
 .product__detail_title{
  font-size: 26px;
  letter-spacing: .08em;
  margin-top: 246px;
  margin-inline: auto;
  width: 83.0833%;
 }
}

.product__detail_title.short{
  letter-spacing: .02em;
}

.product__description {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:24px;
  letter-spacing: .1em;
  line-height: 1.5;
  color: #fff;
  margin-top: 36px;
}

@media screen and (max-width:900px) {
  .product__description{
    font-size: 18px;
    letter-spacing: .1em;
    margin-top: 9px;
  }
}

.product__categories {
display: flex;
justify-content: space-between;
gap: 42px;
margin-top: 53px;
}

@media screen and (max-width:900px) {
 .product__categories{
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
 } 
}

@media screen and (max-width:900px) {
  .product__category:not(:first-child){
    align-items: center;
  }
}

.product__category.product__category_mixed {
  background-image:linear-gradient(to right,#128FCD,#B3D6E0 49%,#DC24B1 100%);
}

.product__category.product__category_green {
  background-image:linear-gradient(to right,#03B10F,#3CFFB9  49%,#E7F91B 100%);
}

.product__category.product__category_hot {
  background-image:linear-gradient(to right,#B00202,#FF8A00 49%,#E83A54 100%);
}

/* current */

.current {
padding-top: 40px;
padding-bottom: 120px;
background-color: #F5F5F5;
}

@media screen and (max-width:430px) {
  .current{
    padding-top: 32px;
    padding-bottom: 60px;
  }
}

.current__title-wrapper{
  display: flex;
  width: 100%;
  overflow: hidden;
}

.current__title {
  font-family: 'Orbitron';
  font-weight: 600;
  font-size:140px;
  letter-spacing: .2em;
  line-height: 1.2571;
  color: #F5F5F5;
  position: relative;
  background: linear-gradient(90deg, #118FCD 0%,#FA75E0 100%);
  -webkit-text-stroke: 4px transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #F5F5F5;
  text-align: center;
  white-space: nowrap;
  width: 108.1944%;
  margin-inline: auto;
  animation: transform 4s infinite linear .2s both;
}

@keyframes transform{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-100%);
  }
}

@media screen and (max-width:430px) {
 .current__title{
  font-size: 70px;
  width: 207.7333%;
  line-height: 1.2571;
 } 
}

.current__sub_title {
font-family: 'Noto sans JP';
font-weight: 600;
font-size:32px;
letter-spacing: .1em;
line-height: 1.4375;
-webkit-text-fill-color: #000000;
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
}

@media screen and (max-width:430px) {
 .current__sub_title{
  font-size: 22px;
  line-height: 1.4545;
  top: 50%;
  transform: translateY(-50%);
 } 
}

.current__contents {
border-radius: 16px;
box-shadow: 0 0 30px rgba(0, 0, 0, .1);
background-color: #FFFFFF;
display: flex;
overflow: hidden;
margin-top: 30px;
}

@media screen and (max-width:900px) {
 .current__contents{
  width: 80%;
  margin-inline: auto;
  flex-direction: column-reverse;
  margin-top: 12px;
 } 
}

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

.current__grasp {
  width: 50%;
  background-color: #FFFFFF;
  padding: 51.5px;
}

@media screen and (max-width:900px) {
 .current__grasp{
  width: 100%;
  padding: 20px;
 } 
}

.current__item{
  display: flex;
  gap: 20px;
  align-items: center;
}

@media screen and (max-width:900px) {
 .current__item{
  gap: initial;
  justify-content: space-between;
 } 
}

.current__item:not(:first-child) {
margin-top: 28px;
}

@media screen and (max-width:430px) {
 .current__item:not(:first-child){
  margin-top: 20px;
 } 
}

.current__schedule {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1.45;
  color: #000000;
  text-shadow: 0 0 10px #02006610;
  margin-bottom: 1px;
}

@media screen and (max-width:430px) {
 .current__schedule{
  font-size: 18px;
  line-height: 1.4444;
  margin-bottom: initial;
 } 
}

.current__button {
width: 50px;
height: 30px;
background-color: #D9D9D9;
border-radius: 16px;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, .1);
padding: 4px;
transition: background-color .3s;
cursor: pointer;
}

@media screen and (max-width:430px) {
 .current__button{
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, .25);
 } 
}

.current__button.current__button_b {
width: 50px;
height: 30px;
background-color: #FF0000;
border-radius: 16px;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, .1);
padding: 4px;
}

@media screen and (max-width:430px) {
 .current__button.current__button_b{
  border-radius: 15px;
 } 
}

.current__button::after{
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: block;
}

.current__button.current__button_b::after{
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: block;
  margin-left: auto;
}

.current__image{
  display: flex;
  width: 50%;
  background-image: linear-gradient(#128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
  padding-top: 20px;
  position: relative;
}

@media screen and (max-width:900px) {
 .current__image{
  width: 100%;
  padding-top: 24px;
 }
}

.current__image-wrapper {
width: 122px;
margin-top: auto;
margin-inline: auto;
}

@media screen and (max-width:430px) {
 .current__image-wrapper{
  width: 96px;
 } 
}

.current__image-wrapper img{
width: 100%;
aspect-ratio: 122/287;
}

@media screen and (max-width:430px) {
  .current__image-wrapper img{
    aspect-ratio: 96/227;
  }
}

.current__message{
background-color: #FFFFFF;
border-radius: 50%;
width: 117px;
height: 117px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
opacity: 0;
transition: opacity .3s;
}

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

.current__message.fade-in{
  opacity: 1;
}

.current__message::after{
content: '';
width: 17px;
height: 17px;
background-color: #FFFFFF;
border-radius: 50%;
position: absolute;
}

.current__message:nth-child(1):after{
  right: 3px;
  bottom: 8px;
}

@media screen and (max-width:430px) {
 .current__message:nth-child(1):after{
  right: 2.5px;
  bottom: 6px;
 } 
}

.current__message:nth-child(2):after{
  left: 3px;
  bottom:6px;
}

@media screen and (max-width:430px) {
  .current__message:nth-child(2):after{
    left: 2px;
    bottom: 7px;
  }
}

.current__message:nth-child(3):after{
  top: 8px;
  right: 3px;
}

@media screen and (max-width:430px) {
 .current__message:nth-child(3):after{
  top: 8px;
  right: 2px;
 } 
}

.current__message:nth-child(4):after{
top: 8px;
left: 3px;
}

@media screen and (max-width:430px) {
 .current__message:nth-child(4):after{
  top: 8px;
  left: 2px;
 } 
}

.current__message:nth-child(1){
  top: 20px;
  left: 40px;
}

@media screen and (max-width:430px) {
.current__message:nth-child(1){
top: 22px;
left: 18px;
}
}

.current__message:nth-child(2){
top: 20px;
right: 40px;
}

@media screen and (max-width:430px) {
  .current__message:nth-child(2){
  top: 22px;
  right: 18px;
  }
  }

.current__message:nth-child(3){
left: 40px;
bottom: 20px;
}

@media screen and (max-width:430px) {
  .current__message:nth-child(3){
  left: 18px;
  bottom: 22px;
  }
  }

.current__message:nth-child(4){
right: 40px;
bottom: 20px;
}

@media screen and (max-width:430px) {
  .current__message:nth-child(4){
  right: 18px;
  bottom: 22px;
  }
  }

.current__message p{
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:14px;
  line-height: 1.42857;
  color: #000000;
}

.current__message:nth-child(2) p{
margin-right: 1.5px;
margin-top: 4px;
}

.current__message:nth-child(3) p{
margin-left: 8.5px;
}

.current__message:nth-child(4) p{
margin-left: 3.5px;
}


.current__message:nth-child(4) p,
.current__message:nth-child(5) p{
  line-height: 1.21428;
}

@media screen and (max-width:430px) {
  .current__message p{
    margin-top: 5px;
    font-size: 12px;
  }
  }

  /* ba_section */

  .ba__section.ba {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #FFFFFF;
  }

  @media screen and (max-width:430px) {
  .ba__section.ba{
    padding-top: 60px;
    padding-bottom: 60px;
  }
  }
  
  .ba__title.heading {
    font-family: 'Noto sans JP';
    font-weight: 600;
    font-size:32px;
    letter-spacing: .1em;
    line-height: 1.4375;
    color: #000000;
    text-align: center;
  }

  @media screen and (max-width:430px) {
    .ba__title.heading{
      font-size: 22px;
      line-height: 1.4545;
      letter-spacing: 0.1em;
    }
  }
  
  .ba__images {
    aspect-ratio: 100/42;
    margin-top: 80px;
    position: relative;
  }

  @media screen and (max-width:430px) {
  .ba__images{
    width: 100%;
    aspect-ratio: 335/196;
    margin-top: 40px;
    }
  }

  /* arrow */
  .ba__arrow-wrapper.arrow {
    width: 54px;
    height: 100%;
    position: absolute;
    /* left: 50%; */
    left: 355px;
    /* transform: translateX(-50%); */
    z-index: 9;
  }

  .arrow__bar {
  width: 6px;
  height: 100%;
  background-color: #FFFFFF;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

@media screen and (max-width:430px) {
  .arrow__bar{
    width: 2px;
    }
  }

.arrow__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 15;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #FFFFFF;
  }

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

  .arrow__arrow::before{
    content: '';
    border: 9px solid #303030;
    border-top: 9px solid transparent;
    border-left: 9px solid transparent;
    border-bottom: 9px solid transparent;
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translate(-50%,-50%);
  }

  @media screen and (max-width:430px) {
   .arrow__arrow::before{
     border: 5px solid #303030;
     border-top: 5px solid transparent;
     border-left: 5px solid transparent;
     border-bottom: 5px solid transparent;
     left: 8px;
   } 
  }
  
  .arrow__arrow::after{
    content: '';
    border: 9px solid #303030;
    border-top: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid transparent;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
  }

    @media screen and (max-width:430px) {
     .arrow__arrow::after{
       border: 5px solid #303030;
       border-top: 5px solid transparent;
       border-right: 5px solid transparent;
       border-bottom: 5px solid transparent;
       right: 4px;
     } 
    }
  
  .ba__image_before,
  .ba__image_after {
  position: absolute;
  width: 100%;
  overflow: hidden;
  }

  .ba__image_before{
    z-index: 1;
  }

  .ba__image_after{
    z-index: 5;
  clip-path: inset(0 0 0 382px);

  }

  .ba__image_before img,
  .ba__image_after img{
    aspect-ratio: 100/42;
    border-radius: 16px;
  }

  @media screen and (max-width:430px) {
    .ba__image_before img,
  .ba__image_after img{
    aspect-ratio: 335/196;
  }
  }

  .ba__status {
    font-family: 'Orbitron';
    font-weight: 600;
    font-size:40px;
    letter-spacing: .1em;
    line-height: 1.25;
    position: absolute;
  }

  @media screen and (max-width:430px) {
    .ba__status{
      font-size: 20px;
      line-height: 1.25;
    }
  }

  .ba__before.ba__status{
    color: #FFFFFF;
    top: 20px;
    left: 20px;
    z-index: 1;
  }

  @media screen and (max-width:430px) {
  .ba__before.ba__status{
    top: 16px;
    left: 16px;
  }
  }
  
  .ba__after.ba__status {
  background-image:linear-gradient(to bottom,#128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  top: 20px;
  right: 15px;
  z-index: 5;
  }

  @media screen and (max-width:430px) {
    .ba__after.ba__status{
      top: 16px;
      right: 16px;
    }
  }
  
  .ba__caution {
    font-family: 'Noto sans JP';
    font-weight: 500;
    font-size:16px;
    letter-spacing: .1em;
    line-height: 1.4375;
    color: #000000;
    text-align: center;
    margin-top: 28px;
  }

  @media screen and (max-width:430px) {
    .ba__caution{
      font-size: 12px;
      line-height: 1.4166;
      text-align: left;
      margin-top: 16px;
    }
  }
  
  .ba__description {
    background-image:linear-gradient(to bottom,#128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
    padding: 34px 75px;
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    border-radius: 16px;
  }

  @media screen and (max-width:600px) {
    .ba__description{
      padding: 24px;
      flex-direction: column;
      gap: 24.91px;
      margin-top: 32px;
    }
  }
  
  .ba__description_image {
  width: 34.12%;
  position: relative;
}

@media screen and (max-width:600px) {
 .ba__description_image{
  width: 89.9094%;
  height: 172.09px;
  margin-inline: auto;
 } 
}

.ba__description_image img:nth-child(1){
  width: 100%;
  aspect-ratio: 290/138;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  }

  @media screen and (max-width:600px) {
  .ba__description_image img:nth-child(1){
    aspect-ratio: 258/122;
    margin-top: 3px;
    left: initial;
  }
  }

  .ba__description_image img:nth-child(2){
    width: 40.5517%;
    aspect-ratio: 106/180;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 7.2px;
  }

  @media screen and (max-width:600px) {
    .ba__description_image img:nth-child(2){
      width: 26.2769%;
    }
  
  }

  @media screen and (max-width:430px) {
    .ba__description_image img:nth-child(2){
      width: 40.2769%;
      aspect-ratio: 94/160;
      top: 0;
      right: 5px;
      transform: rotate(3deg);
    }
  
  }
  
  .ba__description_body {
    text-align: left;
    width: 58.2413%;
  }
  
  @media screen and (max-width:600px) {
    .ba__description_body {
      width: 100%;
    }
  }
  
  .ba__description_text {
    font-family: 'Noto sans JP';
    font-weight: 600;
    font-size:24px;
    letter-spacing: .1em;
    line-height: 1.45833;
    color: #FFFFFF;
    white-space: nowrap;
  }  

  @media screen and (max-width:430px) {
    .ba__description_text{
      font-size: 20px;
      line-height: 1.45;
      letter-spacing: .1em;
      text-align: center;
    }
  }

  .ba__description_text:not(:first-child){
    margin-top: 16px;
  }

  @media screen and (max-width:430px) {
    .ba__description_text:not(:first-child){
      margin-top: 20px;
    }
  }

/* .introduce */

.introduce {
padding-top: 120px;
padding-bottom: 114px;
background-color: #000000;
}

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

.introduce__inner.inner {
margin-top: 100px;
}

@media screen and (max-width:430px) {
  .introduce__inner.inner{
    margin-top: 40px;
  }  
}

.introduce__title {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:32px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #FFFFFF;
  text-align: center;
}

@media screen and (max-width:430px) {
  .introduce__title{
    font-size: 22px;
    line-height: 1.4545;
  }
}

.introduce__swiper {
  margin-top: 80px;
  display: flex;
  max-width: 1480px;
  margin-inline: auto;
}

@media screen and (max-width:430px) {
  .introduce__swiper{
    margin-top: 40px;
    aspect-ratio: 375/258;
  }  
}

.introduce__swiper-wrapper{
  width: 33.3333%;
  overflow: hidden;
position: relative;
height: fit-content;
aspect-ratio: 480/330;
display: flex;
}

  @media screen and (max-width:780px) {
    .introduce__swiper-wrapper{
      width: 100%;
      display: none;
    }
    .introduce__swiper-wrapper:nth-child(2),
    .introduce__swiper-wrapper:nth-child(3){
      display: none;
    }
  }
  
  .introduce__swiper-wrapper.sp{
    display: none;
  }

  @media screen and (max-width:780px) {
    .introduce__swiper-wrapper.sp{
      width: 100%;
      display: block;
    }
  }

.introduce__swiper-slide{
position: absolute;
top: 0;
height: auto;

}

.introduce__swiper-slide1 {
  animation: slide1 8s  infinite;
  left: 0;
  z-index: 2;
}

.introduce__swiper-slide2 {
  animation: slide2 8s infinite;
  left: 100%;
  z-index: 30;
  width: 100%;
  height: auto;
}

@keyframes slide1{
0%{
transform: translateX(0);
z-index: 2;
}
16%{
  transform: translateX(0);
  z-index: 2;
  
}
50%{
  transform: translateX(100%);
  z-index: 2;
}
66%{
  transform: translateX(0%);
  z-index: 200
}
100%{
  transform: translateX(0);
  z-index: 100;
}
}
@keyframes slide2{
0%{
transform: translateX(0);
}
16%{
  transform: translateX(-100%);
}
50%{
  transform: translateX(-100%);
}
66%{
transform: translateX(-100%);
}
100%{
  transform: translateX(0%);
}
}

.introduce__swiper-slide_sp{
  width: 100%;
  position: absolute;
  top: 0;
}

.swiper-slide_sp1{
  left: 0;
  z-index: 2;
  animation: slide-sp1 8s infinite;
}
.swiper-slide_sp2{
  left: 100%;
  z-index: 5;
  animation: slide-sp2 8s infinite;
}
.swiper-slide_sp3{
  left:200%;
  z-index: 10;
  animation: slide-sp3 8s infinite;
}
.swiper-slide_sp4{
  left: 300%;
  z-index: 15;
  animation: slide-sp4 8s infinite;
}
.swiper-slide_sp5{
  left: 400%;
  z-index: 20;
  animation: slide-sp5 8s infinite;
}
.swiper-slide_sp6{
  left: 500%;
  z-index: 25;
  animation: slide-sp6 8s infinite;
}

@keyframes slide-sp1{
0%{
transform: translateX(0);
z-index: 2;
}
14.3%{
  transform: translateX(0);
  z-index: 2;
}
28.6%{
  transform: translateX(500%);
}
42.9%{
transform: translateX(400%);
}
57.2%{
  transform: translateX(300%);
}
71.5%{
  transform: translateX(200%);
}
85.8%{
  transform: translateX(100%);
  z-index: 100;
}
100%{
  transform: translateX(0);
  z-index: 100;
}
}
@keyframes slide-sp2{
  0%{
transform: translateX(0);
}
14.2%{
  transform: translateX(-100%);
  z-index: 5;
}
28.4%{
  transform: translateX(-100%);
  z-index: 5;
}
42.6%{
transform: translateX(400%);
}
56.8%{
  transform: translateX(300%);
}
71%{
  transform: translateX(200%);
}
85.2%{
  transform: translateX(100%);
}
100%{
  transform: translateX(0);
}
}
@keyframes slide-sp3{
0%{
transform: translateX(0);
}
14.2%{
  transform: translateX(-100%);
}
28.4%{
  transform: translateX(-200%);
}
42.6%{
transform: translateX(-200%);
}
56.8%{
  transform: translateX(300%);
}
71%{
  transform: translateX(200%);
}
85.2%{
  transform: translateX(100%);
}
100%{
  transform: translateX(0);
}
}
@keyframes slide-sp4{
0%{
transform: translateX(0);
}
14.2%{
  transform: translateX(-100%);
}
28.4%{
  transform: translateX(-200%);
}
42.6%{
transform: translateX(-300%);
}
56.8%{
  transform: translateX(-300%);
}
71%{
  transform: translateX(200%);
}
85.2%{
  transform: translateX(100%);
}
100%{
  transform: translateX(0);
}
}
@keyframes slide-sp5{
0%{
transform: translateX(0);
}
14.2%{
  transform: translateX(-100%);
}
28.4%{
  transform: translateX(-200%);
}
42.6%{
transform: translateX(-300%);
}
56.8%{
  transform: translateX(-400%);
}
71%{
  transform: translateX(-400%);
}
85.2%{
  transform: translateX(100%);
}
100%{
  transform: translateX(0);
}
}

@keyframes slide-sp6{
0%{
transform: translateX(0);
}
14.2%{
  transform: translateX(-100%);
}
28.4%{
  transform: translateX(-200%);
}
42.6%{
transform: translateX(-300%);
}
56.8%{
  transform: translateX(-400%);
}
71%{
  transform: translateX(-500%);
  z-index: 25;
}
85.2%{
  transform: translateX(-500%);
  z-index: 1;
}
100%{
  transform: translateX(-500%);
  z-index: 25;
}
}

  @media screen and (max-width:780px) {
    .introduce__swiper-wrapper.sp img{
      aspect-ratio: 375/258;
    }
  }

.introduce__list {
display: flex;
justify-content: space-between;
}

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

.introduce__item.drink {
width: 29%;
display: flex;
flex-direction: column;
}

@media screen and (max-width:600px) {
  .introduce__item.drink{
    width: 100%;
  }  
  .introduce__item.drink:not(:first-child){
    margin-top: 48px;
  }
}

.drink__images {
display: flex;
justify-content: space-between;
}

@media screen and (max-width:600px) {
  .drink__images{
    padding-inline: 23px;
  }  
}

.drink__title {
  font-family: 'Orbitron';
  font-weight: 400;
  font-size:37px;
  letter-spacing: .1em;
  line-height: 1.1;
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
  display: inline-block;
}

.drink__title.mixed{
  background-image:linear-gradient(to right,#128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
}
.drink__title.green{
  background-image:linear-gradient(to right,#03B10F 0%,#3CFFB9 49%,#E7F91B 100%);
}
.drink__title.hot{
  background-image:linear-gradient(to right,#B00202 0%,#FF8A00 49%,#E83A54 100%);
}

.drink__selling_place {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:14px;
  letter-spacing: .1em;
  line-height: 1.7857;
  color: #FFFFFF;
  margin-top: 23px;
}

@media screen and (max-width:430px) {
  .drink__selling_place{
    line-height: 1;
    margin-top: 26px;
  }  
}


.drink__capacity {
  font-family: 'Orbitron';
  font-weight: 400;
  font-size:24px;
  letter-spacing: .1em;
  line-height: 1.6666;
  color: #FFFFFF;
  margin-top: 10px;
}

@media screen and (max-width:430px) {
  .drink__capacity{
    margin-top: 16px;
  }  
}


.drink__image {
width: 27.5862%;
}

.drink__image img{
  aspect-ratio: 80/217;
  width: 100%;
}

.drink__description{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-grow: 1;
}

.drink__name {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1;
  color: #FFFFFF;
  margin-top: 45px;
}

@media screen and (max-width:430px) {
  .drink__name{
    font-size: 14px;
    margin-top: 29px;
  }  
}

.drink__text {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:16px;
  letter-spacing: .099em;
  line-height: 1.55;
  color: #FFFFFF;
  margin-top: 19px;
  padding-bottom: 22px;
  border-bottom: 1px solid #FFFFFF;
  flex-grow: 1;
}

@media screen and (max-width:430px) {
  .drink__text{
    font-size: 14px;
    line-height: 1.6;
  }  
}

@media screen and (max-width:430px) {
  .drink__wrapper{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    align-items: flex-end;
  } 
}

.drink__dars {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:14px;
  letter-spacing: .1em;
  line-height: 1;
  color: #FFFFFF;
  margin-top: 25px;
}

@media screen and (max-width:430px) {
.drink__dars{
  margin-top: initial;
}  
}


.drink__price {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:24px;
  letter-spacing: .1em;
  line-height: 1.45833;
  color: #FFFFFF;
  margin-top: 6px;
}

@media screen and (max-width:430px) {
.drink__price{
line-height: 1;
}  
}


.drink__price span{
font-family: 'Noto sans JP';
font-weight: 600;
font-size:14px;
letter-spacing: .1em;
line-height: 1.45833;
color: #FFFFFF;
margin-left: -2px;
}

/* gallery */

.gallery {
  position: relative;
}

.gallery__main-image {
position: absolute;
top: 89px;
right: 379.71px;
width: 32.7645%;
height: 76.6918%;
z-index: 100;
}

@media screen and (max-width:430px) {
 .gallery__main-image{
  width: 85.1626%;
  height: 42.6622%;
  top: 190px;
  left: 62px;
 } 
}

.gallery__main-image img{
width: 100%;
height: 100%;
}

  @media screen and (max-width:430px) {
.gallery__main-image img{
  width: 87%;
}
  }

.gallery__catch-copy {
position: absolute;
right: 73px;
bottom: 97.58px;
width: 41.1805%;
z-index: 100;
}

@media screen and (max-width:430px) {
 .gallery__catch-copy{
  right: 28px;
  bottom: 374.15px;
  width: 85.1626%;
 } 
}

.gallery__catch-copy img{
  width: 100%;
  aspect-ratio: 593/94.42;
}

.gallery__grid.grid {
  display: flex;
}

@media screen and (max-width:430px) {
  .gallery__grid.grid{
    flex-direction: column;
  }
}

.gallery__left-images{
  width: 62.0138%;
  height: 100%;
}

@media screen and (max-width:430px) {
  .gallery__left-images{
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
  }
}

.gallery__small-images{
  display: flex;
  height: 41.8604%;
}

.grid__item{
  position: relative;
  background-color: #0085FF;
}

.grid__item img{
  height: 100%;
}

.grid__item.board{
  width: 53.7523%;
  height: 100%;
  position: relative;
}

.grid__image_surface {
  position: absolute;
  top: 0;
  left: 0;
z-index: 10;
-webkit-transition: all 2s ease;
transition: all 2s ease;  
clip-path: circle(0px at 50% 50%);  
}

.surface-board.add-circle{
  clip-path: circle(33.4444% at 46.44583% 50%);  
}

@media screen and (max-width:430px) {
  .surface-board.add-circle{
    clip-path: circle(31.9444% at 48.8636% 46.3888%);  
  }
}

.surface-mountain.add-circle{
  clip-path: circle(25.6666% at 48.3946% 66.3888%);  
}

@media screen and (max-width:430px) {
  .surface-mountain.add-circle{
    clip-path: circle(48.5px at 51.2903% 64.7222%);  
  }
}

.surface-athlete.add-circle{
  clip-path: circle(30.4% at 49.496% 48.2%);  
}

@media screen and (max-width:430px) {
  .surface-athlete.add-circle{
    clip-path: circle(31% at 59.4666% 52%);  
  }
}

.surface-singer.add-circle{
  clip-path: circle(34.4883% at 44.7897% 35.9302%);  
}

@media screen and (max-width:430px) {
  .surface-singer.add-circle{
    clip-path: circle(36.25% at 42.4332% 41.3023%);  
  }
}

.grid__image_back {
mix-blend-mode: difference;
z-index: 1;
}

@media screen and (max-width:430px) {
  .grid__item.board{
    width: 58.6666%;
  }
}

.grid__item.board img{
aspect-ratio: 4/3;
object-fit: cover;
}

@media screen and (max-width:430px) {
 .grid__item.board img{
  aspect-ratio: 22/18;
 } 
}

.grid__item.mountain{
  width: 46.2486%;
  height: 100%;
}

@media screen and (max-width:430px) {
  .grid__item.mountain{
    width: 41.3333%;
  }
}

.grid__item.mountain img{
aspect-ratio: 413/360;
object-fit: cover;
}

@media screen and (max-width:430px) {
  .grid__item.mountain img{
    aspect-ratio: 155/180;
  }
}

.grid__item.singer{
  width: 37.9861%;
  height: 100%;
}

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

.grid__item.singer img{
aspect-ratio: 547/860;
object-fit: cover;
}

@media screen and (max-width:430px) {
 .grid__item.singer img{
  aspect-ratio: 375/400;
 } 
}

.grid__item.athlete{
height: 58.1396%;
}

.grid__item.athlete img{
  aspect-ratio: 893/500;
  width: 100%;

  object-fit: cover;
}

@media screen and (max-width:430px) {
 .grid__item.athlete img{
  aspect-ratio: 375/250;
 } 
}

.gallery_grid.grid img{
object-fit: cover;
}

/* store */

.store {
padding-top: 120px;
padding-bottom: 120px;
background-color: #f5f5f5;
}

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

@media screen and (max-width:430px) {
  .store__inner.inner{
    padding-inline: 0;
  }
}

.store__title.heading {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:32px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #000000;
  text-align: center;
}

@media screen and (max-width:430px) {
 .store__title.heading{
  font-size: 22px;
  line-height: 1.4545;
 } 
}

.store__container {
background-color:#FFFFFF;
margin-top: 80px;
padding: 40px;
}

@media screen and (max-width:430px) {
  .store__container{
    margin-top: 40px;
    padding-top: 40px;
    padding-inline: 20px;
    padding-bottom: 40px;
  }
}

.store__information {
display: flex;
justify-content: space-between;
height: 488px;
}

@media screen and (max-width:900px) {
 .store__information{
  flex-direction: column-reverse;
  height: auto;
 } 
}

.store__card.card {
width: 41.9565%;
border-radius: 16px;
}

@media screen and (max-width:900px) {
 .store__card.card{
  width: 100%;
  margin-top: 40px;
 } 
}

.swiper {
  border-radius: 16px   16px 0 0;
}

.swiper-slide img{
  border-radius: 16px 16px 0 0; 
}

  @media screen and (max-width:430px) {
.swiper-slide img{
  aspect-ratio: 335/200;
}
  }

.swiper-button-prev,
.swiper-button-next {
text-rendering: initial;
width: 36px;
height: 36px;
background-color: #000000;
position: absolute;
}

.swiper-button-prev img,
.swiper-button-next img{
width: 10px;
height: 20px; 
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
}

.swiper-button-prev{
  left: 0;
}
.swiper-button-next{
right: 0;
}

.swiper-button-next:after{
content: '';
}

.swiper-button-prev:after{
content: '';
}

.card__body {
background-color: #E5E5E5;
padding: 20px;
padding-top: 18px;
border-radius: 0 0 16px 16px;
}

@media screen and (max-width:430px) {
 .card__body{
  padding: 16px;
  padding-top: 14px;

 } 
}

.card__title {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1;
  color: #000000;
}

.card__sub-title{
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1;
  color: #000000;
  margin-top: 8px;
}

.card__address {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size:14px;
  letter-spacing: .1em;
  line-height: 1.7;
  color: #000000;
  margin-top: 14px;
}

@media screen and (max-width:430px) {
 .card__address{
  font-size: 14px;
  margin-top: 8px;
  } 
}

.card__phone {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size:14px;
  letter-spacing: .1em;
  line-height: 1;
  color: #000000;
  margin-top: 11px;
}

@media screen and (max-width:430px) {
  .card__phone{
    margin-top: 7px;
  }
}

.card__url {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size:14px;
  letter-spacing: .1em;
  line-height: 1;
  color: #000000;
  margin-top: 15px;
}

@media screen and (max-width:430px) {
 .card__url{
  margin-top: 13px;
 } 
}

.card__url span{
  color: #00B2FF;
}

.card__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1;
  color: #FFFFFF;
  width: 100%;
  height: 46px;
  padding-inline: 28px;
  margin-top: 17px;
  background-image: linear-gradient(to right ,  #128FCD 0%, #B3D6E0 51% ,#DC24B1 100%);
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
}


@media screen and (max-width:1100px) {
  .card__button{
    padding-right: 9px;
    padding-left: 5px;
  }
}

@media screen and (max-width:900px) {
 .card__button{
  width: 100%;
  margin-top: 14px;
  display: flex;
  justify-content: center;
 } 
}

@media screen and (max-width:430px) {
 .card__button{
  justify-content:space-between;
 } 
}

.card__button div{
 width: 19px;
}

.card__button img{
  width: 100%;
  aspect-ratio: 14/18;
}

@media screen and (max-width:900px) {
 .card__button img{
  aspect-ratio: 13/18;
 } 
}

.map__goal{
  width: 52.0652%;
  display: none;
  flex-direction: column;
}

  @media screen and (max-width:900px) {
    .map__goal{
      width: 100%;
      margin-top: 25px;
    }
  }

.map__goal.active{
  display: block;
}

.map.no{
  display: none;
}

.map__google{
width: 100%;
height: 84%;
}

.map__distance{
background-color: #E5E5E5;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 68px;
height: 16%;
}

.map__text{
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:18px;
  letter-spacing: .1em;
  line-height: 1;
  color: #000000;
  white-space: nowrap;
}

.store__map.map {
width: 49.8315%;
position: relative;
}


@media screen and (max-width:900px) {
 .store__map.map{
  aspect-ratio: 458.45/488;
  margin-right: auto;
  margin-left: auto;
  width: fit-content;
 } 
}

@media screen and (max-width:600px) {
 .store__map.map{
  width: 95.5522%;
  height: 341.29px;
  margin-right: initial;
  aspect-ratio: 320.63/341.29;
 } 
}

@media screen and (max-width:430px) {
 .store__map.map{
  aspect-ratio:initial;
 } 
}

  @media screen and (max-width:600px) {
    .store__map.map svg{
    width: 100%;
    height: auto;
    }
  }


.store__map.map >img{
  width: 100%;
}

.map__can_images {
position: absolute;
top: 64px;
left: -20.55px;
width: 52.5313%;
}

@media screen and (max-width:430px) {
 .map__can_images{
  top: 43.76px;
  left: -14.63px;  
 } 
}

.map__logo {
width: 100%;
}

.map__logo  img{
  aspect-ratio: 240.83/17;
}

@media screen and (max-width:430px) {
 .map__logo img{
  aspect-ratio: 168.43/11.89;
 } 
}

.map__cans {
display: flex;
justify-content: space-between;
width: 64.7759%;
margin-top: 26px;
margin-inline: auto;
}

@media screen and (max-width:430px) {
 .map__cans{
  width: 64.7746%;
  margin-top: 18.18px;
 } 
}

.map__region{
  position: absolute;
}

.map__region svg{
  cursor: pointer;
  width: 100%;
}

.map__region  path{
  fill: #D2DFD5;
}

.map__region path.hover {
  fill: #DBFF00;
  cursor: pointer;
}

.hokkaido{
  width: 39.0325%;
  top: 0px;
  right: 14px;
}

@media screen and (max-width:600px) {
  .hokkaido{
top: -31px;
  }
}

@media screen and (max-width:460px) {
  .hokkaido{
    width: 33.0256%;
    top: 0;
    right: 19px;
  }
}

.map__region.tohoku{
width: 15.8157%;
top: 28.2194%;
right: 26.4728%;
}

.map__region.hokuriku{
  width: 24.2522%;
  top: 48.2199%;
  right: 38.312%;
}

.map__region.kanto{
width: 13.4984%;
top: 57.2768%;
right: 32.9944%;
}

.map__region.tokai{
width: 17.9181%;
top: 61.6865%;
right: 42.457%;
}

.map__region.kansai{
width: 11.9857%;
top: 66.0669%;
right: 57.0969%;
}

.map__region.chugoku{
width: 19.8983%;
top: 62.4776%;
right: 67.6854%;
}

.map__region.shikoku{
width: 14.8301%;
top: 73.6529%;
right: 66.4441%;
}

.map__region.kyushu{
width: 19.0655%;
top: 72%;
right: 80.6%;
}

.map__region.okinawa{
width: 3.6708%;
top: 92.2089%;
right: 55.525%;
}

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

.map__region.tohoku{
width: 15.8157%;
top: 28.2194%;
right: 26.4728%;
}

.map__region.hokuriku{
  width: 24.2522%;
  top: 50.2199%;
  right: 38%;
}

.map__region.kanto{
width: 13.4984%;
top: 60.2768%;
right: 32.9944%;
}

.map__region.tokai{
width: 17.9181%;
top: 64.6865%;
right: 42.457%;
}

.map__region.kansai{
width: 11.9857%;
top: 70.0669%;
right: 57.0969%;
}

.map__region.chugoku{
width: 19.8983%;
top: 66.4776%;
right: 67.6854%;
}

.map__region.shikoku{
width: 14.8301%;
top: 77.6529%;
right: 66.4441%;
}

.map__region.kyushu{
width: 19.0655%;
top: 73.8061%;
right: 81.0931%;
}

.map__region.okinawa{
width: 3.6708%;
top: 98.2089%;
right: 55.525%;
}
  }

.map__region img{
  width: 100%;
}

.map__cans img{
  width: 25.641%;
aspect-ratio: 40/109;
}

@media screen and (max-width:430px) {
 .map__cans img{
  width: 25.6394%;
  aspect-ratio: 27.97/76.23;
 } 
}

.map__name{
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 1.8571;
  position: absolute;
}

  @media screen and (max-width:430px) {
    .map__name {
      font-size:14px;
      color: #000000;
    }
  }

.map__name:nth-of-type(1){
  top: 28.1229%;
  right:3% ;
}

.map__name:nth-of-type(2){
  top: 45.9508%;
  right: 49.7327%;
}

.map__name:nth-of-type(3){
top: 62.2393%;
right: 22.6851%;
}

.map__name:nth-of-type(4){
top: 58.4508%;
right: 61.7297%;
}

.map__name:nth-of-type(5){
top: 75.459%;
right: 45.5883%;
}
.map__name:nth-of-type(6){
top: 63.3688%;
right: 81%;
}
.map__name:nth-of-type(7){
bottom: 10.9098%;
left: 28.6727%;
}
.map__name:nth-of-type(8){
bottom: 2.3%;
left: 17.1026%;
}

  @media screen and (max-width:430px) {
    
.map__name:nth-of-type(1){
  top: 27.1229%;
  right:-0.5% ;
}

.map__name:nth-of-type(2){
  top: 44.9508%;
  right: 48.7327%;
}

.map__name:nth-of-type(3){
top: 61.2393%;
right: 20.6851%;
}

.map__name:nth-of-type(4){
top: 57.4508%;
right: 60.7297%;
}

.map__name:nth-of-type(5){
top: 74.459%;
right: 44.5883%;
}
.map__name:nth-of-type(6){
top: 62.3688%;
right: 81.0924%;
}
.map__name:nth-of-type(7){
bottom:10.7%;
left: 27.9%;
}
.map__name:nth-of-type(8){
bottom: 1.399%;
left: 16.1026%;
}
  }

/* graph */

.graph {
padding-top: 120px;
padding-bottom: 120px;
}

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

@media screen and (max-width:700px) {
  .graph__inner.inner {
    padding-inline: 0;
  }
  
}
.graph__title.heading {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:32px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #000000;
  text-align: center;
}

@media screen and (max-width:700px) {
 .graph__title.heading{
  font-size: 22px;
  line-height: 1.4545;
 } 
}

.graph__container {
margin-top: 80px;
padding: 20px;
padding-top: 20px;
background-image:linear-gradient(173deg,#128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
border-radius: 16px;
}

@media screen and (max-width:700px) {
  .graph__container{
    margin-top: 39px;
    background-image:linear-gradient(178deg,#128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
    border-radius: 0;
 } 
}

.graph__items {
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  padding-top: 51px;
  padding-bottom: 52.5px;
}

@media screen and (max-width:700px) {
 .graph__items{
  padding: 32px 22px;
  padding-top: 25px;
  padding-bottom: 26px;
  flex-direction: column;
  align-items: center;
 } 
}

.graph__item {
  display: flex;
  flex-direction: column;
align-items: center;
}

.graph__item.circle{
  width: 48.5416%;
  gap: 36px;
}

.graph__item.bar{
  width: 51.4584%;
  border-left: 2px solid #F1F1F1;
  gap: 44px;
}

@media screen and (max-width:700px) {
 .graph__item.circle,
 .graph__item.bar{
  width: 100%;
 } 
}

@media screen and (max-width:700px) {
 .graph__item.bar{
  border-left: none;
  border-top: 2px solid #F1F1F1;
  padding-top: 23px;
  margin-top: 31px;
} 
}

.circle__graph{
  text-align: center;
}

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

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

.circle__canvas {
  width: 100%;
  display: inline-block;
  position: relative;
}

@media screen and (max-width:700px) {
  .circle__canvas{
   margin-top: 29px;
   margin-inline: auto;
   display: flex;
   justify-content: center;
 } 
}

.chart{
  margin-inline: auto;
}

.chart__label{
  font-family: 'Orbitron';
  font-weight: 600;
  font-size:24px;
  letter-spacing: .1em;
  line-height: 1.25;
  color: #fff;
  position: absolute;
}

.chart__label:nth-of-type(1){
  bottom: 30.2714%;
  right: 14.7457%;
}

@media screen and (max-width:430px) {
    .chart__label:nth-of-type(1){
      bottom: 30.2714%;
      right: 12.7457%;
    }
  }

.chart__label:nth-of-type(2){
  top: 30.4914%;
  left: 11.9656%;
}

@media screen and (max-width:430px) {
    .chart__label:nth-of-type(2){
      top: 30%;
      left: 9.9656%;
    }
  }

.circle__title {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:24px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #000000;
  text-align: center;
}

  @media screen and (max-width:430px) {
    .circle__title{
      font-size: 20px;
      line-height: 1.5;
    }
  }

.bar__title {
font-family: 'Noto Sans JP';
font-weight: 600;
font-size:24px;
letter-spacing: .1em;
line-height: 1.4375;
color: #000000;
text-align: center;
}

  @media screen and (max-width:700px) {
    .bar__title{
      font-size: 20px;
    }
  }

.bar__graph {
width: 71.7479%;
}

@media screen and (max-width:700px) {
  .bar__graph{
    width: 100%;
    width: 295px;
    height: 242px;
    margin-top: 31px;
  }
}

.bar__chart{
  width: 353px;
  height: 301px;
}

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

/* check */

.check {
padding-top: 120px;
padding-bottom: 120px;
background-color: #fff;
position: relative;
background-image: url(../../images/check_image.jpg) ;
background-repeat: no-repeat;
background-size: cover;
z-index: 2;
}

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

.check::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .9);
  z-index: -1;
}

.check__title {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:32px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #FFFFFF;
  text-align: center;
}

@media screen and (max-width:740px) {
 .check__title{
  font-size: 22px;
  line-height: 1.4545;
 } 
}

.check__text {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1.6;
  color: #FFFFFF;
  text-align: center;
  margin-top: 60px;
}

@media screen and (max-width:740px) {
  .check__text{
    font-size: 18px;
    line-height: 1.6666;
    text-align: left;
    margin-top: 40px;
    letter-spacing:.078em;
  }
}

.check__arrow_wrapper{
  display: flex;       
  flex-direction: column;       
  align-items: center;
}

.check__arrow_flex{
  display: flex;
  width: 119px;
  flex-direction: column;
}

.check__arrow{
width: 21.77px;
height: 11.82px;
position: relative;
}

.check__arrow.yes{
  background-color: #00FFE0;
}

.check__arrow.no{
  background-color: #AD00FF;
}

  @media screen and (max-width:430px) {
.check__arrow::after{
  height: 11.82px;
  top: 14.09px;
}
  }

.check__arrow::before{
  content: '';
  border: 16px solid transparent;
  position: absolute;
  top: 4px;
  right: -20px;
}

  @media screen and (max-width:430px) {
    .check__arrow::before{
      right: -22px;
    }
  }

.check__arrow.yes::before{
  border-left: 16px solid #00FFE0;
    top: 50%;
  right: -32px;
  transform: translateY(-50%);
}

.check__arrow.no::before{
  border-left: 16px solid #AD00FF;
    top: 50%;
  right: -32px;
  transform: translateY(-50%);
}

@media screen and (max-width:430px) {
    .check__arrow.yes::before{
      top: 4px;
    }
  }

.check__arrow.no::after{
  background-color: #AD00FF;
}

.check__arrow.no::before{
  border-left: 16px solid #AD00FF;
}

.check__arrow_item{
display: flex;
gap: 33.9px;
align-items: center;
margin-top: -2px;
}

.check__yes {
  font-family: 'Orbitron';
  font-weight: 400;
  font-size:24px;
  letter-spacing: .1em;
  line-height: 1.7088;
  color: #00FFE0;
  display: inline-block;
  position: relative;
}

.check__no {
  font-family: 'Orbitron';
  font-weight: 400;
  font-size:24px;
  letter-spacing: .1em;
  line-height: 1.7088;
  color: #AD00FF;
  display: inline-block;
  position: relative;
}

  .check__step{
    margin-top: 46px;
    opacity: 0;
    transform: translateY(100px); 
    transition:all .9s;
  }

  .check__step.fade-in{
    opacity: 1;
    transform: translateY(0);
  }

  @media screen and (max-width:740px) {
    .check__step{
      display: none;
    }
  }

.check__first_question {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1;
  color: #000000;
  white-space: nowrap;
  background-color: #FFFFFF;
  padding: 25px 124px;
  border-radius: 10px;
  text-align: center;
width: 84%;
height: 70px;
margin-inline: auto;
}

.check__next_step {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.check__arrow_wrapper {
margin-top: 46px;
}

@media screen and (max-width:740px) {
 .check__arrow_wrapper{
  margin-top: 32px;
 } 
}

.check__second_question-flex {
display: flex;
justify-content: space-between;
width: 84%;
}

.check__second_question-wrapper {
display: flex;
width: 38.1%;
align-items: center;
flex-direction: column;
gap: 20px;
}

.check__second_question {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1;
  color: #000000;
  background-color: #FFFFFF;
  padding: 25px 29px;
  border-radius: 10px;
  text-align: center;
width: 320px;
height: 70px;
white-space: nowrap;
}

.check__third_question-flex {
margin-top: 20px;
display: flex;
justify-content: space-between;
width: 100%;
}

.check__third_question-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 48%;
}

.check__third_question-item {
display: flex;
flex-direction: column;
align-items: center;  
width: 47.9166%;
}

.check__third_question {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1;
  color: #000000;
  background-color: #FFFFFF;
  padding: 25px 17px;
  border-radius: 10px;
  text-align: center;
width: 100%;
height: 70px;
white-space: nowrap;
margin-top: 20px;
}

@media screen and (max-width:1040px) {
  .check__first_question,
  .check__second_question,
  .check__third_question{
    font-size: 12px;
  }
}

.check__can_list {
display: flex;
justify-content: space-between;
width: 61.7391%;
margin-top: 20px;
}

.check__can_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 42px;
}

.check__can_item img{
width: 95.238%;
aspect-ratio: 40/109;
margin-top: 28px;
}

.arrow-yes,
.arrow-no {
width: 42px;
height: 50px;
position: relative;
display: block;
}

.arrow-yes::after{
  content: '';
  width: 15px;
  height: 28px;
  background-color: #00FFE0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width:430px) {
.arrow-yes::after{
  top: 1px;
  }
}

.arrow-yes::before{
  content: '';
  border: 21px solid transparent;
  border-top: 21px solid #00FFE0;
  position: absolute;
  bottom: -20px;
}

  @media screen and (max-width:430px) {
   .arrow-yes::before{
    bottom: -20px;
   } 
  }

.arrow-no::after{
  content: '';
  width: 15px;
  height: 28px;
  background-color: #AD00FF;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.arrow-no::before{
  content: '';
  border: 21px solid transparent;
  border-top: 21px solid #AD00FF;
  position: absolute;
  bottom: -20px;
}

/* sp版step */

.check__step_sp.sp-step {
margin-top: 14px;
}

@media screen and (min-width:740px) {
  .check__step_sp.sp-step{
    display: none;
  }
}

  @media screen and (max-width:430px) {
   .check__step_sp.sp-step{
    margin-top: 20px;
   } 
  }

.sp-step__first_question ,
.sp-step__second_question ,
.sp-step__third_question {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:18px;
  letter-spacing: .09em;
  line-height: 1.7;
  color: #FFFFFF;
  text-align: center;
}

@media screen and (max-width:430px) {
.sp-step__first_question ,
.sp-step__second_question ,
.sp-step__third_question {
  line-height: 1.8;
  letter-spacing: .09em;
}
}

.sp-step__second_question-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}

  @media screen and (max-width:430px) {
    .sp-step__second_question {
    margin-top: 9px;
    }
  }

.check__button_wrapper {
width: 100%;
background-color: #9C9C9C;
margin-top: 20px;
}

  @media screen and (max-width:430px) {
    .check__button_wrapper{
      margin-top: 12px;
    }
  }

.check__button {
width: 50%;
padding: 10px 68px;
background-color: #00FFE0;  
letter-spacing: .1em;
}

  @media screen and (max-width:430px) {
    .check__button{
      padding: 13px 69px;
    }
  }

.check__button.first.active, 
.check__button.second.active,
.check__button.third.active {
margin-left: auto;
background-color: #AD00FF;
}

.sp-step__third_question-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}

.sp-step__arrow-yes.arrow-yes {
margin-top: 20px;
}

.arrow-yes.first.active::after{
  background-color: #AD00FF;
  }
  
  .arrow-yes.first.active::before{
  border-top: 21px solid #AD00FF;
  }
.arrow-yes.second.active::after{
  background-color: #AD00FF;
  }
  
  .arrow-yes.second.active::before{
  border-top: 21px solid #AD00FF;
  }

.sp-step__name_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}

.sp-step__image{
width: 18.96%;
}

.sp-step__image img{
width: 100%;
aspect-ratio: 44/120;
}

.sp-step-image.active.hot.active,
.sp-step-image.active.green.active,
.sp-step-image.active.mixed.active{
  display: block;
}

@media screen and (max-width:740px) {
  .sp-step-image.hot,
  .sp-step-image.mixed,
  .sp-step-image.green{
  display: none;
  }
}

.sp-step__name.result__name.mixed,
.sp-step__name.result__name.green,
.sp-step__name.result__name.hot {
margin-top: initial;
}

  @media screen and (max-width:430px) {
    .sp-step__third_question {
    margin-top: 9px;
    }
  }


.sp-step__can_item {
display: flex;
flex-direction: column;
align-items: center;
width: 69.2537%;
}

.check__result.result {
padding: 73px;
padding-bottom: 64px;
margin-top: 60px;
background-color: #FFFFFF;
border-radius: 10px;
transition: all .9s;
}

.check__result.result.fade-in{
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width:850px) {
 .check__result.result{
  margin-top: 40px;
  padding: 32px 42px;
  padding-bottom: 26px;
  border-radius: 18px;
 } 
}

.result__list {
display: flex;
justify-content: space-between;
}

@media screen and (max-width:850px) {
  .result__list{
    flex-direction: column;
  }
}

.result__item {
  width: 29.274%;
  position: relative;
}

@media screen and (max-width:850px) {
  .result__item{
   width: 100%;
 } 
 .result__item:not(:first-child){
  margin-top: 27px;
 }
}

.result__name {
  font-family: 'Orbitron';
  font-weight: 400;
  font-size:37px;
  letter-spacing: .1em;
  line-height: 1.05;
  background-color: #FFFFFF;
  text-align: left;
  background-clip: text;
  -webkit-text-fill-color: transparent;
margin-top: 42px;
}

  @media screen and (max-width:430px) {
    .result__name{
      line-height: 1.07;
      margin-top: 40px;
    }
  }

.result__name.mixed,
.sp-step__name.mixed{
  background-image:linear-gradient( to right, #128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
}

.result__name.green,
.sp-step__name.green{
  background-image:linear-gradient( to right, #03B10F 0%,#3CFFB9 51%,#E7F91B 100%);
}

.result__name.hot,
.sp-step__name.hot{
  background-image:linear-gradient( to right, #B00202 0%,#FF8A00 51%,#E83A54 100%);
}

.result__can {
position: absolute;
top: 0;
right: 0;
width: 29.6%;
}

  @media screen and (max-width:1000px) {
    .result__can{
      right: -30px;
    }
  }

  @media screen and (max-width:850px) {
    .result__can{
      width: 12.8%;
    }
  }

  @media screen and (max-width:430px) {
    .result__can{
      width: 29.6%;
      right: 0;
    }
  }

.result__can img{
  aspect-ratio: 74/199;
}

.result__can-name {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:16px;
  line-height: 1;
  color: #000000;
  margin-top: 75px;
}

.result__can-name.mixed,
.result__can-name.green{
  letter-spacing: .1em;
}

.result__can-name.hot{
  letter-spacing: .04em;
}

@media screen and (max-width:430px) {
    .result__can-name.hot{
      letter-spacing: .1em;
    }
  }

.result__can-name.third {
  letter-spacing:.05em;
}

@media screen and (max-width:850px) {
 .result__can-name{
  font-size: 14px;
  margin-top: 60px;
 } 
}

.result__can-explain {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1.58;
  color: #000000;
  margin-top: 19px;
}

@media screen and (max-width:850px) {
  .result__can-explain{
    font-size: 14px;
    line-height: 1.58;
    margin-top: 21px;
  }
}

/* SNS */

.sns {
padding-top: 133px;
padding-bottom: 120px;  
position: relative;
}

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

.sns::after{
  background-image: linear-gradient(62deg, #03B10F 0%, #3CFFB9 49%, #E7F91B 70%,#E7F91B 100%);   
  clip-path: polygon(0 0,53.1737% 0,79% 43%,63.5% 43%,100% 100%,0 100%);
  width: 63.0284%;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

@media screen and (max-width:430px) {
  .sns::after{
    width: calc(100% + 615px);
    left: -615px;
    clip-path: polygon(0 0,54.5% 0,81% 42.8%,65% 42.8%,100% 97%,100% 100%,0 100%);
  }
}

.sns::before{
  background-image: linear-gradient(40deg, #128FCD 0,#B3D6E0 51%,#DC24B1 100%);
  width: 66.4854%;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

@media screen and (max-width:430px) {
  .sns::before{
    width: calc(100% + 94.5px);
    left: -94.5px;
  }
}

.sns__container {
margin-top: 80px;
display: flex;
justify-content: space-between;
}

@media screen and (max-width:430px) {
 .sns__container{
  margin-top: 40px;
  justify-content: initial;
  flex-direction: column;
  gap: 20px;
 } 
}

.sns__item.big {
width: 48.3%;
background-color: rgba(255,255,255,.5);
box-shadow: 0 0 30px 0 rgba(0, 0, 0, .15);
border-radius: 10px;
padding: 32px;
}

@media screen and (max-width:430px) {
 .sns__item.big{
  width: 100%;
  padding: 22px;
 } 
}

.sns__item-flex {
display: flex;
justify-content: space-between;
}

.sns__logo {
width: 9.7207%;
}

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

.sns__logo img{
  width: 100%;
  aspect-ratio: 40.73/577;
}

@media screen and (max-width:430px) {
  .sns__logo img{
    aspect-ratio: 28.28/400.57;
  }
}

.sns__can_wrapper {
width: 14.0811%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

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

.sns__can_image {
width: 100%;
}

.sns__can_image img{
width: 100%;
aspect-ratio: 59/160;
}

@media screen and (max-width:430px) {
 .sns__can_image img{
  aspect-ratio: 41/111;
 } 
}

.sns__item_big-image {
width: 63.7231%;
}

@media screen and (max-width:430px) {
  .sns__item_big-image{
    width: 63.6197%; 
  }
}

.sns__item_big-image img{
width: 100%;
aspect-ratio: 267/577;
}

@media screen and (max-width:430px) {
 .sns__item_big-image img{
  aspect-ratio: 185/400;
 } 
}

.sns__list {
  width: 47.7%;
  display: flex;
  justify-content: space-between;
  row-gap: 21px;
  flex-wrap: wrap;
}

@media screen and (max-width:430px) {
 .sns__list{
  width: 100%;
  row-gap: 15px;
 } 

}

.sns__item.small {
width: 29.979%;
}

@media screen and (max-width:430px) {
 .sns__item.small{
  width: 29.8507%;
 } 
}

.sns__item.small img{
width: 100%;
aspect-ratio: 143/310;
}

@media screen and (max-width:430px) {
 .sns__item.small img{
   aspect-ratio: 100/218;
  } 

  .sns__list>:nth-child(n + 4) img{
   aspect-ratio: 100/216;
  }
}

/* calc */

.calc {
padding-top: 120px;
padding-bottom: 120px;
background-color: #F5F5F5;
}

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

.calc__title.heading {
  color: #000000;
  line-height: 1.1875;
}

@media screen and (max-width:430px) {
 .calc__title{
  font-size: 22px;
  line-height: 1.182;
 } 
}

.calc__container {
padding: 52px;
border-radius: 22px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
background-color: #FFFFFF;
margin-top: 88px;
}

@media screen and (max-width:430px) {
  .calc__container{
    border-radius: 16px;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .1);
    padding: 20px;
    margin-top: 46px;
 } 
}

.calc__flex {
display: flex;
}

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

.calc__datas {
  padding-right: 52px;
  flex-grow: 1;
}

@media screen and (max-width:980px) {
 .calc__datas{
  padding-right: initial;
  padding-bottom: 20px;
  flex-grow: initial;
  width: 100%;
 } 
}

@media screen and (max-width:640px) {
 .calc__datas{
  display: flex;  
  flex-direction: column;
  align-items: center;
  gap: 20px;
} 
}

.calc__data {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 535px;
}

.calc__data:not(:first-child){
margin-top: 24px;
}

  @media screen and (max-width:430px) {
   .calc__data:not(:first-child){
    margin-top: initial;
   } 
  }

@media screen and (max-width:980px) {
 .calc__data{
  max-width: initial;
 } 
}

@media screen and (max-width:640px) {
 .calc__data{
  flex-direction: column;
  gap: 16px;
 } 
}

.calc__data p{
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1.1875;
  color: #000000;
}

@media screen and (max-width:430px) {
 .calc__data p{
  align-self: flex-start;
  line-height: 1.4375;
 } 
}

.input__wrapper{
  width: 300px;
  position: relative;
}

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

.input__wrapper p {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1.1875;
  color: #000000;
}

.calc__data select{
width: 300px;
height: 50px;
border-radius: 6px;
border: 1px solid #DCDCDC;
text-align: center;
}

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

.input__wrapper img{
  width: 10px;
  height: 10px;
  position: absolute;
  top: 20px;
  right: 20px;
}

  @media screen and (max-width:430px) {
   .input__wrapper img{
    top: 22px;
    right: 21px;
   } 
  }

.calc__button_wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 52px;
  border-left: 2px solid #F1F1F1;
}

@media screen and (max-width:980px) {
.calc__button_wrapper{
  width: 100%;
  padding-top: 20px;
  padding-left: initial;
  border-top: 2px solid #F1F1F1;
  border-left: none;
 } 
}

.calc__button_wrapper button{
padding: 19px 84px 23px;
background-image:  linear-gradient(77deg, #128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
border-radius: 30px;
font-family: 'Noto Sans JP';
font-weight: 600;
font-size:20px;
height: 60px;
letter-spacing: .1em;
line-height: 1;
color: #FFFFFF;
white-space: nowrap;
cursor: pointer;
}

@media screen and (max-width:430px) {
 .calc__button_wrapper button{
  width: 100%;
padding: 4px 84px 10px 85px;
 } 
}

.calc__result_wrapper{
  padding-top: 13px;
  padding-bottom: 19px;
  background-color:#F5F5F5;
  border-radius: 6px;
  margin-top: 52px;
}

.calc__result_wrapper p{
font-family: 'Noto Sans JP';
font-weight: 600;
font-size:20px;
letter-spacing: .09em;
line-height: 1.45;
color: #000000;
text-align: center;
}

@media screen and (max-width:430px) {
  .calc__result_wrapper{
    padding-top: 16px;
    padding-bottom: 13px;
    padding-inline: 24px;
    margin-top: 20px;
  }

 .calc__result_wrapper p{
  font-size: 16px;
  line-height: 1.4375;
  letter-spacing: .1em;
 }

 .sp-show.number{
margin-top: 8px;
 }
}

.calc-pieces{
font-family: 'Noto Sans JP';
font-weight: 600;
font-size:26px;
letter-spacing: .1em;
line-height: 1.46;
color: #000000;
margin-inline: 19px;
}

  @media screen and (max-width:430px) {
    .calc-pieces{
      margin-inline: initial;
      margin-right: 5px;
    }
  }

.calc__texts {
margin-top: 60px;
}

@media screen and (max-width:430px) {
 .calc__texts{
  margin-top: 40px;
 } 
}

.calc__texts_title,
.calc__item p{
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size:14px;
  letter-spacing: .1em;
  line-height:2;
  color: #000000;
}

@media screen and (max-width:430px) {
  .calc__texts_title{
    font-size:12px; 
  line-height: 2.2;
  }
  .calc__item p{
    font-size:12px; 
    line-height: 2.15;
  }
}

.calc__list {
  margin-top: 29px;
}

  @media screen and (max-width:430px) {
   .calc__list{
    margin-top: 26px;
   } 
  }

.calc__item {
  font-family: 'Noto Sans JP';
  font-weight: 600;
  font-size:14px;
  letter-spacing: .1em;
  line-height:2;
  color: #000000;
}

@media screen and (max-width:430px) {
  .calc__item{
    font-size: 12px;
    line-height: 2.2;
  }
}

.calc__caution {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size:14px;
  letter-spacing: .1em;
  line-height:2;
  color: #000000;
  margin-top: 27px;
}

@media screen and (max-width:430px) {
 .calc__caution{
  font-size: 12px;
  line-height: 2.15;
 } 
}

/* blog */

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

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

.blog__wrapper {
margin-top: 88px;
}

@media screen and (max-width:430px) {
 .blog__wrapper{
  margin-top: 40px;
 } 
}

.blog__list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 32px;
}

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

.blog__item {
width: 31%;
} 

.blog__item.seem {
opacity: 1;
transition: all 2s;
}

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

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

.loading{
display: flex;
align-items: center;
justify-content: center;  
height: 300px;
}

.loading__circle {
  width: 100px;
  height: 100px;
  border: 1px solid #000000;
  border-top: 1px solid #FFFFFF;
  border-radius: 50%;
  animation: loading 1s infinite;
  margin-inline: auto;
  margin-top: 100px;
  display: none;
}

@keyframes loading{
  0%{
transform: rotate(0);
}
100%{
    transform: rotate(360deg);
  }
}

 .loading__circle.fade-out{
  display:none;
} 

/* ブログ一覧ページ(modal) */

.blog {
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #000000;
  }
  
  @media screen and (max-width:430px) {
    .blog{
      padding-top: 60px;
      padding-bottom: 60px;
    }
  }
  
  .blog__heading.heading {
  color: #FFFFFF;
  text-align: center;
  line-height: 1.1875;
  }
  
  @media screen and (max-width:430px) {
    .blog__heading.heading {
              white-space: nowrap;
              line-height: 1.455;
    }
  }
  
  .blog__wrapper {
  margin-top: 88px;
  }
  
  @media screen and (max-width:430px) {
   .blog__wrapper{
    margin-top: 39px;
   } 
  }
  
  .blog__list {
  display: flex;
  justify-content: space-between;
  }

  
  @media screen and (max-width:900px) {
    .blog__list{
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
  }
  
  .blog__item {
  width: 31%;
  }

    @media screen and (max-width:430px) {
    .blog__item{
      aspect-ratio: 335/316;
    }
  }

  .blog__item.seem{
    opacity: 1;
    transition: all .3s;
  }
  
  @media screen and (max-width:900px) {
   .blog__item{
    width: 70%;
   } 
  }
  
  @media screen and (max-width:430px) {
   .blog__item{
    width: 100%;
   } 
  }
  
  .blog__link {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .blog__link img{
    border-radius: 8px 8px 0 0;
    aspect-ratio: 31/18;
  }

  @media screen and (max-width:430px) {
  .blog__link img{
    aspect-ratio: 335/194;
  }
  }
  
  .blog__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0 0 8px 8px; 
  background-color: #F5F5F5;
  padding: 17px 16px 16px;
  flex-grow: 1;
  }
  
  @media screen and (max-width:430px) {
   .blog__body{
    padding: 12px 20px 10px 16px;
   } 
  }
  
  .blog__date {
    font-family: 'Noto Sans JP';
    font-weight: 500;
    font-size:14px;
    letter-spacing: .1em;
    line-height:1;
    color: #000000;
  }
  
  .blog__title {
    font-family: 'Noto Sans JP';
    font-weight: 600;
    font-size:16px;
    letter-spacing: .02em;
    line-height:1.5;
    color: #000000;
    margin-top: 11px;
  }
  
  @media screen and (max-width:430px) {
   .blog__title{
    margin-top: 8px;
    line-height: 1.56;
   } 
  }
  
  .blog__text{
    font-family: 'Noto Sans JP';
    font-weight: 400;
    font-size:16px;
    letter-spacing: .1em;
    line-height:1.5;
    color: #000000;
    margin-top: 8px;
  }
  
  @media screen and (max-width:430px) {
   .blog__text{
    margin-top: 4px;
   } 
  }
  
  .blog__button_wrapper {
  margin-top: 52px;
  text-align: center;
  }
  
  @media screen and (max-width:600px) {
   .blog__button_wrapper{
    display: none;
   } 
  }
  
  .blog__button {
    font-family: 'Orbitron';
    font-weight: 400;
    font-size:22px;
    letter-spacing: .09em;
    line-height:1.82;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 30px;
    padding: 10px 78px;
    display: inline-block;
    height: 60px;
  }

/* ブログモーダル */

.blog-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: none;
transition: opacity .3s;
z-index: 10;
height: 100%;
overflow: scroll;
}

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

.blog-page{
  background-color: #1E1E1E;
  padding-top: 60px;
  padding-bottom: 120px;
}

  @media screen and (max-width:430px) {
   .blog-page{
    padding-top: 53px;
   } 
  }

/* form */

.present {
padding-top: 120px;
padding-bottom: 120px;
}

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

.present__heading.heading {
color: #000000;
line-height: 1.1875;
}

  @media screen and (max-width:430px) {
.present__heading.heading {
  line-height: 1.4545;
}
  }

.present__description {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1.6;
  color: #000000;
  margin-top: 68px;
  text-align: center; 
}

@media screen and (max-width:430px) {
  .present__description{
    font-size: 18px;
    text-align: left;
    margin-top: 40px;
    letter-spacing: .09em;
    line-height: 1.68;
  }
}

.present__description+p{
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1.6;
  color: #000000;
  text-align: center; 
}

  @media screen and (max-width:430px) {
    .present__description+p{
      font-size: 18px;
      text-align: left;
      margin-top: 31.7px;
    }
  }

.present__container {
padding: 39px 45px 56px 48px;
background-image: linear-gradient(-12deg ,#128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
border-radius: 16px;
margin-top: 69px;
}

@media screen and (max-width:430px) {
  .present__container{
    padding: 20px;
    padding-bottom: 21px;
    background-image: linear-gradient(-2deg ,#128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
    margin-top: 40px;
 } 
}

.present__contents {
display: flex;
justify-content: space-between;
}

@media screen and (max-width:430px) {
 .present__contents{
  flex-direction: column;
  justify-content: initial;
  gap: 20px;
 }
}

.present__image {
width: 32.965%;
}

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

.present__image img{
  width: 100%;
  aspect-ratio: 298/310;
}

@media screen and (max-width:430px) {
 .present__image img{
  aspect-ratio: 295/307;
 } 
}

.present__body {
width: 65.488%;
}

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

.present__title {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:24px;
  letter-spacing: .1em;
  color: #FFFFFF;
}

@media screen and (max-width:430px) {
 .present__title{
  font-size: 20px;
  text-align: left;
  line-height: 1.45;
 } 
}

.present__text {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1.75;
  color: #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  margin-top: 24px;
  padding-bottom: 24px;
}

@media screen and (max-width:430px) {
 .present__text{
  font-size: 18px;
  margin-top: 16px;
  padding-bottom: 20px;
  line-height: 1.667;
 } 
}

.present__title:nth-of-type(1){
line-height: 1.4166;
}

.present__title:nth-of-type(2){
  margin-top: 24px;
  line-height: 1.2088;
}

@media screen and (max-width:430px) {
 .present__title{
  text-align: left;
 } 
}

.present__text_date {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:24px;
  letter-spacing: .1em;
  line-height: 1.2058;
  color: #FFFFFF;
  margin-top: 18px;
}

@media screen and (max-width:430px) {
 .present__text_date{
  font-size: 20px;
  margin-top: 23px;
  line-height: 1.4;
 } 
}

.present__text_date span{
font-size: 34px;
margin-left: 3px;
}

@media screen and (max-width:430px) {
 .present__text_date span{
  font-size: 30px;
 } 
}

.present__form.form {
padding-top: 80px;
padding-bottom: 80px;
padding-inline: 91px;
background-color: #F5F5F5;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, .1);
margin-top: 51px;
}

@media screen and (max-width:800px) {
  .present__form.form{
    padding-top: 28px;
    padding-bottom: 20px;
    padding-inline: 20px;
    margin-top: 40px;
  }
}

.form__title {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:26px;
  letter-spacing: .1em;
  line-height: 1.4615;
  color: #000000;
  text-align: center;
}

@media screen and (max-width:430px) {
 .form__title{
  font-size: 20px;
  line-height: 1.45;
 } 
}

.form__flex{
  margin-top: 60px;
}

  @media screen and (max-width:430px) {
    .form__flex{
      margin-top: 28px;
    }
  }

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

@media screen and (max-width:800px) {
 .form__input_wrapper{
  flex-direction: column; 
  align-items: flex-start;
  gap: 19px;
 } 
}

.form__input_wrapper:not(:first-child){
  margin-top: 24px;
}

@media screen and (max-width:430px) {
 .form__input_wrapper:not(:first-child){
  margin-top: 20px;
 } 
}

.form__input_wrapper:last-child{
  padding-bottom: 40px;
  border-bottom: 2px solid #D0D0D0;
}

@media screen and (max-width:430px) {
 .form__input_wrapper:last-child{
  padding-bottom: 20px;
 } 
}

.label__wrapper{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 42px;
}

.label {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #000000;
  margin-bottom: 5px;
}

@media screen and (max-width:430px) {
 .label{
  line-height: 1.25;
  display: flex;
  margin-bottom: initial;
 } 
}

@media screen and (max-width:430px) {
 .label>span{
  margin-right: 7px;
 } 
}

.label.one{
  margin-bottom: initial;
}

.note{
  font-size: 12px;
  display: block;
  line-height: 1.5833;
  letter-spacing: .1em;
}

@media screen and (max-width:430px) {
 .note{
  align-self: flex-end;
  line-height: 1;
  margin-left: 11px;
} 
}

.input__container{
  width: 73.3349%;
  position: relative;
}

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

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

.input {
width: 100%;
height: 50px;
padding-inline: 20px;
border-radius: 6px;
background-color:#FFFFFF;
border: 1px solid #DCDCDC;
}

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

.input.error{
border: 2px solid #FF0000;
}

.validation,
.privacy-validation{
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:12px;
  letter-spacing: .1em;
  /* line-height: 1.1666; */
  line-height: 1.4166;
  color: #FF0000;
  position: absolute;
  bottom: -20.5px;
}

.privacy-validation{
  align-self: flex-start;
}

.input.phone-number,
.post-number{
width: 50%;
align-self: flex-start;
}

@media screen and (max-width:800px) {
  .input.phone-number,
  .post-number{
  width: 100%;
  }
}

.checkbox__set{
display: flex;
flex-direction: column;
width: 335px;
margin-inline: auto;
margin-top: 48px;
}

  @media screen and (max-width:430px) {
    .checkbox__set{
      margin-top: initial;
    }
  }

.checkbox__wrapper{
  width: 335px;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  gap: 11px;
  padding-right: 3px;
}

@media screen and (max-width:430px) {
  .checkbox__wrapper{
    margin-top: 20px;
    justify-content: initial;
  }
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  background-color: #FFFFFF;
  border: 1px solid #DCDCDC;
  align-self: center;
  position: relative;
  cursor: pointer;
  margin: 0;
  margin-left: 3px;
}

  @media screen and (max-width:430px) {
   input[type="checkbox"]{
    margin-left: initial;
   } 
  }

input[type="checkbox"]:checked::after{
content: '';
width: 10px;
height: 20px;
border-right: 2px solid lime;
border-bottom: 2px solid lime;
transform: rotate(45deg);
position: absolute;
top: -3px;
left: 4px;
}

@media screen and (max-width:430px) {
  input[type="checkbox"] {
    vertical-align: -6px;
  }
}

.checkbox__text{
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #000000;
}

.form__text {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:18px;
  letter-spacing: .1em;
  line-height: 1.4444;
  color: #000000;
  margin-top: 40px;
  padding-left: 5px;
}

@media screen and (max-width:430px) {
 .form__text{
  font-size: 16px;
  line-height: 1.4375;
  margin-top: 20px;
  text-align: center;
 } 
}

.button__wrapper{
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}

@media screen and (max-width:430px) {
  .button__wrapper{
    margin-top: 20px;
  }
}

@media screen and (max-width:430px) {
 .form__wrapper{
  margin-top: 20px;
 } 
}

.form__button {
width: 300px;
height: 60px;
font-family: 'Noto sans JP';
font-weight: 600;
font-size:20px;
letter-spacing: .1em;
line-height: 1;
color: #FFFFFF;
border-radius: 30px;
background-image:linear-gradient( -79deg, #128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
margin-inline: auto;
display: inline-block;
cursor: pointer;
}

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

.form__caution {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:14px;
  letter-spacing: .1em;
  line-height: 1.4285;
  color: #000000;
  margin-top: 64px;
}

@media screen and (max-width:430px) {
 .form__caution{
  font-size: 12px;
  line-height: 1.4166;
  margin-top: 24px;
 } 
}

/* モーダルポスト */

.modal-post {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
display: none;
}

.modal-post.active{
  display: block;
}

.modal-post__title {
font-family: 'Noto sans JP';
font-weight: 600;
font-size:20px;
letter-spacing: .1em;
line-height: 1.45;
text-align: center;
color: #000000;
padding-top: 20px;
padding-bottom: 21px;
margin-right: 3px;
background-color: #D9D9D9;
position: relative;
}

.modal-post__title img{
width: 12px;
height: 14px;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

.modal-post__body {
padding-top: 24px;
padding-inline: 20px;
height: 100vh;  
background-color: #FFFFFF;
}

.modal-post__input_wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}

.modal-post__label {
  font-family: 'Noto sans JP';
  font-weight: 500;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #000000;
}

.modal-post__input_wrapper input{
  padding: 13px 20px;
  width: 100%;
  height: 50px;
  border: 1px solid #DCDCDC;
  border-radius: 6px;
  letter-spacing: .1em;
}

/* banchi */

.address-search {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
}

.address-search.active{
  display: block;
}

.address-search__title {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1.45;
  text-align: center;
  color: #000000;
  padding-top: 20px;
  padding-bottom: 21px;
  background-color: #D9D9D9;
  position: relative;
  }

.address-search__title img{
width: 12px;
height: 14px;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

.address-search__body {
padding-top: 24px;
padding-bottom: 24px;
padding-inline: 20px;
background-color: #fff;
}

.keep-input{
  height: 23px;
  font-family: 'Noto sans JP';
  font-weight: 500;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1.44;
  color: #000000;
}

.address-search__input_wrapper {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}


.address-search__label {
  font-family: 'Noto sans JP';
  font-weight: 500;
  font-size:16px;
  letter-spacing: .3em;
  line-height: 1.4375;
  color: #000000;
}

@media screen and (max-width:430px) {
  .address-search__label{
    padding-left: 4px;
  }
}

.banchi-input {
  padding: 13px 20.5px;
  padding-bottom: 14px;
  width: 100%;
  height: 50px;
  border: 2px solid #DCDCDC;
  border-radius: 6px;
  font-family: 'Noto sans JP';
  font-weight: 500;
  font-size:16px;
  letter-spacing: .3em;
  line-height: 1.4375;
  color: #000000;
  cursor: pointer;
}

/* モーダル */

.modal {
padding-top: 120px;
padding-bottom: 120px;
background-color: hsla(0, 0%, 0%, 0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 900px;
display: none;
z-index: 10;
}

.modal.active{
  display: block;
}

@media screen and (max-width:430px) {
  .modal{
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.modal__contents {
  background-color: #FFFFFF;
  border-radius: 16px;
  width: calc(70% + 80px);
  width: 100%;  
  padding-top: 40px;
  padding-bottom: 56px;
  padding-inline: 40px;
  position: relative;
  overflow-y: auto;
  max-height: 80vh;
}

@media screen and (max-width:780px) {
 .modal__contents{
  padding-top: 17px;
  padding-bottom: 24px;
  padding-inline: 24px;
 } 
}

.modal__wrapper{
  width: 76.0869%;
  margin-inline: auto;
}

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

.modal__close {
position: absolute;
top: 24px;
right: 24px;
width: 30px;
height: 30px;
cursor: pointer;
}

@media screen and (max-width:430px) {
 .modal__close{
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
 } 
}

.modal__heading.heading {
color: #000000;
text-align: center;
margin-left: 8px;
letter-spacing: .02em;
}

@media screen and (max-width:680px) {
.modal__heading.heading {
  font-size: 22px;
  margin-left: 0;
  width: 252px;
  margin-inline: auto;
  padding-left: 5px;
}
}

.modal__description {
  font-family: 'Noto sans JP';
  font-weight: 500;
  font-size:16px;
  letter-spacing: .02em;
  line-height: 1.5;
  color: #000000;
  text-align: center;
  margin-top: 22px;
}

.modal__description + p{
  font-family: 'Noto sans JP';
  font-weight: 500;
  font-size:16px;
  letter-spacing: .02em;
  line-height: 1.125;
  color: #000000;
  text-align: center;
  margin-top: 4px;
}


@media screen and (max-width:430px) {
  .modal__description{
    margin-top: 15px;
    text-align: left;
    letter-spacing: .09em;
    line-height: 1.5;
  }
  
  .modal__description + p{
    text-align: left;
    letter-spacing: .1em;
    line-height: 1.5;
  margin-top: 24px;
}

  .modal__description br{
    margin-top: 20px;
  }
}

.modal__promotion.promotion {
margin-top: 37px;
}

@media screen and (max-width:430px) {
  .modal__promotion.promotion{
    margin-top: 27px;
  }
}

.promotion__title {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:22px;
  line-height: 1.4285;
  color: #FFFFFF;
  text-align: center;
  background-image:linear-gradient( to right, #128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
  padding-top: 9.2875px;
  padding-bottom: 9.2875px;
  padding-inline: 13px;
  white-space: nowrap;
}

@media screen and (max-width:430px) {
 .promotion__title{
  font-size: 18px;
  line-height: 1;
  padding-top: 9px;
  padding-bottom: 13px;
 } 
}

.promotion__title:not(:first-child){
  margin-top: 26px;
  letter-spacing: .018em;
}

@media screen and (max-width:430px) {
 .promotion__title:not(:first-child){
  margin-top: 22px;
 }
}

.promotion__text {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:16px;
  letter-spacing: .02em;
  line-height: 1.5;
  color: #000000;
  text-align: left;
  margin-top: 18px;
}

@media screen and (max-width:430px) {
 .promotion__text{
  line-height: 1.5;
  margin-top: 14px;
 } 
}

.modal__text {
  font-family: 'Noto sans JP';
  font-weight: 500;
  font-size:16px;
  letter-spacing: .02em;
  line-height: 1.33;
  color: #000000;
  margin-top: 31px;
  text-align: center;
}

@media screen and (max-width:430px) {
  .modal__text{
    text-align: left;
    line-height: 1.5;
    letter-spacing: .1em;
    margin-top: 24px;
  }
}

.modal__text +p{
  font-family: 'Noto sans JP';
  font-weight: 500;
  font-size:16px;
  letter-spacing: .02em;
  line-height: 1.125;
  color: #000000;
  margin-top: 5px;
  text-align: center;
}

@media screen and (max-width:430px) {
.modal__text +p{
  line-height: 1.5;
  letter-spacing: .1em;
  text-align: left;
  margin-top: 23px;
}
  
}

@media screen and (max-width:430px) {
 .modal__text br{
  margin-top: 20px;
 } 
}

.modal__button_wrapper {
margin-top: 44px;
text-align: center;
}

@media screen and (max-width:900px) {
 .modal__button_wrapper{
  flex-direction: column;
  align-items: center;
  gap: 20px;
 } 
}

@media screen and (max-width:430px) {
 .modal__button_wrapper{
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: initial;
  gap: 20px;
  margin-top: 27px;
 } 
}

.modal__button.prev {
  background-color: #818181;
}

.modal__button.continue {
  background-image:linear-gradient( -77deg, #128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
  margin-left: 40px;
}

@media screen and (max-width:430px) {
.modal__button.continue {
  margin-left: 0;
  margin-top: 0;
}
  
}

/* magazine */

.magazine {
padding-top: 82px;
padding-bottom: 82px;
display: none;
}

.magazine.active{
  display: block;
}

.magazine__contents.modal__contents {
padding-bottom: 51px;
}

@media screen and (max-width:430px) {
  .magazine__contents.modal__contents {
  padding-bottom: 24px;
  }
}

.magazine__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  }
  
  @media screen and (max-width:430px) {
   .magazine__close{
    top: 30px;
    right: 12px;
    width: 20px;
    height: 20px;
   } 
  }

.magazine__heading.heading {
color: #000000;
letter-spacing: .02em;
}

.magazine__description {
text-align: left;
}

.magazine__promotion.modal__promotion.promotion {
margin-top: 36px;
}

.magazine__promotion .promotion__title:not(:first-child){
margin-top: 24px;
}

.magazine__text.modal__text {
width: 568px;
margin-inline: auto;
}

.promotion__mail_input_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 37px;
}

@media screen and (max-width:780px) {
.promotion__mail_input_wrapper {
  flex-direction: column;
  margin-top: 28px;
  gap: 16px;
  }
}

.promotion__label {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #000000;
}

@media screen and (max-width:430px) {
  .promotion__label{
    align-self: flex-start;
  }
}

.promotion__mail_input_wrapper input{
  width: 68.8571%;
  height: 50px;
  border-radius: 6px;
  border: 1px solid #DCDCDC;
}

@media screen and (max-width:780px) {
.promotion__mail_input_wrapper input{
  width: 100%;
  }
}

.promotion__button_wrapper{
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media screen and (max-width:430px) {
 .promotion__button_wrapper{
  margin-top: 27px;
 } 
}

.modal__button.promotion__button {
  background-image:linear-gradient( -77deg, #128FCD 0%,#B3D6E0 51%,#DC24B1 100%);
  margin-inline: auto;
  display: inline-block;
}

/* footer */

.footer {
padding-top: 80px;
padding-bottom: 60px;
background-image: linear-gradient(159deg, #128FCD 0,#B3D6E0 52%,#DC24B1 100%);
}

@media screen and (max-width:430px) {
  .footer{
    padding-top: 60px;
    padding-bottom: 60px;
    background-image: linear-gradient(129deg, #128FCD 0,#B3D6E0 52%,#DC24B1 100%);
  }
}

.footer__inner.inner {
max-width: 1010px;
}

.footer__logo {
width: 425px;
height: 30px;
margin-inline: auto;
}

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

.footer__logo img{
width: 100%;
}

.footer__nav {
display: flex;
margin-top: 60px;
}

@media screen and (max-width:1000px) {
 .footer__nav{
  flex-direction: column;
 } 
}

@media screen and (max-width:430px) {
 .footer__nav{
  margin-top: 40.44px;
 } 
}

.footer__list,
.media__list {
display: flex;
}

@media screen and (max-width:1000px) {
  .footer__list,
  .media__list {
    justify-content: center;
  }
}

@media screen and (max-width:430px) {
  .footer__list,
  .media__list {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 18px;
  }
}

@media screen and (max-width:430px) {
  .media__item,
  .footer__item{
    flex-basis: 128px;
  }
}

.media__item:not(:first-child) {
margin-left: 39px;
}

@media screen and (max-width:430px) {
  .media__item:not(:first-child) {
  margin-left: initial;
  }
}

.media__link,
.footer__link {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:16px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #FFFFFF;
}


@media screen and (max-width:1000px) {
  .footer__list{
    border-top: 1px solid #FFFFFF;
    padding-top: 28px;
    margin-top: 28px;
  }
}

.footer__item:first-child {
padding-left: 52px;
margin-left: 52px;
border-left: 1px solid #FFFFFF;
}

@media screen and (max-width:1000px) {
.footer__item:first-child {
  padding-left: initial;
  margin-left: initial;
  border-left: none;
}
}

.footer__item:not(:first-child) {
margin-left: 39px;
}

@media screen and (max-width:430px) {
 .footer__item:not(:first-child){
  margin-left: initial;
 } 
}

.footer__link {
white-space: nowrap;
}

.copyright {
  font-family: 'Noto sans JP';
  font-weight: 400;
  font-size:12px;
  letter-spacing: .1em;
  line-height: 1.4166;
  color: #FFFFFF;
  display: block;
  text-align: center;
margin-top: 60px;
}

@media screen and (max-width:600px) {
 .copyright{
  margin-top: 40px;
  text-align: left;
 } 
}

/* 共通 */

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

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

.product__title {
  font-family: 'Orbitron';
  font-weight: 500;
  font-size:77px;
  letter-spacing: .1em;
  line-height: 1.0909;
  color: #fff;
  writing-mode: vertical-rl;
  -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
align-self: flex-start;
position: sticky;
top: 120px;
}

@media screen and (max-width:900px) {
  .product__title{
    font-size: 36px;
    top: 60px;
  }
}

.heading{
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:32px;
  letter-spacing: .1em;
  line-height: 1.4375;
  color: #fff;
  text-align: center;
}

@media screen and (max-width:430px) {
  .heading{
    font-size: 22px;
    line-height: 1.4545;
  }
}

.product__category {
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1;
  color: #fff;
  width: 300px;
  padding: 20px 0;
  text-align: center;
  border-radius: 10px;
}

@media screen and (max-width:900px) {
  .product__category{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    width: 100%;
    height: 50px;
    padding: 19px 0;
    border-radius: 6px;
  }
}

.sp-show{
  display: none;
}

@media screen and (max-width:430px) {
  .sp-show{
   display: block;
  }
}

.tb-show{
  display: none;
}

@media screen and (max-width:780px) {
  .tb-show{
   display: block;
  }
}

.md-show{
  display: none;
}

@media screen and (max-width:580px) {
  .md-show{
   display: block;
  }
}

.md-none{
  display: block;
}

@media screen and (max-width:580px) {
  .md-none{
   display: none;
  }
}

@media screen and (max-width:430px) {
  .sp-none{
   display: none;
  }
}

@media screen and (max-width:900px) {
  .md-none{
   display: none;
  }
}

.modal__button{
  font-family: 'Noto sans JP';
  font-weight: 600;
  font-size:20px;
  letter-spacing: .1em;
  line-height: 1;
  color: #FFFFFF;
  border-radius: 30px;
  width: 255px;
  height: 60px;
}

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

#map{
  height: 410px;
}

  @media screen and (max-width:430px) {
    #map{
      height: auto;
      aspect-ratio: 335/281;
    }
  }