@charset "UTF-8";

/**************************************
 * file: common.css
 * brief: 共通スタイル
 *
 * 各ページで共通して使用するCSS。
 * 色，フォント，基本レイアウト，ヘッダー，タイトル，
 * 共通本文カード，共通UI部品，見出し，定義リスト，フッター，
 * レスポンシブ対応を管理する。
 **************************************/

/* Web フォント
   英数字には Lato，日本語には Noto Sans JP を主に使用する */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;500;700&display=swap");

/* =========================================================
   調整用変数
   PC表示・タブレット表示・スマホ表示の調整は主にここで行う
========================================================= */

:root {
    /* 共通カラー：参照画像のオリーブ・黄緑・クリーム */
    --hokudai-green: #6f7d19;
    --hokudai-green-dark: #556633;
    --hokudai-green-light: #dee3a3;
    --hokudai-leaf: #96a621;
    --hokudai-paper: #ffffff;
    --hokudai-ink: #333333;
    --hokudai-muted: #6f7357;
    --hokudai-border: #e8d6b5;

    /* 参照画像から抽出した補助色 */
    --common-white: #ffffff;
    --common-olive-bar: #96a621;
    --common-accent-lime: #cde32d;
    --common-cream: #e8d6b5;
    --common-cream-light: #f7f1e4;
    --common-page-bg-middle: var(--common-cream);
    --common-title-light-color: #4a4a3d;
    --common-footer-text-color: rgba(255, 255, 255, 0.82);
    --common-footer-muted-color: rgba(255, 255, 255, 0.7);
    --common-footer-link-color: var(--hokudai-green-light);
    --common-important-color: #a5402c;
    --common-soft-border-color: #d8c69f;

    /* 共通transition・hover */
    --common-transition-fast: 0.2s ease;
    /* ボタン類はホバー時に色だけ変更し、上下には移動させない */
    --common-hover-lift-card-y: -3px;

    /* 共通フレーム角丸
       カード，ボタン，アイコンなど枠を持つ要素で使用する */
    --common-frame-radius-large: 0.6rem;
    --common-frame-radius-medium: 0.4rem;
    --common-frame-radius-small: 0.25rem;

    /* 共通グリーンボタン（小さな角丸） */
    --common-pill-button-margin: 0;
    --common-pill-button-padding-block: 0.8rem;
    --common-pill-button-padding-inline: 1.4rem;
    --common-pill-button-radius: var(--common-frame-radius-small);
    --common-pill-button-font-size: 1.5rem;
    --common-pill-button-line-height: 1.4;

    /* 共通セクションカード */
    --common-section-card-padding-block: 2.4rem;
    --common-section-card-padding-inline: 2.4rem;
    --common-section-card-radius: var(--common-frame-radius-large);
    --common-section-card-bg: var(--common-cream-light);

    /* 共通半透明パネル */
    --common-panel-border-color: var(--hokudai-border);
    --common-panel-radius: var(--common-frame-radius-large);
    --common-panel-bg: var(--common-white);
    --common-panel-shadow: none;
    --common-panel-backdrop-filter: blur(12px);

    /* 共通線付き見出し */
    --common-icon-heading-margin-bottom: 1rem;
    --common-icon-heading-padding-bottom: 0.3rem;
    --common-icon-heading-padding-left: 0.9rem;
    --common-icon-heading-border-left-width: 3px;
    --common-icon-heading-border-bottom-width: 1px;
    --common-icon-heading-font-size: 2.4rem;
    --common-icon-heading-line-height: 1.4;
    --common-icon-heading-letter-spacing: 0.06em;
    /* 見出し左線の外側から、見出し本文の先頭文字までの距離 */
    --common-icon-heading-content-indent:
        calc(var(--common-icon-heading-border-left-width) + var(--common-icon-heading-padding-left));

    /* PC表示：全体幅・基本文字 */
    --site-width: 112rem;
    --site-side-space: 4rem;
    --common-body-font-size: 1.6rem;
    --common-body-line-height: 1.8;
    --common-body-letter-spacing: 0.02em;

    /* PC表示：ヘッダー */
    --common-header-link-font-size: 1.4rem;
    --common-header-link-font-weight: 600;
    --common-header-padding-top: 1.4rem;
    --common-header-padding-bottom: 0.5rem;
    --common-header-accent-height: 0.8rem;
    --common-header-list-row-gap: 0.8rem;
    --common-header-list-column-gap: 1.4rem;
    --common-header-title-gap: 0.9rem;

    /* PC表示：タイトルカード */
    --common-title-container-margin-top: var(--common-header-title-gap);
    --common-title-container-margin-bottom: 1.4rem;
    --common-title-padding-block: 2.4rem;
    /* 全幅タイトル帯の文字を、本文レイアウトの左端に揃える */
    --common-title-padding-inline: max(2rem, calc(50% - 56rem));
    --common-title-font-size: 3rem;
    --common-title-line-height: 1.2;
    --common-title-letter-spacing: 0.06em;
    --common-title-subcopy-font-size: 3rem;
    --common-subtitle-margin-top: 0.8rem;
    --common-subtitle-font-size: 2rem;
    --common-subtitle-letter-spacing: 0.06em;

    /* PC表示：横並びリスト・本文内余白 */
    --common-horizontal-list-row-gap: 0.8rem;
    --common-horizontal-list-column-gap: 1.4rem;
    --common-content-inner-padding-left: 4rem;

    /* PC表示：グローバルナビ */
    --common-global-nav-margin-bottom: 1.6rem;
    --common-global-nav-list-padding: 0;
    --common-global-nav-list-radius: var(--common-frame-radius-small);
    --common-global-nav-font-size: 1.4rem;
    --common-global-nav-line-height: 1.5;
    --common-global-nav-link-padding-block: 1rem;
    --common-global-nav-link-padding-inline: 1.8rem;
    --common-global-nav-divider-color: #788619;

    /* PC表示：本文カード */
    --common-content-area-margin-bottom: 5.6rem;
    --common-content-area-padding: 3.4rem;
    --common-content-area-radius: var(--common-frame-radius-large);
    --common-main-font-size: 1.6rem;
    --common-main-line-height: 1.8;
    --common-section-margin-top: 4.4rem;
    --common-paragraph-margin-bottom: 1.1em;
    --common-list-padding-left: 1.5em;
    --common-list-item-margin-bottom: 0.45em;

    /* PC表示：見出し */
    --common-second-heading-margin-top: 3.2rem;
    --common-second-heading-padding-left: 1rem;
    --common-second-heading-border-left-width: 5px;
    --common-second-heading-font-size: 1.8rem;
    --common-second-heading-line-height: 1.4;
    --common-third-heading-font-size: 1.6rem;
    --common-third-heading-line-height: 1.4;

    /* PC表示：定義リスト */
    --common-definition-list-row-gap: 1rem;
    --common-definition-list-column-gap: 1.8rem;
    --common-definition-list-padding: 2.2rem;
    --common-definition-list-radius: var(--common-frame-radius-medium);
    --common-conference-info-list-padding-left: 1.2em;
    --common-conference-info-list-item-margin-bottom: 0.12em;
    --common-conference-info-list-item-line-height: 1.6;

    /* PC表示：フッター */
    --common-footer-padding-top: 3rem;
    --common-footer-padding-inline: 2rem;
    --common-footer-padding-bottom: 1.4rem;
    --common-footer-nav-row-gap: 1rem;
    --common-footer-nav-column-gap: 2.4rem;
    --common-footer-nav-margin-bottom: 1.8rem;
    --common-browser-note-font-size: 1.3rem;
    --common-browser-note-line-height: 1.7;
    --common-copyright-margin-top: 1rem;
    --common-copyright-font-size: 1.3rem;
    --common-footer-logo-size: 3rem;
    --common-footer-logo-invert: 1;
}

