/* ============================== */
/*
テスト運用
ちょっとした調整用
ある程度形が決まっているものに対して、派生が増えるのを防ぐ為のもの。


参考：
border
margin
text
color
hover
z-index
display
background
img
link
heading
*/
/* ============================== */

/* ■ svgのicon */
.icon-svg {	/* svgの初期設定 サイズは親で調整 */
	width: 100%;
	height: 100%;
}

/* ■ aリンクの加工 */
.aLink-disp-block {
	display: block;
}

/* ■ img Preparation for images */
.pFimage-cover {	/* 作品書影 */
	width: 100%;
	display: block;
	border: 1px solid #e6e6e6;
}

/* ■ ホバーアクション */
.hoverA-opa-0p8:hover {
	opacity: 0.8 !important;
	cursor: pointer;
}
.hoverA-sca-1p02:hover {
	transform: scale(1.02);
	cursor: pointer;
}
.hoverA-sca-1p05:hover {
	transform: scale(1.05);
	cursor: pointer;
}
.hoverA-tDec-TC:hover {
	text-decoration: underline;
	color: #442b2d;
	cursor: pointer;
}
.hoverA-tDec-LC:hover {
	text-decoration: underline;
	color: #E91E63;
	cursor: pointer;
}
.hoverA-tDec-none:hover {
	text-decoration: none;
	cursor: pointer;
}
.hoverA-bgc-eaeded:hover {
	background-color: #eaeded;
	cursor: pointer;
}
.hoverA-outL-3_sol_442b2d:hover {
	outline: 3px solid #442b2d;
	cursor: pointer;
}
.hoverA-outL-3_sol_fa95a9:hover {
	outline: 3px solid #fa95a9;
	cursor: pointer;
}
.hoverA-outL-3_sol_a78445:hover {
	outline: 3px solid #a78445;
	cursor: pointer;
}
.forcasA-TC:focus {
	border: 1px solid #442b2d;
}
.forcasA-LC:focus {
	border: 1px solid #E91E63;
}

/* ■ Arrow (prev next toggle) */
.nextArrow-TC-0p8em {
	position: relative;
}
.nextArrow-TC-0p8em:after {
	content: '';
	color: #442b2d;
	position: absolute;
	top: 50%;
	margin-top: -0.35em;
	right: 1.25em;
	width: 0.75em;
	height: 0.75em;
	border-right: solid 2px;
	border-bottom: solid 2px;
	transform: rotate(315deg);
	font-size: 0.8em;
}
.nextArrow-e91e63-0p8em {
	position: relative;
}
.nextArrow-e91e63-0p8em:after {
	content: '';
	color: #e91e63;
	position: absolute;
	top: 50%;
	margin-top: -0.35em;
	right: 1.25em;
	width: 0.75em;
	height: 0.75em;
	border-right: solid 2px;
	border-bottom: solid 2px;
	transform: rotate(315deg);
	font-size: 0.8em;
}
.nextArrow-e91e63-0p9em {
	position: relative;
}
.nextArrow-e91e63-0p9em:after {
	content: '';
	color: #e91e63;
	position: absolute;
	top: 50%;
	margin-top: -0.35em;
	right: 1.25em;
	width: 0.75em;
	height: 0.75em;
	border-right: solid 2px;
	border-bottom: solid 2px;
	transform: rotate(315deg);
	font-size: 0.9em;
}
.nextArrow-9E9E9E-0p5em {
	position: relative;
}
.nextArrow-9E9E9E-0p5em:after {
	content: '';
	color: #9E9E9E;
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
	right: 3em;
	width: 1em;
	height: 1em;
	border-right: solid 2px;
	border-bottom: solid 2px;
	transform: rotate(315deg);
	font-size: 0.5em;
}

/* ■ 配置 (並べ方)*/
/*
	flex-direction		flex-dir_〇
	flex-wrap
	align-content			aliC_〇
	justify-content		jusC_〇
	align-items				aliI_〇
	の順番
*/

