@charset "utf-8";
.sub-wrap {margin-top: 10rem;}
.sub-visual {height: 46rem; padding: 0 5%; text-align: center; justify-content: center; align-items: center; color: #fff;}
.sub-visual h2 {font-size: 8rem; font-weight: 700;}
.sub-visual p {font-size: max(18px,2.4rem); margin-top: 1.5rem;}

.list-type1 p {text-indent: -2rem; padding-left: 2rem;}

.table-type1 table {width: 100%; border-top: 1px solid #787878;}
.table-type1 table + table {margin-top: 2rem;}
.table-type1 table th {font-size: max(14px,1.6rem); text-align: right; padding: 1rem; background: #f7f7f7;}
.table-type1 table th.title {text-align: left; vertical-align: middle; font-size: 1.8rem; font-weight: 700;}
.table-type1 table tbody tr {border-bottom: 1px solid #ddd;}
.table-type1 table td {font-size: max(14px,1.6rem); padding:.75rem 1rem; text-align: center;}
.table-type1 table tr td:first-child {font-weight: 500; text-align: left;}

.about .cont {padding-top: 10rem;}
.about .cont1 .inner {align-items: flex-end; justify-content: space-between; margin-bottom: 8rem;}
.about .cont1 h2 {font-size: 8rem; position: relative; }
.about .cont1 h2::before {content: ""; position: absolute; bottom: 2rem; right:-4rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--point);}
.about .cont1 p {font-size: max(15px,2rem); color: #666; line-height: 1.6; margin-bottom: 1rem; } 


.about .cont1 .img img {width: 100%; max-height: 640px; clip-path: polygon(7% 0, 93% 0, 93% 100%, 7% 100%);}


.about .cont2 .inner {position: relative; align-items: flex-start; justify-content: space-between;}
.about .cont2 .inner .left {width: 30%; position: sticky; top:12rem;}
.about .cont2 .inner .left h2 {font-size: 5rem; font-weight: 500; overflow: hidden;}
.about .cont2 .inner .left h2:last-child {font-weight: 700;}
.about .cont2 .inner .left h2 span {transform: translateY(100%); display: inline-block;}
.about .cont2 .inner .right {width: min(920px,68%); overflow: hidden;}
.about .cont2 .inner .right .box:not(:last-child) {margin-bottom: 8rem;}
.about .cont2 .inner .right .box .img {display: flex; border-radius: 1.5rem; overflow: hidden;}
.about .cont2 .inner .right .box .txt h3 {font-size: 2.6rem; font-weight: 600; margin: 3rem 0 2rem;}
.about .cont2 .inner .right .box .txt h3 br {display: none;}
.about .cont2 .inner .right .box .txt h3 span {position: relative;}
.about .cont2 .inner .right .box .txt h3 span::before {content:""; position: absolute; bottom:-5px; left:0; width: 0; height: 2.2rem; background: #F6D6D6; z-index: -1; transition: all 0.5s;}
.about .cont2 .inner .right .box2 .txt h3 span::before {background: #CDF6DC;}
.about .cont2 .inner .right .box3 .txt h3 span::before {background: #C8ECF6;}
.about .cont2 .inner .right .box .txt p {font-size: min(16px,2rem); color: #666;}
.about .cont2 .inner .right .box .txt h3.on span::before { width: 100%;}


.about .cont3_2 {padding-block:0 10rem; margin-top:0; background: #f8f8f8;}
.about .cont3_2 .cont-title {margin-bottom: 6rem;}
.about .cont3_2 .box-wrap {display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem;}
.about .cont3_2 .box-wrap > div {border-radius: 1.5rem; overflow: hidden;}
.about .cont3_2 .box-wrap .txt {justify-content: space-between; padding: 2.5rem; background: #464646; color: #fff;}
.about .cont3_2 .box-wrap .txt h5 {font-size: 2.2rem; font-weight: 500;}
.about .cont3_2 .box-wrap .txt h4 {font-size: 2.6rem; font-weight: 700; margin-bottom: 2rem;}
.about .cont3_2 .box-wrap .txt p {font-size: max(15px,2rem);}
.about .cont3_2 .box-wrap .img {display: flex;}
.about .cont3_2 .box-wrap .img img {width: 100%;}
.about .cont3_2 .box-wrap:last-child {margin-top: 2rem;}
.about .cont3_2 .box-wrap:last-child .txt {background: var(--point);}
.about .cont3_2 .box-wrap:last-child .img {grid-column: 2;} 


.about .cont4 .txt {margin-top: 8rem;}
.about .cont4 .txt h3 {font-size: 4.2rem; font-weight: 700; width: 25rem;}
.about .cont4 .txt p {font-size: max(14px,2rem); color: #666; width: calc(100% - 25rem); line-height: 1.6;}
.about .cont4 .img {margin-top: 5rem; justify-content: space-between;}
.about .cont4 .img img {width: min(721px, 48.5%);}
.about .cont4 .color-box {margin-top: 5rem;}
.about .cont4 .color-box .box {width: calc(100%/3); color: #fff; background: #000; height: 16rem; padding: 2rem 3rem;}
.about .cont4 .color-box .box h4 b {font-size: 2.8rem;}
.about .cont4 .color-box .box h4 {font-size: 2.2rem;}
.about .cont4 .color-box .box2 {background: #7f7f7f;}
.about .cont4 .color-box .box3 {background: #fff; color: #212121; border:1px solid #E1E1E1; }

.about .cont3 .inner {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    position: relative;
}
.about .cont3 .video {
    width: 100%;
    padding-bottom: 52.9%;
    position: absolute;
    padding-top: 0;
    /* margin-block: 10rem; */
    /* border-radius: 1.5rem; */
    /* overflow: hidden; */
    width: 94%;
    top: 45.25%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.about .cont3 .video iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.about .cont3 {padding-bottom: 10rem; margin-top: 10rem; background: #f8f8f8;}

@media (max-width:1500px) {
    .about .cont1 h2 {font-size: 7.4rem;}
    .about .cont1 h2::before {bottom: 2rem; right:-2rem; width: 1.5rem; height: 1.5rem; }
    .about .cont3 .video {
        padding-bottom: 46%;
        width: 85%;
    }
}
@media (max-width:1080px) {
    .about .cont1 p {width: calc(100% - 50rem)} 
    .about .cont1 p br {display: none;}
    .about .cont1 .img {margin-top: 8rem;}
    .about .cont2 .inner .left {position: static; width: 100%; margin-bottom: 4rem;}
    .about .cont2 .inner .right {width: min(100%,100%);}
    .about .cont3_2 .box-wrap {grid-template-columns: repeat(2,1fr);}
    .about .cont3_2 .box-wrap:last-child .img {grid-column: 1;}
    .about .cont4 .txt p br {display: none;}
    .about .cont3 .inner {
        gap: 4rem;
    }
    .about .cont3 .box {
        width: 100%;
    }
    .about .cont3 .box:last-child {
        margin-top: 0;
    }
}
@media (max-width:768px) {
    .about .cont1 p {width: 100%; margin: 2rem 0 0;}
    .about .cont3_2 .box-wrap {grid-template-columns: repeat(1,1fr);}
    .about .cont3_2 .box-wrap .txt {order:2; height: max(250px,60vw);}
    .about .cont3_2 .box-wrap .img {order:1;height: max(250px,60vw);}
    .about .cont4 .txt h3 {width: 100%;}
    .about .cont4 .txt p {width: 100%; margin-top: 3rem;}
    .about .cont4 .img img {width: 100%;}
    .about .cont4 .img img:last-child {margin-top: 2rem;} 
    .about .cont4 .color-box .box {width: 100%;}
}
@media (max-width:500px) {
    .about .cont2 .inner .right .box .txt h3 br {display: block;}
}

.product .sub-visual {background: url(../images/sub/prod_list_bg_v2.jpg) no-repeat center / cover;}
.product .txt .tag h5 {font-size: max(13px,1.8rem); padding: 0.3rem 1.5rem; border-radius: 2rem; border: 1px solid var(--point); color: var(--point); display: inline-block; font-weight: 500;}
.product .txt .tag h5:not(:first-child) {margin-left: 1rem;}

.product-wrap .tab {margin: 12rem 0 8rem; align-items: center; justify-content: center; gap: 0 2rem;}
.product-wrap .tab li {width: min(140px,23%); text-align: center; padding: 1rem; border-radius: 3rem; border: 1px solid #212121; font-size: max(16px,2.2rem); font-weight: 500; cursor: pointer; transition: all 0.2s;}
.product-wrap .tab li.active, .product-wrap .tab li:hover {background: #212121; color: #fff;}
.product-wrap .product-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8rem 6rem;}
.product-wrap .product-item .img {overflow: hidden; display: flex; border-radius: 1.5rem;}
.product-wrap .product-item .img img {transition: all 0.3s;}
.product-wrap .product-item .txt {margin-top: 2rem;}
.product-wrap .product-item .txt h3 {font-size: 2.4rem; font-weight: 600; margin: 1rem 0 0.5rem;}
.product-wrap .product-item .txt p {font-size: max(15px,2rem); color: #666;}
.product-wrap .product-item:hover .img img {transform: scale(1.1);}
.product-wrap .product-item:hover .txt h3 {text-decoration: underline;}

.product-view {margin-top: 18rem;}
.product-view .inner {position: relative; justify-content: space-between; max-width: 1200px; align-items: flex-start;}
.product-view .img {width: 48%; position: sticky; top:10rem;}
.product-view .txt {margin-top: 2rem; width: 48%;}
.product-view .info h3 {font-size: 4.2rem; font-weight: 600; margin: 1rem 0 2rem;}
.product-view .info h4 {font-size: max(16px,2rem); margin: 1.5rem 0 4rem; display: none;}
.product-view .info p {font-size: max(13px,1.8rem); color: #787878;}
.product-view .txt .link-btn {width: 100%; padding: 1.2rem 0; font-size: max(14px,1.8rem); justify-content: center; align-items: center; margin-top: 4rem; background: var(--point); border-radius: 5px; color: #fff; transition: all 0.3s;}
.product-view .txt .link-btn img {margin-left: 2rem; width: 15px; transform: rotate(-45deg);}
.product-view .txt .link-btn:hover {background: #212121;}

.product-view .tab-wrap {margin-top: 4rem;}
.product-view .tab-box {border-bottom: 1px solid #666; color: #666;}
.product-view .tab-box .tab-head {justify-content: space-between; align-items: center; padding: 1.6rem 1rem; cursor: pointer;}
.product-view .tab-box .tab-head h3 {font-size: max(18px,2.2rem); font-weight: 500; text-transform: uppercase; transition: all 0.2s;}
.product-view .tab-box .tab-head img {width: 1rem; filter: invert(36%) sepia(64%) saturate(10%) hue-rotate(3deg) brightness(91%) contrast(80%); transform: rotate(90deg);}
.product-view .tab-box .tab-content {padding: 0 1rem 2rem; display: none;}
.product-view .tab-box .tab-content p {font-size: max(15px,1.6rem); }
.product-view .tab-box.on .tab-head img {transform: rotate(-90deg);}

.product-view .tab-box .list-type1 p {
    text-indent: 0;
    padding-left: 0;
}

.product-view .hasTag {gap: 1rem 2rem; margin-top: 4rem;}
.product-view .hasTag li {font-size: max(13px,1.6rem); color: var(--point); padding: 0.5rem 2rem; border-radius: 3rem; border: 1px solid var(--point);}

@media (max-width:1500px) {
    .product-wrap .product-list {gap: 6rem 4rem;}
}
@media (max-width:1080px) {
    .product-wrap .tab {margin: 10rem 0 6rem;}
    .product-wrap .product-list {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width:768px) {
    .product-wrap .tab {gap: 0; justify-content: space-between;}
    .product-view .img {width: 100%; position: static; top:0;}
    .product-view .txt {margin-top: 6rem; width: 100%;}
}
@media (max-width:500px) {
    .product-wrap .product-list {grid-template-columns: repeat(1, 1fr);}
}

.product-view .product-detail {padding-top:10rem; margin: 10rem auto 0; width: 100%; max-width: 1200px; border-top: 1px solid #666; align-items: center;}