@charset "UTF-8";
/* =================================

footer

================================= */
#footer-large-box{
	width: 100%;
	margin: 140px auto 0;
	background: var(--color-sub);
}
/* インナー設定 */
#footer__inner{
	width: 100%;
	max-width: 1200px;
	min-width: 1200px;
	margin: 0 auto;
	padding: 64px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
/*----left-box----*/
#left-box{
	width: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
/*ロゴ*/
#footer-brand{
	width: 108px;
}
#footer-brand > a > img{
	width: 100%;
}
/*フッターナビゲーション*/
#footer-nav{
	margin-top: 42px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#footer-nav > li:first-child{
	margin-right: 80px;
}
#footer-nav li > a{
	display: inline-block;
	margin-bottom: 1.4rem;
	padding-bottom: 0.2rem;
	color: var(--color-white);
	font-size: var(--txt-small);
	font-weight: var(--bold);
	border-bottom: 1px solid rgba(255,255,255,0);
}
#footer-nav li > a:hover{
	opacity: 1;
	border-bottom: 1px solid var(--color-white);
}
/*----right-box----*/
#right-box{
	width: 50%;
	height: 560px;
}
/* 傘さしシロクマイメージ */
#umbrella-anime{
	width: 100%;
	height: 100%;
	position: relative;
}
#umbrella-anime .slider__inner{
	width: 374px;
	position: absolute;
	top: 0;
	left: 25%;
	z-index: 1;
	-webkit-animation-name: umbrella-shirokuma--fade;
	        animation-name: umbrella-shirokuma--fade;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-duration: 8s;
	        animation-duration: 8s;
}
#umbrella-anime .slider__inner > img{
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
#umbrella-anime .umbrella-shirokuma{
	width: 270px;
	position: absolute;
	bottom: 0;
	left: 35%;
}
#umbrella-anime .umbrella-penguin{
	width: 90px;
	position: absolute;
	bottom: 0;
	left: 40%;
}
#umbrella-anime .umbrella-shirokuma > img{
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
#umbrella-anime .umbrella-penguin > img{
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-webkit-animation: umbrella-penguin-anime 2s ease-out infinite;
	        animation: umbrella-penguin-anime 2s ease-out infinite;
}
/* アニメーション設定 */
#umbrella-anime .slider__inner:nth-child(1){
	-webkit-animation-delay: -1s;
	        animation-delay: -1s;
}
#umbrella-anime .slider__inner:nth-child(2){
	-webkit-animation-delay: 1s;
	        animation-delay: 1s;
	opacity: 0;
}
#umbrella-anime .slider__inner:nth-child(3){
	-webkit-animation-delay: 3s;
	        animation-delay: 3s;
	opacity: 0;
}
#umbrella-anime .slider__inner:nth-child(4){
	-webkit-animation-delay: 5s;
	        animation-delay: 5s;
	opacity: 0;
}
@-webkit-keyframes umbrella-shirokuma--fade{
	0%{
		opacity: 0;
	}
	12.5%{
		opacity: 1;
	}
	25%{
		opacity: 1;
	}
	37.5%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}
@keyframes umbrella-shirokuma--fade{
	0%{
		opacity: 0;
	}
	12.5%{
		opacity: 1;
	}
	25%{
		opacity: 1;
	}
	37.5%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}
@-webkit-keyframes umbrella-penguin-anime{
	0%{
		-webkit-transform: scale(1,1);
		        transform: scale(1,1);
	}
	25%{
		-webkit-transform: scale(-1,1)translateY(-24px);
		        transform: scale(-1,1)translateY(-24px);
	}
	75%{
		-webkit-transform: scale(-1,1);
		        transform: scale(-1,1);
	}
	100%{
		-webkit-transform: scale(1,1);
		        transform: scale(1,1);
	}
}
@keyframes umbrella-penguin-anime{
	0%{
		-webkit-transform: scale(1,1);
		        transform: scale(1,1);
	}
	25%{
		-webkit-transform: scale(-1,1)translateY(-24px);
		        transform: scale(-1,1)translateY(-24px);
	}
	75%{
		-webkit-transform: scale(-1,1);
		        transform: scale(-1,1);
	}
	100%{
		-webkit-transform: scale(1,1);
		        transform: scale(1,1);
	}
}
/*---bottom-box--*/
#bottom-box{
	background: var(--color-main);
	width: 100%;
	padding: 34px;
	text-align: center;
}
/*コピーライト*/
#copyright{
	color: var(--color-white);
	font-size: var(--txt-small);
}

@media(max-width: 959px){
	#footer-large-box{
		margin: 80px auto 0;
	}
	/* インナー設定 */
	#footer__inner{
		width: 100%;
		max-width: none;
		min-width: auto;
		margin: 0 auto;
		padding: 24px 0;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	/*----left-box----*/
	#left-box{
		width: 100%;
		padding: 0 4vw;
		margin-top: 24px;
	}
	/*ロゴ*/
	#footer-brand{
		width: 90px;
	}
	/*フッターナビゲーション*/
	#footer-nav{
		margin-top: 32px;
	}
	#footer-nav li > a{
		font-weight: var(--txt);
	}
	#footer-nav li > a:hover{
		opacity: 1;
		border-bottom: 1px solid rgba(255,255,255,0);
	}
	#footer-nav li > a:active{
		opacity: 1;
		border-bottom: 1px solid var(--color-white);
	}
	/*----right-box----*/
	#right-box{
		width: 100%;
		height: calc(560px/2);
	}
	/* 傘さしシロクマイメージ */
	#umbrella-anime .slider__inner{
		width: calc(374px/2);
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	#umbrella-anime .umbrella-shirokuma{
		width: calc(270px/2);
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	#umbrella-anime .umbrella-penguin{
		width: calc(90px/2);
		position: absolute;
		bottom: 0;
		left: 46%;
		transform: translateX(-50%);
	}
	/*---bottom-box--*/
	#bottom-box{
		padding: 24px 4vw;
	}
}
@media(max-width: 559px){
	#footer-large-box{
		margin: 64px auto 0;
	}
	/* インナー設定 */
	#footer__inner{
		padding: 12px 0;
	}
	/*----left-box----*/
	/*ロゴ*/
	#footer-brand{
		width: 64px;
	}
	/*フッターナビゲーション*/
	#footer-nav{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
	}
	#footer-nav li > a{
		margin-bottom: 1.2rem;
		font-weight: var(--txt-small);
	}
	#footer-nav > li:first-child{
		margin-right: 8vw;
	}
	/*---bottom-box--*/
	#bottom-box{
		padding: 32px 4vw;
	}
}