@charset "UTF-8";
/* CSS Document */

header,
nav,
aside,
section,
footer,
figure,
figcaption {display:block;}

#scrlNum{
	position:fixed;
	left:0;
	top:0;
	width:0.3em;
	z-index:10;
	display:none;
}


.alert {
	padding:1.0em 1.8em;
}

.alert-warning {
	background:#fdfebb;
	color:#0dab88;
	border:solid 1px #3faeca;
}




/*フォーム項目*/

input,
select,
button,
textarea {
	border:solid 1px #ccc;
	box-sizing:border-box;
	padding:5px 10px;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
	background:#fff;
	-webkit-appearance: none;
	width:100%;
}

input[type="checkbox"]{
	width:20px;
	height:20px;
	padding:5px;
	border-radius: 5px;        /* CSS3草案 */  
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;   /* Firefox用 */
	margin-right:5px;
	position:relative;
}
input[type="checkbox"].active::before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	background:#ccc;
	position:absolute;
	left:3px;
	top:3px;
	border-radius: 3px;        /* CSS3草案 */  
	-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 3px;   /* Firefox用 */
}

input[type="radio"]{
	width:20px;
	height:20px;
	padding:5px;
	border-radius: 20px;        /* CSS3草案 */  
	-webkit-border-radius: 20px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 20px;   /* Firefox用 */
	margin-right:5px;
	position:relative;
}
input[type="radio"].active::before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	background:#ccc;
	position:absolute;
	left:3px;
	top:3px;
	border-radius: 12px;        /* CSS3草案 */  
	-webkit-border-radius: 12px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 12px;   /* Firefox用 */
}

form .btmForm{
	padding-top:50px;
}
form .btmForm li{
	padding:10px 0;
}

input[type="button"],
input[type="reset"],
input[type="submit"],
button{
	cursor:pointer;
	border:none;
	background:#1ea7bd;
	color:#fff;
	height:45px;
	line-height:45px;
	border-radius: 35px;        /* CSS3草案 */  
	-webkit-border-radius: 35px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 35px;   /* Firefox用 */
	padding:0 30px;
}

/*フォーム画面の配置*/

form dl{
	padding:1.1em 0.6em;
	border-bottom:solid 2px #f1faff;
}

form .inputFrame {
	margin-bottom:2.6em;
}


form dl{
	opacity:0;
	transition-property:opacity;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
form dl.show{
	opacity:1;
}

form dt{
	text-align:center;
	margin-bottom:0.8em;
}

form dd .line{
	padding:0.2em;
}

form .textCheck dd{
	text-align:center;
	font-weight:bold;
	color:#1ec3b5;
	font-size:1.1em;
}

.textMailCheck {
	color:#25687b;
	margin-bottom:1.0em;
}


/*確認画面*/
#introContactCheck {
	opacity:0;
	transform:translateX(5%);
	transition-property:opacity,transform;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introContactCheck.show {
	opacity:1;
	transform:translateX(0);
}



/*送信完了ページ*/
.textMailThanks {
	color:#1bc8b2;
	font-size:7vw;
	position:relative;
	padding:200px 0 0 0!important;
	margin-bottom:1.5em;
	text-align:center;
}
.textMailThanks::before {
	content:"";
	width:180px;
	height:180px;
	background:url(css_img/iconThanksMass.svg) no-repeat center center;
	background-size:100%;
	display:block;
	position:absolute;
	left:50%;
	top:0;
	opacity:0;
	transform:translateX(-50%) rotateY(90deg);
	transition-property:transform,opacity;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
.textMailThanks.show::before {
	opacity:1;
	transform:translateX(-50%) rotateY(0);
}
.textMailThanks span {
	position:relative;
	transform:translateY(20px);
	display:block;
	opacity:0;
	transition-property:transform,opacity;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
.textMailThanks.show span {
	opacity:1;
	transform:translateY(0);
}

#btmReturnMainpage {
	position:relative;
	opacity:0;
	transform:translateX(-10%);
	transition-property:transform,opacity;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0.4s;
}
#btmReturnMainpage.show {
	opacity:1;
	transform:translateX(0);
}

.textThanks {
	padding:1.0em 0;
	opacity:0;
	transform:translateX(20%);
	transition-property:opacity,transform;
	transition-duration:0.8s;
	transition-timing-function:ease-in-out;
	transition-delay:0.5s;
}
.textThanks.show {
	opacity:1;
	transform:translateX(0);
}

#frameTsuikiThanks {
	margin-bottom:3.5em;
	opacity:0;
	transition-property:opacity;
	transition-duration:0.8s;
	transition-timing-function:ease-in-out;
	transition-delay:0.6s;
}
#frameTsuikiThanks.show {
	opacity:1;
}

