@keyframes scrollLine {
    0% {
        transform: scale(1, 0);
        transform-origin: 0 0
    }

    50% {
        transform: scale(1, 1);
        transform-origin: 0 0
    }

    51% {
        transform: scale(1, 1);
        transform-origin: 0 100%
    }

    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%
    }
}

@media screen and (min-width: 768px) {
    #header {
        height: 110px
    }

    #header .group .col-r {
        margin-top: 17px
    }

    #header .group .col-r .top .nav-list {
        margin: 0 35px 0 auto
    }

    #header .group .col-r .top .nav-list li a {
        color: #4c4c4c
    }

    #header .group .col-r .top .contact {
        position: unset
    }

    #header .group .col-r .bot {
        margin: 10px 4px 0 auto
    }

    #header .group .col-r .bot .nav-list {
        gap: 48px
    }

    #header .group .col-r .bot .nav-list li a {
        color: #4c4c4c;
        font-size: 15px
    }
}

@media screen and (min-width: 768px)and (max-width: 1320px) {
    #header .group .col-r .top .nav-list {
        margin-right: 12px;
        gap: 12px
    }

    #header .group .col-r .top .nav-list li a {
        font-size: 10px
    }
    #header .logo-white .logo-container .logo-svg,#header .logo-black .logo-container .logo-svg {
        width: 160px;
        height: auto;
    }
    #header .group .col-l {
        margin-top: 20px
    }    
}

#keyvisual {
    background: url("../img/index/kv_bg_sp.jpg") no-repeat center bottom/cover;
    color: #f5f5f5;
    padding: 18.5vw 0 84vw
}

#keyvisual .row .slider-kv {
    width: 56%;
    margin: 0 auto
}

#keyvisual .row .logo {
    width: 34.5%;
    margin: 12vw auto 0
}

#keyvisual .row .logo a {
    display: block
}

#keyvisual .row .logo a img {
    display: block
}

#keyvisual .row .scroll {
    position: relative;
    color: #bfbfbf;
    margin: 11vw auto 0;
    padding-left: 27px;
    height: 72px;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .1em
}

#keyvisual .row .scroll::before {
    content: "";
    position: absolute;
    background: #d16155;
    top: 0;
    left: 18px;
    width: 2px;
    height: 100%;
    animation: scrollLine 2s infinite;
    z-index: 2
}

#keyvisual .row .scroll:after {
    content: "";
    position: absolute;
    background: #bfbfbf;
    top: 0;
    left: 18px;
    width: 2px;
    height: 100%;
    z-index: 1
}

#keyvisual .row h2 {
    word-break: keep-all;
    margin: 24.5vw auto 0;
    font-size: 7vw;
    font-weight: bold;
    line-height: 2.73;
    letter-spacing: .14em
}

#keyvisual #concept {
    text-align: center;
    padding-top: 22.5vw
}

#keyvisual #concept h3 {
    font-size: 4.8vw;
    font-weight: bold;
    line-height: 2;
    letter-spacing: .1em
}

#keyvisual #concept .txt {
    margin-top: 9vw
}

#keyvisual #concept .txt li+li {
    margin-top: 7.5vw
}

@media screen and (min-width: 768px) {
    #keyvisual {
        background-image: url("../img/index/kv_bg_pc.jpg");
        padding: 255px 0 624px
    }

    #keyvisual .row {
        position: relative;
        display: flex;
        justify-content: space-between;
        max-width: 1050px;
        margin: 0 auto
    }

    #keyvisual .row .slider-kv {
        order: 2;
        width: 421px;
        margin: 0
    }

    #keyvisual .row .logo {
        order: 3;
        width: 147px;
        margin: 29px 16px 0 0
    }

    #keyvisual .row .scroll {
        position: absolute;
        bottom: -169px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        padding-left: 32px;
        height: 82px;
        font-size: 12px
    }

    #keyvisual .row .scroll::before {
        left: 21px
    }

    #keyvisual .row .scroll:after {
        left: 21px
    }

    #keyvisual .row h2 {
        order: 1;
        word-break: keep-all;
        margin: 111px 0 0;
        font-size: 30px;
        line-height: 82px
    }

    #keyvisual #concept {
        padding-top: 300px
    }

    #keyvisual #concept h3 {
        font-size: 30px;
        line-height: 66px
    }

    #keyvisual #concept .txt {
        margin-top: 57px
    }

    #keyvisual #concept .txt li+li {
        margin-top: 30px
    }
}

