body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFCB66;
    padding-top: 50px; /* ヘッダーの高さに合わせて調整 */
}

.header-menu {
    background-color: rgba(255, 127, 80, 0.9);
    padding: 0px 0; /* 上下のパディングを追加 */
    position: fixed; /* 画面上部に固定 */
    top: 0; /* 上部に固定 */
    width: 100%; /* 幅を100%に設定 */
    z-index: 1000; /* 他の要素より前面に表示 */
}

.top-nav-links {
    list-style: none;
    padding: 4px 0;
    display: flex;
    justify-content: center;
    margin: 0;
}

.top-nav-links li {
    margin: 0 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-nav-links li i {
    font-size: 16px;
    margin-bottom: 5px;
}

.top-nav-links a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-text {
    font-size: 14px;
    font-weight: normal;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 2px;
}

.top-nav-links li:hover a, .top-nav-links li:hover i {
    color: #000; /* ホバー時の文字色とアイコン色を黒に設定 */
    font-weight: bold; /* 文字を太字に設定 */
}

.site-header {
    padding: 10px 0;
    text-align: center;
    color: #fff;
}

.nav {
    display: flex;
    flex-direction: column; /* デフォルトは縦方向 */
    align-items: center; /* デフォルトは中央揃え */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    background-color: #FFCB66;
}

.logo-wrapper {
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    width: 100%;
}

.logo-link {
    display: block;
}

.logo {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

.nav-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row; /* 横方向に変更 */
    align-items: center;
}

.nav-links li {
    margin: 0 20px;
}

.nav-links a {
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    margin-right: 100px;
    text-decoration: none; /* デフォルトの下線を削除 */
    display: inline-block;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px; /* 文字と下線の間に空白を追加 */
    height: 2px; /* 下線の高さを設定 */
    background-color: currentColor; /* 文字色と同じ色に設定 */
}

.nav-links a:hover {
    color: #fff; /* ホバー時の文字色を設定 */
}

.header-banner-container {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    padding: 20px;
    max-width: 1200px;
}

.header-banner {
    display: flex;
    align-items: center;
    padding: 10px 55px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 40px;
    max-width: 600px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* リンクの色を継承 */
    transition: transform 0.3s ease-in-out; /* アニメーションの設定 */
}

.header-banner:hover {
    transform: scale(1.05); /* ホバー時にバナーが少し大きくなる */
}

.header-banner a {
    display: flex;
    align-items: center;
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* リンクの色を継承 */
}

.header-banner p {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin: 0;
    text-align: left;
    flex-grow: 1; /* テキスト部分をできるだけ広げる */
}

.header-banner .small-text {
    font-size: 14px;
    color: red;
    font-weight: normal;
    text-align: left; /* 左寄せ */
}

.header-banner .arrow-icon {
    font-size: 24px; /* アイコンの大きさを設定 */
    color: #000; /* アイコンの色を設定 */
    margin-left: 36px; /* テキストとの間にスペースを追加 */
}

.header-banner a {
    text-decoration: none;
}

.main-title {
    padding: 20px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.title-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右に要素を分ける */
}

.ranking-title {/* 総合ランキング用 */
    text-align: left; /* 左寄せ */
    font-size: 52px; /* 文字サイズを大きく */
    font-weight: bold; /* 太字 */
    margin: 20px 10px 20px 0; /* 右にマージンを追加 */
}

.feeranking-titles {/* 保険料ランキング用 */
    display: flex;
    flex-direction: column; /* タイトルを縦に並べる */
}

.feeranking-title {/* 保険料ランキング用 */
    text-align: left; /* 左寄せ */
    font-size: 52px; /* 文字サイズを大きく */
    font-weight: bold; /* 太字 */
    margin: 0px 0; /* 上下のマージンを調整 */
}

.feeranking-subtitle {/* 保険料ランキング用 */
    text-align: left; /* 左寄せ */
    font-size: 38px; /* 文字サイズを大きく */
    font-weight: bold; /* 太字 */
    margin: 0px 0; /* 上下のマージンを調整 */
}

.summary-note {
    text-align: right; /* 右寄せ */
    font-size: 16px; /* 「※概要」の文字サイズを設定 */
    color: #000; /* 文字の色を設定 */
}

/* タブボタンのスタイル */
.tabs {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    max-width: 1200px;
}

.tab-button {
    background-color: #FFCB66;
    border: 2px solid #000;
    margin: 5px 2px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    height: 88px;
    flex: 1; /* 各ボタンが同じ幅を取るようにする */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.tab-button.main-tab {
    border: none;
    position: relative;
    padding-bottom: 10px;
}

.tab-button, .tab-button.main-tab {
    margin-left: 10px;
    margin-right: 10px;
}

.tab-button.main-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* 下線の幅をボタン幅に対して調整 */
    height: 9px;
    background-color: #ABD6B8;
}

.tab-button-link {
    text-decoration: none;
    flex: 1;
    display: flex;
}

.tab-button-link:hover .tab-button {
    background-color: #FFCB66;
    color: #fff;
    border-color: #fff;
}

.tab-button:not(.main-tab):hover {
    background-color: #FFCB66;
    border-color: #fff;
    color: #fff;
}

.description-bubble {/* 総合ランキング用 */
    position: relative;
    background: #ACD6B8;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px;
    max-width: 80%;
    margin: 20px auto;
}

.description-bubble::before {/* 総合ランキング用 */
    content: '';
    position: absolute;
    top: -20px; /* 矢印を上部に表示 */
    left: 47px; /* 矢印の位置を調整 */
    border-width: 0px 11px 18px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
}

.description-bubble::after {/* 総合ランキング用 */
    content: '';
    position: absolute;
    top: -23px; /* 矢印の上部の黒縁 */
    left: 46px; /* 矢印の位置を調整 */
    border-width: 9px 12px 18px;
    border-style: solid;
    border-color: transparent transparent #ACD6B8 transparent;
}

.hdescription-bubble {/* H構造用 */
    position: relative;
    background: #ACD6B8;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px;
    max-width: 80%;
    margin: 20px auto;
}

.hdescription-bubble::before {/* H構造用 */
    content: '';
    position: absolute;
    top: -20px; /* 矢印を上部に表示 */
    left: 335px; /* 矢印の位置を調整 */
    border-width: 0px 11px 18px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
}

.hdescription-bubble::after {/* H構造用 */
    content: '';
    position: absolute;
    top: -23px; /* 矢印の上部の黒縁 */
    left: 334px; /* 矢印の位置を調整 */
    border-width: 9px 12px 18px;
    border-style: solid;
    border-color: transparent transparent #ACD6B8 transparent;
}

.tdescription-bubble {/* T構造用 */
    position: relative;
    background: #ACD6B8;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px;
    max-width: 80%;
    margin: 20px auto;
}

.tdescription-bubble::before {/* T構造用 */
    content: '';
    position: absolute;
    top: -20px; /* 矢印を上部に表示 */
    left: 555px; /* 矢印の位置を調整 */
    border-width: 0px 11px 18px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
}

.tdescription-bubble::after {/* T構造用 */
    content: '';
    position: absolute;
    top: -23px; /* 矢印の上部の黒縁 */
    left: 554px; /* 矢印の位置を調整 */
    border-width: 9px 12px 18px;
    border-style: solid;
    border-color: transparent transparent #ACD6B8 transparent;
}

.mdescription-bubble {/* M構造用 */
    position: relative;
    background: #ACD6B8;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 20px;
    max-width: 80%;
    margin: 20px auto;
}

.mdescription-bubble::before {/* M構造用 */
    content: '';
    position: absolute;
    top: -20px; /* 矢印を上部に表示 */
    left: 807px; /* 矢印の位置を調整 */
    border-width: 0px 11px 18px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
}

.mdescription-bubble::after {/* M構造用 */
    content: '';
    position: absolute;
    top: -23px; /* 矢印の上部の黒縁 */
    left: 806px; /* 矢印の位置を調整 */
    border-width: 9px 12px 18px;
    border-style: solid;
    border-color: transparent transparent #ACD6B8 transparent;
}

.tab-button-link {
    text-decoration: none;
    flex: 1;
    display: flex;
}

.tab-button-link:hover .tab-button {
    background-color: #FFCB66;
    color: #fff;
    border-color: #fff;
}

.tab-button:not(.main-tab):hover {
    background-color: #FFCB66;
    border-color: #fff;
    color: #fff;
}

.description-text {
    text-align: left; /* 左揃え */
    margin: 0;
}

.description-note {
    text-align: left; /* 左揃え */
    font-size: 12px; /* 小さい文字サイズを設定 */
    margin: 0;
}

.ranking {
    max-width: 1200px;
    margin-top: -50px;
    margin-left: auto;
    margin-right: auto;
}

.ranking-item {
    padding: 20px;
    margin: 20px 0;
}

.ranking-header {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    margin: 0;
    width: 97%;
    padding: 10px;
    border: 3px solid #000;
    border-radius: 30px;
    background-color: #fff;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in-out; /* アニメーションの設定 */
}

.ranking-header:hover {
    transform: scale(1.05); /* ホバー時に少し大きくする */
}

.ranking-link {
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* リンクの色を継承 */
    display: block; /* リンク全体をクリック可能に */
}

.prefix {
    margin-right: -5px;
    margin-left: -5px;
}

.rank-number {
    background-color: #ff7f50;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    margin: 0 10px;
}

.suffix {
    margin-left: 30px;
    flex: 1;
}

.arrow-icon {
    font-size: 1.5em;
}

.ranking-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.company-logo {/* 総合ランキング用 */
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-bottom: 40px;
    margin-top: 40px;
}

.feecompany-logo {/* 保険料ランキング用 */
    width: 180px;
    height: auto;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}

.ranking-info {/* 総合ランキング用 */
    flex: 1 1 30%; /* 横幅を3分の1に設定 */
    margin: 0 10px;
    border: 3px solid #000;
    padding: 10px;
    background-color: #fff;
    border-radius: 7px;
}

.feeranking-info {/* 保険料ランキング用 */
    flex: 1 1 30%; /* 横幅を3分の1に設定 */
    margin: 0 10px;
    border: 3px solid #000;
    padding: 10px;
    background-color: #fff;
    border-radius: 7px;
    height: 250px;
}

.ranking-details {/* 総合ランキング用 */
    flex: 1 1 60%;
    margin: 0 10px;
    border: 3px solid #000;
    padding: 10px;
    background-color: #fff;
    border-radius: 7px;
}

.feeranking-details {/* 保険料ランキング用 */
    flex: 1 1 60%;
    margin: 0 10px;
    border: 3px solid #000;
    padding: 10px;
    background-color: #fff;
    border-radius: 7px;
    height: 250px;
}

.evaluation-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.evaluation-header {
    text-align: center;
    margin-bottom: 10px;
}

.evaluation-title {/* 総合ランキング用 */
    font-weight: bold;
    font-size: 19px;
}

.evaluation-feetitle {/* H、T構造用 */
    font-weight: bold;
    font-size: 19px;
}

.evaluation-feetitle::after {/* H、T構造用 */
    content: '建物保険金額：2,000万円、2,500万円　家財保険金額：300万円、500万円';
}

.evaluation-mtitle {/* M構造用 */
    font-weight: bold;
    font-size: 19px;
}

.evaluation-mtitle::after {/* M構造用 */
    content: '建物保険金額：1,000万円、1,500万円　家財保険金額：300万円、500万円';
}

.evaluation-title img {/* 総合ランキング用 */
    width: 19px; /* 画像の幅を設定 */
    height: 19px; /* 画像の高さを設定 */
}

.evaluation-column {
    width: 48%;
}

.info-item {
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wide-info-item {
    width: 67%; /* 横幅を広げる */
}

.info-title {
    width: 220px; /* 統一した幅を設定 */
    text-align: left;
    font-size: 19px;
    margin-left: 30px;
}

.info-feetitle {
    text-align: left;
    font-size: 19px;
    margin-left: 30px;
}

.info-value {
    text-align: left;
    display: inline-block;
    width: 45px; /* 統一した幅を設定 */
    font-size: 21px; /* 記号を大きく表示 */
    line-height: 1; /* 行の高さを調整 */
}

.info-value img {
    width: 24px; /* 画像の幅を設定 */
    height: 24px; /* 画像の高さを設定 */
}

.info-header {
    display: flex;
    align-items: center;
}

.insurance-fees {
    display: flex;
    flex-direction: column;
    margin-left: -18px;
}

.fee-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 150px; /* info-titleと同じ幅を設定 */
    text-align: left;
    margin-bottom: 5px;
    font-size: 21px; /* 記号を大きく表示 */
    line-height: 1; /* 行の高さを調整 */
    margin-left: -15px;
}

.fee-item img {
    width: 24px; /* 画像の幅を設定 */
    height: 24px; /* 画像の高さを設定 */
}

.info-bubble {
    position: absolute;
    left: 0;
    top: 100%;
    width: 200px;
    padding: 10px;
    background: #ACD6B8; /* 緑の背景 */
    color: #000; /* 黒い文字 */
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 10;
    border: 2px solid #000; 
}

.info-bubble::after {
    content: '';
    position: absolute;
    top: -23px; /* 吹き出しの上部に表示 */
    left: 20px; /* 調整可能な位置 */
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent #ACD6B8 transparent; /* 緑の背景に合わせる */
    z-index: -1; /* 矢印を背面に */
}

.info-bubble::before {
    content: '';
    position: absolute;
    top: -28px; /* 矢印の上部の線 */
    left: 18px; /* 調整可能な位置 */
    border-width: 14px;
    border-style: solid;
    border-color: transparent transparent #000 transparent; 
    z-index: -1; /* 矢印を背面に */
}

.info-item:hover .info-bubble {
    display: block;
}

.info-bubble p {
    margin: 0;
}

.info-item.active .info-bubble {
    display: block;
}

.info-item.active .info-header .arrow {
    transform: rotate(180deg);
}

.ranking-review {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.ranking-review img {
    max-width: 80px;
    display: block;
    margin-right: 20px;
}

.speech-bubble {
    position: relative;
    background: #fff;
    border-radius: 0.4em;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #000; /* 黒の枠を追加 */
}

.speech-bubble::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px; /* 左側に表示 */
    width: 0;
    height: 0;
    border: 11px solid transparent; /* 三角形のサイズを調整 */
    border-right-color: #fff; /* 吹き出しの背景色に合わせる */
    border-left: 0;
    margin-top: -11px;
    z-index: 1;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -14px; /* 三角形の枠を調整 */
    width: 0;
    height: 0;
    border: 12px solid transparent; /* 三角形の枠を調整 */
    border-right-color: #000; /* 枠の色を黒に */
    border-left: 0;
    margin-top: -12px;
    z-index: 0;
}

.footer-content {
    background-color: #ff7f50;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

.rank-cta-wrapper {
  position: fixed;
  bottom: 0; /* 画面の下部に固定 */
  left: 50%; /* 中央寄せのために左端を中央に */
  transform: translateX(-50%); /* 左端を中央に寄せるための変換 */
  width: 100%; /* コンテンツの幅を100%に設定（必要に応じて調整） */
  display: flex; /* 中央寄せのためにフレックスボックスを使用 */
  justify-content: center; /* コンテンツを中央に配置 */
  background: #FFCB66; /* 背景色 */
  padding: 20px 0; /* 上下の余白（必要に応じて変更） */
  z-index: 1000; /* 他の要素よりも前面に表示 */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* 上端に薄い影をつける（オプション） */
}

.rank-primary-button-start {
  text-align: center; /* テキストを中央に */
  padding: 10px 20px; /* ボタンの余白 */
  background: #FF7F50; /* ボタンの背景色 */
  color: #fff; /* テキストの色 */
  font-size: 32px;
  border-radius: 5px; /* ボタンの角丸 */
  text-decoration: none; /* 下線を消す */
  font-weight: bold; /* 太字 */
  border: 2px solid #fff; /* 白枠を追加 */
  transition: transform 0.3s, background 0.3s, color 0.3s; /* ホバー時のトランジションを追加 */
}

.rank-primary-button-start:hover {
  background: #ACD6B8; /* ホバー時の背景色 */
  color: #000;
  border: 2px solid #000; /* ホバー時の白枠を維持 */
  transform: scale(1.05); /* ホバー時に少し大きくする */
}

.rank-primary-button-hover {
  display: none; /* オプション：もしこの要素が必要でない場合は非表示 */
}

.footer-content {
    background-color: #FF7F50;
    color: #fff;
    padding: 20px 10px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 100px;
}

.footer-links {
    margin-bottom: 10px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 1200px; /* 横幅を1200pxに指定 */
    margin: 0 auto; /* 中央に表示 */
}

.footer-logo {
    flex: 1 1 30%;
    margin: 20px 0;
    margin-right: -98px;
}

.footer-logo img {
    width: 250px;
    height: auto;
}

.footer-description {
    flex: 1 1 50%;
    text-align: left;
}

.footer-description p {
    margin: 5px 0;
    font-size: 12px;
    max-width: 720px
}

.footer-bottom {
    border-top: 1px solid #fff;
    padding-top: 10px;
}

.footer-bottom p {
    margin: 0;
    font-size: 12px;
}

/* Responsive Design　タブレット用　 */
@media  (max-width: 1030px)  {

    .top-nav-links {
        justify-content: center; /* 中央揃え */
        padding: 0;
    }

    .top-nav-links li {
        margin: 10px 0; /* 上下のマージンを追加 */
        flex-direction: column; /* 縦並びに変更 */
        justify-content: center; /* 中央揃え */
    }

    .top-nav-links li i {
        margin-right: 0; /* 右のマージンをリセット */
        margin-bottom: 5px; /* 下にマージンを追加 */
    }

    .top-nav-links a {
        font-size: 11px; /* 文字の大きさを調整 */
        display: flex;
        flex-direction: column; /* アイコンとテキストを縦並びに */
        margin-right: 9px;
        margin-left: 9px;
        align-items: center; /* 中央揃え */
    }

    .nav-text {
        font-size: 12px;
        font-weight: normal;
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 0px;
    }

    .logo-wrapper {
        display: flex;
        justify-content: center; /* デフォルトは中央揃え */
        width: 100%;
    }

    .logo {
        width: 250px;
        margin-top: 10px;
        margin-bottom: 20px; /* ロゴ画像とナビゲーションリンクの間にスペースを追加 */
    }

    .nav {
        justify-content: space-between; /* スペースを均等に配置 */
        align-items: center; /* 中央揃え */
    }

    .nav-links {
        flex-direction: row; /* 横方向に変更 */
    }

    .nav-links li {
        margin: 0 20px; /* 横方向のマージンを追加 */
    }

    .nav-links a {
        font-size: 11px;
        font-weight: bold;
        color: #000;
        text-decoration: none;
        margin-left: -18px;
        margin-right: 0; 
        text-decoration: none;
    }

    .header-banner-container {
        justify-content: center; /* 中央揃え */
        padding: 0;
    }

    .header-banner p {
        text-align: center;
        font-size: 14px;
        flex-grow: 0; /* テキスト部分の幅をリセット */
    }

    .header-banner .arrow-icon {
        margin-left: 15px; /* スペースをリセット */
    }

    .header-banner a {
        justify-content: center; /* 中央揃え */
    }

    .header-banner .small-text {
        text-align: left; /* 左寄せを維持 */
        font-size: 11px;
    }

    .title-container {
        flex-direction: column; /* 縦並びに変更 */
    }

    .ranking-title {
        font-size: 34px; /* 文字サイズを大きく */
        margin: 0px 0; /* 上下のマージンを調整 */
    }

    .feeranking-title {/* 保険料ランキング用 */
        font-size: 34px; /* 文字サイズを大きく */
        margin: 0px 0; /* 上下のマージンを調整 */
        text-align: center;
    }

    .feeranking-subtitle {/* 保険料ランキング用 */
        font-size: 30px; /* 文字サイズを大きく */
        text-align: center;
    }

    .summary-note {
        text-align: Left; /* 左寄せ */
        font-size: 9px; /* 「※概要」の文字サイズを設定 */

    }

    .description-bubble::before {/* 総合ランキング用 */
        left: 20px; /* 矢印の位置を調整 */
    }

    .description-bubble::after {/* 総合ランキング用 */
        left: 19px; /* 矢印の位置を調整 */
    }

    .hdescription-bubble::before {/* H構造用 */
        left: 220px; /* 矢印の位置を調整 */
    }

    .hdescription-bubble::after {/* H構造用 */
        left: 219px; /* 矢印の位置を調整 */
    }

    .tdescription-bubble::before {/* T構造用 */
        left: 390px; /* 矢印の位置を調整 */
    }

    .tdescription-bubble::after {/* T構造用 */
        left: 388px; /* 矢印の位置を調整 */
    }

    :root {
        --arrow-left-before: 260px; /* 初期値 */
        --arrow-left-after: 258px;  /* 初期値 */
    }

    .mdescription-bubble::before {
        left: var(--arrow-left-before); /* CSS変数を使用 */
    }

    .mdescription-bubble::after {
         left: var(--arrow-left-after); /* CSS変数を使用 */
    }

    .ranking-content {
        flex-direction: column;
    }

    .ranking-info, .ranking-details {/* 総合ランキング用 */
        margin: 10px 0;
    }

    .feeranking-info, .feeranking-details {/* 保険料ランキング用 */
        margin: 10px 0;
    }

    .suffix {
        margin-left: 30px;
        flex: 1;
        font-size: 17px;
    }

    .info-item {
        width: 100%;
        margin: 5px 0;
        flex-direction: row; /* アイテムを横方向に並べる */
        align-items: center; /* 中央揃えにする */
    }

    .evaluation-title {/* 総合ランキング用 */
        font-weight: bold;
        font-size: 13px;
    }

    .evaluation-feetitle {/* T、H構造用 */
        font-weight: bold;
        font-size: 18px;
        text-align: left;
    }

    .evaluation-feetitle::after {/* T、H構造用 */
        content: '建物保険金額：2,000万円、2,500万円\A家財保険金額：300万円、500万円';
        white-space: pre-wrap; /* 改行を有効にする */
        font-size: 17px;
    }

    .evaluation-mtitle {/* M構造用 */
        font-weight: bold;
        font-size: 18px;
        text-align: left;
    }

    .evaluation-mtitle::after {/* M構造用 */
        content: '建物保険金額：1,000万円、1,500万円\A家財保険金額：300万円、500万円';
        white-space: pre-wrap; /* 改行を有効にする */
        font-size: 17px;
    }

    .evaluation-title img {/* 総合ランキング用 */
        width: 13px; /* 画像の幅を設定 */
        height: 13px; /* 画像の高さを設定 */
    }

    .info-title {
        width: 70%; /* タイトルの幅を自動に */
        margin-right: 0px; /* 右にマージンを追加 */
        font-size: 14px;
        margin-left: 0px;
    }

    .info-feetitle {/* 保険料ランキング用 */
        font-size: 17px;
        margin-left: 0
    }

    .info-value {
        width: 34%; /* 値の幅を自動に */
        margin-left: 0; /* 左のマージンをリセット */
        text-align: left;
        display: inline-block;
    }

    .info-header {
        flex-direction: row; /* ヘッダーを横方向に並べる */
        align-items: center; /* 中央揃えにする */
    }

    .insurance-fees {
        display: flex;
        flex-direction: column; /* 保険料を縦方向に並べる */
        margin-left: 36px; /* 左にマージンを追加 */
    }

    .fee-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 50px; /* info-titleと同じ幅を設定 */
        text-align: left;
        margin-bottom: 5px;
        margin-left: -16px;
    }

    .tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .tab-button, .tab-button.main-tab {
        font-size: 11px;
        padding: 7px 9px;
        height: 50px;
        width: auto;
        margin-left: 1px;
        margin-right: 1px;
        color: #000;
    }

    .tab-button.main-tab::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 89%;
        height: 5px;
        background-color: #ABD6B8;
    }

    .tab-button-link {
        color: #000;
    }

    .rank-primary-button-start {
      font-size: 17px;
      margin-left: 10px;
      margin-right: 10px;
    }

    .footer-main {
        flex-direction: column;
        align-items: center;
    }

    .footer-logo {
        margin-right: 0;
        text-align: center;
    }

    .footer-description {
        margin-bottom: 20px;
    }

/* Responsive Design　スマホ用　 */
@media (max-width: 625px) {

    .hdescription-bubble::before {/* H構造用 */
        left: 108px; /* 矢印の位置を調整 */
    }

    .hdescription-bubble::after {/* H構造用 */
        left: 107px; /* 矢印の位置を調整 */
    }

    .tdescription-bubble::before {/* T構造用 */
        left: 223px; /* 矢印の位置を調整 */
    }

    .tdescription-bubble::after {/* T構造用 */
        left: 222px; /* 矢印の位置を調整 */
    }

    .tab-button, .tab-button.main-tab {
        font-size: 9px;
        margin-left: 0;
        margin-right: 0;
    }

/* Responsive Design　スマホ用　 */
@media (max-width: 485px) {

    .mdescription-bubble::before {
        left: 267px
    }

    .mdescription-bubble::after {
        left: 266px
}

}