@import url('https://fonts.cdnfonts.com/css/akrobat');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');


@charset "utf-8";

/* header
---------------------------------------- */
body {
	margin:0;
	padding:0;
	font-family:"Noto Sans JP", Osaka, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ＭＳ Ｐゴシック', 'MS PGothic';
	line-height:1.8;
	color:#646464;
	font-size: 16px;
	vertical-align:top;
	background-color:#ffffff;
	-webkit-text-size-adjust:100%;
	word-wrap:break-word;
}

@media screen and (max-width:720px){
	body {
		font-size:14px;
	}
}
a        {transition:all 0.3s linear;}
a:link   {color:#00326e;text-decoration:underline;}
a:visited{color:#464646;text-decoration:underline;}
a:hover  {color:#ff6400;text-decoration:none;}
a:active {color:#464646;text-decoration:underline;}


p:has(.btn),
div.btn{
	position:relative;
	clear:both;
	margin:15px auto;
	padding:15px 0;
	background-color:#f1f1f1;
	overflow:visible;
}
div#contents a.btn,
.form div#contents div.btn input[type="button"].btn,
.form div#contents div.btn button.btn{
	width:480px;
	max-width:100%;
	margin:5px auto;
	padding:15px 0;
	color:#fff;
	border:none;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	-ms-border-radius:0;
	background-color:orange;
}
div#contents a.btn:hover,
.form div#contents div.btn input[type="button"].btn:hover,
.form div#contents div.btn button.btn:hover{
	background-color:#ff6400;
}
@media screen and (max-width:1144px){
	p:has(.btn),
	div.btn{
		width:100%;
	}
}



/* structure
---------------------------------------- */
div#header,
div#footer{
	clear:both;
	width:90%;
	position:relative;
	margin:0 auto;
	padding:0;
	overflow:hidden;
	transition:all 0.3s linear;
}
div#header{
	padding:30px 5%;
	overflow:visible;
}
div#header:before{
	width:100vw;
	height:100px;
	content:"";
	position:absolute;
	top:0;
	left:0;
	display:block;
	background:url(../img/bk.webp) no-repeat center center / cover;
}
	padding:30px 5%;
	overflow:visible;
}
div#footer{
	width:100%;
}
div#container{
	width:auto;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}
div#contents{
	width:90%;
	clear:both;
	margin:-150px auto 180px;
	padding:0 5%;
	transition:all 0.3s linear;
}
div#contents div.inner {
	max-width: 1024px;
	margin: 0 auto;
}

@media screen and (max-width: 1054px) {
	div#contentss {
		margin: 0 0 90px;
	}
}
@media screen and (max-width: 960px) {
	div#header:before{
		height:calc(100px - 180px + 100vw*180/960);
	}
}
@media screen and (max-width: 760px) {
	div#header {
		padding: 15px 5%;
	}
	div#header:before{
		height:62.5px;
	}
}
@media screen and (max-width: 720px) {
	div#footer{
		clear:both;
		width:100%;
		position:relative;
		margin:0 auto;
		padding:30px 0 0;
		overflow:hidden;
	}
}
@media screen and (max-width: 540px) {
	div#contents{
		margin-top:-130px;
	}
}
/* header_site_logo
---------------------------------------- */
h1#site_logo{
	width:180px;
	position:relative;
	margin:0 auto;
	z-index:1;
}

@media screen and (max-width: 960px) {
	h1#site_logo{
		width:calc(100vw*180/960);
	}
}
@media screen and (max-width: 540px) {
	h1#site_logo {
		width:100px;
		height:100px;
	}
}

/* header_btn_menu / pagetop
---------------------------------------- */
/* btn_menu */
button#btn_menu {
	display:none;
	opacity: 0;
	z-index: 9999;
}
button#btn_menu,
a.pagetop {
	width: 90px;
	height: 90px;
	position: fixed;
	top: 0;
	right: 0;
	display: block;
	text-align: center;
	border:none;
	transition: all 0.3s linear;
	background:#d9d1c6;
	opacity: 1.0;
	transition: all 0.3s linear;
	overflow:hidden;
	z-index:99999;
	overflow: hidden;
}
a.pagetop{
	position: absolute;
	top:auto;
	bottom:0;
	background:#d9d1c6 url(../img/arr.svg) no-repeat center center / 28px auto;
	transform:rotate(-90deg);
}
button#btn_menu:hover,
a.pagetop:hover {
	background-color:#ff6400;
}
button#btn_menu.close {
	background-image:none;
	background-blend-mode:lighten;
}
button#btn_menu:before,
button#btn_menu:after{
	width:32px;
	height:5px;
	content:"";
	position:absolute;
	top:27.5px;
	left:29px;
	display:block;
	background-color:#311f13;
	transition:all 0.3s ease-out;
	z-index:10;
}
button#btn_menu:after{
	top:auto;
	bottom:27.5px;
}
button#btn_menu:hover:before,
button#btn_menu:hover:after{
	background-color:#fff;
}
button#btn_menu.close:before,
button#btn_menu.close:after{
	top:42.5px;
	bottom:auto;
	transition:all 0.3s ease-out;
}
button#btn_menu.close:before{
	transform:rotate(-225deg)
}
button#btn_menu.close:after{
	top:auto;
	bottom:42.5px;
	transform:rotate(225deg);
}
button#btn_menu span{
	width:32px;
	height:5px;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	margin:-2.5px 0 0 -16px;
	background-color:#311f13;
	transition:all 0.3s ease-out;
}
button#btn_menu:hover span{
	background-color:#fff;
}
button#btn_menu.close span{
	width:0;
	margin:-0.5vw 0 0 0;
	opacity:0;
}

