@charset "UTF-8";
@tailwind base;

/* 追加で記述 */
/* roboto */
@font-face {
  /* font-family: "roboto";  */
  /* font-style: italic; */
  /* font-weight: 700; */
  /* font-display: swap; */
  /* src: url("/media/files/font/Roboto-BoldItalic.ttf") format("truetype"); */
}
/* figtree */
@font-face {
  font-family: "Figtree"; /*自分で好きな名前を付ける*/
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/media/files/font/Figtree-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; /*自分で好きな名前を付ける*/
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/media/files/font/Figtree-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; /*自分で好きな名前を付ける*/
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/media/files/font/Figtree-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; /*自分で好きな名前を付ける*/
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/media/files/font/Figtree-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; /*自分で好きな名前を付ける*/
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/media/files/font/Figtree-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Figtree"; /*自分で好きな名前を付ける*/
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/media/files/font/Figtree-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "roboto"; /*自分で好きな名前を付ける*/
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/media/files/font/Roboto-BoldItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/media/files/font/NotoSansJP-Black.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/media/files/font/NotoSansJP-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/media/files/font/NotoSansJP-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/media/files/font/NotoSansJP-Regular.ttf") format("truetype");
}
.sp_hidden {
  transition: 0.5s;
}
.is-spMenu-opened {
  overflow: hidden;
}

/* .is-spMenu-opened .sp_hidden {
    @media (min-width: 1272px) {
      opacity: 0;
      pointer-events: none;
    }
} */

@media (min-width: 1272px) {
  .is-spMenu-opened .sp_hidden {
    opacity: 0;
    pointer-events: none;
  }
}

.is-spMenu-opened #js-spMenu {
  opacity: 1;
  visibility: visible;
  padding-bottom: 20rem;
}
.is-spMenu-opened #js-burger {
  background-color: transparent;
  transition: 0.5s;
  border: none;
}
.is-spMenu-opened #js-burger-line--1 {
  transition: 0.5s;
  width: 46px;
  height: 4px;
  background-color: #3bb0b4;
  transform: rotate(45deg);
  top: 8px;
  right: -6px;
  @media (min-width: 768px) {
    left: auto;
    right: -3px;
    width: 36px;
  }
  @media (min-width: 1272px) {
    width: 57px;
  }
}
.is-spMenu-opened #js-burger-line--2 {
  transition: 0.5s;
  width: 46px;
  height: 4px;
  background-color: #3bb0b4;
  transform: rotate(-45deg);
  top: 8px;
  right: -6px;
  @media (min-width: 768px) {
    width: 36px;
    right: -4px;
  }
  @media (min-width: 1272px) {
    width: 57px;
  }
}
.is-spMenu-opened #js-burger-line--3 {
  transition: 0.5s;
  background-color: transparent;
}

#js-spMenu {
  height: calc(var(--vh, 1vh) * 100 - 80rem);
}

@media (min-width: 768px) {
  #js-spMenu {
    height: calc(var(--vh, 1vh) * 100 - 80rem);
  }
}

/* .js-details__summary {
  &::before {
    transition: all 0.4s ease-out;
  }
} */
/* .js-details__summary::before {
  -webkit-transition: -webkit-transform 0.4s;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
} */

/* .js-details[open] {
  .js-details__summary {
    &::before {
      transform: rotate(90deg);
    }
  }
} */

/* .js-details[open] .js-details__summary::before {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);
} */


.js-details__summary::before {
  transition: all 0.4s;
  animation: rotate-close 0.4s forwards;
}
.js-details[open] .js-details__summary::before {
  animation: rotate-open 0.4s forwards;
}

@keyframes rotate-open{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(90deg);
  }
}

@keyframes rotate-close {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(0deg);
  }
}



