/* ---PC --- */

/* 最上部テキスト */
.top-text {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 25px;
    margin-top: 10px;
    text-align: left;
}

/* 目次全体の枠組み（中央寄せ・下の要素への影響を防ぐ構造） */
.toc-container {
  max-width: 400px;         /* 目次の最大幅 */
  width: 100%;              /* 横幅を100%にして下の要素の回り込みを防ぐ */
  margin: 0 auto 30px auto;   /* 下要素との間に 30px の安全な余白を確保 */
  padding: 20px;            /* 枠内の適度な余白 */
  border: 2px solid #72aa75;   /* 濃い緑色の四角い枠 */
  border-radius: 4px;       /* 角を少しだけ丸く */
  box-sizing: border-box;   /* パディングを含めたサイズ計算 */
}

/* 「目次」タイトルのスタイル（確実に表示させ、太字にしない設定） */
.fuji-toc-title {
  display: block !important; /* 強制的に表示する */
  text-align: center;       /* タイトルを中央寄せ */
  font-weight: bold;      /* 太字にしない（通常の太さ） */
  font-size: 1.1rem;        /* 少し大きめに */
  color: #1b5e20;           /* 深い緑色 */
  margin: 0 0 15px 0;       /* 項目との間の余白 */
  padding: 0 0 5px 0;
}

/* 目次リストのスタイル（背景色は無し） */
.toc-list {
  list-style: none;         /* 文頭のデフォルトの「・」を消す */
  margin: 0;
  padding: 0;
}

/* 各リスト項目の配置 */
.toc-list li {
  display: flex;            /* 数字とリンクを綺麗に横並びにする */
  align-items: flex-start;  /* 折り返したときも上揃えにする */
  margin-bottom: 10px;      /* 項目間の隙間 */
  text-align: left;         /* テキストは左詰め */
}

/* 最後の項目の下マージンを消す */
.toc-list li:last-child {
  margin-bottom: 0;
}

/* 数字部分のスタイル（リンクにならない） */
.toc-num {
  font-weight: bold;        /* 数字は見やすくするために太字のまま */
  color: #2e7d32;           /* 緑色 */
  margin-right: 8px;        /* 数字と文字の間の隙間 */
  flex-shrink: 0;           /* 画面が狭くなっても数字が潰れないようにする */
}

/* リンク（文字）のスタイル（太字を解除） */
.toc-list a {
  text-decoration: none;    /* 下線を消す */
  color: #1b5e20;           /* リンクの文字色（深い緑色） */
  font-weight: normal;      /* 太字にしない（通常の太さ） */
}

/* マウスを乗せたときの動き */
.toc-list a:hover {
  text-decoration: underline; /* マウスホバーで下線を表示 */
  color: #4caf50;             /* 明るい緑色に変化 */
}

/* 1〜8 */
.update-item {
    display: flex;
    flex-direction: column;    /* 横並びから「縦並び」に変更 */
    align-items: center;       /* 中身をすべて中央寄せにする */
    gap: 5px;
    margin-bottom: 15px;
    padding-bottom: 50px;
    border-bottom: 1px dotted #ccc; /* 点線はここに残ります */
    text-align: left;
}

.update-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* ★大見出し（緑文字の色とスタイルを完全に維持！） */
.update-item h3.update-title,
.update-item h3 {
    width: 100%;
    max-width: 850px;          /* 下の文章枠などと横幅を合わせる */
    font-size: 20px;
    color: #0d7b38;            /* この鮮やかな緑色は絶対に残ります */
    line-height: 1.4;
    background-color: #F7FBF7;
    padding: 10px; /* 文字の周りに少し余白を入れるときれいに見えます */
    border-radius: 4px; /* お好みで角を少し丸くする場合 */
}

.update-img {
    flex: 0 0 auto;            /* 縦並び用に修正 */
    width: 100%;
    max-width: 500px;          /* 画像の最大横幅 */
}

.update-img img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* --- テキストエリア全体の調整 --- */
.update-text {
    width: 100%;               /* 縦並び用に幅をいっぱいに広げる */
    max-width: 850px;          /* 文章全体の最大横幅 */
}

.explanation-text {
    padding-top: 5px;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}

/* ボタン（アウトライン型） */
.btn-container {
    text-align: center;
    margin: 20px 0;
}

.tenki-button {
    display: inline-block;
    background-color: #ffffff;
    color: #0093c4;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 35px;
    border-radius: 4px;
    border: 2px solid #0093c4;
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 15px;
}

