@charset "utf-8";

/*
Theme Name: reas_child
Template: reas_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; -webkit-text-size-adjust: 100%;}
.indication {opacity: 1;}
.indent_content {padding: 80px 0;}
.indent_content02 {margin-top: 60px;}

/******************************
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);
  }
}
@-webkit-keyframes stroke_dashoffset_zero{to{stroke-dashoffset:0}}@keyframes stroke_dashoffset_zero{to{stroke-dashoffset:0}}
#svg_line_box03 {position: absolute; width: 1px; z-index: 2; height: 100%;}
#svg_line03 {stroke: #000;
    fill: none;
    stroke-width: 1;
    stroke-dasharray: 1410;
    stroke-dashoffset: 1410;}
.inview #svg_line03 {-webkit-animation: 1s linear 0.5s 1 normal forwards stroke_dashoffset_zero; animation: 1s linear 0.5s 1 normal forwards stroke_dashoffset_zero;}
#index .box03 .svg_box {position: absolute; left: 0; top: 157px; right: 0; height: calc(100% - 157px); z-index: 30;}
#svg_line_box05,#svg_line_box06,#svg_line_box07 {position: absolute; width: 1px; z-index: 2; height: 100%;}
#svg_line05,#svg_line06,#svg_line07 {stroke: #fff;
    fill: none;
    stroke-width: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;}
.inview #svg_line05,.inview #svg_line06,.inview #svg_line07 {-webkit-animation: 1s linear 0s 1 normal forwards stroke_dashoffset_zero; animation: 1s linear 0s 1 normal forwards stroke_dashoffset_zero;}
#index .box06 .svg_box,#index .box07 .svg_box {position: absolute; top: 0; left: 0; right: 0; height: 100%;}
#index .box08 .svg_box {position: absolute; top: 0; left: 0; right: 0; height: 100%;}
#svg_line_box11 {position: relative; top: 0; right: 0; z-index: 2; width: 1200px; height: 237px;}
#svg_line11 {stroke-dasharray: 5000; stroke-dashoffset: 5000;}
.inview #svg_line11 {-webkit-animation: 3s linear .7s 1 normal forwards stroke_dashoffset_zero; animation: 3s linear .7s 1 normal forwards stroke_dashoffset_zero;}
#index .box08 .e_bdr_box {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
#index .box08 .e_bdr_con {width: 900px; position: relative; height: 482px;}
#index .box08 .e_bdr {position: absolute; right: 0; bottom: 0; width: 50px; height: 125px; -webkit-transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) 2.3s;
    transition: -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) 2.3s;
    transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) 2.3s;
    transition: clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) 2.3s, -webkit-clip-path .8s cubic-bezier(0.165, 0.84, 0.44, 1) 2.3s; clip-path: inset(0 0 100% 0);}
#index .box08 .e_bdr span {content: ''; display: block; background: #fff; width: 100%; height: 100%;}
#index .box08.inview .e_bdr {clip-path: inset(0);}
#min_box_svg_line01,#min_box_svg_line02,#min_box_svg_line03,#min_box_svg_line04,#min_box_svg_line05,#min_box_svg_line06 {position: absolute; top: -202.5px; left: 50%; z-index: 2; width: 345.5px; height: 202px;}
#min_svg_line01,#min_svg_line02,#min_svg_line03,#min_svg_line04,#min_svg_line05,#min_svg_line06 {stroke-dasharray: 3000; stroke-dashoffset: 3000;}
.inview #min_svg_line01,.inview #min_svg_line02,.inview #min_svg_line03,.inview #min_svg_line04,.inview #min_svg_line05,.inview #min_svg_line06 {-webkit-animation: 3s linear 1.1s 1 normal forwards stroke_dashoffset_zero; animation: 3s linear 1.1s 1 normal forwards stroke_dashoffset_zero;}
#min_box_svg_line02 {height: 282.5px; width: 197.5px; top: -282.5px;}
#min_box_svg_line03 {top: -151.5px; width: 95.5px; height: 150.5px;}
#min_box_svg_line04 {top: -218.5px; height: 218.5px; width: 1px;}
#min_box_svg_line05 {top: -150.5px; left: auto; right: 50%; width: 44.5px; height: 150.5px;}
#min_box_svg_line06 {top: 18px; left: -393.5px; width: 393.5px; height: 1px;}
.inview #min_svg_line02 {animation-delay: 1.2s;}
.inview #min_svg_line03 {animation-delay: 1.3s;}
.inview #min_svg_line04 {animation-delay: 1.4s;}
.inview #min_svg_line05 {animation-delay: 1.5s;}
.inview #min_svg_line06 {animation-delay: 1.6s;}

#index .box03 .dott {position: absolute; width: 7px; height: 7px; box-sizing: border-box; opacity: 0; transition-duration: .3s; transition-delay: 1.7s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);}
#index .box03 .dott span {content: ''; display: block; width: 100%; height: 100%; background: #1c334f; border-radius: 100%;}
#index .box03.inview .dott {opacity: 1;}
#index .box03 .dott01 {top: -205px; right: -278.5px;}
#index .box03 .dott02 {top: -285px; right: -134.5px; transition-delay: 1.8s;}
#index .box03 .dott03 {top: -154px; right: -34px; transition-delay: 1.9s;}
#index .box03 .dott04 {top: -225px; right: 63px; transition-delay: 2s;}
#index .box03 .dott05 {top: -153px; right: inherit; left: 20px; transition-delay: 2.1s;}
#index .box03 .dott06 {top: 15px; right: inherit; left: -400px; transition-delay: 2.2s;}



.flexible_c {animation: loop_color_text 32s infinite;}
.flexible_b {animation: loop_color_bg 32s infinite;}
@keyframes loop_color_text{
0%{color: #1c334f;}
24% {color: #1c334f;}
25%{color: #305684;}
49% {color: #305684;}
50% {color: #3b69a1;}
74%{color: #3b69a1;}
75% {color: #4882c8;}
99%{color: #4882c8;}
100% {color: #1c334f;}
}
@keyframes loop_color_bg{
0%{background: #1c334f;}
24% {background: #1c334f;}
25%{background: #305684;}
49% {background: #305684;}
50% {background: #3b69a1;}
74%{background: #3b69a1;}
75% {background: #4882c8;}
99%{background: #4882c8;}
100% {color: #4882c8;}
}

header {top: 31px; left: 0; right: 0; margin: auto; width: calc(100% - 62px); position: fixed; z-index: 550; border-bottom: 1px solid #fff; color: #fff; transition-duration: .5s;}
header .ch_item {opacity: 0; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; transition-duration: .5s;}
header .st_item {opacity: 1; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; transition-duration: .5s;}
header.ch_header .ch_item {opacity: 1;}
header.ch_header .st_item {opacity: 0;}

header .inbox12 {height: 93px;}
#nav{
  position: fixed;
  height: 100vh;
  width: 100%;
  left: -100%;
  top: 0;
  background: #1b1b1b;
  transition: .7s;
  z-index: 600;
}
.hamburger02_box {position: fixed; top: 0; left: 0; right: 0; margin: auto; width: 100%; max-width: 1200px; z-index: 600;}
.hambarger_box {content: ''; position: absolute; left: 180px; top: 0; z-index: 500; margin: auto; box-sizing: border-box; height: calc(100% - 120px); bottom: 0;}
#hamburger,#hamburger02,#hamburger03,#hamburger04 {
  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: 600; right: 0; top: 65px; bottom: auto;}
#hamburger04 {position: absolute; left: auto; width: 40px; height: 30px; z-index: 700; right: 0; top: 0; bottom: auto;}
#hamburger03 {position: absolute; z-index: 700; left: 0; right: 0;}
.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 60px;
  height: 1px;
  background-color: #000;
  transition: 1s;
  border-radius: 4px;
}
#hamburger02 .inner_line {background-color: #fff;}
#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: 40px;}
#line02_2 {width: 40px; left: inherit; right: 0; top: 15px;}
#line02_3 {width: 40px; left: inherit; right: 0;}
#line03_3 {background: #fff;}
#line04_1 {width: 40px; background-color: #fff;}
#line04_2 {width: 40px; left: inherit; right: 0; top: 15px; background-color: #fff;}
#line04_3 {width: 40px; left: inherit; right: 0; 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;
}
#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;}
#line04_1.line_1 {width: 40px; transform: translateY(12px) rotate(-45deg); background-color: #fff;}
#line04_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: 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 .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;}
#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_bar02 {width: 1px; height: 100%; position: absolute; right: 0; top: 0; transition: opacity .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); overflow: hidden; z-index: 1;}
#nav.in .util_bar02 {background: #4c4c4c; animation: show_line 1.7s forwards; transform-origin: top; transition-timing-function: cubic-bezier(.165,.84,.44,1);}
.util_bar02 .bdr {transition: background-color .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); position: relative; width: 1px; height: 100%; background-color: #fafafa; animation: loop_line 4s infinite;}
@keyframes loop_line{0%{top:-100%}100%{top:100%}}
@keyframes show_line{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@media screen and (max-width:1450px) {
	#nav .logo_box,.hambarger_box {display: none;}
}


.nav_img {position: absolute; width: 100%; height: 100%; opacity: 0; transition-duration: .5s; transition-timing-function: ease-in-out;}
.nav_img.hover {opacity: 1;}
.nav_img01 {background: url("img/header/nav_Img01.jpg")center center no-repeat; background-size: cover;}
.nav_img02 {background: url("img/header/nav_Img02.jpg")center center no-repeat; background-size: cover;}
.nav_img03 {background: url("img/header/nav_Img03.jpg")center center no-repeat; background-size: cover;}
.nav_img04 {background: url("img/header/nav_Img04.jpg")center center no-repeat; background-size: cover;}
.nav_img05 {background: url("img/header/nav_Img05.jpg")center center no-repeat; background-size: cover;}
.nav_img06 {background: url("img/header/nav_Img06.jpg")center center no-repeat; background-size: cover;}
.nav_img07 {background: url("img/header/nav_Img07.jpg")center center no-repeat; background-size: cover;}
.nav_img08 {background: url("img/header/nav_Img08.jpg")center center no-repeat; background-size: cover;}
.nav_img09 {background: url("img/header/nav_Img09.jpg")center center no-repeat; background-size: cover;}
.nav_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_img12 {background: url("img/header/nav_Img12.jpg")center center no-repeat; background-size: cover;}
.nav_img13 {background: url("img/header/nav_Img13.jpg")center center no-repeat; background-size: cover;}
.nav_img14 {background: url("img/header/nav_Img14.jpg")center center no-repeat; background-size: cover;}
.nav_img15 {background: url("img/header/nav_Img15.jpg")center center no-repeat; background-size: cover;}
.nav_img16 {background: url("img/header/nav_Img16.jpg")center center no-repeat; background-size: cover;}
.nav_img15 {background: url("img/header/nav_Img15.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;}
.important-info {position: fixed; left: 40px; bottom: 40px; font-size: 13px; display: inline; padding: 10px 8px; box-sizing: border-box; border: 1px solid #fff; z-index: 100; transition-duration: .5s;}
.important-info.fixed {background: #fff; border-color: #000; transition-duration: .5s; color: #000;}
.important-info.fixed:hover {background: #000; color: #fff;}
.main_nav {display: table; margin-right: 60px; margin-top: 20px;}
.main_nav li {display: table-cell; position: relative; line-height: 1; box-sizing: border-box; padding: 0 20px; font-size: 16px;}
.main_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);
}
.main_nav .dots::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border: solid 1px #fff;
    border-radius: 50%;
    opacity: 0;
    -webkit-transform: scale(.7);
    transform: scale(.7);
    -webkit-transition: .3s;
    transition: .3s;
	box-sizing: border-box;
}
.main_nav .dots::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    height: 4px;
    width: 4px;
    background: #fff;
    border-radius: 50%;
    -webkit-transition: .3s;
    transition: .3s;
	box-sizing: border-box;
}
.main_nav li:hover .dots::before {opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: .5s cubic-bezier(.08,.92,.35,1);
    transition: .5s cubic-bezier(.08,.92,.35,1);
}
.main_nav li:hover .dots::after {
	opacity: 1;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transition: .3s;
    transition: .3s;
}
.front_main_box {height: 100%; width: 100%; box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto;}
.front_main_box .logo_box02 {max-width: 1200px; width: 100%; height: 100%; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; z-index: 100;}
.front_main_box .main_logo {width: 200px; right: -20px; bottom: 50px; position: absolute;}
.front_main_box .logo_box {position: absolute; top: 150px; left: 0; margin: auto; line-height: 1; z-index: 20;}
.front_main_box .logo_box .box {background: rgba(255,255,255,.55); width: 100%; height: 100%; position: relative; z-index: 50; padding: 30px 20px; box-sizing: border-box;}
.front_main_box .logo_box::before {content: ''; position: absolute; width: calc(100% + 20px); height: calc(100% + 20px); background: rgba(255,255,255,.35); top: -10px; left: -10px;}
.front_main_box .txt01 {font-size: 40px; line-height: 1; margin: 0 auto 15px;}
.front_main_box .txt02 {font-size: 20px; line-height: 1;}
.front_main_box .txt03 {font-size: 36px; line-height: 1; margin: 15px auto;}
.front_main_box .txt04 {font-size: 20px; line-height: 1;}
.front_main_box .sp_txt,.front_main_box .sp_main_logo {display: none;}


@keyframes loop_bdr{
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);}
}
.lines {position: fixed; top: 30px; left: 30px; right: 30px; bottom: 30px; overflow: hidden; pointer-events: none; z-index: 100;}
.lines span {content: ''; position: absolute; z-index: 100; background: #fff; transition-duration: .5s;}
.lines span:nth-child(1) {width: 100%; height: 1px; top: 0; left: 0;}
.lines span:nth-child(2) {width: 100%; height: 1px; bottom: 0; left: 0;}
.lines span:nth-child(3) {width: 1px; height: 100%; left: 0; top: 0;}
.lines span:nth-child(4) {width: 1px; height: 100%; right: 0; top: 0;}


.main_slide_box {position: absolute; left: 0; bottom: 0; right: 0; margin: auto; top: 0;}
.main_slide_box .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.main_slide_box .swiper-slide-active .slide-img,
.main_slide_box .swiper-slide-duplicate-active .slide-img,
.main_slide_box .swiper-slide-prev .slide-img{
  animation: zoomUp 12.5s linear 0s 1 normal both;  
}
.main_slide_box .slide-img {height: 100%; width: 100%;}
.main_slide_box .swiper-container {width: 100%; height: 100%;}

.parallax_area {position: fixed; top: 0; left: 0; width: 100%;}
/*scroll*/
.kv__scroll {
position: absolute; right: 20px; top: -100px; margin: auto;  z-index: 20; text-align: center; letter-spacing: 1.5px; padding-bottom: 30px;}
.kv__scroll__inner {position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: end;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 auto;
    -ms-flex-wrap: wrap;
    -webkit-box-align: end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
padding-bottom: 100px;}
.kv__scroll__inner::before {position: absolute;
    left: 50%;
    z-index: 90;
    margin: 0 auto;
    width: 1px;
    content: "";
    font-size: 1.3rem;   
	bottom: -90px;
    height: 175px;
    background: #fff;}
.kv__scroll__label {
	    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    color: #fff;
    line-height: 1;
    -webkit-box-align: center;
    -webkit-box-pack: center;
}
.kv__scroll__text {padding-left: 2px; font-size: 20px;}
.kv__scroll__point {position: absolute;
    left: 50%;
    z-index: 100;
    margin-left: -3.5px;
    width: 7px;
    height: 7px;
bottom: 6.5rem;
    -webkit-animation: scroll-point 2.6s ease-out infinite;
    animation: scroll-point 2.6s ease-out infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;}
.kv__scroll__point:after, .kv__scroll__point:before {    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    content: "";
    -ms-border-radius: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;}
.kv__scroll__point:before {    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -ms-border-radius: 50%;}
.kv__scroll__point:before {    
	z-index: 0;
    background: rgba(255,255,255,.2);
    -webkit-animation: scroll-point-zoom 2.6s ease-out infinite;
    animation: scroll-point-zoom 2.6s ease-out infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;}
.kv__scroll__point:after {background: #fff;}
@-webkit-keyframes scroll-point{0%{bottom:6.5rem;opacity:0}20%{opacity:1}48%{bottom:-4.28571em;opacity:1}70%{opacity:0}100%{bottom:-4.28571em;opacity:0}}@keyframes scroll-point{0%{bottom:6.5rem;opacity:0}20%{opacity:1}48%{bottom:-4.28571em;opacity:1}70%{opacity:0}100%{bottom:-4.28571em;opacity:0}}@-webkit-keyframes scroll-point-sp{0%{bottom:4.5em;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}@keyframes scroll-point-sp{0%{bottom:4.5em;opacity:0}20%{opacity:1}40%{bottom:0;opacity:1}70%{opacity:0}100%{bottom:0;opacity:0}}@-webkit-keyframes scroll-point-zoom{0%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}20%{opacity:1}40%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}70%{opacity:0}100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}}@keyframes scroll-point-zoom{0%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}20%{opacity:1}40%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}70%{opacity:0}100%{opacity:0;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}}@-webkit-keyframes scroll-point-zoom-sp{0%{opacity:0;-webkit-transform:scale(.2) translateY(-50%) translateX(-50%);-moz-transform:scale(.2) translateY(-50%) translateX(-50%);-ms-transform:scale(.2) translateY(-50%) translateX(-50%);-o-transform:scale(.2) translateY(-50%) translateX(-50%);transform:scale(.2) translateY(-50%) translateX(-50%)}40%{-webkit-transform:scale(1) translateY(-50%) translateX(-50%);-moz-transform:scale(1) translateY(-50%) translateX(-50%);-ms-transform:scale(1) translateY(-50%) translateX(-50%);-o-transform:scale(1) translateY(-50%) translateX(-50%);transform:scale(1) translateY(-50%) translateX(-50%)}50%{opacity:1}100%{opacity:0;-webkit-transform:scale(1) translateY(-50%) translateX(-50%);-moz-transform:scale(1) translateY(-50%) translateX(-50%);-ms-transform:scale(1) translateY(-50%) translateX(-50%);-o-transform:scale(1) translateY(-50%) translateX(-50%);transform:scale(1) translateY(-50%) translateX(-50%)}}@keyframes scroll-point-zoom-sp{0%{opacity:0;-webkit-transform:scale(.2) translateY(-50%) translateX(-50%);-moz-transform:scale(.2) translateY(-50%) translateX(-50%);-ms-transform:scale(.2) translateY(-50%) translateX(-50%);-o-transform:scale(.2) translateY(-50%) translateX(-50%);transform:scale(.2) translateY(-50%) translateX(-50%)}40%{-webkit-transform:scale(1) translateY(-50%) translateX(-50%);-moz-transform:scale(1) translateY(-50%) translateX(-50%);-ms-transform:scale(1) translateY(-50%) translateX(-50%);-o-transform:scale(1) translateY(-50%) translateX(-50%);transform:scale(1) translateY(-50%) translateX(-50%)}50%{opacity:1}100%{opacity:0;-webkit-transform:scale(1) translateY(-50%) translateX(-50%);-moz-transform:scale(1) translateY(-50%) translateX(-50%);-ms-transform:scale(1) translateY(-50%) translateX(-50%);-o-transform:scale(1) translateY(-50%) translateX(-50%);transform:scale(1) translateY(-50%) translateX(-50%)}}
@media screen and (max-width:1500px) {
	.front_main_box .c_txt,.kv__scroll {display: none;}
}
@media screen and (max-width:1300px) {
	.paging_box {display: none;}
}
header.ch_header {background: rgba(255,255,255,.75); color: #000;}
header.ch_header .main_nav .dots::before {border-color: #000;}
header.ch_header .main_nav .dots::after {background: #000;}
#st_hamburger.ch_header .inner_line {background: #000;}


/*index*/
#index .m_btn {position: relative;}
#index .m_btn::after {content: ''; position: absolute; width: 50px; height: 1px; background: #fff; top: 0; bottom: 0; right: 0; margin: auto; transform: translateX(50%); transition-duration: .5s;}
#index .m_btn:hover::after {transform: translateX(100%); opacity: 0;}
#index .box01 {position: relative;}
#index .box01 .bg {background: rgba(0,0,0,.80); padding: 60px 0 70px;}
#index .box01 .txt01 {writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; font-size: 20px; line-height: 1.4; letter-spacing: 3px; margin-right: 200px;}
#index .box01 .title {font-size: 40px; margin-bottom: 20px;}
#index .box01 .txt02 {font-size: 60px; line-height: 1;}
#index .box01 .icon01 {position: absolute; right: 0; top: 40px; bottom: 0; margin: auto;}
#index .ecomss_box {background: url(img/index/ecomss_bg.svg)center center no-repeat; background-color: #f8f8f8; padding: 80px 0; position: relative; z-index: 10;}
#index .ecomss_box .add_txt01 {margin-bottom: 50px;}
#index .ecomss_box .title_inner {margin-bottom: 80px;}
#index .ecomss_box .con {width: 570px; box-sizing: border-box; border-left: 3px solid #24b7b3; padding-left: 20px; transition-delay: .5s;}
#index .ecomss_box .con:nth-child(n + 3) {margin-top: 50px;}
#index .ecomss_box h3 {margin-bottom: 20px;}
#index .ecomss_box p {font-size: 14px; line-height: 1.7;}
#index .ecomss_box .btn {box-sizing: border-box; border: 1px solid #1c334f; width: 450px; height: 60px; font-size: 16px; line-height: 1; margin: 70px auto 0; position: relative; z-index: 50; transition-duration: .5s;}
#index .ecomss_box .btn:hover {background: #1c334f; color: #fff;}
#index .ecomss_box .btn::after {background: #1c334f;}
#index .ecomss_box .con:nth-child(2) {transition-delay: .6s;}
#index .ecomss_box .con:nth-child(3) {transition-delay: .7s;}
#index .ecomss_box .con:nth-child(4) {transition-delay: .8s;}
#index .ecomss_box .add_txt02 {margin-left: 50px;}
#index .ecomssplus_box .btn {box-sizing: border-box; width: 400px; height: 60px; background: #1c334f; margin: 80px auto 0; font-size: 16px; line-height: 1; transition-delay: 1.3s;}
#index .box02 {position: relative; z-index: 10; background: #fff; padding: 150px 0; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); transition-duration: 1s;}
#index .box02 a {box-sizing: border-box; border: 1px solid #1c334f; width: 350px; height: 60px; font-size: 16px; line-height: 1; position: relative; color: #1c334f; font-weight: bold; overflow: hidden; margin: 80px auto 0;}
#index .box02 a p {position: relative; z-index: 10; transition-duration: .5s;}
#index .box02 a::after {content: ''; position: absolute; right: -110px; bottom: -100px; background: #1c334f; width: 150px; height: 150px; transition-duration: .4s; transform: rotate(45deg);}
#index .box02 a:hover p {color: #fff;}
#index .box02 a:hover::after {width: 550px; height: 450px; bottom: -100px;}
#index .box02:hover {-webkit-filter: inherit; filter: inherit;}
#index .box02 .txt_img {margin: 2.5% auto 0; width: 15%;}

#index .c_img {position: relative; min-width: 1920px; left: 50%; margin-left: -960px; z-index: 20;}
#index .box03 {background: #f6f6f6; position: relative; padding-bottom: 160px;}
#index .box03 .title_box {background: #1c334f; padding: 50px 0; position: relative;}
#index .box03 h2 {font-size: 60px; position: relative; display: table; letter-spacing: 5px;}
#index .box03 h2 span {position: relative; z-index: 10;}
#index .box03 h2::before {content: ''; position: absolute; background: url("img/index/box03_h2_b.svg")no-repeat; width: 30px; height: 30px; left: -15px; top: 0px; z-index: 10;}
#index .box03 h2::after {content: ''; position: absolute; background: url("img/index/box03_title_box_a02.svg")no-repeat; width: 858px; height: 157px; left: -760px; top: -50px;}
#index .box03 .title_box p {font-size: 60px; line-height: 1; position: absolute; left: 0; right: 0; bottom: 10px; opacity: .1; letter-spacing: 5px; padding-left: 360px;}
#index .box03 .txt01 {font-size: 25px; line-height: 2.3; margin: 50px auto 90px;}
#index .box03 ul::after {content: ''; background: #0c1a2b; opacity: .3; position: absolute; bottom: 130px; left: -150px; width: 1900px; height: 450px; transform: skewX(-9deg) translateX(100%); transition-duration: .8s;}
#index .box03.inview ul::after {transform: skewX(-9deg) translateX(0%);}
#index .box03 li {position: relative; z-index: 10; transition-delay: .6s;}
#index .box03 li:nth-child(2) {transition-delay: .7s;}
#index .box03 li:nth-child(3) {transition-delay: .8s;}
#index .box03 li:nth-child(4) {transition-delay: .9s;}
#index .box03 li .txt02 {font-size: 14px; line-height: 1; position: absolute; left: 0; top: -10px; transform: rotate(-10deg); color: #1c334f;}
#index .box03 li .txt02_02 {left: -10px; top: -50px;}
#index .box03 li .txt02 span {font-size: 40px; margin-right: 10px;}
#index .box03 li .btn {box-sizing: border-box; width: 300px; height: 45px; background: #e3aa03; border: 2px solid #ad8100; border-bottom: 5px solid #ad8100; position: absolute; bottom: 221px; right: 0; transition-duration: .5s; font-size: 12px;}
#index .box03 li .btn:hover {border: 2px solid #0c1a2b; border-bottom: 5px solid #0c1a2b; background: #1c334f; color: #fff;}
#index .box03 li .coming_btn::before {content: ''; position: absolute; background: #000; width: calc(100% + 4px); height: calc(100% + 8px); top: -3px; left: -2px; opacity: .75; z-index: 10;}
#index .box03 li .coming_btn:hover {background: #e3aa03; border: 2px solid #ad8100; border-bottom: 5px solid #ad8100; color: #000;}
#index .box03 li .btn::after {display: none;}
#index .box03 .coming_btn::after {transform: translateX(50%); opacity: 1;}
#index .box03 .map_box {box-sizing: border-box; border: 4px solid #1c334f; width: 100%; height: 200px; position: relative; margin-top: 20px;}
#index .box03 .map_box .shadow {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.85); top: 0; left: 0; content: ''; display: block;}
#index .box03 iframe {box-sizing: border-box; width: 100%; height: 100%; display: block; border: none;}

#index .box04 {background: url("img/index/box04_bg.jpg")top left repeat; position: relative;}
#index .box04 .over {position: relative; padding-bottom: 80px;}
#index .box04 .title_box {height: 157px; margin-top: -75px; z-index: 30;}
#index .box04 .title_box::before {content: ''; position: absolute; background: #1c334f; right: -500px; top: 0; bottom: 0; margin: auto; width: 100%; height: 157px;}
#index .box04 .title_box::after {content: ''; position: absolute; background: url("img/index/box03_title_box_a.svg")no-repeat; width: 479px; height: 157px; right: -370px; top: 0;}
#index .box04 h2 {font-size: 60px; position: relative; margin-right: 30px;}
#index .box04 h2::before {content: ''; position: absolute; background: url("img/index/box03_h2_b.svg")no-repeat; width: 30px; height: 30px; left: -15px; top: 0px; z-index: 10;}









#index .box04 h2 span {position: relative; z-index: 20; left: 5px; letter-spacing: 5px;}
#index .box04 .title_txt {position: absolute; opacity: .1; font-size: 60px; line-height: 1; bottom: 10px; right: 0; z-index: 10; letter-spacing: 5px;}
#index .box04 .txt01 {font-size: 40px; line-height: 1; margin-top: 50px; letter-spacing: 1px;}
#index .box04 .txt02 {font-size: 26px; margin-top: 10px; letter-spacing: 1px; transition-delay: .2s; line-height: 1;}
#index .box04 .txt03 {margin-top: 50px; font-size: 30px; transition-delay: .5s;}
#index .box04 .txt03::after {content: ''; position: absolute; background: url("img/index/box04_icon01.svg")no-repeat; width: 250px; height: 250px; right: -460px; top: -55px;}
#index .box04 .txt04 {font-size: 18px; line-height: 2.2; margin-top: 40px;}
#index .box04 .txt04 span {transition-delay: 1s; animation-delay: 1s;}
#index .box04 .txt04_02 {margin-top: 10px;}
#index .box04 .txt04_02 span {transition-delay: 1.3s; animation-delay: 1.3s;}
#index .box04 .con {position: relative; overflow: hidden;}
#index .box04 .con .bg {position: relative; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%); transition-duration: 1s;}
#index .box04 .con:hover .bg {-webkit-filter: inherit; filter: inherit;}
#index .box04 .txt_box {position: absolute; right: 0; bottom: 100px; width: 880px; box-sizing: border-box; padding: 30px 60px 45px 30px;}
#index .box04 .txt_box::before {content: ''; background: rgba(0,0,0,.7); -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 0 0 100%); position: absolute; right: 0; bottom: 0; width: 100%; height: 100%;}
#index .box04 .con.inview .txt_box::before {clip-path: inset(0);}
#index .box04 .con_txt01 {font-size: 40px; position: absolute; display: table; left: 30px; top: -29px; padding: 10px 20px; line-height: 1; background: #1c334f; transition-delay: 1.2s;}
#index .box04 h3 {font-size: 30px; margin: 0px 0 20px; transition-delay: 1.3s;}
#index .box04 .con_txt02 {font-size: 16px; line-height: 2.3; transition-delay: 1.5s;}
#index .box04 .con_txt03 {display: table; padding: 10px 20px; font-size: 22px; line-height: 1; background: #ffbe00; box-sizing: border-box; border: 1px solid #fff; margin-top: 20px; transition-delay: 1.6s;}
#index .box04 .con_txt04 {font-size: 20px; line-height: 1.5; margin-bottom: 40px; transition-delay: 1.4s;}
#index .box04 .btn {position: absolute; right: 65px; bottom: -25px; font-size: 16px; box-sizing: border-box; width: 400px; height: 50px; transition-duration: .5s; transition-delay: 1.7s;}
#index .box04 .btn span {width: 100%; height: 100%; transition-duration: .5s; border: 1px solid #fff;}
#index .box04 .btn:hover span {background: #1c334f; border-color: #1c334f;}
#index .box04 .btn::after {display: none;}
#index .box04 .over_btn {box-sizing: border-box; border: 1px solid #1c334f; width: 450px; height: 60px; font-size: 16px; line-height: 1; position: relative; z-index: 50; transition-duration: .5s;}
#index .box04 .over_btn:hover {background: #1c334f; color: #fff;}
#index .box04 .over_btn::after {background: #1c334f;}
#index .box04 .logo {position: absolute; left: 80px; bottom: 80px; width: 15%; max-width: 338px; transition-delay: .4s;}
#index .box04 .logo02 {position: absolute; right: 80px; top: 80px; width: 150px; max-width: 150px; transition-delay: .4s;}
#index .box04 .sim_logo {top: 40px;}
#index .box04 .bdr {position: absolute; z-index: 10; -webkit-transition: -webkit-clip-path 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
    transition: -webkit-clip-path 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
    transition: clip-path 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
    transition: clip-path 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) .8s, -webkit-clip-path 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) .8s;
}
#index .box04 .bdr01 {width: 100%; height: 30px; top: 0; left: 0; clip-path: inset(0 100% 0 0);}
#index .box04 .bdr02 {width: 30px; height: 100%; top: 0; right: 0; clip-path: inset(0 0 100% 0);}
#index .box04 .bdr03 {width: 100%; height: 30px; bottom: 0; right: 0; clip-path: inset(0 0 0 100%);}
#index .box04 .bdr04 {width: 30px; height: 100%; top: 0; left: 0; clip-path: inset(100% 0 0 0);}
#index .box04 .bdr02,#index .box04 .bdr04 {transition-delay: 1.1s;}
#index .box04 .con:nth-child(2) {margin-top: 50px;}
#index .box04 .con:nth-child(3) {margin-top: 50px;}
#index .box04 .con03 {margin-top: 50px;}
#index .box04 .con:nth-child(1) .bdr {background: #1c334f;}
#index .box04 .con:nth-child(2) .bdr {background: #9fa0a0;}
#index .box04 .con:nth-child(3) .bdr {background: #34581b;}
#index .box04 .con:nth-child(4) .bdr {background: #231815;}
#index .box04 .con.inview .bdr {clip-path: inset(0);}
#index .box04 .precautionary {position: absolute; z-index: 10; left: 415px; bottom: 45px; font-size: 16px; line-height: 1; transition-delay: 1.6s;}
#index .box04 .ex_item {position: absolute; left: 80px; top: 80px; transition-delay: .3s;}
#index .box04 .add_con {position: relative;}
#index .box04 .add_con .bg {-webkit-filter: grayscale(100%); width: 100%; -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); transition-duration: 1s;}
#index .box04 .add_con:hover .bg {-webkit-filter: inherit; filter: inherit;}
#index .box04 .add_txt_box {position: absolute; left: 0; bottom: 100px; width: 37%; box-sizing: border-box; padding: 30px 50px 45px;}
#index .box04 .add_txt_box::before {content: ''; background: rgba(0,0,0,.7); -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); position: absolute; right: 0; bottom: 0; width: 100%; height: 100%;}
#index .box04 .add_con_txt01 {font-size: 30px; position: absolute; display: table; left: 30px; top: -29px; padding: 10px 20px; line-height: 1; background: #1c334f; transition-delay: 1.2s;}
#index .box04 .add_con h3 {font-size: 30px; margin: 0px 0 20px; transition-delay: 1.3s;}
#index .box04 .add_con_txt02 {font-size: 16px; line-height: 2.3; transition-delay: 1.5s;}
#index .box04 .add_con_txt03 {display: table; padding: 10px 20px; font-size: 22px; line-height: 1; background: #ffbe00; box-sizing: border-box; border: 1px solid #fff; margin-top: 20px; transition-delay: 1.6s;}
#index .box04 .add_con_txt04 {font-size: 20px; line-height: 1.5; margin-bottom: 40px; transition-delay: 1.4s;}
#index .box04 .add_con.inview .add_txt_box::before {clip-path: inset(0);}
#index .box04 .add_con .btn {width: 70%; font-size: 16px; height: 50px; left: 50px;}
#index .box04 .add_con02,#index .box04 .add_con03 {margin-top: 50px;}
#index .box04 .add_con h3 .catch {font-size: 30px; color: #ff0000; margin-top: 10px; display: block;}
#index .box04 .add_txt_box .add_txt03 {font-size: 14px; line-height: 1; position: absolute; right: 45px; top: 38px; transition-delay: 1.35s;}
@media screen and (max-width:1640px) {
  #index .box04 .add_txt_box .add_txt03 {font-size: .65vw;}
}
@media screen and (max-width:1450px) {
#index .box04 .add_con h3 {font-size: 1.9vw;}
#index .box04 .add_con h3 .catch {font-size: 1.9vw;}
#index .box04 .add_con_txt02 {font-size: 1vw;}
#index .box04 .add_con .btn {font-size: 1vw; height: auto;}
#index .box04 .add_con .btn span {padding: 3% 0;}
}
@media screen and (max-width:1500px) {
  #index .box04 .add_txt_box .add_txt03 {font-size: .55vw;}
}

