@keyframes scrollBall {
    from {
        opacity: 1;
        top: 0
    }

    15% {
        opacity: 1;
        top: 100%
    }

    50% {
        opacity: 0;
        top: 100%
    }

    to {
        opacity: 0;
        top: 0
    }
}

header .site-id svg {
    fill: #fff
}

header .header-nav li a {
    color: #fff
}

header .header-nav li a::after {
    background: #fff
}

header .header-nav li .insta svg {
    fill: #fff
}

.home {
    overflow: hidden
}

.home .mv {
    position: relative;
    height: 120vw
}

@media screen and (min-width: 640px) {
    .home .mv {
        max-height: 750px
    }
}

.home .mv::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #333;
    transition: .4s ease;
    content: ""
}

.home .mv.active::after {
    opacity: 0
}

.home .mv .parallax-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 120vw
}

@media screen and (min-width: 640px) {
    .home .mv .parallax-container {
        max-height: 750px
    }
}

.home .mv .mv-inner {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-height: none
}

@media screen and (min-width: 640px) {
    .home .mv .mv-inner {
        justify-content: center;
        max-height: 750px
    }
}

.home .mv .mv-catch {
    width: 77.6%;
    margin-left: 6.6666666667%
}

@media screen and (min-width: 640px) {
    .home .mv .mv-catch {
        width: 53.5714285714%;
        margin-left: 0
    }
}

@media screen and (min-width: 1024px) {
    .home .mv .mv-catch {
        width: 750px
    }
}

.home .mv .mv-catch img {
    width: 100%
}

.home .mv .bg-img {
    height: 120vw;
    overflow: hidden;
    max-height: none
}

@media screen and (min-width: 640px) {
    .home .mv .bg-img {
        max-height: 750px
    }
}

.home .mv .bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;'
}

.home .scroll-txt {
    display: none
}

@media screen and (min-width: 640px) {
    .home .scroll-txt {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 1.5em;
        z-index: 1;
        color: #fff;
        font-family: 'Heebo', sans-serif;
        font-size: 1.2rem;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        line-height: 1
    }
}

.home .scroll-txt span {
    display: flex;
    position: relative;
    width: 2px;
    height: 2.8rem;
    margin-top: 1.6em;
    background: #fff
}

.home .scroll-txt span::after {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #fff;
    content: "";
    transform: translateX(-50%);
    animation: scrollBall 2s linear infinite
}

.home .content-body {
    padding-top: 5em;
    background: #eaeaea
}

@media screen and (min-width: 640px) {
    .home .content-body {
        padding-top: 10.5em
    }
}

.home .content-ttl {
    margin-bottom: .8em;
    font-family: 'Heebo', sans-serif;
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1
}

@media (min-width: 480px) {
    .home .content-ttl {
        font-size: calc(3.5rem + (1vw - 4.8px) * 3.7878787879)
    }
}

@media (min-width: 1140px) {
    .home .content-ttl {
        font-size: 6rem
    }
}

.home .content-ttl .thin {
    font-weight: 100
}

.home .content-sub-ttl {
    margin-bottom: 1.4em;
    font-size: 1.9rem;
    font-weight: bold
}

@media (min-width: 480px) {
    .home .content-sub-ttl {
        font-size: calc(1.9rem + (1vw - 4.8px) * 1.0606060606)
    }
}

@media (min-width: 1140px) {
    .home .content-sub-ttl {
        font-size: 2.6rem
    }
}

@media screen and (min-width: 640px) {
    .home .content-sub-ttl {
        margin-bottom: 1.4em
    }
}

.home .content-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.home .about-block {
    margin-bottom: 6em
}

@media screen and (min-width: 640px) {
    .home .about-block .content-row {
        flex-direction: row-reverse
    }
}

.home .about-block .about-content {
    position: relative;
    z-index: 1
}

@media screen and (min-width: 640px) {
    .home .about-block .about-content {
        width: 39.8245614035%
    }
}

.home .about-block .about-img {
    overflow: hidden
}

@media screen and (min-width: 640px) {
    .home .about-block .about-img {
        width: 52.1929824561%
    }
}

.home .about-block .about-img-list {
    display: flex;
    margin-right: -10.7692307692%
}

@media screen and (min-width: 640px) {
    .home .about-block .about-img-list {
        margin-right: -65px
    }
}

.home .about-block .about-img-list li {
    width: 33.3333333333%
}

