@charset "UTF-8";
/*
Theme Name: XeoryExtensionChild
Theme URI: https://xeory.jp/extension
Template: xeory_extension
Description: Xeory拡張子テーマ
Author: バズ部
Author URI: https://bazubu.com/
Version: 1.0.0
*/


:root{
	/*
    --base-bg-color: #fff8f4;
    --main-bg-color: #fff8f4;
	--section-bg-color: #fff8f4;
	*/
	--base-bg-color: #f0f0f0;
    --main-bg-color: #f0f0f0;
	--section-bg-color: #f0f0f0;
}

*,a{
	color: #333;
	letter-spacing: 1px;
}

body{
    background-color: var(--section-bg-color);
    background-image: none;
	font-size: 14px;
}

body *{
	font-family: "brandon-grotesque", 'Yu Gothic', sans-serif;
	font-weight: 400;
	font-style: normal;
}

a:hover {
    text-decoration: none;
}


@media screen and (max-width: 991px){
	
	body{
		font-size: 13px;
	}
}


@media screen and (max-width: 767px){
	
	body{
		font-size: 12px;
	}
}

img{
	filter: saturate(1.2);
}

.wrap{
	box-sizing: border-box;
}

#header {
    background-color: #f0f0f099 /* rgba(255,255,255, 0.6) */;
    background-image: none;
    position: sticky;
    top: 0;
	/* margin-top: 30px;
    margin-bottom: 30px; */
	margin: 0;
    z-index: 99999;
	/* border-bottom: 1px solid #999; */
}

#header #logo,
#header #header-right{
    float: none;
}

body #header .wrap{
    display : flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}


body #header .wrap:after{
    display: none;
}

#header #logo img{
	height: min(50%, 32px);
	max-height: 80px;
}

.wrap{
    width: 100%;
    padding: 2vw;
}

#gnav ul li a > div:before{
    content: "";
    position: absolute;
    left: 50%;
    top: -35px;
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    transform: translate(-50%, 0);
}

#gnav-sp #header-cont-content li a > div:after {
    content: "";
	/*
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    border-radius: 30px;
	*/
}

#gnav-sp .wrap a div{
    color: #f0f0f0;
	 font-size: 12px;
    padding-top: 6px;
}

#gnav-sp #header-cont-content li a > div:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 28px;
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    transform: translate(-50%, 0);
    filter: invert(1);
}

#gnav ul li a > div.profile-link:before,
#gnav-sp #header-cont-content li a > div.profile-link:before{
    background-image: url("/home/wp-content/themes/xeory_child/lib/img/icon_profile.svg");
}

#gnav ul li a > div.portfolio-link:before,
#gnav-sp #header-cont-content li a > div.portfolio-link:before{
    background-image: url("/home/wp-content/themes/xeory_child/lib/img/icon_portfolio.svg");
}

#gnav ul li a > div.price-link:before,
#gnav-sp #header-cont-content li a > div.price-link:before{
    background-image: url("/home/wp-content/themes/xeory_child/lib/img/icon_price.svg");
}

#gnav ul li a > div.flow-link:before,
#gnav-sp #header-cont-content li a > div.flow-link:before{
    background-image: url("/home/wp-content/themes/xeory_child/lib/img/icon_flow.svg");
}

#gnav ul li a > div.preset-link:before,
#gnav-sp #header-cont-content li a > div.preset-link:before{
    background-image: url("/home/wp-content/themes/xeory_child/lib/img/icon_precet.svg");
}

#gnav ul li a > div.info-link:before,
#gnav-sp #header-cont-content li a > div.info-link:before{
    background-image: url("/home/wp-content/themes/xeory_child/lib/img/icon_info.svg");
}

#gnav ul li a > div.contact-link:before,
#gnav-sp #header-cont-content li a > div.contact-link:before{
    background-image: url("/home/wp-content/themes/xeory_child/lib/img/icon_contact.svg");
}


#gnav ul li a > div.instagram-link:before,
#gnav-sp #header-cont-content li a > div.instagram-link:before{
	background-image: url("https://photoglaad.sakura.ne.jp/home/wp-content/themes/xeory_child/lib/img/icon_instagram.svg");
}

#gnav ul li a > div.line-link:before,
#gnav-sp #header-cont-content li a > div.line-link:before{
    background-image: url("https://photoglaad.sakura.ne.jp/home/wp-content/themes/xeory_child/lib/img/icon_line.svg");
}
/*
#gnav .instagram-link,
#gnav .line-link{
    width: 40px;
    height: 40px;
}

#gnav .instagram-link:before,
#gnav .line-link:before{
    content: "";
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
}
*/

@media screen and (max-width: 991px){
	
    #header{
        /* margin: 10px 0; */
        padding: 10px 0;
		margin: 0;
    }
    
    #header #logo{
        width: fit-content;
        height: 45px;
        position: relative;
        line-height: 40px;
        margin: 0 auto;
    }
    
    #header #logo img{
        max-height: 40px;
    }
        
    #header-nav-btn {
        width: fit-content;
        /* height: 50px; */
        position: absolute;
        right: 30px;
        top: 10px;
    }
    
    #header-nav-btn a{
         background: transparent;
         padding: 3px;
         line-height: 0;
    }

    #header-nav-btn .fa{
        position: relative;
        font-size: 11px;
		font-weight: 700;
        width: 40px;
        height: 35px;
    }
    #header-nav-btn .fa:before{
        display: none;
    }

    #header-nav-btn .fa span{
        position: absolute;
        top: 10px;
        left: 0;
        width: 40px;
        height: 1.5px;
        background-color: #67666a;
        border-radius: 2px;
    }
