@charset "UTF-8";
/* CSS Document */
/*
font-family: 'Alata', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
*/

header{
background: #D1E1E6 url("/img/r_title.jpg") no-repeat center right/ auto 100%;
}
header .title{
position: absolute;
top: 60%;
left: 5rem;
transform: translateY(-50%);
}
header h1{
position: relative;
font-family: 'Josefin Sans', sans-serif;
font-size: 9rem;
top: 50%;
left: 0;
margin: 0;
letter-spacing: 0.3rem;
line-height: 3rem;
color: #005166;
}
header h1 span{
font-size: 2rem;
color: #373542;
display: inline-block;
margin-left: 2rem;
}
header p{
font-size: 3.5rem;
font-family: 'Noto Serif JP', serif;
letter-spacing: 0.3rem;
font-weight: 600;
mix-blend-mode: multiply;
color: #54A1BB;
}
header p span{
display: block;
font-size: 2.5rem;
}
@media (max-width: 992px) {
header h1{font-size: 7rem;line-height: 2rem;}
header h1 span{margin-left: 1.5rem;}
header p{font-size: 2.5rem;}
header p span{font-size: 1.8rem;}
}
@media (max-width: 751px) {
header{background: url("/img/r_title.jpg") no-repeat center left / auto 100%;}
header .title{left: 3rem;top: 55%;}
header h1{font-size: 5rem;}
header h1 span{margin-left: 1.5rem;font-size: 1.8rem;}
header p{font-size: 2rem;}
header p span{font-size: 1.6rem;}
}

/*---nav2---*/
nav.tab-r{
position: fixed;
top:20px;
right: 0;
z-index: 10;
}
nav.tab-r li{
display: block;
margin-bottom: 1rem;
}
nav.tab-r li a{
display: block;
color: #fff;
padding: 2.5rem 1.5rem 2.5rem;
border: 3px solid #fff;
border-right: none;
border-radius: 20px 0 0 20px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
line-height: 1.7;
font-size: 1.3rem;
letter-spacing: 0.2rem;
font-weight: 600;
background: linear-gradient(150deg, rgba(91, 160, 161, 1) 10%, rgba(198, 150, 180, 1) 90%);
transition:0.3s;
}
nav.tab-r li a:hover{
opacity: .8;
}
nav.tab-r li a img{
display: inline-block;
width: 40px;
margin-top: 1rem;
}
@media (max-width: 992px) {
nav.tab-r{display: none;}
}

#r-menu{
background: url("/img/r_menu_back.jpg") no-repeat top center / cover;
padding-top: 15%;
padding-bottom: 4rem;
}
#r-menu .title{
font-family: 'Noto Serif JP', serif;
color: #fff;
text-align: center;
position: relative;
text-shadow: 1px 1px 10px rgb(180,132,128), 0 0 5em rgb(180,132,128), 0 0 0.2em rgb(180,132,128);
}
#r-menu .title p{
font-size: 4rem;
letter-spacing: 0.1rem;
line-height: 4.5rem;
}
#r-menu .title h2{
font-size: 8rem;
letter-spacing: 0.3rem;
line-height: 8.5rem;
}
#r-menu .box ul{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
}
#r-menu .box li img{
width: 100%;
}
#r-menu .box p{
margin-top: 1rem;
text-align: center;
font-size: 2.5rem;
color: #fff;
letter-spacing: 0.3rem;
line-height: 5rem;
font-weight: 500;
text-shadow: 1px 1px 10px rgb(180,132,128), 0 0 5em rgb(180,132,128), 0 0 0.2em rgb(180,132,128);
}
@media (max-width: 992px) {
#r-menu .title p{font-size: 2rem;line-height: 2.5rem}
#r-menu .title h2{font-size: 4rem;line-height: 4.5rem;}
#r-menu .box p{font-size: 1.8rem;line-height: 3rem;}
}
@media (max-width: 751px) {
#r-menu{background: url("/img/r_menu_back-s.jpg") no-repeat top center / cover;padding-top: 25%;}
#r-menu .box ul{grid-template-columns: 1fr 1fr;gap: 15px;}
#r-menu .box li{padding: 0;}
#r-menu .title p{font-size: 2rem;line-height: 3rem;}
#r-menu .title h2{margin-top: 1.5rem;}
#r-menu .box p{font-size: 1.8rem;text-align: left;}
}

menu{
padding: 0!important;
margin: 0!important;
}
menu ul{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin: 0;padding: 0;
}
menu ul li{
margin: 0;
}
menu ul li:last-of-type{
display: none;
}
menu ul li a{
display: flex;
align-items: center;
justify-content: center;
background: #8BB8BF;
width: 100%;
height: 100%;
color: #fff;
padding: 1rem;
text-align: center;
font-weight: 500;
letter-spacing: 0.1rem;
}
menu ul li a.active{
background: #4F7F89;
}
menu ul li a:hover{
color: #fff;
background: #4F7F89;
}
@media (max-width: 992px) {
menu ul li:last-of-type{display: grid;}
menu ul{grid-template-columns: repeat(4, 1fr);gap: 5px;}
}

