@charset "UTF-8";

body{
	background-image: url("/images/bg-001.png");
	/* 🌟 1. 画面いっぱいに画像をフィットさせる（画面の縦横比に自動調整） */
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;

  	/* 🌟 2. スクロールしても背景画像を固定する！（超重要！） */
  	background-attachment: fixed;

  	/* 🌟 3. 画面全体（ビューポート）の高さを確保 */
  	min-height: 100vh;
  	margin: 0;
}

/*---------------------------------------------------
	トップ画面
-----------------------------------------------------*/
#top_div{
	width:100vw;
	height: 100vh;
	background-image: url("/images/top-bg.png");
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*タイトル*/
.top_title{
	font-size: 1.7rem;
	text-shadow: 1px 1px 4px rgba(250, 100, 500, 0.9);
	margin: 5px 5px;
}
.top_title2{
	font-size: 0.8rem;
	text-shadow: 1px 1px 4px rgba(250, 100, 500, 0.9);
	margin: 5px 5px;
}
/*名前*/
.log_in{
	width: 150px;
	height: 50px;
	background-color: rgba(100, 150, 200, 0.5);
	border: 5px solid rgba(100, 150, 200, 0.9);
	border-radius: 5px;
	text-align: center;
}
/*秘密の扉入口*/
.top_button{
	width: 160px;
	height: 160px;
	background-image: url("/images/himitu.png");
	/* 縦横比を保ったまま、画面を完全に覆うように自動で拡大縮小されます */
    background-size: cover;
    /* 画像の「真ん中」を中心に据えることで、端っこがバランスよくカットされます */
    background-position: center center; 
    background-repeat: no-repeat;
    border-radius: 50%;
}


/*---------------------------------------------------
	項目ボタンDIV（固定）
-----------------------------------------------------*/
#items_b_div{
	width: 100%;
	height: 35px;
	background-color: rgba(200, 200, 250, 0.9);
	display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    padding-top: 5px;
    font-size: 15px;
    text-align: center;
    box-shadow: 0px 5px 5px rgba(192, 132, 252, 0.6);
}


/*---------------------------------------------------
	メニュー項目DIV（固定）
-----------------------------------------------------*/
#items_div{
	width: 100%;
	padding: 15px;
	background-color: rgba(150, 200, 250, 0.9);
	border: 5px solid rgba(100, 150, 200, 0.9);
	display: none;
	grid-template-columns: repeat(2, 1fr);
  	gap: 10px;
    position: fixed;
    top: 50px;
    left: 0px;
    z-index: 100;
    /* 🌟 2. 高さを「画面の高さ（100dvh）」までに制限する */
  	max-height: 90dvh; /* dvhを使うとスマホのバーにも完璧に対応！ */
  	/* 🌟 3. はみ出た分を縦スクロールさせる！ */
  	overflow-y: auto;
    box-shadow: 0px 5px 5px rgba(192, 132, 252, 0.6);
}

/*項目ボタン*/
.item_button{
	width: 95%;
	aspect-ratio: 1 / 1;
	/* 背景画像の設定 */
  	background-image: url('photo.jpg');
  	background-size: cover;    /* 🌟 ピッタリ収める */
  	background-position: center;
  	background-repeat: no-repeat;
    
    color: rgba(0, 0, 0, 1.0); /* 紫色の文字 */
    border: 3px solid #c084fc;
    border-radius: 20%;
    font-size: 23px;
    font-weight: 700;
    /*text-shadow: 4px 4px 8px rgba(250, 250, 100, 1.0);*/
    text-shadow:
	    0 0 5px #fff,
	    0 0 10px #ff99dd,
	    0 0 20px #ff99dd;
    /* 🌟 ここがポイント：ぼかし（blur）を大きくした影で光を表現 */
    box-shadow: 5px 5px 15px rgba(192, 132, 252, 0.6), inset 0px 0px 1px rgba(192, 132, 252, 0.2);
    transition: all 0.5s ease;
    /* 🌟 これを追加！スマホでの文字選択や長押し検索を完全に無効化する */
    -webkit-user-select: none; /* Safari用 */
    user-select: none;         /* 標準のブラウザ用 */
    /* 🌟 ついでにタップした時のスマホ特有の青いハイライト（枠）も消す */
    -webkit-tap-highlight-color: transparent;
    /*display: grid;
 	place-items: center;*/
 	text-align: center;
 	padding-top: 60%;
}
.item_button:active {
    transform: scale(0.5);
    box-shadow: 0px 0px 25px rgba(192, 132, 252, 0.9);
}