/*
    #header-nav-btn .fa span:nth-child(2){
        background: none;
        height: fit-content;
        top: 50%;
        transform: translate3d(0, -60%, 0);
		font-weight: 600;
        font-size: 1.2em;
        letter-spacing: 0;
    }
*/
    #header-nav-btn .fa span:nth-child(2){
        top: initial;
        bottom: 10px;
    }

	#header-nav-btn.open .fa span:nth-child(1){
        animation-name: openMenuTop;
        animation-fill-mode:forwards;
        animation-duration:1s;
        animation-iteration-count: 1;
        animation-timing-function:ease;
        animation-delay: 0s;
        animation-direction:normal;        
	}
/*
	#header-nav-btn.open .fa span:nth-child(2){
        animation-name: openMenuMiddle;
        animation-fill-mode:forwards;
        animation-duration:1s;
        animation-iteration-count: 1;
        animation-timing-function:ease;
        animation-delay: 0s;
        animation-direction:normal;        
	}
*/
	#header-nav-btn.open .fa span:nth-child(2){
    	animation-name: openMenuBottom;
        animation-fill-mode:forwards;
        animation-duration:1s;
        animation-iteration-count: 1;
        animation-timing-function:ease;
        animation-delay: 0s;
        animation-direction:normal; 
	}

    
    @keyframes openMenuTop{
      0% {
        top: 10px;
      }

      50% {
        top: calc(50% - 1px);
        transform: rotate(0);
      }
    
      100% {
        top: calc(50% - 1px);
        transform: rotate(20deg);
      }
    }

    @keyframes openMenuMiddle{
      0% {
        opacity: 1;
      }
        40% {
        opacity: 1;    
        }
      50% {
        opacity: 0;
      }
    
      100% {
        opacity: 0;
      }
    }

    @keyframes openMenuBottom{
      0% {
        bottom: 10px;
      }

      50% {
        bottom: calc(50% - 1px);
        transform: rotate(0);
      }
    
      100% {
        bottom: calc(50% - 1px);
        transform: rotate(-20deg);
      }
    }
}

@media screen and (max-width: 991px){
	body:has(#wpadminbar) #gnav-sp{
		top: calc(65px + 46px);
	}
	
	#gnav-sp{
		top: 65px;
	}
	
	#gnav-sp .wrap{
		padding: 50px 0;
	}

    #gnav-sp #header-cont-content ul{
        padding-left: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;
    }
    #gnav-sp #header-cont-content ul:after{
        content: "";
        width: 30%;
        display: block;
    }
    #gnav-sp #header-cont-content li{
        width: 30%;
        padding-bottom: 20px;
    }
    #gnav-sp #header-cont-content li a{
        text-align: center;
        padding-top: 82px;
    }

    #gnav-sp #header-cont-content li a span{
        display: none;
    }
    #gnav-sp #header-cont-content li a:before {
        content: "";
		/*
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #f0f0f0;
        border-radius: 30px;
		*/
    }
	
}




.post-content{
    padding: 0;    
}

.breadcrumb-area{
    padding: 0 40px;    
}

.breadcrumb-area .wrap{
    margin: 0;   
}

@media screen and ( max-width: 767px ){
	.breadcrumb-area{
		padding: 0 10px;    
	}
	
	.breadcrumb li{
		margin-bottom: 10px;
	}
}
body #header .wrap{
    width: 95%;
	padding:0;
}

#header-right {
  height: auto;
}


#content {
  padding: 100px 0;
}

body > #content{
	filter: saturate(80%);
}

body.page #content,
body.tax-album_cat #content,
body.single-album #content{
	background-color: var(--main-bg-color);
	padding: 0;
}

.post-content p, .post-content ul, .post-content ol, .post-content dl, .post-content blockquote, .post-content pre, .post-content table {
    margin-bottom: 2em;
    padding-left: 2em;
    padding-right: 2em;
    letter-spacing: 0.1em;
    line-height: 2em;
    font-size: 1em;
}



#gnav{
   	background: none;
    background-color: transparent;
    background-image: none;
}

#header ul{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

#gnav ul li{
    margin: 20px 0;
	padding-top: 30px;
}

#gnav ul li:last-child{
    border-right: none;
}

#gnav ul li a{
	background-color: transparent;
    background-image: none;
    color: #333;
    padding: 7px 7px;
    margin: 8px 1vw;
    position: relative;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
    line-height: 1.2em;
    font-size: 13px;
}

#gnav ul li a span{
    display: block;
    color: #333;
    font-weight: 200;
    font-size: 10px;
    letter-spacing: 1px;    
}

#gnav ul li:hover a{
		color: #333;
		background: transparent;
}

#gnav ul li a:after{
	 content: "";
    position: absolute;
    bottom: -10px;
    left: 5%;    
    width: 90%;
    height: 1px;
    background-color: #999;
	 opacity: 0;
	 transition: 0.7s;
}

#gnav ul li a:hover:after{
	 opacity: 1;
    bottom: -2px;
}



#gnav ul li.current-menu-item a{
	background-color: transparent;
}


