@charset "utf-8";

/* ========== Base ========== */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body{
  /* font-family:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; */
  color:#333; font-size:1rem; line-height:1.85;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%; word-wrap:break-word;
}
img, video { width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:#333; text-decoration:none; outline:none; }

:root {
  --ff-mincho-zen: "Zen Old Mincho",
    "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
    "MS P明朝", "MS 明朝", serif;
}
html {font-family: var(--ff-mincho-zen);}
body{ line-height: 1.8;letter-spacing: 0.02em;font-weight: 400;}
h1,h2,h3{ font-weight: 700; }

/* #splash-logo,
.top-lead,
h1,h2,h3 span,
#g-nav,#pc-nav,.openbtn,#footer{
  font-family:'Lato', sans-serif; letter-spacing:.1em;

} */
 #splash-logo,
.top-lead,
h1, h2, h3,
#g-nav, #pc-nav, .openbtn, #footer {
  font-family: var(--ff-mincho-zen);
}
#splash-logo{
    color: #243263;
        font-size: 1.5em;
}

/* ========== Utilities ========== */
.pb20{ padding-bottom:20px; }
.mt100{ padding-top:100px; }
.mt-60{ margin-top:-60px; }

/* ========== Header / Nav ========== */
#header{
  position:fixed; z-index:999; width:100%; height:150px;
  display:flex; justify-content:right; align-items:center;
  /* background-image:url(../img/header_bg.png); background-position:center; */
  background-color:#3f647c;
}
h1{
  position:absolute; top:25%; left:2%;
  text-transform:uppercase; font-size:1.5rem; line-height:1;
  letter-spacing:.2em; width:400px; height:70px;
}
h1 a{ color:#eb6100; }

#pc-nav span.bgLRextend::before{ background:#243263; }
#pc-nav li:nth-of-type(5){ width:295px; padding:0 1.5em; }
#pc-nav li:nth-of-type(6){ width:280px; }
nav#pc-nav{ padding-right:3em; }
#pc-nav ul{
  display:flex; justify-content:center; align-items:center;
  text-transform:uppercase; margin:0 0 0 5%;font-weight: 700;
}
#pc-nav li a{ color:#fff; padding:0 15px; transition:.3s; }
#pc-nav li.current a, #pc-nav li a:hover{ color:rgb(219,176,77); }

/* ハンバーガー */
/* 画面全体の半透明オーバーレイ */
.menu-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9998;
}

/* 右から出るドロワー */
#g-nav{
  position: fixed; top:0; right:0;
  width: 90%; max-width: 420px; height: 100%;
  background:#fff; z-index:9999;
  transform: translateX(100%); transition: transform .28s ease;
 box-shadow: -6px 0 18px rgba(0,0,0,.2); 
  overflow-y:auto; will-change: transform;
}
#g-nav.is-active{ transform: translateX(0); }

/* オーバーレイ */
.menu-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:9998;
}
.menu-overlay.is-active{ opacity:1; pointer-events:auto; }

.drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  font-size: 2.8em;
  line-height: 1;
  border: none;
  background: transparent;
  color: #2c1f82; 
  cursor: pointer;
  z-index: 10001;    /* 中身より前面に */
}
/* PC幅ではドロワー自体を表示しない */
#g-nav {
  display: none;
}

/* 電話番号画像 */
#g-nav li img[alt*="0000"] {
  width: 220px;   /* ←好みで調整 */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto 8px;
}

/* お問い合わせボタン画像 */
#g-nav li img[alt*="お問い合わせ"] {
  width: 260px;   /* ←好みで調整 */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}
#g-nav li.menu-tel {
  position: relative;
  margin-top: 60px;
  padding-top: 20px;
  text-align: center;
}

/* 短めの飾り線 */
#g-nav li.menu-tel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;       /* 左右25%余白 → 真ん中50%に線 */
  right: 5%;
  height: 1px;
  background: #243263; 
  opacity: 0.6;      
}

/* 電話番号画像 */
#g-nav li.menu-tel img {
  width: 220px;   /* 好きな大きさに調整 */
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  #g-nav {
    display: block;
    transform: translateX(100%); /* 初期は画面外 */
  }
}
/* .drawer-close:focus {
  outline: 2px solid #243263; 
} */


