*{text-align:center; margin:0; padding:0;}
		.ta_c{text-align:center;}
		.fs200p{font-size:200%;}
		.fs175p{font-size:175%;}
		.fs150p{font-size:150%;}
		.fs125p{font-size:125%;}
		.fs90p{font-size:90%;}
		.fs80p{font-size:80%;}
		.fs75p{font-size:75%;}
		.fs70p{font-size:70%;}
		.fs65p{font-size:65%;}
		.fs60p{font-size:60%;}
		.fs55p{font-size:55%;}

		.mt80{margin-top:80px;}
		.mt100{margin-top:100px;}
		.mt125{margin-top:125px;}
		.mt150{margin-top:150px;}
		.mt200{margin-top:200px;}

		a, a:link, a;visited{text-decoration:none;}

		.flcon{display:flex;}
		.flcon-d{display:flex; justify-content: space-between;}
		.flcon-w{display:flex; flex-wrap:wrap;}
		.flcon-wd{display:flex; flex-wrap:wrap; justify-content: space-between;}



		#wrap{position:relative; width:100%; overflow:hidden; min-height:600px;}
		#top_hokaido{width:33.33%; margin:20px auto 0 auto; position:relative;}
		#hokaido{width:100px; animation:hokaido 5s 1 ease 0s; position:absolute; left: calc(50% - 50px); overflow: hidden;}




.flcon{display:flex;}

header{width:100%;}
header .inner{width:100%; max-width:1200px; margin:0 auto;}

header .flcon>div{width:33.33%;}
#campus_logo{width:40%; text-align:right; margin-top:20px;}
#dosanko_logo{width:70%; text-align:left; margin-top:20px; margin-left:5px;}
#logo_title{font-size:16px; font-weight:100; margin-top:9px; text-align:left; color:#efefef;}

@media screen and ( max-width:816px ){
#campus_logo{width:70%; text-align:right; margin-top:20px;}
#dosanko_logo{width:90%; text-align:left; margin-top:20px; margin-left:5px;}
#logo_title{font-size:2.78vw; margin-left:5px; margin-top:6px; margin-bottom:6px;}
}

.inner{width:100%; max-width:1200px; margin:0 auto;}

/*buttonの記述*/
.button {
    display: block;
    width: 22%;
    max-width: 180px;
    margin: 0 auto;
}
.button a {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    border-radius: 4px;
    /*background-color: #aaa;*/
    color: #333;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
    -o-transition: .25s linear;
    -ms-transition: .25s linear;
}
.button a:before {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    margin: 0 auto;
    background-color: #ffb464;
    transition: .25s ease-in-out;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
}
.button a:hover { color: #999; }
.button a:hover:before {
    width: 100%;
    background-color: #ffffff;
}

nav{width:100%; margin:0 auto; padding-top:10px; padding-bottom:10px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#777777+0,dddddd+50,777777+100 */
background: #777777; /* Old browsers */
background: -moz-linear-gradient(top, #777777 0%, #dddddd 50%, #777777 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #777777 0%,#dddddd 50%,#777777 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #777777 0%,#dddddd 50%,#777777 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#777777',GradientType=0 ); /* IE6-9 */
			}

@media screen and ( max-width:1099px ){
nav{width:100%; margin:0; padding:5px 0;}
}

nav ul{display:flex; justify-content:space-between;}
nav ul li{list-style-type:none; display:inline-block; width:calc(25% - 10px);}


/*#wrap*/
#wrap{width:100%; max-width:1400px; margin:0 auto;}
@media screen and ( max-width:816px ){
#wrap{width:calc(100% - 10px); margin:0 auto;}
}


/*#main*/
*{color:#fff;}
.topbox01>div{width:calc(32.33% - 16px); max-width:340px; margin-top:20px; margin-bottom:20px; border:4px double #fff; padding:8px;}
.topbox01>div p{text-align:left; margin-top:30px; font-size:85%; letter-spacing:1px;}
	@media screen and ( max-width:816px ){
	.topbox01>div p{font-size:3.3vw;}
	}

#main .flcon>div{margin-top:125px;}
	@media screen and ( max-width:816px ){
	#main .flcon>div{margin-top:45px;}
	}

#footer{text-align:left;}
#footer_area_twon{width:100%; max-width:800px; margin:0px auto 30px auto; overflow:hidden; line-height:1.8; color:#eee; padding-top:30px;}
#footer_area_twon dd{margin-left:30px; margin-bottom:20px;}
#footer_area_twon dd span{color:#eee;}
#footer_area_twon dt, #footer_area_twon dd{font-size:13px;}
	@media screen and ( max-width:816px ){
	#footer_area_twon dt{margin-left:10px; margin-right:10px; font-size:3.1vw;}
	#footer_area_twon dd{margin-left:20px; margin-right:20px; font-size:3.1vw;}
	.topbox01>div{width:49%;}
	}

footer h3 #footer_dosanko_logo{width:35%; max-width:200px; margin:20px auto;}


		@media screen and ( max-width:816px ){
		#main2 h2{text-align:left;}
		}

/*koushinsystem*/
		@media screen and ( max-width:816px ){
		#koushinsystem h3{font-size:4.2vw;}
		#koushinsystem p{font-size:3.3vw; margin-bottom:0.6em;}
		}

/*追記*/
header h2 abbr[title]{border:none;}