@charset "UTF-8";

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

body{
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-family:'メイリオ','Hiragino Sans', 'Meiryo', 'sans-serif','ヒラギノ角ゴProN W3';
  min-width: 1080px;
}

.head{
  width: 85%;
  margin: auto;
}

.logo{
  float: left;
  margin: 10px 0 0 50px;
  width: 55%;
}

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

.logo h1{
  font-family: '游明朝';
}

.logo h1 a{
  color: black;
  text-decoration: none;
}

.local-nav{
  float: right;
  margin-top: 40px;
  width: 35%;
}

.local-nav li{
  float: left;
  margin: 0 20px;
  font-size: 16px;
  list-style: none;
  border-bottom: 2px solid #3399ff;  
}

.local-nav a{
  color: #333333;
  text-decoration: none;
}

.local-nav a:hover{
  border-bottom: 2px solid #3399ff;
  padding-bottom: 3px;
  text-decoration: none;
}

#n-insta{
  border: none;
  text-decoration: none;
  width: 32px;
}

#n-insta a:hover{
  border: none;
}

.global-nav{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 100%;
  background-color: #3399ff;
  margin-bottom: 0;
  font-weight: bold;
}

.item{
  margin: 10px 30px;
  padding: 10px 0; 
  color: #fff;
  text-align: center;
}

.item:hover{
  opacity: 0.75;
}

.item a{
  color: #fff;
  text-decoration: none;
}

#wrap{
  clear: both;
  background-color:  #fbfbf6;
  padding: 20px 0 30px 0;
}

.cover{
  width: 85%;
  margin: auto;
}

.how{
  float:right;
  margin: 0.5em 2em 1em 0;
  width: 35%;
  max-height: 55vh;
  min-height: 380px;
  background-color:#fff;
  border-radius: 5px;
  border: 3px solid #5fb3f5;
  overflow-y:auto;
}

.how::-webkit-scrollbar{
  width:10px;
}/*バーの太さ*/

.how::-webkit-scrollbar-track{
  background:#f5f5f5;
}/*バーの背景色*/

.how::-webkit-scrollbar-thumb{
  background:#cccccc;
}/*バーの色*/

.how .how-title{
  font-size: 1.2em;
  background: #5fb3f5;
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 1px;
}

.how li{
  line-height: 1.5;
  padding:5px 10px 5px 0;
  margin: 0;
  list-style: none;
  font-size: 16px;
  text-align: left;
}

.how li a{
  text-decoration: none;
  color: #0066cb;
}

.how li a:hover{
  text-decoration: underline;
}

.b-word{
  font-weight: bold;
}

.slider{
  width: 55%;
  max-height: 60vh;
  min-height: 390px;
  margin: 5px 5px 0 30px;
  border-radius: 7px;
  padding: 0;
  overflow: hidden;
}

.slider-item{
  width: 55%;
  float: left;
  aspect-ratio: 3/ 2;
}

.slider-item img{
  object-fit: fill;
  width: 100%;
  height: auto;
}

img{
  width: 100%;
}

.slider-inner{
  width: 300%;
  display: flex;
  left: 100%;
  animation: slider 18s infinite linear normal backwards;
}

@keyframes slider {
	0% {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	}
        28% {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
        }
        35% {
	transform: translateX(-33.3%);
	-webkit-transform: translateX(-33.3%);
	-moz-transform: translateX(-33.3%);
	-ms-transform: translateX(-33.3%);
	-o-transform: translateX(-33.3%);
        }
	63% {
	transform: translateX(-33.3%);
	-webkit-transform: translateX(-33.3%);
	-moz-transform: translateX(-33.3%);
	-ms-transform: translateX(-33.3%);
	-o-transform: translateX(-33.3%);
	}
	70% {
	transform: translateX(-66.6%);
	-webkit-transform: translateX(-66.6%);
	-moz-transform: translateX(-66.6%);
	-ms-transform: translateX(-66.6%);
	-o-transform: translateX(-66.6%);
	}
	100% {
	transform: translateX(-66.6%);
	-webkit-transform: translateX(-66.6%);
	-moz-transform: translateX(-66.6%);
	-ms-transform: translateX(-66.6%);
	-o-transform: translateX(-66.6%);
	}

}

.inform-box h2::before{
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 40px;/*画像の幅*/
  height: 40px;/*画像の高さ*/
  background-image: url(info-icon.png);
  background-size: contain;
  vertical-align: middle;
}

h2{
  margin: 10px 6px 6px 50px;
  font-size: 22px;
  color: #003f8e;
}

.nword{
  vertical-align: middle;
  font-size: 0.7em;
  margin-left: 8px;
  padding: 2px;
  color: #ec6800;
}

.shimekiri{
  font-size: 0.9em;
}

/*タブ切り替え全体のスタイル*/
.tabs{
  margin-top: 30px;
  padding-bottom: 5px;
  background-color: #fff;
  width: 56%;
  margin: 0 20px 0 30px;
  float: left;
  border: 2px solid #3399ff;
  min-height: 215px;
}

/*タブのスタイル*/
.tab_item{
  width: calc(99.99%/3);
  height: 50px;
  background-color: #3399ff;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  border-bottom: 3px solid #3399ff;
  color: #fff;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"]{
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content{
  display: none;
  padding: 10px 20px 10px 5px;
  clear: both;
} 

.tab_content a{
  color: #0066cb;
  text-decoration: none;
}

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

/*選択されているタブのコンテンツのみを表示*/
#soumu:checked ~ #soumu_content,
#shoubou:checked ~ #shoubou_content,
#yobou:checked ~ #yobou_content{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item{
  background-color: #cce6ff;
  color: #0080ff;
}

.inform-box li{
  list-style: none;
  line-height: 2;
  font-size: 15px;
}

