@charset "UTF-8"; /* 文字コード宣言を追加 */

/* 基本的なリセット */
* {
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

/* グローバルフォント設定 */
html,body {
    font-family: "Shippori Mincho", serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.075em; 
    line-height: 1.5;
    color: #222; 
    background: #fff;
}

/* ==========================================================
// PC/共通レイアウト修正
// ========================================================== */

/* 最下層背景色とスクロール調整箇所 */
body {
    background-color: #efefef; /* 最下層背景色 */
    min-height: 100vh; /* ビューポートの高さに固定 */
    width: 100vw;
}
html {
    height: 100%;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
/** ANIMATION **/
.content-section .animation {
  opacity: 0;
}
.content-section .animation.show {
  opacity: 1;
  transition: opacity .5s ease-out .1s;
}

/* --- 2カラムレイアウトの核 --- */
.page-container {
    display: flex;
    width: 100%;
    min-height: 100vh; /* ビューポートの最小高さに固定 */
}

/* ナビエリア (左側) */
.sidebar {
    width: 300px; 
    flex-shrink: 0;
    padding: 38px;
    color: #111; 
    height: 100vh; /* モバイル対応のため vh に統一 */
    overflow-y: auto; 
}

/* ロゴ画像のスタイル */
.logo-area {
    text-align: center;
    margin-bottom: 20px;
}
.site-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ナビゲーションのスタイル */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-navigation ul li.greeting {
    margin-top: 76px;
    margin-bottom: 25px;
}
.main-navigation a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #111111;
    text-decoration: none;

}
.main-navigation a:hover,
.main-navigation a.active {
    color: #e60012;
}

/* 新規追加要素: メニュー内の年号 */
.main-navigation a .year {
    font-size: 0.9rem;
    text-align: left;
    color: #111111;
    white-space: nowrap;
}

/* アクティブなリンク内の年号も強調 */
.main-navigation a.active .year {
    color: #e60012;
}


/* コンテンツエリア (右側) のラッパー */
.content-wrapper {
  z-index: 2;
    flex: 1; 
    padding: 38px;
    padding-left: 18px;
    padding-bottom: 0;
    overflow-y: auto; /* この要素でスクロールを発生させる */
    height: 100vh; /* スクロール領域を確保 */
}

/* 白い背景のレイヤー (コンテンツとフッターを囲む) */
.content-layer {
    margin: 0; 
    background-color: #FFFFFF; 
    border-radius: 32px; 
    overflow: hidden; 
    display: flex;
    flex-direction: column; 
    min-height: 100%; 
    box-shadow: 0 0 1.4vw rgba(46, 46, 46, 0.2);
}

/* コンテンツ領域のスタイル (コンテンツ領域) */
.content-section {
    flex: 1; 
    padding: 60px 30px; 
}
.content-section section {
  max-width: 1115px;
  width: 100%;
  padding-left: 75px;
  padding-right: 75px;
  margin: 0 auto;
}
.content-section section > div {
  margin-top: 80px;
}
.content-section.greeting section > div {
  margin-top: 40px;
}
.content-section section p {
  line-height: 1.75;
  text-indent: 1rem;
}
/* コンテンツ内のヘッダーのスタイル */
.content-section header {
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.content-section .title div {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 25px 50px;
  padding-bottom: 0;
}
.content-section .title.page1945-1954 div {
  max-width: 800px;
}
.content-section section:last-child {
  margin-bottom: 40px;
}
.content-section .title h1 {
  font-size: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 75px;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
}
.content-section .title h1 span.en {
  color: #e60012;
  font-size: 1rem;
}
.content-section section h2 {
  font-size: 1.3rem;
  font-weight: 700;
}
.content-section .content figure {
  margin-top:40px;
}
.content-section .content figure img {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 5px;
}
.content-section .content figure img:last-child {
  margin-bottom: 0;
}
.greeting .content-section .content figure figcaption {
  display: flex;
}
.content-section .content figure figcaption {
  justify-content: center;
  align-items: flex-end;
  gap: .75rem;
  text-align: center;
  font-size: .85rem;
}
.content-section .content figure figcaption .name {
  font-size: 1.8rem;
  font-weight: 700;
}
.content-section .content figure figcaption .position,
.content-section .content figure figcaption .name-en {
  font-size: .9rem;
}
.content-section .after2025 .d-flex {
  flex-wrap: wrap;
  gap: 1.25rem;
}
.content-section .after2025 .d-flex figure {
  width: calc(100% / 2 - 1.25rem);
}

/* フッター領域のスタイル (footer) */
#footer { /* IDセレクタに更新 */
    flex-shrink: 0; 
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#footer .ft-bg {
    padding: 30px 30px 20px;
    max-width: 1115px; /* コンテンツ領域に合わせた最大幅 */
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#footer .f-box-logo {
  display: flex;
  align-items: center;
  flex-direction: column;
}
#footer .f-box-logo p {
    font-size: 0.85rem;
    margin-bottom: 10px;
}

