@charset "UTF-8";

/* --------------------
  FV
-------------------- */
#index .fv {
  height: 200vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}
#index .fv #bgVideo {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}
#index .fv .comment-box {
  position: absolute;
  bottom: -0.1%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale));
  font-family: "yu-mincho-pr6n", sans-serif;
  opacity: 0;
}
#index .fv .comment-box .bg {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.9);
  transform: scaleX(0) scaleY(0);
  transform-origin: bottom center;
  will-change: transform;
}
#index .fv .comment-box .text {
  position: relative;
  padding: 60px 70px;
  font-size: clamp(0.688rem, 0.186rem + 1.04vw, 1.125rem);
  line-height: 2.4;
}
#index .fv .comment-box .line {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}
#index .fv .comment-box p.up {
  font-size: clamp(1rem, -0.003rem + 2.09vw, 1.875rem);
  line-height: 3;
}
#index .fv .copy-text {
  position: absolute;
  bottom: 0%;
  right: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #fff;
  padding: 10px;
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(3.75rem, -0.548rem + 8.94vw, 7.5rem);
  opacity: 0;
  will-change: transform, opacity, filter;
}
#index .up_contents {
  background: #fff;
  position: relative;
  z-index: 1;
}
#index p {
  margin: 0;
}
@media (max-width: 1200px) {
  #index .fv .comment-box .text {
    padding: 60px 40px;
  }
}
@media (max-width: 768px) {
  #index .fv .fv_bg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: url("../img/index/fv-bg_sp.png") center center/cover no-repeat;
  }
  #index .fv .movie_wrap {
    width: 100%;
    height: auto;
    transform: translateY(calc(50% + 64px));
    aspect-ratio: 1020 / 574;
    overflow: hidden;
  }
  #index .fv #bgVideo {
    height: auto;
    top: 50%;
    transform: scale(1.05) translateY(-49%);
  }
  #index .fv .copy-text {
    bottom: 38%;
    right: 0%;
    left: 0%;
    writing-mode: lr;
    font-size: clamp(3.75rem, 0.172rem + 15.27vw, 7.5rem);
    line-height: 1.2;
  }
  #index .fv .comment-box {
    width: 100%;
    transform: translate(-50%, 0) scale(var(--scale));
  }
  #index .fv .comment-box .text {
    padding: 6% 8%;
  }
  #index .fv .comment-box .line {
    font-size: clamp(0.688rem, 0.031rem + 2.8vw, 1.375rem);
  }
  #index .fv .comment-box p.up {
    margin-top: 3%;
    font-size: clamp(1.313rem, 0.656rem + 2.8vw, 2rem);
    line-height: 1.5;
  }
}
@media (max-width: 440px) {
  #index .fv .copy-text {
    bottom: 25%;
  }
}
/* --------------------
  Campaign
-------------------- */
#index .campaign {
  margin: auto;
  padding: 100px 0 180px;
}
#index .campaign .slider_wrap .slider .slick-slide {
  cursor: pointer;
}
#index .campaign .slider_wrap .slider img {
  width: 90%;
  margin: auto;
}
#index .campaign .slider_wrap .slider p {
  padding-top: 10px;
}
#index .campaign .slider_wrap .slider .slick-dots li button {
  display: none;
}
#index .campaign .slider_wrap .slider .slick-dots {
  bottom: -15%;
  height: 4%;
}
#index .campaign .slider_wrap .slider .slick-dots li {
  width: auto;
  height: 100%;
  margin: 0% 0.4%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid #e84d07;
  border-radius: 50%;
  transition: 0.2s;
}
#index .campaign .slider_wrap .slider .slick-dots li.slick-active {
  background-color: #e84d07;
}
@media (max-width: 768px) {
  #index .campaign {
    padding: 12% 0 20%;
  }
  #index .campaign .slider_wrap .slider p {
    font-size: 0.7rem;
  }
}
/* --------------------
  intro
-------------------- */
#index .intro {
  margin: auto;
  color: #fff;
}
#index .intro .container {
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 30%,
    #e84d07 30%,
    #e84d07 100%
  );
  margin: auto;
  max-width: 100%;
  text-align: center;
}
#index .intro .movie {
  position: relative;
  max-width: 804px;
  margin: auto;
  width: 58.1%;
  height: auto;
  padding-bottom: 0;
  overflow: inherit;
  border: none;
}
video {
  width: 100%;
  height: auto;
  display: block;
}
#index .intro .movie video,
#index .intro .movie img {
  clip-path: inset(0 0 1px 0);
  -webkit-mask-image: linear-gradient(-30deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(-30deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 100%);
  -webkit-mask-size: 100% 350%;
  mask-size: 100% 350%;
  -webkit-mask-position: 0% 100%;
  mask-position: 0% 100%;
  transition: 1.8s;
}
#index .intro .movie.trigger.move video,
#index .intro .movie.trigger.move img {
  mask-position: 0% 0%;
}
#index .intro .tit {
  position: absolute;
  inset: 50% 0 auto;
  margin: auto;
  writing-mode: vertical-lr;
  display: inline-table;
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(0.875rem, 0.302rem + 1.19vw, 1.375rem);
  letter-spacing: 0.23em;
}
#index .intro .tit::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 50%;
  transform: rotate(90deg) translate(90%, 0%);
  transform-origin: 100% 50%;
  width: 80px;
  height: 1px;
  background: #fff;
}
#index .intro .allinone {
  display: flex;
  gap: 0 40px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  padding: 110px 0 0;
}
#index .intro .allinone .logo {
  max-width: 125px;
}
#index .intro .allinone .text_wrap p {
  line-height: 1;
}
#index .intro .allinone .text_wrap .text1 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(4rem, 2.567rem + 2.98vw, 5.25rem);
  line-height: 1;
}
#index .intro .allinone .text_wrap .text2 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(3.125rem, 2.409rem + 1.49vw, 3.75rem);
  line-height: 1.4;
}
#index .intro .allinone .text_wrap .text3 {
  font-family: "montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(0.813rem, 0.669rem + 0.3vw, 0.938rem);
}
@media (max-width: 900px) {
  #index .intro .tit {
    inset: 45% 0 auto;
  }
  #index .intro .tit::after {
    bottom: -10px;
    width: 50px;
  }
}
@media (max-width: 768px) {
  #index .intro .movie {
    width: 81.182%;
  }
  #index .intro .tit {
    inset: 10% 0 auto;
    margin: 0 auto 0 2%;
    font-size: clamp(1rem, 0.046rem + 4.07vw, 2rem);
  }
  #index .intro .allinone {
    display: grid;
    justify-items: center;
    padding: 10% 0 0;
  }
  #index .intro .allinone .text_wrap {
    padding-top: 7%;
  }
  #index .intro .allinone .text_wrap .text1 {
    font-size: clamp(3.25rem, 2.057rem + 5.09vw, 4.5rem);
  }
  #index .intro .allinone .text_wrap .text2 {
    font-size: clamp(2.5rem, 1.307rem + 5.09vw, 3.75rem);
  }
  #index .intro .allinone .text_wrap .text3 {
    font-size: clamp(0.75rem, 0.511rem + 1.02vw, 1rem);
  }
}
/* --------------------
  Which
-------------------- */
#index .which {
  background: #e84d07;
  color: #fff;
  padding: 30px 0 10%;
}
#index .which .or_wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 70%;
  margin: 0 auto -174px;
}
#index .which .or_wrap .white {
  background: #fff;
  color: #e84d07;
  padding: 30px 0px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}
#index .which .or_wrap .orange {
  border: 1px solid #fff;
  padding: 30px 0px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}