/*---------------------------------------------------
	博士の研究所内　TOP
-----------------------------------------------------*/
.k_top_div{
	width: 90%;
	/*height: 95vh;*/
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	background: rgba(200, 200, 220, 0.7);
	display: none;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
	.k_top_div p{
		font-size: 23px;
		margin: 20px 0px;
	}
	.k_top_img{
		border-radius: 50%;
		margin: 30px 0px;
	}

/*---------------------------------------------------
	博士の研究所内　夏休みやりたいこと
-----------------------------------------------------*/
.k_bucketlist_div{
	width: 90%;
	/*height: 95vh;*/
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	background: rgba(200, 200, 220, 0.7);
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
	.k_bucketlist_div h4{
		font-size: 26px;
		margin: 20px 0px;
		background-color: rgba(200, 250, 250, 0.8);
		text-align: center;
	}
	.k_bucketlist_div p{
		font-size: 23px;
		margin: 20px 0px;
	}
	.k_bucketlist_fals{
		opacity: 1.0;
	}
	.k_bucketlist_true{
		opacity: 0.1;
	}

/*---------------------------------------------------
	博士の研究所内　わたしのめあて
-----------------------------------------------------*/
.k_objective_div{
	width: 90%;
	/*height: 95vh;*/
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	background: rgba(200, 200, 220, 0.7);
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
	.k_objective_div h4{
		font-size: 26px;
		margin: 20px 0px;
		background-color: rgba(200, 250, 250, 0.8);
	}
	.k_objective_div p{
		font-size: 23px;
		margin: 20px 0px;
	}
	.k_objective_fals{
		opacity: 1.0;
	}
	.k_objective_true{
		opacity: 0.1;
	}

/*---------------------------------------------------
	博士の研究所内　毎日やること
-----------------------------------------------------*/
.k_dailytasks_div{
	width: 90%;
	/*height: 95vh;*/
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	background: rgba(200, 200, 220, 0.7);
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
	.k_dailytasks_div h4{
		font-size: 26px;
		margin: 20px 0px;
		background-color: rgba(200, 250, 250, 0.8);
	}
	.k_dailytasks_div p{
		font-size: 23px;
		margin: 20px 0px;
	}
	.k_dailytasks_fals{
		opacity: 1.0;
	}
	.k_dailytasks_true{
		opacity: 0.1;
	}
/*---------------------------------------------------
	博士の研究所内　宿題
-----------------------------------------------------*/
.k_homework_div{
	width: 90%;
	/*height: 95vh;*/
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	background: rgba(200, 200, 220, 0.7);
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
	.k_homework_div h4{
		font-size: 26px;
		margin: 20px 0px;
		background-color: rgba(200, 250, 250, 0.8);
	}
	.k_homework_div p{
		font-size: 23px;
		margin: 20px 0px;
	}
	.k_homework_fals{
		opacity: 1.0;
	}
	.k_homework_true{
		opacity: 0.1;
	}

/*---------------------------------------------------
	博士の研究所内　始業式持ち物
-----------------------------------------------------*/
.k_property_div{
	width: 90%;
	/*height: 95vh;*/
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	background: rgba(200, 200, 220, 0.7);
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
	.k_property_div h4{
		font-size: 26px;
		margin: 20px 0px;
		background-color: rgba(200, 250, 250, 0.8);
	}
	.k_property_div p{
		font-size: 23px;
		margin: 20px 0px;
	}
	.k_property_fals{
		opacity: 1.0;
	}
	.k_property_true{
		opacity: 0.1;
	}

/*---------------------------------------------------
	博士の研究所内　スケジュール
-----------------------------------------------------*/
.k_schedule_div{
	width: 90%;
	/*height: 95vh;*/
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
	background: rgba(200, 200, 220, 0.2);
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}
	.k_schedule_content{
		width: 99%;
		margin: 15px;
		padding: 5px;
		border-radius: 8px;
		display: grid;
		grid-template-columns: 60px 1fr 1fr;
	  	gap: 10px;
	  	background: rgba(200, 250, 250, 0.9);
	  	box-shadow: 10px 10px 5px rgba(20, 20, 20, 0.6);;
	}
		.k_schedule_div h4{
			font-size: 26px;
			margin: 20px 0px;
			background-color: rgba(200, 250, 250, 0.8);
		}
		.k_schedule_fals{
			font-size: 14px;
			font-weight: 500;
			color: rgba(0,0,0,1);
			margin: 7px 1px;
		}
		.k_schedule_true{
			font-size: 14px;
			font-weight: 100;
			color: rgba(100,100,200,0.7);
			margin: 7px 1px;
		}
		/*日付*/
		.schedule_date{
			grid-row: span 2;
			margin: 2px;
			font-size: 15px;
			font-weight: 500;
		}
		/*イベント*/
		.schedule_event{
			grid-column: span 2;
			font-size: 18px;
			font-weight: 500;
			color: rgba(0, 0, 240, 1.0);
			width: 100%;
			min-height: 20px;
		}
		/*毎日やること*/
		.schedule_everyday{
			font-size: 16px;
			font-weight: 500;
			color: rgba(200,50,150,1);
		}
		/*宿題*/
		.schedule_homework{
			font-size: 16px;
			font-weight: 500;
			color: rgba(200,50,150,1);
		}
		/*ノート*/
		.schedule_note{
			grid-column: span 3;
			font-size: 16px;
			font-weight: 500;
			color: rgba(160, 0, 160, 1.0);
			width: 100%;
			min-height: 20px;
		}