@charset "UTF-8";

/*--------------------------------------------
FONTS
---------------------------------------------*/

@font-face {
		font-family: 'Honoka Shin Maru-Gothic R';
		src: url("Honoka-Shin-Maru-Gothic_R.woff2") format( "woff2");
}

.honoka {
		font-family: 'Honoka Shin Maru-Gothic R', sans-serif;
}

@font-face {
		font-family: 'Roboto Flex';
		src: url("RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.woff2") format( "woff2");
}

.roboto {
		font-family: 'Roboto Flex', sans-serif;
}


/*--------------------------------------------
SETTINGS
---------------------------------------------*/

@media screen and (max-width: 750px) {
		html {
				font-size: calc( 10 * 100vw / var(--breakPoint))
		}
}

@media screen and (min-width: 750.02px) and (max-width: 1247.98px) {
		html {
				font-size: calc( 10 * 100vw / var(--breakPoint))
		}
}

@media print, screen and (min-width: 1248px) {
		html {
				font-size: 10px
		}
}

@media screen and (max-width: 750px) {
		:root {
				--headerHeight: calc( 120 var(--remBase));
		}
}

@media print, screen and (min-width: 750.02px) {
		:root {
				--headerHeight: calc( 100 var(--remBase));
		}
}

html {
		scroll-padding-top: var(--headerHeight);
}

body {
		padding-top: var(--headerHeight);
}


/*--------------------------------------------
WRAPPER
---------------------------------------------*/

.wrap {
		background-color: #fff;
}

@media screen and (max-width: 750px) {
		.wrap {
				padding-inline: calc( 40 * 100% / var(--breakPoint))
		}
}

@media screen and (min-width: 750.02px) and (max-width: 1247.98px) {
		.wrap {
				padding-inline: calc( 20 * 100% / var(--breakPoint))
		}
}

@media print, screen and (min-width: 1248px) {
		.wrap {
				padding-inline: calc( ( 100% - 1208px) / 2)
		}
}

@media screen and (max-width: 750px) {
		.wrap-sp {
				padding-inline: calc( 40 * 100% / var(--breakPoint))
		}
}

@media screen and (min-width: 750.02px) and (max-width: 1247.98px) {
		.wrap-pc {
				padding-inline: calc( 20 * 100% / var(--breakPoint))
		}
}

@media print, screen and (min-width: 1248px) {
		.wrap-pc {
				padding-inline: calc( ( 100% - 1208px) / 2)
		}
}


/*--------------------------------------------
STATE
---------------------------------------------*/

@layer common {
		@media screen and (max-width: 750px) {
				.is-pc {
						display: none
				}
		}
		@media screen and (max-width: 750px) {
				.is-tb {
						display: none
				}
		}
		@media print, screen and (min-width: 1248px) {
				.is-tb {
						display: none
				}
		}
		@media print, screen and (min-width: 750.02px) {
				.is-sp {
						display: none
				}
		}
}


/*--------------------------------------------
COMMON
---------------------------------------------*/

.full {
		width: 100%;
		height: auto;
}

[data-before]:before {
		content: attr( data-before);
		white-space: pre;
}

[data-after]:after {
		content: attr( data-after);
		white-space: pre;
}

[data-both]:before {
		content: attr( data-both);
		white-space: pre;
}

[data-both]:after {
		content: attr( data-both);
		white-space: pre;
}

@media screen and (max-width: 750px) {
		[data-sp-after]:after {
				content: attr( data-sp-after);
				white-space: pre
		}
}

@media screen and (max-width: 750px) {
		[data-sp-before]:before {
				content: attr( data-sp-before);
				white-space: pre
		}
}

@media print, screen and (min-width: 750.02px) {
		[data-pc-after]:after {
				content: attr( data-pc-after);
				white-space: pre
		}
}

@media print, screen and (min-width: 750.02px) {
		[data-pc-before]:before {
				content: attr( data-pc-before);
				white-space: pre
		}
}


/*--------------------------------------------
LAYOUT
  HEADER
---------------------------------------------*/

#header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		height: var(--headerHeight);
		background-color: #fff;
}

@media screen and (max-width: 750px) {
		#header {
				padding-top: calc( 25 var(--remBase));
				padding-left: calc( 36 * 100% / var(--breakPoint));
				padding-right: calc( 10 * 100% / var(--breakPoint));
				box-shadow: calc( -10 var(--remBase)) 0 calc( 15 var(--remBase)) 0 rgba(0, 0, 0, 0.1)
		}
		#header .logo {
				font-size: 0;
		}
		#header .logo img {
				height: calc( 71 var(--remBase));
		}
}

@media print, screen and (min-width: 750.02px) {
		#header {
				display: grid;
				align-items: start;
				translate: 0 0;
				opacity: 1;
				transition: translate var(--transitionBase), opacity var(--transitionBase);
				box-shadow: 0 0 calc( 10 var(--remBase)) 0 rgba(0, 0, 0, 0.1)
		}
		#header.is-down {
				translate: 0 -100%;
				opacity: 0;
		}
		#header .logo {
				grid-column: 2;
				grid-row: 1;
		}
		#header #nav {
				grid-column: 4;
				grid-row: 1;
		}
}

@media (min-width: 750.02px) and (max-width: 1365.98px) {
		#header {
				padding-top: calc( ( 25 - 5.2) * 100vw / 1366);
				grid-template-columns: calc( 40 * 100% / 1366) auto 1fr auto calc( 36 * 100% / 1366)
		}
		#header .logo {
				margin-top: calc( 6.2 * 100vw / 1366);
		}
		#header .logo img {
				height: calc( 58 * 100vw / 1366);
		}
}

@media (min-width: 1366px) {
		#header {
				grid-template-columns: 40px auto 1fr auto 36px;
				padding-top: calc( 25px - 5.2px)
		}
		#header .logo {
				margin-top: 6.2px;
		}
		#header .logo img {
				height: 58px;
		}
}


/*--------------------------------------------
LAYOUT
  MENU BUTTON
---------------------------------------------*/

@media screen and (max-width: 750px) {
		body.is-open {
				overflow: hidden;
		}
		body.is-open #nav {
				max-height: calc( 100dvh - var(--headerHeight));
		}
		body.is-open #menuBtn>span:nth-of-type(1) span:nth-of-type(1) {
				scale: 0;
				translate: calc( 10 var(--remBase)) 0;
		}
		body.is-open #menuBtn>span:nth-of-type(1) span:nth-of-type(2) {
				rotate: -45deg;
		}
		body.is-open #menuBtn>span:nth-of-type(1) span:nth-of-type(3) {
				rotate: 45deg;
		}
		body.is-open #menuBtn>span:nth-of-type(1) span:nth-of-type(4) {
				scale: 0;
				translate: calc( -10 var(--remBase)) 0;
		}
}

#menuBtn {
		z-index: 12;
		overflow: hidden;
}

#menuBtn>span:nth-of-type(1) {
		font-size: 0;
		width: 100%;
		height: 100%;
		position: relative;
		display: block;
}

#menuBtn span span {
		display: block;
		position: absolute;
		left: 0;
		transition: all .4s;
		width: 100%;
}

#menuBtn span span:nth-of-type(1) {
		top: 0;
}

#menuBtn span span:nth-of-type(4) {
		bottom: 0;
}

#menuBtn {
		position: absolute;
		top: calc( 20 var(--remBase));
		height: calc( 80 var(--remBase));
		right: calc( 10 * 100% / var(--breakPoint));
		width: calc( 102 * 100% / var(--breakPoint));
		border-left: solid calc( 2 var(--remBase)) var(--green);
		padding-inline: calc( 20 * 100% / var(--breakPoint));
		padding-block: calc( 23.5 var(--remBase));
}

#menuBtn>span:nth-of-type(1) {
		height: calc( 43 var(--remBase));
}

#menuBtn>span:nth-of-type(1) span {
		background-color: var(--green);
		height: calc( 4 var(--remBase));
}

#menuBtn>span:nth-of-type(1) span:nth-of-type(2), #menuBtn>span:nth-of-type(1) span:nth-of-type(3) {
		top: calc( 19.5 var(--remBase));
}


/*--------------------------------------------
LAYOUT
  NAV
---------------------------------------------*/

@media screen and (max-width: 750px) {
		#nav {
				position: fixed;
				translate: 0 0;
				z-index: 11;
				transition: translate .5s ease-in;
				overflow-y: auto;
				max-height: 100vh;
				top: 0;
				left: 100%;
		}
		#nav .scroll {
				overflow-y: auto;
		}
		body.is-open #nav {
				translate: -100% 0;
		}
}

