@charset "utf-8";
/* CSS Document */

/*共通*/
.contentsInr{margin:0 auto 40px;}

#top .contentsInr,#town .contentsInr,#tour .contentsInr{position:relative;}

/*MVアニメーション設定*/
.bounce {animation-duration: 8s;animation-iteration-count: infinite;}
.bounce.fired {animation-name: bounce;}
.bounce_1st { animation-delay: 0s; }
.bounce_2nd { animation-delay: 0.3s; }
.bounce_3rd { animation-delay: 0.6s; }
.bounce_4th { animation-delay: 0.9s; }
.bounce_5th { animation-delay: 1.2s; }
.bounce_6th { animation-delay: 1.5s; }
.bounce_7th { animation-delay: 1.8s; }
.bounce_8th { animation-delay: 2.1s; }

@keyframes bounce {
	0% { transform: translate3d(0,0,0); }
	4% { transform: translate3d(0,-20px,0); }
	8% { transform: translate3d(0,10px,0); }
	12% { transform: translate3d(0,0,0); }
	100% { transform: translate3d(0,0,0); }
}
/*トップ*/
#top #mvBox h2 img{ position:absolute;}
#top #mvBox h2 #mv_ttl_txt01{top: 0;left: 0;}
#top #mvBox h2 #mv_ttl_txt02{top: 0;left: 85px;}
#top #mvBox h2 #mv_ttl_txt03{top: 0;left: 170px;}
#top #mvBox h2 #mv_ttl_txt04{top: 12px;left: 242px;}
#top #mvBox h2 #mv_ttl_txt05{top: 4px;left: 318px;}
#top #mvBox h2 #mv_ttl_txt06{top: 0;left: 390px;}
#top #mvBox h2 #mv_ttl_txt07{top: 12px;left: 476px;}
#top #mvBox h2 #mv_ttl_txt08{top: 37px;left: 543px;}
#top #mvBox h2 #mv_ttl01{left: 604px;}
#top #mvBox h2 #mv_ttl02{top: 114px;}
#top #mvBox h2 #star01{top: 140px;left: 357px;}
#top #mvBox h2 #star02{top: 108px;left: 392px;}

