@charset "UTF-8";

/* 共通項目 */
/* section-title */
#guide .section-title {
    width: 87.2vw;
    padding: 13px 0 16px;
    margin: auto;
    position: relative;
    text-align: center;
}
#guide .section-title::before,
#guide .section-title::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #9f8e69;
    position: absolute;
    left: 0;
}
#guide .section-title::before {
    top: 1px;
}
#guide .section-title::after {
    bottom: 1px;
}
#guide .section-title h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    font-size: clamp(20px, 0.961rem + 1.23vw, 28px);
    line-height: 1.7em;
    color: #000000;
}
#guide .section-title small {
    font-family: Bookmania;
    font-weight: normal;
    font-size: 14px;
    font-size: clamp(14px, 0.731rem + 0.62vw, 18px);
    line-height: 1em;
    text-align: center;
    color: #56478b;
}

/* grid-card */
/*************************
以下、要設定項目
- grid-card__text-wrapper
    - background-color
- grid-card__text-wrapper::after
    - border
- grid-card__title
    - color
- grid-card__one-word
    - background-color
    - color
- grid-card__detail
    - color
**************************/
#guide .grid-card {
    color: #ffffff;
}
#guide .grid-card .wrapper {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
#guide .grid-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
#guide .grid-card__text-wrapper {
    width: 100%;
    height: auto;
    padding: 30px 23px;
    text-align: left;
    font-family: 'Noto Serif JP', serif;
    font-style: normal;
    position: relative;
    background-color: transparent;
}
#guide .grid-card__text-wrapper::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    pointer-events: none;
    border: 1px solid transparent;
}
#guide .grid-card__title {
    margin-bottom: 10px;
    font-size: 16px;
    font-size: clamp(16px, 0.711rem + 1.23vw, 24px);
    line-height: 1.5em;
    color: transparent;
}
#guide .grid-card__one-word {
    margin-bottom: 8px;
    padding: 0 11px;
    display: inline-block;
    font-size: 12px;
    font-size: clamp(12px, 0.606rem + 0.62vw, 16px);
    line-height: 34px;
    border-radius: 6px;
    background-color: transparent;
    color: transparent;
}
#guide .grid-card__detail {
    font-size: 14px;
    font-size: clamp(14px, 0.658rem + 0.92vw, 20px);
    line-height: 2.14em;
    color: transparent;
}

/* content */
#guide .content {
    width: 87.2vw;
    height: auto;
    margin: auto;
    text-align: center;
}

/* guide */
#guide {
    padding-bottom: 80px;
    background-image: url("/images/bg.jpg");
    background-repeat: repeat;
    background-size: cover;
}

/* top */
#guide .top {
    margin: 78px auto 57px;
}

#guide > picture img {
    width: 100%;
    height: auto;
}

#guide .top .page-title h2 {
    font-family: 'Noto Serif JP', serif;
    font-style: normal;
    font-size: 30px;
    font-size: clamp(28px, 1.509rem + 1.54vw, 38px);
    line-height: 1.3em;
    text-align: left;
    color: #5a5179;
}

#guide .top .page-title small {
    margin-bottom: 87px;
    font-family: "work-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-size: clamp(16px, 0.856rem + 0.62vw, 20px);
    line-height: 1em;
    text-align: left;
    color: #000000;
    display: block;
}

#guide .top img {
    width: 100%;
    height: auto;
}

/* history-of-karatsu */
.history-of-karatsu {
    margin-bottom: 80px;
    overflow: hidden;
}

.history-of-karatsu .mySwiper {
    width: 87.2vw;
    margin: 80px auto auto;
    position: relative;
}

.history-of-karatsu .mySwiper .swiper-wrapper {
}

.history-of-karatsu .swiper-slide {
    /* padding: 2.08vw; */
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #29233e;
}

.history-of-karatsu .swiper-slide .img-wrapper {
    width: 100%;
    height: auto;
    flex-shrink: 0;
    position: relative;
}

.history-of-karatsu .swiper-slide .img-wrapper::after {
    content: "";
    width: calc(100% - 20px);
    height: calc(100% - 16px);
    position: absolute;
    top: 10px;
    left: 8px;
    border: 1px solid #bcac8b;
}

.history-of-karatsu .swiper-slide .img-wrapper img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1.47/1;
    object-fit: cover;
    object-position: top;
}

.history-of-karatsu .swiper-slide .text-wrapper {
    padding: 0 20px 40px;
}

