@charset "utf-8";
/* CSS Document */

.main {background: url("/common/images/about/mainBg.png") center bottom no-repeat; background-size: 100% auto; height: 250px;}
.aboutNav {font-size: 18px; width: 920px; border-bottom: 1px solid #6c9f2f;display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start; margin: 5% auto;}
.aboutNav a {border-radius: 15px 15px 0 0; padding: .7em 1.5em; display: block; background: #ecf3ed; color: #fff; transition: all 0.2s;}
.aboutNav a:not(.bg_grn):hover {background: #fdd000;}
.aboutNav .bg_grn {cursor: default;}
.linkFor {background: url("/common/images/about/linkBg.jpg") #fbfbfc center bottom no-repeat; background-size: 100% auto; text-align: center;}
.linkFor .sectionTitle {line-height: 1.3;}
.linkFor .sectionTitle:before,.linkFor .sectionTitle:after {width: 29%; top: auto; bottom: 20%;}
.linkFor .container div {width: 450px;}
.linkFor p {text-align: left; margin: 1% auto;}
.linkFor p:before {content: "▼ ";}
.linkFor a {font-size: 24px; letter-spacing: 0.05em; display: inline-block; text-align: center; border-radius: 5px; padding: .5em 0; box-sizing: border-box; line-height: 1.4; width: 100%;}
.linkFor a:hover {margin: 1px -1px -1px 1px;}
.linkFor a span {display: block; font-size: 15px; letter-spacing: 0.03em;}
.linkFor a span:before {content: "＼ ";}
.linkFor a span:after {content: " ／";}
.linkFor .staffApply {margin: 0 auto 4%;}
.linkFor .viewJobInfo { margin: 0 auto 7%;}
.dataBlock {width: 920px; margin: 3% auto; overflow: hidden;}
.dataBlock dl {display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; flex-wrap: wrap;margin: 0 auto;}
.dataBlock dt {font-size: 18px; border-left: 12px solid #fdd000; line-height: 1.3; padding: .2em 1em; box-sizing: border-box; width: 100%; margin-top: 5%}
.txt,.img {width: 50%;}
.left.img {text-align: left;}
.right.img {text-align: right;}
.dataBlock dd {width: 85%; margin: 5%;}
.dataBlock dd p {margin: 0 auto 3%; letter-spacing: 0.03em; line-height: 1.7;}
#hakenFlow {margin-bottom: 3%; text-align: center;}
#hakenFlow .link {font-size: 24px; width: 450px; text-align: center; padding: 0.5em 0; box-sizing: border-box; display: inline-block; border-radius: 5px; font-weight: 400; line-height: 1.4; text-shadow: 2px 2px 0 #ffbd00; max-width: 100%;}
#hakenFlow .link span {display: block; font-size: 16px;}
#hakenFlow .link:hover {margin: 1px -1px -1px 1px;}
.dataBlock ul {width: 920px; margin: 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: space-between; justify-content: space-between;}
.dataBlock ul li {width: 290px; text-align: left;}
#hakenLaw {margin: 1% auto 5%; text-align: center;}
#hakenLaw .aboutNav {margin-bottom: 4%;}
#hakenLaw .intro {display: inline-block; text-align: right; margin-bottom: 3%;}
#hakenLaw .intro span {display: block; font-size: 14px;}
.laws {background: #f7f7f7; padding: 30px 35px; box-sizing: border-box; width: 880px; list-style: disc inside; text-align: left;}
.laws li {margin: 1% auto;}
.laws li:not(.pdf):after {content: url("/common/images/about/link.png"); margin-left: .5em;}
.laws a {display: inline-block;}
.laws .pdf:after {background: url("/common/images/about/pdfDown.png") center center no-repeat; margin-left: .5em; content: "▶"; color: transparent; background-size: 100% auto;}

@media screen and (max-width:896px) {
    .main .right {position: absolute; bottom: 0; right: 0;}
    .aboutNav {width: 100%; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center;}
    .aboutNav li {width: 49%; margin: 1px;}
    .aboutNav a {padding: .7em 0; display: block; width: 100%; text-align: center; border-radius: 5px;}
    .dataBlock,.dataBlock dd,.txt,.img,.laws {width: 100%;}
    .img {text-align: center !important;}
    .dataBlock {padding: 0 5%; box-sizing: border-box;}
    .dataBlock dd { margin: 5% auto 2%; font-size: 1.2em;}
    .dataBlock dd p {text-align: left; line-height: 1.5;}
    #hakenMerit .aboutNav {margin-bottom: 0;}
    #hakenMerit .dataBlock {padding: 5%; margin: 0 auto}
    #hakenMerit .dataBlock:nth-of-type(2n) {background: #f9f9f9;}
    .dataBlock ul,.dataBlock ul li {width: 100%;}
    .dataBlock ul {flex-wrap: wrap;}
    .dataBlock ul li {margin-bottom: 3%; border-bottom: 1px dashed #eee;}
    .dataBlock dt,.dataBlock ul li dd {margin-top: 2%;}
    #hakenFlow img {display: block; margin: 0 auto;}
    .laws {padding: 1em 1.5em;}
    .dataBlock ul li dd {margin-bottom: 3%;}
}
@media screen and (max-width: 600px) {
    #hakenLaw .intro {text-align: left;}
    .dataBlock dd {font-size: 1.1em;}
    .laws {list-style: none;}
    .laws li { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-start; justify-content: flex-start;}
    .laws li:before {content: "-"; margin-right: .5em}
}
@media screen and (max-width: 480px) {
    .aboutNav {font-size: 3.3vw;}
    .main .right {right: -25%;}
    .img,.dataBlock dl {margin: 3% auto;}
    #hakenFlow .link {font-size: 5vw;}
    #hakenFlow .link span {font-size: 3vw;}
}
@media screen and (max-width:380px) {
    .dataBlock dt {border-left: 2.5vw solid #fdd000; font-size: 4.5vw;}
    .dataBlock dd,.laws li {font-size: 4vw}
    #hakenLaw .intro {padding: 0 1em; margin-bottom: 5%;}
    .dataBlock dd br {display: none;}
    .laws li {margin: 2% auto;}
}