@charset "utf-8";

/* ----------------------------------------------------------------------
   目次
   1. base  リセット後の基本設定
   2. layout  コンテンツ幅・ページ内リンク
   3. utility  表示切り替え
   4. c-heading  セクション見出し
   5. c-btn  ボタン
   6. c-header  ヘッダー
   7. c-page-head  下層ページのタイトル部
   8. c-coming  公開までの仮表示
   9. c-page  汎用ページ・404ページの本文
   10. c-footer  フッター
   各コンポーネントの直後に、そのコンポーネントのレスポンシブ指定を置く
   ---------------------------------------------------------------------- */

/* ==========================================================================
   base  リセット後の基本設定
   ========================================================================== */

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .3s ease;
}

a:hover {
  opacity: .7;
}

/* ==========================================================================
   layout  コンテンツ幅・ページ内リンク
   ========================================================================== */

/* コンテンツ幅は最大1200px・中央揃え。
1280px未満の画面では両サイドに40pxの余白を残したまま幅が縮む。
画像は aspect-ratio で比率を保つため、縮んでも見た目の比率は変わらない */
.l-inner {
  width: min(120rem, 100% - 8rem);
  margin-right: auto;
  margin-left: auto;
}

/* 固定ヘッダーの下に隠れないよう、ページ内リンクの着地位置をずらす */
[id] {
  scroll-margin-top: 7.7rem;
}

@media (max-width: 767px) {
  /* ----- layout ----- */
  .l-inner {
    width: 90%;
  }

  [id] {
    scroll-margin-top: 6rem;
  }
}

/* ==========================================================================
   utility  表示切り替え
   ========================================================================== */

.-u-sp-none-pc-block {
  display: block;
}

.-u-pc-none-sp-block {
  display: none;
}

@media (max-width: 767px) {
  /* ----- utility ----- */
  .-u-sp-none-pc-block {
    display: none;
  }

  .-u-pc-none-sp-block {
    display: block;
  }
}

/* ==========================================================================
   c-heading  セクション見出し
   ========================================================================== */

.c-heading {
  --heading-size: 10.4rem;
  /* Barlow の line-height:1 のボックスから、キャップハイト上／ベースライン下の
     余白（実測 0.1923em / 0.1058em）を打ち消す */
  --heading-trim-top: calc(var(--heading-size) * -.19231);
  --heading-trim-bottom: calc(var(--heading-size) * -.10577);
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-top: var(--heading-trim-top);
  margin-bottom: var(--heading-trim-bottom);
}

.c-heading__en {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-size: var(--heading-size);
  line-height: 1;
  letter-spacing: .208rem;
  color: #333;
  white-space: nowrap;
}

.c-heading__ja {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: #f6741b;
  white-space: nowrap;
}

.c-heading__paren {
  font-family: "Anonymous Pro", monospace;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: .8333; /* Figma上のボックス高さ20pxに合わせる */
}

/* Figma上、見出しボックスの高さが55pxでキャップハイトより19px上に
はみ出しているセクション（NEWS / AUDITION）用。
セクション上端に対して見出しを19px上へ出し、後続要素との間隔を保つ */
.c-heading--baseline {
  margin-top: calc(var(--heading-trim-top) - 1.9rem);
  margin-bottom: calc(var(--heading-trim-bottom) + .1rem);
}

/* 和文を英字の下に置くパターン（ABOUT / CONTACT） */
.c-heading--column {
  flex-direction: column;
  align-items: flex-start;
  gap: 2.7rem;
}

.c-heading--center {
  align-items: center;
}

/* 背景が濃い場所で使う白抜き（サイズは使う側で指定する） */
.c-heading--white .c-heading__en,
.c-heading--white .c-heading__ja {
  color: #fff;
}

@media (max-width: 1023px) {
  /* 背景の切り替わり位置に見出しが跨がないよう、セクション上へのはみ出しをやめる */
  .c-heading--baseline {
    margin-top: var(--heading-trim-top);
    margin-bottom: var(--heading-trim-bottom);
  }
}

