@charset "UTF-8";
@import url("grid.css");

img {
    /*max-width:100%;*/
    height: auto;/*高さ自動*/
}
a {
    display:inline-block;
    /* リンクカラーはcolor-stylexx.cssにて設定 */
    text-decoration-line: none;
}
a:hover { 
    color: #999;
}
a img:hover {
    opacity: 0.8;
}
.blueback {
    background-color: #003399;
    color: #fff;
    padding: 1rem;
}
.underline {
    border-bottom: 3px solid #003399;
    padding-bottom: 0.5rem;
}
.center {
    text-align: center;
}

.strong {
  font-weight:700;
}

/*ヘッダー
-------------------------------------*/
.head {
    display: flex;
    flex-direction: row;
    padding: 1rem 0 0 0;
    justify-content: space-between;
}

.head h1 { 
    /*padding: 1rem 0;*/
    padding: 0;
}

.head h1 img {
    width:100%;
}

/* firefox svg対策 */
header .head h1 a {
    width:300px;
}
/* -------------------- Google 検索ボックス ----------------------*/
.searchbox {
    /*position: absolute;
    top: -10px;
    left: 646px;*/
    width:180px;
    height: 40px;
    float: right;
    border-style: none;
}
.searchbox .gsc-control-cse {
    background-color: transparent !important;
    border: none !important;
}
.gsc-control-cse, .gsc-control-cse .gsc-table-result {
    width: auto;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

form.gsc-search-box {
    font-size: 13px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 4px;
    margin-left: 0;
    width: 100%;
}
table.gsc-search-box {
    border-style: none;
    border-width: 0;
    border-spacing: 0 0;
    width: 100%;
    margin-bottom: 2px;
}
table.gsc-search-box td.gsc-input {
    padding-right: 0px !important;
}
table.gsc-search-box td {
    vertical-align: middle;
}
.gsc-input {
    font-size: 16px;
}
.gsc-input-box {
    border: 1px solid #044a80 !important;
    background: #fff;
}
.gsib_a {
    padding: 5px 9px 4px 9px;
}
.gsst_b {
    font-size: 16px;
    padding: 0 2px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}
.gsst_a {
    cursor: pointer;
    padding: 0 4px;
}
.gsc-control-cse:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

table.gsc-search-box td {
    padding: 4px 0px;
    text-align: left;
    border-bottom: none;
}

.gsc-control-cse {
    padding: 0 !important; 
}

.gsc-search-button-v2 {
   padding:6px 8px !important;/*虫眼鏡アイコンの幅調整  */
   background-color:#044a80 !important;
   border: 3px solid #044a80 !important;
}

.gsc-search-button {
    margin-left:0 !important;
}


/* /-------------------- Google 検索ボックス ----------------------*/


nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
    margin: 0 auto 20px;

}
nav li {
    flex: 1 0 auto;
    margin-bottom: 0;
    border-left:1px solid #92b0d0;
    border-top:1px solid #92b0d0;
    border-bottom:1px solid #92b0d0;
    border-right:1px solid #92b0d0;
}

nav li a {
    text-decoration: none;
    text-align: center;
    color: #4d84c4;
}
nav a:hover {
    background-color: #dae2f2;
}

nav a {
    padding: 1rem 0.5rem;
    display: block;
}

@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}
/*
#navi,#navi2 {
    display: block !important;
}
*/

}

@media screen and (max-width: 768px){


nav li a {
    color: #fff !important;
    background: #4b8ce1!important;
    text-align: left;
}
.news dl dt.date,
.news dl dd{
    padding: 0.4em;


}


.head {
    flex-direction: column;
    margin-bottom: 20px;
    padding: 0.4em;
}

/*
.telbox {
    margin-left: 0;
    text-align: center;
}
*/
.head #open,#close  {
    position: absolute;
    top: -60px;
    right: 12px;
    z-index: 50;
    }
nav #navi ul {
    flex-direction: column;
  background: #4b8ce1;
  padding: 15px 0;
}

nav #navi2 ul {
  flex-direction: column;
  background: #dae2f2;
  padding: 0 0 15px;
}


nav #navi2 ul li{
  margin-left: 5px;
  font-size: 2rem;
}


nav #navi2 ul li.nav_english {
    font-weight: 700;
    display: flex;
    align-items: inherit;
    color: #004b83;
}


nav #navi2 ul li.nav_english:before {
    content: url(../images/common/english_icon.png);
    vertical-align: middle;
    padding-top: 7px;
}

nav #navi2 ul li.nav_english:after {
    content: "?";
    vertical-align: middle;
    padding-right: 3px;
    padding-top: 9px;
}


