@charset "UTF-8";

@media print, screen and (max-width: 1199px) {

#kvWrap {
position: relative;
width: 100vw;
height: 450px;
margin-bottom: 30px;
overflow: hidden;
}

#kvBg {
position: absolute;
width: 100vw;
z-index: 10;
left: 0;
bottom: -1px;
}

#kvWrap h1 {
position: absolute;
font-size: 8.5vw;
font-weight: 700;
color: #fff;
white-space: nowrap;
text-shadow: #000 0 0 20px;
line-height: 1.5;
z-index: 10;
top: 230px;
left: 0;
right: 0;
}

#kvWrap h1 span {
font-size: 4.5vw;
display: block;
margin-top: 10px;
}

#wrapTopCompany {
position: relative;
width: 88%;
margin: 0 auto;
padding: 20px 0 0;
z-index: 1;
}

#wrapTopCompany h2 {
font-size: 7.5vw;
font-weight: 700;
margin-bottom: 30px;
}

#wrapTopCompany h2 span {
color: var(--subColor);
}

#wrapTopCompany p {
line-height: 2.8em;
}

#wrapTopCompanyPhoto {
margin-bottom: 30px;
}

.btn {
position: relative;
background-color: var(--subColor);
font-family: var(--font-primary);
width: 232px;
height: 49px;
font-size: 1.4rem;
font-weight: 500;
text-align: left;
color: #fff;
margin-top: 10px;
padding: 0 0 3px 40px;
cursor: pointer;
border: 1px solid var(--subColor);
border-radius: 100px;
transition: .3s;
}

.btn::after {
position: absolute;
background: url("../img/btn_arrow.svg") no-repeat;
background-size: 39px;
width: 39px;
height: 39px;
content: "";
top: 50%;
left: 98%;
transform: translateY(-50%) translateX(-98%);
}

#wrapTopService,
#wrapTopRecruit {
position: relative;
background: url("../img/title_bg.webp") no-repeat left top;
background-size: 300px;
width: 100%;
}

#wrapTopRecruit {
padding-top: 100px;
}

#wrapTopService::after {
position: absolute;
background: url("../img/index_service_bg.webp") no-repeat;
background-size: 500px;
width: 500px;
height: 500px;
content: "";
margin: auto;
right: -100px;
top: 0;
bottom: -200px;
z-index: -1;
}

.wrap {
width: 88%;
text-align: justify;
margin: 0 auto;
padding: 80px 0;
}

.commonTitle {
font-family: var(--font-quicksand);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 30px;
line-height: 1.5;
}

.commonTitle span {
font-family: var(--font-primary);
font-size: 3rem;
font-weight: 700;
display: block;
}

#characterTopService {
position: absolute;
width: 85px;
z-index: 1;
right: 25px;
top: -50px;
}

.wrapTopService {
position: relative;
background-color: #fff;
width: 100%;
margin: 20px auto;
padding: 25px;
border-radius: 15px;
}

.wrapTopService:first-of-type {
margin: 60px 0 0 auto;
}

.wrapTopServiceL {
width: 100%;
}

.wrapTopServiceR {
position: relative;
width: 100%;
padding-top: 15px;
}

.wrapTopServiceR h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 20px;
}

.btnR {
text-align: right;
}

.btnS {
position: relative;
background: transparent url("../img/btn_s_arrow.svg") no-repeat right;
background-size: 23px;
font-family: var(--font-primary);
width: 105px;
height: 23px;
font-size: 1.4rem;
text-align: left;
color: var(--subColor);
cursor: pointer;
border: 0;
line-height: 1;
transition: .3s;
}

.btnS:hover {
color: var(--txtColor);
}

#wrapWhyChooseUs {
background: url("../img/index_why_bg.webp") no-repeat bottom;
background-size: 100%;
width: 100%;
padding-bottom: 60px;
}

#whyChooseUsFlex {
width: 88%;
margin: 0 auto;
}

.whyChooseUs {
width: 100%;
text-align: center;
margin-bottom: 30px;
}

.whyChooseUs h3 {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin: 15px auto;
margin-bottom: 5px;
line-height: 1.5;
}

#wrapProjectHistory {
width: 100%;
padding: 60px 0;
}

#wrapRecruitFlex {
width: 88%;
text-align: justify;
margin: 0 auto;
}

#wrapRecruitL {
width: 100%;
margin-bottom: 30px;
}

#wrapRecruitL h2 {
}

#wrapRecruitL p  {
margin-bottom: 40px;
}

#wrapRecruitR {
width: 100%;
}

#wrapRecruitBtnR {
text-align: center;
}

#wrapTopNews {
position: relative;
background-color: #fff;
width: 88%;
margin: 0 auto;
margin-top: 120px;
padding: 30px;
border-radius: 10px;
}

#characterTopNews {
position: absolute;
width: 120px;
right: 20px;
top: -90px;
}

#wrapTopNewsInner {
width: 100%;
text-align: justify;
}

.newsWrap {
display: block;
margin: 0 auto;
padding: 20px 0;
border-top: 1px solid #F1EDEB;
}

.newsWrap:last-of-type {
border-top: 1px solid #F1EDEB;
border-bottom: 1px solid #F1EDEB;
}

.newsL {
font-family: var(--font-quicksand);
width: 100%;
color: var(--subColor);
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 5px;
}

.categoryTag {
font-family: var(--font-primary);
width: auto;
height: 22px;
font-size: 1.2rem;
text-align: center;
margin-left: 10px;
padding: 0 7px;
border: 1px solid var(--subColor);
border-radius: 5px;
line-height: 19px;
}

.newsR {
width: 100%;
text-align: justify;
}

#wrapNewsBtnR {
text-align: center;
margin-top: 20px;
}

/**/

#contentsTitleBg {
background: url("../img/contents_title_bg.webp") no-repeat left top;
background-size: 90%;
width: 100%;
}