#gnav ul li.current-menu-item a:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;    
    width: 100%;
    height: 1px;
    background-color: #999;
}





/**
 * スクロールバー
 * */
.scroll-down{
    position: absolute;
    z-index: 99;
    height: 200px;
    width: 3px;
	top: calc(100vh - 150px);
    top: calc(100svh - 150px);
    right: 6vw;
    background-color: #939393;
}

@media screen and ( max-width: 767px ){
	.scroll-down {
		top: calc(50vw + 100px);
	}
}

.scroll-down:before{
    content: "scroll down";
    width: 200px;
    text-align: left;
    position: absolute;
    color: #939393;
    left: 0;
    top: 0;
    transform: rotate(90deg) translate(0,-100%);
    transform-origin:left top;
}


.scroll-down:after{
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    height: 50px;
    width: 3px;
    background-color: #dadada;
    animation-name: scrollbar;
    animation-fill-mode:backwards;
    animation-duration:3s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
    animation-delay: 0.5s;
    animation-direction:normal;
}


@keyframes scrollbar{
    0% {
        top: 0px;
        height: 0;
    }
    
    20% {
        top: 0;
        height: 50px;
    }

    80% {
        top: calc(100% - 50px);
        height: 50px;
    }  

    100% {
        height: 0px;
        top: 100%;
    }
}

/**
 * section基本設定
 */

#main > .main-inner > section{
    position: relative;
    padding: 50px 0;
    padding-bottom: min(10vw, 50px);
}

.home .main-inner:before {
	content: "";
    position:absolute;
    top: 0;
    left: 0;
	 transform: translate(0, -55%);
    z-index: -1;
    display: inline-block;
    height: 15vw;
    width: 100vw;
	-webkit-mask: url("./lib/img/portfolio_before.svg");
	mask: url("./lib/img/portfolio_before.svg");
	background-color: var(--base-bg-color);
	-webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
	 mask-repeat: no-repeat;
    vertical-align: middle;    
}


/*
#main > .main-inner > section:before{
    content: "";
    position:absolute;
    top: 0;
    left: 0;
	 transform: translate(0, -55%);
    z-index: -1;
    display: inline-block;
    height: 15vw;
    width: 100vw;
}
*/
/*
#main > .main-inner > section:before{
	content: "";
    position: absolute;
    top: -6px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296.66 113.12"><path d="M203.14,7.69C181.87,1.86,159.67-.6,137.64.12c-22.13.73-44.31,4.58-65.24,11.88-18.84,6.57-36.82,16.23-51.94,29.33-7.21,6.25-13.6,13.74-17.48,22.54-1.54,3.49-2.79,7.19-2.96,11.03-.22,4.77,1.26,9.57,3.53,13.72,5.02,9.17,13.87,15.02,23.54,18.4s19.71,4.8,29.68,5.6c19.39,1.56,39.09-.57,57.77-5.96s36.33-14.01,51.86-25.59c3.91-2.92,7.7-6,11.32-9.27,3.43-3.1,7.46-6.19,9.8-10.25s2.41-9.77-.78-13.47c-2.79-3.22-7.93-3.03-10.1.81-1.96,3.48-.34,7.94,2.15,10.68,1.52,1.68,3.59,2.59,5.58,3.6,2.47,1.27,5.01,2.5,7.68,3.29,4.99,1.47,10.34,2.13,15.49,2.78s10.33,1.04,15.52,1.15c20.39.47,41.02-3.07,59.73-11.28,4.39-1.93,8.65-4.13,12.75-6.61,2.59-1.56.23-5.63-2.37-4.06-16.04,9.69-34.52,15.01-53.13,16.69-9.75.88-19.58.8-29.31-.22-4.78-.5-9.53-1.25-14.24-2.23-2.41-.5-4.72-1.15-6.96-2.19-2.11-.98-4.6-1.95-6.46-3.34-1.16-.87-2.03-2.19-2.41-3.58-.27-.99-.29-2.17.34-2.74.93-.83,1.85-.18,2.47.68,1.14,1.58,1.29,3.8.82,5.63-1.04,4.06-5.11,6.91-8.03,9.62-3.31,3.06-6.72,6-10.28,8.76-14.3,11.09-30.64,19.57-47.85,25.12s-35.42,8.24-53.56,7.7c-9.17-.27-18.34-1.33-27.3-3.35s-18.65-5.5-25.26-12.63c-5.54-5.98-8.77-14.05-6.44-22.07,2.39-8.21,7.79-15.64,13.79-21.59,12.73-12.62,29.02-22.09,45.51-28.85,19.17-7.86,39.76-12.48,60.37-14.29,20.66-1.81,41.6-.85,61.95,3.18,4.93.98,9.83,2.14,14.68,3.47,2.92.8,4.17-3.73,1.25-4.53h0Z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(135vw, 520px);
    transform: translate(-68px, 0);
    opacity: 0.04;
    height: 210px;
    width: 100vw;
}
*/

#main > .main-inner > section:first-child:before{
	display: none;	
}

#main > .main-inner > section h2{
    margin: 0 auto 100px;
    width: fit-content;
    color: #67666a;
    font-size: 2.5em;
    letter-spacing: 8px;
	transform: translate(-4px, 0);
    text-align: center;
	font-weight: 600;
}

#main > .main-inner > section h2 span{
    font-size: 0.7rem;
    display: block;
}

.one-column #content .wrap{
	width: 100%;
	max-width: 100vw;
}

