@charset "utf-8";

/*-------------------------------------
css初期化
--------------------------------------*/
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: serif;
	font-size: 120%;
	font-weight: bold;
}

div:after {
	content: "";
	display: block;
	clear: both;
}

/*-------------------------------------
タグの基本設定
--------------------------------------*/
body {
	background: rgb(235, 217, 212);
	line-height: 1.6;
	font-size: 81.25%;
	color: #353232;
}

html {
	overflow-y: scroll;
}

a {
	text-decoration: none;
	outline: none;
	color: #333333;
}

a:hover{
	text-decoration: underline;
	color: #666666;
}

a:hover img{
	opacity: 0.80;
}

/*-------------------------------------
Container
--------------------------------------*/
div#Container {
	width: 945px;
	padding: 10px 20px;
	margin: 0 auto;
	background: #fff;
}

/*-------------------------------------
h1 大見出し（タイトル）
--------------------------------------*/
h1 {
	padding: 0;
	text-align: center;
	background: transparent;
}

h1 img {
	display: block;
	width: 945px;    /* 横幅を945pxに指定 */
	max-width: none;
	height: auto;    /* ここで縦横比をキープして高さを自動調整！ */
}
/*-------------------------------------
Contents
--------------------------------------*/
div#Contents {
	width: 945px;
	margin: 0 auto;
	padding: 10px 0;
	overflow: hidden;
}

/*-------------------------------------
Nav グローバルナビゲーション
--------------------------------------*/
nav {
	width: 220px;
	margin-top: 5px;
	float: left;
}

nav ul li {
	list-style: none;
	margin: 0 0 10px 0;
}

/* リンクエリアのブロック化 */
nav ul li a {
	display: block;
	width: 100%;
	text-decoration: none;
}

/* 画像共通設定 */
nav ul li a img {
	display: block;
	width: 100%;
	height: auto;
}

/* 通常時：色の薄い方(02)を表示、濃い方(01)を非表示 */
nav ul li a img.img-light {
	display: block;
}
nav ul li a img.img-dark {
	display: none;
}

/* マウスホバー時 または active(現在地)時：薄い方(02)を消して、濃い方(01)を表示 */
nav ul li a:hover img.img-light,
nav ul li.active a img.img-light {
	display: none;
}

nav ul li a:hover img.img-dark,
nav ul li.active a img.img-dark {
	display: block;
}

/*-------------------------------------
Main
--------------------------------------*/
div#Main {
	width: 700px;
	float: right;
}

/*-------------------------------------
Main_h2 小見出し
--------------------------------------*/
div#Main h2 {
	font-size: 180%;
	font-weight: bold;
	color: #504946;
	padding-bottom: 5px;
}

/*-------------------------------------
Main_TopImg トップページの画像
--------------------------------------*/
div#Main div#TopImg {
	margin: 5px auto 0 auto;
	text-align: center;
}

/*-------------------------------------
Main_PortImg 課題ページの画像
--------------------------------------*/
div#Main div#PortImg {
	margin: 5px auto 0 auto;
	text-align: center;
}

/*-------------------------------------
Main_p 学校生活での感想 / 課題の感想
--------------------------------------*/
div#Main p {
	color: #504946;
	margin: 20px auto 30px auto;
	font-size: 130%;
}

/*-------------------------------------
Main_table 課題ページの表
--------------------------------------*/
div#Main table {
	width: 80%;
	margin: 10px auto 20px auto;
	border-collapse: collapse;
	border: 0 none;
	font-size: 120%;
}

div#Main table tr th {
	width: 25%;
	padding: 5px 10px;
	background: rgb(240, 224, 224);
	border: 1px solid #504946;
	text-align: left;
	vertical-align: middle;
	letter-spacing: 0.5em;
	color: #504946;
}

div#Main table tr td {
	width: 75%;
	padding: 5px 10px;
	border: 1px solid #504946;
	text-align: left;
	vertical-align: top;
}

div#Main table tr td ul {
	padding: 0 0 0 8px;
	margin: 0 0 0 8px;
}

