@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
/*  style　[  共通 ]
=================================================================== */

	
body{
  background: #efefef;
}

.flex-box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.relative-box {
  position: relative;
}

.wrapper {
  position: relative;
  overflow: hidden;
}
.table-box {
  display: table;
  margin: auto;
}

.mincho {
  font-family: "Zen Old Mincho", serif!important;
}
.gothic {
  font-family: "Zen Maru Gothic", sans-serif;
}

@media (min-width: 768px) { 
  .visible-xs {
  display: none;
} 
}


.full-contents {
 /* max-width: 1440px;*/
  margin: 0 auto;
}

.en-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.en-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.en-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/*----------------------------------------------
   header
---------------------------------------------*/

.main-visual {
	position: relative;
}
  
header {
  position: fixed!important;
  left: 0;
  top: 0;
  z-index: 999;
  transition: 0.5s;
  width: 100%;
}

/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
header.scroll-nav {
  /* 余白を狭くする 
  padding: 10px 15px;*/
  /* 背景を白にする */
  background: rgba(0, 0, 0, 0.6);
  /* コンテンツの背景が白でもナビゲーションだと分かりやすいように影をつける */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.header-box {
	justify-content: space-between;
	padding-bottom: 10px;
}
.header-box h1 img {
  height: 30px;
  margin: 5px 0 0 0;
}


.header-right {
	width: 70%;
	text-align: right;
	padding-top:25px;
}


@media (min-width: 768px) { 
  /* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
header.scroll-nav h1 img {
  height: 30px;
  margin: 5px 0 0 0;
  transition: .3s;
}

header.scroll-nav .header-right {
  width: 70%;
	text-align: right;
	padding-top: 10px;
  transition: .3s;
}
 }



 /*----------------------------------------------
   first-view
---------------------------------------------*/

.page-img {
    position: relative;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    /*max-width: 1200px;*/
	width: 100%;
    height: 100vh;
    margin: 0 auto;
    padding: 0;
	z-index: 1;
  }

/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
	.page-img {
		height: 100vh;
	  }
}

.overlay {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(109, 115, 121, 0.4);
    z-index: 2;
  }

/*
  figure.main-figure {
	width: 100%;
	height: 100vh;
	}
	.main-figure img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		   overflow: hidden;
	  }
*/

#visualBlock3 {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
#visualBlock3 img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
#visualImgScale {
    position: absolute;
    max-width: none;
}



.page-copy {
	position: absolute;
	text-align: center;
	color: #fff;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	margin: auto;
	z-index: 3;
	text-shadow: 1px 1px 2px rgb(87, 120, 148);
  }
.page-copy h1.Pagetitle {
  font-family: "Lato", sans-serif;
  font-weight: 400;
	animation: fade01 2s 1s forwards;
	opacity: 0;
  letter-spacing: 5px;
}
@keyframes fade01{
0%{
	opacity: 0;
}
100%{
opacity: 1;
}
}



/*----------------------------------------------
   nav
---------------------------------------------*/

nav ul.nav-list {
	list-style: none;
	margin: 5px 0;
  font-family: "Lato", sans-serif;
  font-weight: 300;
}
nav ul.nav-list li {
	display: inline-block;
	padding: 0 1em;
}
nav ul.nav-list li:last-child {
  border: #fff 1px solid;
  padding: 5px 0.5em;
}
nav ul.nav-list li a {
	text-decoration: none;
  color: #fff;
}
nav ul.nav-list li a:hover {
	text-decoration: none;
  color: #fff;
}







/*----------------------------------------------
   main
---------------------------------------------*/
.page-main {
  padding: 3em 0 0 0;
  background-color: #fff;
}

.page-main section {
  padding: 3em 0;
}

/*----------------------------------------------
   section
---------------------------------------------*/
.page-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


/*----------------------------------------------
   見出し
---------------------------------------------*/
 .h2-en {
	font-size: 2em;
	margin-bottom: 2em;
	font-family: "Lato", sans-serif;
	text-align: center;
	font-weight: 300;
	letter-spacing: 10px;
}
/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
	 .h2-en {
	font-size: 1.8em;
}
}

 .h2-jp {
	font-size: 2em;
	margin-bottom: 2em;
	text-align: center;
	font-weight: 400;
	letter-spacing: 10px;
}
/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
	 .h2-jp {
	font-size: 1.8em;
}
}


.h3-en {
	font-size: 1.5em;
	margin: 2em 0;
	font-family: "Lato", sans-serif;
	text-align: center;
	font-weight: 300;
	letter-spacing: 5px;
}
.h3-en span {
  border-bottom: #4b4b4b 1px solid;
  padding-bottom: 5px;
}
/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
	 .h3-en {
	font-size: 1.5em;
}
}


.h3-jp {
	font-size: 1.8em;
	margin-bottom: 15px;
}
/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
	 .h3-jp {
	font-size: 1.5em;
	margin-top: 15px;
	margin-bottom: 15px;
}
}


/*----------------------------------------------
   lead
---------------------------------------------*/
.lead-text {
  display: table;
  text-align: center;
  font-size: 1.1em;
  line-height: 1.7;
  margin: 0 auto;
}



/* link */
.link-form {
    border-bottom: #4b4b4b 1px solid;
}
.link-form:hover {
    text-decoration: none;
    border-bottom: #c33 1px solid;
}



/*----------------------------------------------
   contact
---------------------------------------------*/
#contact {
	background-color: #f2f2f1;
	padding: 5em 0;
	text-align: center;
}

.line-gre {
	display: table;
	vertical-align: middle;
	padding: 0.5rem ;
	color: #4b4b4b!important;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	font-size: 1.3rem;
	line-height: 1;
	margin: 5rem auto 0 auto;
	border-bottom: #4b4b4b 1px solid;
}

.line-gre:hover {
	
	text-decoration: none;
}


/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
	.line-gre {
		font-size: 1.2em;
	}
}
/*----------------------------------------------
   footer
---------------------------------------------*/

footer {
	background: #4b4b4b;
	padding:  0 0 15px 0;
	margin: 0;
	color: #fff;
	position: relative;
	text-align: center;
}

.footer-logo {
	padding: 7em  0;
}

.footer-logo img {
	width: 200px;
}

.copy {
	color: #999;
	margin: 0;
	padding: 5px 0;
	line-height: 1;
	font-size: 0.7em;
  font-family: Arial, Helvetica, sans-serif;
}