@charset "utf-8";
/*body
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	font: 14px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";	/*文字サイズ/行間、フォントファミリー*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{
	margin: 0px;
	padding: 0px;
}
ul{
	list-style-type: none;
}
img {
	border: none;
	vertical-align: bottom;
}
input,textarea,select {
	font-size: 1em;
}
form {
	margin: 0px;
}
table {
	border-collapse:collapse;
	font-size: 100%;
	border-spacing: 0;
}

/*link
---------------------------------------------------------------------------*/
a {
	color: #89C1CC;
}
a:hover {
	/*color: #ff8b00;*/
	color: #000000;
	text-decoration: none;
}

/*h1
---------------------------------------------------------------------------*/
h1{
	text-indent: -9999px;
	height: 2px;
}

h1 a {
	text-decoration: none;
	color: #602100;
}

/*max-w
---------------------------------------------------------------------------*/
#contents {
	width: 100%;
    margin: 0 auto;
}

/*header
---------------------------------------------------------------------------*/
header {
	width:100%;
	margin:0 auto;
}

.img-main{
	border: none;
    vertical-align: bottom;
    margin: 0 auto;
    width: 100%;
	}

/*text
---------------------------------------------------------------------------*/
#contents h2 {
	background-color: #F9D85B;
    -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
    box-shadow: 1px 2px 2px rgba(0,0,0,0.5);
    font-size: 28px;
    color: #000000;
    clear: both;
    padding: 3% 0;
    text-align: center;
	font-family: -webkit-pictograph;

}

.line-b{
		background-color: #fff;
}

/*section01
---------------------------------------------------------------------------*/
#section01 {
	width: 100%;
    height: auto;
    padding: 0% 0 5%;
	background: url(../images/sample.jpg) no-repeat center;
	-webkit-background-size: cover;
	background-size:cover;
	position: relative;
}

#section01  p {
    font-size: 12px;
    color: #FFF;
    font-family: -webkit-pictograph;
    line-height: normal;
    text-align: justify;
    padding: 2% 2%;
}

#section01 h4 {
	font-size: 22px;
    color: #fff;
    font-family: -webkit-pictograph;
}

#section01 h3 {
	font-size: 16px;
	color:#fff;
	font-family: -webkit-pictograph;
	line-height: 3em;
}

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

	*::before,
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.panel-in::before,

.panel-in::before {
    content: "";
    position: absolute;
    background-clip: content-box;
    width: 100%;
    height: 100%;
    padding: 30px;
    top: 0;
    left: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}
.panel-in {
    padding: 5%;
    position: relative;
}
.panel-main {
    padding: 30px;
    z-index: 30;
    position: relative;
    margin-bottom: 0;
    border: solid 1px rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.4);
}

.area {
		display: box;
		display: -webkit-box;
		display: -moz-box;
		box-pack: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
}
.item {
		width: 30%;
		font-size: 32px;
		line-height: 100px;
		text-align: center;
}

.item:nth-child(1) {background-color: #000000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
.item:nth-child(2) {background-color: #EF4431;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
.item:nth-child(3) {background-color: #000000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}

.area2 {
		display: box;
		display: -webkit-box;
		display: -moz-box;
		box-pack: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
}
.item2 {
		width: 30%;
		font-size: 32px;
		line-height: 100px;
		text-align: center;
}
.item2:nth-child(1) {background-color: #003E80;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
.item2:nth-child(2) {background-color: #0D8000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
.item2:nth-child(3) {background-color: #003E80;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}

/*section02
---------------------------------------------------------------------------*/
#section02 {
	width: 100%;
    height: auto;
    padding: 5% 0 5%;
}

#section02 h4 {
	font-size: 22px;
    color: #000000;
    font-family: -webkit-pictograph;
    padding:15% 0% 5%;
}

.image-left {
    width: 100%;
    height: auto;
    float: left;
}

/*section03
---------------------------------------------------------------------------*/
#section03 {
	width: 100%;
    height: auto;
    padding: 0% 0 5%;
	-webkit-background-size: cover;
	background-size:cover;
	position: relative;
}

#section03  p {
    font-size: 12px;
    color: #000000;
    font-family: -webkit-pictograph;
    text-align: center;
    line-height: initial;
    text-align: justify;
	padding: 1% 2%;
}

#section03 h4 {
	font-size: 22px;
    color: #000000;
    font-family: -webkit-pictograph;
}

#section03 h3 {
	font-size: 20px;
    color: #fff;
    font-family: -webkit-pictograph;
    line-height: 3em;
    background-color: #747472;
}

