@charset "UTF-8";
html,body{

}
body.menu-open {
}

body > section{
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.pc{
display: block;
}
.sp{
display: none;
}
@media screen and (max-width:896px) {
.pc{
display: none;
}
.sp{
display: block;
}
}

body{
background: rgb(38 60 102 / 1);
font-size:1em;
font-weight:400;
/*font-family:'Noto Serif JP', serif;*/
font-family:'Noto Sans JP', sans-serif;
/*font-family:'Roboto', sans-serif;*/
color:rgb(255 255 255 / 1);
line-height:1.65;
letter-spacing:.02em;
box-sizing: border-box;
}
body.menu-open{
 overflow: hidden;
 height: 100%;
}

a,
a:link{
color:rgb(255 255 255 / 1);
text-decoration:none;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-ms-transition:All 1s ease;
transition:All 1s ease;
}

a:visited{
color:rgb(255 255 255 / 1);
}

a:hover,
a:active{
color:rgb(255 255 255 / 1);
}

img{
width:100%;
max-width:100%;
height:auto;
flex-shrink:0;
vertical-align:bottom;
}

/*----------------------------------------
ハンバーガーメニューボタン
----------------------------------------*/
.hamburger {
box-sizing: border-box;
display: block;
position: fixed;
 right: 0;
 top: 0;
 width: 70px;
 height: 70px;
 background: rgb(255 255 255 / 1);
 cursor: pointer;
 text-align: center;
z-index: 999;
}
.hamburger:hover{
background: rgb(255 255 255 / 1);
}
.hamburger span {
 display: block;
 position: fixed;
 width: 50px;
 height: 2px;
 right: 10px;
 background: rgb(0 0 0 / .2);
 transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
 top: 15px;
}

.hamburger span:nth-child(2) {
 top: 27px;
}

.hamburger span:nth-child(3) {
 top: 37px;
}

.hamburger span:nth-child(4) {
 top: 45px;
}

.hamburger span:nth-child(4) {
 width: 50px;
 height: 1.35em;
 background: none;
right: 10px;
 font-family: 'Roboto', sans-serif;
 font-size: 1.05em;
 font-weight: 700;
 color: rgb(0 0 0 / .3);
 letter-spacing: 0.35em;
}

/* スマホメニューを開いてる時のボタン */
.hamburger:active,
body.menu-open .hamburger{
background: none;
}
.hamburger.active span:nth-child(1) {
 top: 25px;
 right: 10px;
 background: rgb(255 255 255 / .5);
 transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2){
display: none;
}
.hamburger.active span:nth-child(3) {
 top: 25px;
 background: rgb(255 255 255 / .5);
 transform: rotate(45deg);
}
.hamburger.active span:nth-child(4) {
 width: 50px;
 height: 1.35em;
 background: none;
right: 10px;
 color: rgb(255 255 255 / .5);
}

/* メニュー背景 */
nav.globalMenuSp{
 position: fixed;
 z-index: 1000;
 top: 0;
 left: 0;
 color: rgb(255, 255, 255);
background: rgb(38 60 102 / 1);
 text-align: center;
 width: 100%;
 height: 100vh;
 transform: translateY(-100%);
 transition: all 0.6s;
}

nav.globalMenuSp.active {
 transform: translateY(0);
}

nav.globalMenuSp ul{
 margin:10% auto 0;
 padding:0;
 width:80%;
 display:grid;
 grid-template-columns:1fr 1fr 1fr;
 gap:0;
}
@media screen and (max-width:896px) {
nav.globalMenuSp ul{
width: 90%;
margin: 120px 5% 0;
grid-template-columns:1fr 1fr;
}
}
nav.globalMenuSp ul li {
transition: 0.4s all;
list-style-type: none;
font-size: 1.25em;
line-height: 1.55em;
letter-spacing: 0.2em;
}
nav.globalMenuSp ul li a span {
display: block;
font-size: .6em;
letter-spacing: 0.35em;
}
nav.globalMenuSp ul li a {
display: block;
background: rgb(38 60 102 / .75);
border: 1px solid rgb(255 255 255 / .3);
color: rgb(255 255 255 / 1);
padding: 24px;
}
nav.globalMenuSp ul li a:hover,
nav.globalMenuSp ul li a.current {
background: rgb(255 255 255 / .6);
color: rgb(38 60 102 / .75);
}
nav.globalMenuSp ul li a.current{
pointer-events: none;
cursor: default;
}
nav.globalMenuSp ul li:last-child {
 padding-bottom: 0;
}
nav.globalMenuSp p img{

}

nav.globalMenuSp p img{
opacity: 0;
transform: translateY(-50px);
transition: opacity 1s ease, transform 1s ease;

width: 145px;
height: auto;
margin: 64px auto 24px;
}

nav.globalMenuSp.img-show p img{
opacity: 1;
transform: translateY(0);
transition-delay: .8s;
}

/*----------------------------------------
 header
----------------------------------------*/
section.header_inner{
	position: fixed;
	top: 0;
	right: 0;
	display: grid;
	grid-template-columns: 70px 70px;
	justify-content:flex-end;
	background: none;
	z-index: 1100;
}
body.menu-open .header_contact_btn{
  opacity:0;
  pointer-events:none;
}

header{
	width: 95%;
	margin: 0 auto;
	aspect-ratio:16 / 9 ;
	position: relative;
}

div.video-wrap{
position: absolute;
top:0;
z-index: 0;
}
div.video-wrap video{
width: 100%;
clip-path: inset(0 0 round 0 0 32px 32px);
}

@media screen and (max-width:896px) {
header{
aspect-ratio:1080 / 1920 ;
width: 100%;
position: relative;
}
header h1{
	display: none;
}
div.video-wrap{
position: relative;
margin: 0 auto;
}
div.video-wrap video{
min-width: 100%;
width: 100%;
max-width: 100%;
overflow: hidden;
}
}

#loader {
width: 100%;
height: 100%;
background: #213678;
background: linear-gradient(135deg, rgba(33, 54, 120, 1) 1%, rgba(2, 5, 28, 1) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.4s ease;
}
#loader img{
width: 200px;
height: auto;
animation: pulse 1.5s infinite ease-in-out;
}
@media screen and (max-width:896px) {
#loader {
position: absolute;
top:0;	
width: 100%;
height: 98%;
clip-path: inset(0 0 round 0 0 32px 32px);
}
#loader img{
width: 115px;
}
}
@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
/* 動画が読み込まれたらローダーを非表示 */
#loader.loaded {
    opacity: 0;
    pointer-events: none;
}

