@charset "Shift_JIS";

/* **************************************************

Name: top_water.css

Description: ƒLƒmƒ|ƒ“ƒ^ƒEƒ“ top style

Create: 2015.09.14
Update: 2015.12.04

Copyright 2015 Hitachi, Ltd.

***************************************************** */


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

re style
townIndex
audioBtn
townView
townModal
townSplash
loading style
is style

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


/* ----------------------------------------------------------------------------------------

re style

------------------------------------------------------------------------------------------- */
body,
html {
  overflow: hidden;
}
#PopUpContents {
  padding: 0;
}
.Section {
  padding: 0;
}


/* ----------------------------------------------------------------------------------------

townIndex

------------------------------------------------------------------------------------------- */
.townIndex {
  z-index: 1;
  position: relative;
}
.townIndexLogo {
  position: absolute;
  left: 30px;
  top: 80px;
  z-index: 1;
}
.townIndexLogo img {
  width: 300px;
  height: auto;
}
.townIndexLeft,
.townIndexRight {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 1;
  font-size: 20px;
  margin: -10px 0 0 0;
}
.townIndexLeft {
  left: 10px;
}
.townIndexRight {
  right: 10px;
}
.townIndexArrow {
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .townIndexLogo {
    top: 60px;
    left: 10px;
  }
  .townIndexLogo img {
    width: 150px;
  }
  .townIndexLeft,
  .townIndexRight {
    display: block;
  }
}


/* ----------------------------------------------------------------------------------------

audioBtn

------------------------------------------------------------------------------------------- */
.audioBtn {
  position: absolute;
  right: 20px;
  bottom: 65px;
  z-index: 100;
  display: none;
}
.audioBtn img {
  width: 53px;
  height: auto;
}
.audioBtnPlay {
  display: none;
}
.audioBtnStop {
  display: block;
}
@media screen and (max-width: 767px) {
  .audioBtnPlay {
    display: block;
  }
  .audioBtnStop {
    display: none;
  }
	.audioBtn {
    right: 10px;
	bottom: 55px;
	}
}


/* ----------------------------------------------------------------------------------------

townView

------------------------------------------------------------------------------------------- */
.townView {
  display: none;
}
@media screen and (max-width: 767px) {
  .townView {
    display: block;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 350px;
    background: #FFF;
    z-index: 100;
    text-align: center;
  }
  .townView img {
    width: 100%;
    height: auto;
  }
}
  

