@charset "UTF-8";
@import url("/common/css/reset.css");
@import url("/common/css/fonts.css");
@import url("/common/css/base.css");
/* ================================
	style.css	EXHIBITION present
================================ */
/*
各企画展個別のcssです。
bodyに付けるclass名は独自のものにしてください。
*/

/* ----------------------------- */
body.noScroll {
	position: absolute;
	overflow: hidden;
}
.secBlock {
	padding-bottom: 40px;
}
.js-content-load {
	display: none;
}

/* ---------- SUB NAV ------------- */
.tokubetsuNav {
	display: table;
	width: 100%;
	margin: 2px 0 30px;
}
.tokubetsuNav li {
	display: table-cell;
	vertical-align: middle;
	border-right: 2px solid #fff;
	background: #003f98;
	min-width: 144px;
	text-align: center;
}
.tokubetsuNav li.bgColor02 {
	background: #98005d;
}
.tokubetsuNav li:hover,
.tokubetsuNav li.act {
	opacity: 0.7;
}
.tokubetsuNav li:last-child {
	border: none;
}
.tokubetsuNav li a{
	display: block;
	color: #fff;
    font-size: 15px;
    font-size: 1.5rem;
	line-height: 40px;
}
.tokubetsuNav li a:hover {
	text-decoration: none;
}
.tokubetsuNav li a .bonus {
	font-size: 9px;
	display: inline-block;
	padding: 7px;
	background: url('../images/border_bonus_01.png') no-repeat;
	background-size: 100% 100%;
	vertical-align: middle;
	margin-right: 5px;
	line-height: 1.5;
}


/* ------------ table01 -------------- */
#exhibition .table01 {
	font-size: 12px;
	font-size: 1.15rem;
	margin-bottom: 15px;
}
#exhibition .table01 th,
#exhibition .table01 td {
	border: #e6e6e6 1px solid;
	padding: 13px 19px;
	vertical-align: middle;
}
#exhibition .table01 th {
	text-align: center;
	background: #f7f7f7;
	white-space: nowrap;
}


/* ------------ btnLink -------------- */
.btnLink {
	display: inline-block;
	background: #4db8db;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	border-radius: 10px;
	padding: 10px;
}
.btnLink.style01 {
	display: block;
	text-align: center;
	padding: 20px;
	line-height: 1;
}
.btnLink.style02 {
	display: block;
	padding: 5px 55px 5px 10px;
	background: url('../images/ico_animal_01.png')#4db8db no-repeat center right 5px;
}
.btnLink.style02 span {
	font-size: 12px;
}

/* ------------ boxColor -------------- */
.boxColor {
	background: #f7f7f7;
}
.boxColor .title{
	background: #f7efef;
	padding: 10px;
	font-weight: bold;
}
.boxColor .content {
	padding: 10px;
}
.boxColor .content p{
	font-size: 11px;
	font-size: 1.1rem;
}
.boxColor .content dl {
	display: table;
	font-size: 11px;
	font-size: 1.1rem;
}
.boxColor .content dl dd,
.boxColor .content dl dt {
	display: table-cell;
}


/* ----------------------------- */
#exhibition .specTitle {
	background: #fff;
	color: #217fc4;
	text-align: center;
	font-size: 30px;
	padding: 15px 15px 10px 15px;
	border: 2px solid #217fc4;
}
#exhibition .specTitle.pink {
	background: #fff;
	color: #ad337d;
	text-align: center;
	font-size: 30px;
	padding: 15px 15px 10px 15px;
	border: 2px solid #ad337d;
}
#exhibition .specTitle span.bonus{
	font-size: 12px;
    display: inline-block;
    padding: 10px 6px;
    background: url(../images/border_bonus_02.png) no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-bottom: 5px;
	margin-right: 10px;
}


/* --------------- colEqualHeight -------------- */
.colEqualHeight {
	margin-top: 30px;
    display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.colEqualHeight .child{
	width: calc((100% - 40px)/3);
	padding: 10px;
	border-radius: 10px;
	overflow: hidden;
	box-sizing: border-box;
	background: #fff5d1;
	
}
.colEqualHeight .child:nth-child(2){
	background: #ffecd1;
}
.colEqualHeight .child:nth-child(3){
	background: #dcf2de;
}


/* --------------- graphBox01 -------------- */
#exhibition .graphBox01 {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
#exhibition .graphBox02 {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	margin: -10px 0 20px;
}

#exhibition .graphBox01 div {
	position: relative;
}

#exhibition .graphBox01 div:nth-child(1) {
	-webkit-flex-basis: 260px;
	flex-basis: 260px;
}
#exhibition .graphBox01 div:nth-child(2) {
	-webkit-flex-basis: 440px;
	flex-basis: 440px;
}
#exhibition .graphBox02 div:nth-child(1) {
	-webkit-flex-basis: 230px;
	flex-basis: 230px;
}
#exhibition .graphBox02 div:nth-child(2) {
	-webkit-flex-basis: 485px;
	flex-basis: 485px;
}

