body {
	background: #fff url(../img/bg.png) repeat;
	background-size: 400px 400px;
	width: 100%;
	margin: auto;
	font-family: 'Noto Sans JP' ,Meiryo, 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, sans-serif;;
	line-height:1.2;
}

@media screen and (max-width:639px){
	body {
		background-size: 40%;
	}
}



html, body {
	height: 100%;
	scroll-behavior: smooth;
}



/* ---------- ヘッダーからアニメーションまでは白背景 ---------- */
.TopWhiteBg {
	background:#fff;
	margin:0;
	padding:0;
}



/* ---------- ヘッダー ---------- */
.Header {
	width: 100%;
	height:280px;
	text-align:center;
	background:#fff url(../img/header_bg.jpg) no-repeat center center;
	background-size:cover;
	margin:0 0 40px 0 ;
}

.Header_Line{
	width: 100%;
	height:280px;
	background:url(../img/header_line.png) repeat-x center bottom;
	background-size: auto 100px;
}

.Header_Menu {
	max-width:1000px;
	margin:0 auto;
	position: relative;
	height:280px;
}

.Header_Happinet {
	position: absolute;
	top:4%;
	left:0.5%;
	width:11.5%;
	max-width:115px;
}

.Header_Gigantosaurus {
	position: absolute;
	top:1%;
	left:9%;
	width:84.6%;
	max-width:846px;
}

.Header_Btn1 {
	position: absolute;
	top:69%;
	left:3.5%;
	width:22.8%;
	max-width:228px;
	transition-duration: 0.2s;
}

.Header_Btn2 {
	position: absolute;
	top:69%;
	left:27%;
	width:22.8%;
	max-width:228px;
	transition-duration: 0.2s;
}

.Header_Btn3 {
	position: absolute;
	top:69%;
	left:50.5%;
	width:22.8%;
	max-width:228px;
	transition-duration: 0.2s;
}

.Header_Btn4 {
	position: absolute;
	top:69%;
	left:74%;
	width:22.8%;
	max-width:228px;
	transition-duration: 0.2s;
}

.Header_Btn1:hover,
.Header_Btn2:hover,
.Header_Btn3:hover,
.Header_Btn4:hover {
	box-shadow: 0px 0px 0px 0px #6f8aa9;
	transform: translate(0px, -4px);
	transition-duration: 0.2s;
}

@media screen and (max-width:999px){
	.Header, .Header_Line, .Header_Menu{
		height:calc(100vw * 0.28);
	}
	
	.Header {
		margin-bottom:4%;
	}
	
	.Header_Line{
		background-size: auto 28%;
	}
}

@media screen and (max-width:639px){
.Header_Btn1 {
	left:0.3%;
	width:25%;
}

.Header_Btn2 {
	left:25.1%;
	width:25%;
}

.Header_Btn3 {
	left:49.9%;
	width:25%;
}

.Header_Btn4 {
	left:74.7%;
	width:25%;
}

}



/* ---------- サブタイトル ---------- */
.SubTitle {
	width:100%;
	margin:0 0 50px 0 ;
	text-align:center;
}

.SubTitle img{
	width:98%;
	max-width:1020px;
	margin:auto;
}

@media screen and (max-width:1019px){
	.SubTitle {
		margin-bottom:5%;
	}
}



/* ---------- フッター ---------- */
.Footer{
	width: 100%;
	border-top: 1px solid #aaa;
	background:#fff;
	padding:10px 0;
	color:#666;
}

.Footer_Text{
	max-width:1000px;
	margin:auto;
	overflow: hidden;
	font-size:14px;
}

.Footer_Text a{
	color:#666;
	text-decoration: none;
}

.Footer_Text a:hover{
	text-decoration: underline;
}

.Footer_Text li{
	float:left;
	margin:5px 10px;
}

.Footer_Text li.Copy {
	float:right;
}

.CopySp {
	margin:10px 0;
}

.PC_None {display:block;}
.SP_None {display:none;}

@media screen and (max-width:639px){
	.Footer{
		width: 100%;
		font-size:12px;
		text-align:center;
		margin-bottom:20px;
		line-height:1.2rem;
	}

	.Footer a{
		color:#666;
		font-size:12px;
		text-decoration: none;
	}
	
	.PC_None {display:none;}
	.SP_None {display:block;}
}



/* トップへ戻るボタン */
.page_top_btn {
	position: fixed;
	bottom: 35px;
	right: 15px;
	transition: 0.3s0;
}
.page_top_btn img{
	width:72px;
}

@media screen and (max-width:639px){
	.page_top_btn {
		bottom: 40px;
		right: 5px;
	}
	
	.page_top_btn img{
		width:48px;
	}
}

@media screen and (max-width:339px){
	.page_top_btn {
		bottom: 60px;
		right: 5px;
	}
	
	.page_top_btn img{
		width:36px;
	}
}