@charset "UTF-8";

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

#kvWrap {
position: relative;
background: url("../img/kv.webp") no-repeat center top;
background-size: cover;
width: 100vw;
height: 100vh;
}

#kvCopy {
position: absolute;
width: 70%;
right: 100px;
top: 30%;
left: 90%;
transform: translateY(-30%) translateX(-90%);
z-index: 1;
}

#kvCopyTxt {
position: absolute;
width: 88%;
font-size: 1.6rem;
font-weight: 500;
text-align: justify;
color: #fff;
margin: auto;
left: 0;
right: 0;
bottom: 140px;
z-index: 1;
text-shadow: #000 1px 0 10px;
}

#kvLogo01 {
position: absolute;
width: 45%;
left: 10px;
bottom: 20px;
z-index: 1;
}

#kvLogo02 {
position: absolute;
width: 45%;
right: 10px;
bottom: 20px;
z-index: 1;
}

/**/

#indexTopWrap {
background: url("../img/index_top_bg.svg") no-repeat top;
background-size: contain;
width: 100%;
margin: 0 auto;
padding: 60px 0;
}

#indexTopWrapInner {
position: relative;
width: 88%;
font-size: 1.7rem;
text-align: justify;
margin: 0 auto;
line-height: 2;
}

#indexTopPhoto {
position: relative;
width: 100%;
margin-bottom: 30px;
}

#indexTopWrapInner h2 {
font-family: var(--font-second);
font-size: 3rem;
font-weight: 500;
color: var(--themeColor);
margin-bottom: 20px;
line-height: 1.5;
}

.btn,
.btnM {
position: relative;
background-color: var(--themeColor);
width: 100%;
height: 80px;
font-size: 1.5rem;
color: #fff;
padding-bottom: 3px;
cursor: pointer;
border-radius: 10px;
border: 1px solid var(--txtColor);
z-index: 2;
transition: .3s;
}

.btnM {
width: 100%;
}

.btn::after,
.btnM::after {
position: absolute;
background: url("../img/btn_arrow_w.svg") no-repeat;
background-size: 30px;
width: 30px;
height: 9px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 10px;
}

.wrap {
width: 88%;
margin: 0 auto;
padding: 60px 0;
}

.indexTitle,
.indexTitleWh {
font-family: var(--font-roboto);
font-size: 3.6rem;
text-align: center;
color: var(--themeColor);
margin-bottom: 30px;
line-height: 1.3;
}

.indexTitleWh {
text-align: left;
color: #fff;
}

.indexTitle span,
.indexTitleWh span {
font-family: var(--font-second);
font-size: 1.5rem;
font-weight: 600;
color: var(--txtColor);
display: block;
}

.indexTitleWh span {
color: #fff;
}

#ourServiceFlex {
margin: 30px auto;
}

.ourService {
background:url("../img/our_service_bg.svg") no-repeat;
background-size: cover;
width: 100%;
text-align: left;
color: #fff;
margin-bottom: 20px;
padding: 35px 30px 40px;
}

.ourService h3 {
font-family: var(--font-robotoCon);
font-size: 3rem;
font-weight: 500;
margin-bottom: 15px;
display: flex;
align-items: center;
line-height: 1;
}

.ourService h3 span {
position: relative;
font-family: var(--font-primary);
font-size: 2rem;
margin-left: 20px;
margin-top: -5px;
}

.btnSs {
position: relative;
background-color: inherit;
width: 110px;
font-family: var(--font-primary);
font-size: 1.4rem;
color: #fff;
text-align: left;
margin-top: 20px;
padding: 0;
cursor: pointer;
border: 0;
}

.btnSs::after {
position: absolute;
background: url("../img/btn_arrow_w.svg") no-repeat;
background-size: 21px;
width: 21px;
height: 6px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 0;
}

#wrapWorksAwards {
background: url("../img/index_works_awards_bg.webp") no-repeat;
background-size: cover;
text-align: left;
color: #fff;
overflow: hidden;
}

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

#worksLineDiagonal {
position: absolute;
background-color: #fff;
width: 1000px;
height: 2px;
z-index: 2;
transform: rotate(-60deg);
left: -470px;
top: 0;
}

#worksLine {
position: absolute;
background-color: #fff;
width: 115%;
height: 2px;
margin: auto;
z-index: 2;
left: -50px;
top: 142px;
}

#worksAwardsFlex {
}

#worksAwardsL {
width: 100%;
margin-bottom: 10px;
}

#worksAwardsL h3 {
font-size: 1.8rem;
margin-bottom: 5px;
}

#worksAwardsLWrap {
background-color: #fff;
color: var(--txtColor);
padding: 20px;
}

#worksAwardsLWrap dt {
float: left;
font-size: 1.6rem;
color: var(--themeColor);
line-height: 1.5;
}

#worksAwardsLWrap dd {
padding: 0 0 0 20px;
}

#worksAwardsLWrap dd h4 {
font-size: 1.6rem;
margin-bottom: 10px;
line-height: 1.5;
}

.btnSss {
position: relative;
background-color: #e6f2ec;
font-family: var(--font-primary);
width: 100%;
height: 40px;
font-size: 1.4rem;
color: var(--txtColor);
text-align: left;
margin-bottom: 10px;
padding: 0 0 2px 20px;
cursor: pointer;
border: 1px solid #e6f2ec;
}

.btnSss::after {
position: absolute;
background: url("../img/btn_sss_arrow.svg") no-repeat;
background-size: 32px;
width: 32px;
height: 32px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 3px;
transition: .3s;
}

#worksAwardsR {
width: 100%;
display: flex;
justify-content: space-between;
}

.worksAwardsRlr {
background-color: #fff;
width: 48%;
font-size: 1.4rem;
color: var(--txtColor);
padding: 10px 10px 20px;
line-height: 1.5;
}

.worksAwardsRlr img {
margin-bottom: 10px;
}

#wrapRecruitNews {
background: url("../img/index_recruit_bg.svg") no-repeat;
background-size: cover;
width: 100%;
}

#wrapRecruitInner {
position: relative;
width: 88%;
margin: 0 auto;
padding: 60px 0 0;
}

#wrapRecruitFlex {
margin-bottom: 120px;
}

#wrapRecruitL {
background: url("../img/index_recruit_dot.svg") no-repeat left 80px;
background-size: 1px;
width: 100%;
text-align: justify;
padding: 0 0 0 30px;
}

#indexRecruitTitle {
position: relative;
width: 188px;
margin-bottom: 20px;
left: -45px;
}

#wrapRecruitL h3 {
font-family: var(--font-second);
font-size: 2.5rem;
font-weight: 500;
margin-bottom: 30px;
line-height: 1.5;
}

#recruitBanner {
position: relative;
width: 100%;
margin: 30px auto;
margin-bottom: 50px;
padding: 10px;
border: 1px solid var(--txtColor);
display: flex;
justify-content: space-between;
align-items: center;
}

#recruitBanner:after {
position: absolute;
background: url("../img/banner_arrow.svg") no-repeat;
background-size: 30px;
width: 30px;
height: 30px;
content: "";
margin: auto;
right: 10px;
top: 0;
bottom: 0;
transition: .3s;
}

#recruitBannerL {
width: 100px;
}

#recruitBannerR {
width: 80%;
font-size: 1.3rem;
padding-left: 10px;
}

#wrapRecruitR {
width: 100%;
}

#recruitTitle {
font-family: var(--font-roboto);
font-size: 4rem;
color: var(--themeColor);
text-align: right;
margin: 10px auto;
}