/* ========== Hero ========== */
#top-main{ width:100%; height:auto; position:relative; padding-top:150px; }

/* ========== Typo / Headings ========== */
h2{ text-transform:uppercase; font-size:3rem; }
.top-lead{
  position:fixed; bottom:10%; left:5%; font-size:3rem;
  text-transform:uppercase; font-weight:bold; line-height:1.5;
}
.top-lead span.bgLRextend::before{ background:#333; }

/* ========== Sections / Layout ========== */
#main-area{ width:100%; margin:0 auto; }
section#works{ margin-top:80px; }
section#works h4{ font-size:30px; padding-bottom:20px; }
section#Message{ background:#efefef; padding-top: 2em;}

.boxs{ display:flex; flex-direction:column; gap:20px; }
.centerbox{ position:relative; padding:2em; max-width:580px; z-index: 99;} 
.inner{ display:flex; align-items:flex-end; justify-content:center; }
.inner-2{
  display:flex; justify-content:center; align-items:flex-end;
  margin-top:6em; background:#f7f7f7; position:relative; padding:40px 0 60px;
}
.centerbox2{ max-width:580px; padding:30px 1rem 0 60px; position:relative; }

/* PC用ビジュアル */
.rightbox{ position:absolute; right:50px; }
.rightbox img{ width:580px; }
.leftbox{ position:absolute; top:-50px; left:0; }
.leftbox img{ width:580px; }

/* SP用ビジュアル（初期は非表示、ブレークで表示） */
.rightbox_sp, .leftbox_sp{ display:none; }

/* 小見出しアイコン */
.mini-ttl01,.mini-ttl02 img{ width:23px; }
.mini-ttl04 img{ width:44px; }
.mini-ttl01{ position:absolute; right:0; top:-40px; }
.mini-ttl02,.mini-ttl04{ position:absolute; top:0; left:0; }



.midashi_title{
  font-size:115px; background:#fff;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:5px; padding:.5em 0 0 .5em;
}
.midashi_title span{ font-size:20px; padding-left:20px; }

.underline{ position:relative; padding-bottom:1em; }
.underline::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#728b9f; }

/* ========== 縦書き（PC） ========== */
.tategaki, .tategaki_2{
  writing-mode:vertical-rl; text-orientation:mixed; line-height:1.9;
  max-height:650px; margin:0 auto;
}
.tategaki{ padding:1.5em; margin-top: 2em;}
.tategaki_2{ padding:0 0 120px; }
.tategaki .latin, .tategaki :lang(en),
.tategaki_2 .latin, .tategaki_2 :lang(en){ text-orientation:upright; }
.tategaki p, .tategaki_2 p{ margin:0 0 1.5em 0; padding-left: 2em;padding-right: 1em;}
.tategaki_2 p{ padding-right:30px; }
.end{ text-align:end; }

/* ========== Recruit（アコーディオン中の定義リスト） ========== */
.box dl{ padding-inline:3em 2em; }
.box :is(ul, dd){ padding-inline-start:2em; padding-block-end:2em; }
.box dl > dd > ul{ padding-block-end:0; margin-block-end:0; }
.box dt{ padding-block-end:1em; }

/* ddの一部をもう少しインデント（PC） */
.box dl > dd:nth-of-type(2),
.box dl > dd:nth-of-type(4),
.box dl > dd:nth-of-type(5),
.box dl > dd:nth-of-type(6),
.box dl > dd:nth-of-type(7),
.box dl > dd:nth-of-type(10){ padding-inline-start:4em; }

section#recruit{ margin-bottom:6em; }

/* ========== Company（背景/定義リスト） ========== */
.bg-deep-blue{ background:linear-gradient(180deg,#71899b 0%,#3f647c 45%,#1f4963 100%);font-weight: 700; }
:root{
  --grad-top:#71899b; --grad-mid:#3f647c; --grad-btm:#1f4963;
  --text:#eef3f7; --muted:#cfd9e1; --accent:#dfe7ee;
  --dt-w:10.5em; --max:760px;
}
/* .company-dl{ max-width:760px; margin:0 auto; padding-top:2em; } */
.company-dl{
  max-width: 760px;
  margin-inline: auto;
  padding-block: 2em 0;                     /* 上 2em / 下 0 */
  padding-inline: clamp(1rem, 4vw, 2em);    /* 画面幅に応じて左右が 16px〜2em */
}
.company-dl dt{ color:var(--accent); font-weight:700; letter-spacing:.06em; padding-bottom:1em; }
.company-dl dd{ margin:0; color:var(--accent); padding-bottom:2em; }

/* 業務一覧 */
.company-dl dd.biz{ line-height:1.9; color:#eef3f7; padding-inline-start:.5rem;padding-right: .5em; }
.company-dl dd.biz .label{
  display:block; margin:2rem 0 .35rem; padding:.25rem .65rem;
  font-weight:700; letter-spacing:.03em; color:#fff;
  border-left:4px solid rgba(255,255,255,.65); border-radius:4px;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,0) 65%);
}
.company-dl dd.biz .label:first-child{ margin-top:0; }
.company-dl dd.biz .label + *{ display:inline; }
.company-dl dd.biz .label + *::after{ content:""; display:block; height:.6rem; }
dl.company-dl a{ color:#fff; }
.company-dl > dd:last-of-type{ padding-block-end:3rem; }

/* Map */
.map{ margin-top:50px; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.12); background:#0f2533; }
.map iframe{ width:100%; aspect-ratio:16/9; border:0; }

/* ========== Footer ========== */
/* ===== Footer tidy ===== */
#footer{
  padding:100px 50px 0;
  position:relative;
  border-top:1px solid #fff;
  text-transform:uppercase;
  background-color: #3f647c;
  /* background:#fff url("../img/footer_bg.webp") center/cover no-repeat; */
  display:grid;            
  place-items:center;      
  text-align:center;
}
footer#footer p{ padding-bottom:2em; margin:0; }
#footer small{ color:#888; }

/* 画像ロゴ */
.footer_logo{
  width:160px;
  margin:0 auto!important;
}
.footer_logo img{
  display:block;
  width:100%;    
  height:auto;
}

/* ハイフン版を使っている場合の見た目（テキスト／画像どちらにも対応） */
#footer .footer-logo{
  font-weight:bold;
  letter-spacing:.3em;
  margin:0 0 50px;
  color:#666;
}
#footer .footer-logo img{
  display:block;
  width:160px;
  height:auto;
}

