body {
    overflow-x: hidden;
}

/* Home-Top フレーム */
.home-top {
    width: 100%; /* 画面幅に合わせる */
    height: calc(99vw * 718 / 1920); /* 画面横幅 × 794.67 / 1280 の計算 */
    background-image: url("./Pic/math_Top.png"); /* 背景画像を指定 */
    background-size: cover; /* 画像がフレームいっぱいに拡大される */
    background-position: center center; /* 画像の中央をフレームの中央に配置 */
}

/* Home-Top-Header サブフレーム */
.home-top-header {
    margin-top: 0; /* 上の余白 0px */
    margin-left: 35px; /* 左の余白 35px */
    margin-right: 35px; /* 右の余白 35px */
    width: calc(98vw - 70px); /* 画面幅から左右の余白を引いた幅 */
    height: calc(
        98vw * 62 / 1210
    ); /* 高さは画面幅 × (画面幅 × 62 / 1210) の計算 */
    display: flex;
    justify-content: center; /* 中央揃え（横方向） */
    align-items: flex-start; /* 上揃え（縦方向） */
    overflow-x: hidden; /* 横スクロールバーを非表示に */
}

/* Home-Top-Header サブフレーム */
.home-top-header {
    margin-top: 0;
    margin-left: 35px;
    margin-right: 35px;
    width: calc(99vw - 70px); /* 左右の余白を引いた幅 */
    height: calc(99vw * 62 / 1140); /* 高さを計算 */
    display: flex;
    justify-content: flex-end; /* 右揃え */
    align-items: flex-end; /* 下揃え */
    gap: 11px;
    overflow-x: hidden;
}

.home-top-header .home-text {
    font-family: "Kaisotai", sans-serif;
    font-size: calc(21px + ((98vw - 800px) * 0.0416666667));
    color: black;
    text-decoration-thickness: 2px;
}

/* / は下線なし */
.home-top-header .home-text:not(a) {
    text-decoration: none; /* /のテキストに下線を引かない */
}

/* mediumも PC扱いで同じ　mobileは消す */
.home-top {
    display: flex;
}

.home-top-mobile {
    display: none;
}

/* 注釈フレーム */
.annotation-frame {
    width: 98vw; /* 画面幅と同じ幅 */
    height: 33px; /* 高さは33px */
    padding-left: 15px; /* 左の余白 15px */
    padding-right: 15px; /* 右の余白 15px */
    background-color: #f4f4f4; /* 背景色は適当（任意で変更） */
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    align-items: center; /* 上下中央寄せ */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}

/* 注釈フレーム内のリンクテキスト */
.annotation-frame a {
    font-family: "Makinas", sans-serif; /* フォント指定 */
    font-size: 16px; /* 適切な文字サイズ */
    text-decoration: underline; /* 下線を引く */
    color: #555555; /* 文字色は黒 */
}

/* Home-001 フレーム */
.home-001 {
    width: 98vw; /* 画面幅 */
    height: auto; /* 縦の高さは277px */
    padding-left: 44px; /* 左の余白 120px */
    padding-right: 44px; /* 右の余白 120px */
    margin-top: 25px; /* 上の余白 75px */
    margin-bottom: 24px; /* 下の余白 24px */
    display: flex;
    flex-direction: column; /* 上から順にコンテンツを並べる */
    align-items: flex-start; /* 左揃え */
    gap: 16px; /* コンテンツの間隔 16px */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}

/* Home-001 内のタイトルテキスト */
.home-001-title {
    font-family: "Makinas", sans-serif; /* フォント */
    font-size: 48px; /* フォントサイズ */
    color: black; /* 文字色 */
    line-height: 57.6px; /* 行間 (120%) */
    letter-spacing: -0.96px; /* 文字間隔 (-2%) */
}

/* Home-001 内のテキスト */
.home-001-text {
    font-family: "Makinas", sans-serif; /* フォント */
    font-size: 16px; /* フォントサイズ */
    color: rgba(0, 0, 0, 0.5); /* 透明度50%の黒色 */
    line-height: 26.1px; /* 行間 (145%) */
    letter-spacing: -0.09px; /* 文字間隔 (-2%) */
}

/* リンクの文字色をデフォルトのままにする */
.home-001-text a {
    color: inherit; /* 親要素の文字色を引き継ぐ */
}

