@charset "utf-8";

:root {
	font-size: 62.5%;

	--white: white;
	--gray: #F7F7F7;
	--black: #333;
	--navy: #384D74;
	--green: #00913A;
    --vermilion: #F26130;

    --link: var(--navy);
    --hover: var(--green);

	--main-width: 1200px;
	--header-height: 100px;
   	--wrap-padding-inline: calc( var(--mi) * 2 );
	--half-wrap-margin-inline: max( calc( (100svw - var(--main-width)) / 2 ), 0px );

    /* 100vw = 1600pxで計算 */
    --mb: min(1.25vw, 15px);
	--mi: min(1vw, 12px);

	--fs10: min(0.625vw, 1rem);
	--fs12: min(0.75vw, 1.2rem);
	--fs13: min(0.8125vw, 1.3rem);
	--fs15: min(0.9375vw, 1.5rem);
    --fs18: min(1.125vw, 1.8rem);
    --fs20: min(1.25vw, 2.0rem);
	--fs22: min(1.375vw, 2.2rem);
	--fs25: min(1.5vw, 2.4rem);
    --fs25: min(1.5625vw, 2.5rem);
	--fs32: min(2vw, 3.2rem);
	--fs38: min(2.375vw, 3.8rem);
	--fs50: min(2vw, 3.2rem);
}
@media screen and (max-width: 767px) {
	:root {
		--main-width: 100%;
		--header-height: 60px;
        /* 100vw = 375pxで計算 */

		--mb: 4vw;
		--mi: 4vw;

        --fs10: min(2.66vw, 1rem);
        --fs12: min(3.2vw, 1.2rem);
		--fs13: min(3.46vw, 1.3rem);
		--fs15: min(4vw, 1.5rem);
		--fs18: min(4.8vw, 1.8rem);
        --fs20: min(5.33vw, 2.0rem);
		--fs22: min(5.86vw, 2.2rem);
		--fs24: min(6.4vw, 2.4rem);
        --fs25: min(6.66vw, 2.5rem);
		--fs32: min(8.533vw, 3.2rem);
		--fs38: min(10.133vw, 3.8rem);
		--fs50: min(13.333vw, 5rem);
    }
}

html {
	-webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
	scroll-behavior: smooth;
}
:target {
	scroll-margin-block: 2lh;
}

/* Windows */
@font-face {
    font-family: YuGothicM;
    font-weight: normal;
    src: local('YuGothic-Medium'),  /* Windowsでは游ゴシックが細くかすれてしまうので、Mediumを明示的に指定 */
    local('Yu Gothic Medium'), /* Chrome用 */
    local('YuGothic-Regular'); /* Windows8.1ではMediumがないのでRegularを指定 */
}
@font-face {
    font-family: YuGothicM;
    font-weight: bold;
    src: local('YoGothic-Bold'), /* Boldはそのまま */
    local('Yu Gothic');     /* Chrome用 */
}

body {
	width: 100%;
	min-width: var(--main-min-width, unset);
	height: 100%;
	min-height: 100svh;
	background-color: var(--white);
    font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */
                 'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */
                 'Segoe UI',       /* Windowsの欧文 */
				 'Hiragino Kaku Gothic ProN', /* Macのヒラギノ */
                 YuGothicM,        /* Windows8.1以上は游ゴシック */
                 YuGothic,         /* Macの游ゴシック */
                 Meiryo,           /* 游ゴシックが入っていないWindows */
                 sans-serif;
    font-size: var(--fs18);
	font-weight: 500;
	line-height: 1.75;
	color: var(--black);
	overflow-x: clip;
	position: relative;
}
body:has(.header nav.is_active, .modal.is_active) {
	overflow: clip;
}

@media screen and (max-width: 767px) {
	body {
		font-size: var(--fs15);
	}
}


/*  basic
-------------------------------------------------------------------- */

* {
	box-sizing: border-box;
}
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}


