/*
Theme Name: Erin One
Theme URI: 
Author: STUDIO Ai CHAN
Author URI: 
Description: Child Theme of Spectra One. Do not delete Spectra One to use this theme.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: spectra-one
Text Domain: erin-one
Tags: 
*/

/*** START CUSTOM CSS ***/
html,
body {scroll-behavior: smooth;}
strong {font-weight: 500;}
a {overflow-wrap: break-word;}
a:hover {
	opacity: 0.6;
	transition: 0.5s;
}
.single-post .entry-content a,
.page .entry-content a {
	text-decoration: underline dotted;
	text-underline-offset: 0.25rem;
}
figure {margin-bottom:0;}
.uagb-post__date,
.uagb-post__taxonomy {
	letter-spacing: 0.05em !important;
}
:root :where(.wp-element-button:hover, .wp-block-button__link:hover){
	color: #000000 !important;
	border: solid 1px black !important;
}
/* Header + #site-wrap */
#site-wrap {
	padding-left: 3%;
	padding-right: 3%;
}
#go-top {
	position:fixed;
	width:45px;
	right: 3%;
	bottom: 1em;
	margin: 0 !important;
}
.wp-block-navigation__responsive-dialog {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#modal-1-content {
	padding-top: 0 !important;
}
#modal-1-content h1.wp-block-site-title {
	margin-bottom: 2em;
}

@media (max-width:1024px){
	#site-wrap > .uagb-container-inner-blocks-wrap {
		column-gap: 0;
	}
}
@media (max-width:767px){
	header.no-desktop-header>div,
	#site-wrap {
		padding-left: 6%!important;
		padding-right: 6%!important;
	}
	#go-top {
		right: 6% !important;
	}
}

/* Side Menu */
#sidemenu-con {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: sticky;
    top: 0;
	width: calc(23.5vw - 15px);
	min-width: 225px;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 7vh 0;
	padding: 7dvh 0;
	z-index: 999;
}
.wp-block-social-links .wp-social-link a {
	padding: 0;
}
@media (max-width:1024px){
	#site-wrap header.wp-block-template-part {
		display:none;
	}
}

/* FEARTURED IMAGE */
#featured-image-con .wp-block-post-featured-image {
	width: auto;
}
#featured-image-con .wp-block-post-featured-image img {
	width: auto !important;
	max-height: 66vh;
	max-height: 66dvh;
	object-fit: contain !important;
}
#image-con > figure {
	margin-bottom: 0;
}
@media (min-width:1025px){
	#image-con {
		max-width: calc(47dvw - 30px)!important;
	}
}

/* MAIN-COL, VIEWPORT */

/*  DESKTOP */
@media (min-width:1025px){
	#main-col {
		padding: 7vh 0 1em;
		padding: 7dvh 0 1em;
		width: calc(70.5vw - 15px)!important;
		min-height: calc(100vh + 2em);
		min-height: calc(100dvh + 2em);
	}
	#top-viewport {
		padding-bottom: 7vh;
		padding-bottom: 7dvh;
	}
	.archive #top-viewport {
		min-height: 93vh;
		min-height: 93dvh;
	}
}

/* MOBILE */
@media (max-width:1024px){
	#main-col {
		padding: 0 0 1em;
		width: 100% !important;
		min-height: calc(100vh - 76.8px + 2em);
		min-height: calc(100dvh - 76.8px + 2em);
	}
	#top-viewport,
	#content-con,
	.single-row {
		width: 100%!important;
	}
	#top-viewport {
		padding-bottom: 76.8px;
	}
	.archive #top-viewport {
		min-height: calc(100vh - 76.8px);
		min-height: calc(100dvh - 76.8px);
	}
	#main-col-child {/* SINGLE PORTFOLIO */
		padding-bottom: 76.8px;
	}
}

/** SINGLE POST **/
.single-post .center-con img {
	max-height: 60vh;
	max-height: 60dvh;
	width: auto;
}
@media (orientation: portrait) {
	.single-post #top-viewport {
		justify-content: start;
	}
}

/* WIDER CLASS */
@media (min-width:1440px){
	.wider {
		position: relative;
		width:100vw;
		max-width:50vw;
		height: auto;
		object-fit: contain;
		margin-left: calc(50% - 25vw);
		margin-right: calc(50% - 25vw);
	}
}
@media (max-width:1025px)and (min-width:768px){
	.wider {
		position: relative;
		width:100vw;
		max-width:64vw;
		height: auto;
		object-fit: contain;
		margin-left: calc(50% - 32vw);
		margin-right: calc(50% - 32vw);
	}
}

/** PAGE **/
.page .entry-content {
	margin-bottom: 4em;
}
.page #top-viewport {
	padding-bottom: 0;
	min-height: unset;
}
.page #featured-image-row {
	min-height: 4em;
}

/** ABOUT PAGE **/
.about #about {
	margin-top: 1em;
}

@media (max-width:1024px) {
	.about #about {
		margin-top: 4em;
		order: 0;
	}
	.about #top-viewport {
		order: 1;
		margin-top: 2em !important;
		margin-bottom: 2em !important;
	}
	.about #featured-image-row {
		justify-content: center !important;
	}
	.about .single-row {
		order: 2 !important;
		padding-top: 2em;
	}
}