.one-column #content .wrap .post-content{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.page-id-700.one-column #content .wrap .post-content,
.tax-album_cat.one-column #content .wrap .post-content
{
	max-width: 100%;
}

hr.wp-block-separator{
	display: none;
}

@media screen and ( max-width: 1200px ){
	.one-column #content .wrap{
		margin: 0 auto;
	}
}

@media screen and ( max-width: 991px ){
	.one-column #content .wrap{
		margin: 0 auto;
	}
	
	#main > .main-inner > section:before{
		background-position: left;
	}
}

@media screen and ( max-width: 767px ){
	#main > .main-inner > section h2{
		margin-bottom: 50px;
	}
	.one-column #content .wrap{
		margin: 0 auto;
	}
}

/*
 * インスタグラム
 * */
#sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
    display: none !important;
}

#sb_instagram #sbi_load .sbi_follow_btn a{
    background-color: transparent !important;
    border: 1px solid #f0f0f0;
    position: relative;
    opacity: 0.6;
}

#sb_instagram #sbi_load .sbi_load_btn{
	display: none;
}

/*
 * 　コンセプト
 * */
section#concept {
    background-color: var(--section-bg-color);
}

section#concept .wrap{
	overflow: hidden;
}


/*
section#concept:after {
    -webkit-mask: url("./lib/img/portfolio_after.svg");
    mask: url("./lib/img/portfolio_after.svg");
    background-color: #eee0d8;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    vertical-align: middle;
	opacity: 0.5;
}
*/

section#concept .concept_text{
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
}

section#concept .concept_text p {
    font-size: min(3vw, 13pt);
    letter-spacing: 3px;
    line-height: 2em;
}

section#concept{
	opacity: 1;
	transition: 1s;
}

section#concept > * {
    opacity: 0;
    transition: 1s;
	transition-delay:0.5s;
}


/*
 * 　ポートレート
 * */
section#portfolio {
    background-color: var(--section-bg-color);
}

section#portfolio .wrap{
	overflow: hidden;
}
/*
section#portfolio:before {
	-webkit-mask: url("./lib/img/portfolio_before.svg");
	mask: url("./lib/img/portfolio_before.svg");
	background-color: #eee0d8;
	-webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
	 mask-repeat: no-repeat;
    vertical-align: middle;    
}

section#portfolio:after {
    -webkit-mask: url("./lib/img/portfolio_after.svg");
    mask: url("./lib/img/portfolio_after.svg");
    background-color: #eee0d8;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    vertical-align: middle;
	opacity: 0.5;
}
*/

.category_list{
    margin-bottom: 40px;
}

.post-content .category_list ul{
	width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 3vw;
}

.category_list ul li{
    margin: 10px 10px 25px;
    position: relative;
    z-index: 0;
}

.category_list ul li a{
    border: 2px solid #67666a;
    border-radius: 100px;
    padding: 10px 25px;
    letter-spacing: 3px;
    font-size: 0.8em;
    font-weight: 600;
}

.post-content .category_list ul li{
	width: calc(48%);
    height: auto;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    position: relative;
    margin: 0;
    background-color: #f6f6f6;
    padding: 3%;
    filter: drop-shadow(1px 1px 1px #ddd);
}

.post-content .category_list ul li a{
	border: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.post-content .category_list ul li a img{
	width: 100%;
    height: auto;
    object-fit: cover;
    border: none;
    opacity: 0.9;
    aspect-ratio: 1 / 1;
    margin-bottom: 5%;
}

.post-content .category_list ul li a span{
    left: 50%;
    top: 50%;
    color: #666;
    font-size: 1rem;
    font-weight: 600;
}


.post-content .category_list ul li:not(.all, :has(img)) a{
    position: relative;
}
.post-content .category_list ul li:not(.all, :has(img)) a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
}

.post-content .category_list ul li:not(.all, :has(img)) a span{
    position: absolute;
    left: 50%;
    top: 86%;
    transform: translate(-50%, 0);
}

.post-content .category_list ul li.all{
    width: 100%;
    height: fit-content;
    aspect-ratio: auto;
}

.post-content .category_list ul li:not(.all){
    display: none;
}

.post-content .category_list ul li.active{
    display: initial;
}

.post-content .category_list ul li.all span{
    position: initial;
}

@media screen and ( max-width: 1200px ){

}

@media screen and ( max-width: 991px ){
	.loop-cont article{
	   	width: 32vw;
	}
}

@media screen and ( max-width: 767px ){
	
	section h2{
		    margin: 0 auto 70px;
	}
	.loop-cont article{
	   	width: 32vw;
	}
	
	.category_list ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
		padding: 0;
	}
	.category_list ul li{
		margin: 3vw 3vw;
		width: fit-content;
	}
	.category_list ul li a{
		font-size: 0.8em;
        padding: 2vw 3vw;
        letter-spacing: 1px;
		white-space: nowrap;
	}
	.category_list ul li:after{
		height: 150%;
		transform: translate(3px, -1.5px);
	}
}

.loop-cont {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}

.loop-cont:after {
    content: "";
    display: block;
    width: 30vw;
}

.loop-cont article{
	 width: 19.3%;
    margin-bottom: 20px;
    border: 2px solid #f0f0f0;
    position: relative;
}

