@charset "utf-8";

-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 123.1%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.8;
}
ol, ul {
	list-style: none;
    padding-inline-start: 0;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
img{
    width: 100%;
	margin:0;
	padding;0;
	border:none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.for_sp {
  display: none !important;
}


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

@font-face {
  font-family: 'NexaBold';
    src:  url('../font/NexaBold.ttf.woff') format('woff'),
    url('../font/NexaBold.ttf.svg#NexaBold') format('svg'),
    url('../font/NexaBold.ttf.eot'),
    url('../font/NexaBold.eot?#iefix') format('embedded-opentype'); 
}

/*-----------------------------------------------------
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
------------------------------------------------------*/

/* -----------------------------------------------------------
	#Base
----------------------------------------------------------- */
html, body {
  height: 100%;
  margin:0;
  padding:0;
  _overflow: auto;
}

body {
	background-color: #393e40;
	color: #ffffff;
	margin:0;
	padding:0;
	font-family:'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ',Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: clamp(12px, 1.78vw, 16px);
}
a img {	border: none;}
a:link { color: #ffffff;  text-decoration: none;}
a:visited {color: #ffffff;}
a:active,a:hover {  text-decoration: none;}
a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
}

.cf {
    clear: both;
}

a.over_under {text-decoration: underline !important;}

h2{
    font-family: 'NexaBold';
    font-size: clamp(36px, 4.6vw, 80px);
    margin-top: 0;
    margin-bottom: 30px;
    color: #515658;
    letter-spacing: 0.4rem;
}

h3{
    font-family: 'NexaBold';
    font-size: clamp(24px, 4.2vw, 38px);
    margin-top: 0;
    margin-bottom: 10px;
    letter-spacing: 0.4rem;
    text-decoration: underline;
}
h4{
    font-size: clamp(16px, 2.67vw, 24px);
    letter-spacing: 0.4rem;
    font-weight: 400;
}


.btn{
    /*矢印の基点とするためrelativeを指定*/
  position: relative;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
  color:#fff;
    padding: 10px 10px 10px 50px;
    text-align: left;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
}

.btn:hover{
  color:#999;
}


/* 矢印が右に移動 */

.btn.arrow1::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    width: 32px;
    height: 32px;
    top:8px;
    left: 5px;
    background-image: url(../images/btn-icon.svg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btn.arrow1:hover::after{
    left: 12px;
}
/* margin  ------------------------------ */
.mg-b10 {margin-bottom:10px;}
.mg-b15 {margin-bottom:15px;}
.mg-b20 {margin-bottom:20px;}
.mg-b25 {margin-bottom:25px;}
.mg-b30 {margin-bottom:30px;}
.mg-b35 {margin-bottom:35px;}
.mg-b40 {margin-bottom:40px;}
.mg-b45 {margin-bottom:45px;}
.mg-b50 {margin-bottom:50px;}
.mg-b55 {margin-bottom:55px;}
.mg-b60 {margin-bottom:60px;}
.mg-b70 {margin-bottom:70px;}
.mg-b80 {margin-bottom:80px;}
.mg-b90 {margin-bottom:90px;}
.mg-b100 {margin-bottom:100px;}

.mg-t5 {margin-top:5px;}
.mg-t10 {margin-top:10px;}
.mg-t15 {margin-top:15px;}
.mg-t20 {margin-top:20px;}
.mg-t25 {margin-top:25px;}
.mg-t30 {margin-top:30px;}
.mg-t35 {margin-top:35px;}
.mg-t40 {margin-top:40px;}
.mg-t45 {margin-top:45px;}
.mg-t50 {margin-top:50px;}
.mg-t55 {margin-top:55px;}
.mg-t60 {margin-top:60px;}
.mg-t70 {margin-top:70px;}
.mg-t80 {margin-top:80px;}
.mg-t90 {margin-top:90px;}
.mg-t100 {margin-top:100px;}

@media screen and (max-width:768px) {
    .mg-b10 {margin-bottom:5px;}
.mg-b15 {margin-bottom:7px;}
.mg-b20 {margin-bottom:10px;}
.mg-b25 {margin-bottom:12px;}
.mg-b30 {margin-bottom:15px;}
.mg-b35 {margin-bottom:17px;}
.mg-b40 {margin-bottom:20px;}
.mg-b45 {margin-bottom:22px;}
.mg-b50 {margin-bottom:25px;}
.mg-b55 {margin-bottom:27px;}
.mg-b60 {margin-bottom:30px;}
.mg-b70 {margin-bottom:35px;}
.mg-b80 {margin-bottom:40px;}
.mg-b90 {margin-bottom:45px;}
.mg-b100 {margin-bottom:50px;}

.mg-t5 {margin-top:5px;}
.mg-t10 {margin-top:5px;}
.mg-t15 {margin-top:7px;}
.mg-t20 {margin-top:10px;}
.mg-t25 {margin-top:12px;}
.mg-t30 {margin-top:15px;}
.mg-t35 {margin-top:17px;}
.mg-t40 {margin-top:20px;}
.mg-t45 {margin-top:22px;}
.mg-t50 {margin-top:25px;}
.mg-t55 {margin-top:27px;}
.mg-t60 {margin-top:30px;}
.mg-t70 {margin-top:35px;}
.mg-t80 {margin-top:40px;}
.mg-t90 {margin-top:45px;}
.mg-t100 {margin-top:50px;}
    
}
/* float  ------------------------------ */
.img_left {float: left; margin: 0x 10px 10px 0;}
.img_right {float: right; margin: 0 0 10px 10px;}


/* -----------------------------------------------------------
	#header
----------------------------------------------------------- */
header {
    position: absolute;
    width: 100%;
    background-color: rgb(57,62,64,0.5);
    top:0;
    z-index: 10;
    transition: 0.5s;
    color: #ffffff;
}
#header {
    position: relative;
    max-width: 900px;
    height: 107px;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin: 0 auto;
}

#header._nomenu {
  padding-bottom: 6.8387%;
  border-bottom: 1px solid rgb(222,222,222);
}

@media screen and (max-width:768px) {
    #header {
    height: 60px;
}
  #header._nomenu {
    padding-bottom: 0;
    height: 60px;
    border-bottom-style: none;
  }
}

