@charset "utf-8";

/*
============================================================
top.css
------------------------------------------------------------

■ 全体 
■ シーン1
■ シーン2,3
■ シーン4

作成日：
作成者：kikuchi
更新日：
更新者：
バージョン： 1.0
会社名：Dynamite Brothers Syndicate

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

/* ---------------------------------------------------------
■ 全体
--------------------------------------------------------- */
html,
body,
#wrapper,
#contents,
#carouWrapper {
	width: 100%;
	height: 100%; }

.ofY {
	overflow-y: hidden; }




/* ---------------------------------------------------------
■ スライド
--------------------------------------------------------- */
.pagination {
	position: absolute;
	top: 50%;
	left: 0;
	margin: -80px 0 0;
	z-index: 10; }

.pagination a {
	position: relative;
	background: url(img/common/bg_pag.jpg) no-repeat;
	width: 40px;
	height: 40px;
	margin: 0;
	display: block; }

.pagination a:hover {
	background: url(img/common/bg_pag_on.jpg) no-repeat; }

.pagination a.selected {
	cursor: default;
	background: url(img/common/bg_pag_on.jpg) no-repeat; }

.pagination a img {
	display: none;
	position: absolute;
	top: 5px;
	left: 45px; }

.caroufredsel_wrapper {
	width: 100%!important; }

#carousel {
	width: 100%!important;
	height: 100%; }

.scene {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #ffffff; }

.arrowUp,
.arrowDown {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 10%;
	cursor: copy; }

.arrowUp { top: 0; }
.arrowDown { bottom: 0; }




/* ---------------------------------------------------------
■ シーン1
--------------------------------------------------------- */
#scene1 {
	text-align: center; }

.bgScene1 {
	position: relative; }


.ttl {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	margin: -168px 0 0 -120px;
	text-align: center;
	}

.ttl h2 {
	color: #661017;
	font-size: 350%;
	font-weight: bold;
	line-heigh: 58px;
	font-family: 'Maven Pro', Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

.btnView {
	margin: 16px 0 0; }


/* ニュース */
.recentNews {
	position: absolute;
	left: 10px;
	bottom: 0;
	padding: 10px;
	text-align: left;
	background: url(img/top/common/bg_white.png) repeat; }

.rnTtl {
	padding: 0 0 10px;
	color: #661017;
	font-size: 88%;
	font-weight: bold;
	line-height: 17px;
	font-family: 'Maven Pro', Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: url(img/top/news/bg_minLine.jpg) no-repeat 0 bottom; }

.rnMsg {
	padding:3px 0 0;
	color: #1a1a1a;
	font-size: 63%;
	line-height: 17px; }

.rnMsg a:hover {
	text-decoration:underline;
}


/* アイテム */
.slideItem {
	position: absolute;
	top: 0;
	right: -300px;
	width: 300px;
	height: 100%;
	padding: 58px 0 0;
	background-color: #ffffff; }

#scene1 .switch {
	position: absolute;
	top: 0;
	left: -40px;
	cursor: pointer; }

.itemArea {
	padding: 0 0 20px; }

.itemImg {
	text-align: center;
	line-height: 0; }

.itemName {
	margin: 3px 0;
	color: #661017;
	font-size: 63%;
	line-height: 14px; }

.itemBtnArea {
	overflow: hidden;
	width: 165px;
	margin: 0 auto;
	text-align: center; } /* sumally 対応 */

.itemBtnStore {
  float: left;  /* sumally 対応 */
	width: 93px;
	margin: 0 auto; } /* sumally 対応 */

.itemBtnS {
	text-align:center;
	width: 65px; 
	float:	left;
	padding-left:5px; }

.bx-pager {
	display: none; }

.bx-prev,
.bx-next {
	position: absolute;
	left: 50%;
	display: block;
	width: 200px;
	height: 20px;
	margin: 0 0 0 -100px;
	text-indent: -99999px;
	z-index: 1; }

.bx-prev {
	top: 20px;
	background: url(img/common/bg_slide_prev.jpg) no-repeat; }

.bx-next {
	bottom: 73px;
	background: url(img/common/bg_slide_next.jpg) no-repeat; }

.disabled {
	display: none; }

.bx-prev:hover,
.bx-next:hover {
	background-position: 0 -20px; }




/* ---------------------------------------------------------
■ シーン2, 3
--------------------------------------------------------- */
#scene2 .ttl,
#scene3 .ttl {
	width: 210px;
	margin: -102px 0 0 -105px; }

.gridArea {
	overflow: hidden;
	height: 100%; }

.grid {
	position: relative;
	float: left;
	width: 25%; /width: 24.9%;
	height: 50%; }

.gridImg {
	overflow: hidden;
	width: 100%;
	height: 100%;
	line-height: 0;
	text-align: center;
	zoom: 1; }

.gridImg img {
	position: relative; }

.detail {
	display: none;
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	background: url(img/top/common/bg_white.png) repeat; }

