@charset "UTF-8";
/* CSS Document */

/*共通*/
html{
	font-family: 'Noto Sans JP', sans-serif;
}

body{
	font-weight: 400;
	color: #333333;

}
a{
	text-decoration: none;
	color: #333333;
}

a:hover{
	transition: 0.3s;
	opacity: 0.7;
	cursor: pointer;
}

.only-pc{
	display: block;
}

.only-sp,
.gnsp a.logo{
	display: none;
}

.inner{
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	overflow: visible;
	position: relative;
	padding: 0 10px;
	box-sizing: border-box;
}

header{
    background: url(/img/line.png) center bottom repeat-x;
    padding-bottom: 7px;
}

header .inner{
	padding-top: 10px
}

header h1{
	margin: 0 0 10px;
	max-width: 270px;
	max-height: 40px
}

header h1 a{
	display: flex;
	align-items: center;
	font-size: 24px;
    font-weight: 600;
}

header h1 a img,
.gnsp a.logo{
	width: 70px;
	margin-right: 20px
}

.hbgm{
	display: none;
}

.submenu{
	position: absolute;
	right: 10px;
	top: 20px;
	display: flex;
	font-size: 14px;
	font-weight: 600
}

.submenu li+li{
	margin-left: 30px
}

.submenu a:before,
a.btn:before{
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #333333;
    margin-right: 6px
}

.submenu .btn a,
a.btn{
	background-color: #004d86;
	padding: 8px 20px;
	border-radius: 8px;
	color: #fff
}

.submenu .btn a:before,
a.btn:before{
    border-left: 6px solid #fff;
}


.mainmenu{
	display: flex;
	width: 100%;
	font-weight: 600;
	position: relative;
}

.mainmenu:before{
	content: "";
	height: 1px;
	background-color: #dbdbdb;
	width: 200vw;
	left: -100vw;
	position: absolute;
}

.mainmenu li{
	flex-basis: 25%;
	border-left: 1px solid #dbdbdb;
}

.mainmenu li:last-child{
	border-right: 1px solid #dbdbdb;
}

.mainmenu li a{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	padding: 20px
}

.mainmenu li a img{
	width: 55px;
	height: auto;
	margin-right: 15px
}


/*町並み*/
.town{
	background: url(/img/head_bg.png) center top repeat-x;
	background-size: contain;
	padding: 20px 0 60px;
	position: relative;
	margin-bottom: 50px
}

.town:after{
	content: "";
	height: 50px;
	width: 100vw;
	background: url(/img/town.svg) center top repeat-x;
	background-size: auto 50px;
	position: absolute;
	bottom: 0
}



/*スライダー*/
.swiper{
	max-width: 770px;
	width: 100%;
	height: 350px;
	overflow: visible;
}

.swiper li img{
	height: 350px;
	width: 770px;
	border:1px solid #dbdbdb 
}

.swiper-slide{
	transform: scale(0.85);
	transition: 0.2s;
	opacity: 0.8
}

.swiper-slide-active{
	transform: scale(1);
	opacity: 1
}

.swp-btn{
	display: none;
}

.active .swp-btn{
	display: block;
	width: auto;
}

.swiper-button-prev img, .swiper-rtl .swiper-button-next img,
.swiper-button-next img, .swiper-rtl .swiper-button-prev img{
	height: 50px;
	width: 50px
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
	display: none;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next{
	left: -80px
}

.swiper-button-next, .swiper-rtl .swiper-button-prev{
	right: -80px
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
	bottom: -30px;
	display: none;
	width: 100%
}

.swiper-pagination-bullet-active {
    background-color: #004d9e;
}

.block{
	margin-top: 50px
}

.block h2{
	font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}

.column{
	display: flex;
	justify-content: space-between;
}

.column>li{
	max-width: 470px;
	flex-basis: 50%
}

.column>li+li{
	margin-left: 20px
}

.caption{
	font-size: 16px;
    font-weight: 600;
    padding: 10px 30px 10px 25px;
    background-color: #f3f3f3;
    position: relative;
    border-left: 5px solid #004d9d;
}

.caption .more{
	font-size: 12px;
	position: absolute;
    right: 20px;
    display: inline-flex;
    align-items: center;
    top: 15px;
}

.caption .more:before{
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #333333;
    margin-right: 6px
}

.news-list{
    padding: 5px 20px;
    border: 1px solid #cecece;
    font-size: 14px;
    font-weight: 400;
    height: 200px;
    overflow-y: scroll;
}

#info .news-list{
	border: none;
	height: auto;
	padding: 0
}

