/* ============================================================
    全体のフォントを 管理
============================================================ */
html,
body {
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    color: #222222;
    height: 100%;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 48px;
}

p {
    font-size: 16px;
}

.container {
    width: 100%;
    margin-top: 100px;
}

.content {
    width: 100%;
}

/* レイアウト調整 */
.f-bold {
    font-weight: bold;
}

.column-flex {
    display: flex;
    flex-direction: column;
}

/* ============================================================
    テスト関連
============================================================ */
.wrapper {
    width: 100%;
    /* 親の横幅いっぱい */
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 画面全体を縦いっぱいに */
}

/* ============================================================
    ボタンデフォルト
============================================================ */


.button{
 min-width: 150px;
    position: relative;
    padding: 10px 30px 10px 20px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 1.6px;
    text-align: center;
  overflow: hidden;
  cursor: pointer;

  background: var(--btn-bg, transparent);
  color: var(--btn-fg, #000);
  border: 1px solid var(--btn-border, transparent);

  transition:
    background-color var(--btn-dur, .25s) ease,
    color           var(--btn-dur, .25s) ease,
    border-color    var(--btn-dur, .25s) ease;
}

.button::before{
  content:"";
  position:absolute;
  top:50%;
  right: 10%;
  width: var(--dot-size, 8px);
  height: var(--dot-size, 8px);
  border-radius: 50%;
  background: var(--dot-color, currentColor);

  transform: translateY(-50%) scale(1);
  transform-origin: center;

  /* 放在内容下面，避免任何情况下挡字 */
  z-index: 0;

  transition:
    transform var(--dot-dur, .25s) cubic-bezier(.2,.8,.2,1),
    opacity   var(--dot-dur, .25s) ease;
}

/* hover：圆点原地放大（可选：同时淡出一点更像视频的“让位”感觉） */
.button:hover::before{
  transform: translateY(-50%) scale(var(--dot-scale, 2.2));
  opacity: var(--dot-opacity-hover, 1); /* 想淡出就设0 */
}

/* hover：按钮本体颜色直接切换（无背景扩散效果） */
.button:hover{
  background: var(--btn-bg-hover, var(--btn-bg, transparent));
  color:      var(--btn-fg-hover, var(--btn-fg, #000));
  border-color: var(--btn-border-hover, var(--btn-border, transparent));
}

/* 让文字永远在最上层（button 也适用） */
.button{
  z-index: 0;
}
.button{
  /* 建立层叠上下文 */
  isolation: isolate;
}
.button::before{ z-index: 0; }
.button{ }


/* ============================================================
    吹き出し画像デフォルト
============================================================ */

.item-img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

main {
    flex: 1;
}

@media screen and (min-width: 960px) {
    .none-pc {
        display: none;
    }
}

@media screen and (min-width: 520px) and (max-width: 1024px) {
    main {
        margin-top: 71px;
    }
}

@media screen and (max-width: 519px) {
    main {
        margin-top: 71px;
    }

    .none-sp {
        display: none;
    }
}

/* ============================================================
    レイアウト調整
============================================================ */
.layout-sp {
    display: none !important;
}

@media screen and (max-width: 1024px) {
    .layout-pc {
        display: none;
    }

    .layout-sp {
        display: unset !important;
    }
}

/* ============================================================
    パンくずリスト
============================================================ */
.breadcrumb {
    margin-bottom: 55px;
    font: normal normal medium Zen Kaku Gothic New;
    color: #888888;
    font-size: 12px;
    letter-spacing: 1.2px;
    /* line-height: calc(12px / 26px); */
}

.breadcrumb--general {
    position: absolute;
    right: 32px;
    top: 96px;
    z-index: 99;
}

.breadcrumb__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.breadcrumb__item+.breadcrumb__item::before {
    content: "›";
    /* 区切り文字 */
    letter-spacing: 1.2px;
}

.breadcrumb__link {
    text-decoration: none;
}

.breadcrumb__link:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1024px) {
    .breadcrumb {
        margin-left: unset;
        margin-right: unset;
        margin-bottom: 25.3px;
    }

    .breadcrumb--general {
        right: unset;
        left: 32px;
        top: 98px;
    }

    .breadcrumb__list {
        justify-content: start;
    }
}

/* ============================================================
    デザインを 管理
============================================================ */
/* 横点線(1ピクセルver) */
.design-horizontal-line {
    content: "";
    flex-shrink: 0;
    width: 100%;
    /* 線の長さ */
    height: 1px;
    /* 線の太さ */
    background-image: repeating-linear-gradient(to right,
            #000000 0 2px,
            /* ドットの幅 */
            transparent 2px 8px
            /* 間隔 8px */
        );
}

/* お気に入りボタン */
.favorite-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 12.17px;
    padding-bottom: 9.72px;
    background-color: #fff;
}

.favorite-button--border {
    border: 0.5px solid #6E6E6E;
}

.favorite-button .icon-heart {
    opacity: .2;
}

/*ハートの調整*/
.favorite-button.active .icon-heart {
    opacity: 1;
    width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
}

/* クリック後：赤色 */
.favorite-button.active .icon-heart path {
    fill: #e74c3c;
}

/* 吹き出し付タイトル */
.catchphrase-title__title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    font-size: 80px;
    letter-spacing: 4px;
    line-height: 1;
    margin-bottom: 42px;
}