/**  アンカー
-------------------------------------------------------------------- */
a {
	--visited: var(--link);
    --focus: var(--hover);
    text-decoration: none;
}
a:not([class]) {
	color: currentColor;
}
a:link {
	--text-color: var(--link);
}
a:visited {
	--text-color: var(--visited);
}

/**  ボタン
-------------------------------------------------------------------- */
:is(a, button) {
	background: var(--bg-color);
	color: var(--text-color);
}
:is(a, button):focus {
	--bg-color: var(--focus-bg, var(--hover-bg, transparent));
	--text-color: var(--focus, var(--hover));
}
@media (hover: hover) {
	:is(a, button):hover {
		--bg-color: var(--hover-bg, transparent);
		--text-color: var(--hover);
	}
}


/**  テキスト
-------------------------------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
}
p:not(:first-child) {
    margin-top: 1lh;
}
p.note {
	font-size: 80%;
	text-indent: -1ic;
	padding-inline-start: 1ic;
}
p.note:not(:first-of-type) {
	margin-top: 0.5lh;
}
strong {
    color: var(--vermilion);
}




/**  リスト
-------------------------------------------------------------------- */
ol {
	list-style: decimal;
	margin-left: 1.5rem;
}


/**  イメージ
-------------------------------------------------------------------- */
img,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: middle;
}
img {
	outline: 0;
	-o-object-fit: contain;
	object-fit: contain;
}
picture {
	line-height: 0;
	overflow: hidden;
}


/**  改行
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	:is(br, wbr):is([sp], .sp, .sp-only) {
		display: none;
	}
	:is(br, wbr):is([pc], .pc, .pc-only) {
		display: revert;
	}
}
@media screen and (max-width: 767px) {
	:is(br, wbr):is([pc], .pc, .pc-only) {
		display: none;
	}
	:is(br, wbr):is([sp], .sp, .sp-only) {
		display: revert;
	}
}



/**  PC/SP出し分け
-------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	:is(.sp, .sp-only) {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	:is(.pc, .pc-only) {
		display: none;
	}
}



/**  ボタン
-------------------------------------------------------------------- */
.btn {
    width: fit-content;
    padding-block: 0.5lh;
    padding-inline: calc( var(--mi) * 2 );
	border-radius: calc( var(--mb) * 4 );
	background: url('imgs/gradient.png') no-repeat;
	background-size: 100% 100%;

    display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--mi);

    color: var(--white);
    font-size: var(--fs25);
	font-weight: 600;
	letter-spacing: 0.1ic;
}
.btn.arrow-suffix {
	flex-direction: row-reverse;
}
.btn.arrow-prefix::before,
.btn.arrow-suffix::before {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 2ic;
	height: 2ic;
	border-radius: 100%;
	background: var(--white);

	content: "▶";
	color: var(--black);
	font-size: var(--fs12);
	text-indent: 0.3ic;
}

.coming {
    width: fit-content;
    padding-block: 0.3lh;
    padding-inline: calc( var(--mi) * 2 );
	border-radius: calc( var(--mb) * 4 );
	background: #ccc;
	color: white;
	font-size: var(--fs32);
	letter-spacing: 0.1ic;
	text-align: center;
}

@media (hover: hover) {
    .btn {
        transition: 0.2s 0s ease;
    }
    .btn:hover {
        opacity: 0.8;
    }
}
@media screen and (max-width: 767px) {
	.btn {
		width: 100%;
		padding-inline: calc( var(--mi) * 2 );
		font-size: var(--fs18);
	}
	.coming {
		font-size: var(--fs22);
	}
}



/**  ラッパー
-------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--main-width);
    padding-inline: var(--wrap-padding-inline);
    margin-inline: auto;
}
@media screen and (max-width: 767px) {
    .wrap {
        padding-inline: var(--mi);
        margin-inline: 0;
    }
}





/**  セクション
-------------------------------------------------------------------- */
section {
    padding-top: calc( var(--mb) * 10);
}

