@charset "utf-8";

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
	line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}

img{
	line-height:1;
	vertical-align:bottom;
}

/************** layout base ********************/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

img{ max-width:100%;}

a{text-decoration:none; color:#000000;}
a:hover{text-decoration: none;}
a:link{}

a:visited{color:#0d5bab;}

/* ボタンrollover */
a:hover img{
   opacity:0.8;
}

sup {
	line-height: 100%;
	font-size:10px;
	vertical-align: 0.4em;
}
sub{
	line-height: 100%;
	font-size:10px;
	vertical-align: -0.1em;
}

.txtLeft{text-align:left;}
.txtRight{text-align:right;}
.txtCenter{text-align:center;}

.fw{font-weight:bold !important;}
.f10{ font-size:10px !important;}
.f11{ font-size:11px !important;}
.f12{ font-size:12px !important;}
.f13{ font-size:13px !important;}
.f14{ font-size:14px !important;}
.f15{ font-size:15px !important;}
.f16{ font-size:16px !important;}
.f17{ font-size:17px !important;}
.f18{ font-size:18px !important;}
.f20{ font-size:20px !important;}
.f22{ font-size:22px !important;}
.f24{ font-size:24px !important;}

.txtRed{ color:#D80000;}

.fLeft{ float:left;}
.fRight{ float:right;}

.mTop0{ margin-top:0 !important;}
.mTop5{ margin-top:5px !important;}
.mTop10{ margin-top:10px !important;}
.mTop15{ margin-top:15px !important;}
.mTop20{ margin-top:20px !important;}
.mTop25{ margin-top:25px !important;}
.mTop30{ margin-top:30px !important;}
.mTop35{ margin-top:35px !important;}
.mTop40{ margin-top:40px !important;}
.mTop45{ margin-top:45px !important;}
.mTop50{ margin-top:50px !important;}
.mTop55{ margin-top:55px !important;}
.mTop60{ margin-top:60px !important;}

.mBtm0{ margin-bottom:0 !important;}
.mBtm5{ margin-bottom:5px !important;}
.mBtm10{ margin-bottom:10px !important;}
.mBtm15{ margin-bottom:15px !important;}
.mBtm20{ margin-bottom:20px !important;}
.mBtm25{ margin-bottom:25px !important;}
.mBtm30{ margin-bottom:30px !important;}
.mBtm35{ margin-bottom:35px !important;}
.mBtm40{ margin-bottom:40px !important;}
.mBtm45{ margin-bottom:45px !important;}
.mBtm50{ margin-bottom:50px !important;}
.mBtm55{ margin-bottom:55px !important;}
.mBtm60{ margin-bottom:60px !important;}
.mBtm70{ margin-bottom:70px !important;}
.mBtm80{ margin-bottom:80px !important;}
.mBtm90{ margin-bottom:90px !important;}
.mBtm100{ margin-bottom:100px !important;}

.pTop0{ padding-top:0 !important;}
.pTop5{ padding-top:5px !important;}
.pTop10{ padding-top:10px !important;}
.pTop15{ padding-top:15px !important;}
.pTop20{ padding-top:20px !important;}
.pTop25{ padding-top:25px !important;}
.pTop30{ padding-top:30px !important;}
.pTop35{ padding-top:35px !important;}
.pTop40{ padding-top:40px !important;}
.pTop45{ padding-top:45px !important;}
.pTop50{ padding-top:50px !important;}

.pBtm0{ padding-bottom:0 !important;}
.pBtm5{ padding-bottom:5px !important;}
.pBtm10{ padding-bottom:10px !important;}
.pBtm15{ padding-bottom:15px !important;}
.pBtm20{ padding-bottom:20px !important;}
.pBtm25{ padding-bottom:25px !important;}
.pBtm30{ padding-bottom:30px !important;}
.pBtm35{ padding-bottom:35px !important;}
.pBtm40{ padding-bottom:40px !important;}
.pBtm45{ padding-bottom:45px !important;}
.pBtm50{ padding-bottom:50px !important;}
.pBtm55{ padding-bottom:55px !important;}
.pBtm60{ padding-bottom:60px !important;}

/************** layout base ********************/
body{
 position: relative;
	background: #ffffff;
	font-family:  "メイリオ", Meiryo, "游ゴシック", YuGothic, "Yu Gothic", "游ゴシック体","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: left;
	line-height:1.2;
}

ol,ul {
	list-style:none;
}

p,dt,dd,li,td,th{
	color:#333333;
	font-size:14px;
 line-height: 1.6;
}

div,p,dl{
	text-align:left;
}

h1,h2,h3,h4,h5,h6{
	color: #000000;
	font-size:14px;
	font-weight: normal;
}


/* font
---------------------------------------------------------------------------- */
/*times new roman代替*/
.selif {
    font-family: "Tinos", serif;
  }

/*HGP明朝B代替*/
.mincho {
    font-family: "Zen Old Mincho", serif;
  }


/* common
---------------------------------------------------------------------------- */
.inner{
	width: min(90%, 1200px);
	margin: 0 auto;
}
.flex{display: flex;}
@media screen and (max-width: 768px) {
	.pc{ display: block;}
}/* //end for SP */
@media screen and (min-width: 769px) {
	.sp{ display: none;}
	.pcFlex{display: flex;}
}/* //end for PC */


.note{
 color: #595757;
 font-size: 9px;
}
.indentTxt{
 text-indent: -1em;
 padding-left: 1em;
}


/* header
---------------------------------------------------------------------------- */
header{
 position: fixed;
 top: 0;
 left: 0;
 background: #fff;
 text-align: center;
 z-index: 1000;
}
#logo{
 max-width: 117px;
 margin: 0 auto;
}
@media screen and (min-width: 769px) {
 header{
  width: 251px;
  max-width: 251px;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 30px 40px;
  box-shadow: 1px 0 2px rgba(0,0,0,.16);
}
 header #logo{
  margin-bottom: 50px/*5.95vh*/;
 }
}/* //end for PC */
@media screen and (max-width: 768px) {
 main{
  margin-top: 68px;
 }
 header{
  background: none;
  width: 100%;
  height: 68px;
  display: flex;
  align-items: center;
 }
 #logo{
 }
}/* //end for SP */

