/* 2024 Feb event style */

@font-face {
	font-family: 'Roboto Mono';
	src: url(./font/RobotoMono-Regular.ttf);
}

body {
	user-select: none; /* CSS3 */
  	-moz-user-select: none; /* Firefox */
  	-webkit-user-select: none; /* Safari、Chromeなど */
  	-ms-user-select: none; /* IE10かららしい */
  	margin:0px;
  	padding:0px;
  	border:0px;
  	font-family: "Times New Roman", Times, serif, "MS PMincho";
  	font-style: italic;
	font-weight: bold;
	font-size:32px;
	background:#000000;
}@media screen and (max-width: 750px){
	body {
		font-size:20px;
	}
}

h1 {
	text-align: center;
}

a, a:link, a:visited, a:hover, a:active {
/*	color: #d3d3d3; */
	color: #555;
}

input {
	font-size: 32px;
	border-radius: 20px;
	vertical-align : middle;
}

input[type="text"], input[type="email"] {
	-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input[type=checkbox] {
	transform: scale(2);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
	-moz-appearance:textfield;
}

input#backHome {
	width:max(calc(100% - 50px), 100px);
	height: 75px;
	background: #003399;
	border: solid 1px #000;
	border-radius: 20px;
	overflow: hidden;
	text-align: center;
	font-size: 20px;
	color: #ffffff;
	margin: 25px 0px;
}

pre{
  white-space: pre-wrap;
  word-wrap: break-word;
	margin: 0px;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.linedTable {
	width: 100%;
}

.linedTable td {
	border: 1px solid #000000;
	padding: 10px;
}

.nonLinedTable {
	width: 100%;
}

.nonLinedTable td {
	border: 0px;
	padding:0px;
}

.hideDiv {
	position: absolute;
	left: 200%;
	height: 100%;
	overflow: auto;
}

#uiMasterDiv {
	position:relative;
	margin:0px;
	border:0px;
	padding:0px;
	background-color:#DFDFDF;
/*	background-image: url(./img/bg_large.jpg);
	background-position: center top;
	background-size: cover; */
	left:0px;
	top:0px;
	width:max(100%, 390px);
	height:100%;
}@media screen and (min-width: 1024px){
	#uiMasterDiv {
		margin:0px auto;
		width:1024px;
	}
}

#uiHeader {
	width:100%;
	height:70px;
/*	background: rgba(0,0,0,0.75); */
	background: #003399;
}

#uiHeader img#logo {
	 width:200px; height:auto; margin:20px 0px 0px 20px;
}

#clearAll, #langIcon, #mapIcon{
	width:30px;
	height:30px;
	position: absolute;
	top: 20px;
}

#clearAll {
	right:20px;
}

#langIcon {
	right:20px;
}

#mapIcon {
	right: 70px;
}

#uiBody {
	padding:0px 34px 0px 34px;
	height: calc(100% - 70px);
  overflow: auto;
	font-family: "Roboto Mono", sans-serif;
	font-weight:normal;
	font-style: normal;
}@media screen and (max-width: 750px){
	#uiBody {
		padding:0px 10px 0px 10px;
	}
}

#uiBody hr {
	margin-block-start: 1.5em;
	margin-block-end: 1.5em;
}

#uiBody p {
/*	color: #fff; */
}

#uiFooter {
	position:fixed;
	bottom:-1px;
	width:max(100%, 390px);
	height:100px;
/*	background: rgba(0,0,0,0.75); */
	background: #003399;
	z-index:2000;
}@media screen and (min-width: 1024px){
	#uiFooter {
		width:1024px;
	}
}

#navPageDiv {
	color: #afafaf;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
	margin-top: 20px;
}