.tenki-button:hover {
    background-color: #f0f8ff;
    color: #007ba3;
    border-color: #007ba3;
    text-decoration: none;
}

/* --- てんくら風・水色の確認ポイント枠 --- */
.check-box {
    width: 100%;
    max-width: 780px;          /* ★画像が入る分、最大横幅を550pxから750pxに広げました */
    margin: 30px auto 0;      /* 左右autoで中央寄せ */
    text-align: left;
    border: 1px solid #0093c4;   /* てんくら風のきれいな水色枠 */
    border-radius: 6px;
    background-color: #F5FAFD; /* ほんのり薄い水色の背景 */
    padding: 20px;
    box-sizing: border-box;
}

/* 確認ポイントのタイトル */
.check-box-title {
    text-align: center;
    font-weight: bold !important;
    color: #007ba3;            
    font-size: 18px !important; 
    margin: 0 0 15px 0 !important; 
    padding: 0;
    position: relative;
}
/* ★修正：テキストと画像の縦方向の配置をきれいに揃える */
.check-box-inner {
    display: flex;
    align-items: stretch;      /* 上下いっぱいに広げてバランスを取る */
    justify-content: space-between;
    gap: 30px;                 /* すき間を少し広げて窮屈感をなくす */
}

/* 確認ポイントのリスト */
.check-box-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;                   
    display: flex;
    flex-direction: column;
    justify-content: center;   /* テキストを上下中央に配置して綺麗に見せる */
}

/* ★修正：画像のサイズを大きくして、右側の中央に配置する */
.check-box-img {
    flex: 0 0 200px;           /* 横幅を 160px から 200px に大きくします */
    text-align: center;
    display: flex;
    align-items: center;       /* 画像を上下中央に配置 */
    justify-content: center;
}

.check-box-img img {
    width: 100%;
    height: auto;
    display: block;
}

.check-box-list li {
    position: relative;
    padding-left:23px;       /* 左側の隙間 */
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.6;         
    color: #333;
}

.check-box-list li:last-child {
    margin-bottom: 0;
}

/* ★変更箇所：特殊記号を使わず、CSSの線でチェックマークを描く（絶対に文字化けしません） */
.check-box-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 10px;
    height: 5px;
    border-left: 3px solid #0093c4;  /* 水色の線 */
    border-bottom: 3px solid #0093c4;/* 水色の線 */
    transform: rotate(-45deg);       /* 傾けてチェックマークにする */
}

/* --- 横いっぱいに広げる赤色の注意書き枠 --- */
.caution-box {
    width: 100%;               
    max-width: 850px;          
    margin: 20px auto 0 auto;  
    padding: 20px;
    border: 3px solid #cc0000;  
    border-radius: 6px;
    background-color: #FFF5F5; 
    box-sizing: border-box;
    order: 3;                  
}

.caution-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* 「注意」のタイトル部分 */
.caution-title {
    font-weight: bold !important;
    color: #cc0000;            
    font-size: 18px !important; 
    text-align: center;
    margin: 0 0 8px 0 !important; 
    padding: 0;
    
    /* ★画像と文字を綺麗に中央で横並びにする設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;                  /* ??マークと「注意」の文字のすき間 */
}

/* ★追加：アイコン画像のサイズと位置の微調整 */
.caution-icon {
    width: 20px;               /* ??マークの横幅（お好みのサイズに調整してください） */
    height: auto;              /* 縦横比を維持 */
    flex-shrink: 0;            /* 画面が狭くなっても画像が潰れないようにする */
    position: relative;
    top: -1px;                 /* 文字との高さを合わせる微調整（不要なら消してOK） */
}
/* 開通時期の目安のブロック調整 */
.period-guide {
    background-color: #fafafa; /* ほんのり薄いグレーの背景で少し目立たせる */
    padding: 15px;
    border-radius: 5px;
    margin: 15px 0;
    font-size: 14px;
    line-height: 1.8;
}

/* ■ のアイコンの色をてんくら風の水色にする */
.period-guide span {
    color: #0093c4;
    font-size: 12px;
    margin-right: 5px;
    vertical-align: middle;
}

/* 外側のグレーの箱 */
.relief-station-box {
  background-color: #f7f7f7; /* 背景色：薄いグレー */
  border-radius: 6px;        /* 角の丸み */
  padding: 20px;             /* 内側の余白 */
  margin-top: 20px;       /* 下の「注意」との間隔 */
}

/* タイトル部分（元h3の代わり） */
.relief-station-title {
  font-size: 18px;
  color: #333333;
  font-weight: bold;         /* 文字を太くする */
  text-align: center;        /* 中央寄せ */
  margin-bottom: 15px;       /* 説明文との間のスキマ */
}