#exhibition .graphBox01 h6,
#exhibition .graphBox02 h6 {
	border: none;
	padding: 0;
	margin: 0 -70px 12px 0;
	position: relative;
	z-index: 1;
}


/* --------------- onePersonBox -------------- */
#exhibition .onePersonBox {
	background-color: #f7eaf2;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 15px;
}
#exhibition .onePersonBox h5 {
	color: #ad106e;
	font-size: 24px;
	font-size: 2.4rem;
	border: none;
	padding: 0;
	font-weight: bold;
	margin: 0 0 3px;
}
#exhibition .onePersonBox h5+p {
	color: #f18c38;
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 10px;
}
#exhibition .onePersonBox h5+p span {
	font-size: 12px;
	font-size: 1.2rem;
}
#exhibition .onePersonBox ul {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
#exhibition .onePersonBox ul li {
	text-align: center;
}
#exhibition .onePersonBox ul li:first-child {
	color: #474ca8;
	margin-right: 15px;
}
#exhibition .onePersonBox ul li:last-child {
	margin-top: -35px;
}
#exhibition .onePersonBox ul li p {
	font-size: 16px !important;
	font-size: 1.6rem !important;
	line-height: 1.2;
	font-weight: bold;
	padding: 14px 0 8px;
}
#exhibition .onePersonBox ul li:first-child p {
	text-align: left;
	padding-top: 10px;
}
#exhibition .onePersonBox ul li p span {
	font-size: 10px;
	font-size: 1rem;
	font-weight: normal;
}


/* --------------- factoryBox -------------- */
#exhibition .factoryBox {
	border: dotted 3px #00a0e9;
	padding: 15px 11px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#exhibition .factoryBox .facTitle {
	margin: -15px -11px 15px -11px;
	text-align: center;
	background: #e3eff8;
	padding: 15px 10px 10px 10px;
	color: #0075c2;
}
#exhibition .factoryBox.green {
	border: dotted 3px #00872e;
}
#exhibition .factoryBox.green .facTitle {
	background: #eff5d0;
	color: #00872e;
}
#exhibition .factoryBox .facTitle h6 {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#exhibition .factoryBox .facTitle h6 {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
}
#exhibition .factoryBox .facTitle p {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
}
#exhibition .factoryBox .factoryCap {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	margin: 8px -10px 0;
}
#exhibition .factoryBox .factoryCap p {
	font-size: 12px;
	font-size: 1.2rem;
	padding: 0 10px;
	-webkit-flex-basis: 210px;
	flex-basis: 210px;
}
#exhibition .factoryBox .factoryCap p.bigPh {
	-webkit-flex-basis: 240px;
	flex-basis: 240px;
}


/* --------------- saltOriginal -------------- */
#exhibition .saltOriginal {
	background: #e3eff8;
	padding: 20px;
	border-radius: 10px;
}
#exhibition .stepBlock .step {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
#exhibition .stepBlock .step .image {
	margin-right: 15px;
	position: relative;
}
#exhibition .stepBlock .step .image:after {
	content: "";
	width: 37px;
	height: 24px;
	background: url('../02/images/icon_arrow_step.png')no-repeat;
	background-size: 100%;
	position: absolute;
	left: 50%;
	margin-left: -13px;
	bottom: -24px;
	z-index: 1;
}
#exhibition .stepBlock .step:last-child .image:after {
	display: none
}
#exhibition .stepBlock .step .text .txtName {
	font-size: 16px;
	color: #0075c2;
	font-weight: bold;
}
#exhibition .stepBlock .step .text .txtName span.number {
	width: 16px;
	height: 16px;
	line-height: 16px;
	color: #fff;
	background: #0075c2;
	text-align: center;
	margin-right: 7px;
	margin-bottom: 2px;
	font-size: 11px;
	display: inline-block;
	vertical-align: middle;
    border-radius: 16px;
}