/* リンクにホバー時の色変更を防ぐ */
.home-001-text a:hover {
    color: inherit; /* ホバー時も文字色は変更しない */
}

/* モバイルとPCの中間（タブレットサイズなど） */
.pc-content {
    display: block; /* 中くらいの画面ではPC用コンテンツを表示 */
}

.mobile-content {
    display: none; /* モバイル用コンテンツは非表示 */
}

/* 必要に応じて中画面サイズに合わせたスタイルを追加 */

.contents1 {
    width: 98vw; /* 画面幅に合わせる */
    padding-left: 44px; /* 左パディング 150px */
    padding-right: 44px; /* 右パディング 150px */
    padding-top: 0; /* 上パディング 0px */
    padding-bottom: 75px; /* 下パディング 75px */
    background-color: transparent; /* 塗りなし */
    box-sizing: border-box; /* パディングを含めたサイズに設定 */
}

/* Contents2 フレーム */
.contents2 {
    width: 100%; /* 親要素（コンテナ）の幅に合わせる */
    padding-top: 25px; /* 上パディング 25px */
    padding-bottom: 25px; /* 下パディング 25px */
    padding-left: 0; /* 左の余白 0px（上揃え） */
    background-color: transparent; /* 背景色なし（透明） */
    box-sizing: border-box; /* パディングを含めたサイズに設定 */
    display: flex;
    flex-direction: column; /* 上から順に縦並び */
    gap: 0; /* コンテンツ間の間隔 0px */
}

/* Contents3 フレーム */
.contents3 {
    width: 100%; /* 親要素（コンテナ）の幅に合わせる */
    padding: 0; /* パディングなし */
    display: flex;
    flex-direction: column; /* 上から下にコンテンツを並べる */
    gap: 24px; /* コンテンツ間の間隔 24px */
    background-color: transparent; /* 背景色なし（透明） */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}

/* content-title 初期状態（アニメーションは付けない） */
.content-title {
    width: 100%;
    padding-top: 7px;
    padding-bottom: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);

    /* 初期は見えない・下にずらす */
    opacity: 0;
    transform: translateY(75px);
    will-change: transform, opacity;
}

/* アニメーションクラスを付けたときに実行する（再生用） */
.content-title.animate {
    animation: fadeInUp 1500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* アニメーション定義（下から上へ、フェードイン） */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(75px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 作ったもののテキスト */
.content-title-left {
    font-family: "Makinas", sans-serif; /* フォント */
    font-size: 32px; /* フォントサイズ */
    color: #000000; /* 文字色 */
    line-height: 38.4px; /* 行間120% */
    letter-spacing: -0.64px; /* 文字間隔-2% */
    text-align: left; /* 左揃え */
}

/* デジタル創作のテキスト */
.content-title-right {
    font-family: "Makinas", sans-serif; /* フォント */
    font-size: 18px; /* フォントサイズ */
    color: rgba(0, 0, 0, 0.55); /* 文字色（55%透明度） */
    line-height: 26.1px; /* 行間145% */
    letter-spacing: -0.09px; /* 文字間隔-0.5% */
    text-align: right; /* 右揃え */
}

/* Gallery コンテナ */
.gallery {
    width: 100%;
    padding-left: 22px;
    padding-right: 45px;
    display: flex;
    flex-direction: column; /* ← これ追加で縦配置化 */
    justify-content: flex-start; /* 上揃え */
    align-items: center; /* 横中央揃え */
    gap: 32px; /* ほぼ絶対欲しい（横配置の時のgapの代わり） */

    opacity: 0; /* 初期状態は透明 */
    transform: translateY(100px);
    will-change: transform, opacity;
}

/* fadeInUp アニメーション */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(100px); /* 下から入る */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 元の位置に戻る */
    }
}

/* テキストのスタイル */
.gallery-text {
    width: calc(100%);
    font-size: 18px;
    line-height: 145%;
    letter-spacing: -0.5%;
    font-family: "Makinas", sans-serif;
    color: rgba(0, 0, 0, 0.55); /* 透明度55% */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 2100ms cubic-bezier(0.22, 1, 0.36, 1) forwards; /* アニメーション統一 */
}

/* 画像のスタイル */
.gallery-image {
    width: calc(65%);
    height: 50%;
    object-fit: contain;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 2100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.2s; /* 画像はテキストより少し遅れて表示 */
}