#r-button{
padding: 5rem 0;
} 
#r-button ul{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
#r-button ul li a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #fff;
padding: 5rem 2rem;
text-align: center;
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.3rem;
}
#r-button ul li a:hover{
  animation: pulse;
  animation-duration: 1s;
opacity: .8;
}
#r-button ul li:nth-of-type(1){
border: 3px solid #4F7F83;
padding: 5px;
}
#r-button ul li:nth-of-type(1) a{
background: #4F7F83;
}
#r-button ul li:nth-of-type(2){
border: 3px solid #806A8A;
padding: 5px;
}
#r-button ul li:nth-of-type(2) a{
background: #806A8A;
}
@media (max-width: 751px) {
#r-button ul{padding: 0;}
}

#r-job{
background: url("/img/r-job-back01.jpg"), url("/img/r-job-back02.jpg");
background-position: left top, right top;
background-repeat: no-repeat, no-repeat;
background-size: 189px auto, 229px auto;
background-color: #393843;
padding: 7rem 0 5rem;
}
#r-job h3{
color: #fff;
text-align: center;
font-size: 2rem;
letter-spacing: 0.7rem;
margin: 0 0 3rem;
}
#r-job ul.link1{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
#r-job ul.link2{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
#r-job ul.link3{
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-top: 5rem;
position: relative;
}
#r-job ul.link3 img{
display: block;
position: absolute;
bottom: 2rem;
right: 4rem;
width: 150px;
}
#r-job ul li a{
display: block;
width: 100%;
height: 100%;
color: #fff;
padding: 5rem 2rem;
text-align: center;
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.3rem;
border: 3px solid #fff;
}
#r-job ul li a p{
font-size: 1.6rem;
margin-top: 2rem;
}
#r-job ul li a:hover{
animation: pulse;
animation-duration: 1s;
}
#r-job ul.link3 li a:hover{
animation: none;
opacity: .8;
}
#r-job ul.link3 li a:hover img{
right: 3rem;
transition: all 0.3s;
}
#r-job .link1 li:nth-of-type(1) a{
background: url("/img/r-job01.jpg") no-repeat center / cover;
}
#r-job .link1 li:nth-of-type(2) a{
background: url("/img/r-job02.jpg") no-repeat center / cover;
}
#r-job .link1 li:nth-of-type(3) a{
background: url("/img/r-job03.jpg") no-repeat center / cover;
}
#r-job .link2 li:nth-of-type(1) a{
background: url("/img/r-job07.jpg") no-repeat center / cover;
}
#r-job .link2 li:nth-of-type(2) a{
background: url("/img/r-job04.jpg") no-repeat center / cover;
padding-top: 7rem;
}
#r-job .link2 li:nth-of-type(3) a{
background: url("/img/r-job08.jpg") no-repeat center / cover;
}
#r-job .link3 li a{
background: url("/img/r-job06.jpg") no-repeat center / cover;
text-align: left;
padding-left: 5rem;
}
@media (max-width: 992px) {
#r-job h2{font-size: 5rem;line-height: 5rem;}
#r-job li a,#r-job li span{padding: 2rem 2rem;}
}
@media (max-width: 751px) {
#r-job ul{padding: 0;}
#r-job ul.link1{grid-template-columns: 1fr;}
#r-job ul.link2{grid-template-columns: 1fr;}
#r-job ul li a{padding: 2rem 2rem;}
#r-job .link2 li:nth-of-type(2) a{padding-top: 2rem;}
#r-job .link2 li:nth-of-type(3) a{padding-top: 2rem;}
#r-job ul li a p{margin-top: 1rem;}
#r-job .link3 li a{padding: 2rem;}
}

