@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"); */
}
/* @font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://sadokatsu.tane-test.site/media/files/font/NotoSerifJP-Bold.woff") format("truetype");
}
@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://sadokatsu.tane-test.site/media/files/font/NotoSerifJP-SemiBold.woff") format("truetype");
}
@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://sadokatsu.tane-test.site/media/files/font/NotoSerifJP-Medium.woff") format("truetype");
}

@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://sadokatsu.tane-test.site/media/files/font/NotoSerifJP-Bold.woff") format("truetype");
}
@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://sadokatsu.tane-test.site/media/files/font/NotoSerifJP-SemiBold.woff") format("truetype");
}
@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://sadokatsu.tane-test.site/media/files/font/NotoSerifJP-Medium.woff") format("truetype");
}

@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://sadokatsu.tane-test.site/media/files/font/NotoSerifJP-Regular.woff") format("truetype");
}

@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://sadokatsu.tane-test.site/media/files/font/NotoSerifJP-Light.woff") format("truetype");
} */
.sp_hidden_block{
  display: none;
  @media (min-width: 1272px) {
      display: flex;
    }
}
.sp_hidden {
  transition: 0.5s;
  display: none;
  @media (min-width: 1272px) {
      opacity: 0;
      pointer-events: none;
    }
}

html.is-spMenu-opened {
  overflow: hidden;
  .sp_hidden {
    @media (min-width: 1272px) {
      opacity: 0;
      pointer-events: none;
    }
  }
  #js-spMenu {
    opacity: 1;
    visibility: visible;
    padding-bottom: 20rem;
  }
  #js-burger {
    background-color: transparent;
    transition: 0.5s;
    border: none;
  }
}
#js-spMenu {
  height: calc(var(--vh, 1vh) * 100 - 60rem);
  top: 100dvh;
  @media (min-width: 768px) {
    height: calc(var(--vh, 1vh) * 100 - 60rem);
  }
}
.js-details__summary {
  &::before {
    transition: all 0.4s ease-out;
  }
}
.js-details[open] {
  .js-details__summary {
    .sp_arrow {
      transform: rotateX(180deg);
      top: calc(50% - 4px);
    }
  }
}
summary::-webkit-details-marker {
  display: none;
}
#pankuzu {
  scrollbar-width: none;
}
.description-0 {
  display: none;
}
.privacy-policy {
}
.js-hd-dropDown-container {
  height: 96px;
}
.text_shadow {
  -moz-text-shadow: 5px 5px 13px rgba(0, 0, 0, 1);
  -webkit-text-shadow: 5px 5px 13px rgba(0, 0, 0, 1);
  -ms-text-shadow: 5px 5px 13px rgba(0, 0, 0, 1);
  text-shadow: 5px 5px 13px rgba(0, 0, 0, 1);
}

.group:hover .svg-arrow-left {
  transform: translateX(20px) translateY(-50%);
}