/* --------------- imageMap -------------- */
#exhibition .imageMap {
	width: 100%;
	height: 550px;
	position: relative;
	margin-top: 40px;
}
#exhibition .imageMap > div {
	position: absolute;
}
#exhibition .imageMap > div.image01 {
	top: -6px;
	left: -6px;
}
#exhibition .imageMap > div.image02 {
	top: 14px;
	left: 353px;
}
#exhibition .imageMap > div.image03 {
	top: 225px;
	left: 155px;
}
#exhibition .imageMap > div.image04 {
	top: 0;
	left: 193px;
	background: #58be89;
	width: 152px;
	overflow: hidden;
	border-radius: 30px;
}
#exhibition .imageMap > div.image05 {
	top: 0;
	right: 0;
	background: #f27398;
	width: 152px;
	overflow: hidden;
	border-radius: 30px;
}
#exhibition .imageMap > div.image04 p,
#exhibition .imageMap > div.image05 p {
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	padding: 10px;
	line-height: 1;
	color: #fff;
}
#exhibition .imageMap > div.imageGroup {
	top: 195px;
	left: 0;
	font-size: 0;
	margin-right: -40px;
	height: 385px;
}
#exhibition .imageMap > div.imageGroup .image {
	width: 152px;
	display: inline-block;
	margin-right: 40px;
	margin-bottom: 34px;
	position: relative;
}
#exhibition .imageMap > div.imageGroup .image a {
	display: block;
}
#exhibition .imageMap > div.imageGroup .image:first-child {
	margin-right: 232px;
}

/* -- line -- */
#exhibition .imageMap > div.imageGroup .image:before{
	content: "";
	width: 8px;
	background: #58be89;
	position: absolute;
	z-index: 1;
}
#exhibition .imageMap > div.imageGroup .image.image06:before {
	height: 100px;
    right: -30px;
    top: -76px;
    -webkit-transform: rotate(43deg);
    transform: rotate(43deg);
}
#exhibition .imageMap > div.imageGroup .image.image07:before {
	height: 100px;
    left: -30px;
    top: -76px;
    -webkit-transform: rotate(-43deg);
    transform: rotate(-43deg);
}
#exhibition .imageMap > div.imageGroup .image.image08:before,
#exhibition .imageMap > div.imageGroup .image.image12:before {
	height: 50px;
    left: 50%;
    top: -50px;
	margin-left: -4px;
	background: #f27398;
}
#exhibition .imageMap > div.imageGroup .image.image12:before {
	height: 40px;
	top: -40px;
}

#exhibition .imageMap > div.imageGroup .image.image09:before,
#exhibition .imageMap > div.imageGroup .image.image10:before,
#exhibition .imageMap > div.imageGroup .image.image11:before {
	height: 40px;
	top: -40px;
	left: 50%;
	margin-left: -4px;
}
#exhibition .imageMap > div.imageGroup .image.image10:before {
	height: 240px;
	top: -240px;
}

/*  Frame Border  */
#exhibition .frame01 {
	border: 2px dotted #98005d;
	border-radius: 10px;
	background: #f7eaf2;
	box-sizing: border-box;
	padding: 20px 25px;
}

/*  GAME PLAY FIND MEGUMI  */
#exhibition .zoneBoxWrap {
	margin-right: -23px;
	margin-bottom: -25px;
	overflow: hidden;
}
#exhibition .zoneBoxWrap .zoneBox {
	width: 210px;
	margin-right: 23px;
	margin-bottom: 25px;
	float: left;
}
#exhibition .zoneBoxWrap .zoneBox .zoneTtl{
	font-size: 16px;
	font-size: 1.6rem;
	color: #98005d;
	font-weight: bold;
	margin: 10px 0;
}
#exhibition .zoneBoxWrap .zoneBox .zoneTtl .markNumber {
	width: 34px;
	height: 34px;
	background: url('../04/images/bg_head_02.png') no-repeat;
	background-size: 100%;
	color: #fff;
	font-size: 14px;
	font-size: 1.4rem;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	margin-right: 5px;
    padding-top: 7px;
	box-sizing: border-box;
}

/*  OTHER SALT  */
#exhibition .otherSaltWrap {
	margin-right: -35px;
	margin-bottom: -35px;
}
#exhibition .otherSaltWrap .otherSalt {
	width: 220px;
	float: left;
	margin-right: 35px;
	margin-bottom: 35px;
}
#exhibition .otherSaltWrap .otherSalt .title{
	color: #fff;
	font-size: 13px;
	font-size: 1.3rem;
	background: #98005d;
	padding: 5px 15px;
	font-weight: bold;
}

/*  FEED BACK  */
#exhibition .feedBack {
	position: relative;
}
#exhibition .feedBack .image{
	display: block;
	margin: auto;
}
#exhibition .feedBack .image img{
	max-width: 100%;
}
#exhibition .feedBack .feedBackBox{
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
}
#exhibition .feedBack .feedBackBox .text{
	font-size: 11px;
	font-size: 1.1rem;
}
#exhibition .feedBack .feedBackBox.green {
	top: 80px;
	left: 23px;
	width: 197px;
	height: 197px;
	background: url('../04/images/bg_feedback_02.png') no-repeat;
	background-size: 100%;
	padding: 60px 30px 0 43px;
}
#exhibition .feedBack .feedBackBox.pink {
	top: 175px;
	left: 200px;
	width: 162px;
	height: 162px;
	background: url('../04/images/bg_feedback_03.png') no-repeat;
	background-size: 100%;
	padding: 45px 15px 0 22px;
}
#exhibition .feedBack .feedBackBox.blue {
	top: 135px;
	left: 375px;
	width: 147px;
	height: 147px;
	background: url('../04/images/bg_feedback_04.png') no-repeat;
	background-size: 100%;
	padding: 25px 10px 10px 15px;
}
#exhibition .feedBack .feedBackBox.yellow {
	top: 165px;
	left: 540px;
	width: 147px;
	height: 168px;
	background: url('../04/images/bg_feedback_05.png') no-repeat;
	background-size: 100%;
	padding: 45px 10px 10px 15px;
}