#navPageDiv .navPageStep {
	font-size: 20px;
	padding: 0.2em 2em;
	margin-left: -5px;
  clip-path: polygon(0% 0%, 10px 50%, 0% 100%, calc(100% - 10px) 100%, 100% 50%, calc(100% - 10px) 0%);
  background-color: rgba(255,255,255,0.5);
}
@media screen and (max-width: 750px){
	#navPageDiv .navPageStep {
		font-size: 15px;
	}
}
#navPageDiv .navPageStep.active {
	background-color: #ffffff;
	color: #000000;
}
#navPageDiv .navPageStep.first {
	clip-path: polygon(0% 0%, 0% 100%, calc(100% - 10px) 100%, 100% 50%, calc(100% - 10px) 0%);
	border-top-left-radius: 0.7em;
	border-bottom-left-radius: 0.7em;
	padding-left: calc(2em - 5px);
	margin-left: 0px;
}
#navPageDiv .navPageStep.last {
	clip-path: polygon(0% 0%, 10px 50%, 0% 100%, 100% 100%, 100% 0%);
	border-top-right-radius: 0.7em;
	border-bottom-right-radius: 0.7em;
	padding-right: calc(2em - 5px);
}

#visitorID, #bkPageBtn, #fwPageBtn {
	position:absolute;
	height:60px;
	top:20px;
	background:#fff;
	border-radius:20px;
	border:solid 1px #000;
	margin:0px;
	padding:0px;
	font-size:32px;
	text-align:center;
}

#visitorID.deactive, #bkPageBtn.deactive, #fwPageBtn.deactive {
	background: #aaaaaa;
	color: #555555;
}

#visitorID {
	width:calc(100% - 60px);
	left:30px;
}
#bkPageBtn {
	width: 50px;
	left:30px;
}
#fwPageBtn {
	width: calc(100% - 130px);
	left:100px;
}
@media screen and (max-width: 750px){
	#visitorID {
		width:calc(100% - 20px);
		left:10px;
		font-size:20px;
	}
	#bkPageBtn {
		width: 50px;
		left:10px;
		font-size:20px;
	}
	#fwPageBtn {
		width: calc(100% - 80px);
		left:70px;
		font-size:20px;
	}
}

#submitBtn {
	position:absolute;
	width:200px;
	height:60px;
	top:20px;
	right:30px;
	background:linear-gradient(0deg, rgb(172,207,229), rgb(255,255,255));
	border:solid 1px #000;
	border-radius:20px;
	overflow:hidden;
	text-align:center;
	color:#003399;
}@media screen and (max-width: 750px){
	#submitBtn {
		width:100px;
		right:10px;
	}
	#submitBtn .uiComponent {
		margin-top:18px;
	}
}

.deactive, #submitBtn.deactive, .submitBtn.deactive, #customerInfoOkBtn.deactive, input.deactive {
	background: #aaaaaa;
	color: #555555;
}

#uiThanks {
	background:rgba(0,0,0,0.75);
	z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#uiThanks.none {
	display: none;
}

.fullScreen {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.dialog {
	width: 640px;
	background: rgba(255,255,255,0.8);
	border:solid 1px #fff;
	border-radius:20px;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}@media screen and (max-width: 750px){
	.dialog {
		width:calc(100% - 30px);
	}
}

#uiCustomerInfo .dialog {
	padding: 25px;
	height: 600px;
	font-family: "Roboto Mono", sans-serif;
	font-weight:normal;
	font-style: normal;
}
@media screen and (max-width: 750px){
	#uiCustomerInfo .dialog {
		height: 500px;
		padding: 10px;
	}
}

#contactMeExp {
	font-size: 30px;
}
@media screen and (max-width: 750px){
	#contactMeExp {
		font-size: 17px;
	}
}

#agreeDetail0, #agreeDetail1 {
	background: #f1f1f1;
	z-index: 10000;
}

#agreeDetail0 .contentBlock, #agreeDetail1 .contentBlock {
	margin: 25px;
	background: #ffffff;
	height: calc(100% - 135px);
	overflow-y: scroll;
	font-family: Arial, Helvetica, sans-serif, "MS PGothic";
	font-style:normal;
	font-weight:normal;
	font-size: 12px;
}

