/* ==========================================================================
   cosme50.css
   owl cosme リニューアル用スタイル (EC-CUBE標準CSSの上に追加)

   【ブレークポイント方針(2026-08-27整理)】
   EC-CUBE標準テーマ(Bootstrap4ベース)のブレークポイントに統一しています。
   独自の820px/480pxは廃止し、576px / 768px / 992px の3段階のみを使用します。
   モバイルファースト(min-width)で記述し、無条件のルール = スマホ(〜767px)を基本形とし、
   768px以上・992px以上で必要な差分だけを上書きします。
     - 標準側のサイドバー(.ec-layoutRole__left/right)は 768px で display:none ⇄ block が
       切り替わるため、カスタム側もこの768pxに必ず合わせること(過去に768px前後で
       レイアウト崩れが起きた実績あり)
     - 576px: スマホ内でのごく細かい調整(文字サイズ・余白など)にのみ使用
     - 768px: SP⇄タブレット/PC(サイドバー表示・ハンバーガー⇄横並びヘッダー等、構造が変わる境界)
     - 992px: タブレット⇄PC(サイドバー幅の余裕など、デスクトップならではの調整)
   ========================================================================== */

/* ---------- Base ---------- */
:root {
  --c50-bg: #FFFAF4;
  --c50-border-bg: #f8f8f8;
  ;
  --c50-text-heading: #2f2b28;
  --c50-text-body: #514b47;
  --c50-border: #c0c0c0;
  --c50-border-light: #ebf0f3;
  --c50-banner-border: #6f93c5;
  --c50-banner-text: #1f4a80;
}

body {
  background-color: var(--c50-bg);
  color: var(--c50-text-body);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 15px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

p {
  line-height: 1.8;
}

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

i {
  margin-right: 0.5em;
}

img {
  max-width: 100%;
  height: auto;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.w100 {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.w100 img {
  width: 100%;
}

.small,
.s80 {
  font-size: 0.8em;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ec-layoutRole .ec-layoutRole__mainWithColumn {
  min-width: 0;
}

.underline {
  text-decoration: underline;
}

p {
  margin-bottom: 1em;
}

.bold {
  font-weight: 600;
}

.current,
.apg_category_description .current {
  color: var(--c50-text-heading);
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
/* モザイクボーダーは通常フローのまま(スクロールに追随しない) */

/* ヘッダーバー本体だけを固定表示にする(スマホ基本形: 高さ可変・折り返しあり) */
.c50-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-sizing: border-box;
  max-width: 1150px;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 4px;
  column-gap: 24px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.c50-header.is-visible {
  transform: translateY(0);
}

/* ヘッダーバーが被さる分、本文側に高さを空ける(スマホ基本形) */
.ec-layoutRole {
  padding-top: 82px;
}

.ec-headerNaviRole__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  flex-grow: 0;
  justify-content: flex-start;
  min-width: 0;
}

.ec-headerNaviRole__left .owl-logo {
  margin: 0;
}

/* ハンバーガーメニューがEC-CUBE標準でposition:absoluteのため、
   flexの並びを無視してロゴに重なってしまう。static化して並び順に従わせる
   (ラッパーdivは.ec-headerRole__navSP、実際のボタン要素は.ec-headerNavSP) */
.ec-headerNaviRole__left .ec-headerRole__navSP,
.ec-headerNaviRole__left .ec-headerNavSP {
  position: static;
  flex-shrink: 0;
  font-size: 24px;
}

.ec-headerNaviRole__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 1 auto;
  max-width: none;
  margin-left: auto;
  margin-right: 0;
  min-width: 0;
}

.ec-headerNaviRole__nav,
.ec-headerRole__cart {
  display: flex;
  align-items: center;
}

.ec-headerNaviRole__nav {
  padding-top: 4px;
}

.ec-headerNav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.owl-logo,
.owl-logo a {
  display: flex;
  align-items: center;
}

.owl-logo img {
  width: auto;
  height: 20px;
  max-width: 100px;
  display: block;
}

/* ログイン/ログアウト: アイコン下に小さいラベル */
.ec-headerNav__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ec-headerNav .ec-headerNav__itemIcon {
  margin: 0;
  color: var(--c50-text-heading);
}

.ec-headerNav__itemIcon {
  font-size: 16px;
}

.ec-headerNav .ec-headerNav__itemLink {
  display: inline-block;
  margin-right: 0 !important;
  font-size: 8px !important;
  line-height: 1;
}

/* ヘッダー内アイコン共通カラー */
.ec-headerNaviRole__left i,
.ec-headerNaviRole__right i,
.c50-searchform__btn i {
  color: var(--c50-text-heading);
}

.ec-drawerRole {
  background: transparent;
}

/* マイページ・お気に入りは非表示。ログイン/ログアウトのみ表示する */
.ec-headerNav__item:has(.fa-user),
.ec-headerNav__item:has(.fa-heart) {
  display: none;
}

/* ヘッダー内検索(CHRISTINA限定・mainと同じ960px幅で右寄せ、スマホ基本形は折り返して全幅) */
.c50-header__search {
  order: 3;
  flex: 1 1 auto;
  flex-basis: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  display: flex;
  justify-content: flex-end;
}

.c50-header__search .c50-searchform {
  width: 100%;
}

.c50-searchform {
  display: flex;
  align-items: center;
  height: 30px;
  border: 1px solid var(--c50-border);
  border-radius: 19px;
  padding: 0 6px 0 0;
  background: #fff;
  overflow: hidden;
}

.c50-searchform__select {
  flex-shrink: 0;
  max-width: 38%;
  height: 30px;
  border: none;
  outline: none;
  background: var(--c50-text-body);
  color: #fff;
  font-size: 11px;
  padding: 0 6px 0 10px;
  margin-right: 10px;
}

.c50-searchform__select option {
  color: var(--c50-text-heading);
  background: #fff;
}

.c50-searchform__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--c50-text-body);
}

.c50-searchform__btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
}

/* ヘッダー下部モザイクボーダー */
.mosaic-border {
  height: 20px;
  background-image: url("../img/common/header_back_5_0.jpg");
  background-repeat: repeat;
  background-size: 64px 64px;
}

