/* CSS Document */

* {
	padding:0;
	margin:0px;
	outline:none;
	}
html {
	overflow: auto;
	}

body {
	overflow: hidden;
	text-align:center;
	font-family: "Helvetica Neue" , Helvetica , Arial, 'Noto Sans JP', sans-serif;
	font-weight: 400;
	line-height: 1.6;
	-webkit-text-size-adjust:100%;
	color: #595757;
}
.mincho {
	font-family: "ten-mincho", serif;
	font-weight: 400;
}
.abbr { font-weight: 600;}
img {
	vertical-align:top;
	border:0;
	width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	}
li {
	list-style-type: none;
}
p,a,li,div {
	max-height: 100%;
}

/* --- class and other set --- */
.shadow {
	box-shadow:rgba(0, 0, 0, 0.15) 4px 5px 8px 8px;
}
.just {
	text-align: justify;
	/*text-justify: inter-ideograph;*/
}
.inner {
	width: 100%;
	height: 100%;
	position: relative;
}
a {
	text-decoration: none;
}
.clearfix::after { content: ""; display: block; clear: both;}
.flexbox {
	display: flex;
	justify-content: center;
	align-items: center;
}
#wrap { position: relative;}
@media only screen and (min-width: 768px) {
	html, body {
		font-size: calc(100vw / 60);
	}
	.sp {
		display: none;
	}
	.contents {
		margin: 0 auto;
		padding: 0 5%;
		max-width: 1200px;
	}
	.left { float: left;}
	.right { float: right;}
	.inner {
		width: 100%;
		height: 100%;
		position: relative;
		left: 0;
		top: 0;
	}
}
@media only screen and (min-width: 1200px) {
	html, body { font-size: 20px; }
	.contents { padding: 0;}
}
@media only screen and (max-width: 767px) {
	html, body {
		font-size: 3.125vw;
	}
	.pc {
		display: none;
	}
	.contents {
		margin: 0 5%;
	}
}
/* --- originals --- */

/* --- navi --- */

#navi { position: fixed; left: 0; top: 0; z-index: 1;}
.navi { width: 100%; }
#navi .contents, #head .contents { position: relative;}
#navi .navi, #head .navi { display: flex; align-items: center; justify-content: flex-end;}
#menu .navi { justify-content: space-between;}
#head .navi { justify-content: flex-start;}
#menu { width: 100%; height: 0vh; overflow: hidden;  position: fixed; left: 0; top: 0;  transition: all ease .4s;}
#menu .inner { background-color: #f7b44e; }
#menu.open { height: 100vh; }
.menubtn { display: flex; align-items: center; justify-content: center; transition: all ease .5s;}
#menu .container { display: flex; width: 100%; align-items: center; justify-content: center;}
a.link {font-weight: 600;}
#menu .box { display: inline-block; width: 4em; text-align: left;}
#menu .box a { color: #fff; display: block; max-width: 100%;}
.menubtn img { width: 64%; }
#menu .menubtn img { width: 48%; }

@media only screen and (min-width: 768px) {
.navi { height: 8.1rem; }
div.logo { width: 4.5rem;}
.menubtn { width: 2.4rem; height: 2.4rem; margin-bottom: 3.2rem; cursor: pointer; }
.menubtn:hover { background-color: rgba(0,0,0,.1);}
#menu .menubtn img { width: 70%; }
#menu .container { height: calc(100vh - 16rem);}
#menu .box { font-size: 2.5rem; }
#menu .box a { margin: 0.8em 0;}

}/* --- pc --- */


@media only screen and (max-width: 767px) {
.navi { height: 8.1rem; }
div.logo { width: 4.5rem;}
.menubtn { width: 2.4rem; height: 2.4rem; margin: 0 0 3.2rem 0; background-color: rgba(255,255,255,.5);}
.menubtn:hover { background-color: rgba(0,0,0,.1);}
#menu .menubtn img { width: 70%; }
#menu .container { height: calc(100vh - 16rem);}
#menu .box { font-size: 2.5rem; margin-right: 5%; }
#menu .box a { margin: 0.8em 0;}
}/* --- sp --- */



