@charset "utf-8";

/*-- Reset ---------------------------------------------------*/

input[type="submit"],
button{ -webkit-appearance: none; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
ul,ol {list-style:none;}
li{list-style: none;}
blockquote, q {quotes:none;}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	text-decoration: none;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000; 
	font-style:italic;
	font-weight:bold;
}

del {text-decoration: line-through;}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {border-collapse:collapse; border-spacing:0;}
input, select {vertical-align:middle;}

.select_none{
	color: rgba(0,0,0,0);
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}


/*-- initialize -------------------------------------------*/

html {color: #333;}
body {
	font-size: 14px;
	font-family: YuGothic, 'Yu Gothic', 'Yu Gothic Medium', 'Meiryo', sans-serif;
	font-weight: 500;
	line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
select, input, button, textarea {
	font-size: 99%;
	font-family: YuGothic, 'Yu Gothic', 'Yu Gothic Medium', 'Meiryo', sans-serif;
}
strong {font-weight: bold;}
abbr, acronym {
	border: 0;
	font-variant: normal;
}

img{
	width: auto;
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}

.main_container{
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
	padding-bottom: 30px;
}
.general_message{
	line-height: 1.9;
	font-size: 16px;
	
	& a{
		color: #a33;
		text-decoration: underline;
		
		&:hover{
			text-decoration: none;
		}
	}
	
	& video{
		max-width: 100%;
	}
}
.prompt_area{
	max-width: 500px;
	background-color: #e9eff9;
	box-sizing: border-box;
	border-radius: 9px;
	font-size: 85%;
	margin: 15px 0 15px;
	padding: 17px 23px 11px;
}

pre.prettyprint{
	font-size: 14px;
}
.general_message pre.prettyprint li{
	list-style-position: inside;
	list-style-type: decimal-leading-zero;
	color: #ffce83;
	padding: 2px 16px 1px;
}
.error_message{
	font-size: 22px;
	color: #c32828;
	padding-top: 50px;
}
.bottom_back_link{
	margin-top: 60px;
	
	& a{
		position: relative;
		z-index: 10;
		border-bottom: solid 2px #555;
		font-size: 17px;
		padding: 6px 15px 4px 20px;
		color: #555;
		
		&:hover{
			color: #a33;
		}
		
		&::before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 11px;
			height: 100%;
			background-color: #333;
		}
	}
}

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

header{
	position: sticky;
	z-index: 300;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(255,255,255,0.8);
	padding-top: 13px;
}
.header_left{
	& a{
		position: relative;
		z-index: 10;
		display: inline-block;
		color: #333;
		border-bottom: solid 2px #fff;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		margin-right: 4px;
		padding: 12px 15px 5px;
		
		&.active{
			border-color: #333;
		}
		&:hover{
			border-color: #f77;
		}
	}
}
.header_right{
	font-weight: bold;
	font-size: 20px;
	color: #ff2727;
}
.copyright{
	text-align: right;
	font-size: 11px;
	padding-top: 8px;
}

/*-- main -------------------------------------------*/

.contents_area{
	padding-top: 30px;
	padding-bottom: 60px;
	border-bottom: solid 4px #c9c9c9;
}
.content_title{
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	border-bottom: solid 3px #3465be;
	margin-bottom: 45px;
	padding-right: 30px;
}
.mainlist_ul{

}
.mainlist{
	display: flex;
	justify-content: space-between;
	border-bottom: dashed 1px #bfbfbf;
	box-sizing: border-box;
	margin-bottom: 20px;
	padding-right: 15px;
	padding-bottom: 10px;
}
.mainlist_left{
	width: 60%;
	box-sizing: border-box;
	padding-right: 20px;
}
.mainlist_left_link{
	display: inline-block;
	font-size: 18px;
	color: #1558d6;
	margin-bottom: 8px;
	
	&:hover{
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	& h2{
		font-weight: bold;
	}
}
.list_bottom{
	display: flex;
	align-items: center;
	
	dt{
		background-color: #f1f1f1;
		border-radius: 4px;
		font-size: 12px;
		margin-right: 6px;
		padding: 1px 6px 1px;
	}
	dd{
		margin-right: 25px;
	}
}
.mainlist_right{
	width: 40%;
	background-color: #f0f3ff;
	border-radius: 5px;
	line-height: 1.7;
	font-size: 13px;
	padding: 12px 20px 8px;
}
.sample_img{
	position: relative;
	z-index: 10;
	text-align: right;
}
.sample_img.absolute img{
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
}

.ext_files{
	margin-top: 60px;
	
	& h2{
		display: inline-block;
		background-color: #ffe9bf;
		color: #412f0f;
		font-weight: bold;
		margin-left: 4px;
		padding: 6px 13px 2px;
	}
}
.ext_files_inner{
	border: solid 3px #ffe9bf;
	box-sizing: border-box;
	border-radius: 4px;
	max-width: 380px;
	padding: 14px 16px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.ext_files_link{
	width: 48%;
	font-size: 17px;
	color: #333;
	margin-bottom: 12px;
	word-break: break-all;
	
	&:hover{
		color: #a33;
	}
	
	& img{
		width: 22px;
		height: auto;
		vertical-align: middle;
		margin-right: 5px;
	}
	& span{
		display: inline-block;
		vertical-align: middle;
	}
}



/*-- contact -------------------------------------------*/

.about_installation_title{
	font-size: 20px;
	text-decoration: underline;
	text-underline-offset: 8px;
	margin-top: 80px;
	margin-bottom: 30px;
}
.about_installation{
	& img{
		border: solid 1px #aaa;
	}
	& p{
		padding: 15px 0 70px;
	}
}

.contact_message{
	font-size: 24px;
	padding-top: 50px;
}


/*-- END -------------------------------------------*/

.mobile{display: none;}

/*-- media query -----------------------------------*/

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

	.desktop{display: none;}
	.mobile{display: block;}
	br.mobile{display: inline-block;}

	body{
		font-size: 4.2vw;
	}
	.main_container{
		padding-bottom: 8vw;
	}
	.general_area{
		padding: 0 6vw 0;
	}
	.general_message{
		font-size: 4.2vw;
	}
	.prompt_area{
		padding: 4vw 4vw 3vw;
		margin: 6vw 0 6vw;
	}
	.error_message{
		font-size: 5.4vw;
		padding-top: 7vw;
	}
	.bottom_back_link{
		margin-top: 10vw;
		
		& a{
			font-size: 5vw;
			padding: 1.5vw 3vw 1.5vw 6vw;
			
			&::before{
				width: 3vw;
			}
		}
	}
	.copyright{
		font-size: 3.3vw;
		padding: 4vw 6vw 0;
	}
	
	/*-- header -----------------------------------*/
	header{
		display: block;
		padding-top: 0;
		position: inherit;
	}
	.header_left{
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding-bottom: 2vw;
		
		& a{
			display: block;
			width: 27%;
			font-size: 4.6vw;
			padding: 7vw 0 0.5vw;
			margin-right: 0;
		}
	}
	.header_right{
		background-color: #e8eaed;
		color: #5c6175;
		font-size: 5.4vw;
		text-align: center;
		padding: 2.5vw 0 1.4vw;
	}
	
	/*-- main -----------------------------------*/
	.contents_area{
		padding-top: 10vw;
		padding-bottom: 9vw;
	}
	.content_title{
		font-size: 5vw;
		border-width: 1vw;
		padding-left: 3vw;
		padding-right: 6vw;
		margin-bottom: 6vw;
	}
	
	.mainlist{
		display: block;
		border-bottom: solid 2vw #e8eaed;
		box-sizing: border-box;
		margin-bottom: 8vw;
		padding: 0 5vw 5vw;
	}
	.mainlist_left{
		width: 100%;
		padding-right: 0;
	}
	.mainlist_left_link{
		box-sizing: border-box;
		text-decoration: none;
		line-height: 1.6;
		font-size: 5vw;
		margin-bottom: 3vw;
		word-break: break-all;
	}
	.list_bottom{
		flex-wrap: wrap;
		
		& dt{
			width: 23%;
			text-align: center;
			font-size: 3.2vw;
			box-sizing: border-box;
			margin-right: 3%;
			margin-bottom: 3vw;
			padding: 1vw 0 1vw;
		}
		& dd{
			width: 70%;
			word-break: break-all;
			margin-bottom: 3vw;
			margin-right: 0;
		}
	}
	.mainlist_right{
		width: 100%;
		box-sizing: border-box;
		font-size: 3.8vw;
		padding: 3vw 5vw 2vw;
	}
	
	/*-- ext -----------------------------------*/
	.sample_img.absolute img{
		position: inherit;
	}
	.sample_img{
		margin-bottom: 8vw;
	}
	.ext_files{
		margin-top: 10vw;
		
		& h2{
			padding: 1.5vw 4vw 0.5vw;
		}
	}
	.ext_files_inner{
		max-width: inherit;
		border-width: 1vw;
		padding: 2vw 2.5vw 0;
	}
	.ext_files_link{
		font-size: 3.8vw;
		
		& img{
			width: 4.7vw;
			margin-right: 1vw;
		}
	}
	
	
	/*-- about -----------------------------------*/
	.about_installation_title{
		font-size: 4.8vw;
		margin-block: 15vw 5vw;
	}
	.about_installation p{
		padding: 3vw 0 17vw;
	}
	
	/*-- contact -----------------------------------*/
	.contact_message{
		font-size: 8vw;
		padding-top: 7vw;
	}
}