.ec-layoutRole__mainBottom {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.6;
    color: var(--c50-text-body);
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1130px;
}

.product_page .ec-layoutRole__contents {
  padding-top: 40px;
}

.other_page .ec-layoutRole__contents {
  padding: 40px 12px 80px;
}

.ec-forgotRole {
  padding-bottom: 40px;
}

.ec-productRole img {
  height: auto;
}

.mb0 {
  margin-bottom: 0;
}

.mb20 {
  margin-bottom: 20px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb60 {
  margin-bottom: 60px;
}

.mb80 {
  margin-bottom: 80px;
}

.mb100 {
  margin-bottom: 100px;
}

.mb120 {
  margin-bottom: 120px;
}

@media (min-width: 768px) {
  .c50-header {
    height: 60px;
    flex-wrap: nowrap;
    padding: 0 20px;
  }

  .ec-layoutRole {
    padding-top: 60px;
  }

  .ec-headerNaviRole__right {
    flex: 0 0 auto;
    max-width: none;
    margin-right: 20px;
  }

  .ec-headerNaviRole__nav {
    padding-top: 0;
  }

  .owl-logo img {
    height: auto;
    max-width: 120px;
  }

  .c50-header__search {
    order: initial;
    flex-basis: auto;
    max-width: 960px;
    margin-left: 0;
  }

  .c50-searchform {
    height: 38px;
  }

  .c50-searchform__select {
    max-width: 30%;
    height: 38px;
    font-size: 12px;
    padding: 0 10px 0 16px;
  }
}

/* ==========================================================================
   main
   ========================================================================== */
.ec-registerRole {
    line-height: 1.6;
    color: var(--c50-text-body);
}

   .c50-breadcrumb {
  max-width: 1150px;
  margin: 0 auto;
  padding: 12px 20px;
}

.c50-breadcrumb ol {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--c50-text-body);
}

.c50-breadcrumb li {
  display: flex;
  align-items: center;
}

.c50-breadcrumb li:not(:last-child)::after {
  content: "\203A";
  margin: 0 8px;
  color: var(--c50-text-body);
}

.c50-breadcrumb a {
  color: var(--c50-text-body);
}

.c50-breadcrumb a:hover {
  text-decoration: underline;
}

.c50-breadcrumb li[aria-current="page"] {
  color: var(--c50-text-heading);
}

.column p {
  line-height: 1.8;
  font-size: 15px;
}

.registration_notes h2 {
  font-size: 20px;
  border-bottom: 1px solid var(--c50-banner-text);
  margin-bottom: 1.5em;
}

.registration_notes .checkbox {
  line-height: 3;
  text-align: center;
  font-weight: bold;
  margin-bottom: 80px;
  color: #55704A;
  border: 2px dotted #55704A;
  border-radius: 6px;
  margin-top: 40px;
}

/* ==========================================================================
   c50-menu (メニューパネル / サイドメニュー 共通)
   ========================================================================== */
.c50-menu {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #d8d3cf;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 50px;
}

.c50-menu__title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--c50-text-body);
  margin: 6px 4px;
}

.c50-menu__subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--c50-text-body);
  margin: 16px 4px 4px;
  padding-top: 12px;
  border-top: 1px solid #ddd9d5;
}

.c50-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.login_menu {
  padding: 8px;
  border-top: 2px solid #ddd9d5;
  border-bottom: 2px solid #ddd9d5;
  margin-top: 6px;
  margin-bottom: 6px;
}

.c50-menu__list li {
  border-top: 1px solid #ddd9d5;
}

.c50-menu__list li:first-child {
  border-top: none;
}

.c50-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 6px;
  font-size: 13px;
  color: var(--c50-text-body);
}

.c50-menu__list a span {
  font-size: 10px;
  font-weight: 300;
  color: var(--c50-text-heading);
  margin-left: 6px;
}

.c50-menu__list a::after {
  content: "\203A";
  /* › */
  font-size: 17px;
  color: var(--c50-text-heading);
  margin-left: auto;
  padding-left: 8px;
}

@media (min-width: 768px) {
  .c50-menu {
    margin-top: 40px;
  }
}

/* SP用ドロワー内では黒背景版に切り替え(Figma menu=main/christina等がダーク) */
#drawer .c50-menu {
  background: #17110d;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

#drawer .c50-menu__title {
  color: #b8b0a8;
  font-size: 13px;
  font-weight: 400;
}

#drawer .c50-menu__subtitle {
  color: #b8b0a8;
  font-size: 13px;
  font-weight: 400;
  border-top-color: rgba(255, 255, 255, 0.15);
}

#drawer .c50-menu__list li {
  border-top-color: rgba(255, 255, 255, 0.15);
}

#drawer .c50-menu__list a {
  color: #7fb3ff;
}

#drawer .c50-menu__list a span {
  color: #b8b0a8;
}

#drawer .c50-menu__list a::after {
  color: #b8b0a8;
}

/* ==========================================================================
   サイドバー幅(標準ブレークポイント768px/992pxに合わせる)
   768px未満は標準CSSのdisplay:noneのみに任せる(カスタム側は一切手を出さない)
   ========================================================================== */
/* 768〜991px(タブレット)はサイドバーをやめてハンバーガーメニューにする */
@media (max-width: 991px) {

  .ec-layoutRole .ec-layoutRole__left,
  .ec-layoutRole .ec-layoutRole__right {
    display: none !important;
  }

  .ec-headerRole .ec-headerRole__navSP,
  .ec-headerNavSP {
    display: block !important;
  }

  .ec-drawerRole,
  .ec-overlayRole {
    display: block !important;
  }

  .ec-drawerRoleClose.is_active {
    display: inline-block !important;
  }
}

/* 992px以上(PC)でサイドバーを表示 */
@media (min-width: 992px) {

  .ec-layoutRole .ec-layoutRole__left,
  .ec-layoutRole .ec-layoutRole__right {
    display: block;
    flex: 0 0 260px;
  }

  .c50-searchform select[name="category_id"] {
    height: 40px;
    font-size: 15px;
    /* 現状より大きくしたい場合はここを16px等に調整 */
  }

}