nav #navi  li {
  margin: 5px 0;
    padding-top: 0;
    border-bottom: 1px #fff dotted ;
    margin-bottom: 0;
}

nav #navi li:first-child {
 /* border-top: 1px #fff dotted ;  */
}

nav li a {
    text-decoration: none;
    text-align: center;
    color: #4d84c4;
}

/* スマホ時はMENUボタンを表示 */
#open,#close  {
    display: block;
    width: 50px;
    border: none;
    position: absolute;
    top: -60px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
    background: #4b8ce1;
}








}

/*メイン画像
-------------------------------------*/


.mainimg {
    position: relative;
    max-width: 100&;
    margin:0 auto 0 ;
}

.mainimg img {
    width: 100vw;
}


.mainimg_wrapper {
 margin: 0;
 padding: 0;
 margin: auto;
 max-width: 1480px;
}

.mainimg img.toplogo {
    position: absolute;
    top: 20%;
    left: 10%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index:100;
    width: 17.5%;
}

.mainimg .slider p {

position: relative;
bottom: 50px;
right: 30px;
padding: 10px;
font-size: 14px;
color: #fff;
background: #251714;
width: auto;
float: right;

}

/*メインコンテンツ
-------------------------------------*/
main {
    /*margin: 5rem 0 5rem 0;*/
    margin: :0;
}

/*新着情報
-------------------------------------*/
.news h2 {
    background-color: #003399;
    color: #fff;
    padding: 1rem;
}
.news dl {
    list-style-type: none;
    border-bottom: 1px solid #c8c9c9;
    padding: 0.5rem;
}

.news dl dt.date {
  font-weight:700;
}

.news dl dt.press::after {
  content: '記者発表';
  margin-left: 5px;
  padding: 5px 10px;
  color: #fff;
  display: inline-block;
  background: #f2ab1a;
  font-weight: 300;
}

.news dl dt.caution::after {
  content: '注意喚起';
  margin-left: 5px;
  padding: 5px 10px;
  color: #fff;
  display: inline-block;
  background: #e62519;
  font-weight: 300;
}

.news dl dt.bit::after {
  content: '入札契約';
  margin-left: 5px;
  padding: 5px 10px;
  color: #fff;
  display: inline-block;
  background: #9bc037;
  font-weight: 300;
}

.news dl dt.common::after {
  content: 'お知らせ';
  margin-left: 5px;
  padding: 5px 10px;
  color: #fff;
  display: inline-block;
  background: #2e66b0;
  font-weight: 300;
}




.news dl dt.news_head {
  padding-top:8px;
  color:#574c47;
}

.news dl dt.news_head a{
  display: inline-block;
}

.news dl dt img {
  margin-right: 5px;

}


/*
.news dl dd.contents {
  font-weight: 700;
  color:#231815;
}

.news dl dd.contents span.bite{
  display: block;
}



.news dl dd.contents {
  font-weight: 700;
  color:#231815;
}
*/

/* 改竄検知対策インラインフレーム対応 */

#inline-frame {
  width:100%;
  height:550px;
}


/*フッター
-------------------------------------*/
footer {
    margin: 80px auto 0;
    background-color: #4d84c5;
    padding: 5rem 0;
    color: #fff;
    max-width: 1000px;

}

footer .container {
  display: flex;
  flex-direction: column;
}


footer h5 {
    margin-top:35px;
    font-size:16px;
}

footer p {
    font-size:14px;
}
footer ul {
  float: right;
  display: flex;
  align-items: flex-end;
}

footer ul li a{
  color:#fff;
  font-size: 14px;
  margin-left:1em;
}



/* footer上の飾り　葦イラスト　*/
/*
footer:before {
    content: url(../images/common/footer_ashi.svg);
    vertical-align: top;
    margin: -165px auto 0;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
*/

footer:before {
 position: relative;
 top: -111px;
 width: 100%;
 height: 90px;
 content:" ";
 display:inline-block;

 background:url(../images/common/footer_ashi.svg);
 background-size:cover;
 background-repeat: no-repeat;
 vertical-align:middle;
}

/*
footer:before {
    content: url(../images/common/footer_ashi.png);
    vertical-align: top;
    margin: -165px auto 0;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transform: scale(0.5);
}
*/


/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: #040000;
    color: #fff;
    max-width: 1000px;
    margin: auto;
}
.copyright a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
display: flex;
    color: #fff;
    width: 82px;
    height: 74px;
    text-align: center;
    vertical-align: middle;
    background: #000;
    justify-content: center;
    padding: 10px;
}

