@charset "utf-8";

/*************************************************************

変数設定

*************************************************************/
:root {
    --fonts-main: "Roboto", "Noto Sans JP", sans-serif;
    --fonts-gothic: "Roboto", "Noto Sans JP", sans-serif;
    --fonts-mincho: "Times New Roman", Times, "Noto Serif JP", serif;
    --fonts-title: "Times New Roman", Times, "Noto Serif JP", serif;
    --fonts-en: "Roboto";
    --color-mainFonts: #0c1b2a;
    --color-mainColor: #8e1728;
    --color-subColor1: #0c1b2a;
    --color-subColor2: #493c94;
    --color-red: #f53b56;
    --color-gray: #9fa5ab;
    --color-liteGray: #f6f6f6;
    --color-black: #000;
    --color-white: #fff;
    --color-border: #cac2bc;
}

/*************************************************************

基本設定

*************************************************************/
body {
    font-family: var(--fonts-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-mainFonts);
    overflow-x: hidden;
    background: var(--color-liteGray);
}
.ec-layoutRole{
    background: var(--color-liteGray);
}

img {
    max-width: 100%;
}
.imgFilter {
    filter: brightness(0.7);
}

a {
    transition: 0.3s;
    color: var(--color-subColor2);
}

a:hover {
    opacity: 0.8;
}

.ec-topicpath {
    color: var(--color-subColor2);
}
.ec-topicpath .ec-topicpath__item--active{
    text-align: left;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    text-align: justify;
}

p,
div,
span,
th,
tr,
td,
dl,
dt,
dd {
    line-break: anywhere;
}

.spOnly {
    display: none;
}
@media screen and (max-width: 767px) {
    .spOnly {
        display: inherit;
    }
    .pcOnly {
        display: none;
    }
}

.ec-required {
    color: var(--color-mainColor);
}
.ec-registerRole{
    color: var(--color-mainFonts);
}

/*----------------------------
見出し
----------------------------*/
.ec-rectHeading h1,
.ec-rectHeading .h1,
.ec-rectHeading h2,
.ec-rectHeading .h2,
.ec-rectHeading h3,
.ec-rectHeading .h3,
.ec-rectHeading h4,
.ec-rectHeading .h4,
.ec-rectHeading h5,
.ec-rectHeading .h5,
.ec-rectHeading h6,
.ec-rectHeading .h6 {
    font-family: var(--fonts-gothic);
}
.ec-reportHeading h1,
.ec-reportHeading .h1,
.ec-reportHeading h2,
.ec-reportHeading .h2,
.ec-reportHeading h3,
.ec-reportHeading .h3,
.ec-reportHeading h4,
.ec-reportHeading .h4,
.ec-reportHeading h5,
.ec-reportHeading .h5,
.ec-reportHeading h6,
.ec-reportHeading .h6,
.ec-reportHeading p {
    font-size: 20px;
}
.ec-reportHeading {
    border: none;
}

h2 {
    font-family: var(--fonts-title);
    font-size: 30px;
    text-align: center;
    margin: 0 0 40px;
    font-weight: 900;
}

h2 span {
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.sec h2 {
    color: var(--color-mainColor);
}

.sec h2 > span {
    color: #0c1b2a;
}

h3 {
    font-family: var(--fonts-title);
    font-size: 30px;
    text-align: center;
    margin: 0 0 30px;
    font-size: 24px;
}
.ec-pageHeader h1,
.ec-pageHeader .h1 {
    color: var(--color-mainFonts);
    font-size: clamp(18px, 3vw, 30px);
    border: none;
    text-align: center;
    margin-top: 30px;
}

/*----------------------------
ボタン設定
----------------------------*/
.ec-inlineBtn,
button {
    color: var(--color-mainFonts);
}
.more-bt.no-link,
.more-bt a {
    display: block;
    padding: 10px;
    max-width: 267px;
    margin: auto;
    position: relative;
    background: var(--color-mainColor);
    color: var(--color-white);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

.ec-blockBtn--action,
.ec-inlineBtn--action {
    display: block;
    padding: 10px;
    max-width: 267px;
    margin: auto;
    position: relative;
    background: var(--color-mainColor);
    color: var(--color-white);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    margin: 0;
    line-height: normal;
    height: auto;
    border: none;
}
.ec-blockBtn--cancel,
.ec-inlineBtn--cancel {
    display: block;
    padding: 10px;
    max-width: 267px;
    margin: auto;
    position: relative;
    background: var(--color-subColor1);
    color: var(--color-white);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    margin: 0;
    line-height: normal;
    height: auto;
    border: none;
}

.more-bt .arrow,
.more-link .arrow{
    position: absolute;
    top: 4px;
    right: 10px;
    display: inline-block;
    width: 15px;
    height: 1px;
    margin-top: 20.5px;
    border-radius: 20px;
    background-color: var(--color-white);
}

.more-bt .arrow::before,
.more-link .arrow::before{
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    right: 0;
    width: 10px;
    height: 2px;
    border-radius: 20px;
    background-color: var(--color-white);
    transform: rotate(45deg);
    transform-origin: calc(100% - 2px) 50%;
}

/* ボタン競合回避 */
main .ec-layoutRole .ec-blockBtn--cancel,
main .ec-blockBtn--action {
    margin-left: auto;
    margin-right: auto;
}
main .ec-off4Grid .ec-off4Grid__cell {
    width: 100%;
    margin: 0 auto;
}
main .ec-off1Grid .ec-off1Grid__cell {
    margin: 0;
    width: 100%;
}
main .ec-off1Grid .ec-off1Grid__cell button,
main .ec-off1Grid .ec-off1Grid__cell a,
main .ec-off4Grid .ec-off4Grid__cell button,
main .ec-off4Grid .ec-off4Grid__cell a{
    margin-inline: auto;
}

.ec-blockBtn--action:disabled, .ec-blockBtn--action.disabled{
    background-color: var(--color-mainFonts);
    margin: 0;
}

@media screen and (max-width: 767px) {
    .ec-blockBtn--action,
    .ec-blockBtn--cancel {
        margin: 0 auto;
    }
    .ec-blockBtn--action:disabled, .ec-blockBtn--action.disabled{
        max-width: none;
    }
}

#upload-zone .filepond--drop-label label{
    line-height: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    padding: 20px !important;
}
#upload-zone i{
    font-size: min(12vw, 30px) !important;
}

span.tax{
    font-size: 0.8em;
    margin-left: 5px;
}

/* エラー */
.ec-alert-warning{
    background: var(--color-mainColor);
    color: var(--color-white);
}
.ec-login .ec-errorMessage{
    color: var(--color-mainColor);;
}


/*----------------------------
カート追加モーダル
----------------------------*/
.ec-modal-wrap .ec-role{
    display: flex;
    justify-content: center;
    gap: 10px;
}
.ec-modal-wrap .ec-role>*{
    width: 100%;
}
@media screen and (max-width:767px){
    .ec-modal-wrap .ec-role{
        flex-direction: column;
    }
    .ec-modal-wrap .ec-role>*{
        max-width: none;
    }
}

/*----------------------------
details
----------------------------*/

details {
    border-bottom: 1px solid var(--color-border);
    padding: 20px 20px 16px;
    color: var(--color-mainFonts);
}
details p{
    color: var(--color-mainColor);
}