section .headline {
    flex-shrink: 0;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: calc( var(--mb) * 4.5 );
	text-align: center;
    font-size: clamp(25px, 2.75vw, 50px);
	color: #384d74;
}
section .headline:has(+ p) {
	margin-bottom: calc(var(--mb) * 2);
}
section .headline + p {
	text-align: center;
}

section .headline :is(picture, img) {
    height: 100%;
}

section .label {
	padding-block: 0.2lh;
	background: url("imgs/label.webp") no-repeat;
	background-size: 100% 100%;
	clip-path: polygon(21px 0, 100% 0, calc(100% - 21px) 100%, 0 100%);
	margin-bottom: calc( var(--mb) * 4.5 );

	font-size: clamp(21px, 2.5vw, 45px);
	color: white;
	text-align: center;
}
section .title {
    color: var(--navy);
    font-size: var(--fs25);
}

@media screen and (max-width: 767px) {
	section {
		padding-top: calc( var(--mb) * 5);
	}
	section .headline {
		margin-bottom: calc( var(--mb) * 2 );
		padding-right: calc( var(--mi) * 2 );
		padding-left: calc( var(--mi) * 2 );
	}
	section .label {
		clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
	}
	section .headline + p {
		text-align: left;
	}
	section .title {
		font-size: var(--fs18);
	}
	section .container {
		padding-inline: calc( var(--mi) * 2 );
	}
}





/**  ボックス（白い半透明の囲み）
-------------------------------------------------------------------- */
.box {
    padding-block: calc( var(--mi) *  6);
    padding-inline: calc( var(--mi) * 6);
	background: rgb(from var(--gray) r g b / var(--opacity, 0.6));
}


@media screen and (max-width: 767px) {
	.box {
		padding-block: calc( var(--mb) * 2 );
		padding-inline: calc( var(--mi) * 1 );
	}
}



/**  エフェクト
-------------------------------------------------------------------- */
.shadow {
	position: relative;
	z-index: auto;
}
.shadow::after {
	display: block;
	width: 100%;
	height: 100%;
	background: url('imgs/shadow.webp') no-repeat;
	background-size: 100% 100%;

	position: absolute;
	top: var(--mb);
	left: var(--mb);
	z-index: -1;
}
@media screen and (max-width: 767px) {
	.shadow::after {
		top: 2.4svw;
		left: 2.4svw;
	}
}




/** テーブル  
-------------------------------------------------------------------- */
table {
    width: 100%;
}
tr:not(:last-child) {
    border-bottom: 2px solid var(--white);
}
:is(th, td) {
    padding-block: calc( var(--mb) * 2.5 );
    padding-inline: calc( var(--mi) * 3 );
}
th {
    color: var(--navy);
    font-size: var(--fs20);
}
table.steps {
	width: clamp(600px, 52.375vw, 1200px);
	margin-inline: auto;
}
table.steps tr:not(:last-child) {
	border-bottom: 1px solid #a6a6a6;
}
table.steps :is(th, td) {
    padding-inline: 0.5ic;
}

table.steps th {
	width: 15ic;
	padding-block: 0.75lh;
	font-size: clamp(15px, 1.25vw, 20px);
	color: #8c8c8c;
	font-weight: 700;
	
}
table.steps td {
	padding-block: 0.5lh;
	font-size: clamp(16px, 1.5625vw, 25px);
	color: black;
	font-weight: 600;
}

