@charset "utf-8";

/*
Theme Name: hayashidenki_child
Template: hayashidenki_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: 150px 0;}
.indent_content02 {margin-top: 80px;}
.indent_content03 {margin-top: 50px;}
#member .indent_content02 {margin-top: 110px;}

/******************************
HEADER
******************************/
/*　上に上がる動き　*/

#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);
}
}

header {background: #fff; overflow: hidden; transition-duration: .5s; position: fixed; top: 0; left: 0; right: 0; margin: auto; width: 100%; z-index: 100;}
header .inner {height: 103px;}
.global_nav {display: table; padding-top: 20px; padding-right: 60px; position: relative; transition-duration: .5s;}
.global_nav .nav_btn {display: table-cell; position: relative; line-height: 1; box-sizing: border-box; padding: 0 20px; font-size: 16px;}
header.ch_header .global_nav {padding-right: 160px;}
header.ch_header .entry {opacity: 0;}

.global_nav .dots {
position: absolute;
top: -20px;
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 #000;
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: #000;
border-radius: 50%;
-webkit-transition: .3s;
transition: .3s;
box-sizing: border-box;
}
.global_nav .nav_btn: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 .nav_btn:hover .dots::after {
opacity: 1;
-webkit-transform: scale(.8);
transform: scale(.8);
-webkit-transition: .3s;
transition: .3s;
}
.global_nav .s_entry {width: 150px; height: 40px; position: absolute; font-size: 16px; line-height: 1; opacity: 0; right: 75px; top: 0; bottom: 0; margin: auto; background: #003a70; color: #fff; transition-duration: .5s;}
.global_nav .s_entry::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;}
header.ch_header .global_nav .s_entry {opacity: 1;}
.util_bar01 {width: 1px; height: 100%; position: absolute; right: -185px; 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: #fff; 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: #4c4c4c; animation: loop_line 4s infinite;}
#nav{
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #151515;
transition: .7s;
z-index: 600;
}
.hamburger02_box {position: fixed; top: -30px; left: 0; right: 0; margin: auto; width: 100%; max-width: 1200px; z-index: 700;}
.hambarger_box {content: ''; position: absolute; left: 0; top: 0; bottom: 0; z-index: 500; margin: auto; box-sizing: border-box; height: calc(100% - 120px);}
.hambarger_box .bg {content: ''; background: #151515; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; height: 100%; width: 180px; -webkit-transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
    transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
    transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
    transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s, -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s; clip-path: inset(0 100% 0 0);}
.front_main_box.inview .hambarger_box .bg {clip-path: inset(0);}




#hamburger,#hamburger02,#hamburger03,#hamburger04 {
display: block;
width: 60px;
height: 30px;
cursor: pointer;
transition: 1s;
position: absolute;
left: 65px;
top: 0; bottom: 0; margin: auto; z-index: 500;
}
#hamburger02 {position: absolute; z-index: 700; left: 0; right: 0; display: block;
width: 60px;
height: 30px;
cursor: pointer;
transition: 1s;
top: 0;
bottom: 0;
margin: auto;
}
#hamburger03 {position: absolute; left: inherit; width: 40px; height: 30px; z-index: 700; right: 0; top: 0; bottom: auto;}
.inner_line {
display: block;
position: absolute;
left: 0;
width: 35px;
height: 1px;
background-color: #fff;
transition: 1s;
border-radius: 4px;
}
#hamburger04 {position: absolute; left: inherit; width: 35px; height: 30px; z-index: 700; right: 0; top: 0; bottom: 0; margin: auto; opacity: 0;}
header.ch_header #hamburger04 {opacity: 1;}



#hamburger02 .inner_line {background-color: #000;}
#line1,#line02_1,#line03_1,#line04_1 {
top: 0;
}
#line2,#line02_2,#line03_2,#line04_2 {
top: 14px;
}
#line3,#line02_3,#line03_3,#line04_3 {
bottom: 0px;
}
#line02_1 {width: 60px;}
#line02_2 {width: 60px; left: inherit; right: 0; top: 15px;}
#line02_3 {width: 60px; left: inherit; right: 0; background: #fff;}
#line03_1.line_1,#line04_1.line_1 {width: 40px; transform: translateY(12px) rotate(-45deg);}
#line03_2.line_2,#line04_2.line_2 {width: 40px; left: inherit; right: 0; top: 15px; background-color: #fff;}
#line03_3.line_3,#line04_3.line_3 {width: 40px; transform: translateY(-17px) rotate(45deg); background-color: #fff;}

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

