@charset "utf-8";

/*
Theme Name: rs_slim_child
Template: rs_slim_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: 100px;}

/******************************
HEADER
******************************/
header {height: 130px; background: #000; position: fixed; width: 100%; z-index: 100; padding-top: 20px; box-sizing: border-box;}
header .over_nav {font-size: 40px; line-height: 1; position: absolute; top: -13px; right: 0; margin: 0; overflow: hidden;}
header .over_nav a {margin-left: 30px;}
header .over_nav a:nth-of-type(1) {margin-left: 0;}
header nav li a {padding-bottom: 10px; position: relative;}
header nav li {font-size: 45px; line-height: 1; margin-left: 45px; overflow: hidden;}
header nav li:nth-of-type(1) {margin-left: 0;}
header nav a::before {position: absolute; left: 0; content: ""; width: 0; height: 1px; background: #fff; bottom: 7px; transition-duration: .3s;}
header nav a:hover::before {position: absolute; content: ""; width: 100%;}
header h1 {font-size: 14px; line-height: 1; font-weight: 500; margin-bottom: 25px;}

.front_main_box .main_txt p {font-size: 20px; line-height: 1.7; text-shadow: #dfd4dc 3px 3px 5px, #dfd4dc -3px 3px 5px, #dfd4dc 3px -3px 5px, #dfd4dc -3px -3px 5px; font-weight: 800; margin-top: 5px;}
.front_main_box .main_txt .logo {margin: auto;}
.front_main_box .main_txt {position: absolute; right: -20px; bottom: 150px; z-index: 55; opacity: 0;}
.front_main_box.inview .main_txt {opacity: 1; transition-delay: 9s;}
.front_main_box {height: 937px; background: url("img/header/main_slide01.jpg")top center no-repeat; background-size: cover; position: relative; z-index: 51;}
.front_main_box .inbox12 {padding-bottom: 100px; height: 100%;}
.front_main_box .first_txt {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 70; transition-delay: 5.3s; animation-duration: .5s;  animation: mainVisualFadeIn .5s ease-out 1s both; animation-delay: 5.3s;}
.front_main_box.inview .first_txt {opacity: 0;}
.front_main_box .first_txt h1 {margin-bottom: 140px;}
.front_main_box .first_txt .logo {margin: auto;}
.front_main_box .first_txt .main__img {position: absolute; opacity: 0;}
.front_main_box .first_txt .word img {margin: auto;}
.front_main_box .min_txt {font-size: 30px; line-height: 1.5; margin-top: 100px;}
.front_main_box::before {  content: ''; position: absolute; top: 0; width: 100%; height: 50%; background: url("img/header/main_bg.jpg") top left repeat; background-size: cover; -webkit-transition: all 1s; transition: all 1s; z-index: 60; transition-delay: 6s;}
.front_main_box::after {  content: ''; position: absolute; bottom: 0; width: 100%; height: 50%; background: url("img/header/main_bg.jpg") top left repeat; background-size: cover; -webkit-transition: all 1s; transition: all 1s; z-index: 60; transition-delay: 6s;}
.front_main_box.inview::before,.front_main_box.inview::after {height: 0;}

@keyframes changeMainImage {
  0% {opacity: 0;}
  5% {opacity: 1;}
  20% {opacity: 1;}
  23% {opacity: 0;}
  35% {opacity: 0;}}
@keyframes changeMainlast{
  0% {opacity: 0;}
  5% {opacity: 1;}
  100% {opacity: 1;}
}
.main__img {
animation-name: changeMainImage;	
  animation-duration: 4.5s;
  animation-iteration-count: 1;	
}
.main__img.no01 {animation-delay: .7s;}
.main__img.no02 {animation-delay: 1.4s;}
.main__img.no03 {animation-delay: 2.1s;}
.main__img.no04 {animation-delay: 2.8s;}
.main__img.no05 {animation-delay: 3.5s;}
.main__img.no06 {animation-name: changeMainlast; 
	animation-delay: 4.2s; 
	animation-fill-mode: forwards;}
@keyframes mainVisualFadeIn {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(10px);
  }
}
.front_main_box .frame {position: absolute; background: #000; z-index: 52; animation-delay: 9s;}
.front_main_box .frame01 {width: 100%; height: 0; left: 0; top: 0;}
.front_main_box .frame02 {width: 100%; height: 0; left: 0; bottom: 0;}
.front_main_box .frame03 {width: 0; height: 100%; left: 0; top: 0;}
.front_main_box .frame04 {width: 0; height: 100%; right: 0; top: 0;}
.front_main_box.inview .frame01, .front_main_box.inview .frame02 {-webkit-animation: BT-wh .2s cubic-bezier(.77,0,.175,1) 8s forwards; animation: BT-wh .2s cubic-bezier(.77,0,.175,1) 8s forwards;}
.front_main_box.inview .frame03, .front_main_box.inview .frame04 {-webkit-animation: LR-wh .2s cubic-bezier(.77,0,.175,1) 8s forwards; animation: LR-wh .2s cubic-bezier(.77,0,.175,1) 8s forwards;}
@-webkit-keyframes BT-wh{0%{height:0}to{height:100px}}
@-webkit-keyframes LR-wh{0%{width:0}to{width:6rem}}

.main_slide {position: absolute; top: 0; width: 100%; height: 100%;}
.main_slide .slide-img .slide01 {object-position: left bottom;}
.main_slide .slide-img {width: 100%; height: 100%;}
.main_slide .slide-img img {width: 100%; height: 100%; object-fit: cover; object-position: center bottom;}
.main_slide .slide-img .slide01 {object-position: left bottom;}

/*　上に上がる動き　*/

#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.up{
	transform: translateY(-130px)
}
#header.DownMove,#st_hamburger.DownMove{
	animation: DownAnime 0.5s forwards;
	animation-delay: 8s;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-120px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}
#nav{
  position: fixed;
  height: 100vh;
  width: 100%;
  left: -100%;
  top: 0;
  background: #1b1b1b;
  transition: .7s;
  z-index: 600;
}
.hamberger_box {
	position: fixed;
	top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 1100px;
    z-index: 700;
}
#hamburger01,#hamburger02,#hamburger03 {
  display: block;
  width: 60px;
  height: 30px;
  cursor: pointer;
  transition: 1s;
  position: absolute;
  left: -100px;
  top: 0; bottom: 0; margin: auto; z-index: 500;
}
#hamburger02 {position: absolute; width: 40px; height: 30px; z-index: 700; left: 0; top: 80px; bottom: 0; margin: 0;}
#hamburger03 {position: absolute; z-index: 700; left: 195px; right: inherit; bottom: auto; top: -160px;}