#rss {
    padding: 15vw 0 19vw
}

#rss h2 {
    font-size: 6.07vw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .1em
}

#rss #feed {
    margin: 7vw -6% 6vw 0
}

#rss #feed .slick-slide {
    width: 51.5vw;
    margin: 0 3.5vw
}

#rss #feed .item .rss-img {
    width: 100%;
    height: 33vw
}

#rss #feed .item .rss-img span {
    width: 100% !important;
    height: 100% !important
}

#rss #feed .item .desc dt {
    min-height: 52px;
    margin: 7px 12px 0
}

#rss #feed .item .desc dd {
    text-align: right;
    color: #404040;
    margin: 7px 11px 0 0;
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: .04em
}

@media screen and (min-width: 768px) {
    #rss {
        padding: 179px 0 126px
    }

    #rss .wrap {
        max-width: 857px
    }

    #rss .row {
        display: flex;
        justify-content: space-between;
        max-width: 800px
    }

    #rss h2 {
        font-size: 26px
    }

    #rss #feed {
        display: flex;
        justify-content: space-between;
        flex: 1;
        max-width: 748px;
        margin: 19px 0 0
    }

    #rss #feed .item {
        width: 220px
    }

    #rss #feed .item .rss-img {
        height: 142px
    }

    #rss #feed .item .desc dt {
        margin: 8px 14px 0;
        min-height: 60px
    }

    #rss #feed .item .desc dt a:hover {
        text-decoration: underline
    }

    #rss #feed .item .desc dd {
        margin: 7px 12px 0 0;
        font-size: 11px
    }

    #rss .btn-shared-1 {
        margin: 32px 58px 0 auto
    }
}

#about {
    position: relative;
    z-index: 1;
    background: #f5f5f5;
    padding: 19vw 0 20vw
}

#about .deco {
    position: absolute;
    top: 23.5vw;
    right: 0;
    width: 74.5%;
    z-index: -1
}

#about h2 {
    margin: 0 auto 22vw;
    line-height: 1.72;
    font-weight: bold;
    letter-spacing: .2em
}

#about h3 {
    margin-top: 8vw;
    font-weight: bold;
    line-height: 1.67;
    letter-spacing: .1em
}

#about .txt {
    margin: 5.5vw 0 11vw;
    font-size: 16px
}

@media screen and (min-width: 768px) {
    #about {
        padding: 204px 0 121px
    }

    #about .deco {
        top: 630px;
        width: auto
    }

    #about h2 {
        position: absolute;
        top: -53px;
        right: 106px;
        margin: 0;
        line-height: 1
    }

    #about .group {
        width: 728px
    }

    #about h3 {
        margin-top: 35px;
        line-height: 40px
    }

    #about .txt {
        margin: 22px 0 0
    }

    #about .btn-shared-2 {
        margin: 45px 0 0 auto
    }
}

.section-shared {
    position: relative;
    z-index: 1;
    padding: 19vw 0 21vw
}

.section-shared h2 {
    margin: 0 auto 12vw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .2em
}

.section-shared .group {
    margin-top: 4vw
}

.section-shared h3 {
    font-weight: bold;
    line-height: 2;
    letter-spacing: .1em
}

.section-shared .txt {
    margin-top: 5.5vw;
    font-size: 16px
}