#wrapRecruitRPhoto {
position: relative;
margin-top: -60px;
}

#wrapNews {
position: relative;
background-color: #eee;
width: 88%;
text-align: justify;
margin: 0 auto;
margin-bottom: -30px;
padding: 30px;
z-index: 1;
}

#newsL {
width: 100%;
}

#newsL h2 {
font-family: var(--font-roboto);
font-size: 1.2rem;
font-weight: 500;
color: var(--themeColor);
margin-bottom: 30px;
line-height: 1.5;
}

#newsL h2 span {
font-family: var(--font-second);
font-size: 3rem;
color: var(--txtColor);
display: block;
}

#newsR {
width: 100%;
}

#newsR .newsFlex {
position: relative;
width: 100%;
padding: 15px 0;
display: block;
border-bottom: 1px solid #b8c1bd;
}

#newsR .newsFlex:after {
position: absolute;
background: url("../img/btn_arrow_g.svg") no-repeat;
background-size: 21px;
width: 21px;
height: 6px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 5px;
transition: .3s;
}

#newsR .newsFlex:hover:after {
right: 0;
}

#newsR .newsL {
font-family: var(--font-roboto);
width: 208px;
font-size: 1.3rem;
font-weight: 500;
color: var(--themeColor);
display: flex;
justify-content: flex-start;
align-items: center;
}

#newsR .newsL .categoryTag {
background-color: #fff;
font-family: var(--font-primary);
width: 110px;
height: 20px;
font-size: 1.1rem;
font-weight: 400;
text-align: center;
margin-left: 15px;
border: 1px solid var(--themeColor);
line-height: 16px;
}

#newsR .newsR {
width: 100%;
padding-right: 60px;
}

#btnNewsList {
position: relative;
background-color: #fff;
font-family: var(--font-primary);
width: 100%;
height: 40px;
font-size: 1.4rem;
color: var(--txtColor);
text-align: left;
margin: 0 0 20px;
padding: 0 0 2px 10px;
display: block;
cursor: pointer;
border: 1px solid #e6f2ec;
}

#btnNewsList::after {
position: absolute;
background: url("../img/btn_sss_arrow.svg") no-repeat;

background-size: 32px;
width: 32px;
height: 32px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 3px;
transition: .3s;
}

#btnNewsList:hover::after {
right: 1px;
}

/**/

#wrapTitle {
position: relative;
width: 100%;
height: 350px;
overflow: hidden;
}

#wrapTitle:after {
position: absolute;
background: rgb(0 0 0 / .3);
width: 100%;
height: 100%;
content: "";
left: 0;
top: 0;
}

#wrapTitleOther {
position: relative;
width: 100%;
height: 290px;
margin-top: 60px;
}

#wrapTitlePrivacy {
position: relative;
width: 100%;
height: 400px;
margin-top: 60px;
}

#contentsTitle {
position: absolute;
font-family: var(--font-roboto);
font-size: 4.2rem;
text-align: left;
color: #fff;
padding-left: 30px;
z-index: 2;
line-height: 1;
left: 0;
bottom: 50px;
}

#contentsTitleWrap {
position: absolute;
width: 88%;
text-align: left;
top: 80%;
left: 50%;
transform: translateY(-80%) translateX(-50%);
}

#contentsTitleOther {
font-family: var(--font-roboto);
font-size: 4.2rem;
text-align: left;
color: var(--themeColor);
margin-bottom: 30px;
line-height: 1;
}

#contentsTitle span,
#contentsTitleOther span {
font-family: var(--font-second);
font-size: 2rem;
font-weight: 600;
display: block;
margin-top: 10px;
}

#contentsTitleOther span {
color: var(--txtColor);
}

#contentsTitle:after {
position: absolute;
background-color: #fff;
width: 20px;
height: 2px;
content: "";
margin: auto;
left: 0;
top: -28px;
bottom: 0;
}

#contentsTitleDiagonal {
position: absolute;
background-color: #fff;
width: 1000px;
height: 2px;
z-index: 2;
transform: rotate(-60deg);
left: -465px;
top: 200px;
}

.bgBusiness {
background: url("../img/bg_business.webp") no-repeat center;
background-size: cover;
}

.bgCompany {
background: url("../img/bg_company.webp") no-repeat center;
background-size: cover;
}

.bgHistory {
background: url("../img/bg_history.webp") no-repeat center;
background-size: cover;
}

.bgWorks {
background: url("../img/bg_works.webp") no-repeat center;
background-size: cover;
}

.bgAwards {
background: url("../img/bg_awards.webp") no-repeat center;
background-size: cover;
}

.bgContact {
background: url("../img/bg_contact.webp") no-repeat center;
background-size: cover;
}

#breadcrumb {
position: relative;
width: 88%;
font-size: 1rem;
text-align: right;
margin: 0 auto;
padding-top: 20px;
z-index: 1;
}

#breadcrumb .breadcrumbLine {
background-color: var(--themeColor);
width: 15px;
height: 1px;
margin: 0 10px;
display: inline-block;
vertical-align: middle;
}

.wrapCoW {
position: relative;
width: 88%;
text-align: justify;
margin: 0 auto;
padding: 40px 0 60px;
}

.contentsTop {
font-size: 1.5rem;
line-height: 2;
}

#wrapBusinessTop {
width: 100%;
padding: 30px 0 0;
}

#wrapBusinessTopL {
width: 100%;
}

#wrapBusinessTopL h2 {
position: relative;
font-family: var(--font-second);
font-size: 2rem;
font-weight: 500;
margin-bottom: 30px;
line-height: 1.4;
}

#wrapBusinessTopL h2 span {
font-size: 3rem;
color: var(--themeColor);
display: block;
margin-top: 20px;
}

#wrapBusinessTopL h2::before {
position: absolute;
background-color: var(--themeColor);
width: 2000px;
height: 1px;
content: "";
left: -2005px;
top: 13px;
}

#businessStrengthsFlex {
}

.businessStrengths {
width: 100%;
text-align: center;
margin-bottom: 20px;
padding: 30px;
border: 1px solid var(--themeColor);
}

.businessStrengths h3 {
font-size: 2rem;
font-weight: 500;
color: var(--themeColor);
}

.businessStrengths p {
margin-bottom: 0;
}

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

#wrapBusinessColor {
background: url("../img/business_bg.svg") no-repeat;
background-size: cover;
}

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

.commonTitle,
.commonTitleL {
position: relative;
font-family: var(--font-second);
font-size: 2.8rem;
font-weight: 500;
text-align: center;
margin-bottom: 40px;
padding-bottom: 20px;
}

.commonTitleL {
text-align: left;
}

.commonTitle::before,
.commonTitleL::before {
position: absolute;
background-color: var(--themeColor);
width: 40px;
height: 1px;
content: "";
margin: auto;
bottom: 0;
left: -44px;
right: 0px;
}

.commonTitleL::before {
margin: 0;
left: 0px;
}

.commonTitle::after,
.commonTitleL::after {
position: absolute;
background-color: #ffc239;
width: 16px;
height: 1px;
content: "";
margin: auto;
bottom: 0;
left: 0px;
right: -20px;
}

.commonTitleL::after {
margin: 0;
left: 44px;
}

.businessContentFlex {
margin-bottom: 30px;
}

.businessContentFlex:last-child {
margin-bottom: -20px;
}

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

.businessContent {
width: 100%;
}

.businessContent h3 {
font-size: 2.2rem;
font-weight: 500;
margin: 20px auto;
padding: 15px 0;
border-top: 2px solid var(--themeColor);
border-bottom: 2px solid var(--themeColor);
}