/* 説明文部分 */
.relief-station-text {
  font-size: 14px;
  color: #444444;
  line-height: 1.6;
  margin: 0;
}

.closing-box{
    font-size: 15px;
    line-height: 1.6;
}


/* グレー背景のボックス全体 */
.tozansisu-info-box {
  max-width: 100%;          /* ボックスの最大横幅（お好みに合わせて調整してください） */
  margin: 20px auto;         /* 上下の余白と中央寄せ */
  background-color: #f2f2f2; /* 薄いグレーの背景色 */
  padding: 24px;             /* 内側の余白 */
  box-sizing: border-box;
}

/* 中央寄せのタイトル */
.tozansisu-title {
  text-align: center;
  font-weight: bold;
  font-size: 1.1rem;
  color: #333333;
  margin-bottom: 12px;
}

/* 説明文のテキスト */
.tozansisu-text {
  font-size: 15px;
  line-height: 1.6;
  color: #444444;
  margin: 0 0 20px 0;
  text-align: justify; /* 両端揃えできれいに見せます */
}

.tozansisu-text strong {
  color: #d35400; /* 「風の強さ」を目立たせるオレンジ色 */
}

/* ボタン（オレンジ色ベース） */
.tozansisu-btn {
  display: block;
  width: 40%;                  /* ボタンの横幅（左右に少し余裕を持たせる） */
  max-width: 400px;
  margin: 0 auto;              /* ボタンを中央寄せ */
  background-color: #e67e22;    /* 富士山の吹き出しに合わせたオレンジ */
  color: #ffffff !important;    /* 文字色は白 */
  text-align: center;
  text-decoration: none;        /* 下線を消す */
  font-weight: bold;
  font-size:16px;  
  padding: 12px 20px;           /* ボタン上下左右の余白 */
  border-radius: 25px;          /* カプセル型の角丸 */
  box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* ぽてっとした立体感の影 */
  transition: all 0.3s ease;
}

/* ボタンにマウスを乗せたときの動き */
.tozansisu-btn:hover {
  background-color: #d35400;    /* 少し濃いオレンジに */
}

/* 画像サイズ調整*/
.outfit img{
  width: 65%; /* 親要素の幅を超えないようにする */
  height: auto;    /* 縦横比（アスペクト比）を自動で保つ */
}