#pagetop a:hover {
    background: #92b0d0;
}
/*パンくずリスト
-----------------------------------*/
.breadcrumb {
    margin: 0 0 1em 0;
    padding: 0; 
}
.breadcrumb li {
    list-style-type: none;
}
.breadcrumb li a {
    display: inline-block;
    color: #959fa5;
}

/*メインコンテンツ追加
-----------------------------------*/

.container h2,
.container h3 {
  margin:10px auto;
  width:100%;
  text-align: center;
}

.container h2 {

  padding:10px;
  background: #4d84c5;
  text-align: left;

}

  /* 202302 */
.container .news .news_label_wrapper h2 img {
  margin-top: 10px;
}

.container .news .news_label_wrapper h3 img {
  margin-top: 10px;
}
/*header 追加
-----------------------------------*/

header .container #accessibility {
  margin:5px 10px 0;
  width:100%;
  text-align:right;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

header .container #accessibility .acc_nav {
  display: flex;
  padding: 5px;
  justify-content: flex-end;
  margin-bottom: 0;
  align-items: center;
}


header .container #accessibility .acc_nav li {
  margin-right: 10px;
  margin-bottom: 0;
  align-items: baseline;
  justify-content: center;
  display:flex;
}

header .container #accessibility .acc_color_nav li:first-child {
  display:flex !important;
}

header .container #accessibility .acc_color_nav li ul li:first-child {
  display:block !important;
}


/* 音声読み上げ機能 web reader 外部CSS 調整 */

.rs_addtools, .rsbtn {
  margin-bottom:0 !important;
}

.rs_addtools .rsbtn_tooltoggle .rsicn:before, .rsbtn .rsbtn_tooltoggle .rsicn:before {
    content: "\ec6d";
}


header .is-search #cse-search-box .l-search__btn {
    width: 32px;
    height: 30px;
    background-image: url(../images/common/header_serch_icon01.png);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #2b193d;
}
/*
input[type="text"], input[type="button"], button, textarea {
    margin: 0;
    padding: 0;
    background: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
*/
header .head ul.header_navi {
    height:40px;
    list-style:none;
    display: flex;
    flex-direction: row;
    margin:15px 0px;
    font-size: 2.0rem;
    align-items: center;
}

header .head ul.header_navi li{
    padding: 0 7px;
    border-left: solid 1px #225a98;
}

header .head ul.header_navi li:first-child {
    border: none;
}


header .head ul.header_navi li.nav_english {
    border-right: solid 1px #225a98;
    font-weight: 700;
    display: flex;
    align-items: inherit;
}

header .head ul.header_navi li.nav_english:before {
  content: url(../images/common/english_icon.png);
  vertical-align: middle;
  padding-right: 5px;
  padding-top: 4px;
}


header .head ul.header_navi li:last-child {
   border-left:none;
}

/*トップページ
-----------------------------------*/


/*災害情報/工事規制情報
-----------------------------------*/

.preliminary div {
  margin:20px auto;
  display: flex;
  flex-wrap: wrap;
  width:100%;

}

/* 災害情報 */
.preliminary div.disaster_info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

}

/* 災害情報/工事規制情報 */
.preliminary div dl {
  margin: 15px auto;
  margin-bottom: 0;
  width:100%;
  display: flex;
  font-size:2em;
  /*flex-wrap: wrap;*/
  font-weight: 700;
}

/* 災害情報/工事規制情報左枠 */
.preliminary div.disaster_info dl dt,
.preliminary div.construction_info dl dt {
  float:left;
  width:30%;
  padding:15px;
  border-right:1px solid #92b0d0;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  vertical-align: center;
  justify-content: center;
  border:solid 1px #8eabc9;
}

/* 災害情報/工事規制情報左枠タイトル */
.preliminary div.disaster_info dl dt span.title, 
.preliminary div.construction_info dl dt span.title {
  font-size:1em;
  font-weight:700;
  display: flex;
  margin-left:35px;
}

/* 災害情報/工事規制情報左枠日付 */
.preliminary div.disaster_info dl dt span.date,
.preliminary div.construction_info dl dt span.date {
  font-size:0.6em;
  font-weight:300;
  margin-left: 35px;
}

/* 災害情報左枠 平常時~レベル5 */
.preliminary div.disaster_info dl dt.level0 {
  background: #e3e6ef;
  color:#4d84c5;
}

.preliminary div.disaster_info dl dt.level1 {
  background: #f1e334;
  color:#e62c14;
}

.preliminary div.disaster_info dl dt.level2 {
  background: #e62c14;
  color:#fff;
}

