/* ========================================
   ZOKZOK WEB - Full UI Theme
   Bootstrap 5 Override
   ======================================== */

/* ========== Base Colors ========== */

:root {
	--zokzok-yellow: #eaff07;    /* A案 Primary */
	--zokzok-gray: #B2B9C2;    /* Neutral Gray */
	--zokzok-green: #13ad49;    /* D案 Complement Green */
	--zokzok-blue: #001eb3;    /* D案 Complement Blue */
	--zokzok-blue-dark: #161d3c;
	--zokzok-bg-light: #FCFCFC;  /* Light Background */
	--zokzok-bg-dark: #121212;   /* Dark Background */
	--zokzok-text-light: #333333;
	--zokzok-text-dark: #000000;
	--zokzok-black: #140d00;
	--zokzok-black-rgb: 20, 13, 0;
	--zokzok-black: #140d00;
	--zokzok-white: #FFFFFF; 
	  
	  /* Bootstrap variable overrides */
	--bs-body-color: var(--zokzok-text-dark);
	--bs-body-font-size: 0.9rem;
	--bs-primary: var(--zokzok-blue);
	--bs-primary-rgb: 0, 30, 179;
	--bs-secondary: var(--zokzok-gray);
	--bs-secondary-rgb: 178, 184, 195;
	--bs-success: var(--zokzok-green);
	--bs-info: var(--zokzok-blue);
	--bs-warning: #FFA500;
	--bs-danger: #D63031;
	--bs-light: var(--zokzok-bg-light);
	--bs-light-rgb: 252, 252, 252;
	--bs-dark: var(--zokzok-bg-dark);
	--bs-border-radius: 0.25rem;
	--bs-btn-disabled-bg: var(--zokzok-gray) !important;
	--bs-link-color: var(--zokzok-text-dark);
	--bs-link-hover-color: var(--zokzok-blue);
}

/* ========== Dark Mode ========== */
/*@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: var(--zokzok-bg-dark);
	--bs-body-bg-rgb: 18,18,18;
    --bs-body-color: var(--zokzok-text-dark);
    --bs-primary: var(--zokzok-blue);
    --bs-secondary: var(--zokzok-blue);
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #90EE90;
  }
}*/

/* ========== Typography ========== */

html {
	scroll-padding-top: 4.5rem;
}

html, body {
	margin: 0;
	padding: 0;
	background-color: var(--zokzok-bg-light);
	background: linear-gradient(to bottom, var(--zokzok-bg-light) 0%, var(--zokzok-gray)100%);
}

footer {
	margin-bottom: 0;
}

@font-face {
font-family: 'helvetica-lt-pro';
src: local('Helvetica Neue');
font-weight: 400;
font-style: normal;
unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF;
}

@font-face {
font-family: 'helvetica-lt-pro';
src: local('Helvetica Neue Bold');
font-weight: 700;
font-style: normal;
unicode-range: U+0000-024F;
}

@font-face {
font-family: 'tbudgothic-std';
src: local('tbUD Gothic Std');
font-weight: 400;
font-style: normal;
unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF;
}

body, button, input, select, textarea {
	font-family: 'helvetica-lt-pro', 'tbudgothic-std', Arial, sans-serif;
	font-weight: 400;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

body.gray {
	background-color: var(--zokzok-gray);
	background: linear-gradient(to bottom, var(--zokzok-gray) 0%, var(--zokzok-bg-light)100%);
}

.nav-offcanvas {
	width: 800px !important;
	background-color: var(--zokzok-bg-light);
	background: linear-gradient(to bottom, var(--zokzok-bg-light) 0%, var(--zokzok-gray)100%);
}

.navbar-toggler:focus {
	text-decoration: none;
	outline: 0 !important;
	box-shadow: none!important;
}

.zokzok-header {
	background-color: rgba(var(--bs-light-rgb), .85);
}

body.gray .zokzok-header {
	background-color: rgba(var(--bs-secondary-rgb), .85);
}
@media (min-width: 992px) {
	.filter-saturate {
		filter: saturate(0.5);
		transition: filter 0.3s ease-in-out 0s;
	}
	.filter-saturate:hover {
		filter: saturate(1);
	}
}
.helvetica {
	font-family: "helvetica-lt-pro",  Helvetica, Arial, sans-serif !important;
}

.nocopy {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.br-md {
	display: none;
}

@media (min-width: 768px) {
	.br-md {
		display: inline;
	}
	
	.br-md::after {
		content: '';
		display: block;
	}
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

.post-title {
	font-size: clamp(
    1.5rem,
    calc(1rem + (40 - var(--char-length))*0.03rem + 2vw),
    4rem
  );
	line-height: 1.2;
}

.page-contents > * + * {
	margin-top: 2rem;
	letter-spacing: 0.13rem;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.page-contents p:not(.has-text-align-right,.has-text-align-center,.has-text-align-left) {
	text-wrap: wrap !important;
	text-align: justify;
}

a {
	text-decoration: none;
	font-weight: bolder;
	color: var(--bs-link-color);
}

.wp-block-separator {
	opacity: 1;
	border-top: 1px solid !important;
	width: 10%;
	margin: 5rem auto !important;
}

a:hover {
	color: var(--bs-link-hover-color);
	text-decoration: underline;
}

.ex-small {
	font-size: 0.6em !important;
}
/* ========== Navbar ========== */

.navbar {
	background-color: none !important;
	border-bottom: 2px solid var(--zokzok-black);
}

.navbar .navbar-brand {
	font-weight: bold;
}

.navbar .nav-link {
	color: #000000;
	margin: 0 0.5rem;
	transition: color 0.3s ease;
	letter-spacing: normal;
}

.navbar .nav-link.active, .navbar .nav-link:hover {
	color: var(--bs-primary);
}

.zokzok-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}

    /* WP管理バー対応 */

body.admin-bar .zokzok-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .zokzok-header {
		top: 46px;
	}
}
	.top.section {
	padding-top: 40px;
}

.navbar {
	display: flex;
	align-items: center; /* 縦中央揃え */
	justify-content: center; /* 横中央揃え（オプション） */
	min-height: 4rem;
}

.logo-container {
	position: relative;
	display: block;
	width: clamp(10rem, 25vw, 13rem); /* 適宜調整 */
	height: auto;
}

.logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%); /* 中央揃え */
	transition: opacity 0.8s ease, filter 1s ease;
}