.history-of-karatsu .swiper-slide .title {
    margin-bottom: 10px;
    font-family: 'Noto Serif JP', serif;
    font-size: 16px;
    font-size: clamp(16px, 0.711rem + 1.23vw, 24px);
    line-height: 1.5em;
    text-align: left;
    color: #bcac8b;
}
.history-of-karatsu .swiper-slide .keyword {
    margin-bottom: 23px;
    padding: 0 10px;
    display: inline-block;
    font-family: 'Noto Serif JP', serif;
    font-size: 12px;
    font-size: clamp(12px, 0.606rem + 0.62vw, 16px);
    line-height: 31px;
    text-align: left;
    color: #ffffff;
    background-color: #796b4c;
    border-radius: 6px;
}
.history-of-karatsu .swiper-slide .description {
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-size: clamp(14px, 0.658rem + 0.92vw, 20px);
    line-height: 2.14em;
    text-align: left;
    color: #ffffff;
}

.history-of-karatsu .swiper-pagination {
    position: absolute;
    bottom: 15px;
    left: 0;
}

.history-of-karatsu .swiper-pagination-bullet {
    opacity: 1;
    background-color: #ffffff;
}
.history-of-karatsu .swiper-pagination-bullet-active {
    background-color: #796b4c;
}

.swiper-button-next {
    display: none;
}

.swiper-button-prev {
    display: none;
}

/* karatsu-ware */
#guide .karatsu-ware {
    margin-bottom: 80px;
}
#guide .karatsu-ware__title {
    margin-bottom: 80px;
}
#guide .karatsu-ware .content {
}
#guide .karatsu-ware .grid-card__text-wrapper {
    background-color: #9d9177;
}
#guide .karatsu-ware .grid-card__text-wrapper::after {
    border: 1px solid #ffffff;
}
#guide .karatsu-ware .grid-card__title {
    color: #29233e;
}
#guide .karatsu-ware .grid-card__one-word {
    background-color: #29233e;
    color: #ffffff;
}
#guide .karatsu-ware .grid-card__detail {
    color: #ffffff;
}

/* culture */
#guide .culture {
    margin-bottom: 80px;
}
#guide .culture__title {
    margin-bottom: 20px;
}
#guide .culture__img {
    width: 100%;
    height: auto;
}
#guide .culture__description {
    padding: 20px 0 40px;
    text-align: center;
}
#guide .culture__description p {
    margin-bottom: 40px;
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-size: clamp(14px, 0.658rem + 0.92vw, 20px);
    letter-spacing: 0.02em;
    line-height: 2.14em;
    text-align: left;
    color: #000000;
}
#guide .culture__description .img0 {
    width: 92.8vw;
}
#guide .culture__description .img1,
#guide .culture__description .img2,
#guide .culture__description .img3 {
    display: none;
}
#guide .culture .grid-card__text-wrapper {
    background-color: #29233e;
}
#guide .culture .grid-card__text-wrapper::after {
    border: 1px solid #bcac8b;
}
#guide .culture .grid-card__title {
    color: #bcac8b;
}
#guide .culture .grid-card__one-word {
    background-color: #796b4c;
    color: #ffffff;
}
#guide .culture .grid-card__detail {
    color: #ffffff;
}

/* panoramic-view */
#guide .panoramic-view {
    margin-bottom: 80px;
}
#guide .panoramic-view__title {
    margin-bottom: 20px;
}
#guide .panoramic-view img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
#guide .panoramic-view p {
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-size: clamp(14px, 0.731rem + 0.62vw, 18px);
    letter-spacing: 0.02em;
    line-height: 2.14em;
    text-align: left;
    color: #000000;
}

/* souvenirs */
#guide .souvenirs {
    margin-bottom: 80px;
}
#guide .souvenirs__title {
    margin-bottom: 20px;
}
#guide .souvenirs .grid-card__img-wrapper {
    position: relative;
}
#guide .souvenirs .grid-card .img2 {
    width: 24.26vw;
    height: auto;
    position: absolute;
    bottom: 10px;
    right: 10px;
}
#guide .souvenirs .grid-card__text-wrapper {
    background-color: #9d9177;
}
#guide .souvenirs .grid-card__text-wrapper::after {
    border: 1px solid #ffffff;
}
#guide .souvenirs .grid-card__title {
    color: #29233e;
}
#guide .souvenirs .grid-card__one-word {
    background-color: #29233e;
    color: #ffffff;
}
#guide .souvenirs .grid-card__detail {
    color: #ffffff;
}

/* four-seasons */
#guide .four-seasons {
}
#guide .four-seasons img {
    width: 100%;
    height: auto;
}
#guide .four-seasons__title {
    margin-bottom: 20px;
}
#guide .four-seasons__img {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}
#guide .four-seasons__img.pc-only {
    display: none;
}
#guide .four-seasons__img.sp-only {
    display: block;
}
#guide .four-seasons a {
    display: block;
    width: 100%;
    height: auto;
}
#guide .four-seasons a img {
    width: 100%;
    height: auto;
}

