/*
 * 'NotoSerifJP' licensed under the SIL Open Font License
 * https://fonts.google.com/noto/specimen/Noto+Serif+JP（配布元のURL）
 */

 @font-face {
	font-family: 'NotoSerifJP';
   font-display: block;
	src: url("./NotoSerifCJKjp-Regular.woff") format("woff");
}

:root {
  --window-height: 0px;
  --kaya-top: 0px;
  --nayumi-top: 0px;
}


body, html {
   margin: 0;  /* 解決するため */
   padding: 0; /* 入れておくと無難 */
   font-family: 'NotoSerifJP';
 }

body {
   background-color: #191970;
   background-image: url("background.jpg");
   background-size: cover;
   background-attachment: fixed;
   background-position: center center;
   font-family: 'NotoSerifJP';
}

.header {
   display: flex;
   width: 100%;
   height: 9vw;
   align-items: center;
   background-color: #011734;
   margin-right: auto;
   margin-left : auto;
   box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 10);
   font-family: 'NotoSerifJP';
   position: fixed;
   -webkit-transform: translateY(0);
   transform: translateY(0);
   -webkit-transition: -webkit-transform .4s ease;
   transition: transform .4s ease;
   transition: transform .4s ease, -webkit-transform .4s ease;
   z-index: 1;
 }

.header img {
   width: 6vw;
}

.header--unpinned {
  -webkit-transform: translateY(-150%);
  transform: translateY(-150%);
}

.title {
   font-size: 4.5vw;
   text-shadow: 1px 2px 3px #808080;
   font-family: 'NotoSerifJP';
}




.menu-btn {
   position: fixed;
   display: flex;
   top: 10px;
   right: 8px;
   height: 35px;
   width: 35px;
   justify-content: center;
   align-items: center;
   z-index: 300;
   background-color: black;
 }

 .menu-btn:hover {
   cursor: pointer;
 }

 .menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: "";
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}


#menu-btn-check {
   display: none;
 }
  
 #menu-btn-check:checked ~ .menu-btn span {
   background-color: rgba(
     255,
     255,
     255,
     0
   );
 }


 #menu-btn-check:checked ~ .menu-btn span::before {
   bottom: 0;
   transform: rotate(45deg);
 }
 #menu-btn-check:checked ~ .menu-btn span::after {
   top: 0;
   transform: rotate(-45deg);
 }


 .menu-content {
   width: 100%;
   height: var(--window-height);
   position: fixed;
   top: 0;
   left: 100%;
   z-index: 200;
   background-color: black;
   transition: all 0.5s;
 }
 .menu-content ul {
   padding: 70px 10px 0;
   list-style:none;
   margin: 0 auto;
   z-index: 100;
   font-family: 'NotoSerifJP';
   background-color: black;
 }
 .menu-content ul li {
   border-bottom: solid 1px #ffffff;
   list-style: none;
   padding: 1vw 1vw 0.8vw 0.9vw ;
   font-size: 2.5vw;
   color: #e0ffff;
   font-family: 'NotoSerifJP';
   background-color: black;
 }
 
  
 #menu-btn-check:checked ~ .menu-content {
   left: 85%;
 }







 

 
.main-panel {
   width: 96%;
   flex-grow: 1;
   background-color: #e0ffff;
   font-family: 'NotoSerifJP';
   margin: auto;
}
 


.top_picture img { width: 90%; }

.top_picture { text-align: center; }

#news-link {
   cursor: pointer;
}

#news-link:hover {
   color: black;
   background-color: white;
   font-family: 'NotoSerifJP';
}

#contents-link {
   cursor: pointer;
   font-family: 'NotoSerifJP';
}

#contents-link:hover {
   color: black;
   background-color: white;
   font-family: 'NotoSerifJP';
}

#about_us-link {
   cursor: pointer;
   font-family: 'NotoSerifJP';
}

#about_us-link:hover {
   color: black;
   background-color: white;
   font-family: 'NotoSerifJP';
}

#contact-link {
   cursor: pointer;
   font-family: 'NotoSerifJP';
}

#contact-link:hover {
   color: black;
   background-color: white;
   font-family: 'NotoSerifJP';
}

.news-section {
   text-align: center;
   font-size: 4.5vw;
   color: #4c4948;
   font-family: 'NotoSerifJP';
}

