@charset "UTF-8";

/* ===============================================
	meguri
=============================================== */

/* ==============================
	meguri-contents
============================== */
.meguri-contents__content{
	border-radius: clamp(20px, 4.5vw, 40px) !important;
	border: 1px solid var(--color-gray-dark);
}

.meguri-contents__content li {
    padding-top: 3em;
    padding-bottom: 2em;
}
.meguri-contents__content li:nth-child(n+2) {
	border-top: 1px solid var(--color-gray-dark);
}

.meguri-contents__content li > div {
	padding: 0 2.5em;
}

.meguri-contents__ttl {
    display: flex;
    align-items: center;
    gap: 0.5em;
    position: relative;
    padding-left: 4em;
}

.meguri-contents__ttl::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5em;
    aspect-ratio: 61 / 74;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

@media (max-width: 767px) {
	.meguri-contents__ttl {
		display: grid;
		grid-template-columns: 2.5em 1fr;
		align-items: center;
		column-gap: 0.6em;
		padding-left: 0;
	}

	.meguri-contents__ttl::before {
		position: static;
		transform: none;
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}

	.meguri-contents__ttl small {
		display: block;
		grid-column: 2;
		font-size: 0.7em;
		line-height: 1.4;
	}

	.meguri-contents__ttl-main {
		display: block;
		grid-column: 2;
		line-height: 1.4;
	}
}

.meguri-contents__content li:nth-child(1) .meguri-contents__ttl::before {background-image: url('/meguri/img/icon_content01.png');
}
.meguri-contents__content li:nth-child(2) .meguri-contents__ttl::before {background-image: url('/meguri/img/icon_content02.png');
}
.meguri-contents__content li:nth-child(3) .meguri-contents__ttl::before {background-image: url('/meguri/img/icon_content03.png');
}
.meguri-contents__content li:nth-child(4) .meguri-contents__ttl::before {background-image: url('/meguri/img/icon_content04.png');
}

/* ==============================
	meguri-columns
============================== */
#meguri-columns {
  scroll-margin-top: 1em;
}

.meguri-columns__bg {
    margin: 0 auto;
    padding: 5em 0 2em;
    border-radius: clamp(5rem, 34.64vw - 215.7px, 20rem) clamp(5rem, 34.64vw - 215.7px, 20rem) 0 0;
}

.meguri-columns__content {
	padding: 0 2.5em;
}

.meguri-columns__item {
	padding: 0 2.5em;
}

.meguri-columns .c-card__item-img {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.meguri-columns .c-card__item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}