@charset "utf-8";
/* ===================================================================
CSS information : index.css(PC?)

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

.pc_block{
	display: block;
}

.sp_block{
	display: none;
}


/* bodyBackground
------------------------------------------------------------------- */
.body_background {
	height: 574px;
	position: absolute;
	top: -16px;
}
.body_background div {
	width: 0px;
	height: 0px;
	overflow: hidden;
}
.background_left {
	background: url(../../../sapporohassamu/img/bg-maple_left.gif) repeat-x right top;
	left: 0px;
}
.background_right {
	background: url(../../../sapporohassamu/img/bg-maple_right.gif) repeat-x left top;
	right: 0px;
}


/* headContainer
------------------------------------------------------------------- */
#header {
	width:960px;
}


/* footContainer
------------------------------------------------------------------- */
#footer {
	width:960px;
}



/* contentsContainer
------------------------------------------------------------------- */
#contentsContainer #contents {
	width:960px;
	margin:0 auto;
	position:relative;
}

#contentsContainer #contents:after{
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}


/* mainArea
------------------------------------------------------------------- */
#mainArea {
	width:716px;
	position:absolute;
	top:0px;
	left:0px;
	border-radius:5px;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
}

#contents .flashmain{
    height:330px;
}

/* flashArea
------------------------------------------------------------------- */
#flashArea {
	width:716px;
	height:330px;
}

/* mainSlider
------------------------------------------------------------------- */
#mainSlider {
	position:relative;
}

#mainVisual {
	width:716px;
	height:330px;
	overflow:hidden;
	position:relative;

	border-radius:5px 5px 0 0;
	-ms-border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	-o-border-radius:5px 5px 0 0;
}


#mainVisual ul:after{
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

#mainVisual li {
	width:716px;
	height:330px;
	float:left;
}

#mainVisual li a {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100)";
}


#mainVisual li a:hover {
	opacity:0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50)";
}


#thumbVisual {
	background-color:#ffffff;
	width:716px;
	height:96px;

	border-radius:0 0 5px 5px;
	-ms-border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius:0 0 5px 5px;
	-o-border-radius:0 0 5px 5px;
}

#thumbVisual .inner {
	width:617px;
	height:66px;
	overflow:hidden;
	margin:0 auto;
	padding-top:15px;
	position:relative;
}

#thumbVisual .inner ul.photo {
}

#thumbVisual .inner ul:after{
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

#thumbVisual .inner ul.photo li {
	width:143px;
	float:left;
	margin-right:15px;
	cursor:pointer;
	opacity:0.5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50)";
}

#thumbVisual .inner ul.photo li.current {
	opacity:1;
	filter:alpha(opacity=100);
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100)";
}

#thumbVisual #thumbFrame {
	position:absolute;
	width:143px;
	height:81px;
	background:url(../img/index/slider/img-frame.png) no-repeat 0% 0%;
	left:0px;
	bottom:0px;
	cursor:pointer;
}
#thumbIcn {
	display:none;
}

#mainSlider #prev {
	position:absolute;
	left:15px;
	bottom:39px;
	cursor:pointer;
}

#mainSlider #next {
	position:absolute;
	right:15px;
	bottom:39px;
	cursor:pointer;
}


/* scInfo
------------------------------------------------------------------- */
#scInfo {
	width:228px;
	background-color:#ffffff;
	float:right;
	margin-bottom:16px;

	border-radius:5px;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
}

#scInfo .inner {
	padding:15px;
}

#scInfo .inner dl {
	padding:18px 0 13px 0;
	border-top:1px dotted #bebebe;
}

#scInfo .inner dl.first {
	padding:7px 0 13px 0;
	border-top:none;
}

#scInfo .inner dt {
	font-weight:bold;
	padding-left:18px;
}
#scInfo .inner dd {
	padding-left:2px;
}

#scInfo .inner dt.time {
	background:url(../img/index/aside/ico-time.gif) no-repeat 0% 50%;
}

#scInfo .inner dt.place {
	background:url(../img/index/aside/ico-place.gif) no-repeat 0% 50%;
}