/* =======================================
	gnavi
========================================== */
#gNavi{
}
#gNavi a{
 display: block;
	color: #231815;
  font-size: 9px;
}
#gNavi li a span{
  display: block;
  font-size: 12px;
  letter-spacing: 0.05em;
 }
#gNavi .nav01 li + li{
 margin-top: 13px/*1.5vh*/;
}
#gNavi .nav01 a{
  position: relative;
  border-radius: 6px;
  /*background: linear-gradient(to right, rgba(218,218,218,1) 0%,rgba(180,180,180,1) 100%);*/
  max-width: 120px;
  margin: 0 auto;
  padding: 4px;
  line-height: 1.15;
  z-index: 0;
 }
#gNavi .nav01 a.acoustic{
  background:#C30D23;
    color:#C30D23;
}

#gNavi .nav01 a.sensor{
  background:#31C9F7;
    color:#31C9F7;
}

#gNavi .nav01 a.connector{
  background: #744E9B;
    color:#744E9B;
}

#gNavi .nav01 a.others{
  background: #004DA0;
    color:#004DA0;
}


#gNavi .nav01 a::before{
  content: "";
  display: block;
  border-radius: 6px;
  background: #fff;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: -1;
 }
#gNavi .nav02{
 margin-top: 29px/*3.45vh*/;
}
#gNavi .nav02 li + li{
 margin-top:14px/* 1.66vh*/;
}
#gNavi .nav02 a{
  position: relative;
  border-radius: 6px;
  border: 4px #3490e2 solid;
  background: #004da0;
  max-width: 180px;
  padding: 1px;
  margin: 0 auto;
  color: #fff;
  line-height: 1.15;
  z-index: 0;
 }
#gNavi .contact a{
 display: block;
	border-radius: calc(infinity * 1px);
 border: 3px #004da0 solid;
 max-width: 180px;
 padding: 5px 0 5px ;
 margin: 29px/*3.45vh*/ auto 0;
 color: #004da0;
 font-size: 9px;
 text-align: center;
 line-height: 1.1;
}
#gNavi .contact a span{
 display: block;
 font-size: 12px;
 line-height: 1.0;
}
#gNavi .businessTrip a{
 display: block;
 border-radius: 7px;
 border: 3px #004da0 solid;
 background: url("images/ic_businesstrip.svg") no-repeat left 2px center/48px auto;
 max-width: 180px;
 padding: 3px 0 3px 55px;
 margin: 29px/*3.45vh*/ auto 0;
 color: #004da0;
 font-size: 12px;
 font-weight: bold;
 text-align: center;
 line-height: 1.1;
}
#gNavi .businessTrip a span{
 display: block;
 margin-bottom: 3px;
 font-weight: normal;
 line-height: 1.0;
}
#gNavi .businessTrip + .note{
 margin-top: 74px/*8.9vh*/;
}
#gNavi .note + .note{
 margin-top: 1.4vh;
}
@media screen and (min-width: 769px) {
	#gNavi{
	}
}/* //end for PC */

@media screen and (max-width: 768px) {
#gNavi{
	position: fixed;
	right: -100vw;
	top: 0;
 width: 100vw;
	height: 100vh;
	transition: all 0.6s;
	z-index: 100;
	overflow-y: auto;
 padding: 20px 4vw 10px;
  }
#gNavi.active{
	right: 0;
  }

#gNavi .businessTrip + .note{
 margin-top: 30px;
}
#gNavi .note + .note{
 margin-top: 10px;
}
	/* =======================================
		.menu
	========================================== */
	.menu {
		position: absolute;
		right: 0;
		top: 0;
  border-radius: 50%;
  border: 6px rgba(255,255,255,.57) solid;
		width: 68px;
		height: 68px;
		cursor: pointer;
		z-index: 101;
	}
 .menu::before{
  content: "";
  display: block;
  border-radius: 50%;
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
 }
	.menu span {
		position: absolute;
		left: 0;
  right: 0;
  margin: auto;
		width: 40px;
		height: 3px;
		background: #3e3a39;
		transition: all 0.6s;
		border-radius: 50em;z-index: 1;
	}
	
	.menu span.menuLine01 {
		top: 15px;
	}
	.menu span.menuLine02{
		top: 26px;
	}
	.menu span.menuLine03{
		top: 37px;
	}
	.menu.active  span.menuLine01{
		transform: rotate(45deg);
		top: 30px;
	}
	.menu.active  span.menuLine02{
		width: 0;
		left: 50%;
	}
	.menu.active  span.menuLine03 {
		transform: rotate(-45deg);
		top: 30px;
	} 
	
	.menuBg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99;
	background-color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: all 0.6s;
	cursor: pointer;
	}
	.menuBg.active {
	  opacity: 0.8;
	  visibility: visible;
	}
}/* //end for SP */


/* =======================================
	main
========================================== */

@media screen and (min-width: 769px) {
 main{
  min-width: 960px;
	margin-left: 251px;
}
}/*-PC only-*/
@media screen and (max-width: 768px) {

}/*-SP only-*/

