@charset "UTF-8";

/* ===================================
	File Name   : common.css
	Description : Base Layout CSS
	Editor      : Bface Takahira
	Last Editor : Bface Shigyo

	Update Description :
	[2019/07/11] 豪華賞品をゲットバナー追加の修正
	[2017/06/26] 2017年用修正
	[2015/10/22] 2016年用修正
	[2015/05/13] 新規作成

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

/*========== Style Contents ==========

	1. Global Redefinition
	2. Font Size Redefinition
	3. Box Setting
	4. Common Items Setting
		- Basic Link
	 	- Title Setting
	 	- Header Items
		- Global Navigation
		- Footmark
		- Contact
	 	- Footer Items
		- Page Top Button
		- Title Items
	*. Clear Fix

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





/*===== ■1. Global Redefinition =====*/
body {
	color: #333333;
	line-height: 1.5;
  margin: 0px auto;
	background: url(../img/common/bg-cardboard.jpg);
}

img {
	width: 100%;
	height: auto;
}

img.switch { visibility: hidden;}





/*===== ■2. Font Size Redefinition =====*/
html { font-size: 62.5%;}

body {
	font-size: 14px;
	font-size: 1.4rem;
	font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@media all and (max-width: 640px) {
body {
	font-size: 12px;
	font-size: 1.2rem;
}
}





/*===== ■3. Box Setting =====*/
#entirety { overflow: hidden;}

main {
	display: inline-block;
	width: 100%;
	margin: -58px 0 0;
	padding-top: 20px;
	background: url(../img/common/bg-note-top.png) no-repeat center top;
	zoom: 1;
}

#contents {
	padding-bottom: 30px;
	background: url(../img/common/bg-note-body.png) repeat-y center;
}

section {
	max-width: 919px;
	margin: 0 auto;
	padding: 15px 0;
	border: 1px solid #DDDDDD;
	background: url(../img/common/bg-squares.gif);
}


@media all and (max-width: 640px) {
main {
	margin-top: -12px;
	padding-top: 22px;
}
}





/*===== ■4. Common Items Setting =====*/
/* Basic Link */
a {
	outline: hidden;
	text-decoration: underline;
}

a:link,
a:visited { color: #333333;}

a:hover { color: #b0493d;}





/* Header Items */
#entirety > header {
	max-height: 275px;
	background: url(../img/common/bg-header.jpg) repeat-x;
	background-size: auto 100%;
}

#entirety > header #header_bg {
	max-height: 275px;
	background: url(../img/common/bg-header-illust.jpg) no-repeat center top;
	background-size: auto 100%;
}

#entirety > header #header_item {
  position: relative;
	max-width: 1000px;
	height: auto;
	margin: 0 auto;
	padding-bottom: 115px;
}

#entirety > header #header_item h1,
#entirety > header #header_item strong {
	display: block;
	float: left;
	width: 50%;
	max-width: 500px;
	padding: 10px 0 10px 20px;
}

#entirety > header #header_item h1:hover,
#entirety > header #header_item strong:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
}

#entirety > header #header_item > img {
	float: right;
	width: 42%;
	margin: 40px 20px 0 0;
}




/*ログイン中の状態----------------------------------------------------------------------*/

#entirety > header #header_item #login_page {
  position: absolute;
  bottom: 85px;
  right: 50px;
}


#entirety > header #header_item #login_page ul {
  display: flex;
}

#entirety > header #header_item #login_page ul li {
  position: relative;
  width: 100px;
}

#entirety > header #header_item #login_page ul li label { 
  display: block;  
  padding: 25px; 
}

#entirety > header #header_item #login_page ul li label span{ color: #009C43; }

#entirety > header #header_item #login_page ul li:first-child { margin-right: 15px; }

#entirety > header #header_item #login_page ul li:first-child,
#entirety > header #header_item #login_page ul li label {
  padding: 5px;
  text-align: center;
  background: linear-gradient(#f5f5f5, #d3d3d3);
  border: 1px solid #A4A4A4;
  border-radius: 5px;
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px;
  box-shadow: 1px 1px 2px -1px #000;
  cursor :pointer;
  font-weight: bold;
}

#entirety > header #header_item #login_page ul li label span { color: #009C43; }

#entirety > header #header_item #login_page ul li div { opacity: 1; }
#entirety > header #header_item #login_page ul li div p { opacity: 1!important; }

#entirety > header #header_item #login_page ul li:first-child:hover,
#entirety > header #header_item #login_page ul li label:hover { 
  background: linear-gradient(#C9CACA	, #9FA0A0);
}

#entirety > header #header_item #login_page ul li input {
  display: none;
}


/*最初表示なし　クリックして表示----------*/
#entirety > header #header_item #login_page ul li div {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 1;
  transition: 0.8s;
  color: #e87300;
}

