*, *::before, *::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
/**** body ****/
body {
	font-family: "Noto Sans JP", sans-serif;
	color:#333;
	text-align:center;
	font-size:16px;
	line-height:1.75;
	background: #fff;
}
.zh{
	font-family: "Noto Sans TC", sans-serif !important;
}
/**** header ****/
#track-record,#service,#why-choose,#company{
  scroll-margin-top:3.8em;
}
header{
	position: fixed;
	width: 98%;
	margin: 1em;
	padding: 1em 2em;
	z-index: 100;
	display: flex;
    justify-content: space-between;
    align-items: center;
    background: #003B83;
    color: #fff;
    border-radius: 4.5em;
    opacity: 98%;
   	transition: .3s;
}
.logo{
	height: 40px;
	transition: .3s;
}
header .logo{
	transform: translateY(-3px)
}
header.is-animation{
	margin: .5em 1em;
	padding: .5em 2em;
}
header.is-animation .logo{
	height: 36px;
}
header a:not(.btn){
	color: #fff;
	position: relative;
}
header a:not(.btn):after{
	content: "";
	position: absolute;
	bottom: -.25em;
	left: 0;
	height: 1px;
	width: 0;
	background:#fff;
	transition: .3s;	
}
header a:hover:after{
	width: 100%;
}
header a.btn{
	color: #003B83 !important;
}
header a:has(img):hover:after{
	width:0;
}
.globalNav li{
	display: inline-block;
	padding:0 .5em;
	position: relative;
	margin-left: 0;
}
.globalNav li:has(.lang){
	padding: 0;
}
.globalNav li:has(.lang):after{
	content: "｜";
}
/**** footer ****/
footer{
	font-size:.75em;
	background: #FAFBFD;
	color: #666;
	padding: 1em 2em;
	line-height: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	vertical-align: bottom;
}
/**** cover ****/
.cover{
	text-align: left;
	background: url(../img/cover.png) right bottom/48% no-repeat,url(../img/bg_cover01.png) center top/100% no-repeat,url(../img/bg_cover02.png) center bottom/100% no-repeat;
}
.cover-text{
	padding: 15% 10%;
	color: #003B83;
}
/**** scroll ****/
.slick-list {
  margin: 0 -.5em;
}
.slick-slide {
  margin: 0 .5em;
}
/**** contents ****/
.common-page{
	padding: 8em 0 3em;
}
section{
	width: 100%;
}
.inner{
	max-width: 1200px;
	padding:3em;
	margin: 0 auto;
	text-align: center;
}
.innerS{
	max-width: 1024px;
	padding:3em;
	margin: 0 auto;
	text-align: left;
}
/**** flexbox ****/
.flexbox{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.flexCenter{
	align-items: center;
}
/**** grid ****/
.grid2{
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
}
.grid2-fix{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3%;
}
.grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
}
.grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em 2em;
}
.grid-align-center{
	align-items: center;
}
/**** background ****/
.bgLightBlue{
	background: #FAFBFD;
}
.bg01{
	background: url(../img/bg01.jpg) center center/cover no-repeat;
}
/**** color ****/
.white{
	color: #FFF;
}
.gray{
	color: #666;
}
.blue{
	color: #003B83;
}
/**** box ****/
.box-white{
	background: rgba(255,255,255,.9);
	border-radius: 1em;
	padding: 1.5em;
}
.box-blue{
	background: #003B83;
	border-radius: 6em;
	padding: 1.5em;
	text-align: center;
	color: #fff;
}
.box-light-blue{
	background: #FAFBFD;
	border-radius: 1em;
	padding: 1.5em;
}
/**** headline ****/
h1,h2,h3,h4{
	line-height: 1.25;
	text-align: left;
}
h1{
	font-size: 4.25em;
	margin-bottom: .25em;
	color: #003B83;
	text-shadow:2px 2px 10px #fff ,
				-2px 2px 10px #fff ,
				2px -2px 10px #fff ,
				-2px -2px 10px #fff;
}
h1 .sub-title{
	font-weight: normal;
	font-size: .36em;
	margin-top: 1em;
	line-height: 1.75; 
	display: block;
}
h2{
	font-size: 2em;
	margin-bottom: 1.5em;
	text-align: center;
	color: #003B83;
}
h2 span{ 
	margin-top: 1em;
	line-height: 1.75; 
	display: block;
}
h3{
	font-size: 1.25em;
	margin-bottom: .5em;
}
#track-record h3{
	font-size: 1.75em;
	margin-bottom: .25em;
}
h4{
	font-size: 1.1em;
	margin-bottom: .25em;
}
.borderBottom{
	border-bottom: #C9C9C9 1px solid;
}
/**** inline ****/
p{
	margin-bottom:1em;
	line-height:1.75;
	text-align: left;
}
p:last-child{
	margin-bottom:0;
}
li{
	margin-left: 1em;
	text-align: left;
}
/**** link ****/
a{
	color:#003B83;
	-webkit-transition:.3s;
	-o-transition:.3s;
	transition:.3s;
	position: relative;
}
a:visited,a:active,a:link{
	text-decoration:none;
	color:#003B83;
}
a:not(:has(img)):after{
	content: "";
	position: absolute;
	bottom: -.25em;
	left: 0;
	height: 1px;
	width: 0;
	background:#003B83;
	transition: .3s;	
}
a:hover{
	opacity: .7;
}
a:hover:after{
	width: 100%;
	opacity: .7;
}
/**** table ****/
table{
	width: 100%;
	border-top:#C9C9C9 1px solid;
	text-align: left;
}
th,td{
	padding: .8em 0;
	border-bottom: #C9C9C9 1px solid; 
}
th{
	font-weight: normal;
	padding-right: 1em;
	width: 5em;
}
.company-overview-en th{
	width: 10.5em;
}
/**** Q&A ****/
.qa {
	width: 100%;
	text-align: left;
	background: #F7F9FB;
	padding: 0 1.5em;
	margin-bottom: 1em;
	overflow: hidden;
}
.qa summary {
	cursor: pointer;
	padding: 1em 1.5em 1em 0;
	font-weight: bold;
	position: relative;
	list-style: none;
}
.qa summary::marker {
  display: none;
}
.qa summary::after {
  content: "";
  position: absolute;
  right:0em;
  top: 50%;
  height: 1em;
  width: 1em;
  background: url(../img/icon_arrow.svg)center center/contain no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}
