#sec1 {
    padding: 20vw 0 20vw;
    position: relative;
}
#sec1::before {
    content: "";
    background: url(../img/shared/bg2.jpg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
#sec1 .gr-txt {
    margin-top: 10vw;
}
#sec1 .gr-txt h2 {
    font-size: 6.5vw;
    letter-spacing: 0.14em;
    text-align: center;
    color: #1d1c1c;
    border-bottom: 1px solid #1d1c1c;
    padding-bottom: 5vw;
    margin-bottom: 4vw;
}
#sec2 {
    padding: 20vw 0 20vw;
    position: relative;
}
#sec2::before {
    content: "";
    background: url(../img/menu/sec2_line.png) no-repeat center top/250% auto;
    position: absolute;
    top: -30vw;
    right: 0;
    bottom: 0;
    left: 0;
}
#sec2::after {
    content: "";
    background: url(../img/menu/sec2_deco.png) no-repeat left top/100% auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -30%;
    z-index: -1;
}
#sec2 .item1 {
    margin-bottom: 8vw;
}
#sec2 .item1 h2 {
    margin: 0 auto 8vw;
}
#sec2 .item1 h2 .ttl-eng {
    color: #1d1c1c;
}
#sec2 .item1 .js {
    margin-right: -5vw;
}
#sec2 .item2 .photo {
    width: 34%;
    margin-left: -5vw;
}
#sec2 .item2 .photo img {
    width: 100%;
    height: 41vw;
    -o-object-fit: cover;
    object-fit: cover;
}
#sec2 .item2 .content .js {
    margin: -19vw -1vw 10vw 36%;
}
#sec2 .item2 .content .js .slick-dots {
    margin-right: 10px;
}
#sec3 {
    position: relative;
    padding: 20vw 0 20vw;
}
#sec3::before {
    content: "";
    background: url(../img/shared/bg3.jpg);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
#sec3::after {
    content: "";
    background: url(../img/menu/sec3_deco1.png) no-repeat left top/100% auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -20%;
    z-index: -1;
}
#sec3 .set1::before {
    content: "";
    background: url(../img/menu/sec3_line.png) no-repeat center top/300% auto;
    position: absolute;
    top: -28vw;
    right: 0;
    bottom: 0;
    left: 0;
}
#sec3 .set1 h2 {
    position: absolute;
    top: 16vw;
    right: 7%;
    white-space: nowrap;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
#sec3 .set1 h2 .ttl-eng {
    color: #fff;
    margin: 0;
    font-size: 3.3vw;
}
#sec3 .set1 h2 .ttl-jp {
    color: #fff;
}
#sec3 .set1 .photo {
    margin: 0 -5vw;
}
#sec3 .set1 .photo img {
    width: 100%;
    height: 55vw;
    -o-object-fit: cover;
    object-fit: cover;
}
#sec3 .set2 {
    padding: 7vw 0 0;
}
#sec3 .set2 .item1 {
    margin-bottom: 10vw;
}
#sec3 .set2 .item1 .js {
    margin-top: 10vw;
}
#sec3 .set2 .item1 .js .sl-thumb {
    margin-top: 6px;
}
#sec3 .set2 .item1 .js .sl-thumb .slick-track {
    width: auto !important;
    transform: none !important;
    --f-columns: 3;
    --f-gap: 6px;
    display: flex !important;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--f-gap));
    margin-bottom: calc(-1 * var(--f-gap));
}
#sec3 .set2 .item1 .js .sl-thumb .slick-track .slick-slide {
    margin-left: var(--f-gap);
    margin-bottom: var(--f-gap);
    width: calc(100% / var(--f-columns) - var(--f-gap));
    cursor: pointer;
}
#sec3 .set2 .item1 .js .sl-thumb .slick-track .slick-slide.slick-current li::before {
    content: none;
}
#sec3 .set2 .item1 .js .sl-thumb .slick-track .slick-slide li {
    position: relative;
}
#sec3 .set2 .item1 .js .sl-thumb .slick-track .slick-slide li::before {
    content: "";
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
#sec3 .set2 .item2 .btn-popup {
    margin: 10vw 9% 0;
}
#sec4 .set1 {
    position: relative;
}
#sec4 .set1 .title {
    width: 51%;
    padding: 11vw 0;
    position: absolute;
    top: 26vw;
    right: 4%;
    z-index: 2;
    background: url(../img/menu/sec4_ttl_deco.png) no-repeat center top/100% auto;
}
#sec4 .set1 .title h2 {
    margin: 0 auto;
}
#sec4 .set1 .title h2 .ttl-jp {
    color: #fff;
}
#sec4 .set1 .title h2 .ttl-eng {
    color: #fff;
}
#sec4 .set1 .box-parallax {
    height: 77vw;
}
#sec4 .set2 {
    position: relative;
    padding-bottom: 18vw;
}
#sec4 .set2::before {
    content: "";
    background: url(../img/menu/sec4_line_sp.png) no-repeat center top/100% auto;
    position: absolute;
    top: 6vw;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
