/* ===============================
   初期設定
=============================== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: "M PLUS Rounded 1c", sans-serif;
  background-color:#FFFFFF;
  color:#5C2408;

  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ===============================
   ページトップへボタン
=============================== */

/*位置固定*/
.pagetop{
  position:fixed;
  bottom:20px;
  right:20px;
  width:70px;
  z-index:10000;
}

/*画像のサイズ調整*/
.pagetop img{
  width:100%;
  transition:0.3s;
}

/*大きく、薄くする*/
.pagetop img:hover{
  transform:scale(1.1);
  opacity:0.8;
}

/* ===============================
   ヘッダー
=============================== */
.header{
  position:fixed;
  top:0;
  left:0;

  width:100%;
  height:80px;

  background-color:#FFFFFF;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 40px;

  z-index:9999;/*レイヤーを前に*/

  border-bottom:5px solid #69C4D0; /*ヘッダーの下線*/
  box-shadow:0 7px 6px rgba(0,0,0,0.1); /*ヘッダーの影*/
}

.header h1{
  color:#008080;
  font-size:clamp(10px, 2vw, 16px);
  font-family: "Noto Serif JP", serif;
}

/* ===============================
   ヘッダー内メインナビ
=============================== */
/*ナビ全体*/
.nav{
  display:flex;
  align-items:center;
  gap:30px;
}

/*メニュー名とサブメニュー纏める*/
.menu{
  position:relative;
}

/*メニュー名*/
.menu-head a{
  display:block;
  padding:10px 15px;

  color:#5C2408;
  text-decoration:none;
  font-size:16px;
  transition:0.2s;
}

/*メニューの色変更*/
.menu:hover .menu-head a,
.menu.active .menu-head a{
  background:#FFF685;
  color:#F07F0F;
}

/* HOMEをボタンにする */
.menu-head a.home{
  position:relative; /* これ重要 */

  background:#69C4D0;
  color:#FFFFFF;
  font-weight:bold;
  border-radius:20px;
  padding:6px 16px;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

/* current=現在位置に下線（HOME以外） */
.menu-head a.current:not(.home){
  border-bottom:3px solid #F07F0F;
  font-weight:bold;
}

/* HOMEがcurrentのとき、下に線を追加 */
.menu-head a.home.current::after{
  content:"";
  position:absolute;

  left:0;
  right:0;
  bottom:-6px;

  height:3px;
  background:#F07F0F;
  border-radius:2px;
}

/* ===============================
   サブメニュー
=============================== */
.submenu{
  position:absolute;
  top:100%;
  left:0;

  min-width: calc(200px + 1em);
  padding:10px;

  background:#FFF685;

  display:none;
  flex-direction:column;

  border-radius:8px;
  box-shadow:0 10px 20px rgba(0,0,0,0.2);

  z-index:1000;
}

/*メニューにカーソルを合わせて表示*/
.menu:hover .submenu{
  display:flex;
}

/*サブメニュー*/
.submenu a{
  display:block;
  padding:10px;

  color:#5C2408;
  text-decoration:none;
  border-radius:6px;
}

/*サブメニューの色変更*/
.submenu a:hover{
  background:#FFF685;
  color:#F07F0F;
}

/* ===============================
   左サイドバーレイアウト
=============================== */
/*サイドバーとコンテンツを横並び*/
.container{
  display:flex;
  flex:1;
}

/* 左カラム */
.left-column{
  width:260px;
  flex-shrink:0;
}

/* サイドバー */
.sidebar{
  position:sticky;
  top:80px;

  height:calc(100vh - 80px);

  background:#69C4D0;
  color:#FFFFFF;

  padding:20px;
}

/* サイドバーの文字 */
.sidebar a{
  display:block;
  color:#FFFFFF;
  text-decoration:none;
  margin-bottom:12px;
}


/* 1文字下げない */
.sidebar a.no-indent {
  text-indent: 0;
}

/* 1文字下げる */
.sidebar a.indent {
  text-indent: 1em;
}

/* サイドバーの文字にカーソルを合わせる */
.sidebar a:hover{
  opacity:0.8;
  text-decoration: underline;
}

/* ===============================
   メインコンテンツ
=============================== */

/*ぷるっと出現*/
@keyframes bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.05); }
  60%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.bump {
  animation: bump 0.4s ease;
}

/* ===============================
   フッター
=============================== */
footer{
  border-top:5px solid #69C4D0;
  background:#69C4D0;

  text-align:center;
  padding:10px;

  box-shadow:0 -7px 6px rgba(0,0,0,0.1);
  z-index:10;
}

/*フッター画像*/

footer img{
  width:clamp(100px, 20%, 200px);
  transition:0.3s;
}

footer img:hover{
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
  transform: scale(1.05);
}

/*著作権*/
footer p{
  font-family: "Noto Serif JP", serif;
  font-size:12px;
}

/* ===============================
   ふわっと表示
=============================== */
/*未表示(初期)状態 */
.fade-in{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}

/*表示状態 */
.fade-in.show{
  opacity:1;
  transform:translateY(0);
}

/* ===============================
   PC用ハンバーガー
=============================== */
/*PCではハンバーガー非表示 */
.hamburger{
  display:none; 
}

/* PCでは＋非表示 */
.toggle{
  display:none;
}

/* ===============================
   スマホ対応
=============================== */
@media (max-width: 1024px){

  .header h1{
    font-size:clamp(14px, 4vw, 18px);  /* ← 大きくする */
  }


  /* サイドバー消す */
  .left-column{
    display:none;
  }

  /* ハンバーガー表示 */
  .hamburger{
    display:block;
    position:relative;
    z-index:10000;
  }

  /* コンテンツ幅 */
  .content{
    width:100%;
    padding:20px;
  }
  
  /* フッター画像拡大 */
  footer img{
    width:40%;
  }
  
  /* ===============================
     スマホ対応ナビ本体
  =============================== */
  /* PCの.navを上書きする */
  .nav{
    position:fixed;
    top:80px;
    right:-100%;
    width:70%;
    height:calc(100vh - 80px); /* ヘッダー分引く */

    background:#FFFFFF;

    display:flex;
    flex-direction:column;
    padding:20px;

    overflow-y:auto; /* スクロール */
    -webkit-overflow-scrolling:touch;

    transition:0.3s;
    box-shadow:-5px 0 10px rgba(0,0,0,0.1);

    z-index:9999;
  }

  /* 開いた状態 */
  .nav.active{
    right:0;
  }

  /* ===============================
     スマホ対応メニュー
  =============================== */
  /* PCの.menuを上書きする */
  .menu{
    width:100%;
  }

/* ===============================
   スマホ対応＋ボタン
=============================== */
.menu-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* ＋ボタン押しやすく */
.menu-head a{
  display:inline-block; /* ← これが核心 */
}

/* ＋ボタンを大きく */
.toggle{
  cursor:pointer;
  font-size:18px;
  padding:5px;
  display:block;
}

  /* ===============================
     スマホ対応hover無効
  =============================== */
  .menu:hover .submenu{
    display:none !important;
  }

  /* ===============================
     スマホ対応サブメニュー
  =============================== */
  /* PCの.submenuを上書きする */
  .submenu{
    position:static;
    display:none;
    flex-direction:column;
    width:100%;

    background:none;
    box-shadow:none;
    padding-left:15px;
  }

  /* 開いた時だけ表示 */
  .menu.open .submenu{
    display:flex !important;
  }
}

/* ===============================
   スマホ対応ページトップへボタン非表示
=============================== */
@media (max-width:1024px){
  .pagetop{
    display:none;
  }
}