@charset "utf-8";

/*
Theme Name: body_child
Template: body_child
Author: t-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: 50px 0; position: relative;}
.indent_content02 {margin-top: 20px;}
.content {padding: 20px; position: relative;}
/******************************
HEADER
******************************/
header {line-height: 1;}
header .over {background-color: #000; font-size: 16px; line-height: 1; padding: 5px 0;}
header .left_area {font-size: 35px; line-height: 1;}
header .left_area img {margin-right: 5px;}
header .right_box a:nth-child(n + 2) {margin-left: 10px;}
header .inner {padding: 10px 0;}
.front_main_box {background: url("img/header/main_bg.jpg")Center center no-repeat; height: 700px;}
.front_main_box .box {height: 100%;}
.front_main_box .front_txt01 {position: absolute; top: 85px; left: 0; z-index: 10; opacity: 0;}
.front_main_box .front_txt02 {position: absolute; top: 5px; right: 10px; z-index: 15; opacity: 0;}
.front_main_box .front_txt03 {position: absolute; bottom: 50px; left: 50px; opacity: 0;}
.front_main_box .front_txt03.inview {transition: all 1s 1s cubic-bezier(0.86, 0, 0.07, 1); opacity: 1;}
.front_main_box .front_icon01 {position: absolute; bottom: 80px; right: 80px; z-index: 10; opacity: 0;}
.front_main_box .front_icon01.fv {animation-delay: .7s;}
.front_main_box .front_icon02 {position: absolute; bottom: 30px; right: 0; z-index: 20; opacity: 0;}
.front_main_box .front_icon02.fv {animation-delay: .75s;}
.front_main_box .front_band {background: url("img/header/band.png")no-repeat; min-width: 1900px; height: 126px; position: absolute; left: 50%; bottom: 141px; margin-left: -950px; opacity: 0; z-index: 5;}
.front_main_box .band_txt {position: absolute; bottom: 175px; left: 35px; margin: auto; opacity: 0; z-index: 10; animation-delay: 2.2s;}
.front_main_box .front_man {opacity: 0; position: absolute; bottom: 0; right: 130px; z-index: 5;}
.front_main_box .front_man.inview {opacity: 1; transition: all .4s;}


.nav_bg {background-color: #dbca86;}
.main_nav {padding: 15px 0; display: table; font-size: 18px;}
.main_nav li:nth-child(1) {border-left: none;}
.main_nav li {display: table-cell; position: relative; line-height: 1; border-left: 1px solid #000; padding: 0 10px; box-sizing: border-box;}
.main_nav a::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.main_nav a:hover::after {
  transform: scale(1, 1);
}
.main_nav li img {margin-right: 10px;}

/*index*/
#index .box01 {background: url("img/index/box01_bg.jpg")top center no-repeat; padding: 75px 0 50px;}
#index .box01 h2 {font-size: 40px;}
#index .box01 h2 span {font-size: 55px;}
#index .box01 .icon01 {position: absolute; left: 0; bottom: -65px;}
#index .box01 .icon02 {position: absolute; right: 0; bottom: -95px; z-index: 10; animation-delay: 1.5s;}
#index .box01 .band {box-sizing: border-box; background: #111; padding: 0 10px; margin-top: 20px;}
#index .box01 .band p {box-sizing: border-box; border-left: 10px solid #ff8100; border-right: 10px solid #ff8100; font-size: 25px; line-height: 1; padding: 10px 0;}
#index .box01 .txt01 {margin: 45px auto; opacity: 0;}
#index .box01 .box {box-sizing: border-box; width: 373px; font-size: 16px; line-height: 1.5;}
#index .box01 .over {box-sizing: border-box; box-shadow: 5px 5px #7d7d7d; position: relative; margin-bottom: 10px;}
#index .box01 .no {position: absolute; top: 0; left: 0; font-size: 35px; line-height: 1; background: #dbca86; width: 50px; height: 50px;}
#index .box01 h3 {background: #ff8100; font-size: 30px; line-height: 1; padding: 10px 0;}
#index .box01 h3 span {font-size: 35px;}
.m_point01 .box:nth-child(2) {transition-delay: .1s;}
.m_point01 .box:nth-child(3) {transition-delay: .2s;}
.i_fv_start {opacity: 0;}
.i_fv {opacity: 0;}
.i_point01.is-invasion .i_fv_start {animation: clipToRight 1s cubic-bezier(0.86, 0, 0.07, 1) .7s forwards;}
.i_point01.is-invasion .i_fv {animation: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.4s forwards mv-name03-anim;}
.i_point01.is-invasion .fv_fade {opacity: 1; transition: all 0.6s .1s cubic-bezier(0.86, 0, 0.07, 1); transform: translateY(0);}
#index .i_point01.is-invasion .txt01 {transition: all 1s 1s cubic-bezier(0.86, 0, 0.07, 1); opacity: 1;}

#index .box02 {background: url("img/index/box02_bg.jpg")top left repeat; top: 0; left: 0; padding: 50px 0; box-sizing: border-box; border-bottom: solid 2px #c3b16a;}
#index .box02 .txtbox01{font-size: 60px; z-index: 10; line-height: 1.5; position: absolute; text-shadow: 2px 2px 2px #0a0a0b; opacity: 0;}
#index .is-invasion .txtbox01 {opacity: 1;}
#index .box02 .txtbox01 p{margin-top: 20px; width: 540px; font-size: 20px;}
#index .box02 .inner01 .mask_img{margin-right: -100px; position: relative; right: -450px; overflow: hidden;}
#index .box02 .btnbox {margin-top: 50px; font-size: 18px; line-height: 1.3;}
#index .box02 .btn{box-sizing: border-box; border: solid 2px #fff; background: #ff8100; width: 350px; padding: 10px 0; text-align: center; transition-delay: 2s;}
#index .box02 .btn02{margin-left: 125px; transition-delay: 2.2s;}
#index .box02 .mv_txt span {animation-delay: 1s;}

#index .box03 {background: url("img/index/box03_bg.jpg")top center repeat; top: 0; left: 0; padding: 0 0 50px; box-sizing: border-box; border-top: solid 3px #fff;}
#index .box03 .title{margin-top: 10px;}
#index .box03 .txt{margin: 210px auto; opacity: 0; position: relative; min-width: 1900px; left: 50%; margin-left: -950px;}
#index .is-invasion .txt {animation: clipToRight 1s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards;}
#index .box04 {padding: 50px 0; font-size:31px; line-height: 1; background: url("img/index/box04_bg.jpg")top left repeat; top: 0; left: 0; overflow: hidden;}
#index .box04 .conbox{position: relative; padding: 50px 50px; box-sizing: border-box; border: solid 2px #000; background: #fff;
    box-shadow: 10px 10px #ff8100;}
#index .box04 .conbox::before{content: ''; position: absolute; background: url("img/index/box04_bg01.png")top left no-repeat; width: 351px; height: 515px; top: 0px; bottom: 0;    margin: auto; left: -451px;}
#index .box04 .conbox::after {content: ''; position: absolute; background: url("img/index/box04_bg02.png")top right no-repeat; width: 351px; height: 515px; top: 0px; bottom: 0;    margin: auto; right: -451px;}
#index .box04 .conbox .title{position: relative; padding-bottom: 20px; box-sizing: border-box; border-bottom: solid 2px #000; margin-bottom: 20px;}
#index .box04 .conbox .title::after{content: ''; position: absolute; background: url("img/index/box04_icon01.png")top right no-repeat; width: 365px; height: 169px; top: -68px; right: -90px;}
#index .box04 .conbox .title h3{margin-left: 20px;}
#index .box04 .btn{position: relative; margin: auto; box-sizing: border-box; border: solid 5px #000; background: #000; padding: 15px; font-size: 25px; width: 50%; margin-bottom: 20px;}
#index .box04 .btn::after{content: ''; position: absolute; background: url("img/index/box04_arrow.png")bottom right no-repeat; width: 26px; height: 26px; bottom: 0; right: 0;}
#index .box04 h4{font-size: 25px; margin-bottom: 40px;}
#index .box04 .conbox .txt{font-size:18px; line-height: 1.5;}
#index .box05 {background: url("img/index/box05_bg.jpg")top left no-repeat; padding: 50px 0;}
#index .box05 .title{font-size: 50px; line-height: 1; margin-bottom: 50px;}
#index .box05 .title img{margin-right: 20px;}
#index .box05 .inner a {box-sizing: border-box; width: 270px; font-size: 14px;}
#index .box05 .over {position: relative; margin-bottom: 10px;}
#index .box05 a:hover img {filter: alpha(opacity=100); opacity: 1;}
#index .box05 .img {position: relative; overflow: hidden;}
#index .box05 .img img {transition-duration: .3s;}
#index .box05 .over {position: relative; overflow: hidden; background: #000;}
#index .box05 a:hover .img img {opacity: .6;}
#index .box05 .txt01 {font-size: 30px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; line-height: 1;}
#index .box05 .txt02 {position: absolute; left: 0; right: 0; bottom: 30px; margin: auto; font-size: 18px; line-height: 1;}
#index .box05 .over p {text-shadow: 0 0 10px rgba(0,0,0,.8);}
/* 線(ボーダー)のスタイル 共通 */
#index .box05 .over:before,
#index .box05 .over:after,
#index .box05 .img:before,
#index .box05 .img:after{
    content: '';
    position: absolute;
    background: #fff; /*線の色*/
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
	z-index: 10;
}
/* 上のボーダー */
#index .box05 .img:before {
    top: 5px;
    right: -100%;
    width: calc(100% - 10px);
    height: 1px;
	transition-delay: .3s;
}
/* 左のボーダー */
#index .box05 .img:after {
    top: -100%;
    left: 5px;
    width: 1px;
    height: calc(100% - 10px);
	transition-delay: .6s;
}
/* 下のボーダー */
#index .box05 .over:before {
	bottom: 5px;
    left: -100%;
    width: calc(100% - 10px);
    height: 1px;
	transition-delay: .3s;
}
/* 右のボーダー */
#index .box05 .over:after {
    bottom: -100%;
    right:5px;
    width: 1px;
    height: calc(100% - 10px);
	transition-delay: .6s;
}
#index .box05 a:hover .img:before {right: 5px;}
#index .box05 a:hover .img:after {top: 5px;}
#index .box05 a:hover .over:before {left: 5px;}
#index .box05 a:hover .over:after {bottom: 5px;}
.m_point02 a:nth-child(2) {transition-delay: .1s;}
.m_point02 a:nth-child(3) {transition-delay: .2s;}
.m_point02 a:nth-child(4) {transition-delay: .3s;}

