@charset "utf-8";

/*----------------------------------------------------------
wrap
----------------------------------------------------------*/
@media (max-width: 768px){
#wrapper{
padding: 4.5rem 0 0;
}
}

#main{
margin: 0 auto;
}

.contents02{
padding: 60px 0 80px;
}
@media (max-width: 768px){
.contents02{
padding: 2.0rem 0 4.0rem;
}
}

/*----------------------------------------------------------
header
----------------------------------------------------------*/
#header{
width: 100%;
background: #fff;
}
#header .inner{
width: 1200px;
margin: 0 auto;
}
#header .inner .block_logo{
display: flex;
}
#header .inner .block_logo .box_logo{
width: 600px;
display: flex;
align-items: flex-end;
}
#header .inner .block_logo .box_logo .area{
font-size: 1.6rem;
font-weight: bold;
margin: 0 0 8px 40px;
}
#header .inner .block_logo .box_btn{
width: 600px;
display: flex;
align-items: center;
justify-content: flex-end;
}
#header .inner .block_logo .box_btn .tel{
margin: 0 20px 0 0;
}
#header .inner .block_logo .box_btn .tel a{
pointer-events: none;
}
#header .inner .block_logo .box_btn .tel span{
font-size: 1.1rem;
text-align: right;
margin: 5px 0 0;
display: block;
}
#header .inner .block_logo .box_btn [class^="btn"]{
width: 187px;
}
#header .inner .block_logo .box_btn [class^="btn"] a{
width: 100%;
height: 75px;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
text-align: center;
letter-spacing: 0.2rem;
display: flex;
align-items: center;
justify-content: center;
}
#header .inner .block_logo .box_btn .btn_register a{
background: var(--color_orange01);
}
#header .inner .block_logo .box_btn .btn_login a{
background: var(--color_gray01);
}
#header .inner #gnav{
padding: 20px 0 10px;
}
#header .inner #gnav .list{
margin: 0 0 20px;
display: flex;
align-items: center;
justify-content: center;
}
#header .inner #gnav .list > li a{
font-size: 1.4rem;
font-weight: bold;
padding: 0 18px;
position: relative;
}
#header .inner #gnav .list > li a::before{
content: "";
width: 1px;
height: 12px;
background: var(--color_black01);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#header .inner #gnav .list > li:nth-child(2) a::before{
display: none;
}
#header .inner #gnav .block_btn .banner{
text-align: right;
}
@media (max-width: 768px){
#header{
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
#header .inner{
width: 100%;
}
#header .inner .block_logo{
align-items: center;
}
#header .inner .block_logo .box_logo{
width: calc(100% - 18.0rem);
padding: 0 3.0rem 0 1.0rem;
display: block;
}
#header .inner .block_logo .box_logo .area{
font-size: 1.0rem;
text-align: right;
line-height: 1.0;
margin: 0;
}
#header .inner .block_logo .box_btn{
width: 18.1rem;
}
#header .inner .block_logo .box_btn [class^="btn"]{
width: 13.5rem;
}
#header .inner .block_logo .box_btn [class^="btn"] a{
height: 4.6rem;
font-size: 1.4rem;
}
#header .inner .block_logo .box_btn .hamburger{
width: 4.6rem;
position: relative;
overflow: hidden;
}
#header .inner .block_logo .box_btn .hamburger::before{
content: "";
width: 2.0rem;
height: 0.2rem;
background: #fff;
position: absolute;
left: 50%;
top: 1.3rem;
transform: translateX(-50%);
transition: 0.3s;
z-index: 1;
}
#header .inner .block_logo .box_btn .hamburger::after{
content: "";
width: 2.0rem;
height: 0.2rem;
background: #fff;
position: absolute;
right: 50%;
bottom: 1.3rem;
transform: translateX(50%);
transition: 0.3s;
z-index: 1;
}
#header .inner .block_logo .box_btn .hamburger span{
height: 4.6rem;
background: var(--color_black01);
display: block;
position: relative;
}
#header .inner .block_logo .box_btn .hamburger span::before{
content: "";
width: 2.0rem;
height: 0.2rem;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#header .inner .block_logo .box_btn .hamburger.active::before{
top: 50%;
transform: translate(-50%,-50%) rotate(45deg);
}
#header .inner .block_logo .box_btn .hamburger.active::after{
bottom: 50%;
transform: translate(50%,50%) rotate(-45deg);
}
#header .inner .block_logo .box_btn .hamburger.active span::before{
display: none;
}
#header .inner #gnav{
background: var(--color_gray02);
padding: 0;
display: none;
}
#header .inner #gnav .list{
background: #fff;
border-top: 1px solid var(--color_black01);
margin: 0;
flex-wrap: wrap;
}
#header .inner #gnav .list > li{
width: 50%;
border-bottom: 1px solid var(--color_black01);
}
#header .inner #gnav .list > li a{
font-size: 1.3rem;
padding: 1.3rem 2.0rem;
display: block;
}
#header .inner #gnav .list > li a::before{
content: "";
width: 0.7rem;
height: 0.7rem;
border-right: 1px solid var(--color_black01);
border-bottom: 1px solid var(--color_black01);
background: none;
left: auto;
right: 1.0rem;
transform: translateY(-50%) rotate(-45deg);
}
#header .inner #gnav .list > li:nth-child(2) a::before{
display: block;
}
#header .inner #gnav .block_btn{
padding: 2.0rem;
}
#header .inner #gnav .block_btn [class^="btn_"]{
margin: 0 0 1.0rem;
}
#header .inner #gnav .block_btn [class^="btn_"] a{
color: #fff;
font-size: 2.0rem;
font-weight: bold;
text-align: center;
letter-spacing: 0.2rem;
border-bottom-width: 0.5rem;
border-bottom-style: solid;
padding: 1.2rem 0 1.0rem;
display: block;
position: relative;
}
#header .inner #gnav .block_btn [class^="btn_"] a::before{
content: "";
width: 1.0rem;
height: 1.0rem;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
position: absolute;
right: 2.0rem;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
#header .inner #gnav .block_btn .btn_register a{
background: var(--color_orange01);
border-bottom-color: var(--color_orange02);
}
#header .inner #gnav .block_btn .btn_login a{
background: var(--color_gray01);
border-bottom-color: var(--color_black01);
}
#header .inner #gnav .block_btn .banner{
margin: 0 0 1.5rem;
}
#header .inner #gnav .block_btn .banner a{
background: #fff;
padding: 1.0rem 2.0rem;
display: block;
}
#header .inner #gnav .block_btn .tel{
padding: 0 3.0rem;
}
#header .inner #gnav .block_btn .tel span{
font-size: 1.2rem;
text-align: right;
margin: 0.5rem 0 0;
display: block;
}
}

