/************************************************************
 * ROOT / CONTAINER / SAFETY 
************************************************************/
:root{
  --container: 1080px;
  --gutter: 25px;
  --line: #ddd;
  --text: #222;
  --muted: #555;

  /* PICKUP（THIS） */
  --pickup-color:#ddd7d7;
  --pickup-text:#000;

  /* BLOG区切り線 */
  --wp-line-color:#ddd;
  --wp-line-weight:1px;
  --wp-line-gap-above: 8px;
  --wp-line-gap-below: 6px;
}

@media (max-width:767px){
  :root{ --gutter: 8px; }
}

/* はみ出し防止 */
html, body{ overflow-x:hidden; }

/* コンテナ */
.u-container{
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  box-sizing:border-box;
}

/* 画像の基本 */
img{ max-width:100%; height:auto; display:block; }


/************************************************************
 * MAIN SLIDER（bxSlider or slick どっちでも崩れない安全装飾）
 ************************************************************/
.p-main-slider{ margin: 0 0 110px; }/* スライドとタイトルの距離 */

/* bxSlider想定（残してOK） */
.p-main-slider .bx-wrapper .bx-viewport{ border:0; box-shadow:none; left:0; overflow:hidden; }
.p-main-slider .bx-wrapper img{ width:100%; }
.p-main-slider .bx-wrapper .bx-pager{ padding-top:0; bottom:-16px; }
.p-main-slider .bx-wrapper .bx-pager.bx-default-pager a{ margin:0 8px; background:#ddd; }

/* slick想定（もしslick化してもOK） */
.p-main-slider .slick-slide{ padding:0; }
.p-main-slider .slick-dots{ bottom:10px; }
.p-main-slider .slick-dots li button:before{ font-size:9px; opacity:.25; color:#000; }
.p-main-slider .slick-dots li.slick-active button:before{ opacity:.85; }


/* SLIDERとPANTS/SHIRTSの間：クリックバナー */
.p-between-banner{
  display:block;
  margin: 18px auto 26px;
  padding: 0 var(--gutter);
  box-sizing:border-box;
    position: relative;
  overflow:hidden;
  cursor:pointer;
  max-width: 300px; /* 好みで */
}

.p-between-banner img{
  width:100%;
  height:auto;
  display:block;
}
/* 触れたら少し暗く（クリックできる感） */
.p-between-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.18); /* 暗さ：0.12〜0.25で調整 */
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.p-between-banner:hover::after,
.p-between-banner:active::after{
  opacity:1;
}


/************************************************************
 * EDITOR’S FOCUS（見出し + 2分割バナー）
 ************************************************************/
.split-bnr-head{
  width: fit-content;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  margin-bottom: 8px !important;  /* タイトルとPANTS｜SHIRTSの距離 */
}

.split-bnr-title,
.split-bnr-sub{
  margin:0 !important;
  padding:0;
}

.split-bnr-title{
  font-size:35px;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-weight:550;
  letter-spacing:1;
  line-height:1.15;
}

.split-bnr-sub{
  font-size:14px;
  font-family:"Times New Roman", Georgia, serif;
  font-style:italic;
  font-weight:500;
  letter-spacing:.2em;
  line-height:1;
  color:#444;
  transform: translateY(-3px);
  text-align: right;
  width: 100%;
}

/* 2分割バナー（静的版） */
.split-bnr{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;

  margin-top:0 !important;
  padding-top:0 !important;

  margin-bottom: 1px; /* スライド画像とThisの間の調整 */
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  box-sizing:border-box;
}

.split-bnr__item{
  display:block;
  overflow:hidden;
  background:#f2f2f2;
  text-decoration:none;
  position:relative;
}


/* ★暗くする膜 + 文字（data-label） */

/* 画像を一番下に */
.split-bnr__item img{
  position: relative;
  z-index: 0;
}

/* 暗くする膜 */
.split-bnr__item::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
  z-index:1;
}