.businessContent .number {
font-family: var(--font-roboto);
font-size: 5rem;
font-weight: 500;
color: var(--themeColor);
line-height: 1;
}

#wrapBusinessWorks {
position: relative;
background: url("../img/business_bg02.webp") no-repeat center;
background-size: cover;
width: 100%;
color: #fff;
overflow: hidden;
padding: 60px 30px;
}

#wrapBusinessWorks::after {
position: absolute;
background: rgb(0 0 0 / .4);
width: 100%;
height: 100%;
content: "";
left: 0;
top: 0;
}

#wrapBusinessWorks h2 {
position: relative;
font-size: 2.7rem;
font-weight: 500;
margin-bottom: 25px;
line-height: 1.5;
z-index: 2;
}

#wrapBusinessWorks p {
position: relative;
z-index: 2;
}

/**/

#wrapMessage {
background: url("../img/company_bg.svg") no-repeat bottom;
background-size: 100%;
width: 100%;
}

.wrapCoC {
position: relative;
width: 88%;
text-align: justify;
margin: 0 auto;
padding: 40px 0 60px;
}

#messageFlex {
padding: 60px 0;
}

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

#messageR {
width: 100%;;
font-size: 1.6rem;
line-height: 2;
}

#messageR h2 {
font-family: var(--font-roboto);
font-size: 2.2rem;
margin-bottom: 30px;
line-height: 1.5;
}

#messageR h2 span {
font-family: var(--font-second);
font-size: 3.2rem;
font-weight: 500;
color: var(--themeColor);
display: block;
margin-top: 20px;
}

#representative {
font-size: 1.8rem;
margin-top: 50px;
line-height: 1.5;
}

#representative span {
font-size: 3rem;
display: block;
}

#wrapOutline {
background: url("../img/company_outline_bg.svg") no-repeat center;
background-size: cover;
width: 100%;
padding: 60px 0;
}

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

#outlineL {
width: 100%;
}

#outlineR {
width: 100%;
padding-left: 30px;
border-left: 2px solid var(--themeColor);
}

#outlineR dl {
}

#outlineR dt {
padding: 20px 0 0;
}

#outlineR dt:first-child {
padding: 0;
}

#outlineR dd {
padding: 0 0 20px;
border-bottom: 1px solid #b7b7b7;
}

#accessFlex {
margin-top: 30px;
}

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

.googleMap {
position: relative;
width: 100%;
padding-top: 100%;
height: 0;
}

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

#accessR {
width: 100%;
}

#accessR h3 {
color: var(--themeColor);
margin-bottom: 10px;
}

/**/

#wrapHistory {
background: url("../img/history_bg.webp") no-repeat center;
background-size: cover;
width: 100%;
}

#wrapHistoryInner {
width: 88%;
font-size: 1.6rem;
margin: 0 auto;
padding: 40px 0 60px;
}

.historyFlex {
margin: 0 auto;
margin-top: 30px;
}

.historyL {
position: relative;
font-size: 2.4rem;
font-weight: 600;
color: var(--themeColor);
line-height: 1;
}

.historyL span {
position: relative;
font-family: var(--font-robotoCon);
width: 100%;
font-size: 5rem;
font-weight: 500;
top: 7px;
}

.historyL em {
position: relative;
font-family: var(--font-robotoCon);
font-weight: 500;
font-size: 2.6rem;
top: 1px;
}

.historyR {
position: relative;
background-color: #fff;
width: 100%;
font-size: 1.4rem;
font-weight: 500;
text-align: left;
margin-top: 20px;
padding: 10px 25px;
border-radius: 100px;
line-height: 1.5;
}

.historyR::before {
position: absolute;
background-color: var(--txtColor);
width: 64px;
height: 1px;
content: "";
margin: auto;
top: 0;
bottom: 0;
left: -55px;
}

/**/

#worksTxtTop {
font-size: 1.5rem;
text-align: center;
margin-bottom: 40px;
line-height: 2;
}

#worksTxt {
font-size: 1.5rem;
text-align: center;
margin-bottom: 30px;
line-height: 2;
}

#worksImg {
width: 100%;
margin: 0 auto;
}

#wrapWorksList {
background: url("../img/works_list_bg.webp") repeat-y;
background-size: 100%;
width: 100%;
}

#worksListFlex {
}

#worksListL {
width: 100%;
color: #fff;
margin-bottom: 30px;
}

#worksListL h2 {
font-family: var(--font-second);
font-size: 2.8rem;
font-weight: 500;
margin-bottom: 10px;
}

#worksListR {
width: 100%;
}

.accordion {
width: 100%;
margin-bottom: 30px;
}

.accordion li {
position: relative;
width: 100%;
margin-bottom: 15px;
}

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

.toggle {
position: relative;
background-color: var(--themeColor);
width: 100%;
height: 56px;
display: block;
padding: 0 20px;
cursor: pointer;
border: 1px solid #fff;
line-height: 52px;
}

.toggle h3 {
position: relative;
font-size: 1.6rem;
font-weight: 600;
color: #fff;
}

.accordion_icon {
position: absolute;
background-color: #fff;
width: 54px;
height: 54px;
margin: auto;
top: 0;
right: 0;
}

.accordion_icon .arrow {
position: absolute;
width: 14px;
height: 14px;
margin: auto;
display: block;
transition: all .3s;
border-right: 3px solid var(--themeColor);
border-bottom: 3px solid var(--themeColor);
transform: rotate(45deg);
left: 0;
right: 0;
top: -10px;
bottom: 0;
}

.accordion_icon.active .arrow {
transform: rotate(-135deg);
top: 0;
bottom: 0;
}

.accordionDetail {
position: relative;
background-color: #fff;
color: var(--txtColor);
display: none;
padding: 5px 20px 25px;
line-height: 1.5;
}

.worksDetailFlex {
padding: 15px 0;
border-bottom: 1px solid #b7b7b7;
}

.worksDetailR {
background-color: #e6f2ec;
min-width: 90px;
height: 28px;
font-size: 1.1rem;
text-align: center;
color: var(--themeColor);
margin-top: 7px;
padding: 0 10px;
display: table;
border: 1px solid var(--themeColor);
line-height: 25px;
}

.accordionDe li {
position: relative;
width: 100%;
margin: 0 auto;
}

.toggleDe {
position: relative;
background-color: #fff;
width: 90%;
height: 56px;
display: block;
margin: 0 auto;
padding: 0 20px;
cursor: pointer;
border-radius: 10px;
line-height: 54px;
}

.toggleDe h3 {
position: relative;
font-size: 1.5rem;
color: var(--txtColor);
text-align: center;
}

.accordion_iconDe {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 40px;
}

.accordion_iconDe .arrow {
position: absolute;
width: 14px;
height: 14px;
margin: auto;
display: block;
transition: all .3s;
border-right: 3px solid var(--themeColor);
border-bottom: 3px solid var(--themeColor);
transform: rotate(45deg);
left: 0;
right: 0;
top: -10px;
bottom: 0;
}

.accordion_iconDe.active .arrow {
transform: rotate(-135deg);
top: 0;
bottom: 0;
}

.accordionDeDetail {
position: relative;
display: none;
padding-top: 30px;
}

.accordionDeDetail li  {
margin-bottom: 15px;
}

/**/

#wrapAwards {
background: url("../img/awards_bg.webp") no-repeat center top;
background-size: contain;
width: 100%;
}

#awardsTxt {
font-size: 1.5rem;
text-align: center;
margin-bottom: 60px;
line-height: 2;
}

#awardsFlex {
}