@media screen and (max-width: 750px) {
		#nav {
				width: 100%;
				background-color: #f5faf8;
				min-height: calc( 100dvh - var(--headerHeight));
				top: var(--headerHeight);
				padding-bottom: calc( 80 var(--remBase))
		}
}


/*--------------------------------------------
GLOBAL NAV
---------------------------------------------*/

#globalNav {
		display: flex;
		flex-wrap: wrap;
}

#globalNav a {
		font-weight: 600;
}

#globalNav :where( .icon01, .icon02)>a {
		display: flex;
		align-items: center;
		justify-content: start;
}

#globalNav :where( .icon01, .icon02)>a:before {
		content: "";
		display: block;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 0 0;
}


/*
#globalNav .icon01 > a:before{
		background-image: url("../img/ui/icon/healthcare_workers.svg");
	}
#globalNav .icon02 > a:before{
		background-image: url("../img/ui/icon/document.svg");
	}
*/

@media screen and (max-width: 750px) {
		#globalNav {
				border-bottom: calc( 2 var(--remBase)) solid var(--green)
		}
		#globalNav>li {
				position: relative;
		}
		#globalNav :where(.icon01, .icon02) {
				width: 50%;
		}
		#globalNav :where(.icon01, .icon02) a {
				font-size: calc( 28 var(--remBase));
				;
				line-height: calc( 40 / 28);
				;
				padding-block: calc( 49 var(--remBase));
		}
		#globalNav .icon01 a {
				column-gap: calc( 7 * 100% / 335);
		}
		#globalNav .icon01 a:before {
				width: calc( 34 * 100% / 335);
				height: calc( 26 var(--remBase));
		}
		#globalNav .icon02 a {
				column-gap: calc( 10 * 100% / 335);
		}
		#globalNav .icon02 a:before {
				width: calc( 24 * 100% / 335);
				height: calc( 25 var(--remBase));
		}
		#globalNav>li:not(.icon01):not(.icon02) {
				width: 100%;
				border-top: calc( 2 var(--remBase)) solid var(--green);
		}
		#globalNav>li:not(.icon01):not(.icon02)>a {
				display: flex;
				align-items: start;
				justify-content: start;
				column-gap: calc( 19 var(--percentBase));
				font-size: 3.2rem;
				padding-block: calc( 34 var(--remBase));
		}
		#globalNav>li:not(.icon01):not(.icon02)>a:before {
				content: "";
				font-size: 0;
				background: url("../img/ui/parts/circle01.svg") 0 0 / contain no-repeat;
				width: calc( 24 var(--percentBase));
				height: calc( 24 var(--remBase));
				margin-top: calc( 4 var(--remBase));
		}
		#globalNav button {
				position: absolute;
				right: 0;
				top: calc( 10 var(--remBase));
				width: calc( 80 var(--percentBase));
				height: calc( 80 var(--remBase));
				background-color: rgba(15, 127, 80, .2);
				border-radius: calc( 10 var(--remBase));
				display: flex;
				flex-direction: column;
				justify-content: start;
				align-items: center;
				text-align: center;
				letter-spacing: .06em;
				text-indent: .06em;
				font-size: 2rem;
				padding-top: calc( 50 var(--remBase));
				color: var(--green);
				font-weight: 600;
		}
		#globalNav button:before, #globalNav button:after {
				content: "";
				display: block;
				background-color: var(--green);
				position: absolute;
				top: calc( 28 var(--remBase));
				left: calc( 25 * 100% / 80);
				transition: .3s;
				width: calc( 30 * 100% / 80);
				height: calc( 4 var(--remBase));
				font-size: 0;
		}
		#globalNav button:before {
				transform: translatey(-50%);
		}
		#globalNav button:after {
				transform: translatey(-50%) rotate(90deg);
		}
		#globalNav button.is-open:before {
				transform: translatey(-50%) rotate(-90deg);
				opacity: 0;
		}
		#globalNav button.is-open:after {
				transform: translatey(-50%) rotate(0);
		}
		#globalNav ul {
				display: none;
				margin-left: calc( 52 var(--percentBase));
				margin-top: calc( ( 44 - 34 - 14) var(--remBase));
				padding-bottom: calc( ( 53 - 14) var(--remBase));
		}
		#globalNav li li+li {
				margin-top: calc( ( 32 - 14 - 14) var(--remBase));
		}
		#globalNav li li a {
				display: flex;
				align-items: start;
				justify-content: start;
				column-gap: calc( 7 * 100% / 618);
				font-size: calc( 28 var(--remBase));
				;
				line-height: 2;
		}
		#globalNav li li a:before {
				content: "";
				display: block;
				font-size: 0;
				background: url("../img/ui/allow/right02.svg") 0 0 / contain no-repeat;
				width: calc( 12 * 100% / 618);
				height: calc( 21 var(--remBase));
				margin-top: calc( 17.5 var(--remBase));
		}
}

@media print, screen and (min-width: 750.02px) {
		#globalNav {
				align-items: start;
				justify-content: end
		}
		#globalNav:before {
				content: "";
				width: 100%;
				display: block;
				order: 2;
		}
		#globalNav>li:nth-child(-n+2) {
				order: 1
		}
		#globalNav>li:nth-child(n+3) {
				order: 3;
		}
		#globalNav a {
				transition: color var(--transitionBase);
		}
		#globalNav a:hover {
				color: var(--green);
		}
		#globalNav>li>a {
				letter-spacing: 0.04em;
		}

		#globalNav > li:nth-child(-n+2) > a{
			line-height: calc( 22.4 / 14 );
		}

		#globalNav>li:not(.icon01):not(.icon02)>a {
				line-height: calc( 25.6 / 16);
				border-bottom-style: solid;
				border-bottom-color: transparent;
				display: block;
		}
		#globalNav>li:not(.icon01):not(.icon02)>a.is-current {
				border-bottom-color: var(--green);
		}
		#globalNav>li:last-child:not(.icon01):not(.icon02)>a {
				padding-right: 0;
		}
		#globalNav ul {
				display: none;
		}
}

@media (min-width: 750.02px) and (max-width: 1365.98px) {

		#globalNav > li:nth-child(-n+2) > a{
			column-gap: calc( 5 * 100vw / 1366 );
			font-size: calc( 14 * 100vw / 1366 );
		}

		#globalNav .icon01 {
				margin-left: calc( 29 * 100vw / 1366);
				column-gap: calc( 5 * 100vw / 1366 );
				font-size: calc( 13 * 100vw / 1366 );
		}
		#globalNav .icon01>a:before {
				width: calc( 23 * 100vw / 1366);
				height: calc( 18 * 100vw / 1366);
				font-size: 14px;
		}

		#globalNav .icon02{
			margin-left: calc( 29 * 100vw / 1366 );
		}
				#globalNav .icon02 > a:before{
					width: calc( 17 * 100vw / 1366 );
					height: calc( 18 * 100vw / 1366 );
				}

		#globalNav>li+li:not(.icon01):not(.icon02) {
				margin-left: calc( 20 * 100vw / 1366);/*margin-left: calc( 28 * 100vw / 1366);*/
		}
		#globalNav>li:not(.icon01):not(.icon02)>a {
				font-size: calc( 16 * 100vw / 1366);
				padding-bottom: calc( ( 16 - 4.2) * 100vw / 1366);
				padding-top: calc( ( 20 - 4.2) * 100vw / 1366);
				border-bottom-width: calc( 4 * 100vw / 1366);
		}
}

@media (min-width: 1366px) {
		#globalNav > li:nth-child(-n+2) > a{
			column-gap: 5px;
			font-size: 14px;
		}
		
		#globalNav .icon01 {
				margin-left: 29px;
				column-gap: calc( 5 * 100vw / 1366 );
				font-size: calc( 13 * 100vw / 1366 );
		}
		#globalNav .icon01>a:before {
				width: 23px;
				height: 18px;
				margin-left: 29px;
				font-size: 14px;
		}
		
		#globalNav .icon02{
			margin-left: 29px;
		}
		#globalNav .icon02 > a:before{
			width: 17px;
			height: 18px;
		}
		
		#globalNav>li+li:not(.icon01):not(.icon02) {
				margin-left: 28px;
		}
		#globalNav>li:not(.icon01):not(.icon02)>a {
				font-size: 16px;
				padding-bottom: calc( 16px - 4.2px);
				padding-top: calc( 20px - 4.2px);
				border-bottom-width: 4px;
		}
}


/*--------------------------------------------
MAIN VISUAL PATTERN A
---------------------------------------------*/