#top{width:100%;height:1345px;padding:0 0 0 0;background:url(../img/bg_top.jpg)  no-repeat center;}
#top .contentsInr h2{margin:60px 0 0 30px;}
#top .contentsInr #sorakarachan{position:absolute; top:60px; right:40px; z-index:4;} 
#top .contentsInr #heightInfo p{position:absolute; z-index:3;}
#top .contentsInr #heightInfo #heightInfo_01{top:256px; left:500px;}
#top .contentsInr #heightInfo #heightInfo_02{top:540px; left:330px;}
#top .contentsInr #heightInfo #heightInfo_03{top:670px; left:536px;}
#top .contentsInr .infoWrap{z-index:2;}
#top .contentsInr .infoWrap .infoBox{
	position:absolute;
	width:360px;
	padding:20px 20px 20px;
    background:/*ボックスのベベル設定*/
        -webkit-linear-gradient(45deg,  transparent 0, #fff 0),
	    -webkit-linear-gradient(135deg, transparent 40px, #fff 40px),
        -webkit-linear-gradient(225deg, transparent 0, #fff 0),
	    -webkit-linear-gradient(315deg, transparent 0, #fff 0);
    background:
        -moz-linear-gradient(45deg,  transparent 0, #fff 0),
	    -moz-linear-gradient(135deg, transparent 40px, #fff 40px),
        -moz-linear-gradient(225deg, transparent 0, #fff 0),
	    -moz-linear-gradient(315deg, transparent 0, #fff 0);
    background:
        -o-linear-gradient(45deg,  transparent 0, #fff 0),
	    -o-linear-gradient(135deg, transparent 40px, #fff 40px),
        -o-linear-gradient(225deg, transparent 0, #fff 0),
	    -o-linear-gradient(315deg, transparent 0, #fff 0);
    background:
        -ms-linear-gradient(45deg,  transparent 0, #fff 0),
	    -ms-linear-gradient(135deg, transparent 40px, #fff 40px),
        -ms-linear-gradient(225deg, transparent 0, #fff 0),
	    -ms-linear-gradient(315deg, transparent 0, #fff 0);
	background-position: bottom left, bottom right, top right, top left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}
#top .contentsInr .infoWrap .infoBox h3{text-align:center;}
#top .contentsInr .infoWrap .infoBox .pic{text-align:center;}
#top .contentsInr .infoWrap .infoBox p{ margin-top:6px;}
#top .contentsInr .infoWrap .infoBox_01{top:290px;right:0;}
#top .contentsInr .infoWrap .infoBox_02{top:430px;left:0;}
#top .contentsInr .infoWrap .infoBox_03{top:580px;right:0;}
#top .contentsInr .infoWrap .infoBox_04{top:870px;left:0;}
#pic_skytree{text-align:center; margin-top:250px;}

/*トップ下黄色*/
#yellowZoon{width:100%;height:274px;margin-top:-172px;background:#ffef41;}

/*スカイツリータウン*/
#town .parts_town{margin-top:-110px;}
#town .contentsInr{ padding-top:20px;background:url(../img/bg_town.jpg) no-repeat right 44px top 255px; height:854px;}
#town .contentsInr #pic01{ position:absolute; top:306px; left:710px;}
#town .contentsInr #pic02{ position:absolute; top:420px; left:353px;}

/*マップ*/
.map {font-size:15px;}
.map .ex{position:absolute;top:326px;}
.map .place{position:absolute;top:430px;}
.map .place li{/*width:463px;*/margin-top:4px;display:block;background-color:#ccf5ff;height:32px;line-height:32px;border-radius:8px;padding:0 16px 0 6px;}
.map .place li#tenku{height:62px;line-height:32px;}
.map .place li > .place_mark.num_01a{top:306px;left:500px;}
.map .place li > .place_mark.num_01b{top:306px;left:778px;}
.map .place li > .place_mark.num_02{top:260px;left:510px;}
.map .place li > .place_mark.num_03{top:274px;left:426px;}
.map .place li > .place_mark.num_04{top:335px;left:700px;}
.map .place li > .place_mark.num_05{top:256px;left:782px;}
.map .place li > .place_mark.num_06{top:312px;left:614px;}
.map .place li > .place_mark.num_07{top:248px;left:675px;}
.map .place li > .place_mark.num_08{top:220px;left:856px;}
.map .place li > .place_mark.num_09{top:270px;left:745px;}
.map .place li > .place_num{display:inline-block;background-color:#fff;color:#333;width:24px;height:24px;border-radius:50%;line-height:26px;font-size:15px;text-align:center; font-weight:bold; border:1px solid #333;margin-right:4px;}
.map .place li > .place_mark{position:absolute;display:inline-block;background-color:#fff;color:#333;width:33px;height:33px;border-radius:50%;line-height:33px;font-size:22px;text-align:center; font-weight:bold; border:1px solid #333;box-shadow:-2px 2px 1px rgba(0,0,0,.2);}
/*マップアニメーション設定　17下沖縄をあそぼうより引用*/
.map .place li:hover{color:#cc0000;}
.map .place li:hover > .place_mark{color:#333;background-color:#ffef41;z-index:10;
-webkit-animation-duration:1s;animation-duration:1s;
-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes tada {
	0% {
		-webkit-transform:scale3d(1,1,1);
		transform:scale3d(1,1,1)
	}
	10%,20% {
		-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-5deg);
		transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-5deg)
	}
	30%,50%,70%,90% {
		-webkit-transform:scale3d(1.4,1.4,1.4) rotate3d(0,0,1,5deg);
		transform:scale3d(1.4,1.4,1.4) rotate3d(0,0,1,5deg)
	}
	40%,60%,80% {
		-webkit-transform:scale3d(1.4,1.4,1.4) rotate3d(0,0,1,-5deg);
		transform:scale3d(1.4,1.4,1.4) rotate3d(0,0,1,-5deg)
	}
	100% {
		-webkit-transform:scale3d(1.4,1.4,1.4);
		transform:scale3d(1.4,1.4,1.4)
	}
}
@keyframes tada {
	0% {
		-webkit-transform:scale3d(1,1,1);
		transform:scale3d(1,1,1)
	}
	10%{
		-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-5deg);
		transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-5deg)
	}
	30%,50%,70%,90% {
		-webkit-transform:scale3d(1.4,1.4,1.4) rotate3d(0,0,1,5deg);
		transform:scale3d(1.4,1.4,1.4) rotate3d(0,0,1,5deg)
	}
	40%,60%,80% {
		-webkit-transform:scale3d(1.4,1.4,1.4) rotate3d(0,0,1,-5deg);
		transform:scale3d(1.4,1.4,1.4) rotate3d(0,0,1,-5deg)
	}
	100% {
		-webkit-transform:scale3d(1.4,1.4,1.4);
		transform:scale3d(1.4,1.4,1.4)
	}
}
.map .place li:hover > .place_mark {-webkit-animation-name:tada;animation-name:tada}
.map .place li:hover {color:#333; background-color:#ffef41;}

/*商品紹介*/
#tour{ margin-top:140px; background:#ffef41;}
#tour .parts_town img{margin-top:-90px;}
#tour .tabList{ border-bottom:4px solid #fff;}
#tour .tabList img{ vertical-align:bottom;}
#tour .opBox { margin-top:80px;}
#parts01 {position:absolute; top: -43px; right:0;}
#parts02 {position:absolute; top: 160px; left:0;}
#parts03 {position:absolute; /*top: 220px;*/ left:0;}
#tour .contentsInr .tourBox{ padding:5px 0 25px 0;background:#fff; text-align:center;}
#tour .contentsInr .tourBox h4{ font-size:27px; font-weight:bold;}
#tour .contentsInr .tourBox .copy{ margin-top:20px; padding:0 8px; font-size:16px; display: inline-block; background-color:#ccf5ff;}
#tour .contentsInr .tourBox .linkBox{ width:650px; margin:20px auto 0;/* padding-top:10px; border-top: 1px solid #ffef41;*/}
#tour .contentsInr .tourBox .linkBox li{width:280px; margin-top:10px; padding:10px; font-size:19px; background-color:#cc0000;position: relative;border-radius: 6px;box-shadow: 0 3px 0 #d0d0d0;}
#tour .contentsInr .tourBox .linkBox li:active {top: 3px;box-shadow: none;}
/*#tour .contentsInr .tourBox .linkBox li:hover {filter:alpha(opacity=70);opacity:0.7;}*/
#tour .contentsInr .tourBox .linkBox li a{display:block; text-decoration:none;}
#tour .contentsInr .tourBox .linkBox li a .txtLink_01{padding-left: 20px; color:#fff; background: url(/commonY15/img/icon_arrow_right_white_01.png) 0 10px no-repeat;}
#tour .contentsInr .tourBox .linkBox li a .iconOther_01{padding-left: 20px; color:#fff; background: url(/commonY15/img/icon_ext_white_01.png) 0 10px no-repeat;}
#tour .bottom img{ vertical-align:bottom;}
.tel{margin-top: 10px; font-size: 16px; font-weight: bold; color: #cc0000;}
.kantoTour { justify-content: space-between; padding: 0 150px;}
.tourBtn { background-color:#005787; display: block; text-align: center; padding: 36px; color: #fff;}
.pamphlet{ background-color:#005787; display: block; text-align: center; padding: 18px 30px; color: #fff;}
/*.pamphletTxt {font-size: 18px; padding: 3px 30px 3px 30px; border-radius: 5px; background: #fff; color: #005787; border:2px solid #3333;}*/