@charset "UTF-8";

/**** トップページ共通  ****/
.bg-stripe{
    background-image: url(/cdn/bts/common/sp/images/common/bg_stripe.png);
    background-color: #F7FAFA;
}

.top-page .par-title01{
    font-size: 4.8rem;
    color: #004EB5;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 7rem;
}

/**** オレンジボタン  ****/
.top-page .btn_area{
    margin-top: 5rem;
}
.top-page .btn_area .btn_wrap {
    width: 100%;
}
.top-page .btn_area .btn_wrap:nth-of-type(n+2){
    margin-top: 3rem;
}
.top-page .btn_orange{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 10rem;
    text-align: center;
    font-size: 3.6rem;
    color: #FFFFFF;
    line-height: 2.7;
    background-color: #FF9011;
}
.top-page .btn_area .btn_orange:after{
    content: '';
    position: absolute;
    width: 5rem;
    height: 2.5rem;
    top: 4rem;
    right: 2rem;
    background-image: url(/cdn/bts/common/sp/images/common/arrow_01_white_top.png);
    background-size: 100%;
    background-repeat: no-repeat;
}


/* マーキーエリア */
.top-page .marquee_area {
    width: 100%;
    height: 6rem;
    font-size: 2.4rem;
    line-height: 3.5rem;
    color: #FFFFFF;
    background-color: #004EB5;
    padding: 1.3rem 0rem 1.2rem 1.5rem;
    overflow: hidden; /* はみ出し部分を隠す */
    position: relative;
}
.top-page .marquee_area::after{
    content: "";
    display: block;
    position: absolute;
    width: 10.2rem;
    height: 100%;
    top: 0;
    right: 60.8rem;
    background-image: linear-gradient(to right, #004EB5 0%, rgba(18, 18, 18, 0) 100%);
    z-index: 2;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.top-page .text_animation {
    display: inline-block;
    white-space: nowrap; /* テキストを折り返さない */
    /* animation: marquee 13s linear infinite; アニメーション設定 */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    padding-left: 71rem;
}
.top-page .text_animation a{
    color: inherit;
    text-decoration: underline;
}

/* マーキーのキーフレーム */
@keyframes marquee {
    0% {
        transform: translateX(0%); /* 右端からスタート */
    }
    100% {
        transform: translateX(-100%); /* 左端まで移動 */
    }
}
/* 非表示用クラス */
.top-page .marquee_content_wrapper.display_none {
    display: none;
}


/* 本日の発売レース */
.top-page .today-sell{
    margin-top: 3rem;
    font-family: NotoSansJP-Medium;
}
.top-page .today-sell .today-sell_content_wrapper{
    /* display: flex;
    flex-wrap: wrap; */
}
.top-page .today-sell .today-sell_block{
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0.2rem 0.2rem 0.5rem #00000029;
}
.top-page .today-sell .today-sell_block:nth-of-type(n+2){
    margin-top: 2rem;
}
.top-page .today-sell .sell-title{
    width: 100%;
    height: 6rem;
    padding-top: 0.3rem;
    padding-left: 1.5rem;
    font-size: 3.6rem;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 5.2rem;
}
.top-page .today-sell .morning .sell-title{
    background-color: #6DC9F2;
}
.top-page .today-sell .day .sell-title{
    background-color: #FFBB00;
}
.top-page .today-sell .nighter .sell-title{
    background-color: #A182E9;
}
.top-page .today-sell .sell-item{
    display: flex;
    flex-wrap: wrap;
}
.top-page .today-sell .sell-item .sell-item_list{
    display: inline-block;
    width: 50%;
    padding: 1.5rem;
    font-size: 0;
}
.top-page .today-sell .sell-item .sell-item_list:nth-of-type(4n+2),
.top-page .today-sell .sell-item .sell-item_list:nth-of-type(4n+3){
    background-color: #F7FAFA;
}
.top-page .today-sell .sell-item .sell-item_list span{
    display: inline-block;
    font-size: 2.8rem;
    line-height: 4rem;
}
.top-page .today-sell .sell-item_list span.sell_jo{
    width: 8.5rem;
}
.top-page .today-sell .sell-item .sell-item_list span.sell_grade{
    width: 6.6rem;
    height: 3.3rem;
    margin-left: 1.4rem;
    text-align: center;
    font-size: 2.4rem;
    line-height: 3.5rem;
}
.top-page .today-sell .sell-item_list span.sell_nichiji{
    width: 8.5rem;
    margin-left: 0.7rem;
}
.top-page .today-sell .sell-item_list span.sell_icon{
    margin-left: 0.2rem;
    font-size: 0;
    line-height: 1;
}
.top-page .today-sell .sell-item_list span.sell_icon i{
    display: inline-block;
    background-size: 100%;
}
.top-page .today-sell .sell-item_list span.sell_icon i.is-morning{
    width: 3rem;
    height: 2.9rem;
}
.top-page .today-sell .sell-item_list span.sell_icon i.is-summertime{
    width: 2.2rem;
    height: 1.8rem;
}
.top-page .today-sell .sell-item_list span.sell_icon i.is-nighter{
    width: 2.1rem;
    height: 2.1rem;
}
.top-page .today-sell .sell-item_list span.sell_icon i.is-midnight{
    width: 2.5rem;
    height: 2.5rem;
}
.top-page .today-sell .sell-item_list span.sell_icon i.is-lady{
    width: 2rem;
    height: 2rem;
}
.top-page .today-sell .sell-item_list span.sell_icon i:nth-of-type(n+2){
    margin-left: 0.8rem;
}
.top-page .today-sell .sell-none-txt{
    font-size: 2.8rem;
}
.top-page .today-sell .sell-item_list span.sell_icon:has(.is-summertime){
    margin-left: 1.8rem;
}
.top-page .today-sell .sell-item_list span.sell_icon:has(.is-nighter){
    margin-left: 0.9rem;
}
.top-page .today-sell .sell-item_list span.sell_icon:has(.is-midnight){
    margin-left: 1.7rem;
}
/* 新着情報 */
.top-page .news{
    margin-top: 3rem;
}
.news_container{
    width: 71rem;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0.2rem 0.2rem 0.5rem #00000029;
    padding-bottom: 3rem;
}
.news_title{
    font-family: 'NotoSansJP-Bold';
    width: 71rem;
    background: #B1B1B1;
    color: #fff;
    font-size: 3.6rem;
    line-height: 5.2rem;
    padding: 0.9rem 0 0.9rem 1.9rem;
    box-sizing: border-box;
    margin: 0 auto 2.1rem;
}
.news_list{
    padding: 0;
    list-style: none;
    margin: 0 auto;
}
.news_list li{
    font-size: 0;
}
.news_list li:last-child{
    margin-bottom: 3rem;
}
.news_list li span{
    vertical-align: middle;
}
.news_list .news_date{
    font-family: 'NotoSansJP-Bold';
    font-size: 3.2rem;
    line-height: 4.6rem;
    padding-left: 1.9rem;
}
.col-tag_new, .col-tag_important{
    color: #fff;
    font-size: 2.1rem;
    line-height: 2.5rem;
    display: inline-block;
    width: 8rem;
    text-align: center;
    padding: 0.6rem 0 0.5rem 0;
    margin-left: 2rem;
}
.col-tag_new{
    font-family: 'Roboto-Bold';
    background: #FF9011;
}
.col-tag_important{
    background: #D80808;
    font-family: 'NotoSansJP-Bold';
}
.news_text{
    font-size: 2.8rem;
    line-height: 4rem;
    padding: 0 1.9rem;
    margin: 0.7rem 0 1.5rem 0;
    overflow-wrap: break-word;
}
.news_text a{
    text-decoration: none;
    color: inherit;
}
.list_link_button{
    text-align: center;
    margin: 0 auto;
}
.list_link_button a{
    text-decoration: none;
    font-family: 'NotoSansJP-Medium';
    font-size: 3.2rem;
    line-height: 4.6rem;
    display: inline-block;
    color: #004EB5;
    border: 0.2rem solid #004EB5;
    padding: 0.7rem 13.1rem 1.1rem 8.9rem;
    box-sizing: border-box;
    position: relative;
}
.list_link_button a::after{
    content: "";
    position: absolute;
    width: 4.4rem;
    height: 2.1rem;
    top: 0;
    bottom: 0;
    right: 1.9rem;
    margin: auto 0;
    background-image: url(/cdn/bts/common/sp/images/common/arrow_01_blue.png);
    background-size: 100%;
    background-repeat: no-repeat;
}


/* ピックアップ */
.top-page .bnr-area{
    margin-top: 4rem;
}
.pickup_container {
    width: 54rem;
    height: 31.2rem;
    margin: 0 auto 9.27rem;
}
.bnr-area.w_content .pickup_slider{
    width: 54rem;
    height: 31.2rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-bottom: 2.57rem;
}
.pickup_slider .pickup_banner{
    width: 54rem;
    height: 31.2rem;
    margin: 0 auto;
    padding: 0 0.5rem 0.5rem 0.5rem;
}
.pickup_banner a{
    width: 54rem;
}
.pickup_banner img {
    width: 100%;
    height: 100%;
    vertical-align: bottom;
    object-fit: contain;
    box-shadow: 0.2rem 0.2rem 0.5rem #00000029;
}
/* ピックアップスライダーボタン */
.com_content_wrapper .slick-prev,
.com_content_wrapper .slick-next
{
    top: 50%;

    display: block;

    width: 6rem;
    height: 6rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    cursor: pointer;

    background: #004EB5;
    border-radius: 50%;
}
.com_content_wrapper .slick-prev:hover,
.com_content_wrapper .slick-prev:focus,
.com_content_wrapper .slick-next:hover,
.com_content_wrapper .slick-next:focus
{
    /* color: transparent; */
    /* outline: none; */
    background: #004EB5;
}
.com_content_wrapper .slick-prev:hover:before,
.com_content_wrapper .slick-prev:focus:before,
.com_content_wrapper .slick-next:hover:before,
.com_content_wrapper .slick-next:focus:before
{
    opacity: 1;
}
.com_content_wrapper .slick-prev.slick-disabled:before,
.com_content_wrapper .slick-next.slick-disabled:before
{
    opacity: 1;
}

.com_content_wrapper .slick-prev:before,
.com_content_wrapper .slick-next:before
{
    font-family: 'slick';
    font-size: 2rem;
    line-height: 1;

    opacity: 1 !important;
    color: #fff;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.com_content_wrapper .slick-prev
{
    left: -8.4rem;
}
[dir='rtl'] .slick-prev
{
    right: -8.4rem;
    left: auto;
}
.com_content_wrapper .slick-prev:before
{
    content: '';
    display: block;
    width: 2.3rem;
    height: 2.6rem;
    border-top: 1.3rem solid transparent;
    border-right: 2.3rem solid #fff;
    border-left: 0px solid transparent;
    border-bottom: 1.3rem solid transparent;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2rem;
    margin: auto 0;
}
[dir='rtl'] .slick-prev:before
{
    content: '';
    display: block;
    width: 2.3rem;
    height: 2.6rem;
    border-top: 1.3rem solid transparent;
    border-right: 0px solid transparent;
    border-left: 2.3rem solid #fff;
    border-bottom: 1.3rem solid transparent;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2rem;
    margin: auto;
}

.com_content_wrapper .slick-next
{
    right: -8.4rem;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -8.4rem;
}
.com_content_wrapper .slick-next:before
{
    content: '';
    display: block;
    width: 2.3rem;
    height: 2.6rem;
    border-top: 1.3rem solid transparent;
    border-right: 0px solid transparent;
    border-left: 2.3rem solid #fff;
    border-bottom: 1.3rem solid transparent;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2rem;
    margin: auto;
}
[dir='rtl'] .slick-next:before
{
    content: '';
    display: block;
    width: 2.3rem;
    height: 2.6rem;
    border-top: 1.3rem solid transparent;
    border-right: 2.3rem solid #fff;
    border-left: 0px solid transparent;
    border-bottom: 1.3rem solid transparent;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2rem;
    margin: auto 0;
}

/* ピックアップ インジケーター */
.com_content_wrapper .slick-dotted.slick-slider
{
    margin-bottom: 0;
}

.com_content_wrapper .slick-dots
{
    position: absolute;
    bottom: -3.7rem;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.com_content_wrapper .slick-dots li
{
    position: relative;

    display: inline-block;

    width: 8rem;
    height: 1.2rem;
    margin: 0;
    padding: 0;

    cursor: pointer;
}
.com_content_wrapper .slick-dots li+li{
    margin-left: 1.8rem;
}
.com_content_wrapper .slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 8rem;
    height: 1.2rem;
    padding: 0;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.com_content_wrapper .slick-dots li button:hover,
.com_content_wrapper .slick-dots li button:focus
{
    outline: none;
}
.com_content_wrapper .slick-dots li button:hover:before,
.com_content_wrapper .slick-dots li button:focus:before
{
    opacity: 1;
}
.com_content_wrapper .slick-dots li button:before
{
    font-family: 'slick';
    font-size: 0.6rem;
    line-height: 2rem;

    position: absolute;
    top: 0;
    left: 0;

    width: 8rem;
    height: 1.2rem;

    content: '';
    display: inline-block;
    text-align: center;

    opacity: 1;
    background: #98C5FF;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.com_content_wrapper .slick-dots li.slick-active button:before
{
    opacity: 1;
    background: #004EB5;
}


/* フッターバナー */
.top-page .footer_banner_area{
    position: relative;
    width: 100%;
    height: 18.6rem;
}

.top-page .footer_banner_area .slick-initialized .slick-slide{
    display:flex
}
.top-page .footer_banner_area .img_info{
    display: flex;
    /* margin-right: 0rem; */
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
}
.top-page .footer_banner_area .inner_content{
    margin-bottom: 0;
}
.top-page .footer_banner_area .img_info .list_info{
    width: 33.2rem;     /* 画像の横幅 */
    height: 8.3rem;     /* 画像の高さ */
    margin-right: 1rem;
    margin-bottom: 2rem;
}
.top-page .footer_banner_area .img_info .list_info:nth-of-type(2n){
    margin-right: 0rem;
}
.top-page .footer_banner_area .img_info .list_info:nth-of-type(n+3){
    margin-bottom: 0rem;
}
.top-page .footer_banner_area img {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.top-page .footer_banner_area a {
    display: inline-block;
    width: 100%;
}


.top-page .footer_banner_area .slick-prev,
.top-page .footer_banner_area .slick-next {
    position: absolute;
    top: 56%;
    width: 4.2rem;
    height: 8.4rem;
    background: #004EB5;
    opacity: 0.8;
    transform: translateY(-50%);
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 10;
}
/* .top-page .footer_banner_area .no-arrows .slick-prev,
.top-page .footer_banner_area .no-arrows .slick-next{
    display: none !important;
} */

.top-page .footer_banner_area .slick-prev:hover,
.top-page .footer_banner_area .slick-next:hover,
.top-page .footer_banner_area .slick-prev:focus,
.top-page .footer_banner_area .slick-next:focus{
    /* opacity: 1; */
    background: #004EB5;
}

.top-page .footer_banner_area .slick-prev {
    top: 10.3rem;
    left: 0rem;
}

.top-page .footer_banner_area .slick-next {
    /* background: #004EB5; */
    right: 0rem;
    top: 10.3rem;
}
.top-page .footer_banner_area .slick-prev::before,
.top-page .footer_banner_area .slick-next::before {
    content: "";
    position: relative;
    display: block;
    width: 1.7rem;      /* 長さ */
    height: 1.7rem;     /* 長さ */
    border-left: 0.35rem solid #FFFFFF; /* 赤色 */
    border-bottom: 0.35rem solid #FFFFFF;
    transform: rotate(45deg);
}

/* ← 左矢印 */
.top-page .footer_banner_area .slick-prev::before {
    left: 1.5rem;
    transform: rotate(45deg);
}

/* → 右矢印 */
.top-page .footer_banner_area .slick-next::before {
    left: 0.5rem;
    transform: rotate(-135deg);
}
.top-page .footer_banner_area .slick-list{
    width: 67.4rem;
    margin: auto;
}