@charset "utf-8";
/* CSS Document */

/* =============================================
	reset
============================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	/*font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;*/
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-weight: 500;
	position: relative;
}
ol, ul,ul ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration:none;
}
img{
	border:none;
	vertical-align: bottom;
 max-width: 100%;
 height: auto;
}
p{
	font-size: 1.1em;
	line-height: 1.6;
	padding-top: 1em;
	text-align: justify;
}
ruby > rt{
	font-size: 35%;
}
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
}


/* =============================================
	base
============================================= */

.main{
	position: relative;
}
.clearfix:after {  
	content: "."; 
	display: block;
	height: 0;
	font-size: 0;
	clear: both; 
	visibility:hidden;
}
.clearfix{
	display: inline-block;
} 
/* Hides from IE Mac \*/
* html .clearfix{height: 1%;}
.clearfix{display:block;}

.txtL{text-align: left;}
.txtR{text-align: right;}
.txtC{text-align: center;}

.FR{float: right;}
.FL{float: left;}

.fs08{font-size: 0.8em;}
.fs09{font-size: 0.9em;}
.fs12{font-size: 1.2em;}
.fs14{font-size: 1.4em;}
.fs16{font-size: 1.6em;}
.fs18{font-size: 1.8em;}

.mt3{ margin-top: 3em;}

#container{
	position: relative;
	width: 100%;
	transition: left 0.7s;
	left: 0;
	box-sizing: border-box;
}

.open nav.main-nav{	right: 0;}
.open #container{ position: absolute; left: -460px;}

.box-title.fadein { opacity: 0; transform : translate(80px, 0); transition : all 3000ms;}

.fadein { opacity: 0; transform : translate(0, 50px); transition : all 2000ms;}
.fadein.scrollin{ opacity: 1; transform: translate(0, 0);}

.fadescroll{ 
	opacity: 0;
	transition-property: opacity,transform;
	transform: translateY(100px);
	transition-duration: 3s;
	transition-timing-function: ease;
}
.fadescroll.scrollin{
	opacity: 1;
    transform: translate(0);
}

.fadeslide{
	position: relative;
	display: inline-block;
}

.fadeslide img{
	opacity: 0;
}
.fadeslide.scrollin img{
	opacity: 1;
	transition-delay: 0.7s;
}

.fadeslide:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 105%;
	background: #fff;
	top: 0;
	right: 0;
	display: inline-block;
}
.fadeslide.scrollin:before{
	-webkit-animation:  fadeslideend 2s ease 0.7s forwards;
	animation:  fadeslideend 2s ease 0.7s forwards;
}

.tech-line img{
	opacity: 0;
}
.tech-line.scrollin img{
	opacity: 1;
	transition-delay: 0.7s;
}
.tech-line:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 0;
	background: #fff;
	top: auto;
	bottom: 0;
	left: 0;
	display: block;
	transform-origin: bottom;
}
.tech-line.scrollin:before{
	-webkit-animation: fadeslideendH 1.5s ease 0.5s forwards;
	animation: fadeslideendH 1.5s ease 0.5s forwards;
}


@-webkit-keyframes fadeslide {
  0% {
    width: 0;
  }	
  100% {
    width: 100%;
  }
}

@-webkit-keyframes fadeslideend {
  0% {
    width: 100%;
	  right: 0;
	  left: auto;
  }
	
  100% {
    width: 0;
	  right: 0;
	   left: auto;
  }
}

@keyframes fadeslide {
0% {
    width: 0;
  }	
  100% {
    width: 100%;
  }
}
@keyframes fadeslideend {
  0% {
    width: 100%;
	  right: 0;
	  left: auto;
  }
	
  100% {
    width: 0;
	  right: 0;
	   left: auto;
	   
  }
}

@-webkit-keyframes fadeslideH {
  0% {
    height: 0;
  }	
  100% {
    height: 100%;
  }
}

@-webkit-keyframes fadeslideendH {
  0% {
    height: 100%;
	  bottom: 0;
	  left: 0;
  }
	
  100% {
	  height: 1px;
	  bottom: 0;
	  top: auto;
	   left: 0;
  }
}

/* =============================================
	main-nav
============================================= */