header h1{
	position: absolute;
	top: 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	z-index: 999;
}
header h1 img{
	width: 260px;
	margin: 0 auto;
	text-align: center;
}

/*----------------------------------------
 会社概要
----------------------------------------*/
section#company{
	padding: 120px 5%;
	display:grid;
	place-items:center;
}

div.message h2{
	padding: 0 0 80px;
	font-size: 1.75em;
	font-family:'Noto Serif JP', serif;
	font-weight: normal;
	text-align: center;
	letter-spacing: .15em;
	line-height: 1.95em;
}

section#company h3{
	margin-bottom: 16px;
	font-size: 1.8em;
	font-family:'Roboto', sans-serif;
	font-weight: 400;
	letter-spacing: .25em;
}
section#company table{
	border-collapse: collapse;
	border-spacing: 0;
	box-sizing: border-box;
	font-size: 1.6em;
}
section#company table tr:first-child{
	border-top: 1px solid rgb(255 255 255 /.5);
}
section#company table th{
	text-align: right;
	letter-spacing: .5em;
	font-weight: normal;
}
section#company table th,
section#company table td{
	padding: 1.5em 2em;
	border-bottom: 1px solid rgb(255 255 255 /.5);
	line-height: 2em;
}
section#company table td{
	letter-spacing: .05em;
}
@media screen and (max-width:896px) {
section#company{
	width: 95%;
	padding: 64px 2.5% 64px;
}
div.message h2{
	padding: 0 0 64px 5% ;
	font-size: 1.75em;
	text-align: center;
	letter-spacing: .15em;
	line-height: 1.95em;
}
section#company h3{
	margin-left: 1.5em;
}	
section#company table {
	width: 90%;
	margin: 0 5%;
}
section#company table tr:first-child{
	border-top: none;
}
section#company table th{
	padding: .5em 2em;
	background: rgb(255 255 255 / .1);
}
section#company table th,
section#company table td{
	border: none;
	display: block;
	width: 95%;
	min-width: 95%;
}
section#company table th{
	text-align: center;
}
section#company table td{
	text-align: left;
}
}

/*----------------------------------------
 フォーム
----------------------------------------*/
section#contact.contact{
	width: 100%;
	padding: 160px 10%;
	background: rgb(249 248 239 / 1);
}

div.contact_title{
	margin-bottom: 20px;
	padding: 24px 0 24px 92px;
	box-sizing: border-box;
	background: url(../images/btn_to_contact_br.svg) no-repeat left center;
	background-size: 80px auto;
	color:rgb(100 100 100 / .7);
}
div.contact_title h3{
	margin-bottom: 12px;
	font-size: 1.8em;
	font-family:'Roboto', sans-serif;
	font-weight: 400;
	line-height: 1.65em;
	letter-spacing: .25em;
}
div.contact_title p{
	font-size: 1.45em;
}

body#thankspage{
	background: rgb(38 60 102 / 1);
}
div#thanks{
	margin: 128px auto 64px;
	text-align: center;
}
@media screen and (max-width:896px) {
section#contact.contact{
	padding: 0 5% 120px;
}	
div.contact_title{
	margin-top: -80px;
	margin-bottom: 20px;
	padding-top: 270px;
	padding-left: 0;
	box-sizing: border-box;
	background: url(../images/btn_to_contact_br.svg) no-repeat left center;
	background-size: 80px auto;
}
div#thanks{
	margin: 64px 2.5% 64px;
	text-align: center;
}
}
div#thanks h3{
margin: 20px auto;
font-family:'Noto Serif JP', serif;
font-size: 1.45em;
font-weight: 300;
letter-spacing: .1em;
}

