@charset "UTF-8";
/* CSS Document */

/*
	Reset CSS
-----------------------------------------------------------------------------------------------*/
/***
    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)){
	all: unset;
	display: revert;
}
*,*::before,*::after{
	box-sizing: border-box;
}
a, button{
	cursor: revert;
}
ol, ul, menu{
	list-style: none;
}
img{
	vertical-align: top;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
input, textarea{
	-webkit-user-select: auto;
	user-select: auto;
}
textarea{
	white-space: revert;
}
meter{
	-webkit-appearance: revert;
	appearance: revert;
}
::placeholder{
	color: unset;
}
:where([hidden]){
	display: none;
}
:where([contenteditable]:not([contenteditable="false"])){
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	word-break: keep-all;
	-webkit-user-select: auto;
	user-select: auto;
}
:where([draggable="true"]){
	-webkit-user-drag: element;
}


/*
	Setting CSS
-----------------------------------------------------------------------------------------------*/
html{
	font-size: 62.5%;
}
body{
	color: #000;
	font-size: 1.5em;
	font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	font-feature-settings: "halt";
	overflow-wrap: break-word;
}
p{
	line-height: 170%;
}
a{
	color: #000;
	text-decoration: none;
	transition: all 0.3s;
}
a:link{
	color: #000;
}
a:visited{
	color: #000;
}
a:hover{
	text-decoration: none;
}
@media print, screen and (min-width:813px){
	/* iPad背景切れ対策 */
	body{
		min-width: 1200px;
	}
	
	/* tel pcのみ無効 */
	a[href^="tel:"]{
		pointer-events: none;
	}
}
/* 表示切替 */
.switch{
	visibility: hidden;
}
.sp{
	display: none;
}


/*
	common
-----------------------------------------------------------------------------------------------*/
:root{
	/* color */
	--clGreen: #005646;
	--clGray: #EDEFF1;
	--clBeige: #AE9764;
	--clBg: #F1F0ED;
	--clGrd01: radial-gradient(circle,rgba(182, 160, 107, 1) 0%, rgba(140, 115, 86, 1) 100%);
	--clGrd02: radial-gradient(circle,rgba(98, 151, 141, 1) 0%, var(--clGreen) 100%);
	/* width */
	--wBase: 1200px;
	--w1000:  1000px;
	/* weight */
	--black: 900;
	--bold: 700;
	--medium: 500;
	--regular: 400;
	--light: 300;
	/* font */
	--fHind: "Hind", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* box
============================== */
/* wrapper */
#wrapper{
	/* overflow: hidden; */
	position: relative;
}
/* ctsArea */
.ctsArea{
	display: flex;
	flex-direction: column;
	width: var(--wBase);
	margin-inline: auto;
	padding-inline: 30px;
}
.ctsArea.w1000{
	width: var(--w1000);
}
/* bg */
.bg{
	background-color: var(--clBg);
}

/* btn
============================== */
.btnArea{
	margin-top: 70px;
}
a.btnBase{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 500px;
	margin: 0 auto;
	padding-block: 18px;
	color: #fff;
	font-size: 2.2rem;
	font-weight: var(--black);
	background: var(--clGrd01);
	border-radius: 50px;
	position: relative;
	transition: all .3s;
}
/* item */
a.btnBase::before,
a.btnBase::after{
	content: "";
	position: absolute;
	translate: 0 -50%;
	top: 50%;
	transition: all .3s;
}
a.btnBase::before{
	width: 42px;
	height: 42px;
	border-radius: 50px;
	border: 2px solid #fff;
	right: 20px;
}
a.btnBase::after{
	width: 18px;
	height: 10px;
	background: url(../images/item_btn_white.svg)no-repeat center center / contain;
	right: 31px;
}
@media (any-hover: hover){
	a.btnBase:hover{
		opacity: .8;
	}
	a.btnBase:hover::before,
	a.btnBase:hover::after{
		transition: all .3s;
	}
	a.btnBase:hover::before{
		right: 17px;
	}
	a.btnBase:hover::after{
		right: 28px;
	}
}
/* item green */
.btnArea:has(a.btnBase.itemGreen){
	margin-top: 45px;
}
a.btnBase.itemGreen{
	width: 445px;
	margin-inline: 0;
	padding-block: 22px;
	color: var(--clGreen);
	font-size: 2.8rem;
	background: #F5D200;
}
a.btnBase.itemGreen::before{
	border: 2px solid var(--clGreen);
}
a.btnBase.itemGreen::after{
	background: url(../images/item_btn_green.svg)no-repeat center center / contain;
}

/* tit
============================== */
.titBase{
	display: inline-block; 
	margin: 0 auto;
	position: relative;
	font-size: 3.3rem;
	font-weight: var(--bold);
	letter-spacing: 0.25rem;
	z-index: 0;
}
.titBase::before{
	content: "";
	width: 100%;
	height: 12px;
	background: var(--clGrd01);
	position: absolute;
	bottom: 5px;
	left: 0;
	z-index: -1;
}
.titBase span{
	font-size: 5.5rem;
}