.main-nav{
	width: 100%;
	height: 100%;
	max-width: 460px;
	background: #fff;
	position: fixed;
	top: 0;
	right: -100%;
	z-index: 10;
	transition: right 0.7s;
 overflow-y: auto;
}
.nav-inner{
	width: 100%;
	height: 100%;
	position: relative;
	padding-top: 100px;
 padding-top: 0;
 display: flex;
 align-items: center;
}
.nav-front{
 width: 95px;
 height: 100%;
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.nav-logo{
	position: absolute;
	top: 18px;
	left: 27px;
	width: 50px;
	z-index: 1000;
 
 position: relative;
 top: 0;
 left: 0;
 width: auto;
 padding: 24px 0;
}
.nav-logo a{
 display: block;
 width: 50px;
 margin: auto;
}
.nav-logo b{
 display: block;
 padding: 24px 0 0;
 width: 70px;
 margin: auto;
}
.nav-logo span{}
.nav-logo span a{}

.JPEN{ display: block; padding: 24px 0 0; text-align: center; font-size: 10px; letter-spacing: 1px;}
.JPEN a{color: #85CBBF; text-decoration: underline;}

ul.nav-icon{
	position: absolute;
	top: 30%;
	left: 14px;
	width: 65px;
 
 padding-top: 24px;
 position: static;
 margin: auto;
}
ul.nav-icon li{ margin: 0 auto 24px;}

/* Products */
ul.nav-icon li.icon-pro{ width: 45px;}
/* Technology */
ul.nav-icon li.icon-tech{ width: 55px;}
/* Sustainability CSR */
ul.nav-icon li.icon-sus{ width: 65px;}
/* Menu */
ul.nav-icon li.icon-menu{ width: 31px; cursor: pointer;}
.icon-menu img{max-width: 100%; height: auto;}
/* Top */
ul.nav-icon li.icon-top{ width: 30px;}

nav.main-nav .nav-logo,
ul.nav-icon li,
ul.nav-list li a{ transition: opacity .4s;}

nav.main-nav .nav-logo a:hover,
ul.nav-icon li:hover,
ul.nav-list li:hover a{ opacity: 0.5;}

ul.nav-list{
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	margin-left: 130px;
 margin-left: 24px;
}
ul.nav-list li{	border-bottom: 1px solid #a0a0a0;}
ul.nav-list li:first-child{	border-top: 1px solid #a0a0a0;}
ul.nav-list li a{
	font-size: 1em;
	font-weight: bold;
	color: #a0a0a0;
	letter-spacing: 2px;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0.8em 0 0.8em 0.4em;
  line-height: 1.35;
}
ul.nav-list li a:before{
	content:"";
	width: 26px;
	height: 26px;
	background: url("../images/nav-list-icon.svg") no-repeat center;
	background-size: 100%;
	display: inline-block;
	margin-right: 0.3em;
}

.sp-main-nav-btn{
	display: none;
}

/* =============================================
	footer
============================================= */

footer{
	margin-top: 70px;
	padding: 30px 0;
}
footer .site-list{
	display: flex;
	justify-content: space-around;
	color: #747474;
	max-width: 96%;
    margin: 0 auto 0 1%;
	line-height: 1.5;
	font-size: 13px;
	font-weight: normal;
}
footer .site-list > li{
	margin-right: 1em;
  line-height: 1.2;
}
footer .site-list ul li{
  margin-bottom: 1em;
}
footer .site-list .site-cate{
	font-weight: bold;
	font-size: 15px;
	letter-spacing: 1px;
}
footer .site-list a{
	color: #747474;
	transition: opacity .4s;
}
footer .site-list a:hover{
	opacity: 0.7;
}
footer .site-list .site-list-sub{
	padding-top: 1em;
}
footer .site-list .site-list-sub li{
	margin-top: 1em;
	
}
footer .site-list .site-list-sub li:before{
	content: "＞";
}
footer .site-list-sub.sp-tech{
	display: none;
}
footer .site-list .footer-column li{
  padding-bottom: 1em;
}

/* =============================================
	top-page
============================================= */

/*////////// .top-main //////////*/

#top-video video{
	width:100%;
}
#top-video{
	width: 100%;
	/*min-height: 70vh;
	background: url("../images/top-main.jpg") no-repeat center;
	background-size: cover;*/
}
#top-video img{
	width: 100%;
	max-width: 100%;
	height: auto;
}


/*////////// #top-80th //////////*/
.top-80th{
 width: 800px;
 max-width: 92%;
 margin: 24px auto 64px;
 padding: 40px 0;
 background: #f4f4f4;
 font-size: 14px;
 position: relative;
 box-sizing: border-box;
}
.top-80th::before,
.top-80th::after{
 content: "";
 position: absolute;
  width: 0;
  height: 0;
 z-index: 2;
  border-style: solid;
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
}
.top-80th::before{
 left: 0;
 top: 0;
  border-bottom: 60px solid #fff;
  border-top: 0;
 transform: rotate(-45deg);
 transform-origin: left bottom;
}
.top-80th::after{
 right: 0;
 bottom: 0;
  border-top: 60px solid #fff;
  border-bottom: 0;
 transform: rotate(-45deg);
 transform-origin: right top;
}

.top-80th figure{
 text-align: center;
 padding-bottom: 1em;
}
.top-80th figure img{ width: 88px;}
.top-80th p{
 font-weight: 400;
 line-height: 2;
 width: 640px;
 max-width: 92%;
 margin: auto;
}
.top-80th p small{
 font-size: 0.85em;
}
.top-80th p strong{
 font-size: 1.5em;
}

/*////////// #top-read //////////*/

#top-read{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 40px 0 60px;
}
#top-read .read-l{
	font-size: 26px;
	line-height: 1.5;
	letter-spacing: 3px;
	padding-right: 30px;
	border-right: 1px solid #000;
	max-width: 215px;
	width: 100%;
}
#top-read .read-r{
	line-height: 1.7;
	padding-left: 35px;
	font-size: 17px;
	letter-spacing: 2px;
}

/*////////// #news //////////*/

#news{
	min-width: 500px;
	margin: 0 auto;
	background: #f4f5f5;
	max-width: 650px;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	justify-content: space-between;
}
#news .news-title{
	padding: 50px 30px;
    border-right: 3px solid #FFF;
}
#news .news-title img{
	width: 70px;
}
#news .news-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 15px 15px 30px;
	max-height: 130px;
	/*overflow-y: scroll;*/
	box-sizing: border-box;
}
#news .news-list li{
	color: #747474;
	display: flex;
	line-height: 1.5;
    margin-bottom: 0.5em;
}
#news .news-list li:last-child{
	margin-bottom: 0;
}
#news .news-date{
	font-size: 0.9em;
    display: block;
    padding-right: 1em;
}

/*////////// box - base //////////*/

.box{
	position: relative;
	max-width: 1400px;
    margin: 100px auto 0;
}
.box.box-tech{
	margin-top: 100px;
}
.box .box-title{
margin: 0 0 30px 30px;
}
.box .box-title img{
    height: 65px;
	display: inline-block;
}
.box.box-pro .box-title img{
	min-width: 610px;
}
.box.box-tech .box-title img{
	min-width: 710px;
}
.box-title{
	position: relative;
	-webkit-mask-image: url('../images/text-mask-in.png');
	mask-image: url('../images/text-mask-in.png');
	-webkit-mask-position: 0% 100%;
	mask-position: 0% 100%;
	-webkit-mask-size: 5700% 200%;
	mask-size: 5700% 200%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-transition: all 1s ease 0.6s;
	transition: all 1s ease 0.6s;
	opacity: 0;
	transform: translateX(50px);
}
.box-title.scrollin{
	-webkit-mask-position: 100% 100%;
	mask-position: 100% 100%;
	mask-image: none;
	opacity: 1;
	transform: translateX(0);
}
/*.box-title:after{
	content: "";
	position: relative;
	width: 100%;
	height: 100%;
	background: url("../images/text-mask-in.png") no-repeat;
}*/
.box .box-outer{
	position: relative;
}
.box .box-outer .box-read{
	position: absolute;
    top: 20px;
    left: 30px;
    line-height: 1.5;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 1px;
}
.box .box-outer .box-read.fadein{
	transition-delay: 0.5s;
}
.box .box-inner{
	overflow: hidden;
	height: 550px;
	position: relative;
	display: block;
}
.box .box-fig{
    height: 1100px;
    margin-top: -430px;
}

@media screen and (max-width: 1400px){

.box .box-fig{
    margin-top: -450px;
}
	
}

@media screen and (max-width: 1250px){

.box .box-fig{
    margin-top: -350px;
}
	
}
.box.box-tech .box-fig{
	height: 1500px;
    margin-top: -650px;
}

/*////////// box - PRODUCT //////////*/

.box.box-pro .box-fig{
	background: url("../images/box-pro-bg.jpg") no-repeat;
	background-size: 120%;
	background-position: center top;
}

/*////////// box - TECHNOLOGY //////////*/

.box.box-tech .box-fig{
	background: url("../images/box-tech-bg.jpg") no-repeat;
	background-size: 110%;
	background-position: center top;
}

/*////////// .banner //////////*/

