@charset "utf-8";
/* CSS Document */



/* 画像スライダー */
.image-slider {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 20px;
    overflow: hidden;
    position: relative;
    padding-bottom: 66.66%; /* 3:2の比率 */
}

.slide {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* 初期状態では不透明度を0にする */
    transition: opacity 0.5s ease-in-out; /* ← 0.5秒へ変更 */
}

.slide:first-child {
    opacity: 1; /* 最初の画像の不透明度を1にする */
}

/* ▼ これを新規追加 ▼ */
.slide.active {
    opacity: 1; /* JSが active クラスを付けたら表示する */
}

.image-slider > .slide:nth-child(2) {
    filter: blur(0.6px); /* 4pxぼかす（数字が大きいほど強くぼけます） */
}

/* 900px以下の画面幅では画像を画面いっぱいにする */
@media (max-width: 900px) {
  .image-slider {
    max-width: 100%;
  }

  .slide {
    width: 100vw; /* ビューポートの幅に合わせる */
  }
}

/*　ここまでslider　*/

/* our brand */
h2.brand-title{
    padding-bottom: 20px;
    color: #888;
}


.brand-list {
  background: linear-gradient(#fff, #f0f8ff); /* グラデーション背景：白が上 */
  padding: 20px;
  border-radius: 5px;
  overflow-x: auto; /* 横スクロールを有効化 */
  white-space: nowrap; /* 横並びにする */
    margin-bottom: 20px;
}

.brand-list ul {
  display: inline-flex; /* 横並びにする */
  padding: 0;
  margin: 0;
  gap: 5px; /* アイテム間の隙間 */
}

.brand-list ul li {
  list-style: none;
    padding-right: 15px;
}

/* our brandのボタン */

.brand-list ul li h3 a {
    display: block;
    color: #888;
    text-align: center;
    position: relative;
    width: 150px;
    font-weight: normal;
    font-size: 20px;
}

.brand-list ul li h3 a::before {
  content: '';
  display: block;
  padding-top: 45.4px;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* 影を大きく、濃くする */
}

.brand-list ul li h3 a span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  z-index: 1;
  width: 100%;
}

/* our brand ボタンのホバー（カーソルが乗った時） */
.brand-list ul li h3 a:hover {
    opacity: 1; /* base.css の a:hover の opacity:0.7 を上書き */
}

/* ボタンの「白い四角」部分の動き */
.brand-list ul li h3 a:hover::before {
    /* 右斜め下に2px動かす */
    transform: translate(2px, 2px);
    /* 影を消して「押した」感じを出す */
    box-shadow: none;
}

/* ボタンの「文字」部分の動き */
.brand-list ul li h3 a:hover span {
    /* 文字も一緒に右斜め下に2px動かす */
    /* 元の transform: translate(-50%, -50%) に 2px を追加 */
    transform: translate(calc(-50% + 2px), calc(-50% + 2px));
    /* 文字の色をピンクに */
    color: #e81b75;
}

/* 動きを滑らかにする（::before と span の両方） */
.brand-list ul li h3 a::before,
.brand-list ul li h3 a span {
    /* 0.3秒より少し速く(0.2s)すると「押した感」が出ます */
    transition: all 0.2s ease; 
}

/* our brandのここまで */

/* NEW ARRIVAL */
.new-arrival {
      background: linear-gradient(#fff, #f0f8ff); /* グラデーション背景：白が上 */
  margin-bottom: 20px; /* 下のコンテンツとの余白 */
  padding: 20px;
  border-radius: 5px;
}

.new-arrival h2 {
  color: #888; /* 文字色 */
}

.new-arrival small {
    padding-left: 5px;
    color: #888;
}

.new-arrival p {
  text-align: center; /* 中央寄せ */
  margin-bottom: 20px; /* 下の要素との余白 */
}

.new-arrival-list {
  overflow-x: auto; /* 横スクロールを有効化 */
  white-space: nowrap; /* 横並びにする */
}

.new-arrival-list ul {
  display: inline-flex; /* 横並びにする */
  padding: 0;
  margin: 0;
  gap: 15px; /* アイテム間の隙間 */
}

.new-arrival-list li {
  list-style: none;
}

.new-arrival-list img {
    max-width: 227px; /* 画像の最大幅 */
    max-height: 277px; /* 画像の最大高さ */
    display: block; /* 画像のブロック化 */
    border-radius: 10px; /* 角丸の半径を指定 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* 影をOur Brandと統一 */
    transition: all 0.2s ease; /* 動きを滑らかにする */
}

/* ▼▼▼ このブロックを追記 ▼▼▼ */
/* NEW ARRIVAL 画像のホバー（カーソルが乗った時） */
.new-arrival-list li a:hover img {
    /* 右斜め下に2px動かす */
    transform: translate(2px, 2px);
    /* 影を消して「押した」感じを出す */
    box-shadow: none;
}
/* ▲▲▲ ここまで ▲▲▲ */

/* What's NEW */
.news {
    background: linear-gradient(#fff, #f0f8ff); /* グラデーション背景：白が上 */
    margin-bottom: 20px; /* 下のコンテンツとの余白 */
    padding: 20px;
    border-radius: 5px;
    color: #888;
    max-height: 300px; /* ボックスの最大の高さを300pxに決める */
    overflow-y: auto; /* 高さを超えたら、自動でタテのスクロールバーを出す */
}

.MainBox_news a {
  color: #0449B4; /* What's Newのリンクのスタイル */
  transition: opacity 0.3s ease; /* アニメーションを追加 */
}

.MainBox_news a:hover {
  opacity: 0.5; /* ホバー時に透明度を下げる */
}

.h2-news{
    font-weight: normal;
    font-size: 18px; /* ← ▼▼▼ この1行を追記 ▼▼▼ */
}

.MainBox_item {
    padding: 10px 0;
}

.MainTitle p {
    color: #333;
}
/*
.MainBox_news .red {
    color: red;
}*/



/* ----------
  画像スライダーのナビゲーションドット
---------- */

/* ドットの親要素（全体の位置決め） */
.slider-nav {
  position: absolute; /* .image-slider（親）を基準に配置 */
  bottom: 15px;      /* スライダーの下から15px上に配置 */
  left: 50%;         /* スライダーの真ん中に配置 */
  transform: translateX(-50%); /* 真ん中から自身の幅の半分だけ戻す */
  z-index: 10;       /* 画像より手前に表示 */
}

/* ドット本体のスタイル */
.slider-nav-item {
  display: inline-block;  /* 横並びにする */
  width: 12px;            /* ドットの幅 */
  height: 12px;           /* ドットの高さ */
  background-color: #fff; /* ドットの色（白） */
  border: 1px solid #ccc; /* 輪郭（薄いグレー） */
  border-radius: 50%;     /* 50%にすると完全な円になる */
  margin: 0 5px;          /* ドット同士の左右の余白 */
  transition: background-color 0.3s ease; /* 色が変わる時のアニメーション */
}

/* 現在地のドット（.active が付いた時のスタイル） */
.slider-nav-item.active {
  background-color: #e81b75; /* アクティブな色（サイトのピンク） */
  border-color: #e81b75;
}

/* ドットをホバーした時のスタイル（任意） */
.slider-nav-item:hover {
  background-color: #fde9fb; /* ホバー時の色 */
  border-color: #e81b75;
}