#footer .f-box-logo img {
    height: auto;
}

#footer .copyright {
    font-size: 0.6rem;
    padding: 10px 30px;
    text-align: center;
}

#footer .bran {
    padding: 15px 30px;
    text-align: center;
}

#footer .wrapper {
    max-width: 1200px; 
    margin: 0 auto;
}

#footer .pagetotop button {
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    position: fixed;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 10;
    background: none;
}
#footer .pagetotop button.is-active {
    opacity: 1;
    visibility: visible;
}
#footer .pagetotop button:hover {
    width: 70px;
    height: 70px;
}

/* ==========================================================
// ページナビゲーション (前へ/次へ) スタイル - 中央寄せ
// ========================================================== */

/* リンクエリア全体のコンテナ */
#footer .link-area {
    max-width: 1115px; 
    width: 100%;
    margin: 40px auto;
    padding: 0 75px; 
    text-align: center; 
}

/* リストコンテナ: 要素を横並びにする */
#footer .link-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 40px;
}

/* 個々のリストアイテム */
#footer .link-area ul li {
    flex-shrink: 0;
}

/* リンク本体の共通スタイル */
#footer .link-area a {
    display: flex;
    align-items: center;
    padding: 10px 0;
    color: #222;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.2s;
}

/* ホバー時のスタイル */
#footer .link-area a:hover {
    color: #e60012; 
}

/* ----------------------------------------------------------
// リンクの方向付け (矢印アイコン) とアニメーション
// ---------------------------------------------------------- */

/* 左矢印 (前へ) */
#footer .link-area ul li:first-child a::before {
    content: '←';
    margin-right: 8px;
    font-size: 1.2rem;
    line-height: 1;
    color: #e60012;
    transition: transform 0.2s ease-out; /* アニメーション設定 */
    transform: translateX(0);
}

/* ホバー時に矢印を左にスライド */
#footer .link-area ul li:first-child a:hover::before {
    transform: translateX(-5px); /* -5px左に移動 */
}

/* 右矢印 (次へ) */
#footer .link-area ul li:last-child a::after {
    content: '→';
    margin-left: 8px;
    font-size: 1.2rem;
    line-height: 1;
    color: #e60012;
    transition: transform 0.2s ease-out; /* アニメーション設定 */
    transform: translateX(0); 
}

/* ホバー時に矢印を右にスライド */
#footer .link-area ul li:last-child a:hover::after {
    transform: translateX(5px); /* 5px右に移動 */
}

/* ==========================================================
// ローディングアニメーション
// ========================================================== */
.entrance .loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff; /* 背景色に合わせて調整 */
  z-index: 9999;
  display: flex; /* flexboxで中央揃えする場合 */
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.loading__inner {
  position: relative; /* 子要素の基準点 */
  width: 100%;
  height: 200px; /* テキストとロゴが収まる高さを確保 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading__text {
  position: absolute; /* 全てのテキストを同じ場所に重ねる */
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #e60012;
  line-height: 2;
  margin: 0;
  /* JSで制御するため初期は透明 */
  opacity: 0;
}
.loading__logo {
  position: absolute;
  opacity: 0;
  margin: 0;
}
.contents {
  display: block; 
  height: auto;
  min-height: 100vh;
}
.opening-grid {
    position: absolute; /* loadingの中で相対的に配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    grid-template-rows: 1fr 1fr;     /* 2行 */
    gap: 0; /* 各グリッドアイテム間の隙間 */
}
.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 画像がはみ出さないように */
    background-color: #bebebe; /* 各アイテムの背景色、画像がない部分 */
}
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 縦横比を保ちつつ領域を覆う */
    opacity: 0; /* 初期状態では非表示 */
    visibility: hidden; /* スクリーンリーダー等からも隠す */
}
/* 既存のオープニングロゴもposition: absoluteなどで重ねておく */
.opening-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* JSで制御 */
    visibility: hidden; /* JSで制御 */
    z-index: 100; /* グリッド画像の上に表示 */
    background-color: #fff;
}



/* ==========================================================
// ハンバーガーメニューとオーバーレイ (PC時は非表示)
// ========================================================== */