@media (max-width: 767px) {
  /* ----- c-heading ----- */
  .c-heading {
    --heading-size: 4.6rem;
    flex-wrap: wrap; /* 英字＋和文が入りきらない場合は折り返す */
    gap: .6rem;
  }

  .c-heading__ja {
    gap: .4rem;
    font-size: 1.3rem;
  }

  .c-heading__paren {
    font-size: 1.6rem;
  }

  .c-heading--column {
    gap: 1.6rem;
  }

}

/* ==========================================================================
   c-btn  ボタン
   ========================================================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding: 2rem 2.2rem 2rem 2.4rem;
  background-color: #000;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .126rem;
  color: #fff;
  white-space: nowrap;
}

.c-btn__icon {
  flex-shrink: 0;
  width: 3.2512rem;
  height: 1.1314rem;
}

/* 公開前のページ用。リンクではなく押せない表示 */
.c-btn--disabled {
  cursor: default;
}

/* フォームの送信ボタン（文字と矢印の間隔が広い） */
.c-btn--wide {
  gap: 8.6rem;
}

@media (max-width: 767px) {
  /* ----- c-btn ----- */
  .c-btn {
    gap: 1.2rem;
    padding: 1.6rem 1.8rem 1.6rem 2rem;
    font-size: 1.5rem;
  }

  .c-btn__icon {
    width: 2.6rem;
    height: .905rem;
  }
}

/* ==========================================================================
   c-header  ヘッダー
   ========================================================================== */

.c-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7.7rem;
  padding-left: 4rem;
  background-color: #f2f2f2;
}

/* 画面が狭いときはナビを優先し、ロゴ横のリード文を縮める */
.c-header__logo {
  min-width: 0;
}

.c-header__logo-name {
  font-family: "Barlow", sans-serif;
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 2rem;
  color: #333;
  white-space: nowrap;
}

.c-header__logo-name-west {
  font-weight: 600;
  color: #f6741b;
}

.c-header__logo-lead {
  margin-top: 1.3rem;
  font-feature-settings: "palt" 1; /* Figma指定 */
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-header__right {
  display: flex;
  flex-shrink: 0;
  align-self: stretch;
}

.c-header__nav {
  display: flex;
}

.c-header__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 15rem;
  border-bottom: .4rem solid transparent;
  color: #333;
}

.c-header__nav-item.is-current {
  border-bottom-color: #f6741b;
}

.c-header__nav-en {
  font-family: "Barlow", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: .096rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-header__nav-ja {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 2rem;
  white-space: nowrap;
}

.c-header__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 16.6rem;
  padding: 1.9rem 3.1rem;
  background-color: #333;
  color: #fff;
}

/* ハンバーガーボタン（1023px以下で表示） */
.c-header__toggle {
  display: none;
}

@media (max-width: 1119px) {
  .c-header__nav-item {
    width: 13rem;
  }

  .c-header__nav-en {
    font-size: 2rem;
    letter-spacing: .08rem;
  }

  .c-header__nav-ja {
    font-size: 1.1rem;
  }

  .c-header__contact {
    width: 14rem;
    padding: 1.9rem 2rem;
  }
}

