@charset "utf-8";

/* 基本色 */
:root {
    /* メインカラー */
    --main-color: #C9BB89;
    /* アクセントカラー */
    --accent-color: #494432;
    /* ダークカラー */
	--dark-main-color: #968C66;
    /* フッターカラー */
    --footer-color: #588B64;    
    /* 背景・テキストカラー */
	--text-bright-color: #F3F2EF;
	--icon-color: #F3F2EF;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}

/* 基本設定：　フォントサイズ */
@media (max-width: 599px){
    :root{
        font-size: 16px;
    }
}
@media (min-width: 600px) and (max-width: 799px){
    :root{
        font-size: 16px;
    }
}
@media (min-width:800px){
    :root{
        font-size: 18px;
    }
}
body {font-size: 16px}

/* 基本設定：　ページ全体  */
body{
    margin: 0;
    font-family: 'Noto Sans JP','メイリオ',
        'Montserrat','Hiragino Kaku Gothic Pro',
        sans-serif;
    background-color: #F3F2EF;
    background-color: var(--text-bright-color);
}

/* コンテンツA：　トップページ写真 */

.conA{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 450px;
    background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.1)),url(img/top_suzki.jpg);
    background-position: center;
    background-size: cover;
    color: #F3F2EF;
    color: var(--text-bright-color);
    text-align: center;
}

.conA h1{
    margin-top: 0;
    margin-bottom: 10px;
    font-family: 'Noto Sans JP',sans-serif;
    text-shadow: 2px 2px 3px #000000; 
    font-size: 7vw;
    letter-spacing: 0.1em;
    margin-left: 0.1em;
}


@media (min-width: 768px) and (max-width: 1100px){
    .conA h1{
        font-size: 40px;
    }
}
@media (min-width:1100px){
    .conA h1{
        font-size: 50px;
    }
}


/* コンテンツB：　ボタン */
.conB .text{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 13px;
    text-align: center;
}

.conB a{
    display: block;
    padding: 20px;
    background-color: #F3F2EF;
    background-color: var(--text-bright-color);
    color: #000;
    text-decoration: none;
}


.conB a:hover{
    background-color: rgba(0,0,0,0.1);
}



@media (min-width: 768px){
    /* 大きい画面の設定 */

    .conB {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding-top: auto;
        padding-bottom: auto;
    }
    .conB .text{
        display: flex;
        padding-top: 5px;
        padding-bottom: 10px;
        font-size: 20px;
        max-width: 1000px;
    }
    .conB .item {
        flex: 1;      
    }
    
}


/* タイトルイメージ：　コンテンツ最初の写真 */

.titleimg .container{
    margin-left: auto;
    margin-right: auto;
    padding-top: 60px;
    text-align:center;
}
.titleimg img{
    max-width: 100%;
    
}

@media (max-width: 767px){
    /*小さい画面の設定*/
    
    .titleimg img{
        min-height: 200px;
    }

}



/* タイトル */

.title .container{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 10px;
}
.title a{
    margin-top:-50px; /* ★ヘッダの高さを設定する。 */
    padding-top:50px; /* ★ヘッダの高さを設定する。 */
}
.title h2{
    padding-left: 0.5rem;
    border-left: solid 0.75rem #494432;
    font-size: 1.5rem;
}
.title p{
    /*施工事例パターンの時に使用*/
    margin-top:80px;
}
.title h3{
    padding-top:20px;
    font-size: 0.8rem;
}



/* アバウトページ：社長挨拶 */

.post .container{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px;
}


.post p{
    font-size: 0.8rem;
    line-height: 2;
}




/* アバウトページ：会社紹介 */

.history .text{
    padding: 20px;
    padding-bottom: 50px;
}


.history img{
    max-width: 100%;
}

.history table{
    border-collapse: collapse;
    border-top: solid 1px #ddd;
    font-size: 0.8rem;
}

.history th,
.history td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px #ddd;
}

.history th{
    padding-right: 1rem;
    text-align: left;
    word-break: keep-all;
}


/* アバウトページ：地図 */

.access .text{
    padding: 20px;
    padding-bottom: 50px;
}

.location iframe{
    width: 100%;
    height: 400px;
    vertical-align: bottom;
    padding-bottom: 50px;
}

.access table{
    border-collapse: collapse;
    border-top: solid 1px #ddd;
    font-size: 0.8rem;
}

.access th,
.access td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px #ddd;
}

.access th{
    padding-right: 1rem;
    text-align: left;
    word-break: keep-all;
}


