@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(16,170,191,.6);
  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;
	wudth: 100%;
	height: calc( 100vw / 1.41 );
	position: relative;
}

.bear{width: 12%; top: 22%; left: 0%; position: absolute; z-index:1;}
.bear img{width:100%; animation: 2s ease 0s infinite alternate none animation1;}

.shark{width: 26%; top: 50%; left: 12%; position: absolute; z-index:2;}
.shark img{width:100%; animation: 20s ease 0s infinite alternate none animation2;}

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

.panda{width: 12%; top: 43%; right: 0%; position: absolute; z-index:4;}
.panda img{width:100%; animation: 5s ease 0s infinite none animation1;}

.orangutan{width: 17%; top: 68%; right: 0%; position: absolute; z-index:5;}
.orangutan img{width:100%; animation: 4s ease 0s infinite none animation1;}

.mon{width: 13%; bottom: 0%; left: 64%; position: absolute; z-index:16;}
.mon img{width:100%; animation: 3s ease 0s infinite none animation1;}

.mon2{width: 10%; bottom: 15%; left: 59%; position: absolute; z-index:15;}
.mon2 img{width:100%; animation: 4s ease 1s infinite none animation1;}

.cat{width: 15%; top: 25%; left: 71%; position: absolute; z-index:11;}
.cat img{width:100%; animation: 6s ease 1s infinite none animation3;}

.wildcat{width: 10%; top: 40%; left: 67%; position: absolute; z-index:14;}
.wildcat img{width:100%; animation: 8s ease 3s infinite alternate none animation3;}

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

.sango{width: 16%; bottom: 5%; left: 1%; position: absolute; z-index:12;}
.sango img{width:100%;animation: 20s ease 0s infinite none animation5;}

.sango_wihte{width: 16%; bottom: 3%; left: 1%; position: absolute; z-index:13;}
.sango_wihte img{width:100%; animation: 20s ease 0s infinite none animation4;}

.interview{width: 14%; top: 0%; right: 1%; position: absolute; z-index:8;}
.interview img{width:100%; animation: 2s ease 7s infinite none animation1;}

@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);}
  20% {transform: translateX(0px);}
}

@keyframes animation4 {
  0% {opacity:0;}
  50% {opacity:1;}
  90% {opacity:1;}
  100% {opacity:0;}
}

@keyframes animation5 {
  0% {opacity:0;filter: grayscale(0%);}
  10% {opacity:1;filter: grayscale(0%);}
  40% {opacity:1;filter: grayscale(0%);}
  90% {opacity:1;filter: grayscale(100%);}
  100% {opacity:0;filter: grayscale(100%);}
  
}

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

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

.bep21 img{
	width: 110px;
}

.bep21{
	width:130px;
	text-align: center;
	font-size: 10px;
}

.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: 10px;}
}

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

/*吹き出し==========================================================*/
.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);}
}


/*アンジュルム==========================================================*/

body#an {
	background-color: #CDFEFE;
/*	background-image: url("img/an_bg.jpg");
	background-size:cover;
	background-attachment: fixed;
	background-position: center center;*/
}


#an .wrap-hidden::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url("img/an_bg.jpg");
background-size:cover;
}

#an .an_big-title{
	margin: 20px 0 40px 20px;
	width: 90%;
	max-width: 600px;
}

#an .bg-waku{
	width:90%;
	max-width: 950px;
	background-color: #FFFFFF;
	background:rgba(255,255,255,0.8);
	margin: 0 auto 20px auto;
	padding: 20px 3%;
	border-radius: 26px;
}

#an .an_title-waku{
	font-size: 17px;
	line-height: 1.4;
}

#an .an_title{
	width:90%;
	max-width: 550px;
	margin-bottom: 10px;
}

#an .an_logo{
	padding: 20px 0;
	text-align: center;
}

#an .an_mem{
	text-align: center;
}

#an .an_mem img{
	width:70%;
	margin: 10px 0;
}

#an .an_mem-all {
	text-align: center;
}

#an .an_mem-all img{
	width: 90%;
	max-width: 760px;
	margin: 20px 0;
}

#an .an_b{
	text-align: center;
}

#an .an_b img{
	min-width: 180px;
	width: 23%;
	margin: 5px 1% 5px 0;
}

#an .an_thanks{
	font-size: 18px;
	text-align: center;
	line-height: 1.8;
	margin: 40px 0;
}

#an .an_thanks b{
	color: #2C6ACD;
	font-weight: bolder;
	font-family: Verdana, Geneva, "sans-serif";
	font-size: 24px;
}

#an .an_b-back{
	text-align: center;
}

#an .an_b-back img{
	text-align: center;
	max-width: 640px;
	width: 90%;
}

@media screen and (min-width: 801px) {
	#an .an_title-waku{float: left;}
	#an .an_logo img{text-align: right; float: right; padding: 0}
	#an .an_thanks{font-size: 21px;}
}

@media screen and (min-width: 501px) {
	#an .an_mem{text-align: right;}
	#an .an_mem img{width: 32.3%;margin: 15px 0 20px 1%;}
	
}