/* =========================================================
   Breakpoints
   このサイトでは以下の基準でレスポンシブ対応する。

   基本スタイル   : 835px以上
   タブレット表示 : 834px以下
   スマホ表示     : 600px以下

   画面幅を指定するメディアクエリは 834px と 600px の2種類だけを用いる。
========================================================= */

/* ==============================
   Base / Reset
   ブラウザ間の初期スタイル差を抑える基本設定
============================== */

html {
    box-sizing: border-box;
    min-width: 0;
    overflow-y: scroll;
    background-color: var(--hokudai-green-dark);
    font-size: 62.5%;
    line-height: 1.2;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    color: var(--hokudai-ink);
    background: var(--common-page-bg-middle);
    font-family:
        "Lato",
        "Noto Sans JP",
        "Yu Gothic Medium",
        "Yu Gothic",
        YuGothic,
        "Hiragino Kaku Gothic ProN",
        Meiryo,
        sans-serif;
    font-size: var(--common-body-font-size);
    line-height: var(--common-body-line-height);
    letter-spacing: var(--common-body-letter-spacing);
}

h1 {
    margin: 0.67em 0;
    font-size: 2em;
}

a {
    color: var(--hokudai-green);
    background-color: transparent;
    transition:
        color var(--common-transition-fast),
        background-color var(--common-transition-fast),
        opacity var(--common-transition-fast),
        box-shadow var(--common-transition-fast),
        transform var(--common-transition-fast);
}

