@charset "UTF-8";/*文字化け回避*/

@media screen and (min-width:769px),print{

body{
  margin: 0;/*初期設定としてmarginもpaddingも最初は0pxに*/
  padding: 0;
  background-color: #fff;/*webページ全体の背景色を白に指定*/
  font-family: 'メイリオ','Hiragino Sans','Meiryo',' sans-serif','ヒラギノ角ゴ ProN W3';/*文字のフォントを指定。手前にあるものから優先的に当てはまるものが採用される。*/
  min-width: 1080px;
}

a{
  text-decoration: none;/*リンクを設定したときに初期設定で引かれる下線を削除*/
}

.head{
  width: 85%;/*webページの上部の組合名とサイトマップ、施設案内を含んだまとまり（.head）の表示の横幅を画面全体の85％にとどめる*/
  margin: auto;/*中央に来るようにmarginをautoにする。widthを指定して、左右のmarginをautoにすると要素は中央揃えになる。*/
}

.logo{
  float: left;/*組合のロゴと組合の名前を左寄せにする*/
  margin: 10px 0 0 50px;/*文字の外側の余白を時計回りに上10px右0px下0px左50px指定*/
  width: 60%;/*組合のロゴと組合の名前のまとまり（.logo）の表示の横幅を.headの中の60％に指定*/
}

.logo h1{
  font-family:'游明朝';/*組合の名前のフォントは游明朝*/
}

.logo h1 a{
  color: black;/*西春日井広域事務組合の名前にリンクを設定すると、リンクを押した後、文字が赤く変化してしまうので、変わらないように色を黒に指定*/
}

.local-nav{/*.local-navはサイトマップと施設案内を囲っている枠のようなもの*/
  float: right;/*右に寄せる*/
  margin-top: 40px;/*文字の外側の上の余白を40px*/
  width: 30%;/*サイトマップと施設案内の表示の横幅を.headの中の30％に指定*/
}

.local-nav li{/*サイトマップと施設案内がリストの要素*/
  float: left;/*リストの要素をサイトマップ→施設案内の順に表示するように左から並列*/
  margin: 0 20px;/*リストの外側の余白を上下0px、左右20pxに指定*/
  font-size: 16px;/*文字の大きさ*/
  list-style: none;/*リストは初期設定で文字列の前に●が表示されるように設定されているのでそれを表示しないようにnoneと指定*/
  border-bottom: 2px solid #3399ff;/*リストの文字列の下に2pxの太さで色が♯3399ffの実線を引く*/
}

.local-nav a{
  color: #333333;/*サイトマップと施設案内のリンクを押した後でも文字の色が変わらないように色を指定*/
}

.local-nav a:hover{
  border-bottom: 2px double #3399ff;/*サイトマップと施設案内の上にマウスを持ってくると下線がdouble（二重）になるように指定*/
  padding-bottom: 3px;/*文字の下の余白を3pxに指定*/
  text-decoration: none;/*初期設定で表示される下線表示は削除*/
}

.global-nav{/*青帯のメニュー一覧のレイアウト設定にはflexboxを使用*/
  display: flex;/*flexboxを使うことを明記*/
  flex-direction: row;/*子要素を左から右に配置*/
  flex-wrap: wrap;/*子要素を折り返し、複数行に上から下に並べる*/
  justify-content: center;/*子要素を中央揃え*/
  text-align: center;/*文字を中央揃え*/
  width: 100%;/*横幅全画面表示*/
  background-color: #3399ff;/*メニュー一覧の背景色を♯3399ffに指定*/
  margin-bottom: 0px;/*親要素の外側の下余白を0px*/
  font-weight: bold;/*文字の太さを太字に*/
}

.item{/*子要素*/
  margin: 10px 30px;/*子要素の外側の余白上下10px左右30px*/
  padding: 10px 0; /*子要素の内側の余白上下10px左右0px*/
  color: #fff;/*文字色は白*/
  text-align: center;/*文字を中央揃え*/
}

.item:hover{
  opacity: 0.75;/*メニュー一覧の子要素の上にマウスを持ってくると少し透過される。１が透過されていない状態。*/
}

.item a{
  color: #fff;/*子要素のリンクを押した後に文字色が変わらないように白色を指定*/
}

#wrap{
  background-color:  #fbfbf6;/*背景色に♯fbfbf6黄みがかった白色を指定*/
  padding-top: 20px;/*上に余白*/
}

