@charset "utf-8";
:root {
	--clr_wb: #3d0167;
	--clr_yellow: #fff13b;
	--clr_pink: #d34390;
	--clr_pink_shadow: #b12475;
	--clr_cream: #fefef2;
	--clr_gray: #666666;
}
main {
	color: #2a2a2a;
	font-family: "Zen Maru Gothic", "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
	font-weight: 500;
	line-height: 1.5;
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	img {
    height: auto;
    max-width: 100%;
	}
}
.dst_mv,
.inner {
	margin-inline: auto;
	max-width: calc(980px + 2rem);
	padding-inline: 1rem;
	@media (min-width: 768px) {
		width: calc(980px + 2rem);
	}
}

/* ========== パーツ ========== */
.dst_profile {
	border: 1px solid var(--clr_wb);
	border-radius: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	margin-top: 2rem;
	padding: 0 1rem 1rem;
	@media (min-width: 768px) {
		padding-inline: 2rem;
	}
	.profile_item {
		+.profile_item {
			margin-top: 1.5rem;
		}
		.profile_ttl {
			text-align: center;
			transform: translateY(-50%);
			em {
				background-color: var(--clr_wb);
				border-radius: 100dvw;
				color: #fff;
				display: inline-block;
				font-weight: 500;
				line-height: 1.3;
				min-width: 8em;
				padding: .1em 1em .2em;
			}
		}
		.profile_cnt {
			margin-top: 1rem;
		}
	}
}
.dst_data {
	display: grid;
	gap: 1rem 1rem;
	@media (min-width: 768px) {
		gap: .2rem 1rem;
	}
	grid-template-columns: auto 1fr;
	grid-auto-rows: auto;
	>.data_item {
		display: grid;
		grid-column: 1 / 3;
		grid-template-columns: subgrid;
		.data_ttl,
		.data_cnt {
			padding: 0 .5rem;
			.data_note {
				display: inline-block;
				font-size: 87.5%;
				line-height: 1.4;
			}
		}
		.data_ttl {
			position: relative;
			&::after {
				background-color: #ddd;
				content: "";
				height: calc(100% + 1rem);
				position: absolute;
				right: -.4rem;
				top:0;
				transform: translateX(50%);
				width: 2px;
			}
		}
		&:last-child {
			.data_ttl {
				&::after {
					height: 100%;
				}
			}
		}
	}
	&.type_timeline {
		>.data_item {
			.data_ttl {
				&::before {
					aspect-ratio: 1 / 1;
					background-color: var(--clr_wb);
					border-radius: 100dvw;
					content: "";
					position: absolute;
					right: -.4rem;
					top: .5lh;
					transform: translate(50%, -50%);
					width: .5rem;
					z-index: 1;
				}
			}
			&:first-child {
				.data_ttl {
					&::after {
						height: calc(100% + 1rem - .5lh);
						top: .5lh;
					}
				}
			}
			&:last-child {
				.data_ttl {
					&::after {
						height: .5lh;
					}
				}
			}
		}

	}
}
.wrap_data_photo {
	@media (min-width: 768px) {
		&:has(.box_photo:only-child) {
			margin-inline: auto;
			max-width: 640px;
		}
	}
}
.box_photo {
	margin-top: 2rem;
	padding-inline: 1rem;
	width: fit-content;
	figcaption {
		font-size: 0.625rem;
		font-weight: 600;
		margin-top: .3rem;
		text-align: center;
	}
	@media (min-width: 768px) {
		padding-inline: 0;
		figcaption {
			font-size: 0.75rem;
			font-weight: 500;
			padding-inline: .2rem;
			text-align: right;
		}
	}
}
.box_btn {
	margin-top: 2rem;
	.btn_cta {
		align-items: center;
		background-color: var(--clr_pink);
		border-radius: 100dvw;
		box-shadow: 4px 4px 0 var(--clr_pink_shadow);
		color: #fff;
		display: flex;
		font-size: 1.25rem;
		font-weight: 700;
		min-height: 3em;
		justify-content: center;
		line-height: 1;
		margin-inline: auto;
		max-width: 480px;
		min-width: 15em;
		padding-inline: 2.75rem;
		position: relative;
		transition: transform .4s ease;
		width: 85%;
		&::after {
			aspect-ratio: 1 / 1;
			background-color: var(--clr_yellow);
			content: "";
			inset: 0 1rem 0 0;
			margin: auto 0 auto auto;
			mask-image: url(../img/ozawa/ico_arrow_circle.svg);
			mask-position: center;
			mask-repeat: no-repeat;
			mask-size: contain;
			position: absolute;
			width: 1.75rem;
		}
	}
	@media (min-width: 768px) {
		margin-top: 5rem;
		.btn_cta {
			font-size:1.75rem; 
		}
	}
}

