.top .contents { width: auto;}

.top .contents article { float: none; width: auto; margin: 0 auto;}
.top section { max-width: 1024px; margin: 2em auto;}

.contents { padding-bottom: 0;}
div[class^="top_section_"] { padding: 0 0 30px;}

.dual { display: flex;}
.half_wrap { width: calc(50% - 15px); margin-left: 30px; }
.half_wrap:nth-child(2n-1) { margin-left: 0%;}
.half_wrap .container { margin-bottom: 30px;}
.half_wrap .container:last-of-type { margin-bottom: 0;}

/* 01 */
div.top_section_01 { padding: 20px 0;}
.emergency { max-width: 1024px; margin: 0px auto;}
.emergency_news,
.emergency_item { display: flex; justify-content: flex-start; align-items: stretch;}
.emergency_news { width: 100%; margin-bottom: 0; padding-bottom: 0; background-color: #FBEDED; border: 3px solid #EC8688; border-radius: 0.3em 0.3em 0 0;}
.emergency_news > dt,
.emergency_news > dd { box-sizing: border-box; margin: 0; padding: 1em;}
.emergency_news > dt { padding-left: 2em; padding-right: 2em; background-color: #EC8688; font-weight: bold;}
.emergency_news > dd { flex-grow: 1;}
.emergency_news > dd p:last-child { margin-bottom: 0;}
.emergency_news ul { margin-bottom: 0; padding-left: 0;}
.emergency_news li { padding-top: 0.5em;}
.emergency_news li:first-child { padding-top: 0em;}
.emergency_list { padding-bottom: 0;}
.emergency_list .news { margin-bottom: 0; padding-bottom: 0;}
.emergency_list .news dd:last-of-type { border: none;}
.emergency_list .nodata { margin: 0; padding: 0; border: none;}
.emergency_item { margin-bottom: 0; padding: 0.4em; background-color: #FBEDED; flex-wrap: wrap; border-radius: 0 0 0.3em 0.3em;}
.emergency_item li a { position: relative; display: block; margin: 0.4em; padding: 0.7em 1em 0.6em 2.1em; text-decoration: none; background-color: #fff; border-radius: 0.3em;}
.emergency_item li a:before {
  position: absolute; display: block; content: ""; left: 0.8em; top:1.1em; transition-duration: 0.15s;
  border-top: 0.35em solid transparent;
  border-bottom: 0.35em solid transparent;
  border-left: 0.65em solid #DF3035;
  }
  
.emergency_item li a:hover:before,
.emergency_item li a:focus:before { left: 1.2em;}

/* 本文欄 */
.emergency .news + .txtbox { margin-top: 0.5em;}
.emergency .txtbox { padding-bottom: 0;}
/* 見出し */
.emergency .txtbox h2{ background:#DF3035;}
.emergency .txtbox h4:before { background: #DF3035;}
/* list */
.emergency .txtbox ul > li:before{border-left-color:#DF3035;} /* リストの色・形 */
/* table */
.emergency .txtbox table th,
.emergency .txtbox table td{border-color: #DF3035;} /* テーブル線の色 */
.emergency .txtbox table th{background: #DF3035;} /* THの色 */


/* 02 */
div.top_section_02 {}
.tabmenu { padding-bottom: 0;}
.tabmenu .menu { display: flex; justify-content: space-between; margin: 0; padding: 0; border-radius: 0.4em 0.4em 0 0;}
.tabmenu .menu li { width: 33.333%;}
.tabmenu .menu a { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0.5em; text-decoration: none; color: #000; text-align: center; background-color: #DEE7F1; transition-duration: 0.15s;}
.tabmenu .menu li.active a{ color: #fff; background-color: #296ACC;}
.tabmenu .menu a:hover,
.tabmenu .menu a:focus { color: #fff; background-color: #296ACC;}
.tabmenu .section { padding: 0;}
.tabmenu .section h2 { display: none;}
.tabmenu .division { padding: 10px; font-size: 0.85em; border: 10px solid #296ACC; border-radius: 0 0 0.4em 0.4em;}
.tabmenu .news { margin-bottom: 10px;}
.tabmenu ul.more li { width: calc(100% - 1em); margin-bottom: 0;}
.tabmenu ul.more a { width: 100%; font-size: 1.2em;}

.feedList ol { padding-left: 2.5em;}
.feedList ol li { margin-top: 1em;}

.theme h2 { padding-bottom: 5px;}
.theme_search { display: flex; flex-wrap: wrap; align-items: stretch; padding: 5px;}
.theme_search li { width: calc(33.333% - 10px);}
.theme_search li a { display: flex; justify-content: center; align-items: flex-end; height: 100%; padding: 72px 0 0 0; font-size: 0.9em; font-weight: bold;}
.theme_search li a:before { top: 0px; left: 0px; right: 0px; height: 72px; width: auto; background-size: auto;}

.administration { background-color: #D1E0F5; border-radius: 0.3em; padding-bottom: 0;}
.administration h2 { margin: 0; padding: 0.7em 0.5em; font-size: 1.1em; text-align: center;}
.administration h2 a { color: #000; text-decoration: none;}
.admin_content { display: flex; justify-content: space-between; align-items: center; margin: 0 10px; padding: 10px 5%; font-size: 0.85em; background-color: #fff;}
.admin_content ul { margin: 0 0 0 0.9em; overflow: visible;}
.admin_content li { margin: 0.5em 0;}
.admin_content li a { position: relative;}
.admin_content li a:before {
    position: absolute; display: block; content: ""; width: 0.9em; height: 0.9em; top: 0.2em; left: -1.5em;
    background: url(../img/arrow_common.png) center center no-repeat #296ACC;
    background-size: auto 60%;
    border-radius: 50%;
    transition-duration: 0.15s;
}
.admin_content li a:hover:before,
.admin_content li a:focus:before  { left: -1.2em; background-color: #18407A;}
.admin_content .location {}

.admin_banner { padding-bottom: 0;}
.admin_banner ul { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 10px 5px 0; padding: 0;}
.admin_banner li { margin: 0 6px 10px;}

.sub_menu { padding-bottom: 0;}
.sub_menu_banner { display: flex; justify-content: space-between; align-items: stretch; margin: 0; padding-bottom: 0;}
.sub_menu_banner li { width: 33.333%; margin-left: 20px;}
.sub_menu_banner li:first-of-type { margin-left: 0px;}
.sub_menu_banner a { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; text-decoration: none; height: 100%; padding: 40px 5px 5px; color: #000; border: 3px solid #888; border-radius: 0.3em;} 
.sub_menu_banner a:before { position: absolute; display: block; content: ""; top: 0px; left: 0px; right: 0px; height: 40px; background: center center no-repeat;}
.sub_menu_banner .sub_menu_01 a { background-color: #ECF3FD; border-color: #D7E7FB;}
.sub_menu_banner .sub_menu_02 a { background-color: #F7FCE4; border-color: #D7EF81;}
.sub_menu_banner .sub_menu_03 a { background-color: #FFEEEE; border-color: #DC949A;}
.sub_menu_banner .sub_menu_01 a:hover,
.sub_menu_banner .sub_menu_01 a:focus { background-color: #FAFCFE;}
.sub_menu_banner .sub_menu_02 a:hover,
.sub_menu_banner .sub_menu_02 a:focus { background-color: #FDFEFA;}
.sub_menu_banner .sub_menu_03 a:hover,
.sub_menu_banner .sub_menu_03 a:focus { background-color: #FFFBFB;}
.sub_menu_banner .sub_menu_01 a:before { background-image: url("../img/top_icon_qa.png");}
.sub_menu_banner .sub_menu_02 a:before { background-image: url("../img/top_icon_madoka.png");}
.sub_menu_banner .sub_menu_03 a:before { background-image: url("../img/top_icon_event.png");}
.sub_menu_banner span { display: block; width: 100%; text-align: center;}
.sub_menu_banner span.ja { font-size: 0.9em; font-weight: bold;}
.sub_menu_banner span.en { font-size: 0.6em;}

.paper { padding: 10px; text-align: center; background-color: #E4EEFA; border-radius: 0.3em;}
.paper h2 { margin-bottom: 1em; padding: 0.2em; font-size: 1.2em; background-color: #fff;}
.paper ul { display: flex; justify-content: space-between; align-items: stretch; margin: 1em auto 0; padding: 0;}
.paper li { width: calc(50% - 5px);}
.paper li a { display: block; padding: 0.7em 0.3em ; font-size: 0.9em; color: #000; text-decoration: none; background-color: #B1CEF1; border-radius: 0.3em; transition-duration: 0.15s;}
.paper li a:hover,
.paper li a:focus { background-color: #C4DAF4; box-shadow: inset 0px 0px 0px 2px #296ACC;}

.text_banner { padding-bottom: 0;}
.text_banner li { margin-bottom: 10px;}
.text_banner li:last-of-type { margin-bottom: 0px;}
.text_banner a { position: relative; display: block; background-color: #F0F4F9; padding: 1em 0.5em 1em 2em; font-size: 0.9em;}
.text_banner a:before {
  position: absolute; display: block; content: ""; left: 0.8em; top:1.45em; transition-duration: 0.15s;
  border-top: 0.25em solid transparent;
  border-bottom: 0.25em solid transparent;
  border-left: 0.5em solid #296ACC;
}
.text_banner a:hover:before,
.text_banner a:focus:before { left: 1.1em;}


/* 03 */
.top_section_03 { background-color: #A3C0ED; overflow: visible;}
.top_section_03 .wrap { overflow: visible;}
.top_section_03 h2 { display: flex; justify-content: center; align-items: center; padding-top: 1.5em;}
.top_section_03 h2 span { position: relative; font-size: 0.85em;}
.top_section_03 h2 span:before { position: absolute; display: block; content: ""; width: 62px; height: 102px; bottom: -10px; left: -82px; background: url("../img/top_icon_joe.png");}

.text_banner.picup_contents { display: flex; align-items: stretch; flex-wrap: wrap;}
.text_banner.picup_contents li { width: calc(20% - 10px); min-height: 4.5em; margin: 0px 5px 10px;}
.text_banner.picup_contents a { display: flex; align-items: center; height: 100%; border-radius: 0.3em;}
.text_banner.picup_contents a:before { top: 50%; margin-top: -0.25em;}


/*************************************************
 レスポンシブ　1024 + 20 
**************************************************/
@media screen and (min-width:0px) and (max-width:1044px) {
.top section { width: auto;}
  
  div[class^="top_section_"] { padding-left: 2%; padding-right: 2%; }
  
  .wrap.dual { display: block;}
  .half_wrap { width: auto; margin-left: 0; margin-right: 0;}
  
  .admin_banner ul { justify-content: flex-start;}
  
  .administration_other .half_wrap { width: calc( 50% - 10px); margin-left: 20px;}
  .administration_other .half_wrap:first-child { margin-left: 0;}
  
  .theme.container,
  .theme.container:last-of-type { margin-bottom: 10px;}
  
  .text_banner.picup_contents li { width: calc( 33.333% - 10px);}
  
}

/*************************************************
 レスポンシブ　640 + 20 
**************************************************/
@media screen and (min-width:0px) and (max-width:660px) {
  
  .emergency_news { display: block;}

  div.top_section_01 { padding-top: 0;}
  
  .tabmenu .news { padding: 0 0 5px;}
  
  .admin_content { display: block;}
  .admin_banner ul { justify-content: space-around;}
  .admin_banner li { max-width: calc( 50% - 10px );}
  .admin_banner li img { max-width: 100%; height: auto;}
  .admin_content .location { display: block; text-align: center;}
    
  .administration_other { display: block;}
  .administration_other .half_wrap,
  .administration_other .half_wrap:first-child { width: auto; margin-left: 0; margin-right: 0;}
  
  .sub_menu_banner { display: block;}
  .sub_menu_banner li { width: auto; margin: 10px auto 0px;}
  .sub_menu_banner li:first-child { margin-top: 0;}

  .paper { margin-bottom: 10px;}
  
  .top_section_03 h2 { padding-top: 3em;}
  .top_section_03 h2 span:before { bottom: 1.5em; left: 50%; margin-left: -31px;}
  
  .theme_search li,
  .text_banner.picup_contents li { width: calc( 50% - 10px);}
  
}



/*************************************************
 20220815 広告バナー　ここから
**************************************************/
.wrap#TOP { position: relative;}
section.posting { position: absolute; top: 172px; left: calc(50% + 512px + 12px); width: 214px; max-width: inherit; margin: 2em auto; z-index: 10;}
section.posting .wrap { width: auto;}
.posting_box ul { display: block;}
.posting_box li { width: calc(100% - 1em);}


@media screen and (min-width:0px) and (max-width:1500px) {
  .wrap#TOP { position: static;}    
  section.posting { position: static; width: auto; max-width: 1024px; margin: 2em auto;}
  section.posting .wrap { width: 1024px;}    
  .posting_box ul { display: flex;}    
  .posting_box li { width: calc(20% - 1.5em);}
}


@media screen and (min-width:0px) and (max-width:1044px) {
  .posting_box li { width: auto;}        
}


@media screen and (min-width:0px) and (max-width:580px) {
  .posting_box li { width: 46%; margin-left: 2%; margin-right: 2%;}    
}
/*************************************************
 20220815 広告バナー　ここまで
**************************************************/