/* ---------------------------------
　 MV
--------------------------------- */
.grid-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.mv--box01,
.mv--box02 {
  display: grid;
}
.mv--box01 {
  grid-template-columns: 50% 25% 25%;
}
.mv--box02 {
  grid-template-columns: 25% 25% 50%;
}

.mv--box--img {
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.mv--cnt {
  padding: 15px 47px;
  width: 100%;
  max-width: 740px;
  background: var(--color-white);
}
.mv--cnt--catch {
  font-size: 34px;
  color: var(--color-green);
}
.mv--cnt--sub {
  margin-top: 5px;
  font-size: 14px;
}
@media (min-width: 835px) {
  .mv {
    position: relative;
  }
  .mv--cnt {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
}
@media (max-width: 834px) {
  .mv--cnt {
    padding: 12px 30px 19px 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mv--cnt > p {
    width: 300px;
  }
  .mv--cnt--catch {
    font-size: 24px;
  }
  .mv--cnt--sub {
    margin-top: 2px;
    font-size: 12px;
  }
}

/* ---------------------------------
　 MV下
--------------------------------- */
.feature {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 45px;
}
.feature--list {
  padding-left: 20px;
  padding-right: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-left: 1px solid #dadcdc;
  border-right: 1px solid #dadcdc;
}
.feature--list li {
  position: relative;
}
.feature--list li:nth-of-type(n + 2)::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #dadcdc;
  position: absolute;
  top: 0;
  left: -20px;
}
.feature--list dl {
  padding-top: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
}
.feature--list dl::before {
  content: "";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.feature--list li:nth-of-type(1) dl::before {
  width: 58px;
  height: 38px;
  background-image: url(../images/top/feature/rental.png);
}
.feature--list li:nth-of-type(2) dl::before {
  width: 42px;
  height: 39px;
  background-image: url(../images/top/feature/24h.png);
}
.feature--list li:nth-of-type(3) dl::before {
  width: 25px;
  height: 42px;
  background-image: url(../images/top/feature/movie.png);
}
.feature--list dt {
  text-align: center;
}
.feature--list dd {
  font-size: 13px;
  color: #707070;
}
/*-- InstagramボタンとWEBで予約ボタンのボックス(2025.10.10)　--*/
.feature .btn--instagram--box {
  display: flex;
  gap: 15px;
  align-items: end;
}
.feature .btn--instagram--box > div {
  width: calc((100% - 15px) / 2);
}
/*-- Instagramボタン(2025.10.10)　--*/
.feature .btn--instagram--catch {
  font-size: 10px;
}
.feature .btn--instagram--link {
  padding: 12px 24px;
}
.feature .btn--instagram--link span {
  padding-left: 50px;
  font-size: 16px;
}
.feature .btn--instagram--link span::before {
  top: calc(50% - 15px);
  width: 30px;
  height: 30px;
}
/*-- WEBで予約ボタン(2025.10.10)　--*/
.feature .btn--facility--link {
  background: linear-gradient(to bottom, #fff, #efefef);
  border: 1px solid #c4c4c4;
  padding: 11px 24px;
  display: grid;
  border-radius: 5px;
  place-items: center;
}
.feature .btn--facility--link span {
  padding-right: 50px;
  font-size: 16px;
  display: block;
  position: relative;
  line-height: 1.2;
  width: fit-content;
  text-align: left;
}
.feature .btn--facility--link span::after {
  content: "";
  display: block;
  position: absolute;
  width: 35px;
  height: 35px;
  background: url(../images/common/target-blank.png) no-repeat center / contain;
  top: calc(50% - 15px);
  right: 0;
}
/*-- 英語用(2025.10.10)　--*/
.feature .btn--facility--link--en span {
  padding-right: 45px;
}
/*-- 中国語用(2025.10.10)　--*/
.feature .btn--instagram--box--ch .btn--instagram--link span {
  padding-left: 45px;
}
.feature .btn--instagram--box--ch .btn--facility--link {
  padding: 21px 24px;
}

@media (max-width: 834px) {
  .feature {
    margin-top: 30px;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .feature--list {
    padding-left: 8px;
    padding-right: 8px;
    gap: 16px;
  }
  .feature--list li:nth-of-type(n + 2)::before {
    left: -10px;
  }
  .feature--list dl {
    padding-top: 32px;
  }
  .feature--list li:nth-of-type(1) dl::before {
    width: 44px;
    height: 23px;
  }
  .feature--list li:nth-of-type(2) dl::before {
    width: 32px;
    height: 29px;
  }
  .feature--list li:nth-of-type(3) dl::before {
    width: 17px;
    height: 29px;
  }
  .feature--list dt {
    font-size: 12px;
  }
  .feature--list dd {
    display: none;
  }
  /*-- InstagramボタンとWEBで予約ボタンのボックス(2025.10.10)　--*/
  .feature .btn--instagram--box {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
  .feature .btn--instagram--box > div {
    width: 100%;
  }
  .feature .btn--facility--link br,
  .feature .btn--instagram--link br {
    display: none;
  }
  /*-- Instagramボタン　--*/
  .feature .btn--instagram--catch {
    font-size: 10px;
  }
  .feature .btn--instagram--link {
    padding: 17px 24px;
  }
  .feature .btn--instagram--link span {
    padding-left: 34px;
    font-size: 18px;
  }
  .feature .btn--instagram--link span::before {
    width: 24px;
    height: 24px;
    top: calc(50% - 12px);
  }
  /*-- WEBで予約ボタン(2025.10.10)　--*/
  .feature .btn--facility--link {
    padding: 17px 24px;
  }
  .feature .btn--facility--link span {
    padding-right: 34px;
    font-size: 18px;
  }
  .feature .btn--facility--link span::after {
    width: 24px;
    height: 24px;
    top: calc(50% - 12px);
  }
  /*-- 中国語用(2025.10.10)　--*/
  .feature .btn--instagram--box--ch .btn--instagram--link span {
    padding-left: 34px;
  }
  .feature .btn--instagram--box--ch .btn--facility--link {
    padding: 16px 24px;
  }
}

/* ---------------------------------
　 Kimono Conciergeのサービス
--------------------------------- */
#service {
  margin-top: 40px;
  padding-top: 110px;
}
.service--list {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
.service--list li {
  position: relative;
}
.service--list li::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.service--list li:nth-of-type(1):before {
  background-image: url(../images/top/service/point01_label.png);
}
.service--list li:nth-of-type(2):before {
  background-image: url(../images/top/service/point02_label.png);
}
.service--list li:nth-of-type(3):before {
  background-image: url(../images/top/service/point03_label.png);
}
.service--list li:nth-of-type(4):before {
  background-image: url(../images/top/service/point04_label.png);
}
.service--list li:nth-of-type(5):before {
  background-image: url(../images/top/service/point05_label.png);
}

.service--list dl {
  padding: 0 15px 10px;
  color: var(--color-white);
  font-weight: 500;
  position: absolute;
  bottom: 0;
  left: 0;
}
.service--list dt {
  text-align: center;
  font-size: 20px;
}
.service--list dd {
  margin-top: 15px;
  font-size: 14px;
}

.service--list li {
  overflow: hidden;
}
.service--list li img {
  transition: transform 0.4s ease, filter 0.4s ease;
  display: block;
}
.service--list li:hover img {
  transform: scale(1.05);
  filter: brightness(1.15);
}
@media (max-width: 834px) {
  #service {
    margin-top: 20px;
    padding-top: 60px;
  }
  .service--list {
    margin-top: 20px;
    grid-template-columns: 1fr;
  }
  .service--list li::before {
    top: 10px;
    left: 15px;
    transform: none;
  }

  .service--list dt {
    text-align: left;
    font-size: 16px;
  }
  .service--list dd {
    margin-top: 5px;
    font-size: 13px;
  }
}

/* ---------------------------------
　 着物ラインナップ
--------------------------------- */
#lineup {
  margin-top: 46px;
  padding-top: 110px;
}

.lineup--cnt {
  margin-top: 30px;
}
.lineup--cnt:nth-of-type(n + 2) {
  margin-top: 40px;
}

.lineup--slider {
  margin-top: 30px;
}
/* slider */
.lineup--slider .slick-prev,
.lineup--slider .slick-next {
  width: 25px;
  height: 35px;
  cursor: pointer;
}
.lineup--slider .slick-prev {
  left: -50px;
}
.lineup--slider .slick-next {
  right: -50px;
}
.lineup--slider .slick-next img {
  transform: rotateY(180deg);
}
.lineup--slider .slick-prev:before,
.lineup--slider .slick-next:before {
  content: none;
}
.lineup--slider .slick-prev:hover,
.lineup--slider .slick-next:hover {
  opacity: 0.5;
  transition: 0.5s;
}

/* メイン画像 */
.lineup--box-main {
  position: relative;
}
.lineup--box-main > span {
  padding: 2px 10px;
  color: var(--color-white);
  font-size: 12px;
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 2;
}
.lineup--box-main img {
  aspect-ratio: 204 / 307;
  width: 100%;
  border: 1px solid #e5e5e5;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.4s ease;
  opacity: 1;
}
.lineup--box-main img.fade-out {
  opacity: 0;
}

/* サムネイル画像 */
.lineup--box-thumb {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lineup--box-thumb img {
  aspect-ratio: 63 / 75;
  width: 100%;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  object-fit: cover;
}
.lineup--box-thumb img:hover {
  opacity: 0.5;
  transition: 0.3s;
}

/* 着物番号 */
.lineup--box--num {
  margin-top: 20px;
  padding: 2px 10px;
  color: var(--color-white);
  font-size: 12px;
}
/* サイズ */
.lineup--box--size {
  margin-top: 3px;
  font-size: 12px;
}
/* タイトル */
.lineup--box--title {
  font-size: 14px;
  margin-top: 2px;
}

/* -- 女性 -- */
.lineup--cnt-woman .lineup--box-main > span,
.lineup--cnt-woman .lineup--box--num {
  background: #ea9dc6;
}
/* -- 男性 -- */
.lineup--cnt-men .lineup--box-main > span,
.lineup--cnt-men .lineup--box--num {
  background: #639ad1;
}
/* -- オプション -- */
.lineup--cnt-option .lineup--slider .slick-track {
  margin: 0 auto;
}
@media (min-width: 835px) {
  #lineup {
    margin-top: 20px;
    padding-top: 60px;
  }

  .lineup--inner {
    padding: 0 120px;
  }
  .lineup--slider .slick-slide {
    margin: 0 25px;
    box-sizing: border-box;
  }
  .lineup--slider .slick-track {
    margin-left: -25px;
    margin-right: -25px;
    display: flex;
  }
  .lineup--slider .slick-list {
    margin-right: -50px;
  }
  .lineup--cnt-option .lineup--slider .slick-list {
    margin-right: 0px;
  }
}
@media (max-width: 834px) {
  .lineup--slider {
    width: calc(100% + 30px);
    margin-left: -15px;
  }
  /* slick */
  .lineup--slider .slick-slide {
    margin: 0 28px;
  }
  .lineup--slider .slick-prev,
  .lineup--slider .slick-next {
    width: 13px;
    height: 19px;
  }
  .lineup--slider .slick-prev {
    left: 50px;
  }
  .lineup--slider .slick-next {
    right: 50px;
  }
  /* サイズ */
  .lineup--box--size {
    font-size: 12px;
  }
  /* タイトル */
  .lineup--box--title {
    font-size: 14px;
  }
}

/* ---------------------------------
　 利用可能な宿泊先
--------------------------------- */
#hotel {
  margin-top: 50px;
  padding-top: 110px;
}
#hotel .title--label {
  margin-top: 30px;
}
.hotel--list {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.hotel--list--img {
  position: relative;
}
.hotel--list--img > span {
  padding: 2px 10px;
  background: #5db78d;
  color: var(--color-white);
  font-size: 13px;
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 2;
}
.hotel--list--img img {
  height: 180px;
  object-fit: cover;
}
/* 宿泊コード */
.hotel--list--num {
  margin-top: 20px;
  padding: 2px 10px;
  background: #5db78d;
  color: var(--color-white);
  font-size: 13px;
}
/* 地域 */
.hotel--list--area {
  margin-top: 3px;
  font-size: 13px;
}
/* タイトル */
.hotel--list--title {
  font-size: 14px;
  margin-top: 2px;
}
/* タイトル */
.hotel--list--title--lang {
  font-size: 14px;
  margin-top: 2px;
}
@media (max-width: 834px) {
  #hotel {
    margin-top: 20px;
    padding-top: 60px;
  }
  #hotel .title--label {
    margin-top: 20px;
  }
  .hotel--list {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
    row-gap: 20px;
  }
  /* 地域 */
  .hotel--list--area {
    font-size: 12px;
  }
  /* タイトル */
  .hotel--list--title {
    font-size: 14px;
  }
  .hotel--list--img img {
    height: 150px;
  }
  .hotel--list--num {
    margin-top: 10px;
  }
}

/* ---------------------------------
　 料金
--------------------------------- */
#price {
  padding-top: 110px;
  margin-top: -30px;
}
.price--table {
  margin: 30px auto 0;
  padding: 0 15px;
  max-width: calc(950px + 30px);
}
.price--table table {
  width: 100%;
  border-collapse: collapse;
}
.price--table th {
  padding: 10px;
  padding-left: 50px;
  border-top: 4px double #dadcdc;
  border-bottom: 4px double #dadcdc;
  text-align: left;
  font-size: 13px;
  font-weight: 400;
}
.price--table td {
  padding: 30px 10px;
  padding-left: 50px;
  font-size: 16px;
}
.price--table tbody tr:nth-of-type(n + 2) {
  border-top: 1px solid #dadcdc;
}
.price--table tbody tr:last-of-type {
  border-bottom: 4px double #dadcdc;
}
@media (max-width: 834px) {
  #price {
    padding-top: 60px;
    margin-top: 20px;
  }
  .price--table {
    margin-top: 20;
    margin-left: 15px;
    padding: 0;
    width: calc(100% - 15px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .price--table table {
    width: 100%;
    min-width: 615px;
  }
  .price--table th {
    padding: 10px;
    padding-left: 15px;
    font-size: 11px;
  }
  .price--table td {
    padding: 15px 10px;
    padding-left: 15px;
    font-size: 14px;
  }
  .price--table--scroll {
    margin-top: 7px;
    margin-right: 30px;
    text-align: right;
  }
  .price--table--scroll img {
    margin-left: 10px;
    width: 15px;
    position: relative;
    top: -6px;
    right: 0;
  }
}

/* ---------------------------------
　 ご利用・ご予約の流れ
--------------------------------- */
#flow {
  margin-top: 148px;
  padding: 150px 0;
  background: #fbf8f3;
}
.flow--inner {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  max-width: calc(950px + 30px);
}
.flow--list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 134px;
}
.flow--list > li {
  position: relative;
}
.flow--list > li:nth-of-type(n + 2)::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-top: 1px dashed #5b5a51;
  position: absolute;
  top: -67px;
  left: 0;
}
.flow--list > li:nth-of-type(n + 2)::after {
  content: "";
  display: block;
  width: 68px;
  height: 43px;
  background: url(../images/top/flow/arrow.png) no-repeat center / contain;
  position: absolute;
  top: -85px;
  left: 50%;
  transform: translateX(-50%);
}
.flow--list--num {
  margin: 0 auto 20px;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
}
.flow--list > li:nth-of-type(1) .flow--list--num {
  background-image: url(../images/top/flow/step01.png);
}
.flow--list > li:nth-of-type(2) .flow--list--num {
  background-image: url(../images/top/flow/step02.png);
}
.flow--list > li:nth-of-type(3) .flow--list--num {
  background-image: url(../images/top/flow/step03.png);
}
.flow--list > li:nth-of-type(4) .flow--list--num {
  background-image: url(../images/top/flow/step04.png);
}

