/* =============================
完全版　共通
============================== */

* {
    box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,p,a,li {
	line-height: 1.2;
	font-family:'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
}
.wrap {
    overflow: hidden;
}

li {
    list-style: none;
}
a {
    color: #000;
    text-decoration: none;
}
a:hover {
	opacity: .5;
	transition: .3s;
}


/* ===================================
ヘッダー
==================================== */
/* ----------
ロゴ調整
----------- */
/* ヘッダーロゴ。カンプで高さ確認 */
.header-logo {
    height: 60px;
}
/* 画像の高さがはみ出ているのは、指定の高さより大きいため */
.header-logo img{
    height: 100%;
}

/* ----------
ロゴとナビ整列①
----------- */
header {
    /* ロゴとナビの横並び。ダンさんは、基本的にflexboxを使う */
    display: flex;
    /* ロゴとナビの間に余白を開ける */
    justify-content: space-between;
}

/* ----------
ナビ内を横並び
----------- */
.header-nav ul{
    /* ヘッダーナビ内の横並び。flex */
    display: flex;
}

.header-nav ul li {
    /* ナビ内の間隔。カンプよりli間が60pxを確認、２つ並ぶと60pxになるように */
    padding: 0 30px;
}

/* ----------
ヘッダー（ロゴとナビ）整列②
----------- */
header {
    /* ロゴとナビの縦位置を合わせる */
    align-items: center;
    /* 全幅を1100pxに指定、センタリング */
    max-width: 1100px;
    margin: 0 auto;
    /* 上の余白の調整 */
    padding-top: 30px;
}

/* ====================================
メイン画像（リード）部分
==================================== */
.main-lead {
    font-size: 48px;
}

/* ----------
メイン・リードの縦・横の中央揃え
----------- */
.header-container {
    /* 固定 */
    position: relative;
}
.main-lead {
    /* 浮かせる */
    position: absolute;
    /* 縦に半分の位置（ただしヘッダー高さが無視されるため上寄り） */
    top: 50%;
    /* 最終的には、width100、centerで実現したため、削除。
    横に半分の位置。ただし右寄り
    left: 50%;
    右寄りの修正
    transform: translateX(-50%); */
}
.header-container {
    /* 上寄りの修正 */
    height: 800px;
    /* 背景画像を入れる。が、このままでは建物が入っていない */
    background-image: url(../img/main.png);
    /* 建物が入るように */
    background-position: center;
    /* 画像の繰り返し描画はしない */
    background-repeat: no-repeat;
    /* ？ */
    background-size: cover;
}

/* 縮めた時のロゴ左側の余白をつける */
.header-logo {
    padding-left: 15px;
}

/* メインリード。position:absolute当てると文章が折れ曲がってしまうことの修正 */
.main-lead {
    /* 幅を横幅いっぱいにして */
    width: 100%;
    /* センタリング */
    text-align: center;
}

/* ハンバーガーメニューは、PC画面時には非表示に */
.sp-menu {
    display: none;
}

/* ===================================
レスポンシブ（ヘッダー〜メイン画像まで）
==================================== */

@media screen and (max-width:960px) {
    /* ----------
    ヘッダーロゴ
    ----------- */
    .header-logo {
        /* サイズ */
        height: 26px;
        /* 左の余白を15→20へ */
        padding-left: 20px;
    }

    /* ----------
    ハンバーガーメニュー
    ----------- */
    /* ハンバーガーメニューの表示 */
    .sp-menu {
        display: block;
    }
    /* ヘッダーナビの非表示 */
    .header-nav {
        display: none;
    }
    /* ハンバーガーメニューの右余白を20px */
    .sp-menu {
        padding-right: 20px;
    }

    /* 上の余白を30→20へ */
    header {
        padding-top: 20px;
    }

    /* ----------
    メイン画像部分
    ----------- */
    .main-lead {
        font-size: 24px;
    }

    .header-container {
        height: 342px;
    }
}

/* ===================================
お知らせ
==================================== */
/* セクション上部に余白 */
.news {
    margin-top: 90px;
}
/* タイトルを中央寄せ、フォントサイズ */
.h2-ttl {
    text-align: center;
    font-size: 36px;
}
/* お知らせ内容の幅、横配置 */
.news-list {
    /* width100%だけど、最大値は700 */
    width: 100%;
    max-width: 700px;
    /* 中央寄せ*/
    margin-left: auto;
    margin-right: auto;
}
/* お知らせ内容の各行の上下間隔 */
.news-list li {
    padding: 20px 0;
}

/* タイトルと内容の間の余白 */
.news-list {
    /* お知らせタイトルと内容の間の間隔90。liのpadding20を除いて70 */
    /* 上記と合わせると「margin: 70px auto 0;」でもOK */
    margin-top: 70px;
}

/* お知らせ内容の線 */
.news-list li {
    border-bottom: 1px solid #000;
}
/* 「お知らせ」枠の囲み */
.news-border {
    border: 1px solid #000;
    /* 枠の内側余白 */
    padding: 5px 8px;
    /* フォントサイズ */
    font-size: 11px;
    /* 枠の外側余白 */
    margin: 0 30px;
}

/* ===================================
レスポンシブ（お知らせ）
==================================== */

@media screen and (max-width:960px) {
    .news {
        /* セクション上部の余白 */
        margin-top: 50px;
    }
    .h2-ttl {
        font-size: 24px;
    }
    /* お知らせの内容部分 */
    .news-list {
        /* お知らせ内容、横幅maxにしているので、左右の余白指定 */
        padding: 0 20px;
        /*  */
        margin-top: 10px;
    }
    .news-span {
        /* display:blockで日付〜お知らせが１列になる */        
        display:block;
        font-size: 13px;
    }
    .news-border {
        /* お知らせ枠の左右の余白 */
        margin: 0 15px;
    }
    .news-span {
        /* お知らせ行の上下の余白 */
        margin-bottom: 15px;
    }
}


/* ===================================
施工事例
==================================== */
/* 施工事例セクションの上の余白 */
.case {
    padding-top: 180px;
}

/* 画像の上余白と横並び */
.case-container {
    padding-top: 90px;
    display: flex;
}

/* ----------
施工事例写真
----------- */
/* 各セクションを５０％ずつにして */
.case-content {
    width: 50%;
}
/* 画像を収める */
.case-content .case-img {
    width: 440px;
}
/* 各セクション内をセンタリング */
.case-content {
    text-align: center;
}
/* 写真下の工事タイトル */
.case-content h3 {
    margin-top: 30px;
    font-size: 24px;
}
/* 写真下の県名 */
.case-content p {
    font-size: 14px;
    margin-top: 15px;
}

/* 「詳細を見る」imgを整える */
.case-btn {
    width: 300px;
}
.case-btn img {
    width: 100%;
}
.case-btn {
    /* これでちっちゃくなる */
    display: block;
    /* 中央寄せ */
    margin: 15px auto 0;
}

/* 「実績を見る」ボタン */
.case-archive {
    text-align: center;
}
/* ボーダーが入っているので、display:blockで中央寄せにできない？
まず、pで囲んで、pをtext-align:centerを当てる */
.case-archive a {
    border: 1px solid #000;
}
/* ボーダー外の縦の余白 */
.case-archive {
    margin-top: 80px;
}
/* ボーダー内の余白 */
.case-archive a {
    padding: 12px 40px;
}


/* ===================================
レスポンシブ（「施工事例」）
==================================== */

@media screen and (max-width:960px) {

    /* 横並びの写真を縦に */
    .case-container {
        flex-direction: column;
    }

    .case-content {
        /* 事例の各セクション、それぞれに中央揃え */
        width: 100%;
        /* 写真の左右に余白（20px） */
        padding: 0 20px;
    }

    /* このままだと、右側に余白がつかない（440pxだから） */
    .case-content .case-img {
        width: 100%;
    }

    /* 前のセクションとの余白を縮める */
    .case {
        padding-top: 100px;
    }

    /* セクションタイトルと画像の間の余白 */
    .case-container {
        padding-top: 30px;
    }

    /* 事例間の上下の余白 */
    .case-content:last-child {
        margin-top: 50px;
    }

    /* 文字サイズの調整 */
    .case-content h3 {
        font-size: 20px;
    }
    .case-content p {
        font-size: 12px;
    }
}


/* ===================================
バナー
==================================== */

/* ３つの画像の横並び */
.banner {
    display: flex;
}

/* ３つを収める */
.banner a {
    max-width: calc(100%/3);
}

/* 画像のサイズ調整 */
.banner a img {
    width: 100%;
}

/* 画像の上に余白（180） */
.banner {
    margin-top: 180px;
}

/* ===================================
レスポンシブ（バナー）
==================================== */

@media screen and (max-width:960px) {

    /* 縦並びに */
    .banner {
        flex-direction: column;
    }

    /* widthを100％に */
    .banner a {
        max-width: 100%;
    }
}

/* ===================================
フッター
==================================== */
/* 背景を黒、文字を白に */
footer {
    background: #000;
    padding: 30px 0 10px;
}

/* フッターナビの文字色を白に */
.footer-nav li a {
    color: #fff;
}

/* フッターロゴとフッターナビの横並び */
.footer-container div {
    display: flex;
}

/* フッターロゴのサイズ92px */
.footer-logo {
    width: 92px;
}
/* 画像がはみ出しているので */
.footer-logo img {
    width: 100%;
}

/* フッターナビの横並び */
.footer-nav {
    display: flex;
}

/* フッターロゴとフッターナビの縦方向の位置合わせ
　　.footer-navの親要素に対して */
.footer-container div {
    align-items: center;
}

/* ナビの項目間の余白 */
.footer-nav li {
    padding: 0 30px;
}

/* フッターロゴとフッターナビ間に余白をとる */
.footer-container div {
    justify-content: space-between;
}

/* フッターロゴとフッターナビの両端に余白
幅1100px、中央寄せ */
.footer-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* コピーライト */
small {
    color: #fff;

    /* 中央寄せ（インライン要素をブロック要素に） */
    display: block;
    text-align: center;

    margin-top: 60px;
    font-size: 12px;
}

/* ===================================
レスポンシブ（フッター）
==================================== */

/* メニューが上に来て、下にロゴ */
@media screen and (max-width:960px) {
    /* ロゴとナビを縦並びに（逆順の） */
    .footer-container div {
        flex-direction: column-reverse;
    }

    /* ナビの中身を縦並びに */
    .footer-nav {
        flex-direction: column;
    }

    /* 中央寄せ */
    .footer-nav li {
        text-align: center;
        margin-top: 20px;
    }

    /* フッターと写真の間の余白10px */
    footer {
        padding-top: 10px;
    }

    /* ロゴの上の余白50px */
    .footer-logo {
        margin-top: 50px;
    }

    /* コピーライトの余白20px */
    small {
        margin-top: 20px;
    }
}