.awards {
width: 100%;
text-align: center;
margin-bottom: 20px;
padding: 10px;
border: 1px solid var(--themeColor)
}

.awards img {
width: auto;
height: 130px;
margin: 20px auto;
margin-bottom: 0;
}

.awards h3 {
font-size: 1.5rem;
color: var(--themeColor);
margin: 20px auto;
line-height: 1.6;
}

/**/

#wrapTitleRecruit {
position: relative;
background: url("../img/bg_recruit.webp") no-repeat center;
background-size: cover;
width: 100%;
margin-top: 60px;
padding-bottom: 60px;
}

#wrapTitleRecruitTriangle {
position: absolute;
background: url("../img/bg_recruit_triangle.webp") no-repeat top right;
background-size: 75%;
width: 100%;
height: 986px;
z-index: 1;
top: 0;
right: 0;
}

#recruitTitleWrap {
position: relative;
width: 88%;
margin: 0 auto;
z-index: 2;
}

#recruitTitleL {
width: 100%;
font-size: 1.5rem;
text-align: justify;
margin-bottom: 30px;
line-height: 2;
}

#recruitTitleL h1 {
font-family: var(--font-roboto);
font-size: 3rem;
color: var(--themeColor);
margin-bottom: 30px;
line-height: 1.5;
}

#recruitTitleL h1 span {
font-family: var(--font-second);
font-size: 1.5rem;
font-weight: 600;
color: var(--txtColor);
display: block;
}

#recruitTitleL h2 {
font-family: var(--font-second);
font-size: 2.3rem;
font-weight: 500;
margin-bottom: 30px;
line-height: 1.5;
}

#titleBottomUl {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}

#titleBottomUl li {
background-color: #fff;
width: auto;
height: 35px;
font-size: 1.3rem;
color: var(--themeColor);
text-align: center;
margin: 0 5px 5px 0;
padding: 0 15px;
border: 1px solid var(--themeColor);
border-radius: 100px;
line-height: 31px;
}

#recruitTitleR {
width: 40%;
margin: 0 auto;
}

#recruitTopBanner {
position: relative;
width: 88%;
margin: 0 auto;
margin-top: 30px;
z-index: 2;
}

#wrapNumber {
background: var(--themeColor);
width: 100%;
font-size: 1.4rem;
text-align: center;
color: #fff;
margin-bottom: 30px;
padding: 30px 20px;
border-radius: 20px;
}

#wrapNumber h2 {
font-family: var(--font-second);
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 15px;
line-height: 1.2;
}

#wrapNumber h2 span {
font-size: 3rem;
font-weight: 500;
display: block;
margin-top: 15px;
}

.btnRe,
.btnReW,
.btnReM {
position: relative;
font-family: var(--font-primary);
background-color: #fff;
width: 100%;
height: 64px;
font-size: 1.4rem;
text-align: left;
color: var(--txtColor);
padding-left: 15px;
padding-bottom: 3px;
cursor: pointer;
border: 1px solid var(--txtColor);
transition: .3s;
}

.btnRe::after,
.btnReW::after,
.btnReM::after {
position: absolute;
background: url("../img/btn_arrow_re.svg") no-repeat;
background-size: 28px;
width: 28px;
height: 28px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 10px;
}

.wrapRecruitFlex {
position: relative;
width: 100%;
margin-bottom: 20px;
padding: 20px;
border: 1px solid var(--txtColor)
}

.wrapRecruitFlex:last-of-type {
margin-bottom: 0;
}

.wrapRecruitFlex .subTitle {
position: absolute;
width: auto;
height: 36px;
left: -12px;
top: 13px;
}

.wrapRecruitFlex .subTitle img {
height: 36px;
}

.wrapRecruitL {
width: 100%;
}

.wrapRecruitL2 {
width: 100%;
}

.wrapRecruitL h2,
.wrapRecruitL2 h2 {
font-family: var(--font-second);
font-size: 2.2rem;
font-weight: 500;
text-align: left;
margin-bottom: 15px;
line-height: 1.5;
letter-spacing: .01em;
}

.wrapRecruitL2 h2 span {
letter-spacing: -.35em;
}

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

/**/

.wrapColor {
background: var(--themeColor) url("../img/bg_pattern.svg") repeat;
background-size: 150px;
width: 100%;
}

#crosstalkX {
position: absolute;
width: 28%;
z-index: 1;
right: 0;
top: 60px;
}

#wrapBreadcrumb {
width: 100%;
padding-top: 60px;
}

#wrapBreadcrumb #breadcrumb {
color: #fff;
}

#wrapBreadcrumb #breadcrumb a {
color: #fff;
}

#wrapBreadcrumb .breadcrumbLine {
background-color: #fff;
}

#contentsTitleEn {
position: relative;
font-family: var(--font-roboto);
font-size: 2.2rem;
font-weight: 400;
color: #fff;
text-align: left;
margin-top: 10px;
}

#contentsTitleEn::before {
position: absolute;
background-color: #fff;
width: 1000px;
height: 1px;
content: "";
margin: auto;
left: -1005px;
top: 0;
bottom: 0;
}

#contentsTitleWrapCo {
width: 88%;
font-size: 1.7rem;
font-weight: 500;
text-align: left;
margin: 0 auto;
padding-bottom: 10px;
}

#contentsTitleWrapCo h1 {
font-family: var(--font-second);
font-size: 3rem;
font-weight: 500;
color: #fff;
margin-top: 10px;
margin-bottom: 20px;
line-height: 1.5;
}

#crosstalkKvContainer {
width: min(100%, 88%);
margin: 0 auto;
}

#crosstalkKvInner {
width: calc(100% + (100vw - 100%) / 2);
}

#crosstalkKv {
width: 100%;
}

#crosstalkKv img {
width: 100%;
}

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

#wrapCrosstalkArea01 {
position: relative;
width: 100%;
margin: 0 auto;
/*padding: 57vh 0;*/
padding: 60px 0;
}

#wrapCrosstalk {
position: relative;
/*position: absolute;*/
width: 88%;
margin: 0 auto;
/*top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);*/
}

#wrapCrosstalkL {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}

.crosstalkGroup {
position: relative;
width: 46%;
text-align: justify;
}

.crosstalkGroup:nth-of-type(2) {
top: 30px;
}

.crosstalkGroup h3 {
font-size: 1.7rem;
margin: 20px 0 15px;
line-height: 1.7;
}

.crosstalkGroup h3 span {
font-size: 2.2rem;
color: #fff;
display: block;
}

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

#wrapCrosstalkR h2 {
font-family: var(--font-second);
font-size: 2.2rem;
font-weight: 500;
color: #fff;
margin-bottom: 10px;
}

#wrapCrosstalkArea02 {
position: relative;
background-color: #fff;
width: 100%;
margin: 0 auto;
padding: 60px 0;
}

.crosstalkTheme {
position: relative;
width: 100%;
}

.crosstalkThemeL,
.crosstalkThemeLw {
width: 88%;
text-align: justify;
margin: 0 auto;
}

.crosstalkThemeLw {
width: 88%;
margin: 0 auto
}

.crosstalkThemeL h3,
.crosstalkThemeLw h3 {
width: 80%;
margin-bottom: 30px;
}

.crosstalkThemeL h4,
.crosstalkThemeLw h4 {
font-family: var(--font-second);
font-size: 2.2rem;
font-weight: 500;
color: var(--themeColor);
margin-bottom: 30px;
line-height: 1.5;
}

.crosstalkThemeLw dl {
width: 100%;
}

