@charset 'shift_jis';

/*--------------------------------------------------
	normalize at nib 
--------------------------------------------------*/
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}dfn{font-style:italic}mark{background:#ff0;color:#000}b,strong{font-weight:700}h1{font-size:2em;margin:.67em 0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type='button'],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


/*--------------------------------------------------
	Common Style
--------------------------------------------------*/
body, div#container {
	background-color: #FFF;
	}
div#contents {
	width: 100%;
	background: #000 url(/contents/recommend/cp/blackfriday/images/bg.png) repeat 100% 100%;
	padding-bottom: 80px;
	}

/* btn */
.btn_gold,
.btn_blue,
.btn_pink {
	display: block;
	position: relative;
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	border-radius: 8px;
	}
.btn_gold img,
.btn_blue img,
.btn_pink img {
	display: block;
	}
.btn_gold {
	box-shadow: 0 6px #604800;
	}
.btn_blue {
	box-shadow: 0 6px #02343f;
	}
.btn_pink {
	box-shadow: 0 6px #712921;
	}
.btn_gold:hover {
	transform: translate(0, 5px);
	box-shadow: 0 1px #604800;
	}
.btn_blue:hover {
	transform: translate(0, 5px);
	box-shadow: 0 1px #02343f;
	}
.btn_pink:hover {
	transform: translate(0, 5px);
	box-shadow: 0 1px #712921;
	}

/*--------------------------------------------------
	Social Button
--------------------------------------------------*/
#container .bg-white { background-color: #FFF; }
#container .topWrap {
	padding: 10px 0 10px;
	margin: 0 auto 0;
	width: 970px;
	position: relative;
	}
#contents #featureTitleText {
	margin: 0;
	}
#contents #socialBox {
	float: right;
	padding: 0;
	margin: 0;
	background: transparent;
	}
#contents #socialBox ul {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	}
#contents #socialBox ul li#twitter {
	margin-right: 5px;
	}
#contents #socialBox ul li#facebook {
	margin-right: 5px;
	}
#contents #socialBox ul li#facebook iframe {
	width: 158px;
	height: 20px;
	}


/*--------------------------------------------------
	MainVisual
--------------------------------------------------*/
#section-01 {
	position: relative;
	width: 100%;
	max-width: 1200px;
	background-color: #000;
	margin: 0 auto;
	}
#section-01 h1 { 
	margin: 0 auto;
	width: 100%;
	height: auto;
	position: relative;
	background: url(../images/bg04.gif) no-repeat;
	background-position: 65% 120%;
	background-size: 600px, 600px;
	z-index: 1;
	}
#section-01 h1 img { 
	width: 100%;
	height: auto;
	display: block;
	z-index: 2;
	}

/* box */
#section-01 .box {
	width: 100%;
	margin-top: 40px;
	padding: 40px 40px;
	background-color: #FFF;
	position: relative;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-around;
	}
@media screen and (max-width: 1278px) {
	#section-01 .box {
    width: calc(100% - 56px);
    margin: 40px auto 0;
		padding: 40px 10px;
		}
	#section-01 .box + p {
    width: calc(100% - 56px);
    margin: 0 auto 0;
	}
}
#section-01 .box::before {
	content: url(../images/title_ribon.png);
	width: 238px;
	height: 87px;
	display: block;
	position: absolute;
	top: -32px;
	left: -28px;
	}
#section-01 .box img {
	display: block;	
	}
#section-01 .box + p {
	color: #888;
	text-align: right;
	font-size: 10px;
	margin-top: 5px;
	}

/* btn */
#section-01 .btns {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
	}
@media screen and (max-width: 1200px) {
	#section-01 .btns {
		width: calc(100% - 56px);
		margin-right: auto;
		margin-left: auto;
		}
	#section-01 .btns a {
		width: 32%;
		}
	#section-01 .btns a img {
		width: 100%;
		height: auto;
		}
}
@media screen and (max-width: 1024px) {
	#section-01 h1 {
		background: url(../images/bg04.gif) no-repeat;
		background-position: 65% 200%;
		background-size: 600px, 600px;
		}
}


/*--------------------------------------------------
	Section 2
--------------------------------------------------*/
#section-02 {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 80px auto 0;
	}
#section-02 h2 img{
	width: 100%;
	height: auto;
	display: block;
}
#section-02 .inner {
	background-color: #FFF;
	padding: 40px 100px 40px;
	}
.gift-box {
	display: flex;
	text-align: center;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	background-color: #e3dbc5;
	max-width: 1000px;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
	}
.gift-box:nth-of-type(1) {
	padding: 80px 80px 48px;
	}
.gift-box:nth-of-type(2) {
	margin-top: 10px;
	padding: 48px 24px;
	justify-content: space-around;
	}
.gift-box:nth-of-type(3) {
	padding: 80px 80px 48px;
	margin-top: 80px;
	}
.gift-box h3{
	position: absolute;
	left: 50%;
	top: -42px;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	}
.gift-box img {
	display: block;
	}
.gift-box:nth-of-type(1) img {
	margin-right: 80px;
	}
.gift-box:nth-of-type(1) img:nth-child(odd) {
	margin-right: 0;
	}
.gift-box:nth-of-type(1) img:nth-of-type(n+3) {
	margin-top: 40px;
	}
.gift-box:nth-of-type(3) .kero {
	position: absolute;
	bottom: 120px;
	left: 22%;
	}
@media screen and (max-width: 1200px) {
	#section-02 .inner {
		background-color: #FFF;
		padding: 40px 40px 40px;
		}
}

/* note */
.note-wrap {
 width: 100%;
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 background-color: #FFF;
 padding: 0 100px 10px;
 box-sizing: border-box;
}
.note-wrap + .note-wrap {
	padding: 0 100px 100px;
   }
.note-wrap > div{
	width: 49%;
	box-sizing: border-box;
}
#contents .note-wrap > div p {
	margin: 10px 0 0 0;
	font-size: 10px;
	color: #222;
}
#contents .note-wrap > div p:first-child {
	margin-top: 0;
}
#contents .note-wrap > div p a,
#contents .note-wrap > div p a:hover,
#contents .note-wrap > div p a:visited{
	color: #222;
}

/* btn */
#section-02 .btn-wrap {
	background-color: #FFF;
	padding-bottom: 46px;
}
#section-02 .btn_gold {
	width: 480px;
	height: 100px;
	margin: 0 auto 0;
}


/*--------------------------------------------------
	Section 3
--------------------------------------------------*/
#section-03 {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 80px auto 0;
	}
#section-03 h2 img{
	width: 100%;
	height: auto;
	display: block;
	}
#section-03 .inner {
	background-color: #FFF;
	}
#section-03 .cp-banner {
	width: 100%;
	height: auto;
	}

/* btn */
#section-03 .btn_blue {
	width: 480px;
	height: 100px;
	margin: 40px auto 0;
	}