.cover{
  width: 85%;/*コンテンツエリアを表示する横幅を画面全体の８５％に指定*/
  margin: auto;/*中央揃え*/
}

.breadcrumb{/*パンくずリスト*/
  margin: 0 30px;/*外側の余白*/
  padding: 5px;/*内側の余白*/
  list-style: none;/*リストの前に●が出ないように削除*/
}

.breadcrumb li{
  display: inline;/*パンくずリストが横に並ぶように*/
  list-style: none;/*リストの前に●が出ないように削除*/
  font-weight: bold;/*太字*/
}

.breadcrumb li::after{/*リストの要素の後*/
  content: '>';/*リストの要素後に＞を表示*/
  padding: 0 0.2em;/*内側の余白*/
  color: #555;/*グレーに近い黒（＃555555）*/
}

.breadcrumb li:last-child::after{
  content: '';/*リストの一番最後の要素の後には何もつけない*/
}

.breadcrumb li a{
  text-decoration: none;/*パンくずリストにリンク設定したときに下線が出ないように設定*/
  color: #52b5ee;/*文字色*/
}

.breadcrumb li a:hover{
  text-decoration: underline;/*リストのリンク設定してある要素の上にマウスを持ってきたときに下線が出るように*/
}


.main{
  width: 65%;/*coverの範囲の65％にmainの内容を表示*/
  margin: 0 30px 0 5px;/*外側の余白*/
  padding:10px;/*内側の余白*/
  float:right;/*指定された要素を右に寄せて配置する*/
  color: #333333;/*文字色は＃333333*/
  line-height: 1.5;/*行間*/
  min-height: 600px;/*メインの最小の縦幅は600px*/
}

.main h1{
  font-size: 20px;/*文字の大きさを20pxに指定*/
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #3399ff;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

#shinsei-ki .main h1{
  font-size: 20px;/*文字の大きさを20pxに指定*/
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #a7d28d;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

#shinsei-ke .main h1{
  font-size: 20px;/*文字の大きさを20pxに指定*/
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #a7d28d;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

#shinsei-kyu .main h1{
  font-size: 20px;/*文字の大きさを20pxに指定*/
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #ff7f50;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

.main li{
  list-style-type: none;/*リストの文字列の前に●が表示されないように*/
  line-height: 2em;
}

#shinsei .main ul{
  margin-bottom: 2em;/*リストの外側の下の余白2文字分*/
}

.main p{
  margin-bottom: 2em;/*外側の下の余白*/
}

.main a{
  color: #0066cb;/*リンクの文字の色*/
}

.main a:hover{
  text-decoration: underline;/*リンクの文字の上にマウスを持ってきたとき、下線が表示される*/
}

.main table{
  margin-bottom: 15px;/*外側の下の余白*/
  width: 100%;/*メインの横幅のうち、100％の横幅表示*/
  margin: auto;/*中央揃え*/
  text-align: center;/*文字の中央揃え*/
  border-collapse: separete;
  border-spacing: 15px;
}

.main table th{
  border-bottom: 2px solid #cccccc;
  text-align: left;
}

.main table td{
  border-bottom: 2px dashed #cccccc;
  width: 15%;
}

.fa-file-pdf{
  color: #e95464;
}

.fa-file-excel{
  color: #82ae46;
}

.fa-file-word{
  color: #2fa0eb;
}