.flow--list--attention {
  margin-top: 13px;
  font-size: 14px;
  text-align: center;
}
.flow--list--catchimg {
  margin-top: 30px;
  height: 186px;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* ---- STEP01 ---- */
.flow--sublist {
  margin: 50px auto 0;
  max-width: 710px;
  display: flex;
  flex-direction: column;
}
.flow--sublist > li {
  padding-left: 24px;
  position: relative;
}
.flow--sublist > li:nth-of-type(n + 2) {
  padding-top: 20px;
}
.flow--sublist > li::before {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 13px + 20px);
  background: #5db78d;
  position: absolute;
  top: 13px;
  left: 5px;
}
.flow--sublist > li:nth-of-type(n + 2)::before {
  top: 0;
}
.flow--sublist > li:last-of-type::before {
  height: calc(13px + 20px);
}

.flow--sublist dt {
  padding: 5px 20px;
  padding-left: 60px;
  background: #5db78d;
  border-radius: 9999vh;
  color: var(--color-white);
  font-size: 18px;
  position: relative;
}
.flow--sublist dt::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #5db78d;
  position: absolute;
  left: -24px;
  top: 13px;
  border-radius: 100%;
}
.flow--sublist dt::after {
  content: attr(data-subListNum);
  position: absolute;
  top: 5px;
  left: 20px;
}
.flow--sublist dd {
  margin-top: 10px;
  margin-left: 60px;
}
.flow--sublist dd span {
  font-size: 13px;
}
@media (max-width: 834px) {
  #flow {
    margin-top: 80px;
    padding: 80px 0;
  }
  .flow--list {
    margin-top: 20px;
    gap: 86px;
  }
  .flow--list > li {
    position: relative;
  }
  .flow--list > li:nth-of-type(n + 2)::before {
    top: -43px;
  }
  .flow--list > li:nth-of-type(n + 2)::after {
    width: 48px;
    height: 29px;
    top: -56px;
  }
  .flow--list--num {
    margin-bottom: 10px;
    width: 68px;
    height: 68px;
  }

  .flow--list--attention {
    margin-top: 10px;
    font-size: 12px;
  }
  .flow--list--catchimg {
    margin-top: 20px;
    height: 160px;
  }

  /* ---- STEP01 ---- */
  .flow--sublist {
    margin-top: 30px;
  }
  .flow--sublist > li {
    padding-left: 20px;
  }
  .flow--sublist > li:nth-of-type(n + 2) {
    padding-top: 15px;
  }
  .flow--sublist > li::before {
    height: calc(100% - 10px + 15px);
    top: 10px;
  }
  .flow--sublist > li:last-of-type::before {
    height: calc(10px + 20px);
  }

  .flow--sublist dt {
    padding: 5px 15px;
    padding-left: 44px;
    font-size: 14px;
  }
  .flow--sublist dt::before {
    left: -20px;
    top: 10px;
  }
  .flow--sublist dt::after {
    left: 15px;
  }
  .flow--sublist dd {
    margin-top: 5px;
    margin-left: 44px;
    font-size: 13px;
  }
}

