@charset "utf-8";

/*
Theme Name: t-brains_child
Template: t-brains_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: 100px 0;}
.indent_content02 {margin-top: 80px;}

/******************************
HEADER
******************************/ 
#nav .sp-box {display: none;}
header {position: absolute!important; top: 0; left: 0; right: 0; padding: 20px 80px 20px 0; z-index: 210; transform: translateY(-20px); opacity: 0; transition-duration: .5s;}
header.inview {transform: translate(0); opacity: 1;}
#header02 {position: fixed; top: 0; left: 0; right: 0; padding: 20px 0; z-index: 200; background: rgba(255,255,255,.9); transition-duration: .5s; opacity: 0;}
#header02 .inbox12 {padding-right: 80px;}
#header02.ch_header {opacity: 1;}
header h2 p,#header02 .h2 p{font-size: 20px; line-height: 1.2; margin-left: 10px; letter-spacing: 3px;}
.global_nav a {font-size: 16px; line-height: 1; padding-left: 30px; letter-spacing: 1px;}
.global_nav a span {position: relative;}
.global_nav a span::after {content: ''; position: absolute; background: -webkit-linear-gradient(180deg,#ea6666 0%, #f66c6c 25%, #38b151 50%, #599cda 75%, #23addd 100%); left: 0; bottom: -5px; clip-path: inset(0 100% 0 0); transition-duration: .5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: 2px;}
.global_nav a:hover span::after {clip-path: inset(0);}
.global_nav a:nth-child(1) {padding-left: 0;}
@keyframes mainVisualFadeIn {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
.front_main_box {background: #fff; position: relative; z-index: 10;}
.front_main_box.inview {animation: mainVisualFadeIn 1.5s ease-out both;}
.front_main_box .icon_text_box {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 1200px; height: 100%; margin: auto}
.front_main_box .movie {position: absolute; top: 0; bottom: 0; margin: auto; width: 100%;}
.front_main_box .box {z-index: 10;}
.front_main_box .inner {position: relative;}
.front_main_box .txt01 {font-size: 70px; line-height: 1; z-index: 50; position: relative; letter-spacing: 15px;}
.front_main_box .txt01 span {background: -webkit-linear-gradient(180deg,#ea6666 0%, #f66c6c 25%, #38b151 50%, #599cda 75%, #23addd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.front_main_box .txt {display: table; position: relative;}
.front_main_box .txt:nth-child(n + 2) {margin-top: 50px;}
.front_main_box .txt::before {content: ''; background: #000; width: 0; height: calc(100% + 10px); 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); position: absolute; top: 0; left: 0; z-index: 30;}
.front_main_box.inview .txt::before {width: 100%; transition-delay: 3.3s;}
.front_main_box.out .txt::before {width: 0; transition-delay: inherit;}
.front_main_box .txt p {position: relative; z-index: 20; filter: drop-shadow(0px 0px 5px rgba(255,255,255,1))drop-shadow(0px 0px 5px rgba(255,255,255,1)); opacity: 0; transition-delay: 4.3s;}
.front_main_box.inview .txt p {opacity: 1;}
.front_main_box .txt02 {position: absolute; right: -120px; top: 85px; font-size: 125px; filter: drop-shadow(0px 0px 3px rgba(255,255,255,1))drop-shadow(0px 0px 3px rgba(255,255,255,1));}
.front_main_box .txt02 p:nth-child(1) {letter-spacing: 10px; position: absolute; left: 20px; top: -200px; opacity: 0; transform: translateX(-10px) rotate(5deg); transition-duration: .7s; transition-delay: 4.3s;}
.front_main_box .txt02 p:nth-child(2) {letter-spacing: 10px; opacity: 0; transform: translateX(-10px) rotate(-5deg); transition-duration: .7s; transition-delay: 4.4s;}
.front_main_box .txt02 p:nth-child(3) {letter-spacing: 10px; position: absolute; left: 120px; top: 220px; opacity: 0; transform: translateX(-10px) rotate(5deg); transition-duration: .7s; transition-delay: 4.5s;}
.front_main_box.inview .txt02 p:nth-child(1) {opacity: .5; transform: translateX(0) rotate(5deg);}
.front_main_box.inview .txt02 p:nth-child(2) {opacity: .5; transform: translateX(0) rotate(-5deg);}
.front_main_box.inview .txt02 p:nth-child(3) {opacity: .5; transform: translateX(0) rotate(5deg);}
.front_main_box .txt02 p:nth-child(1) span {background: -webkit-linear-gradient(45deg,#ff9273, #ff5323); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.front_main_box .txt02 p:nth-child(2) span {background: -webkit-linear-gradient(-45deg,#385fc2, #63a5e9); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.front_main_box .txt02 p:nth-child(3) span {background: -webkit-linear-gradient(45deg,#5ae978, #38b151); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.front_main_box .icon_text01 {font-size: 250px; left: -280px; line-height: 1; top: 35px; z-index: 30; position: absolute; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; letter-spacing: 60px; color: #303030; transition-delay: 4s; transition-duration: .4s;}
.front_main_box .icon_text02 {font-size: 225px; line-height: 1; bottom: 0; left: 0; position: absolute; color: #303030; letter-spacing: 25px; transform: translateX(-10px); opacity: 0; transition-duration: .7s; transition-delay: 3.8s;}
.front_main_box.inview .icon_text02 {opacity: .25; transform: translate(0);}
.front_main_box .icon_text03 {font-size: 100px; bottom: -34px; right: -50px; z-index: 20; position: absolute; color: #303030; letter-spacing: 12px; line-height: 1; transition-delay: 4.2s;}

#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);
}
}
.opening_box {position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; overflow: hidden;}
.opening_box.out {display: none;}
.opening_box .opening_logo {z-index: 1100; position: absolute; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: .5s; transition-delay: 2s; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
.opening_box::before,.opening_box::after {content: ''; background: url("img/header/opening_bg.jpg")top left repeat; width: 100%; height: 101%; z-index: 1050; position: absolute; transition-duration: 3.2s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: 3.2s;}
.opening_box::before {top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%);}
.opening_box::after {bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%);}
.opening_box.inview .opening_logo {opacity: 0;}
.opening_box.inview::before {transform: translateX(-100%) translateY(-100%);}
.opening_box.inview::after {transform: translate(100%) translateY(100%);}

#nav{
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #fff;
transition: .7s;
z-index: 600;
overflow: hidden;
}

#nav .over {font-size: 50px; line-height: 1; letter-spacing: 5px; width: 1200px; transition-delay: .3s}
#nav .over img {margin-right: 20px;}
#nav .inner {margin: 70px auto 50px;}
#nav .btn {box-sizing: border-box; background: #fff; border: 5px solid #000; width: 460px; height: 80px; font-size: 20px; line-height: 1; position: relative; transition-duration: .5s; transition-delay: .6s;}
#nav .btn::after {content: ''; position: absolute; right: 5px; bottom: 5px; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 100%); width: 20px; height: 20px; z-index: 10;}
#nav .btn::before {background: -webkit-linear-gradient(180deg,#ea6666 0%, #f66c6c 25%, #38b151 50%, #599cda 75%, #23addd 100%); opacity: 0; z-index: 10; position: absolute; top: -5px; left: -5px; transition: opacity .5s; width: calc(100% + 10px); height: calc(100% + 10px); content: '';}
#nav .btn:hover::before {opacity: 1;}
#nav .btn span {position: relative; z-index: 30; transition-duration: .5s;}
#nav .btn:hover span {color: #fff;}
#nav .inner .btn:nth-child(2) {margin-left: 80px; transition-delay: .7s;}
#nav nav:nth-child(2) {margin-left: 75px;}
#nav nav a {font-size: 20px; line-height: 1; margin-top: 65px; transition-delay: .8s;}
#nav nav a:nth-child(1) {margin-top: 0;}
#nav th,#nav td {line-height: 1; padding-top: 30px;}
#nav th {font-size: 14px; padding-right: 45px; position: relative; z-index: 50;}
#nav td {font-size: 16px; position: relative; z-index: 50;}
#nav td span {padding-top: 20px; display: block;}
#nav .icon01 {position: absolute; width: 141px; height: 122px; transform: rotate(-25deg); top: -105px; left: -180px; z-index: 10;}
#nav .icon01 span {content: ''; position: relative; width: 100%; height: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #ecff4c; display: block;}
#nav .icon02 {position: absolute; width: 175px; height: 175px; left: -250px; top: 15px;}
#nav .icon02 span {content: ''; position: relative; width: 100%; height: 100%; box-sizing: border-box; border-radius: 100%; background: #7a61d8; display: block;}
#nav .icon03 {position: absolute; width: 377px; height: 327px; top: -145px; right: -360px; transform: rotate(-45deg);;}
#nav .icon03 span {content: ''; position: relative; width: 100%; height: 100%; background: #ff5323; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: block;}
#nav .wave_box {position: absolute; bottom: -250px; left: 50%; margin: auto; width: 1920px; margin-left: -960px; clip-path: inset(0 100% 0 0); -webkit-transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: .7s;}
#nav .left_box,#nav table .item {position: relative; z-index: 30;}
#nav .wave_box .wave {position: relative;}
#nav.in .wave_box {clip-path: inset(0);}
#nav.in .over {opacity: 1; transform: translateX(0);}
#nav.in .btn {opacity: 1; transform: translateX(0);}
#nav nav:nth-child(1) a:nth-child(1) {transition-delay: 1s;}
#nav nav:nth-child(1) a:nth-child(2) {transition-delay: 1.1s;}
#nav nav:nth-child(1) a:nth-child(3) {transition-delay: 1.2s;}
#nav nav:nth-child(2) a:nth-child(1) {transition-delay: 1.1s;}
#nav nav:nth-child(2) a:nth-child(2) {transition-delay: 1.2s;}
#nav nav:nth-child(2) a:nth-child(3) {transition-delay: 1.3s;}
#nav table .item:nth-child(1) {transition-delay: 1.2s;}
#nav table .item:nth-child(2) {transition-delay: 1.3s;}
#nav table .item:nth-child(3) {transition-delay: 1.4s;}
#nav table .item:nth-child(4) {transition-delay: 1.5s;}
#nav.in table .item {opacity: 1; transform: translate(0);}
#nav.in nav a {opacity: 1; transform: translate(0);}
.hamburger03_box {max-width: 1000px; position: absolute; top: 0; left: 0; right: 0; margin: auto; height: 26px;}
#hamburger03,#hamburger04,#hamburger05 {
display: block;
width: 35px;
height: 26px;
cursor: pointer;
transition: 1s;
position: absolute;
left: 65px;
top: 0; bottom: 0; margin: auto; z-index: 500;
}

#hamburger03 {position: absolute; left: auto; width: 35px; height: 26px; z-index: 700; right: 0; top: 60px; bottom: auto;}
.inner_line {
display: block;
position: absolute;
left: 0;
width: 35px;
height: 2px;
background-color: #fff;
transition: 1s;
border-radius: 4px;
}
#hamburger04,#hamburger05 {position: relative; left: inherit; width: 35px; height: 26px; z-index: 700; right: 0; top: 0; bottom: 0; margin: auto;}
.hamburger04_box,.hamburger05_box {position: absolute; right: 0; top: 0; bottom: 0; margin: auto; display: flex; align-items: center; justify-content: flex-start;}
header.ch_header #hamburger05 {opacity: 1;}

#line1,#line02_1,#line03_1,#line04_1,#line05_1 {
top: 0;
}
#line2,#line02_2,#line03_2,#line04_2,#line05_2 {
top: 12px;
}
#line3,#line02_3,#line03_3,#line04_3,#line05_3 {
bottom: 0px;
}
#line03_1.line_1,#line04_1.line_1,#line05_1.line_1 {width: 35px; transform: translateY(10.5px) rotate(-45deg); background-color: #000;}
#line03_2.line_2,#line04_2.line_2,#line05_2.line_2 {width: 35px; left: inherit; right: 0; top: 15px; background-color: #000;}
#line03_3.line_3,#line04_3.line_3,#line05_3.line_3 {width: 35px; transform: translateY(-13.5px) rotate(45deg); background-color: #000;}
.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:nth-child(1),#hamburger05 .inner_line:nth-child(1) {background-color: #ff5323;}
#hamburger04 .inner_line:nth-child(2),#hamburger05 .inner_line:nth-child(2) {background-color: #937ef3;}
#hamburger04 .inner_line:nth-child(3),#hamburger05 .inner_line:nth-child(3) {background-color: #38ff62;}

/*index*/
#index .c_img {position: relative; min-width: 1920px; left: 50%; margin-left: -960px; z-index: 50; margin-top: -80px;}
#index .box01 {background: url("img/index/box01_bg.jpg")top left repeat; padding: 0.02px 0 120px;}
#index .box01 .title {margin: 120px auto 80px;}
#index .box01 h2 span {font-size: 35px; box-sizing: border-box; border-bottom: 2px solid #ff5323; padding-bottom: 5px; padding-right: 190px;}
#index .box01 h2 {margin-bottom: 15px;}
#index .box01 .min {font-size: 20px; line-height: 1; margin-top: 25px; margin-left: 218px;}
#index .box01 .icon_box .icon01 {position: absolute; left: -440px; top: 30px; width: 430px; height: 370px; transform: rotate(15deg);}
#index .box01 .icon_box .icon01 span {content: ''; position: relative; width: 100%; height: 100%; background: #ad58e9; opacity: .5; clip-path: polygon(50% 0,100% 100%, 0 100%); display: block;}
#index .box01 .icon_box .icon02 {position: absolute; right: -560px; top: -300px; width: 630px; height: 545px; transform: rotate(45deg);}
#index .box01 .icon_box .icon02 span {content: ''; position: relative; width: 100%; height: 100%; background: #ff5323; opacity: .6; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: block;}
#index .box01 .item {box-sizing: border-box; border-left: 2px solid #ff5323; width: 310px; padding-left: 20px; margin-right: 120px; z-index: 50;}
#index .box01 .item:nth-child(3n) {margin-right: 0;}
#index .box01 .over {position: relative; margin-bottom: 20px;}
#index .box01 .img {width: 285px; padding-top: 67%; position: relative; background-size: cover; background-position: top center; background-repeat: no-repeat;}
#index .box01 .time {font-size: 16px; line-height: 1;}
#index .box01 h3 {font-size: 16px; line-height: 1; margin: 15px auto;}
#index .box01 .text {font-size: 14px; line-height: 1.7;}
#index .box01 .btn {position: absolute; left: 220px; bottom: 40px; font-size: 14px; line-height: 1; padding: 0 50px 0 15px; transition-duration: .5s;}
#index .box01 .btn::before {width: 100%; height: 2px; background: #ff5323; position: absolute; bottom: -5px; right: 0; content: '';}
#index .box01 .btn::after {width: 0; height: 0; border-style: solid; border-width: 5px 0 0 5px; border-color: transparent transparent transparent #ff5323; position: absolute; content: ''; right: 0; bottom: -4px;}
#index .box01 .item:hover .btn {padding-right: 40px;}
#index .box02 {background: url("img/index/box02_bg.jpg")top left repeat; padding: 130px 0 250px; position: relative;}
#index .box02 .wave_box {position: absolute; top: -320px; left: 50%; margin: auto; width: 1920px; margin-left: -960px;}
#index .box02 .wave_box .wave {position: relative; z-index: 40;}
#index .box02 .title_box {position: absolute; width: 1920px; left: 50%; margin-left: -150px; background: url("img/index/box02_title_bg.jpg")top left repeat; transform: skewX(-20deg); height: 207px; z-index: 50; top: 125px; padding-left: 50px; box-shadow: -20px 20px rgba(52,102,148,.3);}
#index .box02 h2 {transform: skewX(20deg); font-size: 30px; line-height: 1.2;}
#index .box02 h2 .big {font-size: 60px;}
#index .box02 .inner {margin-top: 305px;}
#index .box02 .text_box {width: 630px; transition-delay: .4s;}
#index .box02 h3 {font-size: 29px; line-height: 1.7; margin-bottom: 30px;}
#index .box02 .text {font-size: 16px; line-height: 2.2;}
#index .box02 .inner .img {margin-left: -240px; position: relative; z-index: 70; transition-delay: .3s;}
#index .box02 .btn_box {position: absolute; right: 0; bottom: -40px;}
#index .box02 .btn {box-sizing: border-box; box-shadow: 0 0 5px rgba(0,0,0,.5); width: 430px; height: 80px; font-size: 18px; position: relative; z-index: 80; border-radius: 40px; color: #fff; background: #fff; border: 5px solid #3885cd; transition-delay: .7s;}
#index .box02 .btn span {position: relative; z-index: 10; transition-duration: .5s;}
#index .box02 .btn:hover span {color: #3885cd;}
#index .box02 .btn02 {font-size: 16px; margin-left: 50px; transition-delay: .8s;}
#index .box02 .btn::before {background: -webkit-linear-gradient(180deg,#3885cd 0%, #459aea 50%, #2e6ca6 100%); opacity: 1; transition-duration: .5s; content: ''; position: absolute; width: calc(100% + 10px); height: calc(100% + 10px); display: block; border-radius: 40px;}
#index .box02 .btn::after {content: ''; display: block; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; background: #fff; width: 7px; height: 12px; clip-path: polygon(0 0,100% 50%, 0 100%); transition-duration: .5s;}
#index .box02 .btn:hover::before {opacity: 0;}
#index .box02 .btn:hover::after {background: #3885cd;}

#index .box02 .triangle {position: absolute;}
#index .box02 .triangle span {content: ''; display: block; width: 100%; height: 100%;}
#index .box02 .triangle01 {left: -360px; top: -500px; width: 745px; height: 1819px; z-index: 40; -webkit-transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); clip-path: inset(0 0 100% 0); transition-duration: 2s;}
#index .box02.inview .triangle01 {clip-path: inset(0);}
#index .box02 .triangle01 span {clip-path: polygon(0 0,100% 50%, 0 100%); background: -webkit-linear-gradient(-135deg,#3885cd 0%, #38b151 100%);}
#index .box02 .triangle02 {right: -405px; bottom: -50px; width: 430px; height: 370px; transform: rotate(-45deg);}
#index .box02 .triangle02 span {background: #ecff4c; clip-path: polygon(50% 0,100% 100%, 0 100%);}
#index .box03 .wave_box {top: -235px;}
#index .box03 .title_box {right: 50%; margin-right: -150px; background: url("img/index/box03_title_bg.jpg")top left repeat; transform: skewX(20deg); padding-right: 50px; padding-left: 0; box-shadow: 20px 20px rgba(57,175,81,.3); left: inherit;}
#index .box03 h2 {transform: skewX(-20deg); font-size: 30px; line-height: 1.2;}
#index .box03 .inner .img {margin-right: -240px; margin-left: inherit;}
#index .box03 .btn {border-color: #38b151;}
#index .box03 .btn:hover span {color: #38b151;}
#index .box03 .btn::before {background: -webkit-linear-gradient(180deg,#38b151 0%, #39d659 50%, #259e3e 100%);}
#index .box03 .btn:hover::after {background: #38b151;}
#index .box03 .triangle01 {right: -360px; top: -500px; left: inherit; z-index: 60;}
#index .box03 .triangle01 span {clip-path: polygon(100% 0,0 50%, 100% 100%); background: -webkit-linear-gradient(-135deg,#38b151 0%, #ff7852 100%); z-index: 10;}
#index .box03 .triangle02 {left: -340px; bottom: -210px; transform: rotate(-45deg); right: inherit; z-index: 70;}
#index .box03 .triangle02 span {background: #7a61d8; clip-path: polygon(50% 0,100% 100%, 0 100%);}
#index .box03 .btn_box {left: 0; right: inherit;}
#index .box03.inview .triangle01 {clip-path: inset(0);}
#index .box04 {background: url("img/index/box04_bg.jpg")top left repeat; padding: 130px 0 200px; position: relative;}
#index .box04 .wave_box {position: absolute; top: -320px; left: 50%; margin: auto; width: 1920px; margin-left: -960px; z-index: 60;}
#index .box04 .wave_box .wave {position: relative; z-index: 40;}
#index .box04 .title_box {background: url("img/index/box04_title_bg.jpg")top left repeat; width: 1120px; height: 200px; font-size: 30px; line-height: 1.5; box-shadow: 10px 20px 0 rgba(252,83,36,.3); margin: 0 auto 80px; position: relative; z-index: 60; transform: translateX(10px) skewX(-20deg);}
#index .box04.inview .title_box {opacity: 1; transform: translateX(0) skewX(-20deg);}
#index .box04 .title_box h2 {transform: skewX(20deg); line-height: 1.4; letter-spacing: 2px;}
#index .box04 h2 span {font-size: 60px;}
#index .box04 .inner .box {width: 346px; transition-delay: .4s; z-index: 70;}
#index .box04 .inner .box:nth-child(2) {transition-delay: .5s; margin: 0 80px;}
#index .box04 .inner .box:nth-child(3) {transition-delay: .6s;}
#index .box04 .inner .box:nth-child(4) {transition-delay: .7s; margin-right: 80px;}
#index .box04 .inner .box:nth-child(5) {transition-delay: .8s;}
#index .box04 .inner .box:nth-child(n + 4) {margin-top: 80px;}
#index .box04 .box .over {box-sizing: border-box; border: 5px solid #ff5323; position: relative;}
#index .box04 .on_img {opacity: 0; transition-duration: .5s; z-index: 10; position: absolute; left: 0; top: 0;}
#index .box04 .item:hover .on_img {opacity: 1;}
#index .box04 .txt_box {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 20;}
#index .box04 .txt01 {font-size: 20px; line-height: 1; box-sizing: border-box; border-bottom: 2px solid #ff5323; width: 150px; margin: 0 auto 15px; padding-bottom: 15px;}
#index .box04 .txt02 {font-size: 20px; line-height: 1;}
#index .box04 .btn {box-sizing: border-box; width: 100%; height: 50px; border-radius: 25px; font-size: 16px; line-height: 1; margin: 30px auto 0; position: relative; box-shadow: 0 0 5px rgba(0,0,0,.3); z-index: 10; color: #fff; border: 5px solid #ff5323; background: #fff;}
#index .box04 .btn::before {background: -webkit-linear-gradient(180deg,#ff5323 0%, #ff7b56 50%, #d64d27 100%); opacity: 1; transition-duration: .5s; content: ''; position: absolute; width: calc(100% + 10px); height: calc(100% + 10px); display: block; border-radius: 25px;}
#index .box04 .btn::after {content: ''; position: absolute; top: 0; bottom: 0; right: 20px; display: block; background: #fff; width: 7px; height: 12px; clip-path: polygon(0 0, 100% 50%, 0 100%); margin: auto; transition-duration: .5s;}
#index .box04 .btn:hover::before {opacity: 0;}
#index .box04 .btn:hover::after {background: #ff6539;}
#index .box04 .btn span {position: relative; z-index: 10; transition-duration: .5s;}
#index .box04 .btn:hover span {color: #ff5323;}
#index .box04 .icon_box .icon01 {position: absolute; left: -460px; top: -160px; width: 377px; height: 327px; transform: rotate(45deg);}
#index .box04 .icon_box .icon01 span {content: ''; position: relative; width: 100%; height: 100%; background: #ff5323; opacity: .6; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: block;}
#index .box04 .icon_box .icon02 {position: absolute; right: -300px; top: -160px; width: 214px; height: 186px; transform: rotate(-15deg);}
#index .box04 .icon_box .icon02 span {content: ''; position: relative; width: 100%; height: 100%; background: #ad58e9; opacity: .5; clip-path: polygon(50% 0,100% 100%, 0 100%); display: block;}
#index .box05 {background: url("img/index/box05_bg.jpg")top left repeat; padding: 200px 0 240px; position: relative;}
#index .box05 .title_box {position: absolute; width: 1920px; right: 50%; margin-right: -150px; background: url("img/index/box05_title_bg.jpg")top left repeat; transform: skewX(20deg); height: 207px; z-index: 60; top: -103.5px; padding-left: 50px; box-shadow: -20px 20px rgba(52,102,148,.3); margin-bottom: 110px;}
#index .box05 h2 {font-size: 60px; transform: skewX(-20deg); padding-right: 150px;}
#index .box05 h2 span {box-sizing: border-box; border-left: 2px solid #fff; padding-left: 20px; margin-left: 20px;}
#index .box05 h3 p {font-size: 35px; line-height: 1; display: table; background: #fff; padding: 10px 15px; position: relative; z-index: 60; transition-delay: .5s;}
#index .box05 h3 p:nth-child(2) {margin-top: 15px; transition-delay: .6s;}
#index .box05 .txt_box {margin-top: 20px;}
#index .box05 .txt01 {font-size: 16px; line-height: 2.2; width: 630px; position: relative; z-index: 60;}
#index .box05 .txt01 span {transition-delay: 1s; animation-delay: 1s;}
#index .box05 .txt02 {font-size: 20px; line-height: 1; margin-top: 20px; width: 630px; margin-right: auto; transition-delay: 1.2s;}
#index .box05 .man {position: absolute; right: -360px; bottom: -200px; z-index: 50;}
#index .box05 .triangle {position: absolute;}
#index .box05 .triangle span {content: ''; display: block; width: 100%; height: 100%;}
#index .box05 .triangle01 {left: -360px; top: -770px; width: 745px; height: 1819px; z-index: 40; -webkit-transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); clip-path: inset(0 0 100% 0); transition-duration: 2s;}
#index .box05.inview .triangle01 {clip-path: inset(0);}
#index .box05 .triangle01 span {clip-path: polygon(0 0,100% 50%, 0 100%); background: -webkit-linear-gradient(-135deg,#7a61d8 0%, #f0ff71 100%);}
#index .box05 .triangle02 {right: -405px; top: -50px; width: 141px; height: 122px; transform: rotate(-45deg);}
#index .box05 .triangle02 span {background: #ecff4c; clip-path: polygon(50% 0,100% 100%, 0 100%);}
#index .box05 .icon01 {position: absolute; left: -440px; top: 30px; width: 175px; height: 175px; transform: rotate(15deg);}
#index .box05 .icon01 span {content: ''; display: block; width: 100%; height: 100%; background: #7a61d8; border-radius: 100%;}
#index .box05 .icon02 {position: absolute; right: -560px; top: -300px; width: 377px; height: 327px; transform: rotate(45deg);}
#index .box05 .icon02 span {content: ''; position: relative; width: 100%; height: 100%; background: #38b151; opacity: .6; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: block;}

#index .box06 {background: url("img/index/box06_bg.jpg")top left repeat; position: relative; padding: 130px 0 120px;}
#index .box06 .wave_box {position: absolute; top: -320px; left: 50%; margin: auto; width: 1920px; margin-left: -960px;}
#index .box06 .wave_box .wave {position: relative; z-index: 40;}


#index .box07 {background: #fff; padding: 220px 0 0;}
#index .box07 .box {padding: 70px 0;}
#index .box07 .logo {position: absolute; left: 0; top: -50px; z-index: 10; opacity: 0; transition-duration: .5s;}
#index .box07.inview .logo {opacity: 1;}
#index .box07 .text {font-size: 70px; line-height: 1.8; letter-spacing: 15px; transition-delay: 1.2s;}
#index .box07 .text span {background: -webkit-linear-gradient( 180deg,#ea6666 0%, #f66c6c 25%, #38b151 50%, #599cda 75%, #23addd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#index .box07 .bdr {content: ''; width: 400px; height: 1px; background: #000; position: absolute;}
#index .box07 .bdr01 {top: 0; left: 0; clip-path: inset(0 100% 0 0); transition-duration: .5s; transition-delay: .5s; margin-left: 100px;}
#index .box07 .bdr02 {bottom: 0; right: 0; clip-path: inset(0 100% 0 0); transition-duration: .5s; transition-delay: 1.6s; margin-right: 100px;}
#index .box07.inview .bdr01,#index .box07.inview .bdr02 {clip-path: inset(0);}
#index .box07 .icon01 {position: absolute; left: -350px; top: 70px; width: 176px; height: 176px; transition-delay: .5s;}
#index .box07 .icon01 span {background: #fff957; box-sizing: border-box; width: 100%; height: 100%; content: ''; z-index: 20; position: relative; display: block; border-radius: 100%;}
#index .box07 .icon02 {position: absolute; width: 352px; height: 305px; transform: rotate(15deg); bottom: 10px; left: -420px; z-index: 10; transition-delay: .7s;}
#index .box07 .icon02 span {content: ''; position: relative; background: #ff5323; width: 100%; height: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); display: block; z-index: 10;}
#index .box07 .icon03 {position: absolute; width: 387px; height: 336px; transform: rotate(45deg); top: -110px; right: -395px;}
#index .box07 .icon03 span {content: ''; position: relative; background: #7a61d8; width: 100%; height: 100%; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: block;}
#index .box07 .icon04 {position: absolute; width: 140px; height: 120px; transform: rotate(15deg); bottom: 200px; right: -260px;}
#index .box07 .icon04 span {content: ''; position: relative; background: #38b151; width: 100%; height: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); display: block;}
#index .box08 {background: #fff; padding: 220px 0 120px; position: relative;}
#index .box08 .icon_box {position: absolute; width: 1200px; left: 0; right: 0; margin: auto; top: 0;}
#index .box08 .triangle01 {right: -360px; top: -120px; width: 745px; height: 1819px; z-index: 40; position: absolute;}
#index .box08 .triangle01 span {clip-path: polygon(100% 0, 0 50%, 100% 100%); background: -webkit-linear-gradient(-135deg,#7a61d8 0%, #f0ff71 100%); display: block; content: ''; width: 100%; height: 100%;}
#index .box08 .con {box-sizing: border-box; width: 590px; box-shadow: 0 0 5px rgba(0,0,0,.3); position: relative; z-index: 60;}
#index .box08 .con:nth-child(2) {margin-left: 20px;}
#index .box08 .con .on_img {transition-duration: .5s; opacity: 0; position: absolute; z-index: 10; top: 0; left: 0;}
#index .box08 .con:hover .on_img {opacity: 1;}
#index .box08 .txt_box {position: absolute; top: 0; bottom: 0; left: 40px; z-index: 20; width: 300px;}
#index .box08 .txt_box .box {width: 100%;}
#index .box08 .txt01 {font-size: 20px;line-height: 1; box-sizing: border-box; border-bottom: 2px solid #fff; padding-bottom: 15px; margin-bottom: 15px;}
#index .box08 .txt02 {font-size: 20px; line-height: 1; text-align: right;}
#index .box08 .bdr {content: ''; position: absolute; display: block; z-index: 30; background: #fff; transition-duration: .5s;}
#index .box08 .bdr01 {width: calc(100% - 10px); height: 2px; top: 5px; left: 5px; clip-path: inset(0 100% 0 0);}
#index .box08 .bdr02 {width: 2px; height: calc(100% - 10px); top: 5px; right: 5px; clip-path: inset(0 0 100% 0); transition-delay: .2s;}
#index .box08 .bdr03 {width: calc(100% - 10px); height: 2px; bottom: 5px; right: 5px; clip-path: inset(0 0 0 100%);}
#index .box08 .bdr04 {width: 2px; height: calc(100% - 10px); bottom: 5px; left: 5px; clip-path: inset(100% 0 0 0); transition-delay: .2s;}
#index .box08 .con:hover .bdr {clip-path: inset(0);}


#index .box09 .con {position: relative; box-sizing: border-box; box-shadow: 0 0 5px rgba(0,0,0,.3); z-index: 60;}
#index .box09 .txt_box {position: absolute; top: 0; bottom: 0; left: 80px; z-index: 20;}
#index .box09 .left_box {width: 300px; margin-right: 75px;}
#index .box09 .txt01 {font-size: 20px; line-height: 1; box-sizing: border-box; border-bottom: 2px solid #000; padding-bottom: 15px; margin-bottom: 15px; width: 100%; transition-duration: .5s;}
#index .box09 .txt02 {font-size: 20px; line-height: 1; text-align: right; transition-duration: .5s;}
#index .box09 .txt03 {font-size: 20px; line-height: 1.7; transition-duration: .5s;}
#index .box09 .con:hover .txt01,#index .box09 .con:hover .txt02,#index .box09 .con:hover .txt03 {color: #fff;}
#index .box09 .con:hover .txt01 {border-color: #fff;}

#index .box09 .con .img {overflow: hidden; position: relative;}
#index .box09 .con .img .on_img {transition-duration: .5s; position: absolute; top: 0; left: 0; z-index: 10; opacity: 0;}
#index .box09 .con:hover .img .on_img {opacity: 1;}
#index .box09 .con .img .bdr {content: ''; position: absolute; display: block; z-index: 30; background: #fff; transition-duration: .5s;}
#index .box09 .con .img .bdr01 {width: calc(100% - 10px); height: 2px; top: 5px; left: 5px; clip-path: inset(0 100% 0 0);}
#index .box09 .con .img .bdr02 {width: 2px; height: calc(100% - 10px); top: 5px; right: 5px; clip-path: inset(0 0 100% 0); transition-delay: .2s;}
#index .box09 .con .img .bdr03 {width: calc(100% - 10px); height: 2px; bottom: 5px; right: 5px; clip-path: inset(0 0 0 100%);}
#index .box09 .con .img .bdr04 {width: 2px; height: calc(100% - 10px); bottom: 5px; left: 5px; clip-path: inset(100% 0 0 0); transition-delay: .2s;}
#index .box09 .con:hover .img .bdr {clip-path: inset(0);}


#index .box10 {position: relative; padding: 260px 0 120px;}
#index .box10 .wave_box {position: absolute; top: -100px; left: 50%; margin: auto; width: 1920px; margin-left: -960px; z-index: 50;}
#index .box10 .wave {position: relative; z-index: 40;}
#index .box10 .title_box {background: url("img/index/box10_title_bg.jpg")top left repeat; width: 1120px; height: 200px; transform: skewX(-20deg); font-size: 30px; line-height: 1.5; box-shadow: 10px 20px 0 rgba(202, 197, 51, .3); margin: 0 auto 80px; position: relative; z-index: 60;}
#index .box10 .title_box h2 {transform: skewX(20deg); line-height: 1.4; letter-spacing: 2px;}
#index .box10 h2 span {font-size: 60px; background: -webkit-linear-gradient( 180deg,#ea6666 0%, #f66c6c 25%, #38b151 50%, #599cda 75%, #23addd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#index .box10 .btn {box-sizing: border-box; background: #fff; border: 5px solid #000; width: 560px; height: 100px; font-size: 20px; line-height: 1; z-index: 50; position: relative; transition-duration: .5s;}
#index .box10 .btn span {position: relative; z-index: 20;}
#index .box10 .btn::before {content: ''; position: absolute; width: calc(100% + 10px); height: calc(100% + 10px); z-index: 10; display: block; opacity: 0; top: -5px; left: -5px; background: -webkit-linear-gradient( 180deg,#ea6666 0%, #f66c6c 25%, #38b151 50%, #599cda 75%, #23addd 100%); transition-duration: .5s;}
#index .box10 .btn::after {content: ''; position: absolute; background: #fff; width: 20px; height: 20px; bottom: 5px; right: 5px; clip-path: polygon(100% 0, 100% 100%, 0 100%); z-index: 30;}
#index .box10 .btn:hover {color: #fff;}
#index .box10 .btn:hover::before {opacity: 1;}
#index .box10 .icon01 {position: absolute; width: 325px; height: 283px; transform: rotate(45deg); bottom: -260px; left: -380px; z-index: 20;}
#index .box10 .icon01 span {content: ''; position: relative; display: block; background: #38b151; width: 100%; height: 100%; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);}
#index .box10 .icon02 {position: absolute; right: -240px; bottom: -180px; width: 175px; height: 150px; transform: rotate(30deg); z-index: 20;}
#index .box10 .icon02 span {content: ''; position: relative; width: 100%; height: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); display: block; background: #ff5323;}
#index .box02 .wave_box,#index .box04 .wave_box,#index .box06 .wave_box,#index .box10 .wave_box {clip-path: inset(0 100% 0 0); -webkit-transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);}
#index .box03 .wave_box {clip-path: inset(0 0 0 100%); z-index: 50;}
#index .box02.inview .wave_box,#index .box04.inview .wave_box,#index .box06 .wave_box,#index .box10.inview .wave_box {clip-path: inset(0);}
#index .box06 .wave_box {z-index: 40;}
#index .box02 .title_box {transform: translateX(10px) skewX(-20deg);}
#index .box02.inview .title_box {transform: translateX(0) skewX(-20deg);}
#index .box03 .title_box,#index .box05 .title_box {transform: translateX(10px) skewX(20deg);} 
#index .box03.inview .title_box,#index .box05.inview .title_box {transform: translateX(0) skewX(20deg);}
#greeting {margin-top: -190px; padding-top: 190px;}




/*========================
FOOTER
========================*/
footer {background: -webkit-linear-gradient( -45deg, #3ca6dc 0%, #7a61d8 100%); padding-top: 120px;}
footer .home_link {font-size: 40px; line-height: 1; margin-bottom: 80px;}
footer nav a {box-sizing: border-box; font-size: 16px; line-height: 1; margin-top: 40px;}
footer nav a:nth-child(1) {margin-top: 0;}
footer .left_box nav:nth-child(n + 2) {margin-left: 80px;}
footer .left_box nav:nth-child(3) a:nth-child(1) {margin-top: 55px;} 
footer nav .min {position: relative; font-size: 14px; padding-left: 20px;}
footer nav .min:before {content: ''; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; background: #fff; width: 15px; height: 2px;}
footer table {font-size: 16px; line-height: 2.3;}
footer table th {padding-right: 40px;}
footer table td .link {position: relative; display: table;}
footer table td .link::after {content: ''; position: absolute; background: url("img/footer/link_icon.svg")no-repeat; width: 10px; height: 7px; bottom: 0; right: -15px; padding-bottom: 13px;}
footer table tr:nth-child(n + 2) th,footer table tr:nth-child(n + 2) td {padding-top: 10px;}

footer .copy {background: #000; font-size: 12px; line-height: 1; padding: 5px 0; margin-top: 120px;}


/*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: 573px; line-height: 1; position: relative; background: url("img/thumb_bg.jpg")center center no-repeat;     clip-path: inset(0 100% 0 0);
    -webkit-transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);}
.page_thumb p {font-size: 50px; display: table; box-sizing: border-box; border-bottom: 3px solid #000; padding-bottom: 15px;}
.page_thumb.inview {clip-path: inset(0);}

.single_page {z-index: 0; position: relative; padding-bottom: 120px;}

/*****************
width480px以下
*****************/
@media screen and (max-width:480px) {

}

/*
タイトル
*************/
.page_title {font-size: 35px; display: table; margin: auto; box-sizing: border-box; border-bottom: 3px solid #000; padding-bottom: 15px; line-height: 1; letter-spacing: 2px;}


/*
記事詳細ページ
***************/
.nav_over {margin: 60px 0;}
.nav_under {margin-top: 60px;}
.navigation .next-entries,.navigation .previous-entries {width: 200px; height: 50px; line-height: 1; font-size: 16px; align-content: center; justify-content: center; box-sizing: border-box; border: none; color: #fff; text-decoration: none; display: inline-block; padding: 10px 0; position: relative;}
.navigation .next-entries {background: -webkit-linear-gradient(
180deg,#ff5323 0%, #ff7b56 50%, #d64d27 100%); margin-right: 20px;}
.navigation .previous-entries {background: -webkit-linear-gradient(
180deg,#3885cd 0%, #459aea 50%, #2e6ca6 100%);}
.navigation .next-entries::after,.navigation .previous-entries::after {content: ''; background: #fff; width: 7px; height: 10px; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; clip-path: polygon(0 0, 100% 50%, 0 100%);}
.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: 16px; line-height: 1; width: 350px; height: 50px; color: #fff; background: -webkit-linear-gradient(180deg,#38b151 0%, #39d659 50%, #259e3e 100%);}
.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;}
}