.reader{
  margin-top: 2em;/*外側の上の余白*/
  margin-bottom: 1em;/*外側の下の余白*/
  padding: 1em;/*内側の余白*/
  border: 2px solid #d7d7d7;/*囲む線*/
  background-color: #f4f4f4;/*背景色*/
}

.box-end{
  margin: 5em 0 3em 0;/*外側の余白*/
}

.inquiry-title{
  font-size: 1.2em;/*文字の大きさ*/
  border-bottom: 4px dashed #a7d28d;/*4px、#a7d28d色の破線の下線*/
  padding: 4px;/*内側の余白*/
  text-align: left;/*左揃え*/
  color: #333333;/*文字色*/
  font-weight: bold;/*太字*/
  letter-spacing: 0.05em;/*文字間*/
}

#shinsei-kyu .inquiry-title{
  font-size: 1.2em;/*文字の大きさ*/
  border-bottom: 4px dashed #ff7f50;/*4px、#ff7f50色の破線の下線*/
  padding: 4px;/*内側の余白*/
  text-align: left;/*左揃え*/
  color: #333333;/*文字色*/
  font-weight: bold;/*太字*/
  letter-spacing: 0.05em;/*文字間*/
}

.box-end p{
  padding: 15px 20px;/*内側の余白*/
  margin: 0;/*外側の余白*/
}

.sidebar{
  border-top: 2px solid #52b5ee;/*上に2px、#52b5eeの実線*/
  border-bottom: 2px solid #52b5ee;/*下に2px、#52b5eeの実線*/
  width: 20%;/*横幅はcoverの横幅のうち20%*/
  margin: 15px 5px 20px 45px;/*外側の余白*/
  padding: 10px;/*内側の余白*/
  float: left;/*左寄せ*/
  color: #333333;/*文字の色*/
}

.sidebar h2{
  font-size: 18px;/*文字の大きさ*/
  margin: 10px auto 0px 10px;/*外側の余白*/
}

.sidebar ul{
  font-size: 14px;/*リスト全体の文字の大きさ*/
  margin-left: 0;/*外側の左の余白*/
}

.sidebar a{
  color: #333333;/*リンク設定した文字の色*/
}

.sidebar a:hover{
  text-decoration: underline;/*リンク設定した文にマウスを置いたときに下線を表示*/
}

.clearfix::after{/*floatがかかっているのを解除*/
  content: "";
  display: block;
  clear: both;
}

footer{
  text-align: center;/*文字を中央揃え*/
  color: #333333;/*文字色*/
  padding: 20px 0;/*内側の余白*/
  font-size: 14px;/*文字の大きさ*/
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#d5eeff 3px, #d5eeff 7px);/*背景に斜線を引く*/
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#d5eeff 3px, #d5eeff 7px);
}

.address table{
  width: 90%;/*画面全体のうち90%の横幅でaddressのtableを表示*/
  margin: auto;/*中央揃え*/
  border-spacing: 0;/*枠と枠の間の隙間*/
}

.address th{
  padding: 10px 0;/*内側の余白*/
  text-align:center;/*文字を中央揃え*/
  font-size: 22px;/*文字の大きさ*/
}

.address td{
  padding: 10px 10px 10px 10px;/*内側の余白*/
}

.d-name{
  text-align: center;/*文字を中央揃え*/
  font-weight: bold;/*太字*/
}

.d-ad{
  text-align: left;/*文字を左寄せ*/
}

footer small{
  font-size: 12px;/*文字の大きさ*/
}

}

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

/*全体のレイアウト*/
body{
  margin: 0;/*初期設定としてmarginもpaddingも最初は0pxに*/
  padding: 0;
  background-color: #fff;/*webページ全体の背景色を白に指定*/
  font-family: 'メイリオ','Hiragino Sans','Meiryo',' sans-serif','ヒラギノ角ゴ ProN W3';/*文字のフォントを指定。手前にあるものから優先的に当てはまるものが採用される。*/
  font-size: 3vw;
  color: #333333;
}

