﻿@charset "utf-8";
/*!
 * home CSS
 * ---------------------------------------------
 * ホームのみ適用されるCSSです
 */

/* sprites */
#mainVisual .mvNav .icon, #main #fbPage h1, #main .twitterBtn a {
	background-image: url(../img/base/sprites_01.png); 
	background-repeat: no-repeat;
}

/* mainVisual */
#mainVisual {
	position: relative;
	/* padding: 1.6em 0 3.2em; */
	background:#F0E68C;
/*	background-image: url(../img/main_img_bg.jpg);   add by matsuo */
}

#mainVisual #mvContainer {
	overflow: hidden;
	position: relative;
/*	width: 960px; */ /* 他の施設は横１００％にてwidth指定なし */

	height: 320px; /* 240 --> 320 by matsuo 20160221*/
	margin: 0 auto;
/*	border-style: solid;
	border-color: #FFF; 
	border-width: 3px;
	-webkit-box-shadow: 2px 3px 20px rgba(0, 0, 0, .3);
	-moz-box-shadow: 2px 3px 20px rgba(0, 0, 0, .3);
	-ms-box-shadow: 2px 3px 20px rgba(0, 0, 0, .3);
	-o-box-shadow: 2px 3px 20px rgba(0, 0, 0, .3);
	box-shadow: 2px 3px 20px rgba(0, 0, 0, .3);
*/
}

#mainVisual .mvSlide {
	position: absolute;
	margin-top:15px;
	overflow: hidden;
	width: 100%;
	height: 320px; /* 240 --> 290 by matsuo 20160221 */
	top: 10px;
	left: -960px;
	z-index: 101;
}

#mainVisual .mvSlide img {
	display: none;
}

#mainVisual .mvSlide a div {
	height: 100%;
	width: 100%;
	background-position:center;
}

#mainVisual #mvLoading {
	position: absolute;
	width: 48px;
	height: 48px;
	top: 50%;
	left: 50%;
	background: url(../img/base/loading_ico.gif) no-repeat 50% 50%;
	margin: -24px 0 0 -24px;
	z-index: 120;
}

#mainVisual .mvNav {
	position: absolute;
	width: 48px;
	height: 320px; /* 240 --> 320 by matsuo 20160221*/
	top: 0;
	opacity: .5;
	cursor: pointer;
}

#mainVisual .mvNav .icon {
	position: absolute;
	overflow: hidden;
	width: 38px;
	height: 50px;
	top: 50%;
	left: 5px;
	margin-top: -25px;
	text-indent: -999px;
	opacity: 1;
}

#mainVisual #mvPrev {
	left: 0;
	z-index: 122;
}

#mainVisual #mvPrev .icon {
	background-position: 0 -100px;
}

#mainVisual #mvNext {
	right: 0;
	z-index: 123;
}

#mainVisual #mvNext .icon {
	background-position: -190px -100px;
}

/* contents */
#wrapper #main {
	float: none;
	width: auto;
	padding-bottom: 3.2em;
}

#main #contentsWrapper {
	zoom: 1;
}

#main #contentsWrapper:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	font-size: 0;
}

#main #contentsWrapper.layout01 #contents01 {

}


 /* コンテンツ02, 03 は使わない  by matsuo 20160126 
#main #contentsWrapper.layout01 #contents02 {
	float: right;
	width: 224px;
}

#main #contentsWrapper.layout01 #contents03 {
	clear: both;
}
*/



/* pickup */
#main #pickup {
	margin-bottom: 3.2em;
}

/* pickup > post */
#main #pickup .post {
	background: #F3F3F3;
}

#main #pickup .post a, #main #pickup .post a:visited {
	text-decoration: none;
}

#main #pickup .postHover {
	background: #E6E6E6;
}

/* pickup > post > figure */
#main #pickup .post .figure {
	position: relative;
	overflow: hidden;
	width: 704px;
	height: 224px;

}

