@charset "UTF-8";

main {
	padding-bottom: 165px;
}
.toppage {
	img {
		width: 100%;
		height: auto;
	}
	* {
		box-sizing: border-box
	};
}
.mainLead {
	padding-block: 75px 0;
	font-size: 3.2rem;
	text-align: center;
	line-height: 2;
}
@media (min-width: 68.7rem) {
	.toppage {
		padding-top: 16rem;
		img {
			max-width: fit-content;
		}
	}
	.mainV {
		width: 80%;
		margin-inline: auto;
		min-width: 1050px;
		max-width: 140rem;
		a:hover {
			filter: brightness(1.15);
		}
	}
}
@media (max-width: 68.7rem) {
	.toppage {
		padding-top: 6rem;
	}
	.mainLead {
		font-size: 2rem;
	}
}

section {
	width: 80%;
	margin-inline: auto;
	padding: 75px 0;
}
h2 {
	margin-bottom: 40px;
	text-align: center;
	font-weight: 700;
	&::after {
		content: "";
		display: block;
		width: 290px;
		height: 4px;
		border-radius: 4px;
		margin: 5px auto 0;
		background-color: #c95981;
	}
}
h3 {
	font-weight: 700;
}
.toppage__btn {
	max-width: 300px;
	font-size: 1.6rem;
}
@media (min-width: 68.7rem) {
	.image-hover {
		transition: .1s ease-in-out;
		border-radius: 6px;
	}
	.image-hover:hover {
		box-shadow: 0 0 0 2px #c95981;
	}
}
@media (min-width: 68.7rem) {
	section {
		max-width: 1200px;
		min-width: 825px;
	}
}
@media (max-width: 68.7rem) {
	section {
		padding: 35px 0;
	}
	.toppage__btn {
		font-size: 2.0rem;
	}
}
@media (max-width: 768px) {
	section {
		width: 100%;
		padding: 35px 20px;
	}
}

.product__h2 {
	width: fit-content;
	margin: 0;
	text-align: left;
	font-size: 2.8rem;
	line-height: 1;
	&::after {
		display: none;
	}
}
.product__list {
	display: grid;
	gap: 40px;
	li {
		display: flex;
		align-items: center;
		gap: 10px;
		background-color: #f9f7f3;
	}
}
.product__linkWrap {
	display: grid;
	gap: 10px;
	margin-top: 5px;
}
.product__link--text {
	display: flex;
	align-items: center;
	line-height: 1;
	&::before {
		content: "";
		position: relative;
		left: -3px;
		top: 2px;
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-right: 5px;
		border-top: solid 2px #474645;
		border-right: solid 2px #474645;
		transform: rotate(45deg);
		will-change: transform;
	}
}
.product__desc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
	padding: 27px 30px;
}
@media (min-width: 1481px) {
	.toppage .product__image {
		width: 35%;
		max-width: 420px;
	}
}
@media (min-width: 68.7rem) and (max-width: 1480px) {
	.toppage .product__image {
		width: 40%;
	}
}
@media (min-width: 68.7rem) and (max-width: 1250px) {
	.toppage .product__image {
		padding-left: 3rem
	}
}
@media (max-width: 68.7rem) {
	.product {
		padding-top: 80px;
	}
	.product__h2 {
		font-size: 2.6rem;
	}
	.product__list {
		gap: 30px;
		li {
			flex-direction: column;
		}
	}
	.product__desc {
		gap: 30px;
		padding: 50px;
	}
	.product__link--btn {
		min-height: 40px;
		margin-inline: auto;
		font-size: 1.6rem;
	}
}
@media (max-width: 768px) {
	.product__desc {
		gap: 20px;
		padding: 20px;
	}
}