@media screen and (max-width: 1024px) {
    .catchphrase-title__title {
        font-size: 40px;
        letter-spacing: 2px;
        line-height: 1;
    }
}

/* タイトル */
.dash-head {
    text-align: center;
    margin: 60px auto;
}

@media screen and (max-width: 1024px) {
    .dash-head {
        margin-bottom: 59.4px;
    }
}

.dash-head__title {
    font-size: 48px;
    letter-spacing: 2.4px;
    line-height: calc(36 / 48);
    color: #EB8E22;
    font-weight: bold;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 23.92px;
}

.dash-head__title::before,
.dash-head__title::after {
    content: "";
    flex-shrink: 0;
    width: 40px;
    /* 線の長さ */
    height: 2px;
    /* 線の太さ */
    background-image: repeating-linear-gradient(to right,
            #000000 0 2px,
            /* ドットの幅 */
            transparent 2px 8px
            /* 間隔 8px */
        );
}

@media screen and (max-width: 1024px) {
    .dash-head__title {
        font-size: 32px;
        letter-spacing: 3.2px;
        line-height: calc(40 / 32);
        margin-bottom: 36.6px;
        column-gap: 12px;
    }

    .dash-head__title::before,
    .dash-head__title::after {
        width: 23px;
    }
}

.dash-head__text {
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.8px;
    line-height: calc(32 / 16);
}

@media screen and (max-width: 1024px) {
    .dash-head__text {
        text-align: left;
    }
}

@media screen and (max-width: 389px) {
    .dash-head__title {
        font-size: 32px;
        letter-spacing: 3.2px;
        line-height: calc(40 / 32);
        margin-bottom: 36.6px;
        column-gap: 9px;
    }

    .dash-head__title::before,
    .dash-head__title::after {
        width: 23px;
    }
}

/* サブタイトル */
.section-dash-title {
    text-align: center;
    font-weight: bold;
    font-size: 32px;
    letter-spacing: 1.6px;
    line-height: calc(36 / 32);
    color: #EB8E22;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 23.92px;
}

.section-dash-title::before,
.section-dash-title::after {
    content: "";
    flex-shrink: 0;
    width: 40px;
    /* 線の長さ */
    height: 2px;
    /* 線の太さ */
    background-image: repeating-linear-gradient(to right,
            #000000 0 2px,
            /* ドットの幅 */
            transparent 2px 8px
            /* 間隔 8px */
        );
}

@media screen and (max-width: 1024px) {
    .section-dash-title {
        font-size: 20px;
        letter-spacing: 1px;
        line-height: 1;
        color: #EB8E22;
        column-gap: 12px;
    }

    .section-dash-title::before,
    .section-dash-title::after {
        width: 22px;
    }
}

