@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Zen+Kaku+Gothic+New&display=swap');
:root {
    /* --color-black:     #353638; */
    --color-black:     #111111;
    --color-blueblack:     #2b3547;
    --color-gray:      #858686;
    --color-lightgray: #E3E3E3;
    --color-input:     #f5f5f5;
    --color-white:     #FFFFFF;
    --color-red:       #DE5D50;

    --border-style-base: solid 1px var(--color-lightgray);

    --arrow-style-base: polygon(85% 20%, 100% 20%, 50% 80%, 0 20%, 15% 20%, 50% 65%);
}
:root {
    --size-space-L:    40px;
    --size-space-M:     20px;
    --size-space-S:     16px;
    --size-space-SS:    8px;

    --size-wrap-L: 100%;
    --size-wrap-M: 90%;

    --size-font-base:   15px;
    --size-font-title:  1.5em;
    --size-font-S:      12px;

    --size-logo-width:  180px;
    --size-thum-width:  80px;
}
@media screen and (min-width: 1140px) {
:root {
    --size-space-L:    80px;
    --size-space-M:     40px;
    --size-space-S:     24px;
    --size-space-SS:    16px;

    --size-wrap-L: calc(1550px - var(--size-space-M));
    --size-wrap-M: calc(1110px - var(--size-space-M));

    --size-font-title:  30px;
}
}
:root {
    --font-all-base:    500 var(--size-font-base) / 1 "Zen Kaku Gothic New", sans-serif;
    --font-family-ja:  "Zen Kaku Gothic New", sans-serif;
    --font-family-en:   "Lexend", "Zen Kaku Gothic New", sans-serif;
}

/* ========= base ==================== */

body {
    font: var(--font-all-base);
    color: var(--color-black);
}
main, footer {width: 100%;}
header, .ttl-main, .ttl-page, .btn, .copyright {
    font-family: var(--font-family-en);
    letter-spacing: .05em;
    font-weight: 400;
}
header, footer {width: 100%;}
header {margin-bottom: var(--size-space-M);border: var(--border-style-base);}
footer {margin-top: var(--size-space-M);font-size: var(--size-font-S);}
#wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}
svg path {
    fill: currentColor;
}
small {
    font-size: .85em;
}
strong {
    display: inline-block;
    margin: 0 0.2em;
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1;
}
hr {
    width: 100%;
    height: 1px;
    border: none;
    background-color: var(--color-lightgray);
}
/* セレクトボックスカスタム */
.select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 16em;
    border: var(--border-style-base);
    color: var(--color-gray);
    font-size: var(--size-font-S);
    cursor: pointer;
}
.select-wrap::after {
    position: absolute;
    right: .5em;
    width: .5em;
    height: .5em;
    background-color: currentColor;
    clip-path: var(--arrow-style-base);
    content: '';
    pointer-events: none;
}
.select-wrap > select {
    padding: .5em;
    width: 100%;
    height: 100%;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: 0;
}
/* ラジオボタン、チェックボックスカスタム */
input[type="radio"],
input[type="radio"]:checked:before,
input[type="checkbox"],
input[type="checkbox"]:checked:before {
    border: solid 1px currentColor;
}
input[type="radio"], input[type="radio"]:checked:before {
    border-radius: 100%;
}
input[type="radio"],
input[type="checkbox"] {
    position: relative;
    margin-right: .5em;
    width: 1em;
    height: 1em;
}
input[type="radio"]:checked:before,
input[type="checkbox"]:checked:before {
    content: '';
    position: absolute;
    top:0;bottom:0;left:0;right:0;
    margin: auto;
    width: calc(100% / 1.5);
    height: calc(100% / 1.5);
    background-color: currentColor;
}
input[type="checkbox"]:checked:before {
    clip-path: var(--arrow-style-base);
}

/* レスポンシブ */
.pcOnly {display: none;}
.spOnly {display: block;}
@media screen and (min-width: 1140px) {
    .spOnly {display: none;}
    .pcOnly {display: block;}
}

/* ========= partsスタイル  ==================== */

