﻿@charset "UTF-8";

/* ----トップページ本文---- */
/* 重要なお知らせ */
.top-notice {
    padding: 4.26vw 5.33vw;
}

.top-notice li {
    margin-top: 2.66vw;
    padding-left: 6.8vw;
}

.top-notice li:first-child {
    margin-top: 0;
    background: url(../../img/usr/common/ico_notice.png) top left no-repeat;
    background-size: 4.13vw 4.13vw;
}

.top-notice,
.top-notice a {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.42;
}

/* MV */
.top-main {
    margin: 1.8rem 0 3.0rem;
}

.top-slide--slider>ul>li+li {
    display: none;
}

.top-slide--slider ul li {
    position: relative;
}

.top-slide--slider ul li span {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.5rem;
    line-height: 1.0;
    font-weight: bold;
    color: #ffffff;
    padding: 0.6rem 1.5rem 0.6rem 2.0rem;
    background: #cccccc;
    border-radius: 0 0 8px 0;
}

.top-slide--slider ul li span.top-slide-icon__info {
    background: #ff8565;
}

.top-slide--slider ul li span.top-slide-icon__secondlife {
    background: #68d383;
}

.top-slide--slider ul li span.top-slide-icon__beginner {
    background: #ffad58;
}

.top-slide--slider .bx-controls-direction {
    display: none;
}

.top-slide--slider .bx-pager-wrap {
    display: flex;
    justify-content: center;
}

.top-slide--slider .bx-pager-wrap .bx-prev,
.top-slide--slider .bx-pager-wrap .bx-next {
    position: relative;
    margin: 1.3rem 0.75rem 0;
    width: 1.6rem;
    height: 1.6rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0);
    text-align: left;
    white-space: nowrap;
    text-indent: -9999rem;
}

.top-slide--slider .bx-pager-wrap .bx-prev:before,
.top-slide--slider .bx-pager-wrap .bx-next:before {
    position: absolute;
    top: calc(50% - 0.4rem);
    content: '';
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}

.top-slide--slider .bx-pager-wrap .bx-prev:before {
    right: 0;
    transform: rotate(135deg);
}

.top-slide--slider .bx-pager-wrap .bx-next:before {
    left: 0;
    transform: rotate(-45deg);
}

.top-slide--slider .bx-pager {
    display: flex;
    justify-content: center;
    font-size: 1.0rem;
    line-height: 1;
}

.top-slide--slider .bx-pager .bx-pager-item {
    margin: 1.6rem 0.75rem 0;
}

.top-slide--slider .bx-pager .bx-pager-item a {
    display: block;
    overflow: hidden;
    width: 1.0rem;
    height: 1.0rem;
    border-radius: 100%;
    background: #eeeeee;
    text-align: left;
    white-space: nowrap;
    text-indent: -9999rem;
}

.top-slide--slider .bx-pager .bx-pager-item a.active {
    background: #333333;
}

/*お知らせ2*/
.top-news {
    margin: 0 0 1.0rem;
    text-align: center;
}

.top-news a {
    position: relative;
    display: inline-block;
    text-align: left;
    margin: 0;
    padding: 0 3.0rem 0 3.0rem;
    color: #f36800;
    font-size: 1.6rem;
    font-weight: bold;
    background: url(../../img/usr/top/ico_info_sp.png) 0 0 / 2.5rem auto no-repeat;
}

.top-news a:after {
    position: absolute;
    right: 0.3rem;
    top: calc(50% - 0.5rem);
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    border-bottom: 2px solid #f36800;
    border-right: 2px solid #f36800;
    transform: rotate(-45deg);
}

.top-top-con {
    padding: 12.2rem 0 0;
    background: url(../../img/usr/top/bg_topbn_sp.png) center top / 37.5rem auto no-repeat;
}

.top-top-con:before {
    display: block;
    content: '';
    margin: 0 0 -8.5rem;
    width: 100%;
    height: 10rem;
    background: #ffca96 url(../../img/usr/top/bg_topbn_b_sp.png) left bottom / 100% auto no-repeat;
}

/* ログイン前 */
.top-user-status {
    margin: 0 5.33vw 3.6rem;
    padding: 1.0rem 3.0rem 2.3rem;
    box-shadow: 0px 0px 20px -5px rgb(0 0 0 / 30%);
    border-radius: 8px;
    background: #ffffff;
    font-size: 1.6rem;
    text-align: center;
}

.top-user-status .user-name {
    margin: 0;
    text-align: center;
}

.top-user-status .user-login {
    margin: 0.8rem 0 0;
}

.top-user-status .user-login>a {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: #f47719;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none !important;
    margin: 0 0 0.6rem;
    padding: 1.7rem 0 1.2rem;
}

.top-user-status .user-login>a span:first-child {}

.top-user-status .user-login>a span:first-child:before {
    display: inline-block;
    content: '';
    margin: 0;
    width: 4.6rem;
    height: 3.8rem;
    background: url(../../img/usr/top/ico_st_mypage_sp.png) 0 center / auto 3.8rem no-repeat;
    vertical-align: middle;
}

