/* ===== @font-face でローカルフォントを優先 ===== */
/* ===== 変数 ===== */
/* ===== 基本 ===== */
/* ===== ヘッダー（固定） ===== */
/* ===== レイアウト ===== */
/* ===== 部品 ===== */
/*		灰：777777			青：4479C5			緑：05A9C5  5,169,197			*/

/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap'); */
/* ===== 変数 ====================================================================== */
:root{
	--gap: 1rem;  /* 隙間サイズ */
	--header-h: 100px;
	--drawer-w: 280px;
	--c-bg: rgba(255,255,255,1);	/*ヘッダ・ドローワー背景*/
	--c-text: #777;
	--c-accent: #0aa;
}

/* ===== 基本 ====================================================================== */
*{ box-sizing: border-box; }

html {
	font-size: 62.5%; /* font-sizeは16pxの62.5%の10px */
	scroll-padding-top: calc(var(--header-h) + var(--gap));
	scroll-behavior: smooth; /* スムーススクロール */
}

body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6rem;  /*DefaultSize 16px同等*/
	color: var(--c-text);
}

/* ===== ヘッダー（固定） ============================================================ */
.site-header{
	position: fixed; inset: 0 0 auto 0; /* top:0; left:0; right:0; */
	height: var(--header-h);
	background: var(--c-bg);
	z-index: 1000;
	display: flex; align-items: center; justify-content: center;
}

/* ロゴ：中央、ボタン：右　相対配置 */
.site-header__inner{
	position: relative; width: 100%; max-width: 1280px; height: 100%;
	display: flex; align-items: center; justify-content: center; padding: 0 16px;
}
.site-logo{ font-size: 20px; font-weight: 700; letter-spacing: .04em; }

/* ハンバーガー */
.hamburger{
	position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border: none; background: transparent; cursor: pointer;
}
.hamburger:focus-visible{ outline: 4px solid var(--c-accent); outline-offset: 4px; }
.hamburger__bars, .hamburger__bars::before, .hamburger__bars::after{
	content:""; display:block; width: 36px; height: 4px; background:#05A9C5; margin: 0 auto;
	transition: transform .25s ease, opacity .2s ease;
}
.hamburger__bars{ position: relative; }
.hamburger__bars::before{ position: absolute; top: -12px; left: 0; }
.hamburger__bars::after{ position: absolute; top: 12px; left: 0; }

/* 開いた時の「×」アニメ */
.drawer-open .hamburger__bars{ transform: rotate(45deg); }
.drawer-open .hamburger__bars::before{ transform: rotate(90deg) translateX(0); top: 0; }
.drawer-open .hamburger__bars::after{ opacity: 0; }

