/*
Theme Name: Welcart Basic Child
Description: Welcart Basic Child Theme
Author: 株式会社ノイズ
Template: welcart_basic
Version: 1.0.0
*/

/*--------------------------------------------
	サイト共通 
--------------------------------------------*/
@font-face {
	font-family: "Futura PT Medium";
	src:
		local("Futura-Medium"),
		local("Futura Medium"),
		url("../fonts/futura-medium.otf") format("opentype"),
		url("../fonts/futura-medium.woff") format("woff");
}
@font-face {
	font-family: "ARBONNIE";
	src:
		local("AR-BONNIE"),
		local("AR BONNIE"),
		url("../fonts/ARBONNIE.otf") format("opentype"),
		url("../fonts/ARBONNIE.woff") format("woff");
}
:root{
	--brand-base-color:#4C4C4C;
	--brand-accent-color:#D5B5B5;
	--brand-earth-color:#3E3E3E;
	--brand-natural-color:#F6F5F2;
	--brand-emphasis-color:#444444;
	--brand-auxiliary-color:#BFDDEB;
	--max-width:1200px;
	--linear-gradient-A:linear-gradient(to right, #C500EA, #DA0B92, #B7247B);
	--linear-gradient-B:linear-gradient(to bottom, #C500EA, #DA0B92, #B7247B);
	--fs14px:clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
	--fs16px:clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
	--fs18px:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
	--fs20px:clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
	--fs21px:clamp(1.125rem, 1.057rem + 0.34vw, 1.313rem);
	--fs24px:clamp(1.313rem, 1.244rem + 0.34vw, 1.5rem);
	--fs25px:clamp(1.438rem, 1.392rem + 0.23vw, 1.563rem);
	--fs28px:clamp(1.625rem, 1.58rem + 0.23vw, 1.75rem);
	--fs32px:clamp(1.875rem, 1.83rem + 0.23vw, 2rem);
	--fs60px:clamp(1.313rem, 0.426rem + 4.43vw, 3.75rem);
	--fs80px:clamp(3.75rem, 3.295rem + 2.27vw, 5rem);
	--fs100px:clamp(5rem, 4.545rem + 2.27vw, 6.25rem);
}

body {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
	overflow:hidden;
	font-size: var(--fs16px);
}
html{
	scroll-behavior: smooth;
}
*{
	position:relative;
	line-height:normal;
}
h1, h2, 
.entry-content h2{
	font-size:var(--fs21px);
}
p,h3, h4,.entry-content h3, .entry-content h4{
	font-size:var(--fs18px);
}
table, h5, h6, .entry-content h5, .entry-content h6 {
    font-size: var(--fs16px);
}
img{
	max-width:100%;
}
/*--------------------------------------------
	Headder 
--------------------------------------------*/

.header-content {
	padding: 10px 0 20px;
	display: flex;
	justify-content: space-between;
	align-items:center;
}

h1.site-title, div.site-title{
	font-style: normal;
	padding:0;
	max-width: 310px;
}

.header-icons {
	display: flex;
	align-items: center;
}
.header-icon{
	width: 100px;
	display: block;
	text-align: center;
}
.header-icon a {
	color: #000;
	font-size:13px;
}
.header-icon a svg {
	display: block;
	margin: auto;
}
.header-icon.cart {
	padding: 15px 30px 10px;
	margin-top: -15px;
	background: linear-gradient(to bottom, #C500EA, #DA0B92, #B7247B);
}
.header-icon.cart a{
	color:#FFF;
}
.header-icon.menu-toggle {
	cursor: pointer;
}
.hamburger-wrap{
	opacity: 0;
	background: #1e1e1e85;
	width: 100%;
	transition: all .5s;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -99;
	visibility:hidden;
}
.hamburger-wrap.open {
	z-index: 99;
	opacity: 1;
	visibility:unset;
}
.hamburger-nav-menu {
	width: 80%;
	max-width:320px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -320px;
	transition:all .5s;
	z-index: 100;
	background: #FFF;
	padding: 30px;
}
.hamburger-wrap.open .hamburger-nav-menu{
	right:0;
}
span.hamburger-close {
	display: none;
	cursor: pointer;
	color: #da0b92;
}
.hamburger-wrap.open span.hamburger-close{
	display:block;
	position:absolute;
	top:15px;
	right:15px;
	z-index:101;
}
/**/
/* ベース：装飾リセット */
.hamburger-nav,
.hamburger-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hamburger-nav > li {
  border-bottom: 1px solid #eee;
}
.hamburger-nav a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #222;
}

/* 子メニューをデフォルトは閉じる（アコーディオンの土台） */
.hamburger-nav .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease, visibility .25s ease;
  visibility: hidden;
  background: #fafafa;
}

/* インジケーター（三角）を親リンクの右に表示 */
.hamburger-nav .menu-item-has-children > a {
  position: relative;
  padding-right: 40px;
}
.hamburger-nav .menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg); /* 閉じた状態（▶） */
  transition: transform .2s ease;
}

