@charset "utf-8";

:root {
	--gh-height: 60px;
}

@media screen and (min-width: 1024px) {
	:root {
		--gh-height: 100px;
	}
}


@media screen and (min-width: 541px) {
	.tbbr {
		display: none;
	}
}

@media screen and (min-width: 768px) {
	.tbbr {
		display:inline-block
	}
}

/* ------------------------------------------------------------------------ */


html {
	scroll-behavior: smooth;
}

body {
	
}

main {
	--color: #393d46;
	--color-a: #e6231b;
	--color-b: #1d66b0;
	--color-c: #fdd204;
	--gap: 40px;
	
	font-size: clamp(1.6rem, 1.5vw, 1.8rem);
	line-height: 2;
	color: var(--color);
	
	& a[href]:hover {
		opacity: 1 !important;
		animation: colorAnimation 0.5s linear 1;
		animation-fill-mode: both;
	}
	
	& svg,
	& .i-svg svg,
	& a[href] {
		transition: none;
	}
	
}

@keyframes colorAnimation {
	0% {
		color: var(--color);
		fill: var(--color);
	}
	25% {
		color: var(--color-c);
		fill:var(--color-c);
	}
	50% {
		color: var(--color-a);
		fill: var(--color-a);
	}
	75% {
		color: var(--color-b);
		fill: var(--color-b);
	}
	100% {
		color: var(--color);
		fill: var(--color);
	}
}


.g-header {
	background-color: transparent;
}

.g-footer {
	background-color: transparent;
}



/* ------------------------------------------------------------------------ */


.main-contents {
	font-family: "Roboto", "Noto Sans JP", "Meiryo", sans-serif;
	
	& img {
		display: block;
		width: 100%;
	}
}

.-gothic {
	display: block;
	/*font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;*/
	font-feature-settings: "palt";
	font-weight: 500;
	line-height: 1.4;
}

.c-section {
	margin: clamp(30px, 2vw, 60px) 0;
	
	& > * {
		margin: 0;
	}
}

.note {
	list-style: none;
	padding-left: 0;
	font-size: 1.2rem;
}


/* ------------------------------------------------------------------------ */


.bgcontainer {
	position: fixed;
	width: 150%;
	height: 100vh;
	inset: auto auto 0 -25%;
	z-index: -1;
}

.bgcontainer_animation {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	
	width: 100%;
	height: 100%;
	animation-name: bg-animation;
	animation-timing-function: cubic-bezier(.46,.03,.52,.96);
	animation-duration: 30s;
	animation-iteration-count: infinite;
}

@media (orientation: landscape) {
	.bgcontainer_animation {
		width: 85%;
		height: 85%;
	}
}

.bgcontainer_img {
	width: 85%;
	min-width: 360px;
	height: auto;
	opacity: 0;
	filter: blur(32px);
	transform: translateY(10vh) rotate(2.5deg);
	transition-property: opacity, filter, transform;
	transition-duration: 2s, 2s, 5s;
	transition-timing-function: ease, ease, cubic-bezier(.08,.82,.17,1);
}

body:has(.onloadcomplete) .bgcontainer_img {
	opacity: 1;
	filter: blur(0px);
	transform: translateY(-5vh) rotate(0deg);
}

@media (orientation: landscape) {
	.bgcontainer {
		width: 100%;
		inset: auto auto -5% -20%;
	}
	.bgcontainer_img {
		width: 75%;
	}
}

@keyframes bg-animation {
	0% {
		transform: translate3d(0, 20vh, 0);
	}
	50% {
		transform: translate3d(0, 10vh, 0);
	}
	100% {
		transform: translate3d(0, 20vh, 0);
	}
}


/* ------------------------------------------------------------------------ */


.l-main {
	display: flex;
	justify-content: flex-end;
	font-feature-settings: "palt";
	margin: 0 clamp(30px, 4vw, 100px);
	gap: 60px;
	container-type: inline-size;
}

.l-main-body {
	width: 87.5%;
	max-width: 1400px;
}

@container (max-width: 340px) {
	.l-main-body {
		width: 100%;
	}
}

/* ------------------------------------------------------------------------ */