.logo-mark {
	width: clamp(9rem, 12vw, 10rem);
	margin: 0 auto 0 0;
	opacity: 0;
	filter: blur(20px);
}

.logo-text {
	opacity: 1;
	filter: blur(0);
}

/* スクロール・ホバー切替 */

.logo-container.scrolled .logo-mark, .logo-container:hover .logo-mark {
	opacity: 1;
	filter: blur(0);
}

.logo-container.scrolled .logo-text, .logo-container:hover .logo-text {
	opacity: 0;
	filter: blur(20px);
}

.hover-zoom {
	overflow: hidden;
}
.hover-zoom img {
    transition: transform 5s linear;
    transform: scale(1);
  }
.hover-zoom:hover img {
    transform: scale(1.2);
  }

/* ========== Buttons ========== */

.btn-primary {
	font-weight: 600;
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--zokzok-blue-dark);
	--bs-btn-hover-color: var(--zokzok-blue-dark) !important;
	--bs-btn-hover-bg: var(--zokzok-gray);
	--bs-btn-hover-border-color: var(--zokzok-blue-dark);
	--bs-btn-focus-shadow-rgb: var(--zokzok-black);
	--bs-btn-active-color: var(--zokzok-white);
	--bs-btn-active-bg: var(--bs-primary);
	--bs-btn-active-border-color: var(--zokzok-blue-dark);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: var(--zokzok-white);
	--bs-btn-disabled-bg: var(--zokzok-bg-light);
	--bs-btn-disabled-border-color: var(--zokzok-bg-light);
}

.btn-primary:hover {
	color: var(--bs-btn-hover-color);
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
	background-color: var(--zokzok-gray);
}

/* ========== Forms ========== */
select:focus {
	border: none!important;
}
.form-control:focus {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 0.25rem rgba(255, 215, 0, 0.25);
}

.wpcf7 .wpcf7-response-output {
	border: 1px solid var(--bs-secondary);
	border-radius: var(--bs-border-radius);
	padding: 2rem 1rem !important;
}

.wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
	border-left: 4px solid var(--zokzok-yellow);
	color: var(--zokzok-black);
}

.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
	border-left: 4px solid var(--zokzok-green);
	color: var(--zokzok-white);
}
.breadcrumbs a {
    color: var(--bs-secondary-color) ;
}

.like-btn {
  background-color: transparent !important;
  opacity: 1 !important; 
  font-size:1rem;
  transition: color 0.3s ease;
}
button.like-btn:hover {
  color: var(--bs-primary) !important;
}
/* ========== Progress Bar ========== */

.progress-bar {
	background-color: var(--bs-primary);
}

/* ========== Carousel ========== */

.carousel-indicators {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100% !important;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0
}

.carousel-indicators button {
	flex: 1 1 0 !important;
	height: 2px !important;
	border-radius: 0 !important;
	border: none !important;
	margin: 0 !important;
	background: #ddd;
	transition: background .3s
}

.carousel-indicators button.active, .carousel-indicators button:focus-visible {
	background: var(--bs-primary)
}


/* ========== Cards ========== */

.card {
	border-radius: 1rem;
}

