/* GRID */

.grid01,.grid02,.grid03,.grid04,.grid05,.grid06,.grid07,.grid08,.grid09,.grid10,.grid11,.grid12,.grid13,.grid14,.grid15,.grid16,.grid17,.grid18,.grid19,.grid20,.grid21,.grid22,.grid23,.grid24{
  display: block;
  overflow: hidden;
  box-sizing: border-box;
}

.grid24{font-size:0px; letter-spacing:0; clear: both;}
.grid24 .div{font-size:13px;}

.grid12{font-size:13px;}

.grid12.left{
	margin-bottom:40px;
}

.grid12.right{
}

#topics .grid08{
	margin-bottom:40px;
}

#profile{
	background:#E8F3F4;
}

.member .grid08{
	background:#F8F0EA;
	border:1px solid #fff;
}

.grid08 img,.grid12 img{
	width:100%;
	height:auto;
	border-radius:8px;
	line-height:1;
}

.grid08 p{
	font-size:16px;
}

.noborder{
	border:none!important;
}

.nomargin{
	margin:0 !important;
}

.pc{
	display:none;
}

.sp{
	display: block;
}

ul,ol{
	margin:0;
	padding:0;
}

a:link,a:visited{
	color:#222;
	text-decoration: none;
}


/* STRUCTURE */
::selection { color:rgba(0,50,79,1); background:rgb(255,255,255) /* Safari */}
::-moz-selection {color:rgba(0,50,79,1); background:rgb(255,255,255) /* Firefox */}

html, body {
	height: 100%;
	background:#F8F4F1;
	font-family:"Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	line-height:2;
	letter-spacing: 1px;
	margin:0;
	padding:0;
	color:#2B0D00;
}  /*高さ100%に指定*/

body:not(.custom-background-image):before,body:not(.custom-background-image):after{
	width:100%;
	display: none;
	margin:0;
	padding:0;
	box-sizing: border-box;
	height:auto;
	position: static;
}

ul, ol{
	margin:0;
}

figure{
	margin:0;
}

hr{
	border-bottom: 1px dotted rgb(255,255,255);
	height: 0px;
	margin: 24px 0;
	background:none;
}

address{
	font-style: normal;
}

.site{
	margin:0;
}

.header-image img{
	width:100%;
	height:auto;
}

.site-header{
	padding:0;
}

.site-inner{
	width:100%;
	max-width:1024px;
	height:auto;
	display:block;
	overflow: hidden;
	box-sizing:border-box;
	padding:0 16px;
	margin:0 auto;
}

.site-inner.narrow{
	max-width:720px;
}

.site-content{
	padding:0;
}

h1.home-title{
	width:160px;
	height:64px;
	display:block;
	position: absolute;
	top:0;
	 left:0;
	box-sizing:border-box;
	margin:0;
	}
	
h1.home-title a{
	width:160px;
	height:64px;
	display:block;
	padding:4px;
	color:rgb(255,255,255);
	font-size:14px;
	font-weight: normal;
	background:url(../images/title-logo.png) no-repeat center rgba(255,255,255,0.9);
	background-size:160px 64px;
	border-radius: 0 0 16px 0;
	text-indent:-9999px;
}

	h2.header-page{
	font-family: gill-sans-nova, sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size:30px;
	letter-spacing: 2px;
	padding-bottom:8px;
	color:#2B0D00;
	text-align: center;
	}
	
	h2.header-page span{
	width:auto;
	display:inline-block;
	border-bottom:1px solid #2B0D00;
	}
	
	h2.header-page span.title-ruby{
		display:block;
		font-size:11px;
		border:none;
		margin-top:8px;
	}

h2.contents-title{
	width:100%;
	height:auto;
	display: block;
	box-sizing: border-box;
	padding:8px 8px;
	margin:40px auto;
	background:#F19C63;
	color:#fff;
	text-align: center;
	font-size:18px;
}

	h3.header-middle{
	font-family: gill-sans-nova, sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size:20px;
	letter-spacing: 2px;
	padding-bottom:8px;
	color:#2B0D00;
	text-align: left;
	}
	
	h3.header-middle span{
	width:auto;
	display:inline-block;
	padding-right:12px;
	}
	
	h3.header-middle span.title-ruby{
		display:inline-block;
		font-size:11px;
		border:none;
		margin-top:8px;
		border-left:1px solid #2B0D00;
		padding-left:12px;
	}

