@charset "UTF-8";

/* 見出し、フォント
--------------------------------*/
h2{
 font-size: 3rem;
 font-weight: 400;
}

/* メイン画像
--------------------------------*/
.mainimg{
 position: relative;
 width: 100%;
 height:45vw;
 overflow: hidden;
}
.circle{
 position: absolute;
 content:'';
 right:-5vw;
 bottom:0;
 width: 77vw;
 height:77vw;
 background-image: url(../img/top-circle.webp);
 background-size: cover;
 z-index: -2;
}
.top-n
{
 position: absolute;
 content: '';
 left:16vw;
 top:5vw;
 width: 40vw;
 height: 31vw;
 background-image: url(../img/top-n.webp);
 background-size: cover;
 z-index: -1;
}
.top-txt{
 position: absolute;
 left:45%;
 top:14vw;
 font-size: 3vw;
 font-weight: 400;
 color: #000;
 text-shadow: 3px 3px 5px #fff;
 line-height: 160%;
 z-index: 1;
}
@media screen and (max-width: 1600px){
.mainimg
 {
  height:47vw;
 }
.circle
{
 right:-4vw;
}
.top-n{
 width: 42vw;
 height: 33vw;
}
.top-txt{
 top:13vw;
 font-size: 3.5vw;
}
}
@media screen and (max-width: 1100px){
.mainimg{
 height:100vh;
}
.circle
{
 width: 220vw;
 height:220vw;
 right:-80vw;
}
.top-n
{
 width: 65vw;
 height: 52vw;
 right:0;
 left:0;
 margin:0 auto;
 top:20vh;
}
.top-txt
{
  right: 0;
   left: 0;
   margin: 0 auto;
   top: 50vh;
   width: 70vw;
   font-size: 6.5vw;
   text-align: center;
}
}

/* お知らせ
--------------------------------*/
.newsarea{
 position: relative;
}
.news{
 position: absolute;
 top:-9rem;
 left:0;
 right:0;
 margin:0 auto;
 max-width: 100rem ;
 width: 90%;
 height:121px;
}
.news .info
{
 position: relative;
 width: calc(100% - 5rem);
 padding: 1.5rem 2rem 1.5rem 8rem;
 margin-left: 5rem;
 border-radius:9999px;
 background-repeat: 50%;
 background: #fff;
 opacity: 0.8;
 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.news h2{
 position: absolute;
 left: -2rem;
 top:0;
 bottom:0;
 margin: auto 0;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 10.7rem;
 height:10.7rem;
 background: #79ACC4;
 border-radius: 50%;
 font-size: 2.4rem;
 font-family: 'en';
 color: #fff;
}
.news .title{
 margin-bottom: 0.5rem;
 color:#428CB8;
}
.news .title span{
font-weight: 400;
padding-left: 2rem;
}
.news .content{
 font-size: 14px;
}
.news .content a{
display: inline;
text-decoration: underline;
color: #428CB8;
}
@media screen and (max-width: 1700px){
.news
 {
  max-width: 114rem;
  width: 90%;
 }
 .news h2{
  width: 9rem;
  height: 9rem;
  font-size: 2rem;
 }
}
@media screen and (max-width: 1100px) {
.news{
 top:-17vh;
 height: auto;
}
.news h2
{
 width: 61.91px;
 height:61.91px;
 font-size: 1.5rem;
 left: 0;
 top:-30px;
 bottom:auto;
}
.news .info{
 border-radius: 15px;
 margin: 0 auto;
 padding:2rem 1.5rem;
 width: 90%;
}
.news .title{
 font-size: 1.4rem;
 line-height: 1.4;
 margin-bottom: 0.5em;
}
.news time{
 display: block;
 text-align: right;
 margin-bottom: 0.5em;
}
.news .title span{
 display: block;
 padding-left: 0;
}
.news .content{
line-height: 1.4;
}
}

/* 事業エリア
--------------------------------*/
.service{
 margin-top: 120px;
}
.service .container{
display: flex;
justify-content: space-between;
}
.service .container.first{
  flex-direction: row-reverse;
}
.service .imagearea{
 width: 40%;
}
.service .txtarea
{
 width: 53%;
 font-size: 1.6rem;
 line-height: 1.7;
}
.service .container hgroup{
 position: relative;
}
.service .container hgroup p{
 position: absolute;
 top:-4rem;
 left: 0;
 color: #8A9CAA;
 opacity: 0.3;
 font-size: 8rem;
 font-family: 'en';
 z-index: -1;
}
.service .container.first hgroup p
{
 left: auto;
 right: 0;
}
.service .container hgroup h2{
 position: relative;
 padding-bottom: 5rem;
 padding-top: 2rem;
 font-size: 2.5rem;
}
.service .container.first hgroup h2{
text-align: right;
}
.service .container hgroup h2::after{
 position: absolute;
 content: '';
 left:0;
 top:7rem;
 width: 10rem;
 height: 6px;
 background: linear-gradient(90deg,#8be2a7 0%, #81a2bd 100%);
}
.service .container.first hgroup h2::after
{
 left:auto;
 right: 0;
}
.service .txtarea p
{
 padding-bottom: 1rem;
line-height: 1.9;
}
@media screen and (max-width: 1280px){
.service .imagearea
 {
  width: 45%;
 }
 .service .txtarea
 {
  width: 50%;
  font-size: 1.4rem;
  line-height: 1.6;
 }
.service .container hgroup h2
{
 padding-bottom: 4rem;
 font-size: 2rem;
}
.service .container hgroup h2::after{
 height:3px;
 top:6rem;
}
.service .container hgroup p
{
 font-size: 7rem;
}
}
@media screen and (max-width: 1100px){
.service
 {
  margin-top: 120px;
 }
 .service .container
  {
   display: block;
  }
 .service .imagearea{
  width: 100%;
 }
 .service .txtarea
 {
  width: 100%;
  margin-bottom: 1rem;
 }
.service .container hgroup p{
  font-size: 4rem;
  top:-0.8rem
}
.service .container hgroup h2{
  font-size: 1.8rem;
 padding-bottom: 3rem;
}
.service .container hgroup h2::after{
  top:5.3rem;
  width: 40px;
  height:4px;
}
}
@media screen and (max-width: 375px)
{
.service
  {
    margin-top: 180px;
  }
}


/* 採用エリア
--------------------------------*/
.recruit{
 width: 100%;
 padding:4.8rem 0 5rem;
 text-align: center;
 background: linear-gradient(-90deg,#ddf6e6 0%, #dbe6ec 100%);
}
.recruit h2{
 font-size: 2.5rem;
}
.recruit p{
 padding-top: 3rem;
 padding-bottom: 3rem;
 font-size: 1.8rem;
 line-height: 1.9;
}
.recruit a{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 230px;
 height: 50px;
 margin:0 auto;
 font-size: 1.7rem;
 color: #fff;
 background: linear-gradient(-90deg,#81a2bd 0%, #8be2a7 100%);
}
@media screen and (max-width: 1200px){
 .recruit h2{
  font-size: 2.5rem;
 }
}
@media screen and (max-width: 1100px){
 .recruit{
 padding: 3.5rem 0 4rem;
 }
 .recruit h2{
 font-size: 1.8rem;
 }
  .recruit p{
  font-size: 1.5rem;
  padding:1.5rem 6% 2rem;
  text-align: left;
  line-height: 1.6;
 }
.recruit a{
 height:45px;
 font-size: 1.5rem;
}

}