body {
background-color: #EEEEEE !important;
font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin: 0; 
padding: 0;
-webkit-text-size-adjust: 100%;
}

.sp-wrapper {
width: 100%;
max-width: 765px;
margin: 0 auto;
background-color: #ffffff;
}

img {
display: block;
max-width: 100%;
height: auto;
}

.full-width-image {
width: 100%;
height: auto;
display: block;
max-width: 100%;
}

.banner-area {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 0;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  バナーエリアの固定 (中央配置を維持)
  ======================================================= */
  .banner-area {
    width: 765px; 
    margin: 0 auto; 
    position: relative;
    left: auto;
    transform: none; 
  }
}

.highlight-color {
color: #2752C3;
}

.sp_br { display: block; }

/* =======================================================
2. 中央配置アイコン (83x71, 隙間13px) - レスポンシブ修正 (768px以上で固定)
======================================================= */

.center-icon-area {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  width: 100%;
  text-align: center;
  height: 18.93vw; 
  margin-top: 13px;
  overflow: hidden;
}

.small-center-image {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  display: inline-block;
  width: 22.13vw; 
  height: auto;
  max-width: 100%;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .center-icon-area {
    height: 145px; 
  }  
  .small-center-image {
    width: 170px; 
  }
}

/* ---------------------------------------------------- */
/* 3. セクション01 ボックス (隙間42px) - レスポンシブ修正 (768px以上で固定) */
/* ---------------------------------------------------- */

.section01 {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  margin-top: 0;
  padding-top: 11.2vw;
  padding-bottom: 8.0vw;
  text-align: center;
  background-color: transparent;
}

.subtitle-text {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  font-size: 4.8vw; 
  font-weight: bold;
  color: #5A5A5A;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  margin-top: 0 !important;
  margin-bottom: 4.0vw;
  text-align: center;
  letter-spacing: -0.5px;
}

.heading-text {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  font-size: 6.67vw;
  font-weight: bold;
  color: #2752C3;
  letter-spacing: -0.5px;
  margin-top: 0;
  margin-bottom: 5.87vw;
}


/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .section01 {
    padding-top: 86px;
    padding-bottom: 61px;
  }
  .subtitle-text {
    font-size: 37px;
    margin-bottom: 31px;
  } 
  .heading-text {
    font-size: 51px;
    margin-bottom: 45px;
  }
}

/* =======================================================
新しい通知アイコン (60x52) のスタイル設定 - レスポンシブ修正 
======================================================= */

.section01 .list-skew-box .notification-icon-wrapper {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  transform: skewY(-6deg);
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.section01 .list-skew-box .notification-icon-wrapper .notification-icon-bottom {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  width: 13.87vw; 
  height: auto;
  display: inline-block;
  margin: 0 auto;
  max-width: none;
}
/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .section01 .list-skew-box .notification-icon-wrapper .notification-icon-bottom {
    width: 107px;
  }
}
/* =======================================================
p.item-text-bottom (リアルタイムでマイページに通知!) のスタイル調整 - レスポンシブ修正
======================================================= */

.item-text-bottom {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 4.8vw;
  line-height: 8.0vw; 
  margin-bottom: 6.27vw;
  font-weight: bold;
  color: #5A5A5A;
  text-align: center;
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
  letter-spacing: -0.5px;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .item-text-bottom {
    font-size: 37px; 
    line-height: 61px;
    margin-bottom: 48px;
  }
}

.item-text-bottom .color-main {
  color: #2752C3;
}

/* =======================================================
3-2. 複合画像リスト (285x204) - レスポンシブ修正 
======================================================= */
.list-image-complex {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  display: flex;
  width: 100vw;
  height: 54.4vw;
  margin: 0 auto;
}

.list-image-wrapper {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  width: 27.47vw;
  margin-left: 15.73vw;
  margin-right: 4.0vw;
  height: 100%;
}