.banner{
	display: flex;
	justify-content: center;
	margin-top: 70px;
}
.banner img{
	max-width: 100%;
}
.banner a{
	padding: 0 20px;
	display: block;
	max-width: 450px;
}
.banner a:hover{
	transition: opacity .4s;
	opacity: 0.7;
}
.banner em{
 display: block; 
 text-align: center;
 padding: 12px 0 0;
 font-size: 13px;
 color: #747474;
 font-weight: 400;
}

/* =============================================
	sub base
============================================= */

.scroll-nav{
	display: flex;
    justify-content: space-around;
}
.scroll-nav li{
	width: 25%;
    text-align: center;
	border-right: 1px solid #000;
	    line-height: 1.3;
	    display: flex;
    align-items: center;
}
.scroll-nav li:last-child{
	border-right: none;
}
.scroll-nav.item-5 li{
	width: 25%;
}
.scroll-nav li a{
	display: block;
    width: 100%;
	color: #000;
	font-size: 0.9em;
	padding: 1em 0;
}


.sub-inner{	
	margin: 50px auto 0;
}

.sub-inner.w900{
  width: 900px;
	max-width: 92%;
}
.sub-inner.w1200{
  width: 1200px;
	max-width: 92%;
}

.sub-main{
	width: 100%;
	min-height: 360px;
	position: relative;
}
.sub-main-inner{
	max-width: 550px;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.sub-main-inner img{
	width: 100%;
}

/* サステナビリティ・CSR */
.csr .sub-main{
	background: url("../images/sub-main-bg.png") repeat center, url("../csr/images/csr-sub-main-bg.jpg") no-repeat center;
	background-size: auto, cover;
}
/* 会社概要 */
.company .sub-main{
	background: url("../images/sub-main-bg.png") repeat center, url("../company/images/company-sub-main-bg.jpg") no-repeat top center;
	background-size: auto, cover;
}
/* PRODUCT */
.product .sub-main{
	background: url("../images/sub-main-bg.png") repeat center, url("../product/images/product-sub-main-bg.jpg") no-repeat bottom 45% center;
	background-size: auto, cover;
}
/* TECHNOLOGY */
.technology .sub-main{
	background: url("../images/sub-main-bg.png") repeat center, url("../technology/images/technology-sub-main-bg.jpg") no-repeat top center;
	background-size: auto, cover;
}

.csr-read{
	text-align: center;
}
.csr-read h2{
	font-size: 1.6em;
	font-weight: bold;
	letter-spacing: 1px;
	display: inline-block;
	color: #85cbbf;
	border-bottom: 4px solid #85cbbf;
	line-height: 1.4;
}
.csr-read p{
	font-size: 1.1em;
    line-height: 1.7;
    padding: 1.5em 0;
    letter-spacing: 1px;
	text-align: center;
}

.csr-wrap .csr-box:first-child{
	border-bottom: 1px solid #b4b4b4;
	padding-bottom: 3em;
}

.csr-wrap{
 padding: 0 16px;
}

.csr-wrap h3{
	font-size: 1.4em;
    font-weight: bold;
    letter-spacing: 1px;
    padding-top: 1.5em;
}
.csr-wrap ul.csr-list-1{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	margin-top: 2em;
}
.csr-wrap ul.csr-list-2{
	display: flex;
    justify-content: center;
	margin-top: 3em;
}
.csr-wrap ul.csr-list-1 h4{
	font-weight: bold;
	padding-top: 0.5em;
	line-height: 1.4;
	min-height: 60px;
	display: flex;
	align-items: center;
}
.csr-wrap ul.csr-list-1 p{
	letter-spacing: 1px;
	line-height: 1.4;
	padding-top: 0;
 font-size: 1.0em;
}
.csr-wrap ul.csr-list-1 li{
	width: 100%;
    max-width: 21%;	
	margin-bottom: 1.5em;
}

.csr-wrap ul.csr-list-2 li:nth-child(2){
	margin: 0 8%;
}

.csr-wrap ul.csr-list-2 h4{
	font-size: 1.3em;
    font-weight: bold;
    border-bottom: 3px solid #85cbbf;
    padding-bottom: 0.3em;
    margin-bottom: 0.54em;
	color: #85cbbf;
}
.csr-wrap ul.csr-list-2 li{
	line-height: 1.4;
 flex: 0 0 auto;
	width: auto;
 text-align: center;
 padding: 0;
}
.csr-wrap ul.csr-list-2 li h4{
 display: block;
}
.csr-wrap ul.csr-list-2 li p{
	padding-top: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 font-size: 14px;
 padding: 0 8px;
}
.csr-wrap ul.csr-list-2 li p em{
 padding: 0 8px;
	display: block;
 text-align: center;
 line-height: 1.3;
}
.csr-wrap ul.csr-list-2 li p a{
display: block; padding: 8px 0; text-align: center; color:#84cbbf; font-size: 14px; 
}
.csr-wrap ul.csr-list-2 li p a:hover{
text-decoration: underline;
}

.csr-wrap ul.csr-list-2 li.ISO9001 p{padding: 0;}
.csr-wrap ul.csr-list-2 li.ISO9001 p em{
 padding: 0 0 0 24px; 
}
.csr-wrap ul.csr-list-2 li.ISO9001 p em:first-child{
 padding: 0 24px 0 0; 
}
.csr-wrap ul.csr-list-2 li p span{
 display: block;
 padding-bottom: 6px;
}


.csr-wrap ul.csr-list-2 li p i{
 padding: 8px 0 16px;
 display: block;
 text-align: center;
}
.csr-wrap ul.csr-list-2 li p i img{
	width: 100px;
 height: auto;
 margin: auto;
}

.energy_facility{
  padding: 2em 0;
}
  .energy_facility .lg{
    display: block;
  }
  .energy_facility .md{
    display: none;
  }

.energy_facility h4{
  font-weight: bold;
  padding: 0 0 1em;
  line-height: 1.7;
}
.energy_facility ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
.energy_facility li{
  line-height: 1.5;
}
.energy_facility li a{
  color: #85cbbf;
}
.energy_facility li a:hover{
  color: #85cbbf;
  text-decoration: underline;
}
.energy_facility li img{
  height: auto;
  width: 100%;
  max-width: 100%;
}
.energy_facility li.energy_facility01{
  flex: 0 0 30%;
}
.energy_facility li.energy_facility02{
  flex: 0 0 45%;
}
.energy_facility li.energy_facility03{
  flex: 0 0 22%;
  font-size: 14px;
}



.d-flex{
 display: flex;
}
.align-center{
 align-items: center;
}


@media screen and (max-width: 1320px){
  x.energy_facility li img{
  height: 19vw;
}
}
@media screen and (max-width: 768px){
  .energy_facility .md{
    display: block;
  }
  .energy_facility .lg{
    display: none;
  }

  .energy_facility li img{
  height: auto;
}
  .energy_facility li.energy_facility01{
    order: 2;
    flex: 0 0 56%;

}
.energy_facility li.energy_facility02{
  order: 1;
  flex: 0 0 100%;
  padding: 0 0 16px;
}
.energy_facility li.energy_facility03{
  order: 3;
  flex: 0 0 44%;
  padding-left: 16px;
  box-sizing: border-box;
}
}
@media screen and (max-width: 480px){
  .csr-wrap{
    padding: 0 8px;
  }
.energy_facility li.energy_facility01{
  flex: 0 0 48%;
  }
.energy_facility li.energy_facility03{
  flex: 0 0 52%;
  padding-left: 8px;
  white-space: nowrap;
  }
}

.company-title{
	text-align: center;
	margin: 70px 0 30px 0;
}

.company-title img{
	max-height: 45px;
}
.aisatsu p{
	    
}
.aisatsu .name{
	text-align: right;
	font-size: 1.4em;
}

.aisatsu .name small{
	font-size: 0.7em;
}
.aisatsu .aisatsu-rinen{
    padding: 0px 10%;
	margin-top: 50px;
	position: relative;
	border-left: 1px solid #9b9b9b;
	border-right: 1px solid #9b9b9b;
}
.aisatsu .aisatsu-rinen:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 3%;
	border-top: 1px solid #9b9b9b;
	border-bottom: 1px solid #9b9b9b;
}
.aisatsu .aisatsu-rinen:after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 3%;
	border-top: 1px solid #9b9b9b;
	border-bottom: 1px solid #9b9b9b;
}
.aisatsu .aisatsu-rinen h3{
	font-size: 1.3em;
    font-weight: bold;
    color: #84cbbf;
    letter-spacing: 1px;
	padding-bottom: 0.3em;
}
.aisatsu .aisatsu-rinen p{
	padding-top: 0;
}
.aisatsu .aisatsu-rinen p:nth-child(2){
	padding-bottom: 1em;
}