a:hover {
    color: var(--hokudai-green-dark);
}

small {
    font-size: 80%;
}

img {
    border-style: none;
}

/* ==============================
   Layout
   ページ幅・横並びリスト・本文余白などの共通部品
============================== */

.layout-container,
.site-header__utility-nav,
.site-header__nav,
.global-nav,
.page-layout,
.site-footer__nav-list,
.site-footer__copyright {
    width: min(var(--site-width), calc(100% - var(--site-side-space)));
    margin-left: auto;
    margin-right: auto;
}

.horizontal-list,
.horizontal-list--end {
    display: flex;
    gap:
        var(--common-horizontal-list-row-gap) var(--common-horizontal-list-column-gap);
    padding: 0;
}

.horizontal-list {
    flex-direction: row;
    justify-content: space-around;
}

.horizontal-list--end {
    flex-flow: row wrap;
    justify-content: flex-end;
}

.text-spacing>*:not(h1):not(h2):not(h3):not(h4) {
    margin-left: 0;
    margin-right: 0;
}

.content-inner {
    padding-left: var(--common-content-inner-padding-left);
}

.content-inner h4 {
    color: var(--hokudai-green);
}

/* ==============================
   Header
   ページ上部の共通ヘッダー
============================== */

.site-header {
    border-top: none;
    background: var(--common-cream);
}

.site-header::before {
    content: "";
    display: block;
    height: var(--common-header-accent-height);
    background: var(--hokudai-green-dark);
}

.site-header__utility-nav,
.site-header__nav {
    padding:
        var(--common-header-padding-top) 0 var(--common-header-padding-bottom);
    background-color: transparent;
    font-size: var(--common-header-link-font-size);
}