#mvA {
		background-size: cover;
		background-repeat: no-repeat;
		overflow: hidden;
		position: relative;
}

#mvA:before {
		content: "";
		position: absolute;
		display: block;
		background-position: 0 0;
		background-size: contain;
		background-repeat: no-repeat;
}

#mvA p {
		color: #fff;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 0 0;
		letter-spacing: 0.08em;
		text-align: center;
}

#mvA ul {
		align-items: start;
}

#mvA ul a {
		transition: translate .3s ease-in;
		display: block;
}

#mvA ul a:hover span {
		border-color: var(--green);
}

#mvA ul a:hover svg {
		overflow: visible;
}

#mvA ul a:hover .right-hand {
		animation-name: rightHand;
}

#mvA ul a:hover .left-hand {
		animation-name: leftHand;
}

#mvA ul a:hover .right-foot {
		animation-name: rightFoot;
}

#mvA ul a:hover .left-foot {
		animation-name: leftFoot;
}

#mvA ul span {
		background-color: #fff;
		border-style: solid;
		border-color: #fff;
		font-weight: 600;
		text-align: center;
		letter-spacing: .04em;
		text-indent: .04em;
		color: var(--green);
		border-radius: 100vmax;
		display: grid;
		place-items: center;
		width: 100%;
		position: relative;
		transition: border .3s ease-in;
}

#mvA ul span:after, #mvA ul span:before {
		content: "";
		display: block;
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
}

#mvA ul span:before {
		background-image: url("../img/home/mv/circle.svg");
		background-size: contain;
}

#mvA ul span:after {
		background-color: var(--green);
		border-radius: 50%;
		background-image: url("../img/ui/allow/down01.svg");
}

#mvA ul svg {
		position: relative;
		z-index: 1;
}

#mvA ul svg path, #mvA ul svg circle {
		fill: #000;
}

#mvA ul svg .cls-1 {
		fill: none;
		stroke: #000;
		stroke-linecap: round;
		stroke-linejoin: round;
}

#mvA ul svg .cls-2, #mvA ul svg circle {
		stroke: none;
}

#mvA ul :where( .right-hand, .left-hand, .right-foot, .left-foot) {
		animation-direction: normal;
		animation-duration: .4s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
}

#mvA ul li:nth-child(1) svg .cls-1 {
		stroke-width: 4px;
}

#mvA ul li:nth-child(1) svg .cls-2 {
		fill: #86d13f;
}

#mvA ul li:nth-child(2) svg .cls-1 {
		stroke-width: 2px;
}

#mvA ul li:nth-child(2) svg .cls-2 {
		fill: #e5d948;
}

#mvA ul li:nth-child(3) svg .cls-1 {
		stroke-width: 5px;
}

#mvA ul li:nth-child(3) svg .cls-2 {
		fill: #0a6c44;
}

@media screen and (max-width: 750px) {
		#mvA {
				padding-bottom: calc( 81 var(--remBase));
				background-position: 0 0;
				height: calc( 900 var(--remBase));
				background: url("../img/home/mv/bg0101_sp.webp") 0 0 / cover no-repeat;
				padding-top: calc( 91 var(--remBase))
		}
		#mvA:before {
				width: calc( 826 * 100% / 750);
				left: calc( -46 * 100% / 750);
				height: calc( 513 var(--remBase));
				top: calc( 76 var(--remBase));
				background-image: url("../img/home/mv/bg0102_sp.webp");
		}
		#mvA p {
				padding-top: calc( ( 72 - 11) var(--remBase));
				margin-left: calc( 39 * 100% / var(--breakPoint));
				font-size: calc( 70 var(--remBase));
				;
				line-height: 1.2;
				width: calc( 654 * 100% / var(--breakPoint));
				height: calc( 277 var(--remBase));
				background-image: url("../img/home/mv/bg_catchcopy_sp.webp");
				padding-left: calc( 8.5 * 100% / var(--breakPoint));
		}
		#mvA p span {
				font-size: calc( 62 var(--remBase));
				;
				line-height: calc( 84 / 62);
				;
		}
		#mvA ul {
				margin-top: calc( 68 var(--remBase));
				margin-inline: auto;
				width: calc( 700 * 100% / var(--breakPoint));
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				column-gap: calc( 20 * 100% / 700);
				row-gap: calc( ( 22 / 2) var(--remBase));
		}
		#mvA ul>li {
				width: calc( 340 * 100% / 700);
		}
		#mvA ul a:hover {
				translate: 0 calc( -20 var(--remBase));
		}
		#mvA ul li:first-child {
				order: 1;
		}
		#mvA ul:before {
				content: "";
				display: block;
				width: 100%;
				order: 2;
		}
		#mvA ul li+li {
				order: 3;
		}
		#mvA ul span {
				height: calc( 120 var(--remBase));
				font-size: calc( 24 var(--remBase));
				;
				line-height: 1.5;
				border-width: calc( 2 var(--remBase));
		}
		#mvA ul span:before {
				width: calc( 32 * 100% / 336);
				height: calc( 24 var(--remBase));
				top: calc( 128 var(--remBase));
				left: calc( 44 * 100% / 336);
		}
		#mvA ul span:after {
				width: calc( 26 * 100% / 336);
				height: calc( 26 var(--remBase));
				background-size: auto calc( 9 var(--remBase));
				top: calc( 47 var(--remBase));
				right: calc( 26 * 100% / 336);
		}
		#mvA ul li:nth-child(1) svg {
				width: calc( 190 * 100% / 340);
				height: calc( 115 var(--remBase));
				margin-top: calc( -18 var(--remBase));
				margin-left: calc( 92 * 100% / 340);
		}
		#mvA ul li:nth-child(2) svg {
				width: calc( 172 * 100% / 340);
				height: calc( 117 var(--remBase));
				margin-top: calc( -11 var(--remBase));
				margin-left: calc( 76 * 100% / 340);
		}
		#mvA ul li:nth-child(3) svg {
				width: calc( 173 * 100% / 340);
				height: calc( 117 var(--remBase));
				margin-top: calc( -13 var(--remBase));
				margin-left: calc( 89 * 100% / 340);
		}
}

@media print, screen and (min-width: 750.02px) {
		#mvA {
				background-position: center;
				background-image: url("../img/home/mv/bg0101_pc.webp")
		}
		#mvA:before {
				background-image: url("../img/home/mv/bg0102_pc.webp");
		}
		#mvA p {
				background-image: url("../img/home/mv/bg_catchcopy_pc.webp");
		}
		#mvA ul {
				display: grid;
				margin-inline: auto;
				justify-content: space-between;
				grid-auto-flow: column;
		}
		#mvA ul li:nth-child(1) {
				order: 2;
		}
		#mvA ul li:nth-child(2) {
				order: 1;
		}
		#mvA ul li:nth-child(3) {
				order: 3;
		}
}

@media screen and (min-width: 750.02px) and (max-width: 1899.98px) {
		#mvA {
				margin-bottom: calc( 40 var(--remBase));
				height: calc( 626 var(--remBase));
				padding-top: calc( 107 var(--remBase))
		}
		#mvA:before {
				height: calc( 389 var(--remBase));
				top: calc( 120 var(--remBase));
				width: calc( 1326 * 100% / 1900);
				left: calc( 50% - ( 714 * 100% / 1900));
		}
		#mvA p {
				padding-top: calc( ( 69 - 6) var(--remBase));
				margin-left: calc( 306 var(--percentBase));
				font-size: calc( 62 var(--remBase));
				;
				line-height: calc( 74 / 62);
				;
				width: calc( 629 var(--percentBase));
				height: calc( 252 var(--remBase));
				padding-left: calc( 12.5 var(--percentBase));
		}
		#mvA p span {
				font-size: calc( 56 var(--remBase));
				;
				line-height: calc( 74 / 56);
				;
		}
		#mvA ul {
				margin-top: calc( 39 var(--remBase));
				width: calc( 920 var(--percentBase));
				grid-template-columns: repeat( 3, calc( 280 * 100% / 920));
		}
		#mvA ul a:hover {
				translate: 0 calc( -20 var(--remBase));
		}
		#mvA ul span {
				height: calc( 100 var(--remBase));
				font-size: calc( 18 var(--remBase));
				;
				line-height: 1.5;
				border-width: calc( 2 var(--remBase));
		}
		#mvA ul span:before {
				width: calc( 22 * 100% / 276);
				height: calc( 22 var(--remBase));
				top: calc( 108 var(--remBase));
				left: calc( 20 * 100% / 276);
		}
		#mvA ul span:after {
				width: calc( 20 * 100% / 276);
				height: calc( 20 var(--remBase));
				background-size: auto calc( 7 var(--remBase));
				top: calc( 40 var(--remBase));
				right: calc( 20 * 100% / 276);
		}
		#mvA ul li:nth-child(1) svg {
				width: calc( 152 * 100% / 280);
				height: calc( 92 var(--remBase));
				margin-top: calc( -11 var(--remBase));
				margin-left: calc( 73 * 100% / 280);
		}
		#mvA ul li:nth-child(2) svg {
				width: calc( 140 * 100% / 280);
				height: calc( 95 var(--remBase));
				margin-top: calc( -14 var(--remBase));
				margin-left: calc( 60 * 100% / 280);
		}
		#mvA ul li:nth-child(3) svg {
				width: calc( 137 * 100% / 280);
				height: calc( 93 var(--remBase));
				margin-top: calc( -12 var(--remBase));
				margin-left: calc( 74 * 100% / 280);
		}
}

