@charset "utf-8";
section.mv {
	width: 100%;height: 800px;padding: 0;
	background: #d9d9d9 url(../../img/mv01@2x.jpg) no-repeat center / cover;
}
section.mv .wrap {position: relative;height: 100%;}
section.mv .text {
	position: absolute;bottom: 145px;left: 0;
}
section.mv h1 {font-size: 2.4em;color: var(--color-background-white);margin: 0 0 5px}
section.mv .text p {line-height: 1.6}
section.mv .text p.typ span.in {font-size: 4.8rem}
section.mv .text p.typ span.write {
	display: inline-block;width: 191px;height: 51px;padding: 9px 30px 0;box-sizing: border-box;
	line-height: 1.07;vertical-align: text-bottom;background: var(--color-background-white);
	color: rgba(0, 0, 0, 0);animation: none;position: relative;
}
section.mv .text p.typ span.write::before {
	display: none;
}
section.mv .text p.typ span.write svg {
	width: 131px;height: 37px;
}
section.mv .text p.typ span.write.w1 svg g#mask path{
	fill:none;
	stroke:var(--color-background-white);
	stroke-width:7;
	stroke-dasharray: 400px;
	stroke-dashoffset: 400px;
	animation-name: line;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: 1.5s;
}
section.mv .text p.typ span.write.w2 svg g#mask2 path{
	fill:none;
	stroke:var(--color-background-white);
	stroke-width:7;
	stroke-dasharray: 400px;
	stroke-dashoffset: 400px;
	animation-name: line2;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: 2.4s;
}
section.mv .text p.typ span.write.w1 svg g#mask path:nth-of-type(2) {
	animation-delay: 1.8s;
}
section.mv .text p.typ span.write.w1 svg g#mask path:nth-of-type(3) {
	animation-delay: 2s;
}
section.mv .text p.typ span.write.w1 svg g#mask path:nth-of-type(4) {
	animation-delay: 2.2s;
}
section.mv .text p.typ span.write.w2 svg g#mask2 path:nth-of-type(2) {
	animation-delay: 2.6s;
}
section.mv .text p.typ span.write.w2 svg g#mask2 path:nth-of-type(3) {
	animation-delay: 2.9s;
}
section.mv .text p.typ span.write.w2 svg g#mask2 path:nth-of-type(4) {
	animation-delay: 3.1s;
}
@keyframes line{
	0%{stroke-dashoffset: 400px;}
	100%{stroke-dashoffset: 0;}
}
@keyframes line2{
	0%{stroke-dashoffset: 400px;}
	51% {stroke-dashoffset: 400px;}
	100%{stroke-dashoffset: 0;}
}
section.mv .text p.typ span.write svg g#text{
	mask: url(#mask-wrap);
	fill: #aaa;
}
section.mv .text p.typ span.write svg g#text2{
	mask: url(#mask-wrap2);
	fill: #aaa;
}

section.bannerbox {
	margin: -65px 0 0;padding: 0 0 100px;
}
section.bannerbox dl {
	display: flex;gap: 60px;flex-wrap: wrap;margin: 0 90px;
}
section.bannerbox dl .box {
	width: 300px;box-sizing: border-box;position: relative;
	overflow: hidden;border-radius: 30px;background: var(--color-background-white);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, .25);
	text-align: center;
}
section.bannerbox dl .box a {
	display: block;padding: 30px 30px 10px;
}
section.bannerbox dl dt {
	font-size: 2rem;margin: 10px 0 20px;
}
section.bannerbox dl dd {}
section.bannerbox dl dd .img {
	width: 150px;height: 150px;margin: 0 auto 20px;display: flex;align-items: center;justify-content: center;
}
section.bannerbox dl dd p {
	margin: 12px 8px;
	font-size: 1.6rem;line-height: 1.4;text-align: left;
}
section.bannerbox dl svg {
	width: auto;height: auto;max-width: 150px;max-height: 150px;
}
section.bannerbox dl .box a::after {
	display: block;content: "";width: 100%;height: 30%;
	pointer-events: none;position: absolute;bottom: -10%;left: 0;
	background: url(../../img/icon/wave.svg) no-repeat bottom / 100% auto;
	transition: bottom .3s;
}
section.bannerbox dl .box a:hover::after {
	bottom: 0;
}
section.bannerbox dl dd ul {
}
section.bannerbox dl dd ul li {
	border-top: solid 1px var(--color-gray-200);padding: 20px 0;
	font-size: 1.6rem;
}