/* =======================================
	#mv
========================================== */
#mv{
	position: relative;
    overflow: hidden;
}
#mv .base{
}
#mv .actionItems{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}
.actionItem{
	position: absolute;
}
.actionItem:not(.notBg){
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*bike*/
.actionItem.bike{
	background: none;
}
.anime-bike{
    animation: move-bike 24s linear infinite
    }
@keyframes move-bike {
    0% {
        transform: translate3d(-19.27%,-19.09%,0);
		background: none;
    }
    57% {
        transform: translate3d(10.7%,10.44%,0) rotate(0);
		background: none;
    }
    58% {
        transform: translate3d(10.7%,10.44%,0) rotate(0);
		background: url("images/bike-02_bg.svg") no-repeat left top / 100% 100%;
		
    }
    100% {
        transform: translate3d(-10%,33%,0) rotate(0);
		background: url("images/bike-02_bg.svg") no-repeat left top / 100% 100%;
    }
}
.actionItem.bike .bike_img{
	opacity: 1;

    animation: move-bike_img 24s linear infinite
    }
@keyframes move-bike_img {
    0% {	opacity: 1;}
    57% {	opacity: 1;}
    58% {	opacity: 0;}
    100% {	opacity: 0;}
}

/*blue car*/
.actionItem.car_blue{
	background: none;	
}
.anime-car_blue{
    animation: move-car_blue 30s linear infinite
    }
@keyframes move-car_blue {
    0% {
        transform: translate3d(-41.53%,1.78%,0)
    }
    15.38% {
        transform: translate3d(-34.40%,11.11%,0) rotate(0);
		background: none;
    }
    16% {
        transform: translate3d(-34.40%,11.11%,0) rotate(0);
		background: url("images/car_blue-02_bg.svg") no-repeat left top / 100% 100%;
		
    }
    44.28% {
        transform: translate3d(-12.2994652406417%,-14.4781144781145%,0) rotate(0);
		background: url("images/car_blue-02_bg.svg") no-repeat left top / 100% 100%;
    }
    45% {
        transform: translate3d(-12.2994652406417%,-14.4781144781145%,0) rotate(0);
		background: none;
    }
    67.48% {
        transform: translate3d(0,0,0) rotate(0);
    }
    72% {
        transform: translate3d(0,0,0) rotate(0);
    }
    90% {
        transform: translate3d(24.9554367201426%,26.5993265993266%,0) rotate(0);
    }
    95.8% {
        transform: translate3d(24.9554367201426%,26.5993265993266%,0) rotate(0);
    }
    100% {
        transform: translate3d(30.3030303030303%,32.6599326599327%,0) rotate(0);
    }
}
.actionItem.car_blue .car_blue_img{
	opacity: 1;

    animation: move-car_blue_img 30s linear infinite
    }
@keyframes move-car_blue_img {
    15.38% {	opacity: 1;}
    16% {	opacity: 0;    }
    44.28% {	opacity: 0;   }
    45% {	opacity: 1;    }
}

/*white car*/
.actionItem.car_white{
	background: none;	
}
.anime-car_white{
    animation: move-car_white 24s linear infinite
    }
@keyframes move-car_white {
    0% {
        transform: translate3d(22.12%,-24.4%,0);
		background: none;
    }
    15% {
        transform: translate3d(13.69%,-13.47%,0) rotate(0);
		background: none;
    }
    20% {
        transform: translate3d(13.69%,-13.47%,0) rotate(0);
		background: none;
		
    }
    65% {
        transform: translate3d(-14.76%,15.66%,0) rotate(0);
		background: none;
    }
    67% {
        transform: translate3d(-14.76%,15.66%,0) rotate(0);
		background: url("images/car_white-02_bg.svg") no-repeat left top / 100% 100%;
    }
    78% {
        transform: translate3d(-5.17%,27.27%,0) rotate(0);
		background: url("images/car_white-02_bg.svg") no-repeat left top / 100% 100%;
    }
    83% {
        transform: translate3d(-5.17%,27.27%,0) rotate(0);
		background: url("images/car_white-02_bg.svg") no-repeat left top / 100% 100%;
    }
    100% {
        transform: translate3d(9.95%,43.44%,0) rotate(0);
		background: url("images/car_white-02_bg.svg") no-repeat left top / 100% 100%;
    }
}

.actionItem.car_white .car_white_img{
	opacity: 1;

    animation: move-car_white_img 24s linear infinite
    }
@keyframes move-car_white_img {
    0% {	opacity: 1;}
    65% {	opacity: 1;}
    68% {	opacity: 0;}
    100% {	opacity: 0;}
}

/*train*/
.actionItem.train{
	
}
.anime-train{
    animation: move-train 12s linear infinite
    }
@keyframes move-train {
    0% {
        transform: translate3d(35.65%,-38.05%,0)
    }
    33% {
        transform: translate3d(0,0,0) rotate(0);
    }
    66% {
        transform: translate3d(0,0,0) rotate(0);		
    }
    100% {
        transform: translate3d(-37.08%,41.08%,0) rotate(0);
    }
}

/*windmill01*/
.actionItem.windmill01{
	top: 0.63%;
	left: 84.7%;
	width: 2%;
	height: auto;	
	transform-origin: 38% 58%;	
}
.anime-windmill01{
    animation: move-windmill01 5s linear infinite
    }
@keyframes move-windmill01 {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.actionItem.windmill02{
	top: 1.8%;
	left: 88.2%;
	width: 2%;
	height: auto;	
	transform-origin: 50% 48%;	
}
.actionItem.windmill03{
	top: 4%;
	left: 91.6%;
	width: 2%;
	height: auto;	
	transform-origin: 60% 53%;	
	
}
.actionItem.windmill04{
	top: 7%;
	left: 94.8%;
	width: 2%;
	height: auto;	
	transform-origin: 30% 57%;	
}

#mv .upper{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*.baloons*/
#mv .baloons{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.anime-baloon01{
    animation: move-baloon01 10s linear infinite
    }
@keyframes move-baloon01 {
    0% {
        transform: translate3d(0,0,0) rotate(0);
    }
    90% {
        transform: translate3d(-20%,-50%,0) rotate(0);
    }
    100% {
        transform: translate3d(-20%,-50%,0) rotate(0);
    }
}
.anime-baloon02{
    animation: move-baloon02 10s linear infinite
    }
@keyframes move-baloon02 {
    0% {
        transform: translate3d(0,0,0) rotate(0);
    }
    100% {
        transform: translate3d(-10%,-50%,0) rotate(0);
    }
}
.anime-baloon03{
    animation: move-baloon03 10s linear infinite
    }
@keyframes move-baloon03 {
    0% {
        transform: translate3d(0,0,0) rotate(0);
    }
    80% {
        transform: translate3d(-3%,-40%,0) rotate(0);
    }
    100% {
        transform: translate3d(-3%,-40%,0) rotate(0);
    }
}
.anime-baloon04{
    animation: move-baloon04 10s linear infinite
    }
@keyframes move-baloon04 {
    0% {
        transform: translate3d(0,0,0) rotate(0);
    }
    90% {
        transform: translate3d(3%,-55%,0) rotate(0);
    }
    100% {
        transform: translate3d(3%,-55%,0) rotate(0);
    }
}
.anime-baloon05{
    animation: move-baloon05 10s linear infinite
    }
@keyframes move-baloon05 {
    0% {
        transform: translate3d(0,0,0) rotate(0);
    }
    100% {
        transform: translate3d(18%,-50%,0) rotate(0);
    }
}
.anime-baloon06{
    animation: move-baloon06 10s linear infinite
    }
@keyframes move-baloon06 {
    0% {
        transform: translate3d(0,0,0) rotate(0);
    }
    80% {
        transform: translate3d(30%,-60%,0) rotate(0);
    }
    100% {
        transform: translate3d(30%,-60%,0) rotate(0);
    }
}
#mv .numItems{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.numItems div[class*="numItem"] {
	position: absolute;
	width: calc(33/1591*100%);
	height: calc(56/1591*(100vw - 251px));
}
@media screen and (max-width: 768px) {
.numItems div[class*="numItem"] {
	width: calc(33/1591*100vw);
	height: calc(56/1591*100vw);
}
}/*spOnly*/
.numItem01{	left: calc(194/1591*100%);	top: calc(68/1591*100%);}
.numItem02{	left: calc(1299/1591*100%);	top: calc(110/1591*100%);}
.numItem03{	left: calc(244/1591*100%);	top: calc(650/1591*100%);}
.numItem04{	left: calc(1525/1591*100%);	top: calc(390/1591*100%);}
.numItem05{	left: calc(1411/1591*100%);	top: calc(240/1591*100%);}
.numItem06{	left: calc(1138/1591*100%);	top: calc(440/1591*100%);}
.numItem07{	left: calc(737/1591*100%);	top: calc(100/1591*100%);}
.numItem08{	left: calc(926/1591*100%);	top: calc(450/1591*100%);}
.numItem09{	left: calc(1130/1591*100%);	top: calc(1245/1591*100%);}
.numItem10{	left: calc(196/1591*100%);	top: calc(1025/1591*100%);}
.numItem11{	left: calc(880/1591*100%);	top: calc(1064/1591*100%);}
.numItem12{	/*left: calc(606/1591*100%);	top: calc(400/1591*100%);デザインの元位置*/}
.numItem12.anime-numItem12{	left: calc(199/1591*100%);	top: calc(285*1.5748/1591*100%);
}
.anime-numItem12{
    animation: anime-numItem12 30s linear infinite;
    }