/*----------------------------------------------------------
footer
----------------------------------------------------------*/
#footer [class^="block_"] .inner{
width: 1000px;
margin: 0 auto;
}
#footer .block_banner{
background: var(--color_beige01);
padding: 60px 0;
}
#footer .block_banner .title01{
font-size: 2.0rem;
text-align: center;
margin: 0 0 20px;
}
#footer .block_menu{
background: var(--color_black01);
padding: 50px 0 60px;
}
#footer .block_menu .inner{
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#footer .block_menu .inner .box01{
width: 460px;
}
#footer .block_menu .inner .box01 .title01{
color: #fff;
font-size: 1.6rem;
text-align: center;
margin: 0 0 20px;
}
#footer .block_menu .inner .box01 .list{
border-top: 1px solid var(--color_gray02);
display: flex;
flex-wrap: wrap;
}
#footer .block_menu .inner .box01 .list > li{
width: 50%;
border-bottom: 1px solid #fff;
}
#footer .block_menu .inner .box01 .list > li a{
color: #fff;
font-size: 1.3rem;
padding: 8px 30px;
display: block;
position: relative;
}
#footer .block_menu .inner .box01 .list > li a::before{
content: "";
width: 6px;
height: 6px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
#footer .block_menu .inner .box01 .btn01{
text-align: center;
margin: 25px 0 0;
}
#footer .block_menu .inner .box01 .btn01 a{
background: #fff;
color: var(--color_green01);
font-size: 1.6rem;
font-weight: bold;
border-radius: 100px;
padding: 10px 40px 8px 60px;
display: inline-block;
position: relative;
}
#footer .block_menu .inner .box01 .btn01 a::before{
content: "";
width: 20px;
height: 18px;
background: url("/assets/images/common/footer_ico_01.webp") top center / 100% auto no-repeat;
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
}
#footer .block_text{
background: url("/assets/images/common/common_bg_02.webp") top center / auto auto;
padding: 40px 0;
}
#footer .block_text .text{
color: #616161;
font-size: 1.4rem;
line-height: 1.8;
}
#footer .block_text .text b{
color: #ea5c57;
font-weight: normal;
}
#footer .copyright{
background: var(--color_beige01);
font-size: 1.4rem;
text-align: center;
padding: 20px 0;
}
@media (max-width: 768px){
#footer [class^="block_"] .inner{
width: 100%;
padding: 0 2.0rem;
}
#footer .block_banner{
padding: 3.0rem 0;
}
#footer .block_banner .title01{
font-size: 1.6rem;
margin: 0 0 1.5rem;
}
#footer .block_menu{
padding: 3.0rem 0;
}
#footer .block_menu .inner{
display: block;
}
#footer .block_menu .inner .box01{
width: 100%;
}
#footer .block_menu .inner .box01 + .box01{
margin-top: 4.0rem;
}
#footer .block_menu .inner .box01 .title01{
font-size: 1.4rem;
margin: 0 0 1.5rem;
}
#footer .block_menu .inner .box01 .list > li a{
font-size: 1.2rem;
padding: 1.0rem 2.0rem 1.0rem 1.5rem;
}
#footer .block_menu .inner .box01 .list > li a::before{
width: 0.6rem;
height: 0.6rem;
right: 1.0rem;
}
#footer .block_menu .inner .box01 .btn01{
margin: 2.0rem 0 0;
}
#footer .block_menu .inner .box01 .btn01 a{
padding: 1.0rem 40.rem 0.8rem 6.0rem;
}
#footer .block_menu .inner .box01 .btn01 a::before{
width: 2.0rem;
height: 1.8rem;
left: 2.8rem;
}
#footer .block_text{
padding: 2.5rem 0;
}
#footer .block_text .text{
font-size: 1.2rem;
}
#footer .copyright{
font-size: 1.0rem;
padding: 1.5rem 0;
}
}