.qa[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}
.qa .answer{
  padding: 1em 1.5em 1em 0;
  border-top: #C9C9C9 1px solid;
  animation: fadeIn 0.5s ease;
}
.qa .answer p{
	margin-bottom: .5em;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
/**** form ****/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea{
	font-size:1.25em;
	width:100%;
	padding:.5em;
	margin:.25em;
	border:none;
	border: #C9C9C9 1px solid;
	border-radius: .5em;
	outline:none;
	background: #F7F9FB;
	transition:.3s;
}
select{
	font-size:1em;
	padding:.75em .5em;	
}
textarea{
	height:10em;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus{
	box-shadow:0 0 0 3px #A8EBFF;
}
/**** button ****/
.btn{
	display: inline-block;
	background: #fff;
	font-weight: bold;
	padding: .25em 1.25em;
	transition: .5s;
	color: #003B83;
	font-weight: bold;
	border: #003B83 1px solid;
	border-radius: 1.5em;
}
.btn:after{
	content: none;
}
.btn:hover,.wpforms-submit:hover{
	color: #fff;
	background: #90A5C4;
	border: #90A5C4 1px solid;
	opacity: 1;
}
/**** wpforms ****/
.wpforms-submit-container{
	text-align: center !important;
}
.wpforms-submit{
	display: inline-block !important;
	background: #fff !important;
	font-weight: bold !important;
	padding: .25em 1.25em !important;
	transition: .5s !important;
	color: #003B83 !important;
	font-weight: bold !important;
	border: #003B83 1px solid !important;
	border-radius: 1.5em !important;
	font-size: 1.25em !;
}
.wpforms-submit:hover{
	color: #fff !important;
	background: #90A5C4 !important;
	border: #90A5C4 1px solid !important;
	opacity: 1 !important;
}
/**** text-align ****/
.alignCenter,.alignCenter p{text-align: center;}
/**** margin ****/
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mt3 { margin-top: 3em; }
.mb05{ margin-bottom: .5em; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.mb3 { margin-bottom: 3em; }
.ml05 { margin-left: 0.5em; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.mr1 { margin-right: 1em; }
/**** padding ****/
.pb025 { padding-bottom: .25em; }
.pb05 { padding-bottom: .5em; }
/**** font-size ****/
.fsS5 { font-size: 0.4em; }
.fsS4 { font-size: 0.5em; }
.fsS3 { font-size: 0.6em; }
.fsS2 { font-size: 0.75em; }
.fsS  { font-size: 0.9em; }
.fsL  { font-size: 1.25em; }
.fsL2 { font-size: 1.5em; }
.fsL3 { font-size: 2em; }
.fsL4 { font-size: 2.5em; }
/**** font-weight ****/
.fwNormal{ font-weight:normal; }
.fwBold{ font-weight:bold; }
/**** marker ****/
.bgYellow{
	background: linear-gradient(transparent 60%, #ff6 60%);
}
/**** img ****/
img,svg,video,input[type="image"]{
	max-width: 100%;
	height: auto;
	width:auto;
	transition:.3s;
	vertical-align: bottom;
}
input[type="image"]:hover{
	opacity:.7;
}
/**** media queries ****/
.SPonly{ display: none;}

@media screen and (max-width:1280px){
/**** body ****/
body{font-size: 14px;}
/**** header ****/
.menu-btn {
	width: 3em;
	height:3em;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 2em;
	margin: auto;
	padding: 1em;
	z-index:999;
	transition: .3s;
}
.menu-btn span {
    width: 3em;
    height: 1px;
    position: absolute;
    left: 0;
	background: #fff;
    transition: .5s;
}
.menu-btn span:first-child {
    top: 20%;
}
.menu-btn span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
.menu-btn span:last-child {
    bottom: 20%;
}
/* clicked menu button */
.open .menu-btn span:first-child {
    transform: translateY(.9em) rotate(45deg);
    background: #003B83;
}
.open .menu-btn span:nth-child(2) {
    opacity: 0;
}
.open .menu-btn span:last-child {
    transform: translateY(-.9em) rotate(-45deg);
    background: #003B83;
}
/**** open nav ****/
.open .globalNav{
	opacity:1;
	right:0;
}
.globalNav{
	position:fixed;
	opacity: 0;
	top:0;
	height: 100vh;
	right:-500px;
	background:#fff;
	box-shadow:0 0 30px rgba(0,0,0,.1); 
	padding:6em .5em 2em;
	overflow: scroll;
	z-index:10;
	-webkit-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
.globalNav li{
	font-size: 1.5em;
	display:block;
	text-align: left;
	padding:.5em 1em;
	border-top: 1px solid #eee;
}
header a:not(.btn){
	color: #003B83 !important;
	position: relative;
}
/**** other ****/
.cover-text{
	padding: 15% 3em;
}
h1{ font-size: 5.25vw;}
h2{ font-size: 1.75em;}
}

@media screen and (max-width:765px){
/**** header ****/
header{
	position: fixed;
	width: 96%;
	margin: 1em .5em;
	padding: 1em 1.5em;
	font-size: .75em;
}
.logo{
	height: 30px;
	transition: .3s;
}
header.is-animation{
	margin: .5em;
	padding: .75em 1.5em;
}
header.is-animation .logo{
	height: 24px;
}
.menu-btn {
	right: 2em;
}
/**** footer ****/
footer{
	padding: 1em 2em;
	display: block;
	text-align: left;
}
footer div:nth-child(1){
	margin-bottom: 1em;
}
/**** other ****/
.cover{
	text-align: left;
	background: url(../img/cover.png) right bottom/80% no-repeat,url(../img/bg_cover01.png) center top/100% no-repeat,url(../img/bg_cover02.png) left bottom/70% no-repeat;
}
.cover-text{
	padding: 25% 1em 70%;
}
.common-page{
	padding: 5em 0 1em;
}
.inner,.innerS{
	padding:3em 2em;
}
h1{ font-size: 10.8vw;}
.box-blue{ border-radius: 1em;}
.grid2 {grid-template-columns: repeat(1, 1fr);}
.grid3 {grid-template-columns: repeat(1, 1fr);}
.fsS4{font-size: 14px;}
.SPonly{ display: block;}
.PConly{ display: none;}
}