@keyframes anime-numItem12 {
    0% {left: calc(-45/1591*100%);	top: calc(265*1.5748/1591*100%);opacity: 1;}
    15.38% {left: calc(64/1591*100%);	top: calc(365*1.5748/1591*100%);}
    16% {left: calc(64/1591*100%);	top: calc(365*1.5748/1591*100%);}
    23.5% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    /*店舗１*/
    23.50000000001% {clip-path: polygon(0 0,100% 0, 100% 90%, 0% 90%);}
    25.99999999999% {clip-path: polygon(0 0,100% 0, 100% 80%, 0% 80%);}
    26% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    44.28% {left: calc(420/1591*100%);	top: calc(110*1.5748/1591*100%);}
    45% {left: calc(420/1591*100%);	top: calc(110*1.5748/1591*100%);}
    54% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    /*看板２*/
    55.00000000001% {clip-path: polygon(0 0, 80% 0, 80% 80%,100% 80%, 100% 100%, 0% 100%);}
    55.50000000001% {clip-path: polygon(0 0, 45% 0, 45% 80%,100% 80%, 100% 100%, 0% 100%);}
    56.00000000001% {clip-path: polygon(0 80%,100% 80%, 100% 100%, 0% 100%);}
    60.99999999999% {clip-path: polygon(0 80%,100% 80%, 100% 100%, 0% 100%);}
    61.5% {clip-path: polygon(55% 0, 100% 0, 100% 100%, 0% 100%,0 80%, 55% 80%);}
    62%{clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%,0 80%, 20% 80%);}
    63% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    67.48% {left: calc(614/1591*100%);	top: calc(406/1591*100%);}
    72% {left: calc(614/1591*100%);	top: calc(406/1591*100%);}
    90% {left: calc(1009/1591*100%);	top: calc(524*1.5748/1591*100%);}
    95.8% {left: calc(1009/1591*100%);	top: calc(524*1.5748/1591*100%);}
    99% {opacity: 1;}
    100% {left: calc(1094/1591*100%);	top: calc(580*1.5748/1591*100%);opacity: 0;}
}
.numItem13{	left: calc(47/1591*100%);	top: calc(1360/1591*100%);}
.numItem14{	left: calc(462/1591*100%);	top: calc(500/1591*100%);}
.numItem15{	left: calc(140/1591*100%);	top: calc(783/1591*100%);}
.numItem16{	left: calc(1139/1591*100%);	top: calc(70/1591*100%);}
.numItem17{	left: calc(1214/1591*100%);	top: calc(1040/1591*100%);}
.numItem18{	left: calc(614/1591*100%);	top: calc(620/1591*100%);}
.anime-numItem18{
    animation: anime-numItem18 24s linear infinite;
    }
