@charset "UTF-8";

/* ==========================================================
   common.css
   ページ種別に関係なく、サイト全体（固定ページ・404を含む）で
   常に読み込まれるCSS。ヘッダー・スマホ開閉メニューなど、
   グローバルな要素はここに書くこと。
   （portal.cssはトップページ・VIEW ALL系アーカイブ・グループ紹介・
   コールMIXページでしか読み込まれないため、ここに書くべき内容を
   誤ってportal.css側に書かないよう注意）
   ========================================================== */

/* 英字の見出し・ラベル用フォント（ヘッダーメニュー含む・全ページ共通）
----------------------------------------------- */

/* もとはportal.css側で指定していたが、.c-gnav a（PCヘッダーメニュー）・
   .c-spnav a（SPヘッダーメニュー）はサイト全体で表示されるグローバル
   ヘッダーの要素であるのに対し、portal.cssはトップページ・VIEW ALL系
   アーカイブ・グループ紹介・コールMIXページでしか読み込まれない
   （functions.php側の条件分岐）。そのため固定ページや404ページでは
   portal.cssごと読み込まれず、ヘッダーメニューのフォントだけデフォルトに
   戻ってしまっていた。全ページで必ず読み込まれるこちらのCSSに移設。

   Archivo Blackは日本語グリフを持たないフォントなので、日本語部分は
   自動的にこのフォントスタック内の日本語フォント（游ゴシック等）に
   フォールバックする。日本語のテキストを含む要素に指定しても副作用は無い。 */
.portal-section-title h2,
.portal-more,
.hero-en,
.group-hero__en,
.group-card-name,
.info-new,
.info-date,
.info-cat,
.callmix-list-item__group,
.schedule-date,
.filter-btn,
.c-gnav a,
.group-hub-heading,
.c-spnav a,
.c-widget__title,
.l-articleBottom__title {
  font-family: 'Archivo Black', -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic Medium", 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
}

/* ヘッダーメニューは、まだfont-weight/letter-spacingを個別に持っていないため、
   ここで公式サイトの共通ルール（font-weight:600, letter-spacing:0.03em）に揃える */
.c-gnav a {
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ヘッダー左右余白・スマホ開閉メニュー（ハンバーガー/ドロワー）
   -----------------------------------------------
   以下もportal.css側にあったが、ヘッダー本体・スマホの開閉メニューは
   サイト全体で表示されるグローバル要素であるのに対し、portal.cssは
   トップページ等の一部ページでしか読み込まれない。そのため固定ページ・
   404ページでは、ヘッダーの余白調整とスマホ開閉メニューの見た目
   （フェード開閉・2カラム表示・ハンバーガーアイコンのアニメーション等）が
   SWELL標準のデフォルト表示に戻ってしまっていたため、全ページ共通で
   読み込まれるこちらのCSSに移設した。 */

/* ヘッダー（通常時・スクロールで固定表示される時の両方）の左右余白を、
   他のセクションと同じパターンに揃える。.l-fixHeader__inner・.l-header__innerは
   SWELL標準の.l-containerクラスを持っており、今まで一度もここでは
   上書きしていなかった。
   .l-containerにはmax-width（SWELL独自の計算式）が付いているため、
   そのままだと「max-widthからはみ出た分がmargin:autoで左右に振り分けられる」
   のと「うちのpaddingが別に5%乗る」のが両方効いてしまい、二重に余白ができる。
   ヘッダーはそもそもmax-widthでの幅制限が不要なので、max-widthを外して
   （＝marginが振り分ける「余った分」自体を無くして）、paddingの5%だけが
   効くようにする。 */
#header .l-header__inner,
#fix_header .l-fixHeader__inner {
  max-width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}

/* ==========================================================
   スマホメニュー（SWELL標準の .p-spMenu）を公式サイトのデザインに寄せる
   ・パネルの開閉をスライドではなく公式と同じフェード(opacity)のみにする
   ・「MENU」の見出しバナー（ウィジェットタイトル）を非表示に
   ・メニュー項目を2カラムに、下線・矢印アイコンなしのシンプルな見た目に
   ・余白・フォントサイズ・文字間隔・行間を公式の実測値に合わせる
   ========================================================== */

