/* Import base styles */


/* 共通スタイル */
.topic-item {
    background-color: #ffffff;
    overflow: hidden;
    border-bottom: 1px solid var(--global-gray-20);
}

.topic-item:last-child {
    border-bottom: none;
}

.topic-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.topic-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topic-image img {
    width: 100%;
}


.topic-badge {
    position: absolute;
    top: 0.625rem; /* 10px */
    right: 0.625rem; /* 10px */
    background-color: #ff5a34;
    color: white;
    font-weight: 700;
    padding: 0.125rem 0.5rem; /* 2px 8px */
    border-radius: 0.25rem; /* 4px */
    font-size: var(--font-xs); /* 12px */
}

.topic-content {
    padding: 0.9375rem; /* 15px */
}

.topic-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.topic-title {
    font-size: var(--font-lg); /* 20px */
    font-weight: 700;
    margin: 0;
    color: #000;
    line-height: 1.5;
}

.topic-meta {
    display: flex;
    flex-direction: column;
    font-size: var(--font-xs); /* 12px */
    color: #666;
}

/* 大きいトピックススタイル */
.topics-large .topic-large {
    margin-bottom: 0.9375rem; /* 15px */
}

.topics-large .topic-large .topic-link {
    flex-direction: column;
}

.topics-large .topic-large .topic-image {
    width: 100%;
}

.topics-large .topic-large .topic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topics-large .topic-large .topic-title {
    font-size: var(--font-md); /* 18px */
    margin-bottom: 0.625rem; /* 10px */
}

.topics-large .topic-small {
    margin-bottom: 0.9375rem; /* 15px */
}

.topics-large {
    flex-direction: row;
}

.topics-large .topic-small .topic-image {
    width: 38%;
    height: 100%;
    flex-shrink: 0;
}

.topics-large .topic-small .topic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.topics-large .topic-content {
    flex: 1;
    padding: 0.625rem 0 0; /* 10px */
}
.topic-small .topic-content {
    flex: 1;
    padding: 0.625rem; /* 10px */
}

/* トピック小さい */
.topic-small .topic-content-wrapper {
    display: flex;
    flex-direction: row;
}

.topic-small .topic-content-wrapper .topic-image {
    width: 38%;
    height: 100%;
    flex-shrink: 0;
}

.topic-small .topic-content-wrapper .topic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topic-small .topic-content-wrapper .topic-content {
    flex: 1;
    padding: 0.625rem; /* 10px */
}
    
.topic-small .topic-title {
    font-size: var(--font-sm); /* 14px */
    margin-bottom: 0.3125rem; /* 5px */
    flex-shrink: 1;
}
.topic-small .topic-meta-wrapper {
    width: 100%;
    flex: 1;
}



/* トピック情報（日付・タグ） */
.topic-meta-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3125rem 0; /* 5px 0 */
}

.topic-date {
    color: #777;
    font-size: var(--font-xs); /* 12px */
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.topic-tags {
    color: #ff6600;
    font-size: var(--font-xs); /* 12px */
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    text-align: right;
    margin-left: auto;
}


/* お知らせ */
.topic-infomation {
    margin-bottom: 0.9375rem; /* 15px */
}

.topic-infomation .topic-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.topic-infomation .topic-date {
    color: #777;
    font-size: var(--font-xs); /* 12px */
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin-left: auto;
    text-align: right;
}

/* topic-date icon: match text size and color */
.topic-date {
    display: inline-flex;
    align-items: baseline; /* align icon bottom with text baseline */
    gap: 0.15em;
    line-height: 1; /* stabilize baseline across contexts */
}
.topic-date img {
    display: none; /* replace <img> with mask icon for color control */
}
.topic-date::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor; /* follows .topic-date text color */
    -webkit-mask: url('https://www.keiba.jp/img/icons/clock-regular.svg') no-repeat center / contain;
            mask: url('https://www.keiba.jp/img/icons/clock-regular.svg') no-repeat center / contain;
            
}
.topic-date::before { transform: translateY(0.1em); }
/* 記事ページ専用トピックスタイル */
.topic-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.topic-item article {
   border-bottom: 1px solid var(--global-gray-20);
}

