@charset "UTF-8";

/* ==========================================================================
   N.O.R.C FIT GUIDE -スムーズミルドウールシリーズのパンツ2型を履き比べ-
   SP: 767px以下 = calc(● * (100vw / 375))  /  PC: 768px以上 = rem (1rem = 10px)
   ========================================================================== */

/* パンくず 追加スタイル PC (規約: LPはパンくずとMVの間に余白がないため) */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

/* ==========================================================================
   カスタムプロパティ (規約: :root ではなく .p-feature に適用する)
   ========================================================================== */
.p-feature {
  --font-yu: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  --font-aktiv: "aktiv-grotesk", sans-serif;

  --color-base: #353839;
  --color-bg-gray: #F7F7F7;
  --color-dot: #ccc;
  --color-dot-current: #000;
  --color-dot-round: #BFBFBF;
  --color-black: #000;
  --color-beige: #AB907B;
}

/* 規約: 必須指定 */
.p-feature :where(img, svg) {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   ページ共通
   ========================================================================== */
.lp_fitguide {
  font-family: var(--font-yu);
  font-weight: 400;
  font-style: normal;
  color: var(--color-base);
  text-align: center;
  overflow: clip;
  font-size: calc(13 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.075em;
  padding-bottom: calc(143 * (100vw / 375));
}

.lp_fitguide picture {
  display: block;
}

.lp_fitguide img {
  vertical-align: bottom;
}

.lp_fitguide a {
  color: inherit;
  text-decoration: none;
}

.lp_fitguide ul {
  list-style: none;
}

/* SP/PC 出し分けの <br> は inline のまま改行させる
   (.visible-phone / .hidden-phone はサイト共通 parts.css の display 切替を利用) */
@media screen and (max-width: 767px) {
  .lp_fitguide br.visible-phone {
    display: inline;
  }
}

@media screen and (min-width: 768px) {
  .lp_fitguide {
    font-size: 1.4rem;
    padding-bottom: 10.2rem;
  }

  .lp_fitguide a {
    transition: opacity var(--transition-regular, 0.3s);
  }

  .lp_fitguide a:hover {
    opacity: var(--hover-opacity, 0.7);
  }

  .lp_fitguide br.hidden-phone {
    display: inline;
  }
}

/* ==========================================================================
   メインビジュアル
   ========================================================================== */
.sec_mv {
  padding-bottom: calc(55 * (100vw / 375));
}

.mv_image {
  margin: 0 auto;
}

.mv_text {
  margin-top: calc(54 * (100vw / 375));
}

.mv_text p {
  font-size: calc(13 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.075em;
}

.mv_text p + p {
  margin-top: calc(26 * (100vw / 375));
}

@media screen and (min-width: 768px) {
  .sec_mv {
    padding-bottom: 7.9rem;
  }

  .mv_image {
    max-width: 120rem;
  }

  .mv_text {
    margin-top: 7.3rem;
  }

  .mv_text p {
    font-size: 1.4rem;
  }

  .mv_text p + p {
    margin-top: 2.8rem;
  }
}

/* ---- 機能アイコン ---- */
.icon__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(262 * (100vw / 375));
  margin: calc(55 * (100vw / 375)) auto 0;
  row-gap: calc(20 * (100vw / 375));
}

.icon_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(119 * (100vw / 375));
}

.icon_item.item01 {
  width: 100%;
}

.icon_item.item04,
.icon_item.item05{
  margin-top: calc(9 * (100vw / 375));
}

.icon_img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(74 * (100vw / 375));
}

.icon_img.img01 { width: calc(66.4 * (100vw / 375)); }
.icon_img.img02 { width: calc(56 * (100vw / 375)); }
.icon_img.img03 { width: calc(73.6 * (100vw / 375)); }
.icon_img.img04 { width: calc(67.2 * (100vw / 375)); }
.icon_img.img05 { width: calc(71.2 * (100vw / 375)); }