.split-bnr__item::after{
  content: attr(data-label);
  position:absolute;
  left:50%;
  top:50%;

  font-size:16px;       /* ← ここを変える */
  font-weight:600;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    serif;

  letter-spacing:.18em;
  color:#fff;
  opacity:0;

  transform:translate(-50%,-50%) scaleX(0.9);
  transition: opacity .25s ease;

  pointer-events:none;
  text-shadow:0 10px 30px rgba(0,0,0,.55);
  z-index:2;

  white-space: pre-line;
}

/* hover / tap */
.split-bnr__item:hover::before,
.split-bnr__item:active::before,
.split-bnr__item:focus-visible::before{
  opacity:1;
}

.split-bnr__item:hover::after,
.split-bnr__item:active::after,
.split-bnr__item:focus-visible::after{
  opacity:1;
  transform:translate(-50%,-50%) scaleX(0.9); 
}

/* SHIRTSだけ：1行にする（フォントは小さくしない） */
.split-bnr__item.is-shirts::after{
  white-space: nowrap;
  letter-spacing:.28em;
  transform:translate(-50%,-50%) scaleX(0.75);
}

.split-bnr__item.is-shirts:hover::after,
.split-bnr__item.is-shirts:active::after,
.split-bnr__item.is-shirts:focus-visible::after{
  transform:translate(-50%,-50%) scaleX(0.75);
}


.split-bnr__item img{
  width:100%;
  aspect-ratio: 5 / 7;
  object-fit:cover;
  transition:transform .25s ease;
  object-position:50% 0%;
}
.split-bnr__item:hover img{ transform:scale(1.02); }

/* slick起動時：grid解除 */
.split-bnr.js-split-bnr.slick-initialized{
  display:block !important;
  padding:0 !important;
}
@media (min-width:768px){
  .split-bnr.js-split-bnr.slick-initialized{
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box;
  }
}
/* variableWidth 基準 */
.split-bnr.js-split-bnr .split-bnr__item{ width:78vw; }

/* 右チラ見せ（初期：PANTS中心） */
.split-bnr.js-split-bnr.is-peek-right .slick-list{
  padding:0 24vw 0 6vw;
}

/* 左チラ見せ（SHIRTS中心） */
.split-bnr.js-split-bnr.is-peek-left .slick-list{
  padding:0 6vw 0 24vw;
}

/* 1枚の見え方 */
.split-bnr.js-split-bnr .split-bnr__item{
  width:72vw;
  margin:0 6px;
}

/* 画像はトリミング/余白許容（ここは好みで cover/contain 切替） */
.split-bnr.js-split-bnr .split-bnr__item img{
  width:100%;
  height:auto;
  object-fit:contain;
  background:#fff;
}

@media (max-width:767px){
  .split-bnr{ gap:6px; }
}


/************************************************************
 * SPLIT BNR – MOTION OPTIMIZE（ここだけ触ればOK）
 * 目的：カクッ減らす / 上品にゆらす / ズーム暴れ防止
 ************************************************************/

/* (1) まず切替の滑らかさ（“カクッ”軽減） */
.split-bnr.js-split-bnr .slick-slide{
  will-change: transform;
  transition: transform .55s cubic-bezier(.22,.61,.36,1) !important;
}

/* (2) 中央だけ少し大きく（差を弱めて上品に） */
.split-bnr.js-split-bnr .slick-slide{ transform:scale(.01) !important; }
.split-bnr.js-split-bnr .slick-current{ transform:scale(1.08) !important; }

/* (3) 画像“内”の動き：ズーム一定＋横だけゆらす（センス良く安定） */
.split-bnr.js-split-bnr{
  --panA:-2%;
  --panB: 2%;
  --panScale: 1.04;   /* ←ズーム量（上げるなら 1.06 まで推奨） */
  --panDur: 7.5s;     /* ←ゆらぎ速度（速いなら 6s、遅いなら 9s） */
}

