@charset "UTF-8";
/*
 * border だけで作るシェブロン矢印（正方形の角を45度回転）
 * 呼び出し先で position: relative な要素の :before / :after 等に @include すること
 * @params $direction : up / down / left / right
 * @params $color : 線の色
 * @params $size : 正方形1辺のサイズ
 * @params $stroke : 線の太さ
 */
/*
 * 矢印入りの円形ボタン（下矢印 / 横矢印パーツ）
 * @params $direction : up / down / left / right
 * @params $btn-size : ボタン（円）のサイズ
 * @params $color : 通常時の枠線・矢印色
 * @params $bg : 通常時の背景色
 * @params $hover-color : hover時の矢印色
 * @params $hover-bg : hover時の背景色
 * @params $hover-trigger : hoverの起点となる祖先セレクタ（null なら自分自身の :hover）
 *   例: @include arrow-circle-btn($hover-trigger: ".block-outline-link-btn:hover")
 */
/*
 * 各ブロックの見出し（H2タイトル + 日本語副題）共通スタイル
 * 呼び出し先の要素の子に h2 と p（または任意タグ）を持たせて使う
 * 例:
 *   <div class="block-h2-design">
 *     <h2>CATEGORY</h2>
 *     <p>カテゴリーから探す</p>
 *   </div>
 */
/*
 * 矢印付きの角丸アウトラインボタン（「詳しくはこちら」等のリンク）
 * 呼び出し先の要素の中に .block-arrow-btn-inner 等の矢印用の子要素を1つ用意し、
 * その子要素に @include arrow-circle-btn(...) を別途適用すること
 * @params $width : ボタン幅
 * @params $height : ボタン高さ
 * @params $radius : 角丸
 * @params $arrow-offset : 矢印ボタンの右端からの距離
 */
.page-top {
  /* ----------------------------------------------
    トップページ専用スタイル（PC）
    既存の usr/*.scss は変更せず、こちらに追加していく
  ---------------------------------------------- */
}
.page-top .pane-contents {
  padding-bottom: 0;
}
.page-top {
  /* ----メインビジュアルスライダー #top-slider---- */
}
.page-top #top-slider.multiple-slider .sp-slide.sp-selected {
  z-index: 9;
}
.page-top #top-slider.multiple-slider .sp-slide.sp-selected .sp-image-container {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.page-top #top-slider.multiple-slider .sp-slide .sp-image-container {
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
  transition: -webkit-transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
  transition: transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
  transition: transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) !important;
  -webkit-transform: scale(0.62);
          transform: scale(0.62);
}
.page-top #top-slider .sp-arrow {
  display: none;
}
.page-top #top-slider .sp-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 24px;
}
.page-top #top-slider .sp-button {
  width: 40px;
  height: 4px;
  padding: 0;
  margin: 0;
  background-color: #e5e5e5;
  border: none;
  border-radius: 0;
  -webkit-transition: background-color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: background-color 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.page-top #top-slider .sp-button.sp-selected-button {
  background-color: #006ab7;
}