/**
 * common.css - Base & Utility Styles
 * サイト全体の共通設定、タイポグラフィ、レイアウト、
 * および再利用可能なCSS変数（カスタムプロパティ）を定義します。


Noto Sans JP()
  font-family: "Noto Sans JP", sans-serif;
  font-weight: <weight 100-900>;

Noto Serif JP
  font-family: "Noto Serif JP", serif;
  font-weight: <weight 200-900>;

.alumni-sans-<uniquifier> {
  font-family: "Alumni Sans", sans-serif;
  font-weight: <weight 100-900>;
}

Google Material Symbols

<span class="material-icons-outlined">arrow_right_alt</span>

  FILL 1: 塗りつぶし, 0: 輪郭
  wght 太さ: 100~700
  GRAD グラデーション: -50~200(使ったことがない)
  opsz 光学サイズ: 20~48(厳密な太さ調整　使ったことがない)
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;

::beforeまたは::afterなどは、Code pointを使用する
  font-family: 'Material Symbols Outlined';
  content: "\e55e";
  font-weight: 400;

*/

/* -------------------------------------------------------------
 * 1. デザインシステムトークン（CSS変数）
 * ------------------------------------------------------------- */
:root {
  --clr-primary: #000000;
  --clr-accent: #F32664;
  --clr-bg-sub: #f3f4f6;
  --m-s: 10px;
  --m-ms: 30px;
  --m-m: 50px;
  --m-ml: 100px;
  --m-l: 150px;
  --transition-fast: 0.6s ease;
  --transition-slow: 1s ease;
}
@media screen and (max-width: 767px) {
  :root {
    --clr-primary: #000000;
    --clr-accent: #F32664;
    --clr-bg-sub: #f3f4f6;
    --m-s: 8px;
    --m-ms: 15px;
    --m-m: 25px;
    --m-ml: 40px;
    --m-l: 75px;
    --transition-fast: 0.6s ease;
    --transition-slow: 1s ease;
  }
}

html {
  font-size: 16px;}
@media screen and (max-width: 767px) {
  html { font-size: 14px;}
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  background-color: var(--clr-bg-main);
  line-height: 1.7; /* 読みやすさを重視した少し広めの行送り */
  letter-spacing: 0.05em; /* 文字間をわずかに広げて可読性向上 */
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  font-size: 1rem;}

/* テキスト配置 */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.pt_l{ padding-top: var(--m-ml);}
.pb_l{ padding-bottom: var(--m-ml);}
.pt_ml{ padding-top: var(--m-ml);}
.pb_ml{ padding-bottom: var(--m-ml);}
.mt_l{ margin-top: var(--m-l);}
.mb_l{ margin-bottom: var(--m-l);}
.mt_ml{ margin-top: var(--m-ml);}
.mb_ml{ margin-bottom: var(--m-ml);}
.mt_m{ margin-top: var(--m-m);}
.mb_m{ margin-bottom: var(--m-m);}
.mt_ms{ margin-top: var(--m-ms);}
.mb_ms{ margin-bottom: var(--m-ms);}
.mt_s{ margin-top: var(--m-s);}
.mb_s{ margin-bottom: var(--m-s);}
.mlr_auto{ margin-left: auto; margin-right: auto;}

.bg_gray{ background-color: var(--clr-bg-sub);}
.bg_white{ background-color: #fff;}
.break{ display: inline-block;}


/*------------------------------------------------------------
  Google material symbols
------------------------------------------------------------*/

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;}