summary {
    display: block;
    list-style: none;
    position: relative;
    margin-bottom: 0;
    transition: .3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
summary::-webkit-details-marker {
  display:none;
}
span.open{
    width: 10px;
    height: 10px;
    display: block;
    position: relative;
    top: calc(50% - 5px);
    right: 0;
    margin-left: 5px;
}

span.open::before,
span.open::after{
    content: "";
    position: absolute;
    background: var(--color-mainColor);
    transition: .3s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
span.open::before{
    opacity: 1;
    width: 10px;
    height: 2px;
}
span.open::after{
    width: 2px;
    height: 10px;
}

details[open] summary{
    margin-bottom: 10px;
}
details[open] summary span.open::before,
details[open] summary span.open::after{
    transform: translate(-50%, -50%) rotate(90deg);
}
details[open] summary span.open::before{
    opacity: 0;
}

/*----------------------------
共通　商品名
----------------------------*/
.prod-name .bland{
    font-weight: 600;
    font-size: clamp(12px, 1vw, 14px);
    margin-bottom: 5px;
}
.prod-name .name{
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    margin-bottom: 5px;
}
.prod-name .year{
    color: var(--color-gray);
    font-weight: 600;
    font-size: clamp(12px, 1vw, 14px);
    margin-bottom: 5px;
}
.item-price{
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 600;
}
.product-image{
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    height: auto;
}

/*----------------------------
サイト全体の横幅関連
----------------------------*/

.sec > .inner {
    max-width: 1360px;
    margin: auto;
}

.ec-layoutRole__contentBottom .sec > .inner {
    max-width: 1360px;
    margin: auto;
}

@media screen and (max-width: 1360px) {
    .ec-layoutRole__contentBottom .sec > .inner {
        padding: 0 10px;
    }
}

/*-----
メインコンテンツ中段　大枠
-----*/
.ec-layoutRole .ec-layoutRole__contents {
    max-width: 1360px;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 1360px) {
    .ec-layoutRole .ec-layoutRole__contents {
        padding: 0 10px;
    }
}

/*-----
左サイドバー
-----*/
.ec-layoutRole .ec-layoutRole__left,
.ec-layoutRole .ec-layoutRole__right {
    flex: 0 1 320px;
    width: auto;
}

@media screen and (max-width: 1024px) {
    .ec-layoutRole .ec-layoutRole__left,
    .ec-layoutRole .ec-layoutRole__right {
        display: none;
    }
}

/*-----
右メインエリア
-----*/
.ec-layoutRole .ec-layoutRole__mainWithColumn {
    flex: 0 1 calc(100% - 360px);
    width: auto;
}

@media screen and (max-width: 1024px) {
    .ec-layoutRole .ec-layoutRole__mainWithColumn {
        flex: 0 1 100%;
        width: auto;
    }
}

/*-----
メインコンテンツ下段　大枠
-----*/
.ec-layoutRole .ec-layoutRole__contentBottom {
}

@media screen and (max-width: 1360px) {
    .ec-layoutRole .ec-layoutRole__contentBottom {
    }
}

/*************************************************************

ヘッダー

*************************************************************/

#page_homepage .ec-layoutRole__header + .ec-layoutRole__contentTop,
#page_product_list .ec-layoutRole__header + .ec-layoutRole__contentTop {
    margin-top: 0;
}

.ec-layoutRole__header.fixed-margin {
    margin-bottom: 110px;
}

@media screen and (max-width: 767px) {
    .ec-layoutRole__header.fixed-margin {
        margin-bottom: 130px;
    }
}

@media screen and (max-width: 599px) {
    .ec-layoutRole__header.fixed-margin {
        margin-bottom: 120px;
    }
}

#header-news {
    background: var(--color-black);
    color: var(--color-white);
    text-align: center;
    font-size: 14px;
    padding: 5px 10px;
}

#header-news p {
    margin: 0;
    text-align: center;
}
#header-news p a{
    color: #fff;
}

#header {
    background: var(--color-mainColor);
    color: var(--color-white);
}

#header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

#header > .inner {
    max-width: 1360px;
    margin: auto;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
}

@media screen and (max-width: 1360px) {
    #header > .inner {
        padding: 15px 10px;
    }
}

#header > .inner .header-left {
    flex: 0 1 calc(100% - 150px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

@media screen and (max-width: 1024px) {
    #header > .inner .header-left {
        flex: 0 1 100%;
    }
}

#header > .inner .header-right {
    flex: 0 1 130px;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1024px) {
    #header > .inner .header-right {
        position: absolute;
        top: auto;
        right: 10px;
        width: 40%;
        max-width: 180px;
    }
}

/*----------------------------
ロゴエリア
----------------------------*/
#header #sitelogo {
    flex: 0 1 205px;
    margin-right: 15px;
}

@media screen and (max-width: 1024px) {
    #header #sitelogo {
        margin: 0 0 10px;
    }
}

@media screen and (max-width: 599px) {
    #header #sitelogo {
        flex: 0 1 130px;
    }
}

#header #sitelogo a {
    color: var(--color-white);
}

#header #sitelogo .logo-text {
    font-size: 11px;
    margin: 0 0 5px;
}

@media screen and (max-width: 599px) {
    #header #sitelogo .logo-text {
        font-size: clamp(7px, 1.25vw, 10px);
        margin: 0;
    }
}

/*----------------------------
検索エリア
----------------------------*/
#header .header-search {
    flex: 0 1 auto;
    margin-right: 27px;
}

@media screen and (max-width: 1024px) {
    #header .header-search {
        flex: 0 1 100%;
        margin-right: 0;
    }
}

.ec-headerSearch .ec-headerSearch__keyword {
    background: none;
    border: none;
    float: none;
    width: auto;
}

.ec-headerSearch .ec-headerSearch__keyword .ec-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ec-headerSearch .ec-headerSearch__keyword input[type="search"].search-input {
    border-radius: 5px 0 0 5px;
    padding: 10px 20px;
    background: var(--color-white);
    font-size: 16px;
    min-height: 44px;
}

.ec-headerSearch__keyword .search-btn {
    background: var(--color-black);
    display: block;
    border: none;
    border-radius: 0 5px 5px 0;
    padding: 5px 10px;
}

.ec-headerSearch__keyword .search-btn img {
    max-width: none;
}

/*----------------------------
店舗情報
----------------------------*/
#header .header-shopInfo {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: clamp(8px, 0.8vw, 12px);
}
#header .header-shopInfo a{
    color: var(--color-white);
}

@media screen and (max-width: 1024px) {
    #header .header-shopInfo {
        display: none;
    }
}

#header .header-shopInfo ul {
    list-style: none;
    margin: 0 15px 0 0;
    padding: 0 15px 0 0;
    position: relative;
}

#header .header-shopInfo ul::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 1px;
    height: 100%;
    background: var(--color-white);
}

#header .header-shopInfo ul > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header .header-shopInfo ul > li .shop-address {
    margin-right: 10px;
}

#header .header-shopInfo ul > li .shop-telNumber {
    padding-left: 15px;
    background: url(../img/common/ico-tel.svg) no-repeat left center;
}

