@charset "utf-8";

main {
	font-size: 1.3rem;
	--color-c: #f8ce06;
}

.l-main {
	font-size: clamp(1.6rem, 1.5vw, 1.8rem);
}

.l-main-body {
	margin-right: 0;
	margin-left: auto;
}

.section {
	margin-inline: 0;
	margin-top: 0;
	grid-template-columns: repeat(2, 1fr);
	width: 100%;

	&:before {
		content: none;
	}
}

.section__head:before {
	position: absolute;
	display: block;
	width: 100%;
	height: 10px;
	inset: 0 auto auto 0;
	border-radius: 20px 0 0 0;
	border-top: 3px solid currentColor;
	border-left: 3px solid currentColor;
	content: "";
	box-sizing: border-box;
}

.section__head .ttl {

	& rt {
		font-size: clamp(1.1rem, 2vw, 1.4rem);
		padding-block-end: clamp(5px, 2vw, 10px);
	}
}

.section__head .subttl {
	position: relative;
	font-size: clamp(2.2rem, 2vw, 4.0rem);
	padding-left: clamp(70px, 6vw, 120px);
	white-space: wrap;

	&:before {
		content: "";
		width: clamp(50px, 4vw, 100px);
		height: 1px;
		background-color: currentColor;
		position: absolute;
		left: clamp(5px, 4vw, 15px);
		top: 50%;
		transform: translateY(-50%);
	}
}

[data-ruby] {
	position: relative;
}
[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -1em;
	left: 0;
	right: 0;
	margin: auto;
}

.section__body .subttl {
	font-size: clamp(2.0rem, 2vw, 3.2rem);
	white-space: wrap;
}

.section-img {

	& .section-img__inner {
		padding: 0;
	}
}

.contentsTtl {
	font-size: clamp(1.8rem, 2vw, 2.8rem);
	grid-row: 1;
	transform: scaleX(0.8);
	transform-origin: right;
	white-space: nowrap;
	transform-origin: left;
}

.subsection__contents {
	margin-top: 40px;
}

.subsection-img {

	& img {
		border-radius: clamp(8px, 4vw, 30px);
	}
}

.bgcontainer {
	opacity: 0 !important;
	transition: 1s;
}

.-visible .bgcontainer {
	opacity: .5 !important;
}

.chapter-header,
.topic-path {
	display: none;
}

@media screen and (min-width: 1024px) {

	.chapter-header {
		position: absolute;
		width: 100%;
		z-index: 1;
	}

	.subsection__contents {
		margin-top: 80px;
	}

	.columns {
		grid-template-columns: repeat(2 , 1fr);
		
		& .columns__inner {
			column-count: 2;
			grid-column: 1 / -1;
		}
	}
}


/* main img */

.main__img {
	gap: min(5vw,160px);
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	padding-top: 5em;
	margin: 0 clamp(30px, 4vw, 100px);
	margin-right: 0;
	padding-bottom: 3em;

	& img {
		/* position: absolute; */
		inset: 0;
		margin: auto;
		object-fit: cover;
		display: block;
		width: 100%;
		/* height: 100%; */
	}
}

.main__img-inner {
	position: relative;
	width: 100%;
	height: auto;
	margin-inline: auto;
	transform: translateY(30px);

	overflow: hidden;
	/* border-radius: 0 0 0 clamp(30px, 4vw, 80px); */
	/* aspect-ratio: 1/1.2; */

	transition: .8s ease 0s;
	filter: blur(32px);

	.onloadcomplete & {
		filter: blur(0);
		transform: translateY(0);
	}
}

.part-header {
	min-height: auto;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: .5lh;
	margin-right: clamp(30px, 4vw, 100px);
	text-align: left;
	padding-bottom: 0;

	& .-intersectionStandby {
		transform: translateY(100%);
	}

	& .-intersectionVisible {
		transform: translateY(0%);
		transition: transform 1s cubic-bezier(.08,.82,.17,1);
	}
}

