@charset "utf-8";

/* common
-------------------------------------------------------*/
#wrapper {
	overflow: hidden;
}
.sp {
	display: none;
}
.area {
	padding: 70px 20px;
	box-sizing: border-box;
	position: relative;
}
.inner {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.area {
		padding: 30px 20px;
	}
	.inner {
		max-width: 100%;
	}
}

/* font
-------------------------------------------------------*/
.serif {
	font-family: "Noto Serif JP", serif;
}
.roboto {
	font-family: "Roboto", sans-serif;
}
.mplus {
	font-family: "M PLUS 1p", sans-serif;
}
.white {
	color: #fff!important;
}

/* ttl
-------------------------------------------------------*/
.ttl01 {
	text-align: center;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 50px;
}
.ttl01 .en {
	font-size: 8rem;
	display: block;
	color: #009be7;
	margin-bottom: 20px;
	font-family: "Roboto", sans-serif;
}
.ttl01.white .en {
	color: #fff
}
.ttl01 .jp {
	font-size: 2.6rem;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 900;
}
.ttl01 .jp_main {
	font-size: 4.5rem;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 900;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	.ttl01 {
		margin-bottom: 40px;
	}
	.ttl01 .en {
		font-size: 6rem;
	}
	.ttl01 .jp {
		font-size: 2.4rem;
	}
	
}
@media screen and (max-width:768px) {
	.ttl01 {
		margin-bottom: 30px;
	}
	.ttl01 .en {
		font-size: 4rem;
		margin-bottom: 10px;
	}
	.ttl01 .jp {
		font-size: 2rem;
	}
	.ttl01 .jp_main {
		font-size: 2.5rem;
	}
}

/* bg
-------------------------------------------------------*/
.bg_blue01 {
	background: #2abfe9;
}
.bg_blue02 {
	background: #dbf3fe;
}
.bg_blue03 {
	background: #cfeffe;
}
.bg_gray {
	background: #f6f6f6;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {

}

/* parts
-------------------------------------------------------*/
.logo a {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
.logo img {
	max-width: 432px;
}
.logo span {
	display: block;
	margin-left: 10px;
	font-size: 1.9rem;
	line-height: 1.2;
	font-weight: 700;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	.logo a {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}
	.logo img {
		max-width: 300px;
	}
	.logo span {
		font-size: 1.5rem;
	}
}
@media screen and (max-width:768px) {
	.logo img {
		max-width: 270px;
	}
	.logo span {
		font-size: 1.4rem;
	}
}

.btn01 {
	margin-top: 60px;
}
.btn01 a {
	display: flex;
	width: 600px;
	height: 75px;
	border-radius: 50px;
	color: #fff;
	font-size: 2.6rem;
	font-weight: 700;
	position: relative;
	background: #ff9900;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}
.btn01 a::after {
	position: absolute;
	display: block;
	content: "";
	background: url(../img/common/icon_arrow.png)no-repeat right center/20px 18px;
	width: 20px;
	height: 18px;
	right: 40px;
	top: 50%;
	transform: translate(0,-50%);
}
.btn01.blue a {
	background: #009be7;
}
.btn01.back a::after {
	left: 40px;
	transform: translate(0,-50%) rotate(-180deg);
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {
	.btn01 {
		margin-top: 40px;
	}
	.btn01 a {
		width: 100%;
		height: 60px;
		font-size: 1.8rem;
	}
	.btn01 a::after {
		background: url(../img/common/icon_arrow.png)no-repeat right center/16px 14px;
		width: 16px;
		height: 14px;
		right: 15px;
	}
	.btn01.back a::after {
		left: 15px;
	}
}

/* header
-------------------------------------------------------*/
#header {
	padding: 15px 20px;
	position: fixed;
	width: 100%;
	background: #fff;
	z-index: 999;
	box-sizing: border-box;
}
#header .inner {
	max-width: 100%;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
}
@media screen and (max-width:1430px) {
	#header .logo {
		max-width: 350px;
	}
}
@media screen and (max-width:1180px) {
	#header .logo {
		max-width: 320px;
	}
}
@media screen and (max-width:1130px) {
	#header .logo {
		max-width: 300px;
	}
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {
	#header {
		padding: 10px;
	}
}

/* nav
-------------------------------------------------------*/
#nav_pc ul {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-end;
	font-size: 1.8rem;
	font-weight: 700;
}
#nav_pc ul li {
	margin-left: 35px;
}
#header .btn a {
	background: #ff9900;
	color: #fff;
	display: block;
	padding: 15px 40px 15px 70px;
	line-height: 1;
	border-radius: 50px;
}
#header .btn.btn_link a {
	background: #31aeb9;
	padding: 15px 50px 15px 25px;
}
#header .btn span {
	position: relative;
	line-height: 1;
}
#header .btn span::before {
	position: absolute;
	display: block;
	content: "";
	background: url(../img/common/icon_login.png)no-repeat left center/22px 24px;
	width: 22px;
	height: 24px;
	left: -30px;
	top: 3px;
}
#header .btn.btn_link span::before {
	background: url(../img/common/icon_btn_link.png)no-repeat left center/18px 18px;
	width: 18px;
	height: 18px;
	left: inherit;
	right: -25px;
	top: 4px;
}
@media screen and (max-width:1430px) {
	#nav_pc ul {
		font-size: 1.6rem;
	}
	#nav_pc ul li {
		margin-left: 20px;
	}
	#header .btn.btn_link a {
		padding: 15px 40px 15px 20px;
	}
}
@media screen and (max-width:1130px) {
	#nav_pc ul {
		font-size: 1.4rem;
	}
	#nav_pc ul li {
		margin-left: 15px;
	}
}
@media screen and (max-width:1000px) {
	#nav_pc.pc {
		display: none;
	}
	#nav_sp.sp {
		display: block;
	}
	#btn_nav {
		position: fixed;
		top: 20px;
		right: 15px;
		z-index: 999;
		cursor: pointer;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		height: 18px;
	}
	#btn_nav span {
		display: inline-block;
		background: #00b1c3;
		width: 26px;
		height: 2px;
		transition: .5s;
		position: relative;
	}
	#btn_nav.active span {
		transform: translateY(8px) rotate(45deg);
		background: #fff;
	}
	#btn_nav.active span:nth-child(2) {
		transform: scaleX(0);
	}
	#btn_nav.active span:last-child {
		transform: translateY(-8px) rotate(-45deg);
	}
	#nav_sp .nav_cont,
	#nav_sp .nav_cont::after {
		position: fixed;
		top: 0;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	#nav_sp .nav_cont {
		overflow: auto;
		background:rgba(42,191,233,0.8);
		right: -100%;
		z-index: 998;
		transition: .5s;
		padding: 70px 30px;
		box-sizing: border-box;
	}
	#nav_sp .nav_cont.active {
		right: 0;
	}
	#nav_sp ul {
		width: 100%;
	}
	#nav_sp ul li {
		margin-bottom: 10px;
	}
	#nav_sp ul li a {
		background: #fff;
		display: block;
		padding: 20px;
		font-weight: 700;
		font-size: 1.6rem;
		border-radius: 10px;
	}
	#header .btn a {
		padding: 20px 20px 20px 60px;
		font-size: 1.6rem;
		font-weight: 700;
	}
	#header .btn span::before {
		background: url(../img/common/icon_login.png)no-repeat left center/22px 24px;
		width: 22px;
		height: 24px;
		left: -40px;
		top: 3px;
	}
}



/* visual
-------------------------------------------------------*/
#visual {
	padding-top: 80px;
}
#visual .inner {
	max-width: 100%;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {
	#visual {
		padding-top: 50px;
	}

}

/* index_branch
-------------------------------------------------------*/
#index_branch {
	background: #2abfe9 url(../img/common/bg_wave02.png)no-repeat center bottom/contain;
}
#index_branch.area {
	padding: 70px 20px 280px;
}
#index_branch .box {
	background: #fff;
	max-width: 1000px;
	margin: 0 auto;
	border-radius: 20px;
	padding: 50px 50px 30px;
}
.list_branch {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
}
.list_branch li {
	width: 32%;
	margin-bottom: 30px;
}
.list_branch li:nth-child(2n) {
	margin: 0 2% 30px;
}
.list_branch li a {
	border: 4px solid #009be7;
	border-radius: 10px;
	display: block;
	box-sizing: border-box;
	text-align: center;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 2.2rem;
	padding: 15px;
	position: relative;
}
.list_branch li a::before {
	position: absolute;
	display: block;
	content: "";
	width: 52px;
	height: 50px;
	left: 20px;
	top: 50%;
	transform: translate(0,-50%);
}
.list_branch li:first-child a::before {
	background: url(../img/index/ov_icon01.png)no-repeat left center/52px 50px;
}
.list_branch li:nth-child(2) a::before {
	background: url(../img/index/ov_icon02.png)no-repeat left center/52px 50px;
}
.list_branch li:nth-child(3) a::before {
	background: url(../img/index/ov_icon03.png)no-repeat left center/52px 50px;
}
.list_branch li:nth-child(4) a::before {
	background: url(../img/index/ov_icon04.png)no-repeat left center/52px 50px;
}
.list_branch li:last-child a::before {
	background: url(../img/index/ov_icon05.png)no-repeat left center/52px 50px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	.list_branch li a::before {
		width: 46px;
		height: 45px;
		left: 10px;
	}
	.list_branch li:first-child a::before {
		background: url(../img/index/ov_icon01.png)no-repeat left center/46px 45px;
	}
	.list_branch li:nth-child(2) a::before {
		background: url(../img/index/ov_icon02.png)no-repeat left center/46px 45px;
	}
	.list_branch li:nth-child(3) a::before {
		background: url(../img/index/ov_icon03.png)no-repeat left center/46px 45px;
	}
	.list_branch li:nth-child(4) a::before {
		background: url(../img/index/ov_icon04.png)no-repeat left center/46px 45px;
	}
	.list_branch li:last-child a::before {
		background: url(../img/index/ov_icon05.png)no-repeat left center/46px 45px;
	}
	.list_branch li a {
		font-size: 1.8rem;
		padding-left: 20px;
	}
}
@media screen and (max-width:768px) {
	#index_branch.area {
		padding: 50px 20px 80px;
	}
	#index_branch .box {
		padding: 20px;
	}
	.list_branch {
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}
	.list_branch li {
		width: 100%;
		margin-bottom: 15px;
	}
	.list_branch li:nth-child(2n) {
		margin: 0 0 15px;
	}
	.list_branch li:last-child {
		margin-bottom: 0;
	}
	.list_branch li a {
		border: 2px solid #009be7;
		font-size: 1.8rem;
	}
	.list_branch li a::before {
		width: 36px;
		height: 35px;
		left: 20px;
		top: 50%;
		transform: translate(0,-50%);
	}
	.list_branch li:first-child a::before {
		background: url(../img/index/ov_icon01.png)no-repeat left center/36px 35px;
	}
	.list_branch li:nth-child(2) a::before {
		background: url(../img/index/ov_icon02.png)no-repeat left center/36px 35px;
	}
	.list_branch li:nth-child(3) a::before {
		background: url(../img/index/ov_icon03.png)no-repeat left center/36px 35px;
	}
	.list_branch li:nth-child(4) a::before {
		background: url(../img/index/ov_icon04.png)no-repeat left center/36px 35px;
	}
	.list_branch li:last-child a::before {
		background: url(../img/index/ov_icon05.png)no-repeat left center/36px 35px;
	}
}