/* --- 開く条件 ------------------------------------------
   1) :has() で「親liが自分直下のaにフォーカス or ホバー」を検知
   2) :focus-within / :hover でも開く（フォールバック）
   3) 現在ページの祖先メニューは常に展開（WPが付ける .current-menu-ancestor）
-------------------------------------------------------- */

/* 1) :has() を使える環境では “クリック/タップでフォーカス” しても開く */
.hamburger-nav .menu-item-has-children:has(> a:focus),
.hamburger-nav .menu-item-has-children:has(> a:focus-visible),
.hamburger-nav .menu-item-has-children:hover {
  /* 開く */
}
.hamburger-nav .menu-item-has-children:has(> a:focus) > .sub-menu,
.hamburger-nav .menu-item-has-children:has(> a:focus-visible) > .sub-menu,
.hamburger-nav .menu-item-has-children:hover > .sub-menu,
.hamburger-nav .current-menu-ancestor > .sub-menu {
  max-height: 1000px; /* 中身に十分な値ならOK（必要に応じて増やす） */
  visibility: visible;
}

/* 2) :focus-within / :hover のフォールバック（:has()非対応でも開く） */
.hamburger-nav .menu-item-has-children:focus-within > .sub-menu,
.hamburger-nav .menu-item-has-children:hover > .sub-menu {
  max-height: 1000px;
  visibility: visible;
}

/* 開いたときは矢印を下向き（▼っぽく）に回転 */
.hamburger-nav .menu-item-has-children:has(> a:focus) > a::after,
.hamburger-nav .menu-item-has-children:has(> a:focus-visible) > a::after,
.hamburger-nav .menu-item-has-children:hover > a::after,
.hamburger-nav .menu-item-has-children:focus-within > a::after,
.hamburger-nav .current-menu-ancestor > a::after {
  transform: translateY(-50%) rotate(45deg);
}

/* 子メニュー内のリンク装飾 */
.hamburger-nav .sub-menu a {
  padding: 10px 16px 10px 28px;
  font-size: .95rem;
  border-top: 1px solid #f0f0f0;
}

/* アコーディオンらしく1つずつ余白 */
.hamburger-nav .sub-menu li:last-child a {
  border-bottom: 0;
}

/* キーボード操作の見やすいフォーカス */
.hamburger-nav a:focus-visible {
  outline: 2px solid #999;
  outline-offset: 2px;
}

