﻿@charset : "utf-8";
/* ----------全体設定---------- */
* {
	margin :  0;
	padding : 0;
	border : 0;
	line-height : 130%;
}

html {
	height : 100%;
	overflow-y : auto;
	font-size : small;
}

body {
	margin : 0 auto;
	padding : 0;
	height : 100%;
	background-color : #ffffff;
	font-size : small;
	color : #333333;
}

h1, canvas, iframe, video, svg {
	width : 100%;
	max-width : 800px;
}

img {
	max-width : 800px;
}

.overflow-container {
	overflow : auto;
}

a {
	text-decoration : none;
	color : #336699;
}

a:visited {
	color : #336699;
}

a:hover,
a:focus {
	color : #ffa500;
	text-decoration : none;
}

a : active {
	text-decoration : underline;
}

/* ---------------------------------------------------------*/
/* ヘッダ設定 */
/* ---------------------------------------------------------*/
header, section, article, nav {
	display : block;
	margin : 0px;
	padding : 0px;
}

h1 {
 	width : 100%;
 	max-width : 800px;
 	margin : 20px auto 10px auto;
	padding : 2px 0px 2px 10px;
	border-left : 5px double #338044;
	text-align : left;
	font-size : large;
	color : #338044;
}

.titleh {
	border : 0;
	font-size : small;
	font-family : Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
	color : #245c31;
}
.navh, .mainh{
	display : none;
}

h1 span {
	display : inline-block;
	padding : 0px 10px;
	font-size : x-large;
}

h2 {
	position : relative;
	max-width : 800px;
	margin : 20px auto 10px 0;
	padding : 2px 0px 2px 35px;
	border : 1px solid #338044;
	border-radius : 20px 0px 0px 20px;
	-moz-border-radius : 20px 0px 0px 20px;
	-webkit-border-radius : 20px 0px 0px 20px;
	background : #b0e0bb;
	text-align : left;
	font-size : x-large;
	color : #663333;
}
h2:before {
    content : "";
    position : absolute;
    background : #ffffff;
    top : 50%;
    left : 8px;
    margin-top : -10px;
    height : 20px;
    width : 20px;
	border : 1px solid #338044;
    border-radius : 50%;
    -webkit-border-radius : 50%;
    -moz-border-radius : 50%;
	font-size : large;
}

h3 {
	position : relative;
	max-width : 800px;
	margin : 20px auto 10px 0;
	padding : 2px 0px 2px 35px;
	border-bottom : 1px solid #338044;
	color : #663333;
	text-align : left;
    font-size : large;
    line-height; 29px;
}

h3:before{
    position : absolute;
    top : 10px;
    left : 0;
    height : 14px;
    width : 14px;
	border : 1px solid #338044;
    content : "";
}
 
h3:after{
    position : absolute;
    top : 3px;
    left : 9px;
    height : 11px;
    width : 11px;
	border : 1px solid #338044;
    content : "";
}

/* ---------------------------------------------------------*/
/* メニュー設定 */
/* ---------------------------------------------------------*/
#navwrap {
 	padding : 0px 0px 0px 0px;
}

#menu {
 	width : 100%;
 	max-width : 800px;
 	margin : 0 auto;
 	padding : 0;
}

#menu li {
 	display : block;
 	float : left;
 	width : 33%;
/* width : 25%; ____お問合せをメニューから削除しました2021.7.5 */
 	margin : 0;
 	padding : 0;
}

#menu li a {
 	display : block;
 	padding : 12px 0 10px 0;
 	background : #67c37c;
 	color : #ffffff;
	font-weight : bold;
 	text-align : center;
 	text-decoration : none;
}

#menu li a:hover,
#menu li a:focus {
 	background : #338044;
}

#toggle {
	display : none;
}

@media only screen and (max-width : 768px) {
 	 	#menu li{
 	 	width : 50%;
 	 	border-bottom : 1px solid #338044;
 	}
}

@media only screen and (max-width : 480px) {
 	#menu{
 	 	display : none;
 	}
 	#menu li{
 	 	width : 100%;
 	}
 	#toggle{
 	 	display : block;
 	 	position : relative;
 	 	width : 100%;
 	 	background : #338044;
 	}
 	#toggle a{
 	 	display : block;
 	 	position : relative;
 	 	padding : 12px 0 10px;
 	 	border-bottom : 1px solid #338044;
 	 	color : #ffffff;
 	 	text-align : center;
 	 	text-decoration : none;
 	}
 	#toggle:before{
 	 	display : block;
 	 	content : "";
 	 	position : absolute;
 	 	top : 50%;
 	 	left : 10px;
 	 	width : 20px;
 	 	height : 20px;
 	 	margin-top : -10px;
 	 	background : #ffffff;
 	}
 	#toggle a:before, #toggle a:after{
 	 	display : block;
 	 	content : "";
 	 	position : absolute;
 	 	top : 50%;
 	 	left : 10px;
 	 	width : 20px;
 	 	height : 4px;
 	 	background : #338044;
 	}
 	#toggle a:before{
 	 	margin-top : -6px;
 	}
 	#toggle a:after{
 	 	margin-top : 2px;
 	}
}

/* ---------------------------------------------------------*/
/* mainContents メインコンテンツ設定 */
/* ---------------------------------------------------------*/
.main {
	width : 100%;
	max-width : 800px;
	margin : 70px auto 0px auto;
	clear : both;
}