#scInfo .inner dt.tell {
	background:url(../img/index/aside/ico-tell.gif) no-repeat 0% 50%;
}


/* newsArea
------------------------------------------------------------------- */
#newsArea {
	width:732px;
	float:left;
	margin-bottom:38px;
	padding-top:446px;
}

.addBnr01 {
	padding-top:550px !important;
}

.addBnr02 {
	padding-top:662px !important;
}

.addBnr03 {
	padding-top:774px !important;
}

#contents .flashNews{
    padding-top:346px;
}

#newsArea .category_bar {
	display: block;
	margin-bottom: 12px;
}

#newsArea .pc_bar {
	display: inline;
}

#newsArea .tb_bar,
#newsArea .sp_bar {
	display: none;
}

#newsArea ul {
	overflow: hidden;
}

#newsArea #event,
#newsArea #campaign {
	margin-top: 18px;
}

#newsArea ul li {
	float: left;
	width:224px;
	margin:0 13px 12px 0;
	position:relative;
	background-color:#ffffff;
	cursor:pointer;

	/*border-radius:5px;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;*/
}

#newsArea ul .noElement {
	cursor: auto;
}

#newsArea #information ul li {
	border: #e45600 3px solid;
}

#newsArea #event ul li {
	border: #6ba200 3px solid;
}

#newsArea #campaign ul li {
	border: #009fc7 3px solid;
}

#newsArea #information ul .noElement,
#newsArea #event ul .noElement,
#newsArea #campaign ul .noElement {
	border: none;
	background: url(../img/index/logo-no_element.gif) no-repeat center center;
}

#newsArea ul li div {
	padding: 12px;
}

#newsArea ul li div .thumb {
	display: block;
	text-align: center;
	margin-bottom: 3px;
}

#newsArea ul li div p {
	margin-bottom: 10px;
}

#newsArea ul li div .link {
	display: block;
	text-align: right;
}

#newsArea ul li div .link a {
	padding-left: 10px;
}

#newsArea #information ul li div .link a {
	background: url(../img/index/ico-arrow_information.png) no-repeat left center;
}

#newsArea #event ul li div .link a {
	background: url(../img/index/ico-arrow_event.png) no-repeat left center;
}

#newsArea #campaign ul li div .link a {
	background: url(../img/index/ico-arrow_campaign.png) no-repeat left center;
}


.bnrArea div{
	margin-top: 10px;
/* 	position: relative; */
}



/*#newsArea ul li div.news,
#newsArea ul li div.event,
#newsArea ul li div.campaign {
	padding:20px 15px;
}

#newsArea ul li div h2 {
	font-size:117%;
	font-weight:bold;
	padding-bottom:10px;
}

#newsArea ul li div.news h2 {
	color:#e45600;
}

#newsArea ul li div.event h2 {
	color:#6ba200;
}

#newsArea ul li div.campaign h2 {
	color:#009fc7;
}

#newsArea ul li div span {
	display:block;
	position:absolute;
	top:0px;
	right:0px;
}

#newsArea ul li div dd.thumb {
	text-align:center;
	margin:10px 0;
}*/



/* sideArea
------------------------------------------------------------------- */
#sideArea {
	width:228px;
	float:right;
}

#sideArea ul li {
	width:228px;
	margin-bottom:16px;
}

#sideArea ul li img {
	width:228px !important;
}


.YoutubeWrapperPC {
  position: relative;
  margin: 20px 0;
  padding-bottom: 56.25%;
  padding-top: 30px;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
 
.YoutubeWrapperPC iframe, .YoutubeWrapper object, .YoutubeWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.YoutubeWrapperSP {
  display:none;
}


/* mailMagazine
------------------------------------------------------------------- */
#mailMagazine {
	width:228px !important;
	cursor:pointer;
}
#mailMagazine h3,
#mailMagazine h3 img {
	width:228px !important;
}

#mailMagazine .inner {
	width:228px !important;
	background:url(../img/index/aside/bg-email_bottom.gif) no-repeat left bottom #ffffff;
	padding:4px 0 62px 0;
}