/* 方向（既存の is-peek-right/left を活用） */
.split-bnr.js-split-bnr.is-peek-right{ --panA:-2%; --panB: 2%; }
.split-bnr.js-split-bnr.is-peek-left { --panA: 2%; --panB:-2%; }

/* transform二重指定を避ける：img側はアニメに一本化 */
.split-bnr.js-split-bnr .slick-current img{
  transform:none !important;
  will-change: transform;
  animation: splitPan2 var(--panDur) ease-in-out infinite alternate;
}

@keyframes splitPan2{
  from { transform: translate3d(var(--panA),0,0) scale(var(--panScale)); }
  to   { transform: translate3d(var(--panB),0,0) scale(var(--panScale)); }
}

/* 動き苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .split-bnr.js-split-bnr .slick-current img{
    animation:none !important;
    transform:none !important;
  }
}


/************************************************************
 * PICKUP（THIS / 新着）— 1カラム大画像 + slick
 ************************************************************/
.p-pickup{
  padding: 45px 0 30px;
  background: var(--pickup-color);
}

/* ここだけ色変更できる */
#pickup-new{
  --pickup-color:#ddd7d7;  /* This枠の色 */
  --pickup-text:#000;      /* This枠の文字色 */
  padding-top:10px !important;
  padding-bottom:60px !important;
  margin-top:0 !important;
}

/* 帯背景（確実に反映） */
.p-pickup#pickup-new{ background: var(--pickup-color) !important; }

.p-pickup#pickup-new .c-ttl-main,
.p-pickup#pickup-new .c-ttl-main *{
  color: var(--pickup-text) !important;
}

/* 見出し */
.p-pickup#pickup-new .c-ttl-main{
  text-align:center !important;
  padding: 20px 30px !important;
  margin: 0 !important;
}

/* リスト */
.p-pickup-list{ list-style:none; margin:0; padding:0; }
.p-pickup-list__item{ margin:0 0 16px !important; }
.p-pickup-list__txt{ padding: 12px var(--gutter) 24px !important; }/* MORE下 */
.p-pickup-list__ttl{ margin:0 0 10px; font-size:17px; line-height:1.35; }
.p-pickup-list__body{ margin:0; color:var(--muted); }

/* 画像：全幅固定（高さ暴れ防止） */
#pickup-new .p-pickup-list__img{
  width:100vw !important;
  max-width:none !important;
  aspect-ratio: 8 / 7 !important;
  height:auto !important;
  max-height:none !important;
  position:relative !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  overflow:hidden !important;
  margin:0 !important;
}
#pickup-new .p-pickup-list__img img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* 演出フタは無効（確実に見える） */
.p-pickup .u-opa{ opacity:1 !important; visibility:visible !important; }
.p-pickup .p-pickup-list__img .p-pickup-list__img-bg,
.p-pickup .p-pickup-list__img::before,
.p-pickup .p-pickup-list__img::after{ display:none !important; }

/* slick UI */
.p-pickup#pickup-new .slick-prev,
.p-pickup#pickup-new .slick-next{
  width:32px; height:32px;
  background:rgba(0,0,0,.4);
  border-radius:50%;
  z-index:5;
  top:50%;
  transform:translateY(-50%);
}
.p-pickup#pickup-new .slick-prev{ left:8px; }
.p-pickup#pickup-new .slick-next{ right:8px; }
.p-pickup#pickup-new .slick-prev:before,
.p-pickup#pickup-new .slick-next:before{
  color:#fff; font-size:22px; opacity:1;
}

.p-pickup#pickup-new .slick-dotted.slick-slider{ margin-bottom:0 !important; }
.p-pickup#pickup-new .slick-dots{ bottom:70px !important; }
.p-pickup#pickup-new .slick-dots li button:before{ font-size:10px; opacity:.35; color:#000; }
.p-pickup#pickup-new .slick-dots li.slick-active button:before{ opacity:1; color:#000; }


/************************************************************
 * RECOMMEND / NEW（ランキング）— 見出しは白地黒文字固定
 ************************************************************/
