/* mgcss v7.1 code seventh-heaven */
@charset "UTF-8";

/*-----------------------------------
 エリア全体のレスポンシブ設定
------------------------------------*/
.cp_main {
  width:100%;
  padding-right: 3%;
  padding-left: 3%;
}
@media (min-width: 768px) {
  .cp_main {
    padding-left: 0;
    padding-right: 0;
  }
}

/*-----------------------------------
 看板
------------------------------------*/
	/* 大枠 */
	.cp_kanban {
		margin: 0 auto 20px auto;
	}

	/* 掲載画像 */
	.cp_kanban-img {
		width: 100%;
		margin: 0 0 0 0;
	}

/*-----------------------------------
 見出し＋本文ブロック
------------------------------------*/
	/* 大枠 */
	.cp_areabox {
		margin: 0 auto 30px auto;
		text-align: center;
	}
	
	/* 見出し 画像(幅95) */
	.cp_areabox-ttl {
		width: 100%;
		margin: 0 0 10px 0;
	}

	/* 見出し テキスト */
	.cp_areabox-txtttl {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		color: #c03;
	}
	
	/* 掲載画像 */
	.cp_areabox-img {
		width: 100%;
		margin: 0 0 10px 0;
	}
	
	/* 掲載画像(幅95) */
	.cp_areabox-img--w95 {
		width: 95%;
		margin: 0 auto 10px auto;
	}

	/* 掲載画像(幅95 最大幅768px) */
	.cp_areabox-img--w95mid {
		width: 95%;
		max-width: 768px;
		margin: 0 auto 10px auto;
	}

	/* 掲載画像(幅85) */
	.cp_areabox-img--w85 {
		width: 85%;
		margin: 0 auto 10px auto;
	}

	/* リンク画像(幅90) */
	.cp_areabox-anchor--w90 {
		display: block;
		width: 90%;
		margin: 0 auto 10px auto;
	}

	/* 段落 */
	.cp_areabox-p {
		font-size: 16px;
		padding: 10px;
		text-align: left;
	}

	/* 段落(赤)  */
	.cp_areabox-p--red {
		font-size: 16px;
		padding: 10px;
		text-align: left;
		color: #f00;
	}


	/* 段落(中央寄せ 黒) */
	.cp_areabox-p--nakakuro {
		font-size: 16px;
		padding: 10px;
		text-align: center;
		color: #000;
	}
	/* span(赤) */
	.cp_areabox-span--red {
		color: #f00;
	}

	/* span(しかくく強調) */
	.cp_areabox-span--sqred {
		border: 3px solid #f00;
		box-sizing: border-box;
	}

	/* 段落(中央寄せ 赤) */
	.cp_areabox-p--nakared {
		font-size: 16px;
		padding: 10px;
		text-align: center;
		color: #f00;
	}

	/* 段落(インデント) */
	.cp_areabox-indent {
	    font-size: 16px;
	    color: red;
	    width: 100%;
	    text-indent: -1em;
		text-align: left;
	    
	    padding: 0 1em 0 2em;
	    margin: 0 auto 30px auto;
	}
	.cp_areabox-indent p:last-child {
		
	}

	
/*-----------------------------------
 見出しだけブロック
------------------------------------*/
	/* 大枠 */
	.cp_ttlonly {
		margin: 0 auto 0px auto;
		text-align: center;
	}
	
	/* 見出し 画像(幅95) */
	.cp_ttlonly-ttl {
		width: 100%;
		margin: 0 0 10px 0;
	}

/*-----------------------------------
 規約
------------------------------------*/
	/* 大枠 */
	.cp_kiyaku {
		margin: 0 auto 30px auto;
	}
	.cp_kiyaku:last-child {
		margin: 0 auto 0px auto;
	}


	/* 見出し 画像 */
	.cp_kiyaku-ttl {
		width: 100%;
		margin: 0 0 10px 0;
	}

	/* 中見出し */
	.cp_kiyaku-subs {
		font-size: 16px;
		font-weight: bold;
		padding: 0 10px 0 10px;
	}

	/* 段落 */
	.cp_kiyaku-p {
		font-size: 14px;
		margin: 0 0 0 0;
		padding: 10px 10px 20px 10px;
	}
	/* 段落(しかくくまとめる) */
	.cp_kiyaku-p--sq {
		font-size: 14px;
		margin: 0 0 10px 0;
		padding: 10px 10px 10px 10px;
		border: 1px solid #000;
	}