@media screen and (min-width: 640px) {
    .home .about-block .about-img-list li {
        width: 33.3333333333%
    }
}

.home .about-block .about-img-list li:first-child {
    margin-top: 7.5%
}

@media screen and (min-width: 640px) {
    .home .about-block .about-img-list li:first-child {
        margin-top: 7.5757575758%
    }
}

.home .about-block .about-img-list li:nth-child(2) {
    margin: 18.0555555556% 0 0 -3.8888888889%
}

@media screen and (min-width: 640px) {
    .home .about-block .about-img-list li:nth-child(2) {
        margin: 18.1818181818% 0 0 -3.9393939394%
    }
}

.home .about-block .about-img-list li:nth-child(3) {
    margin-left: -6.1111111111%
}

@media screen and (min-width: 640px) {
    .home .about-block .about-img-list li:nth-child(3) {
        margin-left: -6.0606060606%
    }
}

.home .about-block .ja-txt {
    margin-bottom: 1.5384615385em;
    font-size: 1.3rem
}

@media (min-width: 480px) {
    .home .about-block .ja-txt {
        font-size: calc(1.3rem + (1vw - 4.8px) * .4545454545)
    }
}

@media (min-width: 1140px) {
    .home .about-block .ja-txt {
        font-size: 1.6rem
    }
}

@media screen and (min-width: 640px) {
    .home .about-block .ja-txt {
        margin-bottom: 2.5em
    }
}

.home .about-block .en-txt {
    margin-bottom: 3.6363636364em;
    font-family: 'Heebo', sans-serif;
    font-size: 1.1rem
}

@media screen and (min-width: 640px) {
    .home .about-block .en-txt {
        margin-bottom: 4em;
        font-size: 1.2rem
    }
}

.home .about-block .btn-box {
    width: 100%;
    margin-bottom: 2.5em
}

@media screen and (min-width: 640px) {
    .home .about-block .btn-box {
        max-width: 250px
    }
}

.home .about-block .about-bg {
    position: absolute;
    top: 50%;
    left: -5%;
    z-index: -1;
    width: 110%;
    transform: translateY(-50%)
}

@media screen and (min-width: 640px) {
    .home .about-block .about-bg {
        width: 185.4625550661%;
        top: 48%;
        left: auto;
        right: -12.1145374449%;
        transform: none
    }

    .home .about-block .about-bg img {
        width: 100%
    }
}

.home .solution-block {
    position: relative;
    margin-bottom: 9em
}

.home .solution-block-inner {
    max-width: 1400px;
    margin: 0 auto
}

.home .solution-block .solution-ttl {
    position: absolute;
    top: 1.4em;
    left: 50%;
    z-index: 1;
    color: #fff;
    font-family: 'Heebo', sans-serif;
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1;
    transform: translateX(-50%)
}

@media (min-width: 480px) {
    .home .solution-block .solution-ttl {
        font-size: calc(3.5rem + (1vw - 4.8px) * 3.7878787879)
    }
}

@media (min-width: 1140px) {
    .home .solution-block .solution-ttl {
        font-size: 6rem
    }
}

@media screen and (min-width: 640px) {
    .home .solution-block .solution-ttl {
        top: 2em
    }
}

.home .solution-block .solution-col {
    position: relative;
    overflow: hidden;
    width: 100%
}

@media screen and (min-width: 640px) {
    .home .solution-block .solution-col {
        width: 50%
    }
}

.home .solution-block .solution-col-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10em 0 5em
}

@media screen and (min-width: 640px) {
    .home .solution-block .solution-col-inner {
        padding: calc(12em + 40px) 0 5em
    }
}

@media screen and (min-width: 640px) {
    .home .solution-block .solution-col.design-col .txt-box {
        margin-left: 24%
    }
}

.home .solution-block .solution-col.produce-col {
    position: relative
}

@media screen and (min-width: 640px) {
    .home .solution-block .solution-col.produce-col {
        top: 40px
    }

    .home .solution-block .solution-col.produce-col .txt-box {
        margin-right: 18.5714285714%
    }
}

.home .solution-block .solution-col.produce-col .solution-col-inner {
    padding: 5em 0
}

@media screen and (min-width: 640px) {
    .home .solution-block .solution-col.produce-col .solution-col-inner {
        padding: 12em 0 8em
    }
}

.home .solution-block .solution-col .simpleParallax {
    height: 100%
}

.home .solution-block .box-head {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    margin-bottom: 2.5em;
    text-align: center
}

