@charset "utf-8";

/* ==========================================================================
セレブロファーマ トップページ（複製版 / 改変用ベース）
--------------------------------------------------------------------------
・元サイト（Webflow）のレイアウト・余白・配色を実測して手書きで再構成
・画像は元サイトのCDNを参照。差し替えは img の src / url() を書き換え
・寸法は 1440px 表示時の実測値に合わせています
========================================================================== */

/* ---------- デザイントークン ---------- */
:root {
--blue: #3266a2; /* ブランドブルー */
--blue-dark: #213f68;
--teal: #39c3c3;
--teal-2: #22a8aa;

--text: #3d3d3d;
--title-pale: #efefef; /* 英字大見出し（白地・淡い背景の上） */
--title-grey: #989898; /* 英字大見出し（写真の上） */
--line: #e2e2e2;
--line-btn: #bdbdbd;
--rule: #dcdcdc; /* 罫線（下層ページ） */
--error: #d14343; /* 入力エラー */

--bg: #f7f7f7;
--white: #ffffff;
--footer-bg: #3d3d3d;
--footer-text: #dcdcdc;

--grad-btn: linear-gradient(98deg, var(--blue), var(--teal) 80%);
--grad-badge: linear-gradient(90deg, var(--blue), var(--teal-2));
--grad-contact: linear-gradient(
    266deg,
    var(--teal) 10%,
    var(--blue) 90%
);

--mincho: "STIX Two Text", "Zen Old Mincho", "Yu Mincho", "YuMincho", serif;
--gothic:
    "Manrope", "Zen Kaku Gothic Antique", "Hiragino Sans", "Noto Sans JP",
    sans-serif;

--maxw: 1360px; /* コンテンツ幅 */
--gut: clamp(20px, 4vw, 86px); /* 左右の余白 */
--pad-l: 80px; /* セクション上余白（標準） */
--pad-s: 80px; /* セクション上余白（写真背景） */
/* コンテンツ端から画面端までの距離（マイナス値）。全画面幅に伸ばす時に使用 */
--bleed: calc(-1 * max(var(--gut), (100vw - var(--maxw)) / 2));
}

/* ---------- リセット ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
overflow-x: hidden;
min-width: 320px
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
overflow-x: clip;
font-family: var(--gothic);
font-size: 16px;
font-weight: 400;
line-height: 2;
/* -webkit-font-smoothing: antialiased;*/
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
h1,
h2,
h3,
h4 {
margin: 0;
font-weight: 400;
}
p {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
button,
input,
textarea,
select {
font: inherit;
color: inherit;
}

.wrap {
position: relative;
width: min(100% - var(--gut) * 2, var(--maxw));
margin-inline: auto;
}

.bleed-l {
margin-left: var(--bleed);
} /* 画面左端まで伸ばす */
.bleed-r {
margin-right: var(--bleed);
} /* 画面右端まで伸ばす */

/* ---------- セクション共通 ---------- */
.sec {
position: relative;
z-index: 0;
padding-top: var(--pad-l);
padding-bottom: var(--pad-s);
}

.sec--photo {
padding-top: var(--pad-s);
}

.sec .wrap:before,
.sec .wrap:after {
	content: "";
	position: absolute;
	z-index: 100;
	top: calc(var(--pad-s) * -1);
	width: 2vw;
	height: calc(100% + var(--pad-l) + var(--pad-s));
	border-inline: 1px solid #dcdcdc88;
	pointer-events: none
}

.sec .wrap:before {
	left: -2vw
}

.sec .wrap:after {
	right: -2vw
}

.sec .company__wrap:before,
.sec .company__wrap:after {
    top: 8px;
	height: calc(100% + var(--pad-s) - 8px);
}

.sec__en {
position: relative;
z-index: 0;
font-family: var(--mincho);
font-weight: 400;
font-size: clamp(60px, 5.6vw, 80px);
line-height: 0.55;
letter-spacing: 0.01em;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: #7c7c7c;
color: var(--title-pale);
text-indent: -2px;
}

#About-us .sec__en,
#Company .sec__en  {
-webkit-text-stroke-color: #efefef;
}

