@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------------------
main
----------------------------------------------------------*/
main {
  position: relative;
  display: block;
}
main img {
  width: 100%;
  height: auto;
}
main .txt {
  position: absolute;
  top: 0;
  left: calc(114 / 1396 * 100vw);
  width: calc(100 / 1396 * 100vw);
  padding-top: calc(119 / 1396 * 100vw);
}

/* ---------------------------------------------------------
h1
----------------------------------------------------------*/
article h1 {
  display: flex;
  align-items: flex-end;
  font-size: calc(44 / 1396 * 100vw);
  font-weight: normal;
  letter-spacing: .06em;
  line-height: 1;
  color: #E85382;
  padding-top: calc(38 / 1396 * 100vw);
}
article h1::before {
  content: '';
  display: block;
  width: calc(60 / 1396 * 100vw);
  height: calc(3 / 1396 * 100vw);
  background: transparent linear-gradient(90deg, #DE3B70 0%, #EC733F 11%, #DE3B70 61%, #E9829F 100%) 0% 0% no-repeat padding-box;
  margin-right: calc(19 / 1396 * 100vw);
  margin-bottom: calc(9 / 1396 * 100vw);
  border-radius: 0 calc(2 / 1396 * 100vw) calc(2 / 1396 * 100vw) 0;
}

/* ---------------------------------------------------------
.ttl-recruit
----------------------------------------------------------*/
.ttl-recruit::after {
  content: '';
  display: block;
  width: calc(30 / 1396 * 100vw);
  height: calc(3 / 1396 * 100vw);
  background: #E85382;
  margin: calc(35 / 1396 * 100vw) auto 0;
  border-radius: calc(2 / 1396 * 100vw);
}

/* ---------------------------------------------------------
#news
----------------------------------------------------------*/
#news dl {
  width: calc(1248 / 1396 * 100vw);
  background: rgba(255,255,255,.67);
  padding: calc(62 / 1396 * 100vw) calc(60 / 1396 * 100vw) 0;
  margin: 0 auto calc(100 / 1396 * 100vw);
  border-radius: calc(10 / 1396 * 100vw);
  box-sizing: border-box;
}
#news dt {
  font-size: calc(15 / 1396 * 100vw);
  color: #606060;
  letter-spacing: .06em;
  line-height: 1;
  padding: calc(20 / 1396 * 100vw) 0 0 calc(7 / 1396 * 100vw);
  margin-bottom: calc(11 / 1396 * 100vw);
  border-top: 1px solid #D1D1D1;
}
#news dd {
  font-size: calc(14 / 1396 * 100vw);
  line-height: 1.85;
  letter-spacing: .06em;
  padding: 0 0 calc(18 / 1396 * 100vw) calc(7 / 1396 * 100vw);
}
#news dd:last-child {
  border-bottom: 1px solid #D1D1D1;
}
#news dd a {
  background: url("../../../common/img/icon_tri_pink.svg") no-repeat left top calc(8 / 1396 * 100vw);;
  padding-left: calc(18 / 1396 * 100vw);
}