/*----------------------------
ログイン・お気に入り・カート
----------------------------*/
#header .login-favorite-cart ul {
    flex: 1 1 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#header .login-favorite-cart ul li {
    flex: 0 1 calc(100% / 3 - 10px);
    text-align: center;
}

@media screen and (max-width: 1024px) {
    #header .login-favorite-cart ul li {
        flex: 0 1 calc(100% / 4 - 5px);
        max-width: 25px;
    }
}

#header .login-favorite-cart ul li.login img {
}

@media screen and (max-width: 599px) {
    #header .login-favorite-cart ul li.login img {
        max-width: 18px;
    }
}

#header .login-favorite-cart ul li.cart {
    position: relative;
}

#header .login-favorite-cart ul li.cart a {
    color: var(--color-mainColor);
}

#header .login-favorite-cart ul li.cart span {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 17px;
    height: 17px;
    background: var(--color-white);
    border: solid 2px var(--color-mainColor);
    text-align: center;
    font-size: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: 600;
}

/*----------------------------
ハンバーガーボタン
----------------------------*/
#header .sp-hamberger {
    display: none;
    cursor: pointer;
    transition: 0.3s;
}

@media screen and (max-width: 1024px) {
    #header .sp-hamberger {
        display: block;
        position: sticky;
        top: 23px;
        right: 0;
    }
}

#header .sp-hamberger > div {
    position: relative;
    height: 16px;
}

#header .sp-hamberger > div span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    border-radius: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    transition: 0.3s;
}

#header .sp-hamberger > div span:nth-child(1) {
    top: 0;
}

#header .sp-hamberger > div span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%);
}

#header .sp-hamberger > div span:nth-child(3) {
    bottom: 0;
}

/* メニュー展開時は×印 */
body.have_curtain #header {
    position: static;
}

body.have_curtain #header .sp-hamberger {
    position: fixed;
    top: 23px;
    right: 30px;
    width: 25px;
    height: 16px;
    z-index: 999999;
}

body.have_curtain #header .sp-hamberger > div span:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

body.have_curtain #header .sp-hamberger > div span:nth-child(2) {
    opacity: 0;
}

body.have_curtain #header .sp-hamberger > div span:nth-child(3) {
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.ec-drawerRoleClose {
    display: none !important;
}

/*----------------------------
PCナビゲーション
----------------------------*/
#header #global-nav-pc {
    background: var(--color-black);
    padding: 0;
}

@media screen and (max-width: 1360px) {
    #header #global-nav-pc {
        padding: 0 10px;
    }
}

@media screen and (max-width: 1024px) {
    #header #global-nav-pc {
        display: none;
    }
}

#header #global-nav-pc > ul > li > a,
#header #global-nav-pc > ul > li > span {
    color: var(--color-white);
    padding: 15px 0;
    display: block;
}

#header #global-nav-pc ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    font-size: 12px;
    max-width: 1360px;
}

#header #global-nav-pc .dropdown-child {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    background: var(--color-white);
    padding: 10px;
    border: solid 1px var(--color-mainColor);
    border-radius: 5px;
    min-width: 200px;
    white-space: nowrap;
}

#header #global-nav-pc .dropdown-child::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 15px;
    z-index: 9999;
    width: 15px;
    height: 10px;
    background: var(--color-white);
    border: solid 1px var(--color-mainColor);
    border-bottom: none;
    clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
}

#header #global-nav-pc .dropdown-child > li {
    border-bottom: dotted 2px var(--color-mainColor);
}

#header #global-nav-pc .dropdown-child > li:last-child {
    border: none;
}

#header #global-nav-pc .dropdown-child a {
    color: var(--color-mainFonts);
    display: block;
    padding: 5px;
}

#header #global-nav-pc .dropdown {
    position: relative;
}

/*----------------------------
SPナビゲーション
----------------------------*/
#global-nav-sp {
    padding: 30px;
}

#global-nav-sp a {
    color: var(--color-white);
}

#global-nav-sp > ul > li {
    font-weight: 600;
}

#global-nav-sp > ul > li:not(:last-child) {
    margin-bottom: 15px;
}

#global-nav-sp .accordion>div{
    display: flex;
    gap: 15px;
}
#global-nav-sp .accordion .arrow{
    position: relative;
}
#global-nav-sp .accordion .arrow::before{
    display: inline-block;
    content: "";
    width: 0.5em;
    height: .5em;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    rotate: 135deg;
    margin-bottom: 3px;
}

#global-nav-sp .accordion .accordion-child {
    display: none;
    padding-left: 20px;
}

#global-nav-sp .accordion .accordion-child > li:not(:last-child) {
    margin-bottom: 15px;
}

#global-nav-sp .accordion.open > div {
    font-weight: bold;
    margin-bottom: 15px;
}

#global-nav-sp .accordion.open .accordion-child {
    display: block;
    font-weight: 400;
}

#global-nav-sp-tel {
    background: var(--color-subColor1);
    padding: 30px;
}

#global-nav-sp-tel h3 {
    text-align: left;
    margin-bottom: 5px;
}

#global-nav-sp-tel ul.tel li {
    margin-bottom: 20px;
}

#global-nav-sp-tel ul.tel li .shop-telNumber {
    border: solid 1px var(--color-white);
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 10px;
}

#global-nav-sp-tel ul.tel li .shop-telNumber a {
    color: var(--color-white);
}

#global-nav-sp-tel ul.tel li .shop-telNumber p {
    background: url(../img/common/ico-footer-tel.svg) no-repeat left center;
    padding-left: 35px;
    font-size: 17px;
    margin: 0;
    line-height: 1.2;
}

#global-nav-sp-tel ul.tel li .shop-telNumber p span {
    font-size: 14px;
}

/*-----
デフォルトCSSの競合対策コード
-----*/

/*オーバーレイ*/
@media only screen and (min-width: 1024px) {
    .ec-overlayRole {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    .ec-overlayRole {
        display: block;
    }
}

.ec-overlayRole {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    background: transparent;
    transform: translateX(0);
    transition: all 0.3s;
    visibility: hidden;
}

.have_curtain .ec-overlayRole {
    display: block;
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    visibility: visible;
}

/* 閉じるボタン */
@media only screen and (min-width: 1024px) {
    .ec-drawerRoleClose.is_active {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    .ec-drawerRoleClose.is_active {
        display: block;
    }
}

.ec-drawerRoleClose {
    display: none;
    cursor: pointer;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    color: black;
    background: white;
    position: fixed;
    top: 10px;
    left: 270px;
    left: auto;
    right: 20px;
    z-index: 100001;
}

.ec-drawerRoleClose {
    color: var(--color-white);
    background: none;
    font-size: 25px;
}

.ec-drawerRoleClose.is_active {
    display: inline-block;
    transition: all 0.3s;
}

/* メニュー本体 */
@media only screen and (min-width: 1024px) {
    .ec-drawerRole.is_active {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    .ec-drawerRole.is_active {
        display: block;
    }
}

.ec-drawerRole {
    overflow-y: scroll;
    background: var(--color-mainColor);
    width: 260px;
    width: 100%;
    height: 100vh;
    transform: translateX(120%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    transition: z-index 0ms 1ms;
    color: var(--color-white);
    z-index: -1;
    opacity: 1;
}

.ec-drawerRole.is_active {
    display: block;
    transform: translateX(11%);
    transition: all 0.5s;
    z-index: 100000;
    opacity: 1;
    width: 90%;
}

/*-----
デフォルトCSSの競合対策コード
END
-----*/

/*************************************************************

左サイドバー　サーチ

*************************************************************/
#side-search {
    background: #eee;
    position: relative;
    padding: 15px 15px 50px;
}

#side-search section {
    margin-bottom: 20px;
}

#side-search h2 {
    color: var(--color-mainColor);
    text-align: left;
    margin: -25px 0 20px -15px;
    padding: 0;
    line-height: 1;
    font-size: 56px;
    font-weight: 500;
}

#side-search h3 {
    text-align: left;
    font-size: 30px;
    color: #86919b;
    margin-bottom: 15px;
}

