@charset "UTF-8";

/* platinum_component common */
.fc_black {
	color: #000000 !important;
}

.icoLink._gray {
	padding: 0;
	color: #C7C7C7;
	background: none;
}

.icoLink._gray[target="_blank"]::before {
    content: '';
    position: relative;
	display: inline-block;
    width: 15px;
    height: 15px;    
	margin-right: 5px;
    background-color: #C7C7C7;
    -webkit-mask: url(../images/ico_arr_01.png) no-repeat center / contain;
    mask: url(../images/ico_arr_01.png) no-repeat center / contain;
}

.icoLink._gray[target="_blank"]::after {
    content: '';
    position: relative;
	display: inline-block;
    width: 15px;
    height: 15px;    
	margin-left: 5px;
    background-color: #C7C7C7;
    -webkit-mask: url(../images/ico_window.png) no-repeat center / contain;
    mask: url(../images/ico_window.png) no-repeat center / contain;
}

/* platinum_component PC */
@media only screen and (min-width: 768px) {
	/* coverTitle */
	.coverTitle.blackBg.blackComponent,
	.h1Title01.blackBg.blackComponent,
	#topicPath.blackBg.blackComponent {
		background-color: #000000 !important;
	}

	.h1Title01.blackBg.blackComponent .titleInner,
	#topicPath.blackBg.blackComponent .topicPathInner > span > * {
		color: #FFFFFF !important;
	}

	#topicPath.blackBg.blackComponent .topicPathInner {
		width: 1200px !important;
	}

	.h1Title01.blackBg.blackComponent .titleInner {
		margin-left: 0 !important;
	}

	.coverTitle.blackBg.blackComponent br.spOnly {
		display: none;
	}

	/* grayBlock */
	.blockInner.grayBlock {
		max-width: unset;
		padding: 72px 0 81px;
		background: #F0F2F3;
		background-image: url(/platinum/service/membersselection/images/img_grayBlock_bg.png);
		background-repeat: no-repeat;
		background-size: 369px 230px;
		background-position: top right;
	}

	.blockInner.grayBlock .grayInnerPc {
		max-width: 1200px;
		margin: 0 auto;
	}

	.blockInner.grayBlock .hStyle01 {
		color: #000000;
	}

	.blockInner.grayBlock .hStyle01 + p {
		margin-top: 54px;
		font-size: 18px;
		font-weight: 500;
		line-height: 30px;
		text-align: left;
		color: #000000;
	}

	.blockInner.grayBlock .commentBox {
		margin-top: 18px;
	}

	.blockInner.grayBlock .commentBox li {
		margin-bottom: 0;
	}

	.blockInner.grayBlock .entryBtn {
		margin-top: 49px;
	}

	.blockInner.grayBlock .entryBtn a {
		padding: 15px 20px;
		background-image: url(/platinum/images/ico_max.png) !important;
		background-size: 20px, 100% !important;
		background-color: #ffffff;
		border: 1px solid #E1E1E1;
		border-radius: 3px;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
		font-size: 18px;
		font-weight: 700;
		line-height: 30px;
	}

	.hStyle01.ttlWiPhar.slashTxt {
		margin-top: 56px;
		margin-bottom: 17px;
	}

	.blockInner.flexBlock {
		padding: 0 0 30px;
	}

	.silverBg.grayBlock {
		padding: 83px 0 80px;
		background: #F0F2F3;
		background-image: url(/platinum/service/membersselection/images/img_grayBlock_bg.png);
		background-repeat: no-repeat;
		background-size: 369px 230px;
		background-position: top right;
	}

	.flexWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 20px;
	}

	.flexWrap .flexBox {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		max-width: 285px;
		color: #000000;
		user-select: none;
	}

	.flexWrap .flexBox .imgWrap {
		position: relative;
		display: block;
		width: 100%;
	}

	.flexWrap .flexBox .imgWrap img {
		width: 100%;
	}

	.flexWrap .flexBox .ttlTxt {
		position: absolute;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 8px 0 8px 20px;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		transition: ease-in-out 0.2s;
	}

	.flexWrap a.flexBox .ttlTxt::before {
		content: '';
		display: inline-flex;
		width: 8px;
		height: 13px;
		background-image: url(/platinum/service/membersselection/images/img_flexbox_arrow.png);
		background-repeat: no-repeat;
		background-size: cover;
		transition: ease-in-out 0.2s;
	}

	.flexWrap .flexBox:nth-of-type(2) .ttlTxt::before {
		margin-right: -20px;
	}

	.flexWrap .flexBox:nth-of-type(3) .ttlTxt br,
	.flexWrap .flexBox:nth-of-type(4) .ttlTxt br,
	.flexWrap .flexBox:nth-of-type(7) .ttlTxt br {
		display: none;
	}

	.flexWrap .flexBox .ttlTxt span {
		display: inline-flex;
		justify-content: center;
		width: 100%;
		font-size: 20px;
		font-weight: 700;
		line-height: 25px;
		text-align: center;
		color: #ffffff;
		transition: ease-in-out 0.2s;
	}

	.flexWrap a.flexBox:hover .ttlTxt {
		background-color: rgba(255, 255, 255, 0.6);
		transition: ease-in-out 0.2s;
	}

	.flexWrap a.flexBox:hover .ttlTxt::before {
		background-image: url(/platinum/service/membersselection/images/img_flexbox_arrow_black.png);
		transition: ease-in-out 0.2s;
	}

	.flexWrap a.flexBox:hover .ttlTxt span {
		color: #000000;
		transition: ease-in-out 0.2s;
	}

	.silverBg.grayBlock .hStyle01.h2Bg {
		padding: 45px 0;
		background-image: url(/platinum/service/images/img_banner_01.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.blockInner.accordBlock {
		max-width: unset;
		padding: 50px 0;
	}

	.blockInner.accordBlock .accordInnerPc {
		max-width: 1200px;
		margin: 0 auto;
	}

	.blockInner.accordBlock .accord {
		border: 1px solid #EAEAEA;
		border-radius: 5px;
	}

	.blockInner.accordBlock .accord .accordHeader {
		font-size: 18px;
		font-weight: 700;
		line-height: 32px;
		background: url(/platinum/service/membersselection/images/ico_open_02.png) right 30px center no-repeat;
    	background-size: 30px !important;
	}

	.blockInner.accordBlock .accord.on .accordHeader {
		border-bottom: 1px solid #EAEAEA;
		background: url(/platinum/service/membersselection/images/ico_close_02.png) right 30px center no-repeat;
	}

	.blockInner.accordBlock .accord .accordBody {
		padding: 25px;
		font-size: 18px;
		font-weight: 500;
		line-height: 32px;
	}
}

/* platinum_component SP */
@media only screen and (max-width: 767px) {
	/* coverTitle */
	.coverTitle.blackBg.blackComponent,
	.h1Title01.blackBg.blackComponent,
	#topicPath.blackBg.blackComponent {
		background-color: #000000 !important;
	}

	.h1Title01.blackBg.blackComponent .titleInner,
	#topicPath.blackBg.blackComponent .topicPathInner > span > * {
		color: #FFFFFF !important;
	}

	.coverTitle.blackBg.blackComponent br.spOnly {
		display: block;
	}
	
	/* grayBlock */
	.blockInner.grayBlock {
		padding: 36px 22px 30px;
		background: #F0F2F3;
		background-image: url(/platinum/service/membersselection/images/img_grayBlock_bg.png);
		background-repeat: no-repeat;
		background-size: 202px 126px;
		background-position: top right;
	}

	.blockInner.grayBlock .hStyle01 {
		color: #000000;
	}

	.blockInner.grayBlock .hStyle01 + p {
		margin-top: 21px;
		font-size: 16px;
		font-weight: 500;
		line-height: 25px;
		text-align: left;
		color: #000000;
	}

	.blockInner.grayBlock .commentBox {
		margin-top: 20px;
	}

	.blockInner.grayBlock .commentBox li {
		margin-bottom: 0;
	}

	.blockInner.grayBlock .entryBtn {
		margin-top: 30px;
	}

	.blockInner.grayBlock .entryBtn a {
		padding: 16px 33px;
		background-image: url(/platinum/images/ico_max.png) !important;
		background-size: 20px, 100% !important;
		background-color: #ffffff;
		border: 1px solid #E1E1E1;
		border-radius: 3px;
		box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.08);
		font-size: 18px;
		font-weight: 700;
		line-height: 26px;
	}

	.hStyle01.ttlWiPhar.slashTxt {
		margin-top: 30px;
		margin-bottom: 10px;
	}

	.blockInner.flexBlock {
		padding: 10px;
	}

	.silverBg.grayBlock {
		padding: 36px 0 30px;
		background: #F0F2F3;
		background-image: url(/platinum/service/membersselection/images/img_grayBlock_bg.png);
		background-repeat: no-repeat;
		background-size: 202px 126px;
		background-position: top right;
	}

	.flexWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px;
	}

	.flexWrap .flexBox {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		max-width: 170px;
		color: #000000;
	}

	.flexWrap .flexBox .imgWrap {
		position: relative;
		display: block;
		width: 100%;
	}

	.flexWrap .flexBox .ttlTxt {
		position: absolute;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 8px 0 8px 8px;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.flexWrap .flexBox:nth-of-type(3) .ttlTxt,
	.flexWrap .flexBox:nth-of-type(4) .ttlTxt,
	.flexWrap .flexBox:nth-of-type(7) .ttlTxt,
	.flexWrap div.flexBox .ttlTxt {
		padding: 3px 0 4px 8px;
	}

	.flexWrap a.flexBox .ttlTxt::before {
		content: '';
		display: inline-flex;
		width: 8px;
		height: 13px;
		background-image: url(/platinum/service/membersselection/images/img_flexbox_arrow.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.flexWrap div.flexBox .ttlTxt::before {
		display: none;
	}

	.flexWrap .flexBox .ttlTxt span {
		display: inline-flex;
		justify-content: center;
		width: 154px;
		font-size: 16px;
		font-weight: 700;
		line-height: 25px;
		text-align: center;
		color: #ffffff;
	}

	.silverBg.grayBlock .hStyle01.h2Bg {
		padding: 16px 0;
		background-image: url(/platinum/service/images/img_banner_01_sp.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.blockInner.accordBlock {
		padding: 50px 10px 0;
	}

	.blockInner.accordBlock .accord {
		border: 1px solid #EAEAEA;
		border-radius: 5px;
	}

	.blockInner.accordBlock .accord .accordHeader {
		font-size: 16px;
		font-weight: 700;
		line-height: 25px;
		background: url(/platinum/service/membersselection/images/ico_open_02.png) right 25px center no-repeat;
    	background-size: 25px !important;
	}

	.blockInner.accordBlock .accord.on .accordHeader {
		border-bottom: 1px solid #EAEAEA;
		background: url(/platinum/service/membersselection/images/ico_close_02.png) right 25px center no-repeat;
	}

	.blockInner.accordBlock .accord .accordBody {
		padding: 30px;
		font-size: 16px;
		font-weight: 500;
		line-height: 32px;
	}
}

@media only screen and (max-width: 374px) {	
	.flexWrap .flexBox {
		max-width: 340px;
	}

	.flexWrap .flexBox .ttlTxt span {
		width: 100%;
	}

	.flexWrap .flexBox .ttlTxt span br {
		display: none;
	}
}