﻿/************************* スマートフォン用CSS *************************/
@media screen and (max-width:768px){ /* スマホ用 */
/********** 共通仕様 **********/
body{
	font-family: sans-serif,"Meiryo UI",メイリオ, 游ゴシック, Arial;
	font-size:16px;
	color:#333333;
	width:100%;
	margin:0px auto;
	padding:0px ;
}

a { color:#0066FF; text-decoration:none; }
a:hover { color:#0066ff; text-decoration:underline; cursor:pointer; }

.clear-both { clear:both; }
.container { width:100%; margin:0px auto; padding:0px; }

.pagetop-wrap { display:none; }
.pagetop { display: none;}

.font-l-150 { font-size:150%; }
.font-l-250 { font-size:150%; }


/********** ヘッダー用 **********/
.pc-header-container { display:none; }

.sp-header-container { width:100%; height:50px; margin:0px auto; padding:0px; clear:both; background:#fff; }
.sp-header-container li img { width:100%; height:auto; }

/********** フッター用 **********/
.footer-container { width:100%; margin:0px auto; padding:80px 0px; background:#474747; color:#fff; }
.footer-container table { width:100%; max-width:1024px; margin:0px auto; }
.footer-container table th { line-height:2.4em; display:block; text-align:center; font-size:80%; }
.footer-container table td { display:block; text-align:center; padding-top:20px; }

.copyright { width:100%; margin:0px auto; padding:0px; line-height:2em; font-size:85%; text-align:center; }

/********** トップページ用 **********/
/***** スライドイメージ用 *****/
.tp-slide-wrap { margin-top:5px; }
.tp-slide-img-wrap { width:100%; margin:0px auto; padding:0px; }
.tp-slide-img-wrap img { width:100%; height:auto; }

/***** コンテンツ *****/
/* コンテンツタイトル */
.tp-cont1-title-a { font-size:190%; line-height:2.1em; text-align:center; color:#303a79; padding-top:40px;}
.tp-cont1-title-b { font-size:110%; line-height:2.8em; text-align:center; color:#cccccc; padding-bottom:46px; }

/* コンテンツ用フォント（大） */
.tp-cont-font-a { font-size:150%; border-bottom:1px #000 solid; line-height:2.2em; }

/* 電気工事 */
.tp-electricity-container { width:100%; margin:0px auto; padding:50px 0px; background-image:url('../imgs/bk/bk_electricity-01.png'); background-size:cover; border-bottom:10px #fff solid; }
.tp-electricity-container table { width:98%; margin:0px auto; padding:0px; }
.tp-electricity-container table th { display:block; text-align:center; padding:0px; }
.tp-electricity-container table th img { width:100%; height:auto; }
.tp-electricity-container table td { display:block; text-align:center; line-height:2em; }

/* エアコン工事 */
.tp-air-container { width:100%; margin:0px auto; padding:50px 0px; background-image:url('../imgs/bk/bk_air-01.png'); background-size:cover; border-bottom:10px #fff solid; }
.tp-air-container table { width:98%; margin:0px auto; padding:0px; }
.tp-air-container table th { display:block; text-align:center; padding:0px; }
.tp-air-container table th img { width:100%; height:auto; }
.tp-air-container table td { display:block; text-align:center; line-height:2em; }

/* その他工事 */
.tp-etc-container { width:100%; margin:0px auto; padding:50px 0px; background-image:url('../imgs/bk/bk_etc-01.png'); background-size:cover; }
.tp-etc-container table { width:98%; margin:0px auto; padding:0px; }
.tp-etc-container table th { display:block; text-align:center; padding:0px; }
.tp-etc-container table th img { width:100%; height:auto; }
.tp-etc-container table td { display:block; text-align:center; line-height:2em; }

/***** 会社概要 *****/
.tp-about-container { width:100%; margin:0px auto; padding:0px; background:#ededed; padding:10px 0px; }
.tp-about-container table { width:98%; margin:0px auto; padding:0px; background:#fff; }
.tp-about-container table th { display:block; line-height:1.9em; font-weight:normal; padding-top:40px ; }
.tp-about-container table td { display:block; padding:0px; }
.tp-about-container table td table { width:95%; margin:0px auto; }
.tp-about-container table td table tr { border-bottom:1px #303a79 solid; }
.tp-about-container table td table th { display:block; color:#204a9e; line-height:2.4em; padding:0px; font-weight:bold; }
.tp-about-container table td table td { display:block; line-height:2em; padding:0px; }

.tp-youtube-wrap { width:100%; margin:0px auto; padding:20px 0px; }
.tp-youtube-container { width:100%; height:0; margin:0px auto; padding-bottom:56.25%; position:relative; }
.tp-youtube-container iframe { width:100%; height:100%; position:absolute; top:0; left:0; }

/********** 採用情報 ***********/
.recruit-container { width:100%; margin:0px auto; padding:0px; background:#dbe1ed; }
.recruit-wrap { width:100%; margin:0px auto; padding:20px 0px; }
.recruit-wrap table { width:95%; margin:0px auto; padding:0px; background:#fff; }
.recruit-wrap table th { display:block; padding:0px 10px; line-height:2em; text-align:left; background:#2155a3; color:#fff; }
.recruit-wrap table td { display:block; padding:0px 10px; line-height:2em; }
.recruit-area { padding:10px 0px; text-align:center; }
.recruit-text1 { padding:20px 0px; font-size:200%; font-weight:bold; color:#214c9e; }

/********** 問い合わせ **********/
.contact-container { width:90%; margin:0px auto; padding:0px; text-align:center; }
.contact-container table { width:100%; margin:0px auto; text-align:left; }
/*.contact-container table tr { border-bottom:1px #dddddd solid; }*/
.contact-container table th { width:100%; display:block; padding:10px 0px; color:#707070; }
.contact-container table td { width:100%; display:block; padding:10px 1px 10px 15px; line-height:2.6em; border-bottom:1px #dddddd solid; }
.contact-container table textarea { width:100%; line-height:2em; border:1px #cccccc solid; border-radius:5px; }
.contact-input1 { width:100%; line-height:2.2em; border:1px #cccccc solid; border-radius:5px; }
.contact-btn-area { width:100%; text-align:center; padding:15px 0px 40px 0px; }
.contact-btn-area input { width:40%; padding:5px; margin:0px 10px; line-height:2em; color:#fff; border:1px #214c9e solid; border-radius:5px; background:#214c9e;}
.contact-btn-area input:hover { color:#214c9e; background:#fff;}


/**********　文字アニメーション **********/
#animation {
margin: 0px 0;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-10px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.markertest {
    font-weight:bold;
    background: -webkit-linear-gradient(left, #cccccc 5%, transparent 50%);
    background: -moz-linear-gradient(left, #cccccc 5%, transparent 50%);
    background: linear-gradient(left, #cccccc 5%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 200% .25em; 
    background-position: 100% .5em;
    transition: 2s;
}
.markertest.is-active{
    background-position: 0% .5em;
}


}