#agreeDetail1 ul {
	list-style-type: disc;
	margin-left: 20px;
}

#agreeDetail1 li {
	list-style-type: disc;

}

#agreeDetail0 .btnBlock, #agreeDetail1 .btnBlock {
	bottom: 25px;
}

#thanks {
	width:80%;
	text-align: center;
	font-size: 120%;
	margin: 20px 15px 15px 15px;
}

#thanks .indent {
	 margin-left:150px;
}@media screen and (max-width: 750px){
	#thanks .indent {
		margin-left:25px;
	}
}

#tanksOkBtn {
	width:200px;
	height:60px;
	background:#000000;
	border:solid 1px #000;
	border-radius:20px;
	overflow:hidden;
	text-align:center;
	color:#ffffff;
	margin-top: 15px;
    margin-bottom: 20px;
}@media screen and (max-width: 750px){
	#tanksOkBtn .uiComponent {
		margin-top:18px;
	}
}

#uiAdmin {
	background:#ffffff; width:max(100%, 300px); z-index:10000;
}

#adminHeader {
	position:relative; width:100%; height:60px;
}

#adminHeader img {
	position:absolute; top:10px; left:10px; width:200px; height:auto;
}@media screen and (max-width: 750px){
	#adminHeader img {
		display:none;
	}
}

#adminOK {
	position:absolute;
	width:100px;
	height:40px;
	top:10px;
	right:10px;
	background:#003399;
	border:solid 1px #000;
	border-radius:10px;
	font-size:20px;
	color:#ffffff;
}

#adminTitle {
	position:absolute; top:10px; left:0px; width:100%; text-align:center; color:#039;
}@media screen and (max-width: 750px){
	#adminTitle {
		top:20px;
	}
}

#adminBody {
	position:relative; height:calc(100% - 60px); overflow:auto; background:#f3f3f3; padding:0px 20px; text-align: center;
}

#adminBody form {
	 font-size:20px;
}

#adminDownload {
	width:max(calc(100% - 50px), 100px);
	border: 1px solid #aaaaaa;
	border-radius: 20px;
	background: #ffffff;
	margin: 10px auto;
}

#fileName {
	 font-size:20px;
	 height: 40px;
   border-radius: 10px;
}

#download {
	 min-width:100px;
	 height:40px;
	 background:#003399;
	 border:solid 1px #000;
	 border-radius:10px;
	 margin-bottom: 25px;
	 font-size:20px;
	 color:#ffffff;
}

#ADMlistDiv {
	padding-top:25px;
	text-align: left;
}

#ADMsymbol {
	position: absolute;
	background:#ff0000;
	color:#ffffff;
	top:15px;
	left:240px;
	font-size:15px;
	padding: 10px;
	border-radius: 10px;
	animation-name: flashBgAnime;
	animation-duration: 2.0s;
	animation-iteration-count: infinite;
}
@media screen and (max-width: 750px){
	#ADMsymbol {
		left: 5px;
		top:5px;
	}
}
@keyframes flashBgAnime{
	0% {
		background: #ff0000;
	}
	50% {
		background: #ff9999;
	}
	100% {
		background: #ff0000;
	}
}

#uiCustomerInfo, .darkBG {
	position:fixed;
	top:0px;
	left:0px;
	background:rgba(0,0,0,0.75);
	width:100%;
	height:100%;
	z-index: 3000;
}

.blankDiv {
	height: 2em;
}