.home .solution-block .box-head .box-ttl {
    position: relative;
    z-index: 0;
    color: #fff;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1
}

@media (min-width: 640px) {
    .home .solution-block .box-head .box-ttl {
        font-size: calc(2.2rem + (1vw - 6.4px) * 1.6)
    }
}

@media (min-width: 1140px) {
    .home .solution-block .box-head .box-ttl {
        font-size: 3rem
    }
}

.home .solution-block .box-head .box-ttl::before {
    display: block;
    position: absolute;
    top: -.5em;
    left: -.5em;
    z-index: -1;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    background: #cb062b;
    content: ""
}

.home .solution-block .box-head .en-ttl {
    margin-bottom: .5em;
    color: #cb062b;
    font-family: 'Heebo', sans-serif;
    font-weight: bold
}

.home .solution-block .box-head .head-icon {
    margin-bottom: 4em
}

@media screen and (min-width: 640px) {
    .home .solution-block .box-head .head-icon {
        margin-bottom: 1em
    }
}

.home .solution-block .txt-box {
    position: relative;
    z-index: 1;
    width: 86.6666666667%;
    margin: 0 auto
}

@media screen and (min-width: 640px) {
    .home .solution-block .txt-box {
        width: 68.5714285714%
    }
}

.home .solution-block .ja-txt {
    margin-bottom: 1em;
    color: #afafaf;
    font-size: 1.3rem
}

@media (min-width: 480px) {
    .home .solution-block .ja-txt {
        font-size: calc(1.3rem + (1vw - 4.8px) * .4545454545)
    }
}

@media (min-width: 1140px) {
    .home .solution-block .ja-txt {
        font-size: 1.6rem
    }
}

.home .solution-block .en-txt {
    margin-bottom: 3em;
    color: #afafaf;
    font-size: 1.1rem
}

@media (min-width: 480px) {
    .home .solution-block .en-txt {
        font-size: calc(1.1rem + (1vw - 4.8px) * .1515151515)
    }
}

@media (min-width: 1140px) {
    .home .solution-block .en-txt {
        font-size: 1.2rem
    }
}

.home .solution-block .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.home .solution-block .bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;'
}

.home .solution-block .link-box {
    max-width: 95px;
    margin: 0 auto
}

@media screen and (min-width: 640px) {
    .home .solution-block .link-box {
        max-width: 145px
    }
}

.home .works-block {
    margin-bottom: 8em
}

@media screen and (min-width: 640px) {
    .home .works-block {
        margin-bottom: 12em
    }
}

.home .works-block .works-col {
    display: flex;
    width: 100%;
    margin-bottom: 3em
}

@media screen and (min-width: 640px) {
    .home .works-block .works-col {
        width: 48.4210526316%;
        margin-bottom: 3.5em
    }
}

.home .works-block .works-col a {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    transition: .2s ease-out
}

.home .works-block .works-col a:hover {
    opacity: .7
}

.home .works-block .works-col a:hover img {
    transform: scale(1.05)
}

.home .works-block .works-col .col-head {
    flex: auto;
    position: relative;
    padding-left: 1.2em;
    border-left: 1px solid #cb062b
}

@media screen and (min-width: 640px) {
    .home .works-block .works-col .col-head {
        padding-left: 2em
    }
}

.home .works-block .works-col .col-head .col-info {
    position: relative;
    z-index: 1;
    font-family: 'Heebo', sans-serif
}

.home .works-block .works-col .col-head .address01 {
    color: #a6a6a6
}

.home .works-block .works-col .col-head .shop-name {
    font-size: 1.5rem
}

@media (min-width: 480px) {
    .home .works-block .works-col .col-head .shop-name {
        font-size: calc(1.5rem + (1vw - 4.8px) * .4545454545)
    }
}

@media (min-width: 1140px) {
    .home .works-block .works-col .col-head .shop-name {
        font-size: 1.8rem
    }
}

.home .works-block .works-col .col-head .address02 {
    font-size: 1.3rem
}

@media (min-width: 480px) {
    .home .works-block .works-col .col-head .address02 {
        font-size: calc(1.3rem + (1vw - 4.8px) * .4545454545)
    }
}

@media (min-width: 1140px) {
    .home .works-block .works-col .col-head .address02 {
        font-size: 1.6rem
    }
}

.home .works-block .works-col .col-head .date {
    position: absolute;
    top: 50%;
    right: 0;
    color: #d0d0d0;
    font-family: 'Heebo', sans-serif;
    font-size: 3.5rem;
    font-weight: 100;
    transform: translateY(-50%)
}