/*使用不可の時の表示設定*/
input.useless {
	opacity:0.5;
	cursor:text;
	background-color:#eee;
}

form .listFormBtm {
	padding:0;
}
form .listFormBtm li{
	padding:0.5em 1.0em;
}


.btm.returnHome {
	color:#fff;
	background:#0bc9c7;
	border:solid 1px #069593;
	position:relative;
	font-size:1.2em;
	text-align:left;
	padding:1.0em 2.5em 1.0em 4.5em;
}

.btm.returnHome::before {
	content:"";
	background:url(css_img/iconReturnHome.svg) no-repeat left top;
	background-size:100%;
	width:40px;
	height:35px;
	left:1.0em;
	top:50%;
	transform:translateY(-50%);
	position:absolute;
}

.btm.returnHome:after {
	content:"";
	background:url(css_img/iconBtnCursor.svg) no-repeat left top;
	background-size:100%;
	width:35px;
	height:30px;
	right:1.0em;
	top:50%;
	transform:translateY(-50%);
	position:absolute;
}

/*エラー画面レイアウト*/

#textErrorList {
	opacity:0;
	transition-property:opacity;
	transition-duration:0.8s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#textErrorList.show {
	opacity:1;
}

.frameError{
	/*max-width:500px;*/
	border:solid 1px #f00;
	padding:0.6em 0.8em;
	margin:auto;
	margin-bottom:1.5em;
	color:#f00;
}
.frameError li::before{
	position:absolute;
	left:0;
	top:0.6em;
	width:17px;
	height:17px;
	background: url(css_img/iconErrorForm.svg) no-repeat center center;
	background-size:100%;
	content:"";
	display:block;
}

#formErrorList {
	opacity:0;
	transition-property:opacity;
	transition-duration:0.8s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}

#formErrorList.show {
	opacity:1;
}

/* ウィンドウ幅が0〜479pxの場合に適用するCSS */
@media screen and ( min-width:992px ){

	form dd .line{
		padding:0.2em;
		float:left;
	}
	form dd .line.line_1{
		width:100%;
	}
	form dd .line.line_2{
		width:50%;
	}
	form dd .line.line_3{
		width:33%;
   	width : -webkit-calc(100% / 3) ;
  	width : calc(100% / 3) ;
	}

	form .listFormBtm {
		display:flex;
		justify-content: center;
	}
	

	.textMailCheck {
		text-align:center;
	}
	
	
	/*送信完了ページ*/
	.textMailThanks {
		font-size:1.8em;
		font-weight:bold;
		padding:35px 0 35px 240px!important;
		margin-bottom:1.2em;
		text-align:left;
	}
	
	.textMailThanks::before {
		width:150px;
		height:150px;
		left:40px;
		top:50%;
		transform:translate(0,-50%) rotateY(90deg);
	}
	.textMailThanks.show::before {
		transform:translate(0,-50%) rotateY(0);
	}
	
	/*エラー画面レイアウト*/
	.frameError{
		padding:1.2em 1.8em;
		margin-bottom:1.5em;
	}


}



.clear{
	clear:both;
}

.clearfix:after {
	display:block;
	clear:both;
	content:"";
	height:0;
	visibility:hidden;
}

img {
	max-width:100%;
	height:auto;
}

table {
	border-collapse:collapse;
}

body {
	-webkit-text-size-adjust: 100%;
	font-size:14px;
	background:#d5edfb;
}

.wideFrame {
	width:auto;
	padding:0 10px;/**/
}

