@charset "utf-8";
/* -------------------------------------------------------
 common
------------------------------------------------------- */
h3.white{
 display: inline-block;
 padding:10px 15px;
 background-color: #fff;
 font-size:18px;
 line-height: 1;
 color:#00aeeb;
 font-weight: bold;
}
h3.blue{
 display: inline-block;
 padding:10px 15px;
 background-color: #00aeeb;
 font-size:18px;
 line-height: 1;
 color:#fff;
 font-weight: bold;
}
.technology #container{
 overflow: hidden;
}
#ttlText h1 .ttlLine {
 width: 10em;
}
.white.sp{
  display: none;
}
.white.pc{
 display: inline-block;
}

/* -------------------------------------------------------
 core-technology
------------------------------------------------------- */
.coreBG{
 background:url(../image/bg_core.jpg) no-repeat center center;
 background-size: cover;
}
h2.mainTitle{
 font-family: acumin-pro, sans-serif;
 font-weight: 700;
 font-size:38px;
 font-weight: bold;
 line-height: 1.4;
 letter-spacing: 4px;
 padding-bottom: 35px;
 position: relative;
}
h2.mainTitle span{
 display: block;
 padding-bottom:15px;
 font-size:22px;
 font-family: acumin-pro, sans-serif;
 font-weight: 700;
 line-height: 1.4;
 letter-spacing: 2px;
}
h2.mainTitle:after{
 content: "";
 display: block;
 height: 2px;
 width: 50px;
 background: #fff;
 position: absolute;
 left: 0;
 bottom: 0;
}
#techCopy{
 margin-top:35px;
 font-size:17px;
 line-height: 1.6;
}
.innerW{
 position: relative;
}
.textBox{
 width:51%;
}
.textBox p{
 font-size: 14px;
 line-height: 1.6;
 letter-spacing: 0;
 padding:25px 0 0;
}
.textBox p.techSubCopy{
 font-size:17px;
 font-weight: bold;
 line-height: 1.7;
 letter-spacing: 1px;
 padding:0 0 25px;
 position: relative;
}
.textBox p.techSubCopy:after{
 content: "";
 display: block;
 height: 1px;
 width: 30px;
 background: #000;
 position: absolute;
 left: 0;
 bottom: 0;
}
.photoBox{
 width:750px;
 position: absolute;
 top:-50%;left:55%;
}
.photoLbox{
 display: flex;
 flex-direction:row;
 flex-wrap: nowrap;
 justify-content:space-between;
}
.photoLbox .photo{
 width: 460px;
 padding-right:30px;
}
.photoLbox .text{
 width: 500px;
}
.photoLbox .text h3{
 margin-bottom: 35px;
}
.photoLbox .text p{
 font-size: 14px;
 line-height: 1.6;
}
.field{
 margin-top:50px;
 display: flex;
 flex-direction:row;
 flex-wrap: nowrap;
 align-items: center;
 justify-content:space-between;
}
.field p{
 width:42%;
 max-width: 410px;
 font-size: 17px;
 text-align: center;
 padding:38px 0;
 border: 2px solid rgba(255, 255, 255, 0.4);
}
.field p span{
 display: block;
 margin-bottom: 12px;
 font-weight: bold;
}
.fieldarw{
 width: 80px;
 height: 2px;
 background: #fff;
 position: relative;
}
.fieldarw::after {
 position: absolute;
 right: 5px;
 top: 50%;
 display: block;
 content: "";
 width: 37px;
 height: 37px;
 border-right: 2px solid #fff;
 border-top: 2px solid #fff;
 transform: translateY(-50%) rotate(45deg);
}
dl.fieldList{
 display: flex;
 flex-direction:row;
 flex-wrap: nowrap;
 justify-content:space-between;
 margin-top:54px;
 border-left:1px solid #00aeeb;
}
h3 + dl.fieldList{
 margin-top:66px;
}
dl.fieldList dt{
 width:130px;
 padding:5px 0 0 70px;
 font-size: 18px;
 color:#00aeeb;
 font-weight: bold;
 line-height: 1.2;
 position: relative;
}
dl.fieldList dt span{
 position: absolute;
 top:-5px;left:12px;
 font-size: 32px;
 color:#00aeeb;
 font-family: acumin-pro, sans-serif;
 font-weight: 700;
 line-height: 1;
}
dl.fieldList dd{
 width:78%;
 max-width:770px;
 font-size: 15px;
 letter-spacing: 0.5px;
 line-height: 1.6;
 padding-top:2px;
}
@media screen and (min-width: 990px) and (max-width: 1300px) {
  .textBox{
   width:470px;
  }
  .photoBox{
   width:57vw;
   position: absolute;
   top:-12vw;left:55%;
  }
}
@media screen and (min-width: 768px) and (max-width: 989px) {/* TB */
  .textBox{
   width:49%;
  }
  .photoBox{
   width:500px;
   position: absolute;
   top:-10%;left:54%;
  }
  .photoLbox .text h3{
   margin-bottom: 25px;
  }
  .textBox p.techSubCopy{
   letter-spacing: 1.5px;
  }
  .photoLbox .photo{
   width: 32%;
   padding-right:20px;
  }
  .photoLbox .text{
   width: 67%;
  }
  .photoLbox .text p{
   font-size: 14px;
   line-height: 1.8;
  }
  dl.fieldList dt{
   width:200px;
   padding:4px 0 0 60px;
   letter-spacing: 0.5px;
  }
  dl.fieldList dt span{
   letter-spacing:1px;
  }
  dl.fieldList dd{
   width:78%;
   font-size: 15px;
   letter-spacing: 0.5px;
   line-height: 1.6;
   padding-top:2px;
  }
}
@media screen and (max-width: 767px) {/* SP */
  h3.white{
   font-size: 16px;
   line-height: 1.4;
   padding: 6px 15px 4px;
   letter-spacing: 0.5px;
  }
  h3.blue{
   font-size: 16px;
   line-height: 1.4;
   padding: 6px 15px 4px;
   letter-spacing: 0.5px;
  }
  .white.pc{
   display: none;
  }
  .white.sp{
   display: inline-block;
   margin-bottom:0px!important;
  }
  br + .white.sp{
   margin-top:5px!important;
   margin-bottom:25px!important;
  }
  h2.mainTitle{
   font-size:19px;
   letter-spacing: 1px;
   padding-bottom: 20px;
  }
  h2.mainTitle span{
   padding-bottom:5px;
   font-size:13px;
  }
  h2.mainTitle:after{
   height: 1px;
   width: 25px;
  }
  #techCopy{
   margin-top:20px;
   font-size:14px;
  }
  .textBox{
   width:100%;
  }
  .textBox p{
   font-size: 14px;
   padding:20px 0 0;
  }
  .textBox p.techSubCopy{
   font-size:15px;
   line-height: 1.4;
   letter-spacing: 1px;
   padding:0 0 20px;
  }
  .textBox p.techSubCopy:after{
   width: 25px;
  }
  .photoBox{
   width:100vw;
   margin:30px 0 -80px -5vw;
   position: static;
  }
  .photoLbox{
   flex-direction:column;
  }
  .photoLbox .photo{
   width: 100%;
   padding:0;
  }
  .photoLbox .text{
   width: 100%;
  }
  .photoLbox .text h3{
   margin: 35px 0 25px;
  }
  .photoLbox .text p{
   font-size: 14px;
   line-height: 1.6;
  }
  .field{
   margin-top:30px;
   flex-direction:column;
  }
  .field p{
   width:100%;
   max-width: 100%;
   font-size: 14px;
   padding:30px 0;
  }
  .fieldarw{
   margin:-15px 0;
   width: 1px;
   height: 60px;
  }
  .fieldarw::after {
   position: absolute;
   top:auto;
   left: 50%;
   bottom: 4px;
   display: block;
   content: "";
   width: 25px;
   height: 25px;
   border-right: 1px solid #fff;
   border-bottom: 1px solid #fff;
   border-top: none;
   transform:translateX(-50%) rotate(45deg);
  }
  dl.fieldList{
   flex-direction:column;
   margin-top:35px;
   padding-left:20px;
  }
  h3 + dl.fieldList{
   margin-top:30px;
  }
  dl.fieldList dt{
   width:100%;
   font-size: 17px;
   padding:0 0 0 46px;
  }
  dl.fieldList dt span{
   font-size: 26px;
   left: 0px;
  }
  dl.fieldList dd{
   width:100%;
   max-width:100%;
   padding-top:15px;
   font-size: 14px;
  }
}


