@charset "UTF-8";

/* =========================================================
flex - flex関連の指定
========================================================= */

@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");

/* =========================================================
color - 色の設定
========================================================= */


/* =========================================================
font - font-familyの設定など
========================================================= */


/* =========================================================
typography - テキスト関連の設定
========================================================= */


/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

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;
}


/* HTML5 display-role reset for older browsers */

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;
}


/* =========================================================
base - 基本設定
========================================================= */

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;
    }
}


/* =========================================================
main - メイン
========================================================= */

.l-main {
    position: relative;
}


/* =========================================================
sidemenu
========================================================= */

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

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

.l-sidemenu_left {
    /*background-color: #f0f0f0;
  position: sticky;
  top: 70px;
  z-index: 1;
  width: 96%;
  margin: auto;*/
    display: none;
}

@media screen and (min-width: 980px) {
    .l-sidemenu_left {
        /*background-color: inherit;
    top: 0;
    width: auto;
    margin: 0;*/
        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: 0.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;
}


/* =========================================================
result
========================================================= */

.l-results-container {
    padding: 10px 0;
}

.l-results-container--wrap {
    background-color: #f0f0f0;
    display: flex;
    position: relative;
}

.l-results-container #resultsnav_check:checked+.l-results-nav {
    background: #ffffff;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    z-index: 10;
}

@media screen and (min-width: 768px) {
    .l-results-container #resultsnav_check:checked+.l-results-nav {
        position: relative;
        height: auto;
        width: 0;
    }
}

.l-results-container #resultsnav_check:checked+.l-results-nav aside {
    overflow-x: hidden;
    overflow-y: scroll;
    opacity: 1;
    padding: 30px 15px 40px;
    visibility: visible;
    transition: .4s;
    max-width: 220px;
    width: 45vw;
}

@media screen and (min-width: 768px) {
    .l-results-container #resultsnav_check:checked+.l-results-nav aside {
        opacity: 0;
        overflow-y: hidden;
        visibility: hidden;
        max-width: none;
        width: 0;
    }
}

.l-results-container #resultsnav_check:checked+.l-results-nav .drawer-btn span {
    display: none;
    position: relative;
}

.l-results-container #resultsnav_check:checked+.l-results-nav .drawer-btn::before {
    top: 24px;
    transition: .4s;
    transform: rotate(-45deg);
}

.l-results-container #resultsnav_check:checked+.l-results-nav .drawer-btn::after {
    bottom: 22px;
    transition: .4s;
    transform: rotate(45deg);
}

.l-results-container #resultsnav_check:checked~.drawer-overlay {
    width: 100vw;
    position: absolute;
    background-color: rgba(6, 6, 6, 0.12);
    height: 100%;
    z-index: 1;
}

@media screen and (min-width: 768px) {
    .l-results-container #resultsnav_check:checked~.drawer-overlay {
        display: none;
    }
}

.l-results-nav aside {
    opacity: 0;
    visibility: hidden;
    height: 100vh;
    width: 300px;
    margin: 75px 0 30px;
    padding: 30px 0 40px;
    position: sticky;
    top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: .4s;
    width: 0;
}

@media screen and (min-width: 768px) {
    .l-results-nav aside {
        opacity: 1;
        overflow-y: scroll;
        padding: 30px 10px 40px;
        visibility: visible;
        top: 0;
        width: 220px;
    }
}

@media screen and (min-width: 980px) {
    .l-results-nav aside {
        padding: 30px 20px 40px;
        width: 260px;
    }
}

@media screen and (min-width: 1400px) {
    .l-results-nav aside {
        padding: 30px 40px 40px;
        width: 300px;
    }
}

.l-results-nav aside::-webkit-scrollbar {
    width: 6px;
}

.l-results-nav aside::-webkit-scrollbar-track {
    background-color: #fff;
}

.l-results-nav aside::-webkit-scrollbar-thumb {
    background-color: #b7b7b7;
    border-radius: 8px;
}

.l-results-nav_list--wrap:not(:first-of-type) {
    margin: 35px 0 0;
    padding: 35px 0 0;
    border-top: 1px dotted #ccc;
}

.l-results-nav_list--wrap dt {
    font-size: calc(19*(100vw / 520));
    font-weight: 700;
}