.part-header {
	min-height: calc(100lvh - var(--gh-height) - clamp(100px, 10vw, 200px));
	justify-content: flex-end;
	align-items: flex-start;
	text-align: right;
	margin: 0;
	padding: var(--gh-height) 0 0 0;
	
	& + * {
		margin-top: 0;
	}
	filter: blur(32px);
	
	.onloadcomplete & {
		
		transition: filter 1s ease 0.5s;
		filter: blur(0);
		
		animation-name: intersectionAnimationColor;
		animation-duration: 5s;
		animation-delay: 0s;
		animation-timing-function: linear;
		animation-iteration-count: 1;
		animation-fill-mode: both;
	}
}

@media (orientation: landscape) {
	.part-header {
		align-items: flex-end;
		padding: 0 0 var(--gh-height) 0;
	}
}

.part-header__ttl {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	
	& .en {
		font-weight: 400;
		font-size: 7.5lvmax;
		letter-spacing: 0.075em;
		transform: translateX(0.075em);
		line-height: 1.05;
		color: inherit;
	}
	
	& .ja {
		font-size: clamp(1.6rem, 2vw, 2.8rem);
		font-weight: 500;
		line-height: 1.8;
		color: inherit;
		letter-spacing: 0.1em;
	}
	
	& .logo {
		width: 40%;
		max-width: 300px;
		margin-left: auto;
		margin-bottom: clamp(10px, 3vw, 30px);
	}
}


/* ------------------------------------------------------------------------ */


.section {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: clamp(100px, 10vw, 200px) auto;
	
	& > * {
		grid-column: 1 / -1;
	}
	
	&::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;
	}
}

.subsection {
	display: flex;
	flex-direction: column;
	gap: clamp(30px, 5vw, 60px) 0;
	margin: clamp(50px, 5vw, 100px) 0;
	
	display: grid;
	grid-template-columns: subgrid;
	
	& > * {
		grid-column: 1 / -1;
	}
	
	& > * {
		margin: 0;
	}
}

.section__head {
	display: grid;
	align-items: baseline;
	justify-content: space-between;
	padding-block: clamp(40px, 5vw, 60px) clamp(60px, 5vw, 90px);
	
	& .ttl {
		position: relative;
		grid-row: 1;
		grid-column: 1 / -1;
		width: 125%;
		font-size:  clamp(2.8rem, 4vw, 7rem) ;
		transform: scaleX(0.8);
		transform-origin: left;
	}
	
	& .subttl {
		grid-row: 1;
		font-size: clamp(1.5rem, 2vw, 2.4rem);
		transform: scaleX(0.8);
		transform-origin: right;
		white-space: nowrap;
	}
	
	& > * {
		margin: 0;
	}
}

.section__body {
	display: grid;
	grid-template-columns: subgrid;
	
	& > * {
		margin-top: 0;
		grid-column: 1 / -1;
	}
	
	& > *:last-child {
		margin-bottom: 0;
	}
}

.section-img {
	position: relative;
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	
	& .section-img__item {
		position: relative;
		
		&.-intersectionStandby {
			& .section-img__inner {
				mask-size: 0%;
			}
		}
		
		&.-intersectionVisible {
			& .section-img__inner {
				mask-size: 100%;
				transition: mask-size 1s cubic-bezier(.86,0,.07,1);
			}
		}
	}
	
	& .section-img__inner {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(245,245,245,0.75);
		
		mask-image: url(/assets/img/well-being-frontier/img_mask_reg_10p.svg);
		mask-repeat: no-repeat;
		mask-size: contain;
		mask-position: center;
		aspect-ratio: 1.618 / 1;
	}
	
	
	& .ttl {
		position: absolute;
		z-index: 1;
		width: 100%;
		font-size: clamp(1.3rem, 1vw, 1.6rem);
		text-align: center;
		inset-block-start: 0.5em;
	}
	
	& .caption {
		font-size: clamp(1.1rem, 1vw, 1.4rem);
		font-style: italic;
		margin: 0.25em 0 0 0;
		text-align: right;
	}
	
	& img {
		display: block;
		width: 100%;
		max-width: 1080px;
	}
}


/* ------------------------------------------------------------------------ */


.statement {
	
	& .statement__ttl {
		
	}
	
	& .statement__intro {
		margin: 0;
		font-size: clamp(1.8rem, 2.5vw, 4.2rem);
		line-height: 2.2;
		width: 117.6%;
		transform: scaleX(0.85);
		transform-origin: left;
		text-align: justify;
		
		&.-s {
			font-size: clamp(1.6rem, 2.5vw, 3.2rem);
		}
		
		& > *:first-child {
			margin-top: 0;
		}
		
		& > *:last-child {
			margin-bottom: 0;
		}
		
		& .ib {
			display: inline;
		}
	}
}

