@charset "UTF-8";

/* ==========================================================================
   1. 変数・リセット 
   ========================================================================== */
:root {
  --brand-color: #0b5cff;   /* 日青堂コーポレートカラー */
  --muted: #6b7280;    /* 強調カラー */
  --radius: 12px;
  --max-width: 2500px;
}

* {
  box-sizing: border-box;
}

html, body {
	min-height: 100vh;
	margin: 0;
}

body {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Arial, sans-serif;
	line-height: 1.6;
	color: #111;
	background: #fff;
}

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

img {
	max-width: 100%;
	height: auto;
	display: block;
}



/* ==========================================================================
   2. 共通レイアウト
   ========================================================================== */
   
.container {
	width: 100%;
	max-width: 2000px;
	margin: 0 auto;
}

section {
	padding:64px 150px;
}

.muted {
	color:var(--muted);
}

.small {
	font-size:13px;
}

.btn {
	display:inline-block;
	padding:12px 16px;
	border-radius:10px;
	background:var(--brand-color);
	color: white;
	font-weight:700;
	border:0;
	text-align:center;
	transition:opacity 0.3s ease;
}

.btn:hover {
	opacity:0.8;
}



/* ページ内リンクのズレ防止（固定ヘッダー対策） */
*[id] {
	scroll-margin-top: 90px;
}




/* ==========================================================================
   3. Hedding
   ========================================================================== */
section h3 {
	font-size:2rem;
	position:relative;
	padding-bottom:14px;
	margin-bottom:32px;
}

section h3::after {
	font-size:2.0rem;
	content: "";
	position:absolute;
	left:0;
	bottom:0;
	width:60px;
	height:6px;
	background-color:var(--brand-color);
	border-radius:3px;
}

section h4 {
	font-size:1.4rem;
	color:#222;
	padding-left:14px;
	border-left:5px solid var(--brand-color); /* アクセントカラーの縦線 */
	background:transparent;
	margin-top:48px;
	margin-bottom:20px;
}

section h3 + h4 {
  margin-top:24px;
}


/* ==========================================================================
   4. ヘッダー (Header)
   ========================================================================== */
header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}


#top-navi {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:60px;
  padding:18px 1.5rem;
  position:relative;
}

/* PC表示の時のみ、ナビを中央に表示 */
@media (min-width: 901px) {
	.nav nav {
		position: absolute;
		left: 50%;
		 transform: translateX(-50%);
	 }
}



/* ナビ　日青堂ロゴ */

#brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-left:1.5rem
}

#brand h1 {
	margin:0;
	padding:0;
	line-height:1;
}

#brand h1 img {
	width: 120px;  /*　画像の幅/高さは自動　*/
	height: auto;
	max-width: 100%;
	display: block;
}


/* ナビ　リンク */

nav ul {
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px; /* 背景が広がる分、項目同士の隙間は少し狭めに調整 */
	align-items: center;
	list-style: none;
}

nav ul li {
	width:100px;
}

nav a {
	display:block;
	text-align:center;
	padding: 10px 0;
	color: var(--muted);
	font-weight: 600;
	border-radius: 8px;
	transition: background-color 0.3s;
}

nav a:hover {
	background-color: rgba(11, 92, 255, 0.1);
}



.cta {
	background: var(--brand-color);
	color: white;
	padding: 10px 14px;
	border-radius: 10px;
	font-weight: 700;
	transition: opacity 0.3s;
}

.cta:hover {
	opacity: 0.8;
}

/* スマホ用ナビ */
#menu-btn {
	display: none;
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	cursor: pointer;
}

/* お問い合わせ */
div#contact {
	display:flex;
	gap:12px;
	align-items:center;
}





/* ==========================================================================
   5. フッター (Footer)
   ========================================================================== */
footer {
	background: #0000f2;
	color: #fff;
	padding: 20px;
	font-size: 0.8rem;
}

.footer-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}

.footer-navi h5 {
	font-size: 0.9rem;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 5px;
}

.footer-navi ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-navi ul li {
	margin-bottom: 6px;
}

.footer-navi ul li a {
	color: #ccc;
	transition: color 0.2s;
}

.footer-navi ul li a:hover {
	color: #fff;
}


/* footer コピーライト */
div#copyright {
	font-size: 0.9rem;
	color: #999;
	margin-top: 1.0rem;
	margin-bottom: 3.0rem;
	text-align:right;
}



/* ==========================================================================
   6. アニメーション (Animations)
   ========================================================================== */
.fadein {
	opacity:0;
	transform:translateY(30px);
	transition:all 0.8s ease;
}

.fadein.active {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   7. レスポンシブ対応　#画面幅が900px以下になったときの表示
   ========================================================================== */
@media (max-width: 900px) {
	section {
		padding: 40px 20px;
	}
	
	/* ① ロゴが潰されるのを防ぐ（重要！） */
	#brand h1 img {
		width: 120px /* お好みのサイズ */
		min-width: 120px;        /* これ以上縮めない */
		flex-shrink: 0;          /* 勝手に縮む機能をオフにする */
	}
	
	/* ② PC用の横並びメニューを隠す */
	nav ul {
		display: none;
	}
	
	/* ③ スマホ用のハンバーガーボタン（三本線）を表示する */
	#menu-btn {
		display: block;
	}
	
	/* ヘッダーの隙間をスマホ用に少し詰める */
	#top-navi {
		gap: 20px;
	}	
	
	/*フッター*/
	.sub-footer-container {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	
	.footer-info {
		text-align: left;
	}
}



/* ==========================================================================
   8. セクション背景の交互レイアウト（ストライプ）
   ========================================================================== */
/* 偶数番目のセクション（落ち着いたごく薄いグレー） */
main section:nth-of-type(even) {
  background-color: #f8f9fa;
}

/* 奇数番目のセクション（白） */
main section:nth-of-type(odd) {
  background-color: #ffffff;
}