@charset "UTF-8";
/*pagetop*/
#wrapper {
	/*background-color: #050a1f;*/
	background: url(../images/main_pc.png);
	background-size: contain;
	background-repeat: no-repeat;
	max-width: 100%;
	margin: auto;/*z-index: -1000000;*/
	letter-spacing: 0.1rem;
}
@media screen and (max-width: 768px) {
	#wrapper {
	background: url(../images/main_sp.png);
	background-size: contain;
	background-repeat: no-repeat;
	max-width: 100%;
	margin: auto;
	letter-spacing: 0.1rem;
}
}
.bg_main_visual {
}
inner_contents, img {
	width: 100%;
}
.inner {
	/*width: 1440px;*/
	max-width: 1440px;
	width: 80%;
	/*width: 80%;*/
	margin: 0 auto;
	text-align: center;
}

@media screen and (max-width: 768px) {
.inner {
	width: 30%;
}
}
.logo_main_visual {
	max-width: 500px;
	width: 23%;
	margin: 13% auto 3%;
	display: block;
}

@media screen and (max-width: 768px) {
.logo_main_visual {
	width: 60%;
	padding-bottom: 9%;
	display: inline-block;
}
}
.main_visual {
	background-size: cover;
}
.contact_link {
	padding: 0.8% 3%;
	background-color: #BB9C66;
	color: #FFF;
	margin: 0 auto 20%;
}

@media screen and (max-width: 768px) {
.contact_link {
	padding: 2.8% 6%;
}
}
.contact_link a, .contact_link a:visited, {
 color: #000000;
}
.contact_link:hover {
	background-color: #fff;
	color: #000000;
}
.contact_link a {
	color: #000000;
	text-decoration: none;
	padding: 0.8% 3%;
}
.top_nav {
	width: 1440px;
	margin: 0 auto;
}
.logo_nav {
	width: 175px;
	position: relative;
	top: 29px;
}
.g_nav {
	width: fit-content;
	font-size: 16px;
	margin: 0 auto;
	margin-left: 40%;
	border-top: 1px solid #CC9966;
	border-bottom: 1px solid #CC9966;
	padding: 18px 0;
}

@media screen and (max-width: 768px) {
.g_nav {
	border-top: none;
	border-bottom: none;
}
}
.pagetop {
	display: none;
	position: fixed;
	bottom: 12px;
	right: 14px;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
	z-index: 10000;
}
.pagetop {
	background: url(../images/page_top.png);
	background-size: 100% auto;
}
/*pagetop*/
/*fade_in*/
.box_left p {
	-webkit-transition: all 1s;
	-webkit-transform: translate(0, 0);
	opacity: 1;
}
.box_left p.move {
	-webkit-transform: translate(-10px, 0);
	opacity: 0;
}
/*//fade_in_left*/
/*fade_in_right*/
.box_right p {
	-webkit-transition: all 1s;
	-webkit-transform: translate(0, 0);
	opacity: 1;
}
.box_right p.move {
	-webkit-transform: translate(10px, 0);
	opacity: 0;
}
/*//fade_in_right*/

/*triangle*/
.arrow:before {
	position: relative;
	content: "";
	display: inline-block;
	height: 0;
	border: 1085px solid transparent;
	border-left: 1600px solid #00132E;
	left: 0;
	top: -37px;
	z-index: -10000;
}

@media screen and (max-width: 768px) {
.arrow:before {
	position: relative;
	content: "";
	display: inline-block;
	height: 0;
	border: 10px solid transparent;
	border-left: 30px solid #00132E;
	left: 0;
	top: -37px;
}
}
/*//triangle//*/
.inner_contents {
	soverflow: hidden;
	position: -webkit-sticky;
	position: relative;
	margin: 0 auto;
	text-align: center;
	z-index: 2;
}
.main_ttl {
	color: #BC9D66;
	text-align: center;
	width: auto;
	height: 100px;
	display: table-cell;
	margin: auto;
	margin-bottom: 5.5%;
}
.main_ja_ttl {
	color: #fff;
	text-align: center;
	margin-bottom: 1%;
	font-size: 16px;
}

@media screen and (max-width: 768px) {
.main_ja_ttl {
	height: auto;
	font-size: 0.7em;
}
}
.vision_ttl {
	font-size: 2.1rem;
	margin-bottom: 3%;
}
.vision_box {
	font-size: 1.5rem;
	line-height: 1.6;
	margin-top: 17%;
}
.vision_box p {
	font-weight: 400;
}