.group:hover .svg-arrow-right {
  transform: translateX(-20px) translateY(-50%);
}
.js-hd-dropDown.active {
  img {
    transform: rotateX(180deg);
  }
}
.header-left-hover::before:hover {
  left: 100%;
}
/*  */
.sp_menu_open  #js-spMenu {
  opacity: 1;
  visibility: visible;
  top: 60rem;
}
.sp_menu_open #js-burger-line--1 {
  transform: rotate(45deg);
  top: 11rem;
  width: 26rem;
}
.sp_menu_open #js-burger-line--2 {
  transform: rotate(-45deg);
  top: 11rem;
  width: 26rem;
}
.sp_menu_open #js-burger-line--3 {
  transform: rotate(-45deg);
  opacity: 0;
}
.sp_menu_open {
  header {
    background-color: #fff;
  }
  #js-spMenu {
    opacity: 1;
    visibility: visible;
    top: 60rem;
  }
  #js-burger-line--1 {
    transform: rotate(45deg);
    top: 11rem;
    width: 26rem;
  }
  #js-burger-line--2 {
    transform: rotate(-45deg);
    top: 11rem;
    width: 26rem;
  }
  #js-burger-line--3 {
    transform: rotate(-45deg);
    opacity: 0;
  }
}
/* Tailwindを使用しない場合のカスタムCSS */
.line-clamp-3 {
  display: -webkit-box; /* フレックスベースでレイアウト */
  -webkit-line-clamp: 3; /* 表示する行数 */
  -webkit-box-orient: vertical; /* 垂直方向にテキストを切り詰め */
  overflow: hidden; /* 溢れた部分を隠す */
  text-overflow: ellipsis; /* 「...」を表示 */
}
header {
  /* box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1); */
}
.contetnt_shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.pankuzu {
  display: flex;
  gap: 50rem;
  scrollbar-width: none;
  white-space: nowrap;
  overflow-x: scroll;
  align-items: center;
  overflow-x: scroll;
  padding-top: 14rem;
  padding-bottom: 8rem;
  font-size: 14rem;
  @media (min-width: 1272px) {
    padding-top: 57rem;
    padding-bottom: 44rem;
  }
}
.pankuzu li a:not(.last) {
  position: relative;
  font-size: 14rem;
}
.pankuzu li a:not(.last):after {
  position: absolute;
  content: "";
  right: -27rem;
  top: 49%;
  transform: translateY(-50%);
  background: url("https://sadokatsu.com/wp-content/themes/sadokatsu2021/asset/media/images/cart/common/pankuzu.svg") no-repeat center/contain;
  width: 9rem;
  height: 20rem;
}
.pankuzu li a {
  transition: 0.5s;
  font-size: 14rem;
  @media (min-width: 1272px) {
    &:hover {
      color: #C45302;
    }
  }
}
.pankuzu li a.last {
  pointer-events: none;
}
.c-page-top.on {
  opacity: 1;
  pointer-events: auto;
}
.c-banner.on {
  opacity: 1;
  pointer-events: auto;
}
.js-open {
  max-height: 0; /* 初期状態で非表示 */
  overflow: hidden; /* 内容がはみ出さないようにする */
  opacity: 0; /* 透明にする */
  transition: max-height 0.3s ease, opacity 0.3s ease; /* アニメーションの設定 */
}

.js-open.open {
  max-height: 600px; /* 開くときの高さを指定（必要に応じて調整） */
  opacity: 1; /* 完全に表示 */
}
.js-content {
  max-height: 0; /* 初期は非表示 */
  overflow: hidden; /* スクロールを隠す */
  transition: max-height 0.3s ease; /* アニメーションのスムーズさ */
  /* padding-bottom: 3rem; */
}
.js-toggle,
.question {
  cursor: pointer;
  position: relative;
  transition: 0.5s;
  &::after {
    transition: 0.5s;
    width: 20rem;
    height: 20rem;
    top: 5rem;
    right: 0;
    position: absolute;
    content: "";
    background: url("https://sadokatsu.com/wp-content/themes/sadokatsu2021/asset/media/images/cart/common/swiper_arrow.svg") no-repeat
      center/contain;
    transform: translateY(0) rotate(90deg);
    @media (max-width: 767px) {
      width: 16rem;
      height: 16rem;
    }
  }
  &.open {
    &::after {
      transform: translateY(0) rotate(-90deg);
    }
  }
}

.num_list {
  counter-reset: number 0;
  list-style: none;
  li:before {
    content: "(" counters(number, ".") ")";
    counter-increment: number;
  }
}

.seminar_none {
  font-size: 24rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 58rem;
  background-color: #f7f7f7;
  text-align: center;
  margin-top: 80rem;
  @media (max-width: 767px) {
    font-size: 18rem;
    padding: 20rem;
    margin-top: 20rem;
  }
}
.sp_none {
  @media (max-width: 767px) {
    display: none;
  }
  @media (min-width: 768px) {
    display: block;
  }
}
.pc_none {
  @media (max-width: 767px) {
    display: block;
  }
  @media (min-width: 768px) {
    display: none;
  }
}

.shadow-box {
  text-shadow: 0px 3rem 20rem rgba(0, 0, 0, 0.16);
}
.bg-box {
  box-shadow: 0px 3rem 6rem rgba(0, 0, 0, 0.16);
}

html {
  &.is-scrolled {
    #header {
  opacity: 1;
  z-index: 50;
    }
  }
}
.parallax-image {
  background-image: url("https://sadokatsu.com/wp-content/themes/sadokatsu2021/asset/media/images/cart/home/bg_sp.webp"); /* モバイル用 */
}

@media (min-width: 768px) {
  .parallax-image {
    background-image: url("https://sadokatsu.com/wp-content/themes/sadokatsu2021/asset/media/images/cart/home/bg.webp"); /* PC用 */
  }
}
/* a:hover, a:focus{
  text-decoration: none;
  color: initial;
} */
.swiper-button-prev:after,.swiper-button-next:after{
content:none !important;
}
.swiper-button-prev,.swiper-button-next{
  width: 40rem !important;
  height: 40rem !important;
}