@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");  @font-face {
font-family: YuGothicM;
src: local("Yu Gothic Medium");
}  html {
font-size: 100%;
line-height: 1.5em;
}  html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}  article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
} body {
line-height: 1;
} ol, ul {
list-style: none;
} blockquote, q {
quotes: none;
} blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
} table {
border-collapse: collapse;
border-spacing: 0;
} * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} body {
background-color: #f7f7f7;
overflow-x: hidden;
font-size: calc(16 * (100vw / 520));
line-height: 1.4;
color: #394656;
width: 100vw;
position: relative;
font-family: "Zen Kaku Gothic New", sans-serif;
-webkit-font-feature-settings: "pkna";
font-feature-settings: "pkna";
}
@media screen and (min-width: 520px) {
body {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
body {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
body {
overflow-x: hidden !important;
font-size: 16px;
font-size: 1rem;
}
} a {
cursor: pointer;
text-decoration: none;
transition: .4s;
line-height: 1;
} a:hover {
color: inherit;
} p {
color: #394656;
word-break: break-all;
} img {
height: auto;
vertical-align: bottom;
max-width: 100%;
width: auto;
} .pc-show {
display: none;
}
@media screen and (min-width: 980px) { .pc-show {
display: block;
}
}
@media screen and (min-width: 980px) { .sp-show {
display: none;
}
}  .l-main {
position: relative;
}  .c-basic-h2 {
color: #80C6C4;
font-size: 35px;
font-size: 2.1875rem;
font-weight: 300;
line-height: 1.2;
letter-spacing: .3rem;
}
@media screen and (min-width: 840px) { .c-basic-h2 {
font-size: 50px;
font-size: 3.125rem;
}
}
@media screen and (min-width: 980px) { .c-basic-h2 {
font-size: 80px;
font-size: 5rem;
}
} .c-basic-h2.vertical {
line-height: 1.1;
transform: rotate(90deg);
} .c-basic-h2--gap {
display: block;
margin: 0 0 0 10rem;
} .c-basic-h3 {
color: #80C6C4;
font-size: 32px;
font-size: 2rem;
font-weight: 300;
line-height: 1.2;
} .c-basic-h3 span {
color: #AA8E76;
display: block;
font-size: 18px;
font-size: 1.125rem;
font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin: 0 0 10px;
padding: 0 0 0 30px;
position: relative;
} .c-basic-h3 span::before {
background-color: #80C6C4;
content: "";
display: block;
height: 2px;
width: 20px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}  .c-basic-txt,
.c-error-message,
.p-item-category-features_block--wrap .content ul li,
.p-item-category-features_block--wrap .content ol li {
color: #394656;
word-wrap: break-word;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 6px;
margin-bottom: 0.375rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
@media screen and (min-width: 980px) { .c-basic-txt,
.c-error-message,
.p-item-category-features_block--wrap .content ul li,
.p-item-category-features_block--wrap .content ol li {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 12px;
margin-bottom: 0.75rem;
line-height: 2;
}
} .c-basic-txt:last-of-type,
.c-error-message:last-of-type,
.p-item-category-features_block--wrap .content ul li:last-of-type,
.p-item-category-features_block--wrap .content ol li:last-of-type {
margin-bottom: 0;
} .c-small-txt {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 3px;
margin-bottom: 0.18rem;
font-size: 12px;
font-size: 0.75rem;
line-height: 24px;
line-height: 1.5rem;
}
@media screen and (min-width: 980px) { .c-small-txt {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 6px;
margin-bottom: 0.375rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
} .c-small-txt:last-of-type {
margin-bottom: 0;
} .c-error-message {
display: inline-block;
color: #e74c3c;
margin-top: .5rem;
}  .c-basic-btn {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg) no-repeat center right 10px;
background-size: 15px 15px;
background-color: #81a6c9;
border-radius: 5px;
cursor: pointer;
display: inline-block;
max-width: 90%;
padding: 10px 15px 15px;
transition: .3s;
text-align: center;
width: 100%;
}
@media screen and (min-width: 576px) { .c-basic-btn {
padding: 20px 15px 22px;
max-width: 320px;
}
} .c-basic-btn.green {
background-color: #4EB5B9;
} .c-basic-btn.purple {
background-color: #9277c4;
} .c-basic-btn.red {
background-color: #ad7597;
} .c-basic-btn .in {
color: #ffffff;
display: inline-block;
font-weight: bold;
font-size: calc(22 * (100vw / 768));
width: 100%;
}
@media screen and (min-width: 576px) { .c-basic-btn .in {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-basic-btn .in {
font-size: 14px;
font-size: 0.875rem;
}
} .c-basic-btn:hover {
box-shadow: 0px 0px 15px -5px #777777;
}  .c-btn-popup .c-btn-popup--open {
cursor: pointer;
} .c-btn-popup .c-btn-popup--open:hover {
opacity: 0.7;
} .c-btn-popup .c-btn-popup--overlay,
.c-btn-popup--close-overlay {
display: none;
} .c-btn-popup input {
display: none;
} .c-btn-popup input:checked ~ .c-btn-popup--overlay {
display: block;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
} .c-btn-popup input:checked ~ .c-btn-popup--close-overlay {
display: block;
background-color: #00000070;
cursor: pointer;
position: fixed;
height: 100vh;
top: 0;
left: 0;
width: 100%;
z-index: 99998;
} .c-btn-popup .c-btn-popup--window {
width: 90%;
max-width: 720px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} .c-btn-popup .c-btn-popup--close {
background: #000000;
border-radius: 100%;
cursor: pointer;
position: absolute;
top: -10px;
right: -10px;
width: 40px;
height: 40px;
padding: 11px;
}  .c-txtarea {
resize: none;
width: 100%;
height: 10rem;
padding: .5rem;
border: 0;
border: 1px solid #dddddd;
border-radius: 4px;
background-color: #fafafa;
font-size: 16px;
font-size: 1rem;
color: #555555;
font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
} .c-txtarea::placeholder {
color: #cccccc;
} .c-txtarea.is-entered {
background-color: #ffffff;
} .c-drawer {
background-color: #f7f7f7;
height: 100vh;
padding: 0;
max-width: 0;
width: 90vw;
overflow-y: scroll;
overflow-x: hidden;
position: fixed;
right: -390px;
transition: .4s;
z-index: 501;
scrollbar-color: #929292 #fff;
scrollbar-width: thin;
}
.c-drawer::-webkit-scrollbar {
width: 8px;
background-color: #fff;
}
.c-drawer::-webkit-scrollbar-thumb {
background: #929292;
width: 6px;
border-radius: 5px;
}
.c-drawer-btn label {
display: flex;
align-items: center;
justify-content: flex-end;
cursor: pointer;
}
.c-drawer-btn .icon {
background-color: #81a6c9;
border-radius: 50px;
cursor: pointer;
height: 50px;
width: 50px;
position: relative;
transition: .4s;
}
.c-drawer-btn .icon::before, .c-drawer-btn .icon::after {
background-color: #fff;
content: '';
display: block;
height: 2px;
width: 18px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.c-drawer-btn .icon::before {
top: 14px;
transition: .4s;
}
.c-drawer-btn .icon::after {
bottom: 14px;
transition: .4s;
}
.c-drawer-btn .icon:hover {
background-color: #6889a9;
}
.c-drawer-btn .icon .border {
color: #fff;
font-size: calc(11 * (100vw / 520));
font-weight: 500;
position: absolute;
bottom: 5px;
left: 0;
right: 0;
letter-spacing: -.1rem;
margin: auto;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-drawer-btn .icon .border {
font-size: calc(11 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-btn .icon .border {
font-size: calc(11 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-btn .icon .border {
font-size: 11px;
font-size: 0.6875rem;
}
}
.c-drawer-highlighted {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 5px auto 0;
}
.c-drawer-highlighted li {
margin: 0 0 8px;
width: 49%;
}
.c-drawer-highlighted li:first-of-type {
width: 100%;
}
.c-drawer-highlighted li a {
border-radius: 5px;
color: #394656;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(18 * (100vw / 520));
font-weight: 500;
}
@media screen and (min-width: 520px) {
.c-drawer-highlighted li a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-highlighted li a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-highlighted li a {
font-size: 16px;
font-size: 1rem;
}
}
.c-drawer-highlighted li a::before {
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
border-radius: 50px;
content: '';
display: block;
height: 50px;
width: 25px;
}
.c-drawer-highlighted li a.results {
background-color: #b29443;
color: #fff;
}
.c-drawer-highlighted li a.results:hover {
background-color: #977c32;
}
.c-drawer-highlighted li a.results::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-results.webp);
background-size: 30px;
height: 50px;
width: 40px;
}
.c-drawer-highlighted li a.shop {
background-color: #b7d5cd;
}
.c-drawer-highlighted li a.shop:hover {
background-color: #8fbdb1;
}
.c-drawer-highlighted li a.shop::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-shop.webp);
background-size: 30px;
height: 50px;
width: 40px;
}
.c-drawer-highlighted li a.mypage {
background-color: #f9dad6;
}
.c-drawer-highlighted li a.mypage:hover {
background-color: #e7bdb8;
}
.c-drawer-highlighted li a.mypage::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-mypage.webp);
}
.c-drawer-assessment {
background-color: #f0f0f0;
margin: 20px auto 0;
padding: 15px 8px;
}
.c-drawer-assessment_title {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(22 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-drawer-assessment_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-assessment_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-assessment_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-drawer-assessment_title::before, .c-drawer-assessment_title::after {
background-color: #FEF07F;
content: '';
display: block;
height: 2px;
width: 40px;
}
.c-drawer-assessment_title::before {
transform: rotate(60deg);
}
.c-drawer-assessment_title::after {
transform: rotate(-60deg);
}
.c-drawer-assessment_title .reduce {
display: block;
font-size: 80%;
}
.c-drawer-assessment_list {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 15px auto 0;
}
.c-drawer-assessment_list > li {
margin: 0 0 8px;
width: 48%;
}
.c-drawer-assessment_list > li:nth-of-type(2n+1) {
margin: 0 2% 8px 0;
}
.c-drawer-assessment_list > li a {
border-radius: 5px;
color: #394656;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(18 * (100vw / 520));
font-weight: 500;
padding: 10px;
transition: .4s;
}
@media screen and (min-width: 520px) {
.c-drawer-assessment_list > li a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-assessment_list > li a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-assessment_list > li a {
font-size: 16px;
font-size: 1rem;
}
}
.c-drawer-assessment_list > li a img {
margin: 0 6px 0 0;
max-width: 25px;
}
.c-drawer-assessment_list > li a.counter {
background-color: #b7d5cd;
}
.c-drawer-assessment_list > li a.counter:hover {
background-color: #8fbdb1;
}
.c-drawer-assessment_list > li a.line {
background-color: #0abf7d;
color: #fff;
font-size: calc(16 * (100vw / 520));
max-height: 45px;
letter-spacing: -.05rem;
padding: 15px 5px;
}
@media screen and (min-width: 520px) {
.c-drawer-assessment_list > li a.line {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-assessment_list > li a.line {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-assessment_list > li a.line {
font-size: 14px;
font-size: 0.875rem;
}
}
.c-drawer-assessment_list > li a.line:hover {
background-color: #35d99d;
}
.c-drawer-assessment_list > li a.line img {
margin: 0 3px;
max-width: 20px;
}
.c-drawer-assessment_list > li a.delivery {
background-color: #f9dad6;
}
.c-drawer-assessment_list > li a.delivery:hover {
background-color: #e7bdb8;
}
.c-drawer-assessment_list > li a.bulgeout {
background-color: #83c5e8;
}
.c-drawer-assessment_list > li a.bulgeout:hover {
background-color: #6889a9;
}
.c-drawer-nav {
margin: 37px auto 0;
padding: 0 10px;
}
.c-drawer-nav_title {
font-size: calc(22 * (100vw / 520));
font-weight: 700;
margin: 0 0 15px;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-drawer-nav_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-nav_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-nav_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-drawer-nav_title .reduce {
display: flex;
align-items: center;
justify-content: center;
font-size: 80%;
}
.c-drawer-nav_title .reduce::before, .c-drawer-nav_title .reduce::after {
background-color: #FEF07F;
content: '';
display: block;
height: 2px;
width: 20px;
margin: 0 5px;
}
.c-drawer-nav_title .reduce::before {
transform: rotate(60deg);
}
.c-drawer-nav_title .reduce::after {
transform: rotate(-60deg);
}
.c-drawer-nav_list {
display: flex;
flex-wrap: wrap;
}
.c-drawer-nav_list > li {
margin: 0 0 18px;
width: 48%;
}
.c-drawer-nav_list > li:first-of-type {
width: 100%;
}
.c-drawer-nav_list > li:nth-of-type(2n+3) {
margin: 0 0 18px 4%;
}
.c-drawer-nav_list > li a {
color: #394656;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
transition: .4s;
}
@media screen and (min-width: 520px) {
.c-drawer-nav_list > li a {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-nav_list > li a {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-nav_list > li a {
font-size: 14px;
font-size: 0.875rem;
}
}
.c-drawer-nav_list > li figure picture {
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
transition: .4s;
}
.c-drawer-nav_list > li figure picture:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.c-drawer-nav_list > li figure picture img {
max-height: 75px;
}
.c-drawer-nav_list > li figure figcaption {
margin: 3px 0 0;
}
.c-drawer-nav_sublist {
display: flex;
flex-wrap: wrap;
}
.c-drawer-nav_sublist > li {
margin: 0 0 18px;
width: 48%;
}
.c-drawer-nav_sublist > li:nth-of-type(2n+2) {
margin: 0 0 18px 4%;
}
.c-drawer-nav_sublist > li a {
color: #394656;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
transition: .4s;
}
@media screen and (min-width: 520px) {
.c-drawer-nav_sublist > li a {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-nav_sublist > li a {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-nav_sublist > li a {
font-size: 14px;
font-size: 0.875rem;
}
}
.c-drawer-nav_sublist > li figure picture {
background-color: #fff;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
transition: .4s;
}
.c-drawer-nav_sublist > li figure picture:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.c-drawer-nav_sublist > li figure picture img {
max-height: 75px;
}
.c-drawer-nav_sublist > li figure figcaption {
margin: 3px 0 0;
}
.c-drawer-about {
background-color: #efece4;
margin: 34px auto 0;
padding: 15px 8px;
}
.c-drawer-about_title {
font-size: calc(22 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-drawer-about_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-about_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-about_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-drawer-about_title .reduce {
display: block;
font-size: 80%;
}
.c-drawer-about_list {
display: flex;
flex-wrap: wrap;
margin: 15px 0 0;
}
.c-drawer-about_list > li {
margin: 0 0 10px;
width: 48%;
}
.c-drawer-about_list > li:nth-of-type(2n+2) {
margin: 0 0 10px 4%;
}
.c-drawer-about_list > li a {
background: #81a6c9;
border: 3px solid #ffffff;
border-radius: 5px;
box-sizing: border-box;
color: #fff;
display: flex;
align-items: center;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
min-height: 49px;
padding: 5px;
transition: .4s;
}
@media screen and (min-width: 520px) {
.c-drawer-about_list > li a {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-drawer-about_list > li a {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-drawer-about_list > li a {
font-size: 14px;
font-size: 0.875rem;
}
}
.c-drawer-about_list > li a::after {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-arrow02.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
content: '';
display: block;
height: 8px;
width: 18px;
margin: 0 0 0 5px;
transition: .4s;
}
.c-drawer-about_list > li a:hover {
background-color: #6889a9;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.c-drawer-about_list > li a img {
margin: 0 6px 0 0;
max-width: 20px;
}
.c-drawer-banner {
margin: 25px 0 0;
}
.c-drawer-banner_list {
display: flex;
flex-wrap: wrap;
}
.c-drawer-banner_list > li {
margin: 0 0 10px;
width: 48%;
}
.c-drawer-banner_list > li:nth-of-type(2n+2) {
margin: 0 0 10px 4%;
}
.c-drawer-banner_list > li a {
transition: .4s;
}
.c-drawer-banner_list > li a:hover {
opacity: .7;
}
.c-drawer-acc--container {
max-height: 0;
visibility: hidden;
opacity: 0;
transition: .4s;
}
.c-drawer-acc--more label {
background: url(//www.7-7maruka.com/kanri/images/common/icon-triangle01.svg) center no-repeat;
background-size: 18px;
background-color: #81A6C9;
border-radius: 100%;
cursor: pointer;
display: block;
width: 50px;
height: 50px;
margin: auto;
transition: .4s;
}
.c-drawer-acc--more label:hover {
background-color: #6889a9;
}
.c-drawer-acc--check:checked + .c-drawer-acc > .c-drawer-acc--container {
max-height: 999vh;
visibility: visible;
opacity: 1;
}
.c-drawer-acc--check:checked + .c-drawer-acc > .c-drawer-acc--more label {
transform: rotate(-180deg);
}
#drawer:checked + .c-drawer {
padding: 5px 10px 15px;
max-width: 390px;
right: 0;
}
#drawer:checked + .c-drawer .c-drawer-btn .icon::before {
top: -5px;
transform: rotate(45deg);
}
#drawer:checked + .c-drawer .c-drawer-btn .icon::after {
bottom: 5px;
transform: rotate(-45deg);
}
#drawer:checked ~ .c-drawer-overlay {
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
right: 0;
z-index: 500;
}  .c-breadcrumbs--wrap {
max-width: 1450px;
margin: auto;
width: 96vw;
overflow-x: scroll;
padding: 5px 0;
scrollbar-width: none;
}
.c-breadcrumbs--wrap::-webkit-scrollbar {
display: none;
}
.c-breadcrumbs--list {
display: flex;
align-items: center;
width: 200vw;
}
@media screen and (min-width: 768px) {
.c-breadcrumbs--list {
width: auto;
}
}
.c-breadcrumbs--list > li a {
display: flex;
align-items: center;
color: #394656;
font-size: calc(14 * (100vw / 520));
line-height: 1.2;
}
@media screen and (min-width: 520px) {
.c-breadcrumbs--list > li a {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-breadcrumbs--list > li a {
font-size: calc(12 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-breadcrumbs--list > li a {
font-size: 12px;
font-size: 0.75rem;
}
}
.c-breadcrumbs--list > li a:hover {
text-decoration: underline;
}
.c-breadcrumbs--list > li:not(:first-of-type) a::before {
border-top: 1px solid #394656;
border-right: 1px solid #394656;
content: '';
display: block;
transform: rotate(45deg);
height: 5px;
width: 5px;
margin: 0 5px;
}  .c-followbtn {
background: #efece4;
background: linear-gradient(0deg, #efece4 80%, rgba(239, 236, 228, 0) 80%);
position: fixed;
bottom: 0;
width: 100vw;
}
.c-followbtn_list {
display: flex;
max-width: 768px;
margin: auto;
}
.c-followbtn_list > li {
padding: 0 5px;
width: calc(100% / 3);
}
.c-followbtn_list > li a {
display: block;
padding: 0 0 6px;
} .c-breadcrumbs--wrap {
max-width: 1450px;
margin: auto;
width: 96vw;
overflow-x: scroll;
padding: 5px 0;
scrollbar-width: none;
}
.c-breadcrumbs--wrap::-webkit-scrollbar {
display: none;
}
.c-breadcrumbs--list {
display: flex;
align-items: center;
width: 200vw;
}
@media screen and (min-width: 768px) {
.c-breadcrumbs--list {
width: auto;
}
}
.c-breadcrumbs--list > li a {
display: flex;
align-items: center;
color: #394656;
font-size: calc(14 * (100vw / 520));
line-height: 1.2;
}
@media screen and (min-width: 520px) {
.c-breadcrumbs--list > li a {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-breadcrumbs--list > li a {
font-size: calc(12 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-breadcrumbs--list > li a {
font-size: 12px;
font-size: 0.75rem;
}
}
.c-breadcrumbs--list > li a:hover {
text-decoration: underline;
}
.c-breadcrumbs--list > li:not(:first-of-type) a::before {
border-top: 1px solid #394656;
border-right: 1px solid #394656;
content: '';
display: block;
transform: rotate(45deg);
height: 5px;
width: 5px;
margin: 0 5px;
} .c-itemlist--wrap {
margin: auto;
max-width: 1200px;
padding: 80px 0;
width: 96%;
}
.c-itemlist_title {
font-size: calc(24 * (100vw / 520));
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 520px) {
.c-itemlist_title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-itemlist_title {
font-size: calc(20 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.c-itemlist_title {
font-size: 20px;
font-size: 1.25rem;
}
}
.c-itemlist_list {
display: grid;
grid-template-areas: "bk1 bk1 bk2 bk2" "bk3 bk3 bk4 bk4" "bk5 bk5 bk6 bk6" "bk7 bk7 bk8 bk8" "bk9 bk9 bk10 bk10" "bk11 bk11 bk12 bk12" "bk13 bk13 bk14 bk14" "bk15 bk15 bk16 bk16" "bk17 bk17 bk18 bk18 ";
grid-template-columns: repeat(4, 0.4fr);
grid-template-rows: repeat(7, 0.4fr);
row-gap: 5px;
column-gap: 5px;
margin: 35px 0 0;
}
@media screen and (min-width: 768px) {
.c-itemlist_list {
grid-template-areas: "bk1 bk1 bk2 bk2" "bk1 bk1 bk2 bk2" "bk3 bk3 bk4 bk4" "bk5 bk5 bk6 bk6" "bk7 bk7 bk8 bk9" "bk10 bk11 bk12 bk13" "bk14 bk15 bk16 bk17";
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(7, 1fr);
row-gap: 5px;
column-gap: 5px;
}
}
@media screen and (min-width: 768px) {
.c-itemlist_list {
row-gap: 10px;
column-gap: 10px;
}
}
@media screen and (min-width: 980px) {
.c-itemlist_list {
grid-template-areas: "bk1 bk1 bk1 bk1 bk1 bk2 bk2 bk2 bk2 bk2 bk3 bk3 bk3 bk3 bk3" "bk1 bk1 bk1 bk1 bk1 bk2 bk2 bk2 bk2 bk2 bk4 bk4 bk4 bk4 bk4" "bk5 bk5 bk5 bk5 bk5 bk6 bk6 bk6 bk6 bk6 bk7 bk7 bk7 bk7 bk7" "bk8 bk8 bk8 bk9 bk9 bk9 bk10 bk10 bk10 bk11 bk11 bk11 bk12 bk12 bk12" "bk13 bk13 bk13 bk14 bk14 bk14 bk15 bk15 bk15 bk16 bk16 bk16 bk17 bk17 bk17";
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(5, 1fr);
}
}
@media screen and (min-width: 1400px) {
.c-itemlist_list {
row-gap: 20px;
column-gap: 20px;
}
}
.c-itemlist_list > li:nth-of-type(1) {
grid-area: bk1;
}
.c-itemlist_list > li:nth-of-type(2) {
grid-area: bk2;
}
.c-itemlist_list > li:nth-of-type(3) {
grid-area: bk3;
}
.c-itemlist_list > li:nth-of-type(4) {
grid-area: bk4;
}
.c-itemlist_list > li:nth-of-type(5) {
grid-area: bk5;
}
.c-itemlist_list > li:nth-of-type(6) {
grid-area: bk6;
}
.c-itemlist_list > li:nth-of-type(7) {
grid-area: bk7;
}
.c-itemlist_list > li:nth-of-type(8) {
grid-area: bk8;
}
.c-itemlist_list > li:nth-of-type(9) {
grid-area: bk9;
}
.c-itemlist_list > li:nth-of-type(10) {
grid-area: bk10;
}
.c-itemlist_list > li:nth-of-type(11) {
grid-area: bk11;
}
.c-itemlist_list > li:nth-of-type(12) {
grid-area: bk12;
}
.c-itemlist_list > li:nth-of-type(13) {
grid-area: bk13;
}
.c-itemlist_list > li:nth-of-type(14) {
grid-area: bk14;
}
.c-itemlist_list > li:nth-of-type(15) {
grid-area: bk15;
}
.c-itemlist_list > li:nth-of-type(16) {
grid-area: bk16;
}
.c-itemlist_list > li:nth-of-type(17) {
grid-area: bk17;
}
.c-itemlist_list > li a {
color: #394656;
}
.c-itemlist_list > li figure {
background-color: #fff;
border-radius: 5px;
display: block;
height: 100%;
padding: 10px;
transition: .4s;
}
@media screen and (min-width: 1400px) {
.c-itemlist_list > li figure {
padding: 20px;
}
}
.c-itemlist_list > li figure:hover {
background-color: #fefefe;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.c-itemlist_list > li figure:hover picture {
background-color: #e3e3e3;
}
.c-itemlist_list > li figure figcaption {
display: flex;
align-items: center;
margin: 2px 0 0;
font-size: calc(18 * (100vw / 520));
font-weight: 500;
}
@media screen and (min-width: 520px) {
.c-itemlist_list > li figure figcaption {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.c-itemlist_list > li figure figcaption {
font-size: calc(16 * (100vw / 980));
margin: 10px 0 0;
}
}
@media screen and (min-width: 980px) {
.c-itemlist_list > li figure figcaption {
font-size: calc(16 * (100vw / 1150));
margin: 10px 0 0;
}
}
@media screen and (min-width: 1150px) {
.c-itemlist_list > li figure figcaption {
font-size: 16px;
font-size: 1rem;
}
}
.c-itemlist_list > li figure figcaption::after {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-arrow01.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
content: '';
display: block;
height: 15px;
width: 15px;
margin: 0 0 0 10px;
transition: .4s;
}
@media screen and (min-width: 980px) {
.c-itemlist_list > li figure figcaption::after {
height: 20px;
width: 20px;
}
}
@media screen and (min-width: 1150px) {
.c-itemlist_list > li figure figcaption::after {
height: 25px;
width: 25px;
}
}
.c-itemlist_list > li figure picture {
background-color: #f7f7f7;
border-radius: 5px;
display: block;
transition: .4s;
text-align: center;
}  .c-results {
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .c-results {
padding: 60px 0;
}
} .c-results ~ .c-priorityitem {
padding: 0 0 30px;
}
@media screen and (min-width: 840px) { .c-results ~ .c-priorityitem {
padding: 0 0 60px;
}
} .c-results--title {
color: #394656;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results--title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results--title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-results_itemlist {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10px;
row-gap: 20px;
padding-bottom: 20px;
margin: 0 auto;
}
@media screen and (min-width: 840px) { .c-results_itemlist {
column-gap: 15px;
row-gap: 20px;
padding: 0 20px 20px;
}
}
@media screen and (min-width: 1211px) { .c-results_itemlist {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
max-width: 90%;
}
} .c-results_itemlist > li {
max-width: 168px;
margin: 0 auto;
width: 100%;
} .c-results_itemlist > li a {
display: block;
height: 100%;
border-bottom: 1px dotted #d3d3d3;
padding: 0 0 13px;
} .c-results_itemlist > li figure {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
height: 100%;
} .c-results_itemlist > li figure img {
aspect-ratio: 1.5 /1;
object-fit: cover;
} .c-results_itemlist > li figure figcaption {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
flex-grow: 1;
} .c-results_itemlist > li figure figcaption .series {
flex-grow: 1;
font-size: calc(21 * (100vw / 668));
letter-spacing: .05em;
line-height: 1.2;
margin: 6px auto 0;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results_itemlist > li figure figcaption .series {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist > li figure figcaption .series {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4;
margin: 14px auto 0;
}
} .c-results_itemlist > li figure figcaption .number {
font-size: calc(18 * (100vw / 768));
margin: 5px auto 0;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results_itemlist > li figure figcaption .number {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist > li figure figcaption .number {
font-size: 12px;
font-size: 0.75rem;
}
} .c-results_itemlist > li figure figcaption .amount {
color: #970040;
font-family: "Lato", sans-serif;
font-size: calc(23 * (100vw / 768));
font-weight: bold;
letter-spacing: .05em;
margin: 5px auto 0;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results_itemlist > li figure figcaption .amount {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist > li figure figcaption .amount {
font-size: 16px;
font-size: 1rem;
}
} .c-results_itemlist > li figure figcaption .amount .unit {
color: #394656;
font-size: calc(15 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-results_itemlist > li figure figcaption .amount .unit {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist > li figure figcaption .amount .unit {
font-size: 12px;
font-size: 0.75rem;
}
} .c-results_itemlist--more {
margin: calc(16 * (100vw / 768)) auto 0;
max-width: 280px;
text-align: center;
}
@media screen and (min-width: 840px) { .c-results_itemlist--more {
margin: 16px auto 0;
}
} .c-results_itemlist--more p {
background-color: #83c5e8;
border-radius: 50px;
color: #fff;
display: block;
font-weight: bold;
font-size: calc(26 * (100vw / 668));
letter-spacing: .1rem;
padding: 10px calc(33 * (100vw / 768)) 10px 18px;
position: relative;
text-align: center;
}
@media screen and (min-width: 576px) { .c-results_itemlist--more p {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-results_itemlist--more p {
font-size: 13px;
font-size: 0.8125rem;
padding: 16px calc(33 * (100vw / 768)) 16px 18px;
}
}
@media screen and (min-width: 980px) { .c-results_itemlist--more p {
padding: 16px 22px 16px 18px;
}
} .c-results_itemlist--more p:hover {
cursor: pointer;
} .c-results_itemlist--more p:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(134deg);
transform: rotate(134deg);
position: absolute;
top: 0;
bottom: 0;
right: calc(22 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 980px) { .c-results_itemlist--more p:before {
right: 15px;
}
} .c-results-ser--btn {
text-align: center;
} .c-results-ser--btn a {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg) no-repeat center right 10px;
background-size: 15px 15px;
background-color: #81a6c9;
border-radius: 5px;
display: inline-block;
cursor: pointer;
max-width: 90%;
padding: 20px 15px 22px;
transition: .3s;
text-align: center;
width: 100%;
color: #ffffff;
font-weight: bold;
font-size: calc(22 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-results-ser--btn a {
font-size: calc(14 * (100vw / 768));
max-width: 320px;
}
}
@media screen and (min-width: 840px) { .c-results-ser--btn a {
font-size: 14px;
font-size: 0.875rem;
}
} .c-results-ser--btn a p {
color: #ffffff;
} .c-results .add {
margin: 0 auto 40px;
}
@media screen and (min-width: 840px) { .c-results .add {
margin: 0 auto 55px;
}
}  .c-priorityitem {
margin: 0 auto;
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .c-priorityitem {
padding: 60px 0;
}
} .c-priorityitem--title {
color: #394656;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-priorityitem--title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-priorityitem--title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-priorityitem_itemlist {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
row-gap: 10px;
margin: 0 auto;
}
@media screen and (min-width: 840px) { .c-priorityitem_itemlist {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}
@media screen and (min-width: 980px) { .c-priorityitem_itemlist {
width: 90%;
}
} .c-priorityitem_itemlist > li figure {
height: 100%;
} .c-priorityitem_itemlist > li figure > picture {
border-radius: 5px;
overflow: hidden;
} .c-priorityitem_itemlist > li figure > picture:hover {
cursor: pointer;
}
@media screen and (min-width: 980px) { .c-priorityitem_itemlist > li figure figcaption {
position: relative;
}
} .c-priorityitem_itemlist > li figure figcaption .series {
font-size: calc(20 * (100vw / 768));
letter-spacing: .05em;
line-height: 1.2;
padding: 5px;
}
@media screen and (min-width: 576px) { .c-priorityitem_itemlist > li figure figcaption .series {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-priorityitem_itemlist > li figure figcaption .series {
font-size: 15px;
font-size: 0.9375rem;
}
} .c-priorityitem_itemlist > li figure figcaption .series span {
display: inline-block;
padding: 0 calc(30 * (100vw / 668)) 0 0;
position: relative;
width: 100%;
}
@media screen and (min-width: 576px) { .c-priorityitem_itemlist > li figure figcaption .series span {
padding: 0 calc(30 * (100vw / 768)) 0 0;
}
}
@media screen and (min-width: 840px) { .c-priorityitem_itemlist > li figure figcaption .series span {
padding: 0 30px 0 0;
}
} .c-priorityitem_itemlist > li figure figcaption .series span::before {
background-color: #000;
content: '';
display: block;
height: 1px;
width: calc(22 * (100vw / 768));
position: absolute;
right: 0;
top: 6px;
bottom: 0;
margin: auto;
}
@media screen and (min-width: 576px) { .c-priorityitem_itemlist > li figure figcaption .series span::before {
height: 2px;
width: calc(22 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-priorityitem_itemlist > li figure figcaption .series span::before {
width: 22px;
}
} .c-priorityitem_itemlist > li figure figcaption .series span::after {
background-color: #000;
content: '';
display: block;
height: 1px;
width: calc(8 * (100vw / 768));
transform: rotate(35deg);
position: absolute;
right: 0;
top: 2px;
bottom: 0;
margin: auto;
}
@media screen and (min-width: 576px) { .c-priorityitem_itemlist > li figure figcaption .series span::after {
height: 2px;
width: calc(8 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-priorityitem_itemlist > li figure figcaption .series span::after {
width: 8px;
}
} .c-priorityitem_itemlist--checkbox {
display: none;
} .c-priorityitem_itemlist--checkbox:checked ~ .c-priorityitem_itemlist--textarea {
opacity: 1;
visibility: visible;
transition: .4s;
max-height: 60vh;
} .c-priorityitem_itemlist--checkbox:checked ~ .c-priorityitem_itemlist--bg {
background-color: rgba(0, 0, 0, 0.3);
display: block;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 9;
} .c-priorityitem_itemlist--label {
background-color: #fff;
border-radius: 5px;
display: block;
height: 100%;
max-width: 280px;
padding: calc(15 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-priorityitem_itemlist--label {
padding: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-priorityitem_itemlist--label {
padding: 15px;
}
} .c-priorityitem_itemlist--label:hover {
cursor: pointer;
} .c-priorityitem_itemlist--label picture img {
aspect-ratio: 1.5 / 1;
object-fit: contain;
width: 100%;
} .c-priorityitem_itemlist--textarea {
background-color: #fff;
border-radius: 5px;
padding: 30px 15px;
max-width: 500px;
width: 96vw;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
transition: .4s;
max-height: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 10;
} .c-priorityitem_itemlist--textarea > picture img {
margin: auto;
} .c-priorityitem_itemlist--textarea .text {
font-size: calc(24 * (100vw / 768));
margin: 25px auto 0;
}
@media screen and (min-width: 576px) { .c-priorityitem_itemlist--textarea .text {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-priorityitem_itemlist--textarea .text {
font-size: 15px;
font-size: 0.9375rem;
}
} .c-priorityitem_itemlist--textarea .btn {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
margin: 25px auto 0;
} .c-priorityitem_itemlist--textarea .btn .link {
background-color: #81a7c8;
border-radius: 5px;
color: #fff;
display: block;
font-size: calc(26 * (100vw / 768));
letter-spacing: .1rem;
padding: 10px calc(33 * (100vw / 768)) 10px 18px;
position: relative;
text-align: center;
width: 49%;
}
@media screen and (min-width: 576px) { .c-priorityitem_itemlist--textarea .btn .link {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-priorityitem_itemlist--textarea .btn .link {
font-size: 13px;
font-size: 0.8125rem;
padding: 16px calc(33 * (100vw / 768)) 16px 18px;
}
}
@media screen and (min-width: 980px) { .c-priorityitem_itemlist--textarea .btn .link {
padding: 16px 22px 16px 18px;
}
} .c-priorityitem_itemlist--textarea .btn .link:hover {
cursor: pointer;
} .c-priorityitem_itemlist--textarea .btn .link:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: calc(22 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 980px) { .c-priorityitem_itemlist--textarea .btn .link:before {
right: 15px;
}
} .c-priorityitem_itemlist--textarea .btn .close {
background-color: #555;
border-radius: 5px;
color: #fff;
display: block;
font-size: calc(26 * (100vw / 768));
letter-spacing: .1rem;
line-height: 1;
padding: 10px calc(33 * (100vw / 768)) 10px 18px;
position: relative;
text-align: center;
width: 49%;
}
@media screen and (min-width: 576px) { .c-priorityitem_itemlist--textarea .btn .close {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-priorityitem_itemlist--textarea .btn .close {
font-size: 13px;
font-size: 0.8125rem;
padding: 16px calc(33 * (100vw / 768)) 16px 18px;
}
}
@media screen and (min-width: 980px) { .c-priorityitem_itemlist--textarea .btn .close {
padding: 16px 22px 16px 18px;
}
} .c-priorityitem_itemlist--textarea .btn .close:hover {
cursor: pointer;
} .c-priorityitem_itemlist--textarea .btn .close:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: calc(22 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 980px) { .c-priorityitem_itemlist--textarea .btn .close:before {
right: 15px;
}
}  .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 / 668));
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 / 668));
font-weight: bold;
}
@media screen and (min-width: 576px) { .c-purchase_brand--link .text {
padding-top: 15px;
padding-bottom: 10px;
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-purchase_brand--link .text {
font-size: 14px;
font-size: 0.875rem;
}
} .c-purchase_brand--more {
margin: 20px auto 0;
} .c-purchase_brand--more .c-purchase_brand--list {
max-height: 4vh;
overflow: hidden;
transition: .4s;
} .c-purchase_brand--more input[name="brandlist_more"] {
display: none;
} .c-purchase_brand--more input[name="brandlist_more"]:checked + .c-purchase_brand--list {
max-height: 999vh;
transition: .4s;
} .c-purchase_brand--more input[name="brandlist_more"]:checked ~ .c-purchase_brand--morebtn {
margin: 0;
} .c-purchase_brand--more input[name="brandlist_more"]:checked ~ .c-purchase_brand--morebtn label::before {
transform: rotate(-90deg);
transition: .4s;
} .c-purchase_brand--morebtn {
background: #f0f0f0;
background: linear-gradient(0deg, #f0f0f0 25%, rgba(240, 240, 240, 0) 100%);
margin: -20px 0 0;
position: relative;
} .c-purchase_brand--morebtn label::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg);
background-repeat: no-repeat;
background-position: center;
background-color: #81a6c9;
background-size: 35%;
border-radius: 100%;
content: '';
cursor: pointer;
display: block;
margin: auto;
width: 30px;
height: 30px;
transform: rotate(90deg);
transition: .4s;
z-index: 1;
}
@media screen and (min-width: 840px) { .c-purchase_brand--morebtn label::before {
width: 60px;
height: 60px;
}
}  .c-manip {
padding: 50px 0;
}
@media screen and (min-width: 840px) { .c-manip {
padding: 80px 0;
}
} .c-manip--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-manip-line {
padding-bottom: 20px;
}
@media screen and (min-width: 840px) { .c-manip-line {
padding-bottom: 50px;
}
} .c-manip-line--ttl {
text-align: center;
} .c-manip-line--ttl .in {
color: #394656;
display: inline-block;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
position: relative;
letter-spacing: 1px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-manip-line--ttl .in {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-manip-line--ttl .in {
font-size: 20px;
font-size: 1.25rem;
}
} .c-manip-line--ttl .in::before {
content: '';
background: #0abf7d;
display: block;
transform: rotate(60deg);
position: absolute;
bottom: 24px;
left: -50px;
width: 50px;
height: 2px;
} .c-manip-line--ttl .in::after {
content: '';
background: #0abf7d;
display: block;
transform: rotate(-60deg);
position: absolute;
bottom: 24px;
right: -50px;
width: 50px;
height: 2px;
} .c-manip-line--btn {
text-align: center;
padding-top: 10px;
}
@media screen and (min-width: 980px) { .c-manip-line--btn {
padding-top: 30px;
}
} .c-manip-line--btn .line-btn {
background: #0abf7d;
border-radius: 5px;
display: inline-block;
max-width: 370px;
padding: 9px 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 980px) { .c-manip-line--btn .line-btn {
background: none;
border-radius: 0;
padding: 0;
}
} .c-manip-line--btn .line-btn:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-manip-line--btn .line-btn img {
border-radius: 5px;
background: #0abf7d;
display: none;
text-align: center;
width: 100%;
height: auto;
}
@media screen and (min-width: 980px) { .c-manip-line--btn .line-btn img {
display: inline-block;
}
} .c-manip-line--btn .line-btn .sp-text {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-line-w.svg) no-repeat left center;
background-size: 20px 20px;
color: #ffffff;
display: inline-block;
font-size: calc(23 * (100vw / 668));
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 / 668));
font-weight: bold;
position: relative;
letter-spacing: 3px;
line-height: 1.6;
}
@media screen and (min-width: 576px) { .c-manip-kaitori--ttl .in {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-manip-kaitori--ttl .in {
font-size: 20px;
font-size: 1.25rem;
}
} .c-manip-kaitori--ttl .in::before {
content: '';
background: #FEF07F;
display: block;
transform: rotate(60deg);
position: absolute;
bottom: 24px;
left: -50px;
width: 50px;
height: 2px;
} .c-manip-kaitori--ttl .in::after {
content: '';
background: #FEF07F;
display: block;
transform: rotate(-60deg);
position: absolute;
bottom: 24px;
right: -50px;
width: 50px;
height: 2px;
} .c-manip-kaitori--btn {
padding-top: 10px;
}
@media screen and (min-width: 980px) { .c-manip-kaitori--btn {
padding-top: 30px;
}
} .c-manip-kaitori--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
margin: 0 -5px;
}
@media screen and (min-width: 576px) { .c-manip-kaitori--list {
margin: 0 -15px;
}
} .c-manip-kaitori--item {
text-align: center;
width: 33.3%;
padding: 0 5px;
}
@media screen and (min-width: 576px) { .c-manip-kaitori--item {
padding: 0 15px;
}
} .c-manip-kaitori .link {
background: #B7D5CD;
border-radius: 5px;
display: inline-block;
max-width: 370px;
padding: 9px 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 576px) { .c-manip-kaitori .link {
padding: 10px;
}
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link {
background: none;
padding: 0;
}
} .c-manip-kaitori .link:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-manip-kaitori .link img {
border-radius: 5px;
background: #0abf7d;
display: none;
width: 100%;
height: auto;
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link img {
display: inline-block;
}
} .c-manip-kaitori .link.shop {
background: #B7D5CD;
} .c-manip-kaitori .link.shop img, .c-manip-kaitori .link.shop .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp);
background-color: #B7D5CD;
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link.shop img, .c-manip-kaitori .link.shop .sp-text {
background: none;
}
} .c-manip-kaitori .link.delivery {
background: #F9DAD6;
} .c-manip-kaitori .link.delivery img, .c-manip-kaitori .link.delivery .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-delivery-short.webp);
background-color: #F9DAD6;
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link.delivery img, .c-manip-kaitori .link.delivery .sp-text {
background: none;
}
} .c-manip-kaitori .link.trip {
background: #83C5E8;
} .c-manip-kaitori .link.trip img, .c-manip-kaitori .link.trip .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-trip-short.webp);
background-color: #83C5E8;
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link.trip img, .c-manip-kaitori .link.trip .sp-text {
background: none;
}
} .c-manip-kaitori .link .sp-text {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp) no-repeat left center;
background-size: 20px 20px;
color: #394656;
display: inline-block;
font-size: calc(22 * (100vw / 668));
font-weight: bold;
padding: 10px;
padding-left: 25px;
}
@media screen and (min-width: 576px) { .c-manip-kaitori .link .sp-text {
font-size: calc(18 * (100vw / 768));
background-size: 30px 30px;
padding-left: 40px;
}
}
@media screen and (min-width: 980px) { .c-manip-kaitori .link .sp-text {
display: none;
}
}  .c-sub-nav {
background: rgba(247, 247, 247, 0.95);
padding: 10px;
width: 100%;
}
@media screen and (min-width: 840px) { .c-sub-nav {
padding: 50px 10px;
}
}
@media screen and (min-width: 980px) { .c-sub-nav {
padding: 0 10px 50px 60px;
background: none;
}
} .c-sub-nav--box {
padding-top: 5px;
}
@media screen and (min-width: 980px) { .c-sub-nav--box {
padding: 0 0 30px;
}
} .c-sub-nav--box:first-of-type {
padding-top: 0;
} .c-sub-nav--ttl {
font-size: calc(27 * (100vw / 768));
font-weight: bold;
display: none;
padding-bottom: 5px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-sub-nav--ttl {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-sub-nav--ttl {
font-size: 18px;
font-size: 1.125rem;
padding-bottom: 20px;
}
}
@media screen and (min-width: 980px) { .c-sub-nav--ttl {
display: block;
text-align: left;
}
} .c-sub-nav--list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
}
@media screen and (min-width: 980px) { .c-sub-nav--list {
grid-template-columns: 1fr;
}
} .c-sub-nav--item {
text-align: center;
width: 100%;
} .c-sub-nav--item .link {
background: #B7D5CD;
border-radius: 5px;
display: inline-block;
max-width: 370px;
padding: 2px 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 576px) { .c-sub-nav--item .link {
padding: 10px;
}
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link {
background: none;
padding: 0;
}
} .c-sub-nav--item .link:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .c-sub-nav--item .link img {
border-radius: 5px;
display: none;
max-width: 260px;
width: 100%;
height: auto;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link img {
display: inline-block;
}
} .c-sub-nav--item .link .sp-text {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp) no-repeat left center;
background-size: 20px 20px;
color: #394656;
display: inline-block;
font-size: calc(22 * (100vw / 768));
font-weight: bold;
padding: 8px;
padding-left: 25px;
}
@media screen and (min-width: 576px) { .c-sub-nav--item .link .sp-text {
font-size: calc(15 * (100vw / 768));
background-size: 30px 30px;
padding-left: 40px;
}
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link .sp-text {
display: none;
}
} .c-sub-nav--item .link.line {
background: #0abf7d;
} .c-sub-nav--item .link.line img {
background: #0abf7d;
} .c-sub-nav--item .link.line .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-tel-w.webp);
background-color: #0abf7d;
color: #ffffff;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.line .sp-text {
background: none;
}
} .c-sub-nav--item .link.tel {
background: #ED99A4;
} .c-sub-nav--item .link.tel img {
background: #ED99A4;
} .c-sub-nav--item .link.tel .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-tel-w.webp);
background-color: #ED99A4;
color: #ffffff;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.tel .sp-text {
background: none;
}
} .c-sub-nav--item .link.mail {
background: #81A6C9;
} .c-sub-nav--item .link.mail img {
background: #81A6C9;
} .c-sub-nav--item .link.mail .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-mail-w.webp);
background-color: #81A6C9;
color: #ffffff;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.mail .sp-text {
background: none;
}
} .c-sub-nav--item .link.shop {
background: #B7D5CD;
} .c-sub-nav--item .link.shop img {
background: #B7D5CD;
} .c-sub-nav--item .link.shop .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-shop.webp);
background-color: #B7D5CD;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.shop .sp-text {
background: none;
}
} .c-sub-nav--item .link.delivery {
background: #F9DAD6;
} .c-sub-nav--item .link.delivery img {
background: #F9DAD6;
} .c-sub-nav--item .link.delivery .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-delivery-short.webp);
background-color: #F9DAD6;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.delivery .sp-text {
background: none;
}
} .c-sub-nav--item .link.trip {
background: #83C5E8;
} .c-sub-nav--item .link.trip img {
background: #83C5E8;
} .c-sub-nav--item .link.trip .sp-text {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-satei-trip-short.webp);
background-color: #83C5E8;
}
@media screen and (min-width: 980px) { .c-sub-nav--item .link.trip .sp-text {
background: none;
}
}  .c-purchase_item {
padding: 35px 0 5px;
}
@media screen and (min-width: 840px) { .c-purchase_item {
padding: 60px 0;
}
} .c-purchase_item--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-purchase_item--main {
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-purchase_item--main {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-purchase_item--main {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-purchase_item--ttl {
color: #394656;
font-size: calc(30 * (100vw / 668));
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 / 668));
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 / 668));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .c-shoplist--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-shoplist--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .c-shoplist-box.kanto {
margin-bottom: 30px;
}
@media screen and (min-width: 840px) { .c-shoplist-box.kanto {
margin-bottom: 50px;
}
} .c-shoplist-box.kansai .c-shoplist-box--ttl .in {
background-image: url(//www.7-7maruka.com/kanri/images/icon/title-style-pink.svg);
} .c-shoplist-box.kansai .c-shoplist-box--ttl .in::before {
border-color: #ed99a4;
} .c-shoplist-box.kansai .c-shoplist-box--list {
grid-template-columns: 1fr 1fr;
}
@media screen and (min-width: 840px) { .c-shoplist-box.kansai .c-shoplist-box--list {
grid-template-columns: 1fr 1fr 1fr;
}
} .c-shoplist-box--ttl {
margin-bottom: 10px;
}
@media screen and (min-width: 840px) { .c-shoplist-box--ttl {
margin-bottom: 20px;
}
} .c-shoplist-box--ttl .in {
background: url(//www.7-7maruka.com/kanri/images/icon/title-style-blue.svg) no-repeat center left;
background-size: 10px 20px;
display: block;
font-size: calc(22.5 * (100vw / 668));
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 / 668));
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 / 668));
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 / 668));
font-weight: bold;
line-height: 1.6;
margin: 0 0 10px;
padding: 0 0 10px;
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .question {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-fqa_detail--wrap .question {
font-size: 16px;
font-size: 1rem;
margin: 0 0 20px;
padding: 0 0 20px;
}
} .c-fqa_detail--wrap .question .icon {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .question .icon {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-fqa_detail--wrap .question .icon {
font-size: 16px;
font-size: 1rem;
}
} .c-fqa_detail--wrap .question .icon::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/title-style-blue.svg);
background-size: contain;
background-repeat: no-repeat;
content: "";
display: block;
height: calc(33 * (100vw / 768));
width: 14px;
margin: 0 5px 0 0;
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .question .icon::before {
height: calc(22 * (100vw / 768));
margin: 0 10px 0 0;
}
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .question .icon::before {
height: 22px;
}
} .c-fqa_detail--wrap .answer .icon {
color: #ed99a4;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-family: "Lato", sans-serif;
font-weight: bold;
font-size: calc(24 * (100vw / 668));
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .answer .icon {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-fqa_detail--wrap .answer .icon {
font-size: 16px;
font-size: 1rem;
}
} .c-fqa_detail--wrap .answer .icon::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/title-style-pink.svg);
background-size: contain;
background-repeat: no-repeat;
content: "";
display: block;
height: calc(33 * (100vw / 768));
width: 14px;
margin: 0 5px 0 0;
}
@media screen and (min-width: 576px) { .c-fqa_detail--wrap .answer .icon::before {
height: calc(22 * (100vw / 768));
margin: 0 10px 0 0;
}
}
@media screen and (min-width: 840px) { .c-fqa_detail--wrap .answer .icon::before {
height: 22px;
}
} .c-fqa_detail--check {
display: none;
} .c-fqa_detail--check:checked + .c-fqa_detail--wrap {
visibility: visible;
opacity: 1;
max-height: 999vh;
}  .c-voice {
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .c-voice {
padding: 60px 0;
}
} .c-voice--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .c-voice--ttl {
color: #394656;
font-size: calc(30 * (100vw / 668));
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 / 668));
}
@media screen and (min-width: 576px) { .c-voice_detail--wrap .title {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-voice_detail--wrap .title {
font-size: 16px;
font-size: 1rem;
}
} .c-voice_detail--wrap .title::before {
background-image: url(//www.7-7maruka.com/kanri/images/icon/title-style-blue.svg);
background-size: contain;
background-repeat: no-repeat;
content: "";
display: block;
height: calc(33 * (100vw / 768));
width: 14px;
margin: 5px 10px 0 0;
}
@media screen and (min-width: 576px) { .c-voice_detail--wrap .title::before {
height: calc(22 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-voice_detail--wrap .title::before {
height: 22px;
}
} .c-voice_detail--wrap .title span {
width: calc(100% - 14px);
} .c-voice_detail--wrap .customer {
border-bottom: 3px dotted #bfbfbf;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
margin: 0 0 10px;
padding: 0 0 10px;
width: 100%;
}
@media screen and (min-width: 980px) { .c-voice_detail--wrap .customer {
margin: 0 0 20px;
padding: 0 0 20px;
}
} .c-voice_detail--wrap .customer .customername {
display: block;
font-weight: bold;
margin: 5px 0 0;
} .c-voice_detail--wrap .customer picture {
margin: 0 0 0 4%;
min-width: 70px;
text-align: center;
} .c-voice_detail--wrap .staff {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
margin: 0 auto;
}
@media screen and (min-width: 980px) { .c-voice_detail--wrap .staff {
margin: 0;
}
} .c-voice_detail--wrap .staff picture {
margin: 0 0 0 4%;
min-width: 70px;
text-align: center;
} .c-voice_detail--wrap .title {
font-size: calc(24 * (100vw / 668));
}
@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-module-camera {
background: #F0F0F0;
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-module-camera {
padding: 60px 0;
}
} .p-module-camera--wrap {
margin: auto;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-module-camera--box {
background: #efece4;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-camera--box {
padding: 30px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-camera--box {
border: 20px solid #ffffff;
padding: 70px;
}
} .p-module-camera--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-camera--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-camera--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-module-camera--list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 20px;
padding-bottom: 50px;
}
@media screen and (min-width: 576px) { .p-module-camera--list {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width: 980px) { .p-module-camera--list {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
} .p-module-camera--item {
text-align: center;
} .p-module-camera--item img {
display: block;
padding-bottom: 10px;
margin: 0 auto;
} .p-module-camera--item .text {
color: #394656;
display: inline-block;
font-size: calc(21 * (100vw / 768));
line-height: 1.6;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-camera--item .text {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-camera--item .text {
font-size: 14px;
font-size: 0.875rem;
}
} .p-module-camera--text {
text-align: center;
} .p-module-jewelry {
background: #F0F0F0;
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-module-jewelry {
padding: 60px 0;
}
} .p-module-jewelry--wrap {
margin: auto;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-module-jewelry--box {
background: #f2d6e2;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry--box {
padding: 30px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry--box {
border: 20px solid #ffffff;
padding: 70px;
}
} .p-module-jewelry--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-jewelry--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-module-jewelry--list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10px;
row-gap: 15px;
padding-bottom: 50px;
}
@media screen and (min-width: 576px) { .p-module-jewelry--list {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry--list {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
} .p-module-jewelry--item {
text-align: center;
} .p-module-jewelry--item img {
display: block;
height: auto;
margin: 0 auto;
} .p-module-jewelry--item .text {
color: #394656;
display: inline-block;
font-size: calc(20 * (100vw / 768));
line-height: 1.2;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-jewelry--item .text {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry--item .text {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.6;
}
} .p-module-jewelry--text {
text-align: center;
} .p-module-jewelry--link {
display: inline-block;
transition: .3s;
} .p-module-jewelry--link:hover {
opacity: 0.7;
} .p-module-jewelry-colum {
background: #F7F7F7;
padding: 35px 0 0;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum {
padding: 60px 0 0;
}
} .p-module-jewelry-colum:last-of-type {
padding-bottom: 0 !important;
} .p-module-jewelry-colum.message {
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum.message {
padding: 60px 0;
}
} .p-module-jewelry-colum--wrap {
margin: auto;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-module-jewelry-colum--message {
background: #efece4;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--message {
padding: 30px 20px 0;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--message {
border: 20px solid #ffffff;
padding: 50px 50px 20px;
}
} .p-module-jewelry-colum--message .p-module-jewelry-colum--wrap {
padding: 0 0 30px;
} .p-module-jewelry-colum--ttl {
background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
line-height: 1.2;
margin: 0 0 25px;
padding: 20px 0;
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum--ttl {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--ttl {
font-size: 16px;
font-size: 1rem;
}
} .p-module-jewelry-colum--ttl .main {
display: block;
font-size: calc(30 * (100vw / 768));
padding-bottom: 20px;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum--ttl .main {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--ttl .main {
padding-bottom: 30px;
font-size: 20px;
font-size: 1.25rem;
}
} .p-module-jewelry-colum--ttl .sub {
display: block;
} .p-module-jewelry-colum--contents {
margin-bottom: 35px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--contents {
margin-bottom: 60px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contents.col2 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contents.col2 .p-module-jewelry-colum--photo {
padding-left: 30px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contents.col2 .p-module-jewelry-colum--photo img {
width: 300px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contents.col2 .p-module-jewelry-colum--text {
width: calc(100% - 300px);
}
} .p-module-jewelry-colum-box {
background: #efece4;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box {
padding: 30px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum-box {
border: 20px solid #ffffff;
padding: 50px;
}
} .p-module-jewelry-colum-box--wrap {
background: #ffffff;
padding: 10px;
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum-box--wrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
padding: 50px 20px;
}
} .p-module-jewelry-colum-box--info {
border-top: 6px double #106d4b;
border-bottom: 6px double #106d4b;
border-left: 1px solid #106d4b;
border-right: 1px solid #106d4b;
padding: 15px 10px;
max-width: 570px;
margin: 0 auto 10px;
width: 100%;
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum-box--info {
margin: 0 auto;
padding: 25px 30px;
}
} .p-module-jewelry-colum-box--ttl {
text-align: center;
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 10px;
}
} .p-module-jewelry-colum-box--data {
margin: 0 auto;
max-width: 580px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--data {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
}
} .p-module-jewelry-colum-box--block {
padding-top: 10px;
} .p-module-jewelry-colum-box--block.maruka .ttl {
background: #106d4b;
border-color: #106d4b;
color: #ffffff;
} .p-module-jewelry-colum-box--block.maruka .list {
color: #106d4b;
} .p-module-jewelry-colum-box--block.maruka .item.total {
border-color: #106d4b;
} .p-module-jewelry-colum-box--block .ttl {
border: 1px solid #000000;
color: #000000;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
padding: 5px;
margin-bottom: 10px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--block .ttl {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--block .ttl {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum-box--block .item {
padding-bottom: 5px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
font-size: calc(22.5 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--block .item {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--block .item {
font-size: 15px;
font-size: 0.9375rem;
padding-bottom: 10px;
}
} .p-module-jewelry-colum-box--block .item.total {
padding-top: 10px;
border-top: 1px solid #000000;
} .p-module-jewelry-colum-box--block .name {
display: block;
} .p-module-jewelry-colum-box--block .pay {
display: block;
font-family: "Lato", sans-serif;
font-size: 150%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--block .pay {
font-size: 100%;
}
} .p-module-jewelry-colum-box--pay {
background: #ffffff;
text-align: center;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--pay {
padding: 0 20px 0 0;
}
} .p-module-jewelry-colum-box--pay .ttl {
color: #106d4b;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
display: block;
padding-bottom: 10px;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--pay .ttl {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--pay .ttl {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum-box--pay .data {
color: #106d4b;
font-size: calc(22.5 * (100vw / 768));
font-weight: bold;
display: block;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-box--pay .data {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--pay .data {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum-box--pay .data .num {
font-family: "Lato", sans-serif;
font-size: 200%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-box--pay .data .num {
font-size: 200%;
}
} .p-module-jewelry-colum-box--pay img {
display: inline-block;
max-height: 120px;
padding-top: 10px;
} .p-module-jewelry-colum--contact {
padding: 10px 0 0;
text-align: center;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--contact {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
justify-content: space-around;
padding: 30px 0;
}
} .p-module-jewelry-colum--contact .item {
padding-bottom: 10px;
} .p-module-jewelry-colum--contact .item .line-btn {
background: #0abf7d;
border-radius: 5px;
display: inline-block;
max-width: 310px;
padding: 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contact .item .line-btn {
background: none;
border-radius: 0;
padding: 0;
}
} .p-module-jewelry-colum--contact .item .line-btn:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .p-module-jewelry-colum--contact .item .line-btn img {
border-radius: 5px;
background: #0abf7d;
display: inline-block;
text-align: center;
width: 100%;
height: auto;
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--contact .item .line-btn img {
display: inline-block;
}
} .p-module-jewelry-colum--contact .item .shop {
background: #B7D5CD;
border-radius: 5px;
display: inline-block;
max-width: 310px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--contact .item .shop {
padding: 0;
}
} .p-module-jewelry-colum--contact .item .shop:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .p-module-jewelry-colum--contact .item .shop img {
border-radius: 5px;
display: inline-block;
width: 100%;
height: auto;
} .p-module-jewelry-colum-manzoku {
margin-top: 35px;
background: #E7F1F5;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku {
margin-top: 0;
padding: 40px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum-manzoku {
border: 20px solid #ffffff;
padding: 70px;
}
} .p-module-jewelry-colum-manzoku--ttl {
color: #394656;
font-size: calc(21 * (100vw / 768));
font-weight: bold;
text-align: center;
padding-bottom: 5px;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-manzoku--ttl {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku--ttl {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum-manzoku--contents {
color: #394656;
text-align: center;
} .p-module-jewelry-colum-manzoku--contents .ttl {
display: block;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-manzoku--contents .ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku--contents .ttl {
font-size: 20px;
font-size: 1.25rem;
}
} .p-module-jewelry-colum-manzoku--contents .num {
display: block;
font-size: calc(69 * (100vw / 768));
font-weight: bold;
font-family: "Lato", sans-serif;
padding-top: 10px;
line-height: 1;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-manzoku--contents .num {
font-size: calc(46 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku--contents .num {
font-size: 46px;
font-size: 2.875rem;
}
} .p-module-jewelry-colum-manzoku--contents .num .tani {
font-size: 50%;
} .p-module-jewelry-colum-manzoku--contents .pick {
display: block;
font-size: calc(21 * (100vw / 768));
padding-top: 5px;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum-manzoku--contents .pick {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum-manzoku--contents .pick {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-jewelry-colum--photo {
text-align: center;
padding-bottom: 10px;
} .p-module-jewelry-colum--photo img {
display: inline-block;
width: auto;
height: auto;
} .p-module-jewelry-colum--point {
background: #F7F7F7;
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point {
padding: 60px 0;
}
} .p-module-jewelry-colum--point--wrap {
background-color: #eef0f0;
max-width: 980px;
margin: 0 auto;
position: relative;
width: 100%;
padding: 35px 10px 30px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--wrap {
padding: 60px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-jewelry-colum--point--wrap {
padding: 80px 20px;
}
} .p-module-jewelry-colum--point--wrap .title {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum--point--wrap .title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--wrap .title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-module-jewelry-colum--point--list {
margin: auto;
max-width: 900px;
} .p-module-jewelry-colum--point--list li:not(:first-of-type) {
margin: 50px 0 0 0;
} .p-module-jewelry-colum--point--list li figure {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
flex-direction: column-reverse;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure {
flex-direction: row-reverse;
}
} .p-module-jewelry-colum--point--list li figure > picture {
margin: 20px 0;
text-align: center;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure > picture {
margin: 0 0 0 40px;
max-width: 250px;
width: 100%;
}
} .p-module-jewelry-colum--point--list li figure > picture img {
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure figcaption {
width: calc(100% - 250px);
}
} .p-module-jewelry-colum--point--list li figure figcaption .point {
max-width: 120px;
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure figcaption .point {
max-width: 165px;
}
} .p-module-jewelry-colum--point--list li figure figcaption .subtitle {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding: 20px 0;
text-align: center;
line-height: 1.5;
}
@media screen and (min-width: 576px) { .p-module-jewelry-colum--point--list li figure figcaption .subtitle {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-jewelry-colum--point--list li figure figcaption .subtitle {
text-align: left;
font-size: 20px;
font-size: 1.25rem;
padding: 20px 0 20px 45px;
}
} .p-module-antique {
background: #F0F0F0;
padding: 35px 0;
}
@media screen and (min-width: 980px) { .p-module-antique {
padding: 60px 0;
}
} .p-module-antique--wrap {
margin: auto;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-module-antique--box {
background: #83c5e8;
border: 10px solid #ffffff;
padding: 20px 15px;
}
@media screen and (min-width: 980px) { .p-module-antique--box {
padding: 30px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-antique--box {
border: 20px solid #ffffff;
padding: 70px;
}
} .p-module-antique--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-antique--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-antique--ttl {
font-size: 20px;
font-size: 1.25rem;
}
}
@media screen and (min-width: 980px) { .p-module-antique--ttl {
padding-bottom: 40px;
}
} .p-module-antique--contents {
padding-bottom: 20px;
border-bottom: 2px dotted #ffffff;
margin-bottom: 20px;
}
@media screen and (min-width: 980px) { .p-module-antique--contents {
padding-bottom: 30px;
margin-bottom: 30px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
} .p-module-antique--photo {
display: inline-block;
padding-bottom: 10px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 980px) { .p-module-antique--photo {
padding: 0 0 0 20px;
text-align: right;
}
} .p-module-antique--photo img {
display: inline-block;
max-width: 330px;
height: auto;
width: 100%;
} .p-module-antique--text {
width: 100%;
}
@media screen and (min-width: 980px) { .p-module-antique--foot {
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-module-antique--check {
width: 100%;
}
@media screen and (min-width: 980px) { .p-module-antique--check {
width: calc(100% - 350px);
}
} .p-module-antique--check .item {
background: url(//www.7-7maruka.com/kanri/images/item-category/antique/icon-check.webp) no-repeat left center;
background-size: 30px 30px;
padding-left: 45px;
margin-bottom: 10px;
} .p-module-antique--topick {
padding-top: 10px;
width: 100%;
}
@media screen and (min-width: 980px) { .p-module-antique--topick {
padding: 0 0 0 20px;
width: 350px;
}
} .p-module-antique--topick .item {
border: 1px solid #394656;
border-radius: 5px;
display: block;
color: #394656;
font-weight: bold;
text-align: center;
padding: 10px;
margin: 15px auto 0;
} .p-module-antique--topick .item:first-of-type {
margin-top: 0;
} .p-module-antique-bnr {
background: #ffffff;
padding: 35px 0;
}
@media screen and (min-width: 980px) { .p-module-antique-bnr {
padding: 60px 0;
}
} .p-module-antique-bnr--wrap {
margin: auto;
max-width: 1030px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-module-antique-bnr--img {
text-align: center;
padding: 10px 0;
} .p-module-antique-bnr--img img {
display: inline-block;
width: 100%;
height: auto;
} .p-module-brandjewel-purchaselist {
background: #F0F0F0;
padding: 15px 0;
}
@media screen and (min-width: 980px) { .p-module-brandjewel-purchaselist {
padding: 60px 0;
}
} .p-module-brandjewel-purchaselist--wrap {
margin: auto;
max-width: 1000px;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist--wrap {
padding: 0 20px;
}
} .p-module-brandjewel-purchaselist--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-brandjewel-purchaselist--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist--ttl {
font-size: 20px;
font-size: 1.25rem;
}
}
@media screen and (min-width: 980px) { .p-module-brandjewel-purchaselist--ttl {
padding-bottom: 40px;
}
} .p-module-brandjewel-purchaselist--nav .list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
max-width: 900px;
margin: 0 auto;
} .p-module-brandjewel-purchaselist--nav .item {
padding: 0 10px 15px;
max-width: 240px;
width: 50%;
overflow: hidden;
}
@media screen and (min-width: 980px) { .p-module-brandjewel-purchaselist--nav .item {
width: 33.3%;
}
} .p-module-brandjewel-purchaselist--nav .link {
box-shadow: 0px 5px 0px #808080;
border-radius: 5px;
display: block;
transition: .4s;
height: 100%;
max-width: 240px;
width: 100%;
overflow: hidden;
} .p-module-brandjewel-purchaselist--nav .link:hover {
box-shadow: 0px 5px 0px #808080;
border-radius: 5px;
transition: .4s;
height: 100%;
overflow: hidden;
} .p-module-brandjewel-purchaselist--nav .link:hover .in {
background-color: #0ea7c9;
border: 5px solid #fff;
} .p-module-brandjewel-purchaselist--nav .link .in {
background-color: #929292;
border: 5px solid #929292;
color: #fff;
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-size: calc(20 * (100vw / 768));
line-height: 1.7;
transition: .4s;
text-align: center;
height: 100%;
padding: 5px;
}
@media screen and (min-width: 576px) { .p-module-brandjewel-purchaselist--nav .link .in {
font-size: calc(14 * (100vw / 768));
padding: 8px;
}
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist--nav .link .in {
font-size: 14px;
font-size: 0.875rem;
}
} .p-module-brandjewel-purchaselist-box {
padding-top: 20px;
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist-box {
padding-top: 50px;
}
} .p-module-brandjewel-purchaselist-box--ttl {
background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
line-height: 1.2;
margin: 0 0 15px;
padding: 10px 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-weight: bold;
font-size: calc(28 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-module-brandjewel-purchaselist-box--ttl {
font-size: calc(16 * (100vw / 768));
margin: 0 0 25px;
padding: 20px 0;
}
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist-box--ttl {
font-size: 16px;
font-size: 1rem;
}
} .p-module-brandjewel-purchaselist-box--list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
row-gap: 5px;
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist-box--list {
column-gap: 15px;
row-gap: 15px;
}
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist-box--list {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width: 980px) { .p-module-brandjewel-purchaselist-box--list {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
} .p-module-brandjewel-purchaselist-box--item {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
} .p-module-brandjewel-purchaselist-block {
display: block;
background: #fff;
height: 100%;
position: relative;
} .p-module-brandjewel-purchaselist-block--photo img {
aspect-ratio: 1.5 / 1;
object-fit: cover;
width: 100%;
height: auto;
} .p-module-brandjewel-purchaselist-block--data {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
flex-grow: 1;
line-height: 1.3;
padding: 10px;
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist-block--data {
padding: 20px;
}
} .p-module-brandjewel-purchaselist-block--brand {
color: #394656;
display: block;
font-size: calc(22 * (100vw / 768));
padding-bottom: 2px;
flex-grow: 1;
}
@media screen and (min-width: 576px) { .p-module-brandjewel-purchaselist-block--brand {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist-block--brand {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-brandjewel-purchaselist-block--pay {
color: #394656;
display: block;
font-size: calc(17 * (100vw / 768));
padding-bottom: 7px;
}
@media screen and (min-width: 576px) { .p-module-brandjewel-purchaselist-block--pay {
font-size: calc(14 * (100vw / 768));
padding-bottom: 10px;
}
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist-block--pay {
font-size: 14px;
font-size: 0.875rem;
}
} .p-module-brandjewel-purchaselist-block--pay .num {
display: inline-block;
font-size: 180%;
font-weight: bold;
font-family: "Lato", sans-serif;
color: #ed99a4;
}
@media screen and (min-width: 840px) { .p-module-brandjewel-purchaselist-block--pay .num {
font-size: 200%;
}
}
@media screen and (min-width: 980px) { .p-module-brandjewel-purchaselist-block--pay .num {
font-size: 145%;
}
} .p-module-brandjewel-purchaselist-bnr {
padding-top: 50px;
} .p-module-brandjewel-purchaselist-bnr--list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 10px;
} .p-module-brandjewel-purchaselist-bnr--item {
text-align: center;
} .p-module-brandjewel-purchaselist-bnr--item .link {
display: inline-block;
vertical-align: bottom;
} .p-module-brandjewel-purchaselist-bnr--item .link img {
height: auto;
max-width: 480px;
width: 100%;
} .p-module-gold-results {
background: #F7F7F7;
padding: 25px 0;
}
@media screen and (min-width: 980px) { .p-module-gold-results {
padding: 60px 0;
}
} .p-module-gold-results ~ .p-item-category-comparison {
padding-top: 0;
}
@media screen and (min-width: 980px) { .p-module-gold-results ~ .p-item-category-comparison {
padding-top: 0;
}
} .p-module-gold-results--wrap {
margin: auto;
max-width: 1030px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-module-gold-results--ttl {
background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
line-height: 1.2;
margin: 0 0 25px;
padding: 20px 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-weight: bold;
font-size: calc(28 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-module-gold-results--ttl {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-gold-results--ttl {
font-size: 16px;
font-size: 1rem;
}
} .p-module-gold-results--ttl .red {
display: inline-block;
padding-left: 10px;
color: #ee99a4;
} .p-module-gold-results-box {
background: #EFECE4;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-module-gold-results-box {
padding: 20px;
}
}
@media screen and (min-width: 980px) { .p-module-gold-results-box {
border: 20px solid #ffffff;
padding: 40px 70px 70px;
}
} .p-module-gold-results-box--wrap {
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;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-gold-results-box--wrap {
padding-top: 20px;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}
} .p-module-gold-results-box--wrap label {
display: block;
max-width: 240px;
padding: 0 5px 10px;
width: 50%;
}
@media screen and (min-width: 840px) { .p-module-gold-results-box--wrap label {
width: 25%;
}
}
@media screen and (min-width: 980px) { .p-module-gold-results-box--wrap label {
width: 100%;
}
}
@media screen and (min-width: 840px) { .p-module-gold-results-box--wrap input[name="tab-brand"]:checked + .p-page-tab {
padding-top: 5px;
}
} .p-module-gold-results-box--wrap input[name="tab-brand"]:checked + .p-page-tab .p-module-gold-results-box--tab {
background: #00a6ca;
border: 5px solid #ffffff;
}
@media screen and (min-width: 840px) { .p-module-gold-results-box--wrap input[name="tab-brand"]:checked + .p-page-tab .p-module-gold-results-box--tab {
padding: 5px 10px;
}
} .p-module-gold-results-box--wrap .p-page-tab--content {
display: none;
padding: 0;
width: 100%;
}
@media screen and (min-width: 576px) { .p-module-gold-results-box--wrap .p-page-tab--content {
padding: 30px 0;
}
} .p-module-gold-results-box--tab {
background: #929292;
border-bottom: 5px solid #808080;
border-radius: 5px;
cursor: pointer;
display: block;
text-align: center;
padding: 1px 5px;
transition: .3s;
}
@media screen and (min-width: 576px) { .p-module-gold-results-box--tab {
padding: 8px 10px;
}
} .p-module-gold-results-box--tab:hover {
opacity: 0.7;
} .p-module-gold-results-box--tab .in {
color: #ffffff;
font-size: calc(21 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .p-module-gold-results-box--tab .in {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-gold-results-box--tab .in {
font-size: 14px;
font-size: 0.875rem;
}
} .p-module-gold-results-box label {
display: block;
max-width: 240px;
padding: 0 5px 5px;
width: 50%;
}
@media screen and (min-width: 840px) { .p-module-gold-results-box label {
padding: 0 5px 10px;
width: 25%;
}
}
@media screen and (min-width: 980px) { .p-module-gold-results-box label {
width: 100%;
}
}
@media screen and (min-width: 840px) { .p-module-gold-results-box input[name="tab-gold"]:checked + .p-page-tab {
padding-top: 5px;
}
} .p-module-gold-results-box input[name="tab-gold"]:checked + .p-page-tab .p-module-gold-results-box--tab {
background: #00a6ca;
border: 5px solid #ffffff;
}
@media screen and (min-width: 840px) { .p-module-gold-results-box input[name="tab-gold"]:checked + .p-page-tab .p-module-gold-results-box--tab {
padding: 5px 10px;
}
} .p-module-gold-results-box .p-page-tab--content {
display: none;
padding: 0;
width: 100%;
}
@media screen and (min-width: 576px) { .p-module-gold-results-box .p-page-tab--content {
padding: 30px 0;
}
} .p-module-gold-results-box--contents {
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: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
width: 100%;
}
@media screen and (min-width: 576px) { .p-module-gold-results-box--contents {
padding-top: 20px;
}
} .p-module-gold-results-box-info {
width: 100%;
} .p-module-gold-results-box-info--ttl {
background: url(//www.7-7maruka.com/kanri/images/item-category/gold/icon-gold.webp) no-repeat center left;
background-size: 52px 52px;
padding-left: 60px;
margin-top: 20px;
margin-bottom: 20px;
} .p-module-gold-results-box-info--ttl.gold {
background-image: url(//www.7-7maruka.com/kanri/images/item-category/gold/icon-gold.webp);
} .p-module-gold-results-box-info--ttl.platinum {
background-image: url(//www.7-7maruka.com/kanri/images/item-category/gold/icon-platinum.webp);
} .p-module-gold-results-box-info--ttl.silver {
background-image: url(//www.7-7maruka.com/kanri/images/item-category/gold/icon-silver.webp);
} .p-module-gold-results-box-info--ttl .in {
color: #394656;
font-size: calc(22 * (100vw / 768));
font-weight: bold;
display: inline-block;
vertical-align: middle;
padding: 5px 0;
}
@media screen and (min-width: 576px) { .p-module-gold-results-box-info--ttl .in {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-gold-results-box-info--ttl .in {
font-size: 20px;
font-size: 1.25rem;
}
} .p-module-gold-results-box-info--ttl .text {
color: #394656;
font-size: calc(28 * (100vw / 768));
font-weight: bold;
display: inline-block;
vertical-align: middle;
padding-left: 10px;
}
@media screen and (min-width: 576px) { .p-module-gold-results-box-info--ttl .text {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-gold-results-box-info--ttl .text {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-gold-results-box-info--table {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 2px;
}
@media screen and (min-width: 840px) { .p-module-gold-results-box-info--table {
row-gap: 5px;
}
} .p-module-gold-results-box-info--th {
background: #f7f7f7;
color: #394656;
font-size: calc(18 * (100vw / 768));
font-weight: bold;
padding: 10px 5px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-module-gold-results-box-info--th {
font-size: calc(14 * (100vw / 768));
padding: 10px;
}
}
@media screen and (min-width: 840px) { .p-module-gold-results-box-info--th {
font-size: 14px;
font-size: 0.875rem;
}
}
@media screen and (min-width: 980px) { .p-module-gold-results-box-info--th {
padding: 15px;
}
} .p-module-gold-results-box-info--td {
background: #ffffff;
color: #ed99a4;
text-align: center;
padding: 10px;
font-size: calc(15 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .p-module-gold-results-box-info--td {
font-size: calc(14 * (100vw / 768));
padding-bottom: 10px;
}
}
@media screen and (min-width: 840px) { .p-module-gold-results-box-info--td {
font-size: 14px;
font-size: 0.875rem;
}
}
@media screen and (min-width: 980px) { .p-module-gold-results-box-info--td {
padding: 15px;
}
} .p-module-gold-results-box-info--td .num {
display: inline-block;
font-size: 180%;
font-family: "Lato", sans-serif;
}
@media screen and (min-width: 840px) { .p-module-gold-results-box-info--td .num {
font-size: 200%;
}
}
@media screen and (min-width: 980px) { .p-module-gold-results-box-info--td .num {
font-size: 145%;
}
} .p-module-gold-results--btn {
text-align: center;
padding-top: 20px;
}
@media screen and (min-width: 980px) { .p-module-gold-results--btn {
padding-top: 50px;
}
} .p-module-gold-results--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) { .p-module-gold-results--btn .line-btn {
background: none;
border-radius: 0;
padding: 0;
}
} .p-module-gold-results--btn .line-btn:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .p-module-gold-results--btn .line-btn img {
border-radius: 5px;
background: #0abf7d;
display: inline-block;
text-align: center;
width: 100%;
height: auto;
} .p-gold-cp01 {
margin: 0 auto 40px;
max-width: 990px;
} .p-gold-cp02 {
background-color: #dceff4;
margin: 0 auto 40px;
padding: 15px 6vw;
max-width: 990px;
}
@media screen and (min-width: 980px) { .p-gold-cp02 {
padding: 50px 6vw;
}
} .p-gold-cp02 .subtitle {
text-align: center;
margin: 25px auto 15px;
}
@media screen and (min-width: 980px) { .p-gold-cp02 .subtitle {
margin: 45px auto 15px;
}
} .p-gold-cp02 figure {
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;
flex-direction: column;
margin: 10px auto 0;
max-width: 670px;
}
@media screen and (min-width: 980px) { .p-gold-cp02 figure {
flex-direction: row;
margin: 25px auto 0;
}
} .p-gold-cp02 figure picture {
text-align: center;
flex-grow: 1;
width: 50vw;
}
@media screen and (min-width: 980px) { .p-gold-cp02 figure picture {
width: auto;
}
} .p-gold-cp02 .text {
font-size: 14px;
line-height: 2;
margin: 15px 0;
}
@media screen and (min-width: 980px) { .p-gold-cp02 .text {
width: auto;
}
} .p-gold-cp02 .text em {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-weight: bold;
margin: 4px 0 0;
} .p-gold-cp02 .text em::before, .p-gold-cp02 .text em::after {
background-image: url(//www.7-7maruka.com/images_22/item/gold/icon_cp02_em.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: block;
height: 10px;
width: 12px;
} .p-gold-ps {
background-image: url(//www.7-7maruka.com/images_22/item/gold/bg_postscript.gif);
margin: 0 auto 50px;
padding: 5px;
} .p-gold-ps--wrap {
background: black;
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.20212) 0%, rgba(0, 0, 0, 0.09568) 30%, transparent 60%);
background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.20212) 0%, rgba(0, 0, 0, 0.09568) 30%, transparent 60%);
background: linear-gradient(to top, rgba(0, 0, 0, 0.20212) 0%, rgba(0, 0, 0, 0.09568) 30%, rgba(0, 0, 0, 0) 60%);
border: 1px solid rgba(249, 240, 232, 0.7);
padding: 50px 0;
} .p-gold-ps_defective {
margin: auto;
max-width: 96%;
} .p-gold-ps_defective--title {
color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-size: 22px;
font-size: 1.375rem;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
line-height: 1.4;
position: relative;
text-align: center;
}
@media screen and (min-width: 980px) { .p-gold-ps_defective--title {
font-size: 24px;
font-size: 1.5rem;
text-align: left;
}
} .p-gold-ps_defective--title span {
padding: 0 8px;
} .p-gold-ps_defective--title::before, .p-gold-ps_defective--title::after {
background-image: url(//www.7-7maruka.com/images_22/item/gold/icon_defective.png);
background-repeat: no-repeat;
background-size: cover;
content: '';
display: block;
height: 48px;
width: 27px;
} .p-gold-ps_defective--title::after {
transform: scale(-1, 1);
} .p-gold-ps_defective--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;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 30px auto 0;
max-width: 417px;
}
@media screen and (min-width: 980px) { .p-gold-ps_defective--list {
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: none;
flex-wrap: nowrap;
max-width: none;
}
} .p-gold-ps_defective--item {
margin: 6px 1%;
width: 48%;
}
@media screen and (min-width: 980px) { .p-gold-ps_defective--item {
margin: 0 15px;
width: auto;
}
} .p-gold-ps_defective--state {
background-color: #000;
font-size: 12px;
font-size: 0.75rem;
color: #fff;
padding: 4px 0;
text-align: center;
}
@media screen and (min-width: 980px) { .p-gold-ps_defective--state {
font-size: 14px;
font-size: 0.875rem;
}
} .p-gold-ps_defective--text {
color: #d1d1d1;
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
line-height: 1.8;
margin: 20px auto 0;
max-width: 680px;
text-align: center;
}
@media screen and (min-width: 768px) { .p-gold-ps_defective--text {
font-size: 20px;
font-size: 1.25rem;
}
} .p-gold-ps_defective--btn {
margin: 30px auto 0;
} .p-gold-ps_increase {
background-color: rgba(47, 0, 0, 0.9);
border-top: 1px solid #9d8256;
border-bottom: 1px solid #9d8256;
margin: 60px auto 0;
padding: 20px 10px;
width: 90%;
}
@media screen and (min-width: 980px) { .p-gold-ps_increase {
padding: 40px;
}
} .p-gold-ps_increase--title {
color: #fff;
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-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-size: 22px;
font-size: 1.375rem;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
line-height: 1.4;
position: relative;
text-align: center;
}
@media screen and (min-width: 980px) { .p-gold-ps_increase--title {
font-size: 24px;
font-size: 1.5rem;
text-align: left;
}
} .p-gold-ps_increase--title span {
padding: 10px 0;
} .p-gold-ps_increase--title::before, .p-gold-ps_increase--title::after {
background-image: url(//www.7-7maruka.com/images_22/item/gold/icon_increase_title.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: '';
display: block;
height: 15px;
width: 80%;
}
@media screen and (min-width: 980px) { .p-gold-ps_increase--title::before, .p-gold-ps_increase--title::after {
width: 520px;
}
} .p-gold-ps_increase--img {
margin: 30px auto 0;
text-align: center;
} .p-gold-ps_increase--subtitle {
color: #fff;
font-size: 14px;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
line-height: 1.8;
margin: 30px auto 0;
text-align: center;
}
@media screen and (min-width: 980px) { .p-gold-ps_increase--subtitle {
font-size: 18px;
font-size: 1.125rem;
}
} .p-gold-ps_increase--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 40px auto;
} .p-gold-ps_increase--item {
color: #fff;
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;
flex-direction: column;
height: 85px;
max-width: 100px;
margin: 5px 2%;
position: relative;
width: 29.33%;
width: -webkit-calc(88% / 3);
width: calc(88% / 3);
}
@media screen and (min-width: 576px) { .p-gold-ps_increase--item {
height: 147px;
margin: 10px 2%;
max-width: 190px;
}
}
@media screen and (min-width: 768px) { .p-gold-ps_increase--item {
height: 190px;
}
} .p-gold-ps_increase--item span {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.1;
padding: 5px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-gold-ps_increase--item span {
font-size: 14px;
line-height: 1.4;
}
} .p-gold-ps_increase--item::before {
border-radius: 50%;
border: 1px solid #fff;
content: "";
display: block;
height: 85px;
width: 85px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
@media screen and (min-width: 576px) { .p-gold-ps_increase--item::before {
height: 145px;
width: 145px;
}
}
@media screen and (min-width: 768px) { .p-gold-ps_increase--item::before {
height: 190px;
width: 190px;
}
} .p-gold-ps_increase--icon {
max-width: 50%;
}
@media screen and (min-width: 576px) { .p-gold-ps_increase--icon {
padding: 9px 0;
max-width: none;
}
} .p-gold-ps_increase--text {
color: #d1d1d1;
line-height: 1.8;
margin: 20px auto 0;
text-align: center;
} .p-gold-reason {
margin: 0 auto 50px;
max-width: 990px;
} .p-gold-reason figure {
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-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 40px auto 0;
}
@media screen and (min-width: 980px) { .p-gold-reason figure {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
} .p-gold-reason--subtitle {
font-size: 18px;
font-size: 1.125rem;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
font-weight: bold;
line-height: 1.7;
}
@media screen and (min-width: 980px) { .p-gold-reason--subtitle {
font-size: 20px;
font-size: 1.25rem;
}
} .p-gold-reason--text {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.8;
margin: 15px auto 0;
}
@media screen and (min-width: 980px) { .p-gold-reason--text {
font-size: 14px;
}
} .p-gold-reason--img {
margin: 15px auto 0;
}
@media screen and (min-width: 980px) { .p-gold-reason--img {
margin: 0 0 0 30px;
min-width: 320px;
}
} .p-gold-point {
background-image: url(//www.7-7maruka.com/images_22/item/gold/bg_point.gif);
margin: 0 auto 50px;
padding: 5px;
} .p-gold-point--wrap {
background: black;
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.3982) 0%, rgba(0, 0, 0, 0.30296) 30%, rgba(0, 0, 0, 0.10128) 60%, transparent 100%);
background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.3982) 0%, rgba(0, 0, 0, 0.30296) 30%, rgba(0, 0, 0, 0.10128) 60%, transparent 100%);
background: linear-gradient(to top, rgba(0, 0, 0, 0.3982) 0%, rgba(0, 0, 0, 0.30296) 30%, rgba(0, 0, 0, 0.10128) 60%, rgba(0, 0, 0, 0) 100%);
border: 1px solid #9d8256;
padding: 55px 20px;
}
@media screen and (min-width: 980px) { .p-gold-point--wrap {
padding: 55px 30px;
}
} .p-gold-point figure {
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-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 60px auto 0;
max-width: 500px;
}
@media screen and (min-width: 768px) { .p-gold-point figure {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
margin: 90px auto 0;
max-width: none;
}
} .p-gold-point figure.reverse {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (min-width: 768px) { .p-gold-point figure.reverse {
-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;
}
}
@media screen and (min-width: 768px) { .p-gold-point figure.reverse figcaption {
margin: 0 0 0 50px;
}
} .p-gold-point figure figcaption {
margin: 0;
}
@media screen and (min-width: 768px) { .p-gold-point figure figcaption {
margin: 0 80px 0 0;
max-width: 420px;
}
} .p-gold-point--title {
color: #fff;
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-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-size: 24px;
font-size: 1.5rem;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
position: relative;
text-align: center;
} .p-gold-point--title span {
padding: 10px 0;
} .p-gold-point--title::before, .p-gold-point--title::after {
background-image: url(//www.7-7maruka.com/images_22/item/gold/icon_point_title.png);
background-repeat: no-repeat;
background-size: cover;
content: '';
display: block;
height: 15px;
width: 329px;
} .p-gold-point--subtitle01 {
color: #fff;
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-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-size: 22px;
font-size: 1.375rem;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
margin: 60px auto 0;
position: relative;
}
@media screen and (min-width: 768px) { .p-gold-point--subtitle01 {
font-size: 24px;
font-size: 1.5rem;
}
} .p-gold-point--subtitle01 span {
padding: 24px 0;
position: relative;
} .p-gold-point--subtitle01 span::before, .p-gold-point--subtitle01 span::after {
background-image: url(//www.7-7maruka.com/images_22/item/gold/icon_point01.png);
background-repeat: no-repeat;
background-size: cover;
content: '';
display: block;
height: 27px;
width: 27px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: -15rem;
margin: auto;
}
@media screen and (min-width: 576px) { .p-gold-point--subtitle01 span::before, .p-gold-point--subtitle01 span::after {
left: -20rem;
}
} .p-gold-point--subtitle01 span::before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
bottom: auto;
} .p-gold-point--subtitle01 span::after {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
top: auto;
} .p-gold-point--subtitle01::before, .p-gold-point--subtitle01::after {
background-image: url(//www.7-7maruka.com/images_22/item/gold/icon_point01.png);
background-repeat: no-repeat;
background-size: cover;
content: '';
display: block;
height: 27px;
width: 27px;
position: absolute;
top: 0;
bottom: 0;
right: -15rem;
left: 0;
margin: auto;
}
@media screen and (min-width: 576px) { .p-gold-point--subtitle01::before, .p-gold-point--subtitle01::after {
right: -20rem;
}
} .p-gold-point--subtitle01::before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
bottom: auto;
} .p-gold-point--subtitle01::after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: auto;
} .p-gold-point--subtitle02 {
color: #fff;
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-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-size: 22px;
font-size: 1.375rem;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
margin: 60px auto 0;
position: relative;
}
@media screen and (min-width: 768px) { .p-gold-point--subtitle02 {
font-size: 24px;
font-size: 1.5rem;
}
} .p-gold-point--subtitle02 span {
padding: 10px 0;
} .p-gold-point--subtitle02::before, .p-gold-point--subtitle02::after {
background-image: url(//www.7-7maruka.com/images_22/item/gold/icon_point02.png);
background-repeat: no-repeat;
background-size: cover;
content: '';
display: block;
height: 10px;
width: 300px;
}
@media screen and (min-width: 576px) { .p-gold-point--subtitle02::before, .p-gold-point--subtitle02::after {
height: 15px;
width: 407px;
}
} .p-gold-point--subtitle02::after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
} .p-gold-point--em {
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
margin: 40px auto 0;
padding: 15px 20px;
text-align: center;
} .p-gold-point--number01 {
color: #9d8256;
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-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
font-size: 32px;
font-size: 2rem;
font-weight: bold;
line-height: 1;
margin: 6% 0;
position: relative;
}
@media screen and (min-width: 576px) { .p-gold-point--number01 {
font-size: 52px;
font-size: 3.25rem;
margin: 14% 0;
}
} .p-gold-point--number01 span {
font-size: 14px;
font-size: 0.875rem;
}
@media screen and (min-width: 576px) { .p-gold-point--number01 span {
font-size: 20px;
font-size: 1.25rem;
}
} .p-gold-point--number01::before {
border-radius: 50%;
border: 1px solid #9d8256;
content: "";
height: 170%;
width: 156%;
min-height: 88px;
min-width: 88px;
position: absolute;
right: 0;
left: -37.5%;
top: -5%;
bottom: 0;
margin: auto;
}
@media screen and (min-width: 576px) { .p-gold-point--number01::before {
height: 185%;
width: 185%;
min-height: 110px;
min-width: 110px;
left: -42.5%;
}
} .p-gold-point--number01::after {
border-radius: 50%;
border: 1px solid #9d8256;
content: "";
height: 170%;
width: 156%;
min-height: 88px;
min-width: 88px;
position: absolute;
right: 0;
left: -32.5%;
top: 5%;
bottom: 0;
margin: auto;
}
@media screen and (min-width: 576px) { .p-gold-point--number01::after {
height: 185%;
width: 185%;
min-height: 110px;
min-width: 110px;
left: -37.5%;
}
} .p-gold-point--number02 {
color: #9d8256;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
font-size: 20px;
font-size: 1.25rem;
font-weight: bold;
font-style: italic;
} .p-gold-point--number02 span {
font-size: 70px;
font-size: 4.375rem;
}
@media screen and (min-width: 576px) { .p-gold-point--number02 span {
font-size: 80px;
font-size: 5rem;
}
} .p-gold-point--caption01 {
color: #fff;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
font-size: 18px;
font-size: 1.125rem;
margin: 25px auto 0;
text-align: left;
}
@media screen and (min-width: 576px) { .p-gold-point--caption01 {
text-align: center;
}
} .p-gold-point--caption02 {
color: #fff;
font-family: 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
font-size: 18px;
font-size: 1.125rem;
margin: 25px auto 0;
} .p-gold-point--text {
color: #d1d1d1;
line-height: 1.8;
margin: 5px auto 0;
}
@media screen and (min-width: 768px) { .p-gold-point--text {
margin: 25px auto 0;
}
} .p-gold-point--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 25px auto 0;
}
@media screen and (min-width: 576px) { .p-gold-point--list {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
} .p-gold-point--item {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin: 10px 2%;
width: 96%;
}
@media screen and (min-width: 576px) { .p-gold-point--item {
margin: 10px 2%;
width: 29.33%;
width: -webkit-calc(88% / 3);
width: calc(88% / 3);
}
} .p-gold-point--mainimg {
margin: 30px auto 0;
} .p-gold-point--img {
margin: 15px auto 0;
}
@media screen and (min-width: 980px) { .p-gold-point--img {
margin: 0;
}
}  .c-basic-h2-style01.c-ratelist-gold--title:before {
background: url(//www.7-7maruka.com/kanri/images_22/item/gold/img_kaitori_title.png) no-repeat;
width: 226px;
height: 62px;
position: absolute;
left: 0;
z-index: 1;
background-size: contain;
}
@media screen and (max-width: 768px) { .c-basic-h2-style01.c-ratelist-gold--title:before {
width: 200px;
}
}
@media screen and (max-width: 768px) { .img_cp02_illust01 {
width: 95%;
}
} .p-gold-ps01 {
background: #FFF;
margin: 40px auto 60px;
border-radius: 15px;
text-align: center;
padding: 60px 6vw 40px;
max-width: 990px;
} .p-gold-ps01 img {
margin: auto;
height: auto;
}
@media screen and (max-width: 768px) { .p-gold-ps01 {
padding: 40px 20px 20px;
margin: 40px auto;
}
} .p-gold-ps01inner {
position: relative;
}
@media screen and (max-width: 1030px) { .p-gold-ps01inner {
display: flex;
justify-content: space-between;
flex-direction: column-reverse;
}
} .p-gold-ps01inner ul {
margin: 0 0 120px;
}
@media screen and (max-width: 1030px) { .p-gold-ps01inner ul {
display: flex;
margin: 40px auto 0;
}
} .p-gold-ps01inner li {
border-radius: 15px;
display: table;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 768px) { .p-gold-ps01inner li {
border-radius: 11px;
}
} .p-gold-ps01inner li:nth-child(2) {
margin: 40px 0 40px 75px;
}
@media screen and (max-width: 1150px) { .p-gold-ps01inner li:nth-child(2) {
margin: 40px 0 40px 0;
}
}
@media screen and (max-width: 1030px) { .p-gold-ps01inner li:nth-child(2) {
margin: 0 10px;
}
}
@media screen and (max-width: 768px) { .p-gold-ps01inner li:nth-child(2) {
margin: 0 5px;
}
} .p-gold-ps01inner li:last-child {
margin: 0 0 0 150px;
}
@media screen and (max-width: 1150px) { .p-gold-ps01inner li:last-child {
margin: 0;
}
}
@media screen and (max-width: 1080px) { .p-gold-ps01inner li:last-child {
margin: 0;
}
} .p-gold-ps01inner figure {
position: absolute;
right: 0;
top: 0;
}
@media screen and (max-width: 1030px) { .p-gold-ps01inner figure {
position: relative;
}
} .p-gold-ps01inner figcaption h3 {
font-weight: bold;
writing-mode: vertical-rl;
position: absolute;
top: 0;
right: 65px;
font-size: 1.8rem;
letter-spacing: 0.3rem;
line-height: 3rem;
color: #000;
}
@media screen and (max-width: 1030px) { .p-gold-ps01inner figcaption h3 {
right: auto;
left: 60%;
}
}
@media screen and (max-width: 768px) { .p-gold-ps01inner figcaption h3 {
font-size: 20px;
left: 60%;
line-height: 2rem;
letter-spacing: 3px;
width: 25%;
}
} .p-gold-ps01 a {
margin: 40px auto;
position: relative;
display: inline-block;
} .p-gold-ps01-under > img {
margin-bottom: 30px;
display: inline-block;
} .p-gold-ps01-under figure {
position: relative;
width: 100%;
margin: 0 auto 50px;
text-align: left;
}
@media screen and (max-width: 1090px) { .p-gold-ps01-under figure {
text-align: center;
}
} .p-gold-ps01-under figure img {
position: absolute;
right: 0;
}
@media screen and (max-width: 768px) { .p-gold-ps01-under figure {
margin: 0 auto 30px;
}
}
@media screen and (max-width: 1090px) { .p-gold-ps01-under figure img {
position: relative;
}
}
@media screen and (max-width: 768px) { .p-gold-ps01-under figure img {
width: 55%;
}
} .p-gold-ps01-under figcaption .p-gold-reason--text {
font-weight: bold;
color: #000;
letter-spacing: 0.2rem;
line-height: 2.6rem;
font-size: 20px;
padding: 15px 0 0;
}
@media screen and (max-width: 768px) { .p-gold-ps01-under figcaption .p-gold-reason--text {
font-size: 14px;
letter-spacing: 0.1rem;
line-height: 1.4rem;
}
} .p-gold-ps01-atn {
margin: 30px auto;
font-weight: bold;
color: #000;
}
@media screen and (max-width: 768px) { .p-gold-ps01-atn {
margin: 20px auto;
}
} .p-gold-ps01-atn .p-gold-reason--text {
color: #000;
} #reason + img {
width: 311px;
height: auto;
display: block;
padding-bottom: 20px;
}
@media screen and (max-width: 768px) { #reason + img {
width: 75%;
}
} .p-gold-reason figure {
margin: 0 auto 40px;
}
@media screen and (max-width: 1090px) { .p-gold-reason figure {
margin: 0 auto;
}
} .p-gold-reason--subtitle {
font-weight: bold;
color: #000;
letter-spacing: 0.2rem;
line-height: 2.6rem;
font-size: 20px;
font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 768px) { .p-gold-reason--subtitle {
line-height: 1.8rem;
margin: 20px auto;
font-size: 16px;
}
} .p-gold-reason--img img {
border-radius: 15px;
} .p-gold-point01 {
background: #efece4;
margin: 60px auto 40px;
border-radius: 15px;
text-align: center;
padding: 60px 6vw;
max-width: 990px;
} .p-gold-point01 img {
margin: auto;
} .img_cp03_illust06 {
position: relative;
left: -25px;
top: -5px;
}
@media screen and (max-width: 768px) { .p-gold-point01 {
padding: 30px 20px 10px;
margin: 40px auto;
}
} .p-gold-point01 figure {
display: flex;
justify-content: space-between;
text-align: left;
align-items: flex-end;
margin-bottom: 40px;
}
@media screen and (max-width: 768px) { .p-gold-point01 figure {
display: inline-block;
margin-bottom: 20px;
} .p-gold-point01 figure figure {
display: flex;
justify-content: space-between;
text-align: left;
align-items: flex-end;
margin-bottom: 20px;
} .p-gold-point01 figure figure div img {
width: 75%;
position: relative;
left: -20px;
}
} .p-gold-point01 h3, .p-gold-point02 figure h3 {
font-weight: bold;
font-size: 30px;
letter-spacing: 0.5rem;
line-height: 3rem;
color: #000;
padding: 10px 40px 0 0;
}
@media screen and (max-width: 768px) { .p-gold-point01 h3, .p-gold-point02 figure h3 {
font-size: 20px;
padding: 10px 0 5px;
line-height: 2rem;
}
} .p-gold-point01 figure .p-gold-reason--text {
font-weight: bold;
color: #000;
letter-spacing: 0.2rem;
line-height: 2.6rem;
font-size: 20px;
margin-top: 30px;
}
@media screen and (max-width: 768px) { .p-gold-point01 figure .p-gold-reason--text {
font-size: 14px;
letter-spacing: 0.1rem;
line-height: 1.4rem;
margin-bottom: 20px;
margin-top: 10px;
}
} .p-gold-point-inner, .p-gold-point-inner figure {
margin: 60px auto 0;
align-items: center;
}
@media screen and (max-width: 768px) { .p-gold-point-inner {
margin: 40px auto 0;
} .p-gold-point-inner figure {
margin: 40px auto 10px;
display: inline-block;
} .p-gold-point-inner figure:nth-child(3) {
margin: -20px auto;
}
} .p-gold-point-inner figure h4, .p-gold-point02 figure h4 {
font-weight: bold;
color: #000;
letter-spacing: 0.2rem;
line-height: 2.4rem;
font-size: 20px;
}
@media screen and (max-width: 768px) { .p-gold-point-inner figure h4, .p-gold-point02 figure h4 {
font-size: 14px;
letter-spacing: 0.1rem;
line-height: 1.4rem;
margin-bottom: 20px;
}
} .p-gold-point-inner figure .p-gold-reason--text {
font-size: 14px;
letter-spacing: inherit;
font-weight: normal;
line-height: 1.8;
} .p-gold-point-inner figure img {
margin-right: 20px;
}
@media screen and (max-width: 768px) { .p-gold-point-inner figure img {
margin: 0 auto 20px;
display: block;
width: 30%;
}
} .p-gold-point02 {
background: #dcefe9;
margin: 40px auto 0;
border-radius: 15px;
text-align: left;
padding: 60px 6vw 10px 6vw;
max-width: 990px;
}
@media screen and (max-width: 768px) { .p-gold-point02 {
padding: 20px 20px;
margin: 40px auto 0;
}
} .p-gold-point02 figure {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
align-items: flex-end;
}
@media screen and (max-width: 768px) { .p-gold-point02 figure {
margin-bottom: 20px;
display: block;
} .p-gold-point02 figure:nth-child(5) {
margin-bottom: 40px;
} .p-gold-point02 figure:nth-child(3) {
flex-direction: column;
}
} .p-gold-point02 figure:first-child {
align-items: center;
margin-bottom: 40px;
}
@media screen and (max-width: 768px) { .p-gold-point02 figure:first-child {
display: inline-block;
margin-bottom: 20px;
}
} .p-gold-point02 figure h3 {
padding: 20px 0;
} .p-gold-point02 figure h4 {
margin: 15px 0 10px;
} .p-gold-point02 figure img {
border-radius: 15px;
}
@media screen and (max-width: 768px) { .p-gold-point02 figure img {
display: block;
margin: 0 auto 20px;
} .p-gold-point02 figure .img_pointicon img {
margin: 0 auto 20px;
width: 30%;
}
}
@media screen and (max-width: 768px) { .img_cp03_illust06_text {
width: 85%;
}
} .p-gold-point02_point .point02_point_textarea {
width: 63%;
} .p-gold-point02_point .point02_point_textarea.point02_point_textarea2 {
width: 57%;
margin-left: 5%;
}
@media screen and (max-width: 1080px) { .p-gold-point02_point .point02_point_textarea.point02_point_textarea2 {
width: 52%;
}
} .p-gold-point02 figure .p-gold-reason--text {
width: 90%;
margin: 0;
}
@media screen and (max-width: 768px) { .p-gold-point02 figure .p-gold-reason--text {
width: 100%;
}
}
@media screen and (max-width: 768px) { .p-gold-point02 figure:nth-child(3) img {
margin: 0 auto 20px;
}
} .p-gold-point02 figure:nth-child(3) .p-gold-reason--text {
width: 100%;
}
@media screen and (max-width: 768px) { .p-gold-point02_point .point02_point_textarea, .p-gold-point02 figure:nth-child(3) .point02_point_textarea {
width: 100%;
margin-left: auto;
}
} .p-module-diamond {
background: #F7F7F7;
padding: 20px 0 35px;
}
@media screen and (min-width: 840px) { .p-module-diamond {
padding: 0 0 60px;
}
} .p-module-diamond--wrap {
margin: auto;
max-width: 1000px;
margin: 0 auto;
position: relative;
width: 100%;
} .p-module-diamond--ttl {
background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
line-height: 1.2;
margin: 0 0 25px;
padding: 20px 0;
font-weight: bold;
font-size: calc(28 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-module-diamond--ttl {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-diamond--ttl {
font-size: 16px;
font-size: 1rem;
}
} .p-module-diamond--ttl .main {
display: block;
font-size: calc(30 * (100vw / 768));
padding-bottom: 20px;
}
@media screen and (min-width: 576px) { .p-module-diamond--ttl .main {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-diamond--ttl .main {
padding-bottom: 30px;
font-size: 20px;
font-size: 1.25rem;
}
} .p-module-diamond--ttl .sub {
display: block;
} .p-module-diamond-simulation--wrap {
background: #EFECE4;
border: 10px solid #ffffff;
padding: 40px 20px;
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--wrap {
padding: 30px 20px 0;
}
}
@media screen and (min-width: 980px) { .p-module-diamond-simulation--wrap {
border: 20px solid #ffffff;
padding: 70px 50px 70px;
}
} .p-module-diamond-simulation--ttl {
text-align: center;
color: #394656;
font-size: calc(27 * (100vw / 768));
font-weight: bold;
padding-bottom: 35px;
}
@media screen and (min-width: 576px) { .p-module-diamond-simulation--ttl {
font-size: calc(18 * (100vw / 768));
padding-bottom: 30px;
}
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--ttl {
font-size: 18px;
font-size: 1.125rem;
}
} .p-module-diamond-simulation--form {
margin: 0 auto;
max-width: 585px;
width: 100%;
} .p-module-diamond-simulation--par {
border-bottom: 1px dotted #fff;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
flex-direction: column;
margin-bottom: 10px;
padding-bottom: 15px;
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--par {
border-bottom: none;
flex-direction: row;
margin-bottom: 20px;
padding-bottom: 0;
}
} .p-module-diamond-simulation--par:last-of-type {
margin-bottom: 0;
} .p-module-diamond-simulation--dt {
font-size: calc(24 * (100vw / 768));
font-weight: bold;
width: 100%;
}
@media screen and (min-width: 576px) { .p-module-diamond-simulation--dt {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--dt {
font-size: 15px;
font-size: 0.9375rem;
width: 150px;
}
}
@media screen and (min-width: 980px) { .p-module-diamond-simulation--dt {
margin: 0 auto;
width: 170px;
}
} .p-module-diamond-simulation--dd {
width: 100%;
}
@media screen and (min-width: 980px) { .p-module-diamond-simulation--dd {
width: calc(100% - 150px);
}
} .p-module-diamond-simulation--dd .text {
color: #394656;
display: inline-block;
font-size: calc(26 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-module-diamond-simulation--dd .text {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--dd .text {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-module-diamond-simulation--dd .input-mini {
background: #f1f1f1;
border: 1px solid #d6d6d6;
border-radius: 5px;
display: inline-block;
padding: 10px;
margin: 0 5px;
max-width: 80px;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--dd .input-mini {
max-width: 160px;
}
} .p-module-diamond-simulation--dd .input-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(//www.7-7maruka.com/kanri/images/icon/icon-bottom-main.svg) no-repeat center right 10px;
background-size: 10px 10px;
background-color: #f7f7f7;
border: 1px solid #909090;
border-radius: 5px;
color: #394656;
display: inline-block;
padding: 15px 10px;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--dd .input-select {
max-width: 100%;
}
} .p-module-diamond-simulation--btn {
text-align: center;
margin: 35px auto 0;
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--btn {
margin: 25px auto 0;
}
} .p-module-diamond-simulation--btn .btn {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg) no-repeat center right 10px;
background-size: 15px 15px;
background-color: #81a6c9;
border: none;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-weight: bold;
font-size: calc(22 * (100vw / 768));
max-width: 260px;
padding: 10px 15px 15px;
transition: .3s;
text-align: center;
width: 100%;
}
@media screen and (min-width: 576px) { .p-module-diamond-simulation--btn .btn {
font-size: calc(14 * (100vw / 768));
max-width: 320px;
}
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--btn .btn {
font-size: 14px;
font-size: 0.875rem;
}
} .p-module-diamond-simulation--btn .btn:hover {
box-shadow: 0px 0px 15px -5px #777777;
} .p-module-diamond-simulation--result {
border-radius: 5px;
overflow: hidden;
margin: 35px auto 0;
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;
flex-direction: column;
font-size: calc(30 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-module-diamond-simulation--result {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--result {
flex-direction: row;
font-size: 15px;
font-size: 0.9375rem;
margin: 25px auto 0;
}
} .p-module-diamond-simulation--result .ttl {
background: #f7f7f7;
display: block;
font-weight: bold;
padding: 10px 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--result .ttl {
padding: 20px 5px;
}
} .p-module-diamond-simulation--result .pay {
background: #ffffff;
display: block;
font-family: "Lato", sans-serif;
font-size: 120%;
padding: 20px 5px;
text-align: center;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-diamond-simulation--result .pay {
font-size: 100%;
}
} .p-module-diamond-simulation--result .pay .in {
color: #ee99a4;
display: inline-block;
} .p-module-diamond-simulation--result .pay .num {
font-family: "Lato", sans-serif;
font-size: 180%;
} .p-module-diamond-simulation--text {
margin: 20px auto 0;
max-width: 585px;
width: 100%;
}
@media screen and (min-width: 840px) { .p-module-diamond--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;
}
} .p-module-diamond--img {
text-align: center;
padding-bottom: 10px;
}
@media screen and (min-width: 980px) { .p-module-diamond--img {
padding-left: 20px;
width: 260px;
}
} .p-module-diamond--img img {
display: inline-block;
max-width: 60%;
height: auto;
}
@media screen and (min-width: 980px) { .p-module-diamond--text {
width: calc(100% - 260px);
}
} .p-module-diamond-carat {
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;
} .p-module-diamond-carat--tab {
background: #929292;
border-bottom: 3px solid #808080;
border-radius: 5px;
cursor: pointer;
display: block;
text-align: center;
padding: 3px;
transition: .3s;
}
@media screen and (min-width: 576px) { .p-module-diamond-carat--tab {
padding: 8px 10px;
border-bottom: 5px solid #808080;
}
} .p-module-diamond-carat--tab:hover {
opacity: 0.7;
} .p-module-diamond-carat--tab .in {
color: #ffffff;
font-size: calc(18 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .p-module-diamond-carat--tab .in {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-module-diamond-carat--tab .in {
font-size: 14px;
font-size: 0.875rem;
}
} .p-module-diamond-carat label {
display: block;
padding: 0 5px 10px;
width: 50%;
}
@media screen and (min-width: 840px) { .p-module-diamond-carat label {
max-width: 240px;
width: 25%;
}
}
@media screen and (min-width: 980px) { .p-module-diamond-carat label {
width: 100%;
padding-bottom: 30px;
}
}
@media screen and (min-width: 840px) { .p-module-diamond-carat input[name="tab-diamond"]:checked + .p-page-tab {
padding-top: 5px;
}
} .p-module-diamond-carat input[name="tab-diamond"]:checked + .p-page-tab .p-module-diamond-carat--tab {
background: #00a6ca;
border: 5px solid #ffffff;
}
@media screen and (min-width: 840px) { .p-module-diamond-carat input[name="tab-diamond"]:checked + .p-page-tab .p-module-diamond-carat--tab {
padding: 5px 10px;
}
} .p-module-diamond-carat .p-page-tab--content {
display: none;
padding: 0;
width: 100%;
}
@media screen and (min-width: 576px) { .p-module-diamond-carat .p-page-tab--content {
padding: 30px 0;
}
} .p-module-diamond-carat-main--list {
max-width: 600px;
margin: 0 auto;
} .p-module-diamond-carat-main--item {
padding: 0 20px;
text-align: center;
} .p-module-diamond-carat-main--item img {
height: auto;
display: inline-block;
} .p-module-diamond-carat-main--text {
padding-top: 20px;
} .p-module-diamond-carat .carousel-arrow {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg) no-repeat center;
background-size: 50% 50%;
background-color: #81a6c9;
border-radius: 100%;
cursor: pointer;
display: block;
position: absolute;
top: calc(50% - 15px);
transition: .3s;
width: 30px;
height: 30px;
z-index: 10;
}
@media screen and (min-width: 840px) { .p-module-diamond-carat .carousel-arrow {
top: calc(50% - 25px);
width: 50px;
height: 50px;
}
} .p-module-diamond-carat .carousel-arrow:hover {
opacity: 0.7;
} .p-module-diamond-carat .carousel-arrow.prev-arrow {
background-image: url(//www.7-7maruka.com/kanri/images/icon/icon-left-w.svg);
left: 0;
} .p-module-diamond-carat .carousel-arrow.next-arrow {
right: 0;
} .p-module-diamond-kantei {
padding: 35px 0 0;
}
@media screen and (min-width: 840px) { .p-module-diamond-kantei {
padding: 60px 0 0;
}
} .p-module-diamond-kantei--wrap {
background: #e7f1f5;
border: 10px solid #ffffff;
padding: 15px 15px 30px;
}
@media screen and (min-width: 840px) { .p-module-diamond-kantei--wrap {
padding: 30px 20px;
}
}
@media screen and (min-width: 980px) { .p-module-diamond-kantei--wrap {
border: 20px solid #ffffff;
padding: 50px;
}
} .p-header {
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
padding: 18px 0 10px;
width: 92vw;
}
@media screen and (min-width: 768px) {
.p-header {
display: block;
margin: 0;
padding: 50px 0 20px;
width: auto;
}
}
.p-header--wrap {
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.p-header--wrap {
max-width: 1450px;
margin: auto;
width: 96vw;
}
}
@media screen and (min-width: 768px) {
.p-header--wrap.secondary {
margin: 25px auto 0;
}
}
.p-header--wrap.tertiary {
display: block;
}
@media screen and (min-width: 768px) {
.p-header--wrap.tertiary {
display: none;
}
}
.p-header-logo {
display: flex;
align-items: center;
flex-grow: 1;
max-width: 210px;
}
.p-header-logo picture {
display: block;
width: 100%;
}
.p-header-logo picture img {
min-width: calc(160 * (100vw / 520));
}
@media screen and (min-width: 520px) {
.p-header-logo picture img {
min-width: 160px;
}
}
.p-header-search {
display: none;
flex-grow: 1;
margin: auto;
width: 92vw;
}
@media screen and (min-width: 768px) {
.p-header-search {
display: block;
max-width: 610px;
margin: 0 0 0 15px;
width: auto;
}
}
.p-header-search .search_form {
display: flex;
}
.p-header-search .search_input {
background-color: #fff;
border: none;
border-radius: 50px 0 0 50px;
color: #9c9c9c;
font-weight: 200;
outline: none;
font-size: calc(16 * (100vw / 520));
padding: 12px 25px;
transition: .4s;
width: calc(100% - 60px);
}
@media screen and (min-width: 520px) {
.p-header-search .search_input {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-search .search_input {
font-size: calc(16 * (100vw / 980));
padding: 16px 25px;
}
}
@media screen and (min-width: 980px) {
.p-header-search .search_input {
font-size: 16px;
font-size: 1rem;
}
}
.p-header-search .search_input:hover {
background-color: #eee;
}
.p-header-search .search_submit {
background-color: #81a6c9;
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-search_white.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
border: none;
border-radius: 0 50px 50px 0;
font-size: calc(16 * (100vw / 520));
transition: .4s;
width: 60px;
}
@media screen and (min-width: 520px) {
.p-header-search .search_submit {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-search .search_submit {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-header-search .search_submit {
font-size: 16px;
font-size: 1rem;
}
}
.p-header-search .search_submit:hover {
background-color: #6889a9;
cursor: pointer;
}
.p-header-search_resultsbtn a {
background: #b29443;
border-radius: 50px;
color: #fff;
display: flex;
align-items: center;
font-size: calc(17 * (100vw / 520));
font-weight: 500;
text-align: center;
max-width: 450px;
padding: 8px 15px;
position: relative;
width: 100%;
}
@media screen and (min-width: 520px) {
.p-header-search_resultsbtn a {
font-size: calc(17 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-search_resultsbtn a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-header-search_resultsbtn a {
font-size: 16px;
font-size: 1rem;
}
}
.p-header-search_resultsbtn a::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-results.webp);
background-size: 30px;
background-repeat: no-repeat;
background-position: center;
border-radius: 50px;
content: '';
display: block;
height: 30px;
width: 30px;
margin: 0 5px 0 0;
}
.p-header-search_resultsbtn a::after {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-triangle01.svg);
background-repeat: no-repeat;
content: '';
display: block;
height: 12px;
width: 12px;
position: absolute;
right: 5%;
top: 0;
bottom: 0;
margin: auto;
transform: rotate(-90deg);
}
.p-header-tel {
display: flex;
align-items: center;
flex-grow: 1;
max-width: 270px;
margin: 0 0 0 15px;
}
.p-header-tel--wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-header-tel--wrap > a {
color: #394656;
font-family: "Lato", serif;
font-size: calc(30 * (100vw / 520));
font-weight: bold;
letter-spacing: .06rem;
}
@media screen and (min-width: 520px) {
.p-header-tel--wrap > a {
font-size: calc(28 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-tel--wrap > a {
font-size: calc(28 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-header-tel--wrap > a {
font-size: 28px;
font-size: 1.75rem;
}
}
.p-header-tel--wrap .reduce {
display: block;
font-size: calc(14 * (100vw / 520));
font-weight: 400;
letter-spacing: .06rem;
margin: 2px 0 0;
}
@media screen and (min-width: 520px) {
.p-header-tel--wrap .reduce {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-tel--wrap .reduce {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-header-tel--wrap .reduce {
font-size: 14px;
font-size: 0.875rem;
}
}
.p-header-tel--wrap .time {
font-family: "Lato", serif;
margin: 0 8px 0 0;
}
.p-header-tel .icon {
display: none;
padding: 0 12px 0 0;
position: relative;
}
@media screen and (min-width: 520px) {
.p-header-tel .icon {
display: block;
}
}
.p-header-tel .icon:before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-phone_white.svg);
background-color: #f17989;
background-size: 38%;
border-radius: 50px;
background-repeat: no-repeat;
background-position: center;
content: '';
display: block;
height: 50px;
width: 50px;
}
.p-header-tel .icon:after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 12.5px 19px 7.5px;
border-color: transparent transparent #f17989 transparent;
position: absolute;
top: 55%;
left: 36px;
}
.p-header-line {
display: none;
flex-grow: 1;
max-width: 260px;
margin: 0 0 0 15px;
}
@media screen and (min-width: 980px) {
.p-header-line {
display: block;
}
}
.p-header-line a {
background-color: #0abf7d;
border-radius: 5px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(16 * (100vw / 520));
padding: 11px;
transition: .4s;
}
@media screen and (min-width: 520px) {
.p-header-line a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-line a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-header-line a {
font-size: 16px;
font-size: 1rem;
}
}
.p-header-line a:hover {
background-color: #35d99d;
}
.p-header-line a img {
margin: 0 6px;
max-width: 30px;
}
.p-header-globalnav {
display: none;
flex-grow: 1;
max-width: 920px;
}
@media screen and (min-width: 768px) {
.p-header-globalnav {
display: block;
}
}
.p-header-globalnav ul.main {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
}
.p-header-globalnav ul.main > li {
display: flex;
align-items: center;
height: 50px;
position: relative;
}
.p-header-globalnav ul.main > li > span,
.p-header-globalnav ul.main > li a {
color: #394656;
cursor: pointer;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
}
@media screen and (min-width: 520px) {
.p-header-globalnav ul.main > li > span,
.p-header-globalnav ul.main > li a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-globalnav ul.main > li > span,
.p-header-globalnav ul.main > li a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-header-globalnav ul.main > li > span,
.p-header-globalnav ul.main > li a {
font-size: 16px;
font-size: 1rem;
}
}
.p-header-globalnav ul.main > li:not(:first-of-type) {
margin: 0 0 0 20px;
}
.p-header-globalnav ul.main > li:hover ul.sub {
opacity: 1;
visibility: visible;
max-height: 999vh;
}
.p-header-globalnav ul.sub {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
padding: 15px 10px;
opacity: 0;
visibility: hidden;
max-height: 0;
position: absolute;
top: 50px;
left: -60px;
width: 240px;
transition: .4s;
z-index: 1;
}
.p-header-globalnav ul.sub > li > span,
.p-header-globalnav ul.sub > li a {
color: #394656;
cursor: pointer;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
}
@media screen and (min-width: 520px) {
.p-header-globalnav ul.sub > li > span,
.p-header-globalnav ul.sub > li a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-globalnav ul.sub > li > span,
.p-header-globalnav ul.sub > li a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-header-globalnav ul.sub > li > span,
.p-header-globalnav ul.sub > li a {
font-size: 16px;
font-size: 1rem;
}
}
.p-header-globalnav ul.sub > li a {
background-color: #f8f8f8;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 15px;
transition: .4s;
}
.p-header-globalnav ul.sub > li a::after {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-triangle02.svg);
background-repeat: no-repeat;
background-size: cover;
content: '';
display: block;
height: 10px;
width: 10px;
position: relative;
transform: rotate(-90deg);
}
.p-header-globalnav ul.sub > li a:hover {
background-color: #9bbddd;
color: #fff;
}
.p-header-globalnav ul.sub > li a:hover::after {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-triangle01.svg);
}
.p-header-globalnav ul.sub > li:not(:first-of-type) {
margin: 6px 0 0;
}
.p-header-globalnav ul.sub > li.boundary::before {
background: radial-gradient(circle farthest-side, #9dd0eb, #9dd0eb 30%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0));
background-size: 5px 6px;
content: '';
display: inline-block;
flex-grow: 1;
height: 5px;
margin: 0 0 8px 0;
width: 100%;
}
.p-header-mypage {
display: none;
margin: 0 0 0 25px;
}
@media screen and (min-width: 1150px) {
.p-header-mypage {
display: block;
}
}
.p-header-mypage a {
color: #394656;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
}
@media screen and (min-width: 520px) {
.p-header-mypage a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-mypage a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-header-mypage a {
font-size: 16px;
font-size: 1rem;
}
}
.p-header-mypage a::before {
background-color: #f9dad6;
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-mypage.webp);
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
border-radius: 50px;
content: '';
display: block;
height: 50px;
width: 50px;
margin: 0 10px 0 0;
transition: .4s;
}
.p-header-mypage a::after {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-arrow01.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
content: '';
display: block;
height: 25px;
width: 25px;
margin: 0 0 0 10px;
transition: .4s;
}
.p-header-mypage a:hover::before {
background-color: #e7bdb8;
}
.p-header-drawerbtn {
margin: 0 0 0 10px;
}
@media screen and (min-width: 520px) {
.p-header-drawerbtn {
margin: 0 0 0 10px;
}
}
@media screen and (min-width: 768px) {
.p-header-drawerbtn {
margin: 0 0 0 25px;
}
}
.p-header-drawerbtn label {
display: flex;
align-items: center;
cursor: pointer;
}
.p-header-drawerbtn .icon {
background-color: #81a6c9;
border-radius: 50px;
height: 50px;
width: 50px;
position: relative;
transition: .4s;
}
.p-header-drawerbtn .icon::before, .p-header-drawerbtn .icon::after {
background-color: #fff;
content: '';
display: block;
height: 2px;
width: 18px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.p-header-drawerbtn .icon::before {
top: 14px;
}
.p-header-drawerbtn .icon::after {
bottom: 14px;
}
.p-header-drawerbtn .icon:hover {
background-color: #6889a9;
}
.p-header-drawerbtn .icon .border {
background-color: #fff;
height: 2px;
width: 18px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.p-header-drawerbtn .text {
color: #394656;
display: none;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
margin: 0 0 0 10px;
}
@media screen and (min-width: 520px) {
.p-header-drawerbtn .text {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-drawerbtn .text {
font-size: calc(16 * (100vw / 980));
display: inline-block;
}
}
@media screen and (min-width: 980px) {
.p-header-drawerbtn .text {
font-size: 16px;
font-size: 1rem;
}
}
.p-header-spnav {
display: block;
margin: auto;
padding: 5px 0 10px;
width: 92vw;
}
@media screen and (min-width: 768px) {
.p-header-spnav {
display: none;
}
}
.p-header-spnav > .p-header-search {
display: block;
}
@media screen and (min-width: 768px) {
.p-header-spnav > .p-header-search {
display: none;
}
}
.p-header-spnav_list {
display: flex;
flex-wrap: wrap;
}
.p-header-spnav_list > li {
margin: 10px 1% 0;
width: calc(94% / 3);
}
.p-header-spnav_list > li > a,
.p-header-spnav_list > li .p-header-spnav--label {
background-color: #ccc;
border-radius: 5px;
color: #394656;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
min-height: calc(54 * (100vw / 520));
width: 100%;
}
@media screen and (min-width: 520px) {
.p-header-spnav_list > li > a,
.p-header-spnav_list > li .p-header-spnav--label {
font-size: calc(16 * (100vw / 768));
min-height: calc(54 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-header-spnav_list > li > a,
.p-header-spnav_list > li .p-header-spnav--label {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-header-spnav_list > li > a,
.p-header-spnav_list > li .p-header-spnav--label {
font-size: 16px;
font-size: 1rem;
}
}
.p-header-spnav_list > li > a .icon,
.p-header-spnav_list > li .p-header-spnav--label .icon {
display: flex;
align-items: center;
justify-content: center;
}
.p-header-spnav_list > li > a .icon::before,
.p-header-spnav_list > li .p-header-spnav--label .icon::before {
background-repeat: no-repeat;
background-size: cover;
content: '';
display: block;
height: 23px;
width: 23px;
margin: 0 3px 0 0;
}
.p-header-spnav_list > li > a.campaign,
.p-header-spnav_list > li .p-header-spnav--label.campaign {
background-color: #faee68;
}
.p-header-spnav_list > li > a.campaign .icon::before,
.p-header-spnav_list > li .p-header-spnav--label.campaign .icon::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-campaign.webp);
}
.p-header-spnav_list > li > a.shop,
.p-header-spnav_list > li .p-header-spnav--label.shop {
background-color: #b7d5cd;
}
.p-header-spnav_list > li > a.shop .icon::before,
.p-header-spnav_list > li .p-header-spnav--label.shop .icon::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-shop.webp);
}
.p-header-spnav_list > li > a.mypage,
.p-header-spnav_list > li .p-header-spnav--label.mypage {
background-color: #f9dad6;
}
.p-header-spnav_list > li > a.mypage .icon::before,
.p-header-spnav_list > li .p-header-spnav--label.mypage .icon::before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-mypage.webp);
}
.p-header-spnav--checkbox:checked ~ .p-header-spnav--container {
visibility: visible;
opacity: 1;
max-height: 999vh;
z-index: 501;
}
.p-header-spnav--checkbox:checked ~ .p-header-spnav--overlay {
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
right: 0;
z-index: 500;
}
.p-header-spnav_banner {
display: flex;
flex-wrap: wrap;
}
.p-header-spnav_banner > li {
margin: 0 1% 10px;
width: calc(94% / 3);
}
.p-header-spnav--container {
background-color: #fff;
padding: 25px 0 10px;
visibility: hidden;
opacity: 0;
position: fixed;
max-height: 0;
width: calc(92vw - 2%);
transition: .4s;
}
.p-header-spnav--overlay {
transition: .4s;
}
.p-header-spnav--close {
background-color: #81a6c9;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -12px;
right: -5px;
height: 28px;
width: 28px;
}
.p-header-float {
background-color: rgba(247, 247, 247, 0.9);
display: flex;
align-items: center;
justify-content: space-between;
opacity: 0;
visibility: hidden;
max-height: 0;
padding: 10px 2vw;
position: fixed;
width: 100vw;
z-index: 499;
transition: .4s;
}
@media screen and (min-width: 768px) {
.p-header-float {
display: none;
}
}
.p-header-float > .p-header-search {
display: block;
margin: 0 0 0 10px;
width: auto;
}
@media screen and (min-width: 768px) {
.p-header-float > .p-header-search {
display: none;
}
}
.p-header-float > .p-header-search .search_input {
padding: 12px 10px;
width: calc(100% - 50px);
}
.p-header-float > .p-header-search .search_submit {
width: 50px;
}
.p-header-float > .p-header-logo {
max-width: 120px;
min-width: calc(160*(100vw / 520));
}
.p-header .textline {
position: relative;
}
.p-header .textline::after {
background-color: #929292;
content: '';
display: block;
height: 2px;
width: 0;
position: absolute;
bottom: -4px;
z-index: 0;
transition: .4s;
}
.p-header .textline:hover::after {
width: 100%;
} .p-footer {
background-color: #fff;
padding: 40px 0 calc(160 * (100vw / 768));
}
@media screen and (min-width: 768px) {
.p-footer {
padding: 50px 0;
}
}
.p-footer--wrap {
display: flex;
justify-content: space-between;
margin: auto;
max-width: 1450px;
width: 96vw;
}
.p-footer--wrap.secondary {
margin: 25px auto 0;
}
@media screen and (min-width: 768px) {
.p-footer--wrap.secondary {
margin: 65px auto 0;
}
}
.p-footer-logo {
display: none;
align-items: center;
flex-grow: 1;
max-width: 210px;
}
@media screen and (min-width: 768px) {
.p-footer-logo {
display: flex;
}
}
.p-footer-logo picture {
display: block;
width: 100%;
}
.p-footer-logo picture img {
min-width: calc(160 * (100vw / 520));
}
@media screen and (min-width: 520px) {
.p-footer-logo picture img {
min-width: 160px;
}
}
.p-footer-search {
flex-grow: 1;
max-width: 610px;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.p-footer-search {
margin: 0 0 0 15px;
}
}
.p-footer-search .search_form {
display: flex;
}
.p-footer-search .search_input {
background-color: #f7f7f7;
border: none;
border-radius: 50px 0 0 50px;
color: #9c9c9c;
font-weight: 200;
outline: none;
font-size: calc(16 * (100vw / 520));
padding: 12px 25px;
transition: .4s;
width: calc(100% - 60px);
}
@media screen and (min-width: 520px) {
.p-footer-search .search_input {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-search .search_input {
font-size: calc(16 * (100vw / 980));
padding: 16px 25px;
}
}
@media screen and (min-width: 980px) {
.p-footer-search .search_input {
font-size: 16px;
font-size: 1rem;
}
}
.p-footer-search .search_input:hover {
background-color: #eee;
}
.p-footer-search .search_submit {
background-color: #81a6c9;
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-search_white.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
border: none;
border-radius: 0 50px 50px 0;
font-size: calc(16 * (100vw / 520));
transition: .4s;
width: 60px;
}
@media screen and (min-width: 520px) {
.p-footer-search .search_submit {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-search .search_submit {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-footer-search .search_submit {
font-size: 16px;
font-size: 1rem;
}
}
.p-footer-search .search_submit:hover {
background-color: #6889a9;
cursor: pointer;
}
.p-footer-tel {
display: none;
align-items: center;
flex-grow: 1;
max-width: 270px;
margin: 0 0 0 15px;
}
@media screen and (min-width: 768px) {
.p-footer-tel {
display: flex;
}
}
.p-footer-tel--wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-footer-tel--wrap > a {
color: #394656;
font-family: "Lato", serif;
font-size: calc(28 * (100vw / 520));
font-weight: bold;
letter-spacing: .06rem;
}
@media screen and (min-width: 520px) {
.p-footer-tel--wrap > a {
font-size: calc(28 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-tel--wrap > a {
font-size: calc(28 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-footer-tel--wrap > a {
font-size: 28px;
font-size: 1.75rem;
}
}
.p-footer-tel--wrap .reduce {
display: block;
font-size: calc(14 * (100vw / 520));
font-weight: 400;
letter-spacing: .06rem;
margin: 2px 0 0;
}
@media screen and (min-width: 520px) {
.p-footer-tel--wrap .reduce {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-tel--wrap .reduce {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-footer-tel--wrap .reduce {
font-size: 14px;
font-size: 0.875rem;
}
}
.p-footer-tel--wrap .time {
font-family: "Lato", serif;
margin: 0 8px 0 0;
}
.p-footer-tel .icon {
padding: 0 12px 0 0;
position: relative;
}
.p-footer-tel .icon:before {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-phone_white.svg);
background-color: #f17989;
background-size: 38%;
border-radius: 50px;
background-repeat: no-repeat;
background-position: center;
content: '';
display: block;
height: 50px;
width: 50px;
}
.p-footer-tel .icon:after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 12.5px 19px 7.5px;
border-color: transparent transparent #f17989 transparent;
position: absolute;
top: 55%;
left: 36px;
}
.p-footer-line {
display: none;
flex-grow: 1;
max-width: 260px;
margin: 0 0 0 15px;
}
@media screen and (min-width: 980px) {
.p-footer-line {
display: block;
}
}
.p-footer-line a {
background-color: #0abf7d;
border-radius: 5px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(16 * (100vw / 520));
padding: 11px;
transition: .4s;
}
@media screen and (min-width: 520px) {
.p-footer-line a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-line a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-footer-line a {
font-size: 16px;
font-size: 1rem;
}
}
.p-footer-line a:hover {
background-color: #35d99d;
}
.p-footer-line a img {
margin: 0 6px;
max-width: 30px;
}
.p-footer-nav {
display: flex;
flex-direction: column;
width: 100%;
}
@media screen and (min-width: 1150px) {
.p-footer-nav {
flex-direction: row;
}
}
.p-footer-nav_list01 {
display: flex;
justify-content: space-between;
flex-direction: column;
flex-grow: 1;
width: 100%;
}
@media screen and (min-width: 768px) {
.p-footer-nav_list01 {
flex-direction: row;
}
}
@media screen and (min-width: 1150px) {
.p-footer-nav_list01 {
width: calc(100% - 325px - 80px);
}
}
.p-footer-nav_list01--wrap {
border-bottom: 1px solid #f7f7f7;
margin: 0 0 10px;
}
@media screen and (min-width: 768px) {
.p-footer-nav_list01--wrap {
border-bottom: none;
margin: 0;
}
}
@media screen and (min-width: 768px) {
.p-footer-nav_list01--wrap:not(:first-of-type) {
margin: 0 0 0 30px;
}
}
.p-footer-nav_list01--wrap dt {
color: #394656;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
margin: 0 0 10px;
}
@media screen and (min-width: 520px) {
.p-footer-nav_list01--wrap dt {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-nav_list01--wrap dt {
font-size: calc(16 * (100vw / 980));
margin: 0 0 35px;
}
}
@media screen and (min-width: 980px) {
.p-footer-nav_list01--wrap dt {
font-size: 16px;
font-size: 1rem;
}
}
.p-footer-nav_list01--wrap dd .subpage {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.p-footer-nav_list01--wrap dd .subpage {
flex-direction: column;
}
}
.p-footer-nav_list01--wrap dd .subpage > li {
margin: 0 7px 7px 0;
}
@media screen and (min-width: 768px) {
.p-footer-nav_list01--wrap dd .subpage > li {
margin: 0 0 10px;
}
}
.p-footer-nav_list01--wrap dd .subpage > li a {
color: #394656;
font-size: calc(14 * (100vw / 520));
}
@media screen and (min-width: 520px) {
.p-footer-nav_list01--wrap dd .subpage > li a {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-nav_list01--wrap dd .subpage > li a {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-footer-nav_list01--wrap dd .subpage > li a {
font-size: 14px;
font-size: 0.875rem;
}
}
.p-footer-nav_list01--wrap dd .subpage > li a:hover {
text-decoration: underline;
}
.p-footer-nav_list02 {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 20px 0 0;
width: 100%;
}
@media screen and (min-width: 768px) {
.p-footer-nav_list02 {
margin: 40px 0 0;
}
}
@media screen and (min-width: 1150px) {
.p-footer-nav_list02 {
margin: 0 0 0 80px;
max-width: 325px;
width: auto;
}
}
.p-footer-nav_list02 .page {
display: flex;
flex-wrap: wrap;
}
.p-footer-nav_list02 .page > li {
margin: 0 25px 15px 0;
}
@media screen and (min-width: 1150px) {
.p-footer-nav_list02 .page > li {
margin: 0 0 35px;
width: 48%;
}
}
@media screen and (min-width: 1150px) {
.p-footer-nav_list02 .page > li:nth-of-type(2n+2) {
margin: 0 0 35px 4%;
}
}
.p-footer-nav_list02 .page > li a {
color: #394656;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
}
@media screen and (min-width: 520px) {
.p-footer-nav_list02 .page > li a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-nav_list02 .page > li a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-footer-nav_list02 .page > li a {
font-size: 16px;
font-size: 1rem;
}
}
.p-footer-mypage {
margin: 20px 0 0;
}
@media screen and (min-width: 768px) {
.p-footer-mypage {
margin: 0;
}
}
.p-footer-mypage a {
color: #394656;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(16 * (100vw / 520));
font-weight: 500;
}
@media screen and (min-width: 520px) {
.p-footer-mypage a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-mypage a {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-footer-mypage a {
font-size: 16px;
font-size: 1rem;
}
}
.p-footer-mypage a::before {
background-color: #f9dad6;
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-mypage.webp);
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
border-radius: 50px;
content: '';
display: block;
height: 50px;
width: 50px;
margin: 0 10px 0 0;
transition: .4s;
}
.p-footer-mypage a::after {
background-image: url(//www.7-7maruka.com/kanri/images/common/icon-arrow01.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
content: '';
display: block;
height: 25px;
width: 25px;
margin: 0 0 0 10px;
transition: .4s;
}
.p-footer-mypage a:hover::before {
background-color: #e7bdb8;
}
.p-footer-ltd_hikida {
margin: 30px auto 0;
}
@media screen and (min-width: 768px) {
.p-footer-ltd_hikida {
margin: 0 auto;
}
}
.p-footer-ltd_hikida a {
transition: .4s;
}
.p-footer-ltd_hikida a:hover {
opacity: .7;
}
.p-footer-ltd_hikida .authorization,
.p-footer-ltd_hikida .copyright {
font-size: calc(14 * (100vw / 520));
}
@media screen and (min-width: 520px) {
.p-footer-ltd_hikida .authorization,
.p-footer-ltd_hikida .copyright {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-footer-ltd_hikida .authorization,
.p-footer-ltd_hikida .copyright {
font-size: calc(14 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-footer-ltd_hikida .authorization,
.p-footer-ltd_hikida .copyright {
font-size: 14px;
font-size: 0.875rem;
}
}
.p-footer-ltd_hikida .authorization {
margin: 15px auto 0;
}
.p-footer .textline {
color: #394656;
position: relative;
}
.p-footer .textline::after {
background-color: #929292;
content: '';
display: block;
height: 2px;
width: 0;
position: absolute;
bottom: -4px;
z-index: 0;
transition: .4s;
}
.p-footer .textline:hover::after {
width: 100%;
} #chatplusview, chat {
position: relative;
z-index: 10;
} #chatplusview #eye_catcher:not(.eyecatcher-imagemap) img {
width: 31vw !important;
} #chatplusview.chatplusview-modern {
max-height: 70vh !important;
}  .p-page-arrow {
display: inline-block;
position: relative;
padding-right: 20px;
}
@media screen and (min-width: 840px) { .p-page-arrow {
padding-right: 25px;
}
} .p-page-arrow::before {
content: '';
width: 15px;
height: 8px;
border-bottom: 1px solid #000000;
position: absolute;
right: -2px;
top: calc(50% - 4px);
}
@media screen and (min-width: 576px) { .p-page-arrow::before {
border-bottom: 2px solid #000000;
}
}
@media screen and (min-width: 840px) { .p-page-arrow::before {
width: 20px;
}
} .p-page-arrow::after {
content: '';
background: #000000;
display: block;
transform: rotate(312deg);
width: 1px;
height: 8px;
position: absolute;
right: 1px;
top: calc(50% - 1.5px);
}
@media screen and (min-width: 576px) { .p-page-arrow::after {
width: 2px;
}
} .p-page-arrow.white::before {
border-color: #ffffff;
} .p-page-arrow.white::after {
background: #ffffff;
}   input[name="tab-brand"],
input[name="tab_name"],
input[name="shop-park"],
input[name="tab-gold"],
input[name="tab-step"],
input[name="delivery-step"],
input[name="delivery-flow"],
input[name="tab-diamond"] {
display: none;
}  .p-page-tab_content {
visibility: hidden;
opacity: 0;
clear: both;
overflow: hidden;
width: 100%;
max-height: 0;
}  #features-tab1:checked ~ #features-tab1-content,
#shop-park1:checked ~ #shop-park1-content,
#brand1:checked ~ #brand1-content,
#gold1:checked ~ #gold1-content,
#delivery-tab1:checked ~ #delivery-tab1-content,
#delivery-flow1:checked ~ #delivery-flow1-content,
#diamond1:checked ~ #diamond1-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab2:checked ~ #features-tab2-content,
#shop-park2:checked ~ #shop-park2-content,
#brand2:checked ~ #brand2-content,
#gold2:checked ~ #gold2-content,
#delivery-tab2:checked ~ #delivery-tab2-content,
#delivery-flow2:checked ~ #delivery-flow2-content,
#diamond2:checked ~ #diamond2-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab3:checked ~ #features-tab3-content,
#shop-park3:checked ~ #shop-park3-content,
#brand3:checked ~ #brand3-content,
#gold3:checked ~ #gold3-content,
#delivery-tab3:checked ~ #delivery-tab3-content,
#delivery-flow3:checked ~ #delivery-flow3-content,
#diamond3:checked ~ #diamond3-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab4:checked ~ #features-tab4-content,
#shop-park4:checked ~ #shop-park4-content,
#brand4:checked ~ #brand4-content,
#gold4:checked ~ #gold4-content,
#delivery-tab4:checked ~ #delivery-tab4-content,
#delivery-flow4:checked ~ #delivery-flow4-content,
#diamond4:checked ~ #diamond4-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab5:checked ~ #features-tab5-content,
#shop-park5:checked ~ #shop-park5-content,
#brand5:checked ~ #brand5-content,
#gold5:checked ~ #gold5-content,
#delivery-tab5:checked ~ #delivery-tab5-content,
#delivery-flow5:checked ~ #delivery-flow5-content,
#diamond5:checked ~ #diamond5-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab6:checked ~ #features-tab6-content,
#shop-park6:checked ~ #shop-park6-content,
#brand6:checked ~ #brand6-content,
#gold6:checked ~ #gold6-content,
#delivery-tab6:checked ~ #delivery-tab6-content,
#delivery-flow6:checked ~ #delivery-flow6-content,
#diamond6:checked ~ #diamond6-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab7:checked ~ #features-tab7-content,
#shop-park7:checked ~ #shop-park7-content,
#brand7:checked ~ #brand7-content,
#gold7:checked ~ #gold7-content,
#delivery-tab7:checked ~ #delivery-tab7-content,
#delivery-flow7:checked ~ #delivery-flow7-content,
#diamond7:checked ~ #diamond7-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab8:checked ~ #features-tab8-content,
#shop-park8:checked ~ #shop-park8-content,
#brand8:checked ~ #brand8-content,
#gold8:checked ~ #gold8-content,
#delivery-tab8:checked ~ #delivery-tab8-content,
#delivery-flow8:checked ~ #delivery-flow8-content,
#diamond8:checked ~ #diamond8-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab9:checked ~ #features-tab9-content,
#shop-park9:checked ~ #shop-park9-content,
#brand9:checked ~ #brand9-content,
#gold9:checked ~ #gold9-content,
#delivery-tab9:checked ~ #delivery-tab9-content,
#delivery-flow9:checked ~ #delivery-flow9-content,
#diamond9:checked ~ #diamond9-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab10:checked ~ #features-tab10-content,
#shop-park10:checked ~ #shop-park10-content,
#brand10:checked ~ #brand10-content,
#gold10:checked ~ #gold10-content,
#delivery-tab10:checked ~ #delivery-tab10-content,
#delivery-flow10:checked ~ #delivery-flow10-content,
#diamond10:checked ~ #diamond10-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab11:checked ~ #features-tab11-content,
#shop-park11:checked ~ #shop-park11-content,
#brand11:checked ~ #brand11-content,
#gold11:checked ~ #gold11-content,
#delivery-tab11:checked ~ #delivery-tab11-content,
#delivery-flow11:checked ~ #delivery-flow11-content,
#diamond11:checked ~ #diamond11-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab12:checked ~ #features-tab12-content,
#shop-park12:checked ~ #shop-park12-content,
#brand12:checked ~ #brand12-content,
#gold12:checked ~ #gold12-content,
#delivery-tab12:checked ~ #delivery-tab12-content,
#delivery-flow12:checked ~ #delivery-flow12-content,
#diamond12:checked ~ #diamond12-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab13:checked ~ #features-tab13-content,
#shop-park13:checked ~ #shop-park13-content,
#brand13:checked ~ #brand13-content,
#gold13:checked ~ #gold13-content,
#delivery-tab13:checked ~ #delivery-tab13-content,
#delivery-flow13:checked ~ #delivery-flow13-content,
#diamond13:checked ~ #diamond13-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab14:checked ~ #features-tab14-content,
#shop-park14:checked ~ #shop-park14-content,
#brand14:checked ~ #brand14-content,
#gold14:checked ~ #gold14-content,
#delivery-tab14:checked ~ #delivery-tab14-content,
#delivery-flow14:checked ~ #delivery-flow14-content,
#diamond14:checked ~ #diamond14-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
} #features-tab15:checked ~ #features-tab15-content,
#shop-park15:checked ~ #shop-park15-content,
#brand15:checked ~ #brand15-content,
#gold15:checked ~ #gold15-content,
#delivery-tab15:checked ~ #delivery-tab15-content,
#delivery-flow15:checked ~ #delivery-flow15-content,
#diamond15:checked ~ #diamond15-content {
visibility: visible;
opacity: 1;
max-height: 999vh;
}   #colorbox, #cboxOverlay, #cboxWrapper {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
-webkit-transform: translate3d(0, 0, 0);
} #cboxWrapper {
max-width: none;
} #cboxOverlay {
position: fixed;
width: 100%;
height: 100%;
} #cboxMiddleLeft, #cboxBottomLeft {
clear: left;
} #cboxContent {
position: relative;
} #cboxLoadedContent {
overflow: auto;
-webkit-overflow-scrolling: touch;
} #cboxTitle {
margin: 0;
} #cboxLoadingOverlay, #cboxLoadingGraphic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor: pointer;
} .cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic;
} .cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
padding: 0;
margin: 0;
} #colorbox, #cboxContent, #cboxLoadedContent {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}  #cboxOverlay {
background: #fff;
} #colorbox {
outline: 0;
} #cboxContent {
margin-top: 32px;
overflow: visible;
background: #000;
} .cboxIframe {
background: #fff;
} #cboxError {
padding: 50px;
border: 1px solid #ccc;
} #cboxLoadedContent {
background: #000;
padding: 1px;
} #cboxLoadingOverlay {
background: #000;
} #cboxTitle {
position: absolute;
top: -22px;
left: 0;
color: #000;
} #cboxCurrent {
position: absolute;
top: -22px;
right: 205px;
text-indent: -9999px;
}  #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
text-indent: -9999px;
width: 20px;
height: 20px;
position: absolute;
top: -20px;
background: url(//www.7-7maruka.com/kanri/css/images/controls.png) no-repeat 0 0;
}  #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
outline: 0;
} #cboxPrevious {
background-position: 0px 0px;
right: 44px;
} #cboxPrevious:hover {
background-position: 0px -25px;
} #cboxNext {
background-position: -25px 0px;
right: 22px;
} #cboxNext:hover {
background-position: -25px -25px;
} #cboxClose {
background-position: -50px 0px;
right: 0;
} #cboxClose:hover {
background-position: -50px -25px;
} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
right: 66px;
} .cboxSlideshow_on #cboxSlideshow {
background-position: -75px -25px;
right: 44px;
} .cboxSlideshow_on #cboxSlideshow:hover {
background-position: -100px -25px;
} .cboxSlideshow_off #cboxSlideshow {
background-position: -100px 0px;
right: 44px;
} .cboxSlideshow_off #cboxSlideshow:hover {
background-position: -75px -25px;
} #colorbox #cboxTitle {
width: 100%;
color: #218541;
font-weight: bold;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px;
border-radius: 5px 5px 0 0;
} #colorbox #cboxClose {
background: url(//www.7-7maruka.com/kanri/images/icon/icon_multiply_w.svg) no-repeat center;
background-color: #666666;
background-size: 60% 60%;
width: 32px;
height: 32px;
top: -32px;
right: 0px;
} #colorbox #cboxNext {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-right-w.svg) no-repeat center;
background-color: #218541;
background-size: 70% 70%;
width: 35px;
height: 35px;
top: calc(50% - 17px);
right: 0;
border: 1px solid #959595;
opacity: 0.8;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px;
border-radius: 5px 0 0 5px;
} #colorbox #cboxPrevious {
background: url(//www.7-7maruka.com/kanri/images/icon/icon-left-w.svg) no-repeat center;
background-color: #218541;
background-size: 70% 70%;
width: 35px;
height: 35px;
top: calc(50% - 17px);
left: 0;
border: 1px solid #959595;
opacity: 0.8;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0;
border-radius: 0 5px 5px 0;
}   .p-item-category-mv {
background-position: center;
background-size: cover;
margin: 20px 0 10px;
text-align: center;
}
@media screen and (min-width: 980px) { .p-item-category-mv {
padding: 0;
margin: 0 auto;
}
} .p-item-category-mv--wrap {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
max-width: 1920px;
text-align: center;
width: 100%;
margin: 0 auto;
} .p-item-category-mv img {
display: inline-block;
width: 100%;
height: auto;
margin: 0 auto;
} .p-item-category-about {
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .p-item-category-about {
padding: 60px 0;
}
} .p-item-category-about ~ .c-manip {
padding: 0 0 50px;
}
@media screen and (min-width: 840px) { .p-item-category-about ~ .c-manip {
padding: 0 0 80px;
}
} .p-item-category-about--wrap {
margin: auto;
max-width: 850px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-item-category-about--title {
color: #394656;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-about--title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-about--title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-item-category-about--textarea {
text-align: left;
}
@media screen and (min-width: 840px) { .p-item-category-about--textarea {
text-align: center;
}
} .p-item-category-campaign {
padding: 30px 0 35px;
}
@media screen and (min-width: 840px) { .p-item-category-campaign {
padding: 60px 0;
}
} .p-item-category-campaign--wrap {
margin: auto;
max-width: 850px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-item-category-campaign--ttl {
color: #394656;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
padding-bottom: 20px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-campaign--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-campaign--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-item-category-campaign--list {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (min-width: 840px) { .p-item-category-campaign--list {
margin: 0 auto;
}
} .p-item-category-campaign--item {
width: 50%;
padding: 0 10px;
}
@media screen and (min-width: 840px) { .p-item-category-campaign--item {
width: 45%;
}
} .p-item-category-campaign--item .link {
display: block;
} .p-item-category-campaign--item .link img {
width: 100%;
height: auto;
} .p-item-category-purchase {
background-color: #f0f0f0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row-reverse;
position: relative;
} .p-item-category-purchase--wrap {
flex-grow: 1;
padding: 35px 20px 30px;
position: relative;
margin: 0 auto;
width: 100%;
}
@media screen and (min-width: 840px) { .p-item-category-purchase--wrap {
max-width: calc(100% - 300px);
padding: 60px 0;
}
} .p-item-category-purchase_navi {
background-color: #f0f0f0;
box-shadow: 3px 0 5px rgba(0, 0, 0, 0.2);
padding: 35px 0;
position: relative;
width: 0;
z-index: 2;
}
@media screen and (min-width: 840px) { .p-item-category-purchase_navi {
box-shadow: none;
padding: 80px 0;
width: auto;
}
} .p-item-category-purchase_navi--label {
background-color: #81a7c8;
border-radius: 50px;
cursor: pointer;
display: block;
padding: 24px 0;
position: relative;
left: 25px;
transition: .3s;
width: 50px;
}
@media screen and (min-width: 980px) { .p-item-category-purchase_navi--label {
left: 55px;
}
} .p-item-category-purchase_navi--label:hover {
opacity: 0.8;
} .p-item-category-purchase_navi--label span::before, .p-item-category-purchase_navi--label::before, .p-item-category-purchase_navi--label::after {
background-color: #fff;
content: '';
display: block;
height: 2px;
width: 16px;
position: absolute;
left: 0;
right: 0;
margin: auto;
} .p-item-category-purchase_navi--label::before {
top: 16px;
transition: .4s;
z-index: 1;
} .p-item-category-purchase_navi--label::after {
bottom: 14px;
transition: .4s;
z-index: 1;
} .p-item-category-purchase_navi--label span {
display: block;
position: relative;
} .p-item-category-purchase_navi--label span::before {
z-index: 1;
} .p-item-category-purchase_navi--label span::after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
@media screen and (min-width: 840px) { .p-item-category-purchase_navi--label span::after {
display: none;
}
} .p-item-category-purchase_navi aside {
opacity: 0;
margin: 10px 0;
padding: 0 20px;
height: 80vh;
max-height: 860px;
position: sticky;
top: 70px;
overflow-x: hidden;
overflow-y: hidden;
transition: .4s;
visibility: hidden;
width: 0;
}
@media screen and (min-width: 840px) { .p-item-category-purchase_navi aside {
opacity: 1;
overflow-y: scroll;
visibility: visible;
top: 0;
width: 220px;
}
}
@media screen and (min-width: 980px) { .p-item-category-purchase_navi aside {
padding: 0 60px;
width: 300px;
}
} .p-item-category-purchase_navi aside::-webkit-scrollbar {
width: 6px;
} .p-item-category-purchase_navi aside::-webkit-scrollbar-track {
background-color: #fff;
} .p-item-category-purchase_navi aside::-webkit-scrollbar-thumb {
background-color: #b7b7b7;
border-radius: 8px;
} .p-item-category-purchase_navi--container {
margin: 25px 0 0;
min-width: 180px;
} .p-item-category-purchase_navi--wrap:not(:first-of-type) {
border-top: 1px solid #bfbfbf;
margin: 25px 0 0;
padding: 25px 0 0;
} .p-item-category-purchase_navi--wrap dt {
font-size: calc(24 * (100vw / 768));
font-weight: bold;
margin: 0 0 15px;
}
@media screen and (min-width: 576px) { .p-item-category-purchase_navi--wrap dt {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-purchase_navi--wrap dt {
font-size: 16px;
font-size: 1rem;
}
} .p-item-category-purchase_navi--list > li a {
color: #555;
display: block;
font-size: calc(24 * (100vw / 768));
margin: 8px 0;
padding: 8px 0;
}
@media screen and (min-width: 576px) { .p-item-category-purchase_navi--list > li a {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-purchase_navi--list > li a {
font-size: 16px;
font-size: 1rem;
}
} .p-item-category #purchase_navi--check {
display: none;
} .p-item-category #purchase_navi--check:checked + .p-item-category-purchase_navi {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: auto;
z-index: 10;
}
@media screen and (min-width: 840px) { .p-item-category #purchase_navi--check:checked + .p-item-category-purchase_navi {
height: auto;
width: 0;
}
} .p-item-category #purchase_navi--check:checked + .p-item-category-purchase_navi aside {
overflow-x: hidden;
overflow-y: scroll;
opacity: 1;
visibility: visible;
transition: .4s;
max-width: 220px;
width: 45vw;
}
@media screen and (min-width: 840px) { .p-item-category #purchase_navi--check:checked + .p-item-category-purchase_navi aside {
opacity: 0;
overflow-y: hidden;
visibility: hidden;
max-width: none;
width: 0;
}
} .p-item-category #purchase_navi--check:checked + .p-item-category-purchase_navi .p-item-category-purchase_navi--label span {
display: none;
position: relative;
} .p-item-category #purchase_navi--check:checked + .p-item-category-purchase_navi .p-item-category-purchase_navi--label::before {
top: 24px;
transition: .4s;
transform: rotate(-45deg);
} .p-item-category #purchase_navi--check:checked + .p-item-category-purchase_navi .p-item-category-purchase_navi--label::after {
bottom: 22px;
transition: .4s;
transform: rotate(45deg);
} .p-item-category #purchase_navi--check:checked ~ .p-item-category-purchase_navi--overlay {
width: 100vw;
position: absolute;
background-color: rgba(6, 6, 6, 0.12);
height: 100%;
z-index: 1;
}
@media screen and (min-width: 840px) { .p-item-category #purchase_navi--check:checked ~ .p-item-category-purchase_navi--overlay {
display: none;
}
} .p-item-category .c-results {
padding: 0 0 calc(80 * (100vw / 768));
}
@media screen and (min-width: 840px) { .p-item-category .c-results {
padding: 0 0 80px;
}
} .p-item-category .c-priorityitem--title {
margin: 10px auto 0;
}
@media screen and (min-width: 840px) { .p-item-category .c-priorityitem--title {
margin: 40px auto 0;
}
} .p-item-category-features {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
padding: calc(80 * (100vw / 980)) 0 0;
width: 100%;
}
@media screen and (min-width: 980px) { .p-item-category-features {
flex-direction: row;
padding: 80px 0 0;
}
} .p-item-category-features--wrap {
margin: 0 auto;
max-width: calc(100% - 360px);
} .p-item-category-features_block {
margin: auto;
width: 90%;
}
@media screen and (min-width: 980px) { .p-item-category-features_block {
padding-left: 50px;
}
} .p-item-category-features_block--wrap {
margin: 0 auto calc(50 * (100vw / 980));
max-width: 1000px;
padding: 0 1%;
width: auto;
}
@media screen and (min-width: 980px) { .p-item-category-features_block--wrap {
margin: 0 auto 50px;
}
} .p-item-category-features_block--wrap .title {
background-image: linear-gradient(to right, #cccccc 2px, rgba(0, 0, 0, 0) 2px);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: left bottom;
line-height: 1.2;
margin: 0 0 25px;
padding: 20px 0;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
font-weight: bold;
font-size: calc(28 * (100vw / 668));
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .title {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .title {
font-size: 16px;
font-size: 1rem;
}
} .p-item-category-features_block--wrap .subtitle {
font-weight: bold;
font-size: calc(24 * (100vw / 668));
margin: 0 0 20px;
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .subtitle {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .subtitle {
font-size: 16px;
font-size: 1rem;
}
} .p-item-category-features_block--wrap .content {
font-size: calc(24 * (100vw / 668));
line-height: 2;
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .content {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content {
font-size: 16px;
font-size: 1rem;
}
} .p-item-category-features_block--wrap .content .pc {
display: none;
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content .pc {
display: block;
}
} .p-item-category-features_block--wrap .content .sp {
display: block;
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content .sp {
display: none;
}
} .p-item-category-features_block--wrap .content h1 {
font-weight: bold;
font-size: calc(30 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .content h1 {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content h1 {
font-size: 20px;
font-size: 1.25rem;
}
} .p-item-category-features_block--wrap .content h2 {
font-weight: bold;
font-size: calc(27 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .content h2 {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content h2 {
font-size: 18px;
font-size: 1.125rem;
}
} .p-item-category-features_block--wrap .content h3 {
font-weight: bold;
font-size: calc(27 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .content h3 {
font-size: calc(18 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content h3 {
font-size: 18px;
font-size: 1.125rem;
}
} .p-item-category-features_block--wrap .content h4 {
font-weight: bold;
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .content h4 {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content h4 {
font-size: 16px;
font-size: 1rem;
}
} .p-item-category-features_block--wrap .content h5 {
font-weight: bold;
font-size: calc(22.5 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .content h5 {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content h5 {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-item-category-features_block--wrap .content h6 {
font-weight: bold;
font-size: calc(22.5 * (100vw / 768));
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .content h6 {
font-size: calc(15 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content h6 {
font-size: 15px;
font-size: 0.9375rem;
}
} .p-item-category-features_block--wrap .content strong {
font-weight: bold;
} .p-item-category-features_block--wrap .content em {
font-style: italic;
} .p-item-category-features_block--wrap .content ul {
display: block;
text-align: left;
} .p-item-category-features_block--wrap .content ul li {
display: block;
text-indent: -1.3rem;
padding-left: 1rem;
margin-bottom: 5px;
} .p-item-category-features_block--wrap .content ul li:before {
content: "・";
color: #218541;
} .p-item-category-features_block--wrap .content ol li {
display: block;
text-indent: -1.3rem;
padding-left: 1rem;
margin-bottom: 5px;
} .p-item-category-features_block--wrap .content ol li:before {
content: "・";
color: #218541;
} .p-item-category-features_block--wrap .content a {
color: #0ea7c9;
font-weight: bold;
text-decoration: underline;
} .p-item-category-features_block--wrap .content img {
background-color: #efece4;
border: 10px solid #fff;
border-radius: 5px;
margin: auto;
padding: 10px;
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .content img {
border: 20px solid #fff;
padding: 20px;
}
} .p-item-category-features_block--wrap .content p {
margin: 10px 0 0;
} .p-item-category-features_block--wrap .tab {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
position: relative;
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .tab {
flex-direction: row;
}
} .p-item-category-features_block--wrap .tab--wrap {
width: 100%;
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .tab--wrap {
width: calc(96% / 3);
}
} .p-item-category-features_block--wrap .tab--wrap:not(:first-of-type) {
margin: 15px 0 0;
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .tab--wrap:not(:first-of-type) {
margin: 0 0 0 2%;
}
} .p-item-category-features_block--wrap .tab--wrap input {
display: none;
} .p-item-category-features_block--wrap .tab--wrap input:checked + dt {
box-shadow: 0px -5px 0px #808080;
transition: .4s;
} .p-item-category-features_block--wrap .tab--wrap input:checked + dt label {
background-color: #0ea7c9;
border: 5px solid #fff;
} .p-item-category-features_block--wrap .tab--wrap input:checked + dt + dd .text {
opacity: 1;
visibility: visible;
max-height: 60vh;
transition: .4s;
} .p-item-category-features_block--wrap .tab--wrap input:checked + dt + dd .bg {
background-color: rgba(0, 0, 0, 0.3);
display: block;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 9;
} .p-item-category-features_block--wrap .tab--wrap dt {
box-shadow: 0px 5px 0px #808080;
border-radius: 5px;
transition: .4s;
overflow: hidden;
} .p-item-category-features_block--wrap .tab--wrap dt label {
background-color: #929292;
border: 5px solid #929292;
color: #fff;
display: block;
transition: .4s;
text-align: center;
padding: 8px;
} .p-item-category-features_block--wrap .tab--wrap dd .text {
background-color: #fff;
opacity: 0;
visibility: hidden;
max-height: 0;
overflow-y: scroll;
padding: 30px 25px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 500px;
width: 96vw;
z-index: 10;
transition: .4s;
} .p-item-category-features_block--wrap .tab--wrap dd .close {
background-color: #555;
border-radius: 5px;
color: #fff;
display: block;
font-size: calc(26 * (100vw / 768));
letter-spacing: .1rem;
line-height: 1;
margin: 20px auto 0;
padding: 10px calc(33 * (100vw / 768)) 10px 18px;
position: relative;
text-align: center;
width: 49%;
}
@media screen and (min-width: 576px) { .p-item-category-features_block--wrap .tab--wrap dd .close {
font-size: calc(13 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_block--wrap .tab--wrap dd .close {
font-size: 13px;
font-size: 0.8125rem;
padding: 16px calc(33 * (100vw / 768)) 16px 18px;
}
}
@media screen and (min-width: 980px) { .p-item-category-features_block--wrap .tab--wrap dd .close {
padding: 16px 22px 16px 18px;
}
} .p-item-category-features_block--wrap .tab--wrap dd .close:hover {
cursor: pointer;
} .p-item-category-features_block--wrap .tab--wrap dd .close:before {
content: '';
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 0;
right: calc(22 * (100vw / 768));
margin: auto;
}
@media screen and (min-width: 980px) { .p-item-category-features_block--wrap .tab--wrap dd .close:before {
right: 15px;
}
} .p-item-category-features_navi {
background: rgba(247, 247, 247, 0.95);
padding: 10px;
position: sticky;
top: 70px;
z-index: 10;
}
@media screen and (min-width: 980px) { .p-item-category-features_navi {
padding: 0 0 0 60px;
position: relative;
top: 0;
max-width: 300px;
width: 100%;
}
} .p-item-category-features_navi .c-sub-nav {
background: none;
padding: 0;
position: sticky;
top: 0;
}
@media screen and (min-width: 980px) { .p-item-category-features_navi .c-sub-nav {
width: 100%;
}
} .p-item-category-features_navi--container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
margin: auto;
max-width: 700px;
width: 90%;
}
@media screen and (min-width: 980px) { .p-item-category-features_navi--container {
flex-direction: column;
max-width: 260px;
}
} .p-item-category-features_navi--wrap {
padding: 0 2%;
width: 50%;
}
@media screen and (min-width: 980px) { .p-item-category-features_navi--wrap {
width: auto;
}
}
@media screen and (min-width: 980px) { .p-item-category-features_navi--wrap:not(:first-of-type) {
margin: 25px 0 0;
}
} .p-item-category-features_navi--wrap dt {
font-size: calc(21 * (100vw / 768));
font-weight: bold;
}
@media screen and (min-width: 576px) { .p-item-category-features_navi--wrap dt {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-features_navi--wrap dt {
font-size: 14px;
font-size: 0.875rem;
}
} .p-item-category-features_navi--list > li {
margin: 8px 0 0;
} .p-item-category-features_navi--list > li:first-of-type {
margin: 5px 0 0;
}
@media screen and (min-width: 840px) { .p-item-category-features_navi--list > li:first-of-type {
margin: 15px 0 0;
}
} .p-item-category-features_navi--list > li a {
border: 1px solid #fff;
padding: 8px 18px;
}
@media screen and (min-width: 840px) { .p-item-category-features_navi--list > li a {
padding: 16px 18px;
}
} .p-item-category-features_navi--list.valuation > li a {
border: 1px solid #555;
padding: 8px 18px;
}
@media screen and (min-width: 840px) { .p-item-category-features_navi--list.valuation > li a {
padding: 16px 18px;
}
} .p-item-category-point {
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-item-category-point {
padding: 60px 0;
}
} .p-item-category-point--wrap {
background-color: #eef0f0;
max-width: 1211px;
margin: 0 auto;
position: relative;
width: 100%;
padding: 35px 10px 30px;
}
@media screen and (min-width: 840px) { .p-item-category-point--wrap {
padding: 60px 20px;
}
}
@media screen and (min-width: 980px) { .p-item-category-point--wrap {
padding: 80px 20px;
}
} .p-item-category-point--wrap .title {
color: #394656;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-point--wrap .title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-point--wrap .title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-item-category-point--list {
margin: auto;
max-width: 900px;
} .p-item-category-point--list li:not(:first-of-type) {
margin: 30px 0 0 0;
}
@media screen and (min-width: 840px) { .p-item-category-point--list li:not(:first-of-type) {
margin: 50px 0 0 0;
}
} .p-item-category-point--list li figure {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
flex-direction: column-reverse;
}
@media screen and (min-width: 840px) { .p-item-category-point--list li figure {
flex-direction: row-reverse;
}
} .p-item-category-point--list li figure > picture {
margin: 10px 0;
max-width: 280px;
text-align: center;
}
@media screen and (min-width: 840px) { .p-item-category-point--list li figure > picture {
margin: 0 0 0 40px;
width: 100%;
}
} .p-item-category-point--list li figure > picture img {
width: 100%;
height: auto;
} .p-item-category-point--list li figure figcaption {
width: 100%;
}
@media screen and (min-width: 840px) { .p-item-category-point--list li figure figcaption {
width: calc(100% - 280px);
}
} .p-item-category-point--list li figure figcaption .point {
max-width: 120px;
}
@media screen and (min-width: 840px) { .p-item-category-point--list li figure figcaption .point {
max-width: 165px;
}
} .p-item-category-point--list li figure figcaption .subtitle {
color: #394656;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
padding: 20px 0;
text-align: center;
line-height: 1.5;
}
@media screen and (min-width: 576px) { .p-item-category-point--list li figure figcaption .subtitle {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-point--list li figure figcaption .subtitle {
text-align: left;
font-size: 20px;
font-size: 1.25rem;
padding: 20px 0 20px 45px;
}
} .p-item-category-point--list li figure figcaption .text {
color: #394656;
word-wrap: break-word;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 6px;
margin-bottom: 0.375rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
@media screen and (min-width: 840px) { .p-item-category-point--list li figure figcaption .text {
padding: 0 0 0 45px;
}
}
@media screen and (min-width: 980px) { .p-item-category-point--list li figure figcaption .text {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 12px;
margin-bottom: 0.75rem;
line-height: 2;
}
} .p-item-category-box {
padding: 35px 0 0;
}
@media screen and (min-width: 840px) { .p-item-category-box {
padding: 60px 0 0;
}
} .p-item-category-box--wrap {
margin: auto;
max-width: 850px;
margin: 0 auto 30px;
padding: 0 20px;
position: relative;
width: 100%;
}
@media screen and (min-width: 980px) { .p-item-category-box--wrap {
margin: 0 auto 50px;
}
} .p-item-category-box--ttl {
color: #394656;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-box--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-box--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-item-category-box--contents {
text-align: center;
}
@media screen and (min-width: 840px) { .p-item-category-box--contents {
margin: 0 auto;
}
} .p-item-category-reazon {
background: #F0F0F0;
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .p-item-category-reazon {
padding: 60px 0;
}
} .p-item-category-reazon--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-item-category-reazon--ttl {
color: #394656;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
padding-bottom: 10px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-reazon--ttl {
font-size: calc(20 * (100vw / 768));
padding-bottom: 30px;
}
}
@media screen and (min-width: 840px) { .p-item-category-reazon--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
}
@media screen and (min-width: 576px) { .p-item-category-reazon--contents {
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: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
align-items: flex-start;
}
} .p-item-category-reazon--info {
background: url(//www.7-7maruka.com/kanri/images/top/text-line-top.webp) no-repeat top center;
background-size: contain;
padding: 40px 0 0;
position: relative;
width: 100%;
}
@media screen and (min-width: 576px) { .p-item-category-reazon--info {
padding: 50px 0 0;
}
}
@media screen and (min-width: 840px) { .p-item-category-reazon--info {
max-width: calc(100% - 250px);
}
}
@media screen and (min-width: 980px) { .p-item-category-reazon--info {
max-width: calc(100% - 470px);
}
} .p-item-category-reazon--text {
background: url(//www.7-7maruka.com/kanri/images/top/text-line-bottom.webp) no-repeat bottom center;
background-size: contain;
padding: 0 0 40px;
margin-bottom: 50px !important;
}
@media screen and (min-width: 576px) { .p-item-category-reazon--text {
padding: 20px 0 70px;
}
} .p-item-category-reazon--nav {
background: #E5E5E5;
border-radius: 5px;
column-gap: 5px;
display: grid;
grid-template-columns: 1fr;
row-gap: 10px;
padding: 10px 10px 20px;
}
@media screen and (min-width: 576px) { .p-item-category-reazon--nav {
padding: 40px 30px;
grid-template-columns: 1fr 1fr;
}
} .p-item-category-reazon-box {
padding-top: 10px;
}
@media screen and (min-width: 576px) { .p-item-category-reazon-box {
padding: 0;
max-width: 260px;
margin: 0 auto;
}
} .p-item-category-reazon-box--ttl {
color: #394656;
font-size: calc(30 * (100vw / 668));
font-weight: bold;
padding-bottom: 5px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-reazon-box--ttl {
padding-bottom: 30px;
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-reazon-box--ttl {
font-size: 16px;
font-size: 1rem;
padding-bottom: 20px;
}
}
@media screen and (min-width: 980px) { .p-item-category-reazon-box--ttl {
text-align: left;
}
} .p-item-category-reazon-box--item {
padding-bottom: 5px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-reazon-box--item {
padding-bottom: 20px;
}
} .p-item-category-reazon-box--item:last-of-type {
padding-bottom: 0;
} .p-item-category-reazon-box--item .link {
display: inline-block;
max-width: 260px;
transition: .3s;
vertical-align: bottom;
} .p-item-category-reazon-box--item .link:hover {
opacity: 0.7;
} .p-item-category-reazon-box--item .link img {
border-radius: 5px;
width: 100%;
height: auto;
} .p-item-category-reazon-box--item .link.line img {
background: #0abf7d;
} .p-item-category-reazon-box--item .link.tel img {
background: #ED99A4;
} .p-item-category-reazon-box--item .link.mail img {
background: #81A6C9;
} .p-item-category-reazon-box--item .link.shop img {
background: #B7D5CD;
} .p-item-category-reazon-box--item .link.delivery img {
background: #F9DAD6;
} .p-item-category-reazon-box--item .link.trip img {
background: #83C5E8;
} .p-item-category-reazon--photo {
display: none;
}
@media screen and (min-width: 840px) { .p-item-category-reazon--photo {
display: block;
padding-left: 40px;
max-width: 250px;
width: 100%;
}
}
@media screen and (min-width: 980px) { .p-item-category-reazon--photo {
padding-left: 80px;
max-width: 470px;
}
} .p-item-category-reazon--photo img {
height: auto;
vertical-align: top;
} .p-item-category-another {
background: #F0F0F0;
padding: 35px 0 30px;
}
@media screen and (min-width: 840px) { .p-item-category-another {
padding: 60px 0;
}
} .p-item-category-another--wrap {
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-item-category-another--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 10px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-another--ttl {
font-size: calc(20 * (100vw / 768));
padding-bottom: 30px;
}
}
@media screen and (min-width: 840px) { .p-item-category-another--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-item-category-another--contents {
margin: 0 auto;
} .p-item-category-another--list {
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;
align-content: flex-start;
background: #ffffff;
height: 220px;
padding: 20px;
overflow: scroll;
margin: 0 -10px;
position: relative;
}
@media screen and (min-width: 840px) { .p-item-category-another--list {
height: 420px;
padding: 30px 20px;
}
} .p-item-category-another--item {
display: block;
padding: 0 10px 13px;
margin-bottom: 15px;
border-bottom: 1px dotted #d3d3d3;
width: 20%;
}
@media screen and (min-width: 980px) { .p-item-category-another--item {
width: calc(100% / 6);
}
}
@media screen and (min-width: 1211px) { .p-item-category-another--item {
width: calc(100% / 8);
}
} .p-item-category-another--link {
display: block;
padding-bottom: 40px;
position: relative;
height: 100%;
} .p-item-category-another--data {
color: #394656;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
} .p-item-category-another--data img {
display: block;
aspect-ratio: 1 / 1;
object-fit: cover;
} .p-item-category-another--data figcaption {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
flex-grow: 1;
} .p-item-category-another--data figcaption .series {
flex-grow: 1;
font-size: calc(21 * (100vw / 668));
letter-spacing: .05em;
line-height: 1.2;
margin: 6px auto 0;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-another--data figcaption .series {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-another--data figcaption .series {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.4;
margin: 14px auto 0;
}
} .p-item-category-another--btn {
text-align: center;
padding-top: 10px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
@media screen and (min-width: 840px) { .p-item-category-another--btn {
padding-top: 20px;
}
} .p-item-category-another--btn .in {
display: inline-block;
color: #394656;
font-size: calc(21 * (100vw / 668));
letter-spacing: .05em;
text-align: center;
text-decoration: underline;
}
@media screen and (min-width: 576px) { .p-item-category-another--btn .in {
font-size: calc(14 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-another--btn .in {
font-size: 14px;
font-size: 0.875rem;
}
} .p-item-category-bnr {
background: #ffffff;
padding: 35px 0;
}
@media screen and (min-width: 980px) { .p-item-category-bnr {
padding: 60px 0;
}
} .p-item-category-bnr--wrap {
margin: auto;
max-width: 1030px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-item-category-bnr--img {
text-align: center;
padding: 10px 0;
} .p-item-category-bnr--img img {
display: inline-block;
width: 100%;
height: auto;
} .p-item-category-comparison {
background: #F7F7F7;
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-item-category-comparison {
padding: 60px 0;
}
} .p-item-category-comparison--wrap {
margin: auto;
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-item-category-comparison--box {
background: #e7f1f5;
border: 10px solid #ffffff;
padding: 15px;
}
@media screen and (min-width: 840px) { .p-item-category-comparison--box {
padding: 30px 20px;
}
}
@media screen and (min-width: 980px) { .p-item-category-comparison--box {
border: 20px solid #ffffff;
padding: 70px;
}
} .p-item-category-comparison--ttl {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-comparison--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-comparison--ttl {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-item-category-comparison--text {
text-align: center;
} .p-item-category-comparison--contents {
padding-top: 10px;
text-align: center;
}
@media screen and (min-width: 840px) { .p-item-category-comparison--contents {
padding-top: 30px;
}
} .p-item-category-comparison--contents img {
max-width: 673px;
margin: 0 auto;
height: auto;
width: 100%;
} .p-item-category-comparison--list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 10px;
padding-top: 10px;
}
@media screen and (min-width: 840px) { .p-item-category-comparison--list {
padding-top: 30px;
grid-template-columns: 1fr 1fr 1fr;
}
} .p-item-category-comparison--list .item {
border-radius: 5px;
border: 5px solid #e5e5e5;
}
@media screen and (min-width: 840px) { .p-item-category-comparison--list .item {
border: 10px solid #e5e5e5;
}
} .p-item-category-comparison--list .item img {
width: 100%;
height: auto;
} .p-item-category-step {
background: #F7F7F7;
padding: 35px 0;
}
@media screen and (min-width: 840px) { .p-item-category-step {
padding: 60px 0;
}
} .p-item-category-step--wrap {
background-color: #eef0f0;
max-width: 960px;
margin: 0 auto;
position: relative;
width: 100%;
padding: 35px 10px 30px;
}
@media screen and (min-width: 840px) { .p-item-category-step--wrap {
padding: 60px 20px;
}
}
@media screen and (min-width: 980px) { .p-item-category-step--wrap {
padding: 80px 20px;
}
} .p-item-category-step--wrap .title {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding-bottom: 30px;
text-align: center;
}
@media screen and (min-width: 576px) { .p-item-category-step--wrap .title {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-step--wrap .title {
font-size: 20px;
font-size: 1.25rem;
padding-bottom: 40px;
}
} .p-item-category-step--list {
margin: auto;
max-width: 830px;
} .p-item-category-step--list li:not(:first-of-type) {
margin: 30px 0 0 0;
}
@media screen and (min-width: 840px) { .p-item-category-step--list li:not(:first-of-type) {
margin: 50px 0 0 0;
}
} .p-item-category-step--list li figure {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
flex-direction: column-reverse;
}
@media screen and (min-width: 840px) { .p-item-category-step--list li figure {
flex-direction: row-reverse;
}
} .p-item-category-step--list li figure > picture {
margin: 20px 0;
text-align: center;
}
@media screen and (min-width: 840px) { .p-item-category-step--list li figure > picture {
margin: 0 0 0 40px;
max-width: 250px;
width: 100%;
}
} .p-item-category-step--list li figure > picture img {
width: 100%;
}
@media screen and (min-width: 840px) { .p-item-category-step--list li figure figcaption {
width: calc(100% - 250px);
}
} .p-item-category-step--list li figure figcaption .point {
max-width: 120px;
}
@media screen and (min-width: 840px) { .p-item-category-step--list li figure figcaption .point {
max-width: 165px;
}
} .p-item-category-step--list li figure figcaption .subtitle {
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
padding: 20px 0;
text-align: center;
line-height: 1.5;
}
@media screen and (min-width: 576px) { .p-item-category-step--list li figure figcaption .subtitle {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-step--list li figure figcaption .subtitle {
text-align: left;
font-size: 20px;
font-size: 1.25rem;
padding: 20px 0 20px 45px;
}
} .p-item-category-step--list li figure figcaption .text {
color: #394656;
word-wrap: break-word;
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 6px;
margin-bottom: 0.375rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 24px;
line-height: 1.5rem;
}
@media screen and (min-width: 840px) { .p-item-category-step--list li figure figcaption .text {
padding: 0 0 0 45px;
}
}
@media screen and (min-width: 980px) { .p-item-category-step--list li figure figcaption .text {
margin-top: 0px;
margin-top: 0rem;
margin-bottom: 12px;
margin-bottom: 0.75rem;
line-height: 2;
}
} .p-item-category-step--list li figure figcaption .text .red {
color: #ED99A4;
}  .p-item-category-list--ttl {
background: #F0F0F0;
color: #394656;
font-size: calc(30 * (100vw / 768));
font-weight: bold;
text-align: center;
padding: 35px 0;
}
@media screen and (min-width: 576px) { .p-item-category-list--ttl {
font-size: calc(20 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .p-item-category-list--ttl {
font-size: 20px;
font-size: 1.25rem;
padding: 60px 0;
}
} .p-item-category-list--wrap {
margin: auto;
max-width: 1211px;
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 100%;
} .p-item-category-list .c-purchase_item--ttl {
display: none;
} .c-brandlist {
padding: 35px 0;
overflow: hidden;
}
@media screen and (min-width: 840px) { .c-brandlist {
padding: 60px 0;
}
} .c-brandlist input {
display: none;
} .c-brandlist-tab {
display: flex;
} .c-brandlist-tab li {
margin-right: 1px;
width: 100%;
} .c-brandlist-tab li label {
background: #E5E5E5;
border-radius: 5px 5px 0 0;
display: block;
padding: 5px;
font-size: calc(18 * (100vw / 768));
text-align: center;
width: 100%;
}
@media screen and (min-width: 576px) { .c-brandlist-tab li label {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 840px) { .c-brandlist-tab li label {
padding: 15px 5px;
font-size: 16px;
font-size: 1rem;
}
} .c-brandlist .c-brandlist-tab label:hover {
cursor: pointer;
} .c-brandlist #a:checked ~ .c-brandlist-tab li:has(.order_a) label,
.c-brandlist #ka:checked ~ .c-brandlist-tab li:has(.order_ka) label,
.c-brandlist #sa:checked ~ .c-brandlist-tab li:has(.order_sa) label,
.c-brandlist #ta:checked ~ .c-brandlist-tab li:has(.order_ta) label,
.c-brandlist #na:checked ~ .c-brandlist-tab li:has(.order_na) label,
.c-brandlist #ha:checked ~ .c-brandlist-tab li:has(.order_ha) label,
.c-brandlist #ma:checked ~ .c-brandlist-tab li:has(.order_ma) label,
.c-brandlist #ya:checked ~ .c-brandlist-tab li:has(.order_ya) label,
.c-brandlist #ra:checked ~ .c-brandlist-tab li:has(.order_ra) label,
.c-brandlist #wa:checked ~ .c-brandlist-tab li:has(.order_wa) label {
background-color: #ccc;
color: #ffffff;
font-weight: bold;
} .c-brandlist #a:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_a),
.c-brandlist #ka:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_ka),
.c-brandlist #sa:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_sa),
.c-brandlist #ta:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_ta),
.c-brandlist #na:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_na),
.c-brandlist #ha:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_ha),
.c-brandlist #ma:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_ma),
.c-brandlist #ya:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_ya),
.c-brandlist #ra:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_ra),
.c-brandlist #wa:checked ~ .c-brandlist-line .c-brandlist-line--wrap:has(.order_wa) {
background-color: #ccc;
visibility: visible;
opacity: 1;
max-height: 999vh;
} .c-brandlist-line--wrap {
visibility: hidden;
opacity: 0;
max-height: 0vh;
} .c-brandlist-line--wrap ul {
padding: 20px 15px 15px;
}
@media screen and (min-width: 840px) { .c-brandlist-line--wrap ul {
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;
padding: 20px;
margin: 0 -10px;
}
} .c-brandlist-line--wrap ul li {
padding: 0 0 10px;
}
@media screen and (min-width: 840px) { .c-brandlist-line--wrap ul li {
padding: 0 10px 15px;
width: 50%;
}
} .c-brandlist-line--wrap ul li a {
background: #ffffff;
border-radius: 50px;
color: #394656;
display: block;
font-weight: bold;
padding: 10px;
text-align: center;
}
@media screen and (min-width: 840px) { .c-brandlist-line--wrap ul li a {
padding: 15px 10px;
}
} .c-brandlist-line--wrap ul li a:hover {
box-shadow: 0px 0px 15px -5px #777777;
} #p-top-menomae {
padding-bottom: 50px
}
.p-top-menomae {
background: #f7f7f7;
}
@media screen and (min-width: 900px) {
#p-top-menomae {
padding-bottom: 0
}
}
.p-top-menomae--wrap,
.p-top-menomae-speed {
max-width: 1150px;
margin: 0 auto;
padding:0;
position: relative;
width: 100%;
}
.p-top-menomae-speed {
width: 90%;
margin: 0 auto
}
@media screen and (min-width: 900px) {
.p-top-menomae-speed {
display: flex;
}
}
.p-top-menomae-text {
padding: 55px 0 0;
font-size: calc(28*(100vw / 768));
letter-spacing: 0.1em;
font-weight: 600;
width: 90%;
margin: 0 auto 0 8%;
}
@media screen and (min-width: 900px) {
.p-top-menomae-text {
padding: 160px 0 0 4%;
font-size:  calc(24*(100vw / 1200));
}
}
@media screen and (min-width: 1200px) {
.p-top-menomae-text {
padding: 60px 0 0 50px;
font-size: 24px;
margin: 0;
}
}
.p-top-menomae-text-span {
position: relative;
padding: 0 6% 0 5%;
}
@media screen and (min-width: 900px) {
.p-top-menomae-text-span {
padding: 0 40px 0 30px;
}
}
.p-top-menomae-text-span:before,
.p-top-menomae-text-span:after {
width: 10%;
height: 1px;
background: #394656;
content: "";
position: absolute;
top: 50%;
}
@media screen and (min-width: 900px) {
.p-top-menomae-text-span:before,
.p-top-menomae-text-span:after {
width: 18px;
}
}
.p-top-menomae-text-span:before {
left: 0;
}
.p-top-menomae-text-span:after {
right: 5%;
}
@media screen and (min-width: 900px) {
.p-top-menomae-text-span:after {
right: 13px;
}
}
.p-top-menomae-ttl {
letter-spacing: 0.045em;
font-size: calc(48*(100vw / 768));
font-weight: 600;
line-height: 42px;
writing-mode: vertical-rl;
position: relative;
padding: 0;
margin: -13% 8% 0 auto;
letter-spacing: 0.172rem;
}
@media screen and (min-width: 576px) {
.p-top-menomae-ttl {
line-height: 4rem;
padding-bottom: 10px;
margin: -4% 8% 0 auto;
}
}
@media screen and (min-width: 900px) {
.p-top-menomae-ttl {
font-size:  calc(42*(100vw / 1200));
padding: 20px 0 60px 5%;
writing-mode: unset;
margin: 0 auto;
}
}
@media screen and (min-width: 1200px) {
.p-top-menomae-ttl {
font-size: 54px;
padding: 20px 0 95px 50px;
margin: 0 auto;
}
}
.p-top-menomae-ttl-span {
display: block;
padding-top: 4rem
}
.p-top-menomae-ttl-span:after {
content: "";
width: 1px;
height: 1.5rem;
background: #394656;
position: relative;
display: inline-block;
top: 10px;
}
@media screen and (min-width: 576px) {
.p-top-menomae-ttl-span:after {
width: 1px;
height: 2rem;
}
}
@media screen and (min-width: 900px) {
.p-top-menomae-ttl-span {
display: inline-block;
padding: 0;
}
.p-top-menomae-ttl-span:after {
content: "。";
background: none;
top: 0
}
}
.p-top-menomae-img {
position: absolute;
width: 53%;
left: 10%;
top: 40%;
}
@media screen and (min-width: 576px) {
.p-top-menomae-img {
width: 48%;
top: 25%;
}
}
@media screen and (min-width: 900px) {
.p-top-menomae-img {
width: 35%;
position: absolute;
right: 55px;
top: -30px;
left: auto;
}
}
@media screen and (min-width: 1200px) {
.p-top-menomae-img {
width: 320px;
right: 0;
top: -110px;
}
}
.p-top-menomae-speed img{
width: 100%;
}
@media screen and (min-width: 900px) {
.p-top-menomae-speed img{
width: auto;
}
}
.p-top-menomae-speedrightarea {
padding: 30px 0 0
}
@media screen and (min-width: 900px) {
.p-top-menomae-speedtextarea {
width: 50%;
position: relative;
}
.p-top-menomae-speedrightarea {
padding: 90px 0 0;
position: relative;
width: 50%;
}
.p-top-menomae-speedtextarea:before {
content: "";
background: url(//www.7-7maruka.com/kanri/images/top/speedttlbg.png) no-repeat;
width: 50%;
height: 195px;
background-size: contain;
position: absolute;
right: 25px;
top: 90px;
}
}
@media screen and (min-width: 1250px) {
.p-top-menomae-speedtextarea:before {
content: "";
background: url(//www.7-7maruka.com/kanri/images/top/speedttlbg.png) no-repeat;
width: 267px;
height: 195px;
position: absolute;
right: 25px;
top: 90px;
}
}
.p-top-menomae-speedtextarea p {
font-style: italic;
}
.p-top-menomae-speedtextarea .p-top-menomae-ttl {
padding: 0;
font-size: calc(56*(100vw / 765));
writing-mode: lr;
letter-spacing: 0rem;
width: 50%;
margin: 0 0 0-2px;
line-height: 2rem;
position: absolute;
top: 65px;
}
@media screen and (min-width: 400px) {
.p-top-menomae-speedtextarea .p-top-menomae-ttl {
line-height: 3rem;
top: 11%;
font-size: calc(56*(100vw / 880));
}
}
@media screen and (min-width: 700px) {
.p-top-menomae-speedtextarea .p-top-menomae-ttl {
line-height: 4rem;
top: 11%;
}
}
@media screen and (min-width: 900px) {
.p-top-menomae-speedtextarea .p-top-menomae-ttl {
padding: 10px 0 0;
position: relative;
top: 0;
font-size: calc(56*(100vw / 1200));
width: auto;
line-height: 105%;
}
}
@media screen and (min-width: 1250px) {
.p-top-menomae-speedtextarea .p-top-menomae-ttl {
padding: 8px 0 20px 50px;
font-size: 56px;
letter-spacing: 0.045rem;
line-height: 4.2rem;
}
}
.p-top-menomae-speedtextarea .p-top-menomae-text {
position: absolute;
font-size: calc(24*(100vw / 768));
padding: 42px 0 0;
letter-spacing: -0.05rem;
margin: 0
}
@media screen and (min-width: 400px) {
.p-top-menomae-speedtextarea .p-top-menomae-text {
font-size: calc(35*(100vw / 1100));
padding: 0;
margin: 13% 0 0;
}
}
@media screen and (min-width: 900px) {
.p-top-menomae-speedtextarea .p-top-menomae-text {
padding: 95px 0 0 0;
position: relative;
display: inline-block;
width: auto;
margin: 0
}
.p-top-menomae-speedtextarea .p-top-menomae-text:before {
content: "";
background: url(//www.7-7maruka.com/kanri/images/top/speedtextarea.png) no-repeat;
width: 12px;
height: 25px;
position: absolute;
right: -20px;
bottom: 0px;
}
}
@media screen and (min-width: 1250px) {
.p-top-menomae-speedtextarea .p-top-menomae-text {
padding: 95px 0 0 60px;
font-size: 24px;
letter-spacing: 0.01rem;
}
}
.p-top-menomae-speedtextarea .p-top-menomae-ttl span {
letter-spacing: -0.4rem;
position: relative;
left: -5px;
margin-right: -5px;
}
@media screen and (min-width: 900px) {
.p-top-menomae-speedrightarea .p-top-menomae-speedrightarea-img {
margin: 0 0 0 auto;
width: 95%;
}
}
.p-top-menomae-speedrightarea .p-top-menomae-speedrightarea-bj {
display: none;
}
@media screen and (min-width: 900px) {
.p-top-menomae-speedrightarea .p-top-menomae-speedrightarea-bj {
position: relative;
left: 2px;
display: block;
}
}
.c-itemlist_title{
display: none;
}
.c-itemlist--wrap{
padding-top: 0;
}