@media (min-width: 768px){
    /* 大きい画面の設定 */
    
    .history .container{
        /*display:flex;*/
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }    
    .history .photo {
        max-width: 500px;
    }
    .history .text{
        flex: 3;
    }
    
    .access .container{
        display:flex;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }    
    .access .location {
        flex: 3;
    }
    .access .text{
        flex: 2;
    }
    
}


/* 施工例ページ */

.construction .text{
    padding: 20px;
    padding-bottom: 50px;
}


.construction img{
    max-width: 100%;
}

.construction table{
    border-collapse: collapse;
    border-top: solid 1px #ddd;
    font-size: 0.9rem;
}

.construction th,
.construction td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px #ddd;
}

.construction th{
    padding-right: 1rem;
    text-align: left;
    word-break: keep-all;
}

@media (min-width: 768px){
    /* 大きい画面の設定 */
    
    .construction .container{
        /*display:flex;*/
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }    

    
}

/* ワークスページ：事業内容紹介 */

.works .text{
    padding: 20px;
    padding-bottom: 20px;
}

.works table{
    border-collapse: collapse;
    border-top: solid 1px #ddd;
    font-size: 0.8rem;
}

.works th,
.works td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px #ddd;
}

.works th{
    padding-right: 1rem;
    text-align: left;
    word-break: keep-all;
}

@media (min-width: 768px){
    /* 大きい画面の設定 */
    
    .works .container{
        display:flex;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }  
}


/* 施工の流れページ */
.service .container{
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px;
}

