@charset "UTF-8";

body.top_page {
    background-image: url(img/back_top.png);
    background-size: 100%;
}
@media screen and (max-width: 780px) {
    body.top_page {
        background-image: none;
        background-color: #abf;
    }
}

.dbar_1,
.dbar_2,
.dbar_3 {
    display: block;
    margin: 0 auto 6px;
    height: 4px;
}

.dbar_1 {
    width: 60%;
}
.dbar_2 {
    width: 75%;
}
.dbar_3 {
    width: 85%;
}
@media screen and (max-width: 780px) {
    .dbar_1,
    .dbar_2,
    .dbar_3 {
        display: none;
    }
}

#top_title {
    margin: 0 auto;
    width: 100%;
    min-width: 760px;
    max-width: 900px;
    height: 284px;
    background: #fff;
    background: linear-gradient(to bottom, #fff 0%, #2c1c70 100%);
    box-shadow: 4px 4px 8px 0 #66c;
}
@media screen and (max-width: 780px) {
    #top_title {
        min-width: 320px;
        max-width: 760px;
        box-shadow: none;
    }
}
@media screen and (max-width: 400px) {
    #top_title {
        display: none;
    }
}

#ttl_title_s {
    display: none;
}
@media screen and (max-width: 400px) {
    #ttl_title_s {
        display: block;
        color: #000080;
    }
}

#top_panel {
    height: 12px;
    background: linear-gradient(to bottom, #ddf 0%, #88e 100%);
}

#top_logo {
    height: 0;
    opacity: 0;
    background: #9af;
    background: linear-gradient(to bottom, #9af 0%, #bcf 100%);
}

#name_panel {
    position: relative;
    height: 36px;
    background: #ddf;
    background: linear-gradient(to bottom, #ddf 0%, #88e 100%);
}

#ttl_name {
    padding-top: 4px;
    color: #000080;
    font-size: 20px;
}

#search_1,
#search_2,
#search_3,
#search_4,
#search_5 {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.deco_div {
    margin: 0;
    height: 40px;
}

.top_main_div {
    margin: 0 auto;
    width: 100%;
    min-width: 760px;
    max-width: 900px;
    padding: 20px 0 0;
}
@media screen and (max-width: 780px) {
    .top_main_div {
        min-width: 320px;
        max-width: 760px;
    }
}
@media screen and (max-width: 400px) {
    .top_main_div {
        padding: 8px 0 0;
    }
}

.main_container {
    display: flex;
    gap: 12px;
    padding: 8px;
    align-items: flex-start;
    width: 100%;
}

.main_content {
    flex: 1;
    min-width: 0;
}

#top_main_frame {
    margin: 0 auto;
    width: 100%;
    min-width: 760px;
    max-width: 900px;
    padding: 8px;
    border-style: solid;
    border-width: 1px;
    border-color: #66f;
    background-color: #a8b8f8;
    background-image: url(img/back_box.png);
    box-shadow: 4px 4px 8px 0 #66c;
}
@media screen and (max-width: 780px) {
    #top_main_frame {
        width: 100%;
        min-width: 320px;
        max-width: 760px;
        padding: 0;
        border-width: 0;
        background-color: #abf;
        background-image: none;
        box-shadow: none;
    }
}

#contact {
    display: none;
    margin: 8px;
}
@media screen and (max-width: 780px) {
    #contact {
        display: block;
    }
}

.hd_box {
    margin-bottom: 4px;
    padding: 2px;
    border-radius: 4px;
    box-shadow: 1px 1px 8px 0 #66c;
}

#extra_headline,
#extra_headline2 {
    background-color: #eb9;
}

#main_headline {
    background-color: #dda;
}

#warn_headline_ext,
#warn_headline {
    background-color: #daa;
}

#video_headline {
    background-color: #ace;
}

#etc_headline {
    background-color: #dad;
}

#help_headline {
    background-color: #aca;
}

#sub_headline {
    background-color: #99a;
}


#sideCell {
    flex: 0 0 220px;
}
@media screen and (max-width: 780px) {
    #sideCell{
        display: none;
    }
}

.sub_box {
    padding: 8px;
    background-color: #ccf;
    border-style: none;
    border-radius: 6px;
    box-shadow: 1px 1px 8px 0 #66c;
    text-align: left;
    line-height: 125%;
    font-size: 80%;
    white-space: nowrap;
}
.sns_box {
    margin: 0;
    height: 48px;
}

.top_line,
.top_line_r {
    line-height: 125%;
    font-size: 80%;
    text-align: left;
}

.top_line {
    padding: 0.2em 0.5em;
}

.top_line_r {
    padding: 3px 1em;
    text-align: right;
}

.top_info {
    margin-bottom: 0.25em;
    line-height: 150%;
}

.side_left {
    margin: 4px;
    float: left;
}

.side_right {
    margin: 8px;
    float: right;
}

.small_info_box {
    margin-bottom: 0.5em;
    padding-left: 1em;
    line-height: 125%;
    font-size: 84%;
}

.info_hdr {
    display: block;
    width: 100%;
    border-bottom: 1px solid #666;
}

.info_item {
    padding-left: 1em;
    line-height: 150%;
}


ul {
    margin: 0.5em 0;
    padding-left: 0;
}

.menu {
    width: 100%;
    list-style: none;
}

.menu>li {
    padding: 2px 4px;
    background-color: #8a8;
}

.menu>li>ul {
    display: none;
    background-color: #cec;
    list-style: none;
}

.menu>li>ul>li {
    margin: 0;
    padding: 3px 1em;
    background-color: #cec;
}

.drop_mark {
    font-size: 75%;
    color: #00a;
}

.item_hr {
    padding: 0;
    border-top: 1px solid #8a8;
}