a.scroll{
	width:50px;
	height:auto;
	display:block;
	position: absolute;
	bottom:16px;
	left:50%;
	margin-left:-25px;
	border-radius:8px;
	background:url(../images/arrow-scroll.svg) no-repeat center top 12px rgba(0,0,0,0.5);
	background-size:8px 20px;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 
	box-shadow: 0 0 8px rgba(0,0,0,0.25);
	color:#fff;
	text-align: center;
	font-family: gill-sans-nova, sans-serif;
	font-style: italic;
	padding-top:28px;
}

a.scroll:hover{
	bottom:42px;
	background:url(../images/arrow-scroll.svg) no-repeat center rgba(255,255,255,0.5);
	background-size:8px 20px;
}




.index a .grid08 p,.index a:visited .grid08 p{
	text-decoration: none;
	color:#2B0D00;
}

.index a .grid08{
	margin:16px;
	padding:16px;
	border-radius: 8px;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 
}

.index a:hover .grid08{
	background:#fff;
	box-shadow: 0 0 16px rgba(0,0,0,0.1);
}

p.index-title{
	width:auto;
	height:auto;
	display:block;
	box-sizing:border-box;
	margin:0;
	font-size:16px;
	line-height:1.5;
	font-weight: normal;
}

.index a:hover .grid08 p.index-title{
	text-decoration: underline;
}


p.index-time{
	font-size:12px;
	color:#999;
	letter-spacing: 1px;
	font-family: gill-sans-nova, sans-serif;
	font-weight: 800;
	line-height:2;
	text-align: left;
	font-style: italic;
	margin-bottom:8px;
}

p.comment{
	width:100%;
	max-width:500px;
	display: block;
	margin:0 auto 48px auto;
	padding:0 24px;
	font-size:16px;
}

section{
	width:100%;
	height:auto;
	display:block;
	padding:32.5px 0 65px 0;
}

section#cover{
	width:100%;
	height:100%;
	display:block;
	position: relative;
	padding:0;	
	z-index:2;
	background:url(../images/image-top_sp.jpeg) no-repeat center;
	background-size:cover;
}

section#information{
	padding:32.5px 0 64px 0;
}
	

a.contained_button,button.submit_button{
	width:100%;
	max-width: 300px;
	height:auto;
	display:block;
	box-sizing:border-box;
	padding:8px 16px;
	margin:24px auto 80px auto;
	background:#016047;
	font-size:14px;
	color:#fff;
	text-align:center;
	text-decoration:none;
	letter-spacing:2px;
	border:1px solid #016047;
	border-radius:3px;
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out; 
}

a.contained_button a:before,button.submit_button:before{
	content: '▼';
	border: 2px solid transparent;
	display: inline-block;
	width: 8px;
	height: 8px;
	font-size:9px;
	position: absolute;
	left:0px;
	top: 50%;
	margin-top:-2px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg); 
	}

a.contained_button:hover,button.submit_button:hover{
	background:#019C73;
	color:#fff;
	box-shadow: 0 0 16px rgba(0,0,0,0.1);
}

/* HOME */

.home-wrapper {
  margin: -61px 0 0 -100px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 200px;  /*横幅*/
  height: 122px;  /*縦幅*/
}

div.home-logo{
	width:200px;
	height:122px;
	display:block;
	margin:0 auto 24px auto;
	background:url(../images/logo.svg) no-repeat center;
	background-size:100%;
	text-indent:-9999px;
}

.home-navigation{
	width:100%;
	height:auto;
	display:none;
	margin-bottom:40px;
}

.home-navigation ul{
	width:100%;
	height:auto;
	display: block;
	text-align: center;
	font-size:0px;
}

.home-navigation ul li{
	width:auto;
	height:auto;
	display:inline-block;
}

.home-navigation ul li:last-child{
	border-right:none;
}

.home-navigation ul li a{
	width:100%;
	height:auto;
	display:inline-block;
	margin: 0 5%;
	text-align: center;
	color:rgb(255,255,255);
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:14px;
	letter-spacing: 2px;
}

.home-navigation ul li a:hover{
	background:rgb(255,255,255);
	color: rgba(0,50,79,1);
}

li.navi-online a,.drawer-nav li.navi-online a{
	width:auto;
	display:inline-block;
	border:1px solid #fff;
	padding:0px 16px;
	margin:0 auto;
	border-radius:30px;
}

.drawer-nav li.navi-online a{
	margin-top:24px;
}

