@charset "utf-8";
@import "/fonts/fonts.css";

/* ===== 基本設定とリセット ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== カラーパレット（CSS変数） ===== */
:root {
  /* メインカラー */
  --color-beige-light: #f7f5f0;
  --color-beige: #f5f5dc;
  --color-beige-dark: #e8e3d8;
  --color-beige-deep: #d7ccb6;

  --color-white: #fdfdfd;
  --color-white-smoke: #f7f7f7;
  --color-white-deep: #eeeeee;

  --color-black: #181818;
  --color-light-black: #303030;

  --color-gray: #808080;
  --color-pale-gray: #d5d5d5;

  --color-dark-blue: #004890;
  --color-orange: #ff6600;
}

/* ===== フォント ===== */
:root{
  --font-family: var(--font-zen-maru-gothic);
  --font-weight: 500;
  --font-size: 1rem; /*基本はこれを参照してくれれば問題なし*/ /*何故かここで宣言するとバグる*/
  --font-size-desk: 0.8rem; /*clamp(0.7rem, 1.8vw, 1rem);*/
  --font-size-tablet: 0.8rem;
  --font-size-mobile: 0.75rem;
}

/* ===== z-index ===== */
:root {
  /* ベース */
  --z-base: 0; /*背景など*/
  --z-content: 10;/*その他のコンテンツ。文章、記事、画像など*/

  /* レイアウト */
  --z-gotop: 102; /*GoTop*/
  --z-navmenu: 103; /*ナビゲーションメニュー*/
  --z-footer: 101;
  --z-header: 200;

  /* オーバーレイ系 */
  --z-overlay: 500; /*画面を操作不能にする半透明な背景*/

  /* 最優先 */
  --z-modal: 1000; /*警告や注意などの小さなウィンドウ*/
}

/* ===== その他 ===== */
:root{
  /* ボーダー */
  --border-thin: 1px solid var(--color-black);
  --border-medium: 2px solid var(--color-black);
  --border-thick: 3px solid var(--color-black);
  --border-dashed: 1px dashed var(--color-black); /*点線*/

  /* シャドウ */
  --shadow-border: 2px 2px 0 var(--color-black);
  --shadow-border-large: 4px 4px 0 var(--color-black);
  
  /* ボーダーラディウス */
  --radius-none: 0;
  --radius-small: 2px;
}

/* ===== スペーシング ===== */
:root {
  /* スペーシング */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

/* ===== 基本要素 ===== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  background-color: var(--color-beige-light);
  color: var(--color-black);
  line-height: 1.5;
  letter-spacing: 0.02em; /*文字間*/
}

main {
  width: auto;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}
@media (max-width: 767px) {
  main{
    margin: var(--spacing-xs);
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
  }
}

/* ===== メイン ラッパー ===== */
.page-wrapper {
  display: flex;
  flex-direction: column; /*縦並び*/
  min-height: 100vh; /*画面の高さに合わせる*/
}
main {
  flex: 1;
}

.main-wrapper{
 overflow: visible;
}
@media (max-width: 767px) {
  .main-wrapper{
    overflow: hidden;
  }
}

/* ===== 背景画像 ===== */
/*
 * Background SVG Pattern
 * Source: SVGBackgrounds.com
 * License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
 * Modified for project styling
 */
body{
  background-color: var(--color-white);
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23E8E8E0' stroke-width='5.6' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center;
  background-position: 100%; */
}

/* ===== フォントサイズ ===== */
@media (max-width: 767px) {
  :root {
    --font-size: var(--font-size-mobile);
  }
}
@media (min-width:768px) and (max-width:960px) {
  :root {
    --font-size: var(--font-size-tablet);
  }
}
@media (min-width:961px) {
  :root {
    --font-size: var(--font-size-desk);
  }
}
html {
  font-size: var(--font-size);
}

/* ===== タイポグラフィ ===== */
h1, h2, h3, h4, h5, h6 {
  position: relative;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;

  margin: 0;
  padding: 0;
  padding-bottom: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  padding-top: var(--spacing-xs);
}

