/*レスポンシブ02 ブルー*/
/*---------- general ----------*/
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');*/

body {
color: rgba(var(--color_text));
font-weight: normal;
font-family: /*"Noto Serif JP", serif*/YuMincho,'Yu Mincho',serif;
font-size: 16px;
}

.sans-serif {
font-family: "Noto Sans JP", sans-serif;
}


/*--- colors template ---*/
:root {
    --color_primary: 60, 92, 129;
    --color_sub: 233, 238, 242;
    --color_bg: 255, 255, 255;
    --color_text: 92, 109, 128;
    --color_main_text: 255, 255, 255;
    --color_accent: 175, 206, 255;
}

/*--- link button ---*/
a.btn {
    background: none;
    width: 300px;
    color: rgba(var(--color_text));
    text-align: left;
    padding: 18px 5px;
    margin: auto;
    border-bottom: 1px solid rgba(var(--color_primary));
    border-radius: 0;
    position: relative;
    &:hover {
        background: none;
        border-bottom: 1px solid rgba(var(--color_accent));
    }
    &:after {
        content: "\f061";
        position: absolute;
        right: 6px;
        margin: 0;
    }
}

/*--- main visual ---*/
.mainImage img, .mainImage #slider li img {
    width: 100%;
}


/*---------- head ----------*/
/*ヘッダロゴ テキストの場合*/
#title {
    background: rgba(var(--color_primary));
        h1 a, a:hover {
            color: rgba(var(--color_main_text));
        }
        #title_outer {
            height: 64px;
        }
}

/*ヘッダロゴ　画像の場合
#title {
    background: rgba(var(--color_primary));
        h1 {
            background: url(/materials/178295743059402.png) left center no-repeat;
            background-size: contain;
            height: 64px;
            width: 448px;
            a {
                overflow: hidden;
                text-indent: 110%;
                white-space: nowrap;
                display: block;
                height: inherit;
            }
        }
        #title_outer {
            height: 64px;
            justify-content: center;
        }
}*/

#wrap_body #topMenu {
    order: 2;
    background: rgba(var(--color_primary));
}

#topMenu_outer .topMenu li a {
    line-height: 46px;
    height: 46px;
    color: rgba(var(--color_main_text));
    &:after {
        content: none;
    }
    &:hover {
        background: none;
        border-bottom: solid 2px rgba(var(--color_accent));
    }
}


/*---------- main ----------*/
/*--- topics ---*/
#mainTopics, #listTopics {
    background: none;
    p.more a, .listview a {
        background: none;
        color: rgba(var(--color_primary));
        font-size: .9em;
        &:hover {
            background: none;
            color: rgba(var(--color_accent));
        }
    }
    ul.topics li {
        p {
            &.date {
                background: none;
                color: rgba(var(--color_text));
                font-size: .9em;
                padding: 0 0 6px;
            }
            &.description {
                font-size: .9em;
            }
        }
        h3 a {
            color: rgba(var(--color_primary));
            &:hover {
                background: none;
                color: rgba(var(--color_accent));
            }
        }
    }

}

/*--- 見出し ---*/
/*h2*/
#mainArticles h2, #listTopics h2 {
    color: rgba(var(--color_text));
    background: none;
    font-size: 2.5em;
    font-weight: bold;
}
/*h3*/
#mainTopics h2, #mainArticles .article h2, .article h3, .gallery h3, .freeHtml h3 {
    font-size: 2.5em;
    font-weight: bold;
    color: rgba(var(--color_text));
    &:after {
        content: none;
    }
}
.article h3 a, .gallery h3 a, .article h3 a:hover, .gallery h3 a:hover {
    font-weight: bold;
    color: rgba(var(--color_text));
}

/*h4*/
.article h4 {
    font-size: 1.5em;
    color: rgba(var(--color_text));
    border: none;
    padding: 0;
    margin-bottom: 20px;
    font-weight: bold;
    background: none;
}
.article h4:before {
    content: none;
}
/*h5*/
.article h5 {
    border: none;
    padding-left: 0;
}