/* アニメーションをリセットするクラス */
.animate {
    animation: fadeInUp 2100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.gallery-video-frame {
    width: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    padding: 5px 0 15px 25px; /* 上, 右, 下, 左 */
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* 新しいの：枠本体 */
.gallery-video-shell {
    border-radius: 16px;
    background: linear-gradient(to bottom, #ffffff, #e4e4e4);
    padding: 5px;
    filter: drop-shadow(0 0 2px #000);
    width: 100%;
    max-width: 498px;
}

/* 既存のiframe stylingは内部 only */
.gallery-video-shell iframe {
    width: 100%;
    aspect-ratio: 425.5 / 240.1;
    max-height: 280px;
    background-color: black; /* これ参考元と同じ */
    border-radius: 11px;
    object-fit: contain;
}

.gallery-video-caption {
    text-align: center;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.5%;
    font-family: "Makinas", sans-serif;
    color: rgba(0, 0, 0, 0.55);
    margin-top: 8px;
}

/* テキストのスタイル */
.gallery-text-full {
    width: calc(100%);
    font-size: 18px;
    line-height: 145%;
    letter-spacing: -0.5%;
    font-family: "Makinas", sans-serif;
    color: rgba(0, 0, 0, 0.55); /* 透明度55% */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 2100ms cubic-bezier(0.22, 1, 0.36, 1) forwards; /* アニメーション統一 */
}

/* 写真コンテナ */
.photo-container {
    width: 100%; /* 親コンテナいっぱいに拡大 */
    display: flex;
    justify-content: center; /* 横方向中央揃え */
    gap: 32px; /* 写真の間隔 */
    flex-wrap: wrap; /* 幅が狭い場合は折り返す */
    box-sizing: border-box;
}

/* photo-item の角を四隅丸くする */
.photo-item {
    width: 47%; /* あなたの既存ルールを残す/調整するならここで */
    aspect-ratio: 426 / 240;
    object-fit: cover;
    border-radius: 12px; /* 四隅を丸くする */
    display: block;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03); /* optional：軽い影で浮かせる */
}

/* 全体ブロック */
.related-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 120px 35px 120px; /* 上 右 下 左 */
    gap: 40px; /* 上下の間隔を少し広げた（旧:32px） */
    box-sizing: border-box;
}

/* 説明部 */
.related-description {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    box-sizing: border-box;
}

.related-title {
    font-family: "Makinas", sans-serif;
    font-size: 48px;
    line-height: 120%;
    letter-spacing: -2%;
    color: #000000;
    text-align: left;
}

.related-subtitle {
    font-family: "Makinas", sans-serif;
    font-size: 20px;
    line-height: 145%;
    letter-spacing: -0.5%;
    color: rgba(0, 0, 0, 0.55);
    text-align: left;
}

/* リンクカード群（横並び） */
.related-link-card {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 40px; /* カード同士の左右・折り返し時の上下間隔を広げた（旧:32px） */
    align-items: flex-start;
    box-sizing: border-box;
}

/* カード本体（アニメーションを完全に取り除いた状態） */
.related-link-card-frame {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px; /* カード内要素の間隔はそのまま */
    padding: 32px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 16px;

    /* 常に表示される */
    opacity: 1;
    transform: none;
}

/* header（リンク領域） */
.related-link-card-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none; /* aの下線消す */
    color: inherit;
}

.related-link-card-header:hover {
    opacity: 0.75; /* 軽く反応 */
}

/* アイコン */
.related-card-icon1 {
    width: 52px;
    height: 36px;
    object-fit: contain;
}

.related-card-icon2 {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.related-card-icon3 {
    width: 48px; /* 修正: 48x -> 48px */
    height: 36px;
    object-fit: contain;
}

.related-card-icon4 {
    width: 72px;
    height: 48px;
    object-fit: contain;
}

.related-card-icon5 {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.related-card-icon6 {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* テキストフレーム */
.related-card-textframe {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.related-card-text1 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.5%;
    text-align: left;
}

.related-card-text2 {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: normal;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.5%;
    text-align: left;
}

/* 説明文 */
.related-card-desc {
    font-family: "Makinas", sans-serif;
    font-size: 18px;
    line-height: 145%;
    letter-spacing: -0.5%;
    text-align: left;
    color: rgba(0, 0, 0, 0.55);
}

.site-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 0 44px;
    box-sizing: border-box;
    position: relative; /* 必須 */
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 44px;
    right: 44px;
    height: 1px;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* brand block */
.footer-brand-block {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 40px 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.55);
}

.footer-brand-block-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 56px;
    align-items: flex-start; /* ← これだけ変える */
}

.footer-brand-textblock {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* ← ここも left に */
    gap: 8px;
    text-align: left; /* 明示 */
}

.footer-brand-title {
    font-family: "Kaisotai", sans-serif;
    font-size: 24px;
    line-height: 145%;
    letter-spacing: -2%;
    color: #000;
    text-align: center;
}

.footer-brand-subtitle {
    font-family: "Makinas", sans-serif;
    font-size: 16px;
    line-height: 145%;
    letter-spacing: -0.5%;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
}

.footer-brand-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.footer-link-icon1 {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.footer-link-icon2 {
    width: 34px;
    height: 24px;
    object-fit: contain;
}
.footer-link-icon3 {
    width: 32px;
    height: 24px;
    object-fit: contain;
}

/* nav block */

.footer-nav-block {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start; /* ← これで上詰め */
}

.footer-nav-col {
    width: 130px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
}

.footer-nav-col-header {
    width: 100%;
    padding-bottom: 16px;
    box-sizing: border-box;
}

.footer-nav-col-header a {
    font-family: "Makinas", sans-serif;
    font-size: 16px;
    line-height: 145%;
    letter-spacing: -0.5%;
    text-decoration: none;
    color: #000;
}

.footer-nav-item {
    font-family: "Makinas", sans-serif;
    font-size: 16px;
    line-height: 145%;
    letter-spacing: -0.5%;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.55);
}

/* 以下、Index用*/
/* 以下、Index用*/
/* 以下、Index用*/
/* 以下、Index用*/
/* 以下、Index用*/

/* Index-Top フレーム */
.Index-top {
    width: 100%; /* 画面幅に合わせる */
    height: calc(99vw * 482 / 1280); /* 画面横幅 × 794.67 / 1280 の計算 */
    background-image: url("./Pic/Index_Top.png"); /* 背景画像を指定 */
    background-size: cover; /* 画像がフレームいっぱいに拡大される */
    background-position: center center; /* 画像の中央をフレームの中央に配置 */
}

/* Index-Top-Header サブフレーム */
.Index-top-header {
    margin-top: 0; /* 上の余白 0px */
    margin-left: 35px; /* 左の余白 35px */
    margin-right: 35px; /* 右の余白 35px */
    width: calc(98vw - 70px); /* 画面幅から左右の余白を引いた幅 */
    height: calc(
        98vw * 62 / 1210
    ); /* 高さは画面幅 × (画面幅 × 62 / 1210) の計算 */
    display: flex;
    justify-content: center; /* 中央揃え（横方向） */
    align-items: flex-start; /* 上揃え（縦方向） */
    overflow-x: hidden; /* 横スクロールバーを非表示に */
}

/* Index-Top-Header サブフレーム */
.Index-top-header {
    margin-top: 0;
    margin-left: 35px;
    margin-right: 35px;
    width: calc(99vw - 70px); /* 左右の余白を引いた幅 */
    height: calc(99vw * 62 / 1140); /* 高さを計算 */
    display: flex;
    justify-content: flex-end; /* 右揃え */
    align-items: flex-end; /* 下揃え */
    gap: 11px;
    overflow-x: hidden;
}

.Index-top-header .Index-text {
    font-family: "Kaisotai", sans-serif;
    font-size: calc(21px + ((98vw - 800px) * 0.0416666667));
    color: black;
    text-decoration-thickness: 2px;
}

/* / は下線なし */
.Index-top-header .Index-text:not(a) {
    text-decoration: none; /* /のテキストに下線を引かない */
}

/* mediumも PC扱いで同じ　mobileは消す */
.Index-top {
    display: flex;
}

.Index-top-mobile {
    display: none;
}

/* 注釈フレーム */
.annotation-frame {
    width: 98vw; /* 画面幅と同じ幅 */
    height: 33px; /* 高さは33px */
    padding-left: 15px; /* 左の余白 15px */
    padding-right: 15px; /* 右の余白 15px */
    background-color: #f4f4f4; /* 背景色は適当（任意で変更） */
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    align-items: center; /* 上下中央寄せ */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}

/* 注釈フレーム内のリンクテキスト */
.annotation-frame a {
    font-family: "Makinas", sans-serif; /* フォント指定 */
    font-size: 16px; /* 適切な文字サイズ */
    text-decoration: underline; /* 下線を引く */
    color: #555555; /* 文字色は黒 */
}

/* ====== 記事リスト（横長カードを縦に並べる） ====== */
.article-list {
    width: 100%;
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 20px;
    box-sizing: border-box;
}

/* カード（リンク要素） */
.article-card {
    display: flex;
    flex-direction: row; /* 横長レイアウト */
    align-items: stretch;
    gap: 20px;
    background: #ffffffc9;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease;
    will-change: transform, box-shadow;
}

/* hover / focus の演出 */
.article-card:hover,
.article-card:focus {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
    outline: none;
}

/* 左側のサイドパネル（カテゴリ／日付） */
.card-side {
    flex: 0 0 180px; /* 固定幅、カード全体の左パネル */
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: flex-start;
    padding-left: 8px;
    box-sizing: border-box;
}

/* カテゴリの見せ方（小さなバッジ風） */
.card-category {
    font-family: "Makinas", sans-serif;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.04);
    padding: 6px 10px;
    border-radius: 999px;
    display: inline-block;
    letter-spacing: -0.02em;
}

/* 日付 */
.card-date {
    font-family: "Makinas", sans-serif;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.45);
}