#index .which .or_wrap .or {
  font-family: "cormorant-garamond", serif;
  font-size: clamp(1.875rem, 1.159rem + 1.49vw, 2.5rem);
  padding: 0 30px;
}
#index .which .or_wrap .let1 {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  line-height: 0;
}
#index .which .or_wrap .let1 svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
#index .which .or_wrap .let1 text {
  font-size: clamp(3.125rem, 2.122rem + 2.09vw, 4rem);
  letter-spacing: 0.08em;
  fill: #fff;
}
#index .which .or_wrap .white .let1 text {
  fill: #e84d07;
}
#index .which .or_wrap .let2 {
  font-family: "cormorant-garamond", serif;
  font-size: clamp(2.5rem, 1.64rem + 1.79vw, 3.25rem);
  text-align: center;
  line-height: 0;
  margin-bottom: 10px;
}
#index .which .center_wrap {
  display: flex;
  position: relative;
  justify-content: center;
  width: 100%;
  max-width: 1156px;
  margin: auto;
}
#index .which .center_wrap .left,
#index .which .center_wrap .right {
  position: relative;
  width: 50%;
}
#index .which .center_wrap .left .bg {
  overflow: hidden;
  border-radius: 110px 0 0 110px;
}
#index .which .center_wrap .right .bg {
  overflow: hidden;
  border-radius: 0 110px 110px 0;
}
#index .which .bg {
  position: relative;
  width: 100%;
  aspect-ratio: 578 / 753;
  z-index: 1;
}
#index .which .bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#index .which .bg img.active {
  z-index: 1;
}
#index .which .bg img.next {
  z-index: 2;
  -webkit-mask-image: linear-gradient(
    -30deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.6) 50%,
    rgba(0,0,0,1) 65%,
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(
    -30deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.6) 50%,
    rgba(0,0,0,1) 65%,
    rgba(0,0,0,1) 100%
  );
  -webkit-mask-size: 120% 420%;
  mask-size: 120% 420%;
  -webkit-mask-position: 0% 100%;
  mask-position: 0% 100%;
  animation: maskSlide 2.2s cubic-bezier(.65,0,.2,1) forwards;
}
@keyframes maskSlide {
  to {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
}
#index .which .center_wrap .cont_group {
  position: absolute;
  top: 22%;
  width: 62%;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  z-index: 5;
}
#index .which .center_wrap .right .cont_group {
  right: 0%;
}
#index .which .center_wrap .cont_group .tate p {
  writing-mode: vertical-lr;
  background: #fff;
  color: #66a8db;
  font-weight: 600;
  font-size: clamp(0.938rem, 0.293rem + 1.34vw, 1.5rem);
  letter-spacing: 0.1rem;
  padding: 14px 3px;
}
#index .which .center_wrap .right .cont_group .tate p {
  color: #e84d07;
}
#index .which .center_wrap .cont_group .yoko {
  text-align: right;
}
#index .which .center_wrap .right .cont_group .yoko {
  text-align: left;
}
#index .which .center_wrap .cont_group .yoko .yoko1 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(2.313rem, 1.023rem + 2.68vw, 3.438rem);
  position: relative;
  font-feature-settings: "palt";
  padding-bottom: 20px;
}
#index .which .center_wrap .cont_group .yoko .yoko1 span {
  font-size: clamp(0.438rem, 0.223rem + 0.45vw, 0.625rem);
  position: absolute;
  right: -3%;
  margin-top: 7%;
}
#index .which .center_wrap .cont_group .yoko .yoko2 {
  font-size: clamp(0.75rem, 0.463rem + 0.6vw, 1rem);
}
#index .which .center_wrap .cont_group .yoko .yoko2 span {
  border: 1px solid #fff;
  padding: 5px 10px;
}
#index .which .center_wrap .cont_group .yoko .yoko3 {
  font-size: clamp(0.5rem, 0.285rem + 0.45vw, 0.688rem);
  line-height: 4;
}
#index .which .center_wrap .item {
  position: absolute;
  bottom: -15%;
  z-index: 10;
}
#index .which .arrow_wrap {
  margin: auto;
  width: 59%;
}
@media (max-width: 1000px) {
  #index .which .or_wrap {
    margin: 0 auto -16%;
  }
}
@media (max-width: 768px) {
  #index .which .center_wrap .cont_group .yoko .yoko2 span {
    padding: 2px 1px;
  }
}
@media (max-width: 768px) {
  #index .which .or_wrap {
    margin: 0 auto -29%;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 50% 8% 50%;
    justify-items: center;
  }
  #index .which .or_wrap .or {
    padding: 50px 3% 0;
    font-size: clamp(1.25rem, 0.057rem + 5.09vw, 2.5rem);
  }
  #index .which .or_wrap .white,
  #index .which .or_wrap .orange {
    width: 100%;
    padding: 30px 3%;
  }
  #index .which .or_wrap .let1 text {
    font-size: clamp(3.75rem, 3.154rem + 2.54vw, 4.375rem);
  }
  #index .which .or_wrap .let2 {
    font-size: clamp(1.563rem, 0.072rem + 6.36vw, 3.125rem);
  }
  #index .which .scroll_wrap {
    margin: 0;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    cursor: e-resize;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  #index .which .center_wrap {
    width: 195%;
    max-width: 1490px;
    margin: 0;
    padding-bottom: 23%;
  }
  #index .which .center_wrap .cont_group {
    display: grid;
    grid-template-columns: 1fr 20%;
    gap: 0;
    width: 57%;
  }
  #index .which .center_wrap .right .cont_group {
    grid-template-columns: 20% 1fr;
  }
  #index .which .center_wrap .left .cont_group .tate p {
    margin-left: auto;
  }
  #index .which .center_wrap .cont_group .tate p {
   font-size: clamp(0.813rem, -0.44rem + 5.34vw, 2.125rem);
  }
  #index .which .center_wrap .cont_group .yoko .yoko1 {
    font-size: clamp(2.25rem, -0.374rem + 10.9vw, 5rem);
    line-height: 1.3;
  }
  #index .which .center_wrap .cont_group .yoko .yoko2 {
    font-size: clamp(0.688rem, 0.151rem + 2.29vw, 1.25rem);
  }
  #index .which .center_wrap .cont_group .yoko .yoko3 {
    font-size: clamp(0.438rem, 0.199rem + 1.02vw, 0.688rem);
  }
  #index .which .center_wrap .item {
    bottom: 0%;
  }
  #index .which .center_wrap .cont_group .yoko .yoko1 span {
    right: 1%;
    margin-top: 1%;
  }
}
@media (max-width: 440px) {
  #index .which .or_wrap .white,
  #index .which .or_wrap .orange {
    padding: 16px 0;
  }
  #index .which .or_wrap {
    margin: 0 auto -31%;
  }
  #index .which .or_wrap .let2 {
    margin-top: -6%;
  }
  #index .which .center_wrap {
    padding-bottom: 16%;
  }
  #index .which .center_wrap .cont_group .yoko .yoko2 span {
    padding: 2px 1px;
  }
  #index .which .center_wrap .cont_group .yoko .yoko1 span {
    margin-top: 2%;
  }
  #index .which .center_wrap .left .cont_group {
    left: 2%;
  }
  #index .which .center_wrap .right .cont_group {
    right: 2%;
  }
}
/* --------------------
  tech
-------------------- */
#index .tech-section.bg-sky {
  position: relative;
  padding: 72.3% 0 12%;
  overflow: hidden;
}
#index .tech-section .bg {
  position: absolute;
  inset: 0;
  background: url("../img/index/tech-bg.jpg") top center/cover no-repeat;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 85%,
    rgba(0,0,0,0.7) 96%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 85%,
    rgba(0,0,0,0.7) 96%,
    rgba(0,0,0,0) 100%
  );
}
#index .tech-section .hand_wrap {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 90.878%;
  transform: translate(18%, 10%);
}
#index .tech-section .bottle {
  position: relative;
  z-index: 1;
  margin-left: 19.31%;
  margin-bottom: -2.33%;
  width: 37.761%;
}
#index .tech-section .bottle.trigger img {
  transition: 0.8s;
  opacity: 0;
  transform: translateY(-30px);
}
#index .tech-section .bottle.trigger.move img {
  opacity: 1;
  transform: translateY(0);
}
#index .tech-section .hand {
}
#index .tech-section .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
#index .tech-section .tech-visual {
  position: relative;
  width: 114.6%;
  max-width: 1100px;
  background: 0;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 60px 40px 50px;
  text-align: center;
  display: grid;
  grid-template-columns: 40% 55%;
  gap: 0 5%;
}
#index .tech-section .tech-visual::after {
  content: "01";
  color: #ffffff00;
  position: absolute;
  top: 2%;
  right: 1%;
  font-size: clamp(7.5rem, 3.202rem + 8.94vw, 11.25rem);
  -webkit-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
  paint-order: stroke;
  writing-mode: vertical-lr;
  line-height: 0.9;
  font-family: "montserrat", sans-serif;
}
#index .tech-section .tech-visual .movie {
  width: 164.8%;
  max-width: 697px;
  margin-left: -44%;
  overflow: hidden;
}
#index .tech-section .tech-visual .movie video {
  width: 100%;
  transform: scale(1.02);
}
#index .tech-section .tech-visual .text1 {
  text-align: left;
  width: 74%;
  margin: 36px auto 0;
}
#index .tech-section .tech-visual .text1 .wow1 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(1.5rem, 0.354rem + 2.38vw, 2.5rem);
  display: inline-grid;
  grid-template-columns: 95% 5%;
  margin: 60px 0 0;
  position: relative;
}
#index .tech-section .tech-visual .text1 .wow1 span {
  font-size: clamp(0.563rem, 0.348rem + 0.45vw, 0.75rem);
}
#index .tech-section .tech-visual .text1 .wow2 {
  font-size: clamp(1rem, 0.499rem + 1.04vw, 1.438rem);
  color: #fff;
  background: #e84d07;
  text-align: center;
}
#index .tech-section .tech-visual .text2 {
  width: 93%;
  text-align: justify;
  margin: 25px 0 0 0;
}
#index .tech-section .tech-visual .text2 p {
  font-size: clamp(0.563rem, 0.348rem + 0.45vw, 0.75rem);
  line-height: 1.3;
}
#index .tech-section .tech-visual .danmen {
  width: 113.1%;
  max-width: 658px;
  margin: -40% 0 0 -5.6%;
  z-index: 1;
}
#index .step-section {
  max-width: 1440px;
  margin: auto;
}
#index .step-section .step-container {
  margin: 9% 0 0 auto;
  padding: 0;
  max-width: 1270px;
}
#index .step-section .wow_face {
  position: relative;
  display: flex;
  gap: 0 2%;
  justify-content: space-between;
}
#index .step-section .wow_face .photo {
  -webkit-mask-image: linear-gradient(-30deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(-30deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 100%);
  -webkit-mask-size: 100% 350%;
  mask-size: 100% 350%;
  -webkit-mask-position: 0% 100%;
  mask-position: 0% 100%;
  transition: 1.8s;
}
#index .step-section .wow_face .photo.trigger.move {
  mask-position: 0% 0%;
}
#index .step-section .wow_face .tit {
  color: #fff;
  writing-mode: vertical-lr;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#index .step-section .wow_face .tit .tit1 {
  font-family: "cormorant-garamond", serif;
  font-size: clamp(6.25rem, 5.104rem + 2.38vw, 7.25rem);
  line-height: 1;
  margin: 0;
}
#index .step-section .wow_face .tit .tit2 {
  font-size: clamp(0.875rem, 0.23rem + 1.34vw, 1.438rem);
  line-height: 1;
  margin: 0;
}
#index .step-section .step-info {
  position: relative;
  width: 114.6%;
  max-width: 1100px;
  background: 0;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 20px 0 40px 20px;
  display: grid;
  grid-template-columns: 40% 55%;
  gap: 0 5%;
  margin: 9% auto 6%;
  align-items: center;
}
#index .step-section .step-info::before {
  content: "02";
  color: #ffffff00;
  position: absolute;
  top: 2%;
  left: 0%;
  font-size: clamp(7.5rem, 3.202rem + 8.94vw, 11.25rem);
  -webkit-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
  paint-order: stroke;
  writing-mode: vertical-lr;
  line-height: 0.9;
  font-family: "montserrat", sans-serif;
  z-index: 0;
}
#index .step-section .step-info .texture {
  width: 105.6%;
  margin: -64% 0 0 -10%;
  z-index: 1;
}
#index .step-section .step-diagram {
  display: inline-flex;
  height: fit-content;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  background: #fff;
  border-radius: 50px 0 0 50px;
  margin-left: 1px;
  padding: 40px 30px;
}
#index .step-section .step-box {
  padding: 0;
  width: 30%;
  text-align: center;
  display: grid;
  justify-items: center;
}
#index .step-section .step-box .top {
  background: #e84d07;
  border-radius: 100px 100px 0 0;
  width: 80%;
  margin: auto;
}
#index .step-section .step-box .top p {
  color: #fff;
  font-size: 16px;
  margin: 0;
  line-height: 1;
  padding: 24px 0 5px;
}
#index .step-section .step-box .bt1 {
  font-family: "yu-mincho-pr6n", sans-serif;
  color: #e84d07;
  font-size: clamp(0.75rem, 0.32rem + 0.89vw, 1.125rem);
  margin: 5px 0 0;
}
#index .step-section .step-box .bt2 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(1.125rem, 0.265rem + 1.79vw, 1.875rem);
  margin: 0;
  line-height: 1;
}
#index .step-section .step-info .word {
  font-family: "yu-mincho-pr6n", sans-serif;
  width: 80%;
  margin: auto;
  line-height: 1.3;
}
#index .step-section .step-info .word .word1 {
  font-size: clamp(1.125rem, 0.265rem + 1.79vw, 1.875rem);
  margin: 0;
}
#index .step-section .step-info .word .word2 {
  font-size: clamp(1.5rem, 0.354rem + 2.38vw, 2.5rem);
  margin: 12px 0 0;
  position: relative;
}
#index .step-section .step-info .word .word2 span {
  font-size: 10px;
  position: absolute;
  top: 54%;
}
#index .step-section .step-info .word .word3 {
  font-size: 10px;
  margin: 0;
}
#index .step-section .orangearrow {
  width: 20px;
  aspect-ratio: 1 / 1;
  background: #e84d07;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#index .texture-section {
  margin: 0 auto 0 0;
  max-width: 1440px;
}
#index .texture-section .container {
  max-width: 1265px;
  margin: 0 auto 0 0;
  padding: 0;
}
#index .texture-section .flex-row {
  display: flex;
  gap: 0 4%;
  justify-content: space-between;
}
#index .texture-section .smile-img {
  width: 95%;
}
#index .texture-section .texture-text {
  width: 43%;
}
#index .texture-section .texture-text h3 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(2.25rem, 0.889rem + 2.83vw, 3.438rem);
  letter-spacing: -0.5rem;
  font-weight: normal;
  margin: 0;
}
#index .texture-section .texture-text .t1 {
  font-size: clamp(0.75rem, 0.177rem + 1.19vw, 1.25rem);
  margin: 10px 0 20px;
}
#index .texture-section .texture-text .t2 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(1.375rem, 0.515rem + 1.79vw, 2.125rem);
  margin: 0;
  position: relative;
}
#index .texture-section .texture-text .t2 span {
  position: absolute;
  top: 5%;
  left: 63%;
  font-size: 10px;
}
#index .texture-section .texture-text .t3 {
  font-size: 10px;
}
@media (min-width: 2000px) {
  #index .tech-section .hand_wrap {
    transform: translate(26%, 10%);
  }
}
@media (min-width: 1441px) {
  #index .tech-section.bg-sky {
    padding: 1030px 0 12%;
  }
  #index .tech-section .bottle {
    margin-left: 250px;
    margin-bottom: -30px;
  }
}
@media (max-width: 1200px) {
  #index .tech-section .tech-visual {
    width: 100%;
  }
  #index .step-section .step-info {
    width: 94%;
    grid-template-columns: 32% 65%;
    gap: 3% 0;
    padding: 20px 0 61px 20px;
  }
  #index .step-section .wow_face .tit .tit1 {
    font-size: clamp(1.875rem, 0.208rem + 8.89vw, 4.375rem);
  }
  #index .step-section .wow_face .tit .tit2 {
    font-size: clamp(0.563rem, 0.063rem + 2.67vw, 1.313rem);
  }
  #index .step-section .step-info .word {
    grid-column-start: 2;
    grid-row-start: 1;
    width: 100%;
  }
  #index .step-section .step-diagram {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    width: 103%;
  }
  #index .step-section .step-box {
    padding: 0;
  }
  #index .step-section .step-box .top {
    width: 60%;
  }
  #index .step-section .step-box .top p {
    font-size: clamp(0.75rem, 0.25rem + 2.13vw, 1.25rem);
    padding: 24px 0 10px;
  }
  #index .texture-section .flex-row {
    display: block;
  }
  #index .texture-section .smile-img {
    width: 100%;
  }
  #index .texture-section .texture-text {
    width: 80%;
    margin: 3% auto 0;
  }
  #index .texture-section .texture-text h3 {
    font-size: clamp(1.75rem, 0.833rem + 4.89vw, 3.125rem);
  }
  #index .texture-section .texture-text .t2 {
    font-size: clamp(0.938rem, -0.063rem + 5.33vw, 2.438rem);
    display: inline-block;
  }
  #index .texture-section .texture-text .t2 span {
    left: 79%;
  }
}
@media (max-width: 900px) {
  #index .tech-section .tech-visual {
    padding: 0px 20px 20px;
  }
}
@media (max-width: 768px) {
  #index .tech-section .bg {
    position: absolute;
    inset: 0;
    background: url("../img/index/tech-bg_sp.jpg") top center/cover no-repeat;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 85%,
      rgba(0,0,0,0.7) 96%,
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 85%,
      rgba(0,0,0,0.7) 96%,
      rgba(0,0,0,0) 100%
    );
  }
  #index .tech-section.bg-sky {
    padding: 90% 0 12%;
  }
  #index .tech-section .hand_wrap {
    width: 89.193%;
    transform: translate(0%, 5%);
  }
  #index .tech-section .bottle {
    margin-left: 30%;
    margin-bottom: -10%;
    width: 53.285%;
  }
  #index .tech-section .container {
    padding: 0;
    overflow: hidden;
  }
  #index .tech-section .tech-visual {
    padding: 0 20px 20px;
  }
  #index .tech-section .section-title h2 {
    font-size: clamp(1.125rem, 0.5rem + 2.67vw, 1.75rem);
  }
  #index .tech-section .section-title p {
    font-size: clamp(2.125rem, 1.5rem + 2.67vw, 2.75rem);
    line-height: 1.3;
  }
  #index .tech-section .tech-visual::after {
    font-size: clamp(7.5rem, 1.536rem + 25.45vw, 13.75rem);
  }
  #index .tech-section .tech-visual .movie {
    grid-column-start: 1;
    width: 213.3%;
    max-width: 565px;
    aspect-ratio: 565 / 559;
    margin-left: -8%;
    border: none;
    padding: 0;
    height: auto;
  }
  #index .tech-section .tech-visual .movie  video {
    transform: translateY(9%) scale(1.12);
  }
  #index .tech-section .tech-visual .text1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    z-index: 1;
    width: 90%;
    margin: auto;
  }
  #index .tech-section .tech-visual .text1 .wow1 {
    display: block;
    font-size: clamp(1.688rem, 0.077rem + 6.87vw, 3.375rem);
    line-height: 1.5;
  }
  #index .tech-section .tech-visual .text1 .wow1 span {
    position: absolute;
    top: 7%;
    right: 40%;
    font-size: clamp(0.5rem, 0.261rem + 1.02vw, 0.75rem);
  }
  #index .tech-section .tech-visual .text1 .wow2 {
    display: table;
    padding: 5px 20px;
    font-size: clamp(0.875rem, 0.25rem + 2.67vw, 1.5rem);
    margin-left: -8.9%;
    width: 86.5%;
  }
  #index .tech-section .tech-visual .text2 {
    grid-row-start: 4;
    grid-column-start: 1;
    grid-column-end: 3;
    width: 100%;
    margin: 2% auto 0;
    padding-left: 9%;
  }
  #index .tech-section .tech-visual .text2 p {
    font-size: clamp(0.563rem, 0.384rem + 0.76vw, 0.75rem);
    padding: 2% 0 0 4%;
    line-height: 1.5;
  }
  #index .tech-section .tech-visual .danmen {
    grid-row-start: 3;
    grid-column-start: 2;
    margin: -18% 0 0 -59.6%;
    max-width: 670px;
    width: 169%;
  }
  #index .step-section {
    margin: 11% 0 0 auto;
    width: 100%;
  }
  #index .step-section .container.step-container {
    width: 97%;
  }
  #index .step-section .step-info {
    gap: 0;
    padding: 9% 0 11% 20px;
    width: 100%;
    margin: 11% auto 6%;
  }
  #index .step-section .step-info::before {
    top: 2%;
    left: 1%;
    font-size: clamp(5.625rem, 1.45rem + 17.81vw, 10rem);
  }
  #index .step-section .step-info .texture {
    width: 150.39%;
    margin: -85% 0 0 -10%;
  }
  #index .step-section .step-diagram {
    padding: 30px 10px;
    gap: 0 5px;
  }
  #index .step-section .step-box .top {
    width: 70%;
    margin-bottom: -6%;
  }
  #index .step-section .step-box .top p {
    padding: 18% 0 13%;
    font-size: clamp(0.625rem, -0.031rem + 2.8vw, 1.313rem);
    font-weight: 100;
  }
  #index .step-section .orangearrow {
    width: clamp(0.625rem, 0.267rem + 1.53vw, 1rem);
  }
  #index .step-section .step-box .bt1 {
    font-size: clamp(0.563rem, -0.094rem + 2.8vw, 1.25rem);
  }
  #index .step-section .step-box .bt2 {
    font-size: clamp(1rem, 0.284rem + 3.05vw, 1.75rem);
  }
  #index .step-section .step-info .word .word1 {
    font-size: clamp(1.188rem, 0.531rem + 2.8vw, 1.875rem);
  }
  #index .step-section .step-info .word .word2 {
    font-size: clamp(1.5rem, 0.188rem + 5.6vw, 2.875rem);
  }
  #index .step-section .step-info .word .word3 {
    font-size: clamp(0.5rem, 0.142rem + 1.53vw, 0.875rem);
  }
}
@media (max-width: 440px) {
  #index .tech-section .tech-visual {
    padding: 30px 20px 20px;
  }
  #index .tech-section .tech-visual .movie {
    margin-left: -15%;
  }
  #index .tech-section .tech-visual .text1 .wow1 {
    margin: 0;
  }
  #index .tech-section .tech-visual .text1 .wow1 span {
    position: absolute;
    top: 4%;
    right: 32%;
  }
  #index .tech-section .tech-visual .text1 .wow2 {
    margin: 5% 0 6% -12%;
    padding: 5px 16px;
    width: 94.5%;
  }
}
#index .winery_container {
  position: relative;
  display: grid;
  grid-template-columns: 46% 50%;
  gap: 0 20px;
  align-items: center;
  border-radius: 50px;
  padding: 60px 0;
  width: 90%;
  border: 1px solid #fff;
  max-width: 1100px;
  margin: 8% auto 9%;
}
#index .winery_container::before {
  content: "03";
  color: #ffffff00;
  position: absolute;
  top: 2%;
  right: 1%;
  font-size: clamp(7.5rem, 3.202rem + 8.94vw, 11.25rem);
  -webkit-text-stroke: 1px #fff;
  text-stroke: 1px #fff;
  paint-order: stroke;
  writing-mode: vertical-lr;
  line-height: 0.9;
  font-family: "montserrat", sans-serif;
}
#index .winery_container .photo {
  grid-row: 1 / 3;
  max-width: 659px;
  width: 130.6%;
  margin: 0 0 0 -33%;
}
#index .winery_container .winery-text h3 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(0.938rem, -0.137rem + 2.24vw, 1.875rem);
  font-weight: normal;
  margin: 0;
}
#index .winery_container .winery-text h2 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(1.75rem, 0.532rem + 2.53vw, 2.813rem);
  font-weight: normal;
  margin: 30px 0;
  line-height: 3.9rem;
}
#index .winery_container .winery-text.text2 {
  grid-column: 2 / 3;
}
#index .winery_container .winery-text p {
  font-size: clamp(0.625rem, 0.052rem + 1.19vw, 1.125rem);
  font-weight: 600;
  margin: 0;
}
#index .winery_container .winery-text p span {
  font-size: 10px;
}
@media (max-width: 1000px) {
  #index .winery_container {
    width: 94%;
    padding: 60px 20px 60px 0;
  }
  #index .winery_container .winery-text h2 {
    margin: 10px 0 0;
    line-height: 1.6;
  }
}
@media (min-width: 768px) {
  #index .step-diagram {
    width: 50%;
  }
}
@media (max-width: 768px) {
  #index .winery_container {
    padding: 9% 0;
    grid-template-columns: 46% 50%;
    gap: 0 4%;
    overflow: hidden;
    width: 100%;
    margin: 11% auto 9%;
  }
  #index .winery_container .photo {
    width: 100%;
    margin: auto;
    grid-column: 1 / 3;
    grid-row: 2 / 2;
  }
  #index .winery_container .winery-text.text1 {
    grid-row: 1 / 1;
    grid-column: 1 / 3;
    width: 90%;
    margin: 0 auto 4%;
  }
  #index .winery_container .winery-text.text2 {
    grid-column: 1 / 3;
    width: 90%;
    margin: auto;
  }
  #index .winery_container .winery-text h3 {
    padding: 0 5%;
    font-size: clamp(1.25rem, 0.296rem + 4.07vw, 2.25rem);
    line-height: 1.5;
    letter-spacing: 0.2rem;
  }
  #index .winery_container .winery-text h2 {
    padding: 0 5%;
    font-size: clamp(1.563rem, 0.37rem + 5.09vw, 2.813rem);
    line-height: 1.7;
    margin-top: 2.5%;
  }
  #index .winery_container .winery-text p {
    padding: 4% 5% 0;
    font-size: clamp(0.625rem, -0.031rem + 2.8vw, 1.313rem);
    line-height: 1.9;
    font-weight: 500;
  }
}
/* =========================================
VOLUME
========================================= */
#index .volume {
  position: relative;
  padding: 0;
  margin: -9% auto -7%;
}
#index .volume img {
  width: 100%;
}
#index .volume .volume-text-box {
  position: absolute;
  top: 56%;
  transform: translateY(-50%);
  left: 60%;
  text-align: center;
}
#index .volume .vol-sub {
  font-size: clamp(1.125rem, 0.265rem + 1.79vw, 1.875rem);
  line-height: 1.8;
  color: #e84d07;
  margin-bottom: 10px;
}
#index .volume .vol-main {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 0.711rem + 2.68vw, 3.125rem);
  color: #e84d07;
  line-height: 1.2;
}
#index .volume .vol-main span {
  font-size: clamp(2.5rem, 0.351rem + 4.47vw, 4.375rem);
}
#index .volume .wave-separator {
  width: 100%;
  line-height: 0;
}
#index .volume .wave-separator svg {
  width: 100%;
  height: 60px;
  display: block;
}
@media (max-width: 768px) {
  #index .volume {
    margin: -9% auto -12%;
  }
  #index .volume .vol-main {
    font-size: clamp(1.25rem, 0.625rem + 2.67vw, 1.875rem);
    margin: 0 0 30%;
  }
  #index .volume .vol-sub {
    font-size: clamp(0.875rem, 0.517rem + 1.53vw, 1.25rem);
    font-weight: 400;
  }
  #index .volume .vol-main span {
    font-size: clamp(1.875rem, 1.25rem + 2.67vw, 2.5rem);
  }
  #index .volume .volume-text-box {
    top: 60%;
    left: 50%;
  }
}
/* =========================================
 HOW TO
========================================= */
#index .how-to {
  background: #e84d07;
  margin: -9% auto 0;
  padding-bottom: 8%;
}
#index .how-to .container {
  padding: 10% 0 0;
  max-width: 1200px;
  margin: 0 auto;
}
#index .how-to .section-title h2 {
  color: #fff;
  font-family: "cormorant-garamond", serif;
  font-size: clamp(38px, 3vw, 50px);
  text-align: center;
  letter-spacing: 0.08em;
  font-weight: 400;
  margin-bottom: 60px;
}
#index .how-to .holder {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
#index .how-to .steps-container {
  background: #f4f4f4;
  border-radius: 40px;
  padding: 50px 40px 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}
