@charset "UTF-8";

h1, h2, h3, h4, .main-contents p, .main-contents ol li, .main-contents ul li, .main-contents ul li a, .main-contents dt, .main-contents dd, .main-contents a{
	font-family: 'Noto Sans JP', sans-serif!important;
}

.bg-wrapper{
	width:100%;
	box-sizing: border-box;
	padding:40px 0;
	position:relative;
}

.yomo-title{
	width:60%;
	margin-bottom:40px;
}

.pink{
	background-color:#f9e6dc;
	background-image:url("img/bg-round-green.svg");
	background-size:150%;
	background-position:top -90px center;
	background-repeat: no-repeat;
}

.white{
	background-color:#fff;
	padding-bottom:0!important;
}

.month-title-box{
	width:70%;
	margin:40px auto;
}

.month-title{
	width:80%;
	margin:30px auto;
	box-sizing: border-box;
	padding-bottom:20px;
}

.top-flex{
	margin-top:50px;
	display:flex;
	justify-content: space-between;
	align-items: center;
}

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

.top-img-box{
	width:60%;
}

.top-cap-box{
	width:35%;
}

.t-img-01{
	width:25%;
	margin:30px auto;
}

.t-img-02{
	width:95%;
	margin:30px 0;
}

.t-img-01, .t-img-02{
	display:block;
}

.t-img-02-sp{
	display:none;
}

.new-com-box-01{
	width:70%;
	margin:40px auto;
	box-sizing: border-box;
	padding:30px 0;
}

.new-com-box-01 h2{
	margin:30px 0;
}

.new-com-box-01 h2 img{
	height:50px;
}

.new-com-big-flex{
	display:flex;
	flex-wrap: wrap;
	gap:40px 60px;
}

.new-com-container{
	width:calc((100% - 30px * 2)/ 2);
}

.new-com-container p{
	box-sizing: border-box;
	padding:15px 30px 15px 10px;
}

.new-com-p p{
	text-align: center;
	font-weight:700;
	margin:40px 0;
}

.bbq-flex{
	width:70%;
	margin:40px auto;
	display:flex;
	justify-content:space-between;
	align-items: center;
}

.bbq-img{
	width:55%;
}

.bbq-cap{
	width:40%;
}

.bbq-title{
	width:15%;
	margin:0 auto 30px;
}

.new-com-box-02{
	width:75%;
	margin:40px auto;
	box-sizing: border-box;
	padding-top:50px;
}

.newface-top-flex{
	width:70%;
	margin:50px auto;
	display:flex;
	align-items: center;
	justify-content: space-between;
}

.nf-title{
	width:60%;
}

.nf-title-img{
	width:20%;
	margin:0 auto 30px;
}

.question{
	width:35%;
}

.question h3 img{
	height:25px;
	margin-bottom:20px;
}

.bb{
	font-weight:700;
}

.newface-flex-container{
	width:100%;
	display:flex;
	gap:30px;
	padding-top:40px;
}

.newface-box{
	width:calc((100% - 30px * 2)/ 4);
}

.staff-p{
	width:100%;
	box-sizing: border-box;
	padding:10px;
}

.staff-p h4{
	font-size:1.4rem;
	text-decoration: underline;
	color:#000;
	margin-bottom:20px;
}

.ex-top-cap{
	width:60%;
	margin:40px auto;
	box-sizing: border-box;
	padding:20px 30px;
	display:flex;
	align-items: center;
	justify-content: space-between;
	background-image: url("img/ex-mark.svg");
	background-size:15%;
	background-position:top right;
	background-repeat: no-repeat;
}

.ex-title{
	width:40%;
}

.ex-cap{
	width:55%;
}

.nanga-box{
	width:70%;
	margin:50px auto;
	padding-top:20px;
	display:flex;
	align-items: center;
	justify-content: space-between;
}

.f-img{
	width:55%;
}

.f-cap{
	width:40%;
}

.f-cap h2, .o-p h2{
	text-align: center;
}

.f-cap h2 img{
	height:30px;
}

.f-cap p, .o-p p{
	margin:20px 0;
}