/* おすすめ特集 */
/* ec-common-nav.css からの変更 */
.recommend__list {
	display: flex;
	gap: 20px;
	justify-content: center;
	li {
		position: relative;
		width: 400px;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 100%;
		border-radius: 6px;
		font-size: 3.2rem;
		aspect-ratio: 40 / 27;
		transition: .1s ease-in-out;
		text-align: center;
		a {
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	li:first-of-type {
		background-image: url(/butsudan/assets/img/top/recommend-item-01.jpg)
	}
	li:nth-of-type(2) {
		background-image: url(/butsudan/assets/img/top/recommend-item-02.jpg)
	}
}
.recommendItem__text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	margin: auto;
	color: #ffffff;
	text-align: center;
}
.recommendItem__text__firstLine {
	font-size: 0.75em;
}
.recommendItem__text__secondLine {
	display: block;
}
@media (max-width: 68.7rem) {
	.recommend__list {
		li {
			aspect-ratio: 1 / 1;
			font-size: 2.1rem;
		}
		li:first-of-type {
			background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/bg-recommend_item-01.jpg)
		}
		li:nth-of-type(2) {
			background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/bg-recommend_item-02.jpg)
		}
	}
	.recommendItem__text__secondLine {
		font-size: 1.6rem;
	}
}
@media (max-width: 430px) {
	.recommend__list {
		li {
			font-size: 1.8rem;
		}
	}
}

/* その他の商品を探す */
@media (min-width: 68.7rem) {
	.product--other .ec-common-nav__categoryList {
		width: 750px;
		margin-inline: auto;
		grid-template-columns: repeat(2, 1fr);
	}
	.product--other .ec-common-nav__linkChildList {
		padding-left: 10px;
	}
}
@media (max-width: 68.7rem) {
	.product--other .ec-common-nav__button, .product--other .ec-common-nav__link {
		font-size: 1.6rem;
	}
}

