@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: white;
background: #000;
}
@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: 80svh;
}
/* 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;
color: white;
@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;
}
}
}
/* =====================
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: 23px;
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;
@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-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-shop
===================== */
.u-shop {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 9px;
align-items: center;
@media not all and (width >=768px) {
grid-template-columns: repeat(2, 1fr);
gap: calc((100 / 750) * 64 * 1vw) calc((100 / 750) * 4 * 1vw);
}
& li {
position: relative;
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
gap: 0;
align-items: center;
transition: all 250ms ease 0s;
&:has(a) {
@media (any-hover: hover) {
&:hover {
opacity: 0.7;
}
}
}
& h2 {
display: grid;
align-items: center;
block-size: 100%;
padding-block: 9px;
padding-inline: 8px;
font-size: 15px;
font-weight: bold;
line-height: 1.3;
word-break: break-all;
background: black;
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 15 * 1vw);
padding-inline: calc((100 / 750) * 24 * 1vw);
font-size: calc((100 / 750) * 24 * 1vw);
line-height: 1.6;
}
}
.img {
position: relative;
align-self: flex-start;
min-block-size: 130px;
overflow: clip;
background: black;
@media not all and (width >=768px) {
min-block-size: unset;
max-block-size: calc((100 / 750) * 200 * 1vw);
}
& img {
@media (width > 768px) {
block-size: 130px;
}
@media (width <= 768px) {
max-block-size: calc((100 / 750) * 200 * 1vw);
}
object-fit: cover;
object-position: center;
}
& small {
position: absolute;
top: 50%;
left: 50%;
display: block;
inline-size: 100%;
font-size: 15px;
font-weight: bold;
line-height: 1.46;
text-align: center;
translate: -50% -50%;
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 16 * 1vw);
padding-inline: calc((100 / 750) * 24 * 1vw);
font-size: calc((100 / 750) * 24 * 1vw);
}
}
}
& address {
align-self: flex-start;
padding-block: 15px;
padding-inline: 10px;
font-size: 12px;
color: #c0c0c0;
background: black;
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 16 * 1vw);
padding-inline: calc((100 / 750) * 24 * 1vw);
font-size: calc((100 / 750) * 24 * 1vw);
}
}
& p {
display: grid;
align-self: flex-start;
padding-block: 13px;
padding-inline: 0;
font-size: 14px;
line-height: 1.57;
@media not all and (width >=768px) {
padding-block: calc((100 / 750) * 16 * 1vw);
padding-inline: calc((100 / 750) * 24 * 1vw);
font-size: calc((100 / 750) * 24 * 1vw);
}
}
.anchor {
position: absolute;
inset: 0;
z-index: 1;
inline-size: 100%;
block-size: 100%;
}
}
}
/* =====================
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;
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;
}
}
.category[data-type='ニュースリリース'] {
background: var(--orange);
}
.category[data-type='ハーレーダビッドソン須磨'],
.category[data-type='ハーレーダビッドソン大阪'] {
background: #646ecb;
}
.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='その他'] {
background: var(--gray);
}
/* ==== title ==== */
h3 {
grid-area: 2 / 2 / 2 / 2;
padding-block-start: 0.1em;
/* align-self: flex-start; */
font-size: 15px;
font-weight: bold;
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-service
===================== */
.u-service {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px;
align-items: flex-start;
justify-content: center;
@media not all and (width >=768px) {
grid-template-rows: unset;
grid-template-columns: repeat(1, 1fr);
gap: calc((100 / 750) * 40 * 1vw);
}
& li {
position: relative;
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
text-align: center;
@media (any-hover: hover) {
&:not(:has(> a)) {
&:hover {
opacity: 0.8;
}
}
}
& figure {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
gap: 14px;
@media not all and (width >=768px) {
grid-template-rows: unset;
grid-row: unset;
gap: calc((100 / 750) * 16 * 1vw);
}
.img {
display: grid;
align-items: center;
justify-content: center;
block-size: 100%;
background: white;
@media not all and (width >=768px) {
min-block-size: 40vw;
}
& img {
display: block;
margin-inline: auto;
}
& img[alt='Harley-Davidson'] {
inline-size: 64%;
@media not all and (width >=768px) {
inline-size: auto;
max-inline-size: auto;
block-size: 30vw;
}
}
& img[alt='Indian Motorcycle'] {
inline-size: 62%;
@media not all and (width >=768px) {
inline-size: auto;
max-inline-size: auto;
block-size: 20vw;
}
}
}
& figcaption {
margin-block: calc((1em - 1lh) / 2);
font-family: var(--title);
font-size: 22px;
font-weight: 400;
line-height: 1;
letter-spacing: 1.32px;
@media not all and (width >=768px) {
font-size: calc((100 / 750) * 32 * 1vw);
}
& a::before {
position: absolute;
top: 0;
left: 0;
inline-size: 100%;
block-size: 100%;
content: '';
}
}
}
}
}
/* =====================
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: 13px;
padding-inline-end: 30px;
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.7 * 1vw);
padding-inline: calc((100 / 750) * 19 * 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-bg
===================== */
.u-bg {
position: relative;
min-block-size: 400px;
@media not all and (width >=768px) {
min-block-size: calc((100 / 750) * 400 * 1vw);
}
.background {
position: absolute;
inset: 0;
block-size: 400px;
pointer-events: none;
@media not all and (width >=768px) {
min-block-size: calc((100 / 750) * 500 * 1vw);
}
& img {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
translate: -50% -50%;
}
&::before,
&::after {
position: absolute;
left: 0;
z-index: 2;
display: block;
inline-size: 100%;
block-size: 200px;
content: '';
}
@media not all and (width >=768px) {
&::before,
&::after {
block-size: calc((100 / 750) * 200 * 1vw);
}
}
&::before {
top: 0;
background: linear-gradient(0deg, rgb(22 14 13 / 0%) 0%, #000 100%);
}
&::after {
bottom: 0;
background: linear-gradient(180deg, rgb(22 14 13 / 0%) 0%, #000 100%);
}
}
.u-inner {
position: relative;
z-index: 2;
}
}
/* =====================
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) * 20 * 1vw);
}
& li {
position: relative;
& a {
position: absolute;
inset: 0;
z-index: 1;
inline-size: 100%;
block-size: 100%;
}
}
& img {
aspect-ratio: 1 / 1;
margin-block-end: 30px;
object-fit: contain;
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: white;
}
}
}
& .current {
pointer-events: none;
border-block-end: 2px solid var(--orange);
& a {
color: var(--orange);
}
}
}
/* =====================
header
===================== */
.header {
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: grid;
grid-template-columns: 351px 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 {
padding-block: 0;
pointer-events: auto;
@media not all and (width >=768px) {
inline-size: calc((100 / 750) * 351 * 1vw);
padding-block: 0;
}
@media not all and (width >=768px) {
display: block;
}
}
.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;
& 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;
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;
}
&::after {
display: block;
inline-size: 23px;
aspect-ratio: 23 / 7;
content: '';
background-image: url('../img/common/menu.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media not all and (width >=768px) {
&::after {
inline-size: calc((100 / 750) * 46 * 1vw);
}
}
}
}
/* =====================
aside
===================== */
.aside {
color: var(--black);
background: white;
.u-inner {
display: grid;
grid-template-columns: auto 1fr auto;
grid-auto-flow: column;
align-items: center;
max-inline-size: 1240px;
padding-block: 45px;
padding-inline-start: 40px;
@media not all and (width >=768px) {
grid-template-columns: auto;
grid-auto-flow: row;
gap: 4vw;
padding-block: calc((100 / 750) * 45 * 1vw);
padding-inline: calc((100 / 750) * 40 * 1vw);
}
}
.u-head {
& span[lang='en'] {
color: var(--black);
@media not all and (width >=768px) {
&::after {
margin-inline: 0;
}
}
}
& h2 {
color: #666;
@media not all and (width >=768px) {
text-align: left;
}
}
}
& p {
max-inline-size: 685px;
margin-inline-start: 90px;
@media not all and (width >= 768px) {
grid-row: 2 / 2;
grid-column: 1 / 3;
margin-inline-start: 0;
font-size: calc((100 / 750) * 28 * 1vw);
}
}
.anchor {
display: grid;
place-content: center;
inline-size: 90px;
aspect-ratio: 1 / 1;
background: var(--orange);
border-radius: calc(infinity * 1px);
@media not all and (width >=768px) {
grid-area: -1 / -1;
inline-size: calc((100 / 750) * 100 * 1vw);
margin-inline: auto 0;
background: white;
border: 1px solid var(--orange);
}
&::after {
display: block;
inline-size: 24px;
aspect-ratio: 1 / 1;
content: '';
background-color: white;
mask-image: var(--icon-mail);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
@media not all and (width >=768px) {
&::after {
inline-size: calc((100 / 750) * 40 * 1vw);
background: var(--orange);
}
}
}
}
/* =====================
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% / auto;
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) * 109 * 1vw) 15.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: 0;
margin-block-start: calc((100 / 750) * 60 * 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 6.2vw;
align-items: center;
justify-content: space-between;
padding-inline: 0;
margin-top: 14.9vw;
font-size: calc((100 / 750) * 24 * 1vw);
}
}
.logo {
display: grid;
grid-area: logo;
inline-size: 300px;
height: auto;
@media not all and (width >=768px) {
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-bottom: 22px;
font-size: 14px;
line-height: 2.42;
text-align: center;
background: #000;
@media not all and (width >=768px) {
margin-bottom: 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%;
}
}
body:not(.top, .contact, .entry)::after {
position: fixed;
top: 0;
left: 0;
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100dvh;
pointer-events: none;
content: '';
background: #fff;
opacity: 1;
transition: all 600ms ease-in-out 100ms;
}
.pageshow body::before {
opacity: 0;
}
.pageshow body::after {
opacity: 0;
}
}
/* =====================
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;
@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;
place-content: center;
margin-block-start: 2em;
margin-inline: auto;
@media not all and (width >=768px) {
max-inline-size: 60vw;
}
}
}
}
}
/* =====================
u-map
===================== */
.u-map {
position: relative;
& a {
position: absolute;
z-index: 2;
display: block;
block-size: 40px;
background: white;
mix-blend-mode: saturation;
opacity: 0;
transition: all 250ms ease 0s;
@media (any-hover: hover) {
&:hover {
opacity: 0.5;
}
}
@media not all and (width >=768px) {
display: none;
}
}
.harley-osaka {
top: 322px;
left: 812px;
inline-size: 230px;
}
.harley-suma {
top: 333px;
left: 32px;
inline-size: 230px;
block-size: 83px;
}
.indian-osaka {
top: 122px;
left: 739px;
inline-size: 354px;
}
.indian-kobe {
top: 131px;
left: 91px;
inline-size: 168px;
block-size: 82px;
}
.hdx-mino {
top: 20px;
left: 792px;
inline-size: 122px;
}
.hdx-kobe {
top: 17px;
left: 101px;
inline-size: 292px;
}
}