#wrapContentsTitle {
position: relative;
width: 88%;
text-align: left;
margin: 0 auto;
padding-top: 90px;
line-height: 1.3;
}

#wrapContentsL {
margin-bottom: 30px;
}

#contentsTitle {
font-family: var(--font-quicksand);
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 20px;
}

#contentsTitle span {
font-family: var(--font-primary);
font-size: 3rem;
display: block;
margin-top: 10px;
}

#breadcrumb {
font-size: 1.1rem;
}

#breadcrumb a {
color: var(--subColor);
}

.breadcrumbOr {
position: relative;
width: 5px;
height: 5px;
color: var(--subColor);
margin: 0 5px 0 0;
display: inline-block;
border-top: 1px solid var(--subColor);
border-right: 1px solid var(--subColor);
transform: rotate(45deg);
top: -2px;
}

#contentsNav {
position: relative;
background-color: #fbffe5;
width: 100%;
font-size: 1.3rem;
font-weight: 500;
padding: 20px 25px;
border: 1px solid var(--subColor);
border-radius: 10px;
right: 0;
bottom: 0;
line-height: 2;
}

#contentsNav ul li {
background: url("../img/contents_title_arrow.png") no-repeat left;
background-size: 15px;
padding-left: 20px;
}

#contentsNav #character {
position: absolute;
width: 70px;
right: -20px;
bottom: -37px;
}

#wrapCoTop {
width: 88%;
text-align: center;
margin: 0 auto;
padding: 60px 0;
line-height: 2.5;
}

#wrapCoTop h2 {
font-size: 2.7rem;
font-weight: 700;
margin-bottom: 30px;
line-height: 1.5;
}

#wrapCoTop h2 span {
color: var(--subColor);
}

#wrapCoTop p {
margin-bottom: 30px;
}

#wrapServiceEtcTop {
width: 100%;
}

#wrapServiceEtcTop img {
width: 100%;
}

#wrapServiceEtc {
background-color: var(--themeColor);
width: 100%;
}

.wrapServiceEtc {
position: relative;
width: 88%;
margin: 0 auto;
padding: 0 0 40px;
z-index: 1;
}

.wrapServiceEtc h2,
.wrapManagement h2,
#wrapFlowFlex h2 {
font-family: var(--font-quicksand);
font-size: 1.4rem;
font-weight: 600;
text-align: center;
margin-bottom: 30px;
}

#wrapFlowFlex h2 {
text-align: left;
}

.wrapServiceEtc h2 span,
.wrapManagement h2 span,
#wrapFlowFlex h2 span {
font-family: var(--font-primary);
font-size: 2.8rem;
font-weight: 700;
display: block;
}

.serviceEtcWrap {
position: relative;
background-color: #fff;
width: 100%;
margin-bottom: 20px;
padding: 25px;
border-radius: 12px;
}

.serviceEtcPhoto {
width: 100%;
margin-bottom: 20px;
}

.serviceEtcTxt {
width: 100%;
text-align: justify;
line-height: 1.7;
}

.serviceEtcTxt h3 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 10px;
}

#serviceEtcTxtFrame {
width: 100%;
padding: 15px;
border: 1px solid var(--txtColor);
border-radius: 5px;
}

.serviceEtcFrame {
width: 100%;
border: 1px solid var(--subColor);
border-radius: 15px;
}

.serviceEtcFrame h4 {
background-color: var(--subColor);
width: 93px;
height: 32px;
color: #fff;
text-align: center;
line-height: 29px;
border-radius: 14px 0 14px;
}

.serviceEtcFrame ul {
padding: 15px 25px 25px;
}

.serviceEtcFrame ul li span {
color: var(--subColor);
}

#otherService {
background-color: var(--themeColor);
width: 88%;
margin: 60px auto;
padding: 25px;
border-radius: 20px;
}

#otherService h2 {
position: relative;
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 20px;
padding-top: 5px;
}

#otherService h2::before {
position: absolute;
background-color: var(--subColor);
width: 5px;
height: 5px;
content: "";
margin: auto;
border-radius: 5px;
left: 0;
right: 0;
top: 0;
}

#otherServiceFlex {
}

.otherService {
background-color: #fff;
width: 100%;
font-size: 1.6rem;
font-weight: 500;
margin-bottom: 20px;
padding: 20px;
border-radius: 10px;
line-height: 1;
}

.otherServiceTitleFlex {
margin-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}

.otherServiceTitleFlex .arrow {
width: 20px;
}

/**/

#contentsNav #characterConstruction {
position: absolute;
width: 42px;
right: -15px;
bottom: -37px;
}

#constructionFlex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.construction {
background-color: #fff;
width: 100%;
text-align: left;
margin-bottom: 20px;
padding: 20px 20px 25px;
border-radius: 10px;
line-height: 1;
}

.construction h3 {
font-size: 1.6rem;
font-weight: 500;
margin-top: 15px;
}

/**/

#contentsNav #characterSoil {
position: absolute;
width: 129px;
right: -60px;
bottom: -48px;
}

#soilFlex {
}

.soil {
background-color: #fff;
width: 100%;
text-align: justify;
margin-bottom: 20px;
padding: 20px;
border-radius: 10px;
line-height: 1.6;
}

.soil h3 {
font-size: 2rem;
font-weight: 700;
margin: 12px 0 10px;
line-height: 1.5;
}

.soil h3 span {
font-size: 1.4rem;
display: block;
}

.soil p {
margin-bottom: 0;
}

.soil .txtS {
font-size: 1.2rem;
margin-top: 12px;
}

/**/

#characterSurveying {
position: absolute;
width: 90px;
right: -40px;
bottom: -40px;
}

#wrapServiceSurveying {
width: 88%;
margin: 0 auto;
padding: 0px 0;
}

 #wrapServiceSurveying h2 {