/*----------------------------------------------------------
sideNav
----------------------------------------------------------*/
#sideNav{
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 99;
}
#sideNav .list > li{
width: 195px;
margin: 0 0 15px;
}
#sideNav .list > li:last-child{
margin-bottom: 0;
}
#sideNav .list > li a{
color: #fff;
font-size: 1.6rem;
font-weight: bold;
letter-spacing: 0.2rem;
border-bottom-width: 3px;
border-bottom-style: solid;
padding: 20px 0 20px 25px;
display: block;
}
#sideNav .list > li.btn_register a{
background: var(--color_orange01);
border-bottom-color: var(--color_orange02);
}
#sideNav .list > li.btn_course a{
background: var(--color_green01);
border-bottom-color: var(--color_green02);
}
@media (max-width: 768px){
#sideNav{
display: none;
}
}

/*----------------------------------------------------------
section
----------------------------------------------------------*/
section .secInner01{
width: 1200px;
margin: 0 auto;
}
section .secInner01_02{
width: 1200px;
margin: 0 auto;
}
section .secInner02{
width: 980px;
margin: 0 auto;
}
section .secInner02_02{
width: 980px;
margin: 0 auto;
}
@media (max-width: 768px){
section .secInner01{
width: 100%;
padding: 0 2.0rem;
}
section .secInner01_02{
width: 100%;
}
section .secInner02{
width: auto;
padding: 0 2.0rem;
}
section .secInner02_02{
width: auto;
}
}

