@charset "UTF-8";

html{
	font-size:62.5%;
}

h1, h2, h5{
	font-family: 'Poppins', sans-serif;
}

p, a, ul li{
	font-family: 'Noto Sans JP', sans-serif;
}

.strong{
	background:linear-gradient(transparent 60%, #f5d952 60%) !important;
}

.mid-wrapper{
	box-sizing: border-box;
	padding:30px 0;
}

.top-caption{
	width:700px;
	margin:30px auto;
}

.top-caption p, .comment p, .jiko_text p{
	font-size:1.3rem;
	color:#000;
}

.jiko_text p{
	margin-bottom:10px;
}

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

.yellow{
	background-color:#fdf6d4;
}

.blue{
	background-color:#d8f2f1;
}

.style-wrapper{
	width:900px;
	margin:20px auto;
}

.style-wrapper h1{
	font-size:3.5rem;
	letter-spacing:2px;
	text-align: center;
}

.yellow h1, .yellow h2{
	color:#f2b705;
}

.blue h1, .blue h2{
	color:#72a69c;
}

.style-big-img{
	width:600px;
	margin:25px auto 35px;
	padding:15px;
	box-sizing: border-box;
	border-radius:10px;
}

.yellow .style-big-img{
	background-color:#f3d027;
}

.blue .style-big-img{
	background-color:#8eb8b0;
}

.comment{
	width:700px;
	margin:50px auto 30px;
	box-sizing: border-box;
	padding:20px 30px;
	background-color:rgba(255,250,250,0.60);
	border-radius:10px;
}

.comment h2{
	font-size:2rem;
}

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

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

.flex-container{
	padding:30px 0;
}

.flex-img{
	width:48%;
}

.flex-credit{
	width:47%;
}

.name h5{
	color:#f3d027;
}

.jikoshoukai-img-box{
	margin:20px 0;
}

.center-img{
	width:60%!important;
	margin:5px auto;
}

.jiko-flex img{
	width:49%!important;
}

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

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

	.top-caption, .comment{
		width:600px;
	}
	
	.style-wrapper{
		width:700px;
	}
	
	.style-big-img{
		width:500px;
	}
	
	.jikoshoukai-img-box{
		padding:20px 0 30px;
	}
	
	.jiko-flex{
		padding-top:5px;
	}

}

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

	.mid-wrapper{
		width:100%!important;
	}

	.top-caption{
		width:70%!important;
		padding:30px 0;
	}
	
	.style-wrapper{
		width:90%;
	}
	
	.style-wrapper h1{
		font-size:2.3rem;
	}
	
	.comment h2{
		font-size:1.8rem;
	}
	
	.style-big-img, .comment, .flex-img, .flex-credit{
		width:100%;
	}
	
	.style-big-img{
		padding:10px;
	}
	
	.flex-container{
		display:block;
	}
	
	.flex-img{
		margin-bottom:30px;
	}
	
	.flex-credit{
		box-sizing: border-box;
		padding:10px;
	}
	
	.jikoshoukai, .jikoshoukai div{
		width:100%!important;
	}
	
	.jikoshoukai{
		padding:15px 0;
	}
	
	.jikoshoukai-img-box{
		padding:20px 0 15px;
	}

}

/* CSS Document */