@charset "utf-8";
html{
	scroll-behavior:smooth;		/*スクロール動作をスムーズにする*/
	font-family:"ヒラギノ丸ゴ ProN",sans-serif;		/*フォント設定*/
}
a{
	text-decoration:none;
	color:#000000;
}
.red{
	color:#dd0000;
}

/*ヘッダー*/
.logo img{
	float:left;
	width:calc(15% + 200px); /*ウィンド幅に合わせてロゴ画像のサイズも調整*/
	height:auto;
}

nav{
	float:right;
}
.btn{
	margin:15px 10px; /*上下　左右*/
	display:flex;
	flex-direction:row;	/*横方向に並べる*/
}

.marker a{
	color:#000099;
}
.btn a, .btn p{
	width:9em;
	text-align:center;
	margin:10px;
	padding:20px 10px;	/*上下　左右*/
	border:1px solid #000000;
	border-radius:4px;
}
.btn p{
	text-shadow:0px 3px 0px #8eff2a;	/*X Y ぼかし キミドリ*/
	box-shadow:0px 4px 2px 0px #8eff2a;	/*X Y ぼかし 広がり キミドリ*/
}
.btn a:hover{
	transition-duration:0.5s;	
	text-shadow:0px 9px 2px #00c5f1;	/*X Y ぼかし 水色*/
	box-shadow:0px 9px 2px 0px #2ed9ff;	/*X Y ぼかし 広がり 水色*/
	transform:translate(0px, -10px);
}

/*マーカー*/
.marker{
	text-align:left;
	width:96%;
	margin-left:2%;
	background-color:#6eeeff	/*#66edff #57ebff #91eaff 水色*/
}


/*ページ上部ボタン*/
.icn_right, .pop_up img{
	width:calc(2% + 60px);
	height:auto;
	border-radius:10px;
	position:fixed;	/*常に画面上に表示*/
	bottom:20%;	/*下から1/4の位置に表示*/
}
.icn_right{
	right:10px;
	z-index:2;	/*レイヤー前面に設定*/
}
.pop_up img{
	right:10px;
	z-index:3;	/*レイヤー最前面に設定*/
	opacity:0;	/*透明度0%*/
}
.pop_up img:hover{
	transition-duration:0.5s;
	opacity:1;	/*透明度100%*/
}


/*フッター*/
footer{
	text-align:center;
	margin-top:50px;
	background:linear-gradient(to right,#7cff75,#2ed9ff);	/*キミドリ～水色*/
	border-radius:5px;
}

/*画面幅が1320以上の場合 (1280px + マージン)*/
@media(min-width:1320px){
	.icn_right{
		right:calc(((100% - 1280px) / 3) + 1px);
		z-index:2;
	}
	.pop_up img{
		right:calc(((100% - 1280px) / 3) + 1px);
		z-index:3;
		opacity:0;
	}
}
/*画面幅が910px以下の場合*/
@media(max-width:910px){
	.logo{
		width:100%;
		display:block;		/*←以下3行、画像を中央に表示する*/
		text-align:center;
		margin:auto;
	}
	nav{
		width:100%;
	}
	.btn {
		justify-content:center;
		margin:0 15px;
	}
}