font-family: var(--font-quicksand);
font-size: 1.4rem;
font-weight: 600;
text-align: center;
margin-bottom: 30px;
}

 #wrapServiceSurveying h2 span {
font-family: var(--font-primary);
font-size: 2.8rem;
font-weight: 700;
display: block;
}

/**/

#characterWhy {
position: absolute;
width: 70px;
right: -30px;
bottom: -28px;
}

.wrapServiceEtcWhy {
padding-top: 30px;
}

.whyWrap {
margin-bottom: 30px;
}

.whyIcon {
position: absolute;
width: 70px;
z-index: 1;
left: -15px;
top: -15px;
}

.whyTxt h3 {
color: var(--subColor);
margin-bottom: 15px;
line-height: 1.5;
}

.whyTxt p {
margin-bottom: 0;
}

#wrapProjectBottom {
width: 88%;
margin: 0 auto;
padding: 60px 0 0;
}

 #wrapProjectBottom h2 {
font-family: var(--font-quicksand);
font-size: 1.4rem;
font-weight: 600;
text-align: center;
margin-bottom: 30px;
}

 #wrapProjectBottom h2 span {
font-family: var(--font-primary);
font-size: 2.8rem;
font-weight: 700;
display: block;
}

#projectBottomFlex {
margin-bottom: 30px;
}

.projectBottom {
position: relative;
background-color: #fff;
width: 100%;
text-align: justify;
margin-bottom: 20px;
padding: 30px;
border-radius: 20px;
}

.projectBottom h3 {
font-size: 1.8rem;
margin-bottom: 10px;
line-height: 1.4;
}

.projectBottom dt  {
float: left;
color: var(--subColor);
}

.projectBottom dd  {
padding: 0 0 0 70px;
}

.btnM {
position: relative;
background-color: var(--subColor);
font-family: var(--font-primary);
width: 184px;
height: 49px;
font-size: 1.4rem;
font-weight: 500;
text-align: left;
color: #fff;
padding: 0 0 3px 30px;
cursor: pointer;
border: 1px solid var(--subColor);
border-radius: 100px;
transition: .3s;
}

.btnM::after {
position: absolute;
background: url("../img/btn_arrow.svg") no-repeat;
background-size: 39px;
width: 39px;
height: 39px;
content: "";
top: 50%;
left: 98%;
transform: translateY(-50%) translateX(-98%);
}

/**/

#characterCompany {
position: absolute;
width: 100px;
right: -22px;
bottom: -38px;
}

.wrapManagement {
position: relative;
width: 88%;
margin: 0 auto;
padding: 0 0 60px;
z-index: 1;
}

.ourThoughtWrap {
background-color: #fff;
width: 100%;
text-align: justify;
margin-bottom: 60px;
padding: 30px;
border-radius: 12px;
}

.ourThoughtWrap p {
margin-bottom: 0;
}

.managementWrap {
background-color: #fff;
width: 100%;
padding: 30px;
margin-bottom: 20px;
border-radius: 10px;
}

.managementImg {
width: 100%;
margin-bottom: 20px;
}

.managementTxt {
width: 100%;
text-align: justify;
}

.managementTxt h4 {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 15px;
line-height: 1.5;
}

.managementTxt p {
margin-bottom: 0;
}

.managementTxtFlex {
width: 100%;
text-align: justify;
}

.managementTxtFlex dl {
width: 100%;
}

.managementTxtFlex dt {
float: left;
width: 20px;
text-align: center;
}

.managementTxtFlex dd {
padding: 0 0 0 20px;
}

#managementWrapW {
background-color: #fff;
width: 100%;
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
padding: 30px;
border-radius: 10px;
}

#managementWrapW h3 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 30px;
line-height: 1.5;
}

#managementWrapW h3 span {
color: var(--subColor);
}

#managementWrapWFlex {
}

#managementW {
width: 100%;
}

#wrapMessage {
width: 88%;
text-align: justify;
margin: 0 auto;
padding: 60px 0;
}

#wrapMessageL {
width: 100%;
}

#wrapMessageL h2,
#wrapCompany h2,
#wrapAccess h2,
#wrapMessageReL h2,
#wrapBenefits h2,
#wrapWorkingEnvironment h2 {
font-family: var(--font-quicksand);
font-size: 1.4rem;
font-weight: 600;
text-align: center;
margin-bottom: 30px;
}

#wrapMessageL h2 span,
#wrapCompany h2 span,
#wrapAccess h2 span,
#wrapMessageReL h2 span,
#wrapBenefits h2 span,
#wrapWorkingEnvironment h2 span {
font-family: var(--font-primary);
font-size: 2.8rem;
font-weight: 700;
display: block;
}

#wrapMessageL #name {
width: 220px;
margin: 5px 0 0 auto;
}

#wrapMessageR {
width: 100%;
}

#wrapCompany {
background-color: #fff;
width: 88%;
text-align: left;
margin: 0 auto;
padding: 30px;
border-radius: 20px;
}

#wrapCompany dl {
border-top: 1px solid #F1EDEB;
}

#wrapCompany dl dt {
color: var(--subColor);
padding: 20px 0 0;
}

#wrapCompany dl dd {
padding: 0 0 20px;
border-bottom: 1px solid #F1EDEB;
}

#outline01,
#outline02 ,
#outline03 {
border-top: 0 !important;
}

#outline01 dt {
color: var(--txtColor) !important;
padding: 0 !important;
}

#outline01 dd {
padding: 0 0 0 14px !important;
border-bottom: 0 !important;
}

#outline02 dt {
color: var(--txtColor) !important;
padding: 0 !important;
}

#outline02 dd {
padding: 0 0 0 14px !important;
border-bottom: 0 !important;
}

#outline03 dt {
color: var(--txtColor) !important;
padding: 0 !important;
}

#outline03 dd {
padding: 0 0 0 14px !important;
border-bottom: 0 !important;
}

#wrapHistory {
width: 100%;
text-align: left;
padding: 60px 0;
}

