@charset 'utf-8';
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  min-height: 100vh;
}

html {
  overflow-y: scroll;
  scrollbar-width: thin;
  font-size: 62.5%;
}

body {
/*
  background: radial-gradient(#434242, #302e2e);
  background-size: 8px 8px;
  perspective: 300px;
*/
  background-image: url("../images/bg.jpg");
  background-size: cover;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP','Lucida Grande','Hiragino Kaku Gothic ProN', sans-serif;
  color: #fff;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: 1px;
}

.index {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: columin nowrap;
  justify-content: center;
  align-items: center;
}
.standby {
  animation: blink-fast .4s linear infinite;
  width: 100px;
  margin: 0;
  text-align: center;
}

@keyframes blink-fast {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }
}
#progress-outer {
  width: 70%;
  margin: 0 auto;
  padding: 0;
}
#progress-inner {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
#progress-container {
  background-color: #312f2f;
  width: 96%;
  margin: 0;
}

#progress-bar {
  background-color: #1add16;
  width: 0%;
  height: 7px;
}

#parsent {
  width: 3%;
  color: #fff;
}
.exec {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: columin nowrap;
  justify-content: center;
  align-items: flex-start;
}
.ai {
  width: 100%;
  margin: 1.0em 0;
  padding: 0 0 2.0em;
}

.numflow {
  width: 100%;
  margin: 0 0 1.0em;
  padding: 0;
  font-size: 1.75rem;
}

dl.acMenu { 
  width: 100%;
  margin: 0 0 1.0em;
  padding: 0;
}
dl.acMenu dt {
	background: #590258;
	padding: 10px 0.5em;
	margin: 0 0.5em 0.5em;
	color: #fff;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
dl.acMenu dt::after {
	content: "OPEN";
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	background: #fff;
	color: #000;
	font-size: 1.2rem;
	border-radius: 100%;
	padding: 0;
	margin: 0;
	width: 40px;
	height: 40px;
}
dl.acMenu dt.active::after {
	content: "CLOSE";
	font-size: 1.2rem;
}
dl.acMenu dd {
	padding: 10px 1.0em;
	margin: 0 0 5px 0;
	display: none;
	color: #fff;
}
.Menu01 {
}
.Menu02 {
	background: #1B9AAA;
}
.Menu03 {
	background: #EF476F;
}

/* Exec 用 */
div.ai-result {
  width: 100%;
  margin: 0;
  padding: 0 1.0em;
}

div.ai-result p {
  margin: 0 0 0.5em 0;
}
/* Ajax Fetch 用 */
ul.ai-result {
  width: 310px;
  margin: 30px auto 0;
}

ul.ai-result li {
  margin: 0 0 0.5em 0;
  list-style: none;
}

table.predisplay {
  width: 90%;
  margin: 1.0em auto 0;
}
table.predisplay th {
  font-size: 1.75rem;
  font-weight: normal;
  text-align: left;
}
table.predisplay th.kai {
  padding: 0.5em 0;
  text-align: left;
}
table.predisplay td {
  width: 30%;
  padding: 0.5em 0;
  border: 1px solid #fff;
  text-align: center;
}

/* container の外に hr を挟んだうえで */
#return {
  margin: 2.0em auto 0;
  width: 150px;
  height: 46px;
}

div.ad {
  margin: auto;
}
hr {
  width: 100%;
  margin: 0 0 2%;
  padding: 0;
  clear: both;
  /* floatを解除する */
  height: 0;
  /* ＜hr＞の実線を消す */
  border: none;
  /* モダンブラウザはここまでで消えます */
}

* html hr {
  /* * htmlでIEのみに読ませる */
  border-top: 1px solid;
  /* ここが苦肉の策・・・・（汗） */
}

*:first-child+html hr {
  /* for IE7 */
  border-top: 1px solid;
}

.clear {
  border: 1px solid #000;
  width: 100%;
  clear: both;
}

.clear hr {
  display: none;
}


/* micro clearfx */

.cf:before, .cf:after {
  content: "";
  display: table
}

.cf:after {
  clear: both
}

/*********************************************************************
	19.5 - smartphone 300px from
*********************************************************************/

@media only screen
          and (min-width: 300px)
          and (-webkit-min-device-pixel-ratio: 2)
          and (orientation: portrait) {
	
	html {
		-webkit-text-size-adjust: 100%;
	}
	
	body {
	}
	
	.ai {
	}
	
	dl.acMenu dt::after {
	}
	
	.numflow {
	}
}

/*********************************************************************
	19.5 - smartphone 700px from
*********************************************************************/

@media only screen
          and (min-width: 700px)
          and (-webkit-min-device-pixel-ratio: 2)
          and (orientation: landscape) {
	
	html {
		-webkit-text-size-adjust: 100%;
	}
	
	body {
	}
	.ai {
	}
	
	dl.acMenu dt {
	}
	
	dl.acMenu dt::after {
	}
	
	.numflow {
	}
}