@charset "utf-8";
/* ====================================================================================================

    css/top.css

==================================================================================================== */

/* ----------------------------------------------------------------------------------------------------
    parallax
---------------------------------------------------------------------------------------------------- */
.parallax01,
.parallax02 {
    width:100%;
    height:300px;
    background-color:transparent;
    background-position:center center;
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat
    }
.parallax01 { background-image:url('../image/contents/top/photo01.jpg'); }
.parallax02 { background-image:url('../image/contents/top/photo02.jpg'); }

@media screen and (max-width:900px) {
.parallax01,
.parallax02 {
    height:clamp(100px,15.625vw,300px);
    }
}


/* ----------------------------------------------------------------------------------------------------
    block01
---------------------------------------------------------------------------------------------------- */
#block01 {
    border-top:5px solid #e0d7c4;
    padding:100px 0 0 0;
    }
    #block01 .inner {
        }

    #block01 .inner_wide.type01 {
        background:#e0d7c4;
        margin:50px auto 0 auto !important;
        padding:70px 0;
        }
        #block01 .inner_wide.type01 figure {
            display:flex;
            gap:50px;
            }
            #block01 .inner_wide.type01 figure div {
                }
                #block01 .inner_wide.type01 figure div img {
                    }
            #block01 .inner_wide.type01 figure figcaption {
                display:flex;
                flex-direction:column;
                justify-content:center;
                gap:30px;
                padding:30px;
                }
                #block01 .inner_wide.type01 figure figcaption h3 {
                    font-size:30px;
                    font-weight:500;
                    letter-spacing:0.1em;
                    word-break:keep-all;
                    margin:0 0 20px 0;
                    }
                    #block01 .inner_wide.type01 figure figcaption h3 strong {
                        font-size:45px;
                        font-weight:500;
                        }
                #block01 .inner_wide.type01 figure figcaption p {
                    word-break:keep-all;
                    }

    #block01 .inner_wide.type02 {
        background:#757166;
        margin:0 auto !important;
        padding:50px 0;
        }
        #block01 .inner_wide.type02 h3 {
            color:#ffffff;
            font-size:30px;
            font-weight:500;
            text-align:center;
            letter-spacing:0.1em;
            word-break:keep-all;
            padding:0 30px;
            }
            #block01 .inner_wide.type02 h3 strong {
                font-size:45px !important;
                font-weight:500;
                }
        #block01 .inner_wide.type02 ul {
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:50px;
            width:100%;
            max-width:1260px;
            margin:50px auto 0 auto;
            padding:0 30px;
            list-style:none;
            }
            #block01 .inner_wide.type02 > ul > li {
                width:calc((100% - 50px) / 2);
                background:#ffffff;
                padding:30px;
                }
                #block01 .inner_wide.type02 > ul > li figure {
                    display:flex;
                    gap:30px;
                    }
                    #block01 .inner_wide.type02 > ul > li figure div {
                        flex-shrink:0;
                        width:200px;
                        max-height:130px;
                        }
                        #block01 .inner_wide.type02 > ul > li figure div img {
                            width:100%;
                            height:auto;
                            }
                    #block01 .inner_wide.type02 > ul > li figure figcaption {
                        display:flex;
                        align-items:center;
                        text-align:left;
                        }
                        #block01 .inner_wide.type02 > ul > li figure figcaption p {
                            text-align:left;
                            word-break:keep-all;
                            }
        #block01 .inner_wide > p {
            text-align:center;
            word-break:keep-all;
            margin:50px auto 0 auto !important;
            }

@media screen and (max-width:1300px) {
    #block01 .inner_wide.type01 {
        margin:clamp(30px,4.6875vw,50px) auto 0 auto !important;
        padding:clamp(20px,3.125vw,70px) 0 0 0;
        }
        #block01 .inner_wide.type01 figure {
            flex-direction:column-reverse;
            justify-content:flex-start;
            gap:clamp(20px,3.125vw,30px);
            }
            #block01 .inner_wide.type01 figure div {
                width:100%;
                }
                #block01 .inner_wide.type01 figure div img {
                    width:100%;
                    height:auto;
                    }
            #block01 .inner_wide.type01 figure figcaption {
                width:100%;
                gap:clamp(20px,3.125vw,30px);
                }
                #block01 .inner_wide.type01 figure figcaption h3 {
                    text-align:center;
                    margin:0;
                    }
}