/* index_nav
-------------------------------------------------------*/
#index_nav {
	background: url(../img/common/bg_wave01.png)no-repeat center bottom/contain,linear-gradient(to bottom,#cfeffe,#fff);
}


#index_nav.area {
	padding: 70px 20px 190px;
}
#index_nav .inner {
	max-width: 1300px;
}
.index_nav {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	justify-content: space-between;
}
.index_nav li {
	width: 32%;
	border: 5px solid #009be7;
	background: #fff;
	border-radius: 20px;
	padding: 30px 10px;
	box-sizing: border-box;
	text-align: center;
}
.index_nav li .ttl {
	font-size: 4.3rem;
	font-weight: 700;
	color: #009be7;
	line-height: 1;
	margin-bottom: 5px;
}
.index_nav li .icon {
	margin-right: 10px;
}
.index_nav li .icon img {
	max-width: 44px;
}
.index_nav li .sub_ttl {
	font-size: 2.2rem;
	font-weight: 700;
	margin-bottom: 20px;
}
.index_nav li .txt {
	font-weight: 500;
	font-size: 1.4rem;
}
.index_nav li .btn01 {
	margin-top: 30px;
}
.index_nav li .btn01 a {
	width: 90%;
	height: 55px;
	font-size: 1.8rem;
}
.index_nav li .btn01 a::after {
	right: 20px;
}
.index_nav .tb {
	display: none;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	.index_nav li .ttl {
		font-size: 3.4rem;
	}
	.index_nav li .icon img {
		max-width: 30px;
	}
	.index_nav li .btn01 a {
		font-size: 1.4rem;
	}
	.index_nav li .btn01 a::after {
		right: 15px;
	}
	.index_nav .tb {
		display: block;
	}
}
@media screen and (max-width:768px) {
	#index_nav.area {
		padding: 40px 20px 80px;
	}
	.index_nav {
		flex-flow: column;
		align-items: flex-start;
		justify-content: space-between;
	}
	.index_nav li {
		width: 100%;
		border: 3px solid #009be7;
		padding: 20px 10px;
	}
	.index_nav li:not(:last-child) {
		margin-bottom: 20px;
	}
	.index_nav li .ttl {
		font-size: 3.6rem;
	}
	.index_nav li .icon {
		margin-right: 10px;
	}
	.index_nav li .icon img {
		max-width: 35px;
	}
	.index_nav li .sub_ttl {
		font-size: 2rem;
		margin-bottom: 10px;
	}
	.index_nav li .btn01 {
		margin-top: 20px;
	}
	.index_nav li .btn01 a {
		font-size: 1.6rem;
	}
}

/* index_location
-------------------------------------------------------*/
#index_location {
	background: #2abfe9 url(../img/common/bg_wave04.png)no-repeat center bottom/100% auto;
}
#index_location.area {
	padding: 70px 20px 130px;
}
#index_location .box {
	background: #fff;
	border-radius: 20px;
	padding: 50px 40px;
}
#index_location .box .logo {
	margin-bottom: 40px;
}
#index_location .box .logo img {
	max-width: 430px;
}
.list_location02 {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: space-between;
}
.list_location02 li {
	width: 33.3%;
}
.list_location02 li:nth-child(2) {
	border-left: 1px solid #d6d6d6;
	border-right: 1px solid #d6d6d6;
	padding: 0 20px;
	margin: 0 20px;
}
.list_location02 .ttl {
	font-weight: 700;
	margin-bottom: 10px;
}
.list_location02 .txt {
	font-size: 1.4rem;
	margin-bottom: 30px;
}
.list_location02 dt {
	color: #010181;
	font-weight: 700;
}
.list_location02 dd {
	font-size: 1.4rem;
}
.list_location02 dd:not(:last-child) {
	margin-bottom: 10px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {

}
@media screen and (max-width:768px) {
	#index_location.area {
		padding: 50px 20px 80px;
	}
	#index_location .box {
		padding: 30px 20px;
	}
	#index_location .box .logo {
		margin-bottom: 30px;
	}
	.list_location02 {
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}
	.list_location02 li {
		width: 100%;
	}
	.list_location02 li:nth-child(2) {
		border-left: none;
		border-right: none;
		border-top: 1px solid #d6d6d6;
		border-bottom: 1px solid #d6d6d6;
		padding: 20px 0;
		margin: 20px 0;
	}
}

/* index_statistics
-------------------------------------------------------*/
#index_statistics {
	background: url(../img/common/bg_wave01.png)no-repeat center bottom/100% auto;
}
#index_statistics.area {
	padding: 70px 20px 160px;
}
#index_statistics .txt {
	text-align: center;
}
@media screen and (min-width:768px) and ( max-width:1080px) {

}
@media screen and (max-width:768px) {
	#index_statistics.area {
		padding: 50px 20px 80px;
	}
}

/* index_news
-------------------------------------------------------*/
#index_news {

		background: 
			url(../img/common/bg_wave03.png) no-repeat center top/100% auto, 
			url(../img/common/bg_wave05.png) no-repeat center bottom/100% auto;
			background-color: #cfeffe;
			
		padding-bottom: 150px;
		padding-top: 150px;

	
}
@media screen and (min-width:768px) and ( max-width:1080px) {

}
@media screen and (max-width:768px) {
	#index_news {
		padding-bottom: 80px;
		padding-top: 80px;
	}
	
}


/* footer
-------------------------------------------------------*/
#footer .inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: space-between;
}
#footer .logo {
    margin: 0 0 20px;
}
#footer .logo img {
	mix-blend-mode: multiply;
	max-width: 380px;
}
#footer .add {
	font-size: 1.4rem;
}
.footer_nav {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-end;
}
.footer_nav li {
	border-left: 1px solid #000;
	padding: 0 20px;
	font-size: 1.6rem;
	font-weight: 500;
}
.footer_nav li:last-child {
	border-right: 1px solid #000;
}
.footer_banner {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
.footer_banner a {
	max-width: 300px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	#footer .add {
		font-size: 1.2rem;
	}
	.footer_nav li {
		font-size: 1.5rem;
	}
}
@media screen and (max-width:768px) {
	#footer .inner {
		flex-flow: column;
	}
	#footer .logo {
		margin: 0 0 10px;
	}
	#footer .add {
		font-size: 1.2rem;
		margin-bottom: 20px;
	}
	.footer_nav {
		flex-flow: row wrap;
	}
	.footer_nav li {
		padding: 0 10px;
		font-size: 1.2rem;
		margin-bottom: 10px;
	}
	.footer_banner {
		margin-top: 20px;
		display: flex;
		justify-content:center
	}
	.footer_banner a {
		max-width: 180px;
	}
	
}

/* animation
-------------------------------------------------------*/
.ani_icon01,.ani_icon02,.ani_icon03,.ani_icon04,.ani_icon05,.ani_icon06,.ani_icon07,.ani_icon08 {
	position: absolute;
}

.ani_icon05_2 {
	position: absolute;
}

.ani_icon05_inner {
	position: relative;
}

.ani_icon01 {
	left: 5%;
	bottom: 3%;
	z-index: 1;
	animation: ani01 5s infinite;
}
@keyframes ani01 {
	0%, 100% {
	  transform: translateY(0);
	}
	50% {
	  transform: translateY(-30px);
	}
}
.ani_icon02 {
	right: 2%;
	top: 5%;
	z-index: 1;
	animation: ani02 7s infinite;
}
@keyframes ani02 {
	0%, 100% {
	  transform: translateY(0);
	}
	50% {
	  transform: translateY(-40px);
	}
}
.ani_icon03 {
	left: -50px;
	bottom: -20px;
	/*animation: ani03 3s linear infinite;*/
	z-index: 5;
}
@keyframes ani03 {
	0% {
		transform: translateY(0);
	}
	5% {
		transform: translateY(-10px);
	}
	10% {
		transform: translateY(0);
	}
	15% {
		transform: translateY(-10px);
	}
	20% {
		transform: translateY(0);
	}
}
.ani_icon04 {
	right: 18%;
	top: 16%;
	animation: ani04 3s linear infinite;
}
@keyframes ani04 {
0%,100% {
	transform: rotate(10deg);
}
20%{
	transform: rotate(-10deg);
}
40%{
	transform: rotate(10deg);
}
}
.ani_icon05 {
	bottom: 0;
	left: 3%;
	z-index: 1;
	/*animation: ani05 2s infinite linear alternate;*/
}
@keyframes ani05 {
    0% {transform:translate(0, 0) rotate(-3deg);}
    1% {transform:translate(0, -1px) rotate(0deg);}
    2% {transform:translate(0, 0)rotate(3deg);}
    4% {transform:translate(0, 0) rotate(-3deg);}
    5% {transform:translate(0, -1px) rotate(0deg);}
    6% {transform:translate(0, 0)rotate(3deg);}
    7% {transform:translate(0, 0)rotate(0deg);}
}