#index .box06 {background: url("img/index/box06_bg.jpg")top center no-repeat; padding: 50px 0; box-sizing: border-box; border-bottom: 3px solid #ff8100;}
#index .box06 .box {width: 480px; position: relative;}
#index .box06 h2 {font-size: 30px; margin-bottom: 20px;}
#index .box06 .blog_list {background: #fff; padding: 20px;}
#index .box06 .blog_item {box-sizing: border-box; border-bottom: 1px dotted #a5a5a5; padding: 20px 0 15px; font-size: 14px; line-height: 1.7;}
#index .box06 .blog_item:nth-child(1) {padding-top: 0;}
#index .box06 .btn {box-sizing: border-box; width: 135px; height: 35px; background: #ff8100; font-size: 12px; line-height: 1; position: absolute; right: 0; top: 0;}
#index .box06 .box:nth-child(2) h2 {color: #000;}
#index .box06 .box:nth-child(2) .btn {background: #000;}
#index .box06 .time {font-size: 16px; line-height: 1; margin-right: 30px;}
#index .box06 h3 {font-size: 16px; line-height: 1; margin-bottom: 7px;}
.m_point03 .box:nth-child(2) {transition-delay: .1s;}
#index .box07 {background: url("img/index/box07_bg.jpg")top center no-repeat; font-size: 12px; padding: 35px 0 38px;}
#index .box07 .title_box {font-size: 70px; line-height: 1; margin-bottom: 35px;}
#index .box07 h2 {font-size: 28px; margin-left: 20px;}
#index .c_img {min-width: 1900px; left: 50%; margin-left: -950px; position: relative; opacity: 0;}
#index .c_img.is-invasion {animation: clipToRight 1s cubic-bezier(0.86, 0, 0.07, 1) 1s forwards;}