#main #pickup .postHover .figure img {
	opacity: 0.7;
	-ms-filter: "alpha( opacity=70 )";
	filter: alpha(opacity = 70);
}

#main #pickup .post .figure:after {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
	z-index: 88;
}

#main #pickup .post .figure h1 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 89;
}

#main #pickup .post .figure h1 a {
	display: block;
	padding: .7em;
	background: #000;
	background: rgba(0, 0, 0, .6);
	color: #EEE;
	font-size: 180%;
	font-weight: bold;
	text-shadow: .1em .1em .4em rgba(0, 0, 0, .5);
	-ms-filter: 'alpha( opacity=80 )';
	filter: alpha(opacity = 80);
}

#main #pickup .post .figure h1 a, #main #pickup .post .figure h1 a:visited
	{
	color: #EEE;
}

/* pickup > post > postContents */
#main #pickup .post .postContents {
	padding: 1em;
}

#main #pickup .post .postContents p.summary {
	margin-bottom: .5em;
	font-size: 140%;
	line-height: 1.5; /* 21px */
}

#main #pickup .post .postContents p.moreLink {
	text-align: right;
	font-size: 140%;
}

#main #pickup .post .postContents p.moreLink b {
	padding-left: 18px;
	background: url(../img/base/arrow_01_gray.png) no-repeat 0 50%;
	font-weight: normal;
}

#main #pickup .post .postContents p.moreLink a, #main #pickup .post .postContents p.moreLink a:visited
	{
	color: #333;
}

/* topSummary */
#main #topSummary {
	margin-bottom: 3.2em;
}

#main #topSummary .sectionHeader {

}

#main #topSummary .sectionContents {
	overflow: hidden;
	width: 100%;
	zoom: 1;
}

/* topSummary > post */
#main #topSummary .sectionContents .post {
	float: left;
	width: 224px; 
	margin-left: 16px;
}

#main #topSummary .sectionContents .post:first-child {
	margin-left: 0;
}

#main #topSummary .sectionContents .post a {
	display: block;
}

#main #topSummary .sectionContents .post a, #main #topSummary .sectionContents .post a:visited
	{
	text-decoration: none;
}

#main #topSummary .sectionContents .post a:hover, #main #topSummary .sectionContents .post a:focus
	{
	background: #F3F3F3;
}

/* topSummary > post > figure */
#main #topSummary .post a figure {
	position: relative;
	overflow: hidden;
	border: 1px solid #DDD;
}

#main #topSummary .post a:hover figure img {
	opacity: 0.7;
	-ms-filter: "alpha( opacity=70 )";
	filter: alpha(opacity = 70);
}

#main #topSummary .post a figure:after {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
	z-index: 87;
}

/* topSummary > post > postContents */
#main #topSummary .post a .postContents {
	padding: 1.6em 0 .8em;
}

#main #topSummary .post a .postContents h1 {
	font-size: 160%;
	margin-bottom: 1em;
	padding-bottom: .5em;
	border-style: solid;
	border-color: #999;
	border-width: 0 0 1px;
}

#main #topSummary .post a .postContents p.summary {
	margin-bottom: 1em;
	font-size: 120%;
	line-height: 1.5; /* 18px */
}

#main #topSummary .post a .postContents p.moreLink {
	text-align: right;
	font-size: 140%;
}

#main #topSummary .post a .postContents p.moreLink b {
	padding-left: 18px;
	background: url(../img/base/arrow_01_gray.png) no-repeat 0 50%;
	font-weight: normal;
}

#main #topSummary .post a .postContents, #main #topSummary .post a:visited .postContents
	{
	color: #333;
}

/* topHeadline */
#main #topHeadline {

}

#main #topHeadline .sectionHeader {
	margin-bottom: 0;
	padding: .8em 0;
	background-color: transparent;
}