.loop-cont article p.p_category {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: -19px;
    transform: translate(-50%, 50%);
    background-color: rgba(255, 255, 255, 1);
    padding: 2px 12px;
    border-radius: 100px;
    border: 1px solid #f0f0f0;
    font-size: 10px;
    filter: drop-shadow(0px 0px 2px #ccc);
}

@media screen and ( max-width: 1200px ){
	.loop-cont article{
	   	width: 31vw;
	}
}

@media screen and ( max-width: 991px ){
	.loop-cont article{
	   	width: 31vw;
	}
}

@media screen and ( max-width: 767px ){
	.loop-cont article{
		width: 31.5vw;
        margin-bottom: 5vw;
	}
}





.loop-cont article a:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: 0.3s;
}


.loop-cont article p{
    display: none;
}

.loop-cont article h3{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    width: 100%;
    color: #f0f0f0;
    transform: translate(0, -50%);
    transition: 0.7s;
    opacity: 0;
}

.loop-cont article a:hover:before{
   opacity: 1;
}

.loop-cont article:hover h3{
    opacity: 1;
}

.view-more {
	 width: fit-content;
    margin: 0px auto;
    position: relative;
    z-index: 0;
}

section:not(#profile) .view-more {
	    transform: translate(50%, -30%);
}

/*
.view-more:after{
	content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    z-index: -1;
    border-radius: 5px;
    background-color: #67666a;
}
*/

.view-more a{
	background-color: #efe8e8;
	display: block;
    border: 1px solid #67666a;
}

.view-more .button{
    padding: 15px 20px;
    color: #f0f0f0;
    letter-spacing: 5px;
    font-size: 12px;
    z-index: 0;
    border-radius: 5px;
}

.view-more > h2 > a > .button {
    background-color: #ffffff;
    font-size: 0.45em;
    border-radius: 100px;
    padding: 0.7em 2.0em 0.3em;
    line-height: 1em;
	letter-spacing: 0.2em;
}

.view-more:has(h2 > a > .button){
    margin: 0 auto;
    transform: translate(0,-50%);
}

.view-more:has(h2 > a > .button):after{
    display: none;
}

.view-more > h2 > a > .button > span{
    font-size: 0.6rem !important;
}


/*
 * プロフィール
 * */
section#profile {
    background-color: var(--section-bg-color);
}
/*
section#profile:before {
    -webkit-mask: url("./lib/img/profile_before.svg");
    mask: url("./lib/img/profile_before.svg");
	background-color: #868e75;
	-webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
	 mask-repeat: no-repeat;
    vertical-align: middle;    
}

section#profile:after {
    -webkit-mask: url("./lib/img/profile_after.svg");
    mask: url("./lib/img/profile_after.svg");
	background-color: #f0f0f0;
	-webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
	 mask-repeat: no-repeat;
    vertical-align: middle;
	opacity: 0.5;
}
*/



.profile_wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}


.profile_wrap .profile_image{
    width: 80%;
    max-width: 500px;
    overflow: hidden;
    padding: 2vw;
    filter: drop-shadow(4px 5px 5px #60404070);
}

.profile_wrap .profile_image img{
    border: 3px solid #ffffff87;
    /* border-radius: 66% 34% 49% 51% / 44% 54% 46% 56%; */
    /* filter: drop-shadow(1px 4px 0px #604040); */
}

.profile_wrap .profile_image .img_wrap{
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}

.profile_wrap .profile_image .img_wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile_text {
    width: 100%;
    max-width: 500px;
}

.profile_wrap .profile_text .name{
    margin: 50px 0;
	 text-align: center;
}

.profile_wrap .profile_text .ja span{
    font-size: 2em;
    letter-spacing: 0.4em;
    font-weight: 600;
}

.profile_wrap .profile_text .en span{
    font-size: 1em;
    letter-spacing: 0.4em;
    font-weight: 200;
}


.profile_wrap .profile_text .ja span:first-child,
.profile_wrap .profile_text .en span:first-child{
    margin-right: 1em;
}

.instagram_feed {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.instagram_feed .feed_head{
    display: block;
    font-size: 1em;
    letter-spacing: 5px;
    font-weight: 400;
    border-radius: 100px;
    text-align: center;
    padding: 10px 30px;
    position: relative;
}
.instagram_feed .feed_head:before,
.instagram_feed .feed_head:after{
    content: "";
    position: absolute;
    width: calc(50% - 5em);
    height: 1px;
    background-color: #67666a;
    top: calc(50% - 1px);
}
.instagram_feed .feed_head:before{
    left: 0;
}
.instagram_feed .feed_head:after{
    right: 0;
}

.instagram_feed .sb_instagram_header{
    display: none;
}



#sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn{
    position: relative;
}

#sb_instagram #sbi_load.sbi_load_btn, #sb_instagram .sbi_follow_btn a{
    padding: 2vw 5vw;    
}


#sb_instagram #sbi_load .sbi_follow_btn a{
    border-color: #333;
    border-radius: 200px;
}
#sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn a > span{
    color: #333;
}

#sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 90%;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translate(0.3em, 0.2em);
    border-radius: 200px;
    bottom: 0;
    right: 0;
}


/* 
 * その他
 * */
section#other {
	background-color: var(--section-bg-color);
}