#entirety > header #header_item #login_page ul li input:checked ~ div {
  height: auto;
  opacity: 1;
}

#entirety > header #header_item #login_page ul li div p { 
  position: absolute;
  width: 400px;
  top: -30px;
  right: 0;
  color: #e87300;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: right;
}

/*---------------------------ここまで*/


@media all and (max-width: 840px) {
  #entirety > header #header_item #login_page {
    bottom: 75px;
  }
  
}
@media all and (max-width: 640px) {
  
  #supporter_entry a img {
    max-height: 50px!important;
  }
  
  #entirety > header #header_item #login_page {
    bottom: 10px;
  }
  
}


@media all and (max-width: 550px) {
  #supporter_entry {
    top: -90px!important;
    margin-left: 5px;
  }
  
  #entirety > header #header_item #login_page {
    right: 10px;
    top: 190px;
  }
  #entirety > header #header_item #login_page ul li {
    width: 75px;
  }
  #entirety > header #header_item #login_page ul li:first-child {
    margin-right: 5px;
  }
  #entirety > header #header_item #login_page ul li div p { font-size: 1.4rem; }
  
}


@media all and (min-width: 350px)  and (max-width: 630px) {
  
  #entirety > header #header_item #login_page {
    top: 85%!important;
  }
  
}

@media all and (max-width: 320px) {
  #supporter_entry a img {
    max-height: 40px!important;
  }
}



/*---------------------------------------------------------------------------------------ここまで*/






/*ログイン前の状態----------------------------------------------------------------------*/

#entirety > header #header_item #loginNaviArea {
  position: absolute;
  bottom: 70px;
  right: 5px;
}
#entirety > header #header_item #loginNaviArea ul {
  display: flex;
}
#entirety > header #header_item #loginNaviArea ul li:first-child {
  width: 175px;
  margin-right: 10px;
}
#entirety > header #header_item #loginNaviArea ul li:last-child {
  width: 170px;
}
#entirety > header #header_item #loginNaviArea ul li:last-child a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 33px;
    background: linear-gradient(#f5f5f5, #d3d3d3);
    border: 1px solid #A4A4A4;
    border-radius: 5px;
    box-shadow: 1px 1px 2px -1px #000;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    color: #333;
    box-sizing: border-box;
    cursor: pointer;
}
#entirety > header #header_item #loginNaviArea ul li:last-child a:hover { 
  background: linear-gradient(#C9CACA	, #9FA0A0);
}


@media all and (min-width: 1000px) {
 #entirety > header #header_item #loginNaviArea {
  right: 40px;
  }
}
@media all and (max-width: 640px) {
  #entirety > header #header_item #loginNaviArea {
    bottom: 10px;
    right: 10px;
  }
 #entirety > header #header_item #loginNaviArea ul { 
   display: block;
  }
  #entirety > header #header_item #loginNaviArea ul li:first-child {
    width: 160px;
  }
  
}
@media all and (max-width: 550px) {
  #entirety > header #header_item #loginNaviArea {
    margin-right: 5px;
  }
  #entirety > header #header_item #loginNaviArea ul li:first-child {
    margin-right: 0;
    margin-bottom: -12px;
  }
  #entirety > header #header_item #loginNaviArea ul li:last-child a {
    width: 160px;
    margin-left: 10px;
  }
  
}




/*---------------------------------------------------------------------------------------ここまで*/











@media all and (max-width: 900px) {
 #entirety > header #header_item div ul li div p { 
   top: -20px;
   font-size: 1.4rem; 
  }
}


@media all and (max-width: 640px) {
  
  #entirety > header {
    max-height: 230px;
    background: url(../img/common/bg-header-sp.jpg) no-repeat bottom center;
    background-size: cover;
  }

  #entirety > header #header_bg {
    max-height: 426px;
    background: none;
  }
  
  #entirety > header #header_item > img {
    display: inherit;
    float: none;
    width: 90%;
    margin: 0 auto 15%;
    padding: 0;
  }
  
  #entirety > header,
  #entirety > header #header_bg {max-height: 480px;}

  #entirety > header #header_item { padding-bottom: 40px;}

  #entirety > header #header_item h1,
  #entirety > header #header_item strong {
    float: none;
    width: auto;
    max-width: 600px;
    margin: 0 auto 10px;
    padding: 5px 10px 0;
    text-align: center;
  }
  
  #supporter_entry { display: block; left: 0; }
  
  #supporter_entry {
    display: block;
    top: -50%;
  }

  #entirety > header #header_item > div {
    position: absolute;
    bottom: 15px;
    right: 10px;
  }

  #entirety > header #header_item div ul li {  
    font-size: 1.4rem;
  }
  
}