.part-header__ttl {
	text-align: left;

	& .ja {
		transform: scaleX(0.8);
		transform-origin: left;
		letter-spacing: -.02em;
		font-weight: 600;
		font-size: clamp(5rem, 7vw, 12rem);
		line-height: 1.3;
		width: 120%;
	}
}

@media screen and (min-width: 1280px) {

	.main__img {
		padding-top: 0;
		flex: 1;
		flex-direction: row-reverse;
		align-items: flex-end;
		justify-content: space-between;
	}

	.main__img-inner {
		width: 85%;
		/* max-height: 88vh; */
		margin-inline: auto 0;

		&:before {
			content: "";
			width: 100%;
			height: 100%;
			background: linear-gradient(45deg, rgba(255,255,255,.6), transparent, transparent);
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
		}
	}

	.part-header {
		position: absolute;
		left: 0;
		/* bottom: 4lh; */
		top: 0;
		z-index: 1;
		max-width: 100ic;
		margin-inline:A 0;
		min-height: 400px;
		/* height: calc(100vh - 160px); */
		height: calc(100% - 100px);
	}
}





/* definition */

.definition__list {
	margin-block: -8vh 4vh;
}

.definition__item {
	margin-bottom: 1em;
	position: sticky;
	bottom: 0;
	margin-inline: auto;
	margin-bottom: 0;
	width: 85%;

	& .definition__inner {
		position: relative;
	}

	& .definition__contents {
		mask-image: url(/assets/img/well-being-frontier/img_mask.svg);
		mask-repeat: no-repeat;
		/* mask-size: 100%; */
		mask-position: center;
		aspect-ratio: 1 / 1;
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 1000px;
		margin-inline: auto;
		box-sizing: border-box;

		&:after {
			content: "";
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			z-index: -1;
			background-color: #fff;
			opacity: .1;
		}
	}

	& .definition__icon {
		order: 2;
		aspect-ratio: 1 / 1;
		background-color: transparent;
		width: 55%;
		margin-inline: auto;
		margin-bottom: -30px;
		z-index: 2;
		position: relative;

		& .icon {
			/* mask-size: 100%; */
			mask-image: url(/assets/img/well-being-frontier/img_mask.svg);
			mask-repeat: no-repeat;
			mask-position: center;
			background-color: transparent;
		}
	}

	&.definition__body {
		z-index: 3;

		& .definition__contents {
			background-color: var(--color-a);
		}
	}

	&.definition__heart {
		z-index: 2;
		transform: translateX(-6vw);

		& .definition__contents {
			background-color: var(--color-b);
		}
	}

	&.definition__life {
		z-index: 1;
		transform: translateX(3vw);

		& .definition__contents {
			background-color: var(--color-c);
		}
	}

	& .definition__txt {
		width: calc(100% - 60px);
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;

		& > * {
			color: #fff;
		}

		& dl,
		& .ttl {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: clamp(1em, 4vw, 3em);
			width: 100%;
		}

		& dl {
			position: relative;
			z-index: 1;
		}

		& dd {
			margin-left: 0;

			& > * {
				margin: 0;
				font-weight: 600;
			}

			&.txt {
				text-align: left;
			}
		}
	}

	& .definition__name {
		font-weight: 600;
		font-size: clamp(1.8rem, 8vw, 9rem);
		transform: scaleX(0.85);
		transform-origin: center;
		white-space: nowrap;
		line-height: 1;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		gap: 0;

		& span {
			display: inline-block;
			color: #fff;

			&:last-child {
				padding-left: 1em;
				position: relative;

				&:before {
					content: "";
					display: block;
					width: 2px;
					height: 1em;
					transform: rotate(30deg);
					inset-inline: 0 auto;
					position: absolute;
					left: .5em;
					background-color: rgba(255,255,255,1);
				}
			}
		}
	}

	& .definition__header {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: .5em;
	}

	& .definition__supply-wrap {
		z-index: 2;
		gap: .3em;
		margin: 0;

		& > * {
			color: rgba(255,255,255,.7);
			font-weight: 600;
			font-size: clamp(1.6rem, 4vw, 3rem);
			line-height: .8;
			display: inline-block;
			margin: 0;
			transform: scaleX(0.85);
			transform-origin: center;
		}
	}
}

