@font-face {
font-family: "Futura PT Medium";
src:
local("Futura-Medium"),
local("Futura Medium"),
url(//matoi-mall.com/system/wp-content/themes/fonts/futura-medium.otf) format("opentype"),
url(//matoi-mall.com/system/wp-content/themes/fonts/futura-medium.woff) format("woff");
}
@font-face {
font-family: "ARBONNIE";
src:
local("AR-BONNIE"),
local("AR BONNIE"),
url(//matoi-mall.com/system/wp-content/themes/fonts/ARBONNIE.otf) format("opentype"),
url(//matoi-mall.com/system/wp-content/themes/fonts/ARBONNIE.woff) format("woff");
}
:root{
--brand-base-color:#4C4C4C;
--brand-accent-color:#D5B5B5;
--brand-earth-color:#3E3E3E;
--brand-natural-color:#F6F5F2;
--brand-emphasis-color:#444444;
--brand-auxiliary-color:#BFDDEB;
--max-width:1200px;
--linear-gradient-A:linear-gradient(to right, #C500EA, #DA0B92, #B7247B);
--linear-gradient-a:linear-gradient(to right, #C500EA, #DA0B92, #B7247B);
--linear-gradient-B:linear-gradient(to bottom, #C500EA, #DA0B92, #B7247B);
--linear-gradient-b:linear-gradient(to bottom, #C500EA, #DA0B92, #B7247B);
--fs14px:clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
--fs16px:clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
--fs18px:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
--fs20px:clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
--fs21px:clamp(1.125rem, 1.057rem + 0.34vw, 1.313rem);
--fs24px:clamp(1.313rem, 1.244rem + 0.34vw, 1.5rem);
--fs25px:clamp(1.438rem, 1.392rem + 0.23vw, 1.563rem);
--fs28px:clamp(1.625rem, 1.58rem + 0.23vw, 1.75rem);
--fs32px:clamp(1.875rem, 1.83rem + 0.23vw, 2rem);
--fs60px:clamp(1.313rem, 0.426rem + 4.43vw, 3.75rem);
--fs80px:clamp(3.75rem, 3.295rem + 2.27vw, 5rem);
--fs100px:clamp(5rem, 4.545rem + 2.27vw, 6.25rem);
}
body {
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
overflow:hidden;
font-size: var(--fs16px);
}
html{
scroll-behavior: smooth;
}
*{
position:relative;
line-height:normal;
}
h1, h2, 
.entry-content h2{
font-size:var(--fs21px);
}
p,h3, h4,.entry-content h3, .entry-content h4{
font-size:var(--fs18px);
}
table, h5, h6, .entry-content h5, .entry-content h6 {
font-size: var(--fs16px);
}
img{
max-width:100%;
height:auto;
} .header-content {
padding: 10px 0 20px;
display: flex;
justify-content: space-between;
align-items:center;
}
h1.site-title, div.site-title{
font-style: normal;
padding:0;
max-width: 310px;
}
.header-icons {
display: flex;
align-items: center;
}
.header-icon{
width: 100px;
display: block;
text-align: center;
}
.header-icon a {
color: #000;
font-size:13px;
}
.header-icon a svg {
display: block;
margin: auto;
}
.header-icon.cart {
padding: 15px 30px 10px;
margin-top: -15px;
background: linear-gradient(to bottom, #C500EA, #DA0B92, #B7247B);
}
.header-icon.cart a{
color:#FFF;
}
.header-icon.menu-toggle {
cursor: pointer;
}
@media only screen and (max-width:420px){
.header-content{
padding-left: 15px;
padding-right: 15px;
}
}
.hamburger-wrap{
opacity: 0;
background: #1e1e1e85;
width: 100%;
transition: all .5s;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -99;
visibility:hidden;
}
.hamburger-wrap.open {
z-index: 99;
opacity: 1;
visibility:unset;
}
.hamburger-nav-menu {
width: 80%;
max-width:320px;
position: absolute;
top: 0;
bottom: 0;
right: -320px;
transition:all .5s;
z-index: 100;
background: #FFF;
padding: 50px 30px 30px;
}
.hamburger-wrap.open .hamburger-nav-menu{
right:0;
}
span.hamburger-close {
display: none;
cursor: pointer;
color: #da0b92;
}
.hamburger-wrap.open span.hamburger-close{
display:block;
position:absolute;
top:15px;
right:15px;
z-index:101;
}  .hamburger-nav,
.hamburger-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.hamburger-nav > li {
border-bottom: 1px solid #eee;
}
.hamburger-nav a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: #222;
cursor: pointer; } .hamburger-nav .sub-menu {
max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: all .4s ease; background: #fafafa;
} .hamburger-nav .menu-item-has-children.is-open > .sub-menu {
max-height: 2000px; visibility: visible;
opacity: 1;
} .hamburger-nav .menu-item-has-children > a {
position: relative;
padding-right: 40px;
}
.hamburger-nav .menu-item-has-children > a::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-50%) rotate(-45deg); transition: transform .3s ease;
} .hamburger-nav .menu-item-has-children.is-open > a::after {
transform: translateY(-75%) rotate(45deg);
} .hamburger-nav .sub-menu a {
padding: 10px 16px 10px 28px;
font-size: .95rem;
border-top: 1px solid #f0f0f0;
} #site-navigation ul{
width:100%;
max-width:var(--max-width);
display: flex;
justify-content: space-around;
}
#site-navigation ul li,#site-navigation ul li:first-child {
border: none;
}
#site-navigation ul li a{
font-size:var(--fs16px);
}
#main{
width:100%;
max-width:var(--max-width);
}
#main.one-column{
max-width:1000px;
}
div#content {
padding: 0;
}
.container {
width:100%;
max-width:var(--max-width);
margin: auto;
}
h1.site-title img, div.site-title img{
display:block;
}
@media only screen and (max-width: 62.4em){
.site-description{
background: var(--brand-base-color);
padding:.8333em;
}
}
@media only screen and (max-width: 800px){
.header-icon {
width: 80px;
}
.header-icon.cart {
padding: 15px 15px 5px;
}
}
@media only screen and (max-width: 680px){
.header-icon.search, .header-icon.favorite, .header-icon.user, .header-icon.cart {
display: none;
}
}
@media only screen and (max-width: 360px){
h1.site-title img, div.site-title img{
max-height:60px;
}
}
.breadcrumb-wrap {
background: #FFEEF2;
padding: 13px;
}
#breadcrumb {
max-width: var(--max-width);
margin: auto;
}
#breadcrumb a{
color:#4C4C4C;
}
div#breadcrumb svg {
width: 20px;
height: 16px;
} .sp-header-icon-menu{
display:none;
}
@media only screen and (max-width:768px){
.sp-header-icon-menu{
display: flex;
z-index: 9;
background: #FFF;
}
.icon-menu-item {
width: 25%;
text-align: center;
border-right: 1px solid;
padding:10px 0;
}
.icon-menu-item svg{
display:block;
margin: auto;
height: 30px;
width: fit-content;
}
} .footer-sns-link {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
margin: 50px auto;
}
.footer-sns {
width: calc(20% - (15px / 5 * 4));
max-width: 80px;
box-shadow: 0px 0px 4px #ddd;
text-align:center;
padding: 15px 5px;
}
.footer-sns a {
display: block;
font-size: 12px;
}
.footer-sns svg {
height: 40px;
width: fit-content;
stroke-width: 1px;
}
.footer-sns a img {
height: 40px;
margin-bottom: 5px;
}
@media only screen and (max-width:460px){
.footer-sns {
width: calc(33.3% - (15px / 3 * 2));
max-width: unset;
}
}
@media only screen and (max-width:285px){
.footer-sns {
width: calc(50% - (15px / 2 * 1));
}
}
footer{
background: #FFF;
color: #000;
}
footer a{
color: #000;
}
footer *{
font-size: var(--fs14px);
}
.footer-nav-block {
display: flex;
flex-wrap: wrap;
gap: 50px;
max-width:750px;
margin: 50px auto 80px;
}
.footer-nav-left, .footer-nav-center, .footer-nav-right {
width: calc(33.3% - (50px / 3 * 2));
}
.footer-nav-list li{
margin-bottom:10px;
}
p.footer-nav-title {
font-weight: 500;
margin: 50px 0 15px;
}
@media only screen and (max-width:840px){
.footer-nav-block {
gap: 30px;
margin: 30px auto;
}
.footer-nav-left, .footer-nav-center, .footer-nav-right {
width: calc(33.3% - (30px / 3 * 2));
}
}
@media only screen and (max-width:480px){
.footer-nav-left, .footer-nav-center, .footer-nav-right {
width: 100%;
}
p.footer-nav-title {
margin-top: 0;
}
} h3.widget_title {
color: var(--brand-earth-color);
}
.bold{ font-weight:bold; }
.red{ color:#FF0000; }
.ta_c,.text_center,.txt_center{ text-align:center; }
.text_left,.txt_left{ text-align:left; }
.text_right,.txt_right{ text-align:right; } .slick-track {
margin: 0;
}
.slick-items .slick-slide,.slick-slide{
margin: 0 5px;
}
.slick-items .slick-list,.slick-list{
margin:0 -5px;
}
span.discount-pr {
display:inline-block;
font-size: var(--fs14px);
background:var(--linear-gradient-B);
padding:4px 5px;
color:#FFF;
margin-right:5px;
}
span.original-price {
color: #EA009C;
font-size: var(--fs18px);
text-decoration: line-through;
}
.discount-parallel span.original-price{
margin-right:5px;
}
span.special-price {
color: #EA009C;
font-size: var(--fs24px);
font-weight: 500;
display:block;
}
.discount-parallel span.special-price{
display:inline-block;
}
span.special-price span.intax {
color: #000;
font-size: var(--fs14px);
}
.simplefavorites-modal-content-footer {
display: flex;
justify-content: center;
gap: 30px;
}
.simplefavorite-button {
cursor: pointer;
width: fit-content;
border: 1px solid;
border-radius: 5px;
padding: 2px 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
color: #da0b92;
margin-top:10px;
}
.simplefavorite-button.active {
opacity: 1;
color: #FFF;
background: #da0b92;
}
.favorites-list a{
text-decoration:none;
}
.favorites-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom:50px;
}
.favorites-list-item {
width: calc(20% - (15px / 5 * 4));
}
.favorites-list .simplefavorite-button{
margin-top:15px;
}
@media only screen and (max-width:740px){
.favorites-list-item {
width: calc(25% - (15px / 4 * 3));
}
}
@media only screen and (max-width:460px){
.favorites-list-item {
width: calc(50% - (15px / 2 * 1));
}
}
@media only screen and (max-width:360px){
span.special-price{
font-size: var(--fs21px);
}
}
#goTop {
position: fixed;
right: 30px;
bottom: 50px;
}
#goTop a {
font-size: var(--fs32px);
color: #be1f80;
} .post-type-archive-campaign .post-li {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.post-type-archive-campaign .post-li article {
width: calc(33.3% - (30px / 3 * 2));
}
@media only screen and (max-width:600px){
.post-type-archive-campaign .post-li article {
width: calc(50% - (30px / 2 * 1));
}
}