/* --- head --- */
#head {
	width: 100%;
	position: relative;
	background-size: cover;
	background-position: center top;
}
#head p { text-align: left; color: #fff; filter: drop-shadow(0.1em 0.1em 0.1em rgba(0,0,0,0.45));}

@media only screen and (min-width: 768px) {
#head { height: 100vh; background-image: url(../images/bg_pc.jpg); }
#head p { font-size: 2.2rem; line-height: 4.25rem; margin-top: 3.2rem; }
}/* --- pc --- */

@media only screen and (min-width: 768px) and (orientation: portrait){
	#head { height: 69.5vw;}
}

@media only screen and (max-width: 767px) {
#head { height: 140vw; background-image: url(../images/bg_sp.jpg); }
#head .contents { position: relative; height: 100%;}
#head p { font-size: 1.73rem; line-height: 3.38rem; position: absolute; left: 5%; bottom: 2.6rem;}

}/* --- sp --- */


/* --- main --- */

.corners { 
	background-image: url(../images/bg_lt.svg), url(../images/bg_lb.svg), url(../images/bg_rt.svg), url(../images/bg_rb.svg);
	background-position: left top, left bottom, right top, right bottom;
	background-repeat: no-repeat;
	background-size: 0.6em auto;
}
@media only screen and (min-width: 768px) {
#main section { padding: 7.5rem 0;}
#main section h2 { font-size: 1.5rem;}
.shelf::after { content: ""; display: block; clear: both;}
}/* --- pc --- */

@media only screen and (max-width: 767px) {
#main section { padding: 4rem 0;}
#main section h2 { font-size: 1.5rem; line-height: 2.6rem;}
}/* --- sp --- */


/* --- section1 --- */
section#concept { background-image: url(../images/pict1.svg); background-repeat: no-repeat;}
section#concept p.corners { color: #f39800; font-weight: 600; display: inline-block; line-height: 2.8; padding: 0 1.25em; margin-bottom: 1em;}
section#concept p:nth-of-type(3) { margin-top: 3em;}
@media only screen and (min-width: 768px) {
section#concept { background-size: 42rem auto; background-position: calc(50vw + 8.7rem) bottom;}
section#concept p.corners { font-size: 1.5rem;}
section#concept p.exp { font-size: 1rem; line-height: 2.15rem;}
section#concept p.exp strong { font-size: 1.4rem;}
}/* --- pc --- */

@media only screen and (max-width: 767px) {
section#concept { background-size: 106.7% auto; background-position: -50% 102%; padding-bottom: 21rem;}
section#concept p.corners { font-size: 1.25rem; line-height: 2.2rem; padding: 0.7rem 1.25em;}
section#concept p.exp { font-size: 0.85rem; line-height: 1.75rem;}
section#concept p.exp strong { font-size: 1.1rem;}
}/* --- sp --- */

/* --- service --- */
#main section#service { background-color: #fcdb9d; }
#consulting .container { position: relative;}
#consulting .container .baloon { border: 2px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff;}
#consulting .container div.baloon:nth-child(even) { background-color: #5bba7e;}
#consulting .container div.baloon:nth-child(odd) { background-color: #f39800;}