.crosstalkThemeL dt,
.crosstalkThemeLw dt {
position: relative;
float: left;
top: .1em;
}

.crosstalkThemeL dt .name01,
.crosstalkThemeL dt .name02,
.crosstalkThemeLw dt .name01,
.crosstalkThemeLw dt .name02 {
background-color: var(--themeColor);
width: 60px;
height: 24px;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
color: #fff;
line-height: 22px;
}

.crosstalkThemeL dt .name02,
.crosstalkThemeLw dt .name02 {
background-color: #757675;
}

.crosstalkThemeL dd,
.crosstalkThemeLw dd {
padding: 0 0 0 80px;
}

.crosstalkThemeR {
width: 88%;
margin: 0 auto;
}

#wrapCrosstalkArea03 {
position: relative;
background-color: #E6F2EC;
width: 100%;
margin: 0 auto;
padding: 60px 0;
}

#wrapCrosstalkArea04 {
position: relative;
background-color: #fff;
width: 100%;
margin: 0 auto;
padding: 60px 0;
}

.crosstalkThemePhoto {
width: 88%;
margin: 0 auto;
}

/**/

#dataFacts {
position: absolute;
width: 32%;
right: 0;
top: 60px;
}

#dataFactsTitle {
font-size: 4rem !important;
line-height: 1.3 !important;
}

#dataFactsFlex {
position: relative;
width: 88%;
margin: 0 auto;
padding-bottom: 40px;
z-index: 1;
}

.dataFacts {
width: 100%;
margin-bottom: 15px;
}

/**/

#wrapOurWorks01 {
background: url("../img/our_works_bg01.svg") no-repeat;
background-size: 100%;
}

#wrapOurWorks01 #breadcrumb {
color: var(--txtColor);
}

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

#wrapOurWorks01 .breadcrumbLine {
background-color: var(--themeColor);
}

#ourWorksTitle {
font-size: 3rem !important;
color: var(--themeColor) !important;
}

#wrapOurWorks01 #contentsTitleEn {
color: var(--txtColor);
}

#wrapOurWorks01 #contentsTitleEn::before {
background-color: var(--themeColor);
}

#wrapOurWorks01 p {
font-weight: 400;
}

#ourWorksFlex {
}

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

#ourWorksR {
width: 60%;
margin: 0 auto;
}

.wrapOurWorks {
width: 88%;
font-size: 1.5rem;
margin: 0 auto;
padding: 60px 0 0;
}

.commonsSubTitleCe,
.commonsSubTitleL,
.commonsSubTitleLw,
.commonsSubTitleS {
position: relative;
background-color: var(--themeColor);
width: 80%;
font-family: var(--font-second);
font-size: 1.6rem;
font-weight: 500;
height: 32px;
text-align: center;
color: #fff;
margin: 0 auto;
margin-bottom: 40px;
border-radius: 100px;
line-height: 29px;
}

.commonsSubTitleLw {
width: 100%;
height: auto;
padding: 5px 0;
line-height: 1.3;
}

.commonsSubTitleCe::after,
.commonsSubTitleL::after,
.commonsSubTitleLw::after,
.commonsSubTitleS::after {
position: absolute;
font-size: 1.6rem;
font-weight: 700;
color: var(--txtColor);
content: "／";
margin: auto;
left: 0;
right: 0;
bottom: -30px;
}

.commonTitleCe {
font-family: var(--font-second);
font-size: 2.6rem;
font-weight: 500;
margin-bottom: 30px;
line-height: 1.5;
}

#jobDescriptionFlex {
margin-top: 30px;
}

.jobDescription {
background: url("../img/our_works_bg02.svg") repeat-y;
background-size: cover;
width: 100%;
font-size: 1.4rem;
text-align: justify;
color: #fff;
margin-bottom: 20px;
}

.jobDescriptionInner h3 {
font-size: 2rem;
font-weight: 500;
margin-bottom: 43px;
line-height: 1;
}

.jobDescriptionInner {
background: url("../img/our_works_bg02.svg") repeat-y;
background-size: cover;
padding: 23px;
}

.jobDescriptionInner p {
margin-bottom: 0;
}

#wrapOurWorks02 {
background: url("../img/our_works_bg03.svg") no-repeat;
background-size: 100%;
}

#wrapOurWorksSchedule {
width: 88%;
font-size: 1.5rem;
margin: 0 auto;
padding: 60px 0 0;
}

.scheduleFlex {
margin: 0 auto;
margin-bottom: 20px;
}

.scheduleL {
position: relative;
font-family: var(--font-roboto);
width: 100%;
font-size: 3rem;
font-weight: 500;
margin-bottom: 20px;
padding-bottom: 30px;
}

.scheduleL::after {
position: absolute;
background-color: var(--txtColor);
width: 1px;
height: 30px;
content: "";
margin: auto;
left: 0;
right: 0;
bottom: 0;
}

.scheduleR {
background-color: #fff;
width: 100%;
font-size: 1.4rem;
text-align: justify;
padding: 25px;
border: 1px solid var(--txtColor);
overflow: hidden;
line-height: 1.6;
}

.scheduleR h3 {
font-size: 1.7rem;
color: var(--themeColor);
margin-bottom: 8px;
line-height: 1;
}

.scheduleR p {
margin-bottom: 0;
}

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

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

#wrapEducationCareer {
width: 88%;
font-size: 1.5rem;
text-align: center;
margin: 0 auto;
padding: 60px 0 30px;
}

#stepWrapFlex {
margin-top: 30px;
}

.stepWrap {
position: relative;
width: 100%;
font-size: 1.4rem;
text-align: justify;
padding: 25px 30px;
border-top: 4px solid var(--themeColor);
}

.stepWrap::before {
position: absolute;
background-color: var(--themeColor);
width: 4px;
height: 90px;
content: "";
left: 0;
top: 0;
}

.stepWrap .step {
font-family: var(--font-roboto);
font-size: 2.6rem;
font-weight: 500;
color: var(--themeColor);
margin-bottom: 20px;
line-height: 1;
}

.stepWrap .step span {
margin-left: 15px;
}

.stepWrap h3 {
font-family: var(--font-second);
font-size: 2rem;
font-weight: 500;
margin-bottom: 15px;
line-height: 1.5;
}

/**/

#wrapLifeSupport {
width: 88%;
text-align: justify;
margin: 60px auto;
margin-bottom: 0;
padding: 30px;
border: 1px solid var(--txtColor);
}

#lifeSupportL {
width: 100%;
text-align: center;
margin-bottom: 20px;
}

#lifeSupportL p {
text-align: justify;
}

#lifeSupportBottom {
background-color: #E6F2EC;
font-size: 1.6rem;
text-align: justify;
color: var(--themeColor);
padding: 20px;
}

#lifeSupportR {
width: 100%;
}

#wrapDormitoryFeatures {
width: 88%;
font-size: 1.5rem;
margin: 0 auto;
padding: 60px 0 0;
}

#dormitoryFeaturesFlex {
margin-top: 30px;
}

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

.dormitoryFeaturesWrap {
background-color: #E6F2EC;
font-size: 1.4rem;
text-align: justify;
margin-bottom: 20px;
padding: 30px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

.dormitoryFeaturesWrap .iconL {
width: 80px;
}

.dormitoryFeaturesWrap .iconR {
width: 70%;
padding-left: 20px;
}

.dormitoryFeaturesWrap .iconR h3 {
font-family: var(--font-second);
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 10px;
line-height: 1;
}

.dormitoryFeaturesWrap .iconR p {
margin-bottom: 0;
}

#wrapLifeSupportM {
background: url("../img/life_support_bg.svg") no-repeat top;
background-size: 100%;
width: 100%;
}

