/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/

section{ position:relative; padding-bottom:100px;}
section#lead{ height: 100%; position:relative; padding-bottom:0;}
section#contact{ position:relative; padding-bottom:20px;}

header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:60px;
	border-bottom:solid 1px #333;
	background-color:#FFF;
	z-index:10000;
}

header h1{
	width:140px;
	position:absolute;
	top:10px;
	left:10px;
}

header #menu{
	position:absolute;
	top:0;
	right:0;
	height:60px;
}

header #menu li{
	float:left;
	text-align:center;
	font-size:14px;
	font-weight:500;
}

#spMenu,#spLead,#spMaker{
	display:none;
}

/*** ヘッダーメニュー用 ***/
.button { display: inline-block; width: 150px; height: 60px; text-align: center; text-decoration: none; line-height: 60px; outline: none; }
.button::before,.button::after { position: absolute; z-index: -1; display: block; content: ''; }
.button,.button::before,.button::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; }
.button { position: relative; perspective: 300px; }
.button span { display: block; position: absolute; width: 150px; height: 60px; text-align: center; line-height: 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; pointer-events: none; }
.button span:nth-child(1) { background-color: #fadce2; color: #333; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 50% -30px; -moz-transform-origin: 50% 50% -30px; transform-origin: 50% 50% -30px; border-bottom: 10px solid #fadce2; }
.button span:nth-child(2) { background-color: #fff; color: #333; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: 50% 50% -30px; -moz-transform-origin: 50% 50% -30px; transform-origin: 50% 50% -30px; }
.button:hover span:nth-child(1) { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }
.button:hover span:nth-child(2) { background-color: #fadce2; color: #fadce2; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); border-bottom: 10px solid #fadce2; }
/*** ヘッダーメニュー用 ***/

#home{
	height:80%;
	padding-top:100px;
	margin:0 auto;
	position:relative;
}

#news{
	height:20%;
	margin:50 auto;
	position:relative;
	top:50%;
	left:100px;
	color: #FF0000;
	font-weight: bold;
}

h2#pcLogo{
	width:400px;
    display: none;
	position:absolute;
	top:12%;
	left:40px;
}

h3#pcCopy{
	font-size:40px;
	letter-spacing:.2em;
	font-weight:700;
	line-height:130%;
    display: none;
	position:absolute;
	top:37%;
	left:100px;
}

#townWrap{
	position:absolute;
	width:100%;
	bottom:0;
	border-bottom:solid 100px #333;
}

#machi01{
	background:url(../images/machi02.png) repeat-x center bottom;
    margin:0;
    padding:0;
	height:183px;
	bottom:0;
}

#machi02{
	background:url(../images/machi01.png) repeat-x center bottom;
    margin:0;
    padding:0;
	height:190px;
}

#track{
	margin-left:40px;
	padding-top:52px;
}

.home_mouse{
    width: 100%;
    color: #fadce2;
    text-align: center;
    opacity: 1;
	position:absolute;
	bottom:20px;
	z-index:1000;
}

/****** 文字を点滅せさるアニメーション *******/
.blinktext{
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

@media screen and (max-width: 1000px){
    .home_mouse{
        opacity: 0;
    }
}
.mouse_txt {
    font-weight: bold;
	font-family: 'Roboto Condensed', sans-serif;
    font-size: 16px;
	text-align:center;
	letter-spacing:.1em;
}
.scroll-btn .mouse {
    border: 3px solid #fadce2;
    border-radius: 8px;
    display: block;
    height: 40px;
    margin: 0 auto;
    position: relative;
    width: 25px;
	margin-bottom:3px;
}
.scroll-btn .mouse > * {
    position: absolute;
    display: block;
    top: 29%;
    left: 50%;
    width: 6px;
    height: 12px;
    margin: -4px 0 0 -3px;
    background-color: #fadce2;
    border-radius: 3px;
    -webkit-animation: ani-mouse 2.5s linear infinite;
    -moz-animation: ani-mouse 2.5s linear infinite;
    animation: ani-mouse 2.5s linear infinite;
}
@keyframes ani-mouse {
    0% {opacity: 1;top: 29%;}
    15% {opacity: 1;top: 50%;}
    50% {opacity: 0;top: 50%;}
    100% {opacity: 0;top: 29%;}
}

/**** 下層スタイル ****/
.box{
	padding-top:150px;
}

.red{
	color:#c30;
}

#manufacturer{
	background-color:#fadce2;
}

#area{
	background-color:#fadce2;
}

#company{
	background-color:#fadce2;
}

#access{
	background-color:#fff;
}

#contact{
	background-color:#eee;
}

.makerTxt{
	font-weight:500;
	font-size:14px;
	padding-top:20px;
	width:900px;
	margin:0 auto;
}

.areaWrap{
	width:780px;
	margin:0 auto;
}

.areaWrap img{
	width:350px;
}

.areaWrap .osaka{
	float:left;
}

.areaWrap .txt{
	float:left;
	margin-left:20px;
	font-size:20px;
	font-weight:700;
	padding-top:200px;
	line-height:140%;
	letter-spacing:.1em;
}

