@charset "utf-8";

/*
Theme Name: universal_child
Template: universal_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;}
/******************************
HEADER
******************************/

header {padding: 20px 0; position: fixed; top: 0; left: 0; right: 0; margin: auto; z-index: 30; box-sizing: border-box; border-bottom: 2px solid #fff; line-height: 1; transition-duration: .5s; color: #fff;}
header h1 {font-size: 30px;}
header .min {font-size: 20px; margin-top: 2px;}
header .btn01 {font-size: 20px; margin-left: 150px; color: #fff;}
header .btn02 {font-size: 20px; width: 200px; box-sizing: border-box; border: 2px solid #fff; border-radius: 15px; height: 35px;}
header .logo {margin-right: 20px;}
/*ハンバーガー*/	
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 60px;
  height: 60px;
  box-sizing: border-box; 
  border: 2px solid #fff;
  border-radius: 60px;
  background: inherit;
  outline: none;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 30px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
}
.menu-trigger span:nth-of-type(1) {
  top: 20px;
}
.menu-trigger span:nth-of-type(2) {
  top: 27px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 20px;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(7.5px) rotate(-45deg);
  transform: translateY(7.5px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-7.5px) rotate(45deg);
  transform: translateY(-7.5px) rotate(45deg);
}
.nav-fixed .menu-trigger span {background-color: #00a0e9;}
.nav-fixed .menu-trigger {border: 2px solid #00a0e9; background-color: #fff;}
#nav-toggle {
  z-index: 1000;
}
#gloval-nav {
  background: rgba(13, 13, 140, .8);
  position: fixed;
  width: 100%;
  height: 100%;
  font-size: 20px;
  opacity: 0;
  transition-duration: .5s;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  line-height: 1;
  visibility: hidden;
}
.open #gloval-nav {
  opacity: 1;
  visibility: visible!important;
  z-index: 990;
}
#gloval-nav .nav_area {display: none;}
.open #gloval-nav .nav_area {z-index: 990; display: block;}
.nav-bg.active {
  opacity: 1;
}
#gloval-nav .big_text {font-size: 25px;}
#gloval-nav .small_text {font-size: 18px; margin-top: 25px;}
#gloval-nav .min_text {font-size: 18px; margin-bottom: 10px;}
#gloval-nav .min_text:first-child {margin-top: 25px;}
#gloval-nav .nav_btn {width: 280px; height: 60px; background-color: #fff; box-sizing: border-box; font-size: 18px; margin-bottom: 20px;}
#gloval-nav .nav_btn02 {background-color: #f4810b; margin-bottom: 0;}
#gloval-nav .nav_btn img {margin-right: 10px;}
#gloval-nav .nav_box {margin-right: 50px;}
#gloval-nav .nav_inner:last-child {margin-top: 50px;}
.indent_content {padding: 70px 0;}
.indent_content02 {margin-top: 50px;}
.content {padding: 40px; position: relative;}
.front_main {position: relative;}
.main_text {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 20;}
.main_text .txt01 {font-size: 90px; transform: rotate(-5deg); line-height: 1.2;}
.main_text .txt01 span {font-size: 130px;}
.main_text .txt02 {font-size: 25px; margin-top: 75px;}
.slider01 {width: 100%; height: 100%;}
.slider01 .slide01 {background: url(img/header/main01.jpg); background-size: cover; background-position: center;}
.slider01 .slide02 {background: url(img/header/main02.jpg); background-size: cover; background-position: center;}
.slider01 .slide03 {background: url(img/header/main03.jpg); background-size: cover; background-position: center;}
.front_main .q_icon {position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 10;}
/*矢印*/
.p-visual__scroll {transition: 1s ease 1.5s; opacity: 1; position: absolute; bottom: 40px; width: 100%; z-index: 50; color: #fff;}
.c-scroll {text-align: center;}
.c-scroll__text {    font-size: 16px;
    font-family: "Playfair Display",serif;
    letter-spacing: .135em;
    margin-right: -1px;}
.c-scroll__line {display: block;
    width: 13px;
    height: 1px;
    background: #fff;
    margin: 10px auto 0;
    animation: SCROLL_BASE 2.8s cubic-bezier(.86,0,.07,1) infinite;}
.c-scroll__arrow-line {
	position: relative;
    display: block;
    width: 1px;
    height: 40px;
    margin: auto;
    overflow: hidden;
}
.c-scroll__arrow-top {
	display: block;
    width: 0;
    height: 0;
    border-top: 5px solid #fff;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    margin: auto;
    animation: SCROLL_ARROW 2.8s cubic-bezier(.86,0,.07,1) infinite;
}
.c-scroll__arrow-line:before {
	content: ' ';
    display: block;
    width: 1px;
    height: 40px;
    background: #fff;
    animation: SCROLL_LINE 2.8s cubic-bezier(.86,0,.07,1) infinite;
	border-style: solid;
    border-width: 0;
}
@keyframes SCROLL_BASE{0%,80%,to{transform:scale(0)}50%{transform:scale(1)}}
@keyframes SCROLL_ARROW{0%,20%{transform:rotateY(-270deg)}50%{transform:rotateY(0deg)}to{transform:rotateY(270deg)}}
@keyframes SCROLL_LINE{0%{transform:translateY(-100%)}50%{transform:translateY(0%)}to{transform:translateY(100%)}}

.nav-fixed {
background: rgba(255,255,255,.8); padding: 10px 0; color: #000; border: none;
}
.nav-fixed .btn01 {color: #000;}
.nav-fixed .btn02 {border: none; background-color: #00a0e9; color: #fff;}


/*index*/
#index .box00 {background: url("img/index/box06_bg.jpg")top left repeat; padding: 70px 0;}
#index .box00 .btn {background: #0d0d8c; width: 1000px; margin: 0 auto; font-size: 25px; line-height: 1; padding: 20px 0;}
#index .box00 .btn img {margin-right: 40px;}
#index .box01 {background: url("img/index/box01_bg.png")bottom center no-repeat,url("img/index/box01_bg02.jpg")top left repeat;}
#index .box01 h2 {font-size: 30px; margin-bottom: 15px; letter-spacing: 5px;}
#index .box01 .time {font-size: 16px;}
#index .blog_area {font-size: 18px; box-sizing: border-box; border: 1px solid #fff; border-left: none; border-right: none; padding-top: 15px; position: relative; z-index: 10;}
#index .blog_item {box-sizing: border-box; border-bottom: 1px solid #fff; padding-bottom: 15px; margin-bottom: 15px; line-height: 1;}
#index .blog_item:nth-last-child(1) {margin-bottom: 0; border-bottom: none;}
#index .box01 .tag {background-color: #eeb31d; width: 65px; height: 25px; margin: 0 15px;}
#index .box01 .tag02 {background-color: #f4810b;}
#index .box01 .big_text {font-size: 250px; line-height: 1; opacity: 0.1; position: absolute; bottom: -120px; left: -300px;}
#index .box02 {background: url("img/index/box02_bg.jpg")top left repeat; padding: 100px 0; overflow: hidden; position: relative;}
#index .box02 .txt01 {font-size: 25px; position: relative; z-index: 10;}
#index .box02 .txt02 {font-size: 90px; line-height: 1; margin: 40px auto 50px; position: relative; z-index: 10;}
#index .box02 .txt03 {font-size: 15px; margin-top: 30px; position: relative; z-index: 10;}
#index .box02 .icon01 {position: absolute; left: -500px; bottom: -100px;}
#index .box02 .icon02 {position: absolute; right: -500px; bottom: -100px;}
#index .box02 .bg_icon {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 5; opacity: .15;}
#index .box03 {background: url("img/index/box03_bg.png")center center no-repeat; background-color: #171a79; padding: 100px 0;}
#index .box03 h2 {font-size: 30px; background: url("img/index/box03_big_bg.jpg")top left repeat; display: inline-block; padding: 5px 10px;}
#index .box03 span {font-size: 100px; letter-spacing: 10px;}
#index .box03 .title_icon {position: absolute; right: 50px; top: 10px;}
#index .box03 .box03_slide {position: relative; height: 450px;}
#index .box03 .text {position: absolute; bottom: 40px; left: -20px; visibility: hidden;}
#index .box03 .swiper-slide-active .text {visibility: visible;}
#index .box03 .btn {position: absolute; bottom: -25px; right: 20px; width: 240px; height: 50px; background-color: #f4810b; font-size: 16px; letter-spacing: 2px;}
#index .box03 .btn02 {background-color: #eeb31d;}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {display: none;}
#index .box03 .swiper-button-prev {width: 30px; height: 50px; left: -50px;}
#index .box03 .swiper-button-next {width: 30px; height: 50px; right: -50px;}
#index .box03 .swiper-button-prev:focus,#index .box03 .swiper-button-next:focus {outline:0;}
#index .slider02 {width: 540px; margin-left: 0; margin-top: 90px;}
#index .slider03 {width: 540px; margin-right: 0;}
#index .sp-slide {display: none;}
#index .box011 {background: url("img/index/box011_bg.jpg")top left repeat; padding: 50px 0; position: relative;}
#index .box011 .title_area{position: relative; z-index: 10;}
#index .box011 .title{background: url("img/index/box011_big_bg.jpg")top left repeat; display: inline-block; padding: 5px; font-size: 30px; position: relative;}
#index .box011 .title .tl_dot{background: #db760e; width: 6px; height: 6px; box-sizing: border-box; border-radius: 50%; top: 5px; left: 5px; }
#index .box011 .title .tr_dot{top: 5px; left: 5px;}
#index .box011 .title .bl_dot{bottom: 5px; left: 5px;}
#index .box011 .title .br_dot{bottom: 5px; right: 5px;}
#index .box011 h3{font-size: 70px; padding: 0 20px; letter-spacing: 10px;}
#index .box011 .title_area .txt01{font-size: 20px; margin-right: 70px; margin-left: 20px; line-height: 2;}
#index .box011 .inner01{position: relative;}
#index .box011 .con_area{position: relative; margin-top: 50px; z-index: 10;}
#index .box011 h4{background: url("img/index/box011_tag00.svg")top left no-repeat; position: absolute; font-size: 28px; width: 514px; height: 53px; top: -27px; left: 0; text-align: center; padding-top: 10px; z-index: 10;}
#index .box011 .con01{background: url("img/index/box011_conbg.jpg")top left repeat; padding: 50px 50px 10px; font-size: 21px;}
#index .box011 .con02{padding: 20px 50px 10px; font-size: 21px;}
#index .box011 .con02:last-child, #index .box011 .con03{padding-bottom: 50px;}
#index .box011 .con01 .area{margin-bottom: 30px;}
#index .box011 .con01 h5{margin: 0 10px;}
#index .box011 .con01 .bnr a,#index .box011 .con01 .bnr02 a,#index .box011 .con01 .nolink {box-sizing: border-box; width: 333px; background: #1a1b7a; border-bottom: #54595a solid 3px; padding: 10px 0; margin-left: 50px;}
#index .box011 .con01 .bnr a:first-child,#index .box011 .con01 .bnr02 a:first-child,#index .box011 .con01 .nolink:first-child{margin-left: 0;}
#index .box011 .con01 .bnr{margin-top: 20px;}
#index .box011 .con01 .bnr .a01{font-size: 22px; background: #e8e8fb; border-bottom: solid 3px #cccccc;color: #1a1b7a;}
#index .box011 .icon_box01 {position: absolute; top: 0; left: 0; right: 0;}
#index .box011 .icon_box02 {position: absolute; bottom: 0; left: 0; right: 0;}
#index .box011 .icon_box01 .bg01 {position: absolute; left: -360px; top: 0;}
#index .box011 .icon_box01 .bg02 {position: absolute; right: -360px; top: 0;}
#index .box011 .icon_box02 .bg01 {position: absolute; left: -360px; bottom: 0;}
#index .box011 .icon_box02 .bg02 {position: absolute; right: -360px; bottom: 0;}



#index .box04 {background: url("img/index/box04_bg.png")center center no-repeat,url("img/index/box04_bg02.jpg")top left repeat; padding: 90px 0;}
#index .box04 ul {width: 795px;}
#index .box04 li {box-sizing: border-box; border: 10px solid #e58c27; padding: 25px 10px 10px; background-color: #fff; width: 258px; font-size: 13px; position: relative; line-height: 1.4;}
#index .box04 li::before {content: ''; position: absolute; left: 0; top: -13px; width: 18px; height: 28px; background: url("img/index/box04_li_icon.png")no-repeat;}
#index .box04 li:nth-child(2),#index .box04 li:nth-child(4),#index .box04 li:nth-child(9) {border: 10px solid #222a95;}
#index .box04 li:nth-child(3),#index .box04 li:nth-child(5),#index .box04 li:nth-child(7) {border: 10px solid #545a5a;}
#index .box04 li:nth-child(3),#index .box04 li:nth-child(5) {padding-top: 15px;}
#index .box04 li:nth-child(3) p,#index .box04 li:nth-child(5) p {margin-top: 7px;}
#index .box04 li:nth-child(n + 4) {margin-top: 10px;}
#index .box04 li p {margin-top: 20px;}
#index .box04 h3 {font-size: 20px; position: relative; margin-bottom: 10px; display: inline;}
#index .box04 h3::before {content: ''; background: url("img/index/box04_txt_icon01.png")no-repeat; position: absolute; left: -20px; top: -10px; width: 50px; height: 30px;}
#index .box04 .big {font-size: 70px; line-height: 1; position: relative;}
#index .box04 .big::after {position: absolute; content: ''; background: url("img/index/box04_big_icon.png")no-repeat; width: 66px; height: 68px; right: -80px; top: 0; bottom: 0; margin: auto;}
#index .box04 h2 {font-size: 30px; margin-top: 15px;}
#index .box04 .txt01 {font-size: 18px; margin: 40px 0;}
#index .box04 .txt02 {font-size: 25px; line-height: 1; position: relative; margin-bottom: 30px;}
#index .box04 .txt02::before {content: ''; position: absolute; background: url("img/index/box04_txt_icon01.png")no-repeat; top: -10px; left: -15px; width: 50px; height: 30px;}
#index .box04 .txt02::after {content: ''; position: absolute; background: url("img/index/box04_txt_icon02.png")no-repeat; bottom: -10px; left: 0; width: 260px; height: 10px;}
#index .box04 .btn {box-sizing: border-box; border: 1px solid #000; width: 240px; line-height: 1; padding: 15px 0; font-size: 16px; margin-top: 60px; background-color: #fff;}
#index .box05 {background-color: #0f0f74; padding: 120px 0;}
#index .box05 .title_area {background-color: #0d0d8c; font-size: 50px; line-height: 1; width: 350px; margin: auto; padding: 10px 0; position: relative; z-index: 20;}
#index .box05 h2 {font-size: 20px; margin-top: 5px;}
#index .box05 li .img {box-sizing: border-box; box-shadow: 10px 10px #fff;}
#index .box05 .text_box {background-color: #fff; width: 400px; padding: 40px 0 20px; position: relative; margin: -80px auto 0;}
#index .box05 .text_box::before {content: ''; position: absolute; top: -4px; left: 0; right: 0; margin: auto; background: url("img/index/box05_li_icon.png")no-repeat; width: 18px; height: 28px;}
#index .box05 .txt01 {position: relative; font-size: 25px; line-height: 1; transform: rotate(-5deg);}
#index .box05 .txt01::before {position: absolute; background: url("img/index/box05_text_shadow.png")no-repeat; content: ''; width: 250px; height: 24px; transform: rotate(5deg); bottom: -15px;}
#index .box05 h3 {font-size: 16px; margin: 30px auto 16px;}
#index .box05 .btn {width: 250px; background-color: #f4810b; font-size: 16px; padding: 16px 0; line-height: 1; margin: auto;}
#index .box05 .inner {margin-top: -115px;}
#index .box05 li {position: relative; z-index: 10;}
#index .box05 li:last-child .btn {background-color: #eeb31d;}
#index .box05 li:last-child .txt01::before {background: url("img/index/box05_text_shadow02.png")no-repeat;}
#index .box05 ul::before {content: ''; position: absolute; background:url("img/index/box05_bg01.png")no-repeat; top: -50px; left: -350px; width: 566px; height: 566px;}
#index .box05 ul::after {content: ''; position: absolute; background:url("img/index/box05_bg01.png")no-repeat; bottom: -50px; right: -350px; width: 566px; height: 566px;}
#index .box06 {background: url("img/index/box06_bg.jpg")top left repeat;}
#index .box06 .inner {margin-top: 40px;}
#index .box06 h2 {font-size: 40px; line-height: 1; margin: 0 20px; letter-spacing: 5px;}
#index .box06 .inner a img {margin-right: 30px;}
#index .box06 .inner a {font-size: 20px; line-height: 1; width: 600px; height: 100px; box-sizing: border-box; border: 1px solid #0f0f74; padding-left: 30px; background-color: #fff;}
#index .box07 {background: url("img/index/box07_bg.jpg")center center no-repeat; padding: 110px 0; position: relative;}
#index .box07 h2 {font-size: 70px; letter-spacing: 10px; margin-bottom: 30px;}
#index .box07 .txt01 {font-size: 20px; line-height: 1; display: inline; box-sizing: border-box; border-bottom: 1px solid #fff;}
#index .box07 .btn {background-color: #fff; font-size: 20px; width: 282px; padding: 15px 0; line-height: 1; margin-top: 40px;}
#index .box07 a img {margin-right: 10px;}
#index .box07 .icon {position: absolute; left: 0; right: 0; bottom: -33px; margin: auto;}


/*========================
FOOTER
========================*/
footer {background: url("img/footer/bg.jpg")top left repeat; line-height: 1; padding-top: 50px;}
footer .logo {margin: 100px auto 40px;}
footer .txt01 {font-size: 20px;}
footer .txt02 {font-size: 30px; margin-top: 40px;}
footer .copyright {background-color: #0d0d8c; padding: 5px 0; margin-top: 120px; font-size: 12px;}
footer .copyright p:last-child {margin-left: 10px;}

/*pankuzu*/
.pan {padding: 40px 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 .pop_inner {box-sizing: border-box; border: 1px solid #000; background-color: #fff; width: 800px; margin: auto;}
#pop_banner .icon01 {box-sizing: border-box; border-left: 1px solid #000;}
#pop_banner .icon01:nth-child(1) {border-left: none;}
/*========================
ページ設定
========================*/
/*
サムネ
*************/
.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;
justify-content: center;
align-items: center;
font-size: 50px;
letter-spacing: 5px;
line-height: 1;
}
.page_thumb span {font-size: 20px;}
.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 {
font-size: 30px;
line-height: 1;
margin-bottom: 40px;
}
.big_page_title {font-size: 70px; letter-spacing: 5px; margin-bottom: 5px;}


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

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