/************************* パソコン用CSS *************************/
@media screen and (min-width: 769px){ /* パソコン用 */
/********** 共通仕様 **********/
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 {}
.pagetop { display: none; position: fixed; bottom: 10px; right: 30px; }
.pagetop a { display: block; }
.pagetop a:hover { display: block; }
.pagetop img { width:100%; height:auto; z-index:999; }

.font-l-150 { font-size:150%; }
.font-l-250 { font-size:250%; }
	
/********** ヘッダー用 **********/
.pc-header-container { width:100%; margin:0px auto; padding:0px; background-color:#fff; }
.pc-header-container table { width:100%; margin:0px auto; padding:0px; }
.pc-header-container table th { width:50%; text-align:left; }
.pc-header-container table td { width:50%; text-align:right; }

.pc-hnavi-wrap { width:100%; margin:0px auto; padding:0px; background-color:#394ab6; }
.pc-hnavi-wrap table { width:100%; margin:0px auto; padding:0px; }
.pc-hnavi-wrap table td { width:20%; line-height:2em; text-align:center; }
.pc-hnavi-wrap table td a  { display:block; text-decoration:none; color:#fff; line-height:2.3em; position: relative; }
.pc-hnavi-wrap table td a:hover { color:#204a9e; background:#afb7e8; }
.pc-hnavi-wrap table td a::after { position: absolute; left: 0; content: ''; width: 100%; height: 5px; background: #204a9e; bottom: -1px; transform: scale(0, 1); transform-origin: right top; transition: transform 0.5s; color: #204a9e; }
.pc-hnavi-wrap table td a:hover::after { transform: scale(1, 1); transform-origin: left top; color: #7f98cb; }

.pc-hnavi-1 { border:0px; }
.pc-hnavi-2 { border-left:2px #fff solid; border-right:2px #fff solid; }

.sp-header-container { display:none; }

/********** フッター用 **********/
.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 { font-size:80%; line-height:2.4em; }
.footer-container table td { width:50%; }

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


/********** トップページ用 **********/
/***** スライドイメージ用 *****/
.tp-slide-wrap { margin-top:0px; }
.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:310%; line-height:2.4em; text-align:center; color:#303a79; padding-top:70px;}
.tp-cont1-title-b { font-size:180%; line-height:3.2em; text-align:center; color:#cccccc; padding-bottom:46px; }

/* コンテンツ用フォント（大） */
.tp-cont-font-a { font-size:200%; 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:100%; max-width:960px; margin:0px auto; padding:0px; }
.tp-electricity-container table th { width:50%; text-align:center; padding:0px 15px; }
.tp-electricity-container table th img { width:100%; height:auto; }
.tp-electricity-container table td { width:50%; text-align:center; font-size:115%; 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:100%; max-width:960px; margin:0px auto; padding:0px; }
.tp-air-container table th { width:50%; text-align:center; padding:0px 15px; }
.tp-air-container table th img { width:100%; height:auto; }
.tp-air-container table td { width:50%; text-align:center; font-size:115%; 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:100%; max-width:960px; margin:0px auto; padding:0px; }
.tp-etc-container table th { width:50%; text-align:center; padding:0px 15px; }
.tp-etc-container table th img { width:100%; height:auto; }
.tp-etc-container table td { width:50%; text-align:center; font-size:115%; line-height:2em; }

/***** 会社概要 *****/
.tp-about-container { width:100%; margin:0px auto; padding:0px; background:#ededed; padding:10px 0px; text-align:center; }
.tp-about-container table { width:100%; max-width:1366px; margin:0px auto; padding:0px; background:#fff; }
.tp-about-container table th { width:50%; line-height:1.9em; font-weight:normal; padding-left:15px; padding-top:40px; vertical-align:top;}
.tp-about-container table td { width:50%; padding:30px; }
.tp-about-container table td table { width:100%; margin:0px auto; box-shadow:5px 5px 5px #ececec; }
.tp-about-container table td table tr { border-bottom:1px #303a79 solid; }
.tp-about-container table td table th { width:15%; color:#204a9e; line-height:2.4em; padding:0px 5px; font-weight:bold; }
.tp-about-container table td table td { line-height:2.4em; padding:0px 5px; }

.tp-youtube-wrap { width:100%; max-width:1024px; 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%; max-width:960px; margin:0px auto; padding:20px 0px; }
.recruit-wrap table { width:100%; margin:0px auto; padding:0px; background:#fff; }
.recruit-wrap table th { padding:10px 10px; line-height:2.2em; text-align:left; background:#2155a3; color:#fff; border-bottom:1px #fff solid; }
.recruit-wrap table td { padding:10px 10px; line-height:2.2em; border-bottom:1px #214fa0 solid; }
.recruit-area { padding:10px 0px; text-align:center; }
.recruit-text1 { padding:20px 0px; font-size:250%; font-weight:bold; color:#214c9e; }

/********** 問い合わせ **********/
.contact-container { width:100%; max-width:720px; 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:30%; padding:10px 0px; line-height:2.6em; color:#707070; border-bottom:1px #dddddd solid; }
.contact-container table td { width:70%; padding:10px 0px; line-height:2.6em; }
.contact-container table textarea { width:100%; line-height:2em; border:1px #cccccc solid; border-radius:5px; }
.contact-input1 { width:60%; 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 20px; 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;
}

}