#r-interview{
background-image: url("/img/r-interview-back1.jpg"), url("/img/r-interview-back2.jpg");
background-position: right 50px top 20px, left bottom;
background-repeat: no-repeat, no-repeat;
background-size: 88px auto, 287px auto;
background-color: #393843;
padding: 5rem 0 10rem;
position: relative;
}
#r-interview h3{
display: inline-block;
position: absolute;
top: 0;
left: -2rem;
background: #4D7F91;
border: 1px solid #fff;
border-left: none;
padding: 2rem 5rem 2rem 7rem;
color: #fff;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1rem;
box-shadow:rgb(57, 56, 67) 10px 10px 0px -1px, rgb(255, 255, 255) 10px 10px;
}
#r-interview .link1{
padding-right: 5rem;
margin-top: 15rem;
position: relative;
}
#r-interview .link2,#r-interview .link4{
padding-left: 5rem;
margin-top: 7rem;
position: relative;
}
#r-interview .link3,#r-interview .link5{
padding-right: 5rem;
margin-top: 7rem;
position: relative;
}
#r-interview a{
display: block;
background: #D4D4D6;
text-align: right;
height: 250px;
}
#r-interview a .photo{
background: url(/img/r-i-man01-01.jpg) center center / cover;
width: calc(100% - 350px);
height: 250px;
position: absolute;
top:-3rem;
left: 0;
}
#r-interview a .name1{
margin: 0 0 0 auto;
width: 300px;
padding: 3rem;
text-align: left;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.2rem;
}
#r-interview a span{
color: #558880;
display: inline-block;
margin-top: 2rem;
}
#r-interview a .name2{
font-family: 'La Belle Aurore', cursive;
position: absolute;
bottom: -4.5rem;
right: 8rem;
font-size: 9rem;
color: #fff;
}
#r-interview .link2 a{
text-align: left!important;
}
#r-interview .link2 a .photo{
background: url(/img/r-i-man02-01.jpg) center center / cover;
top:-3rem;
left: auto;
right: 0;
}
#r-interview .link3 a .photo{
background: url(/img/r-i-man03-01.jpg) center center / cover;
top:-3rem;
left: 0;
right: 0;
}
#r-interview .link4 a .photo{
background: url(/img/r-i-man04-01.jpg) center center / cover;
top:-3rem;
left: auto;
right: 0;
}
#r-interview .link5 a .photo{
background: url(/img/r-i-man05-01.jpg) center center / cover;
top:-3rem;
left: 0;
right: 0;
}
#r-interview .link2 a .name1,#r-interview .link4 a .name1{
margin: 0 auto 0 0;
}
#r-interview .link2 a span{
}
#r-interview .link2 a .name2{
bottom: -4.5rem;
left: 8rem;
}
@media (max-width: 992px) {
#r-interview a .name2,#r-interview .link2 a .name2{font-size: 5rem;bottom: -2rem;}
}
@media (max-width: 751px) {
#r-interview{padding: 5rem 0 10rem;background-position: right 20px top 20px, left bottom;}
#r-interview h3{font-size: 1.8rem;padding: 1rem 4rem 1rem 6rem;}
#r-interview .link1{padding-right: 1.5rem;margin-top: 10rem;}
#r-interview .link2{padding-left: 1.5rem;margin-top: 7rem;}
#r-interview a{height: auto;}
#r-interview a .photo{
width: calc(100% - 1.5rem);
height: 150px;
position: relative;
top:-1.5rem;
}
#r-interview a .name1{
margin: 0;
width: auto;
padding: 0 1.5rem 1.5rem;
text-align: left;
font-size: 1.6rem;
}
#r-interview a .name2{
font-size: 4rem;
top: 10rem;
right: 1rem;
}
#r-interview .link2 a .photo{
right: -1.5rem;
}
#r-interview .link2 a .name1{
margin-top: -1.5rem;
padding: 0 1.5rem 1.5rem;
text-align: right;
}
#r-interview .link2 a .name2{
font-size: 4rem;
top: 8.5rem;
right: auto;
left: 1rem;
}
}
#r-interview  ul.link3{
margin-top: 10rem;
position: relative;
}
#r-interview  ul.link3 img{
display: block;
position: absolute;
bottom: 2rem;
right: 8rem;
width: 150px;
}

#r-interview  ul li a{
display: block;
width: 100%;
height: 100%;
color: #fff;
padding: 5rem 2rem;
text-align: center;
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.3rem;
border: 3px solid #fff;
}
#r-interview  ul li a p{
font-size: 1.6rem;
margin-top: 2rem;
padding-right: 150px;
}
#r-interview  ul li a:hover{
animation: pulse;
animation-duration: 1s;
}
#r-interview  ul.link3 li a:hover{
animation: none;
opacity: .8;
}
#r-interview  ul.link3 li a:hover img{
right: 6rem;
transition: all 0.3s;
}
#r-interview .link3 li a{
background: url("/img/r-qanda-back.jpg") no-repeat center right / cover;
text-align: left;
padding-left: 5rem;
}
@media (max-width: 992px) {
#r-interview  ul li a p{padding-right: 0;}
#r-interview .link3 li a{padding-left: 3rem;}
}
@media (max-width: 751px) {
#r-interview{padding: 5rem 0 7rem;}
#r-interview  ul.link3{margin-top: 7rem;}
}

#r-links{
background-color: #393843;
padding: 0 0 15rem;
}
#r-links div{
text-align: center;
}
#r-links a{
display: inline-block;
width: 31%;
margin-right: 2%;
margin-top: 1rem;
min-width: 200px;
}
#r-links img{
width: 100%;
}
@media (max-width: 751px) {
#r-arrow {padding: 3rem 3rem 5rem;}
#r-links{padding: 0 0 10rem;}
}