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

html,
html *{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

header {
	padding: 32px;
}

body {
    margin: 0px;
   -webkit-text-size-adjust: 100%;
	margin-left: auto;
	margin-right: auto;
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

footer {
	width: 100%;
	padding: 20px 30px;
	background-color: #C5DCED;
}
 
iframe {
	width: 450px;
	height: 350px;
	border: 0;
	padding: 20px 20px 0px 20px;
}





.style-logo {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 238px;
}

.style-logo:hover {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 238px;
	opacity: 0.7;
    filter: alpha(opacity=70);
 	 -ms-filter: "alpha(opacity=70)";
}

.style-facebooklogo {
	margin-left: 10px;
	display: block;
	width: 50px;
}

.style-facebooklogo:hover {
	margin-left: 10px;
	display: block;
	width: 50px;
	opacity: 0.7;
    filter: alpha(opacity=70);
 	 -ms-filter: "alpha(opacity=70)";
}

.style-instagramlogo {
	margin-left: 10px;
	display: block;
	width: 70px;
}

.style-instagramlogo:hover {
	margin-left: 10px;
	display: block;
	width: 70px;
	opacity: 0.7;
    filter: alpha(opacity=70);
 	 -ms-filter: "alpha(opacity=70)";
}

.style-nav ul {
	list-style-type: none;
}

.style-nav ul li a {
	text-decoration: none;
	color: #2F322A;
	text-align: center;
	display: block;
	padding: 8px;
}

.style-nav ul li a:hover {
	text-decoration: none;
	color: #B4B4B4;
	text-align: center;
	display: block;
	padding: 8px;
}

.style-cap {
	width: 238px;
}

.style-cap-02 {
	width: 260px;
}


.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}

.bold-underline {
	text-decoration: underline;
	font-weight: 700;
}

.bold {
	font-weight: 700;
}


.lbox:hover{
	opacity: 0.7;
    filter: alpha(opacity=70);
 	 -ms-filter: "alpha(opacity=70)";
}



h1 {
	font-size: 30px;
	font-weight: 200;
	margin-bottom: 10px;
}

h2 {
	font-size: 20px;
	font-weight: 200;
	margin-bottom: 30px;
}

h3 {
	font-size: 18px;
	font-weight: 200;
	margin-bottom: 15px;
}


p {
	font-size: 12px;
	font-weight: 200;
	margin-bottom: 25px;
}


p.sub-nav{
	font-sixe: 4px;
	text-decoration: none;
	color: #000000;
}


a.sub-nav{
	font-sixe: 4px;
	text-decoration: none;
	color: #000000;
}

a.sub-nav:hover {
	font-sixe: 4px;
	text-decoration: none;
	color: #B4B4B4;
}


.col-wk{
	padding: 10px;
}

.link {
	color: #000000;
}

.link:hover {
	color: #B4B4B4;
}


a.link-wk{
	font-size: 16px;
	font-weight: 700;
	color: #000000;
	text-decoration: none;
}


.link-wk:hover {
	color: #B4B4B4; 
	opacity: 0.7;
    filter: alpha(opacity=70);
 	 -ms-filter: "alpha(opacity=70)";
}



a.list-wk-02{
	font-size: 16px;
	color: #000000;
	text-decoration: none;
}

a.list-wk-02:hover {
	font-size: 16px;
	color: #B4B4B4;
	text-decoration: none;
}


.button {
	border: 2px #FFFFFF solid;
	padding: 8px 20px;
	border-radius: 30px;
	color: #FFFFFF;
	text-decoration: none;
}


.button:hover {
	border: 2px #B5B5B5 solid;
	padding: 8px 20px;
	border-radius: 30px;
	color: #B5B5B5;
	text-decoration: none;
}

.button-02 {
	border: 2px #000000 solid;
	padding: 2px 20px;
	border-radius: 30px;
	color: #000000;
	text-decoration: none;
}


.button-02:hover {
	border: 2px #B5B5B5 solid;
	padding: 2px 20px;
	border-radius: 30px;
	color: #B5B5B5;
	text-decoration: none;
}

.skyblue-box {
	background-color: #4EA2C5;
	color: #FFFFFF;
	padding: 60px 30px;
	text-align: center;
}

.info-box {
	background-color: #72B1CF;
	padding: 60px 30px;
	color: #FFFFFF;
	text-align: center;
}

.explain-box{
	padding: 60px 30px;
}

.footer-text {
	font-size: 11px;
	margin: auto;
    max-width: 800px;
    padding: 10px;	
}

.footer-text a {
	font-size: 11px;
	margin-bottom: 20px;
	color: #000000;
}

.footer-text a:hover {
	font-size: 11px;
	margin-bottom: 20px;
	color: #B4B4B4;
}


.footer-caution {
	font-size: 11px;
	font-weight: bold;
	margin-bottom: 20px;
}

table.sub-nav{
	display: table;
}

#sub-nav-td{
	display: table-cell;
	vertical-align: bottom;
}


table.list-wk{
	margin: 0px;
	padding: 0px;
}