/**********************************************************
* min-width: 600px
/**********************************************************/
@media screen and (min-width: 600px) {
}

/**********************************************************
* min-width: 1025px
/**********************************************************/
@media screen and (min-width: 1025px) {
    /* 共通項目 */
    /* section-title */
    #guide .section-title {
        width: 52.08vw;
        padding: 20px 0 27px;
        margin: auto;
        position: relative;
        text-align: center;
    }
    #guide .section-title::before,
    #guide .section-title::after {
        content: "";
        width: 100%;
        height: 1px;
        background-color: #9f8e69;
        position: absolute;
        left: 0;
    }
    #guide .section-title::before {
        top: 0;
    }
    #guide .section-title::after {
        bottom: 0;
    }
    #guide .section-title h3 {
        font-family: 'Noto Serif JP', serif;
        font-size: 50px;
        font-size: clamp(38px, 1.516rem + 1.34vw, 50px);
        line-height: 1.3em;
        color: #000000;
    }
    #guide .section-title small {
        font-family: Bookmania;
        font-weight: normal;
        font-size: 20px;
        font-size: clamp(16px, 0.714rem + 0.45vw, 20px);
        line-height: 1em;
        text-align: center;
        color: #56478b;
    }

    /* grid-card */
    #guide .grid-card {
        color: #ffffff;
    }
    #guide .grid-card .wrapper {
        margin-bottom: 50px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    #guide .grid-card .wrapper:nth-of-type(even) {
        direction: rtl;
    }
    #guide .grid-card > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }
    #guide .grid-card__text-wrapper {
        width: 100%;
        height: auto;
        padding: 54px 74px;
        text-align: left;
        font-family: 'Noto Serif JP', serif;
        position: relative;
        background-color: transparent;
        direction: ltr;
    }
    #guide .grid-card__text-wrapper::after {
        content: "";
        position: absolute;
        top: 20px;
        left: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        pointer-events: none;
        border: 1px solid transparent;
    }
    #guide .grid-card__title {
        margin-bottom: 24px;
        font-size: 40px;
        font-size: clamp(26px, 0.623rem + 1.56vw, 40px);
        line-height: 1.62em;
        color: transparent;
    }
    #guide .grid-card__one-word {
        margin-bottom: 16px;
        padding: 2px 11px;
        display: inline-block;
        font-size: 25px;
        font-size: clamp(20px, 0.892rem + 0.56vw, 25px);
        line-height: 1.4em;
        border-radius: 6px;
        background-color: transparent;
        color: transparent;
    }
    #guide .grid-card__detail {
        font-size: 24px;
        font-size: clamp(18px, 0.696rem + 0.67vw, 24px);
        line-height: 2em;
        color: transparent;
    }

    /* content */
    #guide .content {
        width: 82.08vw;
    }

    /* guide */
    #guide {
        padding-bottom: 200px;
    }

    /* top */
    #guide .top {
        margin: 120px auto 109px;
    }

    #guide .top .page-title h2 {
        font-family: 'Noto Serif JP', serif;
        font-size: 50px;
        font-size: clamp(40px, 1.784rem + 1.12vw, 50px);
        line-height: 1.3em;
        text-align: left;
        color: #5a5179;
    }

    #guide .top .page-title small {
        margin-bottom: 87px;
        font-family: "work-sans", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        font-size: clamp(18px, 0.982rem + 0.22vw, 20px);
        line-height: 1em;
        text-align: left;
        color: #000;
        display: block;
    }

    #guide .top img {
    }

    /* history-of-karatsu */
    .history-of-karatsu {
        margin-bottom: 73px;
    }

    .history-of-karatsu .mySwiper {
        width: 82.08vw;
        margin: 80px auto auto;
        position: relative;
    }

    .history-of-karatsu .swiper-slide {
        padding: 2.08vw;
        display: flex;
        flex-direction: row;
        gap: 2.29vw;
        background-color: #29233e;
    }

    .history-of-karatsu .swiper-slide .img-wrapper {
        width: 40.26vw;
    }

    .history-of-karatsu .swiper-slide .img-wrapper::after {
        width: calc(100% - 40px);
        height: calc(100% - 36px);
        top: 20px;
        left: 18px;
    }

    .history-of-karatsu .swiper-slide .img-wrapper img {
    }

    .history-of-karatsu .swiper-slide .text-wrapper {
        margin-top: 41px;
        padding: 0;
    }

    .history-of-karatsu .swiper-slide .title {
        margin-bottom: 34px;
        font-size: 40px;
        font-size: clamp(32px, 1.427rem + 0.89vw, 40px);
        line-height: 1.62em;
    }
    .history-of-karatsu .swiper-slide .keyword {
        margin-bottom: 23px;
        padding: 3px 11px;
        font-size: 25px;
        font-size: clamp(20px, 0.892rem + 0.56vw, 25px);
        line-height: 1.2em;
    }
    .history-of-karatsu .swiper-slide .description {
        font-size: 25px;
        font-size: clamp(20px, 0.892rem + 0.56vw, 25px);
        line-height: 1.8em;
    }

    .history-of-karatsu .swiper-pagination {
        display: none;
    }

    .swiper-button-next {
        display: block;
        width: 24px;
        height: auto;
        left: calc(100% + 18px);
    }

    .swiper-button-prev {
        display: block;
        width: 24px;
        height: auto;
        right: calc(100% + 18px);
        left: auto;
    }

    /* karatsu-ware */
    #guide .karatsu-ware {
        margin-bottom: 240px;
    }

    #guide .karatsu-ware .content {
        margin: 81px auto auto;
    }

    #guide .karatsu-ware .grid-card__text-wrapper {
        background-color: #9d9177;
    }
    #guide .karatsu-ware .grid-card__text-wrapper::after {
        border: 1px solid #ffffff;
    }
    #guide .karatsu-ware .grid-card__title {
        color: #29233e;
    }
    #guide .karatsu-ware .grid-card__one-word {
        background-color: #29233e;
        color: #ffffff;
    }
    #guide .karatsu-ware .grid-card__detail {
        color: #ffffff;
    }

    /* culture */
    #guide .culture {
        margin-bottom: 197px;
    }
    #guide .culture__title {
        margin-bottom: 40px;
    }
    #guide .culture__img {
        width: 82.08vw;
        height: auto;
        margin: auto;
    }
    #guide .culture__description {
        padding: 106px 0 171px;
        text-align: center;
        position: relative;
    }
    #guide .culture__description p {
        margin-bottom: 0;
        font-size: 24px;
        font-size: clamp(18px, 0.696rem + 0.67vw, 24px);
        line-height: 56px;
        text-align: center;
        color: #000000;
    }
    #guide .culture__description .img0 {
        display: none;
    }
    #guide .culture__description .img1,
    #guide .culture__description .img2,
    #guide .culture__description .img3 {
        display: block;
    }
    #guide .culture__description .img1 {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-33%, 50%);
    }
    #guide .culture__description .img2 {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
    }
    #guide .culture__description .img3 {
        position: absolute;
        bottom: 0;
        left: 5.78vw;
    }
    #guide .culture .grid-card__text-wrapper {
    }
    #guide .culture .grid-card__text-wrapper::after {
    }
    #guide .culture .grid-card__title {
    }
    #guide .culture .grid-card__one-word {
    }
    #guide .culture .grid-card__detail {
    }

    /* panoramic-view */
    #guide .panoramic-view {
        margin-bottom: 245px;
    }
    #guide .panoramic-view__title {
        margin-bottom: 80px;
    }
    #guide .panoramic-view img {
        width: 82.08vw;
        height: auto;
        margin: auto;
    }
    #guide .panoramic-view p {
        padding-top: 112px;
        font-size: 24px;
        font-size: clamp(17px, 0.561rem + 0.78vw, 24px);
        line-height: 2.33em;
        text-align: center;
    }

    /* souvenirs */
    #guide .souvenirs {
        margin-bottom: 271px;
    }
    #guide .souvenirs__title {
        margin-bottom: 80px;
    }
    #guide .souvenirs .grid-card__img-wrapper {
        position: relative;
    }
    #guide .souvenirs .grid-card .img2 {
        width: 11.19vw;
        bottom: -31px;
        right: 21px;
    }
    #guide .souvenirs .grid-card__text-wrapper {
    }
    #guide .souvenirs .grid-card__text-wrapper::after {
    }
    #guide .souvenirs .grid-card__title {
    }
    #guide .souvenirs .grid-card__one-word {
    }
    #guide .souvenirs .grid-card__detail {
    }

    /* four-seasons */
    #guide .four-seasons {
    }

    #guide .four-seasons__title {
        margin-bottom: 80px;
    }

    #guide .four-seasons__img {
        width: 100%;
        height: auto;
        margin-bottom: 40px;
    }

    #guide .four-seasons__img.pc-only {
        display: block;
    }
    #guide .four-seasons__img.sp-only {
        display: none;
    }
    #guide .four-seasons a {
        overflow: hidden;
    }

    #guide .four-seasons a:hover img {
        transform: scale(1.1);
        filter: brightness(0.7);
    }

    #guide .four-seasons a img {
        transition: transform 0.3s, filter 0.3s;
    }
}