@media screen and (max-width: 768px) {
.division {
	margin-top: 17%;
}
}
.division {
	margin-top: 18%;
}
/*事業内容*/
@media screen and (max-width: 768px) {
.division .main_ja_ttl{
	font-size: 0.9em;
}
}
.division_internet_contents {
	padding: 3px;
}
.division_internet_contents .en {
	color: #CC9966;
	font-size: 26px;
	padding-top: 6%;
	letter-spacing: 5;
	letter-spacing: 0.1em;
}
.division_internet_contents {
	width: 30%;
	margin: 4%;
	display: inline-block;
	font-size: 18px;
	padding: 3%;
}
.division_contents_bg01 {
	background-color: #333333;
}
.division_contents_bg02 {
	background-color: #1A1A1A;
}
.Internet_detail_img {
	width: 43%;
	display: inline-block;
	vertical-align: top;
}
.waku_ttl {
	padding: 10px 24px;
	border: 1px solid;
	display: inline-block;
}
.Internet_detail_box {
	width: 100%;
	vertical-align: top;
	margin-top: 17%;
	max-width: inherit !important;
}
.widthr {
	width: 80%;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}
.internet_icon {
	margin-top: 7%;
}
.internet_icon img {
	width: 40%;
	margin: 3% 4% 0 0;
	margin-right: 3%;
}
.internet_icon img {
	display: block;
	width: 65%;
	margin: 0;
}

@media screen and (max-width: 768px) {
.internet_icon img {
	width: 80%;
	height: auto;
	margin: 0 auto;
}
}
.Internet_detail_contain {
	width: 43%;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	padding-left: 10%;
}

@media screen and (max-width: 768px) {
.i_img {
	width: 80%;
	margin: 0 auto;
	display: block;
}
}
.contents_detail_ttl {
	font-size: 2.2rem;
	padding: 9% 0;
}
.contents_detail_text {
	line-height: 2;
	font-size: 14px;
	width: 85%;
	letter-spacing: 1.8;
}