.preliminary div.disaster_info dl dt.level3 {
  background: #7f549e;
  color:#fff;
}

.preliminary div.disaster_info dl dt.level4 {
  background: #040000;
  color:#fff;
}

.preliminary div.construction_info dl dt {
  background: #235a99;
  color:#fff;
  border:solid 1px #8eabc9;
}

.preliminary div.construction_info dl dd {
  border:solid 1px #8eabc9;
}


/* 工事規制情報左枠 日付 */
.preliminary div.construction_info dl dt span.date{
  color:#f2e335;
}

/* 工事規制情報右枠 タイトル */
.preliminary div.construction_info dl dd.article span.title{
  color:#d93d21;
  margin:auto;
}

/* 工事規制情報右枠 本文 */
.preliminary div.construction_info dl dd.article span.contents{
  color:#231815;
  line-height:1.2;
  font-weight: 700;
  text-align:center;
  margin:auto;
}

/* 工事規制情報右枠 詳細リンク */
.preliminary div.construction_info dl dd.article span.more{
  width:100%;
  color:#d93d21;
  font-weight: 700;
  text-align:center;
  margin:auto;
  font-size: 0.75em;
}



.preliminary div.disaster_info dl dd {
  float:left;
  width:70%;
  border-right:1px solid #92b0d0;
  display: flex;
  font-size:2em;
  flex-wrap: wrap;
  font-weight: 700;
}

.preliminary div.construction_info dl dd {
  float:left;
  width:70%;
  border-right:1px solid #92b0d0;
  display: flex;
  font-size:1em;
  flex-wrap: wrap;
  font-weight: 700;
  background: #f9ec06;
}





.preliminary div.disaster_info dl dd dl{
  margin:0;
  float:left;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  flex-direction: column;
  border:solid 1px #8eabc9;
}


.preliminary div.disaster_info dl dd dl dt,
.preliminary div.disaster_info dl dd dl dd{
  width:100%;
  border-right: 0;
  padding: 10px 0;
}

.preliminary div.disaster_info dl dd dl dt {
        color:#fff;
      font-size: 24px;
      background: #4d84c5;
      padding-left: 0.5em;
      box-sizing: border-box;
}

.preliminary div.disaster_info dl dd dl dd {
  display: flex;
  justify-content: space-evenly;
}



}

.preliminary div.disaster_info dl dd dl dd img {
  padding:20px 15px;
}



.call_box {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: auto;
  background: linear-gradient(to right, #4e83c4 0%, #fff 20%, #fff 80%,#4e83c4 100%);
}

.call_box span.title {
    margin:15px 100px;
    font-size:2.2rem;
    color:#4e83c4;
    font-weight: 700;
}

.call_box::before {
    content: url(../images/call_box_before.svg);
    vertical-align: top;
    margin: 15px;
    text-align: left;
    width:7.5%;
    height:100%;
    display: inline-block;
    position: absolute;

}

.call_box span.title a {
    margin-left:0.25em;
    padding:5px;
    display:inline;
    color:#e1e440;
    background: #4e83c4;
}

.call_box span.title a i {
   margin-left:5px;
}


.call_box span.contents {
    margin:15px auto;
    font-size:2.2em;
    color:#d93d21;
}

.call_box span.contents strong {

    font-size:125%;
    font-weight: 700;
}



/*NEWS Twitter
-----------------------------------*/

.news_box {
  height: 660px;
}


.twitter {
  margin: 10px auto;
  text-align: center;
  height: 650px;
  overflow:auto;
}

.css-1dbjc4n {
  border: none;
}
#twitter-widget-0 {
  width:auto !important;
}

/*動画掲載
-----------------------------------*/

.movie_box { margin: 10px aute;
             overflow-x: auto;
             overflow-y: hidden;
             white-space: nowrap; }

.movie_box > div{ display: inline-block;
                  white-space: nowrap; }                   

.movie_box ifarame { display: inline-block;
                     margin-right: 10px;}

/*ライブカメラ
-----------------------------------*/


h3.live_camera_header {
margin: 30px auto -20px;
    color: #7e7e7f;
}

.live_camera_box ul{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.live_camera_box li:first-child,
.live_camera_box li:last-child{
  margin-top:-40px;
}



.live_camera_box ul li ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top:0;
  vertical-align: :top;
}


.live_camera_box ul li ul li {
    height:70px;
    width:125px;
    margin-top:10px;

}

.live_camera_box ul li ul li img {
  margin-top: 10px;
}


.live_camera_box ul li ul li:first-child {
    height:90px;
    font-size:11px;
    margin-bottom:110px;
}