/* ハンバーガーボタンのスタイル */
.hamburger {
    display: none; 
    position: fixed;
    top: 25px;
    right: 20px;
    z-index: 100;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger span {
    display: block;
    height: 2px;
    background-color: #e60012;
    margin: 6px 0;
    transition: 0.3s;
}

/* オーバーレイのスタイル */
.overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 90;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.menu-area {
    position: relative;
    z-index: 100;
}
.menu-area .responsiblelogo {
    display: none; 
    position: fixed;
    top: 25px;
    left: 20px;
    z-index: 1;
    width:  280px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* ==========================================================
// エントランス
// ========================================================== */
.entrance {
  background: #fff;
}
.entrance .content-section section {
  max-width: 1200px;
}
.entrance .page-container {
  flex-direction: column;
}
.entrance .page-container .background--chack {
  background-image: url(../img/contents/entrance/img--entrance--background.svg);
}
.entrance header .content .left--side img {
  width: 346px;
}
.entrance header .content .right--side img {
  width: 390px;
}
.entrance header .content .center--side {
  position: relative;
    width: 100%;
    height: 80px;
    overflow: hidden;
    margin-right: 10px;
    margin-left: 10px;
}
.entrance header .content .center--side::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    background-color: black; 
    height: 1px; 
    transform: translateY(-50%); 
}
.entrance header .content .d-flex {
  justify-content:space-between;
  align-items: center;
}
.entrance header .content .logo--100th {
  flex-direction: column;
  align-items: flex-end;
}
.entrance header .content .logo--100th img {
  width: 120px;
}
.entrance .content-wrapper {
  overflow-y: auto;
  height: auto;
  padding-left: 38px;
  padding-top: 0;
  padding-bottom: 0;
}
.entrance .content-layer {
  box-shadow: none;
  border-radius: 0;
  background: none;
  min-height: auto;
}
.entrance .content-section,
.entrance .content-section {
  padding: 0;
}
.entrance .content-section .content {
  padding: 0;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
}
.entrance .content-section .content img {
  width: 600px;
}
.entrance .content-section .content > div {
  margin-top: 50px;
}
.entrance .content-section .content > div .main-navigation {
  width: 350px;
}
.entrance .content-section .content > div .main-navigation a span,
.entrance .content-section .content > div .main-navigation a {
  font-size: 1.2rem;
  transition: all 0.5s 0s ease;
  margin-bottom: 0.25rem;
}
.entrance .content-section .content > div .main-navigation ul li:first-child {
  margin-bottom: 20px;
}
.entrance .content-section .content > div .main-navigation a:hover,
.entrance .content-section .content > div .main-navigation a:hover span {
  transition: all 0.5s 0s ease;
}
.entrance .content-section .content > div .main-navigation a:hover span {
  color: #e60012;
}
.entrance .content-section .content .logo--en img {
  width: 500px;
}
.entrance #footer {
  background-color: #efefef;
  margin-top: 80px;
}

/* ==========================================================
// モバイルブレイクポイント (600px 未満)
// ========================================================== */
@media (width < 600px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  
    /* ハンバーガーボタンの表示 */
    .hamburger, .menu-area .responsiblelogo {
        display: block;
    }

    /* ページコンテナのレイアウト変更 */
    .page-container {
        flex-direction: column; 
        min-height: auto;
    }
    
    /* --------------------------------------
    // 1. サイドバー (ハンバーガーメニュー化)
    // -------------------------------------- */
    .sidebar {
        position: fixed;
        top: 0;
        left: -300px; /* 画面外に隠す */
        width: 300px;
        height: 100vh;
        z-index: 99;
        background-color: #fff;
        padding: 20px;
        transition: left 0.3s ease-out;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    }

    /* --------------------------------------
    // 2. メインコンテンツエリア (コンテンツを上部に移動)
    // -------------------------------------- */
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
      line-height: 1.5;
    }
    .content-wrapper {
        width: 100%;
        padding: 80px 10px; /* モバイル用のパディングに調整 */
        padding-top: 10px;
        margin-top: 70px;
        height: 100vh; /* メインコンテンツのスクロール領域を確保 */
    }
    .content-section {
      padding: 30px;
    }
    .content-section section {
      padding-left: 0;
      padding-right: 0;
    }
    .content-section section h2 {
      text-align: center;
    }
    .greeting .content-section .content figure figcaption {
      flex-direction: column;
      align-items: center;
      gap: .25rem;
    }

    
    /* --------------------------------------
    // 3. メニューが開いたときの状態 (body.menu-open)
    // -------------------------------------- */
    .menu-open .sidebar {
        left: 0; /* 画面内にスライドイン */
    }

    .menu-open .overlay {
        display: block;
        visibility: visible;
        opacity: 1;
    }
    
    .menu-open .hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-open .hamburger span:nth-child(2) {
        opacity: 0;
    }
    .menu-open .hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* --------------------------------------
    // 4. ページ内要素の調整
    // -------------------------------------- */
    
    /* リンクエリアのパディングと幅調整 */
    #footer .link-area {
        padding: 0 10px; /* モバイル用のパディングに調整 */
        margin: 20px auto;
    }

    /* ページトップボタンの位置調整 (任意) */
    #footer .pagetotop button {
        right: 10px;
        bottom: 10px;
        width: 50px;
        height: 50px;
    }
}