.ec-layoutRole .ec-layoutRole__mainWithColumn {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   ブランドヒーロー (brand-hero)
   ========================================================================== */
.brand-hero {
  padding: 12px 20px 40px;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.brand-hero__logo {
  margin: 0 0 16px;
}

.brand-hero__logo img {
  width: 200px;
  height: auto;
}

.tokio-top_page .brand-hero__logo img,
.davines-top_page .brand-hero__logo img {
  width: 160px;
  height: auto;
}

.brand-hero__image {
  margin-bottom: 40px;
}

.brand-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

.brand-hero__title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--c50-text-heading);
  margin: 0 0 16px;
}

.brand-hero__lead {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c50-text-body);
}

@media (min-width: 576px) {
  .brand-hero__title {
    font-size: 24px;
  }

  .brand-hero__lead {
    font-size: 16px;
  }
}

/* ==========================================================================
   セクション共通見出し (What Do You Need? / SHOP BY SERIES / About owl cosme)
   ========================================================================== */
.c50-section-head {
  text-align: center;
  max-width: 342px;
  margin: 0 auto 40px;
}

.c50-section-head__en {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--c50-text-heading);
  margin: 0 0 6px;
}

.c50-section-head__jp {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--c50-text-heading);
  margin: 0;
}

/* ==========================================================================
   肌悩みから選ぶ (skin-nav)
   ========================================================================== */
.skin-nav {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 20px 56px;
}

.skin-nav h2 {
  /* 見出しはFigmaの"What Do You Need?"パターンに合わせテキストを差し替え表示 */
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--c50-text-heading);
  text-align: center;
  margin: 0 0 40px;
}

.skin-nav__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0 18px;
}

@media (min-width: 820px) {
  .skin-nav__grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
}

.skin-nav__card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 12px;
  border-bottom: 2px dotted var(--c50-border-light);
}

.skin-nav__icon img {
  width: 82px;
  height: 82px;
  object-fit: cover;
}

.skin-nav__content {
  flex: 1;
}

.skin-nav__head {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--c50-text-body);
  padding: 10px 0;
  text-align: right;
}

.skin-nav__head::after {
  content: "  \2192";
  /* → */
}

.skin-nav__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  justify-content: flex-end;
}

.skin-nav__tag {
  font-size: 15px;
  color: var(--c50-text-body);
  text-decoration: underline;
}

.skin-nav__tag::after {
  content: "  \2192";
}

/* ==========================================================================
   シリーズから選ぶ (series-nav / top_list_category)
   ========================================================================== */
.series-nav {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 20px 0;
}

.series-nav h2 {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--c50-text-heading);
  text-align: center;
  margin: 0 0 40px;
}

.top_list_category {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 0 18px;
}

@media (min-width: 820px) {
  .top_list_category {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
}


.top_list_category>li {
  border: 1px solid #d8d3cf;
  list-style: none;
}

.top_list_category>li a {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 16px;
  padding: 12px;
}

.top_list_category .item_photo img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.top_list_category .item_cont {
  flex: 1;
  min-width: 0;
}

.top_list_category .item_cont h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--c50-text-heading);
  margin: 0 0 6px;
}

.top_list_category .item_cont h3 span {
  font-weight: 300;
  font-size: 12px;
  margin-left: 6px;
}

.top_list_category .item_cont p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c50-text-body);
  margin: 0;
}

.top_list_category .item_cont p i {
  color: var(--c50-text-body);
  margin-right: 4px;
}

@media (min-width: 576px) {
  .top_list_category .item_cont h3 {
    font-size: 24px;
  }

  .top_list_category .item_cont h3 span {
    font-size: 14px;
  }

  .top_list_category .item_cont p {
    font-size: 15px;
  }
}

/* ==========================================================================
   ALL [BRAND] PRODUCTS ボタン
   ========================================================================== */
.c50-allproducts {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 20px 24px;
  text-align: center;
}

.c50-allproducts h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--c50-text-heading);
  margin: 0 0 24px;
}

.c50-allproducts__btn {
  display: block;
  background: var(--c50-text-heading);
  color: #ffffff;
  height: 48px;
  line-height: 48px;
  border-radius: 2px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 15px;
}

.c50-allproducts__btn::after {
  content: "  \2192";
}

/* ==========================================================================
   About owl cosme
   ========================================================================== */
.about-owlcosme {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 20px;
}

.about-owlcosme__head {
  text-align: center;
  margin-bottom: 24px;
}

.about-owlcosme__title {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--c50-text-heading);
  margin: 0 0 6px;
}

.about-owlcosme__lead {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--c50-text-heading);
  margin: 0;
}

.about-owlcosme__inner {
  padding: 0 18px;
}

.about-owlcosme__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c50-text-body);
  margin: 0 0 10px;
}

.about-owlcosme__photos {
  display: flex;
  gap: 24px;
  background: #fff;
}

.about-owlcosme__photo {
  flex: 1;
  aspect-ratio: 171 / 111;
}

.about-owlcosme__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-owlcosme__photo a {
  display: block;
  text-align: right;
}

.about-owlcosme__link {
  text-align: right;
  margin-top: 10px;
}

.about-owlcosme__link a {
  font-size: 15px;
  color: var(--c50-text-body);
}

.about-owlcosme__link .arrow {
  display: inline-block;
  margin-left: 4px;
}

@media (min-width: 768px) {
  .about-owlcosme__inner {
    padding: 0 60px;
  }

  .about-owlcosme__text {
    font-size: 16px;
  }
}

/* ==========================================================================
   バナー2枚 (正規品 / サンプルサービス) + 配送案内
   ========================================================================== */
.c50-banner-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 12px;
}

@media (min-width: 768px) {
  .c50-banner-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px 40px;
  }
}

.c50-infobanner {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c50-banner-border);
  border-radius: 3px;
  padding: 6px 12px;
  color: var(--c50-banner-text);
}

.c50-infobanner__icon {
  font-size: 22px;
  flex-shrink: 0;
}

.c50-infobanner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c50-infobanner__title {
  font-size: 20px;
  line-height: 1.65;
}

.c50-infobanner__text {
  font-size: 15px;
  line-height: 1.65;
}

.c50-infobanner__arrow {
  flex-shrink: 0;
}