.-intersectionStandby {

	&.definition__contents,
	&.icon {
		mask-size: 0%;
	}
}

.-intersectionVisible {

	&.definition__contents,
	&.icon {
		mask-size: 100%;
		transition: mask-size 1s cubic-bezier(.86, 0, .07, 1);
	}
}

@media screen and (min-width: 1280px) {

	.definition__list {
		position: relative;
	}

	.definition__item {
		margin-bottom: 0;
		width: 55%;

		& .definition__header {
			gap: 2em;
		}

		& .definition__inner {
			padding: 80px 0;
		}

		& .definition__contents {
			gap: 60px;
			flex-direction: row;
		}

		& .definition__icon {
			width: 60%;
			position: absolute;
			bottom: auto;
			top: auto;
			right: auto;
			left: auto;
			margin: auto;
			z-index: 1;
		}

		& .definition__txt {
			gap: 2em;

			& dd {
				width: 18em;

				&.txt {
					font-size: 1.5em;
					line-height: 1.8;
					text-align: center;
				}
			}
		}

		&.definition__body {
			margin-bottom: -14em;

			& .definition__icon {
				bottom: 0;
				right: -12em;
			}
		}

		&.definition__heart {
			margin-bottom: -14em;

			& .definition__icon {
				bottom: 5em;
				left: -12em;
			}
		}

		&.definition__life {

			& .definition__icon {
				bottom: 5em;
				right: -6em;
			}

			/* & .definition__supply-wrap2 {

				& .definition__supply {
					top: 5rem;
					right: 0rem;
					left: auto;
					bottom: auto;
					font-size: clamp(15rem, 40vw, 30rem);
				}
			} */
		}

		/* & .definition__supply-wrap2 {

			& .definition__supply {
				position: absolute;
				bottom: .2em;
				left: .15em;
			}
		} */
	}
}

@media screen and (min-width: 1600px) {

	.definition__item {

		&.definition__body {
			margin-bottom: -15em;
		}

		&.definition__heart {
			margin-bottom: -19em;
		}
	}
}