.p-border_gr {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-lightgray)!important;
}
.p-border_bl {
    border-style: solid!important;
    border-width: 1px!important;
    color: var(--color-black)!important;
    border-color: var(--color-black)!important;
    background-color: var(--color-white)!important;
}
.p-backColor_gr {
    background-color: var(--color-lightgray);
}

.p-logo {
    width: var(--size-logo-width);
    height: auto;
}
.p-label {
    font-family: var(--font-family-en);
    font-weight: 300;
    line-height: 1;
    color: var(--color-gray);
}
.p-attention {
    font-size: var(--size-font-S);
    color: var(--color-red);
}
.p-link_box {
    width: 100%;
}
.p-link_box a {
    text-decoration: underline;
    vertical-align: baseline;
}
.p-link_box a + a {
    margin-left: .5em;
}

.p-scroll {
    position: relative;
    transform: rotate(-90deg);
    transition: all .5s ease;
}
.p-scroll:hover {
    margin-bottom: 1em;
}
.p-scroll::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1em;
    display: inline-block;
    width: 180px;
    height: .5em;
    border-bottom: 1px solid var(--color-white);
    border-right: 1px solid var(--color-white);
    transform: skew(-45deg) scale(-1, 1);
}

a[tabindex="-1"], .btn:disabled {
    opacity: .5!important;
}


/* ========= layout ==================== */

.l-wrap {
    width: 100%;
}
.l-wrap + .l-wrap {
    margin: var(--size-space-M) 0;
    padding: var(--size-space-M) 0;
    border-top: var(--border-style-base);
}
.l-inner_over {
    margin: 0 auto;
    padding: var(--size-space-M);
    max-width: var(--size-wrap-L);
}
.l-inner {
    margin: 0 auto;
    padding: var(--size-space-M);
    max-width: var(--size-wrap-M);
}
.l-contents {
    display: flex;
    flex-direction: column;
    gap: var(--size-space-SS);
}
.l-cont_head {
    margin-bottom: var(--size-space-M);
}
#checkedItems .l-cont_head {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media screen and (min-width: 1140px) {
    #checkedItems .l-cont_head {
        flex-direction: row;
        justify-content: space-between;
    }
}
.l-message {
    margin: var(--size-space-SS);
    text-align: center;
}
.l-tblist_wrap,
.l-tblist_wrap dl {
    display: flex;
    flex-direction: column;
}
.l-tblist_wrap {
    gap: var(--size-space-SS);
}
.l-tblist_wrap dl {
    gap: .5em;
}
.l-tblist_wrap dt {
    min-width: 10em;
    color: var(--color-gray);
}
.l-tblist_wrap dd {
    width: 100%;
}
@media screen and (min-width: 1140px) {
    .l-tblist_wrap dl{
        flex-direction: row;
    }
}

/* -------------
    icon
*/
.icon_remove {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 .5em;
    border: solid 1px;
    border-radius: 100%;
    vertical-align: middle;
}
.icon_remove::before, .icon_remove::after {
    content: "";
    position: absolute;
    top:0;bottom:0;left:0;right:0;
    margin: auto;
    width: 1px;
    height: .5em;
    background-color: var(--color-black);
}
.icon_remove::before {
    transform: rotate(45deg);
}
.icon_remove::after {
    transform: rotate(-45deg);
}
.field-wrap .icon-badge {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border-radius: 100%;
    background-color: var(--color-black);
    color: var(--color-white);
    line-height: 1.1;
    vertical-align: text-top;
    text-align: center;
    font-size: .85em;
}

/* ========= ヘッダー  ==================== */

/* -------------
    ロゴ
*/
header .p-logo {
    margin: 0 auto;
}
header .p-logo a {
    display: block;
    margin: 0 auto;
    width: var(--size-logo-width);
    min-height: 40px;
    background-image: url(/html/template/default/assets/img/common/logo_black.jpg);
    background-size: cover;
}
/* -------------
    アイコン
*/
header svg {
    width: 1em;
    height: 1em;
    margin-right: .5em;
    vertical-align: middle;
}

