@charset "utf-8";

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

	FOOTER
=========================================================================================== */

footer {
	font-size: 85%;
	font-feature-settings : "palt"; //文字詰め
	width: 100%;

	/* ===================================================
		レイアウトfooterLay01の場合
	=================================================== */
	&.footerLay01 {
		.footerContainer {
			width: @contentWidth;
			padding: 40px 0;
			margin: 0 auto;

			.logoArea {
				width: @footerLay01LogoWidth;
				float: left;
			}
			.footerInfo {
				max-width: 100% - (@footerLay01LogoWidth + @footerLay01SnsWidth); //ロゴ右側余白のため、widthだとはみ出る
				width: 100%;
				float: left;
			}
			.snsIcon {
				width: @footerLay01SnsWidth;
				float: right;
			}
		}
	}

	/* ===================================================
		レイアウトfooterLay02の場合
	=================================================== */
	&.footerLay02 {
		.footerContainer {
			padding: 40px 0;
			text-align: center;

			.logoArea,.footerInfo,.snsIcon {
				width: @contentWidth;
				margin: 0 auto 15px;
			}
			.logoArea {
				a {
					display: inline-block;
				}
			}
			.snsIcon {
				margin-bottom: 0; // リセット
			}
		}
	}

	/* ===================================================
		Footerグローバルナビ
	=================================================== */
	.footerNavi {
		border-bottom: 1px solid #1c1c1c;
		// border-bottom: 1px solid #001d41;
		// box-shadow: 0 1px #0f4688;
		padding: @footerNaviPadding;
		width: 100%;

		ul {
			width: @contentWidth;
			letter-spacing: -5px;
			margin: 0 auto;

			li {
				display: inline-block;
				width: @footerNaviLiWidth;
				letter-spacing: 0.5px;
				margin-bottom: 8px;
				vertical-align: middle;
				text-align: center;

				a {
					padding: @footerNaviAPadding;
					// color: #fff;
					display: inline-block;
				}
			}
		}
	}/* footerNavi END */

	/* ===================================================
		Footer共通
	=================================================== */
	.footerContainer {
		.clearfix();

		/* --------------------------------------------
			インフォメーション部分
		-------------------------------------------- */
		.footerInfo {
			font-size: 14px;
			letter-spacing: .05em;
			h2 {
				font-size: @footerH2Font;
				font-weight: bold;
				line-height: 130%;
				background: none;
				padding: 0;
			}

			h3 {
				font-size: @footerH3Font;
				font-weight: normal;
				line-height: 130%;
				border: none;
				padding: 0;
				&::after {content:none}
			}

			.telNum {
				line-height: 100%;

				&::before {
					font-family: @iconFont;
					content: @telIcon;
					margin: 0 5px 0 0;
					font-size: 85%;
				}
			}

			h2, h3, .telNum, .add {
				margin: 0 0 5px;
			}

			.add, .businessHours {
				line-height: 130%;
			}
		}

		/* --------------------------------------------
			SNSアイコン部分
		-------------------------------------------- */
		.snsIcon {
			ul {
				width: @snsIconUlWidth;
				margin: 0 auto;
				text-align: center;

				li {
					box-sizing: content-box;
					display: inline-block;
					width:  40px;/*要変更*/
					height: 40px;/*要変更*/
					padding: 0 5px;
				}
				li a {
					display: block;
					vertical-align: middle;
					border-radius: 3px;
					&:hover {opacity: .7}
				}
				li img {
					width:  40px;/*要変更*/
					height: 40px;/*要変更*/
					margin: 0;
				}
				.facebookIcon a { background-color: @facebookIcon; }
				.twitterIcon a  { background-color: @twitterIcon; }
				.blogIcon a     { background-color: @blogIcon; }
			}
		}
	}/* footerContainer END */

	/* ===================================================
		Copyright共通
	=================================================== */
	.copyright {
		padding: 15px 0;
		background: @copyBg;

		p {
			width: @contentWidth;
			margin: 0 auto;
			text-align: center;
			letter-spacing: .05em;
			font-size: @copyFont;
			color: @colorWhite;
		}
	}
}

	/* ===================================================
	scrolltop
	=================================================== */
	#scrolltop{
		background: transparent;
		margin-top: -5px;
		.esol_wraper {
			// overflow: hidden;
			width: @contentWidth;
			margin: auto;
		}
	}
	#scrolltop p{
		// float: right;
		// width: 50px; 要調整
		text-align: right;
		// display: block;
		padding: 10px 20px;
	}
	#scrolltop a{
		display: inline-block;
		width: 100px;
		// height: 20px;
		padding: 10px 0;
		position: relative;
		&::after {
			position: absolute;
			content: '';
			top: 5px;
			bottom: 0;
			right: 50px;
			margin: auto;
			width:  10px;
			height: 10px;
			border-top: 	2px solid @colorMain;
			border-right: 2px solid @colorMain;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
		&:link, &:visited {
			font-size: 130%;
		}
	}