#index .how-to .step-card {
  text-align: center;
  width: 240px;
  display: ruby;
  align-items: center;
}
#index .how-to .step-label {
  font-family: "montserrat", sans-serif;
  display: block;
  color: #e84d07;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: clamp(1.063rem, 0.776rem + 0.6vw, 1.313rem);
  line-height: 1;
}
#index .how-to .step-desc {
  font-size: clamp(0.75rem, 0.392rem + 0.75vw, 1.063rem);
  line-height: 1.6;
  font-weight: 600;
  margin: 0 0 20px;
}
#index .how-to .step-img {
  max-width: 201px;
  width: 83.8%;
}
#index .how-to .step-img img {
  width: 100%;
  height: auto;
  display: block;
}
#index .how-to .step-arrow {
  color: #e84d07;
  width: 13px;
  height: 12px;
  border-top: 2px solid #e84d07;
  border-left: 2px solid #e84d07;
  transform: translateY(0%) rotate(135deg);
  display: inline-block;
}
#index .how-to .step-plus {
  font-size: clamp(2.5rem, 1.067rem + 2.98vw, 3.75rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
#index .how-to .specialcare {
  position: relative;
  border: 2px solid #fff;
  border-radius: 40px;
  padding: 60px 0px 30px 30px;
  text-align: center;
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}
#index .how-to .specialcare::before {
  content: "集中的に乾燥対策したい方に";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #c4d5e0;
  color: #e84d07;
  font-size: clamp(0.75rem, 0.32rem + 0.89vw, 1.125rem);
  line-height: 1.1;
  font-weight: 600;
  padding: 16px 20px;
  border-radius: 40px;
  width: 67%;
}
#index .how-to .specialcare .step-label {
  color: #c4d5e0;
  font-size: 18px;
  letter-spacing: 0.08em;
}
#index .how-to .specialcare .step-desc {
  color: #fff;
}