.vision{
	display: flex;
	justify-content: center;
	align-items: center;
}
.vision img{
	display: inline-block;
	max-height: 210px;
	padding-right: 20px;
}

.slogan{}
.slogan p{
 text-align: center;
 padding-bottom: 40px;
}

.gaiyou > table{
	width: 100%;
	font-size: 1.1em;
	line-height: 1.7;
	margin-bottom: 1em;
}
.gaiyou > table th,
.gaiyou > table td{
	border-top: 1px solid #b2b2b2;
	border-bottom: 1px solid #b2b2b2;
	text-align: left;
}
.gaiyou > table td th,
.gaiyou > table td td{
	border-top: none;
	border-bottom: none;
	text-align: left;
}
.gaiyou > table th{	
	border-right: 1px solid #b2b2b2;
	width: 24%;
	padding: 1em 1em 1em 0;
 font-size: 0.95em;
}
.gaiyou > table td{
	padding: 1em;
 font-size: 0.95em;
}
.gaiyou > table td td{
	padding: 0.1em 1.5em 0.1em 0;
}
.gaiyou > table td td:nth-child(1){
	padding-right: 0.5em;
}
.gaiyou > table.table-3{
	border-top: 1px solid #b2b2b2;
	border-bottom: 1px solid #b2b2b2;
}
.gaiyou > table.table-3 tr:first-child th{
	padding: 0.8em 0 0 0;
}
.gaiyou > table.table-3 tr:last-child th{
	padding: 0 0 0.8em 0;
}
.gaiyou > table.table-3 th,
.gaiyou > table.table-3 td{
	border-top: none;
	border-bottom: none;
}
.gaiyou > table.table-3 th{
	padding: 0.2em 0 0 0;
}
.gaiyou > table.table-3 td{
	padding: 0.2em 0 0 1em;
}

.access{
	padding: 0 5%;
	text-align: right;
}
.access img.map{
	width: 100%;
	box-sizing: border-box;
}
.access p{
	display: inline-block;
}
.access a img{
	max-height: 40px;
	display: inline-block;
	vertical-align: middle;
	padding-left: 1em;
	
}

.honsya-box{
	margin-bottom: 50px;
}
.honsya-box h3{
	position: relative;
}
.honsya-box h3:before{
	content: "";
	width: 100%;
	height: 1px;
	background: #000;
	position: absolute;
	top: 0.5em;
	left: 0;
}
.honsya-box h3 span{
	font-size: 1.4em;
    font-weight: bold;
    letter-spacing: 1px;
	background: #fff;
	padding-right: 0.5em;
	position: relative;
}
.honsya-list{
	display: flex;
 flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
	margin-top: 30px;
	margin-bottom: 15px;
}
.honsya-box a{
	width: 50%;
	margin: 40px auto 0;
	display: block;
	transition: opacity 0.4s;
}
.honsya-box a em{
 display: block;
 text-align: center;
 font-size: 13px;
 color: #747474;
 padding: 10px 0 0;
 font-weight: 400;
}
.honsya-box a:hover{
	opacity: 0.7;
}
.honsya-box a img{
	max-width: 100%;
}
.honsya-box .bottom-list{
	    display: flex;
    padding-left: 1em;
    align-items: flex-end;
}

.honsya-list.list-2,
.honsya-list.list-3{
	justify-content: flex-start;
}
.honsya-list.list-2 li:nth-child(1){
	width: 43%;
 padding-right: 32px;
}
.honsya-list.list-2 li:nth-child(2){
	width: 31%;
}
.honsya-list.list-3 li:nth-child(1){
	padding-right: 2em;
}

.honsya-list li{
	width: 31%;
 margin-bottom: 16px;
}
.honsya-list li img{
	width: 100%;
}
.honsya-name{
	font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 0.4em;
    display: inline-block;
    color: #84cbbf;
}

.product-read{
	text-align: center;
}
.product-read p{
	text-align: center;
}
.product-read-tag{
	color: #717071;
	font-size: 1.1em;
	margin: 20px 0 60px;
}
.product-read-tag em{
	background: #717071;
	color: #fff;
	padding: 0.3em 0.6em 0.2em 0.6em;
	line-height: 1.5;
	margin-right: 1em;
}

.product-wrap{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.product-wrap h2{
	text-align: left;
	padding-bottom: 1em;
}
.product-wrap h2 img{
	height: 100%;
    display: inline-block;
    max-height: 110px;
}
.product-img img{
	width: 100%;
}

.product-wrap li{
	width: 48%;
	margin-top: 60px;
}
.product-wrap li:nth-child(1){
	width: 100%; flex: 0 0 100%;
}

.technology-read{
	text-align: center;
}
.technology-read p{
	text-align: center;
}
.tech-wrap.tech-wrap-sp{
	display: none;
}


.tech-wrap{
	padding-top: 140px;
	position: relative;
}
.tech-note{
position:absolute; right: 0; top: 52px; color: #84cbbf; font-size: 14px;
}

.tech-wrap ul li{
	max-width: 160px;
	position: absolute;
}
.tech-wrap ul li a{
	display: block;
	position: relative;
}
.tech-wrap ul li a:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: opacity .3s;
}
.tech-wrap ul li a:hover:before{
	opacity: 0;
}
.tech-wrap ul li a img{
	width: 100%;
}