@media (max-width: 1023px) {
  .c-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
    align-self: stretch;
    width: 7.7rem;
    background-color: #333;
    cursor: pointer;
  }

  .c-header__toggle-bar {
    display: block;
    width: 2.8rem;
    height: 2px;
    margin: 0 auto;
    background-color: #fff;
    transition: transform .3s ease, opacity .3s ease;
  }

  .c-header__toggle.is-open .c-header__toggle-bar:nth-child(1) {
    transform: translateY(.8rem) rotate(45deg);
  }

  .c-header__toggle.is-open .c-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .c-header__toggle.is-open .c-header__toggle-bar:nth-child(3) {
    transform: translateY(-.8rem) rotate(-45deg);
  }

  .c-header__nav {
    position: fixed;
    top: 7.7rem;
    left: 0;
    z-index: -1;
    flex-direction: column;
    width: 100%;
    background-color: #f2f2f2;
    border-top: 1px solid #dfdfdf;
    box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .08);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }

  .c-header__nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .c-header__nav-item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6rem;
    width: 100%;
    padding: 1.8rem 4rem;
    border-bottom: 1px solid #dfdfdf;
  }

  /* 一覧内では現在地を左側のバーで示す */
  .c-header__nav-item.is-current {
    border-bottom-color: #dfdfdf;
    box-shadow: inset .4rem 0 0 0 #f6741b;
  }

  .c-header__nav-en {
    font-size: 2.2rem;
    letter-spacing: .088rem;
  }

  .c-header__nav-ja {
    font-size: 1.2rem;
  }

  /* CONTACTはメニュー内の最後の項目として並べる */
  .c-header__contact {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6rem;
    width: 100%;
    padding: 1.8rem 4rem;
  }
}

