:root {
--font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
--font-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
--font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
--color-black: #080A0D;
--color-graphite: #12161C;
--color-dark: #1D232B;
--color-gray: #6F7782;
--color-border: #DDE1E6;
--color-light: #F4F6F8;
--color-bg: #FAFAFA;
--color-white: #FFFFFF;
--color-orange: #FF6A00;
--color-orange-dark: #E85D00;
--shadow-card: 0 18px 40px rgba(8, 10, 13, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 2;
letter-spacing: .02em;
color: var(--color-graphite);
background: var(--color-white);
font-feature-settings: "palt";
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.2em; }
.container { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.container.narrow { width: min(860px, calc(100% - 40px)); }
.two-col { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section:nth-of-type(even) { background: var(--color-bg); }
.kicker, .product-label {
display: inline-block;
font-family: var(--font-en);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-orange);
margin-bottom: 14px;
}
.hero-title, .page-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(44px, 5vw, 76px);
line-height: 1.45;
letter-spacing: .05em;
margin: 0 0 24px;
}
.section-title {
font-size: clamp(26px, 2.5vw, 38px);
line-height: 1.55;
letter-spacing: .03em;
margin: 0 0 24px;
}
.lead { font-size: 18px; line-height: 2; }
.section-head { margin-bottom: 42px; }
.site-header {
position: sticky;
top: 0;
z-index: 100;
height: 82px;
background: rgba(255,255,255,.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(221,225,230,.7);
transition: height .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { height: 68px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.site-header__inner {
height: 100%;
width: min(1240px, calc(100% - 40px));
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.site-logo__text {
font-family: var(--font-en);
font-weight: 700;
font-size: 22px;
letter-spacing: .14em;
}
.site-logo img { max-height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav__list { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.site-nav a { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.header-cta {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 0 18px;
white-space: nowrap;
background: var(--color-orange);
color: var(--color-white);
border-radius: 999px;
}
.menu-toggle { display: none; background: none; border: 0; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 6px 0; background: var(--color-black); }
.home-hero {
position: relative;
min-height: min(820px, calc(100vh - 82px));
display: flex;
align-items: center;
color: var(--color-white);
background:
radial-gradient(circle at 80% 30%, rgba(255,106,0,.18), transparent 28%),
linear-gradient(135deg, #080A0D, #1D232B);
overflow: hidden;
}
.home-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .35;
transform: scale(1.03);
animation: heroBgIn 1.2s ease-out forwards;
}
.home-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
background-size: 72px 72px;
opacity: .5;
}
.home-hero__route {
position: absolute;
left: 6vw;
top: 42%;
width: 42vw;
height: 2px;
background: var(--color-orange);
transform-origin: left center;
transform: scaleX(0);
opacity: .85;
animation: routeLine 1.4s ease-out .4s forwards;
}
.home-hero__inner {
position: relative;
z-index: 2;
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
max-width: 900px;
margin-left: max(20px, calc((100vw - 1120px) / 2));
padding-top: clamp(24px, 4vw, 56px);
}
.home-hero p { max-width: 760px; color: rgba(255,255,255,.86); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 50px;
padding: 0 22px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
letter-spacing: .04em;
transition: transform .25s ease, background .25s ease, color .25s ease;
}
.btn span { transition: transform .25s ease; }
.btn:hover span { transform: translateX(5px); }
.btn--primary { background: var(--color-orange); color: var(--color-white); }
.btn--primary:hover { background: var(--color-orange-dark); transform: translateY(-2px); }
.btn--secondary { background: var(--color-white); color: var(--color-black); }
.btn--text { color: var(--color-white); border: 1px solid rgba(255,255,255,.35); }
.btn--light { background: var(--color-white); color: var(--color-black); }
.product-grid, .doc-grid, .dealer-grid, .related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.product-card, .doc-card, .dealer-card, .related-card, .type-card {
position: relative;
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: 22px;
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.product-card:hover, .doc-card:hover, .dealer-card:hover, .related-card:hover, .type-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
border-color: rgba(255,106,0,.45);
}
.product-card::after {
content: "";
position: absolute;
left: 0; bottom: 0;
height: 2px; width: 0;
background: var(--color-orange);
transition: width .35s ease;
}
.product-card:hover::after { width: 100%; }
.product-card__image { aspect-ratio: 4 / 3; background: linear-gradient(135deg, #F4F6F8, #E7EAEE); overflow: hidden; }
.product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.product-card:hover .product-card__image img { transform: scale(1.04); }
.product-card__placeholder {
height: 100%;
background:
linear-gradient(135deg, rgba(255,106,0,.14), transparent 45%),
linear-gradient(135deg, #F8F9FA, #E7EAEE);
}
.product-card__content, .doc-card, .dealer-card, .related-card, .type-card {
padding: 28px;
}
.product-card h3, .doc-card h3, .dealer-card h3, .related-card h3, .type-card h3 {
margin: 0 0 12px;
font-size: 22px;
line-height: 1.5;
}
.card-arrow, .doc-card a, .dealer-card a {
display: inline-block;
margin-top: 12px;
color: var(--color-orange);
font-weight: 700;
}
.rescue-types { background: var(--color-light); }
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.type-card {
min-height: 260px;
color: var(--color-white);
background: linear-gradient(135deg, var(--color-black), var(--color-dark));
}
.type-card p { color: rgba(255,255,255,.75); }
.route-line {
position: absolute;
background: var(--color-orange);
opacity: .9;
}
.type-card--vertical .route-line { top: 28px; right: 40px; width: 2px; height: 140px; transform: scaleY(0); transform-origin: top; }
.type-card--inclined .route-line { top: 86px; right: 28px; width: 150px; height: 2px; transform: rotate(-24deg) scaleX(0); transform-origin: left; }
.type-card--hatch .route-line { top: 42px; right: 58px; width: 2px; height: 90px; transform: scaleY(0); transform-origin: top; }
.type-card.is-visible .route-line { transform: scaleY(1); transition: transform 1s ease-out .25s; }
.type-card--inclined.is-visible .route-line { transform: rotate(-24deg) scaleX(1); }
.replacement-section { background: var(--color-white); }
.check-list { margin: 0; padding: 28px; list-style: none; background: var(--color-light); border-radius: 22px; border: 1px solid var(--color-border); }
.check-list li { padding: 14px 0 14px 30px; border-bottom: 1px solid var(--color-border); position: relative; }
.check-list li:last-child { border-bottom: 0; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-orange); }
.dealer-notice {
position: relative;
display: grid;
grid-template-columns: 4px 1fr;
gap: 24px;
padding: clamp(28px, 4vw, 44px);
border-radius: 24px;
background: var(--color-graphite);
color: var(--color-white);
overflow: hidden;
}
.dealer-notice__line { background: var(--color-orange); border-radius: 999px; transform: scaleY(0); transform-origin: top; }
.dealer-notice.is-visible .dealer-notice__line { transform: scaleY(1); transition: transform .8s ease .2s; }
.dealer-notice p { color: rgba(255,255,255,.86); }
.text-link { color: var(--color-orange); font-weight: 700; }
.final-cta {
padding: clamp(72px, 9vw, 120px) 0;
text-align: center;
color: var(--color-white);
background:
radial-gradient(circle at 50% 0, rgba(255,106,0,.20), transparent 32%),
var(--color-black);
}
.final-cta h2 {
font-family: var(--font-serif);
font-size: clamp(34px, 4vw, 56px);
font-weight: 500;
margin: 0 0 20px;
}
.page-hero {
padding: clamp(80px, 10vw, 140px) 0;
background: var(--color-light);
}
.page-hero p { max-width: 760px; }
.page-content h2 { margin-top: 2.2em; }
.archive-item { padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.site-footer {
color: var(--color-white);
background: var(--color-graphite);
padding: 56px 0 24px;
}
.site-footer__inner {
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
}
.site-footer__brand p { color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.9; }
.site-footer__links { display: grid; gap: 10px; }
.site-footer__links a { color: rgba(255,255,255,.82); transition: color .25s ease; }
.site-footer__links a:hover { color: var(--color-orange); }
.site-footer__copy {
width: min(1120px, calc(100% - 40px));
margin: 40px auto 0;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.55);
font-size: 12px;
font-family: var(--font-en);
}
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@keyframes heroBgIn {
to { opacity: .35; transform: scale(1); }
}
@keyframes routeLine {
to { transform: scaleX(1); }
}
@media (max-width: 900px) {
.site-header { height: 70px; }
.menu-toggle { display: block; }
.site-nav {
position: absolute;
left: 0; right: 0; top: 70px;
display: grid;
gap: 0;
padding: 18px 20px 24px;
background: rgba(255,255,255,.98);
border-bottom: 1px solid var(--color-border);
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
}
.site-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.site-nav__list { display: grid; gap: 0; }
.site-nav__list a { display: block; padding: 13px 0; }
.header-cta { margin-top: 12px; justify-content: center; }
.home-hero { min-height: 680px; }
.home-hero__inner { margin-inline: auto; }
.two-col, .product-grid, .doc-grid, .dealer-grid, .related-grid, .type-grid, .site-footer__inner {
grid-template-columns: 1fr;
}
.hero-title, .page-title { font-size: clamp(34px, 9vw, 46px); }
.section { padding: 72px 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
} .home-hero .hero-title {
max-width: 860px;
font-size: clamp(48px, 5.2vw, 82px);
line-height: 1.38;
text-wrap: balance;
}
.home-hero::after {
content: "";
position: absolute;
right: -12vw;
top: 0;
width: 58vw;
height: 100%;
background:
radial-gradient(circle at 45% 48%, rgba(255,255,255,.11), transparent 0 28%, transparent 58%),
linear-gradient(115deg, transparent 0 28%, rgba(255,106,0,.12) 28.2%, rgba(255,106,0,.05) 28.6%, transparent 29% 100%);
pointer-events: none;
}
.product-card__placeholder {
position: relative;
overflow: hidden;
}
.product-card__placeholder::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(8,10,13,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(8,10,13,.045) 1px, transparent 1px);
background-size: 34px 34px;
}
.product-card__placeholder::after {
content: "";
position: absolute;
right: 18px;
top: 18px;
width: 72px;
height: 2px;
background: var(--color-orange);
transform: rotate(-24deg);
opacity: .75;
}
.product-card__content {
min-height: 210px;
}
.product-card__content p,
.related-card p,
.doc-card p {
color: #5f6873;
font-size: 14px;
line-height: 1.85;
}
.product-grid {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.home-hero .hero-title {
max-width: 100%;
font-size: clamp(34px, 9vw, 48px);
}
.product-grid {
grid-template-columns: 1fr;
}
.product-card__content {
min-height: auto;
}
} body {
font-size: 16.5px;
}
.section {
padding: clamp(84px, 10vw, 148px) 0;
}
.home-hero {
min-height: min(880px, calc(100vh - 82px));
}
.home-hero__inner {
max-width: 960px;
}
.home-hero .kicker {
margin-bottom: 20px;
}
.home-hero .hero-title {
font-size: clamp(54px, 5.8vw, 92px);
line-height: 1.34;
letter-spacing: .055em;
margin-bottom: 30px;
}
.home-hero p {
font-size: 17px;
line-height: 2.05;
max-width: 820px;
}
.hero-actions {
margin-top: 36px;
gap: 16px;
}
.btn {
min-height: 54px;
padding-inline: 26px;
box-shadow: 0 10px 24px rgba(8, 10, 13, .08);
}
.btn--primary {
box-shadow: 0 14px 28px rgba(255, 106, 0, .22);
}
.section-head {
margin-bottom: 52px;
}
.section-title {
font-size: clamp(30px, 2.9vw, 44px);
margin-bottom: 28px;
}
.lead {
font-size: 19px;
}
.product-card,
.doc-card,
.dealer-card,
.related-card,
.type-card {
border-radius: 24px;
}
.product-card__content,
.doc-card,
.dealer-card,
.related-card,
.type-card {
padding: 32px;
}
.product-card__content {
min-height: 230px;
}
.product-card h3,
.doc-card h3,
.dealer-card h3,
.related-card h3,
.type-card h3 {
font-size: 23px;
margin-bottom: 14px;
}
.product-card__content p,
.related-card p,
.doc-card p {
font-size: 14.5px;
line-height: 1.95;
}
.product-card__placeholder::before {
background-image:
linear-gradient(rgba(8,10,13,.052) 1px, transparent 1px),
linear-gradient(90deg, rgba(8,10,13,.052) 1px, transparent 1px);
background-size: 30px 30px;
}
.product-card__placeholder::after {
width: 86px;
height: 2px;
}
.type-card {
min-height: 300px;
}
.dealer-notice {
padding: clamp(34px, 4.5vw, 52px);
border-radius: 26px;
}
.final-cta {
padding: clamp(86px, 10vw, 140px) 0;
}
.final-cta h2 {
font-size: clamp(40px, 4.3vw, 64px);
} .home-hero.has-hero-image .home-hero__bg,
.home-hero__bg {
filter: saturate(.92) contrast(1.02);
} .site-header__inner {
width: min(1320px, calc(100% - 40px));
}
.site-logo__text {
font-size: 24px;
}
.header-cta {
min-height: 46px;
padding-inline: 20px;
}
@media (max-width: 900px) {
body {
font-size: 15.5px;
}
.section {
padding: 76px 0;
}
.home-hero {
min-height: 720px;
}
.home-hero .hero-title {
font-size: clamp(38px, 10vw, 54px);
line-height: 1.42;
}
.home-hero p {
font-size: 15.5px;
}
.section-title {
font-size: 25px;
}
.product-card__content,
.doc-card,
.dealer-card,
.related-card,
.type-card {
padding: 26px;
}
.type-card {
min-height: 240px;
}
} .section {
padding: clamp(72px, 8.5vw, 118px) 0;
}
.home-hero {
min-height: min(780px, calc(100vh - 82px));
}
.home-hero__inner {
max-width: 920px;
padding-top: clamp(12px, 2.5vw, 36px);
}
.home-hero .hero-title {
font-size: clamp(50px, 5.4vw, 84px);
line-height: 1.36;
margin-bottom: 26px;
}
.home-hero p {
font-size: 16.5px;
line-height: 1.95;
max-width: 780px;
}
.hero-actions {
margin-top: 30px;
}
.section-head {
margin-bottom: 42px;
}
.section-title {
font-size: clamp(28px, 2.65vw, 40px);
margin-bottom: 22px;
}
.lead {
font-size: 18px;
}
.product-grid {
gap: 22px;
}
.product-card__content,
.doc-card,
.dealer-card,
.related-card,
.type-card {
padding: 28px;
}
.product-card__content {
min-height: 208px;
}
.product-card h3,
.doc-card h3,
.dealer-card h3,
.related-card h3,
.type-card h3 {
font-size: 21px;
margin-bottom: 12px;
}
.product-card__content p,
.related-card p,
.doc-card p {
font-size: 14px;
line-height: 1.85;
}
.type-card {
min-height: 260px;
}
.replacement-section .two-col {
align-items: center;
}
.dealer-notice {
padding: clamp(28px, 3.8vw, 44px);
}
.final-cta {
padding: clamp(76px, 9vw, 120px) 0;
}
.final-cta h2 {
font-size: clamp(36px, 4vw, 58px);
} .product-card__image {
aspect-ratio: 1.18 / 1;
}
.product-card__placeholder {
background:
radial-gradient(circle at 24% 18%, rgba(255,106,0,.16), transparent 0 22%, transparent 54%),
linear-gradient(135deg, #FAFAFA, #E7EAEE);
}
@media (max-width: 900px) {
.section {
padding: 68px 0;
}
.home-hero {
min-height: 650px;
}
.home-hero .hero-title {
font-size: clamp(36px, 9.5vw, 50px);
line-height: 1.42;
}
.hero-actions {
margin-top: 24px;
}
.btn {
min-height: 50px;
}
}  .home-hero.has-hero-image {
background: #080A0D;
}
.home-hero.has-hero-image .home-hero__bg {
object-position: 68% center;
opacity: .58;
filter: brightness(.58) saturate(.9) contrast(1.08);
}
.home-hero.has-hero-image::before {
z-index: 1;
background:
linear-gradient(90deg,
rgba(8,10,13,.96) 0%,
rgba(8,10,13,.86) 32%,
rgba(8,10,13,.54) 58%,
rgba(8,10,13,.34) 100%),
linear-gradient(180deg,
rgba(8,10,13,.26) 0%,
rgba(8,10,13,.10) 46%,
rgba(8,10,13,.36) 100%);
opacity: 1;
}
.home-hero.has-hero-image::after {
z-index: 1;
opacity: .9;
}
.home-hero__route,
.home-hero__inner {
z-index: 2;
} .product-card__image {
background:
radial-gradient(circle at 28% 12%, rgba(255,106,0,.10), transparent 0 24%, transparent 60%),
linear-gradient(135deg, #FFFFFF, #EEF1F4);
padding: 12px;
}
.product-card__image img {
object-fit: contain;
object-position: center;
border-radius: 14px;
background: transparent;
}
.product-card:hover .product-card__image img {
transform: scale(1.025);
} .product-card__placeholder {
border-radius: 14px;
} .type-card {
isolation: isolate;
}
.type-card__bg {
position: absolute;
inset: 0;
z-index: -1;
background-size: cover;
background-position: center;
opacity: .18;
filter: grayscale(.1) contrast(1.05);
transform: scale(1.04);
transition: opacity .35s ease, transform .55s ease;
}
.type-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(135deg, rgba(8,10,13,.94), rgba(18,22,28,.84)),
radial-gradient(circle at 80% 20%, rgba(255,106,0,.18), transparent 0 32%, transparent 62%);
}
.type-card:hover .type-card__bg {
opacity: .28;
transform: scale(1.08);
} .product-card__content {
display: flex;
flex-direction: column;
}
.product-card__content .card-arrow {
margin-top: auto;
} @media (max-width: 900px) {
.home-hero.has-hero-image .home-hero__bg {
object-position: 62% center;
opacity: .48;
}
.home-hero.has-hero-image::before {
background:
linear-gradient(90deg,
rgba(8,10,13,.96) 0%,
rgba(8,10,13,.82) 56%,
rgba(8,10,13,.56) 100%);
}
.product-card__image {
padding: 10px;
}
}  .page-hero--products {
background:
radial-gradient(circle at 82% 28%, rgba(255,106,0,.08), transparent 0 26%, transparent 58%),
var(--color-light);
}
.product-archive-intro {
background: var(--color-white);
}
.product-archive-list {
background: var(--color-bg);
}
.product-grid--archive {
grid-template-columns: repeat(4, 1fr);
}
.archive-filter {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 34px;
}
.archive-filter a {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 16px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-white);
font-size: 13px;
font-weight: 700;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.archive-filter a:hover,
.archive-filter a.is-current {
background: var(--color-graphite);
color: var(--color-white);
border-color: var(--color-graphite);
} .product-detail-hero {
padding: clamp(86px, 10vw, 150px) 0;
background:
radial-gradient(circle at 82% 18%, rgba(255,106,0,.10), transparent 0 28%, transparent 60%),
var(--color-light);
}
.product-detail-hero__grid {
display: grid;
grid-template-columns: 1.05fr .9fr;
gap: clamp(36px, 6vw, 84px);
align-items: center;
}
.product-detail-hero__image {
padding: 22px;
border-radius: 30px;
background: linear-gradient(135deg, #fff, #EEF1F4);
box-shadow: 0 18px 44px rgba(8,10,13,.08);
}
.product-detail-hero__image img {
width: 100%;
height: auto;
max-height: 420px;
object-fit: contain;
border-radius: 20px;
}
.product-detail-main-image {
padding: 24px;
border-radius: 28px;
background: linear-gradient(135deg, #fff, #EEF1F4);
border: 1px solid var(--color-border);
}
.product-detail-main-image img {
width: 100%;
max-height: 520px;
object-fit: contain;
border-radius: 18px;
}
.product-detail-body {
font-size: 16px;
}
.product-detail-body h2 {
margin-top: 1.8em;
font-size: 26px;
}
.product-detail-body ul {
padding-left: 1.2em;
}
.point-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.point-card {
padding: 30px;
border: 1px solid var(--color-border);
border-radius: 24px;
background: var(--color-white);
box-shadow: 0 12px 28px rgba(8,10,13,.045);
}
.point-card span {
display: inline-block;
margin-bottom: 16px;
font-family: var(--font-en);
font-weight: 700;
font-size: 12px;
color: var(--color-orange);
letter-spacing: .14em;
}
.point-card h3 {
margin: 0 0 12px;
font-size: 21px;
}
.point-card p {
margin: 0;
color: #5f6873;
font-size: 14px;
line-height: 1.85;
}
.spec-table-wrap {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 24px;
background: var(--color-white);
}
.spec-table {
width: 100%;
border-collapse: collapse;
}
.spec-table th,
.spec-table td {
padding: 18px 22px;
border-bottom: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
font-size: 15px;
}
.spec-table tr:last-child th,
.spec-table tr:last-child td {
border-bottom: 0;
}
.spec-table th {
width: 240px;
background: #F7F8FA;
font-weight: 700;
}
.product-related-documents {
background: var(--color-bg);
}
@media (max-width: 1100px) {
.product-grid--archive {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.product-detail-hero__grid,
.point-grid {
grid-template-columns: 1fr;
}
.product-grid--archive {
grid-template-columns: 1fr;
}
.spec-table th,
.spec-table td {
display: block;
width: 100%;
}
.spec-table th {
border-bottom: 0;
}
} .page-hero--rescue,
.page-hero--replacement,
.page-hero--documents,
.page-hero--dealers,
.page-hero--contact {
background:
radial-gradient(circle at 82% 18%, rgba(255,106,0,.10), transparent 0 28%, transparent 60%),
var(--color-light);
}
.rescue-method-section,
.replacement-flow-section,
.dealer-guide-section {
background: var(--color-bg);
}
.method-detail-grid {
display: grid;
gap: 24px;
}
.method-detail-card {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 30px;
align-items: center;
padding: 24px;
border: 1px solid var(--color-border);
border-radius: 28px;
background: var(--color-white);
box-shadow: 0 14px 34px rgba(8,10,13,.05);
}
.method-detail-card__image {
aspect-ratio: 4 / 3;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(135deg, #fff, #EEF1F4);
}
.method-detail-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.method-detail-card__body {
padding: 10px 10px 10px 0;
}
.method-detail-card__body h3,
.replacement-panel h3,
.documents-note h2,
.dealer-guide-card h3 {
margin: 0 0 14px;
font-size: 24px;
}
.replacement-panel {
padding: 32px;
border: 1px solid var(--color-border);
border-radius: 26px;
background: var(--color-white);
box-shadow: 0 14px 34px rgba(8,10,13,.05);
}
.replacement-panel ul {
margin: 0;
padding: 0;
list-style: none;
}
.replacement-panel li {
position: relative;
padding: 14px 0 14px 24px;
border-bottom: 1px solid var(--color-border);
}
.replacement-panel li:last-child {
border-bottom: 0;
}
.replacement-panel li::before {
content: "";
position: absolute;
left: 0;
top: 25px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-orange);
}
.flow-grid,
.dealer-guide-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.flow-card,
.dealer-guide-card {
padding: 28px;
border: 1px solid var(--color-border);
border-radius: 24px;
background: var(--color-white);
}
.flow-card span {
display: inline-block;
margin-bottom: 16px;
font-family: var(--font-en);
font-weight: 700;
color: var(--color-orange);
letter-spacing: .14em;
}
.flow-card h3 {
margin: 0 0 12px;
font-size: 20px;
}
.flow-card p,
.dealer-guide-card p {
margin: 0;
color: #5f6873;
font-size: 14px;
line-height: 1.85;
}
.documents-note {
padding: clamp(32px, 4vw, 50px);
border-radius: 28px;
color: var(--color-white);
background:
radial-gradient(circle at 82% 20%, rgba(255,106,0,.20), transparent 0 28%, transparent 60%),
var(--color-graphite);
}
.documents-note p {
color: rgba(255,255,255,.78);
}
.contact-form-placeholder {
min-height: 280px;
padding: 32px;
border: 1px solid var(--color-border);
border-radius: 26px;
background: var(--color-white);
}
.contact-form-placeholder input,
.contact-form-placeholder textarea,
.contact-form-placeholder select {
width: 100%;
max-width: 100%;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: 10px;
font: inherit;
}
.contact-form-placeholder input[type="submit"],
.contact-form-placeholder button {
width: auto;
min-height: 48px;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var(--color-orange);
color: #fff;
font-weight: 700;
cursor: pointer;
}
code {
display: inline-block;
margin-top: 8px;
padding: 4px 8px;
border-radius: 6px;
background: #EEF1F4;
font-size: 13px;
}
@media (max-width: 1100px) {
.flow-grid,
.dealer-guide-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 900px) {
.method-detail-card {
grid-template-columns: 1fr;
}
.flow-grid,
.dealer-guide-grid {
grid-template-columns: 1fr;
}
.method-detail-card__body {
padding: 0;
}
} .home-hero.has-hero-image .home-hero__bg {
object-position: 68% center;
}
@media (min-width: 1200px) {
.home-hero.has-hero-image .home-hero__bg {
object-position: 72% center;
}
} .page-hero--related,
.page-hero--company,
.page-hero--about {
background:
radial-gradient(circle at 82% 18%, rgba(255,106,0,.10), transparent 0 28%, transparent 60%),
var(--color-light);
}
.dealer-list-section,
.related-archive-section,
.company-table-section {
background: var(--color-bg);
}
.dealer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.dealer-list-card,
.dealer-empty {
padding: 30px;
border: 1px solid var(--color-border);
border-radius: 24px;
background: var(--color-white);
}
.dealer-list-card h3,
.dealer-empty h3 {
margin: 0 0 12px;
font-size: 22px;
}
.dealer-list-card p,
.dealer-empty p {
color: #5f6873;
font-size: 14px;
line-height: 1.85;
}
.text-link {
display: inline-flex;
margin-top: 14px;
font-weight: 800;
font-size: 14px;
color: var(--color-orange);
}
@media (max-width: 900px) {
.dealer-grid {
grid-template-columns: 1fr;
}
} .editable-page-content {
background: var(--color-white);
}
.editable-page-content .container {
padding: clamp(28px, 4vw, 48px);
border: 1px solid var(--color-border);
border-radius: 28px;
background: var(--color-white);
box-shadow: 0 14px 34px rgba(8,10,13,.04);
}
.editable-page-content:empty {
display: none;
}
.editable-page-content h2 {
margin-top: 2.2em;
font-size: clamp(24px, 2.4vw, 34px);
line-height: 1.55;
}
.editable-page-content h2:first-child {
margin-top: 0;
}
.editable-page-content h3 {
margin-top: 1.8em;
font-size: 22px;
}
.editable-page-content ul,
.editable-page-content ol {
padding-left: 1.4em;
}
.editable-page-content li {
margin-bottom: .55em;
}
.editable-page-content a {
color: var(--color-orange);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
} .product-spec-cta-section {
background: var(--color-bg);
}
.spec-cta {
display: grid;
grid-template-columns: 1.4fr auto;
gap: clamp(24px, 4vw, 48px);
align-items: center;
padding: clamp(30px, 4vw, 48px);
border: 1px solid var(--color-border);
border-radius: 28px;
background:
radial-gradient(circle at 92% 12%, rgba(255,106,0,.10), transparent 0 24%, transparent 58%),
var(--color-white);
box-shadow: 0 16px 38px rgba(8,10,13,.055);
}
.spec-cta h2 {
margin: 0 0 14px;
font-size: clamp(26px, 2.6vw, 38px);
line-height: 1.5;
}
.spec-cta p {
margin-bottom: .75em;
color: #4f5864;
}
.spec-cta__small {
font-size: 13.5px;
line-height: 1.8;
color: #6f7782;
}
.spec-cta__actions {
display: flex;
justify-content: flex-end;
}
@media (max-width: 900px) {
.spec-cta {
grid-template-columns: 1fr;
}
.spec-cta__actions {
justify-content: flex-start;
}
} .doc-empty {
grid-column: 1 / -1;
padding: clamp(30px, 4vw, 48px);
border: 1px solid var(--color-border);
border-radius: 28px;
background: var(--color-white);
box-shadow: 0 14px 34px rgba(8,10,13,.04);
}
.doc-empty h3 {
margin: 0 0 14px;
font-size: clamp(22px, 2vw, 30px);
}
.doc-empty p {
margin: 0;
color: #5f6873;
line-height: 1.9;
}
.doc-empty .text-link {
margin-top: 18px;
} .product-cert-section,
.product-caution-section,
.rescue-legal-section,
.replacement-inspection-section {
background: var(--color-bg);
}
.product-caution {
padding: clamp(30px, 4vw, 48px);
border-radius: 28px;
color: var(--color-white);
background:
radial-gradient(circle at 82% 20%, rgba(255,106,0,.20), transparent 0 28%, transparent 60%),
var(--color-graphite);
}
.product-caution h2 {
margin: 0 0 16px;
color: var(--color-white);
font-size: clamp(24px, 2.5vw, 36px);
}
.product-caution p {
color: rgba(255,255,255,.82);
}
.product-cert-section .spec-table-wrap {
box-shadow: 0 14px 34px rgba(8,10,13,.045);
}
.product-spec-cta-section {
background: var(--color-bg);
}
.spec-cta {
display: grid;
grid-template-columns: 1.4fr auto;
gap: clamp(24px, 4vw, 48px);
align-items: center;
padding: clamp(30px, 4vw, 48px);
border: 1px solid var(--color-border);
border-radius: 28px;
background:
radial-gradient(circle at 92% 12%, rgba(255,106,0,.10), transparent 0 24%, transparent 58%),
var(--color-white);
box-shadow: 0 16px 38px rgba(8,10,13,.055);
}
.spec-cta h2 {
margin: 0 0 14px;
font-size: clamp(26px, 2.6vw, 38px);
line-height: 1.5;
}
.spec-cta p {
margin-bottom: .75em;
color: #4f5864;
}
.spec-cta__small {
font-size: 13.5px;
line-height: 1.8;
color: #6f7782;
}
.spec-cta__actions {
display: flex;
justify-content: flex-end;
}
@media (max-width: 900px) {
.spec-cta {
grid-template-columns: 1fr;
}
.spec-cta__actions {
justify-content: flex-start;
}
} .page-hero--faq {
background:
radial-gradient(circle at 82% 18%, rgba(255,106,0,.10), transparent 0 28%, transparent 60%),
var(--color-light);
}
.faq-section {
background: var(--color-bg);
}
.faq-list {
display: grid;
gap: 16px;
}
.faq-item {
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--color-white);
box-shadow: 0 12px 28px rgba(8,10,13,.04);
overflow: hidden;
}
.faq-item summary {
display: grid;
grid-template-columns: 42px 1fr auto;
gap: 16px;
align-items: center;
padding: 22px 26px;
cursor: pointer;
font-weight: 800;
color: var(--color-ink);
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
justify-self: end;
color: var(--color-orange);
font-family: var(--font-en);
font-size: 22px;
line-height: 1;
}
.faq-item[open] summary::after {
content: "−";
}
.faq-item__q,
.faq-item__a {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 999px;
font-family: var(--font-en);
font-weight: 800;
}
.faq-item__q {
background: rgba(255,106,0,.10);
color: var(--color-orange);
}
.faq-item__a {
flex: 0 0 34px;
background: var(--color-graphite);
color: var(--color-white);
}
.faq-item__answer {
display: flex;
gap: 16px;
padding: 0 26px 24px 84px;
color: #4f5864;
line-height: 1.9;
}
.faq-item__answer p {
margin: 3px 0 0;
}
@media (max-width: 760px) {
.faq-item summary {
grid-template-columns: 34px 1fr auto;
gap: 12px;
padding: 18px 18px;
}
.faq-item__answer {
padding: 0 18px 20px 18px;
}
} .home-hero.has-hero-image .home-hero__bg {
opacity: var(--hero-image-opacity, .58);
}
@media (max-width: 900px) {
.home-hero.has-hero-image .home-hero__bg {
opacity: calc(var(--hero-image-opacity, .58) * .84);
}
} .page-hero--documents,
.single-document-hero {
background:
radial-gradient(circle at 82% 18%, rgba(255,106,0,.10), transparent 0 28%, transparent 60%),
var(--color-light);
}
.documents-intro-section,
.documents-category-nav,
.documents-group-section,
.documents-notice-section,
.single-document-section {
background: var(--color-bg);
}
.doc-category-pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.doc-category-pills a {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 0 18px;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-white);
color: var(--color-ink);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.doc-category-pills a:hover {
transform: translateY(-2px);
color: var(--color-orange);
border-color: rgba(255,106,0,.40);
}
.documents-group-section + .documents-group-section {
padding-top: clamp(36px, 5vw, 72px);
}
.doc-card {
overflow: hidden;
}
.doc-card__image {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 18px 18px 0 0;
background: var(--color-light);
}
.doc-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.doc-card:hover .doc-card__image img {
transform: scale(1.04);
}
.doc-card__body {
padding: 26px;
}
.doc-card .kicker {
margin-bottom: 12px;
}
.document-detail-image {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 26px;
background: var(--color-white);
box-shadow: 0 16px 38px rgba(8,10,13,.055);
}
.document-detail-image img {
width: 100%;
height: auto;
display: block;
}
.document-detail-placeholder {
padding: clamp(30px, 4vw, 48px);
border: 1px solid var(--color-border);
border-radius: 26px;
background: var(--color-white);
box-shadow: 0 16px 38px rgba(8,10,13,.055);
}
.document-detail-body {
padding: clamp(6px, 2vw, 18px) 0;
}
.document-detail-body p {
color: #4f5864;
line-height: 1.95;
}
.document-detail-body h2,
.document-detail-body h3 {
margin-top: 1.8em;
}
.document-download-action {
margin-top: 32px;
}
.documents-note {
padding: clamp(30px, 4vw, 48px);
border-radius: 28px;
color: var(--color-white);
background:
radial-gradient(circle at 88% 18%, rgba(255,106,0,.18), transparent 0 30%, transparent 60%),
var(--color-graphite);
}
.documents-note h2 {
margin: 0 0 16px;
color: var(--color-white);
font-size: clamp(24px, 2.5vw, 36px);
}
.documents-note p {
color: rgba(255,255,255,.82);
}
@media (max-width: 760px) {
.doc-category-pills {
display: grid;
grid-template-columns: 1fr;
}
.doc-card__body {
padding: 22px;
}
} .home-hero.has-hero-image .home-hero__bg {
opacity: 1 !important;
filter: none;
}
.home-hero.has-hero-image::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg,
rgba(8, 12, 18, var(--hero-overlay-opacity, .62)) 0%,
rgba(8, 12, 18, calc(var(--hero-overlay-opacity, .62) * .86)) 42%,
rgba(8, 12, 18, calc(var(--hero-overlay-opacity, .62) * .55)) 100%
);
pointer-events: none;
}
.home-hero.has-hero-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(circle at 78% 22%, rgba(255, 106, 0, .16), transparent 0 28%, transparent 58%);
pointer-events: none;
}
.home-hero.has-hero-image .container {
position: relative;
z-index: 3;
}
@media (max-width: 900px) {
.home-hero.has-hero-image::before {
background:
linear-gradient(180deg,
rgba(8, 12, 18, calc(var(--hero-overlay-opacity, .62) * .95)) 0%,
rgba(8, 12, 18, var(--hero-overlay-opacity, .62)) 100%
);
}
} .documents-group-section {
padding-top: clamp(54px, 6vw, 86px);
padding-bottom: clamp(44px, 5vw, 72px);
}
.documents-group-section + .documents-group-section {
padding-top: clamp(34px, 4vw, 54px);
}
.documents-group-section .section-head {
margin-bottom: clamp(24px, 3vw, 36px);
}
.doc-grid {
gap: 22px;
}
.doc-card {
min-height: 100%;
display: flex;
flex-direction: column;
}
.doc-card__image {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 18px 18px 0 0;
background: linear-gradient(135deg, #f6f8fa 0%, #eef2f6 100%);
border-bottom: 1px solid var(--color-border);
}
.doc-card__placeholder {
position: relative;
width: 100%;
height: 100%;
display: grid;
place-items: center;
background:
linear-gradient(90deg, rgba(13,31,64,.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(13,31,64,.05) 1px, transparent 1px),
linear-gradient(135deg, #f8fafc 0%, #edf1f6 100%);
background-size: 28px 28px, 28px 28px, auto;
}
.doc-card__placeholder span {
position: absolute;
inset: 18px;
border: 1px solid rgba(13,31,64,.12);
border-radius: 16px;
}
.doc-card__placeholder strong {
position: relative;
z-index: 1;
font-family: var(--font-en);
font-size: 13px;
letter-spacing: .18em;
line-height: 1.6;
color: rgba(13,31,64,.42);
text-align: center;
}
.doc-card__body {
flex: 1;
display: flex;
flex-direction: column;
padding: 24px;
}
.doc-card__body h3 {
margin-bottom: 12px;
line-height: 1.55;
}
.doc-card__body p {
margin-bottom: 18px;
line-height: 1.8;
}
.doc-card__body .text-link {
margin-top: auto;
}
.single-document-overview {
background: var(--color-bg);
}
.document-hero-card {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: clamp(28px, 5vw, 64px);
align-items: center;
}
.document-hero-card__visual {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 28px;
background: var(--color-white);
box-shadow: 0 16px 38px rgba(8,10,13,.055);
}
.document-hero-card__visual img {
width: 100%;
height: auto;
display: block;
}
.document-hero-card__summary {
padding: clamp(4px, 2vw, 18px) 0;
}
.document-hero-card__summary h2 {
margin: 0 0 16px;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.5;
}
.document-hero-card__summary p {
color: #4f5864;
line-height: 1.95;
}
.document-summary-list {
display: grid;
gap: 12px;
margin-top: 24px;
}
.document-summary-list div {
padding: 18px 20px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: var(--color-white);
}
.document-summary-list strong {
display: block;
margin-bottom: 8px;
color: var(--color-orange);
font-family: var(--font-en);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.document-summary-list span {
display: block;
color: #4f5864;
line-height: 1.8;
}
.document-reading-body {
padding: clamp(30px, 4vw, 56px);
border: 1px solid var(--color-border);
border-radius: 28px;
background: var(--color-white);
box-shadow: 0 16px 38px rgba(8,10,13,.045);
}
.document-reading-body h2,
.document-reading-body h3 {
margin-top: 2em;
margin-bottom: .8em;
}
.document-reading-body h2:first-child,
.document-reading-body h3:first-child {
margin-top: 0;
}
.document-reading-body p,
.document-reading-body li {
color: #4f5864;
line-height: 1.95;
}
.document-reading-body table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
font-size: 14px;
}
.document-reading-body th,
.document-reading-body td {
padding: 14px 16px;
border: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
}
.document-reading-body th {
background: #f5f7fa;
color: var(--color-ink);
font-weight: 800;
}
.related-documents-section {
background: var(--color-bg);
}
@media (max-width: 900px) {
.document-hero-card {
grid-template-columns: 1fr;
}
.document-reading-body {
padding: 26px 20px;
}
} .documents-header-visual-section {
padding: clamp(28px, 4vw, 56px) 0 0;
background: var(--color-bg);
}
.documents-header-visual {
margin: 0;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 30px;
background: var(--color-white);
box-shadow: 0 18px 44px rgba(8,10,13,.06);
}
.documents-header-visual img {
display: block;
width: 100%;
height: auto;
}
.documents-header-visual-section + .documents-intro-section {
padding-top: clamp(42px, 5vw, 72px);
}
@media (max-width: 760px) {
.documents-header-visual {
border-radius: 20px;
}
.documents-header-visual-section {
padding-top: 22px;
}
} .takaoka-business-notice{margin:clamp(28px,4vw,48px) 0;padding:clamp(22px,3vw,34px);border:1px solid var(--color-border,#d8dee6);border-left:5px solid var(--color-accent,#f27117);border-radius:22px;background:var(--color-white,#fff);box-shadow:0 14px 34px rgba(8,10,13,.05);color:var(--color-text,#243044)}
.takaoka-business-notice p{margin:0;line-height:1.9}.takaoka-business-notice p+p{margin-top:6px}.takaoka-business-notice strong{color:var(--color-navy,#0d1f40)}.takaoka-copy-note{font-size:.95rem;color:var(--color-muted,#5e6a7a);line-height:1.85} .site-header {
width: 100% !important;
left: 0;
right: 0;
}
.site-header__inner {
width: min(1320px, calc(100% - 40px)) !important;
max-width: 1320px !important;
min-width: 0;
margin-inline: auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px;
}
.site-logo {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
color: var(--color-black) !important;
}
.site-logo__text {
color: var(--color-black) !important;
white-space: nowrap !important;
word-break: keep-all !important;
writing-mode: horizontal-tb !important;
}
.site-nav {
flex: 1 1 auto;
min-width: 0;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: clamp(12px, 1.2vw, 20px);
}
.site-nav__list {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
gap: clamp(10px, 1vw, 18px);
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.site-nav__list > li {
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.site-nav a,
.header-cta {
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
line-height: 1.4 !important;
text-decoration: none !important;
}
.site-nav a {
color: var(--color-black) !important;
}
.header-cta {
flex: 0 0 auto;
color: var(--color-white) !important;
}
@media (max-width: 1140px) {
.site-header { height: 70px; }
.menu-toggle { display: block; }
.site-nav {
position: absolute !important;
left: 0;
right: 0;
top: 70px;
display: grid !important;
gap: 0;
padding: 18px 20px 24px;
background: rgba(255,255,255,.98);
border-bottom: 1px solid var(--color-border);
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
}
.site-nav.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.site-nav__list {
display: grid !important;
gap: 0;
justify-content: stretch !important;
}
.site-nav__list a {
display: block !important;
padding: 13px 0;
}
.header-cta {
margin-top: 12px;
justify-content: center;
}
}
.contact-page-intro-section {
background: var(--color-white);
padding-bottom: clamp(36px, 5vw, 64px);
}
.contact-form-section {
background: var(--color-bg);
padding-top: clamp(36px, 5vw, 72px);
}
.contact-page-intro-card,
.contact-form-shell {
border: 1px solid var(--color-border);
border-radius: 28px;
background: var(--color-white);
box-shadow: 0 18px 44px rgba(8, 10, 13, .06);
}
.contact-page-intro-card {
padding: clamp(28px, 4vw, 48px);
}
.contact-page-intro-card h2 {
margin: 0 0 18px;
color: var(--color-black);
font-size: clamp(24px, 2.4vw, 34px);
line-height: 1.55;
}
.contact-page-intro-card__body p {
margin: 0;
color: #4d5663;
line-height: 2;
}
.contact-page-intro-card__body p + p {
margin-top: 12px;
}
.contact-form-shell {
padding: clamp(22px, 3vw, 36px);
}
.contact-form-shell .takaoka-contact {
max-width: none;
}
.contact-form-shell .takaoka-contact__notice {
margin-top: 0;
}
@media (max-width: 760px) {
.contact-page-intro-card,
.contact-form-shell {
border-radius: 20px;
}
} .product-detail-body--full {
max-width: 860px;
margin-inline: auto;
}
.product-detail-body--full .lead {
margin-bottom: 32px;
color: #27313d;
}
.product-parts-section {
background: var(--color-white);
}
.product-parts-group + .product-parts-group {
margin-top: clamp(34px, 5vw, 56px);
}
.product-parts-group__title {
margin: 0 0 22px;
padding-left: 16px;
border-left: 3px solid var(--color-orange);
font-size: clamp(20px, 2vw, 27px);
line-height: 1.5;
}
.product-parts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.product-part-card {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: 24px;
background: var(--color-white);
box-shadow: 0 14px 34px rgba(8,10,13,.045);
}
.product-part-card__image {
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
padding: 18px;
background: linear-gradient(135deg, #fff, #EEF1F4);
border-bottom: 1px solid var(--color-border);
}
.product-part-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.product-part-card__placeholder {
width: 100%;
height: 100%;
border-radius: 18px;
background:
linear-gradient(135deg, rgba(255,106,0,.10), transparent 45%),
linear-gradient(135deg, #F8F9FA, #E7EAEE);
}
.product-part-card__content {
padding: 22px;
}
.product-part-card__content h4 {
margin: 0 0 10px;
font-size: 19px;
line-height: 1.5;
}
.product-part-card__content p {
margin-bottom: .85em;
color: #4f5864;
font-size: 14px;
line-height: 1.85;
}
.product-part-card__spec {
margin: 14px 0 0;
padding-top: 14px;
border-top: 1px solid var(--color-border);
font-size: 13px;
line-height: 1.75;
}
.product-part-card__spec dt {
margin-bottom: 4px;
color: var(--color-orange);
font-weight: 700;
}
.product-part-card__spec dd {
margin: 0;
color: #475569;
}
.product-part-card__note {
margin-top: 12px;
font-size: 13px !important;
color: #64748b !important;
}
.product-parts-note {
margin-top: 30px;
padding: 18px 22px;
border-left: 3px solid var(--color-orange);
border-radius: 16px;
background: #fff7f0;
color: #4f5864;
font-size: 14px;
line-height: 1.85;
}
@media (max-width: 900px) {
.product-parts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.product-parts-grid {
grid-template-columns: 1fr;
}
.product-part-card__content {
padding: 20px;
}
} .product-part-card {
overflow: hidden;
}
.product-part-card__image {
aspect-ratio: auto;
min-height: 210px;
height: clamp(210px, 22vw, 285px);
padding: clamp(14px, 2vw, 22px);
}
.product-part-card__image img,
.product-part-card__image .product-part-card__img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain !important;
object-position: center center !important;
border-radius: 14px;
}
@media (max-width: 900px) {
.product-part-card__image {
height: 240px;
}
}
@media (max-width: 640px) {
.product-part-card__image {
height: 260px;
}
} .product-part-card {
display: flex;
flex-direction: column;
min-height: 100%;
}
.product-part-card__image {
flex: 0 0 auto;
width: 100%;
overflow: hidden;
}
.product-part-card__content {
flex: 1 1 auto;
position: relative;
z-index: 1;
background: var(--color-white);
border-top: 1px solid var(--color-border);
}
.product-part-card__content h4 {
overflow-wrap: anywhere;
} .product-part-card {
overflow: visible;
}
.product-part-card__image {
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: clamp(18px, 2.2vw, 30px) !important;
background: linear-gradient(135deg, #fff, #EEF1F4);
border-bottom: 1px solid var(--color-border);
}
.product-part-card__image img,
.product-part-card__image .product-part-card__img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 320px !important;
object-fit: contain !important;
object-position: center center !important;
border-radius: 12px;
}
.product-part-card__content {
flex: 1 1 auto;
position: relative;
z-index: 1;
background: var(--color-white);
border-top: 0;
}
@media (max-width: 900px) {
.product-part-card__image img,
.product-part-card__image .product-part-card__img {
max-height: 300px !important;
}
}
@media (max-width: 640px) {
.product-part-card__image {
padding: 22px !important;
}
.product-part-card__image img,
.product-part-card__image .product-part-card__img {
max-height: 360px !important;
}
} .product-part-card {
overflow: hidden !important;
}
.product-part-card__image {
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
padding: clamp(18px, 2.2vw, 28px) !important;
background: linear-gradient(135deg, #fff, #EEF1F4) !important;
border-bottom: 1px solid var(--color-border) !important;
}
.product-part-card__image img,
.product-part-card__image .product-part-card__img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
border-radius: 12px !important;
}
.product-part-card--image-rescue-chute-stand .product-part-card__image img,
.product-part-card--image-rescue-chute-stand .product-part-card__image .product-part-card__img,
.product-part-card__image img[src*="rescue-chute-stand"],
.product-part-card__image .product-part-card__img[src*="rescue-chute-stand"] {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
}
@media (max-width: 640px) {
.product-part-card__image {
padding: 20px !important;
}
} .document-hero-card__visual {
overflow: hidden;
}
.document-hero-card__visual img,
.document-detail-image {
display: block;
width: 100%;
height: 100%;
max-height: 420px;
object-fit: cover;
}
@media (max-width: 767px) {
.document-hero-card__visual img,
.document-detail-image {
height: auto;
max-height: none;
object-fit: contain;
}
} .single-document-section .document-body-container--table,
.single-document-section .document-body-container--price {
width: min(1180px, calc(100% - 40px));
}
.document-reading-body--table {
padding: clamp(28px, 3.8vw, 52px);
}
.document-reading-body--table table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
border-collapse: separate;
border-spacing: 0;
margin: 28px 0 34px;
font-size: 13px;
line-height: 1.55;
-webkit-overflow-scrolling: touch;
}
.document-reading-body--table table thead,
.document-reading-body--table table tbody,
.document-reading-body--table table tfoot {
display: table-row-group;
}
.document-reading-body--table table tr {
display: table-row;
}
.document-reading-body--table table th,
.document-reading-body--table table td {
display: table-cell;
padding: 11px 12px;
vertical-align: middle;
word-break: keep-all;
}
.document-reading-body--price {
padding: clamp(30px, 4vw, 56px);
}
.document-reading-body--price h2,
.document-reading-body--price h3 {
max-width: 780px;
}
.document-reading-body--price table {
min-width: 980px;
font-size: 12.5px;
}
.document-reading-body--price table th,
.document-reading-body--price table td {
white-space: nowrap;
text-align: right;
}
.document-reading-body--price table th:first-child,
.document-reading-body--price table td:first-child,
.document-reading-body--price table th:nth-child(2),
.document-reading-body--price table td:nth-child(2) {
text-align: center;
}
.document-reading-body--price table th {
background: #f1f4f8;
}
.document-reading-body--price ul,
.document-reading-body--price ol {
max-width: 840px;
margin-top: 24px;
}
@media (max-width: 900px) {
.single-document-section .document-body-container--table,
.single-document-section .document-body-container--price {
width: min(100% - 28px, 1180px);
}
.document-reading-body--table,
.document-reading-body--price {
padding: 22px 16px;
}
.document-reading-body--price table {
min-width: 920px;
}
} .single-document-section .document-body-container--price {
max-width: min(1560px, calc(100vw - 32px));
width: min(1560px, calc(100vw - 32px));
}
.document-reading-body--price {
max-width: none;
overflow-x: visible;
}
.document-reading-body--price table {
width: 100%;
min-width: 0;
table-layout: auto;
font-size: clamp(11px, .82vw, 14px);
}
.document-reading-body--price table th,
.document-reading-body--price table td {
padding: 10px 8px;
line-height: 1.45;
}
.document-reading-body--price table th:first-child,
.document-reading-body--price table td:first-child,
.document-reading-body--price table th:nth-child(2),
.document-reading-body--price table td:nth-child(2) {
text-align: center;
white-space: nowrap;
}
.document-reading-body--price table th:last-child,
.document-reading-body--price table td:last-child {
font-weight: 800;
white-space: nowrap;
}
@media (max-width: 1180px) {
.document-reading-body--price {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.document-reading-body--price table {
min-width: 980px;
font-size: 13px;
}
} .document-guide-cta-section {
padding-top: 0;
background: var(--color-bg);
}
.document-guide-cta {
padding: clamp(28px, 4vw, 46px);
border: 1px solid var(--color-border);
border-radius: 28px;
background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
box-shadow: 0 16px 38px rgba(8, 10, 13, .05);
}
.document-guide-cta__head {
margin-bottom: 24px;
max-width: none;
}
.document-guide-cta__head h2 {
margin: 8px 0 12px;
font-size: clamp(26px, 3vw, 38px);
line-height: 1.45;
}
.document-guide-cta__head p {
margin: 0;
color: #4f5864;
line-height: 1.9;
}
.document-guide-cta__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.document-guide-cta__card {
display: flex;
min-height: 150px;
flex-direction: column;
gap: 9px;
padding: 22px 20px;
border: 1px solid var(--color-border);
border-radius: 20px;
background: #fff;
color: var(--color-ink);
text-decoration: none;
box-shadow: 0 10px 28px rgba(8, 10, 13, .04);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.document-guide-cta__card:hover {
transform: translateY(-3px);
border-color: rgba(238, 115, 33, .45);
box-shadow: 0 18px 36px rgba(8, 10, 13, .08);
}
.document-guide-cta__card span {
color: var(--color-orange);
font-family: var(--font-en);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
}
.document-guide-cta__card strong {
font-size: 18px;
line-height: 1.45;
}
.document-guide-cta__card em {
margin-top: auto;
color: #65707c;
font-size: 13px;
font-style: normal;
line-height: 1.65;
}
@media (max-width: 1080px) {
.document-guide-cta__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.document-guide-cta {
padding: 24px 18px;
}
.document-guide-cta__grid {
grid-template-columns: 1fr;
}
.document-guide-cta__card {
min-height: auto;
}
} .single-document-section .document-reading-body {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
.document-empty-body {
padding: 28px;
border: 1px solid var(--color-border);
border-radius: 18px;
background: #fff7f2;
color: #8a3f12;
font-weight: 700;
} .single-document-section .document-body-container--price-shell,
.single-document-section .document-body-container--price {
width: min(1680px, calc(100vw - 40px)) !important;
max-width: min(1680px, calc(100vw - 40px)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.single-document-section .document-body-container--price-shell .document-reading-body--price,
.single-document-section .document-body-container--price .document-reading-body--price {
width: 100% !important;
max-width: none !important;
overflow-x: visible !important;
padding: clamp(28px, 3vw, 50px) !important;
}
.document-reading-body--price .wp-block-table {
width: 100% !important;
max-width: none !important;
overflow-x: visible !important;
margin: 24px 0 34px !important;
}
.document-reading-body--price .wp-block-table table,
.document-reading-body--price table {
display: table !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
table-layout: auto !important;
border-collapse: collapse !important;
font-size: clamp(10px, .72vw, 13px) !important;
line-height: 1.42 !important;
}
.document-reading-body--price table th,
.document-reading-body--price table td {
padding: 9px 7px !important;
white-space: nowrap !important;
word-break: keep-all !important;
vertical-align: middle !important;
}
.document-reading-body--price table th:first-child,
.document-reading-body--price table td:first-child,
.document-reading-body--price table th:nth-child(2),
.document-reading-body--price table td:nth-child(2) {
text-align: center !important;
}
.document-reading-body--price table th:last-child,
.document-reading-body--price table td:last-child {
font-weight: 800 !important;
}
.document-reading-body--price h2,
.document-reading-body--price h3,
.document-reading-body--price p,
.document-reading-body--price ul,
.document-reading-body--price ol {
max-width: 920px;
}
@media (max-width: 1320px) {
.single-document-section .document-body-container--price-shell,
.single-document-section .document-body-container--price {
width: min(100% - 28px, 1680px) !important;
max-width: min(100% - 28px, 1680px) !important;
}
.single-document-section .document-body-container--price-shell .document-reading-body--price,
.single-document-section .document-body-container--price .document-reading-body--price {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.document-reading-body--price .wp-block-table,
.document-reading-body--price .wp-block-table table,
.document-reading-body--price table {
min-width: 1120px !important;
}
}
@media (max-width: 720px) {
.single-document-section .document-body-container--price-shell .document-reading-body--price,
.single-document-section .document-body-container--price .document-reading-body--price {
padding: 20px 14px !important;
}
} .single-document-section .document-body-container--price-shell,
.single-document-section .document-body-container--price {
width: min(1680px, calc(100vw - 32px)) !important;
max-width: min(1680px, calc(100vw - 32px)) !important;
}
.document-reading-body--price {
max-width: none !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
}
.document-reading-body--price .wp-block-table {
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-bottom: 8px;
}
.document-reading-body--price table {
table-layout: auto !important;
width: max-content !important;
min-width: 1120px !important;
max-width: none !important;
}
.document-reading-body--price table th,
.document-reading-body--price table td {
white-space: nowrap !important;
word-break: keep-all !important;
}
.document-reading-body--price .price-scroll-hint {
display: none;
}
@media (max-width: 860px) {
.single-document-section .document-body-container--price-shell,
.single-document-section .document-body-container--price {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
}
.document-reading-body--price {
padding: 18px 14px 22px !important;
border-radius: 18px !important;
}
.document-reading-body--price::before {
content: "定価表は横にスクロールしてご確認ください";
display: block;
margin: 0 0 12px;
padding: 10px 12px;
border: 1px solid rgba(238, 115, 33, .28);
border-radius: 12px;
background: #fff7f0;
color: #8a3f0f;
font-size: 13px;
font-weight: 700;
line-height: 1.6;
}
.document-reading-body--price .wp-block-table,
.document-reading-body--price > table {
margin-top: 10px !important;
}
.document-reading-body--price table {
min-width: 980px !important;
font-size: 12px !important;
}
.document-reading-body--price table th,
.document-reading-body--price table td {
padding: 9px 10px !important;
}
.document-reading-body--price table th:first-child,
.document-reading-body--price table td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: #fff;
box-shadow: 1px 0 0 rgba(17, 24, 39, .08);
}
.document-reading-body--price table th:first-child {
background: #f3f5f8;
z-index: 3;
}
}
@media (max-width: 520px) {
.single-document-section .document-body-container--price-shell,
.single-document-section .document-body-container--price {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
}
.document-reading-body--price {
padding: 16px 10px 20px !important;
}
.document-reading-body--price table {
min-width: 920px !important;
font-size: 11.5px !important;
}
} @media (max-width: 760px) {
.home-hero.has-hero-image {
min-height: 650px;
align-items: flex-end;
padding: 0 0 56px;
background:
radial-gradient(circle at 78% 18%, rgba(255, 106, 0, .13), transparent 0 30%, transparent 62%),
linear-gradient(180deg, #0b1726 0%, #07111f 100%);
}
.home-hero.has-hero-image .home-hero__bg {
opacity: .72 !important;
filter: brightness(.86) saturate(.96) contrast(1.04) !important;
object-position: 62% center;
transform: scale(1.045);
}
.home-hero.has-hero-image::before {
background:
linear-gradient(180deg,
rgba(5, 14, 27, .40) 0%,
rgba(5, 14, 27, .58) 46%,
rgba(5, 12, 23, .78) 100%
),
linear-gradient(90deg,
rgba(5, 12, 23, .72) 0%,
rgba(5, 12, 23, .54) 58%,
rgba(5, 12, 23, .34) 100%
) !important;
opacity: 1;
}
.home-hero.has-hero-image::after {
background:
radial-gradient(circle at 80% 16%, rgba(255, 106, 0, .12), transparent 0 28%, transparent 58%);
opacity: .55;
}
.home-hero__route {
opacity: .78;
}
.home-hero__inner {
z-index: 4;
width: min(100% - 32px, 920px);
padding-top: 0;
padding-bottom: 0;
}
.home-hero .kicker {
margin-bottom: 18px;
}
.home-hero .hero-title {
font-size: clamp(36px, 10vw, 48px);
line-height: 1.48;
margin-bottom: 22px;
text-shadow: 0 3px 16px rgba(0, 0, 0, .38);
}
.home-hero p {
color: rgba(255, 255, 255, .92);
line-height: 1.95;
text-shadow: 0 2px 12px rgba(0, 0, 0, .34);
}
.hero-actions {
gap: 12px;
margin-top: 28px;
}
.hero-actions .btn {
min-height: 50px;
padding-inline: 20px;
font-size: 13.5px;
}
}
@media (max-width: 390px) {
.home-hero.has-hero-image {
min-height: 620px;
padding-bottom: 48px;
}
.hero-actions {
gap: 10px;
}
.hero-actions .btn {
padding-inline: 17px;
font-size: 13px;
}
} .home-hero__picture {
display: contents;
}
.home-hero__bg.takaoka-lcp-hero {
animation: none !important;
will-change: auto;
transform: scale(1.01);
}
@media (min-width: 761px) {
.home-hero.has-hero-image .home-hero__bg.takaoka-lcp-hero {
opacity: .55;
filter: brightness(.62) saturate(.9) contrast(1.06);
}
}
@media (max-width: 760px) {
.home-hero.has-hero-image .home-hero__bg.takaoka-lcp-hero {
transform: none !important;
object-position: 62% center;
}
} .home-hero__bg,
.home-hero__bg.takaoka-lcp-hero {
animation: none !important;
transition: none !important;
will-change: auto !important;
}
.home-hero__route {
animation: none !important;
transform: scaleX(1) !important;
}
@media (max-width: 760px) {
.home-hero.has-hero-image .home-hero__bg,
.home-hero.has-hero-image .home-hero__bg.takaoka-lcp-hero {
filter: none !important;
opacity: .58 !important;
}
} .type-card__bg[data-bg]{background-image:none!important;}
.type-card__bg.is-bg-loaded{background-size:cover;background-position:center;} .site-logo {
width: 250px;
max-width: min(250px, 58vw);
height: 31px;
}
.site-logo img {
width: 250px;
max-width: 100%;
height: 31px;
max-height: 31px;
object-fit: contain;
}
.product-card__image img,
.doc-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 720 / 578;
}
.doc-card__image,
.product-card__image {
contain: layout paint;
}
@media (max-width: 760px) {
:root {
--font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
--font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
--font-en: "Helvetica Neue", Arial, sans-serif;
}
.home-hero__inner {
min-height: 372px;
}
.home-hero .hero-title {
min-height: 3.05em;
}
.home-hero p {
min-height: 7.8em;
}
.hero-actions {
min-height: 112px;
}
}.takaoka-contact {
width: 100%;
max-width: 1080px;
margin: 0 auto;
color: #243044;
}
.takaoka-contact__notice {
margin: 0 0 28px;
padding: clamp(22px, 3vw, 34px);
border: 1px solid #d8dee6;
border-left: 5px solid #f27117;
border-radius: 22px;
background: #fff;
box-shadow: 0 14px 34px rgba(8, 10, 13, .05);
}
.takaoka-contact__notice p {
margin: 0;
line-height: 1.9;
}
.takaoka-contact__notice p + p {
margin-top: 8px;
}
.takaoka-contact__notice-title {
margin-bottom: 10px !important;
color: #0d1f40;
font-weight: 700;
font-size: 1.12rem;
}
.takaoka-contact__message {
margin: 0 0 24px;
padding: 18px 22px;
border-radius: 16px;
font-weight: 700;
}
.takaoka-contact__message--success {
border: 1px solid #b7dec2;
background: #edf8f0;
color: #135d2b;
}
.takaoka-contact__message--error {
border: 1px solid #f2b7b7;
background: #fff1f1;
color: #a32222;
}
.takaoka-contact__form {
padding: clamp(24px, 4vw, 44px);
border: 1px solid #d8dee6;
border-radius: 26px;
background: #fff;
box-shadow: 0 18px 44px rgba(8, 10, 13, .06);
}
.takaoka-contact__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 22px;
row-gap: 0;
}
.takaoka-contact__field {
display: block;
margin-bottom: 22px;
}
.takaoka-contact__field > span,
.takaoka-contact__field--choice legend {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
padding: 0;
color: #0d1f40;
font-weight: 700;
line-height: 1.5;
}
.takaoka-contact__field em,
.takaoka-contact__field--choice legend em {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 2px 8px;
border-radius: 999px;
background: #f27117;
color: #fff;
font-size: 12px;
font-style: normal;
line-height: 1;
}
.takaoka-contact__field input,
.takaoka-contact__field textarea {
width: 100%;
border: 1px solid #cdd5df;
border-radius: 14px;
background: #fbfcfe;
color: #243044;
font: inherit;
line-height: 1.6;
box-sizing: border-box;
}
.takaoka-contact__field input {
min-height: 52px;
padding: 12px 14px;
}
.takaoka-contact__field textarea {
min-height: 145px;
padding: 14px;
resize: vertical;
}
.takaoka-contact__field input:focus,
.takaoka-contact__field textarea:focus {
outline: none;
border-color: #f27117;
box-shadow: 0 0 0 4px rgba(242, 113, 23, .12);
background: #fff;
}
.takaoka-contact__field--choice {
margin: 0 0 26px;
padding: 0;
border: 0;
min-width: 0;
}
.takaoka-contact__choices {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.takaoka-contact__choice {
display: inline-flex;
align-items: center;
margin: 0;
cursor: pointer;
}
.takaoka-contact__choice input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.takaoka-contact__choice span {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 9px 14px;
border: 1px solid #cdd5df;
border-radius: 999px;
background: #fbfcfe;
color: #243044;
font-weight: 700;
line-height: 1.4;
transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.takaoka-contact__choice input:focus + span {
border-color: #f27117;
box-shadow: 0 0 0 4px rgba(242, 113, 23, .12);
}
.takaoka-contact__choice input:checked + span {
border-color: #f27117;
background: #fff4ec;
color: #0d1f40;
box-shadow: 0 0 0 3px rgba(242, 113, 23, .13);
}
.takaoka-contact__agree {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 8px 0 28px;
padding: 18px;
border-radius: 16px;
background: #f7f9fb;
color: #243044;
font-weight: 700;
}
.takaoka-contact__agree input {
width: 18px;
height: 18px;
margin-top: 4px;
accent-color: #f27117;
}
.takaoka-contact__hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
.takaoka-contact__actions {
text-align: center;
}
.takaoka-contact__actions button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 240px;
min-height: 58px;
padding: 14px 34px;
border: 0;
border-radius: 999px;
background: #0d1f40;
color: #fff;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.takaoka-contact__actions button:hover {
transform: translateY(-1px);
background: #122b59;
box-shadow: 0 14px 28px rgba(13, 31, 64, .22);
}
@media (max-width: 760px) {
.takaoka-contact__grid {
grid-template-columns: 1fr;
}
.takaoka-contact__form {
border-radius: 20px;
}
.takaoka-contact__actions button {
width: 100%;
}
}.page-hero--contact.contact-hero-compact{padding:clamp(72px,7vw,108px) 0!important;background:#f4f6f9!important}.page-hero--contact .container{width:min(860px,calc(100% - 40px))!important;margin-inline:auto!important}.contact-page-intro-section{padding:clamp(48px,6vw,80px) 0!important;background:#fff!important}.contact-form-section{padding:clamp(48px,6vw,86px) 0!important;background:#f4f6f9!important}.contact-page-intro-card,.contact-form-shell{border:1px solid #d8dee6!important;border-radius:28px!important;background:#fff!important;box-shadow:0 18px 44px rgba(8,10,13,.06)!important}.contact-page-intro-card{padding:clamp(28px,4vw,48px)!important}.contact-page-intro-card h2{margin:0 0 18px!important;color:#080a0d!important;font-size:clamp(24px,2.4vw,34px)!important;line-height:1.55!important}.contact-page-intro-card__body p{margin:0!important;color:#4d5663!important;line-height:2!important}.contact-page-intro-card__body p+p{margin-top:12px!important}.contact-form-shell{padding:clamp(24px,3vw,42px)!important}.contact-form-shell .takaoka-contact{max-width:none!important;margin:0!important}.takaoka-form-missing-notice{padding:24px;border:1px solid #f2b7b7;border-radius:18px;background:#fff1f1;color:#a32222}.takaoka-form-missing-notice p{margin:0;line-height:1.8}.takaoka-form-missing-notice p+p{margin-top:6px}@media(max-width:760px){.page-hero--contact.contact-hero-compact{padding:64px 0 72px!important}.contact-page-intro-card,.contact-form-shell{border-radius:20px!important}}html body.page-template-page-contact,
html body.page-template-page-contact#error-page {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: #f4f6f9 !important;
}
html body.page-template-page-contact .site-header,
html body.page-template-page-contact main,
html body.page-template-page-contact .site-footer {
width: 100% !important;
max-width: none !important;
} .site-header {
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
width: 100% !important;
background: rgba(255,255,255,.98) !important;
border-bottom: 1px solid rgba(221,225,230,.9) !important;
}
.admin-bar .site-header {
top: 32px !important;
}
.site-header__inner {
width: min(1180px, calc(100% - 48px)) !important;
max-width: 1180px !important;
margin: 0 auto !important;
padding: 16px 0 13px !important;
display: grid !important;
grid-template-columns: 1fr auto !important;
grid-template-areas: "brand cta" "nav nav" !important;
align-items: center !important;
justify-content: space-between !important;
row-gap: 12px !important;
column-gap: 24px !important;
}
.site-logo {
grid-area: brand !important;
display: inline-flex !important;
align-items: center !important;
justify-self: start !important;
width: auto !important;
height: auto !important;
text-decoration: none !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
transform: none !important;
}
.site-logo__text {
display: inline-flex !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
font-size: 20px !important;
line-height: 1 !important;
letter-spacing: .18em !important;
color: #111820 !important;
}
.header-cta {
grid-area: cta !important;
justify-self: end !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
padding: 0 20px !important;
border-radius: 999px !important;
background: #ff6a00 !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
text-decoration: none !important;
white-space: nowrap !important;
word-break: keep-all !important;
writing-mode: horizontal-tb !important;
}
.site-nav {
grid-area: nav !important;
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
background: transparent !important;
border: 0 !important;
}
.site-nav__list,
.site-menu,
.primary-menu {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 12px 22px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.site-nav__list > li,
.site-menu > li,
.primary-menu > li {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.site-nav a,
.site-menu a,
.primary-menu a {
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
color: #111820 !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
text-decoration: none !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
} .page-template-page-contact .contact-hero-compact {
padding: clamp(64px, 7vw, 96px) 0 clamp(40px, 5vw, 70px) !important;
}
.page-template-page-contact .contact-page-intro-section {
background: #fff !important;
padding: clamp(46px, 6vw, 86px) 0 !important;
}
.page-template-page-contact .contact-form-section {
background: #f4f6f9 !important;
padding: clamp(46px, 6vw, 86px) 0 !important;
}
.page-template-page-contact .contact-page-intro-card,
.page-template-page-contact .contact-form-shell {
border: 1px solid #d8dee6 !important;
border-radius: 28px !important;
background: #fff !important;
box-shadow: 0 18px 44px rgba(8,10,13,.06) !important;
}
.page-template-page-contact .contact-page-intro-card {
padding: clamp(28px, 4vw, 48px) !important;
}
.page-template-page-contact .contact-form-shell {
padding: clamp(24px, 4vw, 44px) !important;
}
.page-template-page-contact .contact-form-shell .takaoka-contact {
max-width: none !important;
margin: 0 !important;
}
.takaoka-form-missing-notice {
padding: 24px;
border: 1px solid #f2b7b7;
border-radius: 18px;
background: #fff1f1;
color: #a32222;
}
.takaoka-form-missing-notice p {
margin: 0;
line-height: 1.8;
}
.takaoka-form-missing-notice p + p {
margin-top: 6px;
}
@media (max-width: 760px) {
.site-header__inner {
width: min(100% - 32px, 1180px) !important;
grid-template-columns: 1fr !important;
grid-template-areas: "brand" "cta" "nav" !important;
justify-items: center !important;
}
.site-logo,
.header-cta {
justify-self: center !important;
}
.site-nav__list,
.site-menu,
.primary-menu {
gap: 10px 14px !important;
}
.page-template-page-contact .contact-page-intro-card,
.page-template-page-contact .contact-form-shell {
border-radius: 20px !important;
}
} .dealer-notice__body p { white-space: pre-line; }
.spec-cta__small { line-height: 1.9 !important; }
.product-card__content p,
.doc-card__body p,
.related-card p { line-height: 1.85 !important; }
.product-caution p { white-space: pre-line; }
.doc-empty { grid-column: 1 / -1; }
@media (max-width: 760px) {
.product-detail-hero__grid,
.container.two-col { grid-template-columns: 1fr !important; }
}.page-catch {
padding: clamp(26px, 4vw, 48px) 0 0;
background: #f4f6f9;
}
.page-catch + .section {
padding-top: clamp(56px, 7vw, 100px);
}
.page-catch__figure {
margin: 0;
position: relative;
overflow: hidden;
border-radius: 28px;
background: #0b1118;
box-shadow: 0 26px 70px rgba(8, 10, 13, .14);
aspect-ratio: 16 / 9;
}
.page-catch__figure::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(8, 13, 20, .32), rgba(8, 13, 20, .05) 56%, rgba(8, 13, 20, .20));
pointer-events: none;
}
.page-catch__figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-catch__figure figcaption {
position: absolute;
left: 24px;
bottom: 20px;
z-index: 1;
color: #fff;
font-size: 13px;
line-height: 1.7;
text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.company-photo-section {
background: #fff;
}
.company-photo-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 2vw, 26px);
}
.company-photo-card {
margin: 0;
border-radius: 24px;
overflow: hidden;
background: #fff;
border: 1px solid #dde3eb;
box-shadow: 0 18px 44px rgba(8, 10, 13, .07);
}
.company-photo-card img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.company-photo-card figcaption {
padding: 14px 16px 16px;
color: #4d5663;
font-size: 13px;
line-height: 1.7;
}
.company-map-section {
background: #f4f6f9;
}
.company-map-layout {
align-items: center;
}
.company-address-text,
.company-access-note p {
color: #4d5663;
line-height: 2;
}
.company-map-embed {
overflow: hidden;
border-radius: 26px;
min-height: 360px;
background: #dfe5ec;
border: 1px solid #d8dee6;
box-shadow: 0 18px 44px rgba(8, 10, 13, .08);
}
.company-map-embed iframe {
display: block;
width: 100% !important;
height: 420px !important;
border: 0;
} .page-template-page-contact .contact-form-section {
background: #f4f6f9 !important;
}
.page-template-page-contact .contact-form-shell {
padding: clamp(24px, 3.2vw, 46px) !important;
border-radius: 30px !important;
background: #fff !important;
border: 1px solid #d8dee6 !important;
box-shadow: 0 26px 70px rgba(8, 10, 13, .08) !important;
}
.page-template-page-contact .contact-form-shell form,
.page-template-page-contact .contact-form-shell .takaoka-form,
.page-template-page-contact .contact-form-shell .takaoka-contact__form {
display: grid;
gap: 24px;
}
.page-template-page-contact .contact-form-shell fieldset,
.page-template-page-contact .contact-form-shell .form-section,
.page-template-page-contact .contact-form-shell .takaoka-contact__section,
.page-template-page-contact .contact-form-shell .takaoka-form-section {
margin: 0 0 22px;
padding: clamp(22px, 3vw, 32px);
border: 1px solid #dde3eb;
border-radius: 24px;
background: #fbfcfd;
box-shadow: 0 12px 32px rgba(8, 10, 13, .04);
}
.page-template-page-contact .contact-form-shell legend,
.page-template-page-contact .contact-form-shell h3,
.page-template-page-contact .contact-form-shell .form-section-title,
.page-template-page-contact .contact-form-shell .takaoka-contact__section-title {
margin: 0 0 18px;
color: #080a0d;
font-weight: 900;
font-size: clamp(19px, 2vw, 24px);
line-height: 1.55;
}
.page-template-page-contact .contact-form-shell label,
.page-template-page-contact .contact-form-shell .field-label,
.page-template-page-contact .contact-form-shell .takaoka-contact__label {
display: block;
margin: 0 0 8px;
color: #1d2733;
font-weight: 800;
line-height: 1.65;
}
.page-template-page-contact .contact-form-shell input[type="text"],
.page-template-page-contact .contact-form-shell input[type="email"],
.page-template-page-contact .contact-form-shell input[type="tel"],
.page-template-page-contact .contact-form-shell input[type="url"],
.page-template-page-contact .contact-form-shell input[type="number"],
.page-template-page-contact .contact-form-shell select,
.page-template-page-contact .contact-form-shell textarea {
width: 100%;
min-height: 48px;
padding: 13px 15px;
border: 1px solid #cfd8e3;
border-radius: 14px;
background: #fff;
color: #080a0d;
font: inherit;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.page-template-page-contact .contact-form-shell textarea {
min-height: 140px;
resize: vertical;
}
.page-template-page-contact .contact-form-shell input:focus,
.page-template-page-contact .contact-form-shell select:focus,
.page-template-page-contact .contact-form-shell textarea:focus {
outline: none;
border-color: #ff6b1a;
box-shadow: 0 0 0 4px rgba(255, 107, 26, .13);
}
.page-template-page-contact .contact-form-shell .form-grid,
.page-template-page-contact .contact-form-shell .takaoka-contact__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.page-template-page-contact .contact-form-shell .choice-grid,
.page-template-page-contact .contact-form-shell .takaoka-contact__choices,
.page-template-page-contact .contact-form-shell .checkbox-group,
.page-template-page-contact .contact-form-shell .radio-group {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.page-template-page-contact .contact-form-shell .choice-grid label,
.page-template-page-contact .contact-form-shell .takaoka-contact__choices label,
.page-template-page-contact .contact-form-shell .checkbox-group label,
.page-template-page-contact .contact-form-shell .radio-group label {
display: flex;
gap: 8px;
align-items: center;
min-height: 46px;
padding: 10px 12px;
border: 1px solid #dde3eb;
border-radius: 14px;
background: #fff;
font-weight: 700;
font-size: 14px;
}
.page-template-page-contact .contact-form-shell input[type="checkbox"],
.page-template-page-contact .contact-form-shell input[type="radio"] {
accent-color: #ff6b1a;
}
.page-template-page-contact .contact-form-shell button,
.page-template-page-contact .contact-form-shell input[type="submit"],
.page-template-page-contact .contact-form-shell .submit-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 14px 24px;
border: 0;
border-radius: 999px;
background: #ff6b1a;
color: #fff;
font-weight: 900;
font-size: 15px;
cursor: pointer;
box-shadow: 0 14px 30px rgba(255, 107, 26, .24);
}
.page-template-page-contact .contact-form-shell button:hover,
.page-template-page-contact .contact-form-shell input[type="submit"]:hover,
.page-template-page-contact .contact-form-shell .submit-button:hover {
transform: translateY(-1px);
}
@media (max-width: 820px) {
.company-photo-grid,
.page-template-page-contact .contact-form-shell .form-grid,
.page-template-page-contact .contact-form-shell .takaoka-contact__grid,
.page-template-page-contact .contact-form-shell .choice-grid,
.page-template-page-contact .contact-form-shell .takaoka-contact__choices,
.page-template-page-contact .contact-form-shell .checkbox-group,
.page-template-page-contact .contact-form-shell .radio-group {
grid-template-columns: 1fr;
}
.company-map-embed iframe {
height: 320px !important;
}
.page-catch__figure {
border-radius: 20px;
}
} .dealer-area-list {
display: grid;
gap: 28px;
}
.dealer-area-section {
background: #fff;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 20px;
box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
overflow: hidden;
}
.dealer-area-section__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 26px;
background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.dealer-area-section__head h3 {
margin: 0;
font-size: clamp(1.15rem, 2vw, 1.55rem);
letter-spacing: .04em;
}
.dealer-area-section__head span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 54px;
height: 30px;
padding: 0 12px;
border-radius: 999px;
background: #fff;
color: #f97316;
font-weight: 700;
font-size: .85rem;
border: 1px solid rgba(249, 115, 22, .2);
}
.dealer-table-wrap {
overflow-x: auto;
}
.dealer-table {
width: 100%;
border-collapse: collapse;
min-width: 560px;
}
.dealer-table th,
.dealer-table td {
padding: 16px 26px;
border-bottom: 1px solid rgba(15, 23, 42, .08);
text-align: left;
vertical-align: middle;
}
.dealer-table th {
color: #64748b;
font-size: .78rem;
letter-spacing: .08em;
font-weight: 800;
background: #fbfdff;
}
.dealer-table td:first-child {
font-weight: 700;
color: #0f172a;
}
.dealer-table td:last-child {
white-space: nowrap;
color: #334155;
font-variant-numeric: tabular-nums;
}
.dealer-table tbody tr:last-child td {
border-bottom: none;
}
.dealer-card__sub {
color: #64748b;
font-size: .9rem;
}
@media (max-width: 767px) {
.dealer-area-section__head {
padding: 18px 18px;
}
.dealer-table {
min-width: 0;
}
.dealer-table thead {
display: none;
}
.dealer-table,
.dealer-table tbody,
.dealer-table tr,
.dealer-table td {
display: block;
width: 100%;
}
.dealer-table tr {
padding: 14px 18px;
border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.dealer-table td {
padding: 3px 0;
border-bottom: none;
}
.dealer-table td:last-child::before {
content: 'TEL：';
color: #94a3b8;
font-weight: 700;
}
} .dealer-list-section .section-head {
margin-bottom: clamp(28px, 4vw, 44px);
}
.dealer-list-head p {
max-width: 760px;
}
.dealer-area-list--cards {
gap: clamp(24px, 4vw, 38px);
}
.dealer-area-section--cards {
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 24px;
overflow: hidden;
background: #fff;
box-shadow: 0 18px 48px rgba(15, 23, 42, .06);
}
.dealer-area-section--cards .dealer-area-section__head {
padding: 20px clamp(20px, 3vw, 30px);
background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
}
.dealer-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: rgba(15, 23, 42, .08);
}
.dealer-list-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 178px;
padding: clamp(18px, 2vw, 24px);
background: #fff;
}
.dealer-list-card__company {
margin: 0;
color: #0f172a;
font-size: clamp(16px, 1.5vw, 19px);
font-weight: 900;
line-height: 1.5;
letter-spacing: .02em;
}
.dealer-list-card__company a {
color: inherit;
text-decoration: none;
}
.dealer-list-card__company a:hover {
color: #f97316;
}
.dealer-list-card__branch {
display: inline-flex;
align-self: flex-start;
margin: 10px 0 0;
padding: 5px 10px;
border-radius: 999px;
background: #fff7ed;
color: #c2410c;
font-size: 12px;
font-weight: 800;
line-height: 1.4;
}
.dealer-list-card__address {
margin: 12px 0 0;
color: #64748b;
font-size: 13px;
line-height: 1.75;
}
.dealer-list-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(15, 23, 42, .08);
}
.dealer-list-card__tel {
color: #0f172a;
font-size: 14px;
font-weight: 900;
text-decoration: none;
font-variant-numeric: tabular-nums;
}
.dealer-list-card__tel:hover {
color: #f97316;
}
.dealer-list-card__tel--muted {
color: #94a3b8;
}
.dealer-list-card__web {
flex: 0 0 auto;
padding: 6px 10px;
border-radius: 999px;
background: #f8fafc;
color: #64748b;
font-size: 12px;
font-weight: 900;
text-decoration: none;
}
.dealer-list-card__web:hover {
background: #fff7ed;
color: #ea580c;
}
.dealer-card__branch {
margin: -4px 0 12px;
color: #c2410c;
font-weight: 800;
}
@media (max-width: 1080px) {
.dealer-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.dealer-card-grid {
grid-template-columns: 1fr;
}
.dealer-list-card {
min-height: auto;
}
.dealer-list-card__footer {
align-items: flex-start;
flex-direction: column;
}
} .related-intro-section {
background: #fff;
}
.related-note-panel {
margin: 0 0 clamp(28px, 4vw, 48px);
padding: clamp(24px, 3vw, 34px);
border-radius: 26px;
border: 1px solid #dde6ef;
background:
linear-gradient(135deg, rgba(255, 106, 0, .10), rgba(255, 255, 255, 0) 42%),
#ffffff;
box-shadow: 0 18px 45px rgba(8, 10, 13, .055);
}
.related-note-panel p {
max-width: 920px;
margin: 8px 0 0;
color: #344055;
font-weight: 600;
line-height: 1.9;
}
.related-items-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2.2vw, 30px);
}
.related-item-card {
overflow: hidden;
border: 1px solid #dfe6ee;
border-radius: 26px;
background: #fff;
box-shadow: 0 18px 45px rgba(8, 10, 13, .055);
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.related-item-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 106, 0, .45);
box-shadow: 0 24px 60px rgba(8, 10, 13, .09);
}
.related-item-card__media {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 10;
background:
linear-gradient(135deg, rgba(255, 106, 0, .12), transparent 36%),
linear-gradient(135deg, #f8fbff, #eaf1f8);
overflow: hidden;
}
.related-item-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.related-item-card:hover .related-item-card__media img {
transform: scale(1.035);
}
.related-item-card__media--placeholder::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(11, 44, 78, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(11, 44, 78, .05) 1px, transparent 1px);
background-size: 28px 28px;
}
.related-item-card__media--placeholder span {
position: relative;
z-index: 1;
color: rgba(255, 106, 0, .72);
font-size: 12px;
font-weight: 900;
letter-spacing: .18em;
}
.related-item-card__body {
padding: clamp(22px, 2.5vw, 30px);
}
.related-item-card__category {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
color: #ff6a00;
font-size: 11px;
font-weight: 900;
letter-spacing: .14em;
}
.related-item-card__category::before {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: #ff6a00;
}
.related-item-card h3 {
margin: 0 0 12px;
color: #0b1118;
font-size: clamp(20px, 1.7vw, 24px);
line-height: 1.45;
}
.related-item-card p {
margin: 0;
color: #4b5565;
font-size: 14px;
line-height: 1.85;
}
.related-item-card__copy {
margin-bottom: 10px !important;
color: #111827 !important;
font-weight: 700;
}
.related-item-card__note {
margin-top: 14px !important;
padding-top: 14px;
border-top: 1px solid #edf1f5;
color: #64748b !important;
font-size: 13px !important;
}
.related-item-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
color: #ff6a00;
font-size: 14px;
font-weight: 900;
}
.related-item-card__link span {
transition: transform .25s ease;
}
.related-item-card__link:hover span {
transform: translateX(4px);
}
@media (max-width: 1100px) {
.related-items-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.related-items-grid {
grid-template-columns: 1fr;
}
.related-note-panel {
border-radius: 22px;
}
} .contact-faq-link-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 26px;
padding: clamp(18px, 2.6vw, 26px);
border: 1px solid #dde3eb;
border-radius: 22px;
background: #f4f6f9;
}
.contact-faq-link-card h3 {
margin: 0 0 6px;
color: #080a0d;
font-size: clamp(18px, 1.7vw, 22px);
line-height: 1.5;
}
.contact-faq-link-card p {
margin: 0;
color: #4d5663;
line-height: 1.8;
}
.contact-faq-link-card .btn {
flex: 0 0 auto;
white-space: nowrap;
}
.page-template-page-contact .takaoka-contact__required {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
padding: 2px 8px;
border-radius: 999px;
background: #ff6b1a;
color: #fff;
font-size: 12px;
font-weight: 900;
line-height: 1.4;
vertical-align: middle;
}
.page-template-page-contact .takaoka-contact__message {
margin: 0 0 24px;
padding: 18px 20px;
border-radius: 18px;
line-height: 1.8;
font-weight: 700;
}
.page-template-page-contact .takaoka-contact__message p,
.page-template-page-contact .takaoka-contact__message ul {
margin: 0;
}
.page-template-page-contact .takaoka-contact__message ul {
padding-left: 1.2em;
}
.page-template-page-contact .takaoka-contact__message--success {
border: 1px solid #bbf7d0;
background: #f0fdf4;
color: #166534;
}
.page-template-page-contact .takaoka-contact__message--error {
border: 1px solid #fecaca;
background: #fff1f2;
color: #991b1b;
}
.page-template-page-contact .takaoka-contact__hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.page-template-page-contact .takaoka-contact__privacy {
padding: 18px 20px;
border: 1px solid #dde3eb;
border-radius: 18px;
background: #fbfcfd;
}
.page-template-page-contact .takaoka-contact__privacy label {
display: flex;
align-items: center;
gap: 10px;
margin: 0 !important;
}
.page-template-page-contact .takaoka-contact__actions {
display: flex;
justify-content: flex-start;
margin-top: 2px;
}
.page-template-page-contact .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (max-width: 760px) {
.contact-faq-link-card {
display: grid;
gap: 16px;
}
.contact-faq-link-card .btn {
width: 100%;
justify-content: center;
}
} .page-template-page-contact .takaoka-contact__success-panel {
position: relative;
display: grid;
grid-template-columns: 82px 1fr;
gap: 24px;
margin: 0 0 32px;
padding: clamp(28px, 4vw, 44px);
border: 1px solid #bbf7d0;
border-radius: 28px;
background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 72%);
box-shadow: 0 22px 50px rgba(22, 101, 52, .09);
}
.page-template-page-contact .takaoka-contact__success-icon {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 999px;
background: #16a34a;
color: #ffffff;
font-size: 40px;
font-weight: 900;
box-shadow: 0 16px 28px rgba(22, 163, 74, .22);
}
.page-template-page-contact .takaoka-contact__success-kicker {
margin: 0 0 8px;
color: #16a34a;
font-family: var(--font-en);
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
}
.page-template-page-contact .takaoka-contact__success-body h2 {
margin: 0 0 12px;
color: #080a0d;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.45;
}
.page-template-page-contact .takaoka-contact__success-body p {
margin: 0 0 16px;
color: #253041;
font-size: 16px;
font-weight: 700;
line-height: 1.9;
}
.page-template-page-contact .takaoka-contact__success-body ul {
display: grid;
gap: 8px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
.page-template-page-contact .takaoka-contact__success-body li {
position: relative;
padding-left: 20px;
color: #4d5663;
line-height: 1.8;
}
.page-template-page-contact .takaoka-contact__success-body li::before {
content: "";
position: absolute;
left: 0;
top: .75em;
width: 7px;
height: 7px;
border-radius: 999px;
background: #16a34a;
}
.page-template-page-contact .takaoka-contact__success-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.page-template-page-contact .takaoka-contact__success-actions .btn {
min-height: 48px;
}
@media (max-width: 720px) {
.page-template-page-contact .takaoka-contact__success-panel {
grid-template-columns: 1fr;
gap: 18px;
}
.page-template-page-contact .takaoka-contact__success-icon {
width: 64px;
height: 64px;
font-size: 34px;
}
.page-template-page-contact .takaoka-contact__success-actions {
flex-direction: column;
}
} @media (max-width: 760px) {
.page-template-page-contact .contact-form-section {
padding: 28px 0 44px !important;
}
.page-template-page-contact .contact-form-section .container.narrow {
width: calc(100% - 20px) !important;
max-width: 860px !important;
}
.page-template-page-contact .contact-form-shell {
padding: 14px !important;
border-radius: 22px !important;
}
.page-template-page-contact .contact-form-shell .takaoka-contact,
.page-template-page-contact .contact-form-shell .takaoka-contact__form,
.page-template-page-contact .contact-form-shell .takaoka-contact__section,
.page-template-page-contact .contact-form-shell .takaoka-contact__grid,
.page-template-page-contact .contact-form-shell .takaoka-contact__choices,
.page-template-page-contact .contact-form-shell .takaoka-contact__privacy,
.page-template-page-contact .contact-form-shell .takaoka-contact__actions {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.page-template-page-contact .contact-form-shell .takaoka-contact__form {
gap: 18px !important;
}
.page-template-page-contact .contact-form-shell .takaoka-contact__section {
margin: 0 0 14px !important;
padding: 18px 14px !important;
border-radius: 20px !important;
}
.page-template-page-contact .contact-form-shell .takaoka-contact__section-title {
margin: 0 0 14px !important;
font-size: 20px !important;
line-height: 1.5 !important;
}
.page-template-page-contact .contact-form-shell input[type="text"],
.page-template-page-contact .contact-form-shell input[type="email"],
.page-template-page-contact .contact-form-shell input[type="tel"],
.page-template-page-contact .contact-form-shell input[type="url"],
.page-template-page-contact .contact-form-shell input[type="number"],
.page-template-page-contact .contact-form-shell select,
.page-template-page-contact .contact-form-shell textarea {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
border-radius: 18px !important;
}
.page-template-page-contact .contact-form-shell textarea {
min-height: 200px !important;
}
.page-template-page-contact .contact-form-shell .takaoka-contact__choices label {
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.page-template-page-contact .takaoka-contact__privacy {
padding: 16px 14px !important;
border-radius: 18px !important;
}
.page-template-page-contact .takaoka-contact__privacy label {
align-items: flex-start !important;
}
.page-template-page-contact .takaoka-contact__actions {
justify-content: center !important;
margin-top: 0 !important;
}
.page-template-page-contact .contact-form-shell .submit-button {
width: 100% !important;
min-height: 56px !important;
}
}
@media (max-width: 480px) {
.page-template-page-contact .contact-form-section .container.narrow {
width: calc(100% - 16px) !important;
}
.page-template-page-contact .contact-form-shell {
padding: 10px !important;
}
.page-template-page-contact .contact-form-shell .takaoka-contact__section {
padding: 16px 10px !important;
}
.page-template-page-contact .contact-form-shell textarea {
min-height: 210px !important;
}
}