@charset "utf-8";

/*====================================================================
   スタイルシート
====================================================================*/

* {
	box-sizing: border-box;
}

body {
	font-family: "メイリオ", Meiryo, YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 100%;
	color: #666666;
	letter-spacing: .025em;
	line-height: 1.8;
	word-break: break-all;
	margin: 0;
	min-width: 320px;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	background-size: cover;
}

/* =	上部メニューボックス　= */
#upper-menu-box {
	width: 1000px;
	padding: 5px 2px;
	margin: 0px auto;
	line-height: 1.0;
	text-align: left;
	color: #666666;
	background-color: #F9F9F9;
	border: 0px solid #F00;
	display:flex;
}

@media screen and (max-width: 1024px) {
	#upper-menu-box {
		width: 95%;
	}
}

.up-menu-lbox {
	width: 230px;
	padding: 0px 2px;
	margin: 0px;
	line-height: 1.0;
	text-align: left;
	color: #666666;
	float: left;
}

@media screen and (max-width: 500px) {
	.up-menu-lbox {
	width: 200px;
	}
}

.up-menu-rbox {
	width: 350px;
	padding: 0px 2px;
	margin: 20px 0px 0px auto;
	line-height: 1.0;
	text-align: right;
	color: #666666;
	float: left;
}

@media screen and (max-width: 620px) {
	.up-menu-rbox {
	font-size: 85%;
	margin: 18px 0px 0px auto;
	}
}

@media screen and (max-width: 500px) {
	.up-menu-rbox {
	font-size: 70%;
	margin: 12px 0px 0px auto;
	}
}


/* =	トップロゴ画像ボックス　= */
#top-rogo-area {
	width: 100%;
	padding: 0px;
	margin: 2px auto 0px auto;
	background-color: #a2e9ff;
	border-top: 7px solid #3b8ce7;
	border-bottom: 7px solid #3b8ce7;
}


.rogoback-area {/*====== ロゴ画像バックエリア =======*/
	width: 1000px;
	padding: 1% 0% 0px 0%;
	margin: 2px auto 0px auto;
	text-align: center;
	background: no-repeat center url("../image/back-img.gif");
	background-size: 99%;
	border: 0px solid #3b8ce7;
}

@media screen and (max-width: 1000px) {
	.rogoback-area {
		width: 95%;
	}
}

.rogo-area {/*====== ロゴ画像エリア =======*/
	width: 170px;
	padding: 1% 0% 0% 0%;
	margin: 2px auto 0px auto;
}

@media screen and (max-width: 1000px) {
	.rogo-area {
		width: 16%;
		margin: 2px 42%;
	}
}

h1 {
	width: 100%;
	padding: 0em;
	margin: 0em;
	line-height: 1.5;
	font-size: 80%;
	font-weight: 500;
}


/*====================================================================
   本文データボックス
====================================================================*/
#main-box1000 {
	width: 1000px;
	padding: 1em;
	margin: 0px auto;
	line-height: 1.0;
	text-align: left;
	color: #333333;
	border: 2px solid #4169E1;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	display: block;/* 要素を縦並びに*/
	/* display: flex;/* 要素を横並びに*/
}

@media screen and (max-width: 1024px) {
	#main-box1000 {
		width: 95%;
	}
}



.main-box {
	width: 970px;
	padding: 0em;
	margin: 0px auto;
	text-align: left;
	font-size: 100%;
	border: 0px solid #F00;
	display: block;
}

@media screen and (max-width: 1024px) {
	.main-box {
		width: 99%;
	}
}

h2 {
	width: 970px;
	color: #FFFFFF;/*文字色*/
	padding: 0.5em 0.1em 0.5em 1.8em;/*文字周りの余白*/
	text-indent: -1.2em;
	display: inline-block;/*おまじない*/
	line-height: 1.2;/*行高*/
	background: #DA70D6;/*背景色*/
	vertical-align: middle;
	border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
}

