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

@media screen and (max-width: 1024px) {
	
	#header { display: none; }
	
	#header_sp {
		display: block;
		width: 100%;
		position: fixed!important;
		margin: 0 auto;
		box-shadow: none;
		background: #fff;
		z-index: 200;
	}
	#header_sp .logo { width: 80px; padding-left: 3%; line-height: 0; }
	#header_sp .logo h1 { width: 200px; margin: 15px 0; }
	#header_sp .logo img { height: 40px; }
	
	
	/*========== sp_menu ==========*/
	#nav-toggle {
		display: block;
		position: fixed;
		top: 10px;
		right: 10px;
		height: 28px;
		cursor: pointer;
	}
	#nav-toggle > div { position: relative; width: 36px; }
	#nav-toggle span {
		width: 100%;
		height: 3px;
		left: 0;
		display: block;
		background: #008299;
		position: absolute;
		transition: top .5s ease, -webkit-transform .6s ease-in-out;
		transition: transform .6s ease-in-out, top .5s ease;
		transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
	}
	#nav-toggle span:nth-child(1) { top: 0; }
	#nav-toggle span:nth-child(2) { top: 12px; }
	#nav-toggle span:nth-child(3) { top: 24px; }
	#nav-toggle:hover span:nth-child(1) { top: 4px; }
	#nav-toggle:hover span:nth-child(3) { top: 20px; }
	
	.open #nav-toggle span { background: #008299; }
	.open #nav-toggle span:nth-child(1) {
		top: 13px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.open #nav-toggle span:nth-child(2) {
		top: 15px;
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 13px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
	/* z-index */
	nav { width: 90%; margin-top: 20px; margin-bottom: 60px; }
	
	#nav-toggle {
		z-index: 1000;
		padding: 12px 10px;
		background: #fff;
	}
	#container { z-index: 900; }
	#gloval-nav {
		background: rgba(0,130,153,1);
		color: #fff;
		position: fixed;
		top: 70px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		text-align: center;
		display: flex;
		visibility: hidden;
		flex-direction: column;
		/*justify-content: center;*/
		align-items: center;
		font-size: 1.1em;
		letter-spacing: 3px;
		opacity: 0;
		transition: opacity .6s ease, visibility .6s ease;
		overflow: scroll;
		overflow-y: auto;
	}
	
	#gloval-nav a {
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 1.2em 3em;
		transition: color .6s ease;
		border-bottom: 1px #fff solid;
		box-sizing: border-box;
		width: 100%;
	}
	#gloval-nav a:hover { color: #2E9648; background: #fff; }
	#gloval-nav ul { list-style: none; padding: 0; }
	#gloval-nav ul li {
		opacity: 0;
		-webkit-transform: translateX(200px);
		transform: translateX(200px);
		transition: opacity .2s ease, -webkit-transform .6s ease;
		transition: transform .6s ease, opacity .2s ease;
		transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
	}
	#gloval-nav ul li:nth-child(2) { transition-delay: .15s; }
	#gloval-nav ul li:nth-child(3) { transition-delay: .3s; }
	#gloval-nav ul li:nth-child(4) { transition-delay: .45s; }
	#gloval-nav ul li:nth-child(5) { transition-delay: .6s; }
	#gloval-nav ul li:nth-child(6) { transition-delay: .75s; }
	#gloval-nav ul li:nth-child(7) { transition-delay: .9s; }
	
	/* open */
	.open { overflow: hidden; }
	.open #gloval-nav { visibility: visible; opacity: 1; }
	.open #gloval-nav li {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		transition: opacity .9s ease, -webkit-transform 1s ease;
		transition: transform 1s ease, opacity .9s ease;
		transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
	}
	
	#gloval-nav .sp_logo { position: absolute; left: 20px; top: 20px; }
	#gloval-nav .sp_logo a {
		display: block;
		padding: 0em!important;
		border-bottom: 0px!important;
	}
	#gloval-nav .sp_logo a:hover { background: none; }
	#gloval-nav .sp_logo a img {}
	
	#gloval-nav .tel01 {
		display: block;
    	width: 100%;
		color: #fff;
		font-size: 2em;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		letter-spacing: 1px;
		margin-bottom: 50px;
	}
	#gloval-nav .tel02 {
		display: block;
    	width: 100%;
		color: #fff;
		font-size: 1em;
		letter-spacing: 1px;
		margin-bottom: 50px;
	}
	
	
	/*========= main visual =========*/
	#mv { width: 100%; height: 700px; }
	#mv .inner { width: 100%; max-width: 1200px; min-width: auto; }
	
	#mv .greeting { right: 25.5%; left: 25.5%; }
	#mv .sign { right: 50px; top: 130px; border: 5px #fff solid; }
	
	
	/*========= footer =========*/
	#footer .inner { width: 90%; padding: 80px 0; }
	#footer .inner .menu {
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
	}
	#footer .inner .menu .ul01 {
		list-style: none;
		padding: 0px 0 30px;
		display: flex;
		display: -webkit-flex;
	}
	#footer .inner .menu .ul01 li { margin-right: 30px; }
	#footer .inner .menu .ul01 li:last-child { margin-right: 25px; padding-top: 0px; }
	#footer .inner .menu .ul01 li img { width: 120px; margin-top: 10px; }

	#footer .inner .menu .ul02 { padding: 10px 0 30px; display: flex; display: -webkit-flex; }
	#footer .inner .menu .ul02 li { margin-right: 30px; }
	#footer .inner .menu .ul02 li:last-child a { padding: .6em 3em; }
	
	
	/*========= common =========*/
	.main_contents01 .inner { width: 90%; padding: 150px 0 60px 0; }	
	.main_contents02 .inner { width: 90%; padding: 20px 0 60px 0; }
	
	
	/*========= top =========*/
	#top_contents01 .inner {
		width: 100%;
    	padding: 60px 60px;
    	margin-top: -80px;
		box-sizing: border-box;
	}
	
	#top_contents04 .inner .staff { width: 100%; margin: 0 auto 50px auto; }
	#top_contents04 .inner .staff ul { list-style: none; padding: 0; flex-wrap: wrap; }
	#top_contents04 .inner .staff ul li { width: 18%; }
	#top_contents04 .inner .staff ul li img { width: 100%; }
	
	#top_contents04 .inner { width: 90%; padding: 80px 0; }
	#top_contents04 .inner .com .box01 { width: 20%; }
	#top_contents04 .inner .com .box02 { width: 54%; }
	#top_contents04 .inner .com .box03 { width: 20%; }
	#top_contents04 .inner .com .box02 .td01 { padding: .5em; }
	#top_contents04 .inner .com .box02 .td02 { padding: .5em; }
	
	
	/*========= contact =========*/
	.toi_box {
    	padding: 1.5em;
    	line-height: 2em;
    	background: #fff;
	}
	.toi_box tr:first-child th,
	.toi_box tr:first-child td { display: block; }
	.toi_box tr:first-child td { border-top: none; }
	.toi_box th { display: block; border: none; padding-bottom: 0; }
	.toi_box td { display: block; }
	
	.from_text01 { width: 90%; }
	.from_text02 { width: 50%; }
	.from_text03 { width: 90%; }

	.t_from_text { width: 90%; }
	
	.toi_box .btn01 { width: 40%; }
	.toi_box .btn02 { width: 40%; }
	
}



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

	/*========= main visual =========*/
	#mv { width: 100%; height: 500px; }
	#mv .inner { width: 100%; min-width: auto; }
	
	#mv .inner .logo { width: 210px; height: 140px; }
	#mv .inner .logo img  { width: 100%; }
	
	#mv .inner .message { right: 120px; top: 200px; }
	#mv .inner .message img { width: 70px; }
	
	#mv .greeting { right: 25%; left: 25%; bottom: 40px; }
	#mv .sign { width: 70px; right: 50px; top: 130px; }
	#mv .sign img { width: 100%; }


	/*========= footer =========*/
	#footer .inner { width: 90%; padding: 40px 0; }
	#footer .inner .menu {
		display: block;
		display: -webkit-block;
		justify-content: space-between;
		text-align: center;
	}
	#footer .inner .menu br:first-child { display: none; }
	
	#footer .inner .menu .ul01 {
		list-style: none;
		padding: 0;
		display: block;
		display: -webkit-block;
		font-size: .9em;
	}
	#footer .inner .menu .ul01 li { margin-right: 0; }
	#footer .inner .menu .ul01 li:last-child { margin-right: 0; padding-top: 0px; }
	#footer .inner .menu .ul01 li img { width: 100px; margin-top: 0; margin-bottom: 20px; }

	#footer .inner .menu .ul02 { width: 50%; padding: 0; margin: 10px auto 30px; display: block; display: -webkit-block; }
	#footer .inner .menu .ul02 li { margin-right: 0; text-align: center; }
	#footer .inner .menu .ul02 li a { margin-bottom: 10px; } 
	#footer .inner .menu .ul02 li:last-child a { padding: .6em 1em; }
	
	#footer .inner .copy { text-align: center; }
	
	
	/*========= top =========*/
	#top_contents01 .inner { width: 90%; padding: 50px 0; margin-top: 0px; }
	#top_contents01 .inner:before { font-size: 4em; right: 0; top: 0; }
	
	#top_contents02 .inner .topics { display: block; display: -webkit-block; margin-bottom: 50px; }
	#top_contents02 .inner .ttl { width: 400px; color: #008299; padding-top: 0px; }
	
	.news-list { width: 100%; box-sizing: border-box; }
	
	.service { display: flex; display: -webkit-flex; margin-bottom: 30px; }
	
	#top_contents04 .inner { width: 90%; padding: 80px 0; }
	#top_contents04 .inner .com { display: block; display: -webkit-block; }
	#top_contents04 .inner .com .box01 { display: none; }
	#top_contents04 .inner .com .box02 { width: 100%; margin-bottom: 30px; }
	#top_contents04 .inner .com .box03 { width: 100%; display: flex; display: -webkit-flex; text-align: justify; }
	#top_contents04 .inner .com .box03 div:first-child { margin-right: 20px; }
	#top_contents04 .inner .com .box03 img { width: 150px; }
	#top_contents04 .inner .com .box02 table { font-size: .9em; }

}



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

	.ttl h2 { font-size: 1.6em; font-weight: 800; text-align: center; }
	.ttl h3 { font-size: 1.2em; font-weight: 600; }
	.en { text-align: center; }
	
	.txt01 { line-height: 1.8em; font-size: .9em; margin-bottom: 20px; }
	.txt02 { line-height: 1.8em; font-size: .9em; margin-bottom: 40px; }
	
	.crumbs { margin: 20px 0 40px; font-size: .8em; }
	.container { letter-spacing: 0px; }
	
	
	/*========= main visual =========*/
	#mv { width: 100%; height: 300px; }
	#mv .inner { width: 100%; min-width: auto; }
	
	#mv .inner .logo { width: 200px; height: 100px; }
	#mv .inner .logo img  { width: 100%; }
	
	#mv .inner .message { right: 30px; top: 150px; }
	#mv .inner .message img { width: 50px; }
	
	#mv .greeting { display: none; }
	#mv .sign { display: none; }
	
	
	/*========= footer =========*/
	#footer .inner .menu .ul02 { width: 80%; }
	
	
	/*========= top =========*/
	#top_contents01 .inner .ttl { text-align: center; }
	#top_contents02 .inner .ttl { width: 100%; text-align: center; padding-top: 0px; }
	#top_contents03 .inner .ttl { text-align: center; }
	#top_contents04 .inner .ttl { text-align: center; }
	
	#top_contents01 .inner .ttl h2 { font-size: 1.6em; }
	#top_contents02 .inner .ttl h2 { font-size: 1.6em; }
	#top_contents03 .inner .ttl h2 { font-size: 1.6em; }
	#top_contents04 .inner .ttl h2 { font-size: 1.6em; }
	
	#top_contents04 .inner .com .box03 div:first-child { width: 260px; }
	#top_contents04 .inner .com .box03 img { width: 100%; }

}



@media screen and (max-width: 420px) {
	
	#mv .inner .message { right: 30px; top: 90px; padding: .8em; }
	#mv .inner .message img { width: 40px; }
	
	#top_contents01 .inner:before { font-size: 2.8em; right: 0; top: 0; }
	
	#top_contents02 .inner .mk_cont h3 { font-size: 1.2em; letter-spacing: 1px; margin-bottom: 15px; padding-left: 40px; }
	#top_contents02 .inner .mk_cont h3:before { top: 1rem; width: 30px; height: 2px; background: #008299; }
	
	#top_contents02 .inner { padding: 80px 0 20px; }
	#top_contents04 .inner { width: 90%; padding: 50px 0; }
	#top_contents04 .inner .staff { margin: 0 auto 30px auto; }
	
	.mkcontents table { background-size: 400px; }
	
}