@charset "UTF-8";

:root {
	--color-body-1: #000;
	--color-theme-1: #AD002D;
	--color-theme-1-1: #FFEEF2;
	--color-gray-1: #F6F6F6;
	--color-gray-2: #D9D9D9;
	--color-gray-3: #6d6d6d;
	--color-gray-4: #a0a0a0;
	--color-gray-5: #F3F1EE;
	--color-gray-6: #E6E4E0;
	--color-gray-7: #877F73;
	--color-gray-8: #D6D0C5;

	--gothic: "Noto Sans JP", sans-serif;
	--en: "Montserrat", "Noto Sans JP", sans-serif;
	--fw: 400;
	--lh: 1.8;
	--op: 0.6;
	--ts: 0.3s;

	--content-w: 1080px;
	--container: var(--content-w);
	--padding: 40px;
	--stack: 50px;
	@media(max-width: 1199px) {
		--padding: 20px;
	}
	@media(max-width: 575px) {
		--padding: 8px;
	}
}

* {
	--font-size: calc((var(--fs) / 16) * 1rem);
	font-size: var(--font-size);
}

:where(b, strong, span, i, em, ::before, ::after):where(.editor-styles-wrapper *) {
	--font-size: calc((var(--fs) / 16) * 1rem);
	font-size: inherit;
}

.editor-styles-wrapper {
	color: var(--color-body-1);
	font-size: var(--font-size);
	font-family: var(--gothic);
	font-weight: var(--fw);
	a {
		color: var(--color-body-1);
	}
/* 	p {
		a {
			align-items: baseline;
			color: var(--color-gray-4);
			text-decoration: underline;
			&::after {
				--mask: url(img/icon-up-right.svg);
				aspect-ratio: 1;
				background: #ff104e;
				content: "";
				display: inline-block;
				height: auto;
				-webkit-mask: var(--mask) no-repeat center/contain;
				mask: var(--mask) no-repeat center/contain;
				margin-left: 0.5em;
				width: 11px;
			}
			&[target="_blank"]::after {
				--mask: url(img/icon-divide.svg);
			}
		}
	} */
	figure.wp-block-flexible-table-block-table > table tr {
		:is(th, td) {
			background: none;
			border: none;
		}
	}
}

:where(.editor-styles-wrapper .column),
:where(.editor-styles-wrapper .wp-block-column),
:where(.editor-styles-wrapper .wp-block-group) {
	border: 1px dashed gray;
}

:is(.wp-block-group, .wp-block-column) :first-child {
	margin-top: 0;
}

:is(.wp-block-group, .wp-block-column) :last-child {
	margin-bottom: 0;
}

h2:where(.wp-block-heading):where(.is-style-default, :not([class*="is-style"])) {
	--fs: 32;
	align-items: baseline;
	display: flex;
	font-size: var(--font-size);
	font-weight: 700;
	gap: 12px;
	margin-block: 80px 24px;
	&::before {
		aspect-ratio: 1;
		background: url(img/icon-app.svg) no-repeat center/contain;
		content: "";
		display: inline-block;
		flex: none;
		height: auto;
		margin-inline: -4px;
		margin-top: 2px;
		width: 24px;
	}
	&:first-child {
		margin-top: 0;
	}
	@media(max-width:991px) {
		--fs: 22;
		gap: 10px;
	}
}

h3:where(.wp-block-heading):where(.is-style-default, :not([class*="is-style"])) {
	--fs: 22;
	align-items: center;
	display: flex;
	font-size: var(--font-size);
	font-weight: 700;
	gap: 11px;
	margin-block: 30px 22px;
	&::before {
		background: var(--color-theme-1);
		content: '';
		display: inline-block;
		flex: none;
		height: 2px;
		width: 10px;
	}
	&:first-child {
		margin-top: 0;
	}
	@media(max-width:991px) {
		--fs: 18;
		margin-bottom: 20px;
	}
}

h4:where(.wp-block-heading):where(.is-style-default, :not([class*="is-style"])) {
	--fs: 18;
	border-left: 5px solid var(--color-theme-1);
	font-size: var(--font-size);
	font-weight: 700;
	padding-left: 12px;
	margin-block: 40px 16px;
	&:first-child {
		margin-top: 0;
	}
}

ul:where(.wp-block-list):where(.is-style-default, :not([class*="is-style"])) {
	line-height: var(--lh);
	list-style: none;
	padding: 0;
	margin-bottom: 30px;
	li {
		padding-left: 25px;
        position: relative;
		&::before {
			aspect-ratio: 1;
            background: var(--color-gray-2);
            content: '';
            display: inline-block;
            flex: none;
            height: auto;
            width: 6px;
            left: 5px;
            position: absolute;
            top: calc(18px * 1.8 / 2 - 3px);
		}
		+ li {
			margin-top: 12px;
		}
	}
	ul {
		li {
			+ li {
				margin-top: 5px;
			}
		}
	}
	@media(min-width: 992px) {
		--fs: 18;
		font-size: var(--font-size);
		ul {
			--fs: 17;
		}
	}
}

