@charset "UTF-8";
/**
2025ホーム改定UIを使用するシングルページ用
ボタンデザインなどヘッダーで利用していない標準スタイルまとめ

共通ヘッダーの併用を前提とする
https://hobo-nichi.backlog.jp/document/FETEAM/0198c586c2647edda43f4e7a465c8d45
**/
@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes clipPath {
  100% {
    clip-path: inset(0);
  }
}
.link-arrow {
  display: flex;
  align-items: center;
  line-height: 1;
}
.link-arrow::after {
  font-family: "Hobonichi-Icons";
  content: "\e917";
  font-size: 1.6em;
  display: block;
  position: relative;
}
@media (min-width: 992px) {
  .link-arrow::after {
    top: 1px;
  }
}

.link-arrow-tail {
  padding: 0.4em 0.8em;
  border-radius: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: fit-content;
}
@media (min-width: 992px) {
  .link-arrow-tail {
    font-size: 0.875rem;
  }
}
.link-arrow-tail::after {
  content: "";
  background-color: currentColor;
  display: block;
  width: 1em;
  height: 1em;
  mask: url("../images/icons/arrow-tail.svg");
  mask-size: cover;
  vertical-align: middle;
}

.link-arrow-tail-prev {
  padding: 0.4em 0.8em;
  border-radius: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: fit-content;
}
@media (min-width: 992px) {
  .link-arrow-tail-prev {
    font-size: 0.875rem;
  }
}
.link-arrow-tail-prev::before {
  content: "";
  background-color: currentColor;
  display: block;
  width: 1em;
  height: 1em;
  mask: url("../images/icons/arrow-tail.svg");
  mask-size: cover;
  vertical-align: middle;
  transform: rotate(180deg);
}

.section {
  display: grid;
  gap: 0.5rem;
  width: min(calc(100% - 1rem * 2), 71.25rem);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 600px) {
  .section {
    width: min(calc(100% - 2.5rem * 2), 71.25rem);
  }
}
@media (min-width: 992px) {
  .section {
    gap: 1rem;
  }
}

.section-full {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  max-width: 100vw;
  grid-template-columns: minmax(0, 100%);
}
@media (min-width: 992px) {
  .section-full {
    gap: 1rem;
  }
}
.section-full .section-inner {
  width: min(calc(100% - 1rem * 2), 71.25rem);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 600px) {
  .section-full .section-inner {
    width: min(calc(100% - 2.5rem * 2), 71.25rem);
  }
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  padding-bottom: 0.5rem;
}
@media (min-width: 992px) {
  .section-title {
    padding-bottom: 1rem;
  }
}
.home .section-title, .yomumiru .section-title {
  border-bottom: 1px solid #D9D9D9;
}
.section-title h2 {
  font-size: 1.25rem;
  font-weight: 600;
}
.section-title .btn-arrow {
  background-color: #DBF2FF;
  color: #005588;
  font-size: 0.625rem;
}
@media (min-width: 992px) {
  .section-title .btn-arrow {
    font-size: 0.875rem;
  }
}
.section-title .btn-arrow::after {
  background-color: #005588;
}
.section-title.has-icon h2 {
  display: flex;
  align-items: center;
  gap: 0.2em;
}
.section-title.has-icon h2:before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.section-title.has-icon svg {
  width: 2rem;
  height: 2rem;
}
@media (min-width: 992px) {
  .section-title.has-icon svg {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.section-main {
  min-width: 0;
}

.section-search-wrapper {
  display: flex;
  flex-direction: column;
}
@media (min-width: 600px) {
  .section-search-wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
}
.section-search-wrapper .section-title {
  padding-bottom: 1rem;
}
@media (min-width: 600px) {
  .section-search-wrapper .section-title {
    padding-bottom: 0;
  }
}

.standard {
  background-color: #FFFDE2;
}
.standard .section {
  background-color: #fff;
  width: min(calc(100% - 0px * 2), 61.25rem);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 600px) {
  .standard .section {
    width: min(calc(100% - 2.5rem * 2), 61.25rem);
  }
}
.standard .section {
  margin-top: 5.25rem;
}
@media (min-width: 600px) {
  .standard .section {
    margin-top: 3.5rem;
  }
}
@media (min-width: 992px) {
  .standard .section {
    margin-top: 3.75rem;
  }
}
.standard .section-hero img {
  width: 100%;
}
.standard .section-main {
  width: calc(100% - 2em);
  max-width: fit-content;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1.25rem;
}
@media (min-width: 600px) {
  .standard .section-main {
    margin-bottom: 3.75rem;
    margin-top: 1.25rem;
  }
}
.standard .section-inner {
  max-width: 31.25rem;
  margin-right: auto;
  margin-left: auto;
}
.standard p {
  margin-bottom: 1em;
}
.standard a:not(.btn) {
  color: #1979B9;
  text-decoration: underline;
}
.standard .btn {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}
.standard .bottom-wrapper {
  margin-top: 2em;
  margin-bottom: 2em;
}
.standard ol {
  list-style: decimal;
  margin-left: 1em;
}
.standard ol li {
  margin-bottom: 1em;
}
.standard .text-right {
  text-align: right;
}
.standard .m-left-auto {
  margin-left: auto;
  width: fit-content;
}

.standard-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1em;
  margin-top: 2em;
}

.standard-title-small {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1em;
  margin-top: 2em;
}