@charset "UTF-8";

/* CSS reset start */

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0px;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;

		
}

body {
		margin: 0;
		font-size: 16px;
		font-family:Helvetica,Roboto,Arial,sans-serif;
		color:#000;
		text-decoration: none;
		background-repeat:  repeat-y; 
		background-size:100%;
		background-position: center;
		background-attachment: fixed;
		}
		
		

/* サイト名 */

.site h1 a {
		color: #000000;
		text-decoration: none
		}
		
.site h1 {
		margin: 0;
		font-size: 30px
		}
		
.site img {
		margin: 0;
		border:none
		}

/* アプリ読み込み */

.app 	{
		margin-top: 10px;
		margin-bottom: 10px;
		}

.app img {
		float: left;
		width: 100%;
		}
		
.app div{
		float: left;
		margin-right: 50px;
		margin-bottom: 20px;
		position: relative;
		text-align: center;
		}

.app h1  { 
		position: absolute;
		top: 0%;
		left: 0%;
		font-size:100%;  
		color:#ff0000; 
		border-left:10px solid; 
		border-color:#5400ff; 
		text-indent:5px; 
		font-weight:700; 
		text-shadow: 1px 2px 3px #fff;
		background: content-box;
		background-color:rgba(ff,ff,ff,0.5);
		}

.app h2 {
		position: absolute;
		font-size:150%;  
		text-align: center;
		font-weight:700; 
		top: 80%;
		left: 40%;
		background: content-box;
		background-color:rgba(ff,ff,ff,0.5);
		text-shadow: 1px 2px 3px #fff;		
		}
		
.parking{
		width: 200px;
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
		} 	
.parking img{
		float: left;
		}


/* ヘッダー画像 */

.topimg {
		width: 100%;
		height: auto;
		vertical-align: bottom
		}
		

/* イメージチェンジ */

.change {
	margin: auto;
	background-color: white;
	position: relative;
}

.change img {
		max-width: 100%;
		height:auto;
		vertical-align: bottom;
	animation-name: change;
	-webkit-animation-name: change;
	animation-duration: 20s;
	-webkit-animation-duration: 20s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}

.change .img1 {
	display: block;
	margin: 0 auto;
}

.change .img2 {
	animation-delay:5s;
	-webkit-animation-delay:5s;
	position: absolute;
	top: 0;
	left: 0;
}

.change .img3 {
	animation-delay:10s;
	-webkit-animation-delay:10s;
	position: absolute;
	top: 0;
	left: 0;
}

.change .img4 {
	animation-delay:15s;
	-webkit-animation-delay:15s;
	position: absolute;
	top: 0;
	left: 0;
}

@keyframes change {
	0% {
		opacity: 0;
	}

	6.25% {
		opacity: 1;
	}

	25% {
		opacity: 1;
	}
	
	31.25% {
		opacity: 0;
	}

}

@-webkit-keyframes change {
	0% {
		opacity: 0;
	}

	6.25% {
		opacity: 1;
	}

	25% {
		opacity: 1;
	}
	
	31.25% {
		opacity: 0;
	}
}

/* キャッチコピー */		

.catch {
		margin: 0;
		padding: 15px;
		background-color: rgba(255,255,255,0.9);
		font-size: 28px
		}

/* ヘッダー画像にキャッチコピーを重ねる */

.top {
		position: relative
		}

.catch {
		position: absolute;
		bottom: 7%;
		left: 3%
		}
		
div.video {
	float:right;
	width:320px;
	margin-right:10px;
}

/* 概要 */

.gaiyou a {
		display: block;
		background-color: #222222;
		color: #ffffff;
		text-align: center;
		text-decoration: none
		}
		
.gaiyou a:hover {
		opacity: 0.8
		}

.gaiyou i {
		display: block;
		padding-top: 40px;
		padding-bottom: 40px;
		font-size: 38px
		}
		
.gaiyou .fa-database {
		background-color: #bfbd13
		}
		
.gaiyou .fa-bar-chart-o {
		background-color: #c58839
		}
		
.gaiyou .fa-envelope {
		background-color: #859f46
		}

.gaiyou h1 {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: 20px;
		font-weight: normal
		}

.gaiyou p {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 15px;
		padding-bottom: 15px;
		background-color: #524e3c;
		font-size: 12px
		}




/* 記事 */

.kiji h1 {
		margin-top: 5px;
		margin-bottom: 5px;
		padding: 0 20px;
		border-left: solid 10px #ffabca;
		border-right: solid 10px #ffabca;
		border-radius: 5px;
		font-size: 24px;
		font-weight: normal
		}

.kiji p {
		max-width: 840px;
		margin-top: 0;
		margin-bottom: 20px
		}
		
.kiji .lend {
		max-width: 100%;
		font-size: 20px;
		color: #666666
		}

.kijiimg {
		max-width: 100%;
		height: auto;
		margin-bottom: 20px
		}

.kiji h2 {
		margin: -20px 0 10px 0;
		border-bottom: solid 1px #dddddd;
		font-size:110%;
		font-weight: 700;
		color: #ffabca;
		}
		
		
.kiji a {
		color: #202020
		}
	
.kiji a:visited {
		color: #202020
		}
		
.kiji a:hover {
		opacity: 0.8
		}

.insidebox {
	margin: 10px 0;
	padding:10px 0;
	border-bottom:1px solid #dddddd ;
	
	}
	