.bgt {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
/*------------------------------------------------*/

/* header logo */

/*------------------------------------------------*/
#header > h1 {
  position: absolute;
  top: 27%;
  left: 0;
  box-sizing: border-box;
  width: 26.2%;
margin: 0;
}

#header h1 a {
  display: block;
  padding-top: 20%;
  background-image: url(../images/hd-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
._csstrans header > h1 > a {
  transition: opacity .6s cubic-bezier(.165, .84, .44, 1);
}
#header > h1 > a:hover {
  opacity: 1;
}

#header > h1 > a > span {
  display: block;
  margin-top: -33.2%;
}

@media screen and (max-width:768px) {
  #header > h1 {
    width: 60px;
    top: 15px;
    left: 10px;
    margin-top: 0;
  }
  #header > h1 > a {
    padding-top: 87px;
  }
}

/*------------------------------------------------*/

/* header main_navigation */

/*------------------------------------------------*/
#header > #header_navigation {
  padding-left: 26.2%;
  padding-top: calc( 100% * 70 / 1350);
}

#header .main_navigation {
  position: static;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
margin: 0;
padding: 0;
}

#header .main_navigation > li {
  position: static;
  display: block;
  margin-right: calc( 100% * 5 / 1000);
  margin-left: calc( 100% * 5 / 1000);
  text-align: center;
  font-size: 16px;
  line-height: 2.625;
}
#header .main_navigation > li p {
    margin: 0;
    width: 100px;
    display: inline-block;
    font-family: 'NexaBold'; 
    transition: 0.5s;
}



#home #header .main_navigation > li.nav-1 > a {
    pointer-events: none;
}
#project #header .main_navigation > li.nav-2 > a {
    pointer-events: none;
}
#about_us #header .main_navigation > li.nav-3 > a {
    pointer-events: none;
}

#header .main_navigation > li > a {
  display: block;
  position: relative;
}

#header .main_navigation > li > a:hover::after {
   content: "・";
   font-size:20px;
  position: absolute;
    bottom: -22px;
    left:40%;
}