.news-list li {
    border-bottom: 1px solid #cecece;
    padding: 15px 0;
}

.news-list li a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}

.news-list li a .date {
    width: 85px;
}

.news-list li a .tag{
	font-size: 10px;
    font-weight: 600;
    border-radius: 5px;
    padding: 2px 0;
    width: 60px;
    text-align: center;
}

.tag-rec{
	color: #e08016;
	border: 2px solid #e08016;
}

.tag-new{
	color: #008200;
	border: 2px solid #008200;
}

.tag-change{
	color: #b52a0c;	
	border: 2px solid #b52a0c;

}

.news-list li a .title {
    width: calc(100% - 145px);
    box-sizing: border-box;
    padding-left: 10px
}

#home .bnr{
	display: flex;
	justify-content: center;
	margin-top: 100px
}

#home .bnr li{
	width: 280px
}

#home .bnr li+li{
	margin-left: 20px
}

#home .bnr a{
	display: block;
}

/*フッター*/
footer{
	background-color: #e6e9eb;
	padding: 20px 10px 15px;
	margin-top: 50px
}

.seconde footer{
	margin-top: 100px
}

footer h4{
	text-align: center;
	margin-bottom: 30px
}

footer img{
	width: 120px
}

footer ul{
	font-size: 12px;
	display: flex;
	max-width: 750px;
	justify-content: space-between;
	margin:0 auto 30px;
}

footer p{
	font-size: 10px;
	font-weight: 400;
	text-align: center;
	color: #666666;
}

.breadcrumb{
	font-size: 12px;
	display: flex;
	align-items: center;
	margin: 30px 0;
	font-weight: 600;
}

.breadcrumb img{
	height: 6px;
	width: 22px;
}
.breadcrumb a{
	color: #004d9d;
	text-decoration: underline;
}

.main{
	display: flex;
}

/*サイドナビ*/
.side{
	margin-right: 50px;
	width: 260px;
}

.side-nav{
	border-bottom: 1px solid #d7d7d7;
	margin-bottom: 80px;
}

.side-nav li{
	height: 60px;
	font-size: 18px;
	font-weight: 600;
	border-top: 1px solid #d7d7d7;
}

.side-nav>li:first-child{
	border-left: 5px solid #13a7c2;
}
.side-nav>li:nth-child(2){
	border-left: 5px solid #4abdb7;
}
.side-nav>li:nth-child(3){
	border-left: 5px solid #ffb650;
}

.side-nav>li:last-child{
	border-left: 5px solid #ea8484;
}

.side-nav li a span{
	padding-left: 30px;
}
.side-nav li a{
	 width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.side-nav li a.ext:after{
	content: "";
    background: url(/img/outlink_bk.gif);
    width: 16px;
    height: 16px;
    position: absolute;
    display: block;
    right: 10px;
    top: 18px;
    background-size: 100%;
}

.side-nav .inner-list{
	background-color: #fffcf9;
}

.side-nav .inner-list li{
	font-size: 16px;
	height: 50px;
}

.side-banner li+li{
	margin-top: 10px;
}

/*メインコンテンツ*/
.content{
	width: calc(100% - 310px);
	font-size: 14px
}

.full-column .content{
	width: 100%
}

.section+.section{
	margin-top: 100px
}

.box+.box{
	margin-top: 60px
}

.box .box+.box{
	margin-top: 30px
}

.seconde .content h2{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    padding: 10px 30px;
    background-color: #f3f3f3;
    border-left: 5px solid #004d9d;
}

.seconde .content .txt-cap{
	font-weight: 600
}

.seconde .content .sec-cap{
	margin-bottom: 10px;
	border-bottom: 2px solid #f4f4f4;
	padding-bottom: 10px
}

.seconde .content .line-cap{
	width: 100%;
    border-bottom: 4px solid #f4f4f4;
    font-weight: 600;
    font-size: 18px;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.seconde .content .line-cap span{
	font-size: 12px;
	display: block;
}

#routemap .btn{
	background-color: #4da6bf;
}

.map{
	display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 4px
}

.map img{
	width: 450px;
	height: auto;
}

#timetable .box table{
	width: 100%;
	margin-left: 0 !important;
	border: 1px solid #d7d7d7
}

