@charset "UTF-8";
@media  only screen and (max-width: 1240px){
.wrap-wide{ padding: 0 2%;}
.wrap-semiwide{ padding: 0 2%;}
.wrap-normal{ padding: 0 2%;}
.wrap-min{ padding: 0 2%;}
.wrap-min2{ padding: 0 2%;}
}
/*  ----------------------------------------  */
/*  ----------------------------------------  */

@media  only screen and (max-width: 1024px){
.pc{ display: none !important;}
.tb{ display: block !important;}
.sp{ display: none !important;}
.pctb{ display: block !important;}
.tbsp{ display: block !important;}
.wrap-wide{ padding: 0 6%;}
.wrap-semiwide{ padding: 0 6%;}
.wrap-normal{ padding: 0 6%;}
.wrap-min{ padding: 0 6%;}
.wrap-min2{ padding: 0 6%;}
.sp_wrap-wide{ padding: 0 2%;}
.sp_txt-tall{ line-height: 2.2em;}

.header {    
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
}
.header-container {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  padding-right: 6%;
  padding-left: 6%;
  width: 100%;
}
.header-logo{
  width: 50%;
  max-width: 200px;
  position: relative;
  z-index: 11;
}
.header-logo a{
  display: block;
}

/*  header-menu
--------------------------------------------- */
.header-menu {
  position: relative;
  overflow: hidden;
  height: 80px;
  overflow: visible;
}
.header-menu .header-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  -ms-flex-align: center;
  height: 100%;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
}

/*  header-nav
--------------------------------------------- */
.header-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  height: 100%;
  -webkit-box-align: center;
  align-items: center;
}
.header-nav-list {
  display: block;
  overflow: auto;
  padding: 30px 6% 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 0;
  height: auto;
}
.header-nav-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  -ms-flex-align: center;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #000;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: normal;
  font-size: 18px;
}
.header-nav-item a{
  width: 70%;
  padding: 15px 0 10px;
  display: block;
}
.header-nav-item .arrow-bottom-box{
  width: 50px;
}
.header-nav-item .arrow-bottom-item {
  position: relative;
  width: 50px;
  height: 100%;
  padding: 10px 0;
  cursor: pointer;
  transition: opacity .3s;
}
.header-nav-item .arrow-bottom-item::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 16px;
  background: url(/assets/img/common/arrow-bottom.svg) 50% 50% no-repeat;
  background-size: 100% auto;
  content: "";
  transition: .3s;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.header-nav-item--opened .arrow-bottom-item::before {
  background: url(/assets/img/common/arrow-top.svg) 50% 50% no-repeat;
  transition: .3s;

}

/* hamburger open bodybackground 固定 */
body.is-fixed {
  overflow: hidden;
}
/* header lang */
.header-lang{
  margin-top: 20px;
  margin-bottom: 20px;
}
.header-lang select{
  appearance: none;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 18px;
  font-family: "Monda", sans-serif;
  font-weight: 300;
  color: #555;
  padding: 10px 0;
}

/*  header-sp-menu
--------------------------------------------- */
.header-sp-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 80px;
  width: 100%;
  height: 100%;
  background-color: rgba(200,200,200,0.9);
}

/*  header-sp-trigger
--------------------------------------------- */
.header-sp-trigger {
  position: relative;
  z-index: 10;
  display: none;
  cursor: pointer;
}
.header-sp-trigger.is-opened .header-sp-trigger__text span {
  background-color: #6b1b7e !important;
}
.header-sp-trigger__text,
.header-sp-trigger__text span {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: .4s;
  transition: .4s;
}
.header-sp-trigger__text {
  position: relative;
  display: block;
  width: 30px;
  height: 20px;
}
.header-sp-trigger.is-opened .header-sp-trigger__text span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-315deg);
  transform: translateY(9px) rotate(-315deg);
}
.header-sp-trigger.is-opened .header-sp-trigger__text span:nth-of-type(2) {
  opacity: 0;
}
.header-sp-trigger.is-opened .header-sp-trigger__text span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(315deg);
  transform: translateY(-9px) rotate(315deg);
}
.header-sp-trigger__text span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #6b1b7e;
}
.header-sp-trigger__text span:nth-of-type(1) {
  top: 0;
}
.header-sp-trigger__text span:nth-of-type(2) {
  top: 9px;
}
.header-sp-trigger__text span:nth-of-type(3) {
  bottom: 0;
}
.header-sp-trigger {
  display: block;
}