/* ---------------------------------------------------------
#cate
----------------------------------------------------------*/
#cate {
  position: relative;
}
#cate::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: calc(1025 / 1396 * 100vw);
  height: 100%;
  background: #EBEBEB;
}
#cate::after {
  content: '';
  position: absolute;
  right: calc(74 / 1396 * 100vw);
  bottom: 0;
  display: block;
  width: calc(504 / 1396 * 100vw);
  height: calc(71 / 1396 * 100vw);
  background: url("../img/txt_company.svg") no-repeat;
  background-size: calc(504 / 1396 * 100vw) auto;
  transform: translateY(50%);
}
#cate img {
  width: 100%;
  height: auto;
}
#cate a {
  display: block;
  transition: opacity .3s;
}
#cate a:hover {
  text-decoration: none;
  opacity: .7;
}
#cate .about {
  position: relative;
  margin-bottom: calc(120 / 1396 * 100vw);
}
#cate .about .inner {
  position: relative;
  width: calc(886 / 1396 * 100vw);
  height: calc(200 / 1396 * 100vw);
  background: #fff;
  border-radius: 0 0 calc(10 / 1396 * 100vw) 0;
  padding: calc(54 / 1396 * 100vw) 0 0 calc(74 / 1396 * 100vw);
  margin-top: calc(-100 / 1396 * 100vw);
  box-sizing: border-box;
}
#cate .about h2 {
  font-size: calc(32 / 1396 * 100vw);
  letter-spacing: .06em;
  font-weight: normal;
  line-height: 1;
  margin-bottom: calc(33 / 1396 * 100vw);
}
#cate .about p {
  font-size: calc(16 / 1396 * 100vw);
  letter-spacing: .06em;
  font-weight: normal;
  line-height: 1;
}
#cate .about p strong {
  font-weight: normal;
  color: #E85382;
}
#cate .wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(1248 / 1396 * 100%);
  padding-bottom: calc(60 / 1396 * 100%);
  margin: 0 auto;
}
#cate .block {
  position: relative;
  display: block;
  width: calc(594 / 1248 * 100%);
  margin-bottom: calc(60 / 1248 * 100%);
}
#cate .block::before {
  content: '';
  position: absolute;
  top: calc(350 / 1396 * 100vw);
  left: calc(50 / 1396 * 100vw);
  display: block;
  width: calc(554 / 1396 * 100vw);
  height: calc(120 / 1396 * 100vw);
  background-color: rgba(0,0,0,.1);
  border-radius: 10px;
  -ms-filter: blur(16px);
  filter: blur(16px);
}
#cate .txt {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: calc(554 / 594 * 100%);
  height: calc(120 / 1396 * 100vw);
  background: #fff url("../../../common/img/icon_next.svg") no-repeat right 25px top 50%;
  background-size: 2vw auto;
  border-radius: 10px 0;
  padding-top:  calc(40 / 594 * 100%);
  margin-top: calc(-60 / 594 * 100%);
  margin-left: auto;
  box-sizing: border-box;
}
#cate .wrapper h2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  font-size: calc(22 / 1396 * 100vw);
  color: #E85382;
  line-height: 1;
  font-weight: normal;
  letter-spacing: .06em;
}
#cate .wrapper h2::before {
  content: "";
  display: block;
  width: calc(30 / 1396 * 100vw);
  height: calc(3 / 1396 * 100vw);
  background: transparent linear-gradient(90deg, #DE3B70 0%, #EC733F 11%, #DE3B70 61%, #E9829F 100%) 0% 0% no-repeat padding-box;
  border-radius: 0 2px 2px 0;
  margin-right: calc(12 / 1396 * 100vw);
  margin-bottom: calc(3 / 1396 * 100vw);
}

/* ---------------------------------------------------------
#ideal
----------------------------------------------------------*/
#ideal {
  position: relative;
  padding: calc(108 / 1396 * 100%) 0 calc(121 / 1396 * 100%);
}
#promise {
  position: relative;
  padding: calc(116 / 1396 * 100%) 0 calc(120 / 1396 * 100%);
}

#ideal::before,
#promise::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: calc(299 / 1396 * 100vw);
  background: #EBEBEB;
}
#ideal::after,
#promise::after {
  content: '';
  position: absolute;
  right: calc(74 / 1396 * 100vw);
  bottom: 0;
  display: block;
  width: calc(859 / 1396 * 100vw);
  height: calc(71 / 1396 * 100vw);
  background: url("../img/txt_desire.svg") no-repeat;
  background-size: calc(859 / 1396 * 100vw) auto;
  transform: translateY(50%);
}
#promise::after {
  width: calc(699 / 1396 * 100vw);
  background: url("../img/txt_promise.svg") no-repeat;
  background-size: calc(699 / 1396 * 100vw) auto;
}

.col3 {
  position: relative;
  display: flex;
  justify-content: center;
  width: calc(1248 / 1396 * 100vw);
  margin: calc(70 / 1396 * 100vw) auto 0;
}
.col3 .block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  height: calc(298 / 1396 * 100vw);
}
.col3 .pic {
  position: absolute;
  top: 0;
  left: 0;
}
.col3 img {
  width: 100%;
  height: auto;
}
.col3 h3,
.col3 p {
  position: relative;
  color: #fff;
  text-align: center;
  letter-spacing: .06em;
}
.col3 h3 {
  font-size: calc(22 / 1396 * 100vw);
  font-weight: normal;
  line-height: 1;
}
.col3 h3::after {
  content: '';
  display: block;
  width: calc(30 / 1396 * 100vw);
  height: calc(2 / 1396 * 100vw);
  background: #fff;
  margin: calc(30 / 1396 * 100vw) auto calc(13 / 1396 * 100vw);
}
.col3 p {
  font-size: calc(15 / 1396 * 100vw);
  line-height: 1.73;
}