/* lead
============================== */
.lead{
	margin-top: 45px;
	text-align: center;
	font-size: 1.6rem;
	font-weight: var(--bold);
}

/*
	swiper
-----------------------------------------------------------------------------------------------*/
.jsSwiperList {
    position: relative;
}
.swiperBox{
	padding-inline: 60px;
	position: relative;
}
.swiper{
	margin-top: 45px;
	padding: 10px;
	overflow: hidden;
}
.swiper ul li{
	max-height: 335px;
	transition: opacity .3s;
}
@media (any-hover: hover){
	.swiper ul li:hover{
		opacity: .7;
	}
}

/* swiper btn
============================== */
.swiperBtn[class *= "swiper-button"]{
  width: 28px;
  height: 70px;
  position: absolute;
  top: 50%;
  z-index: 10;
  transition: opacity .3s;
}
.swiper-button-prev{
	background: url(../images/item_swiper_prev.svg) no-repeat center center / contain;
}
.swiper-button-next{
	background: url(../images/item_swiper_next.svg) no-repeat center center / contain;
}
.swiperBtn[class *= "swiper-button"]::after {
	display: none;
}

/*
	header
-----------------------------------------------------------------------------------------------*/
#headerWrapper{
	display: flex;
	align-items: center;
	justify-content: end;
    width: 100%;
    position: absolute;
    z-index: 1000;
}
#headerWrapper .logo{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: #fff;
}
#headerWrapper .logo img{
	width: 188px;
}

/*
	kvWrapper
-----------------------------------------------------------------------------------------------*/
#kvWrapper{
	display: flex;
	align-items: center;
	justify-content: center;
    min-width: 1200px;
	min-height: 830px;
	padding-inline: 30px;
	background: url(../images/bg_kv_pc.png) no-repeat center center / cover;
	position: relative;
}
#kvWrapper::before,
#kvWrapper::after{
    display: block;
	content: "";
	width: 100%;
	height: 100%;
	clip-path: polygon(0 0, 100% 0, 15% 100%, 0% 100%);
    position: absolute;
    top: 0;
    left: 0;
}
#kvWrapper::before{
	background-color: rgba(0, 86, 70, 0.5);
	z-index: 0;
}
#kvWrapper::after{
	background-color: #226C5E;
	mix-blend-mode: hard-light;
	z-index: 1;
}

/* kvCatchArea
============================== */
.kvCatchArea{
	max-width: var(--wBase);
	width: 100%;
	color: #fff;
	font-weight: var(--bold);
	position: relative;
	z-index: 3;
}
/* kvCatch */
.kvCatch{
	line-height: 460%;
}
.kvCatch__gold{
	display: block;
	width: fit-content;
	margin-bottom: 25px;
	padding: 10px 20px;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1;
	background: var(--clGrd01);
}
.kvCatch > span:nth-of-type(2){
	font-size: 5.6rem;
	font-weight: var(--black);
}
.kvCatch > span:nth-of-type(3){
	font-size: 4.6rem;
}
.kvCatch > span:nth-of-type(4){
	font-size: 8.2rem;
}
.kvCatch > span:nth-of-type(5){
	font-size: 5.0rem;
}
.kvCatch > span:nth-of-type(6){
	font-family: var(--fHind);
	font-size: 9.4rem;
	line-height: 1;
}
.kvTxt{
	margin-top: 50px;
	font-size: 2.0rem;
}

/* bestAward
============================== */
.bestAward{
	text-align: center;
	position: absolute;
	bottom: -70px;
	right: -20px;
	z-index: 2;
}
.bestAwardImg{
	width: 165px;
	height: auto;
	mix-blend-mode: multiply;
	-webkit-filter: drop-shadow(0 0 10px rgba(114, 84, 0, 1));
    filter: drop-shadow(0 0 10px rgba(114, 84, 0, 1));
}
.bestAwardTxt{
	min-width: 290px;
	padding-block: 40px;
	color: #fff;
	font-size: 1.3rem;
	font-weight: var(--black);
	position: relative;
	mix-blend-mode: multiply;
	-webkit-filter: drop-shadow(0 0 9px rgba(114, 84, 0, 1));
    filter: drop-shadow(0 0 9px rgba(114, 84, 0, 1));
}
/* item */
.bestAwardTxt::before,
.bestAwardTxt::after{
	content: "";
	width: 290px;
	height: 21px;
	position: absolute;
	left: 0;
}
.bestAwardTxt::before{
	background: url(../images/item_bestAward_top.svg) no-repeat center center / contain;
	top: 0;
}
.bestAwardTxt::after{
	background: url(../images/item_bestAward_bottom.svg) no-repeat center center / contain;
	bottom: 0;
}

