@charset "utf-8";

/*
Theme Name: hayashi_child
Template: hayashi_child
Author: labo
Author URI: https://takai-laboratory.com/
*/

/*========================*/
/*fade
***************/
/* 画面外にいる状態 */
.fadein {
opacity : 0;
transform : translate(0, 150px);
transition : all 1500ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}
#wrap {overflow: hidden;}
body {opacity: 0; transition-duration: .5s; transition-delay: .2s;}
.indication {opacity: 1;}
.indent_content {padding: 60px 0;}
.indent_content02 {margin-top: 60px;}

/******************************
HEADER
******************************/
header {background: #fff; padding: 10px 0 20px; line-height: 1; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; box-sizing: border-box; height: 100px;}
header h1 {font-size: 12px; margin-bottom: 10px;}
header img {margin-top: 15px;}
.global_nav {padding-right: 100px;}
.global_nav li {position: relative; line-height: 1; box-sizing: border-box; width: auto; text-align: center; margin-left: 40px;}
.global_nav li:nth-of-type(1) {margin-left: 0;}
.global_nav .dots {position: absolute; top: -25px; left: 0; right: 0; margin: auto; width: 10px; height: 10px; -webkit-transition: opacity .8s .7s,-webkit-transform .9s .3s cubic-bezier(.79,.17,.15,.96); transition: opacity .8s .7s,-webkit-transform .9s .3s cubic-bezier(.79,.17,.15,.96); transition: transform .9s .3s cubic-bezier(.79,.17,.15,.96),opacity .8s .7s; transition: transform .9s .3s cubic-bezier(.79,.17,.15,.96),opacity .8s .7s,-webkit-transform .9s .3s cubic-bezier(.79,.17,.15,.96);}
.global_nav .dots::before {content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; border: solid 1px #1f3134; border-radius: 50%; opacity: 0; -webkit-transform: scale(.7); transform: scale(.7); -webkit-transition: .3s; transition: .3s; box-sizing: border-box;}
.global_nav .dots::after {content: ''; position: absolute; left: 3px; top: 3px; height: 4px; width: 4px; background: #1f3134; border-radius: 50%; -webkit-transition: .3s; transition: .3s; box-sizing: border-box;}
.global_nav li:hover .dots::before {opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: .5s cubic-bezier(.08,.92,.35,1); transition: .5s cubic-bezier(.08,.92,.35,1);}
.global_nav li:hover .dots::after {opacity: 1; -webkit-transform: scale(.8); transform: scale(.8); -webkit-transition: .3s; transition: .3s;}

/*slide*/
.front_main_box .box {height: 100%;}
.front_main_box .main .txt_box {position: absolute; width: 100%; top: 18%; left: 0; z-index: 30;}
.front_main_box .main .main_txt {left: 100px; z-index: 10; position: relative; transition-delay: 1.5s; display: table;}
.front_main_box .main .main_txt.on span {opacity: 1;}
.front_main_box .main .main_txt span {opacity: 0; transition-delay: 1s; font-size: 8vh; line-height: 1.3; text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px;}
.front_main_box .main .main_txt::after{content: ''; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; height: 90%; width: 0; background-color: #000; transition-duration: 0.6s; transition-timing-function: cubic-bezier(1, 0, 0, 1); -ms-transition-duration: 0.6s; -ms-transition-timing-function: cubic-bezier(1, 0, 0, 1); -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1); transition-delay: .5s;}
.front_main_box .main .main_txt.on::after{width: 100%;}
.front_main_box .main .main_txt.off::after{width: 0%;}


.front_main_box .slide_box {position: absolute; bottom: 10%; width: 1810px; height: 55%; z-index: 20; -webkit-transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s;
    transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s;
    transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s;
    transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s, -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s; clip-path: inset(0 100% 0 0);}
.front_main_box.inview .slide_box {clip-path: inset(0);}
.front_main_box .inner {position: relative; width: 1200px; height: 100%;}
.swiper-button-prev,.swiper-button-next {display: none} 
.slider {height: 100%; width: 100%;}
.slider .swiper-slide img {height: 100%; object-fit: cover; object-position: center; width: 100%;}
.slider-thumbnail {position: relative; z-index: 20; overflow: inherit; margin: auto;}
.slider-thumbnail .swiper-wrapper {display: flex; justify-content: flex-end;}
.slider-thumbnail .swiper-slide {width: 120px!important; box-sizing: border-box; border: 2px solid #fff; margin-left: -3px; cursor: pointer;}
.swiper-slide {overflow: hidden;}
.slider-thumbnail .swiper-slide-thumb-active {border-color: #3785cf; z-index: 30;}
.slider-thumbnail .swiper-slide:nth-child(1) {margin-left: inherit;}
.slide-img {height: 100%;}
.front_main_box .item:nth-child(1) {transition-delay: 1.9s;}
.front_main_box .item:nth-child(2) {transition-delay: 2s;}
.front_main_box .item:nth-child(3) {transition-delay: 2.1s;}
.front_main_box .item:nth-child(4) {transition-delay: 2.2s;}

.paging_box {position: absolute; bottom: -5%; z-index: 20; transition-delay: 2.2s;}
#paging {
position: relative;
}
#paging li {
height: 2px; background: #fff; cursor: pointer; position: absolute; left: 0; top: 0; width: 354px; opacity: 0;
}
#paging li.active {z-index: 100; position: relative; opacity: 1;}
#paging li:last-child {
border-right: none;
}
#paging li:hover {
background: #ddd;
}
#paging li span {
display: block;
width: 0;
height: 100%;
}
#paging li.active span {
background: #3885cd;
}

