@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap');
/* CSS Document */

* ,
*::after,
before　{
　　　　outline: 1px solid rgb(234, 4, 234);
　　　　opacity: 1!important;
　　}

@media screen and (max-width: 767px) {
/* ここに横幅が767px以下の時に発動するスタイルを記述 */
	body { 
		margin: 0; 
		width: 100%; 
		height: 100%; 
	}
 
	.container { 
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
	}

	header {
		/* position: fixed;
		display: flex; */
		width: 100%;
		height: 120px;
		background-color: #cd4629;
		background-image: url("../images/jazzbird2.jpg");
		background-repeat: no-repeat;
		background-position:center;
		background-size:auto 100%;
	}
	
	header h2 {
		font-size: 20px;
	}

	.logo {
		width: 160px;
		position: relative;
		top: 5px;
		left: 10px;
		margin: 0;
	}

	nav {
		width: 100%;
		padding: 20px 0;
		text-align: center;
	   /* position: fixed;
		top: 0;
		left: 0; */
	}

	nav ul {
		display: flex;
		justify-content: space-around;
	}　

	nav ul li{
		list-style: none;
		display: inline-block;
		width: 15%; /* ここで項目の幅を指定します */
		text-decoration: none;
	}

	nav ul li a {
		text-decoration: none;
		color: #333;
	}

	main {
		flex: 1;
		text-align: center;
		padding: 10px 30px; 
		height: 960px; 
		background-color: #fff;
		overflow-y: scroll;
	}

	main .text {
		text-align: center;
	}
	
		main h4 {
		font-size: 12px;
	}

	main img {
		width: 300px;
		height: auto;
	}

	footer { 
		text-align: center;
		width: 100%; 
		height: auto; 
		background-color: #b3aba9; 
		/* position: relative;
		bottom: 0;
		padding: 3px 0 6px 0; */
	}

	footer .text {
		font-size: 10px;
		font-weight: 400;
		color: #fff;
	}
}

@media screen and (min-width: 767px) {
/* ここに横幅が767pxより大きい時に発動するスタイルを記述 */
	body { 
		margin: 0; 
		width: 100%; 
		height: 100%; 
	}

	.container { 
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
	}

	header {
		/* position: fixed;
		display: flex; */
		width: 100%;
		height: 180px;
		background-color: #cd4629;
		background-image: url("../images/jazzbird2.jpg");
		background-repeat: no-repeat;
		background-position:center;
		background-size:auto 100%;
	}

	.logo {
		width: 300px;
		position: relative;
		top: 5px;
		left: 10px;
		margin: 0;
	}

	nav {
		width: 100%;
		padding: 20px 0;
		text-align: center;
	   /* position: fixed;
		top: 0;
		left: 0; */
	}

	nav ul {
		display: flex;
		justify-content: space-around;
	}　

	nav ul li{
		list-style: none;
		display: inline-block;
		width: 15%; /* ここで項目の幅を指定します */
		text-decoration: none;
	}

	nav ul li a {
		text-decoration: none;
		color: #333;
	}

	main {
		flex: 1;
		text-align: center;
		padding-top: 10px; 
		height: 200px; 
		background-color: #fff;
		overflow-y: scroll;
	}

	main .text {
		text-align: center;
	}

	main img {
		width: 500px;
		height: auto;
	}

	footer { 
		text-align: center;
		width: 100%; 
		height: auto; 
		background-color: #b3aba9; 
		position: absolute; 
		bottom: 0; 
		padding: 5px 0 10px 0;
	}

	footer .text {
		font-size: 12px;
		font-weight: 400;
		color: #fff;
	}
}