#side-search h3 span {
    font-size: 12px;
    display: inline-block;
    color: var(--color-mainFonts);
    font-family: var(--fonts-gothic);
}

#side-search p.intro {
    margin-bottom: 20px;
}

#side-search #price-slider,
#side-search #case-size-slider {
    max-width: 100%;
    margin: 20px auto 0;
}

/* スライダー */
#searchform_side .noUi-horizontal{
    height: 14px;
}
#searchform_side .noUi-target {
    border: none;
    max-width: 100%;
}
#searchform_side .noUi-connects {
    background: var(--color-gray);
    border-radius: 50px;
}
#searchform_side .noUi-connect {
    background: var(--color-mainColor);
}
#searchform_side .noUi-handle:before,
#searchform_side .noUi-handle:after {
    display: none;
}
#searchform_side .noUi-horizontal .noUi-handle {
    width: 24px;
    height: 24px;
    top: -5px;
    border-radius: 50%;
    background: var(--color-mainColor);
    box-shadow: none;
    border: 2px solid #fff;
}
#searchform_side .noUi-handle.noUi-handle-upper{
    right: 0;
}
#searchform_side .noUi-handle.noUi-handle-lower{
    right: -15px ;
}

#side-search .submit-bt button {
    width: 100%;
    border: none;
    background: var(--color-mainColor);
    color: var(--color-white);
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
}

#side-search .submit-bt button span {
    padding-left: 25px;
    background: url(../img/common/ico-search-bt.svg) no-repeat left center;
    display: inline-block;
}

#side-search .brand__input,
#side-search .category_tag__input,
#side-search .watch_gender__input,
#side-search .year__input,
#side-search .store__input,
#side-search .status__input,
#side-search .word__input {
    font-size: 14px;
}


/*************************************************************

トップページ
PICK UP ピックアップ

*************************************************************/
#pickup {
    margin-bottom: 40px;
}
/*----------------------------
横幅100％の商品
----------------------------*/

#pickup .pickup-list .first {
    flex: 1 1 100%;
    position: relative;
    margin-bottom: 30px;
}

#pickup .pickup-list .first div.product-info {
    position: absolute;
    bottom: 50px;
    left: 40px;
    color: var(--color-white);
    width: calc(100% - 80px);
}
#pickup .pickup-list .first .first-img{
    aspect-ratio: 1000 / 520;
    display: flex;
    align-items: center;
    border-radius: 3px;
    object-fit: cover;
}
@media screen and (max-width:767px){
    #pickup .pickup-list .first{
        margin-bottom: 20px; 
    }
    #pickup .pickup-list .first .first-img{
        aspect-ratio: 1;
    }
}

@media screen and (max-width: 599px) {
    #pickup .pickup-list .first div.product-info {
        bottom: 20px;
        left: 10px;
        width: calc(100% - 20px);
    }
}

#pickup .pickup-list .first div.product-info ul {
    margin-bottom: 20px;
}

#pickup .pickup-list .first div.product-info li {
    margin-bottom: 5px;
}

#pickup .pickup-list .first div.product-info .brand {
    font-weight: 600;
    font-size: clamp(12px, 1.1vw, 16px);
}

#pickup .pickup-list .first div.product-info .name {
    font-weight: 600;
    font-size: clamp(16px, 1.4vw, 20px);
    max-width: 400px;
}

#pickup .pickup-list .first div.product-info .year {
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
}

#pickup .pickup-list .first div.product-info .price {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 600;
}

#pickup .pickup-list .first div.product-info .price > span {
    font-size: 12px;
    margin: 0;
}

#pickup .pickup-list .first div.product-info .more-bt {
    background: none;
    border: solid 1px var(--color-white);
    margin: 0;
    max-width: 232px;
}
@media screen and (max-width:767px){
    #pickup .pickup-list .first div.product-info .name{
        max-width: none;
    }
}

/*----------------------------
その他の商品
----------------------------*/
#pickup .pickup-list .list {
    overflow-x: auto;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    #pickup .pickup-list .list {
        overflow-x: auto;
        width: calc(100vw - 20px);
    }
}

#pickup .pickup-list .list > ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
        gap: 15px 0;
}

@media screen and (max-width: 1024px) {
    #pickup .pickup-list .list > ul {
        min-width: 768px;
        overflow-x: auto;
        margin-right: calc(50% - 50vw);
        padding-right: calc(50vw - 50%);
        width: 100%;
        flex-wrap: nowrap;
    }
}

#pickup .pickup-list .list > ul > li {
    flex: 0 1 calc(100% / 3 - 7.5px);
    position: relative;
    padding: 10px 10px 20px 10px;
    background: #eee;
    min-width: 30%;
}

#pickup .pickup-list .list > ul > li a {
    color: var(--color-mainFonts);
}

#pickup .pickup-list .list > ul > li a .year {
    color: var(--color-gray);
}

#pickup .pickup-list .list > ul > li .pic {
    text-align: center;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

#pickup .pickup-list .list > ul > li .brand {
    font-size: 12px;
    font-weight: 600;
}

#pickup .pickup-list .list > ul > li .name {
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 600;
    margin-bottom: 5px;
}

#pickup .pickup-list .list > ul > li .year {
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    margin-bottom: 5px;
}

#pickup .pickup-list .list > ul > li .price {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 600;
}

#pickup .pickup-list .list > ul > li .price span {
    font-size: 12px;
    margin: 0;
}

/*************************************************************

トップページ
HOT WORDS　人気のワード

*************************************************************/
#hot-words {
    margin-bottom: 40px;
}

#hot-words ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-bottom: -8px;
}

#hot-words ul > li {
    flex: 0 1 auto;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: clamp(12px, 1.2vw, 14px);
}

#hot-words ul > li a {
    display: block;
    color: var(--color-white);
    background: var(--color-subColor2);
    padding: 5px 10px;
    border-radius: 20px;
}

/*************************************************************

トップページ
NEW ITEM　新着商品

*************************************************************/
#new-item {
    background: linear-gradient(135deg, #252525 0%, #474747 100%);
    padding: 60px 0;
}

#new-item h2,
#new-item h2 span {
    color: var(--color-white);
}

#new-item ul.new-item-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#new-item ul.new-item-list::before,
#new-item ul.new-item-list::after {
    content: "";
    display: block;
    width: calc(100% / 4 - 6.5px);
}

@media screen and (max-width: 599px) {
    #new-item ul.new-item-list::before,
    #new-item ul.new-item-list::after {
        display: none;
    }
}