.proceeding p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,calc(-50% - 150px));
	color: #ffffff;
}
.proceeding div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	overflow: hidden;
	text-align: center;
	display: flex;
  justify-content: center;
  align-items: center;
}
.proceeding img{
	width: 100px;
	height: 100px;
	animation-name: proceedingAnime;
	animation-duration:1.5s;
	animation-iteration-count:infinite;
}
@keyframes proceedingAnime{
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.stdDiv {
	position: relative;
	height: 100%;
}

.itemExpSI {
	margin-top: 25px;
}

.itemBoxSI {
	position: relative;
	margin-top: 25px;
	padding: 0px 25px;
/*	color: #ffffff; */
}

.itemTitleSI {
	font-size: 25px;
}

.itemTitleSI em {
	font-size: 50%;
	margin-left: 0.5em;
}

.itemTitle.extended {
	left:40px;
}
@media screen and (max-width: 750px){
		.itemTitle.extended {
			left:10px;
		}
}

.itemTitle.extended div {
	position: absolute;
	top: 0px;
	bottom: 0px;
	margin:auto;
	height: 1em;
	font-size: 40px;
}

.itemContSI input[type="text"], .itemContSI input[type="email"], .itemContSI input[type="number"], .selectTxtBoxSI {
	border-radius: 0px;
	border: 0px;
	border-bottom: 2px solid #aaaaaa;
	padding-left: 1em;
	font-size: 32px;
	width: 100%;
	height:60px;
	outline:none;
  background: transparent;
	/*color:#ffffff;*/
}

.selectTxtBoxSI {
	margin-top: 25px;
}

.itemContSI input[type="text"]:focus,
.itemContSI input[type="email"]:focus,
.itemContSI input[type="number"]:focus,
.selectTxtBoxSI:focus,
.itemSlectSI select:focus {
	background: rgba(255,255,255,0.1);
}

.itemSlectSI {
    display: inline-flex;
    align-items: center;
    position: relative;
		width: 100%;
}
.itemSlectSI::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}
.itemSlectSI select {
    appearance: none;
    min-width: 230px;
    height: 60px;
    padding: .4em calc(1em + 30px) .4em 1em;
    border: none;
    border-bottom: 2px solid #aaaaaa;
    background-color: #fff;
    color: #333333;
    cursor: pointer;
		font-size: 32px;
		width: 100%;
}
.itemSlectSI select:focus {
    outline: none;
}

.agreeBoxSI {
	margin: 50px 0px;
/*	color: #ffffff; */
}

.btnBoxSI {
	margin: 0px;
  padding-top: 20px;
  text-align: center;
	margin-bottom: 50px;
}

.itemBox {
	position:relative;
	width:100%;
	/*height:120px;
	overflow:hidden;*/
	margin-top:20px;
	background: rgba(255,255,255,1);
/*	border:solid 1px #fff;*/
	border-radius:20px;
/*	color: #fff;*/
}
@media screen and (max-width: 750px){
	.itemBox {
		margin-top:10px;
		border-radius:15px;
		/*height:125px;*/
	}
}
.itemBox.act {
	/*height:245px;
	color: #fff;*/
}
.itemBox .contents {
	padding: 10px 40px;
}
@media screen and (max-width: 750px){
	.itemBox .contents {
		padding: 10px;
		font-size: 15px;
	}
}
.contentMainDiv {
/*	display: flex;
  justify-content: space-between;
	align-items: center;*/
	position: relative;
	margin-top: 10px;
	text-align: center;
}
.contentMainDivS {
	position: relative;
	margin-top: 10px;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
    align-items: center;
}
.itemImg, .itemImgS {
/*	position:absolute;
	top:10px;
	left:40px;*/
	position: relative;
	width:300px;
	height:auto;
	overflow:hidden;
	border-radius:20px;
}
@media screen and (max-width: 750px){
	.itemImg {
		/*width:80px;
		height:80px;*/
		width: 270px;
		height: auto;
		/*top:10px;
		left:10px;*/
	}
	.itemImgS {
		width: 75px;
		height: auto;
	}
}

.itemImg div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width:100%;
	text-align: center;
	font-size: 33px;
	color: #fff;
}