header .main_navigation > li > a:hover {
  opacity: 0.5;
}

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
  top:60px;
    right: -120%;
  width:170px;
    max-width: 170px;
    height: 330px;/*ナビの高さ*/
  background:#eeeeee;
    /*動き*/
  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 ul {
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    padding: 0;
    margin: 0;
    width: 170px;
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
    text-align: center;
    font-size: 12px;
}

#g-nav li a{
  color: #333;
  text-decoration: none;
  padding:10px 0;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
#g-nav li img {
    width: 100%;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
  top:8px;
  right: 15px;
  cursor: pointer;
    width: 40px;
    height:40px;
    border: 2px solid #666464;
    border-radius: 5px;
}
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 12px;
    height: 3px;
    border-radius: 2px;
  background-color: #666464;
    width: 45%;
  }

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

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

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

.openbtn1.active span:nth-of-type(1) {
    top: 13px;
    left: 8px;
    transform: translateY(6px) rotate(-45deg);
    width: 60%;
}

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

.openbtn1.active span:nth-of-type(3){
    top: 25px;
    left: 8px;
    transform: translateY(-6px) rotate(45deg);
    width: 60%;
}


/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
header.scroll-nav {
    position: fixed;
  /* 余白を狭くする */
  padding: 0;
  /* 背景を白にする */
  background: #fff;

}

header.scroll-nav {
  animation: fadeIn 0.5s ease 0.5s 1 normal backwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-107px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */
header.scroll-nav .logo,
header.scroll-nav ul li a {
  color: #262c2e;
}

header.scroll-nav #header h1 a {
  background-image: url(../images/hd-logo-b.svg);
}


/* -----------------------------------------------------------
	#swiper
----------------------------------------------------------- */
.mv01 {
  margin-bottom: 16rem;
	background-attachment: fixed;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
  /* フェードモード時 共通調整 */
  /* ページネーション */
  /* スライド */
  /* スライド アクティブ時 */
}
@media only screen and (max-width: 1024px) {
  .mv01 {
    margin-bottom: 8rem;
  }
}
.mv01 .l-inner {
  padding-bottom: 0;
}
.mv01 .swiper-fade .swiper-slide {
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, transform !important;
  transition-property: opacity, transform, -webkit-transform !important;
  pointer-events: none;
}
.mv01 .swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.mv01 .swiper-pagination {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 3.2rem;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  margin: auto;
}
.mv01 .swiper-sc_mark {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 2.5rem;
    width: 15px;
    height: auto;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  margin: auto;
}
.mv01 .swiper-pagination-bullet {
  display: block;
  width: 10px;
  height: 10px;
  cursor: pointer;
  -webkit-transition:.8s cubic-bezier(.2, 1, .2, 1);
  transition:.8s cubic-bezier(.2, 1, .2, 1);
  background-color: rgba(255, 255, 255, 0);
  border: 1px rgba(255, 255, 255, 1) solid;
}
.mv01 .swiper-pagination-bullet:not(:first-child) {
  margin-top: 0.8rem;
}
.mv01 .swiper-pagination-bullet-active {
  background-color: rgba(255, 255, 255, 1);
}
.mv01 .slide-media {
  height: 100vh;
}
.mv01 .slide-media.img-cover{
}
@media only screen and (max-width: 1024px) {
    .mv01 .swiper-pagination {
  right: 2.0rem;
}
    .mv01 .swiper-sc_mark{
       right: 2.0rem;
    }
  .mv01 .slide-media {
    height: max(100vh, 100vw);
  }
}
.mv01 .slide-media img {
  -webkit-transition: 7s 1s ease-out;
  transition: 7s 1s ease-out;
}
.mv01 .slide-title {
  position: absolute;
  width: 300px;
  top: calc((100vh - 30px) / 2);
  left: calc((100vw - 300px) / 2);
    z-index: 9;
}
@media only screen and (max-width: 499px) {
    .mv01 .swiper-pagination {
  right: 0.5rem;
}
    .mv01 .swiper-sc_mark{
       right: 0.5rem;
    }
    
}
.mv01 .swiper-slide[class*=-active] .slide-media img {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

@-webkit-keyframes mv01-fadeIn {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
    -webkit-filter: blur(300px);
            filter: blur(300px);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}

@keyframes mv01-fadeIn {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
    -webkit-filter: blur(300px);
            filter: blur(300px);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}

/* -----------------------------------------------------------
	#page-top
----------------------------------------------------------- */
/*リンクの形状*/
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  width: 60px;
  height: 50px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.6rem;
  transition:all 0.3s;
  background-color: #000;
}