.c50-shipinfo {
  grid-column: 1 / -1;
  border: 1px solid var(--c50-banner-border);
  border-radius: 6px;
  padding: 9px 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

@media (min-width: 768px) {
  .c50-shipinfo {
    flex-wrap: nowrap;
    gap: 40px;
  }
}

.c50-shipinfo__item {
  text-align: center;
  color: var(--c50-banner-text);
}

.c50-shipinfo__icon img {
  width: 85px;
  height: 73px;
  object-fit: contain;
}

.c50-shipinfo__text {
  font-size: 13px;
  margin: 8px 0 0;
}

.c50-shipinfo__text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

/* ==========================================================================
   フッター
   ========================================================================== */
.ec-layoutRole__footer {
  background-image: linear-gradient(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.32)), url("../img/common/header_back_5_0.jpg");
  background-repeat: no-repeat, repeat;
  background-size: auto, 64px 64px;
  margin-top: 100px;
}

.secret_entry_link .secret_list a {
  color: #5C91AB;
  font-weight: bold;
}

.secret_entry_link {
  text-align: center;
  margin: 20px 0 20px;
}

.ec-footerNavi,
.ec-footerNavi a {
  color: var(--c50-text-body) !important;
}

.ec-footerTitle__logo,
.ec-footerTitle__logo a {
  color: var(--c50-text-heading) !important;
}

.ec-footerTitle__copyright,
.ec-footerTitle__copyright p {
  color: var(--c50-text-body) !important;
}

.ec-footerTitle__copyright p:first-child {
  color: var(--c50-text-heading) !important;
}

.ec-footerNavi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 12px;
  column-gap: 20px;
  padding: 18px 0;
}

.ec-footerNavi a {
  white-space: nowrap;
  font-size: 14px;
  color: var(--c50-text-body);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .ec-footerNavi {
    gap: 18px;
  }

  .ec-footerNavi a {
    font-size: 16px;
  }
}

.ec-footerTitle {
  text-align: center;
  padding: 24px 0;
}

.ec-copyrightRole {
  text-align: center;
  padding: 24px 0 60px;
}

.ec-copyrightRole small {
  display: block;
  font-size: 16px;
}

.ec-copyrightRole small:first-child {
  font-weight: 500;
  color: var(--c50-text-heading);
}

.ec-copyrightRole small:not(:first-child) {
  font-weight: 400;
  color: var(--c50-text-body);
  line-height: 1.65;
}

.ec-footerRole {
  background-color: transparent;
  padding-top: 40px;
  margin-top: 0;
  border: none;
}

.ec-footerNavi .ec-footerNavi__link a {
  padding: 4px;
  margin-bottom: 10px;
}

/* ==========================================================================
   c50-series-explore (OWAY「What Do You Need?」等、シリーズ+目的タグ探索)
   ========================================================================== */
.c50-series-explore__list {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 12px 20px;
}

.c50-series-explore__list>div {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c50-border);
}

@media (min-width: 768px) {
  .c50-series-explore__list {
    padding: 20px 30px 40px;
  }
}

.c50-series-explore__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.c50-series-explore__icon img {
  width: 100px;
  height: auto;
  object-fit: cover;
}

.c50-series-explore__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;
  padding: 10px 0;
}

.c50-series-explore__title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--c50-text-heading);
  margin: 0;
}

.c50-series-explore__all {
  align-self: flex-end;
  font-size: 14px;
  font-weight: 600;
  color: var(--c50-text-body);
}

.c50-series-explore__all::after {
  content: "  \2192";
}

.c50-series-explore__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 10px;
}

.c50-series-explore__tags a {
  font-size: 13px;
  color: var(--c50-text-body);
}

.c50-series-explore__tags a::after {
  content: "  \2192";
}

.c50-series-explore__guide {
  display: block;
  text-align: right;
  font-size: 13px;
  color: #000;
  margin-top: 10px;
}

.c50-series-explore__guide::after {
  content: "  \2192";
}

@media (min-width: 768px) {
  .c50-series-explore__icon img {
    width: 80px;
    height: 80px;
  }

  .c50-series-explore__title {
    font-size: 20px;
  }

  .c50-series-explore__all {
    font-size: 16px;
  }

  .c50-series-explore__tags a,
  .c50-series-explore__guide {
    font-size: 15px;
  }
}

/* ==========================================================================
   c50-series-list (TOKIO「SHOP BY SERIES」、シリーズ+箇条書きバリエーション)
   ========================================================================== */
.c50-series-list__wrap {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 10px;
}

.c50-series-list__item {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c50-border);
}

.c50-series-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
}

.c50-series-list__title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--c50-text-heading);
  margin: 0;
}

@media (min-width: 576px) {
  .c50-series-list__title {
    font-size: 18px;
  }
}

.c50-series-list__all {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--c50-text-body);
}

.c50-series-list__all::after {
  content: "  \2192";
}

.c50-series-list__bullets {
  list-style: none;
  margin: 0;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.c50-series-list__bullets li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--c50-text-body);
}

.c50-series-list__bullets li a::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c50-banner-border);
}

.c50-series-list__bullets .silver a::before {
  background: #7A7A7A;
}

.c50-series-list__bullets .gold a::before {
  background: #CB9B0C;
}

.c50-series-list__bullets .parple a::before {
  background: #662D91;
}

.c50-series-list__bullets .ruby a::before {
  background: #D4145A;
}

.c50-series-list__bullets .emerald a::before {
  background: #006837;
}

.c50-series-list__bullets .black a::before {
  background: var(--c50-text-heading);
}

.c50-series-list__bullets li a::after {
  content: "  \2192";
}

.c50-series-list__guide {
  display: block;
  max-width: 960px;
  margin: 8px auto 0;
  text-align: right;
  font-size: 13px;
  color: #000;
  padding: 3px 10px;
}

.c50-series-list__guide::after {
  content: "  \2192";
}

/* ==========================================================================
   c50-hero-slider (フロントページ Heroスライダー)
   ========================================================================== */
.c50-hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 548 / 274;
  overflow: hidden;
}

.c50-hero-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.c50-hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 3.4s ease-in-out;
}

.c50-hero-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.c50-hero-slider__bg {
  position: absolute;
  inset: 0;
}

