@charset "UTF-8";

*{box-sizing: border-box;}

body{
  margin:0;
  padding:0;
  color:rgb(70, 70, 70);
  letter-spacing: 0.1em;
  font-family: Arial, Helvetica, sans-serif;
}

a{text-decoration: none;}

p{
  font-size: 16px;
  line-height: 2;
}

img{
  width: 100%;
  height: 100%;
}

main{
  max-width: 1700px;
  margin:0 auto;
}

.inner{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 5%;
  }

.bg-white{
  padding: 100px 0;
  background: url(../img/back.png) no-repeat center center / cover;
}

.bg-green{
  background-color: #f7ffe7;
  padding: 100px 0;
}

.bg-yellow{
  background-color: #fffbc7;
  padding: 50px 0;
}




@media screen and (max-width: 767px){
  p{font-size: 14px;}
  .bg-white, .bg-green{padding:50px 0 20px}
  .bg-yellow{padding: 30px 0;}
}

@media screen and (max-width: 450px){
  p{font-size: 12px;
  line-height: 1.5;}
}
  






/*-----ヘッダー----*/

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.header-wrap {
  display: flex;
  justify-content:space-between;
  max-width: 1700px; 
  width: 100%;
  margin: 0 auto;
}

.logo{
  width: 10%;
  margin: 10px 0 0 10px;
}


@media screen and (max-width: 767px){
  .logo{width: 100px}
}
@media screen and (max-width: 500px){

}




/*------ナビ-----*/
#nav{
  margin-top: 20px;
  display: flex;
  flex-flow: column;
}

.nav_home {
  background: url("../img/menu-home2.png") no-repeat;
  background-size:cover;
  height: 90px;
  width: 185px;
  margin-bottom: 10px;
}
.nav_home {display: inline-block;}
.nav_home:hover {background-color: transparent; }
.nav_home:hover img { visibility: hidden;}

.nav_event {
  background: url("../img/menu-event2.png") no-repeat;
  background-size:cover;
  height: 90px;
  width: 185px;
  margin-bottom: 10px;
}
.nav_event {display: inline-block;}
.nav_event:hover {background-color: transparent; }
.nav_event:hover img { visibility: hidden;}

.nav_contact {
  background: url("../img/menu-mail2.png") no-repeat;
  background-size:cover;
  height: 90px;
  width: 185px;
  margin-bottom: 10px;
}
.nav_contact {display: inline-block;}
.nav_contact:hover {background-color: transparent; }
.nav_contact:hover img { visibility: hidden;}


@media screen and (max-width: 1200px){
  .nav_home,.nav_event,.nav_contact{
    height: 70px;
    width: 145px;
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 600px){
  #nav{ margin-top: 10px;}
  .nav_home,.nav_event,.nav_contact{
    height: 50px;
    width: 100px;
    margin-bottom: 4px;
  }
}





/*-----mv----*/
.mv{
  max-width: 1700px;
  margin: 0 auto;
  height: 100%;
}

@media screen and (max-width: 767px){
  .mv{margin-top: 50px;}
}






/*----news-----*/

.topics{
  font-size: 20px;
  text-align: center;
}

#news{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;   
}

#news::before{
  content:"";
  display: block;
  width:24%;
  order:1;
}
#news::after{
  content:"";
  display: block;
  width:24%;
}

#news a{
  width: 24%;
  margin-bottom: 30px;
}

.news_box{
  text-align: center;
  color:rgb(85, 54, 26);
  border: 1px solid rgb(146, 146, 146);
  background-color: #fff;
}

.news_box:hover{background-color: rgb(255, 251, 191);}

.news_box h2{
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px;
}
.news_box p{
  font-size: 16px;
  margin: 5px 0;
  text-align: center;
}

.more{
  display: block;
  max-width: 400px;
  margin: 30px auto 0;
  line-height: 3;
  background-color: #2bbad9;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  font-size: 20px;
  transition: 0.3s;
  cursor: pointer;
}

.more:hover{
  background-color: #0075d5;
}

@media screen and (max-width: 767px){
  .topics{font-size: 16px;}
  #news{
    justify-content: space-between;

  }
  #news a{
    width: 49%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .more{margin-bottom: 50px;}

  .news_box h2{font-size: 14px;}

  .news_box p{font-size: 12px;}
}




/*------ニュース一覧-----*/
.topics_mv{margin: 50px auto 30px;}




/*------ニュース詳細-----*/
.news_mv{margin-top: 30px;}

.in_news{
  margin-top: 50px;
}

.in_news h2{
  display: inline;
  background-color: #a20002;
  color: #fff;
  padding: 10px;
  margin: 0;
  font-size: 20px;
}

.in_news h1{
  font-weight: 700;
  color: #a20002;
  border-bottom: 5px solid yellow;
  margin-top: 20px;
}

.back{
  display: block;
  max-width: 400px;
  margin: 50px auto 80px;
  line-height: 2.5;
  background-color: #3194b5;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.red{background-color: #a20002;}

.contact-btn:hover{
  background-color: #0c56d5;
  color: #fff;
}

.image{
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.image::after{
  content:"";
  display: block;
  width:32%;
}

.image a{
width: 32%;
margin-bottom: 20px;

}

@media screen and (max-width: 767px){
  .image a{
    width: 48%;
    margin-bottom: 20px;

}
}







/*----TOPページ-----*/

.content{
  display: flex;
  justify-content:end;
  margin: 30px 0;
  align-items: center;
}
.content img{width: 50%;}
.contact p{margin: 45%;}

.canbow{
  display: block;
  width: 30%;
  margin: 0 auto;
}

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

}










/*----フッター-----*/
.footer{
  background: url(../img/footer.png) no-repeat center center / cover;
  height: 200px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

.ft-box{
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.company{
  text-align: left;
  margin-left: 0;
}

.company p{line-height: 1.7;}

h5{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 0;
}

.contact-btn{
  display: block;
  width: 400px;
  margin-top: 10px;
  line-height: 2.5;
  background-color: #5cb531;;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.contact-btn:hover{
  background-color: #0c56d5;
  color: #fff;
}

.sns{
  display: flex;
}
.sns img{
  width: 60px;
  height: 60px;
  display: block;
}

.left{margin-left: 10px;}

@media screen and (max-width: 600px){
  .ft-box{display: block;}
  .company{text-align:center;}
  .contact-btn{
    margin: 0 auto;
    width: 100%;
  }
  .sns{
    justify-content: center;
    margin-top: 20px;
  }
}