.topic-item.topic-small article:last-child {
    border-bottom: none;
}   

/* article.html */

.topics-section .section-header {
    display: inherit;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    }
    .topics--header .section-title-container {
        display: flex;
        
        flex-direction: column;
        margin-bottom: 1rem;
    }
    
.topics_article__wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 0.625rem 0.9375rem;
}

.article-body {
    line-height: 1.5;
    letter-spacing: 0.04em;
    padding: 0 0.75rem 0.9375rem;
    font-size: 17px;
}

.article-footer {
    padding: 0 0.625rem 0.9375rem;
}

.title-img {
    width: 100%;
}

.title-img img {
    width: 100%;
    height: auto;
    display: block;
}
.section-title-container {
    padding: 0.5rem;
}
.article-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary, #333);
    margin: 0;
    padding: 0.2rem;
    padding-left: 0.5rem;
    border-left: 5px solid var(--primary, #FF7031);
    border-bottom: 2px solid var(--primary, #FF7031);
}

.article-title-meta-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--font-sm);
    padding: 0.5rem 0;
}

.article-title-meta-wrapper .topic-date {
    flex-shrink: 0;
    order: 2;
}

.article-title-meta-wrapper .topic-tags {
    color: #ff6600;
    font-size: var(--font-sm);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    text-align: right;
}

.imgBox {
    width: 100%;
    margin-bottom: 1rem;
}

.imgBox img {
    width: 100%;
    height: auto;
    display: block;
}

