@charset "utf-8";

/*
Theme Name: t-front_child
Template: t-front_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: #218dc4; padding: 15px 0; line-height: 1; transition-duration: .5s; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; box-sizing: border-box; height: 118px;}
header .inbox12 {padding-right: 80px;}
header .tel {font-size: 18px; margin-bottom: 10px; background: #fff; width: 526px; height: 38px; color: #218dc4;}
header .tel span {font-size: 35px; margin-left: 10px; margin-top: -3px;}
header .mail_box a {box-sizing: border-box; width: 255px; height: 40px; font-size: 16px; background: #5eb9d8;}
header .mail_box a:nth-child(2) {background: #ffa22a; margin-left: 15px;}
/*　上に上がる動き　*/

#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: #218dc4;
  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;
}
#hamburger02 {position: absolute; left: auto; width: 40px; height: 30px; z-index: 700; right: 0; top: 42px; bottom: 0; margin: 0;}
#hamburger03 {position: absolute; z-index: 700; left: 0; right: 0;}
.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: #fff;
  transition: 1s;
}
#hamburger02 .inner_line {background-color: #fff;}
#line1,#line02_1,#line03_1 {
  top: 0;
}
#line2,#line02_2,#line03_2 {
  top: 14px;
}
#line3,#line02_3,#line03_3 {
  bottom: 0px;
}
#line02_1 {width: 40px;}
#line02_2 {width: 40px; left: inherit; right: 0; top: 15px;}
#line02_3 {width: 40px; left: inherit; right: 0;}
#line03_3 {background: #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;
}
#line02_1.line_1 {width: 40px; transform: translateY(12px) rotate(-45deg); background-color: #fff;}
#line02_3.line_3 {width: 40px; transform: translateY(-17px) rotate(45deg); background-color: #fff;}
#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 {padding-left: 100px; position: relative; z-index: 10;}
#nav .list_box:nth-of-type(2),#nav .list_box:nth-of-type(3) {margin-left: 70px;}
#nav .list_box a {position: relative; padding-left: 35px; font-size: 20px; line-height: 1; margin-top: 55px;}
#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 .txt01 {font-size: 20px; margin-top: 70px; margin-left: 100px; box-sizing: border-box; border-bottom: 1px solid #fff; padding-bottom: 30px; opacity: 0; transition: transform 1s,opacity 1s; transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-delay: 1.1s; transform: translateY(30px); position: relative; z-index: 10;}
#nav.in .txt01 {opacity: 1; transform: translateY(0);}
#nav .inner02 {margin: 30px 0 0 100px; opacity: 0; transition: transform 1s,opacity 1s; transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-delay: 1.4s; transform: translateY(30px); position: relative; z-index: 10;}
#nav.in .inner02 {opacity: 1; transform: translateY(0);}
#nav table {font-size: 20px; line-height: 1.5;}
#nav table th,#nav table td {padding-right: 120px; font-weight: 500;}
#nav table tr:nth-of-type(2) th,#nav table tr:nth-of-type(2) td {padding-top: 20px;}
#nav .txt02 {font-size: 20px; line-height: 1; margin-bottom: 20px;}