@media screen and (max-width:1260px) {
                #block01 .inner_wide.type01 figure figcaption h3 {
                    font-size:clamp(25px,3.90625vw,30px);
                    }
                    #block01 .inner_wide.type01 figure figcaption h3 strong {
                        font-size:clamp(30px,4.6875vw,45px);
                        }

        #block01 .inner_wide.type02 h3 {
            font-size:clamp(25px,3.90625vw,30px);
            }
            #block01 .inner_wide.type02 h3 strong {
                font-size:clamp(30px,4.68755vw,45px) !important;
                font-weight:500;
                }
        #block01 .inner_wide.type02 ul {
            display:flex;
            flex-direction:column;
            flex-wrap:nowrap;
            gap:30px;
            }
            #block01 .inner_wide.type02 > ul > li {
                width:100%;
                }
}

@media screen and (max-width:900px) {
#block01 {
    padding:clamp(50px,7.8125vw,100px) 0 0 0;
    }
    #block01 .inner_wide.type02 {
        padding:clamp(30px,4.6875vw,70px) 0;
        }
        #block01 .inner_wide.type02 > p {
            margin:clamp(30px,4.6875vw,50px) auto 0 auto !important;
            }
        #block01 .inner_wide.type02 ul {
            gap:clamp(20px,3.125vw,50px);
            margin:clamp(30px,4.6875vw,50px) auto 0 auto;
            }
            #block01 .inner_wide.type02 > ul > li {
                padding:clamp(20px,6.25vw,30px) !important;
                }
}

@media screen and (max-width:640px) {
            #block01 .inner_wide.type01 figure figcaption {
                padding:clamp(10px,3.125vw,30px) clamp(20px,3.125vw,30px);
                }
                #block01 .inner_wide.type01 figure figcaption h3 {
                    line-height:1.5;
                    }

        #block01 .inner_wide.type02 h3 {
            line-height:1.5;
            padding:0 clamp(20px,6.25vw,30px);
            }
        #block01 .inner_wide.type02 ul {
            justify-content:flex-start;
            padding:0 clamp(20px,6.25vw,30px);
            }
            #block01 .inner_wide.type02 > ul > li {
                width:100%;
                }
                #block01 .inner_wide.type02 > ul > li figure {
                    flex-direction:column;
                    gap:20px;
                    }
                    #block01 .inner_wide.type02 > ul > li figure div {
                        flex-shrink:1;
                        width:100%;
                        height:130px;
                        text-align:center;
                        background:#efefef;
                        }
                        #block01 .inner_wide.type02 > ul > li figure div img {
                            width:auto;
                            height:130px;
                            }
        #block01 .inner_wide.type02 > p {
            text-align:left;
            }
}


/* ----------------------------------------------------------------------------------------------------
    block02
---------------------------------------------------------------------------------------------------- */
#block02 {
    background:#ffffff url('../image/contents/top/bg02.jpg') center top repeat;
    border-top:5px solid #757166;
    border-bottom:5px solid #757166;
    padding:100px 0 0 0;
    }
    #block02 h2 {
        }
    #block02 h2::before {
        background:#757166 !important;
        }
        #block02 h2 span {
            color:#afada5 !important;
            }
    #block02 .inner {
        position:relative;
        padding:0 0 70px 0;
        }
        #block02 .inner > p:nth-of-type(1) {
            text-align:center;
            word-break:keep-all;
            margin:0 auto 50px auto;
            }
        #block02 .inner p.balloon {
            position:absolute;
            top:-75px;
            right:-50px;
            width:200px;
            height:174px;
            font-size:25px;
            font-weight:bold;
            text-align:center;
            background:transparent url('../image/contents/top/balloon.png') center center no-repeat;
            padding:40px 0 0 0;
            transition:all 0.4s ease-in-out;
            }
        #block02 .inner ul {
            display:flex;
            justify-content:space-between;
            gap:50px;
            width:100%;
            max-width:1200px;
            margin:0 auto;
            list-style:none;
            }
            #block02 .inner ul li {
                width:calc((100% - 100px) / 3);
                background:#ffffff;
                padding:30px;
                }
                #block02 .inner ul li figure {
                    display:flex;
                    flex-direction:column;
                    gap:20px;
                    }
                    #block02 .inner ul li figure div {
                        width:100%;
                        max-height:300px;
                        aspect-ratio:153 / 100;
                        text-align:center;
                        background:#efefef;
                        overflow:hidden;
                        }
                        #block02 .inner ul li figure div img {
                            width:100%;
                            max-width:306px;
                            height:auto;
                            }
                    #block02 .inner ul li figure figcaption {
                        text-align:center;
                        }
                        #block02 .inner ul li figure figcaption dl {
                            display:flex;
                            flex-direction:column;
                            gap:10px;
                            }
                            #block02 .inner ul li figure figcaption dl dt {
                                font-size:120%;
                                font-weight:bold;
                                }
                            #block02 .inner ul li:nth-of-type(1) figure figcaption dl dt { color:#da6e73; }
                            #block02 .inner ul li:nth-of-type(2) figure figcaption dl dt { color:#66a9d9; }
                            #block02 .inner ul li:nth-of-type(3) figure figcaption dl dt { color:#529ea3; }
                            #block02 .inner ul li figure figcaption dl dd {
                                text-align:left;
                                }
