@charset "utf-8";


/* ------------------------------
    index
------------------------------ */
.storiesIndex{
	padding: 0 0 12px 0 !important;
}
.storiesIndex h1.indexTitle{
	margin-bottom: 9px !important;
}
.storiesIndex p{
	margin: 0 0 34px 0 !important;
}

.storyLinkBox{
	background: url("/global/stories/img/bg-stories-index.gif") no-repeat center center;
	width: 820px;
	height: 460px;
	margin: 20px 0;
	position: relative;
}

.storyLinkBox dl{
	margin: 0 -15px 0 0;
	padding: 0;
	overflow: hidden;
}

body.lang-ja .storyLinkBox dl { width: 378px; }
body.lang-en .storyLinkBox dl { width: 391px; }

.storyLinkBox dt{
	margin: 0;
	padding: 0;
}
.storyLinkBox dd{
	margin: 0 15px 0 0;
	padding: 15px 0;
	float: left;
}

#storyPart1{
	position: absolute;
	top: 10px;
	left: 0;
}
#storyPart2{
	position: absolute;
	top: 10px;
	right: 0;
}
#storyPart3{
	position: absolute;
	bottom: 10px;
	left: 0;
}
#storyPart4{
	position: absolute;
	bottom: 10px;
	right: 0;
}

.bnCampaignBox{
	background: url("/global/common/img/bg-box01.gif") no-repeat left top;
	width: 820px;
	margin: 30px 0;
	padding-top: 14px;
}
.bnCampaignBox dl{
	background: url("/global/common/img/bg-box01.gif") no-repeat left bottom;
	width: 780px;
	margin: 0;
	padding: 0 20px 14px 20px;
}
.bnCampaignBox dt{
	margin: 0 0 10px 0;
	padding: 0;
}
.bnCampaignBox dd{
	margin: 0;
	padding: 0;
}

/* ------------------------------
    detail
------------------------------ */

.contentsHeaderBlock p.storiesBackBtn{
	position: absolute;
	top: 0;
	right: 0;
}

/* ---------- gliderBox ---------- */
.gliderBox{
	width: 820px;
	background: url("/global/stories/img/bg-glider-nav.gif") no-repeat left bottom;
	margin: 0;
	display: none;
}
.jcarousel-container-horizontal .gliderBox {
	display: block;
}
.gliderBox ul{
	margin: 0;
	overflow: hidden;
}
.gliderShiretoko{
	float: left;
}
.gliderFirefox{
	float: right;
}
.gliderNextStory{
	float: right;
}
.gliderContents{
	font-size: 14px;
	line-height: 1.7;
	position: relative;
}


.bottomGlider{
	background: none;
}

/* ---------- otherStoryBox ---------- */
.otherStoryBox{
	width: 820px;
	overflow: hidden;
	background: url("/global/common/img/line_dotted.gif") repeat-x left top;
	margin: 20px 0;
}
.otherStoryBox dt,
.otherStoryBox dd,
.otherStoryBox ul{
	margin: 0;
	padding: 0;
}
.otherStoryBox dt{
	margin: 1em 0;
}
.otherStoryLink{
	position: relative;
	height: 40px;
}
.otherStoryLink li.story01{
	position: absolute;
	top: 0;
	left: 0;
}
.otherStoryLink li.story02{
	position: absolute;
	top: 0;
	left: 205px;
}
.otherStoryLink li.story03{
	position: absolute;
	top: 0;
	left: 410px;
}
.otherStoryLink li.story04{
	position: absolute;
	top: 0;
	left: 615px;
}


/* == contentsBox ------------------------------------------------------------------ */
.contentsBox{
	width: 820px;
	margin: .8em 0;
	overflow: hidden;
}
.imgRight .txtBox{
	float: left;
}
.imgRight .photoBox{
	float: right;
	margin: 0 0 0 15px;
}
.imgLeft .txtBox{
	float: right;
}
.imgLeft .photoBox{
	float: left;
	margin: 0 15px 0 0;
}
.imgFull .photoBox{
	width: 828px;
	margin: 10px -10px 10px 0;
	overflow: hidden;
}
.imgFull .photoBox li{
	margin: 0 10px 0 0;
	overflow: hidden;
	width: 266px;
	float: left;
	text-align: center;
}

.w310 .txtBox{
	width: 495px;
}
.w310 .photoBox{
	width: 310px;
}

.w266 .txtBox{
	width: 539px;
}
.w266 .photoBox{
	width: 266px;
}

.w180 .txtBox{
	width: 625px;
}
.w180 .photoBox{
	width: 180px;
}

.photoBox .caption{
	display: block;
	text-align: center;
}

/* ---------- borderBox ---------- */
.borderBoxBase{
	width: 790px;
	margin: 1em 0;
	padding: 0 10px;
	overflow: hidden;
}
.borderBoxBase p{
	margin: .5em 0 !important;
	line-height: 1.5;
}
.borderBoxBase .txtBox h3{
	margin: .8em 0 !important;
}

.borderBrown{
	background: #ffffff;
	border: 1px solid #7f6e5c;
}

.w253 .txtBox{
	width: 522px;
}
.w253 .photoBox{
	width: 253px;
}


/* ---------- activitiesBox ---------- */
.activitiesBox{
	background: url("/global/stories/img/bg_activitiesbox.gif") no-repeat center center;
	width: 820px;
	height: 142px;
	position: relative;
	margin: 20px 0;
}
.activitiesBox p.activitiesTxt{
	position: absolute;
	top: 27px;
	left: 20px;
	margin: 0;
	padding: 0;
}
.activitiesBox p.activitiesBtn{
	position: absolute;
	top: 67px;
	right: 27px;
	margin: 0;
	padding: 0;
}