@charset "UTF-8";

/* 旧サイトの共通リセット(default.css)が img { vertical-align: bottom; } を
   指定していたため、このページの画像配置計算はそれを前提にしている。
   テーマ本体のリセットCSSにはこの指定がないため、ここで明示的に補う。 */
#wrapper img {
	vertical-align: bottom;
}

body {
	background : url("../images/titicaca-brand/common-shared/bg.gif") repeat left top;
}

/* style.cssの#wrap-btm{margin-top:120px}はテーマ全体で無条件に効く汎用ルールで、
   本番の実際のページ（旧: 独立した静的HTML、共通のstyle.cssを読み込んでいなかった）
   にはこの余白は無い（margin-top:0pxを実機で確認済み）。get_header()化に伴い
   style.cssを読み込むようになったことで意図せず追加されてしまっていたため打ち消す。 */
body.page-titicaca #wrap-btm {
	margin-top: 0;
}
#wrapper {position:relative;min-width:990px;height:100%;}
#wrapper {width:100%;}

/* #wrap-top・header・#menu li div.sub は元々このページ専用の複製ヘッダー用
   スタイルだった。get_header()で共通ヘッダーを使うようになったため、
   共通ヘッダーの配色を上書きしないようここでは指定しない。 */
.animeBG{
	position:absolute;
	width:100%;
	overflow:hidden;
	z-index:0;
}
.animeBG .ani_ss{
	position:relative;
	width:1600px;
	margin:0 auto;
}
.animeBG .ani_ss div{
	position:absolute;
}
.s_wrap{
	position:relative;
	width:1600px;
	margin:0 auto;
	text-align:center;
	z-index:2;
}
/*--main--------------------*/
#section_INTRO{
	position:relative;
	width:100%;
	height:810px;
	margin-top:55px;
	text-align:center;
	overflow:hidden;
}
#visual{
	width:100%;
	height:777px;
	overflow:hidden;
}
#visual .visual_slide {
	position:relative;
	width:100%;
	height:777px;
}
#visual .visual_slide .img{
	position:absolute;
	width:1680px;
	height:777px;
	margin:0;
	display:none;
}
#section_INTRO .obi{
	position:absolute;
	width:100%;
	margin:0 auto 0;
	height:145px;
	bottom:33px;
	z-index:17;
	background : url("../images/titicaca-brand/slide/slide_footer_bg.png") repeat-x left top;	
}
#section_INTRO .obi .obi_title{
	width:888px;
	margin:0 auto;
	padding-top:39px;
}
#section_INTRO .scroll_img{
	position:absolute;
	width:100%;
	margin:0 auto;
	bottom:0;
	z-index:20;
}
#section_INTRO .scroll_img .ss{
	width:134px;
	margin:0 auto 0px;
	cursor:pointer;
}

.wakuBottom{
	position:absolute;
	width:100%;
	height:33px;
	background : url("../images/titicaca-brand/common/line_sisyuu.png") repeat-x left top;	
	bottom:0;
	z-index:19;
}
#hata{
	position:absolute;
	width:100%;
	height:250px;
	margin:0 auto 0;
	background : url("../images/titicaca-brand/concept/hata.png") no-repeat center top;	
	z-index:4;
}
.dot_line{
	height:32px;
	width:100%;
	background: url("../images/titicaca-brand/common/line_hata.png") repeat-x left top;
}
.sisyuu{
	width:712px;
	margin:23px auto 0;
}
/*--content--------------------*/
#contents {
	width:100%;
}
#contents .inner{
	width:100%;
	margin:0 auto;
}
/*--concept--------------------*/
#concept{
	position:relative;
	width:100%;
	min-width:990px;
	overflow:hidden;	
	height:1173px;
	margin:0 auto;
	text-align:center;
	padding-top:78px;
	z-index:3;
}
#concept .sub1{
	width:909px;
	margin:46px auto 0;
}
#concept .txt{
	width:653px;
	margin:36px auto 0;
}
#concept .box{
	width:1240px;
	margin:77px auto 0;
}

#concept .box .ani10{
	position:absolute;
	left:324px;
	top:681px;
}
#concept .box .ani11{
	position:absolute;
	left:665px;
	top:715px;
}
#concept .box .ani12{
	position:absolute;
	left:1002px;
	top:700px;
}