/* メインの本文領域 */
.card-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* タイトル */
.card-title {
    margin: 0;
    font-family: "Makinas", sans-serif;
    font-size: 20px;
    line-height: 1.25;
    color: #000;
    letter-spacing: -0.02em;
}

/* 抜粋（長くなりすぎないように3行に制限） */
.card-excerpt {
    margin: 0;
    font-family: "Makinas", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.65);
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右下のメタ（CTA）*/
.card-meta {
    margin-top: auto; /* 抜粋の下に固定 */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.card-read {
    font-family: "Makinas", sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
}

/* small screen: 縦積みに切替（カード内を縦に） */
@media (max-width: 799px) {
    .article-card {
        flex-direction: column; /* 縦積み */
        padding: 14px;
    }
    .card-side {
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 12px;
        align-items: center;
        padding-left: 0;
        padding-bottom: 8px;
    }
    .card-category {
        font-size: 12px;
        padding: 5px 8px;
    }
    .card-date {
        font-size: 13px;
        color: rgba(0, 0, 0, 0.55);
    }
    .card-title {
        font-size: 18px;
    }
    .card-excerpt {
        font-size: 15px;
        -webkit-line-clamp: 4;
    }
}

/* 中画面（tablet）調整 */
@media (min-width: 800px) and (max-width: 1279px) {
    .article-card {
        gap: 16px;
        padding: 16px;
    }
    .card-side {
        flex-basis: 160px;
    }
    .card-title {
        font-size: 18px;
    }
    .card-excerpt {
        font-size: 14px;
    }
}

/* アクセシビリティ：リンクの色を勝手に変えない */
.article-card a,
.article-card a:visited {
    color: inherit;
    text-decoration: none;
}

:root {
    --accent: #0b5fff;
    --muted: rgba(0, 0, 0, 0.55);
    --muted-2: rgba(0, 0, 0, 0.08);
    --fw-title: "Makinas", sans-serif;
}

/* 見出しコンテナ：下線を追加（最小限の線） */
.section-heading {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 12px 0 14px; /* 下に余白を少しとって線を見せる */
    box-sizing: border-box;
    border-bottom: 1px solid var(--muted-2); /* ← これが下側の線です */
}

/* 左側 */
.section-heading-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* キッカー */
.section-kicker {
    font-family: var(--fw-title);
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 8px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(11, 95, 255, 0.12),
        rgba(11, 95, 255, 0.06)
    );
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
}

