/*
Theme Name: Kaito Kubo
Author: Kaito Kubo
Author URI: mailto:info@kaitokubo.com
Description: グラフィックデザイナー 久保海音の公式ポートフォリオ用オリジナルテーマ。
Version: 1.0.0
Text Domain: kaito kubo
*/

@charset "UTF-8";

/* ==========================================================================
   1. Base & Reset (基本設定)
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: #202020;
  overflow-x: hidden;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  /* ▼ 全体の基本サイズを12px、行間を1.6に変更 */
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h3,
h4 {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: bold !important;
  /* ▼ 見出しを12pxに変更 */
  font-size: 13px;
}

a {
  text-decoration: none;
  color: #202020;
  transition: color 0.3s ease;
}

.japanese {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* ==========================================================================
   2. Layout (全体の骨組み・スマホファースト)
   ========================================================================== */
.wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  margin: 0; /* ▼ auto を消して 0 に変更 */
  padding: 0 20px;
  flex: 1;
}

.sidebar {
  display: contents;
}

header {
  order: 1;
  padding: 20px 0 20px 0;
}

main {
  order: 2;
  flex: 1;
  padding: 30px 0 0 0;
}

footer {
  order: 3;
  padding: 10px 0;
  /* ▼ フッターは変更せずそのまま */
  font-size: 0.7rem;
  color: #202020;
}

/* --- PC Layout (768px以上) --- */
@media (min-width: 768px) {
  .wrapper {
    /* FlexboxからGridに変更し、左(メニュー)と右(メイン＆フッター)の2列にします */
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 1fr auto;
    padding: 0 40px;
  }

  /* ...これ以下の .sidebar などはそのまま変更なしでOKです！... */

  .sidebar {
    display: contents; /* PC版でもサイドバーの「箱」を透明化してGridに直接配置 */
  }

  /* メニューは左側（1列目）で、縦2行分をぶち抜きで使って追従させる */
  header {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 60px 20px 20px 0;
  }

  /* mainは右側（2列目）の1段目 */
  main {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding: 60px 0 20px 0;
  }

  /* footerは右側（2列目）の2段目（mainの真下）に配置 */
  footer {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    max-width: none;
    margin: 0;
    padding: 0 0 10px 0; /* 下にゆとりを持たせて美しく着地させる */
  }
}

/* ==========================================================================
   3. Header & Navigation (ヘッダーとメニュー)
   ========================================================================== */
header h1 {
  font-size: 16px;
  font-weight: normal;
  margin: 0;
}

header h2,
header p {
  /* ▼ ヘッダー内テキストを12pxに変更 */
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 1.5rem 0;
}

nav ul {
  /* ▼ メニューを12pxに変更 */
  font-size: 13px;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

/* --- メニュー・リンクの装飾 --- */
.works-a a,
.information-a a,
.news-a a,
.works-b a:hover,
.information-b a:hover,
.news-b a:hover,
.buy,
.buy a,
.contact,
.contact a {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 1px;
}

.works-a,
.works-a a,
.information-a,
.information-a a,
.news-a,
.news-a a,
.buy,
.buy a,
.contact,
.contact a {
  color: #202020;
}

.works-b a:hover,
.information-b a:hover,
.news-b a:hover,
.buy a:hover {
  color: #aaaaaa;
}

.buy,
.contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   4. Projects & Works (作品一覧)
   ========================================================================== */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 560px;
}

.project-item {
  display: flex;
  flex-direction: column;
}

/* プロジェクト情報（キャプション）の箱の下に余白を作る */
.project-info {
  margin-bottom: 13px; /* 15pxの部分はお好みで広げたり縮めたりしてください */
}

/* 画像ブロックの下にも余白を作る（コメントや絵文字との間隔用） */
.project-image {
  width: 100%;
  margin: 0 0 15px 0; /* 下方向に15pxの余白を追加 */
}

.project-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.project-info h3 {
  margin: 0;
  font-weight: normal;
}

.project-info h4 {
  margin: 0 0 1.5rem 0;
  font-weight: normal;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 1px;
}

.project-info p {
  margin: 0;
}

/* ==========================================================================
   5. Components (吹き出し・絵文字・トランプ等)
   ========================================================================== */
.comment {
  /* ▼ コメントは変更せずそのまま */
  font-size: 0.8em;
  line-height: 1.4 !important;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: bold;
  margin: 0 0 10px 10px;
  position: relative;
  display: block;
  width: fit-content;
  padding: 10px 15px;
  background-color: #cccccc;
  border-radius: 15px;
  color: #202020;
}

.comment::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -10px;
  border-top: 0px solid transparent;
  border-bottom: 13px solid transparent;
  border-right: 15px solid #cccccc;
}

.emoji {
  margin: 0 0 0 10px;
  font-size: 4rem;
}

.news-page {
  margin: 0;
}

/* --- Modern Contact Links --- */
.modern-contact {
  display: flex;
  flex-direction: column;
  margin-top: 3px;
}

.modern-contact .link-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modern-contact a {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  /* ▼ コンタクトリンクを12pxに変更 */
  font-size: 13px; 
  color: #202020 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}

.modern-contact a:hover {
  opacity: .5;
  font-style: normal !important;
}

/* ==========================================================================
   8. Mobile Header Layout (スマホ版のヘッダー：左寄せ2列配置)
   ========================================================================== */
@media (max-width: 767px) {
  header {
    display: grid !important;
    grid-template-columns: max-content max-content !important; 
    /* ▼ 魔法の3行目 (1fr) を作って、メニューの余分な高さを吸収させます */
    grid-template-rows: max-content max-content 1fr !important; 
    column-gap: 40px !important; /* ★ここでタイトルとメニューの「隙間」を調整 */
    justify-content: start !important; /* 全体を画面の左端に配置 */
    position: relative !important;
  }

  header h1 {
    font-size: 15px;
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important; /* 前回の設定をリセット */
  }

  header h2 {
    font-size: 15px;
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 0 !important; /* 前回の設定をリセット */
  }

  header nav {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important; /* 1〜3行目をぶち抜きで使う */
    position: static !important; /* 前回の「右上に浮かせる」設定をリセット */
    margin: 0 !important;
  }

  header nav ul {
    margin: 0 !important;
  }
}