@charset "utf-8";
/* CSS Document */
/*各末端2021冬
スマートフォン：320px〜540px
タブレット：600px〜1024px
PC：1,280px〜*/
/**/
/*パソコン対応（基準）*/
body {
        background-color: white;
        width: 100%;
        font-size: 16px;
        /*line-height: 120%;/*行間の値（正確には、フォントサイズと上下の余白合計値）*/
        margin: 0 auto;
        padding: 0;
        font-family: Helvetica Neue, Helvetica, Arial, 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, Meiryo, sans-serif;
        overflow-wrap: break-word;
    word-wrap: break-word;
}
main {
        margin-bottom: 100px;
}
a {
        color: black;
}
a:hover {
        opacity: 0.5;
}
.blue {
    color: #0F85C3;
}
.movie-flexbox {
    width: 70%;
    margin: 0 auto;
    margin-bottom: 50px;
}
.movie {
    width: 430px;
    height: auto;
}
.btn-gNav {
        margin: 0;
        padding: 0;
}
#navigation-flex {
        background-color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        font-family: Helvetica;
        font-weight: bold;
        display: flex;
        position: fixed;
        width: 100%;
        margin: 0 auto;
        top: 0;
        text-align: center;
        z-index: 2147483646;
        line-height: 30%;
        padding-bottom: 5px;
}
#navigation-flex p {
        letter-spacing: 0.05em;
}
#navigation-flex span {
        font-size: 14px;
        color: red;
        line-height: 40px;
        top: 0;
}
.navigation-icon-h {
        margin-top: 0;
        margin-left: 115px;
        margin-bottom: 0;
}
.navigation-icon {
        margin-top: 0;
        margin-left: 30px;
        margin-bottom: 0;
}
#sns-flex {
        display: flex;
    justify-content: flex-end;
        width: 30%;
        margin-left: auto; /*右寄せ*/
}
#sns-flex p {
        width: 30px;
        height: auto;
        margin: 15px;
        margin-top: 25px;
}
.pagetitle-logo-flex {
        display: flex;
        width: 100%;
        margin: 0 auto;
        padding-top: 90px;
}
.pagetitle-logo-flex2 {
        display: block;
        width: 100%;
        margin: 0 auto;
}
.pagetitle {
        width: 500px;
        font-size: 28px;
        margin-left: 115px;
        margin-top: 60px;
        text-decoration: underline;
}
.pagetitle2 {
        width: 500px;
        font-size: 28px;
        margin-left: 115px;
        margin-top: 0;
        text-decoration: underline;
}
.logo-mini {
        display: flex;
        width: 300px;
        ;
        margin-left: auto; /*右寄せ*/
}
.logo-mini img {
        width: auto;
        height: 60px;
        padding-right: 105px; /*右寄せ*/
}
h3 {
        font-size: 28px;
}
footer {
        width: 450px;
        margin: 10px auto;
        font-size: 16px;
}
.logo-mobile {
        display: none;
}
.tenji-map {
    width: 80%;
    max-width: 600px;
}
/*レスポンシブウェブデザイン は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。
加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。*/
/*スマホ・タブレット対応*/
@media screen and (max-width: 1024px) {
        /*コーディング時は320pxで表示崩れ（横スクロールなど）が無いか確認しながら行うのが確実です。*/
        body {
                font-size: 14px;
                overflow-wrap: break-word;
        }
    .movie {
    width: 90%;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 30px;
}
    .movie-flexbox {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 50px;
}
        #navigation-flex {
                background-color: rgba(255, 255, 255, 0.6);
                font-size: 14px;
                font-family: Helvetica;
                font-weight: bold;
                display: flex;
                position: fixed;
                width: 100%;
                margin: 0 auto;
                top: 0;
                text-align: center;
                z-index: 2147483646;
                line-height: 30%;
        }
        #navigation-flex p {
                /* letter-spacing: 0.05em;*/
        }
        #navigation-flex span {
                color: white;
                /*font-size: 14px;
    
    line-height: 40px;
    top: 0;*/
        }
        .navigation-icon-h {
                margin-top: 0;
                margin-left: 0;
                margin-bottom: 0;
        }
        .navigation-icon {
                margin-top: 0;
                margin-left: 0;
                margin-bottom: 0;
        }
        #sns-flex {
                display: flex;
                flex-direction: row;
                justify-content: center;
                width: 100%;
                margin-top: 50px;
        }
        #sns-flex p {
                width: 20px;
                height: auto;
                margin: 10px;
        }
        .pagetitle-logo-flex {
                display: block;
                width: 100%;
                margin: 0 auto;
                padding-top: 45px;
        }
        .pagetitle-logo-flex2 {
                display: block;
                width: 100%;
                margin: 0 auto;
                margin-top: 80px;
        }
        .pagetitle {
                width: 90%;
                font-size: 28px;
                margin-left: 0;
                margin-top: 60px;
                text-decoration: underline;
                margin: 0 auto;
        }
        .pagetitle2 {
                width: 90%;
                font-size: 28px;
                margin-left: 0;
                margin-top: 0;
                text-decoration: underline;
                margin: 0 auto;
        }
        .logo-mini {
                display: none;
                /*display: block;
                width: 90%;
                margin-left: 0;
                margin: 20px auto;*/
        }
        .logo-mini img {
                display: none;
                /*width: auto;
                height: 60px;
                padding-right: 10px;
            margin-left: auto; /*右寄せ*/
        }
        h3 {
                font-size: 28px;
        }
        footer {
                width: 90%;
                margin: 0;
                text-align: center;
                font-size: 8px;
        }
        /*ハンバーガー*/
        #hamburger .btn-gNav {
                position: fixed;
                top: 20px;
                right: 20px;
                width: 30px;
                height: 24px;
                z-index: 3;
                box-sizing: border-box;
                cursor: pointer;
                -webkit-transition: all 400ms;
                transition: all 400ms;
        }
        #hamburger .btn-gNav span {
                position: absolute;
                width: 100%;
                height: 4px;
                background: red;
                border-radius: 10px;
                -webkit-transition: all 400ms;
                transition: all 400ms;
        }
        #hamburger .btn-gNav span:nth-child(1) {
                top: 0;
        }
        #hamburger .btn-gNav span:nth-child(2) {
                top: 10px;
        }
        #hamburger .btn-gNav span:nth-child(3) {
                top: 20px;
        }
        #hamburger .btn-gNav.open span:nth-child(1) {
                background: red;
                top: 6px;
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                transform: rotate(-45deg);
        }
        #hamburger .btn-gNav.open span:nth-child(2), #hamburger .btn-gNav.open span:nth-child(3) {
                top: 6px;
                background: red;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                transform: rotate(45deg);
        }
        #gNav {
                position: fixed;
                top: 0;
                right: -100%;
                width: 100%;
                height: 100%;
                background: white;
                font-size: 16px;
                box-sizing: border-box;
                z-index: 2;
                padding-top: 0;
                transition: .3s;
        }
        #gNav.open {
                right: 0px;
        }
        #gNav .gNav-menu {
                background-color: white;
                font-family: Helvetica Neue, Helvetica, Arial, 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, Meiryo, sans-serif;
                width: 100%;
                height: 100%;
                display: flex;
                margin: 0;
                flex-direction: column;
                text-align: center;
                align-items: center;
                justify-content: center;
        }
        #gNav .gNav-menu p {
                display: block;
                padding-top: 0;
                padding-bottom: 10px;
        }
        #gNav .gNav-menu p a {
                color: black;
                text-decoration: none;
        }
        /*ボックス*/
        .section {
                max-width: 599px;
                margin: 0 auto;
                padding: 100px 20px 1000px;
        }
        ._a {
                idth: 300px;
                margin: 0 auto;
        }
        ._a a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding: 2.0em 1.0em;
                border: 1px solid #222222;
                background: linear-gradient(to right, #ffffff 50%, #222222 50%);
                background-size: 200% auto;
                color: #222222;
                font-size: 12px;
                text-decoration: none;
                text-align: center;
                transition: .3s;
                position: relative;
        }
        ._a a:after {
                content: "";
                position: absolute;
                right: -5px;
                bottom: -5px;
                width: 100%;
                height: 100%;
                border-right: 1px solid #0F85C3;
                border-bottom: 1px solid #0F85C3;
        }
        ._a a:hover {
                color: #0F85C3;
                background-position: -100% 0;
        }
        /*ハンバーガー↑*/
        .logo-mobile {
                display: block;
                width: 90%;
                height: auto;
                margin: 0 auto;
                padding-top: 10px;
        }
        .logo-mobile img {
                width: 80%;
        }
}