@media screen and (min-width: 768px) {
    .section-shared {
        padding: 199px 0 117px
    }

    .section-shared h2 {
        position: absolute;
        top: -52px;
        left: -3px;
        margin: 0
    }

    .section-shared .photo1 {
        margin: 0 calc(-50vw + 50%) 0 170px;
        height: 630px
    }

    .section-shared .group {
        width: 480px;
        margin: 44px 0 0 173px
    }

    .section-shared h3 {
        line-height: 48px
    }

    .section-shared .txt {
        margin: 23px 0 0
    }

    .section-shared .btn-shared-2 {
        margin: 37px 0 0 auto
    }

    .section-shared .photo2 {
        position: absolute;
        top: 686px;
        right: -180px
    }
}

@media screen and (min-width: 768px)and (max-width: 1420px) {
    .section-shared .photo2 {
        right: calc(-50vw + 50% + 30px) !important;
        left: 698px
    }

    .section-shared .photo2 img {
        width: 100%
    }
}

@media screen and (min-width: 768px)and (max-width: 1200px) {
    .section-shared .photo2 {
        left: 698px
    }

    .section-shared .photo2 img {
        width: 100%
    }
}

#sogihoyo .deco {
    position: absolute;
    top: 27.5vw;
    left: -7.5%;
    width: 52%;
    z-index: -1
}

@media screen and (max-width: 767px) {
    #sogihoyo .photo2 {
        margin: 9vw 14% 6.5vw
    }
}

@media screen and (min-width: 768px) {
    #sogihoyo .deco {
        top: 795px;
        left: 28px;
        width: auto
    }
}

#eitaikuyo {
    background: #f5f5f5
}

#eitaikuyo .deco {
    position: absolute;
    top: 38vw;
    right: -7.5%;
    width: 55.5%;
    z-index: -1
}

@media screen and (max-width: 767px) {
    #eitaikuyo .photo2 {
        margin: 12.5vw 10% 8vw 21.5%
    }
}

@media screen and (min-width: 768px) {
    #eitaikuyo {
        padding-bottom: 247px
    }

    #eitaikuyo .photo2 {
        right: -200px
    }

    #eitaikuyo .deco {
        top: auto;
        bottom: 35px;
        right: auto;
        left: 0;
        width: auto
    }
}

#other {
    padding: 20vw 0 27vw
}

#other .row1 {
    margin: 0 3%
}

#other .row1 .box .btn-shared-1 {
    width: auto;
    margin-top: 6vw
}

#other .row1 .box .btn-shared-1 a {
    padding: 0 0 14px 7px
}

#other .row1 .box .btn-shared-1 a span {
    color: #4c4c4c;
    font-size: 22.75px;
    font-weight: bold;
    letter-spacing: .1em
}

#other .row1 .box .btn-shared-1 a span::before {
    right: 19px
}

#other .row1 .box .txt {
    margin-top: 6vw
}

#other .row1 .box+.box {
    margin-top: 12vw
}

#other .row2 {
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
    margin-top: 12.5vw;
    padding: 7vw 0
}

#other .row2 .photo {
    margin: 0 15.5%
}

#other .row2 .group-txt {
    margin-top: 3vw
}

#other .row2 .group-txt h3 {
    font-weight: bold;
    line-height: 1.67;
    letter-spacing: .1em
}

#other .row2 .group-txt .btn-shared-1 {
    margin-top: 4vw
}

@media screen and (min-width: 768px) {
    #other {
        padding: 151px 30px 220px
    }

    #other .wrap {
        max-width: 1200px
    }

    #other .row1 {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        margin: 0
    }

    #other .row1 .box {
        max-width: 362px;
        width: 100%
    }

    #other .row1 .box .btn-shared-1 {
        margin-top: 25px
    }

    #other .row1 .box .btn-shared-1 a {
        padding: 0 0 17px 10px
    }

    #other .row1 .box .btn-shared-1 a span {
        font-size: 26px
    }

    #other .row1 .box .btn-shared-1 a span::before {
        right: 21px
    }

    #other .row1 .box .btn-shared-1 a:hover span::before {
        right: 10px
    }

    #other .row1 .box .txt {
        margin-top: 26px
    }

    #other .row1 .box+.box {
        margin-top: 0
    }

    #other .row2 {
        display: flex;
        justify-content: space-between;
        max-width: 695px;
        margin: 107px auto 0;
        padding: 39px 0
    }

    #other .row2 .photo {
        margin: 0
    }

    #other .row2 .group-txt {
        width: 327px;
        margin-top: -13px
    }

    #other .row2 .group-txt h3 {
        line-height: 40px
    }

    #other .row2 .group-txt .btn-shared-1 {
        margin: 37px 0 0 auto
    }
}