#page-top a:hover{
    opacity: 0.5;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 0;
  z-index: 9;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
  margin: 0;
}

/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}

/* -----------------------------------------------------------
	#home #Layout
----------------------------------------------------------- */
#wrapper{
	width:100%;
	margin:94px auto 0;
    background-color: #fff; overflow: hidden;
}
#home #wrapper{
	margin:0 auto;
    padding-top: 94px;
}
@media screen and (max-width:768px) {
    #home #wrapper{
    padding-top: 91px;
}
}

#home #container {
    padding-top: 100vh;
}



@media screen and (max-width:768px) {
    h4{margin-top: 0px; margin-bottom: 15px;}
}

.contents_img {
    position: relative;
    width: 100%;
    height: 43.75vw;
    max-height: 660px;
    min-height: 440px;
    background: transparent;
    overflow: hidden;
}

.contents_img .scroll_bg {
    position: absolute;
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
  top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
  width: 100%;
	height:100vh;
    background-size:cover;
    background-repeat: no-repeat;
}



.contents_img .scroll_bg.mid_img {
    background-attachment: fixed;
    background-position: center;
    background-image: url(../images/mid_img_01.jpg?ud=240708);
}

_:lang(x)+_:-webkit-full-screen-document, .contents_img {
    height: 100vh;
    max-height: 800px;
 min-height: 660px;
}


_:lang(x)+_:-webkit-full-screen-document, .contents_img .scroll_bg.mid_img {
 background-attachment: inherit;
}


/*
@media screen and (max-width:768px) {
    .contents_img .scroll_bg{background-size:contain;}
}
*/

.footer_img {
    position: relative;
    width: 100%;
    height: 43.75vw;
    background: transparent;
    overflow: hidden;
}

.footer_img .ft_img {
    top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
    width: 100%;
    height: 43.75vw;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/ft_img_01.jpg?ud=251218);
}

@media screen and (max-width:768px) {
.contents_img {
    min-height: 250px;
}

}


#home .contents_box{
    width: 100%;
    height: calc(100vh - 300px);
    position: relative;
}



#home .contents_box .image_box {
    position: absolute;
    
}

#home .contents_box .text_box {
    position: absolute;
    /* background-color: #262c2e; */
    padding: 0px 10px 10px;
}
#home .contents_box.box01 .text_box {
    background-color: #262c2e;
}
#home .contents_box .btn-end {
    text-align: end;
}
@media screen and (max-width:768px) {
    #home .contents_box{
    width: 100%;
    height: auto;
}
    #home .contents_box .image_box {
    position: inherit;
    
}

#home .contents_box .text_box {
    position: inherit;
    width: calc(100% - 40px);
}
}


#home .contents_box.box01 .image_box {
    right: 0;
    width: 62.5%;
    height: 540px;
    background-image: url(../images/top-01.jpg?ud=251218);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


#home .contents_box.box01 .text_box {
    left: calc((100vw - 900px)/2);
}
@media screen and (max-width:920px) {
    #home .contents_box.box01 .text_box {
        left: 10px;}
}
@media screen and (max-width:768px) {
    #home .contents_box.box01 .image_box {
    right: 0;
    width: calc(100% - 20px);
    height: auto;
    min-height: 0;
    padding-top: 56.25%;
    margin-left: 20px;
}
    #home .contents_box.box01 .text_box {
        left: 20px;}
}

#home .contents_box.box02 .image_box {
    left: 0;
    width: 49%;
    height: 500px;
    background-image: url(../images/top-02.png?ud=240708);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#home .contents_box.box02 .text_box {
    left: 51%;
}
@media screen and (max-width:920px) {
    .contents_box.box02 .text_box {
        left: 10px;}
}
@media screen and (max-width:768px) {
    #home .contents_box.box02 .image_box {
    width: calc(100% - 20px);
    height: auto;
    min-height: 0;
    padding-top: 56.25%;
}
    #home .contents_box.box02 .text_box {
    left: 20px;
}
}