@keyframes anime-numItem18 {
    /*ビル１影*/
    0% {left: calc(974/1591*100%);	top: calc(159*1.5748/1591*100%); clip-path: polygon(0 0,100% 0, 100% 30%, 0% 85%);}
    4.99999999999% {clip-path: polygon(0 0,100% 0, 100% 100%,60% 100%, 60% 60%, 0% 85%);}
    5% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    /*ビル２影・横断歩道*/
    11.4999999999% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    11.6% {clip-path: polygon(0 0,100% 0, 100% 100%, 60% 100%, 60% 55%, 0% 55%);}
    13% {clip-path: polygon(0 0,100% 0, 100% 100%, 60% 100%, 60% 55%, 0% 55%);}
    14% {clip-path: polygon(0 0,100% 0, 100% 30%, 0% 68%);}
    15% {left: calc(826/1591*100%);	top: calc(268*1.5748/1591*100%);}
    20% {left: calc(826/1591*100%);	top: calc(268*1.5748/1591*100%);}
    22.49999999999% {clip-path: polygon(0 0,100% 0, 100% 30%, 0% 68%);}
    22.5% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    /*T字路右の看板*/
    57.99999999999% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    58% {clip-path: polygon(0 0,100% 0, 100% 60%, 0% 80%);}
    60% {clip-path: polygon(0 0,100% 0, 100% 60%, 0% 80%);}
    60.00000000001% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    65% {left: calc(389/1591*100%);	top: calc(557*1.5748/1591*100%);}
    67% {left: calc(389/1591*100%);	top: calc(557*1.5748/1591*100%);}
    70.99999999999% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    /*樹木１*/
    71% {clip-path: polygon(0 0,100% 0, 100% 60%, 0% 60%);}
    74.99999999999% {clip-path: polygon(0 0,100% 0, 100% 60%, 0% 60%);}
    75% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    77.99999999999% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    /*樹木２・横断歩道*/
    78% {clip-path: polygon(0 0,100% 0, 100% 80%, 0% 80%);}
    78% {left: calc(525/1591*100%);	top: calc(671*1.5748/1591*100%);}
    83% {left: calc(525/1591*100%);	top: calc(671*1.5748/1591*100%);}
    83% {clip-path: polygon(0 0,100% 0, 100% 80%, 0% 80%);}
    83.00000000001% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    90.99999999999% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    /*樹木３*/
    91% {clip-path: polygon(0 0,100% 0, 100% 80%, 0% 80%);}
    93.99999999999% {clip-path: polygon(0 0,100% 0, 100% 80%, 0% 80%);}
    94% {clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
    100% {left: calc(768/1591*100%);	top: calc(835*1.5748/1591*100%);clip-path: polygon(0 0,100% 0, 100% 100%, 0% 100%);}
}
.numItem19{	left: calc(496/1591*100%);	top: calc(68/1591*100%);}
.numItem20{	left: calc(1405/1591*100%);	top: calc(805/1591*100%);}
.numItem21{	left: calc(1259/1591*100%);	top: calc(1395/1591*100%);}
.numItem22{	left: calc(424/1591*100%);	top: calc(1240/1591*100%);}
.numItem23{	left: calc(1002/1591*100%);	top: calc(15/1591*100%);}

/* =======================================
	first popup
========================================== */
#mvTitle{
 border-radius: 27px;
 border: 3px #004ea2 solid;
 background: rgba(255,255,255,.93);
 width: 90vw;
 height: 90vh;
 max-width: 708px;
 max-height: 420px;
 padding: 30px 0 15px;
 text-align: center;
 overflow-y: auto;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 display: none;
}
#mvTitle.active{
 display: block;
}
#mvTitle .close{
 position: absolute;
 right: 0;
 top: 0;
 background: #004ea2;
 border-radius: 0 23px 0 27px;
 width: 49px;
 height: 50px;
 margin: 0 0 0 auto;
 cursor: pointer;
}
#mvTitle .close::before,
#mvTitle .close::after{
 content: "";
 display: block;
 background: #fff;
 width: 24px;
 height: 3px;
 position: absolute;
 top: 22px;
 right: 0;
 left: 0;
 margin: auto;
 -webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#mvTitle .close::after{
 -webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#mvTitle h2{
 margin-bottom: 16px;
 text-align: center;
}
#mvTitle p:not(.note){
 margin-bottom: 15px;
 text-align: center;
 line-height: 1;
}
#mvTitle .btn{
 margin-top: 23px;
}
#mvTitle .btn a{
 display: block;
 border-radius: 5px;
 background: #004ea2;
 width: 100%;
 max-width: 114px;
 margin: 0 auto;
 color: #fff;
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 line-height: 24px;
}
#mvTitle .note{
 display: inline-block;
 text-align: left;
}


/* =======================================
	navContPopin
========================================== */
.navContPopinWrap.active{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,.6);
    transition: 1s ease-in-out; 
}
.navContPopin{
    transform: translateX(-100%);
    opacity: 0;
    width: 598px;
    padding: 40px 44px;
    position: fixed;
    top: 0;
    left: 251px;
    height: 100vh;
    background: #fff;
    overflow-y: auto;
    text-align: center;
    z-index: 800;
    transition: 1s ease-in-out; 
}
.navContPopin.active{
    transform: translateX(0);
    opacity: 1;
    /*transition: transform 1s;*/
}
.popin-close{
 position: absolute;
 right: 0;
 top: 0;
 width: 30px;
 height: 30px;
}
.popin-close::before{
 content: "×";
}
.navContPopin h2{
    font-size: 21px;
    text-align: center;
}
.navContPopin h2:before{
  display: inline-block;
  vertical-align: text-top;
  height: 24.5px;
  width: 23.4px;
  content: '';
  margin-right: 8px
}

