@charset "UTF-8";
/* 共通 */
.el_deco02_ttl{
	color: #193250;
	display: flex;
	justify-content: center;
	align-items: center;
}
.el_deco02_ttl::before,
.el_deco02_ttl::after{
	content: '';
	width: 72px;
	height: 26px;
	margin-right: 24px;
	background: url(../images/supplement/ttl_wing__l.svg) top center / contain no-repeat;
}
.el_deco02_ttl::after{
	margin: 0 0 0 24px;
	background: url(../images/supplement/ttl_wing__r.svg) top center / contain no-repeat;
}
.bl_breadcrumbs{
	margin-top: 0;
}
.el_buyBtn{
	background: url(../images/supplement/buy_btn.svg) top center / cover no-repeat;
  width: 362px;
  height: 74px;
  color: #fff;
  display: flex;
  margin: 32px auto 0;
  padding-bottom: 7px;
}
.el_buyBtn::after{
	content: none;
}
@media screen and (max-width: 750px) {
	.el_deco02_ttl::before,
	.el_deco02_ttl::after{
		content: none;
	}
	.el_buyBtn{
	    background: url(../images/supplement/buy_btn_sp.svg) top center / cover no-repeat;
	    width: 458px;
	    height: 114px;
	    font-size: 32px;
		margin-top: 56px;
	}
}

/*=======================================================
MV
=======================================================*/
.ly_mv{
	background: url(../images/supplement/mv_bg.jpg) top center / cover no-repeat;
	padding: 216px 0 56px;
}
.bl_mv_ttl{
	width: 523px;
	margin: 0 auto 216px;
}
.bl_mv_txtWrapper{
	width: 320px;
	height: 140px;
	background: url(../images/supplement/mv_txt_bg.svg) top center / contain no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0 auto;
}
.bl_mv_txtWrapper::before{
	content: '';
	position: absolute;
	background: url(../images/supplement/butterfly01.png) top center / contain no-repeat;
	width: 89px;
	height: 89px;
	top: -170px;
	left: 104px;
	z-index: 1;
}
.bl_mv_txtWrapper::after{
	content: '';
	position: absolute;
	background: url(../images/supplement/shining01.png) top center / contain no-repeat;
	width: 120px;
	height: 184px;
	top: -184px;
	right: 42px;
}
.bl_mv_txt{
	text-align: center;
	font-size: 20px;
	color: #193250;
}
.bl_breadcrumbs_inner{
	padding-bottom: 8px;
}
@media screen and (max-width: 750px) {
	.ly_mv{
		background: url(../images/supplement/mv_bg_sp.jpg) top center / cover no-repeat;
		padding: 216px 0 76px;
	}
	.bl_mv_ttl{
		width: 546px;
		margin: 0 auto 356px;
	}
	.bl_mv_txtWrapper{
		width: 420px;
		height: 184px;
	}
	.bl_mv_txtWrapper::before{
		width: 110px;
		height: 110px;
		top: -297px;
		left: 154px;
	}
	.bl_mv_txtWrapper::after{
		width: 150px;
		height: 230px;
		top: -228px;
		right: 64px;
	}
	.bl_mv_txt{
		font-size: 26px;
	}
}

/*=======================================================
about
=======================================================*/
.bl_about{
	padding: 56px 0 70px;
	background: url(../images/supplement/about_bg.jpg) top center / cover no-repeat;
	margin-top: -40px;
}
@media screen and (max-width: 750px) {
	.bl_about{
		padding: 96px 0 64px;
		background: url(../images/supplement/about_bg_sp.jpg) top center / cover no-repeat;
		margin-top: -53px;
	}
}

