/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.0
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

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

/* header */

/******** SP ********/
.header-pc {display: none;}
.h-customer {background:rgba(240,240,240, 1);}
.h-business {background:rgba(2, 19, 36, 1); color:#CFD1DE!important;}
.h-customer a {color: #666;}
.h-business a {color: #CFD1DE;}
.nav_item a {text-decoration: none;}
/*
.nav_item a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content: "\f138";
	font-size: .8em;
	margin-right: 5px;
	color: #bbb;
}
*/



.header-sp {
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 60px;
	z-index: 999;
	color: #000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}
.header-sp h1 {
	width:100px;
	margin: 5px 0 0 0;
	padding-left: 20px;
}
.header-sp h1 img {width: 100%;}
.header-sp ul.member {
	display: flex;
	justify-content: flex-end;
	margin:0 -5px 0 0;
	padding-right: 10px;
}
.header-sp ul.member li {
	width: 30px;
	height: 60px;
	margin: 0 10px;
	padding:0;
	position: relative;
	text-align: center;
}
.header-sp ul.member>li>a {
	text-decoration: none;
	display:block;
}

.h-customer ul.member>li.login>a {background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon_login.svg");}
.h-business ul.member>li.login>a {background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon_login_B.svg"); color: #CFD1DE;}
.header-sp ul.member>li.login>a{
	width: 30px;
	height: 60px;
	background-repeat: no-repeat;
	background-position: center calc(50% - 4px);
	background-size: 60%;
}
.h-customer ul.member>li.cart>a {background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon_cart.svg");}
.h-business ul.member>li.cart>a {background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon_cart_B.svg"); color: #CFD1DE;}
.header-sp ul.member>li.cart>a {
	width: 30px;
	height: 60px;
	background-repeat: no-repeat;
	background-position: 40% calc(50% - 5px);
	background-size: 75%;
}
/* ハンバーガーアイコンの設置スペース */
.header-sp .drawer_open {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
  padding: 0px;
  top: -4px;
  width: 30px;
  height: 60px;
}

.header-sp ul.member>li.login>a.member_login_sp:before{
    content: 'ログイン';
    font-size: 9px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 50px;
}
.header-sp ul.member>li.login>a.member_mypage_sp:before{
    content: 'マイページ';
    font-size: 9px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 50px;
}

.header-sp ul.member>li.cart>a:before {
    content: 'カート';
    font-size: 9px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 50px;
}

/* SPメニュー */
/* チェックボックスを非表示 */
.drawer_hidden {
  display: none;
}


.drawer_open:before {
    content: 'メニュー';
    font-size: 9px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 50px;
}

/* SPメニューアイコン */
.h-customer .drawer_open span, .drawer_open span:before, .drawer_open span:after {background: #333;}
.h-customer .drawer_open span,
.h-customer .drawer_open span:before,
.h-customer .drawer_open span:after {
  content: '';
  display: block;
  height: 2px;
  width: 20px;
  border-radius: 3px;
  transition: 0.5s;
  position: absolute;
    background: #333;
}
.h-business .drawer_open span, .drawer_open span:before, .drawer_open span:after {background: #CFD1DE;}
.h-business .drawer_open span,
.h-business .drawer_open span:before,
.h-business .drawer_open span:after {
  content: '';
  display: block;
  height: 2px;
  width: 20px;
  border-radius: 3px;
  transition: 0.5s;
  position: absolute;
    background: #CFD1DE;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 6px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 6px;

}
/* クリック時中央線を透明に */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
/* クリック時アイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* メニューのデザイン*/
.h-customer .nav_content  {background: rgb(240, 240, 242, 1); color:#333!important;}
.h-business .nav_content  {background: #3E434B; color:#CFD1DE!important;}

.nav_content {
	width: 100%;
	height: calc(100% - 60px);
	position: fixed;
	top: 60px;
	left: 100%; /* メニューを画面の外に飛ばす */
	z-index: 99;
	transition: .3s;
	text-align: left;
	padding: 30px 1rem 0 1rem;
	overflow: scroll;
}
.nav_content h2 {
	/* border-left: 10px solid #000; */
	font-family: source-han-sans-japanese, sans-serif;
    font-weight: 400;
    font-style: normal;
	border-bottom: 1px solid #666;
}

.nav_content ul li.nav_item-h {
	display: flex;
	align-items: center;
    text-align: left;
    font-size: 14px;
    padding: 0 0 0 0;
    width: 100%;
    margin: 0;
    height: 30px;
    font-weight: 400;
    font-style: normal;
}
.nav_content ul li.funiture_si::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url(https://gigaplus.makeshop.jp/flakes/common/icon-furniture.svg);
	background-position: center;
	background-size: contain;
	margin-right: .5rem;
}
.nav_content ul li.fashion_si::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url(https://gigaplus.makeshop.jp/flakes/common/icon-fashion_accessories.svg);
	background-position: center;
	background-size: contain;
	margin-right: .5rem;
}
.nav_content ul li.tableware_si::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url(https://gigaplus.makeshop.jp/flakes/common/icon-tableware.svg);
	background-position: center;
	background-size: contain;
	margin-right: .5rem;
}
/*
.nav_content ul li.nav_item {
    text-align: left;
    font-size: 14px;
    padding: 5px 0 0 10px;
    width: 90%;
    margin: 0;
    height: 30px;
	font-family: source-han-sans-japanese, sans-serif;
    font-weight: 400;
    font-style: normal;
}
*/

.nav_content ul li.nav_item_p, .nav_content ul li.nav_item {
    text-align: left;
    font-size: clamp(12px, 3vw, 14px);
    padding: 5px 0 0 0;
    width: 46%;
    margin: 0;
    height: 30px;
	font-family: source-han-sans-japanese, sans-serif;
    font-weight: 400;
    font-style: normal;
}


/* メニュー黒ポチを消す */
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
	left: 0%;
	top:60px;
}

/* メニュー内バナー */
.__is-guest .nav_content .sp-menu-regist {
	margin: 30px auto 20px;
}
.__is-member--group-0 .nav_content .sp-menu-regist {
	display: none;
}


/* SP検索 */
.search {
    width: 100%;
    min-width: 230px;
    position: relative;
    background: none!important;
    padding: 0!important;
 }
input[type="search"] {
    width: 100%;
    line-height: 1.8;
    height: 2.3rem;
    padding: 5px 10px;
    border: none;
    background: #fff;
    border-radius: 25px;
    margin: 0 -6px 0px 0;
    font-size: 14px;
}
input[type="search"]:hover {
	background-image: none;
}
.search-btn {
    position: absolute!important;
    right: 1.3rem;
    bottom: .5rem;
    box-sizing: border-box;
    padding: 0;
    width: 23px !important;
    height: 20px !important;
    border: 0;
    background: none!important;
}
.search-btn img {width: 100%;}
.search-btn:hover {width: 100%; opacity: 1!important;}
@media screen and (min-width: 1030px) {
	.search-btn {right: .5rem;}
}

.icon-search {
	font-size:23px;
	color: #CFD1DE;
}

.acd-check{
    display: none;
}
.acd-label {
	font-size: clamp(16px, 3vw, 18px);
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: .5rem 1rem .5rem 0;
	font-weight: 400;
	font-style: normal;
	position:relative;
	background: none;
}

input[type=checkbox]+label,input[type=radio]+label {
	cursor: auto;
    vertical-align: middle
}
.acd-label::before, .acd-label::after {
  content:'';
  position:absolute;
  right: 1.5rem;
  top: 1.2rem;
  width: 16px;
  height:2px;
  background-color:#666;
}
.acd-label::before {
	transform:rotate(90deg);
}
.h-customer .acd-label::before, .h-customer .acd-label::after {
  background-color:#666;
}
.h-business .acd-label::before, .h-business .acd-label::after {
  background-color:#CFD1DE;
}

ul.acd-content1,
ul.acd-content2,
ul.acd-content3,
ul.acd-content4,
ul.acd-content5,
ul.acd-content6,
ul.acd-content7,
ul.acd-content11,
ul.acd-content12,
ul.acd-content13,
ul.acd-content14,
ul.acd-content15 {
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;

}
ul.acd-content1,
ul.acd-content2,
ul.acd-content3,
ul.acd-content4 {
    padding: 0 0 0 10px;
	margin: 0;
}

.acd-check:checked + .acd-label::before{
	transform:rotate(0deg);
}
.acd-check:checked + .acd-label + .acd-content1,
.acd-check:checked + .acd-label + .acd-content2,
.acd-check:checked + .acd-label + .acd-content3,
.acd-check:checked + .acd-label + .acd-content4,
.acd-check:checked + .acd-label + .acd-content5,
.acd-check:checked + .acd-label + .acd-content6,
.acd-check:checked + .acd-label + .acd-content7,
.acd-check:checked + .acd-label + .acd-content11,
.acd-check:checked + .acd-label + .acd-content12,
.acd-check:checked + .acd-label + .acd-content13,
.acd-check:checked + .acd-label + .acd-content14,
.acd-check:checked + .acd-label + .acd-content15 {
    height: auto;
    opacity: 1;
	visibility: visible;
    padding: 0 0 1rem .2rem;
	display: flex;
	flex-wrap: wrap;
	transition: .5s;
}

.nav_content .inquiry{
	font-size: 18px;
    color: #333;
    display: block;
    margin: 0;
    padding: 5px;
	font-family: source-han-sans-japanese, sans-serif;
    font-weight: 200;
    font-style: normal;

}
.nav_content .inquiry::before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da";
	font-size:.8em;
	margin-right:15px;
}


h3 span {display:block; font-size:12px;}

.download a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f56d";
	margin-right: .5rem;
}

/******** PC ********/
@media screen and (min-width: 1030px) {
	
	.header-sp {display: none;}
	.h-customer {background:rgba(240,240,240,0.8);}
	.h-business {background:rgba(2, 19, 36, 0.8); color:#CFD1DE;}
	.header-pc {
		position: fixed;
		height: 70px;
		width:100%;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		backdrop-filter: blur(20px) saturate(180%);
		text-align: center;
		padding: 0;
		transition: all 0.3s ease;
	}
	.header-pc nav {
		width:100%;
		max-width:1300px;
		display: flex;
		align-items: center;
		margin: 0 auto;
	}
	.l-header-logo	{width: 130px; padding-left: 10px;}
	
	.header-pc nav .product {flex: 1;}
	.header-pc nav .member {width: 120px;}

	.l-header-logo a {display: flex;}
	.l-header-logo_img {width: 100px;}
	.l-header-logo_img img {max-width: 100%;}
	.header-pc nav .product {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
	}
	.header-pc nav ul > li {
		display: flex;
		align-items: center;
		padding:0 1.5vw;
		font-size:clamp(12px, 1.2vw, 14px);
		height: 70px;
	} 
	/********** search **********/
	.header-pc nav ul.product > li > div.search {
		display:block;
	}
	div.search input[type="text"] {
		width: 100%;
		line-height: 1.8;
		height: 30px;
		padding: 5px;
		border: 1px solid #fff;
		background: #fff;
		border-radius: 10px;
		margin: 0 -6px 0px 0;
		font-size:12px;
	}
	.search__submit {
		position: absolute;
		right: 1rem;
		bottom: .5rem;
		box-sizing: border-box;
		padding: 0;
		width: 25px !important;
		height: 30px !important;
		border: 0;
		background: none;
	}
	.l-header-search__form {
		position: relative;
		flex: 1;
		margin: 0;
	}
	.l-header-search__input input {
		box-sizing: border-box;
		padding-right: 60px;
		width: 100%;
		height: 40px;
		border: none;
		background: transparent;
	}
	.l-header-search__submit {
		position: absolute;
		right: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 0;
		width: 25px!important;
		height: 30px!important;
		border: 0;
		background: none;
	}
	.l-header-search__submit img {
		width: 18px;
	}
	
	/********** login - cart **********/
	.header-pc nav .member {
		display: flex;
		justify-content: space-between;
		height: 70px;
	}
	.header-pc nav .member li {
		display: flex;
		justify-content: center;
		position: relative;
		padding: 0;
	}
	.header-pc nav ul.member>li>a {
		width: 50px;
		height: 70px;
		text-decoration: none;
		display:block;
	}
	.header-pc nav ul.member>li>a:hover {
		opacity:.5;
	}
	
	.h-customer nav ul.member>li.login>a {background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon_login.svg"); color: #555;}
	.h-business nav ul.member>li.login>a {background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon_login_B.svg"); color:#CFD1DE;}
	.header-pc nav ul.member>li.login>a{
		background-repeat: no-repeat;
		background-position: center calc(50% - 5px);
		background-size: 25px;
	}
	.header-pc nav ul.member>li.login>a.member_login_pc:before {
		content: 'ログイン';
		font-size:10px;
		line-height: 110px;
	}
	.header-pc nav ul.member>li.login>a.member_mypage_pc:before {
		content: 'マイページ';
		font-size:10px;
		line-height: 110px;
	}
    
	.h-customer nav ul.member>li.cart>a {background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon_cart.svg"); color: #555;}
	.h-business nav ul.member>li.cart>a {background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon_cart_B.svg"); color:#CFD1DE;}
	.header-pc nav ul.member>li.cart>a {
		background-repeat: no-repeat;
		background-position: center calc(50% - 5px);
		background-size: 25px;
	}
	.header-pc nav ul.member>li.cart>a:before {
		content: 'カート';
		font-size:10px;
		line-height: 110px;
	}
	

	/* Submenu */
	.header-pc nav ul.product li section {display:none;}
	.h-customer nav ul.product li section.active {background: rgb(235, 235, 238, 1);}
	.h-business nav ul.product li section.active {background: #3E434B; color:#CFD1DE!important;}
	.header-pc nav ul.product li section.active{
		width:100%;
		display: block;
		animation: fade-in .8s;
		position: absolute;
		top: 70px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		opacity: 1;
		padding: 10px 20px;
	}
	.header-pc nav ul.product li section .nav-inner {
		width:100%;
		max-width: 1300px;
		display:flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		margin: auto;
	}
	.header-pc nav ul.product li .nav_guide .nav-inner div {width:40%;}
	.header-pc nav ul.product li section .nav-inner div {width:33%;}
	.header-pc nav ul.product li section .nav-inner div p {
		width: 100%;
		display: block;
		margin: 0;
		padding: 5px;
		text-align: left;
		font-weight: bold;
		border-bottom: 1px solid #ddd;
	}
	.header-pc nav ul.product li section div div ul {
		width:100%;
		display:flex;
		margin:0;
		padding:10px 0 0 0;
		flex-wrap: wrap;
		flex-direction: row;
	}
	.header-pc nav ul.product li section div div ul li {
		line-height: 1.7;
		width: 45%;
		height: 2rem;
		text-align: left;
		padding:0 0 0 .5rem;
	}
	.h-customer nav ul.product li a {color: #666;}
	.h-business nav ul.product li a {color: #CFD1DE;}
	.header-pc nav ul.product li a {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
	}
	.funiture_i::before {
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon-furniture.svg");
		background-position: center;
		background-size: contain;
		margin-right: .5rem;
	}
	.fashion_i::before {
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon-fashion_accessories.svg");
		background-position: center;
		background-size: contain;
		margin-right: .5rem;
	}
	.tableware_i::before {
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon-tableware.svg");
		background-position: center;
		background-size: contain;
		margin-right: .5rem;
	}
	.guide_i::before {
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon-guide.svg");
		background-position: center;
		background-size: contain;
		margin-right: .5rem;
	}
	.faq_i::before {
		content: "";
		display: inline-block;
		width: 30px;
		height: 30px;
		background-image: url("https://gigaplus.makeshop.jp/flakes/common/icon-faq.svg");
		background-position: center;
		background-size: contain;
		margin-right: .5rem;
	}
}