@charset "utf-8";
/* CSS Document */

/* content */
#main{
    display: table;
    overflow: hidden;
    position: relative;
	width:100%;
	height:0;
	background:#D3EEFF url(../common/img/blue_bc.png) repeat;
	margin:0;
}
div.inner div{
	float:left;
	width:33.33333%;
	margin:0;
	padding:0;
}
div.inner div.bottom{
	margin-top:-1%;

}
div.inner div img{
	width:100%;
	margin:0;
	padding:0;
}
div.movie{
	position:relative;
	width: 20%;
	margin:1% auto;
    z-index: 10;
}
div.movie img{
	width: 100%;
}
#top #content{
	width:100%;
	margin:0 !important;
	padding:0 0 -5% !important;
	background:#fff;
}
div.inner{
	position: relative;
}
h2.new{
	background:url(img/new.png) top left no-repeat ;
	height:100px;
	padding-left:110px;
	color:#000
	font-size:200%;
	text-align:center;
	text-shadow: 
    #FFF 2px 0px 0px, #FFF -2px 0px 0px,
    #FFF 0px -2px 0px, #FFF 0px 2px 0px,
    #FFF 2px 2px 0px, #FFF -2px 2px 0px,
    #FFF 2px -2px 0px, #FFF -2px -2px 0px,
    #FFF 1px 2px 0px, #FFF -1px 2px 0px,
    #FFF 1px -2px 0px, #FFF -1px -2px 0px,
    #FFF 2px 1px 0px, #FFF -2px 1px 0px,
    #FFF 2px -1px 0px, #FFF -2px -1px 0px,
    #FFF 1px 1px 0px, #FFF -1px 1px 0px,
    #FFF 1px -1px 0px, #FFF -1px -1px 0px;
	z-index:100;
	 position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:10% auto;
}
h2.new2{
	width:80%;
	color:#fff;
	font-size:180%;
	text-align:center;
	z-index:100;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:25% auto;
	padding:1%;
	background:#000;
	opacity:0.6;
	text-shadow: none;
}
h2.top{
	color:#151515;
	font-size:200%;
	text-align:center;
	margin:1% auto;
	text-shadow: 
    #FFF 2px 0px 0px, #FFF -2px 0px 0px,
    #FFF 0px -2px 0px, #FFF 0px 2px 0px,
    #FFF 2px 2px 0px, #FFF -2px 2px 0px,
    #FFF 2px -2px 0px, #FFF -2px -2px 0px,
    #FFF 1px 2px 0px, #FFF -1px 2px 0px,
    #FFF 1px -2px 0px, #FFF -1px -2px 0px,
    #FFF 2px 1px 0px, #FFF -2px 1px 0px,
    #FFF 2px -1px 0px, #FFF -2px -1px 0px,
    #FFF 1px 1px 0px, #FFF -1px 1px 0px,
    #FFF 1px -1px 0px, #FFF -1px -1px 0px;
	opacity:0.7;
}
h3.top{
	color:#151515;
	font-size:120%;
	text-align:center;
	margin:0;
	padding:1%;
	font-weight: normal;
}

ul.category{
	width:80%;
	margin:1% auto;
	padding:0;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	height: 46px;
	list-style:none;
}
ul li.category_in{
	float:left;
	width:15%;
	background:#1a69b3;
	color:#fff;
	padding:10px;
	margin:0;
	text-align:center;
}
ul li.news{
	margin:0;
	text-align:center;
	background:#eee;
	padding: 9px;
}
div.TopNewsBox{
	width: 94%;
	background: #f0ebeb;
	margin:0;
	padding:3%;
}
div.TopNews{
	max-width: 1100px;
	margin:2% auto;
	padding:3% auto 4%;
	display: flex;
	flex-flow: row wrap;
}
div.TopNews h3{
	clear:both;
	display:block;
    font-size: 2rem;
	line-height:200%;
}
div.TopNews h3 span{
	color:#fff;
	background:#d70e0e;
	padding:0.5% 1%;
}
div.TopNews span.new {
    background: #000;
    color: #fff;
    font-size: 1.5rem;
    font-weight: normal;
    margin: 0 2%;
    padding: 1% 2%;
	position: absolute;
	top: 0;
	left: 0;
}
div.TopNews p{

	text-align:center;
}
div.TopNews img{
	width:90%;
}
a.news{
	transition: 0.3s ease-in-out;
	width:30%;
	text-align:center;
	margin:1% auto;
	background:#0086d1;
	padding:1% 5%;
	border-radius:10px;
	color:#fff !important;
	display: block;
	font-size:1.8rem;
}
div.LeftBox{
	text-align:center;
	background: #fff;
	float:left;
	width:100%;
	height: 100%;
	margin:0%;
	padding:2% 1% 0;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));
	position: relative;
}
div.RightBox{
	width:46%;
	margin:0;
	margin-left:1.5%;
	padding:0;
	position: relative;
}
div.RightBox_in{
	background: #fff;
	width:100%;
	height: 48%;
	padding:0;
	margin-bottom:3.5%;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));
	position: relative;
}
div.RightBox h3{
    font-size: 1.5rem;
	margin:0;
}
@media screen and (max-width: 763px) {
h2.new{
	padding-top:15%;
	background:none ;
	padding-left:0;
}
h2.new2{
	font-size:130%;
}
h3.top{
	font-size:100%;
}
div.LeftBox{
	width:100%;
}
div.RightBox{
	width:100%;
}
div.RightBox_in{
	margin-bottom:0%;
	height:auto;
}
}

