/* ==================================

    index.css

================================== */

/* ==================================

  Loading -  ローディング

================================== */

#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: #fff;
    text-align: center;
}

#splash p {
    line-height: 1.8;
    font-size: 1.8rem;
}

#splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#splash_logo img {
    width: 260px;
    margin: 0 auto 24px;
}

@media screen and (max-width: 480px) {
    #splash_logo img {
        width: 100%;
    }
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ==================================

    Slider -  スライダー

================================== */

.slider {
    margin: 0 auto;
    width: 90%;
}

@media screen and (max-width: 640px) {
    .slider {
        width: 85%;
    }
}

.slider .ele {
    width: 100%;
    height: auto;
    border: solid 1px #fff;
    background-color: tomato;
    text-align: center;
    margin-right: 20%;
}

.slick-prev:before,
.slick-next:before {
    color: #333;
}

.slick-dots li.slick-active button:before {
    color: #449DD1;
}



/* ==================================

    Event -  イベント

================================== */

.event-area {
    width: 1000px;
    margin: 0 auto;
    padding: 64px 0 128px;
}

.event-area h2 {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 32px;
    font-weight: normal;
}

.event-img-box {
    width: 45%;
    padding: 16px;
    border: 1px solid #333;
}

.event-text-box {
    width: 55%;
    padding: 16px 16px 16px 32px;
}

@media screen and (max-width: 1024px) {
    .event-area {
        width: 100%;
        padding: 64px 0;
    }
    .event-img-box {
        width: 60%;
        margin: 0 auto;
    }

    .event-text-box {
        width: 60%;
        margin: 0 auto;
        padding: 16px 8px;
    }
}

@media screen and (max-width: 640px) {
    .event-img-box {
        width: 90%;
        margin: 0 auto;
    }

    .event-text-box {
        width: 100%;
        margin: 32px auto;
        padding: 16px;
    }
}

.event-text-box p {
    letter-spacing: 0.08em;
    line-height: 1.8;
}

