@charset "UTF-8";
a img {
  filter: opacity(1);
  transition: filter .3s; }
a:hover img {
  filter: opacity(0.7);
  transition: filter .3s; }

/*===================================
共通
===================================*/
._tx1 {
  font-size: 53px;
}
@media (max-width: 768px) {
  ._tx1 {
    font-size: 36px;
  }
}

._tx2 {
  font-size: 18px;
}
@media (max-width: 768px) {
  ._tx2 {
    font-size: 16px;
  }
}

._tx3 {
  font-size: 17px; }

._tx4 {
  font-size: 36px; }
@media (max-width: 767px) {
    ._tx4 {
      font-size: 16px; } }


._tx5 {
  font-size: 13px; }
  @media (max-width: 767px) {
    ._tx5 {
      font-size: 10px; } }

._fw01 {
  font-weight: 500; }

._fw02 {
  font-weight: 400; }

._fw03 {
  font-weight: 300; }

._fw04 {
  font-weight: 200; }

@media (min-width: 1281px) {
  ._pd01 {
    padding-top: 200px; } }
@media (min-width: 768px) and (max-width: 1281px) {
  ._pd01 {
    padding: 200px 20px 0; } }
@media (max-width: 767px) {
  ._pd01 {
    padding: 100px 20px 0; } }

._pd02 {
  padding: 0 10px; }
  @media (max-width: 767px) {
    ._pd02 {
      padding: 0; } }

._pdt01 {
  padding-top: 60px; }

._pdb01 {
  padding-bottom: 100px; }
@media (max-width: 767px) {
    ._pdb01 {
      padding-bottom: 80px; } }

._pdb02 {
  padding-bottom: 40px; }

._mgt01 {
  margin-top: 64px; }
@media (max-width: 767px) {
    ._mgt01 {
      margin-top: 35px; } }

._mgt02 {
  margin-top: 40px; }

._mgt03 {
  margin-top: 32px; }
@media (max-width: 767px) {
    ._mgt03 {
      margin-top: 15px; } }

._mgt04 {
  margin-top: 16px; }
  @media (max-width: 767px) {
    ._mgt04 {
      margin-top: 0; } }

._mgt05 {
  margin-top: 100px; }
  @media (max-width: 767px) {
    ._mgt05 {
      margin-top: 40px; } }

._mgb01{
	margin-bottom: 60px;
}
@media (max-width: 767px) {
  ._mgb01 {
    margin-bottom: 20px; } }

@media (max-width: 767px) {
  ._mgb02 {
    margin-bottom: 24px; } }

@media (max-width: 767px) {
  ._mgb03 {
    margin-bottom: 48px; } }

._lh01 {
  line-height: 3; }
@media (max-width: 767px) {
    ._lh01 {
      line-height: 1.8; } }

._lh02 {
  line-height: 2.5; }
  @media (max-width: 767px) {
    ._lh02 {
      line-height: 2; } }

._clwhite {
  color: #fff; }

._brpc {
  display: block; }
  @media (max-width: 767px) {
    ._brpc {
      display: none; } }

._brsp {
  display: none; }
  @media (max-width: 767px) {
    ._brsp {
      display: block; } }

._cm01 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; }
  @media (max-width: 767px) {
    ._cm01 {
      padding: 0 20px; } }

.head {
  display: none; }

._hd03 {
  display: flex;
  align-items: flex-end;; }
  @media (max-width: 767px) {
    ._hd03 {
      display: block; } }

._hd03:after {
  margin-left: 24px; }

h5 {
  font-size: 16px;
  margin: 0; }

/*===================================
ヘッダー
===================================*/
#block_navi {
  position: fixed;
  top: 0;
  padding: 20px;
  width: 100%;
  z-index: 999; }

@media (max-width: 767px) {
  #header_logo {
    width: 80%; } }

.js-header {
  opacity: 0;
  transition: 0.4s ease-out; }

.js-header.block {
  opacity: 1; }