#concept .animeBG .ani_ss{
	height:1170px;
	background : url("../images/titicaca-brand/concept/concept_bg.png") no-repeat 161px 222px;
}
#concept .animeBG .ani1{
	left:312px;
	top:415px;
}
#concept .animeBG .ani2{
	left:1309px;
	top:315px;
}
#concept .animeBG .ani3{
	left:106px;
	top:575px;
}
#concept .animeBG .ani4{
	left:1155px;
	top:475px;
}
#concept .animeBG .ani5{
	left:1334px;
	top:580px;
}
#concept .animeBG .ani6{
	left:1560px;
	top:1046px;
}
#concept .animeBG .ani7{
	left:72px;
	top:1045px;
}
#concept .animeBG .ani8{
	left:1496px;
	top:595px;
}
#concept .animeBG .ani9{
	left:442px;
	top:580px;
}

/*--item--------------------*/
#item{
	width:100%;
	min-width:990px;
	overflow:hidden;
	text-align:center;
}
#item h2.title{
	margin-top:78px;
}
#item .sisyuu{
	margin-top:18px;
}
#item .imgBox{
	width:1090px;
	height:1346px;
	margin:0 auto 0;
	/background-color: rgba(255,0,0,0.5);
}
#item .imgBox div{
	position:absolute;
	cursor:pointer;
}
#item .imgBox .card1{
	left:266px;
	top:248px;
}
#item .imgBox .card2{
	left:646px;
	top:212px;
}
#item .imgBox .card3{
	left:984px;
	top:253px;
}
#item .imgBox .card4{
	left:266px;
	top:857px;
}
#item .imgBox .card5{
	left:646px;
	top:862px;
}
#item .imgBox .card6{
	left:984px;
	top:860px;
}
#item .link{
	width:670px;
	margin:0 auto 79px;
	display:block;
	overflow:hidden;
}
#item .link a img{
	margin-left:0px;
}
#item .link a:hover img{
	margin-left:-670px;
}
#item .animeBG .ani_ss{
	height:1644px;
	background : url("../images/titicaca-brand/item/item_bg.png") no-repeat 102px 612px;
}
#item .animeBG .ani1{
	left:1315px;
	top:300px;
}
#item .animeBG .ani2{
	left:600px;
	top:280px;
}
#item .animeBG .ani3{
	left:160px;
	top:1060px;
}
#item .animeBG .ani4{
	left:1514px;
	top:860px;
}
#item .animeBG .ani5{
	left:1345px;
	top:715px;
}
#item .animeBG .ani6{
	left:190px;
	top:583px;
}
#item .animeBG .ani7{
	left:150px;
	top:752px;
}
#item .animeBG .ani8{
	left:1405px;
	top:140px;
}
#item .animeBG .ani9{
	left:125px;
	top:260px;
}
#item .animeBG .ani10{
	left:40px;
	top:1200px;
}
#item .animeBG .ani11{
	left:300px;
	top:160px;
}
#item .animeBG .ani12{
	left:680px;
	top:905px;
}
#item .animeBG .ani13{
	left:945px;
	top:315px;
}
#item .animeBG .ani14{
	left:860px;
	top:800px;
}
#item .animeBG .ani15{
	left:170px;
	top:1500px;
}
#item .animeBG .ani16{
	left:1270px;
	top:1550px;
}
#item .animeBG .ani17{
	left:1373px;
	top:1225px;
}
#item .animeBG .ani18{
	left:1260px;
	top:1060px;
}
#item .animeBG .ani19{
	left:490px;
	top:810px;
}
#item .animeBG .ani20{
	left:1160px;
	top:850px;
}
/*--shop--------------------*/
#shop{
	width:100%;
	min-width:990px;
	overflow:hidden;
	margin:0 auto;
	text-align:center;
	padding-bottom:40px;
}
#shop h2.title{
	margin-top:80px;
}
#shop .sisyuu{
	margin-top:20px;
}
#shop .img{
	width:740px;
	margin:49px auto 46px;
}
#shop .btns{
	width:1040px;
	height:228px;
	margin:0 auto 180px;
}
#shop .btns .fukidashi{
	float:left;
	margin-top:35px;
	margin-left:5px;
}
#shop .btns .fukidashi .dog{
	margin:15px 0 0 25px;
}
#shop .btns .fukidashi .dog span{
	margin-right:17px;
}
#shop .btns ul{
	float:left;
	margin-left:28px;
	width:668px;
}
#shop .btns li{
	float:left;
	margin-left:9px;
	margin-bottom:10px;
}
#shop .btns li.area1,
#shop .btns li.area5{
	margin-left:0px;
}
#shop .btns li.area3,
#shop .btns li.area7{
	margin-left:13px;
}
#shop .btns li.area4,
#shop .btns li.area8{
	margin-left:14px;
}
#shop .btns div.area9{
	margin-left:0px;
	padding-top:64px;
}
/*
 * front-page.php（top.css）の#shop .btns.no-kaigaiと同じパターン。
 * 本来は.fukidashi＋ul（668px）＋area9で1040px幅を埋める設計のため、
 * area9（海外）が店舗0件で非表示の間は右側だけ空いて左寄りに見えてしまう。
 * キャラクター＋ボタン一覧をまとめてセンタリングして見た目を整える
 * （店舗が追加されarea9が復活すれば、.no-kaigai自体が付かなくなり
 * 元の見た目に自動で戻る）。
 */
