* {
  font-family: Arial, Helvetica, sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
}
body {
  border: 0;
  padding: 0;
  position: relative;
  background-color: #0a0f5a;
  /* min-width: 950px; */
}

body > main >div{
  background-color: #eeebdc;
}
.header_box{
  max-height: 100px;
  height: 10vw;
}

.header{
  position: fixed;
  top: 0;
  display: flex;
  align-items: center; /* 要素を縦方向に中央揃え */
  max-height: 100px;
  height: 10vw;
  width: 100%;
  z-index: 999;
  box-shadow: 0 2px 2px rgba(54,54,54,.06);
  background-color: white;
}

.header_title {
  margin: 0;
  padding: 0;
  font-size: 20px; 
  color: #0a0f5a;
  font-family: "Cousine", monospace;
  font-weight: 700;
}

.title_image{
  max-width: 100px; /*画像サイズ指定*/
  width: 10vw;
  margin: 10px;
  overflow: hidden;
  position: relative;
}

#slideshow {
  position: relative;
  width: 100%; /* 画像の横幅に合わせて記述 */
  height: calc(100vw / 19 * 5); /* 画像の高さに合わせて記述 */
  margin: 0 auto; 
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初期状態では透明 */
  transition: opacity 1s ease-in-out; /* フェードトランジション */
  text-align: right;
}

.slide.active {
  opacity: 1;
}

.slide-description {
  position: relative;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 5px;
  top: -40px;
  font-size: 20px;
  
}
* {
  box-sizing: border-box;
}


#arc {
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  
}

/* #arc_title {
  margin: 40px 0px;

} */

.card{
  display: flex;
  max-height: 300px;
  background-color: #000;
  height: 30vw;
}
.opa{
  display: flex;
  
}
.opa:hover {
  opacity: 0.6;
}
#arc a{
  text-decoration: none; 
  margin-top: 40px;
}

.card-img{
  height: 100%;
  width: 600px;
}
.content_img {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 400px;
  width: 40vw;
}
.card_content{
  background-image: url(images/背景写真B.jpg);
  background-size: cover;
  position: relative;  
}
.card_content div{
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  font-size: 23px;
  padding: 2%;
}


@media (max-width:1260px) {
  .card_content div{
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    font-size: 18px;
    overflow: hidden;
  }

  .content {
    display: flex;
    justify-content: space-around;
    width: 80%;
    align-items: stretch;
    flex-flow: column;
  }
}

#nakano-title{
  margin: 0;
  font-size: clamp(10px, 1.8vw, 35px);
}
#nakano-ex{
  text-align: left;
  font-size: clamp(1px, 1.8vw, 25px);
}
/* @media (max-width:1350px) {
  #nakano-ex{
    font-size: 20px;
  }

} */
@media (max-width:1145px) {
 .content2-item{
  margin: 4%;
 }

}
@media (max-width:960px) {
  /* #nakano-ex{
    font-size: 15px;
  } */

  .slide-description {
    top: -33px;
    font-size: 15px;
  }
}
@media (max-width:720px) {
  /* #nakano-ex{
    font-size: 10px;
  } */
  .slide-description {
    top: -31px;
    font-size: 10px;
  }
}
@media (max-width:490px) {
  /* #nakano-ex{
    font-size: 8px;
  } */
  
  .header_title{
    font-size: 15px;
  }
}
@media (max-width:400px) {
  /* #nakano-ex{
    font-size: 7px;
  } */
  .slide-description {
    top: -29px;
    font-size: 7px;
  }
  .header_title{
    font-size: 14px;
  }
  
}

footer {
  text-align: center;
}


#map {
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  /* margin-top: 50px; */
}

  #map_title,#arc_title,#news_title {

    margin-top: 0px;
  }

.content {
  display: flex;
  justify-content: space-around;
  width: 80%;
  align-items: stretch;
}

.contentItem {
  margin: 40px;
}

.contentItem_Text {
  text-align: center;
  width: 100%; /* 幅を100%に */
  margin: 10px 20px;
}
.item{
  flex: 1;
  text-align: center;
  box-sizing: border-box;
}
.read-more-1 {
  position: relative;
}

.read-more-1 p {
  position: relative;
  margin-bottom: 0;
  font-size: clamp(10px, calc(0.5rem + 1vw), 20px);
  text-align: left;
}