.inform-another{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-around;
  text-align: center;
  vertical-align: center;
  width: 35%;
  margin: 5px auto;
}

.things a{
  color: #333333;
  text-decoration: none;
}

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

.ihan{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #90ee90;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #90ee90;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

.card{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #fef263;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #fef263;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

.koushu{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #ffa666;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #ffa666;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

.nakakita{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #ffb6c1;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #ffb6c1;
  border: dashed 2px #fff;
  font-size: 0.8em;
}

.kouhou{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #a0d8ef;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #a0d8ef;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

.kunren{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #cab8d9;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #cab8d9;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

.clearfix::after{
  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%;
  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;
  overflow-x: hidden;
}

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

/*全体のレイアウトここまで*/

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

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

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

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

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

.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;
}

#n-insta{
  border: none;
  width: 32px;
}

.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;/*上に余白*/
}

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;/*文字の大きさ*/
}

/*共通ここまで*/

.how{
  float: none;
  margin: 1vw 3vw 2vw 0;
  width: 90%;
  margin: auto auto 2vw auto;
  background-color: #fff;
  border-radius: 5px;
  border: 3px solid #5fb3f5;
}

.how .how-title{
  font-size:3.5vw;
  background-color: #5fb3f5;
  padding: 2vw;
  text-align: center;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 1px;
}

.how li{
  line-height: 1.5;
  padding:5px 10px 5px 0;
  margin: 0;
  list-style: none;
  font-size: 3vw;
  text-align: left;
}

.how li a{
  text-decoration: none;
  color: #0066cb;
}

.how li a:hover{
  text-decoration: underline;
}

.b-word{
  font-weight: bold;
}

.slider{
  width: 90%;
  margin: 2vw 4vw 2vw 4vw;
  padding: 0;
  border-radius: 5px;
  text-align: center;
  max-height: 25%;
  overflow: hidden;
}

.slider-item{
  width: 90%;
  float:left;
}

img{
  width:100%;
}

.slider-item img{
  object-fit: fill;
  width: 100%;
  height: 100%;
}

.slider-inner{
  width: 300%;
  display: flex;
  left: 100%;
  animation: slider 18s infinite linear normal backwards;
}

@keyframes slider {
	0% {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	}
        28% {
	transform: translateX(0);
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
        }
        35% {
	transform: translateX(-33.3%);
	-webkit-transform: translateX(-33.3%);
	-moz-transform: translateX(-33.3%);
	-ms-transform: translateX(-33.3%);
	-o-transform: translateX(-33.3%);
        }
	63% {
	transform: translateX(-33.3%);
	-webkit-transform: translateX(-33.3%);
	-moz-transform: translateX(-33.3%);
	-ms-transform: translateX(-33.3%);
	-o-transform: translateX(-33.3%);
	}
	70% {
	transform: translateX(-66.6%);
	-webkit-transform: translateX(-66.6%);
	-moz-transform: translateX(-66.6%);
	-ms-transform: translateX(-66.6%);
	-o-transform: translateX(-66.6%);
	}
	100% {
	transform: translateX(-66.6%);
	-webkit-transform: translateX(-66.6%);
	-moz-transform: translateX(-66.6%);
	-ms-transform: translateX(-66.6%);
	-o-transform: translateX(-66.6%);
	}

}

.inform-box h2::before{
  content: '';
  display: inline-block;
  width: 8vw;/*画像の幅*/
  height: 8vw;/*画像の高さ*/
  background-image: url(info-icon.png);
  background-size: contain;
  vertical-align: middle;
}

h2{
  margin: 10px 6px 6px 50px;
  font-size: 4vw;
  color: #003f8e;
}

.nword{
  vertical-align: middle;
  font-size: 0.7em;
  margin-left: 2vw;
  padding: 2px;
  color: #ec6800;
}

.shimekiri{
  font-size: 0.9em;
}

/*タブ切り替え全体のスタイル*/
.tabs{
  margin-top: 2vw;
  padding-bottom: 4vw;
  background-color: #fff;
  width: 90%;
  margin: auto;
  float: none;
  border: 2px solid #3399ff;
}

/*タブのスタイル*/
.tab_item{
  width: calc(99.99%/3);
  height: 50px;
  background-color: #3399ff;
  line-height: 50px;
  font-size: 3.2vw;
  text-align: center;
  border-bottom: 3px solid #3399ff;
  color: #fff;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"]{
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content{
  display: none;
  padding: 10px 20px 10px 5px;
  clear: both;
} 

.tab_content a{
  color: #0066cb;
  text-decoration: none;
}

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

/*選択されているタブのコンテンツのみを表示*/
#soumu:checked ~ #soumu_content,
#shoubou:checked ~ #shoubou_content,
#yobou:checked ~ #yobou_content{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item{
  background-color: #cce6ff;
  color: #0080ff;
}

.inform-box li{
  list-style: none;
  line-height: 2;
  font-size: 2.9vw;
}

.inform-another{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-around;
  text-align: center;
  vertical-align: center;
  width: 90%;
  margin: 5px auto;
}

.things a{
  color: #333333;
  text-decoration: none;
}

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

.ihan{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #90ee90;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #90ee90;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

.card{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #fef263;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #fef263;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

.koushu{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #ffa666;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #ffa666;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

.nakakita{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #ffb6c1;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #ffb6c1;
  border: dashed 2px #fff;
  font-size: 0.8em;
}

.kouhou{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #a0d8ef;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #a0d8ef;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

.kunren{
  width: 30%;
  padding: 20px;
  margin: 20px auto;
  background-color: #cab8d9;
  border-radius: 7px;
  box-shadow: 0px 0px 0px 7px #cab8d9;
  border: dashed 2px #fff;
  font-size: 0.9em;
}

}