/* プロフィールカード */
/* .profile-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    width: calc(100% - 1rem);
    max-width: 400px;
    margin: 0 auto;
}

/
.profile-card.grd {
    position: relative !important;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff) !important;
    padding: 3px !important;
    border-radius: 15px !important;
    box-shadow: none !important;
}

.profile-card.grd .profile-card__header,
.profile-card.grd .profile-card__description,
.profile-card.grd .profile-card__footer {
    background: var(--white) !important;
    border-radius: 12px !important;
    position: relative;
    z-index: 1;
    margin: 0;
}

.profile-card.grd .profile-card__header {
    border-radius: 12px 12px 0 0 !important;
}

.profile-card.grd .profile-card__footer {
    border-radius: 0 0 12px 12px !important;
}


.profile-card.gold {
    position: relative !important;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffc107, #ff8f00, #ffd700, #ffeb3b) !important;
    padding: 3px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3) !important;
}

.profile-card.gold .profile-card__header,
.profile-card.gold .profile-card__description,
.profile-card.gold .profile-card__footer {
    background: var(--white) !important;
    border-radius: 12px !important;
    position: relative;
    z-index: 1;
    margin: 0;
}

.profile-card.gold .profile-card__header {
    border-radius: 12px 12px 0 0 !important;
}

.profile-card.gold .profile-card__footer {
    border-radius: 0 0 12px 12px !important;
}

.profile-card__header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1rem;
    padding: 1rem 0rem 0.5rem 1rem;

}

.profile-card__avatar {
    flex-shrink: 0;
}

.profile-card__avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-card__info {
    flex: 1;
    min-width: 0;
}

.profile-card__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-bottom: -0.25rem;
}

.profile-card__category {
    font-size: var(--font-sm);
    color: var(--text-secondary, #666);
}


.profile-card__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 0.25rem;
}

.profile-card__tags {
    display: flex;
    justify-content: flex-start;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.profile-card__tag {
    color: var(--dark-gray);
    font-size: var(--font-xxxs);
    background: #FFF;
    padding: 0.25rem 0.4375rem;
    border-radius: 12px;
    border: 1px solid var(--dark-gray);
}

.profile-card__stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 0;
    flex-shrink: 0;
}

.profile-card__stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px 0 0 3px;
    font-size: var(--font-xxs);
    font-weight: 700;
    color: white;
}


.profile-card__footer {
    display: flex;
    padding-top: 7px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    padding: 0.5rem;
}


.profile-card__actions {
    flex-direction: row;
    gap: 1rem;
}

.profile-card__stat--honmei {
    background: #ef4444;
}

.profile-card__stat--renshow {
    background: #22c55e;
}

.profile-card__stat--ichion {
    background: #ec4899;
}

.profile-card__description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary, #666);
    text-align: left;
}

.profile-card__text {
    margin: 0;
    padding: 1rem;
}

.profile-card__actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.profile-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.625rem 0.625rem;
    border-radius: 24px;
    border: 2px solid;
    background: white;
    font-weight: 600;
    font-size: var(--font-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto;
}


.profile-card__btn--follow {
    border-color: #26B3FF;
    color: #26B3FF;
}

.profile-card__btn--follow:hover {
    background: #26B3FF;
    color: white;
}

.profile-card__btn--follow:hover .icon__follow img {
    filter: brightness(0) invert(1);
}

.profile-card__btn--chip:hover .icon__chip img {
    filter: brightness(0) invert(1);
}

.profile-card__btn--chip {
    border-color: #f59e0b;
    color: #f59e0b;
}
.profile-card__btn--chip .icon__chip img {
    filter: invert(60%) sepia(96%) saturate(1352%) hue-rotate(8deg) brightness(101%) contrast(103%);
}

.profile-card__btn--chip:hover {
    background: #f59e0b;
    color: white;
}
.profile-card__btn--about {
    text-decoration: underline;
    color: var(--dark-gray);
    font-size: var(--font-sm);
}
.profile-card__btn--about:hover {
    color: var(--primary);
}


.profile-card__footer_hit {
    padding-top: 7px;
    gap: 8px;
    padding: 0.5rem;
}
.profile-card__hitting_box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background-color: var(--global-gray-10);
    color: var(--main-black);
    padding: 1rem;
    border-radius: 4px;
}

.specialist_bestHit__list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin-top: 8px;
  }
  
  .bestHit_list__box{
    background-color: var(--global-gray-10);
    border:1px solid var(--global-gray-20);
    border-radius: 5px;
    padding: 8px calc(3rem + 16px) 8px 8px;
    background-image: url(https://wwwyuma.esys.jp/img/icons/ico_gekiso.svg);
    background-repeat: no-repeat;
    background-size: 3rem 3rem;
    background-position: right 8px top 8px;
    min-height: calc(3rem + 16px);
  }
  
  .bestHit_list__box .race_name{
    font-size: 0.8rem;
  }
  
  .bestHit_list__box .horse_name{
    font-size: 1.2rem;
    font-weight: bold;
  }


  .bestHit_list__box .race_result{
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
  }
  
  .bestHit_list__box .race_result .num{
    font-family: var(--roboto);
    font-size: 1.5em;
    color: #FF5A34;
  }
  
  .bestHit_list__box .race_result .rate{
    font-weight: normal;
    font-size: 0.8rem;
    margin-left: 5px;
  }
  
  .el_salon__ttl_border{
    font-size: 1.2rem;
    border-left: 6px solid var(--salon);
    border-bottom: 1px solid var(--salon);
    color: var(--salon);
    font-weight: bold;
    padding-left: 11px;
    padding-bottom: 5px;
    display: block;
  }


  .profile-card__footer .salon_raceList__wrap{
    display: flex;
    flex-direction: column;
    gap:10px;
    background-color: inherit;
    padding: 0px;
    width: 100%;
  }
  
  .profile-card__footer a.salon_raceList__btn{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    background: var(--white);
    width: 100%;
    position:relative;
    cursor: pointer;
    border-bottom: 1px solid var(--global-gray-20);
    padding: 0px 0px 8px 0px;
  }
  
  .profile-card__footer a.salon_raceList__btn:last-child{
    border-bottom: none;
  }
  
  .profile-card__footer .salon_raceList__count{
    display: flex;
    gap:2px;
    align-items: center;
    justify-content: center;
    background-color: var(--salon);
    color: var(--white);
    font-weight: bold;
    font-size: 0.75rem;
    line-height: 1;
    padding: 4px;
    border-radius: 3px;
  }
  .profile-card__footer .raceTtl-box__txtWrap .name {
    font-size: 1rem;
}
  .profile-card__footer .salon_raceList__count .count{
      font-family: var(--roboto);
      font-size: 1.4rem;
  }
  
  .profile-card__footer a.salon_raceList__btn .name{color: var(--main-black);}
  
  .profile-card__footer .grade_label{
    font-size: var(--font-xxxs);
  
  }
  .profile-card__footer .raceTtl-box__numWrap .place {
    font-weight: bold;
    font-size: 0.875rem;
}
.profile-card__footer .raceTtl-box__numWrap .num {
    font-weight: bold;
    font-size: 1rem;
} 
 */