/* ========== MV ========== */
.wrap_mv {
	margin-inline: auto;
	position: relative;
	width: fit-content;
	.dst_mv {
		bottom: 0;
		font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
		position: absolute;
		.mv_ttl {
			span {
				background-color: var(--clr_wb);
				color: #fff;
				display: inline-block;
				font-size: 1rem;
				font-weight: bold;
				line-height: 2;
				padding-inline: 1rem;
				text-align: center;
			}
		}
		.mv_cnt {
			align-items: flex-start;
			display: flex;
			flex-direction: column;
			gap: .5rem 0;
			margin-top: .5rem;
			padding-bottom: 1rem;
			span {
				background-color: rgba(255,255,255,.7);
				color: var(--clr_wb);
				font-size: 1.375rem;
				font-weight: 800;
				line-height: 1.4;
				padding-inline: 1rem;
				em {
					font-size: 1.5rem;
				}
				strong {
					font-size: 1.75rem;
					font-weight: 700;
				}
			}
			small {
				color: #fff;
				font-size: 0.625rem;
				text-shadow: 0 0 1px var(--clr_wb), 0 0 1px var(--clr_wb), 0 0 1px var(--clr_wb);
			}
		}
	}
	@media (min-width: 768px) {
		.dst_mv {
			inset-inline: 0;
			.mv_ttl {
				span {
					font-size: 1.25rem;
				}
			}
			.mv_cnt {
				span {
					font-size: 1.75rem;
					em {
						font-size: 2.25rem;
					}
					strong {
						font-size: 3rem;
					}
				}
				small {
					font-size: 0.75rem;
				}
			}
		}
	}
}

/* ========== ページタイトル ========== */
.wrap_page_ttl {
	margin-block: 3rem 2rem;
	.page_ttl {
		align-items: center;
		display: flex;
		flex-direction: column;
		font-size: 1rem;
		span {
			font-size: 0.875rem;
		}
		em {
			align-items: baseline;
			background-image: linear-gradient(to top, transparent 6%, var(--clr_yellow) 6%, var(--clr_yellow) 30%, transparent 30%);
			display: flex;
			gap: 0 .2rem;
			line-height: 1.2;
			padding-inline: .4rem;
			strong {
				font-size: 2.5rem;
				font-weight: 600;
			}
			span {
				font-size: 1.375rem;
			}
		}
	}
	.page_ttl_note {
		font-size: 0.9375rem;
		font-weight: 600;
		margin-top: .5rem;
		text-align: center;
	}
	@media (min-width: 768px) {
		.page_ttl {
			align-items: baseline;
			flex-direction: row;
			gap: 0 1rem;
			justify-content: center;
			span {
				font-size: 1.25rem;
			}
			em {
				gap: 0 .5rem;
				strong {
					font-size: 3rem;
				}
				span {
					font-size: 1.5rem;
				}
			}
		}
		.page_ttl_note {
			font-size: 1rem;
		}
	}
}
.page_lead {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-inline: auto;
	max-width: 900px;
	@media (min-width: 768px) {
		font-size: 1.125rem;
		text-align: center;
	}
}