/* kvImgArea
============================== */
.kvImgArea{
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
/* kvPeople */
.kvPeople{
	position: absolute;
	translate: -55% 0;
	bottom: 0;
	z-index: 2;
}

/*
	painPointWrapper
-----------------------------------------------------------------------------------------------*/
#painPointWrapper{
	background-color: var(--clGray);
}
#painPointWrapper .ctsArea{
	padding-block: 60px;
}
#painPointWrapper .lead{
	margin-top: 25px;
	font-weight: var(--regular);
}

/* tit
============================== */
#painPointWrapper .titBase::before{
	content: none;
}
#painPointWrapper .titBase span{
	color: var(--clGreen);
	font-size: 4.4rem;
	position: relative;
}
#painPointWrapper .titBase span::before{
	content: "";
	width: 100%;
	height: 12px;
	background-color: #D1D1D1;
	position: absolute;
	bottom: 3px;
	left: 0;
	z-index: -1;
}

/* list
============================== */
.painPointList{
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
	font-size: 1.8rem;
	font-weight: var(--bold);
}
.painPointList li{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 245px;
	position: relative;
	z-index: 0;
}
.painPointList li::before{
	content: "";
	width: 100%;
	height: 100%;
	background: url(../images/item_painPoint.svg) no-repeat center center / contain;
	mix-blend-mode: multiply;
	-webkit-filter: drop-shadow(0 5px 5px rgba(0,0,0,0.15));
	filter: drop-shadow(0 5px 5px rgba(0,0,0,0.15));
	position: absolute;
	translate: -50% -50%;
	top: 50%;
	left: 50%;
	z-index: -1;
}
.painPointList li p{
	width: 180px;
	min-height: 100px;
	padding-bottom: 30px;
	line-height: 150%;
}
.painPointList li p span{
	color: #8A8A8A;
}

/*
	solutionWrapper
-----------------------------------------------------------------------------------------------*/
#solutionWrapper{
	position: relative;
}
#solutionWrapper::before{
	content: "";
	display: block;
	width: 150px;
	height: 56px;
	background-color: var(--clGray);
	position: absolute;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	translate: -50%;
	top: -1px;
	left: 50%;
}
#solutionWrapper .ctsArea{
	padding-block: 85px;
	counter-reset: solutionList-number 0;
}

/* list
============================== */
.solutionList{
	display: flex;
	gap: 30px;
	justify-content: space-between;
	margin-top: 80px;
}
.solutionList li{
	padding: 35px;
	color: #fff;
	background-color: var(--clGreen);
	font-weight: var(--bold);
	position: relative;
}
.solutionList li:before{
	counter-increment: solutionList-number 01; /* number カウンタの増加数をセット */
  	content: counter(solutionList-number, decimal-leading-zero) ""; /* 表示形式を指定 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 73px;
	height: 73px;
	padding-top: 5px;
	color: var(--clGreen);
	font-family: var(--fHind);
	font-size: 4.0rem;
	border: 3px solid var(--clGreen);
	border-radius: 50px;
	background-color: #fff;
	position: absolute;
	top: -15px;
	left: -12px;
}
.solutionList li img{
	margin-bottom: 20px;
}
.solutionList li .olTit{
	font-size: 3.2rem;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.25rem;
}
.olTxt{
	margin-top: 20px;
	padding-top: 20px;
	font-size: 1.7rem;
	position: relative;
}
.olTxt::before{
	content: "";
	width: 100%;
	height: 2px;
	background: var(--clGrd01);
	position: absolute;
	top: 0;
	left: 0;
}
#solutionWrapper .txt{
	margin-top: 40px;
	text-align: center;
}

/*
	agentWrapper
-----------------------------------------------------------------------------------------------*/
#agentWrapper .ctsArea{
	padding-block: 75px 60px;
}
/* agentList
============================== */
.agentList{
	display: flex;
	gap: 35px;
	justify-content: space-between;
	width: var(--w1000);
	margin-top: 45px;
	margin-inline: auto;
}
.agentList li{
	width: calc((100% - 70px)/3);
	background-color: #fff;
	-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
}
/* 詳細 */
.agentDetail{
	padding: 18px 20px;
}
/* 名前 english */
.nameEn{
	color: var(--clBeige);
	line-height: 1;
	font-family: var(--fHind);
	font-size: 1.4rem;
	font-weight: var(--light);
}
/* 名前 */
.name{
	font-size: 2.0rem;
	font-weight: var(--bold);
}
/* 役職 */
.position{
	font-size: 1.2rem;
}
/* 紹介文 */
.agentDetailTxt{
	margin-top: 15px;
	padding-top: 15px;
	letter-spacing: -0.05rem;
	font-size: 1.4rem;
	border-top: 1px solid #000;
}

/*
	caseWrapper
-----------------------------------------------------------------------------------------------*/
#caseWrapper .ctsArea{
	padding-block: 60px 85px;
}