/* Prediction Component */
.prediction-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 8px;
    padding: 0.75rem;
    gap: 0.75rem;
    box-sizing: border-box;
    min-height: 60px;
}

.prediction-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 2px 4px 0 rgba(31, 38, 135, 0.37);
}

.honmei-label {
    background: #F149DB;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.prediction-text {
    color: #333;
    font-size: var(--font-lg);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.prediction-button {
    flex-shrink: 0;
}

.rank-button {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: #4a5568;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

.rank-button:hover {
    background:var(--primary);
    transform: translateY(-1px);
}

.rank-text {
    background: white;
    color: #4a5568;
    padding: 0.1875rem 0.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1;
}

.button-text {
    font-size: 1.125rem;
}

.arrow-icon {
    background: white;
    color: #e91e63;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    flex-shrink: 0;
}

/* ランク別スタイル */
.rank-text.rank2 {
    background: #ffd700 !important;
    color: #333 !important;
}

.rank-text.rank3 {
    background: linear-gradient(45deg, #ff6b6b, #4e83cd, #96a0f5, #c4a2ff, #57c6fe, #22fff4) !important;
    color: white !important;
}

/* Back Number Section */
.backnumber-section {
    margin: 2rem 0;
}

.backnumber-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #6b7280;
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 400px;
    margin: 0 auto;
}

.backnumber-btn:hover {
    background: #4b5563;
}

.btn-arrow {
    font-size: 1.2rem;
    margin-left: auto;
}

.backnumber-btn .btn-arrow img {
    filter: brightness(0) invert(1) !important;
    width: 16px;
    height: 16px;
    display: inline-block;
}

/* Share Section */
.share-section {
    margin: 2rem 0;
    text-align: center;
    background-color: var(--global-gray-10);
    padding: 12px 15px;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.share-title {
    font-size: 1rem;
    font-weight: 600;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    transition: transform 0.2s ease;background-color: #FFF;
}

.share-btn:hover {
    transform: translateY(-2px);
}


.share-btn.facebook img {
    filter: brightness(0) saturate(100%) invert(35%) sepia(44%) saturate(644%) hue-rotate(192deg) brightness(92%) contrast(87%);
}

.share-btn.line img {
    filter: brightness(0) saturate(100%) invert(41%) sepia(86%) saturate(1186%) hue-rotate(72deg) brightness(98%) contrast(100%);
}

.share-btn img {
    width: 24px;
    height: 24px;
    /* filter: brightness(0) invert(1); */
}


/* Topics Pager */
.pager-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0;

}

.pager {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pager-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--global-gray-20);
    background: white;
    color: var(--menuBar-70);
}

.pager-item:hover {
    background: var(--global-gray-20);
    border-color: var(--global-gray-20);
   
}

.pager-number.active {
    background: var(--menuBar-100);
    border-color: var(--menuBar-100);
    color: var(--white);
}

.pager-number.active:hover {
    background: var(--menuBar-100);
    border-color: var(--menuBar-100);
}

.pager-prev,
.pager-next {
    background: var(--dark-gray);
    border-color: var(--dark-gray);
    color: var(--white);
}

.pager-prev:hover,
.pager-next:hover {
    background: var(--dark-gray);
    border-color: var(--dark-gray);
}

.pager-dots {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--global-gray-20);
    font-weight: 500;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .pager {
        gap: 0.25rem;
    }
    
    .pager-item {
        min-width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
    }
    
    .pager-dots {
        padding: 0 0.5rem;
    }
}




    /* 縦型フィード用ローカルスタイル */
    .one-column-feed { display: grid; gap: 16px; }
    .one-column-feed .topic-link {
      display: block; background: #fff; border: 1px solid var(--u-border, #e5e7eb);
      border-radius: 12px; padding: 12px; text-decoration: none; color: inherit;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .one-column-feed .topic-image img { width: 100%; height: auto; display: block; border-radius: 8px; }
    .one-column-feed .topic-title { font-size: 16px; line-height: 1.5; margin: 10px 0 6px; font-weight: 700; }
    .one-column-feed .topic-tags { display: inline-block; font-size: 12px; margin-bottom: 4px; }
    .one-column-feed .topic-date { display: inline-flex !important; align-items: baseline; font-size: 12px; color: #888; gap: 0.15em; line-height: 1; }
    @media (min-width: 960px) { .one-column-feed { gap: 20px; } }


/* related-articles: Swiper overrides to fix bottom gap near footer */
.related-articles { 
    margin: 0; 
    padding: 0; 
}
.related-articles .swiper { 
    overflow-x: hidden;   /* prevent horizontal overflow on PC */
    overflow-y: visible;  /* keep vertical context visible */
    height: auto !important; 
    padding-bottom: 20px; /* reserve space for scrollbar to avoid overlap */
}
.related-articles .swiper-wrapper { 
    height: auto !important; 
}
.related-articles .swiper-slide { 
    height: auto; 
}
/* Place scrollbar at bottom within swiper area to avoid covering content */
.related-articles .swiper-scrollbar { 
    position: absolute; 
    left: 10px; 
    right: 10px; 
    bottom: 0; 
    margin: 0; 
    width: auto; 
}

.related-articles .swiper-container-wrap {
  max-width: 100%;
  padding: 0 10px;        /* inset content to match scrollbar padding */
  overflow: hidden; /* hide any stray subpixel overflow */
  box-sizing: border-box;
}
.related-articles .swiper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 960px) {
  .related-articles .swiper-container-wrap { max-width: 100%; }
  .related-articles .swiper { width: 100%; max-width: 100%; }
}


/* ポイントページ */

#PointWrap {
    background: #fff;
    color: #333
}