@media screen and (max-width:1370px) {
        #block02 .inner p.balloon {
            top:-275px;
            right:-10px;
            width:clamp(150px,23.4375vw,200px);
            height:clamp(130.5px,20.390625vw,174px);
            font-size:clamp(17px,2.65625vw,25px);
            background:transparent url('../image/contents/top/balloon.png') center center / clamp(150px,23.4375vw,200px) clamp(130.5px,20.390625vw,174px) no-repeat;
            padding:clamp(30px,4.6875vw,40px) 0 0 0;
            }
}

@media screen and (max-width:1260px) {
        #block02 .inner ul {
            flex-direction:column;
            justify-content:flex-start;
            gap:30px;
            }
            #block02 .inner > ul > li {
                width:100%;
                padding:30px;
                }
                #block02 .inner ul li figure {
                    flex-direction:row;
                    align-items:flex-start;
                    gap:30px;
                    }
                    #block02 .inner ul li figure div {
                        flex-shrink:0;
                        width:30%;
                        max-width:306px;
                        min-width:220px;
                        max-height:300px;
                        }
                        #block02 .inner ul li figure div img {
                            width:100%;
                            max-width:306px;
                            height:auto;
                            }
                    #block02 .inner ul li figure figcaption {
                        text-align:left;
                        word-break:normal;
                        margin:-10px 0 0 0;
                        }
}

@media screen and (max-width:900px) {
#block02 {
    padding:clamp(50px,7.8125vw,100px) 0 0 0;
    }
    #block02 .inner {
        padding:0 0 clamp(30px,4.6875vw,70px) 0;
        }
        #block02 .inner > p:nth-of-type(1) {
            margin:0 auto clamp(30px,4.6875vw,50px) auto;
            }
        #block02 .inner p.balloon {
            top:-240px;
            right:-25px;
            width:clamp(150px,23.4375vw,200px);
            height:clamp(130.5px,20.390625vw,174px);
            font-size:clamp(17px,2.65625vw,25px);
            background:transparent url('../image/contents/top/balloon.png') center center / clamp(150px,23.4375vw,200px) clamp(130.5px,20.390625vw,174px) no-repeat;
            padding:clamp(30px,4.6875vw,40px) 0 0 0;
            }

            #block02 .inner ul li {
                padding:clamp(20px,6.25vw,30px);
                }
}

@media screen and (max-width:640px) {
                #block02 .inner ul li figure {
                    flex-direction:column;
                    gap:30px;
                    }
                    #block02 .inner ul li figure div {
                        flex-shrink:0;
                        width:100%;
                        max-width:initial;
                        min-width:initial;
                        max-height:initial;
                        }
                        #block02 .inner ul li figure div img {
                            max-width:initial;
                            }
                    #block02 .inner ul li figure figcaption {
                        text-align:center;
                        }
}