h2 {
	padding:8px 25px;
	height:2.6em;
	line-height:2.6em;
	color:#ffffff00;
	overflow:hidden;
	font-size:5vw;
	font-weight:bold;
	margin-bottom:40px;
	font-family: 'Baloo Tammudu', cursive;
	position:relative;
	transition-property:color,opacity;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
h2.line_2 {
	font-size: 4.3vw;
    padding: 15px 35px 20px 20px;
    line-height: 5.2vw;
    height: 56px;
}
h2.show {
	color:#ffffffff
}

h2:after {
	content:"";
	display:block;
	width:150%;
	height:100%;
	background:#24bbef;
	position:absolute;
	right:30px;
	top:0;
	opacity: 0;
	z-index:-1;
	transform:skewX(-35deg) translateX(-100%);
	transition-property:transform,opacity;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
h2.show:after {
	opacity: 1;
	transform:skewX(-35deg) translateX(0);
}

#wrapper {
	padding-top:45px;
	/*padding-bottom:80px;*/
}

/*リスト項目の表示*/

ul{
	padding:10px 0 10px 5px;
}
li {
	position:relative;
	padding:8px 0 8px 25px;
}
li span {
	position:absolute;
	left:0;
	top:8px;
}

a.btm {
	display:block;
	font-size:1.2em;
	text-align:center;
	padding:11px 10px;
	box-sizing:border-box;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
}
a.btm.p01 {
	color:#fff;
	background:#FF6E6E;
}


/*その他*/

.markScroll {
	position:relative;
}
.markScroll::before,
.markScroll:after {
	content:"";
	display:block;
	right:10px;
	border-right:solid 5px transparent;
	border-left:solid 5px transparent;
	position:absolute;
}
.markScroll::before {
	top:5px;
	border-top:solid 5px transparent;
	border-bottom:solid 8px #ccc;
}
.markScroll:after {
	bottom:5px;
	border-top:solid 8px #ccc;
	border-bottom:solid 5px transparent;
}

li.markNew {
	padding-left:80px;
}

li.markNew::before {
	content:"new!";
	display:block;
	color:#fff;
	font-size:0.87em;
	background:#a5fffb;
	padding:0 8px;
	height:22px;
	line-height:22px;
	position:absolute;
	left:0;
	top:7px;
	order-radius: 22px;        /* CSS3草案 */  
	-webkit-border-radius: 22px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 22px;   /* Firefox用 */
}

@media screen and ( min-width:992px )
{
	
	h2 {
		padding:38px 25px 24px!important;
		height:auto!important;
		line-height:inherit!important;
		font-size:1.7em!important;
		margin-bottom:75px;
	}
	
	#wrapper {
		padding-top:81px;
		font-size:1.2em;
	}
	.wideFrame {
		width:992px;
		margin-left:auto;
		margin-right:auto;
		padding:0;
	}
	
}

@media screen and ( min-width:768px ){
	
	form .btmForm li{
		float:left;
		width:50%;
		padding:10px 10px;
		box-sizing:border-box;
	}
}




/*****************************************************************
#header
*****************************************************************/
#header {
	height:48px;
	background:#ffffff;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index:10;
}

#header h1 {
	position:absolute;
	width:150px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

#header h1 a{
	display:block;
	width:100%;
	height:0;
	overflow:hidden;
	padding:25% 0 0 0;
	background:url(css_img/siteID.svg) no-repeat center top;
	background-size:100%;
}

/*****************************************************************
#contents
*****************************************************************/
#contents{}

#contents p{
	padding:1.0em 0.3em;
}

.areaFrame {
	width:100%;
	overflow:hidden;
	position:relative;
	box-sizing:border-box;
	padding:5.1em 0.8em;
	border-bottom:solid 2px #fff;
}


.areaFrame .inframe {
	margin:auto;
	max-width:992px;
	box-sizing:border-box;
}

@media screen and ( min-width:768px ){
	
	#contents p{
		padding:2.5em 0.3em;
	}
	
}


/*****************************************************************
#footer
*****************************************************************/
#footer {}

#wordCopy {
	text-align:center;
	padding:0.8em;
	font-size:0.8em;
	color:#499bc7;
}

#footer #btmScrollTop {
	position: fixed;
	right:5px;
	bottom:5px;
	z-index:9;
	background:#3191d6;
	color:#fff;
	display:none;
	width:65px;
	height:0;
	overflow:hidden;
	padding:65px 0 0 0;
}
#footer #btmScrollTop.show {
	display:block;
}

#footer #btmScrollTop::before {
	content:"TOP";
	position:absolute;
	left:50%;
	bottom:0.1em;
	transform:translateX(-50%);
	font-size:0.85em;
}