/* タイトル（カクカクアクセント） */
.section-title {
    margin: 0;
    font-family: var(--fw-title);
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #000;
    position: relative;
    padding-left: 12px;
    font-weight: 600;
    will-change: transform;
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) skewX(-18deg);
    width: 8px;
    height: 26px;
    background: var(--accent);
    border-radius: 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* 右側（装飾 or インタラクティブ） */
.section-heading-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 共通スタイル（span でも a でも使える） */
.section-sub {
    font-family: var(--fw-title);
    font-size: 15px;
    color: var(--muted);
    line-height: 1;
    padding-left: 12px;
    border-left: 2px solid var(--muted-2);
    position: relative;
    letter-spacing: -0.02em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* --- 機能化（もし a タグにする場合のスタイル） --- */
.section-sub[href] {
    cursor: pointer;
    text-decoration: none;
    color: var(--muted);
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms;
}

/* ホバーでわずかに動かす（リンクでも装飾でも） */
.section-sub[href]:hover,
.section-heading:hover .section-sub[href] {
    transform: translateY(-2px);
    color: #000;
}

/* フォーカス（キーボード可視化） */
.section-sub[href]:focus-visible {
    outline: 3px solid rgba(11, 95, 255, 0.14);
    outline-offset: 4px;
    border-left-color: rgba(11, 95, 255, 0.12);
    border-radius: 2px;
}

/* レスポンシブ：モバイルでは縦並びにして線はコンテナに一本のみ */
@media (max-width: 799px) {
    .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 0 10px;
    }
    .section-heading-left {
        gap: 8px;
    }
    .section-kicker {
        font-size: 11px;
        padding: 5px 7px;
    }
    .section-title {
        font-size: 18px;
        padding-left: 10px;
    }
    .section-heading-right {
        width: 100%;
        justify-content: flex-start;
        margin-top: 4px;
        gap: 8px;
    }
    .section-sub {
        padding-left: 0;
        border-left: none;
        font-size: 13px;
    }
    .section-sub::after {
        display: none;
    } /* モバイルは極力シンプルに */
}