@media screen and (min-width: 1900px) {
		#mvA {
				max-width: 1900px;
				margin-inline: auto;
				margin-bottom: 40px;
				height: 626px;
				padding-top: 107px;
				padding-inline: 0
		}
		#mvA:before {
				height: 389px;
				top: 120px;
				width: 1326px;
				left: calc( 50% - 714px);
		}
		#mvA p {
				padding-top: calc( 69px - 6px);
				margin-left: 653px;
				font-size: calc( 62 var(--remBase));
				;
				line-height: calc( 74 / 62);
				;
				width: 629px;
				height: 252px;
				padding-left: 12.5px;
		}
		#mvA p span {
				font-size: calc( 56 var(--remBase));
				;
				line-height: calc( 74 / 56);
				;
		}
		#mvA ul {
				margin-top: 39px;
				width: 920px;
				grid-template-columns: repeat( 3, 280px);
		}
		#mvA ul a:hover {
				translate: 0 20px;
		}
		#mvA ul span {
				height: 100px;
				font-size: calc( 18 var(--remBase));
				;
				line-height: 1.5;
				border-width: 2px;
		}
		#mvA ul span:before {
				width: 22px;
				height: 22px;
				top: 108px;
				left: 20px
		}
		#mvA ul span:after {
				width: 20px;
				height: 20px;
				background-size: auto 7px;
				top: 40px;
				right: 20px;
		}
		#mvA ul li:nth-child(1) svg {
				width: 152px;
				height: 92px;
				margin-top: -11px;
				margin-left: 73px;
		}
		#mvA ul li:nth-child(2) svg {
				width: 140px;
				height: 95px;
				margin-top: -14px;
				margin-left: 60px;
		}
		#mvA ul li:nth-child(3) svg {
				width: 137px;
				height: 93px;
				margin-top: -12px;
				margin-left: 74px;
		}
}

#mvA:before, #mvA p, #mvA li {
		opacity: 0;
}

#mvA li {
		animation: mvsvg forwards 1s ease .5s normal;
}

#mvA:before {
		animation: mvtitle forwards 1s ease 2.1s normal;
}

#mvA p {
		animation: mvtitle forwards 1s ease 2s normal;
}


/*--------------------------------------------
MAIN VISUAL PATTERN B
---------------------------------------------*/

@media screen and (max-width: 750px) {
		#mvB {
				padding-bottom: calc( 81 var(--remBase))
		}
}

@media print, screen and (min-width: 750.02px) {
		#mvB {
				padding-block: calc( 40 var(--remBase));
				display: grid;
				justify-content: space-between;
				column-gap: calc( 40 * 100% / 1286);
				grid-template-columns: calc( 956 * 100% / 1286) calc( 290 * 100% / 1286);
				grid-template-rows: calc( 586 var(--remBase))
		}
}

@media (min-width: 750.02px) and (max-width: 1325.98px) {
		#mvB {
				padding-inline: calc( 20 * 100% / 1326)
		}
}

@media (min-width: 1326px) {
		#mvB {
				padding-inline: calc( ( 100% - 1286px) / 2)
		}
}

#mvMain {
		background-size: cover;
		background-position: 0 0;
		background-repeat: no-repeat;
		overflow: hidden;
		position: relative;
}

#mvMain:before {
		content: "";
		display: block;
		position: absolute;
		background-position: 0 0;
		background-size: contain;
		background-repeat: no-repeat;
}

#mvMain p {
		color: #fff;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 0 0;
		letter-spacing: 0.08em;
		text-align: center;
}

#mvMain ul {
		align-items: start;
}

#mvMain ul a {
		transition: translate .3s ease-in;
		display: block;
}

#mvMain ul a:hover span {
		border-color: var(--green);
}

#mvMain ul a:hover svg {
		overflow: visible;
}

#mvMain ul a:hover .right-hand {
		animation-name: rightHand;
}

#mvMain ul a:hover .left-hand {
		animation-name: leftHand;
}

#mvMain ul a:hover .right-foot {
		animation-name: rightFoot;
}

#mvMain ul a:hover .left-foot {
		animation-name: leftFoot;
}

#mvMain ul span {
		background-color: #fff;
		border-style: solid;
		border-color: #fff;
		font-weight: 600;
		text-align: center;
		letter-spacing: .04em;
		text-indent: .04em;
		color: var(--green);
		border-radius: 100vmax;
		display: grid;
		place-items: center;
		width: 100%;
		position: relative;
		transition: border .3s ease-in;
}

#mvMain ul span:after, #mvMain ul span:before {
		content: "";
		display: block;
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
}

#mvMain ul span:before {
		background-image: url("../img/home/mv/circle.svg");
		background-size: contain;
}

#mvMain ul span:after {
		background-color: var(--green);
		border-radius: 50%;
		background-image: url("../img/ui/allow/down01.svg");
}

#mvMain ul svg {
		position: relative;
		z-index: 1;
}

#mvMain ul svg path, #mvMain ul svg circle {
		fill: #000;
}

#mvMain ul svg .cls-1 {
		fill: none;
		stroke: #000;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 4px;
}

#mvMain ul svg .cls-2, #mvMain ul svg circle {
		stroke: none;
}

#mvMain ul :where( .right-hand, .left-hand, .right-foot, .left-foot) {
		animation-direction: normal;
		animation-duration: .4s;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
}

#mvMain ul li:nth-child(1) svg .cls-2 {
		fill: #86d13f;
}

#mvMain ul li:nth-child(2) svg .cls-2 {
		fill: #e5d948;
}

#mvMain ul li:nth-child(3) svg .cls-2 {
		fill: #0a6c44;
}

@media screen and (max-width: 750px) {
		#mvMain {
				height: calc( 950 var(--remBase));
				background: url("../img/home/mv/bg0201_sp.webp") 0 0 / cover no-repeat;
				padding-top: calc( 91 var(--remBase))
		}
		#mvMain:before {
				background-image: url("../img/home/mv/bg0202_sp.webp");
				width: calc( 826 * 100% / 750);
				height: calc( 513 var(--remBase));
				left: calc( -46 * 100% / 750);
				top: calc( 76 var(--remBase));
		}
		#mvMain p {
				padding-top: calc( ( 72 - 11) var(--remBase));
				margin-left: calc( 39 * 100% / var(--breakPoint));
				font-size: calc( 70 var(--remBase));
				;
				line-height: 1.2;
				width: calc( 654 * 100% / var(--breakPoint));
				height: calc( 277 var(--remBase));
				background-image: url("../img/home/mv/bg_catchcopy_sp.webp");
				padding-left: calc( 8.5 * 100% / var(--breakPoint));
		}
		#mvMain p span {
				font-size: calc( 62 var(--remBase));
				;
				line-height: calc( 84 / 62);
				;
		}
		#mvMain ul {
				margin-top: calc( 68 var(--remBase));
				margin-inline: auto;
				width: calc( 700 * 100% / var(--breakPoint));
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				column-gap: calc( 20 * 100% / 700);
				row-gap: calc( ( 23 / 2) var(--remBase));
		}
		#mvMain ul>li {
				width: calc( 340 * 100% / 700);
		}
		#mvMain ul a:hover {
				translate: 0 calc( -20 var(--remBase));
		}
		#mvMain ul li:first-child {
				order: 1;
		}
		#mvMain ul:before {
				content: "";
				display: block;
				width: 100%;
				order: 2;
		}
		#mvMain ul li+li {
				order: 3;
		}
		#mvMain ul span {
				height: calc( 120 var(--remBase));
				font-size: calc( 24 var(--remBase));
				;
				line-height: 1.5;
				border-width: calc( 2 var(--remBase));
		}
		#mvMain ul span:before {
				width: calc( 32 * 100% / 336);
				height: calc( 24 var(--remBase));
				top: calc( 128 var(--remBase));
				left: calc( 44 * 100% / 336);
		}
		#mvMain ul span:after {
				width: calc( 26 * 100% / 336);
				height: calc( 26 var(--remBase));
				background-size: auto calc( 9 var(--remBase));
				top: calc( 47 var(--remBase));
				right: calc( 26 * 100% / 336);
		}
		#mvMain ul li:nth-child(1) svg {
				width: calc( 190 * 100% / 340);
				height: calc( 115 var(--remBase));
				margin-top: calc( -13 var(--remBase));
				margin-left: calc( 92 * 100% / 340);
		}
		#mvMain ul li:nth-child(2) svg {
				width: calc( 172 * 100% / 340);
				height: calc( 117 var(--remBase));
				margin-top: calc( -11 var(--remBase));
				margin-left: calc( 76 * 100% / 340);
		}
		#mvMain ul li:nth-child(3) svg {
				width: calc( 173 * 100% / 340);
				height: calc( 117 var(--remBase));
				margin-top: calc( -13 var(--remBase));
				margin-left: calc( 89 * 100% / 340);
		}
}