#home .contents_box.box03{
    min-height: 700px;
}
#home .contents_box.box03 h3{
    color: #bbc5cf;
    text-shadow: 2px 3px 1px rgba(0, 0, 0, 0.4);
}
#home .contents_box.box03 .text{
    color: #bbc5cf;
    text-shadow: 2px 3px 1px rgba(0, 0, 0, 0.4);
}


#home .contents_box.box03 .image_box {
    left: 0;
    width: 80%;
    height: 640px;
    background-image: url(../images/top-03-02.jpg?ud=251218);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}

#home .contents_box.box03 .text_box {
    left: 32%;
    top:calc(1vw + 45px);
}
@media screen and (max-width:920px) {
    #home .contents_box.box03{
    min-height: auto;
}
    .contents_box.box03 .text_box {
        left: 10px;}
}
#home .contents_box.box03 td{
    padding-bottom: 1.7rem;
}
#home .contents_box.box03 th {
    padding-right: 1.5rem;
    text-align: justify;
    text-align-last: justify;
    vertical-align:top;
    font-weight: 700;
}
@media screen and (max-width:768px) {
    #home .contents_box.box03 .image_box {
    width: calc(100% - 20px);
    height: auto;
    min-height: 0;
    padding-top: 76.25%;
}
    #home .contents_box.box03 .text_box {
    left: 20px;
}
#home .contents_box.box03 h3{
    color: #fff;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
#home .contents_box.box03 .text{
    color: #fff;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
}

#home .contents_box.box04{
    height: 100vh;
}
#home .contents_box.box04 .text_box {
    left: calc((100vw - 900px)/2);
}
@media screen and (max-width:920px) {
    #home .contents_box.box04 .text_box {
        left: 10px;}
}

#home .contents_box.box04 .map_box_full {
    position: absolute;
    left: calc((100vw - 900px)/2);
    top:100px;
    width: calc(100% - 20px);
    max-width: 900px;
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width:920px) {
    #home .contents_box.box04 .map_box_full {
        left: 10px;}
}

#home .contents_box.box04 .map_box{
    margin-bottom: 30px;
    width: 45%;
}
#home .contents_box.box04 .map_box .map{
    text-align: center;
}
#home .contents_box.box04 .map_box .map iframe{
    margin-top: 10px;
    max-width: 420px;
    max-height: 420px;
}

@media screen and (max-width:768px) {
    #home .contents_box.box04{
    height: auto;
}
    #home .contents_box.box04 .map_box{
    width: 100%;
}
    #home .contents_box.box04 .map_box_full {
    position: inherit;
    left: 20px;
    top:0px;
    width: calc(100% - 40px);
    display: block;
}
    #home .contents_box.box04 .map_box .map iframe{
    max-width: 355px;
    max-height: 355px;
}
}

.text_box .text{
    line-height: 2.0;
}

/* -----------------------------------------------------------
	#project #Layout
----------------------------------------------------------- */
#project h2{
  width: 100%;
  max-width: 900px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(50px, 5.6vw, 110px);
}


.project-articles {
  margin: 0 auto;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
padding: 0;
}

.project-article {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: calc((100% - 68px) / 3);
    margin-bottom: clamp(50px, 5.6vw, 110px);
}

.project-article > a.project_img {
  display: block;
  padding: 100% 0 0 0;
  background-color: rgb(57,62,64,0.5);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode:darken;
}
.project-article > a.project_img:hover {
  background-color: rgb(57,62,64,0.1);
    transition: transform .6s ease;
    transform: scale(1.1);
}