/* タブレット微調整 */
@media (min-width: 800px) and (max-width: 1279px) {
    .section-title {
        font-size: 20px;
    }
    .section-kicker {
        font-size: 11px;
        padding: 5px 7px;
    }
}

/* ========= もっと見る / 折りたたむ 用スタイル ========= */

/* 共通のカード間隔を変数化して再利用 */
.article-list {
    --article-gap: 20px; /* 既存の gap と一致させる */
    display: flex;
    flex-direction: column;
    gap: var(--article-gap);
    width: 100%;
    box-sizing: border-box;
}

/* 折りたたんだ領域もカード列にする（間隔を統一） */
.more-articles {
    overflow: hidden;
    max-height: 0;
    transition: max-height 360ms ease;
    display: flex; /* ← ここで縦並びにする */
    flex-direction: column; /* ← 縦方向 */
    gap: var(--article-gap); /* ← .article-list と同じ gap にする */
    margin: 0; /* 不要な余白を排除 */
    padding: 0; /* 不要な余白を排除 */
    background: transparent;
}

/* open state */
.more-articles.is-open {
    max-height: 2000px; /* 保険（JS で実高さを設定） */
}

/* ボタン（見た目）*/
.more-toggle {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #ffffffc9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    font-family: "Makinas", sans-serif;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.85);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* ボタン hover/focus */
.more-toggle:hover,
.more-toggle:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    outline: none;
}

/* 小さめの矢印 */
.more-toggle .chev {
    display: inline-block;
    transform-origin: center;
    transition: transform 0.25s ease;
}

/* 折りたたみ状態では矢印を回転 */
.more-toggle[aria-expanded="true"] .chev {
    transform: rotate(180deg);
}

.article-list .fade-bottom {
    pointer-events: none;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.9)
    );
    display: none;
}
.article-list.has-more .fade-bottom {
    display: block;
}
.article-list.has-more.expanded .fade-bottom {
    display: none;
}

/* ======= ベーススタイル ======= */

:root {
    --card-bg: #ffffff;
    --card-radius: 10px;
    --card-gap: 12px;
    --thumb-aspect: 801/251; /* デフォルト比率（上書き可） */
}

/* 親リスト */
.list-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