/* ==========================================================
// 不具合改修：重なり順と表示の強制上書き
// ========================================================== */

/* 1. オープニング画面が消えた後に絶対に邪魔をさせない */
.entrance .loading {
    z-index: 500 !important; /* 他のメニューより低く設定 */
    pointer-events: none;    /* アニメーション中以外はクリックをスルーさせる */
}

/* 2. サイドバーの表示を最優先にする（スマホ時） */
@media (width < 600px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important; /* 初期位置 */
        width: 300px !important;
        height: 100vh !important;
        background-color: #ffffff !important; /* 背景色を強制的に白にする */
        z-index: 2000 !important; /* loading(500)より圧倒的に手前 */
        padding: 40px 20px !important;
        transition: transform 0.3s ease-out, left 0.3s ease-out !important;
        display: block !important; /* 万が一 display: none になっていても表示させる */
        overflow-y: auto !important;
    }

    /* メニューが開いた時：確実に画面内へ */
    .menu-open .sidebar {
        left: 0 !important;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2) !important;
    }

    /* 3. オーバーレイ（背景の暗転）をサイドバーのすぐ後ろに配置 */
    .overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1999 !important; /* sidebar(2000)の直下 */
        background-color: rgba(0, 0, 0, 0.6) !important;
        display: block !important; /* visibility だけでなく display も制御 */
        visibility: hidden !important;
        opacity: 0 !important;
        transition: opacity 0.3s !important;
    }

    .menu-open .overlay {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 4. ハンバーガーボタンを全要素の最前面に */
    .hamburger {
        display: block !important;
        z-index: 2100 !important; /* 全ての最前面 */
    }

    /* 5. サイドバー内のコンテンツが消えないように調整 */
    .sidebar .logo-area,
    .sidebar .main-navigation,
    .sidebar a {
        opacity: 1 !important;
        visibility: visible !important;
        color: #111111 !important; /* 文字色を確実に黒にする */
    }
}

/* スクロールを阻害しないための設定 */
.menu-open {
    overflow: hidden !important; /* メニュー展開時は背景を固定 */
}

/* ==========================================================
// スマホメニュー表示不具合の最終解決コード
// ========================================================== */

/* 1. エントランス画面での基本設定（PC時はサイドバーを隠す） */
.entrance .sidebar {
    display: none; 
}

@media (width < 600px) {
    /* 2. サイドバーを強制的に表示可能にする */
    .entrance .sidebar {
        display: block !important; /* display: none を打ち消す */
        position: fixed !important;
        top: 0 !important;
        left: -300px !important; /* 画面外に待機 */
        width: 300px !important;
        height: 100vh !important;
        background-color: #ffffff !important; /* 背景色を確実に白にする */
        z-index: 10001 !important; /* オープニング(10000)より手前 */
        padding: 40px 20px !important;
        transition: left 0.3s ease-out !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
        visibility: visible !important;
    }

    /* 3. メニューが開いた時の状態（body.menu-open） */
    .menu-open .sidebar {
        left: 0 !important; /* 画面内にスライドイン */
    }

    /* 4. オーバーレイ（背景の暗転）をサイドバーの直下に配置 */
    .overlay {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 10000 !important; /* loadingと同じか少し上 */
        background-color: rgba(0, 0, 0, 0.6) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transition: opacity 0.3s !important;
    }

    .menu-open .overlay {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 5. ハンバーガーボタンを全要素の最前面へ */
    .hamburger {
        display: block !important;
        z-index: 10002 !important; /* サイドバー(10001)よりさらに上 */
    }

    /* 6. サイドバー内の文字が表示されないのを防ぐ */
    .sidebar a {
        color: #111111 !important;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* 7. オープニング終了後に確実にクリックできるようにする */
.loading {
    transition: opacity 0.5s ease;
}