/* 基準フォントサイズ設定 */
html {
    font-size: 18px;
}
/* =========================================
   文字サイズ制御
========================================= */

/* --- 1. 通常テキストのサイズ感 --- */
html.font-small { font-size: 70%; } 
html.font-medium { font-size: 100%; } 
html.font-large { font-size: 140%; } 

body {
    font-size: 1rem;
    line-height: 1.6;
}

/* --- 2. ボタン内テキストのサイズ指定 (px固定) --- */
html.font-small .sizebutton { font-size: 10.416px; }
html.font-medium .sizebutton { font-size: 14.88px; }
html.font-large .sizebutton { 
    font-size: 41.664px; 
    padding: 5px 15px; 
    line-height: 1.2;
}

/* --- 3. ボタンのデザイン (アクティブ色なし) --- */
.sizebutton {
    border-radius: 2px;
    vertical-align: middle;
}

.sizebutton:hover {
    background-color: #cccccccc;
}

/* --- 4. ロゴ画像のサイズ固定  --- */

.site-title img {
    max-width: 100%;
    height: auto;
    max-height: 80px; 
}

/* リセット・共通スタイル */
body {
    font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-size: 1rem;
}

main {
    max-width: 1280px;
    margin: 0 auto;
    background-color: #fff;
}

a {
    text-decoration: none;
    color: #007bff;
}


/* =========================================
   共通設定
========================================= */
.header {
    background-color: white;
    position: relative;
    padding-bottom: 0;
}

.header-stripe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 13px;
    z-index: 1;
    background-image: url('../images/header-stripe.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
}

/* =========================================
   PC版レイアウト (769px以上)
   左: ロゴ (上下2段分を使用)
   右上: 文字サイズ
   右下: ガイド
========================================= */
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 0;
    
    display: grid;
    /* 列: ロゴエリア(自動幅) | 右側エリア(コンテンツ幅) */
    grid-template-columns: 1fr auto;
    /* 行: 上段 | 下段 */
    grid-template-rows: auto auto;
    /* エリアの配置マップ */
    grid-template-areas:
        "logo text-size"
        "logo guide";
    align-items: end;
    column-gap: 20px;
    position: relative;
    z-index: 10;
}

/* --- 各パーツの配置指定 --- */

/* 1. ロゴ */
.site-title {
    grid-area: logo;
    margin: 0;
}

/* 3. 使い方ガイドボタン */
.usage-guide-link-image {
    grid-area: guide; 
    justify-self: end;
    display: block;
    text-decoration: none;
}
.usage-guide-link-image img {
    height: auto;
    max-height: 80px;
}

/* --- 文字サイズパーツのデザイン --- */
#FontSizer {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 5px;
    margin-bottom: 0;
    margin-top: 0rem;
}
#FontSizer li { 
    margin-left: 5px;
}
#FontSizer li:first-child {
    margin-left: 0;
    margin-right: 5px;
    font-size: 14.88px;
}
.font-large #FontSizer li:first-child{
    font-size: 29.76px;
}
@media (max-width: 768px) {
.font-large #FontSizer{
  flex-wrap: wrap;
}
}
.sizebutton {
    background-color: #eee;
    border: 1px solid #000000;
    padding: 6px 8px;
    font-size: 0.8rem;
    color:#000;
}

/* =========================================
   SP版レイアウト (768px以下)
   上: 文字サイズ
   中: ロゴ
   下: ガイド
========================================= */
@media (max-width: 768px) {
    
    .header-inner {
        padding: 40px 10px 10px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    
        grid-template-areas:
            "text-size"
            "logo"
            "guide";
        row-gap: 14px; 
        justify-items: center; 
    }
    
    /* SP時の個別調整 */
    
    #FonSiBox {
         width: 100%;
         display: flex;
         justify-content: center;
    }
        
    /* ガイドボタン */
    .usage-guide-link-image {
        justify-self: center; /* 中央寄せ */
    }
    .usage-guide-link-image img {
        max-height: 72px; /* ロゴとバランスを取る */
    }
}