.sec__en:before {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: calc((100vw - 100%) / -2);
	width: 100vw;
	height: 0;
	border-bottom: 1px solid #dcdcdc88;
	pointer-events: none;
}

.sec__ja {
font-family: var(--mincho);
font-size: 16px;
font-weight: 500;
line-height: 1;
color: var(--blue);
margin-left: -5px;
margin-top: 17px;
}

.sec__ja:before {
	content:"・"
}

.sec--photo .sec__en {
color: var(--title-grey);
}
.sec--photo .sec__ja {
color: #fff;
}

.sec__h {
/* 本文見出し（32px） */
font-family: var(--gothic);
font-size: clamp(24px, 2.2vw, 32px);
color: var(--blue);
font-weight: 500;
line-height: 1.5;
}
.body-txt {
font-size: 16px;
font-weight: 400;
line-height: 2;
}
.body-txt p + p {
margin-top: 24px;
}

/* ---------- ボタン ---------- */
.btn-g {
/* グラデーションボタン 240×56 */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 240px;
height: 56px;
background: var(--grad-btn);
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
transition: filter 0.25s;
border-radius: 5px
}
.btn-g:hover {
filter: brightness(1.08);
}
.btn-g img {
width: 16px;
height: 16px;
}

.btn-line {
/* 枠線ボタン 350×78 */
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 350px;
max-width: 100%;
padding: 24px;
background: var(--bg);
border: 1px solid var(--line-btn);
color: var(--text);
font-size: 16px;
font-weight: 500;
transition:
    border-color 0.25s,
    color 0.25s;
}
.btn-line:hover {
border-color: var(--blue);
color: var(--blue);
}
.btn-line__ico {
display: grid;
place-items: center;
width: 20px;
height: 20px;
background: var(--blue);
border-radius: 10px
}
.btn-line__ico img {
width: 16px;
height: 16px;
}

.tlink {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--blue);
font-size: 14px;
font-weight: 500;
}
.tlink img {
width: 16px;
height: 16px;
flex: none;
}

/* ==========================================================================
ヘッダー
========================================================================== */
.nav {
position: fixed;
z-index: 1000;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
align-items: center;
gap: 24px;
width: min(100% - 32px, 1395px);
height: 70px;
padding: 0 22px;
border: .5px solid rgba(255, 255, 255, .8);
background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, 1));
backdrop-filter: blur(20px) saturate(180%);
box-shadow: 3px 6px 10px rgba(0, 0, 0, .1);
border-radius: 5px


}
.nav__logo img {
width: 172px;
height: 42px;
}
.nav__links {
display: flex;
align-items: center;
gap: 30px;
margin-left: auto;
}
.nav__links a {
font-size: 14px;
font-weight: 500;
color: #333;
white-space: nowrap;
transition: color 0.2s;
}
.nav__links a:hover {
color: var(--blue);
}
.nav__links a[aria-current="page"] {
color: var(--blue);
}
.nav__lang {
/* 言語切替「( JP | EN )」（メニュー内の末尾に配置） */
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #525252;
}
.nav__links .nav__lang a {
padding: 0 8px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: 400;
color: var(--blue);
transition: opacity 0.2s;
}
.nav__links .nav__lang a + a {
border-left: 1px solid #7c7c7c;
}
.nav__links .nav__lang a:hover {
opacity: 0.7;
}
.nav__burger {
display: none;
margin-left: auto;
background: none;
border: 0;
padding: 8px;
cursor: pointer;
}
.nav__burger span {
display: block;
width: 24px;
height: 1.5px;
background: #333;
margin: 5px 0;
}

/* ==========================================================================
ヒーロー
========================================================================== */
.hero {
display: flex;
flex-direction: column;
justify-content: end;
position: relative;
height: 100vh;
max-height: 100vh;
min-height: 480px;
overflow: hidden;
background: #3d3d3d
}

.hero > img {
position: absolute;
z-index: 0;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
animation: hero__img .8s ease .2s both
}