@media screen and (max-width: 767px) {
	:is(th, td) {
		padding-block: calc( var(--mb) * 1 );
	}
	th {
		width: 4ic;
		box-sizing: content-box;
		padding-inline: calc( var(--mi) * 2 ) var(--mi);
		font-size: var(--fs15);
	}
	td {
		padding-inline: var(--mi) calc( var(--mi) * 2 );
	}
	table.steps {
		width: 80%;
		margin-inline: auto;
	}
	table.steps :is(tr, th, td) {
		display: block;
	}
	table.steps :is(th, td) {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
	table.steps th {
		padding-block: 0.5lh 0;
		font-size: 3.68vw;
	}
	table.steps td {
		padding-block: 0 0.5lh;
		font-size: 4.8vw;
	}
}


/**  フォーム
-------------------------------------------------------------------- */
form th{
	white-space: nowrap;
}
form th.required::after {
    display: inline;
    content: "*";
    color: var(--vermilion);
}
form td {
    display: flex;
    column-gap: calc( var(--mi) * 3 );
}
form td.kenshu{
	flex-wrap: wrap;
}
form td.kenshu label{
	width: 45%;
}
form label {
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 1ic;
}
form label.short {
    flex-grow: 1;
    flex-shrink: 1;
    width: 50%;
}
form label.radio {
    width: fit-content;
}
form label .caption {
    flex-shrink: 0;
    width: fit-content;
}
input[type="text"], textarea {
    flex-shrink: 1;
    width: 100%;
    padding-inline: var(--mi);
    border-radius: 5px;
    outline: 1px solid #ccc; 
    background: var(--white);

    line-height: 2.5;
}
textarea {
	min-height: 6lh;
}
label.short input[type="text"] {
    width: 12ic;
    box-sizing: content-box;
}
input[type="radio"] {
    appearance: auto;
    scale: 1.5;
}
input[type="checkbox"] {
    appearance: auto;
    scale: 1.5;
}
button[type="submit"] {
	padding-inline: calc(var(--mi) * 4);
	margin-block: calc( var(--mb) * 4 );
	margin-inline: auto;

}



@media screen and (max-width: 767px) {
	form label.short input[type="text"] {
		width: 100%;
	}
	button[type="submit"] {
		width: 100%;
		padding-inline: calc( var(--mi) * 2 );
		font-size: var(--fs18);
	}
	form td.kenshu label{
		width: 100%;
	}
}




/**  モーダル
-------------------------------------------------------------------- */
.modal {
	width: 100svw;
	height: 100svh;
	background: rgba(0,0,0,.8);

	display: flex;
	justify-content: center;
	align-items: center;

	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;

	opacity: 0;
	pointer-events: none;

	transition: 0.3s 0s ease;
}
.modal.is_active {
	z-index: 1000;
	opacity: 1;
	pointer-events: auto;
}
.modal .block {
	width: 50%;
	background: var(--white);
}
.modal .title {
	text-align: center;
	margin-bottom: var(--mb);
}
.modal button.close {
	margin-top: var(--mb);
	padding-block: var(--mb);
	padding-inline: calc( var(--mi) * 2 );
	background: var(--navy);
	margin-inline: auto;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--mi);

	color: var(--white);
}

.modal button.close::before {
	display: block;
	content: "✕";
}

@media (hover: hover) {
	.modal button.close {
		transition: 0.2s 0s ease;
	}
	.modal button.close:hover {
		background: var(--black);
	}
}

@media screen and (max-width: 767px) {
	.modal .block {
		width: calc( 100% - var(--mi) * 2 );
	}
}









/**  ヘッダー
-------------------------------------------------------------------- */
.header {
    height: var(--header-height);
    background: var(--green);

    color: var(--white);

    display: flex;
}
.header > * {
    display: flex;
    align-items: center;
}
.header a.logo {
    width: min(18.75vw, 300px);
    height: 100%;
    background: var(--white);

    justify-content: center;
}
.header a.logo img {
    width: min(12.5vw, 200px);
    aspect-ratio: 200 / 39;
    object-fit: contain;
}
.header .subline {
    padding-inline: 40px 1.25ic;
	flex-grow: 1;
	flex-shrink: 0;
    font-weight: 600;
}
.header nav {
    padding-inline: 1.5ic;
    flex-shrink: 0;
}
.header nav a {
    display: flex;
    font-weight: 600;
    letter-spacing: 0;
}
.header nav a + a::before {
    display: block;
    width: 1px;
    height: 1lh;
    background: var(--white);
    margin-inline: 1.25ic;
}

