@charset "UTF-8";

/* =Reset
-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;word-wrap:break-word;overflow-wrap:break-word;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:inherit;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:super;}
sub{vertical-align:text-bottom;}
input,textarea,select,button{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select,button{*font-size:100%;}
legend{color:#000;}
img {vertical-align:top;}
input[type="radio"],input[type="checkbox"] {vertical-align: -2px;}
label {cursor: pointer;}

/* = all
-------------------------------------------------------------- */
@media (hover){
	a, a img, input[type="submit"], input[type="reset"], svg * {
		transition-property: color, background-color, background, border-color, fill, opacity;
		transition-duration: .3s;
	}
}
a img:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
	opacity: 0.7;
}
a {
	text-decoration: none;
}
img , svg {
	max-width: 100%;
	height: auto;
}
input[type="submit"],input[type="reset"] {
	-webkit-appearance: none;
}
.cf:before,
.cf:after {
	content:"";
	display:table;}
.cf:after {clear:both;}
body {
	color: #000;
	background: #fff;
	font-size: 17px;
	line-height: 1.5;
	text-align: left;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", "Osaka",sans-serif;	
}
/* css */
.fl {float: left;}
.fr {float: right;}
.ta_l {text-align: left;}
.ta_c {text-align: center;}
.ta_r {text-align: right;}
.va_t {vertical-align: top;}
.va_b {vertical-align: bottom;}
.va_m {vertical-align: middle;}
.lh17 {line-height: 1.7;}
.lh20 {line-height: 2;}
.bold {font-weight: bold;}

/* =Styles 
-------------------------------------------------------------- */
.container{
	max-width: 1020px;
	width: 100%;
	background: #f5f5f5;
	margin: 0 auto;
}
.inner{
	padding: 0 2%;
}
.sp {
	display: none;
}
.operation{
	text-align: center;
	background: #d4d4d4;
	padding: 10px 0;
}
.operation .name{
	display: block;
}
.cp{
	display: block;
	background: #aeaeae;
	padding: 10px 0;
	font-size: 12px;
	text-align: center;
}
.header{
	background: #65e8fa;
}
.linkbox{
	text-align: center;
	background: #000;
	margin: 0 0 80px;
}
.linkbox li{
	float: left;
	width: 50%;
	padding: 2% 0;
}
.linkbox li a {
	color: #fff;
}
@media (hover: hover) {
	.linkbox li a:hover {
		color: #9eff57;
	}
}
.hdtb{
	display: table;
	padding: 2%;
}
.appic{
	display: table-cell;
	vertical-align: middle;
	width: 20%;
}
.appic img{
	max-width: 200px;
}
.apptit{
	display: table-cell;
	vertical-align: middle;
	padding: 0 0 0 4%;
	font-size: 45px;
	font-weight: bold;
	color: #31337d;
}
@media (hover: hover) {
	.header a:hover .apptit {
		color: #31337d;
	}
	.header a:hover img {
		opacity: 0.7;
	}
}
.mainbox{
	margin: 0 0 80px;
}
.sec{
	margin: 0 0 40px;
}
.top .sec{
	margin: 0 0 80px;
}
.sectit{
	text-align: center;
	font-size: 40px;
	margin: 0 0 30px;
}
.sectit p{
	display: inline-block;
	border-bottom: 2px solid #a5a5a5;
}
.secimg{
	margin: 0 0 30px;
}
.sectxt{
	width: 90%;
	margin: 0 auto;
}
.sectxt p + p {
	margin: 1em 0 0;
}
.sectxt dl dt {
	font-weight: bold;
	padding: 0 0 0.5em;
}
.sectxt dl dd {
	margin: 0 0 1em;
}
.sectxt dl dd:last-of-type {
	margin: 0;
}
.sectxt ul {
	line-height: 2;
}
.sectxt ul li {
	text-indent: -1em;
	padding-left: 1em;
}
.mintit{
	font-size: 22px;
	font-weight: bold;
	padding: 0 0 0.5em;
}

@media ( max-width: 768px ){
	.sectit {
		font-size: 32px;
		font-weight: bold;
	}
}
@media ( max-width: 480px ){
	body {
		font-size: 3.73vw;
	}
	.sp {
		display: block;
	}
	.linkbox {
		margin: 0 0 10vw;
	}
	.mainbox{
		margin: 0 0 10vw;
	}
	.sec{
		margin: 0 0 5vw;
	}
	.top .sec{
		margin: 0 0 10vw;
	}
	.secimg{
		margin: 0 0 4vw;
	}	
	.appic {
		width: 30%;
	}	
	.appic img {
		max-width: 100%;
	}
	.apptit {
		font-size: 8vw;
	}
	.sectit {
		font-size: 5.33vw;
		margin: 0 0 4vw;
	}
	.mintit {
		font-size: 4vw;
		padding: 0 0 0.2em;
	}
}