@charset "UTF-8";
:root {
--clay-navy: #1a242c;
--clay-navy-deep: #0f161b;
--clay-navy-light: #293845;
--clay-blue: #22374a;
--clay-gold: #8a7a5c;
--clay-gold-bright: #b5a484;
--clay-gold-light: #f0ede6;
--clay-text: #2e3338;
--clay-muted: #6c757d;
--clay-soft: #f6f5f3;
--clay-border: #e6e4e0;
--clay-border-gold: rgba(138, 122, 92, 0.25);
--clay-shadow-sm: 0 6px 20px rgba(26, 36, 44, 0.06);
--clay-shadow-md: 0 16px 40px rgba(26, 36, 44, 0.09);
--clay-shadow-lg: 0 28px 64px rgba(26, 36, 44, 0.14);
--clay-radius-sm: 12px;
--clay-radius-md: 20px;
--clay-radius-lg: 32px;
--clay-transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html {
scroll-behavior: smooth;
scroll-padding-top: 50px;
}
.clay-lp {
width: 100%;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
color: var(--clay-text);
background: #ffffff;
font-size: 16px;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.clay-lp *, .clay-lp *::before, .clay-lp *::after { box-sizing: border-box; }
.clay-lp img { display: block; max-width: 100%; height: auto; }
.clay-lp section[id] { scroll-margin-top: 50px; }
.clay-container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.clay-section { position: relative; width: 100%; padding: 100px 0; }
.clay-section--soft { background: var(--clay-soft); }
/* ---------------------------------------------------------
ELEGANT ANIMATIONS (追加されたゆったり・上品なアニメーション)
--------------------------------------------------------- */
.clay-js .clay-elegant-anim {
opacity: 0;
transform: translateY(15px);
}
.clay-js .clay-elegant-anim.is-visible {
/* cubic-bezierで滑らかな入りと緩やかな定着を表現 */
animation: elegantFadeUp 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes elegantFadeUp {
0% { opacity: 0; transform: translateY(15px); }
100% { opacity: 1; transform: translateY(0); }
}
/* 図示の線の伸びるアニメーション（遅れて白くオーバーレイする） */
.clay-js .clay-callout-line {
opacity: 0;
transform: scaleX(0);
transform-origin: left center;
}
.clay-js .is-visible .clay-callout-line {
/* グラフ等の描画後にスッと伸びるよう、遅延を入れる */
animation: lineDraw 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}
@keyframes lineDraw {
0% { opacity: 0; transform: scaleX(0); }
100% { opacity: 1; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.clay-js .clay-elegant-anim, .clay-js .clay-callout-line {
opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
}
}
/* ---------------------------------------------------------
Headings & Elements
--------------------------------------------------------- */
.clay-heading { position: relative; z-index: 1; max-width: 860px; margin: 0 auto 56px; text-align: center; }
.clay-heading h2, .clay-contact h2 { margin: 0 0 20px; color: var(--clay-navy); font-size: clamp(28px, 4.2vw, 44px); font-weight: 800; line-height: 1.35; letter-spacing: 0.03em; }
.clay-heading p, .clay-contact p { margin: 0; color: var(--clay-muted); font-size: 16px; font-weight: 500; line-height: 1.85; }
.clay-eyebrow { margin: 0 0 12px !important; color: var(--clay-gold) !important; font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.clay-safety .clay-eyebrow { color: #FFFFFF !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.clay-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 240px; min-height: 60px; padding: 16px 36px; overflow: hidden; border-radius: 999px; font-size: 16px; font-weight: 800; letter-spacing: 0.05em; text-decoration: none; transition: var(--clay-transition); }
.clay-btn--primary { color: #ffffff !important; background: linear-gradient(135deg, #817253 0%, #ad9c7c 45%, #c5b699 55%, #8a7a5c 100%); background-size: 200% auto; box-shadow: 0 12px 30px rgba(138, 122, 92, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.clay-btn--primary::after { content: ""; position: absolute; top: -50%; left: -150%; width: 80%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: rotate(25deg); animation: clayBtnShine 4s infinite; }
@keyframes clayBtnShine { 0% { left: -150%; } 30%, 100% { left: 150%; } }
.clay-btn--primary:hover { transform: translateY(-3px) scale(1.02); background-position: right center; box-shadow: 0 18px 40px rgba(138, 122, 92, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
/* HERO & BACKGROUND */
@keyframes heroBgPulse { 0% { transform: scale(1); } 50% { transform: scale(1.04) translate(-1%, -1%); } 100% { transform: scale(1); } }
@keyframes heroGlowShift { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.15); } }
.clay-hero { position: relative; isolation: isolate; width: 100%; padding: 100px 0 70px; overflow: hidden; background: #fbf9f6; }
.clay-hero::before { content: ""; position: absolute; inset: -20px; z-index: -3; background: linear-gradient(98deg, rgba(255, 255, 255, 0.96) 0%, rgba(251, 249, 246, 0.88) 38%, rgba(235, 225, 205, 0.35) 68%, rgba(215, 202, 175, 0.12) 100%), url('/solar/semi-solid-clay-based-battery/img/the_difference_is_the_clay.png') center center / cover no-repeat; animation: heroBgPulse 18s ease-in-out infinite; }
.clay-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at 72% 65%, rgba(190, 170, 130, 0.25) 0%, transparent 45%), radial-gradient(circle at 65% 70%, rgba(240, 230, 210, 0.7) 0 2px, transparent 3px), radial-gradient(circle at 78% 60%, rgba(245, 240, 225, 0.8) 0 1.5px, transparent 2.5px), radial-gradient(circle at 84% 75%, rgba(185, 165, 120, 0.4) 0 2px, transparent 3px), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(138, 122, 92, 0.05) 100%); animation: heroGlowShift 8s ease-in-out infinite; }
.clay-hero__inner { position: relative; z-index: 1; width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: 60px; align-items: center; }
.clay-hero__content { position: relative; padding: 10px 0; }
.clay-hero__content::after { content: ""; display: block; width: 140px; height: 3px; margin-top: 32px; border-radius: 3px; background: linear-gradient(90deg, var(--clay-gold), rgba(138, 122, 92, 0)); }
.clay-hero__title { margin: 0 0 24px; color: var(--clay-navy); font-size: clamp(38px, 4.8vw, 62px); font-weight: 800; line-height: 1.22; letter-spacing: 0.02em; text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8); }
.clay-hero__lead { max-width: 660px; margin: 0 0 32px; color: #424a52; font-size: 16.5px; font-weight: 500; line-height: 1.9; }
.clay-hero__visual { display: flex; align-items: center; justify-content: center; min-height: 420px; }
@keyframes productCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.clay-product-card { position: relative; width: min(100%, 400px); padding: 36px 32px 30px; border: 1px solid rgba(215, 205, 185, 0.5); border-radius: var(--clay-radius-lg); background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 240, 0.92)); box-shadow: 0 32px 80px rgba(40, 45, 50, 0.08), inset 0 1px 0 #ffffff; text-align: center; backdrop-filter: blur(16px); animation: productCardFloat 6s ease-in-out infinite; }
.clay-product-card::before { content: ""; position: absolute; top: -60px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(195, 175, 140, 0.2), transparent 70%); }
.clay-product-card__title { position: relative; z-index: 1; margin: 0 0 18px; color: var(--clay-navy); font-size: clamp(19px, 2.2vw, 25px); font-weight: 800; line-height: 1.4; }
.clay-product-card img { position: relative; z-index: 1; width: min(220px, 70%); max-height: 280px; margin: 0 auto 18px; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(25, 35, 45, 0.15)); transition: transform 0.4s ease; }
.clay-product-card:hover img { transform: scale(1.04); }
.clay-product-card__text { position: relative; z-index: 1; margin: 0; color: var(--clay-muted); font-size: 14px; font-weight: 700; line-height: 1.7; }
.clay-product-card__logo { display: flex; justify-content: center; align-items: center; margin-top: 12px; margin-bottom: 24px; }
.clay-product-card__logo img { width: 100%; max-width: 280px; height: auto; }
@media (min-width: 769px) { .clay-product-card__logo img { max-width: 364px; } }
.clay-text-left { text-align: left; }
.clay-text-left p { margin-bottom: 1em; line-height: 1.8; }
.clay-text-left p:last-child { margin-bottom: 0; }
.clay-toc { position: relative; z-index: 1; margin-top: 50px; }
.clay-toc__list { width: min(1140px, calc(100% - 48px)); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.clay-toc__list a { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px 18px; border: 1px solid var(--clay-border-gold); border-radius: 999px; color: var(--clay-navy); background: rgba(255, 255, 255, 0.92); font-size: 14.5px; font-weight: 700; text-decoration: none; box-shadow: var(--clay-shadow-sm), inset 0 1px 0 #ffffff; backdrop-filter: blur(8px); transition: var(--clay-transition); }
.clay-toc__list a:hover { transform: translateY(-2px); color: var(--clay-gold); border-color: var(--clay-gold); box-shadow: var(--clay-shadow-md), inset 0 1px 0 #ffffff; }
.clay-movie__frame { position: relative; width: 100%; max-width: 940px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--clay-radius-md); background: #000; box-shadow: var(--clay-shadow-lg); border: 1px solid rgba(255, 255, 255, 0.8); }
.clay-movie__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clay-grid { position: relative; z-index: 1; display: grid; gap: 28px; }
.clay-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clay-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clay-card { overflow: hidden; border: 1px solid var(--clay-border); border-radius: var(--clay-radius-md); background: #ffffff; box-shadow: var(--clay-shadow-sm); transition: var(--clay-transition); }
.clay-card:hover { transform: translateY(-6px); border-color: rgba(138, 122, 92, 0.3); box-shadow: var(--clay-shadow-lg); }
.clay-card > img { width: 100%; height: 220px; object-fit: cover; background: #ffffff; transition: transform 0.5s ease; }
/* safety-check.jpeg / long-term_use_of_batteries.png: a flat, edge-to-
edge photo (no shadow, no surrounding white margin) with only the
top-left/top-right corners softly rounded so it blends smoothly
into the card's own rounded top edge, instead of a floating
drop-shadowed square. Height matches the other cover-fit card
images so the two-column grid still lines up evenly. */
.clay-card > img.clay-card__img--contain {
height: 220px;
object-fit: cover;
border-radius: 18px 18px 0 0;
}
.clay-card:hover > img { transform: scale(1.04); }
.clay-card__body { padding: 30px; }
.clay-card h3, .clay-text-panel h3, .clay-cycle h3, .clay-reason__panel h3 { margin: 0 0 14px; color: var(--clay-navy); font-size: 21px; font-weight: 800; line-height: 1.45; }
.clay-card p { margin: 0; color: var(--clay-muted); font-size: 15px; line-height: 1.75; }
.clay-tag { display: inline-flex !important; margin: 0 0 14px !important; padding: 4px 14px; border-radius: 999px; color: var(--clay-gold); background: rgba(138, 122, 92, 0.1); font-size: 12.5px; font-weight: 800; }
.clay-number { margin: 0 0 8px !important; color: var(--clay-gold); font-size: 18px; font-weight: 900; letter-spacing: 0.05em; }
.clay-reason { isolation: isolate; background: #f4f3ef; }
.clay-reason::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.7)), url('/solar/semi-solid-clay-based-battery/img/semi-solid-clay_materials_and_electrodes.png') center / cover no-repeat; filter: contrast(1.02); }
.clay-reason__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; align-items: center; }
.clay-text-panel, .clay-reason__panel { padding: 36px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--clay-radius-md); background: rgba(255, 255, 255, 0.92); box-shadow: var(--clay-shadow-md); backdrop-filter: blur(12px); }
.clay-reason__panel { color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); background: linear-gradient(135deg, rgba(26, 36, 44, 0.97), rgba(41, 56, 69, 0.95)); }
.clay-reason__panel h3 { color: #ffffff; }
.clay-reason__panel ul { margin: 20px 0 0; padding: 0; list-style: none; }
.clay-reason__panel li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); font-size: 15.5px; font-weight: 600; }
.clay-reason__panel li:last-child { border-bottom: none; }
.clay-reason__panel li::before { content: "✓"; position: absolute; left: 0; color: #cbbba1; font-weight: 900; }
.clay-safety { isolation: isolate; color: #ffffff; background: var(--clay-navy); }
.clay-safety::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(26, 36, 44, 0.95) 0%, rgba(26, 36, 44, 0.8) 60%, rgba(26, 36, 44, 0.5) 100%), url('/solar/semi-solid-clay-based-battery/img/internal-structure_of_a_rechargeable-battery.png') center / cover no-repeat; filter: brightness(1.02) contrast(1.02); }
.clay-safety .clay-heading h2 { color: #ffffff; }
.clay-safety .clay-heading p { color: rgba(255, 255, 255, 0.85); }
.clay-dark-card { padding: 32px 24px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--clay-radius-md); color: #ffffff; background: rgba(26, 36, 44, 0.75); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); }
.clay-dark-card h3 { color: #ffffff; }
.clay-dark-card strong { display: block; color: #d1c5a9; font-size: clamp(24px, 2.3vw, 32px); font-weight: 900; line-height: 1.2; }
.clay-safety__details { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
.clay-safety__details article { padding: 32px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--clay-radius-md); background: rgba(26, 36, 44, 0.85); backdrop-filter: blur(10px); }
.clay-safety__details h3 { color: #ffffff; font-size: 22px; margin: 0 0 18px; }
/* unit-cell_and_electrode.png / lfp_and_electrolyte.png (both 1280x960,
a 4:3 image): the frame keeps the same 4:3 shape as the source images,
and the image itself is sized to 80% of the frame's width, so it
reaches 80% fill on every side rather than sitting with large empty
margins. */
.clay-safety__frame { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 0 20px; aspect-ratio: 4 / 3; border-radius: var(--clay-radius-sm); background: #ffffff; overflow: hidden; }
.clay-safety__frame img { width: 80%; height: auto; object-fit: contain; }
/* ---------------------------------------------------------
① LONG LIFE - Layout & Design Update
--------------------------------------------------------- */
.clay-cycle {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 36px;
align-items: stretch;
padding: 40px;
border-radius: var(--clay-radius-lg);
border: 1px solid var(--clay-border);
background: linear-gradient(145deg, #ffffff, #f7f6f4);
box-shadow: var(--clay-shadow-md);
}
.clay-cycle__number {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 24px;
border-radius: var(--clay-radius-md);
color: #ffffff;
text-align: center;
background: linear-gradient(135deg, #81765f, #aa9a7a, #81765f);
box-shadow: 0 14px 32px rgba(138, 122, 92, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.clay-cycle__number span { font-size: clamp(48px, 5vw, 64px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.clay-cycle__number sup { font-size: 14px; vertical-align: top; }
.clay-cycle__number small { margin-top: 14px; font-size: 18px; font-weight: 800; }
.clay-cycle__main {
display: flex;
flex-direction: column;
gap: 24px;
}
.clay-cycle-graph {
margin: 0;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
}
.clay-cycle-graph img {
width: 100%;
height: auto;
object-fit: contain;
}
.clay-cycle__content h3 { font-size: 21px; margin: 0 0 12px; }
.clay-cycle__content p { margin: 0; font-size: 15px; line-height: 1.7; }
.clay-note { color: var(--clay-muted); font-size: 12.5px; margin-top: 10px; }
.clay-cycle__note {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
margin-top: 24px;
padding: 24px 28px;
background: #f9f8f4;
border: 1px solid #ebe6dd;
border-radius: var(--clay-radius-sm);
}
.clay-cycle__note-copy h3 { font-size: 17px; margin-bottom: 8px; }
.clay-cycle__note-copy p { font-size: 14px; margin-bottom: 6px; }
.clay-cycle__note img { width: 100%; max-width: 160px; object-fit: contain; }
/* ---------------------------------------------------------
TECH FEATURES & COMPARE
--------------------------------------------------------- */
.clay-longlife-tech { margin-top: 48px; }
.clay-longlife-tech__notes { margin-bottom: 20px; color: #4f555a; font-size: 12px; line-height: 1.65; }
.clay-longlife-tech__panel { position: relative; padding: 44px 34px 34px; border: 1px solid #e2dfd8; border-radius: 28px; background: #f2f1ee; box-shadow: var(--clay-shadow-md); }
.clay-patent-badge { position: absolute; top: -18px; right: 38px; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; color: #fff; background: #9a8968; text-align: center; font-size: 16px; font-weight: 800; box-shadow: 0 12px 28px rgba(48,42,31,.2); }
.clay-longlife-tech__heading { text-align: center; margin-bottom: 34px; }
.clay-longlife-tech__heading h3 { font-size: clamp(24px, 2.65vw, 34px); color: var(--clay-navy); margin: 0; line-height: 1.5; }
.clay-longlife-tech__inner { padding: 40px; background: #fff; border-radius: 20px; }
.clay-longlife-tech__inner h4, .clay-tech-compare h4 { margin: 0 0 24px; font-size: clamp(19px,2vw,24px); color: var(--clay-navy); }
/* ③ 図示の線2.png: グラデーションオーバーレイとレイアウト */
.clay-tech-compare { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e0e6e8; }
.clay-tech-compare__flow { display: grid; grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr); gap: 20px; align-items: center; }
.clay-tech-compare__stage { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; }
.clay-tech-compare__image-wrap { position: relative; }
.clay-tech-compare__image-wrap > img, .clay-tech-compare__stage--after > img { width: 100%; height: 260px; object-fit: cover; border-radius: 12px; }
.clay-tech-compare__callouts, .clay-tech-compare__results { display: flex; flex-direction: column; gap: 24px; }
.clay-tech-compare__callouts p, .clay-tech-compare__results p {
position: relative; /* 線の起点にするため */
margin: 0; padding: 18px 12px; border: 1px solid #91b4c1; border-radius: 8px; background: #fff; text-align: center; font-size: 13.5px; line-height: 1.5; box-shadow: 0 4px 10px rgba(0,0,0,0.03); z-index: 2;
}
.clay-tech-compare__results p { border-style: dashed; }
.clay-tech-compare__results strong { display: block; margin-top: 8px; color: #d9534f; font-size: 16px; }
/* 線のスタイル（隙間は水色、画像上は白になるグラデーション） */
.clay-callout-line {
position: absolute;
top: 50%;
right: -95px; /* ボックス右端からギャップを跨いで画像上へ */
width: 95px;
height: 2px;
background: linear-gradient(90deg, #91b4c1 0%, #91b4c1 40px, #ffffff 40px, #ffffff 100%);
z-index: 10;
}
.clay-callout-line::after {
content: "";
position: absolute;
right: 0;
top: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 0 6px rgba(0,0,0,0.4); /* 画像上で視認性を高めるシャドウ */
}
.clay-tech-compare__arrow { text-align: center; font-size: 14px; color: #555; margin: 0; }
.clay-tech-compare__arrow b { display: block; color: #526f7b; font-size: 48px; line-height: 1; margin-top: 8px; }
.clay-longlife-tech__footnote { margin: 28px 0 0; color: #666; font-size: 11.5px; }
/* ---------------------------------------------------------
QUALITY & FAQ (Existing)
--------------------------------------------------------- */
.clay-card__image { position: relative; width: 100%; height: 220px; overflow: hidden; }
.clay-card__image > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.clay-card:hover .clay-card__image > img { transform: scale(1.04); }
.clay-card__image--with-note .clay-image-note { position: absolute; right: 0; bottom: 0; padding: 4px 10px; color: #ffffff; background: rgba(45, 50, 55, 0.85); font-size: 11.5px; }
.clay-faq { max-width: 920px; margin: 0 auto; display: grid; gap: 20px; }
.clay-faq details { border: 1px solid var(--clay-border); border-radius: var(--clay-radius-md); background: #ffffff; }
.clay-faq summary { position: relative; padding: 20px 80px; font-size: 17px; font-weight: 800; cursor: pointer; list-style: none; }
.clay-faq summary::-webkit-details-marker { display: none; }
.clay-faq summary::before { content: "Q"; position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; color: #ffffff; background: var(--clay-blue); display: grid; place-items: center; }
.clay-faq summary::after { content: "+"; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; color: var(--clay-blue); background: #f0f2f5; display: grid; place-items: center; font-size: 26px; }
.clay-faq details[open] summary { color: #ffffff; background: linear-gradient(90deg, var(--clay-navy-deep), var(--clay-navy-light)); }
.clay-faq details[open] summary::before { background: var(--clay-gold); }
.clay-faq details[open] summary::after { content: "−"; color: #ffffff; background: rgba(255, 255, 255, 0.15); }
.clay-faq details > p { position: relative; padding: 20px 36px 20px 80px; margin: 0; background: #fafaf9; border-top: 1px solid var(--clay-border); }
.clay-faq details > p::before { content: "A"; position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; color: #ffffff; background: #b54a4a; display: grid; place-items: center; }
.clay-contact { color: #ffffff; text-align: center; background: linear-gradient(145deg, var(--clay-navy-deep), var(--clay-navy), var(--clay-navy-deep)); }
.clay-trademark { width: min(1140px, calc(100% - 48px)); margin: 28px auto 60px; padding: 0; list-style: none; color: var(--clay-muted); font-size: 12.5px; }
/* ---------------------------------------------------------
RESPONSIVE DESIGN
--------------------------------------------------------- */
@media screen and (max-width: 1024px) {
.clay-hero__inner, .clay-grid--2, .clay-grid--3, .clay-reason__layout, .clay-safety__details { grid-template-columns: 1fr; }
.clay-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clay-cycle { grid-template-columns: 1fr; }
.clay-tech-compare__flow { grid-template-columns: 1fr; }
.clay-tech-compare__arrow b { transform: rotate(90deg); }
}
@media screen and (max-width: 640px) {
.clay-container, .clay-hero__inner { width: min(100% - 32px, 1140px); }
.clay-section { padding: 64px 0; }
.clay-hero { padding: 64px 0 48px; }
.clay-toc__list { grid-template-columns: 1fr; }
.clay-cycle { padding: 24px; }
.clay-cycle__note { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.clay-tech-feature-texts { flex-direction: column; gap: 16px; }
.clay-tech-compare__stage { grid-template-columns: 1fr; gap: 16px; }
.clay-callout-line { display: none; /* スマホ縦並び時は線非表示 */ }
.clay-faq summary { padding-left: 64px; padding-right: 60px; }
.clay-faq details > p { padding-left: 64px; padding-right: 20px; }
.clay-faq summary::before, .clay-faq details > p::before { left: 16px; width: 34px; height: 34px; }
.clay-faq summary::after { right: 16px; width: 34px; height: 34px; }
}
/* =========================================================
FINAL OVERRIDES - 希望レイアウト3 / 枠4
========================================================= */
/* 20,000の右上に※1を配置 */
.clay-cycle__number {
position: relative;
}
.clay-cycle__number > sup {
position: absolute;
top: 22px;
right: 20px;
z-index: 2;
margin: 0;
padding: 2px 5px;
color: #fff;
background: rgba(255, 255, 255, .10);
font-size: 13px;
font-weight: 800;
line-height: 1;
vertical-align: baseline;
}
/* 希望レイアウト3：左58%（数値＋大きなグラフ）、右42%（説明＋サイクルとは？） */
.clay-cycle {
display: grid;
grid-template-columns: minmax(0, 1.42fr) minmax(330px, 1fr);
grid-template-rows: auto auto;
gap: 18px 34px;
align-items: start;
padding: 22px;
}
.clay-cycle__main {
display: contents;
}
.clay-cycle__number {
grid-column: 1;
grid-row: 1;
width: min(100%, 470px);
min-height: 245px;
justify-self: start;
align-self: start;
padding: 32px 28px;
}
.clay-cycle__number > span {
font-size: clamp(64px, 8vw, 104px);
line-height: .95;
}
.clay-cycle__number > small {
margin-top: 28px;
font-size: clamp(17px, 2vw, 24px);
}
.clay-cycle-graph {
grid-column: 1;
grid-row: 2;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.clay-cycle-graph img {
display: block;
width: 100%;
max-height: none;
object-fit: contain;
}
.clay-cycle__content {
grid-column: 2;
grid-row: 1 / 3;
min-width: 0;
padding: 32px 0 0;
}
.clay-cycle__content > h3 {
margin-bottom: 10px;
font-size: clamp(19px, 2vw, 25px);
}
.clay-cycle__content > p {
font-size: 15px;
line-height: 1.75;
}
.clay-cycle__note {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
margin-top: 38px;
padding: 24px 26px 18px;
}
.clay-cycle__note-copy h3 {
font-size: 20px;
}
.clay-cycle__note-copy p {
font-size: 14px;
line-height: 1.7;
}
.clay-cycle__note > img {
width: min(100%, 410px);
max-width: 410px;
max-height: 124px;
margin: 4px auto 0;
object-fit: contain;
}
@media screen and (max-width: 1024px) {
.clay-cycle {
grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr);
gap: 20px 26px;
}
.clay-cycle__number {
width: min(100%, 410px);
min-height: 220px;
}
.clay-cycle__content {
padding-top: 18px;
}
}
@media screen and (max-width: 780px) {
.clay-cycle {
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: 20px;
}
.clay-cycle__number,
.clay-cycle-graph,
.clay-cycle__content {
grid-column: 1;
grid-row: auto;
}
.clay-cycle__number {
width: 100%;
min-height: 200px;
}
.clay-cycle__content {
padding-top: 10px;
}
.clay-cycle__note {
margin-top: 24px;
}
}
@media screen and (max-width: 440px) {
.clay-cycle__number > sup {
top: 17px;
right: 15px;
font-size: 11px;
}
.clay-cycle__number > span {
font-size: clamp(54px, 19vw, 76px);
}
}
/* LONG LIFE comparison results: black bold text */
.clay-tech-compare__results strong {
color: #000000 !important;
font-weight: 800 !important;
}
/* =========================================================
1. LONG LIFE: remove the background behind ※1
========================================================= */
.clay-cycle__number > sup {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: none;
}
/* =========================================================
2. LONG LIFE technology: left explanation / right image
========================================================= */
.clay-longlife-tech__inner {
padding: 34px 38px 30px;
border-radius: 18px;
}
.clay-longlife-tech__inner > h4 {
margin: 0 0 24px;
color: #17232c;
font-size: clamp(20px, 2vw, 27px);
font-weight: 800;
line-height: 1.4;
}
.clay-tech-infinity-container {
display: grid !important;
grid-template-columns: minmax(0, 1.28fr) minmax(320px, .92fr) !important;
grid-template-areas:
"infinity visual"
"texts visual" !important;
column-gap: 34px !important;
row-gap: 12px !important;
align-items: start !important;
margin: 0 !important;
}
/* S-shaped connector, rendered from the actual artwork file
s-shaped.svg (placed at /solar/semi-solid-clay-based-battery/img/,
viewBox 0 0 329.69 60.02, ratio ≈ 5.49:1) instead of a CSS-drawn/
approximated curve. The ![]()
is absolutely positioned to fill the
box and sit behind the two labels, and object-fit:contain
preserves the SVG's own aspect ratio regardless of how wide/short
the surrounding grid box becomes.
The box itself uses aspect-ratio matched to the SVG's own ratio
(instead of a fixed height), so the artwork snugly fills the box at
any screen width instead of floating with empty top/bottom margins. */
.clay-tech-infinity-bg {
grid-area: infinity;
position: relative;
display: grid !important;
grid-template-columns: 1fr 1fr;
align-items: center;
width: 100%;
min-width: 0;
aspect-ratio: 329.69 / 60.02;
height: auto;
min-height: 64px;
padding: 0 26px;
box-sizing: border-box;
}
.clay-tech-infinity-bg__svg {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
.clay-tech-infinity-bg h5 {
position: relative;
z-index: 2;
width: auto !important;
margin: 0 !important;
padding: 0 10px !important;
color: #244f60 !important;
background: transparent !important;
text-align: center;
font-size: clamp(15px, 1.45vw, 19px) !important;
font-weight: 800;
line-height: 1.35;
white-space: nowrap;
}
.clay-tech-feature-texts {
grid-area: texts;
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 22px !important;
margin: 0 !important;
}
.clay-tech-feature {
min-width: 0;
}
.clay-tech-feature p {
margin: 0;
color: #30383f;
font-size: 13.5px;
line-height: 1.75;
text-align: left !important;
}
.clay-tech-feature__visual {
grid-area: visual;
align-self: start;
margin: 0 !important;
}
.clay-tech-feature__visual img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0 !important;
object-fit: cover;
}
.clay-tech-feature__visual figcaption {
margin: 7px 0 0;
color: #4f555a;
font-size: 10.5px;
line-height: 1.45;
text-align: left;
}
/* =========================================================
3. CONTACT: match the supplied dark premium reference
========================================================= */
.clay-contact {
position: relative;
min-height: 555px;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
text-align: center;
background: #121d25 !important;
}
.clay-contact::before {
content: "";
position: absolute;
left: 50%;
bottom: 66px;
width: 440px;
height: 175px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(ellipse, rgba(153, 137, 101, .18), transparent 68%);
filter: blur(9px);
pointer-events: none;
}
.clay-contact .clay-container {
position: relative;
z-index: 1;
}
.clay-contact .clay-eyebrow {
margin: 0 0 20px !important;
color: #9c8a66 !important;
font-size: 16px;
font-weight: 500;
line-height: 1.4;
letter-spacing: .26em;
}
.clay-contact h2 {
margin: 0 0 30px;
color: #fff;
font-size: clamp(40px, 5vw, 60px);
font-weight: 800;
line-height: 1.2;
letter-spacing: .02em;
}
.clay-contact p:not(.clay-eyebrow) {
margin: 0 auto 44px;
color: rgba(255, 255, 255, .72);
font-size: clamp(16px, 1.8vw, 21px);
line-height: 1.7;
}
.clay-contact .clay-btn--primary {
min-width: 300px;
min-height: 76px;
padding: 18px 38px;
border: 1px solid rgba(255, 255, 255, .08);
color: #fff !important;
background: linear-gradient(135deg, #8f7d59, #b7a47d) !important;
box-shadow: 0 20px 52px rgba(0, 0, 0, .26), 0 0 36px rgba(154, 137, 101, .12);
font-size: 20px;
font-weight: 800;
}
@media screen and (max-width: 1024px) {
/* minmax(0, 1fr), not plain 1fr: a bare "1fr" track still has an
automatic minimum size equal to its content's max-content width.
Since .clay-tech-infinity-bg is itself a grid formatting context
(for the two h5 labels), that automatic minimum let the whole
track grow past the card's actual width and overflow off-screen
on narrow viewports. minmax(0, 1fr) removes that automatic
minimum, so the track (and the s-shaped.svg image inside it)
is correctly clamped to the available width. */
.clay-tech-infinity-container {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas:
"infinity"
"texts"
"visual" !important;
}
.clay-tech-feature__visual {
width: min(100%, 720px);
margin: 18px auto 0 !important;
}
}
@media screen and (max-width: 640px) {
.clay-longlife-tech__panel {
padding-top: 112px;
}
.clay-patent-badge {
top: 14px;
right: auto;
left: 50%;
transform: translateX(-50%);
width: 84px;
height: 84px;
font-size: 13px;
}
.clay-longlife-tech__heading {
margin-top: 0;
}
.clay-longlife-tech__inner {
padding: 24px 16px;
}
.clay-tech-infinity-bg {
padding: 0 10px;
}
.clay-tech-infinity-bg h5 {
padding: 0 5px !important;
font-size: 12.5px !important;
white-space: normal;
}
.clay-tech-feature-texts {
grid-template-columns: 1fr;
gap: 14px !important;
}
.clay-contact {
min-height: 480px;
}
.clay-contact h2 {
font-size: 38px;
}
.clay-contact .clay-btn--primary {
width: min(100%, 300px);
min-width: 0;
min-height: 66px;
font-size: 18px;
}
}
/* =========================================================
QUALITY: security certification panel (JC-STAR)
Independent block placed below the 3-card grid.
========================================================= */
.clay-security-panel {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr);
gap: 40px;
align-items: center;
margin-top: 32px;
padding: 40px;
border: 1px solid var(--clay-border);
border-radius: var(--clay-radius-lg);
background: #ffffff;
box-shadow: var(--clay-shadow-md);
}
.clay-security-panel__lead {
margin: 0 0 8px !important;
color: var(--clay-gold);
font-size: 13px;
font-weight: 800;
letter-spacing: .05em;
}
/* Match the exact heading style used by the QUALITY cards
(国内製造 / トレーサビリティ / IoTを活用した製造管理). */
.clay-security-panel__content h3 {
margin: 0 0 14px;
color: var(--clay-navy);
font-size: 21px;
font-weight: 800;
line-height: 1.45;
}
.clay-security-panel__content h3 sup {
font-size: .6em;
vertical-align: super;
}
.clay-security-panel__content > p:not(.clay-security-panel__lead) {
margin: 0;
color: var(--clay-muted);
font-size: 15px;
line-height: 1.85;
}
.clay-security-panel__visual {
margin: 0;
display: flex;
justify-content: center;
}
/* Perspective / "floating card" treatment based on the supplied reference:
the label is shown at its natural aspect ratio (no forced height, so no
letterboxing and no visible top/bottom frame lines), with rounded
corners and a soft shadow that gives it a lifted, floating look. */
.clay-security-panel__visual img {
display: block;
width: 100%;
max-width: 380px;
height: auto;
border-radius: 10px;
box-shadow:
0 20px 38px rgba(15, 23, 32, .16),
0 6px 14px rgba(15, 23, 32, .08);
}
.clay-security-panel__footnotes {
margin-top: 18px;
color: var(--clay-muted);
font-size: 11.5px;
line-height: 1.75;
}
.clay-security-panel__footnotes p {
margin: 0 0 4px;
}
.clay-security-panel__footnotes p:last-child {
margin-bottom: 0;
}
/* =========================================================
Hanging-indent footnotes (※1 / ※2 / ※3 / ●)
The marker sits in the indent; wrapped lines align with the
start of the text (not with the marker), matching the
supplied reference image.
========================================================= */
.clay-footnote {
display: flex;
align-items: flex-start;
gap: 6px;
}
.clay-footnote__mark {
flex: 0 0 auto;
white-space: nowrap;
}
.clay-footnote__text {
flex: 1 1 auto;
min-width: 0;
}
@media screen and (max-width: 1024px) {
.clay-security-panel {
grid-template-columns: 1fr;
text-align: center;
}
.clay-security-panel__visual img {
max-width: 320px;
}
}
@media screen and (max-width: 640px) {
.clay-security-panel {
padding: 24px;
margin-top: 24px;
}
.clay-security-panel__content > p:not(.clay-security-panel__lead) {
font-size: 14px;
}
}
/* =========================================================
HERO product card: product info links, matching the supplied
"clay-hero__visualのビジュアル.png" reference exactly:
- "製品情報はこちら" is shown as a prominent gold link/heading
(not a small muted label).
- 住宅用製品 / 産業用製品 are two independent rounded pill
buttons placed side by side with a gap (not one pill split
by an internal divider line).
Font size still matches clay-product-card__text (14px) as
previously requested.
========================================================= */
.clay-product-card__links {
margin-top: 14px;
}
.clay-product-card__links-label {
margin: 0 !important;
color: var(--clay-gold);
font-size: 14px;
font-weight: 800;
line-height: 1.7;
}
.clay-product-card__links-group {
display: flex;
align-items: stretch;
justify-content: center;
gap: 10px;
margin-top: 10px;
}
.clay-product-card__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 10px 20px;
border: 1px solid var(--clay-border-gold);
border-radius: 999px;
color: var(--clay-navy);
background: #ffffff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: var(--clay-shadow-sm);
transition: var(--clay-transition);
white-space: nowrap;
}
.clay-product-card__link:hover,
.clay-product-card__link:focus-visible {
color: #ffffff;
background: var(--clay-gold);
box-shadow: var(--clay-shadow-md);
}
/* Two overlapping rounded-square outlines drawn with ::before/::after,
reproducing icon_blank.png without loading an image file.
Front square (top-right, full rounded border) sits over a back
square shown only as a left+bottom "L" bracket (its hidden
top-right corner would otherwise sit behind the front square).
Proportions (square size vs. offset between the two squares) are
measured directly from the reference artwork in
"ビジュアル.png" / "clay-hero__visualのビジュアル.png": the offset
is about 22% of the square's own size, and the stroke is about
11% of the square's size. Corners are now rounded (border-radius)
per the latest reference image, on both the front square and the
back bracket's outer corner. */
.clay-icon-blank {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.clay-icon-blank::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 12px;
height: 12px;
border-left: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
border-bottom-left-radius: 2px;
}
.clay-icon-blank::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
border: 1.5px solid currentColor;
border-radius: 2px;
background: #ffffff;
transition: background-color .35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Keep the front square's fill in sync with the link's own
background, so it still visually "masks" the back bracket
when the link background changes to gold on hover/focus. */
.clay-product-card__link:hover .clay-icon-blank::after,
.clay-product-card__link:focus-visible .clay-icon-blank::after {
background: var(--clay-gold);
}
@media screen and (max-width: 640px) {
.clay-product-card__links-group {
width: 100%;
gap: 8px;
}
.clay-product-card__link {
flex: 1 1 0;
padding: 10px 12px;
font-size: 13px;
}
}
/* =========================================================
SAFETY proof cards: 1em top margin on the three result
description sentences.
========================================================= */
.clay-proof-text {
margin-top: 1em !important;
}
/* ---- 縁なしフルブリード＋上角のみ丸角＋ズーム強め ---- */
.clay-card > img.clay-card__img--issue-b {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 18px 18px 0 0;
transition: transform 0.5s ease;
}
.clay-card:hover > img.clay-card__img--issue-b {
transform: scale(1.03);
}
.clay-card > img.clay-card__img--issue-b[alt="リスクへの備えを確認"] {
object-position: 62% 30%;
}
.clay-card > img.clay-card__img--issue-b[alt="屋外設置された蓄電池"] {
object-position: 68% calc(20% + 12px);
}
@media screen and (max-width: 640px) {
.clay-card > img.clay-card__img--issue-b {
height: 210px;
}
}
/* =========================================================
MOVIE見出し: 「Enerezza®」の®サイズを現状比70%に縮小
（ブラウザ既定のsupは親フォントサイズの75%のため、
75%×70%＝52.5%とし、他のsup（Hero文中・脚注等）には
影響しないよう、このh2に限定して指定）
========================================================= */
.clay-movie .clay-heading h2 sup {
font-size: 52.5%;
}
/* =========================================================
MOVIE見出し: 「Enerezza®」の®位置を少し上に調整
（添付「アールマークの位置｜変更前・後.png」の変更後を
ピクセル解析し、®の縦幅（≒フォントサイズ）に対して
約32%上方向にシフトすることで、画像の見え方を再現）
========================================================= */
.clay-movie .clay-heading h2 sup {
position: relative;
top: -0.7em;
}
/* =========================================================
【WEBガイドライン指摘②】画像のマウスオーバー時ズーム挙動をOFF
クリックできない画像が hover でわずかに拡大（scale）する挙動を無効化。
カードの浮き上がり（translateY）・影・枠色等の hover 表現は維持し、
画像自体の拡大のみを打ち消す。
========================================================= */
.clay-product-card:hover img,
.clay-card:hover > img,
.clay-card:hover > img.clay-card__img--issue-b,
.clay-card:hover .clay-card__image > img {
transform: none !important;
}
/* =========================================================
【WEBガイドライン指摘③】WHY CLAY-TYPE 導入文のコントラスト比改善
対象：#why-clay-type「京セラは、長年培ってきたファインセラミック技術を…」
フォント色を #5C656D に変更（他セクションの同クラスには影響させない）。
========================================================= */
#why-clay-type .clay-product-card__desc p {
color: #5C656D;
}
/* =========================================================
【WEBガイドライン指摘】画像付き枠のマウスオーバー時
シャドウ演出をOFF
クリックできないカード（.clay-card）が hover で影を強める
（--clay-shadow-sm → --clay-shadow-lg）演出を無効化し、
通常時の影のまま変化させない。あわせて浮き上がり
（translateY）・枠線色の変化も停止し、マウスオーバーで
一切反応しない静的な表示に統一する。
※リンク・ボタン等のクリック可能要素（.clay-btn /
.clay-toc__list a / .clay-product-card__link）の
hover 表現には影響させない。
========================================================= */
.clay-card {
transition: none !important;
}
.clay-card:hover {
transform: none !important;
border-color: var(--clay-border) !important;
box-shadow: var(--clay-shadow-sm) !important;
}