/* -------------
    ヘッダーナビ
*/
.glonav-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--size-space-M);
}
.glonav-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--size-space-M);
}
@media screen and (min-width: 1140px) {
    .glonav-group {
        flex-direction: row;
        width: calc(100% / 2.5);
        justify-content: center;
    }
    header .p-logo {
        margin: 0 auto;
        width: calc(100% / 8.5);
    }
}
.head-messages {
    padding: .5em;
    background-color: var(--color-input);
    color: var(--color-blueblack);
    font-size: var(--size-font-S);
    font-weight: 300;
    text-align: center;
}
.head-messages span {
    display: inline-block;
    padding: 0 .5em;
    margin: 0 .5em;
    background-color: var(--color-lightgray);
}

/* -------------
    ドロワーメニュー
*/
.drawer-wrap {
/* setting */
    position: fixed;
    top: 0;
    right: 0;
    max-width: 90%;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
/* move */
    transition: all .5s ease;
    visibility: hidden;
    transform: translateX(100vw);
/* design */
    font: 500 var(--size-font-S) / 1 var(--font-family-ja);
    background-color: var(--color-white);
    box-shadow: -8px 0px 8px -8px var(--color-black);
    color: var(--color-black);
}
@media screen and (min-width: 1140px){
    .drawer-wrap {
        max-width: calc(100% / 2.5)
    }
}
.drawer-wrap.is-active {
    visibility: visible;
    transform: translateX(0);
}
/* layout */
.drawer-wrap .l-contents {
    padding: var(--size-space-M);
}
.drawer-wrap .l-contents + .l-contents {
    border-top: var(--border-style-base);
}
/* 検索窓・カート */
@media screen and (min-width: 1140px) {
    #field > li {
        width: 45%;
    }
}
/* ドロワーメニューボタン */
.drawer-btn_wrap {
    display: flex;
    align-items: center;
    padding: var(--size-space-S);
}
.drawer-btn {
    position: relative;
    display: block;
    z-index: 51;
    width: 1.5em;
    height: 1.5em;
}
.drawer-btn > input {
    display: block;
    width: 100%;
    height: 100%;
}
.drawer-btn span,
.drawer-btn span:before,
.drawer-btn span:after {
    content: '';
    position: absolute;
    display: block;
    height: 1px;
    width: 100%;
    border-radius: 3px;
    background-color: currentColor;
}
.drawer-btn span {
    top:0;bottom:0;
    margin: auto;
}
.drawer-btn span:before {
    bottom: .5em;
}
.drawer-btn span:after {
    top: .5em;
}
.drawer-btn input {
    visibility: hidden;
}

/* -------------
    overlay（黒背景）
 */
.is-overlay_visible {
    overflow: hidden;
}
.drawer_overlay {
    content: '';
    position: fixed;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 50;
    background-color: var(--color-black);

    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
}
.is-overlay_visible .drawer_overlay {
    opacity: .5;
    visibility: visible;
}

/* -------------
    値表示欄
*/
.field-wrap {
    /* font-family: var(--font-family-ja); */
    display: flex;
    align-items: center;
    width: 100%;
    padding: .5em;
    background-color: var(--color-input);
}
.field-wrap > * {
    display: inline-block;
    vertical-align: text-bottom;
    color: var(--color-gray);
}
.field-wrap > a {
    position: relative;
}
.field-wrap > input,
.field-wrap > textarea,
.field-wrap .cart-price {
    height: 100%;
    width: 100%;
}
.field-wrap .icon-badge {
    position: absolute;
    top: .2em;
    left: 1em;
}
header .field-wrap > input {
    width: calc(100% - 3em);
    background: transparent;
}

/* -------------
    カテゴリー
 */
#category {
    width: 100%;
    padding: 0 var(--size-space-SS);
}
#category > li a {
    position: relative;
    padding-left: var(--size-space-SS);
}
#category > li a::after {
    content: '';
    display: inline-block;
    margin-left: 1em;
    width: .5em;
    height: .5em;
    clip-path: var(--arrow-style-base);
    transform: rotate(-90deg);
    background-color: currentColor;
    transition: all .3s ease;
}
#category > li > ul > li {
    padding: var(--size-space-SS);
}
#category > li > ul > li + li {
    border-top: var(--border-style-base);
}
@media screen and (min-width: 1140px) {
    #category > li > a {
        padding: 0;
        min-width: 10em;
    }
    #category > li > a::after {
        right: 0;
        transform: rotate(0deg);
    }
    #category > li:hover > a::after  {
        transform: rotate(-90deg);
    }
    #category > li > ul {
        position: absolute;
        border: var(--border-style-base);
        background-color: var(--color-white);
        visibility: hidden;
        opacity: 0;
        transition: all .5s ease;
        z-index: 50;
    }
    #category > li:hover > ul {
        visibility: visible;
        opacity: 1;
    }
}


