@charset "utf-8";

* { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; }

body { display:none; /*overflow-x:hidden;*/
	color:#242424;
	font-family: tbudgothic-std,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size:14px;
	line-height:1.8;
	-webkit-text-size-adjust:100%; 
}

	@media only screen and (min-width: 768px) {
		.onlySp {
			display: none!important;
		}
	}
	@media only screen and (max-width: 767px) {
		.onlyPc {
			display: none!important;
		}
	}


		img { width:100%; }
		ul { list-style:none outside; }
		.clr:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
		.clr { min-height:1px; clear:both; }
		* html .clr { height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }
		
		.copyright { position:fixed; top:170px; left:-125px; transform:rotate(90deg); font-size:12px; }
		
		.inner_content { max-width:1064px; margin:0 auto; padding:0 20px; }
		
		.centerText { text-align:center; }
		
		#global { padding-top:137px; transition:0.3s; }
			#global.fixed { padding-top:0px; }
		
		#global ul { display:flex; justify-content:center; /*margin:137px 0 80px;*/ margin:0 0 80px; }
			.fixed { position:fixed; z-index:10; width:100%; text-align:center; background:rgba(255,255,255,0.75); }
			#global.fixed ul { margin:10px 0 5px; }
			
			
			
		#global ul li { margin:0 15px; }
		#global ul li span { display:block; font-size:11px; text-align:center; }
		#global ul li a { text-decoration:none; color:#000; }
		#global a[href*="aboutus"] img { max-width:109px; }
		#global a[href*="clients"] img { max-width:81px; }
		#global a[href*="philosophy"] img { max-width:138px; }
		#global a[href*="contact"] img { max-width:101px; }
		
		#main { /*height:120vh;*/ height:140vh; background:url(../img/top/bg_main.png) no-repeat bottom center / 100% auto; /*animation: bg-slider 100s linear infinite; transition: 0.3s;*/ }
		
			/*@keyframes bg-slider {
				from { background-position: 0 0; }
				to { background-position: -1560px 0; }
			}*/
		
		
		h1 img { max-width:244px; mix-blend-mode:multiply; }
		h1 span { display:block; font-size:15px; font-weight:bold; letter-spacing:0.3em; margin-top:10px; }
		h2 {  margin:30px 0 50px; padding-top:80px; position:relative; }
		h2 span { display:block; font-size:14px; margin-bottom:10px; }
		
		#philosophyBg { background:url(../img/top/bg_line_left.png) no-repeat top center / 100% auto; margin-bottom:100px; }
		#philosophy .inner_content_right { max-width:670px; padding:0 0 0 50px; float:right; background:#fff; }
		#philosophy .inner_content_right:first-child { padding-top:40px; }
		#philosophy h2 { padding-top:0; }
		#philosophy h3 { font-size:28px; font-weight:bold; margin:0 0 30px;  }
		#philosophy h2 img { max-width:419px; max-width:298px; }
		#philosophy .second { padding-top:50px; }
		#philosophy .second h2 img { max-width:301px; }
		.lead { font-size:16px; letter-spacing:0.05em; }
		.bg_dot { padding-bottom:70px; background:url(../img/common/bg_dot.png) no-repeat 45px 97%; }
		
		#aboutUs { background:url(../img/top/bg_line_right.png) no-repeat top center / 100% auto; padding-bottom:0%;  }
		#aboutUs .inner_content { margin-top:10%;  }
		#aboutUs h2 { text-align:center; padding-top:0; }
		#aboutUs h2 img { max-width:316px; }
		#aboutUs .inner_content_left { max-width:470px; padding-bottom:0px; }
		#aboutUs dt { font-weight:bold; text-align:center; margin-top:5px; }
		#aboutUs dd { text-align:center; margin-bottom:0px; }
			#aboutUs dt:first-of-type { position:relative; padding-top:0px; }
			
		#aboutUs ol { list-style-type:none; padding-top:20px; }
		#aboutUs ol li { position:relative;  background:url(/assets/img/top/bg_line_bottom.png) repeat-x bottom left; padding:50px 0 15px; margin-bottom:20px; }
		#aboutUs ol li:before { content:""; position:absolute; top:0; left:calc(50% - 16.5px); display:block; width:33px; height:38px; background:url(/assets/img/top/ico_business01.png) no-repeat center center; }
		#aboutUs ol li:nth-child(2):before { background:url(/assets/img/top/ico_business02.png) no-repeat center center; }
		
		
		#clientsBg { background:url(/assets/img/top/bg_horizon.png) no-repeat top center / 100% auto; padding-top:26%; position:relative; }
		#clients h2 { text-align:right; margin:30px 10px 50px 0; padding-top:0px; }
		#clients h2 img { max-width:242px; }
		#clients .inner_content_right { max-width:860px; float:right; background:url(/assets/img/top/bg_clients.png) no-repeat top center / 100% auto; margin-top:10%; padding-bottom:15%; }
		.clientList { display:flex; justify-content:flex-start; flex-wrap:wrap; padding:4% 0 0 20%; }
		.clientList li { width:auto; text-align:left; margin:0 30px 15px 0; font-size:24px; position:relative; }
			.clientList li:after { content:"/"; position:absolute; top:0; right:-1.5em; width:1em; height:1em; font-size:24px; }
			.clientList li:nth-child(even):after { display:none; }
		.clientList li:nth-child(even) { margin-right:0; } 
		.clientList li:nth-child(4) { margin-right:20%; } 
		
		#contactBg { padding-top:0px; /* padding-top:10%;*/ }
		#contact h2 { text-align:center; padding-top:0px; }
		#contact h2 img { max-width:308px; }
		
		#map { width:100%; }
		.areaMap_inner { width:100%; min-height:690px; }
		
		#footer { position:relative; }
		#footer .contactLink { position:absolute; top:0;  z-index:2; }
		#contact01{ left:21.5%; margin-top:51%; width:16.8%; max-width:262px; height:41px; transform: rotate(-12deg); }
		#contact02{ left:19.75%; margin-top:55%; width:16.8%; max-width:262px; height:41px; transform: rotate(-13deg); }
		.footerBg { position:absolute; z-index:1; margin-bottom:100px; }
		
		
		/*@media print, screen and (min-width:1500px) {
			#main { background-position: 50% 50%; }
		}*/
		
		@media print, screen and (min-width:1360px) {
			#main { height:160vh; background-position: 50% 50%; }
		}
		
		@media print, screen and (max-width:1024px) {
			.clientList li,
			.clientList li:after { font-size:20px; }
		}
		
		
		@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
			#main { height: 100vh; }
		}
		
		
		@media print, screen and (max-width:767px) {
		
			/*body { font-size:12px; }*/
			
			#main { height:100vh; background:url(../img/top/bg_main_sp.png) no-repeat bottom center / 100% auto; }
			h1 img { max-width:26.6%; margin-top:25%; }
			h1 span { font-size:10px; letter-spacing:0.2em; }
			
			#global { padding-top:0; }
			
			#global ul { margin:20px auto 0px; width:90%;  }
				#global.fixed ul { margin:5px auto 5px; width:90%; }
				
			#global ul li span { font-size:8px; margin-left:-5px; margin-right:-5px; line-height:1; }
			#global ul li { margin: 0 10px; }
			.copyright { display:none; }
			
			h2 span { font-size:9px; }
			#philosophyBg { background:url(../img/top/bg_line_left_sp.png) no-repeat top center / 100% auto; padding-bottom:30%; padding-top:32%; margin-bottom:0; margin-top: 5px; }
			
			#philosophy .inner_content_right { max-width:100%; padding:5px 40px 50px; float:none; }
			#philosophy h2 { text-align:center; }
			
			#aboutUs { background:none; padding-top:100px; }
			
			#aboutUs .inner_content { margin-top:-40px; margin-bottom: 40px;  }
			#aboutUs .inner_content_left { margin:0 auto; }
			#aboutUs ol { width:90%; margin:0 auto; }
			
			#clientsBg { background: url(/assets/img/top/bg_horizon.png) no-repeat top center / 150% auto; padding-top:50%; }
			#clients .inner_content_right { float:none;/* background:url(/assets/img/top/bg_clients_sp.png) no-repeat top center / 110% auto;*/ background:none; }
			#clients h2 { text-align:center; padding-top:0; margin: 30px auto 50px auto; }
			#clients h2 img { max-width:40.26%; }
			.clientList { width:100%; margin:0 auto; padding: 10% 0 20% 0; }
			.clientList li { width: 100%; text-align: center; /*border:4px solid #000;*/ padding:0; margin: 0 0 20px 0; }
				.clientList li:after { display:none; }
			.clientList li:nth-child(4) { margin-right:0; }
			
			#contactBg { }
			#contact h2 img { max-width:50.66%; }
			.areaMap_inner { min-height:300px; }
			
			#contact01,
			#contact02 { width:28%; }
			#contact01 { left:30.5%; margin-top:85%; }
			#contact02 { left:27.5%; margin-top:91.95%; }
			.footerBg { margin-bottom:0; padding-bottom:50px; }

		}
		
		
		@media print, screen and (max-width:600px) {
			body { font-size:12px; }
			#main { height:80vh; }
			
			h2 { margin:15px 0 25px; }
			
			#philosophy .inner_content_right { max-width:670px; padding:5px 15px 50px; float:none; }
			#philosophy h2 img { max-width:68.8%; max-width:54%; }
			#philosophy .second h2 img { max-width:54%; }
			#philosophy h3 { font-size:16px; margin: 0 0 20px; }
			.lead { font-size:12px; letter-spacing:0; line-height:1.8; }
			
			#aboutUs h2 img { max-width:54.13%; }
			
			#clients .inner_content_right { padding-bottom:27%; }
			.clientList { padding:10% 0 0% 0; }
		}
		
		@media print, screen and (max-width:500px) {
			
			#philosophy .inner_content_right:first-child { padding-top:0px; }
				#philosophy .inner_content_right:last-child { margin-top:0px; }
			
			.bg_dot { padding-bottom: 60px; background: url(../img/common/bg_dot.png) no-repeat 30px 96% / 8% auto; }
			
			#clients .inner_content_right { padding-bottom:17%; }
			.clientList { padding:0; }
			.clientList li,
			.clientList li:after { font-size:3.5vw; }
		}
		
		@media print, screen and (max-width:414px) {
			#philosophyBg { padding-bottom: 40%; }
			#philosophy .inner_content_right:first-child { padding-bottom:20px; }
			#philosophy .inner_content_right:last-child { margin-top:110%; }
			#philosophy .inner_content_right { padding: 5px 30px 50px; }
			#aboutUs { padding-top:0px; }
		}
		
		
		@media print, screen and (max-width:375px) {
			#philosophy .inner_content_right { padding: 5px 20px 50px; }
			#philosophy .inner_content_right:last-child { margin-top:90%; }
			.bg_dot { padding-bottom:30px; background:url(../img/common/bg_dot.png) no-repeat 30px bottom / 6% auto; }
		}



.buruburu {
    -webkit-animation:buruburu 0.1s infinite linear alternate;
    animation:buruburu 0.1s infinite linear alternate;
}

@-webkit-keyframes buruburu {
    0% {-webkit-transform:translate(0, 0) rotate(-3deg);}
    50% {-webkit-transform:translate(0, -1px) rotate(0deg);}
    100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}

@keyframes buruburu {
    0% {transform:translate(0, 0) rotate(-3deg);}
    50% {transform:translate(0, -1px) rotate(0deg);}
    100% {transform:translate(0, 0)rotate(3deg);}
}