#PointWrap h5 {
    width: 100%;
    text-align: center
}

#PointWrap h5 img {
    width: 80%;
    margin: 0 auto
}

#PointWrap h6 {
    background: #c3efe9;
    width: 100%;
    padding: 20px 0;
    font-size: 18px;
    text-align: center
}

#PointWrap p {
    width: 80%;
    margin: 40px auto;
    font-size: 18px;
    line-height: 150%
}

#PointWrap ul {
    width: 80%;
    background: #fff;
    border-radius: .3em;
    margin: 20px auto;
    padding: 20px;
    font-size: 16px;
    line-height: 150%;
    list-style-position: inherit
}

#PointWrap ul li {
    margin: 0 auto 15px auto
}

#PointWrap ul li:last-child {
    margin: 0 auto
}

#UseWrap {
    background: #faf7e6;
    padding: 15px 0
}

#SaveWrap {
    background: #fbffec;
    padding: 15px 0
}

#CoutionWrap {
    background: #e7fcf9;
    padding: 15px 0
}

/*youtube縦横比維持*/
.video-container {
position: relative;
width: 100%;
height: 0;
margin: 0 auto 7% auto;
padding-bottom: 56.25%;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*優馬ＪＡＰＡＮ誕生譚　本画像フロート*/
.Flo-left,.Flo-Right{
display:table-cell;
box-sizing:border-box;
vertical-align:top;
}
.Flo-left{
width:25%;
padding:0 5% 0 0;
}
.Flo-Right{
width:85%;
}


/* クロノ式テンプレ */
.topics_chrono__horseBox{
	margin: 1.5rem 0;
    background: #e1f1ff;
    border-radius: 6px;
    color: var(--main-black);
	border: 3px solid #001082;
}
.chrono__horseBox__ttl{
font-size: 1.1rem;
    background: #001082;
    padding: 0.8rem 1rem;
    text-align: left;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
	border-radius: 3px 3px 0 0;
color: #ceff6f;
}
.chrono__horseBox__inner{
padding: 1rem;
font-size: 0.9rem;
}
/* クロノ式テンプレ */