.c-ttl-bg.is-recommend,
.c-ttl-bg.is-ranking{
  background:#fff !important;
  color:#000 !important;
}
.c-ttl-bg.is-recommend::before,
.c-ttl-bg.is-ranking::before{
  content:none !important;
}

.p-recommend{ padding-bottom:0 !important; margin-top:-40px !important; }
.p-ranking{ padding-top:0 !important; }


/************************************************************
 * STYLE GUIDE（FREEPAGE slider）
 ************************************************************/
/************************************************************
 * STAFF STYLING（FREEPAGE slider）
 ************************************************************/
.p-staffstyling{ margin-top: 24px; }

.staffstyling-slider{ margin:16px 0 24px; }
.styling-slide{ display:block;  margin: 0 6px;}

.styling-slide img{
  width:100%;
  aspect-ratio: 3 / 4;   /* スタッフスナップっぽい縦 */
  object-fit: cover;
  display:block;
}
/* STYLE GUIDE 見出しを完全に消す */

.p-styleguide-more > .c-ttl-bg{
  display:none !important;
}
/************************************************************
 * STYLE GUIDE MORE（FREEPAGE slider）
 ************************************************************/
.p-styleguide-more{
  margin-top: 30px;
}

.styleguide-more-slider{
  margin: 16px 0 30px;
}

.styleguide-more-item{
  display:block;
  margin: 0 6px;
}

.styleguide-more-item img{
  width:100%;
  aspect-ratio: 1 / 1;   /* ★ 1:1 */
  object-fit: cover;
}

/* slick設定（2列） */
.styleguide-more-slider .slick-slide{
  width: calc(50% - 12px);
}
/* 矢印（STYLE GUIDEと統一） */
.staffstyling-slider .slick-prev,
.staffstyling-slider .slick-next{
  width:34px; height:34px;
  background:rgba(0,0,0,.35);
  border-radius:50%;
  z-index:5;
}
.staffstyling-slider .slick-prev:before,
.staffstyling-slider .slick-next:before{
  color:#fff; font-size:20px; opacity:1;
}


/************************************************************
 * FEATURE / INFO（auto-thumb grid）
 ************************************************************/
.contents-section,
.brand-section{
  margin:20px 0;
  padding:10px;
  background:#fff;
}

/* INFO grid */
#info-top{ position:relative; margin-top:80px !important; }
.info-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  list-style:none;
  margin:0;
  padding:0 var(--gutter);
}
.info-card img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
}
@media (max-width:1024px){
  .info-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .info-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}


/************************************************************
 * COLUMN（wp-column slick）
 ************************************************************/
.brand-section.u-no-bg{
  background:transparent !important;
  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}

.brand-section.u-no-bg:not(.wp-blog){
  border-top: 1px solid var(--line);
}

/* COLUMN直下の単発画像もガター揃え */
.brand-section.u-no-bg > img{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  box-sizing:border-box;
}

#wp-column{ position:relative; }
#wp-column .js-column-slider{ margin-top:10px; }
#wp-column .wp-card{ display:block; text-decoration:none; color:inherit; }
#wp-column .wp-thumb{ width:100%; aspect-ratio:10/11; overflow:hidden; background:#f3f3f3; }
#wp-column .wp-thumb img{ width:100%; height:100%; object-fit:cover; }

/* COLUMN：文字（タイトル・抜粋・VIEW MORE） */
#wp-column .wp-body{
  padding: 10px 0 0; /* 余白は好み */
}

#wp-column .wp-title{
  margin: 0 0 8px;
  font-size: 16px;      /* ← タイトル文字サイズ */
  line-height: 1.35;
  font-weight: 700;
}

#wp-column .wp-excerpt{
  margin: 0 0 12px;
  font-size: 13px;      /* ← 抜粋文字サイズ（本文っぽい所） */
  line-height: 1.7;
  color: var(--muted);
}

#wp-column .wp-more{
  display: inline-block;
  font-size: 12px;      /* ← VIEW MORE */
  letter-spacing: .06em;
}


