@charset "UTF-8";

/* ========================================
   Base / Common
   ======================================== */
:root {
  --color-main: #4398B2;
  --color-light: #D9D9D9;
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-muted: #dfdfdf;
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", "MS PMincho", "MS P明朝", serif;
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "YuGothic", "Yu Gothic", sans-serif;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}

/* 共通レイアウト枠 */
.l-header,
.l-footer__inner,
.p-section,
.p-ranking,
.p-product-list,
.p-culmun,
.p-information {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.p-section,
.p-ranking,
.p-product-list,
.p-culmun,
.p-information {
  margin-bottom: 6.25rem !important;
}

/* 共通タイトル */
.section-ttl {
  text-align: center;
  color: var(--color-main);
  margin-bottom: 3.125rem;
  font-family: var(--font-serif);
}

.section-ttl h3 {
  font-size: 2.125rem;
  font-weight: 100;
  margin-bottom: -0.35rem;
}

.section-ttl h4 {
  font-size: 1rem;
  font-weight: 100;
  opacity: 0.8;
  letter-spacing: 0.05em;
}

/* 共通ボタン */
.button {
  text-align: center;
  margin-top: 1.875rem;
}

/* ボタン (Arrow Image Version) */
.button a {
  display: inline-flex;
  justify-content: center; /* テキストを中央揃え */
  align-items: center;     /* 上下中央揃え */
  width: 18.76rem;
  height: 2.5rem;
  border: 1px solid var(--color-light);
  border-radius: 9999px;
  color: var(--color-text);
  font-size: 1.0625rem;
  transition: all 0.3s;
  position: relative; /* 矢印を配置するための基準にする */
  stroke: var(--color-text);
}

.button a img {
  stroke: var(--color-text);
}

.ranking__button a {
  border: 1px solid var(--color-main);
  color: var(--color-main);
}

/* 矢印画像のサイズ調整と配置 */
.arrow-icon {
  width: 2.2rem;
  height: auto;
  transition: filter 0.3s;
  position: absolute;          /* 独立させて配置 */
  right: 1.625rem;             /* 右から位置指定 */
  top: 50%;                    /* 上から50%の位置 */
  transform: translateY(-50%); /* 自身の高さ半分だけ上にずらして垂直中央にする */
}

/* ホバー時の動き */
.button a:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
  opacity: 1;
}

.ranking__button a:hover {
  background-color: var(--color-main);
  color: var(--color-bg);
  opacity: 1;
}

.button a:hover .arrow-icon {
  filter: brightness(0) invert(1);
}

/* Concept Button Override */
.p-concept__button a {
  width: 20.125rem;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  background-color: #fff;
}

.p-concept__button .arrow-icon {
  right: 0.9rem;
}

.p-concept__button a:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
}

/* ========================================
   Header
   ======================================== */
.l-header {
  position: relative; /* メガメニューの基準点 */
  background-color: var(--color-bg);
  padding: 1.25rem 0;
  z-index: 1000; /* コンテンツより前面に出す */
}

.l-header__inner {
  padding: 0 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-header__logo img {
  vertical-align: bottom;
}

/* ナビゲーション */
.p-global-nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.625rem;
  list-style: none;
}

.p-global-nav__item a {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
}

.p-global-nav__item.is-has-arrow > a::after {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-left: 0.5rem;
  margin-bottom: 0.25rem;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  transform: rotate(45deg);
}

/* ユーティリティ */
.p-header-utility {
  display: flex;
  gap: 1rem;
}

.p-header-utility__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 3.31rem;
  height: 3.31rem;
  background-color: var(--color-bg);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  gap: 0.2rem;
}

