/* ===== スムーズスクロール ===== */
html {
  scroll-behavior: smooth;
}

/* ===== ベース ===== */
body {
  margin: 0;
  font-family: sans-serif;
}

main {
  padding-top: 0;  /* スライダーを main の外に出すので不要 */
}

section {
  scroll-margin-top: 70px; /* ヘッダー分ずらす */
  padding: 80px 20px;
  min-height: 100vh;
  background: #e0f7fa;
}

section:nth-child(even) {
  background: #b2ebf2;
}

h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-top: 0;
}

/* ===== TOP ===== */

.catchphrase {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.8;
  color: #000;
}

.catchphrase p {
  margin: 24px 0; /* 上下マージン統一 */
}

.boss {
  color: red;
  font-weight: bold;
  font-size: 3rem;
  text-decoration: underline;
  font-family: 'Georgia', serif; /* 筆記体にしたいなら別フォントに */
}

.explanation-text {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 1.2rem;
  font-weight: normal; /* ← 太字を解除 */
  line-height: 1.8;
  margin-top: 30px;
  margin-bottom: 30px;
  color: #000;
}

#recruit-message {
  margin: 80px auto;
  padding: 30px 20px 30px 25px; /* ← 左を少し小さくした */
  max-width: 850px;
  background-color: #e6f7fb;
  border-left: 5px solid #005B9A;
  border-radius: 8px;
  box-sizing: border-box; /* ← これが重要！ */
}

#recruit-message h3 {
  font-size: 1.8rem;
  color: #005B9A;
  margin-bottom: 20px;
}

.recruit-text {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #222;
  white-space: pre-wrap;
  margin: 0;
}

/* ===== 業務内容 ===== */

.business-section {
  margin-bottom: 50px;
}

.business-section h3 {
  font-size: 1.8rem;
  color: #005B9A; /* 青っぽい色 */
  margin-bottom: 20px;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 2px;
  height: calc(100% - 15px); /* ← 最後の項目分だけ短くする */
  background-color: #005B9A;
}

.timeline li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 10px;
  font-size: 1.2rem;
  color: #333;
}

.timeline li:last-child {
  margin-bottom: 0; /* 最後の余白をなくす */
}

.timeline li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  width: 20px;
  height: 2px;
  background-color: #005B9A;
  transform: translateY(-50%);
}

/* ===== 企業理念===== */

/* 特別強調行（サイズそのまま、下のspanで拡大） */
.highlight-line {
  margin-bottom: 10px;
  text-align: left;
}

/* 陰徳（薄紫・明朝体・大きめ） */
.intoku {
  color: #b48bd4;
  font-weight: bold;
  font-size: 3rem;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "MS Mincho", serif;
}

/* 明徳（黄色・明朝体・大きめ） */
.meitoku {
  color: #f5c400;
  font-weight: bold;
  font-size: 3rem;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "MS Mincho", serif;
}

/* と（半分のサイズ） */
.to {
  font-size: 2rem; /* 陰徳の半分サイズ */
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "MS Mincho", serif;
  font-weight: normal;
  color: #000;
  margin: 0 0.3rem; /* 少しスペースをあける */
}

/* 通常文 */
.about-text {
  font-size: 1.1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: #222;
}

/* ===== 企業理念===== */

.info-list {
  margin: 40px 0;
  padding: 0;
}

.info-list dt {
  font-weight: bold;
  margin-top: 10px;
  color: #005B9A;
  font-size: 1.1rem;
}

.info-list dd {
  margin: 0 0 15px 0;
  font-size: 1.5rem;
  color: #333;
  border-bottom: 1px solid #005B9A;
  padding-bottom: 8px;
  line-height: 1.6; /* 行間も調整 */
}

/* ===== お問い合わせ ===== */

.contact-link {
  color: #005B9A;
  text-decoration: underline;
}
.contact-link:hover {
  color: #003366;
}

/* ===== スプラッシュ動画 ===== */
#splash {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}

#splash video {
  width: 80vw;
  max-width: none;
  height: auto;
}

#splash.fadeout {
  opacity: 0;
  pointer-events: none;
}

/* ===== ヘッダー ===== */
#header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center; 
  justify-content: space-between;
  padding: 10px 30px;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 1s ease, transform 1s ease;
}

#header.show {
  opacity: 1;
  transform: translateY(0);
}

#logo img {
  height: 60px;
  width: auto;
  cursor: pointer;  /* クリックでトップに戻る想定 */
}

/* ===== ナビ中央 ===== */
#main-nav {
  flex: 1;
  text-align: center;
}

#main-nav ul {
  display: inline-flex;
  gap: 60px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#main-nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 10px 20px;
  transition: color 0.3s, background 0.3s;
  border-radius: 4px;
}

