@charset "UTF-8";

/* ==============================================
レアカカオストーリー
============================================== */

.pc {display: block !important;}
.sp {display: none !important;}
/* ---------- SP ---------- */
@media screen and (max-width: 767px) {
	.pc {display: none !important;}
	.sp {display: block !important;}
}

#main h2 {margin: 0;padding: 16px 20px 20px 20px;font-size: 160%;text-align: center;}
#main p {font-size: 16px;}

.lineupInner {width: 100%;margin: 0 auto;padding: 30px 0 10px 0;line-height: 180%;}
.lineupInner:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.lineupInner h2 {font-size: 20px;font-weight: normal;}
.lineupInner p {font-size: 16px;line-height: 180%;}


/* ---------- SP ---------- */
@media screen and (max-width: 767px) {
}


/*----------------------------------------------------------------------
.2カラム　３カラムの設定
----------------------------------------------------------------------*/

ul.two_column {margin: 0;padding: 0;}
ul.two_column:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
ul.two_column li {width: 48%;float: left;margin: 0 1% 20px 1%;text-align: center;list-style-type: none;font-size: 16px;}
ul.two_column li:nth-child(odd) {clear: both;}


ul.three_column {margin: 0;padding: 0;}
ul.three_column:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
ul.three_column li {width: 31%;float: left;margin: 0 1% 20px 1%;text-align: center;list-style-type: none;font-size: 16px;}

ul.two_column li img,
ul.three_column li img {height: auto;margin: 0 0 10px 0; }

.shopIcon {margin: 5px 0 0 0 !important;width: 40px !important;height: 40px !important;}

.borderbox {padding: 10px 5px;border: solid 1px #442E28;}
.borderbox p,.borderbox ul,.borderbox ol {margin-bottom: 0;}
.borderbox h3 {margin: 0 0 10px 0;text-align: left;}


.borderlinkbtn a {display: block;border: solid  1px #A9814D;padding:10px;max-width: 400px;margin:0 auto;}

.pc_center_sp_left {text-align: center;}

/* ---------- SP ---------- */
@media screen and (max-width: 767px) {

	.lineupInner {width: 96%;margin: 0 auto;}

	ul.two_column li {width: 42%;float: left;margin: 0 4%;padding: 0 0 20px 0;height: auto !important;}
	ul.two_column li img {width: 90%;height: auto;}

	ul.two_column li img.shopIcon {width: auto;height: auto;}
	
	.borderlinkbtn a {max-width: 280px;}

	.pc_center_sp_left {text-align: left;}
	
}

/*----------------------------------------------------------------------




/* ----------------------------------------
	base style
---------------------------------------- */
/* common module --------------------- */
/*width*/
.w5p{width:5%;}
.w10p{width:10%;}
.w15p{width:15%;}
.w20p{width:20%;}
.w25p{width:25%;}
.w30p{width:30%;}
.w35p{width:35%;}
.w40p{width:40%;}
.w45p{width:45%;}
.w50p{width:50%;}
.w55p{width:55%;}
.w60p{width:60%;}
.w65p{width:65%;}
.w70p{width:70%;}
.w75p{width:75%;}
.w80p{width:80%;}
.w85p{width:85%;}
.w90p{width:90%;}
.w95p{width:95%;}

/*text-align setting*/
.tc{ text-align:center !important;}
.tl{ text-align:left !important;}
.tr{ text-align:right !important;}

/*border setting*/
.b1 {border: 1px solid #cccccc;}

/*font setting*/
.bold {font-weight:bold;}
.red {color:#C00;}

/*float setting*/
.fl{ float:left;}
.fr{ float:right;}
.clear{clear:both;}
.clearfix{	zoom:1;}
.clearfix:after{
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}


/* #note ------------------------ */
.note {overflow:hidden;}

.note dt,
.note dd {
	margin-top:5px;
}

.note dt {
	clear:both;
	float:left;
}

.note dd {margin-left:2em;}
.note.single dd {margin-left:1.2em;}
.note dd.space {margin-top:1em;}

/*-------------------------------------------------
	.clearFix
---------------------------------------------------*/
.clearFix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearFix {display:inline-block;}
/*Hides from IE-mac \*/
* html .clearFix {height: 1%;}
.clearFix {display: block;}
/*End hide from IE-mac */
/* IE7 */
*:first-child+html .clearFix {height: 1%;}

.txt12 {font-size: 12px !important;}
.txt14 {font-size: 14px !important;}
.txt16 {font-size: 16px !important;}
.txt18 {font-size: 18px !important;}
.txt20 {font-size: 20px !important;}
.txt22 {font-size: 22px !important;}
.txt24 {font-size: 24px !important;}
.txt26 {font-size: 26px !important;}


.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb40 {margin-bottom: 40px !important;}
.mt40 {margin-top: 40px !important;}

.sawarabi {/*font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;*/font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;}
.center {text-align: center;}
.foBig {font-size: 20px;margin: 0 2px;display: inline-block;}

/*-------------------------------------------------
#wrap_cacaostory
---------------------------------------------------*/
#wrap_cacaostory {
	margin-top: 30px;
	background: #000;
	padding: 30px;
}
#wrap_cacaostory p,
#wrap_cacaostory h2,
#wrap_cacaostory h3,
#wrap_cacaostory h4 {
	color: #FFF;
	font-weight: normal;
}

#wrap_cacaostory h2 {
	font-size: 30px;
	text-align: center;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
#wrap_cacaostory h3 {
	font-size: 23px;
	text-align: center;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;}

#wrap_cacaostory p {
	font-size: 14px;
	line-height: 220% !important;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}


