@charset "UTF-8";

/*----------------------------------------
共通設定
------------------------------------------*/
.pc_dn {
    display: none;
}

.sp_dn {
    display: block;
}

.fz16 {
    font-size: clamp(14px, 16/1280*100vw, 16px);
}

.fz24 {
    font-size: clamp(22px, 24/1280*100vw, 24px);
}

.fz32 {
    font-size: clamp(30px, 32/1280*100vw, 32px);
}

.stroke {
    -webkit-text-stroke: 1px var(--primary);
}

/* 下線付きh2 */
.h2-border-a {
    width: fit-content !important;
    display: block;
}

.h2-border {
    position: relative;
    display: flex;
    padding-bottom: 0.9em;
    margin-bottom: 1.1em;
    width: fit-content !important;
}

.h2-border img {
    width: clamp(24px, 27/1280*100vw, 27px);
    margin-left: min(32 / 1280* 100vw, 32px);
}

.h2-border::before,
.h2-border::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 4px;
    width: clamp(47px, 50/1280*100vw, 50px);
}

.h2-border::before {
    left: 0;
    background-color: var(--secondary);
    /* 左側の色 */
}

.h2-border::after {
    left: clamp(47px, 50/1280*100vw, 50px);
    background-color: var(--quanternary);
    /* 右側の色 */
}

/* ボタン */
.button,
.button-small {
    background-color: var(--secondary);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    margin: 0 auto;
    transition: 0.3s;
    font-size: min(16 / 1280* 100vw, 16px);
}

.button:hover,
.button-small:hover {
    background-color: var(--primary);
}

.button img,
.button-small img {
    width: 7px;
    margin-left: 1em;
}

.button-small {
    width: 90%;
    height: min(33 / 1280* 100vw, 33px);
}

.button {
    width: 100%;
    height: min(43 / 1280* 100vw, 43px);
    padding: 0 1.1em;
}

/*----------------------------------------
ヘッダー
------------------------------------------*/
.header {
    /* position: fixed; */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: min(100 / 1280* 100vw, 100px);
    /* display: flex;
    justify-content: space-between; */
    z-index: 10000;
}

.header-top {
    height: min(130/ 1280* 100vw, 130px);
    display: flex;
    align-items: center;
}

.header-top .content_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: min(100/ 1280* 100vw, 100px);
}

.logo {
    width: min(140/ 1280* 100vw, 140px);
    margin-left: min(48 / 1280* 100vw, 48px);
}

.logo img {
    border: 1px solid var(--primary);
}

.header-top-right {
    display: flex;
}

.tel-hour .tel,
.tel-hour .hour {
    display: flex;
    align-items: center;
}

.tel-hour .tel p:first-child {
    margin-right: min(14/ 1280* 100vw, 14px);
}

.tel-hour .hour-title {
    border: 1px solid;
    width: min(50 / 1280* 100vw, 50px);
    height: min(24 / 1280* 100vw, 24px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: min(8 / 1280* 100vw, 8px);
}

.tel-hour .hour-content {
    margin-right: min(8 / 1280* 100vw, 8px);
}

.tel-hour .tel {
    align-items: baseline;
}

.booking {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary);
    width: min(200 / 1280* 100vw, 200px);
    border-radius: 10px;
    border: 1px solid var(--primary);
    margin-left: 1.8em;
    font-size: clamp(18px, 20/1280*100vw, 20px);
    transition: 0.3s;
}

.booking:hover {
    background-color: var(--primary);
}


.booking img {
    width: min(24 / 1280* 100vw, 24px);
    margin-left: 5px;
    margin-top: -12px;
}

.header__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: min(80 / 1280* 100vw, 80px);
    background-color: var(--primary);
    transition: all 0.3s ease;
    z-index: 10000;
}

.header__inner.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.drawer__nav,
.drawer__nav__inner,
.drawer__nav__menu,
.drawer__nav__item,
.drawer__nav__link {
    height: 100%;
    display: flex;
    align-items: center;
}

.drawer__nav__menu {
    display: flex;
    align-items: center;
}

.drawer__nav__item {
    margin: 0 min(24 / 1280* 100vw, 24px);
}

.drawer__nav__link {
    font-size: clamp(13px, 18/1280*100vw, 18px);
    color: var(--white);
    text-decoration: none;
}

.drawer__nav__link:hover {
    text-decoration: underline;
    text-decoration-color: var(--white);
    text-decoration-thickness: 5px;
    text-underline-offset: min(30 / 1280* 100vw, 30px);
}

/*========================================
TOPページ
========================================*/
/*----------------------------------------
#KV
------------------------------------------*/
#KV {
    margin: 0;
    padding: 0;
    margin-top: min(130 / 1280* 100vw, 130px);
    margin-bottom: 0;
    width: 100%;
    position: relative;
}

#KV img {
    border-radius: 12px;
    width: 100%;
    height: min(520 / 1280* 100vw, 520px);
    object-fit: cover;
    object-position: 50% 0%;
}

/*----------------------------------------
#section-1
------------------------------------------*/
#section-1 .content_wrap {
    display: flex;
    justify-content: center;
}

/* お知らせ */
.news-left-outer {
    width: 50%;
    position: relative;
    border-right: 1px solid var(--gray);
}

.news-left {
    width: 30%;
    margin: 0 5em 0 auto;
}

.news-left h3,
.news-left a {
    text-align: center;
}

.news-left h3 {
    margin-bottom: 0.3em;
}

