@charset "utf-8";

/*
------ Fonts ---------------------------------------------
*/

body,
article h2 span,
input,
button,
textarea,
select,
.contents pre {
	font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.message {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

header p,
footer p,
.item_list {
	font-family: 'Titillium Web', sans-serif;
}

/*
------ クリック/タッチイベント無効化 ---------------------------------------------
*/

.can_not_touch {
	pointer-events: none;
}

/*
------ common ---------------------------------------------
*/

html,
body {
	/*height: 100%;*/
}/* スライダー height 対策 */

html {
	background-color: #eee;
}

body {
	width: 760px;
	margin: 0 auto;
	padding: 25px;
	background-color: #fff;
}

a:link,
a:visited,
a:active {
	text-decoration: none;
	color: #336c6a;
	font-weight: 500;
}

a:hover {
	color: #DB003D;
}

/*
------ grid ---------------------------------------------
https://cssgridgenerator.io/
*/

body {
	display: grid;
	/*grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);*/
	gap: 25px;
}

header {
	grid-column: span 2 / span 2;
}

.menu {
	width: 100px;
	grid-row-start: 2;
	order: 1;
}

article {
	width: 635px;
	grid-row-start: 2;
	order: 2;
	padding: 0 0 3.5em 0;
}

footer {
	grid-column: span 2 / span 2;
	margin: -25px;
}

/*
------ header ---------------------------------------------
*/

header h1 {
	margin: 0;
}

header img {
	vertical-align: middle;
}

/*
------ article ---------------------------------------------
*/

article {
}

/*
------ footer ---------------------------------------------
*/

footer {
	text-align: center;
	line-height: 1.65em;
	background-color: #eee;
	clear: both;
	padding: 3.5em 1.5em 5.0em 1.5em;
}

footer address {
	font-style: normal;
	margin-bottom: 2.0em;
}

footer p {
	color: #444;
	font-size: 82%;
	margin: 0;
}

footer small {
	color: #666;
	font-size: 72%;
	letter-spacing: 0.1em;
}

/*
------ menu ---------------------------------------------
*/

.menu {
	transition: all 200ms 0s ease;
}

.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu li {
	margin-bottom: 5px;
}

.menu img {
	vertical-align: middle;
	width: 100px;
}

.menu a {
	transition: all 300ms 0s ease;
}

.menu a:hover {
	opacity: 0.78;
}

/*
------ page top ---------------------------------------------
*/

#page_top {
	cursor: pointer;
	position: fixed;
	display: inline-block;
	background-color: #777;
	color: #fff;
	line-height: 48px;
	text-align: center;
	vertical-align: middle;
	border-radius: 3px;
	width: 48px;
	height: 48px;
	right: 24px;
	bottom: 24px;
}

#page_top:hover {
	background-color: #555;
}

/*
------ Responsive ---------------------------------------------
*/

/*
@media screen and (min-width: 901px) {

	article>*:not(iframe) {
		margin-left: 50px;
		margin-right: 50px;
	}

}

@media screen and (min-width: 521px) and (max-width: 900px) {

	article>*:not(iframe) {
		margin-left: 25px;
		margin-right: 25px;
	}

}

@media screen and (max-width: 520px) {

	article>*:not(iframe) {
		margin-left: 15px;
		margin-right: 15px;
	}

}
*/