.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 60px;
  height: 1px;
  background-color: #fff;
  transition: 1s;
}

#line1,#line02_1,#line03_1 {
  top: 0;
}
#line2,#line02_2,#line03_2 {
  top: 14px;
}
#line3,#line02_3,#line03_3 {
  bottom: 0px;
}
#line02_1 {width: 60px;}
#line02_2 {width: 60px; left: inherit; right: 0; top: 15px;}
#line02_3 {width: 40px; left: inherit; right: 0;}
#line03_3 {background: #fff;}

.in{
  transform: translateX(100%);
} 

.line_1,.line_2.line_3{
  background: #fff;
}
.line_1 {
  transform: translateY(12px) rotate(-45deg);
  top: 0;
}
.line_2 {
opacity: 0;
}
.line_3 {
  transform: translateY(-17px) rotate(45deg);
  bottom: 0;
}
#line02_1.line_1 {width: 40px; transform: translateY(12px) rotate(-45deg); background-color: #fff;}
#line02_3.line_3 {width: 40px; transform: translateY(-17px) rotate(45deg); background-color: #fff;}
#st_header {position: fixed; top: 0; left: 0; width: 100%; background: #fff; height: 80px; z-index: 600;}
#st_header .inner {max-width: 1200px; margin: 0 auto; box-sizing: border-box; position: static;}
#st_header .left_box {font-size: 30px; line-height: 1;}
#st_header .left_box img {margin-right: 7px;}
#st_header .global_nav .dots::before {border: 1px solid #000;}
#st_header .global_nav .dots::after {background: #000;}
#nav .inner {padding-left: 200px; position: relative; z-index: 10;}
#nav .list_box:nth-of-type(2),#nav .list_box02 {margin-left: 190px;}
#nav .list_box a {position: relative; padding-left: 35px; font-size: 40px; 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: 40px; box-sizing: border-box; padding-bottom: 20px;}
#nav .link {box-sizing: border-box; padding-bottom: 20px; opacity: 0; transition: transform 1s,opacity 1s; transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-delay: .8s; transform: translateY(30px); position: relative; z-index: 10; line-height: 1;}
#nav.in .link { opacity: 1; transform: translateY(0);}
#nav .link:nth-of-type(2){transition-delay: 1s;}
#nav .link:nth-of-type(3){transition-delay: 1.2s;}
#nav .inner02 {margin: 30px 0 0 100px; opacity: 0; transition: transform 1s,opacity 1s; transition-timing-function: cubic-bezier(.165,.84,.44,1); transition-delay: 1.4s; transform: translateY(30px); position: relative; z-index: 10;}
#nav.in .inner02 {opacity: 1; transform: translateY(0);}
#nav table {font-size: 20px; line-height: 1.5;}
#nav table th,#nav table td {padding-right: 120px; font-weight: 500;}
#nav table tr:nth-of-type(2) th,#nav table tr:nth-of-type(2) td {padding-top: 20px;}
#nav .logo_box {position: absolute; left: 0; top: 0; bottom: 0; margin: auto; height: 100%; width: 285px; z-index: 10; background: #000;}
.util_bar01 {width: 1px; height: 100%; position: absolute; right: 0; top: 0; transition: opacity .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); overflow: hidden; z-index: 1;}
.front_main_box.inview .util_bar01 {background: #4c4c4c; animation: show_line 1.7s forwards; transform-origin: top; transition-timing-function: cubic-bezier(.165,.84,.44,1);}
.util_bar01 .bdr {transition: background-color .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); position: relative; width: 1px; height: 100%; background-color: #000; animation: loop_line 4s infinite;}
.util_bar02 {width: 1px; height: 100%; position: absolute; right: 0; top: 0; transition: opacity .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); overflow: hidden; z-index: 1;}
#nav.in .util_bar02 {background: #218dc4; animation: show_line 1.7s forwards; transform-origin: top; transition-timing-function: cubic-bezier(.165,.84,.44,1);}
.util_bar02 .bdr {transition: background-color .2s; transition-timing-function: cubic-bezier(.165,.84,.44,1); position: relative; width: 1px; height: 100%; background-color: #fafafa; animation: loop_line 4s infinite;}
@keyframes loop_line{0%{top:-100%}100%{top:100%}}
@keyframes show_line{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@media screen and (max-width:1450px) {
	#nav .logo_box,.hambarger_box {display: none;}
}
#nav {width: 100%;}
#nav.close {width:0%;}


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

#message {margin-top: -120px; padding-top: 120px;}
#salon {margin-top: -120px; padding-top: 120px;}

/*index*/
#index .box01 {background: #000; position: relative;}
#index .box01 .over {background: #fff; padding: 200px 0 180px;}
#index .box01 h2 p {font-size: 40px; line-height: 1; display: table; margin: auto; position: relative;}
#index .box01 h2 p::before {content: ''; background: url("img/index/box01_h2_bdr.svg") no-repeat; width: 170px; height: 1px; position: absolute; top: -15px; left: -30px;}
#index .box01 h2 p::after {content: ''; background: url("img/index/box01_h2_bdr.svg") no-repeat; width: 170px; height: 1px; position: absolute; bottom: -10px; left: -30px;}
#index .box01 .over .txt01 {font-size: 30px; line-height: 1; margin: 110px 0 30px; transition-delay: .3s;}
#index .box01 .over .txt02 {font-size: 18px; line-height: 3.5; transition-delay: .5s;}
#index .box01 .course_box {padding: 95px 0;}
#index .box01 .course_box a {position: relative; z-index: 10;}
#index .box01 .course_box a:nth-of-type(1) {padding-bottom: 30px;}
#index .box01 .course_box a:nth-child(2) {margin-top: 30px; margin-left: -210px;}
#index .box01 .course_box a img {min-width: 1060px; height: 600px;}
#index .box01 .course_box a:nth-child(2) img {min-width: 1071px;}
#index .box01 .course_box .h_img {position: absolute; left: 0; top: 0; transition-duration: .5s; z-index: 10; background: url("img/index/course_box_img01_h.svg")no-repeat; width: 0; height: 600px;}
#index .box01 .course_box a:nth-child(2) .h_img {background: url("img/index/course_box_img02_h.svg")no-repeat; left: inherit; right: 0; background-position: right;}
#index .box01 .course_box a:hover .h_img {width: 100%;}
#index .box01::after {content: ''; width: 100%; height: 100px; background: #000; position: absolute; right: 0; bottom: 0;}
#index .box02 h2 p {font-size: 40px; line-height: 1; display: table; margin: auto; position: relative;}
#index .box02 h2 p::before {content: ''; background: url("img/index/box02_h2_bdr.svg") no-repeat; width: 110px; height: 1px; position: absolute; top: -15px; left: -20px;}
#index .box02 h2 p::after {content: ''; background: url("img/index/box02_h2_bdr.svg") no-repeat; width: 110px; height: 1px; position: absolute; bottom: -10px; left: -20px;}
#index .box02 .txt01 {font-size: 18px; line-height: 2; margin-top: 100px;}
#index .box02 .img_box {margin-top: 95px;}
#index .box02 .img_box a {transition-duration: .3s; position: relative; z-index: 10; width: 333px;}
#index .box02 .img_box a:hover {box-shadow: 5px 5px 0 #000;}
#index .box02 .img-wrap {overflow: hidden; position: relative; z-index: 10; background: #fff; bottom: 0; content: ''; left: 0; pointer-events: none; transition-duration: .3s; transition-delay: .5s; clip-path: inset(0 100% 0 0);}
#index .box02 .img-wrap02 {transition-delay: .7s;}
#index .box02 .img-wrap03 {transition-delay: .9s;}
#index .box02.inview .img-wrap {clip-path: inset(0 0 0 0);}
@keyframes img-wrap {0% {transform: translateX(0%);} 100% {transform: translateX(100%);}}
#index .box02 {position: relative; padding: 200px 0;background-color: #fff;}
#index .box02::after {content: ''; width: 100%; height: 350px; background: url("img/index/box02_bg.jpg")top left repeat; position: absolute; bottom: 0; left: 0;}
#index .box03 {padding: 200px 0 510px; background: url("img/index/box03_bg.jpg")top left repeat;}
#index .box03 h2 p {font-size: 40px; line-height: 1; display: table; margin: auto; position: relative; transition-delay: .5s;}
#index .box03 h2 p::before {content: ''; background: url("img/index/box03_h2_bdr.svg") no-repeat; width: 100px; height: 1px; position: absolute; top: -15px; left: -10px;}
#index .box03 h2 p::after {content: ''; background: url("img/index/box03_h2_bdr.svg") no-repeat; width: 100px; height: 1px; position: absolute; bottom: -10px; left: -10px;}
#index .box03 .text {font-size: 18px; line-height: 1; margin-top: 110px;}
#index .box03 .menu_box {margin-top: 100px;}
#index .box03 .menu {width: 525px; transition-delay: 1.3s;}
#index .box03 .menu02 { transition-delay: 1.5s;}
#index .box03 .menu ul {margin-top: 80px;}
#index .box03 .menu ul .min {font-size: 15px; margin-top: 10px; line-height: 1.3;}
#index .box03 .menu li {font-size: 17px; line-height: 1; margin-top: 50px; position: relative; text-align: left;}
#index .box03 .menu li:nth-of-type(1) {margin-top: 0;}
#index .box03 .menu li::before {content: ''; background: url("img/index/box03_list_style.svg") no-repeat; width: 7px; height: 7px; position: absolute; top: 4px; left: -15px;}
#index .box03 h3 {font-size: 20px; line-height: 1;}
#index .box03 .left_img {position: absolute; bottom: -510px; left: -460px; z-index: 30; transition-delay: .1s;}
#index .box03 .right_img {position: absolute; bottom: -560px; right: -460px; z-index: 20; transition-delay: .2s;}
#index .box04 {background: url("img/index/box04_bg.jpg")top center no-repeat; position: relative; padding: 250px 0 200px; height: auto; box-sizing: border-box; background-size: cover;}
#index .box04 h2 p {font-size: 40px; line-height: 1; display: table; margin: auto; position: relative;}
#index .box04 h2 p::before {content: ''; background: url("img/index/box04_h2_bdr.svg") no-repeat; width: 85px; height: 1px; position: absolute; top: -15px; left: -13px;}
#index .box04 h2 p::after {content: ''; background: url("img/index/box04_h2_bdr.svg") no-repeat; width: 85px; height: 1px; position: absolute; bottom: -10px; left: -13px;}
#index .box04 .item {box-sizing: border-box; border-right: 1px solid #fff; width: 366px; padding: 20px 50px 0;}
#index .box04 .item:nth-of-type(1),#index .box04 .item:nth-of-type(3n + 1) {border-left: 1px solid #fff;}
#index .box04 .item:nth-of-type(n + 4) {margin-top: 45px;}
#index .box04 .img {width: 200px; position: relative; margin-bottom: 20px;}
#index .box04 .img img {width: 100%; height: 150px; object-fit: cover; object-position: center;}
#index .box04 .time {font-size: 14px; line-height: 1;}
#index .box04 h3 {font-size: 14px; margin: 10px 0 15px; font-weight: 500; line-height: 1.5;}
#index .box04 .text {font-size: 14px; line-height: 1.5;}
#index .box04 .more {position: absolute; width: calc(100% - 30%); box-sizing: border-box; border-bottom: 1px solid #fff; bottom: 20px; right: -80px; font-size: 26px; height: 60px;}
#index .box04 .more::after {content: ''; display: block; position: absolute; width: 0; height: 0; border-left: 8px solid #fff; border-right: 10px solid transparent; border-top: 8px solid transparent; right: -10px; bottom: 0;}
#index .box04 .blog_list {margin-top: 120px; transition-delay: .5s;}
#index .fade_under .blog_list .item:nth-of-type(2) {transition-delay: .1s;}
#index .fade_under .blog_list .item:nth-of-type(3) {transition-delay: .2s;}
#index .fade_under .blog_list .item:nth-of-type(4) {transition-delay: .3s;}
#index .fade_under .blog_list .item:nth-of-type(5) {transition-delay: .4s;}
#index .fade_under .blog_list .item:nth-of-type(6) {transition-delay: .5s;}
#index .box04 .btn {font-size: 28px; line-height: 1; height: 50px; width: 300px; background: #af1b1b; margin: 100px auto 0; transition-delay: .9s;}
#index .box05 {background: url("img/index/box05_bg.jpg") top left repeat; padding: 200px 0 460px; position: relative;}
#index .box05 .txt {width: 550px;}
#index .box05 .txt .txt01 {font-size: 66px; line-height: 1; transition-delay: .5s; letter-spacing: 3px;}
#index .box05 .txt .txt02 {font-size: 40px; line-height: 1; position: relative; transition-delay: .6s;}
#index .box05 .txt .txt02 p::after {content: ''; width: 245px; height: 1px; background: #000; position: absolute; right: 10px; top: 0; bottom: 0; margin: auto;}
#index .box05 .txt .txt03 {font-size: 30px; line-height: 1; margin-top: 10px; transition-delay: .7s;}
#index .box05 .txt .txt03 span {font-size: 55px;}
#index .box05 .txt .txt04 {font-size: 26px; margin-top: 10px; transition-delay: .8s;}
#index .box05 .txt .txt05 {font-size: 16px; line-height: 2.1; margin-top: 20px; transition-delay: .9s;}
#index .box05::after {content: ''; width: 100%; height: 200px; background: #af1b1b; position: absolute; transform: skewY(4deg); bottom: 70px;}
#index .box06::before {content: ''; width: 100%; height: 600px; background: #000; position: absolute; transform: skewY(-4deg); top: -133px;}
#index .box06 {position: relative; top: -100px;}
#index .box06 .over {height: 769px; background: url("img/index/box06_over_bg.jpg") top center no-repeat; position: relative; opacity: 0; transform: translateY(10px); transition-duration: .7s; transition-timing-function: ease-in-out; box-sizing: border-box; background-size: cover;}
#index .box06 .over.inview {transform: translateY(0); opacity: 1;}
#index .box06 .over .item01 {content: ''; background: url("img/index/box06_item01.svg") no-repeat; width: 480px; height: 256px; position: absolute; top: -400px; right: -350px;}
#index .box06 .over .item02 {content: ''; background: url("img/index/box06_item02.svg") no-repeat; width: 452px; height: 256px; position: absolute; bottom: -205px; left: -360px;}
#index .box06 .over .txt {position: relative; z-index: 10;}
#index .box06 .over .txt .txt02 {font-size: 30px; line-height: 2; transition-delay: .2s; text-shadow: #000 3px 3px 5px, #000 -3px 3px 5px, #000 3px -3px 5px, #000 -3px -3px 5px;}
#index .box06 .over .img {position: absolute; top: 0; bottom: 0; right: -360px; margin: auto; transition-delay: .5s; clip-path: inset(0 100% 0 0); transition-duration: .5s;}
#index .box06 .over.inview .img {clip-path: inset(0 0 0 0);}
#index .box06 .under_bg {background: #fff; padding: 200px 0;}
#index .box06 .under{width: 1100px; margin-left: auto; position: relative; opacity: 0; transform: translateY(30px); transition-duration: .5s; transition-timing-function: ease-in-out;}
#index .box06 .under.inview {transform: translateY(0); opacity: 1;}
#index .box06 .under .reserve {width: 800px; border-top: 1px solid #000; position: relative;}
#index .box06 .under .reserve .txt01 {font-size: 85px; line-height: 1;}
#index .box06 .under .reserve .txt02 {font-size: 18px; line-height: 1; margin-top: 10px;}
#index .box06 .under .reserve .txt {position: absolute; top: 0; bottom: 0; padding-left: 100px; z-index: 10;}
#index .box06 .under .reserve img {opacity: 0; transition-duration: .5s;}
#index .box06 .under .reserve:hover img {opacity: 1;}
#index .box07 {background: #000; padding: 220px 0 0; margin-top: -100px;}
#index .box07 h2 p {font-size: 40px; line-height: 1; display: table; margin: auto; position: relative;}
#index .box07 h2 p::before {content: ''; background: url("img/index/box07_h2_bdr.svg") no-repeat; width: 170px; height: 1px; position: absolute; top: -15px; left: -35px;}
#index .box07 h2 p::after {content: ''; background: url("img/index/box07_h2_bdr.svg") no-repeat; width: 170px; height: 1px; position: absolute; bottom: -10px; left: -35px;}
#index .box07 iframe {width: 100%; height: 500px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);
border-top: 3px solid #b78f3b; border-bottom: 3px solid #b78f3b; margin-top: 120px; box-sizing: border-box;}
#index .box07 iframe:hover {filter: none;}
#index .box07 .contact {background: url(img/contact_banner/bg_logo.svg)center center no-repeat; padding: 100px 0 200px; position: relative;}
#index .box07 .contact .item01 {position: absolute; top: 0; right: 0;}
#index .box07 .contact .item02 {position: absolute; bottom: 0; left: 0;}
#index .box07 .logo {margin: 0 auto; transition-delay: .7s;}
#index .box07 .info {margin-top: 50px; display: table; margin: 50px auto 0;  transition-delay: 1s;}
#index .box07 .info .access .right {margin-left: 30px;}
#index .box07 .txt01 {font-size: 18px; line-height: 1; margin-bottom: 50px;}
#index .box07 .txt02,#index .box07 .txt03,#index .box07 .txt04,#index .box07 .txt05,#index .box07 .txt06,#index .box07 .txt07 {font-size: 16px; line-height: 1;}
#index .box07 .txt02,#index .box07 .txt03,#index .box07 .txt05,#index .box07 .txt06 {margin-bottom: 20px;}
#index .box07 .txt06 {margin-left: 62px;}
#index .box08 {background: url("img/index/box08_bg.jpg") top left no-repeat; padding: 150px 0;}
#index .box08 h2 {font-size: 50px; line-height: 1;}
#index .box08 h2::after {content: ''; width: 555px; height: 1px; background: #000; position: absolute; right: 0;}
#index .box08 h2 p:nth-of-type(1) {font-size: 120px; margin-right: 20px; letter-spacing: 5px;}
#index .box08 h2 p:nth-of-type(2) {font-size: 50px; letter-spacing: 2px;}
#index .box08 .text {margin-top: 30px; line-height: 2.3; font-size: 14px;}





#index {position: relative; z-index: 20;}
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  right: 90px;
  bottom: -380px;
  height: 160px;
}
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position: absolute;
    right: inherit;
    bottom: inherit;
    top: -525px;
    left: 100px;
}
.scrolldown2::after {background: #eee;}
.scrolldown3{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  right: inherit;
left: 100px;
  bottom: inherit;
	top: -420px;
	z-index: 10;
}
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  right: 0;
	left: 0;
  bottom: -200px;
	z-index: 20;
}