/* ----------------------------------------------------------------------------------------------------
    block03
---------------------------------------------------------------------------------------------------- */
#block03 {
    background:#ffffff url('../image/contents/top/bg02.jpg') center top repeat;
    border-top:5px solid #757166;
    padding:100px 0 0 0;
    }
    #block03 h2 {
        }
    #block03 h2::before {
        background:#757166 !important;
        }
        #block03 h2 span {
            color:#afada5 !important;
            }
    #block03 .inner_wide {
        background:#757166;
        margin:233px auto 0 auto !important;
        padding:70px 0;
        }
        #block03 .inner_wide > ul {
            position:relative;
            display:flex;
            justify-content:space-between;
            gap:50px;
            width:100%;
            max-width:1200px;
            margin:-253px auto 0 auto;
            list-style:none;
            }
        #block03 .inner_wide > ul::after {
            content:"";
            position:absolute;
            right:0;
            bottom:-70px;
            left:0;
            display:block;
            width:1px;
            height:calc(100% - 113px);
            background:#bcb9b1;
            margin:0 auto;
            }
            #block03 .inner_wide > ul > li {
                width:calc((100% - 100px) / 2);
                }
                #block03 .inner_wide > ul > li figure {
                    display:flex;
                    flex-direction:column;
                    gap:40px;
                    }
                    #block03 .inner_wide > ul > li figure div {
                        width:100%;
                        max-height:366px;
                        }
                        #block03 .inner_wide > ul > li figure div img {
                            width:100%;
                            max-width:550px;
                            height:auto;
                            }
                            #block03 .inner_wide > ul > li figure figcaption {
                                text-align:left;
                                }
                                #block03 .inner_wide > ul > li figure figcaption dl {
                                    display:flex;
                                    flex-direction:column;
                                    gap:10px;
                                    }
                                    #block03 .inner_wide > ul > li figure figcaption dl dt {
                                        color:#ffffff;
                                        font-size:145%;
                                        font-weight:500;
                                        text-align:left;
                                        }
                                    #block03 .inner_wide > ul > li figure figcaption dl dd {
                                        color:#ffffff;
                                        text-align:left;
                                        }
                                        #block03 .inner_wide > ul > li figure figcaption dl dd > ul {
                                            list-style:none;
                                            }
                                            #block03 .inner_wide > ul > li figure figcaption dl dd > ul li {
                                                text-indent:-1em;
                                                padding:0 0 0 1em;
                                                list-style:none;
                                                }
                                            #block03 .inner_wide > ul > li figure figcaption dl dd > ul li::before {
                                                content:"・";
                                                }

@media screen and (max-width:900px) {
#block03 {
    padding:clamp(50px,7.8125vw,100px) 0 0 0;
    }
    #block03 .inner_wide {
        margin:0 auto !important;
        padding:clamp(30px,9.375vw,70px) 0;
        }
        #block03 .inner_wide > ul {
            flex-direction:column;
            gap:clamp(30px,9.375vw,50px);
            margin:0 auto;
            }
        #block03 .inner_wide > ul::after {
            display:none;
            }
            #block03 .inner_wide > ul > li {
                width:100%;
                }
            #block03 .inner_wide > ul > li:nth-of-type(1) {
                border-bottom:1px solid #bcb9b1;
                padding:0 0 clamp(30px,9.375vw,50px) 0;
                }
                #block03 .inner_wide > ul > li figure {
                    gap:30px;
                    }
                    #block03 .inner_wide > ul > li figure div {
                        width:100%;
                        max-height:366px;
                        text-align:center;
                        }
}