.site-header__utility-list,
.site-header__nav-list {
    display: flex;
    flex-flow: row wrap;
    gap:
        var(--common-header-list-row-gap) var(--common-header-list-column-gap);
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header__utility-item,
.site-header__nav-item {
    margin: 0;
    color: var(--hokudai-muted);
    text-align: right;
}

.site-header__utility-item {
    flex: 0 0 auto;
}

.site-header__utility-link,
.site-header__nav-link {
    color: var(--hokudai-green-dark);
    font-size: var(--common-header-link-font-size);
    font-weight: var(--common-header-link-font-weight);
    letter-spacing: 0.04em;
    text-decoration: none;
}

.site-header__utility-link {
    white-space: nowrap;
}

.site-header__utility-link:hover,
.site-header__utility-link:focus,
.site-header__nav-link:hover,
.site-header__nav-link:focus {
    color: var(--hokudai-green-dark);
    text-decoration: underline;
}

.site-header__utility-link--current {
    color: var(--hokudai-muted);
}

/* ==============================
   Hero title
   ページタイトルカード
============================== */

.site-header__title-container {
    width: 100%;
    max-width: none;
    margin-top: var(--common-title-container-margin-top);
    margin-right: 0;
    margin-bottom: var(--common-title-container-margin-bottom);
    margin-left: 0;
    padding: 0;
    border-bottom: none;
    background-color: transparent;
    color: var(--hokudai-ink);
}

.site-header__title {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding:
        var(--common-title-padding-block) var(--common-title-padding-inline);
    border-radius: 0;
    color: var(--hokudai-ink);
    background: var(--hokudai-green-light);
    box-shadow: none;
    font-size: var(--common-title-font-size);
    font-weight: 700;
    line-height: var(--common-title-line-height);
    letter-spacing: var(--common-title-letter-spacing);
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.site-header__title::before {
    content: none;
}

.site-header__title-subcopy {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: var(--common-title-subcopy-font-size);
    white-space: nowrap;
}

.site-header__subtitle {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: var(--common-subtitle-margin-top);
    color: var(--common-title-light-color);
    font-size: var(--common-subtitle-font-size);
    font-weight: normal;
    letter-spacing: var(--common-subtitle-letter-spacing);
    white-space: normal;
}

/* ==============================
   Global navigation
   サイト内の主要ページへ移動するナビゲーション
============================== */

.global-nav {
    margin-bottom: var(--common-global-nav-margin-bottom);
    border: none;
}

.global-nav .global-nav__list {
    --common-panel-border-color: var(--common-global-nav-divider-color);
    --common-panel-radius: var(--common-global-nav-list-radius);
    --common-panel-bg: var(--common-olive-bar);
    --common-panel-shadow: none;
    --common-panel-backdrop-filter: none;

    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    /* horizontal-list の共通間隔を打ち消し、ナビ項目を隙間なく並べる */
    gap: 0;
    margin: 0;
    padding: var(--common-global-nav-list-padding);
    overflow: hidden;
    border: 1px solid var(--common-global-nav-divider-color);
    border-radius: var(--common-global-nav-list-radius);
    background: var(--common-olive-bar);
    box-shadow: none;
    font-size: var(--common-global-nav-font-size);
    line-height: var(--common-global-nav-line-height);
}

.global-nav__item {
    display: flex;
    /* 通常は等幅。項目名が収まらない場合だけ、その文字列幅まで広げる */
    flex: 1 1 0;
    min-width: max-content;
    border: none;
    border-right: 1px solid var(--common-global-nav-divider-color);
    text-align: center;
}

.global-nav__item:last-child {
    border-right: none;
}

/* リンクを持たない空のナビ項目はレイアウトから除外する */
.global-nav__item:not(:has(> .global-nav__link)) {
    display: none;
}

.global-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding:
        var(--common-global-nav-link-padding-block) var(--common-global-nav-link-padding-inline);
    background-color: var(--common-olive-bar);
    color: var(--common-white);
    font-size: var(--common-global-nav-font-size);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.global-nav__link:hover,
.global-nav__link:focus {
    color: var(--hokudai-ink);
    background-color: var(--common-accent-lime);
}

.global-nav__link--current {
    color: var(--hokudai-ink);
    background: var(--common-accent-lime);
    box-shadow: none;
}

.global-nav__link--current:hover,
.global-nav__link--current:focus {
    color: var(--hokudai-ink);
    background: var(--common-accent-lime);
    box-shadow: none;
    text-decoration: none;
}

/* ==============================
   Main contents
   本文全体のカード・本文・リスト
============================== */

.content-area,
.main-content {
    margin-bottom: var(--common-content-area-margin-bottom);
    padding: var(--common-content-area-padding);
    border: 1px solid var(--hokudai-border);
    border-radius: var(--common-content-area-radius);
    background: var(--hokudai-paper);
}

.top-main,
.program-main,
.photo-main,
.contact-main,
.banquet-main,
.index-main {
    font-size: var(--common-main-font-size);
    line-height: var(--common-main-line-height);
}

.top-section,
.program-main__section,
.photo-main__section,
.contact-main__section,
.banquet-main__section,
.index-section {
    /*
     * 最後の本文要素のマージンが外側へ折りたたまれないようにし、
     * 「内容の最終行 → 次の項目タイトル」の間隔を全ページで揃える。
     */
    display: flow-root;
    margin-top: var(--common-section-margin-top);
}

.top-section:first-of-type,
.program-main__section:first-of-type,
.photo-main__section:first-of-type,
.contact-main__section:first-of-type,
.banquet-main__section:first-of-type,
.index-section:first-of-type {
    margin-top: 0;
}

/* 各項目の末尾要素が持つ余白は消し、次の見出しまでの間隔を共通変数だけで管理する */
.top-section > :last-child,
.program-main__section > :last-child,
.photo-main__section > :last-child,
.contact-main__section > :last-child,
.banquet-main__section > :last-child,
.index-section > :last-child {
    margin-bottom: 0;
}

.top-section p,
.program-main__section p,
.photo-main__section p,
.contact-main__section p,
.banquet-main__section p,
.index-section p,
.index-section__text {
    margin-top: 0.5rem;
    margin-bottom: var(--common-paragraph-margin-bottom);
}

.top-section a,
.program-main__section a,
.photo-main__section a,
.contact-main__section a,
.banquet-main__section a,
.main-content a {
    color: var(--hokudai-green);
    font-weight: 700;
}

.top-section a:hover,
.program-main__section a:hover,
.photo-main__section a:hover,
.contact-main__section a:hover,
.banquet-main__section a:hover,
.main-content a:hover,
.main-content a:focus {
    color: var(--hokudai-green-dark);
}

.top-section ol,
.top-section ul,
.program-main__section ol,
.program-main__section ul,
.photo-main__section ol,
.photo-main__section ul,
.contact-main__section ol,
.contact-main__section ul,
.banquet-main__section ol,
.banquet-main__section ul,
.index-section ol,
.index-section ul {
    padding-left: var(--common-list-padding-left);
}

.top-section li,
.program-main__section li,
.photo-main__section li,
.contact-main__section li,
.banquet-main__section li,
.index-section li {
    margin-bottom: var(--common-list-item-margin-bottom);
}

/* ==============================
   Common components
   複数ページで共通して使うUI部品
============================== */

/* Cross-page base styles
   複数ページで同じ役割を持つ要素の初期化をここに集約する。 */
.contact-page .contact-main,
.photo-page .photo-main,
.top-page .conference-info,
.contact-page .conference-info {
    border: none;
}

.contact-page .contact-anchor-nav__list,
.photo-page .photo-gallery,
.program-tabs__menu,
.index-page .side-menu__list,
.index-page .past-events,
.photo-slider__item,
.photo-slider .splide__pagination {
    list-style: none;
}

.contact-page .contact-anchor-nav__link,
.photo-page .photo-gallery__link,
.index-page .side-menu__link,
.index-page .past-events__link {
    text-decoration: none;
}

.photo-page .photo-gallery__image,
.photo-slider__image {
    display: block;
    width: 100%;
}

.program-search__button,
.program-tabs__tab,
.program-matrix__abstract-button,
.abstract-modal__close,
.photo-slider .splide__arrow,
.photo-slider .splide__pagination__page {
    cursor: pointer;
}

/* Translucent panel
   HTMLでは common-panel を明示し、JavaScript生成要素などだけ補助セレクタを使う。 */
.common-panel,
.program-page .program-tabs__menu,
.index-page .side-menu {
    border: 1px solid var(--common-panel-border-color);
    border-radius: var(--common-panel-radius);
    background: var(--common-panel-bg);
    box-shadow: var(--common-panel-shadow);
    backdrop-filter: var(--common-panel-backdrop-filter);
}

/* Status message
   読み込み中・空状態・エラー表示の共通文字スタイル */
.common-status-message,
.program-tabs__error-message,
.photo-page .photo-gallery:empty::before,
.photo-page .photo-gallery__message {
    color: var(--hokudai-muted);
    font-weight: 700;
}

.common-status-message--error,
.program-tabs__error-message {
    color: var(--common-important-color);
}

/* Green button
   フォームリンク，PDFリンク，ダウンロードリンクなどに使う小角丸ボタン */
.common-pill-button,
.index-page .index-section__latest-button {
    display: inline-block;
    margin: var(--common-pill-button-margin);
    padding:
        var(--common-pill-button-padding-block) var(--common-pill-button-padding-inline);
    border-radius: var(--common-pill-button-radius);
    background: var(--hokudai-green);
    color: var(--common-white);
    font-size: var(--common-pill-button-font-size);
    font-weight: 700;
    line-height: var(--common-pill-button-line-height);
    text-align: center;
    text-decoration: none;
}

.common-pill-button:hover,
.common-pill-button:focus,
.index-page .index-section__latest-button:hover,
.index-page .index-section__latest-button:focus {
    background: var(--hokudai-green-dark);
    color: var(--common-white);
}

/* Section card
   ページ内で複数並ぶ案内カード用 */
.common-section-card {
    padding:
        var(--common-section-card-padding-block) var(--common-section-card-padding-inline);
    border: 1px solid var(--hokudai-border);
    border-radius: var(--common-section-card-radius);
    background: var(--common-section-card-bg);
}

/* Hover lift
   少し浮かせる共通ホバー演出 */
.common-hover-lift {
    transition: box-shadow var(--common-transition-fast);
}

.common-hover-lift-card {
    transition:
        transform var(--common-transition-fast),
        box-shadow var(--common-transition-fast),
        border-color var(--common-transition-fast),
        background var(--common-transition-fast);
}

.common-hover-lift-card:hover,
.common-hover-lift-card:focus {
    transform: translateY(var(--common-hover-lift-card-y));
}

/* ==============================
   Headings
   共通見出しデザイン
============================== */

.common-icon-heading,
.top-section__title,
.program-header__title,
.photo-main__title,
.contact-main__title,
.banquet-main__title,
.index-section__title,
.contact-page .contact-section__title {
    display: block;
    margin: 0 0 var(--common-icon-heading-margin-bottom);
    padding:
        0 0 var(--common-icon-heading-padding-bottom)
        var(--common-icon-heading-padding-left);
    border-left:
        var(--common-icon-heading-border-left-width)
        solid
        var(--common-olive-bar);
    border-bottom:
        var(--common-icon-heading-border-bottom-width)
        solid
        var(--common-olive-bar);
    background: transparent;
    color: var(--common-olive-bar);
    font-size: var(--common-icon-heading-font-size);
    font-weight: 700;
    line-height: var(--common-icon-heading-line-height);
    letter-spacing: var(--common-icon-heading-letter-spacing);
}


/* Section text alignment
   各項目の本文先頭を、左線付き見出しの先頭文字に揃える。
   表・カード・ギャラリーなど独自の内側余白を持つ部品は対象外とする。 */
.top-page .top-section > p,
.top-page .top-section > .update-info,
.program-page .program-header__text > :not(.program-header__title),
.program-page .program-main__section > p,
.photo-page .photo-main__section > p,
.contact-page .contact-main__section > p,
.contact-page .contact-section > p,
.banquet-page .banquet-main__section > p,
.index-page .index-section > p,
.index-page .index-section > .index-section__text {
    margin-left: var(--common-icon-heading-content-indent);
}

.contact-section__title {
    margin-top: var(--common-second-heading-margin-top);
    padding-left: var(--common-second-heading-padding-left);
    border-left: solid var(--common-second-heading-border-left-width) var(--common-olive-bar);
    border-bottom: solid 1px var(--common-olive-bar);
    color: var(--common-olive-bar);
    font-size: var(--common-second-heading-font-size);
    font-weight: 700;
    line-height: var(--common-second-heading-line-height);
}

.third-heading {
    font-size: var(--common-third-heading-font-size);
    line-height: var(--common-third-heading-line-height);
}

/* ==============================
   Definition list
   更新履歴・研究集会情報などの定義リスト
============================== */

.update-history,
.conference-info {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap:
        var(--common-definition-list-row-gap) var(--common-definition-list-column-gap);
    margin: 0;
    padding: var(--common-definition-list-padding);
    border: 1px solid var(--common-soft-border-color);
    border-radius: var(--common-definition-list-radius);
    background: var(--common-cream-light);
}


.update-history__date,
.conference-info__term {
    margin: 0;
    color: var(--hokudai-green);
    font-weight: 700;
    white-space: nowrap;
}

.update-history__description,
.conference-info__description {
    margin: 0;
    color: var(--hokudai-ink);
}

.conference-info__description ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: var(--common-conference-info-list-padding-left);
}

.conference-info__description li {
    margin-bottom: var(--common-conference-info-list-item-margin-bottom);
    line-height: var(--common-conference-info-list-item-line-height);
}

.conference-info__contact-address {
    font-style: normal;
    overflow-wrap: anywhere;
}

/* ==============================
   Utility
   汎用的に使う補助クラス
============================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.text-break {
    overflow-wrap: anywhere;
}

.text-important {
    color: var(--common-important-color);
    font-weight: 700;
}

.text-green {
    color: var(--hokudai-green);
}

/* ==============================
   Footer
   ページ下部のフッター
============================== */

.site-footer {
    padding:
        var(--common-footer-padding-top) var(--common-footer-padding-inline) var(--common-footer-padding-bottom);
    background: var(--hokudai-green-dark);
    color: var(--common-footer-text-color);
}

.site-footer p {
    margin-top: 0;
}

.site-footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:
        var(--common-footer-nav-row-gap) var(--common-footer-nav-column-gap);
    margin-bottom: var(--common-footer-nav-margin-bottom);
    padding: 0;
    list-style: none;
}