#footer #btmScrollTop:after {
	content:"";
	position:absolute;
	left:50%;
	bottom:1.4em;
	background: url(css_img/cursorPagetop.svg) no-repeat center top;
	background-size:100%;
	width:25px;
	height:15px;
	transform:translateX(-50%);
	opacity:0.5;
	transition-property:opacity,bottom,height;
	transition-duration:0.2s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#footer #btmScrollTop:hover:after {
	bottom:1.5em;
	height:30px;
	opacity:1;
}


/*****************************************************************
メニュー画面関連
*****************************************************************/

#btnMenu {
	position: fixed;
	right: 5px;
	top: 4px;
	z-index: 20;
	background: #2cb8c1;
	width: 40px;
	height: 40px;
}

@-webkit-keyframes viewPlay01 {
 0% { top:10px; } 
 450% { top:19px; } 
 50% { -moz-transform:rotate( 0deg ); -webkit-transform:rotate( 0deg ); -o-transform:rotate( 0deg ); -ms-transform:rotate( 0deg ); transform:rotate( 0deg ); } 
 100% { -moz-transform:rotate( 45deg ); -webkit-transform:rotate( 45deg ); -o-transform:rotate( 45deg ); -ms-transform:rotate( 45deg ); transform:rotate( 45deg ); } 
}
 @keyframes viewPlay01 {
 0% { top:10px; } 
 450% { top:19px; } 
 50% { -moz-transform:rotate( 0deg ); -webkit-transform:rotate( 0deg ); -o-transform:rotate( 0deg ); -ms-transform:rotate( 0deg ); transform:rotate( 0deg ); } 
 100% { -moz-transform:rotate( 45deg ); -webkit-transform:rotate( 45deg ); -o-transform:rotate( 45deg ); -ms-transform:rotate( 45deg ); transform:rotate( 45deg ); } 
}

@-webkit-keyframes viewReturn01 {
 0% { top:19px; -moz-transform:rotate( 45deg ); -webkit-transform:rotate( 45deg ); -o-transform:rotate( 45deg ); -ms-transform:rotate( 45deg ); transform:rotate( 45deg ); } 
 45% { -moz-transform:rotate( 0deg ); -webkit-transform:rotate( 0deg ); -o-transform:rotate( 0deg ); -ms-transform:rotate( 0deg ); transform:rotate( 0deg ); } 
 50% { top:19px; } 
 100% { top:10px; } 
}
 @keyframes viewReturn01 {
 0% {  top:19px; -moz-transform:rotate( 45deg ); -webkit-transform:rotate( 45deg ); -o-transform:rotate( 45deg ); -ms-transform:rotate( 45deg ); transform:rotate( 45deg ); } 
 45% { -moz-transform:rotate( 0deg ); -webkit-transform:rotate( 0deg ); -o-transform:rotate( 0deg ); -ms-transform:rotate( 0deg ); transform:rotate( 0deg ); } 
 50% { top:19px; } 
 100% { top:10px; } 
}



@-webkit-keyframes viewPlay02 {
 0% { top:28px; } 
 450% { top:19px; } 
 50% { -moz-transform:rotate( 0deg ); -webkit-transform:rotate( 0deg ); -o-transform:rotate( 0deg ); -ms-transform:rotate( 0deg ); transform:rotate( 0deg ); } 
 100% { -moz-transform:rotate( -45deg ); -webkit-transform:rotate( -45deg ); -o-transform:rotate( -45deg ); -ms-transform:rotate( -45deg ); transform:rotate( -45deg ); } 
}
 @keyframes viewPlay02 {
 0% { top:28px; } 
 450% { top:19px; } 
 50% { -moz-transform:rotate( 0deg ); -webkit-transform:rotate( 0deg ); -o-transform:rotate( 0deg ); -ms-transform:rotate( 0deg ); transform:rotate( 0deg ); } 
 100% { -moz-transform:rotate( -45deg ); -webkit-transform:rotate( -45deg ); -o-transform:rotate( -45deg ); -ms-transform:rotate( -45deg ); transform:rotate( -45deg ); } 
}

