@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-LSM */
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
.han {
	font-family: "Hanken Grotesk", sans-serif;
}
/*------------------------------------------------------------
    content
------------------------------------------------------------*/
.content {
    width: 100rem;
    margin: 0 auto;
	position: relative;
	z-index: 5;
}
@media all and (max-width: 896px) {
	.content {
		width: auto !important;
		margin: 0 2rem;
	}
}
/*------------------------------------------------------------
	pageTitle
------------------------------------------------------------*/
.pageTitle {
	margin-bottom: 10rem;
	position: relative;
	overflow: hidden;
}
.pageTitle img {
	width: 100%;
}
.pageTitle .widBox {
	width: 100rem;
	position: absolute;
	left: 50%;
	bottom: -1rem;
	transform: translateX(-50%);
}
.pageTitle h2 {
	position: relative;
	padding: 4.5rem 6.1rem 0 0;
	width: fit-content;
	font-weight: 700;
	background-color: #fff;
	border-radius: 0 2rem 0 0;
}
.pageTitle h2::before {
	position: absolute;
	right: 100%;
	top: 0;
	bottom: 0;
	background-color: #fff;
	width: 1000rem;
	content: "";
}
.pageTitle h2::after {
	position: absolute;
	left: 100%;
	bottom: 1rem;
	width: 2rem;
	height: 2rem;
	background: url(../img/common/page_title_ico.png) no-repeat;
	background-size: 100% 100%;
	content: "";
}
.pageTitle .color {
	width: fit-content;
	display: block;
	font-size: 4.6rem;
	background-image: linear-gradient(to right,#A2DB00 0%, #007EC0 50%,#7556F0 100%); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.pageTitle .sml {
	margin-bottom: 0.5rem;
	display: block;
	display: flex;
	align-items: center;
}
.pageTitle .en {
	padding: 0 1.9rem;
	line-height: 1.3;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	font-family: "Hanken Grotesk", sans-serif;
}
.pageTitle .jp {
	padding: 0 2rem 0 2.1rem;
	font-size: 1.4rem;
	border-right: 1px solid #000;
}
.pageTitle.style01 h2 {
	padding-top: 5rem;
	width: 100%;
	height: 14rem;
}
.pageTitle h2 .top,
.pageTitle h2 .tagBox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.pageTitle h2 .top {
	margin-bottom: 2.8rem;
}
.pageTitle h2 .tagBox {
	margin-right: 2rem;
	border: 1px solid #A2DB00;
	border-radius: 0.5rem;
	font-size: 2rem;
	font-weight: 700;
}
.pageTitle h2 .tagBox .tag {
	padding: 0.4rem 1.9rem;
	color: #A2DB00;
}
.pageTitle h2 .tagBox .ttl {
	padding: 0.4rem 2rem;
	color: #FFF;
	background: #A2DB00;
}
.pageTitle h2 .txt {
	font-size: 2rem;
	font-weight: 700;
}
.pageTitle h2.style01 .tagBox {
	border-color: #007EC0;
}
.pageTitle h2.style01 .tagBox .tag {
	color: #007EC0;
}
.pageTitle h2.style01 .tagBox .ttl {
	background: #007EC0;
}
@media all and (max-width: 896px) {
	.pageTitle {
		margin-bottom: 5rem;
	}
	.pageTitle .widBox {
		width: auto;
		left: 0;
		bottom: -0.4rem;
		transform: none;
	}
	.pageTitle h2 {
		padding: 2.3rem 1.9rem 0 2rem;
		border-radius: 0 1rem 0 0;
	}
	.pageTitle h2::before {
		display: none;
	}
	.pageTitle h2::after {
		bottom: 0.4rem;
		width: 1rem;
		height: 1rem;
	}
	.pageTitle .color {
		font-size: 2rem;
	}
	.pageTitle .sml {
		margin-bottom: 0.3rem;
	}
	.pageTitle .en {
		padding: 0 0.9rem;
		line-height: 1.3;
	}
	.pageTitle .jp {
		padding: 0 0.9rem 0 1rem;
		font-size: 1.2rem;
	}
	.pageTitle.style01 .img {
		aspect-ratio: 1 / 1;
	}
	.pageTitle.style01 .img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.pageTitle.style01 .img.left img {
		object-position: left center;
	}
	.pageTitle.style01 h2 {
		padding-top: 2.2rem;
		width: 100%;
		height: 7.4rem;
	}
	.pageTitle h2 .top {
		margin-bottom: 1.7rem;
		display: block;
	}
	.pageTitle h2 .tagBox {
		margin: 0 0 0.5rem;
		width: fit-content;
		font-size: 1.2rem;
	}
	.pageTitle h2 .tagBox .tag {
		padding: 0.1rem 0.9rem;
	}
	.pageTitle h2 .tagBox .ttl {
		padding: 0.1rem 0.9rem 0.1rem 1.1rem;
	}
	.pageTitle h2 .txt {
		font-size: 1.6rem;
	}
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
	margin-bottom: 0.8rem;
	padding-bottom: 2.9rem;
	position: relative;
	text-align: center;
	font-size: 2.6rem;
	font-weight: 700;
}
.headLine01::before {
	width: 4rem;
	height: 0.4rem;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	content: "";
	background: linear-gradient(90deg, #A2DB00 0%, #007EC0 50%, #7556F0 100%), #000;
}
@media all and (max-width: 896px) {
}
/*------------------------------------------------------------
	headLine02
------------------------------------------------------------*/
.headLine02 {
	margin-bottom: 4.3rem;
	text-align: center;
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: 1.3px;
}
.headLine02 .en {
	margin: 0 auto 0.3rem;
	display: block;
	width: fit-content;
	font-size: 2rem;
	letter-spacing: 0;
	background-image: linear-gradient(to right, #A2DB00 0%, #007EC0 50%, #7556F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (max-width: 896px) {
	.headLine02 {
		margin-bottom: 3rem;
		font-size: 2rem;
		letter-spacing: 1px;
	}
	.headLine02 .en {
		margin: 0 auto 0.1rem;
		font-size: 1.4rem;
	}
}
/*------------------------------------------------------------
	headLine03
------------------------------------------------------------*/
.headLine03 {
	margin-bottom: 2.9rem;
	padding-bottom: 2.1rem;
	position: relative;
	font-size: 2.8rem;
	font-weight: 700;
}
.headLine03::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 4rem;
	height: 0.4rem;
	background-color: #A2DB00;
	border-radius: 0.2rem;
	content: '';
}
.headLine03 .tag {
	margin-bottom: 1.8rem;
	position: relative;
	padding: 0.7rem 2rem 0.8rem;
	display: block;
	width: fit-content;
	color: #007EC0;
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	border: 0.2rem solid #007EC0;
	border-radius: 3rem;
}
.headLine03 .tag::before {
	margin-left: -0.8rem;
	position: absolute;
	bottom: -1.3rem;
	left: 50%;
	width: 1.6rem;
	height: 1.4rem;
	background: url(../img/common/icon08.png) no-repeat left top / 100%;
	content: '';
}
.headLine03.style01::before {
	background-color: #007EC0;
}
@media all and (max-width: 896px) {
	.headLine03 {
		margin-bottom: 2rem;
		padding-bottom: 1.3rem;
		font-size: 1.8rem;
		text-align: justify;
	}
	.headLine03::before {
		width: 3rem;
		height: 0.3rem;
	}
	.headLine03 .tag {
		margin-bottom: 1.7rem;
		padding: 0.5rem 1rem 0.5rem;
		width: fit-content;
		font-size: 1.4rem;
	}
	.headLine03 .tag::before {
		margin-left: -0.7rem;
		bottom: -1.1rem;
		width: 1.3rem;
		height: 1.2rem;
	}
}
/*------------------------------------------------------------
    headLine04
------------------------------------------------------------*/
.headLine04 {
    margin-bottom: 2.9rem;
    padding-bottom: 2.6rem;
    overflow: hidden;
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
    border-bottom: 1px solid #000;
}
.headLine04 .sub {
    margin: 0 auto 0.7rem;
    width: fit-content;
    padding: 0 2rem;
    position: relative;
    display: block;
}
.headLine04 .sub::after,
.headLine04 .sub::before {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 100rem;
    height: 1px;
    background-color: #000;
    content: "";
}
.headLine04 .sub::after {
    left: inherit;
    right: 100%;
}
.headLine04 .tag {
    margin: 0 auto;
    width: fit-content;
    display: block;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: "Hanken Grotesk", sans-serif;
    background-image: linear-gradient(to right, #A2DB00 0%, #007EC0 50%, #7556F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (max-width: 896px) {
    .headLine04 {
        margin-bottom: 2.0rem;
        padding-bottom: 1.7rem;
        font-size: 1.8rem;
    }
    .headLine04 .sub {
        margin: 0 auto 0.5rem;
        padding: 0 1rem;
    }
    .headLine04 .tag {
        font-size: 2rem;
    }
}
/*------------------------------------------------------------
    headLine05
------------------------------------------------------------*/
.headLine05 {
	margin-bottom: 2rem;
	text-align: center;
}
.headLine05.left {
	text-align: left;
}
.headLine05 .txt {
	margin: 0 auto;
	width: fit-content;
	display: block;
	color: #FFF;
	font-size: 4rem;
	font-weight: 700;
}
.headLine05.left .txt {
	margin: 0;
	text-align: left;
}
.headLine05 .txt.color {
	background-image: linear-gradient(to right,#A2DB00 0%, #007EC0 50%,#7556F0 100%); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.headLine05 .sml {
	margin-bottom: 1.9rem;
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	font-size: 1.6rem;
	line-height: 1.2;
}
.headLine05.left .sml {
	justify-content: flex-start;
}
.headLine05 .en {
	padding: 0 2rem 0 2rem;
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
	font-family: "Hanken Grotesk", sans-serif;
}
.headLine05 .jp {
	padding: 0 2rem 0 2rem;
	font-size: 1.4rem;
	border-right: 1px solid #FFF;
}
.headLine05 .sml.black {
	color: #000;
}
.headLine05 .sml.black .en,
.headLine05 .sml.black .jp {
	border-color: #000;
}
@media all and (max-width: 896px) {
	.headLine05 {
		margin-bottom: 2rem;
		text-align: left !important;
	}
	.headLine05 .txt {
		margin: 0 !important;
		font-size: 2rem;
	}
	.headLine05 .sml {
		margin-bottom: 1.9rem !important;
		justify-content: flex-start !important;
		font-size: 1.4rem !important;
	}
	.headLine05 .en {
		padding: 0 0.9rem 0 1rem;
	}
	.headLine05 .jp {
		padding: 0 0.9rem 0 1rem;
		font-size: 1.2rem !important;
	}
}
/*------------------------------------------------------------
    comTopTxt
------------------------------------------------------------*/
.comTopTxt {
    margin: -0.1rem 0 7.4rem;
    text-align: center;
    line-height: 2;
}
@media all and (max-width: 896px) {
    .comTopTxt {
        margin: 0 0 5rem;
        text-align: left;
    }
}
/*------------------------------------------------------------
	comLinkList
------------------------------------------------------------*/
.comLinkList li {
	margin-left: 1rem;
	width: 18rem;
}
.comLinkList li:first-child {
	margin-left: 0;
}
.comLinkList li a {
	min-height: 5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	color: #FFF;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.7px;
	background-color: #7556F0;
	border: 1px solid #7556F0;
	border-radius: 40rem;
	box-sizing: border-box;
}
.comLinkList li:first-child a {
	background-color: #A2DB00;
	border-color: #A2DB00;
}
.comLinkList li:nth-child(2) a {
	background-color: #007EC0;
	border-color: #007EC0;
}
@media all and (min-width: 897px) and (max-width: 1140px) {
	.comLinkList li {
		width: 16rem;
	}
	.comLinkList li a {
		min-height: 4rem;
		font-size: 1.2rem;
	}
}
@media all and (min-width: 897px) {
	.comLinkList li a:hover {
		color: #7556F0;
		background-color: #FFF !important;
	}
	.comLinkList li:first-child a:hover {
		color: #A2DB00;
	}
	.comLinkList li:nth-child(2) a:hover {
		color: #007EC0;
	}
}
@media all and (max-width: 896px) {
	.comLinkList {
		margin-bottom: 3rem;
		gap: 1rem;
	}
	.comLinkList li {
		margin-left: 0;
		width: calc((100% - 2rem) / 3);
	}
	.comLinkList li a {
		font-size: 1.2rem;
		letter-spacing: 0.6px;
		text-align: center;
		line-height: 1.2;
	}
}
/*------------------------------------------------------------
	comMenuList
------------------------------------------------------------*/
.comMenuList {
	margin: 0 auto 5.3rem;
	max-width: 100rem;
	display: flex;
	flex-wrap: wrap;
	gap: 8rem;
}
.comMenuList > li {
	width: 28rem;
}
.comMenuList .subList > li:not(:last-child) {
	margin-bottom: 5.5rem;
}
.comMenuList .subList > li.mt01 {
	margin-bottom: 4.8rem;
}
.comMenuList .subList > li > a {
	padding-top: 1.8rem;
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	border-top: 1px solid #DDD;
}
.comMenuList .subList > li > a:hover {
	opacity: 0.7;
}
.comMenuList .subList > li > a.nolink {
	pointer-events: none;
}
.comMenuList .subList > li > a .en {
	margin-bottom: 0.2rem;
	display: block;
	color: #007EC0;
	font-size: 1rem;
	font-weight: 700;
	font-family: "Hanken Grotesk", sans-serif;
}
.comMenuList .subList .subUl {
	margin-top: 0.9rem;
}
.comMenuList .subList .subUl li:not(:last-child) {
	margin-bottom: 0.6rem;
}
.comMenuList .subList .subUl li a {
	font-size: 1.2rem;
}
.comMenuList .subList .subUl li a:hover {
	opacity: 0.7;
}
@media all and (min-width: 897px) and (max-width: 1040px) {
	.menuBox .comMenuList {
		margin: 0 auto;
		gap: 1.5rem;
		max-width: 87rem;
	}
}
@media all and (max-width: 896px) {
	.comMenuList {
		margin: 0 auto 1.5rem;
		max-width: inherit;
		display: block;
	}
	.comMenuList > li {
		width: auto;
	}
	.comMenuList .subList > li {
		margin-bottom: 0 !important;
	}
	.comMenuList .subList > li > a {
		padding: 1.8rem 0;
		background: url(../img/common/icon04.png) no-repeat right 1.1rem center / 1.4rem;
	}
	.comMenuList .subList > li > a.on {
		background-image: url(../img/common/icon04_on.png);
	}
	.comMenuList >li:last-child .subList > li:last-child {
		border-bottom: 1px solid #DDD;
	}
	.comMenuList .subList > li.mt01 > a {
		background: url(../img/common/icon03.png) no-repeat right 1rem center / 1.2rem;
	}
	.comMenuList .subList > li > a.nolink {
		pointer-events: inherit;
	}
	.comMenuList .subList .subUl {
		margin: 0 0 1.9rem !important;
		display: none;
	}
	.comMenuList .subList .subUl li {
		margin-bottom: 0 !important;
	}
	.comMenuList .subList .subUl li a {
		padding: 0.6rem 0;
		display: block;
		font-size: 1.2rem;
	}
}
/*------------------------------------------------------------
	comOutLinkUl
------------------------------------------------------------*/
.comOutLinkUl {
	margin: 0 auto;
	max-width: 100.4rem;
}
.comOutLinkUl li {
	margin-right: 3rem;
}
.comOutLinkUl li a {
	padding-right: 2rem;
	font-size: 1.4rem;
	font-weight: 700;
	background: url(../img/common/icon01.png) no-repeat right center / 1rem;
}
.comOutLinkUl li a:hover {
	opacity: 0.7;
}
@media all and (min-width: 897px) and (max-width: 1040px) {
	.comOutLinkUl {
		max-width: 87rem;
	}
}
@media all and (max-width: 896px) {
	.comOutLinkUl {
		margin: 0;
		max-width: inherit;
		justify-content: center;
	}
	.comOutLinkUl li {
		margin: 0 1.5rem;
	}
	.comOutLinkUl li a {
		padding-right: 2rem;
		font-size: 1.2rem;
		font-weight: 700;
		background: url(../img/common/icon01.png) no-repeat right center / 1rem;
	}
}
/*------------------------------------------------------------
    headLine01
------------------------------------------------------------*/
.headLine01 {
    margin-bottom: 0.8rem;
    padding-bottom: 2.9rem;
    position: relative;
    text-align: center;
    font-size: 2.6rem;
    font-weight: 700;
}
.headLine01::before {
    width: 4rem;
    height: 0.4rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    content: "";
    background: linear-gradient(90deg, #A2DB00 0%, #007EC0 50%, #7556F0 100%), #000;
}
@media all and (max-width: 896px) {
    .headLine01 {
        margin-bottom: 1rem;
        padding-bottom: 1.9rem;
        font-size: 2rem;
    }
}
/*------------------------------------------------------------
    comAnchorList
------------------------------------------------------------*/
.comAnchorList {
    margin-bottom: 7.5rem;
}
.comAnchorList li {
    width: calc(100% / 3);
}
.comAnchorList li a {
    width: 100%;
    min-height: 7rem;
    padding: 1.5rem 0;
    height: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    text-align: center;
    border-right: 2px dotted #000;
    background: url("../img/common/icon02.png") no-repeat center bottom 1rem / 1.1rem;
}
.comAnchorList li:first-child a {
    border-left: 2px dotted #000;
}
@media all and (min-width: 897px) {
    .comAnchorList li a:hover {
        background-position: center bottom;
    }
}
@media all and (max-width: 896px) {
    .comAnchorList {
        margin-bottom: 4.7rem;
    }
    .comAnchorList li a {
        padding: 1rem 0;
        font-size: 1.2rem;
        line-height: 1.2;
        border-width: 0.1rem !important;
        background: url("../img/common/icon02_sp.png") no-repeat center bottom 0.9rem / 1rem;
    }
}
/*------------------------------------------------------------
	comRecruitBox
------------------------------------------------------------*/
.comRecruitBox {
	padding: 9.3rem 0 10rem;
	background: #F2F2F2;
}
.comRecruitBox .photoList {
	display: flex;
	flex-wrap: wrap;
	gap: 4rem 3.5rem;
}
.comRecruitBox .photoList li {
	width: calc((100% - 7rem) / 3);
	--width: 10rem;
	--height: 5rem;
	--mask: 1.7rem;
	--mask1: calc(var(--mask) - 0.1rem);
}
.comRecruitBox .photoList li a {
	position: relative;
	display: block;
	border-radius: 1.5rem 1.5rem 0 1.5rem;
	overflow: hidden;
}
.comRecruitBox .photoList li .maskPho {
	-webkit-mask: url(../img/common/mask03.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
	url(../img/common/mask04.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
	url(../img/common/mask04.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask) 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
	-moz-mask: url(../img/common/mask03.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
	url(../img/common/mask04.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
	url(../img/common/mask04.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask) 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
	mask: url(../img/common/mask03.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
	url(../img/common/mask04.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
	url(../img/common/mask04.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask) 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
}
.comRecruitBox .photoList li .maskPho img {
	transition: 0.3s;
}
.comRecruitBox .photoList li .txtBox {
	padding: 0.9rem 1.3rem 0.7rem;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 3.9rem;
}
.comRecruitBox .photoList li .txtBox .txt {
	position: relative;
	font-size: 1.3rem;
	font-weight: 700;
}
.comRecruitBox .photoList li .txtBox .txt::before {
	margin-top: -0.7rem;
	position: absolute;
	top: 50%;
	right: -0.2rem;
	width: 1.4rem;
	height: 1.1rem;
	background: url(../img/common/icon03.png) no-repeat left top / 100%;
	content: '';
	transition: 0.3s;
}
@media all and (min-width: 897px) {
	.comRecruitBox .photoList li a:hover .maskPho img {
		transform: scale(1.1);
	}
	.comRecruitBox .photoList li a:hover .txtBox .txt::before {
		transform: translateX(1rem);
	}
}
@media all and (max-width: 896px) {
	.comRecruitBox {
		padding: 4.7rem 0 4.9rem;
	}
	.comRecruitBox .photoList {
		gap: 2rem 1rem;
	}
	.comRecruitBox .photoList li {
		width: calc((100% - 1rem) / 2);
		--mask: 1.2rem;
	}
	.comRecruitBox .photoList li a {
		border-radius: 1rem 1rem 0 1rem;
	}
	.comRecruitBox .photoList li .maskPho {
		aspect-ratio: 170 / 90;
		-webkit-mask: url(../img/common/mask03_sp.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask) 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
		-moz-mask: url(../img/common/mask03_sp.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask) 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
		mask: url(../img/common/mask03_sp.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask) 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
	}
	.comRecruitBox .photoList li .maskPho img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.comRecruitBox .photoList li .txtBox {
		padding: 0.2rem 1rem 0.2rem 0.5rem;
		left: 2.5rem;
		border-radius: 1rem 0 0 0;
		background: #F2F2F2;
	}
	.comRecruitBox .photoList li .txtBox .txt {
		font-size: 1.1rem;
		line-height: 1.5;
	}
	.comRecruitBox .photoList li .txtBox .txt::before {
		margin-top: -0.2rem;
		right: -0.5rem;
		width: 0.8rem;
		height: 0.6rem;
	}
}
/*------------------------------------------------------------
    comQaBox
------------------------------------------------------------*/
.comQaBox dl {
    padding: 3rem 2rem 2.4rem;
    border-bottom: 1px solid #E2E2E2;
}
.comQaBox dt {
    margin-bottom: 2rem;
    padding: 1.1rem 0 0 7rem;
    min-height: 5rem;
    position: relative;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
}
.comQaBox dd::before,
.comQaBox dt::before {
    width: 5rem;
    height: 5rem;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-weight: 700;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 2.2rem;    
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #92D213;
    content: "Q";
}
.comQaBox dd {
    padding: 1.1rem 0 0 7rem;
    min-height: 5.5rem;
    position: relative;
    line-height: 1.8;
}
.comQaBox dd a {
    text-decoration: underline;
}
@media all and (min-width: 897px) {
    .comQaBox dd a:hover {
        opacity: 0.7;
    }
}
.comQaBox dd::before {
    color: #92D213;
    border: 0.1rem solid #92D213;
    background-color: #FFF;
    content: "A";
}
.comQaBox dd .bold {
    font-weight: 700;
}
@media all and (max-width: 896px) {    
    .comQaBox dl {
        padding: 2rem 0 1.9rem;
    }
    .comQaBox dt {
        margin-bottom: 1rem;
        padding: 0.8rem 0 0 6rem;
        min-height: 4rem;
        font-size: 1.6rem;
    }
    .comQaBox dd::before,
    .comQaBox dt::before {
        width: 4rem;
        height: 4rem;
        font-size: 1.8rem;
    }
    .comQaBox dd {
        padding: 0.8rem 0 0 6rem;
        min-height: 4rem;
    }
}
/*------------------------------------------------------------
	comPhotoList
------------------------------------------------------------*/
.comPhotoList {
	display: flex;
	flex-wrap: wrap;
	gap: 3.4rem 4.1rem;
}
.comPhotoList li {
	width: 30.6rem;
	--width: 5rem;
	--height: 5rem;
	--mask: 1.5rem;
	--mask1: calc(var(--mask) - 0.1rem);
}
.comPhotoList li a {
	display: block;
}
.comPhotoList li .pho {
	margin-bottom: 1.5rem;
	padding-top: 3rem;
	position: relative;
	border-radius: 1.3rem;
	overflow: hidden;
}
.comPhotoList li .pho > img {
	position: relative;
	z-index: 5;
	transition: 0.3s;
}
.comPhotoList li .pho .maskBox {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 0 1.3rem 0 0;
	overflow: hidden;
	-webkit-mask: url(../img/common/mask06.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
	url(../img/common/mask05.png) no-repeat var(--width) top / var(--mask),
	url(../img/common/mask05.png) no-repeat left var(--height) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
	-moz-mask: url(../img/common/mask06.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
	url(../img/common/mask05.png) no-repeat var(--width) top / var(--mask),
	url(../img/common/mask05.png) no-repeat left var(--height) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
	mask: url(../img/common/mask06.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
	url(../img/common/mask05.png) no-repeat var(--width) top / var(--mask),
	url(../img/common/mask05.png) no-repeat left var(--height) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
}
.comPhotoList li .pho .txt {
	padding: 0 0.9rem 0.9rem 1rem;
	position: absolute;
	top: 5.9rem;
	left: 0;
	color: #7EC62B;
	font-size: 2.34rem;
	font-weight: 700;
	line-height: 1.2;
	z-index: 5;
}
.comPhotoList li .pho .txt.style01 {
	color: #007EC0;
}
.comPhotoList li .ttl {
	margin-bottom: 0.9rem;
	font-size: 1.82rem;
	font-weight: 700;
}
.comPhotoList li .tag {
	margin-bottom: 2rem;
	padding: 0.2rem 2rem;
	width: fit-content;
	color: #FFF;
	font-size: 1.56rem;
	background: #A2DB00;
	border-radius: 3.9px;
}
.comPhotoList li .tag.style01 {
	background: #007EC0;
}
.comPhotoList li .txt {
	font-size: 1.56rem;
}
.comInterview {
	overflow: hidden;
}
.comInterview .comPhotoList {
	margin: 0 -6rem 2rem;
	display: block;
	line-height: 0;
}
.comInterview .comPhotoList .slick-slide > div,
.comInterview .comPhotoList li,
.comInterview .comPhotoList li .pho {
	width: 23.5rem;
	line-height: 1.5;
}
.comInterview .comPhotoList .slick-slide > div {
	margin: 0 1.5rem;
}
.comInterview .comPhotoList li {
	--mask: 1.2rem;
}
.comInterview .comPhotoList li .pho {
	margin-bottom: 1.2rem;
	border-radius: 1rem;
}
.comInterview .comPhotoList li .pho .maskBox {
	border-radius: 0 1rem 0 0;
	-webkit-mask: url(../img/common/mask01_sp.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat var(--width) top / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat left var(--height) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
		-moz-mask: url(../img/common/mask01_sp.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat var(--width) top / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat left var(--height) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
		mask: url(../img/common/mask01_sp.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat var(--width) top / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat left var(--height) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
}
.comInterview .comPhotoList li .pho .txt {
	padding: 0 0.7rem 0.7rem 0.8rem;
	top: 5.3rem;
	font-size: 1.8rem;
}
.comInterview .comPhotoList li .ttl {
	margin-bottom: 0.6rem;
	font-size: 1.4rem;
}
.comInterview .comPhotoList li .tag {
	margin-bottom: 1.5rem;
	padding: 0.2rem 1.5rem;
	font-size: 1.2rem;
}
.comInterview .comPhotoList li .txt {
	font-size: 1.2rem;
}
@media all and (min-width: 897px) {
	.comPhotoList li a:hover .pho img {
		transform: scale(1.05);
	}
}
@media all and (max-width: 896px) {
	.comPhotoList {
		gap: 1.5rem 1rem;
	}
	.comPhotoList li {
		width: calc((100% - 1rem) / 2);
		--mask: 1.2rem;
	}
	.comPhotoList li .pho {
		margin-bottom: 0.7rem;
		padding-top: 0;
		border-radius: 1rem;
	}
	.comPhotoList li .pho .maskBox {
		border-radius: 0 1rem 0 0;
		-webkit-mask: url(../img/common/mask01_sp.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat var(--width) top / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat left var(--height) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
		-moz-mask: url(../img/common/mask01_sp.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat var(--width) top / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat left var(--height) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
		mask: url(../img/common/mask01_sp.png) no-repeat calc(var(--width) - var(--mask1)) calc(var(--height) - var(--mask1)) / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat var(--width) top / var(--mask),
		url(../img/common/mask02_sp.png) no-repeat left var(--height) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(var(--width) + var(--mask1)) top / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--mask1) var(--height) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat left calc(var(--height) + var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat var(--width) var(--mask1) / 100% 100%;
	}
	.comPhotoList li .pho .maskBox img {
		width: 100%;
	}
	.comPhotoList li .pho .txt {
		padding: 0 0.6rem 0.7rem 0.5rem;
		top: 1.4rem;
		font-size: 1.2rem;
	}
	.comPhotoList li .ttl {
		margin-bottom: 0.7rem;
		font-size: 1.2rem;
	}
	.comPhotoList li .tag {
		margin-bottom: 1rem;
		padding: 0.3rem 1.5rem 0.4rem;
		font-size: 1rem;
		border-radius: 3.9px;
	}
	.comPhotoList li .txt {
		font-size: 1rem;
	}
	.comInterview .comPhotoList {
		margin: 0 0 2rem;
	}
	.comInterview .comPhotoList .slick-list {
		padding: 0 1.5rem;
	}
	.comInterview .comPhotoList .slick-slide > div,
	.comInterview .comPhotoList li,
	.comInterview .comPhotoList li .pho {
		width: 17rem;
	}
	.comInterview .comPhotoList .slick-slide > div {
		margin: 0 0.5rem;
	}
	.comInterview .comPhotoList li .pho {
		margin-bottom: 0.8rem;
	}
	.comInterview .comPhotoList li .pho .txt {
		padding: 0 0.6rem 0.7rem 0.5rem;
		top: 1.4rem;
		font-size: 1.2rem;
	}
	.comInterview .comPhotoList li .ttl {
		margin-bottom: 0.7rem;
		font-size: 1.2rem;
	}
	.comInterview .comPhotoList li .tag {
		margin-bottom: 1rem;
		padding: 0.3rem 1.5rem 0.4rem;
		font-size: 1rem;
	}
	.comInterview .comPhotoList li .txt {
		font-size: 1rem;
	}
}
/*------------------------------------------------------------
	comInterview
------------------------------------------------------------*/
.comInterview .bottomBox {
	padding-bottom: 2rem;
	display: flex;
	flex-wrap: wrap;
}
.comInterview .bottomBox .arrow li {
	margin-right: 1rem;
	width: 4.2rem;
	height: 4.2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
}
.comInterview .bottomBox .arrow li::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #000;
	content: '';
	transition: 0.3s;
}
.comInterview .bottomBox .arrow li img {
	width: 1.2rem;
	position: relative;
	z-index: 5;
}
.comInterview .bottomBox .link {
	width: 13.6rem;
}
.comInterview .bottomBox .link a {
	padding: 1rem 1.9rem;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 4.2rem;
	border-radius: 10rem;
	color: #FFF;
	font-size: 1.2rem;
	font-weight: 500;
	font-family: "Hanken Grotesk", sans-serif;
	border: 1px solid #000;
	background: #000;
}
.comInterview .bottomBox .link a::before {
	margin-top: -0.5rem;
	position: absolute;
	top: 50%;
	right: 1.9rem;
	width: 1.2rem;
	height: 1rem;
	background: url(../img/common/icon07.png) no-repeat left top / 100%;
	content: '';
	transition: 0.3s;
}
@media all and (min-width: 897px) {
	.comInterview .bottomBox .arrow li:hover::before {
		transform: scale(1.1);
	}
	.comInterview .bottomBox .link a:hover {
		background-color: #FFF;
		color: #000;
	}
	.comInterview .bottomBox .link a:hover::before {
		transform: translateX(1rem);
		background-image: url(../img/common/icon07_over.png);
	}
}
@media all and (max-width: 896px) {
}
/*------------------------------------------------------------
    comLink01
------------------------------------------------------------*/
.comLink01 {
    width: 45.7rem;
}
.comLink01 a {
    padding: 1.4rem 2rem 1.5rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 5rem;
    border: 1px solid #000;
}
.comLink01 span {
    padding: 0.6rem 5rem 0.6rem 0;
    background: url(../img/common/icon15.png) no-repeat right center / 3.1rem;
}
@media all and (min-width: 897px) {
    .comLink01 a:hover {
        background-color: #000;
    }
    .comLink01 a:hover span {
        color: #fff;
        background-image: url(../img/common/icon15_hover.png);
    }
} 
@media all and (max-width: 896px) {
    .comLink01 {
        width: 32.2rem;
    }
    .comLink01 a {
        padding: 1.3rem 1rem 1.4rem;
        font-size: 1.4rem;
    }
    .comLink01 span {
        padding: 0.6rem 3.5rem 0.6rem 0;
        background-size: 2.5rem auto;
    }
}
/*------------------------------------------------------------
	comLink02
------------------------------------------------------------*/
.comLink02 {
	width: fit-content;
}
.comLink02 a {
	padding: 0.5rem 5.1rem 0.5rem 1.9rem;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 4.2rem;
	color: #FFF;
	font-size: 1.2rem;
	font-weight: 700;
	border: 1px solid #000;
	background: #000;
	border-radius: 10rem;
	box-sizing: border-box;
}
.comLink02 a::before {
	margin-top: -0.5rem;
	position: absolute;
	top: 50%;
	right: 1.9rem;
	width: 1.2rem;
	height: 1rem;
	background: url(../img/common/icon07.png) no-repeat left top / 100%;
	content: '';
	transition: 0.3s;
}
.comLink02.style01 a {
	color: #000;
	background: #FFF;
}
.comLink02.style01 a::before {
	background-image: url(../img/common/icon03.png);
}
.comLink02.out a::before {
	display: none;
}
.comLink02.out a::after {
	margin-top: -0.5rem;
	position: absolute;
	top: 50%;
	right: 1.9rem;
	width: 1rem;
	height: 1rem;
	background: url(../img/common/icon11.png) no-repeat left top / 100%;
	content: '';
	transition: 0.3s;
}
@media all and (min-width: 897px) {
	.comLink02 a:hover {
		color: #000;
		background-color: #FFF;
	}
	.comLink02 a:hover::before {
		transform: translateX(1rem);
		background-image: url(../img/common/icon07_over.png);
	}
	.comLink02.style01 a:hover {
		color: #FFF;
		background: #000;
	}
	.comLink02.style01 a:hover::before {
		background-image: url(../img/common/icon03.png);
	}
	.comLink02.out a:hover::after {
		transform: translateX(1rem);
	}
}
@media all and (max-width: 896px) {
}
/*------------------------------------------------------------
	comLinkArea
------------------------------------------------------------*/
.comLinkArea {
	margin: 5.2rem auto 0;
	width: 64rem;
	--width: 29.5rem;
	--height: 6rem;
	--mask: 1.7rem;
	--mask1: calc(var(--mask) - 0.1rem);
}
.comLinkArea a {
	display: block;
	position: relative;
}
.comLinkArea a .maskPho {
	display: block;
	border-radius: 1.5rem;
	overflow: hidden;
	-webkit-mask: url(../img/common/mask03.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
	url(../img/common/mask04.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
	url(../img/common/mask04.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask1) 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
	-moz-mask: url(../img/common/mask03.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
	url(../img/common/mask04.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
	url(../img/common/mask04.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask1) 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
	mask: url(../img/common/mask03.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
	url(../img/common/mask04.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
	url(../img/common/mask04.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
	linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask1) 100%,
	linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
}
.comLinkArea a .maskPho img {
	transition: 0.3s;
}
.comLinkArea a .txt {
	padding: 1rem 5.4rem 1rem 2.1rem;
	position: absolute;
	bottom: 0;
	right: 0;
	min-height: 6rem;
	font-size: 2.2rem;
	font-weight: 700;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	box-sizing: border-box;
}
.comLinkArea a .txt::before {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 2rem;
	width: 1.4rem;
	height: 1.2rem;
	background: url(../img/common/icon10.png) no-repeat left top / 100%;
	content: '';
	transition: 0.3s;
}
@media all and (min-width: 897px) {
	.comLinkArea a:hover .maskPho img {
		transform: scale(1.1);
	}
	.comLinkArea a:hover .txt::before {
		transform: translate(1rem,-50%);
	}
}
@media all and (max-width: 896px) {
	.comLinkArea {
		margin: 3rem 2rem 0;
		width: auto;
		--mask: 1.2rem;
	}
	.comLinkArea a .maskPho {
		border-radius: 1rem;
		aspect-ratio: 350 / 165;
		-webkit-mask: url(../img/common/mask03_sp.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask) 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
		-moz-mask: url(../img/common/mask03_sp.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask) 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
		mask: url(../img/common/mask03_sp.png) no-repeat calc(100% - var(--width) + var(--mask1)) calc(100% - var(--height) + var(--mask1)) / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat calc(100% - var(--width)) 100% / var(--mask),
		url(../img/common/mask04_sp.png) no-repeat 100% calc(100% - var(--height)) / var(--mask),
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width)) calc(100% - var(--mask1)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--mask1)) calc(100% - var(--height)) / 100% 100%,
		linear-gradient(#000 0, #000 100%) no-repeat 100% calc(100% - var(--height) - var(--mask1)) / var(--mask) 100%,
		linear-gradient(#000 0, #000 100%) no-repeat calc(100% - var(--width) - var(--mask1)) 100% / 100% 100%;
	}
	.comLinkArea a .maskPho img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.comLinkArea a .txt {
		padding: 0.5rem 3rem 0.6rem 1.1rem;
		min-height: 3.5rem;
		font-size: 1.4rem;
	}
	.comLinkArea a .txt::before {
		right: 1rem;
		width: 1rem;
		height: 0.8rem;
	}
}
/*------------------------------------------------------------
	.comImgBox
------------------------------------------------------------*/
.comImgBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.comImgBox .linkUl {
	width: calc(50% + 4rem);
}
.comImgBox .linkUl li {
	margin: 0 10rem 0 auto;
	width: 44rem;
}
.comImgBox .linkUl li a {
	padding: 2rem 1.5rem 1.9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 500;
	border-top: 1px solid #FFF;
	position: relative;
}
.comImgBox .linkUl li:last-child a {
	border-bottom: 1px solid #FFF;
}
.comImgBox .linkUl li a .txt {
	display: block;
	width: calc(100% - 5rem);
}
.comImgBox .linkUl li a .ico {
	display: block;
	width: 4rem;
	height: 4rem;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.comImgBox .linkUl li a .ico img {
	width: 1rem;
}
.comImgBox .linkUl li a .ico::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #FFF;
	border-radius: 50%;
	content: '';
	box-sizing: border-box;
	transition: 0.3s;
}
@media all and (min-width: 897px) {
	.comImgBox .linkUl li a:hover .ico::before {
		transform: scale(1.1);
	}
}
.comImgBox .photoUl {
	width: calc(50% - 4rem);
}
.comImgBox .photoUl li {
	border-radius: 2rem 0 0 2rem;
	overflow: hidden;
}
.comImgBox .photoUl li img {
	width: 100%;
}
@media all and (max-width: 896px) {
	.comImgBox {
		padding: 0 2rem;
		display: block;
	}
	.comImgBox .linkUl {
		margin-bottom: 3rem;
		width: auto;
	}
	.comImgBox .linkUl li {
		margin: 0;
		width: auto;
	}
	.comImgBox .linkUl li a {
		padding: 1.8rem 1.5rem 2rem;
		font-size: 1.6rem;
		line-height: 1;
	}
	.comImgBox .linkUl li a .txt {
		display: block;
		width: calc(100% - 4rem);
	}
	.comImgBox .linkUl li a .ico {
		width: 3rem;
		height: 3rem;
	}
	.comImgBox .linkUl li a .ico img {
		width: 0.8rem;
	}
	.comImgBox .photoUl {
		margin-right: -2rem;
		width: auto;
	}
	.comImgBox .photoUl li {
		border-radius: 1rem 0 0 1rem;
	}
	.comImgBox .photoUl li:nth-child(n+2) {
		display: none;
	}
}
/*------------------------------------------------------------
    comTab
------------------------------------------------------------*/
.comTab table {
    width: 100%;
    border-collapse: collapse;
}
.comTab th,
.comTab td {
    padding: 2.3rem 2rem 2.7rem 4rem;
    vertical-align: top;
    text-align: left;
    line-height: 1.8;
    box-sizing: border-box;
    border-top: 1px solid #D0D0D0;
}
.comTab th {
    width: 20%;
    font-weight: 700;
    border-color: #7EC62B;
}
.comTab tr:last-child th,
.comTab tr:last-child td {
    border-bottom: 1px solid #D0D0D0;
}
.comTab tr:last-child th {
    border-color: #7EC62B;
}
.comTab .txtLink {
    text-decoration: underline;
}
@media all and (max-width: 896px) {
    .comTab .txtLink:hover {
        opacity: 0.7;
    }
}
.comTab .bold {
    font-weight: 700;
}
.comTab .comLink02 {
    margin-top: 2.5rem;
}
@media all and (max-width: 896px) {
    .comTab th,
    .comTab td {
        padding: 1.4rem 0.9rem 1.5rem;
    }
    .comTab th {
        padding: 1.2rem 1rem 1.5rem;
        width: 34%;
    }
    .comTab .comLink02 {
        margin-top: 0.9rem;
    }
}
/*------------------------------------------------------------
    comStepList
------------------------------------------------------------*/
.comStepList li {
    padding-bottom: 4rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: url(../img/common/step_icon01.png) no-repeat left 9rem bottom 1.3rem;
    background-size: 5rem auto;
}
.comStepList li:last-child {
    padding-bottom: 0;
    background: none;
}
.comStepList li .lBox {
    width: 23rem;
    padding: 0.1rem 2.2rem 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: #92D213;
    border-radius: 1rem 0 0 1rem;
}
.comStepList li .lBox .number {
    margin-top: 0.3rem;
    width: 6rem;
    color: #FFF;
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.2;
    text-align: center;
}
.comStepList li .lBox .number .en {
    margin-bottom: -0.5rem;
    display: block;
    font-size: 2.2rem;
}
.comStepList li .lBox .mark {
    width: calc(100% - 7.2rem);
    text-align: center;
}
.comStepList li .rBox {
    width: calc(100% - 24rem);
    position: relative;
    padding: 3.3rem 5rem 3.3rem 4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 0 1rem 1rem 0;
    border: 1px solid #92D213;
    border-left: none;
}
.comStepList li .rBox .subBox {
    width: 100%;
}
.comStepList li .rBox .ttl {
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.5;
}
.comStepList li .rBox p {
    margin-bottom: 1.6rem;
    line-height: 1.6;
    text-align: justify;
}
.comStepList li .rBox p:last-child {
    margin-bottom: 0;
}
.comStepList li .rBox .logoImg {
    margin-bottom: 0.5rem;
}
.comStepList li .rBox .logoImg a:hover {
    opacity: 0.7;
}
.comStepList li .rBox .subTtl {
    margin: -0.3rem 0 0.8rem;
    font-weight: 700;
    font-size: 1.8rem;
}
.comStepList li .rBox .subTtl .sml {
    margin-left: 0.5rem;
    font-size: 1.4rem;
}
.comStepList li .rBox.bg {
    background: rgba(146, 210, 19, 0.10);
}
@media all and (max-width: 896px) {
    .comStepList li {
        padding-bottom: 3.5rem;
        display: block;
        background-position: center bottom 1rem;
    }
    .comStepList li .lBox {
        margin-bottom: 1rem;
        padding: 1.3rem 0;
        width: auto;
        min-height: 10rem;
        justify-content: center;
        border-radius: 1rem 1rem 0 0;
    }
    .comStepList li .lBox .mark {
        margin-left: 2.5rem;
        width: auto;
    }
    .comStepList li .rBox {
        width: auto;
        padding: 1rem 1.9rem 1.9rem;
        min-height: 6.7rem;
        border-radius: 0 0 1rem 1rem;
        border: 1px solid #92D213;
        border-top: none;
    }
	.comStepList li .rBox.bg {
		padding: 1rem 1.9rem;
	}
    .comStepList li .rBox .ttl {
        margin-bottom: 1.0rem;
        font-size: 1.8rem;
        text-align: center;
    }
    .comStepList li .rBox p {
        margin-bottom: 1.9rem;
    }
    .comStepList li .rBox .logoImg {
        margin-bottom: 0;
    }
    .comStepList li .rBox .subTtl {
        margin: -0.5rem 0 1.1rem;
        font-size: 1.6rem;
        line-height: 1.3;
    }
    .comStepList li .rBox .subTtl .sml {
        font-size: 1.2rem;
    }
}
/*------------------------------------------------------------
	common
------------------------------------------------------------*/
@media all and (max-width: 896px) {
}
/*------------------------------------------------------------
	common
------------------------------------------------------------*/
@media all and (max-width: 896px) {
}