@media print, screen and (min-width: 750.02px) {
		#mvMain {
				background-image: url("../img/home/mv/bg0201_pc.webp");
				grid-column: 1;
				grid-row: 1;
				padding-top: calc( 77 var(--remBase))
		}
		#mvMain:before {
				background-image: url("../img/home/mv/bg0202_pc.webp");
				width: calc( 1076 * 100% / 956);
				height: calc( 258 var(--remBase));
				left: calc( -71 * 100% / 956);
				top: calc( 87 var(--remBase));
		}
		#mvMain p {
				padding-top: calc( ( 69 - 6) var(--remBase));
				margin-left: calc( 176 * 100% / 956);
				font-size: calc( 62 var(--remBase));
				;
				line-height: calc( 74 / 62);
				;
				width: calc( 629 * 100% / 956);
				height: calc( 252 var(--remBase));
				background-image: url("../img/home/mv/bg_catchcopy_pc.webp");
				padding-right: calc( 3 * 100% / 956);
		}
		#mvMain p span {
				font-size: calc( 56 var(--remBase));
				;
				line-height: calc( 74 / 56);
				;
		}
		#mvMain ul {
				display: grid;
				margin-top: calc( 76 var(--remBase));
				margin-inline: auto;
				width: calc( 880 * 100% / 956);
				justify-content: space-between;
				grid-template-columns: repeat( 3, calc( 280 * 100% / 880));
				grid-auto-flow: column;
		}
		#mvMain ul a:hover {
				translate: 0 calc( -20 var(--remBase));
		}
		#mvMain ul li:nth-child(1) {
				order: 2;
		}
		#mvMain ul li:nth-child(2) {
				order: 1;
		}
		#mvMain ul li:nth-child(3) {
				order: 3;
		}
		#mvMain ul span {
				height: calc( 100 var(--remBase));
				font-size: calc( 18 var(--remBase));
				;
				line-height: 1.5;
				border-width: calc( 2 var(--remBase));
		}
		#mvMain ul span:before {
				width: calc( 22 * 100% / 276);
				height: calc( 22 var(--remBase));
				top: calc( 108 var(--remBase));
				left: calc( 20 * 100% / 276);
		}
		#mvMain ul span:after {
				width: calc( 20 * 100% / 276);
				height: calc( 20 var(--remBase));
				background-size: auto calc( 7 var(--remBase));
				top: calc( 40 var(--remBase));
				right: calc( 20 * 100% / 276);
		}
		#mvMain ul li:nth-child(1) svg {
				width: calc( 152 * 100% / 280);
				height: calc( 92 var(--remBase));
				margin-top: calc( -11 var(--remBase));
				margin-left: calc( 73 * 100% / 280);
		}
		#mvMain ul li:nth-child(2) svg {
				width: calc( 140 * 100% / 280);
				height: calc( 95 var(--remBase));
				margin-top: calc( -14 var(--remBase));
				margin-left: calc( 60 * 100% / 280);
		}
		#mvMain ul li:nth-child(3) svg {
				width: calc( 137 * 100% / 280);
				height: calc( 93 var(--remBase));
				margin-top: calc( -12 var(--remBase));
				margin-left: calc( 74 * 100% / 280);
		}
}

#mvAside>p {
		display: grid;
		place-items: center;
		border-style: solid;
		border-color: #ca3c3c;
		background-color: #faebeb;
}

#mvAside>p strong {
		text-align: center;
		letter-spacing: .04em;
		text-indent: .04em;
		font-weight: 700;
		color: #ca3c3c;
}

#mvAside .box {
		background-color: #fff;
		overflow: hidden;
}

#mvAside .info dt {
		display: grid;
		place-items: center;
		background-color: #e6f0ec;
		background-color: #e6f0ec;
		color: #0d6c44;
		text-align: center;
		letter-spacing: .04em;
		text-indent: .04em;
}

#mvAside .info ul li {
		display: inline;
}

#mvAside .info ul li+li:before {
		content: "・";
}

#mvAside .info>a {
		display: grid;
		align-items: center;
		justify-content: center;
		background-color: #e6f0ec;
}

#mvAside .info>a span {
		color: #0d6c44;
		text-align: center;
		letter-spacing: .04em;
		text-indent: .04em;
		font-weight: 600;
		position: relative;
}

#mvAside .info>a span:before {
		content: "";
		position: absolute;
		width: 100%;
		background-color: currentColor;
		scale: 0 1;
		transform-origin: right top;
		transition: scale .3s ease-in;
}

#mvAside .info>a:after {
		content: "";
		border-radius: 50%;
		background-image: url("../img/ui/allow/right01.svg");
		background-repeat: no-repeat;
		background-color: var(--green);
		transition: translate .3s ease-in;
}

#mvAside .info>a:hover span:before {
		transform-origin: left top;
		scale: 1 1;
}

#mvAside .contact dt {
		text-align: center;
		letter-spacing: .04em;
		text-indent: .04em;
}

#mvAside .contact dd a {
		display: grid;
		align-items: baseline;
		justify-content: center;
}

#mvAside .contact dd a:before {
		content: "";
		display: block;
		background: url("../img/ui/icon/phone.svg") 0 0 / contain no-repeat;
		grid-column: 1;
		grid-row: 1;
}

#mvAside .contact dd a span:nth-of-type(1) {
		color: var(--orange);
		text-align: center;
		letter-spacing: .04em;
		text-indent: .04em;
		grid-column: 3;
		grid-row: 1;
}

#mvAside .contact dd a span:nth-of-type(2) {
		text-align: center;
		letter-spacing: .04em;
		text-indent: .04em;
		grid-column: 5;
		grid-row: 1;
}

#mvAside .contact>a {
		display: grid;
		align-items: center;
		justify-content: center;
		background-color: #fae7d4;
}

#mvAside .contact>a span {
		color: var(--orange);
		text-align: center;
		letter-spacing: .04em;
		text-indent: .04em;
		font-weight: 600;
		position: relative;
}

#mvAside .contact>a span:before {
		content: "";
		position: absolute;
		width: 100%;
		background-color: currentColor;
		scale: 0 1;
		transform-origin: right top;
		transition: scale .3s ease-in;
}

#mvAside .contact>a:after {
		content: "";
		border-radius: 50%;
		background-image: url("../img/ui/allow/right01.svg");
		background-repeat: no-repeat;
		background-color: var(--orange);
		transition: translate .3s ease-in;
}

#mvAside .contact>a:hover span:before {
		transform-origin: left top;
		scale: 1 1;
}

