@charset "utf-8";
/* greeting */
#greeting .wrap {margin: 150px 20px; position: relative; display: flex;}
#greeting .wrap .ttl {position: absolute; top: 0; left: 0; color: #222; font-size: clamp(40px, 4.25vw, 80px); font-family: 'Josefin Sans', sans-serif; font-weight: bold; writing-mode: vertical-rl;}
/* #greeting .wrap .content {padding-left: calc( clamp(40px, 4.25vw, 80px) * 1.75);} */
#greeting .wrap .content h2 {font-size: clamp(30px, 2.75vw, 50px); margin: 0 0 50px 0; color: #003687;}
#greeting .wrap .content p {margin: 0 0 1em 0;}
@media screen and (max-width:1200px) {
    #greeting .wrap {margin: 150px 10px;}
}
@media screen and (max-width:1000px) {
    #greeting .wrap {margin: 100px 10px;}
}
@media screen and (max-width:768px) {
    #greeting .wrap {margin: 70px 10px;}
    #greeting .wrap .ttl {font-size: 30px;}
    /* #greeting .wrap .content {padding-left: calc( 30px * 1.75);} */
    #greeting .wrap .content h2 {font-size: 25px; margin: 0 0 30px 0;}
}
@media screen and (max-width:590px) {
    #greeting .wrap {margin: 70px 5px;}
}
/* profile */
#profile .wrap {margin: 0 20px 150px; position: relative; display: flex;}
#profile .wrap .ttl {position: absolute; top: 0; left: 0; color: #222; font-size: clamp(40px, 4.25vw, 80px); font-family: 'Josefin Sans', sans-serif; font-weight: bold; writing-mode: vertical-rl;}
/* #profile .wrap .content {padding-left: calc( clamp(40px, 4.25vw, 80px) * 1.75); width: 100%;} */
#profile .wrap .content {width: 100%;}
#profile .wrap .content h2 {font-size: clamp(30px, 2.75vw, 50px); margin: 0 0 50px 0; color: #003687;}
#profile .wrap .content table {width: 100%; border-collapse: collapse;}
#profile .wrap .content table tbody tr th, #profile .wrap .content table tbody tr td {border-top: 1px solid #707070; padding: 30px 0 30px 1em;}
#profile .wrap .content table tbody tr th {text-align: left; width: 30%;}
#profile .wrap .content table tbody tr td {width: 70%;}
#profile .wrap .content table tbody tr:last-child th, #profile .wrap .content table tbody tr:last-child td {border-bottom: 1px solid #707070;}
@media screen and (max-width:1200px) {
    #profile .wrap {margin: 0 10px 150px;}
}
@media screen and (max-width:1000px) {
    #profile .wrap {margin: 0 10px 100px;}
}
@media screen and (max-width:768px) {
    #profile .wrap {margin: 0 10px 70px;}
    #profile .wrap .ttl {font-size: 30px;}
    /* #profile .wrap .content {padding-left: calc( 30px * 1.75);} */
    #profile .wrap .content h2 {font-size: 25px; margin: 0 0 30px 0;}
    #profile .wrap .content table tbody tr th, #profile .wrap .content table tbody tr td {display: block; width: 100%;}
    #profile .wrap .content table tbody tr th {padding: 20px 0 0 1em;}
    #profile .wrap .content table tbody tr td {border-top: none; padding: 0 0 20px 1em;}
    #profile .wrap .content table tbody tr:last-child th {border-bottom: none;}
}
@media screen and (max-width:590px) {
    #profile .wrap {margin: 0 5px 70px;}
}
/* access */
#access .wrap {margin: 0 20px 150px; position: relative; display: flex;}
#access .wrap .ttl {position: absolute; top: 0; left: 0; color: #222; font-size: clamp(40px, 4.25vw, 80px); font-family: 'Josefin Sans', sans-serif; font-weight: bold; writing-mode: vertical-rl;}
/* #access .wrap .content {padding-left: calc( clamp(40px, 4.25vw, 80px) * 1.75); width: 100%;} */
#access .wrap .link {width: 100%; max-width: 300px; margin: 0 auto;}
#access .wrap .link a {text-decoration: none; font-family: 'Josefin Sans', sans-serif; font-weight: bold; font-size: clamp(20px, 1.75vw, 30px); background: #fff; color: #003687; border-radius: 10px; display: block; line-height: 2.5; text-align: center; position: relative; transition: .5s;}
#access .wrap .link a:hover {background: #003687; color: #fff;}
#access .wrap .link a::before {position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 10px; background: #003687; border-radius: 0 0 10px 10px;}
#access .wrap .content {width: 100%;}
#access .wrap .content iframe { width: 100%; height: 100%; aspect-ratio: 2 / 1; border-radius: 30px;}
@media screen and (max-width:1200px) {
    #access .wrap {margin: 0 10px 150px;}
}
@media screen and (max-width:1000px) {
    #access .wrap {margin: 0 10px 100px;}
}
@media screen and (max-width:768px) {
    #access .wrap {margin: 0 10px 70px;}
    #access .wrap .ttl {font-size: 30px;}
    /* #access .wrap .content {padding-left: calc( 30px * 1.75);} */
    #access .wrap .content h2 {font-size: 25px; margin: 0 0 30px 0;}
    #access .wrap .content iframe {aspect-ratio: 1; border-radius: 20px;}
    #access .wrap .link {max-width: 200px;}
}
@media screen and (max-width:590px) {
    #access .wrap {margin: 0 5px 70px;}
}
/* recruit */
#recruit .wrap {margin: 150px 20px; position: relative; display: flex;}
#recruit .wrap .ttl {position: absolute; top: 0; left: 0; color: #222; font-size: clamp(40px, 4.25vw, 80px); font-family: 'Josefin Sans', sans-serif; font-weight: bold; writing-mode: vertical-rl;}
/* #recruit .wrap .content {padding-left: calc( clamp(40px, 4.25vw, 80px) * 1.75); width: 100%;} */
#recruit .wrap .content {width: 100%;}
#recruit .wrap .content h2 {font-size: clamp(30px, 2.75vw, 50px); margin: 0 0 50px 0; color: #003687;}
#recruit .wrap .content p {margin: 0 0 1em 0;}
#recruit .wrap .content .txt {margin: 0 0 100px 0;}
#recruit .wrap .content h3 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 30px 0; color: #003687;}
#recruit .wrap .content table {width: 100%; border-collapse: collapse; margin: 0 auto 100px;}
#recruit .wrap .content table:last-child {margin: 0 auto;}
#recruit .wrap .content table tbody tr th, #recruit .wrap .content table tbody tr td {border-top: 1px solid #707070; padding: 30px 0 30px 1em;}
#recruit .wrap .content table tbody tr th {text-align: left; width: 30%;}
#recruit .wrap .content table tbody tr td {width: 70%;}
#recruit .wrap .content table tbody tr:last-child th, #recruit .wrap .content table tbody tr:last-child td {border-bottom: 1px solid #707070;}
@media screen and (max-width:1200px) {
    #recruit .wrap {margin: 0 10px 150px;}
}
@media screen and (max-width:1000px) {
    #recruit .wrap {margin: 0 10px 100px;}
    #recruit .wrap .content .txt {margin: 0 0 70px 0;}
    #recruit .wrap .content table {margin: 0 auto 70px;}
}
@media screen and (max-width:768px) {
    #recruit .wrap {margin: 0 10px 70px;}
    #recruit .wrap .ttl {font-size: 30px;}
    /* #recruit .wrap .content {padding-left: calc( 30px * 1.75);} */
    #recruit .wrap .content h2 {font-size: 25px; margin: 0 0 30px 0;}
    #recruit .wrap .content .txt {margin: 0 0 50px 0;}
    #recruit .wrap .content table {margin: 0 auto 50px;}
    #recruit .wrap .content table tbody tr th, #recruit .wrap .content table tbody tr td {display: block; width: 100%;}
    #recruit .wrap .content table tbody tr th {padding: 20px 0 0 1em;}
    #recruit .wrap .content table tbody tr td {border-top: none; padding: 0 0 20px 1em;}
    #recruit .wrap .content table tbody tr:last-child th {border-bottom: none;}

}
@media screen and (max-width:590px) {
    #recruit .wrap {margin: 0 5px 70px;}
    #recruit .wrap .content h3 {margin: 0 0 20px 0;}
}