h1 {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  margin-bottom: 4rem;
}
h1 .h1__main{ /*大きいタイトル*/
  display: block;
  font-size: 2.5rem;
  font-weight: 500;
  width: 100%;
  border: none;
  padding: 0;
  margin: 0;
}
h1 .h1__sub { /*英語の小さいタイトル*/
  display: block;
  font-size: 1.3rem;
  font-weight: 550;
  border: none;
  padding: 0;
  margin: 0;
  padding-top: 0.5rem;
}
h1::after{ /*下線*/
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6rem;
  height: 0.5px;
  background-color: var(--color-black);
  transition: width 0.3s ease-in-out /* 幅の変化にトランジションを適用 */
}
/* ホバーされた時に、下線が波打つアニメーション */
h1.cat--hover::after {
  width: 50%;
}

h2 {
  font-size: calc(1rem * 2);
  border-bottom: var(--border-medium);
  padding-bottom: var(--spacing-xs);
}

h3 {
  font-size: calc(1rem * 1.6);
  border-bottom: var(--border-thin);
}

h4 {
  font-size: calc(1rem * 1.25);
  border-bottom: var(--border-dashed);
}

p {
  margin-bottom: 1rem;
  padding: 0.2rem;
}

section {
  margin-bottom: 2rem;
}

section p {
  text-align: center;
  letter-spacing: 0; /* 文字間 */
  line-height: 1.6; /* 行間 */
  padding: 0;
  margin: 0;
}
section > p:has(+ p) { /*次にもpがあるp要素*/
  margin-bottom: 1.1rem;
}

a {
  color: var(--color-black);
  text-decoration: none;
  border-bottom: var(--border-thin);
  padding-bottom: 0px;
  transition: all 0.2s ease;
}

a:hover, a:focus {
  color: var(--color-dark-blue);
  border-bottom-color: var(--color-dark-blue);
}

img{
  max-width: 100%; /*親要素以上に拡大しない*/
  height: auto; /*高さと幅を自動で伸縮*/
  width: auto;
  display: block; /*初期値のinlineからblockに。扱いやすくなる。*/
}

/* ===== スペーサー ===== */
.spacer-diamond {
  content: "◇";
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-black);
  margin: 0 auto;
  padding: 2rem 0;
  transition : all 0.3s ease;
}

.spacer-sm {
  display: block;
  height: 1rem;
  width: 100%;
}
.spacer-md{
  display: block;
  height: 1.5rem;
  width: 100%;
}
.spacer-lg{
  display: block;
  height: 2rem;
  width: 100%;
}
.spacer-xl{
  display: block;
  height: 3rem;
  width: 100%;
}

/* ===== CAT アニメーション ===== */
.cat {
  opacity: 0; /* 初期状態は透明 */
  transform: translateY(30px);
}
.cat.cat--scrolin {
  opacity: 1; /* 表示状態 */
  transform: translateY(0px);

  animation: catScrollFadeIn;
  animation-duration: 1.0s;
  animation-timing-function: ease-out; /* 急速に始まり、次第に減速*/
  animation-fill-mode: none; /* アニメーション後に、状態を維持 */
}
@keyframes catScrollFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.cat--active {
  /*
  TODO: なぜかアニメーションが動かない
  クラスの付与は正常に行われている。(赤色に変わる)
  しかしアニメーションが動作しない。
  */
  /* background-color: red; */
  animation: catActive;
  animation-duration       : 1.5s;            /* 実行時間 */
  animation-timing-function: ease-in-out;      /* 急激に加速し、ゆっくりと減速 */
  animation-direction      : normal;        /* 通常再生 */
  animation-delay          : 0s;            /* 開始遅延 */
  animation-iteration-count: 1;     /* 繰り返し回数 */
  animation-fill-mode      : none;  /* アニメーション前後の状態を維持 */
}
@keyframes catActive {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    background-color: rgb(0, 255, 30);
  }
}

.spacer-diamond.cat--active { /*ホバーされたときに、クルクル回るアニメーション*/
  animation                : catDiamondSpin;  /* アニメーション名 */
  animation-duration       : 1.5s;            /* 実行時間 */
  animation-timing-function: ease-in-out;      /* 急激に加速し、ゆっくりと減速 */
  animation-direction      : normal;        /* 通常再生 */
  animation-delay          : 0s;            /* 開始遅延 */
  animation-iteration-count: 1;     /* 繰り返し回数 */
  animation-fill-mode      : none;  /* アニメーション前後の状態を維持 */
}
@keyframes catDiamondSpin {
  0% {
    transform: rotateY(1800deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
.spacer-diamond.cat--scrolin {
  animation                : diamondSpinFadeIn;  /* アニメーション名 */
  animation-duration       : 1.0s;            /* 実行時間 */
  animation-timing-function: ease-in-out;      /* 急激に加速し、ゆっくりと減速 */
}
@keyframes diamondSpinFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px) rotateY(900deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0deg);
  }
}