/*  header-nav-hovermenu
--------------------------------------------- */
.header-nav-hovermenu {
  position: static;
  top: auto;
  left: auto;
  z-index: 0;
  display: none;
  width: 100%;
}
.header-nav-item:hover .header-nav-hovermenu-wrapper {
  opacity: 1;
}
.header-nav-hovermenu-wrapper {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 20px 20px 40px;
  min-width: 100%;
  max-height: none;
  width: auto;
  opacity: 1;
}
.header-nav-hovermenu-content {
  display: block;
  margin-left: 0;
  width: 100%;
}
.header-nav-hovermenu-content:nth-child(n+2) {
  margin-top: 30px;
}
.header-nav-hovermenu-content ul li a{
  display: block;
  padding: 5px 0;
  font-size: 1.6rem;
  font-weight: 500;
}


/*  --------------------------------------------------- 
-------------------------------------------------------  
共通
------------------------------------------------------- 
---------------------------------------------------  */
/*  ttl
---------------------------------------------------  */
.ttl-box-max{
  margin-bottom: 40px;
}
.sub-ttl .en{
  font-size: 7.2rem;
}

/*  button
--------------------------------------------- */
.btn-box{
  width: fit-content;
}
.btn-box.btn-spcenter{
  margin: 30px auto 0;
}
.btn-circle:before{
  width: 20px;
}
.btn-circle:hover:before {
  width: 25px;
}

/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */

/*  top about
--------------------------------------------- */
.img-right-outside{
  flex-direction: column-reverse;
}
.img-right-outside .img-right-outside__left{
  width: 100%;
  margin-top: 30px;
}
.img-right-outside .img-right-outside__right{
  width: 100%;
}
.img-right-outside .img-right-outside__right img{
  width: 100%;
  max-width: 100%;
}

/*  top solution
--------------------------------------------- */
.top-solution .img-right-outside .img-right-outside__right{
  width: 100%;
}

/*  top technology
--------------------------------------------- */
.flex-imgtxt{
  flex-direction: column;
}
.flex-imgtxt__left{
  width: 100%;
}
.flex-imgtxt__right{
  width: 100%;
  margin-top: 30px;
}
.top-technology .flex-imgtxt__left{
  margin-left: auto;
}
.top-technology .flex-imgtxt__left{
  width: 100%;
}

/*  top products
--------------------------------------------- */

/*  top news
--------------------------------------------- */
.top-news-container{
  display: block;
}
.top-news-container .ttl-box .sub-ttl{
  margin-top: auto;
}
.top-news-list{
  width: 100%;
}
.top-news-item a{
  display: block;
  padding: 10px 0;
  border-bottom: unset;
  transition: 0.5s;
}
.top-news-item:first-child a{
  border-top: unset;
}
.top-news-item a time{
  font-size: 14.5px;
}
.top-news-ttl{
  border-top: 1px solid #000;
  padding-top: 10px;
  margin-top: 5px;
}

/*  footer
--------------------------------------------- */
.main.top .footer-info{
  margin-top: 120px;
}
.main.top .footer-logo{
  position: unset;
  transform: unset;
  -webkit-transform: unset;
  margin: 0 auto;
}
.footer-container{
  padding: 120px 0 30px;
}
.footer-logo{
   width: 55%;
   margin: 0 auto;
}
.footer-list{
  display: none;
}
.footer-contact{
  justify-content: center;
  margin: 20px 0;
  flex-wrap: wrap;
}
.footer-mail{
  display: block;
  width: 100%;
}
.footer-mail a{
  justify-content: center;
  font-size: 2.2rem;
}
.footer-copy{
  justify-content: center;
}
.footer-info-logo{
  width: 53%;
  margin: 0 auto;
}
}

/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */

