@charset "UTF-8";
/* CSS Document */
/*PC*/
@media print, screen and (min-width: 768px) {
.tab-group {
display: flex;
justify-content: center;
width: 80%;
margin: 0 auto 150px;
}
.tab {
flex-grow: 1;
padding: 20px 5px;
list-style: none;
text-align: center;
cursor: pointer;
color: #999999;
text-align: center;
width: 320px;
display: block;
height: 100%;
font-size: 1rem;
}
.panel-group {
border: solid 1px #CCC;
border-top: none;
}
.panel {
display: none;
}
.tab.is-active {
border-top: solid 1.5px #021741;
transition: all 0.2s ease-out;
color: #021741;
}
.panel.is-show {
display: block;
}
.top_box .img_box {
background-size: cover;
background: url("../images/career/hed_img_01.jpg");
width: 90%;
height: 450px;
position: relative;
max-width: 1285px;
}
.top_box .img_box .section_second_tit {
position: absolute;
bottom: 0;
background: #fff;
padding: 30px 50px;
box-sizing: border-box;
font-size: 1.6rem;
letter-spacing: 3px;
}
.top_box .img_box .section_second_tit span {
display: block;
font-size: 1rem;
letter-spacing: 1px;
}
.content_box {
max-width: 960px;
width: 100%;
margin: 0 auto 0 auto;
padding-top: 100px;
}
.content_box h3 {
font-size: 2rem;
margin: 0 0 20px;
}
.content_box .text {
font-size: 1.1rem;
margin-top: 30px;
}
.content_box .img {
margin-top: 20px;
}
/*tab-A  */
.tab-A .painter_list {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
}
.tab-A .painter_list li {
width: calc(100%/3 - 3px);
text-align: center;
border: solid 1px #ddd;
padding: 10px;
box-sizing: border-box;
}
.tab-A .list_tit {
font-size: 1rem;
margin-top: 30px;
text-align: center;
background: #0b2e74;
color: #fff;
}
.tab-A .cont02 {
margin: 80px 0 200px;
}
/*tab-B  */
.tab-B .top_box .img_box {
background-size: cover;
background: url("../images/career/hed_img_02.jpg");
width: 90%;
height: 450px;
position: relative;
max-width: 1285px;
}
.tab-B .content_box ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.tab-B .content_box ul li {
width: 50%;
}
.tab-B .painter_list {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
}
.tab-B .painter_list li {
width: calc(100%/3 - 3px);
text-align: center;
border: solid 1px #ddd;
padding: 10px;
box-sizing: border-box;
}
.tab-B .list_tit {
font-size: 1rem;
margin-top: 30px;
text-align: center;
background: #0b2e74;
color: #fff;
}
.tab-B .cont02 {
margin: 80px 0 200px;
}

.flow_design03 {
width:100%;
display: flex;
justify-content: center;
align-items: center;
margin:0 auto 60px;
}

.flow_design03 ul {
width: 90%;
margin: auto;
padding: 0;
}

.flow_design03 li {
list-style-type: none;
}

.flow_design03 dd {
margin-left: 0;
}

.flow03 {
position: relative;
}

.flow03::before {
content: "";
width: 15px;
height: 100%;
background: #eee;
margin-left: -9px;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
}

.flow03 > li {
position: relative;
width: 100% !important;
}

.flow03 > li:not(:last-child) {
margin-bottom: 40px;
}

.flow03 > li .icon03 {
font-size: 0.8em;
width: 2em;
height: 2em;
line-height: 2;
text-align: center;
font-weight: bold;
border-radius: 100vh;
color: #fff;
background: #0b2e74;
display: inline-block;
margin-right: 0.3em;
}

.flow03 > li dl {
padding-left: 50px;
position: relative;
}

.flow03 > li dl::before,
.flow03 > li dl::after {
content: "";
display: block;
position: absolute;
top: 15px;
}

.flow03 > li dl::before {
width: 7px;
height: 7px;
margin-top: -3px;
background: #0b2e74;
border-radius: 50%;
left: -4px;
}

.flow03 > li dl::after {
width:45px;
border-bottom: 1px dashed #999;
position: absolute;
left: 5px;
}

.flow03 > li dl dt {
font-size: 1.4em;
font-weight: 600;
color: #0b2e74;
margin-bottom: 0.5em;
display: flex;
align-items: center;
}

.flow03 > li dl dd {
font-size: 1.2em;
margin-left: 30px;
}

}
/*sp*/
@media only screen and (max-width: 767px) {
.tab-group {
display: flex;
justify-content: center;
width: 90%;
margin: 0 auto 70px;
}
.tab {
flex-grow: 1;
padding: 20px 5px;
list-style: none;
text-align: center;
cursor: pointer;
color: #999999;
text-align: center;
width: 320px;
display: block;
height: 100%;
font-size: .9rem;
}
.panel {
display: none;
}
.tab.is-active {
border-top: solid 1.5px #021741;
transition: all 0.2s ease-out;
color: #021741;
}
.panel.is-show {
display: block;
}
.tab-A .top_box .img_box {
background: url("../images/career/hed_img_01_sp.jpg");
background-size: auto;
width: 97%;
height: 600px;
position: relative;
background-size: cover;
background-position: center;
}
.top_box .img_box .section_second_tit {
position: absolute;
bottom: 0;
background: #fff;
padding: 20px;
box-sizing: border-box;
font-size: 1.3rem;
letter-spacing: 3px;
}
.top_box .img_box .section_second_tit span {
display: block;
font-size: .9rem;
letter-spacing: 1px;
}
.content_box {
width: 100%;
margin: 0 auto 0 auto;
padding: 60px 3%;
box-sizing: border-box;
}
.content_box h3 {
font-size: 1.2rem;
margin: 0 0 20px;
}
.content_box .text {
font-size: 1rem;
margin-top: 20px;
}
.content_box .img {
margin-top: 20px;
}
.tab-A .painter_list {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
}
.tab-A .painter_list li {
width: calc(100%/3 - 3px);
text-align: center;
border: solid 1px #ddd;
padding: 10px;
box-sizing: border-box;
}
.tab-A .list_tit {
font-size: 1rem;
margin-top: 30px;
text-align: center;
background: #0b2e74;
color: #fff;
}
.tab-A .cont02 {
margin: 30px 0 0;
}
.tab-B .top_box .img_box {
background: url("../images/career/hed_img_02_sp.jpg");
width: 97%;
height: 600px;
position: relative;
background-size: cover;
background-position: center;
}
.tab-B .content_box ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.tab-B .content_box ul li {
width: 50%;
}
.tab-B .painter_list {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
}
.tab-B .painter_list li {
width: calc(100%/3 - 3px);
text-align: center;
border: solid 1px #ddd;
padding: 10px;
box-sizing: border-box;
}
.tab-B .list_tit {
font-size: 1rem;
margin-top: 30px;
text-align: center;
background: #0b2e74;
color: #fff;
}
.tab-B .cont02 {
margin: 60px 0 0;
}

.flow_design03 {
width:100%;
display: flex;
justify-content: center;
align-items: center;
margin:0 auto 60px;
}

.flow_design03 ul {
width: 90%;
margin: auto;
padding: 0;
}

.flow_design03 li {
list-style-type: none;
}

.flow_design03 dd {
margin-left: 0;
}

.flow03 {
position: relative;
}

.flow03::before {
content: "";
width: 10px;
height: 100%;
background: #eee;
margin-left: -10px;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 50rem;
}

.flow03 > li {
position: relative;
width: 100% !important;
}

.flow03 > li:not(:last-child) {
margin-bottom: 40px;
}

.flow03 > li .icon03 {
font-size: 0.8em;
width: 2em;
height: 2em;
line-height: 2;
text-align: center;
font-weight: bold;
border-radius: 100vh;
color: #fff;
background: #0b2e74;
display: inline-block;
margin-right: 0.3em;
}

.flow03 > li dl {
padding-left: 20px;
position: relative;
}

.flow03 > li dl::before,
.flow03 > li dl::after {
content: "";
display: block;
position: absolute;
top: 15px;
}

.flow03 > li dl::before {
width: 7px;
height: 7px;
margin-top: -3px;
background: #0b2e74;
border-radius: 50%;
left:-8px;
}

.flow03 > li dl::after {
width:18px;
border-bottom: 1px dashed #999;
position: absolute;
left: 5px;
z-index: -1;
}

.flow03 > li dl dt {
font-size: 1.2em;
font-weight: 600;
color: #0b2e74;
margin-bottom: 0.5em;
display: flex;
align-items: center;
}

.flow03 > li dl dd {
font-size:.9em;
margin-left:0px;
}

}