#line02_1.line_1 {width: 60px; transform: translateY(12px) rotate(-45deg); background-color: #fff;}
#line02_3.line_3 {width: 60px; transform: translateY(-17px) rotate(45deg); background-color: #fff;}
#nav .inner {padding-left: 100px; position: relative; z-index: 10;}
#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:1625px) {
#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;}


.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 .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;}

/*slide*/
.front_main_box .box {height: 100%;}
.front_main_box .box::after {content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 0 965px 1305px; border-color: transparent transparent #151515 transparent; bottom: 0; right: -350px; z-index: 10; -webkit-transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 2s;
    transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.1s;
    transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.1s;
    transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.1s, -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 2.1s;
    clip-path: inset(0 0 100% 0);}
.front_main_box.inview .box::after {clip-path: inset(0);}

.front_main_box .txt01 {position: relative; z-index: 30;}
.front_main_box .txt01 p {font-size: 57px; line-height: 1; display: table; position: relative; padding: 10px 15px;}
.front_main_box .txt01 p:nth-child(2) {margin-top: 20px;}
.front_main_box .txt01 p::before {content: ''; background: #000; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.1s;
    transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.1s;
    transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.1s;
    transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.1s, -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.1s; clip-path: inset(0 100% 0 0);}
.front_main_box .txt01 p:nth-child(2)::before {transition-delay: 1.2s;}
.front_main_box.inview .txt01 p::before {clip-path: inset(0);}
.front_main_box .txt01 p span {position: relative; z-index: 10; opacity: 0; transition-duration: .5s; transition-delay: 1.1s;}
.front_main_box .txt01 p:nth-child(2) span {transition-delay: 1.2s;}
.front_main_box.inview .txt01 p span {opacity: 1;}
.front_main_box .txt02 {line-height: 1.6; margin: 5% 0 7%; font-size: 30px; letter-spacing: 2px; margin-left: 20px; transition-delay: 1.2s; transition-duration: .6s;}
.front_main_box .txt03 {font-size: 25px; line-height: 1.5; transition-delay: 1.6s;}
.front_main_box .txt03 .bdr {width: 30px; height: 115px; position: relative; margin-right: 25px; -webkit-transition: -webkit-clip-path 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
    transition: -webkit-clip-path 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
    transition: clip-path 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
    transition: clip-path 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-clip-path 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s; animation: loop_bdr02 4s infinite normal;}

.front_main_box .txt03 .bdr span {content: ''; width: 100%; height: 100%; background: #3785cf; display: block;}
.front_main_box .slide_box {position: absolute; right: -360px; bottom: 0; width: 1110px; 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;}
.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: absolute; right: 0; z-index: 20; overflow: inherit; margin: auto; bottom: -35px;}
.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: -45px; right: 0px; 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: 471px; 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;
}



/*index*/
#index section {position: relative;}
#index .title {font-size: 50px; line-height: 1; letter-spacing: 5px;}
#index .icon_bdr {content: ''; position: absolute; max-width: 1200px; margin: 0 auto; top: 0; left: 0; right: 0; -webkit-transition: -webkit-clip-path 4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s;
transition: -webkit-clip-path 4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s; transition: clip-path 4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s; transition: clip-path 4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s, -webkit-clip-path 4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s; animation: loop_bdr 10s infinite normal;
}
@keyframes loop_bdr{
0%{-webkit-clip-path: inset(0 100% 0 0);clip-path: inset(0 100% 0 0);}
1% {-webkit-clip-path: inset(0 100% 0 0);clip-path: inset(0 100% 0 0);}
35%{-webkit-clip-path: inset(0);clip-path: inset(0);}
65%{-webkit-clip-path: inset(0);clip-path: inset(0);}
99% {-webkit-clip-path: inset(0 0 0 100%);clip-path: inset(0 0 0 100%);}
100%{-webkit-clip-path: inset(0 0 0 100%);clip-path: inset(0 0 0 100%);}
}
@keyframes loop_bdr02{
0%{-webkit-clip-path: inset(0 0 100% 0);clip-path: inset(0 0 100% 0);}
1% {-webkit-clip-path: inset(0 0 100% 0);clip-path: inset(0 0 100% 0);}
25%{-webkit-clip-path: inset(0);clip-path: inset(0);}
74%{-webkit-clip-path: inset(0);clip-path: inset(0);}
99% {-webkit-clip-path: inset(100% 0 0 0);clip-path: inset(100% 0 0 0);}
100%{-webkit-clip-path: inset(100% 0 0 0);clip-path: inset(100% 0 0 0);}
}


