@charset "utf-8";



/*

Theme Name: angelie_child

Template: angelie_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;}



/******************************

HEADER

******************************/

header .txt01 {margin-left: 20px; font-size: 17px; line-height: 1.3;}

header .inner {padding: 10px 0;}

header .right_area {font-size: 16px; line-height: 1;}

header .over {box-sizing: border-box; border-bottom: 2px solid #000;padding: 0 10px 10px; margin-bottom: 10px; line-height: 1.4;}

header .tel_area {margin-right: 15px; line-height: 1; letter-spacing: 2px;}

header .tel {font-size: 25px; margin-top: 3px;}

header .tel span {font-size: 40px;}

header .insta {margin-left: 15px;}

.nav_bg {background-color: #000;}

.main_nav {padding: 15px 0; display: table;}

.main_nav li {display: table-cell; position: relative; line-height: 1.3; box-sizing: border-box; font-size: 16px; border-left: 1px solid #8d8d8d; padding: 0 15px;}

.main_nav span {font-size: 20px;}

.main_nav li:nth-child(1) {border: none;}

.main_nav a::after {

  position: absolute;

  bottom: -5px;

  left: 0;

  content: '';

  width: 100%;

  height: 2px;

  background: #FF315F;

  transform: scale(0, 1);

  transform-origin: center top;

  transition: transform .3s;

}

.main_nav a:hover::after {

  transform: scale(1, 1);

}

.indent_content {padding: 100px 0;}

.indent_content02 {margin-top: 40px;}

.content {padding: 20px; position: relative;}

/*矢印*/

.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%)}}

.main {position: relative; overflow: hidden;}

.main li span {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 10px;

    left: 0px;

    color: transparent;

    background-size: cover;

    background-position: 50% 50%;

    background-repeat: none;

    opacity: 0;

    z-index: 0;

    -webkit-animation: imageAnimation 36s 0s infinite;

    animation: imageAnimation 36s 0s infinite;

}

.main li:nth-child(1) span {

    background-image: url(img/header/main01.jpg);

}

.main li:nth-child(2) span {

    background-image: url(img/header/main02.jpg);

    -webkit-animation-delay: 6s;

    animation-delay: 6s; 

}

.main li:nth-child(3) span {

    background-image: url(img/header/main03.jpg);

    -webkit-animation-delay: 12s;

    animation-delay: 12s;

}

.main li:nth-child(4) span {

    background-image: url(img/header/main01.jpg);

    -webkit-animation-delay: 18s;

    animation-delay: 18s;

}

.main li:nth-child(5) span {

    background-image: url(img/header/main02.jpg);

    -webkit-animation-delay: 24s;

    animation-delay: 24s;

}

.main li:nth-child(6) span {

    background-image: url(img/header/main03.jpg);

    -webkit-animation-delay: 30s;

    animation-delay: 30s;

}

@keyframes imageAnimation {

  0% {

        opacity: 0;

    }

    8% {

        opacity: 1;

    }

    17% {

        opacity: 1;

    }

    25% {

        opacity: 0;

        transform: scale(1.05) ;

         z-index:9;

    }

    100% { opacity: 0 }

}

.main .icon {position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 20;}



/*index*/

#index .big_title {font-size: 50px; line-height: 1; margin-bottom: 20px;}

#index .big_title p {display: inline; box-sizing: border-box; border-bottom: 2px solid #000; padding: 0 40px;}

#index .big_title span {font-size: 70px;}

#index h2 {font-size: 20px;}

#index .box01 {background: url("img/index/box01_bg.jpg")top center no-repeat; padding: 100px 0; font-size: 18px; background-size: cover;}

#index .box01 ul {margin: 80px auto 40px; width: 1100px;}

#index .box01 li {box-sizing: border-box; border: 1px solid #a0a0a0; background-color: #fff; width: 365px; height: 100px; font-size: 20px; border-radius: 5px;}

#index .box01 li p {width: 100%;}

#index .box01 li img {margin-left: 30px;}

#index .box01 li:nth-child(2),#index .box01 li:nth-child(5) {margin: 0 2px;}

#index .box01 li:nth-child(n + 4) {margin-top: 2px;}

#index .box01 li a {height: 100%;}

#index .btn {width: 450px; padding: 20px 0; background-color: #000; font-size: 20px; line-height: 1; margin: 90px auto 0;}

#index #photo_list {margin-top: 50px; position: relative; z-index: 10;}