/* --- 案内エリアのスタイル --- */
.map-intro-area {
    width: 100%;
    max-width: 1280px;
    margin: 0px auto 6rem; /* マップとの間隔 */
    box-sizing: border-box;
}

.font-large .map-intro-area {
    margin: 0px auto 240px;
}


.map-intro-inner {
    display: flex;
    align-items: flex-start;
    gap: 44px;
    margin: 0 64px -240px;
}

/* マスコット画像 */
.intro-mascot {
    width: 145px; 
    height: auto;
    flex-shrink: 0; 
    position: relative;
}

/* 案内テキスト */
.intro-text {
    line-height: 1.5;
    font-weight: normal;
    margin: 0;
    margin-top: 1rem;
}

/* ルビの調整 */
.intro-text rt {
    font-size: 0.6em;
}

/* --- マップエリア（既存の調整） --- */
.assembly-map-container.pc-view {
    display: block;
    width: 100%;
    max-width: 100%;
}

.assembly-map-image {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 1240px) {
    .intro-text {
    margin-top: 0rem;
}
}
@media (max-width: 1100px) {
    .intro-mascot {
    width: 128px;
}
.map-intro-inner {
    margin: 0 4rem -10rem;
}
}
@media (max-width: 1000px) {
    .intro-mascot {
    width: 118px;
}
}
@media (max-width: 768px) {
    .intro-mascot {
   display:none;
}
    .map-intro-inner {
    margin: 1rem 1rem -3rem;
}
    .map-intro-area {
    margin: 0px auto 4rem; /* マップとの間隔 */
}
    .font-large .map-intro-area {
    margin: 0px auto 100px;
}

}
/* =========================================
   SP版 マップエリアのスタイル
========================================= */

.sp-view {
    display: none;
}

@media (max-width: 768px) {
    
    /* PC版マップを非表示 */
    .pc-view {
        display: none !important;
    }

    /* SP版マップを表示 */
    .sp-view {
        display: block;
        padding-bottom: 40px;
    }

    /* --- 上部マップ画像エリア --- */
    .sp-map-header {
        position: relative;
        margin-bottom: 20px;
        text-align: center;
    }

    .sp-map-image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* マスコット配置 */
    .sp-mascot-top {
        position: absolute;
        top: -10px;
        left: 0;
        width: 80px; /* サイズ調整 */
        height: auto;
    }
    .sp-mascot-bottom {
        position: absolute;
        bottom: -10px;
        right: 0;
        width: 80px; /* サイズ調整 */
        height: auto;
    }

    /* --- スポット一覧 (2カラムレイアウト) --- */
    .sp-spot-list {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2列 */
        gap: 20px; /* アイテム間の隙間 */
        list-style: none;
        padding: 0 10px;
        margin: 0;
    }

    .spot-item {
        text-align: center;
    }
    
    .spot-item a {
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .spot-img-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 正方形でなくても中心をトリミング */
    }

    /* --- 最後の1個（第一委員会室）を中央寄せにする --- */
    .spot-item.item-center {
        grid-column: 1 / -1; /* 全幅を使う */
        width: 50%; /* 幅を半分にして */
        margin: 0 auto; /* 中央寄せ */
    }
}

/* -------------------------------------- */
/* 使い方ガイドセクション */
/* -------------------------------------- */

.usage-guide-section {
    max-width: 1000px;
    margin: 4rem auto 0;
    padding: 0 1.2rem;
}

/* 見出し画像コンテナ */
.guide-title-container {
    text-align: center;
    background-color: #ffffff;
    padding: 0.01rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.3);
}

.section-title {
    text-align: center;
    padding: 6px 0;
    margin: 0.35rem;
    border: 3px solid #0206eb;
    background-color: #ffffff;
    border-radius: 8px;
}

.section-title img {
    display: block;
    width: auto;
    height: 50px;
    margin: 0 auto;
}

.guide-description-area {
    text-align: center;
    padding: 10px 0;
}

/* マスコットと説明テキストを包含するラッパー */
.guide-text-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
    max-width: 88%;
}