#achievements .contents { background-color: #fff; border-radius: 0.4rem; }
#achievements h3 { color: #f39800; font-weight: 600; text-align: left; position: relative; border-top: 1px solid #999;}
#achievements h3 span { display: inline-block; vertical-align: top; padding-right: 1em; background-color: #fff; line-height: 2; margin-top: -1em;}
#achievements p { text-align: left;}
#achievements p.sample { padding-left: 8rem;}
#achievements p.sample span { display: inline-block; width: 8rem; font-weight: 600; margin-left: -8rem;}
@media only screen and (min-width: 768px) {
#consulting { padding: 0 0 5rem;}
#consulting h2 { margin-bottom: 4.5rem;}
#consulting .container { height: 35rem; margin: 0 4%; }
#consulting .baloon { position: absolute; width: 22rem; height: 7.2rem; }
#consulting .container div.baloon:nth-of-type(1) { left: calc(50% - 12rem); top: 0;}
#consulting .container div.baloon:nth-of-type(2) { right: -6.5%; top: 6rem;}
#consulting .container div.baloon:nth-of-type(3) { right: -6.5%; top: 21.5rem;}
#consulting .container div.baloon:nth-of-type(4) { left: calc(50% - 12rem); top: 28rem;}
#consulting .container div.baloon:nth-of-type(5) { left: -6.5%; top: 21.5rem;}
#consulting .container div.baloon:nth-of-type(6) { left: -6.5%; top: 6rem;}
#consulting .container p.exp { padding-top: 14.5rem; font-size: 1rem; line-height: 2.15rem;}
#achievements { background-image: url(../images/bg_left.svg), url(../images/bg_right.svg); background-size: 18.4rem auto, 21.6rem auto; background-repeat: no-repeat; background-position: 2% 2.1rem, 101% 3.5rem;}
#achievements .contents { padding: 3.6rem 3.2rem; margin: 0 4%; }
#achievements h2 { margin-bottom: 3.2rem;}
#achievements h3 { margin-top: 2.4rem;  font-size: 1.05rem; }
#achievements p { font-size: 0.95rem; line-height: 1.7rem; margin-left: 1.7rem; }
#achievements p.exp { margin-top: 0.2rem; margin-bottom: 0.7rem;}
#achievements p.sample span {  font-size: 1.05rem; }
}/* --- pc --- */

@media only screen and (min-width: 1200px) {
	#achievements .contents { margin: 0 auto; width: calc(100% - 6.4rem); }
}

@media only screen and (max-width: 767px) {
#consulting.contents { margin: 0; padding: 2rem 0 5rem; background-image: url(../images/bg_left_sp.svg), url(../images/bg_right_sp.svg); background-size: 7.2rem auto, 7.2rem auto; background-repeat: no-repeat; background-position: 5% 12.5rem, 105% 24.5rem;}
#consulting h2 { margin-bottom: 3.2rem;}
#consulting .baloon { width: 24rem; height: 7.5rem; margin: 1.4rem auto;}
#consulting .container p.exp { font-size: 0.85rem; line-height: 1.8rem; margin-bottom: 3.2rem;}
#achievements .contents { padding: 2.7rem 1.4rem; }
#main section #achievements h2 { font-size: 1.3rem; line-height: 2.25rem; margin-bottom: 2.8rem; padding-top: 1rem;}
#achievements h3 { font-size: 1.05rem; line-height: 1.7rem; margin-top: 2rem;   }
#achievements p { font-size: 0.95rem; line-height: 1.7rem; margin-left: 1.25rem; }
#achievements p.exp { margin-top: 0.2rem; margin-bottom: 0.7rem;}
#achievements p.sample span {  font-size: 1.05rem; }
}/* --- sp --- */


#main section#forte {}
#forte .shelf div.unit:nth-of-type(1) .textarea { background-color: #feedcd;}
#forte .shelf div.unit:nth-of-type(2) .textarea { background-color: #d9eaf3;}
#forte .shelf div.unit:nth-of-type(3) .textarea { background-color: #e2f1e4;}
#forte .interaction { border-top: 1px solid #999;}
#forte .interaction p.ttl { display: inline-block; background-color: #fff; padding: 0 1rem; font-weight: 600;  line-height: 2; margin: -1em auto 0; vertical-align: middle;}
#forte .interaction .shelf div.mat { text-align: center; color: #fff; font-weight: 600; position: relative;}
#forte .interaction .shelf div.mat::after { content: ""; display: block; box-sizing: border-box; width: calc(100% - 0.8em); height: calc(100% - 0.8em); position: absolute; left: 0.4em; top: 0.4em; border: 1px solid #fff; opacity: 0.8;}
#forte .interaction .shelf div.mat:nth-of-type(1) { background: linear-gradient(180deg, #76c28d 0%, #76c28d 50%, #5bba7e 50%, #5bba7e 100%);}
#forte .interaction .shelf div.mat:nth-of-type(2) { background: linear-gradient(180deg, #74a8c1 0%, #74a8c1 50%, #66a0bb 50%, #66a0bb 100%);}
#forte .interaction .shelf div.action { background-repeat: no-repeat; background-size: 100% auto; background-position: left 2em;}
#forte .interaction .shelf div.action p { font-weight: 600; margin-left: -2em; margin-right: -2em;}
#forte .interaction .shelf div.action p:first-child { color: #00ab65; margin-top: -1.4em;}
#forte .interaction .shelf div.action p:last-child { color: #147c9d; margin-top: 6.5em;}

