@charset "UTF-8";

/*-----------
 block： breadcrumbs
-----------*/
.breadcrumbs {
  display: none;
}

@media print,screen and (min-width: 1024px) {
  
  .breadcrumbs {
    display: block;
    margin-block-end: 3.75rem;
  }

  .breadcrumbsList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
  }

  .breadcrumbsList li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
    /* 12-14px */
  }

  .breadcrumbsList li:not(:last-child)::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-main);
    border-bottom: 2px solid var(--color-main);
    transform: rotate(-45deg);
  }

}

/*-----------
 block： UIJターンinfo
-----------*/
.uijInfo {
  background: var(--color-gradation-orange);
  padding-block: 1rem 0.5rem;
  border-radius: 20px;
}

.uijInfoInner {
  position: relative;
  top: -2rem;
}

/* 見出し */
.uijInfoHeadingImage {
  width: fit-content;
  height: 40px;
  margin-inline: auto;
  margin-block-end: 1em;
}

.uijInfoHeadingImage img {
  width: auto;
  height: 100%;
}

.uijInfoHeading .ja {
  margin-block-end: 0;
  text-align: center;
  font-size: clamp(1.25rem, 1.009rem + 0.99vw, 1.75rem);
  /* 20-28px */
}

.uijInfoHeading .subtext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-block-start: 1em;
  text-align: center;
  font-weight: 700;
}

.uijGideHeading {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1em;
}

.uijGideHeading .image {
  display: block;
  width: min(80%, 248px);
}

.uijGideHeading .text {
  display: block;
  padding-inline: 1em;
  font-size: 1rem;
  /* 16px */
  border-left: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
}

.uijInfoBanner a,
.uijGideBanner a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

.uijInfoBanner a::after,
.uijGideBanner a::after {
  display: none;
}

.uijGideBanner {
  width: min(100%, 600px);
  margin-inline: auto;
  margin-block-end: 1.25rem;
}

.uijInfoCkeckList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25em 0.75em;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  list-style: none;
}

.uijInfoCkeckList li {
  margin-block-end: 0 !important;
}

.uijInfo .shadowButton {
  width: fit-content;
}

.uijInfo .shadowButton a {
  padding-inline: 2em calc(2em + 1.5rem);
  font-size: clamp(0.75rem, 0.63rem + 0.49vw, 1rem);
  /* 12-16px */
}

.uijInfo .backborder {
  position: relative;
}

.uijInfo .backborder::before {
  content: '';
  display: block;
  position: absolute;
  top: 1.75em;
  left: 0;
  width: 100%;
  height: 2px;
  border-bottom: 2px dotted var(--color-gray);
}

@media print,screen and (min-width: 1024px) {

  .uijInfoInner {
    top: -2.5rem;
  }

  .uijInfoHeadingImage {
    height: 85px;
  }

  .uijGideHeading {
    flex-direction: row;
  }

  .uijInfoCkeckList {
    gap: 1.25em 2em;
  }

}


/*-----------
 block： お気に入り登録エリア（詳細ページ下部）
-----------*/
.favoriteButtonArea {
  text-align: center;
}


/*-----------
 block： トピックス
-----------*/
.topicsList {
  margin-block-start: 0;
}


/*-----------
 block： 相談窓口
-----------*/
.counterBox:not(:last-of-type) {
  margin-block-end: 2.5rem;
  /* 40px */
}

.counterBox summary {
  justify-content: space-between;
  margin-block-start: 2rem;
  margin-block-end: 0;
  text-align: left;
  font-size: clamp(1rem, 0.88rem + 0.49vw, 1.25rem);
  /* 16-20px */
  background-color: var(--color-main-gray);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.counterBox .detailsContent {
  padding-inline: 0.5rem;
  padding-block: 1rem;
}

.counterBox .detailsContent .groupMin:first-of-type {
  margin-block-start: 0;
}

.counterBox .detailsContent .groupMin:last-of-type {
  margin-block-end: 0;
}

.counterBox .detailsContent img {
  border-radius: 10px;
}

@media print,screen and (min-width: 1024px) {

  .counterBox:not(:last-of-type) {
    margin-block-end: 3.75rem;
    /* 60px */
  }

  .counterBox summary {
    padding-inline: 1.25rem;
    padding-block: 1.25rem;
  }

  .counterBox .detailsContent {
    padding-inline: 1.25rem;
    padding-block: 2rem;
  }

}


/*-----------
 component： 共通
-----------*/
/* 幅 */
.w5 {
  width: 5%;
}
.w10 {
  width: 10%;
}
.w15 {
  width: 15%;
}
.w20 {
  width: 20%;
}
.w25 {
  width: 25%;
}
.w30 {
  width: 30%;
}
.w35 {
  width: 35%;
}
.w40 {
  width: 40%;
}
.w45 {
  width: 45%;
}
.w50 {
  width: 50%;
}
.w55 {
  width: 55%;
}
.w60 {
  width: 60%;
}
.w65 {
  width: 65%;
}
.w70 {
  width: 70%;
}
.w75 {
  width: 75%;
}
.w80 {
  width: 80%;
}
.w85 {
  width: 85%;
}
.w90 {
  width: 90%;
}
.w95 {
  width: 95%;
}
.w100 {
  width: 100%;
}

/* margin */
.mt0 {
  margin-block-start: 0;
}
.mt1 {
  margin-block-start: 1rem;
}
.mt2 {
  margin-block-start: 2rem;
}
.mt3 {
  margin-block-start: 3rem;
}
.mt4 {
  margin-block-start: 4rem;
}
.mt5 {
  margin-block-start: 5rem;
}


.mb0 {
  margin-block-end: 0;
}
.mb1 {
  margin-block-end: 1rem;
}
.mb2 {
  margin-block-end: 2rem;
}
.mb3 {
  margin-block-end: 3rem;
}
.mb4 {
  margin-block-end: 4rem;
}
.mb5 {
  margin-block-end: 5rem;
}

.minlineAuto {
  margin-inline: auto;
}


/* -----------
 component: 他部品
-----------*/
.borderbtm {
  border-bottom: 2px dotted var(--color-m-gray);
}

/*-----------
 component： pagination
-----------*/
.pagination:not(.mvPagination) {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0;
}

.paginationLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.pagination:not(.mvPagination) a {
  text-decoration: none;
}

.pagination:not(.mvPagination) a,
.pagination:not(.mvPagination) span:not(.dots) {
  display: block;
  width: auto;
  padding-inline: 1.25em;
  padding-block: 0.75em;
  font-size: .875rem;
  border: 1px solid var(--color-m-gray);
  border-radius: 10px;
}

.pagination:not(.mvPagination) span.current {
  color: var(--color-white);
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
}

.pagination:not(.mvPagination) .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

@media (any-hover: hover) {

  .pagination:not(.mvPagination) a:hover {
    color: var(--color-white);
    background-color: var(--color-main);
    border: 1px solid var(--color-main);
  }

}

/*-----------
 component： keyword
-----------*/
.keyword .categoryList {
  margin-block-end: 0;
}

/*-----------
 component： appeal
-----------*/
.appeal .boxBackShadow {
  margin-block-end: 1.25rem;
}

@media print,screen and (min-width: 1024px) {

  .appeal .boxBackShadow {
    margin-block-end: 2.5rem;
  }

}