#main #topHeadline .sectionHeader h1 {
	margin-top: .4em;
	font-size: 180%;
}

/* topFeed */
#main #topFeed {

}

#main #topFeed .sectionHeader {
	margin-bottom: 0;
	padding: .8em 0;
	background-color: transparent;
}

#main #topFeed .sectionHeader h1 {
	margin-top: .4em;
	font-size: 180%;
}

/* banner */
#main .contents .banner {
	margin-bottom: 1.6em;
}

#main .contents .banner p {
	margin-bottom: 1em;
	text-align: center;
}

/* fbPage */
#main #fbPage {
	overflow: hidden;
	float: left;
	width: 592px;
	margin-bottom: 1.6em;
	padding: 1.6em 0 .8em;
	border-style: solid;
	border-color: #729FD4;
	border-width: 1px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
}

#main #fbPage h1 {
	height: 38px;
	line-height: 38px;
	margin: 0 1em 10px;
	padding-left: 50px;
	background-position: -400px 0;
	font-size: 180%;
	vertical-align: middle;
}

#main #fbPage .sectionContents {
	padding: 0 5px;
}

#main #fbPage .fbcomments, #main #fbPage .fb_iframe_widget, #main #fbPage .fb_iframe_widget iframe,
	#main #fbPage .fb_iframe_widget span {
	width: 100% !important;
}

/* twitter */
#main .twitterBtn {
	float: right;
	overflow: hidden;
	width: 336px;
	margin-bottom: 3.2em;
}

#main .twitterBtn a {
	overflow: hidden;
	display: block;
	vertical-align: middle;
	width: 206px;
	height: 64px;
	padding: 0 32px 0 96px;
	background-position: 0 0;
	text-align: center;
}

#main .twitterBtn a, #main .twitterBtn a:visited {
	color: #346;
	text-decoration: none;
}

#main .twitterBtn a:hover {
	color: #09C;
}

#main .twitterBtn a .caption {
	display: block;
	font-size: 120%;
	padding: 1em 0 .7em;
}

*:first-child+html #main .twitterBtn a .caption { /* IE 7 */
	padding-bottom: .4em;
}

#main .twitterBtn a .twitterID {
	display: block;
	font-weight: bold;
	font-size: 200%;
}

*:first-child+html #main .twitterBtn a .twitterID { /* IE 7 */
	padding-bottom: .3em;
}

/* social */
#main .social {
	float: right;
	width: 280px;
	padding-right: 56px;
	margin: 0;
}

#main .social .hatena, #main .social .twitter, #main .social .google,
	#main .social .facebook, #main .social .mixi, #main .social .weibo {
	float: left;
	height: 100px;
}

#main .social .hatena, #main .social .twitter, #main .social .facebook,
	#main .social .mixi {
	width: 95px;
}

#main .social .google {
	width: 70px;
}

#main .social .weibo {
	width: 60px;
}

/* modify by matsuo 20160130 */
#homeShortCut {
	z-index: 2000;
	position: absolute;
/*	position:relative; */
	left: 0px;
	bottom: 80px;
	width:100%;
}
#homeShortCut2{
	z-index: 2000;
	position: relative;
	top:40px;
	left: 0px;
	bottom: 80px;
	width:960px;
	margin:-20px auto;
}

#homeShortCut3{
	z-index: -100;
	position:absolute;
	#top:110px; /* ショートカット有の場合 */
	top:101px; /* ショートカット無の場合 */
	width:100%;
	margin:-60px auto;
	height:60px;
}
#homeShortCut3 div{
	position:relative;
	width:100%;
	margin: 0 auto;
	padding:5px;
	background:#ffffff;
	opacity:.8;
}
#homeShortCut ul {
	margin: 0px;
	padding: 0px 17px;
}