@media screen and (max-width: 767px) {
	.header a.logo {
		width: 40%;
		height: var(--header-height);
		padding-inline: 12px;
	}
	.header a.logo img {
		width: 100%;
	}
	.header .subline {
		padding-inline: 12px 0;
		font-size: var(--fs10);
		justify-content: center;
	}
	.header .burger {
		flex-shrink: 0;
		width: 11%;
		height: var(--header-height);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: auto;
	}
	.header .burger::before {
		display: block;
		width: 50%;
		height: 0.53svw;
		background: var(--white);
		box-shadow: 0 1.33svw 0 0 transparent,
					0 -1.33svw 0 0 transparent,
					0 1.86svw 0 0 var(--white),
					0 -1.86svw 0 0 var(--white);
	}
	.header nav {
		margin-left: 0;
		width: 100%;
		height: calc(100% - var(--header-height));
		padding-block: 0.8lh;
		background: linear-gradient(to bottom, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.8)),
					linear-gradient(to bottom, rgb(from var(--navy) r g b  / 0.8), rgb(from var(--green) r g b / 0.5));
		
		position: fixed;
		top: var(--header-height);
		left: 0;
		z-index: 200;

		transition: 0.3s 0s ease;

		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;

		color: var(--black);
	}
	.header nav a {
		justify-content: center;
		align-items: center;
		width: 100%;
		padding-block: 0.8lh;
		font-size: var(--fs20);
		text-align: center;
	}
	.header nav a::after {
		display: block;
		width: 0.5ic;
		height: 0.5ic;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		rotate: -45deg;
		margin-left: 0.5ic;
	}
	.header nav a + a::before {
		display: none;
	}
	body:not(.is_show_navigation) .header nav {
		opacity: 0;
		pointer-events: none;
	}
	body:is(.is_show_navigation) {
		overflow: hidden;
	}
}



/**  追従CTA
-------------------------------------------------------------------- */
.fixed-cta {
	min-width: max-content;
	width: 60%;
	padding-block: calc(var(--mb) * 2);
	padding-inline: calc(var(--mi) * 2);
	box-shadow: 0 0 0 6px var(--green);
	background: rgb(from var(--white) r g b / 0.95);

	position: fixed;
	left: 50%;
	bottom: var(--mb);
	z-index: 10;
	translate: -50% 0;

	transition: 0.3s 0s ease;
}
.fixed-cta p {
	color: var(--navy);
	font-size: var(--fs20);
	text-align: center;
	font-weight: 600;
}
.fixed-cta .btn {
	margin-top: var(--mb);
	margin-inline: auto;
	padding-block: 0.3lh;
	font-size: var(--fs22);
	font-weight: 600;
}

body:is(.is_hide_cta_fixed, .is_show_recaptcha) .fixed-cta,
body:not(.is_show_recaptcha) .grecaptcha-badge {
    opacity: 0;
    pointer-events: none;
}
.grecaptcha-badge {
    z-index: 90;
    transition: 0.3s 0s ease, right 0.3s !important;
}


@media screen and (max-width: 767px) {
	.fixed-cta {
		width: calc(100% - 24px);
		min-width: unset;
		padding-block: var(--mb);
		box-shadow: none;
		bottom: 13px;
	}
	.fixed-cta p {
		display: none;
		font-size: var(--fs15);
	}
	.fixed-cta .btn {
		margin-top: 0;
		padding-block: var(--mb);
		padding-inline: var(--mi);
		font-size: var(--fs20);
		text-align: center;
	}
	.fixed-cta .btn::after {
		display: none;
	}
}



