@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

body {
    background-color: #f7f7f7;
    overflow-x: hidden;
    font-size: calc(16 * (100vw / 520));
    line-height: 1.4;
    color: #394656;
    width: 100vw;
    position: relative;
    font-family: "Zen Kaku Gothic New", sans-serif;
    -webkit-font-feature-settings: "pkna";
    font-feature-settings: "pkna"
}

@media screen and (min-width: 520px) {
    body {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    body {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    body {
        overflow-x: hidden !important;
        font-size: 16px;
        font-size: 1rem
    }
}

a {
    cursor: pointer;
    text-decoration: none;
    transition: .4s;
    line-height: 1
}

a:hover {
    color: inherit
}

p {
    color: #394656
}

img {
    height: auto;
    vertical-align: bottom;
    max-width: 100%;
    width: auto
}

.pc-show {
    display: none
}

@media screen and (min-width: 980px) {
    .pc-show {
        display: block
    }
}

@media screen and (min-width: 980px) {
    .sp-show {
        display: none
    }
}

.pc-show-inline {
    display: none
}

@media screen and (min-width: 980px) {
    .pc-show-inline {
        display: inline-block
    }
}

.l-container {
    width: 100%;
    padding-right: 25px;
    padding-left: 25px;
    margin: 0 auto
}

@media screen and (min-width: 1150px) {
    .l-container {
        max-width: 1200px
    }
}

.l-main {
    position: relative
}

.l-sidemenu {
    display: flex;
    flex-direction: column
}

@media screen and (min-width: 980px) {
    .l-sidemenu {
        flex-direction: row
    }
}

.l-sidemenu_left {
    display: none
}

@media screen and (min-width: 980px) {
    .l-sidemenu_left {
        position: relative;
        display: block
    }
}

.l-sidemenu_right {
    padding: 5px 0 45px;
    width: 100%
}

@media screen and (min-width: 980px) {
    .l-sidemenu_right {
        padding: 75px 0;
        width: calc(100% - 300px)
    }
}

.l-sidemenu-nav {
    position: sticky;
    top: 0;
    padding: 10px 20px;
    width: auto
}

@media screen and (min-width: 980px) {
    .l-sidemenu-nav {
        padding: 20px;
        width: 300px
    }
}

.l-sidemenu-nav--wrap:not(:first-of-type) {
    margin: 15px 0 0
}

@media screen and (min-width: 980px) {
    .l-sidemenu-nav--wrap:not(:first-of-type) {
        margin: 25px 0 0
    }
}

.l-sidemenu-nav--wrap.assessment {
    display: none
}

@media screen and (min-width: 980px) {
    .l-sidemenu-nav--wrap.assessment {
        display: block
    }
}

.l-sidemenu-nav--wrap.purchase {
    margin: 0
}

.l-sidemenu-nav--wrap.purchase:not(:first-of-type) {
    margin: 0
}

@media screen and (min-width: 980px) {
    .l-sidemenu-nav--wrap.purchase:not(:first-of-type) {
        margin: 25px 0 0
    }
}

.l-sidemenu-nav--wrap dt {
    font-size: calc(16 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .l-sidemenu-nav--wrap dt {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .l-sidemenu-nav--wrap dt {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .l-sidemenu-nav--wrap dt {
        font-size: 16px;
        font-size: 1rem
    }
}

.l-sidemenu-nav_list {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: 5px 0 0
}

@media screen and (min-width: 980px) {
    .l-sidemenu-nav_list {
        flex-direction: column;
        margin: 15px 0 0
    }
}

.l-sidemenu-nav_list>li {
    width: calc(96% / 3)
}

@media screen and (min-width: 980px) {
    .l-sidemenu-nav_list>li {
        width: auto
    }
}

.l-sidemenu-nav_list>li:not(:first-of-type) {
    margin: 0 0 0 2%
}

@media screen and (min-width: 980px) {
    .l-sidemenu-nav_list>li:not(:first-of-type) {
        margin: 15px 0 0
    }
}

.l-sidemenu-nav_list>li a {
    background-color: #0abf7d;
    border-radius: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(15 * (100vw / 520));
    font-weight: 500;
    height: 50px;
    padding: 14px;
    text-align: center;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .l-sidemenu-nav_list>li a {
        font-size: calc(15 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .l-sidemenu-nav_list>li a {
        font-size: calc(15 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .l-sidemenu-nav_list>li a {
        font-size: 15px;
        font-size: .9375rem
    }
}

.l-sidemenu-nav_list>li a:hover {
    background-color: #35d99d
}

.l-sidemenu-nav_list>li a img {
    margin: 0 2px;
    max-width: 25px
}

.l-sidemenu-nav_list>li a.tel {
    background-color: #f17989;
    background-image: url(../images/common/icon-tel.webp);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: left 15px center
}

.l-sidemenu-nav_list>li a.tel:hover {
    background-color: #fab7c0
}

.l-sidemenu-nav_list>li a.mail {
    background-color: #81a6c9;
    background-image: url(../images/common/icon-mail.webp);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: left 15px center
}

.l-sidemenu-nav_list>li a.mail:hover {
    background-color: #99b9d7
}

.l-sidemenu-nav_list>li a.counter {
    background-color: #b7d5cd;
    color: #394656
}

@media screen and (min-width: 768px) {
    .l-sidemenu-nav_list>li a.counter {
        background-image: url(../images/common/icon-counter.webp);
        background-repeat: no-repeat;
        background-size: 30px;
        background-position: left 15px center
    }
}

.l-sidemenu-nav_list>li a.counter:hover {
    background-color: #cce9e2
}

.l-sidemenu-nav_list>li a.delivery {
    background-color: #f9dad6;
    color: #394656
}

@media screen and (min-width: 768px) {
    .l-sidemenu-nav_list>li a.delivery {
        background-image: url(../images/common/icon-delivery.webp);
        background-repeat: no-repeat;
        background-size: 30px;
        background-position: left 15px center
    }
}

.l-sidemenu-nav_list>li a.delivery:hover {
    background-color: #ffe6e3;
    color: #394656
}

.l-sidemenu-nav_list>li a.bulgeout {
    background-color: #83c5e8;
    color: #394656
}

@media screen and (min-width: 768px) {
    .l-sidemenu-nav_list>li a.bulgeout {
        background-image: url(../images/common/icon-bulgeout.webp);
        background-repeat: no-repeat;
        background-size: 30px;
        background-position: left 15px center
    }
}

.l-sidemenu-nav_list>li a.bulgeout:hover {
    background-color: #bde8ff
}

.c-basic-btn a {
    background-color: #81a6c9;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-size: calc(20 * (100vw / 520));
    margin: auto;
    max-width: 260px;
    padding: 16px 10px;
    position: relative;
    text-align: center;
    width: 96%
}

@media screen and (min-width: 520px) {
    .c-basic-btn a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-basic-btn a {
        font-size: calc(16 * (100vw / 980));
        max-width: 320px;
        padding: 23px 10px
    }
}

@media screen and (min-width: 980px) {
    .c-basic-btn a {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-basic-btn a:hover {
    background-color: #9bbddd
}

.c-basic-btn a::after {
    background-image: url(../images/common/icon-triangle01.svg);
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 16px;
    width: 16px;
    position: absolute;
    right: 5%;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(-90deg)
}

.c-drawer {
    background-color: #f7f7f7;
    height: 100vh;
    padding: 0;
    max-width: 0;
    width: 90vw;
    overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;
    right: -390px;
    transition: .4s;
    z-index: 501;
    scrollbar-color: #929292 #fff;
    scrollbar-width: thin
}

.c-drawer::-webkit-scrollbar {
    width: 8px;
    background-color: #fff
}

.c-drawer::-webkit-scrollbar-thumb {
    background: #929292;
    width: 6px;
    border-radius: 5px
}

.c-drawer-btn label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer
}

.c-drawer-btn .icon {
    background-color: #81a6c9;
    border-radius: 50px;
    cursor: pointer;
    height: 50px;
    width: 50px;
    position: relative;
    transition: .4s
}

.c-drawer-btn .icon::before,
.c-drawer-btn .icon::after {
    background-color: #fff;
    content: '';
    display: block;
    height: 2px;
    width: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.c-drawer-btn .icon::before {
    top: 14px;
    transition: .4s
}

.c-drawer-btn .icon::after {
    bottom: 14px;
    transition: .4s
}

.c-drawer-btn .icon:hover {
    background-color: #6889a9
}

.c-drawer-btn .icon .border {
    color: #fff;
    font-size: calc(11 * (100vw / 520));
    font-weight: 500;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    letter-spacing: -.1rem;
    margin: auto;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-drawer-btn .icon .border {
        font-size: calc(11 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-btn .icon .border {
        font-size: calc(11 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-btn .icon .border {
        font-size: 11px;
        font-size: .6875rem
    }
}

.c-drawer-highlighted {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 5px auto 0
}

.c-drawer-highlighted li {
    margin: 0 0 8px;
    width: 49%
}

.c-drawer-highlighted li:first-of-type {
    width: 100%
}

.c-drawer-highlighted li a {
    border-radius: 5px;
    color: #394656;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500
}

@media screen and (min-width: 520px) {
    .c-drawer-highlighted li a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-highlighted li a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-highlighted li a {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-drawer-highlighted li a::before {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    border-radius: 50px;
    content: '';
    display: block;
    height: 50px;
    width: 25px
}

.c-drawer-highlighted li a.results {
    background-color: #b29443;
    color: #fff
}

.c-drawer-highlighted li a.results:hover {
    background-color: #977c32
}

.c-drawer-highlighted li a.results::before {
    background-image: url(../images/common/icon-results.webp);
    background-size: 30px;
    height: 50px;
    width: 40px
}

.c-drawer-highlighted li a.shop {
    background-color: #b7d5cd
}

.c-drawer-highlighted li a.shop:hover {
    background-color: #8fbdb1
}

.c-drawer-highlighted li a.shop::before {
    background-image: url(../images/common/icon-shop.webp);
    background-size: 30px;
    height: 50px;
    width: 40px
}

.c-drawer-highlighted li a.mypage {
    background-color: #f9dad6
}

.c-drawer-highlighted li a.mypage:hover {
    background-color: #e7bdb8
}

.c-drawer-highlighted li a.mypage::before {
    background-image: url(../images/common/icon-mypage.webp)
}

.c-drawer-assessment {
    background-color: #f0f0f0;
    margin: 20px auto 0;
    padding: 15px 8px
}

.c-drawer-assessment_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(22 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-drawer-assessment_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-assessment_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-assessment_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-drawer-assessment_title::before,
.c-drawer-assessment_title::after {
    background-color: #FEF07F;
    content: '';
    display: block;
    height: 2px;
    width: 40px
}

.c-drawer-assessment_title::before {
    transform: rotate(60deg)
}

.c-drawer-assessment_title::after {
    transform: rotate(-60deg)
}

.c-drawer-assessment_title .reduce {
    display: block;
    font-size: 80%
}

.c-drawer-assessment_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 15px auto 0
}

.c-drawer-assessment_list>li {
    margin: 0 0 8px;
    width: 48%
}

.c-drawer-assessment_list>li:nth-of-type(2n+1) {
    margin: 0 2% 8px 0
}

.c-drawer-assessment_list>li a {
    border-radius: 5px;
    color: #394656;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500;
    padding: 10px;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-drawer-assessment_list>li a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-assessment_list>li a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-assessment_list>li a {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-drawer-assessment_list>li a img {
    margin: 0 6px 0 0;
    max-width: 25px
}

.c-drawer-assessment_list>li a.counter {
    background-color: #b7d5cd
}

.c-drawer-assessment_list>li a.counter:hover {
    background-color: #8fbdb1
}

.c-drawer-assessment_list>li a.line {
    background-color: #0abf7d;
    color: #fff;
    font-size: calc(16 * (100vw / 520));
    max-height: 45px;
    letter-spacing: -.05rem;
    padding: 15px 5px
}

@media screen and (min-width: 520px) {
    .c-drawer-assessment_list>li a.line {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-assessment_list>li a.line {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-assessment_list>li a.line {
        font-size: 14px;
        font-size: .875rem
    }
}

.c-drawer-assessment_list>li a.line:hover {
    background-color: #35d99d
}

.c-drawer-assessment_list>li a.line img {
    margin: 0 3px;
    max-width: 20px
}

.c-drawer-assessment_list>li a.delivery {
    background-color: #f9dad6
}

.c-drawer-assessment_list>li a.delivery:hover {
    background-color: #e7bdb8
}

.c-drawer-assessment_list>li a.bulgeout {
    background-color: #83c5e8
}

.c-drawer-assessment_list>li a.bulgeout:hover {
    background-color: #6889a9
}

.c-drawer-nav {
    margin: 37px auto 0;
    padding: 0 10px
}

.c-drawer-nav_title {
    font-size: calc(22 * (100vw / 520));
    font-weight: 700;
    margin: 0 0 15px;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-drawer-nav_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-nav_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-nav_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-drawer-nav_title .reduce {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80%
}

.c-drawer-nav_title .reduce::before,
.c-drawer-nav_title .reduce::after {
    background-color: #FEF07F;
    content: '';
    display: block;
    height: 2px;
    width: 20px;
    margin: 0 5px
}

.c-drawer-nav_title .reduce::before {
    transform: rotate(60deg)
}

.c-drawer-nav_title .reduce::after {
    transform: rotate(-60deg)
}

.c-drawer-nav_list {
    display: flex;
    flex-wrap: wrap
}

.c-drawer-nav_list>li {
    margin: 0 0 18px;
    width: 48%
}

.c-drawer-nav_list>li:first-of-type {
    width: 100%
}

.c-drawer-nav_list>li:nth-of-type(2n+3) {
    margin: 0 0 18px 4%
}

.c-drawer-nav_list>li a {
    color: #394656;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-drawer-nav_list>li a {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-nav_list>li a {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-nav_list>li a {
        font-size: 14px;
        font-size: .875rem
    }
}

.c-drawer-nav_list>li figure picture {
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s
}

.c-drawer-nav_list>li figure picture:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15)
}

.c-drawer-nav_list>li figure picture img {
    max-height: 75px
}

.c-drawer-nav_list>li figure figcaption {
    margin: 3px 0 0
}

.c-drawer-nav_sublist {
    display: flex;
    flex-wrap: wrap
}

.c-drawer-nav_sublist>li {
    margin: 0 0 18px;
    width: 48%
}

.c-drawer-nav_sublist>li:nth-of-type(2n+2) {
    margin: 0 0 18px 4%
}

.c-drawer-nav_sublist>li a {
    color: #394656;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-drawer-nav_sublist>li a {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-nav_sublist>li a {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-nav_sublist>li a {
        font-size: 14px;
        font-size: .875rem
    }
}

.c-drawer-nav_sublist>li figure picture {
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s
}

.c-drawer-nav_sublist>li figure picture:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15)
}

.c-drawer-nav_sublist>li figure picture img {
    max-height: 75px
}

.c-drawer-nav_sublist>li figure figcaption {
    margin: 3px 0 0
}

.c-drawer-about {
    background-color: #efece4;
    margin: 34px auto 0;
    padding: 15px 8px
}

.c-drawer-about_title {
    font-size: calc(22 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-drawer-about_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-about_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-about_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-drawer-about_title .reduce {
    display: block;
    font-size: 80%
}

.c-drawer-about_list {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0 0
}

.c-drawer-about_list>li {
    margin: 0 0 10px;
    width: 48%
}

.c-drawer-about_list>li:nth-of-type(2n+2) {
    margin: 0 0 10px 4%
}

.c-drawer-about_list>li a {
    background: #81a6c9;
    border: 3px solid #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500;
    min-height: 49px;
    padding: 5px;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-drawer-about_list>li a {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-drawer-about_list>li a {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-drawer-about_list>li a {
        font-size: 14px;
        font-size: .875rem
    }
}

.c-drawer-about_list>li a::after {
    background-image: url(../images/common/icon-arrow02.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    content: '';
    display: block;
    height: 8px;
    width: 18px;
    margin: 0 0 0 5px;
    transition: .4s
}

.c-drawer-about_list>li a:hover {
    background-color: #6889a9;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15)
}

.c-drawer-about_list>li a img {
    margin: 0 6px 0 0;
    max-width: 20px
}

.c-drawer-banner {
    margin: 25px 0 0
}

.c-drawer-banner_list {
    display: flex;
    flex-wrap: wrap
}

.c-drawer-banner_list>li {
    margin: 0 0 10px;
    width: 48%
}

.c-drawer-banner_list>li:nth-of-type(2n+2) {
    margin: 0 0 10px 4%
}

.c-drawer-banner_list>li a {
    transition: .4s
}

.c-drawer-banner_list>li a:hover {
    opacity: .7
}

.c-drawer-acc--container {
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    transition: .4s
}

.c-drawer-acc--more label {
    background: url(../images/common/icon-triangle01.svg) center no-repeat;
    background-size: 18px;
    background-color: #81A6C9;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
    margin: auto;
    transition: .4s
}

.c-drawer-acc--more label:hover {
    background-color: #6889a9
}

.c-drawer-acc--check:checked+.c-drawer-acc>.c-drawer-acc--container {
    max-height: 999vh;
    visibility: visible;
    opacity: 1
}

.c-drawer-acc--check:checked+.c-drawer-acc>.c-drawer-acc--more label {
    transform: rotate(-180deg)
}

#drawer:checked+.c-drawer {
    padding: 5px 10px 15px;
    max-width: 390px;
    right: 0
}

#drawer:checked+.c-drawer .c-drawer-btn .icon::before {
    top: -5px;
    transform: rotate(45deg)
}

#drawer:checked+.c-drawer .c-drawer-btn .icon::after {
    bottom: 5px;
    transform: rotate(-45deg)
}

#drawer:checked~.c-drawer-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 500
}

.c-breadcrumbs--wrap {
    max-width: 1450px;
    margin: auto;
    width: 96vw;
    overflow-x: scroll;
    padding: 5px 0;
    scrollbar-width: none
}

.c-breadcrumbs--wrap::-webkit-scrollbar {
    display: none
}

.c-breadcrumbs--list {
    display: flex;
    align-items: center;
    width: 200vw
}

@media screen and (min-width: 768px) {
    .c-breadcrumbs--list {
        width: auto
    }
}

.c-breadcrumbs--list>li a {
    display: flex;
    align-items: center;
    color: #394656;
    font-size: calc(14 * (100vw / 520));
    line-height: 1.2
}

@media screen and (min-width: 520px) {
    .c-breadcrumbs--list>li a {
        font-size: calc(12 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-breadcrumbs--list>li a {
        font-size: calc(12 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-breadcrumbs--list>li a {
        font-size: 12px;
        font-size: .75rem
    }
}

.c-breadcrumbs--list>li a:hover {
    text-decoration: underline
}

.c-breadcrumbs--list>li:not(:first-of-type) a::before {
    border-top: 1px solid #394656;
    border-right: 1px solid #394656;
    content: '';
    display: block;
    transform: rotate(45deg);
    height: 5px;
    width: 5px;
    margin: 0 5px
}

.c-followbtn {
    background: #efece4;
    background: linear-gradient(0deg, #efece4 80%, rgba(239, 236, 228, 0) 80%);
    position: fixed;
    bottom: 0;
    width: 100vw
}

.c-followbtn_list {
    display: flex;
    max-width: 768px;
    margin: auto
}

.c-followbtn_list>li {
    padding: 0 5px;
    width: calc(100% / 3)
}

.c-followbtn_list>li a {
    display: block;
    padding: 0 0 6px
}

.c-focusbrand {
    background-color: #f0f0f0;
    padding: 50px 0
}

@media screen and (min-width: 768px) {
    .c-focusbrand {
        padding: 80px 0
    }
}

.c-focusbrand-nav_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-focusbrand-nav_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-focusbrand-nav_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-focusbrand-nav_list {
    display: flex;
    flex-wrap: wrap;
    margin: 30px auto 0;
    max-width: 1200px;
    width: 96vw
}

.c-focusbrand-nav_list>li {
    margin: 0 0 10px;
    width: calc(98% / 3)
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_list>li {
        margin: 0 0 30px
    }
}

.c-focusbrand-nav_list>li:nth-of-type(3n+2),
.c-focusbrand-nav_list>li:nth-of-type(3n+3) {
    margin: 0 0 10px 1%
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_list>li:nth-of-type(3n+2),
    .c-focusbrand-nav_list>li:nth-of-type(3n+3) {
        margin: 0 0 30px 1%
    }
}

.c-focusbrand-nav_list>li a {
    color: #394656;
    font-size: calc(17 * (100vw / 520));
    font-weight: 500;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-focusbrand-nav_list>li a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_list>li a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-focusbrand-nav_list>li a {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-focusbrand-nav_list>li figure picture {
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    transition: .4s
}

.c-focusbrand-nav_list>li figure picture:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15)
}

.c-focusbrand-nav_list>li figure picture img {
    max-height: 90px
}

.c-focusbrand-nav_list>li figure figcaption {
    display: flex;
    align-items: center;
    margin: 5px 0 0
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_list>li figure figcaption {
        margin: 15px 0 0
    }
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_list>li figure figcaption::after {
        background-image: url(../images/common/icon-arrow01.webp);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        content: '';
        display: block;
        height: 25px;
        width: 25px;
        margin: 0 0 0 10px;
        transition: .4s
    }
}

.c-focusbrand-nav_list>li figure figcaption span {
    display: none
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_list>li figure figcaption span {
        display: inline-block
    }
}

.c-focusbrand-nav_sublist {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1200px;
    width: 96vw
}

.c-focusbrand-nav_sublist>li {
    margin: 0 0 10px;
    width: calc(98% / 3)
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_sublist>li {
        margin: 0 0 30px
    }
}

.c-focusbrand-nav_sublist>li:nth-of-type(3n+2),
.c-focusbrand-nav_sublist>li:nth-of-type(3n+3) {
    margin: 0 0 10px 1%
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_sublist>li:nth-of-type(3n+2),
    .c-focusbrand-nav_sublist>li:nth-of-type(3n+3) {
        margin: 0 0 30px 1%
    }
}

.c-focusbrand-nav_sublist>li a {
    color: #394656;
    font-size: calc(17 * (100vw / 520));
    font-weight: 500;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-focusbrand-nav_sublist>li a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_sublist>li a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-focusbrand-nav_sublist>li a {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-focusbrand-nav_sublist>li figure picture {
    background-color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    transition: .4s
}

.c-focusbrand-nav_sublist>li figure picture:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15)
}

.c-focusbrand-nav_sublist>li figure picture img {
    max-height: 90px
}

.c-focusbrand-nav_sublist>li figure figcaption {
    display: flex;
    align-items: center;
    margin: 5px 0 0
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_sublist>li figure figcaption {
        margin: 15px 0 0
    }
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_sublist>li figure figcaption::after {
        background-image: url(../images/common/icon-arrow01.webp);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        content: '';
        display: block;
        height: 25px;
        width: 25px;
        margin: 0 0 0 10px;
        transition: .4s
    }
}

.c-focusbrand-nav_sublist>li figure figcaption span {
    display: none
}

@media screen and (min-width: 768px) {
    .c-focusbrand-nav_sublist>li figure figcaption span {
        display: inline-block
    }
}

.c-focusbrand-acc--container {
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    transition: .4s
}

.c-focusbrand-acc--more label {
    background: url(../images/common/icon-triangle01.svg) center no-repeat;
    background-size: 18px;
    background-color: #81A6C9;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
    margin: auto;
    transition: .4s
}

.c-focusbrand-acc--more label:hover {
    background-color: #6889a9
}

.c-focusbrand-acc--check:checked+.c-focusbrand-acc>.c-focusbrand-acc--container {
    max-height: 999vh;
    visibility: visible;
    opacity: 1
}

.c-focusbrand-acc--check:checked+.c-focusbrand-acc>.c-focusbrand-acc--more label {
    transform: rotate(-180deg)
}

.c-interface {
    padding: 60px 0
}

@media screen and (min-width: 768px) {
    .c-interface {
        padding: 60px 0 80px
    }
}

.c-interface--wrap {
    margin: auto;
    max-width: 1200px;
    width: 96vw
}

.c-interface_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 15px;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-interface_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-interface_title {
        font-size: calc(20 * (100vw / 980));
        margin: 0 0 30px
    }
}

@media screen and (min-width: 980px) {
    .c-interface_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-interface_title::before,
.c-interface_title::after {
    background-color: #0abf7d;
    content: '';
    display: block;
    height: 66px;
    width: 2px
}

.c-interface_title::before {
    transform: rotate(-30deg)
}

.c-interface_title::after {
    transform: rotate(30deg)
}

.c-interface_title.method {
    margin: 45px 0 20px
}

@media screen and (min-width: 768px) {
    .c-interface_title.method {
        margin: 70px 0 30px
    }
}

.c-interface_title.method::before,
.c-interface_title.method::after {
    background-color: #ffee63
}

.c-interface_title .text {
    padding: 0 33px
}

.c-interface_btn {
    margin: auto;
    max-width: 390px;
    width: 90%
}

.c-interface_btn a {
    background-color: #0abf7d;
    border-radius: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(22 * (100vw / 520));
    font-weight: 500;
    padding: 12px;
    text-align: center;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-interface_btn a {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-interface_btn a {
        font-size: calc(20 * (100vw / 980));
        padding: 18px
    }
}

@media screen and (min-width: 980px) {
    .c-interface_btn a {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-interface_btn a:hover {
    background-color: #35d99d
}

.c-interface_btn a img {
    margin: 0 8px 0;
    max-width: 30px
}

@media screen and (min-width: 768px) {
    .c-interface_btn a img {
        max-width: 40px
    }
}

.c-interface_btn a.counter {
    background-color: #b7d5cd;
    color: #394656
}

.c-interface_btn a.counter:hover {
    background-color: #cce9e2
}

.c-interface_btn a.delivery {
    background-color: #f9dad6;
    color: #394656
}

.c-interface_btn a.delivery:hover {
    background-color: #ffe6e3;
    color: #394656
}

.c-interface_btn a.bulgeout {
    background-color: #83c5e8;
    color: #394656
}

.c-interface_btn a.bulgeout:hover {
    background-color: #bde8ff
}

.c-interface_btnlist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 390px;
    margin: auto;
    width: 90%
}

@media screen and (min-width: 768px) {
    .c-interface_btnlist {
        max-width: none
    }
}

.c-interface_btnlist>li {
    width: 49%
}

@media screen and (min-width: 768px) {
    .c-interface_btnlist>li {
        margin: 0 2% 0 0;
        width: calc(96% / 3)
    }
}

.c-interface_btnlist>li:first-of-type {
    margin: 0 0 10px;
    width: 100%
}

@media screen and (min-width: 768px) {
    .c-interface_btnlist>li:first-of-type {
        margin: 0 2% 0 0;
        width: calc(96% / 3)
    }
}

.c-interface_btnlist>li:last-of-type {
    margin: 0 0 0 2%
}

@media screen and (min-width: 768px) {
    .c-interface_btnlist>li:last-of-type {
        margin: 0
    }
}

.c-itemlist--wrap {
    margin: auto;
    max-width: 1200px;
    padding: 80px 0;
    width: 96%
}

.c-itemlist_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-itemlist_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-itemlist_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-itemlist_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-itemlist_list {
    display: grid;
    grid-template-areas: "bk1 bk1 bk2 bk2" "bk3 bk3 bk4 bk4" "bk5 bk5 bk6 bk6" "bk7 bk7 bk8 bk8" "bk9 bk9 bk10 bk10" "bk11 bk11 bk12 bk12" "bk13 bk13 bk14 bk14" "bk15 bk15 bk16 bk16" "bk17 bk17 bk18 bk18 ";
    grid-template-columns: repeat(4, 0.4fr);
    grid-template-rows: repeat(7, 0.4fr);
    row-gap: 5px;
    column-gap: 5px;
    margin: 35px 0 0
}

@media screen and (min-width: 768px) {
    .c-itemlist_list {
        grid-template-areas: "bk1 bk1 bk2 bk2" "bk1 bk1 bk2 bk2" "bk3 bk3 bk4 bk4" "bk5 bk5 bk6 bk6" "bk7 bk7 bk8 bk9" "bk10 bk11 bk12 bk13" "bk14 bk15 bk16 bk17";
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(7, 1fr);
        row-gap: 5px;
        column-gap: 5px
    }
}

@media screen and (min-width: 768px) {
    .c-itemlist_list {
        row-gap: 10px;
        column-gap: 10px
    }
}

@media screen and (min-width: 980px) {
    .c-itemlist_list {
        grid-template-areas: "bk1 bk1 bk1 bk1 bk1 bk2 bk2 bk2 bk2 bk2 bk3 bk3 bk3 bk3 bk3" "bk1 bk1 bk1 bk1 bk1 bk2 bk2 bk2 bk2 bk2 bk4 bk4 bk4 bk4 bk4" "bk5 bk5 bk5 bk5 bk5 bk6 bk6 bk6 bk6 bk6 bk7 bk7 bk7 bk7 bk7" "bk8 bk8 bk8 bk9 bk9 bk9 bk10 bk10 bk10 bk11 bk11 bk11 bk12 bk12 bk12" "bk13 bk13 bk13 bk14 bk14 bk14 bk15 bk15 bk15 bk16 bk16 bk16 bk17 bk17 bk17";
        grid-template-columns: repeat(15, 1fr);
        grid-template-rows: repeat(5, 1fr)
    }
}

@media screen and (min-width: 1400px) {
    .c-itemlist_list {
        row-gap: 20px;
        column-gap: 20px
    }
}

.c-itemlist_list>li:nth-of-type(1) {
    grid-area: bk1
}

.c-itemlist_list>li:nth-of-type(2) {
    grid-area: bk2
}

.c-itemlist_list>li:nth-of-type(3) {
    grid-area: bk3
}

.c-itemlist_list>li:nth-of-type(4) {
    grid-area: bk4
}

.c-itemlist_list>li:nth-of-type(5) {
    grid-area: bk5
}

.c-itemlist_list>li:nth-of-type(6) {
    grid-area: bk6
}

.c-itemlist_list>li:nth-of-type(7) {
    grid-area: bk7
}

.c-itemlist_list>li:nth-of-type(8) {
    grid-area: bk8
}

.c-itemlist_list>li:nth-of-type(9) {
    grid-area: bk9
}

.c-itemlist_list>li:nth-of-type(10) {
    grid-area: bk10
}

.c-itemlist_list>li:nth-of-type(11) {
    grid-area: bk11
}

.c-itemlist_list>li:nth-of-type(12) {
    grid-area: bk12
}

.c-itemlist_list>li:nth-of-type(13) {
    grid-area: bk13
}

.c-itemlist_list>li:nth-of-type(14) {
    grid-area: bk14
}

.c-itemlist_list>li:nth-of-type(15) {
    grid-area: bk15
}

.c-itemlist_list>li:nth-of-type(16) {
    grid-area: bk16
}

.c-itemlist_list>li:nth-of-type(17) {
    grid-area: bk17
}

.c-itemlist_list>li a {
    color: #394656
}

.c-itemlist_list>li figure {
    background-color: #fff;
    border-radius: 5px;
    display: block;
    height: 100%;
    padding: 10px;
    transition: .4s
}

@media screen and (min-width: 1400px) {
    .c-itemlist_list>li figure {
        padding: 20px
    }
}

.c-itemlist_list>li figure:hover {
    background-color: #fefefe;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
}

.c-itemlist_list>li figure:hover picture {
    background-color: #e3e3e3
}

.c-itemlist_list>li figure figcaption {
    display: flex;
    align-items: center;
    margin: 2px 0 0;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500
}

@media screen and (min-width: 520px) {
    .c-itemlist_list>li figure figcaption {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-itemlist_list>li figure figcaption {
        font-size: calc(16 * (100vw / 980));
        margin: 10px 0 0
    }
}

@media screen and (min-width: 980px) {
    .c-itemlist_list>li figure figcaption {
        font-size: calc(16 * (100vw / 1150));
        margin: 10px 0 0
    }
}

@media screen and (min-width: 1150px) {
    .c-itemlist_list>li figure figcaption {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-itemlist_list>li figure figcaption::after {
    background-image: url(../images/common/icon-arrow01.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    content: '';
    display: block;
    height: 15px;
    width: 15px;
    margin: 0 0 0 10px;
    transition: .4s
}

@media screen and (min-width: 980px) {
    .c-itemlist_list>li figure figcaption::after {
        height: 20px;
        width: 20px
    }
}

@media screen and (min-width: 1150px) {
    .c-itemlist_list>li figure figcaption::after {
        height: 25px;
        width: 25px
    }
}

.c-itemlist_list>li figure picture {
    background-color: #f7f7f7;
    border-radius: 5px;
    display: block;
    transition: .4s;
    text-align: center
}

.c-shoplist--wrap {
    margin: auto;
    max-width: 1200px;
    padding: 20px 0 40px;
    width: 96%
}

@media screen and (min-width: 768px) {
    .c-shoplist--wrap {
        padding: 30px 0 80px
    }
}

.c-shoplist_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-shoplist_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-shoplist_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-shoplist_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-shoplist--container {
    margin: 30px 0 0
}

@media screen and (min-width: 768px) {
    .c-shoplist--container {
        margin: 50px 0 0
    }
}

.c-shoplist--container.kanto .c-shoplist_list>li {
    width: 49%
}

.c-shoplist--container.kanto .c-shoplist_list>li:not(:first-of-type) {
    margin: 0 0 0 2%
}

.c-shoplist--container.kansai .c-shoplist_area::before {
    background-image: url(../images/common/icon-shoplist_pink.svg)
}

.c-shoplist--container.kansai .c-shoplist_area::after {
    background: radial-gradient(circle farthest-side, #ed99a4, #ed99a4 30%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0));
    background-size: 5px 6px
}

.c-shoplist--container.kansai .c-shoplist_list {
    padding: 7px
}

@media screen and (min-width: 768px) {
    .c-shoplist--container.kansai .c-shoplist_list {
        padding: 40px 40px 20px
    }
}

.c-shoplist--container.kansai .c-shoplist_list>li {
    margin: 0 0 10px;
    width: calc(98% / 2)
}

@media screen and (min-width: 768px) {
    .c-shoplist--container.kansai .c-shoplist_list>li {
        margin: 0 0 20px;
        width: calc(96% / 3)
    }
}

.c-shoplist--container.kansai .c-shoplist_list>li:not(:nth-of-type(2n+1)) {
    margin: 0 0 10px 2%
}

@media screen and (min-width: 768px) {
    .c-shoplist--container.kansai .c-shoplist_list>li:not(:nth-of-type(2n+1)) {
        margin: 0 0 20px
    }
}

@media screen and (min-width: 768px) {
    .c-shoplist--container.kansai .c-shoplist_list>li:not(:nth-of-type(3n+1)) {
        margin: 0 0 20px 2%
    }
}

.c-shoplist_area {
    display: flex;
    align-items: center;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500
}

@media screen and (min-width: 520px) {
    .c-shoplist_area {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-shoplist_area {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-shoplist_area {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-shoplist_area::before {
    background-image: url(../images/common/icon-shoplist_blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 20px;
    width: 12px;
    margin: 0 .6rem 0 0
}

.c-shoplist_area::after {
    background: radial-gradient(circle farthest-side, #9dd0eb, #9dd0eb 30%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0));
    background-size: 5px 6px;
    content: '';
    display: inline-block;
    flex-grow: 1;
    height: 5px;
    margin: 0 0 0 1rem
}

.c-shoplist_list {
    background-color: #e5e5e5;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0 0;
    padding: 7px
}

@media screen and (min-width: 768px) {
    .c-shoplist_list {
        padding: 40px
    }
}

.c-shoplist_list>li {
    background-color: #fff;
    border-radius: 5px;
    padding: 12px 7px;
    transition: .4s
}

@media screen and (min-width: 768px) {
    .c-shoplist_list>li {
        padding: 20px
    }
}

.c-shoplist_list>li:hover {
    background-color: #fefefe;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15)
}

.c-shoplist_list>li:hover picture {
    opacity: .8
}

.c-shoplist_list>li figure figcaption {
    color: #394656;
    display: flex;
    align-items: center;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500;
    margin: 7px 0 0
}

@media screen and (min-width: 520px) {
    .c-shoplist_list>li figure figcaption {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-shoplist_list>li figure figcaption {
        font-size: calc(16 * (100vw / 980));
        margin: 10px 0 0;
        padding: 0 10px
    }
}

@media screen and (min-width: 980px) {
    .c-shoplist_list>li figure figcaption {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-shoplist_list>li figure figcaption::after {
    background-image: url(../images/common/icon-arrow01.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    content: '';
    display: block;
    height: 15px;
    width: 15px;
    margin: 0 0 0 5px;
    transition: .4s
}

@media screen and (min-width: 768px) {
    .c-shoplist_list>li figure figcaption::after {
        height: 25px;
        width: 25px;
        margin: 0 0 0 10px
    }
}

.c-shoplist_list>li figure picture {
    display: block;
    transition: .4s
}

.c-shoplist_list>li figure picture img {
    border-radius: 5px
}

.c-faq {
    padding: 50px 0
}

@media screen and (min-width: 768px) {
    .c-faq {
        padding: 80px 0
    }
}

.c-faq--wrap {
    margin: auto;
    max-width: 1200px;
    width: 96vw
}

.c-faq_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-faq_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-faq_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-faq_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-faq--container {
    display: flex;
    margin: 40px 0 0
}

.c-faq_index {
    display: none
}

@media screen and (min-width: 980px) {
    .c-faq_index {
        display: block;
        width: 450px
    }
}

.c-faq_index>li label {
    background-image: linear-gradient(to right, #bfbfbf 0%, rgba(0, 0, 0, 0) 0%);
    background-size: 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: calc(16 * (100vw / 520));
    line-height: 1.4;
    margin: 0 0 25px;
    padding: 0;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-faq_index>li label {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-faq_index>li label {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-faq_index>li label {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-faq_index>li label:hover {
    background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
    font-weight: 700;
    padding: 0 0 20px
}

.c-faq_index>li label::before {
    content: 'Q.';
    margin: 0 .6rem 0 0
}

.c-faq_index>li label::after {
    background-image: url(../images/common/icon-arrow01.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    content: '';
    display: block;
    height: 25px;
    width: 25px;
    margin: 0 0 0 10px;
    transition: .4s
}

.c-faq_detail {
    background-color: #fff;
    border-radius: 5px;
    height: 60vh;
    overflow-y: scroll;
    padding: 25px;
    width: 100%
}

@media screen and (min-width: 980px) {
    .c-faq_detail {
        background-color: inherit;
        height: auto;
        margin: 0 0 0 4%;
        overflow-y: inherit;
        padding: 0;
        width: calc(96% - 450px)
    }
}

.c-faq_detail--wrap {
    margin: 0 0 60px
}

@media screen and (min-width: 980px) {
    .c-faq_detail--wrap {
        margin: 0;
        max-height: 0;
        visibility: hidden;
        opacity: 0
    }
}

.c-faq_detail--wrap .question {
    background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
    display: flex;
    color: #83c5e8;
    font-weight: bold;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 25px;
    padding: 0 0 25px
}

@media screen and (min-width: 520px) {
    .c-faq_detail--wrap .question {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-faq_detail--wrap .question {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-faq_detail--wrap .question {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-faq_detail--wrap .question::before {
    background-image: url(../images/common/icon-shoplist_blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top 0 left;
    content: 'Q.';
    display: block;
    height: 20px;
    line-height: 1.2;
    margin: 0 .6rem 0 0;
    width: 12px;
    padding: 0 0 3px 16px
}

.c-faq_detail--wrap .answer {
    font-size: calc(18 * (100vw / 520));
    line-height: 2;
    margin: 0 0 10px
}

@media screen and (min-width: 520px) {
    .c-faq_detail--wrap .answer {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-faq_detail--wrap .answer {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-faq_detail--wrap .answer {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-faq_detail--wrap .answer::before {
    background-image: url(../images/common/icon-shoplist_pink.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top 0 left;
    color: #f17989;
    content: 'A.';
    display: block;
    height: 20px;
    line-height: 1.2;
    margin: 0 .6rem 10px 0;
    width: 12px;
    padding: 0 0 3px 16px
}

.c-faq_detail--check:checked+.c-faq_detail--wrap {
    max-height: 999vh;
    opacity: 1;
    visibility: visible
}

.c-voice {
    padding: 50px 0
}

@media screen and (min-width: 768px) {
    .c-voice {
        padding: 80px 0
    }
}

.c-voice--wrap {
    margin: auto;
    max-width: 1200px;
    width: 96vw
}

.c-voice_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-voice_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-voice_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-voice_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-voice--container {
    display: flex;
    margin: 40px 0 0
}

.c-voice_index {
    display: none
}

@media screen and (min-width: 980px) {
    .c-voice_index {
        display: block;
        width: 450px
    }
}

.c-voice_index>li label {
    background-image: linear-gradient(to right, #bfbfbf 0%, rgba(0, 0, 0, 0) 0%);
    background-size: 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: calc(16 * (100vw / 520));
    line-height: 1.4;
    margin: 0 0 25px;
    padding: 0;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-voice_index>li label {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-voice_index>li label {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-voice_index>li label {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-voice_index>li label:hover {
    background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
    font-weight: 700;
    padding: 0 0 20px
}

.c-voice_index>li label::after {
    background-image: url(../images/common/icon-arrow01.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    content: '';
    display: block;
    height: 25px;
    width: 25px;
    margin: 0 0 0 10px;
    transition: .4s
}

.c-voice_detail {
    background-color: #fff;
    border-radius: 5px;
    height: 60vh;
    overflow-y: scroll;
    padding: 25px;
    width: 100%
}

@media screen and (min-width: 980px) {
    .c-voice_detail {
        background-color: inherit;
        height: auto;
        margin: 0 0 0 4%;
        overflow-y: inherit;
        padding: 0;
        width: calc(96% - 450px)
    }
}

.c-voice_detail--wrap {
    margin: 0 0 60px
}

@media screen and (min-width: 980px) {
    .c-voice_detail--wrap {
        margin: 0;
        max-height: 0;
        visibility: hidden;
        opacity: 0
    }
}

.c-voice_detail--wrap .title {
    display: flex;
    color: #83c5e8;
    font-weight: bold;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 10px
}

@media screen and (min-width: 520px) {
    .c-voice_detail--wrap .title {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-voice_detail--wrap .title {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-voice_detail--wrap .title {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-voice_detail--wrap .title::before {
    background-image: url(../images/common/icon-shoplist_blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top 0 left;
    content: '';
    display: block;
    height: 20px;
    line-height: 1.2;
    margin: 0 .2rem 0 0;
    width: 12px;
    padding: 0 0 3px
}

.c-voice_detail--wrap .customer {
    background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
    font-size: calc(18 * (100vw / 520));
    line-height: 2;
    margin: 0 0 25px;
    padding: 0 0 25px
}

@media screen and (min-width: 520px) {
    .c-voice_detail--wrap .customer {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-voice_detail--wrap .customer {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-voice_detail--wrap .customer {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-voice_detail--wrap .staff {
    font-size: calc(16 * (100vw / 520));
    line-height: 2
}

@media screen and (min-width: 520px) {
    .c-voice_detail--wrap .staff {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-voice_detail--wrap .staff {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-voice_detail--wrap .staff {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-voice_detail--check:checked+.c-voice_detail--wrap {
    max-height: 999vh;
    opacity: 1;
    visibility: visible
}

.c-faq+.c-voice {
    padding: 10px 0 40px
}

@media screen and (min-width: 768px) {
    .c-faq+.c-voice {
        padding: 10px 0 80px
    }
}

.c-author {
    padding: 40px 0
}

@media screen and (min-width: 768px) {
    .c-author {
        padding: 80px 0
    }
}

.c-author--wrap {
    background-color: #fff;
    border-radius: 5px;
    margin: auto;
    max-width: 1000px;
    padding: 20px;
    width: 96vw
}

.c-author--container {
    background-color: #efece4;
    border-radius: 5px;
    padding: 20px
}

@media screen and (min-width: 768px) {
    .c-author--container {
        padding: 60px
    }
}

.c-author_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-author_title {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-author_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-author_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-author_intro {
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
    margin: 25px 0 0 0
}

@media screen and (min-width: 768px) {
    .c-author_intro {
        flex-direction: row;
        margin: 45px 0 0 0
    }
}

.c-author_intro .textarea {
    background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px), linear-gradient(to left, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
    background-size: 10px 2px, 10px 2px;
    background-repeat: repeat-x, repeat-x;
    background-position: left top, right bottom;
    font-size: calc(18 * (100vw / 520));
    line-height: 2;
    max-width: 500px;
    padding: 15px 0
}

@media screen and (min-width: 520px) {
    .c-author_intro .textarea {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-author_intro .textarea {
        font-size: calc(16 * (100vw / 980));
        padding: 30px 0
    }
}

@media screen and (min-width: 980px) {
    .c-author_intro .textarea {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-author_intro figure {
    margin: 0 0 15px;
    text-align: center
}

@media screen and (min-width: 768px) {
    .c-author_intro figure {
        margin: 0 0 0 35px
    }
}

.c-author_intro figure img {
    max-height: 170px
}

.c-author_personal {
    margin: 10px 0 0 0
}

.c-author_personal--wrap {
    display: flex;
    align-items: center
}

.c-author_personal--wrap:not(:first-of-type) {
    margin: 10px 0 0
}

.c-author_personal--wrap dt {
    border: 1px solid #394656;
    border-radius: 5px;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500;
    text-align: center;
    width: 130px
}

@media screen and (min-width: 520px) {
    .c-author_personal--wrap dt {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-author_personal--wrap dt {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-author_personal--wrap dt {
        font-size: 12px;
        font-size: .75rem
    }
}

.c-author_personal--wrap dd {
    font-size: calc(18 * (100vw / 520));
    margin: 0 0 0 10px
}

@media screen and (min-width: 520px) {
    .c-author_personal--wrap dd {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-author_personal--wrap dd {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-author_personal--wrap dd {
        font-size: 16px;
        font-size: 1rem
    }
}

.c-contact {
    padding: 40px 0
}

@media screen and (min-width: 768px) {
    .c-contact {
        padding: 80px 0
    }
}

.c-contact--wrap {
    background-color: #fff;
    border-radius: 5px;
    margin: auto;
    max-width: 1000px;
    padding: 20px;
    width: 96vw
}

.c-contact--container {
    background-color: #f2e5e6;
    border-radius: 5px;
    padding: 20px
}

@media screen and (min-width: 768px) {
    .c-contact--container {
        padding: 50px
    }
}

.c-contact--text {
    font-size: calc(19 * (100vw / 520));
    font-weight: 700;
    line-height: 1.4;
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-contact--text {
        font-size: calc(19 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-contact--text {
        font-size: calc(20 * (100vw / 980));
        line-height: 1.6
    }
}

@media screen and (min-width: 980px) {
    .c-contact--text {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.c-contact_link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 15px auto 0;
    max-width: 570px
}

@media screen and (min-width: 768px) {
    .c-contact_link {
        flex-direction: row;
        margin: 30px auto 0
    }
}

.c-contact_link>li {
    width: 100%
}

@media screen and (min-width: 768px) {
    .c-contact_link>li {
        width: 48%
    }
}

@media screen and (min-width: 768px) {
    .c-contact_link>li:not(:first-of-type) {
        margin: 0 0 0 4%
    }
}

.c-contact_link>li a.line {
    background-color: #0abf7d;
    border-radius: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500;
    height: 50px;
    margin: 15px 0 0;
    padding: 14px;
    text-align: center;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .c-contact_link>li a.line {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-contact_link>li a.line {
        font-size: calc(15 * (100vw / 980));
        margin: 0
    }
}

@media screen and (min-width: 980px) {
    .c-contact_link>li a.line {
        font-size: 15px;
        font-size: .9375rem
    }
}

.c-contact_link>li a.line:hover {
    background-color: #35d99d
}

.c-contact_link>li a.line img {
    margin: 0 2px;
    max-width: 25px
}

.c-contact_link>li a.tel {
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (min-width: 768px) {
    .c-contact_link>li a.tel {
        justify-content: flex-start
    }
}

.c-contact_link>li a.tel img {
    max-width: 63px
}

.c-contact_link>li a.tel .tel-info {
    font-size: calc(34 * (100vw / 520));
    text-align: center
}

@media screen and (min-width: 520px) {
    .c-contact_link>li a.tel .tel-info {
        font-size: calc(34 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .c-contact_link>li a.tel .tel-info {
        font-size: calc(28 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .c-contact_link>li a.tel .tel-info {
        font-size: 28px;
        font-size: 1.75rem
    }
}

.c-contact_link>li a.tel .tel-info .num {
    display: block;
    font-family: "Lato", serif;
    font-weight: 700
}

.c-contact_link>li a.tel .tel-info .reduce {
    display: block;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 50%;
    font-weight: 500;
    margin: 5px 0 0
}

#chatplusview,
chat {
    position: relative;
    z-index: 1
}

.c-caption-type01 {
    padding: 30px 0
}

@media screen and (min-width: 768px) {
    .c-caption-type01 {
        padding: 60px 0 80px
    }
}

.c-caption-type01--wrap {
    position: relative;
    margin: 0 auto;
    max-width: 1150px;
    text-align: center;
    width: 96%
}

.c-caption-type01--wrap picture img {
    display: inline-block;
    width: 100%;
    max-width: 100%
}

.p-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    padding: 18px 0 10px;
    width: 92vw
}

@media screen and (min-width: 768px) {
    .p-header {
        display: block;
        margin: 0;
        padding: 50px 0 20px;
        width: auto
    }
}

.p-header--wrap {
    display: flex;
    justify-content: space-between
}

@media screen and (min-width: 768px) {
    .p-header--wrap {
        max-width: 1450px;
        margin: auto;
        width: 96vw
    }
}

@media screen and (min-width: 768px) {
    .p-header--wrap.secondary {
        margin: 25px auto 0
    }
}

.p-header--wrap.tertiary {
    display: block
}

@media screen and (min-width: 768px) {
    .p-header--wrap.tertiary {
        display: none
    }
}

.p-header-logo {
    display: flex;
    align-items: center;
    flex-grow: 1;
    max-width: 210px
}

.p-header-logo picture {
    display: block;
    width: 100%
}

.p-header-logo picture img {
    min-width: calc(160 * (100vw / 520))
}

@media screen and (min-width: 520px) {
    .p-header-logo picture img {
        min-width: 160px
    }
}

.p-header-search {
    display: none;
    flex-grow: 1;
    margin: auto;
    width: 92vw
}

@media screen and (min-width: 768px) {
    .p-header-search {
        display: block;
        max-width: 610px;
        margin: 0 0 0 15px;
        width: auto
    }
}

.p-header-search .search_form {
    display: flex
}

.p-header-search .search_input {
    background-color: #fff;
    border: none;
    border-radius: 50px 0 0 50px;
    color: #9c9c9c;
    font-weight: 200;
    outline: none;
    font-size: calc(16 * (100vw / 520));
    padding: 12px 25px;
    transition: .4s;
    width: calc(100% - 60px)
}

@media screen and (min-width: 520px) {
    .p-header-search .search_input {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-search .search_input {
        font-size: calc(16 * (100vw / 980));
        padding: 16px 25px
    }
}

@media screen and (min-width: 980px) {
    .p-header-search .search_input {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-header-search .search_input:hover {
    background-color: #eee
}

.p-header-search .search_submit {
    background-color: #81a6c9;
    background-image: url("../images/common/icon-search_white.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    border: none;
    border-radius: 0 50px 50px 0;
    font-size: calc(16 * (100vw / 520));
    transition: .4s;
    width: 60px
}

@media screen and (min-width: 520px) {
    .p-header-search .search_submit {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-search .search_submit {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-header-search .search_submit {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-header-search .search_submit:hover {
    background-color: #6889a9;
    cursor: pointer
}

.p-header-search_resultsbtn a {
    background: #b29443;
    border-radius: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: calc(17 * (100vw / 520));
    font-weight: 500;
    text-align: center;
    max-width: 450px;
    padding: 8px 15px;
    position: relative;
    width: 100%
}

@media screen and (min-width: 520px) {
    .p-header-search_resultsbtn a {
        font-size: calc(17 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-search_resultsbtn a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-header-search_resultsbtn a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-header-search_resultsbtn a::before {
    background-image: url(../images/common/icon-results.webp);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50px;
    content: '';
    display: block;
    height: 30px;
    width: 30px;
    margin: 0 5px 0 0
}

.p-header-search_resultsbtn a::after {
    background-image: url(../images/common/icon-triangle01.svg);
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 12px;
    width: 12px;
    position: absolute;
    right: 5%;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(-90deg)
}

.p-header-tel {
    display: flex;
    align-items: center;
    flex-grow: 1;
    max-width: 270px;
    margin: 0 0 0 15px
}

.p-header-tel--wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.p-header-tel--wrap>a {
    color: #394656;
    font-family: "Lato", serif;
    font-size: calc(30 * (100vw / 520));
    font-weight: bold;
    letter-spacing: .06rem
}

@media screen and (min-width: 520px) {
    .p-header-tel--wrap>a {
        font-size: calc(28 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-tel--wrap>a {
        font-size: calc(28 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-header-tel--wrap>a {
        font-size: 28px;
        font-size: 1.75rem
    }
}

.p-header-tel--wrap .reduce {
    display: block;
    font-size: calc(14 * (100vw / 520));
    font-weight: 400;
    letter-spacing: .06rem;
    margin: 2px 0 0
}

@media screen and (min-width: 520px) {
    .p-header-tel--wrap .reduce {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-tel--wrap .reduce {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-header-tel--wrap .reduce {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-header-tel--wrap .time {
    font-family: "Lato", serif;
    margin: 0 8px 0 0
}

.p-header-tel .icon {
    display: none;
    padding: 0 12px 0 0;
    position: relative
}

@media screen and (min-width: 520px) {
    .p-header-tel .icon {
        display: block
    }
}

.p-header-tel .icon:before {
    background-image: url(../images/common/icon-phone_white.svg);
    background-color: #f17989;
    background-size: 38%;
    border-radius: 50px;
    background-repeat: no-repeat;
    background-position: center;
    content: '';
    display: block;
    height: 50px;
    width: 50px
}

.p-header-tel .icon:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12.5px 19px 7.5px;
    border-color: transparent transparent #f17989 transparent;
    position: absolute;
    top: 55%;
    left: 36px
}

.p-header-line {
    display: none;
    flex-grow: 1;
    max-width: 260px;
    margin: 0 0 0 15px
}

@media screen and (min-width: 980px) {
    .p-header-line {
        display: block
    }
}

.p-header-line a {
    background-color: #0abf7d;
    border-radius: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(16 * (100vw / 520));
    padding: 11px;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .p-header-line a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-line a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-header-line a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-header-line a:hover {
    background-color: #35d99d
}

.p-header-line a img {
    margin: 0 6px;
    max-width: 30px
}

.p-header-globalnav {
    display: none;
    flex-grow: 1;
    max-width: 920px
}

@media screen and (min-width: 768px) {
    .p-header-globalnav {
        display: block
    }
}

.p-header-globalnav ul.main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px
}

.p-header-globalnav ul.main>li {
    display: flex;
    align-items: center;
    height: 50px;
    position: relative
}

.p-header-globalnav ul.main>li>span,
.p-header-globalnav ul.main>li a {
    color: #394656;
    cursor: pointer;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500
}

@media screen and (min-width: 520px) {
    .p-header-globalnav ul.main>li>span,
    .p-header-globalnav ul.main>li a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-globalnav ul.main>li>span,
    .p-header-globalnav ul.main>li a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-header-globalnav ul.main>li>span,
    .p-header-globalnav ul.main>li a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-header-globalnav ul.main>li:not(:first-of-type) {
    margin: 0 0 0 20px
}

.p-header-globalnav ul.main>li:hover ul.sub {
    opacity: 1;
    visibility: visible;
    max-height: 999vh
}

.p-header-globalnav ul.sub {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    padding: 15px 10px;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    position: absolute;
    top: 50px;
    left: -60px;
    width: 240px;
    transition: .4s;
    z-index: 1
}

.p-header-globalnav ul.sub>li>span,
.p-header-globalnav ul.sub>li a {
    color: #394656;
    cursor: pointer;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500
}

@media screen and (min-width: 520px) {
    .p-header-globalnav ul.sub>li>span,
    .p-header-globalnav ul.sub>li a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-globalnav ul.sub>li>span,
    .p-header-globalnav ul.sub>li a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-header-globalnav ul.sub>li>span,
    .p-header-globalnav ul.sub>li a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-header-globalnav ul.sub>li a {
    background-color: #f8f8f8;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    transition: .4s
}

.p-header-globalnav ul.sub>li a::after {
    background-image: url(../images/common/icon-triangle02.svg);
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    display: block;
    height: 10px;
    width: 10px;
    position: relative;
    transform: rotate(-90deg)
}

.p-header-globalnav ul.sub>li a:hover {
    background-color: #9bbddd;
    color: #fff
}

.p-header-globalnav ul.sub>li a:hover::after {
    background-image: url(../images/common/icon-triangle01.svg)
}

.p-header-globalnav ul.sub>li:not(:first-of-type) {
    margin: 6px 0 0
}

.p-header-globalnav ul.sub>li.boundary::before {
    background: radial-gradient(circle farthest-side, #9dd0eb, #9dd0eb 30%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0));
    background-size: 5px 6px;
    content: '';
    display: inline-block;
    flex-grow: 1;
    height: 5px;
    margin: 0 0 8px 0;
    width: 100%
}

.p-header-mypage {
    display: none;
    margin: 0 0 0 25px
}

@media screen and (min-width: 1150px) {
    .p-header-mypage {
        display: block
    }
}

.p-header-mypage a {
    color: #394656;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500
}

@media screen and (min-width: 520px) {
    .p-header-mypage a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-mypage a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-header-mypage a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-header-mypage a::before {
    background-color: #f9dad6;
    background-image: url(../images/common/icon-mypage.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px;
    border-radius: 50px;
    content: '';
    display: block;
    height: 50px;
    width: 50px;
    margin: 0 10px 0 0;
    transition: .4s
}

.p-header-mypage a::after {
    background-image: url(../images/common/icon-arrow01.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    content: '';
    display: block;
    height: 25px;
    width: 25px;
    margin: 0 0 0 10px;
    transition: .4s
}

.p-header-mypage a:hover::before {
    background-color: #e7bdb8
}

.p-header-drawerbtn {
    margin: 0 0 0 10px
}

@media screen and (min-width: 520px) {
    .p-header-drawerbtn {
        margin: 0 0 0 10px
    }
}

@media screen and (min-width: 768px) {
    .p-header-drawerbtn {
        margin: 0 0 0 25px
    }
}

.p-header-drawerbtn label {
    display: flex;
    align-items: center;
    cursor: pointer
}

.p-header-drawerbtn .icon {
    background-color: #81a6c9;
    border-radius: 50px;
    height: 50px;
    width: 50px;
    position: relative;
    transition: .4s
}

.p-header-drawerbtn .icon::before,
.p-header-drawerbtn .icon::after {
    background-color: #fff;
    content: '';
    display: block;
    height: 2px;
    width: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.p-header-drawerbtn .icon::before {
    top: 14px
}

.p-header-drawerbtn .icon::after {
    bottom: 14px
}

.p-header-drawerbtn .icon:hover {
    background-color: #6889a9
}

.p-header-drawerbtn .icon .border {
    background-color: #fff;
    height: 2px;
    width: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.p-header-drawerbtn .text {
    color: #394656;
    display: none;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500;
    margin: 0 0 0 10px
}

@media screen and (min-width: 520px) {
    .p-header-drawerbtn .text {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-drawerbtn .text {
        font-size: calc(16 * (100vw / 980));
        display: inline-block
    }
}

@media screen and (min-width: 980px) {
    .p-header-drawerbtn .text {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-header-spnav {
    display: block;
    margin: auto;
    padding: 5px 0 10px;
    width: 92vw
}

@media screen and (min-width: 768px) {
    .p-header-spnav {
        display: none
    }
}

.p-header-spnav>.p-header-search {
    display: block
}

@media screen and (min-width: 768px) {
    .p-header-spnav>.p-header-search {
        display: none
    }
}

.p-header-spnav_list {
    display: flex;
    flex-wrap: wrap
}

.p-header-spnav_list>li {
    margin: 10px 1% 0;
    width: calc(94% / 3)
}

.p-header-spnav_list>li>a,
.p-header-spnav_list>li .p-header-spnav--label {
    background-color: #ccc;
    border-radius: 5px;
    color: #394656;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500;
    min-height: calc(54 * (100vw / 520));
    width: 100%
}

@media screen and (min-width: 520px) {
    .p-header-spnav_list>li>a,
    .p-header-spnav_list>li .p-header-spnav--label {
        font-size: calc(16 * (100vw / 768));
        min-height: calc(54 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-header-spnav_list>li>a,
    .p-header-spnav_list>li .p-header-spnav--label {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-header-spnav_list>li>a,
    .p-header-spnav_list>li .p-header-spnav--label {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-header-spnav_list>li>a .icon,
.p-header-spnav_list>li .p-header-spnav--label .icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.p-header-spnav_list>li>a .icon::before,
.p-header-spnav_list>li .p-header-spnav--label .icon::before {
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    display: block;
    height: 23px;
    width: 23px;
    margin: 0 3px 0 0
}

.p-header-spnav_list>li>a.campaign,
.p-header-spnav_list>li .p-header-spnav--label.campaign {
    background-color: #faee68
}

.p-header-spnav_list>li>a.campaign .icon::before,
.p-header-spnav_list>li .p-header-spnav--label.campaign .icon::before {
    background-image: url(../images/common/icon-campaign.webp)
}

.p-header-spnav_list>li>a.shop,
.p-header-spnav_list>li .p-header-spnav--label.shop {
    background-color: #b7d5cd
}

.p-header-spnav_list>li>a.shop .icon::before,
.p-header-spnav_list>li .p-header-spnav--label.shop .icon::before {
    background-image: url(../images/common/icon-shop.webp)
}

.p-header-spnav_list>li>a.mypage,
.p-header-spnav_list>li .p-header-spnav--label.mypage {
    background-color: #f9dad6
}

.p-header-spnav_list>li>a.mypage .icon::before,
.p-header-spnav_list>li .p-header-spnav--label.mypage .icon::before {
    background-image: url(../images/common/icon-mypage.webp)
}

.p-header-spnav--checkbox:checked~.p-header-spnav--container {
    visibility: visible;
    opacity: 1;
    max-height: 999vh;
    z-index: 501
}

.p-header-spnav--checkbox:checked~.p-header-spnav--overlay {
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 500
}

.p-header-spnav_banner {
    display: flex;
    flex-wrap: wrap
}

.p-header-spnav_banner>li {
    margin: 0 1% 10px;
    width: calc(94% / 3)
}

.p-header-spnav--container {
    background-color: #fff;
    padding: 25px 0 10px;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    max-height: 0;
    width: calc(92vw - 2%);
    transition: .4s
}

.p-header-spnav--overlay {
    transition: .4s
}

.p-header-spnav--close {
    background-color: #81a6c9;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -12px;
    right: -5px;
    height: 28px;
    width: 28px
}

.p-header-float {
    background-color: rgba(247, 247, 247, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding: 10px 2vw;
    position: fixed;
    width: 100vw;
    z-index: 499;
    transition: .4s
}

@media screen and (min-width: 768px) {
    .p-header-float {
        display: none
    }
}

.p-header-float>.p-header-search {
    display: block;
    margin: 0 0 0 10px;
    width: auto
}

@media screen and (min-width: 768px) {
    .p-header-float>.p-header-search {
        display: none
    }
}

.p-header-float>.p-header-search .search_input {
    padding: 12px 10px;
    width: calc(100% - 50px)
}

.p-header-float>.p-header-search .search_submit {
    width: 50px
}

.p-header-float>.p-header-logo {
    max-width: 120px;
    min-width: calc(160*(100vw / 520))
}

.p-header .textline {
    position: relative
}

.p-header .textline::after {
    background-color: #929292;
    content: '';
    display: block;
    height: 2px;
    width: 0;
    position: absolute;
    bottom: -4px;
    z-index: 0;
    transition: .4s
}

.p-header .textline:hover::after {
    width: 100%
}

.p-footer {
    background-color: #fff;
    padding: 40px 0 calc(160 * (100vw / 768))
}

@media screen and (min-width: 768px) {
    .p-footer {
        padding: 50px 0
    }
}

.p-footer--wrap {
    display: flex;
    justify-content: space-between;
    margin: auto;
    max-width: 1450px;
    width: 96vw
}

.p-footer--wrap.secondary {
    margin: 25px auto 0
}

@media screen and (min-width: 768px) {
    .p-footer--wrap.secondary {
        margin: 65px auto 0
    }
}

.p-footer-logo {
    display: none;
    align-items: center;
    flex-grow: 1;
    max-width: 210px
}

@media screen and (min-width: 768px) {
    .p-footer-logo {
        display: flex
    }
}

.p-footer-logo picture {
    display: block;
    width: 100%
}

.p-footer-logo picture img {
    min-width: calc(160 * (100vw / 520))
}

@media screen and (min-width: 520px) {
    .p-footer-logo picture img {
        min-width: 160px
    }
}

.p-footer-search {
    flex-grow: 1;
    max-width: 610px;
    margin: 0 auto
}

@media screen and (min-width: 768px) {
    .p-footer-search {
        margin: 0 0 0 15px
    }
}

.p-footer-search .search_form {
    display: flex
}

.p-footer-search .search_input {
    background-color: #f7f7f7;
    border: none;
    border-radius: 50px 0 0 50px;
    color: #9c9c9c;
    font-weight: 200;
    outline: none;
    font-size: calc(16 * (100vw / 520));
    padding: 12px 25px;
    transition: .4s;
    width: calc(100% - 60px)
}

@media screen and (min-width: 520px) {
    .p-footer-search .search_input {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-search .search_input {
        font-size: calc(16 * (100vw / 980));
        padding: 16px 25px
    }
}

@media screen and (min-width: 980px) {
    .p-footer-search .search_input {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-footer-search .search_input:hover {
    background-color: #eee
}

.p-footer-search .search_submit {
    background-color: #81a6c9;
    background-image: url("../images/common/icon-search_white.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    border: none;
    border-radius: 0 50px 50px 0;
    font-size: calc(16 * (100vw / 520));
    transition: .4s;
    width: 60px
}

@media screen and (min-width: 520px) {
    .p-footer-search .search_submit {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-search .search_submit {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-footer-search .search_submit {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-footer-search .search_submit:hover {
    background-color: #6889a9;
    cursor: pointer
}

.p-footer-tel {
    display: none;
    align-items: center;
    flex-grow: 1;
    max-width: 270px;
    margin: 0 0 0 15px
}

@media screen and (min-width: 768px) {
    .p-footer-tel {
        display: flex
    }
}

.p-footer-tel--wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.p-footer-tel--wrap>a {
    color: #394656;
    font-family: "Lato", serif;
    font-size: calc(28 * (100vw / 520));
    font-weight: bold;
    letter-spacing: .06rem
}

@media screen and (min-width: 520px) {
    .p-footer-tel--wrap>a {
        font-size: calc(28 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-tel--wrap>a {
        font-size: calc(28 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-footer-tel--wrap>a {
        font-size: 28px;
        font-size: 1.75rem
    }
}

.p-footer-tel--wrap .reduce {
    display: block;
    font-size: calc(14 * (100vw / 520));
    font-weight: 400;
    letter-spacing: .06rem;
    margin: 2px 0 0
}

@media screen and (min-width: 520px) {
    .p-footer-tel--wrap .reduce {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-tel--wrap .reduce {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-footer-tel--wrap .reduce {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-footer-tel--wrap .time {
    font-family: "Lato", serif;
    margin: 0 8px 0 0
}

.p-footer-tel .icon {
    padding: 0 12px 0 0;
    position: relative
}

.p-footer-tel .icon:before {
    background-image: url(../images/common/icon-phone_white.svg);
    background-color: #f17989;
    background-size: 38%;
    border-radius: 50px;
    background-repeat: no-repeat;
    background-position: center;
    content: '';
    display: block;
    height: 50px;
    width: 50px
}

.p-footer-tel .icon:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12.5px 19px 7.5px;
    border-color: transparent transparent #f17989 transparent;
    position: absolute;
    top: 55%;
    left: 36px
}

.p-footer-line {
    display: none;
    flex-grow: 1;
    max-width: 260px;
    margin: 0 0 0 15px
}

@media screen and (min-width: 980px) {
    .p-footer-line {
        display: block
    }
}

.p-footer-line a {
    background-color: #0abf7d;
    border-radius: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(16 * (100vw / 520));
    padding: 11px;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .p-footer-line a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-line a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-footer-line a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-footer-line a:hover {
    background-color: #35d99d
}

.p-footer-line a img {
    margin: 0 6px;
    max-width: 30px
}

.p-footer-nav {
    display: flex;
    flex-direction: column;
    width: 100%
}

@media screen and (min-width: 1150px) {
    .p-footer-nav {
        flex-direction: row
    }
}

.p-footer-nav_list01 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-grow: 1;
    width: 100%
}

@media screen and (min-width: 768px) {
    .p-footer-nav_list01 {
        flex-direction: row
    }
}

@media screen and (min-width: 1150px) {
    .p-footer-nav_list01 {
        width: calc(100% - 325px - 80px)
    }
}

.p-footer-nav_list01--wrap {
    border-bottom: 1px solid #f7f7f7;
    margin: 0 0 10px
}

@media screen and (min-width: 768px) {
    .p-footer-nav_list01--wrap {
        border-bottom: none;
        margin: 0
    }
}

@media screen and (min-width: 768px) {
    .p-footer-nav_list01--wrap:not(:first-of-type) {
        margin: 0 0 0 30px
    }
}

.p-footer-nav_list01--wrap dt {
    color: #394656;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500;
    margin: 0 0 10px
}

@media screen and (min-width: 520px) {
    .p-footer-nav_list01--wrap dt {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-nav_list01--wrap dt {
        font-size: calc(16 * (100vw / 980));
        margin: 0 0 35px
    }
}

@media screen and (min-width: 980px) {
    .p-footer-nav_list01--wrap dt {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-footer-nav_list01--wrap dd .subpage {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

@media screen and (min-width: 768px) {
    .p-footer-nav_list01--wrap dd .subpage {
        flex-direction: column
    }
}

.p-footer-nav_list01--wrap dd .subpage>li {
    margin: 0 7px 7px 0
}

@media screen and (min-width: 768px) {
    .p-footer-nav_list01--wrap dd .subpage>li {
        margin: 0 0 10px
    }
}

.p-footer-nav_list01--wrap dd .subpage>li a {
    color: #394656;
    font-size: calc(14 * (100vw / 520))
}

@media screen and (min-width: 520px) {
    .p-footer-nav_list01--wrap dd .subpage>li a {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-nav_list01--wrap dd .subpage>li a {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-footer-nav_list01--wrap dd .subpage>li a {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-footer-nav_list01--wrap dd .subpage>li a:hover {
    text-decoration: underline
}

.p-footer-nav_list02 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 20px 0 0;
    width: 100%
}

@media screen and (min-width: 768px) {
    .p-footer-nav_list02 {
        margin: 40px 0 0
    }
}

@media screen and (min-width: 1150px) {
    .p-footer-nav_list02 {
        margin: 0 0 0 80px;
        max-width: 325px;
        width: auto
    }
}

.p-footer-nav_list02 .page {
    display: flex;
    flex-wrap: wrap
}

.p-footer-nav_list02 .page>li {
    margin: 0 25px 15px 0
}

@media screen and (min-width: 1150px) {
    .p-footer-nav_list02 .page>li {
        margin: 0 0 35px;
        width: 48%
    }
}

@media screen and (min-width: 1150px) {
    .p-footer-nav_list02 .page>li:nth-of-type(2n+2) {
        margin: 0 0 35px 4%
    }
}

.p-footer-nav_list02 .page>li a {
    color: #394656;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500
}

@media screen and (min-width: 520px) {
    .p-footer-nav_list02 .page>li a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-nav_list02 .page>li a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-footer-nav_list02 .page>li a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-footer-mypage {
    margin: 20px 0 0
}

@media screen and (min-width: 768px) {
    .p-footer-mypage {
        margin: 0
    }
}

.p-footer-mypage a {
    color: #394656;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500
}

@media screen and (min-width: 520px) {
    .p-footer-mypage a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-mypage a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-footer-mypage a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-footer-mypage a::before {
    background-color: #f9dad6;
    background-image: url(../images/common/icon-mypage.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px;
    border-radius: 50px;
    content: '';
    display: block;
    height: 50px;
    width: 50px;
    margin: 0 10px 0 0;
    transition: .4s
}

.p-footer-mypage a::after {
    background-image: url(../images/common/icon-arrow01.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    content: '';
    display: block;
    height: 25px;
    width: 25px;
    margin: 0 0 0 10px;
    transition: .4s
}

.p-footer-mypage a:hover::before {
    background-color: #e7bdb8
}

.p-footer-ltd_hikida {
    margin: 30px auto 0
}

@media screen and (min-width: 768px) {
    .p-footer-ltd_hikida {
        margin: 0 auto
    }
}

.p-footer-ltd_hikida a {
    transition: .4s
}

.p-footer-ltd_hikida a:hover {
    opacity: .7
}

.p-footer-ltd_hikida .authorization,
.p-footer-ltd_hikida .copyright {
    font-size: calc(14 * (100vw / 520))
}

@media screen and (min-width: 520px) {
    .p-footer-ltd_hikida .authorization,
    .p-footer-ltd_hikida .copyright {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-footer-ltd_hikida .authorization,
    .p-footer-ltd_hikida .copyright {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-footer-ltd_hikida .authorization,
    .p-footer-ltd_hikida .copyright {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-footer-ltd_hikida .authorization {
    margin: 15px auto 0
}

.p-footer .textline {
    color: #394656;
    position: relative
}

.p-footer .textline::after {
    background-color: #929292;
    content: '';
    display: block;
    height: 2px;
    width: 0;
    position: absolute;
    bottom: -4px;
    z-index: 0;
    transition: .4s
}

.p-footer .textline:hover::after {
    width: 100%
}

.p-top-mainvisual {
    padding: 15px 0 30px
}

@media screen and (min-width: 768px) {
    .p-top-mainvisual {
        padding: 30px 0 60px
    }
}

.p-top-mainvisual_carousel--wrap {
    transform: scale(0.9);
    transition: .4s
}

.p-top-mainvisual_carousel--wrap.slick-current {
    transform: scale(1);
    transition: .4s
}

.p-top-mainvisual_carousel picture img {
    margin: auto
}

.p-top-mainvisual_carousel .arrow {
    background: url(../images/common/icon-triangle01.svg) center no-repeat;
    background-size: 12px;
    background-color: #81A6C9;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    width: 30px;
    height: 30px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2
}

@media screen and (min-width: 980px) {
    .p-top-mainvisual_carousel .arrow {
        background-size: 18px;
        width: 50px;
        height: 50px
    }
}

.p-top-mainvisual_carousel .arrow.prev {
    transform: rotate(90deg);
    left: -90vw
}

@media screen and (min-width: 980px) {
    .p-top-mainvisual_carousel .arrow.prev {
        left: -960px
    }
}

.p-top-mainvisual_carousel .arrow.next {
    transform: rotate(-90deg);
    right: -90vw
}

@media screen and (min-width: 980px) {
    .p-top-mainvisual_carousel .arrow.next {
        right: -960px
    }
}

.p-top-campaign {
    background-color: #f0f0f0;
    padding: 30px 0
}

@media screen and (min-width: 768px) {
    .p-top-campaign {
        padding: 60px 0 80px
    }
}

.p-top-campaign_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-campaign_title {
        font-size: calc(24 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-campaign_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-campaign_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-campaign_list {
    display: flex;
    flex-wrap: wrap;
    margin: 30px auto 0;
    max-width: 980px;
    width: 96vw
}

.p-top-campaign_list>li {
    margin: 0 0 10px 1%;
    width: calc(97% / 3)
}

@media screen and (min-width: 768px) {
    .p-top-campaign_list>li {
        width: calc(96% / 4)
    }
}

.p-top-campaign_list>li:nth-of-type(3n+1) {
    margin: 0 0 10px
}

@media screen and (min-width: 768px) {
    .p-top-campaign_list>li:nth-of-type(3n+1) {
        margin: 0
    }
}

@media screen and (min-width: 768px) {
    .p-top-campaign_list>li:nth-of-type(4n+1) {
        margin: 0 0 10px
    }
}

.p-top-campaign_list>li a {
    transition: .4s
}

.p-top-campaign_list>li a:hover {
    opacity: .7
}

.p-top-gold {
    background-color: #e3e3e3;
    padding: 35px 0
}

@media screen and (min-width: 768px) {
    .p-top-gold {
        padding: 60px 0
    }
}

.p-top-gold--wrap {
    border-radius: 5px;
    margin: auto;
    max-width: 1000px;
    width: 96vw
}

.p-top-gold_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(36 * (100vw / 520));
    font-weight: 500;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-gold_title {
        font-size: calc(52 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-gold_title {
        font-size: calc(52 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-gold_title {
        font-size: 52px;
        font-size: 3.25rem
    }
}

.p-top-gold_title .att {
    color: #960340;
    font-size: 92%;
    margin: 0 0 0 .6rem
}

@media screen and (min-width: 768px) {
    .p-top-gold_title .att {
        margin: 0 0 0 1.6rem
    }
}

.p-top-gold_update {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 0
}

@media screen and (min-width: 768px) {
    .p-top-gold_update {
        margin: 25px 0 0
    }
}

.p-top-gold_update--amount {
    border-right: 1px solid #394656;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: calc(34 * (100vw / 520));
    margin: 0 10px 0 0;
    text-align: center;
    padding: 0 10px 0 0
}

@media screen and (min-width: 520px) {
    .p-top-gold_update--amount {
        font-size: calc(40 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-gold_update--amount {
        font-size: calc(40 * (100vw / 980));
        margin: 0 20px 0 0;
        padding: 0 20px 0 0
    }
}

@media screen and (min-width: 980px) {
    .p-top-gold_update--amount {
        font-size: 40px;
        font-size: 2.5rem
    }
}

.p-top-gold_update--amount .kinds {
    font-weight: 700
}

.p-top-gold_update--amount .int {
    font-family: "Lato", serif;
    font-size: 180%;
    font-weight: 900;
    line-height: 1;
    margin: 0 .5rem
}

.p-top-gold_update--amount .yen {
    font-size: 80%;
    font-weight: 700
}

.p-top-gold_update--amount .grams {
    font-family: "Lato", serif;
    font-weight: 700;
    padding: 0 0 0 20px;
    position: relative
}

.p-top-gold_update--amount .grams:before {
    background: #394656;
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    transform: rotate(-65deg);
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 0;
    margin: auto
}

@media screen and (min-width: 768px) {
    .p-top-gold_update--amount .grams:before {
        width: 60px;
        left: -20px
    }
}

.p-top-gold_update--nofees {
    color: #960340;
    font-size: calc(26 * (100vw / 520));
    font-weight: 500;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-gold_update--nofees {
        font-size: calc(32 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-gold_update--nofees {
        font-size: calc(32 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-gold_update--nofees {
        font-size: 32px;
        font-size: 2rem
    }
}

.p-top-gold_update--date {
    border: 1px solid #394656;
    border-radius: 5px;
    color: #394656;
    font-family: "Lato", serif;
    font-size: calc(13 * (100vw / 520));
    font-weight: 500;
    margin: 20px auto 0;
    padding: 2px 15px;
    max-width: 240px;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-gold_update--date {
        font-size: calc(13 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-gold_update--date {
        font-size: calc(13 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-gold_update--date {
        font-size: 13px;
        font-size: .8125rem
    }
}

.p-top-gold_btn {
    margin: 30px 0 0
}

.p-top-purchase {
    padding: 50px 0 70px
}

@media screen and (min-width: 768px) {
    .p-top-purchase {
        padding: 60px 0 80px
    }
}

.p-top-purchase_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-purchase_title {
        font-size: calc(24 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-purchase_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-purchase_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-purchase_link {
    display: flex;
    flex-wrap: wrap;
    margin: 30px auto 0;
    max-width: 850px;
    width: 96vw
}

.p-top-purchase_link>li {
    margin-bottom: 10px;
    width: 49%
}

@media screen and (min-width: 768px) {
    .p-top-purchase_link>li {
        margin-bottom: 15px
    }
}

.p-top-purchase_link>li:nth-of-type(2n+2) {
    margin-left: 2%
}

.p-top-purchase_link>li:nth-last-child(1),
.p-top-purchase_link>li:nth-last-child(2) {
    margin-bottom: 0
}

.p-top-purchase_link>li a {
    background-color: #929292;
    border: 5px solid #fff;
    border-radius: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500;
    line-height: 1.2;
    padding: 13px 6%;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .p-top-purchase_link>li a {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-purchase_link>li a {
        font-size: calc(16 * (100vw / 980));
        padding: 17px 6%
    }
}

@media screen and (min-width: 980px) {
    .p-top-purchase_link>li a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-purchase_link>li a:hover {
    background-color: #81a6c9
}

.p-top-purchase_link>li .icon {
    background-color: #fff;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 0 0;
    height: 30px;
    width: 30px
}

@media screen and (min-width: 768px) {
    .p-top-purchase_link>li .icon {
        height: 60px;
        width: 60px
    }
}

.p-top-purchase_link>li .icon img {
    width: 75%
}

.p-top-purchase_link>li .text {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (min-width: 768px) {
    .p-top-purchase_link>li .text::after {
        background-image: url(../images/common/icon-arrow02.webp);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        content: '';
        display: block;
        height: 25px;
        width: 25px;
        margin: 0 0 0 10px;
        transition: .4s
    }
}

.p-top-purchase_list {
    display: flex;
    flex-wrap: wrap;
    margin: 25px auto 0;
    max-width: 1300px;
    width: 96%;
}

@media screen and (min-width: 768px) {
    .p-top-purchase_list {
        margin: 45px auto 0
    }
}

.p-top-purchase_list>li {
    padding: 10px 5px;
    width: calc(100% / 2);
    transition: .4s
}

@media screen and (min-width: 768px) {
    .p-top-purchase_list>li {
        width: calc(100% / 3);
    }
}

@media screen and (min-width: 980px) {
    .p-top-purchase_list>li {
        width: calc(100% / 4);
    }
}

@media screen and (min-width: 1150px) {
    .p-top-purchase_list>li {
        width: calc(100% / 5);
    }
}

@media screen and (min-width: 1400px) {
    .p-top-purchase_list>li {
        width: calc(100% / 6);
    }
}

.p-top-purchase_list>li a {
    background-color: #fff;
    border-radius: 5px;
    display: block;
    height: 100%;
    overflow: hidden
}

.p-top-purchase_list>li a:hover {
    background-color: #e5f2ff
}

.p-top-purchase_list>li figure {
    height: 100%;
    display: flex;
    flex-direction: column
}

.p-top-purchase_list>li figure picture {
    background-color: #fff;
    display: block;
    height: 110px;
    text-align: center
}

@media screen and (min-width: 768px) {
    .p-top-purchase_list>li figure picture {
        height: 155px
    }
}

.p-top-purchase_list>li figure picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin: auto
}

.p-top-purchase_list>li figure figcaption {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 15px 5%
}

.p-top-purchase_list>li .date {
    color: #929292;
    font-family: "Lato", serif;
    font-size: calc(14 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .p-top-purchase_list>li .date {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-purchase_list>li .date {
        font-size: calc(12 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-purchase_list>li .date {
        font-size: 12px;
        font-size: .75rem
    }
}

.p-top-purchase_list>li .brandname {
    color: #394656;
    flex-grow: 1;
    font-size: calc(18 * (100vw / 520));
    margin: 10px 0 0;
    line-height: 1.1;
    overflow: hidden
}

@media screen and (min-width: 520px) {
    .p-top-purchase_list>li .brandname {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-purchase_list>li .brandname {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-purchase_list>li .brandname {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-purchase_list>li .amount {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    font-size: calc(14 * (100vw / 520));
    margin: 15px 0 0
}

@media screen and (min-width: 520px) {
    .p-top-purchase_list>li .amount {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-purchase_list>li .amount {
        justify-content: flex-start;
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-purchase_list>li .amount {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-top-purchase_list>li .tilde {
    color: #f17989;
    font-family: "Lato", serif;
    font-size: calc(26 * (100vw / 520));
    font-weight: 700;
    letter-spacing: .07rem;
    margin: 3px 0 0;
}

.p-top-purchase_list>li .int {
    color: #f17989;
    font-family: "Lato", serif;
    font-size: calc(26 * (100vw / 520));
    font-weight: 700;
    letter-spacing: .07rem;
    margin: 3px 0 0;
}

@media screen and (min-width: 520px) {
    .p-top-purchase_list>li .int {
        font-size: calc(26 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-top-purchase_list>li .int {
        font-size: calc(26 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .p-top-purchase_list>li .int {
        font-size: 26px;
        font-size: 1.625rem;
    }
}

.p-top-purchase_list>li .yen {
    color: #394656
}

.p-top-purchase_list>li .category {
    border: 1px solid #00a6ca;
    border-radius: 5px;
    color: #00a6ca;
    font-size: calc(16 * (100vw / 520));
    margin: 15px 0 0;
    padding: 3px 8px;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-purchase_list>li .category {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-purchase_list>li .category {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-purchase_list>li .category {
        font-size: 12px;
        font-size: .75rem
    }
}

.p-top-purchase_btn {
    margin: 25px auto 0
}

.p-top-ranking {
    background-color: #f0f0f0;
    padding: 40px 0 55px
}

@media screen and (min-width: 768px) {
    .p-top-ranking {
        padding: 60px 0 80px
    }
}

.p-top-ranking_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-ranking_title {
        font-size: calc(24 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-ranking--date {
    border: 1px solid #00a6ca;
    border-radius: 5px;
    color: #00a6ca;
    font-size: calc(16*(100vw / 520));
    margin: 18px auto 0;
    padding: 3px 8px;
    text-align: center;
    max-width: 160px
}

@media screen and (min-width: 520px) {
    .p-top-ranking--date {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking--date {
        font-size: calc(12 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking--date {
        font-size: 12px;
        font-size: .75rem
    }
}

.p-top-ranking--date .dmy {
    font-family: "Lato", serif;
    font-weight: 700;
    margin: 0 5px 0 0
}

.p-top-ranking--note {
    color: #f17989;
    font-size: calc(16 * (100vw / 520));
    margin: 30px auto 0;
    text-align: center;
    width: 96vw
}

@media screen and (min-width: 520px) {
    .p-top-ranking--note {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking--note {
        font-size: calc(14 * (100vw / 980));
        margin: 40px auto 0
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking--note {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-top-ranking_label {
    display: flex;
    flex-wrap: wrap;
    margin: 40px auto 35px;
    max-width: 1000px;
    width: 96vw
}

@media screen and (min-width: 768px) {
    .p-top-ranking_label {
        margin: 40px auto 50px
    }
}

.p-top-ranking_label>li {
    margin-left: 2%;
    width: calc(98% / 2)
}

@media screen and (min-width: 768px) {
    .p-top-ranking_label>li {
        width: calc(94% / 4)
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking_label>li:first-of-type {
        margin-left: 0
    }
}

.p-top-ranking_label>li:nth-last-child(1),
.p-top-ranking_label>li:nth-last-child(2) {
    margin-top: 10px
}

@media screen and (min-width: 768px) {
    .p-top-ranking_label>li:nth-last-child(1),
    .p-top-ranking_label>li:nth-last-child(2) {
        margin-top: 0
    }
}

.p-top-ranking_label>li:nth-of-type(2n+1) {
    margin-left: 0
}

@media screen and (min-width: 768px) {
    .p-top-ranking_label>li:nth-of-type(2n+1) {
        margin-left: inherit
    }
}

.p-top-ranking_label>li label {
    background-color: #929292;
    border: 5px solid #929292;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: calc(20 * (100vw / 520));
    padding: 6px 0;
    text-align: center;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .p-top-ranking_label>li label {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking_label>li label {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking_label>li label {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-ranking_label>li label:hover {
    border: 5px solid #fff
}

.p-top-ranking_list {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 1200px;
    width: 96vw;
    visibility: hidden;
    opacity: 0;
    max-height: 0
}

.p-top-ranking_list>li {
    margin: 0 .5%;
    position: relative;
    width: calc(97% / 3);
    transition: .4s
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li {
        width: calc(95% / 5)
    }
}

.p-top-ranking_list>li:first-of-type,
.p-top-ranking_list>li:nth-of-type(2) {
    margin: 0 .5% 18px;
    width: calc(98% / 2)
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li:first-of-type,
    .p-top-ranking_list>li:nth-of-type(2) {
        margin: 0 .5%;
        width: calc(95% / 5)
    }
}

.p-top-ranking_list>li:first-of-type .int,
.p-top-ranking_list>li:nth-of-type(2) .int {
    font-size: calc(29*(100vw / 520))
}

@media screen and (min-width: 520px) {
    .p-top-ranking_list>li:first-of-type .int,
    .p-top-ranking_list>li:nth-of-type(2) .int {
        font-size: calc(29 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li:first-of-type .int,
    .p-top-ranking_list>li:nth-of-type(2) .int {
        font-size: calc(25 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking_list>li:first-of-type .int,
    .p-top-ranking_list>li:nth-of-type(2) .int {
        font-size: 25px;
        font-size: 1.5625rem
    }
}

.p-top-ranking_list>li::before {
    background-image: url(../images/top/icon-no01.webp);
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 35px;
    width: 35px;
    position: absolute;
    left: 5px;
    top: -15px;
    z-index: 1
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li::before {
        height: 40px;
        width: 40px;
        left: 10px;
        top: -20px
    }
}

.p-top-ranking_list>li:nth-of-type(2)::before {
    background-image: url(../images/top/icon-no02.webp)
}

.p-top-ranking_list>li:nth-of-type(3)::before {
    background-image: url(../images/top/icon-no03.webp)
}

.p-top-ranking_list>li:nth-of-type(4)::before {
    background-image: url(../images/top/icon-no04.webp)
}

.p-top-ranking_list>li:nth-of-type(5)::before {
    background-image: url(../images/top/icon-no05.webp)
}

.p-top-ranking_list>li a {
    background-color: #fff;
    border-radius: 5px;
    display: block;
    height: 100%;
    overflow: hidden
}

.p-top-ranking_list>li a:hover {
    background-color: #e5f2ff
}

.p-top-ranking_list>li figure {
    height: 100%;
    display: flex;
    flex-direction: column
}

.p-top-ranking_list>li figure picture {
    background-color: #fff;
    display: block;
    height: 110px;
    text-align: center
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li figure picture {
        height: 155px
    }
}

.p-top-ranking_list>li figure picture img {
    object-fit: cover;
    height: 100%;
    margin: auto
}

.p-top-ranking_list>li figure figcaption {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 15px 5%
}

.p-top-ranking_list>li .date {
    color: #929292;
    font-family: "Lato", serif;
    font-size: calc(14 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .p-top-ranking_list>li .date {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li .date {
        font-size: calc(12 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking_list>li .date {
        font-size: 12px;
        font-size: .75rem
    }
}

.p-top-ranking_list>li .brandname {
    color: #394656;
    flex-grow: 1;
    font-size: calc(18 * (100vw / 520));
    margin: 10px 0 0;
    line-height: 1.2;
    height: calc(41 * (100vw / 520));
    overflow: hidden
}

@media screen and (min-width: 520px) {
    .p-top-ranking_list>li .brandname {
        font-size: calc(18 * (100vw / 768));
        height: calc(39 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li .brandname {
        font-size: calc(16 * (100vw / 980));
        height: calc(39 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking_list>li .brandname {
        font-size: 16px;
        font-size: 1rem;
        height: 39px
    }
}

.p-top-ranking_list>li .amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: calc(14 * (100vw / 520));
    margin: 15px 0 0
}

@media screen and (min-width: 520px) {
    .p-top-ranking_list>li .amount {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li .amount {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking_list>li .amount {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-top-ranking_list>li .tilde {
    color: #f17989;
    font-size: calc(18 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .p-top-ranking_list>li .tilde {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li .tilde {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking_list>li .tilde {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-ranking_list>li .int {
    color: #f17989;
    font-family: "Lato", serif;
    font-size: calc(25 * (100vw / 520));
    font-weight: 700;
    letter-spacing: .07rem
}

@media screen and (min-width: 520px) {
    .p-top-ranking_list>li .int {
        font-size: calc(25 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-ranking_list>li .int {
        font-size: calc(25 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-ranking_list>li .int {
        font-size: 25px;
        font-size: 1.5625rem
    }
}

.p-top-ranking_list>li .yen {
    color: #394656
}

.p-top-ranking #ranking_watch:checked~.p-top-ranking_label li .watch,
.p-top-ranking #ranking_bag:checked~.p-top-ranking_label li .bag,
.p-top-ranking #ranking_brandjewelry:checked~.p-top-ranking_label li .brand_jewelry,
.p-top-ranking #ranking_jewel:checked~.p-top-ranking_label li .jewel {
    background-color: #00a6ca;
    border: 5px solid #fff
}

.p-top-ranking #ranking_watch:checked~.p-top-ranking_list.watch,
.p-top-ranking #ranking_bag:checked~.p-top-ranking_list.bag,
.p-top-ranking #ranking_brandjewelry:checked~.p-top-ranking_list.brandjewelry,
.p-top-ranking #ranking_jewel:checked~.p-top-ranking_list.jewel {
    visibility: visible;
    opacity: 1;
    max-height: 999vh
}

.p-top-goldprice--wrap {
    background-color: #f0f0f0;
    margin: auto;
    max-width: 1200px;
    padding: 40px 0;
    width: 96%
}

@media screen and (min-width: 768px) {
    .p-top-goldprice--wrap {
        padding: 30px 0 40px
    }
}

.p-top-goldprice_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_title {
        font-size: calc(24 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-goldprice--note {
    color: #f17989;
    font-size: calc(18 * (100vw / 520));
    margin: 20px auto 0;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-goldprice--note {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice--note {
        font-size: calc(14 * (100vw / 980));
        margin: 40px auto 0
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice--note {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-top-goldprice_label {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px auto 40px;
    max-width: 90%
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_label {
        margin: 40px auto 50px;
        max-width: 500px
    }
}

.p-top-goldprice_label>li {
    margin-left: 2%;
    width: calc(94% / 2)
}

.p-top-goldprice_label>li:first-of-type {
    margin-left: 0
}

.p-top-goldprice_label>li:nth-last-child(1),
.p-top-goldprice_label>li:nth-last-child(2) {
    margin-bottom: 0
}

.p-top-goldprice_label>li label {
    background-color: #929292;
    border: 5px solid #929292;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: calc(20 * (100vw / 520));
    padding: 6px 0;
    text-align: center;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_label>li label {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_label>li label {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_label>li label {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-goldprice_label>li label:hover {
    border: 5px solid #fff
}

.p-top-goldprice--container {
    visibility: hidden;
    opacity: 0;
    max-height: 0
}

.p-top-goldprice--container.gold .p-top-goldprice_info {
    background-color: #efece4
}

.p-top-goldprice--container.platinum .p-top-goldprice_info {
    background-color: #e7f1f5
}

.p-top-goldprice_info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    max-width: 720px;
    padding: 20px 15px 18px;
    width: 96%
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_info {
        padding: 38px 15px 28px
    }
}

.p-top-goldprice_info .janru {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    margin: 8px 0 0;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_info .janru {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_info .janru {
        font-size: calc(20 * (100vw / 980));
        margin: 15px 0 0
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_info .janru {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-goldprice_info .kinds {
    font-size: calc(20 * (100vw / 520));
    margin: 0;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_info .kinds {
        font-size: calc(20 * (100vw / 768));
        margin: 20px 0 0
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_info .kinds {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_info .kinds {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-goldprice_info .price {
    font-size: calc(40 * (100vw / 520));
    line-height: 1;
    margin: 6px 0 0
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_info .price {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_info .price {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_info .price {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-goldprice_info .price .int {
    color: #f17989;
    font-family: "Lato", serif;
    font-weight: 700;
    letter-spacing: .1rem
}

.p-top-goldprice_info .price .yen {
    font-size: 60%
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_info .price .yen {
        font-size: 78%
    }
}

.p-top-goldprice_info .ratio {
    font-size: calc(26 * (100vw / 520));
    margin: 1px 0 0
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_info .ratio {
        font-size: calc(26 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_info .ratio {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_info .ratio {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-goldprice_info .ratio .preface {
    font-size: 78%
}

.p-top-goldprice_info .ratio .num {
    color: #f17989;
    font-family: "Lato", serif;
    font-weight: 700;
    letter-spacing: .1rem
}

.p-top-goldprice_info .date {
    border: 1px solid #394656;
    border-radius: 5px;
    color: #394656;
    font-family: "Lato", serif;
    font-size: calc(16 * (100vw / 520));
    margin: 12px 0 0;
    padding: 2px 15px
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_info .date {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_info .date {
        font-size: calc(13 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_info .date {
        font-size: 13px;
        font-size: .8125rem
    }
}

.p-top-goldprice_list {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 850px;
    margin: 25px auto 0;
    width: 96%
}

.p-top-goldprice_list article {
    margin: 0 .2%;
    position: relative;
    width: calc(98.8% / 3);
    transition: .4s
}

.p-top-goldprice_list article a {
    background-color: #fff;
    border-radius: 5px;
    display: block;
    height: 100%;
    overflow: hidden
}

.p-top-goldprice_list article a:hover {
    background-color: #e5f2ff
}

.p-top-goldprice_list article figure {
    height: 100%;
    display: flex;
    flex-direction: column
}

.p-top-goldprice_list article figure picture {
    background-color: #fff;
    display: block;
    height: 155px;
    text-align: center
}

.p-top-goldprice_list article figure picture img {
    object-fit: cover;
    height: 100%;
    margin: auto
}

.p-top-goldprice_list article figure figcaption {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 15px 5%
}

.p-top-goldprice_list article .date {
    color: #929292;
    font-family: "Lato", serif;
    font-size: calc(16 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_list article .date {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_list article .date {
        font-size: calc(12 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_list article .date {
        font-size: 12px;
        font-size: .75rem
    }
}

.p-top-goldprice_list article .brandname {
    color: #394656;
    flex-grow: 1;
    font-size: calc(18 * (100vw / 520));
    margin: 10px 0 0;
    line-height: 1.2;
    height: calc(41 * (100vw / 520));
    overflow: hidden
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_list article .brandname {
        font-size: calc(18 * (100vw / 768));
        height: calc(39 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_list article .brandname {
        font-size: calc(16 * (100vw / 980));
        height: calc(39 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_list article .brandname {
        font-size: 16px;
        font-size: 1rem;
        height: 39px
    }
}

.p-top-goldprice_list article .amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: calc(14 * (100vw / 520));
    margin: 15px 0 0
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_list article .amount {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_list article .amount {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_list article .amount {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-top-goldprice_list article .tilde {
    color: #f17989;
    font-size: calc(20 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_list article .tilde {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_list article .tilde {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_list article .tilde {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-goldprice_list article .int {
    color: #f17989;
    font-family: "Lato", serif;
    font-size: calc(29 * (100vw / 520));
    font-weight: 700;
    letter-spacing: .07rem
}

@media screen and (min-width: 520px) {
    .p-top-goldprice_list article .int {
        font-size: calc(29 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_list article .int {
        font-size: calc(25 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_list article .int {
        font-size: 25px;
        font-size: 1.5625rem
    }
}

.p-top-goldprice_list article .yen {
    color: #394656
}

.p-top-goldprice_list .arrow {
    background: url(../images/common/icon-triangle01.svg) center no-repeat;
    background-size: 12px;
    background-color: #81A6C9;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    width: 30px;
    height: 30px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2
}

@media screen and (min-width: 980px) {
    .p-top-goldprice_list .arrow {
        background-size: 18px;
        width: 50px;
        height: 50px
    }
}

.p-top-goldprice_list .arrow.prev {
    transform: rotate(90deg);
    left: -90vw
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_list .arrow.prev {
        left: -54vw
    }
}

@media screen and (min-width: 1400px) {
    .p-top-goldprice_list .arrow.prev {
        left: -850px
    }
}

.p-top-goldprice_list .arrow.next {
    transform: rotate(-90deg);
    right: -90vw
}

@media screen and (min-width: 768px) {
    .p-top-goldprice_list .arrow.next {
        right: -54vw
    }
}

@media screen and (min-width: 1400px) {
    .p-top-goldprice_list .arrow.next {
        right: -850px
    }
}

.p-top-goldprice_btn {
    margin: 50px 0 0
}

.p-top-goldprice #price_gold:checked~.p-top-goldprice_label li .gold,
.p-top-goldprice #price_platinum:checked~.p-top-goldprice_label li .platinum {
    background-color: #00a6ca;
    border: 5px solid #fff
}

.p-top-goldprice #price_gold:checked~.p-top-goldprice--container.gold,
.p-top-goldprice #price_platinum:checked~.p-top-goldprice--container.platinum {
    visibility: visible;
    opacity: 1;
    max-height: 999vh
}

.p-top-jewelry--wrap {
    background-color: #f0f0f0;
    margin: auto;
    max-width: 1200px;
    padding: 30px 0 80px;
    width: 96%
}

.p-top-jewelry_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-jewelry_title {
        font-size: calc(24 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-jewelry_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-jewelry_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-jewelry--container {
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    max-width: 890px;
    margin: 25px auto 0;
    width: 96%
}

.p-top-jewelry--border {
    background-color: #e7e1e8;
    border-radius: 5px;
    padding: 40px 0
}

@media screen and (min-width: 520px) {
    .p-top-jewelry--border {
        padding: 50px 0
    }
}

.p-top-jewelry--img {
    display: block;
    margin: 15px auto 0;
    text-align: center;
    width: 80%
}

@media screen and (min-width: 768px) {
    .p-top-jewelry--img {
        width: auto
    }
}

.p-top-jewelry--text {
    font-size: calc(18 * (100vw / 520));
    line-height: 1.8;
    margin: 35px 0 0;
    padding: 0 30px
}

@media screen and (min-width: 520px) {
    .p-top-jewelry--text {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-jewelry--text {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-jewelry--text {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-jewelry_list {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 850px;
    margin: 40px auto 0;
    width: 96%
}

.p-top-jewelry_list article {
    margin: 0 .2%;
    position: relative;
    width: calc(98.8% / 3);
    transition: .4s
}

.p-top-jewelry_list article a {
    background-color: #fff;
    border-radius: 5px;
    display: block;
    height: 100%;
    overflow: hidden
}

.p-top-jewelry_list article a:hover {
    background-color: #e5f2ff
}

.p-top-jewelry_list article figure {
    height: 100%;
    display: flex;
    flex-direction: column
}

.p-top-jewelry_list article figure picture {
    background-color: #fff;
    display: block;
    height: 155px;
    text-align: center
}

.p-top-jewelry_list article figure picture img {
    object-fit: cover;
    height: 100%;
    margin: auto
}

.p-top-jewelry_list article figure figcaption {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 15px 5%
}

.p-top-jewelry_list article .date {
    color: #929292;
    font-family: "Lato", serif;
    font-size: calc(16 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .p-top-jewelry_list article .date {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-jewelry_list article .date {
        font-size: calc(12 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-jewelry_list article .date {
        font-size: 12px;
        font-size: .75rem
    }
}

.p-top-jewelry_list article .brandname {
    color: #394656;
    flex-grow: 1;
    font-size: calc(18 * (100vw / 520));
    margin: 10px 0 0;
    line-height: 1.2;
    height: calc(41 * (100vw / 520));
    overflow: hidden
}

@media screen and (min-width: 520px) {
    .p-top-jewelry_list article .brandname {
        font-size: calc(18 * (100vw / 768));
        height: calc(39 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-jewelry_list article .brandname {
        font-size: calc(16 * (100vw / 980));
        height: calc(39 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-jewelry_list article .brandname {
        font-size: 16px;
        font-size: 1rem;
        height: 39px
    }
}

.p-top-jewelry_list article .amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: calc(14 * (100vw / 520));
    margin: 15px 0 0
}

@media screen and (min-width: 520px) {
    .p-top-jewelry_list article .amount {
        font-size: calc(14 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-jewelry_list article .amount {
        font-size: calc(14 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-jewelry_list article .amount {
        font-size: 14px;
        font-size: .875rem
    }
}

.p-top-jewelry_list article .tilde {
    color: #f17989;
    font-size: calc(20 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .p-top-jewelry_list article .tilde {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-jewelry_list article .tilde {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-jewelry_list article .tilde {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-jewelry_list article .int {
    color: #f17989;
    font-family: "Lato", serif;
    font-size: calc(29 * (100vw / 520));
    font-weight: 700;
    letter-spacing: .07rem
}

@media screen and (min-width: 520px) {
    .p-top-jewelry_list article .int {
        font-size: calc(29 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-jewelry_list article .int {
        font-size: calc(25 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-jewelry_list article .int {
        font-size: 25px;
        font-size: 1.5625rem
    }
}

.p-top-jewelry_list article .yen {
    color: #394656
}

.p-top-jewelry_list .arrow {
    background: url(../images/common/icon-triangle01.svg) center no-repeat;
    background-size: 12px;
    background-color: #81A6C9;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    width: 30px;
    height: 30px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2
}

@media screen and (min-width: 980px) {
    .p-top-jewelry_list .arrow {
        background-size: 18px;
        width: 50px;
        height: 50px
    }
}

.p-top-jewelry_list .arrow.prev {
    transform: rotate(90deg);
    left: -90vw
}

@media screen and (min-width: 768px) {
    .p-top-jewelry_list .arrow.prev {
        left: -54vw
    }
}

@media screen and (min-width: 1400px) {
    .p-top-jewelry_list .arrow.prev {
        left: -850px
    }
}

.p-top-jewelry_list .arrow.next {
    transform: rotate(-90deg);
    right: -90vw
}

@media screen and (min-width: 768px) {
    .p-top-jewelry_list .arrow.next {
        right: -54vw
    }
}

@media screen and (min-width: 1400px) {
    .p-top-jewelry_list .arrow.next {
        right: -850px
    }
}

.p-top-jewelry_btn {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 30px auto 0;
    max-width: 680px
}

@media screen and (min-width: 520px) {
    .p-top-jewelry_btn {
        flex-direction: row;
        margin: 40px auto 0
    }
}

.p-top-jewelry_btn>li {
    margin: 0 1% 10px;
    width: 98%
}

@media screen and (min-width: 520px) {
    .p-top-jewelry_btn>li {
        margin: 0 1%;
        width: 48%
    }
}

.p-top-jewelry_btn .diamond a {
    background-color: #9277c4
}

.p-top-jewelry_btn .diamond a:hover {
    background-color: #b096df
}

.p-top-jewelry_btn .jewelry a {
    background-color: #ad7597
}

.p-top-jewelry_btn .jewelry a:hover {
    background-color: #c391af
}

.p-top-identification {
    max-width: 1200px;
    margin: 0 auto 80px;
    text-align: center;
    width: 96%
}

.p-top-identification a {
    transition: .4s
}

.p-top-identification a:hover {
    opacity: .7
}

.p-top-about {
    background-color: #f0f0f0;
    padding: 60px 0
}

@media screen and (min-width: 768px) {
    .p-top-about {
        padding: 80px 0
    }
}

.p-top-about--wrap {
    margin: auto;
    max-width: 1200px;
    width: 96vw
}

.p-top-about_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-about_title {
        font-size: calc(24 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-about_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-about_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-about_textarea {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    margin: 40px 0 0
}

@media screen and (min-width: 768px) {
    .p-top-about_textarea {
        margin: 70px 0 0
    }
}

.p-top-about_textarea picture {
    display: none;
    width: 440px
}

@media screen and (min-width: 1150px) {
    .p-top-about_textarea picture {
        display: block
    }
}

.p-top-about_textarea--wrap {
    width: 100%
}

@media screen and (min-width: 1150px) {
    .p-top-about_textarea--wrap {
        margin: 0 4% 0 0;
        width: calc(96% - 440px)
    }
}

.p-top-about_textarea--wrap .subtitle {
    font-size: calc(22 * (100vw / 520));
    font-weight: 500;
    line-height: 1.6
}

@media screen and (min-width: 520px) {
    .p-top-about_textarea--wrap .subtitle {
        font-size: calc(28 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-about_textarea--wrap .subtitle {
        font-size: calc(30 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-about_textarea--wrap .subtitle {
        font-size: 32px;
        font-size: 2rem
    }
}

.p-top-about_textarea--wrap .subtitle img {
    float: left;
    margin: 0 10px 0 0;
    width: 18%
}

@media screen and (min-width: 768px) {
    .p-top-about_textarea--wrap .subtitle img {
        width: 20%
    }
}

@media screen and (min-width: 980px) {
    .p-top-about_textarea--wrap .subtitle img {
        width: auto
    }
}

@media screen and (min-width: 1150px) {
    .p-top-about_textarea--wrap .subtitle img {
        float: right;
        margin: 0
    }
}

.p-top-about_textarea--wrap .text {
    font-size: calc(18 * (100vw / 520));
    line-height: 2;
    margin: 20px auto 0
}

@media screen and (min-width: 520px) {
    .p-top-about_textarea--wrap .text {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-about_textarea--wrap .text {
        font-size: calc(16 * (100vw / 980));
        margin: 30px auto 0
    }
}

@media screen and (min-width: 980px) {
    .p-top-about_textarea--wrap .text {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-about_list {
    display: flex;
    flex-wrap: wrap
}

.p-top-about_list>li {
    margin: 0 0 15px;
    width: calc(98% / 2)
}

@media screen and (min-width: 768px) {
    .p-top-about_list>li {
        margin: 0 0 30px;
        width: calc(96% / 3)
    }
}

.p-top-about_list>li:not(:nth-of-type(2n+1)) {
    margin: 0 0 15px 2%
}

@media screen and (min-width: 768px) {
    .p-top-about_list>li:not(:nth-of-type(2n+1)) {
        margin: 0 0 15px
    }
}

@media screen and (min-width: 768px) {
    .p-top-about_list>li:not(:nth-of-type(3n+1)) {
        margin: 0 0 30px 2%
    }
}

.p-top-about_list>li a {
    color: #394656;
    display: block;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500;
    line-height: 1.4
}

@media screen and (min-width: 520px) {
    .p-top-about_list>li a {
        font-size: calc(16 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-about_list>li a {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-about_list>li a {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-about_list>li a:hover figure>img {
    opacity: .6
}

.p-top-about_list>li a:hover figure span::after {
    width: 100%
}

.p-top-about_list>li figure img {
    transition: .4s
}

.p-top-about_list>li figure figcaption {
    display: flex;
    align-items: center;
    margin: 15px 0 0
}

.p-top-about_list>li figure figcaption::after {
    background-image: url(../images/common/icon-arrow01.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    content: '';
    display: block;
    height: 25px;
    width: 25px;
    margin: 0 0 0 2px;
    transition: .4s
}

@media screen and (min-width: 768px) {
    .p-top-about_list>li figure figcaption::after {
        margin: 0 0 0 10px
    }
}

.p-top-about_list>li figure figcaption span {
    position: relative
}

.p-top-about_list>li figure figcaption span::after {
    background-color: #929292;
    content: '';
    display: block;
    height: 2px;
    width: 0;
    position: absolute;
    bottom: -4px;
    z-index: 0;
    transition: .4s
}

.p-top-reason {
    background-color: #f0f0f0;
    padding: 40px 0
}

@media screen and (min-width: 768px) {
    .p-top-reason {
        padding: 80px 0
    }
}

.p-top-reason--wrap {
    margin: auto;
    max-width: 1200px;
    width: 96vw
}

.p-top-reason_title {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center
}

@media screen and (min-width: 520px) {
    .p-top-reason_title {
        font-size: calc(24 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-reason_title {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-reason_title {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-reason--container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 40px 0 0
}

@media screen and (min-width: 768px) {
    .p-top-reason--container {
        flex-direction: row-reverse;
        margin: 70px 0 0
    }
}

.p-top-reason--container picture {
    display: none
}

@media screen and (min-width: 980px) {
    .p-top-reason--container picture {
        display: block;
        width: 440px
    }
}

.p-top-reason_info {
    width: 100%
}

@media screen and (min-width: 980px) {
    .p-top-reason_info {
        margin: 0 4% 0 0;
        max-width: 660px;
        width: calc(96% - 440px)
    }
}

.p-top-reason_info .textarea {
    font-size: calc(18 * (100vw / 520));
    line-height: 2
}

@media screen and (min-width: 520px) {
    .p-top-reason_info .textarea {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-reason_info .textarea {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-reason_info .textarea {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-reason_info .textarea:before,
.p-top-reason_info .textarea::after {
    background-image: url(../images/top/img-reason-line.webp);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 1316 / 80;
    content: '';
    display: block;
    width: 100%
}

.p-top-reason_info .textarea span {
    display: block;
    padding: 25px 0
}

.p-top-reason_list {
    background-color: #e5e5e5;
    border-radius: 5px;
    display: flex;
    margin: 45px 0 0;
    padding: 25px 15px
}

@media screen and (min-width: 768px) {
    .p-top-reason_list {
        padding: 45px
    }
}

.p-top-reason_list--wrap {
    width: 48%
}

.p-top-reason_list--wrap:not(:first-of-type) {
    margin: 0 0 0 4%
}

.p-top-reason_list--wrap dt {
    font-size: calc(20 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .p-top-reason_list--wrap dt {
        font-size: calc(20 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-reason_list--wrap dt {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-reason_list--wrap dt {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-reason_menu>li {
    margin: 10px 0 0
}

@media screen and (min-width: 768px) {
    .p-top-reason_menu>li {
        margin: 18px 0 0
    }
}

.p-top-reason_menu>li a {
    background-color: #0abf7d;
    border-radius: 5px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(18 * (100vw / 520));
    font-weight: 500;
    height: 50px;
    padding: 14px;
    text-align: center;
    transition: .4s
}

@media screen and (min-width: 520px) {
    .p-top-reason_menu>li a {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-reason_menu>li a {
        font-size: calc(15 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-reason_menu>li a {
        font-size: 15px;
        font-size: .9375rem
    }
}

.p-top-reason_menu>li a:hover {
    background-color: #35d99d
}

.p-top-reason_menu>li a img {
    margin: 0 2px;
    max-width: 25px
}

.p-top-reason_menu>li a.tel {
    background-color: #f17989;
    background-image: url(../images/common/icon-tel.webp);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left 15px center
}

@media screen and (min-width: 768px) {
    .p-top-reason_menu>li a.tel {
        background-size: 30px
    }
}

.p-top-reason_menu>li a.tel:hover {
    background-color: #fab7c0
}

.p-top-reason_menu>li a.mail {
    background-color: #81a6c9;
    background-image: url(../images/common/icon-mail.webp);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left 10px center;
    justify-content: flex-end
}

@media screen and (min-width: 520px) {
    .p-top-reason_menu>li a.mail {
        background-position: left 15px center;
        justify-content: center
    }
}

@media screen and (min-width: 768px) {
    .p-top-reason_menu>li a.mail {
        background-size: 30px
    }
}

.p-top-reason_menu>li a.mail:hover {
    background-color: #99b9d7
}

.p-top-reason_menu>li a.counter {
    background-color: #b7d5cd;
    background-image: url(../images/common/icon-counter.webp);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: left 15px center;
    color: #394656
}

.p-top-reason_menu>li a.counter:hover {
    background-color: #cce9e2
}

.p-top-reason_menu>li a.delivery {
    background-color: #f9dad6;
    background-image: url(../images/common/icon-delivery.webp);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: left 15px center;
    color: #394656
}

.p-top-reason_menu>li a.delivery:hover {
    background-color: #ffe6e3;
    color: #394656
}

.p-top-reason_menu>li a.bulgeout {
    background-color: #83c5e8;
    background-image: url(../images/common/icon-bulgeout.webp);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: left 15px center;
    color: #394656
}

.p-top-reason_menu>li a.bulgeout:hover {
    background-color: #bde8ff
}

.p-top-features {
    background-color: #f0f0f0;
    padding: 40px 0
}

@media screen and (min-width: 768px) {
    .p-top-features {
        padding: 80px 0
    }
}

.p-top-features--wrap {
    background-color: #fff;
    border-radius: 5px;
    margin: auto;
    max-width: 1000px;
    padding: 40px 35px;
    width: 96vw
}

@media screen and (min-width: 768px) {
    .p-top-features--wrap {
        padding: 80px 50px
    }
}

.p-top-features_title {
    text-align: center
}

.p-top-features_list {
    margin: 70px auto 0;
    max-width: 750px
}

.p-top-features_list>li:not(:first-of-type) {
    margin: 50px 0 0
}

@media screen and (min-width: 768px) {
    .p-top-features_list>li:not(:first-of-type) {
        margin: 100px 0 0
    }
}

.p-top-features_list>li figure {
    display: flex;
    flex-direction: column-reverse
}

@media screen and (min-width: 768px) {
    .p-top-features_list>li figure {
        flex-direction: row-reverse
    }
}

.p-top-features_list>li figure figcaption {
    width: 100%
}

@media screen and (min-width: 768px) {
    .p-top-features_list>li figure figcaption {
        margin: 0 4% 0 0;
        width: calc(96% - 280px)
    }
}

.p-top-features_list>li figure figcaption .subtitle {
    display: flex;
    align-items: center;
    font-size: calc(24 * (100vw / 520));
    font-weight: 700
}

@media screen and (min-width: 520px) {
    .p-top-features_list>li figure figcaption .subtitle {
        font-size: calc(24 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-features_list>li figure figcaption .subtitle {
        font-size: calc(20 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-features_list>li figure figcaption .subtitle {
        font-size: 20px;
        font-size: 1.25rem
    }
}

.p-top-features_list>li figure figcaption .subtitle img {
    margin: 0 5px 0 0
}

.p-top-features_list>li figure figcaption .textarea {
    font-size: calc(18 * (100vw / 520));
    line-height: 2;
    margin: 10px 0 0
}

@media screen and (min-width: 520px) {
    .p-top-features_list>li figure figcaption .textarea {
        font-size: calc(18 * (100vw / 768))
    }
}

@media screen and (min-width: 768px) {
    .p-top-features_list>li figure figcaption .textarea {
        font-size: calc(16 * (100vw / 980))
    }
}

@media screen and (min-width: 980px) {
    .p-top-features_list>li figure figcaption .textarea {
        font-size: 16px;
        font-size: 1rem
    }
}

.p-top-features_list>li figure img {
    margin: 15px auto 0
}

@media screen and (min-width: 768px) {
    .p-top-features_list>li figure img {
        margin: 0
    }
}