@charset "utf-8";

/*
Theme Name: cleate_child
Template: cleate_child
Author: labo
Author URI: https://takai-laboratory.com/
*/

/*========================*/
/*fade
***************/
/* 画面外にいる状態 */
.fadein {
opacity : 0;
transform : translate(0, 150px);
transition : all 1500ms;
}

/* 画面内に入った状態 */
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}
#wrap {overflow: hidden;}
body {opacity: 0; transition-duration: .5s; transition-delay: .2s;}
.indication {opacity: 1;}
.indent_content {padding: 60px 0;}
.indent_content02 {margin-top: 20px;}
/******************************
HEADER
******************************/
header {background: #2b2b2b;}
header .over{padding: 5px 0;}
header h1 {font-size: 14px;}
header .right_box01 a {box-sizing: border-box; border: 1px solid #fff; width: 105px; height: 25px; font-size: 14px; line-height: 1; padding-left: 10px;}
header .right_box01 a:nth-child(2) {margin-left: 5px;}
header .inner_bg {background: url("img/header/bg.jpg")top left repeat;}
header .left_box p {font-size: 15px; line-height: 1;}
header h2 {font-size: 35px; letter-spacing: 2px; line-height: .9;}
header .global_nav {width: 650px;}
header .global_nav a {box-sizing: border-box; width: 160px; margin-right: 25px; font-size: 14px; line-height: 1; position: relative;}
header .global_nav a:nth-child(3n) {margin-right: 0;}
header .global_nav a:nth-child(n + 4) {margin-top: 10px;}
header .global_nav .min01 {font-size: 12px; margin-top: 5px;}
header .global_nav .min02 {font-size: 14px; margin-top: 5px;}
header .global_nav a::before {content: ''; display: block; position: absolute; background: #1b1b1b; width: 15px; height: 1px; top: 5px; left: -20px;}
header .mail {box-sizing: border-box; background: url("img/header/mail_bg.jpg")top left repeat; width: 160px; height: 90px; line-height: 1; position: relative;}
header .mail::before {content: ''; display: block; position: absolute; background: url("img/header/mail_icon.svg")no-repeat; width: 39px; height: 36px; bottom: 5px; left: 5px;}
header .mail p:nth-child(1) {font-size: 14px;}
header .mail p:nth-child(2) {font-size: 25px; margin: 5px auto 10px;}
header .mail p:nth-child(3) {font-size: 12px;}
.front_main_box .main {position: relative; min-width: 1920px; left: 50%; margin-left: -960px;}

/*index*/
#index .bnr_area{background: url("img/index/box03_bg.jpg") top left repeat; padding: 50px 0;}
#index .box01 {background: url("img/index/box01_bg.jpg")top center repeat;}
#index .box01 h2 {font-size: 35px;}
#index .box01 .min {margin: 20px auto 50px; font-size: 20px; line-height: 1; color: #4a4a4a;}
#index .box01 .img {position: relative; min-width: 702px; margin-right: -10px; transition-delay: .3s;}
#index .box01 h3 {min-width: 566px; position: relative; z-index: 10; margin-right: -54px; margin-bottom: 40px;}
#index .box01 .txt {font-size: 16px; line-height: 1.7; width: 488px;}
#index .box01 .inner02 {margin-top: 35px;}
#index .box01 .left_box {position: relative; z-index: 20;}
#index .box01 .btn_box {width: 693px;}
#index .box01 .btn {box-sizing: border-box; width: 336px; height: 50px; background: #615034; font-size: 14px; line-height: 1.3;}
#index .box01 .btn:nth-child(2) {background: #86a569;}
#index .box01 .x_btn {width: 300px; height: 50px; font-size: 14px;}
#index .box02 {background: url("img/index/box02_bg.jpg")top center no-repeat; overflow: hidden;}
#index .box02 .box {padding-left: 660px;}
#index .box02 .big {font-size: 150px; line-height: 1; overflow: hidden;}
#index .box02.inview .big p {animation: fadeUp .6s cubic-bezier(0,0,.25,1) both; display: inline-block; opacity: 1;}
#index .box02 .big p {animation-delay: .3s!important; opacity: 0; transition-delay: .1s;}
#index .box02 h2 {font-size: 40px; line-height: 1.5; overflow: hidden;}
#index .box02.inview h2 p {animation: fadeUp .6s cubic-bezier(0,0,.25,1) both; display: inline-block; opacity: 1;}
#index .box02 h2 p {animation-delay: .5s!important; transition-delay: .1s; opacity: 0;}
#index .box02 .txt {font-size: 18px; line-height: 2; margin: 45px auto 55px;}
#index .box02 .img {position: absolute; opacity: 0; transform: translateY(5%); transition-duration: .5s;}
#index .box02 .img01 {left: -360px; top: -80px;}
#index .box02 .img02 {left: 388px; top: 53px; transition-delay: .1s;}
#index .box02 .img03 {left: 131px; top: 160px; z-index: 10; transition-delay: .2s;}
#index .box02 .img04 {left: -360px; bottom: 40px; z-index: 20; transition-delay: .3s;}
#index .box02 .img05 {left: -300px; bottom: -80px; z-index: 30; transition-delay: .4s;}
#index .box02 .img06 {left: 268px; bottom: 5px; z-index: 20; transition-delay: .5s;}
#index .box02 .img07 {left: -35px; bottom: -80px; z-index: 30; transition-delay: .6s;}
#index .box02 .mask span {opacity: 0; transition-delay: .5s;}
#index .box02.inview .mask span {opacity: 1; animation-delay: 1s;}
#index .box02.inview .img {opacity: 1; transform: translateY(0);}
#index .box02 button {position: relative; z-index: 100;}

#index .box03 {background: url("img/index/box03_bg.jpg")top left repeat;}
#index .box03 .gallery_list {margin: 50px auto;}
#index .box03 .gallery_list::before {content: ''; position: absolute; background: url("img/index/box03_icon01.svg")no-repeat; width: 467px; height: 368px; left: -467px; bottom: -180px;}
#index .box03 .gallery_list::after {content: ''; position: absolute; background: url("img/index/box03_icon02.svg")no-repeat; width: 399px; height: 361px; right: -399px; top: -210px;}
#index .box03 .item {box-sizing: border-box; width: 285px; margin-right: 20px; position: relative; z-index: 10;}
#index .box03 .item:nth-child(4n) {margin-right: 0;}
#index .box03 .item:nth-child(n + 5) {margin-top: 20px;}
#index .box03 .img {position: relative; width: 100%;}
#index .box03 .img img {width: 100%; height: 176px; object-fit: cover; object-position: center;}
#index .box03 .tax_tag {position: absolute; left: 0; top: 0; width: 125px; height: 30px;}
#index .box03 h3 {font-size: 15px; margin: 10px auto; line-height: 1.5;}
#index .box03 .btn01 {box-sizing: border-box; width: 100%; height: 35px; border: 1px solid #000; background: url("img/index/box03_btn_arrow02.svg")center right 10px no-repeat; font-size: 15px; line-height: 1;}
#index .box03 .btn02 {background: url("img/index/box03_btn_arrow.svg")center right 20px no-repeat; background-color: #615034; width: 600px; height: 50px; font-size: 15px; line-height: 1;}
#index .box04 {background: url("img/index/box04_bg.svg")top left repeat; line-height: 1; overflow: hidden;}
#index .box04 .inbox12 {box-sizing: border-box; border: 2px solid #fff; padding: 50px 100px;}
#index .box04 .inbox12::before,#index .box04 .inbox12::after {content: ''; position: absolute;}
#index .box04 .inbox12::before {background: url("img/index/box04_be.svg")no-repeat; width: 360px; height: 686px; left: -360px; top: -62px;}
#index .box04 .inbox12::after {background: url("img/index/box04_af.svg")no-repeat; width: 360px; height: 686px; right: -360px; bottom: -62px;}
#index .box04 .over {box-sizing: border-box; border-bottom: 1px solid #fff; margin-bottom: 20px; padding: 0 15px 20px;}
#index .box04 .txt01 {font-size: 18px;}
#index .box04 .txt02 {font-size: 50px; margin-bottom: 5px; letter-spacing: 3px;}
#index .box04 .txt03 {font-size: 35px; margin-top: 5px;}
#index .box04 .and {margin: 0 40px 0 10px; font-size: 100px;}
#index .box04 .txt04 {font-size: 25px;}
#index .box04 .txt05 {font-size: 125px; letter-spacing: 5px; line-height: .9;}
#index .box04 .tel {font-size: 40px; margin-right: 30px;}
#index .box04 .tel span {font-size: 65px;}
#index .box04 .mail {box-sizing: border-box; background: #86a569; width: 300px; height: 50px; font-size: 18px;}
#index .box04 .mail img {margin-right: 15px;}
#index .box04 .txt06 {font-size: 20px; line-height: 1; margin: 20px auto 30px;}
#index .box04 .txt07 {box-sizing: border-box; font-size: 16px; line-height: 1; padding: 10px 0; border: 1px solid #fff; width: 904px;}
#index .box04 .txt08 {box-sizing: border-box; font-size: 18px; line-height: 1; margin: 20px auto 15px;}
#index .box04 .txt09 {font-size: 18px; line-height: 1;}
#index .box04 .icon01 {position: absolute; left: 0; bottom: 0;}
#index .box04 .icon02 {position: absolute; top: -60px; right: -45px;}
#index .box04 .icon03 {position: absolute; top: 50px; right: 50px;}
#index .box04 .icon04 {position: absolute; bottom: 50px; right: 205px;}
#index .box05 {background: url("img/index/box05_bg.jpg")top left repeat;}
#index .box05 h2 {font-size: 35px;}
#index .box05 .min {font-size: 35px; line-height: 1; margin: 20px auto 50px;}
#index .box05 a {font-size: 14px; line-height: 1.8; width: 575px;}
#index .box05 a:nth-of-type(2) {transition-delay: .3s;}
#index .box05 a img {margin-bottom: 12px;}
#index .box05 .inner::before {content: ''; display: block; position: absolute; background: url("img/index/box05_bg_icon01.svg")no-repeat; width: 334px; height: 296px; left: -360px; top: 60px;}
#index .box05 .inner::after {content: ''; display: block; position: absolute; background: url("img/index/box05_bg_icon02.svg")no-repeat; width: 340px; height: 232px; right: -345px; top: 105px;}
#index .box06 {position: relative; height: 640px; overflow: hidden;}
#index .box06 .movie {position: relative; min-width: 1920px; left: 50%; margin-left: -960px;}
#index .box06 .txt_box {position: absolute; left: 0; right: 0; top: 100px; margin: auto; z-index: 10;}
#index .box06 .txt01::after {content: ''; display: block; position: absolute; background: url("img/index/box06_icon.svg")no-repeat; width: 240px; height: 200px; right: 250px; bottom: 80px;}
#index .box06 .btn {margin-top: 70px;}
#index .box07 {background: url("img/index/box07_bg.jpg")top left repeat;}
#index .box07 .txt01 {font-size: 30px; line-height: 1;}
#index .box07 .title_box {font-size: 16px; line-height: 1.4; margin: 0 auto 50px;}
#index .box07 h2 {font-size: 45px; margin-right: 10px; display: flex; align-items: center;}
#index .box07 h2 .big {font-size: 55px; font-weight: normal; padding-left: 10px; letter-spacing: 3px;}
#index .box07 .item {box-sizing: border-box; width: 270px; margin-right: 40px;}
#index .box07 .item:nth-child(4) {margin-right: 0;}
#index .box07 .img {box-sizing: border-box; border: 2px solid #6d5328; position: relative;}
#index .box07 .tax_tag {font-size: 15px; line-height: 1; background: #6d5328; width: 125px; height: 30px; position: absolute; top: 0; left: 0;}
#index .box07 .item:nth-of-type(2n) .tax_tag {background: #85b459;}
#index .box07 h3 {font-size: 14px; line-height: 1.5; margin: 5px 0;}
#index .box07 .text {font-size: 14px; line-height: 1;}
#index .box07 .text span {display: inline-block;}
#index .box07 .btn {box-sizing: border-box; background: url("img/index/box07_btn_arrow.svg")center right 20px no-repeat; background-color: #615034; font-size: 15px; line-height: 1; width: 600px; height: 50px; margin: 50px auto 0; background-size: 3%;}
#index .box07 .img img {height: 170px; object-fit: cover;}
#index .box08 {background: url("img/index/box08_bg.jpg")center center no-repeat;}
#index .box08 .title_box {margin-bottom: 50px;}
#index .box08 .txt01 {font-size: 20px; line-height: 1;}
#index .box08 .txt02 {font-size: 55px; line-height: 1; font-weight: normal; letter-spacing: 2px;}
#index .box08 h2 {font-size: 55px; margin-left: 20px;}
#index .box08 .inner a {box-sizing: border-box; width: 285px;}
#index .box08 .over {box-sizing: border-box; background: #000; position: relative;}
#index .box08 .over img {opacity: .7; transition-duration: .5s;}
#index .box08 .inner a:hover .over img {opacity: .3;}
#index .box08 .over h3 {font-size: 20px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 10;}
#index .box08 .over p {font-size: 55px; line-height: 1; position: absolute; left: 5px; bottom: 0; z-index: 10;}
#index .box08 .text {font-size: 14px; line-height: 1.5; margin-top: 5px;}
#index .box09 {background: url("img/index/box09_bg.jpg")top left repeat;}
#index .box09 .box {position: relative; width: 480px;}
#index .box09 h2 {font-size: 40px; box-sizing: border-box; border-left: 5px solid #fff; padding-left: 10px;letter-spacing: 2px;}
#index .box09 .item {box-sizing: border-box; border-bottom: 1px solid #fff; padding: 20px 0;}
#index .box09 .item:nth-child(1) {padding-top: 0;}
#index .box09 .time {font-size: 14px; margin-right: 40px;}
#index .box09 h3 {font-size: 14px; margin-bottom: 5px;}
#index .box09 .text {font-size: 14px; line-height: 1.5;}
#index .box09 .btn {box-sizing: border-box; background: #86a569; width: 165px; height: 30px; font-size: 14px; line-height: 1; position: absolute; right: 0; top: 5px;}
#index .box09 .btn img {margin-left: 10px;}
#index .box09 .box:nth-of-type(2) .btn {background: #615034;}
#index .box10 h2 {font-size: 55px; margin-bottom: 30px;}
#index .box10 h2 p:nth-child(1) {letter-spacing: 2px;}
#index .box10 h2 p:nth-child(2) {font-size: 25px; margin-left: 20px;}
#index .box10 .text {font-size: 14px; line-height: 2;}
#index .box11 {background: url("img/index/box11_bg.jpg")center center no-repeat;}
#index .box11 .txt01 {font-size: 30px; line-height: 1;}
#index .box11 .f_size01 {font-size: 65px; line-height: 1; margin: 10px auto 0; width: 360px;}
#index .box11 .txt02 {font-size: 16px; line-height: 2; padding: 30px 0 50px;}
#index .box11 .group01 a {margin-right: 10px; position: relative;}
#index .box11 .group01 a:last-of-type {margin-right: 0;}
#index .box11 .group01 a::after {content: ''; position: absolute; bottom: 5px; right: 5px; z-index: 10; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 0; border-color:  transparent #000 transparent;}
#index .box11 .group01 .title01 {background: #86a569; padding: 20px 30px; font-size: 30px; line-height: 1;}
#index .box11 .group01 .title02 {background: #615034;}
#index .box11 .group01 .title01 img {margin: 0 auto 20px;}
#index .box11 .group01 .text {background: #fff; padding: 20px; font-size: 14px; line-height: 1.5;}
#index .c_img {position: relative; min-width: 1920px; left: 50%; margin-left: -960px;}


/*========================
FOOTER
========================*/
footer {background: url("img/footer/bg.jpg")top left repeat; padding-top: 80px;}
footer .inner::after {content: ''; display: block; position: absolute; background: url("img/footer/bg_icon.svg")no-repeat; width: 275px; height: 281px; right: 20px; top: -20px;}
footer .txt01 {font-size: 45px; line-height: 1; letter-spacing: 1px;}
footer .txt02 {font-size: 20px; line-height: 1;}
footer .home_link {font-size: 16px; line-height: 1; margin: 50px auto;}
footer .list {margin-right: 50px;}
footer .list:nth-of-type(2) {margin-right: 250px;}
footer .list a {box-sizing: border-box; font-size: 16px; margin-top: 20px; line-height: 1; position: relative; padding-left: 20px;}
footer .list a::before {content: ''; display: block; background: #000; width: 10px; height: 1px; top: 0; bottom: 0; left: 0; margin: auto; position: absolute;}
footer .list a:nth-child(1) {margin-top: 0;}
footer .txt03 {font-size: 30px; line-height: 1; letter-spacing: 1px;}
footer .txt04 {font-size: 18px; line-height: 1;}
footer ul {margin: 20px 0 15px;}
footer li {font-size: 14px; line-height: 1; margin-top: 10px;}
footer li:nth-child(1) {margin-top: 0;}
footer .inner02 a {box-sizing: border-box; font-size: 14px; line-height: 1; margin-right: 20px;}
footer .copyright {padding: 10px 0; font-size: 12px; position: relative; z-index: 10; margin-top: 80px; background: #000;}
footer .copyright p:last-child {margin-left: 10px;}
#pop_banner {position: fixed; bottom: 20px; z-index: 100; width: 100%;}
#pop_banner .inner {width: 800px; margin: auto; background: #fff; box-sizing: border-box; border: 1px solid #000;}
#pop_banner .icon {box-sizing: border-box; -webkit-transition: all 0.5s ease; width: 61px; height: 60px; border-left: 1px solid #000; 
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
}

/*pankuzu*/
.pan {padding: 20px 0;}
.pan p {font-weight: bold; margin: 0 auto;}
.pan a {display: inline;}
.pan a:nth-child(1) {box-sizing: border-box; border-bottom: 1px solid #aaa;}
/*========================
ページ設定
========================*/
/*
サムネ
*************/
.page_thumb {
width: 100%;
margin: auto;
box-sizing: border-box; 
height: 270px;
position: relative;
font-size: 32px; line-height: 1; z-index: 550;
}
.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/thumb_bg06.jpg")top center no-repeat;}
.thumb10 {background: url("img/thumb10.jpg")top center no-repeat;}
.thumb11 {background: url("img/thumb11.jpg")top center no-repeat;}


.single_page {width: 715px;}

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

/*
タイトル
*************/
.page_title {box-sizing: border-box; background: #2b2b2b; font-size: 22px; line-height: 1; padding: 10px; margin-bottom: 20px;}
.page_title span {box-sizing: border-box; border-left: 5px solid #fff; padding-left: 10px; line-height: 1.5;}


/*
記事詳細ページ
***************/
.nav_over {margin-bottom: 50px;}
.nav_under {margin-top: 50px;}
.navigation .next-entries,.navigation .previous-entries {width: 80px; height: 37px; line-height: 1; font-size: 16px; display: flex; align-content: center; box-sizing: border-box; border: 2px solid #bbb; background: #DCDCDC; font-weight: bold;}
.navigation .next-entries a,.navigation .previous-entries a {display: flex; align-items: center; justify-content: center; padding-left: 10px;}

.nav_archive_btn {color: #000; font-weight: bold; box-sizing: border-box; width: 150px; font-size: 16px; line-height: 1; height: 35px; border: 2px solid #bbb; background:#DCDCDC; padding: 6px 0 6px 10px; padding-left: 10px;}
.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;
}
}