@charset "utf-8";
/* ============================================================================================================
   共通ヘッダー 追加分（header.php）
   ※SCSSのコンパイル環境を通していないため、当ファイルは素のCSSで直接編集する
   ※色は style.css（scss/setting/_color.scss）の値に準拠
      $green01: #003600 ／ $green02: #CEF4D2 ／ 翻訳アイコン内の文字色: #C6E4D4
   ※SP表示は 375px 基準の vw 換算（旧 size_sp() 相当）

   1. TOP以外の左上ロゴ（右上の翻訳切替と同じ意匠／サイズは少し大きめ）
   2. SP時のハンバーガーメニュー（翻訳切替 + SNS をドロワーに格納）
============================================================================================================ */

/* ------------------------------------------------------------
   1. 左上ロゴ（TOP以外のみ header.php で出力）
   翻訳アイコン（icn_translation.svg / 67.187 x 70.509・角丸18.573）を
   左右反転した比率で作成。PCは 110 x 115（翻訳アイコンの約1.64倍）
------------------------------------------------------------ */
.common-header__logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 115px;
  background: #003600;
  border-bottom-right-radius: 30px;
  pointer-events: auto;
}
.common-header__logo a {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14px;
}
.common-header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  font-family: "object-fit: contain;"; /* ofi.min.js（IE対策）用 */
}
@media (max-width: 767px) {
  .common-header__logo {
    /* ハンバーガーボタン（.common-header__menuBtn）と同寸。
       角丸は左右対称になるよう、右下に付ける */
    width: 13.6vw;
    height: 14.2726666667vw; /* 13.6 * (70.509 / 67.187) */
    border-bottom-right-radius: 3.76vw; /* 13.6 * (18.573 / 67.187) */
  }
  .common-header__logo a {
    padding: 1.6vw;
  }
}