.detail_in {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -43px 0 0 -80px; }


.detail p {
	margin: 0 0 15px;
	color: #661017;
	font-size: 63%;
	line-height: 14px; }


/* スイッチ */
.switchArea {
	position: absolute;
	top: 0;
	right: -156px;
	height: 40px;
	background-color: #661017; }

.switchArea .switch {
	position: absolute;
	top: 0;
	left: -40px;
	line-height: 0;
	cursor: pointer; }

.switchArea ul {
	overflow: hidden;
	padding: 11px 15px 0 0; }

.switchArea li {
	display: inline-block; /display: inline; /zoom: 1;
	padding: 0 0 0;
	color: #ffffff;
	font-size: 88%;
	font-weight: bold;
	line-height: 17px;
	font-family: 'Maven Pro', Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

.switchList {
	cursor: pointer; }


/* ローダー */
.loader {
	display: none;
	position: absolute;
	top: 65%;
	left: 50%;
	margin: 0 0 0 -40px; }




/* ---------------------------------------------------------
■ シーン4
--------------------------------------------------------- */
#scene4 {
	position: relative;
	text-align: center;
	background-color: #ffffff; }

#scene4In {
	width: 950px;
	margin: 0 auto;
	padding: 0 25px;
	text-align: left; }

#scene4In h2 {
	padding: 60px 0 30px;
	color: #661017;
	font-size: 263%;
	font-weight: bold;
	line-height: 58px;
	text-align: center;
	font-family: 'Maven Pro', Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

.parentbox {
	overflow: hidden;
	padding: 0 0 30px;
	border-bottom: 1px dotted #a37074;
	zoom: 1; }

.parentbox h3 {
	color: #661017;
	font-size: 88%;
	font-weight: bold;
	line-height: 17px;
	text-align: left;
	font-family: 'Maven Pro', Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
	

/* 上段 shop news, link */
.leftBox {
	float: left;
	width: 620px; }

.ttlNews {
	overflow: hidden;
	margin-top: 30px;
	zoom: 1; }

.ttlNews h3 {
	float: left;
	width: 100px; }

.ttlNews p {
	float: right;
	width: 100px;
	color: #661017;
	font-size: 63%;
	font-weight: bold;
	line-height: 18px;
	text-align: right; }

.ttlNews p a {
	color: #661017; }

.listBox {
	overflow: hidden;
	padding: 20px 0 0; }

.newsLeft {
	float: left;
	width: 300px;/*DBS write 288px*/ }

.newsRight {
	float: right;
	width: 300px;/*DBS write 288px*/ }
.newsLeft img,.newsRight img{
	width:300px;
	height:185px;
}
.imgBox {
	line-height: 0; }

#newsTopArea .date {
	padding: 11px 0;
	color: #1a1a1a;
	font-size: 75%;
	line-height: 17px;
	background: url(img/top/news/bg_minLine.jpg) no-repeat 0 bottom; }

#newsTopArea .date a {
	color: #1a1a1a; }

.msg {
	padding: 10px 0 0;
	color: #1a1a1a;
	font-size: 75%;
	line-height: 17px; }

.msg a {
	color: #1a1a1a; }

.msg a:hover {
	text-decoration: underline; }


.rightbox {
	float: right;
	width: 288px; }

.rightbox h3 {
	margin-top: 30px; }

.mt12 { margin-top: 12px; }


/* 中段 fashion, life style */
#newsMiddleArea .listBoxin {
	overflow: hidden;
	float: left;
	width: 288px;
	margin-right: 43px; }

#newsMiddleArea .imgBox {
	float: left;
	width: 129px; }
#newsMiddleArea .imgBox img{
	width:127px;
	height:78px;
}
#newsMiddleArea .textBox {
	float: right;
	width: 149px; }

#newsMiddleArea .date {
	color: #1a1a1a;
	font-size: 63%;
	line-height: 12px; }

#newsMiddleArea .date a {
	color: #1a1a1a; }

#newsMiddleArea .msg {
	padding: 8px 0 0; }

#newsMiddleArea .nonM {
	margin: 0; }


/* 下段 INSTAGRAM, SOCIAL */
#newsBottomArea {
	padding: 0 0 60px;
	border: none; }

#instagram div {
	float: left;
	width: 140px;
	margin-right: 20px;
	line-height: 0; }

#instagram div.last {
	margin-right: 0; }



/* ソーシャル */
.socialTop {
	padding: 0 0 10px;
	border-bottom: 1px dotted #a37074; }

.socialBottom {
	padding: 10px 0 0; }

.socialBox {
	overflow: hidden;
	zoom: 1; }

.socialBox .imgBox {
	float: left;
	width: 58px; }

.socialBox .textBox {
	float: right;
	width: 220px; }

.socialBox .msg {
	padding: 0 0 3px; }

.socialBox .msg a {
	color: #661017; }