ul.social{
	width:100%;
	max-width:200px;
	height:auto;
	display:block;
	padding:0;
	margin:0 auto 32px auto;
	text-align: center;
	font-size:0;
}

ul.social li{
	width:50%;
	height:auto;
	display:inline-block;
	vertical-align: top;
	list-style: none;
	text-align: center;
	font-size:12px;
}

ul.social li a{
	width:41px;
	height:41px;
	display:block;
	margin:0 auto;
	background:url(images/icon-social.png) no-repeat;
	text-indent: -9999px;
}

ul.social li.icon-facebook a{
	background:url(images/icon-social.png) no-repeat;
	background-position: -48px top;
}

ul.social li.icon-facebook a:hover{
	background:url(images/icon-social.png) no-repeat;
	background-position: -48px bottom;	
}

ul.social li.icon-instagram a{
	background:url(images/icon-social.png) no-repeat;
	background-position: left top;
}

ul.social li.icon-instagram a:hover{
	background:url(images/icon-social.png) no-repeat;
	background-position: left bottom;	
}

.fixednavi{display:none;}

.icon-about a{
	width:50px;
	height:75px;
	display:block;
	position: absolute;
	bottom:32px;
	left:50%;
	margin-left:-25px;
	background:url(images/icon-about.png) no-repeat left top;
	text-indent:-9999px;
}

.icon-about a:hover{
	background-position:-51px top;
}


/* PROFILE */

h3.profile-name{
	font-size:20px;
	font-weight: bold;
	text-align: left;
	margin:0 0 4px 0;
	color:#F19C63;
}

h3.profile-name span{
	font-family: gill-sans-nova, sans-serif;
	font-weight: bold;
	font-style: italic;
	display: block;
	font-size:14px;
	letter-spacing: 2px;
	color:#F19C63;
	text-indent:2px;
}

/* MEMBER */

p.member-label{
	font-size:12px;
	font-weight: normal;
	text-align: left;
	margin:0 0 4px 0;
}

p.member-name{
	font-size:16px;
	font-weight: bold;
	text-align: left;
	margin:0 0 4px 0;
	color:#F19C63;
}

p.member-thtme{
	font-size:14px;
	font-weight: bold;
	text-align: left;
	margin:0 0 4px 0;
	color:#F19C63;
}

/* INFORMATION */

dl.profile-list{
	width:100%;
	height:auto;
	display:block;
	box-sizing: border-box;
	margin:16px 0;
	padding:16px;
	background:#fff;
	border:4px solid #ddd;
}

dl.profile-list dt{
	font-weight: normal;
	font-size:14px;
}

dl.profile-list dd{
		margin:0 0 8px 0;
	padding:0 0 8px 0;
	border-bottom:1px solid #ddd;
}

.google-maps {
position: relative;
width:100%;
min-height:400px;
display: block;
margin-bottom:16px;
box-sizing:border-box;
border:4px solid #fff;
box-shadow: 0 0 16px rgba(0,0,0,0.1);
}

.google-maps iframe {
width:100%;
min-height:400px;
}

.google-calender iframe {
  width: 100%;
  height: 400px;
	border:4px solid #fff;
  box-shadow: 0 0 16px rgba(0,0,0,0.1);
}

ul.social-navi{
	width:100%;
	height:auto;
	display:block;
	padding:32px 0;
	background:rgba(153,153,153,1);
	text-align: center;
	font-size: 0;
	letter-spacing: 0;
}

ul.social-navi li{
	width:90px;
	height:40px;
	display:inline-block;
	box-sizing:border-box;
	font-size:14px;
	letter-spacing: 1px;
}