/* --------------- modalBox -------------- */
.modalBox {
	background: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: none;
}
.modalBox .mboxWrap {
	width: 640px;
	background: #fff;
	border: 4px solid #58be89;
	border-top: 15px solid #58be89;
	border-radius: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-sizing: border-box;
}
.modalBox .mboxWrap .mboxTitle {
	font-size: 24px;
	color: #fff;
	font-weight: bold;
	background: #58be89;
	margin-top: -1px;
	padding: 10px 20px 20px;
	text-align: center;
}
.modalBox.pink .mboxWrap {
	border: 4px solid #f27398;
	border-top: 15px solid #f27398;
}
.modalBox.pink .mboxWrap .mboxTitle {
	background: #f27398;
}
.modalBox .mboxWrap .mboxTitle span {
	font-size: 18px;
}
.modalBox .mboxWrap .mboxContent {
	padding: 35px;
}
.modalBox .mboxWrap .mboxContent .mboxImg {
	text-align: center;
	padding: 15px 0 50px;
}
.modalBox .mboxWrap .mboxContent .mboxImg img {
	max-width: 540px;
	display: inline-block;
}
.modalBox .mboxWrap .mboxContent .mboxImg p {
	font-size: 11px;
	text-align: center;
	color: #333333;
	margin-top: 10px;
}
.modalBox .mboxWrap .mboxClose {
	position: absolute;
	top: -75px;
	right: 0;
}

/* --------------- txtStrong -------------- */
.txtStrong-pink {
	font-weight: bold;
	font-size: 14px;
	font-size: 1.4rem;
	position: relative;
	color: #ad106e;
	padding-left: 15px;
	margin-bottom: 10px;
}
.txtStrong-pink:before {
	content: "";
	width: 12px;
	height: 12px;
	background: #ad106e;
	position: absolute;
	top: 5px;
	left: 0;
	border-radius: 20px;
}



/* ----------------------------- */
.listKome li {
	font-size: 11px;
	font-size: 1.1rem;
}
.caption {
	font-size: 11px;
	font-size: 1.1rem;
	margin-top: 5px;
}
.colorRed {
	color: #660000;
}
.specCharacter {
	text-indent: -8px;
}
.txtNowRap {
	white-space: nowrap
}


/* ----------------------------- */
#exhibition h5.head05 {
	border: none;
	color: #FFFFFF;
	text-align: center;
	padding: 10px;
	font-size: 18px;
	font-size: 1.8rem;
	margin-bottom: 15px;
	background: #217fc4;
}
#exhibition h5.head05 span {
	font-size: 14px;
	font-size: 1.4rem;
}
#exhibition h5.head05.orange {
	background-color: #f18c38;
}
#exhibition h5.head05.pink {
	background-color: #ad337d;
}
#exhibition h5.head0501{
	border:none;
	color:#98005d;
	padding:0;
	font-size:18px;
	font-size: 1.8rem;
	font-weight:bold;
	margin-bottom:20px;
	padding-bottom: 15px;
	background: url('../04/images/bg_head_01.png') repeat-x bottom left;
}

#exhibition h5.head0501 span.floor {
	color: #666666;
	font-size:14px;
	font-size: 1.4rem;
	margin-top: 3px;
}

/* ----------------------------- */
#exhibition .font_10 {
	font-size: 10px;
	font-size: 1rem;
}
#exhibition .font_11 {
	font-size: 11px;
	font-size: 1.1rem;
}
#exhibition .font_12 {
	font-size: 12px;
	font-size: 1.2rem;
}
#exhibition .font_13 {
	font-size: 13px;
	font-size: 1.3rem;
}
#exhibition .font_14 {
	font-size: 14px;
	font-size: 1.4rem;
}


/* ----------------------------- */
#exhibition .w110 {
    width: 110px;
}
#exhibition .w210 {
    width: 210px;
}
#exhibition .w220 {
    width: 220px;
}
#exhibition .w245 {
	width: 245px;
}
#exhibition .w300 {
    width: 300px;
}
#exhibition .w340 {
    width: 340px;
}
#exhibition .w355 {
    width: 355px;
}
#exhibition .w420 {
    width: 420px;
}
#exhibition .w475 {
	width: 475px;
}