@charset "UTF-8";
@media  only screen and (max-width: 1340px){
.section-inner-max{ padding:120px 0;}
.section-inner-semimax{ padding:100px 0;}
.section-inner{ padding:60px 0;}
.section-inner-min{ padding:50px 0;}
.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%;}
.pc{ display: none !important;}
.tb{ display: block !important;}
.sp{ display: none !important;}
.pctb{ display: block !important;}
.tbsp{ display: block !important;}
.p-t0{ padding-top: 0;}
.p-b0{ padding-bottom: 0;}
.txt{ font-size: 1.8rem;}

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

/*  top mv scroll
--------------------------------------------- */
.top-mv-scroll{
  bottom: 3%;
  left: 2%;
}

/*  --------------------------------------------
------------------------------------------------
共通
------------------------------------------------
--------------------------------------------  */
/*  ttl
--------------------------------------------  */
.main-ttl .en{
  font-size: 6.0rem;
}  
.sub-ttl .en{
  font-size: 3.2rem;
}  
.main-ttl .jp{
  font-size: 3.2rem;
}  
.sub-ttl .jp{
  font-size: 2.0rem;
}
.h3-ttl{
  font-size: 1.8rem;
}
.h4-ttl{
  font-size: 1.6rem;
}
/*  ----------------------------------------  */
/*  ----------------------------------------  */

/*  overview
--------------------------------------------- */
.be-logo{
  width: 60%;
}
.be-logo img{
  width: 100%;
}
.be-logo-txt{
  margin-top: 40px;
  gap: 5%;
}
.be-logo-txt span {
  width: 20%;
}
.be-logo-txt p{
  font-size: 2.8rem;
}
.bg-overview-bgimg{
  left: -50px;
  width: 27%;
  margin-top: 20px;
}
.bg-overview-bgimg img{
  width: 100%;
}

/*  about
--------------------------------------------- */
.about-txt{
  width: 75%;
  padding-left: 25%;
}
.about-wrap .bg-about-logo{
  right: 6%;
  width: 30%;
}
.about-wrap .bg-about-logo img{
  width: 100%;
}
.about-wrap .bg-aboutimg{
  left: 0px;
  z-index: -1;
  width: 20%;
}
.about-container.section-inner-max{
  padding-top: 7vw;
}

/*  ksur
--------------------------------------------- */
.ksur-wrap .bg-ksurimg{
  left: 16%;
  width: 8%;
}
.ksur-txt{
  margin: 120px auto 0;
}
.ksur-logo{
  margin-top: 50px;
  max-width: 500px;
}
.ksur-img{
  width: 36%;
  margin-top: 60px;
}

/*  message
--------------------------------------------- */
.message-container{
  align-items: flex-end;
}
.message-txt{
  width: calc( 100% - 30% );
  padding-bottom: 60px;
}
.signature{
  margin-top: 30px;
}

/*  item
--------------------------------------------- */
.item-container{
  display: block;
  max-width: calc(100% - 400px);
}

/*  collaboration
--------------------------------------------- */
.goods{
  margin-top: -30px;
}
.goods.bg-color-key{
  background: linear-gradient(180deg, #ffffff00 0%, #ffffff00 30px, #003399 30px, #003399 100%);
}
.goods-ttl .ttl-box{
  top: 400px;
  left: -300px;
}
.goods .outside-right{
  margin-right: calc(50% - 50vw);
  padding: 0 0 0 80px;
}
.goods-slide-item{
  height: auto !important;
  margin-right: 23px;
}
.goods-slide-item-inner{
  padding: 8%;
}
.goods-under-container{
  width: calc(94% - 80px);
}
@media screen and (max-width: 1179px) and (min-width: 769px) {
  .goods-ttl .ttl-box{
    top: 400px;
    left: -260px;
  }
  .goods .outside-right{
    padding: 0 0 0 120px;
  }
  .goods-slide-item-inner{
    padding: 8%;
  }
  .goods-under-container{
    width: calc(94% - 120px);
  }
}
.goods-slide-ttl{
  font-size: 2.0rem;
}
.goods-under-container .txt{
  font-size: 1.8rem;
}
.goods-under-container .comming-soon{
  font-size: 4.2rem;
}

/*  banner link
--------------------------------------------- */
.list-banner .list-banner-item a{
  padding: 30px 0;
}
.list-banner .list-banner-item a img{
  max-width: 50%;
}
.list-banner .list-banner-item a .hover-arrow-img {
  right: 30px;
  width: 35px;
  height: 35px;
}

}

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

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

