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

section{ height: auto; position:relative; }

header#pcHeader{
	display:none;
}

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

#lead{
	display:none;
}

#spLead{
	height: 100%;
	position:relative;
	background:url(../images/sp_lead.jpg) repeat-x center bottom;
	background-size:600px 100px;
	border-bottom:solid 10px #333;
}

h2{
	width:300px;
	position:absolute;
	top:12%;
	left:20px;
}

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

h3 span{
	display:block;
}

h3 br{
	margin:0;
	padding:0;
	line-height:100%;
}

.text{
	display: inline-block;
} 

.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;
}

#spnews{
	height:30%;
	margin:10 auto;
	position:relative;
	top:65%;
	left:40px;
	color: #FF0000;
	font-weight: bold;
	display:block;
	position:absolute;
}

#topmenu{
	width:300px;
	position:absolute;
	top:50%;
	left:10px;
	display:block;
}


#track{
	position:absolute;
	bottom:10px;
	left:20px;
}

#pcMaker{
	display:none;
}

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

.red{
	color:#c30;
}

#manufacturer{
	background-color:#fadce2;
}

#area{
	background-color:#fadce2;
}

#company{
	background-color:#fadce2;
	padding-bottom:40px;
}

#access{
	background-color:#fff;
	padding-bottom:40px;
}

#contact{
	background-color:#eee;
	padding-bottom:40px;
}

.makerTxt{
	font-weight:500;
	font-size:14px;
	margin-left:20px;
	text-align:center;
}

.areaWrap{
	text-align:center;
}

.areaWrap img{
	width:300px;
}

.areaWrap .osaka{
	float:inherit;
}

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

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

#company dl#company_data{
	width:75%;
	margin:0 auto;
}

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

#company dl#company_data dt {
	margin-bottom:5px;
	font-weight:700;
}

#company dl#company_data dd {
	padding: 0 0 10px;
	margin-bottom:10px;
	border-bottom: 1px solid #333;
}

#map {
  width: 90%;
  height: 300px;
  margin:0 auto;
}

.mapTxt{
	padding-top:20px;
	font-size:14px;
	font-weight:500;
	text-align:center;
}

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

.mapTxt strong span{
	display:block;
}

.formBox{
	width:75%;
	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;
	display:inline-block;
}

.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;
}

/**** メニュー用 ****/
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

#spMenu,
.inner {
	width: 100%;
	padding: 0;
}
#spMenu {
	top: 0;
	position: fixed;
	margin-top: 0;
	z-index:10000;
}
/* Fixed reset */
#spMenu.fixed {
	padding-top: 0;
	background: transparent;
}
#mobile-head {
	background: #fff;
	width: 100%;
	height: 60px;
	z-index: 999;
	position: relative;
	border-bottom:solid 1px #333;
}
#global-nav {
	position: absolute;
	/* 開いてないときは画面外に配置 */
	top: -500px;
	background: #333;
	width: 100%;
	text-align: center;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
#global-nav ul {
	list-style: none;
	position: static;
	right: 0;
	bottom: 0;
	font-size: 14px;
}
#global-nav ul li {
	float: none;
	position: static;
}
#spMenu #global-nav ul li a,
#spMenu.fixed #global-nav ul li a {
	width: 100%;
	display: block;
	color: #fff;
	padding: 18px 0;
	border-bottom:solid 1px #FFF;
}
#nav-toggle {
	display: block;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #nav-toggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
	/* #global-nav top + #mobile-head height */
	-moz-transform: translateY(556px);
	-webkit-transform: translateY(556px);
	transform: translateY(556px);
}

/**** タイトル用 ****/
.centerBox { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; }
h4{ font-size:20px; 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:14px; margin-top:10px; letter-spacing:.1em; text-indent:.1em;}
h4 .titBox{ display: inline-block; }
h4.on .titBox{ position: relative; width:96%; }
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: 48%; } }
@-webkit-keyframes line-motion { 0% { width: 0; } 100% { width: 48%; } }
@-moz-keyframes line-motion { 0% { width: 0; } 100% { width: 48%; } }
@-o-keyframes line-motion { from { width: 0; } to { width: 48%; } }
@-ms-keyframes line-motion { from { width: 0; } to { width: 48%; } }
/**** タイトル用 ****/

/* ===============================================================
Basic Swiper Styles 
================================================================*/
.swiper-container02 {
	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;
	text-align:center;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.swiper-slide img{
	width:240px;
	padding:10px;
	background-color:#FFF;
}

.swiper-slide span{
	display:block;
	font-weight:700;
	padding-top:10px;
}

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

.device02 {
  width: 260px;
  height: 315px;
  margin:0 auto;
  position: relative;
}

.device02 .arrow_l{
	position:absolute;
	left:-30px;
	top:35%;
}

.device02 .arrow_r{
	position:absolute;
	right:-30px;
	top:35%;
}

.swiper-container02 {
  height: 318px;
  width: 260px;
  padding:1px 0;
}

.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;
}