.ani_icon05_2 {
	display: block;
	position: absolute;
	left: 30.2%;
  top: 38%;
  z-index: -1;
  animation: rotateClockwise 30s linear infinite;
  transform-origin: center center;
}
@keyframes rotateClockwise {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }








.ani_icon06 {
	bottom: 0;
	right: 3%;
	z-index: 1;
	animation: ani06 1s infinite linear alternate;
}
/*
@keyframes ani06{
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	10%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	20%  { transform: scale(1.0, 0.98) translate(0%, 1.5%); }
	30% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
*/

.ani_icon08 {
	left: 15%;
	top: -10%;
	z-index: 5;
}

/* size */
.ani_icon01 img {
	max-width: 400px;
}
.ani_icon02 img {
	max-width: 267px;
}
.ani_icon03 img {
	max-width: 348px;
}
.ani_icon04 img {
	max-width: 238px;
}
.ani_icon05 img {
	max-width: 474px;
}
.ani_icon06 img {
	max-width: 341px;
}
.ani_icon07 img {
	max-width: 344px;
}

.ani_icon08 img {
	max-width: 344px;
}

@media screen and (max-width:1600px) {
	.ani_icon08 {
		left: 10%;
		top: -10%;
	}
}
@media screen and (max-width:1300px) {
	.ani_icon02 {
		top: -4%;
	}
	.ani_icon03 {
		left: 20px;
	}
	.ani_icon04 {
		right: 10px;
		top: 0;
	}
	.ani_icon07 {
	}

	.ani_icon08 {
		left: 0;
		top: -10%;
	}

	

	.ani_icon01 img {
		max-width: 300px;
	}
	.ani_icon02 img {
		max-width: 180px;
	}
	.ani_icon03 img {
		max-width: 300px;
	}
	.ani_icon04 img {
		max-width: 200px;
	}
	.ani_icon05 img {
		max-width: 300px;
	}
	.ani_icon06 img {
		max-width: 200px;
	}
	.ani_icon07 img {
		max-width: 250px;
	}
	.ani_icon08 img {
		max-width: 250px;
	}
}
@media screen and (max-width:768px) {
	.ani_icon01 {
		left: 2%;
		top: inherit;
		bottom: 0;
	}
	.ani_icon02 {
		right: 1%;
		top: 7%;
	}
	.ani_icon03 {
		left: 10px;
		bottom: -20px;
	}
	.ani_icon05 {
		bottom: -1%;
	}
	.ani_icon06 {
		bottom: -2%;
	}
	.ani_icon07 {
		left: 0;
	}
	.ani_icon08 {
		left: 0;
		top: -18%;
	}



	/* size */
	.ani_icon01 img {
		max-width: 100px;
	}
	.ani_icon02 img {
		max-width: 80px;
	}
	.ani_icon03 img {
		max-width: 170px;
	}
	.ani_icon04 img {
		max-width: 100px;
	}
	.ani_icon05 img {
		max-width: 130px;
	}
	.ani_icon06 img {
		max-width: 100px;
	}
	.ani_icon07 img {
		max-width: 130px;
	}

	.ani_icon08 img {
		max-width: 130px;
	}


}


/* news
-------------------------------------------------------*/
.list_news_tag {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 35px;
}
.list_news_tag li {
	border-radius: 5px;
  margin-bottom: 5px;
  background: #124796;
}
.list_news_tag li:not(:last-child) {
	margin-right: 10px;
}
.list_news_tag li a {
	color: #fff;
	font-weight: 500;
	border: 1px solid #fff;
	width: 125px;
	padding: 5px 0;
	display: block;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: center;
}
.list_news {
	margin-bottom: 70px;
}
.list_news li:not(:last-child) {
	margin-bottom: 10px;
}
.list_news li a {
	background: #fff;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
	padding: 20px;
	border-radius: 5px;
	font-weight: 500;
}
.list_news li dl {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
	margin-right: 30px;
}
.list_news li .tag {
	width: 125px;
	padding: 5px 0;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	margin-right: 15px;
  background: #124796;
}
.pager {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 70px;
}
.pager li {
	margin: 0 5px;
}
.pager li:first-child,.pager li:last-child {
	margin: 0 15px;
}
.pager li a {
	background: #fff;
	width: 42px;
	height: 42px;
	display: flex;
	border-radius: 5px;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: 500;
}
.pager .wp-pagenavi a,.pager .wp-pagenavi span {
  text-decoration: none;
  border: none!important;
  padding: 3px 12px!important;
  margin: 2px;
  background: #fff;
}
/*.tag01 {
	background: #15b780;
}
.tag02 {
	background: #b9af07;
}
.tag03 {
	background: #c34ece;
}
.tag04 {
	background: #32b6dc;
}
.tag05 {
	background: #ed619c;
}
.tag06 {
	background: #9a9a9b;
}*/
.information {
	background: #15b780!important;
}
.meeting-report{
	background: #ed619c!important;
}
.schedule{
	background: #b9af07!important;
}
.main-activities {
	background: #c34ece!important;
}
.traffic-safety {
	background: #32b6dc!important;
}
.community-safety {
	background: #e8a336!important;
}
.purchased-items {
	background: #7caa3b!important;
}

.other {
	background: #9a9a9b!important;
}
.news_detail {
	background: #ffffff;
	padding: 30px 20px;
	border-radius: 5px;
}
.news_detail .ttl {
	font-weight: 700;
	font-size: 2.4rem;
	margin-bottom: 20px;
}
.news_detail dl {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
	font-weight: 500;
	margin-bottom: 20px;
}
.news_detail .tag {
	width: 125px;
	padding: 5px 0;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	margin-right: 20px;
}
.news_detail .txt {
	line-height: 2;
	margin-bottom: 50px;
}
.news_detail .img {
	text-align: center;
	margin-bottom: 50px;
}
.news_detail .img img {
	max-width: 650px;
}
.news_detail>p:last-child {
	margin-bottom: 0;
}
.news_detail .news-inner a {
  color: #009be7
}
.news_detail .news-inner a:hover {
  text-decoration: underline;
}
@media screen and (min-width:768px) and ( max-width:1080px) {

}
@media screen and (max-width:768px) {
	.list_news_tag {
		flex-flow: row wrap;
		margin-bottom: 20px;
	}
	.list_news_tag li {
		width: 30%;
		margin-bottom: 10px;
	}
	.list_news_tag li:not(:last-child) {
		margin-right: 5%;
	}
	.list_news_tag li:nth-child(3n) {
		margin-right: 0;
	}
	.list_news_tag li a {
		width: 100%;
	}
	.list_news {
		margin-bottom: 50px;
	}
	.list_news li a {
		flex-flow: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.list_news li dl {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: flex-start;
		margin-right: 0;
		margin-bottom: 10px;
	}
	.list_news li .tag {
		width: 100px;
		padding: 5px 0;
	}
	.pager {
		margin-bottom: 50px;
	}
	.pager li {
		margin: 0 3px;
	}
	.pager li:first-child,.pager li:last-child {
		margin: 0 10px;
	}
	.pager li a {
		width: 30px;
		height: 30px;
		font-size: 1.6rem;
	}
	.news_detail .ttl {
		font-size: 2rem;
		line-height: 1.4;
	}
	.news_detail .tag {
		width: 100px;
	}
	.news_detail .txt {
		line-height: 1.6;
		margin-bottom: 30px;
	}
	.news_detail .img {
		margin-bottom: 30px;
	}
	.news_detail>p:last-child {
		margin-bottom: 0;
	}
}


/* member
-------------------------------------------------------*/
/* calendar */
#member #area01 {
	background: #2abfe9 url(../img/common/bg_wave02.png)no-repeat center bottom/contain;
	position: relative;
}
#member #area01.area {
	padding: 70px 20px 200px;
}
#member #area01 .ani_icon.ani_icon03 {
	position: absolute;
	left: inherit;
	right: 20%;
	top: 10%;
}
#member #area01 .ani_icon img {
	max-width: 171px;
}
.calendar {
	background: #fff;
	border-radius: 20px;
	padding: 50px;
}

/* news */
#member #area02 {
	background: url(../img/common/bg_wave04.png)no-repeat center bottom/contain, #cfeffe;
}
#member #area02.area {
	padding: 70px 20px 200px;
}

/* download */
#member #area03 {
	background: url(../img/common/bg_wave05.png)no-repeat center bottom/contain, #f6f6f6;
}
#member #area03.area {
	padding: 70px 20px 150px;
}

