/*フォント*/
body {
	font-family: 'Zen Kaku Gothic New', sans-serif;
	color: #051d40;
}
/*ヘッダーフッターメニューのフォント*/
.en {
	font-family: 'Bebas Neue';
	font-weight:900;
}

/*トップナビ*/
.top {
	height:100px;
	background:#fff;
	line-height:100px;
	padding:0 40px;
	display: flex;
justify-content: space-between;
}
.top h1 {
	display: flex;
flex-direction: column;
justify-content: center;
}
.top h1 img {
	max-width:305px;
	width:100%;
}
.top ul {
	display: flex;
justify-content: space-between;
}
.top ul li {
	margin-left:40px;
}
.top ul li a {
	display:block;
	line-height:100px;
	font-size:22px;
}

/*MV*/
.mv {
	max-height: 800px;
	height: 100vh;
	background-position:center center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mv .key {
text-align: center;
padding: 20px;
}
.mv .key .key1 {
font-size: 36px;
font-weight: 900;
color: #fff;
margin-bottom: 60px;
}
.mv .key .key1 span {
color: #ff0;
}
.mv .key .key2 {
margin-bottom: 60px;
}
.mv .key .key2 img {
max-width: 950px;
width: 100%;
}
.mv .key .key3 {
color: #fff;
font-size: 18px;
font-weight: 500;
}

@keyframes fade-in-out1 {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  20% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    transform: translateY(0);
    opacity: 0;
  }
  60% {
    transform: translateY(0);
    opacity: 0;
  }
  80% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-out2 {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  20% {
    transform: translateY(0);
    opacity: 0;
  }
  40% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    transform: translateY(0);
    opacity: 0;
  }
  80% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-out3 {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  20% {
    transform: translateY(0);
    opacity: 0;
  }
  40% {
    transform: translateY(0);
    opacity: 0;
  }
  60% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.key1 {
  animation-name: fade-in-out1;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.key2 {
  animation-name: fade-in-out2;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}
.key3 {
  animation-name: fade-in-out3;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
}

/*お問い合わせフォーム*/
#contact {}

/*フッター*/
.bottom {}
.bottom h1 {
text-align: center;
padding: 40px 20px;
}
.bottom h1 img {
max-width: 260px;
width: 100%;
}
.bottom ul {
display: flex;
justify-content: center;
border-bottom: 1px solid #eee;
}
.bottom ul li {
margin: 10px;
}
.bottom ul li a {}
.bottom p {
text-align: center;
padding: 30px;
}


section {
padding: 60px 20px;
box-sizing: border-box;
}
section.bg1 {
background: #e0ebf9;
}
section.bg2 {}
section.bg3 {}

/*セクションごとのタイトル*/
.tit {
font-size: 30px;
font-weight: 900;
text-align: center;
position: relative;
letter-spacing: 10px;
line-height: 40px;
margin-bottom: 110px;
}
.tit::after {
content: '';
width: 80px;
height: 10px;
display: inline-block;
background-color: #051d40;
position: absolute;
bottom: -50px;
left: calc(50% - 40px);
}
.bg2 .tit::after {
background-color: #e0ebf9;
}

.subbg {
background: #051d40;
color: #fff;
font-size: 16px;
padding: 10px 20px;;
display: table;
margin: auto auto 40px;
}

/*ビジョン*/
.vision .comment {
max-width: 600px;
font-size: 32px;
line-height: 42px;
font-weight: 900;
background: #fff;
text-align: center;
padding: 60px;
box-sizing: border-box;
margin: auto auto 40px;
background-image: linear-gradient(-135deg, #fff45c 120px, transparent 0);
}
.vision .txt {
text-align: center;
}

/*サービス*/
.service .comment {
background: #e0ebf9;
font-size: 18px;
line-height: 26px;
padding: 20px 40px;
border-radius: 100px;
max-width: 760px;
margin: auto auto 40px;
text-align: center;
}
.service .img {
text-align: center;
padding: 0 20px;
box-sizing: border-box;
margin: auto auto 40px;
}
.service .img img {
max-width: 800px;
width: 100%;
}

/*メッセージ*/
.message {
padding-bottom: 0;
}
.message .member {
display: flex;
justify-content: center;
}
.message .member li {
width: 50%;
padding: 40px;
box-sizing: border-box;
}
.message .member li.bg1 {
background: url("../img/top/message1.jpg") left top no-repeat #fff;
background-attachment: fixed;
}
.message .member li.bg2 {
background: url("../img/top/message2.jpg") right top no-repeat #fff;
background-attachment: fixed;
}
.message .member li .comment {
background-color: rgba(255,255,255,.8);
background-image: linear-gradient(-135deg, #fff45c 120px, transparent 0);
max-width: 440px;
padding: 40px;
box-sizing: border-box;
}
.message .member li.bg1 .comment {
margin:auto 0 auto auto;
}
.message .member li .comment .title {
font-size: 16px;
text-align: center;
margin-bottom: 20px;
}
.message .member li .comment .name {
font-size: 24px;
font-weight: 900;
text-align: center;
position: relative;
letter-spacing: 4px;
margin-bottom: 50px;
}
.message .member li .comment .name::after {
content: '';
width: 80px;
height: 10px;
display: inline-block;
background-color: #e0ebf9;
position: absolute;
bottom: -30px;
left: calc(50% - 40px);
}
.message .member li .comment .txt {
font-size: 18px;
line-height: 26px;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.message .skew {
background: url("../img/top/bg.jpg") right top no-repeat;
padding: 260px 20px;
}
.message .skew .wrap {
max-width: 960px;
margin: auto;
}
.message .skew .wrap .inner {
max-width: 500px;
background-color: rgba(255,255,255,.8);
padding: 40px;
}
.message .skew .wrap .inner .name {
font-size: 18px;
margin-bottom: 30px;
}
.message .skew .wrap .inner .name span {
font-size: 24px;
font-weight: 900;
}
.message .skew .wrap .inner .subbg {
margin-left: 0;
margin-bottom: 20px;
}
.message .skew .wrap .inner .txt {
font-size: 16px;
line-height: 26px;
margin-bottom: 20px;
}
.message .skew .wrap .inner .img {}
.message .skew .wrap .inner .img img {
max-width: 360px;
width: 100%;
}

/*カンパニー*/
.company {}
.company ul {}
.company ul li {
display: flex;
justify-content: center;
}
.company ul li .titl {
width: 50%;
text-align: right;
font-weight: 900;
font-size: 18px;
line-height: 24px;
padding: 20px;
}
.company ul li .txt {
width: 50%;
font-size: 18px;
line-height: 24px;
padding: 20px;
}

/*ここからレスポンシブ指定*/
/*アイパッド*/
@media screen and (max-width: 1024px) {

/*トップナビ*/
.top {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
z-index: 999;
padding: 0;
height: 80px;
line-height: 80px;
}
.top h1 {
width: 100%;
align-items: center;
background: #fff;
z-index: 999;
}
.top h1 img {
max-width: 40px;
}
.top ul {
position: absolute;
top: -100vh;
left: 0;
background: #000;
color: #fff;
width: 100%;
flex-direction: column;
align-items: center;
padding: 30px 0;
transition: all .2s ease;
z-index: 99;
}
.top ul.menu_open {
top: 80px;
transition: all .2s ease;
}
.top ul li {
margin: 0;
}
.top ul li a {
font-size: 18px;
line-height: 60px;
}

/*フッター*/
.bottom {}
.bottom h1 {}
.bottom h1 img {}
.bottom ul {
flex-direction: column;}
.bottom ul li {
border-top: 1px solid #eee;
padding: 20px 10px;
margin: 0;
text-align: center;
}
.bottom ul li a {}
.bottom p {}


/*ハンバーガーメニュー*/

/*オープンボタン*/
.burger-btn{
transition: .3s;
position: fixed;
top: 30px;
right: 30px;
height:20px;
width:30px;
z-index: 999999;
}
.bar{
width: 30px;
height: 3px;
display: block;
position: absolute;
background: #000;
}
.bar_top{ 
top: 0%;
transition: transform .3s;
}
.bar_middle{
top: 50%;
transition: transform .3s;
	transform: scale( 1 ) ;
}
.bar_bottom{
top: 100%;
transition: transform .3s;
}
/*クローズボタン*/
.burger-btn.close{
}
.burger-btn.close .bar {
	background:#000;
}
.burger-btn.close .bar_top{
transition: transform .3s;
transform: translate(0,10px) rotate(45deg);
}
.burger-btn.close .bar_middle{
transition: transform .3s;
	transform: scale( 0 ) ;
}
.burger-btn.close .bar_bottom{
transition: transform .3s;
transform: translate(0,-10px) rotate(-45deg);
}

/*メッセージ*/
.message .member {
flex-direction: column;
}
.message .member li {
width: 100%;
}
.message .member li.bg1 {
background-attachment: scroll;
}
.message .member li.bg2 {
background-attachment: scroll;
}

.message .skew {
background: url("../img/top/bg-sp.jpg") right top no-repeat;
}

}

/*アイホン678＋*/
@media screen and (max-width: 820px) {

/*トップナビ*/
.top {
}
.top h1 {
}
.top h1 img {
}
.top ul {
}
.top ul li {
}
.top ul li a {
}
	
}