.project-article > a.project_img.project_01 {
    background-image: url(../images/project_01_img00.jpg);
}
.project-article > a.project_img.project_02 {
    background-image: url(../images/project_02_img00.jpg);
}
.project-article > a.project_img.project_03 {
    background-image: url(../images/project_03_img00.jpg);
}
.project-article > a.project_img.project_04 {
    background-image: url(../images/project_04_img00.jpg);
}
.project-article > a.project_img.project_05 {
    background-image: url(../images/project_05_img00.jpg);
}
.project-article > a.project_img.project_06 {
    background-image: url(../images/project_06_img00.jpg);
}
.project-article > a.project_img.project_07 {
    background-image: url(../images/project_07_img00.jpg);
}
.project-article > a.project_img.project_08 {
    background-image: url(../images/project_08_img00.jpg);
}
.project-article > a.project_img.project_09 {
    background-image: url(../images/project_09_img00.jpg);
}
.project-article > a > div {
/*  width: 100%; */
}
.project-article div.p_name {
  display: block;
  position: absolute;
  top: calc((100% - 32px)/2);
  left: 0;
  width: 100%;
  height: auto;
  text-align: center;
  font-family: 'NexaBold';
  font-size: clamp(16px, 2.67vw, 32px);
  line-height: 28px;
    letter-spacing: 0.2rem;
  color: rgb(255,255,255);
}

.project-article > a.project_img:hover div.p_name{
    transition: transform .6s ease;
    transform: scale(0.9);
}

@media screen and (max-width:768px) {
    #project h2{
    width: calc(100% - 40px);
}
    #project .contents_box{
    width: calc(100% - 40px);
        margin: 0 auto;
}
    .project-article {
    width: calc((100% - 34px) / 2);
}
}

/* -----------------------------------------------------------
	#about_us #Layout
----------------------------------------------------------- */
#about_us h2{
  width: 100%;
  max-width: 900px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(50px, 5.6vw, 110px);
}
#about_us h3{
  width: 100%;
  max-width: 900px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(50px, 5.6vw, 110px);
}

#about_us .contents_box{
  width: 100%;
  max-width: 900px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(30px, 2.6vw, 60px);  
}

#about_us .history_box > ul {
    margin: 120px 0 0 0;
    padding: 0;
}

#about_us .history_box > ul > li {
    position: relative;
    width: calc(100% - 82px);
    margin: 40px 0 0 40px;
    padding: 0px 0 20px 40px;
    list-style: none;
    border-left: 2.5px dotted #b2b1b1;
}

#about_us .history_box > ul > li:last-child {
    border-left: none;
}

#about_us .history_box > ul > li .his_year {
    position: absolute;
    top: -40px;
    left: -40px;
    padding: 24px 0 0 0;
    font-size: 16px;
    font-weight: bold;
    color: #262c2e;
}

.his_year {
  width: 80px;
  height: 80px;
  padding-top: 13px;
  border: 1px solid #d1d0d0;
  border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
    background-color: #d1d0d0;
}

#about_us .history_box > ul > li > ul {
    width: calc(100% - 40px);
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#about_us .history_box > ul > li > ul > li{
    width: calc((95% - 30px)/2);
    padding: 10px;
    text-align: center;
    background-color: #616566;
    margin-bottom: 15px; 
}

#about_us .history_box > ul > li > ul > li.none_bg {
    text-align: left;
}

#about_us .contact_box {
    position: relative;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(75px, 9.7vw, 150px);
    width: calc(92.8% - 100px);
    max-width: 736px;
    padding: 50px;
}
#about_us .contact_box h4 {
    position: absolute;
    background-color: rgb(38, 44, 46);
    color: #ffffff;
    padding: 0px 15px;
    margin: 0;
    top: -50px;
    left: -10px;
    border-right: 1px solid #ffffff;
}

#about_us .contact_box .contact_txt {
    position: absolute;
    top: -50px;
    left: 160px;
    font-size: clamp(16px, 2.67vw, 24px); 
    font-weight: 400;
}
#about_us .contact_box .contact_txt.midashi_2 {
    left: 230px;
}
#about_us .contact_box .contact_txt_2 {
    font-size: clamp(16px, 2.67vw, 24px); 
    font-weight: 700;
}

#about_us .contact_box table{
    border-collapse: separate;
    border-spacing: 0 15px;
}
#about_us .contact_box table th {
    background-color: #fff;
    border:1px solid #ffffff;
    color: #000;
    text-align: center;
    padding: 15px;
}
#about_us .contact_box table td {
    border:1px solid #ffffff;
    text-align: left;
    padding: 15px;
}