/**/
#site-navigation ul{
	width:100%;
	max-width:var(--max-width);
	display: flex;
	justify-content: space-around;
}
#site-navigation ul li,#site-navigation ul li:first-child {
	border: none;
}
#site-navigation ul li a{
	font-size:var(--fs16px);
}
#main{
	width:100%;
	max-width:var(--max-width);
}
#main.one-column{
	max-width:1000px;
}
div#content {
	padding: 0;
}
.container {
	width:100%;
	max-width:var(--max-width);
	margin: auto;
}
@media only screen and (max-width: 62.4em){
	.site-description{
		background: var(--brand-base-color);
		padding:.8333em;
	}
}
@media only screen and (max-width: 800px){
	.header-icon {
		width: 80px;
	}
	.header-icon.cart {
		padding: 15px 15px 5px;
	}
}
@media only screen and (max-width: 680px){
	.header-icon.search, .header-icon.favorite, .header-icon.user, .header-icon.cart {
		display: none;
	}
}
@media only screen and (max-width: 360px){
	h1.site-title img, div.site-title img{
		max-height:60px;
		width:auto;
	}
}
.breadcrumb-wrap {
	background: #FFEEF2;
	padding: 13px;
}
#breadcrumb {
	max-width: var(--max-width);
	margin: auto;
}
#breadcrumb a{
	color:#4C4C4C;
}
/*--------------------------------------------
	Footer 
--------------------------------------------*/
footer{
	background: var(--brand-base-color);
}
footer *{
	font-size: var(--fs14px);
}
.footer-nav-block {
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	max-width:750px;
	margin: 50px auto 80px;
}
.footer-nav-left, .footer-nav-center, .footer-nav-right {
	width: calc(33.3% - (50px / 3 * 2));
}
.footer-nav-list li{
	margin-bottom:10px;
}
p.footer-nav-title {
	font-weight: 500;
	margin: 50px 0 15px;
}
@media only screen and (max-width:840px){
	.footer-nav-block {
		gap: 30px;
		margin: 30px auto;
	}
	.footer-nav-left, .footer-nav-center, .footer-nav-right {
		width: calc(33.3% - (30px / 3 * 2));
	}
}
@media only screen and (max-width:420px){
	.footer-nav-left, .footer-nav-center, .footer-nav-right {
		width: 100%;
	}
	p.footer-nav-title {
		margin-top: 0;
	}
}
/*--------------------------------------------
	Other 
--------------------------------------------*/

h3.widget_title {
	color: var(--brand-earth-color);
}

.bold{ font-weight:bold; }
.red{ color:#FF0000; }
.ta_c,.text_center,.txt_center{ text-align:center; }
.text_left,.txt_left{ text-align:left; }
.text_right,.txt_right{ text-align:right; }

/*--------------------------------------------
	商品共通 
--------------------------------------------*/
.slick-track {
	margin: 0;
}
.slick-items .slick-slide,.slick-slide{
	margin: 0 5px;
}
.slick-items .slick-list,.slick-list{
	margin:0 -5px;
}

span.discount-pr {
	display:inline-block;
	font-size: var(--fs14px);
	background:var(--linear-gradient-B);
	padding:4px 5px;
	color:#FFF;
	margin-right:5px;
}
span.original-price {
	color: #EA009C;
	font-size: var(--fs18px);
	text-decoration: line-through;
}
.discount-parallel span.original-price{
	margin-right:5px;
}
span.special-price {
	color: #EA009C;
	font-size: var(--fs24px);
	font-weight: 500;
	display:block;
}
.discount-parallel span.special-price{
	display:inline-block;
}
span.special-price span.intax {
	color: #000;
	font-size: var(--fs14px);
}

.simplefavorites-modal-content-footer {
	display: flex;
	justify-content: center;
	gap: 30px;
}
.simplefavorite-button {
	cursor: pointer;
	width: fit-content;
	border: 1px solid;
	border-radius: 5px;
	padding: 2px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: #da0b92;
	margin-top:10px;
}
.simplefavorite-button.active {
	opacity: 1;
	color: #FFF;
	background: #da0b92;
}
.favorites-list a{
	text-decoration:none;
}
.favorites-list {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom:50px;
}
.favorites-list-item {
	width: calc(20% - (15px / 5 * 4));
}
.favorites-list .simplefavorite-button{
	margin-top:15px;
}
@media only screen and (max-width:740px){
	.favorites-list-item {
		width: calc(25% - (15px / 4 * 3));
	}
}
@media only screen and (max-width:460px){
	.favorites-list-item {
		width: calc(50% - (15px / 2 * 1));
	}
}
@media only screen and (max-width:360px){
	span.special-price{
		font-size: var(--fs21px);
	}
}

#goTop {
	position: fixed;
	right: 30px;
	bottom: 50px;
}
#goTop a {
	font-size: var(--fs32px);
}