/* Inter Font Import */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* Font preload for better performance */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2")
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2")
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2")
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

.u-text--head {
  color: #363636 !important;
  font-size: 24px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-color--head {
  color: #363636 !important;
}
.u-text--subhead {
  color: #363636 !important;
  font-size: 17px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-text--body {
  color: #333333 !important;
  font-size: 16px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-text--strong {
  color: #363636 !important;
  font-size: 16px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-text--link {
  color: #9a9a9a !important;
  font-size: 16px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-text--head--overlay {
  color: #ffffff !important;
  font-size: 24px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-text--subhead--overlay {
  color: #ffffff !important;
  font-size: 17px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-text--body--overlay {
  color: #ffffff !important;
  font-size: 16px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-text--color--overlay {
  color: #ffffff !important;
}
.u-color__btn--bg {
  background: #9a9a9a !important;
}
.u-color__btn--bg--overlay {
  background: #9a9a9a !important;
}
.u-color__btn {
  color: #9a9a9a !important;
}
.u-text--btn {
  color: #363636 !important;
  font-size: 16px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-text--btn--overlay {
  color: #363636 !important;
  font-size: 16px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-color__btn--text {
  color: #363636 !important;
}
.u-color__btn--text--bg {
  background: #363636 !important;
}
.u-text--input {
  color: #9a9a9a !important;
  font-size: 16px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-color--input {
  color: #9a9a9a !important;
}
.u-color__input--bg {
  background: #ffffff !important;
}
.u-color__border--input {
  border-color: #363636 !important;
}
.u-color__bg--base {
  background: #ffffff !important;
}
.u-color__bg--main {
  background: #ffffff !important;
}
.u-color__border--border {
  border-color: #d8dddf !important;
}
.u-color__border--main {
  border-color: #d8dddf !important;
}
.u-font--head {
  font-size: 24px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-font--subhead {
  font-size: 17px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-font--body {
  font-size: 16px !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic",
    sans-serif;
}
.u-font--bold {
  font-weight: bold;
}

.c-product_item__actions .c-product_item__form--favorite {
  display: none;
}

.c-product_item__actions .c-product_item__form--cart {
  display: none;
}

.c-product_item .c-product_item__inner__content {
  margin-top: 0;
}

/*================ Fonts ================*/

/*================ Headings ================*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "游ゴシック", serif;
}

/*================ Variables ================*/
:root {
  --color-text-head: #363636;
  --color-text-body: #333333;
  --color-text-overlay: #ffffff;
  --color-btn-bg: #9a9a9a;
  --color-btn-text: #363636;
  --color-input-text: #9a9a9a;
  --color-input-border: #363636;
  --color-page-bg: #ffffff;
  --color-page-border: #d8dddf;
}

.c-steps_to_order--theme {
  --theme-color: var(--color-btn-bg) !important;
  --text-color: var(--color-btn-text) !important;
}

.p-movie--theme {
  --theme-color: var(--color-btn-bg);
}

/*================ Information Section Background ================*/
section[data-section-type="information"] {
  background-color: rgba(242, 242, 242, 1) !important;
}

.c-news_section_padding--top {
  padding-top: 80px !important;
}
.c-news_section_padding--bottom {
  padding-bottom: 80px !important;
}

.p-news__inner__title__en {
  font-family: "Futura", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-size: 34px !important;
  line-height: 130% !important;
  letter-spacing: 0.1em !important;
  text-align: center !important;
}

@media screen and (max-width: 720px) {
  .p-news__inner__title__en {
    font-size: 24px !important;
  }
}

.c-news_item__inner {
  display: block !important;
  padding: 0 !important;
}

/*================ News Item Image Styles ================*/

.c-news_item__img {
  width: 100%;
}

.c-news_item__img img {
  width: 100%;
  height: auto;
  display: block;
}

.c-news_item__inner__title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif !important;
  font-size: 14px !important;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 0.1em;
  padding-left: 0 !important;
  margin-top: 12px !important;
}

.c-news_item__inner__date {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.1em !important;
  color: rgba(85, 88, 90, 1) !important;
  margin-top: 4px !important;
  padding-left: 0 !important;
}

/*================ More Button Styles ================*/
.p-news__inner__more__btn {
  width: 360px !important;
  max-width: 360px !important;
  height: 54px !important;
  padding: 12px !important;
  gap: 10px !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  background-color: rgba(255, 255, 255, 1) !important;
  color: rgba(85, 88, 90, 1) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 20px !important;
  line-height: 130% !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

@media screen and (max-width: 720px) {
  .c-news_item__inner__date {
    font-size: 12px !important;
  }

  .p-news__inner__more__btn {
    max-width: 345px !important;
    width: 100% !important;
    height: 42px !important;
    padding: 12px !important;
    font-size: 14px !important;
    gap: 10px !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }
}

/*================ Information Section Horizontal Layout ================*/
/* PC用の横並びレイアウト - 最大3つ表示 */
@media screen and (max-width: 720px) {
  .p-news {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }
}
@media screen and (min-width: 719px) {
  .p-news {
    padding: 0 !important;
    margin-left: 48px !important;
    margin-right: 48px !important;
  }

  .p-news__inner {
    max-width: 1080px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .p-media__inner__list--horizontal .p-media__inner__list__item {
    width: 300px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .p-news__inner__list--horizontal {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    margin: 0 auto !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  .c-news_item {
    width: 300px !important;
    flex: 1;
    margin: 0 !important;
  }

  .p-column__inner__list--horizontal .p-column__inner__list__item {
    width: 300px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  .c-news_item__inner {
    padding: 0 !important;
  }
}

/* スマートフォン用は既存のスタイルを維持 */
@media screen and (max-width: 720px) {
  .p-media__inner__list--horizontal,
  .p-news__inner__list--horizontal,
  .p-column__inner__list--horizontal {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .p-media__inner__list--horizontal .p-media__inner__list__item,
  .p-news__inner__list--horizontal,
  .p-column__inner__list--horizontal .p-column__inner__list__item {
    width: 100% !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }

  .c-news_item {
    width: 100% !important;
    flex-shrink: 0 !important;
    max-width: 450px !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }
}

/*================ Information Section Image Aspect Ratio ================*/
/* 16:9のアスペクト比を設定 */
.c-media_item__img__inner,
.c-news_item__img img,
.c-column_item__inner__img {
  aspect-ratio: 16 / 9 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 画像コンテナのサイズ調整 */
.c-media_item__img,
.c-news_item__img,
.c-column_item__inner {
  width: 100% !important;
}

/* 画像の幅を100%に設定 */
.c-news_item__img img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* 背景画像の場合の高さ調整 */
.c-media_item__img__inner,
.c-column_item__inner__img {
  width: 100% !important;
  height: auto !important;
}

/* スマートフォン用の調整 */
@media screen and (max-width: 720px) {
  .c-media_item__img__inner,
  .c-news_item__img img,
  .c-column_item__inner__img {
    aspect-ratio: 16 / 9 !important;
  }
}

/*================ Information Section Title Truncation ================*/
/* タイトルを2行で切り詰める */
.c-media_item__text,
.c-news_item__inner__title,
.c-column_item__inner__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
  max-height: calc(1.4em * 2) !important; /* 2行分の高さ */
}

/* スマートフォン用の調整 */
@media screen and (max-width: 720px) {
  .c-media_item__text,
  .c-news_item__inner__title,
  .c-column_item__inner__title {
    -webkit-line-clamp: 2 !important;
    max-height: calc(1.4em * 2) !important;
  }
}

/*================ New Product Section ================*/

.p-new_product {
  background-color: rgba(249, 249, 249, 1) !important;
}

.productsArea {
  row-gap: 20px !important;
  justify-content: center !important;
}

.p-new_product__title {
  margin-bottom: 44px !important;
}

.p-new_product__title__jp {
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(217, 217, 217, 1) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  line-height: 130% !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;
  color: rgba(85, 88, 90, 1) !important;
}

.p-new_product__title__en {
  margin-top: 10px !important;
  margin-bottom: 0px !important;
  font-family: "Futura", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  font-size: 24px !important;
  line-height: 130% !important;
  letter-spacing: 0.1em !important;
  text-align: center !important;
  color: rgba(33, 35, 37, 1) !important;
}

.product-img {
  margin-top: 0 !important;
}

.product-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 130% !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
  color: rgba(33, 35, 37, 1) !important;
  font-style: normal !important;
  margin-bottom: 12px !important;
}

.p-new_product__more__btn {
  width: 360px !important;
  max-width: 360px !important;
  height: 54px !important;
  padding: 12px !important;
  gap: 10px !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  background-color: rgba(255, 255, 255, 1) !important;
  color: rgba(85, 88, 90, 1) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 20px !important;
  line-height: 130% !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

@media screen and (max-width: 720px) {
  .productsArea {
    justify-content: space-between !important;
  }

  .p-new_product {
    padding: 64px 24px 80px 24px;
  }

  .p-new_product__more__btn {
    max-width: 345px !important;
    width: 100% !important;
    height: 42px !important;
    padding: 12px !important;
    font-size: 14px !important;
    gap: 10px !important;
    border-radius: 0 !important;
    opacity: 1 !important;
  }
}

@media screen and (min-width: 720px) {
  .p-new_product {
    padding: 64px 0 80px 0 !important;
  }

  .p-product__wrapper {
    margin-left: 48px !important;
    margin-right: 48px !important;
    margin: 0 auto;
  }

  .productsArea {
    max-width: 1080px !important;
    margin: 0 auto !important;
  }
}

/*================ Concept Section ================*/
.p-concept__title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto !important;
  font-weight: 700 !important;
  font-style: Bold !important;
  font-size: 16px !important;
  line-height: 195% !important;
  letter-spacing: 0.12em;
  text-align: center;
}

 .p-concept__text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 195% !important;
  letter-spacing: 0.12em;
  text-align: center;
 }