.news-topic{
  width: 70%;
  margin: auto;
  word-wrap: break-word;
  font-size: 100%;
}

.contents-section {
   text-align: center;
   font-size: 4.5vw;
   color: #4c4948;
   font-family: 'NotoSerifJP';
}

.about_us-section {
   text-align: center;
   font-size: 4.5vw;
   color: #4c4948;
   font-family: 'NotoSerifJP';
}

.contact-section {
   text-align: center;
   font-size: 4.5vw;
   color: #4c4948;
   font-family: 'NotoSerifJP';
}

.image-gallery{
   width: 100%;
   text-align: center;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   font-family: 'NotoSerifJP';
}

.image-container {
   display: inline-block;
   text-align: center;
   padding: 10px;
   box-sizing: border-box;
   flex-basis: 49.7%; /* 画像の幅を調整（3つ並ぶので1つあたりの幅は全体の3分の1） */
   font-family: 'NotoSerifJP';
 }
 
 .gallery-image {
   max-width: 100%;
   max-height: 100%;
   opacity: 1;
   transition: opacity 0.3s ease;
   cursor: pointer;
   font-family: 'NotoSerifJP';
 }
 
 .gallery-image:hover {
   opacity: 0.5;
   font-family: 'NotoSerifJP';
 }
 
 .image-description {
   text-align: center;
   font-family: 'NotoSerifJP';
   font-size: 3vw;
 }

 .reference {
   width: 90%;
   margin: auto;
   word-wrap: break-word;
   font-size: 100%;
 }

 .gallery-image2 {
   max-width: 100%;
   max-height: 100%;
   opacity: 1;
   transition: opacity 0.3s ease;
   font-family: 'NotoSerifJP';
 }

 .image-container2 {
   display: inline-block;
   text-align: center;
   padding: 10px;
   box-sizing: border-box;
   flex-basis: 35%; /* 画像の幅を調整（3つ並ぶので1つあたりの幅は全体の3分の1） */
   font-family: 'NotoSerifJP';
   position: relative;
 }

 .image-container3 {
   display: inline-block;
   text-align: center;
   padding: 10px;
   box-sizing: border-box;
   flex-basis: 35%; /* 画像の幅を調整（3つ並ぶので1つあたりの幅は全体の3分の1） */
   font-family: 'NotoSerifJP';
   position: relative;
 }

 .image-description2 {
   text-align: center;
   font-family: 'NotoSerifJP';
   font-size: 100%;
 }

 #kaya_intro_pop {
  display: none;
  position: absolute;
  top: var(--kaya-top);
  left: 30%;
  right: -50%;
  transform: translateX(-50%);
  z-index: 1;
  background: #332b37;
  padding: 4px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.8;
  animation: fadeIn 0.6s;
  color: #FFF;
  border-radius: 3px;
  filter: drop-shadow(0px 1px 4px #aaa);
  text-align: left;
 }

 #kaya_intro_pop::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top: 8px solid #332b37;
 }

 #nayumi_intro_pop {
  display: none;
  position: absolute;
  top: var(--nayumi-top);
  left: 70%;
  right: -90%;
  transform: translateX(-50%);
  z-index: 1;
  background: #a86958;
  padding: 4px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.8;
  animation: fadeIn 0.6s;
  color: #FFF;
  border-radius: 3px;
  filter: drop-shadow(0px 1px 4px #aaa);
  text-align: left;
 }

 #nayumi_intro_pop::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top: 8px solid #a86958;
 }

 .copyright{
  color: #000;
  margin: auto;
  text-align: center;
  font-family: 'NotoSerifJP';
  font-size: 85%;
}



footer {
  width: 100%;
  background-color: #afeeee;
  margin: auto;
  font-family: 'NotoSerifJP';
}

.footer_title {
 color: #000;
 font-size: 150%;
 margin: auto;
 text-align: center;
}

.footer_title :hover {
  color: #008b8b;
 }

.footer_menu {
 color: #000;
 font-size: 120%;
 margin: auto;
 text-align: center;
}

.footer_menu :hover {
  color: #008b8b;
 }

 .search {
  width: 95%;
  text-align: right;
 }

.timeline {
  max-width: 70%;
  padding: 10px;
  margin: auto;
}