@media only screen and (min-width: 768px) {
#main section#forte { padding-bottom: 0;}
#main section#forte h2 { margin-bottom: 6.5rem;}
#forte .shelf { margin-bottom: 7rem;}
#forte .shelf div.unit { width: 31.3%; float: left;}
#forte .shelf div.unit:nth-of-type(2) { margin: 0 0 0 3%;}
#forte .shelf div.unit:nth-of-type(3) { float: right; }
#forte .shelf div.unit .icon { height: 13.6rem; background-color: #efefef; background-repeat: no-repeat; background-position: center center;}
#forte .shelf div.unit:nth-of-type(1) .icon { background-image: url(../images/pict2_1.svg);}
#forte .shelf div.unit:nth-of-type(2) .icon { background-image: url(../images/pict2_2.svg);}
#forte .shelf div.unit:nth-of-type(3) .icon { background-image: url(../images/pict2_3.svg);}
#forte .shelf div.unit:nth-of-type(1) .icon { background-size: 10rem;}
#forte .shelf div.unit:nth-of-type(2) .icon { background-size: 10.16rem;}
#forte .shelf div.unit:nth-of-type(3) .icon { background-size: 9.2rem;}
#forte .shelf div.unit .textarea { height: 24.3rem; padding: 0 1.8rem;}
#forte .shelf div.unit .textarea h3 { font-size: 1.25rem; line-height: 1.8rem; padding: 3rem 0 2rem;}
#forte .shelf div.unit .textarea p.just { font-size: 1rem; line-height: 2.05rem;}
#forte .interaction { margin-top: 5rem;}
#forte .interaction p.ttl { font-size: 1.35rem;}
#forte .interaction .shelf { margin-top: 3.6rem;}
#forte .interaction .shelf div.mat { width: 28%; height: 5.8rem; line-height: 5.8rem; font-size: 1.35rem; }
#forte .interaction .shelf div.mat:nth-of-type(1) { float: left;}
#forte .interaction .shelf div.mat:nth-of-type(2) { float: right;}
#forte .interaction .shelf div.action { background-image: url(../images/arrows.svg); float: left; width: 32%; margin-left: 6%; font-size: 0.9rem;}
#forte .interaction .shelf div.action { margin-top: -1em;}
#forte .interaction .shelf div.action p { font-size: 0.9rem;}
#forte .interaction .shelf div.action p:first-child { line-height: 3; margin-bottom: 4em;}
#forte .interaction .shelf div.action p:last-child { line-height: 1.4rem;}
}/* --- pc --- */

@media only screen and (min-width: 1200px) {
#forte .shelf div.unit { width: 29.6%;}
#forte .shelf div.unit:nth-of-type(2) { margin: 0 0 0 5.6%;}
}