@media screen and (min-width: 520px) {
    .l-results-nav_list--wrap dt {
        font-size: calc(17 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .l-results-nav_list--wrap dt {
        font-size: calc(17 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .l-results-nav_list--wrap dt {
        font-size: 17px;
        font-size: 1.0625rem;
    }
}

.l-results-nav_list--wrap dd .list {
    padding: 0 0 0 .5rem;
}

.l-results-nav_list--wrap dd .list>li {
    margin: 18px 0 0;
}

.l-results-nav_list--wrap dd .list>li a {
    color: #394656;
    font-size: calc(18*(100vw / 520));
    padding: 5px;
}

@media screen and (min-width: 520px) {
    .l-results-nav_list--wrap dd .list>li a {
        font-size: calc(16 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .l-results-nav_list--wrap dd .list>li a {
        font-size: calc(16 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .l-results-nav_list--wrap dd .list>li a {
        font-size: 16px;
        font-size: 1rem;
    }
}

.l-results-nav_list--wrap dd .list>li a:hover {
    text-decoration: underline;
}

.l-results-nav .drawer-btn {
    background-color: #81a7c8;
    border-radius: 50px;
    cursor: pointer;
    display: block;
    padding: 24px 0;
    position: absolute;
    top: 15px;
    left: 20px;
    transition: .3s;
    width: 50px;
}

@media screen and (min-width: 768px) {
    .l-results-nav .drawer-btn {
        left: 40px;
    }
}

.l-results-nav .drawer-btn:hover {
    opacity: 0.8;
}

.l-results-nav .drawer-btn span::before,
.l-results-nav .drawer-btn::before,
.l-results-nav .drawer-btn::after {
    background-color: #fff;
    content: '';
    display: block;
    height: 2px;
    width: 16px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.l-results-nav .drawer-btn::before {
    top: 16px;
    transition: .4s;
    z-index: 1;
}

.l-results-nav .drawer-btn::after {
    bottom: 14px;
    transition: .4s;
    z-index: 1;
}

.l-results-nav .drawer-btn span {
    display: block;
    position: relative;
}

.l-results-nav .drawer-btn span::before {
    z-index: 1;
}

.l-results-nav .drawer-btn span::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@media screen and (min-width: 768px) {
    .l-results-nav .drawer-btn span::after {
        display: none;
    }
}

.l-results-list {
    flex-grow: 1;
}


/* =========================================================
text - 共通のテキストなど
========================================================= */


/* =========================================================
drawer
========================================================= */

.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: 0.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: 0.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: 0.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: 0.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: 0.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;
}


/* =========================================================
breadcrumbs
========================================================= */

.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: 0.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;
}


/* =========================================================
interface - 査定・買取方法のリンク
========================================================= */

.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;
    }
}


/* =========================================================
caption - 査定士が自ら、目の前で査定
========================================================= */

.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%;
}


/* =========================================================
results
========================================================= */

.c-results {
    padding: 50px 0 70px;
}

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

.c-results--wrap {
    margin: auto;
    width: 96%;
}

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

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

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

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

.c-results_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 40px 0 0;
}

.c-results_list>article {
    max-width: 225px;
    padding: 10px 5px;
    width: calc(100% / 2);
}

@media screen and (min-width: 430px) {
    .c-results_list>article {
        width: calc(100% / 3);
    }
}

@media screen and (min-width: 520px) {
    .c-results_list>article {
        padding: 10px 3px;
        width: calc(100% / 4);
    }
}

@media screen and (min-width: 768px) {
    .c-results_list>article {
        width: calc(94% / 3);
        max-width: inherit;
    }
}

@media screen and (min-width: 980px) {
    .c-results_list>article {
        width: calc(94% / 4);
        max-width: inherit;
    }
}

@media screen and (min-width: 1150px) {
    .c-results_list>article {
        width: calc(94% / 5);
        max-width: inherit;
    }
}

@media screen and (min-width: 1400px) {
    .c-results_list>article {
        width: calc(94% / 6);
        max-width: inherit;
    }
}

@media screen and (min-width: 1700px) {
    .c-results_list>article {
        width: calc(94% / 6);
        max-width: inherit;
    }
}

.c-results_list>article a {
    background-color: #fff;
    border-radius: 5px;
    display: block;
    height: 100%;
    overflow: hidden;
}

.c-results_list figure {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.c-results_list figure picture {
    background-color: #fff;
    display: block;
    height: 110px;
    text-align: center;
}

@media screen and (min-width: 520px) {
    .c-results_list figure picture {
        height: 125px;
    }
}

@media screen and (min-width: 980px) {
    .c-results_list figure picture {
        height: 155px;
    }
}

.c-results_list figure picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin: auto;
}

.c-results_list figure figcaption {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 15px 3.5%;
}

.c-results_list .data {
    color: #929292;
    font-family: "Lato", serif;
    font-size: calc(14 * (100vw / 520));
    font-weight: 700;
}

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

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

@media screen and (min-width: 980px) {
    .c-results_list .data {
        font-size: 12px;
        font-size: 0.75rem;
    }
}

.c-results_list .brandname {
    color: #394656;
    flex-grow: 1;
    font-size: calc(18 * (100vw / 520));
    margin: 10px 0 0;
    line-height: 1.2;
    overflow: hidden;
}

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

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

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

.c-results_list .amount {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: calc(14 * (100vw / 520));
    margin: 15px 0 10px;
}

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

@media screen and (min-width: 768px) {
    .c-results_list .amount {
        justify-content: flex-start;
        font-size: calc(14 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .c-results_list .amount {
        font-size: 14px;
        font-size: 0.875rem;
    }
}

.c-results_list .amount .prefix {
    font-weight: 700;
    width: 100%;
}

.c-results_list .amount .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) {
    .c-results_list .amount .int {
        font-size: calc(26 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .c-results_list .amount .int {
        font-size: calc(26 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .c-results_list .amount .int {
        font-size: 26px;
        font-size: 1.625rem;
    }
}

.c-results_list .amount .yen {
    color: #394656;
}

.c-results_list--more {
    margin: 10px 0 0;
}

.c-results_list--more>p {
    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-results_list--more>p {
        font-size: calc(16 * (100vw / 768));
    }
}

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

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

.c-results_list--more>p:hover {
    background-color: #9bbddd;
}

.c-results_list--more>p::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-results_list .category {
    border: 1px solid #00a6ca;
    border-radius: 5px;
    color: #00a6ca;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500;
    margin: 15px 0 0;
    padding: 3px 8px;
    text-align: center;
}

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

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

@media screen and (min-width: 980px) {
    .c-results_list .category {
        font-size: 12px;
        font-size: 0.75rem;
    }
}

.c-results_list li {
    border-radius: 5px;
    color: #000;
    display: block;
    font-size: calc(16 * (100vw / 520));
    font-weight: 500;
    margin: 5px 0 0;
    padding: 5px 8px;
    text-align: center;
}

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

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

@media screen and (min-width: 980px) {
    .c-results_list li {
        font-size: 12px;
        font-size: 0.75rem;
    }
}

.c-results_list .shop {
    background: #b7d5cd;
}


/* =========================================================
priorityitem
========================================================= */

.c-priorityitem {
    padding: 50px 0 70px;
}

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

.c-priorityitem--wrap {
    margin: auto;
    max-width: 1200px;
    width: 96%;
}

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

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

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

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

.c-priorityitem_list {
    display: flex;
    flex-wrap: wrap;
    margin: 40px 0 0;
}

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

@media screen and (min-width: 768px) {
    .c-priorityitem_list>li {
        width: calc(100% / 4);
    }
}

@media screen and (min-width: 980px) {
    .c-priorityitem_list>li {
        width: calc(100% / 5);
    }
}

@media screen and (min-width: 1150px) {
    .c-priorityitem_list>li {
        width: calc(100% / 6);
    }
}

.c-priorityitem_list>li a {
    display: block;
    height: 100%;
}

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

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

.c-priorityitem_list>li figure picture {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
}

.c-priorityitem_list>li figure picture img {
    max-height: 80px;
}

.c-priorityitem_list>li figure figcaption {
    margin: 5px 0 0;
}

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

.c-priorityitem_list>li figure figcaption .series {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(16 * (100vw / 520));
}

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

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

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

.c-priorityitem_list>li figure figcaption .series::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: 768px) {
    .c-priorityitem_list>li figure figcaption .series::after {
        height: 25px;
        width: 25px;
    }
}

.c-priorityitem_list--checkbox {
    display: none;
}

.c-priorityitem_list--checkbox:checked~.c-priorityitem_itemlist--textarea {
    opacity: 1;
    visibility: visible;
    transition: .4s;
    max-height: 60vh;
}

.c-priorityitem_list--checkbox:checked~.c-priorityitem_itemlist--bg {
    background-color: rgba(0, 0, 0, 0.3);
    display: block;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}

.c-priorityitem_list--label {
    background-color: #fff;
    border-radius: 5px;
    display: block;
    height: 100%;
    max-width: 280px;
    padding: 5px 10px;
}

.c-priorityitem_list--label:hover {
    cursor: pointer;
}

.c-priorityitem_list--label picture img {
    aspect-ratio: 1.5 / 1;
    object-fit: contain;
    width: 100%;
}

.c-priorityitem_list--textarea {
    background-color: #fff;
    border-radius: 5px;
    padding: 30px 15px;
    max-width: 500px;
    width: 96vw;
    overflow-y: scroll;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
    max-height: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;
}

.c-priorityitem_list--textarea>picture img {
    margin: auto;
}

.c-priorityitem_list--textarea .text {
    font-size: calc(16 * (100vw / 520));
    margin: 25px auto 0;
}

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

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

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

.c-priorityitem_list--textarea .btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    margin: 25px auto 0;
}

.c-priorityitem_list--textarea .btn .link {
    background-color: #81a7c8;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-size: calc(26 * (100vw / 768));
    letter-spacing: .1rem;
    padding: 10px calc(33 * (100vw / 768)) 10px 18px;
    position: relative;
    text-align: center;
    width: 49%;
}

@media screen and (min-width: 520px) {
    .c-priorityitem_list--textarea .btn .link {
        font-size: calc(13 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .c-priorityitem_list--textarea .btn .link {
        font-size: 13px;
        font-size: 0.8125rem;
        padding: 16px calc(33 * (100vw / 768)) 16px 18px;
    }
}

@media screen and (min-width: 980px) {
    .c-priorityitem_list--textarea .btn .link {
        padding: 16px 22px 16px 18px;
    }
}

.c-priorityitem_list--textarea .btn .link:hover {
    cursor: pointer;
}

.c-priorityitem_list--textarea .btn .link:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(22 * (100vw / 768));
    margin: auto;
}

@media screen and (min-width: 980px) {
    .c-priorityitem_list--textarea .btn .link:before {
        right: 15px;
    }
}

.c-priorityitem_list--textarea .btn .close {
    background-color: #555;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-size: calc(26 * (100vw / 768));
    letter-spacing: .1rem;
    line-height: 1;
    padding: 10px calc(33 * (100vw / 768)) 10px 18px;
    position: relative;
    text-align: center;
    width: 49%;
}

@media screen and (min-width: 520px) {
    .c-priorityitem_list--textarea .btn .close {
        font-size: calc(13 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .c-priorityitem_list--textarea .btn .close {
        font-size: 13px;
        font-size: 0.8125rem;
        padding: 16px calc(33 * (100vw / 768)) 16px 18px;
    }
}

@media screen and (min-width: 980px) {
    .c-priorityitem_list--textarea .btn .close {
        padding: 16px 22px 16px 18px;
    }
}

.c-priorityitem_list--textarea .btn .close:hover {
    cursor: pointer;
}

.c-priorityitem_list--textarea .btn .close:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(22 * (100vw / 768));
    margin: auto;
}

@media screen and (min-width: 980px) {
    .c-priorityitem_list--textarea .btn .close:before {
        right: 15px;
    }
}


/* =========================================================
column - 関連アイテム・コラム一覧
========================================================= */

.c-column {
    background: #F0F0F0;
    padding: 30px 0;
}

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

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

.c-column h2 {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
}

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

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

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

.c-column ul {
    background: #ffffff;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    height: 220px;
    padding: 20px 10px;
    overflow: scroll;
    margin: 40px auto 0;
}

@media screen and (min-width: 980px) {
    .c-column ul {
        height: 580px;
        margin: 60px auto 0;
        padding: 20px;
    }
}

.c-column ul li {
    margin-bottom: 20px;
    width: 25%;
}

@media screen and (min-width: 768px) {
    .c-column ul li {
        width: calc(100% / 6);
    }
}

@media screen and (min-width: 980px) {
    .c-column ul li {
        width: calc(100% / 8);
    }
}

.c-column ul li a {
    border-bottom: 1px dotted #d3d3d3;
    display: block;
    padding: 0 10px 40px;
    position: relative;
    height: 100%;
}

.c-column ul li a figure {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
}

.c-column ul li a figure figcaption {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 15px;
}

.c-column ul li a figure figcaption .name {
    color: #394656;
    display: block;
    font-size: calc(16 * (100vw / 520));
}

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

@media screen and (min-width: 768px) {
    .c-column ul li a figure figcaption .name {
        font-size: calc(14 * (100vw / 980));
        letter-spacing: .05em;
    }
}

@media screen and (min-width: 980px) {
    .c-column ul li a figure figcaption .name {
        font-size: 14px;
        font-size: 0.875rem;
    }
}

.c-column ul li a .btn {
    color: #394656;
    display: inline-block;
    font-size: calc(16 * (100vw / 520));
    letter-spacing: .05em;
    text-align: center;
    text-decoration: underline;
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
}

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

@media screen and (min-width: 768px) {
    .c-column ul li a .btn {
        font-size: calc(14 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .c-column ul li a .btn {
        font-size: 14px;
        font-size: 0.875rem;
    }
}


/* =========================================================
shoplist
========================================================= */

.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;
}


/* =========================================================
faq - Q&A
========================================================= */

.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;
}


/* =========================================================
voice - お客様の声
========================================================= */

.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;
    }
}


/* =========================================================
author - 執筆
========================================================= */

.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: 0.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;
    }
}


/* =========================================================
itemlist
========================================================= */

.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;
}


/* =========================================================
focusbrand - 買取強化ブランド
========================================================= */

.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);
}


/* =========================================================
contact
========================================================= */

.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: 0.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;
}