.area3 {
		display: box;
		display: -webkit-box;
		display: -moz-box;
		box-pack: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		margin: 0 auto;
        padding-top: 5%;
        width: 94%;
}
.item3 {
		width: 21%;
		height: 100%;
        margin: 0 2%;
        line-height: 75px;
        text-align: center;
        border: solid 1px #999999;
}
.item3:nth-child(1) {background-color: #fff;}
.item3:nth-child(2) {background-color: #fff;}
.item3:nth-child(3) {background-color: #fff;}
.item3:nth-child(4) {background-color: #fff;}

.image-center {
    width: 100%;
    height: auto;
    float: left;
}

label {
   font-size: 16px;
   color: #000000;
   line-height: 3em;
   border: dotted;
   padding: 2% 5%;
}

input[type="checkbox"].on-off{
    display: none;
}

.menu ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    font-size: 13px;
    color: #000000;
    font-family: -webkit-pictograph;
    text-align: center;
    line-height: 1.5em;
    text-align: justify;
    padding: 0% 1%;
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
    height: 300px;
}

/*section04
---------------------------------------------------------------------------*/
#section04 {
	width: 100%;
    height: auto;
    padding: 5% 0 0%;
	background: url(../images/sample02.jpg) no-repeat center;
	-webkit-background-size: cover;
	background-size:cover;
	position: relative;
}

#section04  p {
    font-size: 15px;
    color: #fff;
    font-family: -webkit-pictograph;
    line-height: initial;
    text-align: justify;
	padding: 1% 2%;
}


*::before,
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.panel-in::before,

.panel-in::before {
    content: "";
    position: absolute;
    background-clip: content-box;
    width: 100%;
    height: 100%;
    padding: 30px;
    top: 0;
    left: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.panel-in {
    padding: 5%;
    position: relative;
}

.panel-main {
    padding: 30px;
    z-index: 30;
    position: relative;
    margin-bottom: 0;
    border: solid 1px rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.4);
}

/*section05
---------------------------------------------------------------------------*/
#section05 {
	width: 100%;
    height: auto;
    padding: 5% 0 5%;
}

#section05 h4 {
	font-size: 22px;
    color: #000000;
    font-family: -webkit-pictograph;
    padding:15% 0% 5%;
}

.image-left {
    width: 100%;
    height: auto;
    float: left;
}

.flexbox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.flexbox2 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* 
TABLE
================================================ */
table {
    width: 100%;
    border-bottom: 1px solid #ddd;
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
}
th, td {
    text-align: center;
}
tr:nth-child(even)>td,
tr:nth-child(even)>th {
    background-color: #efefef;
}
th,
.plan-price {
    color: #fff;
	font-size: 25px;
}
.plan-price {
    font-size: 2rem;;
  　border-top: 1px solid rgba(255,255,255,.2);
}
.plan-price span {
    font-size: 1rem;
}

/* Background colour */
.plan-free th,
.plan-free .plan-price {
    background: linear-gradient(-90deg, #009ADB, #00DB9A);
}
.plan-premium th,
.plan-premium .plan-price {
    background: linear-gradient(-90deg, #EE52FF, #009ADB);
}

/* 
BUTTON
================================================ */
.btn{
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    background: #6fc173;
    border-radius: 5px;
    box-shadow: 0 3px #449f49 ;
    position: relative;
    display: inline-block;
    top: -2px;
    padding: 15px;
    width: 80%;
    text-align: center;
    margin: 10px 0;
}
.btn:hover {
    box-shadow: 0 1px #449f49;
    top: 1px;
}

/* 
LARGE DISPLAY
================================================ */
@media ( min-width : 700px ){
    .flexbox {
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 50%;
    margin-top: 8%;
	float:left;
}
   
.flexbox2 {
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 50%;
	margin: 0 auto;
	float:left;
}   
   
.plan-table {
	width:92%;  
    padding: 1%;
}

}

/*section06
---------------------------------------------------------------------------*/

#section06 {
	width: 100%;
    height: auto;
    padding: 0% 0 5%;
}

#section06 h4 {
	font-size: 22px;
    color: #000000;
    font-family: -webkit-pictograph;
    padding:15% 0% 5%;
}

.image-left2 {
    width: 30%;
    height: auto;
    float: left;
    margin: 2%;
}

/*section07
---------------------------------------------------------------------------*/
#section07 {
	width: 100%;
    height: auto;
}

#section07 h4 {
	font-size: 22px;
    color: #000000;
    font-family: -webkit-pictograph;
    padding: 10% 0 5%;
}

#section07 .image-left {
    width: 75%;
    height: auto;
    float: left;
    margin: 10% 0 5% 20%;
}

