@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/environment/main.webp'); /*ページごとに変更*/
  background-size: cover;     
  background-position: center; /* ページによって変更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:"Work Environment";
    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/environment/mainTAB.webp'); /*ページごとに変更*/
    }
}
@media only screen and (max-width:450px){
    #main_area {
      background-image: url('../images/environment/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------------------------------------------------------------*/
html,body{overflow-x: hidden;}
.intro{justify-content: space-between;width:95%; max-width:1200px; align-items: center;}
.intro div{display:flex;align-items: center;gap:clamp(20px,calc(30/1500*100vw),30px);}
.intro img{width:clamp(90px,calc(180/1500*100vw),180px);}
.intro p{font-size:clamp(16px,calc(24/1500*100vw),24px);}
.fs60{font-size:clamp(24px,calc(60/1500*100vw),60px);}
.fcg{color:#7ac943;}

.imgL,.imgR,.imgL .area_ti,.imgR .area_ti{display: flex; justify-content: space-between;margin-bottom:clamp(40px,calc(90/1920*100vw), 90px) ;}
.area_ti{align-items: flex-start;gap:20px;}
.area_co{width:calc(100% - 350px);}
.area_co h3{font-size:clamp(20px,calc(26/1500*100vw),26px);border-bottom:1px solid;padding-bottom: 10px;margin-bottom:15px;}
.imgL h2, .imgR h2,h2.sp_on{writing-mode: vertical-rl;padding:20px 10px;}
.imgL h2,h2.sp_on{order:2;}

/*働く環境が気持ちいい*/
.blue h2,h2.blue{background:#f5fafd;border:1px solid #004c84;border-radius: 50px; color:#004c84;}
.blue h3{color:#004c84;}
.imgL.blue{gap:7%;justify-content: center !important;}
.blue .area_ti{}
.blue  .area_co{width:70%;}
.blue .area_ti img{width:100%; max-width: 140px;}
.blue .flexbox {justify-content: space-between; align-items: flex-start;}
.blue .flexbox img{width:clamp(180px,calc(600/1920*100vw),600px); order:2;}
.blue .flexbox div{width:calc(100% - clamp(200px,calc(620/1920*100vw),620px));}

/*福利厚生が手厚い*/
.orange h2,h2.orange{background:#fef5e9;border:1px solid #f9a94b;border-radius: 50px; color:#f9a94b;}
.orange h2 span ,h2.orange span{font-feature-settings: "vert";}
.orange h3{color:#f9a94b;}
.orange .area_ti{width:23%;order:2;}
.orange  .area_co{width:70%;}
.orange .area_ti img{width:100%; max-width: 200px;}
.orange .flexbox {justify-content: space-between; align-items: flex-start;}
.orange .flexbox img{width:clamp(180px,calc(500/1920*100vw),500px);}
.orange .flexbox div{width:calc(100% - clamp(200px,calc(520/1920*100vw),520px));}
.fcorange{color:#f9a94b;}
.fcorange span{background-color:#f9a94b;color:#FFF;padding:5px 15px;border-radius: 20px;}

/*安心して働ける*/
.imgL.pink{margin-bottom: 0;}
.pink h2,h2.pink{background:#fff1f1;border:1px solid #fc8caa;border-radius: 50px; color:#fc8caa;}
.pink h2 span ,h2.pink span{font-feature-settings: "vert";}
.pink h3{color:#fc8caa;}
.pink .area_ti{width:23%;justify-content: center !important;}
.pink  .area_co{width:70%;display: flex;justify-content: space-between; align-items: flex-start;}
.pink .area_ti img{width:calc(100% - 80px);}
.pink .area_co img{width:clamp(180px,calc(500/1920*100vw),500px);order:2;}
.pink .area_co div{width:calc(100% - clamp(200px,calc(520/1920*100vw),520px));}

/*各種割引制度*/
#discount .tih2{margin-bottom: 20px;}
#discount .tih2::before{content:"Discount System";}
#discount .flexbox{gap:clamp(30px,calc(60/1280*100vw),60px);justify-content: center;}
#discount li{position:relative;width:47.0%; max-width: 550px;padding:clamp(20px,calc(40/1280*100vw),40px);display:flex;flex-direction:column;}
#discount .flexbox div{background:#FFF;padding:clamp(10px,calc(20/1280*100vw),20px);flex-grow: 1;}
#discount li:first-child::before{position:absolute; top:clamp(-60px,calc(-30/1280*100vw),-30px); left:clamp(-70px,calc(-30/1280*100vw),-30px); content:""; display: block; background:url("../images/environment/tape.webp") no-repeat center/contain; width:clamp(60px,calc(160/1280*100vw),160px); height:clamp(50px,calc(133/1280*100vw),133px);}
#discount li:last-child::before{position:absolute; top:clamp(-60px,calc(-30/1280*100vw),-30px); right:clamp(-70px,calc(-30/1280*100vw),-30px); content:""; display: block; background:url("../images/environment/tape.webp") no-repeat center/contain; width:clamp(60px,calc(160/1280*100vw),160px); height:clamp(50px,calc(133/1280*100vw),133px);transform: rotate(70deg);}

/*よくあるご質問*/
#faq .tih2{margin-bottom: 20px;}
#faq .tih2::before{content:"Q & A";}
.faq {counter-reset: q-counter;}
summary{
  position:relative;
  cursor: pointer;
  padding:clamp(15px,calc(30/1280*100vw),30px);
  margin-bottom:clamp(15px,calc(30/1280*100vw),30px);
  border: 1px solid #cccccc;
  background:#f5fafd;
  color:#000;
  display: flex; /* iOS Safari のマーカー強制表示バグ対策 */
  align-items: center;
  counter-increment: q-counter;
}
summary::-webkit-details-marker {display: none;}
summary:before{
  content:"Q" counter(q-counter) " ";
  font-size:clamp(18px,calc(30/1500*100vw),30px);
  color:#3078b7;
  margin-right:10px;
}
/* ▼ 丸背景（固定） */
summary .icon-bg{
  position:absolute;
  right:15px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height:30px;
  background:#004c84;
  border-radius:50%;
}
/* ▼ ＋（回転する部分） */
summary .icon{
  position:absolute;
  right:15px;
  top:50%;
  transform: translateY(-50%) rotate(0deg);
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  color:#FFF;
  font-size:20px;
  transition: transform .3s;
  pointer-events:none;
}
details[open] summary .icon{
  transform: translateY(-50%) rotate(45deg);
}
summary:hover{background:#eaf1f8;}
details[open] summary{margin-bottom:0;}
details[open] .contents{
  border:1px solid #dedede;
  padding:15px;
  margin-bottom: 30px;
}
/*フッター*/
.cta{ background:url("../images/environment/bg_cta.webp") no-repeat center center/cover;}

/* レスポンシブ-----------------------------------------------------------------------*/
/* 1025px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1025px) {
.intro{flex-direction: column;}
.intro div{display:flex;align-items: center;gap:clamp(20px,calc(30/1500*100vw),30px);}
}

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*働く環境が気持ちいい*/
    .blue .area_ti img{width:50%;}
    .flexbox.c2 > * {width:47.5%;}
    h2.fs34{font-size:clamp(18px,calc(24/768*100vw),24px);}
    .blue .flexbox {flex-direction: column;}
    .blue .flexbox img{width:400px;margin: auto;}
    .blue .flexbox div{width:100%;}

    /*福利厚生が手厚い*/
    .orange .area_ti img{width:60%;}
    .orange .flexbox {flex-direction: column;}
    .orange .flexbox img{width:300px;margin: auto; order:2;}
    .orange .flexbox div{width:100%;}
    /*安心して働ける*/
    .pink .area_ti img{width:60%;}
    .pink .area_co {flex-direction: column;row-gap: max(1.5em, 30px);}
    .pink .area_co img{width:300px;margin: auto;order:2;}
    .pink .area_co div{width:100%;}

    /*各種割引制度*/
    #discount .flexbox{gap:1%;justify-content: center;}
    #discount li{width:48.5%;padding:10px;}
    #discount .flexbox div{padding:10px;}
    /*フッター*/
    .cta{ background:url("../images/environment/bg_ctaTAB.webp") no-repeat center center/cover;}
}

/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    .intro div{gap:10px;}
    .intro p{width:90%;}

    /*働く環境が気持ちいい*/
    .imgL.blue{gap:0;}
    .blue .area_ti{width:0%;}
    .blue  .area_co{width:95%;}
    .area_ti{flex-direction: column;justify-content: flex-start;}
    .imgL h2, .imgR h2,h2.sp_on{writing-mode:horizontal-tb; order:1;text-align: center}
/*    .blue .area_ti img{order:2; width:100%;}*/
    /*福利厚生が手厚い*/
    .orange .area_ti img{width:100%;}
    /*安心して働ける*/
    .pink .area_ti{width:20%;justify-content: flex-start !important;}
    .pink .area_ti img{width:100%;}
    /*各種割引制度*/
    #discount .flexbox{gap:30px;justify-content: center;}
    #discount li{width:90%;padding:10px;}
    #discount li:first-child::before{top:-20px; left:-20px;}
/*    #discount li:first-child::after{position:absolute; top:-20px; right:-20px; content:""; display: block; background:url("../images/environment/tape.webp") no-repeat center/contain; width:clamp(60px,calc(160/1280*100vw),160px); height:clamp(50px,calc(133/1280*100vw),133px);transform: rotate(70deg);}*/
    #discount li:last-child::before{top:-20px; right:-20px;}
/*    #discount li:last-child::after{position:absolute; top:-20px; left:-20px; content:""; display: block; background:url("../images/environment/tape.webp") no-repeat center/contain; width:clamp(60px,calc(160/1280*100vw),160px); height:clamp(50px,calc(133/1280*100vw),133px);}*/
/*よくあるご質問*/
    summary .icon-bg,summary .icon{right:5px;}
    summary{padding-right:2rem;}
    /*フッター*/
    .cta{background:url("../images/environment/bg_ctaSP.webp") no-repeat center center/cover;} 
}