/* 簡易方向インジケータ */
#wp-column::after{
  content:"";
  position:absolute;
  right:12px;
  bottom:-14px;
  width:56px;
  height:2px;
  background:#000;
  opacity:.55;
}
#wp-column::before{
  content:"";
  position:absolute;
  right:12px;
  bottom:-14px;
  width:12px;
  height:2px;
  background:#000;
  transform:rotate(35deg);
  transform-origin:right center;
  opacity:.55;
}


/************************************************************
 * BLOG（wp-blog：左固定画像 / 右記事画像 / 下にメタ）
 ************************************************************/
.brand-section.u-no-bg.wp-blog{
  border-bottom: 1px solid var(--line);
  padding-right: 0 !important;
}

.wp-blog-card{
  display:grid;
  grid-template-columns:160px 1.40fr;
  column-gap:20px;
  align-items:start;
  text-decoration:none;
  color:inherit;
}

.wp-blog-side{
  grid-column:1;
  width:100%;
  aspect-ratio: 9 / 30;
  overflow:hidden;
  margin-top:14px;
}
.wp-blog-side img{ width:100%; height:100%; object-fit:cover; }

.wp-blog-thumb{
  grid-column:2;
  width:100%;
  aspect-ratio: 3 / 2;
  overflow:hidden;
  max-height:480px;
  margin-bottom:0;
}
.wp-blog-thumb img{ width:100%; height:100%; object-fit:cover; }

.wp-blog-meta{ grid-column:1 / -1; grid-row:2; margin-top:12px; text-align:left; }
.wp-blog-title{ grid-column:1 / -1; grid-row:3; margin-top:6px; text-align:left; }
.wp-blog-rule{ grid-column:1 / -1; grid-row:4; }

@media (max-width:767px){
  .wp-blog-card{ grid-template-columns:65px 1fr; column-gap:10px; }
  .wp-blog-side{ margin-top:6px; }
}


/************************************************************
 * NEWS（class名ミス対策：どっちでも効くように）
 ************************************************************/
.p-line-information,
.p-line-informaiton{
  margin:45px 0;
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  box-sizing:border-box;
}

.p-line-information-list__item{ display:flex; gap:12px; margin-bottom:15px; }
@media (max-width:767px){
  .p-line-information-list__item{ display:block; }
}
.p-line-information-list__date{ width:120px; }
.p-line-information-list__ttl{ flex:1; }


/************************************************************
 * SIMPLE LINK MENU（巻末目次）
 ************************************************************/
.simple-link-section{
  padding:60px 0 20px;
  background:#fff;
  text-align:left;
}

.simple-link-list{
  list-style:none;
  padding:0 var(--gutter);
  margin:0;
}

.simple-link-list li{ margin-bottom:8px; line-height:1.2; }
.simple-link-list li a{ text-decoration:none; color:#000; }

.simple-link-list li.big-link a{
  font-size:38px;
  font-weight:900;
  letter-spacing:0;
}

.simple-link-list li.small-link a{
  font-size:15px !important;
  font-weight:600;
  letter-spacing:.08em;
}

@media (max-width:767px){
  .simple-link-list li.big-link a{ font-size:32px; }
  .simple-link-list li.small-link a{ font-size:18px !important; }
}


/************************************************************
 * ACCORDION（PRODUCTS / BRAND LIST / STORE）
 ************************************************************/
.brand-section.brand-accordion{
  margin:0 !important;
  padding:0 !important;
}

.simple-link-section + .brand-section.brand-accordion{
  margin-top: 100px !important;
}

.brand-accordion-body{
  display:none;
  padding-top:0 !important;
  margin-top:0 !important;
}
.brand-accordion.is-open .brand-accordion-body{ display:block; }

.js-brand-toggle{
  cursor:pointer;
  position:relative;
  padding-right:20px;
  margin-bottom:0 !important;
}

.brand-accordion-icon::after{
  content:"＋";
  position:absolute;
  right:10px;
  top:5px;
}
.brand-accordion.is-open .brand-accordion-icon::after{ content:"−"; }


/************************************************************
 * BRAND LIST（縦リスト）
 ************************************************************/
.brand-vertical-list{ list-style:none; margin:0; padding:0; }

.brand-row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}