/* -------------------------------------------------------
 patent
------------------------------------------------------- */
.patentBG{
 background:url(../image/bg_patent.jpg) no-repeat center center;
 background-size: cover;
}
.patent h2.mainTitle{
 letter-spacing: 1px;
 line-height: 1.3;
}
#techCopy2{
 margin-top:35px;
 font-size:17px;
 line-height: 1.6;
}
#graph{
 margin-top:75px;
 display: flex;
 flex-direction:row;
 flex-wrap: nowrap;
 justify-content:space-around;
}
#graph li{
 width:400px;
 margin:0 10px;
}
#approach{
 margin-top:60px;
 display: flex;
 flex-direction:row;
 flex-wrap: nowrap;
 justify-content:space-between;
}
#approach li{
 width:31%;
 max-width:310px;
 margin:0;
}
#approach li h3{
 width:100%;
 height:94px;
 padding-left:110px;
 display: flex;
 align-items: center;
 font-size:16px;
 line-height: 1.3;
 color:#00aeeb;
 font-weight: bold;
 letter-spacing: 0.5;
}
#approach li h3.icon1{
 background:url(../../technology/patent/image/icon1.svg) no-repeat 0 0;
 background-size: 94px 94px;
}
#approach li h3.icon2{
 background:url(../../technology/patent/image/icon2.svg) no-repeat 0 0;
 background-size: 94px 94px;
}
#approach li h3.icon3{
 background:url(../../technology/patent/image/icon3.svg) no-repeat 0 0;
 background-size: 94px 94px;
}
#approach li p{
 margin-top:20px;
 font-size: 15px;
 line-height: 1.6;
 letter-spacing: 0.5;
}
#pickup h3{
 padding-bottom:40px;
 font-size:24px;
 line-height: 1.2;
 color:#fff;
 letter-spacing: 1px;
 font-weight: bold;
}
.case1{
 width:100%;
 position: relative;
 padding-bottom:18%;
}
.case1 .inner{
 width:70%;
 padding:70px 110px 90px 70px;
 background-color: #fff;
 color:#000;
}
.case1 img{
 width: 93%;
 max-width: 912px;
 position: absolute;
 bottom: 0;right:0;
}
.case1 h4{
 font-size:19px;
 line-height: 1.6;
 letter-spacing: 0.5px;
 font-weight: bold;
 padding-bottom: 30px;
 margin-bottom: 25px;
 letter-spacing: 1;
 position: relative;
}
.case1 h4:after{
 content: "";
 display: block;
 height: 2px;
 width: 30px;
 background: #000;
 position: absolute;
 left: 0;
 bottom: 0;
}
.case1 p{
 margin-top:20px;
 font-size: 15px;
 line-height: 1.5;
 letter-spacing: 0.2;
}
#case2Wrap{
 width: 100%;
 margin-top:120px;
 display: flex;
 flex-direction:row;
 flex-wrap: nowrap;
 justify-content:space-between;
}
#case2Wrap > div{
 width:50%;
}
#case2Wrap > div.case3{
 border-left:1px solid rgba(255, 255, 255, 0.4);
}
#case2Wrap > div > .inner{
 width:350px;
 margin:0 auto;
}
#case2Wrap h4{
 font-size:18px;
 line-height: 1.4;
 letter-spacing:1px;
 font-weight: bold;
 padding-bottom: 30px;
}
.case2 ul li.case2arw{
 height:30px;
 position: relative;
}
.case2 ul li.case2arw:before{
 position: absolute;
 right: 99px;
 top: -105px;
 display: block;
 content: "";
 width: 2px;
 height: 200px;
 background-color: #fff;
}
.case2 ul li.case2arw:after{
 position: absolute;
 right: 70px;
 top: 25px;
 display: block;
 content: "";
 width: 60px;
 height: 60px;
 border-right: 2px solid #fff;
 border-bottom: 2px solid #fff;
 transform: rotate(45deg);
}
.case2 ul li p{
 padding-top:10px;
 font-size:14px;
 line-height: 1.4;
}
.case3 ul li p{
 padding-top:10px;
 font-size:14px;
 line-height: 1.4;
}
#patents{
 padding-top:124px;
}
#patents h3 + p{
 margin-top:40px;
 font-size:15px;
 line-height: 1.4;
}
ul.number{
 margin-top:60px;
 display: flex;
 flex-direction:row;
 flex-wrap: nowrap;
 justify-content:space-between;
}
ul.number li{
 width: 23%;
 max-width: 245px;
 background-color: #fff;
 text-align: center;
 padding:30px 0;
}
ul.number li p{
 font-size:15px;
 line-height: 1.4;
 color:#000;
 font-weight: bold;
 padding-bottom:10px;
 letter-spacing:0.5px;
}
ul.number li p + p{
 font-size: 22px;
 color:#00aeeb;
 font-weight: bold;
 line-height: 1;
 padding-bottom:0;
}
ul.number li p + p span{
 margin:0 10px 0 0;
 font-size: 60px;
 color:#00aeeb;
 font-family: acumin-pro, sans-serif;
 font-weight: 700;
 line-height: 1;
 vertical-align: bottom;
}
.date{
 margin-top:20px;
 font-size: 13px;
 color:#fff;
 text-align: right;
}
@media screen and (min-width: 768px) and (max-width: 989px) {/* TB */
  #approach li{
   max-width:300px;
  }
  #approach li h3{
   height:60px;
   padding-left:70px;
   font-size:16px;
  }
  #approach li h3.icon1{
   background:url(../../technology/patent/image/icon1.svg) no-repeat 0 0;
   background-size: 60px 60px;
  }
  #approach li h3.icon2{
   background:url(../../technology/patent/image/icon2.svg) no-repeat 0 0;
   background-size: 60px 60px;
  }
  #approach li h3.icon3{
   background:url(../../technology/patent/image/icon3.svg) no-repeat 0 0;
   background-size: 60px 60px;
  }
  #approach li p{
   font-size: 14px;
   line-height: 1.6;
  }
  .case1 .inner{
   width:70%;
   padding:8% 12% 10% 6% ;
   background-color: #fff;
   color:#000;
  }
  .case1 h4{
  font-size:18px;
   letter-spacing: 1.5px;
  }
  #case2Wrap > div > .inner{
   width:300px;
   margin:0 auto;
  }
  .case2 ul li.case2arw:before{
   right: 71px;
   top: -105px;
   width: 2px;
   height: 200px;
  }
  .case2 ul li.case2arw:after{
   right: 50px;
   top: 42px;
   width: 45px;
   height: 45px;
  }
  ul.number{
   margin-top:50px;
  }
  ul.number li p{
   font-size:16px;
   letter-spacing: 0;
  }
  ul.number li p + p{
   font-size: 20px;
  }
  ul.number li p + p span{
   margin:0 10px 0 0;
   font-size: 50px;
  }
}
@media screen and (max-width: 767px) {/* SP */
  .patentBG{
   background:url(../image/bg_patent_sp.jpg) no-repeat center center;
   background-size: cover;
  }
  #techCopy2{
   margin-top:20px;
   font-size:14px;
  }
  #graph{
   margin-top:0;
   flex-direction:column;
  }
  #graph li{
   width:100%;
   margin:12vw 0 0;
  }
  #approach{
   margin-top:0;
   flex-direction:column;
  }
  #approach li{
   width:100%;
   max-width:100%;
   margin:40px 0 0;
  }
  #approach li h3{
   width:100%;
   height:70px;
   padding-left:85px;
   font-size:16px;
  }
  #approach li h3.icon1{
   background:url(../../technology/patent/image/icon1.svg) no-repeat 0 0;
   background-size: 70px 70px;
  }
  #approach li h3.icon2{
   background:url(../../technology/patent/image/icon2.svg) no-repeat 0 0;
   background-size: 70px 70px;
  }
  #approach li h3.icon3{
   background:url(../../technology/patent/image/icon3.svg) no-repeat 0 0;
   background-size: 70px 70px;
  }
  #approach li p{
   margin-top:15px;
   font-size: 14px;
   line-height: 1.6;
  }
  #pickup h3{
   padding-bottom:20px;
   font-size:18px;
  }
  .case1{
   width:100%;
   padding-bottom:25vw;
  }
  .case1 .inner{
   width:100%;
   padding:40px 5vw 45vw;
  }
  .case1 img{
   width: 80vw;
   max-width: 100%;
   right:5vw;
  }
  .case1 h4{
   font-size:15px;
   line-height: 1.4;
   padding-bottom: 20px;
   margin-bottom: 20px;
  }
  .case1 h4:after{
   height: 1px;
   width: 25px;
  }
  .case1 p{
   margin:20px 0 12vw;
   font-size: 14px;
   line-height: 1.6;
  }
  #case2Wrap{
   margin-top:60px;
   flex-direction:column;
  }
  #case2Wrap > div{
   width:100%;
  }
  #case2Wrap > div.case3{
   border-left:none;
   border-top:1px solid rgba(255, 255, 255, 0.4);
  }
  #case2Wrap > div > .inner{
   width:100%;
   margin:0 auto;
  }
  #case2Wrap h4{
   font-size:14px;
   padding-bottom: 15px;
  }
  .case2 ul{
   display: flex;
   flex-direction:row;
   flex-wrap: nowrap;
   justify-content:space-between;
   position: relative;
  }
  .case2 ul li{
   width:48%;
   position: relative;
  }
  .case2 ul li.case2arw{
   width:60px;
   height: 1px;
   position: relative;
   background-color: #fff;
   position: absolute;
   top:12vw;left:50%;
   transform: translateX(-50%);
   z-index: 2;
  }
  .case2 ul li.case2arw:before{
   content: none;
  }
  .case2 ul li.case2arw:after{
   position: absolute;
   right: 4px;
   top: -9px;
   display: block;
   content: "";
   width: 20px;
   height: 20px;
   border-right:1px solid #fff;
   border-top: 1px solid #fff;
   border-bottom:none;
   transform: rotate(45deg);
   z-index: 2;
  }
  .case2 ul li p{
   padding-top:5px;
   font-size:12px;
   line-height: 1.4;
  }
  .case3{
   margin-top:30px;
   padding-top:30px;
   font-size:14px;
   line-height: 1.4;
  }
  .case3 ul{
   display: flex;
   flex-direction:row;
   flex-wrap: nowrap;
   align-items: center;
   justify-content:space-between;
  }
  .case3 ul li{
   width:35%;
  }
  .case3 ul li + li{
   width:60%;
  }
  .case3 ul li p{
   padding-top:0;
   font-size:12px;
   line-height: 1.6;
  }

  #patents{
   padding-top:60px;
  }
  #patents h3 + p{
   margin-top:20px;
   font-size:14px;
   line-height: 1.4;
  }
  ul.number{
   margin-top:10px;
   flex-wrap: wrap;
  }
  ul.number li{
   width: 48%;
   max-width: 48%;
   margin-top:15px;
   padding:30px 0;
  }
  ul.number li p{
   font-size:14px;
   letter-spacing: 0;
   padding-bottom:0;
  }
  ul.number li p + p{
   font-size: 16px;
  }
  ul.number li p + p span{
   margin:0 5px 0 0;
   font-size: 46px;
  }
  .date{
   margin-top:10px;
   font-size: 12px;
  }
}