@import url(./default_body.css);

/* body */
body {
    background-color: #ffffff;
}

a {
    /* ※文字色は色別CSSで定義 */
}

/* telto */
@media screen and (min-width:768px) {
    /* PCではリンクなし */
    a[href^="tel:"] {
        pointer-events: none;
        text-decoration: none;
        color: #333333 !important;
    }

    .teltoon {
        display: none !important;
    }

    .teltooff {
        margin-left: 0px !important;
    }
}

@media screen and (max-width:767px) {
    /* スマホではリンクあり */
    a[href^="tel:"] {
    }

    .teltoon {
        margin-left: 0px !important;
    }

    .teltooff {
        display: none !important;
    }
}


/* メインビジュアル */
#mainvisual {
    width: 100%;
    /*background:url("../images/index/main01.jpg") no-repeat center #000000;
    /*background:url("../images/index/YTPlayer_yoko.png");*/
    z-index: 2;
    height: 100vh;
    min-width: 660px;
    min-height: 650px;
    position: relative;
    background-size: cover;
}

/*#logo {

    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 5;
    width: 220px;
    margin: 15px 0px 0px 20px;

}*/


#logo {
    position: absolute;
    top: 3%;
    z-index: 5;
    text-align: center;
    width: 100%;
}



.bousaiSite {
    vertical-align: middle;
    border-radius: 3px;
    float: right;
    margin: -30px 3px 0px auto;
    padding: 3px 0px 3px 0px;
    font-weight: bold;
    border: 1px solid #cccccc;
    width: 180px;
    text-align: center;
    background-color: #ffffff;
}

    .bousaiSite a {
        color: #333333 !important;
        text-decoration: none;
        padding: 0px 10px 0px;
    }
/* ランダム背景画像 */
#haikei {
    background-attachment: fixed; /* 背景画像の位置固定 */
    background-size: cover; /* 縦横比は保持して、背景領域を背景画像で完全に覆う */
}

.haikei01 {
    background: url("../images/index/main01.jpg") no-repeat center -1px;
}

.haikei02 {
    background: url("../images/index/main02.jpg") no-repeat center -1px;
}

.haikei03 {
    background: url("../images/index/main03.jpg") no-repeat center -1px;
}

.haikei04 {
    background: url("../images/index/main04.jpg") no-repeat center -1px;
}

.haikei05 {
    background: url("../images/index/main05.jpg") no-repeat center -1px;
}



/*:::::::::::::::::::::::::
 * ヘッダー
 *::::::::::::::::::::::::*/
#headerMenu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    max-width: 325px;
    height: 100%;
    z-index: 51;
}

    #headerMenu img {
        vertical-align: top;
    }

.headMenuTtl {
    font-size: 14px;
    color: #333333;
    padding: 6px 0px 0px 0px;
}

/* Foreign */
#foreign a {
    background: rgba(0, 0, 0, 0) url("../images/top1/icon_foreign.png") no-repeat scroll 0 6px;
    padding: 5px 0px 0px 28px;
    line-height: 22px;
}

.select-box01 select {
    float: left;
    width: 160px;
    padding: 2px;
    margin: 7px 0px 0px 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #999;
    background: #eee;
    background: url("../images/top1/arrow_gray.png") right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#F7F7F7 100%);
    background: url("../images/top1/arrow_gray.png") right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#F7F7F7 100%);
    background-size: 26px, 24px;
}