.icon_label {
  margin-top: calc(12 * (100vw / 375));
  font-size: calc(13 * (100vw / 375));
  font-weight: 700;
  line-height: 1.3846153846;
  letter-spacing: 0.075em;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .icon__wrapper {
    flex-wrap: nowrap;
    width: 86rem;
    margin: 5rem auto 0;
    row-gap: 0;
  }

  .icon_item,
  .icon_item.item01 {
    width: 17.2rem;
  }

  .icon_item.item04,
  .icon_item.item05{
    margin-top: 0;
  }

  .icon_img {
    height: 9.2rem;
  }

  .icon_img.img01 { width: 8.3rem; }
  .icon_img.img02 { width: 7rem; }
  .icon_img.img03 { width: 9.2rem; }
  .icon_img.img04 { width: 8.4rem; }
  .icon_img.img05 { width: 8.9rem; }

  .icon_label {
    margin-top: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.2857142857;
  }
}

/* ==========================================================================
   VARIATION
   ========================================================================== */
.link_area {
  width: 100%;
  background-color: var(--color-bg-gray);
  padding: calc(44 * (100vw / 375)) 0 calc(50 * (100vw / 375));
}

.sec_ttl--row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  column-gap: calc(8 * (100vw / 375));
  padding-bottom: calc(23 * (100vw / 375));
}