/*--- article ---*/
.article {
    /***--- background color ---***/
    &.max.bgColor {
        background: rgba(var(--color_sub));
        padding: 0;
        .article_body {
            display: flex;
            align-items: center;
            &.article_left .image, &.article_right .image {
                max-width: 50vw;
                margin: 0;
            }
            &.article_right {
                flex-direction: row-reverse;
            }
        }
        .bgColorTxt {
            padding: 0 2vw;
            h3 {
                margin: 0;
                padding-top: 0;
                max-width: 50vw;
            }
        }
    }
    /***--- background image ---***/
    &.bgImg01 {
        background: linear-gradient(rgb(255 255 255 / .75), rgb(255 255 255 / .75)), url(/materials/179213890585202.png) no-repeat center;
        background-size: cover;
        padding-bottom: 64px;
    }
    &.bgImg02 {
        background: linear-gradient(rgb(255 255 255 / .75), rgb(255 255 255 / .75)), url(/materials/179213890585203.png) no-repeat center;
        background-size: cover;
        padding-bottom: 64px;
    }
    &.bgImg03 {
        background: linear-gradient(rgb(92 109 128 / 40%), rgb(92 109 128 / 40%)), url(/materials/179213890585307.png) no-repeat center;
        background-size: cover;
        padding-bottom: 64px;
        h3, p {
            color: rgba(var(--color_main_text));
        }
    }
    &.bgImg04 {
        background: linear-gradient(rgb(92 109 128 / 40%), rgb(92 109 128 / 40%)), url(/materials/179213890585306.png) no-repeat center;
        background-size: cover;
        padding-bottom: 64px;
        h3, p {
            color: rgba(var(--color_main_text));
        }
    }

@media only screen and (width > 600px) { /*ここからPCサイズ用>>>>>>*/

    /***--- big image ---***/
    &.max.bigImg .article_body {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
        &.article_left:after {
            content: "";
            display: inline-block;
            background-color: rgba(var(--color_sub));
            width: 85%;
            height: 400px;
            border-radius: 0px 10px 10px 0px;
            position: absolute;
            left: -40px;
            bottom: -24px;
            z-index: -1;
        }
        &.article_right {
            flex-direction: row-reverse;
            &:after {
            content: "";
            display: inline-block;
            background-color: rgba(var(--color_sub));
            width: 85%;
            height: 400px;
            border-radius: 10px 0px 0px 10px;
            position: absolute;
            right: -40px;
            bottom: -24px;
            z-index: -1;
            }
        }
        .image {
            max-width: 64%;
        }
        .bigTitle {
            width: 36%;
            h3 {
                font-size: 100px;
                text-align: left;
                padding: 0;
                margin: 0 0 45px;
                line-height: 1;
            }
        }
    }
}
/***--- dialogue ---***/
    &.dialogue {
        background: rgba(var(--color_sub));
        padding: 40px 40px 0;
        border-top: solid 6px rgba(var(--color_primary));
        .article_body {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .image {
            width: 196px;
            height: 196px;
            border-radius: 50%;
            margin-right: 32px;
            img {
                object-fit: cover;
                height: 100%;
            }
        }
        .dialogueSet {
            display: block;
            width: calc(100% - 228px);
            position: relative;
            &:before {
                position: absolute;
                display: block;
                content: "";
                left: -12px;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 25px;
                height: 25px;
                z-index: 1;
                transform: rotateZ(-45deg);
                background-color: rgba(var(--color_bg));
            }
            h5 {
                padding: 1em;
                background: rgba(var(--color_accent));
                margin: 0;
                width: fit-content;
                z-index: 2;
                position: relative;
            }
            p {
                background: rgba(var(--color_bg));
                padding: 4em 2em 2em;
                width: 100%;
                position: relative;
                top: -32px;
                z-index: 1;
            }
        }
    }

} /*>>>>>>PCサイズここまで*/



/*--- gallery ---*/
@media only screen and (width > 600px) { /*ここからPCサイズ用>>>>>>*/
    .gallery.fitGallery {
        .gallery_grid li.galleryGrid .image img {
            height: 376px;
            object-fit: cover;
        }
    }
} /*>>>>>>PCサイズここまで*/

.gallery ul.galleryGrids .comment {
    font-size: 1em;
    font-weight: normal;
}
.gallery.commentLeft ul.galleryGrids .comment {
    text-align: left;
}

/*--- table & list ---*/
.article table.normalTbl, ol.pp, ul.ps, ul.notes, ul.maru {
    font-size: 1em;
}
.article table.normalTbl th {
    vertical-align: top;
    background: rgba(var(--color_sub));
}

/*---------- side ----------*/
.sideContents {
    #sideServices h2, #sideBlogCategories h2, #sideBlogDates h2, #sideMobile h2 {
        font-size: 1em;
    }
    ul, dl {
        font-size: 0.95em;
    }
    dl ul li a {
        font-size: unset;
    }
}

/*---------- foot ----------*/
#footer {
    background: rgba(var(--color_sub));
}
div#footer_outer {
    width: 100%;
}
#footer_body .services { /*フッターサブメニュー非表示*/
    display: none;
}
@media only screen and (width > 600px) { /*ここからPCサイズ用>>>>>>*/
#footer_body {
    padding: 32px 0 88px;
    flex-direction: column;
    padding: 0;
    .topMenu, #footer_body .services {
        flex-direction: row;
        width: 100%;
        height: 72px;
        max-width: 1024px;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        li a {
            color: rgba(var(--color_primary));
            background: none;
            font-weight: normal;
            &:hover {
                color: rgba(var(--color_primary));
                font-weight: bold;
                background: none;
            }
            &:before {
                content: none;
            }
        }
    }
    .copyright {
        position: unset;
        height: 32px;
        padding: 0;
        line-height: 32px;
        background: rgba(var(--color_primary));
    }
}
} /*>>>>>>PCサイズここまで*/

/*---------- Contact ----------*/
/*--- 電話番号 ---*/
p.contactTel {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 0;
}