.select-box01 {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 170px;
    padding: 10px 0px 0px 0px;
    right: 20px;
}


    .select-box01 .dropmenu {
        *zoom: 1;
        list-style-type: none;
        width: 100%;
        margin: 5px auto;
        padding: 0;
        border: solid 5px #788DA4;
        background: #ffffff;
    }

        .select-box01 .dropmenu img {
            padding-top: 5px;
        }

        .select-box01 .dropmenu:before, .dropmenu:after {
            content: "";
            display: table;
        }

        .select-box01 .dropmenu:after {
            clear: both;
        }

        .select-box01 .dropmenu ul {
            border: 1px solid #788DA4;
        }

        .select-box01 .dropmenu li {
            position: relative;
            width: 100%;
            float: left;
            margin: 0;
            padding: 0px;
            text-align: center;
        }

            .select-box01 .dropmenu li a {
                display: block;
                margin: 0;
                padding: 3px 10px;
                text-decoration: none;
                font-size: 14px;
                height: 20px;
            }

            .select-box01 .dropmenu li ul {
                list-style: none;
                position: absolute;
                z-index: 9999;
                top: 100%;
                left: 0;
                margin: 0;
                padding: 0;
            }

                .select-box01 .dropmenu li ul li {
                    width: 100%;
                    background: #ffffff;
                }

                    .select-box01 .dropmenu li ul li a {
                        padding: 5px 5px;
                        border-top: 1px solid #575757;
                        background: #ffffff;
                    }

                        .select-box01 .dropmenu li ul li a.topsub {
                            border-top: none !important;
                        }

            .select-box01 .dropmenu li a:hover {
                background: #eff0f2;
            }

        .select-box01 .dropmenu ul img {
            margin-left: 3px;
        }

    /* Foreign Language メニュー表示 */
    .select-box01 #normal li ul {
        left: -1000em;
    }

    .select-box01 #normal li:hover ul,
    .select-box01 #normal ul.focused {
        left: 0em;
        width: 170px;
    }

/*:::::::::::::::::::::::::
 * メニュー 
 *::::::::::::::::::::::::*/
#menuBg {
    max-width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 0px auto 0px auto;
    width: auto;
    padding: 5px 0px;
}

.menu {
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap:wrap;
}

.menuitem {
    padding:10px;

}

.menuitem a {
    text-decoration: none;
    font-weight: bold;
    color: #043c78;
    font-size: 1.3em;
}





/*:::::::::::::::::::::::::
 * 緊急情報
 *::::::::::::::::::::::::*/
#main {
    max-width: 1200px;
    margin: 25px auto auto 360px;
    z-index: 1500;
    position: relative;
}

#kinkyu {
    width: 95%;
    border: solid 1px #D80C18;
    background: #FCE4DF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    position: absolute;
    top: 60px;
}

#kinkyuTtl {
    padding: 10px 0px 10px 10px;
    background-color: #D0121B;
}

    #kinkyuTtl a {
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.1em;
    }

#kinkyu ul {
    padding: 5px 10px;
}

    #kinkyu ul li {
        padding: 5px 0px;
    }

p.koshin {
    font-size: 0.9em;
    float: left;
    padding: 0px 15px 0px 0px;
}

.k_naiyo {
    float: left;
}

p.nodata {
    padding: 7px 10px;
}


#mainmenu {
    max-width: 100%;
    margin: 0px auto;
    z-index: 1500;
    position: absolute;
    bottom: 0;
    width: 100%;
}
/*:::::::::::::::::::::::::
 * 翻訳メニュー
 *::::::::::::::::::::::::*/

#foreignSP {
    display: none;
    width: 96%;
    margin: 10px auto 5px auto;
}

    #foreignSP .plus {
        background: url("../images/top1/btn_plus.png") 98% center no-repeat #ffffff;
        background-size: 25px 25px;
    }

    #foreignSP .minus {
        background: url("../images/top1/btn_minus.png") 98% center no-repeat #ffffff;
        background-size: 25px 25px;
    }

        #foreignSP .plus a,
        #foreignSP .minus a {
            display: block;
            height: 100%;
            padding: 15px 10px 15px 20px;
            font-weight: bold;
            text-decoration: none;
            margin: 0px;
        }

    #foreignSP .dspMode {
        display: block !important;
        border: 1px solid #417038 !important;
        background-color: #417038;
    }

#foreignTitle {
    width: 100%;
    margin: 1px auto;
}

    #foreignTitle a {
        border: 1px solid #417038;
        padding: 10px 8px 10px 12px !important;
        color: #417038;
        display: block;
        height: 100%;
        font-weight: bold;
    }

