@charset "utf-8";

/*------------------------------
	base
------------------------------*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
html { width: 100%; height: 100%; font-size: 62.5%;}
body { font-size: 1.5rem; /* fontsize 15px */ line-height: 1.6; width: 100%; height: 100%; /* viewport */ -webkit-text-size-adjust: 100%; font-family: "Noto Sans Japanese";color: #424242;font-weight: normal;}
a { color: #333333; text-decoration: none;}
a.col_link { color: #0188C8; text-decoration: underline;}
a:hover { opacity: 0.6;}

/* --PC-- */
@media screen and (min-width: 751px) {
body {min-width: 1240px;}
.spOnly{display: none !important;}
a[href*="tel:"] { pointer-events: none; cursor: default; text-decoration: none;}
}

/* --SP-- */
@media screen and (max-width: 750px) {
.pcOnly {display: none !important;}
}

/* 画面外にいる状態 */
.fadeIn {opacity : 0.1;transform : translate(0, 50px);transition : all 500ms;}
 
/* 画面内に入った状態 */
.fadeIn.scrollin {opacity : 1;transform : translate(0, 0);}

/* マウススクロール */
.mouse {text-align: center;position: relative;height: 170px;}
/* --PC-- */
@media screen and (min-width: 751px) {
.mouse {position: absolute;bottom: 0;left: 0;right: 0;}
}

a.scroll {position: absolute;bottom: 0;left: 0;right: 0;margin: auto;z-index: 2;display: inline-block;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);text-decoration: none;text-align: center;}
a.scroll {padding-top: 60px;}
a.scroll span {position: absolute;top: 0;left: 50%;width: 30px;height: 50px;margin-left: -15px;border: 2px solid #1F6B8D;border-radius: 50px;box-sizing: border-box;}
a.scroll span::before {position: absolute;top: 10px;left: 50%;content: '';width: 6px;height: 6px;margin-left: -3px;background-color: #1F6B8D;border-radius: 100%;-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;box-sizing: border-box;}
@-webkit-keyframes sdb {
0% {-webkit-transform: translate(0, 0);opacity: 0;}
40% {opacity: 1;}
80% {-webkit-transform: translate(0, 20px);opacity: 0;}
100% {opacity: 0;}
}
@keyframes sdb {
0% {transform: translate(0, 0);opacity: 0;}
40% {opacity: 1;}
80% {transform: translate(0, 20px);opacity: 0;}
100% {opacity: 0;}
}

/*------------------------------
	main
------------------------------*/
header {position: relative;height: 100vh;}
header .logo {position: absolute;top: 40px;left: 40px;z-index: 10;}
header .logo img {width: 260px;height: auto;opacity: 0;}
header .mainImg {position: relative;}
header .mainOver {position: absolute;top: 0;height: 100%;width: 100%;overflow: hidden;}
header .mainOver img {width: auto;height: 100%;}
header .triangleR {position: absolute;right: 0;top: 120px;}
header .triangleR .overBox {width: 100%;height: 100%;overflow: hidden;}
header .triangleR .overBox img, header .triangleL .overBox img {width: auto; height: 100%;}
header .triangleR .thanks {position: absolute;bottom: 150px;width: 100%;overflow: hidden;}
header .triangleL {position: absolute;left: 0;top: 670px;}
header #headerTit {text-align: center;position: absolute;z-index: 10;top: 200px;left: 0;right: 0;margin: auto;}
header #headerTit .foundation {display: inline-block;background: #fff799;color:#1F6B8D;padding: 2px 20px;font-size: 2.2rem;letter-spacing: 0.2em;margin-bottom: 20px;opacity: 0;}
header #headerTit h1 {color:#1F6B8D;}
header #headerTit h1 span {display: block;}
header #headerTit h1 span.line01, header #headerTit h1 span.line02 {font-size: 6rem;opacity: 0;}
header #headerTit h1 span.line03 {font-size: 9rem;padding-left: 6.5rem;margin-top: -10px;opacity: 0;}
#contents .mainTit {text-align: center;line-height: 2.5;font-size: 2rem;letter-spacing: 0.08em;}
#contents h1 {text-align: center;font-size: 2.5rem;letter-spacing: 0.07em;margin: 50px 0;color: #1F6B8D;}
#contents h1 span.en {display: block;font-size: 1.3rem;letter-spacing: 0.2em;}
#contents h1 span.title {display: inline-block;position: relative;margin-bottom: 1em;padding: 15px 0 10px;font-weight: bold;}
#contents h1 span.title:before {content: '';position: absolute;bottom: -15px;display: inline-block;width: 60px;height: 3px;left: 50%;-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);background-color: #1F6B8D;border-radius: 2px;}
#contents h2 {text-align: center;font-size: 2.5rem;letter-spacing: 0.07em;margin: 20px 0;color: #1F6B8D;}

/*------------------------------
	mind
------------------------------*/
#mind {margin: 120px auto;}
#mind .grayBg {padding: 0;}
#mind .mindBox {width: 940px;margin: 80px auto 260px;display: flex;justify-content: space-around;}
/* --PC-- */
@media screen and (min-width: 751px) {
#mind .mindBox .mindImg {width: 50%;}
#mind .mindBox .mindImg span.over {width: 100%;height: 100%;overflow: hidden;display: block;}
#mind .mindBox .mindImg span.over_tb, #mind .mindBox .mindImg span.over_lr, #mind .mindBox .mindImg span.over_bt {width: 100%;height: 100%;overflow: hidden;display: block;}
#mind .mindBox .mindImg .phBox {position: relative;}
#mind .mindBox .mindImg .phBox .ph01 {position: absolute;left: 0;top: -100px;}
#mind .mindBox .mindImg .phBox .ph02 {position: absolute;left: -100px;top: 160px;}
#mind .mindBox .mindImg .phBox .ph03 {position: absolute;left: 160px;top: 120px;}
#mind .mindBox .mindImg .lineBox {position: absolute;}
#mind .mindBox .mindImg .lineBox .line01 {position: absolute;left: 105px;top: 40px;}
#mind .mindBox .mindImg .lineBox .line02 {position: absolute;left: 0;top: 250px;}
#mind .mindBox .mindImg .lineBox .line03 {position: absolute;left: 0;top: 40px;}
#mind .mindBox .txt {width: 50%;line-height: 2;padding: 50px 50px 50px 0;font-size: 1.8rem;}
#mind .mindBox .mindImg .phBox .ph01 img,
#mind .mindBox .mindImg .phBox .ph02 img,
#mind .mindBox .mindImg .phBox .ph03 img,
#mind .mindBox .mindImg .lineBox .line01 img,
#mind .mindBox .mindImg .lineBox .line02 img,
#mind .mindBox .mindImg .lineBox .line03 img {opacity: 0;}
}

/*------------------------------
	business
------------------------------*/
#mind .business {width: 1240px;margin: 120px auto;}
#mind .business ul {overflow: hidden;}
#mind .business ul li {width: 400px; float: left;margin-right: 20px;}
#mind .business ul li:last-child {margin-right: 0;}
#mind .business ul li .tit {text-align: center;color:#1F6B8D;font-size: 2rem;margin: 15px 0 10px;letter-spacing: 0.07em;}
#mind .business ul li .txt {padding: 0 40px;}

/*------------------------------
	product
------------------------------*/
#product {width: 1240px;margin: 0 auto;}
#product ul {overflow: hidden;}
#product ul li {width: 295px;float: left;margin: 0 20px 20px 0;padding: 30px;border: 1px solid #d6d6d6;cursor: pointer;overflow: hidden;position: relative;}
#product ul li:nth-child(4n) {margin-right: 0;}
#product ul li .item {text-align: center;}
#product ul li .item img {height: 80px;width: auto;}
#product ul li .item .name {text-align: center;margin-top: 10px;font-size: 1.7rem;letter-spacing: 0.07em;color: #1F6B8D;font-weight: bold;}
#product ul li .mask {width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;background-color: rgba(255,255,255,0.9);transition: all 0.2s ease;-webkit-transition: all 0.2s ease;display: flex;align-items: center;}
#product ul li:hover {border: 1px solid #1F6B8D;}
#product ul li:hover .mask {opacity: 1;}
#product ul li .mask .txt {padding: 30px;text-align: left;color: #1F6B8D;}

/*------------------------------
	maker
------------------------------*/
#product .maker {margin: 100px auto;}
#product .maker .cat {text-align: center;}
#product .maker .cat p {display: inline-block;background:#1F6B8D;color: #FFF;padding: 5px 20px;border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;-o-border-radius: 30px;-ms-border-radius: 30px;}
#product .maker p.txt {width: 1000px;margin: 20px auto;line-height: 2;}

.grayBg { background:#f7f7f7;padding: 80px 0 100px;}

/*------------------------------
	slideshowArea
------------------------------*/
@keyframes loop-slide { from { transform: translateX(0);} to { transform: translateX(-100%);}}
#slideshowArea { display: flex;  align-items: center; overflow: hidden; height: 176px;}
#slideshowArea .slideshow { display: flex; animation: loop-slide 20s infinite linear 1s both;}
#slideshowArea li { width: 200px; height: 176px;}
#slideshowArea li img { width: 100%;}

/*------------------------------
	company
------------------------------*/
#company {width: 1240px;margin: 0 auto;}
#company .companyBox {overflow: hidden;}
#company .companyBox .block {width: 580px;float: right;}
#company .companyBox .block:first-of-type {width: 580px;float: left;margin-right: 60px;}
#company .companyBox .block dl {padding: 15px 0;border-bottom: 1px solid #e5e5e5;}
#company .companyBox .block dl dt {display: inline-block;vertical-align: top;width: 100px;}
#company .companyBox .block dl dd {display: inline-block;vertical-align: top;width: 400px;}

/*------------------------------
	office
------------------------------*/
#company .office {width: 1240px;margin: 100px auto 0;}
#company .office ul {overflow:hidden;width: 54%;margin: 0 auto;}
#company .office ul li {width: 295px;float: left;}
#company .office ul li:first-child {margin-right: 50px;}
#company .office ul li:last-child {margin-top: 50px;}
#company .office ul li figcaption {text-align: center;margin-bottom: 10px;}
#company .office ul li figcaption span {display: inline-block;padding: 2px 30px;border: 1px solid #1F6B8D;color: #1F6B8D; border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;-o-border-radius: 30px;-ms-border-radius: 30px;}
#company .office ul li img{width:100%;-moz-transition: -moz-transform 0.5s linear;-webkit-transition: -webkit-transform 0.5s linear;-o-transition: -o-transform 0.5s linear;-ms-transition: -ms-transform 0.5s linear;transition: transform 0.5s linear;-webkit-transform: scale(1.0);-moz-transform: scale(1.0);-o-transform: scale(1.0);-ms-transform: scale(1.0);transform: scale(1.0);}
#company .office ul li img:hover{-webkit-transform: scale(1.03);-moz-transform: scale(1.03);-o-transform: scale(1.03);-ms-transform: scale(1.03);transform: scale(1.03);}

/*------------------------------
	history
------------------------------*/
#history {width: 1240px;margin: 60px auto 100px;overflow: hidden;}
#history .img {float: left;margin-left: 60px;}
#history .img li:first-child {margin-bottom: 20px;}
#history .timeline {float: left;margin-left: 100px;}
.timeline {list-style: none;}
.timeline > li {margin-bottom: 60px;}
/* for Desktop */
@media (min-width:640px) {
.timeline > li {overflow: hidden;margin: 0;position: relative;}
.timeline-date {width: 90px;float: left;padding: 15px 0;}
.timeline-content {width: 75%;float: left;border-left: 1px #c9c9c9 solid;padding: 15px 30px;}
.timeline-content:before {content: '';width: 7px;height: 7px;background: #c9c9c9;position: absolute;left: 87px;top: 23px;border-radius: 100%;}
}

/*------------------------------
	recruit
------------------------------*/
#recruit .banner {width: 650px;margin: 0 auto;position: relative;}
#recruit .banner .link {position: absolute;right: 0;top: 0;bottom: 0;margin: auto;height: 100px;padding: 20px 70px 20px 20px;background: #fff799;color: #1F6B8D;}
#recruit .banner .link .tit {font-size: 2.3rem;font-weight: bold;}

/*------------------------------
	acsess
------------------------------*/
#acsess .maparea { padding-bottom: 400px; height: 0; overflow: hidden; position: relative;}
#acsess .maparea iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%;}

/*------------------------------
	contact
------------------------------*/
#contact .box {width: 990px;margin: 50px auto 80px;display: flex;justify-content: space-between;}
#contact .box li {background: url(../img/btn_bg.jpg) no-repeat center center;background-size: cover; width: 460px;text-align: center;border-radius: 30px;-moz-border-radius: 30px;-webkit-border-radius: 30px;-o-border-radius: 30px;-ms-border-radius: 30px;font-size: 1.8rem;letter-spacing: 0.08em;}
#contact .box li a {color: #FFF;display: block;padding: 20px 0;}
#contact .box li a .iconTel {background: url( ../img/icon_tel.svg) no-repeat center left;padding-left: 40px;background-size: auto 35px;}
#contact .box li a .iconMail {background: url( ../img/icon_mail.svg) no-repeat center left;padding-left: 40px;background-size: auto 55px;}

/*------------------------------
	copy
------------------------------*/
.copy {background:#1F6B8D;color: #fff;text-align: center;font-weight: lighter;padding: 5px 0;}
footer {position: relative;}
#pagetop {position: fixed;right: 50px;bottom: 0;}
#pagetop a.arrow {padding-top: 60px;position: relative;display: block;}
#pagetop a.arrow span {position: absolute;top: 0;left: 50%;width: 46px;height: 46px;margin-left: -23px;border: 1px solid #1F6B8D;border-radius: 100%;box-sizing: border-box;background: #FFF;}
#pagetop a.arrow span::after {position: absolute;top: 50%;left: 50%;content: '';width: 16px;height: 16px;margin: -5px 0 0 -7px;border-left: 1px solid #1F6B8D;border-bottom: 1px solid #1F6B8D;-webkit-transform: rotate(135deg);transform: rotate(135deg);box-sizing: border-box;}
#pagetop a.arrow:hover {opacity: 1;}



/* --SP-- */
@media screen and (max-width: 750px) {
body {font-size: 1.3rem;}
img { width: 100%;height: auto;}
header {position: relative;height: 100vh;width: 100%;overflow: hidden;}
header .logo {top: 5%;left: 5%;width: 30%;}
header .logo img {width: 100%;height: auto;}
header .spBox {position: relative;}
header .mainImg {width: auto;height: 100%;overflow: hidden;}
header .triangleR {top: 10%;width: 30%;height: 103%;}
header .triangleR .thanks {bottom: 10%;right: 15%;}
header .triangleL {width: 19.4%;top: 85%;height: 54.8%;}
header #headerTit {top: 0;bottom: 0;height: 90vw;}
header #headerTit .foundation {font-size: 4vw;}
header #headerTit h1 span.line01, header #headerTit h1 span.line02 {font-size: 10vw;}
header #headerTit h1 span.line03 {font-size: 20vw;padding-left:0;margin-left: 17%;}
.mouse {position: absolute;bottom: 0;left: 0;right: 0;}

#contents .mainTit {font-size: 1.5rem;}
#contents h1 {padding: 0 4.68%;font-size: 2rem;margin: 50px 0 30px;}
#contents h1 span.title {padding: 5px 0 0;font-size: 2.5rem;}
#contents h1 span.title:before {width: 30px;}
#contents h2 {padding: 0 4.68%;}
.grayBg { padding: 20px 0;}

/*------------------------------
	mind
------------------------------*/
#mind {margin: 50px auto;}
#mind .grayBg {padding: 0;}
#mind .mindBox {width: 100%;display: block;margin: 30px auto 0;padding: 10px 0 20px;}
#mind .mindBox .mindImg {width: 100%;position: relative;height: 70vw;}
#mind .mindBox .txt {width: 100%;padding: 4%;text-align: center;line-height: 2.5;font-size: 1.5rem; letter-spacing: 0.08em;}
#mind .mindBox .mindImg span.over {width: 100%;height: 100%;overflow: hidden;display: block;}
#mind .mindBox .mindImg span.over_tb, #mind .mindBox .mindImg span.over_lr, #mind .mindBox .mindImg span.over_bt {width: 100%;height: 100%;overflow: hidden;display: block;}
/*#mind .mindBox .mindImg .phBox {position: relative;width: 100%;height: 70vw;}*/
#mind .mindBox .mindImg .phBox img {height: 100%;width: auto;}
#mind .mindBox .mindImg .phBox .ph01 {position: absolute;left: 36%;top: 10%;height: 40%;}
#mind .mindBox .mindImg .phBox .ph02 {position: absolute;left: 20%;top: 60%;height: 40%;}
#mind .mindBox .mindImg .phBox .ph03 {position: absolute;left: 58%;top: 51%;height: 40%;}
#mind .mindBox .mindImg .lineBox img {width: auto;height: 100%;}
/*#mind .mindBox .mindImg .lineBox {position: relative;height: 48vw;}*/
#mind .mindBox .mindImg .lineBox .line01 {position: absolute;left: 50%;top: 30%;height: 43.2%;width: auto;}
#mind .mindBox .mindImg .lineBox .line02 {position: absolute;left: 35%;top: 73%;height: auto;width: 37.6%;}
#mind .mindBox .mindImg .lineBox .line02 img {width: 100%;height: auto;}
#mind .mindBox .mindImg .lineBox .line03 {position: absolute;left: 35%;top: 31%;height: 48.1%;width: auto;}
#mind .mindBox .mindImg .phBox .ph01 img,
#mind .mindBox .mindImg .phBox .ph02 img,
#mind .mindBox .mindImg .phBox .ph03 img,
#mind .mindBox .mindImg .lineBox .line01 img,
#mind .mindBox .mindImg .lineBox .line02 img,
#mind .mindBox .mindImg .lineBox .line03 img {opacity: 0;}

/*------------------------------
	business
------------------------------*/
#mind .business {width: 100%;margin: 0 auto;}
#mind .business ul li {width: 100%; float: none;margin-right:0;}
#mind .business ul li:last-child {margin-right: 0;}
#mind .business ul li figcaption {padding: 0 4% 8%;}
#mind .business ul li figcaption .txt {padding: 0;}
#mind .business ul li .tit {margin: 10px 0 5px;}

/*------------------------------
	product
------------------------------*/
#product {width: 100%;margin: 50px auto;}
#product ul {margin: 0 4%;display: flex;flex-wrap: wrap;}
#product ul li {width: 48%;float: none;margin: 0 4% 4% 0;padding: 4.68%;border: 1px solid #d6d6d6;cursor: pointer;overflow: hidden;position: relative;pointer-events: none;}
#product ul li:nth-child(2n) {margin-right: 0;}
#product ul li .item {text-align: center;}
#product ul li .item img {height: 80px;width: auto;}
#product ul li .item .name {text-align: center;margin-top: 10px;font-size: 1.7rem;letter-spacing: 0.07em;color: #1F6B8D;font-weight: bold;}
#product ul li .mask {position: static;opacity: 1;}
#product ul li .mask .txt {padding: 4.68% 0 0;font-size: 1.3rem;font-feature-settings:"palt";}
	
/*------------------------------
	maker
------------------------------*/
#product .maker {margin: 50px auto;}
#product .maker p.txt {width: 100%;margin: 20px auto;line-height: 2;padding: 0 4.68%;font-size: 1.3rem;}

/*------------------------------
	slideshowArea
------------------------------*/
#slideshowArea { height: 23.46vw;}
#slideshowArea li { width: 26.66vw; height: 23.46vw;}
    
/*------------------------------
	company
------------------------------*/
#company {width: 100%;margin: 0 auto;}
#company .companyBox .block {width: 100%;float: none;}
#company .companyBox .block:first-of-type {width: 100%;float: none;margin-right: 0;}
#company .companyBox .block dl {padding: 4%;display: table;width: 100%;}
#company .companyBox .block dl dt {width: 25%;display: table-cell;padding-right: 5%;}
#company .companyBox .block dl dd {width: 70%;display: table-cell;}

/*------------------------------
	office
------------------------------*/
#company .office {width: 100%;margin: 50px auto 0;}
#company .office ul {width: 92%; display: flex;flex-wrap: wrap;align-items: baseline;margin: 0 4%;}
#company .office ul li {width:100%;float: none;margin: 0 4% 6% 0;}
#company .office ul li:first-child {width: 100%;margin-right: 0;}
#company .office ul li:last-child {margin-right: 20px;}
#company .office ul li:nth-child(2n) {margin-right: 0;}
#company .office ul li:last-child {margin-right: 0;}
#company .office ul li figcaption span {font-size: 1.3rem;padding: 2px 15px;}
#company .office ul li .txt {font-size: 1.3rem;}

/*------------------------------
	history
------------------------------*/
#history {width: 100%;margin: 0 auto 50px;}
#history .img {float: none;margin-left: 0;overflow: hidden;}
#history .img li {float: left;width: 49%;}
#history .img li:first-child {margin-right: 2%;}
#history .timeline {float: none;margin-left: 0;padding: 0 4.68%;}
.timeline > li {overflow: hidden;margin: 0;}
.timeline-date {width: 20%;float: left;padding: 15px 0;}
.timeline-content {width: 80%;float: left;border-left: 1px #c9c9c9 solid;padding: 15px 30px;position: relative;}
.timeline-content:before {content: '';width: 7px;height: 7px;background: #c9c9c9;position: absolute;left: -4px;top: 23px;border-radius: 100%;}

/*------------------------------
	recruit
------------------------------*/
#recruit.grayBg {padding: 30px 0;}
#recruit .banner {width: 90%;}
#recruit .banner a {display: block;}
#recruit .banner a .link {top: 20%;padding: 2.68%;height: auto;bottom: auto;}
#recruit .banner a .link .tit {font-size: 1.3rem;}
#recruit .banner a .link .txt {font-size: 1rem;}

/*------------------------------
	acsess
------------------------------*/
#acsess .maparea { padding-bottom: 40vw;}

/*------------------------------
	contact
------------------------------*/
#contact .box {width: 100%;display: block;margin: 30px auto 50px;}
#contact .box li {width: 80%;margin: 0 auto;}
#contact .box li:first-child {margin-bottom: 5%;}
.copy {font-size: 1rem;letter-spacing: 0.07em;}
#pagetop {right: 30px;}
}


/* 高さ　414px 以下*/
@media screen and (max-height: 414px) {
header {height: 200vh!important;}
header #headerTit {height: 60vw;}
header #headerTit .foundation {font-size: 3vw;margin-bottom: 10px;}
header #headerTit h1 span.line01, header #headerTit h1 span.line02 {font-size: 6vw;}
header #headerTit h1 span.line03 {font-size: 11vw;margin-left: 10%;}
}