#new-item ul.new-item-list::before {
    order: 1;
}

#new-item ul.new-item-list > li:nth-child(-n + 3) {
    flex: 0 1 calc(100% / 3 - 6.5px);
    margin-bottom: 40px;
}

@media screen and (max-width: 599px) {
    #new-item ul.new-item-list{
        gap: 20px 8px;
    }
    #new-item ul.new-item-list > li:nth-child(-n + 3) {
        flex: 0 1 calc(100% / 2 - 4px);
        margin-bottom: 0;
    }
}

#new-item ul.new-item-list > li:nth-child(n + 4) {
    flex: 0 1 calc(100% / 4 - 6.5px);
}

@media screen and (max-width: 599px) {
    #new-item ul.new-item-list > li:nth-child(n + 4) {
        flex: 0 1 calc(100% / 2 - 4px);
    }
    #new-item ul.new-item-list > li:nth-child(7){
        display: none;
    }
}

#new-item ul.new-item-list a {
    color: var(--color-white);
}

#new-item ul.new-item-list a .year {
    color: var(--color-gray);
}

#new-item ul.new-item-list .pic {
    margin-bottom: 10px;
    border-radius: 2px;
    overflow: hidden;
}

#new-item .product-info > li:not(:last-child) {
    margin-bottom: 5px;
}

#new-item ul.new-item-list .brand {
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 600;
}

#new-item ul.new-item-list .name {
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
}

#new-item ul.new-item-list .year {
    font-size: clamp(12px, 1vw, 14px);
}

#new-item ul.new-item-list .price {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 600;
}

/*************************************************************

トップページ
MY FIRST WATCH はじめてのヴィンテージ時計

*************************************************************/
#my-first-watch {
    padding: 60px 0;
}

#my-first-watch ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#my-first-watch ul > li {
    flex: 0 1 calc(100% / 4 - 7px);
    position: relative;
}
#my-first-watch ul > li img{
    border-radius: 3px;
}

@media screen and (max-width: 767px) {
    #my-first-watch {
        padding: 40px 0;
    }
    #my-first-watch ul{
        gap: 8px;
    }
    #my-first-watch ul > li {
        flex: 0 1 calc(100% / 2 - 4px);
    }
}

#my-first-watch ul > li p {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-family: var(--fonts-mincho);
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 600;
    margin: 0;
    width: calc(100% - 40px);
}

@media screen and (max-width: 767px) {
    #my-first-watch ul > li p {
        left: 0px;
        bottom: 10px;
        padding: 0 10px;
        width: 100%;
    }
}

#my-first-watch ul > li p br {
}

@media screen and (max-width: 1024px) {
    #my-first-watch ul > li p br {
        display: none;
    }
}

#my-first-watch ul > li a {
    color: var(--color-white);
}

/*************************************************************

トップページ
PICKUP BRAND  ピックアップブランド

*************************************************************/
#pickup-brand {
    background: #ebebeb;
    padding: 60px 0;
}

#pickup-brand ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#pickup-brand ul > li {
    flex: 0 1 calc(100% / 4 - 7px);
    position: relative;
}

@media screen and (max-width: 767px) {
    #pickup-brand{
        padding-top: 40px;
    }
    #pickup-brand ul{
        gap: 8px;
    }
    #pickup-brand ul > li {
        flex: 0 1 calc(100% / 2 - 4px);
    }
}

#pickup-brand ul > li .pickup-brand-text {
    position: absolute;
    left: 4px;
    bottom: 0;
    font-family: var(--fonts-mincho);
    font-size: clamp(24px, 3.5vw, 40px);
    margin: 0;
    line-height: 1;
}

@media screen and (max-width: 767px) {
    #pickup-brand ul > li .pickup-brand-text {
        left: 0px;
        bottom: 5px;
        left: 5px;
    }
}


@media screen and (max-width: 1024px) {
    #pickup-brand ul > li .pickup-brand-text br {
        display: none;
    }
}

#pickup-brand ul > li a {
    color: var(--color-white);
}

/*************************************************************

トップページ
WATCH FINDER  最適な時計をレコメンド

*************************************************************/
#watch-finder {
    padding: 0 0 60px;
}

#watch-finder .main-area {
    background: var(--color-mainColor);
    padding: 10px;
}

#watch-finder .main-area > .inner {
    border: solid 1px var(--color-white);
    padding: 50px 20px;
}

#watch-finder .main-area p {
    font-family: var(--fonts-mincho);
    margin-bottom: 50px;
    font-size: clamp(18px, 1.7vw, 24px);
    color: var(--color-white);
    text-align: center;
}

#watch-finder .main-area .select-form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 855px;
    margin: 0 auto 20px;
}

#watch-finder .main-area .select-form > div {
    flex: 0 1 calc(100% / 2 - 15px);
    margin-bottom: 30px;
    position: relative;
}

#watch-finder .main-area .select-form > div select {
    width: 100%;
    appearance: none;
    background: #e8e8d2;
    border: none;
    padding: 10px 10px;
    border-radius: 5px;
    position: relative;
    color: var(--color-mainFonts);
}

#watch-finder .main-area .select-form > div::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 15px;
    height: 8px;
    background: var(--color-mainColor);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translate(0, -50%);
    z-index: 100;
}

#watch-finder .main-area .submit-bt {
    display: block;
    width: 100%;
    max-width: 375px;
    margin: auto;
    border: none;
    background: #fff;
    font-family: var(--fonts-mincho);
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

#watch-finder .main-area .submit-bt .icon {
    background: url(../img/top/ico-search-bt-watchFinder.svg) no-repeat left center;
    padding-left: 25px;
}

#watch-finder .main-area .submit-bt .icon > span {
    color: var(--color-mainColor);
}

@media screen and (max-width:767px){
    #watch-finder {
        padding: 0;
    }
    #watch-finder .inner{
        padding: 0;
    }
}

@media screen and (max-width: 599px) {
    #watch-finder .main-area .select-form > div {
        flex: 0 1 100%;
        margin-bottom: 15px;
    }
}


/*----------------------------
モーダルウィンドウ
----------------------------*/
#resultModal .modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-mainColor);
    padding: 20px;
    max-width: 1360px; /* 最大幅 */
    width: 90%; /* 幅は画面に応じて調整 */
    max-height: 95%; /* 高さが大きすぎる場合スクロール */
    overflow-y: auto;
    border-radius: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: var(--color-white);
    overflow: hidden;
}

#resultModal .modal-content::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid 1px var(--color-white);
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    z-index: 1;
}

#resultModal .modal-content > .inner {
    position: relative;
    z-index: 2;
    padding: 45px 0 30px;
    max-width: 1142px;
    margin: auto;
    overflow-y: auto;
}

@media screen and (max-width: 1024px) {
    #resultModal .modal-content > .inner {
        max-width: 100%;
    }
}

#resultModal .modal-content .close {
    position: absolute;
    z-index: 3;
    top: 20px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
}

#resultModal .modal-content a {
    color: var(--color-white);
}

#resultModal .modal-content h2 {
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 400;
}

#resultModal .modal-content ul.watchFinderContainer {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 767px) {
    #resultModal .modal-content ul.watchFinderContainer {
        gap: 10px;
        width: 100%;
    }
}