.tech-wrap ul li.tech-1{
	top: 65px;
    left: 130px;
}
.tech-wrap ul li.tech-1 a:before{
	background: url("../technology/images/kikaku-off.svg") no-repeat center;
	backgorund-size: 100%;
}

.tech-wrap ul li.tech-2{
	top: 65px;
        left: 350px;
}
.tech-wrap ul li.tech-2 a:before{
	background: url("../technology/images/kenkyu-off.svg") no-repeat center;
	backgorund-size: 100%;
}

.tech-wrap ul li.tech-3{
    top: 360px;
    right: 40px;
}
.tech-wrap ul li.tech-3 a:before{
	background: url("../technology/images/seihan-off.svg") no-repeat center;
	backgorund-size: 100%;
}

.tech-wrap ul li.tech-4{
	top: 310px;
    left: 240px;
}
.tech-wrap ul li.tech-4 a:before{
	background: url("../technology/images/insatsu-off.svg") no-repeat center;
	backgorund-size: 100%;
}

.tech-wrap ul li.tech-5{
	top: 310px;
        left: 50px;
}
.tech-wrap ul li.tech-5 a:before{
	background: url("../technology/images/dezitaru-off.svg") no-repeat center;
	backgorund-size: 100%;
}

.tech-wrap ul li.tech-6{
    top: 510px;
    left: 240px;
}
.tech-wrap ul li.tech-6 a:before{
	background: url("../technology/images/kakou-off.svg") no-repeat center;
	backgorund-size: 100%;
}

.tech-wrap ul li.tech-7{
	top: 710px;
    left: 240px;
}
.tech-wrap ul li.tech-7 a:before{
	background: url("../technology/images/kensa-off.svg") no-repeat center;
	backgorund-size: 100%;
}

.tech-wrap ul li.tech-8{
	    top: 920px;
    left: 240px;
}
.tech-wrap ul li.tech-8 a:before{
	background: url("../technology/images/asen-off.svg") no-repeat center;
	backgorund-size: 100%;
}

.tech-wrap ul li.tech-9{
	top: 500px;
    right: 240px;
}
.tech-wrap ul li.tech-9 img{
	    width: 360px;
}

.tech-wrap .tech-line img{
	width: 100%;
}

.modalArea{
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#modalBg {
  display: none;
  width: 100%;
  height: 130%;
  /*background-color: rgba(30,30,30,0.9);*/
	background-color: #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
	opacity: 0.7;
  position: fixed;
  z-index: 20;
  top: 0;
}

.modalWrapper{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 70%;
max-width: 800px;
    padding: 50px 7%;
	max-height: 80vh;
	background-image: url("../images/popup_bg.png") no-repeat right bottom;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 21;
      border-radius: 2px;
	overflow-y: scroll;
	
}
.modalWrapper_spot{
  position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
    max-width: 460px;
    padding: 25px 25px 35px;
    background-color: #fff;
    z-index: 10;
    border-radius: 10px;
}
.closeModal{
  color: #fff;
  width: 90px;
  text-align: center;
  font-size: 2em;
  padding-top: 8px;
  cursor: pointer;
	transition: opacity .5s;
	float: right;
}
.closeModal:hover{
	opacity: 0.7;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}

.modalArea video{
	width: 100%;
}

.about_pop_box{
	display: flex;
	justify-content: space-between;
	margin: 2em 0;
}
.about_pop_box p{
	padding-right: 1.5em;
	padding-top: 0;
	font-weight: 500;
}
.about_pop_box span{
    color: #006c78;
    border: 1px solid #006c78;
    font-size: 0.75em;
    padding: 0.2em;
    line-height: 1.4;
    display: inline-block;
    margin-top: 1em;
}

.form p{
	padding: 0 1em;
}
.form p strong{
	
	padding-bottom: 0.2em;
	border-bottom: 1px solid #5db227;
}
.form-wrap{
	margin-top: 2em;
}
.form-wrap .form-box{
	display: flex;
	padding: 0.5em 1em;
	    align-items: center;
}
.form-wrap .form-box label{
    width: 30%;
    display: inline-block;
	text-align: right;
}
.form-wrap .form-box input{
	width: 100%;
	height: 35px;
	border: 1px solid #969696;
	display: inline-block;
	font-size: 1em;
}
.form-wrap .form-box .form-right{
	width: 70%;
	margin-left: 1.5em;
}
.form-wrap .form-box textarea{
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	min-height: 200px;
	max-height: 200px;
}
.form-wrap .form-box label.error{
	width: 100%;
    padding-top: 1em;
    font-size: 0.8em;
    color: #ff1500;
    font-weight: bold;
}
.form-wrap .form-send-wrap{
	text-align: center;
	margin: 1.5em 0;
}
.form-wrap .form-send-wrap input{
	color: #fff;
	font-size: 17px;
	cursor: pointer;
	font-weight: bold;
	 padding: 1em 8em;
}
.form-wrap .form-send-wrap input.submit{
    border: 1px solid #84cbbf;
    background: #84cbbf;
	width: 100%;
    max-width: 393px;
	
}
.form-wrap .form-send-wrap input{
	border: 1px solid #84cbbf;
	background: #84cbbf;
	   
}
.form-wrap .form-send-wrap input:nth-child(2){
	margin-left: 1em;
}
.form-wrap .mess{
	font-size: 1em;
    text-align: center;
    padding: 0 0 0 0;
    font-weight: 500;
    color: #5a5a5a;
	line-height: 1.5;
}
.form-wrap h2{
	text-align: center;
	font-size: 1.5em;
    font-weight: bold;
    color: #84cbbf;
	margin-bottom: 1.5em;
}
.form-wrap h2 span{
	display: inline-block;
    
    border-bottom: 3px solid #84cbbf;
    padding: 0.3em 1em;
    
}
.sub-contents .inner .form-box p{
	padding-top: 0;
}
.form-wrap .form-box:nth-child(1) .form-right{
	position: relative;	
}
.form-wrap .form-box:nth-child(1) .form-right label{
	align-items: center;
	text-align: left;

}
.form-wrap .form-box:nth-child(1) .form-right label label.error{
    position: absolute;
    top: -30px;
    display: inline-block;
    right: 0;
    width: auto;
}
.form-wrap .form-box:nth-child(1) .form-right{
	display: flex;
}
.form-wrap .form-box:nth-child(1) input {
    width: 20%;
    height: 15px;
    margin: 0;
}
.form-wrap .form-box em{
	display: inline-block;
    background: #84cbbf;
    padding: 0.2em 0.5em 0.1em;
    color: #fff;
    font-weight: bold;
    margin-left: 0.5em;
}
.hogo-text{
	    padding: 1em 2em;
    border: 1px solid #9e9e9e;
    max-height: 300px;
    overflow-y: scroll;
	font-size: 0.9em;
}
.hogo-text strong{
	font-weight: bold;
}
.check-hogo{
	    margin: 3em 0;
    text-align: center;
}
.top-btn-fix{
	display: none;
}
p.form-p{
	width: 100%;
    background: #f0f0f0;
    padding: 0.5em 0.5em 0.5em 1em;
    margin-left: 1em;
	min-height: 25px;
}
.form-wrap.check .form-box:nth-child(12){
	display: none;
}


