@charset "UTF-8"
@-ms-viewport {width: device-width;
}
html{height: ;}
body {height: ; 
margin: 0;}
.container {overflow: hidden;}
.none {display: none;} .main-box4{width: 100%;
margin: 0;
padding: 50px 0;
background-color: #000000;
display: display inline-block;
text-align: center;} .top {margin: 0 auto;
background-color: white;
position: relative;}
#stage {
position: relative;
width: 100%;
margin: 0 auto;
background:#FFFFFF;
}
.pic {
position: absolute;
text-align: center;
margin: 0 auto;
}
.pic img {
max-width: 3840px;
height: 100vh;
margin: 0 auto;
opacity:0;
-moz-animation: imgTrans 40s infinite;
-webkit-animation: imgTrans 40s ease-in infinite;
animation: imgTrans 40s infinite;
}
@media only screen and (max-width: 568px) {
.pic img {margin-left: -550px;}
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;}
#photo4 img{
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
animation-delay: 24s;}
#photo5 img {
-moz-animation-delay: 32s;
-webkit-animation-delay: 32s;
animation-delay: 32s;}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
.top p {position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0; font-size: 40px;
color: rgba(10,10,10,0.8)
} .top-2 img {
height: 10%;
margin: 50px 0 0 0;
padding: 0;}
.top-2 h1 {position: absolute;
top: 30%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0; font-size: 40px;
color: rgba(255,255,255,1)} .inner {width: 100%;
max-width: 1200px;
height: 20px;
margin: 0 auto;
padding: 0;
position: relative;}
.inner:after {content:"";
clear: both;
display: block;} #top-head {top: -100px;
position: absolute;
width: 100%;
margin: 80px auto 0 auto;
padding: 0;
line-height: 1;
z-index: 999;}
#top-head a,
#top-head {color: #222222;
text-decoration: none;}
#top-head .inner {position: relative;}
#top-head .logo {float: left;
position: relative;
font-size: 20px;
width: 300px;
margin: 35px 10px 0 10px;}
#top-head .logo a {position: absolute;
width: 100%;
height: 50px;}
#global-nav ul {list-style: none;
position: absolute;
top: 20px;
right: 10px;
font-size: 14px;}
#global-nav ul li {float: left;
padding:0 30px;}
#global-nav ul li a {padding: 5px 5px;
position: relative;
display: inline-block;}
#global-nav ul li a::after {content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color: #222;
-webkit-transition: all .3s ease;
transition: all .3s ease;}
#global-nav ul li a:hover::after {-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);}
nav span{background:#666;
height:2px;
display:block;
position:relative;
width:50px;
left:0;} #top-head.fixed {margin-top: 0;
top: 0;
position: fixed;
padding: 0px;
background: #fff;
background: rgba(255,255,255,.9);
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;}
#top-head.fixed .logo {position: relative;
font-size: 24px;
color: #000;}
#top-head.fixed .logo a {position: absolute;
width: 100%;
height: 30px;}
#top-head.fixed #global-nav ul li a {color: #333;
padding: 0 10px;
margin: -10px 0 0 0;
padding-bottom: 10px;} #nav-toggle {display: none;
position: absolute;
right: 12px;
top: 14px;
width: 34px;
height: 36px;
cursor: pointer;
z-index: 101;}
#nav-toggle div {position: relative;}
#nav-toggle span {display: block;
position: absolute;
height: 4px;
width: 100%;
background: #000;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}  @media screen and (max-width: 767px) {
.head-inner {display: none;}
.slick-next {right: 0;}
#top-head,
.inner {width: 100%;
padding: 0;}
#top-head {top: 0;
position: fixed;
margin-top: 0;} #top-head.fixed {padding-top: 0;
background: transparent;}
#mobile-head {background: #fff;
width: 100%;
height: 56px;
z-index: 999;
position: relative;}
#top-head.fixed .logo,
#top-head .logo {position: absolute;
left: 13px;
height: 50px;
top: 15px;
color: #333;
font-size: 26px;}
#global-nav {position: absolute; top: -500px;
background: #000;
width: 100%;
text-align: center;
padding: 10px 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;}
#global-nav ul {list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 14px;}
#global-nav ul li {float: none;
position: static;
padding: 18px 0;
color: #fff;}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {width: 100%;
display: block;
color: #fff;
padding: 18px 0;}
#nav-toggle {display: block;} .open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
} .open #global-nav { -moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
} @media screen and (max-width: 1024px) {
.head-inner {display: none;}
.slick-next {right: 0;}
#top-head,
.inner {width: 100%;
padding: 0;}
#top-head {top: 0;
position: fixed;
margin-top: 0;} #top-head.fixed {padding-top: 0;
background: transparent;}
#mobile-head {background: #fff;
width: 100%;
height: 70px;
z-index: 999;
position: relative;}
#top-head.fixed .logo,
#top-head .logo {position: absolute;
left: 13px;
height: 50px;
top: -15px;
color: #000;
font-size: 26px;}
#top-head.fixed .logo img,
#top-head .logo img{margin: -30px 5px 0 5px;
padding: 0;}
#global-nav {position: absolute; top: -500px;
background: #eee;
width: 100%;
text-align: left;
padding: 10px;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;}
#global-nav ul {list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 14px;}
#global-nav ul li {float: none;
position: static;
padding: 18px 0;
color: #000;}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {width: 100%;
display: block;
color: #000;
padding: 18px 0;}
#nav-toggle {display: block;
right: 25px;
top: 20px;} .open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
} .open #global-nav { -moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
} .open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
} dl.search{
position:relative;
background-color:#fff;
border:1px solid #aaa;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
border-radius:6px;
}
dl.search dt{
margin-right: 0px;
padding: 8px 0 8px 8px;
}
dl.search dt input{
width:100%;
height:12px;
line-height:12px;
background:none;
border:none;
}
dl.search dd{
position:absolute;
top:0;
right:0;
}
dl.search dd button{
display: inline-block;
padding:7px;
background: none;
border: none;
}
dl.search dd button span{
display:block;
width:20px;
height:20px;
background:url(//marina-hagi.com/images/search.png) no-repeat scroll 0 0;} .search {width: 50%;
margin: 30px 0px 5px 0px;
padding: 0;
float: right;
display: inline-block;}
@media screen and (max-width: 1024px) {
.search {width: 70%;
margin: -5px 10px 0 10px;
padding: 0;
float: left;
display: inline-block;}
} .main-box {width: 100%;
margin: 0;
padding: 50px 0;
text-align: center;}
.main-box2 {width: 100%;
margin: 0;
padding: 50px 0;
background-color: #efefef;
text-align: center;}
.main-box3 {width: 100%;
margin: 0;
padding: 50px 0;
background-color: #00BFFF;
text-align: center;}
.youtube iframe{width: 78%;
margin: 0 auto;
padding: 0;
text-align: center;}
@media only screen and (max-width: 568px) {
.youtube iframe{width: 100%;
margin: 0;
padding: 0;
text-align: center;
float: center;}
} .pan-box {width: 100%;
margin: 0;
padding: 0;
text-align: center;}
.pan {width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0;
display: inline-block;}
.pan p {color:#444444;
font-size: 12px;
line-height: 1.5em;
letter-spacing: 0.6pt;}
.pan a {color: #00BFFF;
text-decoration: none;}
.pan a:hover{color: #1E90FF;
text-decoration: border;}
.breadcrumbs {font-size: 10px;} .main {width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: inline-block;}
@media only screen and (max-width: 1024px) {
.main {width: 100%;
margin: 0 10px;
padding: 0;
display: inline-block;}
}
@media only screen and (max-width: 568px) {
.main {width: 100%;
margin: 0;
padding: 0;
display: inline-block;}
}
.main h1 {text-align: center;
color: #111111;
margin: 30px 5px;
padding: 0;
font-size: 30px;}
.main-t h1 {text-align: center;
color: #111111;
margin: 30px 5px;
padding: 0;
font-size: 30px;}
.main h2 {text-align: center;
color: #222222;
margin: 30px 5px;
padding: 5px 10px;
font-size: 26px;
border-bottom: 1px solid #222222;}
@media only screen and (max-width: 568px) {
.main h2 {text-align: center;
color: #222222;
margin: 30px 0px;
padding: 0;
font-size: 26px;
border-bottom: 1px solid #222222;}
}
.main-t h2 {text-align: center;
color: #222222;
margin: 30px 5px;
padding: 5px 10px;
font-size: 26px;
border-bottom: 1px solid #222222;}
.main h3 {text-align: center;
color: #222222;
margin: 30px 5px;
padding: 5px 10px;
font-size: 22px;
display: block;}
@media only screen and (max-width: 568px) {
.main h3 {text-align: center;
color: #222222;
margin: 30px 0;
padding: 0;
font-size: 22px;
display: block;}
}
.main-t {width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0px;}
.main-t h3 {text-align: center;
color: #222222;
margin: 30px 5px;
padding: 5px 10px;
font-size: 22px;}
.main h4 {text-align: center;
color: #333333;
margin: 20px 10px;
padding: 5px 10px;
font-size: 18px;
display: block;}
.main p {text-align: center;
color: #444444;
margin: 30px 10px;
padding: 0;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;}
.main-t p {text-align: center;
color: #444444;
margin: 30px 10px;
padding: 0;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;}
.main .link-a {margin: 30px 0 0 0;
padding: 20px 50px;
text-align: center;
text-decoration: none;
                     background-color: #00BFFF;
color: #FFFFFF;
display: inline-block;}
.main .link-a:hover {background-color: #1E90FF;} .left p{aligin: left;}
.box-S {width: 100%;
margin: 10px 0;
padding: 0;
display: inline-block;}
.box-S .text-S-A {width: 40%;
text-align: center;
color: #444444;
margin: 30px 10px;
padding: 0;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;
float: right;}
.box-S .text-S-B {width: 40%;
text-align: center;
color: #444444;
margin: 30px 10px;
padding: 0;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;
float: left;}
@media only screen and (max-width: 568px) {
.box-S {width: 95%;
margin: 10px auto;
padding: 0;
display: inline-block;}
.box-S .text-S-A {width: 100%;
text-align: center;
color: #444444;
margin: 30px 0;
padding: 0;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;
float: left;}
.box-S .text-S-B {width: 100%;
text-align: center;
color: #444444;
margin: 30px 0;
padding: 0;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;
float: left;}
} .main .m-imgA {width: 50%;
margin: 10px auto;
padding: 0;
float: left;
display: inline-block;}
@media only screen and (max-width: 568px) {
.main .m-imgA {width: 100%;
margin: 10px 0;
padding: 0;
text-align: center;
float: left;}
} .main .m-imgB {width: 50%;
margin: 10px auto;
padding: 0;
float: right;
display: inline-block;}
@media only screen and (max-width: 568px) {
.main .m-imgB {width: 100%;
margin: 10px 0;
padding: 0;
text-align: center;
float: left;}
} .main a {margin: 30px 0 0 0;
padding: 20px 50px 20px 50px;
text-align: center;
text-decoration: none;
background-color: #00BFFF;
color: #FFFFFF;
display: inline-block;}
.main a:hover {background-color: #1E90FF;}
.main-t a {margin: 30px 0 0 0;
padding: 20px 50px;
text-align: center;
text-decoration: none;
background-color: #00BFFF;
color: #FFFFFF;
display: inline-block;}
.main-t a:hover {background-color: #1E90FF;}
.main .dwin{
margin: 0;
padding: 0;
background: none;
}
.main .dwin:hover{
background: none;
}
.main .dwin img{
width: 100px;
height: auto;
margin: 0;
padding: 5px;
} .main ul li {list-style-type: square;
text-align: left;
color: #444444;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;}  .category-box {width: 100%;
margin: 0;
padding: 0;
display: inline-block;}
.category1  h1{font-size: 50px;
color: #FFFFFF;}
.category1 p {color: #FFFFFF;}
.category1 a {width: 21%;
height: 200px;
margin: 30px 3%;
padding: 10px 30px;
border: 1px solid #EEEEEE;
background-color: #00BFFF;
text-decoration: none;
float: left;}
.category1 a:hover {background-color: #1E90FF;}
@media only screen and (max-width: 1024px) {
.category1 a {width: 21%;
height: 200px;
margin: 30px 2.1%;
padding: 10px 30px;
border: 1px solid #EEEEEE;
background-color: #00BFFF;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 768px) {
.category1 a {width: 37%;
height: 200px;
margin: 30px 1%;
padding: 10px 30px;
border: 1px solid #EEEEEE;
background-color: #00BFFF;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 568px) {
.category-box {width: 85%;
margin: 0 auto;
padding: 0;}
.category1 {width: 90%;
margin: 0 auto;
padding: 0;}
.category1 a {width: 100%;
height: 200px;
margin: 10px 0;
padding: 0;
border: 1px solid #EEEEEE;
background-color: #00BFFF;
text-decoration: none;
float: center;}
} .category-box {width: 100%;
margin: 0;
padding: 0;
display: inline-block;}
.category2  h1{font-size: 50px;
color: #FFFFFF;}
.category2 p {color: #FFFFFF;}
.category2 a {width: 21%;
height: 200px;
margin: 30px 3%;
padding: 10px 30px;
border: 1px solid #EEEEEE;
background-color: #00BFFF;
text-decoration: none;
float: left;}
.category2 a:hover {background-color: #1E90FF;}
@media only screen and (max-width: 1024px) {
.category2 a {width: 21%;
height: 200px;
margin: 30px 2.1%;
padding: 10px 30px;
border: 1px solid #EEEEEE;
background-color: #00BFFF;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 768px) {
.category2 a {width: 37%;
height: 200px;
margin: 30px 1%;
padding: 10px 30px;
border: 1px solid #EEEEEE;
background-color: #00BFFF;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 568px) {
.category-box {width: 85%;
margin: 0 auto;
padding: 0;}
.category2 {width: 90%;
margin: 0 auto;
padding: 0;}
.category2 a {width: 100%;
height: 200px;
margin: 10px 0;
padding: 0;
border: 1px solid #EEEEEE;
background-color: #00BFFF;
text-decoration: none;
float: center;}
} .category-box {width: 100%;
margin: 0;
padding: 0;
display: inline-block;}
.categoryA  h1{font-size: 20px;
color: #FFFFFF;
background-color: #00BFFF;
margin: 0;
padding: 5px 10px;}
.categoryA  h2{font-size: 30px;
color: #222222;
margin: 0;
padding: 5px;
border: none;}
.categoryA p {color: #222222;
margin: 0 ;
padding: 5px 10px;}
.categoryA  {width: 27%;
height: 250px;
margin: 30px 3%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: left;}
@media only screen and (max-width: 1024px) {
.categoryA  {width: 27%;
height: 350px;
margin: 30px 2.1%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 768px) {
.categoryA  {width: 30%;
height: 350px;
margin: 30px 1%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 568px) {
.category-box {width: 100%;
margin: 0 auto;
padding: 0;}
.categoryA  {width: 96%;
height: auto;
margin: 10px 1.5%;
padding: 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: center;}
} .category-box {width: 100%;
margin: 0;
padding: 0;
display: inline-block;}
.categoryB  h1{font-size: 20px;
color: #FFFFFF;
background-color: #00BFFF;
margin: 0;
padding: 5px 10px;}
.categoryB  h2{font-size: 30px;
color: #222222;
margin: 0;
padding: 5px;
border: none;}
.categoryB p {color: #222222;
margin: 0 ;
padding: 5px 10px;}
.categoryB  {width: 95%;
margin: 30px 3%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #EFEFEF;
text-decoration: none;
float: left;}
@media only screen and (max-width: 568px) {
.categoryB  {width: 96%;
height: auto;
margin: 10px 1.5%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #EFEFEF;
text-decoration: none;
float: center;}
} .category-box {width: 100%;
margin: 0;
padding: 0;
display: inline-block;}
.categoryC  h1{font-size: 20px;
color: #FFFFFF;
background-color: #00BFFF;
margin: 0;
padding: 5px 10px;}
.categoryC  h2{font-size: 30px;
color: #222222;
margin: 0;
padding: 5px;
border: none;}
.categoryC  h3{font-size: 40px;
color: #FFFFFF;
background-color: #FF0000;
margin: 0;
padding: 5px;
border: none;}
.categoryC p {color: #222222;
margin: 0 ;
padding: 5px 10px;}
.categoryC  {width: 43.5%;
height: 300px;
margin: 30px 3%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: left;}
@media only screen and (max-width: 1024px) {
.categoryC  {width: 43%;
height: 350px;
margin: 30px 3%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 768px) {
.categoryC  {width: 43%;
height: 350px;
margin: 30px 3%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 568px) {
.category-box {width: 100%;
margin: 0;
padding: 0;}
.categoryC  {width: 96%;
height: auto;
margin: 10px 1.5%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: center;}
} .category-box {width: 100%;
margin: 0;
padding: 0;
display: inline-block;}
.categoryD  h1{font-size: 20px;
color: #FFFFFF;
background-color: #00BFFF;
margin: 0;
padding: 5px 10px;}
.categoryD  h2{font-size: 30px;
color: #222222;
margin: 0;
padding: 5px;
border: none;}
.categoryD p {color: #222222;
margin: 0 ;
padding: 5px 10px;}
.categoryD  {width: 95%;
margin: 30px 3%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: left;}
@media only screen and (max-width: 568px) {
.categoryD  {width: 96%;
height: auto;
margin: 10px 1.5%;
padding: 0 0 10px 0;
border: 1px solid #00BFFF;
background-color: #FFFFFF;
text-decoration: none;
float: center;}
} .info-box {width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0;
display: inline-block;}
.info {width: 44%;
height: 200px;
margin: 30px 1.9%;
padding: 10px 10px;
border: 1px solid #DDDDDD;
background-color: ;
text-decoration: none;
float: left;}
.info-img {float: left;
margin: 5px 10px;
padding: 0;}
.info-title {text-align: center;
color: #111111;
margin: 30px 5px;
padding: 0;
font-size: 30px;}
.info-title1 {text-align: left;
color: #111111;
margin: 10px 5px -30px 5px;
padding: 0;
font-size: 22px;}
.info-text {text-align: left;
margin: -10px 5px 0px 5px;
padding: 0;
color: #444444;
font-size: 14px;
line-height: 1.5em;
letter-spacing: 0.6pt;}
.slag {text-align: left;
margin: 5px 5px 0px 5px;
padding: 0;
color: #444444;
font-size: 12px;
line-height: 1.5em;
letter-spacing: 0.6pt;}
.info-more a{text-align: right;
float: right;
margin: 0px;
padding: 0;
color: #00BFFF;}
.info-more a:hover{color: #1E90FF;}
.info-link {margin: 30px 0 0 0;
padding: 20px 50px;
text-align: center;
text-decoration: none;
background-color: #00BFFF;
color: #FFFFFF;
display: inline-block;}
.info-link:hover {background-color: #1E90FF;}
@media only screen and (max-width: 1024px) {
.info {width: 43%;
height: 200px;
margin: 30px 1.9%;
padding: 10px 10px;
border: 1px solid #DDDDDD;
background-color: ;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 768px) {
.info-box {width: 100%;
margin: 0;
padding: 0;
display: inline-block;}
.info {width: 96%;
height: 100%;
margin: 10px 1.5%;
padding: 10px 0;
border: 1px solid #DDDDDD;
background-color: ;
text-decoration: none;
float: center;}
} .sub-box {width: 100%;
margin: 0;
padding: 50px 0;
background-color: #FFFFFF;
display: inline-block;}
.sub {width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;}
.link-1 {width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
display: inline-block;}
.link-1 a {margin: 30px 0;
padding: 20px 50px;
text-align: center;
text-decoration: none;
background-color: #00BFFF;
color: #FFFFFF;
display: inline-block;}
.link-1 a:hover {background-color: #1E90FF;} .sub ul {width: 44%;
height: 200px;
margin: 30px 1.9%;
padding: 10px 10px;
border: 1px solid #DDDDDD;
background-color: ;
text-decoration: none;
float: left;}
.sub .widget {width: 100%;
max-width: 1200px;
margin: 0;
padding: 0px;
list-style: none;}
.sub .widgettitle {text-align: center;
color: #111111;
margin: 30px 5px;
padding: 0;
font-size: 30px;}
.sub li a {text-align: left;
color: #111111;
margin: 10px 5px -30px 5px;
padding: 0;
font-size: 22px;}
.sub  li a:hover {color: #AA9A00;}
.sub  img {width: 100%;
margin: 0 10px;
padding: 0;
float: center;}
div.rss-antenna {width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0;}
div.rss-antenna .rss-item {width: 44%;
height: 200px;
margin: 30px 1.9%;
padding: 10px 10px;
border: 1px solid #DDDDDD;
background-color: ;
text-decoration: none;
float: left;}
div.rss-antenna .rss-item p.description,p.siteinfo {text-align: left;
margin: 5px;
padding: 0;
color: #444444;
font-size: 14px;
line-height: 1.5em;
letter-spacing: 0.6pt;
text-decoration: none;}
div.rss-antenna .rss-item p.title {text-align: left;
color: #111111;
margin: -10px 10px 10px 10px;
padding: 0;
font-size: 22px;
text-decoration: none;}
div.rss-antenna hr {border: 0;}
div.rss-antenna a {text-decoration: none;}
@media only screen and (max-width: 1024px) {
.sub-box {width: 100%;
margin: 0;
padding: 0;}
.sub {width: 100%;
margin: 0;
padding: 0;}
.sub .widget {width: 100%;
margin: 0;
padding: 0;
list-style: none;}
.sub .widgettitle {text-align: center;
color: #111111;
margin: 30px 5px;
padding: 0;
font-size: 30px;}
div.rss-antenna .rss-item {width: 43%;
height: 200px;
margin: 30px 1.9%;
padding: 10px 10px;
border: 1px solid #DDDDDD;
background-color: ;
text-decoration: none;
float: left;}
}
@media only screen and (max-width: 768px) {
.sub-box {width: 100%;
margin: 0;
padding: 0;}
.sub {width: 100%;
margin: 0;
padding: 0;}
.sub .widget {width: 100%;
margin: 0;
padding: 0;
list-style: none;}
.sub .widgettitle {text-align: center;
color: #111111;
margin: 30px 5px;
padding: 0;
font-size: 30px;}
div.rss-antenna .rss-item {width: 96%;
height: auto; 
margin: 10px 1.5%;
padding: 0;}
} .img-boxA {width: 1000px;
margin: 0 auto;
padding: 0;}
.imgA {width: 100%;}
.imgA img{width: 40%;
margin: 10px;
padding: 0;
float: left;
display: inline-block;}
@media only screen and (max-width: 1024px) {
.img-boxA {width: 100%;
margin: 0 10px;
padding: 0;}
.imgA {width: 100%;}
.imgA img{width: 30%;
margin: 10px;
padding: 0;
float: left;
display: inline-block;}
}
@media only screen and (max-width: 768px) {
.img-boxA {width: 100%;
margin: 0 10px;
padding: 0;}
.imgA {width: 100%;}
.imgA img{width: 30%;
margin: 10px;
padding: 0;
float: left;
display: inline-block;}
}
@media only screen and (max-width: 568px) {
.img-boxA {width: 95%;
margin: 0 auto;
padding: 0;}
.imgA {width: 100%;}
.imgA img{width: 100%;
margin: 0;
padding: 0;
float: center;
display: inline-block;}
} .img-boxB {width: 1000px;
margin: 0 auto;
padding: 0;}
.imgB {width: 100%;}
.imgB img{width: 40%;
margin: 10px;
padding: 0;
float: right;
display: inline-block;}
@media only screen and (max-width: 1024px) {
.img-boxB {width: 100%;
margin: 0 10px;
padding: 0;}
.imgB {width: 95%;}
.imgB img{width: 30%;
margin: 10px;
padding: 0;
float: right;
display: inline-block;}
}
@media only screen and (max-width: 768px) {
.img-boxB {width: 95%;
margin: 0 10px;
padding: 0;}
.imgB {width: 100%;}
.imgB img{width: 30%;
margin: 10px;
padding: 0;
float: right;
display: inline-block;}
}
@media only screen and (max-width: 568px) {
.img-boxB {width: 95%;
margin: 0 auto;
padding: 0;}
.imgB {width: 100%;}
.imgB img{width: 100%;
margin: 0;
padding: 0;
float: left;
display: inline-block;}
} .main table {width: 50%;
margin: 20px auto;
padding: 0;
border-spacing: 0px;
border-collapse: separate;}
.main table tr {width: 100%;
margin: 0;
padding: 0;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main table th {width: 50%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;
text-align: left;}
.main table td {width: 60%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
@media only screen and (max-width: 568px) {
.main table {width: 90%;
margin: 20px 10px;
padding: 0;
border-spacing: 0px;
border-collapse: separate;}
.main table tr {width: 100%;
margin: 0;
padding: 0;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main table th {width: 100%;
margin: 20px 0 0 0;
padding: 5px 10px;
color: #444444;
border-bottom: dotted 1px #CCCCCC;
text-align: left;
display: block;}
.main table td {width: 100%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;
display: block;}
} .main .list-A {width: 80%;
margin: 20px auto;
padding: 0;
border-spacing: 0px;
border-collapse: separate;}
.main .list-A tr {width: 100%;
margin: 0;
padding: 0;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main .list-A th {width: 40%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;
text-align: left;}
.main .list-A td {width: 20%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main .list-A img{width: 70px;
margin: 5px;
padding: 0;}
.main .list-A a{margin: 5px 0 0 0;
padding: 0;
text-align: center;
text-decoration: none;
background-color: #EEEEEE;
color: #EEEEEE;
display: inline-block;}
.main .list-A a:hover{background-color: #EEEEEE;
color: #EEEEEE;
display: inline-block;}
.main .list-A .download-A{margin: 5px 0 0 0;
padding: 0;
text-align: center;
text-decoration: none;
background-color: #FFFFFF;
color: #FFFFFF;
display: inline-block;}
.main .list-A .download-A:hover{background-color: #FFFFFF;
color: #FFFFFF;
display: inline-block;}
@media only screen and (max-width: 568px) {
.main .list-A {width: 90%;
margin: 20px 5px;
padding: 0;
border-spacing: 0px;
border-collapse: separate;}
.main .list-A tr {width: 100%;
margin: 0;
padding: 0;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main .list-A th {width: 100%;
margin: 20px 0 0 0;
padding: 5px 10px;
color: #444444;
border-bottom: dotted 1px #CCCCCC;
text-align: left;
display: block;}
.main .list-A td {width: 100%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;
display: block;}
} .main .list-B {width: 80%;
margin: 20px auto;
padding: 0;
border-spacing: 0px;
border-collapse: separate;}
.main .list-B tr {width: 100%;
margin: 0;
padding: 0;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main .list-B th {width: 40%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;
text-align: left;}
.main .list-B td {width: 60%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main .list-B img{width: 100px;}
@media only screen and (max-width: 568px) {
.main .list-B {width: 90%;
margin: 20px 5px;
padding: 0;
border-spacing: 0px;
border-collapse: separate;}
.main .list-B tr {width: 100%;
margin: 0;
padding: 0;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main .list-B th {width: 100%;
margin: 20px 0 0 0;
padding: 5px 10px;
color: #444444;
border-bottom: dotted 1px #CCCCCC;
text-align: left;
display: block;}
.main .list-B td {width: 100%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;
display: block;}
} .main .list-C {width: 80%;
margin: 20px auto;
padding: 0;
border-spacing: 0px;
border-collapse: separate;}
.main .list-C tr {width: 100%;
margin: 0;
padding: 0;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main .list-C th {width: 30%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;
text-align: left;}
.main .list-C td {width: 100%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main .list-C img{width: 100px;}
@media only screen and (max-width: 568px) {
.main .list-C {width: 90%;
margin: 20px 5px;
padding: 0;
border-spacing: 0px;
border-collapse: separate;}
.main .list-C tr {width: 95%;
margin: 0;
padding: 0;
color: #444444;
border-bottom: solid 1px #CCCCCC;}
.main .list-C th {width: 95%;
margin: 20px 0 0 0;
padding: 5px 10px;
color: #444444;
border-bottom: dotted 1px #CCCCCC;
text-align: left;
display: block;}
.main .list-C td {width: 95%;
margin: 0;
padding: 5px 10px;
color: #444444;
border-bottom: solid 1px #CCCCCC;
display: block;}
} .invisible{
display: none;
}  .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {background-color: #FFFFFF;
color: #444444;
width: 50%;
border: 1px solid #DDDDDD;
font-size: 100%;
padding: 5px;
border-radius: 0px;
box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;} span.wpcf7-list-item { display: block; } .wpcf7 input[type="submit"] {font-size: 20px;
margin: 30px 0 0 0;
padding: 20px 30px;
text-align: center;
text-decoration: none;
background-color: #00BFFF;
color: #222222;
display: inline-block;
border-radius: 4px;
cursor: pointer;
border: 1px solid #666666;}
.wpcf7 input[type="submit"]:hover {background-color: #1E90FF;
color: #222222;}
.wpcf7 .contact-button-submit {text-align:center;} .calender {width: 96%;
margin: 10px 1.5%;
padding: 0;}
@media only screen and (max-width: 768px) {
.calender {width: 96%;
margin: 10px 1.5%;
padding: 0;}
.calender iframe{width: 100%;
margin: 10px 0;
padding: 0;}
} .contact a {margin: 30px 0 0 0;
padding: 20px 30px;
text-align: center;
text-decoration: none;
background-color: #ffbb00;
color: #222222;
display: inline-block;}
.contact a:hover {background-color: #e49b0f;
color: #222222;}  .main-box5 {width: 100%;
margin: 80px 0;
padding: 0;
background-color: #FFFFFF;} .main2 {width: 100%;
max-width: 980px;
margin: 0 auto;
padding: 0;}
@media only screen and (max-width: 1024px) {
.main2 {width: 96%;
margin: 0 1.6;
padding: 0;
display: inline-block;}
}
@media only screen and (max-width: 768px) {
.main2 {width: 96%;
margin: 0 1.6%;
padding: 0;
display: inline-block;}
}
.main2 h1 {text-align: center;
color: #111111;
margin: 30px 0;
padding: 0;
font-size: 30px;}
.main2 p {text-align: ;
color: #444444;
margin: 30px 10px;
padding: 0;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;}
.main2 img {width: 50%;
height: 50%;
margin: 10px 0;
padding: 0;}
@media only screen and (max-width: 1024px) {
.main2 img {width: 50%;
height: 50%;
margin: 10px 0;
padding: 0;}
}
@media only screen and (max-width: 768px) {
.main2 img {width: 100%;
margin: 10px 0;
padding: 0;}
}
@media only screen and (max-width: 568px) {
.main2 img {width: 100%;
margin: 10px 0;
padding: 0;}
}
.main2 a {color: #00BFFF;
text-decoration: none;
width: ;
margin: 0 2px;
padding: 0;}
.main2 a:hover {color: #1E90FF;} .postinfo {text-align: center;
margin: 20px 0;
padding: 0;}
.postinfo p {text-align: ;
color: #444444;
margin: 30px 10px;
padding: 0;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;}
.postinfo a {color: #00BFFF;
text-decoration: none;}
.postinfo a:hover {color: #1E90FF;}
#40E0D0;
#00859b .sns-box {width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0;}
.sns {width: 100%;
margin: 0 10px;
padding: 0;
text-align: center} .sns{text-align: center;}
.sns > li {display: inline-block;
line-height: 0;
vertical-align: top;
margin: 0 7px;}
.sns > li:first-child {margin-left: 0;}
.sns > li:last-child {margin-right: 5px;}
.sns iframe {margin: 0 !important;}
@media screen and (max-width: 780px){
.sns > li{
width: 80px !important;
margin: 0 15px 10px 0;
}
} .excerpt {width: 100%;
padding: 0;
margin: 10px 0;
border: sorid 1px #111111;
display: inline-block;
         background-color: #00ff00;}
.excerpt h1{font-size: 20px;
margin: 0 5px;
padding: 0;
text-align: left;
color: #111111;}
.excerpt p {text-align: ;
color: #444444;
margin: 0px 5px;
padding: 0;
text-align: left;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.6pt;}
.color {width: 100%;
margin: 0;
padding: 10px;
border: 1px solid #DDDDDD;
display: inline-block;}
.excerpt .more a {padding: 0;
margin: 10px;
color: #00BFFF;
text-decoration: none;}
.excerpt .more a:hover {color: #1E90FF;}
.excerpt .more i {margin-left: 10px;}
@media only screen and (min-width: 769px) {
.excerpt img {float: left;
margin: 10px 20px;
width: 30%;
height: 30%;
display: block;}
}
@media only screen and (max-width: 768px) {
.excerpt {width: 96%;
padding: 0;
margin: 10px 1.5%;
border: sorid 1px #111111;
display: inline-block;
         background-color: #00ff00;}
.excerpt img {float: center;
display: inline-block;
margin: 10px 1.5%;
padding: 0;
width: 96%;
height: 96%;}
.color {width: 100%;
margin: 0px;
padding: 0px;
border: 1px solid #DDDDDD;
display: inline-block;}
}
.excerpt .postinfo {text-align: left;
margin: 20px 0;
padding: 0;}
.excerpt .postinfo p {text-align: left;
color: #999999;
margin: 30px 10px;
padding: 0;
font-size: 30px;
line-height: 1.5em;
letter-spacing: 06pt;}
.excerpt .postinfo a {color: #00BFFF;
text-decoration: none;}
.excerpt .postinfo a:hover {color: #1E90FF;} .footer-box {width: 100%;
margin: 0;
padding: 5px 0;
background-color: #EFEFEF;} .p-top {width: 100%;
margin: 0;
padding: 10px 0;
background-color: #222222;
display: inline-block;}
#page-top {width: 100%;
text-align: center;
font-size: 14px;
margin: 0 auto;}
#page-top a {color: #FFFFFF;
text-decoration: none;
width: 100%;
margin: 0 auto;
padding: 8px 100px;
background-color: #222222;}
#page-top a:hover {color: #BBBBBB;
background-color: #222222;} .foot-box {width: 640px;
margin: 0 auto;
padding: 0;}
.foot-box h1 {font-size: 16px;}
.footer-box p {line-height: 1.5em;
letter-spacing: 0.6pt;
font-size: 14px;
margin: 5px 10px;
padding: 0;}
.footer {width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0;}
.foot-box ul li {margin: 2px 0;
padding: 3px 0px;
font-size: 12px;
list-style-type: square;
text-align: left;}
.foot-box ul li:last-child {border-right: none;}
.foot-box a {margin: 0;
padding: 0;
text-decoration: none;
color: #444444;}
.foot-box a:hover {color: #000000;
border-bottom: 1px solid #000000;}
.footer a {margin: 0;
padding: 0;
text-decoration: none;
color: #444444;}
.footer a:hover {color: #666666;} .foot-box1 {width: 300px;
margin: 0 10px;
padding: 0;
float: left;}
.foot-box2 {width: 300px;
margin: 0 10px;
padding: 0;
float: right;}
@media only screen and (max-width: 568px) {
.foot-box1 {width: 85%;
margin: 10px;
padding: 0;
float: left;}
.foot-box2 {width: 85%;
margin: 10px;
padding: 0;
float: left;}
} .foot {width: 100%;
max-width: 1200px;
margin: 30px auto;
padding: 0;
display: inline-block;
font-size: 14px;}
.foot-l {width: 65%;
margin: 0 0 0 20px;
padding: 0;
float: left;}
.foot-r {width: 25%;
margin: 0 20px 0 0;
padding: 0;
float: right;} .foot-icon {width: 100%;
margin: 0;
padding: 0;
text-align: center;
background-color: #00ff00;} .foot-r .fasebook {background-color: #009900;}
.foot-r .fasebook a {line-height: 1.5em;
letter-spacing: 0.6pt;
font-size: 30px;
margin: 5px 5px;
padding: 0;
float: left;}
.foot-r .fasebook a:hover {color: #3B5998;}
.foot-r .twitter a {line-height: 1.5em;
letter-spacing: 0.6pt;
font-size: 30px;
margin: 5px 5px;
float: left;}
.foot-r .twitter a:hover {color: #55ACEE;}
.foot-r .instagram a {line-height: 1.5em;
letter-spacing: 0.6pt;
font-size: 30px;
margin: 5px 5px;
float: left;}
.foot-r .instagram a:hover {color: #D93177;}
.foot-r .youtube a {line-height: 1.5em;
letter-spacing: 0.6pt;
font-size: 30px;
margin: 5px 5px;
float: left;}
.foot-r .youtube a:hover {color: #cd201f;} .facebook-wrapper {max-width: 500px;
margin: 0 auto;}
.facebook-wrapper > .fb-page {width: 100%;}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {width: 100% !important;}
@media only screen and (max-width: 768px) {
.foot-l {width: 90%;
margin: 0 20px;
padding: 0;
clear:both;}
.foot-r {width: 90%;
margin: 0 20px;
padding: 0;
text-align: center;
clear:both;}
} .copy {width: 100%;
margin: 0;
padding: 10px 0;
background-color: #000000;
color: #EEEEEE;
text-align: center;
font-size: 10px;
display: inline-block;}