@layer reset, base, layout, components, utilities;
/* 土台、枠踏み、部品、上書き */



/* ========================================================================== */
@layer reset {
  /* box-sizingをここで一括設定 */
  :where(*) {
    box-sizing: border-box;
  }

  /* 余白のリセット */
  :where(html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure) {
    margin: 0;
    padding: 0;
  }

  p, h1, h2, h3, h4, h5, h6, span {
    overflow-wrap: break-word;
  }

  :where(ul, ol) {
    list-style: none;
  }

  /* 画像の突き抜け防止（追加推奨） */
  :where(img, svg, video) {
    display: block;
    max-width: 100%;
    height: auto;	/* 縦横比を維持する */
  }
}




/* ========================================================================== */
@layer base {
  html {
    /* box-sizingはresetで完結させるなら不要 */
    font-family: sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%; /* モバイルでの文字サイズ自動調整防止 */
  }

  :root {
    /* ===== カラーパレット ===== */
    --color-navy: #000080;	/* ネイビー */
    --color-white: #e6eae6;	/* フロスティホワイト */
    --color-red: #dc143c;	/* クリムゾンレッド */
    --color-aqua: #afdfe4;	 /* アクアブルー */
    --color-pure-black: #121212;	/* 黒 */
    --color-pure-white: #ffffff;	/* 白 */
    --color-off-white: #f5f7ff;		/* 白 */
    --color-soft-gray: #f0f2f5;		/* グレー（淡） */
    --color-dark-gray: #333333;		/* グレー（濃） */
    --color-cyan: #4dd0e1;		/* 青系 リンク色 */

    /* ===== Theme（ light mode ） ===== */
    /* ─── 【デフォルト：モバイル・ライトモード用の配色】 ─── */
    --bg-body: var(--color-soft-gray);       /* 画面全体の背景：薄いグレー */
    --bg-wrapper: var(--color-pure-white);   /* コンテンツの背景：白 */
    --txt-main: var(--color-dark-gray);      /* 文字色：濃いグレー */    
    --action-color: var(--color-cyan);		/* リンクなど */
    --action-hover: var(--color-dark-gray);	/* ホバー */
    --point-color: var(--color-navy);	/* 目立たせる場所 */


    /* ===== Spacing ===== */
    --base-space: 8px;                   /* 基本 */
    --sp-1: var(--base-space);           /* 8px */
    --sp-2: calc(var(--base-space) * 2); /* 16px */
    --sp-4: calc(var(--base-space) * 4); /* 32px */
    --sp-5: calc(var(--base-space) * 5); /* 40px */
  }


  @media (prefers-color-scheme: dark) {
    :root {
      /* ===== Theme（ dark mode ） ===== */
      --bg-body: #000000;                     /* 画面全体の背景：完全な黒 */
      --bg-wrapper: var(--color-pure-black);  /* コンテンツの背景：少し明るい黒 */
      --txt-main: var(--color-off-white);     /* 文字色：ほぼ白 */
      --action-hover: var(--color-off-white);
      --point-color: var(--color-off-white);
    }
  }

  body {
    background-color: var(--bg-body);
    color: var(--txt-main);
    transition: background-color 0.3s, color 0.3s; /* 切り替わりを滑らかに */
  }

  a {
    color: var(--action-color);
    text-decoration: underline;
    transition: color 0.5s;
  }

  a:hover {
    color: var(--txt-color);
    text-decoration: none;	
  }

  h1,h2,h3,h4,h5,h6 {
    font-size: 1.1rem;
    font-weight: bolder;			/* 太字 */
    border-left: var(--sp-1) solid var(--point-color);
    margin: var(--sp-1) 0;
    padding: var(--sp-2);
    padding-left: var(--sp-1);
  }



  /* ===== PC min-width 768px ===== */
  /* PCでは、端末の設定（ライト/ダーク）に関係なく、常に「背景画像＋黒系」で固定する */
  @media screen and (min-width: 768px) {
    :root {
      /* ===== Theme（ PC ） ===== */
      /* PC用に、変数を強制的にダークモードの配色にする */
      --bg-body: transparent;                 /* 背景画像を見せるため透明に */
      --bg-wrapper: rgba(18, 18, 18, 0.85);  /* 画像を透かす半透明の黒 */
      --txt-main: var(--color-off-white);     /* 文字色：ほぼ白 */
      --action-hover: var(--color-off-white);
      --point-color: var(--color-off-white);
    }

    body {
      background-image: url(https://shumijin.net/img/site-bak.jpg);	/* 画像ファイルの指定 */
      background-position: center center;	/* 画像を常に天地左右の中央に配置 */
      background-repeat: no-repeat;		/* 画像をタイル状に繰り返し表示しない */
      background-attachment: fixed;		/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
      background-size: cover;			/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  }
}

}



/* ========================================================================== */
@layer layout {
  .wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    display: flow-root;  /* はみだし防止 */
  }

  .l-contents {
    padding: var(--sp-2);
    margin: 0;
    border: 1px solid var(--color-off-white);
    border-radius: 15px;
    min-height: 80vh;
  }

  .l-flex-container {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    gap: var(--sp-2);      /* 要素間の溝 */
  }


  /* ===== PC min-width 768px ===== */
  @media screen and (min-width: 768px) {
  .wrapper {
    background: rgba(5,5,5,0.50);	/* 背景画像の透過用css 最後の数字で透過率を決定 */
  }

  .l-contents {
    padding: var(--sp-2);
    margin: var(--sp-2);
    min-height: 100vh;
  }

  .l-flex-container {
    flex-direction: row; /* PCでは横並び */
  }

  .l-main {
    flex: 1;            /* メインを広げる */
  }

  .l-sidebar {
    width: 300px;       /* サイドバーの幅を固定 */
  }
}

}