/*
section#other:before {
	-webkit-mask: url("./lib/img/other_before.svg");
	mask: url("./lib/img/other_before.svg");
	background-color: #747e8a;
	-webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
	 mask-repeat: no-repeat;
    vertical-align: middle;    
}


section#other:after {
	-webkit-mask: url("./lib/img/other_after.svg");
	mask: url("./lib/img/other_after.svg");
	background-color: #f0f0f0;
	-webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
	 mask-repeat: no-repeat;
    vertical-align: middle;    
	opacity: 0.5;
}
*/

section#other .wrap .img{
    border: 5px solid #f0f0f0;
    filter: drop-shadow(0px 3px 3px #00000050);
	width: 70%;
    max-width: 500px;
    margin: 0 auto;
}


section#other .wrap .about{
    margin: 30px 0;
    font-size: 1.1em;
    letter-spacing: 2px;
    line-height: 2em;
}

@media screen and ( max-width: 767px ){
}


/*
 * コンタクト
 * */
section#contact {
    background-color: var(--base-bg-color);
}

body.home #front-contact{
	background: initial;
}

body.home.one-column #content section#contact .wrap{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
        
}

body.home.one-column #content section#contact *{
    color: #333;
}
    

body.home.one-column #content section#contact .input-contact{
    padding: 4vw;
    position: relative;
}


body.home.one-column #content section#contact .input-contact input,
body.home.one-column #content section#contact .input-contact textarea{
    border: none;
    background-color: #fff;
    max-width: 100%;
	border-radius: 20px;
}


body.home.one-column #content section#contact label{
    letter-spacing: 2px;
    margin-bottom: 10px;
	font-size: 0.8em;
}


body.home.one-column #content section#contact .input-contact button[type="submit"]{
    border: 1px solid #666;
    font-weight: 600;
    padding: 15px 30px;
    margin: 10px auto;
    width: fit-content;
    display: block;
    background-color: #f3eeee;
	letter-spacing: 2px;
	position: relative;
	border-radius: 200px;
}

body.home.one-column #content section#contact .input-contact button[type="submit"]:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #dccfcf;
    left: 5px;
    top: 5px;
	border-radius: 200px;
    mix-blend-mode: darken;
}


div.wpforms-container-full .wpforms-form .wpforms-field{
    margin-bottom: 30px;
}

/* ----------------------------------------
* breadcrumb
---------------------------------------- */
.breadcrumb-area {
	background-color: var(--main-bg-color);
}

.post-header{
	border-bottom: 0;
}

/* ----------------------------------------
* main
---------------------------------------- */
.cat-content,
article.post,
article.page {
	background-color: var( --main-bg-color);
}

section.post-content:before {
	display: none;
}

.cat-content .post-header,
article.page .post-header {
	background-color: var( --main-bg-color);
	padding: 56px 20px 30px;
}

.one-column #content .wrap #main{
	background-color: var(--base-bg-color);
}

.cat-content, 
article.post, 
article.page{
	border: none;
}

@media screen and ( max-width: 767px ){
	article.page .post-content {
		padding: 1vw;
	}
}


.post-content > * > * > .wp-block-columns{
	transform: translate(0px, 80px);
    opacity: 0;
    transition: 1s;
	transition-timing-function: ease-in-out;
}

.post-content > * > * > .wp-block-columns.in{
	transform: translate(0px, 0px);
    opacity: 1;
}


/* ----------------------------------------
* home
---------------------------------------- */
body.home.one-column #content .wrap{
	width: 100%;
	max-width: 100%;
}

body.home #content *,
body.home #content p{
	color: #67666a;
}

body.home .wrap{
	width:95%;
}

body.home #main_visual {
    background-color: var(--base-bg-color);
    background-image: none;
	height: 50vw;
    transition: 1s;
}

body.home section{
	padding-top: 0;
}

/* スライダー */


#main_visual .wrap{
	margin: 0 auto;
    width: 100%;
    padding: 0;
    height: 100svh;
    position: absolute;
    top: 0;
}

#main_visual .metaslider {
    position: fixed;
    top: 0;
}

body .metaslider .flexslider ul.slides li{
    height: 100vw;
}

body .metaslider.width .flexslider ul.slides li img {
    width: 100%;
    height: auto;
    position:absolute;
    top: 50%;
    transform: translate(0, -50%);
}

body .metaslider.height .flexslider ul.slides li img {
	height: 100vw;
    width: auto;
    position:absolute;
    left: 50%;
    transform: translate(-50%, 0);
	
}


/* ----------------------------------------
* filter
---------------------------------------- */
.noise{
	display: none;
    position: fixed;
    top: 0;
    left:0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 99999;
    pointer-events: none;
}

.noise::after {
   /* animation: noise 8s steps(10) infinite; */
  background: url("./lib/img/noise.svg");
  background-repeat: repeat;
  background-size: 100px 100px;
  content: "";
  display: block;
  height: 300%;
  left: -100%;
  position: absolute;
  top: -100%;
  width: 300%;
  z-index: 9;
  opacity: 0.3;
	filter: brightness(1.5);
}

@keyframes noise {
  to {
    background-position: 0 0;
  }
  10% {
    background-position: -5% -10%;
  }
  20% {
    background-position: -15% 5%;
  }
  30% {
    background-position: 7% -25%;
  }
  40% {
    background-position: 20% 25%;
  }
  50% {
    background-position: -25% 10%;
  }
  60% {
    background-position: 15% 5%;
  }
  70% {
    background-position: 0 15%;
  }
  80% {
    background-position: 25% 35%;
  }
  90% {
    background-position: -10% 10%;
  }
}