.c50-hero-slider__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
}

.c50-hero-slider__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c50-hero-slider__copy {
  position: absolute;
  left: 40px;
  top: 20px;
  z-index: 1;
  color: var(--color-text-heading, #2f2b28);
}

.c50-hero-slider__title {
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  letter-spacing: 1.2px;
  line-height: 1.4;
  margin: 0 0 12px;
}

.c50-hero-slider__lead {
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}

@media (min-width: 576px) {
  .c50-hero-slider__title {
    font-size: 30px;
  }
}

@media (min-width: 768px) {
  .c50-hero-slider__copy {
    left: 60px;
    top: 40px;
  }

  .c50-hero-slider__title {
    font-size: 36px;
  }

  .c50-hero-slider__lead {
    font-size: 20px;
  }
}

.c50-hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--color-text-heading, #2f2b28);
  padding: 8px;
  cursor: pointer;
}

.c50-hero-slider__arrow--prev {
  left: 4px;
}

.c50-hero-slider__arrow--next {
  right: 4px;
}

.c50-hero-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 9px;
}

.c50-hero-slider__dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(47, 43, 40, 0.3);
  padding: 0;
  cursor: pointer;
}

.c50-hero-slider__dots button.is-active {
  background: var(--color-text-heading, #2f2b28);
}

/* ==========================================================================
   c50-brands (フロントページ BRANDS)
   ========================================================================== */
.c50-brands,
.c50-purpose {
  padding: 40px 6px;
}

.c50-brands__grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 992px) {
  .c50-brands__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.c50-brands__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #c0c0c0;
  text-align: center;
}

.c50-brands__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

.c50-brands__logo img {
  max-height: 100%;
  width: auto;
}

.c50-brands__desc {
  font-size: 14px;
  color: var(--color-text-body, #514b47);
  line-height: 1.45;
}

.c50-brands__arrow {
  font-size: 14px;
  color: var(--color-text-heading, #2f2b28);
}

/* ==========================================================================
   c50-purpose (フロントページ What Do You Need?)
   ========================================================================== */
.c50-purpose__grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  gap: 12px;
}

@media (min-width: 576px) {
  .c50-purpose__grid {
    padding: 0 20px;
  }
}

.c50-purpose__item {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 86px;
  border: 1px solid #c0c0c0;
  border-radius: 1px;
}

.c50-purpose__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 59px;
}

.c50-purpose__icon img {
  max-width: 100%;
  max-height: 100%;
}

.c50-purpose__label {
  font-size: 12px;
  color: #3a6283;
  text-align: center;
}

/* ==========================================================================
   c50-news (Information / 新着情報)
   ========================================================================== */
/* システムCSS(news.scss)の rotateX による強制回転を打ち消す */
#top-news .ec-newsRole__newsCloseBtn i {
  transform: none;
}

.c50-news {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 20px;
}

.c50-news__list {
  max-width: 720px;
  margin: 0 auto;
}

/* 初期状態は閉じておく */
.ec-newsRole__newsDescription {
  display: none;
}

/* 1件ずつの区切り */
.ec-newsRole__newsItem {
  border-bottom: 1px solid #ddd9d5;
}

.ec-newsRole__newsItem:first-child {
  border-top: 1px solid #ddd9d5;
}

/* 見出し行(日付+タイトル+矢印) */
.ec-newsRole__newsHeading {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 8px;
  cursor: pointer;
}

.ec-newsRole__newsDate {
  flex-shrink: 0;
  width: 60px;
  padding-top: 2px;
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  color: var(--color-text-body, #514b47);
}

.ec-newsRole__newsColumn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ec-newsRole__newsTitle {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-heading, #2f2b28);
}

.ec-newsRole__newsClose {
  flex-shrink: 0;
}

.ec-newsRole__newsCloseBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--color-text-body, #514b47);
}

.ec-newsRole__newsCloseBtn .icon-open {
  display: none;
}

.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn .icon-closed {
  display: none;
}

.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn .icon-open {
  display: inline-block;
}

/* 本文 */
.ec-newsRole__newsDescription {
  padding: 0 8px 20px 68px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-text-body, #514b47);
}

.ec-newsRole__newsDescription a {
  color: var(--color-text-heading, #2f2b28);
  text-decoration: underline;
}

/* もっと見るボタン */
.c50-news #news_readmore {
  display: block;
  width: fit-content;
  margin: 28px auto 0;
  padding: 12px 40px;
  border-radius: 3px;
  background: var(--color-text-body, #514b47);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.c50-news #news_readmore:hover {
  opacity: 0.85;
}

@media (min-width: 576px) {
  .ec-newsRole__newsHeading {
    align-items: center;
    gap: 12px;
  }

  .ec-newsRole__newsDate {
    width: 78px;
    padding-top: 0;
  }

  .ec-newsRole__newsDescription {
    padding-left: 90px;
  }
}

/* ==========================================================================
   c50-review (New Review / 新着レビュー)
   ========================================================================== */
.c50-review {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 20px;
}

.c50-review__list,
.reviewList,
.review_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 576px) {
  .c50-review__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.c50-review__item--none {
  text-align: center;
  color: var(--c50-text-body);
  padding: 40px 0;
  grid-column: 1 / -1;
}

.c50-review__card,
.review-card,
.review_list li {
  background: rgba(255, 254, 253, 0.86);
  border: 1px solid rgba(143, 135, 128, 0.28);
  border-radius: 6px;
  box-shadow: 0 1px 3px 0 rgba(41, 36, 31, 0.07);
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c50-review__link,
.review-card__link {
  display: flex;
  gap: 16px;
  align-items: center;
}

.c50-review__img,
.review-card__img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
}

@media (min-width: 576px) {

  .c50-review__img,
  .review-card__img {
    width: 64px;
    height: 64px;
  }
}

.c50-review__img img,
.review-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c50-review__head,
.review-card__head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c50-review__productName,
.review-card__productName {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c50-text-heading);
  margin: 0;
}

.c50-review__toProduct,
.review-card__toProduct {
  font-size: 11px;
  color: var(--c50-text-body);
}

.c50-review__body,
.review-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.c50-review__title,
.review-card__title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--c50-text-heading);
  margin: 0;
}

