@charset "utf-8";

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

body {
	font-family: sans-serif;
	font-size: 100%;
}

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


/*-------------------------------------
タグの基本設定
--------------------------------------*/
body {
    background: #2A2223;
    background-image: url(../img/bg00.png);
    line-height: 1.6;
    font-size: 81.25%;
    color: #414141;
}

/* 1. 画面全体のスクロールを止める */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden; 
}

/* 2. 各要素をGridエリアに紐付け */
h1 { grid-area: header; }
nav { grid-area: nav; }
#Main { grid-area: main; }
address { grid-area: addr; }

#Container {
    display: grid;
    /* 2列：左250px、右1fr */
    grid-template-columns: 210px 1fr;
    /* 3行：上150px、中身(自動伸長)、下(文字の高さ分) */
    grid-template-rows: 150px 1fr auto; 
    height: 100vh;
    /* ↓修正ポイント：途中のセミコロンを消し、全体を一括で囲う */
    grid-template-areas: 
        "header header"
        "nav    main"
        "addr   addr"; 
}

/* 2. H1（タイトルバナー）の設定 */
h1 {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* 3. Contentsエリアのレイアウトを解除 */
#Contents {
    display: contents; 
}

/* 4. メインエリア：ここだけをスクロール可能にする */
#Main {
    overflow-y: auto; /* これがないと下にあるコンテンツが見られません */
    padding: 5px;
}

/* 2. スクロールさせるのは #Main だけだと明示する */
#Main {
    grid-area: main;
    overflow-y: auto;       /* 重要：ここがスクロール領域 */
    height: 100%;  
    width: 90%;         /* 領域を固定 */
    scroll-behavior: smooth; /* スルスルと戻るようになります */
}

/* 3. 背景の雪コンテナが邪魔をしないようにする */
.snow-container {
    height: 100%;
    overflow: hidden;
}

/* 5. addressの設定 */
address {
    text-align: center;
    margin: 0;
    padding: 10px 0;
    font-style: normal;
    color: #fff; /* 背景が暗いので白系が見やすいです */
}

/* 4. nav（ナビゲーション）を左に固定 */
nav {
    grid-area: nav;
    overflow-y: auto; /* ナビが長い場合のみナビ内スクロール */
}

/* 5. Main（メインコンテンツ）だけをスクロールさせる */
#Main {
    grid-area: main;
    overflow-y: scroll; /* スクロール機能はON */
    padding: 20px;

    /* --- スクロールバー非表示の設定 --- */
    -ms-overflow-style: none;  /* IE, Edge用 */
    scrollbar-width: none;     /* Firefox用 */
}

/* Chrome, Safari用 */
#Main::-webkit-scrollbar {
    display: none;
}
/* ナビのリストスタイル（微調整） */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

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

a:hover img{
	opacity: 1 !important;
}

/*-------------------------------------
Container
--------------------------------------*/
div#Container {
	width: 945px;
	padding: 10px 20px;
	margin: 0 auto;
	background:rgba(255, 251, 248, 0.95);
	
}

/*-------------------------------------
h1　大見出し（タイトル）
--------------------------------------*/
h1 {
	display: block;
	margin: 0 auto;
	background:radial-gradient(500px,#fff,#501313);
	display: grid;
	place-items: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

/*-------------------------------------
Contents
--------------------------------------*/
div#Contents {
	width: 945px;
	margin: 0 auto;
	padding: 10px 0;
	overflow: hidden;
}

/*-------------------------------------
Nav　グローバルナビゲーション
--------------------------------------*/
nav {

	width: 220px;
	margin-top: 5px;
	float: left;
    margin-top: 20px;
	
	
}
	

nav ul li {
	list-style: none;
	font-size: 1.2em;
	margin: 0 0 20px 0;
}

/*通常時時*/
nav ul li a {
	display: block;
	text-align: left;
	text-decoration: none;
	color: #fff;
	overflow: hidden;

}



/*マウスをリンクの上に置いた時*/
#index a:hover {

	background-image: url(../img/index1.png);
	transition: 0.4s;
}
/*マウスをリンクの上に置いた時*/
#movie a:hover {

	background-image: url(../img/movie1.png);
	transition: 0.4s;
}
/*マウスをリンクの上に置いた時*/
#poster a:hover {

	background-image: url(../img/poster1.png);
	transition: 0.4s;
}
/*マウスをリンクの上に置いた時*/
#marketing a:hover {

	background-image: url(../img/marketing1.png);
	transition: 0.4s;
}
/*マウスをリンクの上に置いた時*/
#etc a:hover {

	background-image: url(../img/etc1.png);
	transition: 0.4s;
}



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