a{
  text-decoration: none;/*リンクを設定したときに初期設定で引かれる下線を削除*/
}

h2{
  font-size: 3.3vw;
}

h3{
  font-size: 3.1vw;
}
/*全体のレイアウトここまで*/

/*画面上部のロゴやメニューのレイアウト*/
.head{
  margin: auto;
  width: 100%;
}

.logo{
  float: none;
  margin: 0 5%;
  text-align: center;
}

.logo h1{
  font-family: '游明朝';/*組合の名前のフォントは游明朝*/  
  font-size: 5.2vw;
}

.logo h1 a{
  color: black;/*西春日井広域事務組合の名前にリンクを設定すると、リンクを押した後、文字が赤く変化してしまうので、変わらないように色を黒に指定*/
}

.logo h1::before{
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 10vw;/*画像の幅*/
  height: 10vw;/*画像の高さ*/
  background-image: url(../clip.png);
  background-size: contain;
  vertical-align: middle;/*縦幅の中央揃え*/
}

.local-nav{/*.local-navはサイトマップと施設案内を囲っている枠のようなもの*/
  float: right;
  width: 35%;
  text-align: center;
}

.local-nav li{/*サイトマップと施設案内がリストの要素*/
  float: none;
  margin: 0 20px;/*リストの外側の余白を上下0px、左右20pxに指定*/
  padding-top: 4px;
  list-style: none;/*リストは初期設定で文字列の前に●が表示されるように設定されているのでそれを表示しないようにnoneと指定*/
  border-bottom: 2px solid #3399ff;/*リストの文字列の下に2pxの太さで色が♯3399ffの実線を引く*/ 
}

.local-nav a{
  color: #333333;/*サイトマップと施設案内のリンクを押した後でも文字の色が変わらないように色を指定*/
}

.local-nav a:hover{
  opacity: 0.5;
}

.global-nav{/*青帯のメニュー一覧のレイアウト設定にはflexboxを使用*/
  display: flex;/*flexboxを使うことを明記*/
  flex-direction: row;/*子要素を左から右に配置*/
  flex-wrap: wrap;/*子要素を折り返し、複数行に上から下に並べる*/
  justify-content: center;/*子要素を中央揃え*/
  text-align: center;/*文字を中央揃え*/
  width: 100%;/*横幅全画面表示*/
  background-color: #3399ff;
  margin-bottom: 0;/*メニュー一覧の背景色を♯3399ffに指定*/
  font-weight: bold;/*文字の太さを太字に*/
}

.item{/*子要素*/
  padding: 10px;/*子要素の内側の余白*/
  color: #fff;/*文字色は白*/
  text-align: center;/*文字を中央揃え*/
  width: 40%;
}

.item:hover{
  opacity: 0.75;/*メニュー一覧の子要素の上にマウスを持ってくると少し透過される。１が透過されていない状態。*/
}

.item a{
  color: #fff;/*子要素のリンクを押した後に文字色が変わらないように白色を指定*/
}

#wrap{
  background-color:  #fbfbf6;/*背景色に♯fbfbf6黄みがかった白色を指定*/
  padding-top: 20px;/*上に余白*/
  padding-bottom: 10vw;
}

.breadcrumb{
  display: none;
}

.main{
  width: 90%;
  margin: auto;
  min-height: 500px;
}


.main a{
  color: #0066cb;
}

.main a:hover{
  text-decoration: underline;
}

.reader{
  margin-top: 4vw;
  padding: 4vw;
  border: 2px solid #d7d7d7;
  background-color: #f4f4f4;
}

.box-end{
  margin: 3vw;
}

.box-end p{
  padding: 3vw;
}


.sidebar{
  border-top: 2px solid #52b5ee;
  border-bottom: 2px solid #52b5ee;
  width: 70%;
  margin: 4vw auto auto auto;
  padding: 3vw;
}

