/* ============================================
   Common & Animations
============================================ */
@keyframes slide-left-loop {
  0% { translate: 0% 0; }
  100% { translate: -100% 0; }
}

@keyframes scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

@keyframes scroll-line {
  0% { top: -80px; opacity: 0; }
  40% { opacity: 1; }
  100% { top: 80px; opacity: 0; }
}

/* ============================================
   Main Visual (MV) - Base & Layout
============================================ */
.mv-bottom-wrap {
  background: #f5f5f5;
}

.mv-bottom {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1rem 0;
  margin-bottom: 0rem;
}

.swiper-mv {
  max-width: 1200px;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .swiper-mv {
    overflow-x: hidden;
  }
}

.swiper-mv .mv-img img {
  object-fit: cover;
}
@media (max-width: 767px) {
    .swiper-mv .mv-img img {
        /* 100dvh = アドレスバーやツールバーを除いた「現在の画面の高さ」
           60px   = ヘッダーの高さ（※実際のヘッダーの高さに合わせて数値を微調整してください）
        */
        height: calc(100dvh - 60px) !important;

        width: 100%;
        object-fit: cover; /* 画像を縦横比を保ったまま、エリアいっぱいに広げる（必須） */
        object-position: center; /* 画像の中心を表示 */
    }
}
/* ============================================
   MV - Content (Text & Links)
============================================ */
.mv-content {
  position: absolute;
  bottom: 6.6rem;
  left: 4.8rem;
  color: rgba(255, 255, 255, .99);
}
@media (max-width: 767px) {
  .mv-content {
    bottom: 5rem;
    left: 1.8rem;
  }

}

.mv-content p {
  margin-bottom: 2.4rem;
  font-size: 2.2rem;
}

@media (max-width: 767px) {
.mv-content p {
  margin-bottom: 1.4rem;
}
}

.mv-content--human p {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 500;
  text-shadow: #000 0 0 20px;

}

.mv-content .link--border {
  color: rgba(255, 255, 255, .99);
  border-bottom: 1px solid rgba(255, 255, 255, .99);
  font-family: "EB Garamond", serif;
  padding-left: 0;
}
.mv-content .link--border::after {
  content: url(../img/common/chevron_right-white.svg);
}

.mv-content span {
  /* パターンA：白の透明度を下げてグレーに見せる（おすすめ） */
  color: rgba(255, 255, 255, 0.6); 
  font-size: 1.2rem;
}


/* ============================================
   MV - Controller & Pagination
============================================ */
.mv-button-next,
.mv-button-prev {
  z-index: 10;
  color: rgba(255, 255, 255, .99);
}

.mv-controller {
  position: absolute;
  display: flex;
  bottom: 4.8rem;
  left: 4.8rem;
  line-height: 1;
  z-index: 10;
}
@media (max-width: 767px) {
  .mv-controller {
    left: 0;
    right: 1.6rem;
    bottom: 1.6rem;
    justify-content: flex-end;
  }
}

.mv-controller .mv-pagination.swiper-pagination {
  position: relative;
  color: rgba(255, 255, 255, .99);
  bottom: 0;
  width: auto;
}

.mv-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #95969c;
  opacity: 1;
  margin: 8px;
}

.mv-pagination .swiper-pagination-bullet-active {
  background: none;
  border: 1px solid rgba(255, 255, 255, .99);
}

.mv-controller__bar {
  height: auto;
  width: 1px;
  background: rgba(255, 255, 255, .99);
  margin-inline: 1.6rem;
}

/* SP版：ページネーションを縦並びにする上書き設定 */
@media (max-width: 767px) {
  .mv-controller .mv-pagination.swiper-pagination {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    right: 12px;
    bottom: 40%; /* 位置調整 */
    left: auto;
    top: auto;
    margin-bottom:  4rem;
  }
  .mv-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    margin: 0;
  }
  .mv-pagination .swiper-pagination-bullet-active {
    background: none;
    border: 1px solid rgba(255, 255, 255, .9);
  }
}

