@charset "utf-8";
@import url("https://use.fontawesome.com/releases/v5.6.4/css/all.css");
/* HTML, BODY に適用する */

html {
	height: 100%;
}

body {
	height: 100%;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	overflow-x: hidden;
	display: flex;
	align-content: flex-start;
	flex-flow: column;
	/* background: rgb(237, 226, 255); */
	color: dimgray;
}

/* ヘッダ部分 */

.common-head {
	width: 100%;
	background: -ms-linear-gradient(top, #FFFFFF, #FFF0EE, rgb(237, 226, 255));
	background: -moz-linear-gradient(top, #FFFFFF, #FFF0EE, rgb(237, 226, 255));
	background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(rgb(237, 226, 255)));
	border-bottom: #999999;
}

/* container部分 */

/* @media screen and (max-width:1024px) { */

/* .content {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		background: rgb(237, 226, 255); */

/* padding: 10px; */

/* box-shadow: 0px 0px 8px 3px #999999, 0px 0px 100px 1px #EEE099 inset;
		-moz-box-shadow: 0px 0px 8px 3px #999999, 0px 0px 100px 1px #EEE099 inset;
		-webkit-box-shadow: 0px 0px 8px 3px #999999, 0px 0px 100px 1px #EEE099 inset; */

/* }
} */

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

.content {
	flex-grow: 1;
	width: 100%;
	margin-left: 5px;
	margin-right: auto;
	background: rgb(237, 226, 255);
	/* padding: 10px; */
	/* box-shadow: 0px 0px 8px 3px #999999, 0px 0px 100px 1px #EEE099 inset;
		-moz-box-shadow: 0px 0px 8px 3px #999999, 0px 0px 100px 1px #EEE099 inset;
		-webkit-box-shadow: 0px 0px 8px 3px #999999, 0px 0px 100px 1px #EEE099 inset; */
}

/* } */

.content>section {
	margin-bottom: 10px;
}

.content p {
	margin-left: 15px;
	margin-right: 15px;
	padding-left: 5px;
	padding-right: 5px;
}

/* 見出し_対象 */

.section-title {
	width: 100%;
	border-bottom: mediumpurple 1px solid;
	border-left: mediumpurple 7px solid;
	font-weight: bold;
	/* margin-top: 0px; */
	/* box-shadow: 2px 2px 3px 1px #999999;
	-moz-box-shadow: 0px 0px 8px 3px #999999, 0px 0px 100px 1px #EEE099 inset;
	-webkit-box-shadow: 0px 0px 8px 3px #000000, 0px 0px 100px 1px #EEE099 inset;
	background: #FFFFFF;
	/* background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(244, 227, 181, 0.2), rgba(238, 208, 128, 0.8));
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(244, 227, 181, 0.2), rgba(238, 208, 128, 0.8));
	background: -webkit-gradient(linear, center top, center bottom, from(rgba(255, 255, 255, 0.1)), to(rgba(238, 208, 128, 0.8))); */
}

/* .section-title:before {
	content: "■"
} */

.i-foot {
	background: rgb(237, 226, 255);
}

/* ボタン */

input[type=button] {
	vertical-align: middle;
	border-width: 0 0 0 0;
	box-shadow: 2px 2px 0px 0px #999999;
	margin-top: 2px;
	margin-bottom: 3px;
	background-color: rgba(118, 23, 241, 1.0);
	color: rgb(238, 238, 238);
	font-size: 1.1em;
}

input[type=button]:focus {
	outline: 0;
}

input[type=button]:hover {
	background-color: rgba(137, 59, 240, 1.0);
	box-shadow: 2px 2px 0px 0px #999999;
}

input[type=button]:active {
	background-color: rgba(137, 59, 240, 1.0);
	box-shadow: 0px 0px 0px 0px #999999;
	margin-top: 3px;
	margin-left: 3px;
	margin-bottom: 2px;
	/* border-left: solid 2px transparent;
	border-top: solid 2px transparent; */
}

/* 使い方エリア */

@media screen and (max-width:1024px) {
	.help-area {
		text-align: center;
		padding-bottom: 10px;
		border-bottom: slategrey solid 1px;
		margin-bottom: 15px;
	}
	.help-area>.img-area {
		flex-grow: 0;
	}
	.help-area>.sentence-area {
		flex-grow: 1;
		text-align: left;
	}
}

@media screen and (min-width:1024px) {
	.help-area {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		padding-bottom: 10px;
		border-bottom: slategrey solid 1px;
		margin-bottom: 15px;
	}
	.help-area>.img-area {
		flex-grow: 0;
		max-width: 40%;
		text-align: center;
	}
	.help-area>.sentence-area {
		flex-grow: 1;
	}
}

.help-picture {
	max-width: 90%;
}

/* 見出し_ジャンル */

.junle {
	margin-left: 20px;
}

.junle>i {
	/* box-shadow: 0px 0px 2px 2px rgba(137, 59, 240, 1.0); */
	/* background: radial-gradient(rgb(252, 248, 30), transparent 65%); */
	color: sienna;
}

.content a {
	display: inline-block;
	/* border: solid 1px blueviolet; */
	/* border-radius: 5px; */
	padding: 0.3em;
	text-decoration: none;
	transform: scale(1);
	transition: 0.3s;
}

.content a:hover {
	transform: scale(1.05);
}

.content a::before {
	font-family: "Font Awesome 5 Free";
	content: '\f0c1';
	font-weight: 900;
}

.content a[href^="mailto:"]::before {
	font-family: "Font Awesome 5 Free";
	content: '\f0e0';
	font-weight: 900;
}

.content a[href^="http"]::before {
	font-family: "Font Awesome 5 Free";
	content: '\f35d';
	font-weight: 900;
}

/* 見出し_タイトル */

.title {
	margin-left: 30px;
}

/* アプリ情報テーブル_table */

table.app-info {
	margin-left: 40px;
	border: solid 1px transparent;
	border-collapse: separate;
}

/* アプリ情報テーブル_タイトル */

th.app-info-title {
	background-color: rgb(124, 85, 255);
	color: rgb(241, 241, 241);
}

/* アプリ情報テーブル_th */

th.app-info-th {
	/* border: solid 1px #000000; */
	background-color: rgb(204, 172, 255);
	padding-left: 10px;
	padding-right: 10px;
}

/* アプリ情報テーブル_td */

td.app-info-td {
	/* border: solid 1px #000000; */
	background-color: #FFFFFF;
	padding-right: 10px;
}

/* 吹き出し */

.balloon-under {
	position: relative;
	padding: 20px;
	background-color: #FFFFFF;
	margin-bottom: 2em;
	/* border: 2px solid #81c784; */
	border-radius: 5px;
}

.balloon-under::before {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 20px;
	top: -15px;
	border-right: 15px solid transparent;
	/* border-bottom: 15px solid #81c714; */
	border-left: 15px solid transparent;
}

.balloon-under::after {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 20px;
	top: -12px;
	border-right: 15px solid transparent;
	border-bottom: 15px solid #FFFFFF;
	border-left: 15px solid transparent;
}

/* サイトタイトルに適用する */

.site-title {
	font-family: Impact, Charcoal;
	text-align: center;
	/* padding-bottom: 10px; */
}

/** ページトップへ戻る */

.page_top {
	width: 80px;
	height: 60px;
	position: fixed;
	right: 0;
	top: 50vh;
	background: rgb(170, 170, 170);
	opacity: 0.6;
}

.page_top a {
	position: relative;
	display: block;
	width: 80px;
	height: 60px;
	text-decoration: none;
}

.page_top a::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f102';
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -25px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

.page_top a::after {
	content: 'PAGE TOP';
	font-size: 13px;
	color: #fff;
	position: absolute;
	top: 30px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

/* フッタ部分 */

/* iFoot {
	position: absolute;
	bottom: 0;
} */

/* コピーライトに適用する */

p.copyright {
	text-align: right;
}