@charset "UTF-8";

body {
  text-align:center;
  background-color: #EDF1F3;
  font-family: "Noto Serif JP", serif;
  margin: 0px;
}

header {
  background-color:#f0be89;
}
.logo {
  position: fixed;   /* ハンバーガーと同じく固定 */
  top: 20px;
  left: 20px;        /* 左上に配置 */
  width: 250px;       /* 好きなサイズに調整 */
  height: auto;      /* 縦横比を維持 */
  z-index: 30;       /* ハンバーガーより前面に出すなら大きめに */
}

@media screen and (max-width: 768px) {
  .menu {
    width: 85vw;          /* 画面幅に応じて */
    padding: 15px;
  }

  .menu ul {
    margin-top: 40px;
  }

  .menu li {
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .menu {
    width: 100vw;         /* スマホは全幅 */
  }

  .menu li {
    font-size: 0.95rem;
  }
}

.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100%;
  background-color: #eee8aa;
  color: #333;
  transition: right 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
  z-index: 10;
  overflow-y: auto;
  box-shadow: -4px 0 12px rgba(0,0,0,0.2);
}

.menu.open {
  right: 0;
}

.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  cursor: pointer;
  z-index: 20;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #c9c9c9;
  margin: 5px 0;
  transition: 0.4s;
}

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

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

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

.menu ul {
  list-style-type: none;
  padding: 0;
  margin-top: 50px;
}

.menu li {
  padding: 10px 0;
  border-bottom: 1px solid #444;
}

.menu li a {
  color: #333;
  text-decoration: none;
  display: block;
}

/* アコーディオン用 */
.sub-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 15px;
}



.category.open .sub-items {
  max-height: 1000px;
}

.toggle { cursor: pointer; font-weight: bold; }


.firstimg{
  width: 100%;
  height: 100vh; 
  
  background-image: 
    linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),
    url("../../img/firstimg.jpg");

  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}
.firstimg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.8s ease; /* フェード用 */
  font-size: 2.3rem;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
  z-index: 5;
  white-space: pre-line;
}
.hidden {
  opacity: 0;
}
h1{
  padding-bottom: 40px;
}
.cs{
  color: #b13c37;
}
a {
  color: inherit;
}
.highlight{
  background-color: #E6B8AF; /* 背景色 */
  color: black;             /* 文字色 */
  padding: 0px 0px;         
}
.content{
  font-size: 1.1rem;
  padding: 150px;
  margin-top: 0vh; /* firstimg の下に続くように */
  background-color: #EDF1F3;
  background:url("data:image/svg+xml;charset=utf-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='70' height='40' viewBox='0 0 140 80' preserveAspectRatio='none'%3e%3cpath fill='%23EDF1F3' d='M4 1h42l21 36zM3 3l63 36h-42zM1 4l21 36-21 36zM3 77l21-36h42zM46 79h-42l63-36zM69 44v41h-24zM95 85h-24v-41zM73 43l63 36h-42zM74 41h42l21 36zM118 40l21-36v72zM137 3l-21 36h-42zM94 1h42l-63 36zM71 36v-41h24zM45-5h24v41zM-70-40v160h280v-160z'/%3e%3cpath fill='none' stroke='%23808080' stroke-width='.6' d='M47 0h-47v80h47l46-80h47v80h-47zM117 40h-94l-23 40l140-80-23 40 23 40-140-80 23 40M70-5v90'/%3e%3c/svg%3e");
}
h3{
  padding-top:20px;
  line-height:1.5;
}
.btn-link {
  display: inline-block;        
  padding: 12px 20px;           /* ボタンの余白 */
  background-color: #20C3DF;
  color: white;                 /* 文字色 */
  text-decoration: none;        /* 下線を消す */
  font-weight: bold;            /* ちょっと強調 */
  transition: 0.3s ease;        /* アニメーション */
}

/* ホバー時のアクション */
.btn-link:hover {
  background-color: #ff85c6;    /* 少し明るく */
  transform: scale(1.05);       /* ちょい拡大 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 影 */
}

.scroll-guide {
  position: absolute;      /* ページのその場所に固定 */
  bottom: 40px;            /* firstimg の下寄り */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;

  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 3;
}

.scroll-text {
  font-size: 2rem;
  letter-spacing: 0.15em;
  margin: 0;
}

.scroll-arrow {
  display: inline-block;
  margin-top: 5px;        /* ← ひと段落下 */
  font-size: 2.5rem;         /* ← 一回り大きく */
  animation: arrowFloat 1.6s ease-in-out infinite;
}

/* 矢印のふわっと上下アニメーション */
@keyframes arrowFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0);
  }
}


/* ===== フッター ===== */

footer{
  background-color: #211919; 
  padding-top: 3rem;

}

.footer-note {
  max-width: 900px;
  margin: 0 auto 0; 
  font-size: 0.9rem;
  line-height: 1.8;
  color: #cfc6bb;

  text-align: center;
}

.footer-nav {
  height: 5rem;
  padding-bottom: 7rem;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  align-items: center;

  font-size: 1.05rem;
  letter-spacing: 0.08em;      /* 和文を少し上品に */
}

.footer-nav li {
  list-style: none;
}

.footer-nav a {
  color: #f5f3ef;              /* 真っ白より少し抑える */
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
}

/* にじむ下線 */
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #c7b8a6;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.footer-nav a:hover::after {
  opacity: 1;
}

.divider {
  color: #cfc6bb;              /* 白より少し控えめ */
  font-size: 1.1rem;
  user-select: none;
}