/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 100px;
	background: #000;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 1;
	}
	30%{
		height: 80px;
		opacity: 1;
	}
	100%{
		height: 0px;
		top:160px;
		opacity: 0;
	}
}

/*========================
FOOTER
========================*/
footer {position: relative; bottom: 0; right: 0; left: 0; margin: auto; box-sizing: border-box;}
footer .under {background: url("img/footer/bg.jpg")top left repeat; height: 367px; padding-top: 50px; box-sizing: border-box;}
footer .under .txt {padding-bottom: 50px;}
footer .under .txt p:nth-of-type(1){font-size: 20px; line-height: 1; margin-right: 20px;}
footer .under .txt p:nth-of-type(2){font-size: 54px; line-height: 1;}
footer .under .logo {margin-top: 40px;}
footer .btn_box {background: linear-gradient(90deg, #fff 0%, #000 100%); padding: 50px 0; box-sizing: border-box; height: 170px;}
footer .btn_box .btn {width: 525px; height: 70px; background: #000; transition-duration: .5s;}
footer .btn_box .btn:hover {background: #af1b1b;}
footer .btn_box .btn02 {background: #000; margin-left: 50px;}
footer .btn_box .btn p {font-size: 20px; line-height: 1;}
footer .btn_box .btn .icon {margin-right: 20px;}
footer .over_nav {font-size: 40px; line-height: 1; position: relative; z-index: 10;}
footer .over_nav a {margin-left: 25px;}
footer .over_nav a:nth-of-type(1) {margin-left: 0;}
footer nav ul {margin-top: 35px;}
footer nav li {font-size: 45px; line-height: 1; margin-left: 45px;}
footer nav li:nth-of-type(1) {margin-left: 0;}
footer .copyright {background: #eee; padding: 10px 0; margin-top: 50px;} 
footer .copyright p {font-size: 12px; line-height: 1;}
footer nav a {position: relative;}
footer nav a::before {position: absolute; left: 0; content: ""; width: 0; height: 1px; background: #fff; bottom: 7px; transition-duration: .3s;}
footer nav a:hover::before {position: absolute; content: ""; width: 100%;}
footer .seo {font-size: 16px; line-height: 1;}



/*contact_banner*/
#contact_banner {background: url("img/contact_banner/bg_logo.svg")center center no-repeat; background-color: #000; margin-top: 100px; position: relative;}
#contact_banner .logo {margin: 100px auto 0; transition-delay: .7s;}
#contact_banner .info {margin-top: 50px; display: table; margin: 50px auto 0;  transition-delay: 1s;}
#contact_banner .info .access .right {margin-left: 30px;}
#contact_banner .txt01 {font-size: 18px; line-height: 1; margin-bottom: 50px;}
#contact_banner .txt02,#contact_banner .txt03,#contact_banner .txt04,#contact_banner .txt05,#contact_banner .txt06,#contact_banner .txt07 {font-size: 16px; line-height: 1;}
#contact_banner .txt02,#contact_banner .txt03,#contact_banner .txt05,#contact_banner .txt06 {margin-bottom: 20px;}
#contact_banner .txt06 {margin-left: 62px;}
#contact_banner .item01 {position: absolute; top: 0; right: 0;}
#contact_banner .item02 {position: absolute; bottom: 0; left: 0;}


/*pankuzu*/
.pan {padding: 80px 0; background: #fff; position: relative; z-index: 10;}
.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: 685px; line-height: 1; position: relative; z-index: 10;}
.page_thumb p {font-size: 120px; line-height: 1; z-index: 30; letter-spacing: 5px;}
.page_thumb .img {position: absolute; right: 0; left: 0; top: 0; margin: auto; content: ''; width: 100%; height: 685px;}

.thumb01 {background: url("img/thumb01.jpg")top center no-repeat; background-size: cover;}
.thumb02 {background: url("img/thumb02.jpg")top center no-repeat; background-size: cover;}
.thumb03 {background: url("img/thumb03.jpg")top center no-repeat;}
.single_page {z-index: 20; position: relative; background: #fff;}

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

/*
タイトル
*************/
.page_title p{font-size: 40px; border-left: 5px solid #af1b1b; padding-left: 20px; letter-spacing: 2px;}
.page_title {background: #000; padding: 10px 0 10px 20px; margin-bottom: 50px;}


/*
記事詳細ページ
***************/
.nav_over {margin: 60px 0;}
.nav_under {margin-top: 60px;}
.navigation .next-entries,.navigation .previous-entries {width: 100px; height: 40px; line-height: 1; font-size: 14px; align-content: center; justify-content: center; box-sizing: border-box; border: none; color: #fff; text-decoration: none; display: inline-block; padding: 10px 0; transition-duration: .7s; background-color: #000;}
.navigation .next-entries {margin-right: 20px;}
.navigation .next-entries:active,.navigation .previous-entries:active {-webkit-transform: translateY(4px); transform: translateY(4px);border-bottom: none;}
.navigation .next-entries a,.navigation .previous-entries a {display: flex; align-items: center; justify-content: left; width: 100%; height: 100%; padding-left: 15px; font-size: 16px;}
.nav_archive_btn {box-sizing: border-box; font-size: 14px; line-height: 1; width: 150px; height: 40px; background: #000; color: #fff;}

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

/*IE用*/
@media all and (-ms-high-contrast: none) {
    #nav {display: none;}
    .front_contact_box .inbox12 {margin: 0;}
    #contact_banner .box {padding-bottom: 30px;}
    #index .box05 .icon {bottom: 0;}
    .ie_box {width: 100%;}
    #voice .no,#index .box06 .no {height: 53px;} 
}