ul.social-navi li.icon-facebook a{
	width:40px;
	height:40px;
	display:block;
	margin:0 auto;
	padding:0 25px;
	background:url(http://yamapa.okinawa/test/images/icon-facebook.svg) no-repeat center;
	background-size:30px 30px;
	text-indent:-9999px;
	}
	
ul.social-navi li.icon-instagram a{
	width:40px;
	height:40px;
	display:block;
	margin:0 auto;
	padding:0 25px;
	background:url(http://yamapa.okinawa/test/images/icon-instagram.svg) no-repeat center;
	background-size:30px 30px;
	text-indent:-9999px;
	}

footer.site-footer{
	width:100%;
	height:auto;
	display:block;
	background:#354D6D;	
	padding:64px 0 24px 0;
}

p.copyright{
	width:100%;
	font-size:11px;
	font-family: myriad-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	color: rgb(255,255,255);
	letter-spacing: 1px;
}

.footer-logo{
	width:200px;
	height:59px;
	display: block;
	margin: 0 auto 0 auto;
	background:url(../images/footer-logo.svg) no-repeat;
	background-size:200px 59px;
	margin-bottom:64px;
	text-indent:-9999px;
}


@media screen and (min-width: 768px) {
.pc{
	display:block;
}

.sp{
	display: none;
}

	
	section#cover{
	width:100%;
	height:auto;
	display:block;
	padding:0;	
	z-index:2;
	background:none;
	background-size:cover;
}

	section#cover img{
		width:100%;
		height:auto;
	}

	
h1.home-title{
	width:219px;
	height:88px;
	top:0;
}

h1.home-title a{
	width:219px;
	height:88px;
	background-size:219px 88px;
}

	h2.header-page{
	font-size:40px;
	letter-spacing: 2px;
	padding-bottom:8px;
	}
	
	h2.header-page span.title-ruby{
		font-size:12px;
		margin-top:12px;
	}

p.time{
	margin-bottom:48px;
}

p.comment{
	padding:0;
	margin:0 auto 96px auto;
}

.wrapper{
	margin:75px auto;
}

section{
	padding:48px 0;
}

section#information{
	padding:75px 0 0 0;
}
	
/* 	GRID */
.grid01{width:4.2%;}
.grid02{width:8.3%;}
.grid03{width:12.5%;}
.grid04{width:16.7%;}
.grid05{width:18%;}
.grid06{width:25%;} 
.grid07{width:29.2%;}
.grid08{width:33.3%;padding:16px; display: inline-block; vertical-align: top;} 
.index a .grid08{width:31.3%;margin:1%;}
.grid09{width:37.5%;}
.grid10{width:41.7%;}
.grid11{width:45.8%;}
.grid12{width:50%;padding:16px;  display: inline-block; vertical-align: top;}
.grid13{width:54.2%;}
.grid14{width:58.3%;}
.grid15{width:62.5%;}
.grid16{width:66.7%;}
.grid17{width:78%;}
.grid18{width:75%;}
.grid19{width:79.2%;}
.grid20{width:83.3%;}
.grid21{width:87.5%;}
.grid22{width:91.7%;}
.grid23{width:95.8%;}
.grid24{width:100%;}

.grid12 img{
	margin-bottom:0;
}

.grid12.left{
	padding-right:40px;
	margin-bottom:0px;
	border-right:1px solid rgba(255,255,255,1);
}

.grid12.right{
	padding-left:40px;
	margin-bottom:0px;
}


dl.profile-list dt{
	width:18%;
	display:inline-block;
	vertical-align: top;
	font-weight: normal;
		margin:0 0 8px 0;
	padding:0 0 8px 0;
	border-bottom:1px solid #ddd;
}

dl.profile-list dd{
	width:70%;
	display:inline-block;	
	border-bottom:none;
	margin-left:2%;
}

.contact-left{
	width:50%;
	display:inline-block;
	vertical-align: top;
	box-sizing:border-box;
	padding:0 16px 0 0;   
	vertical-align: top;
}

.contact-right{
	width:50%;
	display:inline-block;
	box-sizing:border-box;
	padding:0 0 0 16px;   
	vertical-align: top;
}

.google-calendar iframe {
	height: 600px;
  }

/* CONTACT */

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {

	ul.social li.icon-facebook a{
		background:url(images/icon-social@2x.png) no-repeat;
		background-position: -48px top;
		background-size:88px 84px;
	}
	
	ul.social li.icon-facebook a:hover{
		background:url(images/icon-social@2x.png) no-repeat;
		background-position: -48px bottom;	
		background-size:88px 84px;
	}
	
	ul.social li.icon-instagram a{
		background:url(images/icon-social@2x.png) no-repeat;
		background-position: left top;
		background-size:88px 84px;
	}
	
	ul.social li.icon-instagram a:hover{
		background:url(images/icon-social@2x.png) no-repeat;
		background-position: left bottom;	
		background-size:88px 84px;
	}
	.icon-about a{
		background:url(images/icon-about@2x.png) no-repeat;
		background-position:left top;
		background-size:101px 78px;
	}
	.icon-about a:hover{
		background:url(images/icon-about@2x.png) no-repeat;
		background-position:-51px top;
		background-size:101px 78px;
	}

}