.event-text-box p:first-child {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.event-detail-box {
    margin-bottom: 32px;
}




/* ==================================

    Concept -  コンセプト

================================== */

.concept-area {
    margin: 0 auto;
    padding: 64px 0;
    background-image: url(../img/bg_grid.jpg);
    background-repeat: repeat;
}

.concept-area h2 {
    font-family: "m-plus-2p", sans-serif;
    font-weight: bold;
    font-size: 10rem;
    text-align: center;
}

.concept-box {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    padding-top: 32px;
}

.concept-box p.concept-title-text {
    font-size: 4.0rem;
    padding-bottom: 32px;
}

.concept-box p {
    letter-spacing: 0.1em;
    line-height: 2.0;
    font-size: 1.6rem;
}

@media screen and (max-width: 1024px) {
    .concept-area h2 {
        font-size: 3.0rem;
    }

    .concept-box p.concept-title-text {
        font-size: 2.4rem;
    }

    .concept-box {
        width: 100%;
        padding: 32px 16px;
    }

    .concept-box p {
        font-size: 1.5rem;
    }
}

.br-pc {
    display: none;
}

@media screen and (max-width: 640px) {
    .br-pc {
        display: block;
    }
}



/* ==================================

    Title bar -  タイトルバー

================================== */

.title-bar-box {
    width: 30%;
    background-color: #DBA159;
    text-align: right;
    color: #FFF;
    padding: 8px 16px;
    margin-top: 128px;
}

.title-bar-box span:nth-of-type(1) {
    letter-spacing: 0.08em;
}

.title-bar-box span:nth-of-type(2) {
    display: block;
    font-family: "m-plus-2p", sans-serif;
    font-size : 2.4rem;
    letter-spacing: 0.08em;
}



/* ==================================

    Works -  施工実績

================================== */

.works-area {    
}

.works-inner-box {
    width: 1500px;
    margin: 64px auto;
}

@media screen and (max-width: 1600px) {
    .works-inner-box {
        width: 100%;
        padding: 0 16px;
        margin: 64px auto;
    }
}

.works-box {
    width: 25%;
    padding: 0 1px;
}

@media screen and (max-width: 1024px) {
    .works-box {
        width: 50%;
    }
}

@media screen and (max-width: 640px) {
    .works-box {
        width: 100%;
    }
}

.works-box section {
    margin: 32px auto;
}

.works-box h3 {
    font-weight: 400;
    font-size: 2.2rem;
    letter-spacing: 0.08em;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    .works-box h3 {
        font-size: 1.6rem;
    }
}

.works-box h3 a {
    padding: 0 8px;
    font-size: 2.2rem;
}

.works-box h3 a:hover {
    background-color: #E6F0F5;
    color: #1B75DA;
}

.works-box p:nth-of-type(1) {
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 16px 0;
}

.works-box p:nth-of-type(2) {
    letter-spacing: 0.08em;
    padding: 8px 16px;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-ideograph;
    text-indent: 1em;
}



/* ==================================

    Info -  お知らせ

================================== */

.info-area {
    width: 100%;
    margin: 0;
    padding: 64px 0;
    background-image: url(../img/bg_news.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.info-box {
    width: 60%;
    margin: 32px auto;
    padding: 32px 64px;
    background: rgba(190,135,75,0.4);
}

@media screen and (max-width: 1500px) {
    .info-box {
        width: 80%;
    }
}

@media screen and (max-width: 1024px) {
    .info-box {
        width: calc(100% - 64px);
        padding: 32px;
    }
}

.info-title-box span:nth-of-type(1) {
    letter-spacing: 0.08em;
}

.info-title-box span:nth-of-type(2) {
    display: block;
    font-family: "m-plus-2p", sans-serif;
    font-size : 3.4rem;
    letter-spacing: 0.08em;
}

.info-text-box {
    padding: 32px 0;
    letter-spacing: 0.08em;
}

.info-text-box p {

}

.info-sns-box {
    width: 30%;
    color: #fff;
    text-align: left;
}

ul.info-sns-box li {
    padding: 8px 0;
    font-size: 2.8rem;
}

ul.info-sns-box li a i {
    font-size: 2.8rem;
    padding-right: 4px;
}

.info-article-box {
    width: 60%;
}

@media screen and (max-width: 1024px) {
    .info-sns-box {
        width: 30%;
    }
    .info-article-box {
        width: 65%;
    }
}

/* transitionの共通設定リセット */
.info-article-box a {
    transition: none;
}

.info-article-box ul {
    border-bottom: 1px solid #BE894A;
    padding: 16px;
    transition: .4s;
}

.info-article-box ul:hover {
    background-color: #E6F0F5;
    color: #1B75DA;
    transition: .4s;
}

.info-article-box ul {
    letter-spacing: 0.08em;
}

.info-article-box ul li:nth-of-type(1) {
    width: 20%;
    line-height: 50px;
    letter-spacing: 0.08em;
    vertical-align: middle;
}

.info-article-box ul li:nth-of-type(2) {
    width: 80%;
    vertical-align: middle;
    letter-spacing: 0.08em;
}

@media screen and (max-width: 768px) {
    .info-article-box .flex-center {
        display: block;
    }
    .info-article-box ul li:nth-of-type(1) {
        width: 100%;
    }

    .info-article-box ul li:nth-of-type(2) {
        width: 100%;
    }
}

@media screen and (max-width: 640px) {
    .info-box {
        width: 100%;
        padding: 16px;
    }
    .info-area .flex-center {
        display: block;
    }
    .info-sns-box {
        width: 100%;
        padding: 16px;
    }
    .info-article-box {
        width: 100%;
    }
    .info-article-box ul li:nth-of-type(1) {
        width: 100%;
    }
    .info-article-box ul li:nth-of-type(2) {
        width: 100%;
    }
}



/* ==================================

    ZehSpread -  ZEH普及目標と実績

================================== */

.zeh-spread-box {
    width: 800px;
    margin: 128px auto 64px auto;
}

.zeh-spread-box p {
    padding: 16px 0 32px;
    font-size: 2.4rem;
    text-align: center;
    letter-spacing: 0.08em;
}

.zeh-spread-box ul {
    width: calc(800px / 7);
}

@media screen and (max-width: 1024px) {
    .zeh-spread-box {
        width: 80%;
    }

    .zeh-spread-box ul {
        width: 14%;
    }
}



.zeh-spread-box ul.list-title li:nth-of-type(1),
.zeh-spread-box ul.list-title li:nth-of-type(2),
.zeh-spread-box ul.list-title li:nth-of-type(3) {
    border-left: 1px solid #333;
    text-align: center;
    letter-spacing: 0.08em;
    font-weight: bold;
}

.zeh-spread-box ul li:nth-of-type(1) {
    text-align: center;
    padding: 4px 8px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: double #333;
    letter-spacing: 0.08em;
    font-weight: bold;
}

.zeh-spread-box ul li:nth-of-type(2),
.zeh-spread-box ul li:nth-of-type(3) {
    text-align: right;
    padding: 4px 8px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    letter-spacing: 0.08em;
    font-weight: bold;
}

.zeh-spread-box ul li:nth-of-type(3) {
    border-bottom: double #333;
}



@media screen and (max-width: 1024px) {
    .zeh-spread-box {
        width: 100%;
        padding: 16px 8px;
    }

    .zeh-spread-box ul:nth-of-type(1) {
        width: 16%;
        font-size: 1.2rem;
    }

    .zeh-spread-box ul li:nth-of-type(1) {
        padding: 4px;
        font-size: 1.2rem;
    }

    .zeh-spread-box ul li:nth-of-type(2),
    .zeh-spread-box ul li:nth-of-type(3) {
        padding: 4px;
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 480px) {
    .zeh-spread-box {
        width: 100%;
        padding: 16px 4px;
    }

    .zeh-spread-box ul li:nth-of-type(2),
    .zeh-spread-box ul li:nth-of-type(3) {
        padding: 4px 2px;
        font-size: 1.1rem;
    }
}


/* ==================================

    swbf -  スーパーウォールビルダーズファミリー

================================== */

.swbf-box {
    width: 270px;
    margin: 128px auto 64px auto;
}

.swbf-box p {
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: 0.08em;
}


@media screen and (max-width: 1024px) {
    .swbf-box {
        width: 90%;
    }
}


@media screen and (max-width: 1024px) {
    .swbf-box {
        width: 100%;
        padding: 16px 8px;
    }
}



/* ==================================

    Contact -  お問い合わせ

================================== */

.contact-box {
    width: 800px;
    margin: 128px auto 64px auto;
}

@media screen and (max-width: 1024px) {
    .contact-box {
        width: 100%;
    }
}

.contact-box > p {
    padding-top: 16px;
    font-size: 2.4rem;
    text-align: center;
    letter-spacing: 0.08em;
}

.contact-text-box {
    padding: 32px 16px;
}

.contact-text-box p {
    text-align: center;
    letter-spacing: 0.08em;
    line-height: 1.8;
}

@media screen and (max-width: 480px) {
    .contact-text-box p {
        font-size: 1.4rem;
    }
}

.contact-text-box i {
    font-size: 3.5rem;
    padding-right: 8px;
}

.contact-text-box p.telno {
    font-size: 3.0rem;
}

.contact-text-box p.ceotext {
    font-size: 1.6rem;
}



/* 動画の縦横比を意地 */
.movie {
    margin: 0 auto;
    width: 100%;
    max-width: 1300px;
    position: relative;
}

.movie::before {
    padding-top: 65%;
    display: block;
    content: "";
}

.movie video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.movie__btn {
    margin-top: 1em;
    text-align: center;
}

.movie__btn button {
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    padding: 0.5em 1em;
    border-radius: 50px;
    box-shadow: initial;
    display: inline-block;
    appearance: none;
    border: 1px solid #333;
    background-color: initial;
    cursor: pointer;
}