/* ============================================
   MV - Scroll Animation (Vertical Text)
============================================ */
@media (max-width: 767px) {

  /* Scroll 全体の位置を固定 */
  .mv-scroll {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center; /* ここで中央揃えしているが、縦書きだとズレやすい */
    gap: 8px;
    z-index: 50;
    pointer-events: none;
  }

  /* SCROLL テキスト */
  .mv-scroll-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 1.2rem;
    letter-spacing: .15em;
    color: rgba(255,255,255,.95);
    
    /* ▼▼ 追加：行間を1にすることで、ボックスの幅を文字幅に近づける ▼▼ */
    line-height: 1; 
    /* 必要であれば以下で微調整（例：1px右に動かすなど） */
    /* transform: translateX(1px); */
  }

  /* 線（高さをテキストに合わせて安定させる） */
  .mv-scroll-line {
    width: 1px;
    height: 70px; /* 40px等、お好みの長さに */
    background: rgba(255,255,255,.2);
    position: relative;
    overflow: hidden;

    /* ▼▼ 追加：もしどうしてもズレて見える場合はここで微調整する ▼▼ */
    /* 数値をいじって左右の位置を調整してください（例: 0.5px 左へ 等） */
    transform: translateX(5px); 
  }

  /* アニメーション部分（変更なし） */
  .mv-scroll-line::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 0; right: 0;
    margin: auto;
    width: 1px;
    height: 80px;
    background: rgba(255,255,255,1);
    animation: scrollLineIOS 2s ease-in-out infinite;
  }

  @keyframes scrollLineIOS {
    0%   { transform: translateY(-40px); opacity: 0; }
    40%  { opacity: 1; }
    100% { transform: translateY(40px); opacity: 0; }
  }
}
/* ============================================
   Top News
============================================ */
.top-news {
  display: flex;
  margin-bottom: 6rem;
  flex-wrap: wrap;
  align-items: stretch;
}
@media (max-width: 767px) {
  .top-news {
    display: block;
    margin: 3rem 0;
  }
}

.top-news--tit {
  display: flex;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  margin: 0;
  align-items: center;
  justify-content: center;
  width: 22rem;
  background: #eee;
  margin-right: 2rem;
}
@media (max-width: 767px) {
  .top-news--tit {
    font-size: 2.4rem;
    width: auto;
    display: inline-block;
    background: none;
    margin: 0 1rem 1.5rem 0;
  }
}

.news--list {
  width: calc(100% - 24rem);
}
@media (max-width: 767px) {
  .news--list {
    width: 100%;
  }
}

.news--list-item {
  display: none; /* 基本非表示 */
  border-top: 1px solid #ccc;
  padding: 1rem 0;
  width: 100%;
  font-size: 1.3rem;
}
@media (max-width: 767px) {
  .news--list-item {
    padding: 1rem 0;
    font-weight: 500;
  }
}

/* 表示制御 */
.news--list-item:first-child,
.news--list-item:nth-child(2) {
  display: block;
}
.news--list-item:nth-child(3) {
  display: block;
  border-bottom: 1px solid #ccc;
}
@media (max-width: 767px) {
  .news--list-item:nth-child(2) {
    border-bottom: 1px solid #ccc;
  }
}

.news--list-item--inner {
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .news--list-item--inner {
    display: block;
  }
}

.news--list-item--date {
  color: #95969c;
  margin-right: 2rem;
  display: inline-block;
  font-size: 1.2rem;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .news--list-item--date {
    display: block;
    font-weight: 500;
    margin-bottom: .2rem;
    font-size: 1.4rem;
  }
}

.news--list-item--link {
  /* PCデフォルト */
}
@media (max-width: 767px) {
  .news--list-item--link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1rem;
  }
}

.sp-only {
  display: none;
}

@media (max-width: 767px) {
  .pc-only {
    display: none;
  }

  .sp-only {
    display: inline-block;
  }
}
/* ============================================
   Top Description
============================================ */
.top-desc {
  margin-bottom: 4.5rem;
}
@media (max-width: 767px) {
  .top-desc {
    width: 100%;
  }
}

.top-desc--flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
}
@media (max-width: 767px) {
  .top-desc--flex {
    display: block;
  }
}

.top-desc--left {
  /* PC only styles */
}
@media (min-width: 768px) {
  .top-desc--left {
    padding-left: 4rem;
  }
}

.top-desc--tit {
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  font-weight: 500;
  margin: 0 0 2.5rem 0;
  width: 90%;
}

