@charset "utf-8";

/* ---------------------------------------------------
   File: cafe-au-lait35.css
   Version: 1.0.0
   Update: 2018-07-13
   Author: http://flowlab.co.jp

   (c)2007-2018 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */




/* ===========================================================================================================================================

   WIDE DESKTOP LAYOUT

=========================================================================================================================================== */
.sp, .nav .sp { display: none;}

/* ====================================================
		Common Style
==================================================== */
body {
	color: #333;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.8em;
	background: #fff;
	letter-spacing: 1px;
	font-family: 'Noto Sans JP',Verdana,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
}
img {
	max-width: 100%;
	display: block;
}
a:link {
	color: #004fa1;
	text-decoration: none;
}
a:hover {
	color: #7995c3;
	text-decoration: none;
}

/* ====================================================
		Contents
==================================================== */
#wrapper {
	width: 640px;
	margin: 0 auto;
}

/* -------------------------------
		White Box
------------------------------- */
.whiteBox {
	background: #fff;
	margin: 20px 6% 0;
	border-radius: 10px; /* CSS3 */  
	-webkit-border-radius: 10px; /* Safari,Chrome */  
	-moz-border-radius: 10px; /* Firefox */
	padding: 50px 6% 30px;
}
.whiteBox h3 {
	width: 340px;
	height: auto;
	margin: 0 auto 30px;
}

/* ====================================================
		Present
==================================================== */
#present {
	background: #fff;
}
/* -------------------------------
		Text
------------------------------- */
#present .txt {
	padding: 0 8% 40px;
}

/* ====================================================
		How to Enter
==================================================== */
#howToEnter {
	padding: 100px 6% 40px;
}

/* -------------------------------
		Title
------------------------------- */
#howToEnter h3 {
	width: 480px!important;
	margin-bottom: 100px;
}
#howToEnter h4 img {
	text-align: center;
	margin: 0 auto 20px;
}

/* -------------------------------
		Icon
------------------------------- */
#howToEnter h4 img.icon {
	width: 100px!important;
	height: 100px!important;
}

/* -------------------------------
		Text
------------------------------- */
#howToEnter .txt {
	padding: 0 8% 40px;
}

/* -------------------------------
		Attention
------------------------------- */
#howToEnter .attention {
	font-size: 0.9em;
	line-height: 1.6em;
	padding-top: 50px;
}
#howToEnter .attention a {
	color: #000;
	text-decoration: underline;
}
#howToEnter .attention li {
	margin-bottom: 10px;
	margin-left: 1em;
}
#howToEnter .attention li::before{
	content: "※";
	margin-left: -1em;
}

/* ====================================================
		Item
==================================================== */
#item {
	padding-bottom: 70px;
}
#item ul {
	padding-top: 30px;
}
#item ul li {
	width: 33.3%;
	float: left;
}

/* ====================================================
		Time
==================================================== */
#time {
	font-size: 1.6em;
	text-align: center;
	font-weight: 600;
	padding-bottom: 60px;
}


/* ====================================================
		Present Detail
==================================================== */
#detail {
	text-align: center;
	font-size: 2em;
	font-weight: 600;
	color: #E60024;
	line-height: 1.4em;
}
#detail span {
	color: #000;
	font-size: 0.6em;
	font-weight: 400;
	display: block;
}



/* ====================================================
		Announcement
==================================================== */
#announcement ul {
	font-size: 0.9em;
	line-height: 1.6em;
}
#announcement a {
	color: #000;
	text-decoration: underline;
}
#announcement li {
	position: relative;
	margin-bottom: 10px;
	margin-left: 1em;
}
#announcement li::before{
	margin-left: -1em;
}
#announcement li::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: -1em;
  width: 6px;
  height: 6px;
  background-color: #58A542;
  border-radius: 100%;
}

/* ====================================================
		Term of Use
==================================================== */
#terms-of-use {
	color: #fff;
	font-size: 0.9em;
	line-height: 1.6em;
	padding: 30px 8%;
}
#terms-of-use a {
	color: #fff;
	text-decoration: underline;
}
#terms-of-use ul {
	padding-top: 30px;
}
#terms-of-use li {
	position: relative;
	margin-bottom: 10px;
	margin-left: 1em;
}
#terms-of-use li::before{
	margin-left: -1em;
}
#terms-of-use li::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: -1em;
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 100%;
}