/* ----------------------------------------------------------------------------------------------------
    mailform
---------------------------------------------------------------------------------------------------- */
#mailform {
    border-top:5px solid #e0d7c4;
    padding:100px 0 0 0;
    }
    #mailform .inner {
        }
        #mailform .inner > p:nth-of-type(1) {
            text-align:center;
            word-break:keep-all;
            margin:0 auto 50px auto;
            }
        #block01 .inner .campaign {
            max-width:1210px;
            margin:0;
            }

    #mailform .inner_wide {
        background:#e0d7c4;
        margin:70px auto 0 auto !important;
        padding:70px 0;
        }
        #mailform .inner_wide .container {
            display:flex;
            justify-content:space-between;
            width:100%;
            max-width:1200px;
            background:#ffffff;
            margin:0 auto;
            }
            #mailform .inner_wide .container form {
                width:100%;
                padding:50px;
                }
                #mailform .inner_wide .container form table {
                    width:100%;
                    margin:20px 0 0 0;
                    }
                    #mailform .inner_wide .container form tbody {
                        }
                        #mailform .inner_wide .container form tbody tr {
                            }
                            #mailform .inner_wide .container form tbody tr th,
                            #mailform .inner_wide .container form tbody tr td {
                                padding:15px 0;
                                }
                            #mailform .inner_wide .container form tbody tr th {
                                width:32.5%;
                                padding:0 20px 0 0;
                                }
							    #mailform .inner_wide .container form tbody tr th span.icon_required {
                                    /*
                                    float:right;
								    display:inline-block;
                                    width:60px;
                                    height:30px;
                                    color:#ffffff;
                                    font-size:90%;
                                    font-weight:500;
                                    text-align:center;
                                    line-height:30px;
                                    background:#ed3737;
								    margin:0 0 0 20px;
                                    */
                                    float:right;
								    display:inline-block;
                                    height:30px;
                                    color:#ed3737;
                                    font-size:70%;
                                    font-weight:500;
                                    text-align:center;
                                    line-height:30px;
								    margin:0 0 0 10px;
								    }
							    #mailform .inner_wide .container form tbody tr td div {
                                    margin:10px 0 0 0;
                                    }
							    #mailform .inner_wide .container form tbody tr td div:nth-of-type(1) {
                                    margin:0;
                                    }
							        #mailform .inner_wide .container form tbody tr td div span {
                                        }
							        #mailform .inner_wide .container form tbody tr td div input {
                                        margin:0 5px 0 10px;
                                        }
							    #mailform .inner_wide .container form tbody tr td ul {
                                    gap:5px 10px;
                                    letter-spacing:0;
                                    list-style:none;
                                    }
							        #mailform .inner_wide .container form tbody tr td ul li:nth-of-type(odd) {
                                        width:50%;
		                                }
							        #mailform .inner_wide .container form tbody tr td ul li:nth-of-type(even) {
                                        width:calc(50% - 10px);
                                        }
							    #mailform .inner_wide .container form tbody tr td p {
                                    margin:10px 0 15px 0;
                                    }
                #mailform .inner_wide .container form .button {
                    margin:30px auto 0 auto !important;
                    }

            #mailform .inner_wide .container > dl {
                width:400px;
                background:#757166;
                padding:50px;
                }
                #mailform .inner_wide .container > dl > dt {
                    color:#ffffff;
                    word-break:keep-all;
                    }
                    #mailform .inner_wide .container > dl > dt span {
                        display:inline-block;
                        font-size:23px;
                        font-weight:700;
                        }
                #mailform .inner_wide .container > dl > dd {
                    color:#ffffff;
                    }
                    #mailform .inner_wide .container > dl > dd .tel {
                        height:32px;
                        line-height:32px;
                        margin:20px 0 30px 0;
                        }
                        #mailform .inner_wide .container > dl > dd .tel a {
                            display:inline-block;
                            color:#ffffff;
                            font-size:33px;
                            font-weight:900;
                            line-height:32px;
                            letter-spacing:0.06em;
                            }
                        #mailform .inner_wide .container > dl > dd .tel a::before {
                            content:"";
                            display:inline-block;
                            width:32px;
                            height:32px;
                            color:#ffffff;
                            line-height:32px;
                            background:transparent url('../image/contents/top/icon_tel.png') left bottom no-repeat;
                            margin:0 12px 0 0;
                            }
                    #mailform .inner_wide .container > dl > dd .address {
                        word-break:keep-all;
                        }
                    #mailform .inner_wide .container > dl > dd .website {
                        word-break:keep-all;
                        margin:20px 0 0 0;
                        }
                        #mailform .inner_wide .container > dl > dd .website a {
                            color:#ffffff;
                            text-decoration:underline;
                            }
                        #mailform .inner_wide .container > dl > dd .website a:hover {
                            text-decoration:none;
                            }
                    #mailform .inner_wide .container > dl > dd dl {
                        margin:20px 0 0 0;
                        }
                        #mailform .inner_wide .container > dl > dd dl > dt {
                            font-weight:bold;
                            }
                        #mailform .inner_wide .container > dl > dd dl > dd {
                            font-size:90%;
                            }
                            #mailform .inner_wide .container > dl > dd dl > dd ul {
                                list-style:none;
                                margin:0;
                                }
                                #mailform .inner_wide .container > dl > dd dl > dd ul li {
                                    }
                    #mailform .inner_wide .container > dl > dd iframe {
                        margin:50px 0 -8px 0 !important;
                        padding:0 !important;
                        }

