@charset "UTF-8";

* {
  box-sizing: content-box;
}
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    background: rgba(255, 255, 255, 0.3);
    border: solid 1px #021d40;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    margin: 50px auto;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 1px solid #021d40;
    border-right: 1px solid #021d40;
    transform: translateY(20%) rotate(-45deg);
}

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  /* ← 横スクロールは防ぐ */
  overflow-y: auto;
  /* ← 縦スクロールはOKに！ */
  position: relative;
  background: url(../img/AdobeStock_609028116.jpeg) no-repeat center center / cover;
  background-size: cover;
}

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
  z-index: 0;
  pointer-events: none;
}

/* ローディング画面*/

.loader-bg {
  align-items: center;
  background-color: #011a4b;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 9999;
}

.loader img {
  height: auto;
  width: 200px;
}

/* 星空設定 */

#particles-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* ← 背景にするためにマイナス値 */
  pointer-events: none;
}

/* 流れ星設定 */
.shooting-star {
  position: fixed;
  top: -5px;
  left: 50%;
  width: 2px;
  height: 2px;
  background: white;
  box-shadow: 0 0 15px 6px white;
  transform: rotate(45deg);
  opacity: 0;
  animation: shooting 1.5s ease-out forwards;
}

@keyframes shooting {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 1;
  }

  100% {
    transform: translate(300px, 300px) rotate(45deg);
    opacity: 0;
  }
}

/* ここまで */


/* 全画面オーバーレイメニュー */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(15px);
  /* ← これがガラスの "ぼかし" 効果 */
  background: rgba(255, 255, 255, 0.3);
  /* ← 半透明白でガラス感 */
}

.sidebar.open nav {
  animation: fadeInUp 0.5s ease forwards;
}


@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 表示状態 */
.sidebar.open {
  opacity: 1;
  pointer-events: auto;
}

/* メニューリスト中央配置 */

.sidebar nav ul {
  display: flex;
  /* ← 横並びの基本 */
  gap: 40px;
  /* ← メニュー同士の間隔 */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar nav ul li {
  margin: 0;
  /* ← 縦間隔いらないので削除 */
}

.space{
  margin: 233px;
}

.sidebar nav ul li a {
  position: relative;
  text-decoration: none;
  color: #021d40;
  font-size: 24px;
  font-weight: bold;
  font-family: 'Shippori Mincho', serif;
}

.sidebar nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 2px;
  background: #333;
  transition: width 0.3s;
}

.sidebar nav ul li a:hover::after {
  width: 100%;
}

#header {
  margin: 0 auto;
  width: 75%;
  text-align: center;
}

.innerWrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 30vh 0 0 0;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
}

.innerWrap_mainvisual {
  margin-bottom: 60px;
}

.mainvisual_content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 60px;
}

.main_logo img,
.main_image img {
  width: 80%;
  max-width: 300px;
  height: auto;
}

.gnav-zabuton{
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: rgba(1, 26, 75, 0.4);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 999;
  pointer-events: none;
}

.globalnav{
  position: fixed;
  top: 30px;
  right: 70px;
  z-index: 1000;
}

.globalnav ul {
 display: flex;
 gap: 30px;
 justify-content: space-between;
}

.globalnav ul li {
 margin: 0;
 font-size: 18px;
 font-family: 'Shippori Mincho',serif;
}

.globalnav ul li a{
  color: #FFFFFF;
  text-decoration: none;
}

.instimg{
  width: 30px;
}

.btn {
  text-align: center;
  margin-top: 60px;
}

.btn img {
  width: 100%;
  max-width: 600px;
  height: auto;
}

.hover10 {
  /* border-radius: 50%; */
  transition: all 0.4s ease 0s;
}

.hover10:hover {
  cursor: pointer;
  transform: scale(1.1, 1.1);
}

.hover9 {
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.hover9::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 0;
  height: 0.8px;
  background: #FFFFFF;
  transform-origin: center top;
  transition: all 0.3s ease 0s;
}

.hover9:hover {
  cursor: pointer;
}

.hover9:hover::after {
  width: 100%;
}

.globalnav ul li {
  font-family: 'Shippori Mincho', serif;
}

.ffJosefin {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-family: 'Shippori Mincho', serif;
  color: #ffffff;
  margin-top: 100px;
}


@keyframes scrollAnimation {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

header .scroll img {
  animation-name: scrollAnimation;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  margin-top: 15px;
}

#about {
  width: 600px;
  background-color: rgba(1, 26, 75, 0.5);
  /* 深めのネイビーブルー＋透明感 */
  margin: 80px auto;
  border-radius: 40px;
  padding: 25px 25px 60px 25px;
  position: relative;
  text-align: center;
}

h2{
  position: relative;
  margin: 30px;
}

h2 img{
width: 100px;
height: auto;
z-index: 5;
}

#about h2 img{
  width: 140px;
  height: auto;
  z-index: 5;
  }