div#Main table tr td ol {
	padding: 0 0 0 8px;
	margin: 0 0 0 8px;
}

/*-------------------------------------
address コピーライトマーク
--------------------------------------*/
address {
	clear: both;
	text-align: center;
	color: #504946;
}

/*-------------------------------------
slider スライドギミック
--------------------------------------*/
.slider-container {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: 500px;
  overflow: hidden;
  user-select: none;
}

.img-bg, .img-fg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.img-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.img-fg {
  width: 100%;
  overflow: hidden;
}

.img-fg img {
  width: 700px;
  height: 500px;
  object-fit: cover;
  pointer-events: none;
  max-width: none;
}

.slider-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 2px;
  background: #fff;
  cursor: ew-resize;
}

.slider-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: #fff;
  color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  cursor: ew-resize;
}

/* 3秒ループのアニメーション設定（1秒で揺れて、2秒静止＝合計3秒周期） */
@keyframes hintBounceLoop {
	0%, 66.6%, 100% { transform: translate(-50%, -50%); }
	10% { transform: translate(-80%, -50%); }
	20% { transform: translate(-20%, -50%); }
	30% { transform: translate(-65%, -50%); }
	40% { transform: translate(-35%, -50%); }
}

.slider-button.hint-anim {
	animation: hintBounceLoop 3s ease-in-out infinite;
}

/*-------------------------------------
Loading ローディング演出画面
--------------------------------------*/
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loading.loaded {
  opacity: 0;
  visibility: hidden;
}

#loading-text span {
  display: inline-block;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  opacity: 0;
  animation: 
    fadeIn 0.4s forwards, 
    bounce 1.2s infinite ease-in-out;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/*-------------------------------------
Nav ふわふわ上下に揺れるアニメーション
--------------------------------------*/
nav ul li {
  animation: navBounce 2s infinite ease-in-out;
}

nav ul li:nth-child(1) { animation-delay: 0.0s; }
nav ul li:nth-child(2) { animation-delay: 0.2s; }
nav ul li:nth-child(3) { animation-delay: 0.4s; }
nav ul li:nth-child(4) { animation-delay: 0.6s; }
nav ul li:nth-child(5) { animation-delay: 0.8s; }

@keyframes navBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/*-------------------------------------
追従型 ページトップに戻るボタン
--------------------------------------*/
#page-top {
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

#page-top.is-show {
	opacity: 1;
	visibility: visible;
}

#page-top a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 48px;
	background-color: #504946;
	color: #fff;
	text-decoration: none;
	border-radius: 50%;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

#page-top a:hover {
	background-color: #555;
	transform: translateY(-3px);
}

/*-------------------------------------
スクロールフェードイン
--------------------------------------*/
.fade-in {
	opacity: 0;
	transform: translateY(25px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.is-active {
	opacity: 1;
	transform: translateY(0);
}

/*-------------------------------------
制作環境：アイコン＆ホバーエフェクト
--------------------------------------*/
.spec-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spec-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: #f9f9f9;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
	transition: all 0.3s ease;
}

.spec-item:hover {
	background: #ffffff;
	border-color: #0f0;
	box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
	transform: translateY(-2px);
}

.spec-item i {
	font-size: 1.2em;
}

/* ブランドカラー設定 */
.spec-item .si-adobephotoshop { color: #31A8FF; }
.spec-item .si-adobeillustrator { color: #FF9A00; }
.spec-item .si-adobepremierpro { color: #9999FF; }
.spec-item .si-microsoftpowerpoint { color: #D24726; }
.spec-item .si-windows { color: #0078D4; }
.spec-item .si-amd { color: #ED1C24; }
.spec-item .si-nvidia { color: #76B900; }

/* YouTube動画をレスポンシブに綺麗に収める設定 */
.movie__youtube {
  position: relative;
  width: 100%;
  max-width: 889px;
  margin: 0 auto 20px;
  aspect-ratio: 16 / 9;
}

.movie__youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}