/* --- モバイル対応 (768px以下) --- */
@media screen and (max-width: 768px) {
    .top-text {
        font-size: 26px;
        text-align: left;
    }

    .update-item {
        flex-direction: column;
        align-items: center;
        gap: 0px;
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .update-img {
        flex: 0 0 auto;
        width: 85%;
        max-width: 320px;
    }

    .update-text {
        width: 100%;
        padding: 0 10px;
    }

    .update-item h3 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .explanation-text {
        font-size: 26px;
        line-height: 1.6;
        text-align: left;
    }


/* 目次全体の枠組み（中央寄せ・下の要素への影響を防ぐ構造） */
.toc-container {
  max-width: 560px;         /* 目次の最大幅 */
  width: 100%;              /* 横幅を100%にして下の要素の回り込みを防ぐ */
  margin: 0px auto 30px auto;   /* 下要素との間に 30px の安全な余白を確保 */
  padding: 20px;            /* 枠内の適度な余白 */
  border: 2px solid #72aa75;   /* 濃い緑色の四角い枠 */
  border-radius: 4px;       /* 角を少しだけ丸く */
  box-sizing: border-box;   /* パディングを含めたサイズ計算 */
}

/* 「目次」タイトルのスタイル（確実に表示させ、太字にしない設定） */
.fuji-toc-title {
  display: block !important; /* 強制的に表示する */
  text-align: center;       /* タイトルを中央寄せ */
  font-weight: bold;      /* 太字にしない（通常の太さ） */
  font-size: 1.8rem;        /* 少し大きめに */
  color: #1b5e20;           /* 深い緑色 */
  margin: 0 0 15px 0;       /* 項目との間の余白 */
  padding: 0 0 5px 0;
}

/* 確認ポイントのタイトル */
.check-box-title {     
    font-size: 1.8rem !important; 
}

.check-box-list li {
    padding-left:40px;       /* 左側の隙間 */
    font-size: 1.5rem;
}

.check-box-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    width: 20px;
    height: 10px;
    border-left: 6px solid #0093c4;  /* 水色の線 */
    border-bottom: 6px solid #0093c4;/* 水色の線 */
    transform: rotate(-45deg);       /* 傾けてチェックマークにする */
}

/* --- 横いっぱいに広げる赤色の注意書き枠 --- */
.caution-box {
    width: 100%;               
    max-width: 850px;          
    margin: 40px auto 0 auto;  
    padding: 20px;
    border: 2px solid #cc0000;  
    border-radius: 6px;
    background-color: #FFF5F5; 
    box-sizing: border-box;
    order: 3;                  
}

.caution-box p {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #333;
}

/* 「注意」のタイトル部分 */
.caution-title {
    font-weight: bold !important;
    color: #cc0000;            
    font-size: 1.8rem !important; 
    text-align: center;
    margin: 0 0 15px 0 !important; 
    padding: 0;
    
    /* ★画像と文字を綺麗に中央で横並びにする設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;                  /* ??マークと「注意」の文字のすき間 */
}

/* ★追加：アイコン画像のサイズと位置の微調整 */
.caution-icon {
    width: 34px;               /* ??マークの横幅（お好みのサイズに調整してください） */
    height: auto;              /* 縦横比を維持 */
    flex-shrink: 0;            /* 画面が狭くなっても画像が潰れないようにする */
    position: relative;
    top: -1px;                 /* 文字との高さを合わせる微調整（不要なら消してOK） */
}    
    
/* 開通時期の目安のブロック調整 */
.period-guide {
    background-color: #fafafa; /* ほんのり薄いグレーの背景で少し目立たせる */
    padding: 15px;
    border-radius: 5px;
    margin: 15px 0;
    font-size: 1.6rem;
    line-height: 1.8;
}

/* ■ のアイコンの色をてんくら風の水色にする */
.period-guide span {
    color: #0093c4;
    font-size: 1.6rem;
    margin-right: 0px;
    vertical-align: middle;
}

/* 万が一の体調不良にタイトル部分*/
.relief-station-title {
  font-size: 1.8rem;
}

/* 説明文部分 */
.relief-station-text {
  font-size: 1.6rem;
  color: #444444;
  line-height: 1.6;
  margin: 0;
}

/* 登山指数中央寄せのタイトル */
.tozansisu-title {
  font-size: 1.8rem;
}

/* 説明文のテキスト */
.tozansisu-text {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #444444;
  margin: 0 0 20px 0;
  text-align: justify; /* 両端揃えできれいに見せます */
}

/* ボタン（オレンジ色ベース） */
.tozansisu-btn {
  display: block;
  width: 80%;                  /* ボタンの横幅（左右に少し余裕を持たせる） */
  max-width: 400px;
  margin: 0 auto;              /* ボタンを中央寄せ */
  background-color: #e67e22;    /* 富士山の吹き出しに合わせたオレンジ */
  color: #ffffff !important;    /* 文字色は白 */
  text-align: center;
  text-decoration: none;        /* 下線を消す */
  font-weight: bold;
  font-size:1.5rem;  
  padding: 15px 20px;           /* ボタン上下左右の余白 */
  border-radius: 25px;          /* カプセル型の角丸 */
  box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* ぽてっとした立体感の影 */
  transition: all 0.3s ease;
}

.closing-box{
    font-size: 1.6rem;
}

/* 画像サイズ調整 */
.smartphone img{
  width: 110%; /* 親要素の幅を超えないようにする */
  height: auto;    /* 縦横比（アスペクト比）を自動で保つ */
}
.rule img{
  width: 110%; /* 親要素の幅を超えないようにする */
  height: auto;    /* 縦横比（アスペクト比）を自動で保つ */
}

.temperature img{
  width: 110%; /* 親要素の幅を超えないようにする */
  height: auto;    /* 縦横比（アスペクト比）を自動で保つ */
  display: block;   /* 画像をブロック要素に変える */
  margin-right: 50px; /* 右側の余白を自動で最大にして、左に押し付ける */
  margin-left: 0;     /* 左側の余白をゼロにする */
}   

.shuttlebus img{
  width: 110%; /* 親要素の幅を超えないようにする */
  height: auto;    /* 縦横比（アスペクト比）を自動で保つ */
}

.outfit img{
  width: 80%; /* 親要素の幅を超えないようにする */
  height: auto;    /* 縦横比（アスペクト比）を自動で保つ */
}

.manners img{
  width: 120%; /* 親要素の幅を超えないようにする */
  height: auto;    /* 縦横比（アスペクト比）を自動で保つ */
  margin-top:330px;
  margin-right:30px;
}

}