/* ---------------------------------
　 右下固定
--------------------------------- */
.fixbtn {
  position: fixed;
  bottom: 120px;
  right: 15px;
  z-index: 999;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.fixbtn.is-active {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 834px) {
  .fixbtn {
    bottom: 80px;
  }
  .fixbtn .btn--instagram--link {
    padding: 10px 18px;
  }
  .fixbtn .btn--instagram--link span {
    padding-left: 32px;
    font-size: 12px;
  }
  .btn--instagram--link span::before {
    width: 24px;
    height: 24px;
    top: 3px;
  }
}

/* ---------------------------------
　 着付け動画
--------------------------------- */
#kimono-video {
  margin-top: 40px;
  padding-top: 110px;
}
.kimono-video__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.kimono-video__item {
  max-width: 560px;
  width: 100%;
  text-align: center;
}
.kimono-video__item iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-rightgrey);
}
.kimono-video__caption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-black);
}
.kimono-video__line {
  border-bottom: 1px solid var(--color-rightgrey);
  padding-bottom: 50px;
  margin-bottom: 50px;
}
@media (max-width: 834px) {
  #kimono-video {
    margin-top: 20px;
    padding-top: 60px;
  }
  .kimono-video__line {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}

/* -- Support and Cooperation -- */
#support-cooperation {
  margin-top: 50px;
  padding-top: 110px;
}
.top--support-cooperation {
  margin-bottom: 150px;
}
.top--support-cooperation .title-catch {
  text-align: center;
}
.support-cooperation-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 20px;
  margin-top: 40px;
}
.support-cooperation-item {
  width: calc(20% - 20px);
  text-align: center;
}
.support-cooperation-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.support-cooperation-item a:hover {
  opacity: 0.7;
}
.support-cooperation-name {
  margin-top: 10px;
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  color: var(--color-black);
  display: block;
  border-top: 1px solid var(--color-grey);
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
.support-cooperation-item img {
  width: 100%;
  max-width: 150px;
  height: 80px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
@media (max-width: 834px) {
  #support-cooperation {
    margin-top: 20px;
    padding-top: 60px;
  }
  .support-cooperation-item {
    width: calc(50% - 10px);
  }
  .support-cooperation-name {
    font-size: 10px;
  }
  .top--support-cooperation {
    margin-bottom: 80px;
  }
}

.support-cooperation-item a.logo-jtb {
  color: #ff2d2d;
  font-size: 55px;
  font-weight: bold;
}