.flex-dir_r {
	display: flex;
	flex-direction: row;
}
.flex-dir_c {
	display: flex;
	flex-direction: column;
}
.flex-dir_c-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.flex-dir_r-wrap_wrap-aliI_c {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}
.flex-dir_r-aliI_c {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.flex-dir_c-aliI_c {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.flex-dir_r-aliI_fS {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
.flex-dir_r-jusC_c {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.flex-dir_c-jusC_c {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.flex-dir_r-jusC_sB {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.flex-dir_c-jusC_sB {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.flex-dir_r-jusC_c-aliI_c {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.flex-dir_r-jusC_sB-aliI_c {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.flex-dir_c-jusC_sB-aliI_c {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.flex-dir_c-jusC_c-aliI_c {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.flex-dir_r-jusC_sA-aliI_c {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
.flex-dir_r-jusC_fE {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.flex-dir_r-jusC_fE-aliI_c {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

/* 順番違い いつか修正 */

.flex-dir_r-aliI_c-jusC_c {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.flex-dir_c-aliI_c-jusC_c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
flex-dir_c-aliI_c-jusC_sB {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.flex-dir_r-jusC_sB-aliI_c {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

/* ■ 配置 (横/縦)*/
.flex-c-c {	/* center/center */
	justify-content: center;
	align-items: center;
}
.flex-sb-c {	/* space-between/center */
	justify-content: space-between;
	align-items: center;
}


/* ■ 横幅上限下限 (中央寄せ用) */
.w-max989 {	/* margin 上書き注意 */
	max-width: 989px;
	margin: 0 auto;
}
.w-max700 {	/* margin 上書き注意 */
	max-width: 700px;
	margin: 0 auto;
}
.w-max600 {	/* margin 上書き注意 */
	max-width: 600px;
	margin: 0 auto;
}
.w-max500 {	/* margin 上書き注意 */
	max-width: 500px;
	margin: 0 auto;
}
.w-max400 {	/* margin 上書き注意 */
	max-width: 400px;
	margin: 0 auto;
}

/* ■ 縦幅上限下限 */
.h-max600 {
	min-height: 600px;
}


/* ■ border */
.borderB__pa16__999999 {
	border-bottom: 1px solid #999;
	padding-bottom: 16px;
}
.borderB__16__ccc {
	border-bottom: 1px solid #ccc;
	padding-bottom: 16px;
}
.borderB__1em__ccc {
	border-bottom: 1px solid #ccc;
	padding-bottom: 1em;
}
.borderB__d5dbdb {
	border-bottom: 1px solid #d5dbdb;
}
.borderB__999999 {
	border-bottom: 1px solid #999999;
}
.borderB__ccc {
	border-bottom: 1px solid #cccccc;
}
.borderR-0p5em {
	border-radius: 0.5em;
}
.borderR-1em {
	border-radius: 1em;
}
.borderRa__8 {
	border-radius: 8px;
}
.borderRa__16 {
	border-radius: 16px;
}
.borderRa__32 {
	border-radius: 32px;
}


/* ■ text */
/* textの枠 */
.text-wrap_l {
	text-align: left;
}
.text-wrap_c {
	text-align: center;
}
.text-wrap_r {
	text-align: right;
}

/* textの種類 */
.textLink__TC {
	color: #442B2D;
	text-decoration: underline;
}
.textLink__LC {
	color: #E91E63;
	text-decoration: underline;
}
.textLink__BC {	/* bule */
	color: #1558d6;
	text-decoration: underline;
}
.text-lineThrough__CC {
	text-decoration: line-through;
	text-decoration-color: #F2506D;
}

/* 行数制限 line count limit */
.text-lcl-1 {
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
}
.text-lcl-2 {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
}
.text-lcl-3 {
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
}

/* テキストの折り返し */
.text-wordBreak__bw {
	word-break: break-word;
}


/* textの色 */
.text-TC {	/* text */
	color: #442b2d;
}
.text-LC {	/* link */
	color: #E91E63;
}
.text-BC {	/* bonus point */
	color: #ffa500;
}
.text-CC {	/* catch */
	color: #f2506d;
}
.text-NC {	/* note */
	color: #757575;
}
.text-EC {	/* error */
	color: #EC0000;
}
.text-WC {	/* btnとか */
	color: #fff;
}

/* サイズと太さ px */
.textSize_12 {
	font-size: 12px;
}
.textSize_12_600 {
	font-size: 12px;
	font-weight: 600;
}
.textSize_12_b {
	font-size: 12px;
	font-weight: bold;
}
.textSize_14 {
	font-size: 14px;
}
.textSize_14_600 {
	font-size: 14px;
	font-weight: 600;
}
.textSize_14_b {
	font-size: 14px;
	font-weight: bold;
}
.textSize_16 {
	font-size: 16px;
}
.textSize_16_600 {
	font-size: 16px;
	font-weight: 600;
}
.textSize_16__b {
	font-size: 16px;
	font-weight: bold;
}
.textSize_18 {
	font-size: 18px;
}
.textSize_18__600 {
	font-size: 18px;
	font-weight: 600;
}
.textSize_18__b {
	font-size: 18px;
	font-weight: bold;
}
.textSize_20__600 {
	font-size: 20px;
	font-weight: 600;
}
.textSize_20__b {
	font-size: 20px;
	font-weight: bold;
}
.textSize_24 {
	font-size: 24px;
}
.textSize_24__600 {
	font-size: 24px;
	font-weight: 600;
}
.textSize_24__b {
	font-size: 24px;
	font-weight: bold;
}
.textSize_32__b {
	font-size: 32px;
	font-weight: bold;
}

/* サイズと太さ em */
.textWeight_normal {
	font-weight: normal;
}
.textSize_0p75em {
	font-size: 0.75em;
}
.textSize_0p75em_600 {
	font-size: 0.75em;
	font-weight: 600;
}
.textSize_0p75em_b {
	font-size: 0.75em;
	font-weight: bold;
}
.textSize_0p8em {
	font-size: 0.8em;
}
.textSize_0p8em_600 {
	font-size: 0.8em;
	font-weight: 600;
}
.textSize_0p8em_b {
	font-size: 0.8em;
	font-weight: bold;
}
.textSize_0p9em {
	font-size: 0.9em;
}
.textSize_0p9em_600 {
	font-size: 0.9em;
	font-weight: 600;
}
.textSize_0p9em_b {
	font-size: 0.9em;
	font-weight: bold;
}
.textSize_1em {
	font-size: 1em;
}
.textSize_1em_600 {
	font-size: 1em;
	font-weight: 600;
}
.textSize_1em_700 {
	font-size: 1em;
	font-weight: 700;
}
.textSize_1em_b {
	font-size: 1em;
	font-weight: bold;
}
.textSize_1p25em {
	font-size: 1.25em;
}
.textSize_1p25em_600 {
	font-size: 1.25em;
	font-weight: 600;
}
.textSize_1p25em_700 {
	font-size: 1.25em;
	font-weight: 700;
}
.textSize_1p25em_b {
	font-size: 1.25em;
	font-weight: bold;
}
.textSize_1p5em {
	font-size: 1.5em;
}
.textSize_1p5em_600 {
	font-size: 1.5em;
	font-weight: 600;
}
.textSize_1p5em_700 {
	font-size: 1.5em;
	font-weight: 700;
}
.textSize_1p5em_b {
	font-size: 1.5em;
	font-weight: bold;
}
.textSize_1p75em {
	font-size: 1.75em;
}
.textSize_1p75em_600 {
	font-size: 1.75em;
	font-weight: 600;
}
.textSize_1p75em_b {
	font-size: 1.75em;
	font-weight: bold;
}
.textSize_2em {
	font-size: 2em;
}
.textSize_2em_600 {
	font-size: 2em;
	font-weight: 600;
}
.textSize_2em_b {	/* メインの見出し 等 */
	font-size: 2em;
	font-weight: bold;
}

/* ■ background */
.bk_C_ffffff {
	background: #ffffff;
}
.bk_C_fbfbfb {
	background: #fbfbfb;
}
.bk_C_f2f2f2 {
	background: #f2f2f2;
}
.bk_C_ebebeb {
	background: #ebebeb;
}
.bk_C_c7d8d5 {
	background: #c7d8d5;
}

/* ■ padding px */
/* all */
.paddingA__4 {
	padding: 4px;
}
.paddingA__6 {
	padding: 6px;
}
.paddingA__8 {
	padding: 8px;
}
.paddingA__16 {
	padding: 16px;
}
.paddingA__32 {
	padding: 32px;
}
/* left and right */
.paddingLaR__4 {
	padding: 0 4px;
}
.paddingLaR__6 {
	padding: 0 6px;
}
.paddingLaR__8 {
	padding: 0 8px;
}
.paddingLaR__16 {
	padding: 0 16px;
}
.paddingLaR__32 {
	padding: 0 32px;
}
/* top and bottom */
.paddingTaB__4 {
	padding: 4 0;
}
.paddingTaB__6 {
	padding: 6px 0;
}
.paddingTaB__8 {
	padding: 8px 0 ;
}
.paddingTaB__16 {
	padding: 16px 0;
}
.paddingTaB__32 {
	padding: 32px 0;
}
.paddingTaB__64 {
	padding: 64px 0;
}

/* right */
.paddingR__4 {
	padding-right: 4px;
}
.paddingR__6 {
	padding-right: 6px;
}
.paddingR__8 {
	padding-right: 8px;
}
.paddingR__16 {
	padding-right: 16px;
}
.paddingR__32 {
	padding-right: 32px;
}

/* bottom */
.paddingB__4 {
	padding-bottom: 4px;
}
.paddingB__6 {
	padding-bottom: 6px;
}
.paddingB__8 {
	padding-bottom: 8px;
}
.paddingB__16 {
	padding-bottom: 16px;
}
.paddingB__32 {
	padding-bottom: 32px;
}

/* ■ padding em */
/* all */
.paddingA__0p5em {
	padding: 0.5em;
}
.paddingA__0p75em {
	padding: 0.75em;
}
.paddingA__0p8em {
	padding: 0.8em;
}
.paddingA__0p9em {
	padding: 0.9em;
}
.paddingA__1em {
	padding: 1em;
}
/* left and right */
.paddingLaR__0p5em {
	padding: 0 0.5em;
}
.paddingLaR__0p75em {
	padding: 0 0.75em;
}
.paddingLaR__0p8em {
	padding: 0 0.8em;
}
.paddingLaR__0p9em {
	padding: 0 0.9em;
}
.paddingLaR__1em {
	padding: 0 1em;
}
/* top and bottom */
.paddingTaB__0p5em {
	padding: 0.5em 0;
}
.paddingTaB__0p75em {
	padding: 0.75em 0;
}
.paddingTaB__0p8em {
	padding: 0.8em ;
}
.paddingTaB__0p9em {
	padding: 0.9em 0;
}
.paddingTaB__1em {
	padding: 1em 0;
}
.paddingTaB__2em {
	padding: 2em 0;
}

/* right */
.paddingR__0p5em {
	padding-right: 0.5em;
}
.paddingR__0p75em {
	padding-right: 0.75em;
}
.paddingR__0p8em {
	padding-right: 0.8em;
}
.paddingR__0p9em {
	padding-right: 0.9em;
}
.paddingR__1em {
	padding-right: 1em;
}

/* bottom */
.paddingB__4em {
	padding-bottom: 4em;
}

/* ■ margin */
/* top */
.marginT__4 {
	margin-top: 4px;
}
.marginT__8 {
	margin-top: 8px;
}
.marginT__16 {
	margin-top: 16px;
}
.marginT__24 {
	margin-top: 24px;
}
.marginT__32 {
	margin-top: 32px;
}
.marginT__64 {
	margin-top: 64px;
}
/* bottom */
.marginB__4 {
	margin-bottom: 4px;
}
.marginB__8 {
	margin-bottom: 8px;
}
.marginB__16 {
	margin-bottom: 16px;
}
.marginB__24 {
	margin-bottom: 24px;
}
.marginB__32 {
	margin-bottom: 32px;
}
.marginB__64 {
	margin-bottom: 64px;
}
/* right */
.marginR__4 {
	margin-right: 4px;
}
.marginR__8 {
	margin-right: 8px;
}
.marginR__16 {
	margin-right: 16px;
}
.marginR__32 {
	margin-right: 32px;
}
/* left */
.marginL__4 {
	margin-left: 4px;
}
.marginL__8 {
	margin-left: 8px;
}
.marginL__16 {
	margin-left: 16px;
}
.marginL__32 {
	margin-left: 32px;
}
.marginL__64 {
	margin-left: 64px;
}
/* ■ margin em */
/* top */
.marginT__0p25em {
	margin-top: 0.25em;
}
.marginT__0p5em {
	margin-top: 0.5em;
}
.marginT__0p75em {
	margin-top: 0.75em;
}
.marginT__1em {
	margin-top: 1em;
}
/* bottom */
.marginB__0p25em {
	margin-bottom: 0.25em;
}
.marginB__0p5em {
	margin-bottom: 0.5em;
}
.marginB__1em {
	margin-bottom: 1em;
}
.marginB__1p25em {
	margin-bottom: 1.25em;
}
.marginB__1p5em {
	margin-bottom: 1.5em;
}
.marginB__2em {
	margin-bottom: 2em;
}
.marginB__3em {
	margin-bottom: 3em;
}
.marginB__4em {
	margin-bottom: 4em;
}


/* right */
.marginR__0p5em {
	margin-right: 0.5em;
}
.marginR__1em {
	margin-right: 1em;
}
.marginR__2em {
	margin-right: 2em;
}
.marginR__3em {
	margin-right: 3em;
}
/* left */
.marginL__0p5em {
	margin-left: 0.5em;
}
.marginL__1em {
	margin-left: 1em;
}
.marginL__2em {
	margin-left: 2em;
}
.marginL__3em {
	margin-left: 3em;
}

/* === ボタン お試し =========== */
.btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #f2506d;
	border: 1px solid #f2506d;
	padding: 8px 16px;
	min-height: 48px;
	width: 100%;
	min-width: fit-content;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	box-sizing: border-box;
	box-shadow: 0 2px 4px 0 #94949480;
	cursor: pointer;
}
.btn-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #f2506d;
	background: #ffffff;
	border: 1px solid #f2506d;
	padding: 8px 16px;
	min-height: 48px;
	width: 100%;
	min-width: fit-content;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	box-sizing: border-box;
	box-shadow: 0 2px 4px 0 #94949480;
	cursor: pointer;
}
.btn-common {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #442b2d;
	background: #ffffff;
	border: 1px solid #949494;
	padding: 8px 16px;
	min-height: 48px;
	width: 100%;
	min-width: fit-content;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	box-sizing: border-box;
	box-shadow: 0 2px 4px 0 #94949480;
	cursor: pointer;
}
.btn-sanmple {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #442b2d;
	background: #F5F4F5;
	border: 1px solid #949494;
	padding: 8px 16px;
	min-height: 40px;
	width: fit-content;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	box-sizing: border-box;
	cursor: pointer;
}
.btn-base {	/* data属性でカスタムする用 data-btnType="○○" 基本はcommon  */
	display: flex;
	align-items: center;
	justify-content: center;
	color: #442b2d;
	background: #ffffff;
	border: 1px solid #949494;
	padding: 8px 16px;
	min-height: 48px;
	width: 100%;
	min-width: fit-content;
	border-radius: 8px;
	font-weight: 600;
	font-size: 16px;
	box-sizing: border-box;
	box-shadow: 0 2px 4px 0 #94949480;
	cursor: pointer;
}
.btn-base[data-btnType="read"] {	/* btn-baseより後に書く */
	background: #ccc;
	border: none;
}

/* === ボタン お試し ここまで =========== */

/* ■ media query */
.heading-Lline__black {
	border: 1px solid #4d4d4d;
	border-width: 0 0 0 2px;
	padding: 8px 16px 8px 14px;	/* ボーダーの分引く */
	background: #f2f2f2;
}


/* ============================== */
/* ■ media query */
/*
最小幅は320想定
最大幅は989想定 (max-widthで989で上限設定)

デフォルト（320px）	SP
SP
360px以下
SP
600px以下
TAB
900px以上
PC
*/

/* ============================== */
/* 320 */

/* 表紙の幅 */
.mQ-cover-w{
	width: 100px;
	overflow: hidden;
}

/* 表紙画像 */
.cover-aspectR-200200 {	/* 共通 */	/* <img>にwidth height 200 が必須 */
	display: block;
	width: 140%;
	height: fit-content;
	aspect-ratio: 1 / 1;
	margin-left: -20%;
	box-sizing: border-box;
}

/* フォントサイズの基準 */
.mQ-fSize-base {
	font-size: 14px;
}

/* レスポンシブ */
@media screen and (min-width: 360px){
	.mQ-cover-w{
		width: 120px;
	}
	.mQ-fSize-base {
		font-size: 16px;
	}
}
@media screen and (min-width: 400px){
	.mQ-cover-w{
		width: 140px;
	}

	/* search ページのlist view 用 */
	.search-typeDesc-listItem .cover-aspectR-200200 {	/* <img>にwidth height 200 が必須 */
		display: block;
		width: 200px;
		height: fit-content;
		aspect-ratio: 1 / 1;
		margin-left: -30px;	/* 親要素が140pxで画像が200pxの場合 */
		box-sizing: border-box;
	}
}

@media screen and (min-width: 600px){

}
@media screen and (max-width: 900px){


}