@media screen and (min-width: 768px) {
	.statement {
		& .ib {
			display: inline-block;
		}
		
		& .statement__intro {
			text-align: left;
		}
	}
}



/* ------------------------------------------------------------------------ */



.aside {
	margin-left: clamp(2rem, 3vw, 4em);
	padding-top: clamp(2rem, 2vw, 3em);
	padding-left: clamp(2rem, 2vw, 3em);
	font-size: clamp(1.3rem, 2vw, 1.5rem);
	border-top: 1px solid;
	border-left: 1px solid;
	border-radius: 10px 0 0 0;
	
	& .aside__ttl {
		font-size: clamp(1.3rem, 2vw, 1.7rem);
		font-weight: bold;
	}
}


/* ------------------------------------------------------------------------ */


.outline-wellbeing {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}

.outline-wellbeing__item {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	
	& .outline-wellbeing__head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 25px;
		
		& > * {
			margin: 0;
		}
	}
	
	& .outline-wellbeing__body {
		padding: 0;
		margin: 0;
		font-size: 1.5rem;
	}
	
	& .img {
		width: 20%;
		max-width: 180px;
		mask-image: url(/assets/img/well-being-frontier/img_mask.svg);
		mask-repeat: no-repeat;
		mask-size: contain;
		mask-position: center;
		order: 2;
		
		transform: translateX(-0.1vw);
		
		& img {
			
		}
		&.-intersectionStandby {
			mask-size: 0%;
			& img {
				transform: translateY(100%);
			}
		}
		&.-intersectionVisible {
			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);
			}
		}
		
		&.-a {
			background-color: color-mix(in srgb, var(--color-a) 80%, transparent); /*#df5c3c*/
		}
		
		&.-b {
			background-color: color-mix(in srgb, var(--color-b) 80%, transparent); /*#50a5d5*/
		}
		
		&.-c {
			background-color: color-mix(in srgb, var(--color-c) 80%, transparent); /*#f4db68*/
		}
	}
	
	& .ttl {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		font-weight: bold;
		padding: 0;
		
		& > * {
			margin: 0;
		}
		
		& .ja {
			line-height: 1.5;
		}
		
		& .en {
			font-weight: bold;
			font-family: 'Roboto Condensed', "Noto Sans JP", "Meiryo", sans-serif;
			text-transform: uppercase;
			font-size: clamp(2.4rem, 2vw, 3rem);
			line-height: 1;
		}
	}
}

@media screen and (min-width: 1024px) {
	
	.outline-wellbeing {
		
	}
	
	.outline-wellbeing__item {
		grid-column: auto;
		
		& .outline-wellbeing__head {
			flex-direction: column;
			align-items: flex-start;
			
		}
		
		& .ttl {
			flex-direction: row;
			align-items: baseline;
		}
		
		& .img {
			order: initial;
			width: 50%;
		}
	}
}


/* ------------------------------------------------------------------------ */


.columns {
	& .columns__inner {
		
	}
}

@media screen and (min-width: 768px) {
	
	.columns {
		max-width: 100%;
		
		& > * {
			margin: 0;
		}
		
		& .columns__inner {
			column-count: 2;
			column-gap: var(--gap);
			
			& > * {
				margin: 0;
			}
		}
	}
}

@media screen and (min-width: 1280px) {
	
	.columns {
		display: grid;
		grid-template-columns: repeat(4 , 1fr);
		gap: var(--gap);
		
		& .columns__inner {
			column-count: 3;
			grid-column: 1 / -1;
		}
	}
}

@media screen and (min-width: 1600px) {
	
	.columns {
		& .columns__inner {
			grid-column: 1 / 4;
		}
	}
}



/* ------------------------------------------------------------------------ */