/* caseArea
============================== */
.caseArea{
	display: flex;
	gap: 50px;
	flex-direction: column;
	margin-top: 45px;
}
/* tit */
.caseTit{
	display: flex;
	align-items: center;
	margin-bottom: 35px;
	font-size: 2.8rem;
	font-weight: var(--bold);
}
.caseTit::before,
.caseTit::after{
	content: "";
	height: 2px;
	flex-grow: 1;
	background-color: var(--clBeige);
}
.caseTit::before{
	margin-right: 30px;
}
.caseTit::after{
	margin-left: 30px;
}
.caseTit span{
	color: var(--clBeige);
}

/* caseList
============================== */
.caseList{
	display: flex;
	gap: 25px;
	flex-direction: column;
}
.caseList li{
	width: 100%;
	position: relative;
	-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
}
/* 年齢 */
.age{
	display: inline-block;
	padding: 8px 10px;
	color: #fff;
	line-height: 1;
	font-size: 1.8rem;
	background-color: #000;
	position: absolute;
	top: -8px;
	left: -8px;
	z-index: 1;
}
.age span{
	font-size: 1.2rem;
}
/* 仕事 before after */
.job{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
}
[class*="job__"]{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.job__before{
	flex: 0 0 auto;
	width: 450px;
	padding: 20px 40px 20px 50px;
	font-size: 2.1rem;
	font-weight: var(--bold);
	background-color: #fff;
	position: relative;
}
.job__after{
	align-items: center;
	padding: 20px 30px 20px 85px;
	color: #fff;
	background-color: var(--clGreen);
	position: relative;
}
/* item */
.job__before::before,
.job__before::after,
.job__after::after{
	position: absolute;
}
/* item ▶ */
.job__before::before{
	content: "";
	width: 38px;
	height: 100%;
	background-color: #fff;
	clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
	top: 0;
	right: -38px;
	z-index: 1;
}
/* item 文字 */
.job__before::after,
.job__after::after{
	line-height: 1;
	letter-spacing: 0.15rem;
	font-family: var(--fHind);
	font-size: 12.4rem;
	font-weight: var(--light);
	position: absolute;
	top: 42px;
	opacity: 0.08;
	z-index: 0;
}
.job__before::after{
	content: "BEFORE";
	color: var(--clBeige);
	left: 20px;
}
.job__after::after{
	content: "AFTER";
	color: #fff;
	right: 20px;
}
/* after詳細文 */
.jobTxt{
	width: 100%;
	font-size: 2.7rem;
	font-weight: var(--black);
	line-height: 140%;
}
.jobTxt span{
	display: block;
	line-height: 180%;
	margin-top: 5px;
	font-size: 1.6rem;
	font-weight: var(--regular);
}

/*
	experienceWrapper
-----------------------------------------------------------------------------------------------*/
#experienceWrapper .ctsArea{
	padding-block: 100px 45px;
}

/* experienceList
============================== */
.experienceList{
	display: flex;
}
.experienceList li{
	width: calc((100% - 20px)/2);
	background-color: #fff;
	-webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.15));
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.15));
}
.experienceTit{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	padding: 30px;
	font-size: 1.8rem;
	font-weight: var(--bold);
}
/* 仕事 before after */
.experiencejob{
	display: flex;
}
.experiencejob [class*="job__"]{
	justify-content: start;
	width: calc(100% / 2);
	height: auto;
	line-height: 140%;
	font-size: 1.4rem;
}
.experiencejob .job__before{
	width: 230px;
	padding: 20px 30px;
	text-align: left;
	font-weight: var(--bold);
	background-color: var(--clBg);
}
.experiencejob .job__after{
	align-items: start;
	width: 100%;
	min-height: 140px;
    padding: 20px 30px 20px 50px;
	font-weight: var(--black);
}
/* item ▶ */
.experiencejob .job__before::before{
	width: 30px;
	background-color: var(--clBg);
	clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
	right: -29px;
}
/* item 文字 */
.experiencejob [class*="job__"]::after{
	content: none;
}
/* before after 文字 */
.experiencejob [class*="job__"] span{
	width: 100%;
	margin-bottom: 10px;
	padding-bottom: 10px;
	font-family: var(--fHind);
	font-size: 1.8rem;
	font-weight: var(--light);
}
.experiencejob .job__before span{
	color: var(--clBeige);
	border-bottom: 1px solid var(--clBeige);
}
.experiencejob .job__after span{
	color: #fff;
	border-bottom: 1px solid #fff;
}

/*
	connectionWrapper
-----------------------------------------------------------------------------------------------*/
#connectionWrapper .ctsArea{
	padding-block: 45px 120px;
}
#connectionWrapper .ctsArea .titBase{
	color: var(--clBeige);
	font-size: 4.0rem;
}
#connectionWrapper .ctsArea .titBase::before{
	content: none;
}