#wrapLifeSupport2 {
width: 88%;
font-size: 1.5rem;
text-align: center;
margin: 0 auto;
padding: 60px 0;
}

#wrapLifeSupport2 p {
text-align: justify;
margin-bottom: 30px;
}

#wrapLifeSupportL {
width: 100%;
}

#bicycleWrap {
position: relative;
background-color: #eee;
width: 100%;
font-size: 1.4rem;
text-align: justify;
padding: 30px 30px 10px;
}

#bicycleWrap h3 {
font-family: var(--font-second);
font-size: 2rem;
font-weight: 500;
color: var(--themeColor);
margin-bottom: 10px;
line-height: 1.5;
}

#wrapLifeSupport3 {
width: 88%;
font-size: 1.4rem;
text-align: justify;
margin: 0 auto;
padding: 0 0 60px;
}

#lifeSupport3Flex {
}

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

#lifeSupport3R {
width: 100%;
text-align: center;
}

#lifeSupport3R p {
text-align: justify;
margin-bottom: 0;
}

/**/

#wrapInterviews01 {
background: url("../img/our_works_bg01.svg") no-repeat;
background-size: 100%;
width: 100%;
}

#wrapInterviews01 #breadcrumb {
color: var(--txtColor);
}

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

#wrapInterviews01 .breadcrumbLine {
background-color: var(--themeColor);
}

#wrapInterviews01 #contentsTitleEn {
color: var(--txtColor);
}

#wrapInterviews01 #contentsTitleEn::before {
background-color: var(--themeColor);
}

#wrapInterviews01 p {
font-weight: 400;
}

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

#interviewsVoiceImg {
width: 150px;
margin: 0 auto;
margin-bottom: 30px;
}

.interviewsVoice {
position: relative;
width: 100%;
margin-bottom: 30px;
}

.interviewsVoiceTopPhoto {
width: 100%;
height: 440px;
overflow: hidden;
margin-bottom: 30px;
}

.interviewsVoiceTopPhoto img {
width: 100%;
height: 440px;
object-fit: cover;
}

.interviewsVoice h3 {
position: relative;
font-family: var(--font-second);
font-size: 2.2rem;
font-weight: 500;
text-align: justify;
margin: 30px auto;
line-height: 1.5;
}

.quotationmarksT {
position: absolute;
background: url("../img/interviews_img02.png") no-repeat;
background-size: contain;
width: 42px;
height: 39px;
z-index: 1;
left: -10px;
top: 410px;
}

.interviewsVoice h3::after {
position: absolute;
background: url("../img/interviews_img03.png") no-repeat;
background-size: contain;
width: 42px;
height: 39px;
content: "";
z-index: 1;
right: -10px;
bottom: -50px;
}

.interviewsVoiceJoining {
background-color: var(--themeColor);
width: 110px;
height: 30px;
text-align: center;
color: #fff;
line-height: 27px;
}

.interviewsVoiceName {
text-align: left;
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

.interviewsVoiceName span {
font-size: 2.5rem;
font-weight: 500;
width: 200px;
}

.interviewsVoiceArrow {
width: 32px;
}

#wrapInterviews02 {
background-color: #757675;
width: 100%;
}

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

#interviewsCrosstalkL {
width: 100%;
font-size: 1.6rem;
text-align: justify;
color: #fff;
margin-bottom: 30px;
}

#interviewsCrosstalkSubTitle {
position: relative;
font-family: var(--font-second);
font-size: 1.8rem;
font-weight: 500;
color: #fff;
text-align: left;
margin-bottom: 20px;
}

#interviewsCrosstalkSubTitle::before {
position: absolute;
background-color: #fff;
width: 2000px;
height: 1px;
content: "";
margin: auto;
left: -2010px;
top: 0;
bottom: 0;
}

#interviewsCrosstalkL h2 {
font-family: var(--font-second);
font-size: 3rem;
font-weight: 500;
margin-bottom: 30px;
letter-spacing: 0;
line-height: 1.5;
}

#interviewsCrosstalkR {
width: 100%;
}

/**/

#wrapInterviewsCo {
background: url("../img/interviews_bg.svg") no-repeat top;
background-size: 100%;
width: 100%;
}

#wrapInterviewsCo #breadcrumb {
color: var(--txtColor);
}

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

#wrapInterviewsCo .breadcrumbLine {
background-color: var(--themeColor);
}

#wrapInterviewsCo #contentsTitleEn {
color: var(--txtColor);
}

#wrapInterviewsCo #contentsTitleEn::before {
background-color: var(--themeColor);
}

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

#interviewsTitleWrapInner {
width: 100%;
text-align: justify;
margin: 40px auto;
}

#interviewsCoL {
width: 100%;
margin-bottom: 40px;
}

#interviewsCoTitle {
font-family: var(--font-second);
font-size: 3rem;
font-weight: 500;
color: var(--themeColor);
margin-top: -30px;
margin-bottom: 20px;
line-height: 1.5;
}

#interviewsDetail {
position: relative;
background: #fff;
width: 100%;
margin: 30px auto;
padding: 30px;
line-height: 1.5;
box-shadow: 0 0 20px #eee;
}

#profile {
font-family: var(--font-roboto);
font-size: 1.4rem;
margin-bottom: 5px;
}

.profileFlex {
padding:  10px 0 15px;
border-bottom: 1px dotted #707070;
align-items: center;
}

.profileL {
width: 100%;
}

.profileR {
width: 100%;
}

.profileL span,
.profileR span {
color: var(--themeColor);
}

#hobby {
font-size: 1.6rem;
color: var(--themeColor);
margin-top: 15px;
margin-bottom: 5px;
}

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

#interviewsCoRPhoto {
width: 100%;
height: 460px;
overflow: hidden;
}

#interviewsCoRPhoto img {
width: 100%;
height: 460px;
object-fit: cover;
}

#interviewsCoJobtype {
position: absolute;
background: url("../img/interviews_img05.png") no-repeat;
background-size: contain;
width: 159px;
height: 47px;
color: #fff;
text-align: center;
line-height: 32px;
z-index: 1;
left: -15px;
top: 440px;
}

#interviewsCoJobtype span {
margin-left: -20px;
}

#interviewsCoName {
font-size: 3rem;
font-weight: 500;
margin-top: 20px;
}

#interviewsCoJoining {
font-size: 1.6rem;
font-weight: 500;
color: var(--themeColor);
}

.interviewsQ {
font-family: var(--font-roboto);
font-size: 7rem;
font-weight: 100;
color: var(--themeColor);
margin-bottom: -20px;
}

.interviewsCoWrap {
width: 100%;
text-align: justify;
padding: 60px 0 0;
line-height: 2;
}

.interviewsCoTitle {
font-family: var(--font-second);
font-size: 2.6rem;
font-weight: 500;
margin-bottom: 30px;
line-height: 1.5;
}

.interviewsCoFlex {
margin: 0 auto;
}

#interviewsCoPhoto01 {
width: 100%;
height: 330px;
margin-bottom: 30px;
overflow: hidden;
}

#interviewsCoPhoto01 img {
width: 100%;
height: 330px;
object-fit: cover;
}

#interviewsCoTxt01 {
width: 100%;
}

#interviewsTitleCe {
}

#interviewsTitleR {
width: 88%;
text-align: left;
margin: 0 auto;
}

.interviewsQR {
font-family: var(--font-roboto);
font-size: 7rem;
font-weight: 100;
color: var(--themeColor);
margin-bottom: -20px;
}

