@charset "utf-8";
/* CSS Document */
#footMenus {
    width: 800px;
    margin: auto;
	position:fixed;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	z-index: 10;
}

#footMenus ul{
	font-size:0;
}

#footMenus ul li{
	display:inline-block;
	width:calc(100%/4 - 10px);
	margin:4px;
	font-size:14px;
	text-align:center;
}
#footMenus ul li img{
	display:block;
	margin:auto;
	width:64px;
}

#footMenus ul li a span{
display: block;
    padding-top: 10px;
    margin-top: -18px;
    padding-bottom: 5px;
    border-radius: 5px;
}
#footMenus ul li:nth-child(1) a span{
    background: #c5704e;
}
#footMenus ul li:nth-child(2) a span{
    background: #c4bd73;
}
#footMenus ul li:nth-child(3) a span{
    background: #80ae65;
}
#footMenus ul li:nth-child(4) a span{
    background: #ae6580;
}


.animate__animated{
	opacity:0;
}
.animate__animated.activeElem{
	opacity:1;
}
		*{
			margin:0;
			padding:0;
		}
		html, body{
			background:#000000;
		}
		#container{
		width:100%;
		text-align:center;
			overflow-x: hidden;
		}
		#layout{
			width:800px;
			margin:auto;
		}
		.blocks{
			width:100%;
			position:relative;
			text-align:center;
			margin:auto;
		}
		.blocks img{
			max-width:100%;
		}
		
		#box1 img.text{
			position:absolute;
			top:10px;
			right:10px;
		}

		#box2{
			background:#fde835;
		}
		#box2 img.lft{
			float:left;
			margin-left:50px;
		}
		#box2 p.lft{
			float:left;
			color:#000000;
			font-size:19.5px;
			text-align: left;
			font-family:"游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
			padding:0 0 20px 20px;
			margin-left:50px;
		}
		#box2 img.rht{
			float:right;
		margin-right:50px;
		}

		#box3 img.text1{
			position:absolute;
			top:10px;
			right:60px;
		}
		#box3 img.text2{
			position:absolute;
			top:30px;
			left:60px;
		}

		#box4{
			overflow:visible;
		}

		#box4 img.text{
			position:absolute;
		bottom: 130px;
	    left: 100px;
	}
		#box5 p{
			padding:10px;
			color:#ffffff;
			font-size:40px;
			text-align:left;
			line-height: 1.7;
			font-family:"游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
			margin-bottom:20px;
		}


		#box6{
			background:url(/images/div6_bottom.gif) bottom center no-repeat;
		}
		#box6 ul{
		}
		#box6 ul li{
			position:relative;
		}
		#box6 ul li img.copy{
			position:absolute;
			left:50%;
			top:50%;
			transform: translate(-50%, -50%);
		}
		#box6 ul li h5{
			font-size:60px;
			text-align: center;
			text-shadow:1px 1px 0 rgba(0,0,0,1);
			position:absolute;
			left:50%;
			top:50%;
			transform: translate(-50%, -50%);
			font-family:"游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
			width:100%;
			line-height:1;
		}
		#box6 img#chara{
			position:absolute;
			bottom:0;
			right:0;
			width:40%;
		}
		address{
			color:#ffffff;
			padding:20px 0;
			font-style:normal;
			font-size:12px;
			
		}

.animate__delay-05s {
 animation-delay: calc(var(--animate-delay) * 0.5);
}
.animate__delay-08s {
 animation-delay: calc(var(--animate-delay) * 0.8);
}
.animate__delay-13s {
 animation-delay: calc(var(--animate-delay) * 1.3);
}
.animate__delay-16s {
 animation-delay: calc(var(--animate-delay) * 1.6);
}
#recContact{
font-size:0;
padding:5px;
}
#recContact li{
font-size:14px;
display:inline-block;
width:calc(100%/3 - 14px);
margin:5px;
}
#recContact li a:link,
#recContact li a:hover,
#recContact li a:visited{
border-top:2px solid rgba(255,255,255,.7);
border-right:2px solid rgba(0,0,0,.3);
border-bottom:2px solid rgba(0,0,0,.3);
border-left:2px solid rgba(255,255,255,.7);
border-radius:8px;
color:#ffffff;
text-align:center;
position:relative;
	padding:20px 0px;
	display:block;
color:#ffffff;
}
#recContact li#phoneBox a{
	background-color:#ff7fb6;
}
#recContact li#mailBox a{
	background-color:#8eb3f2;
}
#recContact li#lineBox a{
	background-color:#00B900;
}
#recContact li span{
	display:block;
	text-align:center;
}
#recContact li i{
	font-size:300%;
	margin:auto;
}
#recContact li > span {
    font-size: 12px;
    display: block;
    text-align: left;
    margin-top: 10px;
    padding: 0 5px;
}

@media screen and (max-width: 559px) {
#footMenus {
    width: 100%;
    margin: auto;
	position:fixed;
	bottom:0;
	left:0;
	transform:none;
	z-index: 10;
}
#footMenus ul li img{
    width: 60%;
}
#footMenus ul li a span{
     display: block;
padding-top: 12px;
        margin-top: -18px;
}
		#layout{
			width:100%;
		}
		#box1 img.text{
			width:34vw;
		}
		#box2 img.lft{
			width:70%;
			margin-left:0;
		}
		#box2 img.rht{
	width:30%;
			margin-right:0;
	}
#box2 p.lft {
    display: inline-block;
    font-size: 14px;
    padding: 0 0px 20px 14px;
	margin-left:0;
}
	#box3 img.text1{
			width:13vw;
			top:10px;
			right:70px;
		}
		#box3 img.text2{
			top:30px;
			left:50px;
			width:14vw;
		}

		#box4 img.text{
    bottom: 15vw;
    left: 15vw;
    width: 40vw;
	}
		#box5 p{
			font-size:20px;
		}
		#box6{
		}
		#box6 ul li h5{
			font-size:40px;
		}
#recContact li{
display:block;
width:calc(100%/1 - 14px);
}
#recContact li a:link,
#recContact li a:hover,
#recContact li a:visited{
	padding:5px 0px;
}
#recContact li span {
    display: inline-block;
}
#recContact li i {
    font-size: 140%;
    margin-right: 5px;
    vertical-align: middle;
}
#recContact li > span {
    font-size: 11px;
    display: block;
}

		}


/*回り込み解除用*/
.clearfix:after {  
content: ".";  
display: block;  
visibility: hidden;  
height: 0.1px;  
font-size: 0.1em;  
line-height: 0;  
clear: both;  
} 
.clr{
clear: both;  
}