/* ------------------------------------------ */
/* ------------------------------------------ */
.header-logo a{
  gap: 20px;
}
.header-logo{
  width: calc( 100% - 46px);
}
.header-logo-img{
  width: 145px;
}
.header-logo-txt{
  font-size: 1.1rem;
  padding-bottom: 0.6vw;
  display: block;
}
.header-container {
  padding-left: 3%;
  padding-right: 3%;
}

/*  header-nav
--------------------------------------------- */
.header-nav {
  right: 3%;
}
.header-nav-list {
  padding: 0 6.667vw;
}
.header-nav-item {
  font-size: 3.2vw;
}
.header-nav-item a{
  padding: 2.667vw 0 2.4vw;
}
.header-nav-item a:hover{
  transform: translateX(5%);
  transition: transform 0.3s ease;
}
.header-nav-item .arrow-right::after{
  width: 3.2vw;
  height: 2.667vw;
  margin-left: 1.867vw;
}
.header-nav-item .link-external-wht::after{
  width: 3.2vw;
  height: 2.667vw;
  margin-left: 1.867vw;
}

/*  header-sp-menu
--------------------------------------------- */
.header-sp-menu {
  padding: 24vw 0 6.4vw;
  width: max-content;
  border-radius: 0px 0px 0px 2.667vw;
}

/*  top mv
--------------------------------------------- */
#op-sp svg,
#op-sp image{
  vertical-align: bottom;
}

/*  top mv scroll
--------------------------------------------- */
.top-mv-scroll{
  bottom: 2%;
  left: 3%;
}
.top-mv-scroll p{
  font-size: 3.2vw;
}
.top-mv-scroll .scroll {
  padding-left: 4.8vw;
}
.scroll::after {
  width: 3.2vw;
  height: 3.2vw;
}

/*  --------------------------------------------------- 
-------------------------------------------------------  
共通
------------------------------------------------------- 
---------------------------------------------------  */
/*  ttl
---------------------------------------------------  */
.ttl-box-max{
  margin-bottom: 6.4vw
}
.ttl-box{
  margin-bottom: 5.333vw;
}
.ttl-box-min{
  margin-bottom: 4.0vw;
}
.ttl-box .sub-ttl{
  margin-top: 2.4vw;
}
.main-ttl .en{
  font-size: 10.667vw;
  line-height: 1em;
}  
.sub-ttl .en{
  font-size: 6.4vw;
}  
.main-ttl .jp{
  font-size: 6.0vw;
}  
.sub-ttl .jp{
  font-size: 3.467vw;
}
.h3-ttl{
  font-size: 4.8vw;
}
.h4-ttl{
  font-size: 4.0vw;
}

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

/*  overview
--------------------------------------------- */
.overview .section-inner-semimax{
  padding-bottom: 36vw;
}
.be-logo{
  width: 85%;
}
.be-logo-txt{
  margin-top: 9.067vw;
  gap: 5%;
  justify-content: flex-start;
}
.be-logo-txt span {
  width: 25%;
}
.be-logo-txt p{
  font-size: 4vw;
}
.bg-overview-bgimg{
  left: 0;
  width: 67%;
  margin-top: 16vw;
}
.bg-overview-bgimg img{
  width: 100%;
}

/*  about
--------------------------------------------- */
.about-txt{
  width: 90%;
  padding-left: 10%;
  padding-top: 13.333vw;
}
.about-wrap .bg-aboutimg{
  position: absolute;
  bottom: 0;
  left: 2%;
  z-index: -1;
  width: 47%;
}
.about-wrap .bg-about-logo{
  position: unset;
  width: 60%;
  margin-left: auto;
  margin-right: 10%;
  padding-top: 16vw;
}
.about-wrap .bg-aboutimg img{
  vertical-align: bottom;
  width: 100%;
}
.about-container.section-inner-max{
  padding-top: 49vw;
}
.bg-about-bgimg{
  position: absolute;
  top: 0;
  left: 0;
}