@media (max-width: 1200px) {
  #index .how-to .holder {
    gap: 10px;
  }
  #index .how-to .specialcare {
    padding: 50px 0px 30px 2px;
  }
}
@media (max-width: 900px) {
  #index .how-to .holder {
    gap: 20px;
  }
  #index .how-to .steps-container {
    padding: 40px 30px 30px;
    gap: 10px;
  }
  #index .how-to .step-card {
    width: 145px;
  }
  #index .how-to .specialcare {
    width: 26%;
    padding: 40px 0px 0px 30px;
  }
}
@media (max-width: 768px) {
  #index .how-to {
    padding: 18% 0 10%;
  }
  #index .how-to .section-title h2 {
    font-size: clamp(1.875rem, 0.682rem + 5.09vw, 3.125rem);
    margin: 5% auto 5%;
  }
  #index .how-to .container {
    padding: 0;
  }
  #index .how-to .steps-container {
    display: block;
    background: none;
    padding: 0;
  }
  #index .how-to .slider_wrap .slider .slick-slide {
    cursor: pointer;
  }
  #index .how-to .slider_wrap .slider .slick-dots li button {
    display: none;
  }
  #index .how-to .slider_wrap .slider .slick-dots {
    bottom: -3%;
    height: 2.4%;
  }
  #index .how-to .slider_wrap .slider .slick-dots li {
    width: auto;
    height: 100%;
    margin: 0% 0.4%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    transition: 0.2s;
  }
  #index .how-to .slider_wrap .slider .slick-dots li.slick-active {
    background-color: #fff;
  }
  #index .how-to .step-card {
    display: grid;
    justify-items: center;
    width: 94%;
    margin: auto;
    background: #fff;
    border-radius: 30px;
    padding: 5% 0;
  }
  #index .how-to .step-img {
    max-width: 477px;
    width: 77.6%;
    position: relative;
  }
  #index .how-to .step-card img {
    margin: auto;
  }
  #index .how-to .step-card.ste3 {
    background: none;
    border: 1px solid #fff;
    padding: 0 0 5%;
  }
  #index .how-to .step-card.ste3 .spe_top {
    background: #c4d5e0;
    color: #e84d07;
    padding: 1% 3%;
    border-radius: 0 0 10px 10px;
    font-size: clamp(0.75rem, 0.154rem + 2.54vw, 1.375rem);
  }
  #index .how-to .step-label {
    margin-bottom: 0;
    font-size: clamp(1.25rem, 0.654rem + 2.54vw, 1.875rem);
  }
  #index .how-to .step-card.ste3 .step-label {
    color: #c4d5e0;
  }
  #index .how-to .step-desc {
    text-align: center;
    font-size: clamp(0.875rem, 0.279rem + 2.54vw, 1.5rem);
    margin: 10px 0 20px;
  }
  #index .how-to .step-card.ste3 .step-desc {
    color: #fff;
    margin-bottom: 2%;
  }
  #index .how-to .step-img p.step-desc {
    position: absolute;
    bottom: 0%;
    margin: 0;
    line-height: 1;
    font-size: clamp(0.75rem, 0.154rem + 2.54vw, 1.375rem);
    text-align: center;
  }
  #index .how-to .step-card.ste1 .step-img p.step-desc {
    right: 4%;
    line-height: 1.3;
  }
  #index .how-to .step-card.ste2 .step-img p.step-desc {
    right: -3%;
  }
  #index .how-to .step-card.ste3 .step-img p.step-desc {
    right: 5%;
    line-height: 1.3;
  }
}
@media (max-width: 440px) {
  #index .how-to .step-desc {
    text-align: justify;
    max-width: 251px;
  }
}
/* =========================================
 LINEUP
========================================= */
#index .lineup {
  padding: 60px 0 120px;
  background: #fff;
}
#index .lineup .lineup-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}
#index .lineup .lineup-title {
  text-align: center;
  font-size: 40px;
  letter-spacing: 0.18em;
  color: #e84d07;
  font-family: "cormorant-garamond", serif;
  font-weight: 500;
}
#index .lineup .lineup-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  padding: 0;
}
#index .lineup .lineup-image {
  height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 26px;
}
#index .lineup .lineup-image img {
  max-height: 100%;
  width: auto;
}
#index .lineup .lineup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  height: 52px;
  margin-bottom: 22px;
}
#index .lineup .lineup-tags li {
  background: #fff1e7;
  color: #e84d07;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: 999px;
  line-height: 1;
  height: 23px;
}
#index .lineup .lineup-name {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 6px;
  font-weight: 700;
  height: 50px;
}
#index .lineup .lineup-label {
  font-size: 11px;
  margin-bottom: 16px;
  height: 30px;
}
#index .lineup .lineup-label span {
  border: 1px solid #000;
  padding: 3px 10px;
  display: inline-block;
}
#index .lineup .lineup-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.9;
  margin-bottom: 28px;
  height: 40px;
}
#index .lineup .lineup-text span {
  font-size: 9px;
}
#index .lineup .lineup-price {
  font-size: 12px;
  margin-bottom: 26px;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#index .lineup .lineup-price strong {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 24px;
  color: #e84d07;
  font-weight: 700;
}
#index .lineup .lineup-price strong span {
  font-size: 12px;
  font-weight: 400;
}
#index .lineup .lineup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 42px;
  border: 1px solid #e84d07;
  color: #e84d07;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all .25s ease;
  position: relative;
    width: 100%;
}
#index .lineup .lineup-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 10px;
}
#index .lineup .lineup-btn:hover {
  background: #e84d07;
  color: #fff;
}
#index .lineup .lineup-btn.buy {
  background: #e84d07;
  color: #fff;
  margin-top: 10px;
}
#index .lineup .lineup-btn.buy:hover {
  background: #fff;
  color: #e84d07;
}
#index .lineup .lineup-note {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 1000px) {
  #index .lineup .lineup-list {
    grid-template-columns: repeat(2, 1fr);
  }
  #index .lineup .lineup-btn {
    width: 100%;
  }
}
@media (max-width: 768px) {
  #index .lineup {
    padding: 10% 0 0;
  }
  #index .lineup .lineup-inner {
    padding: 0 20px;
  }
  #index .lineup .lineup-title {
    font-size: clamp(1.875rem, 0.444rem + 6.11vw, 3.375rem);
  }
  #index .lineup .lineup-list {
    grid-template-columns: 1fr;
    gap: 80px;
    width: 80%;
    margin: auto;
  }
  #index .lineup .lineup-image {
    height: auto;
    margin-bottom: 22px;
  }
  #index .lineup .lineup-tags {
    margin-bottom: 18px;
    width: 78%;
    height: auto;
  }
  #index .lineup .lineup-tags li {
    font-size: clamp(0.938rem, 0.162rem + 3.31vw, 1.75rem);
    height: auto;
    font-weight: 600;
  }
  #index .lineup .lineup-name {
    font-size: clamp(1.125rem, 0.5rem + 2.67vw, 1.75rem);
    line-height: 1.5;
    height: auto;
    font-weight: 600;
  }
  #index .lineup .lineup-text {
    font-size: clamp(0.938rem, 0.375rem + 2.4vw, 1.5rem);
    line-height: 1.5;
    font-weight: 500;
  }
  #index .lineup .lineup-price {
    font-size: clamp(0.813rem, 0.375rem + 1.87vw, 1.25rem);
  }
  #index .lineup .lineup-price strong {
    font-size: clamp(1.625rem, 1rem + 2.67vw, 2.25rem);
  }
  #index .lineup .lineup-btn {
    max-width: 100%;
    height: auto;
    padding: 6px 0;
    font-size: clamp(1.188rem, 0.563rem + 2.67vw, 1.813rem);
  }
  #index .lineup .lineup-note {
    text-align: left;
    font-size: clamp(0.5rem, 0.142rem + 1.53vw, 0.875rem);
    width: 80%;
    margin: 20px auto 0;
  }
}
@media (max-width: 440px) {
  #index .lineup .lineup-list {
    gap: 40px;
    width: 81%;
  }
}
/* =========================================
 subscription
========================================= */
#index .subscription dl {
  width: 60.6%;
  max-width: 862px;
  margin: 0 auto 10%;
}
#index .subscription dl dt {
  position: relative;
  cursor: pointer;
  z-index: 1;
}
#index .subscription dl dd {
  display: none;
  position: relative;
  margin: 0;
}
#index .subscription .subscription-section {
  background: #ffe8df;
  margin: 30px 0 0;
  padding: 0 20px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