@media only screen and (max-width: 767px) {
#main section#forte { padding: 5rem 0;}
#main section#forte h2 { margin-bottom: 4rem;}
#forte .shelf { margin-bottom: 5rem;}
#forte .shelf:last-child { margin-bottom: 0;}
#forte .shelf .unit { margin-bottom: 1.5rem; background-color: #efefef; background-repeat: no-repeat; background-position: 0.8rem center; background-size: 5.2rem auto;}
#forte .shelf .unit::after { content: ""; display: block; clear: both;}
#forte .shelf .unit .icon { width: 32%; float: left; }
#forte .shelf div.unit:nth-of-type(1) { background-image: url(../images/pict2_1.svg);}
#forte .shelf div.unit:nth-of-type(2) { background-image: url(../images/pict2_2.svg);}
#forte .shelf div.unit:nth-of-type(3) { background-image: url(../images/pict2_3.svg);}
#forte .shelf div.unit:nth-of-type(1) .icon { background-size: 5.7rem;}
#forte .shelf div.unit:nth-of-type(2) .icon { background-size: 5.8rem;}
#forte .shelf div.unit:nth-of-type(3) .icon { background-size: 5.3rem;}
#forte .shelf div.unit .textarea { width: 68%; float: right; padding: 1.5rem 1.2rem 1rem; text-align: left;}
#forte .shelf div.unit .textarea h3 { font-size: 1.25rem; line-height: 1.8rem; margin-bottom: 0.5em;}
#forte .shelf div.unit .textarea p.just { font-size: 0.95rem; line-height: 1.95rem;}
#forte .interaction { margin-top: 5rem;}
#forte .interaction p.ttl { font-size: 1.35rem;}
#forte .interaction .shelf { margin-top: 3.6rem;}
#forte .interaction .shelf::after { content: ""; display: block; clear: both; }
#forte .interaction .shelf div.mat { width: 32%; height: 5.8rem; line-height: 5.8rem; font-size: 1.2rem; }
#forte .interaction .shelf div.mat:nth-of-type(1) { float: left;}
#forte .interaction .shelf div.mat:nth-of-type(2) { float: right;}
#forte .interaction .shelf div.action { background-image: url(../images/arrows_sp.svg); float: left; width: 30%; margin-left: 3%; font-size: 0.9rem;}
#forte .interaction .shelf div.action { margin-top: -1em;}
#forte .interaction .shelf div.action p { font-size: 0.9rem;}
#forte .interaction .shelf div.action p:first-child { line-height: 3; margin-bottom: 4em;}
#forte .interaction .shelf div.action p:last-child { line-height: 1.4rem;}
}/* --- sp --- */


/* --- company --- */
#main section#company { background-image: url(../images/bg2.jpg); background-size; cover; color: #fff;}

#main section#company .shelf { text-align : left;}
#main section#company .shelf .textarea .unit:first-child  p.exp { border-bottom: 1px solid #fff; }
#main section#company .shelf #map iframe { display: block; width: 100%; height: 100%;}
@media only screen and (min-width: 768px) {
#main section#company h2 { margin-bottom: 4rem;}
#main section#company .shelf .textarea { width: 48%; float: left;}
#main section#company .shelf #map { width: 45%; height: 28rem; margin-top: 3rem; background-color: #ccc; float: right; }
#main section#company .shelf .textarea p.ttl { font-size: 1.25rem; margin: 2rem 0 1.5em 0;}
#main section#company .shelf .textarea p.exp { font-size: 0.88rem; line-height: 2; padding-bottom: 1.5em;}
#main section#company .shelf .textarea .unit:nth-of-type(1) p.exp { padding-left: 4em;}
#main section#company .shelf .textarea .unit:nth-of-type(1) p.exp span { display: inline-block; margin-left: -4em;}


}/* --- pc --- */

@media only screen and (min-width: 1200px) {
#main section#company h2 { margin-bottom: 7rem;}
#main section#company .shelf #map { margin-top: 0;}
#main section#company .shelf .textarea { width: 53%; float: left;}
#main section#company .shelf .textarea .unit:nth-of-type(1) p.exp br.pc { display: none;}
#main section#company .shelf .textarea .unit:first-child  p.exp { display: inline-block; }
}

@media only screen and (max-width: 767px) {
#main section#company { padding-bottom: 3rem;}
#main section#company h2 { margin-bottom: 3rem;}
#main section#company .shelf #map { height: 22.5rem; background-color: #ccc; margin-top: 3rem; }
#main section#company .shelf .textarea p.ttl { font-size: 1.25rem; margin: 2rem 0 1.5em 0;}
#main section#company .shelf .textarea p.exp { font-size: 0.85rem; line-height: 2; padding-bottom: 1.5em;}
}/* --- sp --- */