@media all and (max-width: 550px) {

  
  #supporter_entry { 
    width: 40%;
    top: -110%!important;
  }
  
  #supporter_entry a { display: inline-block!important;}
  
  #entirety > header #header_item > div { bottom: 0; }
  
  #entirety > header #header_item div ul li { width: auto; }
  
  #entirety > header #header_item div ul li:first-child, 
  #entirety > header #header_item div ul li label {
    padding: 15px 10px;
    font-size: 1.2rem;
  }
  
  #entirety > header #header_item div ul li div p { 
   top: -30px;
   font-size: 1.4rem; 
  }
  
}


@media all and (max-width: 320px) {
#entirety > header { max-height: 230px;}
#entirety > header #header_item { padding-bottom: 50px;}
}





/* Global Navigation */
#global_navi {
	position: relative;
	max-width: 930px;
	padding-top: 20px;
	margin: 0 auto 10px;
}

#global_navi ul {
	display: table;
	width: 100%;
}

#global_navi li {
	display: table-cell;
	padding: 0 5px;
	vertical-align: top;
	margin-top: -10px;
	vertical-align: middle;
}

#supporter_entry {
	display: table;
	position: absolute;
	top: -30px;
	right: 15px;
}

#supporter_entry a {
	display: table-cell;
	padding-left: 10px;
	height: auto;
}

#supporter_entry a img {
	width: auto;
	height: auto;
	max-height: 30px;
}



@media all and (max-width: 640px) {
#global_navi {
	width: 98%;
}

#global_navi li { padding: 0 2px;}

#global_navi li:first-child,
#supporter_entry { display: none;}

#supporter_entry a.pc_only { display: none;}

#supporter_entry {
	display: block;
  top: -60px;
}
  
#supporter_entry a {
	padding-left: 0;
}

#supporter_entry a img { max-height: 50px;}
  
}

@media all and (max-width: 640px) {
#global_navi {
	width: 98%;
}

#global_navi li { padding: 0 2px;}

#global_navi li:first-child,
#supporter_entry { display: none;}

#supporter_entry {
	display: inherit;
  top: -60px;
}
  
#supporter_entry a {
	padding-left: 0;
}

  
}

@media all and (min-width: 550px)  and (max-width: 640px) {

#supporter_entry {
	width: 60%;
  margin-top: 3%!important;
}

#supporter_entry a img { margin-right: 5px;}

}


@media all and (max-width: 549px){

#supporter_entry {
	padding-top: 5px;
}

}

@media all and (max-width: 380px){

#supporter_entry {
  margin-top: -10px!important;
}

}



/* Footmark */
#footmark {
	max-width: 900px;
	margin: 0 auto 20px;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: right;
}

#footmark a {
	margin-right: 7px;
	padding-right: 30px;
	background: url(../img/common/mark-arrow.png) no-repeat right;
	background-size: contain;
}

#footmark span { font-weight: bold;}


@media all and (max-width: 640px) {
#footmark { margin: 15px 10px 20px;}
}





/* Contact */
#contact {
	display: inline-block;
	max-width: 400px;
	margin: 0 auto 20px;
	padding-bottom: 4px;
	background: url(../img/common/bg-contact-shadow.png) no-repeat bottom;
	background-size: contain;
	text-align: center;
}

#contact dt,
#contact dd {
	padding: 20px;
	background: #F4E3BB;
}

#contact dt span {
	display: block;
	margin-top: 10px;
	color: #CC0033;
	font-weight: bold;
}

#contact dd {
	margin-top: -10px;
	padding-top: 0;
	font-weight: bold;
}

#contact dd a:hover img { opacity: 0.7;}

#contact dd img { max-width: 350px;}

#contact dd strong {
	display: block;
	margin-bottom: 10px;
	font-size: 18px;
	font-size: 1.8rem;
}

#contact dd span {
	display: block;
	margin-bottom: 10px;
}



@media all and (max-width: 640px) {
#contact { width: 96%;}

#contact dd {
	padding: 0 10px 10px 10px;
}

#contact dd strong {
	font-size: 14px;
	font-size: 1.4rem;
}
}






/* Footer Items */
footer {
	padding: 60px 15px 25px;
	background: url(../img/common/bg-note-bottom.png) no-repeat center top;
	font-weight: bold;
	text-align: center;
}

#footer_navi {
	max-width: 919px;
	margin: 0 auto;
	text-align: center;
}

#footer_navi .sp_only { display: none;}

#footer_navi li { display: inline-block;}

#footer_navi li a,
footer li a {
	display: block;
	padding: 10px 20px 10px 45px;
	background: url(../img/common/mark-arrow.png) no-repeat 10px center;
	font-weight: bold;
}