/* 161号線写真一覧 */
.live_camera_box ul li ul.r161 li {
    height:70px;
    width:125px;

}

.live_camera_box ul li ul.r161 li:first-child {
    height:90px;
    font-size:11px;
    margin-bottom:110px;
}

.live_camera_box ul li ul.r161 li:last-child {
    margin-top:10px;
}


.live_camera_box ul li ul.r161 li:first-child p {
  margin-top:-40px;
    text-align:right;
}

.live_camera_box li:last-child ul.r161 li p {
    text-align:left !important;
}


.live_camera_box ul li ul.r161 li:first-child:before {
    content: url(../images/pouup.png);
    vertical-align: top;
    margin: 15px;
    text-align: left;
    width:75px;
    display: inline-block;
    position: relative;
    right:40px;
    top: 60px;

}


/* 国道8号線写真一覧 */
/*
.live_camera_box ul li ul.r8 li {
    height:70px;
    width:125px;
    margin-top:10px;

}

.live_camera_box ul li ul.r8 li:first-child {
    height:80px;
    font-size:11px;
    margin-bottom:110px;
}
*/
.live_camera_box ul li ul.r8 li:last-child {
    margin-top:15px;
}


.live_camera_box ul li ul.r8 li:first-child p {
  margin-top:-40px;
    text-align:right;
}

.live_camera_box li:last-child ul.r8 li p {
    text-align:left !important;
}




.live_camera_box ul li:last-child ul.r8 li:first-child:before {
    content: url(../images/pouup.png);
    vertical-align: top;
    margin: 15px;
    text-align: left;
    width:75px;
    display: inline-block;
    position: relative;
    left:40px;
    top: 70px;
  transform: rotate(90deg);
}


#r21_box {
    position: absolute;
    width: 210px;
    right: -60px;
    top: 900px;
}

#r21_box dl{
    display:flex;
    justify-content:flex-end;
    flex-direction: column;
  }

#r21_box dl dd{
    display:flex;
    justify-content:flex-end;
  }

.live_camera_box ul.r1{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}


.live_camera_box ul.r1 li{
  width: 100%;
    display: flex;
  justify-content: center;
  margin:10px;
  align-items: center;

}

.live_camera_box ul.r1 li:last-child{
  margin-top:30px;
}



.live_camera_box ul.r1 li ul{
  display: flex;
  flex-direction: row;
  align-items:flex-end;
  max-width: 100%;
  margin-right:10px;

}


.live_camera_box ul.r1 li:last-child ul li img{
  height:75px;
  margin-right: 10px;

}
/* R1 横並び画像の高さ制限の影響をはずす */
.popup_wrapper img {
    height: auto !important;
}

.live_camera_box ul.r1 li:last-child ul li:first-child{
  width:100%;
  margin: 0 20px -4px 0;
}

.live_camera_box ul.r1 li:last-child ul li:first-child img{
  /*width:100px;*/
  margin:0;

}

.live_camera_box ul.r1 li:last-child ul li:first-child:before{
  display: none;

}

.live_camera_box ul.r1 li:last-child ul li:last-child {
  margin-left: -95px;
  display: flex;
  justify-content: flex-start;
}


.live_camera_box ul.r1 li:last-child ul li:last-child:before {
    content: url(../images/pouup.png);
    vertical-align: top;
    margin: 15px;
    text-align: left;
    width: 75px;
    display: inline-block;
    position: relative;
    left: 170px;
    top: 40px;
    transform: rotate(180deg);
}

.live_camera_box ul.r1 li:last-child span {
  margin-top:10px;
  font-size: 9px;
}


/*他地域事務所案内バナー
-----------------------------------*/

.other_office {
  margin:20px auto;
  background: #d2d2d3;
}


.other_office ul{
  display: flex;
  justify-content: space-around;
  margin:10px;
}


.other_office ul li{
  margin-top:1rem;
  border:solid 1px #868585;
  border-radius:12px;
  background: #fff;
  width:180px;
}

.other_office ul li dl dt{
  margin:15px auto 10px;
  font-size:16px;
  text-align: center;
}

.other_office ul li dl dd{
  margin:10px auto;
  font-size:12px;
  text-align: center;
}

.other_office ul li dl dd a{
  color:#4c83c4;
}

/*バナータブメニュー
-----------------------------------*/

.banner_tab section.typeB{
  display: flex;
  flex-wrap: wrap;
}
.banner_tab section.typeB::after {
  content: '';
  width: 100%;
  order: -1;
  display: block;
  background: rgba(0,137,167,.7);
}