div#thanks p{
	margin-bottom: 32px;
}
div#thanks img{
	width: 190px;
	height: auto;
	margin:128x auto 32px;
}
@media screen and (max-width:896px) {
section#contact{
	width: 95%;
	padding: 80px 2.5%;
}	
}

/**php form**/
div#formWrap{
	color: rgb(100 100 100 / 1);
}

div#formWrap .formWrap_title{
display: block;
margin-bottom: 4px;
font-size: 1.4em;
}
div#formWrap span.cap{
	font-size: .7em;
}

div#formWrap span.require{
display: inline-block;
margin-left: .25em;
font-size: .85em;
font-weight: 600;
color:rgb(209 151 0 / 1);
}

div#formWrap h4{
	padding-bottom: 12px;
	margin-bottom: 24px;
	border-bottom:1px solid rgb(100 100 100 / .2) ;
	font-size: 1.45em;
	font-weight: 400;
	letter-spacing: .1em;
}
.formWrap p{
	font-size: 1.4em;
}
.formWrap_line{
	margin-top: 56px;
	padding-top: 36px;
	border-top:1px solid rgb(100 100 100 / .2) ;
}
div#formWrap input[type="text"],
div#formWrap textarea{
	width: 100%;
	min-width: 100%;
}
div#formWrap .formWrap_rows input[type="text"]{
	width: 100%;
	margin-bottom: 28px;
}
div#formWrap dd{
	margin-bottom: 28px;
}
.formWrap_rows{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
div#formWrap select,
div#formWrap input[type="text"],
div#formWrap input[type="tel"],
div#formWrap input[type="email"],
div#formWrap textarea{
	display:block;
	background:rgb(255 255 255 / 1);
	width:100%;
	min-width: 100%;
	box-sizing:border-box;
	border:1px solid rgb(100 100 100 / .2);
	border-radius:6px;
	margin-bottom: 4px;
	padding-left:1em;
	padding-right:1em;
	padding-top:1.35em;
	padding-bottom:1.35em;
	transition:All 1s ease;
	font-size: 1.3em;
	color:rgb(100 100 100 / .7);
}

div#formWrap textarea{
	min-height: 16em;
}

@media screen and (max-width : 900px) {
div#formWrap select,	
div#formWrap input[type="text"],
div#formWrap input[type="tel"],
div#formWrap input[type="email"],
div#formWrap textarea{
	min-width: 100% !important;
	font-size: 16px;
}
div#formWrap .formWrap_title span.cap{
	display: block;
}
}
div#formWrap input:focus,
div#formWrap textarea:focus{
	background:rgb(100 100 100 / .05);
	color:rgb(100 100 100 / 1);
	outline:none;
}
div#formWrap input::placeholder{
	color: rgb(100 100 100 / .5);
}

button[type="submit"]{
display:block;
background: rgb(209 151 0 / 1);
border-radius:16px;
border:none;
outline:none;
margin-top:2.5em;
margin-bottom:0;
box-sizing:border-box;
width:100%;
padding-top:1.75em;
padding-bottom:1.75em;
cursor:pointer;
color:rgb(255 255 255 / 1);
text-align:center;
font-size:1.5em;
font-weight:600;
letter-spacing:.15em;
line-height:1em;

-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-ms-transition:All 1s ease;
transition:All 1s ease;	
}
button[type="submit"]:hover{
background: rgb(209 151 0 / .7);
}
button[type="submit"] span{
display: inline-block;
background: url(../images/icon_paper_plane.svg) no-repeat left center;
background-size: 24px auto;
padding:8px 0px 8px 36px;
}


/*----------------------------------------
 footer
----------------------------------------*/
body footer{
	padding: 60px;
	text-align: center;
	font-size: 7px !important;
	letter-spacing: .4em;
}
footer img{
	width: 125px;
	height: auto;
	margin: 0 auto 20px;
}

p.to-top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0;
	bottom: 0;
}

@media screen and (max-width:896px) {
}


/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
from{
opacity:0;
transform:translateY(100px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeDownAnime{
from{
opacity:0;
transform:translateY(-100px);
}
to{
opacity:1;
transform:translateY(0);
}
}


.animate{
opacity:0;
transform:translateY(30px);
transition:all 1.0s;
}
.openanimate,
.animate_reverse{
opacity:0;
transform:translateY(-30px);
transition:all 1.0s;
}
.animate.show,
.animate_reverse.show{
opacity:1;
transform:translateY(0);
}
body{
animation:fade 3s;
}
@keyframes fade{
0%{opacity:0;
}
100%{opacity:1;
}
}