@charset "UTF-8";

html{
	font-size:62.5%;
}

bg{
	box-sizing: border-box;
	padding:40px 0;
}

p, .name, .new-item-list, .sp-center{
	font-family: 'Noto Sans JP', sans-serif;
}

p{
	font-size:1.4rem;
}

h1{
	font-family: 'Caveat', cursive;
	font-size:6rem;
	text-align: center;
	margin:20px 0;
}

.yellow{
	background-color:#f2bf2c;
}

.pink{
	background-color:#f2a285;
}

.blue{
	background-color:#a9d4d9;
}

.white{
	background-color:#fff;
}

.top-caption, .styling-container, .other-container{
	width:800px;
	margin:40px auto;
	box-sizing: border-box;
}

.top-caption{
	padding:50px 0;
}

.item-caption{
	width:700px;
	margin:40px auto;
	padding:70px 0;
}

.title-img{
	width:160px;
	margin:auto;
}

.item-caption h1, .item-caption p, .other-container{
	color:#fff;
}

.item-caption p{
	/*font-weight:700;*/
	text-align: center;
}

.styling-container{
	padding:50px 0;
}

.flex-wrapper, .other-flex{
	display:flex;
	height:auto;
	align-items: center;
	justify-content: space-between;
}

.reverse{
	flex-direction:row-reverse;
}

.style-img{
	width:55%;
}

.bottom-img{
	width:42%;
	margin-top:47%;
}

.color-box{
	width:80px;
	height:8px;
	background-color:#f2bf2c;
	margin:10px auto 30px;
	border-radius:15px;
}

.comment{
	margin:30px 0;
	box-sizing: border-box;
	padding:0 15px;
}

.new-item-list{
	margin-top:30px;
}

.other-container{
	padding:40px 0;
}

.other-container h2{
	font-family: 'Noto Sans JP', sans-serif;
	font-size:2.5rem;
	letter-spacing:3px;
	text-align: center;
	color:#000;
}

.title-white{
	background-color:#fff;
}

.other-container li{
	color:#fff;
	text-align: center!important;
}

.other-flex{
	padding:20px 0 40px;
	gap:15px 30px;
}

.other-img{
	width:calc((100% - 30px * 2) / 2);
}

.name{
	color:#f2bf2c;
}

.jiko_soto{
	margin:30px auto;
	padding:30px;
}

/*タブレット用*/
@media screen and (max-width: 820px){

	.top-caption, .styling-container, .other-container{
		width:700px;
	}
	.item-caption{
		width:600px;
	}

}

/*スマホ用*/
@media screen and (max-width:640px){

	.top-caption, .styling-container, .other-container{
		width:320px;
	}
	
	.item-caption{
		width:300px;
	}
	
	.item-caption p{
		text-align: justify;
	}
	
	.title-img{
		width:120px;
	}
	
	.styling-container:first-of-type{
		padding:30px 0 50px;
	}
	
	.flex-wrapper, .other-flex{
		display:block;
	}
	
	.style-img, .other-img{
		width:100%;
	}
		
	.bottom-img{
		width:80%;
		margin:20px auto;
		padding-top:30px;
	}
	
	.other-flex{
		gap:0;
	}
	
	.other-img{
		margin-bottom:50px;
	}
	
	.other-img:last-of-type{
		margin-bottom:0;
	}
	
	.other-flex .new-item-list{
		margin-top:0;
	}



}

/* CSS Document */