@keyframes hero__img {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.hero__copy {
position: absolute;
z-index: 1;
left: 0;
bottom: 100px;
font-family: var(--mincho);
font-weight: 500;
color: #fff;
font-size: clamp(50px, 5.55vw, 80px);
line-height: 1.3;
text-shadow: 0 2px 28px rgba(0, 0, 0, 0.22);
animation: hero__copy .6s ease .8s both
}

@keyframes hero__copy {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ==========================================================================
About us
========================================================================== */
.about {
z-index: 0;
color: #fff;
background: url("/images/697899360615b899f4b829bc_PC_About%20us2.webp")
    center/cover no-repeat;
}
.about .sec__h {
color: #fff;
margin-top: 72px;
font-weight: 500;
}
.about__grid {
display: grid;
grid-template-columns: 540px 760px;
justify-content: space-between;
align-items: center;
gap: 48px;
margin-top: 88px;
}

.about__grid figure img {
    width: 100%;
	max-width: 490px;
    padding-block: 12px;
	margin: auto
}

.about__txt {
color: #fff;
line-height: 2.2;
}

/* ==========================================================================
Technology
========================================================================== */
.tech__grid {
display: grid;
grid-template-columns: 720px 600px;
justify-content: space-between;
gap: 32px;
margin-top: 80px;
align-items: start;
}
.tech__fig {
margin-block: 0;
margin-right: var(--bleed);
}
.tech__fig img {
width: 100%;
max-width: none;
max-height: 500px;
object-fit: cover;
}
.tech__h {
margin-bottom: 64px;
}
.tech__btn {
margin-top: 64px;
}
.tech__object {
position: absolute;
z-index: -1;
right: 0;
bottom: -80px;
width: 1140px;
max-width: 88%;
pointer-events: none;
}
.tech__object img {
width: 100%;
}

/* ==========================================================================
Products
========================================================================== */
.prod__lead {
display: grid;
grid-template-columns: 520px 740px;
justify-content: space-between;
gap: 48px;
margin-top: 80px;
}
.prod__card {
display: grid;
grid-template-columns: 347px 1fr;
gap: 46px;
align-items: start;
margin-top: 57px;
padding: 48px;
background: var(--white);
}
.prod__name {
font-family: var(--mincho);
font-size: 24px;
font-weight: 500;
line-height: 1.5;
}
.prod__desc {
margin-top: 16px;
font-size: 14px;
line-height: 2;
font-weight: 400;
}
.prod__meta {
display: flex;
align-items: center;
gap: 16px;
margin-top: 16px;
flex-wrap: wrap;
}
.badge {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 12px;
background: var(--grad-badge);
color: #fff;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
}
.prod__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 38px;
flex-wrap: wrap;
}
.tag {
font-size: 12px;
color: #7a7a7a;
font-weight: 400;
}

/* ==========================================================================
Media
========================================================================== */

.media__stage {
position: relative;
}
.media__photo {
margin-block: 0;
}
.media__photo img {
width: calc(100% - 133px);
max-width: none;
margin-bottom: 2px
}
.media__titlebox {
position: absolute;
left: var(--bleed);
bottom: -34px;
background: var(--bg);
padding: 40px 43px 0 calc(-1 * var(--bleed));
}
.media__list {
display: flex;
flex-direction: column;
align-items: end;
margin-top: 32px;
padding: 40px 0 0 40px;
}

.media__list:before {
	content: "";
	z-index: -1;
	position: absolute;
	left: -3vw;
	bottom: -3vw;
	width: 555px;
	height: 485px;
	background: url(/images/media.svg) 0 0 no-repeat;
	background-size: contain
}

.macc {
width: 1040px;
max-width: 100%;
background: var(--white);
margin-bottom: 24px;
}
.macc__head {
display: grid;
grid-template-columns: 1fr 16px;
gap: 16px;
align-items: start;
width: 100%;
padding: 24px;
background: none;
border: 0;
cursor: pointer;
text-align: left;
}
.macc__date {
font-size: 14px;
color: var(--blue);
letter-spacing: 0.06em;
}
.macc__title {
display: block;
margin-top: 24px;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.macc__icon {
width: 16px;
height: 16px;
margin-top: 2px;
}
.macc__panel {
padding: 0 24px 24px;
background: var(--white);
}
.macc:not(.is-open) .macc__panel {
display: none;
}
.macc__panel p {
font-size: 14px;
line-height: 1.8;
color: var(--text);
}
.macc__panel .tlink {
display: inline;
word-break: break-all;
}

.tlink img {
	display: inline;
}

.media__more {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}

/* ==========================================================================
Information
========================================================================== */
#Information {
	padding-top: 0
}

.info__tabs {
display: none /* flex */;
gap: 28px;
margin-top: 64px;
border-bottom: 1px solid var(--line);
}
.info__tab {
background: none;
border: 0;
padding: 0 0 14px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
color: #9a9a9a;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.info__tab.is-on {
color: var(--blue);
border-bottom-color: var(--blue);
}
.info__empty {
border: 1px dashed #cdcdcd;
text-align: center;
padding: 72px 20px;
font-size: 16px;
color: #8a8a8a;
margin-top: 40px
}
.info__more {
display: flex;
justify-content: flex-end;
}

/* ==========================================================================
Company
========================================================================== */
.company {
background: url("/images/697b55de4062cb5c2ce37c6a_company%20background.webp")
    center/cover no-repeat;
}
.company__panel {
margin: 72px 0 0 320px;
padding: 56px 0 56px 56px;
background: var(--white);
margin-right: var(--bleed);
}
.company__h {
position: relative;
font-family: var(--mincho);
font-size: 32px;
font-weight: 400;
color: var(--text);
padding-left: 20px;
}
.company__h:before {
	content: "";
	position: absolute;
	top: 10%;
	left: 0;
	width: 10px;
	height: 80%;
	background: linear-gradient(var(--blue), var(--teal))
}

.dl {
margin-top: 48px;
}
.dl__row {
display: grid;
grid-template-columns: 168px minmax(0, 762px);
gap: 32px;
padding: 24px 0;
border-bottom: 1px solid #dcdcdc88;
}
.dl__t {
color: var(--blue);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
.dl__d {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
.dl__d .sub {
display: block;
font-size: 14px;
color: #6e6e6e;
}
.dl__d .tlink {
margin-top: 6px;
}
.dl__d .iso {
width: 169px;
margin-top: 14px;
}

/* ==========================================================================
Recruit
========================================================================== */
.recruit__grid {
display: grid;
grid-template-columns: 620px 670px;
justify-content: space-between;
gap: 50px;
margin-top: 80px;
align-items: end;
}
.recruit__fig {
margin-block: 0;
padding-top: 43px;
}
.recruit__fig img {
width: 100%;
max-width: none;
max-height: 520px;
object-fit: cover;
}
.recruit__body p {
margin-top: 24px;
font-size: 16px;
font-weight: 400;
line-height: 2;
}
.recruit__more {
display: flex;
justify-content: flex-end;
margin-top: 56px;
}

/* ==========================================================================
Contact
========================================================================== */
/* お問い合わせ・プライバシーポリシーと共通（ホバーで背景が流れる） */
.contact{
  position:relative;z-index:0;isolation:isolate;display:flex;flex-direction:column;justify-content:center;
  min-height:428px;padding:120px 0;color:#fff;overflow:hidden;
}
.contact__bg{                  /* グラデーション背景（幅120%。ホバーで左へ流れる） */
  position:absolute;top:0;left:0;z-index:-3;width:120%;height:100%;
  background:var(--grad-contact);transition:transform .6s ease .2s;
}

.contact__inner {
    max-width: var(--maxw)
}

.contact__photo{position:absolute;top:0;bottom:0;left:50%;z-index:-2;width:908px;transform:translateX(-50%)}
.contact__photo img{width:100%;height:100%;object-fit:cover}
.contact__line{display: none; position:absolute;top:0;bottom:0;width:3%;border:solid rgba(220,220,220,.3);border-width:0 1px;pointer-events:none}
.contact__line--l{left:3%}
.contact__line--r{right:3%}
.contact__en{
  font-family:var(--mincho);font-size:80px;font-weight:400;line-height:.5;
  color:var(--title-pale);
}
.contact__ja{display:flex;align-items:center;gap:8px;margin-top:32px;font-family:var(--mincho);font-size:16px;font-weight:600;line-height:1;color:#fff}
.contact__ja::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:var(--title-pale)}
.contact__lead{margin-top:40px;font-size:16px;font-weight:400;line-height:1.6}
.contact__arrow{
  position:absolute;right:0;top:50%;margin-top:-28px;display:grid;place-items:center;
  width:89px;height:56px;border:.5px solid #fff;border-radius:50%;
}
.contact__arrow img{width:40px;height:40px}
@media (hover:hover){
  .contact:hover .contact__bg{transform:translateX(-16%)}
  .contact:hover .contact__arrow img{animation:contact-arrow .4s ease}
}
@keyframes contact-arrow{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .contact__bg{transition:none}
  .contact:hover .contact__arrow img{animation:none}
}

/* ==========================================================================
フッター
========================================================================== */
.foot {
background: var(--footer-bg);
color: var(--footer-text);
padding: 72px 0 32px;
}
.foot__top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 64px;
}
.foot__logo {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.foot__logo img {
width: 172px;
height: 16px;
}
.foot__addr {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.foot__addr dt {
font-size: 12px;
color: #fff;
font-weight: 500;
margin-bottom: 8px;
}
.foot__addr dd {
margin: 0;
font-size: 12px;
line-height: 1.9;
font-weight: 400;
}

.foot__nav a {
display: block;
font-size: 14px;
line-height: 2.4;
font-weight: 400;
}
.foot__nav a:hover {
color: #fff;
}
.foot__lab {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 332px;
margin-top: 40px;
padding: 20px 24px;
background-color: #fff;
border: 1px solid rgba(255, 255, 255, 0.28);
}
.foot__lab .logo {
width: 169px;
height: 39px;
}
.foot__lab .arw {
width: 16px;
height: 16px;
}
.foot__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
font-size: 12px;
font-weight: 400;
}

/* ==========================================================================
レスポンシブ
========================================================================== */
@media (max-width: 1460px) {
.about__grid {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
}
.tech__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 48px;
}
.tech__fig img {
    width: 100%;
    max-width: 100%;
	pointer-events: none;
}
.prod__lead {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}
.media__list {
    margin-left: 12%;
    width: 88%;
}

.company__panel {
    margin: 48px 0 0;
    padding: 32px 24px;
    margin-right: 0;
}

.dl__row {
    grid-template-columns: 168px minmax(0, 1fr);
}
.recruit__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
}
.recruit__fig img {
    width: 100%;
}
}
@media (max-width: 1096px) {
:root {
    --pad-l: 120px;
    --pad-s: 96px;
}
.nav__links {
    display: none;
}
.nav__burger {
    display: block;
}

.hero__text.wrap {
    width: 100vw
}

.hero__copy {
    left: 20px;
    bottom: 56px;
}

.hero__copy_line {
    display: block;
}

.about__grid,
.tech__grid,
.prod__lead,
.recruit__grid {
    grid-template-columns: 1fr;
    gap: 32px;
}

.about__txt,
.recruit__fig {
    padding-top: 0;
}
.about .sec__h {
    margin-top: 48px;
}
.tech__object {
    width: auto;
    max-width: 100%;
    margin-top: 48px;
}
.media__photo img {
    width: 100%;
}
.media__titlebox {
    position: static;
    padding: 24px 0 0;
    background: none;
}
.media__list {
    width: 100%;
    margin-left: 0;
    padding: 24px 0 0;
}

.company__h {
    font-size: 24px
}
.contact {
    justify-content: flex-end;
    padding: 96px 0;
}
.contact__photo {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
}
.contact__en {
    font-size: 56px;
}
.contact__line {
    width: 8px;
}
.contact__line--l {
    left: 8px;
}
.contact__line--r {
    right: 8px;
}
.contact__arrow {
    position: static;
    margin-top: 32px;
}

.foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.foot__addr {
    grid-template-columns: 1fr;
}

.nav {
    height: 58px;
}

.nav__links {
    display:flex;
    flex-direction: column;
    position:absolute;
    top:62px;
    left:0;
    right:0;
    align-items: stretch;
    gap:0;
    padding:16px 22px;
    margin-right: 0;
    background:#fff;
    box-shadow: 3px 6px 10px rgba(0, 0, 0, .1);
    border-radius: 5px;
    transition: opacity .4s, transform .4s
}

.nav__links:not([data-open="1"]) {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

/* スマホメニュー：言語切替をメニュー内の末尾に表示 */
.nav__links .nav__lang {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.nav__links .nav__lang a {
    height: auto;
    padding: 6px 12px;
}

.nav__links a {
    display: inline-flex;
    align-items: center;
    height: 48px;
}

.nav__links[data-open="1"] a,
.nav__links[data-open="1"] .nav__lang {
    animation: menu .4s ease both
}

.nav__links[data-open="1"] a:first-child {
    animation-delay: .3s;
}
.nav__links[data-open="1"] a:nth-child(2) {
    animation-delay: .32s;
}
.nav__links[data-open="1"] a:nth-child(3) {
    animation-delay: .34s;
}
.nav__links[data-open="1"] a:nth-child(4) {
    animation-delay: .36s;
}
.nav__links[data-open="1"] a:nth-child(5) {
    animation-delay: .38s;
}
.nav__links[data-open="1"] a:nth-child(6) {
    animation-delay: .40s;
}
.nav__links[data-open="1"] a:nth-child(7) {
    animation-delay: .42s;
}
.nav__links[data-open="1"] a:nth-child(8) {
    animation-delay: .44s;
}

.nav__links[data-open="1"] .nav__lang {
    animation-delay: .46s;
}

@keyframes menu {
    0% {
        transform: translateX(10px);
        opacity: 0;
    }

    100% {
        transform: translateX(-0);
        opacity: 1;
    }
}

.prod__card {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 24px;
}
.prod__card .prod__img img {
    width: 100%;
}
.dl__row {
    grid-template-columns: 1fr;
    gap: 6px;
}

}
@media (max-width: 640px) {

.media__more,
.info__more,
.recruit__more {
    justify-content: stretch;
}
.foot__top {
    grid-template-columns: 1fr;
}
.foot__lab {
    width: 100%;
}
}

/* ==========================================================================
英語版（/en）の調整：英文はやや長いためヒーローの見出しを縮小
========================================================================== */
.hero__copy:lang(en) {
font-size: clamp(30px, 4.4vw, 64px);
line-height: 1.25;
}

/* ==========================================================================
下層ページ（お問い合わせ・プライバシーポリシー）
--------------------------------------------------------------------------
・見出し・罫線はトップと同じ .sec / .sec__en / .sec__ja を使用
・.sec--page はページ先頭のセクション（固定ヘッダーの分だけ上余白を確保）
========================================================================== */
.sec--page {
--page-top: 180px;
--page-bottom: 160px;
padding-top: var(--page-top);
padding-bottom: var(--page-bottom);
}
.sec--page .wrap:before,
.sec--page .wrap:after {
top: calc(var(--page-top) * -1);
height: calc(100% + var(--page-top) + var(--page-bottom));
}
.foot__bottom a[aria-current="page"] {
color: #fff;
}

/* 見出しのフェードイン（画面に入ったら左から40pxスライド。JS有効時のみ隠す） */
html.js .js-reveal {
opacity: 0;
transform: translateX(-40px);
transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
html.js .js-reveal.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html.js .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}
}

/* ---------- お問い合わせフォーム ---------- */
.cform__lead {
margin-top: 72px;
}
.cform__lead .req {
color: var(--error);
font-weight: 500;
}
.cform__panel {
margin-top: 48px;
padding: 56px 86px;
background: var(--white);
}
.cform__row {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 32px;
padding: 24px 0;
border-bottom: 1px solid #dcdcdc88;
}
.cform__row:first-child {
padding-top: 0;
}
.cform__label {
padding-top: 12px;
color: var(--blue);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
.cform__label .req {
margin-left: 4px;
color: var(--error);
}
.cform__input {
display: block;
width: 100%;
padding: 12px 16px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 0;
outline: none;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
transition: border-color 0.2s, background 0.2s;
}
.cform__input:focus {
border-color: var(--blue);
background: #fff;
}
textarea.cform__input {
min-height: 220px;
resize: vertical;
}
.cform__input[aria-invalid="true"] {
border-color: var(--error);
}
.cform__err {
display: none;
margin-top: 6px;
font-size: 13px;
line-height: 1.5;
color: var(--error);
}
.cform__field.is-error .cform__err {
display: block;
}
.cform__agree {
display: flex;
justify-content: center;
margin-top: 48px;
}
.cform__agree label {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
cursor: pointer;
}
.cform__agree input {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--blue);
}
.cform__agree a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 3px;
}
.cform__agree-err {
display: none;
margin-top: 6px;
text-align: center;
font-size: 13px;
color: var(--error);
}
.cform__agree-wrap.is-error .cform__agree-err {
display: block;
}
.cform__submit {
display: flex;
justify-content: center;
margin-top: 40px;
}
button.btn-g {
border: 0;
cursor: pointer;
}
.btn-g:disabled {
opacity: 0.6;
cursor: default;
filter: none;
}
.cform__msg {
display: none;
margin-top: 48px;
padding: 48px;
background: var(--white);
text-align: center;
}
.cform__msg.is-show {
display: block;
}
.cform__msg--done p:first-child {
font-size: 18px;
font-weight: 500;
color: var(--blue);
}
.cform__msg--fail {
padding: 24px;
background: #fcecec;
color: var(--error);
}

/* ---------- プライバシーポリシー（左に条見出し・右に本文の2列） ---------- */
.pp__intro {
margin-top: 72px;
}
.pp__list {
margin-top: 40px;
border-top: 1px solid var(--rule);
}
.pp__art {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 32px 0;
border-bottom: 1px solid var(--rule);
}
.pp__h {
display: flex;
align-items: center;
gap: 8px;
width: 33%;
font-family: var(--gothic);
font-size: 16px;
font-weight: 500;
line-height: 2;
color: var(--text);
}
.pp__h::before {
content: "";
flex: none;
width: 8px;
height: 16px;
background: linear-gradient(180deg, var(--blue-dark), var(--teal));
}
.pp__h:lang(en) {
align-items: flex-start;
}
.pp__h:lang(en)::before {
margin-top: 10px;
}
.pp__body {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.pp__body strong {
font-weight: 500;
}
.pp__ol {
margin: 0;
padding-left: 24px;
list-style: decimal;
}
.pp__ol .pp__ol {
margin-bottom: 40px;
list-style: lower-roman;
}
.pp__body a {
color: var(--blue);
text-decoration: underline;
overflow-wrap: anywhere;
}
.pp__dates {
width: fit-content;
margin: 40px 0 0 auto;
}

@media (max-width: 991px) {
.sec--page {
    --page-top: 140px;
    --page-bottom: 120px;
}
.cform__lead,
.pp__intro {
    margin-top: 48px;
}
.cform__panel {
    padding: 32px 24px;
}
.cform__row {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
}
.pp__art {
    flex-direction: column;
    gap: 16px;
}
.pp__h {
    width: 100%;
}
.pp__h::before {
    height: 22px;
}
}
@media (max-width: 640px) {
.cform__row {
    grid-template-columns: 1fr;
    gap: 8px;
}
.cform__label {
    padding-top: 0;
}
.cform__msg {
    padding: 32px 20px;
}
.cform__submit {
    justify-content: stretch;
}
.cform__submit .btn-g {
    width: 100%;
}
}
@media (max-width: 540px) {
    [lang="ja"] .hero__copy {
        max-width: 320px
    }

    .hero__copy_line {
        display: inline;
    }
}