/*
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: "Times New Roman", Times, "Hiragino Mincho ProN", serif;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 画面の高さ分を最低確保する */
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

h1,
h3,
h4 {
  font-family: Helvetica, "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: bold !important;
  font-size: 0.9rem;
}

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;
  padding: 0 20px; /* スマホ時の左右余白 */
  flex: 1; /* 余った高さを吸収してフッターを下へ押しやる */
}

.sidebar {
  display: contents; /* スマホ版: 箱を「無いもの」として扱い中身を展開 */
}

header {
  order: 1; /* スマホでは1番上 */
  padding: 20px 0 20px 0;
}

main {
  order: 2; /* スマホでは2番目（真ん中） */
  flex: 1;
  padding: 30px 0;
}

footer {
  order: 3; /* スマホでは1番下 */
  padding: 10px 0;
  font-size: 0.7rem;
  color: #202020;
}

/* --- PC Layout (768px以上) --- */
@media (min-width: 768px) {
  .wrapper {
    flex-direction: row;
    padding: 0 40px; /* 画面が広いときは余白を広げる */
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ヘッダーとフッターを上下に引き離す */
    flex: 0 0 240px;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 60px 20px 20px 0;
  }

  header {
    padding: 0;
    position: static;
    height: auto;
  }

  main {
    padding: 60px 0 20px 0;
  }

  footer {
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

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

header h2,
header p {
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 1.5rem 0;
}

nav ul {
  font-size: 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

/* --- メニュー・リンクの装飾 --- */

/* 1. 下線を引く指定（現在地 ＆ ホバー時 ＆ buy/contact） */
.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;
}

/* 2. 紫色にする指定（現在地 ＆ buy/contact） */
.works-a,
.works-a a,
.information-a,
.information-a a,
.news-a,
.news-a a,
.buy,
.buy a,
.contact,
.contact a {
  color: #909090;
}

/* 3. 黒色＋イタリックにする指定（他ページをホバーした時） */
.works-b a:hover,
.information-b a:hover,
.news-b a:hover {
  color: #202020;
  font-style: italic;
}

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

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

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

/* --- Worksの画像エリア（WordPressエディタ対応） --- */
.project-image {
  display: flex;
  flex-direction: column;
  gap: .6rem; /* ★ここで画像同士の隙間を自由に調整できます（10pxや20pxなど） */
  width: 100%;
  margin: 0 0 .6rem 0;
}

.project-image figure {
  margin: 0; /* WordPressのデフォルト余白を消す */
  padding: 0;
  width: 100%;
}

.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-decoration-color: #909090;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: 1px;
}

.project-info p {
  margin: 0 0 .4rem 0;
}

/* ==========================================================================
   5. Components (吹き出し・絵文字・トランプ等)
   ========================================================================== */
.comment {
  font-size: 0.75em;
  line-height: 1.5 !important; /* 最強のルール */
  font-family: Helvetica, "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: bold;
  margin: 0 0 10px 10px; /* 左側に「しっぽ」の空間（10px） */
  position: relative;
  display: block;
  width: fit-content;
  padding: 10px 15px;
  background-color: #dbdbdb;
  border-radius: 15px;
  color: #707070;
}

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

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

.news-page {
  margin: 0;
}

/* --- トランプのクリック切り替え --- */
.container {
  display: inline-block;
  margin: 40px 0 10px 0;
  line-height: 1;
}

.trump-checkbox {
  display: none;
}

.trump-label {
  cursor: pointer;
  display: inline-block;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.trump-label .card-back {
  display: inline;
}

.trump-label .card-front {
  display: none;
  color: rgb(253, 0, 29);
}

.trump-checkbox:checked + .trump-label .card-back {
  display: none;
}

.trump-checkbox:checked + .trump-label .card-front {
  display: inline;
}

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

.modern-contact a {
  font-family: Helvetica, "Hiragino Kaku Gothic ProN", sans-serif;
  color: #909090 !important; /* 文字色（アイコンと同色） */
  text-decoration: none !important; /* デフォルトの下線を消す */
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}

/* マウスを乗せた時（ホバー）の動き */
.modern-contact a:hover {
  opacity: 0.5; /* ふわっと少し薄くなる上品な動き */
  font-style: normal !important; /* イタリックになるのを防ぐ */
}


/* ==========================================================================
   6. Information Page (スマホ専用調整：PC版のデザインは一切崩さない)
   ========================================================================== */

/* スマホサイズ（画面幅が767px以下）の時「だけ」適用される魔法のブロックです */
@media (max-width: 767px) {
  
  /* 見出し（プロフィール・お問い合わせ 等） */
  .information-page .project-info h4 {
    font-size: 0.8rem; /* 元の0.9remから少しだけ小さく */
    margin: 0 0 1rem 0; /* 元の1.5remから、スマホ用に少しだけ下余白を詰める */
  }
	
}



/* ==========================================================================
   7. CV List (経歴リストのインデント揃え)
   ========================================================================== */
.cv-list {
  display: grid;
  grid-template-columns: 2.5em 1fr; /* 左の年号幅、右の経歴幅（残りの全幅）を指定 */
  column-gap: 1em; /* 年号と経歴の間のスペース */
  margin: 1.5rem 0 2.5rem 0; /* 下の余白 */
  padding: 0;
}

.cv-list dt {
  margin: 0;
  font-weight: normal; /* 勝手に太字になるのを防ぐ */
}

.cv-list dd {
  margin: 0;
}