#wrapAccess {
background-color: var(--themeColor);
width: 88%;
margin: 0 auto;
padding: 30px 20px 5px;
border-radius: 20px;
}

#accessFlex {
}

.access {
background-color: #fff;
width: 100%;
min-height: 530px;
text-align: justify;
margin-bottom: 15px;
padding: 20px;
border-radius: 20px;
line-height: 1.5;
}

.access h3 {
font-size: 2rem;
font-weight: 700;
}

.access dt {
float: left;
color: var(--subColor);
padding: 3px 0;
}

.access dd {
padding: 3px 0 3px 65px;
}

.googleMap {
position: relative;
width: 100%;
height: 300px;
margin: 15px auto;
/*padding-top: 80%;*/
overflow: hidden;
border-radius: 10px;
}

.googleMap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/**/

#wrapProjectHistoryCo {
position: relative;
width: 88%;
text-align: justify;
margin: 0 auto;
padding: 60px 0 0;
}

#characterPoject {
position: absolute;
width: 100px;
right: -10px;
top: 65px;
}

#wrapProjectHistoryCo h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid #F1EDEB;
line-height: 1.5;
}

.projectHistoryFlex {
margin-bottom: 30px;
}

.projectHistoryL {
width: 100%;
margin-bottom: 20px;
}

.projectHistoryLPhoto {
width: 100%;
height: 221px;
overflow: hidden;
border-radius: 10px;
}

.projectHistoryLPhoto img {
width: 100%;
height: 221px;
object-fit: cover;
}

.projectHistoryPhotoSFlex {
margin-top: 10px;
display: flex;
justify-content: space-between;
}

.projectHistoryPhotoSFlex div {
width: 48.5% !important;
height: 106px;
overflow: hidden;
border-radius: 10px;
}

.projectHistoryPhotoSFlex div img {
width: 100%;
height: 106px;
object-fit: cover;
}

.projectHistoryR,
.projectHistoryW {
width: 100%;
}

.projectHistoryR .categoryTagP,
.projectHistoryW .categoryTagP {
width: auto;
height: 24px;
font-size: 1.2rem;
text-align: center;
color: var(--subColor);
display: inline-block;
margin-right: 5px;
padding: 0 7px;
border: 1px solid var(--subColor);
border-radius: 5px;
line-height: 21px;
}

.projectHistoryR h3,
.projectHistoryW h3 {
font-size: 1.8rem;
font-weight: 500;
color: var(--subColor);
margin: 14px 0 10px;
}

/**/

#recruitBtnEntry {
position: fixed;
background-color: var(--subColor);
font-family: var(--font-quicksand);
width: 100px;
height: 100px;
font-size: 2.6rem;
font-weight: 700;
text-align: center;
color: #fff;
border-radius: 100px;
line-height: 95px;
z-index: 10;
bottom: -15px;
left: -10px;
}

#characterRecruit {
position: absolute;
width: 80px;
right: -32px;
bottom: -40px;
}

#recruitKv {
width: 100%;
margin-top: 30px;
}

#recruitKv img {
width: 100%;
}

#recruitBottomPhoto {
position: relative;
width: 100%;
margin-top: -60px;
z-index: 1;
}

#recruitBottomPhoto img {
width: 100%;
}

#wrap10ColorsBg {
background: url("../img/recruit_contents_bg.webp") no-repeat left top;
background-size: 90%;
}

#wrap10Colors {
width: 88%;
margin: 0px auto;
padding: 60px 0 30px;
}

#wrap10ColorsL {
width: 100%;
margin-bottom: 30px;
}

#wrap10ColorsR {
width: 100%;
text-align: justify;
}

#wrap10ColorsR h2 {
font-size: 2.7rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.5;
}

#wrap10ColorsR h2 span {
color: var(--subColor);
}

#wrapMessageReFlex {
width: 88%;
margin: 0 auto;
padding-bottom: 60px;
}

#wrapMessageReL {
width: 100%;
text-align: justify;
}

#wrapMessageReL #name {
width: 220px;
margin: 5px 0 0 auto;
}

#wrapMessageReR {
display: none;
}

#wrapMessageReRSp {
width: 100%;
margin-bottom: 30px;
}

#wrapBenefits {
width: 88%;
margin: 0 auto;
padding: 60px 0 0;
}

#benefitsFlex {
}

.benefits {
background-color: #fff;
width: 100%;
text-align: center;
margin-bottom: 20px;
padding: 20px 30px 30px;
border-radius: 20px;
}

.benefits img {
width: 70%;
margin: 0 auto;
margin-bottom: 20px;
}

.benefits h3 {
font-size: 2rem;
font-weight: 500;
text-align: center;
margin-bottom: 10px;
}

.benefits ul {
text-align: left;
}

.benefits ul li span {
color: var(--subColor);
}

#wrapEntry {
background: url("../img/entry_bg.webp") no-repeat right top;
background-size: 90%;
width: 100%;
}

#wrapEntryFlex {
width: 88%;
margin: 0 auto;
padding: 60px 0 0;
}

#wrapEntryL {
width: 100%;
}

#wrapEntryR {
width: 100%;
text-align: left;
}

#wrapEntryR h2 {
font-family: var(--font-quicksand);
font-size: 6rem;
font-weight: 600;
color: var(--subColor);
}

.btnEntry {
position: relative;
background-color: var(--subColor);
font-family: var(--font-primary);
width: 100%;
height: 49px;
font-size: 1.6rem;
font-weight: 500;
text-align: left;
color: #fff;
margin-top: 10px;
padding: 0 0 3px 30px;
cursor: pointer;
border: 1px solid var(--subColor);
border-radius: 100px;
transition: .3s;
}

.btnEntry::after {
position: absolute;
background: url("../img/btn_arrow.svg") no-repeat;
background-size: 39px;
width: 39px;
height: 39px;
content: "";
top: 50%;
left: 98%;
transform: translateY(-50%) translateX(-98%);
}