#foreignDsp {
    width: 99%;
    margin: 0px auto;
    padding: 2px 0px 6px 0px;
    display: none;
}

    #foreignDsp ul {
        width: 100%;
        margin: 0px auto;
    }

        #foreignDsp ul li {
            padding: 0px;
            width: 48%;
            margin: 2px 0px 0px 4px !important;
            float: left;
            background: url("../images/foreign_ya.png") no-repeat 95% center #ffffff;
            background-size: 10px 13px;
            border: 1px solid #3B5998;
        }

            #foreignDsp ul li a {
                width: 70%;
                line-height: 2.4em;
                display: block;
                padding: 0px !important;
                margin-left: 15px !important;
            }

/*:::::::::::::::::::::::::
 * サイト内検索
 *::::::::::::::::::::::::*/
#mainSearch03 {
    width: 40%;
    padding: 0px;
    position: absolute;
    top: 17%;
    right: 0%;
}


input.searchBox {
    height: 20px;
    width: 74%;
    margin: 15px 0px 15px 15px;
    vertical-align: middle;
    letter-spacing: normal;
    border: solid 1px #CCCCCC;
    padding: 3px 2px;
    font-size: 13px;
}

input.btnSearch {
    margin: 15px 15px 15px 0px;
    padding: 0px;
    vertical-align: middle;
    letter-spacing: normal;
}

/* 問合せ先 */
#footerBg {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
}

#siteinfo {
    padding: 0px 0px 0px;
    font-size: 0.9em;
    margin: 0px auto;
}

#toiawase {
    margin: 0px auto 0px auto;
    width: calc(100% - 10px);
    text-align: center;
}

.naiyou {
    width: calc(100% - 2px);
    padding: 0px 0px 5px;
    font-size: 1.3em;
}

#toiawasenaiyou {
}

.logo_s {
    margin: 0px;
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px 0px 0px;
}

#toiawase span {
    /*font-size:1.6em;
    font-weight:bold;
    padding-right:20px;*/
}

#toiawasenaiyou h4 {
    font-size: 2.7em;
}

/* テキストリンク */
ul#footertextlink {
    letter-spacing: -.4em;
    border: solid 1px #CCCCCC;
    padding: 10px 0px;
    float: left;
    margin: 15px auto 5px;
    background: #FFFFFF;
    text-align: center;
    width: calc(100% - 4px);
}

    ul#footertextlink li {
        letter-spacing: normal;
        display: inline-block;
        border-right: solid 1px #CCCCCC;
        padding: 0px 10px;
    }

        ul#footertextlink li:last-child {
            border: none;
        }

/* ページトップへ */
#pagetop {
    position: absolute;
    top: 0px;
    right: 0px;
}
/* copyright */
#cp {
    margin: 0px auto;
    font-size: 0.7em;
    padding: 3px 0px 5px;
    text-align: center;
    background: #80CBDB;
    color: #333333;
}


/* レスポンシブ対応 */
@media screen and (max-width:1200px) {
    .select-box01 {
        right: 20px;
    }

    #menuBg {
        width: 100%;
        margin: 0px auto 0px auto;
    }

    .menu {
        padding: 0px 0px;
    }

    #main {
        padding: 0px 10px;
    }

    #siteinfo {
    }
}

@media screen and (max-width:1170px) {
    input.searchBox {
        width: 70%;
    }
}

@media screen and (max-width:1026px) {
    #main {
        max-width: 1200px;
        margin: 25px auto auto auto;
        z-index: 1500;
        position: relative;
    }

    #kinkyu, #search {
        float: none;
        width: auto;
        width: calc(100% - 26px);
        top: 200px;
    }

    #headerMenu {
        width: 100%;
        max-width: 100%;
    }

    #mainSearch03 {
        width: 80%;
        float: none;
        letter-spacing: -.4em;
        padding: 5px;
        margin: 135px auto;
        text-align: center;
        top: 30%;
        left: 0px;
        position: absolute;
    }

    #siteinfo {
    }
}

