/* ===== 基本リセット ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
	font-family: "Helvetica Neue", Arial, sans-serif;
	line-height: 1.6;
	color: #333;
	background: #fff;
	display: flex;
	min-height: 100vh;
}

/* prevent body scroll when menu open */
.no-scroll { overflow: hidden; }

/* ===== サイドバー ===== */
.sidebar {
	background: #00125e;
	color: white;
	width: 200px;
	padding: 20px;
	flex-shrink: 0;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1100;
	transform: translateX(0);
	transition: transform 0.28s ease-in-out;
}

/* ロゴ切替 */
.logo-image-pc { display: none; }
.logo-text-sp { display: block; }

.logo-image-pc h1 { margin: 20px 0 0 0; text-align: center; }
.logo-image-pc img { max-width: 100%; height: auto; display:block; margin: 0 auto; }

/* スマホはロゴ上に余白を増やす */
.logo-text-sp h1 { margin: 40px 0 0 0; text-align: center; }

@media (min-width: 768px) {
	.logo-image-pc { display: block; }
	.logo-text-sp { display: none; }
}

/* ナビゲーション */
.sidebar nav ul { list-style: none; padding: 0; margin-top: 20px; }
.sidebar nav li { margin-bottom: 5px; width: 140px; margin-left: 10px; }
.sidebar nav a {
	display: block;
	background: #a9a6c6;
	color: #00125e;
	text-align: center;
	padding: 7px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
}
.sidebar nav a:hover,
.sidebar nav a:focus { background: #fff; color: #00125e; outline: none; }
.sidebar nav a.active { background: #fff; color: #00125e; }


/* ===== ハンバーガーメニュー（スマホ専用） ===== */
.hamburger {
	display: none;
	position: fixed;
	top: 15px;
	left: 15px;
	z-index: 1200;
	width: 44px;
	height: 44px;       /* ← 背景高さを少し拡大（天地 +5px） */
	padding: 0;
	border: none;
	background: #00125e;
	cursor: pointer;
	border-radius: 4px;
	flex-direction: column; /* ← 縦3本配置 */
	align-items: center;
	justify-content: center;
}
.hamburger span {
	display: block;
	width: 28px;
	height: 3px;
	background: #fff;
	margin: 4px 0;
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== オーバーレイ ===== */
.overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 1000;
	pointer-events: none;
}
.overlay.active {
	display: block;
	pointer-events: auto;
}

/* ===== レスポンシブ：スマホ時にサイドバーをスライド ===== */
@media (max-width: 768px) {
	body { flex-direction: column; }
	.hamburger { display: flex; }

	.sidebar {
		transform: translateX(-100%);
		transition: transform .28s ease-in-out;
	}
	.sidebar.active { transform: translateX(0); }

	main { margin-left: 0; padding-top: 60px; }
}


/* ===== メインコンテンツを全ページで中央寄せ ===== */
main {
  margin-left: 200px; /* サイドバー分 */
  flex: 1;
  display: flex;
  align-items: center;     /* 上下中央 */
  justify-content: center; /* 左右中央 */
  min-height: 100vh;
}
@media (max-width: 768px) {
  main {
    margin-left: 0;
    padding-top: 60px;  /* ハンバーガー分の余白 */
    display: block;     /* スマホは通常フロー */
    justify-content: center;
  }
}


/* ===== HERO 共通 ===== */
.hero {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;/* 新しいブラウザで優先される */
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
    min-height: -webkit-fill-available; /* iOS Safari対策 */

}
.hero-content { position: relative; z-index: 1; max-width: 900px; padding: 0px; }
.hero h1 { font-size: 30px; letter-spacing: 2px; margin-bottom: 50px; color: #000; }
.hero p { font-size: 18px; color: #000; }

/* PCデフォルトは背景画像 */
.hero-index {
	background: url("images/index-bg.jpg") no-repeat center/cover;
}

/* スマホは白背景に切り替え、中央にロゴを表示 */
@media (max-width:768px) {
  .hero-index {
    background: #fff !important;
  }
  .hero-index .hero-logo {
    display: block;
    max-width: 90%;   /* 横幅はそのまま */
    height: auto;
    width: auto;
    max-height: 270px; /* 元の226pxより少し大きめ */
    margin-top: 0px;
  }
}

@media (min-width:769px) {
	.hero-index .hero-logo { display: none; }
}

/* ===== message.html hero 調整 ===== */
.hero::before { display: none !important; }
.hero-content h2 {
	color: #000 !important;
	line-height: 2.2;
	font-size: 1.2em;   /* ← service の h2 と統一 */
	margin-top: -150px; /* 上寄せ */
}
@media (max-width:768px) {
	.hero-content h2 {
		font-size: 1em;   /* スマホは少し小さく */
		margin-top: -130px;
	}
}

/* ===== MESSAGE / ABOUT ページ専用 HERO調整 ===== */
.hero-message,
.hero-about {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top center;
  z-index: -1; /* 背景として */
}


/* PCのみ hero-content の位置調整（message, about 限定） */
@media (min-width: 769px) {
  .hero-message .hero-content,
  .hero-about .hero-content {
    position: relative;
    left: calc(160px / 2); /* サイドバーの半分の分だけ右へ補正 */
  }
}

/* ===== SERVICE ページ専用 ===== */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCは3列 */
  gap: 20px;
  max-width: 1000px;
  width: 100%;
  margin: auto;             /* 左右中央寄せ */
  align-items: stretch;     /* 各カードの高さ揃え */
  justify-items: center;    /* 各カードを中央寄せ */
 padding-left: 40px;
}

/* サービスボックス */
.service-box {
  width: 100%;
  max-width: 320px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* h2 */
.service-box h2 {
  background: #00125e;
  color: #fff;
  font-size: 1.2em;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 1.2;
}

.service-box .sub {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center; /* ← 修正 */
}

/* リスト */
.service-box ul {
  list-style-type: square; /* ■ に変更 */
  padding-left: 1.2em;
  margin: 0 0 15px;
}
.service-box ul li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
}

/* 画像 */
.img-block {
  width: 100%;   /* h2 と同じ横幅いっぱい */
  max-width: 100%; 
  margin: auto auto 0 auto;
  border-radius: 6px;
  overflow: hidden;
  background: #ddd;
}
.img-block img {
  width: 100%;
  height: auto;
  object-fit: contain; /* 縦横比を保ち、欠けない */
  display: block;
  margin: 0 auto;
}

/* スマホは1列 */
@media (max-width: 768px) {
  .services {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .service-box {
    width: 90%;
    max-width: 500px;
  }
}


/* ===== CONTACT ページ ===== */
.contact-main {
  margin-left: 200px;
  padding: 40px;
  text-align: center;
}
@media (max-width:768px) {
  .contact-main { margin-left: 0; padding: 20px; }
}

.contact-title {
  font-size: 1.5em;
  margin-bottom: 20px;
  color: #00125e;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.form-group {
  display: flex;
  align-items: stretch;
  margin-bottom: 12px;
}

/* ラベル部分 */
.form-group label {
  background: #00125e;
  color: #fff;
  padding: 10px;
  width: 180px;
  flex-shrink: 0;
  text-align: center;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 角丸を完全リセット */
  border-radius: 0;

  /* 左端だけ丸角 */
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}


.form-group input,
.form-group textarea {
  flex: 1;
  padding: 10px;
  border: 2px solid #00125e;
  font-size: 16px;
  margin-left: 0;
  box-sizing: border-box;

  /* 角丸を完全リセット */
  border-radius: 0 !important;

  /* 右端だけ角丸を付ける */
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;

  /* 入力欄の横幅調整 */
  min-width: 400px; /* 必要に応じて調整 */
  max-width: 100%; /* はみ出し防止 */

}

/* メッセージ欄だけ大きく */
.form-group textarea {
  height: 120px; /* 通常の約4倍 */
  resize: vertical;
}

/* ボタン */
.form-buttons {
  text-align: center;
  margin-top: 20px;
}
.btn {
  padding: 10px 30px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  margin: 0 10px;
}
.btn-confirm {
  background: #00125e;
  color: #fff;
}
.btn-reset {
  background: #555;
  color: #fff;
}

/* コピーライト */
.footer-copy {
  text-align: center;
  font-size: 12px;
  color: #00125e;
  margin-top: 30px;
}

/*スマホ専用のスタイルを追加*/
@media (max-width: 768px) {
  .form-group {
    flex-direction: column; /* ラベルと入力欄を縦並びに */
    align-items: stretch;
  }

  .form-group label {
    width: 100%;
    border-radius: 4px 4px 0 0; /* 上だけ丸角 */
    text-align: left;
  }

  .form-group input,
  .form-group textarea {
    width: 100%;       /* スマホ幅に合わせる */
    min-width: auto;   /* PC用のmin-widthを解除 */
    border-radius: 0 0 4px 4px; /* 下だけ丸角 */
    margin-left: 0;
  }
}

/* ===============================
   スマホ横向きアラート
=============================== */
#orientation-warning {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2000;
  padding: 20px;
  cursor: pointer; /* タップで閉じやすいように */
}

@media (max-width: 768px) {
  #orientation-warning {
    font-size: 1rem; /* スマホでは文字を少し小さめに */
    line-height: 1.6;
  }
}