.other-flex{
	width:70%;
	margin:50px auto;
	padding-top:30px;
	display:flex;
	align-items:flex-start;
	gap:40px;
}

.other-box{
	width:calc((100% - 40px * 2)/ 2);
	box-sizing: border-box;
	padding:20px;
}

.o-p{
	width:100%;
	box-sizing: border-box;
	padding:20px 10px;
}

.o-p h2 img{
	height:25px;
}

.o-detail{
	width:60%;
	box-sizing: border-box;
	padding-top:15px;
	margin:auto;
	display:flex;
	align-items: center;
	justify-content: space-between;
}

.o-detail h3{
	width:25%;
}

.detail-img{
	width:65%;
}

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

	.bg-wrapper{
		padding:30px 0;
	}
	
	.pink{
		background-size:150%;
		background-position:top 600px center;
	}
	
	.month-title-box, .new-com-box-01, .new-com-box-02, .ex-top-cap{
		width:90%;
	}

	.month-title-box{
		margin:20px auto;
	}

	.month-title{
		margin:10px auto;
		padding-bottom:20px;
	}

	.top-flex{
		margin-top:30px;
	}
	
	.t-img-01, .t-img-02{
		display:none;
	}

	.t-img-02-sp{
		display:block;
		margin:30px auto 20px;
	}
	
	.sp-t-flex{
		width:100%;
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.left-img{
		width:60%;
	}

	.right-img{
		width:20%;
	}
	
	.new-com-box-01{
		margin:20px auto;
		padding:10px 0;
	}
	
	.bbq-flex, .newface-top-flex, .other-flex, .o-detail{
		width:80%;
	}
	
	.bbq-title{
		width:20%;
	}
	
	.newface-flex-container{
		width:85%;
		margin:auto;
		gap:50px 30px;
		padding-top:30px;
		flex-wrap: wrap;
	}

	.newface-box{
		width:calc((100% - 15px * 2)/ 2);
	}
	
	.nanga-box{
		width:70%;
		display:block;
	}
	
	.f-img, .f-cap{
		width:100%;
	}

	.f-cap{
		box-sizing: border-box;
		padding:30px;
	}

	.other-flex{
		padding-top:10px;
	}

	.other-box{
		width:calc((100% - 20px * 2)/ 2);
		padding:0;
	}

}

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

	.bg-wrapper{
		padding:10px 0;
	}
	
	.pink{
		background-size:500%;
		background-position:top 700px center;
	}
	
	.bbq-flex, .new-com-box-02, .other-flex{
		width:90%;
	}
	
	.month-title, .top-img-box, .top-cap-box, .new-com-container, .bbq-img, .bbq-cap, .newface-top-flex, .nf-title, .question, .newface-box, .ex-top-cap, .ex-cap, .nanga-box, .other-box, .yomo-title{
		width:100%;
	}

	.top-flex, .new-com-big-flex, .bbq-flex, .newface-top-flex, .newface-flex-container, .ex-top-cap, .other-flex{
		display:block;
	}
	
	.t-img-02{
		width:60%;
	}
	
	.t-img-01{
		width:20%;
		margin:20px 0;
	}
	
	.new-com-box-01 h2 img{
		height:30px;
	}
	
	.new-com-container, .newface-box{
		margin-bottom:50px;
	}
	
	.new-com-container:last-of-type{
		margin-bottom:0;
	}
	
	.bbq-cap{
		padding-top:20px;
	}
	
	.bbq-title{
		width:14%;
	}
	
	.new-com-box-02{
		margin:20px auto;
		padding-top:30px;
	}

	.newface-top-flex{
		margin:10px auto;
	}

	.question{
		margin-top:30px;
		box-sizing: border-box;
		padding:20px;
	}
	
	.staff-p h4{
		font-size:1.5rem;
	}

	.ex-top-cap{
		margin:30px auto;
		padding:20px 30px;
		background-size:35%;
		background-position:bottom right;
	}

	.ex-title{
		width:70%;
		margin-bottom:40px;
	}
	
	.other-box{
		margin-bottom:70px;
	}
	
	.o-detail{
		width:60%;
	}


}
/* CSS Document */