/* (WordPress 版では @tailwind ディレクティブは不要のため削除。
    実際の Tailwind ユーティリティはマークアップで使用されていません。) */

/* ===== CSS 変数（フォント）=====
   元は Next.js 版で next/font が --font-noto-sans-jp / --font-poppins を
   注入していたが、WordPress 版では存在しないため var() が空文字を返し
   font-family 全体が無効になって明朝系フォールバックに落ちる事故が起きていた。
   WP 用に :root で明示的に定義することでゴシック（Noto Sans JP / Poppins）を確実に適用する。 */
:root {
  --font-noto-sans-jp: "Noto Sans JP";
  --font-poppins: "Poppins";
}

/* ===== ルート font-size（1rem = 10px）===== */
html { font-size: 62.5%; }
html { font-size: 10px; }
html, body { overflow-x: hidden; }

@media screen and (max-width: 374px) {
  html { font-size: 2.66667vw; }
}

/* ===== ボックスモデル・行区切り ===== */
*, ::before, ::after {
  box-sizing: border-box;
  line-break: strict;
  overflow-wrap: break-word;
}

/* ===== body ===== */
body {
  width: 100%;
  color: rgb(28, 44, 67);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", Meiryo, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: "palt";
  background-color: rgb(255, 255, 255);
}

body {
  line-height: 1;
  text-size-adjust: 100%;
  print-color-adjust: exact;
}

/* ===== CSS 変数（Swiper / Splide 用）===== */
:root {
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
}

/* ===== リセット ===== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: inherit;
}

p {
  margin: 0;
}

figure {
  margin: 0;
}

/* ===== レイアウト共通 ===== */
.l-main {
  display: block;
  overflow: hidden;
}

.l-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

@media screen and (max-width: 767px) {
  .l-inner {
    padding: 0 5vw;
  }
  /* MV/Hero は親が .l-inner を使っていないが、念のため
     特例として全幅 (l-inner padding 無効化) を後段で強制適用する。 */
}

/* ===== セクション見出し共通装飾 .ttl01 =====
   各セクションの .ttl01 / .ttl01En / .ttl01Ja は色とフォントサイズだけ
   個別 CSS で持ち、ここで全セクション共通の「アクセントバー＋小ダッシュ」
   装飾を適用してデザイン統一感を出す。 */
.about .ttl01,
.business .ttl01,
.people .ttl01,
.environment .ttl01,
.recruit .ttl01,
.flow .flowTtl01 {
  gap: 18px 0 !important;
}

.about .ttl01En,
.business .ttl01En,
.people .ttl01En,
.environment .ttl01En,
.recruit .ttl01En {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  letter-spacing: 0.06em !important;
}

.about .ttl01En::after,
.business .ttl01En::after,
.people .ttl01En::after,
.environment .ttl01En::after,
.recruit .ttl01En::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, #2bb9b0 0%, rgba(43, 185, 176, 0.25) 100%);
  border-radius: 2px;
}

/* ABOUT はティール背景なのでバーを白基調にして可読性確保 */
.about .ttl01En::after {
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.3) 100%);
}

.about .ttl01Ja,
.business .ttl01Ja,
.people .ttl01Ja,
.environment .ttl01Ja,
.recruit .ttl01Ja {
  position: relative;
  padding-left: 18px;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
}

.about .ttl01Ja::before,
.business .ttl01Ja::before,
.people .ttl01Ja::before,
.environment .ttl01Ja::before,
.recruit .ttl01Ja::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 2px;
  background: #2bb9b0;
  transform: translateY(-50%);
}

.about .ttl01Ja::before { background: #ffffff; }

/* Flow は h2 単体（En/Ja スパン構造なし）なのでバー単独 */
.flow .flowTtl01 {
  position: relative;
  padding-bottom: 14px;
  display: inline-block;
}

.flow .flowTtl01::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, #2bb9b0 0%, rgba(43, 185, 176, 0.25) 100%);
  border-radius: 2px;
}

/* ===== SP: 見出しサイズ調整 ===== */
@media screen and (max-width: 767px) {
  .about .ttl01En::after,
  .business .ttl01En::after,
  .people .ttl01En::after,
  .environment .ttl01En::after,
  .recruit .ttl01En::after,
  .flow .flowTtl01::after {
    width: 48px;
    height: 3px;
  }
}

/* ===== SP: ヒーロー（MV）は完全に画面の端から端まで ===== */
@media screen and (max-width: 767px) {
  .mv,
  .mv .mvInner,
  .mv .splide,
  .mv .splide__track,
  .mv .splide__list,
  .mv .splide__slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== 表示切替ユーティリティ ===== */
@media screen and (max-width: 767px) {
  .u-sm-min { display: none !important; }
}

@media print, screen and (min-width: 768px) {
  .u-sm-max { display: none !important; }
}

@media screen and (max-width: 1024px) {
  .u-md-min { display: none !important; }
}

@media print, screen and (min-width: 1025px) {
  .u-md-max { display: none !important; }
}

@media screen and (max-width: 1280px) {
  .u-lg-min { display: none !important; }
}

@media print, screen and (min-width: 1281px) {
  .u-lg-max { display: none !important; }
}

/* ===== js-animate（スクロール連動アニメ）はホバー以外のモーション抑制のため即時表示 ===== */
.js-animate,
.js-animate.fadeIn01,
.js-animate.fade {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== body.is-menu-open ===== */
body.is-menu-open {
  overflow: hidden;
}

/* ===== HTML hidden 属性の保証 =====
   個別セレクタの display:flex 等がブラウザのデフォルト
   [hidden]{display:none} を上書きしてしまう事故を防止。 */
[hidden] {
  display: none !important;
}