@charset "UTF-8";


#main .ec-navi{ display: none; }
#main .kv{ position: relative; background-color: #d5000f; width: 100%; padding-top: 49.4792%; }
#main .kv img{ width: 100%; height: auto; }
#main .kv .photo01{ position: absolute; left: 0; top: 50%; width: 66.875%; transform: translateY(-50%); margin-left: 3.0208%; }
#main .kv .photo01 .ttl{ position: absolute; left: 0; top: 0; width: 79.1277%; margin: 10.5780% 0 0 13.5551%; z-index: 5; }
#main .kv .photo02{ position: absolute; left: 0; top: 0; width: 24.5833%; margin: 9.5115% 0 0 68.8369%; z-index: 10; }
#main .kv .photo03{ position: absolute; left: 0; top: 0; width: 15.7291%; margin: 30.1198% 0 0 65.6118%; z-index: 15; }
#main .kv .txt{ position: absolute; left: 0; top: 0; width: 14.1145%; margin: 1.2598% 0 0 83.3851%; z-index: 20; }
#main .section{ max-width: 1100px; margin: 90px auto 0; padding: 0 5% 120px; position: relative; }
#main .section04{ padding-bottom: 0; }
#main .section::before{ content: ''; position: absolute; bottom: 0; width: 61.46vw; height: 45px; background: url(../image/top/bg01.gif) center center repeat-x; background-size: auto 100%; }
#main .section01::before{ left: 50%; transform: translateX(-50vw); background-position: right 0; }
#main .section02::before,
#main .section03::before{ right: 50%; transform: translateX(50vw); background-position: 0 0; }
#main .section04::before{ display: none; }
#main .section01 .head-body{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#main .section01 .head-body .head { font-size: 30px; line-height: 1.33; font-weight: bold; margin: 0; }
#main .section01 .head-body .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 999px; background: #e84746; color: #ffffff; font-weight: 600; font-size: 16px; text-decoration: none; border: 2px solid #e84746; transition: all 0.2s ease; }
#main .section01 .head-body .btn svg { width: 20px; height: 20px; stroke: currentColor; }
#main .section01 .head-body .btn:hover,
#main .section01 .head-body .btn:focus-visible { background: #ffffff; color: #e84746; border-color: #e84746; outline: none; }
#main .section01 .release{ margin-top: 80px; }
#main .section01 .release .list-item{ margin-top: 20px; border-top: 2px solid #e84746; }
#main .section01 .release .list-item .item{ border-bottom: 1px solid #8d8d8d; padding: 20px 10px; }
#main .section01 .release .list-item .item .date{ font-size: 20px; line-height: 1.5; }
#main .section01 .release .list-item .item .txt{ font-size: 20px; line-height: 1.5; }
#main .section02 .section-ttl{ text-align: center; font-size: 54px; line-height: 1.31; color: #d5000f; font-weight: bold; }
#main .section02 .photo-body{ max-width: 842px; margin: 30px auto 0; position: relative; }
#main .section02 .photo-body .photo{ position: relative; }
#main .section02 .photo-body .photo01{ width: 100%; overflow: hidden; border-radius: 32px; }
#main .section02 .photo-body .photo02{ width: 54.6318%; overflow: hidden; border-radius: 24px; margin: -36.342% -16.3895% 0 auto; }
#main .section02 .photo-body+.txt{ font-size: 19px; line-height: 2.5; margin-top: 20px; text-align: center; }
#main .section02 .photo-body+.txt .word{ display: inline-block; }
#main .section02 .group{ margin-top: 100px; }
#main .section02 .group .ttl{ font-size: 36px; line-height: 1.5; color: #1eaa39; font-weight: bold; }
#main .section02 .group .split-view{ display: -ms-flex; display: flex; justify-content: space-between; margin-top: 3%; }
#main .section02 .group .split-view .illust{ width: 61.45%; }
#main .section02 .group .split-view .txt{ flex: 1; margin-right: 5%; font-size: 19px; line-height: 2; text-align: left; }

