@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 {
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 {
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 {
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/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/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/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/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/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/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/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/images/common/icon-first-nav.png);
} .c-drawer-info--link.merit .in {
background-image: url(//www.7-7maruka.com/images/common/icon-reason-nav.png);
} .c-drawer-info--link.voice .in {
background-image: url(//www.7-7maruka.com/images/common/icon-voice-nav.png);
} .c-drawer-info--link.qa .in {
background-image: url(//www.7-7maruka.com/images/common/icon-qa-nav.png);
} .c-drawer-info--link.customer .in {
background-image: url(//www.7-7maruka.com/images/common/icon-center.png);
} .c-drawer-info--link.magazine .in {
background-image: url(//www.7-7maruka.com/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/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/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-breadcrumbs {
padding-top: 10px;
} .c-breadcrumbs--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;
margin: 5px auto;
max-width: 98%;
overflow-x: scroll;
overflow-y: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
} .c-breadcrumbs--list::-webkit-scrollbar {
display: none;
} .c-breadcrumbs--list > li {
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;
margin: 0 0 0 8px;
} .c-breadcrumbs--list > li:hover {
text-decoration: underline;
} .c-breadcrumbs--list > li:not(:first-of-type)::before {
border-top: 1px solid #555;
border-right: 1px solid #555;
content: '';
display: block;
transform: rotate(45deg);
height: 5px;
width: 5px;
margin: 0 8px 0 0;
} .c-breadcrumbs--list > li a {
color: #555;
font-size: calc(15 * (100vw / 768));
text-decoration: none;
}
@media screen and (min-width: 576px) { .c-breadcrumbs--list > li a {
font-size: calc(10 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-breadcrumbs--list > li a {
font-size: 10px;
font-size: 0.625rem;
}
}  .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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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;
} .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;
} .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: 2;
}
.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-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;
}  .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/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/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/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/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/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/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/images/icon/icon-mypage.webp);
} .p-header-sp-nav--item .link .in {
background: url(//www.7-7maruka.com/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 {
} .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/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/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/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/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/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/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/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/old/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/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/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/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;
}
#chatplusview, chat {
position: relative;
z-index: 1;
} .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;
}