/* ========= フッター  ==================== */

footer {
    background-color:  var(--color-black);
    color: var(--color-white);
}
footer a {
    color: var(--color-white);
}
footer nav {
    display: grid;
    gap: var(--size-space-M);
}
@media screen and (min-width: 1140px) {
    footer nav {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ========= メインビジュアル  ==================== */

.mv-wrap {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: var(--size-space-L);
    height: calc(100vh);

    background: url("/html/template/default/assets/img/top/mv.png");
    background-position: 85% 50%;
    background-size: cover;

    color: var(--color-white);
}
.mv-wrap .mv-inner {
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: var(--size-space-M);
    text-align: center;
}
.mv-wrap .mv-message {
    display: inline-block;
}
.mv-scroll {
    position: absolute;
    bottom: 0;
    right: -10%;
}
@media screen and (min-width: 1140px) {
    .mv-wrap .mv-inner {
        max-width: var(--size-wrap-L);
        text-align: left;
    }
    .mv-wrap .mv-message p {
        text-align: center;
    }
    .mv-scroll {
        bottom: -50%;
        right: 0;
    }
}
@media screen and (min-width: 1140px) and (max-height: 810px) {
    .mv-wrap {
        display: block;
        padding-top: 25%;
        height: 100%;
        min-height: calc(100vh);
    }
    .mv-scroll {
        bottom: 10%;
    }
}


/* ========= block  ==================== */

/* -------------
    title
*/
.ttl-main {
    margin-bottom: 1em;
    font-size: var(--size-font-title);
}
.ttl-page {
    text-align: center;
    font-size: var(--size-font-title);
    letter-spacing: .2em;
}
.ttl-contents {
    text-align: center;
    font-size: 1.2em;
    letter-spacing: .2em;
}

/* -------------
    button
*/
.btn-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    gap: var(--size-space-SS);
}
.btn {
    display: block;
    width: 100%;
    padding: .5em;
    text-align: center;
    background-color: var(--color-blueblack);
    color: var(--color-white);
    text-decoration: none!important;
}
@media screen and (min-width: 1140px) {
    .btn-wrap {
        flex-direction: row;
    }
    .btn {
        max-width: 16em;
    }
}

/* -------------
    accordion
 */
.accordion-wrap [data-toggle] {
    text-decoration: underline;
}
.accordion-box {
    margin: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease-out;
}
.accordion-box.is-active {
    margin-top: var(--size-space-SS);
    height: auto;
    opacity: 1;
}
#header .accordion-wrap [data-toggle] {
    text-decoration: none;
}
/* ヘッダー */
@media screen and (min-width: 1140px) {
    #header .accordion-box {
        position: absolute;
    }
}

/* -------------
    tab
*/
.tab-wrap {
    display: flex;
    flex-wrap: wrap;
}
.tab-wrap > * {
    width: 50%;
    border-bottom: var(--border-style-base);
    text-align: center;
}
.tab-wrap > .is-active {
    background-color: var(--color-lightgray);
}
.tab-wrap a {
    padding: .5em;
    width: 100%;
}
@media screen and (min-width: 1140px) {
    .tab-wrap {
        justify-content: center;
    }
    .tab-wrap > * {
        max-width: 10em;
    }
}