.c50-review__meta,
.review-card__meta {
  font-size: 11px;
  color: var(--c50-text-body);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.c50-review__star,
.review-card__star {
  color: #e0a939;
  letter-spacing: 1px;
}

.c50-review__comment,
.review-card__comment {
  font-size: 12px;
  line-height: 1.7;
  color: var(--c50-text-body);
}

.c50-review__more,
.review-card__star {
  margin-top: 32px;
}

.c50-review__moreBtn,
.review-card__moreBtn {
  display: block;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 3px;
  background-color: var(--c50-text-body);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 13px;
}

.product_page .review_date {
  font-size: 14px;
  margin-bottom: 8px;
}

.product_page .review_list {
  margin-bottom: 40px;
}

.review_list li p {
  font-size: 14px;
  ;
}

.all-review {
  padding: 6px;
}

.all-review .intro_inner {
  font-family: "Noto Serif JP", serif;
  padding-bottom: 40px;
}

.all-review .part_title {
  font-size: 26px;
  margin-bottom: 20px;
}

.all-review .part_title span {
  display: inline-block;
  font-size: 18px;
}

.all-review .intro_inner p {
  line-height: 1.8;
  padding: 8px;
}

/* ==========================================================================
   ご利用ガイド
   ========================================================================== */

.guide {
  padding: o 8px;
}

.guide .h1 {
  text-align: center;
  margin-bottom: 60px;
}

.guide .index {
  padding: 8px;
  background-color: var(--c50-border-bg);
  border: 1px solid var(--c50-border-light);
}

.guide .index h3 {
  font-size: 14px;
  margin-bottom: 1em;
}

.guide .index li {
  font-size: 14px;
  line-height: 2;
}

.guide section {
  padding: 40px 0;
}

.guide section h2 {
  font-size: 18px;
  border-bottom: dotted 1px var(--c50-border);
  padding-left: 1em;
  margin-bottom: 20px;
}

.guide section p {
  font-size: 15px;
}

.guide img {
  width: 60%;
  margin: 8px auto;
  display: block;
}

.guide section li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 0.5em;
}

.guide section dt {
  margin-bottom: 0.5em;
}

.guide section dd {
  margin-bottom: 2em;
  line-height: 1.8;
}

#page_help_tradelaw a,
#guide-page a {
  text-decoration: underline;
}

/* ==========================================================================
   c50-tagFilter (タグ絞り込みブロック / ボタン化)
   ========================================================================== */
.c50-tagFilter {
  max-width: 1080px;
  margin: 0 auto 24px;
  padding: 20px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c50-tagFilter h3 {
  font-size: 14px;
  margin: 0 8px;
  ;
}

.c50-tagFilter__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c50-tagFilter__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(143, 135, 128, 0.4);
  border-radius: 24px;
  font-size: 12px;
  color: var(--c50-text-heading);
  text-decoration: none;
  background: #fff;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

@media (min-width: 576px) {
  .c50-tagFilter__pill {
    font-size: 13px;
  }
}

.c50-tagFilter__pill img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.c50-tagFilter__pill:hover {
  background: rgba(41, 38, 36, 0.06);
}

.c50-tagFilter__pill.is-active {
  background: var(--c50-border-bg);
  border-color: var(--c50-banner-text);
}

.c50-tagFilter__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c50-tagFilter__brands a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgba(143, 135, 128, 0.4);
  border-radius: 20px;
  font-size: 12px;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--c50-text-heading);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.c50-tagFilter__brands a:hover {
  background: rgba(41, 38, 36, 0.08);
}

.c50-tagFilter__brands a.is-active {
  background: var(--c50-border-bg);
  border-color: var(--c50-banner-text);
}

/* ==========================================================================
   マイページ・カート・注文関連の微調整
   ========================================================================== */
.mypage .ec-role {
  padding-top: 40px;
}

.mypage .ec-layoutRole__mainBottom {
  padding: 20px;
}

.login_guide {
  max-width: 624px;
  border: dotted 2px var(--c50-banner-border);
  color: var(--c50-banner-text);
  border-radius: 4px;
  box-sizing: border-box;
  padding: 20px 10px 30px;
  margin-left: auto;
  margin-right: auto;
}

.login_guide .link_button a {
  display: block;
  width: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
  border: solid 1px var(--c50-banner-border);
  color: var(--c50-banner-text);
  border-radius: 100vh;
  margin-top: 20px;
}

.cart_page main {
  padding: 40px 12px;
}

.cart_page .c50-header__search {
  display: none;
}

.ec-cartRole {
  margin-bottom: 40px;
}

.ec-cartRole .ec-blockBtn--cancel {
  margin-bottom: 30px;
}

.amazonpay-note {
  font-size: 12px;
}

.cart_page .ec-login {
  margin-bottom: 40px;
}

.ec-cartRow .ec-cartRow__summary {
  font-size: 14px;
}

.ec-orderRole .ec-borderedList {
  margin-bottom: 40px;
}

.ec-orderDelivery .ec-orderDelivery__address {
  margin-bottom: 40px;
}

.ec-selects {
  margin-bottom: 40px;
}

.ec-select select {
  font-size: 15px;
}

.ec-rectHeading h2 {
  margin-bottom: 40px;
}

.ec-radio {
  margin-bottom: 40px;
}

.ec-radio>div {
  padding-top: 15px;
  border-top: 1px dotted #ccc;
  margin-top: 15px;
}

#paypal-credit-card {
  margin-top: 0;
}

#paypal-credit-card p {
  font-size: 14px;
}

.ec-totalBox {
  margin-bottom: 40px;
}

.ec-orderRole {
  padding: 40px;
}

/* ==========================================================================
   新規会員フォーム
   ========================================================================== */

.registration_page .ec-pageHeader {
  padding: 40px 0;
}

.registration_page .form-note,
.entry-mail-note {
  font-size: 0.8em;
}

.registration_page .ec-borderedDefs dl {
  padding: 25px 0 15px;
}

.security {
  padding: 40px 18px;
}

.security h2 {
  font-size: 16px;
  margin-bottom: 20px;
}

.security li {
  margin-bottom: 20px;
}