/* ============================================================
    ページネーション 管理
============================================================ */
.custom-pagination-area {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

@media screen and (max-width: 1024px) {
    .custom-pagination-area {
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        align-items: center;
    }
}

.custom-pagination__count {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .9px;
    line-height: calc(51 / 18);
}

@media screen and (max-width: 1024px) {
    .custom-pagination__count {
        font-size: 14px;
        letter-spacing: 1.4px;
        line-height: calc(32 / 14);
    }
}

.custom-pagination__count span {
    font-family: 'Ubuntu', sans-serif;
    font-size: 51px;
    letter-spacing: 2.55px;
    line-height: calc(142 / 51);
    color: #EB8E22;
}

@media screen and (max-width: 1024px) {
    .custom-pagination__count span:not(.layout-pc) {
        font-size: 32px;
        letter-spacing: 3.2px;
        line-height: calc(56 / 32);
        display: inline-block;
        margin-right: -4px;
        margin-left: -4px;
    }
}

.custom-pagination {
    font-size: 18px;
    letter-spacing: .9px;
    line-height: calc(50 / 18);
    font-weight: bold;
    display: flex;
    column-gap: 16px;
}

@media screen and (max-width: 1024px) {
    .custom-pagination {
        font-size: 14px;
        letter-spacing: .7px;
        line-height: calc(50 / 14);
        column-gap: 16px;
        justify-content: space-between;
        width: 100%;
    }
}

.custom-pagination .prev.disabled,
.custom-pagination .next.disabled {
    color: #C6C6C6;
}

.custom-pagination .prev,
.custom-pagination .next {
    display: flex;
    align-items: center;
    column-gap: 12.2px;
}

.custom-pagination .prev::before,
.custom-pagination .next::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2B9B7D;
}

.custom-pagination .prev.disabled::before,
.custom-pagination .next.disabled::after {
    background-color: #C6C6C6;
}

/* ============================================================
    レイアウト全体を 管理
============================================================ */
.page-wrapper {
    margin-top: 96px;
    margin-bottom: 130px;
    padding-right: 32px;
    padding-left: 32px;
}

@media screen and (max-width: 1024px) {
    .page-wrapper {
        margin-top: 26.7px;
        margin-bottom: 39.59px;
    }
}

.content-wrapper {
    padding-right: 32px;
    padding-left: 32px;
}

/* コンテンツの最大幅 */
.content-size {
    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
}

/* ============================================================
    カラー管理
============================================================ */
.bk-color--orange::before {
    background-color: #EB8E22;
}

.bk-color--yellow::before {
    background-color: #E6C657;
}

.bk-color--pink::before {
    background-color: #EB9293;
}

.bk-color--blue::before {
    background-color: #7FB2F1;
}

.font-color--orange {
    color: #EB8E22;
}

.font-color--yellow {
    color: #E6C657;
}

.font-color--pink {
    color: #EB9293;
}

.font-color--green {
    color: #309B7D;
}

.font-color--blue {
    color: #7FB2F1;
}

.background-color--orange {
    background-color: #EB8E22;
}

.background-color--yellow {
    background-color: #E6C657;
}

.background-color--pink {
    background-color: #EB9293;
}

.background-color--blue {
    background-color: #7FB2F1;
}

.border-color--orange {
    border-color: #EB8E22;
}

.border-color--yellow {
    border-color: #E6C657;
}

.border-color--pink {
    border-color: #EB9293;
}

.border-color--blue {
    border-color: #7FB2F1;
}

/* ============================================================
    エラーページ
============================================================ */
.error-page__header {
    position: relative;
    padding-bottom: 30.31px;
    margin-bottom: 49.68px;
}

.error-page__header::after {
    position: absolute;
    bottom: 0;
    content: "";
    flex-shrink: 0;
    width: 100%;
    height: 1px;
    background-image: repeating-linear-gradient(to right, #000000 0 1px,
            /* ドットの幅 */
            transparent 2px 8px
            /* 間隔 8px */
        );
}

.error-page__title {
    font-weight: 500;
    font-size: 32px;
    letter-spacing: 3.2px;
    line-height: calc(36 / 32);
}

@media screen and (max-width: 1024px) {
    .error-page__title {
        font-size: 24px;
        letter-spacing: 2.4px;
        line-height: calc(36 / 24);
    }
}

.error-page__description {
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.8px;
    line-height: 2;
    margin-bottom: 61.74px;
}

.error-page__link {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    background-color: #2B9B7D;
    border-radius: 24px;
    letter-spacing: 1.6px;
    line-height: 2;
    padding: 10px 21px 10px 66px;
    display: flex;
    column-gap: 40px;
    align-items: center;
}

.error-page__action {
    display: flex;
    margin-bottom: 61.74px;
}

.error-page__link::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #fff;
}

/* ============================================================
    問い合わせエラー
============================================================ */
.contact-error-messages {
    color: red;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 24px;
}