.list_download_ttl {
	box-sizing: border-box;
	max-width: 800px;
	margin: 0 auto;
	background: #009be7;
	padding: 10px 20px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
	border-radius: 10px 10px 0 0;
	font-size:2rem;
}
.list_download {
	max-width: 800px;
	margin: 0 auto;
	height: 200px;
	overflow-y: scroll;
	margin-bottom: 20px;
}
.list_download li {
	border-bottom: 1px solid #009be7;
	padding: 0 0 20px;
	margin: 0 0 20px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
}
.list_download li .icon {
	margin-right: 10px;
}
.list_download li .icon img {
	max-width: 30px;
}
.list_download li a {
	font-size: 1.8rem;
	color: #009be7;
	text-decoration: underline;
}
/* download */
.col01 {
	background: #009be7;
}
.col02 {
	background: #dac44a;
}
.col03 {
	background: #41b77b;
}
.col04 {
	background: #ff9933;
}
.col05 {
	background: #ffc000;
}
/*リンクURLが決定したらリンク設置後に以下削除*/
#site_link .list_btn li:last-child a {
  background: #ccc!important;
  pointer-events: none;
}

.list_btn {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.list_btn li {
	width: 48%;
	margin-bottom: 30px;
}
.list_btn li span {
	display: block;
	text-align: center;
	margin-top: 10px;
}
.list_btn li a {
	display: block;
	color: #fff;
	text-align: center;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 2.4rem;
	padding: 20px 0;
	border-radius: 10px;
	position: relative;
}
.list_btn li a::after {
	position: absolute;
	display: block;
	content: "";
	background: url(../img/common/icon_arrow.png)no-repeat right center/20px 18px;
	width: 20px;
	height: 18px;
	right: 15px;
	top: 50%;
	transform: translate(0,-50%);
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	#member #area01 .ani_icon.ani_icon03 {
		right: 5%;
		top: 10%;
	}
	#member #area01 .ani_icon img {
		max-width: 130px;
	}
	.list_btn li {
		width: 32%;
	}
	.list_btn li a {
		font-size: 1.8rem;
	}
	.list_btn li a::after {
		background: url(../img/common/icon_arrow.png)no-repeat right center/18px 16px;
		width: 18px;
		height: 16px;
		right: 10px;
	  }
}
@media screen and (max-width:768px) {
	/* calendar */
	#member #area01.area {
		padding: 30px 20px 60px;
	}
	#member #area01 .ani_icon.ani_icon03 {
		right: 2%;
		top: 15%;
	}
	#member #area01 .ani_icon.ani_icon03 img {
		max-width: 80px;
	}
	.calendar {
		padding: 20px;
	}

	/* news */
	#member #area02.area {
		padding: 30px 20px 60px;
	}

	/* download */
	.list_download_ttl {
		padding: 10px 20px;
		margin-bottom: 20px;
		border-radius: 10px 10px 0 0;
		font-size:1.5rem;
	}

	#member #area03.area {
		padding: 30px 20px 50px;
	}
	.list_download li .icon {
		margin-right: 15px;
	}
	.list_download li .icon img {
		max-width: 30px;
	}
	.list_download li a {
		font-size: 1.5rem;
	}
	/* download */
	.list_btn {
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}
	.list_btn li {
		width: 100%;
	}
	.list_btn li:not(:last-child) {
		margin: 0 0 20px;
	}
	.list_btn li a {
		font-size: 1.8rem;
	}

	.list_btn li a::after {
		position: absolute;
		display: block;
		content: "";
		background: url(../img/common/icon_arrow.png)no-repeat right center/20px 18px;
		width: 16px;
		height: 14px;
		right: 10px;
		top: 50%;
		transform: translate(0,-50%);
	}
}


/* organization
-------------------------------------------------------*/
.organization_img {
	background: #fff;
	border-radius: 5px;
	text-align: center;
	padding: 50px;
}
.organization_img img {
	max-width: 750px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {

}
@media screen and (max-width:768px) {
	.organization_img {
		padding: 20px;
	}
}

/* login
-------------------------------------------------------*/
.top_login {
	background: url(../img/index/visual_login.png)center/cover;
}
#login {
	width: 100%;
	height: 100vh;
	position: relative;
}
#login.area {
	padding: 0 20px;
}
#login .inner {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
#login .box {
	background: #fff;
	max-width: 500px;
	width: 100%;
	border-radius: 20px;
	padding: 50px 30px 70px;
	margin: 0 auto;
	box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.3);

}
#login .logo {
	text-align: center;
	margin-bottom: 50px;
}
#login .logo a {
	justify-content: center;
}
#login .logo img {
	max-width: 432px;
}
#login .btn01 a {
	width: 100%;
}


/* statistics
-------------------------------------------------------*/
.statistics_box {
	background: #fff;
	padding: 30px 30px 20px 30px;
	border-radius: 10px;
	margin-bottom: 70px;
}
.list_statistics {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
}
.list_statistics li {
	width: 32%;
	margin-right: 2%;
	margin-bottom: 20px;
}
.list_statistics li:nth-child(3n) {
	margin-right: 0;
}
.list_statistics li a {
	text-align: center;
	font-family: "M PLUS 1p", sans-serif; 
	font-size: 1.8rem;
	line-height: 1.4;
	padding: 10px;
	border-radius: 10px;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
.statistics_box_open {
	background: #fff;
	padding: 30px 30px 20px 30px;
	border-radius: 10px;
	margin-bottom: 70px;
}
.ttl_statistics {
	font-family: "M PLUS 1p", sans-serif; 
	font-size: 3rem;
	padding: 20px;
	margin: 0 0 30px;
	line-height: 1.4;
  background: #EBEBEB;
  border-radius: 10px;
}
.list_statistics_open {
	display: flex;
	flex-flow: row wrap;
}
.list_statistics_open li {
	width: 32%;
	margin-right: 2%;
	margin-bottom: 20px;
}
.list_statistics_open li:nth-child(3n) {
	margin-right: 0;
}
.list_statistics_open li a {
	text-align: center;
	background: #ede8d8;
	font-size: 2rem;
	font-weight: 700;
	padding: 10px;
	border-radius: 100px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}
.list_statistics_open li .icon_excel span {
	position: relative;
	padding-left: 40px;
}
.list_statistics_open li .icon_excel span::before {
	position: absolute;
	display: block;
	content: "";
	background: url(../img/statistics/icon_book.png)no-repeat left center;
	background-size: 100%;
	width: 26px;
	height: 33px;
	left: 0;
	top: 50%;
	transform: translate(0,-50%);
}
/* cat color */
.list_statistics.cat01 a {
	background:#31aeb9;
	color: #fff;
}
.list_statistics.cat02 a {
	background:#41b77b;
	color: #fff;
}
.list_statistics.cat03 a {
	background:#009be7;
	color: #fff;
}
.ttl_statistics.cat01 {
	background:#31aeb9;
	color: #fff;
	border-radius: 10px;
}
.ttl_statistics.cat02 {
	background:#41b77b;
	color: #fff;
	border-radius: 10px;
}
.ttl_statistics.cat03 {
	background:#009be7;
	color: #fff;
	border-radius: 10px;
}
@media screen and (max-width:768px) {
	.statistics_box {
		padding: 20px 20px 10px 20px;
		margin-bottom: 50px;
	}
	.list_statistics {
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}
	.list_statistics li {
		width: 100%;
		margin-right: 0;
		margin-bottom: 15px;
	}
	.list_statistics li a {
		font-size: 1.4rem;
	}
	.statistics_box_open {
		padding: 20px 20px 10px 20px;
		border-radius: 10px;
		margin-bottom: 50px;
	}
	.ttl_statistics {
		font-size: 1.8rem;
	}
	.list_statistics_open {
		flex-flow: column;
	}
	.list_statistics_open li {
		width: 100%;
		margin-right: 0;
		margin-bottom: 15px;
	}
	.list_statistics_open li a {
		font-size: 1.6rem;
	}
	.list_statistics_open li .icon_excel span {
		padding-left: 30px;
	}
	.list_statistics_open li .icon_excel span::before {
		width: 20px;
		height: 25px;
	}
}


/* site link
-------------------------------------------------------*/
.box_link {
	background: #fff;
	border-radius: 20px;
	padding: 40px;
	max-width: 800px;
	margin: 0 auto 50px;
}
.ttl_link {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 30px;
	border-bottom: 3px solid #009be7;
	padding-bottom: 20px;
}
.list_link li {
	padding-left: 20px;
}
.list_link li a {
	color: #009be7;
	font-weight: 700;
	position: relative;
}
.list_link li a::before {
	position: absolute;
	display: block;
	content: "";
	vertical-align: middle;
	color:#009be7;
	line-height: 1;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	border-width: 0.375em 0.64952em;
	border-left-color: currentColor;
	border-right: 0;
	left: -20px;
	top: 5px;
}
.list_link li:not(:last-child) {
	margin-bottom: 20px;
}
@media screen and (max-width:768px) {
	.box_link {
		padding: 20px;
		margin: 0 auto 30px;
	}
	.ttl_link {
		font-size: 1.8rem;
		margin-bottom: 20px;
		border-bottom: 2px solid #009be7;
		padding-bottom: 10px;
	}
	.list_link li {
		padding-left: 15px;
	}
	.list_link li a::before {
		left: -15px;
	}
	.list_link li:not(:last-child) {
		margin-bottom: 15px;
	}
}

.list_btn_item {
	display: inline-block !important;
	background: #196b24;
	border-radius: 5px;
	font-size: 1.6rem;
	padding: 3px 10px;
	margin-right: 5px;
	margin-top: 0 !important;
}

@media screen and (max-width:768px) {
	
.list_btn_item {
	font-size: 1.2rem;
}
}


























/* animation
-------------------------------------------------------*/

.animation {
	position: relative;
}

.animation_abg {
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
}



/*雲*/
.animation_kumo1 {
	position: absolute;
	width: 4.5%;
	top:9%;
	left: 3%;
	z-index: 3;

	animation: floatUpDown 3s ease-in-out infinite;
}
.animation_kumo2 {
	position: absolute;
	width: 6%;
	top:7%;
	left: 37%;
	z-index: 3;

	animation: floatUpDown2 3s ease-in-out infinite;
}
.animation_kumo3 {
	position: absolute;
	width: 3.7%;
	top:5%;
	left: 43%;
	z-index: 3;

	animation: floatUpDown 3s ease-in-out infinite;
}
.animation_kumo4 {
	position: absolute;
	width: 5%;
	top:3%;
	left: 80%;
	z-index: 3;

	animation: floatUpDown2 3s ease-in-out infinite;
}


@keyframes floatUpDown {
    0% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-10px); /* ふわっと上に移動 */
    }
    100% {
        transform: translateY(0); /* 元の位置に戻る */
    }
}