#resultModal .modal-content li.watchFinderItem {
    width: auto;
    flex: 0 1 calc(100% / 3 - 5px);
    padding: 0 0 50px;
    border: none;
    position: relative;
}

@media screen and (max-width: 767px) {
    #resultModal .modal-content li.watchFinderItem {
        flex: 0 0 215px;
        width: 215px;
        margin-bottom: 10px;
    }
}

#resultModal .modal-content li.watchFinderItem p.name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

#resultModal .modal-content li.watchFinderItem form {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

#resultModal .modal-content li.watchFinderItem form .ec-blockBtn--cancel {
    max-width: none;
    background: url(../img/common/ico-favorite.svg) no-repeat calc(100% - 10px) center;
    background-size: 26px;
    border: solid 1px var(--color-white);
}

#resultModal .ec-shelfGrid__item-image{
    margin-bottom: 10px;
}

#resultModal .price02-default{
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 600;
}

#resultModal .prod-name .bland {
    font-weight: 600;
    font-size: clamp(12px, 1vw, 14px);
    margin-bottom: 5px;
}

/*************************************************************

トップページ
分割金利手数料

*************************************************************/

.tesuryo-content {
    max-width: 670px;
    margin: 70px auto 120px;
    margin: 3vw auto;
    padding: 20px;
    border: solid 1px var(--color-subColor1);
    background: var(--color-white);
}

.tesuryo-content p {
    text-align: center;
    font-size: clamp(20px, 2vw, 27px);
    margin: 0 auto 20px;
    font-family: var(--fonts-mincho);
    line-height: 1.6em;
}

.tesuryo-content p span {
    color: var(--color-mainColor);
}

.tesuryo-content p span span {
    font-size: clamp(32px, 3vw, 40px);
}


/*************************************************************

トップページ
MY FIRST WATCH はじめてのヴィンテージ時計

*************************************************************/
#vintage-watch-look {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

#vintage-watch-look > .inner {
    position: relative;
    z-index: 2;
}

#vintage-watch-look .bg-text {
    position: absolute;
    left: 0;
    top: 5%;
    z-index: 1;
}

@media screen and (max-width: 1360px) {
    #vintage-watch-look .bg-text {
        display: none;
    }
}
@media screen and (max-width:767px){
    #vintage-watch-look{
        padding: 40px 0;
    }
}

#vintage-watch-look .bg-text img {
    max-width: none;
    max-height: 1250px;
}

/*----------------------------
gridエリア
----------------------------*/
#vintage-watch-look .image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr 1fr;
    grid-template-areas:
        "pic01 pic01 pic01 pic01"
        "pic02 pic03 pic04 pic05"
        "pic02 pic06 pic07 pic08";
}

@media screen and (max-width: 599px) {
    #vintage-watch-look .image-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
            "pic01 pic01"
            "pic02 pic07"
            "pic04 pic03"
            "pic05 pic06"
            "pic08 pic08";
    }
}

#vintage-watch-look .image-grid > div {
    align-self: stretch;
}

#vintage-watch-look .image-grid .pic01 {
    grid-area: pic01;
}

#vintage-watch-look .image-grid .pic02 {
    grid-area: pic02;
}

#vintage-watch-look .image-grid .pic03 {
    grid-area: pic03;
}

#vintage-watch-look .image-grid .pic04 {
    grid-area: pic04;
}

#vintage-watch-look .image-grid .pic05 {
    grid-area: pic05;
}

#vintage-watch-look .image-grid .pic06 {
    grid-area: pic06;
}

#vintage-watch-look .image-grid .pic07 {
    grid-area: pic07;
}

#vintage-watch-look .image-grid .pic08 {
    grid-area: pic08;
}

.image-grid img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 599px) {
    .image-grid img {
        height: 100%;
    }
}

/*************************************************************

共通エリア
WATCHMATE'S PICK ウォッチメイトレコメンド

*************************************************************/
#watchMates-pick {
    padding: 60px 0;
    background: #edede3;
}

/*----------------------------
リストの設定
----------------------------*/
#watchMates-pick .watchMates-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#watchMates-pick .watchMates-list > li {
    flex: 0 1 calc(100% / 3);
    margin-bottom: 50px;
}

@media screen and (max-width: 1024px) {
    #watchMates-pick .watchMates-list > li {
        flex: 0 1 calc(100% / 3 - 10px);
        margin-bottom: 50px;
    }
}

@media screen and (max-width:767px){
    #watchMates-pick{
        padding: 40px 0 0;
    }
}

@media screen and (max-width: 599px) {
    #watchMates-pick .watchMates-list > li {
        flex: 0 1 calc(100% / 2 - 4px);
        max-width: none;
    }
}

#watchMates-pick .watchMates-list > li a {
    color: var(--color-mainFonts);
    display: inline-block;
    position: relative;
}

/*----------------------------
写真
----------------------------*/
#watchMates-pick .watchMates-list .pic {
    margin-bottom: 10px;
    margin-right: 40px;
}

@media screen and (max-width: 1024px) {
    #watchMates-pick .watchMates-list .pic {
        margin-bottom: 0;
        margin-right: 0;
    }
}

#watchMates-pick .watchMates-list .pic img {
    border-radius: 2px;
}

@media screen and (max-width: 1024px) {
    #watchMates-pick .watchMates-list .pic img {
        border-radius: 2px 2px 0 0;
    }
}

/*----------------------------
私のおすすめ
----------------------------*/
#watchMates-pick .watchMates-list .recommend-info {
    background: rgba(0, 0, 0, 0.85);
    color: var(--color-white);
    text-align: center;
    max-width: 170px;
    padding: 10px;
    position: absolute;
    top: 50%;
    right: 0;
}

@media screen and (max-width: 1024px) {
    #watchMates-pick .watchMates-list .recommend-info {
        position: relative;
        max-width: none;
        padding-top: 15px;
        margin-bottom: 10px;
    }
}

#watchMates-pick .watchMates-list .recommend-info .osusume {
    font-size: 12px;
    color: var(--color-red);
    text-align: center;
    margin-bottom: 5px;
    font-weight: 600;
}

@media screen and (max-width: 1024px) {
    #watchMates-pick .watchMates-list .recommend-info .osusume {
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

#watchMates-pick .watchMates-list .recommend-info h3 {
    font-size: 12px;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: var(--fonts-main);
}

@media screen and (max-width: 1024px) {
    #watchMates-pick .watchMates-list .recommend-info h3 {
        margin-bottom: 5px;
    }
}

#watchMates-pick .watchMates-list .recommend-info p.detail {
    text-align: center;
    font-size: 10px;
    margin: 0 auto;
    max-width: 80%;
}

/*----------------------------
名前欄
----------------------------*/
#watchMates-pick .watchMates-list .mates-name p {
    margin-bottom: 5px;
    font-size: 14px;
}

#watchMates-pick .watchMates-list .mates-name h4 {
    font-family: var(--fonts-mincho);
    font-size: 24px;
    font-weight: 600;
}

@media screen and (max-width: 1024px) {
    #watchMates-pick .watchMates-list .mates-name h4 {
        font-size: clamp(18px, 2.5vw, 24px);
    }
}