#timetable .box table th,
#timetable .box table td{
	padding: 10px
}

#timetable .box table th,
#timetable .box table #table_item_1{
	background-color: #6bbbb6;
	border: 1px solid #d7d7d7;
	color: #fff;
	font-weight: 600;
	font-size: 14px !important;
}

#timetable .box table #table_item_1{
	text-align: center;
	vertical-align: middle;
}

#timetable .box table a{
	color: black;
    text-decoration: underline;
    font-weight: 600
}

#timetable .box table #table_item_1 a{
	align-items: center;
	display: block;
	margin-top: 8px;
	text-decoration: none;
}

#timetable .box table #table_item_1 img{
	width: 30px;
	height: auto;
}

#timetable .box table tr:first-child #table_item_1 img{
	width: 16px;
	height: auto;
	margin: 6px 0 0 10px !important
}

#timetable .box table #table_item_3{
	border-bottom: 1px solid #d7d7d7;
	font-size: 14px !important;
}

.vehicle{
	display: flex;
	justify-content: space-between;
}

.vehicle li{
	flex-basis: 49%
}

.guide-index{
	width: 80%;
	margin: 0 auto -40px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 18px;
	font-weight: 600;
}

.guide-index li{
	width: calc(50% - 20px);
	margin-bottom: 40px;
	border: 1px solid #dbdbdb;
}

.guide-index li a p{
	padding: 16px 20px;
	line-height: 1;
	border-top: 1px solid #dbdbdb;
	position: relative;
}

.guide-index li a.ext p:after{
	content: "";
    background: url(/img/outlink_bk.gif);
    width: 16px;
    height: 16px;
    position: absolute;
    display: block;
    right: 10px;
    top: 18px;
    background-size: 100%;
}

.guide .content .btn-box{
	display: flex;
	justify-content: space-between;
}

.guide .content .btn-box li{
	width: 48%
}

.guide .content a.btn{
	display: block;
	font-weight: 600
}

.guide .content a.btn{
    background-color: #fffcf9;
    border: 1px solid #ffb650;
    color: black;
}

.guide .content .btn-box li:last-child a.btn{
    background-color: #f1fbff;
    border: 1px solid #9ad7ef;
}

    
.guide .content a.btn:before {
    border-left: 6px solid #000;
}

.guide .content p+a.btn{
	margin-top: 10px
}

.guide .content a.btn.full{
	height: 60px;
	text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.guide .content a.btn.full.ext:after{
	content: "";
    background: url(/img/outlink_bk.gif);
    width: 16px;
    height: 16px;
    position: relative;
    display: inline-block;
    margin-left: 10px;
    margin-top: 2px;
    background-size: 100%;
}

.table-list{
	border-bottom: 1px solid #dbdbdb;
	display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.table-list,
.discount,
.pass{
	margin-top: 8px;
}

.table-list,
.discount{
	width: 100%;
}

.table-list dt,
.table-list dd,
.discount th,
.discount td,
.pass th,
.pass td,
.base-table table th,
.base-table table td{
	padding: 10px
}

.table-list dt,
.discount th,
.pass th,
.base-table table th{
	background-color: #f4f4f4;
    width: 140px;
	border: 1px solid #dbdbdb;
	border-bottom: none;
	font-weight: 600;
}

.discount th,
.discount td,
.pass th,
.pass td,
.base-table table th,
.base-table table td{
	border: 1px solid #dbdbdb;
}

.discount th:last-child{
	width: auto;
}

.pass th:first-child{
	width: 160px;
}

.pass th,
.pass td{
	width: 164px;
}

.table-list dd{
	width: calc(100% - 140px);
	border: 1px solid #dbdbdb;
	border-left: none;
	border-bottom: none;
}

.table-list span{
	color: #DF0003;
	font-weight: 600;
}

#how-to .content .btn-box{
	margin-top: 8px
}

#how-to .content a.btn:before{
	transform: rotate(90deg);
	position: relative;
    top: 2px;
}

img.tutorial{
	height: auto;
	width: 256px;
}

.howto{
	display: flex;
}

