@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lexend+Tera&text=0123456789,&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500&text=aeftQ&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Noto+Sans+JP&display=swap');
/*reset-------------------------------------------------*/
body,div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd {
  margin: 0;
  padding: 0;
	font-weight:inherit;
	font-size:inherit;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: none;
  vertical-align: top;
}

header,section,article,aside,footer,nav {
 display: block;
}

a {
  text-decoration: none;
  cursor: pointer;
  display: block;
	color:inherit;
}

ul,li,ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
/*-------------------------------------------------reset*/


/*common-------------------------------------------------*/
html {
  font-size: 10px;
}

body {
	font-size:1.6em;
  color: #333;
	font-family: 'Font Awesome 5 Free', 'Montserrat Alternates', 'Montserrat', 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  line-height: 2;
	letter-spacing:.05em;
	background:#fff;
}

*::selection {
	background:#0f344d;
	color:#fff;
}
/*-------------------------------------------------common*/


/*------------------------------------------------------------------------------------------------
  header
--------------------------------------------------------------------------------------------------*/
header {
	height:100px;
	position:absolute;
	top:0;
	width:100%;
	z-index:9998;
}

header .logo {
	position:absolute;
	top:50%;
	left:20px;
	transform:translateY(-50%);
}

header.index .logo img:nth-child(2) {
	display:none;
}

header.index.scroll .logo img:nth-child(1) {
	display:none;
}

header.index.scroll .logo img:nth-child(2) {
	display:block;
}

header nav {
	position:absolute;
	top:50%;
	right:20px;
	transform:translateY(-50%);
}

header nav > ul {
	display:flex;
}

header nav > ul > li {
	padding:0 2em;
}

header nav > ul > li > a {
	position:relative;
	text-align:center;
	font-weight:bold;
	line-height:normal;
	letter-spacing:.1em;
}

header.index nav > ul > li > a {
	color:#fff;
}

header.index.scroll nav > ul > li > a {
	color:#333;
}

header nav > ul > li > a::after {
	content:'';
	position:absolute;
	bottom:-1em;
	right:0;
	width:0;
	height:2px;
	background:#ff8332;
	transition:.3s;
}

header nav > ul > li:hover > a::after,
header nav > ul > li.now > a::after {
	left:0;
	width:100%;
}

header nav > ul > li > a > span {
	font-size:.625em;
	font-weight:normal;
}

header nav > ul > li > ul {
	font-size:.875em;
	position:absolute;
	padding-top:33px;
	white-space:nowrap;
	visibility:hidden;
	opacity:0;
	transition:.3s opacity;
}

header nav > ul > li:hover > ul {
	visibility:visible;
	opacity:1;
}

header nav li li {
	position:relative;
}

header nav li li a {
	padding:1em 3em 1em 1em;
	background:#27485e;/*0.9*/
	color:#fff;
}

header nav li li a::before {
	content:'';
	background:rgba(255,255,255,.1);
	position:absolute;
	width:0;
	height:100%;
	top:0;
	right:0;
	transition:.3s width;
}

header nav li li:hover > a::before {
	width:100%;
	left:0;
}

header nav li li a::after {
	content:'\f054';
	font-weight:bold;
	position:absolute;
	right:1em;
	transition:.3s right;
}

header nav li li a[target="_blank"]::after {
	content:'\f35d';
}

header nav li li:hover > a:not([target="_blank"])::after {
	right:.2em;
}

header nav li li ul {
	position:absolute;
	top:0;
	left:100%;
	visibility:hidden;
	opacity:0;
	transition:.3s opacity;
}

header nav li li:hover ul {
	visibility:visible;
	opacity:1;
}

header nav li li li a {
	background:#3f5d71;/*0.8*/
}

header.scroll {
	height:70px;
	background:#fff;
	box-shadow:0 1px 10px rgba(0,0,0,.1);
	transition:.3s;
}

header.scroll .logo img {
	height:40px;
}

header.scroll nav > ul > li > ul {
	padding-top:18px;
}

