@charset "utf-8";

/******************* 統一設定 *******************/
*{
	margin:0;
	padding:0;
	text-decoration:none;
	font-family:'M PLUS Rounded 1c',sans-serif,'Font Awesome 5 Free';
	table-layout:fixed;
	border-spacing:0;
	box-sizing:border-box;
}

:root{
	--sm-font-size-12px:clamp(6px,2.75vw,12px);
	--sm-font-size-13px:clamp(7px,3vw,13px);
	--sm-font-size-14px:clamp(8px,3.25vw,14px);
	--sm-font-size-15px:clamp(10px,3.5vw,15px);
	--sm-font-size-16px:clamp(12px,3.75vw,16px);
	--sm-font-size-18px:clamp(12px,4vw,18px);
	--sm-font-size-20px:clamp(15px,4.5vw,20px);
	--sm-font-size-22px:clamp(14px,4.75vw,22px);
	--sm-font-size-24px:clamp(16px,5vw,24px);
}

::selection{
	color:#000;
	background:#f8d6d6;
}

.flexbox{
	display:flex;
}

a{
	color:#000;
	text-decoration:none;
}

ul,ol{
	list-style-position:inside;
}

body{
	font-size:16px;
}

body::before{
	width:100%;
	height:100vh;
	height:100dvh;
	background:#fff;
	position:fixed;
	top:0;
	left:0;
	z-index:-2;
	display:block;
	content:"";
}

div.wrapper{
	margin:0 auto;
}

div.button a{
	width:100vw;
	text-align:center;
	vertical-align:middle;
	display:table-cell;
	transition:.3s;
}


/******************* ヘッダー *******************/
header{
	width:100%;
	height:70px;
	background:#fff;
	border-bottom:solid 1px #f8d6d6;
	box-shadow:0 0 15px rgb(0 0 0 / 30%);
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:99999;
}

header nav.smView{
	display:none;
}

header nav.pcView{
	width:82.5%;
	height:100%;
	margin:0 auto;
	display:flex;
	flex-direction:row;
	align-items:center;
}

header nav.pcView div.logo{
	width:275px;
	height:100%;
	margin:0 auto;
	padding:8.5px 0;
}

header nav.pcView div.logo a{
	width:275px;
	height:100%;
	background:url("./../img/logo.svg") no-repeat left/contain;
	text-indent:-9999px;
	display:block;
	transition:.3s;
}

header nav.pcView div.logo a:hover{
	opacity:.7;
}

header nav.pcView div.item{
	width:80%;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:flex-end;
}

header nav.pcView div.item div.button{
	width:120px;
	height:100%;
}

header nav.pcView div.item div.button:not(:last-child){
	margin-right:10px;
}

header nav.pcView div.item div.button a{
	height:70px;
	font-weight:bold;
	border-bottom:solid 5px transparent;
}

header nav.pcView div.item div.button a.active{
	color:#f8d6d6;
	border-bottom:solid 5px #f8d6d6;
}

header nav.pcView div.item div.button a:hover{
	color:#f8d6d6;
	border-bottom:solid 5px #f8d6d6;
}


/******************* コンテンツ *******************/
main{
	padding-top:70px;
}

section[id^=sec]{
	width:82.5%;
	max-width:1366px;
	margin:50px auto 0;
}


/******************* フッター *******************/
footer{
	width:100%;
	height:90px;
	padding-top:20px;
	background:#333132;
}

footer p.copyright{
	padding-left:5px;
	color:#fff;
	text-align:center;
	display:block;
}

footer p.info{
	margin-top:5px;
	color:#fff;
	text-align:center;
}


@media (max-width:767px){
	/******************* 統一設定 *******************/
	body{
		font-size:var(--sm-font-size-16px);
	}


	/******************* ヘッダー *******************/
	header{
		height:65px;
	}

	header nav.pcView{
		display:none;
	}

	header nav.smView{
		height:100%;
		display:block;
	}

	header nav.smView div.logo{
		width:235px;
		height:100%;
		margin:0 auto;
	}
	
	header nav.smView div.logo a{
		width:235px;
		height:100%;
		background:url("./../img/logo.svg") no-repeat left/contain;
		text-indent:-9999px;
		display:block;
		transition:.3s;
	}


	/******************* コンテンツ *******************/
	main{
		padding-top:65px;
	}


	/******************* フッター *******************/
	footer{
		height:unset;
		padding:30px 10px;
	}
}