/* ショッピングガイド */
.shoppingguide__itemContainer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 20px;
}
.ec-common__shoppingguideItem {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 1;
	background-color: #f9f7f3;
	border-radius: 6px;
	transition: .1s ease-in-out;
	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: calc(130 / 215 * 100%);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto;
	}
}
.shoppingguideItem-01 {
	&::before {
		background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/icon-guide.png);
		background-size: 75px;
	}
}
.shoppingguideItem-02 {
	&::before {
		background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/icon-delivery.png);
		background-size: 84px;
	}
}
.shoppingguideItem-03 {
	&::before {
		background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/icon-ihai-lg.png);
		background-size: 43px;
	}
}
.shoppingguideItem-04 {
	&::before {
		background-image: url(https://gigaplus.makeshop.jp/kuratomoec/images/icon-faq.png);
		background-size: 79px;
	}
}
.shoppingguideItem__text {
	position: absolute;
	top: calc(130 / 215 * 100%);
	left: 0;
	right: 0;
	margin: auto;
	font-size: 1.111em;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}
@media (min-width: 68.7rem) {
	.ec-common__shoppingguideItem:hover {
		color: #c95981;
		box-shadow: 0 0 0 2px #c95981;
	}
}
@media (max-width:68.7rem) {
	.shoppingguideItem__text {
		font-size: 1.6rem;
	}
}
@media (max-width: 768px) {
	.shoppingguide__itemContainer {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.ec-common__shoppingguideItem {
		&::before {
			position: relative;
			top: 1vw;
			height: calc(220 / 320* 100%);
			min-height: 80px;
		}
	}
	.shoppingguideItem-01 {
		&::before {
			background-size: calc(111 / 750 * 100vw);
		}
	}
	.shoppingguideItem-02 {
		&::before {
			background-size: calc(130 / 750 * 100vw);
		}
	}
	.shoppingguideItem-03 {
		&::before {
			background-size: calc(63 / 750 * 100vw);
		}
	}
	.shoppingguideItem-04 {
		&::before {
			background-size: calc(119 / 750 * 100vw);
		}
	}
	.shoppingguideItem__text {
		top: calc(220 / 750 * 100vw);
	}
}
@media (max-width: 440px) {
	.ec-common__shoppingguideItem {
		&::before {
			height: calc(190 / 320* 100%);
		}
	}
	.shoppingguideItem__text {
		top: calc(190 / 750 * 100vw);
	}
}

/* productpage__information */
.productpage__information {
	max-width: 108rem;
	width: 85.7%;
	margin-inline: auto;
	margin-top: 80px;
	border-top: 1px solid #D1D1D1;
}
.productpage__infomationItem {
	border-bottom: 1px solid #D1D1D1;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	padding: 4.5rem 0;
	gap: 40px;
}
.productpage__infomationImage {
	width: 156px;
}
.productpage__infomationItem dl {
	flex: 1;

}
.productpage__infomationItem dt {
	font-weight: bold;
}
.productpage__infomationItem dd {
	margin-top: 20px;
	text-align: justify;
}
@media (max-width: 68.7rem) {
	.productpage__infomationItem {
		flex-direction: column;
		padding: 25px 0 40px;
		gap: 0;
		dl {
			margin-top: 20px
		}
	}
	.productpage__infomationImage {
		width: 78px;
		margin: auto;
	}
}
@media (max-width: 768px) {
	.productpage__information {
		width: 100%;
	}
}

/* 店舗のご案内 */
.shop__list {
	text-align: center;
	img {
		border-radius: 6px;
	}
}
.shop__h3 {
	margin-top: 15px;
	font-weight: 700;
}
@media (min-width: 68.7rem) {
	.shop__list {
		display: flex;
		flex-wrap: wrap;
		gap: 35px 20px;
		justify-content: center;
		li {
			max-width: 386px;
			width: calc((100% - 40px) / 3);
		}
		.shop__item--01, .shop__item--02 {
			max-width: 600px;
			width: calc(50% - 20px);
		}
		.shop__item--01 {
			.shop__item-inner {
				margin-left: auto;
			}
		}
		.shop__item-inner {
			max-width: 386px;
			width: 64.3%;
		}
	}
	.shop__link:hover {
		.shop__h3 {
			color: #C95981;
		}
	}
}
@media (max-width: 68.7rem) {
	.shop__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.shop__h3 {
		margin-top: 5px;
		font-size: 2.0rem;
		white-space: nowrap;
	}
}
@media (max-width: 768px) {
	.shop__list {
		gap: 15px 10px;
	}
}
@media (max-width: 430px) {
	.shop__h3 {
		font-size: calc(35 / 750 * 100vw);
	}
}

/* くら友仏壇コラム */
.column__list {
	max-width: 108rem;
	width: 85.7%;
	margin-inline: auto;
	border-top: 1px dotted #D1D1D1;
}
.column__listSingle {
	width: 100%;
}
.column__listSingleCat li {
	padding: 0.5rem 2.5rem 0.7rem;
	font-size: 1.6rem;
}
.column__link {
	margin: 80px auto 0;
}
@media (max-width: 68.7rem) {
	.column__listSingleTxt {
		width: 56%;
	}
	.column__link {
		margin-top: 40px;
	}
	.column__listSingleInfo {
		margin-bottom: 5px;
	}
	.column__listSingleTxt h3 {
		font-weight: normal;
	}
}
@media (max-width: 768px) {
	.column__list {
		width: 100%;
	}
}

/* その他サービス */
.service__list {
	display: grid;
	gap: 20px;
	img {
		border-radius: 6px;
	}
}
.service__link {
	display: grid;
	gap: 10px;
	h3 {
		margin-top: 5px;
	}
}
@media (min-width: 68.7rem) {
	.service__list {
		grid-template-columns: repeat(3, 1fr);
	}
	.service__link:hover {
		.service__h3, .service__text {
			color: #C95981;
		}
	}
}
@media (max-width: 68.7rem) {
	.service__list {
		gap: 30px;
	}
	.service__h3 {
		font-size: 2.0rem;
	}
	.service__link {
		gap: 5px;
	}
}

/* お知らせ */
.productpageTop__newsContainer {
	display: grid;
	gap: 35px;
	width: 100%;
	max-width: 540px;
	margin: auto;
}
.productpageTop__newsItem {
	display: flex;
	dt {
		width: 115px;
	}
	dd {
		flex: 1;
	}
}
@media (min-width: 68.7rem) {
	.productpageTop__newsItem {
		a:hover {
			color: #C95981;
			text-decoration: underline;
		}
	}
}
@media (max-width: 68.7rem) {
	.productpageTop__newsContainer {
		gap: 15px;
	}
	.productpageTop__newsItem {
		dt {
			width: 100px;
		}
	}
}

.lowFootMenu {
	display: none;
}