@keyframes floatUpDown2 {
    0% {
        transform: translateY(-10px); /* 初期位置 */
    }
    50% {
        transform: translateY(0); /* ふわっと上に移動 */
    }
    100% {
        transform: translateY(-10px); /* 元の位置に戻る */
    }
}


@media screen and (max-width:768px) {
	
	@keyframes floatUpDown {
		0% {
			transform: translateY(0); /* 初期位置 */
		}
		50% {
			transform: translateY(-5px); /* ふわっと上に移動 */
		}
		100% {
			transform: translateY(0); /* 元の位置に戻る */
		}
	}
	
	@keyframes floatUpDown2 {
		0% {
			transform: translateY(-5px); /* 初期位置 */
		}
		50% {
			transform: translateY(0); /* ふわっと上に移動 */
		}
		100% {
			transform: translateY(-5px); /* 元の位置に戻る */
		}
	}
}
/*//雲*/


/*最背面-人物*/


.animation_pp_item1 {
	position: absolute;
	width: 9%;
	top:26.5%;
	left: 8.5%;
	z-index: 3;

	transform-origin: bottom center; /* 中央下を回転軸にする */
	animation: animation_pp_item1 2s ease-in-out infinite; /* 2秒で左右に揺れる */
}
@keyframes animation_pp_item1 {
    0% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-5px); /* ふわっと上に移動 */
    }
    100% {
        transform: translateY(0); /* 元の位置に戻る */
    }
}

.animation_pp_item2 {
	position: absolute;
	width: 1.7%;
	top:16.5%;
	left: 57.5%;
	z-index: 3;

	transform-origin: bottom center; /* 中央下を回転軸にする */
	animation: animation_pp_item2 1.5s ease-in-out infinite; /* 2秒で左右に揺れる */
}
@keyframes animation_pp_item2 {
    0% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-3px); /* ふわっと上に移動 */
    }
    100% {
        transform: translateY(0); /* 元の位置に戻る */
    }
}
/*//最背面-人物*/



/* 飛行機と山のアイテム */
.animation_hikou1 {
	position: absolute;
	width: 8%;
	top: 5%;
	left: -200px; /* 初期位置を左に変更 */
	z-index: 4;

	animation: animation_hikou1 22s linear infinite;
	animation-delay: 5s;
}

@keyframes animation_hikou1 {
    0% {
        left: -150px; /* スタートは左外 */
    }
    100% {
        left: 100vw; /* 画面右端のさらに外まで移動 */
    }
}


.animation_hikou2 {
	position: absolute;
	width: 8%;
	top:10%;
	/*left: 75%;*/
	left: -100px;
	z-index: 4;

	animation: moveDiagonalDisappear 20s ease-in-out infinite; /* 4秒でループ */
}
@keyframes moveDiagonalDisappear {
    0% {
        transform: translateX(100vw) translateY(1vh);
        opacity: 0; /* 画面外で最初は見えない */
    }
    10% {
        opacity: 1; /* 右端から現れる */
    }
    50% {
        transform: translateX(0) translateY(-500%);
        opacity: 1; /* 左上に移動 */
    }
    60% {
        opacity: 0; /* 左上で消える */
    }
    100% {
        transform: translateX(100vw) translateY(1vh);
        opacity: 0; /* 透明のまま右端へ戻る */
    }
}

.animation_hikou3 {
	position: absolute;
	width: 4%;
	top: 10%;
	right: -100px; /* 右からスタートするので right を使う */
	z-index: 4;

	animation: moveLeft 30s linear infinite, floatUpDown 4s ease-in-out infinite;
}

/* 右から左へ移動 */
@keyframes moveLeft {
    0% {
        right: -100px;
    }
    100% {
        right: 100vw;
    }
}

/* 上下にふわふわ動く */
@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(30px); /* 下に20pxふわっと */
    }
    100% {
        transform: translateY(0);
    }
}


/*
.animation_rope01 {
	position: absolute;
	width: 3%;
	top: 22%;
	left: 35%;
	z-index: 4;
}

.animation_rope02 {
	position: absolute;
	width: 3%;
	top: 11.5%;
	left: 48%;
	z-index: 4;
}
*/
.animation_rope01 {
	position: absolute;
	width: 3%;
	top: 22%;
	left: 35%;
	z-index: 3;
	animation: ropeMove 10s ease-in-out infinite;
}

/* ロープウェイの動き */
@keyframes ropeMove {
	0% {
		top: 22%;
		left: 35%;
	}
	10% {
		top: 22%;
		left: 35%; /* 初期位置で少し止まる */
	}
	45% {
		top: 11.5%;
		left: 48%; /* ゆっくり移動 */
	}
	55% {
		top: 11.5%;
		left: 48%; /* 移動後で少し止まる */
	}
	90% {
		top: 22%;
		left: 35%; /* ゆっくり戻る */
	}
	100% {
		top: 22%;
		left: 35%; /* また初期位置に */
	}
}



.animation_inoshishi {
	position: absolute;
	width: 4%;
	top: 21%;
	left: 72%;
	z-index: 3;
	transform-origin: bottom center; /* 中央下を回転軸にする */
	animation: pendulumSwing 2s ease-in-out infinite; /* 2秒で左右に揺れる */
}

@keyframes pendulumSwing {
    0% {
        transform: rotate(-10deg); /* 左に傾く */
    }
    50% {
        transform: rotate(10deg); /* 右に傾く */
    }
    100% {
        transform: rotate(-10deg); /* 左に戻る */
    }
}

/*
.animation_golf {
	position: absolute;
	width: 5%;
	top: 18.5%;
	left: 92%;
	z-index: 3;
}
.animation_golf_ball {
	position: absolute;
	width: 1%;
	top: 29%;
	left: 92%;
	z-index: 3;
}
.animation_golf_ball02 {
	position: absolute;
	width: 0.5%;
	top: 20%;
	left: 81%;
	z-index: 3;
}

*/

/* クラブ全体のラップ（支点は画像の上から20%） */
.animation_golf_wrap {
  position: absolute;
  top: 18.5%;
  left: 92%;
  width: 5%;
  z-index: 3;
  transform-origin: 50% 20%; /* 擬似的に20%下支点 */
  transform: rotate(-40deg); /* 初期状態を左に倒す */
  animation: golfSwing 2s ease-in-out infinite;
}

.animation_golf {
  width: 100%;
}

/* ゴルフボール（弧を浅くして最終地点を正確に） */
.animation_golf_ball {
  position: absolute;
  width: 1%;
  top: 29%;
  left: 95%;
  z-index: 3;
  animation: golfBallFly 2s ease-in-out infinite;
}

/* ゴルフクラブのスイング：-40deg → 0deg → -40deg に戻る */
@keyframes golfSwing {
  0% {
    transform: rotate(-40deg);
  }
  30% {
    transform: rotate(0deg); /* スイング動作 */
  }
  100% {
    transform: rotate(-40deg); /* 戻る */
  }
}

/* ゴルフボールの弧：控えめ＆自然に着地 */
@keyframes golfBallFly {
  0% {
    top: 29%;
    left: 95%;
    width: 1%;
    opacity: 1;
    transform: translate(0, 0);
  }
  40% {
    transform: translate(-6vw, -5vh); /* 弧の頂点：控えめに調整 */
    opacity: 1;
  }
  100% {
    top: 20%;
    left: 81%;
    width: 0.5%;
    opacity: 0;
    transform: translate(0, 0);
  }
}

@media screen and (max-width:768px) {
.animation_golf_ball {
  top: 23%;
}
@keyframes golfBallFly {
  0% {
    top: 23%;
    left: 95%;
    width: 1%;
    opacity: 1;
    transform: translate(0, 0);
  }
  40% {
    transform: translate(-6vw, -5vh); /* 弧の頂点：控えめに調整 */
    opacity: 1;
  }
  100% {
    top: 20%;
    left: 81%;
    width: 0.5%;
    opacity: 0;
    transform: translate(0, 0);
  }
}

}


/*//飛行機と山のアイテム*/



/* 異人館 */

.animation_ijikan {
	position: absolute;
	width: 49%;
	top: 18.5%;
	left: 27%;
	z-index: 4;
}

/* //異人館 */



/* 山の車 */
.animation_m_car_item1,
.animation_m_car_item2,
.animation_m_car_item3 {
	position: absolute;
	width: 0.6%;
	top: 17.5%;
	left: 65.5%;
	z-index: 3;
	opacity: 0;
	animation: carZigzag 10s ease-in-out infinite;
}

/* 1台目（すぐスタート） */
.animation_m_car_item1 {
	animation-delay: 0s;
}

/* 2台目（少し遅れてスタート） */
.animation_m_car_item2 {
	animation-delay: 3s;
}

/* 3台目（さらに遅れてスタート） */
.animation_m_car_item3 {
	animation-delay: 6s;
}