/* connectionList
============================== */
.connectionList li{
	display: flex;
	width: calc((100% - 40px)/3);
	-webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.15));
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.15));
}
.connectionBox{
	display: flex;
	gap: 25px;
	flex-direction: column;
	justify-content: space-between;
	min-height: 160px;
	padding: 20px;
	background-color: #fff;
}
/* tit */
.connectionTit{
	font-size: 1.6rem;
	font-weight: var(--bold);
}
/* 日付 */
.date{
	color: var(--clBeige);
	line-height: 1;
	font-family: var(--fHind);
	font-size: 1.4rem;
	font-weight: var(--light);
}

/*
	faqWrapper
-----------------------------------------------------------------------------------------------*/
#faqWrapper .ctsArea{
	padding-block: 80px 100px;
}

/* faqList
============================== */
.faqList{
	margin-top: 45px;
	padding: 40px;
	background-color: #fff;
	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);

}
.faqList > li{
	border-bottom: 1px solid #000;
}
.faqList > li:last-child{
	border-bottom: none;
}
/* 質問 */
.txtQ{
	display: flex;
	align-items: center;
	padding: 25px 20px 25px 15px;
	font-size: 1.6rem;
	font-weight: var(--bold);
	position: relative;
}
@media (any-hover: hover){
	.txtQ:hover {
		cursor: pointer;
	}
}
.txtQTit{
	padding-left: 40px;
	position: relative;
}
.txtQTit::before{
	content: "";
	width: 23px;
	height: 28px;
	background: url(../images/ico_faq.svg)no-repeat center center / contain;
	position: absolute;
	translate: 0 -50%;
	top: 50%;
	left: 0;
}
/* icoToggle */
.icoToggle{
	/* display: flex;
	align-items: center;
	justify-content: center; */
	width: 30px;
	height: 30px;
	background-color: var(--clBeige);
	border: 1px solid var(--clBeige);
	border-radius: 50%;
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	right: 25px;
	transition: background-color 0.3s;
}
.txtQ .icoToggle::before,
.txtQ .icoToggle::after {
	content: "";
	display: block;
	width: 13px;
	height: 1px;
	background-color: #fff;
	position: absolute;
	top: 14px;
	left: 8px;
	transition: all 0.3s;
}
.icoToggle::after{
	rotate: 90deg;
}
/* jsToggleOpen */
.txtQ.jsToggleOpen .icoToggle{
	background-color: #fff;
}
.txtQ.jsToggleOpen .icoToggle::before{
	background-color: var(--clBeige);
}
.txtQ.jsToggleOpen .icoToggle::after{
	rotate: 180deg;
	opacity: 0;
}
/* 答え */
.txtA{
	padding: 25px 55px;
	color: var(--clGreen);
	font-size: 1.4rem;
	background-color: #F8FBFA;
}
/* 答え ナンバリング */
.txtAList{
	counter-reset: txtAList-number 0;
}
.txtAList li{
	display: flex;
	flex-direction: column;
	margin-bottom: 25px;
	padding-left: 22px;
	position: relative;
}
.txtAList li:last-child{
	margin-bottom: 0;
}
.txtAList li::before{
	counter-increment: txtAList-number 1; /* number カウンタの増加数をセット */
  	content: counter(txtAList-number) ""; /* 表示形式を指定 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 8px 6px 6px;
	color: #fff;
	font-family: var(--fHind);
	font-size: 1.2rem;
	font-weight: var(--medium);
	background-color: var(--clGreen);
	border-radius: 50px;
	position: absolute;
	top: 3px;
	left: 0;
}
.txtAList li span{
	margin-bottom: 8px;
	font-weight: var(--bold);
}
/* toggle */
.jsBtnToggle + *{
	display: none;
}

/*
	aboutWrapper
-----------------------------------------------------------------------------------------------*/
#aboutWrapper .ctsArea{
	padding-block: 50px 70px;
}

/* aboutList
============================== */
.aboutList{
	display: flex;
	gap: 20px;
	text-align: center;
	font-weight: var(--black);
}
.aboutList li{
	width: calc((100% - 20px)/2);
}
/* tit */
.aboutListTit{
	margin-bottom: 25px;
	color: var(--clBeige);
	font-size: 2.8rem;
}
/* btn */
.filter{
	-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
	transition: all .3s;
}
.btnTit{
	padding-block: 10px;
	color: #fff;
	font-size: 2.0rem;
	background: var(--clGrd02);
}
.btnList{
	display: flex;
	gap: 15px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 167px;
	padding: 30px;
	background-color: #fff;
	position: relative;
}
/* btn item */
.btnList::before,
.btnList::after{
	content: "";
	position: absolute;
	transition: all .3s;
}
.btnList::before{
	width: 40px;
	height: 40px;
	border-radius: 50px;
	border: 2px solid var(--clGreen);
	right: 20px;
}
.btnList::after{
	width: 18px;
	height: 10px;
	background: url(../images/item_btn_green.svg) no-repeat center center / contain;
	right: 31px;
}
@media (any-hover: hover){
	.filter:hover{
		-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.08);
		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.08);
	}
	#aboutWrapper .btnArea:hover{
		opacity: .7;
	}
	#aboutWrapper .btnArea:hover .btnList::before{
		right: 18px;
	}
	#aboutWrapper .btnArea:hover .btnList::after{
		right: 29px;
	}
}
/* 内容 */
.btnList li{
	width: 100%;
	padding-left: 20px;
	text-align: left;
	font-weight: var(--bold);
	position: relative;
}
/* item 内容 */
.btnList li::before{
	content: "";
	width: 13px;
	height: 13px;
	background-color: rgba(0, 86, 70, 0.3);
	border-radius: 50px;
	position: absolute;
	top: 5px;
	left: 0;
}

