@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
body {
line-height: 1; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block; }
ul {
list-style: none; }
blockquote,
q {
quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none; }
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none; }
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold; }
del {
text-decoration: line-through; }
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0; }
input,
select {
vertical-align: middle;
border: none;
outline: none; }
input[type="submit"],
input[type="button"] {
border-radius: 0;
appearance: button;
border: none;
box-sizing: border-box; }
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
display: none; }
input[type="submit"]::focus,
input[type="button"]::focus {
outline-offset: -2px; }
html {
margin-top: 0 !important; }
body {
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
font-size: 14px;
line-height: 1.8;
letter-spacing: 1.4px;
overflow-x: hidden; }
@media screen and (min-width: 960px) {
body {
font-size: 16px; } }
a {
color: #000;
text-decoration: none;
transition: all 0.5s; }
a:hover {
opacity: 0.7;
transition: all 0.5s; }
a:hover div,
a:hover p {
opacity: 0.7;
transition: all 0.5s; }
.is_sp {
display: block; }
@media screen and (min-width: 960px) {
.is_sp {
display: none !important; } }
.is_pc {
display: none; }
@media screen and (min-width: 960px) {
.is_pc {
display: block; } }
.header {
width: 100vw;
height: 46px;
position: fixed;
top: 0;
box-sizing: border-box;
background-color: #fff;
z-index: 999999; }
@media screen and (min-width: 960px) {
.header {
height: 128px; } }
.header .header-wrap {
width: 100vw;
padding: 0 5px;
height: 100%;
position: relative;
box-sizing: border-box; }
@media screen and (min-width: 960px) {
.header .header-wrap {
margin: 0 auto;
display: flex;
align-items: center;
padding: 0 35px; } }
.header .header-wrap > h1 {
display: block;
width: 160px;
padding: 10px; }
@media screen and (min-width: 960px) {
.header .header-wrap > h1 {
width: 250px; } }
.header .header-wrap > h1 img {
width: 100%;
max-width: 335px; }
.header .header-sp-button {
background-color: #a20000;
width: 46px;
height: 46px;
position: absolute;
top: 0;
right: 0;
transition: all 0.5s; }
@media screen and (min-width: 960px) {
.header .header-sp-button {
display: none; } }
.header .header-sp-button > span {
display: block;
width: 18px;
height: 2px;
background-color: #fff;
position: absolute;
left: 30%;
transition: all 0.5s; }
.header .header-sp-button > span:nth-of-type(1) {
top: 14px; }
.header .header-sp-button > span:nth-of-type(2) {
top: 22px; }
.header .header-sp-button > span:nth-of-type(3) {
top: 30px; }
.header .header-sp-button.-open {
transition: all 0.5s;
background-color: #fff; }
.header .header-sp-button.-open > span {
transition: all 0.5s;
background-color: #a20000; }
.header .header-sp-button.-open > span:nth-of-type(1) {
top: 20px;
transform: rotate(45deg); }
.header .header-sp-button.-open > span:nth-of-type(2) {
display: none; }
.header .header-sp-button.-open > span:nth-of-type(3) {
top: 20px;
transform: rotate(-45deg); }
@media screen and (max-width: 959px) {
.header .header-menu {
display: none;
height: calc(100vh - 46px);
background-color: #fff;
width: 100vw;
position: absolute;
left: 0;
top: 46px; } }
@media screen and (min-width: 960px) {
.header .header-menu {
display: flex;
margin-left: auto; } }
@media screen and (max-width: 959px) {
.header .header-menu ul {
padding-top: 70px;
text-align: center;
align-items: center; } }
@media screen and (min-width: 960px) {
.header .header-menu ul {
display: flex;
align-items: center;
white-space: nowrap;
padding-left: 15px; } }
@media screen and (max-width: 959px) {
.header .header-menu ul li {
width: 80%;
margin: 30px auto 0; } }
@media screen and (min-width: 960px) {
.header .header-menu ul li {
font-weight: bold;
font-size: 16px;
margin-right: 50px; } }
@media screen and (max-width: 959px) {
.header .header-menu ul li a {
font-size: 16px;
font-weight: bold; } }
.header .header-cart-button {
background-color: #a20000;
border-radius: 5px;
width: 256px;
height: 67px;
display: flex;
justify-content: center;
align-items: center; }
@media screen and (max-width: 959px) {
.header .header-cart-button {
margin: 50px auto 0; } }
.header .header-cart-button img {
margin-right: 7px; }
.header .header-cart-button a {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold; }
.footer {
width: 100vw; }
.footer .footer-top {
padding: 60px 0 60px;
background-color: #f9f5ed; }
@media screen and (min-width: 960px) {
.footer .footer-top {
padding: 128px 0 106px; } }
@media screen and (min-width: 960px) {
.footer .footer-top > div {
max-width: 1200px;
margin: 0 auto; } }
.footer .footer-top > div > a {
display: block;
margin: 0 auto;
width: 180px; }
@media screen and (min-width: 960px) {
.footer .footer-top > div > a {
width: 265px; } }
.footer .footer-top > div > a img {
width: 100%; }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-top-menu {
display: flex;
align-items: center;
padding-top: 100px; } }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-top-menu ul {
display: flex; } }
.footer .footer-top .footer-top-menu ul li {
text-align: center; }
@media screen and (max-width: 959px) {
.footer .footer-top .footer-top-menu ul li {
padding-top: 20px; } }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-top-menu ul li {
padding-right: 40px; } }
.footer .footer-top .footer-top-menu ul li.-map a {
border-bottom: 1px solid #000;
padding-bottom: 3px; }
.footer .footer-top .footer-top-menu ul li.-map a img {
padding-right: 5px; }
.footer .footer-top .footer-top-menu ul li.-cart a {
color: #a20000;
border-bottom: 1px solid #a20000;
padding-bottom: 3px; }
.footer .footer-top .footer-top-menu ul li.-cart a img {
padding-right: 5px; }
.footer .footer-top .footer-top-menu ul li a {
font-size: 16px;
font-weight: bold; }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-top-menu ul li a {
font-size: 14px; } }
.footer .footer-top .footer-sns {
text-align: center; }
@media screen and (max-width: 959px) {
.footer .footer-top .footer-sns {
margin: 30px auto 0; } }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-sns {
margin-left: auto; } }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-sns {
display: flex;
align-items: center; } }
.footer .footer-top .footer-sns > p {
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: normal; }
@media screen and (max-width: 959px) {
.footer .footer-top .footer-sns > div {
padding-top: 15px; } }
.footer .footer-top .footer-sns > div a {
padding: 0 10px; }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-map {
margin-top: 57px;
display: flex;
justify-content: space-between; } }
@media screen and (max-width: 959px) {
.footer .footer-top .footer-map div {
margin-top: 30px; } }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-map div {
width: 45%;
max-width: 576px; } }
.footer .footer-top .footer-map iframe {
max-width: 100%; }
@media screen and (max-width: 959px) {
.footer .footer-top .footer-map iframe {
height: 200px; } }
.footer .footer-top .footer-map p {
font-size: 14px;
padding: 5px 15px 0;
font-weight: bold; }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-map p {
padding: 25px 0 0;
font-size: 16px; } }
.footer .footer-top .footer-map p span {
font-size: 13px;
display: block;
font-weight: normal; }
@media screen and (min-width: 960px) {
.footer .footer-top .footer-map p span {
font-size: 13px; } }
.footer .footer-under ul {
margin-top: 20px;
display: flex;
justify-content: center; }
.footer .footer-under ul li {
width: 33%;
flex-shrink: 0; }
@media screen and (min-width: 960px) {
.footer .footer-under ul li {
width: 283px; } }
@media screen and (max-width: 414px) {
.footer .footer-under ul li {
margin: 0 -1%; } }
.footer .footer-under ul li a img {
width: 100%;
height: 100px;
object-fit: contain; }
@media screen and (min-width: 960px) {
.footer .footer-under ul li a img {
height: 184px; } }
.footer .footer-copy {
border-top: 1px solid #d0d0d0;
padding: 20px 15px; }
.footer .footer-copy > div {
max-width: 1200px;
margin: 0 auto; }
@media screen and (min-width: 960px) {
.footer .footer-copy > div {
display: flex;
padding: 26px 0; } }
.footer .footer-copy p {
padding-top: 12px;
font-size: 12px; }
@media screen and (min-width: 960px) {
.footer .footer-copy p {
margin-left: auto; } }
@media screen and (min-width: 960px) {
.footer .footer-copy ul {
display: flex; } }
@media screen and (min-width: 960px) {
.footer .footer-copy ul li {
padding-right: 27px; } }
.footer .footer-copy ul li a {
padding-top: 10px;
font-size: 12px;
color: #989898; }
main {
padding-top: 46px; }
@media screen and (min-width: 960px) {
main {
padding-top: 128px; } }
.js-fade {
transform: translate(0, 40px);
opacity: 0; }
.js-fade.-fade {
transition: all 0.6s ease-in;
transform: translateY(0px);
opacity: 1 !important; }
@media screen and (min-width: 960px) {
.js-fade.-delay.-fade {
transition-delay: 0.8s; } }
.common-title {
font-size: 24px;
font-weight: bold;
text-align: center; }
@media screen and (min-width: 960px) {
.common-title {
font-size: 48px; } }
.common-title span {
display: block;
font-size: 13px;
font-family: "Poppins", sans-serif;
color: #a20000;
font-weight: 600; }
@media screen and (min-width: 960px) {
.common-title span {
font-size: 16px; } }
.common-button a {
margin: 0 30px;
width: auto;
height: 60px;
background-color: #a20000;
color: #fff;
box-shadow: 0px 10px 7px -6px #BF2A12;
display: flex;
justify-content: center;
align-items: center;
border-radius: 11px;
position: relative;
font-size: 14px;
font-weight: bold; }
@media screen and (min-width: 960px) {
.common-button a {
margin: 0 auto;
width: 417px;
height: 81px;
font-size: 16px; } }
.common-button a::after {
content: "";
display: block;
width: 5px;
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
position: absolute;
top: 43%;
right: 40px; }
@media screen and (min-width: 960px) {
.common-button a::after {
width: 7px;
height: 7px;
top: 45%;
right: 125px; } }
.common-column-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto; }
.common-column-list li {
width: 48%;
padding-top: 30px; }
@media screen and (min-width: 960px) {
.common-column-list li {
width: 30%;
padding-top: 50px; }
.common-column-list li:nth-of-type(4n) {
padding-top: 70px; } }
.common-column-list li .icon {
padding-top: 10px;
font-weight: bold;
font-size: 14px; }
.common-column-list li .icon p {
display: flex;
align-items: center; }
.common-column-list li .icon p.-blue {
color: #177bff; }
.common-column-list li .icon p.-green {
color: #4ba100; }
.common-column-list li .icon p.-orange {
color: #ff7800; }
.common-column-list li .icon img {
padding-right: 10px; }
@media screen and (min-width: 960px) {
.common-column-list li .icon {
padding-top: 30px;
font-size: 16px; } }
@media screen and (max-width: 959px) {
.common-column-list li .icon img {
width: 20px;
height: 20px; } }
.common-column-list li .title {
padding-top: 10px;
font-size: 15px;
font-weight: bold; }
@media screen and (min-width: 960px) {
.common-column-list li .title {
font-size: 20px; } }
.common-column-list li .data {
padding-top: 10px;
font-size: 12px; }
@media screen and (min-width: 960px) {
.common-column-list li .data {
font-size: 14px;
display: flex;
justify-content: space-between; } }
.common-column-list li .data time {
color: #b6b6b6; }
.common-column-list li .data p {
text-decoration: underline; }
@media screen and (max-width: 959px) {
.common-column-list li .data p {
padding-top: 5px;
display: block;
margin-left: auto; } }
.common-column-list .thumb {
padding-top: 69.3103%; }
.thumb {
width: 100%;
padding-top: 56.25%;
position: relative; }
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
border-radius: 10px; }
.mv-scroll {
position: absolute;
top: 50%;
left: 35px;
transform: translateY(-50%); }
@media screen and (max-width: 414px) {
.mv-scroll {
display: none; } }
.mv-scroll p {
transform: rotate(90deg);
font-family: "Poppins", sans-serif;
font-size: 11px;
width: 11px; }
.mv-scroll span {
display: block;
width: 1px;
height: 50px;
background: #0f2350;
position: relative;
top: 50px;
left: 5px; }
.mv-scroll span:after {
content: "";
width: 10px;
height: 10px;
display: block;
border-radius: 50%;
border: 1px solid #0f2350;
position: relative;
left: -5px;
animation: maru 3s ease-in-out infinite; }
@keyframes maru {
0% {
top: 0;
opacity: 0; }
10% {
top: 0;
opacity: 1; }
100% {
top: 100%;
opacity: 0; } }
.mv {
display: flex;
height: calc(100vh - 50px);
position: relative;
box-sizing: border-box;
background: url("../img/top/mv-back-sp.png") no-repeat 98% 0;
background-size: 100px; }
@media screen and (min-width: 960px) {
.mv {
height: calc(100vh - 200px);
max-width: 2000px;
margin: 0 auto;
padding-left: 100px;
padding-right: 85px;
background: url("../img/top/mv-back.png") no-repeat 30px 50%; } }
.mv .bg01,
.mv .bg02,
.mv .bg03,
.mv .bg04 {
position: absolute; }
.mv .bg01 {
top: 0;
left: 10%; }
.mv .bg02 {
top: 10%;
left: 0%; }
.mv .bg03 {
bottom: 22%;
left: 7%; }
.mv .bg04 {
bottom: 22%;
right: -10%; }
@media screen and (max-width: 414px) {
.mv .bg04 {
display: none; } }
.mv .mv-text {
position: relative;
z-index: 99;
display: flex;
flex-direction: column;
justify-content: space-between; }
.mv .mv-text h1 {
font-size: 24px;
position: absolute;
top: 50%;
transform: translateY(-60%);
line-height: 1.5;
white-space: nowrap; }
@media screen and (min-width: 960px) {
.mv .mv-text h1 {
white-space: nowrap;
font-size: 4vw;
line-height: 1.4; } }
@media screen and (min-width: 2000px) {
.mv .mv-text h1 {
font-size: 100px; } }
@media screen and (max-width: 414px) {
.mv .mv-text h1 {
top: 20px;
left: 30px;
line-height: 1.5;
transform: translateY(0); } }
.mv .mv-text a {
width: 75vw;
position: absolute;
bottom: 15px;
padding: 10px 0;
background: #9e0000;
color: #FFF;
border-radius: 10px;
letter-spacing: 0;
box-shadow: 0 0 25px rgba(81, 15, 8, 0.4);
left: 15vw;
text-align: center;
font-weight: bold; }
@media screen and (min-width: 960px) {
.mv .mv-text a {
border-radius: 15px;
bottom: -40px;
width: 353px;
text-align: center;
padding: 30px 0;
left: 120px; } }
.mv .mv-text a i {
content: "";
background: url(../img/top/seasor.png) no-repeat;
background-size: 49px;
display: inline-block;
width: 49px;
height: 79px;
margin: 0 10px 0 0;
position: absolute;
top: -30px;
left: -30px; }
@media screen and (min-width: 960px) {
.mv .mv-text a i {
content: "";
background: url(../img/top/seasor.png);
background-size: 128px;
display: inline-block;
width: 128px;
height: 207px;
margin: 0 10px 0 0;
position: absolute;
top: -45px;
left: -70px; } }
.mv .mv-text a::before {
content: "";
background: url(../img/common/cart.svg);
background-size: 20px;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 10px 0 0;
position: relative;
top: 5px; }
@media screen and (min-width: 960px) {
.mv .mv-text a::before {
content: "";
background: url(../img/common/cart.svg);
background-size: 27px;
display: block;
width: 27px;
height: 27px;
margin: 0 auto 5px auto;
top: 0; } }
.mv .mv-text a::after {
content: ">";
display: inline-block;
transform: scale(0.7, 1);
margin-left: 10px; }
@media screen and (min-width: 960px) {
.mv .mv-text a::after {
margin-left: 20px; } }
.mv .mv-slide {
width: 65%;
position: absolute;
right: 0; }
@media screen and (max-width: 959px) {
.mv .mv-slide {
top: 75px; } }
@media screen and (min-width: 960px) {
.mv .mv-slide {
margin-right: 45px; } }
@media screen and (max-width: 414px) {
.mv .mv-slide {
right: auto;
transform: translateX(-50%);
left: 50%;
width: 90%; } }
.mv .mv-slide p {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
font-weight:bold;
color: #000;
text-shadow: 0 0 5px #fff; }
.mv .mv-slide .white {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 12px;
color: #fff !important;
text-shadow: 0 0 5px #000 !important; }
@media screen and (max-width: 414px) {
.mv .mv-slide p {
display: none; } }
.mv .mv-slide img {
width: 100%;
object-fit: cover;
border-radius: 20px 0 0 20px; }
@media screen and (max-width: 959px) {
.mv .mv-slide img {
height: calc(100vh - 160px); } }
@media screen and (min-width: 960px) {
.mv .mv-slide img {
border-radius: 20px;
height: calc(100vh - 180px); } }
@media screen and (max-width: 414px) {
.mv .mv-slide img {
border-radius: 10px; } }
@media screen and (max-width: 959px) {
.mv .mv-slide .slick-dots {
display: none !important; } }
@media screen and (min-width: 960px) {
.mv .mv-slide .slick-dots {
display: flex;
flex-direction: column;
justify-content: center;
width: 0px;
padding-left: 0px;
position: absolute;
right: -20px;
top: 0; } }
#shop-banner div a {
background: #f9f5ed;
box-shadow: 0px 10px 23px -6px #a49a7c;
display: flex;
align-items: center;
margin: 40px 15px 0 15px;
width: auto;
height: 80px;
border-radius: 10px;
padding: 10px; }
@media screen and (min-width: 960px) {
#shop-banner div a {
display: flex;
align-items: center;
margin: 100px auto 80px auto;
width: 595px;
height: 141px;
box-sizing: border-box;
font-size: 29px;
padding-left: 30px; } }
#shop-banner div a p {
text-align: center; }
@media screen and (max-width: 414px) {
#shop-banner div a p {
line-height: 1.5;
font-size: 16px;
text-align: left;
padding-left: 20px; } }
@media screen and (min-width: 960px) {
#shop-banner div a p {
padding-top: 10px;
padding-left: 20px;
font-size: 24px; } }
#shop-banner div a span {
display: block;
font-size: 10px;
color: #a20000; }
@media screen and (min-width: 960px) {
#shop-banner div a span {
font-size: 14px; } }
#shop-banner div a img {
width: 45%; }
@media screen and (min-width: 960px) {
#shop-banner div a img {
width: 302px; } }
#news {
padding: 40px 15px 0;
margin: 0 auto;
max-width: 1200px; }
@media screen and (min-width: 960px) {
#news {
padding: 0 15px 0; } }
@media screen and (min-width: 960px) {
#news .common-title span {
text-align: left; } }
@media screen and (min-width: 960px) {
#news > div {
display: flex;
justify-content: space-between; } }
#news > div > a {
margin-top: 10px;
display: block;
text-align: right;
text-decoration: underline;
font-size: 14px; }
@media screen and (min-width: 960px) {
#news > div > a {
margin-top: auto;
margin-bottom: 15px; } }
#news ul {
display: inline-block; }
@media screen and (min-width: 960px) {
#news ul {
padding-left: 115px;
width: 600px; } }
#news ul li {
padding-top: 10px;
text-align: left; }
#news ul li a {
font-size: 13px;
letter-spacing: 1px; }
@media screen and (min-width: 960px) {
#news ul li a {
display: flex; } }
#news ul li a time {
font-weight: bold;
padding-right: 10px; }
#about {
padding: 30px 0 0; }
@media screen and (min-width: 960px) {
#about {
padding-top: 50px;
position: relative;
max-width: 2000px;
margin: 0 auto; } }
#about > i {
position: absolute;
top: 35px;
right: 10px;
font-size: 11px;
font-style: normal;
text-shadow: 0 0 5px #000;
color: #FFF; }
@media screen and (min-width: 960px) {
#about > i {
top: 65px;
right: 20px; } }
#about > img {
width: 100%;
max-width: 2000px;
height: 350px;
display: block;
margin: 0 auto;
object-fit: cover;
object-position: 50% 20%; }
@media screen and (min-width: 960px) {
#about > img {
height: 600px; } }
#about > div {
position: relative;
margin-bottom: 50px; }
#about > div .bg01,
#about > div .bg02,
#about > div .bg03,
#about > div .bg04,
#about > div .bg05,
#about > div .bg06,
#about > div .bg07,
#about > div .bg08 {
position: absolute; }
@media screen and (max-width: 414px) {
#about > div .bg01,
#about > div .bg02,
#about > div .bg03,
#about > div .bg04,
#about > div .bg05,
#about > div .bg06,
#about > div .bg07,
#about > div .bg08 {
width: 76px; } }
#about > div .bg01 {
top: 18%;
left: 7%; }
#about > div .bg02 {
top: 45%;
left: 3%; }
#about > div .bg03 {
top: 71%;
left: 7%; }
#about > div .bg04 {
top: 100%;
left: 3%; }
#about > div .bg05 {
top: 18%;
right: 3%; }
#about > div .bg06 {
top: 45%;
right: 7%; }
#about > div .bg07 {
top: 71%;
right: 3%; }
#about > div .bg08 {
top: 100%;
right: 7%; }
@media screen and (min-width: 960px) {
#about > div {
display: flex;
justify-content: center;
padding-top: 110px; } }
#about > div > p {
writing-mode: vertical-rl;
text-orientation: upright;
font-weight: bold; }
@media screen and (max-width: 959px) {
#about > div > p {
margin: 0 15px -70px 15px;
position: relative;
top: -70px;
font-size: 18px; } }
@media screen and (min-width: 960px) {
#about > div > p {
font-size: 40px; } }
@media screen and (min-width: 960px) {
#about > div div {
padding: 85px 0 0 108px;
width: 516px; } }
@media screen and (max-width: 959px) {
#about > div div p {
padding: 15px 15px 0; } }
@media screen and (min-width: 960px) {
#about > div div p {
font-size: 16px;
line-height: 37px; } }
#about .common-title {
padding-top: 30px; }
@media screen and (min-width: 960px) {
#about .common-title {
padding-top: 170px; } }
#about ul {
padding: 0; }
@media screen and (min-width: 960px) {
#about ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1750px;
padding: 90px 50px 0;
margin: 0 auto; } }
@media screen and (max-width: 959px) {
#about ul li {
padding: 40px 15px 0; } }
@media screen and (min-width: 960px) {
#about ul li {
width: 47.5%; } }
@media screen and (min-width: 960px) {
#about ul li:nth-of-type(2n) {
padding-top: 90px; } }
#about ul li img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 17px; }
#about ul li div {
display: flex; }
@media screen and (max-width: 959px) {
#about ul li div {
padding-top: 20px; } }
@media screen and (min-width: 960px) {
#about ul li div {
padding-top: 50px; } }
#about ul li div > p:first-of-type {
color: #a20000;
writing-mode: vertical-rl;
text-orientation: upright;
font-weight: bold;
padding-right: 10px;
font-size: 20px; }
@media screen and (min-width: 960px) {
#about ul li div > p:first-of-type {
font-size: 40px;
padding-right: 54px; } }
#about ul li div > p:nth-of-type(2) {
font-size: 13px; }
@media screen and (min-width: 960px) {
#about ul li div > p:nth-of-type(2) {
font-size: 16px; } }
#voice {
padding-top: 50px;
margin-left: 0; }
@media screen and (min-width: 960px) {
#voice {
margin-bottom: -1100px;
margin-left: 20px;
overflow: hidden; } }
@media screen and (min-width: 960px) {
#voice > div {
max-width: 1900px;
margin: 100px auto;
position: relative;
padding-left: 30px; } }
@media screen and (max-width: 959px) {
#voice > div {
background-color: #f9f5ed;
border-radius: 0;
padding: 50px 15px 60px 15px;
margin: 0 0; } }
#voice > div > div {
background-color: #f9f5ed;
border-radius: 25px 0 0 25px; }
@media screen and (min-width: 960px) {
#voice > div > div {
padding-right: 120px; } }
@media screen and (min-width: 960px) {
#voice > div > div {
display: inline-block;
height: 1154px;
box-sizing: border-box;
border-radius: 40px 0 0 40px; } }
@media screen and (min-width: 960px) {
#voice > div > div .common-title {
padding: 245px 0 0 102px;
text-align: left; } }
#voice > div > div p {
padding-top: 15px; }
@media screen and (min-width: 960px) {
#voice > div > div p {
padding: 55px 0 0 102px; } }
#voice > div .slide {
width: auto;
margin: 0 auto; }
@media screen and (max-width: 959px) {
#voice > div .slide {
margin-top: 20px;
width: 90%; } }
@media screen and (min-width: 960px) {
#voice > div .slide {
height: 1154px;
box-sizing: border-box;
padding: 105px 0 174px;
position: relative;
top: -1154px;
left: 700px;
background-color: #f9f5ed; } }
#voice > div .slide li {
padding: 15px;
background-color: #fff;
border-radius: 10px;
box-sizing: border-box; }
@media screen and (min-width: 960px) {
#voice > div .slide li {
padding: 35px;
margin-right: 40px; } }
#voice > div .slide li > figure img {
height: auto;
width: 100%;
border-radius: 10px; }
#voice > div .slide li > p {
text-align: center;
padding-top: 10px;
font-weight: bold; }
@media screen and (min-width: 960px) {
#voice > div .slide li > p {
font-size: 18px; } }
#voice > div .slide li > p span {
display: block;
padding-top: 10px;
font-size: 14px;
font-weight: 400; }
#voice > div .slide li .item {
margin: 5px auto 0;
display: flex;
align-items: center;
justify-content: space-between; }
#voice > div .slide li .item img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 999px; }
@media screen and (max-width: 959px) {
#voice > div .slide li .item img {
margin: 10px auto 0; } }
#voice > div .slide li .item > p:first-of-type {
padding-left: 10px;
border-left: 1px solid #a20000;
font-size: 14px; }
#voice > div .slide li .item > p:first-of-type span {
display: block;
font-size: 16px;
color: #a20000;
font-weight: bold; }
@media screen and (min-width: 960px) {
#voice > div .slide li .item > p:first-of-type span {
font-size: 18px; } }
#voice > div .slide li .text {
padding: 20px 0; }
#voice > div .slide li .text p {
font-size: 13px; }
@media screen and (min-width: 960px) {
#voice > div .slide li .text p {
font-size: 14px; } }
#voice .common-button a {
box-shadow: 0px 10px 7px -6px #a400007a; }
@media screen and (max-width: 959px) {
#voice .common-button a {
margin-top: 30px; } }
@media screen and (max-width: 959px) {
#voice .slick-dots {
bottom: -11px; } }
@media screen and (min-width: 960px) {
#voice .slick-dots {
margin-top: 57px;
bottom: auto;
left: -20%; } }
#voice .slick-dots li {
padding: 0 !important;
margin-right: 0 !important;
background-color: #f9f5ed !important; }
#voice .slick-prev {
background-image: url("../img/top/prev_aroww.svg");
background-repeat: no-repeat;
top: 32%; }
@media screen and (min-width: 960px) {
#voice .slick-prev {
left: -2%;
top: 47%; } }
#voice .slick-next {
background-image: url("../img/top/next_arrow.svg");
background-repeat: no-repeat;
top: 32%; }
@media screen and (min-width: 960px) {
#voice .slick-next {
left: 46.5%;
top: 47%; } }
#voice .slick-prev,
#voice .slick-next {
z-index: 999;
background-size: 60px;
width: 60px;
height: 60px; }
#voice .slick-prev:before,
#voice .slick-next:before {
color: transparent; }
@media screen and (min-width: 960px) {
#voice .common-button {
padding: 75px; } }
#pickup {
padding-top: 60px; }
@media screen and (min-width: 960px) {
#pickup {
padding-top: 0; } }
#pickup ul {
max-width: 1200px; }
@media screen and (min-width: 960px) {
#pickup ul {
display: flex;
justify-content: space-between;
margin: 60px auto; } }
@media screen and (max-width: 959px) {
#pickup ul li {
margin: 40px auto;
padding: 0 15px; } }
@media screen and (min-width: 960px) {
#pickup ul li {
width: 48%; } }
#pickup ul li figure {
position: relative;
width: 100%;
padding-top: 60%; }
#pickup ul li img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 15px;
object-fit: cover; }
#pickup ul li p {
padding-top: 10px;
font-weight: bold;
font-size: 15px;
margin-bottom: 10px; }
@media screen and (min-width: 960px) {
#pickup ul li p {
padding-top: 20px;
font-size: 20px; } }
#pickup ul li span {
text-decoration: underline;
text-align: right;
font-size: 12px;
display: block;
margin-left: auto;
font-weight: bold; }
@media screen and (min-width: 960px) {
#pickup ul li span {
font-size: 14px; } }
#column {
max-width: 1600px;
margin: 30px auto; }
@media screen and (min-width: 960px) {
#column {
margin-top: 100px; } }
#column > div {
margin: 0 0;
background-color: #f9f5ed;
padding: 30px 15px 60px 15px;
border-radius: 0; }
@media screen and (min-width: 960px) {
#column > div {
padding: 90px 10px;
border-radius: 50px; } }
#column .common-button {
padding-top: 30px; }
@media screen and (min-width: 960px) {
#column .common-button {
padding-top: 70px; } }
#column .thumb {
padding-top: 69.3103%; }
#column .common-button a {
box-shadow: 0px 10px 7px -6px #a400007a; }
#shop {
padding: 30px 20px 60px;
max-width: 1300px;
margin: 0 auto; }
@media screen and (min-width: 960px) {
#shop {
padding-top: 115px;
padding-bottom: 105px; } }
@media screen and (min-width: 960px) {
#shop .list {
margin-top: 55px;
display: flex;
justify-content: space-between; } }
@media screen and (max-width: 959px) {
#shop .list > div {
padding-top: 30px; } }
@media screen and (min-width: 960px) {
#shop .list > div {
width: 47%; } }
#shop .list img {
width: 100%;
height: auto;
border-radius: 15px; }
#shop .list .shop-img {
position: relative;
width: 100%;
padding-top: 69.0635%; }
#shop .list .shop-img .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
#shop .list .arrow {
width: 60px;
height: 60px;
position: absolute;
bottom: -26px;
right: -18px; }
@media screen and (min-width: 960px) {
#shop .list .arrow {
width: 80px;
height: 80px;
bottom: -30px;
right: -30px; } }
#shop .title {
padding-top: 10px;
text-align: center;
font-weight: bold;
font-size: 20px;
line-height: 1.5; }
@media screen and (min-width: 960px) {
#shop .title {
font-size: 32px; } }
#shop .title span {
display: block;
font-size: 12px;
color: #afafab; }
@media screen and (min-width: 960px) {
#shop .title span {
font-size: 16px; } }
.under-mv {
margin-top: 15px; }
.under-mv div {
max-width: 2000px;
margin: 0 15px;
box-sizing: border-box;
overflow: hidden;
height: 200px; }
@media screen and (min-width: 960px) {
.under-mv div {
margin: 0 auto;
height: 469px;
padding: 0 50px; } }
.under-mv div img {
width: 100%;
object-fit: cover;
height: 100%;
border-radius: 40px; }
.under-mv ul {
margin: 0 auto;
max-width: 1200px;
display: flex;
padding: 5px 15px; }
@media screen and (min-width: 960px) {
.under-mv ul {
padding: 24px 15px 0; } }
.under-mv ul li {
font-size: 10px; }
@media screen and (min-width: 960px) {
.under-mv ul li {
font-size: 14px; } }
.under-mv ul li:not(:last-of-type)::after {
content: ">";
padding: 0 20px; }
.under-mv .common-title {
padding-top: 25px; }
.under-mv.-single > div {
border-radius: 5px;
max-width: 1200px;
margin-top: 20px; }
@media screen and (min-width: 960px) {
.under-mv.-single > div {
margin-top: 30px; } }
.column-cat-list {
max-width: 1200px;
margin: 30px auto 30px;
background-color: #f9f5ed;
font-weight: bold;
font-size: 13px;
text-align: center;
padding: 15px 0;
border-radius: 5px; }
@media screen and (min-width: 960px) {
.column-cat-list {
margin: 30px auto 0;
display: flex;
font-size: 14px;
align-items: center;
padding: 20px 87px;
box-sizing: border-box; } }
@media screen and (min-width: 960px) {
.column-cat-list p {
white-space: nowrap; } }
.column-cat-list ul {
display: flex;
justify-content: space-around; }
@media screen and (max-width: 959px) {
.column-cat-list ul {
flex-wrap: wrap; } }
@media screen and (min-width: 960px) {
.column-cat-list ul {
width: 100%;
justify-content: space-between;
padding: 10px 0 10px 40px; } }
.column-cat-list ul li {
display: flex;
align-items: center;
justify-content: center;
width: 45%;
background-color: #fff;
position: relative;
padding: 10px 0;
border-radius: 5px;
cursor: pointer; }
@media screen and (max-width: 959px) {
.column-cat-list ul li {
margin-top: 10px; } }
@media screen and (min-width: 960px) {
.column-cat-list ul li {
width: 23%; } }
.column-cat-list ul li::after {
content: "";
display: block;
border-top: 1px solid;
border-right: 1px solid;
width: 5px;
height: 5px;
margin-left: 10px;
transform: rotate(45deg); }
.column-cat-list ul li::before {
content: "";
display: block;
padding-right: 5px;
width: 15px;
height: 15px;
background-size: 15px;
background-repeat: no-repeat; }
.column-cat-list ul li.-red {
color: #a50000; }
.column-cat-list ul li.-red::after {
border-color: #a50000; }
.column-cat-list ul li.-red::before {
display: none; }
.column-cat-list ul li.-red.-current {
color: #fff;
background-color: #a50000; }
.column-cat-list ul li.-red.-current::after {
border-color: #fff; }
.column-cat-list ul li.-blue {
color: #177bff; }
.column-cat-list ul li.-blue::after {
border-color: #177bff; }
.column-cat-list ul li.-blue::before {
background-image: url("../img/top/column_01.svg"); }
.column-cat-list ul li.-blue.-current {
color: #fff;
background-color: #177bff; }
.column-cat-list ul li.-blue.-current::after {
border-color: #fff; }
.column-cat-list ul li.-blue.-current::before {
background-image: url("../img/column/cat_icon_01.svg"); }
.column-cat-list ul li.-orange {
color: #ff7800; }
.column-cat-list ul li.-orange::after {
border-color: #ff7800; }
.column-cat-list ul li.-orange::before {
background-image: url("../img/top/column_02.svg"); }
.column-cat-list ul li.-orange.-current {
color: #fff;
background-color: #ff7800; }
.column-cat-list ul li.-orange.-current::after {
border-color: #fff; }
.column-cat-list ul li.-orange.-current::before {
background-image: url("../img/column/cat_icon_02.svg"); }
.column-cat-list ul li.-green {
color: #4ba100; }
.column-cat-list ul li.-green::after {
border-color: #4ba100; }
.column-cat-list ul li.-green::before {
background-image: url("../img/top/column_03.svg"); }
.column-cat-list ul li.-green.-current {
color: #fff;
background-color: #4ba100; }
.column-cat-list ul li.-green.-current::after {
border-color: #fff; }
.column-cat-list ul li.-green.-current::before {
background-image: url("../img/column/cat_icon_03.svg"); }
#under-column .common-column-list {
padding: 0 15px;
margin-bottom: 50px; }
@media screen and (min-width: 960px) {
#under-column .common-column-list {
margin-bottom: 100px; } }
.under-page-nav {
display: flex;
justify-content: center;
max-width: 1200px;
margin: 50px auto;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: bold; }
@media screen and (min-width: 960px) {
.under-page-nav {
font-size: 14px;
margin: 114px auto 0; } }
.under-page-nav a {
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px; }
@media screen and (min-width: 960px) {
.under-page-nav a {
padding: 0 15px; } }
.under-page-nav .under-page-nav-current {
color: #fff;
background-color: #a50000;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
border-radius: 999px; }
.single-column {
padding: 0 15px;
max-width: 1200px;
margin: 0 auto; }
.single-column .cat {
padding-top: 30px; }
@media screen and (min-width: 960px) {
.single-column .cat {
padding-top: 55px; } }
.single-column .cat p {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
line-height: 1; }
@media screen and (min-width: 960px) {
.single-column .cat p {
font-size: 16px; } }
.single-column .cat p.-green {
color: #4ba100; }
.single-column .cat p.-blue {
color: #177bff; }
.single-column .cat p.-orange {
color: #ff7800; }
.single-column .cat p img {
padding-right: 5px;
width: 20px;
height: 20px; }
.single-column h1 {
padding-top: 15px;
text-align: center;
font-size: 28px; }
@media screen and (min-width: 960px) {
.single-column h1 {
font-size: 32px;
padding-top: 25px; } }
.single-column time {
color: #b7b7b7;
font-size: 12px;
font-weight: 500;
display: block;
text-align: center; }
@media screen and (min-width: 960px) {
.single-column time {
font-size: 14px; } }
.single-column .thumb {
margin-top: 25px; }
@media screen and (min-width: 960px) {
.single-column .thumb {
margin-top: 41px; } }
.single-column .thumb img {
border-radius: 10px; }
.single-content {
max-width: 800px;
margin: 0 auto;
padding-top: 10px; }
@media screen and (min-width: 960px) {
.single-content {
padding-top: 20px; } }
.single-content h2 {
font-size: 18px;
margin-top: 30px; }
@media screen and (min-width: 960px) {
.single-content h2 {
font-size: 24px;
margin-top: 60px; } }
.single-content p {
padding-top: 20px;
line-height: 33px; }
@media screen and (max-width: 959px) {
.single-content p {
font-size: 14px; } }
.single-content img {
max-width: 100%;
height: auto;
padding-top: 20px; }
.under-single__pager {
max-width: 800px;
margin: 30px auto 0;
display: flex;
font-size: 13px;
font-weight: bold;
align-items: center; }
@media screen and (min-width: 960px) {
.under-single__pager {
font-size: 14px;
margin: 60px auto 0; } }
.under-single__pager > div {
width: 33%; }
.under-single__pager .under-single__pager-back {
border: 1px solid #000;
text-align: center;
border-radius: 10px;
padding: 10px 5px; }
@media screen and (min-width: 960px) {
.under-single__pager .under-single__pager-back {
padding: 16px 37px; } }
.under-single__pager .under-single__pager-next {
text-align: right; }
.single-column-recomme {
padding: 50px 0;
background-color: #f9f5ed;
margin-top: 40px; }
@media screen and (min-width: 960px) {
.single-column-recomme {
padding: 90px 0;
margin-top: 90px; } }
.single-column-recomme ul {
padding: 0 15px; }
.voice-list {
max-width: 1200px;
margin: 30px auto 0; }
@media screen and (max-width: 959px) {
.voice-list {
padding: 0 15px; } }
@media screen and (min-width: 960px) {
.voice-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 90px auto 100px; } }
.voice-list li {
padding-top: 20px; }
@media screen and (min-width: 960px) {
.voice-list li {
width: 31.5%; } }
.voice-list li .title {
display: flex;
align-items: center; }
@media screen and (min-width: 960px) {
.voice-list li .title {
padding: 15px 15px 0; } }
.voice-list li .title .voice {
display: inline-block;
color: #ffffff;
font-size: 16px;
letter-spacing: 2px;
text-shadow: 1px 1px 0px #a50000, -1px 1px 0px #a50000, 1px -1px 0px #a50000, -1px -1px 0px #a50000, 1px 0px 0px #a50000, 0px 1px 0px #a50000, -1px 0px 0px #a50000, 0px -1px 0px #a50000;
padding-right: 15px;
border-right: 1px dashed #a50000; }
@media screen and (min-width: 960px) {
.voice-list li .title .voice {
font-size: 18px; } }
.voice-list li .title .name {
padding-left: 15px;
font-weight: bold;
line-height: 1.3; }
.voice-list li .title .name span {
display: block;
font-size: 12px; }
@media screen and (min-width: 960px) {
.voice-list li .title .name span {
font-size: 14px; } }
.voice-list li .thumb {
margin-top: 20px; }
.voice-list li .item {
display: flex;
align-items: center;
position: relative;
top: -30px; }
.voice-list li .item img {
display: block;
width: 100px;
height: 100px;
border: 3px solid #fff;
object-fit: cover;
border-radius: 999px; }
@media screen and (min-width: 960px) {
.voice-list li .item img {
width: 115px;
height: 115px; } }
.voice-list li .item p {
padding: 15px 0 0 20px;
font-size: 12px;
font-weight: 500; }
@media screen and (min-width: 960px) {
.voice-list li .item p {
padding-top: 18px; } }
.voice-list li .item p span {
display: block;
font-weight: bold;
font-size: 16px;
color: #a20000; }
@media screen and (min-width: 960px) {
.voice-list li .item p span {
font-size: 18px; } }
@media screen and (max-width: 414px) {
.single-voice .common-button a {
width: 270px; } }
.single-voice .title {
position: relative;
top: -30px;
width: 80%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
padding: 10px;
margin: 0 auto; }
@media screen and (min-width: 960px) {
.single-voice .title {
top: -55px;
max-width: 1000px;
padding: 55px 15px 0; } }
.single-voice .title .voice {
display: inline-block;
color: #ffffff;
font-size: 16px;
letter-spacing: 2px;
text-shadow: 1px 1px 0px #a50000, -1px 1px 0px #a50000, 1px -1px 0px #a50000, -1px -1px 0px #a50000, 1px 0px 0px #a50000, 0px 1px 0px #a50000, -1px 0px 0px #a50000, 0px -1px 0px #a50000;
padding-right: 15px;
border-right: 1px dashed #a50000; }
@media screen and (min-width: 960px) {
.single-voice .title .voice {
font-size: 30px;
padding-right: 45px; } }
.single-voice .title .name {
padding-left: 15px;
font-weight: bold;
line-height: 1.3; }
@media screen and (min-width: 960px) {
.single-voice .title .name {
padding-left: 40px;
font-size: 20px; } }
.single-voice .title .name span {
display: block;
font-size: 12px; }
@media screen and (min-width: 960px) {
.single-voice .title .name span {
font-size: 14px; } }
.single-voice .recommend {
background-color: #f9f5ed;
max-width: 800px;
margin: 0 15px;
padding-bottom: 30px;
border-radius: 10px; }
@media screen and (min-width: 960px) {
.single-voice .recommend {
margin-top: 35px;
margin: 0 auto; } }
.single-voice .recommend > p {
display: block;
margin: 0 auto;
font-size: 16px;
font-family: "Poppins", sans-serif;
font-weight: bold;
position: relative;
color: #a50000;
text-align: center;
top: -10px; }
@media screen and (min-width: 960px) {
.single-voice .recommend > p {
font-size: 20px;
top: -17px; } }
.single-voice .recommend h1 {
text-align: center;
font-size: 18px;
font-weight: bold;
padding-top: 20px; }
@media screen and (min-width: 960px) {
.single-voice .recommend h1 {
font-size: 24px; } }
.single-voice .recommend h1 span {
display: block;
font-size: 12px;
font-weight: normal; }
@media screen and (min-width: 960px) {
.single-voice .recommend h1 span {
font-size: 14px; } }
.single-voice .recommend img {
display: block;
margin: 20px auto 0;
width: 200px;
height: 200px;
border: 5px solid #fff;
border-radius: 999px;
box-sizing: border-box; }
@media screen and (min-width: 960px) {
.single-voice .recommend img {
width: 323px;
height: 323px;
border: 10px solid #fff; } }
.single-voice .recommend > div {
padding: 20px 15px 0; }
@media screen and (min-width: 960px) {
.single-voice .recommend > div {
padding: 35px 0 0;
max-width: 650px;
margin: 0 auto; } }
@media screen and (max-width: 959px) {
.single-voice .single-content {
padding: 0 15px; } }
.single-voice .common-button {
margin-top: 50px; }
.single-voice .common-button img {
padding-right: 10px; }
@media screen and (min-width: 960px) {
.single-voice .common-button {
margin-top: 100px; } }
.single-voice-list {
margin-top: 50px;
padding-top: 50px;
border-top: 1px solid #dcdcdc;
margin-bottom: 50px; }
@media screen and (min-width: 960px) {
.single-voice-list {
margin-top: 100px;
padding-top: 100px;
margin-bottom: 100px; } }
/* NEWSページ */
#under-news {
margin-bottom: 50px; }
@media screen and (min-width: 960px) {
#under-news {
margin-bottom: 100px; } }
#under-news .news-list {
padding-top: 30px; }
@media screen and (min-width: 960px) {
#under-news .news-list {
padding-top: 60px;
text-align: center; } }
#under-news .news-list ul {
text-align: left;
display: inline-block; }
@media screen and (max-width: 959px) {
#under-news .news-list ul {
padding: 0 15px; } }
@media screen and (min-width: 960px) {
#under-news .news-list ul {
max-width: 800px;
margin: 0 auto; } }
#under-news .news-list ul li {
padding: 15px 0 5px;
text-align: left;
border-bottom: 1px solid #dadada; }
@media screen and (min-width: 960px) {
#under-news .news-list ul li {
padding: 40px 10px 10px; } }
#under-news .news-list ul li a {
font-size: 13px; }
@media screen and (min-width: 960px) {
#under-news .news-list ul li a {
display: flex;
align-items: center; } }
@media screen and (min-width: 960px) {
#under-news .news-list ul li a {
font-size: 16px; } }
#under-news .news-list ul li a time {
font-size: 13px;
font-weight: bold;
padding-right: 10px; }
@media screen and (min-width: 960px) {
#under-news .news-list ul li a time {
font-size: 16px;
padding-right: 30px; } }
#single-news {
padding: 0 15px;
max-width: 1200px;
margin: 60px auto 0; }
@media screen and (min-width: 960px) {
#single-news {
margin: 60px auto 100px; } }
#single-news h1 {
padding-top: 15px;
text-align: center;
font-size: 28px; }
@media screen and (min-width: 960px) {
#single-news h1 {
font-size: 32px;
padding-top: 25px; } }
#single-news time {
color: #b7b7b7;
font-size: 12px;
font-weight: 500;
display: block;
text-align: center; }
@media screen and (min-width: 960px) {
#single-news time {
font-size: 14px; } }
#single-news .thumb {
margin-top: 40px; }
/* 規約系 */
#under-terms {
max-width: 1200px;
margin: 60px auto 100px auto; }
@media screen and (max-width: 959px) {
#under-terms {
padding: 0 15px; } }
#under-terms p {
font-size: 13px; }
@media screen and (min-width: 960px) {
#under-terms p {
font-size: 16px; } }
#under-terms .textset {
margin: 30px 0; }
@media screen and (min-width: 960px) {
#under-terms .textset {
margin: 35px 0; } }
#under-terms .textset > p:nth-of-type(1) {
font-size: 16px;
border-bottom: 1px solid #e9e9e9;
padding-bottom: 6px;
font-weight: bold; }
@media screen and (min-width: 960px) {
#under-terms .textset > p:nth-of-type(1) {
font-size: 24px;
padding-bottom: 11px; } }
#under-terms .textset > p:nth-of-type(n + 2) {
padding-top: 20px; }
/* 特商法 */
.under-dl {
max-width: 1020px;
margin: 44px auto;
padding: 0 12px; }
@media screen and (min-width: 960px) {
.under-dl {
margin: 60px auto; } }
@media screen and (min-width: 960px) {
.under-dl dl {
display: flex;
flex-wrap: wrap; } }
.under-dl dt {
margin-top: 20px;
font-weight: bold; }
@media screen and (min-width: 960px) {
.under-dl dt {
display: flex;
align-items: center;
width: 15.5%;
margin-right: 3%;
margin-top: unset;
border-bottom: 1px solid #e9e9e9; } }
.under-dl dd {
padding: 6px 0 6px;
border-bottom: 1px solid #e9e9e9; }
@media screen and (min-width: 960px) {
.under-dl dd {
width: 81.5%; } }
@media screen and (min-width: 960px) {
.under-dl dt,
.under-dl dd {
padding: 27px 0 27px 10px;
box-sizing: border-box; } }
.under-dl a {
color: #005cff;
text-decoration: underline; }
/* オンラインショップ */
#products {
max-width: 1200px;
margin: 40px auto 50px; }
@media screen and (max-width: 959px) {
#products {
padding: 0 15px; } }
@media screen and (min-width: 960px) {
#products {
margin: 60px auto 100px; } }
@media screen and (min-width: 960px) {
#products .item-count {
display: flex;
align-items: flex-end; } }
#products .item-count.-secondary {
margin-top: 30px;
border-top: 1px solid #e1e1e1;
padding-top: 20px; }
@media screen and (min-width: 960px) {
#products .item-count.-secondary {
margin-top: 40px;
padding-top: 30px; } }
#products .item-count .all {
font-weight: bold;
font-size: 18px; }
@media screen and (min-width: 960px) {
#products .item-count .all {
line-height: 1;
font-size: 24px;
padding-right: 35px; } }
#products .item-count .count {
font-size: 12px; }
#products .wrap {
margin-top: 20px; }
@media screen and (min-width: 960px) {
#products .wrap {
display: flex;
justify-content: space-between;
margin-top: 40px; } }
@media screen and (max-width: 959px) {
#products .cat-list {
margin-top: 60px; } }
@media screen and (min-width: 960px) {
#products .cat-list {
width: 240px;
flex-shrink: 0; } }
#products .cat-list .cat-list-link {
border-top: 1px solid #e1e1e1;
padding-top: 20px; }
@media screen and (min-width: 960px) {
#products .cat-list .cat-list-link {
padding-top: 45px; } }
#products .cat-list .cat-list-link.-secondary {
margin-top: 20px; }
@media screen and (min-width: 960px) {
#products .cat-list .cat-list-link.-secondary {
margin-top: 45px; } }
#products .cat-list .cat-list-link > p {
font-weight: bold;
font-size: 16px; }
@media screen and (min-width: 960px) {
#products .cat-list .cat-list-link > p {
font-size: 20px; } }
#products .cat-list .cat-list-link ul {
padding-top: 20px; }
@media screen and (min-width: 960px) {
#products .cat-list .cat-list-link ul {
padding-top: 20px; } }
#products .cat-list .cat-list-link ul li {
padding-top: 10px; }
@media screen and (min-width: 960px) {
#products .cat-list .cat-list-link ul li {
padding-top: 20px; } }
#products .cat-list .cat-list-link ul li a {
font-size: 13px; }
@media screen and (min-width: 960px) {
#products .cat-list .cat-list-link ul li a {
font-size: 14px; } }
#products .cat-list .cat-list-link ul li a::before {
content: ">";
padding-right: 10px; }
@media screen and (min-width: 960px) {
.product-list {
width: 900px;
flex-shrink: 0; } }
.product-list ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
@media screen and (min-width: 960px) {
.product-list ul::after {
content: "";
display: block;
width: 31%;
height: auto; } }
.product-list ul li {
padding-top: 20px;
width: 47%; }
@media screen and (min-width: 960px) {
.product-list ul li {
padding-top: 0;
width: 31%; } }
@media screen and (min-width: 960px) {
.product-list ul li:nth-of-type(n + 4) {
padding-top: 40px; } }
.product-list ul li .cat {
margin-top: 15px; }
@media screen and (min-width: 960px) {
.product-list ul li .cat {
margin-top: 20px; } }
.product-list ul li .cat > p {
display: inline-block;
border-radius: 5px;
color: #fff;
padding: 2px 8px;
font-size: 12px; }
.product-list ul li .cat > p.-orange {
background-color: #ff7b32; }
.product-list ul li .cat > p.-blue {
background-color: #00c9d4; }
.product-list ul li .cat > p.-pink {
background-color: #ff73a1; }
.product-list ul li .thumb {
padding-top: 100%; }
.product-list ul li .title {
padding-top: 10px; }
@media screen and (min-width: 960px) {
.product-list ul li .title {
padding-top: 15px; } }
.product-list ul li .price {
font-size: 13px;
font-weight: bold; }
@media screen and (min-width: 960px) {
.product-list ul li .price {
font-size: 14px; } }
.product-list ul li .price span {
font-size: 16px;
font-family: "Poppins", sans-serif; }
@media screen and (min-width: 960px) {
.product-list ul li .price span {
font-size: 20px; } }
/* 商品詳細ページ */
#product-detail {
margin-bottom: 50px; }
@media screen and (min-width: 960px) {
#product-detail {
margin-bottom: 100px; } }
#product-detail .wrap {
padding: 60px 15px;
max-width: 1200px;
margin: 0 auto;
border-bottom: 1px solid #e1e1e1; }
@media screen and (min-width: 960px) {
#product-detail .wrap {
padding-bottom: 75px;
display: flex;
justify-content: space-between; } }
@media screen and (max-width: 959px) {
#product-detail .wrap .product-text {
padding-top: 20px; } }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text {
width: 425px;
margin-left: 65px;
flex-shrink: 0; } }
#product-detail .wrap .product-text h1 {
font-size: 18px; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text h1 {
font-size: 24px; } }
#product-detail .wrap .product-text .description {
font-size: 14px;
padding-top: 15px; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .description {
padding-top: 30px;
font-size: 16px; } }
#product-detail .wrap .product-text .description img {
max-width: 100%; }
#product-detail .wrap .product-text .chart {
margin-top: 10px;
border-top: 1px dashed #acacac;
border-bottom: 1px dashed #acacac;
padding: 15px 0; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .chart {
margin-top: 20px;
padding: 25px 0; } }
#product-detail .wrap .product-text .chart p {
padding: 0 10px;
font-size: 14px; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .chart p {
font-size: 13px; } }
#product-detail .wrap .product-text .price-value {
padding-top: 15px;
display: flex; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .price-value {
padding-top: 30px; } }
#product-detail .wrap .product-text .price-value .value {
padding-right: 30px;
display: flex;
align-items: center; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .price-value .value {
padding-right: 70px; } }
#product-detail .wrap .product-text .price-value .value > p {
padding-right: 10px;
font-size: 13px; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .price-value .value > p {
padding-right: 20px;
font-size: 14px; } }
#product-detail .wrap .product-text .price-value .value input {
width: 40px;
height: 40px;
padding: 0 16px;
font-size: 16px;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
background: #f4f4f4; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .price-value .value input {
width: 68px;
height: 60px;
font-size: 20px;
padding: 0 10px; } }
#product-detail .wrap .product-text .price-value .price {
font-size: 14px; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .price-value .price {
font-size: 16px; } }
#product-detail .wrap .product-text .price-value .price span {
font-size: 24px;
font-weight: bold;
font-family: "Poppins", sans-serif; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .price-value .price span {
font-size: 32px; } }
#product-detail .wrap .product-text .to-cart {
margin: 20px auto 0; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .to-cart {
margin-top: 30px; } }
#product-detail .wrap .product-text .to-cart a {
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
border: 1px solid #000;
width: 100%;
height: 45px;
font-weight: bold;
font-size: 13px; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .to-cart a {
font-size: 14px;
margin: 25px auto 0;
width: 417px;
height: 51px;
font-size: 16px; } }
#product-detail .wrap .product-text .shipping {
padding-top: 15px;
font-size: 12px;
color: #808080; }
@media screen and (min-width: 960px) {
#product-detail .wrap .product-text .shipping {
padding-top: 30px; } }
#product-detail .single-content {
padding: 0 15px; }
.product-recommend {
padding: 50px 15px;
background-color: #f9f5ed; }
@media screen and (min-width: 960px) {
.product-recommend {
padding: 100px 15px; } }
.product-recommend .product-list {
margin: 0 15px;
max-width: 1200px; }
.product-recommend .product-list .list {
display: block; }
.add-cart-button {
margin: 10px auto 0;
width: 100%;
height: 60px;
background-color: #a20000;
color: #fff;
box-shadow: 0px 10px 7px -6px #bf2a12;
display: flex;
justify-content: center;
align-items: center;
border-radius: 11px;
position: relative;
font-size: 14px;
font-weight: bold;
border: none;
font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important; }
@media screen and (min-width: 960px) {
.add-cart-button {
margin: 25px auto 0;
width: 417px;
height: 81px;
font-size: 16px; } }
.add-cart-button.-secondary {
margin-top: 30px; }
@media screen and (min-width: 960px) {
.add-cart-button.-secondary {
margin-top: 50px; } }
.add-cart-button::after {
content: "";
display: block;
width: 5px;
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
position: absolute;
top: 43%;
right: 40px; }
@media screen and (min-width: 960px) {
.add-cart-button::after {
width: 7px;
height: 7px;
right: 100px; } }
.add-cart-button img {
padding-top: 0;
margin-right: 10px; }
@media screen and (min-width: 960px) {
.add-cart-button img {
margin-right: 15px; } }
/* カート */
#cart {
max-width: 1200px;
margin: 30px auto 50px; }
@media screen and (max-width: 959px) {
#cart {
padding: 0 15px; } }
@media screen and (min-width: 960px) {
#cart {
margin: 60px auto 100px; } }
#cart .common-button {
margin-top: 30px; }
@media screen and (min-width: 960px) {
#cart .common-button {
margin-top: 60px; } }
@media screen and (max-width: 414px) {
#cart .common-button a {
width: 270px; } }
/* 支払いなど */
.woocommerce {
margin: 0 auto;
padding: 41px 15px 0;
box-sizing: border-box; }
@media screen and (min-width: 960px) {
.woocommerce {
max-width: 650px;
padding: 128px 0; } }
.woocommerce input {
border: 1px solid #aaa;
height: 26px;
border-radius: 4px;
font-size: 16px; }
@media screen and (min-width: 960px) {
.woocommerce input {
height: 40px; } }
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
float: none;
width: 100%; }
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
float: none; }
.woocommerce .woocommerce-customer-details address {
box-sizing: border-box; }
/* about */
#under-about-link {
margin-top: 20px; }
@media screen and (min-width: 960px) {
#under-about-link {
max-width: 1200px;
margin: 20px auto 0; } }
#under-about-link ul {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 20px; }
#under-about-link ul li {
flex-shrink: 0;
width: 32%;
position: relative;
text-align: center;
line-height: 1.7; }
#under-about-link ul li:not(:last-of-type)::before {
content: "";
border-right: 1px dotted #000;
width: 2px;
height: 11px;
display: block;
position: absolute;
right: 0;
bottom: 11px; }
#under-about-link ul li::after {
content: "";
display: block;
margin: 5px 0;
width: 5px;
height: 5px;
border-top: 1px solid #900000;
border-right: 1px solid #900000;
transform: rotate(135deg);
position: absolute;
left: 48%; }
@media screen and (min-width: 960px) {
#under-about-link ul li::after {
border-top: 2px solid #900000;
border-right: 2px solid #900000; } }
#under-about-link ul li a {
font-size: 12px;
font-weight: bold; }
@media screen and (min-width: 960px) {
#under-about-link ul li a {
font-size: 20px; } }
.under-about {
background-color: #f5f4f2;
padding: 50px 0 50px; }
@media screen and (min-width: 960px) {
.under-about {
padding: 100px 0 120px; } }
.under-about .shop-block {
max-width: 1200px;
margin: 0 15px 30px;
border-radius: 30px;
background-color: #fff;
border: 5px solid #e5e2dc;
border-radius: 30px; }
@media screen and (min-width: 960px) {
.under-about .shop-block {
margin: 0 auto 80px; } }
.under-about .shop-block:last-of-type {
margin-bottom: 0; }
.under-about .shop-block .shop-block-title {
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -25px;
margin-bottom: -25px; }
@media screen and (min-width: 960px) {
.under-about .shop-block .shop-block-title {
font-size: 20px;
top: -40px;
margin-bottom: -40px; } }
.under-about .shop-block .shop-block-title p {
background-color: #fff;
border: 5px solid #e5e2dc;
border-radius: 999px;
padding: 10px 20px; }
@media screen and (min-width: 960px) {
.under-about .shop-block .shop-block-title p {
padding: 20px 75px; } }
.under-about.-shop02 {
background-color: #cce4e8; }
.under-about.-shop02 .shop-block,
.under-about.-shop02 .shop-block-title p {
border: 5px solid #b7dae0; }
.under-about.-shop03 {
background-color: #e8f5d8; }
.under-about.-shop03 .shop-block,
.under-about.-shop03 .shop-block-title p {
border: 5px solid #c4ddc4; }
.under-about .shop-main .shop-img {
border-radius: 30px 30px 0 0;
overflow: hidden; }
.under-about .shop-main .shop-img img {
width: 100%; }
.under-about .shop-main .shop-detail {
padding: 20px; }
@media screen and (min-width: 960px) {
.under-about .shop-main .shop-detail {
padding: 50px 70px 50px 90px;
display: flex; } }
@media screen and (max-width: 414px) {
.under-about .shop-main .shop-detail .shop-info {
border-bottom: 1px dotted #000;
padding-bottom: 20px;
margin-bottom: 20px; } }
@media screen and (min-width: 960px) {
.under-about .shop-main .shop-detail .shop-info {
width: 375px;
border-right: 1px dotted #000;
flex-shrink: 0;
padding-right: 50px;
margin-right: 55px; } }
.under-about .shop-main .shop-detail h2 {
font-size: 22px; }
@media screen and (min-width: 960px) {
.under-about .shop-main .shop-detail h2 {
font-size: 36px; } }
.under-about .shop-main .shop-detail h2 span {
font-size: 14px;
color: #969692;
display: block;
padding-top: 5px; }
@media screen and (min-width: 960px) {
.under-about .shop-main .shop-detail h2 span {
padding-top: 10px;
font-size: 16px; } }
.under-about .shop-main .shop-detail ul {
margin-top: 15px; }
@media screen and (min-width: 960px) {
.under-about .shop-main .shop-detail ul {
margin-top: 30px; } }
.under-about .shop-main .shop-detail ul li {
margin-top: 5px;
position: relative;
padding-left: 20px; }
@media screen and (min-width: 960px) {
.under-about .shop-main .shop-detail ul li {
font-size: 14px; } }
.under-about .shop-main .shop-detail ul li::before {
content: "";
background-repeat: no-repeat;
display: block;
position: absolute;
top: 5px;
left: 0; }
.under-about .shop-main .shop-detail ul li.map::before {
width: 10px;
height: 15px;
background-size: 10px 15px;
background-image: url("../img/about/map.svg"); }
.under-about .shop-main .shop-detail ul li.date::before {
width: 12px;
height: 12px;
background-size: 12px 12px;
background-image: url("../img/about/date.svg"); }
.under-about .shop-main .shop-detail ul li.tel::before {
width: 8px;
height: 15px;
background-size: 8px 15px;
background-image: url("../img/about/tel.svg");
top: 6px; }
.under-about .shop-main .shop-detail ul li.mail::before {
width: 14px;
height: 8px;
background-size: 14px 8px;
background-image: url("../img/about/mail.svg");
top: 9px; }
.under-about .shop-main .shop-introduce h3 {
font-size: 18px;
font-weight: bold;
color: #8b0000; }
@media screen and (min-width: 960px) {
.under-about .shop-main .shop-introduce h3 {
font-size: 28px; } }
.under-about .shop-main .shop-introduce p {
padding-top: 15px; }
.under-about .shop-message {
padding: 20px 15px; }
@media screen and (min-width: 960px) {
.under-about .shop-message {
padding: 45px;
display: flex; } }
.under-about .shop-message .shop-message-detail {
text-align: center; }
@media screen and (min-width: 960px) {
.under-about .shop-message .shop-message-detail {
margin-right: 85px; } }
.under-about .shop-message .shop-message-detail img {
width: 153px;
height: 153px;
border-radius: 999px;
object-fit: cover; }
.under-about .shop-message .shop-message-detail p {
font-size: 16px; }
.under-about .shop-message > p {
font-size: 14px; }
@media screen and (max-width: 414px) {
.under-about .shop-message > p {
padding-top: 15px; } }
.under-about .shop-handling {
padding: 20px 15px; }
@media screen and (min-width: 960px) {
.under-about .shop-handling {
padding: 45px; } }
.under-about .shop-handling .shop-handling-info > p {
padding-top: 20px; }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info > p {
padding-top: 35px; } }
.under-about .shop-handling .shop-handling-info:first-of-type {
border-bottom: 1px dotted #000;
padding-bottom: 20px;
margin-bottom: 20px; }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info:first-of-type {
padding-bottom: 35px;
margin-bottom: 35px; } }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail {
display: flex; } }
.under-about .shop-handling .shop-handling-info .shp-handing-detail .shop-slide {
max-width: 500px; }
.under-about .shop-handling .shop-handling-info .shp-handing-detail figure {
margin-right: 45px;
border-radius: 10px;
overflow: hidden; }
@media screen and (max-width: 414px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail figure {
position: relative;
width: 100%;
padding-top: 61.7521%; } }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail figure {
width: 468px;
height: 289px;
flex-shrink: 0; } }
.under-about .shop-handling .shop-handling-info .shp-handing-detail figure img {
width: 100%;
height: 100%; }
@media screen and (max-width: 414px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail figure img {
position: absolute;
top: 0;
left: 0; } }
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div p:first-of-type {
font-size: 13px;
color: #8f0000;
font-family: "Poppins", sans-serif;
font-weight: 500; }
@media screen and (max-width: 414px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div p:first-of-type {
padding-top: 10px; } }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div p:first-of-type {
font-size: 14px; } }
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div p:nth-of-type(2) {
font-weight: bold;
font-size: 18px; }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div p:nth-of-type(2) {
font-size: 24px; } }
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl {
font-size: 13px;
padding-top: 10px; }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl {
max-width: 449px;
padding-top: 15px;
font-size: 14px;
display: flex;
flex-wrap: wrap;
align-items: flex-start; } }
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl dt {
padding-top: 15px; }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl dt {
padding-top: 0px;
width: 40%;
flex-shrink: 0; } }
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl dd {
padding-top: 5px;
position: relative;
padding-left: 7px;
box-sizing: border-box; }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl dd {
padding-top: 0px;
width: 60%;
flex-shrink: 0; } }
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl dd::before {
content: ":";
position: absolute;
left: 0;
top: 4px; }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl dd::before {
top: 0; } }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl dd.secondary {
padding-top: 23px; } }
@media screen and (min-width: 960px) {
.under-about .shop-handling .shop-handling-info .shp-handing-detail > div dl dd.secondary::before {
top: 23px; } }
.under-about .shop-thumb {
padding: 10px 15px 30px; }
@media screen and (min-width: 960px) {
.under-about .shop-thumb {
padding: 50px 70px 50px 90px; } }
.under-about .shop-thumb p {
padding-top: 20px; }
@media screen and (min-width: 960px) {
.under-about .shop-thumb p {
padding-top: 50px; } }
@media screen and (min-width: 960px) {
.under-about .shop-thumb ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between; } }
@media screen and (min-width: 960px) {
.under-about .shop-thumb ul::after {
content: "";
display: block;
width: 331px; } }
.under-about .shop-thumb ul li {
margin-top: 20px; }
@media screen and (min-width: 960px) {
.under-about .shop-thumb ul li {
width: 331px;
flex-shrink: 0;
margin-top: 35px; } }
.under-about .shop-thumb ul li:first-of-type p {
font-weight: bold; }
@media screen and (min-width: 960px) {
.under-about .shop-thumb ul li:first-of-type p {
font-size: 16px; } }
.under-about .shop-thumb ul li figure {
border-radius: 10px;
overflow: hidden; }
@media screen and (max-width: 414px) {
.under-about .shop-thumb ul li figure {
position: relative;
width: 100%;
padding-top: 70.3927%; } }
@media screen and (min-width: 960px) {
.under-about .shop-thumb ul li figure {
height: 233px; } }
.under-about .shop-thumb ul li figure img {
width: 100%;
height: 100%; }
@media screen and (max-width: 414px) {
.under-about .shop-thumb ul li figure img {
position: absolute;
top: 0;
left: 0; } }
.under-about .shop-thumb ul li p {
position: relative;
padding: 10px 0 0 30px; }
@media screen and (min-width: 960px) {
.under-about .shop-thumb ul li p {
font-size: 14px;
padding: 30px 0 0 40px; } }
.under-about .shop-thumb ul li p::before {
content: "";
display: block;
position: absolute;
top: 15px;
left: 0;
width: 24px;
height: 13px;
background-size: 24px 13px;
background-image: url("../img/about/karaoke.svg"); }
@media screen and (min-width: 960px) {
.under-about .shop-thumb ul li p::before {
top: 35px; } }
.under-about .shop-table-wrap {
padding: 10px 15px 30px; }
@media screen and (min-width: 960px) {
.under-about .shop-table-wrap {
padding: 50px 70px 50px 90px; } }
.under-about .shop-table-wrap > p {
font-size: 14px;
padding-top: 15px; }
@media screen and (min-width: 960px) {
.under-about .shop-table-wrap > p {
padding-top: 30px; } }
.under-about .shop-table-wrap .shop-table {
border-radius: 10px;
overflow: hidden; }
@media screen and (max-width: 414px) {
.under-about .shop-table-wrap .shop-table {
overflow: scroll; } }
.under-about .shop-table-wrap .shop-table-flex {
display: flex; }
@media screen and (max-width: 414px) {
.under-about .shop-table-wrap .shop-table-flex {
width: 100%;
width: 1200px; } }
.under-about .shop-table-wrap .shop-table-flex > div {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px; }
.under-about .shop-table-wrap .shop-table-flex .-bg01 {
background-color: #d0c8b6;
height: 41px; }
.under-about .shop-table-wrap .shop-table-flex .-bg02 {
background-color: #e0dcd4; }
.under-about .shop-table-wrap .shop-table-flex .-wd-70 {
width: 70px;
flex-shrink: 0; }
.under-about .shop-table-wrap .shop-table-flex .-wd-119 {
width: 119px; }
.under-about .shop-table-wrap .shop-table-flex .-wd-100 {
width: 100%; }
.under-about .shop-table-wrap .shop-table-flex .-br-white {
border-right: 1px solid #fff; }
.under-about .shop-table-wrap .shop-table-flex .-bb-white {
border-bottom: 1px solid #fff; }
.under-about .shop-table-wrap .shop-table-flex .-br-gray {
border-right: 1px solid #e0dcd4; }
.under-about .shop-table-wrap .shop-table-flex .-bb-gray {
border-bottom: 1px solid #e0dcd4; }
.under-about .shop-menu-wrap {
padding: 10px 15px 30px; }
@media screen and (min-width: 960px) {
.under-about .shop-menu-wrap {
padding: 50px 70px 50px 90px; } }
@media screen and (min-width: 960px) {
.under-about .shop-menu-wrap .shop-menu {
max-width: 895px;
margin: 0 auto;
display: flex;
justify-content: space-between; } }
.under-about .shop-menu-wrap .block-line {
width: 150px;
height: 2px;
border-top: 1px dotted #000;
display: block;
margin: 30px auto 0; }
@media screen and (min-width: 960px) {
.under-about .shop-menu-wrap .block-line {
margin: 50px 200px 0; } }
.under-about .shop-menu-wrap .block-text {
padding-top: 10px; }
@media screen and (min-width: 960px) {
.under-about .shop-menu-wrap .block-text {
padding-top: 15px;
margin: 0 72px; } }
@media screen and (min-width: 960px) {
.under-about .shop-menu-wrap .shop-menu-detail {
width: 420px; } }
@media screen and (max-width: 414px) {
.under-about .shop-menu-wrap .shop-menu-detail:nth-of-type(2) {
margin-top: 30px; } }
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-title {
border-bottom: 1px solid #000000;
padding-bottom: 10px;
display: flex;
align-items: center;
justify-content: center; }
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-title > p {
padding-left: 10px;
font-size: 16px;
font-weight: bold; }
@media screen and (min-width: 960px) {
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-title > p {
font-size: 18px; } }
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-list .main {
padding-top: 15px;
display: flex;
align-items: center; }
@media screen and (min-width: 960px) {
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-list .main {
font-size: 16px; } }
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-list .main .line {
width: 140px;
height: 2px;
border-top: 1px dotted #000;
display: inline-block;
margin: 0 auto; }
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-list .main .price {
display: block;
margin-left: auto; }
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-list .main::before {
content: "・"; }
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-list .sub {
padding: 5px 0 0 15px;
font-size: 13px; }
@media screen and (min-width: 960px) {
.under-about .shop-menu-wrap .shop-menu-detail .shop-menu-list .sub {
padding-top: 10px;
font-size: 14px; } }
#recommended {
padding: 30px 0;
background: #f9f5ed; }
@media screen and (min-width: 960px) {
#recommended {
padding: 100px 0; } }
#recommended p.backtoall {
text-align: center; }
#recommended p.backtoall a {
border: 1px solid #333;
padding: 12px 40px;
border-radius: 10px;
font-weight: bold;
font-size: 13px; }
@media screen and (min-width: 960px) {
#recommended p.backtoall a {
font-size: 14px;
padding: 15px 90px; } }
#recommended p.backtoall a:before {
content: "<";
display: inline-block;
margin: 0 10px 0 0;
transform: scale(0.7, 1); }
#recommended .slick-prev {
background-image: url("../img/top/prev_aroww.svg");
background-repeat: no-repeat;
top: 32%;
left: 5px; }
@media screen and (min-width: 960px) {
#recommended .slick-prev {
left: -2%;
top: 35%; } }
#recommended .slick-next {
background-image: url("../img/top/next_arrow.svg");
background-repeat: no-repeat;
top: 32%;
right: 0; }
@media screen and (min-width: 960px) {
#recommended .slick-next {
right: -25px;
top: 35%; } }
#recommended .slick-prev, #recommended .slick-next {
z-index: 999;
background-size: 60px;
width: 60px;
height: 60px; }
#recommended .slick-prev:before, #recommended .slick-next:before {
color: transparent; }
#recommended ul {
margin: 25px auto 50px auto; }
@media screen and (min-width: 960px) {
#recommended ul {
max-width: 1200px;
margin: 50px auto; } }
#recommended ul li {
width: auto;
padding: 0 20px; }
@media screen and (min-width: 960px) {
#recommended ul li {
width: 25%;
padding: 0 10px; } }
#recommended ul li .pic {
overflow: hidden;
height: 200px;
margin-bottom: 10px;
border-radius: 10px; }
@media screen and (min-width: 960px) {
#recommended ul li .pic {
height: 280px; } }
#recommended ul li img {
object-fit: cover;
width: 100%;
height: 280px; }
#recommended ul li i {
font-style: normal;
font-size: 11px;
padding: 3px;
color: #FFF;
border-radius: 3px; }
@media screen and (min-width: 960px) {
#recommended ul li i {
font-size: 12px; } }
#recommended ul li i.food {
background: #ff7b32; }
#recommended ul li i.gift {
background: #31ba31; }
#recommended ul li i.snack {
background: #a357bc; }
#recommended ul li i.general {
background: #3854ba; }
#recommended ul h3 {
font-size: 15px; }
@media screen and (min-width: 960px) {
#recommended ul h3 {
font-size: 18px; } }
#recommended ul p {
font-size: 13px; }
@media screen and (min-width: 960px) {
#recommended ul p {
font-size: 16px; } }
#recommended ul p em {
font-style: normal;
font-weight: bold;
font-family: "Poppins", sans-serif;
margin: 0 5px 0 0; }
@media screen and (min-width: 960px) {
#recommended ul p em {
font-size: 28px; } }
table.table {
width: 100%;
margin: 10px 0; }
table.table th, table.table td {
background: #f9f5ed;
padding: 10px;
border: 3px solid #FFF; }
@media screen and (min-width: 960px) {
table.table th, table.table td {
padding: 10px 20px; } }
table.table thead th {
text-align: center; }
table.table tbody th {
text-align: left;
vertical-align: middle; }
table.table tbody td {
text-align: right; }
.textset2 {
margin: 25px 0; }
.textset2 h2 {
font-size: 18px;
margin: 20px 0; }
@media screen and (min-width: 960px) {
.textset2 h2 {
font-size: 24px;
margin: 50px 0 25px 0; } }
.textset2 h3 {
font-size: 16px;
margin: 15px 0; }
@media screen and (min-width: 960px) {
.textset2 h3 {
font-size: 20px;
margin: 25px 0; } }
.textset2 dl {
border: 1px solid #EEE;
margin: 15px 0;
padding: 15px;
display: flex;
justify-content: space-between;
font-size: 13px; }
@media screen and (min-width: 960px) {
.textset2 dl {
font-size: 16px; } }
.textset2 dl dt {
width: 20%; }
@media screen and (min-width: 960px) {
.textset2 dl dt {
width: 10%; } }
.textset2 dl dd {
width: 75%; }
@media screen and (min-width: 960px) {
.textset2 dl dd {
width: 90%; } }
.woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text,
.woocommerce .cart .button, .woocommerce .cart input.button {
font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important; }
input[type=text][name="coupon_code"] {
width: auto !important; }
@media screen and (min-width: 960px) {
input[type=text][name="coupon_code"] {
width: 120px !important; } }
a.shipping-calculator-button {
font-size: 14px;
font-weight: bold; }
a.shipping-calculator-button::before {
content: ">";
display: inline-block;
margin: 0 10px 0 0;
transform: scale(0.7, 1); }
a.shipping-calculator-button::after {
content: "数量を変更しお買い物カゴを更新した後に、住所変更可となります。";
display: inline-block;
letter-spacing: 2px;
font-size: 12px;
line-height: 1.5;
margin: 0 ;
font-weight: 100;
transform: scale(0.7, 1); }
a.restore-item {
text-decoration: underline; }
.woocommerce a.remove {
color: #a50000 !important; }
.notice{
text-align: center;
}