/* =========================================================
followbtn
========================================================= */

.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;
}


/* =========================================================
chatbot
========================================================= */

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


/* =========================================================
header
========================================================= */

.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: 0.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%;
}


/* =========================================================
footer - フッター内のクラス
========================================================= */

.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: 0.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: 0.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: 0.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%;
}


/* =========================================================
page - 固定ページのクラスなど
========================================================= */


/* =========================================================
post - 投稿のクラスなど
========================================================= */


/* =========================================================
item - アイテムカテゴリのクラスなど
========================================================= */

.l-sidemenu_right .c-priorityitem {
    padding-top: 0;
}

.p-item-mv {
    background-position: center;
    background-size: cover;
    margin: 20px 0 10px;
    text-align: center;
}

@media screen and (min-width: 980px) {
    .p-item-mv {
        padding: 0;
        margin: 0 auto;
    }
}

.p-item-mv--wrap {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 1920px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

.p-item-mv img {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.p-item-about {
    padding: 60px 0;
}

@media screen and (min-width: 768px) {
    .p-item-about {
        padding: 100px 0 110px;
    }
}

.p-item-about~.c-manip {
    padding: 0 0 30px;
}

@media screen and (min-width: 768px) {
    .p-item-about~.c-manip {
        padding: 0 0 80px;
    }
}

.p-item-about--wrap {
    margin: auto;
    max-width: 1000px;
    width: 96vw;
}

.p-item-about .maintitle {
    font-size: calc(32 * (100vw / 520));
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
}

@media screen and (min-width: 520px) {
    .p-item-about .maintitle {
        font-size: calc(32 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-about .maintitle {
        font-size: calc(36 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .p-item-about .maintitle {
        font-size: 36px;
        font-size: 2.25rem;
    }
}

.p-item-about p {
    font-size: calc(18 * (100vw / 520));
    line-height: 1.8;
    letter-spacing: 1px;
    margin: 35px 0 0;
    padding: 0 30px;
    text-align: left;
}

@media screen and (min-width: 520px) {
    .p-item-about p {
        font-size: calc(18 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-about p {
        font-size: calc(16 * (100vw / 980));
        text-align: center;
    }
}

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

.p-item-campaign {
    padding: 30px 0;
}

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

.p-item-campaign--wrap {
    margin: auto;
    max-width: 1000px;
    width: 96vw;
}

.p-item-campaign h2 {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    padding-bottom: 20px;
    text-align: center;
}

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

@media screen and (min-width: 768px) {
    .p-item-campaign h2 {
        font-size: calc(20 * (100vw / 980));
        padding-bottom: 40px;
    }
}

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

.p-item-campaign ul {
    display: flex;
    flex-wrap: wrap;
    margin: 30px auto 0;
}

@media screen and (min-width: 768px) {
    .p-item-campaign ul {
        margin: 0 auto;
    }
}

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

@media screen and (min-width: 768px) {
    .p-item-campaign ul>li {
        width: calc(96% / 4);
    }
}

.p-item-campaign ul>li:nth-of-type(3n+1) {
    margin: 0 0 10px;
}

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

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

.p-item-campaign ul>li a {
    transition: .4s;
}

.p-item-campaign ul>li a:hover {
    opacity: .7;
}

.p-item-another {
    margin: 30px auto 0;
}

@media screen and (min-width: 980px) {
    .p-item-another {
        margin: 60px auto 0;
    }
}

.p-item-another--wrap {
    margin: 0 auto;
    max-width: 1200px;
    width: 96%;
}

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

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

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

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

.p-item-another ul {
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 5px;
    row-gap: 10px;
}

@media screen and (min-width: 768px) {
    .p-item-another ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 980px) {
    .p-item-another ul {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

.p-item-another ul li a {
    background: #ffffff;
    border-radius: 10px;
    display: block;
    padding: 15px 10px;
}

@media screen and (min-width: 768px) {
    .p-item-another ul li a {
        padding: 15px;
    }
}

.p-item-another ul li a figure {
    text-align: center;
}

.p-item-another ul li a figure img {
    margin-bottom: 10px;
    aspect-ratio: 1.5 / 1;
    object-fit: contain;
    width: 100%;
}

.p-item-another ul li a figure figcaption {
    background: url(../images/common/icon-arrow01.webp) no-repeat right center;
    background-size: 15px auto;
    color: #394656;
    display: block;
    font-size: calc(20 * (100vw / 520));
    font-weight: 700;
    padding-right: 20px;
}

@media screen and (min-width: 520px) {
    .p-item-another ul li a figure figcaption {
        font-size: calc(20 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-another ul li a figure figcaption {
        font-size: calc(16 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .p-item-another ul li a figure figcaption {
        font-size: 16px;
        font-size: 1rem;
    }
}

.p-item-block {
    margin: 50px auto 0;
    max-width: 1200px;
    width: 96%;
}

.p-item-block:first-of-type {
    margin-top: 0;
}

.p-item-block:last-child {
    margin-bottom: 80px;
}

@media screen and (min-width: 980px) {
    .p-item-block {
        width: 95%;
    }
}

.p-item-block .maintitle {
    background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: left bottom;
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 25px;
    padding: 20px 0;
}

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

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

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

.p-item-block .maintitle~.subtitle {
    padding-top: 0;
}

.p-item-block .maintitle .red {
    color: #ee99a4;
    display: inline-block;
    padding-left: 10px;
}

.p-item-block .subtitle {
    color: #394656;
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 25px;
    padding: 20px 0;
}

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

@media screen and (min-width: 768px) {
    .p-item-block .subtitle {
        font-size: calc(18 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .p-item-block .subtitle {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.p-item-block .content {
    font-size: calc(18 * (100vw / 520));
    line-height: 2;
}

@media screen and (min-width: 520px) {
    .p-item-block .content {
        font-size: calc(18 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-block .content {
        font-size: calc(16 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .p-item-block .content {
        font-size: 16px;
        font-size: 1rem;
    }
}

.p-item-block .content strong {
    font-weight: 700;
}

.p-item-block .content p {
    margin: 10px 0 0;
}

.p-item-block .content a {
    color: #0ea7c9;
    font-weight: bold;
    text-decoration: underline;
}

.p-item-block .content img {
    background-color: #efece4;
    border: 10px solid #fff;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
    padding: 10px;
    width: revert-layer;
}

@media screen and (min-width: 768px) {
    .p-item-block .content img {
        border: 20px solid #fff;
        padding: 20px;
    }
}

.p-item-block .content .pc {
    display: none;
}

@media screen and (min-width: 768px) {
    .p-item-block .content .pc {
        display: block;
    }
}

.p-item-block .content .sp {
    display: block;
}

@media screen and (min-width: 768px) {
    .p-item-block .content .sp {
        display: none;
    }
}

.p-item-block .content h1 {
    font-weight: bold;
    font-size: calc(30 * (100vw / 576));
}

@media screen and (min-width: 520px) {
    .p-item-block .content h1 {
        font-size: calc(30 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-block .content h1 {
        font-size: 20px;
        font-size: 1.25rem;
    }
}

.p-item-block .content h2 {
    font-weight: bold;
    font-size: calc(27 * (100vw / 576));
}

@media screen and (min-width: 520px) {
    .p-item-block .content h2 {
        font-size: calc(27 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-block .content h2 {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.p-item-block .content h3 {
    font-weight: bold;
    font-size: calc(27 * (100vw / 576));
}

@media screen and (min-width: 520px) {
    .p-item-block .content h3 {
        font-size: calc(18 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-block .content h3 {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.p-item-block .content h4 {
    font-weight: bold;
    font-size: calc(27 * (100vw / 576));
}

@media screen and (min-width: 520px) {
    .p-item-block .content h4 {
        font-size: calc(18 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-block .content h4 {
        font-size: 18px;
        font-size: 1.125rem;
    }
}

.p-item-block .content h5 {
    font-weight: bold;
    font-size: calc(22.5 * (100vw / 576));
}

@media screen and (min-width: 520px) {
    .p-item-block .content h5 {
        font-size: calc(15 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-block .content h5 {
        font-size: 15px;
        font-size: 0.9375rem;
    }
}

.p-item-block .content h6 {
    font-weight: bold;
    font-size: calc(22.5 * (100vw / 576));
}

@media screen and (min-width: 520px) {
    .p-item-block .content h6 {
        font-size: calc(15 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-block .content h6 {
        font-size: 15px;
        font-size: 0.9375rem;
    }
}

.p-item-block .content strong {
    font-weight: bold;
}

.p-item-block .content em {
    font-style: italic;
}

.p-item-block .content ul {
    display: block;
    text-align: left;
}

.p-item-block .content ul li {
    display: block;
    text-indent: -1.3rem;
    padding-left: 1rem;
    margin-bottom: 5px;
}

.p-item-block .content ul li:before {
    content: "・";
    color: #218541;
}

.p-item-block .content ol li {
    display: block;
    text-indent: -1.3rem;
    padding-left: 1rem;
    margin-bottom: 5px;
}

.p-item-block .content ol li:before {
    content: "・";
    color: #218541;
}

.p-item-block .tab {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    position: relative;
}

@media screen and (min-width: 768px) {
    .p-item-block .tab {
        flex-direction: row;
    }
}

.p-item-block .tab--wrap {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .p-item-block .tab--wrap {
        width: calc(96% / 3);
    }
}

.p-item-block .tab--wrap:not(:first-of-type) {
    margin: 15px 0 0;
}

@media screen and (min-width: 768px) {
    .p-item-block .tab--wrap:not(:first-of-type) {
        margin: 0 0 0 2%;
    }
}

.p-item-block .tab--wrap input {
    display: none;
}

.p-item-block .tab--wrap input:checked+dt {
    box-shadow: 0px -5px 0px #808080;
    transition: .4s;
}

.p-item-block .tab--wrap input:checked+dt label {
    background-color: #0ea7c9;
    border: 5px solid #fff;
}

.p-item-block .tab--wrap input:checked+dt+dd .text {
    opacity: 1;
    visibility: visible;
    max-height: 60vh;
    transition: .4s;
}

.p-item-block .tab--wrap input:checked+dt+dd .bg {
    background-color: rgba(0, 0, 0, 0.3);
    display: block;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}

.p-item-block .tab--wrap dt {
    box-shadow: 0px 5px 0px #808080;
    border-radius: 5px;
    transition: .4s;
    overflow: hidden;
}

.p-item-block .tab--wrap dt label {
    background-color: #929292;
    border: 5px solid #929292;
    color: #fff;
    display: block;
    transition: .4s;
    text-align: center;
    padding: 8px;
}

.p-item-block .tab--wrap dd .text {
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow-y: scroll;
    padding: 30px 25px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 500px;
    width: 96vw;
    z-index: 10;
    transition: .4s;
}

.p-item-block .tab--wrap dd .close {
    background-color: #555;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-size: calc(26 * (100vw / 768));
    letter-spacing: .1rem;
    line-height: 1;
    margin: 20px auto 0;
    padding: 10px calc(33 * (100vw / 768)) 10px 18px;
    position: relative;
    text-align: center;
    width: 49%;
}

@media screen and (min-width: 520px) {
    .p-item-block .tab--wrap dd .close {
        font-size: calc(13 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-block .tab--wrap dd .close {
        font-size: 13px;
        font-size: 0.8125rem;
        padding: 16px calc(33 * (100vw / 768)) 16px 18px;
    }
}

@media screen and (min-width: 980px) {
    .p-item-block .tab--wrap dd .close {
        padding: 16px 22px 16px 18px;
    }
}

.p-item-block .tab--wrap dd .close:hover {
    cursor: pointer;
}

.p-item-block .tab--wrap dd .close:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(22 * (100vw / 768));
    margin: auto;
}

@media screen and (min-width: 980px) {
    .p-item-block .tab--wrap dd .close:before {
        right: 15px;
    }
}

.p-item-point {
    background: #ffffff;
    padding: 30px 20px 0;
}

@media screen and (min-width: 980px) {
    .p-item-point {
        padding: 60px 80px 0;
    }
}

.p-item-point:last-child {
    padding-bottom: 30px;
}

@media screen and (min-width: 980px) {
    .p-item-point:last-child {
        padding-bottom: 80px;
    }
}

.p-item-point h3 img {
    max-width: 40%;
}

.p-item-point--box {
    position: relative;
}

@media screen and (min-width: 980px) {
    .p-item-point--box {
        display: grid;
        grid-template-columns: 1fr 330px;
        grid-template-rows: auto 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 0px;
        align-items: start;
    }
}

.p-item-point--box h4 {
    color: #394656;
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    line-height: 1.6;
    margin: 20px 0 0;
}

@media screen and (min-width: 520px) {
    .p-item-point--box h4 {
        font-size: calc(24 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-point--box h4 {
        font-size: calc(18 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .p-item-point--box h4 {
        font-size: 18px;
        font-size: 1.125rem;
        grid-area: 1 / 1 / 2 / 2;
    }
}

.p-item-point--box figcaption {
    font-size: calc(18 * (100vw / 520));
    line-height: 1.8;
    letter-spacing: 1px;
    margin: 20px 0 0;
    text-align: left;
}

@media screen and (min-width: 520px) {
    .p-item-point--box figcaption {
        font-size: calc(18 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-point--box figcaption {
        font-size: calc(16 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .p-item-point--box figcaption {
        font-size: 16px;
        font-size: 1rem;
        grid-area: 2 / 1 / 3 / 2;
    }
}

.p-item-point--box img {
    display: block;
    margin: 15px auto 0;
    max-width: 280px;
    max-height: 330px;
    width: auto;
}

@media screen and (min-width: 980px) {
    .p-item-point--box img {
        margin: 0 auto;
        grid-area: 1 / 2 / 3 / 3;
    }
}

.p-item-reason {
    background-color: #f0f0f0;
    padding: 40px 0;
}

@media screen and (min-width: 768px) {
    .p-item-reason {
        padding: 80px 0;
    }
}

.p-item-reason--wrap {
    margin: auto;
    max-width: 1200px;
    width: 96vw;
}

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

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

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

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

.p-item-reason--container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 40px 0 0;
}

@media screen and (min-width: 768px) {
    .p-item-reason--container {
        flex-direction: row-reverse;
        margin: 70px 0 0;
    }
}

.p-item-reason--container picture {
    display: none;
}

@media screen and (min-width: 980px) {
    .p-item-reason--container picture {
        display: block;
        width: 440px;
    }
}

.p-item-reason_info {
    width: 100%;
}

@media screen and (min-width: 980px) {
    .p-item-reason_info {
        margin: 0 4% 0 0;
        max-width: 660px;
        width: calc(96% - 440px);
    }
}

.p-item-reason_info .textarea {
    font-size: calc(20 * (100vw / 520));
    line-height: 1.8;
}

@media screen and (min-width: 520px) {
    .p-item-reason_info .textarea {
        font-size: calc(20 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-reason_info .textarea {
        font-size: calc(16 * (100vw / 980));
    }
}

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

.p-item-reason_info .textarea:before,
.p-item-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-item-reason_info .textarea span {
    display: block;
    padding: 25px 0;
}

.p-item-reason_list {
    background-color: #e5e5e5;
    border-radius: 5px;
    display: flex;
    margin: 45px 0 0;
    padding: 25px 15px;
}

@media screen and (min-width: 768px) {
    .p-item-reason_list {
        padding: 45px;
    }
}

.p-item-reason_list--wrap {
    width: 48%;
}

.p-item-reason_list--wrap:not(:first-of-type) {
    margin: 0 0 0 4%;
}

.p-item-reason_list--wrap dt {
    font-size: calc(20 * (100vw / 520));
    font-weight: 700;
}

@media screen and (min-width: 520px) {
    .p-item-reason_list--wrap dt {
        font-size: calc(20 * (100vw / 768));
    }
}

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

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

.p-item-reason_menu>li {
    margin: 10px 0 0;
}

@media screen and (min-width: 768px) {
    .p-item-reason_menu>li {
        margin: 18px 0 0;
    }
}

.p-item-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-item-reason_menu>li a {
        font-size: calc(18 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-reason_menu>li a {
        font-size: calc(15 * (100vw / 980));
    }
}

@media screen and (min-width: 980px) {
    .p-item-reason_menu>li a {
        font-size: 15px;
        font-size: 0.9375rem;
    }
}

.p-item-reason_menu>li a:hover {
    background-color: #35d99d;
}

.p-item-reason_menu>li a img {
    margin: 0 2px;
    max-width: 25px;
}

.p-item-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-item-reason_menu>li a.tel {
        background-size: 30px;
    }
}

.p-item-reason_menu>li a.tel:hover {
    background-color: #fab7c0;
}

.p-item-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-item-reason_menu>li a.mail {
        background-position: left 15px center;
        justify-content: center;
    }
}

@media screen and (min-width: 768px) {
    .p-item-reason_menu>li a.mail {
        background-size: 30px;
    }
}

.p-item-reason_menu>li a.mail:hover {
    background-color: #99b9d7;
}

.p-item-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-item-reason_menu>li a.counter:hover {
    background-color: #cce9e2;
}

.p-item-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-item-reason_menu>li a.delivery:hover {
    background-color: #ffe6e3;
    color: #394656;
}

.p-item-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-item-reason_menu>li a.bulgeout:hover {
    background-color: #bde8ff;
}

.p-item-satei {
    padding: 30px 0;
}

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

.p-item-satei--wrap {
    background: #eef0f0;
    margin: auto;
    max-width: 1200px;
    padding: 30px 20px 0;
    width: 96vw;
}

@media screen and (min-width: 980px) {
    .p-item-satei--wrap {
        padding: 60px 80px 0;
    }
}

.p-item-satei h2 {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
}

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

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

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

.p-item-satei--box {
    padding: 40px 0 0;
}

@media screen and (min-width: 980px) {
    .p-item-satei--box {
        padding: 60px 80px 0;
        display: flex;
        align-items: center;
    }
}

.p-item-satei--box:last-child {
    padding-bottom: 30px;
}

@media screen and (min-width: 980px) {
    .p-item-satei--box:last-child {
        padding-bottom: 80px;
    }
}

@media screen and (min-width: 980px) {
    .p-item-satei--box .contents {
        padding-right: 30px;
        width: 100%;
    }
}

@media screen and (min-width: 980px) {
    .p-item-satei--box .ttl {
        text-align: left;
    }
}

.p-item-satei--box .ttl img {
    max-width: 40%;
}

@media screen and (min-width: 980px) {
    .p-item-satei--box .ttl img {
        max-width: 250px;
    }
}

.p-item-satei--box figcaption {
    font-size: calc(24 * (100vw / 520));
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    margin: 15px auto;
    max-width: 80%;
}

@media screen and (min-width: 520px) {
    .p-item-satei--box figcaption {
        font-size: calc(24 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-satei--box figcaption {
        font-size: calc(20 * (100vw / 980));
        max-width: 100%;
    }
}

@media screen and (min-width: 980px) {
    .p-item-satei--box figcaption {
        font-size: 20px;
        font-size: 1.25rem;
        text-align: left;
        padding-left: 60px;
    }
}

.p-item-satei--box .text {
    display: block;
    font-size: calc(18 * (100vw / 520));
    font-weight: normal;
    line-height: 2;
    padding-top: 15px;
}

@media screen and (min-width: 520px) {
    .p-item-satei--box .text {
        font-size: calc(18 * (100vw / 768));
    }
}

@media screen and (min-width: 768px) {
    .p-item-satei--box .text {
        font-size: calc(16 * (100vw / 980));
        padding-top: 30px;
    }
}

@media screen and (min-width: 980px) {
    .p-item-satei--box .text {
        font-size: 16px;
        font-size: 1rem;
        padding-top: 0;
        padding-left: 60px;
    }
}

.p-item-satei--box img {
    display: block;
    margin: 15px auto 0;
}

@media screen and (min-width: 980px) {
    .p-item-satei--box img {
        margin: 0;
    }
}


/* =========================================================
item-jewelry - 宝石・ジュエリーのクラスなど
========================================================= */

.p-jewelry .p-item-campaign ul {
    justify-content: center;
}

.p-jewelry .p-item-campaign ul>li {
    width: calc(96% / 2);
    max-width: 360px;
}