/* ===================================================
	★ 基本設定
=================================================== */

html {
	scroll-behavior: smooth;
}

body {
	width: 100vw;
	min-height: 100vh;
	margin: 0 auto;
	padding: 0;
}

/* ===================================================
	★ リンク設定
=================================================== */

a {
	text-decoration: none;
	outline: none;
}

/* ===================================================
	★ エリア設定
=================================================== */

.layout {
	width: 100vw;
	height: auto;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
}

.con_area {
	margin: 0 auto;
	padding: 30px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
}

.title_area,
.menu_area {
	width: 100vw;
	height: 100vh;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

/*スペースエリア*/
.space,
.between {
	height: 50px;
}

.twitter {
	text-align: center;
	margin: 0 auto;
}

/* フッターエリア */
.footer {
	text-align: center;
	font-size: small;
	padding: 30px;
}

/* 注意書きエリア */
.caution_area {
	width: 80%;
	margin: 0 auto;
	color: #ff0000;
	border: 5px solid #ff0000;
	font-weight: bold;
	text-align: center;
}

/* ===================================================
	★ 文章＆文字設定
=================================================== */

/* レスポンシブにも設定あり */
.text_l,
.text_c,
.text_r,
.text_m,
.text_cc,
.float_l,
.float_r,
.float_cl {
	width: 90%;
	height: auto;
	margin: 0 auto;
}

.text_t {
	vertical-align: top;
}

.text_m {
	vertical-align: middle;
}

.text_b {
	vertical-align: bottom;
}

.caution {
	font-weight: bold;
	color: #a52a2a;
}

dt {
	font-weight: bold;
}

/* 赤字 */
.red {
	color: #ff0000;
}

/* 太字 */
.bold {
	font-weight: bold;
}

/* 小文字 */
.small {
	font-size: small;
}

/* 文字サイズ大 */
.big {
	font-size: large;
}

/* 文章中央揃え */
.text_c {
	text-align: center;
}

/* 文章左寄せ */
.text_l {
	text-align: left;
}

/* 文章右寄せ */
.text_r {
	text-align: right;
}

/* 文章DIVを中心に配置 */
.text_r,
.text_c,
.text_l,
.footer {
	margin: 0 auto;
}

/* ===================================================
	★ 画像設定
=================================================== */

.illust_l {
	float: left;
}

.illust_r {
	float: right;
}

/* ===================================================
	★ 装飾設定
=================================================== */

hr {
	height: 3px;
	background-color: #ff0000;
	border: none;
	color: #ff0000;
}

h1 {
	font-size: 21pt;
	font-weight: bold;
}

h2 {
	font-size: 18pt;
	font-weight: bold;
}

h3 {
	font-size: 15pt;
	font-weight: bold;
}

/* 画像右寄せ文章回り込み */
.img_r,
.f_r {
	float: right;
	padding: 30px;
}

/* 画像左寄せ文章回り込み */
.img_l,
.f_l {
	float: left;
	padding: 30px;
}

/* 文章回り込み解除 */
.img_none {
	clear: both;
}

/* 用語解説の用語を太字に */
dt {
	font-size: 100%;
	font-weight: bold;
}

/* 用語解説の解説にインデント */
dd {
	padding-left: 30px;
}

/* 箇条書きマークなし */
.li_none {
	list-style-type: none;
}

/* 箇条書きマーク■ */
.li_m1 {
	list-style-type: '■';
}

/* 箇条書きマーク※ */
.li_m2 {
	list-style-type: '※';
}

/* 箇条書き カタカナ */
.kana {
	list-style-type: katakana;
}

/* 濃い灰色の線 */
.border_1 {
	border: solid 3px #333;
	border-radius: 10px;
	padding: 30px;
}

/* DIV枠（濃い灰ドット） */
.waku_h {
	padding: 15px 30px 15px 30px;
	margin: 15px 0 0px 0;
	border: 5px #333;
	border-style: dotted;
	box-sizing: border-box;
}

/* DIV枠（うすい灰ドット） */
.waku_l {
	padding: 15px 30px 15px 30px;
	margin: 15px 0 0px 0;
	border: 5px #999;
	border-style: dotted;
	box-sizing: border-box;
}

/* DIV枠なし */
.w_none {
	padding: 15px 30px 15px 30px;
	margin: 15px 0 15px 0;
	border-style: none;
	box-sizing: border-box;
}

/* 影を付ける・大 */
.shadow_b {
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.5);
}

/* 影を付ける・小 */
.shadow_s {
	box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5);
}

/* 角を10px丸くする */
.maru_10 {
	border-radius: 10px;
}

/* 角を5px丸くする */
.maru_5 {
	border-radius: 5px;
}

/* 背景を半透明白に */
.bg_10 {
	background-color: rgba(255, 255, 255, 0.8);
}

/* ===================================================
	★ フォーム設定
=================================================== */

.textform {
	font-size: 12pt;
	width: 40vw;
	height: 40px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

textarea {
	font-size: 12pt;
	line-height: 2;
	width: 40vw;
	height: 50pt;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.button {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

input:focus,
textarea:focus {
	background-color: #fff;
}

.submit {
	font-weight: bold;
	color: #a52a2a;
	margin: auto;
}

/* ===================================================
	★ 装飾設定
=================================================== */

.underline {
	border-bottom: double 5px #cc6666;
}

/* ===================================================
	★ テーブル設定
=================================================== */

table {
	width: 100%;
}

td {
	vertical-align: top;
}

/* ===================================================
	★ フレーム設定
=================================================== */

iframe {
	height: 500px;
	width: 80%;
	margin: 0 auto;
}

.frame {
	height: 500px;
}