/* -------------
    カート
*/
.cart-layout, .cart-layout > * {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-space-S);
}
.cart-layout > * {
    flex-direction: column;
    width: 100%;
}
.cart-layout > *:last-of-type {
    padding: var(--size-space-M);
}
@media screen and (min-width: 1140px) {
    .cart-layout {
        align-items: flex-start;
    }
    .cart-layout > * {
        margin: 0 auto;
        width: 45%;
    }
    .cart-layout .btn {
        max-width: 10em;
    }
}
.cart-wrap {
    display: flex;
    align-items: center;
    gap: var(--size-space-SS);
}
.cart-img {
    max-width: var(--size-thum-width);
}
.cart-detail {
    width: 100%;
}
.cart-detail dt > a {
    text-decoration: underline;
}
.cart-detail dd {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.cart-price {
    line-height: 1;
    color: var(--color-gray);
    text-align: right;
}
#cart .cart-detail .cart-price {
    font-size: .85em;
}

/* -------------
    数量
*/
.number-wrap {
    display: flex;
    align-items: center;
    max-width: 160px;
    padding: .5em;
    border: var(--border-style-base);
    text-align: center;
}
.number-wrap > * {
    min-width: 1em;
}

/* -------------
    商品-TOP一覧
*/
.item-lineup_wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--size-space-M) 0;
}
.item-lineup_wrap.row_center{
    justify-content: center;
}
.item-lineup_detail {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--size-space-S);
    padding: var(--size-space-S);
    max-width: calc(100% / 2);
    text-align: center;
    font-size: var(--size-font-S);
}
.item-lineup_detail figure {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--size-space-SS);
    flex-grow: 1;
}
.item-lineup_btn {
    margin: 0 auto;
    min-width: 12em;
}
.item-lineup_wrap figure,
.item-lineup_btn {
    transition: all .5s ease;
}
@media screen and (min-width: 1140px) {
    .item-lineup_detail {
        max-width: calc(100% / 4);
    }
    #checkedItems .item-lineup_detail {
        max-width: calc(100% / 6);
    }
    .item-lineup_wrap figure:hover,
    .item-lineup_btn:hover {
        opacity: .5;
    }
}

/* -------------
    商品-一覧
*/
.item-List_head,
.item-List_head > * {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item-List_head {
    flex-direction: column;
    gap: var(--size-space-SS);
    margin-bottom: var(--size-space-M);
    padding: var(--size-space-SS);
}
.item-List_head > ul {
    margin: 0 auto;
    gap: var(--size-space-SS);
}
@media screen and (min-width: 1140px) {
    .item-List_head {
        align-items: center;
        flex-direction: row;
    }
    .item-List_head > ul {
        margin: 0 0 0 auto;
    }
}

/* -------------
    商品-詳細
*/
.item-detail_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--size-space-M);
}
.item-detail_photo .main_photo img,
.item-detail_photo,
.item-detail_area {
    width: 100%;
}
@media screen and (min-width: 1140px) {
    .item-detail_photo {
        width: 640px;
    }
    .item-detail_area {
        width: 380px;
    }
}
.item-detail_area,
.item-detail_area > *,
.item-detail_btn {
    display: flex;
    flex-direction: column;
}
.item-detail_area {
    gap: var(--size-space-S);
}
.item-detail_status,
.item-detail_btn {
    gap: var(--size-space-SS);
}
.item-detail_btn .btn {
    max-width: 100%;
}
/* カテゴリ */
.item-detail_category,
.item-detail_category ul {
    display: flex;
}
.item-detail_category ul li + li::before {
    content: '';
    display: inline-block;
    margin: 0 .5em;
    width: .5em;
    height: .5em;
    background-color: currentColor;
    clip-path: var(--arrow-style-base);
    vertical-align: middle;
    transform: rotate(-90deg);
}
.item-detail_category ul li > a {
    font-size: var(--size-font-S);
    text-decoration: underline;
}

/* 詳細 */
.item-detail_text {
    padding: var(--size-space-SS);
    border-top: var(--border-style-base);
    border-bottom: var(--border-style-base);
}
.item-detail_text dt {
    display: flex;
    align-items: center;
    gap: .5em;
    text-decoration: none!important;
}
.item-detail_text svg {
    width: 1em;
    height: 1em;
    color: var(--color-gray);
}
.item-detail_text dt::after {
    content: "+";
    display: block;
    margin: 0 0 0 auto;
    color: var(--color-gray);
}

