@charset "UTF-8";
body{
   background: #EFF9FB;
}
/* --------------------
   main
-------------------- */

.wrap { max-width: 1180px; }
#main .back {
   position: absolute;
   width: 100%;
   height: 1080px;}
#main .back div {
   z-index: -1;
   position: absolute;}
#main .back div.back3 { top: 0; right: 0;}
/* --------------------
   title
-------------------- */
#pagetitle{ padding-top: 180px }
#pagetitle h1{ margin-bottom: 75px; }
#pagetitle h1 span{
   display: block; }
#pagetitle .photo,
#pagetitle .photo img{
   width: 100%;
}
#pagetitle h1 span.main{
   display: flex;
   gap: 14px;
   align-items: center; }
#pagetitle h1 span.main .txs-24::first-letter{ color: #00A4E0; }
@media screen and (max-width: 1600px){
   #pagetitle .photo{
      height: 300px;
      position: relative;
      overflow: hidden;
      width: 100%; }
   #pagetitle .photo img{
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
}
@media screen and (max-width: 768px){
   #pagetitle{ padding-top: 180px; }
}
@media screen and (max-width: 480px){
   #pagetitle{ padding-top: 140px; }
   #pagetitle h1{ margin-bottom: 35px; }
   #pagetitle .photo{ height: 180px; }
}

h1.tag{
   display: inline-block;
   background-color: #fff;
   color: #00A4E0;
   border-radius: 2em;
   padding: 0.375em 1.25em; }
@media screen and (max-width: 480px){
   h1.tag{
      font-size: 0.75rem;
   }
}
/* -- toplink -- */



/* --------------------
   recruit
-------------------- */
#recruit {
   padding: 160px 40px 0;
   background: #EFF9FB;}
 #recruit .area {
   border-radius: 10px;
   background: url("../images/index/recruit-back.png") no-repeat center center;
   background-size: cover;
   padding: 85px 0;}
 #recruit  .text {
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: 1080px;
   margin: 0 auto;}
 #recruit .text h1 { padding-bottom: 20px;}
 
 @media screen and (max-width: 1280px){
   #recruit { padding: 160px 5vw 0;}
   #recruit .area { padding: 60px 8vw;}
   #recruit .text { flex-wrap: wrap;gap:30px;}
   #recruit .text .left { width: 100%;}}
 @media screen and (max-width: 480px){
   #recruit { padding: 20vw 4vw 0;}
   #recruit .area { padding: 40px 8vw;}
   #recruit .txs-18 { font-size: 16px;}
   #recruit .txs-44 { font-size: 30px;}}
 

/* -- #pglink -- */
#pglink .list{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.75em;
   width: 100%; }

#pglink .list a{
   align-items: center;
   display: flex;
   justify-content: space-between;
   padding: 0.5em 0 0.5em 0.625em;
   border-bottom: solid 1px #00A4E0;
   position: relative;
   width: calc((100% - 1.5em)  / 2); }
#pglink .list .arow{
   transition: .25s;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2.5em;
   height: 2.5em;
   border-radius: 50%;
   background-color: #fff; }
#pglink .list .arow:before{
   content: "";
   transition: .25s;
   margin-top: -0.25em;
   transform: rotate(45deg);
   display: block;
   width: 0.5em;
   height: 0.5em;
   border-bottom: solid 1px #00A4E0;
   border-right: solid 1px #00A4E0; }
@media screen and (min-width: 769px){
   #pglink .list{ gap: 0.75em 1.5em; }
   #pglink .list a{ padding: 1.25em 0 1.25em 0.625em; width: calc((100% - 3em) / 3 ); }
   #pglink .list .item{ font-size: 1.5em; }
   #pglink .list .arow{
      width: 3.125em;
      height: 3.125em; }
}
@media screen and (min-width: 1080px){
   #pglink .list a:hover{ color: #00A4E0; }
   #pglink .list a:hover .arow{ background-color: #00A4E0; }
   #pglink .list a:hover .arow:before{
      border-bottom-color: #fff;
      border-right-color: #fff; }
}
@media screen and (min-width: 1280px){
   #pglink .list{ gap: 0.75em 60px; }
   #pglink .list a{ width: calc((100%  - 120px)/ 3); }
}