@charset "UTF-8";
/* 下層ページ共通の型。色・書体・余白は theme.css の変数を使う。
   読み込み順： base_pc → base_smp → menu → theme → page → ページ固有 */

/* ページ見出しの帯 */
.page_head {
  background: var(--c-sand-100);
  border-bottom: 1px solid var(--c-line);
}
.page_head_inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 26px 20px 48px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.2rem;
  letter-spacing: .04em;
  color: var(--c-ink-45);
}
.breadcrumb li + li::before {
  content: "／";
  margin: 0 .6em;
  color: var(--c-line);
}
.breadcrumb a:link,
.breadcrumb a:visited { color: var(--c-ink-45); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-terra-600); text-decoration: underline; text-underline-offset: .3em; }

.page_head_en {
  margin: 32px 0 12px;
  font-family: var(--f-en);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--c-terra-600);
}
.page_head_ttl {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 4rem;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--c-navy-900);
  word-break: auto-phrase;
}
.page_head_ttl::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin-top: 24px;
  background: var(--c-navy-600);
}
.page_head_lead {
  max-width: 58em;
  margin-top: 22px;
  font-size: 1.5rem;
  line-height: 2.05;
  color: var(--c-ink-70);
  word-break: auto-phrase;
}

/* グローバルナビの現在地 */
@media print, screen and (min-width: 769px) {
  ul.dropmenu > li > a[aria-current="page"] {
    background-color: var(--c-nav-divider);
    color: var(--c-navy-900);
  }
}
@media only screen and (max-width: 768px) {
  ul.dropmenu > li > a[aria-current="page"] { color: var(--c-terra-600); }
}

/* 本文の器 */
.page_inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* セクション見出し */
.sec_head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
}
.sec_ttl {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--c-navy-900);
  word-break: auto-phrase;
}
.sec_en {
  display: block;
  margin-bottom: 10px;
  font-family: var(--f-en);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--c-terra-600);
}
.sec_note {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1.3rem;
  letter-spacing: .06em;
  color: var(--c-ink-45);
}
.sec_note b {
  margin-right: .25em;
  font-family: var(--f-sans);
  font-size: 2rem;
  font-weight: 500;
  font-feature-settings: normal;
  color: var(--c-navy-800);
}
.sec_lead {
  max-width: 62em;
  margin-top: 20px;
  font-size: 1.45rem;
  line-height: 2;
  color: var(--c-ink-70);
  word-break: auto-phrase;
}

/* カード */
.card_face {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card_face:link,
.card_face:visited,
.card_face:active { color: var(--c-ink); text-decoration: none; }
.card_face:hover {
  opacity: 1;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  border-color: var(--c-line);
}
.card_face:focus-visible { outline: 2px solid var(--c-terra-500); outline-offset: 3px; }

/* 矢印。付けたい要素に .arrow を足す。位置は --arrow-right で調整。
   穂先は右端が回転軸なので、横線と同じ top に置くこと */
.arrow { position: relative; }
.arrow::before,
.arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--arrow-right, 16px);
  height: 1px;
  background: var(--c-terra-500);
  transition: transform .28s var(--ease);
}
.arrow::before { width: 16px; }
.arrow::after {
  width: 7px;
  transform: rotate(45deg);
  transform-origin: right center;
}
.arrow:hover::before { transform: translateX(4px); }
.arrow:hover::after { transform: translateX(4px) rotate(45deg); }

/* 長い名称が語の途中で切れるのを避ける */
.jp_wrap {
  word-break: auto-phrase;
  line-break: strict;
}

/* hidden を display 指定より優先させる */
[hidden] { display: none !important; }

/* スマートフォン */
@media only screen and (max-width: 768px) {
  .page_head_inner { padding: 18px 20px 34px; }
  .breadcrumb ol { font-size: 1.1rem; }
  .page_head_en { margin: 22px 0 10px; font-size: 1.15rem; }
  .page_head_ttl { font-size: 2.5rem; }
  .page_head_ttl::after { margin-top: 18px; }
  .page_head_lead { margin-top: 18px; font-size: 1.4rem; line-height: 1.95; }

  .page_inner { padding: 0 16px; }

  .sec_head { display: block; padding-bottom: 12px; }
  .sec_ttl { font-size: 2.2rem; }
  .sec_en { margin-bottom: 8px; font-size: 1.1rem; }
  .sec_note { margin-top: 10px; text-align: right; }
  .sec_note b { font-size: 1.8rem; }
  .sec_lead { margin-top: 16px; font-size: 1.4rem; line-height: 1.95; }
}