/* --- Contact --- */
/*
footer,
#main section#Contact form { font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;}*/
#main section#Contact form > div{ text-align: left; margin: 2em 0;}
#main section#Contact p { position: relative; display: inline-block; text-align: left;}
#main section#Contact p span { display: inline-block; font-size: 80%; padding: 0 0.5em; text-align: center; margin-left: 0.5em; background-color: #f08827; color: #fff; border-radius: 0.2em; vertical-align: middle;}
input::placeholder { opacity: 0.5;}
#main section#Contact button { appearance.none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none;cursor: pointer;}
#main section#Contact #submit { text-align: center; margin-top: 4rem;}
#main section#Contact #submit button { display: block; margin:0 auto; background-color: #5bba7e; color: #fff; line-height: 3; border-radius: 1.5em;}
#main section#Contact .error-txt { color: #9b0000; }
#main section#Contact .message { text-align: center; width: 100%; padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1px solid #ccc;}
#main section#Contact .message h4 { margin: 0.5em 0;}
#main section#Contact .message p { display: block; margin: 0.5em 0; width: 100%; text-align: center;}
/* --- common --- */
@media only screen and (min-width: 768px) {
#main section#Contact form { font-size: 20px; padding: 0 24px;}
#main section#Contact .group { display: inline-block; width: 700px; font-size: 0;}
#main section#Contact p { line-height: 1.5rem; width: 12em; font-size: 0.8rem; vertical-align: top; margin-top: 0.3rem;}
#main section#Contact p span { line-height: 1.2rem; margin-bottom: 0.3rem;}
#main section#Contact .group textarea,
#main section#Contact .group input { font-size: 1rem; padding: 5px; width: 686px;}
#main section#Contact .group input.half { font-size: 1rem; width: 330px;}
#main section#Contact .group input.half:nth-child(1) { margin-right: 10px;}
#main section#Contact #submit button { width: 22rem; }
#main section#Contact .error-txt { font-size: 0.8rem; }
#main section#Contact .message { margin-top: 0rem;}

}/* --- pc --- */

@media only screen and (max-width: 767px) {
#main section#Contact form { font-size: 1.2rem; display: block;}
#main section#Contact .group { font-size: 0;}
#main section#Contact p { line-height: 1.5rem; font-size: 1rem; vertical-align: top; margin: 0.3rem 0;}
#main section#Contact p span { line-height: 1.2rem; margin-bottom: 0.3rem;}
#main section#Contact .group textarea,
#main section#Contact .group input { font-size: 1.2rem; padding: 0.5em; width: 95%;}
#main section#Contact .group input.half { font-size: 1rem; width: 42.5%;}
#main section#Contact .group input.half:nth-child(1) { margin-right: 5%;}
#main section#Contact #submit button { width: 22rem; }
#main section#Contact .error-txt { font-size: 1rem; }
#main section#Contact .message { margin-top: -2rem;}
}/* --- sp --- */

/* --- footer --- */
footer {
	background-color: #595757;
	color: #fff;
}
footer ul { display: block;}
footer li { display: inline;}
footer a { color: #fff;}
footer a:hover { text-decoration: underline;}
/* --- common --- */
@media only screen and (min-width: 768px) {
footer {padding: 0 0 3rem;}
footer li a { margin: 0 1.5rem;}
footer .logo { width: 4.5rem; padding: 12rem 0 8.5rem; margin: 0 auto;}
footer p.copyright { font-size: 10px; margin-top: 2rem;} 
}/* --- pc --- */

@media only screen and (max-width: 767px) {
footer {padding: 0 0 2rem 0;}
footer .contents { margin: 0;}
footer li a { margin: 0 1rem; }
footer .logo { width: 4.5rem; padding: 8rem 0; margin: 0 auto;}
footer p.address { font-size: 0.9rem; line-height: 2.1;}
footer p.copyright { font-size: 10px; margin-top: 3rem;} 
}/* --- sp --- */





@media only screen and (min-width: 768px) {
}/* --- pc --- */

@media only screen and (max-width: 767px) {
}/* --- sp --- */