@charset "utf-8";

/*
Theme Name: gifu_u_child
Template: gifu_u_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);
}
h1,h2,h3,h4,h5 {font-weight: bold;}
#wrap {overflow: hidden;}
body {opacity: 0; transition-duration: .5s; transition-delay: .2s;}
.indication {opacity: 1;}
.indent_content {padding: 80px 0;}
.indent_content02 {margin-top: 80px;}
.indent_content03 {margin-top: 145px;}
.content {padding: 40px; position: relative;}
/******************************
HEADER
******************************/
header h2 {font-size: 30px;}
header .inner {padding: 20px 0;}
header .left_box img {margin-right: 10px;}
header .left_box {font-size: 16px; line-height: 1;}
.global_nav{width: 585px;}
.global_nav a span {position: relative;}
.global_nav a span::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #002b79;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.global_nav a:hover span::after {
  transform: scale(1, 1);
}
header .front_box {position: relative; padding: 0 0 0 3.33vw;}
header .txt_box {position: absolute; top: 0; bottom: 0; left: auto; margin: auto; z-index: 96; line-height: 1;}
header .txt01 {font-size: 25px; display: inline-block; background: #fff; padding: 10px; margin-bottom: 80px;}
header .txt01 .big {font-size: 80px;}
header .txt02 p {font-size: 35px; background: #fff; padding: 10px; display: table; margin-top: 20px;}
header .txt02 p:nth-child(1) {margin-top: 0;}
header .movie_box {display: block; position: relative; width: calc(100% - (3 / 12 * 100%)); height: 100%; margin-left: calc(3 / 12 * 100%);}
header .movie {position: relative;}

header .front_box .news_box {position: absolute; right: 50px; bottom: 80px; z-index: 100;}
header .front_box .news_box .item {box-sizing: border-box; border: 3px solid #002b79; background: #fff; width: 575px; height: 42px; padding: 10px 20px; line-height: 1; opacity: 0;}

header .front_box .news_box .item:nth-child(n + 2) {margin-top: 10px;}
header .front_box .news_box .time {font-size: 16px; box-sizing: border-box; border-right: 1px solid #000; padding-right: 10px; margin-right: 10px;}
header .front_box .news_box.inview .item{opacity: 1;}

header .front_box .news_box h2 {font-size: 16px;}
header .front_box .fade_under .item {transition-delay: 1.8s; transition-duration: .5s;}
header .front_box .fade_under .item:nth-child(2) {transition-delay: 1.9s; transition-duration: .5s;}
header .front_box .fade_under .item:nth-child(3) {transition-delay: 2s; transition-duration: .5s;}


/*index*/

#index .box01 {background: url("img/index/box01_bg.jpg")top center no-repeat; background-size: cover;}
#index .box01 .title_box {position: relative;}
#index .box01 h2 {font-size: 60px; position: relative; z-index: 100; opacity: 0;}
#index .box01 .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 880px; height: 80px; background: #002b79; transform: skewX(-10deg); opacity: 0;}
#index .box01 .is-show {opacity: 1;}
#index .box01 .box01_title.is-show {opacity: 1; -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.185, 1);
    transition: all 0.5s cubic-bezier(0.77, 0, 0.185, 1);
    -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.185, 1);
    transition-timing-function: cubic-bezier(0.77, 0, 0.185, 1);}
#index .box01 .txt01 {font-size: 30px; margin: 50px auto;}
#index .box01 .inner {font-size: 16px; line-height: 1.7; position: relative;}
#index .box01 .inner::after {content: ''; position: absolute; background: url("img/index/box01_bg_icon.png")no-repeat; width: 542px; height: 258px; bottom: -150px; right: -400px;}
#index .box01 .inner img {margin-left: 50px; position: relative; z-index: 10;}
#index .box01 .btn01 {margin-top: 80px;}



#index .space_img {position: relative; min-width: 1920px; margin-left: -960px; left: 50%;}
#index .box02 {background: url("img/index/box02_bg.jpg")top left repeat; padding: 133px 0 80px;}
#index .box02 .title_box {background: #313131; box-sizing: border-box; border-left: 100px solid #1b1b1b; border-right: 100px solid #1b1b1b; padding: 50px 0; font-size: 40px; line-height: 1; z-index: 10; margin: -216px auto 50px;}
#index .box02 h2 {font-size: 16px; margin-bottom: 20px;}
#index .box02 .topics_item {box-sizing: border-box; width: 285px; margin-right: 20px;}
#index .box02 .topics_item:nth-child(4n) {margin-right: 0;}
#index .box02 .topics_item:nth-child(n + 5) {margin-top: 20px;}
#index .box02 h3 {font-size: 15px; line-height: 1.3; margin-top: 10px;}
#index .box02 .btn01 {margin-top: 80px;}
#index .box03 {background: url("img/index/box03_bg.jpg")top left repeat; padding: 125px 0 80px;}
#index .box03 h2 {font-size: 25px; line-height: 1.3; margin: -180px auto 60px;}
#index .box03 h2 span {font-size: 70px;}
#index .box03 .list {box-sizing: border-box; width: 368px; position: relative; border-bottom: 2px solid #000;}
#index .box03 .list:nth-child(n + 4) {margin-top: 65px;}
#index .box03 .over {position: relative; background: #002b79; height: 274px;}
#index .box03 .img_box {transition-duration: .3s; position: absolute; width: 368px; top: 0; left: 0;overflow: hidden;}
#index .box03 .list:hover .img_box {top: 5px; left: -5px;}
#index .box03 .img_box img {
    -webkit-transform: scale(1) translate3d(0,0,0);
    transform: scale(1) translate3d(0,0,0);
    -webkit-transition: .8s cubic-bezier(.79,.17,.15,.96);
    transition: .8s cubic-bezier(.79,.17,.15,.96);}
#index .box03 .img_box img:hover{
  transform: scale(1.06);
	-webkit-transition: -webkit-transform 3s ease-out;
    transition: -webkit-transform 3s ease-out;
    transition: transform 3s ease-out;
    transition: transform 3s ease-out,-webkit-transform 3s ease-out;
}