/* 各カード（行） */
.list-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    padding: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* リンク全体を横並びにする */
.list-card__link {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

/* 左の文字エリア（幅はカード単位で --text-width を上書き可） */
.list-card__content {
    flex: 0 0 var(--text-width, 350px); /* 固定に近いが上書き可能 */
    min-width: 110px; /* 極端に狭くならない */
    max-width: 40%; /* 画面広いときの上限（調整可） */
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    align-items: center; /* タイトル左寄せ */
}

/* タイトルは左揃え（必要なら text-overflow 設定）*/
.list-card__title {
    margin: 0;
    font-family: "Makinas", sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: #000;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 日付 */
.list-card__date {
    font-family: "Makinas", sans-serif;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.45);
}

/* 画像領域（右側） — 伸びる部分 */
.list-card__thumb {
    flex: 1 1 auto; /* 右側を伸ばす */
    display: flex;
    justify-content: flex-end; /* 画像を右詰め */
    align-items: center;
    margin: 0;
    box-sizing: border-box;
    /* 親で画像幅の上限を指定可能 */
    --img-max-width: 100%;
}

/* 画像本体 */
.list-card__img {
    width: 100%;
    max-width: var(--img-max-width, 520px); /* カード毎に上書き可 */
    height: auto;
    aspect-ratio: var(--thumb-aspect, 801/251);
    object-fit: cover;
    object-position: center center;
    border-radius: 8px;
    display: block;
}

/* ホバー演出 */
.list-card:hover,
.list-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

/* ===== レスポンシブ ===== */

/* モバイルでは縦積み（画像を上にするパターン） */
@media (max-width: 799px) {
    .list-card__link {
        flex-direction: column; /* 縦に積む */
        align-items: stretch; /* 親幅いっぱい */
        gap: 10px;
    }
    .list-card__content {
        order: 2; /* 文字は下に */
        align-items: center; /* モバイルでは中央寄せが見栄え良い */
        text-align: center;
        max-width: 100%;
        flex: 0 0 auto;
    }
    .list-card__thumb {
        order: 1; /* 画像を上に */
        justify-content: center; /* 中央に配置 */
    }
    .list-card__img {
        width: 100%;
        max-width: 100%;
        aspect-ratio: var(--thumb-aspect, 801/251);
    }
}

/* 大画面でさらに写真を大きく見せたい場合（オプション） */
@media (min-width: 1200px) {
    .list-card__img {
        max-width: calc(var(--img-max-width, 520px) * 1.05);
    }
}

/* 古いブラウザの aspect-ratio フォールバック */
@supports not (aspect-ratio: 1) {
    .list-card__img {
        height: auto;
    } /* デフォルトで落ち着く */
}

/* グリッド表示（表風） */
.skill-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px 20px;
    margin-top: 1.2em;
    background: #fafafa;
    padding: 16px;
    border-radius: 10px;
}

/* 各セル */
.skill-item {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 8px 12px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skill-item span {
    font-weight: 400;
    color: #777;
    font-size: 0.9em;
}

/* モバイルで1列化 */
@media (max-width: 600px) {
    .skill-table {
        grid-template-columns: 1fr;
    }
}

/* テキストのスタイル */
.gallery-text2 {
    width: calc(100%);
    font-size: 18px;
    line-height: 145%;
    letter-spacing: -0.5%;
    font-family: "Makinas", sans-serif;
    color: rgba(0, 0, 0, 0.55); /* 透明度55% */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 2100ms cubic-bezier(0.22, 1, 0.36, 1) forwards; /* アニメーション統一 */
}

ul,
ol {
    font-family: "Makinas", sans-serif;
}

.photo-gallery-long {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 横に最大3枚 */
    gap: 12px;
    align-items: start;
    width: 100%;
    max-width: 1200px; /* 任意：極端に横長にならないよう制限 */
    margin: 0 auto; /* .gallery-wrapper があるなら不要ですが安全措置 */
    padding: 0;
    box-sizing: border-box;
}

/* 各アイテム（縦長：高さが長い） */
.photo-item-long {
    width: 100%;
    aspect-ratio: 1 / 1.41421356; /* 幅/高さ = 9/16 -> 高さが 16 に相当する（縦長）*/
    overflow: hidden;
    background-color: #f2f2f2;
    border-radius: 8px;
    display: block;
    position: relative;
}

/* 画像はコンテナを完全にカバー */
.photo-item-long img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: zoom-in;
}

/* ホバー効果（既存と見た目を揃える） */
.photo-item-long img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* aspect-ratio 非対応ブラウザ向けフォールバック（高さ = 幅 * 16/9） */
@supports not (aspect-ratio: 9/16) {
    .photo-item-long {
        height: 0;
        padding-bottom: 141.421356; /* (16/9)*100 */
    }
    .photo-item-long img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}