#photo {
    position: relative
}

#photo::before {
    content: "";
    position: absolute;
    background: #f5f5f5;
    height: 50%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

#photo .item {
    width: 76.5vw;
    margin: 0 4.5vw
}

@media screen and (min-width: 768px) {
    #photo .item {
        width: auto;
        margin: 0 25px
    }
}

#access {
    background: #f5f5f5;
    padding-top: 25vw
}

#access h2 {
    text-align: center;
    line-height: 1;
    font-weight: bold;
    letter-spacing: .2em
}

#access .group {
    margin-top: 7vw
}

#access .group .map {
    height: 112vw
}

#access .group .row1 {
    margin-top: 1.5vw
}

#access .group .row1 .btn-map {
    width: -moz-fit-content;
    width: fit-content;
    margin: 2.5vw 0 0 auto
}

#access .group .row1 .btn-map a {
    display: block;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
    border-bottom: 2px solid #d16155;
    color: #d16155;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: .075em
}

#access .group .row1 .btn-map a img {
    width: 9px;
    margin: -3px 0 0 5px
}

#access .group .row2 {
    margin-top: 10.5vw
}

#access .group .row2 dl dt {
    border-bottom: 2px solid gray;
    padding-bottom: 4px;
    margin-bottom: 5px;
    font-size: 15.75px;
    font-weight: bold
}

#access .group .row2 dl+dl {
    margin-top: 7vw
}
#access .group .row2 span {
    color: #d16155
}
#access img {
    width: 100%;
}

@media screen and (min-width: 768px) {
    #access {
        padding-top: 221px
    }

    #access .wrap {
        display: flex;
        justify-content: space-between
    }

    #access h2 {
        text-align: left
    }

    #access .group {
        flex: 1;
        max-width: 830px;
        margin-top: 0
    }

    #access .group .map {
        height: 500px
    }

    #access .group .row1 {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 3px
    }

    #access .group .row1 .btn-map {
        margin: 5px 0 0
    }

    #access .group .row1 .btn-map a {
        font-size: 14px;
        line-height: 30px
    }

    #access .group .row1 .btn-map a img {
        width: 12px;
        margin: -4px 0px 0 2px
    }

    #access .group .row1 .btn-map a:hover {
        border-color: rgba(0, 0, 0, 0)
    }

    #access .group .row2 {
        /* display: flex; */
        justify-content: space-between;
        margin-top: 41px
    }

    #access .group .row2 dl {
        /* max-width: 377px; */
        width: 100%
    }

    #access .group .row2 dl dt {
        padding-bottom: 5px;
        margin-bottom: 6px;
        font-size: 18px
    }

    #access .group .row2 dl+dl {
        margin-top: 30px;
    }
    #access img {
    padding-top: 10px; 
    width: 520px;
    height: auto;
    }
}

#footer {
    padding-bottom: 50px
}

@media screen and (min-width: 768px) {
    #footer {
        padding-bottom: 107px
    }

    #footer .group {
        display: block;
        width: 270px;
        margin: 0 0 0 auto
    }

    #footer .logo {
        position: unset;
        transform: none
    }

    #footer .info {
        margin-top: 64px
    }

    #footer .ft-js {
        position: absolute;
        bottom: 0;
        left: 0;
        margin-top: 0;
        width: calc(50% + 160px)
    }

    #footer .ft-js .item {
        height: 783px
    }

    #footer .ft-js .item img {
        border-radius: 0 40px 0 0
    }

    #footer .txt-bot {
        position: absolute;
        bottom: 18px;
        left: 0;
        z-index: 2;
        color: #fff;
        display: flex !important;
        margin: 0
    }
}