/* 車のジグザグ下りアニメーション */
@keyframes carZigzag {
	0% {
		top: 17.5%;
		left: 65.5%;
		width: 0.6%;
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	20% {
		top: 18.5%;
		left: 69%;
		width: 1%;
		opacity: 1;
	}
	40% {
		top: 20.5%;
		left: 64.2%;
		width: 1.2%;
		opacity: 1;
	}
	60% {
		top: 23.5%;
		left: 70.7%;
		width: 1.5%;
		opacity: 1;
	}
	80% {
		top: 27%;
		left: 62%;
		width: 2%;
		opacity: 1;
	}
	90% {
		top: 27%;
		left: 62%;
		width: 2%;
		opacity: 1;
	}
	95% {
		top: 27%;
		left: 62%;
		width: 2%;
		opacity: 0;
	}
	100% {
		top: 27%;
		left: 62%;
		width: 2%;
		opacity: 0;
	}
}






/*
.animation_m_car_item1-2 {
	position: absolute;
	width: 1.5%;
	top: 23.5%;
	left: 70.7%;
	z-index: 3;
}
.animation_m_car_item1-3 {
	position: absolute;
	width: 1.2%;
	top: 20.5%;
	left: 64.2%;
	z-index: 3;
}
.animation_m_car_item1-4 {
	position: absolute;
	width: 1%;
	top: 18.5%;
	left:69%;
	z-index: 3;
}
.animation_m_car_item1-5 {
	position: absolute;
	width: 0.6%;
	top: 17.5%;
	left:65.5%;
	z-index: 3;
}*/

/* //山の車 */




/* 車-奥 */
/*
.animation_car01_item1 {
	position: absolute;
	width: 7%;
	top: 37%;
	left: 3%;
	z-index: 5;
}
.animation_car01_item2 {
	position: absolute;
	width: 5.5%;
	top: 35.8%;
	left: 10%;
	z-index: 5;
}
.animation_car01_item3 {
	position: absolute;
	width: 6.5%;
	top: 37%;
	left: 20%;
	z-index: 5;
}
.animation_car01_item4 {
	position: absolute;
	width: 5.3%;
	top: 37%;
	left: 30%;
	z-index: 5;
}
.animation_car01_item5 {
	position: absolute;
	width: 8.5%;
	top: 36%;
	left: 40%;
	z-index: 5;
}
*/
/* 5台共通基本スタイル */
.animation_car01_item1,
.animation_car01_item2,
.animation_car01_item3,
.animation_car01_item4,
.animation_car01_item5 {
	position: absolute;
	z-index: 5;
	left: 110%; /* ← 最初から右側の外に置いておく！！ */
	animation: carSlideLeft 18s linear infinite;
}

/* それぞれの個別初期設定（topとwidthだけ） */
.animation_car01_item1 {
	top: 37%;
	width: 7%;
	animation-delay: 0s;
}
.animation_car01_item2 {
	top: 35.8%;
	width: 5.5%;
	animation-delay: 4s;
}
.animation_car01_item3 {
	top: 37%;
	width: 6.5%;
	animation-delay: 7s;
}
.animation_car01_item4 {
	top: 37%;
	width: 5.3%;
	animation-delay: 10s;
}
.animation_car01_item5 {
	top: 36%;
	width: 8.5%;
	animation-delay: 12s;
}

/* 右から左に動くアニメーション */
@keyframes carSlideLeft {
	0% {
		left: 110%;
	}
	100% {
		left: -10%;
	}
}


/* ショールームなど */

.animation_showroom_item1 {
	position: absolute;
	width: 100%;
	top: 34%;
	left: 0;
	z-index: 6;
}

.animation_showroom_item2 {
	position: absolute;
	width: 12%;
	top: 31%;
	left: 55%;
	z-index: 6;
	animation: mikoshiBounce 1s ease-in-out infinite;
}

/*
@keyframes mikoshiBounce {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-5px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(0);
	}
}
*/


.animation_showroom_item3,
.animation_showroom_item4 {
	position: absolute;
	width: 2.2%;
	z-index: 6;
	animation: dollJump 1s ease-in-out infinite;
}

/* 個別にtopとleftを指定 */
.animation_showroom_item3 {
	top: 47%;
	left: 79%;
	animation-delay: 0s; /* 1体目はすぐスタート */
}

.animation_showroom_item4 {
	top: 46.7%;
	left: 82%;
	animation-delay: 0.4s; /* 2体目はちょっと遅れてスタート */
}

/* ぴょんっと跳ねるアニメーション */
/*
@keyframes dollJump {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-10px);
	}
	50% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}
*/


.animation_showroom_item5 {
	position: absolute;
	width: 3.8%;
	top: 45%;
	left: 87%;
	z-index: 6;
	animation: swayLeftRight 2s ease-in-out infinite;
}

/* 左右にゆらゆら揺れるアニメーション */
@keyframes swayLeftRight {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-5px); /* 左へ少し */
	}
	50% {
		transform: translateX(0);
	}
	75% {
		transform: translateX(5px); /* 右へ少し */
	}
	100% {
		transform: translateX(0);
	}
}



/* //ショールームなど */




/* 車-中 */
/*
.animation_car02_item1 {
	position: absolute;
	width: 6%;
	top: 58%;
	left: 3%;
	z-index: 7;
}
.animation_car02_item2 {
	position: absolute;
	width: 9%;
	top: 56%;
	left: 10%;
	z-index: 7;
}
.animation_car02_item3 {
	position: absolute;
	width: 5.2%;
	top: 58%;
	left: 20%;
	z-index: 7;
}
.animation_car02_item4 {
	position: absolute;
	width: 5.5%;
	top: 57%;
	left: 30%;
	z-index: 7;
}
.animation_car02_item5 {
	position: absolute;
	width: 6%;
	top: 58%;
	left: 40%;
	z-index: 7;
}
*/
/* 5台共通基本スタイル */
.animation_car02_item1,
.animation_car02_item2,
.animation_car02_item3,
.animation_car02_item4,
.animation_car02_item5 {
	position: absolute;
	z-index: 7;
	left: -10%; /* 最初は画面外の左に置いておく */
	animation: carSlideRight 18s linear infinite;
}

/* それぞれの個別初期設定（topとwidthだけ） */
.animation_car02_item1 {
	top: 58%;
	width: 6%;
	animation-delay: 0s;
}
.animation_car02_item2 {
	top: 56%;
	width: 9%;
	animation-delay: 3s;
}
.animation_car02_item3 {
	top: 58%;
	width: 5.2%;
	animation-delay: 8s;
}
.animation_car02_item4 {
	top: 57%;
	width: 5.5%;
	animation-delay: 12s;
}
.animation_car02_item5 {
	top: 58%;
	width: 6%;
	animation-delay: 15s;
}

/* 左から右に動くアニメーション */
@keyframes carSlideRight {
	0% {
		left: -10%;
	}
	100% {
		left: 110%;
	}
}



/* //車-中 */



/* 車-全面 */

/* 4台共通基本スタイル */
.animation_car03_item1,
.animation_car03_item2,
.animation_car03_item3,
.animation_car03_item4 {
	position: absolute;
	z-index: 7;
	left: 110%; /* 最初は画面外の右に置いておく */
	animation: carSlideLeft2 18s linear infinite;
}

/* 個別にtopとwidthだけ指定＋時間差(delay)をつける */
.animation_car03_item1 {
	top: 77%;
	width: 4.5%;
	animation-delay: 0s;
}
.animation_car03_item2 {
	top: 76%;
	width: 5%;
	animation-delay: 2s;
}
.animation_car03_item3 {
	top: 78%;
	width: 5%;
	animation-delay: 4s;
}
.animation_car03_item4 {
	top: 77%;
	width: 5%;
	animation-delay: 6s;
}

/* 右から左に動くアニメーション */
@keyframes carSlideLeft2 {
	0% {
		left: 110%;
	}
	100% {
		left: -10%;
	}
}





/* //車-全面 */



/* 全面橋など */

.animation_hashi_item1 {
	position: absolute;
	width: 100%;
	top: 43%;
	left: 0;
	z-index: 8;
}


.animation_hashi_item2 {
	position: absolute;
	width: 9%;
	top: 60%;
	left: 32%;
	z-index: 8;
	animation: fishJump 1s ease-in-out infinite;
}

/* 魚が下から上に跳ねるアニメーション */
@keyframes fishJump {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-20px); /* 上に30pxジャンプ！ */
	}
	50% {
		transform: translateY(-5px); /* 着水（元に戻る） */
	}
	100% {
		transform: translateY(0);
	}
}


.animation_hashi_item3,
.animation_hashi_item4 {
	position: absolute;
	transform-origin: center center; /* 画像の中心を軸に揺らす！ */
	z-index: 8;
	animation: seagullSway 2s ease-in-out infinite;
}

/* 個別に top / left / width を指定＋ずらす */
.animation_hashi_item3 {
	width: 3%;
	top: 64%;
	left: 27%;
	animation-delay: 0s; /* 1羽目はすぐスタート */
}

.animation_hashi_item4 {
	width: 4%;
	top: 65%;
	left: 28%;
	animation-delay: 0.5s; /* 2羽目は0.5秒ずらしてスタート */
}

/* 左右にゆらゆら揺れるアニメーション */
@keyframes seagullSway {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(5deg); /* 右に5度傾く */
	}
	50% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(-5deg); /* 左に5度傾く */
	}
	100% {
		transform: rotate(0deg);
	}
}




/* //全面橋など */


/* 船 */

.animation_fune_item1 {
	position: absolute;
	width: 10%;
	top: 85%;
	left: 12%;
	z-index: 9;
	transform-origin: center center; /* 拡大縮小の中心を真ん中に固定 */
	animation: funeScale 3s ease-in-out infinite;
}

/* ゆっくり拡大縮小を繰り返すアニメーション */
@keyframes funeScale {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05); /* 少し大きく（5%拡大） */
	}
	100% {
		transform: scale(1);
	}
}


