.emphasis {
    font-weight: bold; 
    color: #45B29D;
}

.text-content {
    color:rgba(255, 255, 255, 0.8);
    flex: 1; /* テキストエリアが可変幅を持つ */
    padding-right: 20px; /* 右側に画像との隙間を設定 */
    text-align: center;
    flex: 0 0 60%; /* テキストエリアの幅を60%に設定 */
    padding-right: 20px; /* 右側に画像との隙間を設定 */
}

.content-wrapper {
    display: flex; /* フレックスボックスを使用 */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 20px; /* コンテンツ全体の内側のスペース */
}

.hero-image {
    flex: 0 0 30%; /* 画像エリアの幅を40%に設定 */
}

.hero-image img {
    width: 100%; /* 画像を画面幅に合わせる */
    height: auto; /* アスペクト比を維持 */
    display: block; /* ブロック要素にすることで隙間をなくす */
}

.text-nomal-content {
    margin: 10px;
    text-align: center;
    font-size: 15px;
    color:rgba(255, 255, 255, 0.8);
}

/* ランキング　*/
/* .Axis クラスのスタイル: テキストの色、行の高さ、パディングを設定 */
.Axis {
    color: white;
    line-height: 1em;
    padding: 2em;
}

/* h3およびh6要素の共通スタイル: マージンと行の高さを設定 */
h3, h6 {
    margin: 0;
    line-height: 1em;
}

/* h3要素の個別スタイル: 下部にマージンを設定 */
h3 {
    margin-bottom: 1em;
}

/* h6要素の個別スタイル: フォントサイズ、パディング、テキストの色を設定 */
h6 {
    font-size: .8em;
    padding: 0 0 .5em;
    color: #919191;
}

/* figure要素のスタイル: 中央配置、最大幅、相対位置を設定 */
figure {
    margin: 0 auto;
    max-width: 1100px;
    position: relative;
}

/* .graphic クラス: 左側にパディングを設定 */
.graphic {
    padding-left: 30px;
}

/* .row クラス: 下にマージンを設定 */
.row {
    margin-bottom: 1em; /* 行間を詰める */
}

/* キーフレームアニメーション "expand": 幅を0%から100%へ拡張 */
@keyframes expand {
    from {width: 0%;}
    to {width: 100%;}
}

/* メディアクエリ: 画面幅が768px以上のときのアニメーションの幅を変更 */
@media screen and (min-width: 768px) {
    @keyframes expand {
        from {width: 0%;}
        to {width: calc(100% - 75px);} /* 幅を100%から75px減らしたサイズに */
    }
}

/* .chart クラス: オーバーフローを隠し、幅を0%で開始、アニメーションで展開 */
.chart {
    overflow: hidden;
    width: 0%;
    animation: expand 1.5s ease forwards;
    display: flex; /* flexboxを使用して、子要素を並べる */
    align-items: flex-end; /* 子要素を下部に揃える */
}

/* .block クラス: 見た目や基本のレイアウト、ホバー時の効果を設定 */
.block {
    display: block;
    height: 60px; /* 高さを短くする */
    color: #fff;
    font-size: .75em;
    background-color: #45B29D;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transition: opacity .3s ease;
    cursor: pointer;
    margin: 0; /* マージンを削除して揃える */
}

.block:nth-of-type(2),
.legend li:nth-of-type(2):before {
	background-color: #334D5C;
}


/* .value クラス: 中央に配置し、位置を絶対値で指定 */
.value {
    display: block;
    line-height: 60px; /* 高さに合わせて行の高さを設定 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央揃え */
}

/* .x-axis クラス: 中央揃えでパディングを設定 */
.x-axis {
    text-align: center;
    padding: .5em 0 1em; /* 下部のパディングを減らす */
}

/* .y-axis クラス: 特定の変換を設定し、絶対位置を指定 */
.y-axis {
    height: 20px;
    transform: translate(-32px, 170px) rotate(270deg);
    position: absolute;
    left: 0;
}

/* .legend クラス: マージン、パディング、フォントサイズを設定 */
.legend {
    margin: 0 auto;
    padding: 0;
    font-size: .9em;
}

/* .legend li要素: インラインブロック表示とパディングを設定 */
.legend li {
    display: inline-block;
    padding: .25em 1em;
    line-height: 1em;
}

/* .legend liの擬似要素: 色付きブロックを表示 */
.legend li:before {
    content: "";
    margin-right: .5em;
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #45B29D;
}

/* メディアクエリ: 768px以上の画面でのh6要素や.legendの表示変更 */
@media screen and (min-width: 768px) {
    h6 {
        padding: 0;
        width: 75px;
        float: left;
        line-height: 60px; /* 高さに合わせて行の高さを調整 */
    }
    .block {
        font-size: 1em;
    }
    .legend {
        width: 50%;
    }
}

.toc-001 {
    margin: 30px auto; /* 上下のマージンを30px、左右は自動で中央揃え */
    padding: 1em; /* 上下左右に均等なパディング */
    border: 1px solid #ffffff;
    color: #ffffff;
    width: 90%; /* 全体の幅を90%に設定 */
    max-width: 600px; /* 最大幅を600pxに設定 */
}

.toc-001 div {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px 0;
}

.toc-001 ol {
    list-style-type: decimal;
    margin: 0;
    padding: 0 1.2em; /* 内側のpaddingを維持 */
    overflow: hidden;
}

.toc-001 ol ol {
    margin-top: 5px;
}

.toc-001 li {
    padding: 5px 0;
}

.toc-001 a {
    color: #ffffff;
}

body {
    background-color: rgba(255, 255, 255, 0.1);
}


/* テーブルの基本スタイル */
table {
    width: 40%;
    border-collapse: collapse;
    margin: auto; /* テーブル全体を中央に配置 */
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    border: 2px solid #333; /* テーブル全体に外枠の線を追加 */
    margin-left: 90px; /* 左側に余白を追加 */
}
/* レイアウト全体のスタイル */
.container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 写真とテーブルの上端を揃える */
    margin-top: 20px;
}

/* 左側のテーブルのスタイル */
.table-container {
    width: 50%;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

th, td {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
}

/* テーブルと画像の幅を詰める */
.table-container, .image-container {
    width: auto;
    flex: 1;
}

.table-container table {
    width: 100%;
}

.image-containerz img {
    max-width: 80%;
    height: auto;
}

/*　アコーディング　*/
.toggle-box-button {
    background-color: #000000;
    color: #ffffff;
    font-family: serif;
    font-size: 20px;
    padding: 40px;
    text-align: center;
    width: 70%;
    cursor: pointer;
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    margin: 30px auto; /* 上下のマージンを30px、左右は自動で中央揃え */
    border: 1px solid #ffffff;
}


.imgDiv {
    max-width: 700px;
    max-height: 600px;
    overflow: auto; /* スクロール可能にする */
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: flex-start; /* 垂直方向の上寄せ */
    position: relative; /* 親要素に相対位置を設定 */
}

.imgDiv img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 画像が縦横比を保ちながら親要素内に収める */
    display: block; /* 画像をブロック要素として表示 */
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container img {
    max-width: 60%; /* 画像が親の幅を超えないように */
    height: auto; /* 高さは自動で調整 */
}

.container-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-image img {
    max-width: 30%;
    height: auto;
    display: block;
}