/**  メインコンテンツ
-------------------------------------------------------------------- */
main.content {
	padding-bottom: calc(var(--mb) * 10);
	position: relative;
	z-index: 0;
}
main.content::after {
    display: block;
    width: min(30.9375vw, 495px);
    height: 100%;
    background: linear-gradient(
					to bottom,
					#FFFFD4 0%,
					#A6CAAB 11%,
					#145A8C 17%,
					#060960 22%,
					#060960 30%,
					#50BC7F 60%,
					#145A8C 82%,
					#191D61 95%
				);
    opacity: 0.2;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

@media screen and (max-width: 767px) {
	main.content {
		padding-bottom: var(--mb);
	}
	main.content::after {
		width: 40%;
	}
}



/**  イメージ付きリード文
-------------------------------------------------------------------- */
.container:is(.text-image, .image-text) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc( var(--mi) * 4 );
}
.container:is(.text-image, .image-text) > .text {
    flex: 0 1 auto;
}
.container:is(.text-image, .image-text) > :is(.image, img) {
	flex: 0 0 auto;
	width: 37.5vw;
    max-height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.container.text-image {
	padding-left: var(--wrap-padding-inline);
	margin-left: var(--half-wrap-margin-inline)
}
.container.image-text {
	padding-right: var(--wrap-padding-inline);
	margin-right: var(--half-wrap-margin-inline)
}

@media screen and (max-width: 767px) {
	.container:is(.text-image, .image-text) {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: calc( var(--mi) * 2 );
		margin-inline: 0;
	}
	.container:is(.text-image, .image-text) > :is(.image, img) {
		width: 100% !important;
	}
	.container:is(.text-image, .image-text) .title {
		text-align: center;
		font-size: var(--fs20);
	}
}



/**  パネル型 （例: トップ＞研修コンテンツ、各研修ページ＞導入事例）
-------------------------------------------------------------------- */
.container.panels .block {
	display: flex;
	gap: calc(var(--mb) * 4);
}
.container.panels .block + .block {
	margin-top: calc(var(--mb) * 4);
}

.container.panels .block .text h3 span{
	display: block;
	font-size: var(--fs22);
}
.container.panels .block .text h3 {
	display: block;
	font-size: var(--fs38);
	border-bottom: 2px solid #fff;
	padding-bottom: 0.5vw;
	margin-bottom: 1vw;
}
.container.panels .block > img {
	width: min(25vw, 400px);
}

@media screen and (max-width: 767px) {
	.container.panels {
		padding-inline: 0;
	}
	.container.panels .block {
		padding-inline: var(--mi);
		flex-direction: column;
		gap: calc(var(--mb) * 2);
	}
	.container.panels .block + .block {
		margin-top: calc(var(--mb) * 2);
	}
	.container.panels .block .text{
		padding-bottom: 5vw;
	}
	.container.panels .block .text h3 span{
		font-size: var(--fs15);
	}
	.container.panels .block .text h3{
		font-size: var(--fs24);
		text-align: center;
	}
	.container.panels .block > img {
		width: 100%;
	}
}





/**  横並び型（1行で収める）
-------------------------------------------------------------------- */
.container.row-nowrap {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
@media screen and (max-width: 767px) {
	.container.row-nowrap {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
}






/**  2列並び型
-------------------------------------------------------------------- */
.container.two-rows {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	gap: calc(var(--mb) * 4) calc(var(--mi) * 4);
}
.container.two-rows .block {
	flex: 0 1 auto;
	max-width: 45%;
}

@media screen and (max-width: 767px) {
	.container.two-rows .container {
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: center;
	}
	.container.two-rows .block {
		max-width: 100%;
	}
}


/**  ビルボード
-------------------------------------------------------------------- */
section#hero {
	margin-top: 0;
	padding-top: 0;
    width: 100%;
	height: min(43.75vw, 700px);
	
	overflow-x: clip;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
	z-index: 0;
}

section#hero .heading {
    --opacity: 0.9;
    width: min(52.5vw, 840px);
	position: relative;
	z-index: 1;
}
section#hero:is(#hero) .heading {
	padding: 0;
	position: relative;
	z-index: 1;
}
section#hero:is(#hero) .heading img {
	height: 100%;
}

section#hero a[href*="#entry"] {
	width: min(25vw, 400px);
	padding-block: 0.7lh;

	position: absolute;
	bottom: 65px;
	left: 50%;
	translate: -50% 0;
}

    

section#hero picture.image {
    width: 125svw;
    height: 100%;

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
section#hero picture.image img {
    width: 100%;
    max-width: unset;
}