.btnEntry:hover {
background-color: #fff;
color: var(--subColor);
}

/**/

#characterNumbers {
position: absolute;
width: 84px;
right: -30px;
bottom: -38px;
}

#wrapWorkingEnvironment {
width: 88%;
margin: 0 auto;
padding: 60px 0 0;
}

#wrapWorkingEnvironmentFlex {
}

.workingEnvironment {
position: relative;
background-color: #fff;
width: 90%;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
padding: 40px 20px 30px;
border-radius: 20px;
cursor: pointer;
overflow: hidden;
line-height: 1;
transition: .3s;
}

.workingEnvironmentHover {
position: absolute;
background-color: var(--subColor);
width: 100%;
height: 100%;
text-align: justify;
color: #fff;
content: "";
padding: 40px;
opacity: 0;
transition: .3s;
line-height: 1.7;
z-index: 1;
left: 0;
top: 0;
}

.hoverTitle {
font-size: 1.8rem;
font-weight: 500;
text-align: center;
margin-bottom: 40px;
padding-bottom: 15px;
line-height: 1;
}

.workingEnvironmentHover .numbers,
.workingEnvironmentHover .numbers span {
text-align: center;
color: #fff !important;
margin-top: -40px !important;
margin-bottom: 10px !important;
}

.workingEnvironmentHover .numbersJ {
text-align: center;
color: #fff !important;
margin-top: 40px !important;
margin-bottom: 50px !important;
line-height: .5em;
}

.workingEnvironment:hover .workingEnvironmentHover {
opacity: 1;
}

.workingEnvironment h3 {
font-size: 1.8rem;
font-weight: 500;
text-align: center;
}

.workingEnvironmentImg {
width: 114px;
height: 175px;
margin: 0 auto;
display: table;
}

.workingEnvironment .inner {
display: table-cell;
vertical-align: middle;
}

.workingEnvironment .numbers {
font-family: var(--font-quicksand);
font-size: 6rem;
font-weight: 700;
text-align: center;
color: var(--subColor);
margin-bottom: 15px;
letter-spacing: .05em;
}

.workingEnvironment .numbers span {
font-family: var(--font-primary);
font-size: 1.8rem;
color: var(--txtColor);
margin: 0 5px;
letter-spacing: 0;
}


.workingEnvironment .numbersJ {
font-size: 4rem;
font-weight: 700;
color: var(--subColor);
margin-top: 21px;
margin-bottom: 21px;
}

.workingEnvironment .plus {
position: absolute;
background-color: var(--subColor);
width: 35px;
height: 35px;
border-radius: 15px 0 15px 0;
right: 0;
bottom: 0;
z-index: 2;
transition: .3s;
}

.workingEnvironment:hover .plus  {
background-color: #fff;
}

.workingEnvironment .plus::before {
position: absolute;
background-color: #fff;
width: 12px;
height: 1px;
content: "";
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: .3s;
}

.workingEnvironment .plus::after {
position: absolute;
background-color: #fff;
width: 1px;
height: 12px;
content: "";
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: .3s;
}

.workingEnvironment:hover .plus::before {
opacity: 0;
}

.workingEnvironment:hover .plus::after {
opacity: 0;
}

/**/

#wrapInterviews {
width: 88%;
margin: 0 auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}

.interviews {
position: relative;
width: 100%;
margin-bottom: 20px;
overflow: hidden;
border-radius: 20px;
}

.interviews:nth-of-type(3n) {
margin-right: 0;
}

.interviews:hover .interviewsPhoto img {
transform: scale(1.1);
}

.interviewsTag {
position: absolute;
background-color: var(--subColor);
width: auto;
height: 32px;
font-size: 1.5rem;
color: #fff;
text-align: center;
padding: 0 15px;
border-radius: 0 0 20px 0;
line-height: 30px;
z-index: 1;
left: 0;
top: 0;
}

.interviewsPhoto {
width: 100%;
height: 400px;
overflow: hidden;
}

.interviewsPhoto img {
width: 100%;
height: 400px;
object-fit: cover;
transition: .3s ease-in-out;
}

.interviewsBottom {
position: relative;
background-color: #fff;
width: 100%;
text-align: left;
padding: 26px 30px;
}

.interviewsBottom::after {
position: absolute;
background: url("../img/interviews_arrow.png") no-repeat;
background-size: 23px;
width: 23px;
height: 23px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 26px;
}

.interviewsBottom h3 {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.7;
}

.interviewsBottom h3 span {
font-size: 2rem;
display: block;
}

/**/

#postInterviews {
width: 88%;
text-align: justify;
margin: 60px auto;
}

#interviewsKvFlex {
position: relative;
}

#interviewsEn {
position: relative;
font-family: var(--font-quicksand);
font-size: 14vw;
font-weight: 600;
color: var(--subColor);
line-height: 1.2;
letter-spacing: .05em;
z-index: 1;
}

#interviewsKvDetail {
background-color: #fff;
width: 100%;
padding: 25px 30px;
border-radius: 15px;
}

#interviewsPhotoKv {
position: relative;
width: 100%;
height: 400px;
margin-top: -20px;
margin-bottom: 20px;
overflow: hidden;
border-radius: 20px;
}

#interviewsPhotoKv img {
width: 100%;
height: 400px;
object-fit: cover;
}

#interviewsTagCo {
background-color: var(--subColor);
width: auto;
height: 24px;
font-size: 1.3rem;
color: #fff;
text-align: center;
margin-bottom: 15px;
padding: 0 12px;
display: table;
border-radius: 5px;
line-height: 22px;
}

#interviewsKvDetail h1 {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.7;
}

#interviewsKvDetail h1 span {
font-size: 2rem;
display: block;
}

.postInterviewsFlex {
margin: 40px auto;
}

