@charset "UTF-8";
/* =====================
Custom properties
===================== */
:root {
--black: #111;
--red: #b6002a;
--orange: #c6580c;
--smoke: #7b7b7b;
--gray: #1a1717;
--mouse: #262323;
--yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
--yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
--author: 'Yuji Syuku', system-ui;
--icon-mail: url('data:image/svg+xml;utf8,');
--icon-blank: url('data:image/svg+xml;utf8,');
--icon-instagram: url('data:image/svg+xml;utf8,');
--icon-x: url('data:image/svg+xml;utf8,');
--icon-site: url('data:image/svg+xml;utf8,');
--icon-facebook: url('data:image/svg+xml;utf8,');
--icon-youtube: url('data:image/svg+xml;utf8,');
--icon-arrow: url('data:image/svg+xml;utf8,');
--title: 'Oswald', serif;
--inner: 1120px;
--header-height: 100px;
/* ==== アニメーション easing関数 ==== */
--easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
--easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
--easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
--easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
--easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
--easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
--slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
}
@media not all and (width >= 768px) {
:root {
--inner: 100%;
--header-height: calc((100 / 750) * 120 * 1vw);
}
}
/* =====================
animation
===================== */
@keyframes marquee {
100% {
translate: -100%;
}
}
@keyframes show-up-text {
0% {
opacity: 0;
translate: 0 100%;
}
100% {
opacity: 1;
translate: 0 0%;
}
}
@layer style {
html,
body {
font-family: var(--yugo);
font-weight: 500;
line-height: 1.8;
color: var(--black);
}
@media not all and (width >= 768px) {
html,
body {
font-weight: normal;
}
}
@media print, screen and (width >= 768px) {
body {
min-inline-size: 1300px;
}
.sp {
display: none;
}
}
@media not all and (width >= 768px) {
.pc {
display: none;
}
}
main {
min-block-size: 70svh;
}
/* p */
p {
font-weight: 500;
line-height: 2.12;
@media not all and (width >=768px) {
font-size: calc((100 / 750) * 26 * 1vw);
}
}
/* =====================
hover
===================== */
@media (any-hover: hover) {
.hover-op {
transition: opacity 250ms ease 0s;
will-change: opacity;
&:hover {
opacity: 0.6;
}
}
}
/* =====================
utility
===================== */
.mincho {
font-family: var(--mincho);
}
.fwb {
font-weight: bold;
}
.tac {
text-align: center;
}
[lang='en'] {
word-break: break-all;
}
[data-type='uppercase'] {
text-transform: uppercase;
letter-spacing: unset;
}
.u-inner {
inline-size: 100%;
max-inline-size: var(--inner);
margin-inline: auto;
transition: inline-size 250ms ease 0s;
@media not all and (width >= 1000px) {
inline-size: 100%;
padding-inline: 40px;
margin-inline: 0;
}
@media not all and (width >= 768px) {
inline-size: var(--inner);
padding-inline: unset;
margin-inline: auto;
}
}
/* =====================
lenis
===================== */
html.lenis {
block-size: auto;
& body {
block-size: inherit;
}
&.lenis-smooth {
scroll-behavior: auto !important;
&[data-lenis-prevent] {
overscroll-behavior: contain;
}
}
&.lenis-stopped {
overflow: hidden;
& iframe {
pointer-events: none;
}
}
}
/* =====================
u-head
===================== */
.u-head {
display: grid;
gap: 23px;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 27 * 1vw);
}
& span[lang='en'] {
position: relative;
display: grid;
gap: 18px;
font-family: var(--title);
font-size: 78px;
font-weight: 600;
line-height: 1;
@media print, screen and (width >=768px) {
&[nowrap] {
white-space: nowrap;
}
}
@media not all and (width >=768px) {
justify-content: center;
font-size: calc((100 / 750) * 74 * 1vw);
}
&::after {
display: block;
inline-size: 30px;
height: 1px;
content: '';
background: var(--orange);
}
@media not all and (width >=768px) {
&::after {
inline-size: calc((100 / 750) * 60 * 1vw);
margin-inline: auto;
}
}
}
& :where(h1, h2) {
font-family: var(--yumin);
font-size: 16px;
font-weight: 600;
line-height: 1;
letter-spacing: 1.6px;
@media not all and (width >=768px) {
font-size: calc((100 / 750) * 26 * 1vw);
text-align: center;
}
}
&[data-type='center'] {
justify-content: center;
text-align: center;
& span[lang='en']::after {
margin-inline: auto;
}
}
/* ==== small ==== */
&[data-size='small'] {
position: relative;
& span[lang='en'] {
justify-content: flex-start;
font-size: 50px;
&::after {
display: none;
}
@media not all and (width >= 768px) {
font-size: calc((100 / 750) * 40 * 1vw);
}
}
& h2 {
display: grid;
grid-auto-flow: column;
gap: 16px;
align-items: center;
justify-content: flex-start;
font-size: 18px;
@media not all and (width >= 768px) {
gap: calc((100 / 750) * 20 * 1vw);
font-size: calc((100 / 750) * 26 * 1vw);
}
&::before {
display: block;
inline-size: 30px;
height: 1px;
content: '';
background: var(--orange);
}
@media not all and (width >=768px) {
&::before {
inline-size: calc((100 / 750) * 60 * 1vw);
margin-inline: auto;
}
}
}
}
}
/* =====================
u-anchor
===================== */
.u-anchor {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: center;
justify-content: center;
inline-size: fit-content;
padding-block: 22px;
padding-inline: 50px;
font-size: 16px;
font-weight: bold;
line-height: 1;
color: var(--black);
background: white;
border-radius: calc(infinity * 1px);
transition: background 250ms ease 0s;
&[data-color='black'] {
color: white;
background: var(--black);
}
&[data-color='orange'] {
color: white;
background: var(--orange);
}
@media not all and (width >=768px) {
gap: calc((100 / 750) * 24 * 1vw);
padding-block: calc((100 / 750) * 35 * 1vw);
padding-inline: calc((100 / 750) * 60 * 1vw);
font-size: calc((100 / 750) * 24 * 1vw);
}
&::after {
inline-size: 12px;
aspect-ratio: 1 / 1;
content: '';
background-color: currentcolor;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
transition: translate 250ms ease 0s;
}
@media not all and (width >=768px) {
&::after {
inline-size: calc((100 / 750) * 18 * 1vw);
}
}
&:is([target='_blank']) {
&::after {
inline-size: 13px;
mask-image: var(--icon-blank);
}
}
@media (any-hover: hover) {
&:hover {
color: white;
background: var(--black);
&::after {
translate: 2px -2px;
}
}
}
}
/* =====================
u-narrow
===================== */
.u-narrow {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: center;
margin-block: 60px;
@media not all and (width >= 768px) {
gap: calc((100 / 750) * 12 * 1vw) calc((100 / 750) * 20 * 1vw);
justify-content: flex-start;
padding: 1em 1.25em;
margin-block: calc((100 / 750) * 40 * 1vw);
background: #d5d3d35e;
border-radius: calc((100 / 750) * 8 * 1vw);
}
& form {
position: absolute;
inset: 0;
z-index: -1;
}
& select {
max-inline-size: 200px;
padding-block: 20px;
padding-inline: 20px 7px;
font-family: inherit;
font-size: 16px;
font-weight: inherit;
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
@media not all and (width >= 768px) {
max-inline-size: 36vw;
padding-block: 0.5em;
padding-inline: 1em;
padding-right: 7vw;
font-size: calc((100 / 750) * 26 * 1vw);
color: var(--black);
appearance: none;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223.616%22%20height%3D%2213.503%22%20viewBox%3D%220%200%2023.616%2013.503%22%3E%3Cpath%20fill%3D%22%23000%22%20id%3D%22Icon_ionic-ios-arrow-down%22%20d%3D%22M18%2C20.679l8.93-8.937a1.681%2C1.681%2C0%2C0%2C1%2C2.384%2C0%2C1.7%2C1.7%2C0%2C0%2C1%2C0%2C2.391L19.2%2C24.258a1.685%2C1.685%2C0%2C0%2C1-2.327.049L6.68%2C14.14a1.688%2C1.688%2C0%2C0%2C1%2C2.384-2.391Z%22%20transform%3D%22translate(-6.188%20-11.246)%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: 97% center;
background-size: 2.3vw 1.3vw;
border-radius: calc((100 / 750) * 8 * 1vw);
}
}
& fieldset {
display: grid;
grid-auto-flow: column;
gap: 6px;
align-items: center;
justify-content: flex-start;
padding: 0;
margin-inline: 0;
font-size: 20px;
@media not all and (width >= 768px) {
gap: calc((100 / 750) * 6 * 1vw);
font-size: calc((100 / 750) * 26 * 1vw);
}
}
& button {
display: grid;
place-content: center;
block-size: 100%;
padding-block: 24px;
padding-inline: 10px;
font-size: 14px;
font-weight: bold;
line-height: 1;
color: white;
background: var(--orange);
border: 1px solid var(--orange);
border-radius: 8px;
@media not all and (width >= 768px) {
width: 100%;
padding-block: calc((100 / 750) * 26 * 1vw);
margin-inline: auto;
font-size: calc((100 / 750) * 26 * 1vw);
}
}
}
/* =====================
u-sort
===================== */
.u-sort {
display: grid;
grid-auto-flow: column;
gap: 0.5em;
align-items: center;
justify-content: flex-end;
margin-block: 60px 30px;
@media not all and (width >= 768px) {
gap: calc((100 / 750) * 1 * 1vw);
margin-block: calc((100 / 750) * 40 * 1vw);
}
&::before {
inline-size: 19px;
block-size: 18px;
content: '';
background-image: url('../img/common/sort.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media not all and (width >= 768px) {
&::before {
inline-size: calc((100 / 750) * 24 * 1vw);
block-size: calc((100 / 750) * 24 * 1vw);
}
}
& select {
font-size: 16px;
font-weight: inherit;
appearance: none;
border: none;
@media not all and (width >= 768px) {
max-inline-size: 36vw;
padding-block: 0.5em;
padding-inline: 1em;
padding-right: 7vw;
font-size: calc((100 / 750) * 26 * 1vw);
color: var(--black);
appearance: none;
background: none;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223.616%22%20height%3D%2213.503%22%20viewBox%3D%220%200%2023.616%2013.503%22%3E%3Cpath%20fill%3D%22%23000%22%20id%3D%22Icon_ionic-ios-arrow-down%22%20d%3D%22M18%2C20.679l8.93-8.937a1.681%2C1.681%2C0%2C0%2C1%2C2.384%2C0%2C1.7%2C1.7%2C0%2C0%2C1%2C0%2C2.391L19.2%2C24.258a1.685%2C1.685%2C0%2C0%2C1-2.327.049L6.68%2C14.14a1.688%2C1.688%2C0%2C0%2C1%2C2.384-2.391Z%22%20transform%3D%22translate(-6.188%20-11.246)%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: 97% center;
background-size: 2.3vw 1.3vw;
border-radius: calc((100 / 750) * 8 * 1vw);
}
}
}
/* =====================
u-item
===================== */
.u-item {
.head {
padding-block: 40px;
background: #dfdfdf;
@media not all and (width >= 768px) {
padding-block: calc((100 / 750) * 30 * 1vw);
padding-inline: calc((100 / 750) * 40 * 1vw);
}
.u-inner {
display: grid;
grid-auto-flow: column;
gap: 10px;
align-items: center;
justify-content: space-between;
@media not all and (width >= 768px) {
display: block;
text-align: center;
}
& h1 {
font-size: 26px;
font-weight: bold;
word-break: break-all;
@media not all and (width >= 768px) {
margin-block-end: calc((100 / 750) * 10 * 1vw);
font-size: calc((100 / 750) * 32 * 1vw);
}
&[data-sold-out] {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
@media not all and (width >=768px) {
justify-content: center;
}
@media not all and (width >=768px) {
gap: 10px;
}
&::before {
padding-inline: 10px;
font-family: var(--title);
font-size: 16px;
color: white;
content: 'SOLD OUT';
background: var(--orange);
border-radius: 4px;
}
}
}
.unit {
display: grid;
gap: 10px;
align-items: flex-start;
justify-content: flex-start;
@media not all and (width >= 768px) {
display: grid;
grid-auto-flow: column;
gap: calc((100 / 750) * 10 * 1vw);
align-items: baseline;
justify-content: center;
}
& small {
margin-block: calc((1em - 1lh) / 2);
@media not all and (width >= 768px) {
font-size: calc((100 / 750) * 26 * 1vw);
}
}
.price {
display: grid;
grid-auto-flow: column;
gap: 0.25em;
align-items: center;
justify-content: flex-start;
margin-block: calc((1em - 1lh) / 2);
font-size: 37px;
font-weight: bold;
color: var(--orange);
@media not all and (width >= 768px) {
font-size: calc((100 / 750) * 42 * 1vw);
}
&::before {
content: '¥';
}
}
}
}
}
.img {
padding-block: 60px 65px;
background: #eee;
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 60 * 1vw) calc((100 / 750) * 65 * 1vw);
}
.inner {
inline-size: 1120px;
margin-inline: auto;
@media not all and (width >= 768px) {
inline-size: 100%;
}
}
}
.u-decorate {
padding-block-start: 90px;
@media not all and (width >=768px) {
padding-block-start: calc((100 / 750) * 90 * 1vw);
}
}
& hgroup {
display: grid;
gap: 22px;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 22 * 1vw);
}
& [lang='en'] {
font-family: var(--title);
font-size: 30px;
font-weight: 600;
line-height: 1;
letter-spacing: 1.8px;
@media not all and (width >= 768px) {
font-size: calc((100 / 750) * 30 * 1vw);
letter-spacing: calc((100 / 750) * 1.8 * 1vw);
}
}
& h2 {
display: grid;
grid-auto-flow: column;
gap: 16px;
align-items: center;
justify-content: flex-start;
margin-block: calc((1em - 1lh) / 2);
font-family: var(--yumin);
font-size: 18px;
font-weight: 600;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 20 * 1vw);
font-size: calc((100 / 750) * 28 * 1vw);
}
&::before {
display: block;
inline-size: 30px;
height: 1px;
content: '';
background: var(--orange);
}
@media not all and (width >=768px) {
&::before {
inline-size: calc((100 / 750) * 30 * 1vw);
}
}
}
}
.u-decorate {
padding-bottom: 200px;
@media not all and (width >= 768px) {
padding-bottom: calc((100 / 750) * 240 * 1vw);
}
}
.body {
margin-block-end: 130px;
@media not all and (width >=768px) {
padding-inline: calc((100 / 750) * 40 * 1vw);
margin-block-end: calc((100 / 750) * 100 * 1vw);
}
& hgroup {
margin-block-end: 60px;
@media not all and (width >= 768px) {
margin-block-end: calc((100 / 750) * 60 * 1vw);
}
}
.comment {
max-inline-size: 920px;
padding-block: 27px;
padding-inline: 40px;
margin-block: calc((1em - 1lh) / 2);
margin-inline: auto;
word-break: break-all;
background: #eee;
border-radius: 10px;
& a {
color: var(--orange);
text-decoration: underline;
transition: all 250ms ease 0s;
will-change: color;
@media (any-hover: hover) {
&:hover {
color: color-mix(in srgb, var(--orange) 60%, white);
text-decoration: none;
}
}
}
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 37 * 1vw);
padding-inline: calc((100 / 750) * 60 * 1vw);
font-size: calc((100 / 750) * 26 * 1vw);
border-radius: calc((100 / 750) * 10 * 1vw);
}
}
}
.information {
margin-block-end: 60px;
@media not all and (width >= 768px) {
padding-inline: calc((100 / 750) * 40 * 1vw);
margin-block-end: calc((100 / 750) * 80 * 1vw);
}
& hgroup {
margin-block-end: 60px;
@media not all and (width >= 768px) {
margin-block-end: calc((100 / 750) * 80 * 1vw);
}
}
& table {
inline-size: 1000px;
table-layout: fixed;
@media not all and (width >= 768px) {
display: block;
inline-size: 100%;
& thead {
display: block;
}
& tbody {
display: block;
}
& tr {
display: grid;
padding-block: calc((100 / 750) * 20 * 1vw);
border-block: 1px solid #d2d2d2;
& + tr {
border-block-start: 1px solid transparent;
}
}
& th {
display: block;
}
& td {
display: block;
}
}
:where(th, td) {
padding-block: 1em;
padding-inline: 0.75em;
line-height: 2.12;
border-block: 1px solid #d2d2d2;
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 0 * 1vw);
padding-inline: 0;
border: none;
}
}
& th {
inline-size: 260px;
font-size: 16px;
font-weight: bold;
border-block: 1px solid var(--orange);
@media not all and (width >=768px) {
inline-size: 100%;
font-size: calc((100 / 750) * 26 * 1vw);
color: var(--orange);
border: none;
}
}
& td {
font-size: 15px;
@media not all and (width >=768px) {
padding-inline: 1em;
font-size: calc((100 / 750) * 26 * 1vw);
}
& a {
color: var(--orange);
text-decoration: underline;
transition: all 250ms ease 0s;
will-change: color;
@media (any-hover: hover) {
&:hover {
color: color-mix(in srgb, var(--orange) 60%, white);
text-decoration: none;
}
}
}
}
}
}
.u-anchor {
margin-inline: auto;
}
}
/* =====================
u-slider
===================== */
.u-slider {
position: relative;
display: grid;
gap: 30px;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 20 * 1vw);
}
.main-image {
max-inline-size: 1000px;
margin-inline: auto;
overflow: clip;
text-align: center;
@media not all and (width >=768px) {
max-inline-size: calc(100% - ((100 / 750) * 80 * 1vw));
}
.swiper-slide {
margin-inline: auto;
}
& img {
display: block;
inline-size: 100%;
block-size: 560px;
margin-inline: auto;
object-fit: contain;
@media not all and (width >=768px) {
block-size: calc((100 / 750) * 560 * 1vw);
}
}
}
.thumbnails {
display: grid;
grid-template-columns: auto 1074px auto;
grid-auto-flow: column;
gap: 25px;
align-items: center;
inline-size: 1160px;
block-size: auto;
overflow: clip;
@media not all and (width >=768px) {
grid-template-columns: 8vw auto 8vw;
gap: calc((100 / 750) * 5 * 1vw);
inline-size: 100%;
}
& button {
position: relative;
display: grid;
place-content: center;
@media not all and (width >=768px) {
& img {
inline-size: calc((100 / 750) * 20 * 1vw);
}
}
&.swiper-button-lock {
pointer-events: none;
opacity: 0.2 !important;
filter: grayscale(1);
}
&.prev {
display: block !important;
& img {
scale: -1 1;
}
}
&.next {
display: block !important;
}
}
.items {
inline-size: auto;
padding-inline: 8px;
overflow: clip;
user-select: none;
@media not all and (width >=768px) {
inline-size: 100%;
padding-inline: calc((100 / 750) * 8 * 1vw);
.swiper-slide {
inline-size: fit-content;
}
}
& img {
inline-size: 100%;
block-size: 80px;
object-fit: cover;
@media not all and (width >=768px) {
display: block;
inline-size: auto;
block-size: calc((100 / 750) * 120 * 1vw);
margin-inline: auto;
}
}
.swiper-wrapper {
padding-block: 4px;
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 4 * 1vw);
padding-inline: calc((100 / 750) * 4 * 1vw);
}
}
.swiper-slide {
cursor: pointer;
}
.swiper-slide-thumb-active {
outline: 4px solid var(--orange);
@media not all and (width >=768px) {
outline: calc((100 / 750) * 4 * 1vw) solid var(--orange);
}
}
}
}
}
/* =====================
u-decorate
===================== */
.u-decorate {
position: relative;
.u-decorate-illust {
position: absolute;
top: 50px;
right: 40px;
inline-size: 155px;
block-size: 59px;
pointer-events: none;
background-image: url('../img/common/illust.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
@media not all and (width >= 768px) {
top: calc((100 / 750) * 71 * 1vw);
right: calc((100 / 750) * 20 * 1vw);
inline-size: calc((100 / 750) * 155 * 1vw);
block-size: calc((100 / 750) * 59 * 1vw);
}
}
&::before,
&::after {
position: absolute;
display: block;
content: '';
}
&::before {
inset: 0 0 auto auto;
inline-size: 54px;
block-size: 58px;
background: var(--red);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
@media not all and (width >= 768px) {
&::before {
inline-size: calc((100 / 750) * 59 * 1vw);
block-size: calc((100 / 750) * 92 * 1vw);
}
}
&::after {
inset: auto auto 0 0;
inline-size: 110px;
block-size: 171px;
pointer-events: none;
background: var(--orange);
clip-path: polygon(0 0, 100% 100%, 0% 100%);
translate: 0 1px;
}
@media not all and (width >= 768px) {
&::after {
inline-size: calc((100 / 750) * 120 * 1vw);
block-size: calc((100 / 750) * 186 * 1vw);
}
}
}
/* =====================
u-link
===================== */
.u-link {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
inline-size: fit-content;
font-size: 14px;
font-weight: bold;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 20 * 1vw);
font-size: calc((100 / 750) * 24 * 1vw);
}
&::before {
position: absolute;
top: 50%;
right: 0;
z-index: 2;
display: block;
inline-size: 12px;
aspect-ratio: 1 / 1;
content: '';
background-color: var(--orange);
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
translate: -113% -50%;
}
&::after {
z-index: 1;
display: grid;
place-content: center;
inline-size: 40px;
aspect-ratio: 1 / 1;
content: '';
background: white;
border-radius: calc(infinity * 1px);
}
@media not all and (width >=768px) {
&::before {
inline-size: calc((100 / 750) * 24 * 1vw);
translate: -77% -50%;
}
&::after {
inline-size: calc((100 / 750) * 60 * 1vw);
}
}
}
/* =====================
u-news
===================== */
.u-news {
display: grid;
grid-template-columns: auto 1fr auto;
@media not all and (width >=768px) {
grid-template-rows: auto auto;
grid-template-columns: auto 1fr;
}
& li {
position: relative;
display: grid;
grid-template-columns: subgrid;
grid-column: span 3;
align-items: center;
padding-block: 30px;
border-block-end: 1px solid #4d4d4d;
transition: all 250ms ease 0s;
@media not all and (width >=768px) {
gap: 3vw 3.3vw;
padding-block: calc((100 / 750) * 60 * 1vw);
}
&:has(a) {
@media (any-hover: hover) {
&:hover {
opacity: 0.7;
}
}
}
& time {
display: grid;
grid-area: 1 / 1 / 3 / 1;
row-gap: 2px;
align-items: flex-start;
justify-content: flex-start;
margin-inline-end: 51px;
font-family: var(--title);
font-size: 44px;
font-weight: 600;
@media not all and (width >=768px) {
grid-area: 1 / 1 / 1 / 2;
grid-auto-flow: column;
row-gap: 0;
margin-inline-end: 0;
font-size: calc((100 / 750) * 26 * 1vw);
font-weight: 400;
color: #c0c0c0;
}
& span {
line-height: 1;
}
.year {
grid-area: span 1 / span 2;
font-size: 20px;
@media not all and (width >=768px) {
font-size: calc((100 / 750) * 26 * 1vw);
}
}
.month {
grid-area: 2 / 1;
@media not all and (width >=768px) {
grid-area: unset;
&::before {
content: '/';
}
}
&::after {
content: '/';
}
}
.day {
grid-area: 2 / 2;
@media not all and (width >=768px) {
grid-area: unset;
}
}
}
& a {
position: absolute;
inset: 0;
z-index: 1;
inline-size: 100%;
block-size: 100%;
}
/* ==== category ==== */
.category {
grid-area: 1 / 2 / 1 / 2;
align-self: flex-end;
inline-size: fit-content;
padding-block: 5px;
padding-inline: 10px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: white;
background: var(--orange);
border-radius: 4px;
@media not all and (width >=768px) {
grid-area: 1 / 2 / 1 / 3;
padding-inline: calc((100 / 750) * 22.8 * 1vw);
margin-block-end: inherit;
font-size: calc((100 / 750) * 22 * 1vw);
line-height: 1.3;
}
}
/* ==== title ==== */
h3 {
grid-area: 2 / 2 / 2 / 2;
padding-block-start: 0.1em;
/* align-self: flex-start; */
font-size: 15px;
font-weight: 500;
line-height: 1.5;
word-break: break-all;
@media not all and (width >=768px) {
grid-area: 2 / 1 / 2 / 3;
font-size: calc((100 / 750) * 28 * 1vw);
}
}
/* ==== arrow ==== */
&::after {
display: block;
grid-area: 1 / 3 / 3 / 3;
inline-size: 16px;
aspect-ratio: 1 / 1;
margin-inline-start: 25px;
content: '';
background-color: currentcolor;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media not all and (width >=768px) {
&::after {
grid-area: 1 / 3 / 3 / 3;
align-self: center;
inline-size: calc((100 / 750) * 24 * 1vw);
margin-inline-start: 0;
}
}
}
}
/* =====================
u-mv
===================== */
.u-mv {
position: relative;
display: grid;
place-content: flex-end flex-start;
block-size: 450px;
overflow: clip;
@media not all and (width >= 768px) {
block-size: calc((100 / 750) * 310 * 1vw);
}
& img {
position: absolute;
top: 50%;
left: 50%;
inline-size: 100%;
block-size: 100%;
pointer-events: none;
object-fit: cover;
translate: -50% -50%;
}
& hgroup {
position: relative;
z-index: 2;
display: grid;
padding-inline: 90px;
line-height: 1;
color: white;
translate: 0 6px;
@media not all and (width >= 768px) {
padding-inline: calc((100 / 750) * 20 * 1vw);
translate: 0 calc((100 / 750) * 6 * 1vw);
}
& [lang='en'] {
display: block;
margin-block: calc((1em - 1lh) / 2);
font-family: var(--title);
font-size: 120px;
font-weight: 600;
@media not all and (width >= 768px) {
font-size: calc((100 / 750) * 110 * 1vw);
word-break: break-all;
}
}
& h1 {
margin-block: calc((1em - 1lh) / 2);
font-family: var(--yumin);
font-size: 24px;
line-height: 1;
@media not all and (width >= 768px) {
font-size: calc((100 / 750) * 32 * 1vw);
}
}
}
}
/* =====================
u-breadcrumb
===================== */
.u-breadcrumb {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: var(--_margin);
align-items: center;
justify-content: flex-end;
padding-block: 15px;
padding-inline: 60px;
font-size: 12px;
pointer-events: none;
--_margin: 15px;
@media not all and (width >=768px) {
--_margin: calc((100 / 750) * 30 * 1vw);
}
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 26 * 1vw);
padding-inline: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 69 * 1vw);
font-size: calc((100 / 750) * 22 * 1vw);
}
& :where(a, span) {
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: flex-start;
line-height: 1;
pointer-events: auto;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 10 * 1vw);
font-weight: 500;
}
}
.item + .item::before {
display: inline-flex;
margin-inline-end: var(--_margin);
content: '›';
}
}
/* =====================
u-mv
===================== */
.u-mv {
position: relative;
block-size: 474px;
@media not all and (width >=768px) {
block-size: calc((100 / 750) * 474 * 1vw);
}
.wrap {
position: relative;
z-index: 2;
block-size: 450px;
@media not all and (width >=768px) {
block-size: calc((100 / 750) * 450 * 1vw);
}
&::before,
&::after {
position: absolute;
z-index: 2;
pointer-events: none;
content: '';
opacity: 0.8;
}
&::before {
inset: 0 auto;
inline-size: 345.5px;
aspect-ratio: 345.5 / 450;
background: linear-gradient(180deg, #191b22 0%, #0a0b0e 100%);
clip-path: polygon(0 0, 9% 0%, 99% 100%, 100% 100%, 0 100%);
}
@media not all and (width >=768px) {
&::before {
inline-size: calc((100 / 750) * 345.5 * 1vw);
aspect-ratio: 345.5 / 450;
}
}
&::after {
inset: 0 0 auto auto;
inline-size: 164px;
aspect-ratio: 164 / 257;
background: linear-gradient(180deg, #191b22 0%, #0a0b0e 100%);
clip-path: polygon(0 0, 100% 0%, 100% 100%);
}
@media not all and (width >=768px) {
&::after {
inline-size: calc((100 / 750) * 164 * 1vw);
aspect-ratio: 164 / 257;
}
}
/* ==== 画像 ==== */
& img {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
inline-size: 100%;
block-size: 100%;
pointer-events: none;
object-fit: cover;
translate: -50% -50%;
}
/* ==== 下部黒グラデーション ==== */
.decoration {
position: absolute;
inset: auto auto 0 0;
z-index: 2;
display: block;
inline-size: 100%;
block-size: 180px;
pointer-events: none;
content: '';
background: linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0%) 100%);
@media not all and (width >=768px) {
block-size: calc((100 / 750) * 90 * 1vw);
}
}
.u-inner {
position: relative;
z-index: 3;
max-inline-size: 100%;
block-size: inherit;
padding-block-start: 320px;
padding-inline-start: 90px;
@media not all and (width >=768px) {
padding-block-start: calc((100 / 750) * 240 * 1vw);
padding-inline-start: calc((100 / 750) * 40 * 1vw);
}
& hgroup {
position: relative;
display: grid;
gap: 4px;
inline-size: fit-content;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 8 * 1vw);
}
/* title */
& h1 {
font-family: var(--yumin);
font-size: 22px;
font-weight: 600;
line-height: 1;
color: #d9d9d9;
letter-spacing: 0.88px;
@media not all and (width >=768px) {
font-size: calc((100 / 750) * 32 * 1vw);
letter-spacing: calc((100 / 750) * 0.88 * 1vw);
}
}
/* en */
& [lang='en'] {
padding-inline-start: 30px;
font-family: var(--title);
font-size: 110px;
font-weight: 600;
line-height: 1;
color: transparent;
letter-spacing: 4.4px;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
@media not all and (width >=768px) {
padding-inline-start: calc((100 / 750) * 20 * 1vw);
font-size: calc((100 / 750) * 110 * 1vw);
letter-spacing: calc((100 / 750) * 4.4 * 1vw);
-webkit-text-stroke-width: calc((100 / 750) * 2 * 1vw);
}
}
/* line */
&::after {
position: absolute;
top: 62.8%;
display: block;
inline-size: 50vw;
height: 1px;
content: '';
background: #d9d9d9;
translate: -100% -50%;
}
}
}
}
}
/* =====================
u-empty
===================== */
.u-empty {
padding-block: 60px;
font-size: 20px;
font-weight: bold;
text-align: center;
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 20 * 1vw);
padding-inline: calc((100 / 750) * 0 * 1vw);
font-size: calc((100 / 750) * 28 * 1vw);
}
}
/* =====================
u-nav
===================== */
.u-nav {
& ul {
display: grid;
grid-auto-flow: column;
justify-content: center;
@media not all and (width >=768px) {
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column;
gap: 0;
align-items: center;
justify-content: space-between;
border-block: 2px solid white;
}
& li {
border-inline: 2px solid white;
@media not all and (width >=768px) {
border-block: unset;
border-inline: unset;
}
& + li {
border-inline-start: 2px solid transparent;
@media not all and (width >=768px) {
border-inline-start: unset;
}
}
&:is(.current) {
color: #000;
pointer-events: none;
background: white;
& :where(a, span) {
&::after {
opacity: 0.2;
}
}
}
}
& li[disabled] {
pointer-events: none;
user-select: none;
opacity: 0.2;
}
}
& :where(a, span) {
display: grid;
grid-auto-flow: column;
gap: 10px;
align-items: center;
justify-content: flex-start;
padding-inline: 40px;
font-size: 18px;
line-height: 1;
@media not all and (width >=768px) {
justify-content: center;
padding-block: calc((100 / 750) * 20 * 1vw);
padding-inline: calc((100 / 750) * 20 * 1vw);
font-size: calc((100 / 750) * 32 * 1vw);
}
&[lang='en'] {
font-family: var(--title);
text-transform: uppercase;
}
&::after {
inline-size: 12px;
aspect-ratio: 1 / 1;
content: '';
background-color: currentcolor;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media not all and (width >=768px) {
&::after {
inline-size: calc((100 / 750) * 18 * 1vw);
}
}
}
}
/* =====================
u-table
===================== */
.u-table {
max-inline-size: 1000px;
margin-inline: auto;
& :where(th, td) {
padding-block: 1.5em;
padding-inline: 9px;
vertical-align: middle;
border-block: 1px solid #333;
@media not all and (width >= 768px) {
padding-block: calc((100 / 750) * 40 * 1vw);
padding-inline: calc((100 / 750) * 16 * 1vw) 0;
font-size: calc((100 / 750) * 24 * 1vw);
}
}
& th {
inline-size: 25%;
font-weight: bold;
@media not all and (width >= 768px) {
inline-size: 22%;
padding-inline-start: 0;
}
}
@media not all and (width >=768px) {
& td a[href^='tel:'] {
color: var(--orange);
text-decoration: underline;
}
}
}
/* =====================
u-recommend
===================== */
.u-recommend {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 60px 40px;
@media not all and (width >=768px) {
grid-template-columns: repeat(2, 1fr);
gap: calc((100 / 750) * 60 * 1vw) calc((100 / 750) * 50 * 1vw);
}
& li {
position: relative;
& a {
position: absolute;
inset: 0;
z-index: 1;
inline-size: 100%;
block-size: 100%;
}
&[data-sold-out] {
&::after {
position: absolute;
top: 33%;
left: 50%;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 100%;
font-family: var(--title);
font-size: 20px;
color: white;
text-align: center;
pointer-events: none;
content: 'SOLD OUT';
background-color: rgb(0 0 0 / 80%);
translate: -50% 0;
}
@media not all and (width >=768px) {
&::after {
font-size: calc((100 / 750) * 32 * 1vw);
}
}
}
}
& img {
aspect-ratio: 1 / 1;
margin-block-end: 30px;
object-fit: cover;
background-color: black;
@media not all and (width >=768px) {
margin-block-end: calc((100 / 750) * 33 * 1vw);
}
}
& h3 {
margin-block: calc((1em - 1lh) / 2);
font-weight: 700;
line-height: 1.56;
word-break: break-all;
@media not all and (width >=768px) {
margin-block-end: calc((100 / 750) * 10 * 1vw);
font-size: calc((100 / 750) * 24 * 1vw);
}
}
& dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 13px;
align-items: center;
margin-block-start: 10px;
@media not all and (width >=768px) {
grid-template-columns: unset;
gap: calc((100 / 750) * 0 * 1vw);
}
@media not all and (width >= 768px) {
display: grid;
grid-auto-flow: column;
gap: calc((100 / 750) * 16 * 1vw);
justify-content: flex-start;
margin-block-start: calc((100 / 750) * 0 * 1vw);
}
& dt {
font-size: 13px;
@media not all and (width >=768px) {
/* display: none; */
font-size: calc((100 / 750) * 20 * 1vw);
line-height: 1;
}
}
& dd {
font-size: 20px;
font-weight: bold;
color: var(--orange);
word-break: break-all;
@media not all and (width >=768px) {
font-size: calc((100 / 750) * 32 * 1vw);
}
&::before {
padding-inline-end: 0.25em;
content: '¥';
}
}
}
}
/* =====================
u-pagination
===================== */
.u-pagination {
display: grid;
grid-auto-flow: column;
gap: 1em;
align-items: center;
justify-content: center;
margin-block-start: 60px;
@media not all and (width >=768px) {
gap: 1em;
margin-block-start: calc((100 / 750) * 80 * 1vw);
}
& a {
aspect-ratio: 1 / 1;
padding: 0.5em;
font-family: var(--title);
font-size: 20px;
font-weight: 600;
line-height: 1;
color: #767676;
border-block-end: 2px solid transparent;
@media (any-hover: hover) {
&:hover {
color: var(--orange);
}
}
&.current {
color: var(--orange);
border-block-end: 2px solid var(--orange);
}
}
}
/* =====================
header
===================== */
.header {
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: grid;
grid-template-columns: 547px 1fr auto;
align-items: center;
justify-content: space-between;
inline-size: 100%;
min-block-size: var(--header-height);
padding-inline: 30px 0;
font-size: 15px;
font-weight: bold;
pointer-events: none;
background: rgb(0 0 0 / 30%);
border-block-end: 1px solid rgb(255 255 255 / 30%);
transition: all 250ms ease 0s;
@media not all and (width >=768px) {
grid-template-columns: auto auto;
block-size: var(--header-height);
padding-inline: 2.6vw 0;
}
.logo {
display: grid;
grid-template-columns: 351px auto;
gap: 20px;
align-items: center;
padding-block: 0;
pointer-events: auto;
@media not all and (width >=768px) {
display: grid;
grid-template-columns: calc((100 / 750) * 351 * 1vw) auto;
gap: calc((100 / 750) * 23 * 1vw);
inline-size: calc((100 / 750) * 581 * 1vw);
padding-block: 0;
}
}
.nav {
display: grid;
grid-auto-flow: column;
align-items: center;
block-size: 100%;
text-transform: uppercase;
pointer-events: auto;
@media not all and (width >=768px) {
display: none;
}
& ul {
display: inherit;
grid-auto-flow: inherit;
justify-content: flex-end;
block-size: 100%;
margin-inline-end: 20px;
color: white;
@media not all and (width >= 768px) {
display: none;
}
& li {
position: relative;
block-size: 100%;
&::after {
position: absolute;
bottom: 0;
left: 50%;
display: block;
width: 0;
height: 2px;
content: '';
background: white;
border-radius: calc(infinity * 1px);
translate: -50% 0;
transition: width 250ms ease 0s;
will-change: width;
}
@media (any-hover: hover) {
&:hover {
&::after {
width: 100%;
}
}
}
}
& a {
display: grid;
place-content: center;
block-size: inherit;
padding-inline: 20px;
}
}
}
.menu {
display: grid;
place-content: center;
inline-size: 100px;
block-size: 100%;
pointer-events: auto;
background: var(--orange);
border-inline-start: 1px solid rgb(255 255 255 / 30%);
@media not all and (width >=768px) {
inline-size: var(--header-height);
aspect-ratio: 1 / 1;
}
}
}
/* ==== 白 ==== */
body:not(:has(.u-mv, .mv)) .header {
background: white;
border-block-end: 1px solid #dfdfdf;
.logo img:nth-child(1) {
display: none;
}
.logo::before {
inline-size: 351px;
block-size: 70px;
content: '';
background-image: url('../img/common/logo-color.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media not all and (width >= 768px) {
.logo::before {
inline-size: calc((100 / 750) * 351 * 1vw);
block-size: calc((100 / 750) * 70 * 1vw);
}
}
.logo img:nth-child(2) {
filter: brightness(0);
}
& a {
color: var(--black);
}
}
body:not(:has(.u-mv, .mv)) .header + .main {
margin-block-start: var(--header-height);
}
/* =====================
footer
===================== */
.footer {
position: relative;
display: block;
color: white;
background: var(--mouse);
& nav {
display: grid;
grid-template-areas:
'logo nav'
'address nav'
'other other'
'sub sub';
grid-template-rows: auto 1fr auto;
align-items: flex-start;
justify-content: space-between;
padding-block: 90px 40px;
padding-inline: 60px;
@media not all and (width >=768px) {
display: grid;
grid-template: 100% / 100%;
grid-template-areas:
'logo'
'nav'
'sub'
'other'
'address';
grid-template-rows: auto auto auto;
justify-content: center;
inline-size: 100%;
padding-block: calc((100 / 750) * 130 * 1vw) 14.2vw;
padding-inline: calc((100 / 750) * 0 * 1vw);
}
.unit[data-id='1'] {
display: grid;
grid-area: nav;
grid-auto-flow: column;
gap: 40px;
align-items: flex-start;
justify-content: flex-end;
@media not all and (width >=769px) {
display: grid;
grid-template-columns: 100%;
grid-auto-flow: row;
gap: calc((100 / 750) * 40 * 1vw);
align-items: flex-start;
justify-content: flex-start;
inline-size: 100%;
padding-inline: calc((100 / 750) * 80 * 1vw);
margin-block-start: calc((100 / 750) * 100 * 1vw);
font-size: calc((100 / 750) * 40 * 1vw);
}
& li {
position: relative;
display: grid;
grid-auto-flow: row;
align-items: flex-start;
@media not all and (width >=768px) {
display: grid;
grid-auto-flow: row;
inline-size: 100%;
cursor: pointer;
a {
display: block;
width: 100%;
padding-inline-start: 1em;
&[href='/'] {
padding-inline-start: 0;
}
}
}
@media print, screen and (width >=768px) {
&:has([href='/']) {
display: none;
}
}
[lang='en'] {
margin-block-end: 32px;
font-family: var(--title);
font-size: 23px;
font-weight: 400;
line-height: 1;
@media not all and (width >=768px) {
margin-block-end: 2.7vw;
font-size: calc((100 / 750) * 40 * 1vw);
}
}
@media print, screen and (width >=768px) {
button {
pointer-events: none;
}
}
& hgroup {
display: inherit;
width: inherit;
& :where(a, span) {
font-size: 13px;
@media not all and (width >=768px) {
position: relative;
font-size: calc((100 / 750) * 26 * 1vw);
}
}
& ul {
display: grid;
gap: 0.5em;
/* margin-block-start: 10px; */
@media not all and (width >=768px) {
gap: 1.1vw;
margin-block-start: calc((100 / 750) * 13 * 1vw);
}
& li[disabled] {
pointer-events: none;
opacity: 0.1;
}
& :where(a, span) {
display: grid;
grid-auto-flow: column;
gap: 0.5em;
align-items: flex-start;
justify-content: flex-start;
@media not all and (width >=768px) {
gap: 1.1vw;
width: 100%;
padding-inline-start: calc((100 / 750) * 39 * 1vw);
font-size: calc((100 / 750) * 26 * 1vw);
line-height: 1.6;
}
&::before {
content: '-';
}
& + a {
margin-block-start: 2px;
}
}
}
}
}
}
.unit[data-id='2'] {
display: grid;
grid-area: sub;
grid-auto-flow: column;
gap: 30px;
align-self: flex-end;
justify-content: flex-end;
margin-block-start: 4em;
font-size: 13px;
color: #888;
@media not all and (width >=768px) {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row;
gap: 4.2vw 0;
align-items: center;
justify-content: center;
inline-size: fit-content;
padding-inline: calc((100 / 750) * 80 * 1vw);
margin-inline: auto;
margin-top: 14.9vw;
font-size: calc((100 / 750) * 24 * 1vw);
}
}
.logo {
display: grid;
grid-area: logo;
gap: 20px;
inline-size: 300px;
height: auto;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 40 * 1vw);
inline-size: calc((100 / 750) * 500 * 1vw);
margin-inline: auto;
}
}
.address {
display: grid;
grid-area: address;
margin-block-start: 40px;
font-size: 15px;
line-height: 2;
@media not all and (width >=768px) {
margin-block-start: 8.6vw;
font-size: calc((100 / 750) * 24 * 1vw);
line-height: 1.83;
text-align: center;
a {
text-decoration: underline;
}
}
address {
display: grid;
grid-auto-flow: column;
gap: 1em;
justify-content: flex-start;
@media not all and (width >=768px) {
gap: 1.5vw;
justify-content: center;
}
}
.sns {
display: grid;
grid-auto-flow: column;
gap: 10px;
align-items: center;
justify-content: flex-start;
margin-block-start: 40px;
@media not all and (width >=768px) {
gap: 5vw;
justify-content: center;
margin-block-start: 7vw;
}
& a {
display: grid;
place-content: center;
aspect-ratio: 1 / 1;
padding: 5px;
background: #494440;
border-radius: calc(infinity * 1px);
@media not all and (width >= 768px) {
padding: calc((100 / 750) * 10 * 1vw);
}
}
}
}
}
/* 他店舗 */
.others {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column;
gap: 30px;
justify-content: space-between;
padding-block: 0 60px;
padding-inline: 60px;
@media not all and (width >=768px) {
grid-template-columns: repeat(1, 1fr);
grid-auto-flow: row;
padding-block: 0 calc((100 / 750) * 136 * 1vw);
padding-inline: calc((100 / 750) * 40 * 1vw);
}
& h2 {
margin-block-end: 22px;
font-size: 14px;
line-height: 2.42;
text-align: center;
background: #000;
@media not all and (width >=768px) {
margin-block-end: 4vw;
font-size: calc((100 / 750) * 25 * 1vw);
}
}
.item {
display: grid;
grid-auto-flow: column;
gap: 6px 16px;
align-items: center;
justify-content: flex-start;
padding-inline: 20px;
@media not all and (width >=768px) {
gap: 1vw 2.7vw;
padding-inline: calc((100 / 750) * 20 * 1vw);
}
& + .item {
margin-block-start: 9px;
}
& h3 {
display: grid;
grid-auto-flow: column;
gap: 6px;
align-items: center;
justify-content: flex-start;
font-size: 13px;
@media not all and (width >=768px) {
gap: 0.5em;
font-size: calc((100 / 750) * 24 * 1vw);
}
&::before {
content: '-';
}
}
& ul {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 10 * 1vw);
}
& a {
aspect-ratio: 1 / 1;
& img {
display: block;
inline-size: 24px;
block-size: 24px;
@media not all and (width >=768px) {
inline-size: calc((100 / 750) * 32 * 1vw);
block-size: calc((100 / 750) * 32 * 1vw);
}
}
}
}
}
}
/* Copyright */
small {
display: grid;
place-content: center;
padding-block: 23px 16px;
font-size: 12px;
line-height: 1;
color: #4d4d4d;
letter-spacing: 1.2px;
border-top: 1px solid currentcolor;
@media not all and (width >=768px) {
padding-block: 5vw;
font-size: calc((100 / 750) * 22 * 1vw);
letter-spacing: calc((100 / 750) * 2.2 * 1vw);
}
}
}
body.company header ul li:has([href='/company/']),
body.business header ul li:has([href='/business/']),
body.works header ul li:has([href='/works/']),
body.recruit header ul li:has([href='/recruit/']) {
pointer-events: none;
&::after {
width: 100%;
}
}
}
/* =====================
global-menu
===================== */
.menu-on {
overflow: clip;
& body {
overflow: hidden;
}
}
.menu-on .global-menu {
right: 0;
z-index: calc(infinity * 1);
opacity: 1;
transition: right 350ms var(--easeOutExpo) 0s;
}
.global-menu {
--_size: 490px;
@media not all and (width >=768px) {
--_size: 100vw;
}
position: fixed;
top: 0;
right: calc(-1 * var(--_size));
inline-size: var(--_size);
block-size: 100%;
background-color: color-mix(in srgb, var(--orange) 95%, transparent 5%);
[disabled] {
pointer-events: none;
opacity: 0.2;
}
.inner {
position: relative;
max-block-size: 100svh;
padding-block: 32px 90px;
padding-inline: 40px;
overflow-y: scroll;
@media not all and (width >=768px) {
padding-block: 5vw 21vw;
padding-inline: calc((100 / 750) * 40 * 1vw);
}
.close {
display: grid;
place-content: center;
inline-size: 33px;
margin-inline: auto 0;
@media not all and (width >=768px) {
inline-size: calc((100 / 750) * 60 * 1vw);
}
}
.wrap {
margin-block: 32px;
@media not all and (width >=768px) {
margin-block: 5vw;
}
.nav {
display: grid;
gap: 40px;
@media not all and (width >=768px) {
gap: 5vw;
}
& > ul {
display: grid;
gap: 20px;
@media not all and (width >=768px) {
gap: 2vw;
}
}
}
[lang='en'] {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: center;
font-family: var(--title);
font-size: 28px;
color: white;
@media not all and (width >=768px) {
gap: 2vw;
font-size: calc((100 / 750) * 48 * 1vw);
}
&::after {
display: block;
inline-size: 100%;
height: 1px;
content: '';
background: #d2d2d2;
opacity: 0.3;
}
}
& li {
& hgroup {
display: grid;
gap: 0.4em;
& > a {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
@media not all and (width >=768px) {
gap: 2vw;
font-size: calc((100 / 750) * 30 * 1vw);
}
&::before {
content: '-';
}
}
& ul {
display: grid;
gap: 4px;
padding-inline-start: 1.4em;
margin-block: 0 10px;
color: white;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 20 * 1vw);
padding-inline-start: calc((100 / 750) * 24 * 1vw);
margin-block: 0 calc((100 / 750) * 20 * 1vw);
}
& li {
:where(a, span) {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
font-size: 15px;
@media not all and (width >=768px) {
gap: calc((100 / 750) * 20 * 1vw);
font-size: calc((100 / 750) * 26 * 1vw);
}
&::before {
content: '-';
}
}
}
}
}
}
.unit[data-id='2'] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
justify-content: center;
font-size: 13px;
color: white;
text-align: center;
@media not all and (width >=768px) {
font-size: calc((100 / 750) * 24 * 1vw);
}
& a {
display: grid;
place-content: center;
padding-block: 1em;
@media (any-hover: hover) {
&:hover {
color: #b2b2b2;
background: #212121;
}
}
}
}
.others {
display: grid;
gap: 40px;
@media not all and (width >=768px) {
gap: 5vw;
}
& h2 {
padding: 0.4em 0.8em;
margin-block-end: 1.3em;
font-size: 16px;
color: white;
background: var(--black);
@media not all and (width >=768px) {
padding: 0.4em 0.8em;
margin-block-end: 1.3em;
font-size: calc((100 / 750) * 26 * 1vw);
}
}
.item {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
padding-block: 0;
padding-inline: 1em;
@media not all and (width >=768px) {
gap: 3vw 0;
padding-inline: calc((100 / 750) * 10 * 1vw);
}
& h3 {
font-size: 14px;
color: white;
@media not all and (width >=768px) {
font-size: calc((100 / 750) * 26 * 1vw);
}
}
& ul {
display: grid;
flex-shrink: 0;
grid-auto-flow: column;
gap: 10px;
justify-content: flex-end;
@media not all and (width >=768px) {
gap: 2vw;
}
& li {
inline-size: 22px;
@media not all and (width >=768px) {
inline-size: calc((100 / 750) * 42 * 1vw);
}
& img {
inline-size: 100%;
vertical-align: middle;
}
}
}
}
.item + .item {
margin-block-start: 1em;
}
}
.logo {
display: grid;
gap: 2em;
place-content: center;
align-items: center;
justify-content: center;
margin-block-start: 2em;
margin-inline: auto;
text-align: center;
& img {
display: block;
margin-inline: auto;
}
@media not all and (width >=768px) {
max-inline-size: 60vw;
}
}
}
}
}
/* =====================
カラー
===================== */
.category[data-type='ニュースリリース'],
.category[data-type='試乗会'] {
color: white;
background: var(--orange);
}
.category[data-type='ハーレーダビッドソン須磨'],
.category[data-type='ツーリング'],
.category[data-type='ハーレーダビッドソン大阪'] {
background: #646ecb;
}
.category[data-type='入荷情報'],
.category[data-type='North Osakaインディアンモーターサイクル'],
.category[data-type='インディアンモーターサイクル神戸'] {
background: #cc5b53;
}
.category[data-type='HDX Mino'],
.category[data-type='HDX Kobe'] {
background: #61949f;
}
.category[data-type='その他'],
.category[data-type='受付終了'] {
background: var(--gray);
}
/* =====================
editore
===================== */
.wp-editor {
font-size: 16px;
font-weight: 500;
line-height: 2.12;
@media not all and (width >= 768px) {
font-size: calc((100 / 750) * 26 * 1vw);
}
& p + p {
margin-top: 2em;
}
& a {
color: var(--orange);
word-break: break-all;
text-decoration: underline;
@media (any-hover: hover) {
&:hover {
text-decoration: none;
opacity: 0.7;
}
}
}
& img {
display: block;
margin-block: 3em auto;
&[align='center'] {
margin-inline: auto;
}
}
}