/* マスコット画像 */
.mascot-guide-description {
    width: 150px; 
    height: auto;
    margin-right: 64px;
    flex-shrink: 0; 
}

/* 説明テキストの本体 */
.guide-text-body {
    flex-grow: 1; 
    text-align: left;
}

.guide-text {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 0 0 5px 0;
}

.guide-text rt {
    font-size: 0.7rem; 
}

.guide-note {
    font-size: 1rem;
    margin: 0;
}


/* 操作説明画像エリア */
.guide-image-area {
    text-align: center;
    padding: 20px 0;
}

.guide-content-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* -------------------------------------- */
/* メディアクエリ (SP時の調整) */
/* -------------------------------------- */

@media (max-width: 768px) {
    
.usage-guide-section {
    margin: 2rem auto 0;
}
    .guide-text-content-wrapper {
         align-items: center;
         max-width: 100%;
         gap: 1rem;
    }
    
   html.font-large .guide-text-content-wrapper {
         flex-wrap:wrap
    }

    .mascot-guide-description {
        width: 80px; 
        margin-right: 0;
        margin-bottom: 10px;
    }
        .guide-text {
        text-align: left;
    }
}
h3.guide-subtitle {
    font-size: 1.5rem;
    font-weight: normal;
    text-align: center;
}

/* 背景色とパディングを持つラッパー */
.guide-content-wrapper {
    margin: 0 auto;
    padding: 1rem 3rem; 
    position: relative;
    background-color: #F0EFDF; 
    border-radius: 8px;
}

/* Gridレイアウトのリスト */
.guide-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 20px 2rem;
    align-items: center; 
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 各リストアイテム */
.guide-list-grid li {
    display: flex;
    align-items: center;
    padding: 5px 0;
    min-width: 0;
}

/* コントロールアイコンの画像 */
.control-icon {
    width: 40px;
    height: 40px;
    margin-right: 20px;
    flex-shrink: 0;
}

/* 説明テキスト */
.guide-list-grid li p {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;   
    min-width: 0;  
}

.guide-list-grid li rt {
    font-size: 0.6rem;
}

/* 360°のスタイル調整 */
.guide-list-grid .degree {
    font-family: sans-serif;
}

/* 右下のマスコット */
.mascot-guide-bottom-right {
    position: absolute;
    bottom: -15px;
    right: -50px;
    width: 140px;
    height: auto;
    z-index: 5;
}

.font-large .mascot-guide-bottom-right {
    right: -65px;
    width: 120px;
}


/* -------------------------------------- */
/* メディアクエリ (SP時の調整) */
/* -------------------------------------- */

@media (max-width: 768px) {
    .guide-content-wrapper {
        padding: 20px 15px;
    }

    .guide-list-grid {
        grid-template-columns: 1fr; 
        gap: 15px;
        align-items: flex-start;
    }
    
    .control-icon {
        width: 30px;
        height: 30px;
        margin-right: 15px;
    }
    
    .guide-list-grid li p {
        font-size: 0.9rem;
    }
    
}

@media (max-width: 895px) {
    .mascot-guide-bottom-right {
        display: none;
    }
}
/* --- 議事堂概観図 (MAP) の使い方セクション --- */

.map-guide-section {
    margin-top: 40px;
}

