@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

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

	CommonElements

======================================= */
html * {
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MS P Gothic", "Roboto", Verdana, Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html,
body {
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MS P Gothic", "Roboto", Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	letter-spacing: 0.025em;
	height: 100%;
}

body{
	line-height: 1.8;
	color: #000;
	text-align: center;
	background: #ffffff;
	font-size: 1.5rem;
}



a:link { text-decoration:none; color: #000000;}
a:visited { text-decoration:none; color: #000000;}
a:active { text-decoration:none; color: #000000;}
a:hover { text-decoration:none; color: #000000;}

/* ------------------------------------
	header
------------------------------------ */
body > header {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0;
	line-height: 1;
}
body > header.lang_on {
	padding: 0 135px 0 0;
}
body > header .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 320px;
	max-width: 77%;
	padding: 12px 0;
}
body > header .logo a {
	display: block;
	max-width: 100%;
	height: 50px;
	width: auto;
}
body > header .logo img {
	max-width: 100%;
	max-height: 100%;
}
body > header .lang {
	position: absolute;
	top: 0;
	right: 0;
	background: #404545;
	color: #fff;
	width: 135px;
	height: 75px;
	line-height: 75px;
	letter-spacing: 0.05em;
	z-index: 10;
}
body > header .lang::before {
	content: '';
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	background: transparent url(../img/ico_lang.png) center center no-repeat;
	background-size: 17.5px;
	vertical-align: middle;
	margin: -0.2rem 0.9rem 0 0;
}

@media only screen and (max-width: 768px) {
	body > header {
		padding: 0;
		border-bottom: 1px solid #E2E2E2;
	}
	body > header.lang_on {
			padding: 0 75px 0 0;
	}
	body > header .logo {
		padding: 13px 20px 12px;
		justify-content: flex-start;
	}
	body > header .logo a {
		height: 40px;
	}
	body > header .lang {
		width: 65px;
		line-height: 1;
		font-size: 1.1rem;
		height: 65px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	body > header .lang::before {
		display: block;
		margin: 0 auto 1rem;
	}

}


/* ------------------------------------
	main
------------------------------------ */
main .caption {
	word-break: break-all;
	word-break: break-word;
}
main .caption a:link { text-decoration:underline; color: #008AE0;}
main .caption a:visited { text-decoration:underline; color: #008AE0;}
main .caption a:active { text-decoration:underline; color: #008AE0;}
main .caption a:hover { text-decoration:none; color: #008AE0;}

main .caption ul {
	list-style-type: disc;
	padding: 0 0 0 1em;
}
main .caption ol {
	list-style-type: decimal;
	padding: 0 0 0 1em;
}

/* hover
------------------------------------ */
/* opacity */
body.pc_view > header .lang {
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
}
body.pc_view > header .lang:hover {
	opacity: 0.6;
}

/* =====================================
	ClearFixElements
===================================== */
.cf:after {
	content: "";
	clear: both;
	display: block;
}