#main .section03 .intro{ position: relative; }
#main .section03 .intro::before{ content: ""; position: absolute; left: 0; bottom: 0; background: url(../image/top/section03/d03.webp); width: 19%; padding-top: 11.5454%; margin: 0 0 -14.5454% -5%; background-size: contain; }
#main .section03 .intro .split-view{ display: flex; display: -ms-flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; }
#main .section03 .intro .split-view .photo-body{ flex: 1; max-width: 445px; position: relative; }
#main .section03 .intro .split-view .photo-body .photo02{ width: 75.5056%; position: absolute; right: 100%; bottom: 0; margin-bottom: -15%; }
#main .section03 .intro .split-view .txt-body{ width: 450px; margin-right: 18%; }
#main .section03 .intro .split-view .txt-body .ttl{ font-size: 36px; line-height: 1.5; color: #d5000f; font-weight: bold; margin-bottom: 15px; }
#main .section03 .intro .split-view .txt-body .head{ font-size: 24px; line-height: 1.5; color: #d5000f; font-weight: bold; }
#main .section03 .intro .split-view .txt-body .txt{ font-size: 19px; line-height: 2; }
#main .section03 .staff-body{ margin: 170px auto 0; position: relative; }
#main .section03 .staff-body::before{ content: ""; position: absolute; right: 0; bottom: 0; background: url(../image/top/section03/d04.webp); width: 16.1818%; padding-top: 15.2727%; background-size: contain; margin-right: -12%; }
#main .section03 .staff-body .item{ width: 100%; max-width: 580px; margin: 0 auto; }
#main .section03 .staff-body .item .ttl{ margin: 0 auto; width: 69.35%; }
#main .section03 .staff-body .item .photo-body{ position: relative; margin-top: 3%; }
#main .section03 .staff-body .item .photo-body .photo{ overflow: hidden; border-radius: 50%; width: 93.6877%; margin: 0 auto; }
#main .section03 .staff-body .item .photo-body .photo img{ width: 100%; height: auto; }
#main .section03 .staff-body .item .photo-body .caption{ position: absolute; right: 0; top: 100%; font-size: 22px; line-height: 2; color: #1eaa39; transform: translateY(-20%); }
#main .section03 .staff-body .item .photo-body .bubble{ position: absolute; left: 0; top: 0; width: 39.82%; margin: 1.83% 0 0 64.37%; }
#main .section03 .staff-body .item .txt{ font-size: 19px; line-height: 2; margin: 5% auto 0; }
#main .section03 .reason-body{ position: relative; margin-top: 7%; z-index: 5; }
#main .section03 .reason-body .split-view{ display: -ms-flex; display: flex; flex-direction: row-reverse; position: relative; z-index: 5; align-items: flex-start; }
#main .section03 .reason-body .split-view .photo-body{ width: 55.91%; position: relative; margin-right: -5%; }
#main .section03 .reason-body .split-view .photo-body::before{ content: ""; position: absolute; left: 50%; top: 50%; background: url(../image/top/section03/d02.png) center center no-repeat; background-size: contain; width: 109.43%; padding-top: 91.70%; transform: translate(-50%,-50%); }
#main .section03 .reason-body .split-view .photo-body .photo-list{ clip-path: url(#clipshape01); z-index: 5; }
#main .section03 .reason-body .split-view .txt-body{ flex: 1; margin-right: 4.55%; }
#main .section03 .reason-body .split-view .txt-body .head{ font-size: 30px; line-height: 1.33; font-weight: bold; color: #1eaa39; }
#main .section03 .reason-body .split-view .txt-body .txt{ font-size: 19px; line-height: 2; margin-top: 5%; }
#main .section03 .reason-body .deco01{ margin: -25% 0 0 10%; width: 30%; }
#main .section03 .reason-body::after{ content: ""; position: absolute; left: 0; bottom: 0; background: url(../image/top/section03/d05.webp); width: 13.1818%; padding-top: 34.0909%; background-size: contain; margin: 0 0 -18% -26.3636%; }
#main .section04 .equipment{ margin-top: 1.81%; padding: 9.09% 0 12.36%; position: relative; z-index: 5; }
#main .section04 .equipment .bg{ position: absolute; left: 50%; top: 0; width: 153.09%; height: 100%; transform: translateX(-50%); }
#main .section04 .equipment .ttl{ font-size: 38px; line-height: 1.5; color: #e84746; font-weight: bold; text-align: center; position: relative; }
#main .section04 .equipment .txt{ font-size: 19px; line-height: 2; margin: 15px auto 0; width: 64.54%; position: relative; }
#main .section04 .equipment .list-item{ display: -ms-flex; display: flex; justify-content: space-between; width: 104.55%; margin-left: -2.27%; position: relative; margin-top: 5%; }
#main .section04 .equipment .list-item .item{ width: 28.7%; }
#main .section04 .equipment .list-item .item .photo{ width: 110%; margin-left: -5%; }
#main .section04 .equipment .list-item .item .head{ width: 100%; margin: 3% auto 0; font-size: 24px; line-height: 2; font-weight: bold; color: #e84746; text-align: center; }
#main .section04 .equipment .list-item .item .txt{ width: 100%; margin: 0 auto; font-size: 19px; line-height: 2; }
#main .section04 .smile{ margin-top: 80px; }
#main .section04 .smile .ttl{ text-align: center; font-size: 54px; line-height: 1.31; color: #d5000f; font-weight: bold; }
#main .section04 .smile .photo-body{ max-width: 844px; margin: 30px auto 0; position: relative; }
#main .section04 .smile .photo-body::before{ content: ""; position: absolute; right: 0; top: 0; background: url(../image/top/section04/d01.webp); width: 18.83885%; padding-top: 25.7109%; margin: -5% -23.2227% 0 0; background-size: contain; }
#main .section04 .smile .photo-body::after{ content: ""; position: absolute; left: 0; bottom: 0; background: url(../image/top/section04/d02.webp); width: 17.18005%; padding-top: 23.3412%; margin: 0 0 -5% -36.7298%; background-size: contain; }
#main .section04 .smile .photo-body .photo{ position: relative; }
#main .section04 .smile .txt{ font-size: 19px; line-height: 2.5; margin-top: 5%; margin-top: 30px; text-align: center; }
#main .section04 .smile .txt .word{ display: inline-block; }
#main .section04 .movie{ position: relative; width: 100%; padding-top: 56.25%; margin: 80px auto 0; }
#main .section04 .movie video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#main .section04 .navi-list{ margin: 100px auto 0; max-width: 940px; }
#main .section04 .navi-list .navi:nth-child(n+2){ margin-top: 30px; }
#main .section04 .navi-list .navi a{ display: block; border: 2px solid #e50012; text-align: center; color: #e50012; text-decoration: none; font-size: 30px; line-height: 1.5; font-weight: bold; border-radius: 20px; padding: 10px 0; background-color: #ffffff; }
#main .section04 .navi-list .navi a .icon{ display: inline-block; vertical-align: middle; line-height: 0; }
#main .section04 .navi-list .navi a .word{ display: inline-block; vertical-align: middle; }