#index .pick_up_box {background: url("img/index/pick_up_bg.jpg")top left repeat; padding: 80px 0; position: relative; z-index: 10;}
#index .pick_up_box h2 {font-size: 60px;}
#index .pick_up_box .item {background: #fff; width: 585px; margin-right: 30px;}
#index .pick_up_box .item:nth-child(2n) {margin-right: 0;}
#index .pick_up_box .under {padding: 20px;}
#index .pick_up_box .img {width: 100%; padding-top: 64.8%; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; box-sizing: border-box;}
#index .pick_up_box h3 {font-size: 16px; margin-bottom: 15px;}
#index .pick_up_box .txt_box {font-size: 16px; line-height: 1; position: relative;}
#index .pick_up_box .txt_box p:nth-child(2) {margin-left: 20px;}
#index .pick_up_box .txt_box::after {content: ''; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background: url("img/index/pick_arrow.svg")no-repeat; width: 11px; height: 16px;}
#index .box05 {background: #fff; padding: 80px 0 120px; position: relative; overflow: hidden;}
#index .box05 .title_box,#index .box06 .title_box,#index .box07 .title_box {margin-bottom: 90px; word-break: keep-all;}
#index .box05 .title_box .bdr_box,#index .box06 .title_box .bdr_box,#index .box07 .title_box .bdr_box {margin-right: 50px; position: relative; width: 100%; z-index: 60; transition: clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-clip-path 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: .8s; clip-path: inset(0 100% 0 0);}
#index .box05 .title_box .bdr_box02,#index .box06 .title_box .bdr_box02,#index .box07 .title_box .bdr_box02 { clip-path: inset(0 0 0 100%); transition-delay: .9s;}
#index .box05.inview .title_box .bdr_box,#index .box06 .inview .title_box .bdr_box,#index .box07.inview .title_box .bdr_box {-webkit-clip-path: inset(0); clip-path: inset(0);}
#index .box05 .title_box .bdr_box02,#index .box06 .title_box .bdr_box02,#index .box07 .title_box .bdr_box02 {margin-left: 50px; margin-right: 0;}
#index .box05 .title_box .bdr_box span,#index .box06 .title_box .bdr_box span,#index .box07 .title_box .bdr_box span {box-sizing: border-box; content: ''; background: #000; width: 100%; height: 2px; display: block;}
#index .box05 .title_box .bdr_box span:nth-child(1),#index .box06 .title_box .bdr_box span:nth-child(1),#index .box07 .title_box .bdr_box span:nth-child(1) {margin-bottom: 5px; width: calc(100% - 140px);}
#index .box05 .title_box .bdr_box02 span:nth-child(1),#index .box06 .title_box .bdr_box02 span:nth-child(1),#index .box07 .title_box .bdr_box02 span:nth-child(1) {width: 100%;}
#index .box05 .title_box .bdr_box02 span:nth-child(2),#index .box06 .title_box .bdr_box02 span:nth-child(2),#index .box07 .title_box .bdr_box02 span:nth-child(2) {margin-left: auto; width: calc(100% - 140px);}
#index .box05 .txt_box {transition-delay: 1.9s;}
#index .box05 .over_txt01 {font-size: 40px; line-height: 1; margin-bottom: 35px;}
#index .box06 .title_box .bdr_box {margin-right: 150px;}
#index .box06 .title_box .bdr_box02 {margin-left: 150px; margin-right: 0;}
#index .box07 .title_box .bdr_box {margin-right: 130px;}
#index .box07 .title_box .bdr_box02 {margin-left: 130px; margin-right: 0;}
#index .box05 h2 {font-size: 50px; letter-spacing: 5px;}
#index .box05 .title p {font-size: 50px; line-height: 1; position: relative; opacity: 0;}
#index .box05.inview .title p {opacity: .1;}
#index .box05 .min_txt01 {margin-top: 20px; text-align: right; padding-right: 40px; transition-delay: .2s;}
#index .box05 .min_txt01::after {content: ''; position: absolute; background: #000; transform: skewX(-23deg); top: 0; right: 15px; width: 10px; height: 50px;}
#index .box05 .min_txt02 {margin-bottom: 20px; padding-left: 40px; transition-delay: .4s;}
#index .box05 .min_txt02::after {content: ''; position: absolute; background: #000; transform: skewX(-23deg); top: 0; left: 15px; width: 10px; height: 50px;}
#index .box05 .h2_02 {transition-delay: .5s;}
#index .box05 .bdr {content: ''; background: #1c334f; width: 10px; height: 150px; display: block; transform: skewY(0deg) translateY(-10px); margin: 0 30px; transition-duration: .8s; transition-delay: .8s; opacity: 0;}
#index .box05.inview .bdr {transform: skewX(-23deg) translateY(0); opacity: 1;}
#index .box05 .txt01 {font-size: 30px; line-height: 2.2; position: relative; transition-delay: 1s;}
#index .box05 .txt01::before {content: ''; position: absolute; background: url("img/index/box05_txt01_icon.svg")no-repeat; width: 40px; height: 40px; left: -25px; top: 2px;}
#index .box05 .txt01 span {position: relative; z-index: 10;}
#index .box05 .img_box {width: 936px; position: relative; margin-right: -360px; z-index: 50; transition-delay: 1.2s;}
#index .box05 .img_box a {box-sizing: border-box; position: absolute; font-size: 16px; line-height: 1; width: 350px; height: 60px; background: #1c334f; bottom: 20px; left: -20px;}
#index .box05 .inner02 {margin-top: 50px; z-index: 20;}
#index .box05 .inner01::after {position: absolute; content: ''; background: #1c334f; width: 814px; height: 1194px; transform: skewX(-20deg); z-index: 20; right: -1030px; bottom: -470px; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); -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;}
#index .box05.inview .inner01::after {-webkit-clip-path: inset(0); clip-path: inset(0);}
#index .box05 .inner02 .img_box {margin-left: -360px; margin-right: 50px; transition-delay: 1.7s;}
#index .box05 .inner02 .img_box a {background: #e3aa03; left: inherit; right: -20px;}
#index .box05 .inner02 .img_box a::after {background: #000;}
#index .box05 .txt02 {font-size: 16px; line-height: 2.2;}
#index .box05 .inner02 .txt02:nth-of-type(2) {margin-top: 30px;}
#index .box05 .icon_box {position: absolute; left: -420px; top: 50px; width: 318px; height: 300px; overflow: hidden;}
#index .box05 .icon_box span {content: ''; position: absolute;}
#index .box05 .icon_box span:nth-of-type(1) {background: #1c334f; width: 159px; height: 300px; opacity: 0; top: 0; right: 100px; transition-delay: 2s;}
#index .box05 .icon_box span:nth-of-type(2) {background: #1c334f; width: 318px; height: 300px; z-index: 10; top: 100px; right: 0; transition-delay: 2.2s;}
#index .box05.inview .icon_box span:nth-of-type(1) {opacity: .3;}
#index .box05 .img {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); transition-duration: 1s;}
#index .box05 .inner {z-index: 50;}
#index .box05 .inner:hover .img {-webkit-filter: inherit; -moz-filter: inherit; -ms-filter: inherit; -o-filter: inherit; filter: inherit;}
#index .box06,#index .box07 {background: #e7e7e7; padding: 120px 0; position: relative;}
#index .box06 h2,#index .box07 h2 {font-size: 50px; position: relative; z-index: 10; letter-spacing: 5px;}
#index .box06 .title_box,#index .box07 .title_box {position: relative;}
#index .box06 .title_box p,#index .box07 .title_box p {font-size: 50px; line-height: 1; position: absolute; bottom: -30px; left: 0; right: 0; margin: auto; padding-left: 240px; letter-spacing: 3px;}
#index .box06 .min_text {font-size: 16px; line-height: 1; margin: 20px auto 80px;}
#index .box06 .inview .title_box p,#index .box07.inview .title_box p {opacity: .15;}
#index .box07 .voice_list {margin-top: 80px; position: relative; z-index: 50;}
#index .box07 .voice_list::before {content: ''; position: absolute; background: #fff; width: 1280px; height: 500px; left: -50px; top: 140px; z-index: 20; transition-duration: .5s; opacity: 0; transition-delay: .7s;}
#index .box07 .voice_list::before {background: url("img/index/box07_b_bg.jpg")top left repeat;}
#index .box07.inview .voice_list::before {opacity: 1;}
#index .box07 .voice_list::after {height: 300px; background: #12263e; content: ''; position: absolute; left: 50%; margin-left: -1000px; top: 100px; transition-duration: .8s; width: 0;}
#index .box07.inview .voice_list::after {width: 2000px;}
#index .box07 .item {box-sizing: border-box; width: 366px; margin-right: 40px; z-index: 30; transition-delay: 1s; position: relative;}
#index .box07 .item:nth-child(3n) {margin-right: 0;}
#index .box07 .item:nth-child(n + 4) {margin-top: 40px;}
#index .box07 .item .over {position: relative;}
#index .box07 .item .over::after {content: ''; position: absolute; background: url("img/index/box07_img_after.jpg")top left repeat; width: 50%; bottom: 0; right: 0; padding-bottom: 55%; clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);}
#index .box07 .img_box {width: 90%; transform: skewX(-10deg); box-sizing: border-box; border: 5px solid #1c334f; overflow: hidden; position: relative; margin-left: 18px; padding-bottom: 55%; z-index: 10;}
#index .box07 .img {transform: skewX(10deg); width: 114%; position: absolute; background-size: cover; background-position: center center; background-repeat: no-repeat; box-sizing: border-box; height: 100%; left: -7%;}
#index .box07 .no {position: absolute; background: #1c334f; width: 152px; height: 30px; font-size: 20px; line-height: 1; color: #e3aa03; padding-top: 4px; box-sizing: border-box; letter-spacing: 3px; transform: skewX(10deg); left: -3%; bottom: 0;}
#index .box07 h3 {font-size: 18px; line-height: 1; position: relative; margin-top: 16px; z-index: 10;}
#index .box07 h3::before {content: ''; position: absolute; background: #0c1a2b; width: 150px; height: 1px; right: 0; top: 0; bottom: 0; margin: auto;}
#index .box07 h3::after {content: ''; position: absolute; background: #0c1a2b; width: 1px; height: 10px; right: 4px; top: 0; transform: rotate(-45deg);}
#index .box07 .icon_text {font-size: 28px; line-height: 1; margin-left: 10%; position: relative; z-index: 10;}
#index .box06 .btn,#index .box07 .btn {width: 450px; height: 60px; box-sizing: border-box; border: 1px solid #1c334f; font-size: 16px; line-height: 1; margin: 100px auto 0; transition-duration: .5s; z-index: 50;}
#index .box06 .btn:hover,#index .box07 .btn:hover {background: #1c334f; color: #fff; border-color: #1c334f;}
#index .box06 .btn::after,#index .box07 .btn::after {background: #000;}
#index .box07 {background: #fff; padding-bottom: 300px;}
#index .box07 h3::before,#index .box07 h3::after {background: #000;}
#index .box07 h3::before {right: 0;}
#index .box07 h3::after {right: 4px;}
#index .box06 li {position: relative; z-index: 10; transition-delay: .6s;}
#index .box06 li:nth-child(2) {transition-delay: .7s;}
#index .box06 li:nth-child(3) {transition-delay: .8s;}
#index .box06 li .txt02 {font-size: 20px; line-height: 1; position: absolute; left: 0; top: -30px; transform: rotate(-10deg); color: #1c334f;}
#index .box06 li .txt02 span {font-size: 60px; margin-right: 20px;}
#index .box06 li .btn {box-sizing: border-box; width: 300px; height: 48px; background: #e3aa03; border: 2px solid #ad8100; border-bottom: 5px solid #ad8100; position: absolute; bottom: 0; right: 0; transition-duration: .5s;}
#index .box06 li .btn:hover {border: 2px solid #0c1a2b; border-bottom: 5px solid #0c1a2b; background: #1c334f; color: #fff;}
#index .box06 .btn {margin-top: 90px;}
#index .box06 .pick_up_box {background: none; padding-top: 0;}
#index .box06 .gallery_btn {position: absolute; bottom: 0; left: 0; right: 0; margin: auto; z-index: 20; transition-delay: .4s;}
#index .box06 .gallery_btn .btn {background: #e3aa03; border: 2px solid #ad8100; border-bottom: 5px solid #ad8100;}
#index .box06 .gallery_btn .btn:hover {background: #1c334f; border-color: #1c334f; border-bottom: 5px solid #101c2a;}
#index .box06 .gallery_box {position: relative; padding-top: 60px;}
#index .box06 .image_box {position: relative;}
#index .box06 .image_box::after {content: ''; background: #0c1a2b; opacity: .3; position: absolute; bottom: -25px; right: -150px; width: 1900px; height: 450px; transform: skewX(-9deg) translateX(-100%); transition-duration: .8s;}
#index .box06 .image_box::after {transform: skewX(-9deg) translateX(0%);}
#index .box06 .image_box img {position: relative; z-index: 10; transition-delay: .2s;}
#index .box06 .image_box p {font-size: 40px; line-height: 1; position: absolute; left: 0; top: -45px; transform: rotate(-3deg); color: #1c334f;}
#index .box06 .image_box p .big01 {font-size: 60px;}
#index .box06 .image_box p .big02 {font-size: 50px;}
#index .box06 .over {position: relative;}
#index .box06 .right_box {position: relative; width: 125px; box-sizing: border-box; padding: 3px; background: #1c334f;}
#index .box06 .gallery_slide02 {box-sizing: border-box; width: 100%; height: 95.5px; margin-bottom: 3px;}
#index .box06 .gallery_slide02 .swiper-container {height: 100%;}
#index .box06 .gallery_slide02 .swiper-container .slide-img {height: 100%; box-sizing: border-box; position: relative;}
#index .box06 .gallery_slide02 .swiper-container .slide-img a {height: 100%;}
#index .box06 .gallery_slide02 .swiper-container .slide-img .img {height: 100%;}
#index .box06 .right_box .gallery_slide02:nth-of-type(3) {margin-bottom: 0;}
#index .box06 .vr_btn {box-sizing: border-box; width: 100%; height: 104px; background: #1c334f; font-size: 16px; line-height: 1;}
#index .box06 .gallery_slide01 {position: relative; width: 460px;}
#index .box08 {background: url("img/index/box08_bg.jpg")center center no-repeat; position: relative; background-size: cover;    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
	
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    transition-duration: 1s;}
#index .box08.inview {-webkit-filter: inherit; filter: inherit;}
#index .box08 .txt01 {font-size: 40px; line-height: 1; letter-spacing: 3px; width: auto; padding-left: 40px;}
#index .box08 .txt02 {font-size: 27px; margin-top: 10px;letter-spacing: 1px;}
#index .box08_inner .txt_box {position: relative; z-index: 10;}
#index .box08_inner .txt03 {font-size: 20px; line-height: 1;}
#index .box08_inner .txt04 {font-size: 30px; line-height: 1; margin-top: 10px;}
#index .box08_inner .con {background: #000; width: 800px; height: 300px; position: relative; padding-left: 25px; box-sizing: border-box; overflow: hidden; transition-duration: .5s; z-index: 50;}
#index .box08_inner .con02 {margin-left: 10px; width: 300px; padding-left: 0;}
#index .box08_inner .con02 .txt04 {font-size: 25px;}
#index .box08_inner .img {opacity: .5; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; transition-duration: .5s;}
#index .box08_inner .img img {width: 100%; height: 100%; object-fit: cover;}
#index .box08_inner .bdr_box {width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
#index .box08_inner .con:hover {background: #1c334f;}
#index .box08_inner .con:hover .img {opacity: .1;}
#index .box08_inner .con::before, #index .box08_inner .con::after, #index .box08_inner .con .bdr_box::before, #index .box08_inner .con .bdr_box::after {content: ''; position: absolute; background: #fff; transition-duration: .3s; transition-timing-function: ease-in-out; z-index: 10;}
#index .box08_inner .con::before {bottom: 5px; left: -100%; width: calc(100% - 10px); height: 1px; transition-delay: .3s;}
#index .box08_inner .con::after {bottom: -100%; right: 5px; width: 1px; height: calc(100% - 10px); transition-delay: .5s;}
#index .box08_inner .con .bdr_box::before {top: 5px; right: -100%; width: calc(100% - 10px); height: 1px; transition-delay: .3s;}
#index .box08_inner .con .bdr_box::after {top: -100%; left: 5px; width: 1px; height: calc(100% - 10px); transition-delay: .5s;}
#index .box08_inner .con:hover::before {left: 5px;}
#index .box08_inner .con:hover::after {bottom: 5px;}
#index .box08_inner .con:hover .bdr_box::before {right: 5px;}
#index .box08_inner .con:hover .bdr_box::after {top: 5px;}
#index .box08_02 {background: url("img/index/box08_02_bg.jpg")top left repeat; padding: 80px 0; position: relative; z-index: 10;}
#index .box09 {background: #1c334f; padding: 80px 0; position: relative;}
#index .box09 .box {width: 575px; position: relative;}
#index .box09 h2 {font-size: 25px; margin-bottom: 50px;}
#index .box09 .item {box-sizing: border-box; padding: 20px 0; border-bottom: 2px solid #00c7eb;}
#index .box09 .box:nth-child(2) .item {border-color: #e3aa03;}
#index .box09 .item:nth-of-type(1) {padding-top: 0;}
#index .box09 .over {margin-bottom: 15px;}
#index .box09 .time {font-size: 16px; line-height: 1; margin-right: 20px;}
#index .box09 .time span {font-size: 10px;}
#index .box09 h3 {font-size: 16px;}
#index .box09 .text {font-size: 14px; line-height: 2;}
#index .box09 .btn {position: absolute; top: 3px; right: 0;}
#index .box10 {background: #fff; padding: 80px 0; position: relative;}
#index .box10 h2 {font-size: 50px; letter-spacing: 5px; margin-bottom: 40px;}
#index .box10 h2 span {position: relative; z-index: 10;}
#index .box10 h2::before {content: ''; position: absolute; background: url("img/index/box10_icon.svg")no-repeat; width: 30px; height: 30px; left: -15px; top: -5px;}
#index .box10 p {line-height: 2; transition-delay: .1s;}
#concept {margin-top: -60px; padding-top: 60px;}
#line_up {margin-top: -30px; padding-top: 30px;}
#model_house {margin-top: -30px; padding-top: 30px;}
.zeh {box-sizing: border-box; border: solid 5px #1c334f; padding: 30px; max-width: 1200px; margin: -150px auto 200px;}
.zeh .zeh_title {font-size: 30px; margin-bottom: 30px;}
.zeh table th {box-sizing: border-box; border: solid 1px #000; width: 550px; height: 80px; font-size: 20px; text-align: center; vertical-align: middle;}
.zeh02 {margin: 100px auto;}
.zeh_box {margin-bottom: 150px;}
.zeh_box .zeh {margin: auto}
.zeh_box .zeh_logo {margin-top: 50px;}
.zeh_box table {width: 100%;}
.zeh_box table th {width: 25%;}

#index .diagnose_box {background: url("img/index/diagnose_box_bg.jpg")top center repeat; padding: 100px 0; position: relative; z-index: 10;}
#index .diagnose_box .txt01 {font-size: 40px; line-height: 1; font-weight: 900; letter-spacing: 2px; padding-left: 30px;}
#index .diagnose_box .txt02 {font-size: 65px; line-height: 1; margin-top: 20px; font-weight: 900; letter-spacing: 5px; transition-delay: .1s;}
#index .diagnose_box h2 {margin: 80px 0 50px; font-size: 30px; font-weight: 900; transition-delay: .2s;}
#index .diagnose_box .inner a {box-sizing: border-box; border: 1px solid #1c334f; width: 350px; height: 60px; font-size: 16px; line-height: 1; position: relative; color: #1c334f; font-weight: bold; overflow: hidden;}
#index .diagnose_box .inner .item:nth-of-type(1) {transition-delay: .5s;}
#index .diagnose_box .inner .item:nth-of-type(2) {margin-left: 50px; transition-delay: .6s;}
#index .diagnose_box .inner .item:nth-of-type(3) {margin-left: 50px; transition-delay: .7s;}
#index .diagnose_box .inner a p {position: relative; z-index: 10; transition-duration: .5s;}
#index .diagnose_box .inner a::after {content: ''; position: absolute; right: -110px; bottom: -100px; background: #1c334f; width: 150px; height: 150px; transition-duration: .4s; transform: rotate(45deg);}
#index .diagnose_box .inner a:hover p {color: #fff;}
#index .diagnose_box .inner a:hover::after {width: 550px; height: 450px; bottom: -100px;}
#index .add_box01 {position: relative; z-index: 10; background: #fff; padding-bottom: 50px;}
#index .option_box {position: relative; background: #fff; z-index: 10; padding: 120px 0;}
#index .option_box .option_btn {transition-delay: .2s;}
#index .option_box .btn {box-sizing: border-box; border: 1px solid #1c334f; width: 400px; height: 60px; font-size: 16px; line-height: 1; margin: 80px auto 0; position: relative; z-index: 50; transition-duration: .5s;}
#index .option_box .btn:hover {background: #1c334f; color: #fff;}
#index .option_box .btn::after {background: #1c334f; width: 35px;}

#index .youtube_box {background: url(img/index/youtube_bg.jpg)repeat; box-sizing: border-box; padding: 100px 0; position: relative; z-index: 10;}
#index .youtube_box a {display: table; margin: 0 auto;}



#contact_banner {position: relative; width: 100%; height: 505px; background: #fff;}
#contact_banner .con {background: url("img/index/box11_con_bg.jpg")no-repeat; width: 1158px; height: 350px; position: absolute; right: 0; top: 0;}
#contact_banner .icon_box {position: relative; width: 418px; height: 400px;}
#contact_banner .con::before,#contact_banner .con::after,#contact_banner .con .txt_box::before {position: absolute; content: ''; opacity: 0; transform: translateX(10px); transition-duration: .5s; transition-timing-function: ease;}
#contact_banner .con::before {width: 159px; height: 300px; background: #bac1ca; top: 105px; left: -760px; opacity: 0; transition-delay: .7s;}
#contact_banner .con::after {width: 300px; height: 300px; background: #1c334f; top: 203px; left: -820px; z-index: 20; transition-delay: .8s;}
#contact_banner .con .txt_box::before {width: 150px; height: 150px; background: #0c1a2b; top: 140px; left: -550px; z-index: 10; transition-delay: .9s;}
#contact_banner .txt01 {font-size: 35px; line-height: 1; margin-bottom: 20px; margin-left: 60px;}
#contact_banner .txt02 {font-size: 40px; line-height: 1; margin-left: 60px;}
#contact_banner.inview .con::before,#contact_banner.inview .con::after,#contact_banner.inview .con .txt_box::before {opacity: 1; transform: translateY(0);}
#contact_banner.inview .con::before {opacity: .3;}


/*========================
FOOTER
========================*/
footer {background: #fff; position: relative;}
footer .over {padding: 85px 0 240px; background: #fff;}
footer .over .txt01 {font-size: 40px; line-height: 1; letter-spacing: 5px;}
footer .over .txt02 {font-size: 20px; line-height: 1; margin-top: 30px; letter-spacing: 1px;}
footer .over .inner {margin: 80px auto 60px;}
footer .over .txt03 {font-size: 30px; line-height: 1; position: relative; z-index: 10; letter-spacing: 3px;}
footer .over .txt04 {font-size: 40px; line-height: 1; margin-left: 65px; letter-spacing: 5px; opacity: .2; margin-top: -13px;}
footer .over .bdr {content: ''; background: #000; width: 3px; height: 150px; margin-left: 145px;}
footer .txt_box {margin-left: 95px;}
footer .txt_box p {font-size: 20px; line-height: 1;}
footer .txt_box p:nth-child(2n) {margin-top: 17px;}
footer .txt_box p:nth-child(3) {margin-top: 40px;}
footer .over .logo {box-sizing: border-box; border-bottom: 1px solid #000; width: 300px; padding-bottom: 20px; margin-right: 50px;}
footer .over .inner02 p {font-size: 20px; line-height: 1;}
footer .over .inner02 p:nth-child(2) {margin: 20px 0;}
footer .under {background: url("img/footer/under_bg.jpg")top left repeat; padding: 80px 0;}
footer .under .nav:nth-child(2) {margin: 45px auto;}
footer .under a {font-size: 18px; line-height: 1; margin-right: 35px;}
footer .under .nav a:nth-child(6) {margin-right: 0;}
footer .under .nav:nth-child(3) a:nth-child(5) {margin-right: 0;}
footer .copy {background: #0c1a2b; padding: 5px 0; letter-spacing: 1px; font-size: 12px; line-height: 1;}

.st_line.b_black {background: #000;}
.st_line.s_none {opacity: 0;}




#pop_banner {position: fixed; bottom: 20px; z-index: 100; width: 100%;}
#pop_banner .inner {width: 1200px; margin: auto; background: #fff; box-sizing: border-box; border: 5px solid #e3aa03; height: 100px;}
#pop_banner .inner .right_area .icon {width: 150px; height: 52px; background: #e3aa03; border-radius: 5px; margin-right: 20px;}
#pop_banner .inner .right_area .icon:nth-of-type(1) {margin-left: 10px;}
#pop_banner .inner .right_area .icon:nth-of-type(2) {background: #6bb6bb;}
#pop_banner .inner .right_area .icon:nth-of-type(3) {background: #70b05a; margin-right: 13px;}


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

/*========================
ページ設定
========================*/
/*
サムネ
*************/
.page_thumb {
height: 500px;
line-height: 1;
margin-top: 125px;
display: none;
}
.page_thumb .txt01 {font-size: 45px;}
.page_thumb .txt02 {font-size: 20px; margin-top: 15px;}
.page_thumb .img {position: absolute; content: ''; width: 1100px; height: 500px; right: -350px; bottom: 0;}
.page_thumb .thumb15 {right: -400px;}
.page_thumb .thumb16 {right: -400px;}
.page_thumb .icon_box {margin-top: 110px;}
.page_thumb .block_bdr {content: ''; width: 50px; height: 200px; margin-right: 10px; display: block;
    -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_bdr 4s infinite normal;}
.page_thumb .block_bdr span {display: block; content: ''; position: relative; width: 100%; height: 100%;}
.page_thumb .blocks {width: 200px;}
.page_thumb .blocks span {content: ''; display: block; box-sizing: border-box; border: 1px solid #1c334f; width: 60px; height: 60px; margin-right: 10px;}
.page_thumb .blocks span:nth-child(3n) {margin-right: 0;}
.page_thumb .blocks span:nth-child(5) {background: #1c334f;}
.page_thumb .blocks span:nth-child(n + 4) {margin-top: 10px;}
.page_thumb .logo {position: absolute; left: 560px; bottom: 50px;}

.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;}
.thumb12 {background: url("img/thumb12.jpg")top center no-repeat;}
.thumb13 {background: url("img/thumb13.jpg")top center no-repeat;}
.thumb14 {background: url("img/thumb14.jpg")top center no-repeat;}
.thumb15 {background: url("img/thumb15.jpg")top center no-repeat;}
.thumb16 {background: url("img/thumb16.jpg")top center no-repeat;}
.thumb17 {background: url("img/thumb17.jpg")top center no-repeat;}
.thumb18 {background: url("img/thumb18.jpg")top center no-repeat;}

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

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

/*
タイトル
*************/
.page_title {font-size: 50px;}
.min_page_title {font-size: 16px; line-height: 1; margin: 10px auto 110px;}
.page_title_logo {margin: 60px auto 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: #1c334f; margin-right: 10px;}
.navigation .previous-entries {background-color: #ffbe00;}
.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 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) {
    header {background: rgba(0,0,0,.35);}

    #nav,.hamburger02_box {display: none;}
    .parallax_area {position: absolute;}
    #index .box01 h2 {word-break: keep-all;}
    #index .box01 .txt01 {margin-bottom: 25px; transform: rotate(90deg);}
    #index .box08 .e_bdr_box {display: none;}
    #contact_banner {display: none;}
    
}