#main-nav a:hover {
  color: #fff;
  background: #d42a6d;
}

/* ===== スライダー ===== */
.slider {
  margin-top: 100px;  /* ヘッダーと被らないように十分な余白 */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
}

.slider img {
  width: 80%; 
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #333;
  color: #fff;
  border: none;
  padding: 1rem;
  cursor: pointer;
}

.prev {
  left: 10px;
}
.next {
  right: 10px;
}

.dots {
  text-align: center;
  margin-top: 10px;
}

.dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.dots span.active {
  background: #333;
}

/* ===== スマホ対応 ===== */
/* ===== Mobile (<=768px) まとめ ===== */
@media (max-width: 768px) {
  /* ヘッダー：固定をやめて被りを回避（もう移動したのでOK） */
/* ===== ヘッダーをメニューの基準にできるように ===== */
#header {
  position: relative;           /* ← 重要（absolute 子要素の基準） */
  z-index: 2000;                /* スライダーより上に */
}

/* ===== ハンバーガー（左に固定 / スマホで表示） ===== */
.hamburger {
  display: none;                /* PCでは非表示 */
}

@media (max-width: 768px) {
  .desktop-nav { display: none !important; } /* PCナビを隠す */

  /* ロゴは中央寄せ、ヘッダー高さを揃える */
  #header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;    /* ロゴを中央へ */
    background: #fff;
  }
  #logo img { height: 44px; width: auto; }

  .hamburger {
    display: block !important;  /* 確実に表示 */
    position: absolute;
    left: 12px;                 /* ← 左に配置 */
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    padding: 0; margin: 0;
    border: none; background: transparent;
    cursor: pointer;
    z-index: 3000;              /* 矢印などより上 */
  }
  .hamburger span {
    display: block;
    height: 2px; width: 26px;
    background: #333;
    margin: 6px auto;
    transition: transform .25s ease, opacity .25s ease;
  }
}

/* ===== モバイルメニュー（スライダーより前面に） ===== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 5000 !important;     /* ← ここがポイント：最前面に */
  display: grid;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0;
  width: min(85vw, 380px); height: 100%;
  background: #fff; box-shadow: -10px 0 30px rgba(0,0,0,.15);
  transform: translateX(100%); transition: transform .3s ease;
  padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 8px;
}
.mobile-menu.open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__close { align-self: flex-end; font-size: 32px; background: none; border: none; cursor: pointer; }

body.lock { overflow: hidden; } /* メニュー開時に背面スクロール止め */

/* --- ハンバーガー左寄せ・並び調整 --- */
#header{ display:flex; align-items:center; gap:12px; }
#logo{ margin-inline:auto; }   /* ロゴは中央寄せ */
.hamburger{ order:-1; }        /* ハンバーガーを左へ */

/* スライダーより前面にメニューを出す */
.slider{ position:relative; z-index:1; }
.spbar{ z-index:3000; }

/* ====== モバイルバー型メニュー（上からスライド） ====== */
.spbar{
  position: fixed;
  left: 0; right: 0;
  top: 70px;                /* JSが実高に合わせて上書きします */
  transform: translateY(-110%);
  transition: transform .28s ease;
  background: #2fc0d3;      /* 水色バー */
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.spbar.open{ transform: translateY(0); }
.spbar[hidden]{ display:none; }

.spbar__head{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; color:#fff; font-weight:700;
}
.spbar__close{
  margin-left:auto; font-size:22px; line-height:1;
  background:transparent; border:none; color:#fff; cursor:pointer;
}
.spbar__list{ list-style:none; margin:0; padding:8px 10px 12px; }
.spbar__list li{ margin:6px 0; }
.spbar__list a{
  display:block; background:#fff; color:#333; text-decoration:none;
  padding:14px; border-radius:8px; border:1px solid #e9eef1;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* ハンバーガー（スマホ表示） */
.hamburger{
  display:none; position:relative; width:36px; height:36px;
  padding:0; border:0; background:transparent; cursor:pointer; z-index:3100;
}
.hamburger span{
  position:absolute; left:5px; right:5px; height:2px; background:#333;
  transition:transform .25s ease, opacity .25s ease;
}
.hamburger span:nth-child(1){ top:10px; }
.hamburger span:nth-child(2){ top:17px; }
.hamburger span:nth-child(3){ top:24px; }
/* 開いたら × に変形 */
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* PC/スマホの表示切替 */
@media (min-width:769px){
  .hamburger{ display:none; }
  .desktop-nav{ display:block; }
}
@media (max-width:768px){
  .hamburger{ display:block; }
  .desktop-nav{ display:none !important; }
  #header{ position:static !important; } /* 固定ヘッダーをやめる（被り防止） */
}