.howto>li+li{
	margin-left: 20px
}

.howto-txt dd,
.howto-txt dt{
	padding: 10px;
	margin-top: -1px
}

.howto-txt dd{
	font-weight: 600
}

#mae .howto-txt dd{
	background-color: #fffcf9;
	border:1px solid #ffb650;
}

#mae .howto-txt dt{
	border:1px solid #ffb650;
}

#naka .howto-txt dd{
	background-color: #f1fbff;
	border:1px solid #9ad7ef;
}

#naka .howto-txt dt{
	border:1px solid #9ad7ef;
}

.howto-txt dt>ul>li+li{
	margin-top: 8px
}

.notice-box{
	display: flex;
    flex-direction: column;
	border:1px solid #bd4e63;
}

.notice-box dd{
	padding: 10px;
	font-size: 16px
}

.notice-box dt{
	padding: 20px
}

.notice-box dd{
	background-color: #bd4e63;
	color: #fff;
	text-align: center;
	font-weight: 600
}

.notice-list{
	padding-left: 12px;
	text-indent: -12px;
	margin-top: 10px
}

.notice-list li+li{
	margin-top: 6px
}

.notice-list li span{
	color: #DF0003;
	font-weight: 600
}

.img-txt{
	display: flex;
	align-items: center;
}

.img-txt.buzzer img,
.img-txt.board img{
	height: 150px;
	width: auto;
}

.img-txt li+li{
	margin-left: 20px
}

.base-table .map-box table{
	width: 55%
}

#company iframe{
	width: 40%
}

#company .map-box{
	display: flex;
	justify-content: space-between;
}

.base-table .other-box table{
	width: 100%
}

.base-table .other-box table tbody{
	display: flex;
	flex-wrap: wrap;
}

.base-table .other-box table br{
	display: none;
}

.base-table .other-box table tr{
	display: flex;
	flex-direction: row-reverse;
	width: 50%
}

.base-table .other-box table tr th{
	width: 100%;
	background-color: #fff;
	display: flex;
    align-items: center;
}

.base-table .other-box table tr td{
	width: 60px;
	text-align: center;
}

.base-table .other-box table img{
	width: 40px;
	height: auto;
}

#inquiry table,
#inquiry table+p{
	width: 80%;
	margin: 0 10%
}

#inquiry .tell span{
	font-size: 30px;
	color: #DF0003;
	font-weight: 600;
	display: block;
}

#inquiry table+p{
	margin-top: 8px
}

#recruit .outer{
	background: url(/img/recruit_bg.png) center top repeat-x;
	background-size: auto;
	padding-top: 30px
}

#recruit .breadcrumb{
	margin: 0 0 30px
}



#recruit table,
#recruit dl{
	width: 80%;
	margin: 0 10%
}

#recruit table th{
	background-color: #6bbbb6;
	color: #fff
}

#recruit table td{
	background-color: #fff
}

#recruit dl.superiority{
	display: flex;
	flex-direction: column;
	margin-top: 30px;
	font-size: 16px;
	border:4px solid #dc8987;
	border-radius: 10px
}

#recruit dl.superiority dd{
	text-align: center;
	background-color: #dc8987;
	font-weight: 600;
	color: #fff;
	padding: 10px
}

#recruit dl.superiority dt{
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	padding: 20px
}

#recruit dl.superiority dt ul+ul{
	border-top:4px dotted #dc8987;
	margin-top: 20px;
	padding-top: 20px
}

#recruit .img-txt a{
    color: #004d9d;
    text-decoration: underline;
}

#recruit h3.rec-cap{
	text-align: center;
	font-weight: 600;
	margin-bottom: 20px;
	font-size: 16px
}

#recruit h3.rec-cap span{
	display: inline-block;
	padding-bottom: 6px;
}

#recruit h3.rec-cap.youkou span{
	border-bottom: 4px solid #6bbbb6;
}

#recruit h3.rec-cap.senkou span{
	border-bottom: 4px solid #4da6bf
}

#recruit h3.rec-cap.kyouiku span{
	border-bottom: 4px solid #f4b863
}

#recruit .education-box{
	display: flex;
	justify-content: space-between;
}

#recruit .education-box li{
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	flex-basis: 22%;
	padding: 20px;
	position: relative;
	text-align: justify;
}