/*  ksur
--------------------------------------------- */
.ksur{
  overflow: hidden;
}
.ksur-wrap .bg-ksurimg{
  left: 40%;
  width: 18%;
}
.ksur-container{
  padding-top: 16vw;
  display: block;
}
.ksur-txt{
  width: 90%;
  margin: 0 auto;
}
.ksur-logo{
  max-width: 100%;
  margin-top: 8vw;
  gap: 4%;
}
.ksur-img{
  width: 86%;
  margin-top: 16vw;
  margin-left: auto;
  margin-right: -7%;
}

/*  message
--------------------------------------------- */
.message .section-inner{
  padding: 16vw 0 0 0;
}
.message-container{
  gap: 0%;
}
.message-img{
  width: 33%;
  margin-left: -6%;
}
.message-txt{
  width: calc( 100% - 27% );
  padding-bottom: 16vw;
}
.signature{
  margin-top: 4vw;
  font-size: 2.667vw;
}

/*  item
--------------------------------------------- */
.item .section-inner-semimax{
  padding-bottom: 12vw;
}
.item .bg-itemimg{
  position: absolute;
  top: 0;
  right: 0;
  width: 53%;
  height: auto;
}
.item .bg-itemimg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.item-container{
  padding-top: 26vw;
  max-width: 100%;
}

/*  collaboration
--------------------------------------------- */
.goods{
  margin-top: -6.4vw;
  overflow-x: hidden;
}
.goods .inter{
  width: 88%;
}
.goods .inter .section-inner-max{
  padding: 18.667vw 0 12vw;
}
.goods .inner{
  padding-right: 0;
}
.goods .outside-right{
  padding: 0 0 0 3%;
}
.goods.bg-color-key{
  background: linear-gradient(180deg, #ffffff00 0%, #ffffff00 6.4vw, #003399 6.4vw, #003399 100%);
}
.goods-container{
  display: none;
}
.goods-slide-item{
  margin-right: 15px;
  border-radius: 4vw;
}
.goods-slide-ttl{
  font-size: 3.733vw;
}
.goods-slide-img{
  margin: 6.4vw auto;
}
.goods-slide-txt{
  font-size: 3.467vw;
}
.goods-slide-mintxt{
  font-size: 3.2vw;
  margin-top: 3.467vw;
}
.goods-slide-item-inner{
  padding: 5%;
}

.c-slider{
  padding-bottom: 25vw;
}
.c-slider .slick-arrow.slick-next,
.c-slider .slick-arrow.slick-prev{
  width: 14vw;
  height: 14vw;
}
.c-slider .slick-arrow.slick-prev{
  left: 25%;
  bottom: -30vw;
}
.c-slider .slick-arrow.slick-next{
  left: unset;
  right: 39%;
  bottom: -30vw;
}
.c-slider .slick-arrow.slick-prev::after,
.c-slider .slick-arrow.slick-next::after{
  right: 3.5vw;
  width: 6vw;
  height: 6vw;
}
.goods-under-container{
  width: 100%;
  padding: 9.6vw 0 0;
}
.goods-under-container .txt{
  font-size: 3.733vw;
}
.goods-under-container .comming-soon{
  margin-top: 6.4vw;
  text-align: left;
  font-size: 6.4vw;
}

/*  banner link
--------------------------------------------- */
.list-banner{
  display: block;
  width: 90%;
  margin: 0 auto;
}
.list-banner .list-banner-item:not(:first-child){
  margin-top: 3.2vw;
}
.list-banner .list-banner-item a{
  padding: 6.4vw 0;
}
.list-banner .list-banner-item a img{
  max-width: 40%;
}
.list-banner .list-banner-item a .hover-arrow-img {
  right: 6.4vw;
  width: 5.867vw;
  height: 5.867vw;
}


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

/*  footer
--------------------------------------------- */
.footer-container{
  padding: 18.667vw 0 8vw;
}
.footer-logo img{
  width: 28%;
}
.footer-logotxt{
  margin-top: 4vw;
  font-size: 2.667vw;
  padding-bottom: 1.333vw;
}
.footer-official{
  margin-top: 10.133vw;
}
.footer-official a{
  border-radius: 1vw;
  padding: 1vw 2.4vw;
  font-size: 2.667vw;
}
.link-external::after{
  width: 2.667vw;
  height: 2.133vw;
  margin-left: 1.333vw;
}
.footer-sns{
  margin-top: 5.333vw;
}
.footer-sns ul{
  gap: 4vw;
}
.footer-sns ul li a img{
  height: 5.333vw;
}
.footer-copy{
  margin-top: 6.4vw;
  font-size: 2.333vw;
}

}