.brand-row__img img{ width:100%; object-fit:contain; }
.brand-row__name{ margin:0 0 6px; font-size:16px; font-weight:600; }

.brand-row__desc{
  margin:0 0 8px;
  font-size:13px;
  color:#555;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.brand-row__more{
  font-size:12px;
  text-decoration:none;
  color:#000;
  letter-spacing:.08em;
}
.brand-row__more:hover{ opacity:.6; }

@media (max-width:767px){
  .brand-row{ grid-template-columns:60px 1fr; gap:12px; }
}


/************************************************************
 * FINE TUNING（最終微調整ゾーン）
 * ※ ここだけ触れば全体バランスを変えられる
 ************************************************************/

/* THIS：枠の上下 */
#pickup-new{
  /* padding-top:10px !important; */
  /* padding-bottom:60px !important; */
}

/* THIS：MORE下（テキストブロック下余白） */
.p-pickup-list__txt{
  /* padding-bottom:24px !important; */
}

/* SPLIT BNR：Thisとの距離 */
.split-bnr{
  /* margin-bottom: 1px; */
}

/* SPLIT BNR：ゆらぎ調整（上のOPTIMIZE内の変数だけ触る） */
/*
.split-bnr.js-split-bnr{
  --panScale: 1.04;
  --panDur: 7.5s;
  --panA:-2%;
  --panB: 2%;
}
*/

/* RECOMMENDED：上詰め */
.p-recommend{
  /* margin-top:-40px !important; */
}



/* ==============================
   PCだけレイアウト最適化（SPは一切変えない）
============================== */
@media (min-width:768px){

  /* PCの“本文幅”と“狭め幅(雑誌っぽい)”を分ける */
  :root{
    --pcWidth: 980px;     /* ここがPCの基本幅（900〜1100で調整） */
    --pcNarrow: 720px;    /* スライド/パンツシャツ用（680〜860で調整） */
  }

  /* 1) 全体の本文幅：カラーミー標準の .u-container をPCだけ上書き */
  .u-container{
    max-width: var(--pcWidth);
  }

  /* 2) メインスライド：PCだけ “少し細め” にして雑誌感 */
  .p-main-slider{
    max-width: var(--pcNarrow);
    margin-left:auto;
    margin-right:auto;
  }

  /* 3) EDITOR’S FOCUS（見出し + ブロック）もスライドと同じ幅へ */
  .split-bnr-head,
  .split-bnr{
    max-width: var(--pcNarrow);
    margin-left:auto;
    margin-right:auto;
  }

  /* 4) split-bnr が slick 起動時に padding:0 でガター消える対策 */
  .split-bnr.js-split-bnr.slick-initialized{
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box;
  }

  /* 5) PCはvw指定がデカく見える原因なので、PCだけ固定幅に上書き */
  .split-bnr.js-split-bnr .split-bnr__item{
    width: 520px !important;   /* 480〜560で調整 */
  }

  /* 6) チラ見せもPCはpx基準に */
  .split-bnr.js-split-bnr.is-peek-right .slick-list{
    padding:0 180px 0 40px !important;
  }
  .split-bnr.js-split-bnr.is-peek-left .slick-list{
    padding:0 40px 0 180px !important;
  }

  /* 7) THIS画像：PCはフル幅(100vw)をやめて、本文幅に収める */
  #pickup-new .p-pickup-list__img{
    width: 100% !important;
    left: auto !important;
    transform: none !important;
  }
}

/* スタイルガイド間の余白を詰める */
.p-staffstyling {
  margin-bottom: 0 !important;
}

/************************************************************
 * SOCIAL BAND（白黒・左寄せ）
 ************************************************************/