/* -------------
    ページネーション
*/
.pagination-wrap {
    max-width: 90%;
    margin: 0 auto;
}
.pagination-wrap > ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination-wrap > ul > .pagenation__item {
    padding: var(--size-space-SS) var(--size-space-S);
    border-bottom: var(--border-style-base);
    font-size: var(--size-font-S);
}
.pagination-wrap > ul > .pagenation__item.is-active {
    border-color: var(--color-black);
}
.pagination-wrap > ul > .pagenation__item-first a,
.pagination-wrap > ul > .pagenation__item-previous a,
.pagination-wrap > ul > .pagenation__item-next a,
.pagination-wrap > ul > .pagenation__item-last a,
.pagination-wrap > ul > .pagenation__item-first::before,
.pagination-wrap > ul > .pagenation__item-last::before {
    display: block;
    width: 1em;
    height: 1em;
    clip-path: var(--arrow-style-base);
    background-color: currentColor;
}
.pagination-wrap > ul > .pagenation__item-first::before,
.pagination-wrap > ul > .pagenation__item-first a,
.pagination-wrap > ul > .pagenation__item-previous a {
    transform: rotate(90deg);
}
.pagination-wrap > ul > .pagenation__item-last::before,
.pagination-wrap > ul > .pagenation__item-next a,
.pagination-wrap > ul > .pagenation__item-last a {
    transform: rotate(-90deg);
}
.pagination-wrap > ul > .pagenation__item-first,
.pagination-wrap > ul > .pagenation__item-last {
    position: relative;
}
.pagination-wrap > ul > .pagenation__item-first::before,
.pagination-wrap > ul > .pagenation__item-last::before {
    content: '';
    position: absolute;
    left: .3em;
}


/* -------------
    スライダー
*/
.slick-loading .slick-list {
    background: var(--color-white) url('ajax-loader.gif') center center no-repeat;
}
.slick-dots {
    margin-top: var(--size-space-M);
    width: 100%;
    text-align: center;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: .5em;
}
.slick-dots li button:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .1;
    background-color: var(--color-black);
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}
.slick-dots li.slick-active button:before {
    opacity: .75;
}
.slick-dots li button.thumbnail img {
	width: 0;
    height: 0;
}
@media screen and (min-width: 1140px) {
    .slick-dots {
        text-align: left;
    }
    .slick-dots li {
        width: 80px;
        height: auto;
    }
    .slick-dots li button.thumbnail img {
        width: 100%;
        height: auto;
        opacity: .5;
    }
    .slick-dots li button.thumbnail:hover img,
    .slick-dots li.slick-active button.thumbnail img {
        opacity: 1;
    }
    .slick-dots li button.thumbnail::before {
        display: none;
    }
}

