/**
 * body class theme-embex-ec
 * SP style
 */

/* ======================================================================
 *
 * SP
 *
 * ====================================================================== */

@media (min-width: 768px) {

	#ec-search-filter-toggle {
		display: none;
	}
}

@media (max-width: 767px) {

	#masthead {
		margin: 0;
		padding: 0;
	}

	.header-top {

	}
	.header-logout-button {
        position: relative !important;
		top: auto !important;
		right: auto !important;
    	text-align: right;
        padding: 0 0 20px;
	}

	/* 検索トグル */
	#ec-search-filter-toggle {
        display: block;
        position: fixed;
        padding: 0;
        right: 0;
        margin-top: -15px;
        z-index: 1100;
	}
	#ec-search-filter-toggle button {
        font-size: 1rem;
        padding: 20px 0 15px;
        width: 40px;
		opacity: 0.6;
        writing-mode: vertical-rl;
        letter-spacing: 5px;
		transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	}
	.show-search-filter #ec-search-filter-toggle button {
        width: 50px;
	}

	/* 検索フィルタ */
	#ec-search-filter {
        position: absolute;
        z-index: 1000;
        top: 0;
        left: -100%;
        width: 100%;
        transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        background-color: #fff;
        padding: 20px;
	}
	.show-search-filter #ec-search-filter {
        left: 0%;
	}

	/* 検索フィルタヘッダー */
	#ec-search-header .ec-search-button-block {
		flex-basis: 50px;
	}	
	#ec-search-header .ec-search-button-block .btn-search {
		letter-spacing: 0.3rem;
		font-size: 1.2rem;
		font-weight: normal;
		padding: 0px 20px;
		font-size: 1rem;
		white-space: nowrap;
		letter-spacing: 5px;
	}	
 
	/* 研修一覧 */
	.products#em-products#em-products .product {
		flex-basis: calc((100% - 20px) / 2) !important;
	}


	/* ======================================================================
	*
	* 詳細ページ
	*
	* ====================================================================== */
	.wp-child-theme-embex-ec .col-full {
	}	
	.single-product .product #product-basic-info {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0 20px 60px;
	}
	.single-product .product .product-fields .product-field {
		gap: 10px;
		width: 100%;
	}
	.single-product .product .product-fields .product-field .product-field-title {
		flex-basis: 120px;
	}
	.single-product .product .options {
		display: block;
	}

	.woocommerce-tabs.woocommerce-tabs-horizontal.wc-tabs-wrapper .woocommerce-Tabs-panel {
		padding: 20px;
	}
	.woocommerce-tabs.woocommerce-tabs-horizontal.wc-tabs-wrapper ul.tabs li {
		flex-basis: 50%;
	}
	.woocommerce-tabs ul.tabs li.active::after {
		right: 15px;
	}


	/* ======================================================================
	*
	* マイページ
	*
	* ====================================================================== */
	.cards.cards-col4 {
	    gap: 20px;
	}
	.cards.cards-col4 .card {
		flex-basis: calc((100% - 20px) / 2) !important;
		width: calc((100% - 20px) / 2) !important;		
	}
}