table.list-wk-02{
	min-width: 100%;
	table-layout: fixed;
	margin: 0px;
	padding: 0px;
}


table.list-wk-02 th{
	text-align: left;
	font-size: 16px;
	font-weight: 700;
}


table.list-wk-02 td{
	text-align: center;
    align-content: center;
}




table.list-wk-03 {
	border-collapse: separate;
	border-spacing: 0px;
	border: 0px;
}




table.list-wk-03 td{
    font-size: 13px;
	border-collapse: separate;
	border-spacing: 0px;
	border-bottom: 1px solid #ccc;
	padding-left: 5px;
	padding-right: 5px;
}



table.list-wk-03 th{
	font-size: 13px;
	border-collapse: separate;
	border-spacing: 0px;
	border-bottom: 1px solid #ccc;
}



img.color-ex {
	width: 160px;
}

.color-ex:hover{
	opacity: 0.7;
    filter: alpha(opacity=70);
 	 -ms-filter: "alpha(opacity=70)";
	
}

table.color-ex td{
	align-content: center;
}



table.type05 {
    border-collapse: separate;
    border-spacing: 0px;
    text-align: left;
    line-height: 1.5;
    border-top: 1px solid #ccc;
}

table.type05 th {
    width: 120px;
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
    background: #FFFFFF;
}

table.type05 td {
    width: 350px;
    padding: 10px;
    vertical-align: middle;
    border-bottom: 1px solid #ccc;
}

table.picture-box {
	border: 0px;
	padding: 3px;
}

table.picture-box-ws {
	border: 0px;
	padding: 5px;
}


table.picture-box-ws td{
	max-height: 200px;
}



#nav-home {
	text-decoration: none;
	color: #3C93EF;
	text-align: center;
	display: block;
	padding: 8px;
}

#nav-home:hover {
	text-decoration: none;
	color: #B4B4B4;
	text-align: center;
	display: block;
	padding: 8px;
}

#map-ex {
	font-size: 10px;
	text-decoration: none;
	display: block;
	margin-bottom: 10px;
	color: #2F322A;
}

#map-ex:hover {
	font-size: 10px;
	text-decoration: none;
	display: block;
	margin-bottom: 10px;
	color: #B4B4B4;
}

.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 20px;
    width: 100%;
    background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

li.menu__single:hover ul.menu__second-level {
    top: 40px;
    visibility: visible;
    opacity: 1;
	z-index: 9998;
}

.thumbnail {
	height: 500px;
	width: 205px;
}



/*画像ブロック*/
#mainimg {
	clear: left;
	width: 100%;
	height: auto;
	position: relative;
}

/*３枚画像の共通設定*/
#slide1,#slide2,#slide3,#slide4,#slide5 {
	-webkit-animation-duration: 30s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 30s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
}


#slide1 {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: relative;
	width: 100%;
	height: auto;
}


#slide2 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}


#slide3 {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}


#slide4 {
	-webkit-animation-name: slide4;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide4;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}


#slide5 {
	-webkit-animation-name: slide5;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide5;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}







/*タブレット用*/
@media (min-width: 768px){
	
	body {
		max-width: 778px;
	}
	
	.style-nav ul li {
		display: inline-block;
	}
	
	.style-nav ul {text-align: center;}
	
	h1 {
	font-size: 35px;
	margin-bottom: 30px;
}
	
	h2 {
	font-size: 22px;
	margin-bottom: 30px;
}
	
	h3 {
	font-size: 16px;
	margin-bottom: 10px;
}
	
li.menu__single ul.menu__second-level {
    width: 150%;
	}
	
	
	.col-md-half {
	width: 50%;	
	}
	
	.col {
		float: left;
		padding: 0px 7px 14px;
	}
	
}




/*デスクトップ用*/
@media (min-width: 1024px){
	
	body {
		max-width: 1000px;
	}
	
	.style-logo {
		
		float: left;
	}
	
	.style-nav {
		
		float: right;
	}
	
	li.menu__single ul.menu__second-level {
    width: 150%;
	}
	
	.col-lg-qtr {
		
		width: 25%;
	}
}


/*以下スライド用*/
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	26% {opacity: 1;}
	36% {opacity: 0;}
	100% {opacity: 0;}
}


@keyframes slide2 {
	0% {opacity: 0;}
	16% {opacity: 0;}
	26% {opacity: 1;}
	42% {opacity: 1;}
	52% {opacity: 0;}
	100% {opacity: 0;}
}


@keyframes slide3 {
	0% {opacity: 0;}
	32% {opacity: 0;}
	42% {opacity: 1;}
	58% {opacity: 1;}
	68% {opacity: 0;}
	100% {opacity: 0;}
}


@keyframes slide4 {
	0% {opacity: 0;}
	48% {opacity: 0;}
	58% {opacity: 1;}
	74% {opacity: 1;}
	84% {opacity: 0;}
	100% {opacity: 0;}
}


@keyframes slide5 {
	0% {opacity: 0;}
	74% {opacity: 0;}
	84% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}