/** SINGLE PORTFOLIO **/

.portfolio-template-default #main-col-child,
.home #main-col-child {
margin: auto 0;
padding-bottom: 7vh;
padding-bottom: 7dvh;
}
#main-col-child > .entry-content {
	margin: auto 0;
}
@media (min-width:1025px){
	.portfolio-template-default #main-col-child,
	.home #main-col-child {
		height: calc(86vh + 50px);
		height: calc(86dvh + 50px);
	}
}
@media (max-width: 1024px){
	.portfolio-template-default #main-col,
	.home #main-col {
		min-height: calc(100vh - 74px + 2em);
		min-height: calc(100dvh - 74px + 2em);
	}
}
/* NEW Gallery */
.hidden-gallery {
	display: none !important;
}
/* Gallery */
.portfolio-gallery .spectra-image-gallery__layout--carousel {
margin-bottom: 0 !important;
}
.portfolio-template-default .wp-block-image  img,
.home .wp-block-image img {
max-height: 80vh;
max-height: 80dvh;
object-fit: contain;
}
/* LANDSCAPE-FORMAT */
.portfolio-template-default .landscape #image-con img,
.home .landscape #image-con img {
	width: 100%;
	max-height: 60vw;
	max-height: 60dvw;
}

/* PORTRAIT-FORMAT */
@media (min-width: 1025px){
.portfolio-template-default .portrait #image-con .wp-block-image,
.home .portrait #image-con .wp-block-image {
	width: 66%;
	margin: 0 auto;
	}
.portfolio-template-default .portrait #title-con,
.home .portrait #title-con {
	margin-left: -9%;
	}
}
/* Lightbox */
/*.swiper-button-next:after, 
.swiper-button-prev:after {
	font-size: 20px;
}*/
/* NEW Lightbox - SLB */
#slb_viewer_wrap .slb_theme_slb_baseline .slb_viewer_overlay {
	background-color: #fff !important;
}
.slb_container {/* container を中央に */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90vw;
    max-height: 85vh;
	width: auto;
	height: auto;
    display: flex !important;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.slb_slideshow .slb_template_tag_ui_slideshow_control {
	display: none !important;
}
.slb_container .slb_content img {
    display: block;
    max-height: 85vh !important;
	max-width: 90vw !important;
    width: auto !important;
    margin: 0 auto !important;
}

.slb_container .slb_nav .slb_prev,
.slb_container .slb_nav .slb_next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    padding: 8px 12px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    z-index: 10000;
}
#slb_viewer_wrap .slb_theme_slb_baseline .slb_details .slb_data {
	display: block !important;
}
.slb_data_content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#slb_viewer_wrap .slb_theme_slb_default .slb_data_title, #slb_viewer_wrap .slb_theme_slb_default .slb_group_status {
	font-family: var(--wp--preset--font-family--hanken-grotesk) !important;
	font-size: 14px !important;
}
.slb_container .slb_nav .slb_prev { left: -50px; }
.slb_container .slb_nav .slb_next { right: -50px; }

/* クローズボタンを画像上部右外側に */
.slb_container .slb_controls .slb_close {
    position: absolute !important;
    top: -45px;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    z-index: 10000;
}
.slb_container .slb_nav .slb_prev:hover,
.slb_container .slb_nav .slb_next:hover,
.slb_container .slb_controls .slb_close:hover {
    background-color: rgba(0,0,0,0.8);
}/*** NEW LIGHT BOX END */

#title-con .addtoany_shortcode {
	padding-top: 1rem;
}

/* .CATEGORY.ARCHIVE */

/* Scroll Button */
.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}
#next-btn a,
#back-btn a {
border: none !important;
cursor: pointer;
font-family: Inter, san-serif !important;
}
#next-btn a:hover,
#back-btn a:hover {
  opacity: 0.6;
  transition: 0.5s;
}

/* #HORIZONTAL SLIDER */
#horizontal-slider > .loop {
margin: unset !important;
overflow: hidden;
}
#horizontal-slider ul {
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
column-gap: 20px;
}
#horizontal-slider ul::-webkit-scrollbar {
  display:none;
}
#horizontal-slider li {
width: auto;
margin: 0 !important;
}
#horizontal-slider li img {
height: 44vh !important;
height: 44dvh !important;
max-width: none !important;
width: auto !important;
}

@media (max-width: 1024px) and (orientation:portrait){
#horizontal-slider li img {
height: auto !important;
max-height: 30vh !important;
max-height: 30dvh !important;
}
}

/* POST SLIDER */
#horizontal-slider.posts li{
width: auto;
}
#horizontal-slider.posts li img {
	/*aspect-ratio: 16/9;*/
}
@media (max-width: 1024px) and (orientation:portrait){
#horizontal-slider.posts li img {
max-width: 80vw !important;
max-width: 80dvw !important;
}
}

 /* SCROLLABLE SIGN */
#scrollable {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: fade-in-out 2s 2;
  z-index: 10;
}

.arrow-right {
font-family: Inter, san-serif;
font-size: 24px;
color: #333;
font-weight: 300;
}

/* Fade-in-out animation */
@keyframes fade-in-out {
  0%, 100% {opacity: 0;
  }
  50% {opacity: 1;
  }
}

/* FOOTER */
footer {
margin-top: 0 !important;
}