/* ======== Base ======== */


/* 基本フォント */
body {
	font-family: 
	Meiryo, /* Windows優先 */
	-apple-system, BlinkMacSystemFont, /* iPhone/Mac */
	"Segoe UI", /* Windows英字 */
	"Hiragino Kaku Gothic ProN", /* Mac日本語 */
	"Helvetica Neue",
	Arial, sans-serif;
}
/* 明朝にしたいとき */
.mincho {
  font-family:
	"Yu Mincho", "Hiragino Mincho ProN", /* iPhone / Mac */
	"MS PMincho", "MS Mincho", /* Windows */
	serif; /* 最終フォールバック */
}

/* --- PC/SPで表示を切り替えるbr制御 --- */

/* デフォルト（PC基準） */
br.sp-only { display: none; } /* SPだけ表示 */
br.pc-only { display: inline; } /* PCだけ表示 */

/* スマホ表示用 */
@media screen and (max-width: 768px) {
	br.sp-only { display: inline; }
	br.pc-only { display: none; }
}





/* PC用共通スタイル */
body{
	padding-top: 100px;
}

.header{
	width:100%;
	background: rgba(230, 227, 246, 0.9); /* 10%だけ透過 */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	backdrop-filter: blur(4px);
}

.head{
	display:flex;
	align-items: center;
	width:1200px;
	margin:0 auto;
	padding:8px 3px;
}

.head_logo{
	width:78px;
}
.head_logo img{
	width:78px;
	height:auto;
}

.head_gb{
	font-size:2em;
	font-weight:bold;
	width:300px;
	color: #38405F; /* ネイビー寄りで視認性UP */
}
.head_gb a {
	text-decoration: none;
}



/* 共通ナビ基本（PC用表示がデフォルト） */
.head_navi{
	width:816px;
	text-align: right;
}
.head_navi a {
	padding:0 5px;
	color: #000;
	text-decoration: none;
	font-weight: normal;
	transition: opacity .3s ease;
}
.head_navi a:link,
.head_navi a:visited {
	color: #000;
}
.head_navi a:hover {
	color: #000;
	opacity: 0.6;
}
.head_navi a:active {
	color: #000;
	opacity: 0.4;
}

/* ===== ハンバーガーボタン ===== */
.hamburger {
	display: none;		/* PCでは非表示 */
	width: 32px;
	height: 24px;
	margin-left: auto;
	position: relative;
	cursor: pointer;
}
.hamburger span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: #38405F;
	border-radius: 2px;
	transition: transform .3s ease, top .3s ease, opacity .3s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { top: 22px; }

/* 開いた時に×っぽくする */
.header.nav-open .hamburger span:nth-child(1) {
	top: 11px;
	transform: rotate(45deg);
}
.header.nav-open .hamburger span:nth-child(2) {
	opacity: 0;
}
.header.nav-open .hamburger span:nth-child(3) {
	top: 11px;
	transform: rotate(-45deg);
}

/* ===== SP用レイアウト ===== */
@media (max-width: 768px) {
	.head{
		width:100%;
	padding:8px 3px;
	}
	.head_gb{
		font-size:2em;
		width:auto;
	}
	/* PCナビは非表示 → SPではドロワー風に */
	.head_navi{
		position: absolute;
		top: 100%;		   /* ヘッダのすぐ下 */
		left: 0;
		width: 100%;
		background: rgba(230, 227, 246, 0.98);
		text-align: left;
		padding: 8px 0;
		display: none;		/* デフォルト非表示 */
	}
	.head_navi a{
		display: block;
		padding: 12px 20px;
		border-bottom: 1px solid rgba(0,0,0,0.05);
	}
	/* ハンバーガー表示 */
	.hamburger{
		display:block;
	}
	/* nav-openクラスが付いたときに表示 */
	.header.nav-open .head_navi{
		display:block;
	}
}



/* ボディ回り表紙用 */
.main{
	width:100%;
	margin:100px 0 0 0;
}
/* 下層用 */
.container{
	width:100%;
	margin:0 0 0 0;
}


/* フッタ周り共通スタイル */

.cta{
	width:100%;
	background: rgba(230, 227, 246, 1); /* 透過なし */
}
.cta_txt{
	text-align:center;
	font-size:1em;
	padding:2% 0 0;
}
.ctabx {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 1200px;
	margin: 0 auto;
	padding: 20px 3px 40px;
	gap: 8%;
}
.ctabx_wrap {
	text-align: center;
}
.ctabx1 {
	width: 400px;
	background: #BD96E5;
	padding: 10px;
	border-radius: 6px;
}

.cta_link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	text-decoration: none;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
}