#mailMagazine .inner p {
	width:194px;
	margin:0 auto;
}

#mailMagazine .inner p a {
	text-decoration:none;
	color:#333333;
}

#mailMagazine:hover {
	text-decoration: underline;
}

#mailMagazine:hover .inner p a {
	text-decoration: underline;
	color:#0088dd;
}


/* aeonGuidance
------------------------------------------------------------------- */
#aeonGuidance {
	background-color:#ffffff;
	padding-bottom:20px;

	border-radius:5px;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
}

#aeonGuidance dl {
	padding:20px 0 0 15px;
}

#aeonGuidance dt {
	font-weight:bold;
	font-size:117%;
	margin-bottom:5px;
	padding-left:16px;
	background:url(../img/index/aside/ico-guidance.gif) no-repeat 0% 50%;
}

/* adobe
------------------------------------------------------------------- */

#adobe ul {
	text-align:right;
}

#adobe ul li {
	display:inline;
	margin-left:10px;
	margin-bottom:0px;
}

#adobe ul li img {
	width:90px !important;
}


/* bnrArea
------------------------------------------------------------------- */
#bnrArea {
	width:716px;
	float:left;
}

#bnrArea:after{
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

#bnrArea ul li {
	float:left;
	padding:0 16px 16px 0;
}

/* spBnrArea
------------------------------------------------------------------- */

#spBnrArea {
	display:none;
}


/* special_modal
------------------------------------------------------------------- */
.special_modal {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 99999999;
}
.special_modal_bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0;
}
.special_modal_main {
	position: absolute;
	width: 750px;
	height: 420px;
	left: 50%;
	top: 50%;
	margin: -210px 0 0 -375px;
	overflow: hidden;
	-ms-border-radius: 10px;
	border-radius: 10px;
	background: #000;
	opacity: 0;
}
.special_modal_close {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -210px 0 0 302px;
	display: none;
}
.special_modal_close a {
	display: block;
	width: 50px;
	height: 50px;
}
.special_modal_close span {
	position: absolute;
	width: 50px;
	height: 10px;
	background: #fff;
	border-radius: 3px;
	margin-top: 21px;
	-ms-transition: 400ms;
	transition: 400ms;
}
.special_modal_close span:first-child {
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.special_modal_close span:last-child {
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.special_modal_close a:hover span {
	background: #aaa;
}
.special_modal_close a:hover span:first-child {
	-ms-ttransform: rotate(135deg);
	transform: rotate(135deg);
}
.special_modal_close a:hover span:last-child {
	-ms-ttransform: rotate(-135deg);
	transform: rotate(-135deg);
}

#mainArea .special_modal_main_contents {
	display: none;
}


/* first_modal
------------------------------------------------------------------- */
.first_modal {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 99999999;
}
.first_modal_bg {
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	cursor: pointer;
}
.first_modal_main {
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.first_modal_main_contents {
	overflow: hidden;
	-ms-border-radius: 10px;
	border-radius: 10px;
	background: #000;
}
.first_modal_close {
	position: absolute;
	top: -30px;
	right: 0;
}
.first_modal_close a {
	display: block;
	width: 30px;
	height: 30px;
	transition: 170ms;
}
.first_modal_close a:hover {
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
}

/* #language_type
------------------------------------------------------------------- */
#language_type {
  padding: 9px 0 12px;
}
#language_type .inner {
    width: 960px;
    margin: 0 auto;
    font-size: 76%;
}
#language_type:after {
  content:".";display:block;visibility:hidden;height:0.1px;font-size:0.1em;line-height:0;clear:both;
}
#language_type ul{
  float: right;
  width: 520px;
  zoom:1;
}
#language_type ul:after {
  content:".";display:block;visibility:hidden;height:0.1px;font-size:0.1em;line-height:0;clear:both;
}
#language_type ul li{
  float: left;
  margin: 19px 0 0 5px;
  width: 100px;
}

#language_type ul li:first-child{
  margin-left: 0;
}