.animation_fune_item2 {
	position: absolute;
	width: 15%;
	top: 85%;
	left: 110%; /* 最初は画面の右外にスタンバイ */
	z-index: 9;
	animation: funeMoveLeft 30s linear infinite;
}

/* ゆっくり右から左へ流れるアニメーション */
@keyframes funeMoveLeft {
	0% {
		left: 110%;
	}
	100% {
		left: -20%;
	}
}



/* //船 */

/*------ 20250501 animation sp ------*/

/*雲*/
@media screen and (max-width:768px) {
.animation_kumo1 {
	top:0;
}
.animation_kumo2 {
	top:0;
	left: 36%;
}
.animation_kumo3 {
	top:1%;
}
.animation_kumo4 {
	top:1%;
}
@keyframes floatUpDown {
    0% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-3px); /* ふわっと上に移動 */
    }
    100% {
        transform: translateY(0); /* 元の位置に戻る */
    }
}
@keyframes floatUpDown2 {
    0% {
        transform: translateY(-2px); /* 初期位置 */
    }
    50% {
        transform: translateY(0); /* ふわっと上に移動 */
    }
    100% {
        transform: translateY(-2px); /* 元の位置に戻る */
    }
}
}
/*//雲*/

/*最背面-人物*/
@media screen and (max-width:768px) {
.animation_pp_item1 {
	top:24.5%;
}
@keyframes animation_pp_item1 {
    0% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-2px); /* ふわっと上に移動 */
    }
    100% {
        transform: translateY(0); /* 元の位置に戻る */
    }
}
.animation_pp_item2 {
	top:12.5%;
	animation: animation_pp_item2 2s ease-in-out infinite; /* 2秒で左右に揺れる */
}
@keyframes animation_pp_item2 {
    0% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-2px); /* ふわっと上に移動 */
    }
    100% {
        transform: translateY(0); /* 元の位置に戻る */
    }
}
}
/*//最背面-人物*/

/* 飛行機と山のアイテム */
@media screen and (max-width:768px) {
.animation_rope01 {
	top: 20%;
}
/* ロープウェイの動き */
@keyframes ropeMove {
	0% {
		top: 20%;
		left: 35%;
	}
	10% {
		top: 20%;
		left: 35%; /* 初期位置で少し止まる */
	}
	45% {
		top: 10%;
		left: 48%; /* ゆっくり移動 */
	}
	55% {
		top: 10%;
		left: 48%; /* 移動後で少し止まる */
	}
	90% {
		top: 20%;
		left: 35%; /* ゆっくり戻る */
	}
	100% {
		top: 20%;
		left: 35%; /* また初期位置に */
	}
}
.animation_inoshishi {
	top: 14%;
}
.animation_golf {
	animation: golf 2.5s ease-in-out infinite;
}
@keyframes golf {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-5px); /* 元気に上に20pxジャンプ！ */
	}
	50% {
		transform: translateY(0); /* 地面に着地 */
	}
	100% {
		transform: translateY(0); /* ちょっと休憩してまたジャンプ */
	}
}
}
/*//飛行機と山のアイテム*/

/* 山の車 */
@media screen and (max-width:768px) {
.animation_m_car_item1,
.animation_m_car_item2,
.animation_m_car_item3 {
	top: 10%;
}
/* 車のジグザグ下りアニメーション */
@keyframes carZigzag {
	0% {
		top: 10%;
		left: 65.5%;
		width: 0.6%;
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	20% {
		top: 11%;
		left: 69%;
		width: 1%;
		opacity: 1;
	}
	40% {
		top: 12%;
		left: 64.2%;
		width: 1.2%;
		opacity: 1;
	}
	60% {
		top: 17%;
		left: 70.7%;
		width: 1.5%;
		opacity: 1;
	}
	80% {
		top: 23%;
		left: 60%;
		width: 2%;
		opacity: 1;
	}
	90% {
		top: 23%;
		left: 60%;
		width: 2%;
		opacity: 1;
	}
	95% {
		top: 23%;
		left: 60%;
		width: 2%;
		opacity: 0;
	}
	100% {
		top: 27%;
		left: 62%;
		width: 2%;
		opacity: 0;
	}
}
/* それぞれの個別初期設定（topとwidthだけ） */
.animation_car01_item1 {
	top: 31%;
}
.animation_car01_item2 {
	top: 30.8%;
}
.animation_car01_item3 {
	top: 31%;
}
.animation_car01_item4 {
	top: 31%;
}
.animation_car01_item5 {
	top: 31%;
}
}

/* ショールームなど */
/* 御神輿が上下に元気に揺れるアニメーション */
@media screen and (max-width:768px) {
	/*
@keyframes mikoshiBounce {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-2px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(3px);
	}
	100% {
		transform: translateY(0);
	}
}
	*/
.animation_showroom_item3,
.animation_showroom_item4 {
	animation: dollJump 1.3s ease-in-out infinite;
}
/* 個別にtopとleftを指定 */
.animation_showroom_item3 {
	top: 45.5%;
}
.animation_showroom_item4 {
	top: 45.5%;
}
/* ぴょんっと跳ねるアニメーション */
/*
@keyframes dollJump {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-5px);
	}
	50% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}
*/
/* 左右にゆらゆら揺れるアニメーション */
@keyframes swayLeftRight {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-3px); /* 左へ少し */
	}
	50% {
		transform: translateX(0);
	}
	75% {
		transform: translateX(3px); /* 右へ少し */
	}
	100% {
		transform: translateX(0);
	}
}
}
/* //ショールームなど */

/* 車-中 */
@media screen and (max-width:768px) {
/* それぞれの個別初期設定（topとwidthだけ） */
.animation_car02_item1 {
	top: 51%;
}
.animation_car02_item2 {
	top: 51%;
}
.animation_car02_item3 {
	top: 51%;
}
.animation_car02_item4 {
	top: 51%;
}
.animation_car02_item5 {
	top: 51%;
}
}
/* //車-中 */

/* 車-全面 */
@media screen and (max-width:768px) {
/* 個別にtopとwidthだけ指定＋時間差(delay)をつける */
.animation_car03_item1 {
	top: 71%;
}
.animation_car03_item2 {
	top: 71%;
}
.animation_car03_item3 {
	top: 71%;
}
.animation_car03_item4 {
	top: 71%;
}
}
/* //車-全面 */

/* 全面橋など */
@media screen and (max-width:768px) {
/* 魚が下から上に跳ねるアニメーション */
@keyframes fishJump {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-7px); /* 上に30pxジャンプ！ */
	}
	50% {
		transform: translateY(-3px); /* 着水（元に戻る） */
	}
	100% {
		transform: translateY(0);
	}
}
/* 個別に top / left / width を指定＋ずらす */
.animation_hashi_item3 {
	top: 58%;
}
.animation_hashi_item4 {
	top: 61%;
}
}
/* //全面橋など */

/* 船 */
@media screen and (max-width:768px) {
.animation_fune_item1 {
	top: 81%;
}
}
/* //船 */

/*------- 20250501 修正 -------*/
.ani_icon09 {
	position: absolute;
	bottom: 7%;
	z-index: 5;
	left: 110%;
	animation: carSlideLeft3 18s linear infinite;
}
.ani_icon09 img {
	max-width: 140px;
	min-width: 140px;
}
@keyframes carSlideLeft3 {
	0% {
		left: 110%;
	}
	100% {
		left: -20%;
	}
}
#index_branch {
	position: relative;
}
.list_branch li a::before {
	left: 15px;
}
.list_branch .pl a {
	padding-left: 60px;
}
.ani_icon10 {
	position: absolute;
	top: 24%;
	z-index: 5;
	right: 110%;
	animation: carSlideRight4 15s linear infinite;
}
.ani_icon10 img {
	max-width: 120px;
	min-width: 120px;
}
@keyframes carSlideRight4 {
	0% {
		right: 110%;
	}
	100% {
		right: -20%;
	}
}
.ani_icon01 {
	animation: none;
}
#index_location {
	background:#2abfe9 url(../img/index/bg_btm.png)no-repeat center bottom/100% auto;
}
.ani_icon11 {
	position: absolute;
	top: 0;
	z-index: 5;
	left: 110%;
	animation: carSlideLeft3 18s linear infinite;
}
.ani_icon11 img {
	max-width: 140px;
	min-width: 140px;
}
.ani_icon05 {
	bottom: 0;
	left: inherit;
	right: 5%;
}
.ani_icon05 img {
	max-width: 330px;
}
.ani_icon05_2 img {
	max-width:130px;
}
.ani_icon12 {
	position: absolute;
	top: -25%;
	z-index: 5;
	right: 13%;
}
.ani_icon12 img {
	max-width: 250px;
}
.ani_icon13 {
	position: absolute;
	top: 10%;
	z-index: 5;
	left: 22%;
}
.ani_icon13 img {
	max-width: 200px;
}
@media screen and (max-width:1700px) {
	.ani_icon13 {
		left: 18%;
	}
}
@media screen and (max-width:1400px) {
	.ani_icon13 {
		left: 12%;
	}
}
@media screen and (max-width:1200px) {
	.ani_icon13 {
		left: 8%;
	}
}
@media screen and (max-width:768px) {
	.ani_icon09 {
		bottom: 4%;
	}
	.ani_icon09 img {
		max-width: 80px;
		min-width: 80px;
	}
	.ani_icon08 {
		top: -11%;
	}
	.ani_icon10 img {
		max-width: 70px;
		min-width: 70px;
	}
	.ani_icon11 img {
		max-width: 70px;
		min-width: 70px;
	}
	.ani_icon05 {
		right: -7%;
	}
	.ani_icon05 img {
		max-width: 130px;
	}
	.ani_icon04 {
		top: 90px;
	}
	.ani_icon12 {
		top: -3%;
		right: 3%;
	}
	.ani_icon12 img {
		max-width: 100px;
	}
	.ani_icon13 {
		top: 5%;
		left: 3%;
	}
	.ani_icon13 img {
		max-width: 100px;
	}

	.ani_icon05_2 img {
		max-width:50px;
	}
	
}