.site-footer a,
.site-footer__nav-link,
.site-footer__copyright-link {
    color: var(--common-footer-link-color);
    font-weight: 700;
    text-decoration: none;
}

.site-footer__nav-link {
    color: var(--common-white);
}

.site-footer a:hover,
.site-footer__nav-link:hover,
.site-footer__nav-link:focus,
.site-footer__copyright-link:hover,
.site-footer a:focus,
.site-footer__copyright-link:focus {
    color: var(--common-white);
    text-decoration: underline;
}


.site-footer__browser-note {
    color: var(--common-footer-muted-color);
    font-size: var(--common-browser-note-font-size);
    line-height: var(--common-browser-note-line-height);
    text-align: center;
}

.site-footer__copyright {
    margin-top: var(--common-copyright-margin-top);
    color: var(--common-footer-muted-color);
    font-size: var(--common-copyright-font-size);
    text-align: center;
}

.site-footer__copyright-text {
    color: var(--common-footer-muted-color);
    font-size: var(--common-copyright-font-size);
}

.site-footer__logo {
    width: var(--common-footer-logo-size);
    height: auto;
    vertical-align: middle;
    filter: invert(var(--common-footer-logo-invert));
}

/* ==============================
   Reduced motion
   OS・ブラウザで「動きを減らす」が有効な場合の共通設定
============================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

/* ==============================
   タブレット表示設定
   834px以下で上書きされる変数・表示調整
============================== */