.sidebar h2{
  margin: 3vw;
}

.sidebar a{
  color: #333333;
}

.sidebar a:hover{
  text-decoration: underline;
}

footer{
   text-align: center;/*文字を中央揃え*/
   color: #333333;/*文字色*/
   background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#d5eeff 3px, #d5eeff 7px);/*背景の斜線*/
   background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#d5eeff 3px, #d5eeff 7px);
}

.address table{
  width: 90%;/*画面全体のうち90%の横幅でaddressのtableを表示*/
  table-layout: fixed;
  margin: auto;/*中央揃え*/
  border-spacing: 0;/*枠と枠の間の隙間*/
  
}

.address th{
  padding: 10px 0;/*内側の余白*/
  text-align:center;/*文字を中央揃え*/
  font-size: 3.2vw;/*文字の大きさ*/
}

.address td{
  padding: 10px 10px 10px 10px;/*内側の余白*/
  font-size: 2.9vw;/*文字の大きさ*/
}

.d-name{
  text-align: center;/*文字を中央揃え*/
  font-weight: bold;/*太字*/
}

.d-ad{
  text-align: left;/*文字を左寄せ*/
}

footer small{
  font-size: 2.8vw;/*文字の大きさ*/
}
/*ここまでが共通*/

.main h1{
  font-size: 3.5vw;
  padding: 1vw 2vw;
  color: #494949;
  background-color: #f4f4f4;
  border-left: 5px solid #3399ff;
  border-bottom: 3px solid #d7d7d7;
}

#shinsei-ki .main h1{
  font-size: 3.5vw;/*文字の大きさを20pxに指定*/
  padding: 1vw 2vw;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #a7d28d;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

#shinsei-ke .main h1{
  font-size: 3.5vw;/*文字の大きさを20pxに指定*/
  padding: 1vw 2vw;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #a7d28d;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

#shinsei-kyu .main h1{
  font-size: 3.5vw;/*文字の大きさを20pxに指定*/
  padding: 1vw 2vw;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #ff7f50;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}

.main li{
  list-style-type: none;/*リストの文字列の前に●が表示されないように*/
}


#shinsei .main ul{
  margin-bottom: 2em;/*リストの外側の下の余白2文字分*/
}

.main p{
  margin-bottom: 2em;/*外側の下の余白*/
}

.main table{
  margin-bottom: 15px;/*外側の下の余白*/
  width: 100%;/*メインの横幅のうち、100％の横幅表示*/
  margin: auto;/*中央揃え*/
  text-align: center;/*文字の中央揃え*/
  border-collapse: separete;
  border-spacing: 15px;
}

.main table th{
  border-bottom: 2px solid #cccccc;
  text-align: left;
}

.main table td{
  border-bottom: 2px dashed #cccccc;
  width: 15%;
}

.fa-file-pdf{
  color: #e95464;
}

.fa-file-excel{
  color: #82ae46;
}

.fa-file-word{
  color: #2fa0eb;
}

.inquiry-title{
  font-size: 3vw;/*文字の大きさ*/
  border-bottom: 4px dashed #a7d28d;/*4px、#a7d28d色の破線の下線*/
  padding: 4px;/*内側の余白*/
  text-align: left;/*左揃え*/
  color: #333333;/*文字色*/
  font-weight: bold;/*太字*/
  letter-spacing: 0.05em;/*文字間*/
}

#shinsei-kyu .inquiry-title{
  font-size: 3vw;/*文字の大きさ*/
  border-bottom: 4px dashed #ff7f50;/*4px、#ff7f50色の破線の下線*/
  padding: 4px;/*内側の余白*/
  text-align: left;/*左揃え*/
  color: #333333;/*文字色*/
  font-weight: bold;/*太字*/
  letter-spacing: 0.05em;/*文字間*/
}

}