@charset "utf-8";

/* ブラウザのキャッシュクリア　ctr+F5 */

:root {
  --font-main: Osaka, メイリオ, Meiryo, sans-serif; /*最初に見つかったフォントが適用される*/
  --text-color: #333;
  --side-img-width: 60px;
}

body {
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-color);

  /* 背景レイヤーを明示的に管理 */
  background-image:
    image-set(url("../multimedia/cat.png") 1x),
    image-set(url("../multimedia/catTibi.png") 1x);

  background-repeat: repeat-y, no-repeat; /*縦方向に繰り返し*/
  background-position: top right, top left;
  background-size: var(--side-img-width), 100% auto;

  /* モダンブラウザ向けの最適化 */
  background-attachment: local, scroll;
  background-origin: content-box, border-box;

  /* スマホ対応 */
  padding-inline: calc(var(--side-img-width) + 1rem) 1rem;
}

/*-------------------------------------
 * ナビゲーション
 *-----------------------------------*/
/* ナビゲーション全体のレイアウト */
.nav_list {
  display: flex; /*中にある子要素（<li>など）が自動的に横並びになる*/
  flex-wrap: wrap; /*自動的に折り返して次の行に表示させます*/
  gap: 10px; /*子要素と子要素の間の余白（隙間）を 20px に設定*/
  list-style: none; /*リスト特有の 「・」（中黒）を消します*/
  padding: 0; /*<ul> や <ol> にデフォルトで付いている内側の余白をリセット*/
	/*justify-content: center;*/ /*水平方向の中央揃え*/
}

/* 各メニュー項目の外枠 */
.nav_item {
  width: 128px;
  height: 128px;
  overflow: hidden; /* 枠からはみ出た部分（詳細）を隠す */
  position: relative;
  border: 1px solid #ccc; /*実線*/
  border-radius: 8px; /*角丸*/
  background-color: #fff;
	cursor: pointer; /*マウスを乗せた時に指マークにする*/
}

/* リンクとコンテンツのコンテナ */
.nav_link {
  display: flex; /*中にある子要素（<li>など）が自動的に横並びになる*/
  flex-direction: column; /*中身を上下に積み重なる形に整列させます*/
  width: 100%;
  height: 200%; /* 説明と詳細を縦に並べるため2倍の高さに */
  transition: transform 0.4s ease; /*0.4秒かけて、滑らかに（ease）動かします*/
  text-decoration: none;/*テキストに付いている装飾（デフォルトの飾り）を打ち消す」*/
  color: #333;
}

/*マウスを乗せた時（ホバー時）に外枠（カード）の見た目を強調する*/
.nav_item:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /*水平方向,垂直方向,ぼかし距離,影の色と透明度*/
  border-color: #007bff;
}

/* ホバー時に上にスライドさせる */
.nav_item:hover
.nav_link {
  transform: translateY(-50%); /* 半分（詳細部分）だけ上にずらす */
}

/*-------------------------------------
 * 各テキストのスタイル
 *-----------------------------------*/
:root {
  --font-size-base: 0.9em;
  --bg1: url("../multimedia/catBox1.png");
  --bg2: url("../multimedia/catBox2.png");

  --color-label-bg: #f8dce0;
  --color-detail-bg: #f0f8ff;
  --color-detail-text: #021222;
  --color-detail-accent: #b3c9bd;
}

.label,
.detail {
  height: 50%;
  display: flex; /*中にある子要素（<li>など）が自動的に横並びになる*/
  justify-content: center; /*中のテキストを中央に配置*/
  align-items: flex-start; /* padding-top を使うより自然 */
  padding-block-start: 4px;

  font-weight: bold;
  font-size: var(--font-size-base);
  box-sizing: border-box;

  background-repeat: no-repeat;
  background-position: center;
  background-clip: border-box;
}

/* ラベル部分 */
.label {
  background-color: var(--color-label-bg);
  background-image: var(--bg1);
  background-size: 70%;
}

/* 詳細部分 */
.detail {
  color: var(--color-detail-text);
  background-color: var(--color-detail-bg);
  background-image: var(--bg2);
  background-size: 60%;

  border-radius: 10px;
  background-blend-mode: multiply; /* モダンな質感を追加 */
  background-color: var(--color-detail-accent);
}

/*-------------------------------------
 * 猫のアニメーション
 *-----------------------------------*/
/* 全体の設定 */
.cat_images { 
	display: flex; 
	justify-content: center; /*中のテキストを中央に配置*/
	align-items: flex-end;    /* 足元を揃える */
	gap: 60px; /*子要素と子要素の間の余白（隙間）を設定*/
	height: 300px;  
}

/* 動きのルール（キーフレーム） */
@keyframes cat1 {
	0%	{ transform: rotate(0deg); }
	20%	{	transform: rotate(30deg);	}
	40%	{	transform: rotate(0deg); }
	60% { transform: rotate(-30deg); }
	100% { transform: rotate(0deg); }
}

@keyframes cat2 {
	0%	{ transform: scale(0.1, 0.1); }
	20%	{ transform: scale(0.5, 0.5); }
	40%	{ transform: scale(1, 1); }
	60% { transform: scale(0.5, 0.5); }
	100% { transform: scale(0.1, 0.1); }
}

.imageCat1 {
	width: 200px;
	height: auto;
	transform-origin: center bottom; /* 足元を中心に動く */
	animation: cat1 4s ease-in-out infinite;
}

.imageCat2{
	width: 160px;
	height: auto;
	transform-origin: center bottom;
	animation: cat2 4s ease-in-out infinite;
}