.article-index {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
	
	& .article-index__item {
		margin: 0;
		padding: 0;
		
		& .article-index__anchor {
			display: flex;
			flex-direction: column;
			text-decoration: none;
			gap: 20px;
			
			& > * {
				margin: 0;
			}
		}
		
			
		& .article-index__head {
			display: flex;
			flex-direction: column;
			gap: 10px;
			
			& > * {
				margin: 0;
			}
			
			& .icon {
				&.youtube {
					color: red;
				}
			}
		}
		
		& .article-index__img {
			position: relative;
			mask-image: url(/assets/img/well-being-frontier/img_mask_reg_20p.svg);
			mask-repeat: no-repeat;
			mask-size: contain;
			mask-position: center;
			width: 100%;
			
			& img {
				display: block;
				aspect-ratio: 1.618 / 1;
				object-fit: cover;
			}
		}
		
		&.-intersectionStandby {
			& .article-index__img {
				mask-size: 0%;
				
				& img {
					filter: opacity(0);
				}
			}
		}
		
		&.-intersectionVisible {
			& .article-index__img {
				mask-size: 100%;
				transition: mask-size 1s cubic-bezier(.86,0,.07,1);
				
				& img {
					transition: filter 1s linear 0s;
					filter: opacity(1);
				}
			}
		}
		
		& a:hover {
			& .article-index__img {
				mask-size: calc(100% - 20px);
				transition: mask-size 0.2s ease-in-out;
			}
		}
		
		& .article-index__meta {
			display: flex;
			align-items: baseline;
			line-height: 1;
			gap: 1em;
			font-size: clamp(1.3rem, 1.5vw, 1.8rem);
			
			& > * {
				margin: 0;
			}
		}
		
		& .article-index__cat {
			border: 1px solid currentColor;
			border-radius: 10em;
			padding: 0.3em 0.5em;
			width: fit-content;
			margin: 0;
			line-height: 1;
		}
		
		& .article-index__date {
			margin: 0;
			line-height: 1;
		}
		
		& .article-index__ttl {
			transform-origin: left;
			transform: scaleX(0.9);
			width: 111%;
			line-height: 1.4;
			font-size: clamp(2rem, 2vw, 4rem);
		}
	}
}

@media screen and (min-width: 768px) {
	
	.article-index {
		display: grid;
		
		& .article-index__item {
			
			& .article-index__anchor {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				align-items: end;
				gap: var(--gap);
				
			}
			
			& .article-index__img {
				grid-column: 1 / 2;
			}
			
			& .article-index__head {
				grid-column: 2 / -1;
			}
			
			&:not(:has(.article-index__img)) {
				& .article-index__head {
					grid-column: 1 / -1;
				}
			}
		}
		
		&.-row {
			grid-template-columns: repeat(3, 1fr);
			
			& .article-index__item {
				& .article-index__anchor {
					grid-template-columns: initial;
					gap: calc(var(--gap) / 2);
				}
				
				& .article-index__ttl {
					font-size: clamp(2rem, 2vw, 2.6rem);
				}
			}
		}
	}
}

@media screen and (min-width: 1600px) {
	
	.article-index {
		& .article-index__item {
			& .article-index__anchor {
				grid-template-columns: repeat(4, 1fr);
				
			}
		}
	}
}



/* ------------------------------------------------------------------------ */


.tv-program {
	
}



/* ------------------------------------------------------------------------ */


.moreinfo {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}

.moreinfo__btn {
	gap: 10px;
	padding: 15px 30px;
	
	&::before {
		opacity: 1;
		border-radius: 10em;
	}
	
	& .icon {
		
		& svg {
			width: 100%;
			height: 100%;
		}
		
		&:first-child {
			margin: 0;
		}
	}
}

@media screen and (min-width: 768px) {
	.moreinfo {
		justify-content: flex-end;
	}
}


/* ------------------------------------------------------------------------ */


.-intersectionStandby {
	color: rgba(0,0,0,0.2);
	opacity: 1;
}
.-intersectionVisible {
	animation-name: intersectionAnimationColor, intersectionAnimationTransform, intersectionAnimationOpacity;
	animation-duration: 1.5s, 1s, 0.2s;
	animation-delay: 0.5s, 0.05s, 0.05s;
	animation-timing-function: linear, cubic-bezier(.08,.82,.17,1), linear;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

@keyframes intersectionAnimationColor {
	0% {
		color: rgba(0,0,0,0.3);
		fill: rgba(0,0,0,0.3);
	}
	10% {
		color: var(--color-c);
		fill:var(--color-c);
	}
	20% {
		color: var(--color-a);
		fill: var(--color-a);
	}
	60% {
		color: var(--color-b);
		fill: var(--color-b);
	}
	100% {
		color: var(--color);
		fill: var(--color);
	}
}

@keyframes intersectionAnimationTransform {
	0% {
		transform: translateY(40px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes intersectionAnimationOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}