#footer_navi li a.close_qa,
#footer_navi li a.close_observe,
#footer_navi li a.close_supporter {
	color: #999 !important;
	text-decoration: none !important;
}

#footer_sponsor {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

#footer_sponsor li {
	display: inline-block;
	padding: 0 20px 20px;
	text-align: center;
	vertical-align: middle;
}

#footer_sponsor li em img {
	width: 50px;
	margin-right: 5px;
	vertical-align: middle;
}

#footer_sponsor li span {
	font-weight: bold;
	font-size: 16px;
	font-size: 1.6rem;
	vertical-align: middle;
}

#footer_sponsor li a img {
	width: 256px;
	vertical-align: middle;
}

#footer_sponsor li a:hover {
	filter: alpha(opacity=60);
	opacity: 0.6;
}

footer ul {
	display: flex;
	margin: 0 40px 30px;
  justify-content: center
}

footer .footer_logo {
  position: relative;
	display: none;
	padding: 20px;
	max-width: 220px;
	background: #fff;
	box-sizing: border-box;
	vertical-align: top;
}
footer .footer_logo:before,
footer .footer_logo:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 2px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #111;
  -webkit-box-shadow: 0 13px 6px #111;
     -moz-box-shadow: 0 13px 6px #111;
  				box-shadow: 0 13px 6px #111;
  -webkit-transform: rotate(-2deg);
     -moz-transform: rotate(-2deg);
       -o-transform: rotate(-2deg);
      -ms-transform: rotate(-2deg);
          transform: rotate(-2deg);
}
footer .footer_logo:after {
  right: 2px;
  left: auto;
  -webkit-transform: rotate(2deg);
     -moz-transform: rotate(2deg);
       -o-transform: rotate(2deg);
      -ms-transform: rotate(2deg);
          transform: rotate(2deg);
}

@media all and (min-width: 696px) and (max-width: 920px) {
	footer .footer_logo {
		margin-bottom: 20px;
	}
}


@media all and (max-width: 640px) {
  
	#footer_navi {
		display: block;
		width: 100%;
		background: url(../img/common/bg-squares.gif);
		text-align: left;
	}

	#footer_navi li,
	#footer_navi .sp_only { display: block;}

	#footer_navi li a {
		display: block;
		padding: 15px 20px 15px 45px;
		background: url(../img/common/mark-arrow.png) no-repeat 10px center;
		font-weight: bold;
		font-size: 16px;
		font-size: 1.6rem;
		text-decoration: none;
	}

	#footer_navi li { background: url(../img/common/bg-line-black.png) repeat-x top;}

	#footer_navi ul { background: url(../img/common/bg-line-black.png) repeat-x bottom;}

	footer li a {
		font-size: 16px;
		font-size: 1.6rem;
	}

	footer ul {
    display: inline-block;
    margin: 0 40px 30px;
    vertical-align: top;
    text-align: left;
  }

	footer .footer_logo {
		margin: 0 20px 30px;
	}
  
}


@media all and (max-width: 320px) {
#footer_sponsor li em img { max-width: 40px;}
#footer_sponsor li a img { max-width: 200px;}
}





/* Page Top Button */
.pagetop {
	position: relative;
	max-width: 940px;
	margin: -10px auto 10px;
	text-align: right;
	z-index: 1000;
}

.pagetop img {
	max-width: 144px;
	max-height: 50px;
}


@media all and (max-width: 640px) {
.pagetop { width: 94%;}

.pagetop img {
	width: 30%;
	max-width: 182px;
	max-height: 60px;
}

}





/* Title Items */
h3 img,
section h1 img {
	margin: 0 0 40px -40px;
	max-height: 79px;
	height: auto;
	width: auto;
}

h2 {
	width: 90%;
	margin: 0 auto 30px;
	padding: 0 0 5px 5px;
	background: url(../img/common/bg-line-black.png) repeat-x bottom;
	font-weight: bold;
	font-size: 24px;
	font-size: 2.4rem;
}


@media all and (max-width: 940px) {
h3 img,
section h1 img { margin-left: -15px;}
}


@media all and (max-width: 640px) {
h2 {
	font-size: 20px;
	font-size: 2.0rem;
}
}


@media all and (max-width: 470px) {
h3 img,
section h1 img {
	margin-bottom: 20px;
	max-height: 50px;
}
}





/* etc */
.mark_pink {
	padding-left: 20px;
	background: url(../img/common/mark-pink.png) no-repeat left 3px;
	background-size: 14px 14px;
}

sup {
	font-size: 10px;
	font-size: 1.0rem;
	vertical-align: super;
}





#btn_visit {
  width: 200px;
}







/* Clear Fix */
#entirety > header #header_item:after,
#footer_navi ul:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}