@charset "UTF-8";


	body {	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
		}

	#home {
		background-image: linear-gradient(#f7c6bd, #e2eba3);
		width: strech;
		padding: 2% 2%;
		}

	a { text-decoration: none;}
	img { max-width: 100%;}
	.title { max-width: 80%;}

	.main-nav a {
		background: #e2eba3;
		border-radius: 5px;
		padding: 1px 5px;
		color: #432;
		}

	.main-nav a:hover {
		background: #80a491;
		color: white;
		}

	
	.item {
		margin: 5%;
		}

	.item3 {
		margin: 1%
		}

@media screen and (max-width: 479px) {

	.main-nav {
		display: flex;
		font-size: clamp(12px, 6vw, 22px);
		text-transform: uppercase;
		list-style: none;
		}

	.main-nav li {
		margin: 0 auto;
		}


	.grid {
		grid-template-columns: repeat(1, minmax(180px, 1fr));
		}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		}

	.container2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		}

	.pc {display: none !important;}
	.sp {display: block !important;}

	footer {
		background: #432;
		}

	footer p {
		color: #fff;
		font-size: clamp(12px, 3vw, 20px);
		}
	}

@media screen and (min-width: 480px) and (max-width: 959px) {

	.main-nav {
		display: flex;
		font-size: clamp(12px, 8vw, 30px);
		text-transform: uppercase;
		list-style: none;
		}

	.main-nav li {
		margin: 0 auto;
		}

	.grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(180px, 1fr));
		}

	.container {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 2%;
		}

	.container2 {
		display: grid;
		grid-template-columns: repeat(2, minmax(200px, 1fr));

		}

	.pc {display: block !important;}
	.sp {display: none !important;}

	footer {
		background: #432;
		}

	footer p {
		color: #fff;
		font-size: clamp(12px, 3vw, 20px);
		}
	}

@media screen and (min-width: 960px) {

	.page-header {
		max-width: 1200px;
		display: flex;
		justify-content: space-around;
		}

	.logo {
		max-width: 400px;
      		margin-top: 10px;
		}

	.main-nav {
		display: flex;
		font-size: 1.5rem;
		text-transform: uppercase;
		list-style: none;
		}

	.main-nav li {
		margin: 20px;
		}

	.grid {
		max-width: 1200px;
		display: grid;
		grid-template-columns: repeat(3, minmax(255px, 1fr));
		padding: 2%
		}

	.item {
		margin: 3%;
		}

	.container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 2%;
		}

	.container2 {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 5% auto;
		}

	.pc {display: block !important;}
	.sp {display: none !important;}

	footer {
		background: #432;
		padding: 0 0;
		margin-top:20px;
		}

	footer p {
		color: #fff;
		font-size: 1.5rem;
		}
	}