/* ---------------------------------------------------------
#other
----------------------------------------------------------*/
#other {
  position: relative;
  padding: calc(120 / 1396 * 100%) 0;  
}
#other::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: calc(610 / 1396 * 100vw);
  background: #EBEBEB;
}
#other a {
  display: block;
  transition: opacity .3s;
}
#other a:hover {
  text-decoration: none;
  opacity: .7;
}
#other .wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: calc(1248 / 1396 * 100vw);
  margin: 0 auto;
}
#other .pic img {
  width: 100%;
  height: auto;
}

#other .block {
  position: relative;
}
#other .block::before {
  content: '';
  position: absolute;
  top: calc(10 / 1396 * 100vw);
  left: calc(10 / 1396 * 100vw);
  display: block;
  width: calc(376 / 1396 * 100vw);
  height: calc(170 / 1396 * 100vw);
  background-color: rgba(0,0,0,.1);
  border-radius: 10px;
  -ms-filter: blur(16px);
  filter: blur(16px);
}

#other .other-head {
  margin-bottom: calc(60 / 1396 * 100vw);
}
#other .other-head .block {
  width: calc(594 / 1396 * 100vw);
}

#other .other-head .block::before {
  top: calc(350 / 1396 * 100vw);
  left: calc(50 / 1396 * 100vw);
  width: calc(554 / 1396 * 100vw);
  height: calc(120 / 1396 * 100vw);
}
#other h3 {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: calc(554 / 1396 * 100vw);
  height: calc(120 / 1396 * 100vw);
  font-size: calc(22 / 1396 * 100vw);
  font-weight: normal;
  color: #E85382;
  background: #fff;
  line-height: 1;
  border-radius: calc(10 / 1396 * 100vw) 0 calc(10 / 1396 * 100vw) 0;
  padding-bottom: calc(60 / 1396 * 100vw);
  margin: calc(-60 / 1396 * 100vw) 0 0 auto;
  box-sizing: border-box;
}
#other h3::before {
  content: "";
  display: block;
  width: calc(30 / 1396 * 100vw);
  height: calc(3 / 1396 * 100vw);
  background: transparent linear-gradient(90deg, #DE3B70 0%, #EC733F 11%, #DE3B70 61%, #E9829F 100%) 0% 0% no-repeat padding-box;
  border-radius: 0 2px 2px 0;
  margin-right: calc(12 / 1396 * 100vw);
}
#other h3::after {
  content: '';
  position: absolute;
  top: calc(46 / 1396 * 100vw);
  right: calc(25 / 1396 * 100vw);
  display: block;
  width: calc(29 / 1396 * 100vw);
  height: calc(29 / 1396 * 100vw);
  background: url("../../../common/img/icon_next.svg") no-repeat;
  background-size: calc(29 / 1396 * 100vw) auto;
}
#other .other-bottom .block {
  width: calc(376 / 1396 * 100vw);
}
#other .other-bottom h3 {
  width: calc(376 / 1396 * 100vw);
  height: calc(170 / 1396 * 100vw);
  line-height: 1;
  padding-bottom: calc(81 / 1396 * 100vw);
  margin: 0;
}
#other .other-bottom h3::after {
  top: calc(70 / 1396 * 100vw);
  right: calc(20 / 1396 * 100vw);
}

