@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");      html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} body {
background-color: #f7f7f7;
overflow-x: hidden;
font-size: calc(16 * (100vw / 520));
line-height: 1.4;
color: #394656;
width: 100vw;
position: relative;
font-family: "Zen Kaku Gothic New", sans-serif;
-webkit-font-feature-settings: "pkna";
font-feature-settings: "pkna";
}
@media screen and (min-width: 520px) {
body {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
body {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
body {
overflow-x: hidden !important;
font-size: 16px;
font-size: 1rem;
}
}
a {
cursor: pointer;
text-decoration: none;
transition: .4s;
line-height: 1;
}
a:hover {
color: inherit;
}
p {
color: #394656;
}
img {
height: auto;
vertical-align: bottom;
max-width: 100%;
width: auto;
}
.pc-show {
display: none;
}
@media screen and (min-width: 980px) {
.pc-show {
display: block;
}
}
@media screen and (min-width: 980px) {
.sp-show {
display: none;
}
}
.pc-show-inline {
display: none;
}
@media screen and (min-width: 980px) {
.pc-show-inline {
display: inline-block;
}
} .l-container {
width: 100%;
padding-right: 25px;
padding-left: 25px;
margin: 0 auto;
}
@media screen and (min-width: 1150px) {
.l-container {
max-width: 1200px;
}
}  .l-main {
position: relative;
}  .l-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;
}
}   .c-basic-btn a {
background-color: #81a6c9;
border-radius: 5px;
color: #fff;
display: block;
font-size: calc(20 * (100vw / 520));
margin: auto;
max-width: 260px;
padding: 16px 10px;
position: relative;
text-align: center;
width: 96%;
}
@media screen and (min-width: 520px) {
.c-basic-btn a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-basic-btn a {
font-size: calc(16 * (100vw / 980));
max-width: 320px;
padding: 23px 10px;
}
}
@media screen and (min-width: 980px) {
.c-basic-btn a {
font-size: 16px;
font-size: 1rem;
}
}
.c-basic-btn a:hover {
background-color: #9bbddd;
}
.c-basic-btn a::after {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-triangle01.svg);
background-repeat: no-repeat;
content: '';
display: block;
height: 16px;
width: 16px;
position: absolute;
right: 5%;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(-90deg);
}  .c-drawer {
background-color: #f7f7f7;
height: 100vh;
padding: 0;
max-width: 0;
width: 90vw;
overflow-y: scroll;
overflow-x: hidden;
position: fixed;
right: -390px;
transition: .4s;
z-index: 501;
scrollbar-color: #929292 #fff;
scrollbar-width: thin;
}
.c-drawer::-webkit-scrollbar {
width: 8px;
background-color: #fff;
}
.c-drawer::-webkit-scrollbar-thumb {
background: #929292;
width: 6px;
border-radius: 5px;
}
.c-drawer-btn label {
display: flex;
align-items: center;
justify-content: flex-end;
cursor: pointer;
}
.c-drawer-btn .icon {
background-color: #81a6c9;
border-radius: 50px;
cursor: pointer;
height: 50px;
width: 50px;
position: relative;
transition: .4s;
}
.c-drawer-btn .icon::before, .c-drawer-btn .icon::after {
background-color: #fff;
content: '';
display: block;
height: 2px;
width: 18px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.c-drawer-btn .icon::before {
top: 14px;
transition: .4s;
}
.c-drawer-btn .icon::after {
bottom: 14px;
transition: .4s;
}
.c-drawer-btn .icon:hover {
background-color: #6889a9;
}
.c-drawer-btn .icon .border {
color: #fff;
font-size: calc(11 * (100vw / 520));
font-weight: 500;
position: absolute;
bottom: 5px;
left: 0;
right: 0;
letter-spacing: -.1rem;
margin: auto;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-drawer-btn .icon .border {
font-size: calc(11 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-btn .icon .border {
font-size: calc(11 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-btn .icon .border {
font-size: 11px;
font-size: 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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/images/common/icon-triangle01.svg) center no-repeat;
background-size: 18px;
background-color: #81A6C9;
border-radius: 100%;
cursor: pointer;
display: block;
width: 50px;
height: 50px;
margin: auto;
transition: .4s;
}
.c-drawer-acc--more label:hover {
background-color: #6889a9;
}
.c-drawer-acc--check:checked + .c-drawer-acc > .c-drawer-acc--container {
max-height: 999vh;
visibility: visible;
opacity: 1;
}
.c-drawer-acc--check:checked + .c-drawer-acc > .c-drawer-acc--more label {
transform: rotate(-180deg);
}
#drawer:checked + .c-drawer {
padding: 5px 10px 15px;
max-width: 390px;
right: 0;
}
#drawer:checked + .c-drawer .c-drawer-btn .icon::before {
top: -5px;
transform: rotate(45deg);
}
#drawer:checked + .c-drawer .c-drawer-btn .icon::after {
bottom: 5px;
transform: rotate(-45deg);
}
#drawer:checked ~ .c-drawer-overlay {
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
right: 0;
z-index: 500;
} .c-breadcrumbs--wrap {
max-width: 1450px;
margin: auto;
width: 96vw;
overflow-x: scroll;
padding: 5px 0;
scrollbar-width: none;
}
.c-breadcrumbs--wrap::-webkit-scrollbar {
display: none;
}
.c-breadcrumbs--list {
display: flex;
align-items: center;
width: 200vw;
}
@media screen and (min-width: 768px) {
.c-breadcrumbs--list {
width: auto;
}
}
.c-breadcrumbs--list > li a {
display: flex;
align-items: center;
color: #394656;
font-size: calc(14 * (100vw / 520));
line-height: 1.2;
}
@media screen and (min-width: 520px) {
.c-breadcrumbs--list > li a {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-breadcrumbs--list > li a {
font-size: calc(12 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-breadcrumbs--list > li a {
font-size: 12px;
font-size: 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;
}  .c-followbtn {
background: #efece4;
background: linear-gradient(0deg, #efece4 80%, rgba(239, 236, 228, 0) 80%);
position: fixed;
bottom: 0;
width: 100vw;
}
.c-followbtn_list {
display: flex;
max-width: 768px;
margin: auto;
}
.c-followbtn_list > li {
padding: 0 5px;
width: calc(100% / 3);
}
.c-followbtn_list > li a {
display: block;
padding: 0 0 6px;
} .c-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;
} .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;
}
} .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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/images/common/icon-triangle01.svg) center no-repeat;
background-size: 18px;
background-color: #81A6C9;
border-radius: 100%;
cursor: pointer;
display: block;
width: 50px;
height: 50px;
margin: auto;
transition: .4s;
}
.c-focusbrand-acc--more label:hover {
background-color: #6889a9;
}
.c-focusbrand-acc--check:checked + .c-focusbrand-acc > .c-focusbrand-acc--container {
max-height: 999vh;
visibility: visible;
opacity: 1;
}
.c-focusbrand-acc--check:checked + .c-focusbrand-acc > .c-focusbrand-acc--more label {
transform: rotate(-180deg);
} .c-interface {
padding: 60px 0;
}
@media screen and (min-width: 768px) {
.c-interface {
padding: 60px 0 80px;
}
}
.c-interface--wrap {
margin: auto;
max-width: 1200px;
width: 96vw;
}
.c-interface_title {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(24 * (100vw / 520));
font-weight: 700;
line-height: 1.4;
margin: 0 0 15px;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-interface_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-interface_title {
font-size: calc(20 * (100vw / 980));
margin: 0 0 30px;
}
}
@media screen and (min-width: 980px) {
.c-interface_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-interface_title::before, .c-interface_title::after {
background-color: #0abf7d;
content: '';
display: block;
height: 66px;
width: 2px;
}
.c-interface_title::before {
transform: rotate(-30deg);
}
.c-interface_title::after {
transform: rotate(30deg);
}
.c-interface_title.method {
margin: 45px 0 20px;
}
@media screen and (min-width: 768px) {
.c-interface_title.method {
margin: 70px 0 30px;
}
}
.c-interface_title.method::before, .c-interface_title.method::after {
background-color: #ffee63;
}
.c-interface_title .text {
padding: 0 33px;
}
.c-interface_btn {
margin: auto;
max-width: 390px;
width: 90%;
}
.c-interface_btn a {
background-color: #0abf7d;
border-radius: 5px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(22 * (100vw / 520));
font-weight: 500;
padding: 12px;
text-align: center;
transition: .4s;
}
@media screen and (min-width: 520px) {
.c-interface_btn a {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-interface_btn a {
font-size: calc(20 * (100vw / 980));
padding: 18px;
}
}
@media screen and (min-width: 980px) {
.c-interface_btn a {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-interface_btn a:hover {
background-color: #35d99d;
}
.c-interface_btn a img {
margin: 0 8px 0;
max-width: 30px;
}
@media screen and (min-width: 768px) {
.c-interface_btn a img {
max-width: 40px;
}
}
.c-interface_btn a.counter {
background-color: #b7d5cd;
color: #394656;
}
.c-interface_btn a.counter:hover {
background-color: #cce9e2;
}
.c-interface_btn a.delivery {
background-color: #f9dad6;
color: #394656;
}
.c-interface_btn a.delivery:hover {
background-color: #ffe6e3;
color: #394656;
}
.c-interface_btn a.bulgeout {
background-color: #83c5e8;
color: #394656;
}
.c-interface_btn a.bulgeout:hover {
background-color: #bde8ff;
}
.c-interface_btnlist {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
max-width: 390px;
margin: auto;
width: 90%;
}
@media screen and (min-width: 768px) {
.c-interface_btnlist {
max-width: none;
}
}
.c-interface_btnlist > li {
width: 49%;
}
@media screen and (min-width: 768px) {
.c-interface_btnlist > li {
margin: 0 2% 0 0;
width: calc(96% / 3);
}
}
.c-interface_btnlist > li:first-of-type {
margin: 0 0 10px;
width: 100%;
}
@media screen and (min-width: 768px) {
.c-interface_btnlist > li:first-of-type {
margin: 0 2% 0 0;
width: calc(96% / 3);
}
}
.c-interface_btnlist > li:last-of-type {
margin: 0 0 0 2%;
}
@media screen and (min-width: 768px) {
.c-interface_btnlist > li:last-of-type {
margin: 0;
}
} .c-itemlist--wrap {
margin: auto;
max-width: 1200px;
padding: 80px 0;
width: 96%;
}
.c-itemlist_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-itemlist_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-itemlist_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-itemlist_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-itemlist_list {
display: grid;
grid-template-areas: "bk1 bk1 bk2 bk2" "bk3 bk3 bk4 bk4" "bk5 bk5 bk6 bk6" "bk7 bk7 bk8 bk8" "bk9 bk9 bk10 bk10" "bk11 bk11 bk12 bk12" "bk13 bk13 bk14 bk14" "bk15 bk15 bk16 bk16" "bk17 bk17 bk18 bk18 ";
grid-template-columns: repeat(4, 0.4fr);
grid-template-rows: repeat(7, 0.4fr);
row-gap: 5px;
column-gap: 5px;
margin: 35px 0 0;
}
@media screen and (min-width: 768px) {
.c-itemlist_list {
grid-template-areas: "bk1 bk1 bk2 bk2" "bk1 bk1 bk2 bk2" "bk3 bk3 bk4 bk4" "bk5 bk5 bk6 bk6" "bk7 bk7 bk8 bk9" "bk10 bk11 bk12 bk13" "bk14 bk15 bk16 bk17";
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(7, 1fr);
row-gap: 5px;
column-gap: 5px;
}
}
@media screen and (min-width: 768px) {
.c-itemlist_list {
row-gap: 10px;
column-gap: 10px;
}
}
@media screen and (min-width: 980px) {
.c-itemlist_list {
grid-template-areas: "bk1 bk1 bk1 bk1 bk1 bk2 bk2 bk2 bk2 bk2 bk3 bk3 bk3 bk3 bk3" "bk1 bk1 bk1 bk1 bk1 bk2 bk2 bk2 bk2 bk2 bk4 bk4 bk4 bk4 bk4" "bk5 bk5 bk5 bk5 bk5 bk6 bk6 bk6 bk6 bk6 bk7 bk7 bk7 bk7 bk7" "bk8 bk8 bk8 bk9 bk9 bk9 bk10 bk10 bk10 bk11 bk11 bk11 bk12 bk12 bk12" "bk13 bk13 bk13 bk14 bk14 bk14 bk15 bk15 bk15 bk16 bk16 bk16 bk17 bk17 bk17";
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(5, 1fr);
}
}
@media screen and (min-width: 1400px) {
.c-itemlist_list {
row-gap: 20px;
column-gap: 20px;
}
}
.c-itemlist_list > li:nth-of-type(1) {
grid-area: bk1;
}
.c-itemlist_list > li:nth-of-type(2) {
grid-area: bk2;
}
.c-itemlist_list > li:nth-of-type(3) {
grid-area: bk3;
}
.c-itemlist_list > li:nth-of-type(4) {
grid-area: bk4;
}
.c-itemlist_list > li:nth-of-type(5) {
grid-area: bk5;
}
.c-itemlist_list > li:nth-of-type(6) {
grid-area: bk6;
}
.c-itemlist_list > li:nth-of-type(7) {
grid-area: bk7;
}
.c-itemlist_list > li:nth-of-type(8) {
grid-area: bk8;
}
.c-itemlist_list > li:nth-of-type(9) {
grid-area: bk9;
}
.c-itemlist_list > li:nth-of-type(10) {
grid-area: bk10;
}
.c-itemlist_list > li:nth-of-type(11) {
grid-area: bk11;
}
.c-itemlist_list > li:nth-of-type(12) {
grid-area: bk12;
}
.c-itemlist_list > li:nth-of-type(13) {
grid-area: bk13;
}
.c-itemlist_list > li:nth-of-type(14) {
grid-area: bk14;
}
.c-itemlist_list > li:nth-of-type(15) {
grid-area: bk15;
}
.c-itemlist_list > li:nth-of-type(16) {
grid-area: bk16;
}
.c-itemlist_list > li:nth-of-type(17) {
grid-area: bk17;
}
.c-itemlist_list > li a {
color: #394656;
}
.c-itemlist_list > li figure {
background-color: #fff;
border-radius: 5px;
display: block;
height: 100%;
padding: 10px;
transition: .4s;
}
@media screen and (min-width: 1400px) {
.c-itemlist_list > li figure {
padding: 20px;
}
}
.c-itemlist_list > li figure:hover {
background-color: #fefefe;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.c-itemlist_list > li figure:hover picture {
background-color: #e3e3e3;
}
.c-itemlist_list > li figure figcaption {
display: flex;
align-items: center;
margin: 2px 0 0;
font-size: calc(18 * (100vw / 520));
font-weight: 500;
}
@media screen and (min-width: 520px) {
.c-itemlist_list > li figure figcaption {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-itemlist_list > li figure figcaption {
font-size: calc(16 * (100vw / 980));
margin: 10px 0 0;
}
}
@media screen and (min-width: 980px) {
.c-itemlist_list > li figure figcaption {
font-size: calc(16 * (100vw / 1150));
margin: 10px 0 0;
}
}
@media screen and (min-width: 1150px) {
.c-itemlist_list > li figure figcaption {
font-size: 16px;
font-size: 1rem;
}
}
.c-itemlist_list > li figure figcaption::after {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-arrow01.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
content: '';
display: block;
height: 15px;
width: 15px;
margin: 0 0 0 10px;
transition: .4s;
}
@media screen and (min-width: 980px) {
.c-itemlist_list > li figure figcaption::after {
height: 20px;
width: 20px;
}
}
@media screen and (min-width: 1150px) {
.c-itemlist_list > li figure figcaption::after {
height: 25px;
width: 25px;
}
}
.c-itemlist_list > li figure picture {
background-color: #f7f7f7;
border-radius: 5px;
display: block;
transition: .4s;
text-align: center;
} .c-shoplist--wrap {
margin: auto;
max-width: 1200px;
padding: 20px 0 40px;
width: 96%;
}
@media screen and (min-width: 768px) {
.c-shoplist--wrap {
padding: 30px 0 80px;
}
}
.c-shoplist_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-shoplist_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-shoplist_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-shoplist_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-shoplist--container {
margin: 30px 0 0;
}
@media screen and (min-width: 768px) {
.c-shoplist--container {
margin: 50px 0 0;
}
}
.c-shoplist--container.kanto .c-shoplist_list > li {
width: 49%;
}
.c-shoplist--container.kanto .c-shoplist_list > li:not(:first-of-type) {
margin: 0 0 0 2%;
}
.c-shoplist--container.kansai .c-shoplist_area::before {
background-image: url(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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;
} #chatplusview, chat {
position: relative;
z-index: 1;
} .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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/images/common/icon-mypage.webp);
}
.p-header-spnav--checkbox:checked ~ .p-header-spnav--container {
visibility: visible;
opacity: 1;
max-height: 999vh;
z-index: 501;
}
.p-header-spnav--checkbox:checked ~ .p-header-spnav--overlay {
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
right: 0;
z-index: 500;
}
.p-header-spnav_banner {
display: flex;
flex-wrap: wrap;
}
.p-header-spnav_banner > li {
margin: 0 1% 10px;
width: calc(94% / 3);
}
.p-header-spnav--container {
background-color: #fff;
padding: 25px 0 10px;
visibility: hidden;
opacity: 0;
position: fixed;
max-height: 0;
width: calc(92vw - 2%);
transition: .4s;
}
.p-header-spnav--overlay {
transition: .4s;
}
.p-header-spnav--close {
background-color: #81a6c9;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -12px;
right: -5px;
height: 28px;
width: 28px;
}
.p-header-float {
background-color: rgba(247, 247, 247, 0.9);
display: flex;
align-items: center;
justify-content: space-between;
opacity: 0;
visibility: hidden;
max-height: 0;
padding: 10px 2vw;
position: fixed;
width: 100vw;
z-index: 499;
transition: .4s;
}
@media screen and (min-width: 768px) {
.p-header-float {
display: none;
}
}
.p-header-float > .p-header-search {
display: block;
margin: 0 0 0 10px;
width: auto;
}
@media screen and (min-width: 768px) {
.p-header-float > .p-header-search {
display: none;
}
}
.p-header-float > .p-header-search .search_input {
padding: 12px 10px;
width: calc(100% - 50px);
}
.p-header-float > .p-header-search .search_submit {
width: 50px;
}
.p-header-float > .p-header-logo {
max-width: 120px;
min-width: calc(160*(100vw / 520));
}
.p-header .textline {
position: relative;
}
.p-header .textline::after {
background-color: #929292;
content: '';
display: block;
height: 2px;
width: 0;
position: absolute;
bottom: -4px;
z-index: 0;
transition: .4s;
}
.p-header .textline:hover::after {
width: 100%;
} .p-footer {
background-color: #fff;
padding: 40px 0 calc(160 * (100vw / 768));
}
@media screen and (min-width: 768px) {
.p-footer {
padding: 50px 0;
}
}
.p-footer--wrap {
display: flex;
justify-content: space-between;
margin: auto;
max-width: 1450px;
width: 96vw;
}
.p-footer--wrap.secondary {
margin: 25px auto 0;
}
@media screen and (min-width: 768px) {
.p-footer--wrap.secondary {
margin: 65px auto 0;
}
}
.p-footer-logo {
display: none;
align-items: center;
flex-grow: 1;
max-width: 210px;
}
@media screen and (min-width: 768px) {
.p-footer-logo {
display: flex;
}
}
.p-footer-logo picture {
display: block;
width: 100%;
}
.p-footer-logo picture img {
min-width: calc(160 * (100vw / 520));
}
@media screen and (min-width: 520px) {
.p-footer-logo picture img {
min-width: 160px;
}
}
.p-footer-search {
flex-grow: 1;
max-width: 610px;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.p-footer-search {
margin: 0 0 0 15px;
}
}
.p-footer-search .search_form {
display: flex;
}
.p-footer-search .search_input {
background-color: #f7f7f7;
border: none;
border-radius: 50px 0 0 50px;
color: #9c9c9c;
font-weight: 200;
outline: none;
font-size: calc(16 * (100vw / 520));
padding: 12px 25px;
transition: .4s;
width: calc(100% - 60px);
}
@media screen and (min-width: 520px) {
.p-footer-search .search_input {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-search .search_input {
font-size: calc(16 * (100vw / 980));
padding: 16px 25px;
}
}
@media screen and (min-width: 980px) {
.p-footer-search .search_input {
font-size: 16px;
font-size: 1rem;
}
}
.p-footer-search .search_input:hover {
background-color: #eee;
}
.p-footer-search .search_submit {
background-color: #81a6c9;
background-image: url(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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(//www.7-7maruka.com/kanri/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%;
} .p-results-search {
padding: 15px 0;
}
.p-results-search--wrap {
background-color: #fff;
border-radius: 5px;
max-width: 1450px;
margin: auto;
padding: 20px 20px 15px 20px;
width: 96vw;
}
@media screen and (min-width: 520px) {
.p-results-search--wrap {
padding: 30px 20px 15px 20px;
}
}
@media screen and (min-width: 768px) {
.p-results-search--wrap {
padding: 45px 45px 25px 45px;
}
}
.p-results-search_list {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.p-results-search_list {
flex-direction: row;
}
}
.p-results-search_list--wrap {
display: flex;
flex-direction: column;
margin: 10px 0 0;
width: 100%;
}
@media screen and (min-width: 520px) {
.p-results-search_list--wrap {
align-items: center;
flex-direction: row;
}
}
@media screen and (min-width: 768px) {
.p-results-search_list--wrap {
margin: 0;
width: 48%;
}
}
@media screen and (min-width: 768px) {
.p-results-search_list--wrap:not(:first-of-type) {
margin: 0 0 0 4%;
}
}
.p-results-search_list--wrap.freeword {
margin: 10px 0 0;
width: 100%;
}
@media screen and (min-width: 768px) {
.p-results-search_list--wrap.freeword {
margin: 20px 0 0;
}
}
.p-results-search_list--wrap.freeword dt {
width: auto;
}
.p-results-search_list--wrap.freeword dd {
display: flex;
align-items: center;
}
.p-results-search_list--wrap dt {
display: flex;
align-items: center;
width: 34%;
}
@media screen and (min-width: 980px) {
.p-results-search_list--wrap dt {
width: auto;
}
}
.p-results-search_list--wrap dt .title {
margin: 0 0 0 3px;
}
.p-results-search_list--wrap dt img {
display: none;
}
@media screen and (min-width: 768px) {
.p-results-search_list--wrap dt img {
display: block;
}
}
.p-results-search_list--wrap dd {
flex-grow: 1;
margin: 5px 0 0;
}
@media screen and (min-width: 520px) {
.p-results-search_list--wrap dd {
margin: 0 0 0 15px;
}
}
.p-results-search_list--wrap dd .selectbox {
border-radius: 50px;
display: flex;
overflow: hidden;
position: relative;
}
.p-results-search_list--wrap dd .selectbox::before, .p-results-search_list--wrap dd .selectbox::after {
content: '';
position: absolute;
pointer-events: none;
}
.p-results-search_list--wrap dd .selectbox::before {
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
width: 6px;
height: 6px;
position: absolute;
top: 6px;
bottom: 0;
right: 30px;
margin: auto;
transform: translate(50%, -50%) rotate(45deg);
z-index: 1;
}
.p-results-search_list--wrap dd .selectbox::after {
background-color: #81a7c8;
display: inline-block;
right: 0;
height: 60px;
width: 60px;
}
.p-results-search_list--wrap dd input[type="text"],
.p-results-search_list--wrap dd select {
background-color: #f7f7f7;
border: none;
color: #394656;
cursor: pointer;
flex-grow: 1;
font-size: calc(18*(100vw / 520));
outline: none;
padding: 12px 25px;
transition: .4s;
width: calc(100% - 60px);
-webkit-appearance: none;
appearance: none;
}
@media screen and (min-width: 520px) {
.p-results-search_list--wrap dd input[type="text"],
.p-results-search_list--wrap dd select {
font-size: calc(16 * (100vw / 768));
padding: 16px 25px;
}
}
@media screen and (min-width: 768px) {
.p-results-search_list--wrap dd input[type="text"],
.p-results-search_list--wrap dd select {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-search_list--wrap dd input[type="text"],
.p-results-search_list--wrap dd select {
font-size: 16px;
font-size: 1rem;
}
}
.p-results-search_list--wrap dd .textbox {
border-radius: 50px;
display: flex;
align-items: center;
margin: 0;
max-width: 700px;
overflow: hidden;
position: relative;
width: 100%;
}
.p-results-search_list--wrap dd .search_submit {
background-color: #81a6c9;
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-search_white.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
border: none;
border-radius: 50px;
cursor: pointer;
margin: 0 0 0 10px;
transition: .4s;
height: 40px;
width: 45px;
}
@media screen and (min-width: 520px) {
.p-results-search_list--wrap dd .search_submit {
height: 50px;
width: 50px;
}
}
.p-results-search_data {
display: inline-block;
font-size: calc(13*(100vw / 520));
text-align: right;
margin: 5px 0 0;
width: 100%;
}
@media screen and (min-width: 520px) {
.p-results-search_data {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-search_data {
font-size: calc(13 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-search_data {
font-size: 13px;
font-size: 0.8125rem;
}
}
.p-results-list {
padding: 60px 0;
flex-grow: 1;
}
.p-results-list--wrap {
margin: auto;
max-width: 1300px;
width: 96%;
}
.p-results-list_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.p-results-list_title {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-list_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-list_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.p-results-list_contents {
display: flex;
flex-wrap: wrap;
margin: 40px 0 0;
}
.p-results-list_contents > article {
padding: 10px 5px;
width: calc(100% / 2);
}
@media screen and (min-width: 430px) {
.p-results-list_contents > article {
width: calc(100% / 3);
}
}
@media screen and (min-width: 520px) {
.p-results-list_contents > article {
width: calc(100% / 4);
}
}
@media screen and (min-width: 768px) {
.p-results-list_contents > article {
width: calc(100% / 3);
}
}
@media screen and (min-width: 980px) {
.p-results-list_contents > article {
width: calc(100% / 4);
}
}
@media screen and (min-width: 1150px) {
.p-results-list_contents > article {
width: calc(100% / 5);
}
}
@media screen and (min-width: 1400px) {
.p-results-list_contents > article {
width: calc(100% / 6);
}
}
.p-results-list_contents > article a {
background-color: #fff;
border-radius: 5px;
display: block;
height: 100%;
overflow: hidden;
}
.p-results-list_contents figure {
height: 100%;
display: flex;
flex-direction: column;
}
.p-results-list_contents figure picture {
background-color: #fff;
display: block;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-results-list_contents figure picture {
height: 155px;
}
}
.p-results-list_contents figure picture img {
object-fit: cover;
height: 100%;
margin: auto;
}
.p-results-list_contents figure figcaption {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 15px 5%;
}
.p-results-list_contents .date {
color: #929292;
font-family: "Lato", serif;
font-size: calc(14 * (100vw / 520));
font-weight: 700;
}
@media screen and (min-width: 520px) {
.p-results-list_contents .date {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-list_contents .date {
font-size: calc(12 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-list_contents .date {
font-size: 12px;
font-size: 0.75rem;
}
}
.p-results-list_contents .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) {
.p-results-list_contents .brandname {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-list_contents .brandname {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-list_contents .brandname {
font-size: 16px;
font-size: 1rem;
}
}
.p-results-list_contents .amount {
display: flex;
align-items: baseline;
flex-wrap: wrap;
font-size: calc(14 * (100vw / 520));
margin: 15px 0 0;
}
@media screen and (min-width: 520px) {
.p-results-list_contents .amount {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-list_contents .amount {
justify-content: flex-start;
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-list_contents .amount {
font-size: 14px;
font-size: 0.875rem;
}
}
.p-results-list_contents .amount .prefix {
font-weight: 700;
width: 100%;
}
.p-results-list_contents .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) {
.p-results-list_contents .amount .int {
font-size: calc(26 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-list_contents .amount .int {
font-size: calc(26 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-list_contents .amount .int {
font-size: 26px;
font-size: 1.625rem;
}
}
.p-results-list_contents .amount .yen {
color: #394656;
}
.p-results-list_contents .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) {
.p-results-list_contents .category {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-list_contents .category {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-list_contents .category {
font-size: 12px;
font-size: 0.75rem;
}
}
.p-results-list_contents .label > 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) {
.p-results-list_contents .label > li {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-list_contents .label > li {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-list_contents .label > li {
font-size: 12px;
font-size: 0.75rem;
}
}
.p-results-list_contents .label > li.new {
background: #ffee00;
}
.p-results-list_contents .label > li.shop {
background: #b7d5cd;
}
.p-results-list_contents .label > li.delivery {
background: #f9dad6;
}
.p-results-list_contents .label > li.bulgeout {
background: #84c6e7;
}
.p-results-pagenation {
padding: 50px 0;
width: 100%;
}
.p-results-pagenation--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
.p-results-pagenation--item {
padding: 0 8px;
}
@media screen and (min-width: 768px) {
.p-results-pagenation--item {
padding: 0 10px;
}
}
.p-results-pagenation--item.active .btn {
background: #81A6C8;
}
.p-results-pagenation--item.active .btn .in {
color: #ffffff;
}
.p-results-pagenation--item.active .btn .in:hover {
text-decoration: none;
}
.p-results-pagenation--item .btn {
background: #ffffff;
border-radius: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
width: 30px;
height: 30px;
}
.p-results-pagenation--item .btn .in {
color: #81A6C8;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
}
.p-results-pagenation--item .btn.preve, .p-results-pagenation--item .btn.next {
background: url(//www.7-7maruka.com/kanri/images/common/icon-left-w.svg) no-repeat center;
background-size: 40% 40%;
background-color: #81A6C8;
width: 50px;
height: 50px;
color: #ffffff;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
}
.p-results-pagenation--item .btn.next {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-right-w.svg);
}
.p-results-pagenation--item .btn:hover {
opacity: .7;
}
.p-results-identification {
max-width: 1200px;
margin: 0 auto 80px;
text-align: center;
width: 96%;
}
.p-results-identification a {
transition: .4s;
}
.p-results-identification a:hover {
opacity: .7;
}
.p-results-detail {
flex-grow: 1;
}
.p-results-detail article {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin: auto;
max-width: 470px;
padding: 75px 0;
width: 92%;
}
@media screen and (min-width: 980px) {
.p-results-detail article {
flex-direction: row;
max-width: 1200px;
}
}
.p-results-detail_right {
margin: 30px 0 0;
padding: 0;
width: 100%;
}
@media screen and (min-width: 980px) {
.p-results-detail_right {
margin: 0;
padding: 0 20px;
width: 50%;
}
}
@media screen and (min-width: 1400px) {
.p-results-detail_right {
padding: 0 50px;
width: calc(100% - 470px);
}
}
.p-results-detail_left {
width: 100%;
}
@media screen and (min-width: 980px) {
.p-results-detail_left {
width: 50%;
}
}
@media screen and (min-width: 1400px) {
.p-results-detail_left {
width: 470px;
}
}
.p-results-detail_bottom {
width: 100%;
}
.p-results-detail_banner {
margin: 20px 0 0 0;
}
.p-results-detail_banner a {
display: block;
transition: .4s;
text-align: center;
}
.p-results-detail_banner a:hover {
opacity: .7;
}
.p-results-detail_date {
font-size: calc(20 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.p-results-detail_date {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_date {
font-size: calc(18 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-detail_date {
font-size: 18px;
font-size: 1.125rem;
}
}
.p-results-detail_title {
font-size: calc(23 * (100vw / 520));
font-weight: 700;
margin: 6px 0 0;
}
@media screen and (min-width: 520px) {
.p-results-detail_title {
font-size: calc(23 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_title {
font-size: calc(21 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-detail_title {
font-size: 21px;
font-size: 1.3125rem;
}
}
.p-results-detail_title .reduce {
display: block;
border-top: 1px dotted #d9d9d9;
font-size: 85%;
line-height: 1.3;
margin: 3px 0 0;
padding: 3px 0;
}
.p-results-detail_info {
margin: 20px 0 0;
}
.p-results-detail_info--wrap {
display: flex;
align-items: center;
}
.p-results-detail_info--wrap:not(:first-of-type) {
margin: 12px 0 0;
}
.p-results-detail_info--wrap dt {
font-size: calc(18 * (100vw / 520));
width: 120px;
}
@media screen and (min-width: 520px) {
.p-results-detail_info--wrap dt {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_info--wrap dt {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-detail_info--wrap dt {
font-size: 16px;
font-size: 1rem;
}
}
.p-results-detail_info--wrap dd {
font-size: calc(22 * (100vw / 520));
line-height: 1.4;
width: calc(100% - 120px);
}
@media screen and (min-width: 520px) {
.p-results-detail_info--wrap dd {
font-size: calc(22 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_info--wrap dd {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-detail_info--wrap dd {
font-size: 20px;
font-size: 1.25rem;
}
}
.p-results-detail_info--wrap dd a {
color: #394656;
text-decoration: underline;
}
.p-results-detail_info--wrap dd a:hover {
text-decoration: none;
}
.p-results-detail_info--btn a {
color: #fff !important;
margin: 0;
padding: 6px 10px;
text-decoration: none !important;
width: auto;
}
@media screen and (min-width: 768px) {
.p-results-detail_info--btn a {
padding: 13px 10px;
}
}
.p-results-detail_att {
color: #f17989;
display: block;
font-size: calc(16 * (100vw / 520));
padding: 25px 15px;
text-align: left;
}
@media screen and (min-width: 520px) {
.p-results-detail_att {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_att {
font-size: calc(14 * (100vw / 980));
text-align: center;
}
}
@media screen and (min-width: 980px) {
.p-results-detail_att {
font-size: 14px;
font-size: 0.875rem;
}
}
.p-results-detail_marketprice {
display: flex;
align-items: center;
margin: 30px 0;
}
.p-results-detail_marketprice .label {
border: 1px solid #00a6ca;
border-radius: 5px;
color: #00a6ca;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
padding: 1px 15px;
}
@media screen and (min-width: 520px) {
.p-results-detail_marketprice .label {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_marketprice .label {
font-size: calc(14 * (100vw / 980));
text-align: center;
}
}
@media screen and (min-width: 980px) {
.p-results-detail_marketprice .label {
font-size: 14px;
font-size: 0.875rem;
}
}
.p-results-detail_marketprice .amount {
font-size: calc(22 * (100vw / 520));
font-weight: 700;
margin: 0 0 0 2%;
}
@media screen and (min-width: 520px) {
.p-results-detail_marketprice .amount {
font-size: calc(22 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_marketprice .amount {
font-size: calc(20 * (100vw / 980));
text-align: center;
}
}
@media screen and (min-width: 980px) {
.p-results-detail_marketprice .amount {
font-size: 20px;
font-size: 1.25rem;
}
}
.p-results-detail_marketprice .int {
font-family: "Lato", serif;
letter-spacing: .1rem;
}
.p-results-detail_marketprice .yen {
font-size: 70%;
}
.p-results-detail_appraised {
background-image: linear-gradient(to top, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
background-size: 2px 10px;
background-repeat: repeat-y;
background-position: left bottom;
padding: 15px 0 15px 20px;
max-width: 430px;
}
.p-results-detail_appraised--wrap {
display: flex;
align-items: center;
}
.p-results-detail_appraised--wrap:not(:first-of-type) {
margin: 15px 0 0;
}
.p-results-detail_appraised--wrap dt {
font-size: calc(22 * (100vw / 520));
font-weight: 700;
}
@media screen and (min-width: 520px) {
.p-results-detail_appraised--wrap dt {
font-size: calc(22 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_appraised--wrap dt {
font-size: calc(20 * (100vw / 980));
text-align: center;
}
}
@media screen and (min-width: 980px) {
.p-results-detail_appraised--wrap dt {
font-size: 20px;
font-size: 1.25rem;
}
}
.p-results-detail_appraised--wrap dt .emphasis {
background-color: #ffee00;
border-radius: 5px;
display: block;
font-size: calc(16 * (100vw / 520));
margin: 5px 0 0;
padding: 2px 15px;
}
@media screen and (min-width: 520px) {
.p-results-detail_appraised--wrap dt .emphasis {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_appraised--wrap dt .emphasis {
font-size: calc(14 * (100vw / 980));
text-align: center;
}
}
@media screen and (min-width: 980px) {
.p-results-detail_appraised--wrap dt .emphasis {
font-size: 14px;
font-size: 0.875rem;
}
}
.p-results-detail_appraised--wrap dd {
font-size: calc(49 * (100vw / 520));
font-weight: 700;
flex-grow: 1;
letter-spacing: .1rem;
text-align: right;
}
@media screen and (min-width: 520px) {
.p-results-detail_appraised--wrap dd {
font-size: calc(49 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-detail_appraised--wrap dd {
font-size: calc(47 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-detail_appraised--wrap dd {
font-size: 47px;
font-size: 2.9375rem;
}
}
.p-results-detail_appraised--wrap dd .int {
color: #f17989;
font-family: "Lato", serif;
}
.p-results-detail_appraised--wrap dd .yen,
.p-results-detail_appraised--wrap dd .minutes {
font-size: 50%;
font-weight: 700;
}
.p-results-detail_brokenitem {
margin: 25px 0 0;
}
.p-results-feature--wrap {
margin: auto;
max-width: 1000px;
padding: 40px 0;
width: 96%;
}
@media screen and (min-width: 768px) {
.p-results-feature--wrap {
padding: 30px 0 40px;
}
}
.p-results-feature_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.p-results-feature_title {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-feature_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-feature_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.p-results-feature--container {
margin: 35px 0 0;
max-height: 10rem;
overflow: hidden;
position: relative;
transition: .4s;
}
.p-results-feature--container::after {
background: linear-gradient(0deg, #f7f7f7 25%, rgba(247, 247, 247, 0) 100%);
content: '';
display: block;
height: 5rem;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
opacity: 1;
visibility: visible;
transition: .4s;
}
.p-results-feature--textarea {
font-size: calc(18 * (100vw / 520));
line-height: 1.8;
}
@media screen and (min-width: 520px) {
.p-results-feature--textarea {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-feature--textarea {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-feature--textarea {
font-size: 16px;
font-size: 1rem;
}
}
.p-results-feature--more label {
background: url(//www.7-7maruka.com/kanri/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;
}
.p-results-feature--more label:hover {
background-color: #6889a9;
}
.p-results-feature--check:checked + .p-results-feature--container {
max-height: 999vh;
transition: .4s;
}
.p-results-feature--check:checked + .p-results-feature--container::after {
opacity: 0;
visibility: hidden;
transition: .4s;
}
.p-results-feature--check:checked ~ .p-results-feature--more label {
transform: rotate(-180deg);
}
.p-results-recommend {
background-color: #f0f0f0;
}
.p-results-recommend--wrap {
margin: auto;
padding: 40px 0;
width: 100%;
}
@media screen and (min-width: 768px) {
.p-results-recommend--wrap {
padding: 30px 0 40px;
}
}
.p-results-recommend_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.p-results-recommend_title {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-recommend_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-recommend_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.p-results-recommend_title .reduce {
display: block;
font-size: 80%;
margin: 3px auto 0;
text-align: center;
}
.p-results-recommend_list {
margin: auto;
margin: 30px auto 0;
width: 100%;
}
.p-results-recommend_list article {
padding: 0 5px;
position: relative;
transition: .4s;
}
@media screen and (min-width: 980px) {
.p-results-recommend_list article {
padding: 0 10px;
}
}
.p-results-recommend_list article a {
background-color: #fff;
border-radius: 5px;
display: block;
height: 100%;
overflow: hidden;
}
.p-results-recommend_list article a:hover {
background-color: #e5f2ff;
}
.p-results-recommend_list article figure {
height: 100%;
display: flex;
flex-direction: column;
}
.p-results-recommend_list article figure picture {
background-color: #fff;
display: block;
height: 155px;
text-align: center;
}
.p-results-recommend_list article figure picture img {
object-fit: cover;
height: 100%;
margin: auto;
}
.p-results-recommend_list article figure figcaption {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 15px 5%;
}
.p-results-recommend_list article .date {
color: #929292;
font-family: "Lato", serif;
font-size: calc(16 * (100vw / 520));
font-weight: 700;
}
@media screen and (min-width: 520px) {
.p-results-recommend_list article .date {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-recommend_list article .date {
font-size: calc(12 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-recommend_list article .date {
font-size: 12px;
font-size: 0.75rem;
}
}
.p-results-recommend_list article .brandname {
color: #394656;
flex-grow: 1;
font-size: calc(18 * (100vw / 520));
margin: 10px 0 0;
line-height: 1.2;
height: calc(41 * (100vw / 520));
overflow: hidden;
}
@media screen and (min-width: 520px) {
.p-results-recommend_list article .brandname {
font-size: calc(18 * (100vw / 768));
height: calc(39 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-recommend_list article .brandname {
font-size: calc(16 * (100vw / 980));
height: calc(39 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-recommend_list article .brandname {
font-size: 16px;
font-size: 1rem;
height: 39px;
}
}
.p-results-recommend_list article .amount {
display: flex;
align-items: baseline;
justify-content: center;
font-size: calc(14 * (100vw / 520));
margin: 15px 0 0;
}
@media screen and (min-width: 520px) {
.p-results-recommend_list article .amount {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-recommend_list article .amount {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-recommend_list article .amount {
font-size: 14px;
font-size: 0.875rem;
}
}
.p-results-recommend_list article .tilde {
color: #f17989;
font-size: calc(20 * (100vw / 520));
font-weight: 700;
}
@media screen and (min-width: 520px) {
.p-results-recommend_list article .tilde {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-recommend_list article .tilde {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-recommend_list article .tilde {
font-size: 20px;
font-size: 1.25rem;
}
}
.p-results-recommend_list article .int {
color: #f17989;
font-family: "Lato", serif;
font-size: calc(29 * (100vw / 520));
font-weight: 700;
letter-spacing: .07rem;
}
@media screen and (min-width: 520px) {
.p-results-recommend_list article .int {
font-size: calc(29 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-results-recommend_list article .int {
font-size: calc(25 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-results-recommend_list article .int {
font-size: 25px;
font-size: 1.5625rem;
}
}
.p-results-recommend_list article .yen {
color: #394656;
}
.p-results-recommend_list .arrow {
background: url(//www.7-7maruka.com/kanri/images/common/icon-triangle01.svg) center no-repeat;
background-size: 12px;
background-color: #81A6C9;
border-radius: 100%;
cursor: pointer;
display: block;
width: 30px;
height: 30px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
z-index: 2;
}
@media screen and (min-width: 980px) {
.p-results-recommend_list .arrow {
background-size: 18px;
width: 50px;
height: 50px;
}
}
.p-results-recommend_list .arrow.prev {
transform: rotate(90deg);
left: 3vw;
}
.p-results-recommend_list .arrow.next {
transform: rotate(-90deg);
right: 3vw;
}
.p-results-recommend_btn {
margin: 50px 0 0;
}