.container {
    opacity: 0
}

.container.show {
    opacity: 1;
    -webkit-transition: opacity 1.2s;
    transition: opacity 1.2s;
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

@media screen and (min-width: 769px) {
    .header {
        height: 88px
    }

    .header-nav {
        background: #fff
    }

    .main {
        padding-top: 88px;
        height: 598px
    }

    .main__inner {
        position: relative;
        max-width: 1160px;
        margin: 0 auto;
        z-index: 1
    }

    .main__inner.inview .main__title {
        opacity: 1
    }

    .main__inner.inview .circle {
        opacity: 1
    }

    .main__inner.inview .circle__item {
        -webkit-transform: none;
        transform: none
    }

    .main .circle {
        opacity: 0;
        transition: opacity 1.4s .6s, transform 1s .6s cubic-bezier(0, 0.4, 0.3, 1), -webkit-transform 1s .6s cubic-bezier(0, 0.4, 0.3, 1)
    }

    .main .circle__item {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-transition-duration: 2s;
        transition-duration: 2s;
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }

    .main .circle img {
        width: 100%
    }

    .main .circle__item {
        position: absolute
    }

    .main .circle01 {
        width: 342px;
        top: 65px;
        left: -192px;
        z-index: 3
    }

    .main .circle02 {
        width: 390px;
        top: -66px;
        right: -235px;
        z-index: 2
    }

    .main .circle03 {
        width: 99px;
        height: 99px;
        border-radius: 50%;
        background: #7bcd88;
        top: -95px;
        left: 28px
    }

    .main .circle04 {
        width: 43px;
        height: 43px;
        border-radius: 50%;
        background: #ffe987;
        top: -21px;
        left: -132px
    }

    .main .circle05 {
        width: 164px;
        height: 164px;
        border-radius: 50%;
        background: #ffe987;
        top: 58px;
        left: 44px;
        z-index: -1
    }

    .main .circle06 {
        width: 136px;
        height: 136px;
        border-radius: 50%;
        background: #7bcd88;
        top: -37px;
        right: 92px
    }

    .main .circle07 {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: #7bcd88;
        top: 303px;
        right: 70px;
        z-index: 1
    }

    .main .circle08 {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: #ffe987;
        top: 291px;
        right: -166px
    }

    .main__title {
        width: 464px;
        margin: 67px auto 0;
        z-index: 1;
        position: relative;
        opacity: 0;
        transition: opacity 1.4s .2s, transform 1s .2s cubic-bezier(0, 0.4, 0.3, 1), -webkit-transform 1s .2s cubic-bezier(0, 0.4, 0.3, 1)
    }

    .main__text {
        font-family: "Zen Maru Gothic";
        font-size: 26px;
        font-weight: 700;
        line-height: 37.65px;
        letter-spacing: .05em;
        -webkit-font-feature-settings: "palt";
        font-feature-settings: "palt";
        text-align: center;
        text-underline-position: from-font;
        -webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
        margin: 47px 0 0;
        z-index: 3;
        position: relative
    }

    .contents {
        background: #ffe987;
        position: relative
    }

    .contents::before {
        content: "";
        display: block;
        width: 2626px;
        height: 739px;
        position: absolute;
        left: 50%;
        margin-left: -1313px;
        top: -107px;
        background: url(../img/takaramono/base.svg) no-repeat center top;
        background-size: contain
    }

    .contents .inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px 80px
    }

    .contents .box {
        padding: 40px 20px 60px;
        border-radius: 40px;
        background: #fff;
        margin-bottom: 45px;
        position: relative;
        z-index: 1
    }

    .contents .box .heading {
        font-family: "Zen Maru Gothic";
        font-size: 35px;
        font-weight: 700;
        line-height: 50.68px;
        letter-spacing: .05em;
        text-align: center;
        text-underline-position: from-font;
        -webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
        position: relative;
        padding-bottom: 25px;
        margin-bottom: 38px
    }

    .contents .box .heading::before {
        content: "";
        display: block;
        width: 58px;
        height: 5px;
        background: #23ac39;
        border-radius: 3px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto
    }

    .contents .box .text {
        font-size: 18px;
        font-weight: 500;
        line-height: 2.32;
        letter-spacing: .05em;
        text-align: center;
        text-underline-position: from-font;
        -webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none
    }

    .contents .box .text .marker {
        display: inline-block;
        background: #eeefce;
        border: 3.38px solid #23ac39;
        margin: 7px 2px 7px 8px;
        padding: 0px 6px;
        border-radius: 5px
    }

    .contents .box .text .marker.color-orange {
        margin: 10px 7px 7px 7px;
        padding: 0px 0px 0 5px;
        border: 3.38px solid #fabd00;
        background: #fff5d4
    }

    .contents #box02 {
        padding-bottom: 85px
    }

    .contents #box02 .heading {
        margin-bottom: 13px
    }

    .contents .map {
        width: 348.5px;
        height: 498px;
        margin: 0 auto;
        position: relative;
        margin-top: 23px
    }

    .contents .map__item {
        position: absolute
    }

    .contents .map__item.map01 {
        width: 462.5px;
        top: 203px;
        left: -250px
    }

    .contents .map__item.map02 {
        width: 345.5px;
        right: -245px;
        top: 275px
    }

    .contents .map__item.map03 {
        width: 352.5px;
        left: -224px;
        top: 345px
    }

    .banner__list {
        width: 666px;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .banner__item {
        width: 216px;
        margin-bottom: 10px
    }

    .banner__item a {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .banner__item a:hover {
        opacity: .7
    }
}

@media screen and (max-width: 768px) {
    .contents .inner {
        width: 88.4615384615vw;
        margin: 0 auto
    }

    .main {
        height: 168vw;
        position: relative;
        z-index: 1
    }

    .main__title {
        width: 43.3333333333vw;
        margin: 0 auto 4.8717948718vw
    }

    .main__text {
        font-family: "Zen Maru Gothic";
        font-size: 5.1282051282vw;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0em;
        padding-left: 1vw;
        text-align: center;
        text-underline-position: from-font;
        -webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none
    }

    .main__inner {
        margin: 0 auto;
        padding: 19vw 0 0
    }

    .main__inner.inview .main__title {
        opacity: 1
    }

    .main__inner.inview .circle {
        opacity: 1
    }

    .main__inner.inview .circle__item {
        -webkit-transform: none;
        transform: none
    }

    .main .circle {
        opacity: 0;
        transition: opacity 1.4s .6s, transform 1s .6s cubic-bezier(0, 0.4, 0.3, 1), -webkit-transform 1s .6s cubic-bezier(0, 0.4, 0.3, 1)
    }

    .main .circle img {
        width: 100%
    }

    .main .circle__item {
        position: absolute;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-transition-duration: 2s;
        transition-duration: 2s;
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform
    }

    .main .circle01 {
        width: 39.615385vw;
        top: 123vw;
        left: -3.5vw;
        z-index: 1
    }

    .main .circle02 {
        width: 43vw;
        top: 106.9230769231vw;
        right: -2vw
    }

    .main .circle03 {
        z-index: 2;
        width: 28.4615384615vw;
        height: 28.4615384615vw;
        border-radius: 50%;
        background: #ffe987;
        top: -4vw;
        left: 3vw
    }

    .main .circle04 {
        width: 15.1282051282vw;
        height: 15.1282051282vw;
        border-radius: 50%;
        background: #7bcd88;
        top: 24vw;
        left: -4vw;
        z-index: -1
    }

    .main .circle05 {
        width: 23.3333333333vw;
        height: 23.3333333333vw;
        border-radius: 50%;
        background: #7bcd88;
        top: 115vw;
        left: 24vw;
        z-index: -1
    }

    .main .circle06 {
        width: 20.5128205128vw;
        height: 20.5128205128vw;
        border-radius: 50%;
        background: #ffe987;
        top: 4vw;
        right: 7vw
    }

    .main .circle07 {
        width: 11.5384615385vw;
        height: 11.5384615385vw;
        border-radius: 50%;
        background: #ffe987;
        top: 136vw;
        right: 34vw;
        z-index: 1
    }

    .main .circle08 {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        background: #7bcd88;
        top: 29vw;
        right: -2vw;
        z-index: 1
    }

    .contents {
        background: #ffe987;
        position: relative;
        padding-bottom: 15.3846153846vw
    }

    .contents::before {
        content: "";
        display: block;
        width: 228.2051282051vw;
        height: 55.641025641vw;
        position: absolute;
        left: 50%;
        margin-left: -114.1025641026vw;
        top: -18vw;
        background: url(../img/takaramono/base_sp.svg) no-repeat center top;
        background-size: contain
    }

    .contents .box {
        padding: 10.5vw 0 12vw;
        border-radius: 10.2564102564vw;
        background: #fff;
        margin-bottom: 10vw;
        position: relative;
        z-index: 1
    }

    .contents .box .heading {
        font-family: "Zen Maru Gothic";
        font-size: 7.4358974359vw;
        font-weight: 700;
        line-height: 10.2564102564vw;
        letter-spacing: .05em;
        text-align: center;
        text-underline-position: from-font;
        -webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
        margin-bottom: 4vw;
        position: relative;
        padding-bottom: 6vw
    }

    .contents .box .heading::after {
        content: "";
        display: block;
        width: 14.8717948718vw;
        height: 1.2820512821vw;
        background: #23ac39;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        border-radius: 3px
    }

    .contents .box .text {
        font-size: 4.6153846154vw;
        font-weight: 500;
        line-height: 2;
        letter-spacing: .05em;
        text-align: center;
        text-underline-position: from-font;
        -webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none
    }

    .contents .box .text .marker {
        display: inline-block;
        background: #eeefce;
        border: 1.0256410256vw solid #23ac39;
        margin: 2vw 1vw 2.5vw 1vw;
        padding: .5vw 1.5vw;
        border-radius: 1.2820512821vw
    }

    .contents .box .text .marker:nth-of-type(3) {
        margin-top: 1vw
    }

    .contents .box .text .marker.color-orange {
        margin: 2vw 1vw 1.5vw 1vw;
        border: 1.0256410256vw solid #fdd000;
        background: #fff5d4
    }

    .contents #box02 {
        padding-bottom: 0;
        margin-bottom: 13vw;
        height: 258vw
    }

    .contents #box02 .heading {
        margin-bottom: 5vw
    }

    .contents #box02 .text {
        line-height: 1.87;
        margin-bottom: 21.5vw
    }

    .contents .map {
        width: 71.7948717949vw;
        position: relative;
        margin-left: 8vw
    }

    .contents .map__item {
        position: absolute
    }

    .contents .map__item.map01 {
        width: 43.3333333333vw;
        top: -12.5641025641vw;
        left: -2vw
    }

    .contents .map__item.map02 {
        width: 38.9743589744vw;
        right: -6vw;
        top: 62.5vw
    }

    .contents .map__item.map03 {
        width: 37.9743589744vw;
        left: -6vw;
        top: 76.5vw
    }

    .contents .banner__list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .contents .banner__item {
        width: 42.8205128205vw;
        margin-bottom: 2.0512820513vw
    }
}