/* ===== 全体のスタイル ===== */
* {
  margin: 0;
  padding: 0;
}


/* ===== ヘッダーのスタイル ===== */
/* ヘッダー */
.slideBox {
  height: 51.5%;
  position: relative;
  overflow: hidden;
  padding: 220px;
  
}

/* 画像について */
.item1 {
  opacity: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30 0s infinite;
}

.item1:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.item1:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

.item1:nth-of-type(4) {
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}

.item1:nth-of-type(5) {
  -webkit-animation-delay: 24s;
  animation-delay: 24s;
}


/* 画像切り替えアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  26% {
    opacity: 0;
    transform: scale(1.07) ;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  26% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

h1.scroll{
  
  text-align: center;
  color: white;
  font-family: Kosugi;
  font-size: 25px;
  position: relative;
  z-index: 20;
  margin-top: 90px;
  letter-spacing: 5px;
  
}

/*アニメーション用CSS*/
.updown{
  /* アニメーションの名前 */
  animation-name:UpDown;
  /* アニメーションの１回分の長さ */
  animation-duration: 1.5s;
  /* アニメーションの回数 */
  animation-iteration-count: infinite;
  /* アニメーションの進行具合 */
  animation-timing-function: ease-in-out;
  /* アニメーション再生の向き */
  animation-direction: alternate;
}
  /* アニメーションの設定 */
@keyframes UpDown{
  /* 開始地点 */
  0%{
  /* Y軸0px */
  transform: translateY(0);
  }
  /* 終了地点 */
  100%{
  /* Y軸50px */
  transform: translateY(20px);
  }
}

a.emergency{
  
  color: white;
  font-family:Kosugi;
  font-size:20px;
  background-color:transparent;
  width: 145px;
  height:25px;
  position: absolute;
  top: 90%; right: 13%;
  right:50px;
  bottom:50px;
  padding: 18px 20px 15px 23px;
  border-radius: 1000px;
  border-color: white;
  border-style: solid;
  border-width: 3px;
  z-index: 15;
  transition: background-color 0.5s ease 0s;
  
}

a.emergency:hover{
  
  background-color: rgba(255, 200, 54, 0.8);
  font-family: Kosugi;
  
  
}

/* Headerの緊急時のお役立ちサイト */
img.websitelogo{
  
  width: 600px;
  text-align: center;
  z-index: 12;
  position: relative;
  top: 40%;
  left: 48%;
  transform: translate(-50%,-50%);
  
}

img.bookmark{
  width: 550px;
  text-align: center;
  z-index: 12;
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translate(-50%,-50%);
  
  
}

section.menu{
  
  width: cover;
  padding: 70px;
  padding-bottom: 10px;
  background-color: #f5f5f5;
  border-radius: 100px 100px 0 0;
  
}

h1.menu{
  
  text-align: center;
  font-size: 60px;
  font-style: Kosugi;
  margin-bottom: 50px;
  
}

/* ===== CETEGORYのスタイル ===== */
section.category{

width: cover;
padding:350px;
padding-top: 0px;
padding-bottom: 130px;
background-color: #f5f5f5;
display:grid;
grid-template-columns: 1fr 1fr 1fr

}

/* 事故・事件BOX */
div.police{
  
  padding:30px;
  width:220px;
  background-color:white;
  border-color:#6fa24a;
  border-style:solid;
  border-width: 4px;
  border-radius:30px;
  margin:20px;
  text-align: center
  
}

div.police:hover{
  
  background-color:#ecf4ec;
  
}

/* 事故・事件BOX LOGO */
img.policelogo{
  
  width:80px;
  margin-bottom: 10px
}

/* 火事BOX */
div.fire{
  
  padding:30px;
  width:220px;
  background-color:white;
  border-color:#6fa24a;
  border-style:solid;
  border-width: 4px;
  border-radius:30px;
  margin:20px;
  text-align: center
  
}

div.fire:hover{
  
  background-color:#ecf4ec;
  
}

/* 火事BOX LOGO */
img.firelogo{
  
  width:80px;
  margin-bottom: 10px
}

/* 救急・救助BOX */
div.rescue{
  
  padding:30px;
  width:220px;
  background-color:white;
  border-color:#6fa24a;
  border-style:solid;
  border-width: 4px;
  border-radius:30px;
  margin:20px;
  text-align: center
  
}

div.rescue:hover{
  
  background-color:#ecf4ec;
  
}

/* 救急・救助BOX LOGO */
img.hospitallogo{
  
  width:80px;
  margin-bottom: 10px
}

/* 災害BOX */
div.weather{
  
  padding:30px;
  width:220px;
  background-color:white;
  border-color:#6fa24a;
  border-style:solid;
  border-width: 4px;
  border-radius:30px;
  margin:20px;
  text-align: center
  
}

div.weather:hover{
  
  background-color:#ecf4ec;
  
}

/* 災害BOX LOGO */
img.weatherlogo{
  
  width:80px;
  margin-bottom: 10px
}