/* ----------------------------------------
* filter
---------------------------------------- */
.pagination ul.page-numbers {
  	display: flex;
    flex-direction: row;
	flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 20px auto;
    padding: 20px 40px;
    border-radius: 50px;
    background: var(--base-bg-color);
    width: fit-content;
    /* box-shadow: inset 5px 5px 10px #e1dada, inset -5px -5px 10px #f4efef; */
    
}

.pagination ul.page-numbers li{
	margin: 10px 10px;
    position: relative;
	width: 40px;
   height: 40px;
}


.pagination ul.page-numbers li a,
.pagination ul.page-numbers li span{	
	width: 100%;
	height: 100%;
   display: block;
   float: none;
   margin: 0;
   padding: 0;
	border-radius: 150px;
   background: #f1ecec;
   box-shadow:  7px 7px 15px #d2cdcd,
             -7px -7px 15px #ffffff;
   text-decoration: none;
   position: absolute;
   color: #383838;
	line-height: 40px;
   text-align: center;
	font-size: 0.8em;
	font-weight: 600;
}

.pagination ul.page-numbers li .current{
    box-shadow: inset 5px 5px 10px #e1dada,
                inset -5px -5px 10px #fffafa;
}

@media screen and ( max-width: 767px ){
	.pagination ul.page-numbers{
		padding: 3vw 0;
	}
}

/* ----------------------------------------
* アルバムカテゴリー
---------------------------------------- */


.album_list ul{
    display: flex;
    list-style: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}


.album_list ul li{
    width: 19.2%;
    margin-right: 1%;
    margin-bottom: 1%;
	 position: relative;
    border: 2px solid #f0f0f0;
    filter: drop-shadow(0px 2px 4px #ccc);
    margin-bottom: 40px;
}

.album_list ul li:nth-child(5n){
    margin-right: 0;
}


.album_list ul li span.category{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    background-color: rgba(255,255,255, 1);
    padding: 2px 12px;
    border-radius: 100px;
    border: 1px solid #f0f0f0;
    font-size: 14px;
    filter: drop-shadow(0px 0px 2px #ccc);
}

.album_list ul li span.title{
    position: absolute;
    left:0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.4);
    color: #f0f0f0;
	opacity: 0;
	transition: cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.3s;
}

.album_list ul li:hover span.title{
	opacity: 1;
}

@media screen and ( max-width: 767px ){
	.album_list ul li{
		width: 48%;
		margin-right: 2%;
	}
	
	.p-filter__block label span{
		font-size:0.8em;
	}
	
	.album_list ul li span.category{
   	 font-size: 0.8em;
	}
	
	
	.album_list ul li:nth-child(5n) {
    margin-right: 2%;
	}
	
	.album_list ul li:nth-child(2n) {
    margin-right: 0;
	}
}



/* ----------------------------------------
* 個別ページベース
---------------------------------------- */

@media screen and (max-width: 991px){
	.post-header {
		padding: 16px 12px 0;
	}
}

/* ----------------------------------------
* アルバムシングル
---------------------------------------- */


.single-album #content .wrap{
	width: 100%;
	max-width: 100vw;
}

.single-album .post-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
	 width: fit-content;
	margin: 0 auto;
	border-bottom: 0;
}



.single-album .post-header .post-thumbnail{
	width: 50%;
	max-width: 400px;
	position: relative;
}