/* レスポンシブ：タブレット以下で2列、スマホで1列 */
@media (max-width: 1024px) {
    .photo-gallery-long {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .photo-gallery-long {
        grid-template-columns: 1fr;
    }
}

ul,
ol,
li {
    font-family: "Makinas", sans-serif;
}

/* 色などの変数 */
:root {
    --panel: #f4f5f6;
    --border: #d7d7d9;
    --accent-line: #cfcfd1;
    --text: #1f2428;
    --muted: #70757a;
    --max-width: 1000px;
    --row-height: 64px;
}

/* カード本体 */
.event-card {
    width: min(100%, var(--max-width));
    margin: 20px auto;
    background: var(--panel);
    border: 2px solid var(--border);
    border-radius: 0; /* 完全な角丸なし */
    padding: 28px;
    text-align: center;

    font-family: "Makinas", system-ui, sans-serif;
    color: var(--text);
}

/* ヘッダー */
.event-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-line);
    margin-bottom: 20px;
}

.event-card__title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.event-card__meta {
    font-size: 1.05rem;
    color: var(--muted);
}

/* リスト全体 */
.event-card__list {
    display: grid;
    gap: 16px;
}

/* 全行：ラベルと値を横並びに統一 */
.event-card__row {
    display: flex;
    justify-content: left; /* 中央寄せ */
    align-items: center;
    gap: 28px;

    border: 1px solid var(--border);
    background: linear-gradient(180deg, #ffffff, var(--panel));
    padding: 0 20px;
    height: var(--row-height);
}

/* ラベル */
.event-card__label {
    margin: 0;
    font-size: 1.15rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

/* 値 */
.event-card__value {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
}

/* モバイルでは縦積みに戻す */
@media (max-width: 520px) {
    .event-card {
        padding: 20px;
    }
    .event-card__row {
        flex-direction: column;
        height: auto;
        padding: 14px;
        gap: 6px;
    }
    .event-card__value {
        font-size: 1.1rem;
    }
}

/* --- 表（meta-table）の体裁調整 --- */
.meta-table {
    width: 100%;
    max-width: 680px;
    border-collapse: collapse;
    margin: 12px auto 20px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.meta-table thead th {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    text-align: center;
    font-weight: 700;
}

.meta-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}

.meta-table td:first-child,
.meta-table th:first-child {
    width: 150px;
    max-width: 150px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

/* セル内テキスト（デフォルト：内容側のみ左寄せ） */
.home-001-text {
    display: block;
    text-align: left;
    line-height: 1.4;
    word-break: break-word;
}

/* A〜E の部分だけ中央寄せ */
.meta-table td:first-child .home-001-text {
    text-align: center;
}

/* ヘッダ下の余白 */
.meta-table thead + tbody tr:first-child td {
    padding-top: 12px;
}

@media (max-width: 520px) {
    .meta-table {
        max-width: 100%;
        margin: 8px;
        font-size: 0.92rem;
    }
    .meta-table td:first-child,
    .meta-table th:first-child {
        width: 96px;
        max-width: 96px;
    }
}

/* メニューの基本スタイル（カード下に浮く小メニュー） */
.card-menu {
    position: absolute;
    z-index: 1200;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    box-sizing: border-box;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

/* メニューアイテム（リンク） */
.card-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    font-family: "Makinas", sans-serif;
    font-size: 14px;
    line-height: 1;
    outline: none;
}

/* hover / focus の見せ方 */
.card-menu__item:hover,
.card-menu__item:focus {
    background: rgba(0, 0, 0, 0.04);
}

/* 無効なアイテム（リンクが無い） */
.card-menu__item--disabled {
    color: rgba(0, 0, 0, 0.35);
    cursor: default;
    pointer-events: none;
}

/* 短い補助テキスト */
.card-menu__meta {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
    margin-left: 32px;
}

/* 小さい画面では底部シート表示に切替 */
@media (max-width: 799px) {
    .card-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 12px 12px 0 0;
        padding: 14px;
        min-width: auto;
    }
    .card-menu__item {
        padding: 14px;
        font-size: 16px;
    }
}

/* 簡易アニメーション（表示時） */
.card-menu--enter {
    opacity: 0;
    transform: translateY(6px);
}
.card-menu--enter.card-menu--visible {
    opacity: 1;
    transform: translateY(0);
}