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

/* Reset */

ul,ol { list-style: none; }
img {
	border: 0;
}

* { margin:0; padding:0; border:0; }

html {margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

body{
	line-height:1.6;
	text-align:left;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	margin:0px;
	padding:0px;
	color:#000;
	font-size:16px;
}

a img {
	border:none;
}

a {
	color:#fff;
	text-decoration:none;
}
a:hover {
	color:#B9D9DB;
	text-decoration:underline;
}

.t8{font-size:8px;}
.t10{font-size:10px;}
.t11{font-size:11px;}
.t12{font-size:12px;}
.t14{font-size:14px;}
.t16{font-size:16px;}
.t18{font-size:18px;}
.t20{font-size:20px;}
.t21{font-size:21px;}
.t24{font-size:24px;}
.t28{font-size:28px;}
.t30{font-size:30px;}
.t32{font-size:32px;}
.t36{font-size:36px;}
.t40{font-size:40px;}
.t48{font-size:48px;}

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

.clearboth { padding: 0; clear:both; }

.bigger {
  transition: all 1s 0s ease;
}

.bigger:hover {
  transform: scale(1.1);
}

/*==========================================================*/

.wrap-hidden{
	overflow: hidden;
}

@media screen and (min-width: 801px) {
	.sp{display:none;}
}

@media screen and (max-width: 800px) {
	.pc{display:none;}
	.container{padding: 0;}
}

p{
	text-align: justify;
	text-justify: inter-ideograph;
	margin: 8px 0px;
}

/*pop up==========================================================*/
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 10px;
  background-color: #fff;
  z-index: 2;
  border-radius: 10px;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,75,246,0.60);
  z-index: 1;
  cursor: pointer;
}

/*==========================================================*/

.main-img{
	background-image:url("img/main-img.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	width: 100%;
	height: calc( 100vw / 1.5 );
	position: relative;
}

.seal{width: 16%; top: 22%; left: 3%; position: absolute; z-index:1;}
.seal img{width:100%; animation: 2s ease 0s infinite alternate none animation3;}

.penguin{width: 10%; top: 22%; left: 24%; position: absolute; z-index:4;}
.penguin img{width:100%; animation: 5s ease 0s infinite none animation1;}

.aalge{width: 14%; top: 29%; left: 46%; position: absolute; z-index:12;}
.aalge img{width:100%;animation: 3s ease 0s infinite alternate animation2;}

.puffin{width: 11%; top: 20%; left: 67%; position: absolute; z-index:11;}
.puffin img{width:100%; animation: 6s ease 1s infinite none animation1;}

.raicho{width: 14%; top: 10%; right: 3%; position: absolute; z-index:9;}
.raicho img{width:100%; animation: 1s ease 7s infinite alternate none animation1;}

.whaleshark{width: 34%; top: 60%; left: 8%; position: absolute; z-index:6;}
.whaleshark img{width:100%; animation: 20s ease 0s infinite alternate none animation4;}

.dolphin1{width: 21%; top: 40%; left: 84%; position: absolute; z-index:16;}
.dolphin1 img{width:100%; animation: 20s ease 0s infinite none animation5;}

.dolphin2{width: 24%; top: 60%; left: 79%; position: absolute; z-index:15;}
.dolphin2 img{width:100%; animation: 15s ease 0s infinite none animation6;}

.turtle1{width: 18%; top: 76%; left: 40%; position: absolute; z-index:3;}
.turtle1 img{width:100%; animation: 12s ease 0s infinite alternate none animation2;}

.turtle2{width: 17%; top: 72%; left: 60%; position: absolute; z-index:5;}
.turtle2 img{width:100%; animation: 4s ease 0s infinite alternate animation2;}

@keyframes animation1 {
  0% {transform: translateY(0px);}
  10% {transform: translateY(-2px);}
  20% {transform: translateY(0px);}
}

@keyframes animation2 {
  0% {transform: translateY(0px);}
  30% {transform: translateY(-2px) rotate(-6deg);}
  100% {transform: translateY(0px) rotate(9deg);}
}

@keyframes animation3 {
  0% {transform: translateX(0px);}
  10% {transform: translateX(2px) rotate(-3deg);}
  20% {transform: translateX(0px) rotate(2deg);}
}

@keyframes animation4 {
  0% {transform: translateY(0px);}
  50% {transform: translateY(-10px) rotate(-6deg);}
  100% {transform: translateY(0px) rotate(9deg);}
}

@keyframes animation5 {
  0% {transform: translate(50%, 0%) rotate(18deg); opacity:1;}
  80% {transform: translate(-20%, 10%) rotate(-28deg); opacity:1;}
  90% {transform: translate(-22%, 10%) rotate(-29deg); opacity:0;}
  100% {transform: translate(50%, 0%) rotate(18deg); opacity:0;}
}

@keyframes animation6 {
  0% {transform: translate(80%, 60%) rotate(10deg); opacity:1;}
  80% {transform: translate(-62%, -80%) rotate(8deg); opacity:1;}
  90% {transform: translate(-64%, -80%) rotate(6deg); opacity:0;}
  100% {transform: translate(80%, 20%) rotate(10deg); opacity:0;}
}

.copyright1{
	background-color: #2D4795;
	color: #fff;
	text-align: left;
	padding: 24px 20px;
	font-size: 14px;
}

.copyright1 th, .copyright1 td{
	font-weight: normal;
	vertical-align: top;
}

.copyright1 th{
	text-align: right;
}

.bep-logo-waku{
	background-color: #fff;
	border-radius: 50%;
	width: 180px;
	height: 180px;
	text-align: center;
	margin: 10px auto;
}

img.bep21 {
	width: 162px;
	margin: 0 auto;
	margin-top:20px;
}

.bep21-2{
	text-align: center;
	font-size: 10px;
	width:120px;
	padding-left: 20px;
}

img.fb{
	width: 50px;
	margin-top: 6px;
}

@media screen and (max-width: 700px) {
	.copyright1{font-size: 12px;}
}

@media screen and (min-width: 701px) {
	table{float: right; width: calc( 100% - 230px);}
	.bep-logo-waku{float: left;}
}

.banner-space img{margin: 0px 20px 20px 0;}
.banner-space{
	text-align: center;
	padding: 10px;
	font-size: 10px;
	color: #999;
}

.link-space{
	background-color: rgba(223,241,251,1.00);
	padding: 10px;
}

.d-shadow{
    box-shadow: 4px 4px 7px 0 rgba(0, 0, 0, 0.5);
	width: 150px;
	font-size: 12px;
	color: #333;
	margin: 20px auto;
	background-color: #fff;
	text-align: center;
}

.d-shadow img{
	width:100%;
	margin: 0;
}

.nw{
	display: inline-block;
}

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

.footer-cr{
	font-size: 10px;
	color: #999;
	text-align: right;
	padding: 4px 16px;
}
/*吹き出し==========================================================*/
.main-img img{
  position: relative;
}
.main-img a span{
  position: absolute;
  text-align: center;
  opacity: 0;
  top: -1px;
  left: calc(50% - 30px);
  width:70px;
  padding: 5px;
  border-radius: 2px;
  background: #196090;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  transition: .3s;
}
.main-img a span:after{
  position: absolute;
  top: 100%;
  left: calc(50% - 6px);
  height: 0;
  width: 0;
  border: 6px solid transparent;
  border-top: 6px solid #196090;
  content: "";
}
.main-img a:hover span{
  opacity: 1;
  top: -20px;
}

@media screen and (max-width: 700px) {
	.main-img a span{font-size: 8px;padding: 2px;width:50px;left: calc(50% - 25px);}
}