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

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

	#top_mv .txt { width: 550px; top: 30%; left: 200px; }
	#top_mv .img { width: 270px; bottom: 0; right: 200px; }
	#top_mv .img img { width: 100%; }

}

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

	#top_mv .txt { width: 85%; top: 20%; left: 5%; }
	#top_mv .img { width: 25%; bottom: 0; right: 5%; }
	

	#header {
		width: 100%;
		position: fixed;
		padding: 15px 0;
		margin: 0 auto;
		z-index: 1000;
	}
	#header .logo { width: 350px; margin-left: 5%; }
	#header .contact { display: none; }
	
	#gnav { display: none; }
	

	/*========== sp_menu ==========*/
	#nav-toggle {
		display: block;
		position: fixed;
		top: 10px;
		right: 30px;
		height: 28px;
		cursor: pointer;
	}
	#nav-toggle > div { position: relative; width: 36px; }
	#nav-toggle span {
		width: 100%;
		height: 3px;
		left: 0;
		display: block;
		background: #0550bf;
		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: #0550bf; }
	.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(5,80,191,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;
	}
	
	
	/*========= footer =========*/
	#footer .inner { width: 90%; padding: 60px 0; display: block; display: -webkit-block; }
	#footer .inner .company { width: 100%; }
	#footer .inner .menu { width: 100%; }
	#footer .inner .menu ul { padding: 0; margin-bottom: 30px; justify-content: flex-start; }
	#footer .inner .menu ul li { margin-right: 30px; }
	#footer .inner .qr { display: none; }
	
	#footer_contact { width: 100%; }
	#footer_contact .inner { width: 90%; }
	
	
	/*========= top =========*/
	#top_contents01:before { font-size: 5em; }
	#top_contents01 .inner { width: 90%; }
	#top_contents01 .inner .l_box { width: 25%; }
	#top_contents01 .inner .r_box { width: 70%; padding-top: 10px; }
	
	#top_contents02 .inner { width: 90%; }
	#top_contents03 .inner { width: 90%; }
	#top_contents03 .inner ul { line-height: 1.8em; display: block; display: -webkit-block; }
	#top_contents03 .inner ul li { width: 100%; margin-bottom: 60px; padding: 4.5em 1.5em 2em; border-radius: 6px; }
	#top_contents03 .inner ul li:nth-child(3) { margin: 0; }
	#top_contents03 .inner ul li .point { top: -45px; left: 45%; }
	
	#top_contents04 .inner { width: 90%; }
	#top_contents05 .inner { width: 90%; }
	#top_contents06 .inner { width: 90%; }
	
	
	/*========= common =========*/
	.container { width: 90%; }
	
	.contents01 .inner { width: 90%; }
	.contents02 .inner { width: 90%; padding: 50px 0; }
	
	.main_contents { width: 100%; }
	.main_contents .inner { width: 90%; margin: 0 auto 100px; }
	
	
	/*========= service =========*/
	.sv_lbox { width: 25%; }
	.sv_rbox { width: 70%; }
	
	
	/*========= application =========*/
	.app_box { margin-bottom: 50px; }
	
	
	/*========= 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; padding: 10px 0 20px; }
	.toi_box th { display: block; border: none; padding-bottom: 0; }
	.toi_box td { display: block; padding: 10px 0 20px; }
	
	.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%; }
	
	.tel_txt { font-size: .8em; }
	.tel {
		margin-bottom: 80px;
		font-size: 1.1em;
		font-weight: 800;
		font-family: 'Roboto', sans-serif;
	}

}


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

	#top_mv { width: 100%; height: 350px; }
	#top_mv .txt { width: 85%; top: 45%; left: 5%; line-height: 2em; }
	#top_mv .txt h2 { font-size: 1.1em; }
	#top_mv .img { display: none; }
	
	#slide_wrapp { width: 100%; height: 350px; }


	#footer_contact .inner { display: block; display: -webkit-block; }
	#footer_contact .txt { text-align: center; margin-bottom: 30px; font-size: 1.1em; }
	#footer_contact .contact { width: 250px; margin: 0 auto 10px; }
	#footer_contact .contact a { padding: .7em 4.5em; }
	
	
	/*========= top =========*/
	#top_contents01 { padding: 50px 0; }
	#top_contents01 .inner .l_box { width: 25%; }
	#top_contents01 .inner .l_box img { width: 100%; }
	#top_contents01 .inner .r_box { width: 70%; padding-top: 0; }
	
	#top_contents02 { padding: 50px 0; }
	#top_contents03 { padding: 50px 0; }
	#top_contents04 { padding: 50px 0; }
	#top_contents05 { padding: 50px 0; }
	
	
	/*========= member =========*/
	.zenaoiro-box { margin-bottom: 60px; }
	
	.zenaoiro-box .box01 { width: 100%; }
	.zenaoiro-box .box02 { width: 48%; }
	.zenaoiro-box .box03 { width: 48%; }
	
	.zenaoiro-box .textarea01 { margin-bottom: 20px; }
	
}


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

	#header { padding: 15px 0; box-shadow: 0 0 0 rgba(0,0,0,0); }
	#header .logo h1 { line-height: 0; }
	#header .logo h1 img { width: 75%; }

	#nav-toggle { top: 5px; right: 10px; }
	#gloval-nav { top: 60px; }
	#gloval-nav a { padding: 1em 3em; font-size: .9em; }


	/*========= footer =========*/
	#footer .inner .menu ul { display: block; display: -webkit-block; }
	#footer .inner .menu ul li {
		margin-right: 0;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px #3b8bea solid;
	}
	#footer .inner .menu ul li a { font-size: .9em; }
	
	#footer_contact .txt { font-size: .9em; }
	
	#footer .inner .company span { font-size: 1.1em; }
	#footer .inner .company div:nth-child(1) { font-size: 1.3em; }
	
	
	/*========= top =========*/
	#top_mv { width: 100%; height: 150px; padding-top: 60px; }
	#top_mv .txt { width: 70%; top: 45%; left: 5%; line-height: 2em; }
	#top_mv .txt h2 { font-size: .6em; }
	
	#slide_wrapp { width: 100%; height: 150px; }

	#top_contents01:before { font-size: 2.5em; }
	#top_contents01 .inner .l_box { display: none; }
	#top_contents01 .inner .r_box { width: 100%; padding-top: 0; }
	#top_contents01 .inner .en { font-size: .9em; }
	#top_contents01 .inner .ttl { font-size: .8em; }
	#top_contents01 .inner .txt { font-size: .9em; line-height: 1.8em; }
	
	#top_contents02 .inner .ttl { font-size: .8em; }
	#top_contents02 .inner .txt { font-size: .9em; line-height: 1.8em; }
	
	#top_contents03 .inner .ttl { font-size: .8em; }
	#top_contents03 .inner p { font-size: .9em; }
	#top_contents03 .inner ul li { padding: 3.5em 1.5em 2em; }
	#top_contents03 .inner ul li .point { padding: 1.1em 1.2em; top: -45px; left: 37%; }
	
	#top_contents04 .inner .ttl { font-size: .8em; }
	#top_contents04 .inner .txt { font-size: .9em; line-height: 1.8em; }
	
	#top_contents05 .inner .ttl { font-size: .8em; }
	#top_contents05 .inner .txt { font-size: .9em; line-height: 1.8em; margin-bottom: 20px; }
	#top_contents05 .inner table {  font-size: .8em; }
	
	#top_contents06 .inner ul { display: -webkit-block; }
	#top_contents06 .inner ul li { width: 48%; margin-bottom: 5px; }
	#top_contents06 .inner ul li img { width: 100%; }
	
	.zenaoiro-box { width: 90%; flex-wrap: wrap; }
	.zenaoiro-box .bnn01 { width: 100%; }
	.zenaoiro-box .bnn02 { width: 100%; }
	

	/*========= common =========*/
	.crumbs { margin: 20px 0 30px; font-size: .8em; }
	
	.main_contents { font-size: .9em; }
	.main_contents .inner { width: 90%; margin: 0 auto 50px; }
	.main_contents .inner h3 { font-size: 1.2em; margin-bottom: 15px; }
	.main_contents .inner h4 { font-size: 1.1em; margin-bottom: 10px; }
	
	.page_header .inner { padding: 40px 0; }
	.page_header .inner h2 { font-size: 1.6em; }
	.page_header .inner span { font-size: .9em; }
	
	.textarea01 { line-height: 1.8em; margin-bottom: 30px; }
	.textarea02 { line-height: 1.8em; margin-bottom: 30px; }
	.textarea03 { line-height: 1.8em; }
	
	.cate_list { font-size: .9em; margin-bottom: 40px; }
	
	.line01 { border-bottom: 1px #999 dashed; margin-bottom: 30px; }
	
	
	/*========= custom =========*/
	.bg_blue { margin-top: .5em; margin-bottom: 20px; }
	.bg_gray02 { margin-top: .5em; margin-bottom: 20px; display: block; display: -webkit-block; }
	.bg_gray03 { margin-top: .5em; margin-bottom: 20px; }
	
	
	/*========= topics =========*/
	.list01 ul li span { display: block; width: 20%; margin-bottom: 5px; }
	.list02 ul li span { display: block; width: 20%; margin-bottom: 5px; }
	
	.topics_box .tit { margin-bottom: 30px; }
	.topics_box .tit h2 { font-size: 1.6em; }
	
	
	/*========= service =========*/
	.sv_lbox { display: none; }
	.sv_rbox { width: 100%; }
	
	
	/*========= member =========*/
	.zenaoiro-box { width: 100%; margin-bottom: 40px; }
	.zenaoiro-box .box02 { width: 100%; margin-bottom: 5px; }
	.zenaoiro-box .box03 { width: 100%; }
	
	
	/*========= application =========*/
	.app_ttl {
		font-size: 1.2em;
		padding-left: 45px;
		line-height: 2em;
		background-size: 37px;
	}
	
	.app_box { margin-bottom: 30px; }
	.app_box ul li { width: 100%; margin-bottom: 10px; }
	.app_box ul li a { padding: .5em 1em; font-size: .85em; text-align: left; }
	
}