/*box
---------------------------------------------------------------------------*/
.left-box{
	width: 45%;
    height: auto;
	margin-bottom: 5%;
	float: left;
}
	
.right-box{
	width: 46%;
    height: auto;
    float: left;
}
	
.right-box p{
	color:#000;
	text-align: justify; 
}		

.left-box p{
	margin: 0 0 8% 5%;
	color:#000; 
}
	
.left-box2{
	width: 45%;
    height: auto;
    float: left;
    margin: 5% 2% 2% 2%;
}
	
.voice{
	color: #353030;
    text-align: justify;
    font-size: 13px;
    float: left;
    width: 60%;
    border: solid 5px #79BFA6;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 2%;
}	
	
.right-box2{
	width: 45%;
    height: auto;
    float: left;
    margin: 5% 2.5%;
}	


.left-box3{
	width: 45%;
    height: auto;
    float: left;
    margin:0% 2.5% 5%;
}
	
.right-box3{
	width: 45%;
    height: auto;
    float: left;
    margin: 0% 2.5% 5%;
}	

.tx-right {
	width: auto;
	margin-top: 30px;
}

.left-box4{
	width: 45%;
    height: auto;
	margin-bottom: 5%;
}
	
.right-box4{
	width: 46%;
    height: auto;
    float: left;
	padding-left: 2%;
}	

.left-box5{
	width: 30%;
    height: auto;
    margin: 0 5%;;
    float: left;
}


.btn {
	text-decoration: none;
    font-weight: bold;
    text-align: center;
    display: block;
    background: #89C1CC;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    color: #111;
    width: 100px;
    padding: 1% 5%;
    margin:6% 0 12% 5%;
}

.btn-center {
	text-decoration: none;
    font-weight: bold;
    text-align: center;
    display: block;
    background: #89C1CC;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    color: #111;
    width: 100px;
    padding: 0.7% 4%;
	margin: 5% auto;
}

.btn-tel {
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    display: block;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    color: #fff;
    width: 70%;
    padding: 1% 0%;
    margin: 40% auto 0%;
    font-size: x-large;
    font-family: serif;
    background-image: -moz-linear-gradient( top, #ffa035 0%, #ff8300);
    background-image: -webkit-gradient( linear,left top,left bottom, from(#ffa035), to(#ff8300));}

.btn:hover {
	background-color: #1ab0ec;
	background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}

.btn-center:hover {
	background-color: #1ab0ec;
	background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}

.btn:active {
	top: 3px;
	box-shadow: none;
}


/*section08
---------------------------------------------------------------------------*/
#section08 {
	width: 100%;
    height: auto;
	background-color: #fff;
	-webkit-background-size: cover;
	background-size:cover;
	position: relative;
}

#section08  p {
    font-size: 16px;
    color: #000000;
    font-family: serif;
    line-height: initial;
    text-align: center;
	padding: 1% 2%;
}

#section08  h3 {
    font-size: 1.5em;
    color: #000000;
    font-family: -webkit-pictograph;
    line-height: initial;
    text-align: center;
	padding: 1% 2%;
}

	*::before,
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.panel-in2::before,

.panel-in2::before {
    content: "";
    position: absolute;
    background-clip: content-box;
    width: 100%;
    height: 100%;
    padding: 30px;
    top: 0;
    left: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}
.panel-in2 {
    padding: 0 25% 0;
    position: relative;
}
.panel-main2 {
    padding-bottom: 6%;
    z-index: 30;
    position: relative;
    margin-top: 5%;
    border: solid 1px rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.4);
}

/*section09
---------------------------------------------------------------------------*/

#section09 {
	width: 100%;
    height: auto;
    padding: 1% 0% 5%;
	background: url(../images/tel.jpg) no-repeat ;
	background-size: auto 100% ;
}

#section09 h3 {
	width: 885px;
    font-size: 3em;
    color: #000000;
    padding: 0% 20%;
    background-color: #ff8b00;
}

.demo02{
	width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0% 10%;
}

.demo02 a {
    width: 885px;
    height: 500px;
	background: url(../images/tel03.jpg) no-repeat ;
	background-size: 1.77:1 ;
    display: block;
    text-indent: -9999px;
	border: solid 10px #ff8b00;
}
 
.demo02 a:hover {
    background-position: 0 -500px;
}

/*footer
---------------------------------------------------------------------------*/
footer {
    width: 100%;
    clear: both;
    text-align: center;
    padding: 40px 0;
    color: #FFF;
    background-color: #333333;
}

.page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background: #7e7a7a;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 12px;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