@media screen and (max-width: 750px) {
		#mvAside {
				margin-top: calc( -50 var(--remBase));
				position: relative
		}
		#mvAside>p {
				font-size: 3.2rem;
				height: calc( 100 var(--remBase));
				border-radius: calc( 20 var(--remBase));
				border-width: calc( 4 var(--remBase));
		}
		#mvAside .box {
				box-shadow: calc( 3 var(--remBase)) calc( 4 var(--remBase)) calc( 9 var(--remBase)) rgba(0, 0, 0, 0.1);
				border-radius: calc( 20 var(--remBase));
		}
		#mvAside>p+.box {
				margin-top: calc( 41 var(--remBase));
		}
		#mvAside .info {
				padding-top: calc( 60 var(--remBase));
		}
		#mvAside .info dl {
				padding-inline: calc( 40 var(--percentBase));
		}
		#mvAside .info dt {
				width: calc( 150 * 100% / 590);
				height: calc( 42 var(--remBase));
				border-radius: calc( 10 var(--remBase));
				font-size: 2.8rem;
		}
		#mvAside .info dd {
				font-size: calc( 32 var(--remBase));
				;
				line-height: 1.6;
				margin-top: calc( ( 37 - 9.6) var(--remBase));
		}
		#mvAside .info dd+dt {
				margin-top: calc( ( 32 - 9.6) var(--remBase));
		}
		#mvAside .info>a {
				margin-top: calc( ( 62 - 9.6) var(--remBase));
				height: calc( 106 var(--remBase));
				grid-template-columns: auto calc( 28 var(--percentBase));
				column-gap: calc( 21 var(--percentBase));
		}
		#mvAside .info>a span {
				font-size: 2.8rem;
		}
		#mvAside .info>a span:before {
				height: calc( 4 var(--remBase));
				bottom: calc( -12 var(--remBase));
		}
		#mvAside .info>a:after {
				height: calc( 28 var(--remBase));
				background-size: auto calc( 15 var(--remBase));
				background-position: calc( 10 var(--remBase)) 50%;
		}
		#mvAside .info>a:hover:after {
				translate: calc( 5 var(--remBase)) 0;
		}
		#mvAside .box+.box {
				margin-top: calc( 41 var(--remBase));
		}
		#mvAside .contact {
				padding-top: calc( 59 var(--remBase));
		}
		#mvAside .contact dt {
				font-size: 3.6rem;
		}
		#mvAside .contact dd {
				margin-top: calc( 27 var(--remBase));
		}
		#mvAside .contact dd a {
				grid-template-columns: calc( 37 var(--percentBase)) calc( 18 var(--percentBase)) auto calc( 18 var(--percentBase)) auto;
		}
		#mvAside .contact dd a:before {
				height: calc( 35 var(--remBase));
		}
		#mvAside .contact dd a span:nth-of-type(1) {
				font-size: 3.6rem;
		}
		#mvAside .contact dd a span:nth-of-type(2) {
				font-size: 2.4rem;
		}
		#mvAside .contact>a {
				margin-top: calc( 58 var(--remBase));
				height: calc( 106 var(--remBase));
				grid-template-columns: auto calc( 28 var(--percentBase));
				column-gap: calc( 21 var(--percentBase));
		}
		#mvAside .contact>a span {
				font-size: 2.8rem;
		}
		#mvAside .contact>a span:before {
				height: calc( 4 var(--remBase));
				bottom: calc( -12 var(--remBase));
		}
		#mvAside .contact>a:after {
				height: calc( 28 var(--remBase));
				background-size: auto calc( 15 var(--remBase));
				background-position: calc( 10 var(--remBase)) 50%;
		}
		#mvAside .contact>a:hover:after {
				translate: calc( 5 var(--remBase)) 0;
		}
}

@media print, screen and (min-width: 750.02px) {
		#mvAside>p {
				font-size: calc( 16 var(--remBase));
				;
				line-height: 1.8;
				height: calc( 50 var(--remBase));
				border-radius: calc( 16 var(--remBase));
				border-width: calc( 2 var(--remBase));
		}
		#mvAside .box {
				box-shadow: calc( 3 var(--remBase)) calc( 4 var(--remBase)) calc( 9 var(--remBase)) rgba(0, 0, 0, 0.1);
				border-radius: calc( 16 var(--remBase));
		}
		#mvAside>p+.box {
				margin-top: calc( 19 var(--remBase));
		}
		#mvAside .info {
				padding-top: calc( 20 var(--remBase));
		}
		#mvAside .info dl {
				padding-inline: calc( 22 * 100% / 290);
		}
		#mvAside .info dt {
				width: calc( 90 * 100% / 246);
				height: calc( 26 var(--remBase));
				border-radius: calc( 6 var(--remBase));
				font-size: calc( 14 var(--remBase));
				;
				line-height: calc( 22.2 / 14);
				;
		}
		#mvAside .info dd {
				/*font-size: calc( 16 var(--remBase));*/
				font-size: calc( 15 var(--remBase));
				;
				line-height: 1.8;
				margin-top: calc( ( 16 - 6.4) var(--remBase));
				margin-bottom: calc( ( 16 - 6.4) var(--remBase));
		}
		#mvAside .info dd+dt {
				margin-top: calc( ( 17 - 6.4) var(--remBase));
		}
		#mvAside .info>a {
				margin-top: calc( ( 18 - 6.4) var(--remBase));
				height: calc( 50 var(--remBase));
				grid-template-columns: auto calc( 16 * 100% / 290);
				column-gap: calc( 10 * 100% / 290);
		}
		#mvAside .info>a span {
				font-size: 1.6rem;
		}
		#mvAside .info>a span:before {
				height: calc( 2 var(--remBase));
				bottom: calc( -6 var(--remBase));
		}
		#mvAside .info>a:after {
				height: calc( 16 var(--remBase));
				background-size: auto calc( 9 var(--remBase));
				background-position: calc( 6 var(--remBase)) 50%;
		}
		#mvAside .info>a:hover:after {
				translate: calc( 5 var(--remBase)) 0;
		}
		#mvAside .box+.box {
				margin-top: calc( 22 var(--remBase));
		}
		#mvAside .contact {
				padding-top: calc( 20 var(--remBase));
		}
		#mvAside .contact dt {
				font-size: 2rem;
		}
		#mvAside .contact dd {
				margin-top: calc( 19 var(--remBase));
		}
		#mvAside .contact dd a {
				grid-template-columns: calc( 19 * 100% / 290) calc( 9 * 100% / 290) auto calc( 10 * 100% / 290) auto;
		}
		#mvAside .contact dd a:before {
				height: calc( 18 var(--remBase));
		}
		#mvAside .contact dd a span:nth-of-type(1) {
				font-size: 2rem;
		}
		#mvAside .contact dd a span:nth-of-type(2) {
				font-size: 1.2rem;
		}
		#mvAside .contact>a {
				margin-top: calc( 20 var(--remBase));
				height: calc( 50 var(--remBase));
				grid-template-columns: auto calc( 16 * 100% / 290);
				column-gap: calc( 10 * 100% / 290);
		}
		#mvAside .contact>a span {
				font-size: 1.6rem;
		}
		#mvAside .contact>a span:before {
				height: calc( 2 var(--remBase));
				bottom: calc( -6 var(--remBase));
		}
		#mvAside .contact>a:after {
				height: calc( 16 var(--remBase));
				background-size: auto calc( 9 var(--remBase));
				background-position: calc( 6 var(--remBase)) 50%;
		}
		#mvAside .contact>a:hover:after {
				translate: calc( 5 var(--remBase)) 0;
		}
}

#mvMain:before, #mvMain p, #mvMain li {
		opacity: 0;
}

#mvMain li {
		animation: mvsvg forwards 1s ease .5s normal;
}

#mvMain:before {
		animation: mvtitle forwards 1s ease 2.1s normal;
}

#mvMain p {
		animation: mvtitle forwards 1s ease 2s normal;
}

@keyframes mvsvg {
		0% {
				opacity: 0;
		}
		50% {
				opacity: 1;
				translate: 0 0;
		}
		75% {
				translate: 0 -25%;
		}
		100% {
				translate: 0 0;
				opacity: 1;
		}
}

@keyframes mvtitle {
		0% {
				opacity: 0;
		}
		100% {
				opacity: 1;
		}
}

@keyframes leftHand {
		0% {
				rotate: 0deg;
		}
		75% {
				rotate: 3deg;
		}
		100% {
				rotate: 0deg;
		}
}

@keyframes rightHand {
		0% {
				rotate: 0deg;
		}
		75% {
				rotate: -3deg;
		}
		100% {
				rotate: 0deg;
		}
}

@keyframes leftFoot {
		0% {
				rotate: 0deg;
		}
		75% {
				rotate: 3deg;
		}
		100% {
				rotate: 0deg;
		}
}

@keyframes rightFoot {
		0% {
				rotate: 0deg;
		}
		75% {
				rotate: -3deg;
		}
		100% {
				rotate: 0deg;
		}
}


/*--------------------------------------------
IMPORTANT
---------------------------------------------*/

#important h1 {
		display: grid;
		align-items: center;
		background-color: var(--red);
		color: #fff;
		letter-spacing: 0.04em;
		line-height: 1;
}

#important h1:before {
		font-size: 0;
		content: "";
		display: block;
		background: url("../img/ui/icon/exclamation.svg") 0 0 / contain no-repeat;
}

#important time, #important h2 {
		display: inline;
}

#important time {
		padding-right: 1em;
}

