/* ===============================================================
ヴィベール REDESIGN — style.css
コンセプト：Pâtisserie Parisienne（パリジャン洋菓子店）
フォント ：Cormorant Garamond（英文見出し）+ Noto Serif JP（和文）
カラー ：Cream × Champagne Gold × Forest Green × Deep Ink
================================================================ */
/* ===============================
RESET & BASE
================================ */
* {
box-sizing: border-box;
}
/* ── Google Fonts ── */
/* index.htmlの内を下記に差し替えてください：
*/
:root {
--content-max: 1100px;
--section-px: clamp(20px, 5vw, 60px);
/* ── ブランドカラー ── */
--clr-white: #fdfaf5; /* ウォームホワイト */
--clr-cream: #f8f4ee; /* ベースクリーム */
--clr-cream-dk: #ede7db; /* クリームダーク */
--clr-gold: #b8955a; /* シャンパンゴールド */
--clr-gold-lt: #d4b07a; /* ゴールドライト */
--clr-gold-pale: #edd9a3; /* ゴールドペール */
--clr-green: #3d5047; /* フォレストグリーン */
--clr-green-lt: #5a7165; /* セージグリーン */
--clr-ink: #1e1a14; /* ディープインク */
--clr-ink-soft: #3a3228; /* ソフトインク */
--clr-muted: #7a6e5e; /* ミュートブラウン */
--clr-border: rgba(184, 149, 90, 0.22); /* ゴールドボーダー */
--clr-border-lt: rgba(184, 149, 90, 0.12); /* 薄いボーダー */
/* 旧変数との互換エイリアス（script.jsの変更不要） */
--clr-primary: var(--clr-ink-soft);
--clr-primary-dk: var(--clr-ink);
--clr-primary-lt: var(--clr-muted);
--clr-bg: var(--clr-cream);
--clr-bg-warm: var(--clr-white);
}
/* ── カスタムフォント（851tegakizatsu はそのまま継続） ── */
@font-face {
font-family: "851tegakizatsu";
src: url("fonts/851tegakizatsu.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
margin: 0;
font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
font-weight: 300;
background: var(--clr-cream);
color: var(--clr-ink);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* ===============================
スクロール入場アニメーション
================================ */
.js-reveal-child {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.75s ease,
transform 0.75s ease;
transition-delay: var(--delay, 0s);
}
.js-reveal-child.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ===============================
共通：セクションラベル（英語小見出し）
================================ */
.section-label {
font-family: "Cormorant Garamond", serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--clr-gold);
margin-bottom: 14px;
}
/* ===============================
共通：オーナメント仕切り
================================ */
.ornament-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 200px;
margin: 0 auto 28px;
}
.ornament-divider__line {
flex: 1;
height: 0.5px;
background: var(--clr-gold);
opacity: 0.4;
}
.ornament-divider__diamond {
width: 5px;
height: 5px;
background: var(--clr-gold);
opacity: 0.6;
transform: rotate(45deg);
flex-shrink: 0;
}
/* ===============================
共通：丸矢印
================================ */
.circle-arrow {
width: 20px;
height: 20px;
min-width: 20px;
border: 0.5px solid currentColor;
border-radius: 50%;
position: relative;
display: inline-block;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.circle-arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: translate(-65%, -50%) rotate(45deg);
}
/* ===============================
共通ボタン
================================ */
.btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
color: var(--clr-green);
border: 0.5px solid var(--clr-green);
text-decoration: none;
font-family: "Cormorant Garamond", serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
overflow: hidden;
z-index: 0;
transition: color 0.35s ease;
}
.btn::before {
content: "";
position: absolute;
inset: 0;
background: var(--clr-green);
transform: translateX(-100%);
transition: transform 0.38s ease;
z-index: -1;
}
.btn:hover::before {
transform: translateX(0);
}
.btn:hover {
color: var(--clr-white);
}
.btn:hover .circle-arrow {
transform: translateX(5px);
}
/* ゴールドバリアント */
.btn--gold {
color: var(--clr-gold);
border-color: var(--clr-gold);
}
.btn--gold::before {
background: var(--clr-gold);
}
.btn--gold:hover {
color: var(--clr-white);
}
/* ===============================
共通：moreリンク
================================ */
.section-more {
display: block;
font-family: "Cormorant Garamond", serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--clr-gold);
text-decoration: none;
position: relative;
padding-bottom: 3px;
width: fit-content;
transition: opacity 0.25s ease;
}
.section-more::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0.5px;
background: var(--clr-gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s ease;
}
.section-more:hover {
opacity: 0.75;
}
.section-more:hover::after {
transform: scaleX(1);
}
/* ===============================
HEADER
================================ */
.site-header {
width: 100%;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
border-bottom: 0.5px solid var(--clr-border);
font-family: "Cormorant Garamond", serif;
color: var(--clr-ink);
position: relative;
z-index: 100;
background: var(--clr-white);
}
.logo {
margin: 0;
display: flex;
align-items: center;
line-height: 1;
flex-shrink: 0;
}
.logo a {
text-decoration: none;
display: block;
line-height: 0;
}
.logo img {
display: block;
width: auto;
height: auto;
max-height: clamp(34px, 7vw, 46px);
max-width: min(200px, 45vw);
object-fit: contain;
}
/* ─── ハンバーガー（PC非表示） ─── */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
z-index: 200;
flex-shrink: 0;
}
.hamburger span {
display: block;
width: 22px;
height: 1px;
background: var(--clr-ink);
transition:
transform 0.3s ease,
opacity 0.3s ease;
transform-origin: center;
}
.hamburger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ─── ナビ ─── */
.nav-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 24px;
}
.nav-list li {
display: flex;
align-items: center;
height: 100%;
}
.nav-list a {
text-decoration: none;
color: var(--clr-ink-soft);
font-family: "Cormorant Garamond", serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.35;
}
/* ナビリンクのホバーアンダーライン */
.nav-list > li:nth-child(-n + 6) > a {
position: relative;
display: inline-block;
padding-bottom: 4px;
}
.nav-list > li:nth-child(-n + 6) > a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0.5px;
background: var(--clr-gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s ease;
}
.nav-list > li:nth-child(-n + 6) > a:hover::after {
transform: scaleX(1);
}
/* CTAリンク（予約） */
.pickup-link {
display: inline-flex;
flex-direction: column;
gap: 2px;
position: relative;
padding-left: 18px;
}
.pickup-link::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0.5px;
height: 28px;
background: var(--clr-border);
}
.pickup-link p {
margin: 0;
}
.pickup-link p:first-child {
font-family: "Noto Serif JP", serif;
font-size: 10px;
font-weight: 300;
letter-spacing: 0.04em;
color: var(--clr-muted);
}
.pickup-row {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pickup-row span:first-child {
font-family: "Cormorant Garamond", serif;
font-size: 13px;
letter-spacing: 0.12em;
color: var(--clr-gold);
}
.pickup-link:hover .circle-arrow {
transform: translateX(5px);
}
/* ===============================
HERO
================================ */
main {
display: block;
}
.hero {
--hero-dots-strip: 48px;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
background: var(--clr-green);
margin-bottom: 60px;
}
.hero-slider {
position: relative;
width: 100%;
flex: 0 0 auto;
height: clamp(240px, calc(100vh - 72px - var(--hero-dots-strip)), 760px);
height: clamp(240px, calc(100svh - 72px - var(--hero-dots-strip)), 760px);
overflow: hidden;
}
/* ヒーローオーバーレイ：左側にダークグラデーション */
.hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(
105deg,
rgba(20, 17, 12, 0.62) 0%,
rgba(20, 17, 12, 0.28) 48%,
transparent 75%
),
linear-gradient(to bottom, transparent 55%, rgba(20, 17, 12, 0.3) 100%);
pointer-events: none;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s ease;
z-index: 0;
}
.hero-slide.is-active {
opacity: 1;
z-index: 1;
}
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ─── ヒーローキャッチコピー ─── */
.hero-container {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 10%;
z-index: 3;
pointer-events: none;
}
.typing-text {
color: var(--clr-cream);
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-size: clamp(1.25rem, 1.9vw, 1.75rem);
font-weight: 200;
line-height: 2.4;
letter-spacing: 0.28em;
writing-mode: vertical-rl;
text-orientation: upright;
text-shadow:
0 1px 8px rgba(10, 8, 5, 0.45),
0 4px 24px rgba(10, 8, 5, 0.25);
position: relative;
}
/* .typing-text::before {
content: "";
position: absolute;
inset: -1.2em -1.6em;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
border-left: 0.5px solid rgba(212, 176, 122, 0.25);
border-bottom: 0.5px solid rgba(212, 176, 122, 0.15);
z-index: -1;
} */
.line {
display: block;
}
.line-2 {
padding-top: 1.6em;
}
.char {
display: inline-block;
opacity: 0;
transform: translateY(8px);
animation: fuwariFadeIn 0.9s ease-out forwards;
}
@keyframes fuwariFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 英語サブキャッチ */
.hero-en-sub {
position: absolute;
bottom: 32px;
left: 10%;
z-index: 4;
font-family: "Cormorant Garamond", serif;
font-size: 10px;
font-weight: 400;
font-style: italic;
letter-spacing: 0.38em;
color: rgba(237, 217, 163, 0.7);
text-transform: uppercase;
pointer-events: none;
}
/* ─── スクロール誘導 ─── */
.hero-scroll-hint {
position: absolute;
bottom: 20px;
right: 44px;
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
pointer-events: none;
animation: scrollHintFade 2.8s ease-in-out 2s infinite;
}
.hero-scroll-hint__line {
display: block;
width: 1px;
height: 40px;
background: linear-gradient(
to bottom,
transparent,
rgba(237, 217, 163, 0.55)
);
}
.hero-scroll-hint__label {
font-family: "Cormorant Garamond", serif;
font-size: 9px;
letter-spacing: 0.38em;
color: rgba(237, 217, 163, 0.5);
text-transform: uppercase;
}
@keyframes scrollHintFade {
0%,
100% {
opacity: 0.3;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(7px);
}
}
/* ─── ドット ─── */
.hero-dots {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
min-height: var(--hero-dots-strip);
padding: 10px 16px max(10px, env(safe-area-inset-bottom, 0px));
border-top: 0.5px solid var(--clr-border);
background: var(--clr-cream-dk);
}
.hero-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0.5px solid var(--clr-gold);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.hero-dot.is-active {
background: var(--clr-gold);
transform: scale(1.2);
}
.hero-dot:focus-visible {
outline: 2px solid var(--clr-gold);
outline-offset: 2px;
}
/* ===============================
バナー
================================ */
.home-banners {
padding: 40px var(--section-px);
background: var(--clr-cream);
margin-bottom: 80px;
}
.home-banners-inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex;
justify-content: center;
gap: 20px;
}
.home-banner {
display: block;
overflow: hidden;
flex: 1;
max-width: 50%;
transition:
opacity 0.3s ease,
transform 0.3s ease;
border: 0.5px solid var(--clr-border);
}
.home-banner img {
width: 100%;
height: auto;
object-fit: contain;
}
.home-banner:hover {
opacity: 0.88;
transform: translateY(-3px);
}
/* ===============================
RESERVE
================================ */
.reserve-section {
position: relative;
padding: 90px var(--section-px);
background: var(--clr-white);
text-align: center;
color: var(--clr-ink);
overflow: hidden;
border-top: 0.5px solid var(--clr-border);
border-bottom: 0.5px solid var(--clr-border);
}
/* 淡いゴールドの背景グラデーション */
.reserve-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 70% 50% at 50% 20%,
rgba(184, 149, 90, 0.06) 0%,
transparent 70%
);
pointer-events: none;
}
.reserve-inner {
position: relative;
max-width: 680px;
margin: 0 auto;
z-index: 1;
}
.reserve-title {
font-family: "Noto Serif JP", serif;
font-size: 18px;
font-weight: 300;
margin-bottom: 20px;
letter-spacing: 0.1em;
line-height: 1.9;
color: var(--clr-ink-soft);
}
/* reserve-divider → ornament-dividerに統一 */
.reserve-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
width: 200px;
margin: 0 auto 28px;
}
.reserve-divider__line {
flex: 1;
height: 0.5px;
background: var(--clr-gold);
opacity: 0.4;
}
.reserve-divider__ornament {
font-size: 9px;
color: var(--clr-gold);
opacity: 0.5;
line-height: 1;
}
.reserve-text {
font-size: 13px;
font-weight: 300;
line-height: 2.2;
margin-bottom: 32px;
color: var(--clr-muted);
letter-spacing: 0.05em;
}
.reserve-image {
margin-bottom: 32px;
}
.reserve-image img {
width: 100%;
max-width: 530px;
height: auto;
aspect-ratio: 530 / 140;
object-fit: cover;
border-radius: 2px;
margin: 0 auto;
}
.reserve-button {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 28px;
color: var(--clr-gold);
border: 0.5px solid var(--clr-gold);
text-decoration: none;
font-family: "Cormorant Garamond", serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.22em;
overflow: hidden;
z-index: 0;
transition: color 0.35s ease;
}
.reserve-button::before {
content: "";
position: absolute;
inset: 0;
background: var(--clr-gold);
transform: translateX(-100%);
transition: transform 0.38s ease;
z-index: -1;
}
.reserve-button:hover::before {
transform: translateX(0);
}
.reserve-button:hover {
color: var(--clr-white);
}
.reserve-button:hover .circle-arrow {
transform: translateX(5px);
}
/* ===============================
VieBelle キャッチ
================================ */
.vie-belle {
text-align: center;
color: var(--clr-ink);
}
.vie-belle-inner {
max-width: var(--content-max);
margin: 0 auto;
padding-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.vie-belle-catch {
margin: 0;
font-family: "Noto Serif JP", serif;
font-size: 13px;
font-weight: 300;
letter-spacing: 0.28em;
color: var(--clr-gold-pale);
}
.vie-belle-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 160px;
margin: 0 auto;
}
.vie-belle-divider__line {
flex: 1;
height: 0.5px;
background: var(--clr-gold-pale);
opacity: 0.4;
}
.vie-belle-divider__diamond {
width: 5px;
height: 5px;
background: var(--clr-gold-pale);
opacity: 0.5;
transform: rotate(45deg);
flex-shrink: 0;
}
.vie-belle-sub {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: 12px;
font-weight: 400;
font-style: italic;
letter-spacing: 0.22em;
color: var(--clr-gold-pale);
opacity: 0.65;
}
/* ===============================
CAFE MENU
================================ */
.cafe-menu {
padding: 100px var(--section-px);
background: var(--clr-green); /* ← フォレストグリーン背景 */
text-align: center;
color: var(--clr-cream);
position: relative;
}
/* 微細なパターンオーバーレイ */
.cafe-menu::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
45deg,
rgba(237, 217, 163, 0.04) 0,
rgba(237, 217, 163, 0.04) 1px,
transparent 0,
transparent 50%
);
background-size: 16px 16px;
pointer-events: none;
}
.cafe-inner {
position: relative;
max-width: var(--content-max);
margin: 0 auto;
}
.cafe-title {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
font-family: "851tegakizatsu", sans-serif;
font-size: 22px;
letter-spacing: 0.14em;
color: var(--clr-cream);
opacity: 0.9;
margin-bottom: 0;
}
.cafe-title .icon img {
height: auto;
max-height: 26px;
width: auto;
/* 白っぽく見せる */
filter: brightness(0) saturate(100%) invert(95%) sepia(10%) saturate(300%)
hue-rotate(10deg);
}
.cafe-menu .btn {
margin-top: 10px;
color: var(--clr-gold-pale);
border-color: rgba(237, 217, 163, 0.45);
}
.cafe-menu .btn::before {
background: rgba(237, 217, 163, 0.15);
}
.cafe-menu .btn:hover {
color: var(--clr-cream);
}
.cafe-menu .vie-belle-catch {
color: var(--clr-gold-pale);
}
/* ===============================
CAFE SLIDER
================================ */
.cafe-slider {
position: relative;
width: 100%;
max-width: var(--content-max);
margin: 0 auto 50px;
padding: 0 28px;
}
.cafe-slider__viewport {
overflow: hidden;
width: 100%;
}
.cafe-slider__track {
display: flex;
transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* PC: 3枚表示 */
.cafe-slider__slide {
flex: 0 0 calc(100% / 3);
width: calc(100% / 3);
padding: 0 9px;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: center;
}
.cafe-slider__slide img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
border-radius: 2px;
border: 0.5px solid rgba(237, 217, 163, 0.15);
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
.cafe-slider__slide img:hover {
transform: scale(1.025);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}
/* 前後ボタン */
.cafe-slider__btn {
position: absolute;
top: 40%;
transform: translateY(-50%);
width: 38px;
height: 38px;
background: rgba(61, 80, 71, 0.8);
border: 0.5px solid rgba(237, 217, 163, 0.3);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
background 0.25s ease,
border-color 0.25s ease;
z-index: 5;
}
.cafe-slider__btn:hover {
background: rgba(61, 80, 71, 1);
border-color: rgba(237, 217, 163, 0.6);
}
.cafe-slider__btn--prev {
left: -1rem;
}
.cafe-slider__btn--next {
right: -1rem;
}
.cafe-slider__arrow {
width: 8px;
height: 8px;
border-top: 1px solid var(--clr-gold-pale);
border-right: 1px solid var(--clr-gold-pale);
display: block;
}
.cafe-slider__arrow--right {
transform: rotate(45deg) translateX(-1px);
}
.cafe-slider__arrow--left {
transform: rotate(-135deg) translateX(-1px);
}
/* ドット */
.cafe-slider__dots {
display: flex;
justify-content: center;
gap: 10px;
padding: 18px 0 0;
}
.cafe-slider__dot {
width: 7px;
height: 7px;
padding: 0;
border: 0.5px solid var(--clr-gold-pale);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.cafe-slider__dot.is-active {
background: var(--clr-gold-pale);
transform: scale(1.2);
}
/* ===============================
ITEM
================================ */
.item {
padding: 100px var(--section-px);
background: var(--clr-white);
text-align: center;
color: var(--clr-ink);
border-top: 0.5px solid var(--clr-border);
border-bottom: 0.5px solid var(--clr-border);
}
.item-inner {
max-width: var(--content-max);
margin: 0 auto;
}
.item-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 60px;
}
.item-title img {
width: 26px;
height: auto;
opacity: 0.75;
}
.item-line {
width: 48px;
height: 0.5px;
background: var(--clr-gold);
opacity: 0.5;
}
.item-title h2 {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--clr-ink-soft);
margin: 0;
}
.item-cards {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 50px;
}
.item-card {
display: block;
flex: 1;
max-width: 380px;
background: var(--clr-cream);
overflow: hidden;
text-decoration: none;
color: var(--clr-ink);
transition:
transform 0.38s ease,
box-shadow 0.38s ease;
border: 0.5px solid var(--clr-border);
}
.item-card__img-wrap {
overflow: hidden;
aspect-ratio: 16 / 9;
}
.item-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.item-card p {
height: 56px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: "Noto Serif JP", serif;
font-size: 11px;
font-weight: 300;
padding: 30px 10px;
letter-spacing: 0.1em;
color: var(--clr-ink-soft);
border-top: 0.5px solid var(--clr-border);
}
.item-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 40px rgba(30, 26, 20, 0.1);
}
.item-card:hover .item-card__img-wrap img {
transform: scale(1.06);
}
.item-buttons {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
/* ===============================
TOPICS
================================ */
.topics {
padding: 100px var(--section-px);
background: var(--clr-cream);
text-align: center;
color: var(--clr-ink);
}
.topics-inner {
max-width: var(--content-max);
margin: 0 auto;
}
.topics-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 60px;
}
.topics-icon {
margin-bottom: 10px;
opacity: 0.8;
}
.topics-line {
width: 48px;
height: 0.5px;
background: var(--clr-gold);
margin-bottom: 12px;
opacity: 0.5;
}
.topics-title {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--clr-ink-soft);
margin: 0;
}
.topics-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 28px;
}
.topics-card {
background: var(--clr-white);
text-decoration: none;
color: var(--clr-ink);
overflow: hidden;
text-align: left;
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
border: 0.5px solid var(--clr-border);
}
.topics-card__img-wrap {
overflow: hidden;
aspect-ratio: 4 / 3;
}
.topics-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.topics-card__body {
padding: 12px 14px 18px;
}
.topics-card .date {
display: block;
font-family: "Cormorant Garamond", serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.22em;
color: var(--clr-gold);
margin-bottom: 7px;
}
.topics-card p {
font-family: "Noto Serif JP", serif;
font-size: 13px;
font-weight: 300;
margin: 0;
line-height: 1.75;
color: var(--clr-ink-soft);
}
.topics-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 30px rgba(30, 26, 20, 0.09);
}
.topics-card:hover .topics-card__img-wrap img {
transform: scale(1.05);
}
/* ===============================
ページネーション（共通）
================================ */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 56px;
}
.pagination__list {
display: flex;
align-items: center;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.pagination__item {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-family: "Cormorant Garamond", serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.1em;
color: var(--clr-ink-soft);
border: 0.5px solid transparent;
text-decoration: none;
transition:
color 0.25s,
border-color 0.25s,
background 0.25s;
}
.pagination__item:hover {
color: var(--clr-gold);
border-color: var(--clr-border);
}
.pagination__item.is-active {
color: var(--clr-gold);
border-color: var(--clr-gold);
background: transparent;
pointer-events: none;
}
.pagination__prev,
.pagination__next {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
text-decoration: none;
transition: opacity 0.25s;
}
.pagination__prev:hover,
.pagination__next:hover {
opacity: 0.6;
}
.pagination__prev[aria-disabled="true"],
.pagination__next[aria-disabled="true"] {
opacity: 0.25;
pointer-events: none;
}
.pagination__arrow {
display: block;
width: 10px;
height: 10px;
border-top: 1px solid var(--clr-gold);
border-right: 1px solid var(--clr-gold);
}
.pagination__arrow--left {
transform: rotate(-135deg);
margin-left: 4px;
}
.pagination__arrow--right {
transform: rotate(45deg);
margin-right: 4px;
}
.topics-more-wrap {
display: flex;
justify-content: flex-start;
}
/* ===============================
NEWS
================================ */
.news {
padding: 80px var(--section-px);
background: var(--clr-white);
text-align: center;
color: var(--clr-ink);
position: relative;
overflow: hidden;
border-top: 0.5px solid var(--clr-border);
border-bottom: 0.5px solid var(--clr-border);
}
.news::after {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 360px;
height: 360px;
background: radial-gradient(
circle,
rgba(184, 149, 90, 0.07) 0%,
transparent 70%
);
pointer-events: none;
}
.news-inner {
max-width: var(--content-max);
margin: 0 auto;
position: relative;
z-index: 1;
}
.news-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 60px;
}
.news-icon {
margin-bottom: 10px;
opacity: 0.8;
}
.news-line {
width: 48px;
height: 0.5px;
background: var(--clr-gold);
margin-bottom: 12px;
opacity: 0.5;
}
.news-title {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--clr-ink-soft);
margin: 0;
}
.news-list {
display: flex;
flex-direction: column;
gap: 0;
max-width: 600px;
margin: 0 auto 36px;
}
.news-item {
width: 100%;
display: flex;
align-items: baseline;
gap: 24px;
padding: 20px 0;
border-bottom: 0.5px solid var(--clr-border);
color: var(--clr-ink);
transition: opacity 0.3s ease;
text-decoration: none;
cursor: pointer;
}
.news-item:first-child {
border-top: 0.5px solid var(--clr-border);
}
.news-item:hover {
opacity: 0.6;
}
.news-date {
font-family: "Cormorant Garamond", serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.22em;
color: var(--clr-gold);
white-space: nowrap;
flex-shrink: 0;
}
.news-text {
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 300;
margin: 0;
text-align: left;
line-height: 1.75;
color: var(--clr-ink-soft);
}
.news-more-wrap {
max-width: 600px;
margin: 28px auto 0;
display: flex;
justify-content: flex-start;
}
/* ===============================
CONTACT
================================ */
.contact {
padding: 100px var(--section-px) 0;
background: var(--clr-cream);
text-align: center;
color: var(--clr-ink);
}
.contact-inner {
max-width: var(--content-max);
margin: 0 auto;
}
.contact-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 60px;
}
.contact-icon {
margin-bottom: 10px;
opacity: 0.8;
}
.contact-line {
width: 48px;
height: 0.5px;
background: var(--clr-gold);
margin-bottom: 12px;
opacity: 0.5;
}
.contact-title {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--clr-ink-soft);
margin: 0;
}
.contact-label {
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 300;
letter-spacing: 0.1em;
margin: 0 0 18px;
color: var(--clr-muted);
}
.contact-tel {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--clr-ink);
margin-bottom: 20px;
transition: opacity 0.25s ease;
}
.contact-tel:hover {
opacity: 0.65;
}
.contact-tel__icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: var(--clr-gold);
}
.contact-tel__number {
/* font-family: "Cormorant Garamond", serif; */
font-size: clamp(28px, 5vw, 44px);
font-weight: 300;
letter-spacing: 0.1em;
line-height: 1;
color: var(--clr-ink-soft);
}
.contact-text {
font-family: "Noto Serif JP", serif;
font-size: 13px;
font-weight: 300;
line-height: 2.2;
margin: 0 0 44px;
letter-spacing: 0.06em;
color: var(--clr-muted);
}
.contact-banner {
width: 100%;
overflow: hidden;
}
.contact-banner img {
width: 100%;
height: auto;
display: block;
transition: transform 0.6s ease;
}
.contact-banner:hover img {
transform: scale(1.015);
}
/* ===============================
ABOUT
================================ */
.about {
padding: 100px var(--section-px);
background: var(--clr-cream);
color: var(--clr-ink);
}
.about-inner {
max-width: var(--content-max);
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 60px;
}
.about-left {
flex: 0 0 auto;
width: 460px;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.about-logo {
width: 100%;
display: flex;
justify-content: center;
}
.about-logo img {
display: block;
width: auto;
max-width: 110px;
height: auto;
opacity: 0.7;
}
.about-info-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
width: fit-content;
}
.about-info-row {
display: flex;
align-items: center;
gap: 10px;
}
.about-info-icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: var(--clr-gold);
}
.about-info-text {
margin: 0;
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 300;
line-height: 1.8;
letter-spacing: 0.05em;
color: var(--clr-ink-soft);
}
.about-info-zip {
margin-right: 6px;
color: var(--clr-muted);
}
.about-company-btn {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 207px;
height: 75px;
background: var(--clr-green);
color: var(--clr-gold-pale);
border: 0.5px solid var(--clr-green);
text-decoration: none;
overflow: hidden;
z-index: 0;
transition: color 0.35s ease;
flex-shrink: 0;
}
.about-company-btn::before {
content: "";
position: absolute;
inset: 0;
background: var(--clr-cream);
transform: translateX(-100%);
transition: transform 0.38s ease;
z-index: -1;
}
.about-company-btn:hover::before {
transform: translateX(0);
}
.about-company-btn:hover {
color: var(--clr-green);
}
.about-company-btn:hover .about-company-btn__text {
color: var(--clr-green);
}
.about-company-btn:hover .about-company-btn__logo {
filter: none;
}
.about-company-btn:hover .circle-arrow {
border-color: var(--clr-green);
transform: translateX(4px);
}
.about-company-btn:hover .circle-arrow::before {
border-top-color: var(--clr-green);
border-right-color: var(--clr-green);
}
.about-company-btn__logo {
display: block;
width: auto;
max-width: 90px;
height: auto;
filter: brightness(0) saturate(100%) invert(90%) sepia(20%) saturate(400%)
hue-rotate(5deg) brightness(105%);
transition: filter 0.35s ease;
}
.about-company-btn__text {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: "Cormorant Garamond", serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--clr-gold-pale);
transition: color 0.35s ease;
}
.about-company-btn .circle-arrow {
width: 15px;
height: 15px;
min-width: 15px;
border-color: var(--clr-gold-pale);
transition:
border-color 0.35s ease,
transform 0.3s ease;
}
.about-company-btn .circle-arrow::before {
border-top-color: var(--clr-gold-pale);
border-right-color: var(--clr-gold-pale);
transition: border-color 0.35s ease;
}
.about-right {
flex: 1;
max-width: 360px;
}
.about-right img {
width: 100%;
height: auto;
display: block;
border: 0.5px solid var(--clr-border);
box-shadow: 0 16px 48px rgba(30, 26, 20, 0.12);
transition: transform 0.4s ease;
}
.about-right img:hover {
transform: scale(1.02);
}
/* ===============================
FOOTER
================================ */
.site-footer {
position: relative;
color: var(--clr-cream);
display: flex;
flex-direction: column;
justify-content: center;
background: var(--clr-ink);
border-top: 0.5px solid rgba(184, 149, 90, 0.25);
}
.footer-inner {
max-width: 1540px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.8fr 0.8fr 1.4fr;
gap: 40px;
padding: 56px 32px;
width: 100%;
}
/* フッター左 */
.footer-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.footer-logo img {
width: auto;
max-width: 90px;
height: auto;
object-fit: contain;
opacity: 0.6;
}
.footer-icons {
display: flex;
gap: 15px;
justify-content: center;
}
.footer-icons img {
width: 22px;
height: 22px;
opacity: 0.55;
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.footer-icons img:hover {
opacity: 0.9;
transform: scale(1.12);
}
.footer-contact-info {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
line-height: 1.7;
}
.footer-contact-icon svg {
width: 14px;
height: 14px;
fill: var(--clr-gold);
opacity: 0.7;
flex-shrink: 0;
margin-top: 2px;
}
.footer-contact-item .footer-contact-text {
font-family: "Noto Serif JP", serif;
font-weight: 300;
color: rgba(248, 244, 238, 0.6);
letter-spacing: 0.04em;
}
/* フッター中央 */
.footer-center {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.footer-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
padding: 0;
margin: 0;
list-style: none;
}
.footer-list li {
font-size: 12px;
}
.footer-list li::before {
content: "·";
margin-right: 8px;
color: var(--clr-gold);
opacity: 0.6;
}
.footer-list a {
font-family: "Cormorant Garamond", serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(248, 244, 238, 0.45);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-list a:hover {
color: var(--clr-gold-lt);
}
/* フッター右 */
.footer-right {
display: flex;
flex-direction: row;
gap: 20px;
align-items: stretch;
}
.footer-right-box-1 {
padding: 20px 0;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1.2;
}
.footer-right-title {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.footer-right-logo {
width: auto;
max-width: 44px;
height: auto;
}
.footer-right-tagline {
font-family: "Cormorant Garamond", serif;
font-size: 10px;
font-style: italic;
letter-spacing: 0.12em;
color: var(--clr-gold-lt);
}
.footer-right-image {
width: 100%;
overflow: hidden;
border: 0.5px solid rgba(184, 149, 90, 0.15);
}
.footer-right-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.footer-right-box-2 {
padding: 20px;
text-align: left;
flex: 1;
display: flex;
flex-direction: column;
}
.footer-right-box-2 .circle-arrow {
border: 0.5px solid var(--clr-gold);
}
.footer-right-box-2 .circle-arrow::before {
border-top: 1px solid var(--clr-gold);
border-right: 1px solid var(--clr-gold);
}
.footer-right-box-2 .btn {
justify-content: center;
color: var(--clr-gold-lt);
border: 0.5px solid rgba(184, 149, 90, 0.4);
}
.footer-right-box-2 .btn::before {
background: rgba(184, 149, 90, 0.15);
}
.footer-right-box-2 .btn:hover {
color: var(--clr-cream);
}
.footer-right-box-2 .btn:hover .circle-arrow::before {
border-top-color: var(--clr-cream);
border-right-color: var(--clr-cream);
}
.footer-right-heading {
margin: 0 0 10px;
font-family: "Cormorant Garamond", serif;
font-size: 13px;
font-weight: 400;
font-style: italic;
letter-spacing: 0.1em;
color: var(--clr-gold-lt);
}
.footer-right-text {
margin: 0 0 18px;
font-family: "Noto Serif JP", serif;
font-size: 11px;
font-weight: 300;
line-height: 1.9;
color: rgba(248, 244, 238, 0.5);
letter-spacing: 0.04em;
}
/* フッター下部 */
.footer-bottom {
background: var(--clr-ink-soft);
text-align: center;
border-top: 0.5px solid rgba(184, 149, 90, 0.15);
font-family: "Cormorant Garamond", serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(184, 149, 90, 0.55);
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
/* ===============================
MOTION REDUCE
================================ */
@media (prefers-reduced-motion: reduce) {
.hero-slide,
.cafe-slider__track {
transition: none;
}
.hero-scroll-hint {
animation: none;
opacity: 0.5;
}
.js-reveal-child {
opacity: 1;
transform: none;
transition: none;
}
.char {
animation: none;
opacity: 1;
}
}
/* ===============================
RESPONSIVE
================================ */
/* ── 1024px ── */
@media (max-width: 1024px) {
:root {
--section-px: 32px;
}
.hamburger {
display: flex;
}
.site-header nav {
position: fixed;
top: 0;
right: 0;
width: min(300px, 85vw);
height: 100dvh;
background: var(--clr-white);
border-left: 0.5px solid var(--clr-border);
padding: 90px 28px 40px;
transform: translateX(100%);
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 150;
overflow-y: auto;
box-shadow: -10px 0 40px rgba(30, 26, 20, 0.12);
}
.site-header nav.is-open {
transform: translateX(0);
}
.nav-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(30, 26, 20, 0.4);
z-index: 3;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.nav-overlay.is-open {
display: block;
}
.nav-list {
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.nav-list li {
width: 100%;
height: auto;
border-bottom: 0.5px solid var(--clr-border-lt);
}
.nav-list li:first-child {
border-top: 0.5px solid var(--clr-border-lt);
}
.nav-list a {
display: block;
padding: 16px 0;
font-size: 14px;
width: 100%;
}
.nav-list > li:nth-child(-n + 6) > a {
padding-bottom: 16px;
}
.pickup-link {
width: 100%;
padding-left: 0;
padding-top: 20px;
padding-bottom: 10px;
}
.pickup-link::before {
display: none;
}
.cafe-slider__slide {
flex: 0 0 50%;
width: 50%;
}
.about-inner {
gap: 40px;
}
.about-left {
width: 340px;
}
.footer-inner {
grid-template-columns: 1fr 1fr;
}
.footer-right {
grid-column: 1 / -1;
}
}
/* ── 768px ── */
@media (max-width: 768px) {
:root {
--section-px: 20px;
}
.hero {
margin-bottom: 30px;
}
.home-banners-inner {
flex-direction: column;
align-items: center;
}
.home-banner {
width: 100%;
max-width: 100%;
}
.reserve-title {
font-size: 16px;
line-height: 1.8;
}
.cafe-title {
font-size: 20px;
}
.cafe-slider__slide {
flex: 0 0 100%;
width: 100%;
}
.cafe-slider {
padding: 0 36px;
}
.item-cards {
flex-direction: column;
align-items: center;
gap: 14px;
}
.item-card {
max-width: 480px;
width: 100%;
}
.item-buttons {
flex-direction: column;
align-items: center;
gap: 12px;
}
.topics-cards {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.news-list {
max-width: 100%;
}
.news-more-wrap {
max-width: 100%;
}
.about-inner {
flex-direction: column;
align-items: center;
gap: 40px;
}
.about-left {
width: 100%;
max-width: 460px;
align-items: center;
}
.about-right {
max-width: 300px;
width: 100%;
}
.footer-inner {
grid-template-columns: 1fr;
gap: 28px;
padding: 32px 20px;
}
.footer-right {
flex-direction: column;
grid-column: auto;
}
.footer-list {
grid-template-columns: 1fr 1fr;
}
}
/* ── 480px ── */
@media (max-width: 480px) {
:root {
--section-px: 16px;
}
.site-header {
padding: 0 16px;
height: 60px;
}
.hero {
margin-bottom: 20px;
}
.hero-container {
padding-left: 7%;
}
.hero-en-sub {
display: none;
}
.cafe-title {
font-size: 18px;
}
.cafe-slider {
padding: 0 28px;
margin-bottom: 32px;
}
.cafe-slider__btn {
width: 30px;
height: 30px;
}
.item-buttons {
width: 100%;
}
.item-buttons .btn {
width: 100%;
justify-content: center;
}
.topics-cards {
grid-template-columns: 1fr;
}
.news-item {
flex-direction: column;
gap: 4px;
}
.footer-inner {
padding: 24px 16px;
}
.footer-list {
grid-template-columns: 1fr;
}
.footer-right-box-2 .btn {
width: 100%;
justify-content: center;
}
.hero-scroll-hint {
display: none;
}
}
/* --- オンラインショップ案内 --- */
.shop-guide {
padding: 100px var(--section-px);
background-color: var(--clr-cream); /* 背景色を変えてセクションを強調 */
text-align: center;
}
.shop-guide-inner {
max-width: 800px;
margin: 0 auto;
}
.shop-guide-title {
font-family: "Noto Serif JP", serif;
font-size: 24px;
margin-bottom: 16px;
letter-spacing: 0.1em;
}
.shop-guide-text {
font-size: 14px;
color: var(--clr-muted);
margin-bottom: 40px;
}
.shop-buttons {
display: flex;
justify-content: center;
gap: 20px;
}
.shop-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 320px;
padding: 30px 20px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
border: 1px solid rgba(180, 150, 100, 0.3);
}
/* 直販ショップ：ブランドカラー（フォレストグリーン風） */
.direct-shop {
background-color: #2c4236; /* 濃いグリーン */
color: #fff;
}
/* 楽天ショップ：シャンパンゴールド系 */
.rakuten-shop {
background-color: var(--clr-white);
color: var(--clr-ink);
}
.shop-btn .en {
font-family: "Cormorant Garamond", serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 8px;
}
.shop-btn .jp {
font-family: "Noto Serif JP", serif;
font-size: 16px;
font-weight: 500;
}
/* ホバーエフェクト */
.shop-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.direct-shop:hover {
background-color: #385545;
}
.rakuten-shop:hover {
border-color: var(--clr-gold);
background-color: #fff;
}
/* 矢印アイコンの装飾 */
.shop-btn .arrow {
margin-top: 15px;
width: 30px;
height: 1px;
background-color: currentColor;
position: relative;
}
.shop-btn .arrow::after {
content: "";
position: absolute;
right: 0;
top: -3px;
width: 7px;
height: 7px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
}
/* スマホ対応 */
@media (max-width: 640px) {
.shop-buttons {
flex-direction: column;
align-items: center;
}
.shop-btn {
max-width: 100%;
padding: 24px;
}
}
/* ===============================================================
ITEM PAGE SPECIFIC - 商品一覧ページ専用スタイル
=============================================================== */
/* --- ページヘッダー --- */
.page-header {
padding: clamp(60px, 10vw, 100px) var(--section-px) 40px;
text-align: center;
background-color: var(--clr-white);
}
.page-title {
font-family: "Noto Serif JP", serif;
font-size: clamp(24px, 4vw, 32px);
font-weight: 300;
margin-bottom: 24px;
letter-spacing: 0.15em;
color: var(--clr-ink);
}
/* --- カテゴリーナビゲーション（ブラッシュアップ版） --- */
.item-nav {
position: sticky;
top: 72px; /* ヘッダーの高さ */
left: 0;
width: 100%;
/* 背景を少し透過させたクリーム色にし、下の文字が透けすぎないよう調整 */
background: rgba(253, 250, 245, 0.98);
backdrop-filter: blur(10px);
z-index: 100;
/* 繊細なゴールドの境界線 */
border-top: 1px solid rgba(180, 150, 100, 0.1);
border-bottom: 1px solid rgba(180, 150, 100, 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.item-nav-inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 12px var(--section-px);
}
.item-nav ul {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(20px, 5vw, 60px);
list-style: none;
margin: 0;
padding: 0;
}
.item-nav a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--clr-ink-soft);
transition: all 0.4s ease;
position: relative;
padding: 8px 0;
}
/* 英語サブタイトル */
.item-nav a .en {
font-family: "Cormorant Garamond", serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--clr-gold);
margin-bottom: 2px;
opacity: 0.8;
}
/* 日本語メイン */
.item-nav a .jp {
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.1em;
}
/* ホバー時の装飾：下に伸びるライン */
.item-nav a::after {
content: "";
position: absolute;
bottom: 0;
width: 0;
height: 1px;
background-color: var(--clr-gold);
transition: width 0.4s ease;
}
.item-nav a:hover {
color: var(--clr-gold);
}
.item-nav a:hover::after {
width: 100%;
}
/* --- 商品セクション共通 --- */
.item-section {
padding: 100px var(--section-px);
}
.item-section--last {
padding-bottom: 140px;
}
.item-section-inner {
max-width: var(--content-max);
margin: 0 auto;
}
.item-cat-title {
font-family: "Noto Serif JP", serif;
font-size: 22px;
margin-bottom: 60px;
text-align: center;
letter-spacing: 0.2em;
color: var(--clr-ink);
}
/* --- 商品グリッドとカード --- */
.item-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 80px 40px;
}
.item-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform 0.4s ease;
}
.item-card:hover {
transform: translateY(-8px);
}
.item-image {
aspect-ratio: 1 / 1;
overflow: hidden;
margin-bottom: 20px;
background-color: var(--clr-white);
/* 額縁のような繊細なライン */
outline: 1px solid rgba(180, 150, 100, 0.1);
outline-offset: -10px;
transition: outline 0.4s ease;
flex-shrink: 0;
}
.item-card:hover .item-image {
outline: 1px solid rgba(180, 150, 100, 0.3);
}
.item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.item-card:hover .item-image img {
transform: scale(1.1);
}
.item-name {
font-family: "Noto Serif JP", serif;
font-size: clamp(13px, 1.4vw, 16px);
font-weight: 500;
margin-bottom: 12px;
color: var(--clr-ink);
line-height: 1.6;
overflow-wrap: break-word;
word-break: break-all;
}
.item-body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.item-desc {
font-size: 11px;
color: var(--clr-muted);
line-height: 1.8;
margin-bottom: 16px;
flex-grow: 1;
overflow-wrap: break-word;
word-break: break-all;
padding: 30px 10px;
}
.item-price {
font-family: "Cormorant Garamond", serif;
font-size: 20px;
font-weight: 500;
color: var(--clr-gold);
border-top: 1px solid var(--clr-border-lt);
padding-top: 12px;
display: flex;
align-items: baseline;
}
.tax-in {
font-size: 10px;
font-family: "Noto Serif JP", serif;
margin-left: 6px;
color: var(--clr-muted);
font-weight: 400;
}
/* --- レスポンシブ調整 --- */
@media (max-width: 960px) {
.item-grid {
grid-template-columns: repeat(2, 1fr);
gap: 50px 30px;
}
}
@media (max-width: 768px) {
.item-nav {
top: 60px; /* スマホ用ヘッダー高さ */
}
.item-nav-inner {
padding: 8px 10px;
}
.item-nav ul {
gap: 15px;
}
.item-nav a .jp {
font-size: 12px;
}
.item-nav a .en {
font-size: 9px;
}
.item-section {
padding: 60px var(--section-px);
}
}
@media (max-width: 480px) {
.item-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.item-image {
margin-bottom: 18px;
}
}
/* ===============================================================
NEWS PAGE SPECIFIC
=============================================================== */
/* --- ページヘッダー --- */
.page-header {
padding: clamp(60px, 10vw, 100px) var(--section-px) 50px;
text-align: center;
background-color: var(--clr-white);
}
.page-header-inner {
max-width: var(--content-max);
margin: 0 auto;
}
/* 英語大見出し＋日本語小見出しの2段組タイトル */
.page-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 24px;
}
.page-title__en {
font-family: "Cormorant Garamond", serif;
font-size: clamp(48px, 8vw, 72px);
font-weight: 300;
font-style: italic;
letter-spacing: 0.08em;
color: var(--clr-ink);
line-height: 1;
}
.page-title__ja {
font-family: "Noto Serif JP", serif;
font-size: clamp(11px, 1.5vw, 13px);
font-weight: 300;
letter-spacing: 0.42em;
color: var(--clr-gold);
text-transform: uppercase;
}
/* ページ説明文 */
.page-header-lead {
font-family: "Noto Serif JP", serif;
font-size: 13px;
font-weight: 300;
color: var(--clr-muted);
letter-spacing: 0.08em;
line-height: 2;
margin: 0;
}
/* --- ニュースリスト --- */
.news-container {
max-width: 800px;
margin: 0 auto;
padding: 60px var(--section-px) 120px;
}
.news-list-item {
display: flex;
padding: 25px 0;
border-bottom: 1px solid var(--clr-border-lt);
text-decoration: none;
color: inherit;
transition: background 0.3s;
}
.news-list-item:hover {
background: rgba(180, 150, 100, 0.03);
}
.news-meta {
width: 140px;
flex-shrink: 0;
}
.news-date {
font-family: "Cormorant Garamond", serif;
font-size: 14px;
color: var(--clr-gold);
display: block;
margin-bottom: 6px;
}
.news-label {
font-size: 10px;
padding: 2px 8px;
border: 1px solid var(--clr-gold);
color: var(--clr-gold);
display: inline-block;
letter-spacing: 0.1em;
}
.news-text {
font-size: 15px;
line-height: 1.8;
color: var(--clr-ink-soft);
}
@media (max-width: 640px) {
.news-list-item {
flex-direction: column;
gap: 10px;
}
.news-meta {
width: auto;
display: flex;
align-items: center;
gap: 15px;
}
}
/* --- ニュースレイアウト（2カラム化） --- */
.news-container {
max-width: 1100px; /* サイドバー分、少し広めに設定 */
margin: 0 auto;
padding: 60px var(--section-px) 120px;
}
.news-content-layout {
display: flex;
gap: 60px; /* サイドバーとリストの間隔 */
}
/* サイドバーのスタイル */
.news-sidebar {
width: 200px;
flex-shrink: 0;
position: sticky;
top: 100px; /* スクロール時に追従させる設定（ヘッダー高さに合わせる） */
height: fit-content;
}
.sidebar-group {
margin-bottom: 40px;
}
.sidebar-title {
font-family: "Cormorant Garamond", serif;
font-size: 20px;
font-style: italic;
color: var(--clr-gold);
border-bottom: 1px solid var(--clr-border-lt);
padding-bottom: 10px;
margin-bottom: 15px;
}
.sidebar-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sidebar-list a {
font-size: 14px;
color: var(--clr-muted);
text-decoration: none;
transition: all 0.3s;
display: block;
padding-left: 5px;
}
.sidebar-list a:hover,
.sidebar-list a.is-active {
color: var(--clr-ink);
transform: translateX(5px); /* ホバー時に少し右に動かす */
}
.sidebar-list a.is-active {
font-weight: 500;
border-left: 2px solid var(--clr-gold);
padding-left: 10px;
}
/* メインリストの調整 */
.news-main-list {
flex-grow: 1;
}
/* レスポンシブ：スマホではサイドバーを上に配置 */
@media (max-width: 850px) {
.news-content-layout {
flex-direction: column;
gap: 40px;
}
.news-sidebar {
width: 100%;
position: static;
}
.sidebar-list {
flex-direction: row; /* スマホでは横並びにする */
flex-wrap: wrap;
gap: 10px 20px;
}
.sidebar-list a.is-active {
border-left: none;
border-bottom: 1px solid var(--clr-gold);
padding-left: 5px;
}
}
/* ===============================================================
NEWS SINGLE (DETAILS) SPECIFIC
=============================================================== */
/* --- レイアウト全体：贅沢な余白の設定 --- */
.news-container {
max-width: 1240px; /* 全体幅を広げて余裕を持たせる */
margin: 0 auto;
padding: 100px var(--section-px) 150px; /* 上下の余白を大幅に取り、高級感を演出 */
}
.news-content-layout {
display: flex;
gap: 100px; /* サイドバーと本文の間隔を広く取り、空気感を出す */
align-items: flex-start;
}
/* --- サイドバー（調整） --- */
.news-sidebar {
width: 180px;
flex-shrink: 0;
position: sticky;
top: 100px;
}
/* --- 記事詳細メインエリア --- */
.news-single-main {
flex-grow: 1;
max-width: 800px; /* 1行が長くなりすぎない可読性の高い幅 */
background-color: var(--clr-white);
padding: 60px 80px; /* 内部に大きな余白を設け、コンテンツを独立させる */
border: 1px solid var(--clr-border-lt); /* 繊細な囲い線 */
}
/* --- 記事ヘッダー（タイトル周り） --- */
.news-single-header {
border-bottom: 1px solid var(--clr-border-lt);
padding-bottom: 40px;
margin-bottom: 50px;
}
.news-single-title {
font-family: "Noto Serif JP", serif;
font-size: clamp(26px, 4vw, 34px); /* 大きめのサイズで重厚感を出す */
line-height: 1.5;
color: var(--clr-ink);
margin-top: 20px;
letter-spacing: 0.05em;
}
/* --- 記事本文のタイポグラフィ --- */
.news-single-body {
font-size: 17px; /* 読みやすさを追求した少し大きめのサイズ */
line-height: 2.2; /* 行間をたっぷりとる */
color: #333;
letter-spacing: 0.04em;
}
.news-single-body p {
margin-bottom: 3em; /* 段落の間隔をあけて圧迫感を排除 */
}
/* 本文内見出し */
.news-single-body h3 {
font-family: "Noto Serif JP", serif;
font-size: 22px;
color: var(--clr-ink);
margin: 3.5em 0 1.5em;
padding-bottom: 10px;
border-bottom: 1px solid var(--clr-gold); /* 金色の下線でアクセント */
display: inline-block;
}
/* 本文内画像・キャプション */
.news-single-body figure {
margin: 4.5em 0;
}
.news-single-body img {
width: 100%;
height: auto;
margin-bottom: 15px;
border-radius: 2px;
}
.news-single-body figcaption {
font-size: 13px;
color: var(--clr-muted);
text-align: center;
letter-spacing: 0.05em;
}
/* --- 下部ナビゲーション --- */
.news-single-footer {
margin-top: 100px;
padding-top: 50px;
border-top: 1px solid var(--clr-border-lt);
}
.post-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.post-nav a {
text-decoration: none;
color: var(--clr-ink);
font-size: 14px;
transition:
opacity 0.3s,
color 0.3s;
}
.post-nav a:hover {
color: var(--clr-gold);
}
.post-nav-back {
font-family: "Cormorant Garamond", serif;
font-size: 15px;
letter-spacing: 0.2em;
color: var(--clr-gold) !important;
border-bottom: 1px solid var(--clr-gold);
padding-bottom: 4px;
text-transform: uppercase;
}
.post-nav-prev::before {
content: "← ";
}
.post-nav-next::after {
content: " →";
}
/* --- レスポンシブ調整 --- */
@media (max-width: 1024px) {
.news-content-layout {
gap: 50px;
}
.news-single-main {
padding: 50px 60px;
}
}
@media (max-width: 850px) {
.news-container {
padding: 60px var(--section-px) 100px;
}
.news-content-layout {
flex-direction: column;
gap: 60px;
}
.news-sidebar {
width: 100%;
position: static;
}
.news-single-main {
max-width: 100%;
padding: 40px 30px;
border: none; /* スマホでは枠線を消してスッキリさせる */
}
.news-single-title {
font-size: 24px;
}
.news-single-body {
font-size: 16px;
line-height: 2;
}
.post-nav span {
display: none; /* スマホでは「前の記事へ」の文字を隠す */
}
.post-nav-prev::before {
content: "PREV";
}
.post-nav-next::after {
content: "NEXT";
}
}
/* ===============================================================
TOPICS PAGE SPECIFIC
=============================================================== */
/* --- ページヘッダー（news.cssと統一） --- */
.page-header {
padding: clamp(60px, 10vw, 100px) var(--section-px) 50px;
text-align: center;
background-color: var(--clr-white);
}
.page-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 24px;
}
.page-title__en {
font-family: "Cormorant Garamond", serif;
font-size: clamp(48px, 8vw, 72px);
font-weight: 300;
font-style: italic;
letter-spacing: 0.08em;
color: var(--clr-ink);
line-height: 1;
}
.page-title__ja {
font-family: "Noto Serif JP", serif;
font-size: clamp(11px, 1.5vw, 13px);
font-weight: 300;
letter-spacing: 0.42em;
color: var(--clr-gold);
text-transform: uppercase;
}
/* 装飾ディバイダー */
.ornament-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
}
.ornament-divider__line {
width: 40px;
height: 1px;
background-color: var(--clr-border-lt);
}
.ornament-divider__diamond {
width: 6px;
height: 6px;
background-color: var(--clr-gold);
transform: rotate(45deg);
}
.page-header-lead {
font-family: "Noto Serif JP", serif;
font-size: 13px;
font-weight: 300;
color: var(--clr-muted);
letter-spacing: 0.08em;
line-height: 2;
margin: 0;
}
/* --- レイアウトコンテナ --- */
.topics-container {
max-width: 1200px;
margin: 0 auto;
padding: 60px var(--section-px) 120px;
}
.topics-content-layout {
display: flex;
gap: 60px;
}
/* --- サイドバー --- */
.topics-sidebar {
width: 200px;
flex-shrink: 0;
position: sticky;
top: 100px;
height: fit-content;
}
.sidebar-group {
margin-bottom: 40px;
}
.sidebar-title {
font-family: "Cormorant Garamond", serif;
font-size: 20px;
font-style: italic;
color: var(--clr-gold);
border-bottom: 1px solid var(--clr-border-lt);
padding-bottom: 10px;
margin-bottom: 15px;
}
.sidebar-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sidebar-list a {
font-size: 14px;
color: var(--clr-muted);
text-decoration: none;
transition: all 0.3s;
display: block;
}
.sidebar-list a:hover,
.sidebar-list a.is-active {
color: var(--clr-ink);
}
.sidebar-list a.is-active {
font-weight: 500;
border-left: 2px solid var(--clr-gold);
padding-left: 10px;
}
/* --- メインコンテンツ（グリッド） --- */
.topics-main-content {
flex-grow: 1;
}
.topics-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px 40px;
}
.topics-item {
text-decoration: none;
color: inherit;
display: block;
}
.topics-img-wrap {
aspect-ratio: 16 / 9;
overflow: hidden;
margin-bottom: 20px;
background: var(--clr-cream-dk);
}
.topics-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.topics-item:hover img {
transform: scale(1.05);
}
.topics-date {
font-family: "Cormorant Garamond", serif;
font-size: 14px;
color: var(--clr-gold);
display: block;
margin-bottom: 10px;
}
.topics-h {
font-family: "Noto Serif JP", serif;
font-size: 18px;
line-height: 1.6;
margin-bottom: 15px;
color: var(--clr-ink);
}
.item-desc {
font-size: 11px;
line-height: 1.8;
color: var(--clr-muted);
overflow-wrap: break-word;
word-break: break-all;
padding: 30px 10px;
}
/* --- レスポンシブ --- */
@media (max-width: 900px) {
.topics-content-layout {
flex-direction: column;
gap: 40px;
}
.topics-sidebar {
width: 100%;
position: static;
}
.sidebar-list {
flex-direction: row;
flex-wrap: wrap;
gap: 10px 20px;
}
.sidebar-list a.is-active {
border-left: none;
border-bottom: 1px solid var(--clr-gold);
padding-left: 0;
}
}
@media (max-width: 640px) {
.topics-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* ===============================================================
TOPICS SINGLE (DETAILS) SPECIFIC
=============================================================== */
/* --- レイアウト全体：ニュース詳細と統一感を持たせた余白 --- */
.topics-container {
max-width: 1240px;
margin: 0 auto;
padding: 100px var(--section-px) 150px;
}
.topics-content-layout {
display: flex;
gap: 100px; /* サイドバーとの間に余裕を持たせる */
align-items: flex-start;
}
/* --- トピックス詳細メイン --- */
.topics-single-main {
flex-grow: 1;
max-width: 800px;
background-color: var(--clr-white);
padding: 60px 80px; /* 記事を独立させる贅沢な内部余白 */
border: 1px solid var(--clr-border-lt);
}
/* 記事ヘッダー */
.topics-single-header {
border-bottom: 1px solid var(--clr-border-lt);
padding-bottom: 40px;
margin-bottom: 50px;
}
.topics-single-date {
font-family: "Cormorant Garamond", serif;
font-size: 16px;
color: var(--clr-gold);
letter-spacing: 0.1em;
}
.topics-single-title {
font-family: "Noto Serif JP", serif;
font-size: clamp(26px, 4vw, 34px);
line-height: 1.5;
color: var(--clr-ink);
margin-top: 15px;
letter-spacing: 0.05em;
}
/* --- 記事本文 --- */
.topics-single-body {
font-size: 17px;
line-height: 2.2;
color: #333;
letter-spacing: 0.04em;
}
/* 冒頭のメイン画像 */
.main-visual {
margin: -10px 0 50px;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.main-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.topics-single-body p {
margin-bottom: 3em;
}
.topics-single-body h3 {
font-family: "Noto Serif JP", serif;
font-size: 22px;
color: var(--clr-ink);
margin: 3.5em 0 1.5em;
padding-bottom: 10px;
border-bottom: 1px solid var(--clr-gold);
display: inline-block;
}
.article-figure {
margin: 4.5em 0;
}
.article-figure img {
width: 100%;
margin-bottom: 15px;
border-radius: 2px;
}
.article-figure figcaption {
font-size: 13px;
color: var(--clr-muted);
text-align: center;
}
/* --- 下部ナビゲーション --- */
.topics-single-footer {
margin-top: 100px;
padding-top: 50px;
border-top: 1px solid var(--clr-border-lt);
}
.post-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.post-nav a {
text-decoration: none;
color: var(--clr-ink);
font-size: 14px;
transition:
opacity 0.3s,
color 0.3s;
}
.post-nav a:hover {
color: var(--clr-gold);
}
.post-nav-back {
font-family: "Cormorant Garamond", serif;
font-size: 15px;
letter-spacing: 0.2em;
color: var(--clr-gold) !important;
border-bottom: 1px solid var(--clr-gold);
padding-bottom: 4px;
}
.post-nav-prev::before {
content: "← ";
}
.post-nav-next::after {
content: " →";
}
/* --- レスポンシブ --- */
@media (max-width: 1024px) {
.topics-content-layout {
gap: 50px;
}
.topics-single-main {
padding: 50px 60px;
}
}
@media (max-width: 850px) {
.topics-content-layout {
flex-direction: column;
gap: 60px;
}
.topics-sidebar {
width: 100%;
position: static;
}
.topics-single-main {
max-width: 100%;
padding: 40px 30px;
border: none;
}
.topics-single-title {
font-size: 24px;
}
.topics-single-body {
font-size: 16px;
line-height: 2;
}
.post-nav span {
display: none;
}
.post-nav-prev::before {
content: "PREV";
}
.post-nav-next::after {
content: "NEXT";
}
}
/* ===============================================================
COMPANY PAGE - 会社概要ページ専用スタイル
=============================================================== */
.company-container {
max-width: 900px;
margin: 0 auto;
padding: 80px var(--section-px) 140px;
}
.company-section {
margin-bottom: 80px;
}
.company-section-title {
font-family: "Cormorant Garamond", serif;
font-size: 13px;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--clr-gold);
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 16px;
}
.company-section-title::after {
content: "";
flex: 1;
height: 0.5px;
background: var(--clr-border-lt);
}
.company-table {
width: 100%;
border-collapse: collapse;
}
.company-table th,
.company-table td {
padding: 20px 24px;
text-align: left;
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 300;
line-height: 1.9;
letter-spacing: 0.04em;
border-bottom: 0.5px solid var(--clr-border-lt);
vertical-align: top;
}
.company-table th {
width: 180px;
color: var(--clr-gold);
font-weight: 400;
font-size: 13px;
letter-spacing: 0.08em;
background: rgba(184, 149, 90, 0.03);
flex-shrink: 0;
}
.company-table td {
color: var(--clr-ink-soft);
}
.company-table tr:first-child th,
.company-table tr:first-child td {
border-top: 0.5px solid var(--clr-border-lt);
}
/* 沿革タイムライン */
.history-list {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 120px;
}
.history-list::before {
content: "";
position: absolute;
left: 100px;
top: 8px;
bottom: 8px;
width: 0.5px;
background: var(--clr-border);
}
.history-item {
display: flex;
gap: 32px;
padding: 20px 0;
position: relative;
}
.history-item::before {
content: "";
position: absolute;
left: -24px;
top: 26px;
width: 7px;
height: 7px;
background: var(--clr-gold);
transform: rotate(45deg);
flex-shrink: 0;
}
.history-year {
position: absolute;
left: -120px;
top: 22px;
font-family: "Cormorant Garamond", serif;
font-size: 18px;
font-weight: 300;
color: var(--clr-gold);
letter-spacing: 0.08em;
white-space: nowrap;
}
.history-text {
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 300;
line-height: 1.9;
color: var(--clr-ink-soft);
letter-spacing: 0.04em;
}
/* マップ */
.company-map {
width: 100%;
aspect-ratio: 16 / 6;
border: 0.5px solid var(--clr-border-lt);
overflow: hidden;
margin-top: 40px;
}
.company-map iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
@media (max-width: 768px) {
.company-container {
padding: 60px var(--section-px) 100px;
}
.company-table th {
width: 120px;
font-size: 12px;
padding: 16px 14px;
}
.company-table td {
font-size: 13px;
padding: 16px 14px;
}
.history-list {
padding-left: 80px;
}
.history-list::before {
left: 60px;
}
.history-year {
left: -80px;
font-size: 15px;
}
.history-item::before {
left: -20px;
}
}
@media (max-width: 480px) {
.company-table {
display: block;
}
.company-table tbody {
display: block;
}
.company-table tr {
display: block;
border-bottom: 0.5px solid var(--clr-border-lt);
padding: 16px 0;
}
.company-table tr:first-child {
border-top: 0.5px solid var(--clr-border-lt);
}
.company-table th,
.company-table td {
display: block;
width: 100%;
border-bottom: none;
padding: 4px 0;
}
.company-table th {
font-size: 11px;
color: var(--clr-gold);
margin-bottom: 4px;
}
.history-list {
padding-left: 0;
}
.history-list::before {
display: none;
}
.history-item {
flex-direction: column;
gap: 6px;
border-left: 2px solid var(--clr-border);
padding: 12px 0 12px 20px;
}
.history-item::before {
left: -5px;
top: 18px;
}
.history-year {
position: static;
font-size: 14px;
}
}
/* ===============================================================
RECRUIT PAGE - 採用情報ページ専用スタイル
=============================================================== */
.recruit-hero {
background: var(--clr-green);
padding: 100px var(--section-px) 80px;
text-align: center;
color: var(--clr-cream);
position: relative;
overflow: hidden;
}
.recruit-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
45deg,
rgba(237, 217, 163, 0.03) 0,
rgba(237, 217, 163, 0.03) 1px,
transparent 0,
transparent 50%
);
background-size: 16px 16px;
pointer-events: none;
}
.recruit-hero-inner {
position: relative;
max-width: 700px;
margin: 0 auto;
}
.recruit-hero-catch {
font-family: "Noto Serif JP", serif;
font-size: clamp(20px, 3vw, 28px);
font-weight: 300;
line-height: 1.9;
letter-spacing: 0.12em;
margin-bottom: 24px;
}
.recruit-hero-sub {
font-size: 13px;
font-weight: 300;
color: rgba(237, 217, 163, 0.7);
letter-spacing: 0.08em;
line-height: 2;
}
/* 募集カードナビ */
.recruit-nav {
background: var(--clr-white);
padding: 60px var(--section-px);
border-bottom: 0.5px solid var(--clr-border-lt);
}
.recruit-nav-inner {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.recruit-nav-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 36px 32px;
border: 0.5px solid var(--clr-border);
text-decoration: none;
color: var(--clr-ink);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.recruit-nav-card::before {
content: "";
position: absolute;
inset: 0;
background: var(--clr-green);
transform: translateX(-100%);
transition: transform 0.38s ease;
z-index: 0;
}
.recruit-nav-card:hover::before {
transform: translateX(0);
}
.recruit-nav-card:hover {
border-color: var(--clr-green);
color: var(--clr-cream);
}
.recruit-nav-card:hover .recruit-nav-card__sub {
color: rgba(237, 217, 163, 0.75);
}
.recruit-nav-card:hover .recruit-nav-card__arrow {
border-color: var(--clr-gold-pale);
transform: translateX(6px);
}
.recruit-nav-card > * {
position: relative;
z-index: 1;
}
.recruit-nav-card__en {
font-family: "Cormorant Garamond", serif;
font-size: 10px;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--clr-gold);
transition: color 0.35s;
}
.recruit-nav-card:hover .recruit-nav-card__en {
color: var(--clr-gold-pale);
}
.recruit-nav-card__title {
font-family: "Noto Serif JP", serif;
font-size: 20px;
font-weight: 400;
letter-spacing: 0.1em;
}
.recruit-nav-card__sub {
font-size: 13px;
color: var(--clr-muted);
line-height: 1.7;
transition: color 0.35s;
}
.recruit-nav-card__arrow {
width: 28px;
height: 28px;
border: 0.5px solid var(--clr-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 8px;
transition: all 0.3s ease;
}
.recruit-nav-card__arrow::after {
content: "";
width: 6px;
height: 6px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg) translateX(-1px);
}
/* 求人セクション共通 */
.recruit-container {
max-width: 900px;
margin: 0 auto;
padding: 80px var(--section-px) 140px;
}
.recruit-job-section {
margin-bottom: 100px;
scroll-margin-top: 100px;
}
.recruit-job-header {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 0.5px solid var(--clr-border-lt);
}
.recruit-job-header__en {
font-family: "Cormorant Garamond", serif;
font-size: 11px;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--clr-gold);
}
.recruit-job-header__title {
font-family: "Noto Serif JP", serif;
font-size: clamp(22px, 3vw, 28px);
font-weight: 300;
color: var(--clr-ink);
letter-spacing: 0.1em;
}
/* 求人テーブル */
.recruit-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 40px;
}
.recruit-table th,
.recruit-table td {
padding: 20px 24px;
text-align: left;
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 300;
line-height: 1.9;
letter-spacing: 0.04em;
border-bottom: 0.5px solid var(--clr-border-lt);
vertical-align: top;
}
.recruit-table th {
width: 160px;
color: var(--clr-gold);
font-weight: 400;
font-size: 13px;
letter-spacing: 0.08em;
background: rgba(184, 149, 90, 0.03);
flex-shrink: 0;
}
.recruit-table td {
color: var(--clr-ink-soft);
}
.recruit-table tr:first-child th,
.recruit-table tr:first-child td {
border-top: 0.5px solid var(--clr-border-lt);
}
.recruit-note {
font-size: 12px;
color: var(--clr-muted);
line-height: 1.9;
letter-spacing: 0.04em;
padding: 20px 24px;
background: rgba(184, 149, 90, 0.03);
border: 0.5px solid var(--clr-border-lt);
margin-bottom: 40px;
}
/* 応募ボタン */
.recruit-apply-wrap {
text-align: center;
padding: 60px 0 0;
border-top: 0.5px solid var(--clr-border-lt);
}
.recruit-apply-lead {
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 300;
color: var(--clr-muted);
letter-spacing: 0.08em;
line-height: 2.2;
margin-bottom: 32px;
}
.line-qr-link {
display: block;
width: fit-content;
margin: 0 auto 32px;
transition: opacity 0.3s ease;
}
.line-qr-link:hover {
opacity: 0.75;
}
.line-qr-img {
display: block;
width: 160px;
height: 160px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.recruit-nav-inner {
grid-template-columns: 1fr;
}
.recruit-nav-card {
padding: 28px 24px;
}
.recruit-container {
padding: 60px var(--section-px) 100px;
}
.recruit-table th {
width: 120px;
font-size: 12px;
padding: 14px 14px;
}
.recruit-table td {
font-size: 13px;
padding: 14px 14px;
}
}
@media (max-width: 480px) {
.recruit-table {
display: block;
}
.recruit-table tbody {
display: block;
}
.recruit-table tr {
display: block;
border-bottom: 0.5px solid var(--clr-border-lt);
padding: 14px 0;
}
.recruit-table tr:first-child {
border-top: 0.5px solid var(--clr-border-lt);
}
.recruit-table th,
.recruit-table td {
display: block;
width: 100%;
border-bottom: none;
padding: 4px 0;
}
.recruit-table th {
font-size: 11px;
margin-bottom: 4px;
}
}
/* ===============================================================
シングルページ中央寄せ修正
サイドバーのないシングルページで記事を中央に配置
=============================================================== */
/* ニュース・トピックスのシングルページ：コンテンツを中央に */
.news-content-layout:has(.news-single-main):not(:has(.news-sidebar)),
.topics-content-layout:has(.topics-single-main):not(:has(.topics-sidebar)) {
justify-content: center;
}
/* フォールバック（:has未対応ブラウザ向け） */
.news-single-layout-center,
.topics-single-layout-center {
justify-content: center;
}
/* フォトケーキ用テーブル */
.photocake-info {
margin: 3em 0;
background: rgba(184, 149, 90, 0.04);
border: 0.5px solid var(--clr-border);
padding: 8px 0;
}
.photocake-table {
width: 100%;
border-collapse: collapse;
}
.photocake-table th,
.photocake-table td {
padding: 16px 24px;
text-align: left;
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 300;
line-height: 1.9;
letter-spacing: 0.04em;
border-bottom: 0.5px solid var(--clr-border-lt);
vertical-align: top;
}
.photocake-table tr:last-child th,
.photocake-table tr:last-child td {
border-bottom: none;
}
.photocake-table th {
width: 130px;
color: var(--clr-gold);
font-weight: 400;
font-size: 13px;
letter-spacing: 0.08em;
flex-shrink: 0;
}
.photocake-table td {
color: var(--clr-ink-soft);
}
@media (max-width: 480px) {
.photocake-table {
display: block;
}
.photocake-table tbody {
display: block;
}
.photocake-table tr {
display: block;
border-bottom: 0.5px solid var(--clr-border-lt);
padding: 14px 0;
}
.photocake-table tr:last-child {
border-bottom: none;
}
.photocake-table th,
.photocake-table td {
display: block;
width: 100%;
border-bottom: none;
padding: 4px 0;
}
.photocake-table th {
font-size: 11px;
margin-bottom: 4px;
}
}
/* LINEのQR画像 news-arbeit.html 内で適正サイズ */
.news-single-body .line-qr-link {
display: block;
width: fit-content;
margin: 24px auto 32px;
}
.news-single-body .line-qr-img {
display: block;
width: 180px;
height: 180px;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
/* シングルページ用コンテナ（幅を絞って中央に） */
.topics-container--single,
.news-container--single {
max-width: 960px;
}
/* ===============================================================
フォトケーキ ご注文の流れ
=============================================================== */
.photocake-flow {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 0 3em;
border-left: 1px solid var(--clr-border);
padding-left: 0;
}
.photocake-step {
display: flex;
gap: 28px;
align-items: flex-start;
padding: 32px 0 32px 32px;
border-bottom: 0.5px solid var(--clr-border-lt);
position: relative;
}
.photocake-step:last-child {
border-bottom: none;
}
/* 番号の丸 */
.photocake-step__num {
font-family: "Cormorant Garamond", serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--clr-white);
background: var(--clr-gold);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
left: -50px;
margin-right: -22px;
}
.photocake-step__body {
flex: 1;
}
.photocake-step__title {
font-family: "Noto Serif JP", serif;
font-size: 17px;
font-weight: 400;
color: var(--clr-ink);
letter-spacing: 0.06em;
margin: 0 0 12px !important;
}
.photocake-step__body p {
margin-bottom: 0 !important;
font-size: 14px;
line-height: 2;
color: var(--clr-ink-soft);
}
.photocake-step__body strong {
color: var(--clr-ink);
font-weight: 400;
}
/* 注意書きボックス */
.photocake-notice {
background: rgba(184, 149, 90, 0.06);
border: 0.5px solid var(--clr-border);
border-left: 3px solid var(--clr-gold);
padding: 28px 32px;
margin: 3.5em 0;
}
.photocake-notice__title {
font-family: "Noto Serif JP", serif;
font-size: 14px;
font-weight: 400;
color: var(--clr-gold);
letter-spacing: 0.08em;
margin: 0 0 12px !important;
}
.photocake-notice p:not(.photocake-notice__title) {
font-size: 13px;
line-height: 2.1;
color: var(--clr-ink-soft);
margin: 0 !important;
}
@media (max-width: 640px) {
.photocake-step {
padding: 24px 0 24px 24px;
gap: 16px;
}
.photocake-step__num {
left: -36px;
margin-right: -16px;
width: 30px;
height: 30px;
font-size: 11px;
}
.photocake-notice {
padding: 20px 20px;
}
}
/* ===============================================================
Work Environment グリッド：スマホで縦並び
=============================================================== */
@media (max-width: 640px) {
.work-env-grid {
grid-template-columns: 1fr !important;
}
}