@media screen and (max-width: 768px) {
.main_ttl {
	height: auto;
	font-size: 35%;
}
}
.Internet_detail_contain.solution_box {
	padding-left: 0;
	padding-right: 3%;
}
.map_box{
	margin-bottom: 10%;
}
.map_box iframe{
position: relative;
top: -100px;

}
iframe{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
.access_box {
	background-color: #CBCBCB;
	padding: 10% 0;
}
.access_box {
	color: #0A1428;
}
.access_box .main_ja_ttl {
	color: #0A1428;
}
.about .main_ttl {
/*width: 26%;	*/
}
.about_box {
	margin: 0 auto;
	width: 450px;
}

@media screen and (max-width: 768px) {
.about_box {
	margin: 0 auto 10%;
	width: 450px;
}
}
.about_box p {
	line-height: 3;
	border-top: 1px solid;
	display: inline-block;
	width: 24%;
	margin: 0 auto;
	font-size: 16px;
}
.about_box dl {
	margin: 0% auto 200px 0%;
	line-height: 4;
	font-size: 16px;
	font-size: 16px;
	width: 100%;
}

@media screen and (max-width: 768px) {
.about_box dl {
	width: 80%;
	margin: 0 auto;
}
}
.about_box dt {
	width: 26%;
	float: left;
	clear: left;
	border-bottom: 1px solid #fff;
}
@media screen and (max-width: 768px) {
.about_box dt {
	width: 33%;
}	
}
.about_box dd {
	width: 70%;
	text-align: left;
	float: left;
	border-bottom: 1px solid #fff;
}
@media screen and (max-width: 768px) {
.about_box  dd {
	width: 65%;
}	
}
dt.border_non, dd.border_non {
	border-bottom-style: hidden;
}
.about_box dd:nth-child(8) {
	line-height: 2;
	margin: 3% 0;
}
.access_box {
	line-height: 1.2;
	font-size: 16px;
	letter-spacing: 1.8;
}
.access_box.ttl {
	color: #0A1428;
}
.adress {
	font-size: 19px;
}

@media screen and (max-width: 768px) {
.adress_zipcode {
	padding-left: 0;
	margin-top: 1%;
	display: inline-block;
}
}
.adress_zipcode {
	padding-left: 10px;
	margin-top: 1%;
}
.contact {
	font-size: 16px;
}
.tel {
	font-size: 24px;
	padding: 1% 0;
}
.contact_form {
	text-align: left;
	/*width: 60%;*/
	width: 100%;
	max-width: 800px;
}
.contact_form span {
	color: #BB9C66;
	font-size: 13px;
}

@media screen and (max-width: 768px) {
.footer {
	font-size: 70%;
	width: 80%;
	margin: 0 auto;
}
}
.footer {
	margin-bottom: 10%;
	font-weight: 300;
	letter-spacing: 0.1em;
	font-size: 75%;
}
.footer_adress, .footer_tel {
	margin-bottom: 1%;
	color: #fff;
}
.footer_adress {
	margin-top: 3%;
	color: #fff;
}
.comfirm {
	width: 200px;
	padding: 2% 1%;
	display: block;
	margin: 7% auto 0;
	text-align: center;
	background-color: #BB9C66;
	color: #000000;
}
@media screen and (max-width: 768px) {
.comfirm {
	width: 100%;
	box-sizing: border-box;
}
}
.back_form {
	/*width: 30%;*/
	width: 200px;
	padding: 2% 1%;
	display: block;
	margin: 0 auto;
	text-align: center;
	background-color: #BB9C66;
	color: #000000;
}
.footer_logo {
	width: 20%;
	margin: 10% auto 1%;
}

@media screen and (max-width: 768px) {
.footer_logo {
	width: 45%;
}
}
.red {
	position: relative;
	overflow: hidden;
	padding: 80px 0;
}
.red:before {
	content: '';
	position: absolute;
	top: -1000px;
	left: 0;
	width: 200%;
	height: 70%;
	margin: 3% -10% 0;
	background: ##3c0d0d;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	transform: rotate(30deg);
	z-index: -1;
}
#back {
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 0px;
	height: 10000px;
	-webkit-perspective: 500px;
	perspective: 500px;
}
#back div {
	width: 100%;
	/*overflow: hidden;*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-perspective: 500px;
	perspective: 500px;
}
#blue1 {
	height: 300px!important;
	z-index: 10;
	position: absolute;
	background: #31000e;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	-o-transform-origin: center;
	transform-origin: center;
	-webkit-transform: skewX(0) skewY(29deg);
	-ms-transform: skewX(0) skewY(29deg);
	-o-transform: skewX(0) skewY(29deg);
	transform: skewX(0) skewY(29deg);
}
#blue2 {
	width: 0px;
	height: 0px;
	border-left: 130vw solid #31000e;
	border-top: 70vw solid transparent;
	border-bottom: 70vw solid transparent;
	border-right: 0px solid transparent;
	z-index: 1;
	position: absolute;
}
#blue3 {
	height: 300px!important;
	z-index: 10;
	position: absolute;
	background: #31000e;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	-o-transform-origin: left top;
	transform-origin: left top;
	transform: skewY(-29deg);
	-webkit-transform: skewY(-29deg);
	-ms-transform: skewY(-29deg);
	-o-transform: skewY(-29deg);
}
#gray1 {
	width: 0px !important;
	height: 0px;
	border-left: 0px solid transparent;
	border-top: 65vw solid transparent;
	border-bottom: 65vw solid transparent;
	border-right: 150vw solid #2D2D2D;
	z-index: 1;
	position: absolute;
	right: 0!important;
	left: inherit!important;
	-webkit-transform-origin-x: 0%;
	-webkit-transform-origin-y: 0%;
}
#blue4 {
	height: 300px!important;
	z-index: 10;
	position: absolute;
	background: #31000e;
	-webkit-transform-origin: right top;
	-ms-transform-origin: right top;
	-o-transform-origin: right top;
	transform-origin: right top;
	transform: skewY(29deg);
	-webkit-transform: skewY(29deg);
}
#blue5 {
	width: 0px !important;
	height: 0px;
	border-left: 180vw solid #290E04;
	border-top: 100vw solid transparent;
	border-bottom: 100vw solid transparent;
	border-right: 0px solid transparent;
	z-index: 1;
	position: absolute;
	-webkit-transform-origin-x: 0%;
	-webkit-transform-origin-y: 0%;
}
#black1 {
	width: 0px!important;
	border-left: 10000px solid rgb(34,34,34);
	border-top: 10000px solid rgb(34,34,34);
	border-bottom: 10000px solid rgb(34,34,34);
	border-right: 10000px solid rgb(34,34,34);
}
.outer {
	position: relative;
	z-index: 2;
}
.hoverlight:hover {
	filter: brightness(1.2);
	text-shadow: 0 0 1px #fff;
}
.concept {
	position: relative;
	z-index: 2;
}

/* 768pxまでの幅の場合に適応される */
@media screen and (max-width: 768px) {
.inner {
	top: 100px;
}
}
.top-head {
	height: 170px;
}
.sp_br {
	display: none;
}

@media screen and (max-width: 768px) {
.sp_br {
	display: block;
}
}
/**
 * Add the correct display in IE 10+.
 *//* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix {
	zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
	zoom: 1;
} /* IE7 */
/*リンク*/
a {
	color: #CC9966;
}
a:hover {
	color: #fff;
}