.ctabx1 img {
	width: 60px;
	height: 60px;
}
.cta_note {
	font-size: 0.7em;
	margin-top: 6px;
	color: #000;
	line-height: 1.2;
}
.footbx{
	display:flex;
	align-items: center;
	width:1200px;
	margin:0 auto;
	padding:30px 3px;
	background: rgba(230, 227, 246, 0.3); /* 透過なし */
}
.footbx1{
	width:70%;
	padding:0 0 0 5%;
}
.footbx2{
	width:15%;
	font-size:0.8em;
	line-height:200%;
}
.footbx2 a {
	padding:0 5px;
	color: #000;
	text-decoration: none;
	font-weight: normal;
	transition: opacity .3s ease;
}
.footbx2 a:link,
.footbx2 a:visited {
	color: #000;
}
.footbx2 a:hover {
	color: #000;
	opacity: 0.6;
}
.footbx2 a:active {
	color: #000;
	opacity: 0.4;
}
.copylight{
	text-align: center;
	padding:0.7%;
	font-size:0.5em;
}






@media (max-width: 768px){
.ctabx{
	width:100%;
	flex-direction:column;
	align-items: center;
	padding: 0px 0px 40px;
}
.ctabx1 {
	width:350px;
	margin:7% 0;
}
.cta_note {
	font-size: 0.7em;
	margin-top: -18px;
	line-height: 0;
}
.footbx{
	width:100%;
	flex-direction:column;
	align-items: center;
}
.footbx1{
	order:2;
	width:100%;
	padding:0 0 0 0;
	margin:5% 0;
	text-align:center;
}
.footbx2{
	order:1;
	width:30%;
	font-size:0.8em;
	line-height:200%;
}
	}




/* 共通：スクロールで出したい要素に付ける */
.js-fadein {
  opacity: 0;
  transform: translateY(30px);  /* 少し下から */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 画面内に入ったとき追加されるクラス */
.js-fadein.is-show {
  opacity: 1;
  transform: translateY(0);
}





/* 下層TOP画像まわりPC */
.topimg-wrap {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.topimg {
  width: 1200px;
  position: relative;
}

.topimg img {
  width: 100%;
  height: auto;
  display: block;
}

.topimg-title {
  position: absolute;
  left: 40%;         /* 中央基準 */
  top: 60%;
  transform: translate(-350px, -50%); 
  /* ← ここで横位置微調整（350px = 画像幅の15%程度）*/
  font-size: 50px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 5px rgb(0 0 0 / 70%);
  pointer-events: none; /* リンク被り防止(任意) */
}


/* ▼ SP用（スマホ対応） */
@media screen and (max-width: 767px) {
.topimg {
	width: 100%;
	top: 0;
}
.topimg img {
	width: 100%;
	height: auto;
}
.topimg-title {
	font-size: 30px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
	}


/* 下層のボディPC */
body{
	padding-top: 0px;
}
.container{

}
.breadcrumb{
	display: block;
	width:1200px;
	margin:0 auto;
	padding:1%;
	font-size:13px;
}
.page-body{
	display: block;
	width:1200px;
	height:auto;
	margin:0 auto;
	background:#fff;
}



/* 下層のボディSP用（スマホ対応） */
@media screen and (max-width: 767px) {

body{
	padding-top:94px;
}
.breadcrumb{
	width:100%;
}
.page-body{
	width:100%;
	padding:0 3%;
	margin:0 auto;
}
	}



/* =========================
   ページ冒頭 説明テキスト（ベース）
========================= */
.features_txt{
  width: 70%;
  margin: 0 auto;
  line-height: 1.7;
}

/* =========================
   余白バリエーション
========================= */
.uesita50{
  margin-top: 50px;
  margin-bottom: 50px;
}

/* =========================
   上余白バリエーション
========================= */
.top50{
  margin-top: 50px;
}

/* =========================
   配置バリエーション
========================= */
.cent{
  text-align: center;
}

/* =========================
   SP調整
========================= */
@media screen and (max-width: 767px) {
.features_txt{
  width: 90%;
  margin: 0 auto;
}
.uesita50{
  margin-top: 50px;
  margin-bottom: 50px;
}
.cent{
  text-align: center;
}


	}



/* h2スタイル */
.heading-underline {
	position: relative;
	padding-bottom: 0px; /* 見出しと線の距離 */
	display: inline-block;
	width:100%;
	margin:-5px 0 2% 0;
}
.heading-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%; /* 全体ライン */
	height: 2px; /* 細いライン */
	background: #ccc; /* グレーライン */
}
.heading-underline::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 200px; /* ←太い部分の長さ調整 */
	height: 4px; /* 太いライン */
	background: #b22de7; /* お好みの色（例：紫） */
	z-index:2;
}