/*
	consultWrapper
-----------------------------------------------------------------------------------------------*/
#consultWrapper{
	border-top: 1px solid #8A8A8A;
}
#consultWrapper .ctsArea{
	padding-block: 50px;
}
/* tit */
#consultWrapper .titBase{
	font-size: 4.0rem;
}
#consultWrapper .titBase::before{
	content: none;
}
/* lead */
#consultWrapper .lead{
	margin-top: 40px;
}
/* btn */
#consultWrapper .btnArea{
	margin-top: 45px;
}

/*
	footerWrapper
-----------------------------------------------------------------------------------------------*/
#footerWrapper{
	padding: 15px;
	text-align: center;
	color: #fff;
	font-size: 1.4rem;
	background-color: var(--clGreen);
}

@media screen and (max-width:812px){
	body{
		-webkit-text-size-adjust: 100%;
		font-size: 1.4rem;
	}
	img{
		width: 100%;
	}
	p{
		line-height: 150%;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	br.sp{
		display: inline-block;
	}

	/*
		common
	-----------------------------------------------------------------------------------------------*/
	/* box
	============================== */
	/* ctsArea */
	.ctsArea{
		max-width: 500px;
		width: 100%;
		padding-inline: 20px;
	}
	.ctsArea.w1000{
		width: 100%;
	}

	/* btn
	============================== */
	.btnArea{
		margin-top: 30px;
	}
	a.btnBase{
		max-width: 350px;
		width: 100%;
		padding-block: 20px;
		font-size: 1.8rem;
	}
	/* item */
	a.btnBase::before{
		width: 30px;
		height: 30px;
	}
	a.btnBase::after{
		width: 16px;
		height: 8px;
		right: 26px;
	}
	/* item green */
	.btnArea:has(a.btnBase.itemGreen){
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}
	a.btnBase.itemGreen{
		width: 100%;
		padding-block: 18px;
		font-size: 1.8rem;
	}

	/* tit
	============================== */
	.titBase{
		text-align: center;
		font-size: 2.6rem;
	}
	.titBase::before{
		height: 10px;
	}
	.titBase span{
		font-size: 3.4rem;
	}

	/* lead
	============================== */
	.lead{
		margin-top: 30px;
		text-align: justify;
		font-size: 1.5rem;
	}
	
	/*
		swiper
	-----------------------------------------------------------------------------------------------*/
	.swiperBox{
		padding-inline: 15px;
	}
	.swiper{
		height: fit-content;
		margin-top: 20px;
		padding: 10px;
	}

	/* swiper btn
	============================== */
	.swiperBtn[class *= "swiper-button"]{
	width: 15px;
	height: 57px;
	}
	.swiper-button-prev{
		left: -5px;
	}
	.swiper-button-next{
		right: -5px;
	}

	/*
		header
	-----------------------------------------------------------------------------------------------*/
	#headerWrapper .logo{
		padding: 15px 20px;
	}
	#headerWrapper .logo img{
		width: 100px;
	}

	/*
		kvWrapper
	-----------------------------------------------------------------------------------------------*/
	#kvWrapper{
		gap: 25px;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: center;
		min-width: 100%;
        min-height: 630px;
		padding-inline: 20px;
		background: url(../images/bg_kv_sp.png) no-repeat center center / cover;
	}

	/* kvCatchArea
	============================== */
	.kvCatchArea{
		max-width: 500px;
		width: 100%;
		margin-top: 80px;
	}
	/* kvCatch */
	.kvCatch{
		line-height: 250%;
	}
	.kvCatch__gold{
		margin-bottom: 5px;
		padding: 8px 10px;
		font-size: 1.4rem;
	}
	.kvCatch > span:nth-of-type(2){
		font-size: 2.2rem;
	}
	.kvCatch > span:nth-of-type(3){
		font-size: 2.0rem;
	}
	.kvCatch > span:nth-of-type(4){
		font-size: 3.6rem;
	}
	.kvCatch > span:nth-of-type(5){
		font-size: 2.8rem;
	}
	.kvCatch > span:nth-of-type(6){
		/* font-size: 10.66vw; */
		font-size: clamp(3rem, 10.66vw, 4.8rem);
		white-space: nowrap;
	}
	.kvTxt{
		margin-top: 25px;
		font-size: 1.4rem;
	}

	/* bestAward
	============================== */
	.bestAward{
		position: absolute;
		bottom: -240px;
		right: 2%;
	}
	.bestAwardImg{
		width: 100px;
	}
	.bestAwardTxt{
		min-width: 180px;
		padding-block: 30px;
		font-size: 1.0rem;
	}
	/* item */
	.bestAwardTxt::before,
	.bestAwardTxt::after{
		width: 100%;
		height: 21px;
	}

	/* kvImgArea
	============================== */
	.kvImgArea{	
		width: 100%;
		margin-left: -170px;
	}
	/* kvPeople */
	.kvPeople{
		position: relative;
		max-width: 220px;
		height: 100%;
		translate: 0;
		object-position: bottom;
	}

	/*
		painPointWrapper
	-----------------------------------------------------------------------------------------------*/
	#painPointWrapper .ctsArea{
		padding-block: 40px;
	}

		/* tit
	============================== */
	#painPointWrapper .titBase span{
		font-size: 3.2rem;
	}
	#painPointWrapper .lead{
		margin-top: 20px;
	}

	/* list
	============================== */
	.painPointList{
		flex-wrap: wrap;
		gap: 5px;
		justify-content: center;
		margin-top: 20px;
		font-size: 1.2rem;
	}
	.painPointList li{
		max-width: 165px;
		width: calc(100% / 2);
		height: 150px;
		padding: 15px 20px 15px 30px;
	}
	.painPointList li p{
		width: 100%;
		min-height: fit-content;
		padding-bottom: 15px;
	}

	/*
		solutionWrapper
	-----------------------------------------------------------------------------------------------*/
	#solutionWrapper::before{
		width: 100px;
		height: 36px;
	}
	#solutionWrapper .ctsArea{
		padding-block: 60px;
	}

	/* list
	============================== */
	.solutionList{
		flex-direction: column;
		gap: 30px;
		margin-top: 30px;
	}
	.solutionList li{
		padding: 25px 20px;
	}
	.solutionList li:before{
		width: 62px;
		height: 62px;
		font-size: 3.6rem;
		top: -15px;
		left: -12px;
	}
	.solutionList li img{
		margin-bottom: 15px;
	}
	.solutionList li .olTit{
		font-size: 2.6rem;
		letter-spacing: 0.15rem;
	}
	.olTxt{
		margin-top: 10px;
		padding-top: 15px;
		font-size: 1.4rem;
	}
	#solutionWrapper .txt{
		margin-top: 20px;
		text-align: justify;
	}

	/*
		agentWrapper
	-----------------------------------------------------------------------------------------------*/
	#agentWrapper .ctsArea{
		padding-block: 40px 30px;
	}
	/* agentList
	============================== */
	.agentList{
		gap: 20px;
		flex-direction: column;
		width: 100%;
		margin-top: 30px;
	}
	.agentList li{
		width: 100%;
	}
	/* 紹介文 */
	.agentDetailTxt{
		margin-top: 10px;
		padding-top: 10px;
		letter-spacing: 0;
	}

	/*
		caseWrapper
	-----------------------------------------------------------------------------------------------*/
	#caseWrapper .ctsArea{
		padding-block: 30px 40px;
	}

	/* caseArea
	============================== */
	.caseArea{
		gap: 40px;
		flex-direction: column;
		margin-top: 30px;
	}
	/* tit */
	.caseTit{
		margin-bottom: 35px;
		font-size: 2.0rem;
	}
	.caseTit::before{
		margin-right: 10px;
	}
	.caseTit::after{
		margin-left: 10px;
	}

	/* caseList
	============================== */
	.caseList{
		display: flex;
		gap: 25px;
		flex-direction: column;
	}
	.caseList li{
		width: 100%;
		position: relative;
		-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
		filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
	}
	/* 年齢 */
	.age{
		font-size: 1.4rem;
		top: -10px;
		left: -10px;
	}
	/* 仕事 before after */
	.job{
		flex-direction: column;
		height: auto;
	}
	[class*="job__"]{
		flex-direction: column;
		width: 100%;
	}
	.job__before{
		width: 100%;
		padding: 25px 10px;
		text-align: center;
		font-size: 1.8rem;
	}
	.job__after{
		padding: 40px 20px 20px;
	}
	/* item ▶ */
	.job__before::before{
		width: 100%;
		height: 25px;
		clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
		top: auto;
		right: auto;
		bottom: -24px;
		left: 0;
	}
	/* item 文字 */
	.job__before::after,
	.job__after::after{
		font-size: 8.0rem;
	}
	.job__before::after{
		top: 20px;
		left: 10px;
	}
	.job__after::after{
		top: 35px;
		right: 10px;
	}
	/* after詳細文 */
	.jobTxt{
		text-align: center;
		font-size: 1.9rem;
	}
	.jobTxt span{
		margin-top: 15px;
		line-height: 150%;
		text-align: justify;
		font-size: 1.5rem;
	}

	/*
		experienceWrapper
	-----------------------------------------------------------------------------------------------*/
	#experienceWrapper .ctsArea{
		padding-block: 40px 25px;
	}

	/* experienceList
	============================== */
	.experienceList li{
		width: 100%;
		min-height: fit-content;
	}
	.experienceTit{
		flex-direction: column;
		padding: 20px;
		font-size: 1.6rem;
	}
	.experienceTit figcaption{
		width: 100%;
		min-height: 96px;
		margin-top: 10px;
	}
	/* 仕事 before after */
	.experiencejob{
		display: flex;
		flex-direction: column;
	}
	.experiencejob [class*="job__"]{
		width: 100%;
	}
	.experiencejob .job__before{
		/* min-height: 105px; */
		padding: 20px 20px 10px;
	}
	.experiencejob .job__after{
		align-items: flex-start;
		width: 100%;
		min-height: 145px;
		padding: 30px 20px 20px;
	}
	/* item ▶ */
	.experiencejob .job__before::before{
		width: 100%;
		height: 25px;
		clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
		bottom: -25px;
		left: 0;
	}
	/* before after 文字 */
	.experiencejob [class*="job__"] span{
		width: 100%;
		margin-bottom: 8px;
		padding-bottom: 5px;
		font-size: 1.6rem;
	}

	/*
		connectionWrapper
	-----------------------------------------------------------------------------------------------*/
	#connectionWrapper .ctsArea{
		padding-block: 25px 40px;
	}
	#connectionWrapper .ctsArea .titBase{
		font-size: 2.2rem;
	}

	/* swiper
	============================== */
	#connectionWrapper .swiper{
		margin-top: 10px;
	}

	/* connectionList
	============================== */
	.connectionList li{
		display: block;
		width: 100%;
	}
	.connectionBox{
		gap: 25px;
		min-height: 140px;
		padding: 15px 20px;
	}

	/*
		faqWrapper
	-----------------------------------------------------------------------------------------------*/
	#faqWrapper .ctsArea{
		padding-block: 40px;
	}

	/* faqList
	============================== */
	.faqList{
		margin-top: 30px;
		padding: 20px;
	}
	/* 質問 */
	.txtQ{
		padding: 20px 35px 20px 10px;
	}
	.txtQTit{
		padding-left: 30px;
	}
	.txtQTit::before{
		width: 20px;
		height: 25px;
		top: 52%;
	}
	/* icoToggle */
	.icoToggle{
		width: 26px;
		height: 26px;
		right: 5px;
	}
	.txtQ .icoToggle::before,
	.txtQ .icoToggle::after{
		width: 12px;
		top: 12px;
		left: 6px;
	}
	/* 答え */
	.txtA{
		padding: 20px;
		font-size: 1.4rem;
	}
	/* 答え ナンバリング */
	.txtAList{
		counter-reset: txtAList-number 0;
	}
	.txtAList li{
		margin-bottom: 20px;
		padding-left: 20px;
	}
	.txtAList li span{
		margin-bottom: 5px;
	}

	/*
		aboutWrapper
	-----------------------------------------------------------------------------------------------*/
	#aboutWrapper .ctsArea{
		padding-block: 40px 60px;
	}

	/* aboutList
	============================== */
	.aboutList{
		flex-direction: column;
		gap: 30px;
	}
	.aboutList li{
		width: 100%;
	}
	/* tit */
	.aboutListTit{
		margin-bottom: 15px;
		font-size: 2.6rem;
	}
	/* btn */
	.btnList{
		gap: 10px;
		height: fit-content;
		padding: 20px 40px 20px 20px;
	}
	/* btn item */
	.btnList::before{
		width: 30px;
		height: 30px;
		right: 15px;
	}
	.btnList::after{
		width: 16px;
		height: 8px;
		right: 22px;
	}
	/* 内容 */
	.btnList li{
		padding-left: 20px;
		font-size: 1.5rem;
	}
	/* item 内容 */
	.btnList li::before{
		top: 6px;
	}

	/*
		consultWrapper
	-----------------------------------------------------------------------------------------------*/
	#consultWrapper .ctsArea{
		padding-block: 40px;
	}
	/* tit */
	#consultWrapper .titBase{
		line-height: 120%;
		font-size: 2.8rem;
	}
	/* lead */
	#consultWrapper .lead{
		margin-top: 30px;
	}
	/* btn */
	#consultWrapper .btnArea{
		margin-top: 20px;
	}

	/*
		footerWrapper
	-----------------------------------------------------------------------------------------------*/
	#footerWrapper{
		padding: 16px;
		font-size: 1.2rem;
	}
}