.menu {
  width: 144px;
  position: fixed;
  right: 0;
  top: 80px; }
  @media (max-width: 767px) {
    .menu {
      width: 100%;
      position: unset; } }
  .menu li {
    padding-left: 20px;
    font-weight: bold;
    color: #8e9281; }
  .menu li:first-of-type {
    background-color: #4d4d4d;
    color: #fff;
    line-height: 50px; }
  .menu .menu-item {
    background-color: #fff;
    border-bottom: solid 1px #B1B1B1;
    transition: 0.8s; }
    .menu .menu-item:hover {
      background-color: #8e9281;
      color: #fff;}
    .menu .menu-item a {
      height: 50px;
      line-height: 50px;
      display: block; }
  .menu li:last-of-type {
    border-bottom: none; }

/*===================================
ハンバーガーメニュー
===================================*/
@media (max-width: 767px) {
  #g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh;
    /*動き*/
    transition: all 0.6s; }

  /*アクティブクラスがついたら位置を0に*/
  #g-nav.panelactive {
    right: 0; }

  /*ナビゲーションの縦スクロール*/
  #g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch; }

  /*ナビゲーション*/
  #g-nav .g-nav {
    position: absolute;
    z-index: 999;
    padding-top: 60px;
    width: 100%; }

  /*========= ボタンのためのCSS ===============*/
  .openbtn1 {
    position: fixed;
    z-index: 9999;
    /*ボタンを最前面に*/
    top: 0;
    right: 0;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background-color: #4d4d4d; }

  /*×に変化*/
  .openbtn1 span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 18px;
    height: 1px;
    background-color: #fff;
    width: 24px; }

  .openbtn1 span:nth-of-type(1) {
    top: 20px; }

  .openbtn1 span:nth-of-type(2) {
    top: 30px; }

  .openbtn1 span:nth-of-type(3) {
    top: 40px; }

  .openbtn1.active span:nth-of-type(1) {
    top: 22px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 24px; }

  .openbtn1.active span:nth-of-type(2) {
    opacity: 0; }

  .openbtn1.active span:nth-of-type(3) {
    top: 35px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 24px; } }
/*===================================
トップビュー
===================================*/
/*========= 背景動画設定のCSS ===============*/
/*header設定*/
/*
#header {
  position: relative;
  h1の中央寄せ配置の起点とするためのrelative
  height: 0;
  padding-top: min(100vh, 50%); }
  @media (max-width: 767px) {
    #header {
      height: auto;
      padding-top: 0; } }
*/

/*
#video-area {
  position: fixed;
  z-index: -1;
  最背面に設定
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden; }
  @media (max-width: 767px) {
    #video-area {
      position: unset; } }
*/



/*
#container {
  position: relative;
  z-index: 1;
  background: #fff;
  overflow: hidden; }
*/

.container{
	content: "";
	background-image: url(../img/back_image.jpg);
	background-repeat: no-repeat;
}

/*===================================
フロントページ
===================================*/
@media (min-width: 767px) {
    html, body {
  min-width: 1280px; /* PC版の最小幅を指定 */
  overflow-x: auto;  /* 横スクロール許可 */
} }
.image-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* 共通設定 */
.image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.image-wrap img.start {
  opacity: 1; /* 最初は表示 */
  z-index: 1;
}

.image-wrap img.end {
  z-index: 2;
}

.image-wrap img.show {
  opacity: 1;
}