.service article{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.service .photo{
    margin: 5px;
    max-width: 250px;
    height: 150px;
    background-position: center;
    background-size: cover;
    
}
.service .text{
    margin: 10px;
}
    
.service h2{
    font-size: 1rem;
}
.service p{
    font-size: 0.7rem;
    line-height: 2;
}

.service .icon{
    text-align: center;
}

.service .down{
    font-size: 40px;
    margin-bottom: 20px;
    color: darkgrey;
}

@media (min-width:768px){
    .service .container{
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 10px;
    }

    .service article{
        flex: 1 1 100%;
        display: flex;
        flex-direction:row;
        margin: 30px auto;
    }
    .service .photo{
        flex: 1;
        margin: 30px;
        min-height: 0;
        max-height: 150px;
        background-position: center;
        background-size: cover;
    }
    .service .text{
        flex: 3;
        margin: 10px;
    }
    .service h2{
        font-size: 1rem;
    }
    .service p{
        font-size: 0.8rem;
        line-height: 2;
    }
}


/* 施工事例ページ ：リスト */

.caselist .container{
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    margin: 2px auto;
}

.caselist article{
    flex: 1 1 250px;
    display: flex;
}

.caselist a{
    position: relative;
    flex: 1;
    margin: 2px;
    display: block;
    border: solid 1px #ddd;
    background: currentColor;
    color: inherit;
    text-decoration: none;
}

.caselist a:hover{
    opacity: 0.8;
}

.caselist .photo{
    min-height: 400px;
    background-position: center;
    background-size: cover;
    opacity: 0.6;
}

.caselist .text{
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 10px;
    color: #F3F2EF;
    color: var(--text-bright-color);
}

.caselist h2{
    margin: 0;
    font-size: 18px;
}

.caselist p{
    margin: 0;
    font-size: 14px;
}

@media (min-width: 1000px){
    .caselist article{
        flex: 1 1 25%;
    }
}

/* 施工事例ページ */


.case {
    background-color: #F3F2EF;
    background-color: var(--text-bright-color);
}

.case .container{
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 5px auto;
}

.case .photo{
    margin: 10px;
    flex: 1 1 450px;
    min-height: 600px;
    background-position: center;
    background-size: cover;
}

@media (min-width: 800px) {
    .case .photo{
        flex: 1 1 45%;
    }

}
/* お問い合わせページ：問合せ先 */
.contact{
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    border: solid 1px #ddd;
    text-align: center;
    
}


.contact .icon {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 2.2rem;
    width: 2em;
    line-height: 2em;
    border-radius: 50%;
    text-align: center;
    background-color: #C9BB89;
    background-color: var(--main-color);
    color: #F3F2EF;
    color: var(--text-bright-color);
}

.contact h2{
    margin-top: 0;
    font-size: 1.2rem;
}

.contact a{
    font-size: 1.4rem;
    color: inherit;
    text-decoration: none;
}

    /* お問い合わせページ：地図 */
.location_c iframe{
        width: 100%;
        height: 400px;
        vertical-align: bottom
    }
    
.location_c h2{
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #C9BB89;
    background-color: var(--main-color);
    color: #F3F2EF;
    color: var(--text-bright-color);
    font-size: 1.5rem;
    text-align: center;
}
    

@media (min-width: 768px){
    /* 大きい画面の設定 */
    .contact-wrap{
        display: flex;
    }
    .contact{
        flex: 1;
    }
    
    .contact:first-child{
        margin-right: 20px;
    }
    

}

/* ★★ヘッダー★★ */
header{
    /* ヘッダー固定 */
    position: fixed;
    /* 印刷用 */
    /*position: absolute;*/
    top: 0;
    left: 0;
    /* 一番上に表示 */
    z-index: 100;
    width: 100%;
    background-color: rgba(243,242,239,0.9);
    /*height: 60px;*/
}


.nohero header {
    position: fixed;
    border-bottom: solid 1px #ddd;
}

/* ヘッダーB コンテンツ */
.headB ul{
    margin: 0;
    padding: 0;
    list-style: none;
    /*background-color: rgba(243,242,239,0.9);*/
}

/* ヘッダーA　サイト名 */
.headIMG {
    display: flex;
    align-items: center;
    line-height: 60px;
    padding-left: 10px;
    padding-right: 20px;
    /*background-color: none;*/
    
    /*width: 120px;
    height: 100%;*/
    margin-top: 5px;
    margin-bottom: 5px;
}

.headIMG img{
    /*width: 140px;*/
    vertical-align: middle;
    height: 50px;
}

.headB a{
    display: block;
    padding: 15px;
    color: inherit;
    font-size: 12px;
    text-decoration: none;
}
.headB a:hover{
    background-color: rgba(0,0,0,0.1);
}

/* ヘッダーC トグルボタン */
@media (max-width: 767px){
    /*小さい画面の設定*/
    header .container-small{
        display: flex;
        align-items: center;
        justify-content: space-between;
        /*max-width: 400px;*/
        margin-left: auto;
        margin-right: auto;
    }
    
    .headC{
        margin-right: 15px;
        padding: 0;
        border: none;
        outline: none;
        background: none;
        font-size: 28px;
        opacity: 0.5;
        cursor: pointer;
    }
    
    .headC:hover{
        opacity: 0.3;
    }
    
    .headB{
        display: none;
    }
}

@media (min-width: 768px){
    /* 大きい画面の設定 */
    header .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .headB ul {
        display: flex;
    }

    .headC {
        display: none;
    }
   
    .headB {
        display: block !important;
    }

}


/* フッター */
footer{
    color: #F3F2EF;
    color: var(--text-bright-color);
    padding-bottom:  20px;
    padding-top:  10px;
    background-color: #968C66;
    background-color: var(--dark-main-color);
}

footer .container {
    padding: 30px 20px;
}

@media (min-width: 768px){
    footer .container{
        display: flex;
        flex-wrap: wrap;
        max-width: 1000px;
        /*max-width: var(--large-width);*/
        margin-left: auto;
        margin-right: auto; 
    }
    
    .footA{
        flex: 0 0 40%;
    }
    
    .footB{
        flex: 0 0 60%;
    }
    
    .footC{
        flex: 0 0 100%;
    }
}


/* フッターA */
.footA{
    font-size: 10px;
    text-align: center;
    margin-bottom: 30px;
}

/* フッターA : サイト情報 */
.footA h2{
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 25px;
    letter-spacing: 0.2em;
}

.footA p{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px; 
}

@media (max-width: 767px){
    /*小さい画面の設定*/
    
    .footA h2{
        font-size: 20px;
    }

}

/* フッターB：フッターメニュー */
.footB div{
    margin-bottom: 20px;
}

.footB h3{
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: solid 1px currentColor;
    font-size: 14px;
}

.footB ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.footB a{
    display: block;
    padding: 5px;
    color: inherit;
    font-size: 12px;
    text-decoration: none;
    
}

.footB a:hover{
    background-color: rgba(0,0,0,0.3);
}

/* フッターC：コピーライト */

.footC{
    font-size-adjust: 12px;
    text-align: center;
    font-family: 'Montserrat',sans-serif;
    padding-top:  10px;
}

@media (min-width: 768px){
    .footA{
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .footB{
        display: flex;
    }

    .footB div{
        flex: 1;
    }
    
    .footB div:not(:first-child){
        margin-left:40px;
    }
}