.areaWrap .txt span{
	font-size:16px;
	font-weight:500;
	display:block;
	text-indent:-.5em;
}

#company dl#company_data{
	width:780px;
	margin:0 auto;
}

#company dl#company_data dt,#company dl#company_data dd {
	padding: 5px 10px;
	font-size:14px;
	font-weight:500;
}

#company dl#company_data dt {
	clear: left;
	float: left;
	width: 170px;
	text-align:right;
	font-weight:700;
}

#company dl#company_data dd {
	margin-left: 200px;
	min-height:19px;
	border-left: 1px solid #333;
}

#map {
  width: 100%;
  height: 450px;
}

.mapTxt{
	width:780px;
	margin:0 auto;
	padding-top:20px;
	font-size:14px;
	font-weight:500;
}

.mapTxt strong{
	font-weight:700;
	color:#2ca5df;
}

.formBox{
	width:800px;
	margin:0 auto;
}

.formBox .notes{
	text-align:right;
	margin-bottom:10px;
}

.formBox .tit{
	font-size:14px;
	letter-spacing:.1em;
	font-weight:500;
	margin-bottom:5px;
}

.formBox .input{
	margin-bottom:15px;
}

.formBox .input input{
	width:100%;
}

.formBox .input textarea{
	width:100%;
}

.formBox .error_msg{
	color:#FFFFFF;
	background-color: red
}

.formBox .submit{
	width:200px;
	margin:0 auto;
}

.formBox .submit #submit_button{
	background-color:#333;
	font-weight:700;
	font-size:18px;
	letter-spacing:.5em;
	text-align:center;
	width:100%;
	padding:15px 0;
	border-style: none;
	color:#FFF;
	font-family: 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Noto Sans Japanese', sans-serif;
	cursor:pointer;
	-webkit-appearance: none;
}

footer{
	background-color:#333;
	padding:30px 0;
	text-align:center;
	color:#FFF;
	letter-spacing:.1em;
	font-family: 'Roboto Condensed', sans-serif;
}

/**** タイトル用 ****/
.centerBox { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; }
h4{ font-size:24px; font-weight:700; text-align:center; letter-spacing:.5em; text-indent:.5em; padding:20px 0; margin-bottom:30px;}
h4 span{ display:block; font-family: 'Roboto Condensed', sans-serif; font-size:16px; margin-top:10px; letter-spacing:.1em; text-indent:.1em;}
h4 .titBox{ display: inline-block; }
h4.on .titBox{ position: relative; width:900px; }
h4.on .titBox:before,h4.on .titBox:after{ position: absolute; top: -20px; content: ""; width: 0; height: 2px; background: #000000; animation: line-motion 2s ease 0s 1 normal forwards; -webkit-animation: line-motion 2s ease 0s 1 normal forwards; -moz-animation: line-motion 2s ease 0s 1 normal forwards; -o-animation: line-motion 2s ease 0s 1 normal forwards; -ms-animation: line-motion 2s ease 0s 1 normal forwards;}
h4.on .titBox:before{ left: 50%;}
h4.on .titBox:after{ right: 50%; }
h4.on .tit{ position: relative;}
h4.on .tit:before,h4.on .tit:after{ position: absolute; bottom: -20px; content: ""; width: 0; height: 2px; background: #000000; animation: line-motion 2s ease 0s 1 normal forwards; -webkit-animation: line-motion 2s ease 0s 1 normal forwards; -moz-animation: line-motion 2s ease 0s 1 normal forwards; -o-animation: line-motion 2s ease 0s 1 normal forwards; -ms-animation: line-motion 2s ease 0s 1 normal forwards; }
h4.on .tit:before{ left: 50%; }
h4.on .tit:after{ right: 50%; }

@keyframes line-motion { 0% { width: 0; } 100% { width: 450px; } }
@-webkit-keyframes line-motion { 0% { width: 0; } 100% { width: 450px; } }
@-moz-keyframes line-motion { 0% { width: 0; } 100% { width: 450px; } }
@-o-keyframes line-motion { from { width: 0; } to { width: 450px; } }
@-ms-keyframes line-motion { from { width: 0; } to { width: 450px; } }
/**** タイトル用 ****/

/**** メーカー用 ****/
.swiper-container {
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	/* Fix of Webkit flickering */
	z-index:1;
}
.swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left;
	background-color:#FFF;
	margin:0 10px;
	text-align:center;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.swiper-slide a{
	padding:10px 10px 20px;
}

.swiper-slide a:hover{
	color:#2ca5df;
}

.swiper-slide img{
	width:80%;
}

.swiper-slide span{
	display:block;
	font-weight:500;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}

.device {
  width: 100%;
  height: 100%;
  margin:0 auto;
  position: relative;
}
.swiper-container {
  height: 350px;
  width: 100%;
}

.content-slide {
  padding: 20px;
  color: #fff;
}
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:5px;
  width: 100%;
}
.pagination .swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #a8a8a8;
  margin: 0 4px;
  cursor: pointer;
}
.pagination .swiper-active-switch {
  background: #f990b1;
}

.hvr-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: #2ca5df;
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}