#index .icon_bdr span {display: block; content: ''; width: 200px; height: 20px; background: #3885cd;}


#index h2 {font-size: 16px; margin-top: 15px; transition-delay: .2s;}
#index .box01 {background: url("img/index/box01_bg.jpg")center center no-repeat; background-attachment: fixed;}
#index .box01 h2 {font-size: 35px; line-height: 1.4; margin: 80px auto 50px; transition-delay: .2s;}
#index .box01 .txt01 {font-size: 16px; line-height: 2;}
#index .box01 .txt01 span {transition-delay: .8s; animation-delay: .9s;}
#index .box01 .txt02 {font-size: 40px; line-height: 1.3; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: absolute; left: -80px; bottom: -100px; letter-spacing: 5px; transition-delay: .4s;}
#index .box01 .pin_btn {margin: 0 auto; transition-delay: 1.1s;}
#index .box01 .pin_btn p {border: 1px solid #fff; background: none; margin: 80px auto 0;}
#index .box01 .pin_btn:hover p {background: #3885cd; border-color: #3885cd;}
#index .box01 .pin_btn p::after {background: #fff;}
#index .box02 {background: url("img/index/box02_bg02.jpg")top left repeat;}
#index .box02 .inner::before {content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 520px 0 0 620px; border-color: transparent transparent transparent #151515; left: -369px; bottom: -150px; -webkit-transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s, -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
clip-path: inset(0 100% 0 0); transition-delay: 1.9s;}
#index .box02.inview .inner::before {clip-path: inset(0);}
#index .box02 .inner::after {content: ''; background: url("img/index/box02_bg01.svg")no-repeat; width: 975px; height: 835px; bottom: -150px; right: -340px; position: absolute;}
#index .box02 .txt01 {font-size: 25px; line-height: 1.8; margin: 40px auto 25px; transition-delay: .5s;}
#index .box02 .txt02 {font-size: 16px; line-height: 2.3; width: 630px;}
#index .box02 .txt02 span {transition-delay: .9s; animation-delay: .9s;}
#index .box02 .pin_btn {margin-top: 40px; transition-delay: 1.1s;}
#index .box02 .right_box {position: absolute; right: 50px; bottom: 60px; margin: auto; width: 430px; height: 410px;}
#index .box02 .icon_box {font-size: 18px; line-height: 1; position: absolute; opacity: 0; transition-duration: .5s;}
#index .box02.inview .icon_box {opacity: 1;}
#index .box02 .icon {margin-bottom: 10px;}
#index .box02 .logo {opacity: 0; transition-duration: .7s; transition-delay: .7s;}
#index .box02.inview .logo {opacity: 1;}
#index .box02 .right_box .icon_box:nth-of-type(1) {top: -40px; left: 0; right: 0; margin: auto; text-align: center; transition-delay: 1s;}
#index .box02 .right_box .icon_box:nth-of-type(2) {top: 85px; right: -50px; transition-delay: 1.1s;}
#index .box02 .right_box .icon_box:nth-of-type(3) {right: -50px; bottom: 110px; transition-delay: 1.2s;}
#index .box02 .right_box .icon_box:nth-of-type(4) {bottom: -15px; right: 95px; transition-delay: 1.3s;}
#index .box02 .right_box .icon_box:nth-of-type(5) {left: -45px; bottom: 50px; transition-delay: 1.4s;}
#index .box02 .right_box .icon_box:nth-of-type(6) {left: -65px; top: 105px; transition-delay: 1.5s;}
#index .box02 .right_box .icon_box::after {content: ''; position: absolute; opacity: 0; transition-duration: .5s;}
#index .box02.inview .right_box .icon_box::after {opacity: 1;}
#index .box02 .right_box .icon_box:nth-of-type(1)::after {background: url("img/index/box02_bdr01.svg")no-repeat; width: 61px; height: 43px; top: 60px; right: 60px;}
#index .box02 .right_box .icon_box:nth-of-type(2)::after {background: url("img/index/box02_bdr02.svg")no-repeat; width: 7px; height: 68px; right: 45px; bottom: -90px;}
#index .box02 .right_box .icon_box:nth-of-type(3)::after {background: url("img/index/box02_bdr03.svg")no-repeat; width: 65px; height: 55px; right: 80px; bottom: -85px;}
#index .box02 .right_box .icon_box:nth-of-type(4)::after {background: url("img/index/box02_bdr04.svg")no-repeat; width: 89px; height: 32px; bottom: 10px; left: -125px;}
#index .box02 .right_box .icon_box:nth-of-type(5)::after {background: url("img/index/box02_bdr05.svg")no-repeat; width: 16px; height: 88px; left: 55px; top: -115px;}
#index .box02 .right_box .icon_box:nth-of-type(6)::after {background: url("img/index/box02_bdr06.svg")no-repeat; width: 59px; height: 59px; top: -80px; left: 110px;}
#index .box03 .pin_btn {margin: 100px auto 0; transition-delay: .9s;}
#index .box03 .slider-box {position: relative; transition-delay: .5s;}
#index .box03 .swiper-container.is-swipable {opacity: 1;}
#index .box03 .swiper-container {-webkit-transition: opacity 200ms;
transition: opacity 200ms;}
#index .box03 .swiper-container.is-start {opacity: 0;}
#index .box03 .swiper-slide {
width: calc(100% / 3); position: relative; height: 370px; line-height: 1; padding-top: 50px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
#index .box03 .swiper-slide {-webkit-backface-visibility: hidden;
backface-visibility: hidden; display: flex; align-items: center; justify-content: center;}
#index .box03 .swiper-slide {margin-top: 38px;
opacity: 0;
pointer-events: none;
position: relative;
-webkit-transition: 0ms 200ms;
transition: 0ms 200ms;
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px);}