/* ---------------------------------------------------------
media queries
----------------------------------------------------------*/
@media screen and (max-width:768px) {

/* ---------------------------------------------------------
main
----------------------------------------------------------*/
  main .txt {
    left: calc(55 / 375 * 100vw);
    width: calc(37 / 375 * 100vw);
    padding-top: calc(14 / 375 * 100vw);
  }

/* ---------------------------------------------------------
h1
----------------------------------------------------------*/
  article h1 {
    font-size: calc(21 / 375 * 100vw);
    letter-spacing: .1em;
    padding-top: calc(10 / 375 * 100vw);
  }
  article h1::before {
    width: calc(19 / 375 * 100vw);
    height: calc(2 / 375 * 100vw);
    margin-right: calc(6 / 375 * 100vw);
    margin-bottom: calc(4 / 375 * 100vw);
    border-radius: 0 calc(2 / 375 * 100vw) calc(2 / 375 * 100vw) 0;
  }

/* ---------------------------------------------------------
.ttl-recruit
----------------------------------------------------------*/
  .ttl-recruit::after {
    width: calc(20 / 375 * 100vw);
    height: calc(2 / 375 * 100vw);
    margin: calc(13 / 375 * 100vw) auto 0;
    border-radius: calc(2 / 375 * 100vw);
  }

/* ---------------------------------------------------------
#news
----------------------------------------------------------*/
  #news dl {
    width: calc(350 / 375 * 100vw);
    background: transparent;
    padding: calc(23 / 375 * 100vw) 0 0;
    margin: 0 auto calc(20 / 375 * 100vw);
    border-radius: 0;
  }
  #news dt {
    font-size: calc(12 / 375 * 100vw);
    padding: calc(13 / 375 * 100vw) 0 0 0;
    margin-bottom: calc(5 / 375 * 100vw);
  }
  #news dd {
    font-size: calc(12 / 375 * 100vw);
    line-height: 1.5;
    padding: 0 0 calc(18 / 375 * 100vw) 0;
  }
  #news dd:last-child {
    border-bottom: none;
  }
  #news dd a {
    background: url("../../../common/img/icon_tri_pink.svg") no-repeat left top calc(6 / 375 * 100vw);
    background-size: calc(5 / 375 * 100vw) auto;
    padding-left: calc(10 / 375 * 100vw);
  }

/* ---------------------------------------------------------
#cate
----------------------------------------------------------*/
  article {
    overflow: hidden;
  }
  #cate::before {
    width: calc(243 / 375 * 100vw);
  }
  #cate::after {
    right: calc(14 / 375 * 100vw);
    width: calc(212 / 375 * 100vw);
    height: calc(29 / 375 * 100vw);
    background: url(../img/txt_company_sp.svg) no-repeat;
    background-size: calc(212 / 375 * 100vw) auto;
  }
  #cate .about {
    margin-bottom: calc(40 / 375 * 100vw);
  }
  #cate .about .inner {
    width: calc(302 / 375 * 100vw);
    height: calc(110 / 375 * 100vw);
    border-radius: 0 0 calc(10 / 375 * 100vw) 0;
    padding: calc(19 / 375 * 100vw) 0 0 calc(12 / 375 * 100vw);
    margin-top: calc(-30 / 375 * 100vw);
  }
  #cate .about h2 {
    font-size: calc(19 / 375 * 100vw);
    margin-bottom: calc(9 / 375 * 100vw);
  }
  #cate .about p {
    font-size: calc(12 / 375 * 100vw);
    line-height: 1.6;
  }
  #cate .wrapper {
    display: block;
    width: calc(350 / 375 * 100vw);
    padding-bottom: calc(30 / 375 * 100vw);
    margin: 0 auto;
  }
  #cate .block {
    width: 100%;
    margin-bottom: calc(30 / 375 * 100vw);
  }
  #cate .block::before {
    top: calc(210 / 375 * 100vw);
    left: calc(46 / 375 * 100vw);
    width: calc(326 / 375 * 100vw);
    height: calc(70 / 375 * 100vw);
    background-color: rgba(0,0,0,.05);
  }
  #cate .txt {
    width: calc(326 / 375 * 100vw);
    height: calc(70 / 375 * 100vw);
    background: #fff url("../../../common/img/icon_next.svg") no-repeat right 5.3vw top 50%;
    background-size: 5.3vw auto;
    padding-top:  calc(23 / 375 * 100vw);
    margin-top: calc(-35 / 375 * 100vw);
  }
  #cate .wrapper h2 {
    font-size: calc(17 / 375 * 100vw);
  }
  #cate .wrapper h2::before {
    width: calc(17 / 375 * 100vw);
    height: calc(2 / 375 * 100vw);
    margin-right: calc(6 / 375 * 100vw);
    margin-bottom: calc(1 / 375 * 100vw);
  }