/*madia-PC
---------------------------------------------------------------------------*/
@media (min-width:800px){

.panel-in-sp{
	display:none;
}
	
.sp {
	display:none;
}	

}

/*media-sp
---------------------------------------------------------------------------*/
@media (max-width:799px){
	
.pc {
	display:none;
}	
	
.panel-in{
	display:none;
}
	
#contents h2 {
	background-color: #F9D85B;
    font-size:  1.2em;
    color: #000000;
    clear: both;
    text-align: center;
	font-family: serif;
}

/*section01
---------------------------------------------------------------------------*/
#section01 {
	width: 100%;
    height: auto;
    padding: 0% 0 5%;
	background: url(../images/sample.jpg) no-repeat center;
	-webkit-background-size: cover;
	background-size:cover;
	position: relative;
}

#section01  p {
    font-size: 12px;
    color: #FFF;
    font-family: serif;
    line-height: initial;
    text-align: justify;
	padding: 1% 2%;
}

#section01 h4 {
	font-size: 1em;
    color: #000000;
    font-family: serif;
}

#section01 h3 {
	font-size: 16px;
	color:#fff;
	font-family: serif;
	line-height: 3em;
}

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

*::before,
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.panel-in-sp::before,

.panel-in-sp::before {
    content: "";
    position: absolute;
    background-clip: content-box;
    width: 100%;
    height: 100%;
    padding: 30px;
    top: 0;
    left: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.panel-in-sp {
    padding: 5%;
    position: relative;
}

.panel-main {
    padding: 30px;
    z-index: 30;
    position: relative;
    margin-bottom: 0;
    border: solid 1px rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.4);
}

.item {
	width: 90%;
    font-size: 1em;
    line-height: auto;
    text-align: center;
    margin: 0 auto;
}

.item:nth-child(1) {background-color: #000000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
.item:nth-child(2) {background-color: #EF4431;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
.item:nth-child(3) {background-color: #000000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}

.item2 {
	width: 90%;
    font-size: 32px;
    line-height: 100px;
    text-align: center;
    margin: 0 auto;	
}

.item2:nth-child(1) {background-color: #003E80;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
.item2:nth-child(2) {background-color: #0D8000;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}
.item2:nth-child(3) {background-color: #003E80;filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;}	
	
/*section02
---------------------------------------------------------------------------*/
#section02 {
	width: 100%;
    height: auto;
    padding: 5% 0 5%;
}

#section02 h4 {
    font-size: 1.2em;
    color: #000000;
    font-family: serif;
    padding: 0% 0% 3%;
	text-align: center;
}

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

/*section03
---------------------------------------------------------------------------*/
#section03 {
	width: 100%;
    height: auto;
    padding: 0% 0 5%;
	-webkit-background-size: cover;
	background-size:cover;
	position: relative;
}

.item3 {
		width: 90%;
		height: 100%;
        margin: 2% 5%;
        line-height: 75px;
        text-align: center;
        border: solid 1px #999999;
}

.item3 p {
    font-size: 1em;
    color: #000000;
    font-family: serif;
    line-height: initial;
    text-align: justify;
	padding: 1% 2%;
	margin:1%;
}

.item3 h4 {
	font-size: 1em;
    color: #000000;
    font-family: -webkit-pictograph;
}

.item3 h3 {
    color: #fff;
    font-family: serif;
    background-color: #747472;
}

.image-center {
    width: 100%;
    height: auto;
	margin:0 0 2% 0;	
}

/*section04
---------------------------------------------------------------------------*/
#section04 {
	width: 100%;
    height: auto;
    padding: 0% 0 5%;
	background: url(../images/sample.jpg) no-repeat center;
	-webkit-background-size: cover;
	background-size:cover;
	position: relative;
}
	
#section04  p {
    font-size: 15px;
    color: #000000;
    font-family: serif;
    line-height: initial;
    text-align: justify;
	padding: 1% 2%;
}

.panel-in-sp::before,

.panel-in-sp::before {
    content: "";
    position: absolute;
    background-clip: content-box;
    width: 100%;
    height: 100%;
    padding: 30px;
    top: 0;
    left: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.panel-in-sp {
    padding: 5%;
    position: relative;
}

.panel-main {
    padding: 30px;
    z-index: 30;
    position: relative;
    margin-bottom: 0;
    border: solid 1px rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.4);
}

/*section05
---------------------------------------------------------------------------*/
#section05 {
	width: 100%;
    height: auto;
}

#section05 h4 {
	font-size: 22px;
    color: #000000;
    font-family: -webkit-pictograph;
    padding:15% 0% 5%;
}

.image-left {
    width: 100%;
    height: auto;
    float: left;
}