.itemTitle {
	/*position:absolute;
	width:calc(100% - 374px);
	height:100px;
	top:10px;
	left:160px;
	overflow:hidden;*/
	font-size:25px;
	padding: 10px;
  background: #003399;
	color: #ffffff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.itemTitle.typeRed {
	background: #e71211;
}
.itemTitle.typeGreen {
	background: #1dac4f;
}
.itemTitle.typeYellow {
	background: #d09e0b;
}
.itemTitle.typeBlue {
	background: #106fb8;
}
.itemTitle.typeLightBlue {
	background: #00D8DD;
}
.itemTitle.typePurple {
	background: #E17EFF;
}
/*.itemStar5 + .itemTitle {
	width:calc(100% - 455px);
}*/
@media screen and (max-width: 750px){
	.itemTitle, .itemStar5 + .itemTitle {
		/*width:calc(100% - 130px);
		height:60px;
		top:10px;
		left:120px;*/
		font-size:15px;
	}
}

.itemTitle sup {
	font-size: 50%;
	margin-left: 0.3em;
}

.itemStar, .itemStar5 {
	position:relative;
	width:262px;
	height:44px;
	overflow:hidden;
	/*top:40px;
	right:34px;*/
	z-index:1001;
/*	margin-top: 10px;*/
	margin: 10px auto;
}@media screen and (max-width: 750px){
	.itemStar, .itemStar5 {
		/*top:75px;
		right:10px;*/
	}
}
.itemStar img, .itemStar5 img {
	margin-top:0px;
}
.itemStar.r1 img {
	margin-top:-44px;
}
.itemStar.r2 img {
	margin-top:-88px;
}
.itemStar.r3 img {
	margin-top:-132px;
}
.itemStar5.r1 img {
	margin-top:-44px;
}
.itemStar5.r2 img {
	margin-top:-88px;
}
.itemStar5.r3 img {
	margin-top:-132px;
}
.itemStar5.r4 img {
	margin-top:-176px;
}
.itemStar5.r5 img {
	margin-top:-220px;
}
.itemExp {
	position:absolute; width:158px; height:30px; overflow:hidden; top:10px; right:34px; color:#55ff55; font-size:20px; text-align:center;
}@media screen and (max-width: 750px){
	.itemExp {
		top:10px;
		right:10px;
		width:160px;
		height:44px;
		font-weight:bold;
		color:#ffffff;
		overflow:auto;
		background:#009900;
		border-radius:5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}

.egBox {
	display: flex;
}
.egBox div {
	margin: 5px auto;
	font-size: 75%;
	padding: 5px 10px;
}
.egBox img {
	height: 0.75em;
}

.swObj {
	position:absolute;
	width:80px;
	height:44px;
	overflow:hidden;
	top:40px;
	right:34px;
	background:#33ff33;
	border-radius: 22px;
	border: 1px solid #aaaaaa;
}
.swObj.deactive {
	background:#b1b1b1;
}
@media screen and (max-width: 750px){
	.swObj {
		top:65px;
	}
}
.swChildObj{
	width:40px;
	height:40px;
	margin:1px;
	margin-left:auto;
	background:#ffffff;
	border-radius: 100%;
	border: 1px solid #aaaaaa;
}
.deactive div.swChildObj {
	margin-left:1px;
}
.arrowObj-r {
	position:absolute;
	width:30px;
	height:30px;
	top:47px;
	right:34px;
	opacity:50%;
}
@media screen and (max-width: 750px){
	.arrowObj-r {
		top:72px;
	}
}

.selectArea {
	position:absolute; width:100%; height:120px; top:0px; left:0px; z-index:1000;
}
.selectArea1, .selectArea2, .selectArea3, .selectArea4, .selectArea5 {
	position:absolute; width:52px; height:120px; top:-40px; z-index:1001;
}
.itemStar5 .selectArea1 {
	right:208px;
}
.itemStar5 .selectArea2 {
	right:156px;
}
.selectArea1, .itemStar5 .selectArea3 {
	right:104px;
}
.selectArea2, .selectArea4 {
	right:52px;
}
.selectArea3, .selectArea5 {
	right:0px;
}
@media screen and (max-width: 750px){
	.selectArea1, .selectArea2, .selectArea3, .selectArea4, .selectArea5 {
		height:44px;
		top: 0px;
	}
}

.degExp {
/*	color: #fff;*/
  font-size: 75%;
	display: flex;
	margin-top: 20px;
}
.degInitExp, .degLastExp{
	width: 20%;
  text-align: center;
}
.degInitExp{
	margin-right: 60%;
}
.degBar {
	position: relative;
	padding: 20px 0px;
	margin-bottom: 30px;
}
.degBarBG {
	border: #000000 1px solid;
	display: flex;
	width: calc(80% + 15px);
	margin: 0px auto;
	border-radius: 10px;
/*	background: rgba(255,255,255,0.1);*/
}
.degBarBG.star5{
	border: transparent 1px solid;
	background: transparent;
}
.degBarC {
	background: #000000;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin: 5px;
	margin-right: calc((100% - 75px)/4);
}
.degBarBG.star5 .degBarC{
	background: transparent;
}
.degBarClast {
	background: #000000;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin: 5px;
}
.degPointer {
	background: #dfdfdf;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	position: absolute;
	top: 15px;
	left: -100px;
	border: solid 3px #000000;
	display: none;
}
.degBarBG.r1+.degPointer {
	left: calc(10% - 15px);
	display: block;
}
.degBarBG.r2+.degPointer {
	left: calc(30% - 15px);
	display: block;
}
.degBarBG.r3+.degPointer {
	left: calc(50% - 15px);
	display: block;
}
.degBarBG.r4+.degPointer {
	left: calc(70% - 15px);
	display: block;
}
.degBarBG.r5+.degPointer {
	left: calc(90% - 15px);
	display: block;
}
.degBar .selectArea1, .degBar .selectArea2, .degBar .selectArea3, .degBar .selectArea4, .degBar .selectArea5 {
	position: absolute;
	top: 0px;
	width:20%;
	height:100%;
	z-index: 1001;
}
.degBar .selectArea1 {
	left: 0%;
}
.degBar .selectArea2 {
	left: 20%;
}
.degBar .selectArea3 {
	left: 40%;
}
.degBar .selectArea4 {
	left: 60%;
}
.degBar .selectArea5 {
	left: 80%;
}
.degBar .selectArea1 div, .degBar .selectArea2 div, .degBar .selectArea3 div, .degBar .selectArea4 div, .degBar .selectArea5 div {
	width:52px;
	height:44px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0px 0px -25px;
}
.degBar .selectArea1 img, .degBar .selectArea2 img, .degBar .selectArea3 img, .degBar .selectArea4 img, .degBar .selectArea5 img {
	width: 262px;
}
.degBar .selectArea1 img {
	margin-left: -1px;
}
.degBar .selectArea2 img {
	margin-left: -53px;
}
.degBar .selectArea3 img {
	margin-left: -105px;
}
.degBar .selectArea4 img {
	margin-left: -157px;
}
.degBar .selectArea5 img {
	margin-left: -209px;
}
.degBarBG.r1+div .selectArea1 img, .degBarBG.r1+div .selectArea2 img, .degBarBG.r1+div .selectArea3 img, .degBarBG.r1+div .selectArea4 img, .degBarBG.r1+div .selectArea5 img {
	margin-top: -44px;
}
.degBarBG.r2+div .selectArea1 img, .degBarBG.r2+div .selectArea2 img, .degBarBG.r2+div .selectArea3 img, .degBarBG.r2+div .selectArea4 img, .degBarBG.r2+div .selectArea5 img {
	margin-top: -88px;
}
.degBarBG.r3+div .selectArea1 img, .degBarBG.r3+div .selectArea2 img, .degBarBG.r3+div .selectArea3 img, .degBarBG.r3+div .selectArea4 img, .degBarBG.r3+div .selectArea5 img {
	margin-top: -132px;
}
.degBarBG.r4+div .selectArea1 img, .degBarBG.r4+div .selectArea2 img, .degBarBG.r4+div .selectArea3 img, .degBarBG.r4+div .selectArea4 img, .degBarBG.r4+div .selectArea5 img {
	margin-top: -176px;
}
.degBarBG.r5+div .selectArea1 img, .degBarBG.r5+div .selectArea2 img, .degBarBG.r5+div .selectArea3 img, .degBarBG.r5+div .selectArea4 img, .degBarBG.r5+div .selectArea5 img {
	margin-top: -220px;
}

.uiComponent {
	font-family: Arial, Helvetica, sans-serif, "MS PGothic"; font-style:normal; font-weight:normal; margin-top:10px;
}

.chkboxGr {
	margin-top: 25px;
}
@media screen and (max-width: 750px){
	.chkboxGr {
		font-size: 15px;
	}
}

.chkboxExp {
	padding: 0px 0px 10px 15px;
}

.chkbox {
	width:50px;
	text-align: center;
}

.chkboxLabel em, .itemTitleSI em{
	color:red;
}

.agreeBlock {
	font-size: 20px;
}
@media screen and (max-width: 750px){
	.agreeBlock {
		font-size: 12px;
	}
}
.agreeBlock table {
	margin-left: 25px;
}

.btnBlock {
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
}

.txtC {
	margin:0px;
	padding-top:20px;
	text-align:left;
}

.txtC em {
	color: red;
	font-size: 75%;
	margin-left: 0.5em;
}

textarea {
	padding: 5px 8px;
	box-sizing: border-box;
	border: 1px solid #dfdfdf;
	border-radius: 20px;
	background-color: #f8f8f8;
	font-size: 20px;
	resize: none;
	font-family: Arial, Helvetica, sans-serif, "MS PGothic";
	font-style:normal;
	font-weight:normal;
}@media screen and (max-width: 750px){
	textarea {
		border-radius: 15px;
	}
}

.boxL {
	width:100%;
	height:120px;
	margin-top:20px;
	margin-bottom: 30px;
}
.boxS {
	position:absolute; top:185px; left:40px; width:calc(100% - 82px); height:52px;
}
@media screen and (max-width: 750px){
	.boxS {
		width:calc(100% - 20px);
		left:10px;
	}
}
.itemBox.act textarea {
	display:inline-block;
	position:relative;
	width:100%;
	top: auto;
	left: auto;
	margin-top: 10px;
}
.itemBox.act textarea:focus {height: 10em;}
#yourName, #yourDept, #yourEmail {
	margin-top:10px;
	width:100%;
	height:60px;
}
@media screen and (max-width: 750px){
	#yourName, #yourDept, #yourEmail {
		font-size: 20px;
	}
}