#shop .btns.no-kaigai{
	display:flex;
	justify-content:center;
	align-items:flex-start;
}
#shop .btns.no-kaigai .fukidashi{
	float:none;
}
#shop .btns.no-kaigai ul{
	float:none;
	margin-left:40px;
}
#shop .animeBG .ani_ss{
	height:1124px;
	background : url("../images/titicaca-brand/shop/shop_bg.png") no-repeat 170px 398px;
}
#shop .animeBG .ani1{
	left:252px;
	top:145px;
}
#shop .animeBG .ani2{
	left:1270px;
	top:340px;
}
#shop .animeBG .ani3{
	left:16px;
	top:270px;
}
#shop .animeBG .ani4{
	left:1525px;
	top:950px;
}
#shop .animeBG .ani5{
	left:1434px;
	top:140px;
}
#shop .animeBG .ani6{
	left:1396px;
	top:414px;
}
#shop .animeBG .ani7{
	left:1303px;
	top:670px;
}
#shop .animeBG .ani8{
	left:249px;
	top:353px;
}
#shop .animeBG .ani9{
	left:90px;
	top:705px;
}
#shop .animeBG .ani10{
	left:163px;
	top:880px;
}


/*--modal--------------------*/
#modal{
   	width: 100%;
    height: 100%;
	top:0;
	left:0;
    position: fixed;
    z-index: 100;
	display:none;
}
#modal .bg{
	position:absolute;
   	width: 100%;
    height: 100%;
	background:#000;
	opacity:0.5;
	filter: alpha(opacity=50); /* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
.slide{
	position:absolute;
	width:700px;
	height:534px;
    top: 50%;
    left: 50%;
    margin-top: -267px;
    margin-left: -350px;
	background : url("../images/titicaca-brand/pop/pop_bg.png") repeat left top;
	display:none;
}
#modal .box{
	margin:7px;
}

#modal .box .btn{
	position:absolute;
	float:right;
	right:188px;
	bottom:59px;
}
#modal .box .btn a{
	width:322px;
	height:64px;
	display:block;
	overflow:hidden;
}
#modal .box .btn a img{
	margin-left:0px;
}
#modal .box .btn a:hover img{
	margin-left:-322px;
}
#modal .arr{
	position:absolute;
	float:right;
	right:70px;
	bottom:70px;
	width:126px;
}
#modal .close{
	position:absolute;
	float:right;
	right:17px;
	top:18px;
}
#modal .close a{
	width:33px;
	height:33px;
	display:block;
	overflow:hidden;
}
#modal .close a img{
	margin-left:0px;
}
#modal .close a:hover img{
	margin-left:-33px;
}
#modal .arr1{
	position:absolute;
	float:left;
	left:-46px;
	top:237px;
}
#modal .arr2{
	position:absolute;
	float:right;
	right:-46px;
	top:237px;
}
#modal .arr1 a,
#modal .arr2 a{
	width:46px;
	height:65px;
	display:block;
	overflow:hidden;
}
#modal .arr1 a img,
#modal .arr2 a img{
	margin-top:0px;
}
#modal .arr1 a:hover img,
#modal .arr2 a:hover img{
	margin-top:-65px;
}
#modal .arr li:first-child{
	margin-left:0px;
}


/*--op--------------------*/
#fade {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
	/display: none;
}