@charset "utf-8";

/*
========================================
File Name ： the-wizarding-world.css
Description ： 「魔法体験！」css
Editor :
Version : 1.0
Since : 2015-02-15
Last Up Date : 2015-02-15
========================================
*/

/****************************
utility
****************************/
.clear:after {
  content: " "; /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.fright{
  float:right;
}

.fleft{
  float:left;
}

.mb20{
  margin-bottom: 20px;
}

.mb30{
  margin-bottom: 30px;
}

.mb40{
  margin-bottom: 40px;
}

.mb50{
  margin-bottom: 50px;
}


/****************************
general
****************************/
#contents_base{
  	margin-bottom: 80px;
  padding-bottom: 30px;
  background: #320f0f;
}

#the-wizarding-world_wrap .wrap{
  width: 950px;
  margin: 0 auto;
}

#the-wizarding-world_wrap .banner{
  margin-bottom: 30px;
}

#the-wizarding-world_wrap h2{
  margin: 0 40px 30px;
}

#the-wizarding-world_wrap .tag{
  margin-bottom: 30px;
  padding:0 52px;
}

#the-wizarding-world_wrap #detail{
  background: url(../images/bg_main.jpg) repeat-y top center;
}

#the-wizarding-world_wrap #detail .section .details {
  padding: 0 30px;
}

#the-wizarding-world_wrap #detail .section .details .innerwrap{
  padding: 10px 10px 50px;
  border-bottom: 1px solid #a57e58;
}

#the-wizarding-world_wrap #detail .section:last-of-type() .details .innerwrap {
  border-bottom: none;
}


#the-wizarding-world_wrap #detail .section .details .innerwrap h3{
  text-align: center;
}

/****************************
section01
****************************/
#the-wizarding-world_wrap #detail #section01 .details {
  padding-top: 29px;
  background: url(../images/tww_bg_castle.jpg) no-repeat center 140px;
}

#the-wizarding-world_wrap #detail #section01 .details .innerwrap h3{
  margin-bottom: 70px;
}

#the-wizarding-world_wrap #detail #section01 #img01{
  margin-top: -70px;
}


/****************************
section02
****************************/
#the-wizarding-world_wrap #detail #section02 .details {
  padding-top: 25px;
  background: url(../images/tww_bg_meetmagic.jpg) no-repeat center 133px;
}

#the-wizarding-world_wrap #detail #section02 .details .innerwrap h3{
  margin-bottom: 49px;
}

#the-wizarding-world_wrap #detail #section02 #img02{
  margin-top: -69px;
}

#the-wizarding-world_wrap #detail #section02 ul{
  padding: 20px 30px;
}

#the-wizarding-world_wrap #detail #section02 #img03{
  margin: 20px 0 0 19px;
}

/****************************
section03
****************************/
#the-wizarding-world_wrap #detail #section03 .details {
  padding-top: 30px;
}

#the-wizarding-world_wrap #detail #section03 .details .innerwrap h3{
  margin-bottom: 45px;
}

#the-wizarding-world_wrap #detail #section03 #img04{
  margin-top: -10px;
  position: absolute;
}

#the-wizarding-world_wrap #detail #section03 #div01{
  position: relative;
  padding-bottom: 180px;
}

#the-wizarding-world_wrap #detail #section03 #img05{
  position: absolute;
  top: 102px;
  right: -21px;
}

/****************************
section04
****************************/
#the-wizarding-world_wrap #detail #section04 .details {
  padding-top: 30px;
}

#the-wizarding-world_wrap #detail #section04 .details .innerwrap h3{
  margin-bottom: 40px;
}

#the-wizarding-world_wrap #detail #section04 #div02{
  background: #f6f0e7;
}

#the-wizarding-world_wrap #detail #section04 #div03{
  position: relative;
  height: 293px;
  padding-left: 25px;
  display: table;
  background: #7c180e;
}

#the-wizarding-world_wrap #detail #section04 #div03:after{
  position: absolute;
  content: "";
  right: -51px;
  border-top: 147px solid #f6f0e7;
  border-right: 30px solid #f6f0e7;
  border-bottom: 146px solid #f6f0e7;
  border-left: 30px solid #7c180e;
}

#the-wizarding-world_wrap #detail #section04 #div03 > p{
  display: table-cell;
  vertical-align: middle;
}

#the-wizarding-world_wrap #detail #section04 #div04{
  padding: 20px 0 0 55px;
}

#the-wizarding-world_wrap #detail #section04 .btn_link a{
  background: url(/enjoy/family/assets/images/tww_btn_usefulinfo_01.png) no-repeat;
  width: 200px;
  height: 40px;
  display: block;
  font-size: 0;
}

#the-wizarding-world_wrap #detail #section04 .btn_link a:hover{
  background-position:left bottom;
}

#the-wizarding-world_wrap #detail #section04 .learnmore{
  text-align: center;
}

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

	btn: ticket-schedule
	
-------------------------------------------*/
body#the-wizarding-world_page #family_floor #family_bottommenu .btn_backtofamilytop{
	padding-bottom:50px;
}