/* リセット */
body,
p,
ul {
  margin: 0;
  padding: 0;
}

img,
svg,
li {
  line-height: 0;
  list-style: none;
}


/* 共通指定 */
main svg {
  color: var(--recColor);
}

main {
  min-width: 300px;
  --recColor: var(--systemColor--pink);
}

button,
a {
  cursor: pointer;
  text-decoration: none;
}

button:hover,
a:hover {
  opacity: 0.8;
}


/*------------- メインビジュアル -------------*/
#recBlock__mainVisual {
  background: var(--recColor);
  font-weight: bold;
  padding-bottom: 4vw;
}

.recClass__companyName {
  justify-content: flex-start;
}

.recClass__companyName img {
  background-color: #fff;
  border-radius: 50%;
  width: 35px;
  margin-right: 6px;
}


/* キャッチフレーズSP */
.recClass__catchPhrase--sp {
  justify-content: space-between;
}

.recClass__catchPhrase--sp p {
  font-size: clamp(var(--font-size-lg), 7vw, var(--font-size-ml));
  line-height: 1.25;
  width: 85%;
  max-width: 260px;
  margin-top: 2vw;
}


/* 写真コンテンツ */
.recBlock__photoList {
  padding: 0 4vw;
}

.recBlock__photoList li {
  border-radius: 10px;
  overflow: hidden;
}


.recClass__photoList--sp ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5vw;
  justify-content: flex-start;
}

.recClass__photoList--sp li {
  width: calc(50% - 0.75vw);
  /*gapの半分を引く*/
}


/*スライダー調整*/
.splide__pagination {
  bottom: -23px;
}


/*------------- 職種・所在地・雰囲気タグ -------------*/
#recSection_aboutJob svg {
  width: 30px;
  height: 30px;
  margin-right: 3px;
}

.recClass__occupation {
  font-weight: bold;
  font-size: var(--font-size-lg);
}

.recClass__workPlace {
  line-height: 1.5;
  font-size: var(--font-size-sm);
}

.recClass__atmosphere ul {
  display: flex;
  width: fit-content;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--font-size-sm);

}

.recClass__atmosphere li {
  color: #FFF;
  background-color: var(--recColor);
  padding: 4px 8px;
  line-height: 1;
  font-weight: bold;
  border-radius: 100px;
}


/*------------- 担当者メッセージ -------------*/
#recSection__message {
  background: linear-gradient(0.25turn, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95));
  background-color: var(--recColor);
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 5vw 4vw;
  border: 2px solid var(--recColor);
  border-radius: 10px;
  margin-bottom: 2vw;
}

.recClass__messageImg {
  width: 17vw;
  max-width: 80px;
  border-radius: 50%;
}

.recClass__messageText {
  font-size: var(--font-size-sm);
}

.recClass__messageName {
  text-align: right;
  font-size: var(--font-size-sm);
}




/*------------- 雇用条件 -------------*/
#recSection__jobDetails li {
  margin: auto 2vw;
  padding: 4vw 3vw;
  border-bottom: 1px solid var(--systemColor--thin--gray);
  line-height: 1.3;
  font-size: var(--font-size-sm);
}

#recSection__jobDetails li:last-child {
  border-bottom: none;
}

#recSection__jobDetails li svg {
  width: 25px;
  height: 25px;
}

#recSection__jobDetails div {
  width: 38%;
  gap: 1vw
}

#recSection__jobDetails .recClass__jobDetails--title {
  font-weight: bold;
}

#recSection__jobDetails .recClass__jobDetails--cont_xs {
  font-size: var(--font-size-xs);
}


/*------------- ボタンコンテンツ -------------*/
.recSection__btncont {
  justify-content: center;
  gap: 5px;
}


/*------------- ボタン -------------*/
/* ボタンのsvgの色を親要素に追従 */
.recPart_entryBtn svg,
.recPart_favoriteBtn--ver1 svg,
.recPart_favoriteBtn--ver2 svg {
  color: inherit;
}

/* 話を聞いてみたいボタン */
.recPart_entryBtn {
  background-color: var(--recColor);
  width: 80%;
  height: 60px;
  min-width: 180px;
  padding: 0 clamp(5px, 1vw, 15px);
  color: #fff;
  font-weight: bold;
  font-size: var(--font-size-base);
  border: none;
  border-radius: 10px;
  justify-content: center;
  gap: 8px;
}


/* いいねボタン共通 */
.recPart_favoriteBtn--ver1,
.recPart_favoriteBtn--ver2 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: var(--recColor);
  width: 60px;
  height: 60px;
  position: relative;
}

.recPart_favoriteBtn--ver1 svg,
.recPart_favoriteBtn--ver2 svg {
  width: 30px;
  height: 30px;
}

/* いいねボタン① */
.recPart_favoriteBtn--ver1 {
  background-color: #fff;
  border: none;
}

/* いいねボタン② */
.recPart_favoriteBtn--ver2 {
  background: linear-gradient(0.25turn, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95));
  background-color: var(--recColor);
  border: 2px solid var(--recColor);
}


.recPart_favoriteBtn--active {
  display: none;
}

.recPart_favoriteBtn--active::after {
  content: '追加済み';
}

.recPart_favoriteBtn--ver1[aria-pressed="true"] .recPart_favoriteBtn--default,
.recPart_favoriteBtn--ver2[aria-pressed="true"] .recPart_favoriteBtn--default {
  display: none;
}

.recPart_favoriteBtn--ver1[aria-pressed="true"] .recPart_favoriteBtn--active,
.recPart_favoriteBtn--ver2[aria-pressed="true"] .recPart_favoriteBtn--active {
  display: inline;
}

.recPart_favoriteBtn--ver1[aria-pressed="true"],
.recPart_favoriteBtn--ver2[aria-pressed="true"] {
  padding-bottom: 8px;
  color: var(--systemColor--favoriteYellow);
}

.recPart_favoriteBtn--ver1[aria-pressed="true"]::after,
.recPart_favoriteBtn--ver2[aria-pressed="true"]::after {
  content: "追加済み";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--systemColor--defaultText);
}


/*------------- レスポンシブ -------------*/
@media (min-width: 768px) {

  /* 共通指定 */
  .recClass__aboutCompany,
  .recClass_textCont {
    max-width: 950px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .recClass_textCont {
    padding: 0 15px;
  }

  /* メインビジュアル */
  #recBlock__mainVisual {
    padding-bottom: 30px;
  }

  .recBlock__photoList {
    padding: 0;
  }

  /* 職種・所在地・雰囲気タグ */
  .recClass__catchPhrase--pc {
    font-size: clamp(var(--font-size-base), 3vw, var(--font-size-ml));
    font-weight: bold;
  }

  /* 担当者メッセージ */
  #recSection__message {
    padding: 30px;
    width: 56%;
    margin-bottom: 0;
  }

  /* 雇用条件 */
  #recSection__jobDetails {
    width: 40%;
    min-width: 320px;
  }

  #recSection__jobDetails li {
    margin: 0;
    padding: 15px;
  }

  #recSection__jobDetails li:nth-last-child(2) {
    border-bottom: none;
  }

  /* ボタン */
  .recClass__interview--pc {
    text-align: right;
    margin-top: 0.5vw;
    font-size: var(--font-size-sm);
  }

}