/*------------------------------------------------------------------------------------------------
  contents
--------------------------------------------------------------------------------------------------*/
#loading {
	background:#0f344d;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:9999;
}

#loading span {
	opacity:0;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	animation:loading-fade 2s forwards;
}

@keyframes loading-fade {
	50%{opacity:0}
	100%{opacity:1}
}

#loading span p {
	font-size:1.25em;
	font-weight:bold;
	letter-spacing:.15em;
	font-family:  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
	color:#fff;
	width:6.5em;
	overflow:hidden;
	animation:loading 3s ease infinite;
}

#loading span p::after {
	content:'...';
}

@keyframes loading {
	0%{width:5.3em}
	25%{width:5.3em}
	50%{width:5.7em}
	75%{width:6.1em}
	100%{width:6.5em}
}

.container {
	max-width:1080px;
	margin:0 auto;
}

.main {
	margin-top:100px;
	padding:5em 0;
	border-bottom:solid 1px #0f344d;
	position:relative;
}

#index .main {
	height:100vh;
	margin:0;
	padding:0;
	background:none;
}

.main .keyword,
.main h1 {
	display:none;
	color:#0f344d;
}

.main .keyword {
	position:absolute;
	top:50%;
	left:10%;
	transform:translateY(-50%);
	color:#fff;
}

.main .keyword span,
.main h1 span {
	font-weight:bold;
	line-height:normal;
	display:inline-block;
	position:relative;
	overflow:hidden;
	animation:keyword-text 1.6s cubic-bezier(0.2, 1, 0.2, 1) forwards;
}

@keyframes keyword-text {
	0% { color:transparent; }
	49% {color:transparent; }
	50% {color:inherit; }
	100% {color:inherit; }
}

.main h1 .en {
	font-size:3em;
	letter-spacing:.1em;
}

.main .keyword .en {
	font-size:4em;
	letter-spacing:.3em;
	text-transform:uppercase;
}

.main h1 .ja {
	font-size:.875em;
}

.main .keyword .ja {
	font-size:1.5em;
	letter-spacing:.3em;
	margin-top:1em;
}

.main .keyword span::before,
.main h1 span::before {
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#0f344d;
	animation:keyword-cover 1.6s cubic-bezier(0.2, 1, 0.2, 1) forwards;
}

.main .keyword span::before {
	background:#fff;
}

@keyframes keyword-cover {
	0% { left:-100%;}
	15% { left:-100%;}
	50% { left:0; }
	100% { left:100%; display:none;}
}

div:not(#index) .content {
	padding:6em 0;
	position:relative;
	min-height:calc(100vh - 100px - 305px - 234px);
}

#index  .content > div {
	padding:6em 0;
}

div:not(#index) .content .container > div {
	padding:6em 0;
}

div:not(#index) .content .container > div:first-child {
	padding-top:0;
}

.fadein {
	opacity:0;
	transform:translate(0,3em);
	transition:.8s;
}

.fadein.scrollin {
	opacity:1;
	transform:translate(0,0);
}

.more {
	padding:1em 3em;
	text-align:center;
	font-weight:bold;
	margin:0 auto;
	display:inline-block;
	line-height:normal;
	background:#0f344d;
	color:#fff;
	position:relative;
	left:50%;
	transform:translateX(-50%);
	transition:.3s;
	z-index:0;
}

.more::before {
	content:'';
	position:absolute;
	top:0;
	right:0;
	width:0;
	height:100%;
	background:rgba(255,255,255,.9);
	transition:.3s;
	z-index:-1;
}

@media all and (min-width: 1025px) {
	.more:hover {
		color:#0f344d;
	}
	
	.more:hover::before {
		left:0;
		width:100%;
	}
}

.bread {
	display:flex;
	justify-content:flex-end;
}

.bread > li {
	font-size:.75em;
	position:relative;
	cursor:default;
}

.bread > li:not(:last-child)::after {
	content:'/';
	margin:0 1em;
}