#index .box03 a:hover img {filter: alpha(opacity=100); opacity: 1;}
#index .box03 .txt01 {background-color: #000; display: inline; position: absolute; right: 10px; top: -12px; font-size: 20px; line-height: 1; z-index: 10; padding: 4px 10px;}
#index .box03 .txt03 {font-size: 15px; padding: 20px 0;}
#index .box03 .txt02 {font-size:20px; line-height: 1; padding: 5px 20px; display: inline; position: absolute; left: -10px; bottom: -10px; transition-duration: .6s; z-index: 10; background: #000;  
-webkit-transition: color .2s .3s,-webkit-transform .4s .1s cubic-bezier(.08,.92,.35,1);
    transition: color .2s .3s,-webkit-transform .4s .1s cubic-bezier(.08,.92,.35,1);
    transition: transform .4s .1s cubic-bezier(.08,.92,.35,1),color .2s .3s;
    transition: transform .4s .1s cubic-bezier(.08,.92,.35,1),color .2s .3s,-webkit-transform .4s .1s cubic-bezier(.08,.92,.35,1);

}
#index .box03 .txt02::before {
	content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #002b79;
    -webkit-transform: translate3d(0,0,0) scaleX(1);
    transform: translate3d(0,0,0) scaleX(1);
}
#index .box03 .txt02::after {
	content: '';
    position: absolute;
    z-index: -2;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    -webkit-transform: translate3d(0,0,0) scaleX(1);
    transform: translate3d(0,0,0) scaleX(1);
}
#index .box03 .txt02::before,#index .box03 .txt02::after {
	-webkit-transform: translate3d(0,0,0) scaleX(0);
    transform: translate3d(0,0,0) scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s,-webkit-transform .2s;
}
#index .box03 .list:hover .txt02::before {
	-webkit-transform: translate3d(0,0,0) scaleX(1);
    transform: translate3d(0,0,0) scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transition: -webkit-transform .33s cubic-bezier(.79,.17,.15,.96);
    transition: -webkit-transform .33s cubic-bezier(.79,.17,.15,.96);
    transition: transform .33s cubic-bezier(.79,.17,.15,.96);
    transition: transform .33s cubic-bezier(.79,.17,.15,.96),-webkit-transform .33s cubic-bezier(.79,.17,.15,.96);
}
#index .box03 .list:hover .txt02::after {
-webkit-transform: translate3d(0,0,0) scaleX(1);
    transform: translate3d(0,0,0) scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transition: -webkit-transform .22s cubic-bezier(.79,.17,.15,.96);
    transition: -webkit-transform .22s cubic-bezier(.79,.17,.15,.96);
    transition: transform .22s cubic-bezier(.79,.17,.15,.96);
    transition: transform .22s cubic-bezier(.79,.17,.15,.96),-webkit-transform .22s cubic-bezier(.79,.17,.15,.96);
}
#index .box03 .btn01 {margin-top: 80px;}
#index .box04 {padding: 20px 0 80px;}
#index .box04 h2 {font-size: 25px; line-height: 1.5; position: relative; left: 50%; margin: -70px auto 40px;}
#index .box04 h2 span {font-size: 70px;}
#index .box04 .text_box {margin-left: 50px;}
#index .box04 .img {position: relative; height: 584px; width: 800px; min-width: 800px; margin-left: -540px; overflow: hidden;}
#index .box04 .img img {
	display: block;
    width: 800px;
	min-width: 800px;
    height: auto;
    position: relative;
}
#index .box04 .txt01 {font-size: 30px; margin-bottom: 30px;}
#index .box04 .txt02 {font-size: 16px; margin-top: 20px; line-height: 2;}
#index .box04 .btn_box {margin-top: 50px;}
#index .box04 .btn {width: 300px;}
#index .box04 .btn_box::before {content: ''; flex-grow: 1; height: 1px; background: #000; display: block; margin-right: 50px;}
#index .box04 .btn_box02 a {width: 460px; background: #1b1b1b; padding: 10px; font-size: 18px; line-height: 1;}
#index .box04 .btn01 {width: 300px;}
#index .box05 {background: url("img/index/box05_bg.jpg")top center no-repeat;}
#index .box05 h2 {font-size: 60px;}
#index .box05 .min {background: #000; width: 597px; margin: 20px auto 0; font-size: 20px; line-height: 1; padding: 5px 0;}
#index .box05 .txt {font-size: 20px; line-height: 1.5; margin: 70px auto;}
#index .box06 {background: url("img/index/box06_bg02.png")bottom center no-repeat,url("img/index/box06_bg01.jpg")top left repeat;}
#index .box06 h2 {font-size: 40px; line-height: 1.5; margin-bottom: 20px;}
#index .box06 .min {font-size: 20px; line-height: 1.5; margin-bottom: 80px;}
#index .box06 ul {position: relative;}
#index .box06 li {width: 285px; position: relative; box-sizing: border-box;}
#index .box06 .title {position: absolute; top: 20px; left: 20px; line-height: 1;}
#index .box06 .title .big {font-size: 30px; margin-bottom: 5px;}
#index .box06 .title p {box-sizing: border-box; background: #fff; display: inline-block; padding: 5px; font-size: 18px; transition-duration: .6s;}
#index .box06 .title p .blue {transition-duration: .6s;}
#index .box06 .btn_box {background: rgba(0,0,0,.9); padding: 20px; position: absolute; left: 0; right: 0; bottom: 0; margin: auto;}
#index .box06 .btn01 {font-size: 16px; line-height: 1; padding: 15px 0; width: 100%; color: #fff;}
#index .box06 .btn01 .btn_item01, #index .box06 .btn01 .btn_item02 {border: 1px solid #fff;}
#index .box06 .h_point:hover .btn01 {background: #fff; color: #000;}
#index .box06 .btn01 .arrow::before,#index .box06 .btn01 .arrow::after {background: #000;}
#index .box06 .btn01:before,
#index .box06 .btn01:after,
#index .box06 .btn01 .btn_inner:before,
#index .box06 .btn01 .btn_inner:after {
    content: '';
    position: absolute;
    background: #fff; /*線の色*/
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}
#index .box06 .inview .cover-slide {
  opacity: 1;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