/* ----------------------------------------------------------------------------------------

townModal

------------------------------------------------------------------------------------------- */
.townModal {
  display: none;
  position: absolute;
  background: #FFF;
  background: rgba(255,255,255,.9);
  width: 320px;
  border: 3px solid #fcce5b;
  -webkit-border-radius: 13px;
  border-radius: 13px;
  z-index: 50;
  margin: 0 0 0 -160px;
  z-index: 300;
}
.townModal h1 {
  background: #fcce5b;
  padding: 8px 0;
  text-align: center;
  -webkit-border-radius: 9px 9px 0 0;
  border-radius: 9px 9px 0 0;
}
.townModalBtn,
.townModalBtn02 {
  text-align: center;
  padding: 5px 0 15px 0;
}
.townModalTxt,
.townModalTxt02 {
  padding: 10px 15px;
}
.townModalTxt02 small {
	display: block;
  font-size: 60%;
}
.townModalIll01 {
  position: absolute;
  right: 10px;
  bottom: -6px;
  width: 64px;
  height: 110px;
}
.townModalIll01 img {
  width: 64px;
  height: auto;
}
.townModalIll02 {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.townModalClose {
  position: absolute;
  right: -12px;
  top: -12px;
}
@media screen and (max-width: 979px) {
  .townModal {
    margin: -120px 0 0 -160px;
    left: 50% !important;
    top: 50% !important;
  }
}
@media screen and (max-width: 767px) {
  .townModal {
    width: 290px;
    border: 2px solid #fcce5b;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: -150px 0 0 -145px;
    left: 50% !important;
    top: 50% !important;
  }
  .townModal h1 {
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
  }
  .townModalImg {
    float: left;
    margin: 10px 5px 10px 10px;
  }
  .townModalImg img {
    width: 130px;
    height: auto;
  }
  .townModalTxt br,
  .townModalTxt02 br {
    display: none;
  }
  .townModalTxt02 {
    padding: 10px 15px 10px 15px;
  }
  .townModalBtn {
    margin: 0;
    width: 110px;
    position: absolute;
    right: 30px;
    bottom: 0;
  }
  .townModalBtn02 {
    clear: both;
    padding: 0 0 15px 0;
  }
  .townModalBtn img,
  .townModalBtn02 img {
    width: 110px;
    height: auto;
  }
  .townModalIll01 {
    width: 44px;
    height: 74px;
    position: absolute;
    right: 8px;
    bottom: 10px;
    z-index: 1;
  }
  .townModalIll01 img {
    width: 44px;
  }
  .townModalIll02 {
    position: relative;
    float: right;
    margin: 20px 5px 5px 5px;
    right: inherit;
    bottom: inherit;
  }
  .townModalIll02 img {
/*    width: 80%;*/
    height: auto;
  }
}


/* ”z’u */
.townModalCar {
  left: 60%;
  top: 45%;
}
.townModalCar > .townModalImg {
	min-height: 150px;
}
.townModalTrain {
  left: 37%;
  top: 18%;
}
.townModalTrain > .townModalImg {
	min-height: 150px;
}
.townModalFactory {
  left: 58%;
  top: 12%;
}
.townModalFactory > .townModalImg {
	min-height: 145px;
}

.townModalKnow1 {
  left: 20%;
  top: 24%;
}
.townModalKnow2 {
  left: 25%;
  top: 30%;
}
.townModalKnow3 {
  left: 56%;
  top: 12%;
}
.townModalKnow4 {
  left: 42%;
  top: 37%;
}
.townModalKnow5 {
  left: 55%;
  top: 18%;
}


/* ----------------------------------------------------------------------------------------

townSplash

------------------------------------------------------------------------------------------- */
@media screen and (max-width: 994px) {
	#Popup .audioBtn { bottom: 80px; }
}
#Popup { position: relative; }
#Footer,#Popup #FooterArea {
	position: relative;
	z-index: 3000;
}
.townSplash {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #9EDBF6;
  z-index: 200;
}
.townSplashLogo {
  position: absolute;
  left: 50%;
  top: 5%;
  margin: 0 0 0 -285px;
  z-index: 100;
}
.townSplashComment {
  position: absolute;
  left: 50%;
  top: 34%;
  margin: 0 0 0 -380px;
  z-index: 100;
}
.townSplashTxt {
  background: #FFF;
  border: 3px solid #73C9F2;
  width: 500px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  padding: 15px 20px;
  float: left;
  color: #fa821e;
  font-family: "ƒqƒ‰ƒMƒmŠÛƒS Pro W4", "ƒqƒ‰ƒMƒmŠÛƒS Pro", "Hiragino Maru Gothic Pro", "ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "HGŠÛºÞ¼¯¸M-PRO", "HGMaruGothicMPRO";
  font-size: 125%;
  line-height: 1.9;
  font-weight: bold;
  margin: 0 10px 0 0;
}
@media screen and (min-width: 995px) {
	.townSplashTxt {
  		width: 540px;
	}
	.townSplashTxt p {
		white-space: nowrap;
	}
	_::-webkit-full-page-media, _:future, :root .townSplashTxt {
		width: 530px;
	}
}

.townSplashArrow {
  position: absolute;
  right: -24px;
  top: 50%;
  margin: -21px 0 0 0;
}
.townSplashKinop {
  position: absolute;
  right: -30px;
  top: -25px;
}
.townSplashKinop img {
  width: 140px;
  height: auto;
}
.townSplashOperation img {
  width: 110px;
  height: auto;
}
.townSplashCloud01 {
  position: absolute;
  left: 10%;
  top: 8%;
}
.townSplashCloud02 {
  position: absolute;
  left: 40%;
  top: 40%;
}
.townSplashCloud03 {
  position: absolute;
  left: -30%;
  top: 30%;
}
.splashSkip {
	margin: 10px 0 0;
	text-align: center;
}
.splashSkip>a {
	padding: 8px 12px;
	background-color: #fa821e;
	color: #fff;
	font-size: 75%;
	text-decoration: none;
	border-radius: 16px;
}