.front_main_box .unit_box {position: absolute; content: ''; bottom: 6%; right: 0;}
.front_main_box .btn {z-index: 20; height: 80px; box-sizing: border-box; border: 1px solid #000; margin-right: 20px; transition-delay: 2.2s;}
.front_main_box .btn .recruit {font-size: 28px; line-height: 1; height: 100%; width: 200px; box-sizing: border-box; background: #3687d2; padding: 0 50px;}
.front_main_box .btn .recruit::before {content: ''; width: 0; height: 100%; transition-delay: 0s; transition-duration: 0.5s; position: absolute; left: 0; top: 0; background: #fff;}
.front_main_box .btn:hover .recruit::before {width: 200px;}
.front_main_box .btn .recruit span {position: relative; z-index: 10;}
.front_main_box .btn:hover .recruit span {color: #3687d2; transition-duration: .5s;}
.front_main_box .btn .txt {height: 100%; font-size: 16px; background: #fff; padding: 0 80px;}
.front_main_box .btn .txt::before {content: ''; width: 0; height: 100%; transition-duration: .5s; position: absolute; left: 200px; top: 0; background: #3687d2;}
.front_main_box .btn:hover .txt::before {width: calc(100% - 200px);}
.front_main_box .btn .txt span {position: relative; z-index: 10;}
.front_main_box .btn:hover .txt span {color: #fff; transition-duration: .5s;}



/*　上に上がる動き　*/

#header.UpMove,#st_hamburger.UpMove{
	animation: UpAnime 0.5s forwards;
}

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

/*　下に下がる動き　*/

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

#nav{
  position: fixed;
  height: 100vh;
  width: 100%;
  left: -100%;
  top: 0;
  background: url("img/header/nav_bg.jpg")top left repeat;
  transition: .7s;
  z-index: 600;
}
.hamberger_box {
	position: fixed;
	top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 1200px;
    z-index: 700;
}



#hamburger01,#hamburger02,#hamburger03 {
  display: block;
  width: 60px;
  height: 30px;
  cursor: pointer;
  transition: 1s;
  position: absolute;
  left: -100px;
  top: 0; bottom: 0; margin: auto; z-index: 500;
}

#hamburger01 {top: 0; right: 0; left: 0; bottom: 0; margin: auto; height: 60px;}
#hamburger01 .inner_line {width: 60px; background: #b7b8ba;}
#line01_1 {transform: translateY(12px) rotate(-45deg); top: 11px;}
#line01_2 {opacity: 0;}
#line01_3 {transform: translateY(-17px) rotate(45deg); bottom: 17px;}
#hamburger02 {position: absolute; left: auto; width: 50px; height: 50px; background: #000; z-index: 700; right: 0; top: 35px; bottom: 0; margin: 0; border: 1px solid #000; border-radius: 50%; justify-content: center; display: flex; align-items: center; transition-duration: .3s;}
#hamburger02:hover {background: #fff; transform: scale(1.2);}
#hamburger02 .ham::before {content: ''; width: 0; height: 0; border: 1px solid #000; border-radius: 50%; transition-duration: .3s; position: absolute; top: 0; bottom: 0; right:0; left: -21px; margin: auto;}
#hamburger02 .ham {width: 20px; height: 22px; position: relative;}
#hamburger03 {position: absolute; z-index: 700; margin: inherit; left: inherit; right: 0; top: 0; background: #fff; width: 60px; height: 60px; border-radius: 50%;}
.inner_line {
  display: block;
  position: absolute;
  left: 0;
right: 0;
	margin: auto;
  width: 20px;
  height: 2px;
  background-color: #000;
  transition: 1s;
}



#line1,#line02_1,#line03_1 {
  top: 0;
}
#line2,#line02_2,#line03_2 {
  top: 14px;
}
#line3,#line02_3,#line03_3 {
  bottom: 0px;
}
#line02_1 {width: 20px; margin: auto;}
#line02_2 {width: 20px; left: 0; top: 0; bottom: 0; margin: auto;}
#line02_3 {width: 20px; left: 0; bottom: 0; margin: auto;}

.in{
  transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  background: #000;
}
.line_1 {
  transform: translateY(12px) rotate(-45deg);
  top: 0;
}
.line_2 {
opacity: 0;
}
.line_3 {
  transform: translateY(-17px) rotate(45deg);
  bottom: 0;
}
#line02_1.line_1 {width: 20px; transform: translateY(12px) rotate(-45deg); background-color: #fff;}
#line02_3.line_3 {width: 20px; transform: translateY(-17px) rotate(45deg); background-color: #fff;}
#line03_1 {top: 17px;}

#hamburger02 .inner_line {background-color: #fff;}
#hamburger02:hover .inner_line {background-color: #000;} 

#line03_3 {background: #000; bottom: 11px;}
#st_header {position: fixed; top: 0; left: 0; width: 100%; background: #fff; height: 80px; z-index: 600;}
#st_header .inner {max-width: 1200px; margin: 0 auto; box-sizing: border-box; position: static;}
#st_header .left_box {font-size: 30px; line-height: 1;}
#st_header .left_box img {margin-right: 7px;}
#st_header .global_nav .dots::before {border: 1px solid #000;}
#st_header .global_nav .dots::after {background: #000;}
#nav .inner {position: relative; z-index: 10; padding-left: 100px;}
#nav .list_box{margin-right: 70px;}
#nav .list_box a {position: relative; padding-left: 35px; font-size: 20px; line-height: 1; margin-top: 60px;}
#nav .list_box a:nth-child(1) {margin-top: 0;}
#nav .list_box a::before {content: ''; position: absolute; width: 15px; height: 1px; background: #fff; left: 0; top: 0; bottom: 0; margin: auto;}
#nav .logo_box {position: absolute; left: 40px; top: 0; bottom: 0; margin: auto; height: calc(100% - 240px); width: 145px; z-index: 10;}
.util_bar02 {width: 1px; height: 100%; position: absolute; right: 0; top: 0; transition: opacity .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); overflow: hidden; z-index: 1;}
#nav.in .util_bar02 {background: #4c4c4c; animation: show_line 1.7s forwards; transform-origin: top; transition-timing-function: cubic-bezier(.165,.84,.44,1);}
.util_bar02 .bdr {transition: background-color .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); position: relative; width: 1px; height: 100%; background-color: #fafafa; animation: loop_line 4s infinite;}
@keyframes loop_line{0%{top:-100%}100%{top:100%}}
@keyframes show_line{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@media screen and (max-width:1450px) {
#nav .logo_box,.hambarger_box {display: none;}
}
#nav .inner02 {margin-left: 100px; position: relative; z-index: 10; transition: transform 1s,opacity 1s; transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-delay: 1.4s; transform: translateY(30px); opacity: 0;}
#nav.in .inner02 {opacity: 1; transform: translateY(0);}
#nav .btn_box a {width: 300px; height: 50px; background: #3885cd; font-size: 16px; line-height: 1; position: relative; transition: transform 1s,opacity .8s; transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-delay: .8s; transform: translateX(30px); opacity: 0;}
#nav.in .btn_box a {opacity: 1; transform: translateX(0);}
#nav .btn_box a::after {content: ''; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #003a70 transparent;}
#nav .btn_box a:nth-child(2) {background: #003a70; margin-top: 30px; transition-delay: .9s;}
#nav .btn_box a:nth-child(2)::after {border-color: transparent transparent #3885cd transparent;}
#nav .txt01 {font-size: 20px; line-height: 1; box-sizing: border-box; border-bottom: 1px solid #fff; padding-bottom: 30px; margin: 75px 0  30px 100px; position: relative; z-index: 10; transition: transform 1s,opacity 1s; transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-delay: 1.1s; transform: translateY(30px); opacity: 0;}
#nav.in .txt01 {opacity: 1; transform: translateY(0);}
#nav table th,#nav table td {line-height: 2.2; font-size: 20px; font-weight: 500;}
#nav table th {padding-right: 30px;}
#nav table:nth-child(2) {margin-left: 50px;}

.util_bar01 {width: 1px; height: 100%; position: absolute; right: 0; top: 0; transition: opacity .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); overflow: hidden; z-index: 1;}
.front_main_box.inview .util_bar01 {background: #4c4c4c; animation: show_line 1.7s forwards; transform-origin: top; transition-timing-function: cubic-bezier(.165,.84,.44,1);}
.util_bar01 .bdr {transition: background-color .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); position: relative; width: 1px; height: 100%; background-color: #000; animation: loop_line 4s infinite;}
.util_bar02 {width: 1px; height: 100%; position: absolute; right: 0; top: 0; transition: opacity .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); overflow: hidden; z-index: 1;}
#nav.in .util_bar02 {background: #4c4c4c; animation: show_line 1.7s forwards; transform-origin: top; transition-timing-function: cubic-bezier(.165,.84,.44,1);}
.util_bar02 .bdr {transition: background-color .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); position: relative; width: 1px; height: 100%; background-color: #fafafa; animation: loop_line 4s infinite;}
@keyframes loop_line{0%{top:-100%}100%{top:100%}}
@keyframes show_line{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@media screen and (max-width:1450px) {
	#nav .logo_box,.hambarger_box {display: none;}
}


.nav_img {position: absolute; width: 100%; height: 100%; opacity: 0; transition-duration: .5s; transition-timing-function: ease-in-out;}
.nav_img.hover {opacity: 1;}
.nav_img01 {background: url("img/header/nav_Img01.jpg")center center no-repeat; background-size: cover;}
.nav_img02 {background: url("img/header/nav_Img02.jpg")center center no-repeat; background-size: cover;}
.nav_img03 {background: url("img/header/nav_Img03.jpg")center center no-repeat; background-size: cover;}
.nav_img04 {background: url("img/header/nav_Img04.jpg")center center no-repeat; background-size: cover;}
.nav_img05 {background: url("img/header/nav_Img05.jpg")center center no-repeat; background-size: cover;}
.nav_img06 {background: url("img/header/nav_Img06.jpg")center center no-repeat; background-size: cover;}
.nav_img07 {background: url("img/header/nav_Img07.jpg")center center no-repeat; background-size: cover;}
.nav_img08 {background: url("img/header/nav_Img08.jpg")center center no-repeat; background-size: cover;}
.nav_img09 {background: url("img/header/nav_Img09.jpg")center center no-repeat; background-size: cover;}



#nav .list_box a span {opacity: 0; transform: translate3d(130px,0,0); display: inline-block;}
#nav.in .list_box a span {opacity: 1; transition: opacity 1.6s,transform 1.6s; transition-timing-function: cubic-bezier(.165,.84,.44,1); transform: translate3d(0,0,0);}

#nav .list_box a span:nth-child(2) {transition-delay: .1s;}
#nav .list_box a span:nth-child(3) {transition-delay: .2s;}
#nav .list_box a span:nth-child(4) {transition-delay: .3s;}
#nav .list_box a span:nth-child(5) {transition-delay: .4s;}
#nav .list_box a span:nth-child(6) {transition-delay: .5s;}
#nav .list_box a span:nth-child(7) {transition-delay: .6s;}
#nav .list_box a span:nth-child(8) {transition-delay: .7s;}
#nav .list_box a span:nth-child(9) {transition-delay: .8s;}
#nav .list_box a span:nth-child(10) {transition-delay: .9s;}
#nav .list_box a span:nth-child(11) {transition-delay: 1s;}
#nav .list_box a span:nth-child(12) {transition-delay: 1.1s;}

/*index*/
#index .box01 .over {background: url("img/index/box01_bg.jpg")top left no-repeat; padding-top: 115px; position: relative; height: 884px; box-sizing:border-box; background-size: cover;}
#index .box01 .over h2 {font-size: 110px; line-height: 1.2;}
#index .box01 .over h2 p:nth-of-type(2) {font-size: 40px;}
#index .box01 .over .txt {margin-top: 180px; width: 785px; position: relative; z-index: 10;}
#index .box01 .over .txt::before {content: ''; width: 1350px; height: 525px; background: #fff; position: absolute; right: -90px; bottom: -35px;}
#index .box01 .over .txt_bg {width:  1260px; height: 520px; background: #fff; position: absolute; bottom: 0; left: -360px;} 
#index .box01 .over .txt01 {font-size: 30px; line-height: 1.6; position: relative; z-index: 10; transition-delay: .5s;}
#index .box01 .over .txt02 {font-size: 18px; line-height: 2; margin-top: 20px; position: relative; z-index: 10; transition-delay: .6s;}
.x_btn {color: #000; margin-top: -5px; width: 400px;}
.x_btn .btn_item01,.x_btn .btn_item02 {border-color: #000; border: 1px solid #000;}
.x_btn:hover {background: #000; color: #fff;}
#index .box01 .x_btn {margin: inherit; margin-top: 40px; border: 0; border-bottom: 1px solid #000;}
#index .box01 .bg02 {margin-top: 90px; clip-path: inset(0 100% 0 0); transition-duration: .5s; transition-delay: 1.2s; width: 100%;}
#index .box01.inview .bg02 {clip-path: inset(0);}
#index .title {width: 500px; margin: auto;}
#index .title p:nth-of-type(1) {font-size: 50px; line-height: 1;}
#index .title p:nth-of-type(2) {font-size: 30px; line-height: 1;}
#index .title .bdr {width: 100%; height: 2px; background: #000; margin: 20px 0;}
#index .box02 {padding: 150px 0; padding-top: 50px;}
#index .box02 .con_box {margin-top: 50px;}
#index .box02 .con {width: 50%; position: relative; padding: 100px 0;}
#index .box02 .con01 {background: url("img/index/box02_img01.jpg")top left no-repeat; background-size: cover;}
#index .box02 .con02 {background: url("img/index/box02_img02.jpg")top left no-repeat; background-size: cover;}
#index .box02 .con03 {background: url("img/index/box02_img03.jpg")top left no-repeat; background-size: cover;}
#index .box02 .con04 {background: url("img/index/box02_img04.jpg")top left no-repeat; background-size: cover;}
#index .box02 .con h3 {font-size: 20px; line-height: 1;}
#index .box02 .con .big {font-size: 40px; line-height: 1; margin-top:60px; transition-duration: .3s;}
#index .box02 .con:before {content: ''; width: 100%; height: 100%; background: rgba(0,0,0,.7); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition-duration: .3s;}
#index .box02 .con:hover::before {width: calc(100% - 60px); height: calc(100% - 60px);}
#index .box02 .con:hover .big {color:#3687d2;}
#index .box02 .con .txt {position: relative; z-index: 10;}
#index .box02 .x_btn {color: #fff; border: 1px solid #fff; margin-top: 60px; width: 300px;}
#index .box02 .x_btn .btn_item01, #index .box02 .x_btn .btn_item02 {border: 1px solid #fff;}
#index .box03 .over {position: relative;}
#index .box03 .over .bg01 {clip-path: inset(0 100% 0 0); transition-duration: .5s; width: 100%;}
#index .box03.inview .over .bg01 {clip-path: inset(0);}
#index .box03 .over h2 {background: #fff; padding: 50px 140px 0 270px; position: absolute; bottom: 0; transition-delay: .3s;}
#index .box03 .item {box-sizing: border-box; width: 280px; border-bottom: 2px solid #3687d2; padding-bottom: 20px; position: relative; transition-delay: 1s; margin-right: 26px;}
#index .box03 .item:nth-child(2) {transition-delay: 1.1s;}
#index .box03 .item:nth-child(3) {transition-delay: 1.2s;}
#index .box03 .item:nth-child(4) {transition-delay: 1.3s;}
#index .box03 .item:nth-child(5) {transition-delay: 1.4s;}
#index .box03 .item:nth-child(6) {transition-delay: 1.5s;}
#index .box03 .item:nth-child(7) {transition-delay: 1.6s;}
#index .box03 .item:nth-child(8) {transition-delay: 1.7s;}
#index .box03 .item:nth-child(4n) {margin-right: 0;}
#index .box03 .item:nth-child(n + 5) {margin-top: 60px;}
#index .box03 .img_box {position: relative; width: 100%; margin-bottom: 20px;}
#index .box03 h3 {font-size: 16px; line-height: 1.7;}
#index .box03 .tax_tag {font-size: 20px; line-height: 1; background: #262626; display: table; padding: 5px 10px; position: absolute; top: -16px; left: 5px; z-index: 10;}
#index .box03 .works_list {margin-top: 125px;}
#index .box03 .works_list .item .img_box img {transform: translate(0px, 0px); transition-duration: .5s;}
#index .box03 .works_list .item .img_box {background: #3687d2;}
#index .box03 .works_list .item:hover img {transform: translate(-5px, -5px);}
#index .box03 .x_btn {margin-top: 50px;}
#index .box03 {padding-bottom: 100px;}
#index .box04 .over {position: relative;}
#index .box04 .title {background: #fff; margin: inherit; margin-left: auto; width: 50%; position: relative; z-index: 10; padding-top: 45px; padding-left: 40px; margin-top: -165px; transition-delay: .3s;}
#index .box04 .title .bdr {width: 500px;}
#index .box04 .title p:nth-of-type(2) {padding-left: 250px;}
#index .box04 .inner_bg {height: 600px; }
#index .box04 .inner .txt {width: 600px; margin-left: auto;}
#index .box04 .inner .txt .txt01 {font-size: 35px; line-height: 1.5; transition-delay: .5s;}
#index .box04 .inner .txt .txt02 {font-size: 25px; line-height: 1; margin-top: 10px; transition-delay: .6s;}
#index .box04 .inner .txt .text {font-size: 16px; line-height: 2; margin-top: 30px; transition-delay: .7s;}
#index .box04 .x_btn {width: 300px; margin-left: auto; margin-right: 0; margin-top: 50px; border-bottom: 1px solid #000;}
#index .box04 .txt .bdr {width: 250px; height: 1px; background: #000; margin-top: auto;}
#index .box04.inview .bg01 {clip-path: inset(0);}
#index .box04 .bg01 {clip-path: inset(0 100% 0 0); transition-duration: .5s; width: 100%;}
#index .box04 .inner .img01 {position: absolute; top: 0; bottom: 0; left: -360px; margin: auto;}
@media screen and (max-width:1220px) {
	#index .box03 .item {width: 23%; margin-right: 2.6%; padding-bottom: 1%;}
	#index .box03 .item:nth-child(n + 5) {margin-top: 2.6%;}
	#index .box04 .inner .img01 {width: 100%; left: -51%;}
	#index .box04 .inner .txt {width: 49%;}
	#index .box04 .txt .bdr,#index .box04 .x_btn {width: 48%;}
}
#index .box05 {background: url("img/index/box05_bg.jpg")center center no-repeat; background-size: cover; box-sizing: border-box; background-attachment: fixed; padding: 100px 0;}
#index .box05 .title {margin: auto; width: 500px;}
#index .box05 .title .bdr {background: #fff;}
#index .box05 .title p:nth-of-type(2) {padding-left: 315px;}
#index .box05 .box {background: rgba(255,255,255,.85); border: 3px solid #3687d2; padding: 80px; margin-top: 50px;}
#index .box05 .logo {margin: auto;}
#index .box05 .txt01 {font-size: 25px; line-height: 1; margin-top: 25px;}
#index .box05 .txt02 {font-size: 50px; line-height: 1; margin: 25px 0 50px;}
#index .box05 .tel {font-size: 40px; line-height: 1;}
#index .box05 .tel span {font-size: 60px;}
#index .box05 .btn {width: 400px; font-size: 20px; line-height: 1; height: 60px; background: #3687d2; margin-left: 40px;}
#index .box05 .btn img {margin-right: 10px;}
#index .box05 .address {font-size: 20px; line-height: 1; margin-top: 20px;}
#index .box05 .address01 {margin-top: 50px;}
#index .box06 {padding: 145px 0; background: #eee;}
#index .box06 .title {margin-left: 0; margin-bottom: 80px;}
#index .box06 .item {font-size: 16px; padding: 20px 0; border-bottom: 2px solid #000;}
#index .box06 .item:nth-of-type(1) {margin-top: 0; transition-delay: 1s;}
#index .box06 .item:nth-of-type(2) {transition-delay: 1.1s;}
#index .box06 .item:nth-of-type(3) {transition-delay: 1.2s;}
#index .box06 .item:nth-of-type(4) {transition-delay: 1.3s;}
#index .box06 .item:nth-of-type(5) {transition-delay: 1.4s;}
#index .box06 .item:nth-of-type(6) {transition-delay: 1.5s;}
#index .box06 h3 {margin-top: 15px;}
#index .box06 .time {padding-right: 25px; border-right: 1px solid #000; margin-right: 25px;}
#index .box06 .x_btn {margin-top: 55px; width: 300px;}
#index .box07 {padding: 160px 0; position: relative;}
#index .box07 .bdr {width: 600px; height: 1px; background: #000; margin-top: 10px;}
#index .box07 .big_txt {font-size: 80px; padding: 100px 0; margin: auto; display: table; transition-delay: .5s;}
#index .box07 .bdr02 {margin-left: auto; transition-delay: 1s;}
#index .box07 .txt01 {font-size: 45px; line-height: 1; margin-top: 30px; transition-delay: 1s;}
#index .box07 .txt_icon {font-size: 70px; line-height: 1.2; opacity: .1; position: absolute; top: 0; right: 0;}
#index .box07 .txt_icon span {font-size: 200px;}
#index .box07 .txt_icon02 {font-size: 40px; position: absolute; top: inherit; right: inherit; bottom: -95px; left: -100px;}
#index .box07 .txt_icon02 span {font-size: 115px;}

#index .company_box table {flex: 1 0 50%; background: #fff; font-size: 16px; line-height: 2;}
#index .company_box th,#index .company_box td {box-sizing: border-box; border-top: 1px solid #000; padding: 20px; vertical-align: middle;}
#index .company_box table tr:nth-child(1) th,#index .company_box table tr:nth-child(1) td {border: none;}
#index .company_box th {width: 125px;}
#index .company_box .tab-panel {flex: 1 0 50%; height: auto;}
#index .company_box .panel-group {height: calc(100% - 70px);}
#index .company_box .tab {width: 100%; background: #003a70; position: relative; font-size: 20px; line-height: 1; transition-duration: .5s; cursor: pointer; height: 70px;}
#index .company_box .tab.is-active {background: #3885cd;}
#index .company_box .tab::after {content: ''; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #3885cd transparent; transition-duration: .5s;}
#index .company_box .tab.is-active::after {border-color: transparent transparent #003a70 transparent;}
#index .company_box .panel {display: none; height: 100%;}
#index .company_box .panel.is-show {display: block;}
#index .company_box iframe {-webkit-filter: grayscale(100%); width: 100%; height: 450px;
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;}
#index .company_box iframe:hover {-webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);}




/*========================
FOOTER
========================*/
footer {padding-top: 100px;}
footer .logo {margin: auto;}
footer .txt01 {font-size: 18px; line-height: 1; margin: 10px 0 20px;}
footer .txt02 {font-size: 40px; line-height: 1;}
footer .list:nth-of-type(1) {margin: auto; margin-top: 50px; width: 800px;}
footer .list:nth-of-type(2) {margin: auto; margin-top: 30px; width: 690px;}
footer .list {font-size: 18px; line-height: 1;}
footer .copy {background: #000; padding: 10px; font-size: 12px; line-height: 1; margin-top: 100px;}

/*contact_banner*/
#contact_banner {background: url("img/contact_banner/bg.jpg")top left repeat; padding: 115px 0;}
#contact_banner .logo {margin: auto;}
#contact_banner .txt01 {font-size: 30px; line-height: 1; margin-top: 35px;}
#contact_banner .txt02 {font-size: 50px; line-height: 1; margin: 15px 0 50px;}
#contact_banner .tel {font-size: 40px; line-height: 1;}
#contact_banner .tel span {font-size: 60px;}
#contact_banner .btn {width: 400px; font-size: 20px; line-height: 1; height: 60px; background: #3687d2; margin-left: 40px;}
#contact_banner .btn img {margin-right: 10px;}
#contact_banner .address {font-size: 20px; line-height: 1; margin-top: 20px;}
#contact_banner .address01 {margin-top: 50px;}









/*pankuzu*/
.pan {padding: 20px 0; border-bottom: 1px solid #535353; margin-bottom: 80px;}
.pan p {font-weight: bold; margin: 0 auto; line-height: 2;}
.pan a {display: inline; font-size: 14px; box-sizing: border-box; border-bottom: 2px solid #8f8f8f;}
.pan a span {font-size: 16px;}

/*========================
ページ設定
========================*/
/*
サムネ
*************/
.page_thumb {height: 500px; line-height: 1; margin-top: 100px; position: relative;}
.page_thumb p {font-size: 80px; line-height: 1; letter-spacing: 1px; z-index: 10;}
.page_thumb .min {font-size: 30px; margin-left: 20px; margin-top: 10px;}
.page_thumb .img {position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; content: ''; width: 100%;}


.thumb01 {background: url("img/thumb01.jpg")top center no-repeat;}
.thumb02 {background: url("img/thumb02.jpg")top center no-repeat;}
.thumb03 {background: url("img/thumb03.jpg")top center no-repeat;}
.thumb04 {background: url("img/thumb04.jpg")top center no-repeat;}
.thumb05 {background: url("img/thumb05.jpg")top center no-repeat;}
.thumb06 {background: url("img/thumb06.jpg")top center no-repeat;}
.thumb07 {background: url("img/thumb07.jpg")top center no-repeat;}
.thumb08 {background: url("img/thumb08.jpg")top center no-repeat;}
.thumb09 {background: url("img/thumb09.jpg")top center no-repeat;}
.thumb10 {background: url("img/thumb10.jpg")top center no-repeat;}
.thumb11 {background: url("img/thumb11.jpg")top center no-repeat;}
.single_page {z-index: 0; position: relative; padding-bottom: 120px;}

/*****************
width480px以下
*****************/
@media screen and (max-width:480px) {
.page_thumb img {
height: 120px;
}
}

/*
タイトル
*************/
.page_title {font-size: 50px; margin-bottom: 20px; line-height: 1;}
.min_page_title {font-size: 20px; line-height: 1;}

/*
記事詳細ページ
***************/
.nav_over {margin: 60px 0;}
.nav_under {margin-top: 60px;}
.navigation .next-entries,.navigation .previous-entries {width: 125px; height: 40px; line-height: 1; font-size: 14px; align-content: center; justify-content: center; box-sizing: border-box; border: none; color: #fff; text-decoration: none; display: inline-block; padding: 10px 0; transition-duration: .7s; background: url("img/blog/arrow.svg")center left 10px no-repeat; background-size: 6%;}
.navigation .next-entries {background-color: #3687d2; margin-right: 20px;}
.navigation .previous-entries {background-color: #3687d2;}
.navigation .next-entries a,.navigation .previous-entries a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.nav_archive_btn {box-sizing: border-box; font-size: 14px; line-height: 1; width: 250px; height: 40px; color: #fff; background: url("img/blog/arrow.svg")center left 10px no-repeat; background-size: 3%; background-color: #000;}
.nav_archive_btn img {margin-left: 20px;}
.news_archive_btn {background: #FFAD4D; color: #fff;}

/*ページネーション
*******************/
.paging {
clear: both;
padding: 20px 0;
position: relative;
font-size: 14px;
line-height: 14px;
text-align: center;
}
.paging-box {
display: inline-block;
}
.paging span, .paging a {
display: block;
float: left;
margin: 2px 2px 2px 0;
padding: 10px 15px 10px 15px;
text-decoration: none;
width: auto;
color: #000; /* 文字色 */
background: #ddd; /* 背景色 */
border: 1px solid #bbb;
font-weight: bold;
}
.page-of {display: none !important;}
.paging a:hover{
color: #fff; /* マウスホバー時の文字色 */
background: #ccc; /* マウスホバー時の背景色 */
}
.paging .current{
padding: 10px 15px 10px 15px;
color: #fff; /* 文字色 */
background: #ccc; /* 背景色 */
}
@media only screen and (max-width: 413px) {
.paging {
font-size: 12px;
padding-bottom: 0;
line-height: 12px;
}
.paging span, .paging a {
padding: 8px 10px 8px 10px;
}
.paging .current{
padding: 8px 10px 8px 10px;
}
}

/*IE用*/
@media all and (-ms-high-contrast: none) {
    #nav {display: none;}
    .front_contact_box .inbox12 {margin: 0;}
    #contact_banner .box {padding-bottom: 30px;}
    #index .box05 .icon {bottom: 0;}
    .ie_box {width: 100%;}
    #voice .no,#index .box06 .no {height: 53px;}
	.front_main_box .main .main_txt::after {display: none;}
	.front_main_box .movie {height: auto; width: auto; transition-delay: 0s; transition-duration: 0s;}
	.front_main_box .movie_con {background: none; transition-delay: 0s; transition-duration: 0s; clip-path: none;}
	.front_main_box .main .main_txt {transition-delay: 0s;}
	.front_main_box .main .main_txt span {transition-delay: 0s;}
}