/* 電話・お問い合わせ画像 */
.footer_tel img{ width:295px; height:auto; display:block; }
.footer_contact img{ width:280px; height:auto; display:block; }



/* ========== SPメニュー：区切り線（4→5の間） ========== */
#g-nav-list li:nth-child(5){
  border-top:1px solid rgba(24,42,102,.35);
  margin-top:20px; padding-top:20px;
}
div#g-nav-list a img{ width:200px; }

/* ========== Responsive ========== */
/* <=1024px（タブレット以下） */
@media (max-width:1024px){
  #header{ height:80px; }
  #pc-nav{ display:none; }
  .openbtn{ display:block; }

  h1{ max-width: 250px;height: auto;top: 20%; }
  #top-main{ padding-top:80px; height:auto; }


  .midashi_title{ font-size:2.5rem; }
  .midashi_title span{ font-size:.3em; padding-left:.2em; }

  /* PC用ビジュアルは消す */
  .rightbox, .leftbox{ display:none; }
  /* SP用ビジュアルは表示 */
  .rightbox_sp, .leftbox_sp{ display:block; }
  .rightbox_sp{ padding:2em 0 2em 10em; z-index:9; }
  .leftbox_sp{ padding:2em 10em 2em 0; margin-top:-135px; }

  .mini-ttl01,.mini-ttl02,.mini-ttl04{ display:none; }


  .inner, .inner-2{ flex-direction:column; align-items:center; justify-content:center; }
  .centerbox2{ padding-bottom:30px; padding-left:0; }
  .centerbox{ max-width:580px; }
  .centerbox2{ position:relative; padding:2em; }

  /* 縦書きを横書きに戻す */
  .tategaki, .tategaki_2{
    writing-mode:horizontal-tb; text-orientation:initial; height:auto; overflow:visible;
    line-height:1.8; letter-spacing:normal; word-break:normal; text-align:justify;
  }
  /* .tategaki{ padding-bottom:0; padding-left: 0;}
  .tategaki_2{ padding:1.5em;padding-left: 0; } */
  .tategaki{ padding-bottom:0; padding-left: 0; }
.tategaki_2{ padding:1.5em; padding-left: 0; }

  .tategaki .tcy{ text-combine-upright:none; }
  .tategaki .latin, .tategaki :lang(en){ text-orientation:initial; }
  

  /* section調整 */
  #top-main{ height:auto; }
  #works{ margin-top:40px !important; }

  /* SPメニュー位置 */
  #g-nav ul{
    position:absolute; z-index:999;
    top:45%; left:50%; transform:translate(-50%,-50%);
  }
  section#works h4 {
    font-size: 2em;
    padding-bottom: .2em;
}
}