@media screen and (max-width: 1024px) {
	h2 {
		width: 99%;
	}
}

h2:before {
	content: '●';
	color: white;
	margin-right: 5px;
}

.text-box {
	width: 100%;
	padding: 0em 1em;
	margin: 0em 0em;
	text-align: left;
	font-size: 100%;
	line-height: 1.4;/*行高*/
	border: 0px solid #464646;
	display: flex;
}

@media screen and (max-width: 1024px) {
	.text-box {
		width: 99%;
	}
}



/*====================================================================
   　メニュー枠の設定情報
====================================================================*/
.menurogo {
	width: 180px;
	padding: 0em;
	margin: 0em auto 0px auto;
}


.koumoku {
	width: 100%;
	padding-top: 0.2em;
	margin: 0.7em 0em 0em 0em;
	text-align: left;
	font-weight: 900;
	font-size: 160%;
	border-top: 1px solid #464646;
}

.menu_box {
	width: 970px;
	padding: 1em;
	margin: 0em auto 0.2em auto;
	text-align: left;
	font-size: 12px;
	border: 0px solid #464646;
	display:flex;
}

@media screen and (max-width: 1024px) {
	.menu_box {
		width: 99%;
	}
}


.submenu_box {
	width: 300px;
	height: 100%;
	padding: 0px;
	margin: 0em auto;
	text-align: left;
	font-size: 150%;
	font-weight: 900;
	line-height: 1.5;/*行高*/
	background-color: #FFFACD;
	border: 1px solid #464646;
/*	float: left;*/
}





/*====================================================================
   画像設定情報
====================================================================*/
.gazo {
	width: 500px;
	margin: 0px auto;
	text-align: center;
	border: 0px solid #0000FF;
}

@media screen and (max-width: 1024px) {
	.gazo {
		width: 400px;
	}
}




/*====================================================================
   操作説明ボックス
====================================================================*/
.sousa0 {
	margin-left: 1em;
	text-indent: -1em;
	padding-bottom: 10px;
}

.sousa1 {
	margin-left: 2em;
	padding-bottom: 10px;
}

.sousa-img1 {
	width: 100%;
	margin-left: 2em;
	padding-bottom: 10px;
	display: flex;
	align-items: center;
}




/*====================================================================
   １行目左インデント （字下げ）、（ぶら下げインデント）
====================================================================*/
.indent {
	margin-left: 1em;
}

.burasage {
	margin-left: 1em;
	text-indent: -1em;
}

.burasage1 {
	margin-left: 2em;
	text-indent: -2em;
}

.burasage2 {
	margin-left: 3.2em;
	text-indent: -2.0em;
}

.burasage10 {
	margin-left: 10.2em;
	text-indent: -10.2em;
}



/*====================================================================
   スペース確保
====================================================================*/
.space0 {
	height: 0px;
}

.space5 {
	height: 5px;
}

.space10 {
	height: 10px;
}

.space20 {
	height: 20px;
}

.space30 {
	height: 30px;
}

.space50 {
	height: 50px;
}



/*====================================================================
　　footer
====================================================================*/

footer {
	background-color: #464646;
	padding: 10px 0;
	position: relative;
	margin: 10px auto;
	border-top: 2px solid #AAAAAA;
	border-bottom: 2px solid #AAAAAA;
}

footer .footer_title {
	font-weight: 900;
	font-size: 18px;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	text-align: center;
	margin: 0 auto;
}

footer .site-info {
	color: #FFFFFF;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-align: center;
	font-size: 12px;
	margin: 0;
}

footer .site-info a {
	color: #FFFFFF;
	text-decoration: none;
	transition-duration: 0.3s;
}

footer .site-info a:hover {
	opacity: .8;/*== 要素の不透明度を設定 ==*/
}

@media screen and (max-width: 1024px) {
	footer .footer_title {
		font-size: 16px;
	}
}

@media screen and (max-width: 1024px) {
	footer .site-info {
		font-size: 10px;
	}
}