@charset "UTF-8";
/* CSS Document */

  body, html 
	{
	    margin: 0;
	    overflow-x: hidden; /* 横スクロールを隠す */
	    overflow-y: auto; /* 縦スクロールを可能にする */
	    background-color: #f5f5dc; /* 薄いベージュ色の背景 */
	    font-family: "Noto Sans JP"; /* Noto Sans フォントを適用 */
		max-width: 1000px;
		overflow-y: scroll;
		/*スクロールバー非表示（IE・Edge）*/
		-ms-overflow-style: none;
		/*スクロールバー非表示（Firefox）*/
		scrollbar-width: none;
	}
	/*スクロールバー非表示（Chrome・Safari）*/
	.content::-webkit-scrollbar{
		display:none;
	}

  .text-container {
    position: absolute;
    prof: 30px; /* 左寄せ */
    top: 100%; /* 下揃え */
	margin: 10px; /* コンテンツのパディング */
    transform: translateY(-100%); /* Y軸中央揃えの調整 */

  }
  .text {
    font-size: 72px; /* タイトルとして大きな文字サイズに設定 */
    color: black;
  }
  img {
    position: absolute;
    width: 300px; /* 画像の大きさ */
    height: 300px; /* 画像の大きさ */
  }
  .content {
 
	height: 100%; /* ビューポートの高さに合わせる */
 	position: relative; /* 追加のコンテンツエリアの基準点 */
	top: 100vh; /* 初期表示時に画面外 */
	flex-wrap: wrap; /* フレックスボックスを包むようにする */

  }

  .prof {
	flex: 1;
    width: 100%; /* 横幅を100%に設定 */
	font-size: 2em;
    height: 100vh; /* 高さをビューポートの100%に設定 */
	margin: 10px; /* コンテンツのパディング */
	box-sizing: content-box;
  }

  .rss {
	font-size: 1em;
	margin: 10px; /* コンテンツのパディング */
  }



/* メディアクエリでモバイルビューに対応 */
@media (max-width : 600px ){
  .content {
    flex-direction: column; /* フレックスの方向を縦に変更 */
  }
  .prof {
    width: 90%; /* 横幅を100%に設定 */
    height: 50%; /* 高さをビューポートの50%に設定 */
  }
}