#recruit .education-box li:after{
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #f4b863;
    position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: -12%
}

#recruit .education-box li:last-child:after{
	content: none;
}

#recruit .education-box li h4{
	border-bottom: 2px solid #f4b863;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-weight: 600;
	text-align: center;
}

.img-txt.mark img{
	height: 100px;
	width: auto;
}

.img-txt.photo img{
	height: 140px;
	width: auto;
}

#recruit .education ul+ul{
	border-top:4px dotted #f4b863;
}

#recruit .img-txt.photo{
	width: 80%;
	margin: 40px 10% 0;
	padding-top: 40px
}

#recruit .btn-box{
	text-align: center;
	display: flex;
	flex-direction: column;
    align-items: center;
}

#recruit .btn-box a.btn{
    min-width: 50%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.2)
}

#recruit .flow p{
	text-align: center;
}

#recruit .flow p.notice{
	text-align: justify;
	font-size: 10px;
	line-height: 16px;
	margin-top: 10px
}

#recruit .flow-box{
	width: 80%;
	margin: 0 10%;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#recruit .flow-box dd,
#recruit .flow-box dt{
	padding: 10px;
	height: 50px
}

#recruit .flow-box dd{
	width: 100px;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	background-color: #4da6bf;
	border-radius: 10px 0 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#recruit .flow-box dt{
	width: calc(100% - 100px);
	border-radius: 0 10px 10px 0;
	border: 4px solid #4da6bf;
}

#recruit .flow-box dt+dd,
#recruit .flow-box dt+dd+dt{
	margin-top: 10px
}