/*=======================================================
feature
=======================================================*/
.bl_feature{
	padding: 24px 0 96px;
	background: url(../images/supplement/feature_bg.jpg) bottom center / 2000px 492px no-repeat #fff;
}
.bl_feature .bl_txtWrapper{
	height: 170px;
	background: url(../images/supplement/supplement_txt_bg.svg) top center / contain no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 56px;
}
.bl_feature .bl_txtWrapper .el_txt{
	font-size: 20px;
}
@media screen and (max-width: 750px) {
	.bl_feature{
		padding: 56px 0;
		background: url(../images/supplement/feature_bg_sp.jpg) bottom center / contain no-repeat #fff;
	}
	.bl_feature .bl_txtWrapper{
		height: 204px;
		margin-top: 56px;
	}
	.bl_feature .bl_txtWrapper .el_txt{
		font-size: 26px;
	}
}

/*=======================================================
supplement
=======================================================*/
.bl_supplement{
	padding: 42px 0 120px;
	background: url(../images/supplement/supplement_bg.jpg) top center / 2000px 838px;
}
.bl_supplement .ly_cont_inner{
	width: 1200px;
}
.bl_supplementWrapper{
	position: relative;
	padding: 0 84px 80px;
	z-index: 2;
}
.bl_supplementWrapper::before{
	content: '';
	position: absolute;
	background: #191C20;
	width: 100%;
	height: calc(100% - 129px);
	top: 129px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -2;
}
.bl_supplementWrapper::after{
	content: '';
	position: absolute;
	width: 100%;
	height: calc(100% - 129px);
	border-right: 8px solid;
	border-left: 8px solid;
	/* border-right: 8px solid transparent; */
	border-image-source: linear-gradient(180deg, #A17E5C 0%, #FEE5C6 50%, #A17E5C 100%);
	border-image-slice: 1;
	top: 129px;
	left: 0;
	/* z-index: ; */
	z-index: -1;
}
.el_supplement_ttl{
	width: 564px;
	height: 258px;
	background: url(../images/supplement/supplement_ttl_bg.svg) top center / contain no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #F4B737;
	font-size: 32px;
	top: 0;
	position: relative;
	margin: 0 auto 56px;
}
.el_supplement_ttl{
	width: 564px;
	height: 258px;
	background: url(../images/supplement/supplement_ttl_bg.svg) top center / contain no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #F4B737;
	font-size: 32px;
	top: 0;
	position: relative;
	margin: 0 auto 56px;
}
.el_supplement_ttl > span{
	display: block;
	color: #fff;
	font-size: 20px;
}
.el_supplement_ttl::before{
	content: '';
	position: absolute;
	background: url(../images/supplement/butterfly02.png) top center / contain no-repeat;
	width: 118px;
	height: 82px;
	top: -134px;
	right: 0;
	z-index: 1;
}
.el_supplement_ttl::after{
	content: '';
	position: absolute;
	background: url(../images/supplement/shining02.png) top center / contain no-repeat;
	width: 120px;
	height: 184px;
	top: -80px;
	right: -66px;
}
.bl_supplement .bl_media{
	width: 935px;
}
.bl_supplement .bl_media:not(:first-of-type){
	margin-top: 56px;
}
.bl_supplement .bl_media_imgWrapper{
	flex: 0 1 228px 
}
.bl_supplement .bl_media_ttl{
	color: #EFB537;
	padding-bottom: 16px;
	border-bottom: 1px solid #EFB537;
}
.bl_supplement .bl_media_ttl > span{
	color: #fff;
	display: block;
	font-size: 20px;
	margin-top: 8px;
}
.bl_supplement .bl_media_ttl::after{
	content: none;
}
.bl_supplement .bl_price{
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}
.bl_supplement .bl_price > span{
	font-size: 17px;
	font-weight: normal;
}
.bl_supplement .bl_media_txt{
	color: #fff;
}
.bl_supplement .bl_media_body .el_att{
	color: #fff;
	font-size: 14px;
	margin-top: 8px;
}
.bl_detail_list{
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.bl_detail_ttl{
	height: 45px;
	background: linear-gradient(90deg, #7C6522 0%, #EFB537 100%);
	font-size: 18px;
	color: #fff;
	display: flex;
	align-items: center;
	padding: 0 0 2px 32px;
}
.bl_detail_item > dd{
	background: #fff;
	padding: 16px 32px;
	font-size: 15px;
}
.bl_detail_item:first-of-type> dd{
	font-size: 16px;
}
.bl_detail_item > dd .bl_bulletList{
	display: grid;
	grid-template: repeat(3, auto) / 380px 1fr;
	grid-auto-flow: column;
}
.bl_detail_list:first-of-type .bl_detail_item:first-of-type > dd .bl_bulletList,
.bl_detail_list:nth-of-type(5) .bl_detail_item:first-of-type > dd .bl_bulletList{
	grid-template: repeat(4, auto) / 380px 1fr;
}
.bl_detail_list:nth-of-type(3) .bl_detail_item:nth-of-type(2) > dd .bl_bulletList,
.bl_detail_list:nth-of-type(4) .bl_detail_item:nth-of-type(2) > dd .bl_bulletList,
.bl_detail_list:nth-of-type(5) .bl_detail_item:nth-of-type(2) > dd .bl_bulletList,
.bl_detail_list:nth-of-type(6) .bl_detail_item:nth-of-type(2) > dd .bl_bulletList{
	grid-template: repeat(4, auto) / 380px 1fr;
}
.bl_detail_item .bl_toggle{
	position: relative;
	cursor: pointer;
}
.bl_detail_item .bl_toggle::after{
	content: '▼';
	position: absolute;
	width: 29px;
	height: 29px;
	padding: 0px 0.5px 0 1.5px;
	background: #fff;
	color: #193250;
	font-size: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 50%;
	transform: translateY(-50%);
	right: 19px;
}
.bl_detail_item .bl_toggle.open::after{
	content: '▲';
}
.bl_detail_item .bl_toggle + dd{
	display: none;
}
.bl_lineList > li::before{
	content: '-';
}
/* .bl_detail_item:nth-of-type(2) > dd .bl_lineList{
display: grid;
grid-template: repeat(4, auto) / 236px 1fr;
grid-auto-flow: column;
gap: 0 32px;
} */
.bl_detail_list:first-of-type .bl_detail_item:nth-of-type(2) > dd .bl_lineList{
	grid-template: repeat(8, auto) / 236px 236px;
}
.bl_detail_item > dd > dl > div{
	display: flex;
}
.bl_detail_item > dd > dl > div > dt{
	font-weight: bold;
	flex: 0 1 67px;
	position: relative;
}
.bl_detail_item > dd > dl > div > dt::after{
	content: '：';
}
.bl_detail_item > dd > dl > div > dd{
	flex: 1;
}
.bl_detail_item .el_att{
	color: #9A162B;
	margin-top: 16px;
}
@media screen and (max-width: 750px) {
	.bl_supplement{
		padding: 82px 0 180px;
		background: url(../images/supplement/supplement_bg.jpg) top center / 2000px 838px;
	}
	.bl_supplement .ly_cont_inner{
		width: 690px;
	}
	.bl_supplementWrapper{
		padding: 0 28px 94px;
	}
	.bl_supplementWrapper::before{
		width: 100%;
		height: calc(100% - 159px);
		top: 159px;
	}
	.bl_supplementWrapper::after{
		border-right: 4px solid;
		border-left: 4px solid;
		height: calc(100% - 159px);
		top: 159px;
	}
	.el_supplement_ttl{
		width: 690px;
		height: 316px;
		background: url(../images/supplement/supplement_ttl_bg.svg) top center / contain no-repeat;
		font-size: 40px;
		letter-spacing: 2.4px;
		margin: 0 auto 56px -28px;
		z-index: 1;
	}
	.el_supplement_ttl::before,
	.el_supplement_ttl::after{
		content: none;
	}
	.el_supplement_ttl > span{
		font-size: 27px;
	}
	.bl_supplement .bl_media{
		width: 100%;
	}
	.bl_supplement .bl_media:not(:first-of-type){
		margin-top: 56px;
	}
	.bl_supplement .bl_media_imgWrapper{
		flex: 0 1 402px;
		margin: 0 auto;
	}
	.bl_supplement .bl_media_body{
		flex: 100%;
	}
	.bl_supplement .bl_media_body .el_att{
		font-size: 22px;
		margin-top: 16px;
	}
	.bl_supplement .bl_media_ttl{
		padding-bottom: 24px;
	}
	.bl_supplement .bl_media_ttl > span{
		font-size: 32px;
	}
	.bl_supplement .bl_price{
		font-size: 32px;
		text-align: center;
	}
	.bl_supplement .bl_price > span{
		font-size: 28px;
	}
	.bl_detail_list{
		margin-top: 32px;
		gap: 32px;
	}
	.bl_detail_ttl{
		height: 62px;
		font-size: 32px;
		justify-content: center;
		padding: 0 0 2px 0;
	}
	.bl_detail_item > dd{
		padding: 16px 18px 24px;
		font-size: 27px;
	}
	.bl_detail_item:first-of-type> dd{
		font-size: 27px;
	}
	.bl_detail_item:first-of-type > dd .bl_bulletList{
		display: flex;
		flex-direction: column;
	}
	.bl_detail_item .bl_toggle::after{
		width: 36px;
		height: 36px;
		font-size: 17px;
		right: 18px;
	}
	.bl_lineList > li{
		padding-left: 0.5em;
	}	
	.bl_detail_item:nth-of-type(2) > dd .bl_lineList,
	.bl_detail_list:nth-of-type(3) .bl_detail_item:nth-of-type(2) > dd .bl_lineList{
		grid-template: repeat(4, auto) / 1fr 1fr;
		gap: 0;
	}
	.bl_detail_list:first-of-type .bl_detail_item:nth-of-type(2) > dd .bl_lineList{
		grid-template: repeat(12, auto) / 1fr 1fr;
		gap: 0;
		letter-spacing: 1.08px;
	}
	.bl_detail_list:nth-of-type(2) .bl_detail_item:nth-of-type(2) > dd .bl_lineList,
	.bl_detail_list:nth-of-type(4) .bl_detail_item:nth-of-type(2) > dd .bl_lineList,
	.bl_detail_list:nth-of-type(5) .bl_detail_item:nth-of-type(2) > dd .bl_bulletList,
	.bl_detail_list:nth-of-type(6) .bl_detail_item:nth-of-type(2) > dd .bl_lineList{
		display: flex;
		flex-direction: column;
	}
	.bl_detail_item > dd > dl > div > dt{
		flex: 0 1 120px;
	}
	.bl_detail_item .el_att{
		margin-top: 24px;
		font-size: 20px;
	}
}

/* footer */
.ly_foot_inner::before{
	content: '';
	position: absolute;
	background: url(../images/supplement/butterfly03.png) top center / contain no-repeat;
	width: 96px;
	height: 103px;
	top: -190px;
	left: 10px;
	z-index: 5;
}
.ly_foot_inner::after{
	content: '';
	position: absolute;
	background: url(../images/supplement/shining03.png) top center / contain no-repeat;
	width: 90px;
	height: 138px;
	top: -138px;
	left: 0;
	z-index: 5;
}
@media screen and (max-width: 750px) {
	.ly_foot_inner::before{
		width: 130px;
		height: 140px;
		top: -224px;
		left: 328px;
	}
	.ly_foot_inner::after{
		width: 122px;
		height: 186px;
		top: -157px;
		left: 290px;
	}
}
/* iPad Safari */
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
	_::-webkit-full-page-media, _:future, :root .bl_supplement .ly_cont_inner{
		width: 1012px;
		padding: 0 32px 94px;
	}
}