@charset "utf-8";

/* main */
.main-visual {position: relative; height: calc(var(--vh, 1vh) * 100);}
.main-visual__img {width: 100%; height: calc(var(--vh, 1vh) * 100); transition: all 5s ease; transform:scale(1.1);}
.main-visual__img.mv1 {background: url('../images/main/main-visual01.jpg') no-repeat center/cover;}
.main-visual__img.mv2 {background: url('../images/main/main-visual02.jpg') no-repeat center/cover;}
.main-visual__txt {position: absolute; top: 30%; left: 0; width: 100%; z-index: 9;}
.main-visual__txt .inr {max-width: 1540rem; margin: 0 auto; padding: 0 40rem;}
.main-visual__txt .inr > * {transition: all 1s ease; opacity: 0; transform: translateY(30rem);}
.main-visual__txt h1 {font-size: 62rem; font-weight: 700; color: #fff; line-height: 1.4;}
.main-visual__txt p {padding-top: 25rem; font-size: 22rem; color: #fff; line-height: 1.4;}
.main-visual .swiper-slide-active .main-visual__img {transform:scale(1); transition-delay: 0.1s;}
.main-visual .swiper-slide-active .main-visual__txt h1 {opacity:1; transform:translateY(0); transition-delay:0.5s;}
.main-visual .swiper-slide-active .main-visual__txt p {opacity:1; transform:translateY(0); transition-delay:0.6s;}

.swiper-pagination {position: unset; font-size: 0;}
.swiper-pagination span {font-size: 15rem; font-family: var(--font-eng); font-weight: bold; color: rgba(255,255,255,.5);}
.swiper-pagination-current {color: rgba(255,255,255,1) !important;}
.swiper-pagination-total {position: relative; padding-left: 14rem; margin-left: 14rem;}
.swiper-pagination-total::before {content: ''; position: absolute; top: 50%; left: -3rem; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 100%; background: #fff;}
.swiper-container-horizontal>.swiper-pagination-progressbar {position: relative; width: 100%; height: 3rem; margin-top: 90rem; background: #e7e7e7;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #333;}
.swiper-button-lock {display: block;}
.main-visual .visual_control_wrap {position:absolute; left: 0; top: 62%; width: 100%;}
.main-visual .visual_control {position: relative; max-width: 1540rem; margin: 0 auto; padding: 0 40rem; z-index: 50; display: flex; align-items: center; animation: txtUp 1.0s 0.5s; animation-fill-mode: both; animation-delay: 1.5s !important; opacity: 1; transition: all 0.5s;}
.main-visual .swiper-button-next, 
.main-visual .swiper-button-prev{flex: none; position:relative; margin-top:0; bottom:0; top:-2rem; width:13rem; height:10rem; background:url(../images/common/ic-arr.svg)no-repeat center; background-size:contain;}
.main-visual .swiper-button-prev{left:0; transform:rotate(-180deg);}
.main-visual .swiper-button-next{right:0;}
.main-visual .btn_swiper{margin-left:30rem; z-index:90; display:flex; align-items: center; justify-content: space-between; width:112rem;}
.main-visual .swiper-button-next:after, .swiper-button-prev:after{display:none;}
.main-visual .circle-box svg {overflow: visible;position:absolute; width: 70rem;height: 70rem;fill:none;stroke:#fff;transform: rotate(-90deg);}
.main-visual .control-box{position:relative; width:70rem; height:70rem;}
.main-visual .control-box > div{position:absolute; width:12rem; height:12rem; left:50%; top:50%; transform: translate(-50%, -50%);}
.main-visual .control-box > div span{display:block; width:100%; height:100%; font-size:0; cursor:pointer}
.main-visual .control-box .stop span{background:url(../images/main/icon_pause.png) no-repeat center;}
.main-visual .control-box .start{display:none;}
.main-visual .control-box .start span{background:url(../images/main/icon_play.png) no-repeat center;}
#circle__path.on{stroke-dashoffset: 129;transition: none;}
#circle__path{stroke-dashoffset: 0;transition: all 6s ease-in-out 0s;stroke-dasharray: 129;}
#circle__path2 {stroke: #ffffff4f;}

.scroll-down {position: absolute; bottom: 60rem; left: 50%; transform: translateX(-50%); z-index: 8;}
.scroll-down i {position: absolute; top: -20rem; left: 50%; font-size: 15rem; font-weight: 500; font-family: var(--font-eng); color: #fff; transform: translateX(-50%);}
.scroll-down a {display: block;}
.scroll-down a span {position: absolute; top: 0; left: 50%; width: 11px; height: 11px; margin-left: -7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; opacity: 0; box-sizing: border-box;}
.scroll-down a span:nth-of-type(1) {-webkit-animation-delay: 0s; animation-delay: 0s;}
.scroll-down a span:nth-of-type(2) {top: 9px; -webkit-animation-delay: .15s; animation-delay: .15s}

.main-tit.ct {text-align: center; padding: 0 30rem;}
.main-tit.ct.v2 h2 br {display: none;}
.main-tit span {display: block; font-size: 23rem; font-weight: 700; color: var(--color-point); font-family: var(--font-eng); letter-spacing: -0.2rem;}
.main-tit h2 {padding-top: 35rem; font-size: 52rem; font-weight: 700; line-height: 1.3;}
.main-tit p {padding-top: 25rem; font-size: 20rem; font-weight: 400; color: #777; line-height: 1.5;}

.main-about {position: relative; width: 100%; height: 100vh; margin-top: 120rem;}
.main-about::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 124rem; background: #eee; z-index: -9;}
.main-about .wrap {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.main-about .img {position: absolute; top: 40vh; right: 0; left: 0; width: 75.5%; height: 100vh; margin: 0 auto; z-index: -3; overflow: hidden; text-align: center;}
.main-about .img img {position:absolute; top: 0; object-fit: cover; max-width: none; min-width: 100%; min-height: 100%; transform: translateX(-50%); left: 50%;}
/* .main-about .dim {width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; background: #141517;} */

.main-product {background: #eeeeee; padding: 102rem 0 111rem;}
.product-list {margin-top: 60rem;}
.product-list ul {display: grid; grid-template-columns: repeat(5, 1fr); gap: 40rem;} 
.product-list ul li {position: relative; width: 100%; background: #fff; border: 2rem solid transparent; box-sizing: border-box; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; transition: all .3s;}
.product-list ul li a {display: block; padding: 38rem 0 44rem;}
.product-list ul li:hover {border: 2rem solid #e60012; transition: all .3s;}
.product-list ul li::before {content: ''; position: absolute; top: 10rem; left: 10rem; width: 0; height: 0; border-top: 12rem solid #e60012; border-right: 12rem solid transparent; border-bottom: 12rem solid transparent; border-left: 12rem solid #e60012;}
.product-list__name {padding-top: 44rem; text-align: center;}
.product-list__name strong {display: block; font-size: 28rem;}
.product-list__name span {display: block; padding-top: 15rem; font-family: var(--font-eng); font-size: 16rem; font-weight: 700; color: #999999;}
.product-list__img img {width: 100%;}

.main-colbox__bg {position: relative; background: url('../images/main/bg-boxList.jpg') no-repeat; width: calc(100% - 275rem); height: 530rem;}
.main-colbox__bg::before {content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #fff; transition: all 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s;}
.main-colbox__bg.active {opacity: 1; transition: 5s;}
.main-colbox__bg.active::before {width: 0;}
.colbox-list {position: relative; margin-top: -200rem;}
.colbox-list ul {display: grid; grid-template-columns: repeat(3,1fr); width: calc(100% - 630rem); margin-left: auto;}
.colbox-list ul li a {display: block; padding: 42rem; box-sizing: border-box;}
.colbox-list ul li:nth-child(1) {background: var(--color-point);}
.colbox-list ul li:nth-child(2) {background: #f3f3f3;}
.colbox-list ul li:nth-child(2) span {color: #333;}
.colbox-list ul li:nth-child(2) strong {color: #333;}
.colbox-list ul li:nth-child(2) p {color: #222;}
.colbox-list ul li:nth-child(3) {background: #2b2a2d;}
.colbox-list ul li span {display: block; font-size: 20rem; font-weight: 700; color: #fff; font-family: var(--font-eng);}
.colbox-list ul li strong {display: block; padding-top: 60rem; font-size: 36rem; font-weight: 700; color: #fff;}
.colbox-list ul li p {padding-top: 10rem; font-size: 17rem; color: #fff; line-height: 1.5;}
.colbox-list ul li p br {display: none;}
.colbox-list ul li button {width: 50rem; height: 50rem; margin-top: 45rem;}
.colbox-list ul li button i {display: block; background-position: center; width: 12rem; height: 12rem; margin: 0 auto; transform: rotate(-45deg);}
.colbox-list ul li:nth-child(1) button {border: 2rem solid #fff; background: transparent;}
.colbox-list ul li:nth-child(1) button i,
.colbox-list ul li:nth-child(2) button i {background: url('../images/common/ic-arr.svg') no-repeat;}
.colbox-list ul li:nth-child(2) button {background: #2b2a2d;}
.colbox-list ul li:nth-child(3) button {background: #fff;}
.colbox-list ul li:nth-child(3) button i {background: url('../images/common/ic-arr-bk.svg') no-repeat;}

.main-news {margin-top: 125rem;}
.news-list {margin-top: 60rem;}
.news-list ul li {position: relative; border-bottom: 1rem solid #ddd;}
.news-list ul li::before {content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1rem; background: transparent; transition: all .3s;}
.news-list ul li:hover::before {width: 100%; background: var(--color-point); transition: all .3s;}
.news-list ul li a {display: flex; align-items: center; justify-content: space-between; padding: 22rem 18rem; box-sizing: border-box;}
.news-list ul li:nth-child(1) a {padding: 0 18rem 22rem;}
.news-list ul li.not_txt {padding: 22rem 18rem;}
.news-list ul li.not_txt p {font-size: 20rem; font-weight: 500; color: #999;}
.news-list__lt {display: flex; align-items: center; gap: 60rem; width: 80%;}
.news-list__date {flex: none;}
.news-list__date strong {display: block; font-size: 62rem; text-align: center;}
.news-list__date span {display: block; font-size: 20rem; font-weight: 600;}
.news-list__rt {width: 16%; aspect-ratio: 111/80; overflow: hidden;}
.news-list__rt img {width: 100%; height: 100%; object-fit: cover;}
.news-list__txt strong {display: block; font-size: 30rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.news-list__txt p {padding-top: 14rem; font-size: 20rem; font-weight: 500; color: #999; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.main-footer {margin-top: 150rem; background: url('../images/main/bg-footer.jpg') no-repeat center/cover; width: 100%; height: 1047rem;}
.main-footer .main-tit {padding-top: 190rem;}
.main-footer .main-tit span,
.main-footer .main-tit h2 {color: #fff;}
.main-footer .main-tit a {display: block; width: 180rem; margin: 45rem auto 0; padding: 18rem 0; text-align: center; font-size: 17rem; font-weight: 600; color: #fff; border-top: 1rem solid #fff; border-bottom: 1rem solid #fff; transition: all .3s;}
.main-footer .main-tit a:hover {color: rgba(255,255,255,.2); transition: all .3s;}

@media (max-width:1580px) {
    .product-list ul {gap: 20rem;}

    .colbox-list ul {width: calc(100% - 320rem);}
    .colbox-list ul li p br {display: block;}
}
@media (max-width:1300px) {
    .main-tit span {font-size: 20rem;}
    .main-tit h2 {padding-top: 20rem; font-size: 45rem; line-height: 1.4;}

    .product-list__name strong {font-size: 24rem;}
    .product-list__name span {font-size: 16rem; line-height: 1.3; letter-spacing: -0.3rem;}

    .main-colbox__bg {width: calc(100% - 180rem);}
    .colbox-list ul {width: calc(100% - 180rem);}

    .news-list__lt {gap: 40rem;}
    .news-list__txt strong {font-size: 26rem;}
    .news-list__txt p {padding-top: 10rem; font-size: 18rem;}
    .news-list__date strong {font-size: 55rem;}
    .news-list__date span {font-size: 18rem;}
}
@media (max-width:1024px) {
    .main-visual .visual_control_wrap  {top: 60%;}

    .product-list ul {grid-template-columns: repeat(3, 1fr);}

    .main-colbox__bg {height: 420rem; width: calc(100% - 80rem);}
    .colbox-list ul {width: calc(100% - 80rem);}
    .colbox-list ul li strong {font-size: 30rem;}
    .colbox-list ul li span {font-size: 18rem;}
    .colbox-list ul li a {padding: 30rem;}

    .main-footer {margin-top: 130rem;}
}
@media (max-width:768px) {
    .main-tit h2 {font-size: 40rem;}
    .main-visual__txt h1 {font-size: 50rem; line-height: 1.2;}
    .main-visual .circle-box svg,
    .main-visual .control-box {width: 50rem; height: 50rem;}
    .main-visual .visual_control_wrap  {top: 55%;}

    .main-colbox__bg {width: 100%; height: 320rem;}
    .colbox-list {margin-top: -140rem;}
    .colbox-list ul {grid-template-columns: repeat(1, 1fr); width: 90%; margin: 0 auto;}
    .colbox-list ul li a {display: flex; justify-content: space-between; align-items: flex-end;}

    .main-news {margin-top: 100rem;}
    .news-list__txt strong {font-size: 24rem;}
    .news-list__txt p {font-size: 16rem;}
    .news-list__date strong {font-size: 50rem;}
    .news-list__date span {font-size: 16rem;}

    .main-footer {height: 860rem;}
}
@media (max-width:620px) {
    .main-tit.ct.v2 h2 br {display: block;}

    .product-list ul {grid-template-columns: repeat(2, 1fr);}

    .news-list ul li a {flex-direction: column; align-items: start; gap: 20rem; padding: 45rem 0;}
    .news-list ul li:nth-child(1) a {padding: 0 0 45rem;}
    .news-list__lt {width: 100%;}
    .news-list__rt {width: 100%;}
    .news-list ul li.not_txt {padding: 20rem 0;}

    .main-footer .main-tit {padding-top: 120rem;}
}
@media (max-width:540px) {
    .main-tit h2 {padding-top: 13rem; font-size: 35rem;}
    .main-tit h2 br {display: none;}
    .main-tit span {font-size: 18rem;}
    .main-tit p {padding-top: 15rem; font-size: 18rem;}

    .main-visual__txt h1 {font-size: 40rem;}
    .main-visual__txt p {font-size: 18rem;}

    .main-about {margin-top: 80rem;}

    .main-product {padding: 90rem 0;}
    .product-list {margin-top: 50rem;}
    .product-list ul li a {padding: 30rem 0;}
    .product-list__name strong {font-size: 20rem;}
    .product-list__name span {padding-top: 8rem;}
    .product-list ul li::before {border-top: 9rem solid #e60012; border-right: 9rem solid transparent; border-bottom: 9rem solid transparent; border-left: 9rem solid #e60012;}

    .main-colbox__bg {height: 280rem;}
    .colbox-list ul li strong {padding-top: 45rem; font-size: 28rem;}

    .news-list {margin-top: 40rem;}
    .news-list__txt strong {font-size: 22rem;}
    .news-list__date strong {font-size: 40rem;}
    .news-list__date span {font-size: 14rem;}

    .main-footer {height: 465rem; margin-top: 100rem;}
    .main-footer .main-tit a {width: 160rem; padding: 15rem 0; font-size: 16rem;}
    
}












@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}