@media screen and (max-width: 767px) {
	section#hero {
		height: 160svw;
	}
	#thanks section#hero{
		height: 85svw;
	}
	#thanks section#hero .heading {
		margin-top: calc( -1 * var(--mb) * 0 );
		width: 84svw;
		padding-bottom: calc( var(--mb) * 3 );
	}
	section#hero .heading {
		margin-top: 0;
		width: 84svw;
	}
	section#hero a[href*="#entry"] {
		width: 76svw;
		bottom: 38px;
	}
	section#hero picture.image {
		width: 100%;
	}
}





/**  イントロ
-------------------------------------------------------------------- */
section#intro {
	padding-top: calc(var(--mb) * 8);
}

section#intro .movie {
	margin-top: calc( var(--mb) * 6);
	width: min(52.375vw, 838px);
	height: fit-content;
	margin-inline: auto;
}
section#intro video {
	width: 100%;
	aspect-ratio: 16 / 9;
}


@media screen and (max-width: 767px) {
	section#intro {
		padding-block: calc( var(--mb) * 4 );
	}
	section#intro .movie {
		width: 100%;
	}
}



/**  特長
-------------------------------------------------------------------- */
section#feature .block {
	width: min(75vw, 1150px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 3.5vw;
	padding-bottom: 3.5vw;
}
section#feature .block img {
	width: min(35vw, 570px);
}
section#feature .block .text{
	width: min(36.5vw, 550px);
}
section#feature .block .text h3{
	font-size: clamp(17.5px, 2.1875vw, 35px);
	margin-bottom: calc(var(--mb) * 2 );
}


@media screen and (max-width: 767px) {
	section#feature .block{
		display: block;
	}
	section#feature .block + .block {
		margin-top: calc(var(--mb) * 2 );
	}
	section#feature .block img,
	section#feature .block .text {
		width: 100%;
	}
	section#feature .block .text h3{
		font-size: 5.5vw;
		padding-top:  3.5vw;
		text-align: center;
		margin-bottom: var(--mb);
	}
}



/**  おすすめ
-------------------------------------------------------------------- */
section#recommend {
	margin-top: calc(var(--mb) * 8);
	padding-block: calc(var(--mb) * 4);
	background: var(--green);
}
section#recommend .headline {
	color: white;
	font-size: var(--fs38);
	margin-bottom: calc(var(--mb) * 2);
}
section#recommend ul {
	width: fit-content;
	max-width: 1080px;
	padding-block: calc(var(--mb) * 3);
	margin-inline: auto;
}
section#recommend li {
	padding-block: 0.5lh;
	padding-inline: 3ic 1.5ic;;
	background: white;

	font-size: var(--fs25);
	font-weight: 600;
	position: relative;
}
section#recommend li::before {
	display: block;
	width: 1.2ic;
	height: 0.8ic;
	border-left: 5px solid var(--vermilion);
	border-bottom: 5px solid var(--vermilion);
	position: absolute;
	left: 1.5ic;
	top: 1lh;
	translate: 0% -30%;
	rotate: -45deg;
	transform-origin: left bottom;
}
section#recommend li + li {
	margin-top: 0.5lh;
}

@media screen and (max-width: 767px) {
	section#recommend .headline {
		font-size: var(--fs25);
	}
	section#recommend ul {
		width: auto;
		margin-inline: var(--wrap-padding-inline);
		padding-block: 0;
	}
	section#recommend li {
		font-size: var(--fs20);
	}
}