/* ========== プロフィール ========== */
.dst_profile {
	.profile_item {
		&.personal_info {
			.profile_ttl {
				margin-bottom: -1rem;
				transform: none;
				em {
					background-color: transparent;
					color: var(--clr_wb);
					font-size: 1.75rem;
					font-weight: bold;
					line-height: 1.6;
				}
			}
			.dst_data {
				grid-template-columns: min(6em, 45%) 1fr;
			}
		}
		&.golf_career {
			.profile_ttl {
				transform: none;
				em {
					font-size: 1rem;
				}
			}
			.dst_data {
				grid-template-columns: min(6em, 45%) 1fr;
			}
		}
	}
}
@media (min-width: 768px) {
	.wrap_data_photo {
		&.type_page_ttl {
			display: grid;
			gap: 0 2rem;
			grid-template-columns: 3fr 2fr;
			margin-top: 3rem;
			.dst_profile {
				font-size: 0.75rem;
				grid-column: 2 / 3;
				grid-row: 1 / 2;
			}
			.box_photo {
				grid-column: 1 / 2;
				grid-row: 1 / 2;
			}
		}
	}
}

/* ========== インタビュー ========== */
.hdg_interview {
	border-color: var(--clr_wb);
	border-style: solid;
	border-width: 1px 0;
	color: var(--clr_wb);
	font-size: 1.375rem;
	font-weight: 600;
	margin-block: 2rem 1rem;
	text-align: center;
	padding-block: .5rem .6rem;
	@media (min-width: 768px) {
		font-size: 2rem;
		margin-block: 4rem 2rem;
		padding-inline: .5rem;
		text-align: left;
	}
}
.txt_interviewer {
	font-size: 1rem;
	&::before {
		content: "―";
		display: inline-block;
		font-weight: 900;
	}
}
.wrap_interviewee {
	align-items: center;
	display: grid;
	gap: 0 1rem;
	grid-template-columns: calc(3rem + 4px) auto;
	margin-top: 1rem;
	.interviewee_ico {
		aspect-ratio: 1 / 1;
		background-color: var(--clr_wb);
		border: 2px solid var(--clr_wb);
		border-radius: 100dvw;
		display: block;
		width: 100%;
		overflow: hidden;
		position: relative;
		z-index: 1;
		img {
			object-fit: cover;
		}
		.interviewee_caption {
			background-color: var(--clr_wb);
			bottom: 0;
			color: #fff;
			display: block;
			font-size: 0.375rem;
			font-weight: 600;
			padding-block: 2% 4.5%;
			position: absolute;
			text-align: center;
			width: 100%;
		}
	}
	.interviewee_txt {
		background-color: var(--clr_cream);
		border: 1px solid var(--clr_wb);
		border-radius: 1rem;
		min-height: 6rem;
		padding: 1rem;
		position: relative;
		width: 100%;
		&::before {
			border-color: var(--clr_wb) var(--clr_wb) transparent transparent;
			border-style: solid;
			border-width: .5rem;
			content: "";
			height: 0;
			inset: 50% auto auto 0;
			position: absolute;
			transform: translate(-100%, calc((50% - .25rem) * -1));
			width: 0;			
		}
		&::after {
			border-color: var(--clr_cream) var(--clr_cream) transparent transparent;
			border-style: solid;
			border-width: calc(.5rem - 1px);
			content: "";
			height: 0;
			inset: 50% auto auto 0;
			position: absolute;
			transform: translate(calc((100% - .5px) * -1), calc((50% - .25rem) * -1));
			width: 0;			
		}
		.txt_interviewee {
			color: var(--clr_wb);
			font-size: 1rem;
			font-weight: 500;
			+.txt_interviewee {
				margin-top: 1rem;
			}
		}
	}
	@media (min-width: 768px) {
		gap: 0 2rem;
		grid-template-columns: 5.125rem auto;
		margin-top: 2rem;
		.interviewee_ico {
			.interviewee_caption {
				font-size: 0.625rem;
			}
		}
		.interviewee_txt {
			padding: 2rem;
			&::before {
				border-width: .9rem;
				inset: 50% auto auto 0;
				transform: translate(-100%, calc((50% - .65rem) * -1));
			}
			&::after {
				border-width: calc(.9rem - 1px);
				inset: 50% auto auto 0;
				transform: translate(-100%, calc((50% - .65rem) * -1));
			}
			.txt_interviewee {
				font-weight: 500;
			}
		}
	}
}
.wrap_data_photo {
	&.type_interview_1 {
		@media (min-width: 768px) {
			display: grid;
			gap: 0 3rem;
			grid-template-columns: 8fr 10fr;
			margin: 3rem auto 0;
			max-width: 860px;
		}
	}
}

