@charset "UTF-8";

/*body {
	font-family:"Zen Kaku Gothic New","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size:16px;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	color: #000000;
}*/
*{vertical-align: top; box-sizing: border-box; word-break: break-all;}
a{color: #000000; display: inline-block; text-indent: 0; text-decoration: none;}
a:hover{opacity: 0.6;}


.sp{display: none;}

/*20260220追記*/
body {font-size: 0;}
#wrapper{
	font-family:"Zen Kaku Gothic New","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size:16px;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	color: #000000;
}
b{font-size: 0;}

/*=====================================================================================
***************************************************************************************

　　動き部分

***************************************************************************************
=====================================================================================*/
/* 初期状態 */
.fade-in    { opacity: 0; transform: translateY(50px); }
.fade-left  { opacity: 0; transform: translateX(-60px); }
.fade-right { opacity: 0; transform: translateX(60px); }

/* アニメーション設定 */
.fade-in,
.fade-left,
.fade-right {
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* 発火後 */
.fade-in.visible,
.fade-left.visible,
.fade-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* 遅延（任意） */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }

/* 左右フェードのはみ出し防止 */
body { overflow-x: hidden; }


/*=====================================================================================
***************************************************************************************

　　メインビジュアル

***************************************************************************************
=====================================================================================*/
#mv{position: relative;}
#mv h1{display: none;}
#mv img{width: 100%;}

#mv .txt{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

@media screen and (max-width: 750px){
	#mv .pc{display: none;}
	#mv .sp{display: block;}
}


/*=====================================================================================
***************************************************************************************

　　コンテンツ

***************************************************************************************
=====================================================================================*/
#contents{padding-top: 140px; overflow: hidden; width: 100%;}

#contents .contents_box{
	max-width: 1000px;
	width: 90%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0 auto 180px;
	text-align: justify;
	position: relative;
}
#contents .contents_box.box2{flex-direction: row-reverse;}

.contents_box > div{width: 46%;}
.img_box img{width: 100%;}

.txt_box h2{
	font-size: 30px;
	font-weight: 900;
	color: #005fae;
	line-height: 1;
	margin-bottom: 30px;
}

.btn_box{
	display: flex;
	margin-top: 60px;
}
.btn_box a{
	display: block;
	width: 200px;
	line-height: 55px;
	border-radius: 30px;
	background: #005fae;
	color: #FFFFFF;
	text-align: center;
	font-size: 15px;
	margin-right: 20px;
}


.contents_box .num{
	position: absolute;
	bottom: 0;
}
.box1 .num{right: -300px;}
.box2 .num{left: -300px;}

footer{color: #005fae; padding-bottom: 60px;}
footer small{display: block; font-weight: bold;}

@media screen and (max-width: 1600px){
	.contents_box .num{width: 150px; bottom: -20px;}
	.box1 .num{right: -50px;}
	.box2 .num{left: -50px;}
}

@media screen and (max-width: 1000px){
	#contents .contents_box{
		display: block;
		max-width: 600px;
	}
	.contents_box > div{width: 100%;}
	.txt_box{margin-bottom: 30px;}
}

@media screen and (max-width: 600px){
	/*body{font-size: 14px;}*/
	#wrapper{font-size: 14px;}
	
	#contents{padding-top: 40px;}
	#contents .contents_box{margin: 0 auto 120px;}
	.txt_box h2{font-size: 22px; margin-bottom: 15px;}
	.btn_box{margin-top: 30px; justify-content: space-between;}
	.btn_box a{font-size: 14px; width: 48%; margin: 0; line-height: 50px;}
	.contents_box .num{width: 80px; bottom: -20px;}
	.box1 .num{right: 10px;}
	.box2 .num{left: 10px;}
}