@media screen and (max-width: 768px) {
* { letter-spacing: 0;}
body {
  width: 100%;
  font-size: 3.467vw;
}
.block{
  width: 100%;
  max-width: 100%;
}
.section-inner{ padding: 13.333vw 0;}
.section-inner-min{ padding: 9.067vw 0;}
.pc{ display: none !important;}
.tb{ display: none !important;}
.sp{ display: block !important;}
.pctb{ display: none !important;}
.tbsp{ display: block !important;}
.txt{ line-height: 1.8em;}
.sp_txt-tall{ line-height: 1.8em;}
.sp-t-l{ text-align: left;}
.p-t0{ padding-top: 0;}
.p-b0{ padding-bottom: 0;}

.header-nav-list{
  padding: 2.133vw 6% 14.667vw;
}
.header-nav-item{
  font-size: 4.8vw;
}
.header-nav-item a{
  padding: 4vw 0 2.667vw;
}
.header-nav-hovermenu-wrapper{
  padding: 0 4vw 4vw 10.667vw;
}
.header-nav-hovermenu-content ul li a{
  padding: 1.333vw 0;
  font-size: 3.467vw;
}
.header-lang select{
  font-size: 4.8vw;
  padding: 1.333vw 0;
}
.header-nav-item .arrow-bottom-box{
  width: 40px;
}
.header-nav-item .arrow-bottom-item {
  width: 40px;
  padding: 4vw 0;
  margin-bottom: 8px;
}
.header-nav-item .arrow-bottom-item::before {
  width: 20px;
  height: 16px;
}

/*  --------------------------------------------------- 
-------------------------------------------------------  
共通
------------------------------------------------------- 
---------------------------------------------------  */
/*  ttl
---------------------------------------------------  */
.ttl-box-max{
  margin-bottom: 8vw;
}
.ttl-box{
  margin-bottom: 5.333vw;
}
.ttl-box-min{
  margin-bottom: 3.733vw
}
.main-ttl .jp{
  font-size: 4vw;
}
.sub-ttl .en{
  font-size: 11.2vw;
}
.sub-ttl .jp{
  font-size: 5.867vw;
}

/*  button
--------------------------------------------- */
.btn-box{
  margin-top: 5.333vw;
}
.btn-box.btn-spcenter{
  margin: 8vw auto 0;
}
.btn-circle {
  padding: 1.067vw 14.667vw 1.067vw 6.667vw;
  border-radius: 5.333vw;
}

/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */

/*  top concept
--------------------------------------------- */
.top-concept .section-inner{
  padding: 40vw 0;
}
.top-concept .sub-ttl .jp{
  font-size: 6.4vw;
}
.txt-mid{
  font-size: 3.733vw;
}
.top-concept .txt-mid{
  width: 75%;
  margin: 0 auto;
}

/*  top about
--------------------------------------------- */
.img-right-outside .img-right-outside__left{
  margin-top: 5.333vw;
}

/*  top products
--------------------------------------------- */

/*  top news
--------------------------------------------- */
.top-news-item a{
  padding: 1.867vw 0;
}
.top-news-item a time{
  font-size: 3.467vw;
}
.top-news-ttl{
  margin-top: 0.533vw;
}

/*  ----------------------------------------  */
/*  ----------------------------------------  */

/*  footer fixed_btn
--------------------------------------------- */
.fixed-close-btn {
  display: none;
}
#fixed-button-wrap{
  width: 100%;
}
.fixed-button-flex .fixed-button-left{
  padding: 2.2vw 2.666vw;
  font-size: 95%;
  line-height: 1.3em;
}
.fixed-button-flex .fixed-button-right{
  padding: 2.2vw 2.666vw;
}
.fixed-button-flex .fixed-button-right ul{
  gap: 4vw;
}
.fixed-button-flex .fixed-button-right ul li .fixed-button-icon img{
  width: 6vw;
  margin-right: 1.333vw;
}
.fixed-button-flex .fixed-button-right ul li a{
  align-items: center;
}

/*  footer
--------------------------------------------- */
.main.top .footer-info{
  margin-top: 18.229vw;
}
.footer-container{
  padding: 18.229vw 0 5.208vw;;
}
.footer-contact{
  margin: 3.2vw 0 4.0vw;
  gap: 10px;
}
.footer-mail a{
  font-size: 3.2vw;
}
.footer-mail a img{
  width: 5vw;
  height: 5vw;
}
.footer-tel{
  font-size: 3.646vw;
}
.footer-time{
  font-size: 2.344vw;
}
.footer-copy{
  margin-top: 1.953vw;
}
.footer-info-copy{
  font-size: 2.604vw;
}


}