.p-spMenu {
  transition: opacity 0.4s cubic-bezier(0.16, 0.68, 0.65, 1.03); /* SWELL標準は0s（瞬時）。
    公式の .header .drawer { transition: 0.4s cubic-bezier(...); } と同じ速さ・イージングに揃える */
}

[data-spmenu="closed"] .p-spMenu {
  transition-delay: 0s; /* SWELL標準は閉じる時だけtransition-delay:1sの遅延があるが、
                            公式には遅延が無いため解除する */
}

.p-spMenu__inner {
  width: 100%; /* SWELL標準は88vw（右側にオーバーレイの帯が残る）。公式は
                   .drawer-visible .drawer { width: 100%; } で画面幅いっぱいに
                   開くため、それに合わせる */
}

.-left .p-spMenu__inner,
.-right .p-spMenu__inner,
[data-spmenu="opened"] .p-spMenu__inner {
  transform: none; /* SWELL標準の横スライドを廃止。公式は.header .drawerにtransformが無く、
                       opacity（外側の.p-spMenuに既にある仕組み）だけで開閉しているため、
                       それに合わせて内側のスライドは常に無効化する */
}

.p-spMenu .c-widget__title {
  display: none; /* 「MENU」バナー。公式には無いため非表示にする */
}

.p-spMenu .p-spMenu__nav {
  margin-top: 0; /* 本来「MENU」見出しとの間隔を詰めるためのmargin-top:-1emがSWELL本体側に
                    あるが、見出し自体を非表示にしたことで詰める相手がいなくなり、
                    メニュー一番上の行がスクロール範囲外に隠れてしまうため打ち消す */
  padding-top: 30px; /* 公式サイトは .header .drawer { padding-top: 80px; } で
                         閉じるボタンと1行目の間に余裕を持たせている。こちらは既に
                         .p-spMenu__inner側にvar(--logo_size_sp)分の余白があるため、
                         その差分を補う形で追加している（実際の見え方を見て調整可） */
}

.p-spMenu .p-spMenu__body {
  padding-left: 10%; /* 公式サイトの .header .drawer .g-nav { padding: 0 10%; } に合わせる
                         （SWELL標準は4vw）。上下のpaddingはSWELL標準のまま変更しない */
  padding-right: 10%;
}

.p-spMenu .c-spnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em 0; /* 公式サイトの .header .drawer .nav li { margin: 0 0 0.5em; } (行間)、
                   および列間の余白指定が無いことに合わせた値。以前の1.6em/1emは
                   公式を確認せず決め打ちした値だったため訂正 */
}

.p-spMenu .c-spnav a {
  border-bottom: none; /* SWELL標準の項目ごとの下線を消す */
  padding: 10px 0; /* 公式サイトの .header .drawer .nav li a { padding: 10px 0; } と同じ値 */
  font-size: 4vw; /* 公式サイトの .header .drawer .nav li { font-size: 4vw; } と同じ値 */
  letter-spacing: 0.05em; /* 公式サイトの .header .drawer .nav { letter-spacing: 0.05em; } と同じ値 */
  color: #797979; /* 公式サイトの .header .drawer .nav li a { color: #797979; } と同じ値 */
}

.p-spMenu .c-listMenu a:before {
  content: none; /* SWELLカスタマイザーが出力する「>」矢印アイコンを消す */
}

/* ==========================================================
   スマホのステータスバー(時計・バッテリー表示部分)の色を、
   メニューが開いている間だけパネルの背景色に合わせる。
   .p-spMenu__innerに直接background-colorを指定することで、
   theme-colorのmetaタグが無い環境でブラウザが自動検出する
   ステータスバー色にも反映される(実機で確認済み)
   ========================================================== */
.p-spMenu__inner {
  background-color: #fbf4d8; /* パネルの背景色と同じ値。好きな色に変更してください */
}

/* SWELL標準は、メニューが開いている間は背後のページをスクロールできないよう
   ロックしている(overflow-y:hidden)。公式サイトにはこのロックが無く、
   開いたままでも背後のページがスクロールでき、その結果ブラウザ標準の
   ページスクロールバーが見えているため、ロックを解除して合わせる */
@media not all and (min-width: 960px) {
  [data-spmenu="opened"] body {
    overflow-y: auto;
    touch-action: auto;
    overscroll-behavior-y: none; /* スクロール端でのバウンス(跳ね返り)時に、
                                     背後のページが一瞬見えてしまうのを防ぐ */
  }
}