.top-desc--tit__en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 1.4rem;
  display: inline-block;
  margin-bottom: 1.2rem;
}
@media (max-width: 767px) {
  .top-desc--tit__en {
    font-size: 1.2rem;
  }
}

.top-desc--text {
  margin-bottom: 5.5rem;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.86;
  width: 100%;
  font-family: "Noto Serif JP", serif;
}
@media (max-width: 767px) {
  .top-desc--text {
    margin-bottom: 3rem;
  }
}

.top-desc--right {
  /* Base or Mobile styles */
}
@media (max-width: 767px) {
  .top-desc--right {
    width: 100vw;
    margin-left: -2rem;
    padding: 20px 0 20px 20px;
  }
  .top-desc--left .button-01 {
    display: block;
  }
}
@media (min-width: 768px) {
  .top-desc--right {
    width: 53rem;
    height: 45.5rem;
    margin-left: 3rem;
  }
}

/* PC/SP 表示切替 */
.pc-none {
	display: none;
}

.sp-none {
	display: block;
}

@media (max-width: 767px) {
	.pc-none {
		display: block;
	}

	.sp-none {
		display: none !important;
	}
}



@media (max-width: 767px) {


	/* 画像はフル幅 */
	.top-desc-sp__image img {
		width: 100%;
		height: auto;
		display: block;
    padding: 0 10px;
	}

	/* テキスト部分 */
	.top-desc-sp__content {
		padding: 28px 20px 0;
	}

	.top-desc-sp__en {
		margin: 0 0 12px;
		font-size: 12px;
		letter-spacing: .18em;
		color: #999;
	}

	.top-desc-sp__title {
		margin: 0 0 20px;
		font-size: 24px;
		line-height: 1.5;
		font-weight: 500;
		letter-spacing: .05em;
	}

	.top-desc-sp__text {
		margin: 0 0 24px;
		font-size: 15px;
		line-height: 2;
		color: #444;
	}

	.top-desc-sp__button {
		display: inline-block;
		font-size: 13px;
		letter-spacing: .12em;
		color: #111;
		text-decoration: none;
		border-bottom: 1px solid #111;
		padding-bottom: 4px;
	}
}

/* ▼ テキスト全体フェード（画像より遅らせる） */
.fade-text {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease, transform 1s ease;
	transition-delay: 0.3s;
}

.fade-text.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.top-desc-sp__title span {
	display: inline-block;
	opacity: 0;
	transform: none;
}

.top-desc-sp__title span.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.45s ease;
}

/* EN */
.fade-text-en {
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.6s ease;
}

/* タイトル */
.fade-text-title span {
	display: inline-block;
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* 本文 */
.fade-text-body {
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.8s ease;
}

.fade-text-en.is-visible,
.fade-text-body.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 767px) {
  .top-desc-sp {
    width: 100%;
    margin: 25px 0 50px;
    background: #f5f5f5;
    padding: 40px 0;
  }

  .top-desc-sp__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
  }
}
/* ============================================

   Feature Section

============================================ */

.feature-section {

  margin-bottom: 8rem;

}

.feature-section .container {

  overflow: hidden;

}



.feature--list {

  /* Default styles from swiper presumably */

}

@media (max-width: 767px) {

  .feature--list {

    max-width: inherit;

    width: calc(100% + 56px);

    flex-wrap: nowrap !important;

  }

  .feature--list-item {

    width: 70vw;

  }

}



.feature--img {

  margin-bottom: 1.5rem;

}

.feature--tit {

  font-size: 1.8rem;

  font-weight: 500;

  margin-top: 1rem;

}

.feature--text {

  font-size: 1.5rem;

  line-height: 1.84;

}

.feature--subtit {

  font-size: 1.4rem;

}



.swiper-feature {

  padding-right: 9rem;

}

@media (max-width: 767px) {

  .swiper-feature {

    padding-right: 3rem;

    overflow: hidden;

    margin-right: -2rem;

  }

  .feature--text {

  font-size: 1.4rem;

  font-weight: 500;

  line-height: 1.5;

}

}



.feature-button-next,

.feature-button-prev {

  position: absolute;

  right: 0rem;

  top: 0;

  width: 6rem;

  height: 6rem;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255, 255, 255, .99);

  background: rgba(255, 255, 255, .99);

}