/*-----------------------------------
 エントリーボタン
------------------------------------*/
	.cp_entry {
		display:block;
		padding: 10px 0;

		box-sizing:border-box;
		border-radius:10px;
		border: 2px solid #fff;

		color: #fff;
		font-size: 18px;
		font-weight: bold;
		line-height:1.3;
		text-align: center;
		text-decoration: none;

		width: 92%;
		margin: 10px auto 10px auto;
		box-shadow:0 4px 0 0 rgba(0,0,0,0.75);
		
		position: relative;
		
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		
		background: #c03;
	}

	.cp_entry:hover {
		color: #fff;
		text-decoration: none;
	}
	
	.cp_entry:active {
		top: 3px;
		color: #fff;
		text-decoration: none;
		box-shadow:0 1px 0 0 rgba(0,0,0,0.8);
	}

	.cp_entry:visited {
		color: #fff;
		text-decoration: none;
	}
	
	.cp_entry-uk {
		color: #ff0;
	}


/*-----------------------------------
 おすすめ作品 210203 更新版
------------------------------------*/
.cp_sakuhin{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	
	width: 98%;
	margin: 0 auto;
}

.cp_sakuhin-box{
	margin-top: 10px;
	margin-bottom: 65px;
	margin-right: 5%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cp_sakuhin-box:nth-of-type(3n){
	margin-right: 0;
}

.cp_sakuhin .cp_sakuhin-box{
	width: 30%;
	border: 1px solid #CCC;
	position: relative;
	}


@media screen and (min-width: 768px){
	/* PCで5つ並び */
	.cp_sakuhin .cp_sakuhin-box{
	width: 16%;
	}
	.cp_sakuhin .cp_sakuhin-box{
		margin-right: 5%;
	}
	.cp_sakuhin-box:nth-of-type(5n){
		margin-right: 0%;
	}

}

/* 作品イメージ */
.cp_sakuhin-image {
	display: block;
	position: relative;
	margin: 0;
}

.cp_sakuhin-image img {
	width: 100%;
}

/* 購入ボタン */
.cp_sakuhin-btn_kou {
	display: block;
	background: #009141;
	color: #fff;
	border-radius: 16px;
	text-decoration: none;
	width: 100%;
	font-size: 16px;
	text-align: center;
	margin: 7px auto 7px auto;
	padding: 3px 0 3px 0;
	position: absolute;
	bottom: -48px;
}

@media screen and (min-width: 768px){
	/* PCで空き調整 */
	.cp_sakuhin-btn_kou {
		bottom: -44px;
	}
}

/*---------------------------------------------------------------------- */
/*  ページの個別設定(「.cp_unique」で始まるクラス名)があれば、このしたに追記 */
/*---------------------------------------------------------------------- */


/*--------- ユニーク設定 --------------------- */
	.cp_unique-clacker {
		background: url("../img/cp_images_01-bg.png") center/100% no-repeat;
		padding: 5px;
		margin: 0 0 10px 0;
		text-align: center;
	}

	.cp_unique-clacker-message {
		width: 85%;
		margin: 10px auto 10px auto;
	}
	
	.cp_unique-clacker-anchor {
		display: block;
		width: 75%;
		margin: 10px auto 10px auto;
	}

	.cp_unique-crim {
		width: 95%;
		background: #fff6d7;
		border: 8px solid #f00;
		margin: 20px auto 20px auto;
		padding: 10px 10px 10px 10px;
		border-radius: 25px;
	}

	.cp_unique-crim-message {
		display: block;
		width: 100%;
		margin: 10px auto 10px auto;
	}