.bread a, .bread p {
	display:inline-block;
}

.submenu {
	width:1080px;
	display:flex;
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
}

.submenu li {
	border-top:solid 1px;
	border-left:solid 1px;
}

.submenu li:last-child {
	border-right:solid 1px;
}

.submenu li a {
	padding:1em 3em 1em 2em;
	position:relative;
	line-height:normal;
	cursor:pointer;
}

.submenu li a::before {
	content:'';
	width:0;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	background:rgba(15, 52, 77, .1);
	transition:.3s;
}

@media all and (min-width: 1025px) {
	.submenu li a:hover::before {
		width:100%;
		left:0;
	}
}

.submenu li a::after {
	content:'\f054';
	font-size:.875em;
	font-weight:bold;
	position:absolute;
	right:1em;
	top:50%;
	transform:translateY(-50%);
	transition:.3s;
}

.submenu li a:hover::after {
	right:.2em;
}

h2 {
	font-size:2.5em;
	font-weight:bold;
	line-height:normal;
	letter-spacing:.1em;
	color:#0f344d;
}

div:not(#index):not(.index) .content h2 {
	margin-bottom:1em;
}	

div:not(#index):not(.index) .content h2::first-letter {
	color:#ff8332;
}

h2 span {
	font-size:.35em;
	margin:0 1em;
}

h3 {
	font-size:1.5em;
	font-weight:bold;
	color:#0f344d;
}

div:not(#index):not(.index) .content h3 {
	display:flex;
	align-items:center;
}

div:not(#index):not(.index) .content h3::after {
	content:'';
	display:block;
	height:1px;
	background:#0f344d;
	flex:1;
	margin-left:1em;
}

.application ul,
.manual ul {
	margin-left:1em;
}

.application li,
.manual li {
	margin-top:1em;
}

.pdf {
	line-height:normal;
	transition:.3s;
}

.pdf:hover,
.online:hover {
	opacity:.7;
}

.pdf::before,
.online::before {
	content:'\f1c1';
	color:#ff3347;
	font-size:1.5em;
	margin-right:.5em;
	vertical-align:middle;
}

.pdf + p {
	margin-left:2em;
}

.red {
	color:#f01405;
}

.tax-in {
	text-align:right !important;
	letter-spacing:normal;
	font-family:'Lexend Tera', sans-serif;
}


/*------------------------------------------------------------------------------------------------
  footer
--------------------------------------------------------------------------------------------------*/
footer {
	text-align:center;
	background:#0f344d;
	color:#fff;
	padding:3em 0;
	position:relative;
}

footer .logo {
	display:inline-block;
}

footer ul {
	display:flex;
	justify-content:center;
	margin:3em auto 1em;
}

footer li {
	border-left:solid 1px;
}

footer li:last-child {
	border-right:solid 1px;
}

footer li a {
	padding:0 1em;
	font-size:.75em;
	transition:.3s;
}

footer li a:hover {
	opacity:.7;
}

.pagetop {
	position:fixed;
	right:20px;
	z-index:9999;
	cursor:pointer;
}

.pagetop.meat {
	cursor:url(../image/cursor.cur), pointer;
}

.pagetop .eye-close,
.pagetop .tail {
	position:absolute;
	top:0;
	left:0;
}

.pagetop .eye-close {
	animation:10s eye-close ease infinite;
}

@keyframes eye-close {
	0% {opacity:0}

	9% {opacity:0}
	10% {opacity:1}
	11% {opacity:0}

	30% {opacity:0}
	31% {opacity:1}
	33% {opacity:0}

	90% {opacity:0}
	91% {opacity:1;}
	92% {opacity:0;}

	100% {opacity:0;}
}

.pagetop .tail {
	z-index:-1;
}

.pagetop:hover .tail {
	animation:.5s tail infinite;
	transform-origin:35% 100%;
}

@keyframes tail {
	0% {transform:rotate(0deg);}
	50%{transform:rotate(-5deg);}
}