.banner_tab section.typeB .tabLabel {
    width: 30%;
    text-align: center;
    border-radius: 10px 10px 0 0;
    padding: 12px 8px;
    font-size: 2.0rem;

}


.banner_tab section.typeB .tabLabel1 { /* タブ */
  margin: 0;
 
  flex: 1;
  order: -1;
  /*background: url(../images/tab_banner_bg.svg);
  background-size:cover;
  background-repeat: no-repeat;*/
  transition: .5s ;
  cursor: pointer;
  border:1px solid #000;
 
}


.banner_tab section.typeB .tabLabel2 { /* タブ */
  /*margin-left: -50px;*/

  flex: 1;
    order: -1;
  /*background: url(../images/tab_banner_bg.svg);
  background-size:cover;
  background-repeat: no-repeat;*/
  transition: .5s ;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border:1px solid #000;
}

.banner_tab section.typeB .tabLabel3 { /* タブ */
  /*margin-left: -50px;*/

  flex: 1;
  order: -1;
  /*background: url(../images/tab_banner_last_bg.svg);
  background-size:cover;
  background-repeat: no-repeat;*/
  background: #4b8ce1;
  color:#fff;
  transition: .5s ;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border: 1px solid #000;
}


.banner_tab section.typeB .tabLabel:nth-last-of-type(1){ margin-right: 0; }
section.typeB input {   /* ラジオボタン非表示 */
  display: none;
}
.banner_tab section.typeB .content {  /* 本文 */
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.banner_tab section.typeB .tab01,
.banner_tab section.typeB .tab01 a {
  background: rgba(255,255,255);
  color:#e94e29;
}

.banner_tab section.typeB .tab02,
.banner_tab section.typeB .tab02 a {
  background: rgba(255,255,255);
  color:#044a80;
}

.banner_tab section.typeB .tab03,
.banner_tab section.typeB .tab03 a {
  background: rgba(255,255,255);
  color:#fff;
}


.banner_tab section.typeB ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


.banner_tab section.typeB ul li {
  margin:15px 0px;
  display: inherit;
  border-bottom:dotted 1px #fff;

}


/*アクティブ設定*/
.banner_tab section.typeB input:checked + .tabLabel {
  color:#e94e29;

}

.banner_tab section.typeB input:checked + .tabLabel + .content {
  padding: 15px;
  height: auto;
  overflow: auto;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  transition: .5s opacity;
  opacity: 1;
}












/*NEWS
-----------------------------------*/
/* 202302 */
.container .news .news_label_wrapper {
   display: flex;
   flex-wrap: nowrap;

}

.container .news .news_label_wrapper h2 {
  float:left;
  width:60%;
  /*font-size:30px; 202302 */
  color:#e9e735;
}

.container .news.news .news_label_wrapper h3 {
  display: inline-block;
  padding:10px;
  width:40%;
  /* font-size: 1em; 20232*/
  background:#91afcf;
  color:#fff;
}

/* 202302
.container .news h3:after {
    content: '??';
    margin-right: 10px;
    color:#e0e33f;
  } 
*/


/*
.live_camera_box ul li:last-child ul li {
  width:210px;
  float:right;
  text-align:right;
}

.live_camera_box ul li:last-child ul li:last-child {
  width:210px;
}
*/

/* SPタブメニュー（ライブカメラ） */
.live_camera_box_sp section.typeA{
  display: flex;
  flex-wrap: wrap;
}
.live_camera_box_sp section.typeA::after {
  content: '';
  width: 100%;
  order: -1;
  display: block;
  background: rgba(0,137,167,.7);
}


.live_camera_box_sp section.typeA .tabLabel1 { /* タブ */
  margin: 0;
  padding: 3px 12px;
  flex: 1;
  order: -1;
    color: #000!important;
	background: #ff3399;
/*    	border-radius: 0 20px 0 0;*/
/*  background-size:cover;*/
/* display: inline-block;*/
  background-repeat: no-repeat;
  transition: .5s ;
  cursor: pointer;

}



.live_camera_box_sp section.typeA .tabLabel2 { /* タブ */


  padding: 3px 12px;
  flex: 1;
    order: -1;
    color: #000!important;
    background:#cc33cc;
/*    　 border-radius: 0 20px 0 0; */
  background-size:cover;
  background-repeat: no-repeat;
/* display: inline-block;*/
  transition: .5s ;
  cursor: pointer;
}

.live_camera_box_sp section.typeA .tabLabel3 { /* タブ */


  padding: 3px 12px;
  flex: 1;
  order: -1;
    color: #000!important;
    background: #339933;
/*  　 border-radius: 0 20px 0 0;*/
/*  background-size:cover;*/
  background-repeat: no-repeat;
/* display: inline-block;*/
  transition: .5s ;
  cursor: pointer;
}

.live_camera_box_sp section.typeA .tabLabel4 { /* タブ */
 

  padding: 3px 12px;
  flex: 1;
  order: -1;
    color: #000!important;
    background: #33ccff;
/*  　 border-radius: 0 20px 0 0;*/
/*  background-size:cover;*/
  background-repeat: no-repeat;
/* display: inline-block;*/

  transition: .5s ;
  cursor: pointer;
}


.live_camera_box_sp section.typeA .tabLabel:nth-last-of-type(1){ margin-right: 0; }
section.typeA input {   /* ラジオボタン非表示 */
  display: none;
}
.live_camera_box_sp section.typeA .content {  /* 本文 */
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.live_camera_box_sp section.typeA .tab01,
.live_camera_box_sp section.typeA .tab01 a {
  background: #ff3399;
  color:#000;
}

.live_camera_box_sp section.typeA .tab02,
.live_camera_box_sp section.typeA .tab02 a {
  background: #cc33cc;
  color:#000;
}

.live_camera_box_sp section.typeA .tab03,
.live_camera_box_sp section.typeA .tab03 a {
  background: #339933;
  color:#000;
}

.live_camera_box_sp section.typeA .tab04,
.live_camera_box_sp section.typeA .tab04 a {
  background:  #33ccff;
  color:#000;
}

.live_camera_box_sp section.typeA ul li {
  display: inherit;
  border-bottom:dotted 1px #fff;
}

.live_camera_box_sp section.typeA .tab01 ul li:before,
.live_camera_box_sp section.typeA .tab02 ul li:before,
.live_camera_box_sp section.typeA .tab03 ul li:before,
.live_camera_box_sp section.typeA .tab04 ul li:before {
  content: ">";
  position: relative;
  display:inline-block;
  margin-right:0.3em;
}



/*アクティブ設定*/
.live_camera_box_sp section.typeA input:checked + .tabLabel {
  color: #000;

}
.live_camera_box_sp section.typeA input:checked + .tabLabel + .content {
  padding: 15px;
  height: auto;
  overflow: auto;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  transition: .5s opacity;
  opacity: 1;
}


/*================================================
 *  pc向けデザイン
 ================================================*/

@media screen and (min-width:521px) {


  .sp_only {
    display:none !important;
  }

.top_contents {
  margin-top: -35px;
}

footer .container {
    display: flex;
    flex-direction: column;
    margin-top: -110px;
    margin-bottom: -60px;
}


}




/*================================================
 *  スマートフォン向けデザイン
 ================================================*/


@media screen and (max-width:520px) {



  .pc_only {
    display:none;
  }

  img {
    max-width: 100%;
  }

body {
  overflow: hidden;
}

.live_header .subpage_contents{
  margin-top:-360px;
}

.live_header .subpage_contents{
  margin-top:-360px;
}

.live_header .menu{
  top:-180px;
}


/* header */

header {
  margin-top:100px;
  width:100%;
}

header .container #accessibility {
   position: absolute;
   bottom:95px;
}

header .container #accessibility .acc_nav:nth-child(n + 2) {
  display: none;
}
.header_navi {
  display: none !important;
}

.head h1 {
    /* padding: 1rem 0; */
    padding: 0;
    position: absolute;
    bottom: 30px;
}

.menu {
    position: relative;
    background: none;
    top: -415px;
    left: 20%;
    width: 80%;
    z-index: 10;
    height: 165px;
    z-index: 100;
}


.mainimg {
    position: relative;
    max-width: 100&;
    margin: 0 auto 0;
    z-index: 11;
    bottom: 80px;
}

.mainimg img {
    width: 100%;
    height: 250px;
    object-fit: none;
}

.container {
  padding: 0;
  margin: 0;
  max-width:100%;
  /*overflow: hidden;*/
}

header .container {
  margin-bottom: 150px;
}


/* ハンバーガーメニュー */

nav ul {
  border:none;
}

nav li {
  border-top:none;
  border-left:none;
  border-right:none;
}

nav li a {
    color: #fff !important;
    background: #4b8ce1!important;
    text-align: left;
}

nav li :hover {

    background: #60d2f4;

}

nav li.inq_nav_sp a:before {
    content: url(../images/common/mail_icon_sp.png);
  display: inline-block;
  vertical-align: middle;
  padding-top: 4px;

}

/* Google検索幅高さ調整 */
.searchbox {
    width: 95%;
    height: 50px;
    float:left;
}

/* ハンバーガーメニュー改行禁止 */

nav li br {
display: none;
}

/* メイン画像 */


.mainimg img.toplogo {
    top: -20%;
    left: 50%;
    width: 85%;
    z-index:10;
}

.mainimg img:last-child {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: 50% 50%;
}

.top_contents {
    margin-top: -200px;
}

.preliminary {
  margin-top: -120px;
}

/* NEWS */

.news_box {
    height: auto;
}
.container .news h3 {
  display: inline-block;
  padding:22px 0;
  width:30%;
    font-size: 1vmin;
  background:#91afcf;
  color:#fff;
}
.more_news {
    display: block;
    margin: 20px auto;
    width: 100%;
    text-align: center;
}
/* 202302 */
.container .news.news .news_label_wrapper h2 img{
  margin-top: 5px;
}


.container .news.news .news_label_wrapper h3 img{
  margin-top: 15px;
}


/* 災害情報/工事規制情報 */
.preliminary div dl {

  flex-wrap: wrap;
  font-weight: 700;
}

.preliminary div.disaster_info dl dd dl dt {
    display: none;
}


.preliminary div.construction_info dl dt {
    float: left;
    width: 100%;
    border-right: 1px solid #92b0d0;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    vertical-align: center;
    justify-content: center;
    border: solid 1px #8eabc9;
}

.preliminary div.disaster_info dl dt, .preliminary div.construction_info dl dt {
    width: 100%;

}


.preliminary div.disaster_info dl dd {
    float: left;
    width: 100%;
    border-right: 1px solid #92b0d0;
    display: flex;
    font-size: 2em;
    flex-wrap: wrap;
    font-weight: 700;
}

.preliminary div.disaster_info dl dd dl dd img {
    padding: 5px;
}

.preliminary div.construction_info dl dd {
    float: left;
    width: 1000%;
    border-right: 1px solid #92b0d0;
    display: flex;
    font-size: 2rem;
    flex-wrap: wrap;
    font-weight: 700;
    background: #f9ec06;
    line-height:1.3;
}

.preliminary div.construction_info dl dd.article span.title {
    margin:25px auto 15px;
}

.preliminary div.construction_info dl dd.article span.more {
    width: 100%;
    color: #d93d21;
    font-weight: 700;
    text-align: center;
    margin: auto;
    font-size: 1.5rem;
    line-height: 2.0;
}
/* 202302 */
.call_box span.title {
    margin: 15px auto;
    font-size: 1.2rem;
    color: #4e83c4;
    font-weight: 700;
    width: 70%;
    line-height: 1.8;

}

.call_box span.contents {
    margin: 15px auto;
    font-size: 2rem;
    color: #d93d21;
}

.call_box::before {
    content: url(../images/call_box_before.svg);
    margin:165px  0 0 10px ;
    text-align: left;
    width: 7.5%;
    height: 100%;
    display: inline-block;
    position: absolute;
}

/* ライブカメラ */



.live_camera_box ul li:not(:nth-of-type(3)){
    display:none;
}

.live_camera_PCyou li{
    display:none;
}


.live_camera_box ul li:nth-of-type(3) {
  margin-top:100px;
  background: #4b8ce1;
}

.live_camera_box ul li .live_camera_logo {
  float:right;
  margin:-50px 3px 0 0;
}


.live_camera_box ul li:nth-of-type(3):before {
    content: url(../images/live_camera_box_sp_header.svg);
    width:40%;
    display: inherit;
    margin:-50px auto 0;
}


.live_camera_box ul li:nth-of-type(3) img:nth-child(2) {

  margin:auto;
  padding:10px;
  box-sizing: border-box;
}



  .sp_only .live_camera_box_sp .typeA .content ul {
  display: flex;
  flex-direction: column;
  align-content:flex-start;
  box-sizing: border-box;
}


/* 他事務所バナー */

.other_office ul {
    flex-direction: column;
    justify-content: center;
}

.other_office ul li {
  width:100%;
}

.banner_tab section.typeB ul li {
    margin: 0;
    width: 48%;
}


re, blockquote, dl, figure, table, p, ul, ol, form {
    margin-bottom: 0;
}

/* バナータブのフォントサイスSPちいさめに*/
.banner_tab section.typeB .tabLabel {
    font-size: 1.6rem;

}



/* footer */

footer:before {
    top: -83px;
    background-size: contain;

}

footer .container {
    display: flex;
    flex-direction: column;
    margin-top: -35px;
    margin-bottom: -55px;
}

footer ul {
  margin-right: 10px;
  margin-top: 10px;
}

footer .col {
  margin-top: -100px;
  padding: 0.5em;
}

}