.itemBox .additionalDiv {
	display: none;
}
.itemBox.act .additionalDiv {
	display: block;
	margin-top: 15px;
	font-size: 75%;
}
@media screen and (max-width: 750px){
	.itemBox.act .additionalDiv {
		font-size: 100%;
	}
}

.attachIconDiv {
	position: absolute;
	top: 0px;
	right: 0px;
	display: flex;
	flex-direction: row;
}
.attachIconDiv img {
	height: 60px;
}
@media screen and (max-width: 750px){
	.attachIconDiv img {
		height: 40px;
	}
}

.itemBox .inquiryDiv {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	flex-direction: column;
	margin-top: 10px;
}

.itemBox .inquiryDivS {
	display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 10px;
}

.itemBox .inquiry {
	display: block;
	border: 1px solid #dfdfdf;
	padding: 5px 1em;
  border-radius: 15px;
	margin-bottom: 5px;
}
input:checked + label.inquiry {
	background: #003399;
	color: #ffffff;
}

.ratingDiv {
	font-size: 75%;
	margin-left: 5px;
	margin-top: 15px;
}
.contentMainDivS .ratingDiv {
	margin-top: 0px;
}
@media screen and (max-width: 750px){
	.ratingDiv {
		font-size: 100%;
	}
}
.ratingDiv div.label {
	text-align: left;
}
.ratingDevDiv {
	display: flex;
	justify-content: space-evenly;
	margin: 10px 0px 15px 0px;
}
.ratingDevItems {
	border: 1px solid #dfdfdf;
	border-radius: 15px;
	padding: 0.5em;
  width: 25%;
  text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ratingDevItems.active {
	background: #003399;
	color: #ffffff;
}

.itemBox select {
	display: none;
}
.itemBox.act select {
	display: inline-block;
	background-color: #f8f8f8;
	/*position: absolute;
	top: 120px;
	left: 40px;
	width: calc(100% - 82px);*/
	width: 100%;
	height: 52px;
	border: #000 1px solid;
	border-radius: 20px;
	font-size: 20px;
}
@media screen and (max-width: 750px){
	.itemBox.act select {
		/*width:calc(100% - 20px);
		left:10px;*/
		border-radius: 15px;
		top: 125px;
	}
}

.selectItemsList {
	display: flex;
	justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 5px;
}
.selectItems {
	background: #ffffff;
	border: 1px solid #dfdfdf;
	color: #000000;
	border-radius: 15px;
	margin-bottom: 5px;
	text-align: center;
	padding: 0.2em;
}
.selectItems.active {
	background: #003399;
	color: #ffffff;
}

#uiMapDiv {
	position: absolute;
	top: 70px;
	left: 0px;
	height: calc(100% - 70px);
	width: 100%;
	overflow: auto;
	font-family: "Roboto Mono", sans-serif;
	font-weight:normal;
	font-style: normal;
	background: #ffffff;
	z-index: 10000;
}@media screen and (max-width: 750px){
	#uiMapDiv {

	}
}
#mapZoomIcon {
	position: fixed;
	top: 85px;
	background: url("/img/icon_zoomin.svg");
	width: 30px;
	height: 30px;
	z-index: 1000;
	margin-left: 10px;
}
#mapZoomIcon.zoomed {
	background: url("/img/icon_zoomout.svg");
}
.mapPage {
	position: relative;
	z-index: 1;
}
.mapPage img, .mapPage div {
	position: absolute;
}
.mapPage img {
	width: 100%;
	height: 100%;
}
.mapPage div {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}
.mapPage.zoomed div {
	font-size: 100%;
}