#about_us .contact_box .contact_tel,
#about_us .contact_box .contact_mail{
    display: inline-block;
    font-size: clamp(24px, 4.2vw, 34px);
    font-weight: 700;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

#about_us .contact_box .contact_tel span,
#about_us .contact_box .contact_mail span{
    border-bottom: 2px solid #fff;
}

#about_us .contact_box .contact_tel span:before{
    content:url(../images/icon-tel.svg);
  display:inline-block;
  width: clamp(24px, 4.2vw, 40px);
  height:auto;
  margin-right:10px;
  position:relative;
  top:3px;
  left:0;
}
#about_us .contact_box .contact_fax span:before{
    content:url(../images/icon-fax.svg);
  display:inline-block;
  width: clamp(24px, 4.2vw, 40px);
  height:auto;
  margin-right:10px;
  position:relative;
  top:3px;
  left:0;
}
#about_us .contact_box .contact_mail span:before{
    content:url(../images/icon-mail.svg);
  display:inline-block;
  width: clamp(24px, 4.2vw, 40px);
  height:auto;
  margin-right:10px;
  position:relative;
  top:3px;
  left:0;
}

@media screen and (max-width:768px) {
    #about_us h2{
    width: calc(100% - 40px);
}
    #about_us .contact_box h4{
        top:-30px;
        left: -20px;
        border: none;
    }
    #about_us .contents_box{
    width: calc(100% - 40px);
        margin: 0 auto;
}
    #about_us .history_box > ul > li {
    padding: 0px 0 20px 40px;
}
    #about_us .history_box > ul > li > ul {
    display: block;
}
    #about_us .history_box > ul > li > ul > li{
    width: 95%;
}
    #about_us .contact_box {
    width: calc(92.8% - 10px);
    padding: 5px;
}
    #about_us .contact_box .contact_txt {
        position:static;
    }
    #about_us table th,#about_us table td {
        width: calc(100% - 30px);
        display: block;
    }
    #about_us .contact_box .contact_tel,
#about_us .contact_box .contact_mail{
    display: block;
    margin-left: 0px;
    margin-right: 0px;
}
}


#footer {
    position: relative;
    width: 100%;
    background-color: #393e40;
}


#footer .footer-inner{width: 100%;text-align: center; padding: 5px 0 20px;color: #ffffff; }



@media screen and (max-width:768px) {
#footer .footer-inner div.ft_copy_r {
    text-align: center;
}
}


section {
    padding: 200px 0 100px;
	background-color:rgb(38, 44, 46);
	position: relative;
	z-index: 4;
}
section.img_bg {
    padding: 0;
}

@media screen and (max-width:768px) {
section {
    padding: 100px 0 50px;
}
}

/* -----------------------------------------------------------
	#project #swiper
----------------------------------------------------------- */
.l-inner {
  position: relative;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 80vw;
  margin: 0 auto;
}
@media only screen and (max-width: 1024px) {
    .l-inner {
        width: 100%;
        max-width:clamp(310px, 88vw, 900px);
    }
}

.l-section {
}
.l-section .l-inner {
}