.hd-social-band{
  margin: 0 0 40px;
  padding: 28px 0 22px;
  background: #fff;
}

.hd-social-band__inner{
  max-width: 720px;
  margin: 0;
  padding: 0 16px 18px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid #111;
  box-sizing: border-box;
}

.hd-social-band__inner a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #111;
  text-decoration: none;
  font-size: 36px;
  line-height: 1;
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease;
}

.hd-social-band__inner a:hover,
.hd-social-band__inner a:active{
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 767px){
  .hd-social-band{
    padding: 24px 0 18px;
    margin: 100px 0 28px;
  }

  .hd-social-band__inner{
    gap: 14px;
    padding: 0 0 16px;
  }

  .hd-social-band__inner a{
    width: 26px;
    height: 26px;
    font-size: 24px;
  }
}


/************************************************************
 * DEN MEDIA SLIDER
 ************************************************************/
/************************************************************
 * DEN MEDIA SLIDER
 ************************************************************/
.hd-media-section{
  margin: 36px 0 76px;
  padding: 0;
  background:#fff;
  overflow:hidden;
}

.hd-media-slider-wrap{
  position:relative;
  padding: 0 0 38px;
}

.hd-media-slider{
  margin:0;
}

/* slick起動前の崩れ防止 */
.hd-media-slider:not(.slick-initialized){
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  overflow:hidden;
  padding:0 var(--gutter);
}

.hd-media-card{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  width:74vw;
  max-width:540px;
  aspect-ratio:16 / 9;

  margin:0 8px;
  padding:28px 24px;
  box-sizing:border-box;

  background:#fff;
  color:#111;
  text-decoration:none;
  text-align:center;

  box-shadow:0 14px 35px rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.04);
}

/* slick中央寄せ */
.hd-media-slider .slick-list{
  overflow:visible !important;
}

.hd-media-slider .slick-track{
  display:flex !important;
  align-items:center;
}

.hd-media-slider .slick-slide{
  float:none !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  height:auto !important;

  opacity:.38;
  transform:scale(.94);
  transition:opacity .35s ease, transform .35s ease;
}

.hd-media-slider .slick-current{
  opacity:1;
  transform:scale(1);
}

.hd-media-card__kicker{
  display:block;
  margin-bottom:12px;
  font-size:11px;
  letter-spacing:.24em;
  color:#777;
}

.hd-media-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  font-size:42px;
  line-height:1;
}

.hd-media-card__title{
  display:block;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-size:34px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.05;
}

.hd-media-card__text{
  display:block;
  margin-top:14px;
  font-size:12px;
  line-height:1.8;
  letter-spacing:.04em;
  color:#555;
}

/* 横棒ドット */
.hd-media-slider .slick-dots{
  position:static !important;
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:22px 0 0 !important;
  padding:0 !important;
}

.hd-media-slider .slick-dots li{
  width:46px !important;
  height:3px !important;
  margin:0 !important;
}

.hd-media-slider .slick-dots li button{
  width:46px !important;
  height:3px !important;
  padding:0 !important;
}

.hd-media-slider .slick-dots li button:before{
  content:"" !important;
  display:block;
  width:46px;
  height:3px;
  background:#bbb7cc;
  opacity:1;
}

.hd-media-slider .slick-dots li.slick-active button:before{
  background:#111;
}

/* 矢印は出さない */
.hd-media-slider .slick-prev,
.hd-media-slider .slick-next{
  display:none !important;
}

/* 一時停止ボタン */
.hd-media-pause{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(92px);

  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #8c87aa;
  background:#fff;
  color:#5f5a86;

  font-size:14px;
  line-height:1;
  cursor:pointer;
}

/* PC */
@media (min-width:768px){
  .hd-media-section{
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
  }

  .hd-media-card{
    width:420px !important;
  }
}