#index .box03 .is-end .swiper-slide.swiper-slide-active, #index .box03 .is-end .swiper-slide.swiper-slide-prev, #index .box03 .is-end .swiper-slide.swiper-slide-next {opacity: 1;
pointer-events: auto;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
#index .box03 .is-end .swiper-slide.swiper-slide-prev {-webkit-transition: opacity 500ms, -webkit-transform 500ms;
transition: opacity 500ms, -webkit-transform 500ms;
transition: opacity 500ms, transform 500ms;
transition: opacity 500ms, transform 500ms, -webkit-transform 500ms;
}
#index .box03 .swiper-slide.swiper-slide-active {margin-top: 0;}
#index .box03 .is-end .swiper-slide.swiper-slide-active {-webkit-transition: opacity 500ms 150ms, -webkit-transform 500ms 150ms;
transition: opacity 500ms 150ms, -webkit-transform 500ms 150ms;
transition: opacity 500ms 150ms, transform 500ms 150ms;
transition: opacity 500ms 150ms, transform 500ms 150ms, -webkit-transform 500ms 150ms;}
#index .box03 .is-end .swiper-slide.swiper-slide-next {transition: opacity 500ms 300ms, -webkit-transform 500ms 300ms;
transition: opacity 500ms 300ms, transform 500ms 300ms;
transition: opacity 500ms 300ms, transform 500ms 300ms, -webkit-transform 500ms 300ms;}