/* ===== ボックス ===== */
.box {
  --box-angle: 30deg; /*角度によって底辺と高さの比率が変わる*/
  --box-depth: 10px; /* 奥行きの深さ */
  --box-right-depth: calc(var(--box-depth) * 0.866); /* 比率は手動計算してね */
  --box-bottom-depth: calc(var(--box-depth) * 0.5);
  --box-border: 1px solid var(--color-black);

  position: relative;
  display: block;

  background-color: var(--color-white); /* 手前の面は白色 */
  border: var(--box-border); /* 黒のフレーム */

  border-radius: 1px;
  padding: var(--spacing-md);
  margin: 0;
  margin-bottom: var(--spacing-md);
}

/* 右側面 */
.box::before {
  content: '';
  position: absolute;
  
  /* オーバーラップで隙間を防ぐ */
  top: -0.6px;
  right: calc(-1 * var(--box-right-depth) - 1.5px);
  width: calc(var(--box-right-depth));
  height: 100%; /* 高さも少し大きく */

  background-color: var(--color-pale-gray);
  border-top: var(--box-border);
  border-right: var(--box-border);
  border-bottom: var(--box-border);
  border-left: none;

  transform: skewY(var(--box-angle));
  transform-origin: left top;
  
  border-radius: 1px;
  margin: 0;
  z-index: -1; /* 確実に背面に */
}

/* 下側面 */
.box::after {
  content: '';
  position: absolute;

  /* オーバーラップで隙間を防ぐ */
  left: -0.6px; /* 少し多めに重ねる */
  bottom: calc(-1 * var(--box-bottom-depth) - 1.5px); /* 少し多めに重ねる */
  height: calc(var(--box-bottom-depth)); /* 高さも少し大きく */
  width: 100%; /* 幅も少し大きく */

  background-color: var(--color-pale-gray); /* 下面も灰色 */
  border-bottom: var(--box-border);
  border-left: var(--box-border);
  border-right: var(--box-border);
  border-top: none;

  transform: skewX(calc(90deg - var(--box-angle)));
  transform-origin: top left;
  
  border-radius: 1px;
  margin: 0;
  z-index: -1; /* 確実に背面に */
}

/* 奥行き調整バリエーション */
.box--depth-sm {
  --box-depth: 4px;
}

.box--depth-md {
  --box-depth: 8px;
}

.box--depth-lg {
  --box-depth: 12px;
}

.box--depth-xl {
  --box-depth: 16px;
}

/* ===== ボタン ===== */
.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: var(--border-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-border);
  position: relative;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-border-large);
}

.btn:active {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 var(--color-black);
}

.btn-black {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.btn-black:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

.btn-white {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-black);
}

.btn-white:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn-outline {
  background-color: var(--color-beige);
  color: var(--color-black);
  border-color: var(--color-black);
}

.btn-outline:hover {
  background-color: var(--color-beige-light);
  color: var(--color-black);
}

.btn-invisible {
  background-color: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}
.btn-invisible:hover {
  color: var(--color-black);
}

/* ===== カード ===== */
.card {
  background-color: var(--color-white);
  border: var(--border-medium);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-border);
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  top: var(--spacing-xs);
  left: var(--spacing-xs);
  right: calc(-1 * var(--spacing-xs));
  bottom: calc(-1 * var(--spacing-xs));
  border: var(--border-thin);
  pointer-events: none;
  z-index: -1;
}

.card:hover {
  box-shadow: var(--shadow-border-large);
  transform: translate(-2px, -2px);
}

.card-header {
  border-bottom: var(--border-medium);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  background-color: var(--color-beige);
  margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
}

.card-body {
  border: var(--border-thin);
  padding: var(--spacing-md);
  margin: 0 calc(-1 * var(--spacing-xs));
}