.postInterviewsL {
width: 100%;
height: 350px;
margin-bottom: 30px;
overflow: hidden;
border-radius: 20px;
}

.postInterviewsL img {
width: 100%;
height: 350px;
object-fit: cover;
}

.postInterviewsR {
width: 100%;
}

.postInterviewsR  h2 {
font-weight: 700;
color: var(--subColor);
margin-bottom: 10px;
}

.postInterviewsR  h2 span {
font-family: var(--font-quicksand);
font-size: 2rem;
font-weight: 600;
margin-right: 10px;
}

#prevNextWrap {
width: 100%;
margin-top: -30px;
display: flex;
justify-content: space-between;
align-items: center;
}

#prevNextWrap a {
color: var(--subColor);
}

.btnPrevWrap,
.btnNextWrap {
position: relative;
width: 30px;
height: 30px;
font-size: 0;
text-indent: -1000px;
top: 5px;
}

.arrowSpP {
background: url("../img/interviews_arrow.png") no-repeat;
background-size: 30px;
width: 30px;
height: 30px;
transform: rotate(180deg);
}

.arrowSpN {
background: url("../img/interviews_arrow.png") no-repeat;
background-size: 30px;
width: 30px;
height: 30px;
}

/**/

#characterJob {
position: absolute;
width: 85px;
right: -25px;
bottom: -42px;
}

#wrapJobTop {
width: 88%;
margin: 50px auto;
margin-bottom: 20px;
}

.wrapJob {
background-color: #fff;
width: 88%;
margin: 0 auto;
margin-top: 20px;
padding: 30px;
border-radius: 20px;
}

.jobWrap {
width: 100%;
text-align: justify;
margin: 0 auto;
}

.jobWrap h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 25px;
}

.jobWrap dl {
border-top: 1px solid #F1EDEB;
}

.jobWrap dt {
color: var(--subColor);
padding: 20px 0 0;
}

.jobWrap dd {
padding: 0 0 20px;
border-bottom: 1px solid #F1EDEB;
}

#wrapFlowFlex {
width: 88%;
text-align: left;
margin: 0 auto;
padding-bottom: 20px;
}

#wrapFlowL {
width: 100%;
}

#wrapFlowR {
position: relative;
width: 100%;
}

#wrapFlowR::before {
position: absolute;
background-color: var(--subColor);
width: 2px;
height: 90%;
content: "";
z-index: 0;
left: 37px;
top: 10px;
}

.stepFlex {
margin-bottom: 30px;
display: flex;
justify-content: space-between;
}

.step {
position: relative;
background-color: var(--subColor);
font-family: var(--font-quicksand);
width: 76px;
height: 76px;
font-size: 1.4rem;
font-weight: 600;
text-align: center;
color: #fff;
padding-top: 17px;
border-radius: 76px;
line-height: 1.2;
z-index: 1;
}

.step span {
font-size: 2rem;
display: block;
}

.stepTxt {
width: 72%;
}

.stepTxt p {
margin-bottom: 10px;
}

.stepTxt h3 {
font-size: 1.8rem;
font-weight: 500;
color: var(--subColor);
}

/**/

#contentsNavNews {
position: relative;
background-color: #fbffe5;
width: 100%;
font-size: 1.3rem;
font-weight: 500;
padding: 20px 25px;
border: 1px solid var(--subColor);
border-radius: 10px;
right: 0;
bottom: 0;
line-height: 2;
}

#contentsNavNews  ul li {
position: relative;
padding-left: 15px;
}

#contentsNavNews ul li a::before {
position: absolute;
width: 9px;
height: 9px;
content: "";
margin: auto;
border: 1px solid var(--subColor);
border-radius: 9px;
top: 9px;
left: 0;
}

#contentsNavNews ul li a.active::before {
background-color: var(--subColor);
}

#characterNews {
position: absolute;
width: 90px;
right: -15px;
bottom: -40px;
}

#wrapNews {
width: 88%;
margin: 0 auto;
padding: 60px 0;
}

/**/

.pageNavi {
font-family: var(--font-quicksand);
margin: 0 auto;
margin-top: 30px;
}

.wp-pagenavi {
position: relative;
font-size: 1.4rem;
font-weight: 500;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
line-height: 32px;
}

.wp-pagenavi .pages {
display: none;
}

.wp-pagenavi .page {
margin: 0 3px;
}

.wp-pagenavi .current {
background-color: var(--subColor);
width: 32px;
height: 32px;
color: #fff;
margin: 0 3px;
display: block;
border-radius: 32px;
}

.wp-pagenavi a,
.wp-pagenavi .extend {
width: 32px;
height: 32px;
color: var(--subColor);
display: block;
border-radius: 32px;
}
.wp-pagenavi .first,
.wp-pagenavi .last {
display: none;
}

.wp-pagenavi a:hover {
background-color: var(--subColor);
color: #fff;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
position: relative;
background: #fff url("../img/btn_prev_arrow.png") no-repeat center;
background-size: 10px;
width: 32px;
height: 32px;
font-size: 0;
text-indent: -1000px;
margin: 0 7px;
border: 1px solid var(--subColor);
}

.wp-pagenavi .nextpostslink {
background: #fff url("../img/btn_next_arrow.png") no-repeat center;
background-size: 10px;
}

.wp-pagenavi a:hover.previouspostslink,
.wp-pagenavi a:hover.nextpostslink {
background-color: #fff;
}

/**/

#breadcrumbNews {
width: 88%;
text-align: left;
margin: 0 auto;
font-size: 1.1rem;
padding-top: 80px;
}

#breadcrumbNews a {
color: var(--subColor);
}

.post {
width: 88%;
text-align: justify;
margin: 0 auto;
margin-top: 50px;
}

#postDate {
width: 100%;
font-family: var(--font-quicksand);
color: var(--subColor);
display: flex;
justify-content: flex-start;
align-items: center;
}