/* .grid_1 {
  @media only screen and (min-width: 1272px) {
    grid-area: 1 / 1 / 2 / 2;
  }
}
.grid_2 {
  @media only screen and (min-width: 1272px) {
    grid-area: 2 / 1 / 3 / 2;
  }
}
.grid_3 {
  @media only screen and (min-width: 1272px) {
    grid-area: 1 / 3 / 2 / 4;
  }
}
.grid_4 {
  @media only screen and (min-width: 1272px) {
    grid-area: 2 / 2 / 3 / 3;
  }
}
.grid_5 {
  @media only screen and (min-width: 1272px) {
    grid-area: 1 / 4 / 2 / 5;
  }
}
.grid_6 {
  @media only screen and (min-width: 1272px) {
    grid-area: 1 / 2 / 2 / 3;
  }
} */


/* .menu_grid_1 {
  @media only screen and (min-width: 1272px) {
    grid-area: 1 / 1 / 2 / 2;
  }
}
.menu_grid_2 {
  @media only screen and (min-width: 1272px) {
    grid-area: 2 / 1 / 3 / 2;
  }
}
.menu_grid_3 {
  @media only screen and (min-width: 1272px) {
    grid-area: 3 / 1 / 4 / 2;
  }
}
.menu_grid_4 {
  @media only screen and (min-width: 1272px) {
    grid-area: 4 / 1 / 5 / 2;
  }
}
.menu_grid_5 {
  @media only screen and (min-width: 1272px) {
    grid-area: 5 / 1 / 6 / 2;
  }
}
.menu_grid_6 {
  @media only screen and (min-width: 1272px) {
    grid-area: 1 / 2 / 2 / 3;
  }
}
.menu_grid_7 {
  @media only screen and (min-width: 1272px) {
    grid-area: 2 / 2 / 3 / 3;
  }
}
.menu_grid_8 {
  @media only screen and (min-width: 1272px) {
    grid-area: 3 / 2 / 4 / 3;
  }
} */

@media only screen and (min-width: 1272px) {
  .menu_grid_1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .menu_grid_2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  .menu_grid_3 {
    grid-area: 3 / 1 / 4 / 2;
  }
  .menu_grid_4 {
    grid-area: 4 / 1 / 5 / 2;
  }
  .menu_grid_5 {
    grid-area: 5 / 1 / 6 / 2;
  }
  .menu_grid_6 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .menu_grid_7 {
    grid-area: 2 / 2 / 3 / 3;
  }
  .menu_grid_8 {
    grid-area: 3 / 2 / 4 / 3;
  }
}

summary::-webkit-details-marker {
  display: none;
}
#pankuzu {
  scrollbar-width: none;
}
.one {
  transition-delay: 0s;
}

.two {
  transition-delay: 0.5s;
}

.three {
  transition-delay: 0.5s;
}

.four {
  transition-delay: 0.5s;
}
.logo-swiper {
  .swiper-slide {
    border: 1px solid #bcbcbc;
    padding: 10rem 30rem;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/2;
    max-height: 90rem;
    max-width: 250rem;
    img {
      object-fit: contain;
      object-position: center center;
      width: 100%;
      height: 100%;
    }
  }
}
.pankuzu {
  display: flex;
  gap: 50rem;
  scrollbar-width: none;
  white-space: nowrap;
  overflow-x: scroll;
  align-items: center;
  overflow-x: scroll;
  padding-top: 8rem;
  padding-bottom: 8rem;
  @media (min-width: 1272px) {
    padding-top: 24rem;
    padding-bottom: 44rem;
  }
  li a:not(.last) {
    position: relative;
  }
  li a:not(.last):after {
    position: absolute;
    content: "";
    right: -27rem;
    top: calc(50% + 1rem);
    transform: translateY(-50%);
    background: url(/media/images/common/pankuzu.svg) no-repeat center/contain;
    width: 10rem;
    height: 10rem;
  }
  li a {
    transition: 0.5s;
    @media (min-width: 1272px) {
      &:hover {
        color: #3bb0b4;
      }
    }
  }
  li a.last {
    pointer-events: none;
  }
}
.description-0{
  display: none;
}
.privacy-policy{
  
}

.u-hover-zoom{
  overflow: hidden;
}
.u-hover-zoom img{
  transition:transform 0.3s;
}
@media only screen and (min-width:768px){
  .u-hover-zoom:hover img{
    transform: scale(1.1);
  }
}

.overflow-visible{
  overflow: visible;
}