/* コンテンツ全体のラッパー（背景色あり） */
.map-guide-content {
    background-color: #f0efdf;
    border-radius: 8px;
    padding: 30px 40px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* 左側のマスコット（絶対配置） */
.mascot-guide-left {
    position: absolute;
    bottom: 0px;
    left: -80px; 
    width: 140px;
    height: auto;
    z-index: 5;
}

/* 左右カラムのフレックスコンテナ */
.map-guide-columns {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    gap: 1rem;
    padding-left: 30px;
}

/* 左カラム（テキストリスト） */
.map-text-column {
    flex: 1; 
}

/* 右カラム（画像） */
.map-image-column {
    flex: 0 0 45%; 
}

.map-screen-image {
    width: 100%;
    height: auto;
    border: 2px solid #fff; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* リストスタイル */
.map-guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.map-guide-list li {
    display: flex;
    align-items: center; 
    margin-bottom: 20px;
}
.map-guide-list li.fl_wrap_li{
    flex-wrap: wrap;
}

.map-guide-list li:last-child {
    margin-bottom: 0;
}

/* アイコン画像 */
.map-icon {
    height: 40px;
    margin-right: 20px;
    flex-shrink: 0;
    object-fit: contain; 
    max-width: 275px;
}

/* 説明テキスト */
.map-guide-list p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.map-guide-list rt {
    font-size: 0.6rem;
    font-weight: normal;
}


/* -------------------------------------- */
/* メディアクエリ (SP時の調整) */
/* -------------------------------------- */
@media (max-width: 1150px) {
.mascot-guide-left{
  display: none;
}
}
@media (max-width: 768px) {
    .map-guide-content {
        padding: 20px;
    }

    .map-guide-columns {
        flex-direction: column-reverse; /* SPでは画像を上に、説明を下に */
        gap: 20px;
        padding-left: 0;
    }

    .map-text-column, 
    .map-image-column {
        width: 100%;
        flex: auto;
    }

    .mascot-guide-left {
        display: none;
        
    }
    
    .map-icon {
        height: 30px;
        margin-right: 15px;
        max-width: 100%;
    }

    .map-guide-list p {
        font-size: 0.9rem;
    }
}
/* -------------------------------------- */
/* フッターエリア */
/* -------------------------------------- */

.footer {
    background-color: transparent; 
    padding-top: 6rem;
    width: 100%;
    position: relative;
}

/* --- ホームページに戻るボタン --- */

.footer-link-area {
    margin: 0 2rem 4rem;
    display: flex;
    justify-content: center;
}

.footer-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: #FDFDF7;
    border-radius: 15px;
    padding: 15px 25px;
    text-decoration: none;
    color: #333;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.3); /* ふんわりとした影 */
    transition: opacity 0.3s, transform 0.1s;
    width: calc(100% - 50px);
    max-width: 480px;
}

.footer-home-link:hover {
    opacity: 0.8;
    transform: translateY(2px);
}

.font-large .footer-home-link {
    width: calc(100% - 50px);
    max-width: 640px;
}

@media (max-width: 768px) {
.footer-home-link {
    display: flex;
    flex-wrap: wrap;
}
}

/* フッターロゴ */
.footer-logo {
    height: 40px; 
    width: auto;
}

/* ボタン内のテキスト */
.footer-link-text {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: left;
    line-height: 1.2;
}

.footer-link-text rt {
    font-size: 0.7rem;
    font-weight: normal;
}

/* --- フッターのストライプ装飾 --- */

.footer-stripe {
    /* ヘッダーのスタイルをベースに設定 */
    width: 100%;
    height: 13px; /* 指定された高さ */
    
    /* 背景画像設定 */
    background-image: url('../images/header-stripe.png'); /* パスは環境に合わせて調整 */
    background-repeat: repeat-x;
    background-size: auto 100%;
    
    /* フッターの最下部に配置 */
    display: block;
}
/* =========================================
   文字サイズ「最大」時のレイアウト崩れ防止
========================================= */

@media (max-width: 1288px) {
    /* html.font-large が付いている（＝最大サイズ）時のみ適用 */
    html.font-large .header-inner {
        /* SP版(768px以下)と同じ縦積みグリッド定義で上書き */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "text-size"
            "logo"
            "guide";
        row-gap: 20px; /* パーツ間の隙間 */
        justify-items: center; /* 全体を中央寄せ */
        padding-bottom: 20px;
    }

    /* 文字サイズ変更パーツを中央寄せ */
    html.font-large #FonSiBox {
        justify-self: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* 使い方ガイドを中央寄せ */
    html.font-large .usage-guide-link-image {
        justify-self: center;
    }

    /* ロゴ画像の縮小を防ぎ、PC版のサイズ(80px)を維持 */
    html.font-large .site-title img {
        height: auto;
        max-height: 80px; /* PC版の高さを維持 */
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }
}