/*
Theme Name: KnoKtr Portfolio
Description: KnoKtr Portfolio Theme - Custom theme for Kotaro Kanno's portfolio website
Author: KnoKtr
Version: 1.0.0
Text Domain: knoktr.art
*/

@charset "UTF-8";

/*--------------------------------------------*/
/* ========= RESET ========= */
* { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-family__ja); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-primary); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/*--------------------------------------------*/
/* ========= Master Variables ========= */
:root {
  /* == Color == */
  --color__black01: #111;
  --color-primary: #333333;
  --color-secondary: #666666;
  --color-background: #ffffff;
  --color-accent: #f5f5f5;

  /* == Font == */
  --font-family__ja: "Zen Kaku Gothic Antique", "Noto Sans JP", "游ゴシック体", "Yu Gothic", "游ゴシック", system-ui, "Hiragino Kaku Gothic ProN", "Hiragino Mincho Pro", "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "MS Gothic", "MS Mincho", "MS PMincho", "MS UI Gothic", "MS UI Mincho", "Segoe UI", "Tahoma", "Arial Unicode MS", "Arial", sans-serif;
  --font-family__en: "helvetica-neue-lt-pro", "Helvetica Neue", "Helvetica", "Arial", "Segoe UI", "Liberation Sans", "FreeSans", "Nimbus Sans L", "DejaVu Sans", "Bitstream Vera Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Tahoma", "Geneva", "Verdana", sans-serif;

  /* == Size == */
  --font-size-base: 16px;
  --font-size-h1: 1rem;
  --font-size-h2: 5rem;
  --font-size-h3: 1.5rem;
  --font-size-small: 0.875rem;

  /* == Weight == */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 900;

  /* == Line-height == */
  --line-height-base: 1.5em;

  /* == Spacing == */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 3rem;

  /* == Border == */
  --border-radius: 8px;
  --border-width: 1px;
  --border-color: #e0e0e0;

  /* == Container == */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);
}

/*--------------------------------------------*/
/* ELEMENTS /////////////////////////////////////*/
.fontlang__ja { font-family: var(--font-family__ja); }
.fontlang__en {font-family: var(--font-family__en);}
.flexBox.jcc { display: flex; justify-content: center; }

/*--------------------------------------------*/
/* ========= LAYOUT ========= */
header {/* display: flex; *//* align-items: center; */justify-content: center;padding: var(--spacing-lg) var(--container-padding);/* background-color: var(--color-accent); */}
main { max-width: var(--container-max-width); margin: 0 auto; padding: var(--spacing-xl) var(--container-padding); flex: 1 0 auto; }
footer { text-align: center; padding: var(--spacing-md) var(--container-padding); }
div.content { max-width: var(--container-max-width); margin: 0 auto; margin-block: 20px; flex: 1 0 auto; }
section { padding: var(--spacing-lg); background-color: var(--color-background); border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); margin-bottom: var(--spacing-lg); }

/*--------------------------------------------*/
/* ========= TYPOGRAPHY ========= */
h1 {font-size: var(--font-size-h1);font-weight: var(--font-weight-bold);/* letter-spacing: 0.05em; */text-align: right;}
h2 {font-size: var(--font-size-h2);font-weight: var(--font-weight-semibold);margin-block: var(--spacing-lg);text-align: left; line-height: .4em; /* letter-spacing: 0.05em; */}
h2 span {font-size: calc(var(--font-size-h2) / 4);font-weight: var(--font-weight-regular);}
h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-medium); margin-bottom: var(--spacing-md); color: var(--color-secondary); letter-spacing: 0.05em; }
small { font-size: var(--font-size-small); color: var(--color-secondary); font-weight: var(--font-weight-thin); letter-spacing: 0.05em; }

/*--------------------------------------------*/
/* ========= COMPONENT: SIGNATURE ========= */
p.signature { display: flex; justify-content: flex-end; }
p.signature img { width: 20%; }

/*--------------------------------------------*/
/* ========= RESPONSIVE ========= */
@media (max-width: 768px) { :root { --font-size-h1: 2rem; --font-size-h2: 1.75rem; --font-size-h3: 1.25rem; --spacing-xl: 2rem; --spacing-md: .4rem; } div.content { max-width: 100%; } p.signature { display: block; justify-content: flex-end; } p.signature img { width: 100%; }}