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

h1 {
    font-size: 48px;
}

p {
    font-size: 16px;
}

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

.content {
    width: 100%;
}

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

/* ============================================================
    テスト関連
============================================================ */
.wrapper {
    width: 100%;
    /* 親の横幅いっぱい */
    position: relative;
}

/* ============================================================
    ボタンデフォルト
============================================================ */
.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;
    color: #fff;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.button::before {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
}

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

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

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

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

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

    .none-sp {
        display: none;
    }
}

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

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

    .layout-sp {
        display: unset;
    }
}

/* ============================================================
    パンくずリスト
============================================================ */
.breadcrumb {
    margin-left: 16px;
    margin-right: 16px;
    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__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__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;
}

/* クリック後：赤色 */
.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;
}

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

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

@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;
    }
}

/* サブタイトル */
.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;
}