#nav01-1 .navContPopin h2:before{
  background: url("images/ic_acoustic.png") no-repeat;
  background-size: contain;
}
#nav01-2 .navContPopin h2:before{
  background: url("images/ic_sensor.png") no-repeat;
  background-size: contain;
}
#nav01-3 .navContPopin h2:before{
  background: url("images/ic_connector.png") no-repeat;
  background-size: contain;
}
#nav01-4 .navContPopin h2:before{
  background: url("images/ic_others.png") no-repeat;
  background-size: contain;
}


.navContBox{
    display: flex;
    gap: 30px;
    margin-top: 50px;
}
.navContBox .img{
    width: calc(180/511*100%);
}
.navContBox .img .btn{
    margin-top: 5px;
    text-align: center;
}
.navContBox .img .btn a{
    position: relative;
    border: 1px solid #2C7CB3;
    background: #fff;
    display: inline-block;
    border-radius: 100vmax;
    padding: 0.4em 24px 0.2em 2em;
    color: #2C7CB3;
    font-size: 10px;
    line-height: 1.2em;
}
.navContBox .img .btn a span::after{
    position: absolute;
    right: 6px;
    top: calc(50% - 6px);
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: url(images/ic_arrow_c_l.svg) no-repeat center center / 100%;
}

.navContBox .txts{
    width: calc(303/511*100%);
}
.navContBox .jp + .en{
    margin-top: 10px;
}
.navContBox h3{
    margin-bottom: 0.1em;
    font-family: "Tinos", serif;
    font-size: 22px;
    font-weight: 700;
}



.navContBox h3:before{
  display: inline-block;
 vertical-align: baseline;
  height: 17.2px;
  width: 16.4px;
  content: '';
  margin-right: 4px
}

#nav01-1 .navContBox h3:before,
.navContBox h3.acoustic:before{
  background: url("images/ic_acoustic.png") no-repeat;
  background-size: contain;
}
#nav01-2 .navContBox h3:before,
.navContBox h3.sensor:before{
  background: url("images/ic_sensor.png") no-repeat;
  background-size: contain;
}
#nav01-3 .navContBox h3:before,
.navContBox h3.connector:before{
  background: url("images/ic_connector.png") no-repeat;
  background-size: contain;
}
#nav01-4 .navContBox h3:before,
.navContBox h3.others:before{
  background: url("images/ic_others.png") no-repeat;
  background-size: contain;
}




.navContBox .app{
    display: inline-block;
    margin-bottom: 0.5em;
    border-radius: 100vmax;
    background: #CD504F;
    padding: 0.2em 1em;
    font-size: 7.1px;
    line-height: 1.4;
    color: #fff;
}
.navContBox h4{
    margin-bottom: 0.4em;
    font-family: "Zen Old Mincho", serif;
    font-size: 22px;
}

@media screen and (max-width: 768px) {
.navContPopin{
    transform: translateX(-100%);
    width: 100vw;
    padding: 70px 4vw 20px;
    top: 0;
    left: 0;
    transition: 1s ease-in-out; 
}
.navContPopin.active{
    transform: translateX(0);
    opacity: 1;
}
.popin-close{
 right:auto;
 top: 68px;
 left: 0;
 width: 30px;
 height: 30px;
}

}/*spOnly*/


/* =======================================
	modal
========================================== */
.md-action:hover{
	cursor: pointer;
}
.md-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .6;
	z-index: 9999;
	}
	.md-contents {
	display: none;
	position: fixed;
	top: 40%;
	left: 50%;
	width: 92%;
  max-width: 1000px;
	height: auto;
	/*overflow: hidden;*/
	transform: translate(-50%, -40%);
	z-index: 10000;
	}
	.md-inner {
	position: relative;
	border-radius: 10px;
	background: #fff;
	height: auto;
	max-height: 90vh;
	overflow-y: auto;/**/
	padding: 18px 30px 20px;
	}
.md-logo{
 width: 117px;
}
.md-inner .pcFlex{
 margin-top: 38px;
}
@media screen and (min-width: 769px) {
 .md-inner .pcFlex{
  justify-content: space-between;
 }
.md-inner .pcFlex figure{
 width: 34%;
 /*max-width: 258px;*/
 }
 .md-inner .pcFlex .txts{
  width: 62%;
  /*max-width: 474px;*/
 }
}/*-PC only-*/
.md-inner .txts .app{
 display: inline-block;
	border-radius: calc(infinity * 1px);
 background: #cd504f;
 padding: 1px 10px;
 margin-bottom: 15px;
 color: #fff;
 font-size: 13px;
}
.md-inner h3{
 margin-bottom:10px;
 font-size: 27px;
 font-family: "Times New Roman" ,Garamond , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
.md-inner .txts .lead{
 margin-bottom: 12px;
 font-size: 15px;
 line-height: 1.4;
}
.md-inner .txts p{
 font-size: 12px;
 line-height: 1.6;
}
.md-inner .txts .note{
 color:#231815 ;
 font-size: 10px;
}
.md-inner .txts sup{
 font-size: 70%;
}
.md-nav{
 justify-content: space-between;
}
.md-nav a{
 display: flex;
 align-items: center;
 color: #221714;
 font-size: 11px;
 line-height: 1.1;
}
.md-nav .pdf{
 gap:8px;
}
.md-nav .pdf li a{
 border-radius: 5px;
 background:url("images/ic_pdf.svg") no-repeat left 6px center /16px auto  #054a97;
 padding: 7px 10px 7px 28px;
 color: #fff;
 font-size: 12px;
}
.md-nav ul:not(.pdf) a::before{
 content: "";
 display: block;
 width: 28px;
 height: 28px;
 margin-right: 5px;
}
.md-nav .movie a::before{
 background: url("images/ic_video.svg") no-repeat left top/100% auto;
}
.md-nav ul .contact a::before{
 background: url("images/ic_mail.svg") no-repeat left top/100% auto;
 width: 32px;
}
.md-nav .favorite a::before{
 background: url("images/ic_favorite.svg") no-repeat left top/100% auto;
}

@media screen and (min-width: 769px) {
.md-nav ul:not(.pdf){
 width: 62%;
 justify-content: center;
 gap:22px;
}
}/*-PC only-*/

@media screen and (max-width: 768px) {
.md-inner .pcFlex{
 margin-top: 50px;
}
.md-inner .pcFlex figure{
 width: 90%;
 margin: 0 auto 20px;
 }
 .md-inner .md-nav{
  margin-top: 30px;
 }
 .md-inner .md-nav ul{
  flex-flow: row wrap;
  justify-content: center;
 }
 .md-inner .md-nav ul + ul{
  margin-top: 20px;
 }
 .md-nav ul:not(.pdf){
  gap: 20px;
 }
.md-nav ul:not(.pdf) li{
 width: calc((100% - 20px) / 2);
}
}/*spOnly*/

/*-----business trip----*/
#bTrip	.md-contents {
  max-width: 840px;
	}
