/* @TOP PAGE
======================= */
#top #main-visual {
    width: 100%;
    height: 1240px;
    position: relative;
}

#top #main-visual > div {
    position: absolute;
    left: 30px;
}

#top #main-visual > div.main {
    top: 325px;
}

#top #main-visual > div.catch {
    top: 75px;
}

#top #main-visual > div.read {
    top: 228px;
}

#top #main-visual .circle-container {
    position: absolute;
}

#top #main-visual .circle-container.circle-container01 {
    position: absolute;
    top: 121px;
    left: -160px;
}

#top #main-visual .circle-container.circle-container02 {
    position: absolute;
    top: 608px;
    left: 90px;
}

#top #main-visual .circle-container.circle-container03 {
    position: absolute;
    top: 333px;
    left: 470px;
}

#top #main-visual .circle-small {
    background: #ecc9d1;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    position: absolute;
}

#top #main-visual .circle-small.circle-small01 {
    top: 953px;
    left: 92px;
}

#top #main-visual .circle-small.circle-small02 {
    top: 329px;
    left: 648px;
}

#top #main-visual #scroll {
    width: 160px;
    height: 160px;
    top: 964px;
    left: 296px;
    cursor: pointer;
}

#top #main-visual #scroll .svg {
    width: 80px;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -40px;
    z-index: 5;
}

#top #main-visual #scroll .svg span {
    background: url("../svg/icon_scroll_d.svg") no-repeat center 0;
    background-size: contain;
    width: 80px;
    height: 80px;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease-out;
    animation: arrow-move 1.5s 1s ease-in-out infinite;
}

@media screen and (min-width: 751px) {
    #top #main-visual {
        min-width: 1090px;
        height: 815px;
    }

    #top #main-visual > div.main {
        top: 30px;
        left: auto;
        right: 50%;
        margin-right: -860px;
    }

    #top #main-visual > div.catch {
        top: 110px;
        left: 50%;
        margin-left: -490px;
    }

    #top #main-visual > div.read {
        top: 390px;
        left: 50%;
        margin-left: -470px;
    }

    #top #main-visual .circle-container.circle-container01 {
        top: 140px;
        left: 50%;
        margin-left: -169px;
    }

    #top #main-visual .circle-container.circle-container02 {
        top: 260px;
        left: 50%;
        margin-left: -900px;
    }

    #top #main-visual .circle-container.circle-container03 {
        top: 570px;
        left: 50%;
        margin-left: -578px;
    }

    #top #main-visual .circle-small {
        width: 14px;
        height: 14px;
    }

    #top #main-visual .circle-small.circle-small01 {
        top: 566px;
        left: 50%;
        margin-left: -458px;
    }

    #top #main-visual .circle-small.circle-small02 {
        top: 698px;
        left: 50%;
        margin-left: -583px;
    }

    #top #main-visual #scroll {
        width: 90px;
        height: 90px;
        top: 570px;
        left: 50%;
        margin-left: -45px;
    }

    #top #main-visual #scroll .svg {
        width: 40px;
        top: 30px;
        margin-left: -20px;
    }

    #top #main-visual #scroll .svg span {
        width: 40px;
        height: 40px;
    }

    #top #main-visual #scroll:hover .svg span {
        background: url("../svg/icon_scroll_on.svg") no-repeat center 0;
    }
}

@keyframes arrow-move {
    0% {
        top: 0px;
    }

    60% {
        top: 4px;
    }

    100% {
        top: 0px;
    }
}

#top #container {
    position: relative;
}

#top #container .bg {
    background-repeat: repeat;
    background-position: 0 center;
    width: 750px;
    height: 1200px;
    position: absolute;
    top: 45px;
}

#top #container .contents h2 {
    text-align: center;
    position: relative;
    z-index: 2;
}

#top #container .contents h2 span img {
    height: 64px;
}

#top #container .contents h2 span, #top #container .contents h2 small {
    display: block;
}

#top #container .contents h2 small {
    margin: 2px 0 0;
}

#top #container .contents h2 small img {
    height: 48px;
}

#top #container .contents .archive-block {
    box-shadow: 0px 0px 6px 3px rgba(228, 226, 225, 0.4);
    background: #fff;
    width: 690px;
    padding: 52px 30px 65px;
    margin: 55px auto 0;
    position: relative;
    z-index: 2;
}

#top #container .contents .archive-block .fix-box {
    background: #f8eee5;
    font-size: 2.2rem;
    padding: 15px 15px;
    margin: 0 0 35px;
}

#top #container .contents .archive-block .fix-box a {
    color: #ba405d;
    text-decoration: underline;
}

#top #container .contents .archive-block .archive-list {
    margin: 0 0 50px;
}

#top #container .contents .archive-block .archive-list li {
    margin: 52px 0;
    padding: 0 0 0 75px;
    position: relative;
}

#top #container .contents .archive-block .archive-list li:first-child {
    margin: 0 0 52px;
}

#top #container .contents .archive-block .archive-list li:last-child {
    margin: 52px 0 0;
}

#top #container .contents .archive-block .archive-list li::before {
    content: "";
    display: block;
    background: transparent;
    border: 2px solid #ba405d;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
}

