/* 共通部分
---------------------------------*/

body {
    font-family: "Yu Mincho", "游明朝", "MS Mincho", serif; /* 明朝体 */
    color: #f8f4f6;
    background-color: #0d0d0d;
    line-height: 1.0;
    width: 100%;
    margin: 0;
    overflow-x: hidden !important;
}



.centered_text {
    text-align: center;
}

a{
    text-decoration: none;
}

/* タイトル
---------------------------------*/

section.title {
    padding-top: 16rem;
}

section.title .subtitle {
    position: absolute;
    left: -1.5rem;
    top: 23rem;
    color: #0d0d0d;
    background-color: #f8f4f6;
    width: fit-content;
    padding: .7rem;
    padding-left: 3rem;
    padding-right: 1rem;
    font-family: "yu gothic medium", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic Medium", sans-serif;
}

h3.leftside{
    position: absolute;
    left: 2.5rem;
    top: 14rem;
}

div.same-line {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

section.title h1, 
section.title h2, 
section.title h3 {
    margin: 0;
}

.shadow{
    text-shadow: 2px 2px #6e6e6e;
}
section.title h1 {
    font-size: 5rem;
    color: #c5a059;
    text-shadow: 2px 2px #b22d1d;
}
section.title h2 {
    font-size: 4rem;
}
section.title h3 {
    font-size: 2rem;
}       

.cloud1 {
    position: absolute;
    left: -.5rem;
    top: 2.5rem;
    width: 15rem;
}

.cloud2 {
    position: absolute;
    right: 0rem;
    top: 20rem;
    width: 15rem;
}

.crane {
    position: absolute;
    z-index: 10;
    left: .8rem;
    top: 25rem;
    width: 15rem;
}

/* 概要説明
---------------------------------*/

section.explanation {
    position: relative;
    z-index: 1;
    margin-top: 30rem;
    width: 100%;
    background: linear-gradient(#0d0d0d, #f8f4f6,#0d0d0d,#0d0d0d);
}                  
/*
section.explanation div{
    position: relative;
    z-index:20;
    top: 10%;
}*/
section.explanation p {
    text-align: left;
    /*color: #0d0d0d;
    background-color: #f8f4f6;*/
    width: fit-content;
    margin: 2rem auto;  
    padding: 1rem;
    /*font-size: 2rem;*/
    font-size: 1.5rem;
    border-radius: .5rem;
    line-height: 2.7rem;
}

.namecall
{
    font-size: 3rem;
    color: #c5a059;
}

.background {
    display: block;
    width: 100%;   /* 横幅を親要素に合わせる */
    height: auto;  /* 高さは自動（比率を維持） */
}

/* 「はじめに」とINDEXをセットにして画像の上に配置する */
.explanation-content {
    position: absolute; 
    top: 40rem; /* ★元の35remだと下に寄りすぎてINDEXが画像からはみ出る可能性があるため数値を小さくしました。お好みの位置に調整してください */
    left: 0;          
    width: 100%;        
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center; /* 左右中央揃え */
}


/* --- INDEXセクションのスタイル --- */
.index-wrapper a{
    color: #f8f4f6; 
}
.index-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    
    margin-top: 5rem; /* 「はじめに」からの余白 */
    margin-bottom: 60px; /* 次のセクションへの余白 */
    padding: 0 20px;
}

.index-container {
    border: 3px solid #bda85e; /* 金色の枠線 */
    padding: 40px 30px;
    width: 90vw;
    box-sizing: border-box;
    font-family: "Yu Mincho", "游明朝", "MS Mincho", serif; /* 明朝体 */
    color: #ffffff;
    /* 背景画像に文字が紛れないよう、暗めの背景色と文字の影を追加 */
    background-color: rgba(0, 0, 0, 0.3); 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.index-title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 0 40px 0;
    font-weight: normal;
    letter-spacing: 2px;
}

.index-title span {
    border-bottom: 3px solid #ffffff; /* 下線 */
    padding-bottom: 5px;
    display: inline-block;
}

.index-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.index-list > li {
    margin-bottom: 30px;
}

.index-main {
    font-size: 1.6rem;
    margin-bottom: 12px;
    line-height: 1.4;
}

.index-sub {
    list-style: none;
    padding: 0 0 0 20px; /* サブ項目の字下げ */
    margin: 0;
}

.index-sub li {
    font-size: 1.2rem;
    margin-bottom: 10px;
    letter-spacing: 1px;
    line-height: 1.4;
}

/* コンテンツ
---------------------------------*/
.contents{
    margin-top: 7rem;
}

.img1, 
.left, 
.contents h2, 
.contents h3, 
p.sentence1,
.button_vm{
    position: relative;
    z-index: 20;
}

/* 混雑を知る・避ける
---------------------------------*/
:root{
  --gold:#9C7B2F;
  --red:#9E2A1F;
  --white:#ffffff;
}

/* 背景 */

.congestion-section{
  background:url("../img/背景.webp") center/cover no-repeat;
  padding:2rem 1.2rem;
}

.overlay{
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(4px);
  padding:0.2rem 1rem 1rem;
}

/* タイトル */

.main-title{
  text-align:center;
  font-size:2.2rem;
  line-height:1.6;
  color:#000;
  margin-bottom:2rem;
  font-family:"Hiragino Mincho ProN",serif;
  letter-spacing:.15em;
}

.main-title .small{
  font-size: 0.7em;
}

/* ================= 帯リンク全体 ================= */
.banner{
  display:block;
  width:100%;            /* コンテナ幅に沿う */
  margin-bottom:1.2rem;
  text-decoration:none;
}

/* ================= 帯本体 ================= */
.card{
  position:relative;
  display:flex;
  align-items:center;
  height:5.5rem;
  overflow:hidden;
  margin-left: -1rem;
  margin-right: -1rem;
}

/* ================= 中身だけ中央幅 ================= */
.card-inner{
  width:100%;              /* コンテナ幅いっぱい */
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1rem;          /* 左右に余白 */
}

/* ================= テキスト側 ================= */
.content{
  color:#fff;
}

/* ================= 矢印側 ================= */
.arrow-box{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ================= テーマ ================= */
.red .card{
  background:var(--red);
}

.gold .card{
  background:var(--gold);
}

/* ================= 内側の薄い枠（カードごとに色変え可） */
.card::before{
  content:"";
  position:absolute;
  inset:.4rem;
  border:1px solid var(--frame-color, rgba(255,255,255,0.35));
}

.red{
  --frame-color:#9C7B2F;
}

.gold{
  --frame-color:#9E2A1F;
}

/* テキスト */

.text{
  position:relative;
  z-index:2;
  padding-left:1.4rem;
  color:var(--white);
}

.text.dark{
  color:#000;
}

.title{
  font-size:1.2rem;
  margin-bottom:.3rem;
}

.sub{
  font-size:.65rem;
  opacity:.8;
}

/* 透かし漢字 */

.kanji{
  position:absolute;
  right: 0.5rem;
  font-size:3.8rem;
  font-family:"Hiragino Mincho ProN",serif;
  color:rgba(255,255,255,0.18);
}

.gold .kanji{
  color:rgba(158,42,31,0.35);
}

/* 矢印エリア */

.arrow{
  position:absolute;
  right:0;
  top:0;
  width:3.2rem;
  height:100%;
  border-left:1px solid rgba(255,255,255,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
}

.arrow::after{
  content:"";
  width:.55rem;
  height:.55rem;
  border-top:2px solid var(--white);
  border-right:2px solid var(--white);
  transform:rotate(45deg);
}

/* 金カードの矢印色 */

.gold .arrow::after{
  border-color: #9E2A1F;
}

/* hover */

.banner:hover .card{
  transform:translateY(-4px);
  transition:.3s;
}
/*統計１*/
.content1{
    position: relative;
    margin-bottom: 20rem;
}

.img1 {
    width: 65%;
    /*display: block;
    margin: 0 auto;*/
}
.graph_tmp{
    position: relative;
    z-index: 20;
}

.left{
    /*left: -32%;*/
    text-align: left;
}

.contents h2{
    font-size: 2rem;
    font-family: "yu gothic medium", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic Medium", sans-serif;
    color: #0d0d0d;
    background-color: #f8f4f6;
    width: fit-content;
    margin: 2.3rem auto;  
    padding: 1rem;
    white-space: nowrap;
}

.contents h3{
    font-size: 1.5rem;
}

p.sentence1 {
    width: 80%;
    text-align: left;
    font-size: 1rem;
    margin: 2rem auto;
    line-height: 1.5rem;
}

.button_vm {
    padding: 0.5rem;
    font-size: 1.5rem;
    color: #0d0d0d;
    background-color: #f8f4f6;
    border: none;
    border-radius: 0.3rem;
    /* right: -25%; を削除し、以下のように変更 */
    display: block;
    margin: 0 10% 0 auto; /* 右側に10%の余白を取りつつ右寄せ */
}
/* 最初は隠しておく設定 */
.more-content {
    display: none;
    overflow: hidden;
}

/* ボタン内の矢印のスタイリング */
.arrow-icon {
    display: inline-block;
    transition: transform 0.3s ease; /* 回転用のアニメーション */
    margin-right: 5px;
}

/* 開いている時のボタン（JSでクラスを付与します） */
.button_vm.is-open .arrow-icon {
    transform: rotate(180deg); /* 矢印を逆にする */
}

/* 既存のbutton_vmのスタイルを少し調整（位置固定など） */
.button_vm {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 10% 0 auto;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

:hover.button_vm {
    background-color: #c5a059;
    color: #f8f4f6;
    cursor: pointer;
}

/*装飾*/

.circle {
    position: absolute;
    z-index: 10;
    right: 0%;
    top: -8%;
    width: 70%;
}

.cloud3{
    position: absolute;
    z-index: 10;
    left: 0;
    top: 100%;
    width: 50%;
}

.crane2{
    position: absolute;
    z-index: 10;
    left: 35%;
    top: 100%;
    width: 65%;
}

.stress{
    background-color: #9e2a1f;
    color: #f8f4f6;
    border: 2px solid #c5a059;
}

.data-list
{
    position: relative;
    z-index: 9999;
    margin: 2pt;
    padding: 2pt;
    background-color: white;
    color: black;
}