@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

.fs-l-pageMain{
	width: 100%;
	margin: 0;
	padding: 2rem 1rem 4rem;
	color: #737373;
}
@media screen and (min-width:641px) {
	.fs-l-pageMain{
		width: 50rem;
		margin: 0 auto;
		padding: 0.5rem 0 4rem;
	}
}
.fs-l-pageMain p.proitemLead{
	margin: 2rem 0 3rem;
	text-align: center;
	font-size: 1.2rem;
	color: #3b3e96;
}
.fs-l-pageMain .proitemList ul li::before{
	content: none;
}
@media screen and (min-width:641px) {
	.fs-l-pageMain p.proitemLead{
		font-size: 0.8rem;
	}
}



/**************************
タイトル
**************************/
h1.proitemH1{
	position: relative;
	padding-bottom: 3.5rem;
	margin: 0 0 0.75rem;
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
}
h1.proitemHubKV{
	margin: 0 -1rem;
}
h1.proitemH1 span{
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	white-space: nowrap;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.7rem;
	font-weight: 400;
	color: #3b3e96;
}
h1.proitemH1::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 4rem;
	height: 0.1rem;
	background-color: #3b3e96;
}
h2.proitemH2{
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 1.5rem;
	font-weight: 400;
	color: #2157aa;
}
h3.proitemH3{
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	background-color: #3b3e96;
	line-height: 1.5;
	font-size: 1.6rem;
	font-weight: bold;
	color: #ffffff;
}
@media screen and (min-width:641px) {
	h1.proitemH1{
		padding-bottom: 2.2rem;
		margin: 0 0 1.2rem;
		font-size: 1.5rem;
	}
	h1.proitemH1 span{
		bottom: 0.6rem;
		font-size: 0.9rem;
	}
	h1.proitemH1::before{
		width: 3rem;
	}
	h2.proitemH2{
		margin-bottom: 0.8rem;
		font-size: 0.8rem;
	}
	h3.proitemH3{
		margin: 0 0 1.5rem;
		padding: 0.6rem 1rem;
		font-size: 1.2rem;
		}
}

.proitemBackBtn a{
	display: block;
	margin-top: 5rem;
	background-color: #2157aa;
	border-radius: 1.5rem;
	text-align: center;
	line-height: 3rem;
	font-size: 1.4rem;
	color: #ffffff;
}
.proitemBackBtn a:hover{
	opacity: 0.6;
	text-decoration: none;
}
@media screen and (min-width:641px) {
	.proitemBackBtn a{
		width: 24rem;
		margin: 5rem auto 0;
		border-radius: 1.5rem;
		line-height: 3rem;
		font-size: 1.2rem;
	}
}

.proitem strong,
.proitem b{
	font-weight: bold;
}


/**************************
パーツ
**************************/
.proitem > *{
	margin: 0 0 1rem;
}
.proitem img{
	display: block;
	width: 100%;
	height: auto;
}
.proitem .blogMv{
	margin-bottom: 2.5rem;
}
.proitem .blogMv img{
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

.proitem > h4{
	padding: 2rem 0.4rem 0.6rem;
	border-bottom: solid 1px #3b3e96;
	line-height: 1.5;
	font-size: 1.6rem;
	font-weight: bold;
	color: #3b3e96;
}

.proitem > h4:first-of-type{
	padding-top: 0;
}

.proitem p,
.proitem > h5{
	margin-bottom: 2.5rem;
	line-height: 2.5rem;
	font-size: 1.5rem;
}
.proitem > h5{
	font-weight: bold;
}
.proitem p a{
	text-decoration: underline;
	color: #2157aa;
}
.proitem p a:hover{
	color: #b2b2b2;
}
.proitem .fcR{
	color: #ff0000;
}
.proitem .fcB{
	color: #0000ff;
}
.proitem .fwB{
	font-weight: bold;
}
@media screen and (min-width:641px) {
	.proitem .blogMv{
		margin-bottom: 1.5rem;
	}
	.proitem > h4{
		margin-bottom: 0.7rem;
		padding: 1rem 0.5rem 0.2rem;
		font-size: 0.9rem;
	}

	.proitem p,
	.proitem > h5{
		margin-bottom: 1.5rem;
		line-height: 1.5rem;
		font-size: 0.8rem;
	}
	.proitem p a{
		text-decoration: underline;
		color: #2157aa;
	}
}


/**************************
商品
**************************/
.single-blog .fs-l-pageMain .itemBox{
	display:-webkit-flex; display:flex;
	-webkit-flex-wrap:wrap; flex-wrap:wrap;
	margin: 0 -0.5rem;
}
.proitem .item{
	width: 50%;
	margin-bottom: 3rem;
	padding: 0 0.5rem;
}
.proitem .item .itemH4{
	margin: 1rem 0;
	text-align: center;
	line-height: 1.5;
	font-size: 1.1rem;
	font-weight: 500;
	color: #2157aa;
}
.proitem .item .itemBtn a{
	display: block;
	width: 90%;
	margin: 0 auto;
	background-color: #2157aa;
	border-radius: 1.05rem;
	text-align: center;
	line-height: 2.1rem;
	font-size: 1rem;
	color: #ffffff;
}
.proitem .item .itemBtn a:hover{
	opacity: 0.6;
	text-decoration: none;
}
@media screen and (min-width:641px) {
	.proitem .item{
		width: 25%;
	}
	.proitem .item .itemH4{
		font-size: 0.8rem;
	}
	.proitem .item .itemBtn a{
		font-size: 0.8rem;
	}
}


/**************************
ページネーション
**************************/
.fs-l-pageMain .pagination{
	display:-webkit-flex; display:flex;
	-webkit-justify-content:center; justify-content:center;
	margin: 2rem auto 0;
}
.fs-l-pageMain ul.page-numbers{
	display:-webkit-flex; display:flex;
}
.fs-l-pageMain ul.page-numbers li{
	padding: 0;
}
.fs-l-pageMain ul.page-numbers li::before{
	content: none;
}
.fs-l-pageMain ul.page-numbers .page-numbers{
	display: block;
	margin: 0 0.4rem;
	border: solid 1px #737373;
	font-size: 0.9rem;
	line-height: 0.8;
	padding: 8px;
}
.fs-l-pageMain ul.page-numbers a.page-numbers.prev,
.fs-l-pageMain ul.page-numbers a.page-numbers.next{
	border: none;
	font-weight: bold;
}
.fs-l-pageMain ul.page-numbers .page-numbers.current{
	background-color: #737373;
	color: #ffffff;
}
.fs-l-pageMain ul.page-numbers .page-numbers.dots{
	border: none;
}
.fs-l-pageMain ul.page-numbers a.page-numbers:hover{
	text-decoration: none;
}