.card-header {
	background-color: var(--bs-primary);
	color: #fff;
	font-weight: 600;
}

/* ========== WooCommerce Elements ========== */

.woocommerce a.button, .woocommerce button.button {
	background-color: var(--zokzok-blue-dark);
	border: none;
	color: #fff;
	font-weight: 600;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price {
	color: var(--zokzok-blue);
	font-size: 1.5rem;
	font-weight: 700;
}

.woocommerce a.button:hover, .woocommerce button.button:hover {
	background-color: var(--bs-primary);
	color: var(--zokzok-white);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--bs-primary);
}

.woocommerce .price {
	color: var(--bs-primary);
	font-weight: 700;
}

/* ========== ratio ========== */

.ratio-lg,
.ratio-xl,
.ratio-md,
.ratio-sm,
.ratio-xs {
}

/* sm以上 */
@media (min-width: 576px) {
  .ratio-sm { position: relative; width: 100%; }
  .ratio-sm-1x1 { aspect-ratio: 1 / 1 !important; }
  .ratio-sm-16x9 { aspect-ratio: 16 / 9 !important; }
  .ratio-sm-21x9 { aspect-ratio: 21 / 9 !important; }
  .ratio-sm-4x3 { aspect-ratio: 4 / 3 !important; }
}
/* md以上 */
@media (min-width: 768px) {
  .ratio-md { position: relative; width: 100%; }
  .ratio-md-1x1 { aspect-ratio: 1 / 1 !important; }
  .ratio-md-16x9 { aspect-ratio: 16 / 9 !important; }
  .ratio-md-21x9 { aspect-ratio: 21 / 9 !important; }
  .ratio-md-4x3 { aspect-ratio: 4 / 3 !important; }
}
/* lg以上 */
@media (min-width: 992px) {
  .ratio-lg { position: relative; width: 100%; }
  .ratio-lg-1x1 { aspect-ratio: 1 / 1 !important; }
  .ratio-lg-16x9 { aspect-ratio: 16 / 9 !important; }
  .ratio-lg-21x9 { aspect-ratio: 21 / 9 !important; }
  .ratio-lg-4x3 { aspect-ratio: 4 / 3 !important; }
}
/* xl以上 */
@media (min-width: 1200px) {
  .ratio-xl { position: relative; width: 100%; }
  .ratio-xl-1x1 { aspect-ratio: 1 / 1 !important; }
  .ratio-xl-16x9 { aspect-ratio: 16 / 9 !important; }
  .ratio-xl-21x9 { aspect-ratio: 21 / 9 !important; }
  .ratio-xl-4x3 { aspect-ratio: 4 / 3 !important; }
}
/* xxl以上 */
@media (min-width: 1400px) {
  .ratio-xxl { position: relative; width: 100%; }
  .ratio-xxl-1x1 { aspect-ratio: 1 / 1 !important; }
  .ratio-xxl-16x9 { aspect-ratio: 16 / 9 !important; }
  .ratio-xxl-21x9 { aspect-ratio: 21 / 9 !important; }
  .ratio-xxl-4x3 { aspect-ratio: 4 / 3 !important; }
}

/* ========== Custom ZOKZOK UI Elements ========== */

.zokzok-highlight {
	color: var(--bs-primary);
}

.zokzok-bg {
	background-color: var(--bs-primary);
	color: #fff;
}

.zokzok-border {
	border: 2px solid var(--bs-primary);
	border-radius: 8px;
	padding: 1rem;
}

.progress, .progress-stacked {
	--bs-progress-height: 2rem;
}

/* サムネイルボタン */

#artistGalleryThumbs .thumb-btn {
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
}
/* アクティブサムネイルの強調 */

#artistGalleryThumbs .thumb-btn.active img {
	opacity: 0.6;
	border: 2px solid #F7E600; /* テーマのイエローに合わせて調整 */
}
/* 不要な余白を抑制 */

#artistGalleryThumbs .thumb-btn img {
	display: block;
}

.grecaptcha-badge {
	display: none;
	visibility: hidden;
}

.cart-badge {
	top: 0.8rem !important;
	font-size: 0.5rem;
	transform: translate(-50%, -50%);
	letter-spacing: 0.1em;
	line-height: normal;
}

.btn-like {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.btn-like .bi {
	font-size: 1.2rem;
	color: gray;
}

.btn-like.liked .bi {
	color: var(--bs-primary);
}

.btn-like:disabled {
	cursor: default;
}

@media (min-width: 992px) {
	.sticky-lg-top {
		top: 4rem;
	}
}
.accordion-item {
    background-color: initial !important;
    border: none !important;
}

.accordion-button:not(.collapsed) {
    color: inherit !important;
    background-color: initial !important;
    box-shadow: none !important;
}