@charset "UTF-8";
@import url("reset.css");
@import url("base.css");


/* --------------------------------------------------
    Common
-------------------------------------------------- */

html { font-size: 62.5%;/* overflow-y: scroll*/;}
body { background: #fff; font-family:"Inter","Noto Sans JP", sans-serif; font-weight: 400; font-size: 1.6rem; line-height: 1.8em; color: var(--color_black);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
font-feature-settings: "palt";
overflow-y: scroll;
}

a { text-decoration: none; color: var(--color_black);}
a:hover { text-decoration: underline;}
a:visited { color: #666;}

.pc_only { display: block;}
.sp_only { display: none;}

@media screen and (max-width: 840px){
.pc_only { display: none;}
.sp_only { display: block;}
}


/* hover */
a.bright,
a.opacity { transition: .3s ease-in-out;}

/*
a.bright:hover,
a.opacity:hover { opacity: .6;}

a.bright:hover::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
}
*/

//a.bright:hover {filter: brightness(1.2);}
a.bright:hover {opacity: .6;}
a.opacity:hover { opacity: .6;}


/* --------------------------------------------------
    header
-------------------------------------------------- */
header { width: 100%; height: var(--headerH); background: var(--color_white); position: sticky; top: 0; z-index: 999;}
header .inner { display: flex; align-items: center; justify-content: space-between; max-width: 1920px; height: var(--headerH); margin: 0 auto; padding: var(--headerP); position: relative;}
header .logoMark { display: flex; align-items: center;}
header .logo { width: var(--headerLogoW); height: var(--headerLogoH);}
header .character { width: var(--headerCharacterWH); height: var(--headerCharacterWH); margin-left: 20px;}
header .pcMenu { display: flex; flex-direction: column;}
header .upperMenu { display: flex; align-items: center; justify-content: flex-end; padding: 0 0 30px 0;}
header .upperMenu ul.subMenu { list-style: none; display: flex;}
header .upperMenu ul.subMenu a { display: block; color: var(--color_black); font-weight: 600; padding: 0 5px;}
header .upperMenu ul.subMenu a:hover { color: var(--color_main_red); text-decoration: none; transition: .3s;}
header .upperMenu ul.subMenu li { font-size: 1.8rem; margin-right: 30px;}
header .upperMenu ul.subMenu li span { font-size: 1.5rem; margin-left: 10px; font-weight: 400;}

header .langWrap { width: 50px; height: 30px; background: var(--color_main_red);}
header .langList a { display: block; color: var(--color_white); font-weight: 600; padding: 0 5px; text-decoration: none;}
header .langList > a:after { content: ""; display: inline-block; width: 12px; height: 12px; background: url(../images/share/icon_arrow_d_w.svg) 0 0 no-repeat; margin-left: 5px;} 
header .dropdownLists { display: none; width: 50px; position: absolute; top: 35px; z-index: 10;}
header .langList:hover .dropdownLists { display: block;}
header .dropdownList { background: var(--color_main_red); height: 30px; transition: all .3s;}
header .dropdownList a[target="_blank"]:after { content: ""; display: inline-block; width: 12px; height: 12px; background: url(../images/share/icon_blank_white.svg) 0 0; margin-left: 5px;}

header .gNav { display: flex; align-items: baseline;}
header .gNav a { font-size: 2.2rem; color: var(--color_black); border-radius: 10px 10px 0 0; padding: 17px 20px; margin-left: 20px; position: relative; font-weight: 600;}
header .gNav a:not(.gNavItem) { padding: 12px 30px 12px 20px;}
header .gNav a span { font-size: 1.6rem; margin-left: 10px;}
header .gNav a.recruit[target="_blank"]:after { content: ""; width: 15px; height: 15px; background: url(../images/share/icon_blank_black.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 10px; margin: auto;}
header .gNav a.recruit[target="_blank"]:hover:after { background: url(../images/share/icon_blank_white.svg) 0 0;}
header .gNav a:hover,
header .gNav .gNavArea.active a.gNavItem
{ background: var(--color_main_red); color: var(--color_white); text-decoration: none; transition: .3s;}

@media screen and (max-width: 1265px){
header .gNav a { font-size: 1.8rem; margin-left: 15px; padding: 20px 10px;}
header .gNav a span { font-size: 1.4rem; margin-left: 5px;}
header .upperMenu ul.subMenu li { font-size: 1.6rem; margin-right: 20px;}
header .upperMenu ul.subMenu li span { font-size: 1.3rem; margin-left: 5px;}
header .gNav a:not(.gNavItem) { padding: 16px 30px 16px 10px;}
}

header .subNav { display: none; width: 100vw; height: auto; background: var(--color_sub_red04); margin: 0 auto; position: absolute; top: 110px; left: 0; z-index: 200;}
header .subNav .inner { display: block; max-width: 1200px; height: auto; padding: 50px 0 30px; margin: 0 auto;}
header .subNav .subNavTitle { display: flex; align-items: center; color: var(--color_white); font-size: 3.8rem; font-weight: 600; margin-bottom: 30px;}
header .subNav .subNavTitle a { display: flex; align-items: center; color: var(--color_white); font-size: 2.2rem;}
header .subNav .subNavTitle a:hover { background: var(--color_main_red); border-radius: 15px;}
header .subNav .subNavTitle a img { width: 15px; height: 15px; margin-left: 15px;}
header .subNav .upperCont { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--color_sub_red07); padding-bottom: 20px; margin-bottom: 20px;}
header .subNav .upperCont a.bright { display: block; width: 32%; margin: 0 1.5% 3% 0; padding: 0;}
header .subNav .upperCont a.bright:nth-last-child(3) { margin: 0 0 3% 0;}
header .subNav .upperCont a.bright img { width: 100%;}
header .subNav .upperCont a.btS { display: flex; align-items: center; font-size: 1.6rem; width: 32%; height: 45px; background: var(--color_white); border-radius: 10px; margin: 0 1.5% 0 0; position: relative;}
header .subNav .upperCont a.btS:hover { color: var(--color_main_red);}
header .subNav .upperCont a.btS img { width: 30px; height: 30px;}
header .subNav .upperCont a.btS[target="_blank"]:after { content: ""; width: 36px; height: 36px; background: url(../images/share/icon_blank_bgW_red.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 30px; margin: auto;}
header .subNav .upperCont a.btS[target="_blank"]:hover:after { background: url(../images/share/icon_blank_bgW_red.svg) 0 0;}

header .subNav .LinkArea { display: flex; flex-wrap: wrap;}
header .subNav .LinkArea a { display: flex; align-items: center; width: 32%; height: 45px; background: var(--color_white); border-radius: 10px; font-size: 1.6rem; margin: 0 1.5% 2% 0; padding: 0 0 0 15px; text-decoration: none; position: relative;}
header .subNav .LinkArea a:nth-child(3n) { margin: 0 0 2% 0;}
header .subNav .LinkArea a:hover { color: var(--color_main_red); text-decoration: none;}
header .subNav .LinkArea a:after { content: ""; width: 36px; height: 36px; background: url(../images/share/icon_arrow_bgW_red.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 30px; margin: auto;}
header .subNav .LinkArea a:hover:after { background: url(../images/share/icon_arrow_bgW_red.svg) 0 0;}
header .subNav .LinkArea a.row02 { width: 49%; height: 90px; font-size: 2rem; margin: 0 1.5% 3% 0;}
header .subNav .LinkArea a.row02:nth-child(2) { margin: 0 0 3% 0;}
header .subNav .LinkArea a.row02 img { width: 60px; height: 60px; margin-right: 20px;}

header .subNav .LinkArea a.btS[target="_blank"]:after { content: ""; width: 36px; height: 36px; background: url(../images/share/icon_blank_bgW_red.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 30px; margin: auto;}
header .subNav .LinkArea a.btS[target="_blank"]:hover:after { background: url(../images/share/icon_blank_bgW_red.svg) 0 0;}


header .spMenu { display: none;}
header .pcMenu { display: block;}

@media screen and (max-width: 1200px){
header .subNav .inner { padding: 60px 30px 0;}
}

@media screen and (max-width: 925px){
header .pcMenu { display: none;}
header .spMenu { display: block;}

header { border-bottom: 2px solid var(--color_lghtbluegray); position: fixed; z-index: 1001;}

.drawer_button { display: block; width: var(--headerH); height: var(--headerH); background: var(--color_main_red); border: none; margin-right: -15px; position: relative; cursor: pointer; z-index: 1002;}
.drawer_button > span { display: block; width: 40px; height: 2px; background: var(--color_white); position: absolute; top: 50%; left: 50%; transform: translateX(-50%);}
.drawer_button > span:first-child {
transform: translate(-50%, calc(-50% - 10px));
transition: transform 0.3s ease;
}
.drawer_button > span:nth-child(2) {
transform: translate(-50%, -50%);
transition: opacity 0.3s ease;
}
.drawer_button > span:last-child {
transform: translate(-50%, calc(-50% + 10px));
transition: transform 0.3s ease;
}
.drawer_button.active > span:first-child {
transform: translate(-50%, -50%) rotate(-45deg);
}
.drawer_button.active > span:nth-child(2) {
opacity: 0;
}
.drawer_button.active > span:last-child {
transform: translate(-50%, -50%) rotate(45deg);
}

.drawer_nav { width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); position: fixed; top: var(--headerH); left: 0; z-index: 1000;
transition: opacity 0.3s ease;
opacity: 0;
visibility: hidden;}
.drawer_nav_inner { width: 60%; height: 100%; background-color: var(--color_whitegray); padding: 0; position: relative;
margin: 0 0 0 auto;
overflow: scroll;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.drawer_nav_menu { list-style: none; padding-left: 0;}
.drawer_nav_link { display: block; color: var(--color_black); text-decoration: none; padding: 1rem 1rem; border-bottom: solid 1px lightgray;}
.drawer_nav.active { opacity: 1; visibility: visible;}
.drawer_nav.active .drawer_nav_inner { transform: translateX(0);}
body.active { height: 100%; overflow: hidden;}

.drawer_nav_inner .aco_open { }

.drawer_nav_inner dl { }
.drawer_nav_inner dt.aco_open,
.drawer_nav_inner .recruit { height: 50px; display: flex; align-items: center; color: var(--color_black); background: var(--color_white); border-bottom: 2px solid var(--color_lghtbluegray); font-size: 1.5rem; font-weight: 600; padding-left: 15px; position: relative; cursor: pointer;}
.drawer_nav_inner .recruit a { color: var(--color_black);}
.drawer_nav_inner dt.aco_open.active { background: var(--color_sub_red11);}
.drawer_nav_inner dt.aco_open:before,
.drawer_nav_inner dt.aco_open:after
{ content: ""; display: block; width: 20px; height: 2px; background: var(--color_main_red); position: absolute; top: 48%; right: 20px;}
.drawer_nav_inner dt.aco_open:before {
transform: translateY(-50%) rotate(90deg);
top: 50%;
}
.drawer_nav_inner dt.aco_open.active:before {
transform: rotate(180deg);
transition: .2s;
}
.drawer_nav_inner dt.aco_open:after {
transform: rotate(180deg);
transition: .2s;
}
.drawer_nav_inner dt.aco_open.active:after {
opacity: 0;
transition: .1s
}
.drawer_nav_inner .recruit a[target="_blank"]:after { content: ""; width: 20px; height: 20px; background: url(../images/share/icon_blank_red.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 20px; margin: auto;}

.drawer_nav_inner dd.aco_cont {}
.drawer_nav_inner dd.aco_cont ul { list-style: none;}
.drawer_nav_inner dd.aco_cont li { display: flex; align-items: center; height: 50px; background: var(--color_white); padding: 0 30px 0 40px; margin-bottom: 2px;}
.drawer_nav_inner dd.aco_cont li:hover { background: var(--color_white);}
.drawer_nav_inner dd.aco_cont li a { display: flex; align-items: center; width: 100%; height: 100%; text-decoration: none; position: relative;}
.drawer_nav_inner dd.aco_cont li a:hover { border-bottom: 2px solid var(--color_main_red); color: var(--color_main_red);}
.drawer_nav_inner dd.aco_cont li a:after { content: ""; width: 15px; height: 15px; background: url(../images/share/icon_arrow_r_red.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 0; margin: auto;}
.drawer_nav_inner dd.aco_cont li a[target="_blank"]:after { content: ""; width: 15px; height: 15px; background: url(../images/share/icon_blank_red.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 0; margin: auto;}

.drawer_nav_inner .subLink { background: none;}
.drawer_nav_inner .subLink li { display: flex; align-items: center; height: 50px; padding: 0 15px; font-weight: 600;}
.drawer_nav_inner .enSite { width: 100px; height: 40px; display: flex; align-items: center; color: var(--color_white); font-weight: 600; background: var(--color_main_red); margin: 0 15px 30px; padding: 5px 10px; position: relative;}
.drawer_nav_inner .enSite:after { content: ""; width: 15px; height: 15px; background: url(../images/share/icon_blank_white.svg) 0 0; position: absolute; bottom: 0; top: 0; right: 10px; margin: auto;}
.drawer_nav_inner .logo_wakengroup { display: flex; align-items: center; justify-content: center; width: 345px; height: 70px; background: var(--color_white); border-radius: 8px; margin: 0 auto; padding: 20px;}

}

@media screen and (max-width: 767px){
.drawer_button > span { width: 25px;}
.drawer_nav_inner { width: 100%;}
}


/* --------------------------------------------------
    breadcrumbs
-------------------------------------------------- */
.breadcrumbs { max-width: 1920px; height: 40px; list-style: none; display: flex; align-items: center; background: var(--color_lghtbluegray); font-size: 1.4rem; padding: 0 30px; margin: 0 auto;}
.breadcrumbs li a { text-decoration: underline;}
.breadcrumbs li:after { content: ">"; padding: 0 15px;}
.breadcrumbs li:last-of-type:after { content: none;}

@media screen and (max-width: 840px){
.breadcrumbs { display: none;}
}


/* --------------------------------------------------
    main
-------------------------------------------------- */
.inner { max-width: 1200px; margin: var(--innerM); padding: var(--innerP);}
main { padding-bottom: 50px;}


@media screen and (max-width: 925px){
main { padding-top: 110px;}
}

@media screen and (max-width: 767px){
main { padding-top: 50px;}
}

/* --------------------------------------------------
    bnArea
-------------------------------------------------- */
.bnArea {  border-top: 1px solid var(--color_lghtbluegray); position: relative;}
.bnArea .wakenyakuLogo { display: none;}
.bnArea .upperBnArea { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 35px;justify-content: center;}
.bnArea .upperBnArea a { display: block; width: 23%; margin: 0 2.5% 0 0;}
.bnArea .upperBnArea a:last-of-type { margin: 0;}
.bnArea .bottomBnArea { display: flex; align-items: center; justify-content: center;}
.bnArea .bottomBnArea a { display: block; width: 48.5%; margin: 0;}
.bnArea .upperBnArea a img,
.bnArea .bottomBnArea a img { width: 100%;}
.bnArea .pageTop { width: 80px; height: 80px; position: fixed; bottom: 20px; right: 20px;}


@media screen and (max-width: 767px){
.bnArea { margin-top: 60px; padding: 0;}
.bnArea .upperBnArea,
.bnArea .bottomBnArea
{ flex-direction: column; margin: 0 auto; padding: 5% 10% 0;}

.bnArea .wakenyakuLogo { display: block; margin: 0 0 10% 0;}
.bnArea .upperBnArea a,
.bnArea .bottomBnArea a { display: block; width: 100%; margin: 0 0 5% 0;}
.bnArea .pageTop { width: 45px; height: 45px; top: -45px;}
}

/* --------------------------------------------------
    footer
-------------------------------------------------- */
footer { font-size: 1.5rem; border-top: 1px solid var(--color_lghtbluegray);}
footer > .inner { padding: 40px 0 0; margin: 0 auto;}
footer .siteMap { display: flex;}
footer .siteMap dl:first-of-type { width: 60%;}
footer .siteMap dl:last-of-type { width: 40%;}
footer .siteMap dt { width: 100%; margin-bottom: 15px; font-weight: 600;}
footer .siteMap ul { list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto);}
footer .siteMap ul li { margin-bottom: 15px;}
footer ul li a[target="_blank"]:after { content: ""; display: inline-block; width: 15px; height: 15px; background: url(../images/share/icon_blank_black.svg) 0 0; margin-left: 10px;}
footer ul.siteMap02 { list-style: none; padding: 40px 0;}
footer ul.siteMap02 li { display: inline-block; margin-right: 100px;  font-weight: 600;}
footer ul.siteMap02 li:last-of-type { margin-right: 0;}
footer .siteMap03 { border-top: 1px solid var(--color_lghtbluegray);}
footer .siteMap03 > .inner { display: flex; align-items: center; justify-content: space-between; padding: 40px 0 0; margin: 0 auto 40px;}
footer .siteMap03 > .inner > img { width: 250px; height: 48px;}
footer .siteMap03 li { display: inline-block; margin-left: 30px;}
footer .copyright { color: var(--color_white); font-size: 1.4rem; font-weight: 500; text-align: center; background: var(--color_black); padding: 15px 0;}

@media screen and (max-width: 1200px){
footer > .inner,
footer .siteMap03 > .inner { padding-left: 30px; padding-right: 30px;}
footer ul.siteMap02 { padding-left: 0; padding-right: 0;}
}

@media screen and (max-width: 950px){
footer .siteMap ul { grid-template-rows: repeat(7, auto);}
footer .siteMap03 > .inner { padding-left: 15px; padding-right: 15px;}
}

@media screen and (max-width: 767px){
footer { font-size: 1.3rem;}
footer > .inner { padding: 30px 15px;}
footer .siteMap03 > .inner { padding: 30px 15px; margin: 0;}
footer .siteMap { flex-direction: column; font-size: 1.3rem;}
footer .siteMap dt { font-size: 1.5rem; font-weight: 600;}
footer .siteMap dl:first-of-type,
footer .siteMap dl:last-of-type { width: 100%;}
footer .siteMap dl:first-of-type { margin-bottom: 20px;}
footer ul.siteMap02 { padding: 20px 0 0; font-weight: 600; font-size: 1.5rem;}
footer .siteMap03 ul { width: 100%; display: flex; flex-wrap: wrap;}
footer .siteMap ul { display: flex; flex-wrap: wrap;}
footer .siteMap03 ul li,
footer .siteMap ul li { width: 47%; margin: 0 5% 2% 0;}
footer .siteMap03 ul li:nth-child(2n),
footer .siteMap ul li:nth-child(2n) { margin: 0 0 2% 0;}
footer .siteMap03 > .inner > img { display: none;}
}


.bnbtn {background: #fff; border-radius:15px;}
@media screen and (max-width: 767px){
.bnbtn {
  width: 100%;
  margin-bottom: 20px;
}
}