#watchMates-pick .watchMates-list .mates-name h4 span {
    font-family: var(--fonts-mincho);
    font-size: 14px;
    font-weight: 400;
}

@media screen and (max-width: 1024px) {
    #watchMates-pick .watchMates-list .mates-name h4 span {
        display: block;
        font-size: clamp(10px, 1vw, 14px);
    }
}

/*----------------------------
アイテムをチェックボタン
----------------------------*/
#watchMates-pick .watchMates-list .more-link {
    position: relative;
    text-align: right;
    padding-right: 30px;
    font-size: 14px;
}

#watchMates-pick .watchMates-list a .more-link {
    color: var(--color-mainColor);
}

#watchMates-pick .watchMates-list .more-link .arrow {
    background: var(--color-mainColor);
    margin-top: 8.5px;
}

#watchMates-pick .watchMates-list .more-link .arrow::before {
    background: var(--color-mainColor);
}

/*************************************************************

共通エリア
MAGAZINE ファイアーキッズマガジン

*************************************************************/
#magazine {
    padding: 60px 0;
    background: #dedede;
    position: relative;
}

#magazine > .inner {
    max-width: 1524px;
}

@media screen and (max-width: 1524px) {
    #magazine > .inner {
        padding: 0 10px;
    }
}

/*----------------------------
マガジンリスト
----------------------------*/

@media screen and (max-width: 767px) {
    #magazine .scroll-wrapper {
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

#magazine .magazine-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: -5px;
    margin-bottom: 40px;
    padding-top: 160px;
}

@media screen and (max-width: 1024px) {
    #magazine .magazine-list {
        margin-right: 0;
        min-width: 767px;
        padding-top: 100px;
    }
}

#magazine .magazine-list > li:first-child {
    flex: 0 1 auto;
    position: relative;
    z-index: 1;
    margin-top: -160px;
    margin-right: -100px;
    max-width: 420px;
}

#magazine .magazine-list > li:first-child img{
    aspect-ratio: 508 / 660;
    object-fit: cover;
    object-position: right;
}

@media screen and (max-width: 1024px) {
    #magazine .magazine-list > li:first-child {
        flex: 0 1 calc(100% / 4 - 10px);
        margin-top: 0;
        margin-right: 0;
        max-width: none;
    }
    #magazine .magazine-list > li:first-child img{
        aspect-ratio: 362 / 500;
    }
}

#magazine .magazine-list > li:not(:first-child) {
    flex: 0 1 auto;
    position: relative;
    z-index: 2;
    max-width: 362px;
    margin-right: 5px;
}

@media screen and (max-width: 1024px) {
    #magazine .magazine-list > li:not(:first-child) {
        flex: 0 1 calc(100% / 4 - 10px);
        margin-top: 0;
        margin-right: 0;
        max-width: none;
    }
}

#magazine .magazine-list > li:not(:first-child) img{
    aspect-ratio: 362 / 500;
    object-fit: cover;
    object-position: right
}

#magazine .magazine-list > li a .text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    max-width: calc(100% - 40px);
    color: var(--color-white);
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 600;
}

#magazine .magazine-list > li:first-child a .text {
    max-width: calc(100% - 140px);
    font-size: clamp(24px, 2vw, 28px);
    font-weight: 600;
}

@media screen and (max-width: 1024px) {
    #magazine .magazine-list > li a .text,
    #magazine .magazine-list > li:first-child a .text {
        position: absolute;
        bottom: 20px;
        left: 20px;
        max-width: calc(100% - 40px);
        color: var(--color-white);
        font-size: clamp(14px, 2vw, 20px);
        font-weight: 600;
    }
}
#magazine .magazine-list > li a .text p {
    margin: 0;
}

/*----------------------------
背景
----------------------------*/
#magazine .bg {
    position: absolute;
    top: 20%;
    right: 20px;
}

@media screen and (max-width: 767px) {
    #magazine .bg {
        top: 25%;
    }
}

@media screen and (max-width: 599px) {
    #magazine .bg {
        position: absolute;
        left: 50%;
        width: 100%;
        transform: translate(-50%, 0);
        right: auto;
    }
}

/*************************************************************

共通エリア
バナーエリア

*************************************************************/
.bnr-area {
    padding: 60px 0;
}

.bnr-area .bnr {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}
.bnr-area .bnr:first-child{
    margin-bottom: 20px;
}

/*************************************************************

共通エリア
WHY FIRE KIDS FIRE KIDSで購入する理由

*************************************************************/
#why-fire-kids {
    padding: 60px 0;
    background: url(../img/top/whyFireKids-bg.jpg) no-repeat left top;
    background-size: cover;
    color: var(--color-white);
}

#why-fire-kids h2,
#why-fire-kids h2 span {
    color: var(--color-white);
}

#why-fire-kids ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#why-fire-kids ul > li {
    flex: 0 1 calc(100% / 3 - 6px);
    margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
    #why-fire-kids{
        padding: 40px 0;
    }
    #why-fire-kids ul{
        gap: 20px;
    }
    #why-fire-kids ul > li {
        flex: 0 1 100%;
        margin-bottom: 30px;
    }
    #why-fire-kids ul > li .pic{
        margin-bottom: 20px;
    }
}

#why-fire-kids ul > li .pic {
    position: relative;
    margin-bottom: 15px;
}
#why-fire-kids ul > li .pic .number {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: var(--fonts-mincho);
    font-size: clamp(30px, 9vw, 140px);
    color: var(--color-white);
    line-height: 1;
}

#why-fire-kids ul > li .text h3 {
    font-size: clamp(18px, 1.7vw, 24px);
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2.5em;
}

#why-fire-kids ul > li a {
    color: var(--color-white);
}

@media screen and (max-width:767px){
    #why-fire-kids ul > li .pic img{
    width: 100%;
}
}

/*************************************************************

共通エリア
INFORMATION インフォメーション

*************************************************************/
#information {
    padding: 60px 0;
}

#information li:not(.more-bt) a {
    color: var(--color-mainFonts);
}

#information ul {
    max-width: 974px;
    margin: auto;
    border-top: solid 1px var(--color-gray);
}

#information ul li:not(.more-bt) {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 35px;
    border-bottom: solid 1px var(--color-gray);
}

#information ul li .news-date {
    flex: 0 1 6em;
    color: var(--color-gray);
    font-weight: 600;
}

#information ul li .news-column {
    flex: 0 1 calc(100% - 6em - 20px);
}

#information ul li.more-bt {
    margin-top: 40px;
}

@media screen and (max-width:767px){
    #information{
        padding: 40px 0;
    }
}

@media screen and (max-width: 599px) {
    #information ul li:not(.more-bt) {
        padding: 15px 0;
    }
    #information ul li .news-date {
        flex: 0 1 100%;
    }
    #information ul li .news-column {
        flex: 0 1 100%;
    }
}

/*************************************************************

共通エリア
YouTube

*************************************************************/
#youtube {
    padding: 60px 0;
}

#youtube a{
    color: var(--color-mainFonts);
}

#youtube ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#youtube ul li {
    flex: 0 1 calc(100% / 3 - 6px);
    margin-bottom: 30px;
}
#youtube .youtube-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
}