#index .photo_item {width: 32%; position: relative;}

#index .box02 .icon {position: absolute; right: -200px; top: -200px;}

#index .box02 .txt_box {

	position: absolute;

	top: 0;

	margin: 0;

	box-sizing: border-box;

	background: rgba(0,0,0,.6);

	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

	width: 100%; height: 100%;

	line-height: 1;

	font-size: 16px;

}

#index .box02 .type1 {

	overflow: hidden;

	

}

#index .box02 .type1:not(:hover) .txt_box {

	opacity: 0;

}

#index .box02 .txt01 {font-size: 25px;}

#index .box02 .txt02 {font-size: 40px; margin: 30px auto 20px;}

#index .box02 .hvr-trim {display: flex;}

#index .box02 .hvr-trim:not(:hover):before {opacity: 0;}

#index .box02 .hvr-trim:before {top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid #fff; transition-duration: .6s; -webkit-transition-duration: .6s; z-index: 10; transition-delay: .6s;}

#index .box03 {background-color: #fcf8f0;}

#index .box03 .txt_box {

	position: absolute;

	top: 0;

	margin: 0;

	box-sizing: border-box;

	background: rgba(0,0,0,.8);

	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);

	width: 200px; height: 100%;

	line-height: 1;

	font-size: 16px;

}

#index .box03 .type1 {

	overflow: hidden;

	position: relative;

}

#index .box03 .type1:not(:hover) .txt_box {

	opacity: 0;

	transform: translateX(-100%);

}

#index .box03 a:hover img {

	filter: alpha(opacity=100);

	opacity: 1;

}

#index .box03 .title_area {margin-bottom: 40px;}

#index .box03 .inner {margin-top: 40px;}

#index .box03 .left_area {margin-right: 40px;}

#index .box03 .txt01 {font-size: 18px;}

#index .box04 .swiper_all {margin-top: 50px;}

#index .box04 .swiper-button-prev {width: 50px; height: 50px; left: 25px;}

#index .box04 .swiper-button-next {width: 50px; height: 50px; right: 25px;}

#index .box04 .swiper-button-prev:after,#index .box04 .swiper-button-next:after {display: none;}

#index .box04 .swiper-button-prev:focus,#index .box04 .swiper-button-next:focus {outline:0;}

#index .box04 .swiper-container {overflow: inherit;}

#index .box04 .swiper-slide {margin: 0 50px;}

#index .box04 .img {margin-right: 20px; min-width: 500px;}

#index .box04 h3 {font-size: 30px;}

#index .box04 .title_area {margin-bottom: 20px;}

#index .box04 .txt01 {font-size: 16px; line-height: 1; background-color: #ff315f; display: inline; padding: 5px 15px;}

#index .box04 .txt01_02 {background-color: #2098d1; margin-left: 20px;}

#index .box04 .txt02 {margin: 20px auto;}

#index .box04 .inner a:nth-child(n + 7) {margin-top: 3px;}

#index .box05 {background-color: #fafbfb;}

#index .box05 a {width: 380px;}

#index .box05 a img {margin-bottom: 10px;}

#index .box05 a:nth-child(n + 4) {margin-top: 20px;}

#index .box05 .inner {margin-top: 50px;}

#index .box06 .over {margin: 25px auto 50px; font-size: 16px;}

#index .box06 .big {font-size: 50px; margin-right: 20px; line-height: 1;}

#index .box06 .voice_item {width: 285px; font-size: 17px; margin-right: 20px;}

#index .box06 .voice_item:nth-child(4) {margin-right: 0;}

#index .box06 .voice_img {margin-bottom: 10px;}

#index .box06 .voice_img img {width: 100%; height: 213px; object-fit: cover;}

#index .box06 h3 {line-height: 1.3;}



#index .box10 table{margin: 40px auto; font-size: 16px; width:1000px; border: 3px solid #f3f3f3;}

#index .box10 table th{background: #ff315f; color: #fff; text-align: center; line-height: 2.5; font-size: 20px;}

#index .box10 table td{font-size: 18px; padding: 20px; line-height: 2; vertical-align: middle;}

#index .box10 table td.price{font-size: 18px; border-left:1px dashed #000;}

#index .box10 table span.s{font-size: 12px;}







#index .box07 {background-color: #fafbfb; padding-top: 100px;}

#index .box07 h3 {font-size: 30px; box-sizing: border-box; border-left: 5px solid #000; padding-left: 10px; margin-bottom: 20px;}

