/*
京都試作ネット25周年ページ コンテンツ用CSS
本家サイト (kyoto-shisaku.com/25th-anniversary) 埋め込み用
依存フォント: Noto Sans JP / Noto Serif JP
下記のGoogle Fonts読み込みタグを に追加してください:
すべてのスタイルは .zen-anniversary 配下にスコープされており、
本家サイトの既存スタイルに影響しません。
*/
:root {
--font-noto-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
--font-noto-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.zen-anniversary .object-cover {
object-fit: cover;
}
/* Stitch: Anniversary Hub (Reconstructed Zen) + Authentic Timeline */
.zen-anniversary {
--zen-ink: #171717;
--zen-crimson: #b7131e;
--zen-cream: #fbf9f4;
--zen-cream-alt: #fef9f0;
--zen-timeline-dot: #00bcd4;
color: var(--zen-ink);
font-family: var(--font-noto-sans), "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo,
sans-serif;
line-height: 1.9;
-webkit-font-smoothing: antialiased;
}
.zen-anniversary .zen-layout {
width: min(1440px, calc(100% - clamp(40px, 8vw, 160px)));
margin-inline: auto;
}
.zen-anniversary__hero {
padding: clamp(28px, 5vw, 80px) 0 clamp(48px, 6vw, 80px);
background:
radial-gradient(circle at 20% 20%, rgba(201, 163, 74, 0.18), transparent 28%),
linear-gradient(135deg, #fff 0%, #fff8ea 60%, #f2eadc 100%);
}
.zen-anniversary__hero-inner {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: clamp(24px, 3vw, 40px);
/* gap: clamp(24px, 5vw, 72px); */
align-items: center;
}
.zen-anniversary__hero-copy {
max-width: 100%;
/* max-width: 620px; */
}
.zen-anniversary__eyebrow {
display: block;
margin-bottom: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--zen-crimson);
}
.zen-anniversary__hero-title {
margin: 18px 0;
font-size: clamp(42px, 7.6vw, 92px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.06em;
}
.zen-anniversary__hero-lead {
margin: 0 0 18px;
font-size: clamp(18px, 2.2vw, 28px);
font-weight: 600;
line-height: 1.7;
}
.zen-anniversary__hero-body {
margin: 0;
max-width: 620px;
font-size: 16px;
color: #666;
}
.zen-anniversary__collage {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 260px 230px 260px;
gap: 16px;
width: 100%;
}
.zen-anniversary__card {
position: relative;
overflow: hidden;
border-radius: 28px;
background: #eee;
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.16);
}
.zen-anniversary__card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.zen-anniversary__card--large {
grid-row: 1 / span 2;
}
.zen-anniversary__card--bottom {
grid-column: 1 / span 2;
}
@media (max-width: 860px) {
.zen-anniversary__hero-inner {
grid-template-columns: 1fr;
}
.zen-anniversary__collage {
grid-template-rows: 200px 170px 200px;
}
}
@media (max-width: 520px) {
.zen-anniversary__collage {
grid-template-columns: 1fr;
grid-template-rows: 240px 220px 220px;
}
.zen-anniversary__card--large,
.zen-anniversary__card--bottom {
grid-column: auto;
grid-row: auto;
}
}
.zen-anniversary__img {
position: relative;
overflow: hidden;
border-radius: 24px;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
.zen-anniversary__img img {
object-fit: cover;
}
.zen-anniversary__img--wide img {
width: 100%;
height: 100%;
object-fit: cover !important;
border-radius: 24px;
}
.zen-anniversary__img--sub img {
width: 100%;
height: 100%;
object-fit: cover !important;
border-radius: 24px;
}
.zen-history__phase > .zen-anniversary__img {
max-width: 34rem !important;
}
.zen-history__phase > .zen-anniversary__img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.zen-anniversary__subnav {
display: flex;
justify-content: center;
border-bottom: 1px solid #f3f4f6;
padding: 40px 0;
background: #fff;
/* ▼ メニューを画面上に固定する場合は有効にする */
position: sticky;
top: 0;
z-index: 100;
}
.zen-anniversary__subnav-inner {
display: flex;
align-items: center;
gap: clamp(32px, 8vw, 80px);
}
.zen-anniversary__subnav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: #9ca3af;
transition: color 0.2s ease;
}
.zen-anniversary__subnav-item:hover,
.zen-anniversary__subnav-item.is-active {
color: var(--zen-crimson);
}
.zen-anniversary__subnav-item.is-active {
position: relative;
}
.zen-anniversary__subnav-item.is-active::after {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
width: 20px;
height: 2px;
background: var(--zen-crimson);
transform: translateX(-50%);
}
.zen-anniversary__subnav-en {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
}
.zen-anniversary__subnav-ja {
font-size: 13px;
font-weight: 700;
}
.zen-anniversary__subnav-divider {
width: 1px;
height: 24px;
background: #e5e7eb;
}
.zen-anniversary__section-label {
display: block;
margin-bottom: 24px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4em;
color: var(--zen-crimson);
}
.zen-anniversary__section-title {
margin: 0 0 40px;
font-size: clamp(32px, 4.5vw, 48px);
font-weight: 700;
line-height: 1.35;
}
.zen-anniversary__intro {
padding: clamp(64px, 8vw, 128px) 0 0;
background: #fff;
text-align: center;
}
.zen-anniversary__intro-body {
max-width: 42rem;
margin-inline: auto;
font-size: 16px;
color: #4b5563;
}
.zen-anniversary__story {
padding: clamp(64px, 8vw, 128px) 0;
}
.zen-anniversary__story--cream {
background: var(--zen-cream);
}
.zen-anniversary__story--white {
background: #fff;
}
.zen-anniversary__story-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 64px);
align-items: center;
}
@media (min-width: 1024px) {
.zen-anniversary__story-grid {
grid-template-columns: 1fr 1fr;
}
.zen-anniversary__story-grid--reverse .zen-anniversary__story-media {
order: 2;
}
.zen-anniversary__story-grid--reverse .zen-anniversary__story-copy {
order: 1;
padding-right: 48px;
padding-left: 0;
}
}
.zen-anniversary__story-copy {
padding-left: 0;
}
@media (min-width: 1024px) {
.zen-anniversary__story-copy {
padding-left: 48px;
}
}
.zen-anniversary__story-label {
display: block;
margin-bottom: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--zen-crimson);
}
.zen-anniversary__story-theme {
display: block;
margin-bottom: 16px;
font-size: 14px;
font-weight: 700;
color: var(--zen-crimson);
}
.zen-anniversary__story-title {
margin: 0 0 32px;
font-size: clamp(32px, 4vw, 44px);
font-weight: 700;
line-height: 1.25;
}
.zen-anniversary__partner-logo {
margin: -12px 0 28px;
max-width: 280px;
}
.zen-anniversary__partner-logo img {
width: 100%;
height: auto;
display: block;
}
.zen-anniversary__story-body {
margin: 0 0 40px;
color: #4b5563;
}
.zen-anniversary__quote {
padding: 40px;
border-left: 4px solid var(--zen-crimson);
border-radius: 16px;
background: var(--zen-cream);
font-size: 18px;
font-weight: 700;
line-height: 1.7;
white-space: pre-line;
}
.zen-anniversary__story--cream .zen-anniversary__quote {
background: #fff;
}
.zen-anniversary__story-media-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.zen-anniversary__story-media-grid .zen-anniversary__img--wide {
grid-column: 1 / -1;
aspect-ratio: 16 / 9;
}
.zen-anniversary__story-media-grid .zen-anniversary__img--sub {
aspect-ratio: 4 / 3;
}
.zen-anniversary__story-duo {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.zen-anniversary__story-duo .zen-anniversary__img {
position: relative;
aspect-ratio: 4 / 5;
}
.zen-anniversary__caption {
position: absolute;
bottom: 16px;
left: 24px;
padding: 4px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.85);
font-size: 10px;
font-weight: 700;
color: #6b7280;
}
.zen-anniversary__banner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(360px, 50vw, 600px);
overflow: hidden;
color: #fff;
text-align: center;
}
.zen-anniversary__banner img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.5);
}
.zen-anniversary__banner-content {
position: relative;
z-index: 1;
padding: 48px 24px;
}
.zen-anniversary__banner-eyebrow {
display: block;
margin-bottom: 24px;
font-size: 11px;
letter-spacing: 0.5em;
}
.zen-anniversary__banner-title {
margin: 0 0 32px;
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
}
.zen-anniversary__banner-lead {
margin: 0 0 16px;
font-size: clamp(18px, 2.5vw, 20px);
}
.zen-anniversary__banner-body {
max-width: 36rem;
margin: 0 auto;
font-size: 15px;
line-height: 1.9;
opacity: 0.85;
}
.zen-anniversary__cta {
padding: clamp(64px, 8vw, 128px) 0;
background: #fff;
}
.zen-anniversary__cta-grid {
display: flex;
flex-direction: column;
gap: 48px;
}
@media (min-width: 768px) {
.zen-anniversary__cta-grid {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.zen-anniversary__cta-title {
margin: 0 0 24px;
font-size: 24px;
font-weight: 700;
line-height: 1.6;
}
.zen-anniversary__cta-highlight {
color: var(--zen-crimson);
text-decoration: underline;
text-underline-offset: 8px;
}
.zen-anniversary__cta-body {
margin: 0;
color: #4b5563;
}
.zen-anniversary__cta-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 32px;
}
.zen-btn-crimson {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 20px 48px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.15em;
color: #fff;
background: var(--zen-crimson);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.zen-btn-crimson:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.zen-link-underline {
padding-bottom: 4px;
border-bottom: 1px solid var(--zen-ink);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
transition: color 0.2s ease, border-color 0.2s ease;
}
.zen-link-underline:hover {
color: var(--zen-crimson);
border-color: var(--zen-crimson);
}
/* Authentic Timeline */
.zen-history {
padding: clamp(64px, 8vw, 128px) 0;
background: #fff;
border-top: 1px solid #f3f4f6;
}
.zen-history__head {
margin-bottom: clamp(48px, 8vw, 96px);
text-align: center;
}
.zen-history__track {
--timeline-axis: 0px;
--timeline-gutter: 60px;
max-width: 56rem;
padding-left: var(--timeline-gutter);
margin-inline: auto;
position: relative;
}
.zen-history__track::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: var(--timeline-axis);
width: 1px;
background: #d1d5db;
}
.zen-history__phase {
position: relative;
margin-bottom: 80px;
}
.zen-history__phase:last-child {
margin-bottom: 0;
}
.zen-history__marker {
position: absolute;
left: calc(var(--timeline-axis) - var(--timeline-gutter) - 4.5px);
top: 1.1rem;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--zen-timeline-dot);
z-index: 1;
}
.zen-history__period-head {
position: relative;
display: flex;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.zen-history__period-head::before {
content: "";
position: absolute;
left: calc(var(--timeline-axis) - var(--timeline-gutter));
width: calc(var(--timeline-gutter) - var(--timeline-axis));
height: 1px;
background: #d1d5db;
}
.zen-history__period-head--plain {
border-bottom: none;
padding-bottom: 0;
}
.zen-history__period-title {
margin: 0;
font-family: var(--font-noto-serif), "Noto Serif JP", serif;
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
line-height: 1.45;
}
.zen-history__intro-text {
margin: 0 0 32px;
font-size: 16px;
color: #4b5563;
}
.zen-history__slider {
margin: 32px auto;
max-width: 34rem !important;
text-align: center;
}
.zen-history__table {
width: 100%;
border-collapse: collapse;
}
.zen-history__row {
border-bottom: 1px solid #f3f4f6;
}
.zen-history__year {
width: 120px;
padding: 1.5rem 1.5rem 1.5rem 0;
font-weight: 700;
vertical-align: top;
}
.zen-history__desc {
padding: 1.5rem 0;
vertical-align: top;
color: #374151;
}
.zen-history__desc p {
margin: 0 0 8px;
}
.zen-history__desc p:last-child {
margin-bottom: 0;
}
.zen-history__bullet-diamond::before {
content: "◆";
margin-right: 8px;
font-size: 10px;
color: var(--zen-crimson);
}
.zen-history__bullet-star::before {
content: "★";
margin-right: 8px;
font-size: 10px;
color: var(--zen-crimson);
}
.zen-history__notes {
margin-top: 80px;
font-size: 12px;
color: #9ca3af;
text-align: right;
}
.zen-history__slider-viewport {
display: block;
max-width: 34rem;
aspect-ratio: 4 / 3;
background: #f3f4f6;
margin-inline: auto;
}
.zen-history__slider-img {
width: 100%;
height: 100%;
margin-inline: auto;
object-fit: cover !important;
opacity: 1;
transition: opacity 0.25s ease-in-out;
}
.zen-history__slider-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 11px;
color: #9ca3af;
}
.zen-history__slider-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: 1px solid #e5e7eb;
background: #fff;
color: #6b7280;
line-height: 1;
}
.zen-link {
text-align: center;
margin-bottom: 104px;
}
.zen-link__link-btn {
display: inline-block;
padding: 12px 35px;
border: 1px solid #222;
color: #222;
text-decoration: none;
font-size: 16px;
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
opacity 1.0s ease,
transform 1.0s ease !important;
}
.zen-link__link-btn:hover {
background:#b7131e;
border-color:#b7131e;
color:#fff;
}
/* ==========================================================================
スクロールフェードアニメーション
========================================================================== */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 1.0s ease, transform 1.0s ease;
}
.fade-in.is-visible {
opacity: 1;
transform: translateY(0);
}
.fade-in-btn {
transition-delay: 0.3s;
}
/* ==========================================================================
時間差（ディレイ）用オプションクラス
========================================================================== */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }
.delay-700 { transition-delay: 0.7s; }
.delay-800 { transition-delay: 0.8s; }
.delay-900 { transition-delay: 0.9s; }
/* ==========================================================================
LP専用 フッター独自スタイル
========================================================================== */
/* --- Footer --- */
.zen-lp-footer {
font-family: "Noto Sans JP", sans-serif;
color: #434343;
background: #fff;
border-top: 1px solid #e5e7eb;
position: relative;
}
/*
.zen-lp-footer__pagetop {
position: fixed;
bottom: 30px;
right: 15px;
z-index: 100;
display: block;
transition: opacity 0.3s, visibility 0.3s;
opacity: 0;
visibility: hidden;
}
.zen-lp-footer__pagetop:hover {
opacity: 0.8 !important;
}
.zen-lp-footer__pagetop.is-show {
opacity: 1;
visibility: visible;
}
@media (min-width: 576px) {
.zen-lp-footer__pagetop {
right: 50px;
}
}
.zen-lp-footer__pagetop img {
width: 40px;
height: auto;
}
@media (min-width: 768px) {
.zen-lp-footer__pagetop img {
width: 60px;
}
}
*/
.zen-lp-footer__copyright {
margin: 0;
background-color: #535353;
padding: 10px 15px;
text-align: center;
color: #fff;
font-size: 13px;
}