/*PrivacyPolicy*/
.PrivacyPolicy{
 line-height: 1.75;
 font-size: 15px;
 font-weight: 400;
 padding-bottom: 40px;
}
.PrivacyPolicy h1{
 font-weight: bold;
 font-size: 32px;
 color: #85CBBF;
 display: inline-block;
 padding: 0 0 8px;
 border-bottom: 3px solid #85CBBF;
 margin-bottom: 40px;
  line-height: 1.25;
}
.PrivacyPolicy strong{
 color: #85CBBF;
 display: inline-block;
 padding: 8px 0 8px;
 font-size: 1.3em;
 font-weight: 500;
}
.PrivacyPolicy p{
 line-height: 1.75;
}
.PrivacyPolicy .txtR{
 text-align: right;
}




.cls-1{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:300px;
stroke-dasharray: 1500; /* この行を追加 */
    stroke-dashoffset:1500; /* この行を追加 */}
a.check-back{
	display: block;
    width: 100%;
    max-width: 50%;
    margin: 3em auto 0;
    text-align: center;
    background: #84cbc0;
    color: #fff;
    padding: 1.5em 0;
    font-size: 1.1em;
    font-weight: bold;
}

.mess span.sp{
	display: none;
}

@keyframes DASH {
    0% {
        stroke-dashoffset: 4000;
        }
    100% {
        stroke-dashoffset: 0;
        }
    }

@-webkit-keyframes DASH {
    0% {
        stroke-dashoffset: 4000;
    }
    100% {
        stroke-dashoffset: 0;
      }
    }

/* =============================================
	responsive
============================================= */

@media screen and (min-width: 1024px){
	
	/* =============================================
		base
	============================================= */
	
	nav.main-nav{ right: -350px;}
	#container{	padding-right: 95px;}
	.open #container{ left: -350px;}
	
}

@media screen and (max-width: 1024px){
	main{
		padding-top: 60px;
	}
	.top-btn-fix{
		display: inline-block;
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    opacity: 0.9;
}
	.top-btn-fix a{
		display: block;
		    padding: 0.5em;
	}
	.sp-main-nav-btn{
		position: fixed;
		display: flex;
  align-items: center;
  justify-content: flex-end;
		top: 0;
		right: 0;
		width: 100%;
		background: #fff;
		z-index: 100;
	}
 .JPEN{display: none;}
	.sp-main-nav-btn span{
  
 }
	.sp-main-nav-btn span a{
  color: #85CBBF; text-decoration: underline; font-size: 13px; display: block; padding: 8px;
 }
	.sp-main-nav-btn img{
		width: 33px;
		padding: 0.7em;
	}
	.nav-icon{
		display: none;
	}
}