.wp-embed-aspect-1-1 iframe[src*="youtube"] {
	aspect-ratio: 1 / 1;
	height: auto;
	width: 100%;
}

.wp-embed-aspect-1-2 iframe[src*="youtube"] {
	aspect-ratio: 1 / 2;
	height: auto;
	width: 100%;
}

.wp-embed-aspect-4-3 iframe[src*="youtube"] {
	aspect-ratio: 4 / 3;
	height: auto;
	width: 100%;
}

.wp-embed-aspect-16-9 iframe[src*="youtube"] {
	aspect-ratio: 16 / 9;
	height: auto;
	width: 100%;
}

.wp-embed-aspect-18-9 iframe[src*="youtube"] {
	aspect-ratio: 18 / 9;
	height: auto;
	width: 100%;
}

.wp-embed-aspect-21-9 iframe[src*="youtube"] {
	aspect-ratio: 21 / 9;
	height: auto;
	width: 100%;
}

.wp-block-image {
	margin-bottom: 40px;
	:where(figcaption) {
		--fs: 14;
		color: #808080;
		line-height: 1.5;
		margin-block: 16px 24px;
	}
	@media(max-width: 767px) {
		margin-bottom: 36px;
	}
}

.item-icon {
	flex: none;
    line-height: 1px;
    transition: var(--ts);
    width: 9px;
	&::before {
		aspect-ratio: 9/15;
		background: var(--icon, url(img/icon-arrow.svg)) no-repeat center/contain;
		content: '';
		display: inline-block;
		height: auto;
		width: 100%;
	}
}

