@charset "utf-8";
/*
Theme Name:shien
*/
/*----------------- ページ全体 -------------------*/
a:hover img {
	opacity		:0.7 ;
	filter		:alpha(opacity=70) ;
}
.word-adjustment {
	letter-spacing	: 3px;
	line-height	: 1.3;
}

/*-- トップ --*/
/*-- ヘッダー --*/
#solution-wrap {
	max-width	: 760px;
	margin		: 0;
	padding		: 0;
	background	: #ffffff;
}
.topconcept {
	height		: 0;
	margin		: 0;
	padding-top		: 65.7%;
	background-image: url(img/topphoto.png);
	background-repeat: no-repeat;
	background-size	: cover;
	background-position : 50% ;
	position	: relative;
	z-index		: 1;
}
.conceptarticle {
	display		: flex;
	flex-direction	: column-reverse;
	width		: 90%;
	color		: #fff;
	position	: absolute;
	top		: 180px;
	left		: 20px;
	z-index		: 0;
}
.conceptarticle h1 {
	font-size	: 1.8rem;
	font-weight	: normal;
	
}
.conceptarticle p {
	font-size	: 2rem;
	margin-bottom	: 10px;
}
.conceptarticle hr {
	width		: 100%;
	size		: 1;
	color		: #fff;
}