/*-------------------------------------
Main_h2　小見出し
--------------------------------------*/
div#Main h2 {

	padding-bottom: 5px;
}

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

#TopImg img{
	border-radius: 50%;
  width: 680px;
  height: 680px;

}

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



/*-------------------------------------
pagetop　ページトップへ移動
--------------------------------------*/
p.pagetop{
	text-align: right;
}

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


.movie__youtube {
    position: relative;
    aspect-ratio: 16 / 9;
}

.movie__title{
	font-weight: bold;
	font-size: 1.5em;
}
.project{
	margin-top: 20px;
  width: 98%;
}

  /* スライドショーの外枠 */
.illustration-slider {
  position: relative; /* 子要素の基準点になる */
  width: 100%;
  max-width: 700px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #f0f0f0;
  border-radius: 10px;
}

/* 中の画像を強制的に重ねる */
.illustration-slider img {
  position: absolute; /* これが重要！画像を同じ位置に重ねる */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 100%; /* 横幅がはみ出さないように */
  max-height: 90%;
  opacity: 0;
  /* 4枚×4秒 = 16秒で1ループ */
  animation: auto-fade 16s infinite;
}

/* 画像ごとの開始時間をずらす（4枚用） */
.illustration-slider img:nth-child(1) { animation-delay: 0s; }
.illustration-slider img:nth-child(2) { animation-delay: 4s; }
.illustration-slider img:nth-child(3) { animation-delay: 8s; }
.illustration-slider img:nth-child(4) { animation-delay: 12s; }

@keyframes auto-fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }  /* 表示開始 */
  25%  { opacity: 1; }  /* 表示維持 */
  30%  { opacity: 0; }  /* 消える */
  100% { opacity: 0; }
}

.poster {
    display: flex;           /* 横並び・配置の機能を有効にする */
    flex-direction: column;  /* 中身を縦に並べる（複数の画像がある場合） */
    align-items: flex-end;   /* 中身を右端に寄せる */
    width: 100%;             /* 親の幅いっぱいに広げておく */
}

.poster img {
    width: 70%;              /* 画像の幅を70%にする */
    height: auto;
    margin-right: 20px;
}
.n_comment{
    border: solid 5px #D3AF37;
    border-radius: 20px;
    padding: 5px;
    margin-top: 20px;
	text-align: center;
}

span{
	font-weight: bold;
}

/* 背景レイヤーの設定 */
.snow-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  z-index: 1;
}

/* 雪の共通設定 */
.snow-container::before,
.snow-container::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  z-index: -1;
}

/* レイヤー1：3種類の画像を降らせる */
.snow-container::before {
  background-image: 
    url('../img/000.png'), 
    url('../img/001.png'), 
    url('../img/003.png');
  /* background-sizeを大きく(1000px以上)することで「まばら」になります */
  background-size: 500px 500px, 400px 400px, 600px 600px;
  background-position: 0 0, 200px 400px, 600px 100px;
  background-repeat: repeat;
  animation: snow-fall-slow 25s linear infinite;
  opacity: 0.8;
}

/* レイヤー2：残りの2種類の画像を降らせる（速度を変える） */
.snow-container::after {
  background-image: 
    url('../img/004.png'), 
    url('../img/002.png');
  background-size: 450px 450px, 550px 550px;
  background-position: 100px 100px, 500px 700px;
  background-repeat: repeat;
  animation: snow-fall-fast 10s linear infinite;
  opacity: 0.6;
}

/* 速度の異なるアニメーション */
@keyframes snow-fall-slow {
  0% { transform: translateY(0); }
  100% { transform: translateY(50%); }
}

@keyframes snow-fall-fast {
  0% { transform: translateY(0); }
  100% { transform: translateY(50%); }
}


#Main {
    grid-area: main;
    overflow-y: auto;   /* Mainの中身が溢れたら、このエリア内だけでスクロールさせる */
    height: 100%;       /* 親要素(1fr分)の高さいっぱいに広げる */
    padding: 20px;      /* 中身が枠にぴったりくっつかないように余白 */
    box-sizing: border-box; 
    scroll-behavior: smooth; /* ページトップへ戻るがスムーズになります */
}

/* addressを最下部に固定 */
address {
    grid-area: addr;
    text-align: center;
    padding: 10px0 0;
    
    z-index: 10; /* Mainより上に表示されるように念のため */
    border-top: 1px solid #444; /* 境界線を入れると被っていないことが分かりやすいです */

}

/* ナビゲーションも独立させる（念のため） */
nav {
    grid-area: nav;
    overflow-y: auto;
}
.marketing img{
  width: 98%;
  align-items: center;
}