@media screen and (max-width:540px){
	button#btn_menu,
	a.pagetop {
		width: calc(20vw - 3px);
		height: calc(20vw - 3px);
	}
a.pagetop{
	bottom:calc(1.5em + 30px);
}
	button#btn_menu:before,
	button#btn_menu:after{
		width:10vw;
		height:1vw;
		top:5vw;
		left:calc(5vw - 1.5px);
	}
	button#btn_menu:after{
		top:auto;
		bottom:5vw;
	}
	button#btn_menu.close:before,
	button#btn_menu.close:after{
		top:calc(9.5vw - 1.5px);
	}
	button#btn_menu span{
		width:10vw;
		height:1vw;
		margin:-0.5vw 0 0 -5vw;
	}
}


/* header_globalnavi
------------------------------------------------ */

div#global_navi{
	display:none;
	width:360px;
	position:fixed;
	top:0;
	right:0;
	margin:0;
	padding:0;
	background-color:rgba(255,255,255,0.9);
z-index:99999;
}
ul#gnavi {
	width:100%;
	height:100vh;
	display:block;
	padding:120px 0 0 0;
	overflow-x:auto;
}
ul#gnavi li {
	width:100%;
	padding:0;
}
ul#gnavi li a:before{
	width:45px;
	height:45px;
	content:"";
	display:inline-block;
	margin-right:15px;
	margin-bottom:calc(-45px/2 + 0.3em);
	border-radius:22.5px;
	background:#d9d1c6 url(../img/arr.svg) no-repeat center center / 16px auto;
}
ul#gnavi li a:hover{
	color:#ff6400;
	text-decoration:none;
}
ul#gnavi li:nth-child(7){
	margin-left:0;
}
ul#gnavi li a,
ul#gnavi li:nth-child(9) a{
	min-height:45px;
	display:block;
	margin:0;
	padding:10px 30px;
	font-size:16px;
	text-align:left;
	text-indent:0;
	white-space: nowrap;
	border-radius:0;
	background:transparent url(../img/arr.png) no-repeat left 30px top 12px / 20px auto;
	box-shadow:none;
}
ul#gnavi li:nth-child(9) a{
	color:#006cb5;
}
ul#gnavi li a:hover{
	margin:0!important;
	color:#fff!important;
	background-color:orange!important;
}
@media screen and (max-width: 420px) {
	div#global_navi{
		width:calc(100% - 60px);
	}
	ul#gnavi li a,
	ul#gnavi li:nth-child(9) a{
		font-size:14px;
	}
}

/* pagenavi
---------------------------------------- */
ul#pagenavi{
	margin-bottom:30px;
}


/* ttl
---------------------------------------- */
div#contents h1.ttl{
	width:100vw;
	max-width:480px;
	height:100vw;
	max-height:2em;
	position:relative;
	margin:15px auto 90px ;
	padding: calc(240px - 2em) 0 240px;
	color:#fff;
	font-size:32px;
	text-align:center;
	border-radius:50%;
	background:rgba(50,30,20,0.85);
}
div#contents h1.ttl:before{
	width:180px;
	height:180px;
	content:"";
	position:absolute;
	left:calc(50% - 90px);
	bottom:-60px;
	display:block;
	border-radius:50%;
	background:url(../img/top/header_second.webp) no-repeat left center / cover;
}
#message     div#contents h1.ttl:before{background-image:url(../img/pttl/message.webp);}
#company     div#contents h1.ttl:before{background-image:url(../img/pttl/company.webp);}
#service     div#contents h1.ttl:before{background-image:url(../img/pttl/service.webp);}
#license     div#contents h1.ttl:before{background-image:url(../img/pttl/license.webp);}
#environment div#contents h1.ttl:before{background-image:url(../img/pttl/environment.webp);}
#topics      div#contents h1.ttl:before{background-image:url(../img/pttl/topics.webp);}
#projects    div#contents h1.ttl:before{background-image:url(../img/pttl/projects.webp);}
#recruit     div#contents h1.ttl:before{background-image:url(../img/pttl/recruit.webp);}
#inquiry     div#contents h1.ttl:before{background-image:url(../img/pttl/inquiry.webp);}