#index .box03 .txt01 {position: absolute; font-size: 50px; line-height: 1; left: 0; top: 0; transform: skew(-10deg, -10deg); bottom: 0;}
#index .box03 .txt_box {position: absolute; right: 30px; bottom: 0; padding-bottom: 20px; padding-right: 20px;}
#index .box03 .txt02 {font-size: 30px; display: table; background: #151515; padding: 5px 10px; position: relative; z-index: 10; letter-spacing: 2px;}
#index .box03 .txt03 {font-size: 16px; display: table; background: #151515; padding: 5px 10px; margin: 10px 0; position: relative; z-index: 10; letter-spacing: 2px;}
#index .box03 .txt04 {font-size: 16px; padding-left: 10px; position: relative; z-index: 10; letter-spacing: 2px;}
#index .box03 .triangle {content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 0 178px 280px; border-color: transparent transparent #3885cd transparent; bottom: 0; right: 0;}
#index .box03 .arrow_box {position: absolute; width: 100%; top: 0; bottom: 0; margin: auto; z-index: -1; -webkit-transition: opacity 500ms, -webkit-transform 500ms; transition: opacity 500ms, -webkit-transform 500ms; transition: opacity 500ms, transform 500ms; transition: opacity 500ms, transform 500ms, -webkit-transform 500ms; opacity: 0; transition-delay: 1.3s;}
#index .box03.inview .arrow_box {opacity: 1;}
#index .box03 .human_swiper-button-prev {position: absolute; left: 0; top: 0; bottom: 0; margin: auto; cursor: pointer;}
#index .box03 .human_swiper-button-next {position: absolute; right: 0; top: 0; bottom: 0; margin: auto; cursor: pointer;}
#index .box03 .txt02 span,#index .box03 .txt03 span,#index .box03 .txt04 span {transform: skewX(-10deg); display: block;}
#index .box03 .img {margin: auto;}
#index .c_bg {height: 460px; width: 1920px; position: relative; left: 50%; margin-left: -960px;}
#index .c_bg span {content: ''; position: absolute; bottom: 0;}
#index .c_bg span:nth-child(1) {left: 0; width: 0; height: 0; border-style: solid; border-width: 384px 0 0 1920px; border-color: transparent transparent transparent #151515; opacity: .15; bottom: 130px; -webkit-transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .2s, -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
clip-path: inset(0 100% 0 0);}
#index .c_bg span:nth-child(2) {background: url("img/index/c_bg02.svg")no-repeat; width: 1920px; height: 423px; right: 0; z-index: 10; -webkit-transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .5s, -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
clip-path: inset(0 0 0 100%); transition-delay: .5s;}
#index .c_bg.inview span:nth-child(1),#index .c_bg.inview span:nth-child(2) {clip-path: inset(0);}