p {
	margin : 0px 0px 2px 20px;
	font-weight : normal;
	letter-spacing : 0px;
}

img.thumb {
	margin : 10px 10px 10px 10px;
	border : 1px solid #338044;
	border-radius : 4px;
	-moz-border-radius : 4px;
	-webkit-border-radius : 4px;
	box-shadow : 2px 2px 2px rgba(000,000,000,0.3),2px 2px 2px rgba(255,255,255,1);
	-moz-box-shadow : 2px 2px 2px rgba(000,000,000,0.3),2px 2px 2px rgba(255,255,255,1);
	-webkit-box-shadow : 2px 2px 2px rgba(000,000,000,0.3),2px 2px 2px rgba(255,255,255,1);
}

ol {
	margin : 0px 0px 2px 40px;
}

ul {
	margin : 0px 0px 2px 20px;
	list-style-type : none;
}

ul.pr {
	margin : 0 auto;
	text-align : center;
}

ul.pr li {
	display : inline-block;
	width : 90px;
	height : 90px;
	margin : 10px;
	padding : 5px;
	border-radius : 10%;
	-moz-border-radius : 10%;
	-webkit-border-radius : 10%;
	background : #b0e0bb;
	line-height : 80px;
	text-align : center;
	font-size : medium;
	font-weight : bold;
	font-family : Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

ul.pr li : nth-child(1) { background : #35A058; }
ul.pr li : nth-child(2) { background : #7bc55c; }
ul.pr li : nth-child(3) { background : #63c75f; }
ul.pr li : nth-child(4) { background : #61c977; }
ul.pr li : nth-child(5) { background : #63cb93; }
ul.pr li : nth-child(6) { background : #66cdaf; }

dt{
	position : relative;
	max-width : 800px;
	margin : 10px auto 0px 0px;
	padding : 2px 0px 2px 20px;
	font-weight : bold;
	color : #663333;
	text-align : left;
}

dt:before {
	content : "Ｑ.";
	font-size : medium;
	color : #990000;
}

dd{
	margin : 0px auto 5px 0;
	padding : 2px 0px 2px 35px;
}

dd:before {
	content : "Ａ.";
	font-size : medium;
	font-weight : bold;
	color : #338044;
}

table {
	width : 100%;
	border-spacing : 0px;
	border-collapse : collapse;
	border-style : none;
}

table caption {
	text-align : left;
	font-size : medium;
}

caption:before {
	content : "●";
	color : #990000;
}

td {
	padding : 10px;
	border : 1px solid #338044;
}

th {
	border : 1px solid #338044;
	background : #b0e0bb;
}

/* ---------------------------------------------------------*/
/* footer フッター設定 */
/* ---------------------------------------------------------*/

footer {
	clear : both;
	position : relative;
	width : 100%;
	max-width : 800px;
	margin : 10px auto;
	padding : 10px 10px 10px 10px;
	border-top : 3px double #338044;
}

.logo {
	display : block;
	position : absolute;
	left : 0;
	width : 200px;
	height : 40px;
	padding : 0;
	border : 1px solid #338044;
	border-radius : 4px;
	-moz-border-radius : 4px;
	-webkit-border-radius : 4px;
	background : url(../image/logo.png) 0 0 no-repeat scroll;
	text-indent : -9999px;
}

.info {
	width : 100%;
	max-width : 400px;
	margin-top : 50px;
	padding : 20px 0px;
	border-radius : 4px;
	-moz-border-radius : 4px;
	-webkit-border-radius : 4px;
	background : #b0e0bb;
}

address {
	padding : 10px 0px 10px 20px;
	font-size : medium;
}

/* ---------------------------------------------------------*/
/* すらいどしょー */
/* ---------------------------------------------------------*/

#stage {
    position : relative;
    max-width : 600px;
    margin : 0 auto 20px auto;
    overflow : hidden;
	border : 1px solid #338044;
}
.pic img {
    position : absolute;
    width : 100%;
    top : 0;
    left : 100%;
    -moz-animation : imgTrans 30s infinite;
    -webkit-animation : imgTrans 30s infinite;
    animation : imgTrans 30s infinite;
}
#photo1 img {
    -moz-animation-delay : 0s;
    -webkit-animation-delay : 0s;
    animation-delay : 0s;
}
#photo2 img {
    -moz-animation-delay : 6s;
    -webkit-animation-delay : 6s;
    animation-delay : 6s;
}
#photo3 img {
    -moz-animation-delay : 12s;
    -webkit-animation-delay : 12s;
    animation-delay : 12s;
}
#photo4 img {
    -moz-animation-delay : 18s;
    -webkit-animation-delay : 18s;
    animation-delay : 18s;
}
#photo5 img {
    -moz-animation-delay : 24s;
    -webkit-animation-delay : 24s;
    animation-delay : 24s;
}
@-webkit-keyframes imgTrans {
 0% { left : 100%; }
 5% { left : 0%; }
 20% { left : 0%; }
 25% { left : -100%; }
 100% { left : -100%; }
}
@-moz-keyframes imgTrans {
 0% { left : 100%; }
 5% { left : 0%; }
 20% { left : 0%; }
 25% { left : -100%; }
 40% { left : -100%; }
 100% { left : -100%; }
}
 
@keyframes imgTrans {
 0% { left : 100%; }
 5% { left : 0%; }
 20% { left : 0%; }
 25% { left : -100%; }
 100% { left : -100%; }
}