#postTitle {
font-size: 2.5rem;
font-weight: 700;
margin: 30px auto;
margin-top: 20px;
line-height: 1.4;
}

.post h2 {
font-size: 2.2rem;
font-weight: 700;
margin-top: 30px;
margin-bottom: 25px;
padding-bottom: 15px;
line-height: 1.4;
border-bottom: 1.5px solid #F1EDEB
}

.post h3 {
font-size: 2rem;
font-weight: 700;
margin-top: 30px;
margin-bottom: 25px;
padding-left: 15px;
padding-bottom: 4px;
line-height: 1.5;
border-left: 1.5px solid  #F1EDEB;
}

.post h4 {
font-size: 1.8rem;
font-weight: 700;
color:  var(--subColor);
margin-top: 30px;
margin-bottom: 25px;
line-height: 1.5
}

.post ol {
list-style: decimal;
padding-inline-start: 20px;
margin-bottom: 25px;
}

.post ul {
list-style: disc;
padding-inline-start: 20px;
margin-bottom: 25px;
}

#wrapBtnBack {
margin: 0 auto;
margin-top: 30px;
text-align: center;
}

.btnBack {
position: relative;
background-color: var(--subColor);
font-family: var(--font-primary);
width: 184px;
height: 49px;
font-size: 1.5rem;
font-weight: 500;
text-align: right;
color: #fff;
margin-top: 10px;
padding: 0 35px 3px 0;
cursor: pointer;
border: 1px solid var(--subColor);
border-radius: 100px;
transition: .3s;
}

.btnBack::after {
position: absolute;
background: url("../img/btn_arrow_back.svg") no-repeat;
background-size: 39px;
width: 39px;
height: 39px;
content: "";
top: 50%;
left: 2%;
transform: translateY(-50%) translateX(-2%);
}

.btnBack:hover {
background-color: #fff;
color: var(--subColor);
}




















/**/

.accordion {
width: 88%;
text-align: justify;
margin: 0 auto;
}

.accordion ul {
margin: 0 auto;
padding: 0;
}

.accordion li {
position: relative;
background-color: #fff;
width: 100%;
margin-bottom: 20px;
transition: .3s;
border-radius: 10px;
}

.accordion li p:last-child {
margin-bottom: 0;
}

.accordion li h3 {
position: relative;
color: var(--txtColor);
}

.accordion a {
position: relative;
color: var(--subColor);
display: block;
text-decoration: none;
cursor: pointer;
padding: 15px 56px 23px 22px;
transition: .3s;
}

.accordion li .accordion_icon {
display: inline-block;
transition: all .3s;
box-sizing: border-box;
}

.accordion li .accordion_icon {
position: absolute;
width: 15px;
height: 15px;
margin: auto;
top: 14px;
bottom: 0;
right: 24px;
}

.accordion li .accordion_icon span {
position: absolute;
background-color: var(--subColor);
width: 100%;
height: 2px;
border-radius: 10px;
transition: all .3s;
}

.accordion li .accordion_icon span:nth-of-type(1) {
transform: rotate(0deg);
}

.accordion li .accordion_icon span:nth-of-type(2) {
transform: rotate(90deg);
}

.accordion li .accordion_icon.active span:nth-of-type(1) {
display:none;
}

.accordion li .accordion_icon.active span:nth-of-type(2) {
transform: rotate(180deg);
}

.toggle dt {
float: left;
font-family: var(--font-quicksand);
font-size: 2rem;
font-weight: 500;
line-height: 1.9em;
}

.toggle dd {
padding: 7px 0 3px 30px;
}

.faqDetail {
color: var(--txtColor);
display: none;
padding: 0 24px 30px;
overflow: hidden;
}

.faqDetailBorder {
width: 100%;
margin-bottom: 25px;
border-top: 1px solid #F1EDEB;
}

.faqDetail dt {
float: left;
font-family: var(--font-quicksand);
font-size: 2rem;
color: var(--subColor);
font-weight: 500;
line-height: 1.4em;
}

.faqDetail dd {
padding: 0 0 0 30px;
}

/**/

.wrapContact {
background-color: #fff;
width: 88%;
margin: 0 auto;
margin-bottom: 30px;
padding: 0 0 30px;
border-radius: 20px;
}

.wrapEntry {
background-color: #fff;
width: 88%;
margin: 0 auto;
margin-bottom: 30px;
padding: 20px;
border-radius: 20px;
overflow: hidden;
}

.wrapContact h2 {
background-color: var(--subColor);
width: 100%;
height: 83px;
font-size: 2rem;
font-weight: 700;
color: #fff;
margin-bottom: 30px;
border-radius: 20px 20px 0 0;
line-height: 81px;
}

.wrapContact #call span {
background: url("../img/icon_call.svg") no-repeat left center;
background-size: 20px;
font-family: var(--font-quicksand);
font-size: 3.2rem;
font-weight: 700;
padding-left: 30px;
}

.wrapContact dl {
width: 85%;
margin: 0 auto;
text-align: left;
}

.wrapContact dt {
padding: 10px 0 10px;
}

.wrapContact dd {
padding: 0 0 10px;
}

.required {
background-color: var(--subColor);
width: 37px;
height: 22px;
font-size: 1.2rem;
color: #fff;
text-align: center;
margin-right: 10px;
display: inline-block;
border-radius: 5px;
line-height: 20px;
}

.radioWrap {
width: 100%;
}

span.wpcf7-list-item {
display: block;
}

.radioWrap label {
cursor: pointer;
margin-left: -14px;
margin-right: 20px;
}

.radioWrap input[type="radio"]::before {
background-color: var(--txtColor);
width: 9px;
height: 9px;
border-radius: 50%;
bottom: 0;
content: "";
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}

.radioWrap input[type="radio"]:checked::before {
opacity: 1;
}

.radioWrap input[type="radio"] {
position: relative;
appearance: none;
border: 1px solid var(--txtColor);
border-radius: 50%;
width: 15px;
height: 15px;
left: 0;
top: 2px;
margin: 0;
}