@-webkit-keyframes viewReturn02 {
 0% { top:19px; -moz-transform:rotate( -45deg ); -webkit-transform:rotate( -45deg ); -o-transform:rotate( -45deg ); -ms-transform:rotate( -45deg ); transform:rotate( -45deg ); } 
 45% { -moz-transform:rotate( 0deg ); -webkit-transform:rotate( 0deg ); -o-transform:rotate( 0deg ); -ms-transform:rotate( 0deg ); transform:rotate( 0deg ); } 
 50% { top:19px; } 
 100% { top:28px; } 
}
 @keyframes viewReturn02 {
 0% {  top:19px; -moz-transform:rotate( -45deg ); -webkit-transform:rotate( -45deg ); -o-transform:rotate( -45deg ); -ms-transform:rotate( -45deg ); transform:rotate( -45deg ); } 
 45% { -moz-transform:rotate( 0deg ); -webkit-transform:rotate( 0deg ); -o-transform:rotate( 0deg ); -ms-transform:rotate( 0deg ); transform:rotate( 0deg ); } 
 50% { top:19px; } 
 100% { top:28px; } 
}

@-webkit-keyframes viewPlay03 {
 0% { -moz-transform:rotateY( 0deg ); -webkit-transform:rotateY( 0deg ); -o-transform:rotateY( 0deg ); -ms-transform:rotateY( 0deg ); transform:rotateY( 0deg ); } 
 50% { -moz-transform:rotateY( 0deg ); -webkit-transform:rotateY( 0deg ); -o-transform:rotateY( 0deg ); -ms-transform:rotateY( 0deg ); transform:rotateY( 0deg ); } 
 100% { -moz-transform:rotateY( 90deg ); -webkit-transform:rotateY( 90deg ); -o-transform:rotateY( 90deg ); -ms-transform:rotateY( 90deg ); transform:rotateY( 90deg ); } 
}
 @keyframes viewPlay03 {
 0% { -moz-transform:rotateY( 0deg ); -webkit-transform:rotateY( 0deg ); -o-transform:rotateY( 0deg ); -ms-transform:rotateY( 0deg ); transform:rotateY( 0deg ); } 
 50% { -moz-transform:rotateY( 0deg ); -webkit-transform:rotateY( 0deg ); -o-transform:rotateY( 0deg ); -ms-transform:rotateY( 0deg ); transform:rotateY( 0deg ); } 
 100% { -moz-transform:rotateY( 90deg ); -webkit-transform:rotateY( 90deg ); -o-transform:rotateY( 90deg ); -ms-transform:rotateY( 90deg ); transform:rotateY( 90deg ); } 
}

@-webkit-keyframes viewReturn03 {
 0% { -moz-transform:rotateY( 90deg ); -webkit-transform:rotateY( 90deg ); -o-transform:rotateY( 90deg ); -ms-transform:rotateY( 90deg ); transform:rotateY( 90deg ); } 
 50% { -moz-transform:rotateY( 90deg ); -webkit-transform:rotateY( 90deg ); -o-transform:rotateY( 90deg ); -ms-transform:rotateY( 90deg ); transform:rotateY( 90deg ); } 
 100% { -moz-transform:rotateY( 0deg ); -webkit-transform:rotateY( 0deg ); -o-transform:rotateY( 0deg ); -ms-transform:rotateY( 0deg ); transform:rotateY( 0deg ); } 
}
 @keyframes viewReturn03 {
 0% { -moz-transform:rotateY( 90deg ); -webkit-transform:rotateY( 90deg ); -o-transform:rotateY( 90deg ); -ms-transform:rotateY( 90deg ); transform:rotateY( 90deg ); } 
 50% { -moz-transform:rotateY( 90deg ); -webkit-transform:rotateY( 90deg ); -o-transform:rotateY( 90deg ); -ms-transform:rotateY( 90deg ); transform:rotateY( 90deg ); } 
 100% { -moz-transform:rotateY( 0deg ); -webkit-transform:rotateY( 0deg ); -o-transform:rotateY( 0deg ); -ms-transform:rotateY( 0deg ); transform:rotateY( 0deg ); } 
}

#btnMenu li{
	position:absolute;
	width:30px;
	height:0;
	padding:2px 0 0 0;
	overflow:hidden;
	background:#fff;
	left:5px;
	/*transform:translateX(-50%);
	transition-property:transform;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0.2s;*/
}
#btnMenu li.p01{top:10px;}
#btnMenu li.p02{top:19px;}
#btnMenu li.p03{top:28px;}

#btnMenu.trunpv li{}

