@charset "utf-8";
/*各ページ共通
------------------------------------------------------------*/
/*メイン画像エリア*/
#main_area{position: relative;top: 0; width:100%;z-index: 1;overflow: hidden;border-bottom:17px solid #ff8ea4;}
#main_area {
  position: relative;
  width: 100%;
  height: 420px;
  background-image: url('../images/voice/main.webp'); /*ページごとに変更*/
  background-size: cover;     
  background-position: right; /* ページによって変更OK */
  background-repeat: no-repeat;
}
#main_area p{
    position:absolute;
    left:5%;
    bottom:10%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background:#FFF;
    width:clamp(150px,calc(250/1280*100vw),250px);
    height: clamp(80px,calc(250/1280*100vw),250px);
    font-size:clamp(16px,calc(30/1280*100vw),30px);
    font-weight: 500;
    opacity: 0.8;
}
#main_area p:before{
    content:"Voice";
    color:#ff8ea4;
    font-size:clamp(12px,calc(25/1280*100vw),25px);
    font-family: "Sniglet", system-ui;
    font-weight: 400;
}

@media only screen and (max-width:768px){
    #main_area {
      background-image: url('../images/voice/mainTAB.webp'); /*ページごとに変更*/
      background-position: center; /* ページによって変更OK */
    }
}
@media only screen and (max-width:450px){
    #main_area {
      background-image: url('../images/voice/mainSP.webp'); /*ページごとに変更*/
      height: 250px;
    }
    #main_area p{
        left:5%;
        bottom:5%;
    }
}
/*入職祝い金*/
.gift img{
    position:absolute;
    right:clamp(0rem, -4.688rem + 9.77vw, 3.125rem);
    bottom:clamp(0.625rem, -1.25rem + 3.91vw, 1.875rem);
    z-index: 3;
    width:clamp(110px,calc(260/1500*100vw),260px);
    height: auto;
    transition: transform 0.3s ease;
}
.gift:hover{opacity: 1.0;}
.gift:hover img{transform: scale(1.05);opacity: 0.9;}
/*このページ単体のCSS------------------------------------------------------------*/
.line{border-bottom: 4px solid #ff8ea4;}
.w1000{width:90%;max-width:1000px;margin:auto;}
/*インタビュー*/
#interview .tih2{margin-bottom: 20px;}
#interview .tih2::before{content:"Interview";}
.imgL,.imgR{display: flex;align-items: center; gap:clamp(20px,calc(60/1280*100vw),60px);}
.imgL{display: flex;align-items:flex-start;}
.imgL img, .imgR img{width:clamp(200px,calc(614/1280*100vw),614px);}
.imgR img{order:2;}
.imgL div,.imgR div{width:clamp(300px,calc(600/1280*100vw),600px);}
/*フッター*/
.cta{ background:url("../images/voice/bg_cta.webp") no-repeat center center/cover;}
/* レスポンシブ-----------------------------------------------------------------------*/
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    .imgL,.imgR{flex-direction: column;align-items: center; gap:clamp(20px,calc(60/1280*100vw),60px);}
    .imgL img, .imgR img,.center img{width:80%; max-width:400px;}
    .imgL div,.imgR div{width:90%;}
    .imgR img{order:1;}
    .imgR div{order:2;}
    /*フッター*/
    .cta{ background:url("../images/voice/bg_ctaTAB.webp") no-repeat center center/cover;}
}

/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    .center img{width:95% !important;}
    /*フッター*/
    .cta{background:url("../images/voice/bg_ctaSP.webp") no-repeat center center/cover;} 
}