@charset "utf-8";

/*
Theme Name: nobunaga_child
Template: nobunaga_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: 60px;}
/******************************
HEADER
******************************/
header {position: absolute; top: 20px; left: 0; right: 0; z-index: 100; max-width: 1000px; margin: auto;}
header .head_nav a {box-sizing: border-box; border-right: 1px dashed #000; width: 135px; height: 100px; font-size: 14px; line-height: 1;}
header .head_nav a:nth-of-type(1) {border-left: 1px dashed #000;}
header .head_nav a img {margin-bottom: 20px;}
header .head_nav02 a {box-sizing: border-box; border-bottom: 1px solid #000; background: url("img/header/nav_arrow.svg")center right no-repeat; width: 275px; font-size: 14px; padding: 10px 0; line-height: 1;}
.front_main_box {background: url("img/header/main_bg.svg")center center no-repeat; height: 747px; position: relative;}
.front_main_box .item01 {position: absolute; bottom: -20px; left: 0; right: 0; margin: auto; z-index: 40; opacity: 0;}
.front_main_box .item02 {position: absolute; bottom: -67px; left: 0; right: 0; margin: auto; z-index: 30; padding-right: 37px; opacity: 0;}
.front_main_box .item03 {position: absolute; bottom: 60px; left: 0; right: 0; margin: auto; z-index: 20; padding-left: 10px; opacity: 0;}
.front_main_box.inview .item01,.front_main_box.inview .item02,.front_main_box.inview .item03 {animation: fadeInBottom .75s cubic-bezier(.175,.885,.32,1.275) forwards;}
@-webkit-keyframes fadeInBottom{from{opacity:0;transform:translateY(150px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeInBottom{from{opacity:0;transform:translateY(150px)}to{opacity:1;transform:translateX(0)}}
.front_main_box .light {position: absolute; top: 127px; left: 0; right: 0; margin: auto; z-index: 10; opacity: 0; transition-duration: .5s;}
.front_main_box .logo {position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 50; opacity: 0; transform: translateY(20px); transition-duration: .7s; transition-timing-function: ease-in-out;}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg);}
}

.front_main_box.inview .item01 {animation-delay: .2s;}
.front_main_box.inview .item02 {animation-delay: .5s;}
.front_main_box.inview .item03 {animation-delay: .8s;}
.front_main_box.inview .light {animation:30s linear infinite rotation1; opacity: 1; animation-delay: 1.8s; transition-delay: 1.8s;}
.front_main_box.inview .logo {transition-delay: 3.4s; opacity: 1;}
.front_main_box .food_box {height: 100%; z-index: 60;}
.front_main_box .food01 {position: absolute; left: -288px; top: 182px;}
.front_main_box .food02 {position: absolute; left: -115px; top: 89px;}
.front_main_box .food03 {position: absolute; left: -113px; top: 265px;}
.front_main_box .food04 {position: absolute; left: 95px; top: 194px;}
.front_main_box .food05 {position: absolute; right: -20px; top: 205px;}
.front_main_box .food06 {position: absolute; right: -140px; top: 70px;}
.front_main_box .food07 {position: absolute; right: -240px; top: 262px;}
.front_main_box .food08 {position: absolute; right: -290px; top: 94px;}
.front_main_box .icon01 {position: absolute; right: 10px; bottom: -55px;}
.front_main_box .icon02 {position: absolute; left: 323px; top: 180px;}
.front_main_box .icon03 {position: absolute; left: 110px; bottom: 10px;}
.front_main_box.inview .food01 {animation-delay: 2s;}
.front_main_box.inview .food02 {animation-delay: 2.2s;}
.front_main_box.inview .food03 {animation-delay: 2.4s;}
.front_main_box.inview .food04 {animation-delay: 2.6s;}
.front_main_box.inview .food05 {animation-delay: 2s;}
.front_main_box.inview .food06 {animation-delay: 2.2s;}
.front_main_box.inview .food07 {animation-delay: 2.4s;}
.front_main_box.inview .food08 {animation-delay: 2.6s;}
.front_main_box.inview .icon01,.front_main_box.inview .icon02,.front_main_box.inview .icon03 {animation-delay: 3.4s;}

.coming_box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 14px; line-height: 1; color: #fff; background: rgba(0,0,0,.75); z-index: 10; letter-spacing: 2px;}

.front_contact_box {box-sizing: border-box; background: #f6f6f6; padding: 20px 0 15px; position: relative; z-index: 50;}
.front_contact_box h1 {font-size: 25px; line-height: 1; margin-bottom: 10px;}
.front_contact_box .btn {box-sizing: border-box; width: 210px; height: 40px; border-radius: 5px; font-size: 14px; line-height: 1; position: relative; overflow: hidden;}
.front_contact_box .btn:nth-of-type(1) {background: url("img/header/btn_bg01.svg")right bottom no-repeat; background-color: #d90000;}
.front_contact_box .btn:nth-of-type(2) {background: url("img/header/btn_bg02.svg")right bottom no-repeat; background-color: #813809;}
.front_contact_box .btn:nth-of-type(3) {background: url("img/header/btn_bg03.svg")right bottom no-repeat; background-color: #f07c26;}
.front_contact_box .tel {font-size: 30px; line-height: 1;}
.front_contact_box .tel span {font-size: 50px;}

.global_nav_bg {background: #000; padding: 20px 0; position: relative; z-index: 50;}
.global_nav {display: table;}
.global_nav a {box-sizing: border-box; border-right: 1px solid #fff; font-size: 16px; line-height: 1; display: table-cell; position: relative;}
.global_nav a:first-child {border-left: 1px solid #fff;}
.global_nav a p {position: relative; display: inline;}
.global_nav a p::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.global_nav a:hover p::after {
  transform: scale(1, 1);
}

/*index*/
.c_img {position: relative; min-width: 1920px; left: 50%; margin-left: -960px;}
#index .box01 {background: url("img/index/box01_bg.jpg")top left repeat; position: relative; z-index: 50;}
#index .box01 .inner {-ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding-right: 120px;}
#index .box01 h2 {position: relative;}
#index .box01 h2 p {position: relative; z-index: 10; font-size: 40px; margin-right: 10px;}
#index .box01 h2 .white_bg {display: inline-block; background: #fff; padding: 5px;}
#index .box01 h2::after {content: ''; background: url("img/index/box01_img.svg")no-repeat; width: 404px; height: 479px; position: absolute; right: -235px; top: -60px;}
#index .box01 .txt_box {font-size: 16px; margin-right: 30px;}
#index .box01 .txt_box p {margin-right: 20px;}
#index .box01 .txt_box:nth-of-type(1) {margin-top: 50px;}
#index .box01 .icon {position: absolute;}
#index .box01 .icon01 {left: -260px; bottom: 30px; animation-delay: 1s;}
#index .box01 .icon02 {left: -150px; top: 50px; animation-delay: .8s;}
#index .box01 .icon03 {left: -100px; bottom: 0; animation-delay: .6s;}
#index .box01 .icon04 {left: 260px; bottom: -50px; animation-delay: .4s;}
#index .box01 .icon05 {right: 425px; top: -40px; animation-delay: .2s;}
#index .box01 .icon06 {right: 290px; bottom: -50px;}
#index .box01 .f_text {opacity: 0; transform: translateY(20px); transition-duration: 1s;}
#index .box01 .f_text:nth-child(2) {transition-delay: .2s;}
#index .box01 .f_text:nth-child(3){transition-delay: .4s;}
#index .box01 .f_text:nth-child(4){transition-delay: .6s;}
#index .box01.inview .f_text {opacity: 1; transform: translateY(0);}
#index .box01 .btn {box-sizing: border-box; width: 500px; height: 60px; font-size: 20px; line-height: 1; background: url("img/index/box01_arrow.svg")center right 20px no-repeat; background-color: #000; margin: 100px auto 0; border-radius: 5px;}

#index .box02 {background: url("img/index/box02_bg.jpg")bottom center repeat; padding-bottom: 60px;}
#index .box02 .title_box {background: url("img/index/box02_title_bg.jpg")top left repeat; padding: 60px 0; margin-bottom: 46px;}
#index .box02 h2 {font-size: 50px; margin-bottom: 15px;}
#index .box02 h2::before {content: ''; display: block; background: url("img/index/box02_icon01.svg")no-repeat; width: 225px; height: 235px; left: -100px; top: -60px; position: absolute;}
#index .box02 h2::after {content: ''; display: block; background: url("img/index/box02_icon02.svg")no-repeat; width: 107px; height: 146px; right: -25px; top: -30px; position: absolute; z-index: 10;}
#index .box02 .min p {font-size: 20px; display: inline-block; background: #000; padding: 5px 10px; position: relative; z-index: 10; line-height: 1;}
#index .box02 .min p::after {width: 0; height: 0; border-style: solid; border-width: 12px 41px 0 0; border-color: #000 transparent transparent transparent; position: absolute; right: -41px; top: 0; bottom: 0; margin: auto; content: '';}
#index .box02 ul::before {content: ''; display: block; position: absolute; background: url("img/index/box02_icon03.svg")no-repeat; width: 1807px; height: 470px; right: -177px; bottom: -60px;}
#index .box02 li {position: relative; width: 366px; z-index: 10; margin-right: 50px;}
#index .box02 li:nth-child(4) {margin-right: 0;}
#index .box02 li::after {content: ''; display: block; position: absolute; right: 0; top: -80px; width:356px; height: 97px;}
#index .box02 li:nth-of-type(1)::after {background: url("img/index/box02_li_icon01.svg")no-repeat;}
#index .box02 li:nth-of-type(2)::after {background: url("img/index/box02_li_icon02.svg")no-repeat;}
#index .box02 li:nth-of-type(3)::after {background: url("img/index/box02_li_icon03.svg")no-repeat;}
#index .box02 li:nth-of-type(4)::after {background: url("img/index/box02_li_icon04.svg")no-repeat;}
#index .box02 li .over {padding: 5px; box-sizing: border-box; width: 100%; height: 100px; position: relative;}
#index .box02 li:nth-of-type(1) .over {background: #d90000;}
#index .box02 li:nth-of-type(2) .over {background: #813809;}
#index .box02 li:nth-of-type(3) .over {background: #f07c26;}
#index .box02 li:nth-of-type(4) .over {background: #0d6e2f;}
#index .box02 li p {box-sizing: border-box; border: 1px solid #fff; width: 100%; height: 100%; font-size: 30px; line-height: 1;}
#index .box02 li a {box-sizing: border-box; margin-top: 10px; width: 100%; height: 40px; border-radius: 5px; font-size: 16px; line-height: 1; position: relative; overflow: hidden;}
#index .box02 li a::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.75);}
#index .box02 .coming_box {font-size: 25px;}
#index .box02 li:nth-of-type(1) a {background: url("img/index/box02_btn_bg01.svg")right bottom no-repeat; background-color: #d90000;}
#index .box02 li:nth-of-type(2) a {background: url("img/index/box02_btn_bg02.svg")right bottom no-repeat; background-color: #813809;}
#index .box02 li:nth-of-type(3) a {background: url("img/index/box02_btn_bg03.svg")right bottom no-repeat; background-color: #f07c26;}
#index .box02 li:nth-of-type(3) a::before {display: none;}
#index .box02 li:nth-of-type(4) a {background: url("img/index/box02_btn_bg04.svg")right bottom no-repeat; background-color: #0d6e2f;}
#index .box03 {background: url("img/index/box03_bg.jpg")top left repeat;}
#index .box03 h2 {font-size: 50px;}
#index .box03 h2::before,#index .box03 h2::after {content: ''; display: block; height: 3px; flex-grow: 1; background: #118439;}
#index .box03 h2::before {margin-right: 60px;}
#index .box03 h2::after {margin-left: 60px;}
#index .box03 .min {font-size: 20px; line-height: 1; font-weight: bold; margin: 15px auto 35px; opacity: .8;}
#index .box03 .txt01 {font-size: 20px; line-height: 1.5;}
#index .box03 .img {margin: -50px auto 60px; position: relative; z-index: 10;}
#index .box03 .btn {width: 470px; background: #d90000; box-sizing: border-box; border-radius: 5px; font-size: 20px; line-height: 1.3; padding-right: 20px;}
#index .box03 .btn .icon_box {background: #990000; width: 80px; height: 80px;}
#index .box03 .btn:nth-of-type(2) {background: #813809;}
#index .box03 .btn:nth-of-type(2) .icon_box {background: #5c2806;}
#index .box03 .inner::before {content: ''; position: absolute; background: url("img/index/box03_bg01.svg")no-repeat; width: 538px; height: 328px; bottom: -60px; left: -460px;}
#index .box03 .inner::after {content: ''; position: absolute; background: url("img/index/box03_bg02.svg")no-repeat; width: 450px; height: 337px; top: -475px; right: -445px;}
#index .box04 {background: url("img/index/box04_bg.jpg")center bottom repeat; padding-bottom: 60px; display: none;}
#index .box04 .title_box {box-sizing: border-box; background: url("img/index/box04_title_bg.jpg")center center no-repeat; padding: 50px 0 55px;}
#index .box04 h2 {font-size: 40px; box-sizing: border-box; background: #000; padding: 0 10px 5px; position: relative; display: inline;}
#index .box04 h2::before {content: ''; display: block; background: url("img/index/box04_icon01.svg")no-repeat; width: 202px; height: 230px; left: -300px; top: -20px; position: absolute;}
#index .box04 h2::after {content: ''; display: block; background: url("img/index/box04_icon02.svg")no-repeat; width: 157px; height: 206px; right: -282px; top: -40px; position: absolute;}
#index .box04 .title_box p {font-size: 60px; line-height: 1; margin-top: 25px;}
#index .box04 .products_list {max-width: 1090px; margin: 60px auto 0;}
#index .box04 .item {box-sizing: border-box; width: 202px; margin-right: 20px;}
#index .box04 .item:nth-child(5n) {margin-right: 0;}
#index .box04 .item:nth-child(n + 6) {margin-top: 20px;}
#index .box04 .img {box-sizing: border-box; width: 100%; overflow: hidden; border-radius: 10px; position: relative;}
#index .box04 .img::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #0d6e2f; box-sizing: border-box; transition-duration: .5s; opacity: 0;}
#index .box04 .item:hover .img::before {opacity: 1;}
#index .box04 .img img {width: 100%; height: 151px; object-fit: cover;}
#index .box04 h3 {font-size: 14px; line-height: 1.5; margin-top: 15px;}
#index .box05 {background: url("img/index/box05_bg.jpg")top left repeat; margin-top: -180px; display: none;}
#index .box05 h2 {font-size: 50px; line-height: 1.4; margin-bottom: 50px;}
#index .box05 h2 span {font-size: 60px;}
#index .box05 .icon_txt {font-size: 125px; line-height: 1; position: absolute; right: 190px; top: -240px; opacity: .1; letter-spacing: 3px;}
#index .box05 .item {box-sizing: border-box; width: 262px; margin-right: 50px;}
#index .box05 .item:nth-child(4) {margin-right: 0;}
#index .box05 .img {box-sizing: border-box; position: relative; width: 100%; line-height: 1;}
#index .box05 .img img {height: 196px; width: 100%; object-fit: cover;}
.tax_tag {display: inline-block; font-size: 14px; line-height: 1; padding: 4px 10px 5px;}
#index .box05 .tax_tag {position: absolute; left: 0; top: -10px;}
#index .box05 .pick {position: absolute; left: 5px; bottom: 5px; display: inline-block; font-size: 16px; border-radius: 5px; box-sizing: border-box; padding: 2px 5px; background: #000;}
#index .box05 h3 {font-size: 16px; line-height: 1.5; box-sizing: border-box; border-bottom: 2px solid #000; padding: 20px 10px;}
#index .box05 .interview_list::before {content: ''; display: block; position: absolute; background: url("img/index/box05_icon01.svg")no-repeat; width: 362px; height: 593px; left: -360px; top: -150px;}
#index .box05 .interview_list::after {content: ''; display: block; position: absolute; background: url("img/index/box05_icon02.svg")no-repeat; width: 249px; height: 230px; right: -270px; bottom: -228px; z-index: 10;}
#index .box05 .btn {box-sizing: border-box; background: url("img/index/box05_arrow.svg")center right 20px no-repeat; background-color: #000; border-radius: 5px; width: 500px; height: 60px; margin: 60px auto 0; font-size: 20px; line-height: 1;}
#index .box06 {box-sizing: border-box; background: url("img/index/box06_bg.svg")top center no-repeat;}
#index .box06 h2 {font-size: 40px; margin-bottom: 60px;}
#index .box06 h2::before,#index .box06 h2::after {content: ''; display: block; flex-grow: 1; height: 3px; background: #000;}
#index .box06 h2::before {margin-right: 30px;}
#index .box06 h2::after {margin-left: 30px;}
#index .box06 iframe {box-sizing: border-box; width: 100%; height: 345px; border: none; display: block;}
#index .box06 .box {box-sizing: border-box; border: 3px solid #118439; background: url("img/index/box06_bg02.jpg") top left repeat;}
#index .box06 .inner {font-size: 20px; line-height: 1; padding: 30px 0;}
#index .box06 .inner img {margin-right: 50px;}
#index .box06 .inner th,#index .box06 .inner td {padding-top: 10px; font-size: 20px;}
#index .box07 {background: url("img/index/box07_bg.jpg")top left repeat;}
#index .box07 h2 {font-size: 35px; margin-bottom: 60px;}
#index .box07 ul::before {content: ''; background-image: url("img/index/icons.png"); background-image: url("img/index/icons.svg"); background-repeat: no-repeat; background-position: center; animation: img-sprite 1s steps(49) infinite; position: absolute; left: -220px; bottom: 120px; width: 246px; height: 300px;}
#index .box07 a {box-sizing: border-box; border: 3px solid #fff; width: 285px; font-size: 20px; line-height: 1;}
#index .box07 a span {box-sizing: border-box; border-right: 3px solid #fff; width: 63px; height: 59px;}
#index .box07 a:nth-of-type(1) {background: #d90000;}
#index .box07 a:nth-of-type(2) {background: #813809;}
#index .box07 a:nth-of-type(3) {background: #f07c26;}
#index .box07 a:nth-of-type(4) {background: #0d6e2f;}
@keyframes img-sprite {
    0%{
        background-position: 0 0;
    }
    100% {
        background-position: 0 -14700px;  /* iconizr-svg-sprite.css の最後のアイコンの値にする */
    }
}


/*========================
FOOTER
========================*/
footer {background: url("img/footer/bg.svg")top center no-repeat; padding-top: 135px;}
footer .copyright {padding: 10px 0; font-size: 12px; position: relative; z-index: 10; margin-top: 135px; 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: 1000px; margin: auto; background: #eee; box-sizing: border-box;}
#pop_banner .icon {box-sizing: border-box; -webkit-transition: all 0.5s ease; margin-right: 2px; width: 80px; height: 80px;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
}
#pop_banner .icon:nth-child(1) {background-color: #d90000;}
#pop_banner .icon:nth-child(2) {background-color: #813809;}
#pop_banner .icon:nth-child(3) {background-color: #f07c26;}
#pop_banner .icon:nth-child(4) {background-color: #118439;}

/*pankuzu*/
.pan {padding: 40px 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: 490px;
position: relative;
font-size: 40px; line-height: 1; z-index: 550;
}
.page_thumb span {box-sizing: border-box; border-bottom: 1px solid #fff;}
.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;}



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

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

/*
記事詳細ページ
***************/
.nav_over {margin-bottom: 50px;}
.nav_under {margin-top: 50px;}
.navigation .next-entries,.navigation .previous-entries {width: 119px; height: 37px; line-height: 1; font-size: 16px; display: flex; align-content: center; justify-content: center; box-sizing: border-box; border: 1px solid #000; background: url("img/pagenation_arrow.svg")center left 20px no-repeat; font-weight: 500;}
.navigation .next-entries a,.navigation .previous-entries a {display: flex; align-items: center; justify-content: center;}

.nav_archive_btn {box-sizing: border-box; font-size: 16px; line-height: 1; width: 200px; height: 35px; border: 1px solid #000; background: url("img/pagenation_arrow.svg")center left 20px no-repeat; font-weight: 500;}
.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;
}
}