#homeShortCut ul li {
	list-style-type: none;
	float: left;
	margin: 0px;
	padding: 0px;
	text-align: center;
	color: #2c7a71;
	padding: 0px;
	background: linear-gradient(white, #dcf6f8);
	opacity: 0.8;
	border-radius: 8px;
	color: #2c7a71;
	border: #3B170B solid 1px;
	height: 80px;
}

#homeShortCut ul li a {
	text-decoration: none;
	display: block;
	color: #2c7a71;
	background: linear-gradient(white, #dcf6f8);
	opacity: 0.8;

	border-radius: 8px;
	background-color: #dcf6f8;
	height: 80px;
}

#homeShortCut ul li a img {
	height: 50px;
}

#homeShortCut ul li p {
	position:relative;
	top:-30px;
	display: block;
	background-color: #1f3999;
	color: white;
	font-size: medium;
	padding: 4px 6px;
}

#homeShortCut ul li a:hover {
	background: linear-gradient(#F2F5A9, #FACC2E);
	color: white;
}

/*!
 * tablet START
 * ---------------------------------------------
 */
@media only screen and (min-width: 769px) and (max-width: 970px) {
	#wrapper #main {
		padding-bottom: 0;
	}/*
	#mainVisual {
		width: auto;
	}
	#mainVisual #mvContainer {
		width: 704px;
		height: auto;
	}
	#mainVisual .mvSlide {
		width: 100%;
		height: 100%;
	}
	#mainVisual .mvSlide img {
		width: 100%;
		height: auto;
	}
	*/
	#document #main #contentsWrapper #contents01 {
		float: none;
		width: auto;
		margin: 0;
	}
	#document #main #contentsWrapper #contents02 {
		float: none;
		width: auto;
		margin: 0 0 3.2em;
	}
	#document #main #contentsWrapper #contents02 #topHeadline {
		float: left;
		width: 48.40425531914894%;
	}
	#document #main #contentsWrapper #contents02 #topFeed {
		float: right;
		width: 48.40425531914894%;
	}
	#document #main #contentsWrapper #contents02 #topFeed .sectionHeader {
		padding-bottom: 1.1em;
	}
	#document #main #contentsWrapper #contents03 {
		width: auto;
		margin: 0;
	}
	#main .contents #fbPage {
		float: none;
		width: auto;
	}
}

/*!
 * tablet END
 * ---------------------------------------------
 */

/*!
 * smart phone START
 * ---------------------------------------------
 */