/**  ご利用方法
-------------------------------------------------------------------- */
section#merit h3 {
	font-size: clamp(18px, 2.25vw, 36px);
	text-align: center;
	padding: 1.5vw 0;
}
section#merit ul.examples,
section#merit .merits ul {
	width: max-content;
	min-width: 60%;
	margin-inline: auto;
}
section#merit ul.examples li{
	font-size: clamp(16px, 1.5vw, 24px);
    padding-left: 1.1lh;
	border-bottom: 1px solid #e6e6e6;
	padding-bottom: 0.5vw;
	margin-bottom: 0.75vw;
}
section#merit .houjin ul.examples li{
	background: url(imgs/check01.svg) no-repeat left 0.1lh;
	background-size: 0.75lh;
}
section#merit .kojin ul.examples li{
	background: url(imgs/check02.svg) no-repeat left 0.1lh;
	background-size: 0.75lh;
}
section#merit .merits{
	margin-top: 5vw;
	position: relative;
	z-index: 10;
	padding: 2.5vw;
}
section#merit .merits li{
	font-size: clamp(16px, 1.5vw, 24px);
	font-weight: bold;
}
section#merit .houjin .merits li span{
	color: #384174;
}
section#merit .kojin .merits li span{
	color: #468c65;
}
section#merit .merits::before{
	display: block;
	position: absolute;
	top: -20px; /* ボックスの上端に配置 */
	left: 50%; /* 水平方向に中央揃え */
	transform: translateX(-50%);
	/* 画像の実際のサイズに応じて幅と高さを調整してください */
	width: 140px; /* 例: 画像の幅 */
	height: 40px; /* 例: 画像の高さ */
	z-index: 5; /* ::afterの背景要素より手前に表示 */
}
section#merit .houjin .merits::before{
	background: url(imgs/merit_head01.png) no-repeat center center;
	background-size: contain; /* 画像が指定領域に収まるように調整 */
}
section#merit .kojin .merits::before{
	background: url(imgs/merit_head02.png) no-repeat center center;
	background-size: contain; /* 画像が指定領域に収まるように調整 */
}
section#merit .merits::after {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gray);

    opacity: var(--opacity, 0.6);

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
}


section#merit p {
    margin-top: var(--mb);
    border-top: 1px solid var(--white);
    padding-top: var(--mb);
    flex-shrink: 0;
    width: 100%;
}

@media screen and (max-width: 767px) {
	section#merit .box {
		padding-block: calc( var(--mb) * 2);
		padding-inline: calc( var(--mi) * 2);
	}
	section#merit .icon {
		width: 20%;
	}
	section#merit .title {
		width: calc( 80% - var(--mi) * 2 );
	}
	section#merit .merits{
		padding: 5vw;
		margin-top: 10vw;
	}
	section#merit .merits::before{
		width: 25vw;
		height: 7.105vw;
		top: -3.5vw;
	}
}


/**  お問い合わせフォーム
-------------------------------------------------------------------- */
section#entry {
    width: 100%;
    max-width: var(--main-width);
    padding-inline: var(--wrap-padding-inline);
    margin-inline: auto;
}

@media screen and (max-width: 767px) {
	section#entry {
		padding-inline: 0;
	}
	section#entry .headline {
		height: 6.4vw;
	}
	section#entry :is(tr, th, td) {
		width: 100%;
		display: block;
	}
	section#entry tr:not(:last-child) {
		padding-bottom: var(--mb);
		margin-bottom: var(--mb);
	}
	section#entry th {
		padding-block: 0;
		padding-inline: 0;
		font-size: var(--fs18);
	}
	section#entry td {
		padding-inline: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--mb) calc( var(--mi) * 2 );
	}
	section#entry button[type="submit"] {
		padding-inline: calc(var(--mi) * 1);
	}
}





/**  フッター
-------------------------------------------------------------------- */
.footer {
    height: 270px;
    background: var(--navy);

    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--white);
    font-size: var(--fs15);
    font-weight: 400;
}

@media screen and (max-width: 767px) {
	.footer {
		height: 32vw;
	}
}




/**  送信完了ページ
-------------------------------------------------------------------- */
body#thanks section .headline {
	font-size: 2.5rem;
	color: var(--navy);
}
body#thanks section p {
	text-align: center;
}
body#thanks .core {
	padding-top: calc( var(--mb) * 10);
}

@media screen and (max-width: 767px) {
	body#thanks section {
		margin-top: calc( var(--mb) * 0);
	}
	body#thanks section p{
		text-align: left;
	}
}