@import url("https://fonts.googleapis.com/css?family=Roboto:900");.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0
}
.slick-list:focus {
outline: none
}
.slick-list.dragging {
cursor: pointer;
cursor: hand
}
.slick-slider .slick-track,.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto
}
.slick-track:before,.slick-track:after {
content: "";
display: table
}
.slick-track:after {
clear: both
}
.slick-loading .slick-track {
visibility: hidden
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px
}
[dir="rtl"] .slick-slide {
float: right
}
.slick-slide img {
display: block
}
.slick-slide.slick-loading img {
display: none
}
.slick-slide.dragging img {
pointer-events: none
}
.slick-loading .slick-slide {
visibility: hidden
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent
}
.slick-arrow.slick-hidden {
display: none
}
.slick-loading .slick-list {
background: #fff url("./ajax-loader.gif") center center no-repeat
}
@font-face {
font-family: "slick";
src: url("./fonts/slick.eot");
src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"),url("./fonts/slick.woff") format("woff"),url("./fonts/slick.ttf") format("truetype"),url("./fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal
}
.slick-prev,.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none
}
.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus {
outline: none;
background: transparent;
color: transparent
}
.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before {
opacity: 1
}
.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before {
opacity: .25
}
.slick-prev:before,.slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: #fff;
opacity: .75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.slick-prev {
left: -25px
}
[dir="rtl"] .slick-prev {
left: auto;
right: -25px
}
.slick-prev:before {
content: "←"
}
[dir="rtl"] .slick-prev:before {
content: "→"
}
.slick-next {
right: -25px
}
[dir="rtl"] .slick-next {
left: -25px;
right: auto
}
.slick-next:before {
content: "→"
}
[dir="rtl"] .slick-next:before {
content: "←"
}
.slick-dotted.slick-slider {
margin-bottom: 30px
}
.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%
}
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer
}
.slick-dots li button:hover,.slick-dots li button:focus {
outline: none
}
.slick-dots li button:hover:before,.slick-dots li button:focus:before {
opacity: 1
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
color: #000;
opacity: .25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.slick-dots li.slick-active button:before {
color: #000;
opacity: .75
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-font-smoothing: antialiased;
padding: 0;
margin: 0;
border: 0;
list-style: none;
word-break: break-all
}
a {
display: block;
cursor: pointer;
text-decoration: none;
color: inherit
}
img {
width: 100%;
height: auto;
vertical-align: middle;
object-fit: cover;
font-family: 'object-fit: cover;'
}
svg {
width: inherit;
height: inherit
}
html {
font-size: 14px
}
@media screen and (max-width: 767px) {
html {
width:100vw;
overflow-x: hidden
}
}
input,textarea,select,button {
font-family: inherit;
font-size: inherit;
background: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none
}
body {
color: #6A5249;
font-family: 'Crimson Text',"Yu Mincho Regular", "游明朝体", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
opacity: 0;
animation: fadeIn .4s ease forwards
}
@media screen and (max-width: 767px) {
body {
width:100vw;
overflow-x: hidden
}
}
@media all and (-ms-high-contrast: none) {
body {
font-family: "メイリオ", 'Crimson Text',"Yu Mincho Regular", "游明朝体", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.obj-cover img,.p-keyvisual img,.p-pickup__thumb img,.p-recommend__thumb img,.p-products__thumb img,.p-item__photo img,#about .blog_head_image img {
width: 100%;
height: 100%;
object-fit: cover
}
.obj-contain img,.p-item__preview img {
width: 100%;
height: 100%;
object-fit: contain
}
.c-contentblock {
display: flex;
justify-content: space-between
}
@media screen and (max-width: 767px) {
.c-contentblock {
flex-direction:column
}
}
@media screen and (min-width: 768px) {
.c-contentblock__headline,.c-contentblock__headline--large {
width:160px
}
.c-contentblock__headline .c-headline,.c-contentblock__headline--large .c-headline {
max-height: 240px
}
}
@media screen and (min-width: 768px) {
.c-contentblock__headline--large {
width:72px
}
}
@media screen and (min-width: 768px) {
.c-contentblock__main,.c-contentblock__main--large {
width:784px
}
}
@media screen and (min-width: 768px) {
.c-contentblock__main--large {
width:888px
}
}
.c-categorysmall {
display: flex
}
.c-categorysmall__item {
color: #EFB39C;
margin-right: 16px
}
.c-button,.c-button--right {
display: flex;
align-items: center
}
@media screen and (min-width: 768px) {
.c-button--right {
justify-content:flex-end
}
}
@media screen and (max-width: 767px) {
.c-button--right {
justify-content:center
}
}
.c-button__anchor {
min-width: 140px;
font-size: 16px;
border-radius: 20px;
padding: 7px;
text-align: center;
background: #EFB39C;
color: #fff
}
.c-headline {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
white-space: nowrap;
display: flex;
flex-direction: column;
justify-content: flex-end;
font-weight: normal;
line-height: 1
}
@media screen and (max-width: 767px) {
.c-headline {
margin:0 auto;
margin-bottom: 5vw
}
}
.c-headline__main {
font-size: 30px;
letter-spacing: 0.2em
}
@media screen and (max-width: 767px) {
.c-headline__main {
font-size:20px
}
}
.c-headline__sub {
font-size: 18px;
opacity: 0.5;
margin-top: 6px;
margin-right: 8px
}
@media screen and (max-width: 767px) {
.c-headline__sub {
font-size:10px;
margin-top: 3px;
margin-right: 4px
}
}
.c-headlineA {
border-radius: 0 16px 0 16px;
padding: 6px 16px;
position: relative;
overflow: hidden;
z-index: 10
}
.c-headlineA::before {
content: "";
width: 100%;
height: 100%;
background: #EFB39C;
opacity: 0.1;
z-index: -1;
position: absolute;
top: 0;
left: 0
}
.l-wrap {
font-size: 1rem
}
@media screen and (max-width: 767px) {
.l-header {
position:fixed;
top: 0;
left: 0;
z-index: 100
}
}
.l-nav {
height: inherit;
margin-left: auto
}
@media screen and (max-width: 767px) {
.l-nav {
padding:0 !important;
z-index: 100;
width: 80%;
height: calc(100vh - 64px);
position: fixed;
top: 64px;
right: 0;
transform: translate3d(100%, 0, 0)
}
.l-nav.is-active {
transform: translate3d(0, 0, 0);
box-shadow: 0 4px 8px rgba(0,0,0,0.3)
}
}
@media screen and (max-width: 767px) {
.l-nav--footer {
display:none
}
}
@media screen and (max-width: 767px) {
.l-main {
padding-top:80px
}
}
.l-section {
padding-top: 120px;
padding-bottom: 120px
}
@media screen and (max-width: 767px) {
.l-section {
padding-top:8vw;
padding-bottom: 8vw
}
}
.l-mainTop {
width: 100%;
height: 100vh
}
.l-pickup {
width: 100%;
max-width: 1400px;
margin: 0 auto 128px auto
}
@media screen and (max-width: 767px) {
.l-pickup {
margin:0 auto 32px auto
}
}
.l-inner,.p-header.is-home .p-header__inner {
max-width: 1000px;
margin: 0 auto
}
@media screen and (max-width: 767px) {
.l-inner,.p-header.is-home .p-header__inner {
padding-left:4vw;
padding-right: 4vw
}
}
.l-sideLeft {
width: 230px
}
.l-sideRight {
width: calc(100% - 230px)
}
@media screen and (max-width: 767px) {
.l-sideRight {
width:100%
}
}
.l-btnMore {
width: 240px;
line-height: 48px;
height: 48px
}
.l-footer {
margin-top: 64px
}
.l-detail {
width: 1200px;
margin: 0 auto;
padding: 64px
}
@media screen and (max-width: 767px) {
.l-detail {
width:100%;
padding: 0
}
}
.l-detail__main,.l-detail__info {
width: 50%
}
@media screen and (max-width: 767px) {
.l-detail__main,.l-detail__info {
width:100%
}
}
.l-shopReview {
width: 1200px;
margin: 0px auto 128px auto;
padding: 0 64px
}
@media screen and (max-width: 767px) {
.l-shopReview {
width:100%;
padding: 0 16px;
margin: 0 auto 32px auto
}
}
.l-ready {
text-align: center;
padding: 64px 0
}
.l-overlay {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 50
}
.p-header {
width: 100%;
height: 114px;
width: 100%;
background: #fff;
padding: 0 24px;
margin-bottom: 32px
}
@media screen and (max-width: 767px) {
.p-header {
width:100vw;
height: 64px;
padding: 0 4vw
}
}
.p-header .p-header__sitename {
font-weight: bold;
padding-top: 32px
}
@media screen and (max-width: 767px) {
.p-header .p-header__sitename {
padding-top:0
}
}
.p-header .p-header__sitename img {
width: auto;
height: auto;
max-height: 48px
}
@media screen and (max-width: 767px) {
.p-header .p-header__sitename img {
max-height:40px
}
}
.p-header.is-home {
height: 140px
}
.p-header.is-home .p-header__sitename {
padding-top: 40px
}
.p-header.is-home .p-header__sitename img {
max-height: 60px
}
.p-header.is-home .is-basemenu {
display: none
}
.p-header__inner {
width: 100%
}
@media screen and (min-width: 768px) {
.p-header__inner {
justify-content:space-between;
flex-wrap: wrap
}
}
@media screen and (max-width: 767px) {
.p-header__inner {
height:inherit;
align-items: center
}
}
.p-nav {
display: flex;
height: inherit
}
@media screen and (min-width: 768px) {
.p-nav {
padding-top:32px
}
}
@media screen and (max-width: 767px) {
.p-nav {
height:100%;
flex-direction: column;
background: #f9f9f9;
overflow-y: scroll;
-webkit-overflow-scrolling: touch
}
}
.p-nav__item {
position: relative;
min-width: 22px;
overflow: visible
}
@media screen and (min-width: 768px) {
.p-nav__item {
margin-left:32px;
height: inherit
}
}
@media screen and (max-width: 767px) {
.p-nav__item:last-child {
padding-bottom:88px
}
}
@media screen and (min-width: 768px) {
.p-nav__item>a {
display:inline-block;
position: relative;
z-index: 10;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
white-space: nowrap
}
.p-nav__item>a::before {
content: "";
width: 100%;
height: 120%;
background: #fff;
position: absolute;
top: -10%;
left: 0;
display: block;
z-index: -1;
border-radius: 10px
}
}
@media screen and (max-width: 767px) {
.p-nav__item>a {
padding:10px 16px;
border-bottom: 1px solid rgba(0,0,0,0.1)
}
}
.p-nav__item .p-nav__item__hover {
display: none
}
@media screen and (min-width: 768px) {
.p-nav__item .p-nav__item__hover {
box-shadow:0px 0px 6px rgba(0,0,0,0.2)
}
}
@media screen and (max-width: 767px) {
.p-nav__item .p-nav__item__hover {
display:block
}
}
@media screen and (min-width: 768px) {
.p-nav__item:hover .p-nav__item__hover {
background:#fff;
position: absolute;
top: auto;
left: 0;
display: block;
z-index: 15;
border-radius: 10px;
overflow-x: auto;
overflow-y: auto
}
}
.p-products__body h3 {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
.p-hamburger {
width: 64px;
height: 64px;
position: absolute;
top: 0;
right: 0;
cursor: pointer
}
.p-hamburger p {
content: "";
display: block;
width: 24px;
height: 1px;
position: absolute;
left: 20px;
transition: all .4s ease;
top: 50%
}
.p-hamburger p::before,.p-hamburger p::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #6A5249;
transition: transform 0.3s ease, margin-top 0.3s ease 0.3s
}
.p-hamburger p::before {
margin-top: -6px
}
.p-hamburger p::after {
margin-top: 6px
}
.p-hamburger.is-active p::before,.p-hamburger.is-active p::after {
margin-top: 0;
transition: margin-top 0.3s ease, transform 0.3s ease 0.3s
}
.p-hamburger.is-active p:before {
transform: rotate(45deg)
}
.p-hamburger.is-active p:after {
transform: rotate(-45deg)
}
.p-subheadline {
font-size: 1.42857rem;
font-size: 1.25rem;
text-align: center;
border-top: 1px solid #6A5249;
border-bottom: 1px solid #6A5249;
padding: 16px;
margin: 0 24px 24px 24px
}
.p-smallCategory {
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 24px
}
.p-smallCategory a {
border: 1px solid #6A5249;
padding: 2px 4px;
margin: 0 8px 4px 8px
}
@media screen and (max-width: 767px) {
.p-smallCategory {
justify-content:flex-start
}
}
.p-footer {
position: relative;
z-index: 10
}
.p-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #EFB39C;
opacity: 0.1
}
.p-footer .p-nav {
padding-top: 0;
display: flex;
justify-content: center
}
.p-footer .p-nav .p-nav__item a {
font-size: 18px
}
.p-footer .p-nav .p-nav__item a::before {
display: none
}
.p-footer .p-nav__item:hover .p-nav__item__hover {
bottom: 100%;
left: 0;
right: auto;
max-width: 50vw;
overflow-x: auto
}
.p-footer__information {
background: #EFB39C;
color: #fff;
padding: 16px;
align-items: center;
display: flex
}
@media screen and (max-width: 767px) {
.p-footer__information {
flex-direction:column;
padding-bottom: 17vw;
padding-top: 10vw
}
}
.p-footer__information .p-footer__copyright {
display: flex
}
@media screen and (max-width: 767px) {
.p-footer__information .p-footer__copyright {
flex-direction:column;
text-align: center;
line-height: 32px;
margin-top: 16px
}
}
.p-footer__information .p-footer__link {
font-size: .85714rem;
margin: 0 8px
}
.p-keyvisual {
width: 100%;
height: 600px;
border-radius: 32px;
overflow: hidden;
margin-bottom: 120px
}
@media screen and (max-width: 767px) {
.p-keyvisual {
width:100%;
height: 40vh;
border-radius: 10vw;
margin-bottom: 10vw
}
}
.p-pickup {
padding-top: 0 !important
}
.p-pickup .slick-dots {
width: 10px;
bottom: 0;
left: -56px;
z-index: 10
}
@media screen and (max-width: 767px) {
.p-pickup .slick-dots {
left:0
}
}
.p-pickup .slick-dots li {
width: 10px;
height: 10px;
display: block;
margin: 6px 0
}
.p-pickup .slick-dots li button {
width: inherit;
height: inherit;
padding: 0
}
.p-pickup .slick-dots li button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
line-height: 1;
opacity: .25;
background: #EFB39C
}
.p-pickup .slick-dots li.slick-active button::before {
opacity: 1
}
@media screen and (min-width: 768px) {
.p-pickup__contents {
width:776px
}
}
.p-pickup__item {
display: flex;
justify-content: space-between
}
@media screen and (min-width: 768px) {
.p-pickup__item {
align-items:center
}
}
@media screen and (max-width: 767px) {
.p-pickup__item {
flex-direction:column
}
}
.p-pickup__thumb {
width: 320px;
height: 240px;
border-radius: 32px;
overflow: hidden
}
@media screen and (max-width: 767px) {
.p-pickup__thumb {
width:100%;
height: 56vw;
border-radius: 10vw;
margin-bottom: 4vw
}
}
@media screen and (min-width: 768px) {
.p-pickup__body {
width:400px
}
}
@media screen and (max-width: 767px) {
.p-pickup__body {
text-align:center
}
}
.p-recommend {
position: relative;
z-index: 10
}
.p-recommend::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #EFB39C;
opacity: 0.1
}
.p-recommend__contents {
display: flex;
justify-content: space-between
}
@media screen and (max-width: 767px) {
.p-recommend__contents {
flex-direction:column
}
}
@media screen and (min-width: 768px) {
.p-recommend__item {
width:280px
}
}
@media screen and (max-width: 767px) {
.p-recommend__item {
margin-bottom:4vw;
text-align: center
}
}
.p-recommend__thumb {
width: 280px;
height: 210px;
border-radius: 28px;
overflow: hidden
}
@media screen and (max-width: 767px) {
.p-recommend__thumb {
width:100%;
height: 56vw;
border-radius: 10vw
}
}
.p-news {
border-bottom: 1px solid #EFB39C
}
.p-news__contents {
display: flex;
flex-wrap: wrap
}
.p-news__item {
width: 280px;
margin-right: 24px;
padding: 32px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
border-radius: 0px 28px 0px 28px
}
@media screen and (max-width: 767px) {
.p-news__item {
width:100%;
margin-right: 0;
padding: 4vw;
margin-bottom: 4vw
}
}
.p-news__item:nth-child(3n) {
margin-right: 0
}
.p-categoy__title {
font-size: 14px;
border-radius: 0px 12px 0px 12px;
height: 32px;
line-height: 32px;
padding: 0 16px;
font-weight: normal;
overflow: hidden;
position: relative;
z-index: 10
}
.p-categoy__title::before {
content: "";
width: 100%;
height: 100%;
background: #EFB39C;
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
z-index: -1
}
.p-menu {
width: 400px;
height: inherit;
padding: 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center
}
.p-menu__sitename {
font-size: 2.85714rem;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center
}
.p-menu__sitename img {
width: auto;
height: auto;
max-height: 64px
}
.p-menu__nav {
text-align: center;
padding: 48px 0
}
.p-menu__nav .p-menu__nav__list__item {
position: relative
}
.p-menu__nav .p-menu__nav__list__item a {
font-size: 1.14286rem;
font-family: 'Georgia', serif;
padding: 16px 0
}
.p-menu__nav .p-menu__nav__list__item .p-menu__nav__list__item__hover {
display: none
}
.p-menu__nav .p-menu__nav__list__item:hover .p-menu__nav__list__item__hover {
width: 230px;
border: 1px solid #6A5249;
background: #fff;
position: absolute;
top: 0;
right: 80%;
display: block;
z-index: 1
}
@media screen and (max-width: 767px) {
.p-menu__nav__icon {
padding-left:16px;
padding-right: 16px;
align-items: center;
justify-content: center
}
}
.p-menu__nav__icon__item {
padding: 16px 0
}
.p-menu__nav__icon__item a {
width: 32px;
height: 32px;
margin: 0 8px;
background-color: #fff;
border-radius: 16px;
padding: 4px 6px 0 6px
}
.p-menu__nav__icon__item img {
opacity: 0.6
}
.p-menu__scroll {
width: 48px;
height: 48px;
cursor: pointer
}
.p-menu__scroll p {
width: 24px;
height: 24px;
border-bottom: 1px solid #6A5249;
border-right: 1px solid #6A5249;
transform: rotate(45deg);
margin: 4px auto 0 auto
}
.p-search,.p-search--header {
border: 1px solid #6A5249;
border-radius: 7px;
overflow: hidden
}
@media screen and (min-width: 768px) {
.p-search,.p-search--header {
max-width:320px
}
}
@media screen and (max-width: 767px) {
.p-search--header {
margin:16px;
background: #fff;
overflow: visible
}
}
.p-search__form {
width: 100%;
display: flex;
padding: 4px;
background: #fff
}
@media screen and (max-width: 767px) {
.p-search__form {
align-items:center;
background: none
}
}
.p-search__input {
padding: 0 8px;
width: calc(100% - 24px)
}
.p-search__submit {
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
display: block;
border-radius: 6px
}
.p-search__submit img {
width: 15px;
vertical-align: sub
}
.p-products__list {
display: flex;
flex-wrap: wrap
}
.p-products__item {
width: 240px;
margin-right: 32px;
margin-bottom: 40px;
position: relative
}
.p-products__item:nth-child(3n) {
margin-right: 0
}
.p-products__item:nth-last-child(-n+3) {
margin-bottom: 0
}
@media screen and (max-width: 767px) {
.p-products__item {
text-align:center;
width: 100%;
margin-right: 0;
margin-bottom: 8vw
}
.p-products__item:nth-last-child(-n+3) {
margin-bottom: 8vw
}
}
.p-products__thumb {
width: 240px;
/* height: 180px; */
height: auto;
/* border-radius: 24px; */
/* overflow: hidden */
}
@media screen and (max-width: 767px) {
.p-products__thumb {
width:100%;
/* height: 56vw; */
height: auto;
/* border-radius: 10vw */
}
}
.p-products__label {
position: absolute;
width: 88px;
top: -24px;
left: -24px
}
@media screen and (max-width: 767px) {
.p-products__label {
top:-4vw;
left: -4vw;
width: 70px
}
}
.p-price {
color: #EF9C9C;
display: flex;
flex-wrap: wrap;
align-items: center
}
.p-price__rate,.p-price__rate--soldout {
background: #EF9C9C;
color: #fff;
border-radius: 6px;
line-height: 1.4;
padding: 0 8px
}
.p-price__proper {
color: rgba(0,0,0,0.3);
margin-right: 8px;
text-decoration: line-through
}
.p-price__rate--soldout {
background: rgba(0,0,0,0.2)
}
.p-price__num,.p-price__num--soldout,.p-price__num--per {
margin-right: 12px
}
.p-price__num--soldout {
color: rgba(0,0,0,0.3)
}
.p-price__num--per {
text-decoration: line-through
}
.lb-image {
font-family: none
}
.p-about__text {
padding: 64px 0;
margin: 0 auto
}
@media screen and (max-width: 767px) {
.p-about__text {
width:100%;
padding: 32px 0
}
}
@media screen and (max-width: 767px) {
.p-item {
padding-top:0 !important
}
}
.p-item__title {
margin-bottom: 8px
}
.p-item__price {
margin-bottom: 8px
}
.p-item__block {
position: relative;
display: flex
}
@media screen and (min-width: 768px) {
.p-item__block {
justify-content:space-between
}
}
@media screen and (max-width: 767px) {
.p-item__block {
flex-direction:column-reverse
}
}
@media screen and (min-width: 768px) {
.p-item__addcart {
width:288px
}
}
@media screen and (min-width: 768px) {
.p-item__details {
width:680px
}
}
.p-item__preview {
width: 100%;
height: 360px;
border-radius: 14px;
overflow: hidden
}
.p-item__preview a {
width: inherit;
height: inherit
}
@media screen and (max-width: 767px) {
.p-item__preview {
width:100%;
height: 80vw;
margin-bottom: 2vw
}
}
.p-item__photos {
display: flex;
flex-wrap: wrap;
margin-top: 16px
}
@media screen and (max-width: 767px) {
.p-item__photos {
margin-top:4vw
}
}
.p-item__photo {
width: calc((100% - 4px * 9) / 10);
height: 54px;
margin-bottom: 4px;
margin-right: 4px;
cursor: pointer;
overflow: hidden
}
@media screen and (max-width: 767px) {
.p-item__photo {
width:calc((100% - 2vw * 9) / 10);
height: 8vw;
margin-right: 2vw !important;
margin-bottom: 2vw
}
}
.p-item__photo:nth-child(10n) {
margin-right: 0
}
@media screen and (max-width: 767px) {
.p-item__photo:nth-child(10n) {
margin-right:0 !important
}
}
.p-item__photo.is-active {
opacity: 0.5
}
.p-item__label {
max-width: 80px;
margin-bottom: 8px
}
.p-item__body {
margin: 32px 0
}
.p-item__buttons {
display: flex;
flex-wrap: wrap;
text-align: center;
align-items: center
}
@media screen and (max-width: 767px) {
.p-item__buttons {
margin-bottom:4vw
}
}
.p-item__buttons #twitter-widget-0 {
position: relative;
top: 2px
}
.p-item__buttons .widgetLink {
display: inline-block;
background: rgba(0,0,0,0.4);
color: #fff;
padding: 0 8px;
border-radius: 4px
}
@media screen and (max-width: 767px) {
.p-item__buttons .widgetLink {
display:block
}
}
.p-item__button {
height: 22px;
margin-right: 8px
}
.p-item__note {
margin-top: 24px;
font-size: .85714rem
}
.p-detail {
justify-content: center;
align-items: flex-start;
position: relative
}
@media screen and (max-width: 767px) {
.p-detail {
flex-direction:column
}
}
.p-detail__main {
position: relative
}
.p-detail__main__photo {
position: relative
}
.p-detail__main__photo .p-detail__main__photo__img {
width: 536px;
height: 536px;
object-fit: cover
}
@media screen and (max-width: 767px) {
.p-detail__main__photo .p-detail__main__photo__img {
width:100vw;
height: 100vw
}
}
.p-detail__main__photo__prev,.p-detail__main__photo__next {
width: 32px;
height: 32px;
background: rgba(255,255,255,0.5);
display: none
}
.p-detail__main__photo__prev:before,.p-detail__main__photo__next:before {
content: "";
display: block;
width: 9px;
height: 9px;
border-top: 2px solid #000;
border-right: 2px solid #000;
margin-top: 11px
}
.p-detail__main__photo__prev:before {
transform: rotate(-135deg);
margin-left: 11px
}
@media screen and (max-width: 767px) {
.p-detail__main__photo__prev {
left:0
}
}
.p-detail__main__photo__next:before {
transform: rotate(45deg);
margin-left: 8px
}
@media screen and (max-width: 767px) {
.p-detail__main__photo__next {
right:0
}
}
.p-detail__main__list {
width: 100%;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 4px 0
}
.p-detail__main__list .p-detail__main__list__item {
width: 10%;
padding-right: 4px;
margin-bottom: 4px;
position: relative
}
.p-detail__main__list .p-detail__main__list__item:nth-child(10n) {
padding-right: 0
}
.p-detail__main__list .p-detail__main__list__item.js-active a {
position: relative
}
.p-detail__main__list .p-detail__main__list__item.js-active a:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 2px solid #000;
box-sizing: border-box
}
@media screen and (max-width: 767px) {
.p-detail__main__list .p-detail__main__list__item {
width:20vw;
padding-left: 4px
}
.p-detail__main__list .p-detail__main__list__item:nth-child(5n) {
padding-right: 4px
}
.p-detail__main__list .p-detail__main__list__item:nth-child(10n) {
padding-right: 4px
}
}
.p-detail__main__list .p-detail__main__list__img {
height: 50px;
object-fit: cover
}
@media screen and (max-width: 767px) {
.p-detail__main__list .p-detail__main__list__img {
height:calc(20vw - 4px)
}
}
.p-detail__main__desc {
margin: 32px 0
}
@media screen and (max-width: 767px) {
.p-detail__main__desc {
margin:8px 16px
}
}
.p-btnIllegal a {
width: 80px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 11px;
color: #fff;
background: #ddd;
margin-left: auto
}
@media screen and (max-width: 767px) {
.p-btnIllegal a {
margin-right:16px
}
}
.p-detail__info {
margin-left: 64px;
position: sticky;
position: -webkit-sticky;
top: 128px;
z-index: 1
}
@media screen and (max-width: 767px) {
.p-detail__info {
margin-left:0;
padding: 16px
}
}
.p-detail__info__main__title {
font-size: 1rem
}
.p-detail__info__main__price {
margin: 8px 0 32px 0
}
.p-detail__info__main__price .p-detail__info__main__price__normal {
font-size: 1.42857rem;
font-weight: bold
}
.p-detail__info__main__price .p-detail__info__main__price__discount {
color: #aaa;
font-size: 1.14286rem;
font-weight: bold;
text-decoration: line-through;
display: block
}
.p-detail__info__main__price .p-detail__info__main__price__rate {
width: 64px;
padding: 2px;
text-align: center;
color: #fff;
background: #e53935;
margin-right: 8px;
display: inline-block
}
.p-detail__info__main__price .p-detail__info__main__price__cale {
color: #e53935;
font-size: 1.42857rem;
font-weight: bold;
display: inline-block
}
.p-detail__info__main__price .p-detail__info__main__soldout {
color: #EF9C9C;
margin-right: 8px;
font-weight: bold
}
.p-detail__info__main__price .p-detail__info__main__soldoutPrice {
color: #aaa;
font-size: 1.42857rem;
font-weight: bold;
text-decoration: line-through
}
.p-detail__info__main__attention {
font-size: .85714rem;
border-bottom: 1px solid #000;
margin-bottom: 32px;
padding-bottom: 32px;
position: relative;
display: flex;
justify-content: flex-start;
align-items: center
}
.p-detail__info__main__attention__label {
width: 70px;
height: 70px;
position: absolute;
top: -16px;
left: -16px;
z-index: 3
}
.p-btnBuy {
width: 240px;
height: 48px;
line-height: 48px;
text-align: center;
color: #fff;
font-weight: bold;
background: #EFB39C;
margin-top: 16px;
border-radius: 24px;
cursor: pointer;
font-size: 1.42857rem;
font-family: 'Crimson Text',"Yu Mincho Regular", "游明朝体", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif
}
@media screen and (max-width: 767px) {
.p-btnBuy {
width:calc(100% - 32px);
margin: 16px auto;
display: block
}
}
.p-detail__info__sub {
border-top: 1px solid #000;
margin-top: 32px;
padding-top: 32px
}
.p-detail__info__sub .p-detail__info__sub__list__item {
margin-right: 8px;
min-width: 72px
}
.p-btnShare {
width: 120px;
height: 24px;
line-height: 24px;
color: #fff;
text-align: center;
position: relative;
cursor: pointer
}
.p-btnShare--t {
background: #1b95e0
}
.p-btnShare--t i {
position: relative;
top: 2px;
display: inline-block;
width: 14px;
height: 14px;
background: transparent 0 0 no-repeat;
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg…-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E)
}
.p-btnShare--f {
background: #4267b2
}
a:hover {
opacity: 0.8
}
@media screen and (max-width: 767px) {
a:hover {
opacity:1
}
}
.u-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.u-btnBuy--noItem {
color: #333;
font-weight: normal;
font-size: .85714rem;
border: 1px solid #6A5249;
background: #fff;
color: #6A5249
}
.u-wideinner--related {
margin: 0 auto -64px auto
}
@media screen and (max-width: 767px) {
.u-recommend .p-products__item:nth-child(odd),.u-recommend .p-products__item:nth-child(even),.u-recommend .p-products__item:nth-child(3n) {
width:100%;
margin-left: 0;
margin-right: 0
}
}
.u-recommend .p-products__item__photo {
width: 270px;
height: 270px
}
.u-sp {
display: none
}
@media screen and (max-width: 767px) {
.u-sp {
display:block
}
}
@media screen and (max-width: 767px) {
.u-pc {
display:none
}
}
.u-font16 {
font-size: 16px
}
.u-font18 {
font-size: 18px
}
.u-font20 {
font-size: 20px
}
.u-mb8 {
margin-bottom: 8px
}
@media screen and (max-width: 767px) {
.u-mb8 {
margin-bottom:1vw
}
}
.u-mb16 {
margin-bottom: 16px
}
@media screen and (max-width: 767px) {
.u-mb16 {
margin-bottom:2vw
}
}
.u-mb24 {
margin-bottom: 24px
}
@media screen and (max-width: 767px) {
.u-mb24 {
margin-bottom:3vw
}
}
.u-mb32 {
margin-bottom: 32px
}
@media screen and (max-width: 767px) {
.u-mb32 {
margin-bottom:4vw
}
}
.u-mb40 {
margin-bottom: 40px
}
@media screen and (max-width: 767px) {
.u-mb40 {
margin-bottom:vw
}
}
.u-fontno {
font-weight: normal
}
.u-colorMain {
color: #EFB39C
}
#baseMenu {
position: static
}
#baseMenu>ul>li {
float: none;
margin: 0
}
#baseMenu>ul>li a,#baseMenu>ul>li a:hover {
background: transparent;
box-shadow: none;
margin: 0;
padding: 0;
width: 32px;
height: 32px;
background-color: #fff;
border-radius: 16px;
padding: 4px 6px 0 6px
}
#baseMenu ul {
display: flex;
justify-content: center;
align-items: center
}
@media screen and (max-width: 767px) {
#baseMenu li {
margin:0 8px !important
}
}
#baseMenu li:last-child {
margin-left: 16px
}
@media screen and (max-width: 767px) {
#baseMenu li:last-child {
margin-left:0
}
}
#baseMenu img {
width: 100%
}
#appsItemCategoryTag .appsItemCategoryTag_child {
padding: 8px;
border-bottom: 1px solid #dbdbdb
}
#appsItemCategoryTag .appsItemCategoryTag_child>a {
min-width: 30px
}
#appsItemCategoryTag .appsItemCategoryTag_child>a:before {
content: "-";
display: inline-block
}
#appsItemCategoryTag .appsItemCategoryTag_lowerchild {
padding: 8px
}
#appsItemCategoryTag .appsItemCategoryTag_lowerchild li {
padding: 4px
}
#appsItemCategoryTag .appsItemCategoryTag_lowerchild li>a:before {
content: "-";
display: inline-block
}
.p-categoy #appsItemCategoryTag .appsItemCategoryTag_child {
position: relative;
padding: 0
}
.p-categoy #appsItemCategoryTag .appsItemCategoryTag_child::after {
content: "";
width: 100%;
height: 1px;
background: #6A5249;
position: absolute;
bottom: 0;
opacity: 0.2
}
.p-categoy #appsItemCategoryTag .appsItemCategoryTag_child>a {
padding: 8px
}
.p-categoy #appsItemCategoryTag .appsItemCategoryTag_child>a:before {
margin-bottom: 0;
display: none
}
.p-categoy #appsItemCategoryTag .appsItemCategoryTag_lowerchild {
padding: 0
}
.p-categoy #appsItemCategoryTag .appsItemCategoryTag_lowerchild li {
padding: 0
}
.p-categoy #appsItemCategoryTag .appsItemCategoryTag_lowerchild li>a {
position: relative;
z-index: 10;
padding: 8px
}
.p-categoy #appsItemCategoryTag .appsItemCategoryTag_lowerchild li>a::after {
content: "";
width: 100%;
height: 100%;
background: #6A5249;
opacity: 0.1;
position: absolute;
top: 0;
left: 0;
z-index: -1
}
nav #appsItemCategoryTag {
width: 100%
}
@media screen and (min-width: 768px) {
nav #appsItemCategoryTag {
width:160px
}
}
@media screen and (max-width: 767px) {
nav #appsItemCategoryTag {
border-bottom:1px solid rgba(0,0,0,0.1)
}
}
nav #appsItemCategoryTag .appsItemCategoryTag_child a {
font-size: 1rem
}
@media screen and (max-width: 767px) {
nav #appsItemCategoryTag .appsItemCategoryTag_child a {
padding:10px 16px
}
}
@media screen and (max-width: 767px) {
nav #appsItemCategoryTag .appsItemCategoryTag_child {
background:#fff;
padding: 8px 4px
}
}
.p-menu #appsItemCategoryTag {
text-align: left;
padding-left: 8px;
max-height: 400px;
overflow: auto;
-webkit-overflow-scrolling: touch
}
#about {
display: flex;
flex-wrap: wrap
}
#about .blog_inner {
width: 372px;
margin-right: 40px;
margin-bottom: 40px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
border-radius: 0 48px 0 48px;
padding: 46px !important
}
@media screen and (max-width: 767px) {
#about .blog_inner {
width:100%;
margin-right: 0;
padding: 4vw;
border-radius: 0 7vw 0 7vw
}
#about .blog_inner iframe {
width: 100%;
height: 51vw
}
}
#about .blog_inner:nth-child(2n) {
margin-right: 0
}
#about .blog_title h2 {
font-size: 1.28571rem;
font-weight: normal
}
#about .blog_publish {
font-size: .85714rem;
color: #EFB39C
}
#about .blog_head_image {
margin-top: 16px;
max-width: 100%;
max-height: 210px;
overflow: hidden
}
#about .blog_head_image a {
width: inherit;
height: inherit;
overflow: inherit
}
#about .blog_contents {
margin-top: 16px
}
#about .paginate-wrp {
width: 100%
}
.main #about>.blog_inner .blog_contents {
height: auto !important
}
.main #about>.blog_inner .blog_contents .read_more {
margin-top: 8px
}
.main #about>.blog_inner .blog_contents .read_more a {
text-decoration: underline
}
.main #about.blogDetail>.blog_inner {
border-bottom: 0;
width: 100%;
margin-right: 0;
margin-bottom: 0;
box-shadow: 0 0 0 rgba(0,0,0,0);
border-radius: 0;
padding: 0 !important
}
.main #about .social {
margin-top: 64px !important;
margin-bottom: -64px !important
}
.main #about .blog_contents .social img {
width: 32px;
margin: 0 16px;
opacity: 0.8
}
.paginate li {
margin: 0 4px !important;
float: none !important;
border: none !important;
background: transparent !important
}
.paginate a {
float: none;
padding: 0
}
.paginate {
width: 100%;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center
}
.paginate li {
margin: 0 4px !important;
float: none !important;
border: none !important;
background: transparent !important
}
.paginate li a {
float: none !important;
color: #6A5249 !important;
padding: 0px 12px !important;
font-weight: normal !important;
background: #fff !important;
font-size: 1.14286rem !important;
min-width: 48px;
height: 48px;
line-height: 48px;
text-align: center
}
.paginate li.current a {
color: #aaa !important;
border: none !important
}
.paginate li:not(.current) a {
border: 1px solid #ddd !important
}
#i18 {
display: flex;
justify-content: center;
align-items: center;
position: relative
}
#i18 .select-dropdown {
display: none
}
#i18 .input.select {
width: 80px;
margin: 0 8px;
position: relative
}
#i18 .input.select:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 4px 0 4px;
border-color: #6A5249 transparent transparent transparent;
position: absolute;
right: 8px;
top: 50%;
margin-top: -6px
}
#i18 .input.select select {
width: 100%;
height: 100%;
text-indent: 8px;
background: #fff
}
#itemSelect select {
width: 100px;
height: 32px;
line-height: inherit;
text-indent: 8px;
background: url("https://basefile.akamaized.net/magnet-official-ec/5c7f51c7406f0/select.png") no-repeat,#fff;
background-size: 8px auto;
background-position: center right 10px;
background-position-x: 93%;
background-position-y: 50%;
border: 1px solid #ddd;
margin: 8px;
appearance: none;
-webkit-appearance: none
}
#irContainer {
position: fixed;
top: 64px !important
}
#irContainer select {
line-height: 24px
}
#irContainer .btn.btn-danger {
height: 32px;
line-height: 26px
}
#widget {
margin: 0 !important
}
#widgetLoading img {
width: auto
}
#selectWidgetSize {
height: 32px !important;
line-height: 32px !important;
padding: 0 !important;
border: 1px solid #ddd !important;
text-indent: 8px !important;
appearance: menulist !important;
-webkit-appearance: menulist !important
}
#inquiryCompleteSection a {
width: 240px;
height: 56px;
line-height: 56px;
background: #6A5249;
color: #fff;
display: block;
font-size: 1.14286rem;
text-align: center;
margin: 32px 0;
cursor: pointer;
border-radius: 28px
}
@media screen and (max-width: 767px) {
#inquiryCompleteSection a {
margin-left:auto;
margin-right: auto
}
}
#privacy,#law {
width: 100%;
padding: 16px;
background: none
}
#privacy img,#law img {
background-color: #fff;
width: auto
}
.inquirySection h1 {
display: none
}
.inquirySection dt {
margin-top: 16px;
margin-bottom: 4px
}
.inquirySection dd input {
width: 100%;
background: #fff;
border: 1px solid #ddd;
padding: 8px;
border-radius: 4px
}
.inquirySection dd textarea {
width: 100%;
height: 200px;
background: #fff;
border: 1px solid #ddd;
padding: 8px;
resize: vertical;
border-radius: 4px
}
.inquirySection .error {
color: #EF9C9C;
font-size: .85714rem
}
.inquirySection #buttonLeave {
width: 240px;
height: 56px;
background: #6A5249;
color: #fff;
display: block;
font-size: 1.42857rem;
margin: 32px 0;
cursor: pointer;
border-radius: 28px
}
@media screen and (max-width: 767px) {
.inquirySection #buttonLeave {
margin-left:auto;
margin-right: auto
}
}
#inquiryConfirmSection dd {
border-bottom: 1px solid #6A5249;
padding-bottom: 8px
}
#law img {
width: initial
}
#x_reviewAccordion img {
width: initial
}
#x_reviewAccordion .review01__list {
overflow-y: auto !important
}
.NoItemInquiry {
padding-top: 16px
}
.msg_startButton {
background-color: #000!important;
}
.msg_startButton > span {
color: #fff!important;
}
.p-products__thumb {
height: auto;
}