@media screen and (max-width: 834px) {
    :root {
        /* 全体幅・基本文字 */
        --site-side-space: 2.8rem;
        --common-body-font-size: 1.5rem;

        /* 共通フレーム角丸 */
        --common-frame-radius-large: 0.55rem;
        --common-frame-radius-medium: 0.35rem;
        --common-frame-radius-small: 0.22rem;

        /* 共通セクションカード */
        --common-section-card-padding-block: 2.2rem;
        --common-section-card-padding-inline: 2rem;

        /* 共通線付き見出し */
        --common-icon-heading-font-size: 2.2rem;

        /* ヘッダー */
        --common-header-padding-top: 1.2rem;
        --common-header-title-gap: 0.8rem;

        /* タイトルカード */
        --common-title-padding-block: 2.8rem;
        --common-title-padding-inline: max(1.4rem, calc(50% - 56rem));
        --common-title-font-size: 2.8rem;
        --common-title-line-height: 1.3;
        --common-title-letter-spacing: 0.04em;
        --common-title-subcopy-font-size: 2.8rem;
        --common-subtitle-font-size: 1.9rem;

        /* グローバルナビ */

        /* 本文カード */
        --common-content-area-padding: 2.4rem 1.8rem;
        --common-main-font-size: 1.5rem;

        /* 見出し */
        --common-second-heading-font-size: 1.7rem;
        --common-third-heading-font-size: 1.5rem;

        /* 定義リスト */
        --common-definition-list-row-gap: 0.4rem;
        --common-definition-list-column-gap: 0;
        --common-definition-list-padding: 1.8rem;
        --common-definition-term-margin-top: 1rem;
    }

    .global-nav .global-nav__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        background: var(--common-global-nav-divider-color);
    }

    .global-nav__item,
    .global-nav__item:last-child {
        border-right: none;
    }

    .global-nav__link {
        white-space: normal;
    }

    .update-history,
    .conference-info {
        grid-template-columns: 1fr;
    }

    .update-history__date,
    .conference-info__term {
        margin-top: var(--common-definition-term-margin-top);
    }

    .update-history__date:first-child,
    .conference-info__term:first-child {
        margin-top: 0;
    }
}