#index .box06 .c-slide01 {opacity: 0; transition-duration: .6s; transition-delay: .3s}
#index .box06 .inview .c-slide01 {opacity: 1; transition-duration: .6s;}
#index .box06 .c-slide02 {opacity: 0; transition-duration: .6s; transition-delay: .8s;}
#index .box06 .inview .c-slide02 {opacity: 1; transition-duration: .6s; transition-delay: .8s;}
#index .box06 .c-slide03 {opacity: 0; transition-duration: .6s; transition-delay: .9s;}
#index .box06 .inview .c-slide03 {opacity: 1; transition-duration: .6s; transition-delay: .9s;}
#index .box06 .c-slide04 {opacity: 0; transition-duration: .6s; transition-delay: 1s;}
#index .box06 .inview .c-slide04 {opacity: 1; transition-duration: .6s; transition-delay: 1s;}
#index .box06 .item {opacity: 0;}
#index .box06 .inview .item {
 opacity: 1;
transition-delay: 1s;
transition-duration: .6s;
}
#index .box06 .c_slide02.inview .item {
 opacity: 1;
transition-delay: 1.5s;
}
#index .box06 .c_slide03.inview .item {
 opacity: 1;
transition-delay: 2s;
}
#index .box06 .c_slide04.inview .item {
 opacity: 1;