/*--- お問い合わせフォーム ---*/
#mainArticles , #mainBlogCommentForm {
    form {
        padding: 0;
    }
    table.contactTable {
        border-top: solid 1px #ccc;
        border-left: solid 1px #ccc;
        tr th, tr td {
            border-bottom: solid 1px #ccc;
            border-right: solid 1px #ccc;
            background: #fff;
        }
        input.button {
            background: rgba(var(--color_primary));
            border-radius: 0;
        }
    }
}

/*--- Google reCaptcha ---*/
.recaptcha_policy {
padding: 0;
margin: 0;
text-align: center;
font-size: 11px !important;
}
.recaptcha_policy a {
font-size: 11px !important;
}
.grecaptcha-badge { visibility: hidden; }

/*<<<<<<タブレットサイズ（調整用）用>>>>>>*/
@media only screen and (601px <= width <= 1024px) {
    .article {
        &.max.bigImg .article_body {
            .image {
                max-width: 44%;
            }
            .bigTitle {
                width: 56%;
            }
        }
    }
}

/*<<<<<<スマホサイズ用>>>>>>*/
@media only screen and (width <= 600px) {
    body {
        font-size: 14px;
    }
    #toggle, .active #toggle {
        background-color: rgba(var(--color_primary));
    }
    #title {
        #title_outer {
            height: 56px;
        }
        h1 {
            font-size: 1.25em;
        }
    }
    a.btn {
        width: 100%;
        max-width: 300px;
    }

/*--- 見出し ---*/
    /*h3*/
    #mainTopics h2, #mainArticles .article h2, .article h3, .gallery h3, .freeHtml h3 {
        font-size: 2em;
        line-height: 1.5;
    }
 
/*--- topics ---*/
    #mainTopics {
        h2 {
            line-height: 1.25;
            padding: 0;
        }
        .listview {
            margin-top: 0;
        }
    }
    ul.topics li {
        padding: 8px;
        min-height: unset;
        p {
            &.description, &.date {
            font-size: 1em !important;
            }
        }
    }
    #mainTopics, #listTopics {
        p.more a, .listview a {
            font-size: 1em;
        }
    }


/*---------- article ----------*/
    .article {
        /***--- background color ---***/
        &.max.bgColor .article_body {
            flex-direction: column;
            padding: 2em 4vw;
            &.article_left .image, &.article_right .image {
                max-width: 100%;
                margin-bottom: 1em;
            }
            .bgColorTxt h3 {
                max-width: unset;
            }
        }
        /***--- background image ---***/
        &.bgImg01, &.bgImg02, &.bgImg03, &.bgImg04 {
            padding-bottom: 24px;
        }
        /***--- big image ---***/
        &.max.bigImg {
            background: rgba(var(--color_sub));
            border-radius: 1em;
            .bigTitle h3{
                text-align: left;
                padding: 0;
            }
        }
        /***--- dialogue ---***/
        &.dialogue {
            padding: 2em 4vw 0;
            .article_body {
                align-items: flex-start;
            }
            .image {
                width: 80px;
                height: 80px;
                margin-top: 56px;
            }
            .dialogueSet {
                width: calc(100% - 112px);
                &:before {
                    top: 88px;
                    bottom: auto;
                }
                h5 {
                    width: 88%;
                }
                p {
                    padding: 4em 4vw 4vw;
                    margin-bottom: 0;
                }
            }
        }
    }

/*---------- gallery ----------*/
    .gallery {
        .gallery_grid2 li.galleryGrid, .gallery_grid3 li.galleryGrid, .gallery_grid4 li.galleryGrid, .gallery_grid5 li.galleryGrid {
            width: 100%;
        }
    }

/*---------- foot ----------*/
    #footer_body {
        padding: 0;
        .topMenu li a, .service li a {
            color: rgba(var(--color_text));
            background: rgba(var(--color_sub));
            font-weight: normal;
            &:before {
                color: rgba(var(--color_text));
            }
            &:hover {
                background: rgba(var(--color_primary));
            }
        }
        .copyright {
            padding: 1em 4vw;
            background: rgba(var(--color_primary));
        }
    }
    #footer {
        font-size: 1em;
    }
}



/*---------- 独自の装飾 ----------*/
/***--- footer contact ---***/
.sideContact {
    background: rgba(var(--color_primary));
    padding: 30px 60px;
    display: flex;
    margin-bottom: 80px;
    .sideTxt {
        width: 50%;
        h3 {
            padding: 0;
            margin: 0 0 32px;
            text-align: left;
            line-height: 1;
            color: rgba(var(--color_main_text));
        }
        p {
            color: rgba(var(--color_main_text));
        }
    }
    a.btn {
        margin-right: 0;
        color: rgba(var(--color_main_text));
        border-color: rgba(var(--color_main_text));
        &:hover {
            border-color: rgba(var(--color_accent));
        }
    }
}
@media only screen and (width <= 600px) {
    .sideContact {
        flex-direction: column;
        padding: 2em 1em;
        .sideTxt {
            width: unset;
        }
        a.btn {
            margin: auto;
        }
    }

}