.single-album .post-header .post-thumbnail img{
    filter: drop-shadow(2px 4px 6px #999);
    border: 10px solid #f0f0f0;
}

/*
.single-album .post-header .post-thumbnail:before{
    content: "";
    position: absolute;
    width: 95%;
    height: 95%;
    background-color: #eee;
    border: 10px solid #f0f0f0;
    transform: translate(-5px, -5px) rotate(0deg);
    filter: drop-shadow(2px 4px 6px #999);  
}
*/

.single-album .post-header .header-info{
    padding: 0 3vw;
}


@media screen and ( max-width: 767px ){
	.single-album .post-header {
		flex-direction: column;
		align-items: flex-start;
		padding: 5vw;
	}
	
	.single-album .post-header .post-thumbnail{
		width: 100%;
		margin-bottom: 50px
	}
}

.loading{
    margin-top: 50px;
    width:200px;
    height:60px;
    position: relative;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

.loading .circle{
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: #cebbbb;
    left:15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.loading .circle:nth-child(2){
    left:45%;
    animation-delay: .2s;
}
.loading .circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.loading .shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.loading .shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.loading .shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.loading span{
    position: absolute;
    top:75px;
    font-family: 'Lato';
    font-size: 20px;
    letter-spacing: 12px;
    color: #ba9d9d;
    left:15%;
}

.photonic-loading{
	display: none !xsxf;
}

@media screen and ( max-width: 767px ){
	.loading{
		transform: translate(-50%, -50%) scale(0.7);
	}
}


#footer{
	overflow: hidden;
	position: relative;
	border-top: 8px solid #dcdcdc;
}

/**************************
 *  アニメーション
 * ***********************/
/** トップページ */
.loop-cont .fromRightToLeft,
.album_list > ul > li{
    transform: translate(50%, 0) rotate(-5deg);
    opacity: 0;
    transition: 1s;
    transition-property: translate opacity;
    transition-timing-function: ease-in-out;
}

.loop-cont .fromRightToLeft:nth-child(1),
.album_list > ul > li:nth-child(1){
    transition-delay: 0.1s;
}
.loop-cont .fromRightToLeft:nth-child(2),
.loop-cont .fromRightToLeft:nth-child(6),
.album_list > ul > li:nth-child(2),
.album_list > ul > li:nth-child(6){
    transition-delay: 0.2s;
}
.loop-cont .fromRightToLeft:nth-child(3),
.loop-cont .fromRightToLeft:nth-child(7),
.album_list > ul > li:nth-child(3),
.album_list > ul > li:nth-child(7){
    transition-delay: 0.3s;
}
.loop-cont .fromRightToLeft:nth-child(4),
.loop-cont .fromRightToLeft:nth-child(8),
.album_list > ul > li:nth-child(4),
.album_list > ul > li:nth-child(8){
    transition-delay: 0.4s;
}
.loop-cont .fromRightToLeft:nth-child(5),
.loop-cont .fromRightToLeft:nth-child(9),
.album_list > ul > li:nth-child(5),
.album_list > ul > li:nth-child(9){
    transition-delay: 0.5s;
}
.loop-cont .fromRightToLeft:nth-child(10),
.album_list > ul > li:nth-child(10){
    transition-delay: 0.6s;
}

@media screen and ( max-width: 1200px ){
	.loop-cont .fromRightToLeft:nth-child(1),
	.album_list > ul > li:nth-child(1){
    	transition-delay: 0.1s;
	}
	.loop-cont .fromRightToLeft:nth-child(2),
	.loop-cont .fromRightToLeft:nth-child(4),
	.album_list > ul > li:nth-child(2),
	.album_list > ul > li:nth-child(4){
		transition-delay: 0.2s;
	}
	.loop-cont .fromRightToLeft:nth-child(3),
	.loop-cont .fromRightToLeft:nth-child(5),
	.loop-cont .fromRightToLeft:nth-child(7),
	.album_list > ul > li:nth-child(3),
	.album_list > ul > li:nth-child(5),
	.album_list > ul > li:nth-child(7){
		transition-delay: 0.3s;
	}
	.loop-cont .fromRightToLeft:nth-child(6),
	.loop-cont .fromRightToLeft:nth-child(8),
	.loop-cont .fromRightToLeft:nth-child(10),
	.album_list > ul > li:nth-child(6),
	.album_list > ul > li:nth-child(8)
	.album_list > ul > li:nth-child(10){
		transition-delay: 0.4s;
	}
	.loop-cont .fromRightToLeft:nth-child(9),
	.loop-cont .fromRightToLeft:nth-child(11),
	.loop-cont .fromRightToLeft:nth-child(13),
	.album_list > ul > li:nth-child(9),
	.album_list > ul > li:nth-child(11),
	.album_list > ul > li:nth-child(13){
		transition-delay: 0.5s;
	}
	.loop-cont .fromRightToLeft:nth-child(12),
	.loop-cont .fromRightToLeft:nth-child(14),
	.loop-cont .fromRightToLeft:nth-child(16),
	.album_list > ul > li:nth-child(12),
	.album_list > ul > li:nth-child(14),
	.album_list > ul > li:nth-child(16){
		transition-delay: 0.6s;
	}
}

/*
@media screen and ( max-width: 767px ){
	.loop-cont .fromRightToLeft:nth-child(1),
	.album_list > ul > li:nth-child(1){
    	transition-delay: 0.1s;
	}
	.loop-cont .fromRightToLeft:nth-child(2),
	.loop-cont .fromRightToLeft:nth-child(3),
	.album_list > ul > li:nth-child(2),
	.album_list > ul > li:nth-child(3){
		transition-delay: 0.2s;
	}
	.loop-cont .fromRightToLeft:nth-child(4),
	.loop-cont .fromRightToLeft:nth-child(5),
	.album_list > ul > li:nth-child(4),
	.album_list > ul > li:nth-child(5){
		transition-delay: 0.3s;
	}
	.loop-cont .fromRightToLeft:nth-child(6),
	.loop-cont .fromRightToLeft:nth-child(7),
	.album_list > ul > li:nth-child(6),
	.album_list > ul > li:nth-child(7){
		transition-delay: 0.4s;
	}
	.loop-cont .fromRightToLeft:nth-child(8),
	.loop-cont .fromRightToLeft:nth-child(9),
	.album_list > ul > li:nth-child(8),
	.album_list > ul > li:nth-child(9){
		transition-delay: 0.5s;
	}
	.loop-cont .fromRightToLeft:nth-child(10),
	.loop-cont .fromRightToLeft:nth-child(11),
	.album_list > ul > li:nth-child(10),
	.album_list > ul > li:nth-child(11){
		transition-delay: 0.6s;
	}
	.loop-cont .fromRightToLeft:nth-child(12),
	.loop-cont .fromRightToLeft:nth-child(13),
	.album_list > ul > li:nth-child(12),
	.album_list > ul > li:nth-child(13){
		transition-delay: 0.7s;
	}
}
*/
.loop-cont.in .fromRightToLeft,
.album_list.in > ul > li{
    transform: translate(0,0) rotate(0);
    opacity: 1;
}

.pagetop {
    bottom: 30px;
    right: 30px;
}

.footer-02 {
    background-color: #c8c8c8;
    padding-bottom: 100px;
}

.footer-02 .footer-copy{
    color: #fff;
}