@media screen and (max-width: 980px){
  footer .site-list{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  footer .site-list > li{
    margin-left: 1em;
    padding-bottom: 2em;
  }
}

@media screen and (max-width: 940px){
  .tech-wrap ul li{
  }
  .tech-wrap ul li.tech-1{
    top: 10vw;
    left: 14vw;
  }
  .tech-wrap ul li.tech-2{
    top: 10vw;
    left: 36vw;
  }
  .tech-wrap ul li.tech-3{
    top: 37vw;
  }
  .tech-wrap ul li.tech-4{
    top: 32vw;
    left: 25%;
  }
  .tech-wrap ul li.tech-6{
    top: 54vw;
    left: 25%;
  }
  .tech-wrap ul li.tech-7{
    top: 74vw;
    left: 25%;
  }
  .tech-wrap ul li.tech-8{
    top: 95vw;
    left: 25%;
  }
  .tech-wrap ul li.tech-9{
    top: 54vw;
    right: 5vw;
    width: 36vw;
    max-width: none;
  }
  .tech-wrap ul li.tech-9 img{
    max-width: 100%;
    width: auto;
  }
}
  
  @media screen and (max-width: 768px){
 .scroll-nav.item-5{}
 .scroll-nav.item-5 li{width: auto; padding: 0 8px; justify-content: center;}
 img{max-width: 100%; }
 .product-wrap h2 img{max-height: 64px;}
 .tech-wrap ul li.tech-9{right: 40px;}
 .product-wrap li:nth-child(1) .product-img img{max-width: none;}
 .csr-wrap ul.csr-list-2{flex-wrap: wrap;}
    .csr-wrap ul.csr-list-1 li{
      flex: 0 0 48%;
      max-width: 48%;
    }
  .tech-wrap ul li{
    padding-top: 4vw;
    max-width: 16vw;
    }
    
}


@media screen and (max-width: 550px){
  .tech-wrap ul li{
    padding-top: 13vw;
    max-width: 20vw;
    }
}

.noSP{}
.noPC{display: none;}

@media screen and (max-width: 450px){
.noSP{display: none;}
.noPC{display: block;}
	
	.mess span.sp{
		display: inline-block;
	}
	.mess span.pc{
		display: none;
	}
	
	p{
	font-size: 0.9em;
}
	
	footer .site-list .site-cate br{
		display: none;
	}
	
	.honsya-box .honsya-list li.bottom-list{
		padding-top: 0;
	}
	
	/* =============================================
		top-page
	============================================= */
	
	#top-read,
	#news{
		max-width: 90%;
		min-width: 90%;
		margin: 0 auto;
	}
	
	#news,
	.banner{
		flex-wrap: wrap;
	}
	#news .news-title img {
		width: 60px;
	}
	
	#news .news-title {
		    padding: 15px 20px;
		width: 100%;
		border-right: none;
		text-align: center;
		border-bottom: 3px solid #FFF;
	}
	#news .news-list{
		max-height: 100%;
		padding: 20px;
	}
	#news .news-list li {
		display: block;
		margin-bottom: 0.8em;
	}
	.box-title.fadein {
    transform: translate(30px, 0);
}
	.box-title.fadein.scrollin{
    transform: translate(0, 0);
}
	
	#top-read{
		flex-wrap: wrap;
		padding: 30px 0; 
		justify-content: start;
	}
	#top-read .read-l {
		padding: 0 30% 0.5em 0;
		border-right: none;
		border-bottom: 1px solid #000;
		width: 100%;
	}
	#top-read .read-r {
		padding: 1.5em 0 0 0;
		font-size: 14px;
		letter-spacing: 1px;
	}
	
	.box {
		overflow-x: hidden;
	}
	.box.box-tech {
    margin-top: 50px;
}
	.box .box-title {
		margin: 0 0 20px 20px;
	}
	.box .box-title img {
		height: 80px;
	}
	.box.box-pro .box-title img{
	min-width: auto;
}
.box.box-tech .box-title img{
	min-width: auto;
}
	.box .box-inner {
		height: 250px;
	}
	.box .box-fig {
height: 1000px;
    margin-top: -285px;
	}
	.box.box-tech .box-fig {
    height: 800px;
    margin-top: -400px;
}
	
	/*////////// box - PRODUCT //////////*/

	.box.box-pro .box-fig{
		background: url("../images/box-pro-bg-sp.jpg") no-repeat center;
		background-size: 115%;
	}

	/*////////// box - TECHNOLOGY //////////*/

	.box.box-tech .box-fig{
		background: url("../images/box-tech-bg-sp.jpg") no-repeat center;
		background-size: 130%;
	}
	
	.banner{
		max-width: 90%;
		min-width: 90%;
		margin: 20px auto;
	}
	.banner a{
		margin-top: 30px;
		padding: 0;
	}
	.banner a img{
		width: 100%;
	}
	
	
	.sub-main{
		    min-height: 240px;
	}
	.sub-main-inner{
		width: 95%;
	}
	.sub-inner {
    padding: 0 1em;
		margin: 30px auto 0;
}
	.product-read-tag{
		text-align: left;
	}
	.product-read-tag span{
		display: block;
		padding-top: 1em;
		font-size: 0.9em;
	}
	.scroll-nav.item-5 li {
		width: 100%;
	}
	.scroll-nav{
		flex-wrap: wrap;
	}
	.scroll-nav li{
		border-right: none;
		border-bottom: 1px solid #000;
	}
	.scroll-nav li:last-child{
		border-bottom: none;
	}
	.product-wrap li {
    	width: 100%;
	}
	.product-wrap h2 img{
		max-height: 75px;
	}
	
	.product-wrap li:nth-child(1) .product-img{
		overflow: hidden;
		width: 100%;
		height: 250px;
	}
	.product-wrap li:nth-child(1) .product-img img {
		width: auto;
		height: 100%;
		margin-left: -150px;
	}
	.product-wrap li {
    	margin-top: 40px;
	}
	.csr-read .spHide{
		display: none;
	}
	.csr-read h2 {
    font-size: 1.4em;
	}
	.csr-wrap ul.csr-list-1 li {
    max-width: 47%;
	}
	.csr-wrap ul.csr-list-1 li p{
		padding-top: 0;
	}
	.csr-wrap h3 {
    line-height: 1.5;
  font-size: 1.1em;
	}
	.csr-wrap ul.csr-list-2 {
    flex-wrap: wrap;
	}
	.csr-wrap ul.csr-list-2 li {
    width: 100%;
		margin-bottom: 1.5em;
}
	.csr-wrap ul.csr-list-2 li p{
		padding-top: 0;
	}
	.csr-wrap ul.csr-list-2 li:nth-child(2) {
    margin: 0 0 1.5em 0;
}
	.vision {
    display: block;
	}
	.vision img {
    display: block;
		margin: 0 auto;
	}
	.gaiyou > table > tr > th {
    width: 24%;
	}
	.gaiyou > table th, 
	.gaiyou > table td{
		display: block;
		width: 100%;
		padding: 0.5em;
		border-top: none;
		    border-right: none;
		box-sizing: border-box;
	}
	.gaiyou > table.table-2 tr:nth-child(1) th{
		border-top: 1px solid #b2b2b2;
	}
	.gaiyou > table.table-2 td{
		
	}
	.gaiyou > table.table-2 td td{
		display: table-cell;
		width: auto;
		font-size: 0.9em;
		    padding: 0.1em 1em 0.1em 0;
	}
 .gaiyou > table.table-2 td td:first-of-type{display: block; width: 100%;}
	.gaiyou > table.table-3 td {
		padding: 0.2em 0 1em 0;
	}
	.gaiyou > table.table-3 tr:last-child th {
    padding: 0 0 0 0;
}
	.gaiyou > table {
    width: 100%;
		font-size: 0.8em;
	}
	.gaiyou{
		overflow-x: scroll;
		
	}
	.access p {
    font-size: 1em;
	}
	
	.honsya-list li {
    width: 100%;
		padding-top: 40px;
}
	.honsya-box h3 span {
    font-size: 1.2em;
	}
	.honsya-list {
    flex-wrap: wrap;
	}
	.honsya-list.list-2 li:nth-child(1) {
    width: 100%; padding-right: 0;
}
.honsya-list.list-2 li:nth-child(2) {
    width: 100%;
	padding-top: 0;
}
	.honsya-list.list-3 li:nth-child(1){
	padding-right: 0;
}
.contact .sub-main {
   min-height: 100px;
}
.form-wrap .form-box label {
    width: 100%;
    display: inline-block;
    text-align: left;
}
.form-wrap .form-box {
    display: block;
    align-items: center;
    box-sizing: border-box;
	margin-top: 0.5em;
}
.form-wrap .form-box .form-right {
    width: 100%;
    margin-left: 0;
	margin-top: 0.5em;
}
.form-wrap .form-box:nth-child(1) .form-right {
    display: flex;
    flex-wrap: wrap;
}
.form-wrap .form-box:nth-child(1) .form-right label {
    align-items: center;
    text-align: left;
    width: 50%;
	margin-top: 0.5em;
}
	.hogo-text {
    padding: 1em 1em;
    border: 1px solid #9e9e9e;
    max-height: 300px;
    overflow-y: scroll;
    font-size: 0.8em;
}
	.form-wrap .form-send-wrap input {
    padding: 1em 6em;
	}
	.modalWrapper {
    width: 100%;
    padding: 15px 5%;
	}
	.about_pop_box p {
    font-size: 0.9em;
		padding-right: 0;
}
	.about_pop_box {
    display: block;
}
	.about_pop_box .pop-left{
		display: none;
	}
	.about_pop_box .pop-left img{
		width: 100%;
	}
	
	.tech-wrap{
		display: none;
	}
	.tech-wrap.tech-wrap-sp{
	display: block;
}
 .tech-note{
  top: 3em;
  font-size: 12px;
 }
	.tech-wrap{
		text-align: center;
		    padding-top: 70px;
	}
	.tech-wrap .tech-line img {
		width: 65%;
		margin: 0 auto;
	}
	
	x.tech-wrap ul li.tech-9 img {
    width: 150px;
}
	.tech-wrap ul li a:before{
		content: none;
	}
	.tech-wrap ul li{
    width: 36%;
    max-width: 50vw;
    padding-top: 0;
}
	
	.tech-wrap ul li.tech-1 {
    top: 42vw;
    left: 10px;
}
	.tech-wrap ul li.tech-2 {
    top: 66vw;
    left: 10px;
}
	.tech-wrap ul li.tech-3 {
    top: 110vw;
    right: auto;
    left: 10px;
}
.tech-wrap ul li.tech-4 {
    top: 124vw;
    left: 10px;
}
	.tech-wrap ul li.tech-5 {
    top: 480px;
    left: 10px;
}
	.tech-wrap ul li.tech-6 {
    top: 153vw;
    left: 10px;
}
	.tech-wrap ul li.tech-7 {
    top: 176vw;
    left: 10px;
}
	.tech-wrap ul li.tech-8 {
    top: 198vw;
    left: 10px;
}
    .tech-wrap ul li.tech-9 {
        top: 153vw;
    right: 25px;
		width: 42%;
	}

	.company-title img {
    max-height: 35px;
}
	.tech-wrap ul li.fadein { transition-delay : 0.5s;}
	
	.scroll-nav li a {
    font-size: 0.9em;
}
	.honsya-box a {
		width: 100%;}
	
	p.form-p {
    padding: 0.5em 0.5em 0.5em 1em;
    margin-left: 0;
    margin-top: 1em;
    min-height: 35px;
    box-sizing: border-box;
}
	.form-wrap .form-send-wrap input {
    width: 100%;
}
	
	footer{
		margin-top: 50px;
	}
		
	footer .site-list{
		display: block;
    max-width: 92%;
    margin: auto;
	}
	footer .site-list > li {
    margin: 0;
		padding: 1em 0;
		border-bottom: 1px dotted #c7c7c7;
	}
	footer .site-list > li:last-child{
		border-bottom: none;
	}
	footer .site-list .site-list-sub {
		padding-top: 0;
	}
	footer .site-list .site-list-sub li {
		margin: 1em 0 0 1em;
	}
	footer .site-list-sub.sp-tech{
	display: block;
}
	footer .site-list-sub.pc-tech{
	display: none;
}
  footer .site-list > li.footer-column{
    border-bottom: 0;
    padding: 0;
  }
  footer .site-list > li.footer-column li{
    border-bottom: 1px dotted #c7c7c7;
    padding: 1em 0 1em;
    margin: 0;
  }

}