@media screen and (max-width: 1210px) {
	#main .section03 .intro .photo-body{ flex: none; width: calc(40% - 35px); }
	#main .section03 .intro .txt-body{ margin-right: 0; }
	#main .section04 .equipment .txt{ font-size: 1.57vw; }
	#main .section04 .equipment .list-item .item .head{ font-size: 1.98vw; }
	#main .section04 .equipment .list-item .item .txt{ font-size: 1.57vw; }
}
@media screen and (max-width: 900px) {
	#main .ec-navi{ display: block; margin: 0 5% 3%; }
	#main .ec-navi a{ display: block; border: 2px solid #e50012; text-align: center; color: #e50012; text-decoration: none; line-height: 1.5; font-weight: bold; background-color: #ffffff; font-size: 3.4vw; border-radius: 2vw; padding: 2% 0; }
	#main .ec-navi a .icon{ width: 8.9902vw; display: inline-block; vertical-align: middle; line-height: 0; }
	#main .ec-navi a .word{ display: inline-block; vertical-align: middle; }
}
@media screen and (max-width: 767.5px) {
	#main .kv{ padding-top: 98.5714%; }
	#main .kv .photo01{ left: 0; top: 0; width: 92.1428%; transform: none; margin: 3.9286% 0 0 3.9286%; }
	#main .kv .photo02{ width: 43.9403%; margin: 54.4816% 0 0 5.5197%; }
	#main .kv .photo03{ width: 28.0623%; margin: 70.0681% 0 0 51.0483%; }
	#main .kv .txt{ width: 25.2876%; margin: 52.7667% 0 0 73.5504%; }
	#main .section{ margin-top: 10%; padding: 0 0 13.17%; width: 72.95%; /*width: 410px;*/ position: relative; }
	#main .section:last-child{ padding-bottom: 0; }
	#main .section::before{ width: 71.93vw; height: 4.14vw; }
	#main .section:last-child::before{ display: none; }
	#main .section01::before{ right: auto; left: 50%; transform: translateX(-50vw); background-position: right 0; }
	#main .section02::before,
	#main .section03::before{ left: auto; right: 50%; transform: translateX(50vw); background-position: 0 0; }
	#main .section img{ width: 100%; height: auto; }
	#main .section01 .head-body .head { font-size: 5vw; }
	#main .section01 .head-body .btn { gap: 5px; padding: 3% 5%; font-size: 3.55vw; }
	#main .section01 .head-body .btn svg { width: 15px; height: 15px; }
	#main .section01 .release{ margin-top: 20%; }
	#main .section01 .release .list-item{ margin-top: 5%; }
	#main .section01 .release .list-item .item{ padding: 10% 0; }
	#main .section01 .release .list-item .item .date{ font-size: 4vw; line-height: 1.5; }
	#main .section01 .release .list-item .item .txt{ font-size: 4vw; line-height: 1.5; }	
	#main .section02 .section-ttl{ font-size: 6vw; margin: 0 -8%; }
	#main .section02 .photo-body{ margin-top: 5%; }
	#main .section02 .photo-body .photo01{ border-radius: 5vw; }
	#main .section02 .photo-body .photo02{ border-radius: 3vw; }
	#main .section02 .photo-body+.txt{ font-size: 3.55vw; line-height: 1.75; text-align: left; }
	#main .section02 .photo-body+.txt .word{ display: inline; }
	#main .section02 .group{ margin-top: 15%; }
	#main .section02 .group .ttl{ font-size: 6vw; }
	#main .section02 .group .split-view{ display: block; }
	#main .section02 .group .split-view .illust{ width: 116.77%; margin: 5% 0 0 -8.38%; }
	#main .section02 .group .split-view .txt{ font-size: 3.55vw; line-height: 1.75; margin-top: 5%; }
	#main .section03 .intro .split-view{ display: block; }
	#main .section03 .intro .split-view .photo-body{ width: auto; display: flex; display: -ms-flex; align-items: flex-end; flex-direction: row-reverse; margin: 0 -10%; max-width: none; }
	#main .section03 .intro .split-view .photo-body .photo01{ width: 56.9782%; }
	#main .section03 .intro .split-view .photo-body .photo02{ width: 43.0217%; position: static; margin-bottom: 0; }
	#main .section03 .intro .split-view .txt-body{ width: 100%; margin-right: 0; margin-top: 15px; }
	#main .section03 .intro .split-view .txt-body .ttl{ font-size: 6vw; line-height: 1.5; margin-bottom: 10px; }
	#main .section03 .intro .split-view .txt-body .head{ font-size: 4.5vw; line-height: 1.5; }
	#main .section03 .intro .split-view .txt-body .txt{ font-size: 3.55vw; line-height: 1.75; }
	#main .section03 .staff-body{ margin-top: 20%; }
	#main .section03 .staff-body .item:nth-child(n+2){ margin-top: 14.63%; }
	#main .section03 .staff-body .item01 .ttl{ width: 84.51%; }
	#main .section03 .staff-body .item02 .ttl{ width: 69.14%; }
	#main .section03 .staff-body .item .photo-body .caption{ position: relative; left: 0; right: auto; top: auto; font-size: 4vw; transform: none; margin-top: 3%; text-align: center; }
	#main .section03 .staff-body .item .txt{ font-size: 3.55vw; line-height: 1.75; width: 100%; }
	#main .section03 .reason-body{ position: relative; margin-top: 20%; }
	#main .section03 .reason-body .split-view{ display: block; }
	#main .section03 .reason-body .split-view .photo-body{ width: 96.36%; margin: 0 auto; }
	#main .section03 .reason-body .split-view .txt-body{ margin: 10% 0 0; }
	#main .section03 .reason-body .split-view .txt-body .head{ font-size: 4.44vw; }
	#main .section03 .reason-body .split-view .txt-body .txt{ font-size: 3.55vw; /*line-height: 1.75;*/ }
	#main .section03 .reason-body .deco01{ margin: 3% auto 0; width: 80%; }
	#main .section04 .equipment{ margin-top: 9.75%; padding: 29.26% 0 33.41%; }
	#main .section04 .equipment .bg{ position: absolute; left: 50%; top: 0; width: 137.08%; height: 100%; transform: translateX(-50%); background: url(../image/top/section04/sp/bg02.jpg) center center repeat; background-size: 100% auto; }
	#main .section04 .equipment .bg::before,
	#main .section04 .equipment .bg::after{ content: ""; position: absolute; left: 0; width: 100%; padding-top: 33.09%; background: url(../image/top/section04/sp/bg01.jpg); background-size: cover; }
	#main .section04 .equipment .bg::before{ top: 0; }
	#main .section04 .equipment .bg::after{ bottom: 0; transform: rotate(180deg); }
	#main .section04 .equipment .bg img{ display: none; }
	#main .section04 .equipment .ttl{ font-size: 6vw; }
	#main .section04 .equipment .txt{ font-size: 3.55vw; line-height: 1.75; width: 100%; }
	#main .section04 .equipment .list-item{ display: block; width: 100%; margin: 10% 0 0; }
	#main .section04 .equipment .list-item .item{ width: 100%; text-align: center; }
	#main .section04 .equipment .list-item .item:nth-child(n+2){ margin-top: 19.51%; }
	#main .section04 .equipment .list-item .item .photo{ width: 106.65%; margin-left: -3.32%; }
	#main .section04 .equipment .list-item .item .head{ width: 100%; margin: 3% auto 0; font-size: 4vw; line-height: 1.75; }
	#main .section04 .equipment .list-item .item .txt{ width: auto; max-width: 75.60%; margin: 0 auto; font-size: 3.55vw; line-height: 1.75; display: inline-block; text-align: left; }
	#main .section04 .smile{ margin-top: 80px; }
	#main .section04 .smile .ttl{ font-size: 6vw; margin: 0 -15%; }
	#main .section04 .smile .photo-body{ margin-top: 5%; }
	#main .section04 .smile .txt{ font-size: 3.55vw; line-height: 1.75; margin-top: 5%; text-align: left; }
	#main .section04 .movie{ margin-top: 10%; }
	#main .section04 .navi-list{ margin: 15% -12% 0; }
	#main .section04 .navi-list .navi:nth-child(n+2){ margin-top: 3%; }
	#main .section04 .navi-list .navi a{ font-size: 3.4vw; border-radius: 2vw; padding: 2% 0; }
	#main .section04 .navi-list .navi01 a .icon{ max-width: 8.9902vw; }
	#main .section04 .navi-list .navi02 a .icon{ max-width: 15.2442vw; }
	#main .section04 .navi-list .navi03 a .icon{ max-width: 7.4267vw; }
}