@media (max-width: 767px) {
  /* ----- c-header ----- */
  .c-header {
    height: 6rem;
    padding-left: 2rem;
  }

  .c-header__logo-name {
    font-size: 2.1rem;
    line-height: 1;
  }

  .c-header__logo-lead {
    margin-top: .8rem;
    font-size: 1rem;
  }

  .c-header__toggle {
    gap: .5rem;
    width: 6rem;
  }

  .c-header__toggle-bar {
    width: 2.4rem;
  }

  .c-header__toggle.is-open .c-header__toggle-bar:nth-child(1) {
    transform: translateY(.7rem) rotate(45deg);
  }

  .c-header__toggle.is-open .c-header__toggle-bar:nth-child(3) {
    transform: translateY(-.7rem) rotate(-45deg);
  }

  .c-header__nav {
    top: 6rem;
  }

    .c-header__nav-item,
  .c-header__contact {
    gap: 1.2rem;
    padding: 1.4rem 2rem;
  }

  .c-header__nav-en {
    font-size: 1.8rem;
  }

  .c-header__nav-ja {
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   c-page-head  下層ページのタイトル部（パンくず＋大見出し）
   ========================================================================== */

.c-page-head {
  position: relative;
  background-color: #f6741b;
  overflow: hidden;
}

/* 右上のドットパターン。Figmaは左右反転して配置している */
.c-page-head__pattern {
  position: absolute;
  top: -4.7rem;
  left: 78.3rem;
  width: 65.7rem;
  max-width: none;
  height: 30.5rem;
  transform: scaleX(-1);
}

.c-page-head__inner {
  position: relative;
  padding: 2.4rem 0 5.9rem;
}

.c-page-head__breadcrumb {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}

.c-page-head__breadcrumb-arrow {
  width: .4rem;
  height: 1rem;
}

.c-page-head__breadcrumb-current {
  white-space: nowrap;
}

/* 見出しはキャップハイト基準で位置合わせしているため、トリム分を足す */
.c-page-head .c-heading {
  margin-top: calc(var(--heading-trim-top) + 4.3rem);
}

@media (max-width: 767px) {
  .c-page-head__pattern {
    top: -3rem;
    left: 55%;
    width: 42rem;
    height: 19.5rem;
  }

  .c-page-head__inner {
    padding: 1.6rem 0 3.2rem;
  }

  .c-page-head__breadcrumb {
    font-size: 1.1rem;
  }

  .c-page-head .c-heading {
    margin-top: calc(var(--heading-trim-top) + 2.4rem);
  }
}

/* ==========================================================================
   c-coming  公開までの仮表示
   ニュースページ・未実装の一覧／詳細URLで共通に使う
   ========================================================================== */

.c-coming {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32rem;
  padding: 10rem 2rem;
  background-color: #fff;
}

.c-coming__text {
  font-family: "Barlow", sans-serif;
  font-size: 4.8rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .096rem;
  color: #333;
  text-align: center;
}

@media (max-width: 767px) {
  /* ----- c-coming ----- */
  .c-coming {
    min-height: 20rem;
    padding: 6rem 2rem;
  }

  .c-coming__text {
    font-size: 3rem;
  }
}

/* ==========================================================================
   c-page  汎用ページ・404ページの本文
   専用テンプレートを持たない固定ページのフォールバック表示に使う
   ========================================================================== */

.c-page {
  padding: 8rem 0;
  background-color: #fff;
}

.c-page__body {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.8rem;
  color: #333;
}

.c-page__body > * + * {
  margin-top: 2rem;
}

.c-page__body h2 {
  margin-top: 4rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
}

.c-page__body h3 {
  margin-top: 3.2rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
}

.c-page__body a {
  text-decoration: underline;
}

.c-page__body ul,
.c-page__body ol {
  padding-left: 1.4em;
}

.c-page__body li {
  list-style: disc;
}

.c-page__body ol li {
  list-style: decimal;
}

.c-page__btn {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}

@media (max-width: 767px) {
  /* ----- c-page ----- */
  .c-page {
    padding: 4rem 0;
  }

  .c-page__body {
    font-size: 1.4rem;
    line-height: 2.4rem;
  }

  .c-page__body h2 {
    margin-top: 3.2rem;
    font-size: 2rem;
  }

  .c-page__body h3 {
    margin-top: 2.4rem;
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   c-footer  フッター
   ========================================================================== */

.c-footer {
  background-color: #f6741b;
  color: #fff;
}

.c-footer__main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29.7rem;
}

.c-footer__inner {
  display: flex;
  align-items: flex-start;
  width: min(132rem, 100% - 8rem);
  margin: 0 auto;
}

.c-footer__left {
  flex: 1 0 0;
  min-width: 0;
}

.c-footer__logo-name {
  font-family: "Barlow", sans-serif;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 2rem;
  white-space: nowrap;
}

.c-footer__logo-name-west {
  font-weight: 600;
}

.c-footer__logo-ja {
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2rem;
}

.c-footer__address {
  margin-top: 1.7rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.275rem;
  letter-spacing: .042rem;
}

.c-footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 45.6rem;
  height: 11.5rem;
  flex-shrink: 0;
}

.c-footer__nav {
  display: flex;
  gap: 2.4rem;
  width: 100%;
}

.c-footer__nav-item {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.275rem;
  letter-spacing: .042rem;
  white-space: nowrap;
}

.c-footer__sns {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
}

.c-footer__copyright {
  border-top: 1px solid #fff;
}

.c-footer__copyright-text {
  max-width: 132rem;
  margin: 0 auto;
  padding: 2rem 4rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 2.275rem;
  letter-spacing: .036rem;
  text-align: center;
}

@media (max-width: 767px) {
  /* ----- c-footer ----- */
  .c-footer__main {
    height: auto;
    padding: 4rem 0;
  }

  .c-footer__inner {
    flex-direction: column;
    gap: 3rem;
    width: 90%;
  }

  .c-footer__left {
    flex: none; /* 縦並びになるとflex-basisが高さに効くため解除する */
    width: 100%;
  }

  .c-footer__logo-name {
    font-size: 2.6rem;
    line-height: 1;
  }

  .c-footer__logo-ja {
    font-size: 1.2rem;
  }

  .c-footer__address {
    margin-top: 1.4rem;
    font-size: 1.2rem;
    line-height: 2rem;
  }

  .c-footer__right {
    align-items: flex-start;
    gap: 2.4rem;
    width: 100%;
    height: auto;
  }

  .c-footer__nav {
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
  }

  .c-footer__nav-item {
    font-size: 1.3rem;
  }

  .c-footer__copyright-text {
    padding: 1.6rem 2rem;
    font-size: 1rem;
  }
}