#youtube .youtube-wrapper iframe {
    width: 100%;
    height: 100%;
}

#youtube .movie-title .title {
    font-weight: 600;
    font-size: clamp(12px, 1.1vw, 16px);
    margin: 0;
}

#youtube .movie-title .date {
    font-weight: 600;
    font-size: clamp(10px, 1vw, 14px);
    margin: 0;
    color: var(--color-gray);
}

@media screen and (max-width: 767px) {
    #youtube{
        padding: 40px 0 0;
    }
    #youtube ul li {
        flex: 0 1 calc(100% / 2 - 7px);
        margin-bottom: 30px;
    }
}

/*************************************************************

フッター

*************************************************************/
#footer {
    color: var(--color-white);
    margin-top: 70px;
}

#footer .footer-sec .inner {
    max-width: 1360px;
    margin: auto;
    padding: 0;
}

@media screen and (max-width: 1360px) {
    #footer .footer-sec .inner {
        padding: 0 10px;
    }
}

#footer h2 {
    color: var(--color-white);
}

#footer h2 span {
    font-size: 14px;
}

/*----------------------------
フッター上部（背景赤）
----------------------------*/
#footer .footer-top {
    background: var(--color-mainColor);
    padding: 50px 0;
}

/*-----
コンタクトエリア
-----*/
#footer .contact-area {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: solid 1px var(--color-white);
}

#footer .contact-area p {
    text-align: center;
    margin-bottom: 20px;
}

#footer .contact-area ul.contact-bt {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    max-width: 860px;
    margin: auto;
}

@media screen and (max-width: 1024px) {
    #footer .contact-area ul.contact-bt {
        max-width: 70%;
    }
}

@media screen and (max-width: 599px) {
    #footer .contact-area ul.contact-bt {
        max-width: 90%;
    }
}

#footer .contact-area ul.contact-bt > li {
    flex: 0 1 calc(100% / 3 - 10px);
}

@media screen and (max-width: 1024px) {
    #footer .contact-area ul.contact-bt > li {
        flex: 0 1 100%;
        margin-bottom: 20px;
    }
}

#footer .contact-area ul.contact-bt > li a {
    background: var(--color-white);
    border-radius: 5px;
    padding: 12px;
    text-align: center;
    color: var(--color-mainFonts);
    font-weight: 600;
    display: block;
}

#footer .contact-area ul.contact-bt > li.line a span {
    background: url(../img/common/ico-footer-bt-line.svg) no-repeat left center;
    display: inline-block;
    background-size: contain;
    padding: 0 0 0 30px;
}

#footer .contact-area ul.contact-bt > li.contact1 a span {
    background: url(../img/common/ico-footer-bt-contact1.svg) no-repeat left center;
    display: inline-block;
    background-size: contain;
    padding: 0 0 0 30px;
}

#footer .contact-area ul.contact-bt > li.contact2 a span {
    background: url(../img/common/ico-footer-bt-contact2.svg) no-repeat left center;
    display: inline-block;
    background-size: contain;
    padding: 0 0 0 30px;
}

/*-----
ショップリスト
-----*/
#footer .shop-list {
    max-width: 1040px;
    margin: auto;
}

#footer .shop-list > .inner > ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media screen and (max-width: 599px) {
    #footer .shop-list > .inner > ul {
        max-width: 90%;
        margin: auto;
    }
}

#footer .shop-list > .inner > ul li {
    flex: 0 1 calc(100% / 4 - 5px);
}

@media screen and (max-width: 1360px) {
    #footer .shop-list > .inner > ul li {
        flex: 0 1 calc(100% / 2 - 10px);
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 599px) {
    #footer .shop-list > .inner > ul li {
        flex: 0 1 100%;
    }
}

#footer .shop-list > .inner > ul li h3 {
    margin: 0 0 5px;
    font-size: clamp(20px, 1.7vw, 24px);
}

#footer .shop-list > .inner > ul li .shop-telNumber {
    border: solid 1px var(--color-white);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 10px;
    color: var(--color-white);
}

#footer .shop-list > .inner > ul li .shop-telNumber a {
    color: var(--color-white);
}

#footer .shop-list > .inner > ul li .shop-telNumber p {
    background: url(../img/common/ico-footer-tel.svg) no-repeat left center;
    padding-left: 35px;
    font-size: 17px;
    margin: 0;
    line-height: 1.2;
}

#footer .shop-list > .inner > ul li .shop-telNumber p span {
    font-size: 14px;
}

#footer .shop-list > .inner > ul li ul.shop-info {
    padding: 0 10px;
}

@media screen and (max-width: 599px) {
    #footer .shop-list > .inner > ul li ul.shop-info {
        text-align: center;
    }
}

#footer .shop-list > .inner > ul li ul.shop-info li {
    margin-bottom: 10px;
}

#footer .shop-list > .inner > ul li ul.shop-info .map a {
    background: url(../img/common/ico-footer-map.svg) no-repeat left center;
    padding-left: 15px;
    display: block;
    color: var(--color-white);
}

@media screen and (max-width: 599px) {
    #footer .shop-list > .inner > ul li ul.shop-info .map a {
        display: inline-block;
    }
}

/*----------------------------
フッター下部（背景紺）
----------------------------*/
#footer .footer-bottom {
    background: var(--color-subColor1);
    padding: 50px 0 50px;
}

@media screen and (max-width: 599px) {
    #footer .footer-bottom {
        padding: 50px 0;
    }
}

#footer .footer-bottom a {
    color: var(--color-white);
}

/*-----
SNSリスト
-----*/
#footer .footer-bottom ul.sns-link {
    display: flex;
    justify-content: space-between;
    max-width: 215px;
    margin: 0 auto 30px;
}

#footer .footer-bottom ul.sns-link > li {
    flex: 0 1 calc(100% / 5 - 6.5px);
}

/*-----
フッターリンク
-----*/
#footer .footer-bottom ul.footer-link {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

@media screen and (max-width: 599px) {
    #footer .footer-bottom ul.footer-link {
        justify-content: flex-start;
        margin-bottom: 35px;
    }
}

#footer .footer-bottom ul.footer-link > li {
    flex: 1 1 auto;
    max-width: 1220px;
    margin: 0 0 20px;
    position: relative;
    text-align: center;
}

@media screen and (max-width: 599px) {
    #footer .footer-bottom ul.footer-link > li {
        flex: 0 1 auto;
        text-align: left;
        margin-bottom: 15px;
        font-size: clamp(14px, 1vw, 16px);
    }
}

#footer .footer-bottom ul.footer-link > li::before {
    content: "";
    width: 1px;
    height: 100%;
    background: var(--color-white);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

#footer .footer-bottom ul.footer-link > li:last-child::before {
    display: none;
}

#footer .footer-bottom ul.footer-link > li a {
    padding: 0 12px;
}

/*-----
フッターロゴ付近
-----*/
#footer .footer-bottom .kouan {
    text-align: center;
    margin-bottom: 35px;
}

@media screen and (max-width: 599px) {
    #footer .footer-bottom .kouan {
        margin-bottom: 20px;
    }
}

#footer .footer-bottom #footer-logo {
    text-align: center;
    margin-bottom: 15px;
}

#footer .footer-bottom .copy {
    text-align: center;
    font-size: 12px;
}