/* >=1024px（PC）— SP専用要素は隠す */
@media (min-width:1024px){
  .rightbox_sp, .leftbox_sp{ display:none; }
}

/* <=768px（スマホ中） */
@media (max-width:768px){
  body{ font-size:.8rem; }

  .top-lead{ font-size:2.2rem; }
  h2{ font-size:2rem; }
}

/* <=550px（スマホ小） */
@media (max-width:550px){
  /* h1{ font-size:1.2rem; top:32%; } */
  .top-lead{ font-size:1.8rem; }

  section#recruit{ margin-bottom:3rem; padding:1em; }
  .company-dl{ padding:1em; }

  .box dl{ padding-inline:1em 1em; }
  .box dl > dd:nth-of-type(2),
  .box dl > dd:nth-of-type(4),
  .box dl > dd:nth-of-type(5),
  .box dl > dd:nth-of-type(6),
  .box dl > dd:nth-of-type(7),
  .box dl > dd:nth-of-type(10){ padding-inline-start:2em; }
  .box :is(ul, dd){ padding-inline-start:1em; padding-block-end:2em; }

  .leftbox_sp{ padding:2em 5em 2em 0; margin-top:-8rem; }
  .rightbox_sp{ padding:2em 0 2em 5em; z-index:9; }
  #footer {padding: 3em 50px 0;}
}
/* --- PC幅(>=1025px)ではドロワーとオーバーレイを完全に隠す --- */
@media (min-width: 1025px) {
  #g-nav { 
    display: none !important;
    transform: none !important; /* 念のため */
  }
  .menu-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .openbtn {
    display: none !important;  /* PCでハンバーガーも消す */
  }
}

/* --- SP/タブレットだけドロワー有効化（必要なら） --- */
@media (max-width: 1024px) {
  #g-nav {
    display: block;                  /* ここで初めて表示対象に */
    position: fixed; top: 0; right: 0;
    width: 80%; max-width: 420px; height: 100%;
    background: #fff; z-index: 9999;
    transform: translateX(100%);     /* 初期は画面外 */
    transition: transform .28s ease;
    overflow-y: auto; will-change: transform;
    box-shadow: -6px 0 18px rgba(0,0,0,.2);
  }
  #g-nav.is-active { transform: translateX(0); }

  .menu-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease; z-index: 9998;
    display: block; /* SP時は生かす */
  }
  .menu-overlay.is-active { opacity: 1; pointer-events: auto; }

  .openbtn { display: block; }
}
.drawer-close {
  outline: none !important;
  box-shadow: none !important;
}
/* 画面全体の縦スクロールバーを非表示（スクロール自体は可能） */
html, body {
  overflow-y: auto;
}

/* Firefox 用 */
html { scrollbar-width: none; }

/* Chrome / Safari / Edge (WebKit/Blink) 用 */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/*
  Android Chrome で"スクロール不能"になる事例があるため、
  ここは none をやめて通常挙動に戻す。
*/
html, body { overscroll-behavior-y: auto; }

/* モバイルのスクロール安定化（特に Android） */
html, body {
  -webkit-overflow-scrolling: touch;
  min-height: 100%;
}