.insidebox img{
		float: left; 
		margin-right: 10px;
		border-left: 5px solid #ffffff ;
		border-left: 10px solid #b7b7b7 ;
		}	

.halfbox {
		width: 47%;
		float: left;
		padding: 10px;
		border-right: 1px solid #b7b7b7;
	}
	
.halfbox img{
		margin-bottom: 20px;
	}	

.boxsmall {
	margin-left: 100px;
	padding-left: 10px;
	border-left:  5px solid #ffabca;
	}

.textbox {
	padding: 15px;
	font-size: 120%;
	font-weight: 400;
	}

/* こぴーらいと */
.copyright p {
		margin: 0;
		color: #666666;
		font-size: 14px
		}
		

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/* BOX Aの下に破線を挿入（コンテンツページのみ） */



/* Box5をバーの形にする */

.box5 {
		padding-top: 15px;
		padding-bottom: 15px;
		background-color: #ffffff
		}


/* ボックスの左右 */
.boxA, .box4, .box5, .box6, .box7 {
		padding-left: 15px;
		padding-right: 15px
		}

/* ボックスの上下 */
.boxA {
		margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px
		}
		
.box4 {
		padding-top: 20px;
		padding-bottom: 20px
		}

.box4-1 {
		padding-bottom: 20px
		}

.box6 {
		padding-top: 20px
		}
.box6-1, .box6-2, .box6-3 {
		padding-bottom: 10px
		}
		

.box7 {
		padding-top: 25px;
		padding-bottom: 25px;
		background-color:rgba(255,255,255,0.9);
		}

.box8 {
		padding-top: 20px;
		padding-bottom: 20px;
		background-color:rgba(255,255,255,0.9);
		}


/* ########## 359px 以下 ########## */
@media (max-width: 359px) {

/* サイト名 */

.site img {
		width: 225px;
		height: auto
		}

}

/* ########## 599px 以下 ########## */
@media (max-width: 599px){

/* ナビゲーション */
.menu li a {
		padding: 10px 7px;
		font-size: 11px
		}

/* キャッチコピー */

.catch {
		padding: 5px 10px;
		font-size: 12px
		}

/* 記事 */

.kiji h1 {
		font-size: 16px
		}
.kiji h2 {
		font-size: 14px
		}
		
.kiji .lead {
		font-size:12px
		}
		
.kiji h3  { 
	font-size:90%;  
	}

.insidebox img{
	width: 100%;
	margin:0 0 10px 0;
	border-left: 0px;
		}	

.insidebox p{
	margin:0 0 10px 0;
	padding: 0;
	border-left:0px solid #b7b7b7 ;
		}	

.halfbox {
		width: 100%;
		padding: 10px;
		border-right: 0px solid #ffffff;
	}

}


/* ########## 750px 以下 ########## */
@media (max-width: 750px) {

/* トルクボタン */

#menubtn {
		padding: 6px 12px;
		border: solid 1px #aaaaaa;
		border-radius:5px;
		background-color: #ffffff;
		position: absolute;
		top: 20px;
		right: 15px;
		cursor: pointer
		}
		
#menubtn:hover {
		background-color: #dddddd
		}

#menubtn:focus {
		outline: none
		}

#menubtn i {
		color: #888888;
		font-size: 18px
		}

#menubtn span {
		display: inline-block;
		text-indent: -9999px
		}

/* ナビゲーションメニューたて並び */

#menu {
		display: none
		}

.menu ul {
		margin: 0;
		padding: 0;
		list-style: none
		}

.menu li a {
		display: block;
		padding: 5px;
		color: #000000;
		font-size: 14px;
		text-decoration: none
		}

.menu li a:hover {
		background-color: #eeeeee
		}
		
.kiji img {
		max-width: 100%;
		height: auto;
		}
		
div.video {
	float:none;
	width:320px;
}

div.videoyb {
	max-width:100%;
	float:none;
}

.app div{
		float: left;
		width:40%;
		margin-right: 10px;
		margin-bottom: 10px;
		}

.app h1  { 
		position: absolute;
		top: 0%;
		left: 0%;
		font-size:80%;  
		color:#ff0000; 
		border-left:10px solid; 
		border-color:#ffcc66; 
		text-indent:5px; 
		font-weight:700; 
		
		background: content-box;
		background-color:rgba(ff,ff,ff,0.5);
		}

.app h2 {
		position: absolute;
		font-size:200%;  
		text-align: center;
		font-weight:700; 
		top: 40%;
		left: 30%;
		background: content-box;
		background-color:rgba(ff,ff,ff,0.5);		
		}

.halfbox {
		width: 100%;
		float: left;
}

.halfbox img{
		width: 100%;
	}	

.boxsmall {
	margin-left: 0px;
	padding-left: 0px;
	border-left:  0px solid #b7b7b7;
	}


.textbox {
	padding: 5px;
	font-size: 100%;
	font-weight: 400;
	}

}


/* ########## 750px 以上 ########## */

@media (min-width:750px) {

/* 全体の横幅を固定 */
  
.box4, 
.boxA-inner,
.box5-inner,
.box6,
.box7
		{
		width: 750px;
		margin-left: auto;
		margin-right: auto
		}

.box8
		{
		width: 1000px;
		margin-left: auto;
		margin-right: auto
		}

}