transition-delay: 2.5s;
}
#index .box06 li:hover .title p {background: #002b79; color: #fff;}
#index .box06 li:hover .title p .blue {color: #fff;}


#index .box07 {background: url("img/index/box07_bg.jpg")center center no-repeat; position: relative; width: 50%;}
#index .box07 .white_bg {background: rgba(0,0,0,.7); width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; box-sizing: border-box; content: ''; -webkit-transition: .2s; transition: .2s;}
#index .box07 .txt_box {position: relative; z-index: 20; padding: 60px; line-height: 1;}
#index .box07 h2 {font-size: 30px; margin-bottom: 30px;}
#index .box07 .txt01 {display: inline-block; font-size: 20px; background: #fff; padding: 5px 20px; margin: 20px auto 50px;}
#index .box07 .btn01 {width: 300px; color: #fff;}
#index .box07 .btn01:before,
#index .box07 .btn01:after,
#index .box07 .btn01 .btn_inner:before,
#index .box07 .btn01 .btn_inner:after {
    content: '';
    position: absolute;
    background: #fff; /*線の色*/
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}
#index .box07 .btn01 .btn_item01, #index .box07 .btn01 .btn_item02 {border: 1px solid #fff;}
#index .box07 .btn01:hover,#index .box07:hover .btn01 {background: #fff!important; color: #000!important;}
#index .box07 .btn01 .arrow::before,#index .box07 .btn01 .arrow::after {background-color: #000;}


#index .box08 {width: 50%; background: url("img/index/box08_bg.jpg")center center no-repeat;}
#index .box09 {background: url("img/index/box09_bg.jpg")top center repeat;}
#index .box09 h2 {font-size: 30px; margin-bottom: 40px;}
#index .box09 .min {font-size: 16px; line-height: 1; margin: 20px auto 50px;}
#index .box09 .tool_box a {box-sizing: border-box; border: 1px solid #000; background: #fff; font-size: 16px; width: 386px; height: 60px; line-height: 1.3; overflow: hidden; position: relative; margin: 0 20px 20px 0;}
#index .box09 .inner a {box-sizing: border-box; border: 1px solid #000; background: #fff; font-size: 16px; width: 285px; height: 60px; line-height: 1.3; margin-right: 20px; overflow: hidden; position: relative;}
#index .box09 .inner a p,#index .box09 .tool_box p {z-index: 10; position: relative; transition-duration: .3s;}
#index .box09 .inner a:nth-child(n + 5) {margin-top: 20px;}
#index .box09 .tool_box a:nth-child(3n),#index .box09 .inner a:nth-child(4n) {margin-right: 0;}
#index .box09 .con02 {margin-top: 50px;}
#index .box09 .inner a::before,#index .box09 .tool_box a::before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; content: ''; background: #000; transform-origin: center center; transform: scale(0, 1); transition: transform .3s;}
#index .box09 .inner a:hover::before,#index .box09 .tool_box a:hover::before {transform: scale(1, 1);}
#index .box09 .inner a:hover p,#index .box09 .tool_box a:hover p {color: #fff;}
#index .box09 .inner a .text01 {font-size: 14px;}



