@charset "UTF-8";

/* 共通部分 -------------------- */
html {
    font-size: 100%;
}
/* 変数 */
:root {
    --side-space: 4%;
}

body {
    font-family: "Yu Mincho", "Hiragino Mincho Pro", "Hiragino Mincho ProN", "MS PMincho", 'Times New Roman';
    line-height: 1.7;
    color: #A09C8B;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
.section-title {
    padding: 50px 0 0 0;
    margin-left: var(--side-space);
    font-size: 3rem;
}

/* iframe */
iframe {
    width: 100%;
}

/* sp-br(レスポンシブ対応：改行) */
.sp-br {
    display: none;/* 600px以上では改行タグを無効 */
}


/* HEADER -------------------- */
.logo {
    width: 90px;
    margin-top: 20px;
}
.page-header nav {
    width: auto;
    display: flex;
    align-items: center;
}
.main-nav {
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    list-style: none;
    column-gap:  clamp(0.7rem, 1.5vw + 0.5rem, 1.25rem);
}
.main-nav li {
    color: #36171B;
}
.main-nav a {
    color: #f8f8f8;
}
.main-nav a:hover {
    opacity: 0.7;
    border-bottom: 1px solid #f8f8f8;
}
.page-header {
    display: flex;
    justify-content: space-between;
}
.wrapper {
    width: min(100% - 8%, 1100px);
    margin-inline: auto;
}

/* HOME -------------------- */
.home-content {
    text-align: center;
    margin-top: 10%;
    color: #f8f8f8;
}
.home-content p {
    font-size: clamp(1rem, 6vw ,1.3rem);
    margin: 10px 0 42px;
}
/* 見出し -------------------- */
.page-title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-family: "Yu Mincho", "Hiragino Mincho Pro";
    font-weight: normal;
}
/* 大きな背景画像 -------------------- */
.big-bg {
    background-size: cover;
    background-position: center center;
}
#home {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/main-bg.jpg);
    min-height: 100vh;
}
#home .page-title {
    text-transform: none;
}

/* MESSAGE -------------------- */
#message {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/msg-bg.jpg);
    min-height: auto;
    padding-bottom: 80px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
}
/* メッセージ部分 */
.msg-content {
    margin-top: 2%;
    color: #f8f8f8;
}
.msg-content h3 {
    font-size: clamp(2rem, 10vw, 3rem);
    text-align: center;
}
.msg-content p {
    font-size: 1.25rem;
    margin: 1.5rem 0;
}

/* SERVICE_ABOUT -------------------- */
#service_about {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/svc-bg.jpg);
    min-height: auto;
    padding-bottom: 80px;
    background-size: cover;
}
/* SERVICE -------------------- */
.service-wrapper {
    display: flex;
    justify-content: center;
    column-gap: calc(80 / 1080 * 100%);
}
.service-box {
    text-align: center;
    color: #f8f8f8;
}
.service-box h3 {
    font-size: 1.5rem;
}
.service-box p {
    font-size: 1rem;
    flex: 1;
}
/* ABOUT -------------------- */
.about-wrapper {
    display: flex;
    justify-content: center;
    column-gap: calc(40 / 1000 * 100%);
}
.about-wrapper article {
    order: 2;
}
.about-wrapper aside {
    order: 1;
}
.about-wrapper p {
    color: #f8f8f8;
    font-size: 1rem;
}

/* WORKS -------------------- */
#works {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/works-bg.jpg);
    min-height: auto;
    padding-bottom: 80px;
    background-size: cover;
    background-position: center bottom;
}
.works-grid {
    display: grid;
    place-items: center;
    gap: 30px;
    grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
    margin-top: 26px;
}
.item {
    height: 360px;
    width: 100%;
    background-color:  #A09C8B; /*rgb(168, 133, 99) #432 */
    display: flex;
    justify-content: center;
    align-items: center;
}
.item p {
    font-size: 1.25rem;
    font-size: 1.5rem;
    color: #f8f8f8;
}
#works > p:first-of-type {
    margin-top: 52px;
    font-size: clamp(1.1rem , 1.5vw , 1.5rem);
    text-align: center;
    color: #f8f8f8;
}
/* CONTACT -------------------- */
#contact {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/contact-bg.jpg);
    min-height: auto;
    padding-bottom: 80px;
    background-size: cover;
    background-position: center center;
}
#contact p {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #f8f8f8;
    text-align: center;
}
/* FORM */
#contact iframe {
    display: block;
    width: min(100%, 640px);
    height: 1250px;
    margin: 0 auto;
    border: none;
}

/* FOOTER -------------------- */
footer {
    background: #432;
    text-align: center;
    padding: 26px 0;
    width: 100%;
}
footer p {
    color: #fff;
    font-size: 0.975rem;
}

/* 中間サイズ -------------------- */
@media (max-width: 1100px) {
    .normal-br {
        display: none;
    }
    .msg-content p {
        margin-bottom: 0;
    }
    .about-wrapper {
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
    .about-wrapper article {
        margin-top: 10px;
        width: 100%;
    }
    .about-wrapper aside {
        width: 100%;
    }
    .service-box h3 {
        font-size: 1.4rem;
    }
    .works-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    .item {
        height: 250px;
    }
    #contact {
        padding-bottom: 40px;
    }
}

/* モバイル版 -------------------- */
@media (max-width: 767px) {
    /* 共通部分 */
    .normal-br {
        display: none;
    }
    .sp-br {
        display: block;/* 600px以上では改行タグを無効 */
    }
    /* HEADER */
    .page-header {
        flex-direction: column;
        align-items: center;
    }
    .main-nav {
        margin-top: 12px;
    }
    .main-nav li {
        font-size: clamp(0.95rem, 2vw + 0.5rem , 1.25rem);
    }
    /* HOME */
    .home-content {
        margin-top: 12.5%;
    }
    /* MESSAGE -------------------- */
    /* メッセージ部分 */
    #message {
        padding-bottom: 40px;
    }
    .msg-content {
        margin-top: 0;
    }
    .msg-content p {
        font-size: 1rem;
    }
    .msg-content > p:first-of-type {
        margin-top: 0;
    }
    /* SERVICE&ABOUT */
    #service_about {
        padding-bottom: 4%;
    }
    
    /* SERVICE -------------------- */
    .service-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .service-box {
        margin-bottom: 35px;
    }
    .service-box p {
        font-size: 1rem;
    }
    .service-box img {
        width: 100px;
        height: 100px;
    }
    /* ABOUT -------------------- */
    .about-wrapper p {
        font-size: 0.9rem;
    }
    /* WORKS -------------------- */
    #works {
        padding-bottom: 4%;
    }
    .works-grid {    
        display: block;
    }
    .item {
        width: calc(700 / 767 * 100%);
        height: clamp(200px , 3vw , 365px);
        margin-bottom: 20px;
    }
    .item p {
        font-size: 1.25rem;
    }
}

@media (max-width: 630px) {
    /* CONTACT -------------------- */
        #contact iframe {
            height: 1300px;
        }
}
@media (max-width: 493px) {
    /* CONTACT -------------------- */
    #contact iframe {
        height: 1350px;
    }
}
@media (max-width: 382px) {
    /* CONTACT -------------------- */
    #contact iframe {
        height: 1425px;
    }
}
@media (max-width: 370px) {
    .main-nav {
        column-gap: 0.5rem;
    }
    .main-nav li {
        font-size: clamp(0.8rem, 1.5vw + 0.5rem , 0.95rem);
    }
    #contact p {
        font-size: 0.95rem;
    }
}