@charset "UTF-8";
/* ----------------------------------------------------------------------
 special common
---------------------------------------------------------------------- */
.special-area p { margin-bottom: 1em}
.special-area p:last-of-type { margin-bottom: 0}
.special-area .title { margin-bottom: 20px; font-size: 17px}
.special-inr { padding: 20px}
/* more button */
.readmore { margin-top: 20px}
.readmore.inr { padding: 15px; background:rgba(255,255,255,1); border-radius: 6px}
.readmore-check{ display: none}
@media screen and (max-width: 767px) { 
  .special-area { margin: -20px -20px 0 -20px}
  .readmore-content { position: relative; overflow: hidden; height: 200px; padding-bottom: 20px}
  .readmore-content::before { display: block; position: absolute; bottom: 0; left: 0; width: 100%; content: ""; height: 40px; background: rgba(255,255,255,0.8)}
  .readmore-label { display: flex; justify-content: center; align-items: center; height: 35px; color: #fff; background: #3a3030}
  .readmore-label:before { content: '続きを読む'}
  .readmore-check:checked ~ .readmore-label { position: static; transform: translateX(0)}
  .readmore-check:checked ~ .readmore-label:before { content: '閉じる'}
  .readmore-check:checked ~ .readmore-content { height: auto}
  .readmore-check:checked ~ .readmore-content::before { display: none}
}
@media screen and (min-width: 768px) {
  .special-area { box-shadow: 5px 5px 5px rgba(0,0,0,.1); border-radius: 10px}
  .special-area p { margin-bottom: 1.5em}
  .special-area .title { font-size: 26px}
  .special-area .ttl-sub { font-size: 14px}
  .readmore-content { font-size: 14px}
  .readmore { margin-top: 30px}
  .readmore.inr { padding: 20px}
  .readmore-label { display: none}
}
/* ----------------------------------------------------------------------
 special 「年間休日120日以上の介護福祉士求人」
---------------------------------------------------------------------- */
.one-twenty_days-off { background-color: #b6cea6}
.one-twenty_days-off .special-inr { padding: 0 20px 20px; background: url(../img/special/bg-120days-off.jpg) no-repeat top center/100% auto}
.one-twenty_days-off .headline { min-height: 140px; padding-top: 60px}
.one-twenty_days-off .ttl-sub { width: fit-content; padding: 5px 10px; color: #67873f; background: #fff}
.one-twenty_days-off .title { width: fit-content; padding: 0 20px; color: #fff; background: #67873f}
.one-twenty_days-off blockquote { margin-top: 2em}
@media screen and (min-width: 768px) {
  .one-twenty_days-off .headline { min-height: 250px; padding-top: 90px}
}
/* ----------------------------------------------------------------------
 special 「年収400万円以上の介護福祉士求人」
---------------------------------------------------------------------- */
.ai-4m-careworker { background-color: #f7f9f9}
.ai-4m-careworker .special-inr { padding: 0 20px 20px; background: url(../img/special/bg-ai-4m-careworker.jpg) no-repeat top center/100% auto}
.ai-4m-careworker .headline { min-height: 100px; padding-top: 40px; text-align: center}
.ai-4m-careworker .ttl-sub span { color: #137f22}
.ai-4m-careworker .title { font-weight: bold}
.ai-4m-careworker .title span { display: inline-block; padding: 0 7px; margin: 0 2px; background: #f6f9f9; border: 1.3px solid #514848}
.ai-4m-careworker .title big { margin-right: 5px; color: #137f22; font-size: 40px; font-weight: bold; font-style: italic}
@media screen and (max-width: 767px) {
  .ai-4m-careworker .ttl-sub { margin-bottom: 10px}
  .ai-4m-careworker .title i { display: block; margin-top: -25px}
}
@media screen and (min-width: 768px) {
  .ai-4m-careworker .headline { min-height: 200px; padding-top: 90px}
}
/* ----------------------------------------------------------------------
 special 「寮・社宅ありの介護福祉士求人」
---------------------------------------------------------------------- */
.company-housing { background-color: #dadada}
.company-housing .special-inr { padding: 0 20px 20px; background: url(../img/special/bg-company-housing.jpg) no-repeat top center/100% auto}
.company-housing .headline { position: relative; min-height: 170px; padding-top: 30px}
.company-housing .ttl-sub { position: absolute; top: 0; right: 0; height: fit-content; padding: 20px 10px; color: #fff; line-height: 1.5; letter-spacing: 0.08em; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; background: rgba(4,35,63,.8)}
.company-housing .title { color: #02233d; letter-spacing: 0.08em; text-shadow: 1.3px 1.3px 0 #fff, -1.3px -1.3px 0 #fff, -1.3px 1.3px 0 #fff, 1.3px -1.3px 0 #fff, 0px 1.3px 0 #fff,  0 -1.3px 0 #fff, -1.3px 0 0 #fff, 1.3px 0 0 #fff; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl}
@media screen and (min-width: 768px) {
  .company-housing .headline { min-height: 300px; margin-left: 1em; padding-top: 40px}
  .company-housing .ttl-sub { right: 20px}
  .company-housing .title { font-size: 36px}
}
/* ----------------------------------------------------------------------
 special 「日勤のみの（正社員）介護福祉士求人」
---------------------------------------------------------------------- */
.day-shift-only { background-color: #44250e}
.day-shift-only .special-inr { padding: 0 20px 20px; background: url(../img/special/bg-day-shift-only.jpg) no-repeat top center/100% auto}
.day-shift-only .headline { position: relative;  min-height: 220px}
.day-shift-only .headline .ttl-sub { position: absolute; color: #43240e; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl}
.day-shift-only .headline .ttl-sub.left { top: 30px; left: 20%; transform: rotate(-20deg)}
.day-shift-only .headline .ttl-sub.right { top: 40px; right: 25%; transform: rotate(20deg)}
.day-shift-only .title { position: absolute; left: -20px; bottom: -10px; width: calc(100% + 20px + 20px); padding-top: 5px; color: #fff; text-align: center; background: rgba(67,36,14,.9)}
@media screen and (min-width: 768px) {
  .day-shift-only .headline { min-height: 340px}
  .day-shift-only .headline .ttl-sub { font-size: 18px}
  .day-shift-only .title { bottom: -27px}
}