@media (min-width: 480px) {
    .home .works-block .works-col .col-head .date {
        font-size: calc(3.5rem + (1vw - 4.8px) * 2.2727272727)
    }
}

@media (min-width: 1140px) {
    .home .works-block .works-col .col-head .date {
        font-size: 5rem
    }
}

.home .works-block .works-col .col-body {
    padding: 2em 0 0 2em;
    border-left: 1px solid #d1d1d1
}

.home .works-block .works-col .img-wrap {
    position: relative;
    overflow: hidden
}

.home .works-block .works-col .img-wrap::before {
    display: block;
    padding-top: 61.6858237548%;
    content: ""
}

.home .works-block .works-col img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    transition: .2s ease-out
}

.home .works-block .btn-box {
    width: 100%;
    max-width: 500px;
    margin: 0 auto
}

.home .news-block {
    margin-bottom: 6.2em
}

@media screen and (min-width: 640px) {
    .home .news-block {
        margin-bottom: 11em
    }
}

.home .news-block .block-head {
    position: relative
}

.home .news-block .link-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 95px
}

@media screen and (min-width: 640px) {
    .home .news-block .link-box {
        max-width: 145px
    }
}

@media screen and (min-width: 640px) {
    .home .news-block .news-ttl {
        text-align: center
    }
}

.home .news-block .tab-list {
    margin-bottom: 3em
}

@media screen and (min-width: 640px) {
    .home .news-block .tab-list {
        margin-bottom: 3.2em
    }
}

.home .news-block .tab-list li {
    width: 33.33%
}

@media screen and (min-width: 640px) {
    .home .news-block .tab-list li {
        width: 20%
    }
}

.home .contact-block {
    padding: 4.8em 0;
    background: #303030
}

.home .contact-block .contact-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.home .contact-block .ttl-box {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 3.7em;
    text-align: center
}

@media screen and (min-width: 768px) {
    .home .contact-block .ttl-box {
        width: 57.0175438596%;
        max-width: none;
        margin: 0 6.0526315789% 0 0
    }
}

.home .contact-block .ttl-box a {
    display: block;
    position: relative;
    padding: 3.4em .5em 3em;
    border: 3px solid #fff;
    text-decoration: none;
    transition: .4s ease-out
}

.home .contact-block .ttl-box a:hover {
    background: rgba(255, 255, 255, 0.1)
}

.home .contact-block .ttl-box a:hover::after {
    transform: scaleX(1)
}

.home .contact-block .contact-ttl {
    margin-bottom: .3em;
    color: #fff
}

.home .contact-block .ttl-note {
    color: #b7b7b7
}

.home .contact-block .info-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    margin: 0 auto
}

@media screen and (min-width: 768px) {
    .home .contact-block .info-box {
        width: 28.0701754386%;
        max-width: none;
        margin: 0
    }
}

.home .contact-block .info-ttl {
    margin-bottom: .5em;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center
}

@media (min-width: 480px) {
    .home .contact-block .info-ttl {
        font-size: calc(1.3rem + (1vw - 4.8px) * .4545454545)
    }
}

@media (min-width: 1140px) {
    .home .contact-block .info-ttl {
        font-size: 1.6rem
    }
}

.home .contact-block .tel {
    margin-bottom: .8em;
    color: #fff;
    font-family: 'Heebo', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    line-height: 1
}

@media (min-width: 480px) {
    .home .contact-block .tel {
        font-size: calc(2.5rem + (1vw - 4.8px) * 1.0606060606)
    }
}

@media (min-width: 1140px) {
    .home .contact-block .tel {
        font-size: 3.2rem
    }
}

.home .contact-block .tel .small {
    font-size: 2.5rem
}

@media (min-width: 480px) {
    .home .contact-block .tel .small {
        font-size: calc(2.5rem + (1vw - 4.8px) * -.1515151515)
    }
}

@media (min-width: 1140px) {
    .home .contact-block .tel .small {
        font-size: 2.4rem
    }
}

.home .contact-block .tel .light {
    font-weight: 200;
    vertical-align: middle
}

.home .contact-block .tel a {
    color: #fff;
    text-decoration: none
}

.home .contact-block .info-note {
    padding-top: 1.8em;
    border-top: 1px solid #b7b7b7;
    color: #b7b7b7;
    text-align: center
}