.flexbox {
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 90%;
    margin: 2% 5% 0 5%;
	float:left;
}
   
.flexbox2 {
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 90%;
	margin: 0% 5% 0 5%;
	float:left;
}  
   
.plan-price {
    color: #fff;
}

th,
.plan-price {
    color: #fff;
	font-size: 1.5em;
	border-top: 1px solid rgba(255,255,255,.2);
}

.plan-price span {
    font-size: 1rem;
}
  
.plan-table {
	width:92%;  
    padding: 1%;
}



.left-box5{
	width: 25%;
    height: auto;
    margin: 0 5%;;
    float: left;
}

/*section06
---------------------------------------------------------------------------*/
#section06 {
	width: 100%;
    height: auto;
    padding: 0% 0 5%;
}

.image-left2 {
    width: 100%;
    height: auto;
    float: left;
	margin: 3% 0% 3% 0%;
}

/*section07
---------------------------------------------------------------------------*/
#section07 h4 {
    color: #000000;
	text-align:center;
	padding: 10% 0 0;
	font-family: serif;
}

#section07 p {
	font-size: 1em;
    color: #000000;
	margin:5%;
	font-family: serif;
}

/*BOX
---------------------------------------------------------------------------*/
.left-box {
    width: 90%;
    height: auto;
    margin: 2% 5% 5%;
}

.right-box {
    width: 90%;
    height: auto;
    margin: 5%;
}

.left-box2{
	width: 45%;
    height: auto;
    float: left;
    margin: 5% 2%;
}
	
.voice{
	color: #353030;
    text-align: justify;
    font-size: 13px;
    float: left;
    width: 100%;
    border: solid 5px #79BFA6;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 2%;
    margin: 1% 0% 5%;
	background-color: ghostwhite;
}	
	
.right-box2{
	width: 45%;
    height: auto;
    float: left;
    margin: 5% 2.5%;
}	

.left-box3{
	width: 45%;
    height: auto;
    float: left;
    margin:0% 2.5% 5%;
}
	
.right-box3{
	width: 45%;
    height: auto;
    float: left;
    margin: 0% 2.5% 5%;
}	
	
.box{
	width:90%;
	height:auto;
	margin:0 auto;
}	
	
/*section08
---------------------------------------------------------------------------*/
#section08 {
	width: 100%;
    height: auto;
	background-color: #fff;
	-webkit-background-size: cover;
	background-size:cover;
	position: relative;
	padding-bottom:5%;
}

#section08  p  {
    font-size: 1em;
    color: #000000;
    text-align: center;
	padding: 2% 2% 0%;
	font-family: serif;
}

#section08  .text-none{
	margin-top:5%;
}
	
#section08  h3 {
    font-size: 1.5em;
    color: #000000;
    font-family: serif;
    line-height: initial;
    text-align: center;
}	
	
}	

/*map
---------------------------------------------------------------------------*/
.google-maps {
position: relative;
padding-bottom: 45%; 
height: 0;
overflow: hidden;
}

.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 96% !important;
height: 100% !important;
margin:0 2%;
}

@media (max-width:799px){

.google-maps {
position: relative;
padding-bottom: 60%;
height: 0;
overflow: hidden;
margin: 0px -1%;
width: 100%;
}

.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}		
	
}

/*youtube
---------------------------------------------------------------------------*/
.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
	margin: 5% 0 0 0;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 94%;
    height: 94%;
	border: ridge 5px;
	margin:0 3%;
}

/*menu
---------------------------------------------------------------------------*/
#menu{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#menu li{
  display: block;
  float: left;
  width: 12.5%;
  margin: 0;
  padding: 0; 
}
  
#menu li a{
  display: block;
  padding: 12px 0 10px;
  background: #333;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

#menu li a:hover{
  background: #444;
}

#toggle{
 display: none;
}

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

@media only screen and (max-width: 480px) {
#menu{
    display: none;
}

 #menu li{
    width: 100%;
}
 
#toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #222;
}

#toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    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: #fff;
}

#toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222;
}

#toggle a:before{
    margin-top: -6px;
}

#toggle a:after{
    margin-top: 2px;
}
}

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

@media only screen and (max-width: 480px) {
#menu{
    display: none;
}

#menu li{
    width: 100%;
}

#toggle{
  display: block;
  position: relative;
  width: 100%;
  background: #222;
}

#toggle a{
  display: block;
  position: relative;
  padding: 12px 0 10px;
  border-bottom: 1px solid #444;
  color: #fff;
  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: #fff;
}

#toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222;
}

#toggle a:before{
    margin-top: -6px;
}

#toggle a:after{
    margin-top: 2px;
}
}