/* ---------------------------------------------------------
#ideal
----------------------------------------------------------*/
  #ideal {
    padding: calc(56 / 375 * 100vw) 0 calc(80 / 375 * 100vw);
  }
  #promise {
    padding: calc(55 / 375 * 100vw) 0 calc(80 / 375 * 100vw);
  }
  #ideal::before,
  #promise::before {
    height: calc(140 / 375 * 100vw);
  }
  #ideal::after,
  #promise::after {
    right: calc(17 / 375 * 100vw);
    width: calc(320 / 375 * 100vw);
    height: calc(28 / 375 * 100vw);
    background: url("../img/txt_desire_sp.svg") no-repeat;
    background-size: calc(320 / 375 * 100vw) auto;
  }
  #promise::after {
    width: calc(275 / 375 * 100vw);
    background: url(../img/txt_promise_sp.svg) no-repeat;
    background-size: calc(275 / 375 * 100vw) auto;
  }

  .col3 {
    display: block;
    width: calc(300 / 375 * 100vw);
    margin: calc(29 / 375 * 100vw) auto 0;
  }
  .col3 .block {
    width: 100%;
    height: calc(222 / 375 * 100vw);
  }
  .col3 h3 {
    font-size: calc(18 / 375 * 100vw);
  }
  .col3 h3::after {
    width: calc(23 / 375 * 100vw);
    height: calc(2 / 375 * 100vw);
    margin: calc(20 / 375 * 100vw) auto calc(10 / 375 * 100vw);
  }
  .col3 p {
    font-size: calc(12 / 375 * 100vw);
    line-height: 1.6;
  }


/* ---------------------------------------------------------
#other
----------------------------------------------------------*/
  #other {
    padding: calc(80 / 375 * 100%) 0 calc(60 / 375 * 100%);  
  }
  #other::before {
    height: calc(770 / 375 * 100vw);
  }
  #other .wrapper {
    display: block;
    width: calc(350 / 375 * 100vw);
  }

  #other .block::before {
    top: calc(10 / 375 * 100vw);
    left: calc(10 / 375 * 100vw);
    width: calc(350 / 375 * 100vw);
    height: calc(70 / 375 * 100vw);
    background-color: rgba(0,0,0,.05);
  }

  #other .other-head {
    margin-bottom: calc(30 / 375 * 100vw);
  }
  #other .other-head .block {
    width: 100%;
  }
  #other .other-head .block:first-child {
    margin-bottom: calc(15 / 375 * 100vw);
  }

  #other .other-head .block::before {
  top: calc(350 / 375 * 100vw);
  left: calc(50 / 375 * 100vw);
    width: calc(350 / 375 * 100vw);
    height: calc(70 / 375 * 100vw);
  }
  #other h3 {
    width: calc(320 / 375 * 100vw);
    height: calc(70 / 375 * 100vw);
    font-size: calc(17 / 375 * 100vw);
    border-radius: calc(10 / 375 * 100vw) 0 calc(10 / 375 * 100vw) 0;
    padding-bottom: calc(31 / 375 * 100vw);
    margin: calc(-36 / 375 * 100vw) 0 0 auto;
  }
  #other h3::before {
    width: calc(17 / 375 * 100vw);
    height: calc(2 / 375 * 100vw);
    margin-right: calc(5 / 375 * 100vw);
  }
  #other h3::after {
    top: calc(25 / 375 * 100vw);
    right: calc(20 / 375 * 100vw);
    width: calc(20 / 375 * 100vw);
    height: calc(20 / 375 * 100vw);
    background-size: calc(20 / 375 * 100vw) auto;
  }
  #other .other-bottom .block {
    width: calc(320 / 375 * 100vw);
    margin-bottom: calc(15 / 375 * 100vw);
  }
  #other .other-bottom .block:last-child {
    margin-bottom: 0;
  }
  #other .other-bottom h3 {
    width: calc(350 / 375 * 100vw);
    height: calc(70 / 375 * 100vw);
    padding-bottom: calc(30 / 375 * 100vw);
  }
  #other .other-bottom h3::after {
    top: calc(25 / 375 * 100vw);
    right: calc(20 / 375 * 100vw);
  }
}