.card-footer {
  border-top: var(--border-medium);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-md);
  background-color: var(--color-beige-light);
  margin-left: calc(-1 * var(--spacing-lg));
  margin-right: calc(-1 * var(--spacing-lg));
  margin-bottom: calc(-1 * var(--spacing-lg));
  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md);
}

/* ===== フォーム ===== */
.form-group {
  margin-bottom: var(--spacing-md);
  border: var(--border-thin);
  padding: var(--spacing-md);
  background-color: var(--color-white);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  color: var(--color-black);
  border-bottom: var(--border-thin);
  padding-bottom: var(--spacing-xs);
}

.form-input {
  width: 100%;
  padding: var(--spacing-sm);
  font-family: var(--font-family);
  font-size: 1rem;
  background-color: var(--color-white);
  border: var(--border-medium);
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  box-shadow: var(--shadow-border);
  transform: translate(-1px, -1px);
}

.form-input:invalid {
  border-color: var(--color-black);
  background-color: var(--color-beige-light);
}

/* ===== テーブル ===== */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* border: var(--border-medium); */
  /* background-color: var(--color-white); */
}

.table th,
.table td {
  padding: var(--spacing-sm);
  border-bottom: var(--border-thin);
  border-right: var(--border-thin);
}

.table th {
  background-color: transparent;
  font-weight: 600;
}
.table td {
  background-color: var(--color-white);
}

.table tr:nth-child(even) td {
  background-color: var(--color-beige-light);
}

.table td:last-child,
.table th:last-child {
  border-right: none;
}

.table tr:last-child td,
.table tr:last-child th {
  border-bottom: none;
}

/* ===== ボーダーテーブル ===== */
.table-border {
  width: 100%;
  border-collapse: collapse;
  /* border: var(--border-medium); */
  /* background-color: var(--color-white); */
}

.table-border th,
.table-border td {
  position: relative;
  padding: var(--spacing-sm);
}

.table-border th::before,
.table-border td::before {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  right: 0.5rem; /* 左右の余白 */
  left: 0.5rem;
  width: calc(100% - 1rem); /* 全体の幅 */
  border-bottom: var(--border-thin);
  pointer-events: none; /* 下線がクリックを妨げないようにする */
}
.table-border td::before {
  left: 0.5rem; /* 左右の余白 */
  right: 0.5rem;
  width: calc(100% - 1rem); /* 全体の幅 */
}
.table-border th::after,
.table-border td::after {
  content: "";
  position: absolute;
  top: 0.5rem; /* 上下の余白 */
  bottom: 0.5rem;
  right: 0;
  left: auto;
  height: calc(100% - 1rem); /* 全体の高さ */
  border-right: var(--border-thin);
  pointer-events: none;
}

.table-border th {
  background-color: transparent;
  font-weight: 600;
}

.table-border tr:last-child td::before,
.table-border tr:last-child th::before {
  border-bottom: none;
}

.table-border td:last-child::after,
.table-border th:last-child::after {
  border-right: none;
}

/* ===== データリスト ===== */
.datalist {
  width: 100%;
  background-color: transparent;
  margin: 0 0 var(--spacing-lg) 0;
}

.datalist dt {
  position: relative;
  display: inline-block;
  padding: 0.4rem 1rem;
  margin-top: var(--spacing-md);
  font-weight: 600;
  color: var(--color-black);
}
/*左辺の太い縦線*/
/* .datalist dt::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 4px;
  background-color: var(--color-black);
} */
/*下辺のボーダー*/
/* .datalist dt::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0px;
  right: 0;
  height: 0.5px;
  background-color: var(--color-black);
  pointer-events: none;
} */

.datalist dd {
  position: relative;
  padding: var(--spacing-xs);
  margin: 0;
  border-bottom: var(--border-dashed);
}

/* ===== レスポンシブ ===== */
@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  .hero::before {
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    right: calc(-1 * var(--spacing-xs));
    bottom: calc(-1 * var(--spacing-xs));
  }
}

@media (max-width: 480px) {
  .section::before {
    display: none;
  }
  
  .card::after {
    display: none;
  }
  
  .btn {
    margin-bottom: var(--spacing-xs);
  }
}
/* ===== 動きを減らす設定が有効な場合はアニメーションを無効化 ===== */
/*TODO: 一括で消してしまうのはもったいない。スクロールアニメーションのみ消すようにしよう*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}