#customerInfoOkBtn, #customerInfoCancelBtn, .closeBtn, .submitBtn {
	 width:200px;
	 height:60px;
	 border:solid 1px #000;
}
@media screen and (max-width: 750px){
	#customerInfoOkBtn, #customerInfoCancelBtn, .closeBtn {
		 width:150px;
		 font-size: 20px;
	 }
}

#customerInfoOkBtn, .submitBtn {
	background:#000;
	color: #ffffff;
}

#customerInfoCancelBtn{
	margin-right: 25px;
}

.footerBlank {
	position: relative;
	height: 120px;
}@media screen and (max-width: 750px){
	.footerBlank {
		height: 130px;
	}
}
.none {
	display:none;
}

#devSymbol {
	font-size: 20px;
	color: red;
	position: absolute;
	top: 0px;
	left: 0px;
	border: red 1px solid;
}
#devDiv {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: #ffffff;
	color: #000000;
	font-style: normal;
	z-index: 10000;
}
#devClose {
	margin: 1em;
	border: 1px #000000 solid;
	border-radius: 15px;
	text-align: center;
}
#devDiv #devBody {
	overflow: auto;
	position: absolute;
	top: 50px;
	bottom: 0px;
}

/*================================================
  Animetion
================================================*/

.slideInUp {
	animation-name: slideInUpAnime;
	animation-duration:0.5s;
}
@keyframes slideInUpAnime{
	0% {
		transform: translateY(100px);
	}

	100% {
		transform: translateY(0);
	}
}