.p-header-utility__label {
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

/* ========================================
   Mega Menu (Full Version)
   ======================================== */

/* --- メガメニュー本体（全幅・配置） --- */
.p-mega-menu {
  position: absolute;
  top: 100%;
  
  /* 画面幅いっぱいに広げる */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  
  background-color: #fff;
  border-top: 1px solid var(--color-muted);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 1.25rem 0;
  
  /* デフォルトは非表示 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 100; 
}

/* ホバー外れ防止用の透明な橋 */
.p-mega-menu::before {
  content: "";
  display: block;
  position: absolute;
  top: -2rem; 
  left: 0;
  width: 100%;
  height: 2rem;
  background-color: transparent;
}

/* 親メニューホバー時に表示 */
.p-global-nav__item.is-mega-parent:hover .p-mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- コンテンツレイアウト --- */
.p-mega-menu__inner {
  max-width: 51.5rem;
  margin: 0 auto;
}

/* コンテンツ全体を縦積み（タイトル上、リスト下）にする */
.p-mega-menu__content {
  display: block;
}

/* --- タイトルエリア --- */
.p-mega-menu__title-area {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  color: var(--color-main);
  /* リストとの余白 */
  margin-bottom: 1.5rem; /* タイトルとリストの間の距離 */
}

.p-mega-menu__jp {
  font-size: 1.3125rem; /* 21px */
  font-family: var(--font-serif);
  margin-bottom: 0.25rem;
}

.p-mega-menu__en {
  font-size: 0.8125rem; /* 13px */
  font-family: var(--font-serif);
  opacity: 0.8;
}

/* --- リストエリア共通 --- */
.p-mega-menu__list {
  display: flex;
  align-items: center;
  gap: 0; 
  list-style: none;
  width: 100%;
}

/* --- リストアイテム（線と余白） --- */
.p-mega-menu__item {
  position: relative; /* 線の基準点 */
  /* 上下余白 0.625rem、左右 1.0rem */
  padding: 0.625rem 1.0rem; 
  box-sizing: border-box;
}

/* 左端のアイテムは左余白なし */
.p-mega-menu__item:first-child {
  padding-left: 0;
}

/* ★区切り線（コンテンツの高さに合わせる） */
.p-mega-menu__item::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 1px;
  background-color: var(--color-muted);
  
  /* 上下のpadding分だけ空けることで、線がコンテンツの高さになる */
  top: 0.625rem;
  bottom: 0.625rem;
}

/* 通常リストの最後は線を消す */
.p-mega-menu__item:last-child::after {
  display: none;
}

/* --- リンク内部（画像＋テキスト） --- */
.p-mega-menu__item a {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* アイコンとテキストの間隔 */
  text-decoration: none;
  color: var(--color-text);
  transition: opacity 0.3s;
}

.p-mega-menu__item a:hover {
  opacity: 0.7;
}

.p-mega-menu__item img {
  width: 3.3rem;
  height: auto;
}

.p-mega-menu__item span {
  font-size: 0.90625rem;
}

/* メガメニュー内のデフォルト矢印削除 */
.p-mega-menu__item a::after {
  content: none;
  display: none;
}

/* --- 商品リスト（.is-product）の場合の上書き設定 --- */
.p-mega-menu__list.is-product .p-mega-menu__item {
  /* 商品リスト用のパディング（左右を0にする） */
  padding: 0.625rem 0;
  
  width: 25%; /* 4列表示 */
  /* 下線は横幅いっぱいに引くため border-bottom を使用 */
  border-bottom: 1px solid var(--color-muted);
}

/* 商品リスト内の画像を、肌悩みアイコンと同じサイズ感に揃える */
.p-mega-menu__list.is-product .p-mega-menu__item img {
  width: 3.3rem !important;
  height: auto !important;
  object-fit: contain;
  vertical-align: middle;
}

/* 商品リストの場合は折り返しを許可 */
.p-mega-menu__list.is-product {
  flex-wrap: wrap;
}

/* 商品リストの「各行の右端（4の倍数）」の縦線を消す */
.p-mega-menu__list.is-product .p-mega-menu__item:nth-child(4n)::after {
  display: none;
}

/* 商品リストの「最後の行（後ろから4つ）」の下線を消す */
.p-mega-menu__list.is-product .p-mega-menu__item:nth-last-child(-n+4) {
  border-bottom: none;
}

/* ========================================
   Main Visual (Slick)
   ======================================== */
.p-mainvisual {
  margin-bottom: 4.9rem;
  padding-bottom: 3.5rem; 
  overflow: hidden;
  position: relative;
}

.slider .slick-slide {
  width: 1120px;
  margin: 0 0.9375rem;
  opacity: 0.4;
  transform: scale(1);
  transition: all 0.5s;
}

.slider .slick-center {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* ドットナビゲーション */
.slick-dots {
  bottom: -1.375rem;
  position: absolute;
  left: 0;
  right: 0;
  display: flex !important;
  justify-content: center;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.slick-dots li {
  margin: 0;
  width: 0.562rem;
  height: 0.562rem;
  gap: 0.562rem;
}

.slick-dots li button {
  width: 0.562rem;
  height: 0.562rem;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-light);
  text-indent: -9999px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

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

/* ========================================
   Section: Skin Trouble
   ======================================== */
.p-skin-trouble {
  width: 100%;
}

.p-skin-trouble .section-ttl {
  margin-bottom: 3.75rem; 
}

/* リスト用のラッパーに Flexbox と gap を指定 */
.p-skin-trouble__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.875rem;
}

/* アイコン自体の設定 */
.skintrouble-item {
  width: 11.875rem; /* 190px */
  height: 11.875rem;
  border-radius: 50%;
  border: 1px solid var(--color-muted);
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.3s;
  padding: 1rem;
  box-sizing: border-box;
}

.skintrouble-item:hover {
  opacity: 0.7;
}

.skintrouble-item img {
  width: 5.625rem; /* 90px */
  height: auto;
  margin-bottom: 0.625rem;
}

.skintrouble-item p {
  font-size: 1.125rem; /* 18px */
  color: var(--color-text);
  line-height: 1.5;
  white-space: nowrap;
  margin: 0;
}

/* ========================================
   Section: Ranking
   ======================================== */
.p-ranking {
  width: 100%;
  max-width: 100% !important;
  background-color: #F6FCFF;
  padding: 3.125rem 0;
  margin: 0 auto 5.8rem;
}

.p-ranking__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.p-ranking__list {
  padding: 0 2.5rem;
}

.ranking-item {
  margin: 0 0.9375rem;
  position: relative;
}

.ranking-item img {
  width: 100%;
  object-fit: contain;
  margin-bottom: 0.6rem;
}

.ranking-item p {
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: left;
}

/* ----------------------------------------
   Slick Custom Arrows
---------------------------------------- */
/* 共通設定：テキストを消して配置 */
.p-ranking__list .slick-prev,
.p-ranking__list .slick-next,
.p-culmun .slick-prev,
.p-culmun .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  z-index: 10;
  cursor: pointer;
  background: transparent;
  border: none;
  font-size: 0;        /* "Previous"などの文字を消す */
  color: transparent;  /* 文字色透明 */
  outline: none;
}

/* 位置指定：左 */
.p-ranking__list .slick-prev,
.p-culmun .slick-prev {
  left: -1rem; /* 左端（パディングエリア内） */
}

/* 位置指定：右 */
.p-ranking__list .slick-next,
.p-culmun .slick-next {
  right: -1rem; /* 右端 */
}

/* 矢印の形（CSSで線を描画） */
.p-ranking__list .slick-prev::before,
.p-ranking__list .slick-next::before,
.p-culmun .slick-prev::before,
.p-culmun .slick-next::before {
  content: "";
  display: block;
  width: 1.5rem;       /* 矢印の大きさ */
  height: 1.5rem;
  border-top: 2px solid #ccc;  /* 線の色と太さ */
  border-right: 2px solid #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
}

/* 左矢印の向き */
.p-ranking__list .slick-prev::before,
.p-culmun .slick-prev::before {
  transform: translate(-25%, -50%) rotate(-135deg); /* 中心補正して回転 */
}

/* 右矢印の向き */
.p-ranking__list .slick-next::before,
.p-culmun .slick-next::before {
  transform: translate(-75%, -50%) rotate(45deg);   /* 中心補正して回転 */
}

/* ホバー時の色変化 */
.p-ranking__list .slick-prev:hover::before,
.p-ranking__list .slick-next:hover::before,
.p-culmun .slick-prev:hover::before,
.p-culmun .slick-next:hover::before {
  border-color: var(--color-main);
}

/* 先頭（左端）や最後（右端）に達した時、矢印を非表示にする */
.p-ranking__list .slick-arrow.slick-disabled,
.p-culmun .slick-arrow.slick-disabled {
    opacity: 0;           /* 透明にする */
    pointer-events: none; /* クリック判定も消す */
    transition: opacity 0.3s;
}

/* ========================================
   Section: Product List
   ======================================== */
.p-product-list__inner {
  padding: 0 2.5rem;
}

.p-product-list__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.875rem;
  list-style: none;
}