div.point{
	background:url(img/point_under.gif) bottom left no-repeat;
	width:100% !important;
	height:50px;
	font-size:150%;
	font-weight:bold;
	color:#009fb0;
}
div.point2{
	background:url(img/point_under2.gif) bottom left no-repeat;
	width:100% !important;
	height:50px;
	font-size:150%;
	font-weight:bold;
	color:#009fb0;
}
div.bg_blue{
	max-width:1100px;
	background: #D3EEFF url(../common/img/blue_bc.png);
	/*background: #d2ebee url(img/top_bc.png);*/
	padding:3%;
	margin:1% auto;
	z-index:1;
	position: relative;
	display: flex;
	flex-flow: row wrap;
}
div.bg_blue img{
	width:100%;
}
div.bg_blue div{
	width: 46%;
	padding:2%;
}
/* スマホでの表示順指定 */
div.bg_blue .Box01{order: 1;}
div.bg_blue .Box02{order: 2;}
div.bg_blue .Box03{order: 3;}
div.bg_blue .Box04{order: 4;}
div.bg_blue .Box05{order: 5;}
div.bg_blue .Box06{order: 6;}

@media screen and (max-width: 767px) {
div.bg_blue div{width: 100%;}
div.bg_blue .Box01{order: 1;}
div.bg_blue .Box02{order: 2;}
div.bg_blue .Box03{order: 4;}
div.bg_blue .Box04{order: 3;}
div.bg_blue .Box05{order: 5;}
div.bg_blue .Box06{order: 6;}
}
div.bg_pers{
	width:90%;
	min-height: 100%;
	height:auto;
	background:url(img/pers_bc.jpg) top center no-repeat #fff;
	margin:1% auto;
	background-size: contain;
}
p.pers{
	width:55%;
	font-size:100%;
	line-height:190%;
	margin:12% auto 3% !important;
	padding:3%;
	text-align:center;
}
div.bg_pers ul{
	width:90%;
	margin:1% auto;
}
div.bg_pers ul li{
	float:left;
	width:16%;
	margin-right:5px;
	list-style:none;
	color:#007f8c !important;
}
div.bg_pers ul li img{
	width:100%;
}
div.bg_presen{
	width:90%;
	min-height: 100%;
	height:auto;
	margin:1% auto;
}
p.presen{
	width:100%;
	font-size:150%;
	font-weight:bold;
	text-align:center;
}
div.bg_presen ul{
	width:60%;
	margin:1% auto;
}
div.bg_presen ul li{
	float:left;
	width:50%;
	font-size:120%;
	font-weight:bold;
	list-style:none;
	text-align:center;
}
div.bg_presen ul li img{
	width:80%;
}
div.bg_maker{
	width:70%;
	min-height: 100%;
	height:auto;
	margin:5% auto 5%;
	border-top: solid 3px #ddd;
	border-bottom: solid 3px #ddd;
}
p.maker{
	font-weight:bold;
	text-align:center;
}
div.bg_maker img{
	width:100%;
}
div.bg_pers ul li{
	float:left;
	width:16%;
	margin-right:5px;
	list-style:none;
	color:#007f8c !important;
}
div.bana{
	width:80%;
	margin:1% auto;
	text-align:center;
}
div.event{
	width:80%;
	margin:3% auto;
}
div.event img{
	width:80%;
	border:3px solid #ddd;
	padding:3%;
}
div.event ul li{
	list-style:none;
	text-align:left;
	margin-left:-10px;
}
div.event .LeftBox{
	float:left;
	width:50%;
	text-align:center;
}
div.event .RightBox{
	float:right;
	width:50%;
	text-align:center;
}
@media screen and (max-width: 960px) {
ul.category{
	width:100%;
	font-size:90%;
	border:none;
}
ul li.category_in{
	width:21%;
}
ul li.news{
	background:none;
	line-height:130%;
	text-align:center;
	padding:auto 2%; 
}
.triangle{
	width:50%;
}
div.bg_pers ul li{
	width:23%;
}
div.bana img{
	width:100%;
}
}

@media screen and (max-width: 767px) {
h2.top{
	width:90%;
	font-size:140%;
	padding-top:10%;
}
.copy{
	width:50%;
	margin:1% auto;
}
.triangle{
	width:100%;
	margin:1% auto !important;
}
p.chache{
	width:90%;
}
div.bg_blue{
	width:94%;
	padding:3%;
}
div.bg_pers{
	width:94%;
	background:none #CCC;
	padding:3%;
}
p.pers{
	width:90%;
}
div.bg_pers ul{
	width:98%;
	margin:1% auto;
	padding:0;
}
div.bg_pers ul li{
	width:31%;
	margin:1%;
}
div.bg_pers ul li p{
	letter-spacing:-0.05em;
	font-size:75%;
	margin:0;
	padding:0;
}
p.presen{
	width:100%;
	font-size:100%;
}
div.bg_presen ul{
	width:94%;
	padding:3%;
	margin:1% auto;
}
div.bg_presen ul li{
	font-size:70%;
    line-height: 130%;
}
div.bg_presen ul li img{
	width:100%;
}
div.bg_maker{
	width:100%;
}
div.event .LeftBox{
	width:100%;
	clear:both;
	display:block;
}
div.event .RightBox{
	width:100%;
	clear:both;
	display:block;
}
}