/* -------------
    フロー図
*/
.flow-wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.flowline.step3 .flow-wrap {
    max-width: 450px;
}
.flowline.step4 .flow-wrap {
    max-width: 550px;
}
.flow-wrap::before {
    content: "";
    display: block;
    position: absolute;
    top: 1em;
    margin: auto;
    height: 1px;
    width: 100%;
    background-color: var(--color-black);
    z-index: -1;
}
.flow-wrap li {
    width: calc(100% / 4);
}
.flow-wrap .flow_number {
    display: block;
    width: 2em;
    height: 2em;
    margin: 0 auto;
    border: solid 1px var(--color-black);
    border-radius: 100%;
    background-color: var(--color-white);
    line-height: 1.8;
}
.flow-wrap .is-active .flow_number {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* -------------
    FORM
*/
.form-wrap, dl.form-group,
dl.form-group dt, dl.form-group dd,
dl.form-group dd > *, dl.form-group dd .form-inline {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.form-wrap,
dl.form-group dd {
    flex-direction: column;
}
.form-wrap {
    gap: var(--size-space-M);
}
.cart-layout .form-wrap,
dl.form-group,
dl.form-group dd,
dl.form-group dd > * {
    gap: var(--size-space-SS);
}
dl.form-group dd .form-inline {
    gap: .5em;
    align-items: center;
}
dl.form-group dd .form-inline > label {
    max-width: 49.31%;
}
#customer_detail_box .form-inline label {
    text-align: center;
}
dl.form-group dt .p-required {
    margin: 0 0 0 auto;
    color: var(--color-red);
}
@media screen and (min-width: 1140px){
    .form-wrap {
        margin: 0 auto;
        /* width: 80%; */
    }
    dl.form-group {
        justify-content: space-between;
    }
    dl.form-group dt {
        width: 30%;
    }
    dl.form-group dd {
        width: 60%;
    }
}

/* -------------
    テキストページ用
*/
.article-wrap,
.article-inner,
.article-inner > *,
.article-inner dt  {
    display: flex;
}
.article-wrap,
.article-inner  > * {
    flex-direction: column;
}
.article-wrap {
    gap: var(--size-space-M);
}
.article-inner {
    flex-wrap: wrap;
    gap: var(--size-space-S);
}
.article-inner  > * {
    margin: 0 auto;
    gap: var(--size-space-SS);
}
.article-inner dt {
    align-items: center;
    gap: var(--size-space-SS);
    color: var(--color-gray);
}
@media screen and (min-width: 1140px) {
    .article-wrap > .article-inner:nth-of-type(even) {
        flex-direction: row-reverse;
    }
    .article-inner  > * {
        width: calc(100% / 2 - var(--size-space-S));
    }
}


/* ========= ▽ index.html ========== */

#page_homepage header {
    position: absolute;
    border: none;
}
#page_homepage header .p-logo a {
    background-image: url(/html/template/default/assets/img/common/logo_white.png);
}
#page_homepage header,
#page_homepage #searchform .field-wrap,
#page_homepage .field-wrap > * {
    color: var(--color-white);
}
#page_homepage .field-wrap {
    background-color: var(--color-black);
}
#page_homepage .icon-badge {
    background-color: var(--color-white);
    color: var(--color-black);
}
@media screen and (min-width: 1140px) {
    #page_homepage header #category > li > ul {
        background-color: var(--color-black);
    }
}

/* -------------
    動画
 */
.js-movie-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.js-movie-wrap [id^="player"] {
    position: absolute;
    top: 0;left: 0;right: 0;bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.js-movie-wrap [id^="player"]::before,
.js-movie-wrap [id^="player"]::after {
    content: '';
    position: absolute;
    top:0;bottom:0;left:0;right:0;
    margin: auto;
    display: block;
    max-height: 80px;
    max-width: 80px;
}
.js-movie-wrap [id^="player"]::before {
    width: 100%;
    height: 100%;
    border: solid .5em var(--color-white);
    border-radius: 100%;
}
.js-movie-wrap [id^="player"]::after {
    width: 24px;
    height: 32px;
    background-color: var(--color-white);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
@media screen and (min-width: 1140px) {
    .js-movie-wrap [id^="player"]::after {
        width: 32px;
        height: 40px;
    }
    .js-movie-wrap [id^="player"]::before,
    .js-movie-wrap [id^="player"]::after {
        max-height: 100px;
        max-width: 100px;
    }
}
/* 動画再生時 */
.js-movie-wrap.is-play::before {
    content:'';
    display: block;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* ※1)ココがアスペクト比（縦横比）*/
}
.js-movie-wrap.is-play img,
.js-movie-wrap.is-play [id^="player"]::before,
.js-movie-wrap.is-play [id^="player"]::after {
    opacity: 0;
    display: none;
    transition: all 0.5s 0s ease;
}


/* -------------
    店舗説明
 */
.about-wrap {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}
.about-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about-image {
    width: 100%;
}
.about-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: -10% auto 0;
    padding: var(--size-space-M);
    gap: var(--size-space-S);
    width: 90%;
    background-color: var(--color-black);
    color: var(--color-white);
}
.about-detail dd {
    font-size: var(--size-font-S);
}
@media screen and (min-width: 1140px) {
    .about-inner {
        flex-direction: row;
    }
    .about-image {
        min-width: 550px;
    }
    .about-detail {
        margin: 0 0 0 -10%;
        width: 60%;
    }
}
/* =========  △ index.html ========== */

.ec-layoutRole__header {
    margin-bottom: 0;
    border: none;
}