@charset 'utf-8';
html, body {
  scroll-padding-top: 90px;
}

/* chat-frame2 */

.chat-frame2 {
	position: fixed;
	bottom: 0px;
	right: 0px;
	width: 100%;
	z-index: 3;
	background-color:#ffe0e0;
	text-align:center;
	padding:3px;
}

@media print, screen and (max-width: 640px) {
	.chat-frame2 img {
		width: 39px;
		margin-bottom:-20px;
	}
}


.chat-frame2.chat-frame2-show {
	display: inline-block;
}

.chat-frame2 a {
	height: 100%;
	cursor: pointer;
	position: relative;
}

.chat-frame2 a:hover {
	top: -2px;
}

.chat-frame2 .chat-banner-close {
	display: inline-block;
	position: absolute;
	width: 10%;
	height: 20%;
	max-width: 15px;
	max-height: 15px;
	top: -1%;
	right: -2%;
	line-height: 1;
	cursor: pointer;
	background-color: #616161;
	border-radius: 100%;
	border: solid 6px #616161;
	box-sizing: content-box !important;
}

@media print, screen and (max-width: 640px) {
	.chat-frame2 .chat-banner-close {
		top: -10%;
	}
}

.chat-frame2 .chat-banner-close::before,
.chat-frame2 .chat-banner-close::after {
	content: "";
	width: 2px;
	height: 100%;
	position: absolute;
	top: 1px;
	display: inline-block;
	background-color: #ffffff;
	transform-origin: center center;
}

.chat-frame2 .chat-banner-close::before {
	transform: rotate(45deg) translateX(-50%);
	left: calc(50% + 1px);
}

.chat-frame2 .chat-banner-close::after {
	transform: rotate(-45deg) translateX(50%);
	right: calc(50% - 1px);
}


@media print, screen and (min-width: 640px) {
	.chat-frame2 {
	width:100%;
	padding:5px;
	}

	.chat-frame2.fixed {
		bottom: 0;
	}

	.chat-frame2 .chat-banner-close {
		right: 5%;
	}
	.chat-frame2 img {
		max-width: 41px;
		margin-bottom:-20px;
	}

}
/* chat-frame2 */

@media screen and (min-width: 768px) {
    #upaw_1 {
        margin-top: 180px;
    }

    .target-area1:hover,
    .target-area2:hover,
    .target-area3:hover,
    .target-area4:hover,
    .target-area5:hover,
    .target-area6:hover,
    .target-area7:hover,
    .target-area9:hover,
    .target-area10:hover,
    .target-area11:hover,
    .target-area12:hover,
    .target-area13:hover {
        cursor: none;
        border: 2px dotted #F00;
        border-radius: 5px;
/*        opacity:0.5;*/
    }

    #follow-image8:hover {
        opacity:0.9;
    }

    /* マウスホバー対象の範囲（高圧線） */
    .target-area1 {
        width: 560px;
        height: 40px;
        margin: -539px 2px 0px 10px;
        position: relative;
        transform:skew(2deg,3deg);
    }

    /* 追従する画像（初期は非表示） */
    #follow-image1 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 271px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-1%, -30%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（低圧線） */
    .target-area2 {
        width: 260px;
        height: 43px;
        margin: 61px 0px 0px 10px;
        position: relative;
        transform:skew(2deg,5deg);
    }

    /* 追従する画像（初期は非表示） */
    #follow-image2 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 271px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-1%, -30%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（通信線） */
    .target-area3 {
        width: 255px;
        height: 30px;
        margin: 120px 0px 0px 15px;
        position: relative;
        transform:skew(1deg,5deg);
    }

    /* 追従する画像（初期は非表示） */
    #follow-image3 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 416px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-15%, -15%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（電柱） */
    .target-area4 {
        width: 40px;
        height: 475px;
        margin: -245px 0px 0px 280px;
        position: relative;
    }

    /* 追従する画像（初期は非表示） */
    #follow-image4 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 252px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-1%, -45%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（引込線） */
    .target-area5 {
        width: 240px;
        height: 45px;
        margin: -385px 0px 0px 355px;
        position: relative;
        transform:skew(180deg,165deg);
    }

    /* 追従する画像（初期は非表示） */
    #follow-image5 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 312px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-1%, -25%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（通信線・他社） */
    .target-area6 {
        width: 250px;
        height: 50px;
        margin: 30px 0px 0px 340px;
        position: relative;
        transform:skew(180deg,165deg);
    }

    /* 追従する画像（初期は非表示） */
    #follow-image6 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 441px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-7%, -1%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（メーター） */
    .target-area7 {
        width: 60px;
        height: 100px;
        margin: -25px 0px 0px 554px;
        position: relative;
    }

    /* 追従する画像（初期は非表示） */
    #follow-image7 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 268px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-3%, -50%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（ブレーカー） */
    .target-area8 {
        width: 80px;
        height: 50px;
        margin: -43px 0 0 675px;
        position: relative;
    }

    /* 追従する画像（初期は非表示） */
    #follow-image8 {
        /*display: none;  初期状態は表示 */
        position: relative; /* 画面全体に対して位置を固定 */
        top: -120px;
        left: 690px;
        width: 150px; /* 画像のサイズ */
        height: auto;
/*        pointer-events: none;  画像がマウスイベントを邪魔しないようにする */
/*        z-index: 999; / 最前面に表示 */
        transform: translate(-50%, -50%); /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（ライト上） */
    .target-area9 {
        width: 55px;
        height: 65px;
        margin: -232px 0 0 670px;
        position: relative;
    }

    /* 追従する画像（初期は非表示） */
    #follow-image9 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 198px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-13%, -1%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（エアコン） */
    .target-area10 {
        width: 85px;
        height: 70px;
        margin: -108px 0 0 803px;
        position: relative;
    }

    /* 追従する画像（初期は非表示） */
    #follow-image10 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 198px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-13%, -1%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（冷蔵庫） */
    .target-area11 {
        width: 55px;
        height: 115px;
        margin: 190px 0 0 850px;
        position: relative;
    }

    /* 追従する画像（初期は非表示） */
    #follow-image11 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 198px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-13%, -1%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（コンセント） */
    .target-area12 {
        width: 40px;
        height: 60px;
        margin: -40px 0 0 710px;
        position: relative;
    }

    /* 追従する画像（初期は非表示） */
    #follow-image12 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 198px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-13%, -1%);*/ /* 画像のマウス位置調整 */
    }

    /* マウスホバー対象の範囲（ライト下） */
    .target-area13 {
        width: 50px;
        height: 55px;
        margin: -130px 0 0 777px;
        position: relative;
    }

    /* 追従する画像（初期は非表示） */
    #follow-image13 {
        display: none; /* 初期状態は非表示 */
        position: fixed; /* 画面全体に対して位置を固定 */
        top: 0;
        left: 0;
        width: 198px; /* 画像のサイズ */
        height: auto;
        pointer-events: none; /* 画像がマウスイベントを邪魔しないようにする */
        z-index: 9999; /* 最前面に表示 */
/*        transform: translate(-13%, -1%);*/ /* 画像のマウス位置調整 */
    }

}

/* おくりん吹き出し */
.balloon {
  width: 100%;
  margin: 1.5em;
  overflow: hidden;
}

.balloon .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon .faceicon img{
  width: 80%;
  height: auto;
/*  border: solid 3px #d7ebfe;
  border-radius: 50%;*/
}

.balloon .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 25px 5px 5px 85px;
  padding: 15px 20px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}