/*----------------------------------------------------------
icon
----------------------------------------------------------*/
[class*="ico_arrow_"] a{
text-decoration: underline;
padding: 0 35px 0 0;
position: relative;
}
[class*="ico_arrow_"] a::before{
content: "";
width: 26px;
height: 26px;
border-radius: 100px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
[class*="ico_arrow_"] a::after{
content: "";
width: 6px;
height: 6px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
position: absolute;
right: 11px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.ico_arrow_orange01 a{
color: var(--color_orange01);
}
.ico_arrow_orange01 a::before{
background: var(--color_orange01);
}
.ico_arrow_green01 a{
color: var(--color_green01);
}
.ico_arrow_green01 a::before{
background: var(--color_green01);
}
@media (max-width: 768px){
[class*="ico_arrow_"] a{
padding: 0 2.5rem 0 0;
}
[class*="ico_arrow_"] a::before{
width: 1.8rem;
height: 1.8rem;
}
[class*="ico_arrow_"] a::after{
width: 0.4rem;
height: 0.4rem;
right: 0.7rem;
}
}

/*----------------------------------------------------------
breadcrumb
----------------------------------------------------------*/
.breadcrumb{
width: 1200px;
margin: 0 auto 40px;
}
.breadcrumb .list{
display: flex;
flex-wrap: wrap;
}
.breadcrumb .list + .list{
margin-top: 15px;
}
.breadcrumb .list > li{
font-size: 1.2rem;
line-height: 1.0;
margin: 0 22px 0 0;
position: relative;
}
.breadcrumb .list > li::before{
content: "";
width: 5px;
height: 5px;
border-right: 1px solid var(--color_brown01);
border-bottom: 1px solid var(--color_brown01);
position: absolute;
right: -13px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
.breadcrumb .list > li:last-child{
margin-right: 0;
}
.breadcrumb .list > li:last-child::before{
display: none;
}
.breadcrumb .list > li a:hover{
text-decoration: underline;
}
@media (max-width: 768px){
.breadcrumb{
width: 100%;
margin: 0 auto 1.5rem;
padding: 0 2.0rem;
overflow-x: scroll;
word-break: keep-all;
white-space: nowrap;
}
.breadcrumb .list{
flex-wrap: nowrap;
}
.breadcrumb .list + .list{
margin-top: 1.0rem;
}
.breadcrumb .list > li{
font-size: 1.0rem;
margin: 0 2.2rem 0 0;
display: inline-block;
}
.breadcrumb .list > li::before{
width: 0.5rem;
height: 0.5rem;
right: -1.3rem;
}
}

/*----------------------------------------------------------
title
----------------------------------------------------------*/
.titleTypeA01{
width: 100%;
text-align: center;
margin: 0 auto 50px;
}
.titleTypeA01 span{
width: 410px;
color: var(--color_brown01);
font-size: 2.2rem;
font-weight: bold;
padding: 30px 0;
display: inline-block;
position: relative;
}
.titleTypeA01 span::before{
content: "";
width: 100%;
height: 4px;
background: url("/assets/images/common/titleTypeA01_border_01.webp") top center / auto 100% repeat-x;
position: absolute;
left: 0;
top: 0;
}
.titleTypeA01 span::after{
content: "";
width: 100%;
height: 4px;
background: url("/assets/images/common/titleTypeA01_border_01.webp") top center / auto 100% repeat-x;
position: absolute;
left: 0;
bottom: 0;
}
.titleTypeA01 span strong{
display: inline-block;
}
.titleTypeA01 span strong[class^="ico_"]{
padding: 0 56px 0 0;
position: relative;
}
.titleTypeA01 span strong[class^="ico_"]::before{
content: "";
width: 43px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.titleTypeA01 span strong.ico_search::before{
height: 39px;
background: url("/assets/images/common/titleTypeA01_ico_01.webp") top center / 100% auto no-repeat;
}
.titleTypeA01 span strong.ico_adviser::before{
height: 39px;
background: url("/assets/images/common/titleTypeA01_ico_02.webp") top center / 100% auto no-repeat;
}
.titleTypeA01 span strong.ico_mypage::before{
height: 39px;
background: url("/assets/images/common/titleTypeA01_ico_03.webp") top center / 100% auto no-repeat;
}
.titleTypeA01 span strong.ico_login::before{
height: 39px;
background: url("/assets/images/common/titleTypeA01_ico_04.webp") top center / 100% auto no-repeat;
}
.titleTypeA01 span strong.ico_sitemap::before{
height: 33px;
background: url("/assets/images/common/titleTypeA01_ico_05.webp") top center / 100% auto no-repeat;
}
.titleTypeA01 span strong.ico_map::before{
height: 39px;
background: url("/assets/images/common/titleTypeA01_ico_06.webp") top center / 100% auto no-repeat;
}
.titleTypeA01 span strong.ico_contact::before{
height: 39px;
background: url("/assets/images/common/titleTypeA01_ico_07.webp") top center / 100% auto no-repeat;
}
.titleTypeA01 span strong.ico_faq::before{
width: 36px;
height: 36px;
background: url("/assets/images/common/titleTypeA01_ico_08.webp") top center / 100% auto no-repeat;
}
@media (max-width: 768px){
.titleTypeA01{
margin: 0 auto 3.0rem;
}
.titleTypeA01 span{
width: 100%;
font-size: 1.8rem;
padding: 1.5rem 0;
}
.titleTypeA01 span::before{
height: 0.3rem;
}
.titleTypeA01 span::after{
height: 0.3rem;
}
.titleTypeA01 span strong[class^="ico_"]{
padding: 0 3.8rem 0 0;
}
.titleTypeA01 span strong[class^="ico_"]::before{
width: 3.2rem;
}
.titleTypeA01 span strong.ico_search::before{
height: 2.8rem;
}
.titleTypeA01 span strong.ico_adviser::before{
height: 2.2rem;
}
.titleTypeA01 span strong.ico_mypage::before{
height: 2.8rem;
}
.titleTypeA01 span strong.ico_login::before{
height: 2.8rem;
}
.titleTypeA01 span strong.ico_sitemap::before{
height: 2.6rem;
}
.titleTypeA01 span strong.ico_map::before{
height: 2.9rem;
}
.titleTypeA01 span strong.ico_contact::before{
height: 2.9rem;
}
.titleTypeA01 span strong.ico_faq::before{
width: 2.6rem;
height: 2.6rem;
}
}

/*----------------------------------------------------------
list
----------------------------------------------------------*/
.listTypeA01{
display: flex;
}
.listTypeA01 > li{
width: 40px;
height: 40px;
background: #ddd;
color: #fff;
font-size: 1.2rem;
text-align: center;
line-height: 1.4;
border-radius: 3px;
margin: 0 5px 0 0;
display: flex;
justify-content: center;
align-items: center;
}
.listTypeA01 > li:last-child{
margin-right: 0;
}
.listTypeA01 > li.kisotsu.active{
background: #b00000;
}
.listTypeA01 > li.daini.active{
background: #00b684;
}
.listTypeA01 > li.shinsotsu.active{
background: #17b3ff;
}
@media (max-width: 768px){
.listTypeA01 > li{
width: 3.0rem;
height: 3.0rem;
font-size: 1.0rem;
line-height: 1.2;
border-radius: 0.3rem;
margin: 0 0.5rem 0 0;
}
}


[class^="listTypeD"]{
display: flex;
flex-wrap: wrap;
}
[class^="listTypeD"] > li{
margin: 0 5px 5px 0;
}
[class^="listTypeD"] > li:last-child{
margin-right: 0;
}
[class^="listTypeD"] > li > *{
font-weight: bold;
line-height: 1.0;
border-width: 2px;
border-style: solid;
border-radius: 100px;
display: inline-block;
}
[class^="listTypeD"] > li.kisotsu > *{
color: #b00000;
border-color: #b00000;
}
[class^="listTypeD"] > li.daini > *{
color: #00b684;
border-color: #00b684;
}
[class^="listTypeD"] > li.shinsotsu > *{
color: #17b3ff;
border-color: #17b3ff;
}
[class^="listTypeD"] > li.urgent > *{
color: #ff646d;
border-color: #ff646d;
}
[class^="listTypeD"] > li.job > *{
color: #6935d0;
border-color: #6935d0;
}
[class^="listTypeD"] > li.formality > *{
color: var(--color_orange01);
border-color: var(--color_orange01);
}
.listTypeD01 > li > *{
font-size: 1.0rem;
padding: 5px 15px 4px;
}
.listTypeD02 > li > *{
font-size: 1.4rem;
padding: 8px 20px 6px;
}
@media (max-width: 768px){
[class^="listTypeD"] > li{
margin: 0 0.5rem 0.5rem 0;
}
.listTypeD01 > li > *{
padding: 0.5rem 1.0rem 0.3rem;
}
.listTypeD02 > li > *{
font-size: 1.0rem;
padding: 0.5rem 1.0rem 0.3rem;
}
}

/*----------------------------------------------------------
button
----------------------------------------------------------*/
.btnTypeA01{
text-align: center;
}
.btnTypeA01 a{
width: 420px;
color: #fff;
font-size: 2.4rem;
font-weight: bold;
text-align: center;
letter-spacing: 0.2rem;
border-bottom-width: 5px;
border-bottom-style: solid;
padding: 20px 20px;
position: relative;
}
.btnTypeA01 a::before{
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.btnTypeA01.orange a{
background: var(--color_orange01);
border-bottom-color: var(--color_orange02);
}
.btnTypeA01.green a{
background: var(--color_green01);
border-bottom-color: var(--color_green02);
}
@media (max-width: 768px){
.btnTypeA01 a{
width: 100%;
font-size: 1.8rem;
border-bottom-width: 0.4rem;
padding: 2.0rem 2.0rem 1.8rem;
}
.btnTypeA01 a::before{
width: 0.8rem;
height: 0.8rem;
right: 2.0rem;
}
}

.btnTypeB01{
display: flex;
align-items: center;
justify-content: space-between;
}
.btnTypeB01 .btn{
width: calc((100% - 30px) / 2);
}
.btnTypeB01 .btn a{
color: #fff;
font-size: 2.0rem;
font-weight: bold;
text-align: center;
letter-spacing: 0.2rem;
border-bottom-width: 5px;
border-bottom-style: solid;
padding: 15px 20px;
display: block;
position: relative;
}
.btnTypeB01 .btn a::before{
content: "";
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.btnTypeB01 .btn.orange a{
background: var(--color_orange01);
border-bottom-color: var(--color_orange02);
}
.btnTypeB01 .btn.green a{
background: var(--color_green01);
border-bottom-color: var(--color_green02);
}
@media (max-width: 768px){
.btnTypeB01{
display: block;
}
.btnTypeB01 .btn{
width: 100%;
}
.btnTypeB01 .btn + .btn{
margin-top: 1.0rem;
}
.btnTypeB01 .btn a{
width: 100%;
font-size: 1.8rem;
border-bottom-width: 0.4rem;
padding: 1.5rem 0 1.2rem;
}
.btnTypeB01 .btn a::before{
width: 0.8rem;
height: 0.8rem;
right: 2.0rem;
}
}