/* ドロワーメニュー（右→左へスライドイン） */
.drawer{
	position: fixed; top: var(--header-h); right: 0; height: calc(100dvh - var(--header-h)); width: var(--drawer-w); background: var(--c-bg);
	transform: translateX(100%); transition: transform .3s ease; z-index: 999; padding: 1rem;
	display: flex; flex-direction: column; gap: 1rem; font-size: 1.8rem;
}
.drawer a{ color: #05A9C5; text-decoration: none; padding: 1.6rem; display: block; font-weight:700; }		/*background: pink; */
.drawer a:hover{ color: #05A9C5; text-shadow: 0 0 1rem rgba(255,255,0,1); }	/*background: #f5f7f8; */
.drawer-open .drawer{ transform: translateX(0); }

/* 背景オーバーレイ（For UX向上） */
.overlay{
	position: fixed; inset: 0; background: rgba(0,0,0,.7);
	opacity: 0; pointer-events: none; transition: opacity .3s ease;
	z-index: 998;
}
.drawer-open .overlay{ opacity: 1; pointer-events: auto; }

	/* 固定ヘッダーの分だけ上に余白 */
	.wrapper{ width: 100%; }
	main{ padding-top: var(--header-h); } /* 固定ヘッダー余白を確保 */

/* ===== レイアウト ======================================================= */
section { padding:100px 0 200px; }
section.first { padding:10px 0 100px; }
footer { padding:200px 0 100px; }

.contentY,.contentY1080 {
	display: flex; flex-wrap: wrap;
	gap: var(--gap);
	width: 100%;
	margin: 0 auto; padding: var(--gap);
	justify-content: center;	/*justify-content: flex-start;*/
	align-items: stretch;	/* 高さ揃え */
}
.contentY{ max-width: 1280px; }
.contentY1080{ max-width: 1080px; }	/*1260*80% */

.content {	/*2列 */
	flex: 1 1 calc((100% - var(--gap)) / 2); min-width: 100px; padding: 1.5rem; border-radius: 2rem;
	display: flex; flex-direction: column; justify-content: center; 	/* Flex コンテナ化 > 縦に並べる > 縦中央揃え*/
}

.contentY.cols-4-2 .content{ flex: 0 1 308px;  }	/* 2列（本当は4列入るけど実際は2列 縮不可） */
.contentY.cols-4 .content{ flex: 1 1 calc((100% - (3 * var(--gap))) / 4); }	/* 4列 */

/* SP：縦1列＋上下gap */
@media (max-width: 480px) {
		section.first { padding:0 0 200px; }
		.contentY{ flex-direction: column; gap: var(--gap); align-items: stretch; justify-content: flex-start;/* SPは左寄せ */ }
		.contentY.reverse-sp .content:nth-child(1) { order: 2; }	/* 左 → 下 */
		.contentY.reverse-sp .content:nth-child(2) { order: 1; }	/* 右 → 上 */
		.content{ flex: 1 1 100%; width: 100%; margin:0 auto;}
		.contentY.gapSPNone,.contentY1080.gapSPNone { gap: 0; }	/*隙間なし*/
		.contentY.cols-4 .content,.contentY.cols-4-2 .content { width:80%; max-width:360px; }
}
@media (max-width: 768px){
		.contentY.cols-4 .content{  flex: 1 1 calc((100% - var(--gap)) / 2);  }	/* 4→2列*/
		.contentY.cols-4-2 .content{  flex: 1 1 calc((100% - var(--gap)) / 2);  }	/* 4→2カラム*/
}




/* ===== 部品 ============================================================ */
h2 { position: relative; padding: 1.5rem; text-align: center; letter-spacing: 2px; }
h2:before { position: absolute; bottom: 0px; left: calc(50% - 30px); width: 60px; height: 5px; content: ''; background: #05A9C5; }	/*border-radius: 3px;*/
a {color:blue;}
a:hover{ color: #ffff00; text-shadow: 0 0 8px #777; }
.fz-ougon26{font-size: 2.6rem;}
.fz50 { font-size: clamp(3.2rem, 4vw, 5.0rem); }	/*1  最小値・中間(VWに比例)・最大値		*/
.fz38 { font-size: clamp(2.8rem, 3.04vw, 3.8rem); }	/*1  中間値(vw) = (最大フォントサイズ ÷ 基準画面幅) × 100 今回の中間は最大の64% 1:最小 = 最大 × 0.64 2:中間vw = 4vw × (最大 / 5.0)  */
.fz32 { font-size: 3.2rem }
.fz24 { font-size: 2.4rem; }
.fz20 { font-size: 2.0rem; }
.fz20Catch { font-size: clamp(1.6rem, 2vw, 2.0rem);  }
.fz12{ font-size: 1.2rem; }
.ls3 { letter-spacing: -0.3rem; }
.ls5 { letter-spacing: -0.5rem; }
.textCenter { text-align: center; }
.bgWhite{ background:#fff; }
.bgGray{ background: rgba(255,255,255,.1); }
.bgGreen{ background:#05A9C5; }
.bgGreen10{ background: rgba(5,169,197,.1); }
.floating-btn .fa-solid { margin: 0 5px; }	/*fontawsome左右5px*/
.fcolorWhite{ color: #fff; }
.fcolorBlue{ color: #4479C5; }
.fcolorGreen{ color: #05A9C5; }
.fBold{ font-weight:900; }
.fSemiBold{ font-weight:600; }
.lh64{ line-height:6.4rem; }
.logoH { height: 80px; }
.logoF { height: 64px; }
.pT30 { padding-top: 30px; }
.pB100 { padding-bottom: 100px; }
.pB50 { padding-bottom: 50px; }
.pB30 { padding-bottom: 30px; }
.pTB30 { padding: 30px 0; }
img.main { width: 100%; height: auto; display: block; border-radius: 20px; } /*mainのみwidth100%*/

/* 下固定BTN */
.floating-btn {
	position: fixed; bottom: 20px; background: #05A9C5; color: #fff; text-decoration: none; z-index: 9999;
	padding: 16px; transition: all 0.3s ease; border-radius: 2.0rem; 
	display: inline-flex;     /* インライン要素として振る舞いつつflex */	align-items: center;      /* 縦中央 */
}
.floating-btn:hover { opacity: 1; transform: translateY(-3px); background: #4479C5; }
.floating-btn.left { left: 20px; box-shadow: 0 0 1rem rgba(255,255,0,1); }
.floating-btn.right { right: 20px; }

/*テキスト左右斜め線*/
.lrline { display: flex; justify-content: center; align-items: center; }
.lrline::before,.lrline::after { content: ""; background-color: #fff; height: 2px; width: 28px; }
.lrline::before { margin-right: 10px; transform: rotate(60deg);  }
.lrline::after { margin-left: 10px; transform: rotate(-60deg);  }
.lrline.white::before,.lrline.white::after { background-color: #fff; }		/* 白線バージョン */
.lrline.blue::before,.lrline.blue::after {background-color: #4479C5; }		/* 青線バージョン */


@media (max-width: 480px) {
		.floating-btn.left { left: 10px; }
		.floating-btn.right { right: 10px; }
		.logoH { height: 64px; }	/*80px x 80%*/
		.logoF { height: 58px; }
		.spNone { display: none; }
}

@media (max-width: 768px) {
	img.main { width: auto; height: 100%; object-fit: cover; object-position: right; }
}