.age{
  color: #000;
  border-bottom: 1px solid #000;
}
.content2{
  display: flex;
  justify-content: space-around;
  width: 80%;
  flex-wrap: wrap;
}
.content2-text{
  text-align: center;
  font-size: clamp(10px, calc(0.5rem + 1vw), 20px);
  
}
.content2-map{
  background-color: #000;
  position: relative;
}
.content2-map p{
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
  color: #fff;
  background-color: #4f96f6;
  padding: 5px 10px;
  
}
.content2-map img{
  cursor: pointer;
  box-shadow: 0 2px 2px rgba(54,54,54,0.6);
  display: block; 
  max-width: 450px;
  max-height: 250px;
  width: 100%;
}
.content2-map:hover img{
  opacity: 0.6;
}

.content2-item a{
  text-decoration: none;
}
/* メディアクエリ */
@media (max-width: 768px) {
  .contentItem {
    margin: 20px;
  }
  .contentItem_Text {
    width: auto; /* 幅を自動調整 */
    margin: 10px 0;
  }
}

@media (max-width: 480px) {
  .contentItem img {
    width: 100%; /* 画像をコンテナの幅に合わせる */
  }
  .contentItem_Text {
    margin: 10px 0;
  }
  .contentItem_moreLink {
    font-size: 18px;
    padding: 5px 10px;
  }
}
#awa_main{
  height: 100%;
}
.mess{
  display: flex;
  flex-flow: column;
  align-items: center;
  height: 86%;
}


.mess div{
  margin:30px;
  font-size: 19px;
}

.news{
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  /* margin-top: 50px; */
}

#news_title span{
  font-size: 1em;
}
#news ul{
  max-width:800px;
  width: 80vw;
  margin: 0 auto;
  margin-top: 50px;
  padding: 0;
}
#news li{
  border-bottom:1px solid #ccc;
  list-style:none;
  margin: 40px 0;
  font-size: clamp(10px, calc(0.5rem + 1vw), 20px);
  
}

#news li span{
    color: #737373;
    vertical-align: middle;
    display: inline-block;
    margin-right: 10px;
}
#news li p{
    color: #666;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.link{
  margin-top: 10px;
  display: block; 
  margin: 0 auto; 
  text-align: center;
  background-color:#0a0f5a;
  font-size: 20px;
  padding: 20px;
  border-radius: 24px;
  width: 20%;
}

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

footer{
  margin-top: -14px;
  text-align: center;
  background-color: #0a0f5a;
  color: #fff;    
  font-size: clamp(10px, calc(0.5rem + 0.5vw), 20px);
}
.topbutton {
  /* ▼ボタンの表示位置を画面の右下に固定 */
  position: fixed; /* ←表示場所を固定 */
  bottom: 30px;   /* ←下端からの距離 */
  right: 5px;    /* ←右端からの距離 */
  width: 8em;     /* ←横幅 */

  /* ▼最初は非表示にしておく */
  display: none;

  /* ▼配色・配置・文字の装飾など */
  background-color: #0a0f5a; /* ←背景色 */
  opacity: 0.75;        /* ←透明度 */
  border-radius: 24px;  /* ←角丸の半径 */
  text-align: center;  /* ←文字の位置 */
  font-size: 70%;     /* ←文字サイズ */
  font-weight: bold;   /* ←文字の太さ */
  margin: 0px;          /* ←外側の余白 */
  padding: 10px;       /* ←内側の余白 */
}
.topbutton a {
  /* ▼リンクの装飾 */
  color: #fff;          /* ←文字色 */
  text-decoration: none; /* ←下線なし */
}
.topbutton a:hover {
  /* ▼マウスが載ったときの装飾 */
  color: #fff;              /* ←文字色 */
  text-decoration: underline; /* ←下線あり */
}

.content-title{
  position: relative;
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0px 0px;
  margin-bottom: min(40px, 0px);
  padding-top: min(13vw,100px);
  border-bottom: solid 2px #0a0f5a;
  color: #0a0f5a;
  /* margin-top: 30px; */
  font-size: clamp(20px, calc(1rem + 1vw), 40px);
}

.YouTube{
  max-width:600px;
  max-height:400px;
  width: 100%;
  height: 40vw;
}