.inputArea {
width: 512px;
}

.input {
background-color: #fff;
width: 100%;
height: 55px;
font-size: 1.4rem;
padding: 0 15px;
border: 1px solid #F1EDEB;
border-radius: 8px;
line-height: 52px;
}

textarea {
background-color: #fff;
width: 100%;
height: 250px;
font-size: 1.4rem;
padding: 15px;
border: 1px solid #F1EDEB;
border-radius: 8px;
}

.checkWrap {
position: relative;
text-align: center;
display: table;
margin: 20px auto;
left: -15px;
}

.checkWrap a {
color: var(--subColor);
text-decoration: underline;
}

.checkWrap label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}

.checkWrap input[type="checkbox"] {
margin: 0;
padding: 0;
background: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: flex;
flex-wrap: wrap;
border: none;
}

.checkWrap label::before,
.checkWrap label:has(:checked)::after {
content: '';
}

.checkWrap label::before {
position: relative;
background-color: #fff;
width: 20px;
height: 20px;
border: 1px solid var(--txtColor);
border-radius: 3px;
top: 1px;
}

.checkWrap label:has(:checked)::before {
background-color: #fff;
}

.checkWrap label:has(:checked)::after {
position: absolute;
top: 6px;
left: 6px;
transform: rotate(45deg);
width: 8px;
height: 12px;
border: solid var(--txtColor);
border-width: 0 2px 2px 0;
}

#wrapSubmit {
margin: 40px auto;
text-align: center;
}

.btnSubmit {
position: relative;
background-color: var(--subColor);
font-family: var(--font-primary);
width: 50%;
height: 49px;
font-size: 1.6rem;
font-weight: 500;
text-align: center;
color: #fff;
padding: 0 0 3px;
cursor: pointer;
border: 1px solid var(--subColor);
border-radius: 100px;
}

/**/

#wrapPrivacy {
width: 88%;
text-align: justify;
margin: 0 auto;
padding: 30px 0;
}

#wrapPrivacy h2 {
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 15px;
}

/**/

#wrapContactBottom {
background: url("../img/contact_bottom_bg.png") no-repeat bottom;
background-size: cover;
width: 100%;
margin: 0 auto;
margin-top: 60px;
}

#wrapContact {
position: relative;
background-color: #fff;
width: 92%;
margin: 0 auto;
padding: 30px 20px 120px;
border-radius: 10px;
}

#wrapContact h2 {
font-family: var(--font-quicksand);
font-size: 1.5rem;
font-weight: 600;
color: var(--subColor);
margin-bottom: 30px;
line-height: 1.5;
}

#wrapContact h2 span {
font-family: var(--font-primary);
font-size: 3rem;
font-weight: 700;
display: block;
line-height: 1.5;
}

#wrapContact p {
line-height: 2.5em;
}

.btnW {
position: relative;
background-color: var(--subColor);
font-family: var(--font-primary);
width: 98%;
height: 49px;
font-size: 1.5rem;
font-weight: 500;
text-align: left;
color: #fff;
margin-top: 10px;
padding: 0 0 3px 20px;
cursor: pointer;
border: 1px solid var(--subColor);
border-radius: 100px;
transition: .3s;
}

.btnW::after {
position: absolute;
background: url("../img/btn_arrow.svg") no-repeat;
background-size: 39px;
width: 39px;
height: 39px;
content: "";
top: 50%;
left: 98%;
transform: translateY(-50%) translateX(-98%);
}

.btnW:hover {
background-color: #fff;
color: var(--subColor);
}

#wrapContact #character01,
#wrapContact #character02 {
position: absolute;
width: 67px;
bottom: 0;
}

#wrapContact #character01 {
left: 20px;
}

#wrapContact #character02 {
right: 20px;
}

/**/

footer {
position: relative;
background-color: var(--themeColor);
width: 100%;
text-align: center;
padding: 30px 0 100px;
}

#footerLrFlex {
}

#footerLrFlexContact {
margin-top: -40px;
}

#footerWrap {
width: 88%;
margin: 0 auto;
}

#footerL {
text-align: center;
}

#footerL p {
margin-bottom: 50px;
}

#footerLogo {
width: 200px;
margin: 0 auto;
margin-bottom: 10px;
}

#footerAddress {
margin-bottom: 10px;
}

#footerL ul li {
font-size: 1.2rem;
margin: 0 auto;
margin-bottom: 10px;
display: table;
border-bottom: 0.5px solid #462D13;
}

#copyright {
font-size: 1.2rem;
margin-top: 30px;
}

#footerR {
margin-bottom: 30px;
}

#footerR nav {
margin: 0 auto;
}

#footerR nav ul li {
position: relative;
margin-bottom: 5px;
line-height: 3em;
}

#footerR nav ul li ul li {
margin-bottom: 0;
line-height: 2em;
}

#footerR nav ul li ul li a {
font-size: 1.4rem;
color: #918375;
}

#footerR nav ul li ul li a:hover {
color: var(--subColor);
}

#pagetop {
position: fixed;
background-color: var(--subColor);
font-family: var(--font-quicksand);
width: 67px;
height: 67px;
font-size: 1.1rem;
color: #fff;
padding-top: 30px;
letter-spacing: 0;
border-radius: 67px;
bottom: -67px;
right: 10px;
z-index: 100;
}

#pagetop::before {
position: absolute;
background: url("../img/pagetop_arrow.svg") no-repeat;
background-size: 11px;
width: 11px;
height: 11px;
content: "";
top: 32%;
left: 50%;
transform: translateY(-32%) translateX(-50%);
}

.orderBox { 
display: flex;
flex-direction: column;
}

.order1 { order: 1; }
.order2 { order: 2; }
.order3 { order: 3; }
.order4 { order: 4; }
.order5 { order: 5; }

}