/*メディアクエリ基準値*/
@media screen and (max-width: 768px){

	.only-pc,
	.side{
		display: none;
	}

	.only-sp{
		display: block;
	}

	body.fixed {
	    position: fixed;
	    width: 100%;
	}

	header .inner{
		height: 50px
	}

	header h1{
		max-width: 200px
	}

	header h1 a,
	.gnsp a.logo{
		font-size: 16px;
		max-width: 200px;
	}

	header h1 a img,
	.gnsp a.logo img{
		margin-right: 10px;
		width: 60px
	}

	.gnsp {
	  position: fixed;
	  height: 100vh;
	  z-index : 18;
	  top  : 0;
	  left : 0;
	  background: rgba(255,255,255,1);
	  text-align: left;
	  width: 100%;
	  opacity: 0;
	  visibility:hidden;
	  transition: 0.2s
	}

	.gnsp a.logo{
		left: 0;
		top: 10px;
		margin-left: 10px;
		position: absolute;
		display: flex;
		align-items: center;
		font-weight: 600;
		width: 200px
	}

	.gnsp.active {
	  opacity: 1;
	  visibility: visible;
	}

	.hbgm {
		display: block;
		position: fixed;
		z-index: 19;
		right: 0;
		top: 0;
		width: 50px;
		height: 50px;
		cursor: pointer;
		text-align: center;
		background-color: #004d9e;;
	}

	.hbgm span {
	  display : block;
	  position: absolute;
	  width   : 25px;
	  height  : 1px ;
	  left    : 15px;
	  background : rgba(255,255,255,1);
	  -webkit-transition: 0.3s ease-in-out;
	  -moz-transition   : 0.3s ease-in-out;
	  transition        : 0.3s ease-in-out;
	}

	.hbgm span:nth-child(1) {
	  top: 20px;
	}

	.hbgm span:nth-child(2) {
	  top: 25px;
	}

	.hbgm.active span:nth-child(1) {
	  top : 23px;
	  left: 15px;
	  background :rgba(255,255,255,1) !important;
	  -webkit-transform: rotate(-45deg);
	  -moz-transform   : rotate(-45deg);
	  transform        : rotate(-45deg);
	}

	.hbgm.active span:nth-child(2){
	  top: 23px;
	  background :rgba(255,255,255,1) !important;
	  -webkit-transform: rotate(45deg);
	  -moz-transform   : rotate(45deg);
	  transform        : rotate(45deg);
	}

	.submenu{
		top: 380px;
		right: auto;
		left: 10px
	}

	.mainmenu{
		flex-flow: column;
		position: absolute;
		top: 50px
	}

	.mainmenu li{
		border-bottom: 1px solid #dbdbdb
	}

	.mainmenu li a{
		padding: 10px
	}

	.swiper{
		height: auto;
	}

	.swiper li img{
		height: auto;
		width: 100%;
	}

	.swp-btn,.active .swp-btn{
		display: none;
	}

	.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
		display: block;
	}

	.town{
		margin-top: 0px;
		margin-bottom: 30px;
		padding-top: 30px
	}

	.block{
		margin-top: 40px
	}

	.block h2{
		font-size: 18px;
		margin-bottom: 10px
	}

	.column{
		flex-direction: column-reverse;
	}

	.column>li{
		max-width: 100%
	}

	.column>li+li{
		margin-bottom: 20px;
		margin-left: 0
	}

	.caption{
		font-size: 14px
	}

	.news-list{
		font-size: 12px
	}

	.news-list li{
		padding: 10px 0
	}

	.news-list li a{
		flex-wrap: wrap;
	    justify-content: flex-start;
	}

	.news-list li a .tag{
		padding: 0;
	}

	.news-list li a .title{
		padding-left: 0;
		width: 100%;
		margin-top: 6px
	}

	#home .bnr{
		margin-top: 50px;
		padding-top: 50px;
		border-top: 1px solid #cecece;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#home .bnr li{
		margin-bottom: 10px;
		width: calc(50% - 5px)
	}

	#home .bnr li+li{
		margin-left: 0px;
	}

	footer{
		margin-top: 40px
	}

	footer ul{
		flex-wrap: wrap;
	}

	footer ul li{
		width: 50%;
		padding: 6px 10px 6px 0
	}

	footer ul li:nth-child(2n){
		border-left: 1px solid #cecece;
		padding-left: 10px;
		padding-right: 0
	}

	footer ul li a{
		display: block;
		border-bottom: 1px solid #cecece;
	}

	.breadcrumb{
		font-size: 10px;
		margin: 20px 0
	}

	.main,
	.content{
		width: 100%;
		display: block;
	}

	.seconde .content h2{
		font-size: 18px;
		padding: 10px 20px
	}

	.map{
		flex-direction: column;
	}

	.map img{
		width: 100%;
		margin-bottom: 20px
	}

	.guide-index li{
		width: 100%;
	}

	.guide .content .btn-box{
		flex-direction: column;
	}

	.guide .content .btn-box li{
		width: 100%
	}

	.guide .content .btn-box li+li{
		margin-top: 10px
	}

	.table-list dt,
	.discount th{
		width: 100px
	}

	.table-list dd{
		width: calc(100% - 100px);
	}

	.pass th:first-child{
		width: 80px;
	}

	.pass.pass-counter th:first-child{
		width: 130px;
		font-size: 12px
	}

	.pass th,
	.pass td{
		width: auto;
	}

	.howto{
		flex-direction: column;
	}

	img.tutorial{
		width: 80%;
		margin: 0 10%
	}

	.howto>li+li{
		margin-left: 0;
		margin-top: 10px
	}

	.img-txt.board img{
		height: 100px
	}

	#company .map-box{
		flex-direction: column;
	}

	.base-table .map-box table,
	#company iframe{
		width: 100%
	}

	#company iframe{
		margin-top: 20px
	}

	.base-table .other-box table tr{
		width: 100%
	}

	#inquiry table{
		width: 100%;
		margin: 0
	}

	#recruit .outer{
		padding-top: 20px
	}

	#recruit .breadcrumb{
		margin-bottom: 20px
	}

	#recruit table,
	#recruit dl,
	#recruit .flow-box,
	#recruit .btn-box a.btn{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	#recruit dl.superiority dt{
		padding: 10px;
		font-size: 14px
	}

	#recruit .education-box{
		flex-direction: column;
	}

	#recruit .education-box li+li{
		margin-top: 30px
	}

	#recruit .education-box li:after{
		transform:translate(0, 0) rotate(90deg);
		right: calc(50% - 5px);
		bottom: -25px;
		top: auto;
	}

	.img-txt.photo{
		flex-direction: column;
	}

	.img-txt.photo img{
		height: auto;
		width: 100%
	}

	.img-txt.photo li+li{
		margin-left: 0;
		margin-top: 10px
	}

	#recruit table th,
	#recruit table td{
		display: block;
		width: 100%
	}
}
/*メディアクエリ基準値*/