#bTrip .md-inner >.flex{
 align-items: flex-start;
}
#bTrip .caution{
 position: relative;
  background-size: 16px 3px;
  background-image: linear-gradient(to right,#59c3e1 13px, transparent 3px);
  background-repeat: repeat-x;
  background-position: left bottom;
  padding-bottom: 6px;
 margin-left: 30px;
 color: #ea5f93;
 font-size: 12px;
 font-weight: 700;
 line-height: 1.2;
}
#bTrip .caution::before{
 content: "";
 display: block;
 width: 100%;
 height: 3px;
  background-size: 16px 3px;
  background-image: linear-gradient(to right,#59c3e1 13px, transparent 3px);
  background-repeat: repeat-x;
  background-position: left bottom;
 margin-bottom: 4px;
}
#bTrip .caution span{
 display: block;
 font-size: 9px;
 font-weight: normal;
}
#bTrip .md-inner > .pcFlex {}
#bTrip .pcFlex ul li{
 position: relative;
 border-radius: 21px;
 border: 4px #4b95c9 solid;
 padding: 5px 0 0;
 z-index: 0;
}
#bTrip .pcFlex ul li p{
 color: #3698c4;
 text-align: center;
}
#bTrip .pcFlex ul li p span{
 font-size: 10px;
}
#bTrip .pcFlex ul li .jp{
 font-size: 12px;
 font-weight: bold;
 line-height: 1.4;
}
#bTrip .pcFlex ul li .en{
 font-size: 11px;
 line-height: 1.3;
}
#bTrip .pcFlex ul li figure{
 width: 100%;
 position: absolute;
 left: 0;
 bottom: 0;
 margin: 0;
 z-index: -1;
}
#bTrip .pcFlex .txts h2{
 margin-bottom: 10px;
 font-size: 15px;
 font-weight: bold;
}
#bTrip .pcFlex .txts p{
 margin-bottom: 42px;
 font-size: 11px;
}
#bTrip .pcFlex .txts .btn a{
 display: flex;
 flex-flow: column;
 align-items: center;
 justify-content: center;
 border-radius: 7px;
 background:url("images/ic_businesstrip_wh.svg") no-repeat left 3px center /48px auto #3698c4;
 width: 180px;
 height: 54px;
 padding: 0 0 0 50px;
 color: #fff;
 font-size: 11px;
 font-weight: bold;
}
#bTrip .pcFlex .txts .btn a span{
 display: block;
 font-size: 16px;
}
@media screen and (min-width: 769px) {
 #bTrip .pcFlex ul{
  width: 64.5%;
 flex-flow: row wrap;
 justify-content: space-between;
  gap:22px 0;
  margin: 0;
 }
 #bTrip .pcFlex ul li{
 width:min(46%,224px) ;
 height:min(25.5vw,222px) ;
}
 #bTrip .pcFlex .txts{
  display: flex;
  flex-flow: column;
  width: 31%;
 }
 #bTrip .pcFlex .txts .btn{
  margin: auto 0 0;
 }
}/*-PC only-*/

@media screen and (max-width: 768px) {
 #bTrip .md-inner >.flex{
  justify-content: space-between;
 }
#bTrip .caution{
 margin-left: 20px;
 font-size: 10px;
}
 #bTrip .pcFlex {
  margin-top: 20px;
 }
 #bTrip .pcFlex ul li{
 height:70vw ;
  padding: 5px 5px 0;
  margin-bottom: 20px;
}
 #bTrip .pcFlex .txts .btn a{
  margin: 0 auto 0;
 }
}/*-SP only-*/

/*-----favoritePage----*/
#favoritePage .md-contents{
 height: 90vh;
}
#favoritePage iframe{
 border-radius: 10px;
 height: 100%;
}


/* =======================================
	notice
========================================== */
.notice{
    margin: 2em 1em;
    font-size: 0.64em;
}


/* =======================================
	gray out
========================================== */
/*
.md-nav ul .contact a,
.md-nav ul .favorite a,
#bTrip .pcFlex .txts .btn a{
    pointer-events: none;
}
.md-nav ul .contact,
.md-nav ul .favorite {
    opacity: .5;
}
#bTrip .pcFlex .txts .btn a {
    position: relative;
    opacity: .7;
}
#bTrip .pcFlex .txts .btn a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background: #aaaaaa;
    opacity: 0.4;
}*/
#bTrip .pcFlex .txts .btn a {/*
    background: url(images/ic_businesstrip_wh.svg) no-repeat left 3px center / 48px auto #3698c4;*/
}


/* =======================================
	contact
========================================== */
.contactHeader{
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 max-width: none;
 height: 60px;
 padding: 0;
}
.contactHeader #logo{
 margin-bottom: 0;
 padding: 0;
}
.noticeWrapCenter{
    display: grid;
    place-content: center;
    height: 100svh;
    min-width: 100%;
    margin-left: 0;
    margin-top: 0;
}