/* 20250502　修正 */
/* ぴょんっと跳ねるアニメーション */
.animation_showroom_item3, .animation_showroom_item4 {
	animation: dollJump 1.5s ease-in-out infinite;
}
.animation_showroom_item4 {
	animation-delay: 0.4s;
}
/*
@keyframes dollJump {
	0% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-4px);
	}
	30% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}
	*/
.animation_car01_item1, .animation_car01_item2, .animation_car01_item3, .animation_car01_item4, .animation_car01_item5 {
	animation: carSlideLeft 30s linear infinite;
}
.animation_car01_item2 {
	animation-delay: 4s;
}
.animation_car01_item3 {
	animation-delay: 8s;
}
.animation_car01_item4 {
	animation-delay: 12s;
}
.animation_car01_item5 {
	animation-delay: 16s;
}
.animation_showroom_item2 {
	animation: mikoshiBounce 2s ease-in-out infinite;
}
/*
@keyframes mikoshiBounce {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(-2px); 
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(3px);
	}
	100% {
		transform: translateY(0);
	}
}
*/
.animation_m_car_item1, .animation_m_car_item2, .animation_m_car_item3 {
	animation: carZigzag 20s ease-in-out infinite;
}
.animation_m_car_item2 {
	animation-delay: 5s;
}
.animation_m_car_item3 {
	animation-delay: 10s;
}
.animation_rope01 {
	animation: ropeMove 20s ease-in-out infinite;
}
@media screen and (max-width:768px) {
	/*
	@keyframes dollJump {
		0% {
			transform: translateY(0);
		}
		20% {
			transform: translateY(-1px);
		}
		30% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(0);
		}
	}
	*/
	/*
	@keyframes mikoshiBounce {
		0% {
			transform: translateY(0);
		}
		25% {
			transform: translateY(-2px);
		}
		50% {
			transform: translateY(0);
		}
		75% {
			transform: translateY(2px);
		}
		100% {
			transform: translateY(0);
		}
	}
	*/
}

.animation_hashi_item5 {
	position: absolute;
	width: 10%;
	bottom: 19%;
	right: 16%;
	z-index: 8;
	animation: kanransha 60s linear infinite;
}
@keyframes kanransha {
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg); }
}
.animation_hashi_item6 {
	position: absolute;
	width: 16%;
	bottom: 15%;
	right: 9.33%;
	z-index: 8;
}
.animation_showroom_item6,.animation_showroom_item7,.animation_showroom_item8,.animation_showroom_item9,.animation_showroom_item10,.animation_showroom_item11 {
	position: absolute;
}


.animation_showroom_item6 {
	width: 6.5%;
	top: 50.5%;
	left: 0;
	z-index: 8;
	animation: bounce 2.3s ease-in-out infinite;
	animation-delay: 0.3s;
  }
  .animation_showroom_item7 {
	width: 6.5%;
	top: 50.5%;
	left: 4.5%;
	z-index: 9;
	animation: bounce 2.3s ease-in-out infinite;
	animation-delay: 1.1s;
  }
  .animation_showroom_item8 {
	width: 6.5%;
	top: 50.5%;
	left: 8.5%;
	z-index: 9;
	animation: bounce 2.3s ease-in-out infinite;
	animation-delay: 0s;
  }
  .animation_showroom_item9 {
	width: 6.5%;
	top: 50.5%;
	left: 16.5%;
	z-index: 9;
	animation: bounce 2.3s ease-in-out infinite;
	animation-delay: 1.6s;
  }
  .animation_showroom_item10 {
	width: 2.5%;
	top: 52%;
	left: 29.6%;
	z-index: 9;
	animation: bounce 2.3s ease-in-out infinite;
	animation-delay: 0.5s;
  }
  .animation_showroom_item11 {
	width: 2.5%;
	top: 52%;
	left: 26.8%;
	z-index: 9;
	animation: bounce 2.3s ease-in-out infinite;
	animation-delay: 1.3s;
  }
  
  
/*
  @keyframes bounce {
	0%, 100% {
	  transform: translateY(0);
	}
	10% {
	  transform: translateY(-4px);
	}
	20% {
	  transform: translateY(0);
	}
  }
*/
  @media screen and (max-width:768px) {
	.animation_showroom_item6 {
		top: 44%;
	  }
	  .animation_showroom_item7 {
		top: 44%;
	  }
	  .animation_showroom_item8 {
		top: 44%;
	  }
	  .animation_showroom_item9 {
		top: 44%;
	  }
	  .animation_showroom_item10 {
		top: 45%;
	  }
	  .animation_showroom_item11 {
		top: 45%;
	  }
	  /*
	  @keyframes bounce {
		0%, 100% {
		  transform: translateY(0);
		}
		10% {
		  transform: translateY(-2px);
		}
		20% {
		  transform: translateY(0);
		}
	  }
		*/
  }
  



/*
.animation_hashi_item2_1, .animation_hashi_item2_2 {
	position: absolute;
}
.animation_hashi_item2_2 {
	width: 9%;
	top: 67%;
	left: 32%;
	z-index: 8;
	animation: splashAnim 3s ease-in-out infinite;
  }
  
  .animation_hashi_item2_1 {
	width: 5%;
	top: 60%;
	left: 35%;
	z-index: 8;
	animation: fishJump 3s ease-in-out infinite;
	animation-delay: 0.2s;
  }
  

@keyframes splashAnim {
	0% {
	  opacity: 0;
	  transform: translateY(20px);
	}
	20% {
	  opacity: 1;
	  transform: translateY(0);
	}
	60% {
	  opacity: 1;
	  transform: translateY(0);
	}
	100% {
	  opacity: 0;
	  transform: translateY(20px);
	}
  }
  
  @keyframes fishJump {
	0% {
	  opacity: 0;
	  transform: translateY(30px);
	}
	30% {
	  opacity: 1;
	  transform: translateY(-20px);
	}
  
	
	40% {
	  transform: translateY(-20px) rotate(2deg);
	}
	45% {
	  transform: translateY(-20px) rotate(-2deg);
	}
	50% {
	  transform: translateY(-20px) rotate(2deg);
	}
	55% {
	  transform: translateY(-20px) rotate(-2deg);
	}
	60% {
	  transform: translateY(-20px) rotate(0deg);
	}
  
	100% {
	  opacity: 0;
	  transform: translateY(30px);
	}
  }
  */
  .animation_hashi_item2_1,
.animation_hashi_item2_2 {
  position: absolute;
  will-change: transform, opacity;
}

/* 水しぶき1回目と2回目に対応 */
.animation_hashi_item2_2 {
  width: 9%;
  top: 67%;
  left: 32%;
  z-index: 8;
  animation: splashAnim 3s ease-in-out infinite;
}

.animation_hashi_item2_1 {
  width: 5%;
  top: 60%;
  left: 35%;
  z-index: 8;
  animation: fishJumpRotate 3s ease-in-out infinite;
  animation-delay: 0.2s;
}

/* 水しぶきの表示アニメーション */
@keyframes splashAnim {
  0%, 65%, 100% {
    opacity: 0;
    transform: translateY(20px);
  }
  5%, 10% {
    opacity: 1;
    transform: translateY(0);
  }
  70%, 75% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* 魚のジャンプ → 回転して戻る動き */
@keyframes fishJumpRotate {
  0% {
    opacity: 0;
    transform: translateY(30px) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: translateY(-20px) rotate(0deg);
  }

  30% {
    transform: translateY(-35px) rotate(0deg);
  }

  50% {
    transform: translateY(-25px) rotate(-160deg);
  }

  60% {
    transform: translateY(0px) rotate(-150deg);
  }

  70% {
    opacity: 0.8;
    transform: translateY(10px) rotate(-160deg);
  }

  100% {
    opacity: 0;
    transform: translateY(30px) rotate(-160deg);
  }
}


  @media screen and (max-width:768px) {

	.animation_hashi_item2_2 {
		top: 60%;
	  }
	  
	  .animation_hashi_item2_1 {
		top: 55%;
	  }


	/* 水しぶきの表示アニメーション */
@keyframes splashAnim {
	0%, 65%, 100% {
	  opacity: 0;
	  transform: translateY(10px);
	}
	5%, 10% {
	  opacity: 1;
	  transform: translateY(0);
	}
	70%, 75% {
	  opacity: 1;
	  transform: translateY(0);
	}
	80% {
	  opacity: 0;
	  transform: translateY(10px);
	}
  }
  
  /* 魚のジャンプ → 回転して戻る動き */
  @keyframes fishJumpRotate {
	0% {
	  opacity: 0;
	  transform: translateY(15px) rotate(0deg);
	}
	10% {
	  opacity: 1;
	  transform: translateY(-10px) rotate(0deg);
	}
  
	30% {
	  transform: translateY(-14px) rotate(0deg);
	}
  
	50% {
	  transform: translateY(-12px) rotate(-160deg);
	}
  
	60% {
	  transform: translateY(0px) rotate(-150deg);
	}
  
	70% {
	  opacity: 0.8;
	  transform: translateY(5px) rotate(-160deg);
	}
  
	100% {
	  opacity: 0;
	  transform: translateY(15px) rotate(-160deg);
	}
  }


  #index_nav_a {
	padding-top: 150px;
	margin-top: -150px;
  }

   @media screen and (max-width:768px) {
	#index_nav_a {
	padding-top: 80px;
	margin-top: -80px;
  }

   }