#important h2 {
		letter-spacing: 0.04em;
		font-weight: 400;
}

#important h2:after {
		display: inline-block;
		content: "";
		background: url("../img/ui/allow/right03.svg") 0 0 / contain no-repeat;
		font-size: 0;
		transition: filter var(--transitionBase);
		filter: invert(18%) sepia(0%) saturate(15%) hue-rotate(164deg) brightness(92%) contrast(91%);
}

#important a {
		transition: color var(--transitionBase);
}

#important a:hover {
		color: var(--red);
}

#important a:hover h2:after {
		filter: invert(22%) sepia(30%) saturate(4190%) hue-rotate(337deg) brightness(121%) contrast(86%);
}

@media screen and (max-width: 750px) {
		#important h1 {
				padding-inline: calc( 40 * 100% / var(--breakPoint));
				justify-content: start;
				align-items: center;
				grid-template-columns: calc( 33 var(--percentBase)) auto;
				column-gap: calc( 15 var(--percentBase));
				font-size: calc( 32 var(--remBase));
				height: calc( 110 var(--remBase));
		}
		#important h1:before {
				height: calc( 33 var(--remBase));
		}
		#important ul {
				margin-top: calc( ( 57 - 12.8) var(--remBase));
				padding-inline: calc( 40 * 100% / var(--breakPoint));
				padding-bottom: calc( ( 65 - 12.8) var(--remBase));
				border-bottom: calc( 4 var(--remBase)) solid var(--red);
		}
		#important li+li {
				margin-top: calc( ( 44 - 12.8 - 12.8) var(--remBase));
		}
		#important time, #important h2, #important span {
				font-size: calc( 32 var(--remBase));
				;
				line-height: 1.8;
		}
		#important h2:after {
				width: calc( 14 var(--remBase));
				height: calc( 22 var(--remBase));
				margin-left: calc( 13 var(--remBase));
		}
}

@media print, screen and (min-width: 750.02px) {
		#important {
				border: solid calc( 2 var(--remBase)) var(--red);
				border-radius: calc( 16 var(--remBase));
				padding-block: calc( 8 var(--remBase));
				padding-inline: calc( 9 var(--remBase));
				display: grid;
				grid-template-columns: calc( 220 * 100% / 1264) 1fr;
				grid-auto-flow: column;
				column-gap: calc( 39 * 100% / 1264);
				/*align-items: center*/
		}
		#important h1 {
				justify-content: center;
				align-items: center;
				grid-template-columns: calc( 22 * 100% / 220) auto;
				column-gap: calc( 6 * 100% / 220);
				font-size: calc( 16 var(--remBase));
				border-radius: calc( 16 var(--remBase));
				height: calc( 80 var(--remBase));
		}
		#important h1:before {
				height: calc( 22 var(--remBase));
		}
		#important li+li {
				margin-top: calc( ( 13 - 5.3 - 5.3) var(--remBase));/*margin-top: calc( ( 18 - 5.3 - 5.3) var(--remBase));*/
		}
		#important time, #important h2, #important span {
				font-size: calc( 15 var(--remBase));
				;
				line-height: calc( 25.6 / 15);
				;
		}
		#important h2:after {
				width: calc( 7 var(--remBase));
				height: calc( 12 var(--remBase));
				margin-left: calc( 13 var(--remBase));
		}
}

@media (min-width: 750.02px) and (max-width: 1325.98px) {
		#important {
				margin-inline: calc( 20 * 100% / 1326)
		}
}

@media (min-width: 1326px) {
		#important {
				margin-inline: auto;
				width: 1286px
		}
}

/*--------------------------------------------
NEWS_IMPORTANT
---------------------------------------------*/

#news_important h1 {
		display: grid;
		align-items: center;
		background-color: var(--red);
		color: #fff;
		letter-spacing: 0.04em;
		line-height: 1;
}

#news_important h1:before {
		font-size: 0;
		content: "";
		display: block;
		background: url("../img/ui/icon/exclamation.svg") 0 0 / contain no-repeat;
}

#news_important time, #news_important h2 {
		display: inline;
}

#news_important time {
		padding-right: 1em;
}

#news_important h2 {
		letter-spacing: 0.04em;
		font-weight: 400;
}

#news_important h2:after {
		display: inline-block;
		content: "";
		background: url("../img/ui/allow/right03.svg") 0 0 / contain no-repeat;
		font-size: 0;
		transition: filter var(--transitionBase);
		filter: invert(18%) sepia(0%) saturate(15%) hue-rotate(164deg) brightness(92%) contrast(91%);
}

#news_important a {
		transition: color var(--transitionBase);
}

#news_important a:hover {
		color: var(--red);
}

#news_important a:hover h2:after {
		filter: invert(22%) sepia(30%) saturate(4190%) hue-rotate(337deg) brightness(121%) contrast(86%);
}

@media screen and (max-width: 750px) {
		#news_important h1 {
				padding-inline: calc( 40 * 100% / var(--breakPoint));
				justify-content: start;
				align-items: center;
				grid-template-columns: calc( 33 var(--percentBase)) auto;
				column-gap: calc( 15 var(--percentBase));
				font-size: calc( 32 var(--remBase));
				height: calc( 110 var(--remBase));
		}
		#news_important h1:before {
				height: calc( 33 var(--remBase));
		}
		#news_important ul {
				margin-top: calc( ( 57 - 12.8) var(--remBase));
				padding-inline: calc( 40 * 100% / var(--breakPoint));
				padding-bottom: calc( ( 65 - 12.8) var(--remBase));
				border-bottom: calc( 4 var(--remBase)) solid var(--red);
		}
		#news_important li+li {
				margin-top: calc( ( 44 - 12.8 - 12.8) var(--remBase));
		}
		#news_important time, #news_important h2, #news_important span {
				font-size: calc( 32 var(--remBase));
				line-height: 1.8;
		}
		#news_important h2:after {
				width: calc( 14 var(--remBase));
				height: calc( 22 var(--remBase));
				margin-left: calc( 13 var(--remBase));
		}
}

@media print, screen and (min-width: 750.02px) {
		#news_important {
				border: solid calc( 2 var(--remBase)) var(--red);
				border-radius: calc( 16 var(--remBase));
				padding-block: calc( 8 var(--remBase));
				padding-inline: calc( 9 var(--remBase));
				display: grid;
				grid-template-columns: calc( 220 * 100% / 1264) 1fr;
				grid-auto-flow: column;
				column-gap: calc( 39 * 100% / 1264);
				/*align-items: center*/
		}
		#news_important h1 {
				justify-content: center;
				align-items: center;
				grid-template-columns: calc( 22 * 100% / 220) auto;
				column-gap: calc( 6 * 100% / 220);
				font-size: calc( 16 var(--remBase));
				border-radius: calc( 16 var(--remBase));
				height: calc( 80 var(--remBase));
		}
		#news_important h1:before {
				height: calc( 22 var(--remBase));
		}
		#news_important li+li {
				margin-top: calc( ( 13 - 5.3 - 5.3) var(--remBase));/*margin-top: calc( ( 18 - 5.3 - 5.3) var(--remBase));*/
		}
		#news_important time, #news_important h2, #news_important span {
				font-size: calc( 15 var(--remBase));
				line-height: calc( 25.6 / 15);
		}
		#news_important h2:after {
				width: calc( 7 var(--remBase));
				height: calc( 12 var(--remBase));
				margin-left: calc( 13 var(--remBase));
		}
}

@media (min-width: 750.02px) and (max-width: 1325.98px) {
		#news_important {
				margin-inline: calc( 20 * 100% / 1326)
		}
}

@media (min-width: 1326px) {
		#news_important {
				margin-inline: auto;
				/*width: 1286px*/
width: 1058px;
		}
}


/*--------------------------------------------
TITLE
---------------------------------------------*/

#title01 {
		overflow: hidden;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		position: relative;
}

#title01 span {
		position: absolute;
		background-color: var(--white);
		left: 0;
		font-weight: 400;
}

@media screen and (max-width: 750px) {
		#title01 {
				background-image: var(--bgTitleSp);
				border-radius: calc( 20 var(--remBase)) 0 0 0;
				height: calc( 500 var(--remBase));
				width: calc( 710 * 100% / var(--breakPoint));
				margin-left: auto
		}
		#title01 span {
				font-size: 6.4rem;
				border-radius: 0 calc( 20 var(--remBase)) 0 0;
				/*bottom: calc( -1 var(--remBase));*/
bottom: calc( -0.8 var(--remBase));
				padding-top: calc( 28 var(--remBase));
				padding-right: calc( 40 var(--remBase));
				padding-bottom: calc( 10 var(--remBase));
				border-width: 0;
		}
}

