@charset "utf-8";

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* font
==========================================*/
	@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=370f4296-8500-4535-be5c-1d9012da28b2&fontids=1448933,1448937,1524513,1524515,1524517,1524519,1524523,1524525,5127203,5158200,5167437,5167988,5171778,5173533,5178165,5179430,5183338,5185605,5192188,5193802,5195787,5196377,5199282,5203487,5218208,5225931,5227441,5315082,5326347,5331290,5331551,5332790,5336183,5338212,5338314,5340716,5340903,5342333,5346938,5350525,5366225,5366894");
	@font-face{
		font-family:"DIN Next LT W04 Regular";
		src:url("/font/Fonts/1448933/bbb280b3-b74d-49f2-908d-0395516a3dc8.eot?#iefix");
		src:url("/font/Fonts/1448933/bbb280b3-b74d-49f2-908d-0395516a3dc8.eot?#iefix") format("eot"),url("/font/Fonts/1448933/95d17c42-537a-4cbf-a8c1-60fcc6edf28f.woff2") format("woff2"),url("/font/Fonts/1448933/3097f8f0-50b7-4d8d-8745-6281850a1b05.woff") format("woff"),url("/font/Fonts/1448933/ac4b95cb-49c4-493a-a895-471d763cea38.ttf") format("truetype");
	}
	@font-face{
		font-family:"DIN Next LT W05 Bold";
		src:url("/font/Fonts/5336183/81fa13e9-f3dd-4691-8a9c-1f768f3f8ecd.eot?#iefix");
		src:url("/font/Fonts/5336183/81fa13e9-f3dd-4691-8a9c-1f768f3f8ecd.eot?#iefix") format("eot"),url("/font/Fonts/5336183/0eef0ad7-77fc-48ba-be31-87aaee2fba0b.woff2") format("woff2"),url("/font/Fonts/5336183/0a2cc9e5-bf48-47f9-8f25-64d72d79370e.woff") format("woff"),url("/font/Fonts/5336183/56b0dc42-3b98-40b8-b3bc-7d90a3dbb568.ttf") format("truetype");
	}

/* common
==========================================*/
body {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  font-family:"DIN Next LT W04 Regular" , "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
  color: #222;
}

.modePC .hiddenPC,
.modeSP .hiddenSP {
  display: none !important;
}

.svg-symbols {
  display: none;
}

em {
  font-weight: bold;
}

a {
  text-decoration: none;
}

.flex {
  display: flex;
}

.txtNomal{
	font-family:'DIN Next LT W04 Regular';
}
.txtbold{
	font-family:'DIN Next LT W05 Bold';
}

.modePC {
	min-width: 1100px;
	font-size: 16px;
}
.modeSP {
	width: 100%;
	font-size: 26px;
}