/* スクロールロックは body のみ（誤爆防止） */
body.drawer-locked { overflow: hidden; }
@media (max-width:375px){
  .tategaki_2 {
    margin-top: 100px;

  }
}

.tategaki_2 {
  position: relative;
  z-index: 1;
}
.accordion-box {
  position: relative;
  z-index: 2;
}

  /* PC/タブレット：右上20% */
.hero-text.right {
  position: absolute;
  top: 20%;
  right: 3%;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
}

/* 縦書き3列（右→左に並ぶ） */
.typewriter.vertical-lines {
  display: flex;
  flex-direction: row-reverse;
  gap: clamp(12px, 1.8vw, 24px);
  font-size: clamp(22px, 3.5vw, 42px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,.35), 0 0 2px rgba(0,0,0,.6);
}

/* 各列 */
.typewriter.vertical-lines .line {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: pre;
  padding-inline-end: .45em;
  position: relative;
}

/* 疑似要素で罫線 */
.typewriter.vertical-lines .line::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 0;
  background-color: rgba(255,255,255,.9);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 全行終わったら罫線アニメ */
.typewriter.vertical-lines.line-done .line::after {
  opacity: 1;
  animation: lineGrow 0.8s ease forwards;
}

@keyframes lineGrow {
  from { height: 0; }
  to   { height: 100%; }
}

/* スマホ：右上配置（フォントだけ大きめ） */
@media (max-width: 768px) {
  .hero-text.right {
    top: 15%;   /* スマホ時は少し上寄せ */
    right: 5%;
    transform: none; /* 中央寄せ解除 */
    justify-content: flex-end;
  }

  .typewriter.vertical-lines {
    gap: 12px;
    font-size: clamp(24px, 7vw, 32px); /* ←大きめ */
  }

  .typewriter.vertical-lines .line::after {
    width: 1.5px;
  }
}

/* 汎用：アニメ対象の描画最適化 */
.ani-gpu {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0); /* iOSのちらつき抑制 */
}