.top-user-status .user-login>a span:last-child {
    margin: 0 0 0;
    font-size: 2.4rem;
    line-height: 1.2;
    font-weight: bold;
}

.top-user-status .user-login .user-askpass a {
    color: #1a73e6;
    text-decoration: underline;
}

.top-user-status .user-login .user-askpass a:hover {
    text-decoration: none;
}

.top-user-status .user-entry {
    margin: 1.2rem 0 0;
}

.top-user-status .user-entry>a {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: #dee8f3;
    border: solid 1px #5a8ac1;
    color: #5a8ac1;
    border-radius: 8px;
    text-decoration: none !important;
    margin: 0;
    padding: 1.0rem 0 1.0rem;
}

.top-user-status .user-entry>a span:first-child {}

.top-user-status .user-entry>a span:first-child:before {
    display: inline-block;
    content: '';
    width: 5.0rem;
    height: 3.6rem;
    background: url(../../img/usr/top/ico_st_entry.png) 0 center / 3.6rem no-repeat;
    vertical-align: middle;
}

.top-user-status .user-entry>a span:last-child {
    margin: 0 0 0;
    font-size: 2.4rem;
    line-height: 1.2;
    font-weight: bold;
}

.top-user-status .user-entry-etc {
    margin: 1.7rem 0 0;
}

.top-user-status .user-entry-etc>p {
    font-size: 1.4rem;
}

.top-user-status .user-entry-etc>a {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: #5a8ac1;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none !important;
    margin: 0.2rem 0 0;
    padding: 0.8rem 0;
    font-size: 1.6rem;
    font-weight: bold;
}

/* トップ：バナー */
.top-pr {
    margin: 0 5.33vw 5.2rem;
}

.top-pr ul li {
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 30%);
}

.top-pr ul li+li {
    margin-top: 2.8rem;
}

/* トップ：ここ晴れ */
.top-coco {
    position: relative;
    margin: 0 0;
    padding: 0 0 4.7rem;
}

.top-coco:before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: 8.2rem;
    background: #fff3ea;
    border-radius: 0 0 8px 8px;
}

.top-coco h2+p {
    margin: 1.5rem 1.5rem 2.5rem;
    font-size: 1.4rem;
    line-height: 1.8;
}

.top-coco ul {
    position: relative;
    z-index: 1;
    margin: 0 5.33vw;
}

.top-coco ul li {
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 30%);
}

.top-coco ul li+li {
    margin-top: 3.0rem;
}

/* トップ：サブバナー */
.top-sub {
    position: relative;
    margin-top: 12.0vw;
    padding: 0 5.33vw;
}

.top-notice+.top-sub {
    margin-top: 0;
}

.top-sub h2:before,
.top-sub h2:after {
    content: none;
}

.top-sub h2 a,
.top-sub h2 a img {
    display: block;
}

.top-sub h3 {
    margin-top: 2.93vw;
    padding: 0;
    font-size: 1.5rem;
}

.top-sub h3+p {
    margin-top: 3.2vw;
    line-height: 1.42;
}

/* トップ：イベント */
.block-top-event {
    margin-top: 12.0vw;
}

.block-top-event .block-top-event--unit {
    padding: 0 5.33vw;
}

.block-top-event .block-top-event--unit:first-child {
    margin-top: 0;
}

.block-top-event .block-top-event--unit h2.block-top-event--image {
    display: block;
}

.block-top-event .block-top-event--unit h2.block-top-event--image:before,
.block-top-event .block-top-event--unit h2.block-top-event--image:after {
    content: none;
}

.block-top-event .block-top-event--unit.unit-list {
    margin-top: 18.13vw;
}

/* ---- ランキング：block-ranking-r ---- */
.block-top-event--unit.unit-list .block-top-event--goods {
    margin-top: 12.0vw;
}

.block-top-event--unit.unit-list .block-ranking-r--items {
    display: block;
}

.block-top-event--unit.unit-list .block-ranking-r--items li {
    width: 100%;
    margin-top: 5.33vw;
    margin-right: 0;
    padding: 0;
}

.block-top-event--unit.unit-list .block-ranking-r--items li a {
    padding-top: 0;
    display: flex;
}

.block-top-event--unit.unit-list .block-ranking-r--goods-image {
    width: 37.33vw;
    height: 37.33vw;
}

.block-top-event--unit.unit-list .block-ranking-r--goods-image figure,
.block-top-event--unit.unit-list .block-ranking-r--items li:first-child a .block-ranking-r--goods-image figure {
    width: 37.33vw;
    height: 37.33vw;
    min-width: auto;
    min-height: auto;
}

.block-top-event--unit.unit-list .block-ranking-r--description {
    width: calc(100% - 37.33vw - 2.66vw);
    margin-top: 0;
    margin-left: 2.66vw;
    margin-right: 5.32vw;
}

.block-top-event--unit.unit-list .block-ranking-r--items li:first-child {
    margin-top: 0;
}

.block-top-event--unit.unit-list .block-ranking-r--items li:first-child .block-ranking-r--goods-image img {
    width: 37.33vw;
    height: 37.33vw;
}

