@charset "utf-8";

/*
Theme Name: tiara_child
Template: tiara_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: 10px 0; background-color: #ffa3c4;}
header h1 {font-size: 12px;}
header .inner {margin-top: 5px;}
.global_nav {display: table; width: 660px;}
.global_nav li {display: table-cell; position: relative; line-height: 1.3; box-sizing: border-box; font-size: 18px;}
.global_nav a::after {
  position: absolute;
  bottom: -5px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.global_nav a:hover::after {
  transform: scale(1, 1);
}
.indent_content {padding: 70px 0;}
.indent_content02 {margin-top: 40px;}
.content {padding: 20px; position: relative;}

.front_main_area {position: relative;}
.front_main_area .main_box {padding-bottom: 118px;}
.front_main {background: url("img/header/main_bg.jpg")center center no-repeat; background-size: cover; width: 100%; height: 100%;}

/*文字アニメーション*/
.animate-title {
  opacity: 0;
}

.animate-title.inview {
  opacity: 1;
}

.animate-title.inview span {
  display: inline-block;
  -webkit-animation-name: kf-animate-chars;
          animation-name: kf-animate-chars;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
          animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animate-title.inview .char:nth-child(1) {
  -webkit-animation-delay: 0.04s;
          animation-delay: 0.04s;
}
.animate-title.inview .char:nth-child(2) {
  -webkit-animation-delay: 0.08s;
          animation-delay: 0.08s;
}
.animate-title.inview .char:nth-child(3) {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}
.animate-title.inview .char:nth-child(4) {
  -webkit-animation-delay: 0.16s;
          animation-delay: 0.16s;
}
.animate-title.inview .char:nth-child(5) {
  -webkit-animation-delay: 0.20s;
          animation-delay: 0.20s;
}
.animate-title.inview .char:nth-child(6) {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}
.animate-title.inview .char:nth-child(7) {
  -webkit-animation-delay: 0.28s;
          animation-delay: 0.28s;
}
.animate-title.inview .char:nth-child(8) {
  -webkit-animation-delay: 0.32s;
          animation-delay: 0.32s;
}
.animate-title.inview .char:nth-child(9) {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}
.animate-title.inview .char02:nth-child(1) {
  -webkit-animation-delay: 0.40s;
          animation-delay: 0.40s;
}
.animate-title.inview .char02:nth-child(2) {
  -webkit-animation-delay: 0.44s;
          animation-delay: 0.44s;
}
.animate-title.inview .char02:nth-child(3) {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}
.animate-title.inview .char02:nth-child(4) {
  -webkit-animation-delay: 0.52s;
          animation-delay: 0.52s;
}
.animate-title.inview .char02:nth-child(5) {
  -webkit-animation-delay: 0.56s;
          animation-delay: 0.56s;
}
.animate-title.inview .char02:nth-child(6) {
  -webkit-animation-delay: 0.60s;
          animation-delay: 0.60s;
}
.animate-title.inview .char02:nth-child(7) {
  -webkit-animation-delay: 0.64s;
          animation-delay: 0.64s;
}
.animate-title.inview .char02:nth-child(8) {
  -webkit-animation-delay: 0.68s;
          animation-delay: 0.68s;
}
.animate-title.inview .char02:nth-child(9) {
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
}
.animate-title.inview .char02:nth-child(10) {
  -webkit-animation-delay: 0.76s;
          animation-delay: 0.76s;
	margin-bottom: -18px;
}
.animate-title.inview .char03:nth-child(1) {
  -webkit-animation-delay: 0.80s;
          animation-delay: 0.80s;
}
.animate-title.inview .char03:nth-child(2) {
  -webkit-animation-delay: 0.84s;
          animation-delay: 0.84s;
}
.animate-title.inview .char03:nth-child(3) {
  -webkit-animation-delay: 0.88s;
          animation-delay: 0.88s;
}
.animate-title.inview .char03:nth-child(4) {
  -webkit-animation-delay: 0.92s;
          animation-delay: 0.92s;
}
.animate-title.inview .char03:nth-child(5) {
  -webkit-animation-delay: 0.96s;
          animation-delay: 0.96s;
}
.animate-title.inview .char03:nth-child(6) {
  -webkit-animation-delay: 1.00s;
          animation-delay: 1.0s;
}
.animate-title.inview .char03:nth-child(7) {
  -webkit-animation-delay: 1.04s;
          animation-delay: 1.04s;
}
.animate-title.inview .char03:nth-child(8) {
  -webkit-animation-delay: 1.08s;
          animation-delay: 1.08s;
}
.animate-title.inview .char03:nth-child(9) {
  -webkit-animation-delay: 1.12s;
          animation-delay: 1.12s;
}
.animate-title.inview .char03:nth-child(10) {
  -webkit-animation-delay: 1.16s;
          animation-delay: 1.16s;
}
.animate-title.inview .char03:nth-child(11) {
  -webkit-animation-delay: 1.20s;
          animation-delay: 1.20s;
}
.animate-title.inview .char03:nth-child(12) {
  -webkit-animation-delay: 1.24s;
          animation-delay: 1.24s;
}
.animate-title.inview .char03:nth-child(13) {
  -webkit-animation-delay: 1.28s;
          animation-delay: 1.28s;
}
.animate-title.inview .char03:nth-child(14) {
  -webkit-animation-delay: 1.32s;
          animation-delay: 1.32s;
}
.animate-title.inview .char03:nth-child(15) {
  -webkit-animation-delay: 1.36s;
          animation-delay: 1.36s;
}
.animate-title.inview .char03:nth-child(16) {
  -webkit-animation-delay: 1.40s;
          animation-delay: 1.40s;
}



@-webkit-keyframes kf-animate-chars {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes kf-animate-chars {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.main_box .txt01 {font-size: 40px; line-height: 1; letter-spacing: -4px;}
.main_box .txt02 {margin: 30px auto 20px;}
.main_box .txt03 {font-size: 30px; line-height: 1; letter-spacing: -2px;}
.main_box .main_txt {margin-bottom: -60px;}
.main_box .animate_txt01 {transform: scale(.7); opacity: 0; transition-duration: .5s; transition-timing-function: cubic-bezier(0.05, 1.33, 0.51, 1.28);}
.main_box .animate_txt01.inview {opacity: 1; transform: scale(1);}

.front_news_bg {background-color: #ffa3c4; padding: 20px 40px; width: 2000px; left: 50%; margin-left: -600px; bottom: 0; position: absolute; z-index: 10;}
.front_news_area {width: 1130px; margin-right: auto;}
.front_news_area h2 {font-size: 30px; position: relative; line-height: 1.3; margin-right: 76px;}
.front_news_area h2::after {content: ""; position: absolute; right: -10px; bottom: 17px; width: 80px; height: 1px; background-color: #000;}
.front_news_item {width: 265px; height: 75px; box-sizing: border-box; border: 1px solid #000; background: url("img/header/news_item_bg.png")right 5px bottom 5px no-repeat; background-color: #fff; font-size: 16px;}
.front_news_item .img {margin-right: 15px; width: 74px;}
.front_news_item .img img {width: 100%; height: 73px; object-fit: cover;}
.front_news_item:nth-child(2) {margin: 0 20px;}

/*index*/
#index .btn {background: url("img/index/btn_bg.png")center right 20px no-repeat; background-color: #ffa3c4; width: 350px; margin: 0 auto; font-size: 20px; padding: 16px 0; box-sizing: border-box; border-radius: 27.5px; line-height: 1;}
#index .box01 {background-color: #fff; padding: 120px 0 70px; margin-top: -50px; position: relative; z-index: 1;}
#index .box01 .insta_area {width: 2000px; left: 50%; margin-left: -600px; bottom: 0; position: relative;}
#index .box01 .insta_area::before {content: ""; position: absolute; bottom: -55px; left: -250px; width: 228px; height: 543px; background: url("img/index/box01_icon01.png")no-repeat;}
#index .pc-box .sb_instagram_header {display: none;}
#index .pc-box .sbi_item {width: 196px!important; float: none!important; display: block!important;}
#index .pc-box .icon {width: 196px; height: 196px; margin-right: 5px;}
#index .pc-box #sb_instagram .sbi_photo {height: 196px!important; margin-right: 5px;}
#index .pc-box #sb_instagram #sbi_images {display: flex; float: none!important; padding: 0!important;}
#index .pc-box #sb_instagram #sbi_load {text-align: left!important;}
#index .pc-box #sb_instagram #sbi_load .sbi_follow_btn {margin-top: 20px; margin-left: -201px!important;}
#index #sb_instagram #sbi_load .sbi_load_btn {display: none;}
#index .box02 {background: url("img/index/box02_bg.jpg")bottom center no-repeat; padding-bottom: 70px;}
#index .box02 h2 {font-size: 40px; margin-bottom: 40px;}
#index .box02 .txt01 {font-size: 20px; margin-bottom: 90px;}
#index .box02 .txt01 p {margin: 0 40px; min-width: 350px;}
#index .box02 .txt01 .bdr {background-color: #000; height: 3px; width: 100%; position: relative;}
#index .box02 .txt01 .bdr::before {content: ""; position: absolute; bottom: -4px; left: 0; background-color: #000; width: 100%; height: 1px;}
#index .box02 .btn {margin-top: 50px;}
#index .box02 .inner {position: relative; margin-bottom: 100px;}
#index .box02 .inner::before {content: ""; width: 1460px; height: 394px; position: absolute; left: 100px; top: -50px; background: url("img/index/box02_bg01.jpg")no-repeat;}
#index .box02 .inner p {line-height: 1.5; font-size: 16px; position: relative; z-index: 10;}
#index .box02 .inner .big {background-color: #1e1e1e; display: inline-block; font-size: 35px; line-height: 1; box-sizing: border-box; position: relative; z-index: 20; padding: 5px;}
#index .box02 .inner .big02 {margin-right: -160px; margin-top: 10px;}
#index .box02 .inner p:nth-child(n + 3) {margin-top: 30px;}
#index .box02 .inner .img {margin-left: 20px; position: relative; z-index: 10;}
#index .box02 .inner .btn {margin-top: 80px;}
#index .box02 .icon01 {position: absolute; top: -55px; left: 0;}
#index .box02 .icon02 {position: absolute; right: -300px; top: -120px;}
#index .box02 .icon03 {position: absolute; left: -380px; bottom: -120px;}
#index .lineup_item {width: 232px; margin: 0 5px;}
#index .lineup_item img {height: 210px; object-fit: cover; object-position: center;}
#index .box02 .txt_area {background: url("img/index/box02_item_bg.jpg")top left repeat; padding: 10px 0; line-height: 1; font-size: 16px;}
#index .lineup_img img {width: 100%; height: 210px; object-fit: cover;}
#index .box02 .swiper-button-prev:after,#index .box02 .swiper-button-next:after {display: none;}
#index .box02 .swiper-button-prev {left: -30px; top: 0; bottom: 0; margin: auto; width: 30px; height: 100px;}
#index .box02 .swiper-button-next {right: -30px; top: 0; bottom: 0; margin: auto; width: 30px; height: 100px;}
#index .box02 .swiper-button-prev:focus,#index .box02 .swiper-button-next:focus {outline:0;}
#index .box02 .swiper-container {overflow: hidden;}
#index .box02 h3 {font-size: 40px; margin-bottom: 50px;}
#index .box02 h4 {margin-bottom: 5px;}
#index .box03 {position: relative;}
#index .box03 h2 {font-size: 40px; position: relative; z-index: 10;}
#index .box03 h2::before,#index .box03 h2:after {content: ""; box-sizing: border-box; width: 100%; height: 3px; background-color: #000; margin-right: 40px;}
#index .box03 h2:after {margin-right: 0; margin-left: 40px;}
#index .box03 iframe {width: 100%; height: 350px; margin: 50px auto; box-sizing: border-box; border: 2px solid #000; position: relative; z-index: 20;}
#index .box03 iframe,
#index .box03 object,
#index .box03 embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all  0.7s ease;
}
#index .box03 iframe:hover,
#index .box03 object:hover,
#index .box03 embed:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}
#index .box03 .txt01 {font-size: 18px; line-height: 1; margin: 45px auto 20px; position: relative; z-index: 10;}
#index .box03 table {font-size: 16px;}
#index .box03 table:last-child {margin-left: 45px;}
#index .box03 th {padding-right: 20px;}
#index .box03 .bg {position: absolute; left: 0; bottom: 0; width: 100%; height: 420px; background-color: #ffa3c4;}
#index .box03 .icon01 {position: absolute; right: -530px; top: -140px;}
#index .box03 .icon02 {position: absolute; left: -480px; top: 160px; z-index: 10;}
#index .box03 .icon03 {position: absolute; right: -380px; bottom: -110px; z-index: 10;}
#index .box03 .inner {position: relative; z-index: 10;}
#index .box03 .logo {position: relative; z-index: 10;}
#index .box04 h2 {font-size: 40px; position: relative; margin-bottom: 60px;}
#index .box04 h2::before,#index .box04 h2:after {content: ""; box-sizing: border-box; width: 100%; height: 3px; background-color: #000; margin-right: 40px;}
#index .box04 h2:after {margin-right: 0; margin-left: 40px;}
#index .box04 .blog_area::before {content: ""; width: 18px; height: 383px; background: url("img/index/box04_icon01.png")no-repeat; position: absolute; top: 0; bottom: 0; left: -100px; margin: auto;}
#index .box04 .blog_area::after {content: ""; width: 18px; height: 383px; background: url("img/index/box04_icon02.png")no-repeat; position: absolute; top: 0; bottom: 0; right: -100px; margin: auto;}
#index .box04 .time {font-size: 16px;}
#index .blog_area {font-size: 18px;}
#index .blog_item {box-sizing: border-box; border-bottom: 1px solid #000; padding-bottom: 20px; margin-bottom: 20px; line-height: 1; font-size: 14px;}
#index .blog_item:nth-last-child(1) {margin-bottom: 0;}
#index .box04 .tag {background-color: #ffa3c4; width: 50px; height: 18px; margin: 0 15px;}
#index .box04 .btn {margin-top: 70px;}
#index .box04 .icon03 {position: absolute; right: -450px; bottom: -180px;}


/*========================
FOOTER
========================*/
footer {background-color: #ffa3c4; padding-top: 70px;}
footer .over {width: 600px; margin: auto; box-sizing: border-box; border-top: 3px solid #000; border-bottom: 3px solid #000; position: relative; padding: 55px 0;}
footer .insta_btn {margin-top: 55px;}
footer .over p {font-size: 25px; margin-left: 20px;}
footer .over::before {content: ""; position: absolute; top: 3px; left: 0; width: 100%; height: 1px; background-color: #000;}
footer .over::after {content: ""; position: absolute; bottom: 3px; left: 0; width: 100%; height: 1px; background-color: #000;}


footer .copyright_area {background-color: #000; padding: 5px 0; margin-top: 70px; font-size: 12px;}
footer .copyright_area p {margin-right: 20px;}

/*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 #333333; background-color: #fff;}
#pop_banner .icon01 {box-sizing: border-box; border-right: 5px solid #fff;-webkit-transition: all 0.5s ease; background-color: #ffa3c4;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all  0.5s ease;}
#pop_banner .icon01:hover {
  background-color: #fdbad2;
  -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_thumb {
width: 100%;
margin: auto;
box-sizing: border-box; 
background: url(img/thumb_bg.jpg)center center no-repeat;
height: 400px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
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;
}
}

/*
タイトル
*************/
.big_page_title p {margin: 0 40px; font-size: 40px; line-height: 1;}
.big_page_title .bdr {content: ''; background-color: #000; width: 100%; height: 3px; position: relative;}
.big_page_title .bdr::before {content: ''; position: absolute; bottom: -4px; left: 0; background-color: #000; width: 100%; height: 1px;}
.page_title {font-size: 25px; margin: 15px auto 80px;}



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

.previous-entries,.next-entries {background-color: #ffa3c4; color: #fff; width: 175px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 20px; line-height: 1;}
.previous-entries {background-color: #ff6da1;}

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

.nav_archive_btn {
width: 350px; height: 40px; background-color: #000; border-radius: 20px; color: #fff; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.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;
}
}