/* フェード系の初期状態（左/右/上） */
.fadeRightTrigger,
.fadeLeftTrigger,
.fadeUpTrigger,
.flipLeftTrigger {
  opacity: 0;
  transition: transform .7s ease, opacity .7s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 方向ごとの初期オフセットは transform に寄せる（left/right操作は使わない）*/
.fadeRightTrigger   { transform: translate3d(30px, 0, 0); }
.fadeLeftTrigger    { transform: translate3d(-30px, 0, 0); }
.fadeUpTrigger      { transform: translate3d(0, 30px, 0); }
/* flipLeft は “回転＋透明” ではなく、まず透明→transform で軽く回す程度に */
.flipLeftTrigger    { transform: translate3d(-30px, 0, 0) rotate(-2deg); }

/* 表示時（IOで .is-show を付与してるので既存JSのままOK）*/
.is-show {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* スライド内の画像も再描画を抑える */
.fadeRightTrigger img,
.fadeLeftTrigger img,
.fadeUpTrigger img,
.flipLeftTrigger img,
.message-slider img {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ペイント領域を閉じて再描画の波及を防ぐ（対応ブラウザで効く）*/
.fadeRightTrigger,
.fadeLeftTrigger,
.fadeUpTrigger,
.flipLeftTrigger,
.message-slider {
  contain: layout style paint;
}

/* iOSでの“点滅”をさらに抑える（テキスト影が重いとき）*/
.hero-text *,
.tategaki *,
.tategaki_2 * {
  -webkit-font-smoothing: antialiased;
}

/* ユーザー設定を尊重：動きを軽く */
@media (prefers-reduced-motion: reduce) {
  .fadeRightTrigger,
  .fadeLeftTrigger,
  .fadeUpTrigger,
  .flipLeftTrigger,
  .is-show {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== グラデ見出し：下からふわっと ===== */
.gradient-title{
  display:inline-flex;
  gap:.5em;
  align-items:baseline;
  font-weight:700;
  overflow:hidden;

  /* グラデ文字（ここに集約） */
  background: linear-gradient(90deg, #2c1f82, #170b02);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 既存デザインから必要な見た目を移植 */
  letter-spacing: 5px;
  padding-left: 2em;
  font-size: clamp(2rem, 6vw, 115px);
}

/* 初期は表示（JSが無くても見える） */
.gradient-title span{
  display:inline-block;
  transform: none;
  opacity: 1;
  transition: transform .8s ease, opacity .8s ease;
  will-change: transform, opacity;
  padding-left: .1em;
}
/* JS準備後：一旦隠す（JSが .is-prep を付ける） */
.gradient-title.is-prep span{
  transform: translateY(100%);
  opacity: 0;
}

/* 発火：下からふわっと */
.gradient-title.is-show span{
  transform: translateY(0);
  opacity: 1;
}

/* 和文に少し“間”を足す */
.gradient-title.is-show .ja{ transition-delay: .25s; }

/* 親にも子にも同じグラデ指定（描画のズレを防ぐ） */
.gradient-title,
.gradient-title span {
  background: linear-gradient(90deg, #2c1f82, #170b02);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== gradient-title：見た目 + アニメ を1か所に集約 ===== */
.gradient-title{
  /* 表示・レイアウト */
  display: inline-flex;
  gap: .5em;
  align-items: baseline;
  overflow: hidden;

  /* タイポ（見た目） */
  font-weight: 700;
  letter-spacing: 5px;
  padding-left: 90px;

  /* サイズ（旧デザイン相当） */
  font-size: clamp(2rem, 6vw, 115px);
}

/* グラデ文字：親と子に同じ指定（描画ズレ対策） */
.gradient-title,
.gradient-title span{
  background: linear-gradient(90deg, #2c1f82, #170b02);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 子spanの調整（必要なら） */
.gradient-title span{
  display: inline-block;
  padding-left: .5em;
  transition: transform .8s ease, opacity .8s ease;
  will-change: transform, opacity;
}

/* アニメの初期/表示 */
.gradient-title.is-prep span{ transform: translateY(100%); opacity: 0; }
.gradient-title.is-show span{ transform: translateY(0);    opacity: 1; }
.gradient-title.is-show .ja{ transition-delay: .25s; }

/* レスポンシブ微調整（任意） */
@media (max-width: 768px){
  .gradient-title{
    font-size: clamp(1.8rem, 7vw, 3rem);
    padding-left: 40px;
    letter-spacing: 0.12em;
  }
}

/* 動きを最小化 */
@media (prefers-reduced-motion: reduce){
  .gradient-title span{ transition: none; transform: none; opacity: 1; }
}

/* ===== gradient-title サイズ修正 ===== */
.gradient-title {
  font-size: clamp(2rem, 6vw, 115px) !important;
}

/* .gradient-title span {
  font-size: inherit !important;
} */
.gradient-title .ja {
  font-size: .3em;
  padding-left: .5em;
}

/* ===== gradient-title：見出し共通 ===== */
.gradient-title {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  font-weight: 700;
  letter-spacing: 5px;
  font-size: clamp(2rem, 6vw, 115px);
  overflow: hidden;
  padding-left:0;
}

.recruit_btn {
    max-width: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 3em 0 0;
}

@media (max-width: 768px){
  .recruit_btn {
    max-width: 300px;
}
}


/* ============================================================
   PC(1800px〜1024px) 崩れ対策パッチ（2026-02-02）
   - ヘッダー高さを可変に
   - ロゴ(h1)をabsolute→通常フローへ戻し、PCナビと重なり防止
   - #top-main のオフセットをヘッダー高さに追従
   - サイドビジュアル/見出しを可変スケール化
   ============================================================ */

:root{
  --header-h: clamp(80px, 7vw, 150px);
}

/* PC幅でのヘッダー再レイアウト（SPは既存@mediaが優先） */
@media (min-width: 1025px){
  #header{
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(12px, 2vw, 32px);
  }

  /* ロゴ：absoluteを解除してレイアウトに参加させる */
  #header h1{
    position: static;
    width: clamp(240px, 28vw, 420px);
    height: auto;
    margin: 0;
    letter-spacing: .12em;
  }
  #header h1 img{
    width: 100%;
    height: auto;
  }

  /* PCナビ：右寄せ＆幅の食い過ぎを抑える */
  nav#pc-nav{ padding-right: 0; }
  #pc-nav{ margin-left: auto; }
  #pc-nav ul{
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(6px, 1vw, 14px);
  }

  /* 電話/お問い合わせ：固定幅→可変 */
  #pc-nav li:nth-of-type(5){ width: clamp(200px, 18vw, 295px); padding: 0; }
  #pc-nav li:nth-of-type(6){ width: clamp(200px, 18vw, 280px); }

  /* ヒーローの押し下げ：ヘッダー高さに追従 */
  #top-main{ padding-top: var(--header-h); }

  /* 既存：PC用ビジュアルの固定幅を可変に */
  .rightbox img,
  .leftbox img{
    width: clamp(260px, 38vw, 580px);
    height: auto;
  }
  .rightbox{ right: clamp(0px, 2.5vw, 50px); z-index: 1; }
  .leftbox{ top: clamp(-50px, -3vw, -20px); left: 0; z-index: 1; }
  .centerbox,
  .centerbox2{ z-index: 2; }
  .centerbox2{ padding-left: clamp(0px, 3vw, 60px); }

  /* midashi_title を使っている箇所向け：固定115px→可変 */
  .midashi_title{
    font-size: clamp(44px, 6vw, 115px);
    letter-spacing: clamp(2px, 0.35vw, 5px);
  }
  .midashi_title span{
    font-size: clamp(14px, 1.2vw, 20px);
    padding-left: clamp(8px, 1.2vw, 20px);
  }
}

/* ============================================================
   WORKSだけ：1024〜1800pxでも“<=1024(=SP/Tablet)”レイアウトを強制
   - 1024〜1800の間で #works が崩れるため、セクション内だけ1カラム化
   - ヘッダー/他セクションへ影響させない
   ============================================================ */
@media (min-width:1024px) and (max-width:1800px){

  /* mini-ttl（01/飲食事業などの画像）が残って被るので、WORKS内だけ非表示 */
  section#works .mini-ttl01,
  section#works .mini-ttl02,
  section#works p.mini-ttl01,
  section#works p.mini-ttl02{
    display: none !important;
  }


  /* 2カラム→1カラム（画像被りを根絶） */
  section#works .inner,
  section#works .inner-2{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* PC用のabsolute画像はWORKS内だけ消す */
  section#works .rightbox,
  section#works .leftbox{
    display: none !important;
  }

  /* SP用ビジュアルをWORKS内だけ出す（フローに乗せる） */
  section#works .rightbox_sp,
  section#works .leftbox_sp{
    display: block !important;
  }
  section#works .rightbox_sp{ padding:2em 0 2em 10em; z-index:9; }
  section#works .leftbox_sp{ padding:2em 10em 2em 0; margin-top:-135px; }

  /* 見出しサイズも“SP側”に寄せる */
  section#works .midashi_title{ font-size:2.5rem !important; }
  section#works .midashi_title span{
    font-size: .3em !important;
    padding-left: .2em !important;
  }

  /* テキスト枠（SP側の値に寄せる） */
  section#works .centerbox{ max-width:580px !important; }
  section#works .centerbox2{
    max-width:580px !important;
    position: relative !important;
    padding: 2em !important;
    padding-bottom: 30px !important;
    padding-left: 0 !important;
  }

  /* 縦書きを横書きに戻す（WORKS内だけ） */
  section#works .tategaki,
  section#works .tategaki_2{
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
    height: auto !important;
    overflow: visible !important;
    line-height: 1.8 !important;
    letter-spacing: normal !important;
    word-break: normal !important;
    text-align: justify !important;
  }
  section#works .tategaki{ padding-bottom:0 !important; padding-left:0 !important; }
  section#works .tategaki_2{ padding:1.5em !important; padding-left:0 !important; }

  /* 余白もSP側に寄せる */
  section#works{ margin-top:40px !important; }
  section#works h4{ font-size:2em !important; padding-bottom:.2em !important; }


  /* WORKS内の mini-ttl は 1024〜1800px では非表示にする（残骸対策） */
  section#works [class^="mini-ttl"],
  section#works [class*=" mini-ttl"]{
    display: none !important;
  }
}