.p-product-list__item {
  width: calc((100% - (1.875rem * 3)) / 4);
}

.p-product-list__link {
  display: block;
}

.p-product-list__image {
  width: 100%;
  margin-bottom: 0.625rem;
  background-color: #f9f9f9;
}

.p-product-list__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.p-product-list__name {
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ========================================
   Section: Concept
   ======================================== */
.p-concept {
  padding: 0 2.5rem;
  margin-bottom: 5rem;
  font-family: var(--font-serif);
}

.p-concept__inner {
  position: relative;
  width: 100%;
  min-height: 30.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.p-concept__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.p-concept__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.8;
}

.p-concept__body {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3.75rem;
  max-width: 50rem;
}

.p-concept__label {
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.625rem;
}

.p-concept__title {
  font-size: 2.5rem;
  font-weight: normal;
  margin-bottom: 0.625rem;
  letter-spacing: 0.05em;
}

.p-concept__text {
  font-size: 1rem;
  line-height: 2;
  margin-bottom: 0.625rem;
}

.p-concept__button {
  display: flex;
  justify-content: center;
}

/* ========================================
   Section: Column
   ======================================== */
.p-culmun ul {
  display: flex;
  justify-content: center;
  gap: 1.875rem;
  list-style: none;
  padding: 0 2.5rem;
  position: relative; /* ★追加：矢印の配置基準にします */
}

/* スライダーリスト全体 */
.column-list {
  padding: 0 2.5rem; 
}

/* スライドアイテム */
.column-item {
  /* 1.875rem の間隔を作るため、左右に半分の値を設定 */
  margin: 0 0.9375rem; 
  /* 画像の幅崩れ防止 */
  width: auto; 
}

.column-item img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ========================================
   Section: Information
   ======================================== */
.p-information__inner {
  padding: 0 2.5rem;
}

.p-information__list {
  list-style: none;
  border-top: 1px solid var(--color-muted);
}

.p-information__item {
  border-bottom: 1px solid var(--color-muted);
}

.p-information__link {
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  gap: 1.5rem;
}

.p-information__link:hover {
  background-color: #f9f9f9;
  color: var(--color-main);
}

.p-information__label {
  display: inline-block;
  background-color: var(--color-main);
  color: var(--color-bg);
  font-size: 0.875rem;
  padding: 0.20rem 0;
  width: 5.625rem;
  text-align: center;
  flex-shrink: 0;
}

.p-information__date {
  font-size: 1rem;
  font-family: var(--font-serif);
  flex-shrink: 0;
}

.p-information__title {
  font-size: 1rem;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-information__link::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  transform: rotate(45deg);
  margin-left: auto;
  transition: border-color 0.3s;
}

.p-information__link:hover::after {
  border-color: var(--color-main);
}

/* ========================================
   Footer
   ======================================== */
.l-footer {
  background-color: #f2f9fb;
  padding: 3.125rem 0;
}

.l-footer__inner {
  padding: 0 2.5rem;
}

/* Footer Top */
.l-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2.2rem;
  gap: 1.875rem;
}