.feature-button-prev {

  right: 6.2rem;

}

.feature-button-next img,

.feature-button-prev img {

  width: 1rem;

}/* ============================================
   Category & Media
============================================ */
.category-section {
  margin-bottom: 0rem;
  padding: 6rem 0;
}
.human-category-section {
  margin-bottom: 3.8rem;
  background: #f5f5f5;
  padding: 6rem 0;
}

.category-section .category--list {
  margin-inline: -5px;
}

.media-section {
  margin: 0rem 0 0rem;

}

.media--list.pc-only {
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.media--list.pc-only::-webkit-scrollbar {
  display: none;
}
@media (max-width: 767px) {
.category-section {
  margin-bottom: 0rem;
  padding: 0rem 0;
}
.human-category-section {
  margin-bottom: 5rem;
  background: #f5f5f5;
  padding: 0rem 0;
}
}

@media (max-width: 767px) {
  .media--list.sp-only {
    display: flex;
    overflow: hidden;
  }
}

.media--list .row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  min-width: 1128px;
}

.media--list-item.col-2 {
  width: 14.2857142857%;
  min-width: 15.2rem;
  padding-inline: .5rem;
}

.media--list .grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 1fr);
  animation: slide-left-loop 30s infinite linear .5s both;
}

/* ============================================
   Newsletter
============================================ */
.newsletter-section {
  max-width: 1128px;
  margin-inline: auto;
  padding: 7rem 0 5.2rem;
  background: #f5f5f5;
}
@media (max-width: 767px) {
  .newsletter-section {
    padding: 5rem 3rem;
  }
}

.newsletter-content {
  display: flex;
  gap: 2.4rem;
}
@media (max-width: 1024px) {
  .newsletter-content {
    flex-direction: column;
    min-width: 33rem;
    width: 75%;
    margin-inline: auto;
  }
}

.newsletter-item {
  background: #fff;
  border: 1px solid #ddd;
  min-height: 11.5rem;
}

.merumaga {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
@media (max-width: 1024px) {
  .merumaga {
    flex-direction: column;
    text-align: center;
    padding: 3.2rem 0 3rem;
  }
}

.merumaga-left {
  max-width: 21.8rem;
  width: 29.4%;
  min-width: 14rem;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
}

.merumaga-right {
  flex-grow: 1;
  background: #fafafa;
  padding: 2rem 0 0 3.6rem;
  height: 100%;
}
.merumaga-right p {
  margin-bottom: 1.2rem;
}
@media (max-width: 1024px) {
  .merumaga-right {
    background: #fff;
    padding: 0;
    margin-top: 1.2rem;
  }
}

.line {
  min-width: 16.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  gap: 1rem;
}
.line img {
  width: 5rem;
}
@media (max-width: 1024px) {
  .line {
    flex-direction: row;
    gap: 1.5rem;
  }
}

.newsletter-item-input {
  width: 30rem;
  height: 3.6rem;
  border: 1px solid #ccc;
}
@media (max-width: 1024px) {
  .newsletter-item-input {
    width: 23rem;
  }
}

input[type=text].newsletter-item-input {
  border-radius: 4px 0 0 4px;
}
input[type=submit].newsletter-item-submit {
  border-radius: 0 4px 4px 0;
}

.newsletter-item-submit {
  background: #333;
  color: #fff;
  font-size: 1.4rem;
  font-family: "Noto Sans JP", sans-serif;
  padding: 1rem 1.6rem;
}

.line-link {
  text-decoration: underline;
  color: #31abbe;
  font-family: "Noto Sans JP", sans-serif;
  display: block;
  margin-top: 1rem;
}

.newsletter-caution {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  position: relative;
  padding-left: 1.4rem;
}
.newsletter-caution::before {
  content: "※";
  position: absolute;
  left: 0;
}

/* ============================================
   Infinite Logo Slider (PC2段デカめ・SP3段版)
============================================ */
/* 1. 外枠設定 */
.slider_parent {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #fff;
    padding: 0;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* 2. スライダー基本 */
.slider_parent .slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    box-sizing: border-box;
}

/* 3. ロゴグループ */
.logos {
    display: flex !important;
    flex-direction: row !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0;
    padding: 0;
}

/* 4. ロゴリスト本体 */
.slider_parent ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* ▼▼▼ PC時の設定（2段・ロゴ大きく） ▼▼▼ */
/* PCだけで表示 */
@media (min-width: 768px) {
    /* ★修正：汎用クラス(.sp-none等)の上書きをやめて、専用クラスで制御する */
    .sp-slider-wrap { display: none !important; }
    .pc-slider-wrap { display: block !important; }

    .slider_parent ul li {
        flex-shrink: 0;
        margin: 0 0.5vw;
        width: auto;
        display: flex;
        align-items: center;
    }

    /* ★ロゴを大きくする設定★ */
    .slider_parent ul li img {
        height: 9vw; /* 5vwから9vwに巨大化 */
        max-height: 120px; /* あまりに大きすぎないよう制限 */
        width: auto;
        max-width: none;
        display: block;
    }
}

/* ▼▼▼ SP時の設定（3段） ▼▼▼ */
/* スマホだけで表示 */
@media (max-width: 767px) {
    /* ★修正：汎用クラスの上書きをやめて、専用クラスで制御する */
    .pc-slider-wrap { display: none !important; }
    .sp-slider-wrap { display: block !important; }

   

    .slider_parent ul li {
        width: 40vw !important; /* 1行に3.3個くらい見える幅 */
        height: 70px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-shrink: 0 !important;
    }

    .slider_parent ul li img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain;
    }

    /* アニメーション速度 */
    .text_scroll,
    .text_scroll_reverse {
        animation-duration: 30s !important;
    }
}