.sec_ttl--row .sec_ttl__jp {
  font-weight: 700;
  font-size: calc(18 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.1em;
}

.sec_ttl--row .sec_ttl__en {
  font-family: var(--font-aktiv);
  font-weight: 300;
  font-size: calc(18 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.1em;
}

.img_cv {
  display: block;
  width: calc(295 * (100vw / 375));
  margin: 0 auto;
}

.cm_ttl {
  margin-top: calc(10 * (100vw / 375));
  font-size: calc(14 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.075em;
}

.cm_price {
  margin-top: calc(5 * (100vw / 375));
  font-size: calc(14 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.075em;
}

.colorway {
  display: flex;
  justify-content: center;
  column-gap: calc(20 * (100vw / 375));
  margin-top: calc(13 * (100vw / 375));
}

.colorway_color {
  display: block;
  width: calc(48 * (100vw / 375));
  height: calc(48 * (100vw / 375));
}

.colorway_color--black { background-color: var(--color-black); }
.colorway_color--beige { background-color: var(--color-beige); }

.viewmore {
  position: relative;
  display: inline-block;
  margin-top: calc(23 * (100vw / 375));
  padding: 0 calc(22 * (100vw / 375)) calc(4 * (100vw / 375)) 0;
  font-size: calc(14 * (100vw / 375));
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.075em;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-base);
}

/* 原稿の指定「このアイテムをもっとみる >」に合わせ、Figma の ∨ を 90 度回して右向きにする
   (各アイテムのセクションへジャンプするリンクのため。アコーディオンではない) */
.viewmore::after {
  content: "";
  position: absolute;
  right: calc(1 * (100vw / 375));
  top: calc(11 * (100vw / 375));
  width: calc(11 * (100vw / 375));
  height: calc(6 * (100vw / 375));
  background: url(../img/arrow.svg) no-repeat center / contain;
}

@media screen and (min-width: 768px) {
  .link_area {
    padding: 7.9rem 0 8rem;
  }

  .sec_ttl--row {
    column-gap: 1.1rem;
    padding-bottom: 4.3rem;
  }

  .sec_ttl--row .sec_ttl__jp,
  .sec_ttl--row .sec_ttl__en {
    font-size: 3rem;
    line-height: 1.2;
  }

  .cm_variation__wrapper {
    display: flex;
    justify-content: center;
    column-gap: 9rem;
  }

  .cm_variation__container {
    width: 34rem;
  }

  .img_cv {
    width: 34rem;
  }

  .cm_ttl {
    margin-top: 1.4rem;
    font-size: 1.4rem;
    line-height: 1.8;
  }

  .cm_price {
    margin-top: 0.6rem;
    font-size: 1.4rem;
  }

  .colorway {
    column-gap: 2rem;
    margin-top: 1.4rem;
  }

  .colorway_color {
    width: 4.8rem;
    height: 4.8rem;
  }

  .viewmore {
    margin-top: 2.3rem;
    padding: 0 2.2rem 0.3rem 0;
    font-size: 1.4rem;
  }

  .viewmore::after {
    right: 0.3rem;
    top: 1rem;
    width: 1.091rem;
    height: 0.546rem;
  }
}

/* ==========================================================================
   商品セクション共通 (sec01 / sec02) ・ Other Items
   ========================================================================== */
.sec {
  margin: 0 auto;
  /* VARIATION からのページ内アンカーで、サイト共通ヘッダーに見出しが隠れないようにする
     (ヘッダー高さは固定値にせず variables.css の --headerHeight を使う) */
  scroll-margin-top: var(--headerHeight, 0px);
}

.sec01 { padding-top: calc(53 * (100vw / 375)); }
.sec02 { padding-top: calc(83 * (100vw / 375)); }
.sec_others { padding-top: calc(80 * (100vw / 375)); }

.content_box {
  width: 100%;
}

/* ---- セクション見出し ---- */
.content_box > .sec_ttl,
.sec_others > .sec_ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(32 * (100vw / 375));
  border-bottom: 1px solid var(--color-base);
}

.sec_ttl__en {
  font-family: var(--font-aktiv);
  font-weight: 600;
  font-size: calc(30 * (100vw / 375));
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.sec_ttl__jp {
  font-size: calc(14 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.075em;
}

.sec .sec_ttl__jp {
  margin-top: calc(3 * (100vw / 375));
}

/* ---- サブ見出し (01. SILHOUETTE 等) ---- */
.sec_subttl {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(8 * (100vw / 375));
  margin-top: calc(59 * (100vw / 375));
  font-family: var(--font-aktiv);
  font-weight: 500;
  font-size: calc(20 * (100vw / 375));
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.sec_subttl__jp {
  font-family: var(--font-yu);
  font-weight: 600;
  font-size: calc(19 * (100vw / 375));
  letter-spacing: 0.075em;
}

/* ---- スライダー / 画像ボックス ---- */
.sec__inner {
  width: 100%;
  border-bottom: 1px solid var(--color-base);
  padding-bottom: calc(55 * (100vw / 375));
}

.sec_box01 {
  position: relative;
  width: calc(345 * (100vw / 375));
  margin: calc(29 * (100vw / 375)) auto 0;
}

/* ---- キャッチ / 本文 / 品番・価格 ---- */
.sec_header {
  margin-top: calc(22 * (100vw / 375));
  font-size: calc(14 * (100vw / 375));
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.075em;
}

.sec_text {
  margin-top: calc(16 * (100vw / 375));
}

.sec_text p {
  font-size: calc(14 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.075em;
}

.sec_text p + p {
  margin-top: calc(28 * (100vw / 375));
}

.sec_tax {
  margin-top: calc(18 * (100vw / 375));
}

.sec_tax .sec_tax__name,
.sec_tax .sec_tax__price{
  text-decoration: underline;
}

.sec__inner04 .sec_tax__name,
.sec__inner04 .sec_tax__price,
.sec_others .sec_tax__name,
.sec_others .sec_tax__price{
  text-decoration: none;
}

.sec_tax__link,
.sec_tax .no_id {
  display: block;
  font-size: calc(12 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.075em;
}

@media screen and (max-width: 767px) {
  .sec_box01{
    overflow: hidden;
  }
}

@media screen and (min-width: 768px) {
  .sec01 { padding-top: 8.1rem; }
  .sec02 { padding-top: 9.2rem; }
  .sec_others { padding-top: 6rem; }

  .content_box > .sec_ttl,
  .sec_others > .sec_ttl {
    padding-bottom: 3.1rem;
  }

  .sec02 .content_box > .sec_ttl{
    padding-bottom: 5.2rem;
  }

  .sec_ttl__en {
    font-size: 3rem;
  }

  .sec_ttl__jp {
    font-size: 1.4rem;
  }

  .sec_subttl {
    column-gap: 1rem;
    margin-top: 6rem;
    font-size: 2rem;
  }

  .sec02 .sec__inner02 .sec_subttl{
    margin-top: 14.2rem;
  }

  .sec_subttl__jp {
    font-size: 1.9rem;
  }

  .sec__inner {
    padding-bottom: 5.5rem;
  }

  .sec_box01 {
    width: 50rem;
    margin-top: 2.8rem;
  }

  .sec_header {
    margin-top: 4.3rem;
    font-size: 1.4rem;
  }

  .sec_text {
    margin-top: 2.5rem;
  }

  .sec_text p {
    font-size: 1.4rem;
  }

  .sec_text p + p {
    margin-top: 0;
  }

  .sec_tax {
    margin-top: 2.8rem;
  }

  .sec_tax__link,
  .sec_tax .no_id {
    font-size: 1.2rem;
  }

  .sec .sec_ttl__jp {
    margin-top: 0.5rem;
  }
}

/* ==========================================================================
   02. 身長別 STYLE GUIDE
   ========================================================================== */
.sec_model {
  margin-top: calc(16 * (100vw / 375));
  margin-bottom: calc(9 * (100vw / 375));
  font-family: var(--font-aktiv);
  font-weight: 600;
  font-size: calc(14 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.1em;
}

.sec__inner02 .sec_box01 {
  margin-top: calc(9 * (100vw / 375));
}

.sec__inner02 .sec_tax {
  margin-top: calc(35 * (100vw / 375));
}

/* Slick の `.slick-initialized .slick-slide { display: block }` より詳細度を上げる */
/* .style_guide,
.slide02 .slick-slide.style_guide {
  display: flex;
  justify-content: space-between;
} */

.slide02 .slick-slide .style_guide__item-wrap {
  display: flex;
  justify-content: center;
  gap: calc(15 * (100vw / 375));
}

.style_guide__item {
  width: calc(165 * (100vw / 375));
}

.style_guide__item .sec_img + .sec_img {
  margin-top: calc(14 * (100vw / 375));
}

.style_guide__size {
  margin-top: calc(7 * (100vw / 375));
  font-family: var(--font-aktiv);
  font-weight: 600;
  font-size: calc(14 * (100vw / 375));
  line-height: 2;
  letter-spacing: 0.1em;
}

@media screen and (min-width: 768px) {
  .sec_model {
    margin-top: 3rem;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    line-height: 1.75;
  }

  .sec__inner02 .sec_box01 {
    margin-top: 0.5rem;
  }

  .sec__inner02 .sec_tax {
    margin-top: 3.3rem;
  }

  .sec02 .sec__inner02 .sec_tax {
    margin-top: 3.3rem;
  }

  .style_guide__item {
    width: 24rem;
  }

  .style_guide__item .sec_img + .sec_img {
    margin-top: 1.1rem;
  }

  .style_guide__size {
    margin-top: 0.5rem;
    font-size: 1.4rem;
  }

  .slide02 .slick-slide .style_guide__item-wrap {
    gap: 1.8rem;
  }
}

/* ==========================================================================
   03. POINT
   ========================================================================== */
.sec__inner03{
  padding-bottom: calc(27 * (100vw / 375));
}

.sec02 .sec__inner03{
  padding-bottom: calc(30 * (100vw / 375));
}

.sec_text--point {
  margin-top: calc(43 * (100vw / 375));
}

.sec_text--point p {
  font-size: calc(13 * (100vw / 375));
}

@media screen and (min-width: 768px) {
  .sec__inner03{
    padding-bottom: 2.4rem;
  }

  .sec02 .sec__inner03{
    padding-bottom: 2.4rem;
  }

  .sec_text--point {
    margin-top: 5.2rem;
  }

  .sec_text--point p {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   04. COORDINATE / Other Items のアイテムリスト
   ========================================================================== */
.sec__inner04{
  padding-bottom: calc(60 * (100vw / 375));
}

.sec02 .sec__inner04{
  padding-bottom: calc(57 * (100vw / 375));
}

.sec__inner04 .sec_tax,
.sec_others__inner .sec_tax {
  display: flex;
  flex-direction: column;
  row-gap: calc(7 * (100vw / 375));
  margin-top: calc(23 * (100vw / 375));
  text-align: left;
}

.sec__inner04 .sec_tax {
  width: calc(344 * (100vw / 375));
  margin-left: auto;
  margin-right: auto;
}

.sec__inner04 .sec_tax__link,
.sec__inner04 .sec_tax .no_id,
.sec_others__inner .sec_tax__link,
.sec_others__inner .sec_tax .no_id {
  font-size: calc(14 * (100vw / 375));
  line-height: 1.9;
}

.sec02 .sec__inner04 .sec_tax__item:nth-of-type(3) .sec_tax__price{
  margin-top: calc(-2 * (100vw / 375));
}

.sec_tax__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: calc(16 * (100vw / 375));
}

.sec_tax__price {
  display: block;
  margin-top: calc(-3 * (100vw / 375));
}

.buy_btn {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(40 * (100vw / 375));
  height: calc(20 * (100vw / 375));
  margin-top: calc(6 * (100vw / 375));
  background-color: var(--color-base);
  color: #fff;
  font-family: var(--font-aktiv);
  font-weight: 500;
  font-size: calc(11 * (100vw / 375));
  line-height: 1;
  letter-spacing: 0.075em;
}

.buy_btn--info {
  cursor: pointer;
}

/* INFO 詳細 (品番・発売時期) : 初期非表示、.js-info-btn クリックで .is-open を付け外しする */
.info_detail {
  display: none;
  flex-direction: column;
  margin-top: calc(-19 * (100vw / 375));
  padding-right: calc(9 * (100vw / 375));
  border-right: 1px solid #000;
  text-align: right;
}

.info_detail.is-open {
  display: flex;
}

.info_detail__item {
  font-size: calc(12 * (100vw / 375));
  line-height: 1;
}

.info_detail__item:not(:nth-of-type(1)){
  margin-top: calc(12 * (100vw / 750));
}

@media screen and (max-width: 767px) {
  .info_detail__item{
    letter-spacing: 0;
  }

  .info_detail.basic{
    margin-top: calc(-40 * (100vw / 375));
    margin-bottom: calc(10 * (100vw / 375));
  }
}

@media screen and (min-width: 768px) {
  .sec__inner04{
    padding-bottom: 4.9rem;
  }

  .sec02 .sec__inner04{
    padding-bottom: 4.7rem;
  }

  .sec__inner04 .sec_tax,
  .sec_others__inner .sec_tax {
    row-gap: 0;
    margin-top: 1.2rem;
  }

  .sec02 .sec__inner04 .sec_tax{
    margin-top: 2rem;
  }

  .sec__inner04 .sec_tax {
    width: 50rem;
  }

  .sec__inner04 .sec_tax__link,
  .sec__inner04 .sec_tax .no_id,
  .sec_others__inner .sec_tax__link,
  .sec_others__inner .sec_tax .no_id {
    font-size: 1.4rem;
    line-height: 2.7;
  }

  .sec_tax__head {
    column-gap: 1.5rem;
  }

  .buy_btn {
    width: 4rem;
    height: 2rem;
    margin-top: 0.8rem;
    font-size: 1.1rem;
  }

  .info_detail {
    margin-top: -2.5rem;
    margin-bottom: 2rem;
    margin-right: 0;
    padding-right: 1rem;
  }

  .info_detail__item {
    font-size: 1.2rem;
  }

  .info_detail__item:not(:nth-of-type(1)){
    margin-top: 0.6rem;
  }
}

/* ==========================================================================
   Other Items
   ========================================================================== */
.sec_others__inner {
  width: calc(345 * (100vw / 375));
  margin: calc(60 * (100vw / 375)) auto 0;
}

.sec_others__inner .sec_tax {
  margin-top: calc(25 * (100vw / 375));
}

@media screen and (min-width: 768px) {
  .sec_others__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 109.4rem;
    margin: 0 auto;
    padding: 6rem 0;
  }

  .sec_others__inner .others_img {
    width: 50rem;
    flex-shrink: 0;
  }

  .sec_others__inner .sec_tax {
    width: 53.1rem;
    margin-top: -0.8rem;
  }

  .sec_others {
    border-bottom: 1px solid var(--color-base);
  }
}

/* ==========================================================================
   フッターボタン
   ========================================================================== */
.lp_foot_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(335 * (100vw / 375));
  height: calc(50 * (100vw / 375));
  margin: calc(59 * (100vw / 375)) auto 0;
  font-size: calc(14 * (100vw / 375));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.075em;
  background: var(--color-base);
  color: #fff;
}

.lp_foot_btn.top_btn {
  background: #fff;
  color: var(--color-base);
  border: 1px solid var(--color-base);
}

@media screen and (min-width: 768px) {
  .lp_foot_btn {
    width: 30rem;
    height: 5rem;
    margin: 6rem auto 0;
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   Slick カスタマイズ (サイト同梱の jQuery + Slick を使用)
   ========================================================================== */
/* slick-theme.css の `.slick-dotted.slick-slider { margin-bottom: 30px }` を打ち消す
   (ドットは position: static で流れに載せ、余白は各要素の margin で管理する) */
.lp_fitguide .slick-dotted.slick-slider {
  margin-bottom: 0;
}

/* 初期化前のちらつき防止: 2枚目以降を隠す。
   .js-slick-ready は script.js が「Slick が実際に使える」と判定したときだけ付くため、
   jQuery / Slick の読み込みに失敗した環境ではスライドが全部並ぶ (商品リンクが消えない) */
.js-slick-ready .slide02:not(.slick-initialized) > *:not(:first-child) {
  display: none;
}

/* キーボード操作時のフォーカスリング (destyle.css のリセットで消えているため補う) */
.lp_fitguide .slick-prev:focus-visible,
.lp_fitguide .slick-next:focus-visible,
.lp_fitguide .slick-dots li button:focus-visible {
  outline: 2px solid var(--color-base);
  outline-offset: 2px;
}

/* ---- 矢印 ---- */
.slide02 .slick-prev,
.slide02 .slick-next {
  width: auto;
  height: auto;
  z-index: 3;
  top: 48%;
  transform: translateY(-50%);
}

.sec__inner02 .slide02 .slick-prev,
.sec__inner02 .slide02 .slick-next {
  top: 52%;
}

@media screen and (max-width: 767px) {
  .sec__inner02 .slide02 .slick-prev,
  .sec__inner02 .slide02 .slick-next {
    top: 49%;
  }
}

.sec__inner03 .slide02 .slick-prev,
.sec__inner03 .slide02 .slick-next {
  top: 36%;
}

@media screen and (max-width: 767px) {
  .sec__inner03 .slide02 .slick-prev,
  .sec__inner03 .slide02 .slick-next {
    top: 32%;
  }
}

/* padding でタップ領域を 44×44 相当まで広げ、その分 left/right を戻して
   矢印の見た目の位置はデザイン値 (画像内側 13px) のまま保つ */
.slide02 .slick-prev,
.slide02 .slick-next {
  padding: calc(6 * (100vw / 375)) calc(14 * (100vw / 375));
}

.slide02 .slick-prev { left: calc(-4 * (100vw / 375)); }
.slide02 .slick-next { right: calc(-4 * (100vw / 375)); }

.slide02 .slick-prev::before,
.slide02 .slick-next::before {
  content: "";
  display: block;
  width: calc(16 * (100vw / 375));
  height: calc(32 * (100vw / 375));
  opacity: 1;
  background: url(../img/arrow_left.svg) no-repeat center / contain;
}

.slide02 .slick-next::before {
  background-image: url(../img/arrow_right.svg);
}

/* ---- ドット (横長バー) ---- */
.slide02 .slick-dots {
  position: static;
  display: flex !important;
  justify-content: center;
  align-items: center;
  column-gap: calc(8 * (100vw / 375));
  margin-top: calc(18 * (100vw / 375));
  padding: 0;
}

.sec__inner03 .slide02 .slick-dots{
  position: absolute;
  top: calc(228 * (100vw / 375));
  height: fit-content;
}

.slide02 .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.slide02 .slick-dots li button {
  position: relative;
  width: calc(30 * (100vw / 375));
  height: 2px;
  padding: 0;
  border: none;
  background-color: var(--color-dot);
  font-size: 0;
}

.sec__inner03 .slide02 .slick-dots li button {
  width: calc(40 * (100vw / 375));
}

.slide02 .slick-dots li button::before {
  display: none;
}

/* 見た目 2px のバーのままタップ領域だけ上下に広げる (レイアウトには影響しない) */
.slide02 .slick-dots li button::after {
  content: "";
  position: absolute;
  top: calc(-15 * (100vw / 375));
  bottom: calc(-15 * (100vw / 375));
  left: calc(-4 * (100vw / 375));
  right: calc(-4 * (100vw / 375));
}

.slide02 .slick-dots li.slick-active button {
  background-color: var(--color-dot-current);
}

.sec__inner02 .slide02 .slick-dots {
  margin-top: calc(23 * (100vw / 375));
}

@media screen and (min-width: 768px) {
  .slide02 .slick-prev,
  .slide02 .slick-next {
    padding: 0.6rem 1.4rem;
  }

  /* padding 分 (1.4rem) を戻して矢印の見た目の位置をデザイン値に保つ */
  .slide02 .slick-prev { left: -7.3rem; }
  .slide02 .slick-next { right: -7.4rem; }

  .slide02 .slick-prev::before,
  .slide02 .slick-next::before {
    width: 1.8rem;
    height: 3.6rem;
  }

  .slide02 .slick-dots {
    column-gap: 0.8rem;
    margin-top: 1.8rem;
  }

  .slide02 .slick-dots li button {
    width: 4rem;
  }

  .sec__inner02 .slide02 .slick-dots {
    margin-top: 2.5rem;
  }

  .sec02 .sec__inner02 .slide02 .slick-dots {
    margin-top: 1.7rem;
  }

  .sec__inner03 .slide02 .slick-dots li button {
    width: 4rem;
  }

  .sec__inner03 .slide02 .slick-dots{
    top: 33.1rem;
  }
}

/* ---- VARIATION スライダー (SP のみ・丸ドット) ---- */
@media screen and (max-width: 767px) {
  /* 初期化前の非表示は .js-slick-ready 起点にする (Slick 不在時に商品が消えないように) */
  .js-slick-ready .cm_variation__wrapper:not(.slick-initialized) > *:not(:first-child) {
    display: none;
  }

  .cm_variation__wrapper .slick-dots {
    position: static;
    display: flex !important;
    justify-content: center;
    align-items: center;
    column-gap: calc(20 * (100vw / 375));
    margin-top: calc(30 * (100vw / 375));
    padding: 0;
  }

  .cm_variation__wrapper .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
  }

  .cm_variation__wrapper .slick-dots li button {
    position: relative;
    width: calc(12 * (100vw / 375));
    height: calc(12 * (100vw / 375));
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--color-dot-round);
    font-size: 0;
  }

  .cm_variation__wrapper .slick-dots li button::before {
    display: none;
  }

  /* 見た目 12px の丸のままタップ領域だけ広げる (レイアウトには影響しない) */
  .cm_variation__wrapper .slick-dots li button::after {
    content: "";
    position: absolute;
    top: calc(-13 * (100vw / 375));
    bottom: calc(-13 * (100vw / 375));
    left: calc(-8 * (100vw / 375));
    right: calc(-8 * (100vw / 375));
    border-radius: 0;
  }

  .cm_variation__wrapper .slick-dots li.slick-active button {
    background-color: var(--color-base);
  }
}