#main .kv .photo01{ mask: url(../image/top/kv/p01.webp) center center no-repeat; -webkit-mask: url(../image/top/kv/p01.webp) center center no-repeat; mask-size: 0%; -webkit-mask-size: 0%; }
#main .kv.show .photo01{ mask-size: 100%; -webkit-mask-size: 100%; transition: mask-size 1s ease-in-out, -webkit-mask-size 1s ease-in-out; }
#main .kv .photo01 .ttl{ opacity: 0; transform: scale(1.1); }
#main .kv.show .photo01 .ttl{ opacity: 1; transform: scale(1); transition: transform 1s, opacity 1s; transition-delay: 1.2s; }
#main .kv .photo02{ mask: url(../image/top/kv/p02.webp) center center no-repeat; -webkit-mask: url(../image/top/kv/p02.webp) center center no-repeat; mask-size: 0%; -webkit-mask-size: 0%; }
#main .kv.show .photo02{ mask-size: 100%; -webkit-mask-size: 100%; transition: mask-size 0.8s 0.5s ease, -webkit-mask-size 0.8s 0.5s ease; }
#main .kv .photo03{ mask: url(../image/top/kv/p03.webp) center center no-repeat; -webkit-mask: url(../image/top/kv/p03.webp) center center no-repeat; mask-size: 0%; -webkit-mask-size: 0%; }
#main .kv.show .photo03{ mask-size: 100%; -webkit-mask-size: 100%; transition: mask-size 0.8s 0.7s ease, -webkit-mask-size 0.8s 0.7s ease; }
#main .kv .txt{ transform: scale(0); }
#main .kv.show .txt{ transform: scale(1); transition: transform 0.8s 0.9s ease; }