@media screen and (max-width: 767px) {
	#PageTopBottom {
		position: relative;
		z-index: 3000;
	}
  .townSplash {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .townSplashLogo {
    margin: -30px auto 10px auto;
    width: 75%;
    top: inherit;
    left: inherit;
    position: relative;
  }
  .townSplashLogo img {
    width: 100%;
    height: auto;
  }
  .townSplashComment {
    position: relative;
    left: inherit;
    top: inherit;
    bottom: 10%;
    margin: 0 auto;
    width: 90%;
  }
  .townSplashTxt {
  	position: relative;
    border: 2px solid #fa821e;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.9;
    margin: 0 0 0 -4px;
    width: auto;
    width: 94%;
    padding: 3% 4%;
  }
  .townSplashKinop {
    position: relative;
    margin: 0 5px -50px 5px;
    width: 65px;
    height: 140px;
    float: right;
    top: inherit;
    right:inherit;
  }
  .townSplashKinop + p {
    overflow: auto;
    zoom: 1;
  }
  .townSplashKinop img {
    width: 65px;
    height: auto;
  }
  .townSplashOperation {
    position: relative;
    margin: 0;
    width: 110px;
    height: 48px;
    float: none;
  }
  .townSplashCloud01 img {
    width: 170px;
    height: auto;
  }
  .townSplashCloud02 img {
    width: 130px;
    height: auto;
  }
  .townSplashCloud03 img {
    width: 130px;
    height: auto;
  }
	.splashSkip>a {
		padding: 6px 10px;
	}
}


/* ----------------------------------------------------------------------------------------

loading style

------------------------------------------------------------------------------------------- */
#fountainTextG{
	width:234px;
	margin:auto;
	position: fixed;
	top: 35%;
	left: 50%;
	width: 100%;
	margin: 0 0 0 -60px;
	z-index: 0;
}

.fountainTextG{
	color:rgb(40,130,207);
	font-family:Arial;
	font-size:24px;
	text-decoration:none;
	font-weight:normal;
	font-style:normal;
	float:left;
	animation-name:bounce_fountainTextG;
		-o-animation-name:bounce_fountainTextG;
		-ms-animation-name:bounce_fountainTextG;
		-webkit-animation-name:bounce_fountainTextG;
		-moz-animation-name:bounce_fountainTextG;
	animation-duration:2.09s;
		-o-animation-duration:2.09s;
		-ms-animation-duration:2.09s;
		-webkit-animation-duration:2.09s;
		-moz-animation-duration:2.09s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.5);
		-o-transform:scale(.5);
		-ms-transform:scale(.5);
		-webkit-transform:scale(.5);
		-moz-transform:scale(.5);
}#fountainTextG_1{
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}
#fountainTextG_2{
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
}
#fountainTextG_3{
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}
#fountainTextG_4{
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
}
#fountainTextG_5{
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}
#fountainTextG_6{
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
}
#fountainTextG_7{
	animation-delay:1.64s;
		-o-animation-delay:1.64s;
		-ms-animation-delay:1.64s;
		-webkit-animation-delay:1.64s;
		-moz-animation-delay:1.64s;
}
#fountainTextG_8{
	animation-delay:1.79s;
		-o-animation-delay:1.79s;
		-ms-animation-delay:1.79s;
		-webkit-animation-delay:1.79s;
		-moz-animation-delay:1.79s;
}
#fountainTextG_9{
	animation-delay:1.94s;
		-o-animation-delay:1.94s;
		-ms-animation-delay:1.94s;
		-webkit-animation-delay:1.94s;
		-moz-animation-delay:1.94s;
}
#fountainTextG_10{
	animation-delay:2.09s;
		-o-animation-delay:2.09s;
		-ms-animation-delay:2.09s;
		-webkit-animation-delay:2.09s;
		-moz-animation-delay:2.09s;
}