/* アニメーション定義 */
.text_scroll {
    animation: scroll 60s linear infinite;
}
.text_scroll_reverse {
    animation: scroll 60s linear infinite;
    animation-direction: reverse !important;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ============================================
   Media Logo Tone Control
============================================ */

/* メディア掲載ロゴをグレー化 */
.slider_parent ul li img {
    filter: grayscale(0%);
    opacity: 0.72;
}

.media-grid ul {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    align-items: center;
    padding: 0;
}


    .sp-slider-wrap .slider_parent ul li img {
        filter: grayscale(0%);
        opacity: 0.9;
    }


.media-grid ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.media-grid li:first-child {
    justify-content: flex-start;
}

.media-grid li:last-child {
    justify-content: flex-end;
}

.media-grid ul {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
    padding: 0;
    margin: 0;
}

.media-grid li {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 各行の左端 */
.media-grid li:nth-child(6n + 1) {
    justify-content: flex-start;
}

/* 各行の右端 */
.media-grid li:nth-child(6n) {
    justify-content: flex-end;
}

.media-grid img {
    max-height: 70px;
    width: auto;
    opacity: 0.9;
}
.ranking {
  margin: 4rem 0;

}

.ranking__title {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
}

/* スライダー全体 */
.ranking__slider {
  position: relative;
  overflow: visible; /* ← はみ出しを許可 */
}

/* 左右ボタン */
.ranking__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 20;

  background: none !important;
  border: none !important;
  padding: 0;
  width: auto;
  height: auto;
  cursor: pointer;

  font-size: 24px;         /* 矢印の太さ */
  color: #888;             /* URBAN の薄いグレー */
  transition: color .2s ease;
}

/* ホバー時は濃くする（URBANぽい） */
.ranking__arrow:hover {
  color: #000;
}

/* 左右の配置 */
.ranking__arrow--prev {
  left: -28px; /* コンテナ外に出す */
}

.ranking__arrow--next {
  right: -28px;
}

/* デフォルトの擬似矢印は削除 */
.ranking__arrow::before {
  content: none !important;
}
/* 横スライド部分 */
.ranking__list {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 1.6rem;
  padding: 1rem 0;
}

.ranking__list::-webkit-scrollbar {
  display: none;
}

/* アイテム */
.ranking__item {
  position: relative;
  width: 240px;
  flex: 0 0 auto;
}

.ranking__img img {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}

/* ランキング番号 (左上) */
/* --------------------------------------------------
   ランキングバッジ修正版 (サイズ拡大＆位置調整)
-------------------------------------------------- */

/* 三角バッジ本体 */
.ranking__badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10; /* 画像より確実に前に出す */
    width: 0;
    height: 0;
    
  /* ▼ 三角サイズを大きくする（70px → お好みで調整OK） */
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
}