.news-list {
    list-style: none outside;
    margin: 0;
    padding: 0;
    width: min(920 / 1280* 100vw, 920px);
}

.news-list .item {
    margin-bottom: clamp(16px, 18/1280*100vw, 18px);
}

.news-list .item:last-child {
    margin-bottom: 0;
}

.news-list .item a {
    display: flex;
    align-items: center;
}

.news-list .item .date {
    margin: 0 min(32 / 1280* 100vw, 32px);
    font-size: clamp(16px, 18/1280*100vw, 18px);
    height: clamp(16px, 18/1280*100vw, 18px);
    display: flex;
    align-items: center;
}

.news-list .item .category {
    margin: 0 auto;
    height: min(27 / 1280* 100vw, 27px);
}

.news-list .item .category span {
    color: #FFF;
    display: flex;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    width: min(100 / 1280* 100vw, 100px);
    height: 100%;
    align-items: center;
    font-weight: bold;
}

.news-list .item .title {
    margin-left: min(32 / 1280* 100vw, 32px);
    width: 100%;
    height: clamp(16px, 18/1280*100vw, 18px);
    display: flex;
    align-items: center;
}

.news-list .item a:hover .title {
    text-decoration-line: underline;
}

@media screen and (max-width: 767px) {
    .news-list .item a {
        flex-wrap: wrap;
    }

    .news-list .item .date {
        min-width: 100px;
    }

    .news-list .item .title {
        margin-top: 10px;
    }
}

/*----------------------------------------
#section-2
------------------------------------------*/
#section-2 {
    background-color: var(--tertiary);
}

#section-2 .content_wrap {
    display: flex;
}

#section-2 .s2-left {
    width: 45%;
    margin: 0 min(64 / 1280* 100vw, 64px);
}

#section-2 .h2-border {
    transition: 0.3s;
}

#section-2 .h2-border:hover {
    opacity: 0.8;
}

.s2-buttons {
    display: flex;
    margin-top: 2em;
}

.s2-buttons a {
    margin-left: clamp(14px, 16/1280*100vw, 16px);
}

.s2-buttons a:first-child {
    margin-left: 0;
}

#section-2 .s2-right {
    width: 45%;
}

#section-2 .s2-right img {
    width: 100%;
}

/*----------------------------------------
#section-3
------------------------------------------*/
#section-3 .h2-border {
    margin-left: min(64 / 1280* 100vw, 64px);
}

#section-3 .s3-content {
    display: flex;
    justify-content: space-between;
}

#section-3 .h2-border {
    margin-bottom: 2em;
}

/* left */
#section-3 .s3-left {
    margin: 0 min(64 / 1280* 100vw, 64px);
    width: 30%;
}

#section-3 li {
    border-bottom: 1px solid var(--gray);
    padding: 0.6em 0.5em;
}

#section-3 li a {
    display: flex;
    justify-content: space-between;
    transition: 0.3s;
    color: var(--secondary);
}

#section-3 li a:hover {
    opacity: 0.8;
}

#section-3 li img {
    width: clamp(7px, 9/1280*100vw, 9px);
}

/* right */
#section-3 .s3-right {
    width: 70%;
    margin: 0;
    padding: 0;
}

#section-3 .s3-right img {
    border-radius: 12px;
}

/* table */
.table_4 {
    width: 100%;
}

.table_4 td,
.table_4 th {
    border: solid 1px var(--white);
    height: 2.4em;
    text-align: center;
    vertical-align: middle;
}

.table_4 th {
    background-color: var(--primary);
    color: var(--white);
    font-weight: normal;
}

.table_4 td,
.table_4 .barlow {
    background-color: var(--tertiary);
    color: var(--black);
}

.table_4 td {
    color: #000;
}

@media screen and (max-width: 768px) {
    .table-scroll {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/*----------------------------------------
#section-4
------------------------------------------*/
.s4-buttons {
    width: min(330 / 1280* 100vw, 330px);
    display: flex;
    justify-content: space-between;
    margin: min(64 / 1280* 100vw, 64px) auto 0;
}

/*----------------------------------------
footer
------------------------------------------*/
footer {
    width: 100%;
    background-color: var(--primary);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    padding: 2.7em 5em;
}

.footer-top a,
.footer-top p {
    color: var(--white);
    line-height: 1.7;
    font-size: clamp(14px, 16/1280*100vw, 16px);
}

/* footer-left */
.footer-left {
    width: fit-content;
    padding-right: 3em;
}

.footer-left img {
    width: min(300 / 1280* 100vw, 300px);
    margin-bottom: 2em;
}

/* footer-right */
.footer-right {
    display: flex;
    align-items: center;
    padding-left: 5em;
    border-left: 1px solid var(--secondary);
}

.footer-right a {
    margin-left: 2em;
    transition: 0.3s;
}

.footer-right a:first-child {
    margin-left: 0;
}

.footer-right a:hover {
    opacity: 0.8;
}

/* footer-bottom */
.footer-bottom {
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    height: min(80 / 1280* 100vw, 80px);
}

.footer-bottom p {
    font-size: clamp(12px, 14/1280*100vw, 14px);
}

/*----------------------------------------
pagetop
------------------------------------------*/
.pagetop {
    position: fixed;
    right: min(32 / 1280* 100vw, 32px);
    bottom: min(32 / 1280* 100vw, 32px);
    transition: 0.3s;
}

.pagetop:hover {
    filter: brightness(1.2);
    /* transition: filter 0.3s ease; */

}