@media screen and (max-width:1199px) {
	#index .box09 .inner a {width: 24%; height: auto; padding: 1.5% 0; margin-right: 1.3%; font-size: 1.2vw;}
}

/*========================
FOOTER
========================*/
footer .contact_box {background: url("img/footer/contact_bg.jpg")top left repeat; line-height: 1;}
footer .contact_box .over {box-sizing: border-box; border-bottom: 2px solid #000; padding-bottom: 30px; font-size: 25px;}
footer .contact_box .over img {margin-right: 20px;}
footer .contact_box .big {font-size: 50px; margin-bottom: 10px;}
footer .contact_box .inner {margin: 30px auto;}
footer .contact_box .tel {font-size: 50px; margin-right: 2%;}
footer .contact_box .tel span {font-size: 70px;}
footer .contact_box .mail {box-sizing: border-box; background: #002b79; width: 300px; height: 60px; font-size: 20px;}
footer .contact_box .mail img {margin-right: 5px;}
footer .contact_box .txt01 {font-size: 20px;}
footer .contact_box .txt01_02 {margin-top: 10px;}
footer .under {box-sizing: border-box; background: url("img/footer/under_bg.jpg")top center no-repeat; line-height: 1;}
footer .under .title_box {font-size: 25px;}
footer .under .title_box img {margin-right: 20px;}
footer .under .title_box .big {font-size: 50px; margin-bottom: 10px;}
footer .under_inner ul {margin-right: 80px;}
footer .home_link {font-size: 16px; margin: 25px auto 45px;}
footer .under li:nth-child(1) {margin-top: 0;}
footer .under li {font-size: 18px; margin-top: 30px;}
footer .under .box .txt01 {font-size: 20px;}
footer .under .box .txt01_02 {margin: 10px 0 20px;}
footer .under .box .txt02 {font-size: 25px;}
footer .copyright {background-color: #000; padding: 10px 0; font-size: 12px;}
footer .copyright p:last-child {margin-left: 10px;}
#pop_banner {position: fixed; bottom: 20px; z-index: 100; width: 100%;}
#pop_banner .inner {width: 1200px; margin: auto;}
#pop_banner .inner02 {box-sizing: border-box; border: 1px solid #000; background-color: #fff; width: 100%;}
#pop_banner .icon01 {box-sizing: border-box; -webkit-transition: all 0.5s ease; background-color: #000; margin-right: 15px;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;
}
#pop_banner .icon01:hover {
  background-color: #002b79;
  -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;}
#page_top {min-width: 80px;}


/*pankuzu*/
.pan {padding: 40px 0;}
.pan p {font-weight: bold; margin: 0 auto;}
.pan a {display: inline;}
/*========================
ページ設定
========================*/
/*
サムネ
*************/
.page_thumb {
width: 100%;
margin: auto;
box-sizing: border-box; 
height: 500px;
font-size: 50px;
line-height: 1;
position: relative;
background: #eee;
}
.page_thumb p {
	display: inline-block; background: #fff; padding: 10px 20px;
}
.page_thumb .min {font-size: 25px;}
.page_thumb .txt_box {z-index: 150; position: relative; }
.page_thumb .thumb_img {position: absolute; top: 0; bottom: 0; left: 100px;}
.page_thumb .thumb_img img {min-width: 1460px; height: 500px;}
.page_thumb .thumb_img_box {position: absolute; height: 500px; left: 0; right: 0;}
.sub_page {margin-bottom: 80px;}
.div {content: '';}


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

/*
タイトル
*************/
.page_title {
font-size: 30px;
line-height: 1;
margin-bottom: 40px;
}
.sub_page_title {font-size: 20px; line-height: 1; color: #bababa; margin-bottom: 40px;}


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

.previous-entries,.next-entries {
color: #fff;
width: 80px;
background: #161616;
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: #fff;
font-weight: bold;
width: 150px;
background: #002b79;
padding: 6px 0 6px 10px;
box-sizing: border-box;
}
.navigation {margin-bottom: 40px;}

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