/* ==============================
   スマホ表示設定
   600px以下で上書きされる変数・表示調整
============================== */

@media screen and (max-width: 600px) {
    :root {
        /* 全体幅・基本文字 */
        --site-side-space: 2rem;
        --common-body-font-size: 1.4rem;
        --common-body-line-height: 1.7;

        /* 共通フレーム角丸 */
        --common-frame-radius-large: 0.45rem;
        --common-frame-radius-medium: 0.3rem;
        --common-frame-radius-small: 0.18rem;

        /* 共通ボタン */
        --common-pill-button-padding-inline: 1.2rem;
        --common-pill-button-font-size: 1.4rem;

        /* 共通セクションカード */
        --common-section-card-padding-block: 2rem;
        --common-section-card-padding-inline: 1.4rem;

        /* 共通線付き見出し */
        --common-icon-heading-padding-left: 0.8rem;
        --common-icon-heading-font-size: 2rem;

        /* ヘッダー */
        --common-header-link-font-size: 1.3rem;
        --common-header-list-row-gap: 0.6rem;
        --common-header-list-column-gap: 1rem;
        --common-header-title-gap: 1.2rem;

        /* タイトルカード */
        --common-title-container-margin-bottom: 1.2rem;
        --common-title-padding-block: 2.2rem;
        --common-title-padding-inline: max(1rem, calc(50% - 56rem));
        --common-title-font-size: 2.5rem;
        --common-title-line-height: 1.4;
        --common-title-subcopy-font-size: 2.5rem;
        --common-subtitle-margin-top: 0.7rem;
        --common-subtitle-font-size: 1.8rem;
        --common-subtitle-letter-spacing: 0.04em;

        /* 横並びリスト・本文内余白 */
        --common-content-inner-padding-left: 0;

        /* グローバルナビ */
        --common-global-nav-margin-bottom: 1.4rem;
        --common-global-nav-link-padding-block: 0.9rem;
        --common-global-nav-link-padding-inline: 1.2rem;

        /* 本文カード */
        --common-content-area-margin-bottom: 4rem;
        --common-content-area-padding: 2rem 1.5rem;
        --common-main-font-size: 1.4rem;
        --common-section-margin-top: 3.6rem;

        /* 見出し */
        --common-second-heading-margin-top: 2.8rem;
        --common-second-heading-font-size: 1.6rem;
        --common-third-heading-font-size: 1.4rem;

        /* 定義リスト */
        --common-definition-list-padding: 1.6rem;

        /* フッター */
        --common-footer-padding-top: 2.8rem;
        --common-footer-padding-inline: 1.6rem;
        --common-browser-note-font-size: 1.2rem;
        --common-copyright-font-size: 1.2rem;
        --common-footer-logo-size: 2.8rem;
    }

    .horizontal-list {
        flex-direction: column;
    }

    .site-header__utility-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* 長い所属名は独立した1行にし、画面幅内で折り返す */
    .site-header__utility-item:last-child {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .site-header__utility-item:last-child .site-header__utility-link {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .global-nav .global-nav__list {
        grid-template-columns: 1fr;
    }

    /* 共通ボタンをスマホ幅いっぱいに表示する */
    .common-pill-button--mobile-full {
        width: 100%;
        text-align: center;
    }
}