@charset "UTF-8";

/* コンテンツA： ヒーローイメージ */
.conA {
    max-width: 1000px;
    margin: 90px auto 5px auto;
}

    .conA .container-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        max-width: 1000px;
        margin: 0 auto 10px auto;
        padding: 20px 0 5px 0;
        border-bottom: solid 2px #000;
    }

        .conA .container-title .title {
            padding: 5px 0 5px 10px;
        }

            .conA .container-title .title img {
                height: 30px;
            }

/* 小さい画面用の設定 */
@media (max-width: 767px) {

    .conA picture img {
        width: 100%;
    }
}

/* コンテンツB： 概要（アイコン＋テキスト） */
.conB {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0 55px 0;
}

    .conB .container-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        border-bottom: solid 2px #000;
    }

        .conB .container-title .title {
            padding: 0 10px;
        }

            .conB .container-title .title img {
                width: 100%;
                max-width:500px;
                padding:0 0 5px 0;
            }

    .conB .text {
        padding: 30px 10px 20px 10px;
        font-size: 18px;
    }

/* 小さい画面用の設定 */
@media (max-width: 767px) {

    .conB {
        padding: 30px 0 35px 0;
    }

        .conB .text {
            font-size: 14px;
        }

}
/* コンテンツC： 概要（画像＋テキスト） */
.conC {
}

    .conC .text {
        padding: 20px;
    }

    .conC h1 {
        margin: 10px 0 20px 0;
        font-size: 24px;
        font-weight:bold;
    }

    .conC h2 {
        margin:  15px 0 0 10px;
        font-size: 18px;
        font-weight:bold;
    }

    .conC p {
        word-break: break-all;
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 1.8;
        opacity: 0.8;
    }

    .conC ul {
        margin: 10px 0 0 0;
    }

    .conC li {
        padding:5px 0;
    }

    .conC .text a {
        color:navy;
        font-weight:bold;
        text-decoration:underline;
    }

    .conC .text a:hover {
        opacity: 0.8;
    }

    .conC .text img {
        box-sizing: border-box;
        width: 100%;
        max-width:350px;
        padding:15px;
    }

    .conC .photo_thumbnail {
        display:flex;
        justify-content:space-between;
    }

        .conC .photo_thumbnail .photo_item {
            flex: 0 0 20%;
            padding: 4px 2px;
            box-sizing: border-box;
            cursor: pointer;
        }

            .conC .photo_thumbnail .photo_item:hover {
                opacity: 0.8;
            }

        .conC .photo img {
            width: 100%;
        }

        @media (min-width: 768px) {
            .conC .container {
                display: flex;
                max-width: 1000px;
                margin-left: auto;
                margin-right: auto;
                padding: 0;
            }

            .conC .photo {
                flex: 2;
            }

            .conC .text {
                flex: 3;
                padding: 0 0 0 50px;
                box-sizing: border-box;
            }
        }