@charset "UTF-8";
#snsjob {
  min-width: 950px;
  background-color: #fff;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  color: #000;
}
#snsjob .sp {
  display: none;
}
#snsjob .bold {
  font-weight: bold;
}
#snsjob .inner {
  width: 950px;
  margin: 0 auto;
  padding: calc(100px / 1280 * 950) 0;
  position: relative;
  display: block;
  z-index: 0;
}
#snsjob h3:not(.find) {
  margin: 0 auto calc(60px / 1280 * 950);
  text-align: center;
}
#snsjob h3:not(.find) span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 calc(50px / 1280 * 950);
  height: calc(100px / 1280 * 950);
  border: calc(3px / 1280 * 950) solid #f8d64a;
  color: #483a00;
  font-size: calc(38px / 1280 * 950);
  font-weight: bold;
  line-height: 1;
}
#snsjob h3:not(.find) span::before, #snsjob h3:not(.find) span::after {
  content: "";
  position: absolute;
  display: block;
  z-index: -1;
}
#snsjob h3:not(.find) span::before {
  bottom: calc(-20px / 1280 * 950);
  right: calc(-20px / 1280 * 950);
  width: 100%;
  height: 100%;
  background-color: #fffad0;
}
#snsjob h3:not(.find) span::after {
  left: 0;
  right: 0;
  bottom: calc(-46px / 1280 * 950);
  margin: 0 auto;
  width: calc(40px / 1280 * 950);
  border-top: calc(27px / 1280 * 950) solid #fffad0;
  border-right: calc(20px / 1280 * 950) solid transparent;
  border-left: calc(20px / 1280 * 950) solid transparent;
}
#snsjob .lead {
  font-size: calc(19px / 1280 * 950);
  font-weight: bold;
  line-height: calc(30 / 19);
  text-align: center;
  margin-bottom: calc(60px / 1280 * 950);
}
#snsjob #description,
#snsjob #yaritai,
#snsjob #seido {
  background-color: #fcfbf1;
}
#snsjob #mv {
  position: relative;
}
#snsjob #mv::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  width: 100%;
  height: 470px;
  display: block;
  background-color: #fffad0;
}
#snsjob #mv .inner {
  padding: calc(780px / 1280 * 950) 0 0;
  z-index: 0;
}
#snsjob #mv .inner::after {
  content: "";
  position: absolute;
  background-color: #ffb08d;
  width: calc(166px / 1280 * 950);
  height: calc(163px / 1280 * 950);
  right: calc(-60px / 1280 * 950);
  bottom: calc(60px / 1280 * 950);
  display: block;
}
#snsjob #mv h2 {
  width: calc(687px / 1280 * 950);
  position: absolute;
  top: calc(360px / 1280 * 950);
  left: calc(25px / 1280 * 950);
  z-index: 1;
}
#snsjob #mv h2 img {
  width: 100%;
}
#snsjob #mv .copy {
  width: calc(818px / 1280 * 950);
  position: absolute;
  top: calc(70px / 1280 * 950);
  left: calc(-18px / 1280 * 950);
  z-index: 1;
}
#snsjob #mv .ph {
  position: absolute;
  top: calc(60px / 1280 * 950);
  right: calc(-60px / 1280 * 950);
  width: calc(837px / 1280 * 950);
}
#snsjob #mv .ph::before, #snsjob #mv .ph::after {
  content: "";
  position: absolute;
  display: block;
}
#snsjob #mv .ph::before {
  background-color: #fff;
  width: 100%;
  height: 100%;
  left: calc(-180px / 1280 * 950);
  top: calc(35px / 1280 * 950);
  z-index: -1;
}
#snsjob #mv .ph::after {
  background-color: #94d9fc;
  width: calc(318px / 1280 * 950);
  height: calc(163px / 1280 * 950);
  left: calc(-91px / 1280 * 950);
  top: calc(-61px / 1280 * 950);
  z-index: -1;
}
#snsjob #mv .ph img {
  width: 100%;
}
#snsjob #description .boxy {
  font-size: calc(26px / 1280 * 950);
  line-height: calc(43 / 26);
  text-align: justify;
  font-weight: bold;
  width: calc(1020px / 1280 * 950);
  padding: calc(50px / 1280 * 950) calc(60px / 1280 * 950);
  margin: 0 auto;
  position: relative;
  background-image: url(../img/pc/description_bg.png);
  background-repeat: no-repeat;
  background-size: calc(547px / 1280 * 950) auto;
  background-position: right bottom;
}
#snsjob #description .boxy::before, #snsjob #description .boxy::after {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% - 60px / 1280 * 950);
  display: block;
}
#snsjob #description .boxy::before {
  border-left: calc(3px / 1280 * 950) solid #000;
  border-top: calc(3px / 1280 * 950) solid #000;
  top: 0;
  left: calc(-3px / 1280 * 950);
}
#snsjob #description .boxy::after {
  border-right: calc(3px / 1280 * 950) solid #000;
  border-bottom: calc(3px / 1280 * 950) solid #000;
  bottom: 0;
  right: calc(-3px / 1280 * 950);
}
#snsjob #suki .inner::before {
  content: "";
  position: absolute;
  left: calc(-33px / 1280 * 950);
  top: calc(-66px / 1280 * 950);
  display: block;
  width: calc(423px / 1280 * 950);
  height: calc(231px / 1280 * 950);
  background-image: url(../img/pc/woman_illust.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#snsjob #suki ul {
  display: flex;
  justify-content: space-between;
}
#snsjob #suki ul li {
  width: calc(280px / 1280 * 950);
  height: calc(270px / 1280 * 950);
  position: relative;
  transition: opacity 0.2s;
}
#snsjob #suki ul li:hover {
  opacity: 0.7;
}
#snsjob #suki ul li a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#snsjob #suki ul li img {
  width: 100%;
  max-height: 100%;
}
#snsjob #suki ul li p {
  font-size: calc(23px / 1280 * 950);
  font-weight: bold;
  line-height: calc(30 / 23);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(94px / 1280 * 950);
  background-color: #fcdfc1;
  position: absolute;
  left: 0;
  bottom: 0;
}
#snsjob #yaritai .inner::before {
  content: "";
  position: absolute;
  right: calc(-45px / 1280 * 950);
  bottom: calc(130px / 1280 * 950);
  display: block;
  width: calc(373px / 1280 * 950);
  height: calc(226px / 1280 * 950);
  background-image: url(../img/pc/pc_illust.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#snsjob #yaritai ul {
  display: flex;
  flex-wrap: wrap;
  gap: calc(37px / 1280 * 950) calc(14px / 1280 * 950);
}
#snsjob #yaritai ul li {
  background-color: #fff;
  border: calc(2px / 1280 * 950) solid #a0a0a0;
  width: calc((100% - calc(14px / 1280 * 950) * 3) / 4);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(20px / 1280 * 950) 0 calc(23px / 1280 * 950);
  transition: opacity 0.2s;
}
#snsjob #yaritai ul li:hover {
  opacity: 0.7;
}
#snsjob #yaritai ul li a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#snsjob #yaritai ul li img {
  width: calc(256px / 1280 * 950);
  display: block;
  margin: 0 auto calc(17px / 1280 * 950);
}
#snsjob #yaritai ul li p {
  font-size: calc(22px / 1280 * 950);
  font-weight: bold;
  line-height: calc(30 / 22);
  text-align: center;
}
#snsjob #yaritai ul li .sub {
  font-size: calc(20px / 1280 * 950);
  line-height: calc(30 / 20);
  padding-bottom: calc(14px / 1280 * 950);
  margin-bottom: calc(14px / 1280 * 950);
  position: relative;
}
#snsjob #yaritai ul li .sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  display: block;
  width: calc(53px / 1280 * 950);
  height: calc(5px / 1280 * 950);
  background-color: #c8e6de;
}
#snsjob #sns ul {
  display: flex;
  justify-content: space-between;
}
#snsjob #sns ul li {
  width: calc((100% - 37px / 1280 * 950 * 3) / 4);
  padding-top: calc(65px / 1280 * 950);
  position: relative;
  transition: opacity 0.2s;
}
#snsjob #sns ul li:hover {
  opacity: 0.7;
}
#snsjob #sns ul li a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#snsjob #sns ul li img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(125px / 1280 * 950);
}
#snsjob #sns ul li p {
  font-size: calc(22px / 1280 * 950);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: calc(43px / 1280 * 950);
  width: 100%;
  height: calc(150px / 1280 * 950);
  background-color: #ebeaea;
  border-top: calc(6px / 1280 * 950) solid #dbc6d4;
}
#snsjob #seido ul {
  display: flex;
}
#snsjob #seido ul li {
  width: calc(100% / 4);
  height: calc(200px / 1280 * 950);
  display: block;
  padding-top: calc(145px / 1280 * 950);
  background-color: #fff;
  position: relative;
  font-size: calc(22px / 1280 * 950);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  background-repeat: no-repeat;
  transition: opacity 0.2s;
}
#snsjob #seido ul li:nth-of-type(1) {
  background-image: url(../img/pc/clender_illust.png);
  background-size: calc(100px / 1280 * 950) auto;
  background-position: center top calc(34px / 1280 * 950);
}
#snsjob #seido ul li:nth-of-type(2) {
  background-image: url(../img/pc/parasol_illust.png);
  background-size: calc(98px / 1280 * 950) auto;
  background-position: center top calc(20px / 1280 * 950);
}
#snsjob #seido ul li:nth-of-type(3) {
  background-image: url(../img/pc/watch_illust.png);
  background-size: calc(93px / 1280 * 950) auto;
  background-position: center top calc(26px / 1280 * 950);
}
#snsjob #seido ul li:nth-of-type(4) {
  background-image: url(../img/pc/telework_illust.png);
  background-size: calc(97px / 1280 * 950) auto;
  background-position: center top calc(31px / 1280 * 950);
}
#snsjob #seido ul li:nth-of-type(2n+1) {
  background-color: #c5e9fb;
}
#snsjob #seido ul li:hover {
  opacity: 0.7;
}
#snsjob #seido ul li a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#snsjob #flow .boxy {
  background-color: #fffad0;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: calc(70px / 1280 * 950);
  padding: calc(50px / 1280 * 950);
}
#snsjob #flow .boxy::before {
  content: "";
  position: absolute;
  left: calc(-89px / 1280 * 950);
  top: calc(-36px / 1280 * 950);
  display: block;
  width: calc(643px / 1280 * 950);
  height: calc(209px / 1280 * 950);
  background-image: url(../img/pc/flow_illust.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#snsjob #flow .text h4 {
  margin-bottom: calc(30px / 1280 * 950);
  position: relative;
  z-index: 0;
}
#snsjob #flow .text h4 span {
  font-size: calc(27px / 1280 * 950);
  line-height: 1em;
  padding: calc(5px / 1280 * 950) calc(10px / 1280 * 950);
  position: relative;
  background-color: #f8d64a;
}
#snsjob #flow .text h4 span::before {
  content: "";
  position: absolute;
  right: calc(-10px / 1280 * 950);
  bottom: calc(-10px / 1280 * 950);
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: -1;
}
#snsjob #flow .text p + h4 {
  margin-top: calc(45px / 1280 * 950);
}
#snsjob #flow .text p {
  font-size: calc(18.5px / 1280 * 950);
  line-height: calc(26 / 18);
  text-align: justify;
  font-weight: bold;
}
#snsjob #flow .figure {
  width: calc(1310px / 2 / 1280 * 950);
}
#snsjob #find .inner {
  padding: 0 0 calc(50px / 1280 * 950);
}
#snsjob #find h3.find {
  width: calc(694px / 1280 * 950);
  margin: 0 auto;
}
#snsjob #find h3.find img {
  width: 100%;
}