/* ------------------------------------------------------------
   2-1. ドロワー本体
   PCは素のブロック要素として振る舞わせ、従来の右上レイアウトを維持する
------------------------------------------------------------ */
@media (max-width: 767px) {
  .common-header__drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: #CEF4D2;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    padding: 20vw 6.4vw 13.3333333333vw;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* ドロワーの端まで来たときに背面（body）へスクロールが移らないようにする */
    overscroll-behavior: contain;
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .common-header__drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* ドロワー内の各ブロックは縮ませない
     縦のflexコンテナは初期値が flex-shrink:1 のため、中身が画面の高さを
     超えると各ブロックが押し潰される。翻訳ボタンは高さを vw で指定した
     ただの箱なので、まずここが潰れて最終的に見えなくなる
     （英語版は文字数が多く高さを超えやすいため、症状が出やすい）。
     縮まない設定にすることで、超過分は overflow-y:auto でスクロールになる。 */
  .common-header__drawer > * {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }

  /* ドロワー内：メニュー */
  .common-header__nav {
    display: block;
    width: 100%;
    margin-bottom: 10.6666666667vw;
  }
  .common-header__navItem + .common-header__navItem {
    border-top: 1px solid rgba(0, 54, 0, 0.15);
  }
  .common-header__navList {
    border-top: 1px solid rgba(0, 54, 0, 0.15);
    border-bottom: 1px solid rgba(0, 54, 0, 0.15);
  }
  .common-header__navLink,
  .common-header__navToggle {
    display: block;
    position: relative;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    font-size: 4vw;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-align: left;
    color: #003600;
    background: none;
    border: 0;
    padding: 4.2666666667vw 8vw 4.2666666667vw 7.4666666667vw;
    cursor: pointer;
  }
  /* 行頭の〇 */
  .common-header__navLink:before,
  .common-header__navToggle:before {
    content: "";
    position: absolute;
    top: 6.4vw;
    left: 0.5333333333vw;
    width: 2.9333333333vw;
    height: 2.9333333333vw;
    border: 1px solid #003600;
    border-radius: 50%;
  }
  /* 親項目の開閉アイコン（下向き矢印。展開中は上向きに回転） */
  .common-header__navToggle:after {
    content: "";
    position: absolute;
    top: 6.4vw;
    right: 1.6vw;
    width: 2.4vw;
    height: 2.4vw;
    border-right: 1.5px solid #003600;
    border-bottom: 1.5px solid #003600;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
  }
  .common-header__navItem.is-open .common-header__navToggle:after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  /* サブメニュー */
  .common-header__navChild {
    display: none;
    padding: 0 0 3.2vw 7.4666666667vw;
  }
  .common-header__navItem.is-open .common-header__navChild {
    display: block;
  }
  .common-header__navChild li + li {
    margin-top: 1.0666666667vw;
  }
  .common-header__navChild a {
    display: block;
    position: relative;
    font-size: 14px;
    font-size: 3.7333333333vw;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #003600;
    /* 右端は「...」の余白ぶんだけ空ける */
    padding: 1.6vw 2.1333333333vw 1.6vw 6.4vw;
    /* コース名が長くても1行に収め、超過分は「...」で省略する
       （日本語・英語とも折り返さずドロワーの幅で切る） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .common-header__navChild a:before {
    content: "";
    position: absolute;
    top: 4vw;
    left: 1.6vw;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border: 1px solid #003600;
    border-radius: 50%;
  }

  /* ドロワー内：翻訳切替
     アイコン画像（icn_translation.svg）は画面右上に貼り付く前提で「左下だけ角丸」の
     形をしているため、そのまま中央に置くと箱が欠けたように見える。
     正円で切り抜いて、独立したボタンとして成立させる。 */
  .common-header__drawer .common-header__translation {
    width: 18.6666666667vw;  /* 70px */
    height: 18.6666666667vw;
    margin: 0 0 9.6vw;
    border-radius: 50%;
    overflow: hidden;
  }
  .common-header__drawer .common-header__translation a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .common-header__drawer .common-header__translation img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ドロワー内：SNS（縦組みを解除して横並びに） */
  .common-header__drawer .common-header__sns {
    position: static;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
    width: auto;
    margin: 0;
  }
  .common-header__drawer .common-header__snsTxt {
    writing-mode: horizontal-tb;
    font-size: 12px;
    font-size: 3.2vw;
    margin: 0 10.6666666667vw 0 0;
  }
  .common-header__drawer .common-header__snsMenu {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .common-header__drawer .common-header__snsMenu:before {
    top: 50%;
    right: calc(100% + 5.3333333333vw);
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
    width: 4.8vw;
    height: 1px;
  }
  .common-header__drawer .common-header__snsMenu li:nth-of-type(n + 2) {
    margin-top: 0;
    margin-left: 8vw;
  }
  .common-header__drawer .common-header__snsMenu li img {
    width: 6.9333333333vw;
  }
}

/* ------------------------------------------------------------
   2-2. ハンバーガーボタン（SPのみ）
   翻訳アイコンと同じ意匠：#003600 の面 + 左下角丸
------------------------------------------------------------ */
.common-header__menuBtn {
  display: none;
}

/* SP専用メニュー。PCでは出さない
   ※このファイル内で先に書かれているSP用の display:block を打ち消さないよう、
     必ずメディアクエリで囲む */
@media (min-width: 768px) {
  .common-header__nav {
    display: none;
  }
}
@media (max-width: 767px) {
  .common-header__menuBtn {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 13.6vw;
    height: 14.2726666667vw; /* 13.6 * (70.509 / 67.187) */
    padding: 0;
    border: 0;
    border-radius: 0;
    border-bottom-left-radius: 3.76vw; /* 13.6 * (18.573 / 67.187) */
    background: #003600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    pointer-events: auto;
    z-index: 102;
  }
  .common-header__menuBtn span {
    display: block;
    position: absolute;
    left: 50%;
    width: 6.4vw;
    height: 1.5px;
    background: #C6E4D4;
    transform: translateX(-50%);
    transition: 0.3s ease;
  }
  .common-header__menuBtn span:nth-of-type(1) {
    top: 4.5333333333vw;
  }
  .common-header__menuBtn span:nth-of-type(2) {
    top: 6.9333333333vw;
  }
  .common-header__menuBtn span:nth-of-type(3) {
    top: 9.3333333333vw;
  }
  .common-header__menuBtn.is-open span:nth-of-type(1) {
    top: 6.9333333333vw;
    transform: translateX(-50%) rotate(45deg);
  }
  .common-header__menuBtn.is-open span:nth-of-type(2) {
    opacity: 0;
  }
  .common-header__menuBtn.is-open span:nth-of-type(3) {
    top: 6.9333333333vw;
    transform: translateX(-50%) rotate(-45deg);
  }

  /* ドロワー展開中は背面をスクロールさせない */
  body.is-drawerOpen {
    overflow: hidden;
  }
}

/* ------------------------------------------------------------
   3. SP時の下層ページ余白調整
   ・SNSをドロワーへ格納したことで、画面右に縦に伸びていたSNS列が無くなるため
     各ページで確保していた右余白（calc(13.6vw + 0.75rem)）を解除する
   ・代わりに左上ロゴ／ハンバーガー（ともに高さ 14.27vw）を避けるぶん上の余白を足す
   ※読み込み順が style.css / news-event.css / news-event-detail.css より後のため
     ここでの上書きが有効（functions.php の wp_enqueue_style 参照）
------------------------------------------------------------ */
@media (max-width: 767px) {
  .p-news-event,
  .p-news-event-detail {
    padding-top: 18.6666666667vw;
  }
  .p-news-event_inner,
  .p-news-event-detail_inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .p-course {
    padding-top: 18.6666666667vw;
    padding-right: 1rem;
  }
}

/* ------------------------------------------------------------
   4. PCの狭い幅で、左上ロゴ（110 x 115px）が下層ページのコンテンツに
      かぶるのを避ける
      1450px以上ではコンテンツ（最大1280px）が中央寄せされてロゴの右に来るため不要
------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1449px) {
  .p-news-event,
  .p-news-event-detail,
  .p-course {
    padding-top: 130px;
  }
}