#index .box04 {background: url("img/index/box04_bg.jpg")top left repeat;}
#index .box04 .min {font-size: 20px; line-height: 1; margin-left: 45px; letter-spacing: 2px;}
#index .box04 .tab-panel {margin-top: 50px; box-shadow: 0 0 5px rgba(0 0 0 / 35%); transition-delay: .5s;}
#index .box04 .tab-group{display: flex; justify-content: center;}
#index .box04 .tab{flex-grow: 1; padding:25px 0; font-size: 25px; line-height: 1; list-style:none; border:solid 1px #CCC; text-align:center; cursor:pointer; background: #151515; color: #fff;}
#index .box04 .panel-group{border:solid 1px #CCC; border-top:none; background:#fff;}
#index .box04 .panel{display:none;}
#index .box04 .tab.is-active{background:#3885cd; transition: all 0.2s ease-out;}
#index .box04 .panel.is-show{display:block;}
#index .box04 .accordion .inner {display: none; margin-bottom: 40px;}
#index .box04 .accordion .inner.open {display: block;}
#index .box04 .accordion p {cursor: pointer; font-size: 20px; color: #292c32; font-weight: 500; position: relative; padding: 40px 0;}
#index .box04 .accordion p::after {content: ''; position: absolute; background: url("img/index/box04_arrow.svg")no-repeat; width: 8px; height: 11px; right: 0; top: 0; bottom: 0; margin: auto; transition-duration: .5s;}
#index .box04 .accordion .inner li{padding: 10px 0;}
#index .box04 .accordion li {padding: 0 40px; box-sizing: border-box; border-bottom: 2px dotted #dfdfdf; margin-bottom: 0;    position: relative;}
#index .box04 table {box-sizing: border-box; border: 2px solid #dfdfdf; width: 100%;}
#index .box04 th,#index .box04 td {font-size: 18px; padding: 15px; box-sizing: border-box; border-bottom: 2px solid #dfdfdf; vertical-align: middle; font-weight: 500; color: #292c32;}
#index .box04 th {border-right: 2px solid #dfdfdf;}
#index .box04 .accordion li.gray_af::after {content: ''; position: absolute; background: rgba(0,0,0,.7); width: 100%; height: 100%; z-index: 10; top: 0; left: 0;}
#index .box05 {background: url("img/index/box05_bg.jpg")center center no-repeat;}
#index .box05 .inner {background: #151515; padding: 20px; box-sizing: border-box; margin-top: 50px;}
#index .box05 .inner a {box-sizing: border-box; background: #fff; transition-duration: .5s; width: 373px; height: 218px; padding: 5px; position: relative; overflow: hidden;}
#index .box05 .inner .item:nth-child(1) {transition-delay: .5s;}
#index .box05 .inner .item:nth-child(2) {transition-delay: .6s;}
#index .box05 .inner .item:nth-child(3) {transition-delay: .7s;}
#index .box05 .con {width: 100%; height: 100%; position: relative; line-height: 1;}
#index .box05 .con div {position: relative;}
#index .box05 .icon {margin: auto; transition-duration: .5s;}
#index .box05 .on {position: absolute; left: 0; right: 0; top: 0; z-index: 10; opacity: 0;}
#index .box05 .txt01 {font-size: 25px; margin: 30px auto 10px;}
#index .box05 .txt02 {font-size: 14px;}
#index .box05 .triangle {position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 31px 31px; border-color: transparent transparent #3885cd transparent; transition-duration: .5s;}
#index .box05 .inner a::before,#index .box05 .inner a::after,#index .box05 .item .con::before,#index .box05 .item .con::after {content: ''; position: absolute; background: #fff; transition-duration: .3s; transition-timing-function: ease-in-out; z-index: 10; opacity: 0;}
#index .box05 .inner a::before {bottom: 5px; left: -100%; width: calc(100% - 10px); height: 1px; transition-delay: .3s;}
#index .box05 .inner a::after {bottom: -100%; right: 5px; width: 1px; height: calc(100% - 10px); transition-delay: .5s;}
#index .box05 .item .con::before {top: 0; right: -100%; width: calc(100%); height: 1px; transition-delay: .3s;}
#index .box05 .item .con::after {top: -100%; left: 0; width: 1px; height: calc(100%); transition-delay: .5s;}
#index .box05 .inner a:hover::before {left: 5px; opacity: 1;}
#index .box05 .inner a:hover::after {bottom: 5px; opacity: 1;}
#index .box05 .inner a:hover .con::before {right: 0px; opacity: 1;}
#index .box05 .inner a:hover .con::after {top: 0px; opacity: 1;}
#index .box05 .inner a:hover {background: #3885cd; color: #fff;}
#index .box05 .inner a:hover .on {opacity: 1;}
#index .box05 .inner a:hover .triangle {border-color: transparent transparent #fff transparent;}
#index .box06 {background: url("img/index/box06_bg.jpg")center center no-repeat;}
#index .box06 h2 {display: table; font-size: 25px; line-height: 1; position: relative; margin: 0 auto; transform: rotate(-6deg) skewX(-9deg); letter-spacing: 8px; opacity: 0; transition-duration: .5s;}
#index .box06.inview h2 {opacity: 1;}
#index .box06 h2 span {font-size: 80px;}
#index .box06 h2::after {content: ''; position: absolute; background: url("img/index/box06_arrow.svg")no-repeat; width: 543px; height: 69px; bottom: -65px; left: -35px; transform: rotate(6deg) skewX(9deg); transition-duration: .5s; clip-path: inset(0 100% 0 0); transition-delay: .95s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);}
#index .box06.inview h2::after {clip-path: inset(0);}
#index .box06 .pin_btn {margin: 150px auto 0; transition-delay: .2s;}
#index .box06 .pin_btn:hover p {background: #fff; color: #3885cd;}
#index .box06 .pin_btn p::after {background: #fff;}
#index .box07 {background: url("img/index/box07_bg.jpg")top left repeat;}
#index .box07 .list {margin: 50px auto 80px;}
#index .box07 .item {box-sizing: border-box; border-bottom: 1px solid #3885cd; padding: 30px 0;}
#index .box07 .list .item:nth-child(1) {padding-top: 0; transition-delay: .5s}
#index .box07 .list .item:nth-child(2) {transition-delay: .6s;}
#index .box07 .list .item:nth-child(3) {transition-delay: .7s;}
#index .box07 .time {font-size: 16px; line-height: 1;}
#index .box07 .tag {width: 74px; height: 21px; font-size: 14px; line-height: 1; margin-left: 10px;}
#index .box07 h3 {font-size: 14px; margin-top: 20px;}
#index .box07 .pin_btn {margin: 0 auto; transition-delay: .9s;}
#index .for_top {background: #151515; padding: 20px 0;}
#index .for_top p {font-size: 25px; line-height: 1; margin-left: 20px;}
#index .box08 {background: url("img/index/box08_bg.svg")top 90px center no-repeat; background-color: #fff; position: relative;}
#index .box08 .txt01 {font-size: 40px; line-height: 1; margin: 80px auto; display: table; padding-left: 40px;}
#index .box08 .icon {position: relative; z-index: 10;}
#index .box08 .bg {position: absolute; bottom: 0; left: 0; width: 100%; height: 350px; background: linear-gradient(to bottom, #d5d5d5, #e9e9e9);}
#index .box08 .pin_btn {margin: 80px auto 0; z-index: 10;}
#index .company_box table {flex: 1 0 50%; background: #000; font-size: 16px; line-height: 2;}
#index .company_box th,#index .company_box td {box-sizing: border-box; border-top: 1px solid #fff; 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: 50%; 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: 100%;
-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 {background: url("img/footer/bg.jpg")top center no-repeat; padding-top: 80px;}
footer nav {margin: 80px auto 50px;}
footer nav a {font-size: 20px; line-height: 1; margin-left: 40px;}
footer nav a:nth-child(1) {margin-left: 0;}
footer .btn_box a {width: 300px; height: 50px; background: #3885cd; position: relative; font-size: 16px; line-height: 1; box-shadow: 0 0 6px rgba(0 0 0 / 30%);}
footer .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;}
footer .btn_box a:nth-child(2) {background: #003a70; margin-left: 50px;}
footer .btn_box a:nth-child(2)::after {border-color: transparent transparent #3885cd transparent;}
footer .copy {background: #151515; font-size: 12px; line-height: 1; padding: 10px 0; margin-top: 80px; letter-spacing: 1px;}


/*pankuzu*/
.pan {padding: 80px 0;}
.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: 550px; line-height: 1; margin-top: 103px;}
.single_page {z-index: 0; position: relative; padding-bottom: 120px;}
.page_thumb .txt01 {font-size: 50px; line-height: 1; margin-bottom: 20px;}
.page_thumb .txt02 {font-size: 16px; line-height: 1;}
.page_thumb .thumb {position: absolute; right: -360px; top: 0; bottom: 0; margin: auto;}

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

/*
タイトル
*************/
.page_title {font-size: 35px; letter-spacing: 2px;}
.page_sub_title {font-size: 16px; line-height: 1; margin-top: 15px; margin-bottom: 80px;}


/*
記事詳細ページ
***************/
.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;}
.navigation .next-entries {background-color: #3885cd; margin-right: 20px;}
.navigation .previous-entries {background-color: #003a70;}
.navigation .next-entries:active,.navigation .previous-entries:active {-webkit-transform: translateY(4px); transform: translateY(4px);border-bottom: none;}
.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; background: #000; color: #fff;}
.nav_archive_btn:active {-webkit-transform: translateY(4px); transform: translateY(4px);border-bottom: none;}
.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;}


}