p.subtitile {
	font-size: 24px !important;
	text-align: center;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}


#wrap_cacaostory h4 {
	font-size: 20px;
	text-align: center;
	line-height: 150%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.head-border {
	text-align: center;
}/* テキストの左右に罫線を引くためにH4をdivでくくった */
#wrap_cacaostory h4 {
	font-weight: normal;
	background: none;
	color: #FFF;
	margin: 0 auto 30px;
	position: relative;
	display: inline-block;
	padding: 0 55px;
	border-top: none;
	border-bottom: none;
}

#wrap_cacaostory h4:before,
#wrap_cacaostory h4:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: #666;
}

#wrap_cacaostory h4:before {
    left: 0;
}

#wrap_cacaostory h4:after {
    right: 0;
}



div.section {
	padding: 40px 1em;
}

ul.rare_two_box {margin: 0;padding: 0;}
ul.rare_two_box:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
ul.rare_two_box li {width: 47%;float: left;margin: 0 2% 34px 1%;text-align: left;list-style-type: none;font-size: 12px;color: #FFF;line-height: 150%;font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
ul.rare_two_box li:nth-child(odd) {clear: both;}
ul.rare_two_box li img {width: 120px;height: 120px;}
ul.rare_two_box li:nth-child(odd) img {float: right;margin:0 0 10px 5px;}
ul.rare_two_box li:nth-child(even) img {float: left;margin: 0 5px 10px 0;}

ul.rare_two_box li span.rare_two_box_catch {font-size: 14px;line-height: 150%;}

ul.rare_two_box li span.rare_two_box_title {font-size: 18px;display: inline-flex;padding-top: 10px;}




@media screen and (max-width: 767px) {
	#wrap_cacaostory {
		margin-top: 0;
		padding: 30px 15px;
	}
	#wrap_cacaostory h2 {
		padding: 0 0 20px 0;
		background: none;
		font-size: 20px;
	}
	#wrap_cacaostory h3 {
		font-size: 18px;

	}
	div.section {
		padding: 30px 0;
	}

	#wrap_cacaostory h4 {
		font-size: 18px;
	}

	.foBig {font-size: 18px;margin: 0 2px;display: inline-block;}

	p.subtitile {
		font-size: 18px !important;
	}

	ul.rare_two_box li {width: 100%;float: none;clear: both;margin: 0 0;padding: 0 0 34px 0;height: auto !important;}
	ul.rare_two_box li img {display: block;width: 80px;height: 80px;}
	ul.rare_two_box li span.rare_two_box_title {padding-bottom: 10px;}

}

.img_whitecacao {
	border: solid 6px #FFF;
	margin-bottom: 5px;
}
@media screen and (max-width: 767px) {
	.img_whitecacao {
		width: 80%;
		height: auto;
	}
}