#about p {
  margin: 10px;
  line-height: 1.8em;
  font-family: 'Shippori Mincho', serif;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  color: #ffffff;
  /* 夜空に映える白文字 */
  font-size: 16px;
  /* 少し大きくして読みやすく */
  text-align: center;
}

.aboutbr{
  position: relative;
  width: 30px;
  height: auto;
  text-align: center;
}

#gallery{
  margin: 30px auto;
  text-align: center;
}

#gallery h2 img{
  width: 150px;
  margin: 50px 0 0 10px;
  padding-top: 30px;
  padding-bottom: 30px;
  }

.gallery_slider .slick-slide img {
  width: 100%;
  object-fit: cover;
  display: block;
  padding-bottom: 30px;
}

.gallery_slider .slick-slide {
  box-sizing: border-box;
  padding: 0 10px;
}

.gallery_slider {
  margin: 10px auto;
}

.viewmore {
  position: relative;
  border: 1px solid #021d40;
  border-radius: 3px;
  padding: 0px 52px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  transition: all .3s linear;
  margin: 40px;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 3;
}

.viewmore {
  width: 150px;
  color: #021d40;
  padding: 20px 0;
  display: block;
  border-radius: 4px;
  font-family: 'Shippori Mincho', serif;
  margin: 30px auto;
}

.viewmore:hover {
  background: #021d40;
  color: #FFFFFF;
  transition: all 0.6s ease;
  opacity: 1;
}

/*.viewmore::before {
  position: absolute;
  display: block;
  content: "";
  width: 111px;
  height: 1px;
  background-color: #021d40;
  top: 51%;
  right: -95px;
  transition: all 0.3s linear;
}

.viewmore::after {
  position: absolute;
  display: block;
  content: "";
  width: 14px;
  height: 1px;
  background-color: #021d40;
  transform: rotate(45deg);
  top: 24px;
  right: -95px;
  transition: all 0.3s linear;
}

 .viewmore:hover::before {
  right: -110px;
}

.viewmore:hover::after {
  right: -110px;
} */

/* #news{
  margin: 30px auto;
  text-align: center;
}

#news h2 img{
  width: 150px;
  margin: 50px 0 0 10px;
  padding-top: 30px;
  padding-bottom: 30px;
  }

.news-inner{
  background-color: rgba(255, 255, 255, 0.2);
  max-width: 1000px;
  padding: 30px 0;
  margin: auto;
  text-align: center;
  position: relative;
}

.news-inner li{
display: flex;
width: 70%;
gap:5%;
margin: 5px 10px 5px 30px;
color: #d8d7d7;
}

.news-inner p{
text-decoration: solid 1px #d8d7d7;
} */

#contact {
  margin: 0 auto;
  text-align: center;
  z-index: 2;
  position: relative;
}

#contact h2 img{
  width: 160px;
  margin: 50px 0 0 10px;
  padding-top: 50px;
  }

form {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
  border-radius: 4px;
}

label {
  font-family: 'Shippori Mincho', serif;
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  color: #FFFFFF;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #021d40;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #FFFFFF;
}

textarea {
  resize: vertical;
}

input[type="submit"] {
  position: relative;
  width: 150px;
  font-family: 'Shippori Mincho', serif;
  border: 1px solid #021d40;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  color: #021d40;
  transition: all .3s linear;
  margin: 40px;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 3;
  padding: 20px 0;
}

input[type="submit"]:hover {
  background: #021d40;
  color: #FFFFFF;
  transition: all 0.6s ease;
  opacity: 1;
}

.br-pc{
  display: block;
}

footer{
  font-size: 12px;
  text-align: center;
  margin-top: 80px;
}



@media (max-width: 768px) {


.sidebar nav ul {
flex-direction: column;
gap: 30px;
}

.sidebar nav ul li a{
font-size: 20px;
text-align: center;
}

.gnav-zabuton{
  display: none;
}

  .hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 24px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #ffffff;
  /* ← 白背景にまぎれてる可能性あるからこの色で確認 */
  border-radius: 2px;
  transition: 0.3s;
}

/* ハンバーガーが開いた時の「×」 */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.sidebar{

}

.globalnav{display: none;}

  .br-pc{
    display: none;
  }

  #header {
    text-align: center;
  }

  .mainvisual_content {
    flex-direction: column;
    align-items: center;
  }

  .main_logo img,
  .main_image img {
    width: 70%;
    max-width: 300px;
    height: auto;
  }

  .globalnav ul {
    text-align: center;
  }

footer {
  text-align: center;
  font-size: 10px;
  bottom: 0;
}

#about{
  width: 75%;
}

#about p {
  font-size: 14px;
  text-align: left;
  padding: 5px;
}

.aboutbr{
  text-align: center;
}

.viewmore::before {
display: none;
}

.viewmore::after {
  display: none;
}
}