@charset "utf-8";

/*
	Theme Name: Infinity Safety Manual Test
	Theme URI: https://stylegraph.com
	Description: Infinity Theme by Hirofumi Yasutomi
	Author: SHIMA CORPORATION
	Author URI: https://shima-kk.com
	Version: 4.0
*/


@import url(//fonts.googleapis.com/css?family=Lexend:500);
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,600,800);
@import url(//fonts.googleapis.com/css?family=Inter:300,400,600,800);
@import url(//fonts.googleapis.com/css?family=Tilt+Neon&display:300);
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

html {
	background-color: #121415;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%
}

body {
	color: #333;
	font: 1.4rem 'Inter', Noto Sans JP, Arial, Meiryo, sans-serif;
	font-weight: 400;
	letter-spacing: .08em;
	margin: auto;
	-webkit-font-smoothing: antialiased
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	margin: 3.8rem 0 2.4rem;
	text-transform: uppercase
}

p {
	line-height: 1.8;
	margin: 2rem 0
}

img {
	border-width: 0;
	height: auto;
	max-width: 100%;
	object-fit: cover;
	-ms-interpolation-mode: bicubic
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

a,
a:hover {
	color: #333;
	cursor: pointer;
	text-decoration: none
}

b {
	font-size: 1.2em;
	font-weight: 800
}

cite {
	display: block;
	font-size: .9em;
	text-align: right
}

input,
textarea {
	background: #fff;
	border: 0;
	box-sizing: border-box;
	color: #333;
	font-size: 1.4rem;
	margin: 1em auto;
	padding: 1.4rem;
	width: 100%
}
input[type='submit'] {
	appearance: none;
	background: #000;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none
}
input[type='checkbox']  {
	width: auto
}
input:focus,
textarea:focus {
	background: #fff
}

* ::selection {
    background:#cca
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
	display: block;
	margin: 0
}

blockquote {
	background-color: #f7f7f7;
	border: 1px solid #e5e5e5;
	border-width: 1px 0;
	font-style: normal;
	padding-bottom: 8% !important;
	padding-top: 8% !important
}
blockquote > *{
	margin-top: 2em !important
}

dl {
	margin: 2em auto;
	padding: 1% 8%
}
dt,
dd {
	margin-left: 60px
}

/* Universal Class
------------------------------ */

/* Title */
.Title {
	font-size: 3rem;
	font-weight: 700;
	margin: 4rem auto 2rem;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	z-index: 10
}
.Title span {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	margin: 1rem auto;
	text-transform: uppercase
}
.Title.Solid {
	color: transparent;
	text-shadow: -3px -3px 0 #333;
	text-stroke: 1px rgba(51,51,51,.5);
	-webkit-text-stroke: 1px rgba(51,51,51,.5)
}
h2.Title.Neon,
h3.Title.Neon {
	color: #fff;
	font-family: 'Tilt Neon', sans-serif;
	font-size: 3.8rem;
	letter-spacing: -.2rem;
	text-shadow: 0 0 1px rgba(255,255,255,.8);
}
.Neon.Blue.Active {
	animation: neonBlue 2s;
	text-shadow: 0 0 12px rgba(0,170,255,.8), 0 0 22px rgba(0,170,255,.6)
}
@keyframes neonBlue {
	0% { text-shadow: none }
   65% { text-shadow: none }
   70% { text-shadow: 0 0 12px rgba(0,170,255,.8), 0 0 22px rgba(0,170,255,.6) }
   75% { text-shadow: none }
  100% { text-shadow: 0 0 12px rgba(0,170,255,.8), 0 0 22px rgba(0,170,255,.6) }
}
.Neon.Pink.Active {
	animation: neonPink 2s;
	text-shadow: 0 0 12px rgba(255,0,128,.8), 0 0 22px rgba(255,0,128,.6)
}
@keyframes neonPink {
	0% { text-shadow: none }
   65% { text-shadow: none }
   70% { text-shadow: 0 0 12px rgba(255,0,128,.8), 0 0 22px rgba(255,0,128,.6) }
   75% { text-shadow: none }
  100% { text-shadow: 0 0 12px rgba(255,0,128,.8), 0 0 22px rgba(255,0,128,.6) }
}
.Neon.Purple.Active {
	animation: neonPurple 2s;
	text-shadow: 0 0 12px rgba(126,0,255,.8), 0 0 22px rgba(126,0,255,.6)
}
@keyframes neonPurple {
	0% { text-shadow: none }
   65% { text-shadow: none }
   70% { text-shadow: 0 0 12px rgba(126,0,255,.8), 0 0 22px rgba(126,0,255,.6) }
   75% { text-shadow: none }
  100% { text-shadow: 0 0 12px rgba(126,0,255,.8), 0 0 22px rgba(126,0,255,.6) }
}
.Neon.Yellow.Active {
	animation: neonYellow 2s;
	text-shadow: 0 0 12px rgba(255,221,51,.8), 0 0 22px rgba(255,221,51,.6)
}
@keyframes neonYellow {
	0% { text-shadow: none }
   65% { text-shadow: none }
   70% { text-shadow: 0 0 12px rgba(255,221,51,.8), 0 0 22px rgba(255,221,51,.6) }
   75% { text-shadow: none }
  100% { text-shadow: 0 0 12px rgba(255,221,51,.8), 0 0 22px rgba(255,221,51,.6) }
}

/* Visual */
.Visual {
	padding: 0
}
.Visual .DiagonalTop svg,
.Visual .DiagonalBottom svg {
	fill: #fff;
	height: 0;
    left: -2px;
    position: absolute;
	top: -2px;
	transition: all 1s ease-in;
    width: 102%;
    z-index: 2
}
.Visual .DiagonalBottom svg {
	bottom: -2px;
	top: inherit
}
.Visual .DiagonalTop svg path:nth-child(2),
.Visual .DiagonalBottom svg path:nth-child(2) {
	fill: #e6e6e6
}
.Visual .DiagonalTop.Active svg,
.Visual .DiagonalBottom.Active svg {
	height: 10vh;
	transition: 1s
}
.Visual .Gear {
	background-size: cover;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYwMCA2MDAiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxODYpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI2MDAgMzcwIDU5OS40IDIzMC44IDQyMC42IDIzMC42IDUxMC42IDc1LjIgMzg5LjggNi4xIDMwMC4yIDE2MC44IDIxMC42IDUuMiA5MC40IDc1LjMgMTc5LjUgMjMwLjIgMCAyMzAgLjYgMzY5LjIgMTc5LjQgMzY5LjQgODkuNCA1MjQuOCAyMTAuMiA1OTMuOCAyOTkuOCA0MzkuMiAzODkuNCA1OTQuOCA1MDkuNiA1MjQuNyA0MjAuNCAzNjkuOCA2MDAgMzcwIi8+Cjwvc3ZnPg==");
	height: 30px;
	left: 20px;
	padding: 10px;
	position: absolute;
	scale: .5;
	top: 30px;
	transition: 2s;
	width: 30px;
	z-index: 1
}
.Visual .Gear.Black {
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYwMCA2MDAiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxODYpICAtLT4KICA8cG9seWdvbiBwb2ludHM9IjYwMCAzNzAgNTk5LjQgMjMwLjggNDIwLjYgMjMwLjYgNTEwLjYgNzUuMiAzODkuOCA2LjEgMzAwLjIgMTYwLjggMjEwLjYgNS4yIDkwLjQgNzUuMyAxNzkuNSAyMzAuMiAwIDIzMCAuNiAzNjkuMiAxNzkuNCAzNjkuNCA4OS40IDUyNC44IDIxMC4yIDU5My44IDI5OS44IDQzOS4yIDM4OS40IDU5NC44IDUwOS42IDUyNC43IDQyMC40IDM2OS44IDYwMCAzNzAiLz4KPC9zdmc+");
}

.Visual .Dotted {
	background-size: cover;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYwMCA2MDAiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxODYpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTIiIGN5PSIxMi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyNy4yIiBjeT0iMTIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNDIuNCIgY3k9IjEyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMzU3LjYiIGN5PSIxMi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjQ3Mi44IiBjeT0iMTIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1ODgiIGN5PSIxMi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyIiBjeT0iMTI3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTI3LjIiIGN5PSIxMjcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNDIuNCIgY3k9IjEyNy41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjM1Ny42IiBjeT0iMTI3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iNDcyLjgiIGN5PSIxMjcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1ODgiIGN5PSIxMjcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxMiIgY3k9IjI0Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyNy4yIiBjeT0iMjQyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjQyLjQiIGN5PSIyNDIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIzNTcuNiIgY3k9IjI0Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjQ3Mi44IiBjeT0iMjQyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iNTg4IiBjeT0iMjQyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTIiIGN5PSIzNTcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxMjcuMiIgY3k9IjM1Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjI0Mi40IiBjeT0iMzU3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMzU3LjYiIGN5PSIzNTcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI0NzIuOCIgY3k9IjM1Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjU4OCIgY3k9IjM1Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyIiBjeT0iNDcyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTI3LjIiIGN5PSI0NzIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNDIuNCIgY3k9IjQ3Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjM1Ny42IiBjeT0iNDcyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iNDcyLjgiIGN5PSI0NzIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1ODgiIGN5PSI0NzIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxMiIgY3k9IjU4Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyNy4yIiBjeT0iNTg3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjQyLjQiIGN5PSI1ODcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIzNTcuNiIgY3k9IjU4Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjQ3Mi44IiBjeT0iNTg3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iNTg4IiBjeT0iNTg3LjUiIHI9IjEyIi8+Cjwvc3ZnPg==");
	height: 200px;
	left: -10px;
	opacity: .3;
	padding: 10px;
	position: absolute;
	scale: .5;
	top: 0;
	width: 200px;
	z-index: 1	
}
.Visual .Square {
	background-size: cover;
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYwMCA2MDAiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxODYpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTIiIGN5PSIxMi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyNy4yIiBjeT0iMTIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNDIuNCIgY3k9IjEyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMzU3LjYiIGN5PSIxMi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjQ3Mi44IiBjeT0iMTIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1ODgiIGN5PSIxMi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyIiBjeT0iMTI3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTI3LjIiIGN5PSIxMjcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNDIuNCIgY3k9IjEyNy41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjM1Ny42IiBjeT0iMTI3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iNDcyLjgiIGN5PSIxMjcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1ODgiIGN5PSIxMjcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxMiIgY3k9IjI0Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyNy4yIiBjeT0iMjQyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjQyLjQiIGN5PSIyNDIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIzNTcuNiIgY3k9IjI0Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjQ3Mi44IiBjeT0iMjQyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iNTg4IiBjeT0iMjQyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTIiIGN5PSIzNTcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxMjcuMiIgY3k9IjM1Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjI0Mi40IiBjeT0iMzU3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMzU3LjYiIGN5PSIzNTcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI0NzIuOCIgY3k9IjM1Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjU4OCIgY3k9IjM1Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyIiBjeT0iNDcyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTI3LjIiIGN5PSI0NzIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNDIuNCIgY3k9IjQ3Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjM1Ny42IiBjeT0iNDcyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iNDcyLjgiIGN5PSI0NzIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSI1ODgiIGN5PSI0NzIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxMiIgY3k9IjU4Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjEyNy4yIiBjeT0iNTg3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMjQyLjQiIGN5PSI1ODcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIzNTcuNiIgY3k9IjU4Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY2xhc3M9InN0MCIgY3g9IjQ3Mi44IiBjeT0iNTg3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iNTg4IiBjeT0iNTg3LjUiIHI9IjEyIi8+Cjwvc3ZnPg==");
	bottom: 0;
	height: 100px;
	opacity: .6;
	padding: 10px;
	position: absolute;
	right: 0;
	scale: .5;
	width: 100px;
	z-index: 3
}
.Visual .Square::before {
	background-color: #fff;
	content: "";
	height: 100%;
	left: 0;
	opacity: 1;
	position: absolute;
	top: 0;
	transition: 2s;
	width: 100%
}
.Visual .Square.Black {
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYwMCA2MDAiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMCBCdWlsZCAxODYpICAtLT4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iMTI3LjIiIGN5PSIxMi41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjI0Mi40IiBjeT0iMTIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSIzNTcuNiIgY3k9IjEyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iNDcyLjgiIGN5PSIxMi41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjU4OCIgY3k9IjEyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMjcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSIxMjcuMiIgY3k9IjEyNy41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjI0Mi40IiBjeT0iMTI3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iMzU3LjYiIGN5PSIxMjcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSI0NzIuOCIgY3k9IjEyNy41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjU4OCIgY3k9IjEyNy41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMjQyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iMTI3LjIiIGN5PSIyNDIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSIyNDIuNCIgY3k9IjI0Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjM1Ny42IiBjeT0iMjQyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iNDcyLjgiIGN5PSIyNDIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSI1ODgiIGN5PSIyNDIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjM1Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjEyNy4yIiBjeT0iMzU3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iMjQyLjQiIGN5PSIzNTcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSIzNTcuNiIgY3k9IjM1Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjQ3Mi44IiBjeT0iMzU3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iNTg4IiBjeT0iMzU3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSI0NzIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSIxMjcuMiIgY3k9IjQ3Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjI0Mi40IiBjeT0iNDcyLjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iMzU3LjYiIGN5PSI0NzIuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSI0NzIuOCIgY3k9IjQ3Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjU4OCIgY3k9IjQ3Mi41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iNTg3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iMTI3LjIiIGN5PSI1ODcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSIyNDIuNCIgY3k9IjU4Ny41IiByPSIxMiIvPgogIDxjaXJjbGUgY3g9IjM1Ny42IiBjeT0iNTg3LjUiIHI9IjEyIi8+CiAgPGNpcmNsZSBjeD0iNDcyLjgiIGN5PSI1ODcuNSIgcj0iMTIiLz4KICA8Y2lyY2xlIGN4PSI1ODgiIGN5PSI1ODcuNSIgcj0iMTIiLz4KPC9zdmc+");
}
.Visual .Square.Black::before {
	background-color: #000
}
.Visual .Square.Active::before {
	left: -30%;
	opacity: .5;
	top: -30%
}

/* Panel */
.Panel {
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
    box-shadow: inset 50px 50px 50px rgba(0,0,0,.4), inset -50px -50px 50px rgba(0,0,0,.4);
	color: #fff;
	height: 40dvh;
	max-height: 700px;
	min-height: 500px;
	overflow: hidden;
	position: relative;
	transition: all .1s
}
.Panel::before {
	background: rgba(0,0,0,.4);
	content: "";
	height: 120%;
	left: -10%;
	overflow: hidden;
	position: absolute;
	top: -10%;
	width: 120%
}
.Panel .Title.Solid {
    left: 50%;
    position: absolute;
    text-shadow: -3px -3px 0 #fff;
    text-stroke: 1px rgba(255,255,255,.5);
    -webkit-text-stroke: 1px rgba(255,255,255,.5);
    top: 35%;
    transform: translateX(-50%) translateY(0%);
	width: 90%
}
.Panel .Title.Solid {
    left: 50%;
    position: absolute;
    text-shadow: -3px -3px 0 #fff;
    text-stroke: 1px rgba(255,255,255,.5);
    -webkit-text-stroke: 1px rgba(255,255,255,.5);
    top: 35%;
    transform: translateX(-50%) translateY(0%);
	width: 90%
}
.Panel + .Gear {
	top: 120px
}
.Panel + .Gear + .Dotted {
	top: 90px
}

/* Layout */
.Grid {
	gap: 6%;
    margin: 0 auto;
	max-width: 1600px
}

/* Figure */
figure {
	position: relative;
	text-align: center
}
figure.Left,
figure.Right {
	margin: 0 -13%
}
figure img {
    aspect-ratio: 4 / 3;
	width: 100%
}

.Mask::before,
.Mask::after {
	background: #e6e6e6;
    clip-path: polygon(0 0, 100% 0, 100% 2px, 0 100%);
	content: "";
	height: 0;
	position: absolute;
	transition: 2s;
	width: 100%
}
.Mask::before {
	left: 0;
	top: -2px
}
.Mask::after {
	bottom: -2px;
	left: 0;
	transform: scale(-1, -1)
}
figure.Mask.Active::before,
figure.Mask.Active::after {
	height: 20%
}

/* Animation */
@keyframes fede {
	  0% { opacity: 0 }
	 90% { opacity: 0 }
	100% { opacity: 1 }
}
@keyframes fedeUp {
	  0% { opacity: 0; transform: translateY(10px) }
	 50% { opacity: 0; transform: translateY(10px) }
	100% { opacity: 1; transform: translateY(0) }
}

.Indicator {
	animation: fede 6s;
	position: fixed;
    right: 4%;
	scale: .8;
    top: 50%;
    transform: translateX(16px) translateY(-50%);
	z-index: 12
}
.Indicator li {
	list-style: none;
	margin: 0;
	padding: 0;
    position:relative;
	text-transform: uppercase
}
.Indicator li a {
	color: #fff;
    display: block;
	height: 18px;
	line-height: 1;
    padding: 11px 40px 11px 0;
	position: relative;
    text-align: right
}
.Indicator li a span:nth-child(1) {
	background: rgba(255,255,255,.4);
    border-radius: 100%;
	height: 8px;
	margin-top: -4px;
    position: absolute;
	right: 16px; 
	top: 50%;
    transition: .3s;
    width: 8px
}
.Indicator li a:hover span:nth-child(1),
.Indicator li.Active a span:nth-child(1) {
	background: rgba(255,255,255,1)
}
.Indicator li a span:nth-child(2) {
	display: none;
    font-size: 1.6rem;
	opacity: 0;
	pointer-events: none;
	position: absolute;
    right: 40px;
	top: 11px;
    transform: translateX(-10px);
    transition: .2s;
    white-space: nowrap
}
.Indicator li a:hover span:nth-child(2) {
    opacity: 1;
	transform: translateX(0)
}

.Button {
	background: rgba(255,255,255,.2);
	clear: both;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	height: 50px;
	line-height: 50px;
	margin: 4em auto;
	opacity: 0;
	padding: 0;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 220px
}
.Button a,
.Button span {
	display: inline-block;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%
}
.Button a:hover {
	background: #333;
	color: #fff;
	transition: .4s
}
.Button i {
	background: #333;
	display: block;
	height: 1px;
	position: absolute;
	right: -30px;
	top: 25px;
	width: 24%
}
.Button:hover i {
	background: #fff;
	right: 5px;
	transition: .4s
}
.Button i::before {
	border: 4px solid;
	border-color: transparent transparent #333 #333;
	content: '';
	position: absolute;
	right: -8px;
	top: -7px
}
.Button:hover i::before {
	border-color: transparent transparent #fff #fff;
	right: -2px
}
.Button a::before,
.Button a::after,
.Button span::before,
.Button span::after {
	background-color: #333;
	content: '';
	height: 100%;
	position: absolute;
	transition: all 2s ease-in;
	width: 100%
}
.Button a::before {
	left: 0;
	top: -100%;
	width: 1px
}
.Button a::after {
	bottom: -100%;
	right: 0;
	width: 1px
}
.Button span::before {
	height: 1px;
	left: -100%;
	top: 0
}
.Button span::after {
	bottom: 0;
	height: 1px;
	right: -100%
}
.Button.Active a::before { top: 0 }
.Button.Active a::after { bottom: 0 }
.Button.Active span::before { left: 0 }
.Button.Active span::after { right: 0 }

.More {
	font-size: .8em;
	margin: 2em 0 3em;
	overflow: hidden;
	padding-right: 24px;
	position: relative;
	text-transform: uppercase
}
.More:hover {
	color: #fff
}
.More::before {
	background: rgba(255,255,255,.2);
	border: 1px solid #fff;
	content: "";
	height: 18px;
	position: absolute;
	right: -2px;
	top: -3px;
	transform: translateX(100%);
	transition: all 2s ease-in;
	width: 18px
}
.More i {
	background-color: #fff;
	display: block;
	height: 1px;
	position: absolute;
	right: -5px;
	top: 7px;
	width: 10px
}
.More i::before {
	border: 2px solid;
	border-color: transparent transparent #fff #fff;
	content: '';
	position: absolute;
	right: -3px;
	top: -3px
}
a:hover .More::before {
	background: #333;
	transition: .4s
}
a:hover .More i,
.More:hover i {
	background: #fff;
	right: 4px;
	transition: .4s
}
a:hover .More i::before, 
.More:hover i::before {
	border-color: transparent transparent #fff #fff;
	right: -2px
}
.More.Active::before {
	transform: translateX(0)
}

/* Header Spine
------------------------------ */
.Logo {
	animation: fede 1s;
	left: 4%;
	mix-blend-mode: difference;
	position: fixed;
	transform: translateX(-5px);
	top: 2rem;
	width: 4.6rem;
	z-index: 20
}

.Menu {
	animation: fede 1s;
	cursor: pointer;
	height: 56px;
	margin-top: -19px;
	mix-blend-mode: difference;
	position: fixed;
	right: 4%;
	top: 3rem;
	width: 68px;
	z-index: 20
}
.Menu span,
.Menu span::before,
.Menu span::after {
	background-color: #fff;
	content: "";
	display: block;
	height: 1px;
    position: relative;
	top: 28px;
	transition: .3s .3s, transform .3s;
    width: 68px
}
.Menu span::before {
	top: -6px
}
.Menu span::after {
	top: 5px
}
.Open .Menu span {
	background-color: transparent
}
.Open .Menu span::before,
.Open .Menu span::after {
	transition: .3s, transform .3s .3s
}
.Open .Menu span::before {
	top: 0;
	transform: rotate(12deg)
}
.Open .Menu span::after {
	top: -1px;
	transform: rotate(-12deg)
}

header nav {
	box-sizing: border-box;
	color: #fff;
	height: 100%;
	padding: 12rem 6%;
	position: fixed;
	right: -100%;
	top: 0;
	transition: 1s;
	width: 100%;
	z-index: 15
}
header nav::before, 
header nav::after {
	content: "";
	height: 100%;
	position: fixed;
	right: 0;
	top: 0;
	transition: 1s;
	width: 100%;
	z-index: -1
}
header nav::before {
	background: #0001;
	display: none;
	opacity: 0
}
header nav::after {
	background: #000;
	opacity: .9;
	right: -100%
}
.Open header nav::before {
	display: block;
	opacity: 1
}
.Open header nav,
.Open header nav::after {
	right: 0
}
header nav ul {
	left: 50%;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
    text-transform: uppercase;
	top: 50%;
	transform: translateX(-50%) translateY(-50%)
}
header nav li a {
	color: #fff;
	cursor: pointer;
	display: inline-block;
	padding: .7rem 0;
	position: relative
}
header nav li a:hover {
	color: #fff
}
header nav li a::after {
	background: #fff;
	bottom: 8px;
	content: '';
	height: 1px;
	left: 0;
    position: absolute;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .3s;
    width: 100%
}
header nav li a:hover::after {
	transform: scale(1, 1);
	transform-origin: left top
}

.Scroller {
	animation: fede 1s;
	bottom: 1rem;
	color: #fff;
	cursor: auto;
	display: flex;
	font-size: .67em;
	font-weight: 700;
	left: 4%;
	letter-spacing: 0.2em;
	line-height: 6px;
	mix-blend-mode: difference;
	padding: 0 20px 210px;
	position: fixed;
	text-decoration: none;
	text-transform: uppercase;
	transform: translateX(-20px);
	transition: 1s;
	writing-mode: vertical-lr;
	z-index: 10
}
.Scroller:hover {
	color: #fff;
}
.Scroller::before,
.Scroller::after {
	bottom: 0;
	content: "";
	height: 205px;
	left: 20px;
	position: absolute;
	width: 1px
}
.Scroller::before {
	background: #fff2
}
.Scroller::after {
	animation: scrollDown 4s cubic-bezier(1, 0, 0, 1) infinite;
	background: #fff
}
@keyframes scrollDown {
	  0% { transform: scale(1, 0); transform-origin: 0 0 }
	 49% { transform: scale(1, 1); transform-origin: 0 0 }
	 50% { transform: scale(1, 1); transform-origin: 0 100% }
	100% { transform: scale(1, 0); transform-origin: 0 100% }
}
body.Active .Scroller {
	padding: 210px 20px 0
}
body.Active .Scroller::before,
body.Active .Scroller::after {
	bottom: 60px
}
body.Active .Scroller::after {
	animation: scrollTop 4s cubic-bezier(1, 0, 0, 1) infinite
}
@keyframes scrollTop {
	  0% { transform: scale(1, 0); transform-origin: 0 100% }
	 49% { transform: scale(1, 1); transform-origin: 0 100% }
	 50% { transform: scale(1, 1); transform-origin: 0 0 }
	100% { transform: scale(1, 0); transform-origin: 0 0 }
}

/* Main
------------------------------ */
main {
	background: #e6e6e6;
	overflow: hidden
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main li,
main dt,
main dd,
main p {
	opacity: 0
}
main h1.Active,
main h2.Active,
main h3.Active,
main h4.Active,
main h5.Active,
main h6.Active,
main li.Active,
main dt.Active,
main dd.Active,
main p.Active,
main .Button.Active {
	animation: fedeUp 1.4s;
	opacity: 1
}
main section {
	padding: 20% 0;
	position: relative
}
main section:nth-child(1) {
	padding-top: 0
}
main section::before,
main section::after {
	background-position: 50%;
	background-repeat: repeat-y;
	background-size: 100% auto;
	content: "";
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -2
}
main section::after {
	background-image: url(image/textured.png);
	z-index: -1;
}
main section > h1,
main section > h2,
main section > h3,
main section > h4,
main section > h5,
main section > p,
main section > ul,
main section > div,
main section > nav,
main section > form,
main section > blockquote {
	margin-right: auto;
	margin-left: auto;
	padding: 0 10%
}
main nav  {
	overflow: hidden;
	margin: 4% auto
}
main nav > :nth-child(1) {
	float: left;
	padding: 2% 0
}
main nav > :nth-child(2) {
	float: right;
	padding: 2% 0
}

.Content {
	overflow: hidden;
	max-width: 1000px
}

/* Home
------------------------------ */
.Bright,
.Bright a {
	color: #fff
}
.Bright .Button i::before {
	border-color: transparent transparent #fff #fff;
}
.Bright .Button i,
.Bright .Button a::before,
.Bright .Button a::after,
.Bright .Button span::before,
.Bright .Button span::after {
	background: #fff;
}
.Bright .Solid {
	text-shadow: -3px -3px 0 #fff;
	text-stroke: 1px rgba(255,255,255,.5);
	-webkit-text-stroke: 1px rgba(255,255,255,.5)
}

/* Contact Form 7
------------------------------ */
ul.List {
	box-sizing: border-box;
	list-style: none;
	margin: 6rem 0;
	overflow: hidden;
	padding: 0;
	width: 100%
}
.wpcf7 .form_row,
ul.List li {
	border-top: 1px solid #ccc;
	box-sizing: border-box;
	display: table;
	padding: 2rem 0;
	width: 100%
}
ul.List li > :nth-child(2n+1) {
	font-weight: bold;
	margin-bottom: 1rem
}
ul.List li time,
ul.List li span {
	display: block
}
ul.List li span {
	color: #666;
	display: block;
	text-align: right
}
.wpcf7 .form_label label {
	padding-left: 50px;
	position: relative
}
.wpcf7 input[type=text],
.wpcf7 input[type=tel],
.wpcf7 input[type=email],
.wpcf7 textarea {
  font-family: inherit;
  font-weight: inherit
}
.wpcf7 .submit-btn {
	text-align: center
}
.wpcf7 input[type='submit'] {
	margin: auto;
	max-width: 300px;
	min-width: 200px;
	padding: 18px;
	width: 80%
}
.wpcf7 .form_label label::after {
	background: #999;
	border-radius: 2px;
	box-sizing: border-box;
	color: #fff;
	content: "任意";
	display: block;
	font-size: 11px;
	left: 0;
	margin: 0;
	padding: 0 5px;
	position: absolute;
    text-align: center;
    top: 0;
	width: 36px
}
.wpcf7 .form_label.is-required label::after {
	background: #000;
	content: "必須"
}
.wpcf7 .your-age input {
	width: 20%
}
.wpcf7 .row-privacy .form_body,
.wpcf7 .row-privacy + p {
	text-align: center;
	width: 100% !important
}
.wpcf7 .row-privacy .form_body a {
	text-decoration: underline
}
@media only screen and (min-width: 844px) {
	ul.List li time,
	ul.List li div:nth-child(2n+1) {
		display: table-cell;
		vertical-align: middle;
		width: 16%
	}
	ul.List li div:nth-child(2n) {
		display: table-cell;
		width: 84%
	}
	.wpcf7 .form_label {
		display: table-cell;
		vertical-align: middle;
		width: 30%
	}
	.wpcf7 .form_body {
		display: table-cell;
		width: 70%
	}
}
@media only screen and (min-width: 1240px) {
	ul.List li span {
		float: right;
		width: 20%
	}
}

/* Index.php
------------------------------ */
.archive .Logo,
.archive .Menu,
.archive .Scroller {
	mix-blend-mode: initial
}
.archive main {
	background: transparent
}
.archive main section {
	padding: 30% 0
}
.archive .Mask::before,
.archive .Mask::after {
	background: #121415
}
.archive main .Visual .Gear {
	top: 80px
}
.archive main .Visual .Dotted {
	top: 50px
}
.archive main .Visual .DiagonalTop svg path:nth-child(2){
	fill: #1f4799
}
.archive footer .Visual .DiagonalTop svg path:nth-child(2){
	fill: #121415
}
.Post h3 {
	height: 20px;
	line-height: 20px;
	margin-top: 1rem;
	overflow: hidden
}
.Post p {
	font-size: 1.4rem;
	max-height: 80px;
	overflow: hidden
}
.Post figure.Mask {
	margin: 0 -13%
}
.Post figure + p {
	margin-top: -5%;
	position: relative
}
@media only screen and (min-width: 844px) {
	.archive main section {
		padding: 20% 0 10%
	}
	.archive main .Visual .Gear {
		top: 190px
	}
	.archive main .Visual .Dotted {
		top: 180px
	}
	.Post.Grid {
		gap: 0 6%
	}
	.Post figure.Mask {
		margin: 0
	}
	.Post .Mask::before {
		transform: scale(-1, 1)
	}
	.Post .Mask::after {
		transform: scale(1, -1)
	}
	.Post > div:nth-child(2n) {
		margin: 32% 0 0
	}
}
@media only screen and (min-width: 1240px) {
	.Post.Grid {
		align-items: start;
		grid-template-columns: 1fr 1fr 1fr
	}
	.Post > div:nth-child(1),
	.Post > div:nth-child(4),
	.Post > div:nth-child(7),
	.Post > div:nth-child(10) {
		margin: 0 0 0 !important
	}
	.Post > div:nth-child(2),
	.Post > div:nth-child(5),
	.Post > div:nth-child(8),
	.Post > div:nth-child(11) {
		margin: 17% 0 0 !important
	}
	.Post > div:nth-child(3),
	.Post > div:nth-child(6),
	.Post > div:nth-child(9),
	.Post > div:nth-child(12) {
		margin: 34% 0 0 !important
	}
}

/* Page.php
------------------------------ */
#particles {
	animation: fade 2s;
	height: 100%;
	left: 0;
    overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%
}

.gmap {
	height: 0;
	overflow: hidden;
	padding: 0 0 80%;
	position: relative
}
.gmap iframe {
	height: 100%;
	left: 0;
    position: absolute;
	top: 0;
	width: 100%
}
.page-id-70 .Note {
	margin-bottom: 4rem;
	text-align: center
}
.page-id-70 .Note > * {
	margin-top: 0
}
@media only screen and (min-width: 844px) {
	.page-id-296 .Grid {
		gap: 0 6%
	}
	.page-id-296 .Grid :nth-child(1)::before,
	.page-id-296 .Grid :nth-child(5)::before,
	.page-id-296 .Grid :nth-child(9)::before {
		transform: scale(-1, 1)
	}
	.page-id-296 .Grid :nth-child(1)::after,
	.page-id-296 .Grid :nth-child(5)::after,
	.page-id-296 .Grid :nth-child(9)::after {
		transform: scale(1, -1)
	}
}

/* Single.php
------------------------------ */
.single main section:nth-child(1) {
	padding-top: 10%
}
.single main .Visual .DiagonalTop svg path:nth-child(2) {
	fill: #121415
}

/* 404.php
------------------------------ */
.error404 main section {
	padding-top: 20%
}
.error404 main .Visual .DiagonalTop svg path:nth-child(2) {
	fill: #121415
}

/* Footer
------------------------------ */
footer {
	box-sizing: border-box;
	height: 80%;
	overflow: hidden;
	padding: 50% 10% 30%;
	position: relative
}
footer::before,
footer::after {
	content: "";
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1
}
footer::before {
	background-image: url(image/conference-room.jpg);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover
}
footer::after {
	background: rgba(0,0,0,.7)
}
footer h4 {
	border-bottom: 1px solid rgba(255,255,255,.5);
	font-size: 1.6rem;
	margin: 0 auto -1.5rem;
	padding: 0 0 .5rem
}
footer img {
	margin-bottom: 8rem;
	width: 70%
}
footer span {
	display: block
}
footer .Tel {
	background: url(image/tel.png) no-repeat 0 50%;
	background-size: 40px;
	font-size: 1.2em;
	line-height: 1.2em;
	padding: 1em 40px .5em
}
footer .Notice {
	display: block;
	font-size: .8rem;
	text-align: center
}
footer .Visual .DiagonalBottom svg {
	height: 0 !important
}
.Copyright {
	background: rgba(0,0,0,.6);
	bottom: 0;
	box-sizing: border-box;
	font-size: 1rem;
	left: 0;
	letter-spacing: normal;
	padding: 20px 30px;
	position: absolute;
	text-align: right;
	width: 100%
}

/* Device
------------------------------ */
@media only screen and (min-width: 844px) {
	body {
		font-size: 1.5rem
	}
	.Title,
	h2.Title.Neon{
		font-size: 4.8rem
	}
	.Visual .Panel {
		height: 60dvh
	}
    .Visual .DiagonalTop.Active svg,
	.Visual .DiagonalBottom.Active svg {
		height: 16vh
	}
	.Visual .Gear {
		left: 100px;
		scale: 1;
        top: 100px
	}
	.Visual .Dotted {
		left: 90px;
		scale: .7;
		top: 90px
	}
	.Visual .Square {
		bottom: 0;
        right: 6%;
		scale: .7
	}
	.Panel + .Gear {
		top: 190px
	}
	.Panel + .Gear + .Dotted {
		top: 180px
	}
	.Grid {
		align-items: center;
		display: grid;
		grid-template-columns: 1fr 1fr
	}
	.Grid.Opposite > :nth-child(1n) {
		order: 2
	}
	.Grid.Opposite > :nth-child(2n) {
		order: 1
	}
	figure.Left {
		margin: 0 0 0 -27%
	}
	figure.Right {
		margin: 0 -27% 0 0
	}
	.Indicator  {
		scale: 1
	}
	.Indicator li a span:nth-child(2) {
		display: block
	}
	header nav li {
		font-size: 3rem;
		line-height: 5rem
	}
	.Logo {
		width: 8rem;
		top: 3rem
	}
	.LogoType {
		font-size: 4.8rem
	}
	main section {
		padding: 15% 0 10%
	}
	footer {
		padding: 30% 20% 10%
	}
	footer span {
		display: inline
	}
}
@media only screen and (min-width: 1024px) {
	body {
		font-size: 1.6rem
	}
	figure.Left {
		margin-left: -34%
	}
	figure.Right {
		margin-right: -34%
	}
	.LogoType {
		font-size: 4.8rem
	}
	main section {
		padding-top: 10%
	}
	main section > h1,
	main section > h2,
	main section > h3,
	main section > h4,
	main section > h5,
	main section > p,
	main section > ul,
	main section > div,
	main section > nav,
	main section > form,
	main section > blockquote,
	aside section > * {
		padding: 0 12%
	}
}