/* ========================================================================== */
@layer components {
  .c-count-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
  
  .c-count {
    padding: 0 10px;
    margin: 0;
    margin-left: var(--sp-1);
    font-weight: bold;
}

  .c-count-txt {
    color: var(--color-red);
}

/* header 初期状態（スマホ）は非表示 */
.c-fixed-header {
  display: none;
}

/* リスト共通 */
.c-menu-list {
  display: flex; /* 基本はflexにしておくと縦横の切り替えが楽 */
}

.c-menu-list__item {
  /* 各項目ごとの共通ルールがあればここに（例：font-sizeなど） */
}

.c-menu-list__link {
  display: block; /* クリック範囲を広げる */
  padding: var(--sp-2) var(--sp-2); /* 内側の余白（クリックできるエリアになる） */
  transition: background-color 0.5s, color 0.5s; /* ホバー時のアニメーション */
}

.c-menu-list__link:hover {
  opacity: 0.8; /* ホバー時に少し透明にする共通エフェクト */
  background-color: #555555;
}

.c-menu-list__link-photo {
  display: block; /* クリック範囲を広げる */
  padding: var(--sp-2);
  transition: background-color 0.5s, color 0.5s; /* ホバー時のアニメーション */
}

.c-menu-list__link-photo:hover {
  background-color: #555555;
}

.c-menu-list__img {
  display: block;     /* ブロック要素にする */
  margin-inline: auto;/* 左右中央寄せ（margin: 0 auto; と同じ意味の最新の書き方） */
  width: 100%;    /* 親要素からはみ出さないお守り */
  max-width: 600px;    /* 親要素からはみ出さないお守り */
  margin: var(--sp-2) auto;
  height: auto;       /* 比率を維持 */
}

/* 横並びメニュー（ヘッダーやフッター用） */
.c-menu-list--horizontal {
  flex-direction: row; 
  align-items: center;
  justify-content: center; /* 中央寄せなど */
}

/* 縦並びメニュー（サイドバーやドロワーメニュー用） */
.c-menu-list--vertical {
  flex-direction: column; 
  width: 100%; /* 横幅いっぱいに広げる */
}
.c-menu-list--vertical .c-menu-list__item {
  border-bottom: 1px solid #ddd; /* 縦並び特有の区切り線 */
}

.c-menu-list--global {
  display: none; 
}

/* フッターメニューはスマホで縦並びにする */
.c-menu-list--footer {
  flex-direction: column;
  width: 100%;
  text-align: center; /* 必要に応じて中央寄せ */
}


/* ==========================================================================
   ドロワーメニューの配置（スマホ用）
   ========================================================================== */
.c-drawer {
  position: fixed;
  top: 0;
  right: -100%; /* 最初は右側の画面外に完全に隠しておく */
  width: 80%;   /* 画面幅の80%サイズで開く */
  height: 100vh;
  background-color: var(--bg-body);
  z-index: 9999; /* 一番手前に表示 */
  padding-top: 80px; /* ボタンと被らないように上の余白を確保 */
  
  /* じわっとスライドして出てくるアニメーション */
  transition: right 0.5s ease; 
}

/* ボタンが押されて「is-open」クラスがついたら、画面内に引っ張り出す */
.c-drawer.is-open {
  right: 0; 
}

/* ボタンの見た目と位置 */
.c-hamburger {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
}

.c-hamburger span {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--point-color);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ×に変わる設定 */
.c-hamburger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.c-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.c-hamburger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* オーバーレイ */
.c-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 9998;
}

.c-overlay.is-open {
  opacity: 1;
  visibility: visible;
}


/* オーバーレイ背景の移動防止 */
body.is-fixed {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

/* ドロワーメニューの中身だけはスクロールできるように許可しておく */
.c-drawer.is-open {
  touch-action: auto;
  overflow-y: auto;
}


  /* ===== PC min-width 768px ===== */
  @media screen and (min-width: 768px) {
  .c-fixed-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }

  .c-menu-list--global {
    display: flex; /* 非表示を解除 */
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  /* フッターメニューもPCでは横並びにする */
  .c-menu-list--footer {
    flex-direction: row; /* 縦から横並びに変更 */
    justify-content: center;
  }

  /* ハンバーガーメニュー */
  .c-hamburger,
  .c-drawer {
    display: none;
  }
}

}



/* ========================================================================== */
@layer utilities {
  .u-mb {
    margin-bottom: var(--sp-1);
}

  .u-mt {
    margin-top: var(--sp-1);
  }

  .u-mt2 {
    margin-top: var(--sp-2);
  }

  .u-mt4 {
    margin-top: var(--sp-4);
  }

  .u-my-2 {
    margin: var(--sp-4) 0;
  }
}