/* その他BOX */
div.other{
  
  padding:30px;
  width:220px;
  background-color:white;
  border-color:#6fa24a;
  border-style:solid;
  border-width: 4px;
  border-radius:30px;
  margin:20px;
  text-align: center
  
}

div.other:hover{
  
  background-color:#ecf4ec;
  
}

/* その他BOX LOGO */
img.otherlogo{
  
  width:80px;
  margin-bottom: 10px
}

/* 公衆電話の使い方BOX */
div.call{
  
  padding:30px;
  width:220px;
  background-color:white;
  border-color:#6fa24a;
  border-style:solid;
  border-width: 4px;
  border-radius:30px;
  margin:20px;
  text-align: center
  
}


div.call:hover{
  
  background-color:#ecf4ec;
  
}

/* 公衆電話BOX LOGO */
img.calllogo{
  
  width:80px;
  margin-bottom: 10px
}

/* pのスタイル */
p{
  
  color:grey;
  font-size:15px;
  font-family: Kosugi;
  
}

/* リンク文字のスタイル */
a{
  
  color:black;
  text-decoration: none;
  
}

/* h2のスタイル */
h2{
  
  font-family: Kosugi;
  font-size:40px;
  margin-bottom: 10px;
 
  
}

/* Q&Aのスタイル */
section.question{
  
  position: relative;
  background-color: white;
  background-position: center;
  background-size: cover;
  padding:250px;
  padding-bottom: 90px;
  padding-top:80px;
  
}

/* Q&Aのスタイル */
h2.question{
  
  padding-left: 30px;
  padding-right: 30px;
  font-family: Kosugi;
  text-align: left;
  font-size: 25px;
  line-height: 30px;
  margin-bottom: 30px;
  

}

h2.answer{
  
  padding-left: 30px;
  padding-right: 30px;
  font-family: Kosugi;
  color: #494848;
  text-align: left;
  font-size: 20px;
  line-height: 30px;
  

}


/* Q&Aの見出しのスタイル */
h2.questionheader{
  
  font-family: Kosugi;
  text-align: center;
  padding-top: 50px;
  margin-bottom: 60px;
  font-size: 60px;
}

/* Q&A 文字の下の余白 */
div.question{
  
  margin-bottom: 30px;
  background-color: #f5f5f5;
  padding:45px;
  text-align: center;
  width: 75%;
  border-radius: 20px;
  margin-left: 10%;
}


p.button{
  
  font-family:Kosugi;
  font-size: 20px;
  margin-top: 20px;
  color:black;
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: black;
  text-decoration-thickness: 2px;
  width: 300px;
  margin-left: 75px;
  
}

p.button:hover{
  color:grey;
  text-decoration-color: grey;
  
}

.black {
  color:black;
  
}

span.red{
  
  color: #F37167;
  font-family: Kosugi;
  font-size: 30px;
}

.green {
  
  color: #6fa24a;
  font-family: Kosugi;
  font-size: 30px;
  
}
  
  
/* PROFILEのスタイル */
section.about{
  
  background-color: white;
  text-align: center;
  font-size: 40px;
  padding:250px;
  padding-bottom: 170px;
  padding-top:180px;
  
  
  
}

/* PROFILEの文字スタイル */
h3.about{
  
  margin-bottom: 30px;
  font-family: Kosugi;
  text-align: left;
  padding-left: 17%;
  font-size: 20px;
  line-height: 40px;
  padding-top: 50px;
  color: #494848;
  margin: 0 auto;
  
}


h1.abouttitle{
  
  font-family: Kosugi;
  text-align: center;
  
}

span.big{
  
  margin-right: 8px;
  margin-bottom: 3px;
  font-size: 80px;
}



/* ===== フッターのスタイル ===== */
/* フッター */
footer {
  
  color: white;
  background-color: #6fa24a;
  text-align: left;
  padding: 70px;
  
}

.mainfooter{
  
  display: flex;
  
}

img.footerlogo{
  
  width: 297px;
  height: 210px;
  text-align: left;
  margin-left: 100px;
  margin-right: 250px;
  
}

.sitemap{
  
  display:flex;
  margin-top: 60px;
  
}

div.top{
  margin-right: 30px;
  margin-left: 100px;
  display: block;
  
}

div.category{
  display: display;
  margin-left: 50px;
  
  
}

a.footerlink{
  
  color:white;
  font-family: Kosugi;
  font-size: 15px;
  
  
}

a.footerlink:hover{
  
  color:#FFC836;
  font-family: Kosugi;
  
  
}

div.footerlink{
  
  margin-bottom: 15px;
  
}

h3.footerheader{
  
  font-size:22px;
  font-family: Kosugi;
  margin-bottom: 20px;
  letter-spacing: 3px;


}

p.copy{
  
  color: #c5dcc4;
  
  font-family: Kosugi;
  margin-left: 150px;
  
}

div.divider1{
  
  display: block;
  text-align: left;
  
  
}

div.divider2{
  
  display: block;
  text-align: left;
  margin-left: 150px;
  
}


div.display{
  
  display:flex;
  
  
}