/* =============================================
   変数（統合）
============================================= */
:root {
  --duux-nav-height: 56px;                /* 必要ならJSで上書き */
  --bg-shift-y: 0%;                      /* 背景の縦微調整（+で下/ -で上） */
  --gap-under-hero: clamp(0rem, 2vw, 2rem); /* ヒーロー下の余白 */
  --duux-gray: #868686;
  --text: #666;
  --heading: #4d4d4d;
  --link: #111;
  --link-hover: #aaa;
}

/* =============================================
   基本
============================================= */
html { overflow-y: scroll; overflow-x: hidden; }
body {
  background:#fff;
  font: 400 14px/1.8 "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
iframe { border: 0; }

/* タイポ */
h1, h2, h3, h4 { text-align: center; color: var(--heading); margin: 0 0 .6em; }
h1 { font-size: 2rem; font-weight: 600; }
h2 { font-size: 1.75rem; font-weight: 600; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; font-weight: 550; }

p { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* レイアウトユーティリティ（最小限） */
.text-left { text-align: left; }
.text-center { text-align: center; }
.bold { font-weight: 700; }
.underline { text-decoration: underline; text-underline-offset: .125em; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.align-items-center { align-items: center; }
.align-self-center { align-self: center; }
.full-height { min-height: 100%; }
.full-vh { min-height: 100vh; }
.col-center { display:flex; justify-content:center; align-items:center; }
img.center { display:block; margin-inline:auto; }

/* セクション */
section { margin: 50px 0 100px; padding: 50px 0 100px; }
section[id] { scroll-margin-top: 60px; }

/* スマホ文字サイズ微調整 */
@media (max-width: 576px) {
  body { font-size: 13px; }
  h1, h2, h3, h4 { padding: 0 5%; margin-bottom: .5em; }
  h2 { margin-bottom: 1em; }
  p { padding: 0 5%; }
}

/* 画像ユーティリティ（インラインstyle削減） */
.img-fit-85 { max-width: 85%; }
.img-fit-70 { max-width: 70%; }
.img-fit-50 { width: 50%; max-width: 400px; }
.img-400h { height: 400px; width: auto; object-fit: contain; display: block; margin: 0 auto; }
.img-300h { height: 300px; width: auto; object-fit: contain; display: block; margin: 0 auto; }
.img-250h { height: 250px; width: auto; object-fit: contain; display: block; margin: 0 auto; }
.img-200h { height: 200px; width: auto; object-fit: contain; display: block; margin: 0 auto; }
.img-150h { height: 150px; width: auto; object-fit: contain; display: block; margin: 0 auto; }
.img-100h { height: 100px; width: auto; object-fit: contain; display: block; margin: 0 auto; }
.img-150w { max-width: 150px; width: 100%; }
.img-250w { max-width: 250px; width: 80%; }

/* ヒーローセクション内のロゴ */
.duux-hero-logo { margin-top: 6em; }

/* CTA ボタン上下余白 */
.cta-wrap .btn-slide { margin: .4rem 0; }

/* =============================================
   メニューアンダーライン（画像重ね）
============================================= */
.top_image-container {
  position: relative;
  display: inline-block;
  overflow: hidden; /* はみ出し防止 */
}
.top_base-img {
  display: block;
  width: 400px;
  height: auto;
}
.top_overlay-img {
  position: absolute;
  inset: 0 auto auto 0; /* top:0; left:0; */
  width: 300px;
  height: auto;
  opacity: 0; /* 初期は非表示 */
  clip-path: inset(0 100% 0 0); /* 左から隠すマスク */
  transition: clip-path 0.4s ease, opacity 0.18s ease;
}
.top_image-container:hover .top_overlay-img {
  opacity: 1;
  clip-path: inset(0 0 0 0); /* 全体表示 */
}

/* =============================================
   TOP ヒーロー（背景）
============================================= */
.top-hero { width: 100%; }

/* 背景を描くアートボード */
.top-hero-art {
  width: min(80vw, 1200px);
  height: 70vh;
  margin-inline: auto; /* 中央寄せ */
  background-image: url("../images/Top/top_foreground.png"); /* CSSからの相対に統一 */
  background-repeat: no-repeat;
  background-size: contain; /* 常に全体表示（過拡大回避） */
  background-position: 50% calc(50% + var(--bg-shift-y));
}

/* 背景直下の行 */
.top-hero-row { margin-top: calc(var(--gap-under-hero) - 5px); }

/* 内側の横幅制御（95vw・最大1500px）＋左右ガター */
.top-hero-inner {
  /* 幅は親にフィット */
  width: 95%;
  max-width: 1500px;

  /* 中央寄せ */
  margin-inline: auto;
  box-sizing: border-box; /* paddingを幅に含め横あふれ防止 */
}

/* ヒーロー（SP）高さ */
@media (max-width: 767.98px) {
  .mobile-hero { min-height: calc(100dvh - var(--duux-nav-height)); }
}

/* ナビ直下の左上に表示（常駐しない：absolute） */
.top-navbar-image {
  position: absolute;
  top: calc(10px + var(--gap-under-hero)); /* 変数名を統一し calc 使用 */
  left: 0;
  width: 14rem;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* =============================================
   ナビゲーション
============================================= */
.navbar.duux-navbar { background-color: var(--duux-gray); }
.navbar.duux-navbar .nav-link {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 20px;
  line-height: 1;
}
.duux-navbar .nav-link:hover { color: #ccc; }

/* ハンバーガーアイコンを白へ */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* =============================================
   Dear-all
============================================= */
#dear-all .row { min-height: 500px; }

/* =============================================
   会社プロフィール
============================================= */
#corporate-profile a { font-size: 2.5vw; color: rgb(124,164,237); }
#corporate-profile a:hover { color: skyblue; }

.member-profile h3 { text-align: left; }
.member-profile .official-position,
.member-profile .credential { font-size: 66%; }

/* 用語テーブル（意味語） */
.concept-table { font-size: 1.25rem; margin: 0 auto; }
.concept-table td:first-child { letter-spacing:.1em; padding-right:.5em; }

/* 会社概要テーブル */
.corporation-details { width: 100%; border-collapse: separate; border-spacing: .5em; table-layout: fixed; }
.corporation-details th {
  width: 150px; text-align: left; vertical-align: top;
  white-space: nowrap; padding: .5em;
}
.corporation-details td { text-align:left; vertical-align:top; word-break: break-word; padding: .5em; }
@media (max-width: 768px) {
  .corporation-details, .corporation-details thead, .corporation-details tbody,
  .corporation-details tr, .corporation-details th, .corporation-details td {
    display: block; width: 100%;
  }
  .corporation-details tr { margin-bottom: 1.2em; }
  .corporation-details th { background:#888; font-weight:700; white-space: normal; word-break: break-word; color: #fff; }
  .corporation-details td { padding-top: 0; }
}

/* お問い合わせ */
#contact-us .form-group { margin:.6em 0; }
#contact-us .form-control { font-size: 16px; padding: .75em; }
input.inquiry-submit-button { width: 100%; background-color: var(--duux-gray); font-size: 16px; }

/* 汎用リンク */
a.for-more-detail { color: rgb(92,140,227); }
a.for-more-detail:hover { color: skyblue; }

/* テーブル共通 */
table { width: 100%; border-collapse: separate; border-spacing: 1em; }
table th { text-align: left; }
table td { vertical-align: top; }

/* =============================================
   実績テーブル（横スクロール）
============================================= */
.achievement-table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative; }
.achievement-table {
  min-width: 800px; width: 100%;
  border-collapse: separate; border-spacing: .75em;
}
.achievement-table th, .achievement-table td {
  padding: .5em 1em; text-align: left; vertical-align: top;
  white-space: nowrap; border: none; background: transparent;
}
.achievement-table thead tr:first-child th {
  background:#888; color:#fff; text-align:center;
}
.achievement-table caption {
  caption-side: top; text-align: left; font-weight: 700; margin-bottom: 1em; white-space: nowrap;
}
.scroll-hint-icon {
  position:absolute; right:10px; top:10px; z-index:2; width:24px; height:24px;
  background: url("../images/scroll_hint_icon.png") no-repeat center/contain; /* パスを ../images に統一 */
  pointer-events:none;
}

/* =============================================
   OUR BUSINESS カード
============================================= */
.our-business-card h4 {
  display:flex; align-items:center; justify-content:center;
  height:40px; margin-bottom: 0;
}
/* 親で2行高に固定しつつ上下センター */
.our-business-card .subtitle{
  display:flex; align-items:center; justify-content:center;
  height:calc(1.5em * 2); line-height:1.5; text-align:center; margin-bottom:.3rem;
}
/* 子に2行クランプ（必要に応じて） */
.our-business-card .subtitle .subtitle-clamp{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; white-space:normal;
}
.our-business-card .description { text-align:left; margin-bottom:.25em; }
.our-business-card img { width:auto; object-fit:contain; display:block; margin: 0 auto; }
.for-more-detail { display:inline-block; margin-top:.25em; }

/* 二行抑止（任意） */
.two-line { line-height:1.5; height: calc(1.5em * 2); overflow:hidden; }
@media (min-width:768px) {
  .two-line .br::after { content:"\A"; white-space:pre; }
}
@media (max-width:767px) {
  .two-line .br::after { content:""; }
}

/* 角括弧の見栄え */
.bracket { font-weight:700; }
.content { text-align:center; }

/* 細かい微調整 */
@media (max-width: 540px) { .btn-slide { width: 240px; } }

/* =============================================
   代表挨拶（パララックス）
============================================= */
.member-section { position: relative; overflow: hidden; background:#fff; }
.member-section .container { position: relative; z-index: 1; }

/* パララックス層 */
.member-parallax {
  position: absolute;
  inset: -20vh 0 -20vh 0;
  transform: translateY(var(--py, 0px));
  opacity: .15;                 /* 不透明度15% */
  pointer-events: none;
  z-index: 0;
  display: none;                /* lg未満は非表示 */
  background:#fff;              /* 余白は白で塗る */
  justify-content: center;      /* 中央寄せ（横） */
  align-items: center;          /* 中央寄せ（縦） */
}
/* 画像：通常は100%幅、ただし上限を設ける */
.member-parallax img {
  display:block; width:100%; height:auto; /* 比率維持 */
  max-width: var(--parallax-max-w, 1600px);
  max-height: 100%;
}
/* lg以上で表示＆中央寄せを有効化 */
@media (min-width: 992px){
  .member-parallax{ display:flex; }
}

/* =============================================
   背景グレー
============================================= */
.background-gray {
  background-color: #f5f5f5; /* 薄いグレー背景 */
  border-radius: 10px;
  padding: 50px 25px;
}

@media (max-width: 767.98px) { /* sm以下 */
  .background-gray {
    margin: 0px 5px;
    padding: 25px 5px;
  }
}

/* =============================================
   タイトルの線
============================================= */
.title-line {
  display: flex;                 /* 横並びレイアウト */
  align-items: center;           /* 縦方向中央 */
  justify-content: center;       /* 文字を中央へ */
  gap: 1em;                      /* 文字と線の間隔 */
  margin: 40px 0;                /* 上下の余白だけ調整 */
  /* ← 文字サイズやフォント指定は書かないので h2 の標準を維持 */
}

.title-line::before,
.title-line::after {
  content: "";
  flex: 1;                       /* 残り幅いっぱいに線を伸ばす */
  height: 1px;                   /* 線の太さ */
  background-color: #ccc;        /* 線の色 */
}

/* =============================================
   ※印インデント
============================================= */
/* 単発の注意書き（※＋ぶら下げインデント） */
.kome{
  position: relative;
  padding-left: 1.2em;            /* 本文の開始位置 */
  margin: .4rem 0;                /* お好みで間隔調整 */
  line-height: 1.7;
}
.kome::before{
  content: "※";
  position: absolute;
  left: 0;
  top: 0;                         /* 行頭合わせ（行中央にしたいなら translate を使用） */
  /* 行中央にしたい場合：
  top: 50%;
  transform: translateY(-50%);
  */
  font-weight: 700;               /* お好みで強調 */
  color: currentColor;
}

/* 複数の注意書きを箇条書きで並べる場合 */
.kome-list{
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.kome-list li{
  position: relative;
  padding-left: 1.2em;
  margin: .25rem 0;
  line-height: 1.7;
}
.kome-list li::before{
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: currentColor;
  font-weight: 700;
}



/* =============================================
   サムネイルをクリックしたら切り替わるスライド
============================================= */

:root{
  --slider-max-width: 1100px;     /* スライダーの最大幅 */
  --viewport-padding: 6vw;        /* 左右に余白を作り、次/前の写真をチラ見せ */
  --slide-width: 72%;             /* 中央スライドの表示幅（%） */
  --slide-aspect: 16/9;           /* 一般的な表示比率。必要に応じて 4/3, 3/2 などに変更可 */
  --slide-gap: 2rem;              /* スライド間の隙間 */
  --ctrl-size: 44px;              /* 左右ナビのサイズ */
  --ctrl-bg: rgba(0,0,0,.45);     /* 左右ナビの背景 */
  --ctrl-bg-hover: rgba(0,0,0,.65);
  --ctrl-icon: #fff;
  --transition-ms: 500;           /* スライドのアニメ時間(ms) */
  --auto-interval-ms: 5000;       /* 5秒ごとに自動スライド */
  --shadow: 0 10px 30px rgba(0,0,0,.18);
  --radius: 18px;
}

.photo-slider{
  position: relative;
  max-width: var(--slider-max-width);
  margin: 6rem auto;
  padding: 0 var(--viewport-padding);
}

/* ビューポート：左右に余白を取り、隣スライドをチラ見せする */
.slider-viewport{
  position: relative;
  overflow: visible; /* 隣のスライドを見せるため非クリップ */
  width: 100%;
}

/* トラック：横一列に並べて移動 */
.slider-track{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--slide-gap);
  will-change: transform;
  transition: transform calc(var(--transition-ms) * 1ms) ease;
}

/* スライド本体 */
.slide{
  flex: 0 0 var(--slide-width);
  list-style: none;
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: #ddd;
  aspect-ratio: var(--slide-aspect); /* 一般的な表示サイズ */
}

/* 画像フィット：
    - 小さい画像は拡大して埋める
    - 縦長は横幅合わせ／横長は縦幅合わせ
    - 長辺トリミング（object-fit: cover） */
.slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 長辺トリミング */
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ナビ（左右矢印） */
.slider-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--ctrl-size);
  height: var(--ctrl-size);
  border-radius: 50%;
  background: var(--ctrl-bg);
  border: none;
  display: grid;
  place-items: center;
  color: var(--ctrl-icon);
  cursor: pointer;
  z-index: 10;
  transition: background .2s ease, transform .1s ease;
}
.slider-nav:hover{ background: var(--ctrl-bg-hover); }
.slider-nav:active{ transform: translateY(-50%) scale(.98); }
.slider-nav.prev{ left: 12px; }
.slider-nav.next{ right: 12px; }

.slider-nav svg{
  width: 22px; height: 22px; fill: currentColor;
}

/* レスポンシブ微調整 */
@media (max-width: 992px){
  :root{ --slide-width: 78%; }
}
@media (max-width: 768px){
  :root{
    --viewport-padding: 4vw;
    --slide-width: 86%;
    --slide-gap: 1rem;
    --ctrl-size: 40px;
  }
  .photo-slider{ margin: 6rem auto; }
}

    /* ▼ 矢印を“下”に置くための上書き（既存 .slider-nav を打ち消し） */
.slider-controls{
  display:flex;
  justify-content:center;
  gap:5rem;
  margin-top:1rem;
  user-select:none;
}

/* 絶対配置をやめて通常フローに */
.slider-nav{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: var(--ctrl-size);
  height: var(--ctrl-size);
  border-radius: 50%;
  background: var(--ctrl-bg);
  border: none;
  display: grid;
  place-items: center;
  color: var(--ctrl-icon);
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}
.slider-nav:hover{ background: var(--ctrl-bg-hover); }
.slider-nav:active{ transform: scale(.98) !important; } /* 下ではY変換不要 */
.slider-nav.prev, .slider-nav.next{ left:auto !important; right:auto !important; } /* 念のため解除 */
.slider-nav svg{ width:22px; height:22px; fill:currentColor; }