/* -------------------------------
		Title
------------------------------- */
#terms-of-use h4 {
	width: 480px;
	margin: 50px auto 30px;
}



/* ====================================================
		Privacy
==================================================== */
#privacy {
	color: #fff;
	font-size: 0.9em;
	line-height: 1.6em;
	padding: 30px 8% 100px;
}

/* -------------------------------
		Title
------------------------------- */
#privacy h5 img {
	width: 560px;
	height: auto;
	padding-bottom: 30px;
}

/* ====================================================
		Footer
==================================================== */
#footer {
	background: #fff;
}

/* -------------------------------
		Hash Tag
------------------------------- */
#footer .hashTag {
	width: 520px;
	padding: 300px 0;
	margin: 0 auto;
	text-align: center;
}

/* -------------------------------
		Logo
------------------------------- */
#footer .footerLogo {
	width: 364px;
	margin: 0 auto 40px;
}


/* -------------------------------
		Copyright
------------------------------- */
#footer small {
	width: 444px;
	display: block;
	margin: 0 auto;
	padding-bottom: 20px;
}


/* ===========================================================================================================================================

   TABLET - LARGE

============================================================================================================================================= */
@media screen and (min-width: 992px) and (max-width: 1199px) {

.sp, .nav .sp { display: none;}
/* ====================================================
		Contents
==================================================== */

}

/* ===========================================================================================================================================

   TABLET

============================================================================================================================================= */
@media screen and (min-width: 768px) and (max-width: 991px) {

.sp, .nav .sp { display: none;}
/* ====================================================
		Contents
==================================================== */
	
}



/* ===========================================================================================================================================

   MOBILE

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

.sp, .nav .sp { display: block;}
.pc { display: none;}
/* ====================================================
		Contents
==================================================== */
#wrapper {
	width: 100%;
}
img.rwdImage {
	width: 100%;
	height: auto;
}
	
/* -------------------------------
		White Box
------------------------------- */
.whiteBox {
	padding: 30px 6% 30px;
}
.whiteBox h3 {
	width: 170px;
}
	
	
/* ====================================================
		How to Enter
==================================================== */
#howToEnter {
	background: #fff;
	margin: 30px 6%;
	border-radius: 10px; /* CSS3 */  
	-webkit-border-radius: 10px; /* Safari,Chrome */  
	-moz-border-radius: 10px; /* Firefox */ 
	padding: 50px 6% 30px;
}

/* -------------------------------
		Title
------------------------------- */
#howToEnter h3 {
	width: 240px!important;
	height: auto;
	text-align: center;
	padding-bottom: 40px;
	margin-bottom: 0;
}
#howToEnter h4 img {
	text-align: center;
	margin: 0 auto 20px;
}

/* -------------------------------
		Icon
------------------------------- */
#howToEnter h4 img.icon {
	width: 70px!important;
	height: 70px!important;
}
	
/* -------------------------------
		Text
------------------------------- */
#howToEnter .txt {
	padding: 0 6% 40px;
}
	
/* -------------------------------
		Attention
------------------------------- */
#howToEnter .attention {
	padding-top: 30px;
}
	
	
/* ====================================================
		Item
==================================================== */
#item {
	padding-bottom: 40px;
}
#item ul {
	padding-top: 0;
}
	
/* ====================================================
		Time
==================================================== */
#time {
	font-size: 1em;
	padding-bottom: 30px;
}


/* ====================================================
		Present Detail
==================================================== */
#detail {
	font-size: 1.2em;
}
#detail span {
	font-size: 0.8em;
}
	
	
/* ====================================================
		Term of Use
==================================================== */
#terms-of-use {
	font-size: 0.9em;
	line-height: 1.6em;
	padding: 30px 8%;
}
	
/* -------------------------------
		Title
------------------------------- */
#terms-of-use h4 {
	width: 240px;
	height: auto;
	margin: 30px auto 0;
}
	
/* ====================================================
		Footer
==================================================== */
#footer {
	background: #fff;
}

/* -------------------------------
		Hash Tag
------------------------------- */
#footer .hashTag {
	width: 260px;
	height: auto;
	padding: 200px 0;
}

/* -------------------------------
		Logo
------------------------------- */
#footer .footerLogo {
	width: 187px;
	height: auto;
	margin: 0 auto 40px;
}


/* -------------------------------
		Copyright
------------------------------- */
#footer small {
	width: 222px;
	height: auto;
}
	
}