#top #container .contents .archive-block .archive-list li:first-child::before {
    content: "NEW";
    border: none;
    background: #ba405d;
    font-size: 1.8rem;
    color: #fff;
    text-align: center;
    padding: 18px 0;
    color: #fff;
    width: 60px;
    height: 60px;
    left: 0;
}

#top #container .contents .archive-block .archive-list li a dl dt {
    margin: 0 0 8px;
    color: #45413d;
}

#top #container .contents .archive-block .archive-list li a dl dd {
    line-height: 1.25;
    color: #ba405d;
}

#top #container .contents .news {
    position: relative;
    margin: 0 0 95px;
}

#top #container .contents .news .bg {
    background-color: #f9eef1;
    background-image: url("../images/top/bg_news.jpg");
}

#top #container .contents .recruit {
    position: relative;
    margin: 0 0 95px;
}

#top #container .contents .recruit .bg {
    background-color: #f8eee5;
    background-image: url("../images/top/bg_recruit.jpg");
}

@media screen and (min-width: 751px) {
    #top #container {
        background: rgba(255, 255, 255, 0.6);
        width: 100%;
        overflow: hidden;
        clear: both;
        margin-top: -60px;
        padding: 60px 0 95px;
        position: relative;
    }

    #top #container .bg {
        background-repeat: repeat;
        background-size: 478px 535px;
        width: 50%;
        height: 740px;
        position: absolute;
        top: 60px;
    }

    #top #container .bg.bg-left {
        background-color: #f9eef1;
        background-image: url("../images/top/bg_news.jpg");
        background-position: left 0;
        left: 0;
    }

    #top #container .bg.bg-right {
        background-color: #f8eee5;
        background-image: url("../images/top/bg_recruit.jpg");
        background-position: 0 0;
        right: 0;
    }

    #top #container .contents {
        width: 980px;
        margin: -120px auto 0;
    }

    #top #container .contents section {
        width: 480px;
        float: left;
    }

    #top #container .contents section.recruit-contents {
        margin: 0 0 0 20px;
    }

    #top #container .contents h2 {
        text-align: left;
    }

    #top #container .contents h2 span img {
        height: 38px;
    }

    #top #container .contents h2 small {
        text-align: left;
        margin: 8px 0 0;
    }

    #top #container .contents h2 small img {
        height: 28px;
    }

    #top #container .contents .news-contents .archive-block {
        padding: 25px 10px 75px;
    }

    #top #container .contents .recruit-contents .archive-block {
        padding: 25px 10px 166px;
    }

    #top #container .contents .archive-block {
        box-shadow: 0px 0px 6px 3px rgba(228, 226, 225, 0.4);
        background: #fff;
        width: 480px;
        min-height: 700px;
        margin: 20px auto 0;
        position: relative;
        z-index: 2;
    }

    #top #container .contents .archive-block .fix-box {
        width: 448px;
        height: 74px;
        font-size: 12px;
        padding: 10px 10px;
        position: absolute;
        bottom: 60px;
        left: 16px;
    }

    #top #container .contents .archive-block .archive-list {
        padding: 0 0 30px;
        margin: 0;
    }

    #top #container .contents .archive-block .archive-list li {
        margin: 25px 0;
        padding: 0 0 0 50px;
    }

    #top #container .contents .archive-block .archive-list li:first-child {
        margin: 0 0 25px;
    }

    #top #container .contents .archive-block .archive-list li:last-child {
        margin: 25px 0 0;
    }

    #top #container .contents .archive-block .archive-list li::before {
        border: 1px solid #ba405d;
        width: 30px;
        height: 30px;
        left: 5px;
    }

    #top #container .contents .archive-block .archive-list li:first-child::before {
        background: #ba405d;
        font-size: 1.1rem;
        padding: 12px 0;
        width: 38px;
        height: 38px;
    }

    #top #container .contents .archive-block .archive-list li a {
        transition: all .3s;
    }

    #top #container .contents .archive-block .archive-list li a dl dt {
        margin: 0 0 5px;
    }

    #top #container .contents .archive-block .archive-list li a dl dd {
        color: #45413d;
    }

    #top #container .contents .archive-block .archive-list li a:hover dl dt, #top #container .contents .archive-block .archive-list li a:hover dl dd {
        color: #ba405d;
    }

    #top #container .contents .archive-block .btn {
        margin: 0;
        position: absolute;
        bottom: 30px;
        left: 50%;
        margin-left: -100px;
    }
}

#top .list-banner {
    padding: 0 30px 170px;
}

#top .list-banner li {
    margin: 0 0 30px;
}

#top .list-banner li:hover {
    transition: .3s;
    opacity: 0.8;
}

#top .list-banner li img {
    box-shadow: 0px 0px 6px 3px rgba(228, 226, 225, 0.4);
}

@media screen and (min-width: 751px) {
    #top .list-banner {
        width: 980px;
        padding: 0 0 105px;
        margin: 0 auto;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #top .list-banner li {
        -ms-flex-preferred-size: 480px;
        flex-basis: 480px;
        margin: 0 0 20px;
    }
}