/* flexbox
==========================================*/
.flex-cc,
.modePC .flex-cc_pc,
.modeSP .flex-cc_sp,
.flex-middle_center,
.modePC .flex-middle_center_pc,
.modeSP .flex-middle_center_sp {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.flex-between,
.modePC .flex-between_pc,
.modeSP .flex-between_sp {
	display: flex;
	justify-content: space-between;
}
.modePC .flex-top_between_pc,
.flex-top_between {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: row;
}
.flex-middle_between,
.modePC .flex-middle_between_pc,
.modeSP .flex-middle_between_pc {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
}
.flex-top_center,
.modePC .flex-top_center_pc,
.modeSP .flex-top_center_sp {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}
.flex-middle_left,
.modePC .flex-middle_left_pc,
.modeSP .flex-middle_left_sp {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
}
.flex-bottom_center,
.modePC .flex-bottom_center_pc,
.modeSP .flex-bottom_center_sp {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: column;
}
.flex-middle_right,
.modePC .flex-middle_right_pc,
.modeSP .flex-middle_right_sp {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: row;
	flex-wrap: nowrap;
}
.flex-middle_between,
.modePC .flex-middle_between_pc,
.modeSP .flex-middle_between_sp {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex-bottom_right,
.modePC .flex-bottom_right_pc,
.modeSP .flex-bottom_right_sp {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;
}

/* orientationNtoice
==========================================*/
.orientationNtoice,
.modePC.modeSP .orientationNtoice {
	display: none;
}

@media all and (orientation: landscape) {
	.modeSP {
		overflow: hidden;
		height: 100%;
	}

	.modeSP .orientationNtoice {
		background: #000;
		background-size: 60px 60px;
		background-position: 50% 63%;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
		color: #fff;
		height: 100%;
		width: 100%;
		display: table;
	}

	.modeSP .orientationNtoice p.text {
		text-align: center;
		width: 350px;
		position: absolute;
		top: 20%;
		left: 50%;
		margin-left: -175px;
		font-size: 20px;
		line-height: 2;
	}

	@keyframes rz_arrow {
		25% {
			transform: rotateZ(90deg);
		}
		50% {
			transform: rotateZ(180deg);
		}
		75% {
			transform: rotateZ(270deg);
		}
		100% {
			transform: rotateZ(360deg);
		}
	}
	.rz_arrow {
		display: block;
		width: 140px;
		height: 140px;
		animation-name: rz_arrow;
		animation-duration: 6s;
		animation-iteration-count: infinite;
	}

	@keyframes rz_device {
		0% {
			transform: rotateZ(-90deg);
		}
		50% {
			transform: rotateZ(0deg);
		}
		100% {
			transform: rotateZ(0deg);
		}
	}
	.rz_device {
		display: block;
		width: 140px;
		height: 140px;
		animation-name: rz_device;
		animation-duration: 3s;
		animation-iteration-count: infinite;
	}

	.position {
		position: absolute;
		top: 52%;
		left: 50%;
		margin-left: -70px;
	}

	.position svg {
		width: 140px;
		height: 140px;
		fill: #fff;
		color: #fff;
	}
}

/* animation
==========================================*/
.JS-anime.an-zin,
.JS-anime .an-zin {
  transition-property: transform;
  transition-duration: 0.6s;
  transform: scale(1);
}

.modePC .an-wait:not(.an-sp).an-zin:not(.an-sp),
.modeSP .an-wait:not(.an-pc).an-zin:not(.an-pc),
.modePC .an-wait:not(.an-sp) .an-zin:not(.an-sp),
.modeSP .an-wait:not(.an-pc) .an-zin:not(.an-pc) {
  transform: scale(0.8);
}

.JS-anime.an-fin,
.JS-anime .an-fin {
  transition-property: opacity;
  transition-duration: 0.6s;
}

.modePC .an-wait:not(.an-sp).an-fin:not(.an-sp),
.modeSP .an-wait:not(.an-pc).an-fin:not(.an-pc),
.modePC .an-wait:not(.an-sp) .an-fin:not(.an-sp),
.modeSP .an-wait:not(.an-pc) .an-fin:not(.an-pc) {
  opacity: 0;
}

.an-lr {
  overf-flow: hidden;
}

.JS-anime .an-lr,
.JS-anime.an-lr {
  transition-property: width;
  transition-duration: .9s;
  transition-timing-function: cubic-bezier(0, 0.58, 0.19, 1);
  overflow: hidden;
  /** / transition-duration: 10s; /* debug */
}

.an-right {
  width: 100%;
  height: 100%;
}

.JS-anime .an-right,
.JS-anime.an-right {
  transform: translate(0, 0);
  transition-property: transform;
  transition-duration: .9s;
  transition-timing-function: cubic-bezier(0, 0.58, 0.19, 1);
}

.modePC .an-wait:not(.an-sp).an-lr:not(.an-sp),
.modePC .an-wait:not(.an-sp) .an-lr:not(.an-sp),
.modeSP .an-wait:not(.an-pc).an-lr:not(.an-pc),
.modeSP .an-wait:not(.an-pc) .an-lr:not(.an-pc) {
  width: 0 !important;
}

.modePC .an-wait:not(.an-sp) .an-right,
.modePC .an-wait:not(.an-sp).an-right,
.modeSP .an-wait:not(.an-pc) .an-right,
.modeSP .an-wait:not(.an-pc).an-right {
  transform: translate(-100px, 0);
}

.JS-anime.an-up,
.JS-anime .an-up {
  transform: translate(0, 0);
  transition-duration: 0.6s;
  transition-property: transform;
}

.modePC .an-wait:not(.an-sp).an-up:not(.an-sp),
.modePC .an-wait:not(.an-sp) .an-up:not(.an-sp) {
  transform: translate(0, 10px);
}

.modeSP .an-wait:not(.an-pc).an-up:not(.an-pc),
.modeSP .an-wait:not(.an-pc) .an-up:not(.an-pc) {
  transform: translate(0, 20px);
}

.JS-anime.an-fin.an-zin,
.JS-anime .an-fin.an-zin {
  transition-property: opacity, transform;
  transition-duration: 0.6s, 0.6s;
  transition-timing-function: ease, ease;
}

.JS-anime.an-fin.an-up,
.JS-anime .an-fin.an-up {
  transition-property: opacity, transform;
  transition-duration: 0.6s, 0.6s;
  transition-timing-function: ease, ease;
}

.JS-anime.an-fin.an-right,
.JS-anime .an-fin.an-right {
  transition-property: opacity, transform;
  transition-duration: 0.6s, 0.9s;
  transition-timing-function: ease, cubic-bezier(0, 0.58, 0.19, 1);
}

@keyframes circle_arrow {
  30% {
    transform: rotateZ(-180deg);
  }
  50% {
    transform: rotateZ(-180deg);
  }
  80% {
    transform: rotateZ(-360deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
.an-active .an-spin,
.an-active.an-spin {
  animation-name: circle_arrow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.an-not.an-up,
.an-not.an-right,
.an-not.an-fin,
.an-not.an-spin,
.an-not.an-lr {
  transition-property: none !important;
  transition-duration: 0 !important;
  transition-delay: 0 !important;
}

.an-spin,
.an-up,
.an-right,
.an-fin,
.an-lr {
  /*** / transition-duration: 2 !important; /* slow debug */
}

.an-w0 {
  transition-delay: 0;
}

.an-w1 {
  transition-delay: .2s;
}

.an-w2 {
  transition-delay: .4s;
}

.an-w3 {
  transition-delay: .6s;
}

.an-w4 {
  transition-delay: .8s;
}

.an-w5 {
  transition-delay: 1s;
}

.an-w6 {
  transition-delay: 1.2s;
}

.an-w7 {
  transition-delay: 1.4s;
}

.an-w8 {
  transition-delay: 1.6s;
}

.an-w9 {
  transition-delay: 1.8s;
}

.an-w10 {
  transition-delay: 2s;
}

.an-w3s {
  transition-delay: 3s;
}

.an-w4s {
  transition-delay: 4s;
}

/* debug
==========================================*/
.debug-font {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
}
.debugHost {
  width: 100%;
  height: 0;
  text-align: center;
  position: fixed;
  z-index: 100;
  top: 15px;
  left: 50%;
  margin-left: -50%;
}
.debugHost .span {
  color: #fff;
  text-shadow: 2px solid #000;
  font-size: 13px;
  line-height: 10px;
  font-weight: bold;
  padding: 4px 10px;
}
.modeSP .debugHost {
  top: 20px;
}
.modePC.modeSP {
  opacity: 0;
}
a {
  color: #000;
}

.svgs{ display: none; }



.modePC .hover-underline-left-wrap a,
.modePC .hover-underline-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
.modePC .hover-underline-left-wrap a:before,
.modePC .hover-underline-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #222;
  height: 10px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.modePC .hover-underline-left-wrap a:hover:before, .modePC .hover-underline-left-wrap a:focus:before, .modePC .hover-underline-left-wrap a:active:before,
.modePC .hover-underline-left:hover:before,
.modePC .hover-underline-left:focus:before,
.modePC .hover-underline-left:active:before {
  right: 0;
}


/* structure
==================================== */
.wrap{}
.modePC .wrap{}
.modeSP .wrap{}

.container{}
.modePC .container{}
.modeSP .container{}


.inner {
	margin: 0 auto;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.modePC .inner {}

@media (min-width: 1200px) {
	.modePC .inner {
	margin-left: calc((100vw - 1200px)*0.25);
	margin-right: calc((100vw - 1200px)*0.25);
	}
}
.modeSP .inner {
  width: 640px;
}

.modePC .frame {
  min-width: 1200px;
}

.modePC .app {
  min-width: 1200px;
}

.modeSP .app {
  width: 100%;
}