@media only screen and (max-width: 768px) {
	#wrapper {
		padding-bottom: 0;
	}
	#wrapper #main {
		padding-bottom: 0;
	}
	/*
	#mainVisual {
		width: auto;
		margin: 0;
		padding: 0;
	}
	#mainVisual #mvContainer {
		width: 100%;
		height: auto;
		border-width: 3px 0 0;
	}
	#mainVisual .mvSlide {
		width: 100%;
		height: 100%;
	}
	#mainVisual .mvSlide img {
		width: 100%;
		height: auto;
	}
	#mainVisual .mvNav {
		display: none;
	}
	*/
	#document #main #contentsWrapper #contents01 {
		float: none;
		width: auto;
		margin: 0;
	}
	#document #main #contentsWrapper #contents02 {
		float: none;
		width: auto;
		margin: 0 0 3.2em;
	}
	#document #main #contentsWrapper #contents03 {
		width: auto;
		margin: 0;
	}
	#wrapper #main .section .sectionHeader {
		padding: 1em;
	}
	#main #pickup .post a {

	}
	#main #pickup .post .figure {
		width: 100% !important;
		height: auto !important;
	}
	#main #pickup .post .figure h1 {
		position: static;
	}
	#main #pickup .post .figure h1 a {
		font-size: 160%;
		width: 90%;
		padding: .5em 5%;
	}
	#main #pickup .post .figure img {
		position: static !important;
		width: 100%;
		height: auto;
	}
	#main #topSummary .sectionHeader {
		margin: 0;
		padding-left: 1em;
		padding-right: 1em;
	}
	#main #topSummary .sectionContents .post {
		float: none;
		width: auto;
		border-style: solid;
		border-color: #CCC;
		border-width: 0 0 1px;
		margin: 0 !important;
	}
	#main #topSummary .sectionContents .post a {
		padding: 1em;
	}
	#main #topSummary .sectionContents .post a figure {
		float: left;
		width: 100px !important;
		height: 63px !important;
		margin: 0 1em 1em 0;
	}
	#main #topSummary .sectionContents .post a figure img {
		position: static;
		width: 100%;
		height: auto;
	}
	#main #topSummary .sectionContents .post a .postContents {
		padding: 0;
	}
	#main #topSummary .sectionContents .post a .postContents h1 {
		padding: 1em 0 0;
		border: 0 none;
	}
	#main #topSummary .sectionContents .post a .postContents p.summary {
		clear: both;
		margin-bottom: 0;
		font-size: 140%;
	}
	#main #topHeadline .sectionHeader {
		padding-left: 1em;
		padding-right: 1em;
	}
	#main .headline .post p.date {
		font-size: 120%;
	}
	#main .headline .post h1 {
		font-size: 140%;
		line-height: 1.286; /* 18px */
	}
	#main .contents #fbPage {
		float: none;
		width: auto;
		margin: 0 1em 1.6em;
	}
	#main .contents #fbPage h1 {
		height: auto !important; /* for Modern Browser */
		height: 40px; /* for IE */
		min-height: 40px; /* for Modern Browser */
		line-height: 1.22; /* 22px */
		padding-left: 50px;
		font-size: 180%;
	}
	#main .contents .banner {
		margin: 0 1em 1em;
	}
	#main .contents .twitterBtn {
		float: none;
		width: auto;
		margin: 0 1em 1.6em;
	}
	#main .contents .twitterBtn a {
		position: relative;
		overflow: hidden;
		display: block;
		vertical-align: middle;
		width: auto;
		max-width: 158px;
		height: 62px;
		margin: 0 auto;
		padding-left: 90px;
		background-position: -7px -1px;
		border-style: solid;
		border-color: #A9C0D9;
		border-width: 1px;
		border-radius: 6px;
	}
	#main .contents .twitterBtn a .caption {
		font-size: 110%;
		padding: .7em 0;
	}
	#main .contents .twitterBtn a .twitterID {
		font-size: 160%;
	}
	#main .contents .social {
		float: none;
		width: auto;
		margin: 0 1em;
		padding-right: 0;
	}
	#homeShortCut {
		position: static;
	}
	#homeShortCut ul {
		padding: 0px;
	}
	#homeShortCut ul li {
		float: none;
		display: inline-block;
	}
	#homeShortCut ul li a {
		height: 48px;
		margin: 5px 0px;
		text-align: left;
		display: inline-block;
	}
	#homeShortCut ul li a p {
		display: inline;
		background-color: transparent;
		color: #1F3999;
	}
	#homeShortCut ul li a img {
		vertical-align: middle;
	}
	#homeShortCut3 {
		z-index:1000;
		position: absolute;
		top:290px;
		height:auto;
		box-sizing:border-box;
	}
	#homeShortCut3 div{
		width:100%;

	}
	#homeShortCut3 p{
		height:60px;
		padding:10px;
		line-height:18px;
	}
	#homeShortCut3 ul {
		padding: 0px;
	}
	#homeShortCut3 ul li {
		float: none;
		display: inline-block;
	}
	#homeShortCut3 ul li a {
		height: 48px;
		margin: 5px 0px;
		text-align: left;
		display: inline-block;
	}
	#homeShortCut3 ul li a p {
		display: inline;
		background-color: transparent;
		color: #1F3999;
	}
	#homeShortCut3 ul li a img {
		vertical-align: middle;
	}
}

/*!
 * smart phone END
 * ---------------------------------------------
 */