.interviewsCoPhoto02 {
width: 100%;
height: 330px;
margin-bottom: 30px;
overflow: hidden;
}

.interviewsCoPhoto02 img {
width: 100%;
height: 330px;
object-fit: cover;
}

.interviewsCoTxt02 {
width: 100%;
}

#interviewsWrapBgR {
background: url("../img/interviews_bg_r.svg") no-repeat bottom;
background-size: 100%;
width: 100%;
}

.interviewsCoFlexB {
width: 88%;
text-align: justify;
margin: 0 auto;
padding-bottom: 60px;
}

#wrapInterviewsBottom {
background-color: #E6F2EC;
width: 100%;
padding-top: 30px;
padding-bottom: 60px;
}

#wrapInterviewsBottomInner {
position: relative;
width: 100%;
margin: 0 auto;
}

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

#contentsTitleEnB {
position: relative;
width: 88%;
font-family: var(--font-roboto);
font-size: 2.2rem;
font-weight: 400;
text-align: left;
margin: 0 auto;
}

#contentsTitleEnB::before {
position: absolute;
background-color: var(--themeColor);
width: 1000px;
height: 1px;
content: "";
margin: auto;
left: -1005px;
top: 0;
bottom: 0;
}

#wrapInterviewsBottomInnerInner h2 {
font-family: var(--font-second);
font-size: 2.6rem;
font-weight: 500;
color: var(--themeColor);
margin-top: 10px;
margin-bottom: 30px;
line-height: 1.5;
}

#interviewsCoLrFlex {
margin: 30px auto;
margin-bottom: 0;
}

#interviewsCoLB {
width: 100%;
}

#interviewsCoLBTxtL {
font-size: 1.6rem;
font-weight: 500;
margin-bottom: 30px;
line-height: 1.8;
}

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

/**/

#wrapNewsTopics {
background: url("../img/news_bg.webp") repeat-y;
background-size: 100%;
width: 100%;
}

#categoryNav {
margin-bottom: 30px;
}

#categoryNav ul {
display: flex;
justify-content: space-between;
}

#categoryNav ul li {
width: 32%;
}

#categoryNav ul li a {
background-color: #fff;
width: 100%;
height: 36px;
font-size: 1.3rem;
color: var(--themeColor);
text-align: center;
padding: 0 10px;
display: block;
border: 1px solid var(--themeColor);
line-height: 32px;
}

#categoryNav ul li a.active {
background-color: var(--themeColor);
color: #fff;
}

#wrapNewsTopics .newsFlex {
position: relative;
width: 100%;
padding: 15px 0;
display: block;
border-bottom: 1px solid #b8c1bd;
}

#wrapNewsTopics .newsFlex:after {
position: absolute;
background: url("../img/btn_arrow_g.svg") no-repeat;
background-size: 29px;
width: 29px;
height: 8px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 5px;
transition: .3s;
}

#wrapNewsTopics .newsL {
font-family: var(--font-roboto);
width: 240px;
font-weight: 500;
color: var(--themeColor);
margin-bottom: 5px;
display: flex;
justify-content: flex-start;
align-items: center;
}

#wrapNewsTopics .newsL .categoryTag {
background-color: #fff;
font-family: var(--font-primary);
width: 80px;
height: 26px;
font-size: 1.2rem;
font-weight: 400;
text-align: center;
margin-left: 10px;
border: 1px solid var(--themeColor);
line-height: 22px;
}

#wrapNewsTopics .newsR {
width: 932px;
padding-right: 60px;
}

/**/

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

.wp-pagenavi {
position: relative;
font-family: var(--font-roboto);
font-weight: 500;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
line-height: 30px;
}

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

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

.wp-pagenavi .current {
background-color: var(--themeColor);
width: 32px;
height: 32px;
color: #fff;
margin: 0 2px;
display: block;
border: 1px solid var(--txtColor) !important;
}

.wp-pagenavi a,
.wp-pagenavi .extend {
width: 32px;
height: 32px;
color: var(--themeColor);
display: block;
border: 1px solid var(--themeColor) !important;
}
.wp-pagenavi .first,
.wp-pagenavi .last {
display: none;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
position: relative;
background: #fff url("../img/btn_arrow_p.svg") no-repeat center;
background-size: 16px;
width: 26px;
height: 26px;
font-size: 0;
text-indent: -1000px;
margin: 0 7px;
border: 0 !important;
}

.wp-pagenavi .nextpostslink {
background: #fff url("../img/btn_arrow_g.svg") no-repeat center;
background-size: 16px;
}

/**/

#wrapTitleNo {
position: relative;
width: 100%;
margin-top: 60px;
}

#postDate {
font-family: var(--font-roboto);
font-weight: 500;
color: var(--themeColor);
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
align-items: center;
}

#postDate .categoryTag {
background-color: #fff;
font-family: var(--font-primary);
width: 80px;
height: 26px;
font-size: 1.2rem;
font-weight: 400;
text-align: center;
margin-left: 15px;
border: 1px solid var(--themeColor);
line-height: 22px;
}

#postTitle {
font-size: 2.2rem;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #b7b7b7;
line-height: 1.5;
}

#wrapPost {
width: 100%;
}

#wrapPost h2 {
position: relative;
font-size: 1.8rem;
margin-bottom: 25px;
padding-left: 27px;
}

#wrapPost h2::before {
position: absolute;
background-color: var(--themeColor);
width: 16px;
height: 1px;
content: "";
margin: auto;
left: 0;
top: 0;
bottom: 0;
}

#wrapPost img {
margin-bottom: 30px;
}

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

.btnBack {
position: relative;
background-color: var(--themeColor);
width: 100%;
height: 80px;
font-size: 1.5rem;
color: #fff;
padding-bottom: 3px;
cursor: pointer;
border-radius: 10px;
border: 1px solid var(--txtColor);
z-index: 2;
transition: .3s;
}

.btnBack::after {
position: absolute;
background: url("../img/btn_arrow_back.svg") no-repeat;
background-size: 30px;
width: 30px;
height: 9px;
content: "";
margin: auto;
top: 0;
bottom: 0;
left: 15px;
}

/**/

#bottomContactWrap {
background: var(--themeColor) url("../img/bottom_contact_bg.svg") no-repeat center;
background-size: cover;
width: 100%;
font-size: 1.6rem;
color: #fff;
padding: 60px 20px 60px;
}

#bottomContactWrap h2 {
font-family: var(--font-roboto);
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 20px;
line-height: 1.4;
}

#bottomContactWrap h2 span {
font-family: var(--font-second);
font-size: 2.8rem;
display: block;
}

#bottomContactFlex {
width: 100%;
font-size: 2rem;
margin: 0 auto;
margin-top: 30px;
}

#bottomContactFlex h3 {
margin-bottom: 25px;
}

#bottomContactCall {
background: url("../img/bottom_contact_bg01.svg") no-repeat center;
background-size: cover;
width: 100%;
padding: 30px;
}

#bottomContactCall p {
font-family: var(--font-roboto);
font-size: 3.2rem;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
line-height: 1;
}

#bottomContactCall p img {
width: 25px;
}

#bottomContactCall p a {
color: #fff;
margin-left: 10px;
}

#bottomContactCallTxt {
background-color: #fff;
width: 100%;
height: 32px;
font-size: 1.4rem;
font-weight: 400;
color: var(--txtColor);
margin: 0 auto;
border-radius: 100px;
line-height: 30px;
}

#bottomContactWeb {
background: url("../img/bottom_contact_bg02.svg") no-repeat center;
background-size: cover;
width: 100%;
padding: 30px;
}

