@charset "UTF-8";

/********************

common

**********************/

body {
    margin: 0;
    padding: 0;
    font-family: "Noto Serif JP", serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd,
dt,
ul,
li {
    margin: 0;
    padding: 0;
    color: #473115;
}

ul,
li {
    list-style: none;
}

p {
    color: #473115;
    font-size: 22px;
    letter-spacing: .02em;
    font-weight: 500;
    line-height: 40px;
}

a {
    text-decoration: none;
    color: #473115;
}

.wrapper {
    margin: 0 auto;
    width: 800px;
}

.gray-bg {
    background-color: #F8F8F8;
}

@media screen and (max-width: 960px) {
    .wrapper {
        width: 94vw;
    }
    .all-wrapper {
        padding-bottom: 10vw;
    }
}

@media screen and (max-width: 700px) { 
    p {
        font-size: 4.0vw;
        line-height: 6.8vw;
    }
}

/******************

top-view

********************/

.top-view__thumb {
    width: 100%;
}

.top-view__thumb img {
    object-fit: cover;
    width: 100%;
}

/******************

btn

********************/


.common__button {
    width: 100%;
}

.common__button img {
    object-fit: contain;
    width: 100%;
}

/******************

introduction

********************/

.introduction {
    background: linear-gradient(to bottom, #FFF0D9, #E9E0D3);
}

.introduction-wrapper {
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

.movie-box {
    margin: 0 auto;
    height: 400px;
    width: 640px;
}

.movie-box iframe {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.movie-box__example {
    background-color: #111111;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    margin: 0 auto;
    width: 100%;
}

.movie-box__example p {
    color: #ffffff;
    font-size: 32px;
    font-weight: 600;
}

@media screen and (max-width: 700px) {
    .movie-box {
        height: 46vw;
        width: 90vw;
    }  
    .introduction-wrapper {
        padding: 8vw 0;
    }
    .movie-box__example {
        height: 40vw;
        width: 80vw;
    }
}

/******************

txt-box

********************/

.txt-box {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

.txt-box p {
    text-align: center;
}

.txt-box h4 {
    font-size: 24px;
    line-height: 40px;
    text-align: center;
}

.txt-box h3 {
    font-size: 28px;
    line-height: 48px;
    text-align: center;
}

.txt-box h2 {
    font-size: 36px;
    line-height: 56px;
    text-align: center;
}

.txt-box h4 span,
.txt-box h3 span,
.txt-box h3 p,
.txt-box h2 span,
.txt-box p span {
    color: #A40000;
}

.thumb-box {
    height: 480px;
    width: 400px;
    margin: 0 auto;
}

.thumb-box img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.banner-box {
    height: 260px;
    width: 480px;
    margin: 40px auto;
}

.banner-box img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.thumb-box-large {
    height: 480px;
    width: 400px;
    margin: 0 auto;
}

.thumb-box-large img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 700px) {
    .thumb-box {
        height: 90vw;
        width: 70vw;
        margin: 0 auto;
    } 
    .banner-box {
        height: 60vw;
        width: 84vw;
        margin: 3.2vw auto;
    }
    .txt-box h4 {
        letter-spacing: 0;
        line-height: 7.6vw;
        font-size: 4.6vw;
    }
    .txt-box h3 {
        font-size: 4.8vw;
        line-height: 7.2vw;
        text-align: center;
    }    
    .txt-box h2 {
        font-size: 4.6vw;
        line-height: 7.2vw;
        text-align: center;
    }
}

/******************

content

********************/

.content-wrapper {
    padding: 40px 0;
}

.content__emphasis {
    padding: 24px 0;
}

.content__emphasis a.btn {
    display: block;
    height: 160px;
    width: 100%;
}

.content__emphasis a.btn img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.content-list {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

@media screen and (max-width: 700px) {
    .content__emphasis a.btn {
        height: 15vh;
    }
    .content__emphasis a.btn {
        height: 8vh;
    }    
}

/******************

large-banner

********************/

.large-banner {
    height: 640px;
    width: 100%;
}

.large-banner img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}


/******************

more

********************/

.more-wrapper {
    background: url(../images/tufti_shift/ref-bg.png) no-repeat;
    background-size: cover;
    padding: 80px 24px;
}

.more-content {
    background: rgba(255,255,255,.4);
    padding: 56px 24px 40px 20px;
}

.more-content h3 {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 8px;
}

.more-content p {
    text-align: center;
}

@media screen and (max-width: 700px) {
    .more-content {
        padding: 8vw 2.1vw 0 2.1vw;
    }
    .more-content h3 {
        font-size: 4.2vw;
        margin-bottom: 2.1vw;
    }
    .more-content p {
        font-size: 3.2vw;
    }
    .more-wrapper {
        padding: 12vw 0;
    }
}

/******************

unit

********************/

.unit-wrapper {
    height: 880px;
    width: 100%;
}

.unit-wrapper img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

@media screen and (max-width: 700px) {
    .unit-wrapper {
        height: 60vw;
        width: 100%;
    }
}
/******************

info

********************/

.info-wrapper {
    background: url(../images/tufti_shift/ref-banner-bg.png) no-repeat;
    background-size: cover;
    padding: 80px 24px;
}

.info-content {
    background: rgba(255, 255, 255, 0.75);
    padding: 56px 24px 40px 20px;
}

.info-content p {
    text-align: center;
    font-size: 22px;
    line-height: 28px;
}

.info-content p span,
.info-content h4 span  {
    color: #C60139;
}

.info-content h4 {
    font-size: 28px;
    text-align: center;
}

.info-item {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}

.info-title {
    padding-bottom: 32px;
}

.info-title h2 {
    text-align: center;
}

.info-title h2 span {
    background-color: #C60139;
    border-radius: 40px;
    padding: 2px 24px;
    color: #ffffff;
    font-size: 20px;
}

.info-detail {
    margin-top: 120px;
}

.info-detail__thumb {
    height: 320px;
    width: 560px;
    margin: 0 auto;
}

.info-detail__thumb img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.info-detail h3 {
    text-align: center;
    color: #ffffff;
    font-size: 40px;
    padding-top: 40px;
}

.info-detail h3 span {
    color: #FFEA00;
}

.info-detail__list {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 40px;
}

.info-detail__list a.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    border: 1px solid #ffffff;
    height: 80px;
    width: 240px;
}

.info-detail__list a.btn img {
    display: block;
    height: 64px;
    width: 64px;
}

@media screen and (max-width: 700px) {
    .info-content {
        padding: 7.2vw 4.0vw 4.0vw 4.0vw;
    }
    .info-content h3 {
        font-size: 8vw;
        margin-bottom: 4.0vw;
    }
    .info-detail__thumb {
        height: 55vw;
        width: 90vw;
        margin: 0 auto;
    }  
    .info-detail h3 {
        font-size: 5.2vw;
    }  
    .info-content p {
        font-size: 3.8vw;
    }
    .info-content h4 {
        font-size: 4.2vw;
    }
    .info-title h2 span {
        font-size: 3.2vw;
    }
    .info-title {
        padding-bottom: 3.2vw;
    } 
    .info-content {
        padding: 7.2vw 0 4.0vw 0;
        width: 88vw;
    }
    .info-detail {
        margin-top: 12vw;
        width: 88vw;
    }
    .info-detail__list a.btn {
        width: 38vw;
    }
    .info-detail__list a.btn img {
        display: block;
        height: 12vw;
        width: 12vw;
    }        
}


.coming-soon {
    align-items: center;
    background-color: #A40000;
    display: flex;
    justify-content: center;
    padding: 24px 0;
    margin: 0 auto 32px auto;
    width: 100%;
}

.coming-soon p {
    color: #ffffff;
    font-size: 32px;
    font-weight: 600;
}