div#contents h1.ttl:after{
	width:calc(100% - 60px);
	display: block;
	margin: 5px auto 0;
	padding-top:5px;
	color:#fff;
	font-family: "Source Sans 3", sans-serif;
	font-size: 24px;
	font-weight:bold;
	text-align:center;
	border-top:1px #fff solid;
}
#message     div#contents h1.ttl:after{content:"Message";}
#company     div#contents h1.ttl:after{content:"Company Profile";}
#service     div#contents h1.ttl:after{content:"Our Services";}
#license     div#contents h1.ttl:after{content:"License";}
#environment div#contents h1.ttl:after{content:"Environment";}
#topics      div#contents h1.ttl:after{content:"Topics";}
#projects    div#contents h1.ttl:after{content:"Completed Projects";}
#recruit     div#contents h1.ttl:after{content:"Recruiting";}
#inquiry     div#contents h1.ttl:after{content:"Contact Us";}


@media screen and (max-width:1054px){
	div#contents h1.ttl {
		max-width: calc(100vw*480/1054);
		max-height:1.8em;
		padding: calc(100vw*480/1054/2 - 2em) 0 calc(100vw*480/1054/2);
	}
}
@media screen and (max-width: 960px) {
	div#contents h1.ttl:before{
		width: calc(100vw*180/960);
		height: calc(100vw*180/960);
		left: calc(50% - 100vw*180/960/2);
		bottom: -40px;
	}
}
@media screen and (max-width: 760px) {
	div#contents h1.ttl {
		max-width: 340px;
		max-height: 1.8em;
		margin-top:30px;
		padding: calc(170px - 1.8em) 0 170px;
	}
	div#contents h1.ttl::before {
		top:calc(170px + 0.9em + 5px + 0.5em + 15px);
		bottom:auto;
	}
}
@media screen and (max-width: 540px) {
	div#contents h1.ttl {
		margin-top:15px;
	}
	div#contents h1.ttl::before {
		width:100px;
		height:100px;
		left: calc(50% - 100px/2);
		bottom: -20px;
	}
	div#contents h1.ttl::after{
		font-size:22px;
	}
}
@media screen and (max-width: 420px) {
	div#contents h1.ttl {
		width:calc(90vw - 39px);
		max-width: none;
		margin: 190px auto calc(-90px + 340px - 90vw);
		padding:calc(45vw - 39px/2 - 1.8em) 0 calc(45vw - 39px/2);
		transform:translatey(-50%);
	}
	div#contents h1.ttl:before {
		top:calc(45vw + 60px);
	}
}



/* pagenavi
---------------------------------------- */
ul#pagenavi{
	margin:0 auto 90px;
}
ul#pagenavi li{
	margin-right:10px;
	padding-left:30px;
	background:url(../img/icon_arr.png) no-repeat left center;
}
ul#pagenavi li:first-child{
	padding-left:30px;
	background:url(../img/icon_home.png) no-repeat left center;
}

/* footer
---------------------------------------- */

div#footer{
	width:calc(100% - 120px);
	margin:0 auto;
	padding:60px 60px 0;
	letter-spacing:-0.4em;
	background-repeat:no-repeat;
	background-position:center;
	background-image:linear-gradient(rgba(0, 0, 0, 0.6)),url("../img/bk.webp");
	background-size:cover;
}
div#footer div.inner{
	max-width:calc(44em + 180px + 240px + 120px);
	margin:0 auto 45px;
}
div#footer h1#flogo,
div#footer div.address,
div#footer #fnavi{
	display:inline-block;
	vertical-align:top;
	zoom:1;
	letter-spacing:normal;
}
div#footer h1#flogo {
	width:180px;
	height:180px;
	margin-right:60px;
}
div#footer div.address,
div#footer #fnavi{
	width:calc(50% - 180px);
}
div#footer div.address{
	color:#fff;
}
div#footer #fnavi ul li{
	width:calc(50% - 30px);
	max-width:calc(8em + 45px);
	margin: 0 30px 15px 0;
}
div#footer #fnavi ul li a{
	color:#fff;
	background-image:url(../img/arr_w.svg);
}
div#footer #fnavi ul li a:hover{
	color:orange;
	text-decoration:none;
	background-position:5px center;
}
div#footer small{
	width: calc(100vw - 30px);
	display:block;
	margin:15px 0 0 -60px;;
	padding:12px 15px 18px;
	color:#fff;
	text-align:center;
	letter-spacing:normal;
	background-color:#000;
}
@media screen and (max-width:1280px){
	div#footer h1#flogo,
	div#footer div.address,
	div#footer #fnavi{
		display:block;
		margin:0 auto 30px;
	}
	div#footer div.address,
	div#footer #fnavi{
		width:100%;
		display:block;
	}
	div#footer #fnavi{
		margin-bottom:0;
	}
}
@media screen and (max-width:540px){
	div#footer{
		width:calc(100% - 60px);
		padding:60px 30px 0;
	}
	div#footer #fnavi ul li{
		width:calc(50% - 15px);
		max-width:calc(8em + 30px);
		margin-right:15px;
	}
	div#footer small {
		margin-left: -30px;
	}
}
@media screen and (max-width:420px){
	div#footer #fnavi ul li{
		width:50% ;
		max-width: none;
		margin-right:0;
	}
}