/*
Theme Name:		Welcart Basic Child
Description:	Welcart Basic Child is child theme for Welcart Basic.
Author:			WElcart Inc.
Author URI:		https://www.welcart.com/
Template:		welcart_basic
Version:		1.0.0
License:		GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Tags:			responsive-layout, basic-child, two-columns, right-sidebar. left-sidebar
*/

:root {
	--bg-color: #EBE9E2;
	--text-color: #3b3634;
	--accent-color: #649B97;
	--header-height: 54px;
}

header h1:not(.offcanvas-title) img,
header .incart-btn img,
.navbar-toggler-icon {
	/* アニメーションの命令 */
	animation: scrollAnimeBtn linear;
	/* 一番上から一番下までスクロールする間にアニメーションさせる */
	animation-timeline: scroll();
}

@keyframes scrollAnimeBtn {
	0% {
	filter: invert(100%) grayscale(100%) contrast(1000%) drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.8));
	}

	1% {
	filter: none;
	}

	100% {
	filter: none;
	}
}
.offcanvas {
    background-color: rgba(255,255,255, 0.96);
}

footer {
	background-color:#958980;
	color:#fff;
}
footer div:not(.footer-menu) a {
	
	color:#fff;
}
footer img {
	filter: invert(100%) grayscale(100%) contrast(1000%);
}

/*------------------------
home
------------------------*/

/* front-page hero */
.hero {
	width: 100%;
	position: relative;
		aspect-ratio: 750/900;
	background-color: var(--bg-color);
}

@media screen and (min-width: 768px) {
	.hero {
		height: 100%;
		aspect-ratio: 1919/650;
		min-height: 487px;
	}
}
@media screen and (min-width: 992px) {
	.hero {
		min-height: 609px;
	}
}

.hero img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width:100vw;
}

@media screen and (min-width: 768px) {
	.hero img {
		min-width: 1440px;
	}
}
@media screen and (min-width: 992px) {
	.hero img {
		min-width: 1800px;
	}
}
.hero-text {
	background-color: #958980;
	position: relative;
	color:#fff;
}
.hero-text:after {
    content: "";
    display: block;
    position: absolute;
    width: 72px;
    height: 72px;
    top: 99%;
    left: 50%;
    transform: translatex(-50%);
    background-color: #958980;
    clip-path: polygon(50% 25%, 0 0, 100% 0);
}

/*  */
	section:has(#point) {
		
		background-color: var(--bg-color);
	}
.point > .row {
	--bs-gutter-x: 48px;
	--bs-gutter-y: 150px;
	justify-content: center;
}
.point .row .col-md-6 {
	max-width: 600px;
}

@media screen and (max-width: 767px) {
	.point .row .col-12:nth-child(2n) {
		position: relative;
	}
	.point .row .col-12:nth-child(2n) >* {
		position: relative;
		z-index:2;
	}

	.point .row .col-12:nth-child(2n)::before {
		content: "";
		width: 100vw;
		height: calc(100% + 150px);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		z-index: 1;
	}
	.point .row .col-12 {
	max-width: 600px;
}
}
.point .d-flex,
.point .d-md-flex{
	gap: 25px;
	flex-direction: column;
	align-items: center;
}
@media screen and (min-width: 768px) {
	.point .d-flex,
.point .d-md-flex {
		flex-direction: row;
	}
	
}
.point h4 {
	font-size: 28px;
	margin-bottom: 0;
}
.point .point-num {
	font-family: kohinoor-bangla, sans-serif;
	font-style: normal;
	font-weight: 300;
}
@media screen and (max-width: 767px) {
section:has(#variations) .container > img,
section:has(#variations) .container > p,
section:has(#variations) .container > div.row {
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	}}
section:has(#variations) h4 {
	background-color:var(--accent-color);
	color:#fff;
	padding:.375em;
}
section:has(#variations) .col:first-child p {
	position:relative;
	width:100%;
	padding-right:calc(30% + 12px);
}
section:has(#variations) .col:first-child p:after {
	content:"";
	background-image:url("../lp-img/hooh/img-hooh-w2.webp");
	width:30%;
	max-width:110px;
	aspect-ratio:218/156;
	display:block;
    background-size: cover;
    background-position: center;
	position:absolute;
	top:0;
		right:0;
}

@media screen and (min-width: 768px) {
	section:has(#variations) .col:first-child p {
	width:100%;
	padding-right:0;
}
	section:has(#variations) .col:first-child p:after {
	width:88px;
	height:88px;
		aspect-ratio:1;
		border-radius:44px;
		top:-100px;
}

}
.cat-il.type-grid {
	display: grid;
	column-gap: 3.75%;
	row-gap: 24px;
	padding-bottom: 3rem;
	margin-bottom: 0;
	grid-template-columns: 1fr;
	justify-items: center;
}
@media screen and (min-width: 38.75em) {
	.cat-il.type-grid {
		max-width: 1000px;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 50px;
		margin-left: auto;
		margin-right: auto;
	}
}
.cat-il.type-grid article {
	width: 100%;
	margin-right: 0;
	max-width: 320px;
}
.cat-il.type-grid .itemname {
	height: 6em;line-height: 1.5;
}

#size .wp-block-table thead {
    border-bottom: 1px solid;
	background-color:var(--bg-color);
}
#size .wp-block-table * {
	border-color:#B6B5B4!important;
}
#size .d-grid {
	display: grid;
	max-width: 1000px;
	margin: auto;
	grid-template-columns: 1fr;
	gap: 64px;
	padding: 1rem;
}
@media screen and (min-width: 38.75em) {
	#size .d-grid {
		grid-template-columns: 1fr 1fr;
	}
}
.griditem {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 8px;
}
.griditem h3 {
	margin-top:1rem;
}

@media screen and (max-width: 767px) {
    .footer-menu a {
        color: #fff;
    }
}