.l-footer__brand {
  flex-shrink: 0;
}

.p-footer-nav {
  display: flex;
  gap: 3.4rem;
}

.p-footer-nav__col {
  display: flex;
  flex-direction: column;
}

.p-footer-nav__title {
  font-size: 0.875rem;
  font-weight: bold;
  margin-bottom: 0.38rem;
}

.p-footer-nav__list {
  list-style: none;
}

.p-footer-nav__item {
    margin-bottom: 0.38rem;
    font-size: 0.875rem;
}

.p-footer-nav__item.is-head {
  font-weight: bold;
  margin-bottom: 2rem;
}

/* Footer Contact */
.l-footer__contact {
  flex-shrink: 0;
}

.p-footer-contact {
  background-color: var(--color-bg);
  padding: 0.8rem;
  text-align: center;
}

.p-footer-contact__txt {
  font-size: 1rem;
}

.p-footer-contact__tel {
  font-size: 2rem;
  font-family: var(--font-serif);
  line-height: 1.2;
}

.p-footer-contact__time {
  font-size: 0.75rem;
}

/* Footer Bottom */
.l-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.p-footer-social {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

.p-footer-legal {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 1.5rem;
}

.p-footer-legal__item a {
  font-size: 0.75rem;
}

.p-footer-copyright {
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.6;
}

/* =================================================================
   responsive
   ================================================================= */
@media (min-width: 769px) {
  .sp { display: none; }
  .openbtn { display: none; }
}

/* 1024px以下：タブレット対応 */
@media (max-width: 1024px) {
  .pc { display: none; }
}

/* =================================================================
   # responsive (SP Layout 768px以下)
   ================================================================= */
@media (max-width: 768px) {
  
  body {
    min-width: 320px;
  }
  
  /* 共通余白調整 */
  .p-section, .p-ranking, .p-product-list, .p-culmun, .p-information {
    margin-bottom: 4rem !important;
  }
  .l-header__inner, .l-footer__inner, .p-product-list__inner, 
  .p-information__inner, .p-ranking__list, .column-list, .p-concept {
    padding: 0 1.25rem; /* 左右余白 */
  }
  
  /* タイトルサイズ調整 */
  .section-ttl h3 { font-size: 1.75rem; }
  .section-ttl { margin-bottom: 2rem; }

  /* --- Header Layout (Hamburger | Logo | Utility) --- */
  .l-header__inner {
    position: relative;
    padding: 0 1rem;
    height: 60px;
    justify-content: center; /* ロゴを中央へ */
  }

  /* ロゴ：絶対配置で中央 */
  .l-header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
  }
  .l-header__logo img { width: 100%; }

  /* ユーティリティ：右寄せ */
  .p-header-utility {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    gap: 0.8rem;
  }
  .p-header-utility__link {
    width: auto; height: auto;
    background: none; box-shadow: none;
  }
  .p-header-utility__label { display: none; } /* アイコンのみ */
  .p-header-utility__icon img { height: 24px; width: auto; }

  /* ハンバーガーボタン：左寄せ */
  .openbtn {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    cursor: pointer;
    width: 30px;
    height: 20px;
    display: block !important;
  }
  .openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    height: 2px;
    background-color: #333;
    width: 100%;
  }
  .openbtn span:nth-of-type(1) { top: 0; }
  .openbtn span:nth-of-type(2) { top: 9px; }
  .openbtn span:nth-of-type(3) { top: 18px; }
  
  /* ハンバーガーActive時 */
  .openbtn.active span:nth-of-type(1) { top: 9px; transform: rotate(-45deg); }
  .openbtn.active span:nth-of-type(2) { opacity: 0; }
  .openbtn.active span:nth-of-type(3) { top: 9px; transform: rotate(45deg); }

  /* --- Navigation (Drawer) --- */
  .p-global-nav {
    position: fixed;
    z-index: 9990;
    top: 0; left: -120%;
    width: 100%; height: 100vh;
    background: #fff;
    transition: all 0.4s;
    overflow-y: auto;
    padding-top: 80px;
  }
  .p-global-nav.panelactive { left: 0; }
  
  .p-global-nav__list {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding: 0 1.5rem 3rem;
  }
  .p-global-nav__item {
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  .p-global-nav__item a {
    display: block;
    padding: 1.25rem 0;
    font-size: 1.125rem;
    width: 100%;
    position: relative;
  }
  /* メガメニュー親の矢印調整 */
  .p-global-nav__item.is-has-arrow > a::after {
    margin-left: auto;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -5px;
  }
  
  /* SP専用項目の表示制御 */
  .sp-only-nav { display: block; }
  .pc { display: none !important; } /* PC用要素消去 */

  /* メガメニュー非表示 */
  .p-mega-menu { display: none !important; }

  
  /* --- FV --- */
  .p-mainvisual { padding-bottom: 2rem; margin-bottom: 3rem; }
  .slider .slick-slide { width: 100vw; transform: scale(1); opacity: 1; }
  .slick-dots { bottom: -1rem; }

  /* --- Skin Trouble (2x2 Grid) --- */
  .p-skin-trouble__list {
    gap: 1rem;
    justify-content: space-between;
    padding: 0 1.25rem;
  }
  .skintrouble-item {
    width: 48%; /* 2列 */
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0.5rem;
  }
  .skintrouble-item img { width: 50%; }
  .skintrouble-item p { font-size: 0.875rem; }

  /* --- Ranking (2.3 items visible) --- */
  .p-ranking__list {
    padding: 0 0 0 1.25rem; /* 右側を見切れさせるため左のみpadding */
    /* margin-right: -1.25rem; 親のpadding相殺 */
  }
  .ranking-item { margin: 0 0.5rem; }
  .ranking-item p { font-size: 1rem; }

  /* --- Product List (2x4 Grid) --- */
  .p-product-list__list { gap: 1rem; }
  .p-product-list__item {
    width: calc(50% - 0.5rem); /* 2列 */
    margin-bottom: 1rem;
  }
  .p-product-list__name { font-size: 0.95rem; }

  /* --- Concept --- */
  .p-concept__inner { min-height: auto; padding-bottom: 3rem; }
  .p-concept__bg {
    position: static;
    height: auto;
    width: 100%;
  }
  .p-concept__body {
    padding: 2rem 1.25rem;
    position: static;
    margin-top: -2rem; /* 画像に少し被せる */
    background: #fff;
    border-radius: 20px 20px 0 0;
  }
  .p-concept__title { font-size: 1.75rem; }
  .p-concept__text { text-align: left; font-size: 1rem; }

  /* --- Column (Center + Peek) --- */
  .column-list { padding: 0; }
  .column-item {
    margin: 0 0.5rem;
    opacity: 0.5;
    transition: opacity 0.3s;
  }
  .column-item.slick-center {
    opacity: 1;
    transform: scale(1);
  }
  
  /* --- Footer --- */
  .l-footer__top {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  .l-footer__nav {
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    text-align: center;
  }
  .p-footer-nav__list { margin-top: 1rem; }
  .l-footer__contact { width: 100%; }
  .p-footer-contact__tel { font-size: 1.75rem; }
}

/* PC専用項目を隠す（Baseに追加、または既存にあれば確認） */
@media (min-width: 769px) {
  .sp-only-nav { display: none; }
}