@charset "utf-8";
/* Service nav
------------------------------------------------------------------*/
.service-nav {
    background: url(../imgs/bg_tab.jpg) no-repeat center center/cover;
    padding: clamp(40px, 3.2738095238095238095vw, 55px) 0;
}
.service-list {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 92%;
    margin: auto;
}
.service-list .item {
    border: 1px solid #d8664f;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 0.89285714285714285714vw, 15px);
    position: relative;
    min-height: 270px;
    min-width: 270px;
    text-align: center;
    opacity: 0.5;
    transition: all 0.5s ease;
}
.service-list .item:hover {
    cursor: pointer;
    transform: scale(1.02);
}
.service-list .item:nth-child(1) { border-color: #d8664f;}
.service-list .item:nth-child(2) { border-color: #95f8fd;}
.service-list .item:nth-child(3) { border-color: #4165f7;}
.service-list .item.active,
.service-list .item:hover { opacity: 1;}
.service-list .item:nth-child(1).active,
.service-list .item:nth-child(1):hover { background: linear-gradient(to bottom,  rgba(190,97,82,1) 0%,rgba(125,67,89,1) 50%,rgba(107,60,78,1) 100%); border: none; }
.service-list .item:nth-child(2).active,
.service-list .item:nth-child(2):hover { background: linear-gradient(to bottom,  rgba(140,230,239,1) 0%,rgba(110,184,209,1) 50%,rgba(75,129,163,1) 100%); border: none; }
.service-list .item:nth-child(3).active,
.service-list .item:nth-child(3):hover { background: linear-gradient(to bottom,  rgba(63,95,238,1) 0%,rgba(43,66,182,1) 50%,rgba(15,24,91,1) 100%); border: none; }
.service-list .item .en { font-size: clamp(1.1rem, 1.6666666666666666667vw, 2.8rem); line-height: 1.2;}
.service-list .item .jp { font-size: clamp(0.8rem, 0.83333333333333333333vw, 1.4rem);}
.service-list .item .ar {
    border: 1px solid;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(16px, 2.0238095238095238095vw, 34px);
    height: clamp(16px, 2.0238095238095238095vw, 34px);
    position: relative;
}
.service-list .item:nth-child(1) .ar { border-color: #d8664f;}
.service-list .item:nth-child(2) .ar { border-color: #95f8fd;}
.service-list .item:nth-child(3) .ar { border-color: #4165f7;}
.service-list .item:hover .ar {opacity: 1; visibility: visible;}
.service-list .item .ar:after {    
    border-top: 1px solid;
    border-right: 1px solid;
    content: "";
    display: block;
    width: clamp(6px, 0.5952380952380952381vw, 10px);
    height: clamp(6px, 0.5952380952380952381vw, 10px);
    transform: rotate(135deg);
    position: relative;
    right: 0;
    top: calc(clamp(1px, 0.17857142857142857143vw, 3px)*-1);
}
.service-list .item:nth-child(1) .ar:after { border-color: #d8664f;}
.service-list .item:nth-child(2) .ar:after { border-color: #95f8fd;}
.service-list .item:nth-child(3) .ar:after { border-color: #4165f7;}
@media screen and (max-width: 767px) {
    .service-list { gap: 6px;}
    .service-list .item {
        min-width: unset;
        min-height: unset;
        width: calc(100% / 3 - 6px * 2 / 3);
        aspect-ratio: 1 / 1;
    }
    .service-list .item .ar:after {
        height: 5px;
        width: 5px;
        top: -1px;
    }
}
/* Service section
------------------------------------------------------------------*/
.sec-service {
    overflow: hidden;
    padding-bottom: 0!important;
}
.sec-service .headline { margin-bottom: 0;}
.service-block-list .item {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 4.1666666666666666667vw, 70px);
    position: relative;
    padding: clamp(60px, 6.8452380952380952381vw, 115px) 0;
}
.service-block-list .item .img { width: 49%;}
.service-block-list .item .desc {
    flex: 1;
    margin-top: clamp(0px, 0.89285714285714285714vw, 15px);
}
.service-block-list .item.reverse { flex-direction: row-reverse;}
.service-block-list .item.reverse::before {
    content: "";
    background-color: #f3f4f7;
    position: absolute;
    width: 200vw;
    height: 100%;
    left: -50vw;
    top: 0;
}
.service-block-list .item .under {
    font-size: clamp(1.2rem, 0.95238095238095238095vw, 1.6rem);
    line-height: 2.5;
    letter-spacing: 0.05em;
    width: 100%;
}
@media screen and (max-width: 767px) {
    .service-block-list .item .img { width: 100%;}
    .service-block-list .item .under { line-height: 1.8;}
}
/*==================================================================
	Main Content setting
===================================================================*/
.sec-ttl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2.0833333333333333333vw, 35px);
    margin-bottom: clamp(30px, 4.1666666666666666667vw, 70px);
}
.sec-ttl .jp {
    display: block;
    font-size: clamp(1.9rem, 2.0238095238095238095vw, 3.4rem);
}
.sec-ttl .en {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: clamp(1.2rem, 1.07142857vw, 1.8rem);
}
.sec-ttl .en:before,
.sec-ttl .en:after {
    background-color: #FFF;
    content: "";
    display: block;
    height: 1px;
    width: 0;
    transition: width 0.6s linear 1.2s, opacity 0.6s ease-in-out 1.2s;
}
.sec-ttl .en.on:before,
.sec-ttl .en.on:after { width: clamp(90px, 14.52380952380952381vw, 244px);}
.sec-ttl > small { font-size: 100%;}
/* Case section
------------------------------------------------------------------*/
.sec-case {
    background: url(../imgs/case_bg.jpg) no-repeat center center / cover;
    padding: clamp(60px, 12.5vw, 210px) 0 clamp(60px, 16.964285714285714286vw, 285px);
}
.case-list {
    max-width: 865px;
    margin: auto;
}
.case-list .box {
    background: rgba(255,255,255,0.15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: clamp(230px, 19.761904761904761905vw, 332px);
    position: relative;
    text-align: center;
    z-index: 0;
}
.case-list .box .ar {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 3.80952381vw, 64px);
    height: clamp(32px, 3.80952381vw, 64px);
    position: absolute;
    right: 12px;
    bottom: 12px;
    transition: all ease-out 0.3s;
}
.case-list .box .ar:after {    
    border-top: 1px solid #06092b;
    border-right: 1px solid #06092b;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}
.case-list .box:hover .ar { background: #06092b; }
.case-list .box:hover .ar:after { border-color: #FFF; }
.case-list .box .cms1 { font-size: clamp(1.4rem, 1.42857143vw, 2.4rem); line-height: 1.25; }
.case-list .box .cms2 { font-size: clamp(2.25rem, 2.67857143vw, 4.5rem); line-height: 1.25; }
.case-list .cont {
    display: grid;
    gap: clamp(20px, 2.9761904761904761905vw, 50px);
    margin: auto;
    grid-template-columns: 47.5% auto;
}
.case-list .desc {
    flex: 1;
    color: #fff;
}
.case-list .desc .ttl {
    font-size: clamp(1.8rem, 1.6071428571428571429vw, 2.7rem);
    letter-spacing: 0.16em;
    margin: clamp(0px, 0.5952380952380952381vw, 10px) 0 clamp(10px, 2.3809523809523809524vw, 40px);
}
.case-list .desc .txt {
    font-size: clamp(1.2rem, 0.95238095238095238095vw, 1.6rem);
    line-height: 2.5;
    letter-spacing: 0.1em;
}
.case-list .slick-track { display: flex;}
.case-list .slick-list { margin: 0 -20px;}
.case-list .slick-slide {
	height: auto;
    padding: 0 20px;
}
.case-list.slick-slider .slick-arrow {
	border: none;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	font-size: 0;
	height: clamp(40px, 4.7619047619047619048vw, 80px);
    width: clamp(40px, 4.7619047619047619048vw, 80px);
	margin: 0;
	margin: auto;
	cursor: pointer;
	transform: all .3s;
    padding: 0;
}
.case-list.slick-slider .slick-arrow:hover { opacity: .7;}
.case-list.slick-slider .slick-prev {
	background: url(../imgs/slider_prev.svg) no-repeat center center / 30px auto;
    left: calc(clamp(20px,14.285714285714285714vw, 240px)*-1);
}
.case-list.slick-slider .slick-next {
	background: url(../imgs/slider_next.svg) no-repeat center center / 30px auto;
	right: calc(clamp(20px,14.285714285714285714vw, 240px)*-1);
}
@media screen and (max-width: 767px) {
    .case-list { max-width: calc(100% - 60px);}
    .case-list .cont { grid-template-columns: 1fr;}
    .case-list.slick-slider .slick-arrow {
        top: 95px;
        bottom: auto;
    }
    .case-list.slick-slider .slick-prev { left: -35px;}
    .case-list.slick-slider .slick-next { right: -35px;}
}

/* Other section
------------------------------------------------------------------*/
.other-main {
    position: relative;
}
.other-main .ttl {
    color: #fff;
    font-size: clamp(1.9rem, 2.26190476vw, 3.8rem);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
}
.other-main > img {
    height: 100%;
    object-fit: cover;
}
.other-body {
    padding: clamp(30px, 3.57142857vw, 60px) 0;
}
.other-body .txt {
    font-size: clamp(1.4rem, 1.13095238vw, 1.9rem);
    line-height: 2.2;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .other-body .txt {
        line-height: 1.7;
        text-align: left;
    }
}
.pdf-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 55px;
    max-width: 880px;
    margin: 0 auto;
    margin-top: clamp(30px, 3.57142857vw, 60px);
}
.pdf-list li {
    width: calc(50% - 55px / 2);
}
.pdf-list li.full {
    width: 100%;
}
.pdf-list li.full .pdf-link {
    padding: 0 25%;
}
.pdf-list li .pdf-link {
    display: block;    
}
.pdf-list li .pdf-link.bdr { border: 1px solid #000000; }
.pdf-list li .pdf-link,
.pdf-list li > div {
    transition: all 0.3s ease-in-out;
}
.pdf-list li:hover .pdf-link,
.pdf-list li:hover > div {
    opacity: 0.5;
}
.pdf-name {
    display: block;
    font-size: clamp(1.2rem, 1.13095238vw, 1.9rem);
    line-height: 1.5;
    padding: 20px 0;
    text-align: center;
}
.pdf-download-btn {
    border: none;
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 24px;
    width: 80px;
}
@media screen and (max-width: 767px) {
    .pdf-list {
        gap: 15px;
    }
    .pdf-list li {
        width: calc(50% - 15px / 2);
    }
    .pdf-name {
        padding: 12px 0;
        letter-spacing: 0;
        text-align: left;
    }
    .pdf-download-btn {
        width: 65px;
        top: 15px;
    }
}
@media screen and (max-width: 767px) {
    .sec-other {
        padding-top: 80px;/*for anchor neo link*/
    }
}

.process-list {
    margin: 0 auto;
}
.process-item {
	min-height: 88px;
	margin-bottom: 16px;
	padding: 0 26px;
	display: flex;
	align-items: center;
	background: #f3f4f7;
}
.process-item:last-child {
    margin-bottom: 0 !important;
}
.process-number {
	display: flex;
	align-items: center;
	border-right: 1px solid #2b3587;
	color: #1d2f61;
	font-size: clamp(1.4rem, 1.42857143vw, 2.4rem);
	padding: 0 26px 0 0;
	line-height: 1.95;
}
.process-ttl {
    display: block;
    text-align: center;
    flex: 1;
    padding: 0 5px;
    font-size: clamp(1.4rem, 0.95238095238095238095vw, 1.6rem);
}
.process-title {
	flex: 0 0 263px;
	padding: 0;
	display: flex;
	align-items: center;
	border-right: 1px solid #2b3587;
	font-size: clamp(1.2rem, 0.83333333333333333333vw, 1.7rem);
}
.process-content {
    flex: 1;
    margin: 0;
    padding-left: 65px;
    color: #111;
    font-size: clamp(1rem, 0.83333333333333333333vw, 1.4rem);
    line-height: 1.7;
}
.process-content p {
    margin: 0;
}
@media screen and (max-width: 767px) {
    .process-title {
        flex: unset;
        width: 100%;
        border: none;
    }
    .process-item {
        min-height: unset;
        padding: 15px;
        margin-bottom: 5px;
        flex-wrap: wrap;
    }
    .process-ttl {
        flex: unset;
        padding-left: 10px;
    }
    .process-number {
        padding: 0 10px 0 0;
    }
    .process-content {
        padding-left: 0;
        letter-spacing: 0;
        width: 100%;
        margin-top: 5px;
    }
}

/* .aftersale */
.aftersale .after-ttl {
    background: #f3f4f7;
    font-size: clamp(1.5rem,1.428571vw,2.4rem);
    letter-spacing: 0.15em;
    line-height: 2;
    margin: 0 0 30px;
    padding: 20px 30px;
}
.aftersale .after-cont {
    display: grid;
    grid-template-columns: 48% auto;
    gap: 30px clamp(30px,3.9285714vw,65px);
}
.aftersale .txt {
	font-size: clamp(1.4rem, 0.95238095238095238095vw, 1.6rem);
	line-height: 2.5;
	letter-spacing: 0.1em;
}
.aftersale .after-cont .col-left {
    display: flex;
    flex-direction: column;
    gap: clamp(30px,4.46428vw,75px);
}
.aftersale .image-diagram {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.aftersale .tbl-style tr,
.aftersale .tbl-style td,
.aftersale .tbl-style {
    border: 1px solid #000001;
}
.aftersale .tbl-style tr td:first-child,
.aftersale .tbl-style th {
    background: #f3f4f7;
    font-size: clamp(1.4rem,1.011904vw,1.7rem);
    letter-spacing: 0.1em;
    line-height: 1.7;
}
.aftersale .tbl-style th,
.aftersale .tbl-style td {
    padding: 8px 20px;
}
.aftersale .tbl-style tr td {
    font-size: clamp(1.4rem, 0.95238095238095238095vw, 1.6rem);
	line-height: 1.5;
	letter-spacing: 0.1em;
}
.aftersale .tbl-style th {
    font-size: clamp(1.4rem,1.011904vw,1.7rem);
    font-weight: normal;
    letter-spacing: 0.1em;
    line-height: 1.7;
}
.aftersale .tbl-style tr td:first-child {
    width: 23.5%;
    letter-spacing: 0;
}
.aftersale .tbl-style tr td:nth-child(2) {
    padding: 15px 25px;
}
.aftersale .after-cont .col-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}
@media screen and (max-width: 767px) {
    .aftersale .after-ttl {
        letter-spacing: 0.05em;
        padding: 10px 15px;
        line-height: 1.7;
    }
    .aftersale .txt {
        line-height: 1.8;
    }
    .aftersale .after-cont {
        grid-template-columns: auto;
    }
    .aftersale .tbl-style th,
    .aftersale .tbl-style td {
        padding: 8px 10px;
    }
    .aftersale .tbl-style th {
        letter-spacing: -0.01em;
    }
    .aftersale .tbl-style tr td:first-child {
        width: 82px;
        letter-spacing: 0;
        padding: 5px;
    }
    .aftersale .tbl-style tr td:nth-child(2) {
        padding: 10px;
    }
    .aftersale .image-diagram { width: 100%; }
}