#bottomContactWeb img {
width: 40px;
}

.btnS {
position: relative;
font-family: var(--font-primary);
background-color: #fff;
width: 100%;
height: 32px;
font-size: 1.4rem;
color: var(--txtColor);
padding-bottom: 2px;
cursor: pointer;
border-radius: 100px;
border: 1px solid #fff;
z-index: 2;
transition: .3s;
}

.btnS::after {
position: absolute;
background: url("../img/btn_arrow_g.svg") no-repeat;
background-size: 21px;
width: 21px;
height: 7px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 10px;
}

/**/

#bottomRecruitWrap {
position: relative;
background: url("../img/footer_recruit_bg.webp") no-repeat center;
background-size: cover;
width: 100%;
height: 320px;
overflow: hidden;
padding: 60px 30px;
}

#bottomRecruitWrap::after {
position: absolute;
background: rgb(32,43,39,.52);
width: 100vw;
height: 100vh;
content: "";
left: 0;
top: 0;
z-index: 1;
}

#bottomRecruitWrap h2 {
position: relative;
font-family: var(--font-second);
font-size: 2.8rem;
font-weight: 500;
color: #fff;
margin-bottom: 30px;
z-index: 2;
line-height: 1.5;
}

.btnW {
position: relative;
font-family: var(--font-primary);
background-color: #fff;
width: 100%;
height: 80px;
font-size: 1.6rem;
color: var(--txtColor);
padding-bottom: 3px;
cursor: pointer;
border-radius: 10px;
border: 1px solid var(--txtColor);
z-index: 2;
transition: .3s;
}

.btnW::after {
position: absolute;
background: url("../img/btn_arrow_g.svg") no-repeat;
background-size: 30px;
width: 30px;
height: 9px;
content: "";
margin: auto;
top: 0;
bottom: 0;
right: 15px;
}

/**/

#wrapManga {
width: 88%;
margin: 0 auto;
margin-top: -230px;
margin-bottom: 60px;
border: 1px solid #eee;
}

/**/

#contactCall {
background-color: #e6f2ec;
width: 100%;
margin: 40px auto;
margin-bottom: 0;
padding: 20px;
}

#contactCallL {
width: 100%;
font-size: 1.6rem;
font-weight: 500;
text-align: center;
}

#contactCallL h2 {
background: url("../img/icon_call.svg") no-repeat left;
background-size: 22px;
font-family: var(--font-second);
font-size: 2rem;
margin-bottom: 10px;
padding-left: 6px;
}

#contactCallL p {
margin-bottom: 20px;
}

#contactCallR {
background-color: #fff;
font-family: var(--font-roboto);
font-size: 3.6rem;
text-align: center;
padding: 40px 0;
line-height: 1;
}

#contactCallTxt {
background-color: var(--themeColor);
width: 70%;
height: 32px;
font-size: 1.2rem;
font-weight: 400;
color: #fff;
margin: 0 auto;
margin-top: 15px;
border-radius: 100px;
line-height: 32px;
}

#wrapContact {
background: url("../img/contact_bg.svg") repeat-y;
background-size: 100%;
font-size: 1.5rem;
}

.wrapContact {
background-color: #fff;
width: 100%;
font-size: 1.4rem;
margin-top: 30px;
padding: 25px;
}

#wrapContact h3 {
width: 100%;
margin-bottom: 10px;
}

.required {
position: relative;
background-color: var(--themeColor);
width: 42px;
height: 21px;
font-size: 1.2rem;
text-align: center;
color: #fff;
margin-left: 10px;
display: inline-block;
border: 1px solid var(--txtColor);
line-height: 18px;
top:-1px;
}

.inputGroup {
margin-bottom: 20px;
}

.inputSolo {
margin-bottom: 20px;
}

.radioArea input[type=radio] {
position: absolute;
appearance: none;
}

.radioArea label {
cursor: pointer;
background-color: #fff;
width: 100%;
height: 56px;
text-align: center;
color: var(--txtColor);
margin-bottom: 10px;
display: block;
border: 1px solid #b7b7b7;
border-radius: 8px;
transition: .3s;
line-height: 52px;
}

.radioArea input[type=radio]:checked+label {
background-color: #e6f2ec;
border: 1px solid var(--themeColor);
}

.radioWrap {
width: 100%;
margin-bottom: 30px;
}

.radioWrap label {
min-width: 250px;
cursor: pointer;
margin-left: -13px;
margin-right: 20px;
display: block;
}

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

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

.radioWrap input[type="radio"] {
appearance: none;
border: 1px solid #b7b7b7;
border-radius: 50%;
height: 20px;
left: 0;
top: 4px;
margin: 0;
position: relative;
width: 20px;
}

.inputArea {
width: 100%;
}

.mt {
margin-top: 20px;
}

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

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

.checkWrap {
position: relative;
text-align: left;
left: -12px;
}

.checkWrap a {
text-decoration: underline;
}

.checkWrap label {
position: relative;
display: flex;
cursor: pointer;
}

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

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

.checkWrap label::before {
position: relative;
background-color: #fff;
width: 40px;
height: 20px;
margin-right: 2px;
border: 1px solid #b7b7b7;
border-radius: 3px;
top: 3px;
}

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

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

#wrapSubmit {
margin: 30px auto;
margin-top: 20px;
text-align: center;
}

/**/

#wrapPrivacy {
width: 88%;
text-align: justify;
margin: 0 auto;
margin-bottom: 70px;
padding-left: 20px;
border-left: 1px solid var(--themeColor);
}

#wrapPrivacy h2 {
font-family: var(--font-primary);
font-size: 1.7rem;
font-weight: 500;
margin-bottom: 20px;
line-height: 1.3;
}

#wrapPrivacy h2 span {
position: relative;
font-family: var(--font-roboto);
font-size: 2.2rem;
color: var(--themeColor);
top: 2px;
}

.privacyLine {
margin: 30px auto;
border-bottom: 1px dotted #b7b7b7;
}

#wrapPrivacy ul {
margin-bottom: 36px;
list-style: disc;
margin-left: 20px;
}

#bottomLine {
width: 88%;
margin: 0 auto;
border-bottom: 1px solid  #b7b7b7;
}

/**/

footer {
position: relative;
width: 100%;
text-align: left;
padding: 60px 0;
}

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

#footerWrap {
width: 100%;
}

#footerL {
width: 100%;
text-align: justify;
margin-bottom: 30px;
}

#footerLogo {
width: 88%;
margin: 0 auto;
margin-bottom: 30px;
}

#footerAddress {
font-size: 1.4rem;
text-align: center;
}

#footerCall {
font-family: var(--font-roboto);
font-size: 2rem;
text-align: center;
color: var(--themeColor);
margin-top: 5px;
}

#footerCall span {
font-size: 3.6rem;
}

.copyright {
font-size: 1.1rem;
text-align: center;
margin-top: 30px;
}

#footerR {
width: auto;
font-size: 1.4rem;
margin: 0 auto;
display: table;
}

#footerR nav {
margin: 0 auto;
margin-bottom: 30px;
line-height: 2.5em;
}

#footerR nav h3 {
font-size: 1.6rem;
font-weight: 600;
color: var(--themeColor);
}

#footerR nav h3 a {
color: var(--themeColor);
}

#footerR nav ul li {
position: relative;
padding-left: 20px;
}

#footerR nav ul li::before {
position: absolute;
background-color: var(--themeColor);
width: 12px;
height: 1px;
content: "";
margin: auto;
top: 0;
bottom: 0;
left: 0;
}

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

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

}