section.workslogo {
	padding: 70px 0 100px;margin: 0;
}
section.workslogo ul {
	display: flex;flex-wrap: wrap;justify-content: center;gap: 60px;
}

section.contactbox {
	padding: 85px 0;color: var(--color-background-white);
}
section.contactbox .flex {
	justify-content: space-between;align-items: center;
}
section.contactbox h2 {margin: 0 0 10px;}
section.contactbox p {font-size: 2rem}
section.contactbox .flex .box:first-child {text-align: center}
section.contactbox .flex .box:last-child {
	width: 310px;
}
section.contactbox.back-yl p {
	font-size: 4rem;color: var(--color-text-black);text-align: left;
	line-height: 1.5;
}
section.contactbox.back-yl .btn a {color: var(--color-text-black);}
section.contactbox.back-yl .btn a span::after {
	background: url(../../img/icon/arrow05.svg) no-repeat 60% 54% / 40%;
	border: solid 3px var(--color-text-black);
}
section.area.contactbox {padding: 40px 0;}
section.area.contactbox dl {gap: 2px 0;justify-content: start;}
section.area dl dt {
	width: 120px;
	font-size: 1.4rem;font-weight: bold;color: var(--color-text-black);
}
section.area dl dd {
	width: calc(50% - 145px);margin: 0 50px 0 0;
	font-size: 1.4rem;color: var(--color-text-black);
}
section.area.contactbox dl dd ul {gap: 10px;justify-content: start;}
section.area dl dd ul a {text-decoration: underline;}
section.area dl dd ul a:hover {text-decoration: underline var(--color-primary);color: var(--color-primary);}
section.area dl dd ul a.non {color: #999;pointer-events: none;text-decoration: none;}
section.area dl dd:nth-of-type(2n) {margin: 0}

section.lead01 {padding: 100px 0 100px}
section.lead01 .manga {
	width: 670px;height: 322px;
	margin: -90px auto -20px;gap: 20px;justify-content: center;
}
section.lead01 .manga .frame {
	flex: 1;position: relative;
}
section.lead01 .manga .frame::before ,
section.lead01 .manga .frame::after {
	content: "";display: block;position: absolute;top: 0;left: 0;z-index: 0;
}
section.lead01 .manga .frame:first-child::before {
	width: 405px;height: 296px;
	background: url(../../img/back/manga01@2x.png) no-repeat center / 100%;
}
section.lead01 .manga .frame:last-child::before {
	width: 242px;height: 244px;top: auto;bottom: -100px;z-index: 1;left: auto;right: 30px;
	background: url(../../img/icon/humhumkun.svg) no-repeat center / 100%;
}
section.lead01 .manga .frame:first-child::after {
	width: 300px;height: 127px;left: 115px;top: -35px;
	background: url(../../img/icon/frame01@2x.png) no-repeat center / 100%;
}
section.lead01 .manga .frame:last-child::after {
	width: 287px;height: 141px;top: 105px;left: -95px;
	background: url(../../img/icon/frame02@2x.png) no-repeat center / 100%;
}
section.lead01 .manga .frame p {
	font-size: 2.4rem;line-height: 1.6;margin: 0;width: 100%;
	position: absolute;z-index: 1;top: -12px;left: 145px;
}
section.lead01 .manga .frame:last-child p {top: 120px;left: -60px}
section.lead01 .manga .frame p span {
	font-size: 4.6rem;letter-spacing: -.7rem;line-height: .8;
	transform: rotate(-10.448deg);display: inline-block;position: relative;top: -20px;left: -40px;
	text-shadow: var(--color-background-white) 5px 0px, var(--color-background-white) -5px 0px,
		var(--color-background-white) 0px -5px, var(--color-background-white) 0px 5px,
		var(--color-background-white) 5px 5px , var(--color-background-white) -5px 5px,
		var(--color-background-white) 5px -5px, var(--color-background-white) -5px -5px,
		var(--color-background-white) 2px 5px,  var(--color-background-white) -2px 5px,
		var(--color-background-white) 2px -5px, var(--color-background-white) -2px -5px,
		var(--color-background-white) 5px 2px,  var(--color-background-white) -5px 2px,
		var(--color-background-white) 5px -2px, var(--color-background-white) -5px -2px;

}
section.lead01 .manga .frame p span span {
	font-size: 6.4rem;letter-spacing: -.35rem;line-height: 1;
	top: 0;left: 0;
}
section.lead01 .box {
	background: var(--color-background-white);border-radius: 30px;
	padding: 60px 50px 50px;box-sizing: border-box;margin: 90px 0 0;
}
section.lead01 p {
	font-size: 2rem;
	margin: 0 0 20px;
}
section.lead01 p span {
	display: inline-block;text-decoration: underline;
}
section.lead01 .box:nth-of-type(2) dl {gap: 45px}
section.lead01 .box:nth-of-type(2) dl div {
	height: 375px;box-sizing: border-box;position: relative;
	flex: 1;border-radius: 10px;padding: 25px;position: relative;
	background: var(--color-primary);color: var(--color-background-white);
	display: flex;flex-direction: column;justify-content: space-between;
}
section.lead01 .box:nth-of-type(2) dl div::before {
	content: "";width: 150px;height: 150px;position: absolute;top: 105px;left: 45px;
	background: url(../../img/icon/lead01.svg) no-repeat center / 100%;
}
section.lead01 .box:nth-of-type(2) dl div:nth-of-type(2):before {background: url(../../img/icon/lead02.svg) no-repeat center / 100%}
section.lead01 .box:nth-of-type(2) dl div:nth-of-type(3):before {background: url(../../img/icon/lead03.svg) no-repeat center / 100%}
section.lead01 .box:nth-of-type(2) dl div:nth-of-type(4):before {background: url(../../img/icon/lead04.svg) no-repeat center / 100%}
section.lead01 .box:nth-of-type(2) dl div::after {
	content: "";width: 0;height: 0;position: absolute;top: calc(50% - 14px);right: -32px;
	border-style: solid;border-right: 0;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 16px solid var(--color-primary);
}
section.lead01 .box:nth-of-type(2) dl div:last-of-type:after {display: none}
section.lead01 .box:nth-of-type(2) dl dt {font-size: 1.6rem;line-height: 1.4;height: 4.2em;}
section.lead01 .box:nth-of-type(2) dl dd {
	font-size: 1.4rem;line-height: 1.4;height: 5.6em;
}
section.lead01 .highlighter-container {
	width: 600px;position: relative;
}
section.lead01 dl.content-display {
	position: relative;min-height: 400px;
	display: flex;justify-content: center;align-items: flex-start;
}
.highlighter-container .content-item {
	background: var(--color-background-white);
	border-radius: 10px;padding: 50px 30px;
	box-shadow: 0 20px 50px 0 rgba(0, 0, 0, .1);
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;width: 490px;
	position: absolute;left: 50%;transform: translateX(-50%);
}
.highlighter-container .content-item.position-0 {top: 0}
.highlighter-container .content-item.position-1 {top: 80px;z-index: 20;}
.highlighter-container .content-item.position-2 {top: 160px}
/* z-indexの制御: 1枚目が選択時 */
.highlighter-container .content-item.position-0.active {z-index: 30}
.highlighter-container .content-item.position-0.active ~ .highlighter-container .content-item.position-1 {z-index: 20}
.highlighter-container .content-item.position-0.active ~ .highlighter-container .content-item.position-2 {z-index: 10}
/* z-indexの制御: 2枚目が選択時 */
.highlighter-container .content-item.position-1.active {z-index: 30}
body:has(.highlighter-container .content-item.position-1.active) .highlighter-container .content-item.position-0 {z-index: 10}
.highlighter-container .content-item.position-1.active ~ .highlighter-container .content-item.position-2 {z-index: 10}
/* z-indexの制御: 3枚目が選択時 */
.highlighter-container .content-item.position-2.active {z-index: 30}
body:has(.highlighter-container .content-item.position-2.active) .highlighter-container .content-item.position-1 {z-index: 20}
body:has(.highlighter-container .content-item.position-2.active) .highlighter-container .content-item.position-0 {z-index: 10}
/* 非アクティブ状態 */
.highlighter-container .content-item.inactive {
	transform: translateX(-50%) scale3d(0.93,0.93,1);
}
/* アクティブ状態（選択されているコンテンツ） */
.highlighter-container .content-item.active {
	transform: translateX(-50%) scale3d(1,1,1,1);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
section.lead01 dl.content-display dt {
	font-size: 2rem;line-height: 1.4;
	margin-bottom: 16px;
}
section.lead01 dl.content-display dd {
	font-size: 1.4rem;line-height: 1.6;
	color: var(--color-gray-400);
}
.highlighter-container .navigation {
	display: flex;flex-direction: column;justify-content: center;gap: 10px;
	position: absolute;top: 50%;right: -80px;transform: translateY(-50%);
}
.highlighter-container .nav-button {
	background: var(--color-primary);
	border-radius: 22px;border: none;position: relative;
	width: 44px;height: 70px;cursor: pointer;
	transition: background 0.3s ease;
}
.highlighter-container .nav-button::after {
	content: "";width: 20px;height: 20px;display: block;
	border-radius: 50%;box-sizing: border-box;
	position: absolute;top: 25px;left: 12px;
	background: url(../../img/icon/arrow04.svg) no-repeat center / 100%;
}
.highlighter-container .nav-button#prevButton::after {
	transform: rotate(180deg);
}
.highlighter-container .nav-button:hover {background: var(--color-tertiary)}
.nav-button:focus {
	outline: 2px solid #0066cc;
	outline-offset: 2px;
}
.nav-button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
/* アクセシビリティ：スクリーンリーダー用 */
.sr-only {
	position: absolute;
	width: 1px;height: 1px;
	padding: 0;margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

section.lead02 {text-align: center}
section.lead02 p.lead {font-size: 4.8rem}
section.lead02 h2 {font-size: 2.4rem;margin: 0}
section.lead02 ol {
	gap: 30px;margin: 50px 0 80px;
	justify-content: center;
	counter-reset: stepnum;
}
section.lead02 ol li {
	width: 500px;border-radius: 30px;padding: 40px 48px;box-sizing: border-box;
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
}
section.lead02 ol li::before{
	color: var(--color-primary);font-size: 2.4rem;font-family: "MFW-PA1GothicStd-Bold";line-height: 1;
	counter-increment: stepnum; /* counter-resetと同じ文字列 */
	content: "step " counter(stepnum, decimal-leading-zero);
}
section.lead02 ol h3 {margin: 0 0 25px}
section.lead02 ol p {font-size: 1.4rem;line-height: 1.4}
section.lead02 ol .back-grey {
	padding: 15px 30px;margin: 34px 0 0;
	border-radius: 10px;text-align: left;
}
section.lead02 ol .back-bk2 {
	padding: 15px 30px;margin: 34px 0 0;justify-content: space-between;
	border-radius: 10px;text-align: left;
}
section.lead02 ol .back-bk2 p {
	width: 210px;
}
section.lead02 ol .back-bk2 .btn01 {width: 130px}
section.lead02 ol .back-bk2 .btn01 a {
	display: block;background: var(--color-background-white);
	padding: 14px 40px 14px 20px;border-radius: 5px;
	font-size: 1.4rem;line-height: 1;
}
section.lead02 ol .back-bk2 .btn01 a span {position: relative}
section.lead02 ol .back-bk2 .btn01 a span::after {
	content: "";width: 16px;height: 16px;position: absolute;top: 0;right: -25px;
	background: url(../../img/icon/arrow04.svg) no-repeat center / 100%;
	filter: invert(1);transform: rotate(-90deg);
}
section.lead02 em {
	color: #FFF;font-size: 1.4rem;line-height: 120%;
	display: inline-block;background: var(--color-text-black);padding: 15px 30px;
}

section.reason h2 {
	font-size: 4.8rem;
}
section.reason ol {
	justify-content: center;counter-reset: reasonnum;
}
section.reason ol li {
	flex: 1;box-sizing: border-box;text-align: left;
	border-left: solid 1px var(--color-gray-200);padding: 50px;
}
section.reason ol li:first-of-type {padding: 50px 50px 50px 0;border-left: none}
section.reason ol li:last-of-type {padding: 50px 0 50px 50px}
section.reason ol li::before {
	font-size: 1.6rem;font-weight: 400;text-align: center;display: block;
	counter-increment: reasonnum; /* counter-resetと同じ文字列 */
	content: "– " counter(reasonnum, decimal-leading-zero) " –";
}
section.reason ol h3 {margin: 20px 0 15px}
section.reason ol p {line-height: 1.4}