.final-image-a {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-boxes-wrapper {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  display: flex;
  flex-direction: column;
  width: 52.27vw;
  padding-bottom: 3.2vw;
  flex-grow: 0;
  height: 100%;
  justify-content: flex-start;
  padding-left: 0; 
  letter-spacing: -0.5px;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .list-image-complex {
    width: 768px; 
    height: 418px;
  }

  .list-image-wrapper {
    width: 211px;
    margin-left: 121px;
    margin-right: 31px;
  }
  
  .list-boxes-wrapper {
    width: 402px;
    padding-bottom: 25px;
  }
}
/* =======================================================
p.item-text-top のスタイル調整 - レスポンシブ修正
======================================================= */
.item-text-top {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-weight: bold;
  color: #707070;
  line-height: 8.0vw; 
  font-size: 4.8vw;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .item-text-top {
    font-size: 37px;
    line-height: 61px; 
  }
}
.item-text-top .line-one {
  letter-spacing: -0.5px;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}

.item-text-top .line-two {
  letter-spacing: -0.5px;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}



/* =======================================================
右側の個別ボックス (.box-item) - レスポンシブ修正 
======================================================= */

.box-item {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  display: flex;
  align-items: center;
  width: 100%;
  height: 6.4vw;
  margin-bottom: 5.6vw;
}

.box-item:last-child {
  margin-bottom: 0;
}

.box-item-icon {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  flex-shrink: 0;
  width: 6.4vw;
  height: auto;
}

.box-item-text {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  flex-grow: 1;
  font-size: 3.47vw;
  font-weight: bold;
  color: #5A5A5A;
  text-align: left;
  margin: 0;
  padding: 0;
  position: relative;
  left: 1px;
  text-shadow:
    -2px 0 0 #ffffff,
    2px 0 0 #ffffff,
    0 -2px 0 #ffffff,
    0 2px 0 #ffffff;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * - 768pxを超えたら、固定の px 値で上書きする
 * ------------------------------------------- */
@media (min-width: 768px) {
  .box-item {
    height: 49px;
    margin-bottom: 43px;
  }
  .box-item-icon {
    width: 49px;
  }
  .box-item-text {
    font-size: 27px;
  }
}

/* =======================================================
item-image-top (お気に入り馬登録ボタン_SP.png) のスタイル設定 - 最終レスポンシブ修正 
======================================================= */

.section01 .content-group-top .item-image-top {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  width: 100vw;
  margin-top: 2.93vw;
  height: auto;
  max-width: none;
  display: block;
  position: relative;
  left: 50%; 
  transform: translateX(-50%); 
  margin-bottom: 0;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .section01 .content-group-top .item-image-top {
    width: 768px;
    margin-top: 23px;
    left: auto;    
    transform: none; 
    display: block;  
    margin-left: auto; 
    margin-right: auto; 
  }
}

/* =======================================================
注釈テキスト (.note-text-small) のスタイル設定 - レスポンシブ修正 
======================================================= */

.note-text-small {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  font-size: 2.67vw;
  line-height: 4.43vw;
  margin-top: 2.67vw;
  font-weight: normal;
  color: #5A5A5A;
  letter-spacing: -0.15px;
  margin-bottom: 0;
  text-align: center;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .note-text-small {
    font-size: 21px;
    line-height: 34px;
    margin-top: 21px;
  }
}

/* =======================================================
p.note-text-large のスタイル調整
======================================================= */
.note-text-large {
margin-top: 8.0vw;
}

/* =======================================================
注釈テキスト (.txt3 / 旧 .note-text-large) のスタイル設定 - レスポンシブ修正 
======================================================= */

.txt3 {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: bold;
  color: #5A5A5A;
  text-align: center;
  margin-bottom: 0;
  letter-spacing: -0.3px;
  font-size: 3.73vw;
  line-height: 6.21vw;
  margin-top: 7.47vw;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .txt3 {
    font-size: 29px;
    line-height: 48px;
    margin-top: 57px;
  }
}

/* =======================================================
新しい平行四辺形ボックス (.list-skew-box)
======================================================= */

.section01 .list-skew-box {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%) skewY(6deg);
  background-color: #f3f3f3 !important;
  padding-top: 20px;
  padding-bottom: 40px;
  margin-top: -18px;
  overflow: hidden;
  z-index: 1;
}
.section01 .list-skew-box > * {
  transform: skewY(-6deg);
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .section01 .list-skew-box {
    width: 768px;
  }
}

/* =======================================================
Section01の後の画像 (67x66) のスタイル設定 - レスポンシブ修正
======================================================= */

.center-image-after-section {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  width: 100%;
  text-align: center;
  margin-top: -2.13vw;
  margin-bottom: 10.67vw;
}

.image-67x66 {
  /* -------------------------------------------
  * 【デフォルト設定（?767px）】
  * ------------------------------------------- */
  width: 23.2vw;
  height: auto;
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  .center-image-after-section {
    margin-top: -16px;
    margin-bottom: 82px;
  }
  .image-67x66 {
    width: 178px;
  }
}

/* =======================================================
デバイスサポートエリア (スマートフォン、パソコンでも) - レスポンシブ修正
======================================================= */
.device-support-area {
margin-top: 5.33vw;
text-align: center;
width: 100%;
}
.device-support-text {
font-size: 4.8vw;
font-weight: bold;
color: #5A5A5A;
font-family: "BIZ UDGothic", sans-serif;
margin: 0 auto;
padding: 0;
display: inline-block;
letter-spacing: -0.35px;
}

/* =======================================================
ロケーションチェックエリア (外出先、会社でも馬チェック) - レスポンシブ修正
======================================================= */

.location-check-area {
margin-top: 3.47vw;
text-align: center;
width: 100%;
}

.location-check-text {
font-size: 6.67vw;
font-weight: bold;
color: #2752C3;
font-family: "BIZ UDGothic", sans-serif;
margin: 0 auto;
padding: 0;
display: inline-block;
letter-spacing: -0.5px;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
/* =======================================================
デバイスサポートエリア (スマートフォン、パソコンでも) - レスポンシブ修正
======================================================= */
.device-support-area {
margin-top: 41px;
text-align: center;
width: 100%;
}

.device-support-text {
font-size: 37px;
font-weight: bold;
color: #5A5A5A;
font-family: "BIZ UDGothic", sans-serif;
margin: 0 auto;
padding: 0;
display: inline-block;
letter-spacing: -0.35px;
}

/* =======================================================
ロケーションチェックエリア (外出先、会社でも馬チェック) - レスポンシブ修正
======================================================= */
.location-check-area {
margin-top: 27px;
text-align: center;
width: 100%;
}
.location-check-text {
font-size: 51px;
font-weight: bold;
color: #2752C3;
font-family: "BIZ UDGothic", sans-serif;
margin: 0 auto;
padding: 0;
display: inline-block;
letter-spacing: -0.5px;
}
}


/* =======================================================
メインチェック画像 (287x186) のスタイル設定 - レスポンシブ修正
======================================================= */

.main-check-image-wrapper {
width: 100%;
text-align: center;
margin-top: 8.0vw;
margin-bottom: 6.13vw;
}

.main-check-image-287x186 {
width: 76.53vw;
height: auto;
display: inline-block;
margin: 0 auto;
max-width: 100%;
}

.location-check-area {
margin-bottom: 0;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  メインチェック画像の固定 (287x186)
  ======================================================= */
  .main-check-image-wrapper {
    width: 100%;
    text-align: center;
    margin-top: 61px;
    margin-bottom: 47px;
  }

  .main-check-image-287x186 {
    width: 587px; 
    height: auto;
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
  }

  .location-check-area {
    margin-bottom: 0;
  }
}

/* =======================================================
登録を促すテキストのスタイル設定 - レスポンシブ修正
======================================================= */

.registration-text {
font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 3.73vw;
font-weight: bold;
color: #898989;
text-align: center;
line-height: 6.21vw;
margin-top: 2.67vw;
margin-bottom: 2.67vw;
letter-spacing: -0.25px;
}

.registration-prompt-area {
margin-bottom: 0;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  登録を促すテキストの固定
  ======================================================= */
  .registration-text {
    font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 29px;
    font-weight: bold;
    color: #898989;
    text-align: center;
    line-height: 48px;
    margin-top: 21px;
    margin-bottom: 21px;
    letter-spacing: -0.25px;
  }

  .registration-prompt-area {
    margin-bottom: 0;
  }
}

/* =======================================================
netkeiba 部分のスタイル設定
======================================================= */
.netkeiba-font {
font-family: 'Roboto', sans-serif !important;
font-weight: bold;
}

/* =======================================================
丸みを帯びたボタン (.rounded-box) のスタイル設定 - レスポンシブ修正
======================================================= */
.rounded-box-container {
width: 100%;
text-align: center;
margin-top: 5.33vw;
margin-bottom: -0.8vw;
}

.rounded-box {
width: 76.53vw;
height: 12.27vw;
background-color: #2752C3;
border-radius: 1.33vw;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}

/* =======================================================
ボタン内のテキストのスタイル設定 - レスポンシブ修正
======================================================= */
.box-button-text {
font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size: 4.8vw;
font-weight: bold;
color: #ffffff;
margin: 0;
padding: 0;
letter-spacing: -0.1px;
}

.box-button-text .roboto-font {
font-family: 'Roboto', sans-serif !important;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  丸みを帯びたボタン (.rounded-box) の固定
  ======================================================= */
  .rounded-box-container {
    width: 100%;
    text-align: center;
    margin-top: 41px;
    margin-bottom: -6px;
  }

  .rounded-box {
    width: 587px;
    height: 94px;
    background-color: #2752C3;
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* =======================================================
  ボタン内のテキストの固定
  ======================================================= */
  .box-button-text {
    font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-size: 37px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding: 0;
    letter-spacing: -0.1px;
  }

  .box-button-text .roboto-font {
    font-family: 'Roboto', sans-serif !important;
  }
}

/* =======================================================
netkeibaID設定ボタンのホバー時の色変化
======================================================= */
.rounded-box:hover {
background-color: #FFFFFF !important;
border: 1px solid #2752C3 !important;
box-sizing: border-box;
}

.rounded-box:hover .box-button-text {
color: #2752C3 !important;
}

.rounded-box:hover .box-button-text .roboto-font {
color: #2752C3 !important;
}

/* =======================================================
既に登録済みの方へのリンクスタイル (色、下線、フォント) - レスポンシブ修正
======================================================= */

.registration-info-area {
margin-top: 4.53vw;
margin-bottom: 8.27vw;
}

.registration-info-text {
font-size: 3.2vw;
font-weight: normal;
text-align: center;
margin: 0 auto;
}

/* =======================================================
すでにアカウントをお持ちの方はこちらからログイン (通常時スタイル) - レスポンシブ修正
======================================================= */
.registration-info-area .login-link-style {
color: #3951B5;
text-decoration: none !important;
border-bottom: 0.53vw solid #3951B5;
font-size: 3.2vw;
font-weight: normal;
font-family: "BIZ UDGothic", sans-serif;
line-height: 1.5;
display: inline-block;
padding-bottom: -0.13vw;
letter-spacing: -0.25px;
}

/* =======================================================
リンクのホバー効果（下線を消す）
======================================================= */
.registration-info-area .login-link-style:hover {
border-bottom: none !important;
opacity: 0.8;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  ログインリンク (通常時スタイル) の固定
  ======================================================= */
  .registration-info-area .login-link-style {
    color: #3951B5;
    text-decoration: none !important;
    border-bottom: 4px solid #3951B5;
    font-size: 25px;
    font-weight: normal;
    font-family: "BIZ UDGothic", sans-serif;
    line-height: 1.5;
    display: inline-block;
    padding-bottom: -1px;
    letter-spacing: -0.25px;
  }

  /* =======================================================
  リンクのホバー効果（下線を消す）の固定
  ======================================================= */
  .registration-info-area .login-link-style:hover {
    border-bottom: none !important;
    opacity: 0.8;
  }
}



/* =======================================================
プレミアムセクションの全体設定 (375x113) - レスポンシブ修正
======================================================= */

.premium-section {
width: 100vw;
height: 30.13vw;
background: url(../../../common/img/sp/favorite/20251023/premium-section.png) no-repeat center center / cover;
position: relative;
margin-top: 16.53vw;
margin-bottom: 8.8vw;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  プレミアムセクションの全体設定 (375x113) の固定
  ======================================================= */
  .premium-section {
    width: 768px; 
    height: 231px;
    background: url(../../../common/img/sp/favorite/20251023/premium-section.png) no-repeat center center / cover;
    position: relative;
    margin-top: 127px;
    margin-bottom: 68px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
}

/* =======================================================
「お気に入り馬」をもっと快適に使うなら (15px) - レスポンシブ修正
======================================================= */
.premium-text-a {
font-family: "BIZ UDGothic", sans-serif;
font-weight: bold;
font-size: 4.0vw;
color: #ffffff;
position: absolute;
top: 8.0vw;
left: 50%;
transform: translateX(-50%);
margin: 0;
white-space: nowrap;
letter-spacing: -0.25px;
}

/* =======================================================
プレミアムサービスを (25px) - レスポンシブ修正
======================================================= */
.premium-text-b {
font-family: "BIZ UDGothic", sans-serif;
font-weight: bold;
font-size: 6.67vw;
color: #ffffff;
position: absolute;
top: calc(8.0vw + 4.0vw + 3.47vw);
left: 50%;
transform: translateX(-50%);
margin: 0;
white-space: nowrap;
letter-spacing: -0.5px;
}

/* =======================================================
白い長方形 (4x243) - レスポンシブ修正
======================================================= */
.premium-bar-c {
width: 64.8vw;
height: 1.07vw;
background-color: #ffffff;
position: absolute;
bottom: 6.93vw;
left: 50%;
transform: translateX(-50%);
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  「お気に入り馬」をもっと快適に使うなら の固定
  ======================================================= */
  .premium-text-a {
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: bold;
    font-size: 31px;
    color: #ffffff;
    position: absolute;
    top: 61px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.25px;
  }

  /* =======================================================
  プレミアムサービスを の固定
  ======================================================= */
  .premium-text-b {
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: bold;
    font-size: 51px;
    color: #ffffff;
    position: absolute;
    top: 119px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.5px;
  }
  
  /* =======================================================
  白い長方形の固定
  ======================================================= */
  .premium-bar-c {
    width: 498px;
    height: 8px;
    background-color: #ffffff;
    position: absolute;
    bottom: 53px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* =======================================================
メインの丸みを帯びたボックス (63x287, #F3F3F3) - レスポンシブ修正
======================================================= */
.small-box {
width: 76.53vw;
height: 16.8vw;
background-color: #F3F3F3;
border-radius: 2.67vw;
margin: 4.8vw auto;
display: flex;
align-items: center;
padding: 0;
}

.small-box .box-inner-image {
width: 14.4vw;
height: 14.4vw;
flex-shrink: 0;
margin-left: 1.33vw;
margin-right: 6.93vw;
display: block;
}

.small-box .box-text {
font-family: "BIZ UDGothic", sans-serif;
font-size: 4.0vw;
font-weight: bold;
color: #5A5A5A;
text-align: left;
margin: 0;
flex-grow: 1;
}

/* =======================================================
新しいボックス (box-top-right) のテキスト調整 - レスポンシブ修正
======================================================= */
.small-box .box-text-2 .normal-weight {
font-weight: normal;
}

.small-box .box-text-2 {
line-height: 5.1vw;
letter-spacing: -0.25px;
}

/* =======================================================
Section05 - グループ管理テキストのフォントウェイト調整
======================================================= */
.circle_txt {
font-weight: bold;
}
.circle_txt span {
font-weight: normal;
}
.circle_txt {
font-family: "BIZ UDGothic", sans-serif;
}

/* =======================================================
新しいボックス (box-text-3) のテキスト調整 - レスポンシブ修正
======================================================= */
.small-box .box-text-3 {
line-height: 5.1vw;
letter-spacing: -0.25px;
}

/* =======================================================
Normal Weight テキストのレイアウト調整
======================================================= */
.small-box .box-text-3 .normal-weight {
font-weight: normal;
padding-right: 0;
margin-left: -9px;
display: inline-block;
font-family: inherit;
color: inherit;
}

/* =======================================================
POG のフォントスタイル
======================================================= */
.small-box .box-text-3 .roboto-pog {
font-family: 'Roboto', sans-serif !important;
}

/* =======================================================
box-text-4 (情報が充実) のスタイル調整 - レスポンシブ修正
======================================================= */
.small-box .box-text-4 {
line-height: 5.1vw;
letter-spacing: -0.25px;
font-size: 4.0vw;
font-weight: bold;
color: #5A5A5A;
text-align: left;
margin: 0;
padding: 0;
flex-grow: 1;
}

.small-box .box-text-4 .normal-weight {
font-weight: normal;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  メインの丸みを帯びたボックスの固定
  ======================================================= */
  .small-box {
    width: 587px;
    height: 129px;
    background-color: #F3F3F3;
    border-radius: 21px;
    margin: 37px auto;
    display: flex;
    align-items: center;
    padding: 0;
  }
  
  .small-box .box-inner-image {
    width: 111px;
    height: 111px;
    flex-shrink: 0;
    margin-left: 10px;
    margin-right: 53px;
    display: block;
  }
  
  .small-box .box-text {
    font-family: "BIZ UDGothic", sans-serif;
    font-size: 31px;
    font-weight: bold;
    color: #5A5A5A;
    text-align: left;
    margin: 0;
    flex-grow: 1;
  }

  /* =======================================================
  新しいボックス (box-text-2) のテキスト調整の固定
  ======================================================= */
  .small-box .box-text-2 .normal-weight {
    font-weight: normal;
  }

  .small-box .box-text-2 {
    line-height: 39px;
    letter-spacing: -0.25px;
  }
  
  /* =======================================================
  新しいボックス (box-text-3) のテキスト調整の固定
  ======================================================= */
  .small-box .box-text-3 {
    line-height: 39px;
    letter-spacing: -0.25px;
  }

  /* =======================================================
  Normal Weight テキストのレイアウト調整の固定
  ======================================================= */
  .small-box .box-text-3 .normal-weight {
    font-weight: normal;
    padding-right: 0;
    margin-left: -9px;
    display: inline-block;
    font-family: inherit;
    color: inherit;
  }

  /* =======================================================
  box-text-4 (情報が充実) のスタイル調整の固定
  ======================================================= */
  .small-box .box-text-4 {
    line-height: 39px;
    letter-spacing: -0.25px; 
    font-size: 31px;
    font-weight: bold;
    color: #5A5A5A;
    text-align: left;
    margin: 0;
    padding: 0;
    flex-grow: 1;
  }

  .small-box .box-text-4 .normal-weight {
    font-weight: normal;
  }
  
  /* =======================================================
  その他の維持設定
  ======================================================= */
  .circle_txt {
    font-weight: bold;
    font-family: "BIZ UDGothic", sans-serif;
  }
  .circle_txt span {
    font-weight: normal;
  }
  .small-box .box-text-3 .roboto-pog {
    font-family: 'Roboto', sans-serif !important;
  }
}

/* =======================================================
追加コンテンツテキストのスタイル設定 - レスポンシブ修正
======================================================= */
.additional-content-area {
width: 100%;
text-align: center;
margin-top: 6.67vw;
margin-bottom: 3.73vw;
}

.additional-content-text {
font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size: 4.0vw;
font-weight: bold;
line-height: 6.67vw;
letter-spacing: -0.25px;
color: #5A5A5A;
margin: 0 auto;
padding: 0;
display: inline-block;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  追加コンテンツエリアの固定
  ======================================================= */
  .additional-content-area {
    width: 100%;
    text-align: center;
    margin-top: 51px;
    margin-bottom: 29px;
  }

  /* =======================================================
  追加コンテンツテキストの固定
  ======================================================= */
  .additional-content-text {
    font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-size: 31px;
    font-weight: bold;
    line-height: 51px;
    letter-spacing: -0.25px;
    color: #5A5A5A;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
  }
}

/* =======================================================
プレミアムコースボタンのスタイル設定 (287x46) - レスポンシブ修正
======================================================= */
.premium-box-container {
width: 100%;
text-align: center;
margin-top: 0;
}

.premium-box {
width: 76.53vw;
height: 12.27vw;
background-color: #D8B956;
border-radius: 1.33vw;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}

/* ------------------------------------------------------- */
/* ボタン内のテキストのスタイル設定 - レスポンシブ修正 */
/* ------------------------------------------------------- */

.premium-button-text {
font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size: 4.0vw;
font-weight: bold;
color: #ffffff;
margin: 0;
padding: 0;
letter-spacing: -0.25px;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  プレミアムコースボタンのコンテナの固定
  ======================================================= */
  .premium-box-container {
    width: 100%;
    text-align: center;
    margin-top: 0;
  }

  /* =======================================================
  プレミアムコースボタン本体の固定
  ======================================================= */
  .premium-box {
    width: 587px;
    height: 94px;
    background-color: #D8B956;
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* =======================================================
  ボタン内のテキストの固定
  ======================================================= */
  .premium-button-text {
    font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-size: 31px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding: 0;
    letter-spacing: -0.25px;
  }
}

/* =======================================================
スーパープレミアムコースボタンのホバー時の色変化
(ボタン全体: .premium-box-container, 背景: .premium-box, テキスト: .premium-button-text)
======================================================= */
.premium-box:hover {
background-color: #FFFFFF !important;
border: 1px solid #D8B956 !important;
box-sizing: border-box;
}
.premium-box:hover .premium-button-text {
color: #D8B956 !important;
}

/* =======================================================
プレミアムコースボタンのスタイル設定 (287x46) - レスポンシブ修正
======================================================= */
.premium-box-container {
width: 100%;
text-align: center;
margin-top: 0;
}

.premium-box {
width: 76.53vw;
height: 12.27vw;
background-color: #D8B956;
border-radius: 1.33vw;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ------------------------------------------------------- */
/* ボタン内のテキストのスタイル設定 - レスポンシブ修正 */
/* ------------------------------------------------------- */
.premium-button-text {
font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size: 4.0vw;
font-weight: bold;
color: #ffffff;
margin: 0;
padding: 0;
letter-spacing: -0.25px;
transition: color 0.3s ease;
}

/* =======================================================
既に登録済みの方へのリンクエリアのスタイル設定
======================================================= */
.registered-link-area {
width: 100%;
text-align: center;
}

.registered-link-text {
font-size: 3.73vw !important;
font-weight: normal;
letter-spacing: -0.25px;
color: #3951B5;
text-decoration: underline;
display: inline-block!important;
margin: 4.8vw;
margin-bottom: 17.6vw;
padding: 0;
}

/* -------------------------------------------
 * 【PC/タブレット（768px以上）の固定】
 * ------------------------------------------- */
@media (min-width: 768px) {
  
  /* =======================================================
  プレミアムコースボタンの固定 (前の回答からの再掲ですが、維持設定も全て含めます)
  ======================================================= */
  .premium-box-container {
    width: 100%;
    text-align: center;
    margin-top: 0;
  }

  .premium-box {
    width: 587px;
    height: 94px;
    background-color: #D8B956;
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  .premium-button-text {
    font-family: "BIZ UDGothic", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-size: 31px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    padding: 0;
    letter-spacing: -0.25px;
    transition: color 0.3s ease;
  }
  
  /* =======================================================
  既に登録済みの方へのリンクエリアの固定
  ======================================================= */
  .registered-link-area {
    width: 100%;
    text-align: center;
  }

  .registered-link-text {
    font-size: 29px !important;
    font-weight: normal;
    letter-spacing: -0.25px;
    color: #3951B5;
    text-decoration: underline;
    display: inline-block!important;
    margin: 37px;
    margin-bottom: 135px;
    padding: 0;
  }

}

/* ------------------------------------------------------- */
/* リンクのホバー効果（下線を消す） * - 既存の registered-link-text a:hover を想定
/* ------------------------------------------------------- */
.registered-link-text a:hover {
border-bottom: none !important;
opacity: 0.8;
}

div[data-role="page"],
.Body_DB_Horse_Top {
background-color: #EEEEEE !important;
}

.Body_DB_Horse_Top {
background-color: #EEEEEE !important;
}