@media screen and (max-width: 420px){
	.tech-wrap ul li{
    padding-top: 2vw;
}
  /*
		.tech-wrap ul li.tech-1 {
    top: 180px;
    left: 20px;
}
	.tech-wrap ul li.tech-2 {
    top: 275px;
    left: 20px;
}
	.tech-wrap ul li.tech-3 {
    top: 460px;
    right: auto;
    left: 20px;
}
.tech-wrap ul li.tech-4 {
    top: 520px;
    left: 20px;
}
	.tech-wrap ul li.tech-5 {
    top: 555px;
    left: 20px;
}
	.tech-wrap ul li.tech-6 {
    top: 640px;
    left: 20px;
}
	.tech-wrap ul li.tech-7 {
    top: 735px;
    left: 20px;
}
	.tech-wrap ul li.tech-8 {
    top: 825px;
    left: 20px;
}
	.tech-wrap ul li.tech-9 {
    top: 635px;
    right: 40px;
}
	*/
}

@media screen and (max-width: 380px){
	/*
	.tech-wrap ul li.tech-1 {
    top: 170px;
    left: 10px;
}
	.tech-wrap ul li.tech-2 {
    top: 260px;
    left: 10px;
}
	.tech-wrap ul li.tech-3 {
    top: 420px;
    right: auto;
    left: 10px;
}
.tech-wrap ul li.tech-4 {
    top: 470px;
    left: 10px;
}
	.tech-wrap ul li.tech-5 {
    top: 505px;
    left: 10px;
}
	.tech-wrap ul li.tech-6 {
    top: 580px;
    left: 10px;
}
	.tech-wrap ul li.tech-7 {
    top: 670px;
    left: 10px;
}
	.tech-wrap ul li.tech-8 {
    top: 750px;
    left: 10px;
}
	.tech-wrap ul li.tech-9 {
top: 575px;
    right: 18px;
}
	.tech-wrap ul li.tech-9 img {
    width: 160px;
}
	*/
}

@media screen and (max-width: 365px){
		/*
	.tech-wrap ul li {
    max-width: 95px;
}
		.tech-wrap ul li.tech-1 {
    top: 155px;
    left: 10px;
}
	.tech-wrap ul li.tech-2 {
    top: 250px;
    left: 10px;
}
	.tech-wrap ul li.tech-3 {
    top: 405px;
    right: auto;
    left: 10px;
}
.tech-wrap ul li.tech-4 {
    top: 450px;
    left: 10px;
}
	.tech-wrap ul li.tech-5 {
    top: 485px;
    left: 10px;
}
	.tech-wrap ul li.tech-6 {
    top: 560px;
    left: 10px;
}
	.tech-wrap ul li.tech-7 {
    top: 640px;
    left: 10px;
}
	.tech-wrap ul li.tech-8 {
    top: 720px;
    left: 10px;
}
	.tech-wrap ul li.tech-9 {
top: 555px;
    right: 5px;
}
	.tech-wrap ul li.tech-9 img {
    width: 155px;
}
  */
	.modalWrapper{
		max-height: 90vh;
	}
	
}

@media screen and (max-width: 330px){
	
	x.tech-wrap ul li {
    max-width: 95px;
}
  /*
		.tech-wrap ul li.tech-1 {
    top: 155px;
    left: 10px;
}
	.tech-wrap ul li.tech-2 {
    top: 225px;
    left: 10px;
}
	.tech-wrap ul li.tech-3 {
    top: 365px;
    right: auto;
    left: 10px;
}
.tech-wrap ul li.tech-4 {
    top: 400px;
    left: 10px;
}
	.tech-wrap ul li.tech-5 {
    top: 435px;
    left: 10px;
}
	.tech-wrap ul li.tech-6 {
    top: 500px;
    left: 10px;
}
	.tech-wrap ul li.tech-7 {
    top: 570px;
    left: 10px;
}
	.tech-wrap ul li.tech-8 {
    top: 640px;
    left: 10px;
}
	.tech-wrap ul li.tech-9 {
top: 495px;
    right: 0px;
}
	.tech-wrap ul li.tech-9 img {
    width: 140px;
}
  */
	.modalWrapper{
		max-height: 90vh;
	}
	
}