@charset "UTF-8";
@charset "UTF-8";

  :root {
--color-base: #ffffff;
--color-main: #072d99;
--color-main-dark: #051f6c;
--color-main-soft: #e8edf8;
--color-ink: #14181f;
--color-text: #2a2f3a;
--color-muted: #5a6072;
--color-line: #d8dce4;
--color-line-strong: #b9c0cc;
--color-bg-soft: #f5f7fb;
--color-bg-band: #f0f3f9;
--container-max: 1200px;
--container-pad: clamp(20px, 4vw, 48px);
--section-pad-y: clamp(56px, 8vw, 96px);
--font-sans-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
--font-sans-en: "Helvetica Neue", Arial, system-ui, sans-serif;
--radius-xs: 0;
--radius-sm: 2px;
--radius-md: 4px;
--shadow-card: 0 1px 0 rgba(20,24,31,0.04);
--header-h: 96px;
--header-h-sp: 68px;
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
} *,
*::before,
*::after {box-sizing: border-box;}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0; overflow-x: hidden;
overflow-x: clip;
font-family: var(--font-sans-ja);
font-size: 16px;
line-height: 1.8;
color: var(--color-text);
background: var(--color-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "palt";
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video {
max-width: 100%;
height: auto;
vertical-align: middle;
}
a {
color: var(--color-main);
text-decoration: none;
transition: color 0.2s var(--ease-out);
}
a:hover { color: var(--color-main-dark); }
a:focus-visible {
outline: 2px solid var(--color-main);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
button:focus-visible {
outline: 2px solid var(--color-main);
outline-offset: 3px;
}
input, textarea, select {
font: inherit;
color: inherit;
} .visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.skip-link {
position: absolute;
top: 0;
left: 16px;
z-index: 1000;
padding: 10px 16px;
background: var(--color-main);
color: #fff;
font-weight: 700;
transform: translateY(-110%);
transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: translateY(8px); color: #fff; } .container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.section-head {
margin-bottom: clamp(24px, 4vw, 40px);
}
.section-head--row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 24px;
}
.section-eyebrow {
font-family: var(--font-sans-en);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--color-main);
margin-bottom: 6px;
text-transform: uppercase;
}
.section-eyebrow--white { color: #fff; opacity: 0.9; }
.section-title {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 700;
line-height: 1.45;
color: var(--color-ink);
position: relative;
padding-bottom: 12px;
}
.section-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background: var(--color-main);
}
.section-cta {
margin: 0;
} .link-arrow {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
padding-right: 26px;
color: var(--color-main);
font-weight: 700;
font-size: 16px;
}
.link-arrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 18px;
height: 2px;
background: var(--color-main);
transform: translateY(-50%);
transition: transform 0.2s var(--ease-out);
}
.link-arrow::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 8px;
height: 8px;
border-top: 2px solid var(--color-main);
border-right: 2px solid var(--color-main);
transform: translate(0, -50%) rotate(45deg);
transition: transform 0.2s var(--ease-out);
}
.link-arrow:hover::after,
.link-arrow:hover::before { transform: translate(4px, -50%) rotate(0); }
.link-arrow:hover::before { transform: translate(4px, -50%) rotate(45deg); }
.link-arrow--small { font-size: 16px; padding-right: 22px; }
.btn-outline-white {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 14px 22px 14px 22px;
border: 1px solid rgba(255,255,255,0.7);
color: #fff;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.06em;
position: relative;
transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.btn-outline-white::after {
content: "";
width: 24px;
height: 1px;
background: currentColor;
position: relative;
top: -1px;
}
.btn-outline-white:hover {
background: rgba(255,255,255,0.1);
border-color: #fff;
color: #fff;
} .site-header {
position: sticky;
top: 0;
z-index: 100;
background: #ffffff;
border-bottom: 1px solid var(--color-line);
transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.home-page .site-header {
position: fixed;
left: 0;
right: 0;
background: rgba(255,255,255,0.8);
border-bottom-color: transparent;
box-shadow: 1.634px 2.516px 12px 0px rgba(147, 137, 129, 0.18);
}
.home-page .site-header.is-compact {
background: #fff;
} @media (min-width: 1025px) {
.site-header.is-compact .brand-tagline,
.site-header.is-compact .site-header__utility {
display: none;
}
.site-header.is-compact .site-header__inner {
min-height: 0;
grid-template-rows: 1fr;
padding-top: 8px;
padding-bottom: 8px;
row-gap: 0;
align-items: center;
}
.site-header.is-compact .site-header__brand { grid-row: 1; }
.site-header.is-compact .global-nav,
.site-header.is-compact .site-header__cta,
.site-header.is-compact .site-header__phone {
grid-row: 1;
}
.site-header.is-compact .brand img { height: 36px !important; transition: height 0.2s var(--ease-out); }
.site-header.is-compact .site-header__phone-img { height: 22px !important; }
.site-header.is-compact .site-header__phone-hours { display: none; }
.site-header.is-compact .site-header__phone { margin-bottom: 0; align-items: center; justify-content: center; }
.site-header.is-compact .site-header__cta { padding: 0.6em 22px; min-width: 152px; font-size: 16px; }
.site-header.is-compact .global-nav { padding-bottom: 0; }
}
.brand img { transition: height 0.2s var(--ease-out); }
.site-header__cta { transition: background-color 0.2s var(--ease-out), padding 0.2s var(--ease-out), font-size 0.2s var(--ease-out); }
.site-header__phone-img { transition: height 0.2s var(--ease-out), opacity 0.2s var(--ease-out); }
.site-header__inner {
width: 100%;
margin-inline: auto;
padding: 6px 2rem 12px;
min-height: var(--header-h);
display: grid;
grid-template-columns: auto 1fr auto auto;
grid-template-rows: auto auto;
align-items: end;
column-gap: 20px;
row-gap: 12px;
}
.site-header__brand {
grid-column: 1;
grid-row: 1 / span 2;
align-self: anchor-center;
display: flex;
flex-direction: column;
align-items: start;
gap: 6px;
}
.brand img {
display: block;
height: 46px;
width: auto;
}
.brand-tagline {
color: var(--color-muted);
line-height: 1.4;
padding-left: 0;
}
.site-header__utility {
grid-column: 2 / span 3;
grid-row: 1;
align-self: center;
justify-self: end;
margin-right: calc(var(--container-pad) * -1);
padding-right: var(--container-pad);
display: flex;
justify-content: flex-end;
align-items: center;
gap: 18px;
} .site-header__cta {
grid-column: 3;
grid-row: 2;
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 168px;
padding: .8em 26px;
background: var(--color-main);
color: #fff;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 999px;
transition: background-color 0.2s var(--ease-out);
}
.site-header__cta:hover,
.site-header__cta:focus-visible {
background: var(--color-main-dark);
color: #fff;
}
.site-header__cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.site-header__cta svg { flex-shrink: 0; } .site-header__phone {
grid-column: 4;
grid-row: 2;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-left: -10px; margin-bottom: -2px;
}
.site-header__phone-num {
display: inline-flex;
align-items: center;
line-height: 1.1;
}
.site-header__phone-num:hover .site-header__phone-img,
.site-header__phone-num:focus-visible .site-header__phone-img { opacity: 0.78; }
.site-header__phone-img {
display: block;
height: 1.5em;
width: auto;
transition: opacity 0.2s var(--ease-out);
}
.site-header__phone-hours {
font-size: 16px;
color: var(--color-muted);
margin-top: 6px;
white-space: nowrap;
}
.site-search {
display: flex;
align-items: stretch;
border: 1px solid var(--color-line-strong);
height: 2em;
}
.site-search input[type="search"] {
border: 0;
padding: 0 10px;
width: 200px;
font-size: 16px;
background: transparent;
color: var(--color-text);
}
.site-search input[type="search"]::placeholder { color: var(--color-muted); }
.site-search input[type="search"]:focus { outline: none; }
.site-search:focus-within {
outline: 2px solid var(--color-main);
outline-offset: 2px;
}
.site-search__submit {
width: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-main);
color: #fff;
}
.site-search__submit:hover { background: var(--color-main-dark); } .product-search-form {
display: block;
width: 100%;
}
.product-search-form__row {
display: flex;
align-items: stretch;
border: 1px solid var(--color-line-strong);
background: #fff;
height: 48px;
}
.product-search-form__row:focus-within {
outline: 2px solid var(--color-main);
outline-offset: 2px;
}
.product-search-form__field {
display: flex;
align-items: center;
position: relative;
}
.product-search-form__field--keyword {
flex: 1;
min-width: 0;
}
.product-search-form__field--cat {
flex: 0 0 auto;
width: 220px;
border-left: 1px solid var(--color-line);
}
.product-search-form__field--keyword input[type="search"] {
width: 100%;
height: 100%;
border: 0;
background: transparent;
padding: 0 14px;
color: var(--color-text);
font-family: inherit;
}
.product-search-form__field--keyword input[type="search"]:focus { outline: none; }
.product-search-form__field--keyword input[type="search"]::placeholder { color: var(--color-muted); }
.product-search-form__field--cat select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: 100%;
border: 0;
background: transparent;
padding: 0 36px 0 14px;
color: var(--color-text);
font-family: inherit;
cursor: pointer;
}
.product-search-form__field--cat select:focus { outline: none; }
.product-search-form__caret {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--color-muted);
display: inline-flex;
}
.product-search-form__submit {
flex: 0 0 auto;
width: auto;
min-width: 100px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--color-main);
color: #fff;
border: 0;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.15s var(--ease-out);
}
.product-search-form__submit:hover { background: var(--color-main-dark); }
.product-search-form__submit svg { flex-shrink: 0; } @media (max-width: 768px) {
.product-search-form__row {
flex-direction: column;
height: auto;
}
.product-search-form__field--keyword,
.product-search-form__field--cat,
.product-search-form__submit {
width: 100%;
border-left: 0;
border-top: 1px solid var(--color-line);
}
.product-search-form__field--keyword {
border-top: 0;
height: 48px;
}
.product-search-form__field--cat { height: 48px; }
.product-search-form__submit { height: 48px; }
}
.lang-switch {
display: flex;
gap: 0;
align-items: center;
font-family: var(--font-sans-en);
letter-spacing: 0.06em;
}
.lang-switch li + li::before {
content: "|";
margin: 0 8px;
color: var(--color-line-strong);
}
.lang-switch a { color: var(--color-ink); font-weight: 700; }
.lang-switch [aria-current="page"] { color: var(--color-main); }
.lang-switch [aria-disabled="true"] {
color: var(--color-muted);
cursor: not-allowed;
text-decoration: line-through;
text-decoration-color: var(--color-line-strong);
}
.global-nav {
grid-column: 2;
grid-row: 2;
align-self: end;
justify-self: end;
padding-bottom: 2px;
} .global-nav__item--cta { display: none; }
.global-nav__item--lang { display: none; }
.global-nav__item--phone { display: none; }
.global-nav__list {
display: flex;
align-items: center;
gap: 4px;
}
.global-nav__link {
display: inline-flex;
align-items: center;
padding: 10px 14px;
color: var(--color-ink);
font-weight: 700;
letter-spacing: 0.04em;
position: relative;
}
.global-nav__link::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 4px;
height: 2px;
background: var(--color-main);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s var(--ease-out);
}
.global-nav__link:hover,
.global-nav__link:focus-visible,
.global-nav__item.is-open > .global-nav__link {
color: var(--color-main);
}
.global-nav__link:hover::after,
.global-nav__link:focus-visible::after,
.global-nav__item.is-open > .global-nav__link::after { transform: scaleX(1); }
.global-nav__link--cta {
margin-left: 8px;
background: var(--color-main);
color: #fff;
padding: 10px 20px;
}
.global-nav__link--cta::after { display: none; }
.global-nav__link--cta:hover,
.global-nav__link--cta:focus-visible {
color: #fff;
background: var(--color-main-dark);
} .global-nav__item.has-mega { position: static; } .global-nav__chevron {
display: inline-block;
flex: none;
width: 12px;
height: 12px;
margin-left: 6px;
transition: transform 0.35s var(--ease-out-expo);
}
.global-nav__item.is-open > .global-nav__link .global-nav__chevron { transform: rotate(180deg); } .mega {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: #fff;
border-top: 1px solid var(--color-line);
border-bottom: 3px solid var(--color-main);
box-shadow: 0 16px 28px -16px rgba(20,24,31,0.18);
z-index: 90;
display: grid;
grid-template-rows: 0fr;
opacity: 0; transition: opacity 0.2s var(--ease-out), grid-template-rows 0s linear 0.2s;
}
.mega[hidden] { display: none; }
.global-nav__item.is-open > .mega {
grid-template-rows: 1fr;
opacity: 1; transition: grid-template-rows 0.35s var(--ease-out-expo), opacity 0.1s linear;
}
.mega__inner {
min-height: 0;
overflow: hidden;
}
.mega__back, .mega__title { display: none; }
.mega__layout {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding: 0 var(--container-pad);
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
min-height: 380px;
} .mega__sidebar {
background: var(--color-main);
color: #fff;
padding: 8px 0 20px;
} .mega__sidebar-head {
display: block;
padding: 12px 20px;
margin-bottom: 8px;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.06em;
border-bottom: 1px solid rgba(255,255,255,0.18);
position: relative;
transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.mega__sidebar-head::before {
content: ">";
margin-right: 6px;
font-weight: 400;
opacity: 0.7;
}
.mega__sidebar-head:hover { color: rgba(255,255,255,0.85); }
.mega__sidebar-head.is-active {
background: #fff;
color: var(--color-main);
border-bottom-color: transparent;
}
.mega__sidebar-head.is-active:hover { color: var(--color-main-dark); } @media (min-width: 1025px) {
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 99;
background: rgba(20, 24, 31, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
body.is-mega-open::after {
opacity: 1;
visibility: visible;
transition: opacity 0.25s var(--ease-out), visibility 0s linear 0s;
}
}
.mega__sidebar-list {
list-style: none;
padding: 0;
margin: 0;
}
.mega__sidebar-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 20px;
background: transparent;
border: 0;
color: #fff;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.02em;
text-align: left;
line-height: 1.45;
cursor: pointer;
transition: background-color 0.15s var(--ease-out);
position: relative;
}
.mega__sidebar-btn > span:first-child { flex: 1; }
.mega__sidebar-btn:hover {
background: rgba(255,255,255,0.1);
}
.mega__sidebar-btn.is-active {
background: #fff;
color: var(--color-main);
}
.mega__sidebar-btn:focus-visible { outline-offset: -2px; outline-color: #fff; }
.mega__sidebar-arrow {
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
opacity: 0.8;
} .mega__content {
padding: 28px 32px;
background: #fff;
}
.mega__panel { display: none; }
.mega__panel.is-active { display: block; }
.mega__panel[hidden] { display: none; }
.mega__panel.is-active[hidden] { display: block; }
.mega__panel-head {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 700;
color: var(--color-main);
padding-bottom: 12px;
margin-bottom: 16px;
border-bottom: 1px solid var(--color-line);
letter-spacing: 0.04em;
width: 100%;
}
.mega__panel-head::before {
content: ">";
font-weight: 400;
}
.mega__panel-head:hover { color: var(--color-main-dark); }
.mega__panel-body {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px 32px;
}
.mega__panel-group {}
.mega__panel-heading {
font-size: 16px;
font-weight: 700;
color: var(--color-ink);
letter-spacing: 0.04em;
padding-bottom: 6px;
margin-bottom: 8px;
border-bottom: 1px solid var(--color-line);
position: relative;
}
.mega__panel-heading::before {
content: ">";
margin-right: 6px;
font-weight: 400;
color: var(--color-main);
}
.mega__panel-heading a {
color: inherit;
text-decoration: none;
}
.mega__panel-heading a:hover { color: var(--color-main); } .mega__panel-group--product .mega__panel-heading { margin-bottom: 0; }
.mega__panel-more { color: var(--color-muted); }
.mega__panel-empty {
color: var(--color-muted);
font-size: 13px;
}
.mega__panel-group ul {
list-style: none;
padding: 0;
margin: 0;
}
.mega__panel-group ul li { margin-bottom: 4px; }
.mega__panel-group ul a {
display: block;
padding: 4px 0 4px 16px;
font-size: 16px;
color: var(--color-ink);
line-height: 1.55;
position: relative;
}
.mega__panel-group ul a::before {
content: ">";
position: absolute;
left: 0;
top: 4px;
color: var(--color-main);
font-weight: 400;
}
.mega__panel-group ul a:hover {
color: var(--color-main);
text-decoration: underline;
} .nav-search { display: none; } .nav-toggle {
display: none;
width: var(--header-h-sp);
height: var(--header-h-sp);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 12px 0 10px;
background: var(--color-main);
color: #fff;
}
.nav-toggle__bar {
display: block;
width: 24px;
height: 2px;
background: #fff;
transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav-toggle__label {
letter-spacing: 0.1em;
font-family: var(--font-sans-en);
font-weight: 700;
line-height: 1;
margin-top: 0;
} body.is-nav-open .nav-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
body.is-nav-open .nav-toggle__bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
body.is-nav-open .nav-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
} .hero { background: var(--color-bg-soft); }
.carousel {
position: relative;
background: #02278e;
overflow: hidden;
}
.carousel__rail,
.carousel__stage {
display: contents;
}
.carousel__viewport {
position: relative;
overflow: hidden;
min-height: 600px;
height: clamp(600px, calc(100svh - 120px), 760px);
}
.carousel__track {
position: absolute;
inset: 0;
list-style: none;
margin: 0;
padding: 0;
}
.carousel__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
.carousel__slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity 0.6s var(--ease-out), visibility 0s linear 0s;
z-index: 2;
}
.carousel__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #02278e; background-image: var(--bg-pc);
}
.carousel__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgb(43 18 126 / 80%) 0%, rgb(26 51 115 / 50%) 35%, rgb(6 30 61 / 12%) 50%, rgb(0 0 0 / 0%) 63%), linear-gradient(180deg, rgb(23 19 52 / 85%) 0%, rgb(0 0 0 / 20%) 10%, rgba(255, 255, 255, 0) 22%);
pointer-events: none;
}
.carousel__caption {
position: absolute;
left: 0;
bottom: 0; z-index: 3;
padding: clamp(48px, 5vw, 70px) clamp(118px, 14vw, 210px) clamp(48px, 5vw, 70px) clamp(134px, 12vw, 190px);
color: var(--color-ink);
} .carousel__slide::before,
.carousel__slide::after { position: absolute;
top: -15vh;
left: 0; width: clamp(540px, 49.4vw, 935px);
aspect-ratio: 935 / 1197;
background: rgba(243, 246, 253, 0.702);
clip-path: polygon(0% 0%, 37% 0%, 100% 46.3%, 0% 99%);
filter: drop-shadow(2px 3px 7px rgba(147, 137, 129, 0.18));
pointer-events: none; 8); */
}
.carousel__slide::before { left: -6%;
z-index: 1;
}
.carousel__slide::after { z-index: 2;
}
.carousel__caption > * {
position: relative;
z-index: 1;
}
.carousel__headline {
font-size: clamp(42px, 8.3vw, 86px);
line-height: 1.22;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-base);
overflow-wrap: anywhere;
} .carousel__headline--long {
font-size: clamp(30px, 5.4vw, 56px);
line-height: 1.3;
letter-spacing: 0.02em;
}
.carousel__headline--xlong {
font-size: clamp(24px, 3.8vw, 40px);
line-height: 1.35;
letter-spacing: 0.01em;
}
.carousel__headline-accent {color: #ebb933;}
.carousel__lead {
font-size: clamp(16px, 1.3vw, 17px);
line-height: 1.9;
max-width: 560px;
color: var(--color-ink);
font-weight: 700;
}
.carousel__hud {
position: absolute;
left: clamp(24px, 3vw, 48px);
top: 50%;
transform: translateY(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
color: var(--color-ink);
}
.carousel__counter {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
font-family: var(--font-sans-en);
font-weight: 700;
letter-spacing: 0.04em;
margin: 0;
line-height: 1;
color: var(--color-ink);
}
.carousel__counter-current {
font-size: 32px;
color: var(--color-main);
}
.carousel__counter-sep {
display: block;
width: 2px;
height: 26px;
background: rgba(20,24,31,0.55);
overflow: hidden;
text-indent: -999em;
transform: rotate(28deg);
transform-origin: center;
margin: 4px 8px;
align-self: center;
}
.carousel__counter-total {
font-size: 16px;
color: var(--color-muted);
align-self: flex-end;
}
.carousel__indicators {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.carousel__indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(20,24,31,0.32);
border: 0;
padding: 0;
cursor: pointer;
transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.carousel__indicators button[aria-selected="true"] {
background: var(--color-main);
}
.carousel__indicators button:hover {
background: var(--color-main-dark);
transform: scale(1.12);
}
.carousel__nav,
.carousel__buttons {
position: absolute;
left: 0;
bottom: 0;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--color-main);
padding: 4px;
}
.carousel__btn {
width: 35px;
height: 35px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
}
.carousel__btn:hover { background: rgba(255,255,255,0.12); }
.carousel__btn:focus-visible { outline-offset: -2px; outline-color: #fff; }
.carousel__btn--toggle .icon-play { display: none; }
.carousel__btn--toggle[aria-pressed="true"] .icon-pause { display: none; }
.carousel__btn--toggle[aria-pressed="true"] .icon-play { display: inline-block; }
.carousel__thumbs {
position: absolute;
left: clamp(122px, 10vw, 220px);
bottom: clamp(32px, 4vw, 54px);
display: flex;
z-index: 4;
list-style: none;
padding: 0;
margin: 0;
width: clamp(460px, 49%, 780px); justify-content: flex-start;
}
.carousel__thumbs li {clip-path: polygon(46.13% 0, 99.81% 0, 53.68% 100%, 0% 100%);aspect-ratio: 16 / 9;position: relative;height: 220px;}
.carousel__thumbs li:before {content:"";display:block;background:var(--color-main);width:100%;height:100%;position:absolute;z-index: -1;}
.carousel__thumb {
position: relative;
display: block;
width: 100%;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.carousel__thumb img {
display: block;
width: 100%;
height: auto;
transition: opacity 0.25s var(--ease-out);
}
.carousel__thumb.is-active img { opacity: 1; }
.carousel__thumb img { opacity: 0.5; }
.carousel__thumb:focus-visible { outline-offset: 2px; }
.carousel__cta-bg {
position: absolute;
right: 0;
bottom: 0;
width: clamp(300px, 20%, 560px);
height: clamp(210px, 20%, 340px);
background: var(--color-main);
z-index: 4;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
pointer-events: none;
opacity: .8;
}
.carousel__cta {
position: absolute;
right: clamp(20px, 2.5vw, 40px);
bottom: clamp(28px, 4vw, 48px);
z-index: 5;
margin: 0;
}
.hero-cta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 26px;
min-width: 260px;
padding: 19px 24px;
background: #fff;
color: var(--color-main);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.08em;
text-decoration: none;
box-shadow: 0 6px 20px -8px rgba(2,39,142,0.4);
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.hero-cta:hover,
.hero-cta:focus-visible {
background: var(--color-main-dark);
color: #fff;
}
.hero-cta__arrow {
position: relative;
width: 32px;
height: 12px;
display: inline-block;
flex-shrink: 0;
}
.hero-cta__arrow::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background: currentColor;
transform: translateY(-50%);
}
.hero-cta__arrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 9px;
height: 9px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: translate(0, -50%) rotate(45deg);
}
@media (min-width: 1025px) {
.carousel {
display: flex;
align-items: stretch;
background: #fff;
}
.carousel__rail {
display: block;
position: relative;
flex: 0 0 122px;
width: 122px;
background: #fff;
}
.carousel__stage {
display: block;
position: relative;
width: calc(100% - 122px);
overflow: hidden;
}
.carousel__viewport {
margin-left: 0;
width: 100%;
min-height: 680px;
height: clamp(680px, 100svh, 876px);
}
.carousel__caption {
padding-left: clamp(58px, 4.4vw, 70px);
padding-right: clamp(64px, 8vw, 128px);
}
.carousel__headline {
font-size: clamp(48px, 9.5vw, 97px);
line-height: 1.18;
letter-spacing: 0.02em;
}
.carousel__headline--long {
font-size: clamp(34px, 6.2vw, 64px);
line-height: 1.28;
letter-spacing: 0.01em;
}
.carousel__headline--xlong {
font-size: clamp(26px, 4.3vw, 46px);
line-height: 1.35;
letter-spacing: 0;
}
.carousel__lead {
font-size: clamp(16px, 1.5vw, 24px);
line-height: 1.75;
max-width: 720px;
}
.carousel__hud {
left: 0;
right: 0;
top: 52%;
width: 100%;
transform: translateY(-50%);
gap: clamp(28px, 3.2vw, 42px);
color: var(--color-ink);
}
.carousel__counter {
align-items: center;
gap: 8px;
color: var(--color-ink);
}
.carousel__counter-current {
font-size: clamp(25px, 1.875vw, 30px);
color: var(--color-main);
line-height: 1;
}
.carousel__counter-sep {
width: auto;
height: auto;
margin: 0;
overflow: visible;
text-indent: 0;
background: transparent;
color: var(--color-ink);
font-size: clamp(20px, 1.5vw, 24px);
line-height: 1;
transform: none;
}
.carousel__counter-total {
align-self: center;
font-size: clamp(16px, 1vw, 16px);
color: var(--color-text);
}
.carousel__indicators {
gap: 14px;
}
.carousel__indicators button {
width: 14px;
height: 14px;
background: #b6bfce;
}
.carousel__indicators button[aria-selected="true"] {
background: var(--color-main);
}
.carousel__nav,
.carousel__buttons {
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 48px;
gap: 0;
padding: 0;
justify-content: stretch;
}
.carousel__btn {
flex: 1;
width: auto;
height: 48px;
}
.carousel__thumbs { left: clamp(-180px, -5vw, -80px);
bottom: clamp(34px, 4vw, 54px);
width: clamp(700px, 83vw, 840px);
} .carousel__thumbs > li {
flex: 0 0 40%;
height: auto; }
.carousel__thumbs > li + li {
margin-left: -16%;
}
.carousel__thumb img {
height: 100%;
object-fit: cover;
}
.carousel__cta-bg {
height: clamp(200px, 20%, 328px);
}
}   .about {
position: relative;
background: #fff;
padding-block: var(--section-pad-y);
overflow: hidden;
}
.about__row {
display: grid;
grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
column-gap: clamp(28px, 4vw, 56px);
align-items: stretch;
} .about-slider {
position: relative;
overflow: hidden;
min-height: 260px; margin-right: calc(-1 * ((100vw - min(var(--container-max), 100vw)) / 2 + var(--container-pad)));
}
.about-slider__track {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: flex;
gap: 2px;
width: max-content;
will-change: transform; }
.about-slider__panel {
position: relative;
flex: 0 0 auto;
width: clamp(220px, 20vw, 320px);
height: 100%;
overflow: hidden;
}
.about-slider__panel-link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
.about-slider__panel img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .about-slider__panel::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(7, 45, 153, 0.28) 65%,
rgba(7, 45, 153, 0.78) 100%
); */
}
.about-slider__panel-title {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 1;
margin: 0;
color: #fff;
text-align: center;
font-size: clamp(14px, 1.3vw, 17px);
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.5;
} .about-slider__nav {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
gap: 2px;
}
.about-slider__btn {
width: 48px;
height: 48px;
padding: 0;
border: 0;
background: #fff;
color: var(--color-main);
display: grid;
place-items: center;
cursor: pointer;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.about-slider__btn:hover {
background: var(--color-main);
color: #fff;
} .about__content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}
.about__title {
font-size: clamp(30px, 3.6vw, 46px);
font-weight: 700;
line-height: 1.5;
color: var(--color-ink);
margin: 0 0 24px;
}
.about__title-accent {
color: var(--color-main);
}
.about__body {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.about__text {
font-size: clamp(15px, 1.4vw, 16px);
line-height: 2.0;
color: var(--color-text);
margin: 0;
text-align: left;
}
.about__cta { margin: 0; } .business-page__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
column-gap: clamp(32px, 4vw, 56px);
align-items: start;
} .business-onestop { grid-column: 1; grid-row: 1; }
.business-slider  { grid-row: 2; }
.business-sections { grid-column: 1; grid-row: 3; min-width: 0; } .business-page__aside {
grid-column: 2;
grid-row: 1 / 4;
position: relative;
z-index: 5;
align-self: stretch;
}
.business-localnav {
position: sticky;
top: calc(var(--header-h) + 24px);
background: #fff;
border: 1px solid var(--color-line);
border-radius: 8px;
padding: 16px;
}
.business-localnav__label {
font-family: var(--font-sans-en);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--color-main);
margin: 0 0 10px;
}
.business-localnav__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
.business-localnav__list a {
display: block;
padding: 8px 8px 8px 12px;
border-left: 2px solid var(--color-line);
font-size: 14px;
line-height: 1.5;
color: var(--color-text);
text-decoration: none;
transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.business-localnav__list a:hover { color: var(--color-main); }
.business-localnav__list a.is-current {
color: var(--color-main);
border-left-color: var(--color-main);
font-weight: 700;
} .business-section { scroll-margin-top: calc(var(--header-h) + 24px); } .business-catch {
font-size: clamp(30px, 3.4vw, 44px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.06em;
color: var(--color-ink);
margin: 0 0 20px;
}
.business-text {
font-size: 16px;
line-height: 2;
color: var(--color-text);
margin: 0 0 1.6em;
}
.business-text:last-child { margin-bottom: 0; } .business-slider {
grid-column: 1 / -1;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-top: clamp(36px, 5vw, 56px);
margin-bottom: clamp(44px, 6vw, 72px);
overflow: hidden;
}
.business-slider__track {
display: flex;
width: max-content;
animation: kaneko-biz-marquee 48s linear infinite;
}
.business-slider__group { display: flex; }
.business-slider__group img {
display: block;
width: 300px;
height: auto;
flex: 0 0 auto;
} @keyframes kaneko-biz-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.business-slider__track { animation: none; }
} .business-h2 {
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
padding-left: 16px;
border-left: 4px solid var(--color-main);
margin: 0 0 24px;
}
.business-measure__media { margin: 0 0 28px; }
.business-measure__media img {
display: block;
max-width: 100%;
height: auto; }
.business-measure__cta { margin: 32px 0 0; } .business-block + .business-block { margin-top: clamp(40px, 6vw, 64px); }
.business-richtext > * { margin: 0 0 1.6em; }
.business-richtext > *:last-child { margin-bottom: 0; }
.business-richtext p,
.business-richtext li {
font-size: 16px;
line-height: 2;
color: var(--color-text);
}
.business-richtext ul,
.business-richtext ol {
padding-left: 1.6em;
display: grid;
gap: 4px;
}
.business-richtext ul { list-style: square; }
.business-richtext ol { list-style: decimal; }
.business-richtext h3 {
font-size: 20px;
font-weight: 700;
line-height: 1.5;
color: var(--color-ink);
margin-bottom: 0.8em;
}
.business-richtext h4 {
font-size: 17px;
font-weight: 700;
line-height: 1.5;
color: var(--color-ink);
margin-bottom: 0.6em;
}
.business-richtext a { text-decoration: underline; }
.business-richtext img { max-width: 100%; height: auto; }
.business-richtext blockquote {
border-left: 3px solid var(--color-line-strong);
padding-left: 1em;
color: var(--color-muted);
}
.business-cta { margin: 36px 0 0; } .products {
padding: var(--section-pad-y) 0;
background: var(--color-bg-soft);
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.product-card {
background: #fff;
border: 1px solid var(--color-line);
box-shadow: var(--shadow-card);
display: flex;
}
.product-card__link {
display: flex;
flex-direction: column;
color: var(--color-text);
width: 100%;
transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.product-card:hover {
border-color: var(--color-main);
}
.product-card:hover .product-card__title { color: var(--color-main); }
.product-card__media {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-bg-band);
}
.product-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s var(--ease-out);
}
.product-card:hover .product-card__media img {
transform: scale(1.03);
}
.product-card__badge {
position: absolute;
left: 0;
top: 16px;
background: var(--color-main);
color: #fff;
font-family: var(--font-sans-en);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.08em;
padding: 6px 12px 6px 14px;
}
.product-card__body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.product-card__model {
font-family: var(--font-sans-en);
font-size: 16px;
letter-spacing: 0.08em;
color: var(--color-muted);
font-weight: 700;
}
.product-card__title {
font-size: 17px;
line-height: 1.55;
font-weight: 700;
color: var(--color-ink);
transition: color 0.2s var(--ease-out);
}
.product-card__lead {
font-size: 16px;
line-height: 1.75;
color: var(--color-text);
flex: 1;
}
.product-card__body .link-arrow {
margin-top: 4px;
align-self: flex-start;
} .feature-banner {
margin-top: clamp(32px, 4vw, 48px);
border: 1px solid var(--color-line);
background: #fff;
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(0, 1.55fr);
overflow: hidden;
} .feature-banner__intro {
padding: clamp(28px, 3.5vw, 44px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.feature-banner__intro .section-eyebrow { margin-bottom: 4px; }
.feature-banner__title {
font-size: clamp(26px, 3vw, 36px);
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.35;
color: var(--color-main);
}
.feature-banner__lead {
font-size: 16px;
color: var(--color-text);
line-height: 1.7;
}
.feature-banner__cta { margin-top: 20px; }
.btn-feature {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-width: 220px;
padding: 16px 24px;
background: var(--color-main);
color: #fff;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.06em;
text-decoration: none;
transition: background-color 0.2s var(--ease-out);
}
.btn-feature:hover,
.btn-feature:focus-visible { background: var(--color-main-dark); color: #fff; }
.btn-feature__arrow {
display: inline-flex;
position: relative;
width: 24px;
height: 12px;
}
.btn-feature__arrow::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 22px;
height: 1px;
background: #fff;
transform: translateY(-50%);
}
.btn-feature__arrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 7px;
height: 7px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: translate(0, -50%) rotate(45deg);
} .feature-banner__products {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 1.4vw, 20px);
padding: clamp(20px, 2.6vw, 32px);
background-image: url(//www.kaneko-ks.co.jp/dtsf/wp-content/themes/kanekotp/assets/images/bousai_bg.jpg);
background-size: cover;
background-position: center;
background-color: var(--color-main);
}
.feature-banner__product {
display: flex;
flex-direction: column;
gap: 10px;
text-decoration: none;
color: #fff;
transition: transform 0.2s var(--ease-out);
}
.feature-banner__product:hover,
.feature-banner__product:focus-visible {
color: #fff;
transform: translateY(-2px);
}
.feature-banner__product-media {
display: block;
background: #fff;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.5);
}
.feature-banner__product-media img {
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
transition: transform 0.3s var(--ease-out);
}
.feature-banner__product:hover .feature-banner__product-media img { transform: scale(1.04); }
.feature-banner__product-name {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
color: #fff;
text-shadow: 0 1px 4px rgba(7,11,30,0.45);
} .tags {
padding: var(--section-pad-y) 0;
background: var(--color-bg-soft);
} .tag-finder {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
border: 1px solid var(--color-line);
background: #fff;
overflow: hidden;
min-height: 320px;
}
.tag-finder__sidebar {
background: var(--color-main);
color: #fff;
padding: 14px 0;
}
.tag-finder__nav {
list-style: none;
margin: 0;
padding: 0;
}
.tag-finder__btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
background: transparent;
color: #fff;
border: 0;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.02em;
text-align: left;
line-height: 1.45;
cursor: pointer;
transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.tag-finder__btn > span:first-of-type { flex: 1; }
.tag-finder__btn:hover { background: rgba(255,255,255,0.1); }
.tag-finder__btn.is-active {
background: #fff;
color: var(--color-main);
}
.tag-finder__btn:focus-visible { outline-offset: -2px; outline-color: #fff; }
.tag-finder__arrow {
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
opacity: 0.8;
}
.tag-finder__content {
padding: 28px 32px;
}
.tag-finder__panel { display: none; }
.tag-finder__panel.is-active { display: block; }
.tag-finder__panel[hidden] { display: none; }
.tag-finder__panel.is-active[hidden] { display: block; }
.tag-finder__heading,
.tag-finder__sp-heading { display: none;
} .wp-content {
font-family: var(--font-sans-ja);
font-size: 16px;
line-height: 1.9;
color: var(--color-text);
} .wp-content *,
.wp-content table,
.wp-content tr,
.wp-content th,
.wp-content td,
.wp-content blockquote,
.wp-content figcaption,
.wp-content input,
.wp-content button,
.wp-content select,
.wp-content textarea {
font-family: inherit;
} .wp-content h2 {
font-size: clamp(20px, 2.5vw, 24px);
font-weight: 700;
color: var(--color-ink);
margin: 2em 0 0.8em;
padding: 0 0 12px;
border-bottom: 2px solid var(--color-main);
line-height: 1.45;
}
.wp-content h3 {
font-size: clamp(17px, 2vw, 19px);
font-weight: 700;
color: var(--color-ink);
margin: 1.8em 0 0.6em;
padding: 0 0 0 14px;
border-left: 4px solid var(--color-main);
line-height: 1.5;
}
.wp-content h4 {
font-weight: 700;
color: var(--color-main);
margin: 1.4em 0 0.4em;
line-height: 1.5;
}
.wp-content h5 {
font-weight: 700;
color: var(--color-ink);
margin: 1.2em 0 0.3em;
}
.wp-content h6 {
font-weight: 700;
color: var(--color-muted);
margin: 1.2em 0 0.3em;
} .wp-content p { margin: 1em 0; } .wp-content a:not([class]) {
color: var(--color-main);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.wp-content a:not([class]):hover {
color: var(--color-main-dark);
text-decoration-thickness: 2px;
} .wp-content ul,
.wp-content ol {
margin: 1em 0;
padding-left: 1.8em;
}
.wp-content ul { list-style: disc outside; }
.wp-content ol { list-style: decimal outside; }
.wp-content ul ul,
.wp-content ol ol,
.wp-content ul ol,
.wp-content ol ul { margin: 0.3em 0; }
.wp-content li { margin: 0.4em 0; }
.wp-content li::marker { color: var(--color-main); } .wp-content table {
width: 100%;
border-collapse: collapse;
margin: 1.4em 0;
}
.wp-content table th,
.wp-content table td {
padding: 10px 14px;
border: 1px solid var(--color-line);
vertical-align: top;
text-align: left;
}
.wp-content table th {
background: var(--color-bg-band);
font-weight: 700;
color: var(--color-ink);
}
.wp-content table thead th { background: var(--color-main-soft); } .wp-content blockquote {
margin: 1.6em 0;
padding: 16px 20px;
background: var(--color-bg-soft);
border-left: 4px solid var(--color-line-strong);
color: var(--color-text);
font-style: normal;
}
.wp-content blockquote p:first-child { margin-top: 0; }
.wp-content blockquote p:last-child { margin-bottom: 0; }
.wp-content cite {
display: block;
color: var(--color-muted);
margin-top: 8px;
font-style: normal;
} .wp-content code {
background: var(--color-bg-band);
padding: 2px 6px;
font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
font-size: 0.92em;
border-radius: 2px;
}
.wp-content pre {
background: var(--color-ink);
color: #fff;
padding: 16px 18px;
margin: 1.4em 0;
overflow-x: auto;
font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
line-height: 1.6;
}
.wp-content pre code {
background: transparent;
padding: 0;
color: inherit;
} .wp-content hr {
border: 0;
border-top: 1px solid var(--color-line);
margin: 2.2em 0;
} .wp-content img {
max-width: 100%;
height: auto;
display: block;
margin: 1em auto;
}
.wp-content figure {
margin: 1.6em 0;
}
.wp-content figcaption {
color: var(--color-muted);
text-align: center;
margin-top: 6px;
line-height: 1.5;
} :is(.wp-content, .business-richtext) .alignleft   { float: left;  margin: 6px 24px 12px 0; }
:is(.wp-content, .business-richtext) .alignright  { float: right; margin: 6px 0 12px 24px; }
:is(.wp-content, .business-richtext) .aligncenter { display: block; margin-left: auto; margin-right: auto; }
:is(.wp-content, .business-richtext) .alignnone   { margin: 1em 0; }
:is(.wp-content, .business-richtext) .alignwide   { max-width: 100%; } :is(.wp-content, .business-richtext) .gallery {
display: grid;
grid-template-columns: repeat(var(--kaneko-gallery-cols, 3), 1fr);
gap: 10px;
margin: 1.4em 0; align-items: end;
}
:is(.wp-content, .business-richtext) .gallery.gallery-columns-1 { --kaneko-gallery-cols: 1; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-2 { --kaneko-gallery-cols: 2; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-3 { --kaneko-gallery-cols: 3; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-4 { --kaneko-gallery-cols: 4; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-5 { --kaneko-gallery-cols: 5; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-6 { --kaneko-gallery-cols: 6; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-7 { --kaneko-gallery-cols: 7; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-8 { --kaneko-gallery-cols: 8; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-9 { --kaneko-gallery-cols: 9; }
:is(.wp-content, .business-richtext) .gallery-item {
margin: 0 !important;
text-align: center;
width: 100% !important; }
:is(.wp-content, .business-richtext) .gallery-item img {
margin: 0 auto;
width: 100%;
height: auto;
object-fit: cover;
border: 1px solid var(--color-line);
display: block;
}
:is(.wp-content, .business-richtext) .gallery-icon img { border: 1px solid var(--color-line); }
:is(.wp-content, .business-richtext) .gallery-caption {
display: block;
color: var(--color-muted);
margin-top: 6px;
line-height: 1.5;
} :is(.wp-content, .business-richtext) .gallery-item img,
:is(.wp-content, .business-richtext) .gallery-icon img { cursor: default; } @media (max-width: 768px) {
:is(.wp-content, .business-richtext) .gallery { --kaneko-gallery-cols: 2 !important; }
:is(.wp-content, .business-richtext) .gallery.gallery-columns-1 { --kaneko-gallery-cols: 1 !important; }
}  .wp-content .kaneko-layout-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin: 1.6em 0;
align-items: end; }
.wp-content .kaneko-layout-2col__img { margin: 0 0 12px; }
.wp-content .kaneko-layout-2col__img img {
display: block;
width: 100%;
height: auto;
}
.wp-content .kaneko-layout-2col__text > :first-child { margin-top: 0; }
.wp-content .kaneko-layout-2col__text > :last-child  { margin-bottom: 0; } .wp-content .kaneko-layout-imgtext {
display: grid;
grid-template-columns: minmax(0, 38%) 1fr;
gap: 28px;
align-items: start;
margin: 1.6em 0;
}
.wp-content .kaneko-layout-imgtext__img img {
display: block;
width: 100%;
height: auto;
}
.wp-content .kaneko-layout-imgtext__body > :first-child { margin-top: 0; }
.wp-content .kaneko-layout-imgtext__body > :last-child  { margin-bottom: 0; } @media (max-width: 600px) {
.wp-content .kaneko-layout-2col,
.wp-content .kaneko-layout-imgtext {
grid-template-columns: 1fr;
gap: 18px;
}
} .wp-content strong { font-weight: 700; }
.wp-content em { font-style: italic; }
.wp-content mark {
background: linear-gradient(to bottom, transparent 60%, var(--color-main-soft) 60%);
padding: 0 2px;
} .wp-content iframe,
.wp-content embed,
.wp-content video {
max-width: 100%;
margin: 1.4em 0;
} .product-section__content { }
.product-section__content > :first-child { margin-top: 0; }
.product-section__content > :last-child { margin-bottom: 0; }
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
} a.tag {
display: inline-block;
padding: 8px 14px;
font-size: 16px; color: var(--tag-color, var(--color-main));
border: 1px solid var(--tag-color, var(--color-main));
background: #fff;
border-radius: var(--radius-sm);
transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
line-height: 1.4;
}
a.tag:hover,
a.tag:focus-visible {
background: var(--tag-color, var(--color-main));
color: #fff;
} .news {
padding: var(--section-pad-y) 0;
background: #fff;
}
.news-list {
border-top: 1px solid var(--color-line);
}
.news-item {
display: grid;
grid-template-columns: 215px 1fr;
gap: 24px 32px;
padding: 22px 4px;
border-bottom: 1px solid var(--color-line);
}
.news-item__meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.news-item__date {
font-family: var(--font-sans-en);
font-size: 16px;
font-weight: 700;
color: var(--color-ink);
letter-spacing: 0.04em;
}
.news-item__category {
display: inline-block;
font-size: 16px;
letter-spacing: 0.08em;
color: var(--color-main);
border: 1px solid var(--color-main);
padding: 3px 10px;
min-width: 86px;
text-align: center;
line-height: 1.4;
font-weight: 700;
}
.news-item__body {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 16px;
line-height: 1.8;
}
.news-item__body a {
color: var(--color-text);
text-decoration: none;
}
.news-item__body a:hover {
color: var(--color-main);
text-decoration: underline;
}
.news-item__body img {
align-self: flex-start;
border: 1px solid var(--color-line);
} .business {
padding: var(--section-pad-y) 0;
background: var(--color-bg-soft);
}
.business-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.business-card {
border: 1px solid var(--color-line);
background: #fff;
transition: border-color 0.2s var(--ease-out);
}
.business-card:hover { border-color: var(--color-main); }
.business-card__link {
display: flex;
flex-direction: column;
height: 100%;
color: var(--color-text);
}
.business-card__media {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-bg-band);
}
.business-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s var(--ease-out);
}
.business-card:hover .business-card__media img { transform: scale(1.04); }
.business-card__body {
padding: 20px 22px 24px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.business-card__num {
font-family: var(--font-sans-en);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-main);
}
.business-card__title {
font-size: 18px;
font-weight: 700;
color: var(--color-ink);
line-height: 1.4;
padding-bottom: 8px;
margin-bottom: 4px;
position: relative;
}
.business-card__title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 24px;
height: 2px;
background: var(--color-main);
}
.business-card__lead {
font-size: 16px;
line-height: 1.75;
} .recruit {
padding: var(--section-pad-y) 0;
}
.recruit-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
background: var(--color-main);
color: #fff;
text-decoration: none;
overflow: hidden;
transition: filter 0.2s var(--ease-out);
}
.recruit-card:hover { filter: brightness(1.05); }
.recruit-card__media {
position: relative;
min-height: 280px;
overflow: hidden;
background: #0a1430;
}
.recruit-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recruit-card__body {
padding: clamp(28px, 4vw, 56px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
color: #fff;
}
.recruit-card__title {
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.04em;
color: #fff;
}
.recruit-card__lead {
font-size: 16px;
line-height: 1.85;
opacity: 0.92;
}
.recruit-card__lead p + p { margin-top: 0.8em; }
.recruit-card .btn-outline-white { margin-top: 10px; align-self: flex-start; } .site-footer {
background: #fff;
border-top: 1px solid var(--color-line);
padding-top: 0;
position: relative;
} .footer-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px 28px;
padding: 40px 0 32px;
border-bottom: 1px solid var(--color-line);
}
.footer-meta__brand { flex-shrink: 0; }
.footer-meta__brand img { height: 44px; width: auto; display: block; }
.footer-meta__divider {
display: inline-block;
width: 1px;
height: 44px;
background: var(--color-line-strong);
}
.footer-meta__address {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 16px;
line-height: 1.55;
color: var(--color-text);
font-style: normal;
}
.footer-meta__zip {
font-family: var(--font-sans-en);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-ink);
}
.footer-meta__street { font-weight: 500; }
.footer-meta__phone {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.footer-meta__phone-link {
display: inline-flex;
line-height: 1;
}
.footer-meta__phone-img {
display: block;
height: 32px;
width: auto;
transition: opacity 0.2s var(--ease-out);
}
.footer-meta__phone-link:hover .footer-meta__phone-img,
.footer-meta__phone-link:focus-visible .footer-meta__phone-img { opacity: 0.78; }
.footer-meta__phone-hours {
font-size: 16px;
color: var(--color-muted);
margin-top: 6px;
letter-spacing: 0.02em;
white-space: nowrap;
} .footer-mid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) 180px;
gap: 32px;
padding: 40px 0 36px;
border-bottom: 1px solid var(--color-line);
}
.footer-nav {
display: contents;
}
.footer-nav__head {
font-size: 16px;
font-weight: 700;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(--color-main);
}
.footer-nav__head a { color: var(--color-ink); }
.footer-nav__head a:hover { color: var(--color-main); }
.footer-nav__col ul li { margin-bottom: 6px; }
.footer-nav__col ul a {
font-size: 16px;
color: var(--color-text);
}
.footer-nav__col ul a:hover { color: var(--color-main); } .footer-nav__sub {
margin: 6px 0 2px;
padding-left: 12px;
border-left: 1px solid var(--color-line);
}
.footer-nav__col .footer-nav__sub li { margin-bottom: 4px; }
.footer-nav__col .footer-nav__sub a { font-size: 14px; color: var(--color-muted); }
.footer-nav__col .footer-nav__sub a:hover { color: var(--color-main); }
.footer-iso {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.footer-iso img {
display: block;
height: auto;
max-width: 160px;
width: 100%;
}
.footer-iso__text {
font-size: 16px;
line-height: 1.7;
color: var(--color-muted);
} .footer-bottom {
display: flex;
justify-content: center;
padding: 18px 0 8px;
}
.footer-bottom__links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.footer-bottom__links li + li::before {
content: "";
display: inline-block;
width: 1px;
height: 12px;
background: var(--color-line-strong);
margin: 0 14px;
vertical-align: middle;
}
.footer-bottom__links a {
font-size: 16px;
color: var(--color-text);
font-weight: 500;
}
.footer-bottom__links a:hover { color: var(--color-main); }
.footer-copy {
font-family: var(--font-sans-en);
font-size: 16px;
letter-spacing: 0.06em;
color: var(--color-muted);
text-align: center;
padding: 4px 0 32px;
}
.page-top {
position: fixed;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
background: var(--color-main);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
z-index: 80;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
pointer-events: none;
}
.page-top.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.page-top:hover { background: var(--color-main-dark); }
.page-top[hidden] { display: none; } .navigation.pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
}
.navigation.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
font-family: var(--font-sans-en);
font-size: 15px;
font-weight: 600;
color: var(--color-text);
background: #fff;
border: 1px solid var(--color-line);
border-radius: 4px;
text-decoration: none;
transition: color 0.15s var(--ease-out),
background 0.15s var(--ease-out),
border-color 0.15s var(--ease-out);
}
.navigation.pagination a.page-numbers:hover {
color: var(--color-main);
border-color: var(--color-main);
background: rgba(7, 45, 153, 0.04);
}
.navigation.pagination .page-numbers.current {
background: var(--color-main);
border-color: var(--color-main);
color: #fff;
cursor: default;
}
.navigation.pagination .page-numbers.dots {
border: 0;
background: transparent;
color: var(--color-muted);
cursor: default;
min-width: 24px;
padding: 0 4px;
}
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
padding: 0 16px;
letter-spacing: 0.04em;
font-weight: 500;
font-family: var(--font-sans-ja);
}
@media (max-width: 600px) {
.navigation.pagination .nav-links { gap: 4px; }
.navigation.pagination .page-numbers {
min-width: 36px; height: 36px;
padding: 0 10px; font-size: 14px;
}
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next { padding: 0 12px; }
} body.post-type-archive-product .product-grid,
body.tax-product_cat .product-grid,
body.tax-product_tag .product-grid {
display: flex;
flex-direction: column;
gap: 18px;
}
body.post-type-archive-product .product-grid .product-card,
body.tax-product_cat .product-grid .product-card,
body.tax-product_tag .product-grid .product-card {
width: 100%;
}
body.post-type-archive-product .product-grid .product-card__link,
body.tax-product_cat .product-grid .product-card__link,
body.tax-product_tag .product-grid .product-card__link {
flex-direction: row;
align-items: stretch;
}
body.post-type-archive-product .product-grid .product-card__media,
body.tax-product_cat .product-grid .product-card__media,
body.tax-product_tag .product-grid .product-card__media {
flex: 0 0 280px;
aspect-ratio: 4 / 3;
}
body.post-type-archive-product .product-grid .product-card__body,
body.tax-product_cat .product-grid .product-card__body,
body.tax-product_tag .product-grid .product-card__body {
padding: 20px 26px;
justify-content: center;
} @media (max-width: 768px) {
body.post-type-archive-product .product-grid,
body.tax-product_cat .product-grid,
body.tax-product_tag .product-grid {
overflow-x: visible;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
scroll-snap-type: none;
}
body.post-type-archive-product .product-grid > .product-card,
body.tax-product_cat .product-grid > .product-card,
body.tax-product_tag .product-grid > .product-card {
flex: 1 1 auto;
}
} @media (max-width: 600px) {
body.post-type-archive-product .product-grid .product-card__link,
body.tax-product_cat .product-grid .product-card__link,
body.tax-product_tag .product-grid .product-card__link {
flex-direction: column;
}
body.post-type-archive-product .product-grid .product-card__media,
body.tax-product_cat .product-grid .product-card__media,
body.tax-product_tag .product-grid .product-card__media {
flex-basis: auto;
width: 100%;
}
body.post-type-archive-product .product-grid .product-card__body,
body.tax-product_cat .product-grid .product-card__body,
body.tax-product_tag .product-grid .product-card__body {
padding: 18px 20px;
}
} @media (max-width: 1024px) {
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.business-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-mid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-iso { grid-column: 1 / -1; align-items: center; text-align: center; }
.site-header__inner {
height: var(--header-h-sp);
min-height: var(--header-h-sp);
grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr;
align-items: center;
padding-top: 0;
padding-bottom: 0;
padding-right: var(--container-pad);
}
.site-header__brand {
grid-column: 1;
grid-row: 1;
align-self: center;
align-items: center;
padding-bottom: 0;
}
.brand img { height: 28px; }
.brand-tagline { display: none; }
.site-header__utility { display: none; }
.site-header__cta { display: none; }
.site-header__phone { display: none; }
.global-nav__item--cta { display: list-item; }
.nav-toggle {
display: inline-flex;
grid-column: 3;
grid-row: 1;
justify-self: end;
margin-right: calc(var(--container-pad) * -1);
}
.global-nav {
grid-column: 1 / -1;
grid-row: auto;
justify-self: stretch;
position: fixed;
top: var(--header-h-sp);
left: 0;
right: 0;
height: calc(100lvh - var(--header-h-sp));
background: #fff;
transform: translateX(100%);
transition: transform 0.3s var(--ease-out);
overflow-y: auto;
overflow-x: hidden;
padding: 0 0 32px;
border-top: 1px solid var(--color-line);
z-index: 95;
display: flex;
flex-direction: column;
}
body.is-nav-open .global-nav {
transform: translateX(0);
}
body.is-nav-open { overflow: hidden; } .nav-search {
display: flex;
align-items: stretch;
margin: 16px 20px 8px;
border: 1px solid var(--color-line-strong);
height: 44px;
background: #fff;
}
.nav-search input[type="search"] {
flex: 1;
border: 0;
background: transparent;
padding: 0 12px;
font-size: 16px;
color: var(--color-text);
}
.nav-search input[type="search"]::placeholder { color: var(--color-muted); }
.nav-search input[type="search"]:focus { outline: none; }
.nav-search:focus-within {
outline: 2px solid var(--color-main);
outline-offset: 2px;
}
.nav-search__submit {
width: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-main);
color: #fff;
}
.nav-search__submit:hover { background: var(--color-main-dark); }
.global-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.global-nav__item {
border-bottom: 1px solid var(--color-line);
}
.global-nav__link {
width: 100%;
padding: 18px 24px;
justify-content: space-between;
}
.global-nav__link::after { display: none; } .global-nav__chevron {
width: 12px;
height: 12px;
margin-left: 8px;
color: var(--color-muted);
transform: rotate(-90deg);
transition: none;
}
.global-nav__item.is-open > .global-nav__link .global-nav__chevron {
color: var(--color-main);
transform: rotate(-90deg);
} .global-nav__item--lang {
display: block;
border-bottom: 0;
padding: 18px 24px 4px;
}
.lang-switch--nav {
justify-content: center;
}
.lang-switch--nav li + li::before { margin: 0 12px; }
.lang-switch--nav a,
.lang-switch--nav span { padding: 6px 4px; display: inline-block; } .global-nav__item--cta {
border-bottom: 0;
padding: 8px 20px 4px;
margin-top: auto;
}
.global-nav__link--cta {
display: flex;
width: 100%;
margin: 0;
padding: 18px 24px;
justify-content: center;
align-items: center;
letter-spacing: 0.08em;
} .global-nav__item--phone {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 20px 24px;
border-bottom: 0;
}
.global-nav__phone-link {
display: inline-flex;
line-height: 1;
}
.global-nav__phone-img {
display: block;
height: 30px;
width: auto;
}
.global-nav__phone-hours {
font-size: 12px;
color: var(--color-muted);
letter-spacing: 0.02em;
text-align: center;
margin-top: 2px;
} .mega {
position: absolute;
inset: 0;
background: #fff;
box-shadow: none;
border-top: 0;
border-bottom: 0; display: block;
opacity: 1;
transform: translateX(100%);
transition: transform 0.3s var(--ease-out);
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 32px;
z-index: 5;
}
.mega[hidden] {
display: block;
transform: translateX(100%);
visibility: hidden;
}
.global-nav__item.is-open .mega,
.global-nav__item.is-open > .mega {
transform: translateX(0);
visibility: visible;
opacity: 1;
transition: transform 0.3s var(--ease-out);
}
.global-nav__item.is-open .mega[hidden] {
transform: translateX(0);
visibility: visible;
}
.mega__inner {
min-height: 0;
overflow: visible;
}
.mega__back {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 14px 24px;
color: var(--color-main);
font-weight: 700;
background: var(--color-bg-soft);
border-bottom: 1px solid var(--color-line);
text-align: left;
}
.mega__back:hover { background: var(--color-main-soft); }
.mega__title {
display: block;
padding: 18px 24px 6px;
font-size: 17px;
font-weight: 700;
color: var(--color-ink);
border-bottom: 1px solid var(--color-line);
} .mega__layout {
grid-template-columns: 1fr;
padding: 0;
min-height: 0;
} .mega__sidebar {
display: block;
background: #fff;
width: 100%;
padding: 0;
}
.mega__sidebar-head,
.mega__sidebar-head.is-active {
padding: 14px 24px;
background: #fff;
color: var(--color-main);
font-weight: 700;
border-bottom: 1px solid var(--color-line);
margin-bottom: 0;
}
.mega__sidebar-head::before { display: none; }
.mega__sidebar-list { padding: 0; } .mega__sidebar-btn {
background: #fff;
color: var(--color-ink);
padding: 14px 24px;
font-weight: 600;
border-bottom: 1px solid var(--color-line);
border-left: none;
border-right: none;
border-top: none;
}
.mega__sidebar-btn::before { display: none; }
.mega__sidebar-btn.is-active {
background: #fff;
color: var(--color-ink);
}
.mega__sidebar-btn.is-active::before { display: none; } .mega__sidebar-arrow {
transform: rotate(135deg);
transition: transform 0.2s var(--ease-out);
}
.mega__sidebar-btn.is-open .mega__sidebar-arrow {
transform: rotate(-45deg);
} .mega__content { display: none; } .mega__panel { display: none !important; padding: 0; border: none; }
.mega__panel[hidden] { display: none !important; }
.mega__panel.is-open { display: block !important; border-bottom: 1px solid var(--color-line); }
.mega__panel.is-open[hidden] { display: none !important; } .mega__panel-head {
display: block;
padding: 13px 24px;
margin: 0;
border-bottom: 1px solid var(--color-line);
font-weight: 700;
background: var(--color-bg-soft);
width: 100%;
}
.mega__panel-body {
grid-template-columns: 1fr;
padding: 8px 24px 16px;
gap: 16px;
}
.mega__panel-heading { margin-top: 8px; }
.mega__panel-group ul a {
padding: 8px 0 8px 16px;
} .carousel__rail {
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 52px;
background: rgba(255,255,255,0.96);
border-top: 1px solid var(--color-line);
z-index: 6;
padding: 0 20px;
gap: 0;
} .carousel__hud {
position: static;
top: auto;
left: auto;
bottom: auto;
transform: none;
flex-direction: row;
align-items: center;
gap: 14px;
flex: 1;
color: var(--color-ink);
} .carousel__counter {
flex-direction: row;
align-items: center;
gap: 4px;
}
.carousel__counter-current {
font-size: 18px;
line-height: 1;
}
.carousel__counter-sep {
display: inline-block;
width: 1px;
height: 14px;
background: rgba(20,24,31,0.35);
overflow: hidden;
text-indent: -999em;
transform: rotate(20deg);
margin: 0 3px;
align-self: center;
}
.carousel__counter-total {
align-self: center;
} .carousel__indicators {
flex-direction: row;
gap: 7px;
}
.carousel__indicators button {
width: 10px;
height: 10px;
border-radius: 50%;
background: #b6bfce;
}
.carousel__indicators button[aria-selected="true"] {
background: var(--color-main);
width: 14px;
height: 14px;
border-radius: 50%;
} .carousel__nav,
.carousel__buttons {
position: static;
left: auto;
right: auto;
bottom: auto;
width: auto;
height: auto;
background: transparent;
padding: 0;
gap: 2px;
margin-left: auto;
justify-content: flex-end;
align-items: center;
}
.carousel__btn {
color: var(--color-main);
width: 36px;
height: 36px;
}
.carousel__btn:hover { background: var(--color-main-soft); } .carousel__caption {
padding-left: clamp(24px, 3.5vw, 48px);
padding-right: clamp(24px, 5vw, 48px);
bottom: 1.5em;
} .carousel__thumbs {
left: clamp(-40px, -3vw, 0px);
bottom: calc(52px + clamp(20px, 3vw, 32px));
width: clamp(600px, 88vw, 1050px);
}
.carousel__thumbs li {
flex: 0 0 40%;
width: auto;
height: auto;
}
.carousel__thumbs > li + li {
margin-left: -16%;
}
.carousel__cta {
bottom: calc(52px + 14px);
}
.carousel__cta-bg {
bottom: 52px;
}
}
@media (max-width: 768px) {
body { font-size: 16px; } .product-grid,
.business-grid {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 12px; margin-left: calc(var(--container-pad) * -1);
margin-right: calc(var(--container-pad) * -1);
padding-left: var(--container-pad);
padding-right: calc(var(--container-pad) * 0.5);
scroll-padding-left: var(--container-pad);
}
.product-grid::-webkit-scrollbar,
.business-grid::-webkit-scrollbar { display: none; } .product-grid > .product-card {
flex: 0 0 80vw;
scroll-snap-align: start;
}
.business-grid > .business-card {
flex: 0 0 80vw;
scroll-snap-align: start;
} .sp-slider-ui {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 0 4px;
}
.sp-slider-btn {
background: none;
border: none;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-main);
padding: 0;
border-radius: 50%;
transition: background 0.15s;
}
.sp-slider-btn:hover,
.sp-slider-btn:focus-visible { background: var(--color-main-soft); outline: none; }
.sp-slider-dots {
display: flex;
gap: 6px;
align-items: center;
}
.sp-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(20, 24, 31, 0.22);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
.sp-dot.is-active {
background: var(--color-main);
} .tag-finder {
display: block;
border: 0;
background: transparent;
min-height: 0;
overflow: visible;
}
.tag-finder__sidebar { display: none; }
.tag-finder__content {
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
} .tag-finder__panel,
.tag-finder__panel[hidden] {
display: block !important;
background: #fff;
border: 1px solid var(--color-line);
border-radius: 4px;
padding: 0;
margin: 0;
overflow: hidden;
} .tag-finder__sp-heading {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 13px 16px;
font-size: 14px;
font-weight: 700;
color: var(--color-ink);
background: #f6f8fb;
cursor: pointer;
user-select: none;
line-height: 1.4;
transition: background 0.15s, color 0.15s;
}
.tag-finder__sp-heading::after {
content: "+";
display: inline-block;
width: 22px; height: 22px;
line-height: 20px; text-align: center;
font-size: 20px; font-weight: 400;
color: var(--color-main);
border-radius: 50%;
background: #fff;
transition: transform 0.2s, background 0.15s, color 0.15s;
flex-shrink: 0;
margin-left: 12px;
}
.tag-finder__panel.is-sp-open .tag-finder__sp-heading {
background: var(--color-main);
color: #fff;
}
.tag-finder__panel.is-sp-open .tag-finder__sp-heading::after {
content: "−";
background: #fff;
color: var(--color-main);
} .tag-finder__panel .tag-list {
display: none;
margin: 0;
padding: 14px 16px 16px;
gap: 6px 8px;
flex-wrap: wrap;
}
.tag-finder__panel.is-sp-open .tag-list { display: flex; }
.tag-finder__panel .tag {
font-size: 12.5px;
padding: 5px 11px;
} .about__title { font-size: clamp(28px, 7vw, 36px); letter-spacing: 0.04em; margin-bottom: 18px; }
.about__row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.about__body { gap: 18px; }
.about-slider {
min-height: 0;
height: 220px;
margin-left: calc(-1 * var(--container-pad));
margin-right: calc(-1 * var(--container-pad));
}  .business-page__inner { grid-template-columns: minmax(0, 1fr); }
.business-page__aside {
grid-column: 1;
grid-row: 1;
align-self: auto;
margin-bottom: 28px;
}
.business-onestop { grid-column: 1; grid-row: 2; }
.business-slider  { grid-column: 1; grid-row: 3; }
.business-sections { grid-column: 1; grid-row: 4; }
.business-localnav {
top: calc(var(--header-h-sp) + 8px);
padding: 10px 12px;
border-radius: 10px;
}
.business-localnav__label { display: none; }
.business-localnav__list {
grid-auto-flow: column;
justify-content: start;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.business-localnav__list a {
border: 1px solid var(--color-line);
border-radius: 999px;
padding: 6px 14px;
font-size: 13px;
white-space: nowrap;
}
.business-localnav__list a.is-current {
border-color: var(--color-main);
}
.business-section { scroll-margin-top: calc(var(--header-h-sp) + 64px); }
.news-item { grid-template-columns: 1fr; gap: 8px; padding: 18px 4px; }
.news-item__meta { gap: 8px 12px; }
.recruit-card { grid-template-columns: 1fr; }
.recruit-card__media { min-height: 200px; aspect-ratio: 16 / 10; }
.footer-mid {
grid-template-columns: 1fr;
gap: 0;
padding: 24px 0;
}
.footer-nav__col {
border-bottom: 1px solid var(--color-line);
padding: 14px 0;
}
.footer-nav__head { margin-bottom: 8px; padding-bottom: 0; border-bottom: 0; }
.footer-nav__col ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px 16px;
} .footer-nav__col ul > li:has(.footer-nav__sub) { grid-column: 1 / -1; }
.footer-nav__sub { margin-top: 6px; gap: 4px 16px; }
.footer-iso {
grid-column: auto;
align-items: center;
text-align: center;
padding: 20px 0 8px;
margin: auto;
max-width: initial;
}
.footer-iso img { max-width: 200px; } .footer-meta {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 32px 0 24px;
}
.footer-meta__divider { display: none; }
.footer-meta__address { align-items: center; }
.footer-meta__phone {
margin-left: 0;
align-items: center;
}
.footer-meta__phone-img { height: 28px; }
.feature-banner__inner { flex-direction: column; align-items: flex-start; } .feature-banner {
grid-template-columns: 1fr;
}  .carousel__rail {
height: 48px;
padding: 0 16px;
} .carousel__indicators button {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(20,24,31,0.28);
}
.carousel__indicators button[aria-selected="true"] {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-main);
}
.carousel__counter-current { font-size: 16px; }
.carousel__counter-sep {
transform: rotate(20deg);
}
.carousel__counter-total { font-size: 12px; } .carousel__viewport {
height: clamp(520px, calc(100svh - var(--header-h-sp)), 720px);
min-height: 600px;
} .carousel__bg {
background-position: center top; background-image: var(--bg-sp, var(--bg-pc));
}
.carousel__bg::after {
background: linear-gradient(180deg, rgb(25 11 77 / 0%) 0%, rgb(10 21 78 / 0%) 35%, rgb(17 39 93 / 55%) 62%, rgb(29 46 104 / 90%) 100%);
} .carousel__slide::before,
.carousel__slide::after {
display: block;
width: clamp(290px, 88vw, 480px);
top: auto;
bottom: 0;
transform: scaleY(-1);
} .carousel__thumbs {
left: -9%;
right: 0;
width: 118%;
padding: 0; bottom: 140px; gap: 0;
justify-content: center; max-width: none;
} .carousel__thumbs > li {
flex: 0 0 48%; width: auto;
max-width: none;
height: auto;
}
.carousel__thumbs > li + li {
margin-left: -19%; }
.carousel__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}  .carousel__caption {
top: auto;
bottom: 9em;
left: 0;
transform: none;
width: 100%;
max-width: none;
padding: 0 20px;
}
.carousel__headline {
font-size: clamp(30px, 12vw, 50px);
line-height: 1.25;
}
.carousel__headline--long {
font-size: clamp(22px, 7.5vw, 34px);
line-height: 1.3;
}
.carousel__headline--xlong {
font-size: clamp(18px, 5.8vw, 26px);
line-height: 1.35;
}
.carousel__lead {
font-size: clamp(13px, 3.5vw, 16px);
line-height: 1.75;
max-width: none;
} .carousel__cta {
display: block;
right: auto;
left: 0;
right: 0;
bottom: calc(48px + 12px); white-space: nowrap;
width: 96%;
margin: auto;
}
.carousel__cta .hero-cta {
display: flex;
border: 3px solid;
} .carousel__cta-bg {
display: block;
right: 0;
bottom: 48px; width: 50vw; height: 31%; z-index: 2;
}
}
@media (max-width: 480px) {
.news-item__category { min-width: 0; }
}  .breadcrumb {
background: var(--color-bg-soft);
border-bottom: 1px solid var(--color-line);
}
.breadcrumb .container {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.breadcrumb__list {
display: flex;
align-items: center;
gap: 0;
padding: 12px 0;
white-space: nowrap;
line-height: 1.5;
}
.breadcrumb__item {
display: inline-flex;
align-items: center;
color: var(--color-muted);
}
.breadcrumb__item + .breadcrumb__item::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin: 0 12px 0 10px;
border-top: 1px solid var(--color-line-strong);
border-right: 1px solid var(--color-line-strong);
transform: rotate(45deg);
}
.breadcrumb__item a {
color: var(--color-text);
}
.breadcrumb__item a:hover { color: var(--color-main); }
.breadcrumb__item[aria-current="page"] {
color: var(--color-main);
font-weight: 700;
} .product-page {
padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 6vw, 80px);
background: #fff;
}
.product-page__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: clamp(28px, 4vw, 56px);
align-items: start;
} .product-head {
margin-bottom: clamp(20px, 3vw, 32px);
padding-bottom: 20px;
border-bottom: 1px solid var(--color-line);
}
.product-head__model {
font-family: var(--font-sans-en);
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-main);
margin-bottom: 8px;
}
.product-head__title {
font-size: clamp(24px, 3vw, 34px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
letter-spacing: 0.02em;
margin-bottom: 10px;
}
.product-head__tagline {
font-size: clamp(14px, 1.4vw, 17px);
color: var(--color-text);
line-height: 1.7;
} .product-gallery {
margin-bottom: clamp(32px, 4vw, 48px);
}
.product-gallery__stage {
position: relative;
background: var(--color-bg-soft);
border: 1px solid var(--color-line);
overflow: hidden;
}
.product-gallery__viewport {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
background: #0a1430;
}
.product-gallery__slide {
position: absolute;
inset: 0;
padding: 0;
background: #0a1430;
border: 0;
cursor: zoom-in;
display: block;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.product-gallery__slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity 0.3s var(--ease-out), visibility 0s linear 0s;
}
.product-gallery__slide[hidden] {
display: block;
opacity: 0;
visibility: hidden;
}
.product-gallery__slide img,
.product-gallery__slide video {
width: 100%;
height: 100%;
object-fit: contain;
background: #0a1430;
}
.product-gallery__slide[data-type="video"] { cursor: pointer; }
.product-gallery__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 72px;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: none;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.product-gallery__slide.is-playing .product-gallery__play { display: none; }
.product-gallery__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(7,45,153,0.75);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 4;
}
.product-gallery__nav:hover,
.product-gallery__nav:focus-visible { background: var(--color-main); }
.product-gallery__nav--prev { left: 8px; }
.product-gallery__nav--next { right: 8px; }
.product-gallery__hint {
margin: 8px 0 16px;
font-size: 12.5px;
color: var(--color-muted);
text-align: right;
}
.product-gallery__thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px;
}
.product-gallery__thumb {
position: relative;
padding: 0;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--color-bg-soft);
border: 2px solid transparent;
cursor: pointer;
transition: border-color 0.2s var(--ease-out);
}
.product-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.2s var(--ease-out);
}
.product-gallery__thumb:hover img { opacity: 0.85; }
.product-gallery__thumb.is-active {
border-color: var(--color-main);
}
.product-gallery__thumb.is-active::after {
content: "";
position: absolute;
inset: 0;
background: rgba(7,45,153,0.05);
pointer-events: none;
}
.product-gallery__thumb-badge {
position: absolute;
left: 4px;
bottom: 4px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 6px;
background: rgba(7,45,153,0.9);
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1;
pointer-events: none;
}
.product-gallery__thumb-badge svg { display: block; } .product-body {
margin-top: clamp(28px, 4vw, 40px);
}
.product-section {
padding-bottom: clamp(28px, 4vw, 48px);
margin-bottom: clamp(28px, 4vw, 48px);
border-bottom: 1px solid var(--color-line);
}
.product-section:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.product-section__title {
font-size: clamp(18px, 1.9vw, 22px);
font-weight: 700;
line-height: 1.45;
color: var(--color-ink);
letter-spacing: 0.04em;
padding-left: 14px;
position: relative;
margin-bottom: clamp(16px, 2vw, 24px);
}
.product-section__title::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 4px;
background: var(--color-main);
}
.product-subsection__title {
font-weight: 700;
color: var(--color-ink);
margin: 24px 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--color-line);
}
.product-section p {
line-height: 1.95;
color: var(--color-text);
margin-bottom: 1em;
}
.product-section p:last-child { margin-bottom: 0; } .product-feature {
padding: 18px 22px;
background: var(--color-bg-soft);
border-left: 3px solid var(--color-main);
margin-bottom: 12px;
}
.product-feature__title {
font-weight: 700;
color: var(--color-ink);
margin-bottom: 6px;
}
.product-feature__title::before {
content: "■ ";
color: var(--color-main);
margin-right: 2px;
}
.product-feature p {
line-height: 1.85;
margin: 0;
} .product-list {
line-height: 1.9;
color: var(--color-text);
padding-left: 1.4em;
list-style: disc;
}
.product-list--ordered { list-style: decimal; }
.product-list li { margin-bottom: 4px; }
.product-list li::marker { color: var(--color-main); } .product-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--color-line);
margin-bottom: 8px;
}
.product-table {
width: 100%;
border-collapse: collapse;
line-height: 1.65;
background: #fff; border: 1px solid var(--color-line);
}
.product-table th,
.product-table td {
padding: 12px 16px;
text-align: left;
vertical-align: middle;  border: 1px solid var(--color-line);
} .product-table .ta-left   { text-align: left; }
.product-table .ta-center { text-align: center; }
.product-table .ta-right  { text-align: right; } .kaneko-specs-builder { margin-top: 8px; }
.kaneko-specs-builder__toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
padding: 8px 10px;
background: #f6f8fb;
border: 1px solid #d8dde6;
border-radius: 6px 6px 0 0;
margin-bottom: 0;
}
.kaneko-specs-builder__group {
display: inline-flex;
align-items: center;
gap: 3px;
padding-right: 10px;
border-right: 1px solid #d8dde6;
}
.kaneko-specs-builder__group:last-child { border-right: 0; padding-right: 0; }
.kaneko-specs-builder__group-label {
font-size: 10.5px;
font-weight: 700;
color: #5c6779;
letter-spacing: 0.04em;
margin-right: 3px;
}
.kaneko-specs-builder__btn {
background: #fff;
border: 1px solid #c0c6d2;
color: #2a2f3a;
padding: 3px 8px;
font-size: 11.5px;
line-height: 1.4;
min-height: 0;
height: auto;
border-radius: 3px;
cursor: pointer;
font-family: inherit;
}
.kaneko-specs-builder__btn:hover { background: #eef1f6; border-color: #8a93a4; }
.kaneko-specs-builder__btn:active { background: #dee3eb; }
.kaneko-specs-builder__btn code {
background: rgba(0,0,0,.06);
padding: 0 3px;
border-radius: 2px;
font-size: 10.5px;
} .kaneko-specs-builder__btn--icon {
padding: 4px 6px;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #2a2f3a;
}
.kaneko-specs-builder__btn--icon svg { display: block; }
.kaneko-specs-builder__btn--icon:hover { color: #135e96; }
.kaneko-specs-builder__hint {
font-size: 12px;
color: #5c6779;
background: #fff8e1;
border: 1px solid #f0d75c;
border-radius: 4px;
padding: 8px 12px;
margin: 8px 0 0;
}
.kaneko-specs-builder__handle-demo {
display: inline-block;
min-width: 18px;
padding: 0 5px;
background: #e0e3ea;
color: #6a7184;
border-radius: 2px;
font-size: 10px;
font-weight: 700;
text-align: center;
}
.kaneko-specs-builder__table-wrap {
border: 1px solid #d8dde6;
border-top: 0;
background: #fff;
overflow-x: auto;
padding: 12px;
border-radius: 0 0 6px 6px;
}
.kaneko-specs-builder__table {
border-collapse: collapse;
width: 100%;
font-size: 14px;
}
.kaneko-specs-builder__table th,
.kaneko-specs-builder__table td {
border: 1px solid #c9cfd9;
padding: 8px 10px;
vertical-align: middle;
background: #fff;
min-width: 90px;
position: relative;
}
.kaneko-specs-builder__table .kaneko-specs-builder__corner {
background: #e0e3ea;
border-color: #c3c8d3;
min-width: initial;
width: 26px;
padding: 2px;
cursor: default;
}
.kaneko-specs-builder__table .kaneko-specs-builder__row-handle,
.kaneko-specs-builder__table .kaneko-specs-builder__col-handle {
background: #eef0f4;
color: #8a91a0;
font-size: 10.5px;
text-align: center;
cursor: pointer;
user-select: none;
font-weight: 700;
border-color: #c3c8d3;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.04em;
min-width: initial;
vertical-align: middle;
}
.kaneko-specs-builder__table .kaneko-specs-builder__row-handle {
width: 26px;
padding: 2px 4px;
}
.kaneko-specs-builder__table .kaneko-specs-builder__col-handle {
padding: 2px 6px;
height: 22px;
line-height: 1.2;
}
.kaneko-specs-builder__table .kaneko-specs-builder__row-handle:hover,
.kaneko-specs-builder__table .kaneko-specs-builder__col-handle:hover {
background: #d8dde6;
color: #4a5060;
}
.kaneko-specs-builder__table .kaneko-specs-builder__row-handle.is-selected,
.kaneko-specs-builder__table .kaneko-specs-builder__col-handle.is-selected {
background: #c9ced8;
color: #2a2f3a;
}
.kaneko-specs-builder__table .kaneko-specs-builder__cell.ta-left   { text-align: left; }
.kaneko-specs-builder__table .kaneko-specs-builder__cell.ta-center { text-align: center; }
.kaneko-specs-builder__table .kaneko-specs-builder__cell.ta-right  { text-align: right; }
.kaneko-specs-builder__cell--th {
background: #f1f6ff;
color: #0a2960;
font-weight: 700;
}
.kaneko-specs-builder__cell--td { background: #fff; }
.kaneko-specs-builder__cell { min-height: 28px; outline: none; }
.kaneko-specs-builder__cell:focus { box-shadow: inset 0 0 0 2px #80a8ff; }
.kaneko-specs-builder__cell.is-selected {
box-shadow: inset 0 0 0 2px #f7b500;
background: #fff8e1 !important;
}
.kaneko-specs-builder__cell--th.is-selected { background: #ffe9a0 !important; }
.kaneko-specs-builder__cell.is-range {
background: rgba(247, 181, 0, 0.12) !important;
box-shadow: inset 0 0 0 1px rgba(247, 181, 0, 0.6);
}
.kaneko-specs-builder__cell--th.is-range { background: rgba(247, 181, 0, 0.22) !important; }
.kaneko-specs-builder__legend {
display: flex;
gap: 18px;
margin: 10px 0 0;
font-size: 12px;
color: #5c6779;
}
.kaneko-specs-builder__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.kaneko-specs-builder__legend-swatch {
display: inline-block;
width: 14px; height: 14px;
border: 1px solid #c9cfd9;
border-radius: 2px;
}
.kaneko-specs-builder__legend-swatch--th { background: #f1f6ff; }
.kaneko-specs-builder__legend-swatch--td { background: #fff; } .product-table th {
background: var(--color-bg-soft);
color: var(--color-ink);
font-weight: 700;
}
.product-table td { color: var(--color-text); }
.product-note {
font-size: 12.5px;
color: var(--color-muted);
margin-top: 6px !important;
} .product-embed {
position: relative;
aspect-ratio: 16 / 9;
background: #0a1430;
overflow: hidden;
border: 1px solid var(--color-line);
}
.product-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
} .doc-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
list-style: none;
padding: 0;
}
.doc-link {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--color-line);
color: var(--color-text);
text-decoration: none;
transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.doc-link:hover,
.doc-link:focus-visible {
border-color: var(--color-main);
color: var(--color-main);
}
.doc-link__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--color-main-soft);
color: var(--color-main);
}
.doc-link__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.doc-link__title {
font-size: 14.5px;
font-weight: 700;
color: var(--color-ink);
line-height: 1.4;
}
.doc-link:hover .doc-link__title { color: var(--color-main); }
.doc-link__meta {
font-size: 12px;
color: var(--color-muted);
font-family: var(--font-sans-en);
letter-spacing: 0.04em;
}
.ext-icon {
display: inline-block;
margin-left: 4px;
font-family: var(--font-sans-en);
color: var(--color-muted);
} .product-sidebar {
position: sticky;
top: calc(var(--header-h) + 16px);
align-self: start;
}
.product-sidebar__head {
font-weight: 700;
color: var(--color-ink);
padding: 14px 16px;
background: var(--color-main);
color: #fff;
letter-spacing: 0.06em;
}
.local-nav {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid var(--color-line);
border-top: 0;
background: #fff;
}
.local-nav__group + .local-nav__group {
border-top: 1px solid var(--color-line);
}
.local-nav__toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: #fff;
color: var(--color-ink);
font-weight: 700;
text-align: left;
line-height: 1.4;
cursor: pointer;
border: 0;
border-radius: 0;
transition: background-color 0.2s var(--ease-out);
}
.local-nav__toggle:hover {
background: var(--color-bg-soft);
color: var(--color-main);
}
.local-nav__toggle:focus-visible {
outline-offset: -2px;
}
.local-nav__caret {
width: 8px;
height: 8px;
border-top: 2px solid var(--color-muted);
border-right: 2px solid var(--color-muted);
transform: rotate(135deg);
margin-top: -3px;
transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.local-nav__toggle.is-open .local-nav__caret {
transform: rotate(-45deg);
margin-top: 4px;
border-color: var(--color-main);
}
.local-nav__sub {
list-style: none;
margin: 0;
padding: 4px 0 12px;
background: var(--color-bg-soft);
border-top: 1px solid var(--color-line);
}
.local-nav__sub[hidden] { display: none; }
.local-nav__sub li {
margin: 0;
}
.local-nav__sub a {
display: block;
padding: 8px 22px 8px 30px;
line-height: 1.55;
color: var(--color-text);
position: relative;
}
.local-nav__sub a::before {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 6px;
height: 1px;
background: var(--color-line-strong);
}
.local-nav__sub a:hover {
background: #fff;
color: var(--color-main);
}
.local-nav__sub a[aria-current="page"] {
color: var(--color-main);
font-weight: 700;
background: #fff;
}
.local-nav__sub a[aria-current="page"]::before {
background: var(--color-main);
width: 10px;
height: 2px;
}
.product-sidebar__notice {
margin-top: 16px;
padding: 14px 16px;
background: var(--color-bg-soft);
border: 1px solid var(--color-line);
line-height: 1.7;
color: var(--color-muted);
}
.product-sidebar__notice a { font-weight: 700; } .product-cta {
background: var(--color-main);
color: #fff;
padding: clamp(40px, 6vw, 64px) 0;
}
.product-cta__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px 32px;
}
.product-cta__eyebrow {
font-family: var(--font-sans-en);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
opacity: 0.85;
margin-bottom: 8px;
}
.product-cta__title {
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.45;
margin-bottom: 8px;
}
.product-cta__lead {
line-height: 1.85;
opacity: 0.92;
max-width: 640px;
} .product-share {
padding: clamp(32px, 4vw, 56px) 0;
background: var(--color-bg-soft);
}
.product-share__title {
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-ink);
text-align: center;
margin-bottom: 18px;
}
.product-share__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 14px;
list-style: none;
padding: 0;
margin: 0;
}
.product-share__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: #fff;
border: 1px solid var(--color-line);
color: var(--color-ink);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
text-decoration: none;
transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.product-share__btn:hover,
.product-share__btn:focus-visible {
border-color: var(--color-main);
color: var(--color-main);
}
.product-share__btn svg { display: block; flex-shrink: 0; }
.product-share__btn .product-share__icon {
display: block; flex-shrink: 0;
width: 20px; height: 20px;
object-fit: contain;
} .kaneko-editable-spot {
position: relative;
cursor: pointer;
transition: outline-color 0.18s, background 0.18s;
outline: 2px dashed transparent;
outline-offset: 4px;
}
.kaneko-editable-spot:hover {
outline-color: rgba(7, 45, 153, 0.5);
background: rgba(7, 45, 153, 0.03);
}
.kaneko-editable-spot__hint {
position: absolute;
top: -10px; right: -2px;
background: var(--color-main);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 3px;
line-height: 1;
display: none;
align-items: center;
gap: 4px;
pointer-events: none;
z-index: 99996;
white-space: nowrap;
}
.kaneko-editable-spot:hover > .kaneko-editable-spot__hint { display: inline-flex; } section.kaneko-editable-spot > .kaneko-editable-spot__hint {
top: -10px; right: 12px;
} .kaneko-edit-placeholder {
color: #8c8f94;
font-style: italic;
padding: 14px 18px;
background: #f6f7fb;
border: 1px dashed #c3c4c7;
border-radius: 4px;
margin: 0;
} .is-empty-editable {
outline: 2px dashed rgba(7, 45, 153, 0.45);
outline-offset: 4px;
background: rgba(7, 45, 153, 0.025);
position: relative;
min-height: 36px;
padding: 6px 10px;
cursor: pointer;
transition: background 0.15s, outline-color 0.15s;
}
.is-empty-editable:hover {
outline-color: var(--color-main);
background: rgba(7, 45, 153, 0.06);
}
.is-empty-editable::before {
content: "未入力 — クリックで編集";
position: absolute;
top: -10px; left: 12px;
background: var(--color-main);
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: 3px;
pointer-events: none;
white-space: nowrap;
}
.is-empty-editable.is-revealed {
animation: kaneko-empty-reveal 0.4s ease;
} h1.product-head__title.is-empty-editable {
color: rgba(7, 45, 153, 0.55);
font-style: italic;
} .kaneko-content-shortcode-placeholder {
display: block;
background: #fff8e1;
border: 1px dashed #d4a942;
border-radius: 6px;
padding: 14px 16px;
margin: 14px 0;
text-align: center;
color: #6f5414;
font-size: 14px;
line-height: 1.55;
}
.kaneko-content-shortcode-placeholder small {
display: inline-block; margin-top: 4px;
font-size: 12px; opacity: 0.75;
}
@keyframes kaneko-empty-reveal {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
} .kaneko-add-panel {
margin: 36px 0 12px;
padding: 20px 22px;
border: 2px dashed var(--color-main);
background: #f6f8ff;
border-radius: 8px;
}
.kaneko-add-panel__head { margin-bottom: 14px; }
.kaneko-add-panel__title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--color-main);
}
.kaneko-add-panel__lead {
margin: 0;
font-size: 13px;
color: var(--color-muted);
}
.kaneko-add-panel__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.kaneko-add-field-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1.5px solid var(--color-main);
color: var(--color-main);
border-radius: 4px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
font-family: inherit;
}
.kaneko-add-field-btn:hover {
background: var(--color-main);
color: #fff;
}
.kaneko-add-field-btn__plus { font-size: 16px; font-weight: 700; line-height: 1; }
.kaneko-add-field-btn.is-done {
opacity: 0.4;
pointer-events: none;
text-decoration: line-through;
} .kaneko-spot-popup {
position: absolute;
z-index: 99997;
background: #fff;
border: 2px solid var(--color-main);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(7,45,153,0.25);
text-align: left;
cursor: auto;
font-family: var(--font-sans-ja);
font-style: normal;
color: var(--color-text);
width: 460px;
max-width: calc(100vw - 40px);
max-height: 70vh;
display: flex;
flex-direction: column;
}
.kaneko-spot-popup__header {
display: flex; align-items: center; justify-content: space-between;
background: var(--color-main);
color: #fff;
padding: 8px 14px;
border-radius: 4px 4px 0 0;
}
.kaneko-spot-popup__title {
font-size: 13px; font-weight: 700; color: #fff;
}
.kaneko-spot-popup__close {
background: transparent; color: #fff;
border: 0; cursor: pointer;
width: 28px; height: 28px;
font-size: 20px; line-height: 1;
border-radius: 50%;
flex-shrink: 0;
}
.kaneko-spot-popup__close:hover { background: rgba(255,255,255,0.2); }
.kaneko-spot-popup__body {
padding: 14px 16px 16px;
overflow-y: auto;
flex: 1;
}
.kaneko-spot-popup__label {
display: block;
font-size: 12px; font-weight: 700;
color: #1d2327;
margin: 0 0 6px;
}
.kaneko-spot-popup__input {
width: 100%;
padding: 8px 10px;
font-size: 14px;
border: 1px solid #c3c4c7;
border-radius: 3px;
font-family: inherit;
font-style: normal;
color: var(--color-text);
background: #fff;
}
.kaneko-spot-popup__input:focus { outline: 2px solid var(--color-main); outline-offset: 1px; } .kaneko-edit-bar__hint {
display: inline-flex; align-items: center;
margin-left: 12px;
padding: 4px 10px;
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.9);
border-radius: 3px;
font-size: 11px;
line-height: 1.3;
} body.kaneko-has-edit-bar { padding-top: 56px; }
body.kaneko-has-edit-bar.admin-bar { padding-top: 88px; } body.kaneko-has-edit-bar .site-header { top: 56px; } .kaneko-edit-bar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 99998;
background: #1d2327;
color: #fff;
font-family: var(--font-sans-ja);
font-size: 13px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body.admin-bar .kaneko-edit-bar { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .kaneko-edit-bar { top: 46px; }
}
.kaneko-edit-bar__inner {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px;
min-height: 56px;
flex-wrap: wrap;
}
.kaneko-edit-bar__brand {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 700; color: #fff;
padding-right: 12px;
border-right: 1px solid rgba(255,255,255,0.15);
}
.kaneko-edit-bar__type {
font-size: 11px; font-weight: 400;
background: rgba(255,255,255,0.15);
padding: 2px 8px; border-radius: 2px;
}
.kaneko-edit-bar__actions {
display: flex; gap: 4px; flex-wrap: wrap;
flex: 1;
}
.kaneko-edit-bar__right {
display: flex; align-items: center; gap: 8px;
}
.kaneko-edit-bar__status {
background: rgba(255,255,255,0.12);
padding: 4px 10px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
}
.kaneko-edit-bar__status[data-status="publish"] { background: #2e7d3a; }
.kaneko-edit-bar__status[data-status="draft"]   { background: #b8860b; }
.kaneko-edit-bar__status[data-status="future"]  { background: #2271b1; }
.kaneko-edit-bar__btn {
display: inline-flex; align-items: center; gap: 5px;
background: transparent; color: #fff;
border: 1px solid rgba(255,255,255,0.3);
padding: 6px 12px;
font-size: 12px; font-weight: 600;
border-radius: 3px;
cursor: pointer;
font-family: inherit;
transition: background 0.15s, border-color 0.15s;
line-height: 1;
}
.kaneko-edit-bar__btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }
.kaneko-edit-bar__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kaneko-edit-bar__btn--action.is-open {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.5);
}
.kaneko-edit-bar__btn--primary {
background: #2271b1; border-color: #2271b1;
}
.kaneko-edit-bar__btn--primary:hover { background: #135e96; border-color: #135e96; }
.kaneko-edit-bar__btn--ghost {
background: transparent;
}
.kaneko-edit-bar__btn--exit {
background: transparent; border: 1px solid rgba(255,255,255,0.3);
width: 30px; height: 30px; padding: 0;
font-size: 18px; line-height: 1;
justify-content: center;
}
.kaneko-edit-bar__btn--exit:hover { background: rgba(255,0,0,0.4); border-color: rgba(255,0,0,0.6); } .kaneko-edit-bar__panels { position: relative; }
.kaneko-edit-popup {
position: absolute;
top: 0; left: 14px;
margin-top: 0;
background: #fff; color: #1d2327;
padding: 16px 18px;
border-radius: 0 0 6px 6px;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
min-width: 320px;
max-width: 460px;
border: 1px solid #c3c4c7;
border-top: 0;
}
.kaneko-edit-popup__label {
display: block;
font-size: 12px; font-weight: 700;
margin: 0 0 6px; color: #50575e;
}
.kaneko-edit-popup__input {
width: 100%;
padding: 8px 10px;
font-size: 14px;
border: 1px solid #c3c4c7;
border-radius: 3px;
font-family: inherit;
}
.kaneko-edit-popup__input:focus { outline: 2px solid #2271b1; outline-offset: 1px; }
.kaneko-edit-popup__hint {
font-size: 11px; color: #646970;
margin: 8px 0 0;
}
.kaneko-edit-popup__list {
list-style: none;
padding: 0; margin: 0;
max-height: 280px; overflow-y: auto;
border: 1px solid #e2e4e7;
border-radius: 3px;
background: #fafbfc;
}
.kaneko-edit-popup__list li {
padding: 6px 12px;
border-bottom: 1px solid #f0f2f4;
font-size: 13px;
}
.kaneko-edit-popup__list li:last-child { border-bottom: 0; }
.kaneko-edit-popup__list li:hover { background: #fff; }
.kaneko-edit-popup__list label {
display: flex; align-items: center; gap: 8px;
cursor: pointer;
} .kaneko-edit-popup--list { min-width: 420px; max-width: 540px; }
.kaneko-meta-list {
list-style: none; padding: 0; margin: 8px 0 12px;
max-height: 360px; overflow-y: auto;
}
.kaneko-meta-list li {
background: #fafbfd;
border: 1px solid #e2e4e7;
border-radius: 4px;
padding: 10px 12px;
margin-bottom: 8px;
position: relative;
}
.kaneko-meta-list__label {
display: block;
font-size: 11px; font-weight: 600; color: #50575e;
margin: 6px 0 3px;
}
.kaneko-meta-list__label:first-child { margin-top: 0; }
.kaneko-meta-list li input[type="text"],
.kaneko-meta-list li textarea {
width: 100%;
padding: 6px 8px;
font-size: 13px;
border: 1px solid #c3c4c7;
border-radius: 3px;
font-family: inherit;
}
.kaneko-meta-list-remove {
position: absolute;
top: 6px; right: 6px;
background: #fff; color: #d63638;
border: 1px solid #d63638;
border-radius: 3px;
padding: 2px 8px;
font-size: 11px; cursor: pointer;
}
.kaneko-meta-list-remove:hover { background: #d63638; color: #fff; }
.kaneko-meta-add-btn {
display: inline-flex; align-items: center;
padding: 6px 14px;
background: #2271b1; color: #fff;
border: 0; border-radius: 3px;
font-size: 12px; font-weight: 600;
cursor: pointer;
}
.kaneko-meta-add-btn:hover { background: #135e96; } .kaneko-spot-popup__note {
font-size: 11px;
color: #646970;
margin: 10px 0 0;
padding: 8px 10px;
background: #fafbfd;
border-left: 3px solid #2271b1;
border-radius: 0 3px 3px 0;
} .kaneko-spot-popup .kaneko-gallery-thumbs {
list-style: none;
padding: 0; margin: 8px 0 12px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 8px;
max-height: 320px;
overflow-y: auto;
}
.kaneko-gthumb {
position: relative;
cursor: grab;
border: 2px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #f0f3f9;
aspect-ratio: 4 / 3;
}
.kaneko-gthumb:hover { border-color: #2271b1; }
.kaneko-gthumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.kaneko-gthumb-yt {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 28px; height: 28px;
background: rgba(255, 0, 0, 0.85);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
pointer-events: none;
}
.kaneko-gthumb-remove {
position: absolute;
top: 2px; right: 2px;
width: 22px; height: 22px;
background: rgba(214,54,56,0.95);
color: #fff;
border: 0;
border-radius: 50%;
font-size: 14px; line-height: 18px;
cursor: pointer;
padding: 0;
z-index: 2;
}
.kaneko-gthumb-remove:hover { background: #d63638; } .kaneko-related-edit-list {
list-style: none;
padding: 0; margin: 8px 0 12px;
}
.kaneko-related-edit-item {
background: #fafbfd;
border: 1px solid #e2e4e7;
border-radius: 4px;
padding: 10px 12px;
margin-bottom: 10px;
position: relative;
}
.kaneko-related-edit-item select,
.kaneko-related-edit-item input {
width: 100%;
padding: 6px 8px;
font-size: 13px;
border: 1px solid #c3c4c7;
border-radius: 3px;
font-family: inherit;
}
.kaneko-related-edit-item .kaneko-related-internal,
.kaneko-related-edit-item .kaneko-related-external {
margin-top: 6px;
padding: 8px;
background: #fff;
border-radius: 3px;
}
.kaneko-related-edit-item .kaneko-meta-list-remove {
position: absolute;
top: 6px; right: 6px;
} .kaneko-meta-mediapick .button {
background: #2271b1 !important;
color: #fff !important;
border: 0 !important;
padding: 0 12px !important;
cursor: pointer;
}
.kaneko-meta-mediapick .button:hover { background: #135e96 !important; }  .kaneko-inline-editable {
position: relative;
outline: 1px dashed transparent;
outline-offset: 6px;
transition: outline-color 0.2s;
}
.kaneko-inline-editable:hover {
outline-color: rgba(7, 45, 153, 0.4);
} .kaneko-inline-edit-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
margin: 0 0 14px;
background: var(--color-main);
color: #fff;
border: 0;
border-radius: 4px;
font-family: var(--font-sans-ja);
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: background 0.15s, transform 0.15s;
line-height: 1;
}
.kaneko-inline-edit-trigger:hover,
.kaneko-inline-edit-trigger:focus {
background: var(--color-main-dark);
transform: translateY(-1px);
}
.kaneko-inline-edit-trigger__icon {
display: inline-flex; align-items: center; justify-content: center;
} .kaneko-modal-editor { position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.kaneko-modal-editor.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.kaneko-modal-editor__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 24, 40, 0.55);
backdrop-filter: blur(2px);
}
.kaneko-modal-editor__panel {
position: relative;
z-index: 1;
background: #fff;
border-radius: 8px;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
width: min(1100px, 92vw);
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.kaneko-modal-editor__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
background: var(--color-main);
color: #fff;
flex: 0 0 auto;
}
.kaneko-modal-editor__title {
margin: 0;
font-size: 15px;
font-weight: 700;
}
.kaneko-modal-editor__close {
background: transparent;
border: 0;
color: #fff;
font-size: 24px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
.kaneko-modal-editor__body {
flex: 1 1 auto;
overflow: auto;
padding: 14px 18px;
background: #f6f7fb;
}
.kaneko-modal-editor__body .wp-editor-wrap { background: #fff; }
.kaneko-modal-editor__foot {
display: flex;
gap: 8px;
justify-content: flex-end;
padding: 12px 18px;
background: #fff;
border-top: 1px solid var(--color-line);
flex: 0 0 auto;
}
body.kaneko-modal-open { overflow: hidden; } .kaneko-modal-editor--specs .kaneko-modal-editor__panel {
width: min(1280px, 96vw);
}
.kaneko-modal-editor--specs .kaneko-modal-editor__body {
padding: 16px 20px;
} .kaneko-inline-editor-box {
margin: 0 0 18px;
padding: 0;
border: 2px solid var(--color-main);
border-radius: 6px;
background: #fff;
box-shadow: 0 4px 14px rgba(7, 45, 153, 0.12);
overflow: hidden;
}
.kaneko-inline-editor-box__head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
background: var(--color-main);
color: #fff;
padding: 8px 14px;
font-size: 13px;
}
.kaneko-inline-editor-box__title { font-weight: 700; }
.kaneko-inline-editor-box__status { font-size: 12px; opacity: 0.9; }
.kaneko-inline-editor-box .wp-editor-wrap { margin: 0; }
.kaneko-inline-editor-box .wp-editor-container { border-radius: 0; }
.kaneko-inline-editor-box .mce-toolbar-grp,
.kaneko-inline-editor-box .quicktags-toolbar { border-top: 0; }
.kaneko-inline-editor-box__actions {
display: flex; gap: 8px; justify-content: flex-end;
padding: 12px 14px;
background: #f6f7fb;
border-top: 1px solid var(--color-line);
}
.kaneko-inline-editor-btn {
padding: 8px 22px;
font-size: 14px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
font-family: var(--font-sans-ja);
line-height: 1;
border: 0;
}
.kaneko-inline-editor-btn--save {
background: var(--color-main);
color: #fff;
}
.kaneko-inline-editor-btn--save:hover { background: var(--color-main-dark); }
.kaneko-inline-editor-btn--save:disabled { opacity: 0.6; cursor: not-allowed; }
.kaneko-inline-editor-btn--cancel {
background: #fff;
color: var(--color-text);
border: 1px solid var(--color-line-strong);
}
.kaneko-inline-editor-btn--cancel:hover { background: #f0f3f9; } .kaneko-inline-edit-toast {
position: fixed;
bottom: 24px; right: 24px;
z-index: 99999;
padding: 12px 22px;
background: var(--color-main);
color: #fff;
border-radius: 4px;
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
font-size: 14px;
font-weight: 600;
display: none;
font-family: var(--font-sans-ja);
}
.kaneko-inline-edit-toast.is-error { background: #d63638; }
.product-share__btn--copy.is-copied {
background: var(--color-main);
color: #fff;
border-color: var(--color-main);
}
.product-share__feedback {
text-align: center;
font-size: 12.5px;
color: var(--color-muted);
margin-top: 12px;
min-height: 1em;
} .lightbox {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(7,11,30,0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 40px clamp(48px, 8vw, 96px);
}
.lightbox[hidden] { display: none; }
.lightbox__inner {
width: 100%;
max-width: 1200px;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.lightbox__media {
position: relative;
width: 100%;
max-height: calc(100vh - 140px);
display: flex;
align-items: center;
justify-content: center;
}
.lightbox__media img,
.lightbox__media video {
max-width: 100%;
max-height: calc(100vh - 140px);
object-fit: contain;
display: block;
background: #0a1430;
}
.lightbox__youtube {
width: min(1200px, 100%, calc((100vh - 140px) * 16 / 9));
aspect-ratio: 16 / 9;
background: #000;
}
.lightbox__youtube iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.lightbox__caption {
text-align: center;
color: #fff;
font-size: 13px;
letter-spacing: 0.06em;
opacity: 0.85;
}
.lightbox__close,
.lightbox__nav {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: rgba(255,255,255,0.08);
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
z-index: 2;
cursor: pointer;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; } @media (max-width: 1024px) {
.product-page__inner {
grid-template-columns: minmax(0, 1fr) 240px;
gap: 24px;
} }
@media (max-width: 768px) {
.product-page__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.product-sidebar {
position: static;
order: 2; }
.product-main { order: 1; }
.product-gallery__viewport { aspect-ratio: 4 / 3; }
.product-gallery__nav { width: 40px; height: 40px; }
.product-cta__inner { flex-direction: column; align-items: flex-start; }
.lightbox { padding: 16px; }
.lightbox__close { top: 8px; right: 8px; }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.carousel__slide { transition: opacity 0.2s linear; }
} .product-table.border-thick,
.product-table.border-thick th,
.product-table.border-thick td {
border-width: 2px;
}
.product-table.border-extra-thick,
.product-table.border-extra-thick th,
.product-table.border-extra-thick td {
border-width: 4px;
}  .kaneko-specs-builder__btn.is-active {
background: #0073aa;
border-color: #006291;
color: #fff;
font-weight: 700;
}
.kaneko-specs-builder__btn.is-active:hover {
background: #005c8a;
} .kaneko-specs-builder__btn--color {
padding: 2px 4px;
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.kaneko-specs-builder__btn--color input[type="color"] {
display: block;
border-radius: 2px;
border: 1px solid rgba(0,0,0,0.18) !important;
cursor: pointer;
flex-shrink: 0;
} .kaneko-specs-builder__table .kaneko-specs-builder__col-handle {
position: relative;
overflow: visible;
} .kaneko-specs-builder__col-resize {
position: absolute;
top: 0;
right: -3px;
width: 6px;
height: 100%;
cursor: col-resize;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.kaneko-specs-builder__col-resize::after {
content: '';
display: block;
width: 2px;
height: 70%;
background: #a0a8b8;
border-radius: 1px;
transition: background 0.15s;
}
.kaneko-specs-builder__col-resize:hover::after,
.kaneko-specs-builder__col-resize.is-dragging::after {
background: #0073aa;
height: 90%;
} body.kaneko-col-resizing,
body.kaneko-col-resizing * {
cursor: col-resize !important;
user-select: none !important;
} .kaneko-specs-builder__table.border-thick th,
.kaneko-specs-builder__table.border-thick td {
border-width: 2px;
}
.kaneko-specs-builder__table.border-extra-thick th,
.kaneko-specs-builder__table.border-extra-thick td {
border-width: 4px;
} @media print {
.site-header, .page-top, .carousel__controls, .carousel__nav, .carousel__thumbs, .carousel__cta, .carousel__cta-bg, .carousel__indicators, .nav-toggle { display: none !important; }
.carousel__slide { position: relative; opacity: 1; visibility: visible; }
a { color: inherit; text-decoration: underline; }
} .contact-page {
padding-top: 48px;
padding-bottom: 80px;
} .contact-steps {
list-style: none;
display: flex;
gap: 3px; padding: 0;
margin: 0 0 36px;
}
.contact-steps__item {
position: relative;
flex: 1;
text-align: center;
padding: 14px 8px;
background: #e2e6ec;
color: #5c6779;
font-weight: 700;
font-size: 15px;
line-height: 1.4;
} .contact-steps__item:not(:last-child)::after {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 14px;
height: 100%;
background: inherit;
clip-path: polygon(0 0, 100% 50%, 0 100%);
z-index: 2;
pointer-events: none;
}
.contact-steps__item.is-active {
background: var(--color-main);
color: #fff;
} .contact-steps__item + .contact-steps__item {
padding-left: 25px;
clip-path: polygon(
0 0,
calc(100% + 14px) 0,
calc(100% + 14px) 100%,
0 100%,
14px 50%
);
} .contact-intro-lead {
margin: 0 0 36px;
line-height: 2;
}
.contact-intro-lead a { color: var(--color-main); text-decoration: underline; } .contact-intro { margin-bottom: 44px; } .kcf-step-label {
margin: 0 0 2px;
color: var(--color-main);
font-family: var(--font-sans-en);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.1em;
}
.kcf-step-title {
margin: 0 0 28px;
padding-bottom: 12px;
font-size: 22px;
border-bottom: 2px solid var(--color-main);
}
.kcf-field { margin-bottom: 28px; }
.kcf-label {
display: block;
font-weight: 700;
font-size: 15px;
margin-bottom: 8px;
}
.kcf-req {
display: inline-block;
background: #d63638;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: 4px 8px;
border-radius: 2px;
margin-left: 10px;
vertical-align: 2px;
}
.kcf .wpcf7-form-control-wrap { display: block; }
.kcf input[type="text"],
.kcf input[type="email"],
.kcf input[type="tel"],
.kcf select,
.kcf textarea {
width: 100%;
padding: 12px 14px;
font-size: 16px;
font-family: inherit;
border: 1px solid #c8cdd6;
border-radius: 4px;
background: #fff;
color: var(--color-text);
}
.kcf select { cursor: pointer; }
.kcf input:focus,
.kcf select:focus,
.kcf textarea:focus {
outline: none;
border-color: var(--color-main);
box-shadow: 0 0 0 2px rgba(7, 45, 153, 0.12);
} .kcf textarea {
resize: none;
overflow: hidden;
min-height: 150px;
line-height: 1.8;
} .kcf-radios .wpcf7-radio {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.kcf-radios .wpcf7-list-item {
display: block;
margin: 0;
}
.kcf-radios .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
height: 100%;
padding: 13px 12px;
border: 1px solid #c8cdd6;
border-radius: 4px;
background: #fff;
cursor: pointer;
font-size: 15px;
line-height: 1.4;
transition: border-color 0.15s var(--ease-out),
background-color 0.15s var(--ease-out),
box-shadow 0.15s var(--ease-out);
}
.kcf-radios .wpcf7-list-item label:hover { border-color: var(--color-main); } .kcf-radios .wpcf7-list-item.is-selected label {
border-color: var(--color-main);
background: var(--color-main);
color: #fff;
}
.kcf-radios input[type="radio"] {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: var(--color-main);
}
.kcf-radios .wpcf7-list-item.is-selected input[type="radio"] {
accent-color: #fff;
}
@media (min-width: 768px) {
.kcf-radios .wpcf7-radio { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kcf-help {
margin: 6px 0 0;
font-size: 13px;
color: var(--color-muted);
} .kcf-address {
border: 1px solid var(--color-line);
border-radius: 6px;
padding: 20px 22px 10px;
margin: 0 0 28px;
}
.kcf-address legend {
padding: 0 8px;
margin-left: -8px;
}
.kcf-subfield { margin-bottom: 16px; }
.kcf-subfield--zip input { max-width: 220px; }
.kcf-sublabel {
display: block;
font-size: 13px;
font-weight: 700;
margin-bottom: 6px;
} .kcf-subfield--zip .wpcf7-form-control-wrap {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.kcf-subfield--zip .wpcf7-form-control-wrap::before {
content: "〒";
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
} .kcf-subfield--zip .wpcf7-form-control-wrap input {
flex: 1 1 0;
width: auto;
min-width: 0;
}
.kcf-subfield--zip .wpcf7-not-valid-tip { flex-basis: 100%; } .kcf-address-row {
display: flex;
gap: 0 14px;
flex-wrap: wrap;
}
.kcf-address-row .kcf-subfield--zip  { flex: 0 0 128px; }
.kcf-address-row .kcf-subfield--pref { flex: 1 1 0; min-width: 0; } @media (min-width: 768px) { .kcf-field--inline {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: 0 24px;
align-items: center;
}
.kcf-field--inline > .kcf-label { margin-bottom: 0; } .kcf-address {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
}
.kcf-address .kcf-address-row { grid-column: 1 / -1; }
.kcf-address-row { gap: 0 18px; } .kcf-address-row .kcf-subfield--zip  { flex-basis: 150px; }
.kcf-address-row .kcf-subfield--pref { flex: 0 0 280px; }
.kcf-subfield--zip input { max-width: none; }
} .kcf-nav {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 34px;
flex-wrap: wrap;
}
.kcf-btn {
display: inline-block;
padding: 15px 36px;
font-size: 16px;
font-weight: 700;
font-family: inherit;
border-radius: 4px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
line-height: 1.4;
transition: opacity 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.kcf-btn--primary {
background: var(--color-main);
color: #fff;
}
.kcf-btn--primary:hover:not(:disabled) { opacity: 0.85; }
.kcf-btn--primary:disabled {
background: #aab1bd;
cursor: not-allowed;
}
.kcf-btn--ghost {
background: #fff;
color: var(--color-text);
border-color: #c8cdd6;
}
.kcf-btn--ghost:hover { background: #f2f4f8; } .kcf-email-wrap { position: relative; }
.kcf-email-suggest {
position: absolute;
z-index: 50;
left: 0;
right: 0;
top: 100%;
margin: 4px 0 0;
padding: 0;
list-style: none;
background: #fff;
border: 1px solid #c8cdd6;
border-radius: 4px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
max-height: 240px;
overflow-y: auto;
}
.kcf-email-suggest li {
padding: 10px 14px;
cursor: pointer;
font-size: 15px;
border-bottom: 1px solid #f0f2f5;
}
.kcf-email-suggest li:last-child { border-bottom: 0; }
.kcf-email-suggest li:hover,
.kcf-email-suggest li.is-focus { background: #eef4fb; } .kcf-confirm-lead { margin: 0 0 20px; }
.kcf-confirm {
margin: 0 0 32px;
border-top: 1px solid var(--color-line);
}
.kcf-confirm dt {
padding: 16px 10px 4px;
font-weight: 700;
font-size: 14px;
color: var(--color-muted);
}
.kcf-confirm dd {
margin: 0;
padding: 0 10px 16px;
border-bottom: 1px solid var(--color-line);
white-space: pre-wrap;
word-break: break-word;
font-size: 16px;
line-height: 1.8;
}
.kcf-agree {
background: var(--color-bg-soft);
text-align: center;
padding: 24px 20px;
border-radius: 6px;
}
.kcf-agree p { margin: 0 0 10px; }
.kcf-agree p:last-child { margin: 0; }
.kcf-agree-link a {
color: var(--color-main);
text-decoration: underline;
font-weight: 700;
}
.kcf-agree-note {
font-size: 13px;
color: var(--color-muted);
} .wpcf7 form .wpcf7-response-output {
margin: 24px 0 0;
padding: 12px 16px;
border-radius: 4px;
}
.wpcf7-not-valid-tip {
margin-top: 6px;
font-size: 13px;
} .contact-form-missing {
background: #fff8e5;
border-left: 4px solid #f0b849;
padding: 16px 20px;
border-radius: 0 4px 4px 0;
} .contact-notes {
margin-top: 56px;
background: var(--color-bg-soft);
padding: 24px 28px;
border-radius: 6px;
font-size: 14px;
}
.contact-notes__title { font-size: 15px; margin: 0 0 12px; }
.contact-notes__list {
margin: 0;
padding-left: 1.4em;
line-height: 1.9;
}
.contact-notes__list ul {
padding-left: 1.4em;
margin: 4px 0;
list-style: disc;
} .thanks-title {
font-size: 24px;
margin: 0 0 20px;
}
.thanks-lead {
line-height: 2;
margin: 0 0 32px;
}
.thanks-check {
border: 1px solid var(--color-line);
border-radius: 6px;
padding: 22px 26px;
margin-bottom: 24px;
}
.thanks-check__title { font-size: 16px; margin: 0 0 12px; }
.thanks-check__list {
margin: 0;
padding-left: 1.4em;
line-height: 1.9;
}
.thanks-check__list li { margin-bottom: 10px; }
.thanks-domain { color: var(--color-main); }
.thanks-note {
font-size: 14px;
color: var(--color-muted);
line-height: 1.9;
margin: 0 0 36px;
}
.thanks-back { text-align: center; } @media (max-width: 640px) {
.contact-steps__item { flex: 1 1 auto;
font-size: 12px;
padding: 10px 8px;
white-space: nowrap;
}
.contact-steps { gap: 2px; }
.contact-steps__item:not(:last-child)::after { width: 10px; }
.contact-steps__item + .contact-steps__item {
padding-left: 18px;
clip-path: polygon(
0 0,
calc(100% + 10px) 0,
calc(100% + 10px) 100%,
0 100%,
10px 50%
);
}
.kcf-nav { flex-direction: column-reverse; }
.kcf-nav .kcf-btn { width: 100%; text-align: center; }
.kcf-address { padding: 16px 14px 6px; }
} .page-hero-band {
position: relative;
background: linear-gradient(115deg, #0e3ba9 0%, var(--color-main) 60%, #062578 100%);
color: #fff;
overflow: hidden;
} .page-hero-band::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.page-hero-band .container {
position: relative;
padding-top: 40px;
padding-bottom: 38px;
text-align: left;
}
.page-hero-band__eyebrow {
margin: 0 0 6px;
font-family: var(--font-sans-en);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.page-hero-band__title {
margin: 0;
font-size: clamp(24px, 3vw, 30px);
font-weight: 700;
line-height: 1.4;
color: #fff;
}
.page-hero-band__lead {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 640px) {
.page-hero-band .container {
padding-top: 28px;
padding-bottom: 26px;
}
}  .container.sub {
padding-top: 48px;
padding-bottom: 80px;
} .news-cat-nav { margin-bottom: 40px; }
.news-pagination {
margin-top: 48px;
text-align: center;
} .breadcrumb-bar {
background: var(--color-bg-soft);
padding: 12px 0;
font-size: 13px;
border-bottom: 1px solid var(--color-line);
}
.breadcrumb-bar .container { color: var(--color-muted); }
.breadcrumb-bar__sep { margin: 0 6px; }
.breadcrumb-bar__current { color: var(--color-text); } .contact-tel-row {
display: flex;
align-items: center;
gap: 16px 28px;
flex-wrap: wrap;
border: 1px solid var(--color-line);
border-radius: 6px;
padding: 20px;
}
.contact-tel-row__text {
margin: 0;
line-height: 2;
}
.contact-tel-row .hero-cta { width: 100%; } .hero-cta--invert {
background: var(--color-main);
color: #fff;
border: 1px solid var(--color-main);
text-decoration: none;
}
.hero-cta--invert:hover,
.hero-cta--invert:focus-visible {
background: #fff;
color: var(--color-main);
text-decoration: none;
} @media (min-width: 1200px) {
.contact-page {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.contact-page .contact-steps { width: 100%; }
.contact-page .contact-intro-lead { width: 100%; }
.contact-page .contact-intro {
width: 320px;
margin-bottom: 0;
}
.contact-page .contact-form-area { width: calc(96% - 320px); }
.contact-page .contact-notes { width: 100%; }
} .news-page {
padding: 48px 0 80px;
background: #fff;
}
.news-page__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: clamp(28px, 4vw, 56px);
align-items: start;
} .news-entry-header {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-line);
}
.news-entry-header__meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.news-entry-header__title {
margin: 0;
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
}
.news-entry-thumb { margin: 0 0 32px; }
.news-entry-thumb img {
width: 100%;
height: auto;
display: block;
} .product-share--inpage {
margin-top: 56px;
padding: 32px 20px;
border-radius: 6px;
} .news-related { margin-top: 48px; }
.news-related__title {
margin: 0 0 20px;
padding-bottom: 10px;
font-size: 20px;
border-bottom: 2px solid var(--color-main);
}
.news-related__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.news-related__item a {
display: block;
height: 100%;
padding: 14px 16px;
border: 1px solid var(--color-line);
border-radius: 6px;
text-decoration: none;
color: var(--color-text);
transition: border-color 0.15s var(--ease-out);
}
.news-related__item a:hover { border-color: var(--color-main); }
.news-related__date {
font-family: var(--font-sans-en);
font-size: 13px;
font-weight: 700;
color: var(--color-muted);
}
.news-related__name {
margin: 4px 0 0;
font-size: 14px;
font-weight: 600;
line-height: 1.6;
}
.news-related__item a:hover .news-related__name {
color: var(--color-main);
text-decoration: underline;
} .post-navigation {
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid var(--color-line);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.post-navigation__next { text-align: right; }
.post-navigation a {
display: block;
text-decoration: none;
}
.post-navigation__label {
font-size: 12px;
color: var(--color-muted);
}
.post-navigation__title {
display: block;
margin-top: 4px;
font-size: 14px;
color: var(--color-main);
}
.news-back-link {
margin-top: 48px;
text-align: center;
} .news-sidebar {
display: flex;
flex-direction: column;
gap: 36px;
}
.news-widget__title {
margin: 0 0 14px;
padding-bottom: 8px;
font-size: 16px;
border-bottom: 2px solid var(--color-main);
}
.news-widget__posts,
.news-widget__cats {
list-style: none;
margin: 0;
padding: 0;
}
.news-widget__posts li,
.news-widget__cats li {
border-bottom: 1px solid var(--color-line);
}
.news-widget__posts a {
display: block;
padding: 10px 2px;
font-size: 14px;
line-height: 1.6;
color: var(--color-text);
text-decoration: none;
}
.news-widget__date {
display: block;
font-family: var(--font-sans-en);
font-size: 12px;
font-weight: 700;
color: var(--color-muted);
}
.news-widget__posts a:hover .news-widget__post-title {
color: var(--color-main);
text-decoration: underline;
}
.news-widget__cats a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 10px 2px;
font-size: 14px;
color: var(--color-text);
text-decoration: none;
}
.news-widget__cats a:hover { color: var(--color-main); }
.news-widget__count {
font-size: 12px;
color: var(--color-muted);
}
.news-widget__tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.news-widget__tag {
display: inline-block;
padding: 4px 12px;
font-size: 13px;
color: var(--color-main);
border: 1px solid var(--color-line);
border-radius: 999px;
background: #fff;
text-decoration: none;
transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.news-widget__tag:hover {
border-color: var(--color-main);
background: var(--color-main);
color: #fff;
}
.news-widget__more {
margin-top: 12px;
width: 100%;
padding: 9px 12px;
font-size: 13px;
font-weight: 700;
color: var(--color-main);
background: #fff;
border: 1px solid var(--color-main);
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.news-widget__more:hover {
background: var(--color-main);
color: #fff;
} @media (max-width: 900px) {
.news-page__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.news-related__list { grid-template-columns: 1fr; }
} .company-page__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
column-gap: clamp(32px, 4vw, 56px);
align-items: start;
}
.company-page__main { grid-column: 1; min-width: 0; }
.company-page__aside {
grid-column: 2;
position: relative;
z-index: 5;
align-self: stretch;
} .company-section {
scroll-margin-top: calc(var(--header-h) + 24px);
margin-bottom: clamp(56px, 7vw, 88px);
}
.company-section:last-child { margin-bottom: 0; }
.company-h2 {
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
padding-left: 16px;
border-left: 4px solid var(--color-main);
margin: 0 0 28px;
}
.company-text {
font-size: 16px;
line-height: 2;
color: var(--color-text);
margin: 0 0 1.6em;
}
.company-text:last-child { margin-bottom: 0; } .company-greeting__body p {
font-size: 16px;
line-height: 2;
color: var(--color-text);
margin: 0 0 1.6em;
}
.company-greeting__body p:last-child { margin-bottom: 0; }
.company-greeting__body img { max-width: 100%; height: auto; } .company-greeting::after { content: ""; display: block; clear: both; }
.company-greeting__sign {
float: right;
width: 180px;
margin: 0 0 20px 28px;
text-align: center;
}
.company-greeting__sign-photo { margin: 0 0 12px; }
.company-greeting__sign-photo img {
width: 100%;
height: auto;
border: 1px solid var(--color-line);
}
.company-greeting__sign-role {
font-size: 13px;
color: var(--color-muted);
}
.company-greeting__sign-name {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-ink);
} .company-shaze {
background: var(--color-main);
color: #fff;
padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
margin: 0 0 32px;
}
.company-shaze__label {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.4em;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
display: inline-block;
padding-bottom: 6px;
margin: 0 0 18px;
}
.company-shaze__list {
display: grid;
gap: 10px;
}
.company-shaze__list li {
font-size: clamp(15px, 1.6vw, 17px);
font-weight: 500;
line-height: 1.9;
letter-spacing: 0.04em;
}
.company-philosophy__points {
display: grid;
gap: 10px;
margin: 0 0 1.6em;
}
.company-philosophy__points li {
position: relative;
padding-left: 20px;
font-size: 16px;
line-height: 1.9;
color: var(--color-text);
}
.company-philosophy__points li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 8px;
height: 8px;
background: var(--color-main);
} .company-profile {
border-top: 1px solid var(--color-line);
}
.company-profile__row {
display: grid;
grid-template-columns: 127px minmax(0, 1fr);
gap: 6px 28px;
padding: 18px 6px;
border-bottom: 1px solid var(--color-line);
}
.company-profile__label {
font-weight: 700;
color: var(--color-ink);
line-height: 1.9;
}
.company-profile__value {
line-height: 1.9;
color: var(--color-text);
} .company-org { margin: 0; }
.company-org img {
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--color-line);
}
.company-org-placeholder {
border: 2px dashed var(--color-line-strong);
background: var(--color-bg-soft);
color: var(--color-muted);
font-size: 14px;
line-height: 1.8;
padding: 32px 24px;
text-align: center;
} .company-history__group {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
column-gap: clamp(20px, 3vw, 36px);
}
.company-history__year {
font-family: var(--font-sans-en);
font-size: 20px;
font-weight: 700;
color: var(--color-main);
line-height: 1.4;
padding: 14px 0;
}
.company-history__events {
position: relative;
border-left: 2px solid var(--color-main-soft);
padding: 14px 0 14px clamp(18px, 2.5vw, 28px);
display: grid;
gap: 10px;
}
.company-history__group:last-child .company-history__events { padding-bottom: 24px; }
.company-history__event {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
}
.company-history__event::before {
content: "";
position: absolute;
left: calc(-1 * clamp(18px, 2.5vw, 28px) - 5px);
top: 0.7em;
width: 8px;
height: 8px;
background: var(--color-main);
}
.company-history__month {
font-size: 14px;
font-weight: 700;
color: var(--color-muted);
line-height: 2;
white-space: nowrap;
}
.company-history__text {
font-size: 15px;
line-height: 2;
color: var(--color-text);
}
.company-history__photo { margin: 10px 0 6px; }
.company-history__photo img {
display: block;
max-width: 320px;
width: 100%;
height: auto;
border: 1px solid var(--color-line);
}  .company-offices__intro {
margin: 0 0 clamp(28px, 4vw, 40px);
}
.company-offices__intro::after { content: ""; display: block; clear: both; }
.company-offices__intro p {
font-size: 16px;
line-height: 2;
color: var(--color-text);
margin: 0 0 1.6em;
}
.company-offices__intro p:last-child { margin-bottom: 0; }
.company-offices__intro img { max-width: 100%; height: auto; }
.company-offices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.company-office {
}
.company-office__name {
font-size: 18px;
font-weight: 700;
color: var(--color-ink);
padding-bottom: 12px;
margin: 0 0 14px;
border-bottom: 2px solid var(--color-main);
}
.company-office__dl { display: grid; gap: 8px; }
.company-office__row {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 12px;
}
.company-office__row dt {
font-weight: 700;
color: var(--color-main);
line-height: 2;
}
.company-office__row dd {
color: var(--color-text);
}
.company-office__zip { color: var(--color-muted); }
.company-office__gmap { margin: 16px 0 0; }
.company-office__gmap iframe {
display: block;
width: 100%;
height: 200px;
border: 1px solid var(--color-line);
}
.company-office__map { margin: 12px 0 0; } .company-pubs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
align-items: start;
}
.company-pub__title {
position: relative;
font-weight: 700;
line-height: 1.6;
color: var(--color-ink);
padding: 0 0 10px 18px;
}
.company-pub__title::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 9px;
height: 9px;
background: var(--color-main);
}
.company-pub__media { margin: 0; background: var(--color-bg-soft); }
.company-pub__media img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--color-line);
}
.company-pub__text {
font-size: 14px;
line-height: 1.9;
color: var(--color-text);
margin: 14px 0 0;
} .company-ayumi {
display: grid;
counter-reset: none;
}
.company-ayumi__item {
position: relative;
display: grid;
grid-template-columns: 130px minmax(0, 1fr);
column-gap: clamp(20px, 3vw, 36px);
padding-bottom: 34px;
}
.company-ayumi__item:last-child { padding-bottom: 0; } .company-ayumi__body {
position: relative;
border-left: 2px solid var(--color-main-soft);
padding-left: clamp(18px, 2.5vw, 28px);
}
.company-ayumi__item:last-child .company-ayumi__body { border-left-color: transparent; }
.company-ayumi__body::before {
content: "";
position: absolute;
left: -6px;
top: 0.35em;
width: 10px;
height: 10px;
background: var(--color-main);
}
.company-ayumi__yearcol {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 0;
}
.company-ayumi__year {
font-family: var(--font-sans-en);
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: var(--color-main);
}
.company-ayumi__era {
font-size: 12px;
color: var(--color-muted);
}
.company-ayumi__events {
display: grid;
gap: 6px;
margin: 0 0 4px;
}
.company-ayumi__events li {
position: relative;
padding-left: 16px;
font-size: 15px;
line-height: 1.9;
color: var(--color-text);
}
.company-ayumi__events li::before {
content: "";
position: absolute;
left: 0;
top: 0.75em;
width: 6px;
height: 6px;
background: var(--color-line-strong);
}
.company-ayumi__products {
background: var(--color-bg-soft);
padding: 14px 16px;
margin-top: 12px;
}
.company-ayumi__products-label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-main);
margin-bottom: 8px;
}
.company-ayumi__products ul {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.company-ayumi__product {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid var(--color-line);
font-size: 13px;
line-height: 1.6;
padding: 4px 12px;
color: var(--color-text);
} button.company-ayumi__product--photo {
cursor: pointer;
color: var(--color-main);
border-color: var(--color-main);
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
button.company-ayumi__product--photo:hover {
background: var(--color-main);
color: #fff;
}
.company-ayumi__product-icon { flex: 0 0 auto; }
.company-ayumi__photo { margin: 14px 0 0; }
.company-ayumi__photo img {
display: block;
max-width: 320px;
width: 100%;
height: auto;
border: 1px solid var(--color-line);
} @media (max-width: 768px) {
.company-page__inner { grid-template-columns: minmax(0, 1fr); }
.company-page__aside {
grid-column: 1;
grid-row: 1;
align-self: auto;
margin-bottom: 28px;
}
.company-page__main { grid-row: 2; }
.company-section { scroll-margin-top: calc(var(--header-h-sp) + 64px); }
.company-profile__row {
grid-template-columns: 1fr;
gap: 2px;
padding: 14px 4px;
}
.company-offices { grid-template-columns: 1fr; }
.company-pubs { grid-template-columns: 1fr; gap: 32px; }
.company-history__group { grid-template-columns: 84px minmax(0, 1fr); }
.company-history__year { font-size: 17px; }
.company-history__event { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; }
.company-ayumi__item {
grid-template-columns: 1fr;
row-gap: 8px;
}
.company-ayumi__yearcol {
flex-direction: row;
align-items: baseline;
gap: 10px;
}
.company-ayumi__body { border-left-width: 0; padding-left: 0; }
.company-ayumi__body::before { content: none; }
.company-ayumi__item { border-bottom: 1px solid var(--color-line); padding-bottom: 24px; margin-bottom: 24px; }
.company-ayumi__item:last-child { border-bottom: 0; margin-bottom: 0; }
.company-greeting__sign { width: 128px; margin: 0 0 14px 16px; }
} .kaneko-popup {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(20, 24, 31, 0.72);
}
.kaneko-popup[hidden] { display: none; }
.kaneko-popup__figure {
margin: 0;
max-width: min(880px, 100%);
background: #fff;
padding: 14px;
}
.kaneko-popup__figure img {
display: block;
max-width: 100%;
max-height: 70vh;
width: auto;
height: auto;
margin-inline: auto;
}
.kaneko-popup__caption {
text-align: center;
font-size: 14px;
font-weight: 700;
color: var(--color-text);
padding: 12px 8px 2px;
}
.kaneko-popup__close {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
background: #fff;
color: var(--color-ink);
font-size: 24px;
line-height: 1;
display: grid;
place-items: center;
cursor: pointer;
}
.kaneko-popup__close:hover { background: var(--color-main); color: #fff; } .recruit-page__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
column-gap: clamp(32px, 4vw, 56px);
align-items: start;
}
.recruit-page__main { grid-column: 1; min-width: 0; }
.recruit-page__aside {
grid-column: 2;
position: relative;
z-index: 5;
align-self: stretch;
}
.recruit-section {
scroll-margin-top: calc(var(--header-h) + 24px);
margin-bottom: clamp(56px, 7vw, 88px);
}
.recruit-section:last-child { margin-bottom: 0; }
.recruit-h2 {
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
padding-left: 16px;
border-left: 4px solid var(--color-main);
margin: 0 0 28px;
}
.recruit-text {
font-size: 16px;
line-height: 2;
color: var(--color-text);
margin: 0 0 1.4em;
}
.recruit-text:last-child { margin-bottom: 0; } .recruit-dl {
border-top: 1px solid var(--color-line);
margin: 0 0 28px;
}
.recruit-dl__row {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 6px 28px;
padding: 16px 6px;
border-bottom: 1px solid var(--color-line);
}
.recruit-dl__label {
font-weight: 700;
color: var(--color-ink);
line-height: 1.9;
}
.recruit-dl__value {
line-height: 1.9;
color: var(--color-text);
}
.recruit-dl__value a { text-decoration: underline; } .recruit-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 24px 0 0;
}
.recruit-cta .kcf-btn { text-align: center; } .recruit-faq-page { max-width: 900px; }
.recruit-faq__intro { margin-bottom: 36px; }
.recruit-faq__list {
display: grid;
gap: 16px;
}
.recruit-faq__item {
border: 1px solid var(--color-line);
background: #fff;
box-shadow: var(--shadow-card);
}
.recruit-faq__q,
.recruit-faq__a {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 14px;
padding: 18px 22px;
}
.recruit-faq__q {
background: var(--color-bg-soft);
border-bottom: 1px solid var(--color-line);
font-size: 16px;
font-weight: 700;
line-height: 1.7;
color: var(--color-ink);
}
.recruit-faq__a p {
font-size: 15px;
line-height: 1.9;
color: var(--color-text);
}
.recruit-faq__mark {
font-family: var(--font-sans-en);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
color: var(--color-main);
}
.recruit-faq__a .recruit-faq__mark { color: var(--color-muted); }
.recruit-faq__more {
margin-top: 44px;
padding-top: 32px;
border-top: 1px solid var(--color-line);
text-align: center;
}
.recruit-faq__more .recruit-cta { justify-content: center; }  .kcf-opt {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
line-height: 1.4;
color: #fff;
background: #8a94a6;
border-radius: 2px;
vertical-align: middle;
} .kcf-birth-row {
display: flex;
align-items: flex-start;
gap: 10px 14px;
flex-wrap: wrap;
}
.kcf-birth-unit {
display: flex;
align-items: center;
gap: 6px;
}
.kcf-birth-unit .wpcf7-form-control-wrap { display: inline-block; }
.kcf .kcf-birth-unit input[type="text"] {
width: 4.5em;
text-align: center;
}
.kcf .kcf-birth-unit--year input[type="text"] { width: 6em; }
.kcf-unit { font-size: 15px; color: var(--color-text); } .kcf-school {
border: 1px solid var(--color-line);
border-radius: 6px;
padding: 20px 22px 6px;
margin: 0 0 28px;
min-width: 0;
}
.kcf-school legend {
padding: 0 8px;
font-weight: 700;
}
@media (min-width: 768px) {
.kcf-school {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
}
.kcf-school legend { grid-column: 1 / -1; }
} @media (max-width: 768px) {
.recruit-page__inner { grid-template-columns: minmax(0, 1fr); }
.recruit-page__aside {
grid-column: 1;
grid-row: 1;
align-self: auto;
margin-bottom: 28px;
}
.recruit-page__main { grid-row: 2; }
.recruit-section { scroll-margin-top: calc(var(--header-h-sp) + 64px); }
.recruit-dl__row {
grid-template-columns: 1fr;
gap: 2px;
padding: 14px 4px;
}
.recruit-faq__q,
.recruit-faq__a {
grid-template-columns: 28px minmax(0, 1fr);
column-gap: 10px;
padding: 14px 16px;
}
.recruit-faq__mark { font-size: 18px; }
.recruit-cta .kcf-btn { flex: 1 1 100%; }
}  .wp-content .kaneko-talk {
--talk-bg: #eaf0fb;
--talk-line: #b9c9ec;
display: flex;
align-items: flex-start;
gap: 16px;
margin: 1.6em 0;
}
.wp-content .kaneko-talk--right { flex-direction: row-reverse; }
.wp-content .kaneko-talk__who {
flex: 0 0 76px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.wp-content .kaneko-talk__photo {
display: block;
width: 76px;
height: 76px;
object-fit: cover;
border: 1px solid var(--color-line);
border-radius: 6px;
margin: 0;
}
.wp-content .kaneko-talk__name {
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
}
.wp-content .kaneko-talk__name img {border-radius:999px;margin: 0 0 .4em;}
.wp-content .kaneko-talk__bubble {
position: relative;
flex: 1 1 auto;
min-width: 0;
background: var(--talk-bg);
border: 1px solid var(--talk-line);
border-radius: 8px;
padding: 14px 18px;
} .wp-content .kaneko-talk__bubble::before {
content: "";
position: absolute;
top: 26px;
left: -8px;
width: 14px;
height: 14px;
background: var(--talk-bg);
border-left: 1px solid var(--talk-line);
border-bottom: 1px solid var(--talk-line);
transform: rotate(45deg);
}
.wp-content .kaneko-talk--right .kaneko-talk__bubble::before {
left: auto;
right: -8px;
border-left: 0;
border-bottom: 0;
border-right: 1px solid var(--talk-line);
border-top: 1px solid var(--talk-line);
}
.wp-content .kaneko-talk__bubble > p {
margin: 0;
font-size: 15px;
line-height: 1.9;
}
.wp-content .kaneko-talk__bubble > p + p { margin-top: 0.8em; } .wp-content .kaneko-talk--c1 { --talk-bg: #eaf0fb; --talk-line: #b9c9ec; }
.wp-content .kaneko-talk--c2 { --talk-bg: #e6f4fa; --talk-line: #a9d6e8; }
.wp-content .kaneko-talk--c3 { --talk-bg: #e9f5ec; --talk-line: #b3d9bd; }
.wp-content .kaneko-talk--c4 { --talk-bg: #fdf1e4; --talk-line: #f0cda6; }
.wp-content .kaneko-talk--c5 { --talk-bg: #fbeaf0; --talk-line: #ecb6c8; }
.wp-content .kaneko-talk--c0 { --talk-bg: #f1f3f6; --talk-line: #cfd5de; }
.wp-content .kaneko-talk--c0 .kaneko-talk__name { color: var(--color-muted); } .wp-content .kaneko-talk--right { --talk-bg: #fff; } .wp-content .kaneko-symposium-members {
background: var(--color-bg-soft);
padding: 10px 16px;
} .wp-content .kaneko-qa {
margin: 1.8em 0;
}
.wp-content .kaneko-qa__q,
.wp-content .kaneko-qa__a {
position: relative;
margin: 0;
padding: 16px 20px 16px 58px;
line-height: 1.9;
}
.wp-content .kaneko-qa__q {
background: var(--color-bg-soft);
font-weight: 700;
color: var(--color-ink);
}
.wp-content .kaneko-qa__q::before,
.wp-content .kaneko-qa__a::before {
position: absolute;
left: 20px;
top: 14px;
font-family: var(--font-sans-en);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.wp-content .kaneko-qa__q::before { content: "Q."; color: var(--color-main); }
.wp-content .kaneko-qa__a::before { content: "A."; color: var(--color-muted); }  .wp-content .kaneko-layout-imgtext--rev { grid-template-columns: 1fr minmax(0, 38%); }
.wp-content .kaneko-layout-imgtext--rev .kaneko-layout-imgtext__img { order: 2; } .wp-content .kaneko-layout-imgtext--half,
.wp-content .kaneko-layout-imgtext--half.kaneko-layout-imgtext--rev { grid-template-columns: 1fr 1fr; } .wp-content .kaneko-figure { margin: 1.6em 0; }
.wp-content .kaneko-figure__img img {
display: block;
width: 100%;
height: auto;
}
.wp-content .kaneko-figure__cap {
margin: 8px 0 0;
font-size: 13px;
color: var(--color-muted);
text-align: center;
} .wp-content .kaneko-layout-2img {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 1.6em 0;
}
.wp-content .kaneko-layout-2img__item img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 600px) {
.wp-content .kaneko-layout-imgtext--rev,
.wp-content .kaneko-layout-imgtext--half { grid-template-columns: 1fr; }
.wp-content .kaneko-layout-imgtext--rev .kaneko-layout-imgtext__img { order: 0; }
.wp-content .kaneko-layout-2img { gap: 12px; }
.wp-content .kaneko-talk { gap: 10px; }
.wp-content .kaneko-talk__who { flex-basis: 56px; }
.wp-content .kaneko-talk__photo { width: 56px; height: 56px; }
.wp-content .kaneko-talk__bubble { padding: 12px 14px; }
.wp-content .kaneko-talk__bubble > p { font-size: 14px; }
.wp-content .kaneko-qa__q,
.wp-content .kaneko-qa__a { padding: 14px 14px 14px 46px; }
.wp-content .kaneko-qa__q::before,
.wp-content .kaneko-qa__a::before { left: 14px; font-size: 17px; }
} .symposium-page { max-width: 900px; } .staff-archive__intro { margin-bottom: 36px; }
.staff-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.staff-card {
display: flex;
background: #fff;
border: 1px solid var(--color-line);
box-shadow: var(--shadow-card);
transition: border-color 0.2s var(--ease-out);
}
.staff-card:hover { border-color: var(--color-main); }
.staff-card:hover .staff-card__title { color: var(--color-main); }
.staff-card__link {
display: flex;
flex-direction: column;
width: 100%;
color: var(--color-text);
}
.staff-card__media {
margin: 0;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--color-bg-band);
}
.staff-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.staff-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px 20px;
}
.staff-card__title {
font-size: 17px;
font-weight: 700;
line-height: 1.5;
color: var(--color-ink);
transition: color 0.2s var(--ease-out);
}
.staff-card__meta {
display: flex;
flex-wrap: wrap;
gap: 2px 8px;
font-size: 13px;
color: var(--color-muted);
}
.staff-card__name { font-weight: 700; color: var(--color-text); }
.staff-card .link-arrow { margin-top: auto; }
.staff-single__head {
display: grid;
grid-template-columns: minmax(0, 25%) minmax(0, 1fr);
gap: clamp(24px, 4vw, 48px);
align-items: center;
margin-bottom: clamp(40px, 5vw, 56px);
background: var(--color-bg-soft);
}
.staff-single__media { margin: 0; }
.staff-single__media img {
display: block;
width: 100%;
height: auto;
}
.staff-single__meta {
display: flex;
flex-wrap: wrap;
gap: 2px 10px;
font-size: 14px;
color: var(--color-muted);
margin: 0 0 12px;
}
.staff-single__name { font-size: 16px; font-weight: 700; color: var(--color-text); }
.staff-single__title {
font-size: clamp(24px, 2.8vw, 34px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
margin: 0 0 16px;
}
.staff-single__copy {
font-size: 16px;
line-height: 1.9;
color: var(--color-text);
}
.staff-single__content { max-width: 900px; }
.staff-others { margin-top: clamp(56px, 7vw, 88px); }
.staff-others__cta { justify-content: center; margin-top: 32px; } .recruit-flow-page { max-width: 960px; }
.recruit-flow__intro { margin-bottom: 36px; }
.recruit-flow { display: grid; }
.recruit-flow__step {
position: relative;
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
column-gap: clamp(20px, 3vw, 36px);
padding: 0 0 clamp(32px, 4vw, 48px);
}
.recruit-flow__step--has-image {
grid-template-columns: 96px minmax(0, 1fr) minmax(0, 32%);
} .recruit-flow__step:not(:last-child)::before {
content: "";
position: absolute;
left: 47px;
top: 96px;
bottom: 0;
width: 2px;
background: var(--color-main-soft);
}
.recruit-flow__num {
width: 96px;
height: 96px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--color-main);
color: #fff;
line-height: 1;
}
.recruit-flow__num-label {
font-family: var(--font-sans-en);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
opacity: 0.85;
}
.recruit-flow__num-value {
font-family: var(--font-sans-en);
font-size: 34px;
font-weight: 700;
margin-top: 4px;
}
.recruit-flow__body { padding-top: 6px; }
.recruit-flow__title {
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
margin: 0 0 12px;
}
.recruit-flow__text {
font-size: 16px;
line-height: 2;
color: var(--color-text);
margin: 0;
}
.recruit-flow__text a { text-decoration: underline; }
.recruit-flow__link { margin: 16px 0 0; }
.recruit-flow__media { margin: 0; align-self: start; }
.recruit-flow__media img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--color-line);
}
@media (max-width: 768px) {
.staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.staff-single__head { grid-template-columns: 1fr; gap: 20px; }
.recruit-flow__step,
.recruit-flow__step--has-image { grid-template-columns: 64px minmax(0, 1fr); row-gap: 14px; }
.recruit-flow__media { grid-column: 2; }
.recruit-flow__num { width: 64px; height: 64px; }
.recruit-flow__num-label { font-size: 10px; }
.recruit-flow__num-value { font-size: 24px; }
.recruit-flow__step:not(:last-child)::before { left: 31px; top: 64px; }
}
@media (max-width: 480px) {
.staff-grid { grid-template-columns: 1fr; }
} .recruit-top { font-size: 100%; } .rt-eyebrow {
font-family: var(--font-sans-en);
font-size: 81.25%;
font-weight: 700;
color: var(--color-main);
margin: 0 0 14px;
}
.rt-eyebrow--white { color: #fff; opacity: 0.9; }
.rt-h2 {
font-size: 250%;
font-weight: 700;
line-height: 1.3;
color: var(--color-ink);
margin: 0;
}
.rt-catch {
font-size: 237.5%;
font-weight: 700;
line-height: 1.45;
color: var(--color-ink);
margin: 0 0 24px;
}
.rt-text {
font-size: 106.25%;
line-height: 2;
color: var(--color-text);
margin: 0 0 1.4em;
}
.rt-text:last-child { margin-bottom: 0; }
.rt-head { margin-bottom: clamp(32px, 4vw, 48px); } .rt-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-width: 240px;
padding: 18px 24px;
font-size: 106.25%;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
border: 1px solid transparent;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.rt-btn::after {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
.rt-btn--white { background: #fff; color: var(--color-main); }
.rt-btn--white:hover,
.rt-btn--white:focus-visible { background: var(--color-main-dark); color: #fff; }
.rt-btn--strong { background: var(--color-ink); color: #fff; }
.rt-btn--strong:hover,
.rt-btn--strong:focus-visible { background: #fff; color: var(--color-main); }
.rt-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.rt-btn--outline:hover,
.rt-btn--outline:focus-visible { background: #fff; color: var(--color-main); border-color: #fff; } .rt-fv {
position: relative;
display: flex;
flex-direction: column;
min-height: calc(100svh - var(--header-h));
background: var(--color-main);
color: #fff;
overflow: hidden;
}
.rt-fv__inner {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: clamp(48px, 8vh, 96px);
padding-bottom: clamp(40px, 6vh, 72px);
}
.rt-fv__en {
font-family: var(--font-sans-en);
font-size: 800%;
font-weight: 700;
line-height: 0.95;
margin: 0 0 0 -0.04em;
color: #ebb933;
}
.rt-fv__ja {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 150%;
font-weight: 700;
line-height: 1.3;
margin: 20px 0 0;
}
.rt-fv__ja::before {
content: "";
width: 40px;
height: 2px;
background: #fff;
}
.rt-fv__jobs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 40px;
margin-top: clamp(40px, 6vh, 72px);
padding: 10px 10px 10px 20px;
background: #1d3fa0;
max-width: max-content;
}
.rt-fv__jobs-label {
font-size: 100%;
font-weight: 700;
}
.rt-fv__jobs-btns { display: flex; flex-wrap: wrap; gap: 12px; } .rt-marquee {
flex: 0 0 auto;
height: clamp(180px, 34vh, 320px);
overflow: hidden;
background: var(--color-main-dark);
}
.rt-marquee__track {
display: flex;
height: 100%;
width: max-content;
animation: rt-marquee 70s linear infinite;
}
.rt-marquee__group { display: flex; height: 100%; }
.rt-marquee__group img {
display: block;
height: 100%;
width: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
@keyframes rt-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
} .rt-about {
padding: clamp(64px, 9vw, 120px) 0;
background: #fff;
}
.rt-about__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
gap: clamp(32px, 6vw, 96px);
align-items: center;
}
.rt-venn {
display: block;
width: 100%;
max-width: 460px;
margin-inline: auto;
} .rt-about__illust {
display: block;
width: 100%;
max-width: 460px;
height: auto;
margin-inline: auto;
} .rt-venn__ring {
fill: none;
stroke: var(--color-main);
stroke-width: 2;
stroke-dasharray: 786; stroke-dashoffset: 786;
transition: stroke-dashoffset 1.3s var(--ease-out);
}
.rt-venn__ring--2 { transition-delay: 0.25s; }
.rt-venn__ring--3 { transition-delay: 0.5s; }
.rt-venn__core {
fill: var(--color-main);
opacity: 0;
transition: opacity 0.7s var(--ease-out) 1.5s;
}
.rt-venn__label {
font-family: var(--font-sans-ja);
font-size: 137.5%;
font-weight: 700;
fill: var(--color-main);
opacity: 0;
transition: opacity 0.6s var(--ease-out) 0.9s;
}
.rt-venn__label--2 { transition-delay: 1.15s; }
.rt-venn__label--3 { transition-delay: 1.4s; }
.rt-venn.is-inview .rt-venn__ring  { stroke-dashoffset: 0; }
.rt-venn.is-inview .rt-venn__core,
.rt-venn.is-inview .rt-venn__label { opacity: 1; } .rt-values {
padding: clamp(64px, 9vw, 120px) 0;
background: var(--color-bg-soft);
}
.rt-values__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 3vw, 40px);
}
.rt-values__item { } .rt-values__visual {
position: relative;
aspect-ratio: 4 / 3;
margin: 0 0 22px;
display: grid;
place-items: center;
background: var(--color-bg-soft);
border: 1px dashed var(--color-line-strong);
}
.rt-values__visual--set { background: none; border: 0; }
.rt-values__visual img {
width: 100%;
height: 100%;
object-fit: contain;
}
.rt-values__visual-note { color: var(--color-muted); font-size: 81.25%; } .rt-values__num {
position: absolute;
top: 0;
left: 50%;
z-index: 1;
width: 52px;
height: 52px;
display: grid;
place-items: center;
transform: translate(-50%, -50%);
}
.rt-values__num::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-main);
transform: rotate(45deg);
border: 2px solid #FFF;
}
.rt-values__num > span {
position: relative;
font-family: var(--font-sans-en);
font-size: 106.25%;
font-weight: 700;
line-height: 1;
color: #fff;
}
.rt-values__text {
font-size: 130%;
font-weight: 700;
line-height: 1.7;
text-align: center;
color: var(--color-ink);
margin: 0 auto;
max-width: 270px;
word-break: auto-phrase;
font-feature-settings: "palt";
} .rt-message {
--rt-msg-pad: clamp(80px, 11vw, 160px);
position: relative;
padding: var(--rt-msg-pad) 0;
background: #fff;
overflow: hidden;
} .rt-message__side {
position: absolute;
left: 0;
top: var(--rt-msg-pad);
z-index: 0;
writing-mode: vertical-rl;
text-orientation: mixed;
margin: -0.06em 0 0;
font-family: var(--font-sans-en);
font-size: clamp(72px, 9vw, 135px);
font-weight: 700;
line-height: 0.92;
color: var(--color-main-soft);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
.rt-message__inner { position: relative; z-index: 1; }
.rt-message__main { min-width: 0; }
.rt-message__catch {
margin: 0 0 clamp(24px, 3.5vw, 40px);
font-size: 148.75%; font-weight: 700;
line-height: 1.5;
color: var(--color-ink);
font-feature-settings: "palt";
word-break: auto-phrase; clip-path: inset(-0.15em 0 -0.12em 0);
}
.rt-message__catch-text { display: inline-block; } .rt-message__body {
max-width: 760px;
margin-left: auto;
}
.rt-message__row--illust {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 760px);
gap: clamp(32px, 6vw, 96px);
align-items: center;
}
.rt-message__row--illust .rt-message__body { max-width: none; margin-left: 0; }
.rt-message__visual img {
display: block;
width: 100%;
max-width: 420px;
height: auto;
margin-inline: auto;
} .rt-message.reveal-js .rt-message__side {
opacity: 0;
transform: translateY(-16px);
transition: opacity 0.8s var(--ease-out) 0.1s, transform 0.8s var(--ease-out) 0.1s;
}
.rt-message.reveal-js .rt-eyebrow {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.rt-message.reveal-js .rt-message__catch-text {
opacity: 0;
transform: translateY(105%);
transition: opacity 0.5s var(--ease-out) 0.15s, transform 1.1s var(--ease-out) 0.15s;
}
.rt-message.reveal-js .rt-message__body .rt-text,
.rt-message.reveal-js .rt-message__visual {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.rt-message.reveal-js .rt-message__visual { transition-delay: 0.7s; }
.rt-message.reveal-js .rt-message__body .rt-text:nth-child(1) { transition-delay: 0.85s; }
.rt-message.reveal-js .rt-message__body .rt-text:nth-child(2) { transition-delay: 1.0s; }
.rt-message.reveal-js .rt-message__body .rt-text:nth-child(3) { transition-delay: 1.15s; }
.rt-message.reveal-js .rt-message__body .rt-text:nth-child(n+4) { transition-delay: 1.3s; }
.rt-message.reveal-js.is-inview .rt-message__side,
.rt-message.reveal-js.is-inview .rt-eyebrow,
.rt-message.reveal-js.is-inview .rt-message__catch-text,
.rt-message.reveal-js.is-inview .rt-message__visual,
.rt-message.reveal-js.is-inview .rt-message__body .rt-text { opacity: 1; transform: none; } .rt-know {
position: relative;
height: calc(var(--rt-know-n, 3) * (100svh - var(--rt-header, var(--header-h))));
background: var(--color-main-dark);
color: #fff;
}
.rt-know__sticky {
position: sticky;
top: var(--rt-header, var(--header-h));
height: calc(100svh - var(--rt-header, var(--header-h)));
overflow: hidden;
}
.rt-know__slides { position: relative; height: 100%; }
.rt-know__slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.7s var(--ease-out), visibility 0s 0.7s;
}
.rt-know__slide.is-active {
opacity: 1;
visibility: visible;
transition: opacity 0.7s var(--ease-out);
} .rt-know__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.06);
transition: opacity 1.2s var(--ease-out), transform 7s var(--ease-out);
}
.rt-know__slide.is-active .rt-know__bg { opacity: 1; transform: scale(1); } .rt-know__bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(5, 31, 108, 0.88) 0%, rgba(5, 31, 108, 0.55) 55%, rgba(5, 31, 108, 0.3) 100%);
}
.rt-know__bg--noimg::before {
background: linear-gradient(115deg, #0e3ba9 0%, var(--color-main) 60%, #062578 100%);
}
.rt-know__inner {
position: relative;
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding: clamp(48px, 8vh, 96px) clamp(120px, 14vw, 200px) clamp(48px, 8vh, 96px) var(--container-pad); max-height: 100%;
overflow-y: auto;
overscroll-behavior-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}
.rt-know__catch {
font-size: 275%;
font-weight: 700;
line-height: 1.35;
margin: 0 0 24px;
}
.rt-know__text {
font-size: 106.25%;
line-height: 2;
max-width: 760px;
margin: 0 0 32px;
}
.rt-know__links {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0;
} .rt-know__nav {
position: absolute;
right: clamp(16px, 3vw, 40px);
top: 50%;
transform: translateY(-50%);
z-index: 2;
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 18px;
}
.rt-know__nav button {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
color: #fff;
opacity: 0.55;
font-family: var(--font-sans-en);
font-size: 87.5%;
font-weight: 700;
line-height: 1;
transition: opacity 0.2s var(--ease-out);
}
.rt-know__nav button::before {
content: "";
width: 24px;
height: 2px;
background: currentColor;
transition: width 0.3s var(--ease-out);
}
.rt-know__nav button:hover,
.rt-know__nav button.is-active { opacity: 1; }
.rt-know__nav button.is-active::before { width: 48px; }
.rt-know__nav-label { font-family: var(--font-sans-ja); font-size: 87.5%; } .rt-flow { padding: clamp(64px, 9vw, 120px) 0; background: #fff; }
.rt-flow__body { max-width: 960px; } .rt-cta {
position: relative;
padding: clamp(64px, 9vw, 120px) 0;
background: linear-gradient(115deg, #0e3ba9 0%, var(--color-main) 60%, #062578 100%);
color: #fff;
text-align: center;
overflow: hidden;
}
.rt-cta::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.rt-cta__inner { position: relative; }
.rt-cta__en {
font-family: var(--font-sans-en);
font-size: 400%;
font-weight: 700;
line-height: 1;
margin: 0;
}
.rt-cta__label {
font-size: 100%;
font-weight: 700;
margin: 8px 0 28px;
opacity: 0.9;
}
.rt-cta__catch {
font-size: 275%;
font-weight: 700;
line-height: 1.4;
margin: 0 0 36px;
}
.rt-cta__btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.rt-cta__links {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 32px;
margin: 28px 0 0;
padding: 0;
}
.rt-cta__links a {
color: #fff;
font-size: 100%;
text-decoration: underline;
text-underline-offset: 4px;
}
.rt-cta__links a:hover { opacity: 0.8; } @media (max-width: 1024px) {
.rt-fv__en { font-size: 600%; }
.rt-know__catch { font-size: 225%; }
}
@media (max-width: 768px) {
.rt-fv { min-height: calc(100svh - var(--header-h-sp)); }
.rt-fv__en { font-size: 450%; }
.rt-fv__ja { font-size: 125%; }
.rt-fv__jobs { gap: 14px; }
.rt-fv__jobs-btns { width: 100%; }
.rt-fv__jobs-btns .rt-btn { flex: 1 1 100%; min-width: 0; }
.rt-marquee { height: clamp(140px, 26vh, 220px); }
.rt-h2 { font-size: 187.5%; }
.rt-catch { font-size: 175%; }
.rt-text { font-size: 100%; }
.rt-about__inner { grid-template-columns: 1fr; gap: 36px; }
.rt-venn { max-width: 320px; }
.rt-values__list { grid-template-columns: 1fr; gap: 16px; }
.rt-message { --rt-msg-pad: 64px; padding-bottom: 72px; } .rt-message__side {
font-size: 52px;
bottom: 72px;
white-space: normal;
}
.rt-message__side br { display: none; }
.rt-message__main { padding-left: var(--rt-side-w, 0px); }
.rt-message__catch { font-size: 140%; margin-bottom: 24px; } .rt-message__body { max-width: none; } .rt-message__row--illust { grid-template-columns: 1fr; gap: 24px; }
.rt-message__visual img { max-width: 260px; } .rt-know__slide { padding-bottom: 84px; }
.rt-know__inner { padding: 40px var(--container-pad) 24px; }
.rt-know__catch { font-size: 175%; }
.rt-know__text { font-size: 100%; }
.rt-know__links .rt-btn { flex: 1 1 100%; min-width: 0; } .rt-know__nav {
top: auto;
bottom: 28px;
right: 50%;
transform: translateX(50%);
grid-auto-flow: column;
gap: 20px;
}
.rt-know__nav-label { display: none; }
.rt-cta__en { font-size: 250%; }
.rt-cta__catch { font-size: 175%; }
.rt-cta__btns .rt-btn { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 480px) {
.rt-fv__en { font-size: 340%; }
.rt-values__num { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.rt-marquee__track { animation: none; }
.rt-know__slide,
.rt-know__slide.is-active,
.rt-know__bg,
.rt-venn__ring, .rt-venn__core, .rt-venn__label { transition: none; }
.rt-venn__ring { stroke-dashoffset: 0; }
.rt-venn__core, .rt-venn__label { opacity: 1; } .rt-message__side,
.rt-eyebrow,
.rt-message__catch-text,
.rt-message__visual,
.rt-message__body .rt-text { transform: none; transition: none; }
} @media (max-width: 768px) {
.kcf input[type="text"],
.kcf input[type="email"],
.kcf input[type="tel"],
.kcf select,
.kcf textarea,
.wpcf7-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.wpcf7-form select,
.wpcf7-form textarea,
.searchform input[type="search"],
.searchform input[type="text"] {
font-size: 16px !important;
}
}
.kcf input,
.kcf select,
.kcf textarea,
.kcf button,
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea { touch-action: manipulation; } .recruit-faq__group .recruit-h2 { margin-bottom: 20px; }
.recruit-faq__group + .recruit-faq__group { margin-top: clamp(48px, 6vw, 72px); } .link-ext {
padding-right: 1.2em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23072d99' d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: 0.95em auto;
}
.link-ext--white {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
} .kaneko-popup--scroll .kaneko-popup__figure {
max-width: min(760px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.kaneko-popup--scroll .kaneko-popup__figure img { max-height: none; width: 100%; }
.kaneko-popup--scroll .kaneko-popup__caption { position: sticky; bottom: 0; background: #fff; }  .know-nav {
position: sticky;
top: var(--header-actual, var(--header-h)); z-index: 30;
background: #fff;
border-bottom: 1px solid var(--color-line);
}
.know-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.know-nav__list::-webkit-scrollbar { display: none; }
.know-nav__item { flex: 0 0 auto; }
.know-nav__item a {
display: block;
padding: 16px 18px;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.know-nav__item:first-child a { padding-left: 0; }
.know-nav__item a:hover,
.know-nav__item a.is-current { color: var(--color-main); border-bottom-color: var(--color-main); } .know-intro { margin-bottom: clamp(48px, 6vw, 72px); }
.know-intro__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px 48px;
align-items: start;
}
.know-intro__grid.has-photo { grid-template-columns: minmax(0, 1fr) minmax(240px, 32%); }
.know-catch {
font-size: clamp(26px, 3vw, 38px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
margin: 0 0 24px;
}
.know-page--index .know-intro__lead { max-width: 900px; }
.know-intro__photo { margin: 0; }
.know-intro__photo img { display: block; width: 100%; height: auto; }
.know-intro__fv { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 820px; }
.know-intro__fv img { display: block; width: 100%; height: auto; } .know-section {
scroll-margin-top: calc(var(--header-h) + 80px);
margin-bottom: clamp(56px, 7vw, 88px);
}
.know-section:last-child { margin-bottom: 0; } .know-section__head { margin: 0 0 24px; }
.know-section__head .product-feature__title {
font-size: clamp(18px, 2vw, 22px);
line-height: 1.5;
margin: 0;
}
.know-section__lead { margin-bottom: 28px; }
.know-section__fig { margin: 0 auto 36px; max-width: 820px; }
.know-section__fig img { display: block; width: 100%; height: auto; }
.know-section__more { margin: 40px 0 0; text-align: center; } .know-list { border-top: 1px solid var(--color-line); }
.know-item {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
column-gap: clamp(24px, 3vw, 40px);
align-items: start;
padding: clamp(24px, 3vw, 36px) 0;
border-bottom: 1px solid var(--color-line);
}
.know-item--no-image { grid-template-columns: minmax(0, 1fr); }
.know-item__media { margin: 0; }
.know-item__media img { display: block; width: 100%; height: auto; border: 1px solid var(--color-line); }
.know-item__title {
font-size: clamp(18px, 1.9vw, 21px);
font-weight: 700;
line-height: 1.45;
color: var(--color-ink);
margin: 0 0 12px;
}
.know-badge {
display: inline-block;
vertical-align: 0.2em;
margin-left: 8px;
padding: 3px 10px 2px;
font-family: var(--font-sans-en);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: #fff;
background: var(--color-main);
}
.know-item__text {
font-size: 16px;
line-height: 2;
color: var(--color-text);
margin: 0;
}
.know-item__text a { text-decoration: underline; }
.know-item__link { margin: 14px 0 0; } .know-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 36px 28px;
}
.know-card { display: flex; flex-direction: column; min-width: 0; }
.know-card__title {
font-size: 19px;
font-weight: 700;
line-height: 1.5;
color: var(--color-ink);
margin: 0 0 14px;
padding-left: 12px;
border-left: 3px solid var(--color-main);
}
.know-card__media { margin: 0 0 16px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-soft); }
.know-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.know-card__text {
font-size: 15px;
line-height: 1.9;
color: var(--color-text);
margin: 0;
}
.know-card__text a { text-decoration: underline; }
.know-card__link { margin: 14px 0 0; padding-top: 4px; }
.know-card__link:last-child { margin-top: auto; padding-top: 18px; } .know-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
.know-gallery--1 { grid-template-columns: minmax(0, 1fr); }
.know-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.know-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.know-gallery--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.know-gallery--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.know-gallery__item { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-soft); }
.know-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; } .know-flow {
background: var(--color-bg-band);
padding: var(--section-pad-y) 0;
}
.know-flow__title {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-size: clamp(24px, 2.8vw, 34px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
text-align: center;
margin: 0 0 clamp(32px, 4vw, 48px);
}
.know-flow__en {
font-family: var(--font-sans-en);
font-size: 13px;
font-weight: 700;
color: var(--color-main);
}
.know-steps {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1000px;
display: grid;
gap: 16px;
}
.know-step {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) minmax(0, 26%);
column-gap: clamp(20px, 3vw, 32px);
align-items: start;
background: #fff;
padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
box-shadow: var(--shadow-card);
}
.know-step--no-image { grid-template-columns: 64px minmax(0, 1fr); }
.know-step__num {
font-family: var(--font-sans-en);
font-size: 40px;
font-weight: 700;
line-height: 1;
color: var(--color-main);
padding-top: 2px;
}
.know-step__title {
font-size: clamp(18px, 2vw, 22px);
font-weight: 700;
line-height: 1.45;
color: var(--color-ink);
margin: 4px 0 10px;
}
.know-step__text {
font-size: 15px;
line-height: 1.9;
color: var(--color-text);
margin: 0;
}
.know-step__media { margin: 0; }
.know-step__media img { display: block; width: 100%; height: auto; }
.know-flow__note {
max-width: 1000px;
margin: 28px auto 0;
padding: 18px 24px;
background: #fff;
border-left: 4px solid var(--color-main);
}
.know-flow__note-text { font-size: 14px; line-height: 1.9; color: var(--color-text); margin: 0 0 0.8em; }
.know-flow__note-text:last-child { margin-bottom: 0; } .know-cases {
position: relative;
padding: var(--section-pad-y) 0;
background-color: var(--color-bg-band);
background-image: repeating-linear-gradient(135deg, rgba(7, 45, 153, 0.05) 0 2px, transparent 2px 14px);
color: var(--color-text);
}
.know-cases__title {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-size: clamp(24px, 2.8vw, 34px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
text-align: center;
margin: 0 0 20px;
}
.know-cases__en {
font-family: var(--font-sans-en);
font-size: 13px;
font-weight: 700;
color: var(--color-main);
}
.know-cases__lead {
font-size: 16px;
line-height: 2;
text-align: center;
margin: 0 0 clamp(28px, 4vw, 44px);
}
.know-cases__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: 24px;
align-items: start;
}
.know-case {
background: #fff;
color: var(--color-text);
padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-card);
}
.know-case__company {
font-size: clamp(18px, 2vw, 21px);
font-weight: 700;
line-height: 1.4;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 2px solid var(--color-main);
}
.know-case__company a { color: var(--color-main); text-decoration: none; }
.know-case__company a:hover { text-decoration: underline; }
.know-case__item + .know-case__item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-line); }
.know-case__item-title {
font-size: 16px;
font-weight: 700;
line-height: 1.6;
color: var(--color-ink);
margin: 0;
}
.know-case__item-title a { color: var(--color-main); text-decoration: underline; }
.know-case__item-title a:hover { text-decoration: none; }
.know-case__img-btn {
display: inline-block;
margin-left: 10px;
padding: 3px 10px;
font-size: 12px;
font-weight: 700;
line-height: 1.5;
color: var(--color-main);
background: #fff;
border: 1px solid var(--color-main);
cursor: pointer;
vertical-align: 0.1em;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.know-case__img-btn:hover { background: var(--color-main); color: #fff; }
.know-case__text {
font-size: 14.5px;
line-height: 1.9;
color: var(--color-text);
margin: 8px 0 0;
}
.know-case__text a { color: var(--color-main); text-decoration: underline; } @media (max-width: 900px) {
.know-item { grid-template-columns: 240px minmax(0, 1fr); }
.know-step { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 30%); }
}
@media (max-width: 768px) {
.know-nav { top: var(--header-actual, var(--header-h-sp)); }
.know-nav__item a { padding: 12px 12px; font-size: 13px; }
.know-intro__grid.has-photo { grid-template-columns: minmax(0, 1fr); }
.know-intro__photo { max-width: 360px; }
.know-section { scroll-margin-top: calc(var(--header-h-sp) + 64px); }
.know-item,
.know-item--no-image { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
.know-item__media { max-width: 360px; }
.know-step,
.know-step--no-image { grid-template-columns: 44px minmax(0, 1fr); row-gap: 14px; }
.know-step__num { font-size: 30px; }
.know-step__media { grid-column: 2; max-width: 320px; }
.know-cases__grid { gap: 16px; }
} .sitemap {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 64px);
align-items: start;
}
.sitemap__col { min-width: 0; }
.sitemap__group + .sitemap__group { margin-top: clamp(32px, 4vw, 44px); }
.sitemap__title {
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 700;
line-height: 1.4;
color: var(--color-ink);
padding-left: 14px;
border-left: 4px solid var(--color-main);
margin: 0 0 18px;
}
.sitemap__list { list-style: none; margin: 0; padding: 0; }
.sitemap__list--l0 > .sitemap__item { padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.sitemap__list--l0 > .sitemap__item > a {
font-size: 16px;
font-weight: 700;
color: var(--color-ink);
text-decoration: none;
}
.sitemap__list--sub { margin-top: 8px; padding-left: 4px; display: grid; gap: 6px; }
.sitemap__list--sub .sitemap__list--sub { margin-top: 6px; padding-left: 18px; gap: 4px; }
.sitemap__list--sub > .sitemap__item > a {
position: relative;
display: inline-block;
padding-left: 16px;
font-size: 14.5px;
line-height: 1.6;
color: var(--color-text);
text-decoration: none;
}
.sitemap__list--sub > .sitemap__item > a::before {
content: "";
position: absolute;
left: 0;
top: 0.8em;
width: 8px;
height: 1px;
background: var(--color-main);
}
.sitemap__list--sub .sitemap__list--sub > .sitemap__item > a { font-size: 13.5px; color: var(--color-muted); }
.sitemap a:hover { color: var(--color-main); text-decoration: underline; }
@media (max-width: 768px) {
.sitemap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
} .lang-en .page-hero-band__eyebrow,
.lang-en .section-eyebrow,
.lang-en .rt-eyebrow,
.lang-en .product-cta__eyebrow,
.lang-en .rt-fv__en,
.lang-en .rt-cta__en { display: none; }
 .company-org-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.orgc { --orgc-main: #072d99;
--orgc-main-dark: #051f6c;
--orgc-main-soft: #e8edf8;
--orgc-line: #b9c0cc;
--orgc-ink: #14181f;
--orgc-text: #2a2f3a;
--orgc-gap: 18px;  width: max-content;
min-width: 100%;
padding: 4px 2px;
font-size: 13px;
line-height: 1.45;
}
.orgc__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.orgc__item {
display: flex;
align-items: center;
position: relative;
} .orgc__item > .orgc__list {
position: relative;
margin-left: var(--orgc-gap);
padding-left: var(--orgc-gap);
} .orgc__item > .orgc__list::before {
content: "";
position: absolute;
left: calc(-1 * var(--orgc-gap));
top: 50%;
width: var(--orgc-gap);
height: 2px;
margin-top: -1px;
background: var(--orgc-line);
} .orgc__item > .orgc__list > .orgc__item::after {
content: "";
position: absolute;
left: calc(-1 * var(--orgc-gap));
top: -4px;
bottom: -4px;
width: 2px;
background: var(--orgc-line);
}
.orgc__item > .orgc__list > .orgc__item:first-child::after { top: 50%; }
.orgc__item > .orgc__list > .orgc__item:last-child::after  { bottom: 50%; }
.orgc__item > .orgc__list > .orgc__item:only-child::after  { content: none; } .orgc__item > .orgc__list > .orgc__item::before {
content: "";
position: absolute;
left: calc(-1 * var(--orgc-gap));
top: 50%;
width: var(--orgc-gap);
height: 2px;
margin-top: -1px;
background: var(--orgc-line);
} .orgc__node {
flex: 0 0 auto;
white-space: nowrap;
padding: 4px 14px;
border-radius: 2px;
text-align: left;
} .orgc__node--l0 {
background: var(--orgc-main);
color: #fff;
font-weight: 700;
} .orgc__node--l1 {
background: #fff;
border: 2px solid var(--orgc-main);
color: var(--orgc-main);
font-weight: 700;
min-width: 140px;
} .orgc__node--l2 {
background: var(--orgc-main-soft);
border: 1px solid #c3cfec;
color: var(--orgc-main-dark);
font-weight: 500;
min-width: 140px;
} .orgc__node--l3 {
background: #fff;
border: 1px solid var(--orgc-line);
color: var(--orgc-text);
font-size: 12px;
min-width: 160px;
}