/* ========== クロージング ========== */
.closing {
	font-size: 1rem;
	margin-top: 5rem;
	@media (min-width: 768px) {
		margin-top: 8rem;
	}
}

/* ========== ロングインタビュー ========== */
.box_video {
	margin-top: 3rem;
	.video_ttl {
		color: var(--clr_pink);
		display: flex;
		column-gap: .2em;
		font-size: 1rem;
		font-weight: 700;
		justify-content: center;
		&::before,
		&::after {
			background-color: var(--clr_pink);
			content: "";
			height: 1lh;
			transform-origin: center bottom;
			transform: rotate(30deg);
			width: 2px;
		}
		&::before {
			transform: rotate(-30deg);
		}
	}
	.video_cnt {
		margin-top: .5rem;
		iframe {
			aspect-ratio: 16 / 9;
			width: 100%;
		}
	}
	@media (min-width: 768px) {
		margin: 5rem auto 0;
		max-width: 640px;
		.video_ttl {
			column-gap: .5rem;
			font-size: 1.25rem;
		}
	}
}

/* ========== レギュラーコース ========== */
.aside_regular {
	background-color: var(--clr_cream);
	font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
	margin-top: 3rem;
	padding-bottom: 3rem;
}
.hdg_regular {
	align-items: center;
	background-color: var(--clr_wb);
	color: #fff;
	display: flex;
	flex-direction: column-reverse;
	font-size: 1.625rem;
	justify-content: center;
	line-height: 1.3;
	margin-bottom: 2rem;
	padding-block: .8rem 1rem;
	position: relative;
	text-align: center;
	&::after {
		aspect-ratio: 5 / 2;
		background-color: var(--clr_wb);
		bottom: 0;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		content: "";
		height: 1rem;
		margin-inline: auto;
		position: absolute;
		transform: translateY(95%);
		width: auto;
	}
}
.regular_lead {
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.3;
	margin-top: 1rem;
	text-align: center;
	@media (min-width: 768px) {
		margin-top: 2rem;		
	}
}
.lst_regular {
	.regular_item {
		margin-top: 1rem;
		.regular_link {
			background-color: #fff;
			border-radius: 1rem;
			display: block;
			padding: .5rem;
		}
	}
}
.regular_detail {
	text-align: right;
}
.dst_course {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto auto;
	>.course_ttl {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	>.course_target {
		grid-column: 1 / 2;
		grid-row: 2 / 3;
	}
	>.course_img {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
	>.course_summary {
		grid-column: 1 / 3;
		grid-row: 3 / 4;
	}
}
.lst_regular_course {
	.item {
		font-weight: 700;
		margin-top: 2rem;
		text-align: center;
		.catch {
			color: var(--clr_pink);
			font-size: 4cqw;
		}
		.btn {
			border-radius: .5rem;
			display: grid;
			gap: .4rem 1.5rem;
			grid-template-columns: 1fr 45%;
			grid-template-rows: 3fr 2fr;
			margin-top: 1rem;
			overflow: hidden;
			&:link {
				color: inherit;
			}
			&.course_1 {
				background-color: #fb9b29;
			}
			&.course_2 {
				background-color: #25c782;
			}
			&.course_3 {
				background-color: #21adc5;
			}
			.dst_regular_course {
				align-content: center;
				display: flex;
				flex-direction: column;
				gap: .5rem 0;
				grid-column: 1 / 2;
				grid-row: 1 / 3;
				justify-content: center;
				position: relative;
				.ttl {
					align-items: center;
					color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					line-height: 1;
					em {
						font-size: 1.125rem;
					}
				}
				.target {
					span {
						background-color: #fff;
						border-radius: .25rem;
						color: var(--clr_brown);
						display: block;
						font-size: 0.75rem;
						line-height: 1;
						margin-inline: auto;
						padding-block: .3em;
						width: 80%;
					}
				}
				&::after {
					aspect-ratio: 1 / 1;
					background-image: url(../img/ozawa/ico_arrow_circle.svg);
					background-position: center;
					background-repeat: no-repeat;
					background-size: 100% auto;
					content: "";
					inset-block: 0;
					margin-block: auto;
					position: absolute;
					right: 0;
					transform: translateX(100%);
					width: 1.2rem;
				}
			}
			.course_img {
				grid-column: 2 / 3;
				grid-row: 1 / 3;
			}
		}
		.summary {
			color: var(--clr_brown);
			font-size: 0.8125rem;
			letter-spacing: -.1em;
			line-height: 1.4;
			margin-top: .5rem;
		}
	}
	@media (min-width: 768px) {
		display: grid;
		gap: 0 2rem;
		grid-template-columns: 1fr 1fr 1fr;
		.item {
			.btn {
				grid-template-columns: 1fr;
				grid-template-rows: 1fr auto;
				margin-top: 0;
				&::before {
					margin: 0 0 auto auto;
					inset: 1rem 1rem 0 0;
				}
				.dst_regular_course {
					grid-column: 1 / 2;
					grid-row: 1 / 2;
					padding-block: 1rem .5rem;
					.ttl {
						flex-direction: row;
						justify-content: center;
					}
					.target {
						span {
							display: inline-block;
							padding-inline: 1rem;
							width: auto;
						}
					}
					&::after {
						transform: translateX(-100%);
					}
				}
				.course_img {
					grid-column: 1 / 2;
					grid-row: 2 / 3;
				}
			}
		}
	}
}

/* ========== 無料体験 ========== */
.aside_taiken {
	background-color: #eeeefc;
	padding-block: 2rem 3rem;
}
.hdg_taiken_sub {
	align-items: baseline;
	color: var(--clr_gray);
	display: flex;
	font-size: 1rem;
	font-weight: 600;
	gap: 0 .5rem;
	justify-content: center;
	&::before,
	&::after {
		background-color: var(--clr_gray);
		content: "";
		height: 1em;
		transform-origin: center bottom;
		transform: rotate(30deg);
		width: 2px;
	}
	&::before {
		transform: rotate(-30deg);
	}
}
.hdg_taiken {
	border-bottom: 1px solid var(--clr_wb);
	color: var(--clr_wb);
	font-size: 1.125rem;
	font-weight: 800;
	padding-block: .2rem;
	text-align: center;
}
.lead_taiken {
	color: var(--clr_pink);
	font-size: 1rem;
	font-weight: bold;
	margin-top: .5rem;
	text-align: center;
}
.txt_taiken {
	font-size: 1rem;
	margin-top: 1rem;
	padding-inline: .5rem;
}
.img_taiken {
	border-radius: 1rem;
	margin-top: 1rem;
	overflow: hidden;
}
.btn_taiken {
	margin-top: 1rem;
	text-align: center;
}

/* ========== SPフッター調整 ========== */
@media (max-width: 767px) {
	html > body {
		> #menu-winbe {
			&.nav-menu {
				height: 55px;
				width: 55px;
				span {
					&:nth-of-type(1) {
						top: 15px;
					}
					&:nth-of-type(2) {
						top: 22px;
					}
				}
			}
		}
		> .header {
			> #header-fix {
				&.head-fix {
					border-top: 5px solid var(--clr_wb);
					top: 0;
				}
			}
			> .nav-list {
				height: auto;
				height: calc(100dvh - 55px);
				overflow-y: auto;
				top: 55px;
			}
		}
		> .footer-fixed {
			&.nopc {
				display: none;
				&.menu_active {
					display: block;
				}
			}
		}
		> .nav-menu{
			&.active{
				~ .footer-fixed {
					&.nopc {
						&.menu_active {
							display: none;
						}
					}
				}
			}
		}
	}
}