#sec4 .set2 .item1 {
    margin-bottom: 11vw;
}
#sec4 .set2 .item1 .photo {
    margin: -7vw -5vw 0 auto;
    width: 81%;
}
#sec4 .set2 .item2 .photo {
    margin-left: -5vw;
    width: 61%;
}
#sec4 .set2 .item2 .photo img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: 43vw;
    -o-object-position: 98% 50%;
    object-position: 98% 50%;
}
#sec4 .set2 .item2 .js {
    margin: 7vw 5% 11vw;
}
#sec4 .set2 .item2 .js .slick-dots {
    margin-right: 0;
}
.popup-content .content {
    background: url(../img/shared/bg1.jpg);
    padding: 13vw 5% 11vw;
}
.popup-content .content .gr-img li:not(:last-child) {
    margin-bottom: 4px;
}
.popup-content .content .gr-txt {
    margin-top: 10vw;
}
.popup-content .content .gr-txt h2 {
    font-size: 6vw;
    letter-spacing: 0.14em;
    text-align: center;
    color: #1d1c1c;
    border-bottom: 1px solid #1d1c1c;
    padding-bottom: 5vw;
    margin-bottom: 4vw;
}
.popup-content .content .gr-txt .txt {
    text-align: justify;
}
.popup-content .btn-close {
    margin-top: 20px;
    border: 0;
    background: none;
}
.popup-content .btn-close img {
    width: 70%;
}
@media screen and (min-width: 768px) {
    #header #hd-left .nav .has-submenu .submenu li a {
        color: #888;
    }
    #header #hd-left .nav .has-submenu .submenu li::before,
    #header #hd-left .nav .has-submenu .submenu::before {
        border-color: #888;
    }
    #sec1 {
        padding: 104px 0 84px;
    }
    #sec1::before {
        top: 170px;
    }
    #sec1 .wrap {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    #sec1 .gr-txt {
        margin-top: 140px;
        width: 437px;
    }
    #sec1 .gr-txt h2 {
        font-size: 42px;
        padding-bottom: 34px;
        margin-bottom: 20px;
    }
    #sec2 {
        padding: 123px 0;
    }
    #sec2::before {
        background: url(../img/menu/sec2_line.png) no-repeat;
        width: 2500px;
        height: 515px;
        top: -211px;
        right: auto;
        bottom: auto;
        left: calc(50% - 1250px);
    }
    #sec2::after {
        background: url(../img/menu/sec2_deco.png) no-repeat;
        width: 1821px;
        height: 1493px;
        right: auto;
        bottom: auto;
        left: calc(50% - 1250px);
    }
    #sec2 .wrap {
        max-width: 1300px;
    }
    #sec2 .item1 {
        margin-bottom: 0;
    }
    #sec2 .item1 h2 {
        margin: 0;
        position: absolute;
        top: 100px;
        left: 157px;
    }
    #sec2 .item1 h2 .ttl-eng {
        margin: 14px 0 0;
        left: -2px;
        position: relative;
    }
    #sec2 .item1 .js {
        margin: 0 0 0 354px;
    }
    #sec2 .item1 .js .sl {
        height: 587px;
    }
    #sec2 .item2 .photo {
        width: 243px;
        margin: -174px 0 0 0;
    }
    #sec2 .item2 .photo img {
        height: auto;
    }
    #sec2 .item2 .content {
        display: flex;
        align-items: flex-start;
    }
    #sec2 .item2 .content .js {
        margin: 21px 0 0 101px;
        width: 483px;
    }
    #sec2 .item2 .content .js .slick-dots {
        margin: 8px 0 0;
    }
    #sec2 .item2 .content .gr-txt {
        flex: 1;
        margin: 7px 43px 0 70px;
    }
    #sec2 .item2 .content .gr-txt .btn-popup {
        position: relative;
        left: -9px;
    }
    #sec3 {
        padding: 106px 0 171px;
    }
    #sec3::before {
        right: 49px;
    }
    #sec3::after {
        background: url(../img/menu/sec3_deco1.png) no-repeat;
        width: 971px;
        height: 1428px;
        top: 0;
        right: auto;
        bottom: auto;
        left: calc(50% - 1250px);
    }
    #sec3 .set1::before {
        background: url(../img/menu/sec3_line.png) no-repeat;
        width: 2500px;
        height: 513px;
        top: -173px;
        right: auto;
        bottom: auto;
        left: calc(50% - 1250px);
    }
    #sec3 .set1::after {
        content: "";
        background: url(../img/menu/sec3_deco2.png) no-repeat;
        width: 1435px;
        height: 1802px;
        position: absolute;
        top: 384px;
        right: calc(50% - 1250px);
        z-index: -1;
    }
    #sec3 .set1 h2 {
        top: 142px;
        right: -11px;
        line-height: 40px;
    }
    #sec3 .set1 h2 .ttl-eng {
        font-size: 18px;
    }
    #sec3 .set1 .photo {
        margin: 0 -250px 0 64px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1499px) {
    #sec3 .set1 .photo {
        margin-right: calc(-50vw + 50%);
    }
}
@media screen and (min-width: 768px) {
    #sec3 .set1 .photo img {
        height: 416px;
    }
}
@media screen and (min-width: 768px) {
    #sec3 .set2 {
        padding: 112px 0 0;
    }
    #sec3 .set2 .item1 {
        margin-bottom: 0;
    }
    #sec3 .set2 .item1 .txt {
        position: absolute;
        top: 0;
        right: -60px;
        height: 391px;
    }
    #sec3 .set2 .item1 .js {
        margin: 0 366px 0 -196px;
    }
    #sec3 .set2 .item1 .js .sl-thumb {
        margin-top: 10px;
    }
    #sec3 .set2 .item1 .js .sl-thumb .slick-track {
        --f-columns: 6;
        --f-gap: 10px;
    }
    #sec3 .set2 .item1 .js .sl-thumb .slick-track .slick-slide:hover li::before {
        content: none;
    }
    #sec3 .set2 .item1 .js .sl-thumb .slick-track .slick-slide li img {
        width: 100%;
        height: 110px;
        -o-object-fit: cover;
        object-fit: cover;
    }
    #sec3 .set2 .item2 {
        display: flex;
        align-items: flex-start;
        flex-direction: row-reverse;
    }
    #sec3 .set2 .item2 .photo {
        flex: 1;
        height: 320px;
        margin: -120px -150px 0 359px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1299px) {
    #sec3 .set2 .item2 .photo {
        margin-right: calc(-50vw + 50%);
    }
}
@media screen and (min-width: 768px) {
    #sec3 .set2 .item2 .btn-popup {
        margin: 126px 0 0 58px;
    }
    #sec3 .set2 .item2 .btn-popup a::after {
        right: 22px;
    }
}
@media screen and (min-width: 768px) {
    #sec4 .set1 .title {
        width: 430px;
        padding: 146px 0 0;
        top: 143px;
        right: calc(50% - 571px);
        height: 430px;
    }
    #sec4 .set1 .title h2 {
        margin: 0 auto;
    }
    #sec4 .set1 .title h2 .ttl-jp {
        color: #fff;
    }
    #sec4 .set1 .title h2 .ttl-eng {
        color: #fff;
    }
    #sec4 .set1 .box-parallax {
        height: 573px;
    }
    #sec4 .set2 {
        padding-bottom: 98px;
    }
    #sec4 .set2::before {
        background: url(../img/menu/sec4_line.png) no-repeat;
        width: 2500px;
        height: 1353px;
        top: 227px;
        right: auto;
        bottom: auto;
        left: calc(50% - 1250px);
    }
    #sec4 .set2 .item1 {
        margin-bottom: 59px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    #sec4 .set2 .item1 .txt {
        width: 397px;
        margin: 105px 0 0 -22px;
    }
    #sec4 .set2 .item1 .photo {
        margin: -50px -101px 0 0;
        width: auto;
    }
    #sec4 .set2 .item2 {
        display: flex;
        align-items: flex-start;
    }
    #sec4 .set2 .item2 .photo {
        margin-left: -98px;
        width: auto;
        flex: 1;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    #sec4 .set2 .item2 .photo {
        margin-left: calc(-50vw + 50%);
    }
}
@media screen and (min-width: 768px) {
    #sec4 .set2 .item2 .photo img {
        height: 100%;
        -o-object-position: center;
        object-position: center;
    }
}
@media screen and (min-width: 768px) {
    #sec4 .set2 .item2 .js {
        margin: 200px -20px 0 69px;
        width: 606px;
    }
    #sec4 .set2 .item2 .js .slick-dots {
        margin-right: 0;
    }
}
@media screen and (min-width: 768px) {
    .popup-content {
        max-width: 1228px;
    }
    .popup-content .content {
        background: url(../img/shared/bg1.jpg);
        padding: 72px 117px 80px 64px;
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
    }
    .popup-content .content .gr-txt {
        margin-top: 66px;
        padding-top: 16px;
        border-top: 1px solid #1d1c1c;
        flex: 1;
    }
    .popup-content .content .gr-txt h2 {
        font-size: 32px;
        text-align: left;
        border-bottom: 0;
        padding-bottom: 0;
        margin: 0 0 0 auto;
    }
    .popup-content .content .gr-txt .txt {
        text-align: justify;
        margin: 45px -4px 0 42px;
    }
    .popup-content .btn-close {
        margin-top: 30px;
    }
    .popup-content .btn-close img {
        width: auto;
    }
    .popup-content .btn-close:hover {
        opacity: 0.7;
    }
}
@media screen and (max-width: 1450px) and (min-width: 768px) {
    #sec3 .set2 .item1 .js {
        margin-left: calc(-50vw + 50% + 20px);
    }
}
@media screen and (max-width: 1350px) and (min-width: 768px) {
    #sec2 .item1 .js {
        margin: 0 30px 0 324px;
    }
}
@media screen and (max-width: 1199px) and (min-width: 768px) {
    #sec3 .set2 .item1 .txt {
        right: calc(-50vw + 50% + 30px);
    }
}