/* スマホ用 */
@media screen and (max-width:767px) {
    #foreignSP {
        display: block;
    }

    #main {
        margin: 10px auto;
    }

    #wrapper_mbYTP_bgmv {
        display: none;
    }

    .teltoon a {
        color: #333333;
    }


    #mainvisual {
        width: 100%;
        min-width: inherit;
        min-height: 300px;
        position: relative;
        height: 100vh;
    }

    .menu ul li a {
        font-weight: bold;
        font-size: 1em;
        text-decoration: none;
        text-align: center;
        padding: 10px 0px;
    }

    #logo {
        position: absolute;
        top: 2%;
        left: 0%;
        z-index: 5;
        margin: 0px auto auto;
    }

        #logo img {
        }

    #menuBg {
        max-width: 100%;
        margin: 0px auto 0px auto;
        width: auto;
        padding: 0px 0px;
    }

    .menuitem {
        width:100%;
        padding:10px 0px 10px 20px;
        border-bottom:1px solid #cccccc;
    }


    #siteinfo {
        background-image: none;
        padding-right: 0px;
        padding-left: 0px;
    }

    #toiawasenaiyou {
        padding-right: 10px;
        padding-left: 10px;
    }

    #pagetop img {
        width: 50px;
    }

    ul#footertextlink {
        padding: 0px;
        border: none;
        border-top: solid 1px #CCCCCC;
        border-left: solid 1px #CCCCCC;
    }

        ul#footertextlink li {
            width: 50%;
            padding: 0px;
            border-right: none;
            border-bottom: solid 1px #CCCCCC !important;
            background: url("../images/ya_enq.gif") no-repeat right 10px center;
        }

            ul#footertextlink li a {
                display: block;
                border-right: solid 1px #CCCCCC;
                padding: 10px 5px;
                text-decoration: none;
            }

    #cp {
        text-align: center;
        padding: 5px;
    }

    ul#footertextlink {
        text-align: left;
    }

    #toiawasenaiyou {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

/*:::::::::::::::::::::::::
 * webフォントカラー
 *::::::::::::::::::::::::*/
.my-green {
    color: #00623D
}

.my-white {
    color: #ffffff
}

.my-gold {
    color: #BFA536
}

.my-mint {
    color: #32BEBE
}

.my-red {
    color: #B7282E
}

.my-blue {
    color: #0099CC
}

.my-brown {
    color: #7b5315;
}

.my-deepblue {
    color: #043c78;
}

/* 背景動画のコントロールボタン */
div#controlArea {
    position: absolute;
    left: 15px;
    top: 25px;
    z-index: 999;
}

    div#controlArea a {
        color: #333333;
    }

        div#controlArea a.active {
            display: none;
        }

/* リダイレクトリンク */
div#redirectlink {
    font-size: 0.9em;
    margin: 15px auto;
    line-height: 1.5em;
    display: none;
}

#sdgs {
    text-align: center;
    position: absolute;
    max-width: 300px;
    bottom: 210px;
    right: 65px;
    background-color: #ffffff;
}


#covid19 {
    color: #ffffff;
    text-align: center;
    position: absolute;
    max-width: 300px;
    bottom: 130px;
    right: 65px;
    background-color: #D0121B;
    padding:10px;
}

#covid19 a{
    color: #ffffff;
    text-decoration:none;
}

@media screen and (max-width:767px) {
    #covid19 {
        text-align: center;
        position: static;
        max-width: 100%;
        bottom: 130px;
        right: 20px;
        background-color: #D0121B;
        padding: 10px;
        margin: 0px auto;
    }

    #sdgs {
        text-align: center;
        position: static;
        max-width: 100%;
        bottom: 210px;
        background-color: #ffffff;
        padding: 0px;
        margin: 0px auto;
    }

    #sdgs img{
       height:70px;
    }

}