.cta-button-outline,
.cta-button {
	--fs: 15;
	align-items: center;
	background: var(--bg, var(--color-theme-1));
	border: 1px solid var(--color-theme-1);
	border-radius: 6px;
	color: var(--color, #fff);
	display: inline-flex;
	font-size: var(--font-size);
	font-weight: 700;
	justify-content: center;
	overflow: hidden;
	padding: 13px 25px;
	position: relative;
	width: min(170px,100%);
	z-index: 0;
	&::before {
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: background-size var(--ts);
        z-index: -1;
	}
	&:hover {
		&::before {
			background-position: 0 100%;
			background-size: 100% 100%;
		}
	}
}

.cta-button {
	&::before {
		background: linear-gradient(to right, #fff, #fff) no-repeat 100% 100% / 0 100%;
	}
	&:hover {
		--color: var(--color-theme-1);
		--icon: url(./img/icon-arrow-3.svg);
	}
}

.cta-button-icon {
	flex: none;
    line-height: 1px;
    transition: var(--ts);
    width: 9px;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	&::before {
		aspect-ratio: 9/15;
		background: var(--icon, url(img/icon-arrow-2.svg)) no-repeat center/contain;
		content: '';
		display: inline-block;
		height: auto;
		width: 100%;
	}
}

.cta-button-outline {
	--bg: #fff;
	--color: var(--color-theme-1);
	--icon: url(img/icon-arrow-3.svg);
	&::before {
		background: linear-gradient(to right, #FFEEF2, #FFEEF2) no-repeat 100% 100% / 0 100%;
	}
}

/*		Lazy Blocks		*/

/*	カラム（テーマ）	*/
.columns {
	display: grid;
	gap: 24px;
	margin-bottom: 24px;
	:first-child {
		margin-top: 0;
	}
	:last-child {
		margin-bottom: 0;
	}
	@media(min-width:992px) {
		grid-template-columns: 1fr 2fr;
		.column:first-child {
			padding: var(--padding);
		}
	}
}

.columns-start {
	align-items: start;
}

.columns-center {
	align-items: center;
}

.columns-end {
	align-items: end;
}

.feature-list {
	list-style: none;
	line-height: var(--lh);
	padding: 0;
	@media(min-width:992px) {
		--fs: 18;
	}
	li + li {
		margin-top: 16px;
	}
	li {
		padding-left: 25px;
		position: relative;
		&::before {
			aspect-ratio: 1;
			background: var(--color-gray-2);
			content: '';
			display: inline-block;
			flex: none;
			height: auto;
			width: 6px;
			left: 5px;
			position: absolute;
			top: calc(18px * 1.8 / 2 - 3px);
		}
	}
}

/* YouTube 埋め込み（テーマ） */
.ytp {
	aspect-ratio: 16/9;
	display: grid;
	> * {
		grid-area: 1/-1
	}
}

.ytp-video {
	aspect-ratio: 16/9;
	height: auto;
	width: 100%;
}

.ytp-poster {
	background: none;
	border: 0;
	display: grid;
	padding: 0;
	overflow: hidden;
	> * {
		grid-area: 1/-1;
		transition: transform var(--ts);
	}
	&:hover {
		.ytp-thumb {
			transform: scale(1.05);
		}
		.ytp-play {
			transform: scale(1.3);
		}
	}
}

.ytp-thumb {
	img {
		aspect-ratio: 16/9;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}
}

.ytp-play {
	aspect-ratio: 1;
	background: url(./img/icon-play.svg) no-repeat center/contain;
	display: inline-block;
	height: auto;
	place-self: center;
	width: 119px;
}

/*	カバーメニュー	*/
.cover-menu {
	display: grid;
	gap: 40px 24px;
	.cover-menu-item {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		gap: 0;
		text-decoration: none;
		.cover-menu-image {
			position: relative;
			border-radius: 6px 6px 0 0;
			overflow: hidden;
		}
		img {
			display: block;
			max-width: 100%;
			width: 100%;
			object-fit: cover;
			transition: transform var(--ts);
		}
		p {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 1em;
			background: var(--color-gray-5);
			--fs: 18;
			font-size: var(--font-size);
			line-height: normal;
			font-weight: 500;
			box-shadow: 0 1px 0 var(--color-gray-6);
			border-radius: 0 0 6px 6px;
			padding: 16px 20px;
			margin-top: 0;
			margin-bottom: 0;
		}
		&:hover {
			img {
				transform: scale(1.1);
			}
			p {
				color: var(--color-theme-1);
			}
		}
	}
	&.columns-2 {
		grid-template-columns: repeat(2,1fr);
		img {
			aspect-ratio: 528 / 200;
		}
	}
	&.columns-3 {
		grid-template-columns: repeat(3,1fr);
		img {
			aspect-ratio: 344 / 200;
		}
	}
}

@media(max-width: 991px) {
	.cover-menu {
		gap: 24px 14px;
		.cover-menu-item p {
			--fs: 16;
			padding: 12px;
		}
		&.columns-2 {
		grid-template-columns: 1fr;
		}
		&.columns-3 {
			grid-template-columns: repeat(2,1fr);
		}
	}
}

/*		キャッチコピー		*/
.interview-catchcopy {
	position: relative;
	background: url(img/catchcopy-bg.png) top left / auto;
	padding: 40px 20px;
	margin-block: 45px 40px;
	&::before {
		content: "";
		width: 100%;
		height: 100%;
		background: 
			url(img/catchcopy-left-top.svg) no-repeat top left / 20px 20px,
			url(img/catchcopy-right-top.svg) no-repeat top right / 20px 20px,
			url(img/catchcopy-left-bottom.svg) no-repeat bottom left / 20px 20px,
			url(img/catchcopy-right-bottom.svg) no-repeat bottom right / 20px 20px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
	}
	p {
		--fs: 24;
		font-size: var(--font-size);
		font-weight: 700;
		text-align: center;
		line-height: calc((36 + 10) / 24);
		margin-bottom: 0;
		span {
			background: #FFF;
			box-decoration-break: clone;	
			-webkit-box-decoration-break: clone;
			display: inline;
			line-height: calc(36 / 24);
			padding-inline: 16px;
		}
	}
}

@media(max-width: 991px) {
	.interview-catchcopy {
		padding: 30px 20px;
		margin-block: 40px;
		p {
			line-height: calc((36 + 5) / 24);
			--fs: 20;
			text-align: start;
			br {
				display: none;	
			}
			span {
				padding-inline: 8px;
			}
		}
	}
}

/*		メンバーとの関わり		*/
.member-list {
	list-style: none;
	padding: 0;
	margin-top: 36px;
	margin-bottom: 80px;
	&:last-child {
		margin-bottom: 0;
	}
}

.member-item {
	display: grid;
	align-items: start;
	gap: 16px 30px;
	border-top: 1px solid var(--color-gray-2);
	padding-block: 20px;
	&:last-child {
		border-bottom: 1px solid var(--color-gray-2);
	}
	&:has(.member-image) {
		grid-template-columns: 160px 1fr;
	}
}

.member-image {
	position: relative;
	overflow: hidden;
	border-radius: 50%;
}

.member-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
	transition: var(--ts);
}

a.member-item:hover {	
	.member-image img {
		transform: scale(1.1);
	}
}

.member-title {
	display: grid;
	gap: 4px;
	margin-bottom: 6px;
	.member-name {
		display: flex;
		align-items: baseline;
		gap: 8px;
		--fs: 20;
		font-weight: 500;
		line-height: normal;
		margin-bottom: 0;
		&::before {
			content: "";
			display: block;
			width: 4px;
			height: 12px;
			background: linear-gradient(to bottom, var(--color-theme-1) 0, var(--color-theme-1) 4px, transparent 4px, transparent 8px, var(--color-gray-2) 8px, var(--color-gray-2) 12px);
		}
	}
	.member-category {
		display: block;
		--fs: 14;
		font-weight: 500;
		color: var(--color-theme-1);
	}
}

.member-text {
	line-height: 1.6;
	margin-bottom: 0;
}

@media(max-width: 991px) {
	.member-list {
		margin-top: 30px;
		margin-bottom: 60px;
		li {
			display: contents;
		}
	}
	.member-item {
		&:has(.member-image) {
			grid-template-columns: 120px 1fr;
			grid-template-rows: auto auto;
			align-items: center;
		}
	}
	.member-content {
		display: contents;
	}
	.member-text {
		grid-column: span 2;
	}
}

.has-theme-1-color {
	color: var(--color-theme-1);
}