@media screen and (max-width:1260px) {
        #mailform .inner_wide .container {
            flex-direction:column;
            }
            #mailform .inner_wide .container form {
                padding:clamp(30px,9.375vw,50px) clamp(30px,9.375vw,50px) 50px clamp(30px,9.375vw,50px);
                }

            #mailform .inner_wide .container > dl {
                width:100%;
                padding:clamp(30px,9.375vw,50px);
                }
                    #mailform .inner_wide .container > dl > dd iframe {
                        width:100%;
                        height:300px;
                        }
}
@media screen and (max-width:900px) {
#mailform {
    padding:clamp(50px,7.8125vw,100px) 0 0 0;
    }
        #mailform .inner > p:nth-of-type(1) {
            margin:0 auto clamp(30px,9.375vw,50px) auto;
            }
    #mailform .inner_wide {
        margin:clamp(30px,9.375vw,70px) auto 0 auto !important;
        padding:clamp(30px,9.375vw,70px) 0;
        }
            #mailform .inner_wide .container form {
                padding:clamp(20px,6.25vw,30px) clamp(20px,6.25vw,30px) clamp(30px,9.375vw,50px) clamp(20px,6.25vw,30px);
                }
                #mailform .inner_wide .container form .button {
                    margin:clamp(10px,3.125vw,30px) auto 0 auto !important;
                    }

            #mailform .inner_wide .container > dl {
                padding:clamp(20px,6.25vw,30px);
                }
                    #mailform .inner_wide .container > dl > dd .tel {
                        margin:clamp(15px,4.6875vw,40px) 0;
                        }
                    #mailform .inner_wide .container > dl > dd iframe {
                        margin:clamp(20px,6.25vw,50px) 0 -8px 0 !important;
                        }
}

@media screen and (max-width:860px) {
                #mailform .inner_wide .container form table {
                    width:100%;
                    margin:20px 0 0 0;
                    }
                    #mailform .inner_wide .container form tbody {
                        display:flex;
                        flex-direction:column;
                        }
                        #mailform .inner_wide .container form tbody tr {
                            display:flex;
                            flex-direction:column;
                            }
                            #mailform .inner_wide .container form tbody tr th,
                            #mailform .inner_wide .container form tbody tr td {
                                display:block;
                                width:100%;
                                padding:15px 0;
                                }
                            #mailform .inner_wide .container form tbody tr th {
                                padding:15px 0 0 0;
                                }
							    #mailform .inner_wide .container form tbody tr th span.icon_required {
                                    position:relative;
                                    top:-1px;
                                    float:none;
								    }
}

@media screen and (max-width:640px) {
							        #mailform .inner_wide .container form tbody tr td div span {
                                        display:block;
                                        }
							        #mailform .inner_wide .container form tbody tr td div input {
                                        margin:5px 5px 0 -5px;
                                        }
							    #mailform .inner_wide .container form tbody tr td ul {
                                    flex-direction:column;
                                    }
							        #mailform .inner_wide .container form tbody tr td ul li:nth-of-type(odd),
							        #mailform .inner_wide .container form tbody tr td ul li:nth-of-type(even) {
                                        width:100%;
                                        }
                    #mailform .inner_wide .container > dl > dt span {
                        font-size:clamp(17px,5.3125vw,23px);
                        }
                        #mailform .inner_wide .container > dl > dd .tel a {
                            font-size:clamp(18px,7.8125vw,22px);
                            line-height:32px;
                            }
                        #mailform .inner_wide .container > dl > dd .tel a::before {
                            width:clamp(20px,6.25vw,32px);
                            height:clamp(2px,6.25vw,32px);
                            background-size:clamp(20px,6.25vw,32px) clamp(20px,6.25vw,32px);
                            margin:0 clamp(7px,2.1875vw,12px) 0 0;
                            }
}