/* ==========================================================
   ハンバーガーメニュー：2本線 ⇔ ×アニメーション
   ・data-spmenu は <html> に付くため、ヘッダーのボタンと
     パネル内の閉じるボタン(どちらも .-menuBtn.c-iconBtn)の
     両方に同じ動きが適用される
   ========================================================== */

/* 元のアイコンフォント(icon-menu-thin / icon-close-thin)を非表示にする */
.-menuBtn .c-iconBtn__icon {
  display: none;
}

/* ボタン自体のサイズ・レイアウトはSWELLのまま変更しない。
   線を絶対配置するための基準にするだけ */
.-menuBtn.c-iconBtn {
  position: relative;
  mix-blend-mode: difference; /* 公式と同じ:背景色に応じて自動で見やすい色にする効果 */
}

/* 2本線を疑似要素で描く(閉じている時の基本形)
   ・width/heightは公式サイトの実測値(線の実寸24px・太さ1px)
   ・上下位置は「40px四方のボタン」を基準に計算したpx値をボタン中央からのズレとして指定
     (ボタン本体の実サイズには依存しないので、ボタンの位置・大きさに影響しない) */
.-menuBtn.c-iconBtn::before,
.-menuBtn.c-iconBtn::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 1px;
  background-color: #333; /* 好きな色に変更してください */
  transition: transform 0.3s ease;
}

.-menuBtn.c-iconBtn::before {
  transform: translate(-50%, -4px); /* 公式の40px角ボタンでtop:40%相当 */
}

.-menuBtn.c-iconBtn::after {
  transform: translate(-50%, 5.6px); /* 公式の40px角ボタンでtop:64%相当 */
}

/* 開いている時：2本線が真ん中で交差してXになる */
[data-spmenu="opened"] .-menuBtn.c-iconBtn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

[data-spmenu="opened"] .-menuBtn.c-iconBtn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================
   メインビジュアル本体（写真幅・上下余白・下部文字）・.l-contentの
   透過設定について
   ・以前はここ（旧portal.css）に実装していたが、swell-ext-main-visual.phpを
     プラグインとして自己完結させるため、CSSは全てそちら側
     （swell-ext-main-visual.css、wp_enqueue_style()で読み込み）へ移動した。
     ここには何も残っていない。詳しくはswell-ext-main-visual.php側の
     コメントを参照。
   ========================================================== */

/* ==========================================================
   本文の後ろに敷く、サイト共通の背景レイヤーについて
   ・以前はここ（旧portal.css）とheader.php（トップページ用の.p-bgのHTML）に
     分かれて実装していたが、swell-ext-main-visual.phpをプラグインとして
     自己完結させるため、CSS・HTMLとも全てそちら側（wp_head・wp_body_open）
     へ移動した。ここには何も残っていない。詳しくはswell-ext-main-visual.php
     側のコメントを参照。
   ========================================================== */

/* ==========================================================
   ハンバーガーボタンを、パネル自身の×ボタン(.p-spMenu__closeBtn)と
   同じ位置に重ねて固定表示する(PHPは一切変更しない)
   ・閉じている時:ヘッダー側のこのボタン(2本線)が見える
   ・開いている時:このボタンはパネルの下に隠れ、代わりにパネル自身の
     ×ボタン(SWELL標準、同じ位置)が見える
   ・.p-spMenu__closeBtnの実測値(position:absolute; top:0; right:0;
     width/height:48px)に合わせている
   ========================================================== */
@media not all and (min-width: 960px) {
  .l-header__menuBtn.sp_ {
    visibility: hidden;
  }

  .l-header__menuBtn.sp_ .c-iconBtn {
    position: fixed;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    z-index: 999;
    visibility: visible;
  }

  /* ログイン中は上部に管理バー(高さ約46px)が固定表示されるため、
     ボタンが管理バーの下に隠れないよう位置を下にずらす
     (訪問者には管理バーが出ないので、この調整は自分が確認する時だけ効く)
     ・admin-barクラスは<body>ではなく#body_wrapに付くため、そちらを対象にする */
  #body_wrap.admin-bar .l-header__menuBtn.sp_ .c-iconBtn {
    top: 46px;
  }
}