@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");  @font-face {
font-family: YuGothicM;
src: local("Yu Gothic Medium");
}  html {
font-size: 100%;
line-height: 1.5em;
}  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;
word-break: break-all;
} 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;
}
}  .l-main {
position: relative;
}  .c-basic-h2 {
color: #80C6C4;
font-size: 35px;
font-size: 2.1875rem;
font-weight: 300;
line-height: 1.2;
letter-spacing: .3rem;
}
@media screen and (min-width: 840px) { .c-basic-h2 {
font-size: 50px;
font-size: 3.125rem;
}
}
@media screen and (min-width: 980px) { .c-basic-h2 {
font-size: 80px;
font-size: 5rem;
}
} .c-basic-h2.vertical {
line-height: 1.1;
transform: rotate(90deg);
} .c-basic-h2--gap {
display: block;
margin: 0 0 0 10rem;
} .c-basic-h3 {
color: #80C6C4;
font-size: 32px;
font-size: 2rem;
font-weight: 300;
line-height: 1.2;
} .c-basic-h3 span {
color: #AA8E76;
display: block;
font-size: 18px;
font-size: 1.125rem;
font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin: 0 0 10px;
padding: 0 0 0 30px;
position: relative;
} .c-basic-h3 span::before {
background-color: #80C6C4;
content: "";
display: block;
height: 2px;
width: 20px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}  .c-basic-txt,
.c-error-message,
.p-jewelry-features--wrap .content ul li,
.p-jewelry-features--wrap .content ol li,
.p-jewelry-features_block--wrap .content ul li,
.p-jewelry-features_block--wrap .content ol li {
color: #394656;
word-wrap: break-word;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 6px;
margin-bottom: 0.375rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
@media screen and (min-width: 980px) { .c-basic-txt,
.c-error-message,
.p-jewelry-features--wrap .content ul li,
.p-jewelry-features--wrap .content ol li,
.p-jewelry-features_block--wrap .content ul li,
.p-jewelry-features_block--wrap .content ol li {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 12px;
margin-bottom: 0.75rem;
line-height: 2;
}
} .c-basic-txt:last-of-type,
.c-error-message:last-of-type,
.p-jewelry-features--wrap .content ul li:last-of-type,
.p-jewelry-features--wrap .content ol li:last-of-type,
.p-jewelry-features_block--wrap .content ul li:last-of-type,
.p-jewelry-features_block--wrap .content ol li:last-of-type {
margin-bottom: 0;
} .c-small-txt {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 3px;
margin-bottom: 0.18rem;
font-size: 12px;
font-size: 0.75rem;
line-height: 24px;
line-height: 1.5rem;
}
@media screen and (min-width: 980px) { .c-small-txt {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 6px;
margin-bottom: 0.375rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
} .c-small-txt:last-of-type {
margin-bottom: 0;
} .c-error-message {
display: inline-block;
color: #e74c3c;
margin-top: .5rem;
}  .c-basic-btn {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg) no-repeat center right 10px;
background-size: 15px 15px;
background-color: #81a6c9;
border-radius: 5px;
cursor: pointer;
display: inline-block;
max-width: 90%;
padding: 10px 15px 15px;
transition: .3s;
text-align: center;
width: 100%;
}
@media screen and (min-width: 576px) { .c-basic-btn {
padding: 20px 15px 22px;
max-width: 320px;
}
} .c-basic-btn.green {
background-color: #4EB5B9;
} .c-basic-btn.purple {
background-color: #9277c4;
} .c-basic-btn.red {
background-color: #ad7597;
} .c-basic-btn .in {
color: #ffffff;
display: inline-block;
font-weight: bold;
font-size: calc(22 * (100vw / 768));
width: 100%;
}
@media screen and (min-width: 576px) { .c-basic-btn .in {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-basic-btn .in {
font-size: 14px;
font-size: 0.875rem;
}
} .c-basic-btn:hover {
box-shadow: 0px 0px 15px -5px #777777;
}  .c-btn-popup .c-btn-popup--open {
cursor: pointer;
} .c-btn-popup .c-btn-popup--open:hover {
opacity: 0.7;
} .c-btn-popup .c-btn-popup--overlay,
.c-btn-popup--close-overlay {
display: none;
} .c-btn-popup input {
display: none;
} .c-btn-popup input:checked ~ .c-btn-popup--overlay {
display: block;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
} .c-btn-popup input:checked ~ .c-btn-popup--close-overlay {
display: block;
background-color: #00000070;
cursor: pointer;
position: fixed;
height: 100vh;
top: 0;
left: 0;
width: 100%;
z-index: 99998;
} .c-btn-popup .c-btn-popup--window {
width: 90%;
max-width: 720px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} .c-btn-popup .c-btn-popup--close {
background: #000000;
border-radius: 100%;
cursor: pointer;
position: absolute;
top: -10px;
right: -10px;
width: 40px;
height: 40px;
padding: 11px;
}  .c-txtarea {
resize: none;
width: 100%;
height: 10rem;
padding: .5rem;
border: 0;
border: 1px solid #dddddd;
border-radius: 4px;
background-color: #fafafa;
font-size: 16px;
font-size: 1rem;
color: #555555;
font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
} .c-txtarea::placeholder {
color: #cccccc;
} .c-txtarea.is-entered {
background-color: #ffffff;
}  .c-drawer {
display: block;
height: 0;
} .c-drawer.drawer-open {
position: relative;
z-index: auto;
} .c-drawer.drawer-open .c-drawer-innerbutton {
visibility: visible;
opacity: 1;
transition: .4;
}
@media screen and (min-width: 980px) { .c-drawer.drawer-close .c-drawer-innerbutton {
visibility: hidden;
opacity: 0;
transition: .4;
}
} .c-drawer .c-drawer-button {
background-color: #81A6C9;
border-radius: 100%;
box-sizing: border-box;
top: 6px;
right: 10px;
width: 45px;
height: 45px;
z-index: 97;
}
@media screen and (min-width: 840px) { .c-drawer .c-drawer-button {
top: 30px;
width: 55px;
height: 55px;
}
} .c-drawer .c-drawer-innerbutton {
top: 11px;
right: 22px;
z-index: 102;
} .c-drawer-label {
color: #fff;
font-size: 10px;
font-size: 0.625rem;
position: absolute;
left: 0;
right: 0;
bottom: 12px;
margin: auto;
} .c-drawer-label::before {
content: 'menu';
display: block;
position: absolute;
left: 0;
width: 100%;
top: -10px;
text-align: center;
} .c-drawer-mypage {
padding: 20px;
} .c-drawer-mypage .link {
background: #f9dad6;
border-radius: 5px;
padding: 15px 10px;
display: block;
text-align: center;
max-width: 450px;
width: 100%;
} .c-drawer-mypage .link:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-drawer-mypage .link .in {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-mypage.webp) no-repeat center left;
background-size: 20px 20px;
color: #394656;
display: inline-block;
padding: 5px 5px 5px 25px;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .c-drawer-mypage .link .in {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-mypage .link .in {
font-size: 15px;
font-size: 0.9375rem;
}
} .c-drawer-manip {
background: #f0f0f0;
} .c-drawer-manip--wrap {
padding: 30px 20px;
} .c-drawer-manip--ttl {
text-align: center;
margin-bottom: 20px;
} .c-drawer-manip--ttl .in {
display: block;
color: #394656;
} .c-drawer-manip--ttl .sub {
display: inline-block;
font-size: calc(25 * (100vw / 768));
font-weight: bold;
position: relative;
letter-spacing: 1px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-drawer-manip--ttl .sub {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-manip--ttl .sub {
font-size: 16px;
font-size: 1rem;
}
} .c-drawer-manip--ttl .sub::before {
content: '';
background: #FFEE6B;
display: block;
transform: rotate(60deg);
position: absolute;
bottom: 7px;
left: -22px;
width: 20px;
height: 2px;
} .c-drawer-manip--ttl .sub::after {
content: '';
background: #FFEE6B;
display: block;
transform: rotate(-60deg);
position: absolute;
bottom: 7px;
right: -22px;
width: 20px;
height: 2px;
} .c-drawer-manip--ttl .main {
display: block;
font-size: calc(36 * (100vw / 768));
font-weight: bold;
position: relative;
letter-spacing: 1px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-drawer-manip--ttl .main {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-manip--ttl .main {
font-size: 24px;
font-size: 1.5rem;
}
} .c-drawer-manip--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -5px;
} .c-drawer-manip--item {
width: 50%;
padding: 0 5px 5px;
} .c-drawer-manip--item .link {
display: block;
background: #81A6C9;
border-radius: 5px;
padding: 10px 5px;
text-align: center;
width: 100%;
} .c-drawer-manip--item .link:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-drawer-manip--item .link .in {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp) no-repeat left center;
background-size: 20px 20px;
color: #394656;
display: inline-block;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
padding: 5px 5px 5px 25px;
position: relative;
letter-spacing: 1px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-drawer-manip--item .link .in {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-manip--item .link .in {
font-size: 15px;
font-size: 0.9375rem;
}
} .c-drawer-manip--item .link img {
width: 100%;
height: auto;
max-height: 42px;
} .c-drawer-manip--item .link.counter {
background: #b7d5cd;
} .c-drawer-manip--item .link.counter .in {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp);
} .c-drawer-manip--item .link.line {
background: #0abf7d;
display: inline-block;
padding: 6px 5px;
} .c-drawer-manip--item .link.delivery {
background: #f9dad6;
} .c-drawer-manip--item .link.delivery .in {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-delivery-short.webp);
} .c-drawer-manip--item .link.bulgeout {
background: #83c5e8;
} .c-drawer-manip--item .link.bulgeout .in {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-trip-short.webp);
} .c-drawer-brand {
background: #F7F7F7;
} .c-drawer-brand--wrap {
padding: 30px 20px;
} .c-drawer-brand--ttl {
text-align: center;
margin-bottom: 20px;
} .c-drawer-brand--ttl .in {
display: block;
color: #394656;
} .c-drawer-brand--ttl .sub {
display: inline-block;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
position: relative;
letter-spacing: 1px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-drawer-brand--ttl .sub {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-brand--ttl .sub {
font-size: 15px;
font-size: 0.9375rem;
}
} .c-drawer-brand--ttl .sub::before {
content: '';
background: #FFEE6B;
display: block;
transform: rotate(60deg);
position: absolute;
bottom: 7px;
left: -22px;
width: 20px;
height: 2px;
} .c-drawer-brand--ttl .sub::after {
content: '';
background: #FFEE6B;
display: block;
transform: rotate(-60deg);
position: absolute;
bottom: 7px;
right: -22px;
width: 20px;
height: 2px;
} .c-drawer-brand--ttl .main {
display: block;
font-size: calc(36 * (100vw / 768));
font-weight: bold;
position: relative;
letter-spacing: 1px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-drawer-brand--ttl .main {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-brand--ttl .main {
font-size: 24px;
font-size: 1.5rem;
}
} .c-drawer-brand--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -5px;
} .c-drawer-brand--item {
padding: 0 5px 5px;
width: 50%;
} .c-drawer-brand--item:first-of-type {
width: 100%;
} .c-drawer-brand--link {
display: block;
width: 100%;
} .c-drawer-brand--link:hover .photo {
box-shadow: 0px 0px 15px -5px #777777;
} .c-drawer-brand--link .photo {
background: #ffffff;
border-radius: 5px;
text-align: center;
padding: 3px;
} .c-drawer-brand--link .photo img {
display: inline-block;
width: 100%;
max-height: 70px;
} .c-drawer-brand--link .text {
color: #394656;
display: inline-block;
font-size: calc(22 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .c-drawer-brand--link .text {
padding-top: 5px;
padding-bottom: 10px;
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-brand--link .text {
font-size: 14px;
font-size: 0.875rem;
}
} .c-drawer-item {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -10px;
} .c-drawer-item.main {
padding: 30px 0 10px;
} .c-drawer-item--item {
padding: 0 5px 5px;
width: 50%;
} .c-drawer-item--nav {
display: block;
width: 100%;
} .c-drawer-item--nav:hover .c-drawer-item--photo {
box-shadow: 0px 0px 15px -5px #777777;
} .c-drawer-item--photo {
background: #ffffff;
border-radius: 5px;
text-align: center;
padding: 3px;
} .c-drawer-item--photo img {
display: inline-block;
width: 100%;
max-height: 70px;
} .c-drawer-item--title .in {
color: #394656;
display: inline-block;
font-size: calc(22 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .c-drawer-item--title .in {
padding-top: 5px;
padding-bottom: 10px;
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-item--title .in {
font-size: 14px;
font-size: 0.875rem;
}
} .c-drawer-info {
background: #efece4;
} .c-drawer-info--wrap {
padding: 30px 20px;
} .c-drawer-info--ttl {
text-align: center;
margin-bottom: 20px;
} .c-drawer-info--ttl .in {
display: block;
color: #394656;
} .c-drawer-info--ttl .sub {
display: inline-block;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
position: relative;
letter-spacing: 1px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-drawer-info--ttl .sub {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-info--ttl .sub {
font-size: 15px;
font-size: 0.9375rem;
}
} .c-drawer-info--ttl .sub::before {
content: '';
background: #FFEE6B;
display: block;
transform: rotate(60deg);
position: absolute;
bottom: 7px;
left: -22px;
width: 20px;
height: 2px;
} .c-drawer-info--ttl .sub::after {
content: '';
background: #FFEE6B;
display: block;
transform: rotate(-60deg);
position: absolute;
bottom: 7px;
right: -22px;
width: 20px;
height: 2px;
} .c-drawer-info--ttl .main {
display: block;
font-size: calc(36 * (100vw / 768));
font-weight: bold;
position: relative;
letter-spacing: 1px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-drawer-info--ttl .main {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-info--ttl .main {
font-size: 24px;
font-size: 1.5rem;
}
} .c-drawer-info--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -5px;
} .c-drawer-info--item {
padding: 0 5px 10px;
width: 50%;
} .c-drawer-info--link {
background: #81a6c9;
border-radius: 5px;
border: 3px solid #ffffff;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
padding: 0 10px;
min-height: 50px;
} .c-drawer-info--link:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-drawer-info--link .in {
color: #ffffff;
display: inline-block;
background: url(//www.7-7maruka.com/kanri/images/common/icon-first-nav.png) no-repeat left center;
background-size: 20px 20px;
font-size: calc(18 * (100vw / 768));
font-weight: bold;
width: 100%;
padding: 10px 0 9px 30px;
}
@media screen and (min-width: 576px) { .c-drawer-info--link .in {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-drawer-info--link .in {
font-size: 12px;
font-size: 0.75rem;
}
} .c-drawer-info--link.beginners .in {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-first-nav.png);
} .c-drawer-info--link.merit .in {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-reason-nav.png);
} .c-drawer-info--link.voice .in {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-voice-nav.png);
} .c-drawer-info--link.qa .in {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-qa-nav.png);
} .c-drawer-info--link.customer .in {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-center.png);
} .c-drawer-info--link.magazine .in {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-column.png);
} .c-drawer-event {
padding: 30px 20px;
} .c-drawer-event--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -5px;
} .c-drawer-event li {
padding: 0 5px 10px;
width: 50%;
} .c-drawer-event li:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-drawer-event li img {
height: auto;
}  .c-drawer-input {
display: none;
} .c-drawer-btn {
display: block;
text-align: center;
width: 100%;
} .c-drawer-btn--icon {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-down-w.svg) center no-repeat;
background-size: 35%;
background-color: #81A6C9;
border-radius: 100%;
display: inline-block;
width: 50px;
height: 50px;
} .c-drawer-content {
visibility: hidden;
opacity: 0;
max-height: 0;
transition: .4s;
padding: 10px 0;
} .c-drawer-input:checked ~ .c-drawer-btn .c-drawer-btn--icon {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-top-w.svg);
} .c-drawer-input:checked ~ .c-drawer-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
transition: .4s;
} .drawer-nav {
top: 0;
max-width: 400px;
width: 90vw;
z-index: 101;
} .c-drawer-nav--wrap {
padding: 55px 0;
} .drawer--right .drawer-nav {
background-color: rgba(0, 0, 0, 0.6);
right: -90vw;
right: -webkit-calc(-100vw + 43px);
right: calc(-100vw + 43px);
} .drawer-overlay {
height: 100vh;
top: 0;
z-index: 99;
} .drawer--right .drawer-open .drawer-nav {
background-color: #fff;
right: 0;
} .drawer-hamburger {
padding: 12px 0.5rem 26px;
top: 25px;
}
@media screen and (min-width: 840px) { .drawer-hamburger {
padding: 17px 0.75rem 29px;
}
} .drawer-hamburger-icon {
margin: 10px 10%;
height: 0;
width: 80%;
} .drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
background-color: #fff;
} .drawer-hamburger-icon:after {
top: 0;
} .drawer-open .c-drawer-label {
color: #ffffff;
bottom: 6px;
} .drawer-open .c-drawer-label::before {
content: 'close';
} .drawer-open .drawer-hamburger-icon,
.drawer-open .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before {
background-color: #ffffff;
} .slick-next {
right: -20px;
}  .c-results {
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .c-results {
padding: 60px 0;
}
} .c-results ~ .c-priorityitem {
padding: 0 0 30px;
}
@media screen and (min-width: 840px) { .c-results ~ .c-priorityitem {
padding: 0 0 60px;
}
} .c-results--title {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results--title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results--title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-results_itemlist {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10px;
row-gap: 20px;
padding-bottom: 20px;
margin: 0 auto;
}
@media screen and (min-width: 840px) { .c-results_itemlist {
column-gap: 15px;
row-gap: 20px;
padding: 0 20px 20px;
}
}
@media screen and (min-width: 1211px) { .c-results_itemlist {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
max-width: 90%;
}
} .c-results_itemlist > li {
max-width: 168px;
margin: 0 auto;
width: 100%;
} .c-results_itemlist > li a {
display: block;
height: 100%;
border-bottom: 1px dotted #d3d3d3;
padding: 0 0 13px;
} .c-results_itemlist > li figure {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
height: 100%;
} .c-results_itemlist > li figure img {
aspect-ratio: 1.5 /1;
object-fit: cover;
} .c-results_itemlist > li figure figcaption {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
flex-grow: 1;
} .c-results_itemlist > li figure figcaption .series {
flex-grow: 1;
font-size: calc(21 * (100vw / 768));
letter-spacing: .05em;
line-height: 1.2;
margin: 6px auto 0;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results_itemlist > li figure figcaption .series {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist > li figure figcaption .series {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4;
margin: 14px auto 0;
}
} .c-results_itemlist > li figure figcaption .number {
font-size: calc(18 * (100vw / 768));
margin: 5px auto 0;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results_itemlist > li figure figcaption .number {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist > li figure figcaption .number {
font-size: 12px;
font-size: 0.75rem;
}
} .c-results_itemlist > li figure figcaption .amount {
color: #ed99a4;
font-family: "Lato", sans-serif;
font-size: calc(23 * (100vw / 768));
font-weight: bold;
letter-spacing: .05em;
margin: 5px auto 0;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results_itemlist > li figure figcaption .amount {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist > li figure figcaption .amount {
font-size: 16px;
font-size: 1rem;
}
} .c-results_itemlist > li figure figcaption .amount .unit {
color: #394656;
font-size: calc(15 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-results_itemlist > li figure figcaption .amount .unit {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist > li figure figcaption .amount .unit {
font-size: 12px;
font-size: 0.75rem;
}
} .c-results_itemlist--more {
margin: calc(16 * (100vw / 768)) auto 0;
max-width: 280px;
text-align: center;
}
@media screen and (min-width: 840px) { .c-results_itemlist--more {
margin: 16px auto 0;
}
} .c-results_itemlist--more p {
background-color: #83c5e8;
border-radius: 50px;
color: #fff;
display: block;
font-weight: bold;
font-size: calc(26 * (100vw / 768));
letter-spacing: .1rem;
padding: 10px calc(33 * (100vw / 768)) 10px 18px;
position: relative;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results_itemlist--more p {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist--more p {
font-size: 13px;
font-size: 0.8125rem;
padding: 16px calc(33 * (100vw / 768)) 16px 18px;
}
}
@media screen and (min-width: 980px) { .c-results_itemlist--more p {
padding: 16px 22px 16px 18px;
}
} .c-results_itemlist--more p:hover {
cursor: pointer;
} .c-results_itemlist--more p:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(134deg);
transform: rotate(134deg);
position: absolute;
top: 0;
bottom: 0;
right: calc(22 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 980px) { .c-results_itemlist--more p:before {
right: 15px;
}
} .c-results-ser--btn {
text-align: center;
} .c-results-ser--btn a {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg) no-repeat center right 10px;
background-size: 15px 15px;
background-color: #81a6c9;
border-radius: 5px;
display: inline-block;
cursor: pointer;
max-width: 90%;
padding: 20px 15px 22px;
transition: .3s;
text-align: center;
width: 100%;
color: #ffffff;
font-weight: bold;
font-size: calc(22 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-results-ser--btn a {
font-size: calc(14 * (100vw / 768));
max-width: 320px;
}
}
@media screen and (min-width: 840px) { .c-results-ser--btn a {
font-size: 14px;
font-size: 0.875rem;
}
} .c-results-ser--btn a p {
color: #ffffff;
} .c-results .add {
margin: 0 auto 40px;
}
@media screen and (min-width: 840px) { .c-results .add {
margin: 0 auto 55px;
}
}  .c-purchase_brand {
background: #f0f0f0;
padding: 35px 0 5px;
}
@media screen and (min-width: 840px) { .c-purchase_brand {
padding: 60px 0;
}
} .c-purchase_brand--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-purchase_brand--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-purchase_brand--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-purchase_brand--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-purchase_brand--list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 10px;
}
@media screen and (min-width: 576px) { .c-purchase_brand--list {
row-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width: 840px) { .c-purchase_brand--item {
padding: 0 10px 30px;
}
} .c-purchase_brand--link {
transition: .3s;
} .c-purchase_brand--link:hover {
opacity: 0.7;
} .c-purchase_brand--link .photo {
background: #ffffff;
padding: 0 10px;
text-align: center;
}
@media screen and (min-width: 840px) { .c-purchase_brand--link .photo {
padding: 0 10px;
}
} .c-purchase_brand--link img {
display: inline-block;
width: 100%;
height: 50px;
}
@media screen and (min-width: 840px) { .c-purchase_brand--link img {
height: 100px;
}
} .c-purchase_brand--link .text {
color: #394656;
display: inline-block;
font-size: calc(21 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .c-purchase_brand--link .text {
padding-top: 15px;
padding-bottom: 10px;
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-purchase_brand--link .text {
font-size: 14px;
font-size: 0.875rem;
}
} .c-purchase_brand--more {
margin: 20px auto 0;
} .c-purchase_brand--more .c-purchase_brand--list {
max-height: 4vh;
overflow: hidden;
transition: .4s;
} .c-purchase_brand--more input[name="brandlist_more"] {
display: none;
} .c-purchase_brand--more input[name="brandlist_more"]:checked + .c-purchase_brand--list {
max-height: 999vh;
transition: .4s;
} .c-purchase_brand--more input[name="brandlist_more"]:checked ~ .c-purchase_brand--morebtn {
margin: 0;
} .c-purchase_brand--more input[name="brandlist_more"]:checked ~ .c-purchase_brand--morebtn label::before {
transform: rotate(-90deg);
transition: .4s;
} .c-purchase_brand--morebtn {
background: #f0f0f0;
background: linear-gradient(0deg, #f0f0f0 25%, rgba(240, 240, 240, 0) 100%);
margin: -20px 0 0;
position: relative;
} .c-purchase_brand--morebtn label::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg);
background-repeat: no-repeat;
background-position: center;
background-color: #81a6c9;
background-size: 35%;
border-radius: 100%;
content: '';
cursor: pointer;
display: block;
margin: auto;
width: 30px;
height: 30px;
transform: rotate(90deg);
transition: .4s;
z-index: 1;
}
@media screen and (min-width: 840px) { .c-purchase_brand--morebtn label::before {
width: 60px;
height: 60px;
}
}  .c-manip {
padding: 50px 0;
}
@media screen and (min-width: 840px) { .c-manip {
padding: 80px 0;
}
} .c-manip--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-manip-line {
padding-bottom: 20px;
}
@media screen and (min-width: 840px) { .c-manip-line {
padding-bottom: 50px;
}
} .c-manip-line--ttl {
text-align: center;
} .c-manip-line--ttl .in {
color: #394656;
display: inline-block;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
position: relative;
letter-spacing: 1px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-manip-line--ttl .in {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-manip-line--ttl .in {
font-size: 20px;
font-size: 1.25rem;
}
} .c-manip-line--ttl .in::before {
content: '';
background: #0abf7d;
display: block;
transform: rotate(60deg);
position: absolute;
bottom: 24px;
left: -50px;
width: 50px;
height: 2px;
} .c-manip-line--ttl .in::after {
content: '';
background: #0abf7d;
display: block;
transform: rotate(-60deg);
position: absolute;
bottom: 24px;
right: -50px;
width: 50px;
height: 2px;
} .c-manip-line--btn {
text-align: center;
padding-top: 10px;
}
@media screen and (min-width: 980px) { .c-manip-line--btn {
padding-top: 30px;
}
} .c-manip-line--btn .line-btn {
background: #0abf7d;
border-radius: 5px;
display: inline-block;
max-width: 370px;
padding: 9px 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 980px) { .c-manip-line--btn .line-btn {
background: none;
border-radius: 0;
padding: 0;
}
} .c-manip-line--btn .line-btn:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-manip-line--btn .line-btn img {
border-radius: 5px;
background: #0abf7d;
display: none;
text-align: center;
width: 100%;
height: auto;
}
@media screen and (min-width: 980px) { .c-manip-line--btn .line-btn img {
display: inline-block;
}
} .c-manip-line--btn .line-btn .sp-text {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-line-w.svg) no-repeat left center;
background-size: 20px 20px;
color: #ffffff;
display: inline-block;
font-size: calc(23 * (100vw / 768));
font-weight: bold;
padding: 10px;
padding-left: 25px;
}
@media screen and (min-width: 576px) { .c-manip-line--btn .line-btn .sp-text {
font-size: calc(18 * (100vw / 768));
background-size: 30px 30px;
padding-left: 40px;
}
}
@media screen and (min-width: 980px) { .c-manip-line--btn .line-btn .sp-text {
display: none;
}
} .c-manip-kaitori--ttl {
text-align: center;
} .c-manip-kaitori--ttl .in {
color: #394656;
display: inline-block;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
position: relative;
letter-spacing: 3px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-manip-kaitori--ttl .in {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-manip-kaitori--ttl .in {
font-size: 20px;
font-size: 1.25rem;
}
} .c-manip-kaitori--ttl .in::before {
content: '';
background: #FEF07F;
display: block;
transform: rotate(60deg);
position: absolute;
bottom: 24px;
left: -50px;
width: 50px;
height: 2px;
} .c-manip-kaitori--ttl .in::after {
content: '';
background: #FEF07F;
display: block;
transform: rotate(-60deg);
position: absolute;
bottom: 24px;
right: -50px;
width: 50px;
height: 2px;
} .c-manip-kaitori--btn {
padding-top: 10px;
}
@media screen and (min-width: 980px) { .c-manip-kaitori--btn {
padding-top: 30px;
}
} .c-manip-kaitori--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
margin: 0 -5px;
}
@media screen and (min-width: 576px) { .c-manip-kaitori--list {
margin: 0 -15px;
}
} .c-manip-kaitori--item {
text-align: center;
width: 33.3%;
padding: 0 5px;
}
@media screen and (min-width: 576px) { .c-manip-kaitori--item {
padding: 0 15px;
}
} .c-manip-kaitori .link {
background: #B7D5CD;
border-radius: 5px;
display: inline-block;
max-width: 370px;
padding: 9px 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 576px) { .c-manip-kaitori .link {
padding: 10px;
}
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link {
background: none;
padding: 0;
}
} .c-manip-kaitori .link:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-manip-kaitori .link img {
border-radius: 5px;
background: #0abf7d;
display: none;
width: 100%;
height: auto;
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link img {
display: inline-block;
}
} .c-manip-kaitori .link.shop {
background: #B7D5CD;
} .c-manip-kaitori .link.shop img, .c-manip-kaitori .link.shop .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp);
background-color: #B7D5CD;
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link.shop img, .c-manip-kaitori .link.shop .sp-text {
background: none;
}
} .c-manip-kaitori .link.delivery {
background: #F9DAD6;
} .c-manip-kaitori .link.delivery img, .c-manip-kaitori .link.delivery .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-delivery-short.webp);
background-color: #F9DAD6;
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link.delivery img, .c-manip-kaitori .link.delivery .sp-text {
background: none;
}
} .c-manip-kaitori .link.trip {
background: #83C5E8;
} .c-manip-kaitori .link.trip img, .c-manip-kaitori .link.trip .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-trip-short.webp);
background-color: #83C5E8;
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link.trip img, .c-manip-kaitori .link.trip .sp-text {
background: none;
}
} .c-manip-kaitori .link .sp-text {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp) no-repeat left center;
background-size: 20px 20px;
color: #394656;
display: inline-block;
font-size: calc(22 * (100vw / 768));
font-weight: bold;
padding: 10px;
padding-left: 25px;
}
@media screen and (min-width: 576px) { .c-manip-kaitori .link .sp-text {
font-size: calc(18 * (100vw / 768));
background-size: 30px 30px;
padding-left: 40px;
}
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link .sp-text {
display: none;
}
}  .c-sub-nav {
background: rgba(247, 247, 247, 0.95);
padding: 10px;
width: 100%;
}
@media screen and (min-width: 840px) { .c-sub-nav {
padding: 50px 10px;
}
}
@media screen and (min-width: 980px) { .c-sub-nav {
padding: 0 10px 50px 60px;
background: none;
}
} .c-sub-nav--box {
padding-top: 5px;
}
@media screen and (min-width: 980px) { .c-sub-nav--box {
padding: 0 0 30px;
}
} .c-sub-nav--box:first-of-type {
padding-top: 0;
} .c-sub-nav--ttl {
font-size: calc(27 * (100vw / 768));
font-weight: bold;
display: none;
padding-bottom: 5px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-sub-nav--ttl {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-sub-nav--ttl {
font-size: 18px;
font-size: 1.125rem;
padding-bottom: 20px;
}
}
@media screen and (min-width: 980px) { .c-sub-nav--ttl {
display: block;
text-align: left;
}
} .c-sub-nav--list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
}
@media screen and (min-width: 980px) { .c-sub-nav--list {
grid-template-columns: 1fr;
}
} .c-sub-nav--item {
text-align: center;
width: 100%;
} .c-sub-nav--item .link {
background: #B7D5CD;
border-radius: 5px;
display: inline-block;
max-width: 370px;
padding: 2px 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 576px) { .c-sub-nav--item .link {
padding: 10px;
}
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link {
background: none;
padding: 0;
}
} .c-sub-nav--item .link:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-sub-nav--item .link img {
border-radius: 5px;
display: none;
max-width: 260px;
width: 100%;
height: auto;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link img {
display: inline-block;
}
} .c-sub-nav--item .link .sp-text {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp) no-repeat left center;
background-size: 20px 20px;
color: #394656;
display: inline-block;
font-size: calc(22 * (100vw / 768));
font-weight: bold;
padding: 8px;
padding-left: 25px;
}
@media screen and (min-width: 576px) { .c-sub-nav--item .link .sp-text {
font-size: calc(15 * (100vw / 768));
background-size: 30px 30px;
padding-left: 40px;
}
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link .sp-text {
display: none;
}
} .c-sub-nav--item .link.line {
background: #0abf7d;
} .c-sub-nav--item .link.line img {
background: #0abf7d;
} .c-sub-nav--item .link.line .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-tel-w.webp);
background-color: #0abf7d;
color: #ffffff;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.line .sp-text {
background: none;
}
} .c-sub-nav--item .link.tel {
background: #ED99A4;
} .c-sub-nav--item .link.tel img {
background: #ED99A4;
} .c-sub-nav--item .link.tel .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-tel-w.webp);
background-color: #ED99A4;
color: #ffffff;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.tel .sp-text {
background: none;
}
} .c-sub-nav--item .link.mail {
background: #81A6C9;
} .c-sub-nav--item .link.mail img {
background: #81A6C9;
} .c-sub-nav--item .link.mail .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-mail-w.webp);
background-color: #81A6C9;
color: #ffffff;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.mail .sp-text {
background: none;
}
} .c-sub-nav--item .link.shop {
background: #B7D5CD;
} .c-sub-nav--item .link.shop img {
background: #B7D5CD;
} .c-sub-nav--item .link.shop .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp);
background-color: #B7D5CD;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.shop .sp-text {
background: none;
}
} .c-sub-nav--item .link.delivery {
background: #F9DAD6;
} .c-sub-nav--item .link.delivery img {
background: #F9DAD6;
} .c-sub-nav--item .link.delivery .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-delivery-short.webp);
background-color: #F9DAD6;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.delivery .sp-text {
background: none;
}
} .c-sub-nav--item .link.trip {
background: #83C5E8;
} .c-sub-nav--item .link.trip img {
background: #83C5E8;
} .c-sub-nav--item .link.trip .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-trip-short.webp);
background-color: #83C5E8;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.trip .sp-text {
background: none;
}
}  .c-purchase_item {
padding: 35px 0 5px;
}
@media screen and (min-width: 840px) { .c-purchase_item {
padding: 60px 0;
}
} .c-purchase_item--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-purchase_item--main {
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-purchase_item--main {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-purchase_item--main {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-purchase_item--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-purchase_item--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-purchase_item--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-purchase_item--list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(7, 0.5fr);
column-gap: 5px;
row-gap: 5px;
}
@media screen and (min-width: 576px) { .c-purchase_item--list {
grid-template-rows: repeat(7, 1fr);
}
}
@media screen and (min-width: 840px) { .c-purchase_item--list {
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(7, 1fr);
column-gap: 10px;
row-gap: 10px;
}
}
@media screen and (min-width: 980px) { .c-purchase_item--list {
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(5, 0.5fr);
column-gap: 20px;
row-gap: 20px;
}
} .c-purchase_item--item.type1 {
grid-area: 1 / 1 / 3 / 3;
} .c-purchase_item--item.type2 {
grid-area: 1 / 3 / 3 / 5;
} .c-purchase_item--item.type3 {
grid-area: 3 / 1 / 4 / 3;
} .c-purchase_item--item.type4 {
grid-area: 3 / 3 / 4 / 5;
} .c-purchase_item--item.type5 {
grid-area: 4 / 1 / 5 / 3;
} .c-purchase_item--item.type6 {
grid-area: 4 / 3 / 5 / 5;
} .c-purchase_item--item.type7 {
grid-area: 5 / 1 / 6 / 3;
} .c-purchase_item--item.type8 {
grid-area: 5 / 3 / 6 / 4;
} .c-purchase_item--item.type9 {
grid-area: 5 / 4 / 6 / 5;
} .c-purchase_item--item.type10 {
grid-area: 6 / 1 / 7 / 2;
} .c-purchase_item--item.type11 {
grid-area: 6 / 2 / 7 / 3;
} .c-purchase_item--item.type12 {
grid-area: 6 / 3 / 7 / 4;
} .c-purchase_item--item.type13 {
grid-area: 6 / 4 / 7 / 5;
} .c-purchase_item--item.type14 {
grid-area: 7 / 1 / 8 / 2;
} .c-purchase_item--item.type15 {
grid-area: 7 / 2 / 8 / 3;
} .c-purchase_item--item.type16 {
grid-area: 7 / 3 / 8 / 4;
} .c-purchase_item--item.type17 {
grid-area: 7 / 4 / 8 / 5;
}
@media screen and (min-width: 840px) { .c-purchase_item--item.type1 {
grid-area: 1 / 1 / 3 / 5;
} .c-purchase_item--item.type2 {
grid-area: 1 / 5 / 3 / 9;
} .c-purchase_item--item.type3 {
grid-area: 3 / 1 / 4 / 5;
} .c-purchase_item--item.type4 {
grid-area: 3 / 5 / 4 / 9;
} .c-purchase_item--item.type5 {
grid-area: 4 / 1 / 5 / 5;
} .c-purchase_item--item.type6 {
grid-area: 4 / 5 / 5 / 9;
} .c-purchase_item--item.type7 {
grid-area: 5 / 1 / 6 / 5;
} .c-purchase_item--item.type8 {
grid-area: 5 / 5 / 6 / 7;
} .c-purchase_item--item.type9 {
grid-area: 5 / 7 / 6 / 9;
} .c-purchase_item--item.type10 {
grid-area: 6 / 1 / 7 / 3;
} .c-purchase_item--item.type11 {
grid-area: 6 / 3 / 7 / 5;
} .c-purchase_item--item.type12 {
grid-area: 6 / 5 / 7 / 7;
} .c-purchase_item--item.type13 {
grid-area: 6 / 7 / 7 / 9;
} .c-purchase_item--item.type14 {
grid-area: 7 / 1 / 8 / 3;
} .c-purchase_item--item.type15 {
grid-area: 7 / 3 / 8 / 5;
} .c-purchase_item--item.type16 {
grid-area: 7 / 5 / 8 / 7;
} .c-purchase_item--item.type17 {
grid-area: 7 / 7 / 8 / 9;
}
}
@media screen and (min-width: 980px) { .c-purchase_item--item.type1 {
grid-area: 1 / 1 / 3 / 6;
} .c-purchase_item--item.type2 {
grid-area: 1 / 6 / 3 / 11;
} .c-purchase_item--item.type3 {
grid-area: 1 / 11 / 2 / 16;
} .c-purchase_item--item.type4 {
grid-area: 2 / 11 / 3 / 16;
} .c-purchase_item--item.type5 {
grid-area: 3 / 1 / 4 / 6;
} .c-purchase_item--item.type6 {
grid-area: 3 / 6 / 4 / 11;
} .c-purchase_item--item.type7 {
grid-area: 3 / 11 / 4 / 16;
} .c-purchase_item--item.type8 {
grid-area: 4 / 1 / 5 / 4;
} .c-purchase_item--item.type9 {
grid-area: 4 / 4 / 5 / 7;
} .c-purchase_item--item.type10 {
grid-area: 4 / 7 / 5 / 10;
} .c-purchase_item--item.type11 {
grid-area: 4 / 10 / 5 / 13;
} .c-purchase_item--item.type12 {
grid-area: 4 / 13 / 5 / 16;
} .c-purchase_item--item.type13 {
grid-area: 5 / 1 / 6 / 4;
} .c-purchase_item--item.type14 {
grid-area: 5 / 4 / 6 / 7;
} .c-purchase_item--item.type15 {
grid-area: 5 / 7 / 6 / 10;
} .c-purchase_item--item.type16 {
grid-area: 5 / 10 / 6 / 13;
} .c-purchase_item--item.type17 {
grid-area: 5 / 13 / 6 / 16;
}
} .c-purchase_item--nav {
background: #ffffff;
border-radius: 5px;
display: block;
padding: 5px;
height: 100%;
transition: .3s;
}
@media screen and (min-width: 576px) { .c-purchase_item--nav {
padding: 15px;
}
} .c-purchase_item--nav:hover {
box-shadow: 0px 0px 15px -5px rgba(100, 100, 100, 0.5);
} .c-purchase_item--photo img {
display: inline-block;
vertical-align: bottom;
background: #f7f7f7;
height: auto;
} .c-purchase_item--title {
text-align: left;
padding: 10px 0 5px;
} .c-purchase_item--title .in {
color: #394656;
display: inline-block;
font-size: calc(21 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .c-purchase_item--title .in {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-purchase_item--title .in {
font-size: 14px;
font-size: 0.875rem;
}
}  .c-shoplist {
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .c-shoplist {
padding: 60px 0;
}
} .c-shoplist--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-shoplist--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-shoplist--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-shoplist--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-shoplist-box.kanto {
margin-bottom: 30px;
}
@media screen and (min-width: 840px) { .c-shoplist-box.kanto {
margin-bottom: 50px;
}
} .c-shoplist-box.kansai .c-shoplist-box--ttl .in {
background-image: url(//www.7-7maruka.com/kanri/images/icon/title-style-pink.svg);
} .c-shoplist-box.kansai .c-shoplist-box--ttl .in::before {
border-color: #ed99a4;
} .c-shoplist-box.kansai .c-shoplist-box--list {
grid-template-columns: 1fr 1fr;
}
@media screen and (min-width: 840px) { .c-shoplist-box.kansai .c-shoplist-box--list {
grid-template-columns: 1fr 1fr 1fr;
}
} .c-shoplist-box--ttl {
margin-bottom: 10px;
}
@media screen and (min-width: 840px) { .c-shoplist-box--ttl {
margin-bottom: 20px;
}
} .c-shoplist-box--ttl .in {
background: url(//www.7-7maruka.com/kanri/images/icon/title-style-blue.svg) no-repeat center left;
background-size: 10px 20px;
display: block;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
padding-left: 20px;
position: relative;
} .c-shoplist-box--ttl .in::before {
content: '';
border-top: 2px dotted #83c5e8;
display: block;
position: absolute;
top: 50%;
right: 0;
width: calc(100% - 100px);
height: 1px;
}
@media screen and (min-width: 576px) { .c-shoplist-box--ttl .in::before {
width: calc(100% - 150px);
}
}
@media screen and (min-width: 576px) { .c-shoplist-box--ttl .in {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-shoplist-box--ttl .in {
font-size: 15px;
font-size: 0.9375rem;
}
} .c-shoplist-box--contents {
background: #e5e5e5;
border-radius: 5px;
padding: 10px;
}
@media screen and (min-width: 840px) { .c-shoplist-box--contents {
padding: 20px;
}
}
@media screen and (min-width: 840px) { .c-shoplist-box--contents {
padding: 30px;
}
} .c-shoplist-box--list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 10px;
}
@media screen and (min-width: 840px) { .c-shoplist-box--list {
grid-template-columns: 1fr 1fr;
}
} .c-shoplist-box--nav {
background: #ffffff;
border-radius: 5px;
display: block;
padding: 10px;
transition: .3s;
height: 100%;
}
@media screen and (min-width: 576px) { .c-shoplist-box--nav {
padding: 20px;
}
} .c-shoplist-box--nav:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-shoplist-box--photo {
border-radius: 5px;
overflow: hidden;
} .c-shoplist-box--photo img {
height: auto;
display: inline-block;
vertical-align: bottom;
width: 100%;
} .c-shoplist-box--title {
text-align: left;
padding: 10px 0 0;
}
@media screen and (min-width: 576px) { .c-shoplist-box--title {
padding: 15px 0 10px;
}
} .c-shoplist-box--title .in {
color: #394656;
display: inline-block;
font-size: calc(21 * (100vw / 768));
font-weight: bold;
line-height: 1.3;
}
@media screen and (min-width: 576px) { .c-shoplist-box--title .in {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-shoplist-box--title .in {
font-size: 14px;
font-size: 0.875rem;
}
}  .c-fqa {
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .c-fqa {
padding: 60px 0;
}
} .c-fqa--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-fqa--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-fqa--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-fqa--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 0;
}
} .c-fqa--container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
height: 80vh;
overflow-y: scroll;
}
@media screen and (min-width: 980px) { .c-fqa--container {
margin: 50px auto 0;
height: auto;
overflow-y: visible;
}
} .c-fqa_index {
display: none;
}
@media screen and (min-width: 980px) { .c-fqa_index {
display: block;
margin: 0 80px 0 0;
width: calc(40% - 80px);
}
} .c-fqa_index > li label {
display: inline-block;
font-size: calc(19 * (100vw / 768));
font-weight: 400;
padding: 10px 60px 10px 8px;
position: relative;
transition: .4s;
width: 100%;
}
@media screen and (min-width: 576px) { .c-fqa_index > li label {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-fqa_index > li label {
font-size: 16px;
font-size: 1rem;
}
} .c-fqa_index > li label:before {
background-color: #000000;
content: '';
display: block;
height: 2px;
width: calc(30 * (100vw / 768));
position: absolute;
top: 0;
bottom: 0;
right: calc(18 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 840px) { .c-fqa_index > li label:before {
height: 2px;
width: 30px;
top: 0;
bottom: 0;
right: 18px;
}
} .c-fqa_index > li label:after {
background-color: #000000;
content: '';
display: block;
height: 2px;
width: calc(8 * (100vw / 768));
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: calc(6 * (100vw / 768));
right: calc(16 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 840px) { .c-fqa_index > li label:after {
height: 2px;
width: 8px;
top: 0;
bottom: 6px;
right: 16px;
}
} .c-fqa_index > li:hover label {
border-bottom: 3px dotted #bfbfbf;
cursor: pointer;
font-weight: 700;
transition: .4s;
}
@media screen and (min-width: 840px) { .c-fqa_index > li:hover label {
padding: 10px 60px 10px 15px;
}
} .c-fqa_detail {
margin: 0 auto;
width: 90%;
}
@media screen and (min-width: 980px) { .c-fqa_detail {
margin: 0;
width: 60%;
}
} .c-fqa_detail--wrap {
margin: 0 0 calc(100 * (100vw / 768));
}
@media screen and (min-width: 980px) { .c-fqa_detail--wrap {
margin: 0;
visibility: hidden;
opacity: 0;
max-height: 0;
}
} .c-fqa_detail--wrap .question {
border-bottom: 3px dotted #bfbfbf;
color: #83c5e8;
line-height: 1.2;
margin: 0 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
font-weight: bold;
line-height: 1.6;
margin: 0 0 10px;
padding: 0 0 10px;
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .question {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-fqa_detail--wrap .question {
font-size: 16px;
font-size: 1rem;
margin: 0 0 20px;
padding: 0 0 20px;
}
} .c-fqa_detail--wrap .question .icon {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .question .icon {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-fqa_detail--wrap .question .icon {
font-size: 16px;
font-size: 1rem;
}
} .c-fqa_detail--wrap .question .icon::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/title-style-blue.svg);
background-size: contain;
background-repeat: no-repeat;
content: "";
display: block;
height: calc(33 * (100vw / 768));
width: 14px;
margin: 0 5px 0 0;
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .question .icon::before {
height: calc(22 * (100vw / 768));
margin: 0 10px 0 0;
}
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .question .icon::before {
height: 22px;
}
} .c-fqa_detail--wrap .answer .icon {
color: #ed99a4;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .answer .icon {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-fqa_detail--wrap .answer .icon {
font-size: 16px;
font-size: 1rem;
}
} .c-fqa_detail--wrap .answer .icon::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/title-style-pink.svg);
background-size: contain;
background-repeat: no-repeat;
content: "";
display: block;
height: calc(33 * (100vw / 768));
width: 14px;
margin: 0 5px 0 0;
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .answer .icon::before {
height: calc(22 * (100vw / 768));
margin: 0 10px 0 0;
}
}
@media screen and (min-width: 840px) { .c-fqa_detail--wrap .answer .icon::before {
height: 22px;
}
} .c-fqa_detail--check {
display: none;
} .c-fqa_detail--check:checked + .c-fqa_detail--wrap {
visibility: visible;
opacity: 1;
max-height: 999vh;
}  .c-voice {
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .c-voice {
padding: 60px 0;
}
} .c-voice--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-voice--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-voice--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-voice--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 0;
}
} .c-voice--container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
height: 80vh;
overflow-y: scroll;
}
@media screen and (min-width: 980px) { .c-voice--container {
margin: 50px auto 0;
height: auto;
overflow-y: visible;
}
} .c-voice_index {
display: none;
}
@media screen and (min-width: 980px) { .c-voice_index {
display: block;
margin: 0 80px 0 0;
width: calc(40% - 80px);
}
} .c-voice_index > li label {
display: inline-block;
font-size: calc(19 * (100vw / 768));
font-weight: 400;
padding: 10px 60px 10px 8px;
position: relative;
transition: .4s;
}
@media screen and (min-width: 840px) { .c-voice_index > li label {
font-size: 16px;
font-size: 1rem;
}
} .c-voice_index > li label:before {
background-color: #888888;
content: '';
display: block;
height: 1px;
width: calc(30 * (100vw / 768));
position: absolute;
top: 0;
bottom: 0;
right: calc(18 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 840px) { .c-voice_index > li label:before {
height: 2px;
width: 30px;
top: 0;
bottom: 0;
right: 18px;
}
} .c-voice_index > li label:after {
background-color: #000000;
content: '';
display: block;
height: 2px;
width: calc(8 * (100vw / 768));
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: calc(6 * (100vw / 768));
right: calc(16 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 840px) { .c-voice_index > li label:after {
height: 2px;
width: 8px;
top: 0;
bottom: 6px;
right: 16px;
}
} .c-voice_index > li:hover label {
border-bottom: 1px solid #ffffff;
cursor: pointer;
font-weight: 700;
transition: .4s;
}
@media screen and (min-width: 840px) { .c-voice_index > li:hover label {
padding: 10px 60px 10px 15px;
}
} .c-voice_detail {
margin: 0 auto;
width: 90%;
}
@media screen and (min-width: 980px) { .c-voice_detail {
margin: 0;
width: 60%;
}
} .c-voice_detail--wrap {
margin: 0 0 calc(80 * (100vw / 768));
}
@media screen and (min-width: 980px) { .c-voice_detail--wrap {
margin: 0;
visibility: hidden;
opacity: 0;
max-height: 0;
}
} .c-voice_detail--wrap .title {
line-height: 1.6;
margin: 0 0 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
color: #83c5e8;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-voice_detail--wrap .title {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-voice_detail--wrap .title {
font-size: 16px;
font-size: 1rem;
}
} .c-voice_detail--wrap .title::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/title-style-blue.svg);
background-size: contain;
background-repeat: no-repeat;
content: "";
display: block;
height: calc(33 * (100vw / 768));
width: 14px;
margin: 5px 10px 0 0;
}
@media screen and (min-width: 576px) { .c-voice_detail--wrap .title::before {
height: calc(22 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-voice_detail--wrap .title::before {
height: 22px;
}
} .c-voice_detail--wrap .title span {
width: calc(100% - 14px);
} .c-voice_detail--wrap .customer {
border-bottom: 3px dotted #bfbfbf;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
margin: 0 0 10px;
padding: 0 0 10px;
width: 100%;
}
@media screen and (min-width: 980px) { .c-voice_detail--wrap .customer {
margin: 0 0 20px;
padding: 0 0 20px;
}
} .c-voice_detail--wrap .customer .customername {
display: block;
font-weight: bold;
margin: 5px 0 0;
} .c-voice_detail--wrap .customer picture {
margin: 0 0 0 4%;
min-width: 70px;
text-align: center;
} .c-voice_detail--wrap .staff {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
margin: 0 auto;
}
@media screen and (min-width: 980px) { .c-voice_detail--wrap .staff {
margin: 0;
}
} .c-voice_detail--wrap .staff picture {
margin: 0 0 0 4%;
min-width: 70px;
text-align: center;
} .c-voice_detail--wrap .title {
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-voice_detail--wrap .title {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-voice_detail--wrap .title {
font-size: 16px;
font-size: 1rem;
}
} .c-voice_detail--check {
display: none;
} .c-voice_detail--check:checked + .c-voice_detail--wrap {
visibility: visible;
opacity: 1;
max-height: 999vh;
}  .c-author {
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .c-author {
padding: 60px 0;
}
} .c-author--wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-author--box {
background: #efece4;
border: 10px solid #ffffff;
border-radius: 5px;
padding: 20px 15px;
}
@media screen and (min-width: 576px) { .c-author--box {
padding: 30px;
}
}
@media screen and (min-width: 840px) { .c-author--box {
border: 20px solid #ffffff;
padding: 65px 20px;
}
} .c-author--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-author--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-author--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-author--contents {
max-width: 840px;
margin: 0 auto;
}
@media screen and (min-width: 980px) { .c-author--contents {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
}
@media screen and (min-width: 840px) { .c-author--info {
max-width: 300px;
margin: 0 auto;
}
} .c-author--photo {
text-align: center;
} .c-author--photo img {
display: inline-block;
max-width: 150px;
max-height: 130px;
height: auto;
} .c-author--dl {
padding-top: 10px;
text-align: center;
}
@media screen and (min-width: 980px) { .c-author--dl {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
align-items: flex-start;
}
} .c-author--dt {
border: 1px solid #394656;
border-radius: 5px;
font-weight: bold;
font-size: calc(22 * (100vw / 768));
color: #394656;
text-align: center;
margin: 0 auto 5px;
max-width: 170px;
padding: 5px;
line-height: 1;
}
@media screen and (min-width: 576px) { .c-author--dt {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 980px) { .c-author--dt {
font-size: 12px;
font-size: 0.75rem;
width: 100%;
max-width: 110px;
margin: 0 auto 20px;
}
} .c-author--dd {
margin: 0 auto 20px;
font-size: calc(20 * (100vw / 768));
text-align: center;
}
@media screen and (min-width: 576px) { .c-author--dd {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 980px) { .c-author--dd {
text-align: left;
padding-left: 10px;
font-size: 12px;
font-size: 0.75rem;
width: calc(100% - 110px);
}
} .c-author--data {
border-top: 2px dotted #394656;
border-bottom: 2px dotted #394656;
color: #394656;
font-size: calc(30 * (100vw / 768));
text-align: center;
padding: 20px 0;
margin: 0 auto;
}
@media screen and (min-width: 576px) { .c-author--data {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 980px) { .c-author--data {
font-size: 13px;
font-size: 0.8125rem;
text-align: left;
margin-right: 30px;
max-width: calc(100% - 330px);
}
}  .c-footer-contact {
padding: 35px 0 35px;
}
@media screen and (min-width: 840px) { .c-footer-contact {
padding: 60px 0;
}
} .c-footer-contact--wrap {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-footer-contact--box {
background: #f2e5e6;
border: 10px solid #ffffff;
padding: 20px 15px;
}
@media screen and (min-width: 576px) { .c-footer-contact--box {
border: 20px solid #ffffff;
padding: 50px 30px;
}
} .c-footer-contact--ttl {
color: #394656;
font-size: calc(27 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-footer-contact--ttl {
font-size: calc(20 * (100vw / 768));
padding-bottom: 30px;
}
}
@media screen and (min-width: 840px) { .c-footer-contact--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-footer-contact--ttl .pc-show {
display: none;
}
@media screen and (min-width: 840px) { .c-footer-contact--ttl .pc-show {
display: block;
}
}
@media screen and (min-width: 840px) { .c-footer-contact--contents {
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;
}
} .c-footer-contact--tel {
text-align: center;
padding-left: 60px;
position: relative;
margin: 0 auto;
max-width: max-content;
}
@media screen and (min-width: 840px) { .c-footer-contact--tel {
margin: 0 10px;
max-width: 100%;
min-width: 280px;
}
} .c-footer-contact--tel:before {
content: "";
background: url(//www.7-7maruka.com/kanri/images/icon/icon-smartphone-w.svg) no-repeat center;
background-size: 70%;
background-color: #ed99a4;
border-radius: 100%;
display: block;
position: absolute;
top: calc(50% - 25px);
left: 0;
height: 50px;
width: 50px;
} .c-footer-contact--tel::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 13px 7.5px;
border-color: transparent transparent #ED99A4 transparent;
position: absolute;
top: 50%;
left: 40px;
} .c-footer-contact--tel .no a {
color: #394656;
font-size: calc(42 * (100vw / 768));
font-family: "Lato", sans-serif;
font-weight: bold;
word-break: keep-all;
}
@media screen and (min-width: 576px) { .c-footer-contact--tel .no a {
font-size: calc(28 * (100vw / 768));
}
}
@media screen and (min-width: 980px) { .c-footer-contact--tel .no a {
font-size: 28px;
font-size: 1.75rem;
}
} .c-footer-contact--tel .data {
color: #394656;
font-size: calc(20 * (100vw / 768));
line-height: 1.3;
word-break: keep-all;
}
@media screen and (min-width: 576px) { .c-footer-contact--tel .data {
padding: 5px 0 0;
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 980px) { .c-footer-contact--tel .data {
font-size: 13px;
font-size: 0.8125rem;
}
} .c-footer-contact--tel .data .time {
padding-right: 5px;
font-family: "Lato", sans-serif;
} .c-footer-contact--line {
padding-top: 20px;
margin: 0 auto;
text-align: center;
}
@media screen and (min-width: 840px) { .c-footer-contact--line {
margin: 0;
padding-top: 0;
padding-left: 10px;
}
} .c-footer-contact--line .line-btn {
display: inline-block;
text-align: center;
} .c-footer-contact--line .line-btn img {
border-radius: 5px;
background: #0abf7d;
display: inline-block;
} .p-module-jewelry {
background: #F0F0F0;
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-module-jewelry {
padding: 60px 0;
}
} .p-module-jewelry--wrap {
margin: auto;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-module-jewelry--box {
background: #f2d6e2;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry--box {
padding: 30px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry--box {
border: 20px solid #ffffff;
padding: 70px;
}
} .p-module-jewelry--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-jewelry--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-module-jewelry--list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10px;
row-gap: 15px;
padding-bottom: 50px;
}
@media screen and (min-width: 576px) { .p-module-jewelry--list {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry--list {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
} .p-module-jewelry--item {
text-align: center;
} .p-module-jewelry--item img {
display: block;
height: auto;
margin: 0 auto;
} .p-module-jewelry--item .text {
color: #394656;
display: inline-block;
font-size: calc(20 * (100vw / 768));
line-height: 1.2;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-jewelry--item .text {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry--item .text {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.6;
}
} .p-module-jewelry--text {
text-align: center;
} .p-module-jewelry--link {
display: inline-block;
transition: .3s;
} .p-module-jewelry--link:hover {
opacity: 0.7;
} .p-module-jewelry-colum {
background: #F7F7F7;
padding: 35px 0 0;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum {
padding: 60px 0 0;
}
} .p-module-jewelry-colum:last-of-type {
padding-bottom: 0 !important;
} .p-module-jewelry-colum.message {
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum.message {
padding: 60px 0;
}
} .p-module-jewelry-colum--wrap {
margin: auto;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-module-jewelry-colum--message {
background: #efece4;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--message {
padding: 30px 20px 0;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--message {
border: 20px solid #ffffff;
padding: 50px 50px 20px;
}
} .p-module-jewelry-colum--message .p-module-jewelry-colum--wrap {
padding: 0 0 30px;
} .p-module-jewelry-colum--ttl {
background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
line-height: 1.2;
margin: 0 0 25px;
padding: 20px 0;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum--ttl {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--ttl {
font-size: 16px;
font-size: 1rem;
}
} .p-module-jewelry-colum--ttl .main {
display: block;
font-size: calc(30 * (100vw / 768));
padding-bottom: 20px;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum--ttl .main {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--ttl .main {
padding-bottom: 30px;
font-size: 20px;
font-size: 1.25rem;
}
} .p-module-jewelry-colum--ttl .sub {
display: block;
} .p-module-jewelry-colum--contents {
margin-bottom: 35px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--contents {
margin-bottom: 60px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contents.col2 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contents.col2 .p-module-jewelry-colum--photo {
padding-left: 30px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contents.col2 .p-module-jewelry-colum--photo img {
width: 300px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contents.col2 .p-module-jewelry-colum--text {
width: calc(100% - 300px);
}
} .p-module-jewelry-colum-box {
background: #efece4;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box {
padding: 30px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum-box {
border: 20px solid #ffffff;
padding: 50px;
}
} .p-module-jewelry-colum-box--wrap {
background: #ffffff;
padding: 10px;
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum-box--wrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
padding: 50px 20px;
}
} .p-module-jewelry-colum-box--info {
border-top: 6px double #106d4b;
border-bottom: 6px double #106d4b;
border-left: 1px solid #106d4b;
border-right: 1px solid #106d4b;
padding: 15px 10px;
max-width: 570px;
margin: 0 auto 10px;
width: 100%;
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum-box--info {
margin: 0 auto;
padding: 25px 30px;
}
} .p-module-jewelry-colum-box--ttl {
text-align: center;
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 10px;
}
} .p-module-jewelry-colum-box--data {
margin: 0 auto;
max-width: 580px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--data {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
}
} .p-module-jewelry-colum-box--block {
padding-top: 10px;
} .p-module-jewelry-colum-box--block.maruka .ttl {
background: #106d4b;
border-color: #106d4b;
color: #ffffff;
} .p-module-jewelry-colum-box--block.maruka .list {
color: #106d4b;
} .p-module-jewelry-colum-box--block.maruka .item.total {
border-color: #106d4b;
} .p-module-jewelry-colum-box--block .ttl {
border: 1px solid #000000;
color: #000000;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
padding: 5px;
margin-bottom: 10px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--block .ttl {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--block .ttl {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum-box--block .item {
padding-bottom: 5px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
font-size: calc(22.5 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--block .item {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--block .item {
font-size: 15px;
font-size: 0.9375rem;
padding-bottom: 10px;
}
} .p-module-jewelry-colum-box--block .item.total {
padding-top: 10px;
border-top: 1px solid #000000;
} .p-module-jewelry-colum-box--block .name {
display: block;
} .p-module-jewelry-colum-box--block .pay {
display: block;
font-family: "Lato", sans-serif;
font-size: 150%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--block .pay {
font-size: 100%;
}
} .p-module-jewelry-colum-box--pay {
background: #ffffff;
text-align: center;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--pay {
padding: 0 20px 0 0;
}
} .p-module-jewelry-colum-box--pay .ttl {
color: #106d4b;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
display: block;
padding-bottom: 10px;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--pay .ttl {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--pay .ttl {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum-box--pay .data {
color: #106d4b;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
display: block;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--pay .data {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--pay .data {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum-box--pay .data .num {
font-family: "Lato", sans-serif;
font-size: 200%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--pay .data .num {
font-size: 200%;
}
} .p-module-jewelry-colum-box--pay img {
display: inline-block;
max-height: 120px;
padding-top: 10px;
} .p-module-jewelry-colum--contact {
padding: 10px 0 0;
text-align: center;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--contact {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
justify-content: space-around;
padding: 30px 0;
}
} .p-module-jewelry-colum--contact .item {
padding-bottom: 10px;
} .p-module-jewelry-colum--contact .item .line-btn {
background: #0abf7d;
border-radius: 5px;
display: inline-block;
max-width: 310px;
padding: 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contact .item .line-btn {
background: none;
border-radius: 0;
padding: 0;
}
} .p-module-jewelry-colum--contact .item .line-btn:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .p-module-jewelry-colum--contact .item .line-btn img {
border-radius: 5px;
background: #0abf7d;
display: inline-block;
text-align: center;
width: 100%;
height: auto;
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contact .item .line-btn img {
display: inline-block;
}
} .p-module-jewelry-colum--contact .item .shop {
background: #B7D5CD;
border-radius: 5px;
display: inline-block;
max-width: 310px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--contact .item .shop {
padding: 0;
}
} .p-module-jewelry-colum--contact .item .shop:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .p-module-jewelry-colum--contact .item .shop img {
border-radius: 5px;
display: inline-block;
width: 100%;
height: auto;
} .p-module-jewelry-colum-manzoku {
margin-top: 35px;
background: #E7F1F5;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku {
margin-top: 0;
padding: 40px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum-manzoku {
border: 20px solid #ffffff;
padding: 70px;
}
} .p-module-jewelry-colum-manzoku--ttl {
color: #394656;
font-size: calc(21 * (100vw / 768));
font-weight: bold;
text-align: center;
padding-bottom: 5px;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-manzoku--ttl {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku--ttl {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum-manzoku--contents {
color: #394656;
text-align: center;
} .p-module-jewelry-colum-manzoku--contents .ttl {
display: block;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-manzoku--contents .ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku--contents .ttl {
font-size: 20px;
font-size: 1.25rem;
}
} .p-module-jewelry-colum-manzoku--contents .num {
display: block;
font-size: calc(69 * (100vw / 768));
font-weight: bold;
font-family: "Lato", sans-serif;
padding-top: 10px;
line-height: 1;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-manzoku--contents .num {
font-size: calc(46 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku--contents .num {
font-size: 46px;
font-size: 2.875rem;
}
} .p-module-jewelry-colum-manzoku--contents .num .tani {
font-size: 50%;
} .p-module-jewelry-colum-manzoku--contents .pick {
display: block;
font-size: calc(21 * (100vw / 768));
padding-top: 5px;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-manzoku--contents .pick {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku--contents .pick {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum--photo {
text-align: center;
padding-bottom: 10px;
} .p-module-jewelry-colum--photo img {
display: inline-block;
width: auto;
height: auto;
} .p-module-jewelry-colum--point {
background: #F7F7F7;
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point {
padding: 60px 0;
}
} .p-module-jewelry-colum--point--wrap {
background-color: #eef0f0;
max-width: 980px;
margin: 0 auto;
position: relative;
width: 100%;
padding: 35px 10px 30px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--wrap {
padding: 60px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--point--wrap {
padding: 80px 20px;
}
} .p-module-jewelry-colum--point--wrap .title {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum--point--wrap .title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--wrap .title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-module-jewelry-colum--point--list {
margin: auto;
max-width: 900px;
} .p-module-jewelry-colum--point--list li:not(:first-of-type) {
margin: 50px 0 0 0;
} .p-module-jewelry-colum--point--list li figure {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
flex-direction: column-reverse;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure {
flex-direction: row-reverse;
}
} .p-module-jewelry-colum--point--list li figure > picture {
margin: 20px 0;
text-align: center;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure > picture {
margin: 0 0 0 40px;
max-width: 250px;
width: 100%;
}
} .p-module-jewelry-colum--point--list li figure > picture img {
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure figcaption {
width: calc(100% - 250px);
}
} .p-module-jewelry-colum--point--list li figure figcaption .point {
max-width: 120px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure figcaption .point {
max-width: 165px;
}
} .p-module-jewelry-colum--point--list li figure figcaption .subtitle {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding: 20px 0;
text-align: center;
line-height: 1.5;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum--point--list li figure figcaption .subtitle {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure figcaption .subtitle {
text-align: left;
font-size: 20px;
font-size: 1.25rem;
padding: 20px 0 20px 45px;
}
}  .p-header {
padding: 10px 0 0;
}
@media screen and (min-width: 840px) { .p-header {
padding: 30px 0;
}
}
@media screen and (min-width: 980px) { .p-header {
padding: 50px 0 30px;
}
} .p-header--wrap {
} .p-header--head {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
width: 100%;
position: relative;
padding-bottom: 50px;
padding-right: 60px;
}
@media screen and (min-width: 980px) { .p-header--head {
padding-bottom: 0;
padding-right: 0;
}
} .p-header--logo {
max-width: 40%;
padding-right: 5px;
}
@media screen and (min-width: 980px) { .p-header--logo {
max-width: 100%;
padding-right: 10px;
}
} .p-header--logo img {
width: 100%;
max-width: 212px;
} .p-header--search {
position: absolute;
bottom: 0;
left: 0;
border-radius: 100px;
overflow: hidden;
width: 100%;
}
@media screen and (min-width: 980px) { .p-header--search {
max-width: 40%;
position: relative;
bottom: auto;
left: auto;
}
} .p-header--search .search-box {
background: #ffffff;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
} .p-header--search .search-box .search-input {
background: #ffffff;
border: none;
border-radius: 100px 0 0 100px;
font-size: calc(21 * (100vw / 768));
padding: 10px 15px;
width: calc(100% - 60px);
}
@media screen and (min-width: 576px) { .p-header--search .search-box .search-input {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 980px) { .p-header--search .search-box .search-input {
font-size: 14px;
font-size: 0.875rem;
}
} .p-header--search .search-box .search-btn {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-search-w.svg) no-repeat center;
background-size: 20px 20px;
background-color: #81a6c9;
border: none;
height: 40px;
width: 60px;
}
@media screen and (min-width: 980px) { .p-header--search .search-box .search-btn {
height: 50px;
}
} .p-header--tel {
position: relative;
text-align: center;
}
@media screen and (min-width: 980px) { .p-header--tel {
padding-left: 60px;
margin: 0 10px;
min-width: 280px;
}
} .p-header--tel:before {
content: none;
background: url(//www.7-7maruka.com/kanri/images/icon/icon-smartphone-w.svg) no-repeat center;
background-size: 70%;
background-color: #ed99a4;
border-radius: 100%;
display: block;
position: absolute;
top: calc(50% - 25px);
left: 0;
height: 50px;
width: 50px;
}
@media screen and (min-width: 980px) { .p-header--tel:before {
content: "";
}
} .p-header--tel::after {
content: none;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 13px 7.5px;
border-color: transparent transparent #ED99A4 transparent;
position: absolute;
top: 50%;
left: 40px;
}
@media screen and (min-width: 980px) { .p-header--tel::after {
content: "";
}
} .p-header--tel .no a {
color: #394656;
font-size: calc(40 * (100vw / 768));
font-family: "Lato", sans-serif;
font-weight: bold;
word-break: keep-all;
}
@media screen and (min-width: 576px) { .p-header--tel .no a {
font-size: calc(28 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-header--tel .no a {
font-size: 28px;
font-size: 1.75rem;
}
} .p-header--tel .data {
color: #394656;
font-size: calc(19.5 * (100vw / 768));
line-height: 1.3;
word-break: keep-all;
}
@media screen and (min-width: 576px) { .p-header--tel .data {
padding: 5px 0 0;
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-header--tel .data {
font-size: 13px;
font-size: 0.8125rem;
}
} .p-header--tel .data .time {
font-family: "Lato", sans-serif;
padding-right: 5px;
} .p-header--line {
display: none;
}
@media screen and (min-width: 980px) { .p-header--line {
display: block;
padding-left: 10px;
}
} .p-header--line .line-btn img {
border-radius: 5px;
background: #0abf7d;
width: 100%;
max-width: 260px;
} .p-header--foot-pc {
display: none;
}
@media screen and (min-width: 980px) { .p-header--foot-pc {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
padding-top: 20px;
width: 100%;
}
} .p-header-nav {
width: calc(100% - 410px);
} .p-header-nav--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
} .p-header-nav--item {
padding: 0 10px;
position: relative;
text-align: center;
width: 100%;
} .p-header-nav--item:hover .p-header-nav-sub {
display: block;
} .p-header-nav--link {
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
color: #394656;
padding: 10px 0;
} .p-header-nav--link:hover {
text-decoration: underline;
} .p-header-nav-sub {
background: #ffffff;
border-top: 3px solid #394656;
border-radius: 0 0 10px 10px;
box-shadow: 0px 0px 15px -5px #777777;
display: none;
padding: 20px 10px 10px;
position: absolute;
top: 100%;
left: 0;
width: 210px;
z-index: 10;
} .p-header-nav-sub--item {
padding-bottom: 10px;
} .p-header-nav-sub--item .link {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-right.svg) no-repeat center right 3px;
background-size: 10px 10px;
background-color: #81a6c9;
border-radius: 20px;
color: #ffffff;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
padding: 10px;
} .p-header-nav-sub--item .link:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .p-header--mypage {
padding: 0 10px;
width: 280px;
} .p-header--mypage .btn {
display: block;
position: relative;
padding: 18px 0;
} .p-header--mypage .btn::before {
content: '';
background: url(//www.7-7maruka.com/kanri/images/icon/icon-in.webp) no-repeat center;
background-size: 60% 60%;
background-color: #f9dad6;
border-radius: 100%;
display: block;
position: absolute;
top: calc(50% - 25px);
left: 0;
width: 50px;
height: 50px;
} .p-header--mypage .btn .in {
color: #394656;
display: inline-block;
font-size: 16px;
font-size: 1rem;
font-weight: bold;
padding-left: 60px;
} .p-header .c-drawer {
display: none;
}
@media screen and (min-width: 980px) { .p-header .c-drawer {
height: auto;
display: block;
}
} .p-header .c-drawer .drawer-overlay {
display: none !important;
} .p-header .c-drawer .c-drawer-button {
display: none;
position: relative;
top: auto;
}
@media screen and (min-width: 980px) { .p-header .c-drawer .c-drawer-button {
display: block;
}
} .p-header .c-drawer .c-drawer-button::before {
content: 'メニュー';
color: #394656;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
position: absolute;
top: calc(50% - 9px);
right: -65px;
} .p-header-foot-sp {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
width: 100%;
padding-top: 10px;
}
@media screen and (min-width: 980px) { .p-header-foot-sp {
display: none;
}
} .p-header-sp-nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 10px;
width: 100%;
} .p-header-sp-nav--item {
height: 100%;
} .p-header-sp-nav--item .link {
border-radius: 5px;
display: block;
padding: 0;
text-align: center;
width: 100%;
}
@media screen and (min-width: 840px) { .p-header-sp-nav--item .link {
padding: 8px 5px;
}
} .p-header-sp-nav--item .link.campaign {
background: #FAEE68;
} .p-header-sp-nav--item .link.campaign .in {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-campaign.webp);
} .p-header-sp-nav--item .link.shop {
background: #B7D5CD;
} .p-header-sp-nav--item .link.shop .in {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp);
} .p-header-sp-nav--item .link.mypage {
background: #F9DAD6;
} .p-header-sp-nav--item .link.mypage .in {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-mypage.webp);
} .p-header-sp-nav--item .link .in {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-campaign.webp) no-repeat center left;
background-size: 30%;
color: #394656;
display: inline-flex;
align-items: center;
font-weight: bold;
font-size: calc(20 * (100vw / 768));
padding: 6px 0 6px 30px;
text-align: left;
min-height: 40px;
}
@media screen and (min-width: 576px) { .p-header-sp-nav--item .link .in {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-header-sp-nav--item .link .in {
font-size: 14px;
font-size: 0.875rem;
}
} .p-header-event {
background: #ffffff;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -5px;
padding: 10px 5px 0;
} .p-header-event li {
width: 33.3%;
padding: 0 5px 10px;
} .p-header-event li a {
display: inline-block;
box-shadow: 0px 0px 15px -5px #777777;
} .p-header-event li a img {
width: 100%;
height: auto;
} .p-header-fix {
background: #f7f7f7;
top: 0;
padding: 10px;
position: fixed;
left: 0;
transition: 0.3s;
width: 100%;
z-index: 100;
}
@media screen and (min-width: 980px) { .p-header-fix {
display: none;
}
} .p-header-fix.js-header-fix.fix-off {
top: -100%;
width: 100%;
z-index: 15;
} .p-header-fix--wrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
padding-right: 70px;
} .p-header-fix .p-header--logo {
width: 150px;
display: block;
} .p-header-fix .p-header--search {
width: calc(100% - 60px);
position: relative;
bottom: auto;
left: auto;
} .p-header-fix .p-header--search .search-box .search-input {
width: calc(100% - 40px);
padding: 5px;
} .p-header-fix .p-header--search .search-box .search-btn {
width: 40px;
}  .p-footer {
background: #ffffff;
padding: 20px 0 100px;
}
@media screen and (min-width: 840px) { .p-footer {
padding: 20px 0;
}
}
@media screen and (min-width: 980px) { .p-footer {
padding: 80px 0 140px;
}
} .p-footer--wrap {
max-width: 1442px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-footer--head {
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;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
position: relative;
}
@media screen and (min-width: 840px) { .p-footer--head {
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: none;
flex-wrap: nowrap;
padding-bottom: 60px;
}
} .p-footer--logo {
max-width: 50%;
padding-right: 5px;
}
@media screen and (min-width: 980px) { .p-footer--logo {
max-width: 100%;
padding-right: 10px;
}
} .p-footer--logo img {
width: 100%;
max-width: 212px;
} .p-footer--search {
position: absolute;
bottom: 0;
left: 0;
border-radius: 100px;
overflow: hidden;
width: 100%;
}
@media screen and (min-width: 980px) { .p-footer--search {
max-width: 30%;
position: relative;
bottom: auto;
left: auto;
}
} .p-footer--search .search-box {
display: none;
background: #f7f7f7;
width: 100%;
}
@media screen and (min-width: 980px) { .p-footer--search .search-box {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
} .p-footer--search .search-box .search-input {
background: #f7f7f7;
border: none;
padding: 10px 15px;
width: calc(100% - 60px);
border-radius: 100px 0 0 100px;
} .p-footer--search .search-box .search-btn {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-search-w.svg) no-repeat center;
background-size: 20px 20px;
background-color: #81a6c9;
border: none;
height: 50px;
width: 60px;
} .p-footer--tel {
position: relative;
text-align: center;
}
@media screen and (min-width: 980px) { .p-footer--tel {
padding-left: 60px;
margin: 0 10px;
min-width: 280px;
}
} .p-footer--tel:before {
content: none;
background: url(//www.7-7maruka.com/kanri/images/icon/icon-smartphone-w.svg) no-repeat center;
background-size: 70%;
background-color: #ed99a4;
border-radius: 100%;
display: block;
position: absolute;
top: calc(50% - 25px);
left: 0;
height: 50px;
width: 50px;
}
@media screen and (min-width: 980px) { .p-footer--tel:before {
content: "";
}
} .p-footer--tel::after {
content: none;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 13px 7.5px;
border-color: transparent transparent #ED99A4 transparent;
position: absolute;
top: 50%;
left: 40px;
}
@media screen and (min-width: 980px) { .p-footer--tel::after {
content: "";
}
} .p-footer--tel .no a {
color: #394656;
font-size: calc(40 * (100vw / 768));
font-family: "Lato", sans-serif;
font-weight: bold;
word-break: keep-all;
}
@media screen and (min-width: 576px) { .p-footer--tel .no a {
font-size: calc(28 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-footer--tel .no a {
font-size: 28px;
font-size: 1.75rem;
}
} .p-footer--tel .data {
color: #394656;
font-size: calc(20 * (100vw / 768));
line-height: 1.3;
word-break: keep-all;
}
@media screen and (min-width: 576px) { .p-footer--tel .data {
padding: 5px 0 0;
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-footer--tel .data {
font-size: 13px;
font-size: 0.8125rem;
}
} .p-footer--tel .data .time {
padding-right: 5px;
} .p-footer--line {
display: none;
width: 100%;
padding: 5px 0 0;
text-align: center;
}
@media screen and (min-width: 840px) { .p-footer--line {
width: auto;
display: block;
padding: 0 0 0 10px;
}
} .p-footer--line .line-btn {
display: inline-block;
max-width: 260px;
} .p-footer--line .line-btn img {
border-radius: 5px;
background: #0abf7d;
width: 100%;
} .p-footer-nav {
display: none;
}
@media screen and (min-width: 980px) { .p-footer-nav {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
padding-top: 50px;
}
}
@media screen and (min-width: 980px) { .p-footer-nav--list {
width: 25%;
}
}
@media screen and (min-width: 1211px) { .p-footer-nav--list {
width: auto;
}
} .p-footer-nav--item {
padding-bottom: 20px;
padding-right: 5px;
} .p-footer-nav--item a {
color: #394656;
display: block;
font-size: 13px;
font-size: 0.8125rem;
transition: .3s;
line-height: 1.3;
} .p-footer-nav--item a:hover {
opacity: 0.7;
} .p-footer-nav--item.bold {
padding-bottom: 40px;
} .p-footer-nav--item.bold a {
font-size: 15px;
font-size: 0.9375rem;
font-weight: bold;
} .p-footer-info {
text-align: center;
}
@media screen and (min-width: 576px) { .p-footer-info {
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;
text-align: right;
}
}
@media screen and (min-width: 980px) { .p-footer-info {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
display: block;
text-align: left;
position: absolute;
bottom: 0;
right: 0;
}
} .p-footer--mypage {
display: none;
width: 250px;
}
@media screen and (min-width: 980px) { .p-footer--mypage {
display: inline-block;
margin: 0 auto;
}
} .p-footer--mypage .btn {
display: block;
position: relative;
padding: 18px 0;
text-align: center;
} .p-footer--mypage .btn::before {
content: '';
background: url(//www.7-7maruka.com/kanri/images/icon/icon-in.webp) no-repeat center;
background-size: 60% 60%;
background-color: #f9dad6;
border-radius: 100%;
display: block;
position: absolute;
top: calc(50% - 25px);
left: 0;
width: 50px;
height: 50px;
} .p-footer--mypage .btn .in {
color: #394656;
display: inline-block;
font-size: 16px;
font-size: 1rem;
padding-left: 60px;
} .p-footer-copy {
padding-top: 20px;
}
@media screen and (min-width: 980px) { .p-footer-copy {
padding-top: 50px;
}
} .p-footer-copy .copy {
line-height: 1.3;
font-size: calc(18 * (100vw / 768));
text-align: center;
}
@media screen and (min-width: 576px) { .p-footer-copy .copy {
font-size: calc(10 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-footer-copy .copy {
font-size: 10px;
font-size: 0.625rem;
}
}
@media screen and (min-width: 980px) { .p-footer-copy .copy {
text-align: left;
}
} .p-footer-bnr {
text-align: center;
}
@media screen and (min-width: 980px) { .p-footer-bnr {
text-align: left;
}
} .p-footer-bnr a {
display: inline-block;
text-align: center;
max-width: 200px;
}
@media screen and (min-width: 980px) { .p-footer-bnr a {
text-align: left;
max-width: 100%;
}
} .p-footer-bnr a img {
display: inline-block;
} .p-footer-fix {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #efece4;
padding: 15px;
transition: .5s;
z-index: 10;
}
@media screen and (min-width: 840px) { .p-footer-fix {
display: none;
}
} .p-footer-fix.fix-off {
bottom: -100%;
} .p-footer-fix--list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 10px;
} .p-footer-fix--link {
background: #0abf7d;
border-radius: 5px;
display: block;
padding: 10px 5px 12px;
position: relative;
text-align: center;
width: 100%;
} .p-footer-fix--link::before {
content: '';
background: url(//www.7-7maruka.com/kanri/images/icon/icon-line.svg) no-repeat center;
background-size: 50% 50%;
background-color: #ffffff;
border-radius: 100%;
position: absolute;
top: -30px;
left: calc(50% - 20px);
width: 40px;
height: 40px;
} .p-footer-fix--link .in {
color: #ffffff;
font-weight: bold;
font-size: calc(20 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-footer-fix--link .in {
font-size: calc(14 * (100vw / 768));
}
} .p-footer-fix--link.line {
background: #0abf7d;
} .p-footer-fix--link.line::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-line.svg);
} .p-footer-fix--link.tel {
background: #ed99a4;
} .p-footer-fix--link.tel::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-tel.svg);
} .p-footer-fix--link.chat {
background: #81a6c9;
} .p-footer-fix--link.chat::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-chat.svg);
} #chatplusview, chat {
position: relative;
z-index: 10;
} #chatplusview #eye_catcher:not(.eyecatcher-imagemap) img {
width: 31vw !important;
} #chatplusview.chatplusview-modern {
max-height: 70vh !important;
}  .p-page-arrow {
display: inline-block;
position: relative;
padding-right: 20px;
}
@media screen and (min-width: 840px) { .p-page-arrow {
padding-right: 25px;
}
} .p-page-arrow::before {
content: '';
width: 15px;
height: 8px;
border-bottom: 1px solid #000000;
position: absolute;
right: -2px;
top: calc(50% - 4px);
}
@media screen and (min-width: 576px) { .p-page-arrow::before {
border-bottom: 2px solid #000000;
}
}
@media screen and (min-width: 840px) { .p-page-arrow::before {
width: 20px;
}
} .p-page-arrow::after {
content: '';
background: #000000;
display: block;
transform: rotate(312deg);
width: 1px;
height: 8px;
position: absolute;
right: 1px;
top: calc(50% - 1.5px);
}
@media screen and (min-width: 576px) { .p-page-arrow::after {
width: 2px;
}
} .p-page-arrow.white::before {
border-color: #ffffff;
} .p-page-arrow.white::after {
background: #ffffff;
}   input[name="tab-brand"],
input[name="tab_name"],
input[name="shop-park"],
input[name="tab-gold"],
input[name="tab-step"],
input[name="delivery-step"],
input[name="delivery-flow"],
input[name="tab-diamond"] {
display: none;
}  .p-page-tab_content {
visibility: hidden;
opacity: 0;
clear: both;
overflow: hidden;
width: 100%;
max-height: 0;
}  #features-tab1:checked ~ #features-tab1-content,
#shop-park1:checked ~ #shop-park1-content,
#brand1:checked ~ #brand1-content,
#gold1:checked ~ #gold1-content,
#delivery-tab1:checked ~ #delivery-tab1-content,
#delivery-flow1:checked ~ #delivery-flow1-content,
#diamond1:checked ~ #diamond1-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab2:checked ~ #features-tab2-content,
#shop-park2:checked ~ #shop-park2-content,
#brand2:checked ~ #brand2-content,
#gold2:checked ~ #gold2-content,
#delivery-tab2:checked ~ #delivery-tab2-content,
#delivery-flow2:checked ~ #delivery-flow2-content,
#diamond2:checked ~ #diamond2-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab3:checked ~ #features-tab3-content,
#shop-park3:checked ~ #shop-park3-content,
#brand3:checked ~ #brand3-content,
#gold3:checked ~ #gold3-content,
#delivery-tab3:checked ~ #delivery-tab3-content,
#delivery-flow3:checked ~ #delivery-flow3-content,
#diamond3:checked ~ #diamond3-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab4:checked ~ #features-tab4-content,
#shop-park4:checked ~ #shop-park4-content,
#brand4:checked ~ #brand4-content,
#gold4:checked ~ #gold4-content,
#delivery-tab4:checked ~ #delivery-tab4-content,
#delivery-flow4:checked ~ #delivery-flow4-content,
#diamond4:checked ~ #diamond4-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab5:checked ~ #features-tab5-content,
#shop-park5:checked ~ #shop-park5-content,
#brand5:checked ~ #brand5-content,
#gold5:checked ~ #gold5-content,
#delivery-tab5:checked ~ #delivery-tab5-content,
#delivery-flow5:checked ~ #delivery-flow5-content,
#diamond5:checked ~ #diamond5-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab6:checked ~ #features-tab6-content,
#shop-park6:checked ~ #shop-park6-content,
#brand6:checked ~ #brand6-content,
#gold6:checked ~ #gold6-content,
#delivery-tab6:checked ~ #delivery-tab6-content,
#delivery-flow6:checked ~ #delivery-flow6-content,
#diamond6:checked ~ #diamond6-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab7:checked ~ #features-tab7-content,
#shop-park7:checked ~ #shop-park7-content,
#brand7:checked ~ #brand7-content,
#gold7:checked ~ #gold7-content,
#delivery-tab7:checked ~ #delivery-tab7-content,
#delivery-flow7:checked ~ #delivery-flow7-content,
#diamond7:checked ~ #diamond7-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab8:checked ~ #features-tab8-content,
#shop-park8:checked ~ #shop-park8-content,
#brand8:checked ~ #brand8-content,
#gold8:checked ~ #gold8-content,
#delivery-tab8:checked ~ #delivery-tab8-content,
#delivery-flow8:checked ~ #delivery-flow8-content,
#diamond8:checked ~ #diamond8-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab9:checked ~ #features-tab9-content,
#shop-park9:checked ~ #shop-park9-content,
#brand9:checked ~ #brand9-content,
#gold9:checked ~ #gold9-content,
#delivery-tab9:checked ~ #delivery-tab9-content,
#delivery-flow9:checked ~ #delivery-flow9-content,
#diamond9:checked ~ #diamond9-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab10:checked ~ #features-tab10-content,
#shop-park10:checked ~ #shop-park10-content,
#brand10:checked ~ #brand10-content,
#gold10:checked ~ #gold10-content,
#delivery-tab10:checked ~ #delivery-tab10-content,
#delivery-flow10:checked ~ #delivery-flow10-content,
#diamond10:checked ~ #diamond10-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab11:checked ~ #features-tab11-content,
#shop-park11:checked ~ #shop-park11-content,
#brand11:checked ~ #brand11-content,
#gold11:checked ~ #gold11-content,
#delivery-tab11:checked ~ #delivery-tab11-content,
#delivery-flow11:checked ~ #delivery-flow11-content,
#diamond11:checked ~ #diamond11-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab12:checked ~ #features-tab12-content,
#shop-park12:checked ~ #shop-park12-content,
#brand12:checked ~ #brand12-content,
#gold12:checked ~ #gold12-content,
#delivery-tab12:checked ~ #delivery-tab12-content,
#delivery-flow12:checked ~ #delivery-flow12-content,
#diamond12:checked ~ #diamond12-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab13:checked ~ #features-tab13-content,
#shop-park13:checked ~ #shop-park13-content,
#brand13:checked ~ #brand13-content,
#gold13:checked ~ #gold13-content,
#delivery-tab13:checked ~ #delivery-tab13-content,
#delivery-flow13:checked ~ #delivery-flow13-content,
#diamond13:checked ~ #diamond13-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab14:checked ~ #features-tab14-content,
#shop-park14:checked ~ #shop-park14-content,
#brand14:checked ~ #brand14-content,
#gold14:checked ~ #gold14-content,
#delivery-tab14:checked ~ #delivery-tab14-content,
#delivery-flow14:checked ~ #delivery-flow14-content,
#diamond14:checked ~ #diamond14-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab15:checked ~ #features-tab15-content,
#shop-park15:checked ~ #shop-park15-content,
#brand15:checked ~ #brand15-content,
#gold15:checked ~ #gold15-content,
#delivery-tab15:checked ~ #delivery-tab15-content,
#delivery-flow15:checked ~ #delivery-flow15-content,
#diamond15:checked ~ #diamond15-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
}   #colorbox, #cboxOverlay, #cboxWrapper {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
} #cboxWrapper {
max-width: none;
} #cboxOverlay {
position: fixed;
width: 100%;
height: 100%;
} #cboxMiddleLeft, #cboxBottomLeft {
clear: left;
} #cboxContent {
position: relative;
} #cboxLoadedContent {
overflow: auto;
-webkit-overflow-scrolling: touch;
} #cboxTitle {
margin: 0;
} #cboxLoadingOverlay, #cboxLoadingGraphic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor: pointer;
} .cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic;
} .cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
padding: 0;
margin: 0;
} #colorbox, #cboxContent, #cboxLoadedContent {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}  #cboxOverlay {
background: #fff;
} #colorbox {
outline: 0;
} #cboxContent {
margin-top: 32px;
overflow: visible;
background: #000;
} .cboxIframe {
background: #fff;
} #cboxError {
padding: 50px;
border: 1px solid #ccc;
} #cboxLoadedContent {
background: #000;
padding: 1px;
} #cboxLoadingOverlay {
background: #000;
} #cboxTitle {
position: absolute;
top: -22px;
left: 0;
color: #000;
} #cboxCurrent {
position: absolute;
top: -22px;
right: 205px;
text-indent: -9999px;
}  #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
text-indent: -9999px;
width: 20px;
height: 20px;
position: absolute;
top: -20px;
background: url(//www.7-7maruka.com/kanri/css/images/controls.png) no-repeat 0 0;
}  #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
outline: 0;
} #cboxPrevious {
background-position: 0px 0px;
right: 44px;
} #cboxPrevious:hover {
background-position: 0px -25px;
} #cboxNext {
background-position: -25px 0px;
right: 22px;
} #cboxNext:hover {
background-position: -25px -25px;
} #cboxClose {
background-position: -50px 0px;
right: 0;
} #cboxClose:hover {
background-position: -50px -25px;
} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
right: 66px;
} .cboxSlideshow_on #cboxSlideshow {
background-position: -75px -25px;
right: 44px;
} .cboxSlideshow_on #cboxSlideshow:hover {
background-position: -100px -25px;
} .cboxSlideshow_off #cboxSlideshow {
background-position: -100px 0px;
right: 44px;
} .cboxSlideshow_off #cboxSlideshow:hover {
background-position: -75px -25px;
} #colorbox #cboxTitle {
width: 100%;
color: #218541;
font-weight: bold;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px;
border-radius: 5px 5px 0 0;
} #colorbox #cboxClose {
background: url(//www.7-7maruka.com/kanri/images/icon/icon_multiply_w.svg) no-repeat center;
background-color: #666666;
background-size: 60% 60%;
width: 32px;
height: 32px;
top: -32px;
right: 0px;
} #colorbox #cboxNext {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg) no-repeat center;
background-color: #218541;
background-size: 70% 70%;
width: 35px;
height: 35px;
top: calc(50% - 17px);
right: 0;
border: 1px solid #959595;
opacity: 0.8;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px;
border-radius: 5px 0 0 5px;
} #colorbox #cboxPrevious {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-left-w.svg) no-repeat center;
background-color: #218541;
background-size: 70% 70%;
width: 35px;
height: 35px;
top: calc(50% - 17px);
left: 0;
border: 1px solid #959595;
opacity: 0.8;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0;
border-radius: 0 5px 5px 0;
}   .p-jewelry-mainvisual {
overflow: hidden;
margin-top: 10px;
}
@media screen and (min-width: 980px) { .p-jewelry-mainvisual {
margin-top: 0;
}
} .p-jewelry-mainvisual--wrap {
background-size: cover;
background-position: center;
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;
max-height: 600px;
height: 70vh;
padding: 0 20px;
position: relative;
} .p-jewelry-mainvisual--wrap img {
width: auto;
height: auto;
} .p-jewelry-mainvisual_carousel {
padding: 0 40px;
} .p-jewelry-mainvisual_carousel--list {
margin: auto;
max-width: 760px;
position: relative;
} .p-jewelry-mainvisual_carousel .carousel-arrow {
height: 18px;
width: 40px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
} .p-jewelry-mainvisual_carousel .carousel-arrow:before {
background-color: #fff;
content: '';
display: block;
height: 1px;
width: 40px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
} .p-jewelry-mainvisual_carousel .carousel-arrow:after {
background-color: #fff;
content: '';
display: block;
height: 1px;
width: 12px;
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 9px;
margin: auto;
} .p-jewelry-mainvisual_carousel .carousel-arrow:hover {
cursor: pointer;
} .p-jewelry-mainvisual_carousel .carousel-arrow.prev-arrow {
left: -40px;
} .p-jewelry-mainvisual_carousel .carousel-arrow.prev-arrow:after {
transform: rotate(-45deg);
left: -1px;
margin: auto;
} .p-jewelry-mainvisual_carousel .carousel-arrow.next-arrow {
right: -40px;
} .p-jewelry-mainvisual_carousel .carousel-arrow.next-arrow:after {
right: -1px;
margin: auto;
} .p-jewelry-mainvisual_carousel--wrap {
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-jewelry-mainvisual_carousel figure {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
flex-direction: column;
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure {
flex-direction: row-reverse;
}
} .p-jewelry-mainvisual_carousel figure > picture {
aspect-ratio: 1 / 1;
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;
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure > picture {
margin: 0 0 0 15px;
}
} .p-jewelry-mainvisual_carousel figure > picture img {
object-fit: contain;
max-height: 320px;
max-width: calc(320 * (100vw / 768));
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure > picture img {
max-width: 320px;
}
} .p-jewelry-mainvisual_carousel figure figcaption .brandname {
color: #fff;
font-size: calc(60 * (100vw / 768));
padding-bottom: 10px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-jewelry-mainvisual_carousel figure figcaption .brandname {
font-size: calc(40 * (100vw / 768));
padding-bottom: 20px;
}
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure figcaption .brandname {
font-size: calc(40 * (100vw / 980));
text-align: left;
}
}
@media screen and (min-width: 980px) { .p-jewelry-mainvisual_carousel figure figcaption .brandname {
font-size: 40px;
font-size: 2.5rem;
}
} .p-jewelry-mainvisual_carousel figure figcaption .list .wrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
margin: 5px 0 0;
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap {
margin: 22px 0 0;
}
} .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dt {
color: #fff;
font-size: calc(16 * (100vw / 768));
width: 130px;
}
@media screen and (min-width: 576px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dt {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dt {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dt {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd {
color: #fff;
font-size: calc(30 * (100vw / 768));
letter-spacing: .2rem;
}
@media screen and (min-width: 576px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd {
font-size: 20px;
font-size: 1.25rem;
}
} .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd.amount {
font-size: calc(48 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd.amount {
font-size: calc(32 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd.amount {
font-size: calc(32 * (100vw / 980));
}
}
@media screen and (min-width: 980px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd.amount {
font-size: 32px;
font-size: 2rem;
}
} .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd .unit {
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd .unit {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd .unit {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd .unit {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd .btn {
font-size: calc(32 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd .btn {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd .btn {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) { .p-jewelry-mainvisual_carousel figure figcaption .list .wrap dd .btn {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-mainvisual_carousel figure figcaption .btn {
margin: 15px 0 0;
text-align: center;
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure figcaption .btn {
margin: 32px 0 0;
text-align: left;
}
} .p-jewelry-mainvisual_carousel figure figcaption .btn a {
background-color: initial;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 5px;
color: #ffffff;
display: inline-block;
font-size: calc(18 * (100vw / 768));
padding: 20px 50px;
text-align: center;
transition: .3s;
}
@media screen and (min-width: 576px) { .p-jewelry-mainvisual_carousel figure figcaption .btn a {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-mainvisual_carousel figure figcaption .btn a {
font-size: 12px;
font-size: 0.75rem;
}
} .p-jewelry-mainvisual_carousel figure figcaption .btn a:hover {
box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.8);
} .p-jewelry-about {
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .p-jewelry-about {
padding: 60px 0;
}
} .p-jewelry-about--wrap {
margin: auto;
max-width: 850px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-jewelry-about--title {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-jewelry-about--title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-about--title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-jewelry-about--textarea {
text-align: left;
}
@media screen and (min-width: 840px) { .p-jewelry-about--textarea {
text-align: center;
}
} .p-jewelry-about--btn {
text-align: center;
padding-top: 30px;
} .p-jewelry-results {
padding: calc(80 * (100vw / 980)) 0;
}
@media screen and (min-width: 980px) { .p-jewelry-results {
flex-direction: row;
padding: 80px 0;
}
} .p-jewelry-results--wrap {
flex-grow: 1;
margin: 0 auto;
max-width: calc(100% - 360px);
} .p-jewelry-results_navi {
position: sticky;
top: 63px;
width: 100%;
z-index: 100;
}
@media screen and (min-width: 980px) { .p-jewelry-results_navi {
float: left;
left: 0;
max-width: 300px;
top: 0;
}
} .p-jewelry-results_block {
flex-grow: 1;
margin: auto;
width: 90%;
}
@media screen and (min-width: 980px) { .p-jewelry-results_block {
padding-left: 320px;
width: 100%;
}
} .p-jewelry-results_block .c-results:first-of-type {
padding-top: 0;
} .p-jewelry-features {
padding: 35px 0 0;
}
@media screen and (min-width: 840px) { .p-jewelry-features {
padding: 60px 0 0;
}
} .p-jewelry-features--title {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-jewelry-features--title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-jewelry-features--wrap {
margin: auto;
max-width: 850px;
margin: 0 auto 30px;
padding: 0 20px;
position: relative;
width: 100%;
}
@media screen and (min-width: 980px) { .p-jewelry-features--wrap {
margin: 0 auto 50px;
}
} .p-jewelry-features--wrap .title {
background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
line-height: 1.2;
margin: 0 0 25px;
padding: 20px 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .title {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .title {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features--wrap .subtitle {
font-weight: bold;
font-size: calc(24 * (100vw / 768));
line-height: 1.7;
margin: 0 0 20px;
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .subtitle {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .subtitle {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features--wrap .content {
color: #394656;
word-wrap: break-word;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 6px;
margin-bottom: 0.375rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
@media screen and (min-width: 980px) { .p-jewelry-features--wrap .content {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 12px;
margin-bottom: 0.75rem;
line-height: 2;
}
} .p-jewelry-features--wrap .content .pc {
display: none;
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .content .pc {
display: block;
}
} .p-jewelry-features--wrap .content .sp {
display: block;
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .content .sp {
display: none;
}
} .p-jewelry-features--wrap .content h1 {
font-weight: bold;
font-size: calc(30 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .content h1 {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .content h1 {
font-size: 20px;
font-size: 1.25rem;
}
} .p-jewelry-features--wrap .content h2 {
font-weight: bold;
font-size: calc(27 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .content h2 {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .content h2 {
font-size: 18px;
font-size: 1.125rem;
}
} .p-jewelry-features--wrap .content h3 {
font-weight: bold;
font-size: calc(27 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .content h3 {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .content h3 {
font-size: 18px;
font-size: 1.125rem;
}
} .p-jewelry-features--wrap .content h4 {
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .content h4 {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .content h4 {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features--wrap .content h5 {
font-weight: bold;
font-size: calc(22.5 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .content h5 {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .content h5 {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-jewelry-features--wrap .content h6 {
font-weight: bold;
font-size: calc(22.5 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .content h6 {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .content h6 {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-jewelry-features--wrap .content strong {
font-weight: bold;
} .p-jewelry-features--wrap .content em {
font-style: italic;
} .p-jewelry-features--wrap .content ul {
display: block;
text-align: left;
} .p-jewelry-features--wrap .content ul li {
display: block;
text-indent: -1.3rem;
padding-left: 1rem;
margin-bottom: 5px;
} .p-jewelry-features--wrap .content ul li:before {
content: "・";
color: #218541;
} .p-jewelry-features--wrap .content ol li {
display: block;
text-indent: -1.3rem;
padding-left: 1rem;
margin-bottom: 5px;
} .p-jewelry-features--wrap .content ol li:before {
content: "・";
color: #218541;
} .p-jewelry-features--wrap .content a {
color: #0ea7c9;
font-weight: bold;
text-decoration: underline;
} .p-jewelry-features--wrap .content img {
background-color: #efece4;
border: 10px solid #fff;
border-radius: 5px;
margin: auto;
padding: 10px;
max-height: 300px;
max-width: 80%;
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .content img {
border: 20px solid #fff;
padding: 20px;
}
} .p-jewelry-features--wrap .content p {
margin: 10px 0 0;
} .p-jewelry-features--wrap .tab {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
position: relative;
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .tab {
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
} .p-jewelry-features--wrap .tab--wrap {
width: 100%;
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .tab--wrap {
width: calc(96% / 3);
}
} .p-jewelry-features--wrap .tab--wrap:not(:first-of-type) {
margin: 15px 0 0;
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .tab--wrap:not(:first-of-type) {
margin: 0 0 0 2%;
}
} .p-jewelry-features--wrap .tab--wrap input {
display: none;
} .p-jewelry-features--wrap .tab--wrap input:checked + dt {
box-shadow: 0px -5px 0px #808080;
transition: .4s;
} .p-jewelry-features--wrap .tab--wrap input:checked + dt label {
background-color: #0ea7c9;
border: 5px solid #fff;
} .p-jewelry-features--wrap .tab--wrap input:checked + dt + dd .text {
opacity: 1;
visibility: visible;
max-height: 60vh;
transition: .4s;
} .p-jewelry-features--wrap .tab--wrap input:checked + dt + dd .bg {
background-color: rgba(0, 0, 0, 0.3);
display: block;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 9;
} .p-jewelry-features--wrap .tab--wrap dt {
box-shadow: 0px 5px 0px #808080;
border-radius: 5px;
transition: .4s;
height: 100%;
overflow: hidden;
} .p-jewelry-features--wrap .tab--wrap dt label {
background-color: #929292;
border: 5px solid #929292;
color: #fff;
cursor: pointer;
display: block;
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;
font-size: calc(24 * (100vw / 768));
line-height: 1.7;
transition: .4s;
text-align: center;
height: 100%;
padding: 8px;
} .p-jewelry-features--wrap .tab--wrap dt label:hover {
opacity: 0.7;
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .tab--wrap dt label {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .tab--wrap dt label {
font-size: 14px;
font-size: 0.875rem;
}
} .p-jewelry-features--wrap .tab--wrap dd .text {
background-color: #fff;
opacity: 0;
visibility: hidden;
max-height: 0;
overflow-y: scroll;
padding: 30px 25px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 500px;
width: 96vw;
z-index: 10;
transition: .4s;
} .p-jewelry-features--wrap .tab--wrap dd .close {
background-color: #555;
border-radius: 5px;
color: #fff;
display: block;
font-size: calc(26 * (100vw / 768));
letter-spacing: .1rem;
line-height: 1;
margin: 20px auto 0;
padding: 10px calc(33 * (100vw / 768)) 10px 18px;
position: relative;
text-align: center;
width: 49%;
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .tab--wrap dd .close {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .tab--wrap dd .close {
font-size: 13px;
font-size: 0.8125rem;
padding: 16px calc(33 * (100vw / 768)) 16px 18px;
}
}
@media screen and (min-width: 980px) { .p-jewelry-features--wrap .tab--wrap dd .close {
padding: 16px 22px 16px 18px;
}
} .p-jewelry-features--wrap .tab--wrap dd .close:hover {
cursor: pointer;
} .p-jewelry-features--wrap .tab--wrap dd .close:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: calc(22 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 980px) { .p-jewelry-features--wrap .tab--wrap dd .close:before {
right: 15px;
}
} .p-jewelry-features--wrap .block-tab .tab--wrap {
background: #ffffff;
border: 2px solid #808080;
border-radius: 5px;
margin: 0 auto 20px;
width: 100%;
} .p-jewelry-features--wrap .block-tab .tab--wrap .block-tab-btn {
background: #808080;
color: #ffffff;
cursor: pointer;
display: block;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
padding: 10px;
transition: .3s;
line-height: 1.7;
width: 100%;
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .block-tab .tab--wrap .block-tab-btn {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .block-tab .tab--wrap .block-tab-btn {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features--wrap .block-tab .tab--wrap .block-tab-btn:hover {
opacity: 0.7;
} .p-jewelry-features--wrap .block-tab .tab--wrap .block-tab-btn .open {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-down-w.svg) no-repeat right center;
background-size: 15px 15px;
display: block;
padding-right: 20px;
} .p-jewelry-features--wrap .block-tab .tab--wrap .block-tab-btn .close {
background: url(//www.7-7maruka.com/kanri/images/icon/icon_multiply_w.svg) no-repeat right center;
background-size: 15px 15px;
display: none;
padding-right: 20px;
} .p-jewelry-features--wrap .block-tab .tab--wrap .block-tab-contents {
background: #ffffff;
color: #394656;
font-size: calc(24 * (100vw / 768));
padding: 10px;
line-height: 1.7;
width: 100%;
}
@media screen and (min-width: 576px) { .p-jewelry-features--wrap .block-tab .tab--wrap .block-tab-contents {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features--wrap .block-tab .tab--wrap .block-tab-contents {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features--wrap .block-tab input[name="tab_name"]:checked + .p-page-tab .open {
display: none;
} .p-jewelry-features--wrap .block-tab input[name="tab_name"]:checked + .p-page-tab .close {
display: block;
} .p-jewelry-features_navi {
padding: 0;
position: sticky;
top: 0;
z-index: 10;
}
@media screen and (min-width: 840px) { .p-jewelry-features_navi {
padding: 0;
position: relative;
}
} .p-jewelry-features_navi aside {
padding: 0;
position: sticky;
top: 0;
}
@media screen and (min-width: 980px) { .p-jewelry-features_navi aside {
width: 360px;
}
} .p-jewelry-features_navi--container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
margin: auto;
max-width: 700px;
width: 90%;
}
@media screen and (min-width: 980px) { .p-jewelry-features_navi--container {
flex-direction: column;
max-width: 260px;
}
} .p-jewelry-features_navi--wrap {
padding: 0 2%;
width: 50%;
}
@media screen and (min-width: 980px) { .p-jewelry-features_navi--wrap {
width: auto;
}
}
@media screen and (min-width: 980px) { .p-jewelry-features_navi--wrap:not(:first-of-type) {
margin: 25px 0 0;
}
} .p-jewelry-features_navi--wrap dt {
font-size: calc(21 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .p-jewelry-features_navi--wrap dt {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_navi--wrap dt {
font-size: 14px;
font-size: 0.875rem;
}
} .p-jewelry-features_navi--list > li {
margin: 8px 0 0;
} .p-jewelry-features_navi--list > li:first-of-type {
margin: 5px 0 0;
}
@media screen and (min-width: 840px) { .p-jewelry-features_navi--list > li:first-of-type {
margin: 15px 0 0;
}
} .p-jewelry-features_navi--list > li a {
border: 1px solid #fff;
padding: 8px 18px;
}
@media screen and (min-width: 840px) { .p-jewelry-features_navi--list > li a {
padding: 16px 18px;
}
} .p-jewelry-features_navi--list.valuation > li a {
border: 1px solid #555;
padding: 8px 18px;
}
@media screen and (min-width: 840px) { .p-jewelry-features_navi--list.valuation > li a {
padding: 16px 18px;
}
} .p-jewelry-features_block--wrap {
margin: auto;
max-width: 850px;
margin: 0 auto 30px;
padding: 0 20px;
position: relative;
width: 100%;
}
@media screen and (min-width: 980px) { .p-jewelry-features_block--wrap {
margin: 0 auto 50px;
}
} .p-jewelry-features_block--wrap .title {
background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
line-height: 1.2;
margin: 0 0 25px;
padding: 20px 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .title {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .title {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features_block--wrap .subtitle {
font-weight: bold;
font-size: calc(24 * (100vw / 768));
line-height: 1.7;
margin: 0 0 20px;
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .subtitle {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .subtitle {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features_block--wrap .content {
color: #394656;
word-wrap: break-word;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 6px;
margin-bottom: 0.375rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
@media screen and (min-width: 980px) { .p-jewelry-features_block--wrap .content {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 12px;
margin-bottom: 0.75rem;
line-height: 2;
}
} .p-jewelry-features_block--wrap .content .pc {
display: none;
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .content .pc {
display: block;
}
} .p-jewelry-features_block--wrap .content .sp {
display: block;
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .content .sp {
display: none;
}
} .p-jewelry-features_block--wrap .content h1 {
font-weight: bold;
font-size: calc(30 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .content h1 {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .content h1 {
font-size: 20px;
font-size: 1.25rem;
}
} .p-jewelry-features_block--wrap .content h2 {
font-weight: bold;
font-size: calc(27 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .content h2 {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .content h2 {
font-size: 18px;
font-size: 1.125rem;
}
} .p-jewelry-features_block--wrap .content h3 {
font-weight: bold;
font-size: calc(27 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .content h3 {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .content h3 {
font-size: 18px;
font-size: 1.125rem;
}
} .p-jewelry-features_block--wrap .content h4 {
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .content h4 {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .content h4 {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features_block--wrap .content h5 {
font-weight: bold;
font-size: calc(22.5 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .content h5 {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .content h5 {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-jewelry-features_block--wrap .content h6 {
font-weight: bold;
font-size: calc(22.5 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .content h6 {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .content h6 {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-jewelry-features_block--wrap .content strong {
font-weight: bold;
} .p-jewelry-features_block--wrap .content em {
font-style: italic;
} .p-jewelry-features_block--wrap .content ul {
display: block;
text-align: left;
} .p-jewelry-features_block--wrap .content ul li {
display: block;
text-indent: -1.3rem;
padding-left: 1rem;
margin-bottom: 5px;
} .p-jewelry-features_block--wrap .content ul li:before {
content: "・";
color: #218541;
} .p-jewelry-features_block--wrap .content ol li {
display: block;
text-indent: -1.3rem;
padding-left: 1rem;
margin-bottom: 5px;
} .p-jewelry-features_block--wrap .content ol li:before {
content: "・";
color: #218541;
} .p-jewelry-features_block--wrap .content a {
color: #0ea7c9;
font-weight: bold;
text-decoration: underline;
} .p-jewelry-features_block--wrap .content img {
background-color: #efece4;
border: 10px solid #fff;
border-radius: 5px;
margin: auto;
padding: 10px;
max-height: 300px;
max-width: 80%;
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .content img {
border: 20px solid #fff;
padding: 20px;
}
} .p-jewelry-features_block--wrap .content p {
margin: 10px 0 0;
} .p-jewelry-features_block--wrap .tab {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
position: relative;
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .tab {
flex-direction: row;
}
} .p-jewelry-features_block--wrap .tab--wrap {
width: 100%;
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .tab--wrap {
width: calc(96% / 3);
}
} .p-jewelry-features_block--wrap .tab--wrap:not(:first-of-type) {
margin: 15px 0 0;
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .tab--wrap:not(:first-of-type) {
margin: 0 0 0 2%;
}
} .p-jewelry-features_block--wrap .tab--wrap input {
display: none;
} .p-jewelry-features_block--wrap .tab--wrap input:checked + dt {
box-shadow: 0px -5px 0px #808080;
transition: .4s;
} .p-jewelry-features_block--wrap .tab--wrap input:checked + dt label {
background-color: #0ea7c9;
border: 5px solid #fff;
} .p-jewelry-features_block--wrap .tab--wrap input:checked + dt + dd .text {
opacity: 1;
visibility: visible;
max-height: 60vh;
transition: .4s;
} .p-jewelry-features_block--wrap .tab--wrap input:checked + dt + dd .bg {
background-color: rgba(0, 0, 0, 0.3);
display: block;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 9;
} .p-jewelry-features_block--wrap .tab--wrap dt {
box-shadow: 0px 5px 0px #808080;
border-radius: 5px;
transition: .4s;
height: 100%;
overflow: hidden;
} .p-jewelry-features_block--wrap .tab--wrap dt label {
background-color: #929292;
border: 5px solid #929292;
color: #fff;
display: block;
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;
font-size: calc(24 * (100vw / 768));
line-height: 1.7;
transition: .4s;
text-align: center;
height: 100%;
padding: 8px;
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .tab--wrap dt label {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .tab--wrap dt label {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features_block--wrap .tab--wrap dd .text {
background-color: #fff;
opacity: 0;
visibility: hidden;
max-height: 0;
overflow-y: scroll;
padding: 30px 25px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 500px;
width: 96vw;
z-index: 10;
transition: .4s;
} .p-jewelry-features_block--wrap .tab--wrap dd .close {
background-color: #555;
border-radius: 5px;
color: #fff;
display: block;
font-size: calc(26 * (100vw / 768));
letter-spacing: .1rem;
line-height: 1;
margin: 20px auto 0;
padding: 10px calc(33 * (100vw / 768)) 10px 18px;
position: relative;
text-align: center;
width: 49%;
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .tab--wrap dd .close {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .tab--wrap dd .close {
font-size: 13px;
font-size: 0.8125rem;
padding: 16px calc(33 * (100vw / 768)) 16px 18px;
}
}
@media screen and (min-width: 980px) { .p-jewelry-features_block--wrap .tab--wrap dd .close {
padding: 16px 22px 16px 18px;
}
} .p-jewelry-features_block--wrap .tab--wrap dd .close:hover {
cursor: pointer;
} .p-jewelry-features_block--wrap .tab--wrap dd .close:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: calc(22 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 980px) { .p-jewelry-features_block--wrap .tab--wrap dd .close:before {
right: 15px;
}
} .p-jewelry-features_block--wrap .block-tab .tab--wrap {
background: #ffffff;
border: 2px solid #808080;
border-radius: 5px;
margin: 0 auto 20px;
width: 100%;
} .p-jewelry-features_block--wrap .block-tab .tab--wrap .block-tab-btn {
background: #808080;
color: #ffffff;
cursor: pointer;
display: block;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
padding: 10px;
transition: .3s;
line-height: 1.7;
width: 100%;
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .block-tab .tab--wrap .block-tab-btn {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .block-tab .tab--wrap .block-tab-btn {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features_block--wrap .block-tab .tab--wrap .block-tab-btn:hover {
opacity: 0.7;
} .p-jewelry-features_block--wrap .block-tab .tab--wrap .block-tab-btn .open {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-down-w.svg) no-repeat right center;
background-size: 15px 15px;
display: block;
padding-right: 20px;
} .p-jewelry-features_block--wrap .block-tab .tab--wrap .block-tab-btn .close {
background: url(//www.7-7maruka.com/kanri/images/icon/icon_multiply_w.svg) no-repeat right center;
background-size: 15px 15px;
display: none;
padding-right: 20px;
} .p-jewelry-features_block--wrap .block-tab .tab--wrap .block-tab-contents {
background: #ffffff;
color: #394656;
font-size: calc(24 * (100vw / 768));
padding: 10px;
line-height: 1.7;
width: 100%;
}
@media screen and (min-width: 576px) { .p-jewelry-features_block--wrap .block-tab .tab--wrap .block-tab-contents {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-features_block--wrap .block-tab .tab--wrap .block-tab-contents {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-features_block--wrap .block-tab input[name="tab_name"]:checked + .p-page-tab .open {
display: none;
} .p-jewelry-features_block--wrap .block-tab input[name="tab_name"]:checked + .p-page-tab .close {
display: block;
} .p-jewelry-point {
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-jewelry-point {
padding: 60px 0;
}
} .p-jewelry-point--wrap {
background-color: #eef0f0;
max-width: 1211px;
margin: 0 auto;
position: relative;
width: 100%;
padding: 35px 10px 30px;
}
@media screen and (min-width: 840px) { .p-jewelry-point--wrap {
padding: 60px 20px;
}
}
@media screen and (min-width: 980px) { .p-jewelry-point--wrap {
padding: 80px 20px;
}
} .p-jewelry-point--wrap .title {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-jewelry-point--wrap .title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-point--wrap .title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-jewelry-point--list {
margin: auto;
max-width: 900px;
} .p-jewelry-point--list li:not(:first-of-type) {
margin: 50px 0 0 0;
} .p-jewelry-point--list li figure {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
flex-direction: column-reverse;
}
@media screen and (min-width: 840px) { .p-jewelry-point--list li figure {
flex-direction: row-reverse;
}
} .p-jewelry-point--list li figure > picture {
margin: 20px 0;
max-width: 280px;
text-align: center;
}
@media screen and (min-width: 840px) { .p-jewelry-point--list li figure > picture {
margin: 0 0 0 40px;
width: 100%;
}
} .p-jewelry-point--list li figure > picture img {
width: 100%;
}
@media screen and (min-width: 840px) { .p-jewelry-point--list li figure figcaption {
width: calc(100% - 280px);
}
} .p-jewelry-point--list li figure figcaption .point {
max-width: 120px;
}
@media screen and (min-width: 840px) { .p-jewelry-point--list li figure figcaption .point {
max-width: 165px;
}
} .p-jewelry-point--list li figure figcaption .subtitle {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding: 20px 0;
text-align: center;
line-height: 1.5;
}
@media screen and (min-width: 576px) { .p-jewelry-point--list li figure figcaption .subtitle {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-point--list li figure figcaption .subtitle {
text-align: left;
font-size: 20px;
font-size: 1.25rem;
padding: 20px 0 20px 45px;
}
} .p-jewelry-point--list li figure figcaption .text {
color: #394656;
word-wrap: break-word;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 6px;
margin-bottom: 0.375rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
@media screen and (min-width: 840px) { .p-jewelry-point--list li figure figcaption .text {
padding: 0 0 0 45px;
}
}
@media screen and (min-width: 980px) { .p-jewelry-point--list li figure figcaption .text {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 12px;
margin-bottom: 0.75rem;
line-height: 2;
}
} .p-jewelry-regulation {
background-color: #fff;
border-radius: 5px;
margin: calc(40 * (100vw / 980)) auto;
padding: 20px;
max-width: 900px;
}
@media screen and (min-width: 840px) { .p-jewelry-regulation {
margin: 40px auto 0;
}
} .p-jewelry-regulation--wrap {
background-color: #e7f1f5;
border-radius: 5px;
padding: 4%;
} .p-jewelry-regulation--wrap .title {
line-height: 1.2;
margin: 0 0 20px;
padding: 0 0 20px;
font-weight: bold;
font-size: calc(30 * (100vw / 768));
text-align: center;
}
@media screen and (min-width: 576px) { .p-jewelry-regulation--wrap .title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-regulation--wrap .title {
font-size: 20px;
font-size: 1.25rem;
}
} .p-jewelry-regulation--list > li .subtitle {
background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
line-height: 1.2;
margin: 0 0 25px;
padding: 20px 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-jewelry-regulation--list > li .subtitle {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-regulation--list > li .subtitle {
font-size: 16px;
font-size: 1rem;
}
} .p-jewelry-regulation--list > li .textarea {
font-size: calc(24 * (100vw / 768));
line-height: 2;
}
@media screen and (min-width: 576px) { .p-jewelry-regulation--list > li .textarea {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-jewelry-regulation--list > li .textarea {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-jewelry-regulation--list > li .textarea ul {
margin: 10px auto;
} .p-jewelry.jewelry .c-breadcrumbs {
background: #eef0f0;
} .p-jewelry.jewelry .c-breadcrumbs--list {
margin-bottom: 0;
padding: 0 0 15px;
} .p-item-category-box--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-box--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-box--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-item-category-another {
background: #F0F0F0;
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .p-item-category-another {
padding: 60px 0;
}
} .p-item-category-another--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-item-category-another--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 10px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-another--ttl {
font-size: calc(20 * (100vw / 768));
padding-bottom: 30px;
}
}
@media screen and (min-width: 840px) { .p-item-category-another--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-item-category-another--contents {
margin: 0 auto;
} .p-item-category-another--list {
background: #ffffff;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 20px;
row-gap: 20px;
height: 220px;
padding: 20px;
overflow: scroll;
}
@media screen and (min-width: 840px) { .p-item-category-another--list {
height: 420px;
padding: 30px 20px;
row-gap: 50px;
}
}
@media screen and (min-width: 980px) { .p-item-category-another--list {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
@media screen and (min-width: 1211px) { .p-item-category-another--list {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
} .p-item-category-another--item {
display: block;
padding: 0 0 13px;
border-bottom: 1px dotted #d3d3d3;
} .p-item-category-another--link {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
height: 100%;
} .p-item-category-another--data {
color: #394656;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
} .p-item-category-another--data img {
display: block;
aspect-ratio: 1.5 / 1;
object-fit: cover;
} .p-item-category-another--data figcaption {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
flex-grow: 1;
} .p-item-category-another--data figcaption .series {
flex-grow: 1;
font-size: calc(21 * (100vw / 768));
letter-spacing: .05em;
line-height: 1.2;
margin: 6px auto 0;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-another--data figcaption .series {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-another--data figcaption .series {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4;
margin: 14px auto 0;
}
} .p-item-category-another--btn {
text-align: center;
padding-top: 10px;
}
@media screen and (min-width: 840px) { .p-item-category-another--btn {
padding-top: 20px;
}
} .p-item-category-another--btn .in {
display: inline-block;
color: #394656;
font-size: calc(21 * (100vw / 768));
letter-spacing: .05em;
text-align: center;
text-decoration: underline;
}
@media screen and (min-width: 576px) { .p-item-category-another--btn .in {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-another--btn .in {
font-size: 14px;
font-size: 0.875rem;
}
} .p-top-menomae {
background: #f7f7f7;
}
.p-top-menomae--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px 10px;
position: relative;
width: 100%;
}
@media screen and (min-width: 900px) {
.p-top-menomae--wrap {
padding: 0 20px 0;
}
}
.p-top-menomae-text {
padding: 55px 0 0;
font-size: calc(28*(100vw / 768));
letter-spacing: 0.1em;
font-weight: 600;
}
@media screen and (min-width: 900px) {
.p-top-menomae-text {
padding: 160px 0 0 4%;
font-size: calc(24*(100vw / 1200));
}
}
@media screen and (min-width: 1200px) {
.p-top-menomae-text {
padding: 160px 0 0 115px;
font-size: 24px;
}
}
.p-top-menomae-text-span {
position: relative;
padding: 0 6% 0 5%;
}
@media screen and (min-width: 900px) {
.p-top-menomae-text-span {
padding: 0 40px 0 30px;
}
}
.p-top-menomae-text-span:before, .p-top-menomae-text-span:after {
width: 10%;
height: 1px;
background: #394656;
content: "";
position: absolute;
top: 50%;
}
@media screen and (min-width: 900px) {
.p-top-menomae-text-span:before, .p-top-menomae-text-span:after {
width: 18px;
}
}
.p-top-menomae-text-span:before {
left: 0;
}
.p-top-menomae-text-span:after {
right: 5%;
}
@media screen and (min-width: 900px) {
.p-top-menomae-text-span:after {
right: 13px;
}
}
.p-top-menomae-ttl {
letter-spacing: 0.045em;
font-size: calc(42*(100vw / 768));
font-weight: 600;
line-height: 42px;
writing-mode: vertical-rl;
position: relative;
padding: 0;
margin: 7% 10% 0 auto;
letter-spacing: 0.172rem;
}
@media screen and (min-width: 576px) {
.p-top-menomae-ttl {
line-height: 4rem;
padding-bottom: 10px;
}
}
@media screen and (min-width: 900px) {
.p-top-menomae-ttl {
font-size: calc(42*(100vw / 1200));
padding: 20px 0 85px 5%;
writing-mode: unset;
margin: 0 auto;
}
}
@media screen and (min-width: 1200px) {
.p-top-menomae-ttl {
font-size: 42px;
padding: 20px 0 85px 125px;
margin: 0 auto;
}
}
.p-top-menomae-ttl-span {
display: block;
padding-top: 3rem
}
.p-top-menomae-ttl-span:after {
content: "";
width: 1px;
height: 1.5rem;
background: #394656;
position: relative;
display: inline-block;
top: 10px;
}
@media screen and (min-width: 576px) {
.p-top-menomae-ttl-span:after {
width: 1px;
height: 2rem;
}
}
@media screen and (min-width: 900px) {
.p-top-menomae-ttl-span {
display: inline-block;
padding: 0;
}
.p-top-menomae-ttl-span:after {
content: "。";
background: none;
top: 0
}
}
.p-top-menomae-img {
position: absolute;
width: 53%;
left: 10%;
top: 32%;
}
@media screen and (min-width: 576px) {
.p-top-menomae-img {
width: 48%;
top: 25%;
}
}
@media screen and (min-width: 900px) {
.p-top-menomae-img {
width: 35%;
position: absolute;
right: 55px;
top: -30px;
left: auto;
}
}
@media screen and (min-width: 1200px) {
.p-top-menomae-img {
width: auto;
right: 85px;
}
} .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-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;
} .c-faq {
padding: 50px 0;
}
@media screen and (min-width: 768px) {
.c-faq {
padding: 80px 0;
}
}
.c-faq--wrap {
margin: auto;
max-width: 1200px;
width: 96vw;
}
.c-faq_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-faq_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-faq_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-faq_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-faq--container {
display: flex;
margin: 40px 0 0;
}
.c-faq_index {
display: none;
}
@media screen and (min-width: 980px) {
.c-faq_index {
display: block;
width: 450px;
}
}
.c-faq_index > li label {
background-image: linear-gradient(to right, #bfbfbf 0%, rgba(0, 0, 0, 0) 0%);
background-size: 0 0;
cursor: pointer;
display: flex;
align-items: center;
font-size: calc(16 * (100vw / 520));
line-height: 1.4;
margin: 0 0 25px;
padding: 0;
transition: .4s;
}
@media screen and (min-width: 520px) {
.c-faq_index > li label {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-faq_index > li label {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-faq_index > li label {
font-size: 16px;
font-size: 1rem;
}
}
.c-faq_index > li label:hover {
background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
font-weight: 700;
padding: 0 0 20px;
}
.c-faq_index > li label::before {
content: 'Q.';
margin: 0 .6rem 0 0;
}
.c-faq_index > li label::after {
background-image: url(//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-faq_detail {
background-color: #fff;
border-radius: 5px;
height: 60vh;
overflow-y: scroll;
padding: 25px;
width: 100%;
}
@media screen and (min-width: 980px) {
.c-faq_detail {
background-color: inherit;
height: auto;
margin: 0 0 0 4%;
overflow-y: inherit;
padding: 0;
width: calc(96% - 450px);
}
}
.c-faq_detail--wrap {
margin: 0 0 60px;
}
@media screen and (min-width: 980px) {
.c-faq_detail--wrap {
margin: 0;
max-height: 0;
visibility: hidden;
opacity: 0;
}
}
.c-faq_detail--wrap .question {
background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
display: flex;
color: #83c5e8;
font-weight: bold;
font-size: calc(18 * (100vw / 520));
font-weight: 500;
line-height: 1.4;
margin: 0 0 25px;
padding: 0 0 25px;
}
@media screen and (min-width: 520px) {
.c-faq_detail--wrap .question {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-faq_detail--wrap .question {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-faq_detail--wrap .question {
font-size: 16px;
font-size: 1rem;
}
}
.c-faq_detail--wrap .question::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-shoplist_blue.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: top 0 left;
content: 'Q.';
display: block;
height: 20px;
line-height: 1.2;
margin: 0 .6rem 0 0;
width: 12px;
padding: 0 0 3px 16px;
}
.c-faq_detail--wrap .answer {
font-size: calc(18 * (100vw / 520));
line-height: 2;
margin: 0 0 10px;
}
@media screen and (min-width: 520px) {
.c-faq_detail--wrap .answer {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-faq_detail--wrap .answer {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-faq_detail--wrap .answer {
font-size: 16px;
font-size: 1rem;
}
}
.c-faq_detail--wrap .answer::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-shoplist_pink.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: top 0 left;
color: #f17989;
content: 'A.';
display: block;
height: 20px;
line-height: 1.2;
margin: 0 .6rem 10px 0;
width: 12px;
padding: 0 0 3px 16px;
}
.c-faq_detail--check:checked + .c-faq_detail--wrap {
max-height: 999vh;
opacity: 1;
visibility: visible;
} .c-voice {
padding: 50px 0;
}
@media screen and (min-width: 768px) {
.c-voice {
padding: 80px 0;
}
}
.c-voice--wrap {
margin: auto;
max-width: 1200px;
width: 96vw;
}
.c-voice_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-voice_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-voice_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-voice_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-voice--container {
display: flex;
margin: 40px 0 0;
}
.c-voice_index {
display: none;
}
@media screen and (min-width: 980px) {
.c-voice_index {
display: block;
width: 450px;
}
}
.c-voice_index > li label {
background-image: linear-gradient(to right, #bfbfbf 0%, rgba(0, 0, 0, 0) 0%);
background-size: 0 0;
cursor: pointer;
display: flex;
align-items: center;
font-size: calc(16 * (100vw / 520));
line-height: 1.4;
margin: 0 0 25px;
padding: 0;
transition: .4s;
}
@media screen and (min-width: 520px) {
.c-voice_index > li label {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-voice_index > li label {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-voice_index > li label {
font-size: 16px;
font-size: 1rem;
}
}
.c-voice_index > li label:hover {
background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
font-weight: 700;
padding: 0 0 20px;
}
.c-voice_index > li label::after {
background-image: url(//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-voice_detail {
background-color: #fff;
border-radius: 5px;
height: 60vh;
overflow-y: scroll;
padding: 25px;
width: 100%;
}
@media screen and (min-width: 980px) {
.c-voice_detail {
background-color: inherit;
height: auto;
margin: 0 0 0 4%;
overflow-y: inherit;
padding: 0;
width: calc(96% - 450px);
}
}
.c-voice_detail--wrap {
margin: 0 0 60px;
}
@media screen and (min-width: 980px) {
.c-voice_detail--wrap {
margin: 0;
max-height: 0;
visibility: hidden;
opacity: 0;
}
}
.c-voice_detail--wrap .title {
display: flex;
color: #83c5e8;
font-weight: bold;
font-size: calc(18 * (100vw / 520));
font-weight: 500;
line-height: 1.4;
margin: 0 0 10px;
}
@media screen and (min-width: 520px) {
.c-voice_detail--wrap .title {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-voice_detail--wrap .title {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-voice_detail--wrap .title {
font-size: 16px;
font-size: 1rem;
}
}
.c-voice_detail--wrap .title::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-shoplist_blue.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: top 0 left;
content: '';
display: block;
height: 20px;
line-height: 1.2;
margin: 0 .2rem 0 0;
width: 12px;
padding: 0 0 3px;
}
.c-voice_detail--wrap .customer {
background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
font-size: calc(18 * (100vw / 520));
line-height: 2;
margin: 0 0 25px;
padding: 0 0 25px;
}
@media screen and (min-width: 520px) {
.c-voice_detail--wrap .customer {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-voice_detail--wrap .customer {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-voice_detail--wrap .customer {
font-size: 16px;
font-size: 1rem;
}
}
.c-voice_detail--wrap .staff {
font-size: calc(16 * (100vw / 520));
line-height: 2;
}
@media screen and (min-width: 520px) {
.c-voice_detail--wrap .staff {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-voice_detail--wrap .staff {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-voice_detail--wrap .staff {
font-size: 16px;
font-size: 1rem;
}
}
.c-voice_detail--check:checked + .c-voice_detail--wrap {
max-height: 999vh;
opacity: 1;
visibility: visible;
}
.c-faq + .c-voice {
padding: 10px 0 40px;
}
@media screen and (min-width: 768px) {
.c-faq + .c-voice {
padding: 10px 0 80px;
}
} .c-author {
padding: 40px 0;
}
@media screen and (min-width: 768px) {
.c-author {
padding: 80px 0;
}
}
.c-author--wrap {
background-color: #fff;
border-radius: 5px;
margin: auto;
max-width: 1000px;
padding: 20px;
width: 96vw;
}
.c-author--container {
background-color: #efece4;
border-radius: 5px;
padding: 20px;
}
@media screen and (min-width: 768px) {
.c-author--container {
padding: 60px;
}
}
.c-author_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-author_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-author_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-author_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-author_intro {
display: flex;
justify-content: space-between;
flex-direction: column-reverse;
margin: 25px 0 0 0;
}
@media screen and (min-width: 768px) {
.c-author_intro {
flex-direction: row;
margin: 45px 0 0 0;
}
}
.c-author_intro .textarea {
background-image: linear-gradient(to right, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px), linear-gradient(to left, #bfbfbf 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px,10px 2px;
background-repeat: repeat-x,repeat-x;
background-position: left top,right bottom;
font-size: calc(18 * (100vw / 520));
line-height: 2;
max-width: 500px;
padding: 15px 0;
}
@media screen and (min-width: 520px) {
.c-author_intro .textarea {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-author_intro .textarea {
font-size: calc(16 * (100vw / 980));
padding: 30px 0;
}
}
@media screen and (min-width: 980px) {
.c-author_intro .textarea {
font-size: 16px;
font-size: 1rem;
}
}
.c-author_intro figure {
margin: 0 0 15px;
text-align: center;
}
@media screen and (min-width: 768px) {
.c-author_intro figure {
margin: 0 0 0 35px;
}
}
.c-author_intro figure img {
max-height: 170px;
}
.c-author_personal {
margin: 10px 0 0 0;
}
.c-author_personal--wrap {
display: flex;
align-items: center;
}
.c-author_personal--wrap:not(:first-of-type) {
margin: 10px 0 0;
}
.c-author_personal--wrap dt {
border: 1px solid #394656;
border-radius: 5px;
font-size: calc(18 * (100vw / 520));
font-weight: 500;
text-align: center;
width: 130px;
}
@media screen and (min-width: 520px) {
.c-author_personal--wrap dt {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-author_personal--wrap dt {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-author_personal--wrap dt {
font-size: 12px;
font-size: 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-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-results {
padding: 50px 0 70px;
}
@media screen and (min-width: 768px) {
.c-results {
padding: 60px 0 80px;
}
}
.c-results--wrap {
margin: auto;
width: 98%;
}
.c-results_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-results_title {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-results_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-results_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-results_list {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 40px 0 0;
}
.c-results_list > article {
max-width: 225px;
padding: 8px 2px;
width: calc(100% / 4);
}
@media screen and (min-width: 430px) {
.c-results_list > article {
width: calc(100% / 4);
}
}
@media screen and (min-width: 520px) {
.c-results_list > article {
padding: 10px 3px;
width: calc(100% / 4);
}
}
@media screen and (min-width: 768px) {
.c-results_list > article {
width: calc(100% / 4);
}
}
@media screen and (min-width: 980px) {
.c-results_list > article {
width: calc(100% / 4);
}
}
@media screen and (min-width: 1150px) {
.c-results_list > article {
width: calc(100% / 4);
}
}
@media screen and (min-width: 1400px) {
.c-results_list > article {
width: calc(100% / 8);
}
}
@media screen and (min-width: 1700px) {
.c-results_list > article {
width: calc(100% / 8);
}
}
.c-results_list > article a {
background-color: #fff;
border-radius: 5px;
display: block;
height: 100%;
overflow: hidden;
}
.c-results_list figure {
height: 100%;
display: flex;
flex-direction: column;
}
.c-results_list figure picture {
background-color: #fff;
display: block;
height: 100px;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-results_list figure picture {
height: 125px;
}
}
@media screen and (min-width: 980px) {
.c-results_list figure picture {
height: 155px;
}
}
.c-results_list figure picture img {
object-fit: cover;
height: 100%;
margin: auto;
}
.c-results_list figure figcaption {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 15px 3.5%;
}
.c-results_list .brandname {
color: #394656;
flex-grow: 1;
font-size: calc(16 * (100vw / 520));
line-height: 1.2;
overflow: hidden;
}
@media screen and (min-width: 520px) {
.c-results_list .brandname {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-results_list .brandname {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-results_list .brandname {
font-size: calc(16 * (100vw / 1150));
}
}
@media screen and (min-width: 1150px) {
.c-results_list .brandname {
font-size: calc(16 * (100vw / 1400));
}
}
@media screen and (min-width: 1400px) {
.c-results_list .brandname {
font-size: calc(16 * (100vw / 1700));
}
}
@media screen and (min-width: 1700px) {
.c-results_list .brandname {
font-size: 16px;
font-size: 1rem;
}
}
.c-results_list .amount {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
font-size: calc(12 * (100vw / 520));
margin: 5px 0 10px;
}
@media screen and (min-width: 520px) {
.c-results_list .amount {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-results_list .amount {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-results_list .amount {
font-size: calc(14 * (100vw / 1150));
}
}
@media screen and (min-width: 1150px) {
.c-results_list .amount {
font-size: calc(14 * (100vw / 1400));
}
}
@media screen and (min-width: 1400px) {
.c-results_list .amount {
font-size: calc(14 * (100vw / 1700));
}
}
@media screen and (min-width: 1700px) {
.c-results_list .amount {
font-size: 14px;
font-size: 0.875rem;
}
}
.c-results_list .amount .prefix {
font-weight: 700;
width: 100%;
}
.c-results_list .amount .int {
color: #f17989;
font-family: "Lato", serif;
font-size: calc(19 * (100vw / 520));
font-weight: 700;
letter-spacing: .02rem;
margin: 3px 0 0;
}
@media screen and (min-width: 520px) {
.c-results_list .amount .int {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-results_list .amount .int {
font-size: calc(24 * (100vw / 980));
letter-spacing: .05rem;
}
}
@media screen and (min-width: 980px) {
.c-results_list .amount .int {
font-size: calc(24 * (100vw / 1150));
}
}
@media screen and (min-width: 1150px) {
.c-results_list .amount .int {
font-size: calc(24 * (100vw / 1400));
}
}
@media screen and (min-width: 1400px) {
.c-results_list .amount .int {
font-size: calc(23 * (100vw / 1700));
}
}
@media screen and (min-width: 1700px) {
.c-results_list .amount .int {
font-size: 24px;
font-size: 1.5rem;
}
}
.c-results_list .amount .yen {
color: #394656;
}
.c-results_list--more {
margin: 10px 0 0;
}
.c-results_list--more > p {
background-color: #81a6c9;
border-radius: 5px;
color: #fff;
display: block;
font-size: calc(20 * (100vw / 520));
margin: auto;
max-width: 260px;
padding: 16px 10px;
position: relative;
text-align: center;
width: 96%;
}
@media screen and (min-width: 520px) {
.c-results_list--more > p {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-results_list--more > p {
font-size: calc(16 * (100vw / 980));
max-width: 320px;
padding: 23px 10px;
}
}
@media screen and (min-width: 980px) {
.c-results_list--more > p {
font-size: 16px;
font-size: 1rem;
}
}
.c-results_list--more > p:hover {
background-color: #9bbddd;
}
.c-results_list--more > p::after {
background-image: url(//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-priorityitem {
padding: 50px 0 70px;
}
@media screen and (min-width: 768px) {
.c-priorityitem {
padding: 60px 0 80px;
}
}
.c-priorityitem--wrap {
margin: auto;
max-width: 1200px;
width: 96%;
}
.c-priorityitem_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-priorityitem_title {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-priorityitem_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-priorityitem_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-priorityitem_list {
display: flex;
flex-wrap: wrap;
margin: 40px 0 0;
}
.c-priorityitem_list > li {
padding: 5px;
width: calc(100% / 3);
}
@media screen and (min-width: 768px) {
.c-priorityitem_list > li {
width: calc(100% / 4);
}
}
@media screen and (min-width: 980px) {
.c-priorityitem_list > li {
width: calc(100% / 5);
}
}
@media screen and (min-width: 1150px) {
.c-priorityitem_list > li {
width: calc(100% / 6);
}
}
.c-priorityitem_list > li a {
display: block;
height: 100%;
}
.c-priorityitem_list > li figure {
background-color: #fff;
border-radius: 5px;
height: 100%;
transition: .4s;
}
.c-priorityitem_list > li figure:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.c-priorityitem_list > li figure picture {
display: flex;
align-items: center;
justify-content: center;
transition: .4s;
}
.c-priorityitem_list > li figure picture img {
max-height: 80px;
}
.c-priorityitem_list > li figure figcaption {
margin: 5px 0 0;
}
@media screen and (min-width: 768px) {
.c-priorityitem_list > li figure figcaption {
margin: 10px 0 0;
}
}
.c-priorityitem_list > li figure figcaption .series {
display: flex;
align-items: center;
justify-content: space-between;
font-size: calc(16 * (100vw / 520));
}
@media screen and (min-width: 520px) {
.c-priorityitem_list > li figure figcaption .series {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-priorityitem_list > li figure figcaption .series {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-priorityitem_list > li figure figcaption .series {
font-size: 16px;
font-size: 1rem;
}
}
.c-priorityitem_list > li figure figcaption .series::after {
background-image: url(//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: 768px) {
.c-priorityitem_list > li figure figcaption .series::after {
height: 25px;
width: 25px;
}
}
.c-priorityitem_list--checkbox {
display: none;
}
.c-priorityitem_list--checkbox:checked ~ .c-priorityitem_itemlist--textarea {
opacity: 1;
visibility: visible;
transition: .4s;
max-height: 60vh;
}
.c-priorityitem_list--checkbox:checked ~ .c-priorityitem_itemlist--bg {
background-color: rgba(0, 0, 0, 0.3);
display: block;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 9;
}
.c-priorityitem_list--label {
background-color: #fff;
border-radius: 5px;
display: block;
height: 100%;
max-width: 280px;
padding: 5px 10px;
}
.c-priorityitem_list--label:hover {
cursor: pointer;
}
.c-priorityitem_list--label picture img {
aspect-ratio: 1.5 / 1;
object-fit: contain;
width: 100%;
}
.c-priorityitem_list--textarea {
background-color: #fff;
border-radius: 5px;
padding: 30px 15px;
max-width: 500px;
width: 96vw;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
transition: .4s;
max-height: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 10;
}
.c-priorityitem_list--textarea > picture img {
margin: auto;
}
.c-priorityitem_list--textarea .text {
font-size: calc(16 * (100vw / 520));
margin: 25px auto 0;
}
@media screen and (min-width: 520px) {
.c-priorityitem_list--textarea .text {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-priorityitem_list--textarea .text {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-priorityitem_list--textarea .text {
font-size: 16px;
font-size: 1rem;
}
}
.c-priorityitem_list--textarea .btn {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
margin: 25px auto 0;
}
.c-priorityitem_list--textarea .btn .link {
background-color: #81a7c8;
border-radius: 5px;
color: #fff;
display: block;
font-size: calc(26 * (100vw / 768));
letter-spacing: .1rem;
padding: 10px calc(33 * (100vw / 768)) 10px 18px;
position: relative;
text-align: center;
width: 49%;
}
@media screen and (min-width: 520px) {
.c-priorityitem_list--textarea .btn .link {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-priorityitem_list--textarea .btn .link {
font-size: 13px;
font-size: 0.8125rem;
padding: 16px calc(33 * (100vw / 768)) 16px 18px;
}
}
@media screen and (min-width: 980px) {
.c-priorityitem_list--textarea .btn .link {
padding: 16px 22px 16px 18px;
}
}
.c-priorityitem_list--textarea .btn .link:hover {
cursor: pointer;
}
.c-priorityitem_list--textarea .btn .link:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: calc(22 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 980px) {
.c-priorityitem_list--textarea .btn .link:before {
right: 15px;
}
}
.c-priorityitem_list--textarea .btn .close {
background-color: #555;
border-radius: 5px;
color: #fff;
display: block;
font-size: calc(26 * (100vw / 768));
letter-spacing: .1rem;
line-height: 1;
padding: 10px calc(33 * (100vw / 768)) 10px 18px;
position: relative;
text-align: center;
width: 49%;
}
@media screen and (min-width: 520px) {
.c-priorityitem_list--textarea .btn .close {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-priorityitem_list--textarea .btn .close {
font-size: 13px;
font-size: 0.8125rem;
padding: 16px calc(33 * (100vw / 768)) 16px 18px;
}
}
@media screen and (min-width: 980px) {
.c-priorityitem_list--textarea .btn .close {
padding: 16px 22px 16px 18px;
}
}
.c-priorityitem_list--textarea .btn .close:hover {
cursor: pointer;
}
.c-priorityitem_list--textarea .btn .close:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: calc(22 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 980px) {
.c-priorityitem_list--textarea .btn .close:before {
right: 15px;
}
} .c-caption-type01 {
padding: 30px 0;
}
@media screen and (min-width: 768px) {
.c-caption-type01 {
padding: 60px 0 80px;
}
}
.c-caption-type01--wrap {
position: relative;
margin: 0 auto;
max-width: 1150px;
text-align: center;
width: 96%;
}
.c-caption-type01--wrap picture img {
display: inline-block;
width: 100%;
max-width: 100%;
} .c-column {
background: #F0F0F0;
padding: 30px 0;
}
@media screen and (min-width: 768px) {
.c-column {
padding: 60px 0 80px;
}
}
.c-column--wrap {
margin: auto;
max-width: 1200px;
width: 96vw;
}
.c-column h2 {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
letter-spacing: 1px;
}
@media screen and (min-width: 520px) {
.c-column h2 {
font-size: calc(24 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-column h2 {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-column h2 {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-column ul {
background: #ffffff;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
height: 220px;
padding: 20px 10px;
overflow: scroll;
margin: 40px auto 0;
}
@media screen and (min-width: 980px) {
.c-column ul {
height: 580px;
margin: 60px auto 0;
padding: 20px;
}
}
.c-column ul li {
margin-bottom: 20px;
width: 25%;
}
@media screen and (min-width: 768px) {
.c-column ul li {
width: calc(100% / 6);
}
}
@media screen and (min-width: 980px) {
.c-column ul li {
width: calc(100% / 8);
}
}
.c-column ul li a {
border-bottom: 1px dotted #d3d3d3;
display: block;
padding: 0 10px 40px;
position: relative;
height: 100%;
}
.c-column ul li a figure {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
}
.c-column ul li a figure figcaption {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 15px;
}
.c-column ul li a figure figcaption .name {
color: #394656;
display: block;
font-size: calc(16 * (100vw / 520));
}
@media screen and (min-width: 520px) {
.c-column ul li a figure figcaption .name {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-column ul li a figure figcaption .name {
font-size: calc(14 * (100vw / 980));
letter-spacing: .05em;
}
}
@media screen and (min-width: 980px) {
.c-column ul li a figure figcaption .name {
font-size: 14px;
font-size: 0.875rem;
}
}
.c-column ul li a .btn {
color: #394656;
display: inline-block;
font-size: calc(16 * (100vw / 520));
letter-spacing: .05em;
text-align: center;
text-decoration: underline;
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
}
@media screen and (min-width: 520px) {
.c-column ul li a .btn {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-column ul li a .btn {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-column ul li a .btn {
font-size: 14px;
font-size: 0.875rem;
}
} .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%;
} .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;
}