#btnMenu.view li.p01{
	/**/top:19px;
	animation: viewPlay01 0.8s ease 0s forwards alternate;
	-webkit-animation: viewPlay01 0.8s ease 0s forwards alternate;
}
#btnMenu.hidden li.p01{
	animation: viewReturn01 0.8s ease 0s forwards alternate;
	-webkit-animation: viewReturn01 0.8s ease 0s forwards alternate;
}


#btnMenu.view li.p02{
	animation: viewPlay03 0.8s ease 0s forwards alternate;
	-webkit-animation: viewPlay03 0.8s ease 0s forwards alternate;
}
#btnMenu.hidden li.p02{
	animation: viewReturn03 0.8s ease 0s forwards alternate;
	-webkit-animation: viewReturn03 0.8s ease 0s forwards alternate;
}

#btnMenu.view li.p03{
	top:19px;
	animation: viewPlay02 0.8s ease 0s forwards alternate;
	-webkit-animation: viewPlay02 0.8s ease 0s forwards alternate;
}
#btnMenu.hidden li.p03{
	animation: viewReturn02 0.8s ease 0s forwards alternate;
	-webkit-animation: viewReturn02 0.8s ease 0s forwards alternate;
}



#screenMenu {
	position:fixed;
	/*display:none;*/
	transform:translateY(-100%);
	opacity:0;
	z-index:15;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background:#ffffff;
	overflow-x:hidden;
	overflow-y:scroll;
	transition-property:transform,opacity;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#screenMenu.view {
	display:block;
	transform:translateY(0);
	opacity:1;
}

#screenMenu ul{
	padding:4.6em 1.1em 1.2em;
	font-size:1.1em;
	max-width:720px;
	margin:auto;
}
#screenMenu ul li{
	padding:1.1em 0;
}


@-webkit-keyframes btmMenu {
 0% { opacity: 0; transform:translateX(-100%); } 
 50% {  opacity: 1;} 
 100% { transform:translateX(0);} 
}
 
 @keyframes example { 
 0% { opacity: 0; transform:translateX(-100%); } 
 50% {  opacity: 1;} 
 100% { transform:translateX(0);} 
 }

#screenMenu ul li a{
	font-weight:bold;
	font-size: 1.2em;
	height:0;
	color:#333;
	display:block;
	padding:60px 0.3em 0 1.0em;
	position:relative;
	text-decoration:none;
	overflow:hidden;
}

#screenMenu ul li a::before{
	content:"";
	width:21px;
	height:100%;
	background: url(css_img/iconMenuBtm.svg) no-repeat left center;
	background-size:100%;
	position:absolute;
	left:0;
	top:0;
	transform: skewX(5deg);
}

#screenMenu ul li a span{
	width:230px;
	height:0;
	overflow:hidden;
	padding:50px 0 0 0;
	top:50%;
	left:30px;
	transform:translateY(-50%);
	background: no-repeat left top;
	background-size:100%;
}
#screenMenu ul li#btmMenuRecession a span{
	background-image:url(css_img/btmText_Recession.svg);
}
#screenMenu ul li#btmMenuRule a span{
	background-image:url(css_img/btmText_Rule.svg);
}
#screenMenu ul li#btmMenuTrouble a span{
	background-image:url(css_img/btmText_Trouble.svg);
}
#screenMenu ul li#btmMenuContact a span{
	background-image:url(css_img/btmText_Contact.svg);
}

#screenMenu .lstBlock {
	max-width:720px;
	margin:auto;
/*	display:flex;*/
	flex-wrap: wrap;
	justify-content:center;
}

#screenMenu .lstBlock .boxIcon {
	display:block;
	padding:1.0em 1.6em;
	padding-left:3.0em;
	margin:0.4em;
	background:#fff;
	border:solid 2px #2cb8c1;
	position:relative;
	color:#2cb8c1;
	font-size:1.7em;
	/*text-align:center;*/
	font-weight:bold;
}

#screenMenu .lstBlock .boxIcon::before {
	content:"";
	position:absolute;
	left:0.6em;
	top:50%;
	transform:translateY(-50%);
	width:40px;
	height:40px;
	background: no-repeat left center;
	background-size:100%;
}
#screenMenu .lstBlock .boxIcon.Tel::before { background-image: url(css_img/iconContactViewTel.svg); }
#screenMenu .lstBlock .boxIcon.Fax::before { background-image: url(css_img/iconContactViewFax.svg); }

#screenMenu .lstBlock .boxIcon {}