/* ==========================================================================
   商品一覧(ec-shelfGrid)
   ========================================================================== */

.apg_category_image {
  width: 100%;
}

#page_product_list .ec-layoutRole__contents {
  padding-top: 0
}

#page_product_list main {
  padding: 0 12px;
}

.apg_category_description {
  margin: 0;
}

.apg_category_content .c50-series-explore__tags {
  gap: 0;
}

.apg_category_description h1 {
  margin: 0;
  font-size: 20px;
}

.apg_category_description a {
  padding: 0 6px;
  line-height: 2;
  color: var(--c50-banner-border);
}

.ec-shelfGrid {
  gap: 8px;
  flex-wrap: wrap;
}

.ec-shelfRole .ec-shelfGrid .ec-shelfGrid__item {
  flex: 0 0 100%;
  padding: 0;
  box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--c50-border-light);
  background-color: #fff;
}

.ec-shelfGrid .ec-shelfGrid__item-image {
  width: 88px;
  flex-shrink: 0;
}

.product_list_productdiscription {
  display: flex;
  flex-direction: column;
  padding-left: 6px;
}

.productlist_discription a {
  display: flex;
  flex-wrap: nowrap;
  padding: 6px;
  margin-bottom: 6px;
}

.product_list_productdiscription h2 {
  font-size: 16px;
  margin: 0 0 6px;
}

.productlist_discription .product_description {
  font-size: 14px;
  line-height: 1.4;
}

.review-price-block {
  font-size: 13px;
}

.login_cart_area {
  display: flex;
  justify-content: flex-end;
}

.login_cart_area form {
  width: 130px;
  padding-right: 12px;
}

.login_cart_area form span {
  font-size: 12px;
}

.ec-login .ec-login__link {
  margin-top: 12px;
}

.ec-blockBtn--action {
  background-color: var(--c50-text-body);
  border-color: var(--c50-text-heading);
}

.guest-guide .ec-blockBtn--action {
  background-color: #fff;
  border-color: var(--c50-banner-text);
  color: var(--c50-banner-text);
}

.ec-blockBtn--action:hover {
  background-color: var(--c50-text-heading);
}

.ec-select {
  margin-bottom: 4px;
}

.ec-searchnavRole__actions p {
  font-size: 12px;
}


@media (min-width: 768px) {
  .ec-shelfRole .ec-shelfGrid .ec-shelfGrid__item {
    flex: 0 0 calc(50% - 5px);
  }
}

/* ==========================================================================
   商品詳細ページ
   ========================================================================== */

.ec-sliderItemRole .item_nav {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.ec-sliderItemRole .slideThumb {
  margin-bottom: 12px;
  width: 25%;
  text-align: center;
}

.ec-topicpath {
  line-height: 2.4;
}

.ec-sliderItemRole .slideThumb.is-active img {
  border: 2px solid #ffa41c;
}

.ec-sliderItemRole .slideThumb img {
  width: 90%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.ec-sliderItemRole .slick-dots {
  display: none !important;
}

.ec-productRole .ec-productRole__title .ec-headingTitle {
  font-size: 24px;
  line-break: strict;
  overflow-wrap: break-word;
}

.ec-productRole .ec-productRole__price {
  color: var(--c50-banner-text);
}

.ec-productRole .ec-productRole__code {
  font-size: 0.8em;
}

.ec-productRole .ec-productRole__category h3 {
  margin-top: 0;
  font-size: 14px;
}

.ec-productRole .ec-productRole__category li {
  font-size: 14px;
  line-height: 2;

}

.ec-blockBtn--cancel {
  background-color: transparent;
  border-color: var(--c50-banner-text);
  color: var(--c50-banner-text);
}

.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
  color: var(--c50-banner-text);
}

.ec-productRole .ec-productRole__btn {
  margin-bottom: 24px;
}

#page_product_detail .detail_title {
  background-color: var(--c50-border-light);
  font-size: 15px;
  padding: 3px 1em;
  margin: 1em 0 0;
}

.product_page p {
  line-height: 1.8;
}

.ec-productRole__description a {
  text-decoration: underline;
  color: var(--c50-banner-text);
}

.product_page .component {
  font-size: 13px;
  line-height: 1.4;
}

.price_revision {
  padding: 12px;
  border: 1px var(--c50-banner-text) solid;
  border-radius: 3px;
  text-align: center;
}

.product_page .column_link a {
  display: block;
  text-decoration: none;
  line-height: 1.4;
  font-size: 14px;
}

.product_page .product_review_area {
  padding: 40px 8px;
}


.impotant_note {
  padding: 4vw 4vw 4vw 8vw;
  background-color: var(--c50-border-light);
  border-radius: 3px;
  font-size: 0.8em;
}

.impotant_note li {
  margin-bottom: 0.75em;
}

.product_review_area h4 {
  font-size: 18px;
  margin-bottom: 30px;
}

#product_review_area h4 span {
  font-size: 15px;
}

#product_review_area #reviewContent .review_list {
  padding: 0;
}

#product_review_area #reviewContent .review_list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

#product_review_area .review_list .review_date {
  margin-bottom: 1em;
}

.product_review_area .ec-inlineBtn--action {
  background-color: #fff;
  border-color: var(--c50-banner-text);
  color: var(--c50-banner-text);
  margin-bottom: 40px;
}

.accordion details:not(:last-child) {
  margin-bottom: 20px;
}

.accordion details {
  border: 1px solid var(--c50-banner-text);
}

.accordion details summary {
  list-style: none;
  cursor: pointer;
  padding: 6px;
  background: #F3F3F3;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

#RelatedProduct-product_area .ec-shelfGrid {
  flex-direction: row;
  padding: 40px 18px;
}

#RelatedProduct-product_area .ec-shelfGrid li {
  flex: 0 0 25%;
  padding: 1vw;
  font-size: 0.9em;
}

.ec-shelfRole .ec-shelfGrid .ec-shelfGrid__item {
  margin-bottom: 20px;
  flex-direction: column;
  padding: 6px;
}

#RelatedProduct-product_area .ec-shelfGrid__item>span {
  font-size: 0.8em;
  line-height: 1.25;
  height: 2.5em;
  overflow: hidden;
}