.image-wrap::before {
  content: "";
  display: block;
  padding-top: 65.25%; 
}
.fade-layer {
  will-change: opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (max-width: 768px) {
	.image-wrap::before {
		padding-top: 130.25%; 
	}
}

/* PC表示 */
@media (min-width: 769px) {
  .mv-sp { display: none; }
}

/* SP表示 */
@media (max-width: 768px) {
  .mv-pc { display: none; }
}

.about_wrap {
  position: relative;
  padding-top: 200px;
  margin-bottom: 180px;
  margin-top: -18%;}
@media (max-width: 768px) {
  .about_wrap{
    overflow: hidden;
    height: 800px;
    padding-top: 0;
    margin-bottom: 0;
    margin-top: -55%;
  }
}
  .about_wrap .about_txt {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  font-weight: 500;
}
@media (max-width: 768px) {
  .about_wrap .about_txt {
    width: 65%;
	padding: 0 20px;
  }
}

.title {
  display: flex;
  align-items: center;
  line-height: 1.3;
  font-weight: bold;
  padding-top: 200px;
  color: #8e9281;
}
@media (max-width: 768px) {
  .title {
    position: relative;
    z-index: 4;
    max-width: 500px;
    margin: 0 auto; 
  }
}
.title::after{
	content: "";
    flex: 1;
    height: 4px;
    margin-left: 10px;
    background: linear-gradient(to right, #c9c9c4, #8a8d82);
    border-radius: 4px;
    width: 100%;
}

.circle {
  content: "";
  background-image: url("../img/circle.png");
  background-size: cover;
  height: 800px;
  right: -5%;
  position: absolute;
  bottom: -75%;
  width: 770px;
  z-index: 3;
}
@media (max-width: 768px) {
  .circle {
    background-image: url(../img/circle_sp.png);
	height: 700px;
	top: 8%;
	bottom: 0;
	right: 0;
	left: 50%;
	width: 600px;
	transform: translate(-50%, 0) !important;
  }
}
.item{
	width: 48%;
}
@media (max-width: 768px) {
  .item {
	width: 100%;
  }
}
.trapezoid{
	width: 68px;
	height: 35px;
	background: #8a8d82;
	clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
	color: #fff;
	font-size: 27px;
	text-align: center;
	line-height: 1.2;
	margin-right: 15px;
}
  @media (max-width: 767px) {
    .trapezoid {
      display: block; 
      margin-bottom: 15px;} }
.cb03::before {
  height: 85%;
  top: 18.5%; }

.cb01.scroll-in::before, .cb03.scroll-in::before {
  clip-path: inset(0); }

.cb04 {
  height: 600px; }
  @media (max-width: 767px) {
    .cb04 {
      height: 260px; } }
  .cb04 iframe {
    width: 100%;
    height: 600px; }
    @media (max-width: 767px) {
      .cb04 iframe {
        height: 260px; } }

.cb05 {
  background-color: #8e9281; }
  .cb05 h2 {
    margin: 0 auto; }
  .cb05 a {
    display: block;
    text-align: center; }

._bl01 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;}
  @media (max-width: 767px) {
    ._bl01 {
 display: block;} }
  @media (max-width: 767px) {
    ._bl01::after {
      content: "";
      display: block;
      width: 320px; } }
  @media (max-width: 767px) {
    ._bl01 ._blin {
      padding: 0 1px; } }

._bl02 th {
  width: 30%;
  padding: 20px 0;
  text-align: left;
  vertical-align: text-top;
  font-size: 22px;
    color: #8e9281;}
  @media (max-width: 767px) {
    ._bl02 th {
      width: 100%;
      padding: 0;
      display: block; 
      font-size: 16px;} }
._bl02 td {
  padding: 20px 0;
  vertical-align: baseline; 
  font-size: 20px;
  font-weight: 500;}
  @media (max-width: 767px) {
    ._bl02 td {
      width: 100%;
      padding: 10px 0 24px;
      display: block; 
      font-size: 16px;} }

@media (max-width: 767px) {
    .work_title {
      padding-top: 0px;}
}

@media (max-width: 767px) {
    .company_title {
      padding-top: 120px;}
}

.contact_title{
	text-align: center;
	color: #fff;
	line-height: 1;
}
/*====================================
アニメーション
===================================*/
/*このクラスが付与されると表示する*/
.active {
  opacity: 1;
  visibility: visible; }

.slide-in {
  overflow: hidden;
  display: inline-block; }

.slide-in_inner {
  display: inline-block; }

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/ }

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1; } }
.scroll-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s; }

.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px); }

._delay01 {
  transition-delay: 200ms; }

._delay02 {
  transition-delay: 400ms; }

._delay03 {
  transition-delay: 600ms; }

._delay04 {
  transition-delay: 800ms; }

._delay05 {
  transition-delay: 1000ms; }

._delay06 {
  transition-delay: 1200ms; }

._delay07 {
  transition-delay: 1400ms; }

._delay08 {
  transition-delay: 1600ms; }

/*===================================
フッター
===================================*/
.footer {
  background-color: #000;
  padding-top: 100px;
  padding-bottom: 30px;}
	
@media (max-width: 767px) {
    .footer {
     padding-top: 55px;} }
	
  .footer ._flogo {
    margin: 0 auto 40px; 
    width: 600px}
	
@media (max-width: 767px) {
    .footer ._flogo {
     width: 240px;} }
	
  .footer small {
    display: block;
    text-align: center; }

/*===================================
work更新
===================================*/
.title03{
visibility:hidden !important;
}

@media screen and (max-width:768px){
.title03{
display:none !important;
}
}