アンカーweek2
:root {
--navy: #102A43;
--deep-navy: #0B1F33;
--white: #FAFAF7;
--sand: #E8E2D8;
--gold: #C4A46B;
--text: #1D2733;
}
body {
margin: 0;
color: var(--text);
background: var(--white);
font-family: "Noto Sans JP", "Inter", sans-serif;
}
.anchor-hero {
min-height: 92vh;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
background: var(--white);
}
.hero-visual {
background:
linear-gradient(rgba(16,42,67,.15), rgba(16,42,67,.25)),
url("https://placehold.co/1200x1400/102A43/FAFAF7?text=Ocean+%2B+Anchor+%2B+Pair+Wrist");
background-size: cover;
background-position: center;
}
.hero-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 8vw;
}
.eyebrow {
color: var(--gold);
letter-spacing: .18em;
font-size: 13px;
font-weight: 600;
margin-bottom: 18px;
}
h1 {
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-size: clamp(40px, 5vw, 76px);
line-height: 1.15;
font-weight: 500;
color: var(--navy);
margin: 0 0 24px;
}
.hero-sub {
font-size: 16px;
color: #5B6673;
margin-bottom: 36px;
}
.offer-box {
border: 1px solid var(--sand);
background: #fff;
padding: 24px;
max-width: 420px;
display: grid;
gap: 14px;
margin-bottom: 32px;
}
.offer-box strong {
color: var(--navy);
font-size: 1.25em;
}
.main-offer {
border-top: 1px solid var(--sand);
padding-top: 14px;
}
.main-offer strong {
color: var(--gold);
font-size: 1.55em;
}
.cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-width: 220px;
padding: 16px 32px;
background: var(--navy);
color: #fff;
text-decoration: none;
letter-spacing: .08em;
font-size: 14px;
}
.anchor-rules {
padding: 96px 8vw;
background: #fff;
text-align: center;
}
.anchor-rules h2 {
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-size: clamp(32px, 4vw, 54px);
font-weight: 500;
color: var(--navy);
margin: 0 0 48px;
}
.rule-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1040px;
margin: 0 auto;
}
.rule-card {
border: 1px solid var(--sand);
background: var(--white);
padding: 40px 32px;
}
.rule-card.featured {
border: 2px solid var(--gold);
background: #fff;
}
.rule-items {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
font-size: 17px;
}
.rule-items span {
border: 1px solid var(--sand);
padding: 12px 18px;
background: #fff;
}
.discount {
font-family: "Montserrat", sans-serif;
font-size: clamp(36px, 5vw, 64px);
color: var(--navy);
margin: 28px 0 0;
font-weight: 700;
}
.featured .discount {
color: var(--gold);
}
.note {
margin-top: 28px;
color: #66717F;
font-size: 14px;
}
@media (max-width: 768px) {
.anchor-hero {
grid-template-columns: 1fr;
}
.hero-visual {
min-height: 48vh;
}
.hero-content {
padding: 48px 24px 64px;
}
.offer-box {
max-width: none;
}
.cta {
width: 100%;
}
.anchor-rules {
padding: 72px 24px;
}
.rule-grid {
grid-template-columns: 1fr;
}
.rule-card {
padding: 32px 20px;
}
}
HOW IT WORKS
割引は、シンプルな2つのルール。
アクセサリー
＋
アクセサリー
20%OFF
腕時計
＋
アクセサリー or 腕時計
35%OFF
※3点以上も対象です。腕時計を1点でも含めば、全体が35%OFFになります。