#RelatedProduct-product_area .ec-shelfGrid__item a>p:nth-of-type(2) {
  font-size: 0.8em;
  line-height: 1.25;
  height: 2.5em;
  overflow: hidden;
  padding-bottom: 4px;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 4px;
}

#RelatedProduct-product_area .ec-shelfGrid__item a>p:nth-of-type(3) {
  display: none;
}

.c-tag span {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e69432;
  border-radius: 100vh;
  font-size: 14px;
  color: #e69432;
  padding: 0.15em 0.5em;
  margin-right: 0.5em;
}

.c-tag span i {
  padding-right: 0.5em;
}

.c-tag .type {
  border: 1px solid #54698F;
  color: #54698F;
}

.c-tag .condition {
  background-color: #fff;
  color: #5B734B;
  border: 1px solid #5B734B;
}

.condition span {
  background-color: #fff;
  color: #5B734B;
  border: 1px solid #5B734B;
  margin-bottom: 0.5em;
}

.purpose span {
  border-radius: 2px;
  font-size: 13px;
  padding: 0.3em 0.1em;
  background-color: #5B734B;
  color: #fff;
}

.productlist_discription .c-tag span {
  font-size: 10px;
}

.registration_notes {
  padding: 0 30px;
}

.registration_notes h1 {
  font-size: calc(1.1rem + 1.125vw);
  border-top: 2px solid var(--c50-banner-border);
  border-bottom: 2px solid var(--c50-banner-border);
  color: var(--c50-text-heading);
  padding: 8px;
  margin-bottom: 40px;
}

@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__title .ec-headingTitle {
    font-size: 28px;
  }
}

/* ==========================================================================
   コラム
   ========================================================================== */

.column_container {
  padding: 30px 3vw;
}

.column_container h1 {
  font-size: 24px;
  line-height: 1.5;
}

.column_container h1 span {
  font-size: 18px;
  font-weight: 500;
}

.column_part {
  padding: 40px 6px;
}

.column .notice {
  border: var(--c50-banner-border) dotted 1px;
  background-color: var(--c50-border-bg);
  padding: 12px 6px;
  border-radius: 4px;
}

.column .notice h2 {
  font-size: 16px;
  padding-left: 1em;
  border-bottom: var(--c50-banner-border) dotted 1px;
}

.related {
  padding: 20px 12px;
  border: var(--c50-banner-border) dotted 1px;
  background-color: var(--c50-border-bg);
}

.related h4,
.related h3,
.series-block h3 {
  font-size: 14px;
}

.related ul li {
  font-size: 13px;
  line-height: 2;
}

.dot {
  text-align: center;
  padding: 40px 0;
}

.series-block .item-box,
.item-box .item-wrap,
.scalp-nayami .item-box,
.outbath .item-box ,.revier_campaign{
  background-color: var(--c50-border-bg);
  border: var(--c50-banner-border) dotted 2px;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 40px;
}

.series-block .item-box img {
  width: 60%;
}

.series-block .item-box h4 {
  font-size: 16px;
  background-color: #fff;
  margin-bottom: 20px;
}

.series-block .item-box dl {
  background-color: #fff;
  border: var(--c50-border-bg) 1px solid;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 6px;
}

.for-use section {
  border: var(--c50-border) dotted 4px;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 40px;
}

.for-use section h3 {
  text-align: center;
  font-size: 16px;
  margin: 0 0 20px;
}

.for-use section dl {
  line-height: 1.8;
}

.for-use section img {
  width: 60%;
}

.column .header_img img {
  width: 100%;
}

.oway_shampoo h2 {
  font-size: 22px;
  line-height: 1.6;
}

.oway_shampoo h2 span {
  font-size: 0.8em;
  display: block;
  ;
  text-align: right;
}

.oway_shampoo h3 {
  font-size: 16px;
}

.oway_shampoo .item {
  font-size: 20px;
}

.oway_shampoo .item span {
  font-size: 14px;
}

.oway_shampoo .item .ename {
  display: block;
  text-align: right;
  font-size: 18px;
}

.item-box .item-wrap .right-link,
.outbath .right-link {
  text-align: center;
  margin-bottom: 20px;
}

.item-box .item-wrap .right-link img,
.outbath .right-link img {
  width: 50%;
  max-width: 300px;
}

.item-box .item-wrap .right-link span,
.outbath .right-link span {
  display: block;
  text-align: center;
}

/*--星マーク--------------*/
.type .wrap {
  display: inline-block;
  margin: 0 1em 1em;
}

.type .rate {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 16px;
}

.type .rate:before,
.type .rate:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  display: inline-block;
  height: 16px;
  line-height: 16px;
}

.type .rate:before {
  color: #ddd;
}

.type .rate:after {
  color: #ffa500;
  overflow: hidden;
  white-space: nowrap;
}

.type .rate0:after {
  width: 0;
}

.type .rate1:after {
  width: 16px;
}

.type .rate1-5:after {
  width: 24px;
}

.type .rate2:after {
  width: 32px;
}

.type .rate2-5:after {
  width: 40px;
}

.type .rate3:after {
  width: 48px;
}

.type .rate3-5:after {
  width: 56px;
}

.type .rate4:after {
  width: 64px;
}

.type .rate4-5:after {
  width: 72px;
}

.type .rate5:after {
  width: 80px;
}

.type .siyoukan {
  text-align: center;
}

.type .hand .wrap {
  width: 80px;
  display: inline-block;
  margin: 0 10px;
}

.type .star {
  float: left;
}

#cosme_box {
  display: flex;
  justify-content: space-around;
}

#cosme_box div {
  flex-basis: 23%;
}

#cosme_box div span {
  font-size: 1.2rem;
}

/*--星マーク-end-------------*/
.oway_shampoo .column_part section {
  margin-bottom: 40px;
}

.link-area {
  text-align: right;
}

.revier_campaign{
  margin-top: 40px;
  padding: 40px 12px;
}
.revier_campaign h4{
  color: var(--c50-banner-text);
  line-height: 2;
}

@media only screen and (min-width: 768px) {

  .column .notice,
  .related,
  .series-block .item-box,
  .for-use section {
    padding: 3vw;
  }

}