#nav .logo_box {position: absolute; left: 40px; top: 0; bottom: 0; margin: auto; height: calc(100% - 240px); width: 145px; z-index: 10;}
.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: #218dc4; 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_img10 {background: url("img/header/nav_Img10.jpg")center center no-repeat; background-size: cover;}
.nav_img11 {background: url("img/header/nav_Img11.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;}

.front_main_box {background: #fff; overflow: hidden; position: relative; margin-top: 118px;}
.front_main_box .box {padding: 90px 0 110px;}
.front_main_box .txt01 {font-size: 80px; line-height: 1.2; margin-right: 40px; text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px; position: relative; z-index: 10; letter-spacing: 10px; transition-delay: .6s;}
.front_main_box .txt02 {font-size: 48px; line-height: 1; padding: 10px 0; letter-spacing: 5px; word-break: keep-all; overflow: hidden;}
.front_main_box .txt02 p {transform: translate(0, 120%); transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; transition-delay: 1.3s;}
.front_main_box.inview .txt02 p {transform: translate(0, 0);}
.front_main_box.inview .txt02:nth-child(2) p {transition-delay: 1.5s;}
.front_main_box .txt03 {font-size: 25px; line-height: 1.7; letter-spacing: 3px; margin-top: 10px;}
.front_main_box .txt03 span {animation-duration: .8s; transition-delay: 2s; animation-delay: 2s;}
.front_main_box .txt03 span:nth-of-type(2) {transition-delay: 2.2s; animation-delay: 2.2s;}
.front_main_box .img {position: absolute; top: 0; left: -600px; transition-delay: .9s;}
.front_main_box .text {margin-left: auto; margin-top: 50px; opacity: 0; transition-duration: .5s; transform: translateX(-20px); transition-delay: 2.7s;}
.front_main_box.inview .text {opacity: 1; transform: translate(0);}
.front_main_box .bg01 {position: absolute; left: 50%; bottom: -202px; width: 2000px; height: 300px; margin-left: -1000px; z-index: 10;}
.front_main_box .bg01 span {content: ''; background: #1c314c; width: 100%; height: 100%; display: block; transform: rotate(-3deg); -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    -webkit-transition: -webkit-clip-path 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    transition: -webkit-clip-path 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    transition: clip-path 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) .3s;
    transition: clip-path 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) .3s, -webkit-clip-path 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) .3s;}
.front_main_box.inview .bg01 span {-webkit-clip-path: inset(0); clip-path: inset(0);}
.front_main_box .txt04 {font-size: 20px; line-height: 1.4; position: absolute; left: 0; right: 0; margin: auto; z-index: 60; width: 500px; bottom: 50px; height: 70px; transition-delay: 2.8s;}
.front_main_box .txt04 span {position: relative; z-index: 70;}
.front_main_box .txt04::after {content: ''; background: #218dc4; transform: skewX(-15deg); width: 100%; height: 70px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.front_contact_box {  background: linear-gradient(90deg, #218dc4 0%, #218dc4 50%, #ffa22a 50%, #ffa22a 100%); height: 185px; position: relative; z-index: 50;}
.front_contact_box::before {content: ''; position: absolute; width: 2000px; height: 100%; background: #fff; top: 0; left: 0; z-index: 50; transition-duration: 1.3s;
    /* width: 200%; */
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateX(0); transition-delay: .3s;}
.front_contact_box.inview::before {transform: translateX(100%);}
.front_contact_box .inbox12 {height: 100%;}
.front_contact_box .box {position: relative;}
.front_contact_box .box:nth-child(2) {transition-delay: 3.5s;}
.front_contact_box .box:nth-child(1) {margin-right: 40px; transition-delay: 3.3s;}
.front_contact_box .txt01 {font-size: 25px;line-height: 1; position: absolute; display: inline-block; top: -55px; left: 0;}
.front_contact_box .txt01::before {content: ''; position: absolute; background: #fff; width: 412px; height: 45px; transform: skewX(-15deg); top: 0; bottom: 0; right: -70px; margin: auto;}
.front_contact_box .box:nth-child(2) .txt01::before {left: -20px; right: auto;}
.front_contact_box .txt01 span {position: relative; z-index: 10;}
.front_contact_box .txt02 {font-size: 30px; line-height: 1.4; position: relative;}
.front_contact_box .txt02 .big {font-size: 40px;}
.front_contact_box .txt02::before {content: ''; position: absolute; bottom: -20px; left: 0; width: 100%; height: 1px; background: #fff; transition-duration: .3s;}
.front_contact_box .txt02::after {content: ''; position: absolute; bottom: -16px; right: -2px; width: 12px; height: 1px; background: #fff; transform: rotate(45deg); transition-duration: .3s;}
.front_contact_box .box:nth-child(2) .txt02::before {left: inherit; right: 0;}
.front_contact_box .box:nth-child(2) .txt02::after {transform: rotate(-45deg); right: inherit; left: -2px;}
.front_contact_box .txt02:hover::before {width: calc(100% - 40px);}
.front_contact_box .txt02:hover::after {right: 38px;}
.front_contact_box .box:nth-child(2) .txt02:hover::before {}
.front_contact_box .box:nth-child(2) .txt02:hover::after {left: 38px;}


.front_contact_box .icon01 {position: absolute; left: 0; bottom: 5px; opacity: 0;
    transition: opacity 1250ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 1250ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate(0, 20px); transition-delay: 3.3s;}
.front_contact_box .icon02 {position: absolute; right: 0; bottom: 5px; opacity: 0;
    transition: opacity 1250ms cubic-bezier(0.215, 0.61, 0.355, 1), transform 1250ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate(0, 20px); transition-delay: 3.5s;}
.front_contact_box.inview .icon01,.front_contact_box.inview .icon02 {opacity: 1; transform: translate(0);}

/*index*/
#index .box01 {box-sizing: border-box; background: url("img/index/box01_bg.jpg")top left repeat; padding-top: 40px; position: relative;}
#index .box01 h2 {font-size: 80px; line-height: 1.2; transform: skewX(-10deg); position: relative; z-index: 30; letter-spacing: 2px;}
#index .box01 h2 p {transition-delay: 1s;}
#index .box01 h2 p:nth-of-type(2) {transition-delay: 1.2s;}
#index .box01 h2 span {font-size: 100px;}
#index .box01 .txt01 {font-size: 15px; line-height: 2.2; margin: 100px auto 30px; z-index: 10;}
#index .box01 .txt01 span {width: 560px; display: block; transition-delay: 1.7s; animation-delay: 1.7s;}
#index .box01 .txt02 {font-size: 35px; line-height: 1; z-index: 10;}
#index .box01 .txt02 p {margin-top: 20px; transition-delay: 2.1s;}
#index .box01 .txt02 p:nth-child(2) {transition-delay: 2.2s;}
#index .box01 .btn_box {padding: 60px 0; position: relative; z-index: 20;}
#index .box01 .btn_box::after {content: ''; position: absolute; background: url("img/index/box01_human.svg")no-repeat; width: 750px; height: 385px; right: -160px; bottom: 190px; opacity: 0; transition-duration: .5s; transform: translateY(10px); transition-delay: 2.4s;}
#index .box01.inview .btn_box::after {opacity: 1;}
#index .box01 .btn_box a {box-sizing: border-box; width: 470px; height: 60px; background: #ffa22a; font-size: 18px; line-height: 1; transition-delay: 2.5s;}
#index .box01 .btn_box a:nth-child(2) {background: #1c314c; margin-left: 60px; transition-delay: 2.7s;}
#index .box01 .icon_text01 {font-size: 350px; position: absolute; left: 0; right: 0; top: 0; margin: auto; word-break: keep-all; line-height: 1; opacity: 0; transition-duration: .8s; transform: rotate(-5deg) translateX(-40px) skewX(-10deg);}
#index .box01 .icon_text02 {font-size: 215px; position: absolute; left: 0; right: 0; top: 350px; margin: auto; word-break: keep-all; line-height: 1; opacity: 0; transition-duration: .8s; transform: rotate(-5deg) translateX(-40px) skewX(-10deg);  transition-delay: .1s;}
#index .box01.inview .icon_text01 {transform: rotate(-5deg) skewX(-10deg); opacity: .2;}
#index .box01.inview .icon_text02 {transform: rotate(-5deg) skewX(-10deg); opacity: .2;}
#index .box02 {background: url("img/index/box02_bg.jpg")center center no-repeat; background-size: cover; overflow: hidden;}
#index .box02 .box {border: 3px solid #ededed; border-radius: 10px; background: url("img/index/box02_bg02.jpg")center center no-repeat; height: 500px; padding: 50px 0 0 25px; position: relative; box-shadow: 0 0 10px rgb(0 0 0 / 40%);}
#index .box02 .box::before {content: ''; position: absolute; background: url("img/index/box02_human.svg")no-repeat; width: 345px; height: 343px; left: -25px; bottom: -190px;}
#index .box02 .txt01 {position: absolute; left: 25px; top: -35px;}
#index .box02 .icon_box {position: absolute; right: 20px; bottom: -60px;}
#index .box02 .icon_box img {margin-left: 20px;}
#index .box02 .icon_box img:nth-child(1) {margin-left: 0;}
#index .box02 .btn {box-sizing: border-box; width: 470px; height: 60px; background: #ffa22a; font-size: 18px; line-height: 1; margin: 60px auto 0; position: relative;}
#contact_banner {background: url("img/index/box03_bg.svg")top center no-repeat,url("img/index/box03_bg02.jpg")center bottom no-repeat; padding: 50px 0 60px;}
#contact_banner h2 {font-size: 40px; line-height: 1.3; letter-spacing: 1px;}
#contact_banner h2 span {font-size: 65px;}
#contact_banner .icon_box {margin: 20px auto 30px;}
#contact_banner .icon_box span {width: 0; height: 0; border-style: solid; border-width: 17px 10px 0 10px; border-color: #fff transparent transparent transparent;}
#contact_banner .icon_box span:nth-child(2) {margin: 0 60px;}
#contact_banner .box {box-sizing: border-box; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 40%);}
#contact_banner .title_box {background: #1c334f; height: 83px; padding-left: 20px; margin-bottom: 30px; box-sizing: border-box; width: 100%; overflow: hidden;}
#contact_banner .icon01 {font-size: 20px; line-height: 1.2; width: 125px; height: 125px; background: url("img/index/box03_icon01_bg.jpg")top left repeat; box-sizing: border-box; border-radius: 100%;}
#contact_banner .icon01 span {font-size: 40px;}
#contact_banner .txt01 {font-size: 45px; line-height: 1; margin: 0 15px 0 20px;}
#contact_banner .txt02 {font-size: 14px; line-height: 1.7;}
#contact_banner .txt03 {font-size: 20px; line-height: 1;}
#contact_banner .tel {font-size: 50px; line-height: 1; margin: 10px auto 25px;}
#contact_banner .tel span {font-size: 80px;}
#contact_banner .txt04 {font-size: 20px; line-height: 1;}
#contact_banner .inner {padding: 0 30px; margin: 25px auto;}
#contact_banner table {width: 450px;}
#contact_banner .form_btn {box-sizing: border-box; width: 350px; height: 55px; background: #218dc4; font-size: 18px; line-height: 1; border: none; margin: 0 auto; display: block; font-weight: bold; cursor: pointer; color: #fff;}
#contact_banner tr th,#contact_banner tr td {vertical-align: middle; padding-top: 25px;}
#contact_banner .essential {color: red; position: absolute; right: 20px;}
#contact_banner tr th {width: 230px; position: relative; padding-right: 30px; box-sizing: border-box; vertical-align: middle; font-size: 18px; line-height: 1;}
#contact_banner td input, #contact_banner textarea {width: 100%; outline: none; font-size: 16px; padding: 10px; box-sizing: border-box; font-weight: 500;font-family: 'Noto Sans JP', sans-serif, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif;}
#contact_banner textarea {line-height: 1.5;}
#contact_banner td input {height: inherit; height: 25px; padding: 5px;}
.wpcf7 form.sent .wpcf7-response-output {display: none;}
.wpcf7 .ajax-loader {display: none;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {border: none; color: red;}
.wpcf7-not-valid-tip {color: red!important; font-weight: 500!important;}
#contact_banner .inner table:nth-child(2) th,#contact_banner .inner table:nth-child(2) td {display: block;}
#contact_banner .inner table tr:nth-child(1) th,#contact_banner .inner table tr:nth-child(1) td {padding-top: 0;}
#contact_banner .inner table:nth-child(2) th {padding-bottom: 30px; line-height: 1;}
#contact_banner textarea {overflow-y: scroll; height: 75px;}
#index .box04 {box-sizing: border-box; background: url("img/index/box04_bg.jpg")top left repeat; padding-top: 100px;}
#index .box04 h2 {font-size: 35px; line-height: 1.3; display: table; position: relative; letter-spacing: 2px;}
#index .box04 h2::before {content: ''; position: absolute; background: url("img/index/box04_icon01.svg")no-repeat; width: 98px; height: 99px; left: -20px; top: -75px; opacity: 0; transition-duration: .5s; transition-delay: .8s; transition-timing-function: ease-in-out; transform: translateY(-5px);}
#index .box04 h2 .big {font-size: 45px; position: relative; z-index: 10;}
#index .box04 h2 .orange {font-size: 60px;}
#index .box04 .inner {margin-top: 60px; justify-content: center;}
#index .box04 .inner::before {content: ''; position: absolute; background: url("img/index/box04_icon02.svg")no-repeat; width: 280px; height: 65px; left: -20px; top: -160px; opacity: 0; transition-duration: .5s; transition-delay: 1s; transition-timing-function: ease-in-out; transform: translateX(-5px);}
#index .box04 .inner::after {content: ''; position: absolute; background: url("img/index/box04_icon03.svg")no-repeat; width: 212px; height: 82px; right: 30px; top: -170px; opacity: 0; transition-duration: .5s; transition-delay: 1.1s; transition-timing-function: ease-in-out; transform: translateX(5px);}
#index .box04.inview h2::before,#index .box04.inview .inner::before,#index .box04.inview .inner::after {opacity: 1; transform: translate(0);}
#index .box04 .inner .con {box-sizing: border-box; width: 360px; margin-right: 60px; transition-delay: .7s;}
#index .box04 .inner .con:nth-child(2) {transition-delay: .8s;}
#index .box04 .inner .con:nth-child(3) {transition-delay: .9s;}
#index .box04 .inner .con:nth-child(4) {transition-delay: 1s;}
#index .box04 .inner .con:nth-child(5) {transition-delay: 1.1s;}
#index .box04 .inner .con:nth-child(6) {transition-delay: 1.2s;}
#index .box04 .inner .con:nth-child(3n) {margin-right: 0;}
#index .box04 .inner .con:nth-child(n + 4) {margin-top: 60px;}
#index .box04 .no {position: absolute; left: 5px; top: -25px;}
#index .box04 .img_box {position: relative; box-sizing: border-box; border: 3px solid #218dc4; box-shadow: 0 0 10px rgb(0 0 0 / 40%);}
#index .box04 .img_box::before {content: ''; position: absolute; right: 0; bottom: 0; z-index: 10;}
#index .box04 .inner .con:nth-child(1) .img_box::before {background: url("img/index/box04_man01.svg")no-repeat; width: 157px; height: 229px;}
#index .box04 .inner .con:nth-child(2) .img_box::before {background: url("img/index/box04_man02.svg")no-repeat; width: 165px; height: 230px;}
#index .box04 .inner .con:nth-child(3) .img_box::before {background: url("img/index/box04_man03.svg")no-repeat; width: 162px; height: 226px;}
#index .box04 .inner .con:nth-child(4) .img_box::before {background: url("img/index/box04_man06.svg")no-repeat; width: 130px; height: 229px;}
#index .box04 .inner .con:nth-child(5) .img_box::before {background: url("img/index/box04_man05.svg")no-repeat; width: 170px; height: 232px;}
#index .box04 .txt01 {font-size: 20px; line-height: 1; position: absolute; left: 0; bottom: 5px; z-index: 20;}
#index .box04 .txt01 span {display: inline-block; background: #ffa22a; box-sizing: border-box; padding: 5px;}
#index .box04 .txt01 span:nth-child(2) {margin-top: 5px; margin-left: 40px;}
#index .box04 a {box-sizing: border-box; width: 100%; height: 50px; background: #218dc4; font-size: 18px; line-height: 1; margin-top: 20px;}
#index .box05 {background: url("img/index/box05_bg.jpg")center center no-repeat;}
#index .box05 .box {box-sizing: border-box; border: 3px solid #1c334f; background: #1c334f; padding-top: 20px;}
#index .box05 h2 {font-size: 50px; display: table; position: relative; letter-spacing: 2px; padding-left: 190px}
#index .box05 h2::before {content: ''; position: absolute; background: url("img/index/box05_icon01.svg")no-repeat; width: 98px; height: 99px; left: 75px; bottom: 0;}
#index .box05 h2::after {content: ''; position: absolute; background: url("img/index/box05_icon02.svg")no-repeat; width: 259px; height: 43px; left: 190px; top: -50px;}
#index .box05 .text {font-size: 23px; line-height: 1; margin: 15px auto 30px; letter-spacing: 5px;}
#index .box05 .con {background: url("img/index/box05_bg01.svg")no-repeat; min-width: 650px; height: 463px;}
#index .box05 .con:nth-child(2) {background: url("img/index/box05_bg02.svg")no-repeat; min-width: 649px; height: 463px; margin-left: -105px;}
#index .box05 .over {height: 232px; padding-left: 30px;}
#index .box05 .con:nth-child(2) .over {padding-right: 30px; padding-left: 0;}
#index .box05 h3 {font-size: 30px; line-height: 1.3; text-shadow: rgb(0 0 0 / 35%) 1px 1px 5px, rgb(0 0 0 / 35%) -1px 1px 5px, rgb(0 0 0 / 35%) 1px -1px 5px, rgb(0 0 0 / 35%) -1px -1px 5px;}
#index .box05 .yellow {font-size: 35px;}
#index .box05 h3 .big {font-size: 40px;}
#index .box05 .bdr {content: ''; background: #fff; width: 100px; height: 3px; margin: 20px 0;}
#index .box05 .txt01 {font-size: 18px; line-height: 1.5; text-shadow: rgb(0 0 0 / 35%) 1px 1px 3px, rgb(0 0 0 / 35%) -1px 1px 3px, rgb(0 0 0 / 35%) 1px -1px 3px, rgb(0 0 0 / 35%) -1px -1px 3px;}
#index .box05 .under {height: 232px; padding-left: 60px;}
#index .box05 .con:nth-child(2) .under {padding-left: 0; padding-right: 60px;}
#index .box05 .txt02 {font-size: 25px; line-height: 1.4;}
#index .box05 .txt02 span {font-size: 50px;}
#index .box05 .btn {box-sizing: border-box; width: 400px; height: 60px; background: #fff; font-size: 18px; line-height: 1; border: 3px solid #1c334f; box-shadow: 0 3px #1c334f; border-radius: 5px; margin: 10px auto 0; color: #1c334f;}
#index .box05 .con:nth-child(2) .btn {border-color: #be6b00; box-shadow: 0 3px #be6b00; color: #be6b00;}
@-webkit-keyframes flash-fade-in2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3) rotate(5deg);
            transform: scale(1.3) rotate(5deg);
  }

  50% {
    -webkit-transform: scale(1.3) rotate(5deg);
            transform: scale(1.3) rotate(5deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}

@keyframes flash-fade-in2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.3) rotate(5deg);
            transform: scale(1.3) rotate(5deg);
  }

  50% {
    -webkit-transform: scale(1.3) rotate(5deg);
            transform: scale(1.3) rotate(5deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}
#index .box05 .icon {position: absolute; left: 0; right: 0; bottom: 152px; margin: auto; z-index: 20;}
#index .box05.inview .icon {-webkit-animation: flash-fade-in2 0.45s both .8s; animation: flash-fade-in2 0.45s both .8s;}
#index .box05 .or {font-size: 100px; line-height: 1; position: absolute; left: 0; right: 0; margin: auto; bottom: 85px;}
#index .box06 {background: url("img/index/box06_bg.jpg")top left repeat; padding-top: 50px;}
#index .box06 h2 {font-size: 30px; line-height: 1.4; margin-bottom: 50px;}
#index .box06 h2 span {font-size: 60px;}
#index .box06 .item {box-sizing: border-box; width: 255px; margin-right: 60px; transition-delay: .5s;}
#index .box06 .item:nth-child(2) {transition-delay: .6s;}
#index .box06 .item:nth-child(3) {transition-delay: .7s;}
#index .box06 .item:nth-child(4) {transition-delay: .8s;}
#index .box06 .item:nth-child(4n) {margin-right: 0;}
#index .box06 .img {width: 100%; margin-bottom: 10px; padding-top: 65%; position: relative; background-size: cover; background-position: top center; background-repeat: no-repeat;}
#index .box06 .no {box-sizing: border-box; background: #218dc4; min-width: 35px; min-height: 53px; margin-right: 10px; font-size: 16px; line-height: 1;}
#index .box06 .no p:nth-child(2) {font-size: 20px; margin-top: 5px;}
#index .box06 h3 {font-size: 14px; line-height: 1.4; margin-bottom: 2px;}
#index .box06 .txt {font-size: 14px; line-height: 1;}
#index .box06 .btn {box-sizing: border-box; background: #ffa22a; font-size: 18px; line-height: 1; margin: 60px auto 0; width: 470px; height: 60px; transition-delay: .7s;}
#index .box07 {background: #218dc4;}
#index .box07 .txt01 {font-size: 20px; line-height: 1; letter-spacing: 1px;}
#index .box07 .txt02 {font-size: 50px; line-height: 1; margin: 20px auto 30px; letter-spacing: 2px; transition-delay: .2s;}
#index .box07 .inner a {box-sizing: border-box; background: #fff; width: 255px; height: 65px; position: relative; margin-right: 60px; font-size: 16px; line-height: 1; transition-delay: .7s;}
#index .box07 .inner a:nth-child(2) {transition-delay: .8s;}
#index .box07 .inner a:nth-child(3) {transition-delay: .9s;}
#index .box07 .inner a:nth-child(4) {transition-delay: 1s;}
#index .box07 .inner a::before {content: ''; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #007bff transparent;}
#index .box07 .inner a:nth-child(4) {margin-right: 0;}
#index .box07 .inner a img {margin-right: 20px;}
#index .box08 {position: relative; background: url("img/index/box08_bg.jpg")top left repeat;}
#index .box08 .box {width: 570px; position: relative;}
#index .box08 h2 {font-size: 25px; margin-bottom: 45px;}
#index .box08 .item {box-sizing: border-box; padding: 20px 0; border-bottom: 2px solid #218dc4;}
#index .box08 .box:nth-child(2) .item {border-color: #ffa22a;}
#index .box08 .item:nth-of-type(1) {padding-top: 0;}
#index .box08 .over {margin-bottom: 15px;}
#index .box08 .time {font-size: 16px; line-height: 1; margin-right: 20px;}
#index .box08 .time span {font-size: 10px;}
#index .box08 h3 {font-size: 16px;}
#index .box08 .text {font-size: 14px; line-height: 2;}
#index .box08 .btn {position: absolute; top: -10px; right: 0; background: #218dc4; width: 150px; height: 35px; font-size: 16px; line-height: 1;}
#index .box08 .box:nth-child(2) .btn {background: #ffa22a;}
#index .box09 {background: url("img/index/box09_bg.jpg")center center no-repeat; background-size: cover;}
#index .box09 h2 {font-size: 40px; margin-bottom: 30px;}
#index .box09 p {font-size: 16px; line-height: 2;}
#index .box09 p span {transition-delay: .3s; animation-delay: .3s;}
#index .box10 {background: url("img/index/box10_bg.jpg")top left repeat;}
#index .box10 .bdr {content: ''; background: #4ecd00; width: 150px; height: 2px; margin: 20px auto 40px; position: relative;}
#index .box10 .bdr::before {content: ''; position: absolute; background: #3c9d00; width: 50px; height: 2px; left: 0; right: 0; margin: auto; top: 0;}
#index .box10 h4 {font-size: 18px; line-height: 1.3;}
#acMenu {width: 1200px; margin: auto;}
#acMenu dt{
width: 100%;
line-height:1.5;
border-bottom:#000 1px solid;
cursor:pointer;
padding: 20px 20px 20px 10px;
box-sizing: border-box;
font-weight: bold;
position: relative; margin: auto; font-size: 18px;
}
#acMenu .bdr01{position: absolute; content: ''; background: #218dc4; top: 0 ;bottom: 0; right: 0; z-index: 10; width: 20px; height: 3px; margin: auto;}
#acMenu .bdr02{position: absolute; content: ''; background: #218dc4; top: 0 ;bottom: 0; right: 8.2px; z-index: 10; width: 3px; height: 20px; margin: auto;}
#acMenu .bdr02{opacity: 1;transform: translateY(0);transition-duration: .5s; transition-timing-function: Linear Out, Slow In;}
#acMenu dt.active .bdr02{opacity: 0;transform: translateY(10px);}
#acMenu dt img,#acMenu dd img {margin-right: 20px;}
#acMenu dd{
width: 100%;
line-height: 2;
box-sizing: border-box;
display: none;
padding: 20px 10px;
background: #fff;
}
#acMenu #acMenu:nth-of-type(1) dt {border-top: 1px solid #000;}
#index .box11 {position: relative; background: url("img/index/box11_bg.jpg")top left repeat;}
#index .box11 .bg {position: absolute; background: rgba(33, 141, 196, .65); width: 100%; height: 250px; content: ''; top: 0; left: 0;}
#index .box11 .box {box-sizing: border-box; border: 3px solid #1c334f; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 40%); z-index: 10;}
#index .box11 h2 {font-size: 20px; line-height: 1.2; background: #1c324d; width: 100%; height: 125px; position: relative;}
#index .box11 h2 span {font-size: 45px;}
#index .box11 h2::before {content: ''; position: absolute; background: url("img/index/box11_icon01.svg")no-repeat; width: 100px; height: 100px; left: 165px; top: 0; bottom: 0; margin: auto;}
#index .box11 h2::after {content: ''; position: absolute; background: url("img/index/box11_icon02.svg")no-repeat; width: 147px; height: 156px; right: 140px; bottom: 0;}
#index .box11 .txt01 {font-size: 16px; line-height: 1; margin: 30px auto;}
#index .box11 table {width: calc(100% - 70px); margin: auto;}
#index .box11 .form_btn {box-sizing: border-box; width: 400px; height: 60px; background: #218dc4; font-size: 18px; line-height: 1; border: none; display: block; font-weight: bold; cursor: pointer; color: #fff; margin: 60px auto;}
#index .box11 tr th,#index .box11 tr td {vertical-align: middle; padding-top: 20px;}
#index .box11 .essential {color: red; position: absolute; right: 20px;}
#index .box11 tr th {width: 230px; position: relative; padding-right: 30px; box-sizing: border-box; vertical-align: middle; font-size: 18px; line-height: 1;}
#index .box11 td input, #index .box11 textarea {width: 100%; outline: none; font-size: 16px; padding: 10px; box-sizing: border-box; font-weight: 500;font-family: 'Noto Sans JP', sans-serif, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif;}
#index .box11 textarea {line-height: 1.5;}
#index .box11 td input {height: inherit; height: 40px; padding: 5px; border: 1px solid #1f57a1;}
.wpcf7 form.sent .wpcf7-response-output {display: none;}
.wpcf7 .ajax-loader {display: none;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {border: none; color: red;}
.wpcf7-not-valid-tip {color: red!important; font-weight: 500!important;}
#index .box11 .inner table:nth-child(2) th,#index .box11 .inner table:nth-child(2) td {display: block;}
#index .box11 .inner table tr:nth-child(1) th,#index .box11 .inner table tr:nth-child(1) td {padding-top: 0;}
#index .box11 .inner table:nth-child(2) th {padding-bottom: 30px; line-height: 1;}
#index .box11 textarea {height: 150px; border: 1px solid #1f57a1;}
#index .box11 tr:nth-child(1) th,#index .box11 tr:nth-child(1) td {padding-top: 0;}
#index .box11 .wpcf7 .ajax-loader {display: none;}

/*========================
FOOTER
========================*/
footer {box-sizing: border-box; border-top: 5px solid #218dc4; padding-top: 60px;}
footer .txt01 {font-size: 25px; line-height: 1;}
footer .logo {margin: 20px auto 60px;}
footer .nav a {font-size: 18px; line-height: 1; margin-left: 40px; position: relative;}
footer .nav a::after {content: ''; position: absolute; width: 0; height: 2px; bottom: -10px; left: 0; right: 0; margin: auto; transition-duration: .5s; background: #218DC4;}
footer .nav a:hover::after {width: 100%;}
footer .nav a:nth-child(1) {margin-left: 0;}
footer .nav02 {margin-top: 20px;}
footer .copy {background: #1c324d; font-size: 14px; line-height: 1; padding: 5px 0; margin-top: 65px; 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: 450px; line-height: 1; margin-top: 118px;}
.page_thumb p {font-size: 30px; line-height: 1; background: #218dc4; display: inline-block; padding: 10px 20px; z-index: 30; letter-spacing: 1px;}
.page_thumb .img {position: absolute; right: -360px; top: 0; bottom: 0; margin: auto; content: ''; width: 1475px; height: 450px;}
.page_thumb::before {content: ''; position: absolute; background: #fff; transform: skewX(-20deg); width: 1000px; height: 1000px; z-index: 20; left: -690px; bottom: 0;}

.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: 35px; margin-bottom: 100px;}


/*
記事詳細ページ
***************/
.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; border-radius: 5px;}
.navigation .next-entries {background-color: #218dc4; margin-right: 20px;}
.navigation .previous-entries {background-color: #ffa22a;}
.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: #1c314c; color: #fff; border-radius: 5px;}
.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;}
    #contact_banner .box {padding-bottom: 30px;}
    #index .box05 .icon {bottom: 0;}
    .ie_box {width: 100%;}
    #voice .no,#index .box06 .no {height: 53px;}
    
    
}