/* animation*/
.fluffy--v {
	animation-name: fluffy--vAnime;
	animation-timing-function: cubic-bezier(.46,.03,.52,.96);
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

@keyframes fluffy--vAnime {
	0% {
		transform: translate3d(0, 5vh, 0);
	}
	50% {
		transform: translate3d(0, 2vh, 0);
	}
	100% {
		transform: translate3d(0, 5vh, 0);
	}
}

.fluffy--vMin {
	animation-name: fluffy--vMinAnime;
	animation-timing-function: cubic-bezier(.46,.03,.52,.96);
	animation-duration: 6s;
	animation-iteration-count: infinite;
}

@keyframes fluffy--vMinAnime {
	0% {
		transform: translate3d(0, 3vh, 0);
	}
	50% {
		transform: translate3d(0, 1vh, 0);
	}
	100% {
		transform: translate3d(0, 3vh, 0);
	}
}

.definition__body {
	& .fluffy--v {
	}

	& .fluffy--vMin {
	}
}

.definition__heart {
	& .fluffy--v {
		animation-duration: 8s;
	}

	& .fluffy--vMin {
		animation-duration: 10s;
	}
}

.definition__life {
	& .fluffy--v {
		animation-duration: 12s;
	}

	& .fluffy--vMin {
		animation-duration: 5s;
	}
}





.scroll__anime {
	transform-origin: center;

	&.definition__body {
		animation: ScrollWrapAnimeA linear forwards;
		animation-timeline: view();
		animation-range: entry 0% cover 45%;
		animation-duration: 1ms;

			& .definition__contents {
			animation: ScrollAnimeA linear forwards;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
			animation-duration: 1ms;
		}

		& .definition__icon {
			animation: ScrollInnerAnimeA linear forwards;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
			animation-duration: 1ms;
		}
	}

	&.definition__heart {
		animation: ScrollWrapAnimeB linear forwards;
		animation-timeline: view();
		animation-range: entry 0% cover 45%;
		animation-duration: 1ms;

		& .definition__contents {
			animation: ScrollAnimeB linear forwards;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
			animation-duration: 1ms;
		}

		& .definition__icon {
			animation: ScrollInnerAnimeB linear forwards;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
			animation-duration: 1ms;
		}
	}

	&.definition__life {
		animation: ScrollWrapAnimeC linear forwards;
		animation-timeline: view();
		animation-range: entry 0% cover 45%;
		animation-duration: 1ms;

		& .definition__contents {
			animation: ScrollAnimeC linear forwards;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
			animation-duration: 1ms;
		}

		& .definition__icon {
			animation: ScrollInnerAnimeC linear forwards;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
			animation-duration: 1ms;
		}
	}

	& .definition__icon {
		transform-origin: center;
	}
}

/* animation-timeline */
/* item */
@keyframes ScrollWrapAnimeB {
	0% {
		transform: translateX(-6vw) translateY(25vh);

	}
	100% {
		transform: translateX(-6vw) translateY(0);
	}
}

@keyframes ScrollWrapAnimeC {
	0% {
		transform: translateX(0) translateY(50vh);

	}
	100% {
		transform: translateX(0) translateY(0);
	}
}



/* contents */
@keyframes ScrollAnimeA {
	0% {
		transform: rotate(-12deg);
	}
	100% {
		transform: rotate(0);
	}
}

@keyframes ScrollAnimeB {
	0% {
		transform: rotate(12deg);
	}
	100% {
		transform: rotate(0);
	}
}

@keyframes ScrollAnimeC {
	0% {
		transform: rotate(-14deg);
	}
	100% {
		transform: rotate(0);
	}
}

.-intersectionStandby {

	& .definition__icon {

		& .icon {
			mask-size: 0%;
		}

		& img {
			transform: translateY(100%);
		}
	}
}

.-intersectionVisible {

	& .definition__icon {

		& .icon {
			mask-size: 100%;
			transition: mask-size 1.6s cubic-bezier(.86,0,.07,1);
		}

		& img {
			transform: translateY(0%);
			transition: transform 1s cubic-bezier(.08,.82,.17,1);
		}
	}
}

@media screen and (min-width: 1280px) {

	/* animation-timeline */
	/* item */
	@keyframes ScrollWrapAnimeA {
		0% {
			transform: translateX(-3vw) translateY(0);

		}
		100% {
			transform: translateX(-3vw) translateY(0);
		}
	}

	@keyframes ScrollWrapAnimeB {
		0% {
			transform: translateX(-12vw) translateY(50vh);

		}
		100% {
			transform: translateX(-12vw) translateY(0);
		}
	}

	@keyframes ScrollWrapAnimeC {
		0% {
			transform: translateX(6vw) translateY(80vh);

		}
		100% {
			transform: translateX(6vw) translateY(0);
		}
	}

	/* contents */

	@keyframes ScrollAnimeA {
		0% {
			transform: translateX(3vw) rotate(-20deg);
		}
		100% {
			transform: translateX(3vw) rotate(0);
		}
	}

	@keyframes ScrollAnimeB {
		0% {
			transform: translateX(5vw) rotate(24deg);
		}
		100% {
			transform: translateX(5vw) rotate(0)
		}
	}

	@keyframes ScrollAnimeC {
		0% {
			transform: translateX(-3vw) translateY(2vw) rotate(-20deg);
		}
		100% {
			transform: translateX(-3vw) translateY(0vw) rotate(0);
		}
	}

	/* icon */
	@keyframes ScrollInnerAnimeA {
		0% {
			transform: translateX(-100px);
		}
		100% {
			transform: translateX(20px);
		}
	}

	@keyframes ScrollInnerAnimeB {
		0% {
			transform: translateX(130px);
		}
		100% {
			transform: translateX(50px);
		}
	}

	@keyframes ScrollInnerAnimeC {
		0% {
			transform: translateX(-80px);
		}
		100% {
			transform: translateX(0px);
		}
	}
}

@media screen and (min-width: 1600px) {

	/* animation-timeline */
	/* item */
	@keyframes ScrollWrapAnimeA {
		0% {
			transform: translateX(-6vw) translateY(0);

		}
		100% {
			transform: translateX(-6vw) translateY(0);
		}
	}

	@keyframes ScrollWrapAnimeB {
		0% {
			transform: translateX(-22vw) translateY(50vh);

		}
		100% {
			transform: translateX(-22vw) translateY(0);
		}
	}

	@keyframes ScrollWrapAnimeC {
		0% {
			transform: translateX(10vw) translateY(80vh);

		}
		100% {
			transform: translateX(10vw) translateY(0);
		}
	}
}




/* .intro,
.definition,
.profile {
	&.l-main {
		margin-inline: 0;
	}

	& .l-main-body {
		margin-inline: clamp(30px, 4vw, 100px);
	}

	& .section:before {
		margin-inline: clamp(30px, 4vw, 100px);
		width: 87.5%;
		max-width: 1400px;
	}
}

@media screen and (min-width: 1280px) {

	.intro,
	.definition,
	.profile {
		& .l-main-body {

		}

		& .section:before {
			right: 0;
			left: auto;
			margin-left: auto;
		}
	}
} */







/* life-story */

.life-story {
	
	& .section-img__inner {
		padding: clamp(20px, 4vw, 80px);
		box-sizing: border-box;
	}
}

@media screen and (min-width: 1440px) {

	.life-story {
	
		& .section-img__inner {
			padding: 0;
		}
	}
}





/* advisor */

.advisor__info {
	display: flex;
	flex-direction: column;
	gap: 30px;

	& .section-img__inner {
		mask-image: url(/assets/img/well-being-frontier/img_mask_reg_10p-v.svg);
	}
}

.profile {

	& .advisor__nameTxt {
		line-height: 1.4;
		margin-bottom: .5em;
	}

	& .aside {
		padding-inline: 0;

		& .subttl {
			padding-left: clamp(2rem, 2vw, 3em);
		}
	}

	& .section-img {
		& .section-img__item {
			&.-intersectionVisible {
				& .section-img__inner {
					mask-size: 95%;
				}
			}
		}
	}
}

.advisor__name {
	margin: 0 auto 1.5em;

	& b {
		font-size: clamp(1.8rem, 4vw, 3.2rem);
	}

	& .en {
		opacity: .6;
		font-size: clamp(1.1rem, 4vw, 1.4rem);
	}
}

.advisor__profileTxt {
	font-size: .88em;
}

.works__list {
	list-style: none;

	& img {
		position: relative;
		mask-image: url(/assets/img/well-being-frontier/img_mask_reg_10p.svg);
		mask-repeat: no-repeat;
		mask-size: contain;
		mask-position: center;
		width: 100%;
	}
}

.works__list .ttl,
.subsection-img .ttl {
	font-size: .85em;
	color: rgba(0,0,0,.6);
}

.works__list .ttl {
	margin-block: 0;
}

@media screen and (min-width: 1024px) {

	.profile {

		& .section-img {
			width: 45%;
		}

		& .section__txt {
			width: 55%;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		& .section__txt-inner {
			max-inline-size: 24ic;
			box-sizing: border-box;
		}

		& .advisor__nameTxt {
			text-align: center;
		}
	}

	.advisor__info {
		flex-direction: row;
		gap: 60px;
	}

	.advisor__profileTxt {
		padding-top: 2em;
		margin-top: 2em;
		border-top: 1px solid rgba(0,0,0,.2);

		& p {
			margin: 0;
		}
	}
}





/* grid */

.grid__contents {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 5px;
	transform: scale(1.15);
	transform-origin: right top;
}

.gallery__item {
	margin-bottom: 15em;
}

.gallery__item.matteru {
	margin-top: 30px;
}

.gallery__item img {
	aspect-ratio: 1.618 / 1;
    object-fit: cover;
}

/* matteru */

.matteru {

	& .item01 {
		grid-area: 1 / 4 / 2 / 5;
	}

	& .item02 {
		grid-area: 1 / 1 / 4 / 6;
	}

	& .item03 {
		grid-area: 2 / 6 / 4 / 9;
	}

	& .item04 {
		grid-area: 4 / 3 / 6 / 7;
	}

	& .item05 {
		grid-area: 4 / 7 / 6 / 11;
	}

	& .item06 {
		grid-area: 6 / 1 / 8 / 4;
	}

	& .item07 {
		grid-area: 6 / 4 / 10 / 10;
	}

	& .item08 {
		grid-area: 8 / 1 / 10 / 4;
	}

	& .item09 {
		grid-area: 10 / 2 / 15 / 10;
	}

	& .item10 {
		grid-area: 15 / 1 / 18 / 6;
	}

	& .item11 {
		grid-area: 15 / 6 / 18 / 11;
	}

	& .item12 {
		grid-area: 18 / 1 / 22 / 7;
	}

	& .item13 {
		grid-area: 18 / 7 / 20 / 10;
	}

	& .item14 {
		grid-area: 22 / 6 / 25 / 11;
	}

	& .item15 {
		grid-area: 22 / 1 / 25 / 6;
	}

	& .item16 {
		grid-area: 25 / 3 / 30 / 11;
	}

	& .item17 {
		grid-area: 30 / 1 / 33 / 5;
	}

	& .item18 {
		grid-area: 30 / 5 / 34 / 11;
	}

	& .item19 {
		display: none;
	}

	& .item20 {
		display: none;
	}
}

/* medimesse */

.medimesse {

	& .item01 {
		grid-area: 1 / 1 / 3 / 4;
	}

	& .item02 {
		grid-area: 1 / 4 / 5 / 11;
	}

	& .item03 {
		grid-area: 4 / 1 / 5 / 3;
	}

	& .item04 {
		grid-area: 5 / 1 / 8 / 6;
	}

	& .item05 {
		grid-area: 5 / 6 / 8 / 11;
	}

	& .item06 {
		grid-area: 8 / 6 / 11 / 11;
	}

	& .item07 {
		grid-area: 8 / 3 / 10 / 6;
	}

	& .item08 {
		grid-area: 11 / 2 / 15 / 10;
	}

	& .item09 {
		grid-area: 8 / 1 / 10 / 5;
		display: none;
	}

	& .item10 {
		grid-area: 15 / 1 / 17 / 6;
	}

	& .item11 {
		grid-area: 15 / 6 / 17 / 11;
	}

	& .item12 {
		grid-area: 17 / 1 / 20 / 5;
	}

	& .item13 {
		grid-area: 26 / 5 / 29 / 11;
	}

	& .item14 {
		grid-area: 22 / 1 / 26 / 9;
	}

	& .item15 {
		grid-area: 20 / 2 / 22 / 5;
	}

	& .item16 {
		grid-area: 18 / 6 / 21 / 11;
	}

	& .item17 {
		grid-area: 26 / 1 / 28 / 5;
	}
}

@media screen and (min-width: 768px) {

	.gallery__item {
		margin-bottom: 28em;
	}
}

@media screen and (min-width: 1024px) {

	.grid__contents {
		transform: scale(1.2);
	}

	.gallery__item {
		margin-bottom: 20em;
	}

	/* matteru */
	/* medimesse */

	.matteru {

		& .item01 {
			grid-area: 4 / 4 / 5 / 5;
		} 

		& .item02 {
			grid-area: 1 / 5 / 3 / 7;
		}

		& .item03 {
			grid-area: 1 / 7 / 3 / 9;
		}

		& .item04 {
			grid-area: 2 / 3 / 4 / 5;
		}

		& .item05 {
			grid-area: 9 / 4 / 10 / 5;
		}

		& .item06 {
			grid-area: 3 / 5 / 5 / 7;
		}

		& .item07 {
			grid-area: 3 / 8 / 6 / 11;
		}

		& .item08 {
			grid-area: 5 / 5 / 8 / 8;
		}

		& .item09 {
			grid-area: 4 / 3 / 6 / 5;
			display: none;
		}

		& .item10 {
			grid-area: 3 / 1 / 5 / 3;
		}

		& .item11 {
			grid-area: 6 / 2 / 9 / 5;
		}

		& .item12 {
			grid-area: 8 / 7 / 12 / 11;
		}

		& .item13 {
			grid-area: 8 / 5 /10 / 7;
			display: none;
		}

		& .item14 {
			grid-area: 9 / 5 / 11 / 7;
		}

		& .item15 {
			grid-area: 10 / 2 / 12 / 4;
		}

		& .item16 {
			grid-area: 3 / 7 / 4 / 8;
		}

		& .item17 {
			grid-area: 5 / 3 / 6 / 4;
		}

		& .item18 {
			grid-area: 6 / 8 / 8 / 10;
		}

		& .item19 {
			grid-area: 8 / 6 / 9 / 7;
		}

		& .item20 {
			grid-area: 9 / 4 / 10 / 5;
		}
	}

	.medimesse {

		& .item01 {
			grid-area: 3 / 8 / 4 / 9;
		} 

		& .item02 {
			grid-area: 2 / 4 / 4 / 6;
		}

		& .item03 {
			grid-area: 1 / 7 / 3 / 9;
		}

		& .item04 {
			grid-area: 1 / 2 / 3 / 4;
		}

		& .item05 {
			grid-area: 9 / 5 / 11 / 8;
		}

		& .item06 {
			grid-area: 3 / 6 / 5 / 8;
		}

		& .item07 {
			grid-area: 3 / 9 / 5 / 11;
		}

		& .item08 {
			grid-area: 5 / 4 / 9 / 8;
		}

		& .item09 {
			grid-area: 4 / 3 / 6 / 5;
		}

		& .item10 {
			grid-area: 7 / 1 / 9 / 3;
		}

		& .item11 {
			grid-area: 7 / 8 / 10 / 11;
		}

		& .item12 {
			grid-area: 4 / 1 / 7 / 4;
		}

		& .item13 {
			grid-area: 5 / 8 / 7 / 10;
		}

		& .item14 {
			grid-area: 8 / 3 / 9 / 4;
		}

		& .item15 {
			grid-area: 9 / 3 / 11 / 5;
		}

		& .item16 {
			grid-area: 2 / 9 / 3 / 9;
		}

		& .item17 {
			grid-area: 4 / 5 / 5 / 6;
		}
	}
}

@media screen and (min-width: 1440px) {

	.matteru,
	.medimesse {

		& .contentsTtl + p {
			max-width: 1000px;
		}
	}
}




/* intro philosophy */

.subttl.philosophy__ttl {
	font-size: clamp(1.8rem, 2.5vw, 4.2rem);
	line-height: 2.2;
	transform: scaleX(0.85);
	transform-origin: left;
}

.intro__txt-container {

	& p {
		font-size: clamp(1.8rem, 2.5vw, 3.2rem);
		line-height: 2.2;
		transform: scaleX(0.85);
		transform-origin: left;
		width: 117%;
	}
}





/* intro */

.intro__txt-container {
	margin-block-end: clamp(100px, 10vw, 200px);

	& .catch__img {
		width: 100%;
		margin: 2em auto;
	}

	& .catch--pc {
		display: none;
	}

	& .catch--sp {
		display: block;
	}
}

@media screen and (min-width: 1024px) {

	.intro__txt-container {

		& .catch__img {
			margin: 6em auto;
		}

		& .catch--pc {
			display: block;
		}

		& .catch--sp {
			display: none;
		}
	}
}





/* swiper */

.swiper {
	--swiper-theme-color : rgba(0,0,0,.65);
}

.swiper-container {
	padding-bottom: 2em;
}

.swiper-wrapper {
	padding-bottom: 1.5em;
}

.swiper-slide {
	display: block;
	width: auto;
}

/* .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
} */

.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom, .swiper-pagination-fraction {
	bottom: -10px;
}

.swiper-pagination {
	padding-bottom: .5em;
}

@media screen and (min-width: 1280px) {

	/* .swiper-container {
		height: 600px;
	} */
}