#index .box08 {background: url("img/index/box08_bg.jpg")top left no-repeat; padding: 50px 0;}
#index .box08 .title {margin-bottom: 50px; font-size: 50px;}
#index .box08 .title h3 {margin-left: 20px;}
#index .box08 .con01 .img01 {width: 575px; margin-right: 50px;}
#index .box08 .con01 .inner01 .txt01 {font-size: 30px; line-height: 1; margin-bottom: 10px;}
#index .box08 .con01 .inner01 .logo_area {margin-bottom: 20px;}
#index .box08 .con01 .inner01 .txt02 {opacity: .20; font-size: 42px; margin-left: 20px;}
#index .box08 .con01 .inner01 .txt03 {font-size: 25px; margin-bottom: 10px; line-height: 1;}
#index .box08 .con01 .inner01 .txt04 {font-size: 16px; line-height: 1.8;}




/*========================
FOOTER
========================*/
footer {background: url("img/footer/bg.jpg")center center no-repeat; padding-top: 30px;}
footer .ul01 {font-size: 16px; line-height: 2;}
footer .box {background-color: #fff; padding: 15px; font-size: 15px;}
footer .box .txt01 {font-size: 14px; margin-top: 5px;}
footer .inner {margin-top: 20px; padding-bottom: 30px;}
footer .link_btn {box-sizing: border-box; border: 1px solid #000; width: 409px; height: 50px; line-height: 1; font-size: 16px; background: #fff; margin: 0px auto 30px; position: relative;}
footer .link_btn::after {content: ''; position: absolute; background: #000; width: 20px; height: 1px; top: 0; bottom: 0; right: -10px; margin: auto;}

footer .copyright_area {font-size: 12px; padding: 5px 0; background-color: #000; position: relative; z-index: 10;}

/*pankuzu*/
.pan {padding: 20px 0;}
.pan p {font-weight: bold; margin: 0 auto;}
.pan a {display: inline;}

#pop_banner { position: fixed; bottom: 20px; z-index: 100; width: 100%;}
#pop_banner .inner {width: 1000px; margin: auto; box-sizing: border-box; border: 2px solid #000; background-color: #fff;}
#pop_banner .icon01:nth-child(1) {border-left: 1px solid #fff;}
#pop_banner .icon01 {box-sizing: border-box; border-right: 1px solid #fff;-webkit-transition: all 0.5s ease; background-color: #ff8000;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;}
#pop_banner .right_area a{margin-right: 10px;}
#pop_banner .right_area a:nth-child(1){margin-left: 10px;}
#pop_banner #page_top {margin-right: 0;}
#pop_banner #page_top img {min-width: 65px;}
#pop_banner .icon01:hover {
  background-color: #DBCA86;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;}
#pop_banner .icon01:hover img {opacity: 1;}
#pop_banner .right_area {display: flex; align-items: center; justify-content: center;}
/*========================
ページ設定
========================*/
/*
サムネ
*************/
.page_thumb {
width: 100%;
margin: auto;
box-sizing: border-box; 
background: url(img/thumb_bg.jpg)center center no-repeat;
height: 500px;
color: #fff;
display: flex;
font-size: 50px;
}
.thumb02 {background: url(img/thumb_bg02.jpg)center center no-repeat;} 
.thumb03 {background: url(img/thumb_bg03.jpg)center center no-repeat;} 
.thumb04 {background: url(img/thumb_bg04.jpg)center center no-repeat;}
.thumb05 {background: url(img/thumb_bg05.jpg)center center no-repeat;}
.thumb06 {background: url(img/thumb_bg06.jpg)center center no-repeat;}
.thumb07 {background: url(img/thumb_bg07.jpg)center center no-repeat;}
.thumb08 {background: url(img/thumb_bg08.jpg)center center no-repeat;}
.thumb09 {background: url(img/thumb_bg09.jpg)center center no-repeat;}
.thumb10 {background: url(img/thumb_bg10.jpg)center center no-repeat;}
.thumb11 {background: url(img/thumb_bg11.jpg)center center no-repeat;}
.thumb12 {background: url(img/thumb_bg12.jpg)center center no-repeat;}

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

/*
タイトル
*************/
.page_title {
background-color: #000d;
text-align: left;
box-sizing: border-box;
font-weight: bold;
font-size: 22px;
color: #fff;
border-left: 10px solid #ff8100;
padding: 15px 0;
margin-bottom: 40px;
}
.page_title span {padding-left: 10px;}
/*
wrap
*************/
.single_page {
width: 100%;
max-width: 715px;
margin-bottom: 40px;
}
.sidebar {width: 24.5%; max-width: 245px; margin-bottom: 40px;}

/*****************
width768px以下
*****************/
@media screen and (max-width:768px) {
.single_page {
width: 100%;
margin: auto;
}
.sidebar {display: none;}
}

/*
記事詳細ページ
***************/

.previous-entries,.next-entries {
color: #000;
width: 80px;
background: #ccc;
padding: 6px 0 0 10px;
box-sizing: border-box;
font-weight: bold;}

.gallery_entry {
display: inline-block;
vertical-align: middle;
width: 12px;
height: 20px;
margin: 0 10% 3px;
}

.nav_archive_btn {
color: #000;
font-weight: bold;
width: 150px;
background: #ccc;
padding: 6px 0 6px 10px;
box-sizing: border-box;
}


/*ページネーション
*******************/
.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;
}
}