/* Y'S GEAR : present.css */


@import "/shared/css/common.css";

* { box-sizing: border-box; }

html {
	min-width: 600px;
	background: #fff;
}

body {
	min-width: 600px;
	height: auto;
	background: url(../img/bg.png) center top no-repeat, url("../img/bg_bottom.jpg") center top repeat-x;
	/*background-color: #d1f6c4;*/
	background-size: auto 100%;
	color: #333;
}

a:link, 
a:visited, 
a:active { color: #bc292a; }

ul { list-style: none; }


/*======================================================================*
 *  [ presentWrap ] 
 *======================================================================*/

.presentWrap {
	/* max-width: 522px; */
	max-width: 543px;
	/* max-width: 550px; */
	margin: 0 auto;
	/* padding: 0 20px; */
	/* background: rgba(255,255,255,0.9); */
}

.presentWrap h1, 
.presentWrap h2 {
	text-align: center;
	/* padding: 0 20px; */
}

.presentWrap article {
	/* margin-bottom: 0; */
	margin-bottom: 30px;
	/* background: #f6f6f6; */
}



/*======================================================================*
 *  [ 透過背景 ] 
 *======================================================================*/

/*
.wraptrans {
	padding: 0 20px 30px;
	margin-bottom: 30px;
	/*background: #fff;
	 background: rgba(255,255,255,0.9);
}
*/

/*======================================================================*
 *  [ header ] 
 *======================================================================*/

.presentWrap header h2 {
	/* margin-bottom: 15px; */
	margin-bottom: -23px;
}
.presentWrap header p {
	/*margin-bottom: 20px;*/
	padding: 40px 18px 20px;
	border-bottom: none;
	/*background: rgba(255,255,255,0.8);*/
	background: #fff;
	color: #333;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
}


/*======================================================================*
 *  [ sectionWrap ] 
 *======================================================================*/

.sectionWrap {
	/* padding: 0 20px 20px; */
	padding: 0 18px 20px;
	border-top: none;
	/*background: rgba(255,255,255,0.8);*/
	background: #fff;
	font-weight: 500;
}
.sectionWrap section {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	margin-bottom: 15px;
	padding-top: 15px;
	border-top: 1px solid #dcdcdc;
}
.sectionWrap section h3 {
	width: 65px;
	padding: 5px 0;
	background: #c9a65f;
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
}
.sectionWrap section > div {
	width: calc(100% - 65px);
	padding-left: 17px;
	box-sizing: border-box;
	line-height: 1.4;
	text-align: left;
}

/* [ リンク ] */
.sectionWrap .loginLink {
	margin-top: 5px;
	text-align: right;
}
.sectionWrap .loginLink a {
	display: inline-block;
	padding-left: 15px;
	background: url(../img/icon_login.png) left center no-repeat;
}
.sectionWrap .loginLink a:hover, 
.sectionWrap .loginLink a:active {
	text-decoration: underline;
}

/* [ 景品 ] */
.sectionWrap p.present {
	margin-bottom: 10px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
}
.sectionWrap p.present a {
	display: inline-block;
	color: #333;
}
.sectionWrap p.present a:hover, 
.sectionWrap p.present a:active { color: #eb5e3e; }
.sectionWrap .present ul {
}
.sectionWrap .present li {
	display: inline-block;
/*	text-align: center;*/
}
.sectionWrap .present li + li {
	/* margin-left: 15px; */
}
.sectionWrap .present ul + p {
	margin-top: 15px;
	text-align: center;
}

/* [ 注意事項 ] */
.sectionWrap .notes, 
.sectionWrap .annotation {
	line-height: 1.2;
}
.sectionWrap .notes li, 
.sectionWrap .annotation li {
	padding-left: 1em;
}
.sectionWrap .notes li + li, 
.sectionWrap .annotation li + li {
	margin-top: 5px;
}
.sectionWrap .notes li::before, 
.sectionWrap .annotation li::before {
	margin-left: -1em;
}
.sectionWrap .notes li::before {
	content: "●";
	font-family: "メイリオ", Meiryo;
}
.sectionWrap .annotation li::before {
	content: "※";
}

/* [ お問い合わせ ] */
.sectionWrap .contact {
	margin-bottom: 10px;
	padding-left: 1em;
}
.sectionWrap .contact strong {
	margin-left: -1em;
}
.sectionWrap .contact .indent5 {
	padding-left: 5em;
}


/*======================================================================*
 *  [ footer ] 
 *======================================================================*/

.openButtom {
	margin: 10px 0 25px;
	text-align: center;
}

.presentWrap footer {
	padding-bottom: 20px;
}
.presentWrap footer small {
	float: left;
	color: #333;
	font-size: 1.1rem;
}
.presentWrap footer a {
	float: right;
}