/* バッジの中の数字 */
.ranking__badge span {
  position: absolute;
  top: -49px;   /* テキスト位置調整（数字の位置） */
  left: 8px;
  color: #fff;
  font-size: 1.8rem; /* 数字を大きく */
  font-weight: 0;
}
/* 色設定（ここは以前のままでOKですが、念のため記載） */
/* 1位（金） */
.ranking__badge--1 { border-top-color: #bca878; }
/* 2位（銀） */
.ranking__badge--2 { border-top-color: #a8a8a8; }
/* 3位（銅） */
.ranking__badge--3 { border-top-color: #947a60; }

/* 4位以降（白地に黒文字） */
.ranking__badge--4,
.ranking__badge--5,
.ranking__badge--6,
.ranking__badge--7,
.ranking__badge--8,
.ranking__badge--9,
.ranking__badge--10 {
    border-top-color: #f4f4f4;
    /* 白い三角の場合、影がないと見にくいのでドロップシャドウを追加しても良い */
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
}

.ranking__badge--4 span,
.ranking__badge--5 span,
.ranking__badge--6 span,
.ranking__badge--7 span,
.ranking__badge--8 span,
.ranking__badge--9 span,
.ranking__badge--10 span {
    color: #333;
}/* テキスト類 */
.ranking__brand {
  font-size: 1.1rem;
  margin-top: .5rem;
  color: #666;
}

.ranking__name {
  font-size: 1.3rem;
  line-height: 1.4;
  height: 3.6rem;
  overflow: hidden;
  margin: .3rem 0;
}

.ranking__price {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: .5rem;
}

.ranking__price span {
  font-size: 1.1rem;
  font-weight: 400;
}

@media (max-width: 767px) {
  .ranking__arrow {
    display: none !important;
  }
}

ul.company-link--list {
    display: flex !important;
}
/* ============================================
   Mobile Header Search / Other SP adjustments
============================================ */
@media (max-width: 1024px) {
  .header--search-wrap.search-bar--sp {
    display: block;
    position: absolute;
    top: calc(100% + 2rem);
    right: 50%;
    transform: translateX(50%);
  }
}

/* ============================================
   GOZZO Main Visual Text Customization
============================================ */

/* テキスト全体の配置位置 */
.gozzo-mv-content {
  position: absolute;
  /* 位置はお好みで調整してください */
  bottom: 15%; 
  left: 4%;
  z-index: 2;
  text-align: left; /* 左揃え */
}

/* スマホでの位置調整 */
@media (max-width: 767px) {
  .gozzo-mv-content {
    bottom: 10%;
    left: 2rem;
    right: 1rem;
  }
}

/* ----------------------------------
   メインキャッチコピー（上の大きな文字）
---------------------------------- */
.gozzo-text-main {
  margin-bottom: 0rem; /* サブコピーとの間隔 */
  line-height: 1.6;      /* 行間 */
}

.gozzo-text-main span {
  background-color: #fff;  /* 白ベタ */
  color: #333;             /* 文字色：濃いグレー（真っ黒より少し上品） */
  padding: 0.4rem 1rem;    /* 文字周りの余白：上下0.4rem 左右1rem */
  
  font-size: 2.6rem;       /* ★文字サイズ */
  font-weight: 500;
  
  display: inline-block;   /* 背景を行ごとに途切れさせるために必要 */
  margin-bottom: 1.3rem;   /* 行ごとの白い箱の隙間 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* うっすら影を入れて浮き上がらせる */
}

/* スマホ版メインコピー */
@media (max-width: 767px) {
  .gozzo-text-main span {
    font-size: 1.9rem; /* スマホでは少し小さく */
    padding: 0.3rem 0.8rem;
    margin-bottom: 1.2rem;
  }
}

/* ----------------------------------
   サブキャッチコピー（下の説明文）
---------------------------------- */
.gozzo-text-sub {
  line-height: 1.8;
}

.gozzo-text-sub span {
  background-color: rgba(255, 255, 255, 0.95); /* 少しだけ透け感のある白 */
  color: #333;
  padding: 0.3rem 0.8rem;
  
  font-size: 1.5rem;      /* ★文字サイズ */
  font-weight: 500;
  
  display: inline-block;
  margin-bottom: 1.2rem;
}

/* スマホ版サブコピー */
@media (max-width: 767px) {
  .gozzo-text-sub span {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
  }
}
@media (min-width: 768px) {
    ul.company-link--list.pc-none {
        display: none !important;
    }
}
/* ============================================
   Fade Up Animation (共通)
============================================ */
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.0s, transform 1.0s;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ============================================
   MV Text Animation (順番にフェードイン)
============================================ */

/* 1. アニメーションの動きを定義（下からふわっと） */
@keyframes gozzoFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* 少し下から */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* 定位置へ */
    }
}

/* 2. 初期状態：文字は消しておく */
.gozzo-text-main,
.gozzo-text-sub {
    opacity: 0;
}

/* 3. アクティブなスライドになったらアニメーション実行 */

/* ▼ メインテキスト（先に表示） */
.slick-active .gozzo-text-main,
.swiper-slide-active .gozzo-text-main {
    animation: gozzoFadeInUp 1.0s ease forwards;
    animation-delay: 0.5s; /* スライド切り替え完了まで0.5秒待つ */
}

/* ▼ サブテキスト（後から表示） */
.slick-active .gozzo-text-sub,
.swiper-slide-active .gozzo-text-sub {
    animation: gozzoFadeInUp 1.0s ease forwards;
    animation-delay: 1.2s; /* メインより遅らせて表示 */
}

/* ============================================
   Wide Screen Zoom
   フルHD超えだけ、既存デザインをそのまま1.25倍
============================================ */

@media (min-width: 1921px) {
  .front_page main {
    zoom: 1.18;
  }
}

/* 関連商品 数量ボタン調整 */
.item-detail-related-cart .related-cart-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-detail-related-cart .related-quantity-box {
    position: relative;
    width: 90px;
    height: 36px;
    margin: 0;
    flex-shrink: 0;
}

.item-detail-related-cart .related-quantity {
    width: 100%;
    height: 36px;
    padding: 0 28px;
    border: 1px solid #c5c7ce;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
}

.item-detail-related-cart .related-quantity-plus,
.item-detail-related-cart .related-quantity-minus {
    position: absolute;
    top: 0;
    width: 28px;
    height: 36px;
    border: none;
    background: transparent;
    color: #333;
    font-size: 16px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    z-index: 3;
    padding: 0;
}

.item-detail-related-cart .related-quantity-plus {
    right: 0;
}

.item-detail-related-cart .related-quantity-minus {
    left: 0;
}

.item-detail-related-cart .related-quantity::-webkit-outer-spin-button,
.item-detail-related-cart .related-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.item-detail-related-cart .related-quantity {
    -moz-appearance: textfield;
}

@media screen and (max-width: 767px) {
    .item-detail-related-cart .related-cart-form {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .item-detail-related-cart .related-cart-submit {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 ;
        height: 46px;
        margin: 0 ;
        padding: 0 12px ;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 767px) {
  .top-desc-sp--gozzo {
    margin: 64px 0 0;
    padding: 0;
    background: #fff;
  }

  .top-desc-sp--gozzo .top-desc-sp__inner {
    width: 100%;
  }

  .top-desc-sp--gozzo .top-desc-sp__image {
    width: 100%;
    margin: 0 0 34px;
  }

  .top-desc-sp--gozzo .top-desc-sp__image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .top-desc-sp--gozzo .top-desc-sp__content {
    padding: 0 25px 50px 5px;
  }

  .top-desc-sp--gozzo .top-desc-sp__en {
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: .16em;
    color: #b49a6a;
    font-family: Georgia, "Times New Roman", serif;
  }

  .top-desc-sp--gozzo .top-desc-sp__title {
    margin: 0 0 24px;
    font-size: 24px;
    line-height: 1.65;
    letter-spacing: .04em;
    font-weight: 500;
  }

  .top-desc-sp--gozzo .top-desc-sp__text {
    margin: 0;
    font-size: 14px;
    line-height: 2.05;
    letter-spacing: .03em;
    color: #333;
  }
}