#index .subscription .subscription-badge {
  background: #e84d07;
  color: #fff;
  padding: 34px 42px 24px 12px;
  font-weight: bold;
  text-align: center;
  flex-shrink: 0;
  clip-path: circle(90% at 12% 50%);
}
#index .subscription .badge-number {
  font-family: "montserrat", sans-serif;
  font-size: clamp(2.5rem, 1.64rem + 1.79vw, 3.25rem);
  line-height: 0;
}
#index .subscription .badge-percent {
  font-size: clamp(0.813rem, 0.526rem + 0.6vw, 1.063rem);
}
#index .subscription .badge-text {
  font-size: 9px;
  line-height: 1.4;
  margin-top: 4px;
}
#index .subscription .subscription-title {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}
#index .subscription .subscription-text {
  font-size: clamp(1.625rem, 0.049rem + 3.28vw, 3rem);
  font-weight: bold;
  color: #e84d07;
  letter-spacing: 0.05em;
}
#index .subscription .subscription-benefits {
  display: flex;
  gap: 12px;
  align-items: center;
}
#index .subscription .benefit-badge {
  border: 2px solid #e84d07;
  border-radius: 30px;
  padding: 15px 30px;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
#index .subscription .benefit-badge::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid #e84d07;
  border-right: 1px solid #e84d07;
  transform: rotate(135deg);
  margin-left: 10px;
}
#index .subscription .benefit-label {
  font-size: clamp(0.75rem, 0.249rem + 1.04vw, 1.188rem);
  line-height: 1;
  font-weight: bold;
  color: #e84d07;
  display: block;
}
#index .subscription .subscription-benefit-box {
  background: #f8f1e9;
  padding: 30px 50px;
}
#index .subscription .subscription-benefit-box .tit {
  text-align: center;
  font-size: clamp(1rem, 0.785rem + 0.45vw, 1.188rem);
}
#index .subscription .subscription-benefit-box .benefits {
  padding: 20px 0;
}
#index .subscription .subscription-benefit-box .benefits .benefits-inner {
  margin: 0 auto;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}
