@charset "utf-8";
/* lenis */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-scrolling  iframe { pointer-events: none; }
.lenis.lenis-stopped { overflow: hidden; }

/* service index */
.sec-service {
    width: 100%;
    padding: clamp(60px, 7.14285714vw, 120px) 0;
}
.sec-service .heading {
    margin-bottom: clamp(50px, 5.95238095vw, 120px);
    padding: 0 15px;
    text-align: center;
}
.sec-service .ttl {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.38095238vw, 40px);
    font-size: clamp(20px, 1.78571429vw, 30px);
    letter-spacing: 0.1em;
}
.sec-service .ttl > small { font-size: clamp(16px, 1.19047619vw, 20px);}
.sec-service .ttl > img {
    height: clamp(20px, 2.67857143vw, 45px);
    width: auto;
}
.sec-service .txt {
    font-size: clamp(14px, 0.952380952vw, 16px);
    letter-spacing: clamp(0.05em, 0.5em, 0.1em);
}
.sec-service .list { display: flex; gap: 18px;}
.sec-service .list .item { width: calc(100% / 3 - 36px / 3); }
.sec-service .list .item-link {
    display: block;
    overflow: hidden;
    position: relative;
    transition: opacity ease-in-out 0.3s;
}
.sec-service .list .item-link > img { transition: transform 0.8s ease-in-out; transform: scale(1);}
.sec-service .list .item-link:hover > img { opacity: 0.7; transform: scale(1.05);}
.sec-service .list .item-link .square {
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: 1;
}
.sec-service .list .item-link .copy {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
    z-index: 1;
}
.sec-service .list .item-link:hover .copy {
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out 0.3s;
}
.sec-service .list .item-link .copy .en {
    font-size: clamp(1.2rem, 0.892857143vw, 1.5rem);
    letter-spacing: 0.1em;
    margin-bottom: 18px;
}
.sec-service .list .item-link .copy .jp {
    font-size: clamp(1.4rem, 1.42857143vw, 2.4rem);
    letter-spacing: 0.1em;
}
.sec-service .list .item-link .hidden {
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 2.2;
    padding: 15px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out 0.3s;
}
.sec-service .list .item-link:hover .hidden {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sec-service .list .item-link .hidden .txt-hide {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all ease-in-out 0.6s;
}
.sec-service .list .item-link:hover .hidden .txt-hide {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media screen and (max-width: 767px){
    .sec-service .list { flex-direction: column; gap: 1px; }
    .sec-service .list .item { width: 100%; }
}

/* service lowser */
.sec-service .leadtext {
    letter-spacing: 0.2em;
    font-size: clamp(1.6rem, 1.42857143vw, 2.4rem);
    text-align: center;
}
.sec-service .leadtext .sm-text {
    letter-spacing: 0.1em;
    font-size: clamp(1.2rem, 0.892857143vw, 1.5rem);
    text-align: center;
}
.sec-service .list-points {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: clamp(30px, 3.57142857vw, 60px);
    margin: clamp(50px, 6vw, 100px) 0 0;
}
.sec-service .list-points .item { display: flex; flex-direction: column;}
.sec-service .list-points .item:nth-child(1) { animation-delay: 0.15s;}
.sec-service .list-points .item:nth-child(2) { animation-delay: 0.45s;}
.sec-service .list-points .item:nth-child(3) { animation-delay: 0.75s;}
.sec-service .list-points .ord {
    width: auto;
    height: clamp(20px, 1.78571429vw, 30px);
    margin-bottom: clamp(20px, 2.38095238vw, 40px);
}
.sec-service .list-points .icon {
    width: auto;
    height: clamp(50px, 4.46428571vw, 75px);
    margin-bottom: clamp(30px, 3.57142857vw, 60px);
}
.sec-service .list-points .name {
    font-size: clamp(1.6rem, 1.07142857vw, 1.8rem);
    letter-spacing: 0.1em;
    margin-bottom: clamp(10px, 1.19047619vw, 20px);
}
.sec-service .list-points .desc {
    font-size: clamp(1.2rem, 0.833333333vw, 1.4rem);
    letter-spacing: 0.1em;
    line-height: 2;
}
@media screen and (max-width: 767px){
    .sec-service .list-points { display: block; }
    .sec-service .list-points .item + .item { margin-top: 50px; }
}

.sec-case { margin-bottom: clamp(40px, 10vw, 160px); }
.sec-case .case-mv { display: flex; margin-bottom: 60px; }
.sec-case .case-mv > img { min-width: 50%; }
.sec-case .case-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sec-case .case-heading, .sec-case .case-content { width: calc(50% - 15px); }
.sec-case .case-heading .case-ttl {
    border-bottom: 1px solid #c3c0ae;
    max-width: 170px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    position: relative;
}
.sec-case .case-heading .case-ttl img { height: clamp(30px, 2.38095238vw, 40px); width: auto; }
.sec-case .case-heading .case-info { display: flex; gap: 1rem; }
.sec-case .case-content p + p { margin-top: clamp(15px, 1.78571429vw, 30px); }

@media screen and (max-width: 767px){
    .sec-case .case-mv { display: block; margin-bottom: -50px; }
    .sec-case .case-heading, .sec-case .case-content { width: 100%; }
    .sec-case .case-heading { margin-bottom: 30px; }
    .sec-case .case-heading .case-ttl { background-color: rgba(255, 255, 255, 0.7); padding: 10px; }
}

/* .sec-vrdigital */
.c-pink { color: #a8a286; }
.sec-vrdigital {
    padding-top: clamp(60px,12.5vw,210px);
}
.sec-vrdigital .vr-item {
    display: grid;
    grid-template-columns: auto 20%;
    gap: 15px 60px;
	margin-bottom: clamp(60px,8.928571vw,150px);
}
.sec-vrdigital .vr-item:last-child { margin-bottom: 0; }
.sec-vrdigital .case-container {
    display: block;
}
.sec-vrdigital .case-heading, .sec-vrdigital .case-content {
	width: 100%;
}
.sec-vrdigital .case-heading {
	margin: 0 0 clamp(20px,4.1666666vw,70px);
}
.sec-vrdigital .case-mv { margin: 0; }
.sec-vrdigital .img {
    width: calc(100% + (100vw - 1200px)/2);
    margin-left: calc(-1*(100vw - 1200px)/2);
}
@media screen and (max-width: 1300px) {
    .sec-vrdigital .img {
        width: calc(100% + 4vw);
        margin-left: calc(-1*4vw);
    }
}
@media screen and (max-width: 767px) {
    .sec-vrdigital { padding-top: 0; }
    .sec-vrdigital .vr-item {
        grid-template-columns: auto;
    }
    .sec-vrdigital .case-container {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 0;
    }
    .sec-vrdigital .img {
        width: calc(100% + 8vw);
    }
    .sec-vrdigital .case-heading .case-ttl { margin-bottom: 15px; }
}

.bg-vrdigital {
    background: #f4f4f4;
    color: #3e3a39;
}
.sec-service .vrdigital-list {    
    display: flex;
    justify-content: center;
    gap: 50px 30px;
    text-align: center;
}
.sec-service .vrdigital-list .it-ttl {
    font-size: clamp(2.6rem, 1.666666vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: 0.1em;
    margin: 0 0 clamp(20px,2.380952vw,40px);
}
.sec-service .vrdigital-list .it-txt {
    font-size: clamp(1.2rem, 0.833333vw, 1.4rem);
    line-height: 2.1;
    letter-spacing: 0.07em;
}
@media screen and (max-width: 767px) {
    .sec-service .vrdigital-list {
        flex-direction: column;
    }
}

.benefit-box {
    background-color: #f4f4f4;
    padding: clamp(45px, 7.7380952380952380952vw, 130px) 15px;
    position: relative;
    margin: clamp(60px, 10.119047619047619048vw, 170px) 0 clamp(60px, 7.1428571428571428571vw, 120px);
}
.benefit-box::after {
    content: "";
    position: absolute;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-top: 46px solid #f4f4f4;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
}
.benefit-ttl {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 30px;
    row-gap: 0;
    margin-bottom: clamp(25px, 5.952380952380952381vw, 100px);
}
.benefit-ttl .icon {
    text-align: center;
    margin-top: 5px;
}
.benefit-ttl .icon img {
    height: clamp(35px, 3.2142857142857142857vw, 54px);
}
.benefit-ttl .topic {
    border-left: 1px solid #c3c0ae;
    border-bottom: 1px solid #c3c0ae;
    font-size: clamp(1.2rem, 1.1904761904761904762vw, 2rem);
    letter-spacing: 0.05em;
    padding: 10px 10px clamp(10px, 0.89285714285714285714vw, 15px) clamp(10px, 1.7857142857142857143vw, 30px);
    position: relative;
}
.benefit-ttl .topic::before {
    content: "";
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 14px solid #c3c0ae;
    bottom: -14px;
    left: 48px;
}
.benefit-ttl .topic::after {
    content: "";
    position: absolute;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 14px solid #f4f4f4;
    bottom: -13px;
    left: 49px;
}
.benefit-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    row-gap: 25px;
    justify-content: space-between;
    max-width: 945px;
    margin: auto;

}
.benefit-list li {
    text-align: center;
}
.benefit-list .name {
    margin-bottom: 35px;
}
.benefit-list .name img { height: clamp(23px, 1.6071428571428571429vw, 27px);}
.benefit-list .desc {
    font-size: clamp(1rem, 0.83333333333333333333vw,1.4rem);
    letter-spacing: 0.1em;
    line-height: 2;
}
@media screen and (max-width: 767px) {
    .benefit-box {
        width: 95%;
        margin: 60px auto 60px;
    }
    .benefit-box::after {
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-top: 20px solid #f4f4f4;
        bottom: -20px;
    }
    .benefit-ttl {
        grid-template-columns: 1fr;
    }
    .benefit-ttl .icon {
        margin-top: 0;
    }
    .benefit-ttl .topic {
        letter-spacing: 0;
    }
    .benefit-ttl .topic::before {
        position: absolute;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 10px solid #c3c0ae;
        bottom: -11px;
        left: 29px;
    }
    .benefit-ttl .topic::after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid #f4f4f4;
        bottom: -10px;
        left: 30px;
    }
    
    .benefit-list {
        grid-template-columns: 1fr;
    }
    .benefit-list li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 15px;
        text-align: left;
    }
    .benefit-list .name { 
        margin-bottom: 0;
    }
    .benefit-list .desc {
        letter-spacing: 0;
        line-height: 1.6;
        margin-top: -3px;
    }
    
}
/* progress */
.progress {
  display: block;
  width: 100%;
  height: 1px;
  border-radius: 10px;
  background-color: rgba(195, 192, 174, .5);
  top: clamp(35px, 3.2738095238095238095vw, 55px);
  position: absolute;
}
.sr-only {
    position: absolute;
    width: 0;
    height: 3px;
    padding: 0;
    overflow: hidden;
    left: 0;
    right: 0;
    top: -1px;
    background: linear-gradient(to right, #c3c0ae, #c3c0ae);
    font-size: 0;
    transition: all .5s ease-in-out;
}
.flow-block .heading { margin-bottom: clamp(50px, 5.0595238095238095238vw, 85px);}
.flow-block .heading .txt { margin-bottom: clamp(20px, 2.0833333333333333333vw, 35px);}
.flow-block .heading .ttl img { height: clamp(23px, 1.7857142857142857143vw, 30px);}
.flow-nav {
    position: relative;
    margin-bottom: clamp(16px, 13.095238095238095238vw, 220px);
}
.flow-nav .flow-ttl {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    color: #686449;
    align-items: center;
    margin-bottom: clamp(15px, 3.2738095238095238095vw, 55px);
}
.flow-nav .flow-ttl .num img { height: clamp(25px, 1.7857142857142857143vw, 30px);}
.flow-nav .flow-box {
    background-color: rgba(195, 192, 174, .3);
    color: #3e3a39;
    padding: clamp(25px, 2.3809523809523809524vw, 40px) 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .2s;
    height: 100%;
}
.flow-nav .is-active .flow-box {
    background-color: #c3c0ae;
    color: #ffffff;
}
.flow-nav .flow-box .desc {
    font-size: clamp(1.3rem, 0.83333333333333333333vw, 1.4rem);
    letter-spacing: 0.04em;
    line-height: 1.7;
    text-align: center;
}
.flow-nav .step-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.flow-nav .step-slider .item {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.flow-info {
    background-color: #353535;
    color: #fff;
    padding: clamp(60px, 8.0357142857142857143vw, 135px) 0 clamp(60px, 6.8452380952380952381vw, 115px);
}
.flow-info .case-slider {
    max-width: 1450px;
    width: 92%;
    margin: auto;
}
.flow-info .case-slider .cont {
    display: flex;
    flex-wrap: nowrap;
}
.flow-info .case-slider .cont .img {
    width: 58.5%;
    margin-right: clamp(20px, 3.2738095238095238095vw, 55px);
}
.flow-info .case-slider .cont .desc { width: 41.5%;}
.flow-info .case-heading { margin-bottom: 50px;}
.flow-info .case-heading .case-ttl {
    border-bottom: 1px solid #c3c0ae;
    max-width: 170px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    position: relative;
}
.flow-info .case-heading .case-ttl img { height: clamp(30px, 2.38095238vw, 40px); width: auto; }
.flow-info .case-heading .case-info { display: flex; gap: 1rem; }
.flow-info .case-content p {
    font-size: clamp(1rem, 0.83333333333333333333vw, 1.4rem); 
    line-height: 2;
}
.flow-info .case-content p + p { margin-top: clamp(15px, 1.78571429vw, 30px); }
.flow-info .slick-arrow {
    background-color: transparent;
    border: none;
    color: #fff;
    position: absolute;
    top: 0;
    height: 32px;
    z-index: 1;
    cursor: pointer;
    font-size: clamp(1.2rem, 0.89285714285714285714vw, 1.5rem);
    letter-spacing: 0.1em;
}
.flow-info .slick-arrow .square {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.flow-info .slick-arrow.slick-prev {
    right: clamp(85px, 8.3333333333333333333vw, 140px);
    padding-left: clamp(35px, 2.9761904761904761905vw, 50px);
}
.flow-info .slick-arrow.slick-prev .square {
    left: 0;
    transform: rotate(270deg);
}
.flow-info .slick-arrow.slick-next {
    right: 0;
    padding-right: clamp(35px, 2.9761904761904761905vw, 50px);
}
.flow-info .slick-arrow.slick-next .square {
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.flow-info .slick-arrow.slick-disabled {
    opacity: 0;
    visibility: hidden;
}
.flow-info .slick-arrow:hover .square img {
    top: -3px;
    right: -3px;
}
@media screen and (max-width: 767px){
    .progress {
        width: 1px;
        height: 100%;
        left: 0;
        top: 0;
    }
    .sr-only {
        width: 3px;
        left: -1px;
        top: 0;
        height: 100%;
    }
    .flow-nav { padding-left: 20px;}
    .flow-nav .step-slider {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .flow-nav .flow-box { min-height: 138px;}
    .flow-info .case-mv { display: block; margin-bottom: -50px; }
    .flow-info .case-heading, .flow-info .case-content { width: 100%; }
    .flow-info .case-heading { margin-bottom: 20px; }
    .flow-info .case-heading .case-ttl { padding: 10px; }
    .flow-info .case-slider .cont {
        flex-wrap: wrap;
    }
    .flow-info .case-slider .cont .img {
        order: 1;
        width: 100%;
        margin-right: 0;
    }
    .flow-info .case-slider .cont .desc {
        width: 100%;
        margin-bottom: 20px;
    }
}