@keyframes bounce_fountainTextG{
	0%{
		transform:scale(1);
		color:rgb(40,130,207);
	}

	100%{
		transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-o-keyframes bounce_fountainTextG{
	0%{
		-o-transform:scale(1);
		color:rgb(40,130,207);
	}

	100%{
		-o-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-ms-keyframes bounce_fountainTextG{
	0%{
		-ms-transform:scale(1);
		color:rgb(40,130,207);
	}

	100%{
		-ms-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-webkit-keyframes bounce_fountainTextG{
	0%{
		-webkit-transform:scale(1);
		color:rgb(40,130,207);
	}

	100%{
		-webkit-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-moz-keyframes bounce_fountainTextG{
	0%{
		-moz-transform:scale(1);
		color:rgb(40,130,207);
	}

	100%{
		-moz-transform:scale(.5);
		color:rgb(255,255,255);
	}
}


/* ----------------------------------------------------------------------------------------

is style

------------------------------------------------------------------------------------------- */

.is-none { display: none; }
.is-hidden { visibility: hidden; }
.for-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .for-pc {
    display: none;
  }
  .for-sp {
    display: inline-block;
  }
}

/* ----------------------------------------------------------------------------------------

landscape

------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 700px) and (orientation : landscape) {
	.townSplashLogo {
  		width: 32%;
    }
    .townSplashTxt {
    	padding: 1.5% 4% 1.5% 2%;
    }
  	.townSplashTxt p {
  		font-size: 10px;
  	}
  	.townSplashKinop img {
		width: 42px;
	}
	.townSplashOperation img {
	 	width: 55px;
	}
	.townView img {
    	width: auto;
    	height: 70%;
   	    margin-top: 0 !important;
	}
	.townSplashKinop {
		width: 42px;
		height: 60px;
	}
	.townModal {
		margin-top: -60px;
	}
	.townModal h1 {
		padding: 4px 0;
		height: 16px;
	}
	.townModal h1 img {
		width: auto;
		height: 15px;
	}
	.townModalTxt, .townModalTxt02 {
		font-size: 10px;
		padding: 5px;
	}
	.townModalIll01, .townModalIll02 {
		height: 50px;
	}
	.townModalImg,
	.townModalNetwork >  .townModalImg,
	.townModalInternet > .townModalImg,
	.townModalLiving > .townModalImg {
		height: 80px;
		min-height: 1px;
	}
	.townModalImg img, .townModalIll01 img, .townModalIll02 img {
		width: auto;
		height: 100%;
	}
	.townModalBtn img, .townModalBtn02 img {
		width: auto;
		height: 23px;
	}
}


/* ----------------------------------------------------------------------------------------

Other world

------------------------------------------------------------------------------------------- */
.townModalOther {
  left: 70%;
  top: 25%;
}
.townModalOther ul {
	padding: 8px;
}
.townModalOther ul>li {
	margin-bottom: 4px;
}
.townModalOther ul>li:last-child {
	margin-bottom: 0;
}
.townModalOther ul>li>a {
	display: block;
	border: 4px solid #ccc;
	border-radius: 20px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
.townModalOther ul>li>a>span {
    box-shadow: 0 0 0 2px #fff;
    background: #999;
    display: block;
    border-radius: 20px;
    padding: 5px;
    white-space: nowrap;
}

.townModalOther ul>li>a.btn-sky {
	border-color:#73c9f2;
}
.townModalOther ul>li>a.btn-sky>span {
    background: #2882cf;
}
.townModalOther ul>li>a.btn-water {
	border-color:#73c9f2;
}
.townModalOther ul>li>a.btn-water>span {
    background: #00aac8;
}
.townModalOther ul>li>a.btn-info {
	border-color:#dfaccd;
}
.townModalOther ul>li>a.btn-info>span {
    background: #b95596;
}
.townModalOther ul>li>a.btn-environment {
	border-color:#a6d174;
}
.townModalOther ul>li>a.btn-environment>span {
    background: #487d24;
}
.townModalOther ul>li>a.btn-factory {
	border-color:#91d2d2;
}
.townModalOther ul>li>a.btn-factory>span {
    background: #1e7878;
}
.townModalOther ul>li>a.btn-traffic {
	border-color:#fcce5b;
}
.townModalOther ul>li>a.btn-traffic>span {
    background: #fa821e;
}
.townModalOther ul>li>a.btn-logistics {
	border-color:#87abdb;
}
.townModalOther ul>li>a.btn-logistics>span {
    background: #2360a9;
}

@media screen and (max-width: 767px) {
	.townModalOther ul>li>a {
		border-width: 2px;
	}
	.townModalOther ul>li>a>span {
    	box-shadow: 0 0 0 1px #fff;
    	padding: 2px;
    	font-size: 84%;
	}
}
@media only screen and (max-width: 700px) and (orientation : landscape) {
	.townModalOther ul {
		padding: 2px;
	    zoom: 1;
	}
	.townModalOther ul:after {
    	content: ".";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    	font-size: 0.1em;
    	line-height: 0;
	}
	.townModalOther ul>li {
		float: left;
		width: 50%;
		margin: 0 !important;
		padding: 2px;
		box-sizing: border-box;
	}
	.townModalOther ul>li>a>span {
    	font-size: 66%;
	}
}