#index .box07 .blog_item_area {margin: 50px auto;}

#index .box07 .box {box-sizing: border-box; border: 3px solid #f3f3f3; background-color: #fff; line-height: 2; padding: 20px; width: 480px; position: relative;}

#index .box07 .time {font-size: 16px; line-height: 1; margin-right: 20px;}

#index .box07 h4 {font-size: 16px; margin-bottom: 10px;}

#index .box07 .blog_item {box-sizing: border-box; border-bottom: 1px solid #000; padding-bottom: 20px; margin-bottom: 20px;}

#index .box07 .blog_item:nth-child(4) {border-bottom: none; padding-bottom: 0; margin-bottom: 0;}

#index .box07 .box .btn {background: url(img/index/box07_btn_bg.png)center right 5px no-repeat; background-color: #ff315f; width: 130px; line-height: 1; padding: 8px 0; font-size: 12px; position: absolute; right: 20px; top: 0; margin-top: 20px;}

#index .box07 .list02 .btn {background: url(img/index/box07_btn_bg.png)center right 5px no-repeat; background-color: #ff0039;}

#index .box07 .inner a {box-sizing: border-box; border: 1px solid #000; background-color: #fff; font-size: 16px; line-height: 1; width: 235px; height: 60px;}

#index .box07 .inner img {margin-right: 20px;}

#index .box07 table {flex: 1 0 50%; background: #000; font-size: 16px; width: 100%;}

#index .box07 th,#index .box07 td {box-sizing: border-box; border-bottom: 1px solid #acacac; line-height: 1.5; padding: 20px 0; font-weight: bold; vertical-align: middle;}

#index .box07 th {padding-left: 20px; padding-right: 40px; width: 150px; vertical-align: top}

#index .box07 .last th,#index .box07 .last td {border-bottom: none;}

#index .box07 iframe,

#index .box07 object,

#index .box07 embed {

flex: 1 0 50%; background: #fff; height: auto;

  -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 .box07 iframe:hover,

#index .box07 object:hover,

#index .box07 embed:hover {

  -webkit-filter: grayscale(0%);

  -moz-filter: grayscale(0%);

  -ms-filter: grayscale(0%);

  -o-filter: grayscale(0%);

  filter: grayscale(0%);

}

#index .box07 .inner02 {margin-top: 100px;}

#index .box08 {background: url("img/index/box08_bg.jpg")center center no-repeat;}

#index .box08 .title {font-size: 18px; line-height: 1;}

#index .box08 .title .big {font-size: 40px; margin-right: 20px;}

#index .box08 .bdr {content: ""; background-color: #fff; margin: 20px auto; width: 30px; height: 1px;}

#index .box08 h2 {font-size: 25px; margin-bottom: 25px;}

#index .box08 a {box-sizing: border-box; border: 1px solid #fff; height: 50px; width: 378px; margin-top: 20px;}

#index .box08 a img {margin-right: 10px;}

#index .box08 .tel {font-size: 40px;}

#index .box08 .mail {font-size: 20px;}

#index .box09 {background-color: #fcf8f0;}

#index .box09 .text {margin-top: 50px; font-size: 16px;}

#index .box09 .text:last-child {margin-top: 20px;}



/*========================

FOOTER

========================*/

footer {background-color: #fff; padding-top: 100px;}

footer .over img {margin-right: 20px;}

footer .link {margin: 30px auto 10px;}

footer li {font-size: 16px; margin-top: 20px; line-height: 1;}

footer .big_li {font-size: 18px;}

footer .box {font-size: 16px; line-height: 1; margin-left: 50px;}

footer .box img {margin: 10px auto 20px;}

footer .box .txt {margin-top: 20px;}

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

footer .copyright_area p {margin-right: 20px;}

footer .box .insta{width: auto;}



/*pankuzu*/

.pan {padding: 20px 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 {width: 1000px; margin: auto; box-sizing: border-box; border: 1px solid #000; background-color: #fff; padding-right: 10px;}

#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: 240px;

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;

}

}



/*

タイトル

*************/

.page_title {margin: 40px auto;}

.page_title p {

font-size: 30px;

line-height: 1;

display: inline-block;

box-sizing: border-box; border-bottom: 2px solid #000; padding-bottom: 15px;

}





/*

記事詳細ページ

***************/



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

}





/*ページネーション

*******************/

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

}

}