.block-top-event--unit.unit-list .block-ranking-r--items li:first-child a .block-ranking-r--description {
    padding-top: 0;
}

.block-top-event--unit.unit-list .block-ranking-r--items li:first-child a .block-ranking-r--goods-name {
    margin-top: 4.0vw;
}

.page-top .block-top-event--freespace2 {
    display: block;
    margin-top: 12.0vw;
}

.block-top-event--unit.unit-list .block-ranking-r--rank {
    position: relative;
    top: auto;
    left: auto;
}

.block-top-event .block-top-event--unit.unit-bnr {
    margin-top: 8.0vw;
}

.block-top-event .block-top-event--unit.unit-bnr h3 {
    margin-top: 2.93vw;
    padding: 0;
    font-size: 1.5rem;
}

.block-top-event .block-top-event--unit.unit-bnr>h3+p {
    margin-top: 3.2vw;
    line-height: 1.42;
}

/* バナー */
.top-bn-box {
    margin-left: 5.33vw;
    margin-right: 5.33vw;
    margin-bottom: 5.2rem;
}

.top-bn-box h2 {
    margin: 0 0 2.4rem;
    text-align: center;
}

.top-bn-box h2::before,
.top-bn-box h2::after {
    content: none;
}

.top-bn-box figure img {
    width: 100%;
    height: auto;
}


/* トップおすすめ */
/* 商品ラインナップ */
.top-bn {
    margin: 0 5.33vw;
}

.top-bn h2 {
    margin: 0 0 2.4rem;
}

.top-bn h2:before,
.top-bn h2:after {
    display: none;
}

.top-bn ul {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.top-bn ul li {
    width: 46.268%;
    margin: 0 0 2.5rem;
    text-align: center;
}

.top-bn ul li .btn-dydo-orange {
    width: 100%;
    font-size: 1.4rem;
    height: 3.1rem;
}

.top-bn ul li .btn-dydo-orange:before {
    right: 1.2rem;
}

.top-bn ul li a {
    position: relative;
    display: flex;
    flex-flow: column;
    height: 100%;
    padding: 0 0 4.2rem;
    font-size: 1.4rem;
}

.top-bn ul li a dt {
    margin: 0.8rem 0 0;
    font-size: 1.54rem;
    font-weight: bold;
    color: #1a73e6;
    text-decoration: underline;
}

.top-bn ul li a dd {
    margin-top: 0.8rem;
}

.top-bn ul li:nth-child(n+5) a {
    padding-bottom: 0;
}

.top-bn ul li:nth-child(n+5) a dd,
.top-bn ul li:nth-child(n+5) a span {
    display: none !important;
}

.top-bn ul li a .btn-dydo-orange {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

/* お知らせ */
.block-top-topic {
    margin-top: 18.4vw;
}

/* 注文・お問い合わせについて */
.ordersinquiries {
    margin-top: 18vw;
    padding: 0 5.33vw;
}

.ordersinquiries h2:before,
.ordersinquiries h2:after {
    display: none !important;
}

.ordersinquiries>p {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.0;
}

.ordersinquiries .ordersinquiries-contents {
    margin-top: 1.0rem;
}

.ordersinquiries .ordersinquiries-contents h3 {
    padding: 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.2;
}

.ordersinquiries-contents .net {
    margin-top: 8.0vw;
}

.ordersinquiries-box {
    margin-top: 4.66vw;
    border: 2px solid #f47719;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ordersinquiries-contents .tel .ordersinquiries-box {
    padding: 5.86vw 0;
    flex-direction: column;
}

.ordersinquiries-contents .net .ordersinquiries-box {
    height: 21.33vw;
    background-color: #f47719;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ordersinquiries-contents .net .ordersinquiries-box:before {
    content: '';
    display: block;
    width: 3.5rem;
    height: 2.5rem;
    margin-right: 4.13vw;
    background: url(../../img/usr/common/ico_ordersinquiries_mail.png) center center no-repeat;
    background-size: 3.5rem auto;
}

.ordersinquiries-contents a.ordersinquiries-box:hover {
    text-decoration: none;
}

.ordersinquiries-box .tel-num {
    min-height: 3.5rem;
    padding: 0 0 0 3.8rem;
    background: url(../../img/usr/common/ico_ordersinquiries_tel_sp.png) left 0.2rem / auto 3.3rem no-repeat;
}

.ordersinquiries-box .tel-num span {
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.0;
}

.ordersinquiries-box .tel-btn a {
    margin: 1.5rem 0 0;
    border-radius: 5px;
    width: 25.0rem;
    height: 4.5rem;
    font-size: 1.8rem;
    font-weight: bold;
    background-color: #f47719;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ordersinquiries-box .tel-time {
    margin-top: 1.5rem;
    font-size: 1.6rem;
}

.ordersinquiries-box .tel-note {
    font-size: 1.4rem;
}

.ordersinquiries-contents .net .ordersinquiries-box span {
    font-size: 2.4rem;
    font-weight: bold;
}

/* 外部サイトリンク */
.ordersinquiries.websitebn {
    margin-top: 11vw;
}

/* 最近チェックした商品 */
.block-recent-item {
    display: none;
}