@media print, screen and (min-width: 750.02px) {
		#title01 {
				margin-inline: auto;
				background-image: var(--bgTitlePc)
		}
		#title01 span {
				line-height: calc( 57.6 / 48);
				margin-left: -.04em;
		}
}

@media (min-width: 750.02px) and (max-width: 1285.98px) {
		#title01 {
				width: calc( 1246 * 100% / 1286);
				height: calc( 360 * 100vw / 1286);
				border-radius: calc( 16 * 100vw / 1286) calc( 16 * 100vw / 1286) calc( 16 * 100vw / 1286) 0
		}
		#title01 span {
				font-size: calc( 48 * 100vw / 1286);
				border-radius: 0 calc( 16 * 100vw / 1286) 0 0;
				/*bottom: calc( -4.8 * 100vw / 1286);*/
bottom: calc( -1.0 * 100vw / 1286);
				padding-top: calc( ( 27 - 4.8) * 100vw / 1286);
padding-bottom: calc( ( 10 - 4.8) * 100vw / 1286);
				padding-right: calc( 34 * 100vw / 1286);
		}
}

@media (min-width: 1286px) {
		#title01 {
				padding-inline: 20px;
				width: 1246px;
				height: 360px;
				border-radius: 16px 16px 16px 0
		}
		#title01 span {
				font-size: 48px;
				border-radius: 0 16px 0 0;
				/*bottom: -4.8px;*/
bottom: -1.0px;
				padding-top: calc( 27px - 4.8px);
padding-bottom: calc( 10px - 4.8px);
				padding-right: 34px;
		}
}

#title02 {
		overflow: hidden;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		position: relative;
		display: grid;
		align-content: center;
		margin-inline: auto;
}

#title02 span {
		display: grid;
		align-items: center;
		justify-content: start;
		letter-spacing: 0.04em;
		font-weight: 400;
}

#title02 span:before {
		content: "";
		display: block;
		background: url("../img/ui/parts/title02.svg") 0 center / contain no-repeat;
		font-size: 0;
}
#title02 .date {
		display: grid;
		align-items: center;
		justify-content: start;
		letter-spacing: 0.04em;
		font-weight: 400;
}
#title02 .date:before {
		content: "";
		display: block;
		font-size: 0;
}

#title02 time {
		display: block;
		font-family: 'Roboto Flex';
}
@media screen and (max-width: 750px) {
		#title02 {
				background-image: url("../img/ui/parts/bg_title02_sp.webp");
				width: calc( 670 * 100% / var(--breakPoint));
				/*height: calc( 420 var(--remBase));*/
				height: calc( 480 var(--remBase));
				border-radius: calc( 20 var(--remBase));
				padding-inline: calc( 50 * 100% / var(--breakPoint))
		}
		#title02 span {
				grid-template-columns: calc( 140 * 100% / 570) auto;
				column-gap: calc( 30 * 100% / 570);
				font-size: calc( 64 var(--remBase));
				line-height: 1.45;
		}
		#title02 span:before {
				height: calc( 88 var(--remBase));
		}
		#title02 .date {
				grid-template-columns: calc( 140 * 100% / 570) auto;
				column-gap: calc( 40 * 100% / 570);
				font-size: calc( 32 var(--remBase));
				line-height: 1.45;
		}
		#title02 .date:before {
				height: calc( 20 var(--remBase));
		}
}

@media print, screen and (min-width: 750.02px) {
		#title02 {
				background-image: url("../img/ui/parts/bg_title02_pc.webp")
		}
		#title02 span {
				line-height: calc( 57.6 / 48);
		}
		#title02 .date {
				padding:10px 10px 10px 10px;
		}
		#title02 time {
				font-size: 2rem;
		}
}

@media (min-width: 750.02px) and (max-width: 1285.98px) {
		#title02 {
				width: calc( 1246 * 100% / 1286);
				height: calc( 260 * 100vw / 1286);
				border-radius: calc( 16 * 100vw / 1286);
				padding-inline: calc( 95 * 100% / 1286)
		}
		#title02 span {
				grid-template-columns: calc( 99 * 100% / 1096) auto;
				column-gap: calc( 20 * 100% / 1096);
				font-size: calc( 48 * 100vw / 1286);
		}
		#title02 span:before {
				height: calc( 60 * 100vw / 1286);
		}
		#title02 .date {
				grid-template-columns: calc( 99 * 100% / 1096) auto;
				column-gap: calc( 20 * 100% / 1096);
				font-size: calc( 48 * 100vw / 1286);
		}
}

@media (min-width: 1286px) {
		#title02 {
				padding-inline: 20px;
				width: 1246px;
				height: 260px;
				border-radius: 16px;
				padding-inline: 95px
		}
		#title02 span {
				grid-template-columns: 99px auto;
				column-gap: 20px;
				font-size: 48px;
		}
		#title02 span:before {
				height: 60px;
		}
		#title02 .date {
				grid-template-columns: 99px auto;
				column-gap: 20px;
				font-size: 48px;
		}
}


/*--------------------------------------------
COLUMN
---------------------------------------------*/

@media screen and (max-width: 750px) {
		#column01 .sidemenu {
				margin-top: calc( 170 var(--remBase));
		}
}

@media print, screen and (min-width: 750.02px) {
		#column01 {
				display: grid;
				justify-content: space-between;
				align-items: start
		}
		#column01 .sidemenu {
				grid-column: 1;
				grid-row: 1;
		}
}

@media screen and (min-width: 750.02px) and (max-width: 1247.98px) {
		#column01 {
				padding-inline: calc( 75 * 100% / var(--breakPoint));
				grid-template-columns: calc( 230 * 100% / 1058) calc( 770 * 100% / 1058)
		}
}

@media print, screen and (min-width: 1248px) {
		#column01 {
				padding-inline: calc( ( 100% - 1058px) / 2);
				display: grid;
				grid-template-columns: calc( 230 * 100% / 1058) calc( 770 * 100% / 1058);
				justify-content: space-between;
				align-items: start
		}
		#column01 .sidemenu {
				grid-column: 1;
				grid-row: 1;
		}
}
#globalNav .icon01 > a:before{
background-image:url("or1oq90000000c10-img/healthcare_workers.svg");
}#globalNav .icon02> a:before{
background-image:url("or1oq90000000c10-img/document.svg");
}@media screen and (max-width: 750px ){#globalNav > li:not(.icon01):not(.icon02) > a:before{
background-image:url("or1oq90000000c10-img/circle01.svg");
}}@media screen and (max-width: 750px ){#globalNav li li a:before{
background-image:url("or1oq90000000c10-img/right02.svg");
}}#mvA ul span:before{
background-image:url("or1oq90000000c10-img/circle.svg");
}#mvA ul span:after{
background-image:url("or1oq90000000c10-img/down01.svg");
}#mvMain ul span:before{
background-image:url("or1oq90000000c10-img/circle.svg");
}#mvMain ul span:after{
background-image:url("or1oq90000000c10-img/down01.svg");
}@media screen and (max-width: 750px ){#mvA p{
background-image:url("or1oq90000000c10-img/bg_catchcopy_pc.webp");
}}@media print,screen and (min-width: 750.02px ){#mvA p{
background-image:url("or1oq90000000c10-img/bg_catchcopy_pc.webp");
}}@media print,screen and (min-width: 750.02px ){#mvMain p{
background-image:url("or1oq90000000c10-img/bg_catchcopy_pc.webp");
}}#mvAside .info > a:after{
background-image:url("or1oq90000000c10-img/right01.svg");
}#mvAside .contact dd a:before{
background-image:url("or1oq90000000c10-img/phone.svg");
}#mvAside .contact > a:after{
background-image:url("or1oq90000000c10-img/right01.svg");
}#important h1:before{
background-image:url("or1oq90000000c10-img/exclamation.svg");
}#important h2:after{
background-image:url("or1oq90000000c10-img/right03.svg");
}#news_important h1:before{
background-image:url("or1oq90000000c10-img/ix.5337771090343897025.svg");
}#news_important h2:after{
background-image:url("or1oq90000000c10-img/ix.5337771090343897025s.svg");
}#title02 span:before{
background-image:url("or1oq90000000c10-img/title02.svg");
}@media screen and (max-width: 750px ){#title02{
background-image:url("or1oq90000000c10-img/bg_title02_sp.webp");
}}@media print,screen and (min-width: 750.02px ){#title02{
background-image:url("or1oq90000000c10-img/bg_title02_pc.webp");
}}