.gallery01 {
  /* コンテナ */
  overflow: hidden;
  /* フェードモード時 共通調整 */
  /* コントローラー */
  /* 前へ / 次へボタン */
  /* スクロールバー */
  /* スライド */
  /* サムネイル */
  /* サムネイル アクティブ時 */
}
.gallery01 .swiper {
width: 100%;
/*  max-width: 900px;*/
  margin: auto;
}
.gallery01 .swiper-main {
  overflow: visible;
}
.gallery01 .swiper-thumb {
  padding-top: 8px;
}
.gallery01 .swiper-fade .swiper-slide {
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, transform !important;
  transition-property: opacity, transform, -webkit-transform !important;
  pointer-events: none;
}
.gallery01 .swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.gallery01 .swiper-controller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 56.25%;
}
.gallery01 .swiper-button-prev, .gallery01 .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media only screen and (max-width: 1024px) {
  .gallery01 .swiper-button-prev::before, .gallery01 .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff,.2);
            box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff,.2);
  }
}
@media only screen and (max-width: 1024px) {
  .gallery01 .swiper-button-prev::after, .gallery01 .swiper-button-next::after {
    border-color: #fff;
  }
}
.gallery01 .swiper-button-prev {
  left: 1.4rem;
}
@media only screen and (max-width: 1024px) {
  .gallery01 .swiper-button-prev {
    left: 0.4rem;
  }
}
.gallery01 .swiper-button-next {
  right: 1.4rem;
}
@media only screen and (max-width: 1024px) {
  .gallery01 .swiper-button-next {
    right: 0.4rem;
  }
}
.gallery01 .swiper-scrollbar {
  position: relative;
  margin-top: 1.6rem;
}
.gallery01 .swiper-scrollbar::after {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  margin: auto;
  content: "";
  background-color: #eee;
}
.gallery01 .swiper-scrollbar-drag {
  height: 20px;
  padding: 8px 0;
  cursor: pointer;
  background-color: #f5695f;
  background-clip: content-box;
}
@media only screen and (min-width: 1025px) {
  .gallery01 .swiper-scrollbar-drag:hover {
    background-color: #f12617;
  }
}
.gallery01 .swiper-scrollbar-drag:active {
  background-color: #f12617;
}
.gallery01 .slide {
  display: block;
  overflow: hidden;
    margin: 0;
}
.gallery01 .slide-media {
  padding-top: 56.25%;
}
.gallery01 .slide-media img {
  -o-object-fit: contain;
     object-fit: contain;
}
.gallery01 .slide-title {
  font-weight: bold;
  line-height: 1.6;
  padding: 1rem;
  text-align: right;
}
.gallery01 .thumb-media {
  padding-top: 100%;
  -webkit-transition:.8s cubic-bezier(.2, 1, .2, 1);
  transition:.8s cubic-bezier(.2, 1, .2, 1);
  border-radius: 4px;
}
@media only screen and (min-width: 1025px) {
  .gallery01 .thumb-media:hover {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  .gallery01 .thumb-media:hover img {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.gallery01 .thumb-media img {
  height: calc(100% + 8px);
  -webkit-transition:.8s cubic-bezier(.2, 1, .2, 1);
  transition:.8s cubic-bezier(.2, 1, .2, 1);
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px);
}
.gallery01 .swiper-slide-thumb-active {
  -webkit-transition:.8s cubic-bezier(.2, 1, .2, 1);
  transition:.8s cubic-bezier(.2, 1, .2, 1);
  opacity: 0.3;
}
.gallery01 .swiper-slide-thumb-active .thumb-media {
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px);
}
.gallery01 .swiper-slide-thumb-active .thumb-media img {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* slider */
[class*=swiper]:focus {
  outline: none;
}

.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}
.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 前へ / 次へボタン */
.swiper-button-prev, .swiper-button-next {
  display: grid;
  place-content: center;
  width: 2.0rem;
  height: 5.0rem;
  cursor: pointer;
  -webkit-transition:.8s cubic-bezier(.2, 1, .2, 1);
  transition:.8s cubic-bezier(.2, 1, .2, 1);
}
@media only screen and (min-width: 1025px) {
  .swiper-button-prev::before, .swiper-button-next::before {
    -webkit-transition:.8s cubic-bezier(.2, 1, .2, 1);
    transition:.8s cubic-bezier(.2, 1, .2, 1);
  }
  .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}
.swiper-button-prev::before, .swiper-button-next::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-color: #0a0c0d;
  border: 1px solid #ffffff;
}
.swiper-button-prev::after, .swiper-button-next::after {
  width: 0.5rem;
  height: 0.5rem;
  content: "";
  border: solid #ddd;
  border-width: 3px 3px 0 0;
}
.swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

.parallax-container {
overflow: hidden;
position: relative;
height: 440px; /* 必要に応じて調整 */
}

.parallax {
max-width: 100%;
height: auto;
position: absolute;
top: -50%;
}

@media only screen and (max-width: 767px) {
    .parallax-container {
height:250px; /* 必要に応じて調整 */
}
    .parallax {
top: 0;
}
}


/* fade--------------------------*/
.ani_item{
    opacity: 0;
}


/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.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:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}