/*--------- contactConts ------*/
.contactConts{
 margin: 0;
 padding: 50px 0;
}
.contactConts h2{
 margin-bottom: 50px;
 font-size: 20px;
 text-align: center;
}
.contactConts h2 span{
 display: block;
 font-size: 30px;
 margin-bottom: 10px;
}
.contactConts h3{
 font-size: 16px;
 margin-top: 50px;
 margin-bottom: 20px;
}
/*-----------*/
.contactConts .map{
 position: relative;
 max-width: 1000px;
 margin: 0 auto 100px;
}
.selectArea{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
  }
.selectArea > li{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px #ccc solid;
   background: #fff;
   width:29%;
   height: 50px;
   cursor: pointer;
  }
.selectArea > li:not(.area04)::after{ 
 content: "";
 display: block;
 background: #fff;
	width:10px;
	height:8px;
clip-path: polygon(0 0, 50% 100%, 100% 0);
 position: absolute;
 top: 0;
 bottom: 0;
 right: 5px;
 margin: auto;
}

.selectArea .area01{
  background: #DD2A49;
    color:#fff
}
.selectArea .area01 li{
  border: 1px solid #DD2A49
}

.selectArea .area02{
  background: #2CADDB;
    color:#fff
}
.selectArea .area02 li{
  border: 1px solid #2CADDB
}
.selectArea .area03{
  background: #A0CA23;
    color:#fff
}
.selectArea .area03 li{
  border: 1px solid #A0CA23
}

.selectArea .area04{
 width: 180px;
 position: absolute;
 right: 0;
 top: 40%;
  background: #F2930A;
  color: #fff;
}
.selectArea .area04 .js-selectform{
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100%;
}
.selectArea .area05{
 position: absolute;
 left: 50%;
 bottom: 5%;
 transform: translate(-50%, 0);
  background: #F2EB06;
  width: 34%
}
.selectArea .area05 li{
  border: 1px solid #F2EB06
}
.selectArea .area06{
 position: absolute;
 right: 0;
 bottom: 5%;
 background: #08BF40;
   color:#fff
}
.selectArea .area06 li{
  border: 1px solid #08BF40
}

.selectArea > li.active{
   border: 1px #000 solid;
  }
.sCountry{
   position: absolute;
   top: 99%;
   left: 0;
   opacity: 0;
   transition: 0.2s ease-in-out;
 width: 100%;
  display: none;
  }
.selectArea > li.active .sCountry{
   opacity: 1;
   z-index: 1;
  display: block;
  }
.sCountry li{
 background: #fff;
 padding: 5px;
 cursor: pointer;
}
.js-selectform.current{
 background: #f0f0f0;
}


  .formBox{
   display: none;
  }
  .formBox.active{
   display: block;
  }
/*-------------*/
.formTable{
 margin: 10px auto;
 width: 100%;
 max-width: 980px;
}
.formTable th {
 border-bottom: 1px #ccc solid;
 padding: 10px;
 font-size: 14px;
 font-weight: normal;
 vertical-align: top;
 white-space: nowrap;
}
.hissu{
 display: inline-block;
 /*background-color: #ce052c; 
 padding: 2px 5px;
 color: #fff;*/
 color:#ce052c;
 font-size: 14px;
 margin: 0 5px;
}
.formTable td {
 border-bottom: 1px #ccc solid;
 padding: 10px;
 vertical-align: top;
 word-break: break-all;
}

.formTable input[type=radio]{
 border: 1px #ccc solid;
 margin: 0 5px 0 0;
}
.formTable select{
	font-size: 14px;
	padding: 0.8% 1%;
}
.formTable input[type=text],
.formTable input[type=email]{
	border:1px #cccccc solid;
	font-size: 14px;
	padding: 0.8% 1%;
	width:90%;
}
.formTable textarea{
	border:1px #cccccc solid;
	padding: 1%;
	width:90%;
	height:220px;
}
.formTable textarea.other{
 height: 100px;
}
.formTable input[type=file]{
	font-size: 13px;
	margin-bottom:10px;
}
.formTable input.txtS{
	width:30%;
	margin: 0 20px 0 5px;
}
.labelblock label{
 display: block;
}
.labelblock label +label{
 margin-top: 5px;
}
.formTable p,
.privacyTxt{
 margin-top: 5px;
 color: #666;
 font-size: 13px;
}
.formTable p a,
.privacyTxt a{
 color: #004da0;
 text-decoration: underline;
}


.formBtn{
	padding-top:50px;
	text-align:center;
}
.formBtn input{
	border:none;
	display:inline-block;
	background: #004da0;
	border-radius:4px;
	width:300px;
 box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	padding:19px 0;
	margin:0;
	color:#FFF;
	font-size:18px;
	font-weight:700;
 letter-spacing: 0.1em;
	cursor:pointer; 
    transition: 0.2s ease-in-out; 
}
.formBtn input:hover{
	-moz-opacity:0.60;
	opacity:0.60;
}
.formBtn .btnBack{
 background: #696969;
}
@media screen and (min-width: 769px) {
	.formTable th {
 width: 40%;
  }
}/*-PC only-*/
@media screen and (max-width: 768px) {
.formTable,
 .formTable thead,
 .formTable tbody,
 .formTable tr,
 .formTable th,
 .formTable td{
  display: block;
 }
 .formTable th{
  padding-top: 20px;
  padding-bottom: 0;
  border-bottom: none;
 }
 .formTable td{
  padding-bottom: 20px;
 }
	.formTable input[type=text],
	.formTable input[type=email],
	.formTable textarea{
		padding: 2.5%;
		width:100%;
	}
	form input.txtS{
	width: 38%;
	margin: 0 10px 0 0;
}
	.formBtn{
		padding-top: 30px;
	}
}/*-SP-*/

.errorBox p{
 text-align: center;
}
p.error_messe{
	margin:5px 0;
	color:red;
}