@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ------------------------------------------------------
 * ヘッダーの設定
 * ------------------------------------------------------ */
/* ヘッダーを固定 */
@media (min-width: 960px) {
  .l-header {
    position: fixed !important;
    background: transparent;
  }
  .p-breadcrumb {
    margin-top: calc(var(--logo_size_pc) + 32px);
  }
}

/* 下層ページのヘッダー幅をトップに合わせる */
.l-header .l-container {
  max-width: 100% !important;
}

/* ヘッダーメニューを非表示 */
nav#gnav {
  display: none;
}

/* ------------------------------------------------------
 * PCでハンバーガーボタンを表示させる設定 
 * ------------------------------------------------------ */
.l-header__menuBtn.sp_ {
  display: block !important; /* ハンバーガーボタンを表示 */
}

.-series .l-header__inner {
  align-items: center; /* ハンバーガーボタンの上下位置調整 */
}

.p-spMenu {
  display: block; /* 開閉メニューを有効 */
}

/* ------------------------------------------------------
 * 開閉メニューのフルスクリーン設定（上からスライドダウン）
 * ------------------------------------------------------ */
.p-spMenu__inner {
  --color_menu_text: #fff; /* メニューテキストの色 */
  --color_menu_bg: rgba(0 0 0 / 85%); /* フルスクリーンメニューの背景色 */
  width: 100vw;
  max-height: 100vh;
  overflow-y: auto;
}

.p-spMenu__overlay {
  background: transparent;
}

/* 閉じている時：画面の上の外側に隠しておく */
.-right .p-spMenu__inner {
  -webkit-transform: translateY(-100%) !important;
  transform: translateY(-100%) !important;
  opacity: 1 !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 開いた時：定位置（上から降りてくる）へ */
[data-spmenu=opened] .p-spMenu__inner {
  -webkit-transform: translateY(0) !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.p-spMenu__inner::before {
  background: var(--color_menu_bg);
  opacity: 1;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* ------------------------------------------------------
 * フルスクリーンメニュー内の設定
 * ------------------------------------------------------ */
.p-spMenu__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上のはみ出し防止 */
  align-items: center;
  font-size: 16px; /* PC文字サイズ */
  font-weight: 700;
  color: var(--color_menu_text);
  padding-top: 80px;
  padding-bottom: 40px;
  box-sizing: border-box;
}

@media (max-width: 599px) {
  .p-spMenu__body {
    font-size: 15px; /* スマホ文字サイズ */
    padding-top: 70px;
  }
}

/* 開閉メニュー内のタイトルを非表示 */
.c-widget__title.-spmenu {
  display: none;  
}

/* メニューリンクの設定 */
.c-spnav a {
  border-bottom: none;
}

.c-gnav .sub-menu a:before, 
.c-listMenu a:before {
  content: none;
}

.p-spMenu__inner a {
  padding: 0.6em 0;
  text-align: center;
  transition: transform .5s;
  display: inline-block;
}

.p-spMenu__inner a:hover {
  padding-left: inherit;
  padding-right: inherit;
  background-color: inherit;
  transform: scale(1.05);
}

/* ------------------------------------------------------
 * フルスクリーンメニュー内のテキスト中央寄せ
 * ------------------------------------------------------ */
.p-spMenu__body,
.p-spMenu__body nav,
.p-spMenu__body ul,
.p-spMenu__body li,
.c-spnav,
.c-listMenu {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.p-spMenu__inner a {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* ------------------------------------------------------
 * ハンバーガーボタン＆閉じるボタン（全画面共通・位置ズレ防止とアニメーション）
 * ------------------------------------------------------ */

/* 1. 三本線ボタンの位置・サイズ・見た目 */
.l-header__menuBtn.sp_ {
  position: fixed !important;      /* 画面固定 */
  top: 16px !important;            /* 上からの余白 */
  right: 20px !important;          /* 右からの余白 */
  width: 54px !important;          /* タップエリア幅 */
  height: 54px !important;          /* タップエリア高さ */
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
}

.l-header__menuBtn.sp_ .c-iconBtn__icon,
.l-header__menuBtn.sp_ .c-openBtn__icon {
  font-size: 26px !important;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.l-header__menuBtn.sp_ .c-iconBtn {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(4px) !important;
}

/* 2. 閉じるバツ印ボタンの位置・サイズ・見た目（三本線と全く同じ位置に固定） */
.p-spMenu__closeBtn,
.-right .p-spMenu__closeBtn {
  position: fixed !important;      /* 画面固定 */
  top: 16px !important;            /* 三本線と完全一致 */
  right: 20px !important;          /* 三本線と完全一致 */
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* バツ印アイコン自体の大きさ調整 */
.p-spMenu__closeBtn .c-iconBtn__icon,
.p-spMenu__closeBtn i,
.p-spMenu__closeBtn svg {
  font-size: 28px !important;
  width: 28px !important;
  height: 28px !important;
}

/* ------------------------------------------------------
 * 閉じるバツ印ボタンの色変更
 * ------------------------------------------------------ */
/* バツ印（アイコン）自体の色 */
.p-spMenu__closeBtn .c-iconBtn__icon,
.p-spMenu__closeBtn i,
.p-spMenu__closeBtn svg {
  color: #b81c25 !important;
  fill: #ffffff !important;  /* SVGアイコン用 */
}

/* 3. PC・スマホ共通のアニメーション演出 */
[data-spmenu=opened] .l-header__menuBtn.sp_ {
  transform: rotate(360deg) scale(1.1);
}

[data-spmenu=opened] .p-spMenu__closeBtn {
  transform: rotate(180deg) scale(1.1) !important;
}

.p-spMenu__closeBtn:active {
  transform: rotate(180deg) scale(0.9) !important;
}