#index .subscription .subscription-benefit-box .benefits .benefit-card {
  background: #fff;
  border-radius: 24px;
  padding: 40px 30px 10px;
  width: 48%;
  box-sizing: border-box;
  position: relative;
}
#index .subscription .subscription-benefit-box .benefits .benefit-head {
  position: absolute;
  top: -50px;
  left: 54%;
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
  text-align: center;
}
#index .subscription .subscription-benefit-box .benefits .benefit-head h2 {
  display: inline-block;
  padding: 4px 20px 4px 60px;
  border-radius: 40px;
  color: #fff;
  font-size: clamp(1.313rem, 0.811rem + 1.04vw, 1.75rem);
  font-weight: bold;
  font-feature-settings: "palt";
}
#index .subscription .subscription-benefit-box .benefits .mini-badge {
  position: absolute;
  top: 12px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  padding: 12px;
  font-size: clamp(0.75rem, 0.463rem + 0.6vw, 1rem);
  line-height: 1.2;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  display: flex;
}
#index .subscription .subscription-benefit-box .benefits .benefit-card.blue .benefit-head h2 {
  background: #3994d9;
}
#index .subscription .subscription-benefit-box .benefits .benefit-card.blue .mini-badge {
  border: 3px solid #3994d9;
  color: #3994d9;
  left: calc(50% - 114px);
}
#index .subscription .subscription-benefit-box .benefits .benefit-card.green .benefit-head h2 {
  background: #428c55;
}
#index .subscription .subscription-benefit-box .benefits .benefit-card.green .mini-badge {
  border: 3px solid #428c55;
  color: #428c55;
  left: calc(50% - 168px);
}
#index .subscription .subscription-benefit-box .benefits .benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#index .subscription .subscription-benefit-box .benefits .benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #dcdcdc;
}
#index .subscription .subscription-benefit-box .benefits .benefit-list li:last-child {
  border-bottom: none;
}
#index .subscription .subscription-benefit-box .benefits .benefit-list p {
  margin: 0;
  font-size: clamp(0.75rem, 0.463rem + 0.6vw, 1rem);
  line-height: 1.6;
}
#index .subscription .subscription-benefit-box .benefits .num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}
#index .subscription .subscription-benefit-box .benefits .benefit-card.blue .num {
  background: #3994d9;
}
#index .subscription .subscription-benefit-box .benefits .benefit-card.green .num {
  background: #428c55;
}
#index .subscription .subscription-benefit-box p.attention {
  text-align: right;
  font-size: clamp(0.75rem, 0.463rem + 0.6vw, 1rem);
}
#index .subscription .subscription-benefit-box .benefit-btn {
  text-align: center;
  margin: 30px 0 10px;
}
#index .subscription .subscription-benefit-box .benefit-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  padding: 10px 0;
  background: #e84d07;
  border: 1px solid #e84d07;
  border-radius: 30px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: all .25s ease;
  position: relative;
}
#index .subscription .subscription-benefit-box .benefit-btn a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 10px;
}
#index .subscription .subscription-benefit-box .benefit-btn a:hover {
  background: #fff;
  color: #e84d07;
}
@media (max-width: 1200px) {
  #index .subscription dl {
    width: 90%;
  }
}
@media (max-width: 900px) {
  #index .subscription .subscription-benefit-box .benefits .benefit-head {
    top: -37px;
  }
  #index .subscription .subscription-benefit-box .benefits .mini-badge {
    top: 6px;
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-card.blue .mini-badge {
    left: calc(50% - 92px);
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-card.green .mini-badge {
    left: calc(50% - 128px);
  }
}
@media (max-width: 768px) {
  #index .subscription dl {
    margin: 15% auto;
  }
  #index .subscription .subscription-section {
    display: grid;
    grid-template-columns: 36% 60%;
    gap: 10px 4%;
    align-items: stretch;
    margin: 0;
  }
  #index .subscription .subscription-badge {
    grid-row: 1 / 3;
    padding: 19% 19% 15% 6%;
  }
  #index .subscription .subscription-title {
    grid-column: 2 / 3;
    padding: 10px 0 0;
  }
  #index .subscription .subscription-benefits {
    grid-column: 2 /3;
    justify-content: space-around;
    padding-bottom: 10px;
  }
  #index .subscription .badge-number {
    font-size: clamp(1.875rem, -0.51rem + 10.18vw, 4.375rem);
  }
  #index .subscription .badge-percent {
    font-size: clamp(0.625rem, -0.031rem + 2.8vw, 1.313rem);
  }
  #index .subscription .subscription-text {
    font-size: clamp(1.313rem, 0.299rem + 4.33vw, 2.375rem);
  }
  #index .subscription .subscription-icon {
    width: 21%;
  }
  #index .subscription .benefit-badge {
    width: 100%;
    justify-content: center;
    padding: 3% 0;
  }
  #index .subscription .benefit-label {
    font-size: clamp(0.75rem, 0.154rem + 2.54vw, 1.375rem);
  }
  #index .subscription .subscription-benefit-box {
    padding: 5%;
  }
  #index .subscription .subscription-benefit-box .benefits {
    padding: 5% 0 0;
  }
  #index .subscription .subscription-benefit-box .tit {
    font-size: clamp(0.938rem, 0.52rem + 1.78vw, 1.375rem);
    line-height: 1.4;
  }
  #index .subscription .subscription-benefit-box .benefits .benefits-inner {
    flex-direction: column;
    align-items: center;
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-card {
    width: 100%;
    padding: 9% 9% 3%;
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-card.blue {
    margin-bottom: 10%;
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-head {
    top: -15%;
  }
  #index .subscription .subscription-benefit-box .benefits .mini-badge {
    top: 5%;
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-head h2 {
    font-size: clamp(1.25rem, 0.654rem + 2.54vw, 1.875rem);
  }
  #index .subscription .subscription-benefit-box .benefits .mini-badge {
    font-size: clamp(0.875rem, 0.279rem + 2.54vw, 1.5rem);
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-card.blue .mini-badge {
    left: calc(50% - 138px);
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-card.green .mini-badge {
    left: calc(50% - 191px);
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-list p {
    font-size: clamp(0.875rem, 0.279rem + 2.54vw, 1.5rem);
  }
  #index .subscription .subscription-benefit-box p.attention {
    font-size: clamp(0.625rem, 0.267rem + 1.53vw, 1rem);
  }
  #index .subscription .subscription-benefit-box .benefit-btn a {
    width: 50%;
    font-size: clamp(0.75rem, 0.511rem + 1.02vw, 1rem);
  }
}
@media (max-width: 440px) {
  #index .subscription .subscription-title {
    margin-top: auto;
  }
  #index .subscription .subscription-badge {
    padding: 30% 19% 7% 6%;
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-card {
    padding: 40px 20px 10px;
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-card.blue .mini-badge {
    left: calc(50% - 96px);
  }
  #index .subscription .subscription-benefit-box .benefits .benefit-card.green .mini-badge {
    left: calc(50% - 130px);
  }
}
/* =========================================
 VOICE
========================================= */
#index .voice {
  background: url("../img/index/voice.png") top center/cover no-repeat;
  padding: 0 0 70px;
}
#index .voice .container h2 {
  color: #fff;
  font-family: "cormorant-garamond", serif;
  font-size: clamp(2.5rem, 1.784rem + 1.49vw, 3.125rem);
  font-weight: normal;
  text-align: center;
  margin: 0 auto 10px;
  padding: 50px 0 0;
}
#index .voice a.orange_wrap {
  display: block;
  width: 76%;
  margin: auto;
}
#index .voice .orange_box {
  background: #e84d07;
  border-radius: 20px;
  max-width: 884px;
  margin: auto;
  transition: 0.6s;
}
#index .voice .orange_box .text_box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0 30px;
  padding: 30px 0;
  transition: 0.6s;
  color: #fff;
}
#index .voice .orange_box .text1 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(1.5rem, 0.784rem + 1.49vw, 2.125rem);
}
#index .voice .orange_box .text2 {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(2.5rem, 1.497rem + 2.09vw, 3.375rem);
  line-height: 1.4;
}
#index .voice .orange_box .text3 {
  font-family: "montserrat", sans-serif;
  font-size: clamp(0.875rem, 0.302rem + 1.19vw, 1.375rem);
}
#index .voice .orange_box .right {
  border: 1px solid #fff;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 17%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.6s;
}
#index .voice .orange_box .text4 {
  font-family: "cormorant-garamond", serif;
  font-size: 24px;
  position: relative;
}
#index .voice .orange_box .text4::after {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 50%;
  transform: translate(240%, 0);
  width: 40px;
  height: 1px;
  background: #fff;
  transition: 0.6s;
}
#index .voice a.orange_wrap:hover .orange_box {
  background: #fff;
}
#index .voice a.orange_wrap:hover .text_box {
  color: #e84d07;
}
#index .voice a.orange_wrap:hover .orange_box .right {
  border: 1px solid #e84d07;
}
#index .voice a.orange_wrap:hover .orange_box .text4::after {
  background: #e84d07;
}
@media (max-width: 768px) {
  #index .voice {
    background: url("../img/index/voice_sp.png") top center/cover no-repeat;
  }
  #index .voice .container h2 {
    font-size: clamp(2.5rem, 1.605rem + 3.82vw, 3.438rem);
  }
  #index .voice .orange_box {
    width: 90%;
  }
  #index .voice .orange_box .text1 {
    font-size: clamp(1.125rem, 0.529rem + 2.54vw, 1.75rem);
  }
  #index .voice .orange_box .text2 {
    font-size: clamp(1.375rem, 0.898rem + 2.04vw, 1.875rem);
  }
  #index .voice .orange_box .text3 {
    font-size: clamp(0.688rem, 0.449rem + 1.02vw, 0.938rem);
    font-weight: 400;
  }
  #index .voice .orange_box .text4 {
    font-size: clamp(0.75rem, 0.034rem + 3.05vw, 1.5rem);
  }
}
@media (max-width: 440px) {
  #index .voice a.orange_wrap {
    width: 100%;
  }
  #index .voice .orange_box .text_box {
    gap: 0 10px;
  }
  #index .voice .orange_box .text4::after {
    bottom: 10px;
    right: 32%;
    transform: translate(240%, 0);
    width: 10px;
  }
}
/* =========================================
 BRAND KV
========================================= */
#index .brand-kv {
  background: #f8fbfd;
}
#index .brand-kv .brand-kv-inner {
  position: relative;
  margin: 0 auto;
}
#index .brand-kv .brand-kv-image img {
  width: 100%;
  height: auto;
  display: block;
}
#index .brand-kv .brand-kv-copy {
  position: absolute;
  top: 10%;
  left: 58%;
}
#index .brand-kv .brand-kv-text {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: clamp(0.75rem, 0.463rem + 0.6vw, 1rem);
  line-height: 2.2;
  letter-spacing: 0.08em;
  margin-bottom: 36px;
}
#index .brand-kv .brand-kv-logo {
  position: absolute;
  bottom: 7%;
  right: 6%;
  width: 21.974%;
}
@media (max-width: 800px) {
  #index .brand-kv .brand-kv-copy {
    left: 56%;
  }
}
@media (max-width: 768px) {
  #index .brand-kv .brand-kv-copy {
    top: 7%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    text-align: center;
  }
  #index .brand-kv .brand-kv-text {
    font-size: clamp(0.813rem, 0.097rem + 3.05vw, 1.563rem);
    line-height: 1.8;
    margin-bottom: 28px;
  }
  #index .brand-kv .brand-kv-logo {
    bottom: 3%;
    width: 41.73333%;
  }
}