/* SP */
@media (max-width:767px){
  .hd-media-section{
    margin:34px 0 72px;
  }

  .hd-media-card{
    width:74vw !important;
    aspect-ratio:16 / 10;
  }

  .hd-media-card__icon{
    font-size:38px;
  }

  .hd-media-card__title{
    font-size:31px;
  }

  .hd-media-card__text{
    font-size:11px;
  }

  .hd-media-pause{
    transform:translateX(88px);
  }
}


/************************************************************
 * DEN MEDIA IMAGE CARD
 * YouTube / Podcast thumbnail
 ************************************************************/
.hd-media-card--image{
  position:relative;
  overflow:hidden;
  padding:0 !important;
  background:#111;
  color:#fff;
}

.hd-media-card__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  background:#111;
}

.hd-media-card__image img,
.hd-media-card__image iframe{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:0;
}

/* YouTube iframeは表示だけ。クリックは全面リンクへ */
.hd-media-card__youtube-iframe{
  pointer-events:none;
}

/* srcが入る前のalt文字表示を防ぐ */
.hd-media-card__image img:not([src]),
.hd-media-card__image img[src=""]{
  opacity:0;
}

.hd-media-card__image img.is-loaded{
  opacity:1;
}

.hd-media-card__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.10),
      rgba(0,0,0,.42)
    );
}

.hd-media-card__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  padding:28px 24px;
  box-sizing:border-box;
  text-align:center;
  color:#fff;
  text-shadow:0 8px 24px rgba(0,0,0,.5);
  pointer-events:none;
}

.hd-media-card__hit{
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  background:transparent;
  text-indent:-9999px;
  overflow:hidden;
}

.hd-media-card--image .hd-media-card__kicker,
.hd-media-card--image .hd-media-card__text{
  color:#fff;
}

.hd-media-card--image .hd-media-card__title{
  color:#fff;
}

.hd-media-card__title--with-icon{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.hd-media-card__title--with-icon i{
  font-size:.82em;
  line-height:1;
}


@media (max-width:767px){
  .p-styleguide-more{
    margin-bottom: 110px !important;
  }
}

/* Spotify iframe */
.hd-media-card__spotify-iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Podcast Spotify player 微調整 */
.hd-media-card--podcast{
  background:#111 !important;
  padding:18px !important;
  box-sizing:border-box;
}

.hd-media-card--podcast .hd-media-card__image{
  position:relative !important;
  inset:auto !important;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hd-media-card__spotify-iframe{
  width:100% !important;
  height:152px !important;
  border-radius:12px;
}


@media (max-width:767px){

  .brand-section.u-no-bg.hd-column-section{
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:hidden;
  }

  .hd-column-section .brand-heading,
  .hd-column-section > img,
  .hd-column-section #wp-column .wp-body{
    padding-left:var(--gutter) !important;
    padding-right:var(--gutter) !important;
    box-sizing:border-box;
  }

  .hd-column-section #wp-column{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .hd-column-section #wp-column .js-column-slider,
  .hd-column-section #wp-column .slick-list,
  .hd-column-section #wp-column .slick-track,
  .hd-column-section #wp-column .wp-slide,
  .hd-column-section #wp-column .wp-card{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hd-column-section #wp-column .wp-thumb{
    width:100% !important;
    margin:0 !important;
    transform:none !important;
  }

  .hd-column-section #wp-column .wp-thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

/************************************************************
 * COLUMN：スライド案内を分かりやすく
 ************************************************************/
#wp-column{
  position:relative !important;
  margin-bottom:46px !important;
}

#wp-column::after{
  content:"SWIPE  →" !important;
  position:absolute !important;
  right:var(--gutter) !important;
  bottom:-34px !important;
  width:auto !important;
  height:auto !important;
  background:none !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.16em !important;
  color:#555 !important;
  opacity:.85 !important;
  pointer-events:none !important;
}

#wp-column::before{
  content:"" !important;
  position:absolute !important;
  right:var(--gutter) !important;
  bottom:-14px !important;
  width:96px !important;
  height:2px !important;
  background:#777 !important;
  opacity:.65 !important;
  transform:none !important;
  pointer-events:none !important;
}