@charset "UTF-8";

body{
	-webkit-highlight: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: text;
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
	text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
  background: #FFDF00;
  color: #003B89;
}
.txt-en {
  letter-spacing: 0.08em;
}

/*--- font ---*/
.fw-normal {
  font-weight: normal;}
.fw-bold {
  font-weight: bold;}
.att{
	color:#ff0000;}
p[class^='tximg-'] {
	margin: auto;
}

/*--- layout ---*/
ul[class] {
  list-style: none;}
ul.note-list,
ul.note-list-m {
	clear:both;}
ul.note-list li,
ul.note-list-m li {
	text-indent: -1em;
	padding-left: 1em;
  margin-bottom: .15em;
	text-align: left;}
ul.note-list.txt-en li,
ul.note-list-m.txt-en li {
	text-indent: -.5em;
	padding-left: .5em;}
.svgimg{
	margin: 0;
	padding: 0;
	max-width:100%;
  height: auto;
  display: block;
	vertical-align: top;
}
svg {
	overflow: visible;
}
.replaced-svg{
	overflow: visible;
}
.svg-color path{
	color: #ffffff;
	fill: currentColor;
}
#content-main img {
  max-width: 100%;
}


.btnimg {
  width: min(100vw*442/750, 442px);
	display: block;
	margin: auto;
}
.btnimg a {
	display: block;
	background: 0 0 no-repeat;
	background-size: 100% auto;
	height: 0;
	padding-top: 13.12%;
	text-indent: -9999em;
	margin: auto;
	filter: drop-shadow(.6em .8em 0 rgb(128, 79, 33,.2));
}
.btn-start a {
	background-image: url("../images/btn_start.png");
}

/* content-loading */
#content-loading {
	width: 100%;
	height: 100%;
	background: rgba(255,225,0,.95);background: #FFE100;
	top: 0%;
	left: 0%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: fixed;
	z-index: 1010;
	pointer-events: none;
	opacity: 1;
	transition: opacity .3s linear;
}
#content-loading > div {
	width: 100%;
}
#content-loading .logo {
	width: 50%;
	margin: 0 auto 3%;
}
#img_logo01 g[class^='logo01_letter-'] {
	transform-origin: bottom center;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.logo-start #img_logo01 g[class^='logo01_letter-'] {
	animation-name: anime-logo01-jump;
}
.logo-start #img_logo01 .logo01_letter-1 {animation-delay: .0s;}
.logo-start #img_logo01 .logo01_letter-2 {animation-delay: .1s;}
.logo-start #img_logo01 .logo01_letter-3 {animation-delay: .2s;}
.logo-start #img_logo01 .logo01_letter-4 {animation-delay: .3s;}
.logo-start #img_logo01 .logo01_letter-5 {animation-delay: .4s;}
.logo-start #img_logo01 .logo01_letter-6 {animation-delay: .5s;}
.logo-start #img_logo01 .logo01_letter-7 {animation-delay: .6s;}
.logo-start #img_logo01 .logo01_letter-8 {animation-delay: .7s;}
.logo-start #img_logo01 .logo01_letter-9 {animation-delay: .8s;}
.logo-start #img_logo01 .logo01_letter-10 {animation-delay: .9s;}
.logo-start #img_logo01 .logo01_letter-11 {animation-delay: 1.0s;}
.logo-start #img_logo01 .logo01_letter-12 {animation-delay: 1.4s;}
.logo-start #img_logo01 .logo01_letter-13 {animation-delay: 1.5s;}
.logo-start #img_logo01 .logo01_letter-14 {animation-delay: 1.6s;}
.logo-start #img_logo01 .logo01_letter-15 {animation-delay: 1.7s;}
.logo-start #img_logo01 .logo01_letter-16 {animation-delay: 1.8s;}
.logo-start #img_logo01 .logo01_letter-17 {animation-delay: 1.9s;}
.logo-start #img_logo01 .logo01_letter-18 {animation-delay: 2s;}

@-webkit-keyframes anime-logo01-jump {
	0%,15%,25%,100% { transform:translate(0%, 0%);}
	20% { transform:translate(0%, -12%); }
}

#content-loading #percent {
	font-size: 230%;
	font-weight: bold;
	color: #003399;
}
#content-loading #gauge {
	border: 3px solid #fff;
	border-radius: 9999em;
	width: 40%;
  max-width: 300px;
	height: 33px;
	display: block;
	background: #fff;
	margin: 10px auto 0;
	overflow: hidden;
	position: relative;
	box-shadow: 2px 5px 0 0 rgba(121,106,86,.5);
}
#content-loading #gauge::before {
	content: "";
	width: 100%;
	height: 38%;
	display: block;
	background: rgba(62,58,57,.3);
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
}
#content-loading #gauge .gauge01 {
	position: absolute;
	width: 0%;
	height: 100%;
	display: block;
	background: #2CA6E0;
	z-index: 1;
	-webkit-transition: width 0.1s linear;
	-moz-transition: width 0.1s linear;
	-o-transition: width 0.1s linear;
	-ms-transition: width 0.1s linear;
	transition: width 0.1s linear;
}
#content-loading #gauge > span {
	position: absolute;
	width: 3px;
	height: 100%;
	display: block;
	background: #97D0E6;
	top: 0;
	left: 20%;
	z-index: 2;
}
#content-loading #gauge > span.memori2 {
	left: 50%;
}
#content-loading #gauge > span.memori3 {
	left: 80%;
}
@media screen and (max-width: 767px) {
	#content-loading .logo {
		width: 80%;
	}
	#content-loading .logo img,
	#content-loading .logo svg {
		max-height: 30vh;
	}
	#content-loading #gauge {
		width: 40%;
		min-width: 150px;
		border-width: 2px;
		height: 16px;
		box-shadow: 1px 3px 0 0 rgba(121,106,86,.5);
	}
	#content-loading #gauge::before {
    height: 6px;
	}
  #content-loading #gauge > span {
    width: 2px;
  }
}

/* content-main */
#content-main {
	clear: both;
	position: relative;
	width: 100%;
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
  font-size: min(100vw*12/750, 12px);
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.body-nowloading #content-main {
  height: 100vh;
	overflow: hidden;
}
#content-main .logo {
  width: min(100vw*583/750, 583px);
  position: absolute;
  top: min(100vw*67/750, 67px);
  left: 50%;
  transform: translateX(-50%);
}
#content-main .btn-start {
  position: relative;
  margin-bottom: 1.3em;
}
#content-main .btn-start::before {
  content: "";
  position: absolute;
  width: min(100vw*169/750, 169px);
  height: min(100vw*161/750, 161px);
	background: url("../images/im02.png") 0 0 / contain no-repeat;
  left: calc(1em*-57/12);
  top: calc(1em*-32/12);
  z-index: 2;
}
#content-main .btn {
  margin-top: calc(1em*55/12);
}
#content-main .btn .note {
  text-align: left;
  margin: 0 0 0 calc(1em*240/12);
}
#content-main .txt {
  text-align: left;
  margin: calc(1em*73/12) min(100vw*93/750, 93px) calc(1em*40/12);
}
#content-main .txt .note-list {
  margin-top: 1.8em;
}