.humanresources {
	width		: 100%;
	margin		: 70px 0;
	padding		: 0;
	text-align	: center;
}
.humanresources h2 {
	display		: inline;
	font-size	: 1.8rem;
	font-weight	: normal;
	letter-spacing	: 2px;
	background	: linear-gradient(transparent 70%, #3BA3FF 70%);
}
.worries {
	display		: flex;
	flex-wrap	: wrap;
	justify-content	:space-between;
	width		: 100%;
	height		: auto;
	margin-top	: 70px;
	padding		: 0;
}
.w-box {
	width		: 350px;
	height		: 300px;
	margin-bottom	: 40px;
	padding		: 30px 20px 20px;
	box-sizing	: border-box;
	background-color : #f6f6f6;
}
.w-box .w-bop {
	width		: 90%;
	height		: 50px;
	margin		: 0 auto;
	font-size	: 1.2rem;
	text-align	: left;
	letter-spacing	: 2px;
	line-height	: 1.3;
}
.w-image {
	width		: 180px;
	height		: 180px;
	margin		: 10px auto;
}
.w-image img {
	width		: 180px;
	height		: 180px;
}
.w-yoko {
	width		: 200px;
	height		: 200px;
	margin		: 10px auto;
}
.w-yoko img {
	width		: 200px;
	height		: 200px;
}

.worries-solution {
	width		: 80%;
	margin		: 20px auto;
}
.triangle {
	display		: inline-block;
	margin-bottom	: 30px;
	width		: 0;
	height		: 0;
	border-style	: solid;
	border-right	: 50px solid transparent;
	border-left	: 50px solid transparent;
	border-top	: 60px solid #707070;
}
.transfer {
	width		: 100%;
	display		: flex;
	flex-wrap	: wrap;
	justify-content	:space-between;
	margin-bottom	: 20px;
}
.balloon1, .balloon2, .balloon3{
	position	: relative;
	display		: inline-block;
	margin		: 1.5em 0;
	padding		: 30px 10px;
	min-width	: 160px;
	max-width	: 100%;
	color		: #333;
	box-sizing	: border-box;
	font-size	: 1.5rem;
	background	: none;
}
.balloon1:before, .balloon2:before, .balloon3:before {
	content		: "";
	position	: absolute;
	top		: 100%;
	left		: 50%;
	margin-left	: -15px;
	border		: 15px solid transparent;
}
.balloon1:before {
	bottom		: -60px;
	margin-left	: 20px;
	border		: 10px solid transparent;
	border-top	: 25px solid #FFE6E6;
}
.balloon2:before {
	border		: 15px solid transparent;
	border-top	: 25px solid #E6F7FF;
}
.balloon3:before {
	margin-left	: -25px;
	border		: 10px solid transparent;
	border-top	: 25px solid #FFF6E6;
}

.balloon1 p, ..balloon2 p, .balloon3 p {
	margin		: 0;
	padding		: 0;
}
.first {
	background	: #FFE6E6;
}
.second {
	background	: #E6F7FF;
}
.third {
	background	: #FFF6E6;
}

.interview {
	font-size	: 1.8rem;
	line-height	: 1.5;
	letter-spacing: 2px;
}

.notsee {
	display		: inline-block;
	width		: auto;
	margin		: 20px 0;
	padding		: 15px;
	background	: #EEDB60;
}
.notsee p {
	font-size	: 2.0rem;
	letter-spacing: 2px;
	font-weight	: bold;
}
.point {
	font-size	: 1.8rem;
	font-weight	: bold;
}
.icebergmodel {
	width		: 100%;
	margin-top	: 80px;
	padding		: 0;
}
.icebergmodel figcaption {
	padding-bottom	: 20px;
}
.point-s {
	font-size	: 1.2rem;
}
.point-m {
	font-size	: 1.3rem;
	font-weight	: bold;
}
.point-l {
	font-size	: 1.8rem;
	font-weight	: bold;
}
.point-big {
	font-size	: 2.5rem;
	font-weight	: bold;
}

.icebergmodel img {
	width		: 100%;
	margin-top	: 15px;
}

.notsee-article {
	width		: 100%;
	margin		: 100px 0;
	padding		: 0;
}
.notsee-list {
	text-align	: left;
	font-size	: 1.6rem;
}
.notsee-list h3, .pricelist h3 {
	width		: 100%;
	margin		: 50px 0;
	padding		: 15px;
	box-sizing	: border-box;
	border-left	: 8px solid #3BA3FF;
	background	: #f9f9f9;
	font-weight	: normal;
	letter-spacing	: 2px;
}
.listbox {
	width		: 90%;
	margin		: 0 auto;
	font-size	: 1.8rem; 
}
.listbox ul {
	list-style-type	: none;

}

.listbox li+li {
	margin-top	: 20px;
	padding-left	: 50px;
	padding-top	: 4px;
	padding-bottom	: 4px;
}

.listbox li {
	position	: relative;
	padding-left	: 50px;
	padding-top	: 4px;
	padding-bottom	: 4px;
}

.listbox li:before {
	content		: "";
	position	: absolute;
	width		: 10px;
	height		: 15px;
	top		: .4em;
	left		: 12px;
	-webkit-transform: rotate(50deg);
	-ms-transform	: rotate(50deg);
	transform	: rotate(50deg);
	border-right	: 2px solid #1C83DE;
	border-bottom	: 2px solid #1C83DE;
}

.listbox li:after {
	content		: "";
	position	: absolute;
	top		: .2em;
	left		: 0;
	width		: 28px;
	height		: 28px;
/*	background-color: #3BA3FF;*/
	border		: 3px solid #1C83DE;
}

.notsee-support {
	width		: 90%;
	height		: 160px;
	margin		: 80px auto 30px;
	padding		: 0;
	text-align	: center;
	position	: relative;
	z-index		: 1;
}
.notsee-support .triangle {
	border-style	: solid;
	border-right	: 230px solid transparent;
	border-left	: 230px solid transparent;
	border-top	: 150px solid #F3BE54;
	position	: absolute;
	top			: 20px;
	left		: 15%;
	z-index		: 2;

}
.ns-article {
	width		: 95%;
	margin		: 0 auto;
	padding		: 0;
	position	: absolute;
	top		: 0;
	left		: 5%;
	z-index		: 3;
}
.ns-art-p {
	font-size	: 1.8rem;
	letter-spacing	: 2px;
}
.ns-article p {
	margin-bottom	: 10px;
}
.assignment {
	margin-bottom	: 50px;
}
.assignment p {
	display		: inline;
	font-size	: 1.8rem;
	font-weight	: bold;
	letter-spacing	: 0.2px;
	background	: linear-gradient(transparent 70%, #F35B5B 70%);
}
.see-advice {
	width		: 90%;
	margin		: 0 auto;
	text-align	: left;
	font-size	: 1.1rem;
	letter-spacing	: 2px;
	line-height	: 1.7;
}	

.suporttool {
	width		: 100%;
	margin		: 80px auto;
	padding		: 0;
	text-align	: center;
}

.suporttool h2 {
	display		: inline;
	font-size	: 1.8rem;
	font-weight	: bold;
	letter-spacing	: 2px;
	background	: linear-gradient(transparent 70%, #3BA3FF 70%);
}
.threetool {
	width		: 100%;
	display		: flex;
	flex-wrap	: wrap;
	justify-content	:space-between;
	/*height		: auto;*/
	margin-top	: 70px;
	padding		: 0;
}
.tool {
	max-width	: 32%;
	margin		: 0;
	padding		: 20px;
	box-sizing	: border-box;
	text-align	: center;
}
.tool-one {
	background  : #fff url(img/tool-tekisei.png) no-repeat;
}
.tool-two {
	background  : #fff url(img/tool-human.png) no-repeat;
}
.tool-three {
	background  : #fff url(img/tool-newface.png) no-repeat;
}
.tool h3 {
	font-size   : 1.5rem ;
	color		: #fff;
	letter-spacing : 1px ;
	line-height	: 1.2 ;
}
.threetool .setumei{
	margin-top	: 60px ;
	color		: #FBF6EB;
	letter-spacing	: 3px ;
	text-align	: left;
	line-height	: 1.3;
}
.threetool a {
	display		: block;
	color		: #fff;
}
.tool-button {
  	display       : inline-block;
  	font-size     : 16px;       
  	text-align    : center; 
 	 cursor        : pointer;
  	padding       : 11px 15px;
  	margin-top	: 20px;
 	 background    : #1c83de;
  	color         : #ffffff;
  	text-decoration-line: none;
  	line-height   : 1em;
  	opacity       : 1; 
  	transition    : .3s;
 }
.tool-button:hover {
  	opacity       : 0.8;
  	color         : #ffffff;
}
.one{
	margin-top	: 45px;
}
.webiner {
	width		: 100%;
	text-align	: center;
	margin		: 70px 0;
	padding		: 0;
}
.webiner p {
	width		: 90% ;
	margin		: 20px auto;
	text-align	: left;
	font-size	: 16px; 
	letter-spacing: 2px;
}
.webinerbox {
	display		: flex;
	width		: 100% ;
	padding		: 20px;
	box-sizing	: border-box;
	background	: #f6f6f6;
	border		: 1px solid #cccccc;
	border-bottom	: none ;
}
.humanimage {
	width		: 165px;
	height		: 110px;
	margin		: 0;
	padding		: 0;
}
.webinerarticle {
	width		: 100% ;
	margin-left	: 30px;
	text-align	: left;
}
.webiner .webinerarticle p {
	width		: 100%;
	text-align	: left;
}
.webinerlink {
	display     : inline-block;
	width		: 760px;
  	font-size   : 24px;       
   	cursor      : pointer;
  	padding     : 11px 15px;
	box-sizing	: border-box;
  	background  : #00BFC8;
  	color       : #ffffff;
  	text-decoration-line: none;
  	line-height : 1.2em;
	letter-spacing: 2px;
	font-weight	: bold;
  	opacity     : 1; 
  	transition  : .3s;
	position: relative;
	padding-left: 15px;
}
.webinerlink:hover {
  opacity       : 0.8;
}

.webinerlink:before {
	content		: "";
	position	: absolute;
	top		: 10px;
	left		: 290px;
	width		: 25px;
	height		: 25px;
	border-top	: 1px solid #fff;
	border-right: 1px solid #fff;
	border-radius: 50%;
	background-color: #ffffff;
   }
  
.webinerlink:after {
	content		: "";
	position	: absolute;
	top			: 17px;
	left		: 295px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform	: rotate(45deg);
	width		: 8px;
	height		: 8px;
	border-top	: 3px solid #00BFC8;
	border-right	: 3px solid #00BFC8;
   }
.case-study {
	width		: 100% ;
	margin		: 80px auto ;
}
.case-study h2 {
	padding-bottom : 5px ;
	border-bottom : 1px solid #707070 ;
	letter-spacing: 2px ;
	text-align	: left;
}
.casebox {
	width		: 95% ;
	margin		: 30px auto;
	padding		: 0;
	letter-spacing : 2px ;
}
.casebox h3, .casebox h4, .casebox h6 {
	margin-bottom : 20px;
}
.casebox h4 {
	margin-top	: 30px;
	margin-left	: 15px ;
	line-height	: 1.2 ;
}
.casebox h5 {
	display		: inline-block;
	font-size	: 1.1rem;
	letter-spacing	: 0;
	background	: linear-gradient(transparent 70%, #F1F3A0 70%);
	text-align	: left;
}
.casebox h6  {
	width		: 150px;
	margin		: 20px;
	margin-left	: 40px;
	padding		: 10px;
	text-align	: center ;
	color		: #ffffff;
	background	: #1C83DE;
}
.casebox h5, .casebox p {
	margin		: 20px 0 20px 40px ;
	letter-spacing : 3px ;
	line-height	: 1.5;
}
.case-study .casebox p {
	margin-left:30px;
}
.analysis-graph{
	margin		: 30px;
}
.casebox .b-net {
	margin-bottom : 0;
}
.casebox .language {
	margin-top	  : 0;
}
.pricelist {
	width		: 100% ;
	margin		: 30px 0;
	padding		: 0;
}
.pricelist table {
	width		: 90%;
	margin		: 0 auto;
	margin-bottom : 40px;
	border		: 1px solid #cccccc;
}
.pricelist .lasttable {
	margin-bottom: 10px;
}	
.pricelist caption {
	max-width	: 100%;
	padding		: 10px;
	box-sizing	: border-box;
	background	: #1C83DE;
	font-size	: 1.2rem;
	color		: #ffffff;
	letter-spacing : 2px;
	text-align	: left;
}
.pricelist th {
	width		: 150px;
	padding		: 20px;
	box-sizing	: border-box;
	background	: #f8f8f8;
	font-weight	: normal;
	vertical-align: middle;
}
.pricelist td {
	width		: 220px;
	padding		: 20px;
	box-sizing	: border-box;
	text-align	: center;
	vertical-align: middle;
}
.pricelist p {
	font-size	: 0.8rem;
	letter-spacing : 2px ;
}
.pricecaution {
	margin-left	 : 40px;
}
.pricetanka {
	width		: 220px;
	font-size	: 12px;
}
.linecaution {
	line-height	: 1.5;
}
.caution {
	color		: #F35B5B;
	font-weight	: bold;
}
.s-article {
	font-size	: 0.9rem;
}

/*-- 太字解除 --*/
.b-no {
	font-weight	: normal;
}

@media screen and (max-width: 768px) {
	.conceptarticle {
		top	: 80px;
	}
	.conceptarticle h1 {
		font-size	: 1.2rem;
		margin-top	: 10px;
	}
	.conceptarticle p {
		font-size	: 1.4rem;
		margin-bottom	: 5px;
		letter-spacing	: 0;
	}
	.conceptarticle hr {
		display		: none;
	}
	.humanresources {
		width		: 90%;
		margin		: 70px auto;
	}
	.humanresources h2 {
		font-size	: 1.5rem;
	}
	.worries {
		display		: column;
		width		: 80% ;
		margin-left	: auto ;
		margin-right: auto;
		text-align	: center ;
	}
	.w-box {
		width		: 100%;
		text-align	: center ;
		}
	.w-box .w-bop {
		font-size	: 1rem;
	}
	.w-box .w-bop br {
		display	: none;	
	}

	.worries-solution {
		width		: 90%;
	}
	.balloon1, .balloon2, .balloon3{
		display		: block;
		margin		: 10px auto;
		padding		: 10px;
		width		: 100%;
		font-size	: 1.2rem;
	}
	.balloon1:before, .balloon2:before, .balloon3:before {
		display		: none;
	}
	.interview {
		font-size	: 1.3rem;
	}
	.icebergmodel {
		width		: 90%;
		margin		: 80px auto 0 auto;
	}
	.icebergmodel p {
		text-align	: left ;
	}
	.notsee h3 {
		font-size	: 90%;
	}
	.notsee p {
		font-size	: 1.2rem;
	}
	.noseemo {
		font-size	: 100%;
	}
	.notsee-support .triangle {
		display	: none;
	}
	.notsee-support {
		min-height: 250px;
		box-sizing : border-box ;
		background : #F3BE54 ;
	}
	.ns-article {
		padding	: 20px 0 ;
	}
	.ns-art-p { 
		line-height	: 0;
		font-size	: 1.3rem ;
	}
	.listbox {
		font-size	: 1.5rem;
		width		: 95%;

	}
	.assignment p {
		font-size	: 1.5rem ;
		line-height	: 1.5;
	}
	.suporttool {
		width		: 95% ;
	}
	.suporttool h2 {
		line-height	: 1.5;
	}
	.suporttool h3 {
	
	}
	.see-advice {
		width		: 100%;
	}
	.threetool {
		display		: block ;
		flex-wrap	: none;
		justify-content	:none;
		}
	.tool {
		max-width		: 100%;
		max-height		: 250px;
		margin-bottom		 : 30px;
	}
	.tool h3 {
		font-size   : 1.3rem ;
	}	
	.threetool p {
		margin-top	: 40px ;
	}
	.threetool .setumei{
	text-align	: center;
	}
	.tool-one, .tool-two, .tool-three {
	/*	background  : rgb(63, 125, 127) ;*/
		width		: 100%;
		height		: 250px;
		background-image : none;
	}
	.tool-one {
		background-color : #0099BB;
	}
	.tool-two {
		background-color : #008A89;
	}
	.tool-three {
		background-color : #0062A0;
	}
	.threetool .setumei{
		margin-top	: 40px ;
		text-align	: left;
	}
	.threetool .setumei br {
		display		: none;
	}
	.tool-button {
		font-size   : 18px;
		padding     : 20px 0;
	}
	.threetool a {
		background-color:#fff;
		color		:#3BA3FF;
		font-weight	:bold;

	}
	.one {
		margin-top	: 20px;
	}
	.webiner .webnerarticle {
		width		: 100% ;
		margin		: 40px auto;
	}
	.webinerbox {
		display		: block;
		height		: 100%;
		 position	: relative;
	}
	.webinerbox:before {
		content		: "";
		display:	 block;
		padding-top	: 70%;
	}
	.humanimage {
		width		:100%;
		height		: auto;
		position	: absolute;
		top		: 0;
		left		: 0;
		bottom		: 0;
		right		: 0;
	}	
	.humanimage img {
		max-width	: 100%;
	}

	.webiner h4 {
		font-size	: 1.2rem; 
		margin-top	: 20px;
		text-align	: center;
	}
	.webinerarticle {
		margin-left	: 0;
	}
	.webiner .webinerarticle p {
		text-align	: center;
	}
	.webinerlink {
		width		: 100%;
		position	: static;
	}
	.webinerlink:before {
		display		: none;
	}
	.webinerlink:after {
		display		: none;
	}
	.case-study h2 {
		width		: 95% ;
		margin		: 0 auto;
	}
	.casebox h5 {
		display		: block;
		padding		: 10px;
		box-sizing	: border-box;
		background	: none;
		border		: 2px solid #EEDB60 ;
	}
	.casebox p {
		margin-left	: 20px;;
		text-align	: left;
	}

	.pricelist {
		width		: 95% ;
		margin		: 30px auto;
	}
	.pricelist table {
		width		: 100%
		padding		: 0;
	}
	.pricelist th {
		width		: 10%;
		padding		: 8px;
	}
	.pricelist td {
		width		: 38%;
	}
	.pricecaution {
		margin-left	 : 20px;
	}
	.mojis{
		font-size	: 1.2rem;
	}
	.mojim{
		font-size	: 1.3rem;
		letter-spacing	: 0;
	}

}
@media screen and (min-width: 768px) {
	.br-sp {
		display		: none;
	 }
}


/*-- clear --*/
.clr-both {
	clear		: both;
}