/* リセット
========================================================================== */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー フォントサイズリセット */
html {text-align: justify;}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー ボディー全体の余白削除 */
body {margin: 0px;padding: 0px;}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー imgの設定（ボトム余白削除など） */
img, video, iframe {vertical-align: bottom;}

/* 全体共通パーツ
========================================================================== */

/* 色
#503216     （茶色 文字）
#F9BD14     （黄色 濃い色）
#FFDB74     （黄色 薄い色)
#F5F5F5     （薄いグレー）
*/

.mt0 {margin-top: 0px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt100 {margin-top: 100px;}
.mt150 {margin-top: 150px;}

.mr60 {margin-right: 60px;}

.pt50 {padding-top: 50px;}

a {color: #0E7AC9;}
a.link_brown {color: #503216;}

.caution_bold {font-weight: bold; background-color: #fcf949;}

.caution_red {color: #FA0000;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー コンテンツ（大見出し下などの中身のハコ）*/
/* 透明（基本） */
@media (min-height: 550px) and (min-width: 800px) {
    .contents_box {margin-right: 60px;}
}

@media (max-height: 549px) and (max-width: 799px), (max-height: 549px), (max-width: 799px) {
    .contents_box {margin-left: 20px; margin-right: 20px;}
}

/* グレー（点線） */
@media (min-height: 550px) and (min-width: 800px) {
    .contents_box_grey {
        margin-right: 60px;
        padding: 60px;
        background-color: #FAFAFA;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
    }
}

@media (max-height: 549px) and (max-width: 799px), (max-height: 549px), (max-width: 799px) {
    .contents_box_grey {
        margin-left: 20px; margin-right: 20px;
        padding: 60px 20px;
        background-color: #FAFAFA;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー 見出し（h1は下のヘッダー写真項目） */
.main_header_catchcopy {
    border-left: 20px solid #F9BD14;
    margin-top: 150px;
    padding: 2px 0 2px 15px;
    font-size: clamp(1rem, 0.595rem + 2.03vw, 3rem);
    font-weight: bold;
}

.main_header_catchcopy p {margin: 0;}

@media (min-height: 550px) and (min-width: 800px) {
    h2 {
        font-weight: bold;
        margin-top: 150px;
        padding-bottom: 15px;
        border-bottom: 10px solid #503216;
    }
}

@media (max-height: 549px) and (max-width: 799px), (max-height: 549px), (max-width: 799px) {
    h2 {
        font-weight: bold;
        margin-top: 150px;
        margin-left: 20px;
        margin-right: 20px;
        padding-bottom: 15px;
        border-bottom: 10px solid #503216;
    }
}

h3 {
    border-left: 20px solid #F9BD14;
    margin: 0;
    padding: 2px 0 2px 15px;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー ヘッダーの写真（横長写真は landscape・縦長写真は portrait） */
@media (min-height: 550px) and (min-width: 800px) {
    .photo_header_landscape, .photo_header_portrait {margin-top: 50px; position: relative;}

    .photo_header_landscape img {
        position: relative;
        object-fit: cover;
        height: calc(100vh - 110px);
        width: 100%;
        border-radius: 200px 0 0 30px;
    }

    .photo_header_portrait img {
        object-fit: cover;
        height: calc(100vh - 110px);
        width: 100%;
        border-radius: 200px 0 0 30px;
        object-position: 50% 65%
    }

    h1 {
        position: absolute;
        bottom: 90px;
        right: 0;
        margin: 0;
        padding: 5px 30px;
        background-color: #FFDB74;
        font-size: clamp(1rem, 0.595rem + 2.03vw, 3rem);
    }

    .index_h1 {display: none;}
}

@media (max-height: 549px) and (max-width: 799px), (max-height: 549px), (max-width: 799px) {
    .photo_header_landscape, .photo_header_portrait {margin-top: 25px; margin-left: 20px; margin-right: 20px; position: relative;}

    .photo_header_landscape img {
        object-fit: cover;
        height: 300px;
        width: 100%;
        border-radius: 50px 0 0 10px;
    }

    .photo_header_portrait img {
        object-fit: cover;
        height: 300px;
        width: 100%;
        border-radius: 50px 0 0 10px;
        object-position: 50% 65%
    }

    h1 {
        margin: 10px 20px 0;
        text-align: right;
        font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);
    }

    .index_h1 {display: none;}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー カレンダー（大枠のみ 詳細はカレンダー用CSS） */
@media (min-height: 800px) and (min-width: 880px) {
    .schedule_calendar {
        position: absolute;
        top: 90px;
        right: 0;
        margin: 0 30px 0 0;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #EEE;
        border-radius: 10px;
    }

    .schedule_calendar_title {
        background-color: #FFDB74;
        text-align: center;
        color: #503216;
        font-weight: bold;
        margin: 5px 0;
        padding: 5px 0;
        border-radius: 10px;
    }
}

@media (max-width: 879px) {
    .schedule_calendar {
        margin: 50px 60px 0 0;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #EEE;
        border-radius: 10px;
    }

    .schedule_calendar_title {
        background-color: #FFDB74;
        text-align: center;
        color: #503216;
        font-weight: bold;
        margin: 5px 0;
        padding: 5px 0;
        border-radius: 10px;
    }

    .cal_wrapper table {
        width: 100%;
    }
}

@media (max-height: 799px) {
    .schedule_calendar {
        margin: 50px 60px 0 0;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #EEE;
        border-radius: 10px;
    }

    .schedule_calendar_title {
        background-color: #FFDB74;
        text-align: center;
        color: #503216;
        font-weight: bold;
        margin: 5px 0;
        padding: 5px 0;
        border-radius: 10px;
    }

    .cal_wrapper table {
        width: 100%;
    }
}

@media (max-height: 799px) and (max-width: 799px), (max-width: 799px), (max-height: 549px) {
    .schedule_calendar {
        margin: 50px 20px 0;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #EEE;
        border-radius: 10px;
    }

    .schedule_calendar_title {
        background-color: #FFDB74;
        text-align: center;
        color: #503216;
        font-weight: bold;
        margin: 5px 0;
        padding: 5px 0;
        border-radius: 10px;
    }

    .cal_wrapper table {
        width: 100%;
    }
}

.schedule_calendar_schedulepage {
    margin: 0;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #EEE;
    border-radius: 10px;
}

.schedule_calendar_schedulepage table {
    width: 100%;
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー リストの米印 */
.caution_list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.caution_list li {
    margin-left: 1.5rem;
    text-indent: -1.3rem;
    font-weight: bold;
}
.caution_list li:before {
    content: "※";
    margin-right: 0.6rem;
}

.reception_caution {font-size: 1.2rem;}

.reception_caution li {
    margin-left: 30px;
    text-indent: -1.6rem;
    font-weight: bold;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー 茶色のケジュール表 */
@media (min-height: 550px) and (min-width: 1100px) {
    .schedule_grid_02 {display: none;}

    .schedule_grid {
        margin-top: 60px;
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: auto;
        grid-template-rows: auto;
        border: 1px solid #503216;
        max-width: 50vw;
        font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);
    }

    .schedule_grid_dt { grid-area: 1 / 1 / 2 / 2;border-bottom: 1px solid #503216; padding: 5px 5px;}
    .schedule_grid_dd_01 { grid-area: 2 / 1 / 3 / 2; border-bottom: 1px solid #503216; padding: 5px 5px;}
    .schedule_grid_dd_02 { grid-area: 3 / 1 / 4 / 2; padding: 5px 5px;}

    .schedule_grid_01 { grid-area: 1 / 1 / 2 / 2; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_03 { grid-area: 1 / 2 / 2 / 3; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_04 { grid-area: 1 / 3 / 2 / 4; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_05 { grid-area: 1 / 4 / 2 / 5; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_06 { grid-area: 1 / 5 / 2 / 6; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_07 { grid-area: 1 / 6 / 2 / 7; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_08 { grid-area: 1 / 7 / 2 / 8; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_09 { grid-area: 1 / 8 / 2 / 9; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_10 { grid-area: 1 / 9 / 2 / 10; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_11 { grid-area: 2 / 1 / 3 / 10; padding: 5px;}
}

@media (max-height: 549px) and (min-width: 1100px) {
    .schedule_grid_02 {display: none;}

    .schedule_grid {
        margin-top: 60px;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: auto;
        grid-template-rows: auto;
        border: 1px solid #503216;
        max-width: 50vw;
        font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);
    }

    .schedule_grid_dt { grid-area: 1 / 1 / 2 / 2;border-bottom: 1px solid #503216; padding: 5px 5px;}
    .schedule_grid_dd_01 { grid-area: 2 / 1 / 3 / 2; border-bottom: 1px solid #503216; padding: 5px 5px;}
    .schedule_grid_dd_02 { grid-area: 3 / 1 / 4 / 2; padding: 5px 5px;}

    .schedule_grid_01 { grid-area: 1 / 1 / 2 / 2; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_03 { grid-area: 1 / 2 / 2 / 3; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_04 { grid-area: 1 / 3 / 2 / 4; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_05 { grid-area: 1 / 4 / 2 / 5; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_06 { grid-area: 1 / 5 / 2 / 6; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_07 { grid-area: 1 / 6 / 2 / 7; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_08 { grid-area: 1 / 7 / 2 / 8; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_09 { grid-area: 1 / 8 / 2 / 9; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_10 { grid-area: 1 / 9 / 2 / 10; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_11 { grid-area: 2 / 1 / 3 / 10; padding: 5px;}
}


@media (max-height: 549px) and (max-width: 1099px), (max-width: 1099px) {
    .schedule_grid {
        margin-top: 60px;
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: auto;
        grid-template-rows: auto;
        border: 1px solid #503216;
        max-width: 100%;
        font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);
    }

    .schedule_grid_dt { grid-area: 1 / 1 / 2 / 2;border-bottom: 1px solid #503216; padding: 5px 2px;}
    .schedule_grid_dd_01 { grid-area: 2 / 1 / 3 / 2; border-bottom: 1px solid #503216; padding: 5px 2px;}
    .schedule_grid_dd_02 { grid-area: 3 / 1 / 4 / 2; padding: 5px 2px;}

    .schedule_grid_01 { grid-area: 1 / 1 / 2 / 10; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_02 { grid-area: 2 / 1 / 3 / 2; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_03 { grid-area: 2 / 2 / 3 / 3; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_04 { grid-area: 2 / 3 / 3 / 4; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_05 { grid-area: 2 / 4 / 3 / 5; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_06 { grid-area: 2 / 5 / 3 / 6; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_07 { grid-area: 2 / 6 / 3 / 7; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_08 { grid-area: 2 / 7 / 3 / 8; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_09 { grid-area: 2 / 8 / 3 / 9; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_10 { grid-area: 2 / 9 / 3 / 10; border-left: 1px solid #503216; border-bottom: 1px solid #503216; text-align: center;}
    .schedule_grid_11 { grid-area: 3 / 1 / 4 / 10; padding: 5px;}
}

.schedule_grid_dl {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.schedule_grid dl, .schedule_grid dt, .schedule_grid dd {margin: 0;}

.schedule_grid_11 ul li {
    font-size: 0.8rem;
}

.sgdt01 {background-color: #503216; color: #fff; font-weight: bold;}
.sgdt02 {font-size: 0px; background-color: #503216; color: #fff; font-weight: bold;}
.sgdt02:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "月";}
.sgdt03 {font-size: 0px; background-color: #503216; color: #fff; font-weight: bold;}
.sgdt03:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "火";}
.sgdt04 {font-size: 0px; background-color: #503216; color: #fff; font-weight: bold;}
.sgdt04:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "水";}
.sgdt05 {font-size: 0px; background-color: #503216; color: #fff; font-weight: bold;}
.sgdt05:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "木";}
.sgdt06 {font-size: 0px; background-color: #503216; color: #fff; font-weight: bold;}
.sgdt06:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "金";}
.sgdt07 {font-size: 0px; background-color: #503216; color: #fff; font-weight: bold;}
.sgdt07:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "土";}
.sgdt08 {font-size: 0px; background-color: #503216; color: #fff; font-weight: bold;}
.sgdt08:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "日";}
.sgdt09 {font-size: 0px; background-color: #503216; color: #fff; font-weight: bold;}
.sgdt09:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "祝";}
.sgdt_open {font-size: 0px;}
.sgdt_open:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "●";}
.sgdt_close {font-size: 0px;}
.sgdt_close:before {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem); content: "休";}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー Googleマップ */
.map_google {
    margin-top: 50px;
}

/* ボディー・分割
========================================================================== */
body {
    color: #503216;
    font-size: clamp(1rem, 0.939rem + 0.3vw, 1.3rem);
    font-family: 'Arial', 'Helvetica', sans-serif;
    background-image: url(../img/bg.png);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: fixed;
}

/* スマホ等メニュー表示の際のスクロールロック */
body.active {
    height: 100%;
    overflow: hidden;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー ページ上部黄色線 */
#yellow_line {
    position: fixed;
    border-top: 10px solid #F9BD14;
    width: 100%;
    z-index: 10000;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー メニュー（ヘッダー）とメイン部分のカラム（body_boxが親でnavとmainが子） */
@media (min-height: 550px) and (min-width: 800px) {
    #body_box {padding-top: 10px;}
    #body_main {margin-left: 320px;}
}

@media (max-height: 549px) and (max-width: 799px), (max-height: 549px), (max-width: 799px) {
    #body_box {padding-top: 10px;}
}

/* ヘッダー
========================================================================== */
@media (min-height: 550px) and (min-width: 800px) {
    header {
        position: fixed;
        padding: 50px 0px;
        width: 320px;
    }

    .header_logo {margin: 0 60px;}
    .header_logo p {margin: 0;}

    .nav_menubtn {display: none;}

    nav {margin-top: clamp(0.625rem, 0.119rem + 2.53vw, 3.125rem);}
    nav ul {
        font-size: clamp(0.5rem, 0.399rem + 0.51vw, 1rem);
        line-height: clamp(0.6rem, 0.519rem + 0.41vw, 1rem);
}

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    nav ul li {
        padding: 5px 0px;
    }

    nav ul li a, .nav_on {
        position: relative;
        display: inline-block;
        margin-left: 60px;
        text-decoration: none;
        color: #503216;
        transition: .2s ease-out;
    }

    nav ul li a:hover {
        padding-left: 10px;
    }

    nav ul li a:hover::before {
        content: '';
        position: absolute;
        top: 2px;
        left: -60px;
        display: inline-block;
        width: 40px;
        height: 10px;
        background-color: #F9BD14;
        animation-name: slideTextX100;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .nav_on:before {
        content: '';
        position: absolute;
        top: 25%;
        left: -60px;
        display: inline-block;
        width: 40px;
        height: 10px;
        background-color: #F9BD14;
        animation-name: slideTextX100;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    #nav_footer {
        position: fixed;
        left: 0;
        bottom: 0;
        margin: 50px 60px;
        width: 200px;
    }

    .nav_footer_reception p, .nav_footer_tel p { margin: 0;}

    .nav_footer_reception a {
        text-decoration: none;
        color: #503216;
        font-size: 1rem;
        font-weight: bold;
        display: block;
        background-color: #FFDB74;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
        border-radius: 5px;
        padding: 20px 0;
        text-align: center;
        transition: .2s ease-out;
    }

    .nav_footer_reception a:hover {
        background-image: none;
        border: 0.5px solid #503216;
        border-radius: 50px;
    }

    .nav_footer_tel a {
        text-decoration: none;
        color: #503216;
        font-size: 1.6rem;
        display: block;
        background-image: url(../svg/tel.svg);
        background-repeat: no-repeat;
        background-position: left;
        margin-top: 30px;
        padding: 5px 0px;
        width: 100%;
        text-align: right;
    }

    .nav_footer_tel a::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #503216;
        bottom: -10px;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: transform 0.3s;
    }

    .nav_footer_tel a:hover::after {transform: scale(1, 1);}
}

@media (max-height: 549px) and (max-width: 799px), (max-height: 549px), (max-width: 799px) {
    .header_logo {margin: 20px;width: 150px;}
    .header_logo p {margin: 0;}

/* スマホメニュー用 ---------- ここから */
    #nav_menu {
        display: none;
    }
    #nav_menu.panelactive {
        display: inline;
        position: fixed;
        z-index: 100;
        top: 0;
        width: 100%;
        height: 100vh;
    }

    .nav_menubtn_bg {
        position: fixed;
        z-index: 2;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #fff;
        transform: scale(0);
        right: -50px;
        top: -50px;
        transition: all 0.7s;
    }

    .nav_menubtn_bg.circleactive {transform: scale(50);}

    #nav_menu_list {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100vh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

    #nav_menu.panelactive #nav_menu_list {display: block;}

    #nav_menu ul {opacity: 0;}

    #nav_menu.panelactive ul {opacity: 1;}

    #nav_menu.panelactive ul li {
        animation-name: naviAnime;
        animation-duration: 1s;
        animation-delay: .2s;
        animation-fill-mode: forwards;
        opacity: 0;
    }
    @keyframes naviAnime{
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

/* メニューリスト レイアウト */
    nav {margin: 60px 0px;}
    nav ul {font-size: 1.2rem}

    nav ul {
        margin: 0;
        padding: 30px 0 50px;
        list-style: none;
    }

    nav ul li a, .nav_on {
        position: relative;
        display: inline-block;
        margin-top: 15px;
        margin-left: 70px;
        text-decoration: none;
        color: #503216;
        transition: .2s ease-out;
    }

    nav ul li a:hover {
        padding-left: 10px;
    }

    .nav_on:before {
        content: '';
        position: absolute;
        top: 25%;
        left: -70px;
        display: inline-block;
        width: 50px;
        height: 10px;
        transform: translateX(-100px);
        transform: translatey(-8px);
        background-color: #F9BD14;
        animation-name: slideTextX100;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

/* メニューのボタン */
    .nav_menubtn{
        position: absolute;
        top: 34px;
        right: 20px;
        z-index: 9999;
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: bold;
        border-bottom: 5px solid #F9BD14;
    }

    .nav_menubtn.active {
        font-size: 0;
    }
    .nav_menubtn.active:before {
        font-size: 0.8rem;
        font-weight: bold;
        content: "メニューを閉じる";
    }
/* スマホメニュー用 ---------- ここまで */

    #nav_footer_box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 9999;
        border-top: 5px solid #503216;
    }

    .nav_footer_reception {order: 2;}
    .nav_footer_tel {order: 1;}

    .nav_footer_reception p, .nav_footer_tel p {margin: 0;}

    .nav_footer_reception a {
        text-decoration: none;
        color: #503216;
        font-size: 0.9rem;
        font-weight: bold;
        display: block;
        background-color: #FFDB74;
        text-align: center;
        padding: 20px 0;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
    }

    .nav_footer_reception a:hover {
        color: #FFDB74;
        background-color: #503216;
        transition: 0.5s;
    }

    .nav_footer_tel a {
        text-decoration: none;
        color: #503216;
        background-color: #F5F5F5;
        font-size: 0px;
        font-weight: bold;
        display: block;
        text-align: center;
        padding: 20px 0;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
    }

    .nav_footer_tel a:before {
        font-size: 0.9rem;
        content: "メッシュへ電話する";
    }

    .nav_footer_tel a:hover {
        color: #FFDB74;
        background-color: #503216;
        transition: 0.5s;
    }
}

/* フッター（フッターの前の病院外観写真含む）
========================================================================== */
@media (min-height: 550px) and (min-width: 800px) {
    .photo_footer_img {margin-top: 150px;}
    .photo_footer_img img {
        object-fit: cover;
        min-height: 300px;
        max-height: 900px;
        border-radius: 200px 0 0 30px;
    }

    footer {padding-bottom: 16px;}

    .footer_title {
        font-weight: bold;
        margin-top: 150px;
        border-bottom: 10px solid #503216;
    }

    address {font-style: normal;}

    .footer_address_name {
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
        font-weight: bold;
        margin-top: 50px;
        margin-bottom: 0px;
    }

    .footer_address_place, .footer_address_text {margin-top: 10px; margin-bottom: 0px;}

    .footer_address_tel {margin-top: 30px;}

    .footer_address_tel a {
        text-decoration: none;
        color: #503216;
        position: relative;
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
        font-weight: bold;
        background-image: url(../svg/tel.svg);
        background-repeat: no-repeat;
        background-position: left;
        padding: 5px 0px 5px clamp(1rem, 0.635rem + 1.82vw, 2.8rem);
    }

    .footer_address_tel a::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #503216;
        bottom: -10px;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: transform 0.3s;
    }

    .footer_address_tel a:hover::after {transform: scale(1, 1);}

    .footer_parking {margin-top: 70px;}

    .footer_parking p a {
        text-decoration: none;
        color: #503216;
        font-weight: bold;
        background-color: #FFDB74;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
        border-radius: 5px;
        text-align: center;
        padding: 30px 50px;
        transition: .3s;
    }

    .footer_parking a:hover {
        color: #FFDB74;
        background-color: #503216;
        transition: .3s;
    }

    .footer_copy {text-align: right;}

    .footer_copy p {
        margin: 16px 16px 0 0;
        font-size: 0.7rem;
    }
}

@media (max-height: 549px) and (max-width: 799px), (max-height: 549px), (max-width: 799px) {
    .photo_footer_img {margin-top: 150px;}
    .photo_footer_img img {
        object-fit: cover;
        min-height: 300px;
        max-height: 900px;
    }

    footer {
        margin: 0 20px 70px;
        padding-bottom: 16px;
    }

    .footer_title {
        font-weight: bold;
        margin-top: 150px;
        border-bottom: 10px solid #503216;
        text-align: center;
    }

    address {font-style: normal; text-align: center;}

    .footer_address_name {
        font-size: clamp(2rem, 1.696rem + 1.52vw, 3.5rem);
        font-weight: bold;
        margin-top: 50px;
        margin-bottom: 0px;
    }

    .footer_address_place, .footer_address_text {margin-top: 10px; margin-bottom: 0px;}

    .footer_address_tel a {
        text-decoration: none;
        color: #503216;
        position: relative;
        font-size: clamp(2rem, 1.797rem + 1.01vw, 3rem);
        font-weight: bold;
        background-image: url(../svg/tel.svg);
        background-repeat: no-repeat;
        background-position: left;
        padding: 5px 0px 5px clamp(2.5rem, 2.399rem + 0.51vw, 3rem);
    }

    .footer_address_tel a::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #503216;
        bottom: -10px;
        transform: scale(0, 1);
        transform-origin: left top;
        transition: transform 0.3s;
    }

    .footer_address_tel a:hover::after {transform: scale(1, 1);}

    .footer_parking {margin-top: 70px; text-align: center;}

    .footer_parking p a {
        text-decoration: none;
        color: #503216;
        font-weight: bold;
        background-color: #FFDB74;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
        border-radius: 5px;
        text-align: center;
        padding: 30px 50px;
        transition: .3s;
    }

    .footer_parking a:hover {
        color: #FFDB74;
        background-color: #503216;
        transition: .3s;
    }

    .footer_copy {text-align: center;}

    .footer_copy p {
        margin: 16px 0 0 0;
        font-size: 0.7rem;
    }
}

/* index HOME トップページ
========================================================================== */
.main_index_koganame {text-align: right; padding-bottom: 20px;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー お知らせ文章 */
.news_list_date {margin-top: 50px; font-weight: bold; font-size: clamp(0.8rem, 0.739rem + 0.3vw, 1.1rem)}
.news_list_text {margin-top: 20px;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー LINEバナー */
@media (min-width: 1200px) {
    .line_box {
        border: 10px solid #00CB41;
        background-color: #FFF;
        padding: 40px;
        display: flex;
    }

    .line_box_main {
        width: calc(100% - 440px);
        position: relative;
        display: grid;
    }

    .line_box_img {
        width: 400px;
        padding-left: 40px;
    }

    .line_box_img img {
        border: 1px solid #00CB41;
        width: 100%;
    }

    .line_box_name img {width: 190px;}
    .line_box_announce p {
        margin: 0;
        padding: 30px 0 0;
        color: #18A336;
        font-weight: bold;
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
    }
    .line_box_text {
        font-weight: bold;
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
    }
    .line_box_icon img {
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
    }
    .line_box_link {width: 100%;}

    .line_box_link p {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .line_box_link a {
        background-color: #02A737;
        color: #FFF;
        font-weight: bold;
        display: block;
        padding: 30px 30px;
        border-radius: 10px;
    }

    .line_box_link a:hover {
        background-color: #503216;
    }
}

@media (min-width: 1000px) and (max-width: 1199px) {
    .line_box {
        border: 10px solid #00CB41;
        background-color: #FFF;
        padding: 40px;
        display: flex;
    }

    .line_box_main {
        width: calc(100% - 240px);
        position: relative;
        display: grid;
    }

    .line_box_img {
        width: 200px;
        padding-left: 40px;
    }

    .line_box_img img {
        border: 1px solid #00CB41;
        width: 100%;
    }

    .line_box_name img {width: 190px;}
    .line_box_announce p {
        margin: 0;
        padding: 30px 0 0;
        color: #18A336;
        font-weight: bold;
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
    }
    .line_box_text {
        font-weight: bold;
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
    }
    .line_box_icon img {
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
    }
    .line_box_link {width: 100%;}

    .line_box_link p {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .line_box_link a {
        background-color: #02A737;
        color: #FFF;
        font-weight: bold;
        display: block;
        padding: 30px 30px;
        border-radius: 10px;
    }

    .line_box_link a:hover {
        background-color: #503216;
    }
}

@media (max-width: 999px) {
    .line_box {
        border: 10px solid #00CB41;
        background-color: #FFF;
        padding: 20px;
    }

    .line_box_main {
        width: 100%;
        position: relative;
    }

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

    .line_box_img img {
        border: 1px solid #00CB41;
        width: 100%;
    }

    .line_box_name img {width: 100px;}
    .line_box_announce p {
        margin: 0;
        padding: 30px 0 0;
        color: #18A336;
        font-weight: bold;
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
    }
    .line_box_text {
        font-weight: bold;
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
    }
    .line_box_icon img {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
    }
    .line_box_link {width: 100%;}

    .line_box_link p {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .line_box_link a {
        background-color: #02A737;
        color: #FFF;
        font-weight: bold;
        display: block;
        padding: 20px 10px;
        border-radius: 10px;
        font-size: clamp(0.8rem, 0.456rem + 1.72vw, 2.5rem);
    }

    .line_box_link a:hover {
        background-color: #503216;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー ブログバナー */
@media (min-width: 1000px) {
    .line_blog a {
        display: block;
        text-decoration: none;
        background-color: #02A737;
        border-radius: 10px;
        color: #FFF;
    }

    .line_blog a:hover {
        display: block;
        background-color: #503216;
        border-radius: 10px;
        color: #FFF;
    }

    .line_blog_box {
        padding: 60PX;
        display: flex;
        align-items: center;
    }
    .line_blog_box_title {
        padding-right: 40px;
    }
    .line_blog_box_text_announce {
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
        font-weight: bold;
        margin: 0;
        padding: 0;
    }
    .line_blog_box_llink {
        margin: 10px 0 0;
        padding: 0;
        text-align: left;
    }
}

@media (max-width: 999px) {
    .line_blog a {
        display: block;
        text-decoration: none;
        background-color: #02A737;
        border-radius: 10px;
        color: #FFF;
    }

    .line_blog a:hover {
        display: block;
        background-color: #503216;
        border-radius: 10px;
        color: #FFF;
    }

    .line_blog_box {
        padding: 60PX;
    }
    .line_blog_box_title {
        padding-bottom: 40px;
    }
    .line_blog_box_text_announce {
        font-size: clamp(1rem, 0.696rem + 1.52vw, 2.5rem);
        font-weight: bold;
        margin: 0;
        padding: 0;
    }
    .line_blog_box_llink {
        margin: 20px 0 0;
        padding: 0;
        text-align: left;
    }
}

/* about 病院案内
========================================================================== */
.about_prof {
    border-left: 20px solid #F9BD14;
    margin: 0;
    padding: 2px 0 2px 15px;
}

.about_prof_name, .about_prof_bd {margin: 0; padding: 0;}
.about_prof_certification {margin: 20px 0 0; padding: 0;}

.about_prof_bd, .about_prof_certification {font-size: clamp(0.8rem, 0.759rem + 0.2vw, 1rem);}

@media (min-width: 900px) {
    .about_parking_box {display: flex;}

    .about_parking_text {width: calc(100% - 40% - 20px);}

    .about_parking_img {
        width: 40%;
        padding-left: 20px;
    }

    .about_parking_text_first {margin-top: 0;}
}

@media (max-width: 899px) {
    .about_parking_img {margin-top: 30px;}
}

/* schedule 診療スケジュール
========================================================================== */
@media (min-width: 1200px) {
    .schedule_box {
        display: flex;
        align-items: flex-start;
    }

    .schedule_calendar_schedulepage {
        width: calc(50% - 20px);
    }

    .schedule_box_news {
        width: 50%;
        margin-left: 20px;
        padding: 60px;
        background-color: #FAFAFA;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
    }
}

@media (max-width: 1199px) {
    .schedule_box_news {
        margin-top: 50px;
        padding: 60px 20px;
        background-color: #FAFAFA;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
    }
}

/* reception-info 診察受付について
========================================================================== */
.reception_example_list {margin-bottom: 0; padding-bottom: 0;}
.reception_example p {margin-top: 0; padding-top: 0;}

@media (min-height: 550px) and (min-width: 800px) {
    .reception_box_grey {
        padding: 60px;
        background-color: #FAFAFA;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
    }
}

@media (max-height: 549px) and (max-width: 799px), (max-height: 549px), (max-width: 799px) {
    .reception_box_grey {
        padding: 60px 20px;
        background-color: #FAFAFA;
        background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
        background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
        background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
        background-position: left bottom,left bottom,right top, right top;
    }
}

.reception_system_list {margin: 0; padding-left: 10px;}




/* reception-flow 診察受付の流れ
========================================================================== */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー タブ表示 */
/* タブ自体のcss */
.tab_menu {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.tab_menu_item {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    width: calc(50% - 50px);
    padding: 30px 20px;
    background-color: #F5F5F5;
    border-radius: 5px;
    cursor: pointer;
    font-size: clamp(0.7rem, 0.538rem + 0.81vw, 1.5rem);
    font-weight: bold;
    background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
    background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
    background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
    background-position: left bottom,left bottom,right top, right top;
    transition: .3s;
    position: relative;
}

.tab_menu_item:hover {
    color: #FFDB74;
    background-color: #503216;
}

.triangle {
    position: absolute;
    top: 120%;
    left: calc(50% - 20px);
    background: #F5F5F5;
    height: calc(tan(60deg) * 40px / 2);
    width: 40px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab_menu_item.is_active {
    background-color: #FFDB74;
    background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
    background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
    background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
    background-position: left bottom,left bottom,right top, right top;
}

.tab_menu_item.is_active:hover {
    color: #503216;
    background-color: #FFDB74;
}

.is_active div.triangle {
    position: absolute;
    top: 120%;
    left: calc(50% - 20px);
    background: #FFDB74;
    height: calc(tan(60deg) * 40px / 2);
    width: 40px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* タブ自体のcss */
  /* タブパネル */
.tab_panel {margin-top: 65px;}

.tab_panel_box001, .tab_panel_box002 {display: none;}

.tab_panel_box.is_show {display: block;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー インターネットでの流れ */
.reception_flow_reception_link {margin-top: 50px; text-align: center;}

.reception_flow_reception_link p {width: 100%;}

.reception_flow_reception_link p a {
    text-decoration: none;
    color: #503216;
    font-weight: bold;
    display: block;
    background-color: #FFDB74;
    background-image: linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to right, #503216, #503216 5px, transparent 5px, transparent 10px), linear-gradient(to bottom, #503216, #503216 5px, transparent 5px, transparent 10px);
    background-repeat: repeat-x, repeat-y,repeat-x, repeat-y;
    background-size: 10px 1px, 1px 10px,10px 1px, 1px 10px;
    background-position: left bottom,left bottom,right top, right top;
    border-radius: 5px;
    padding: 30px 50px;
    transition: .3s;
}

.reception_flow_reception_link a:hover {
    color: #FFDB74;
    background-color: #503216;
    transition: .3s;
}

.reception_flow_img01 {display: flex;}
.reception_flow_img01_pc {width: 60%;}
.reception_flow_img01_sp {
    width: calc(40% - 20px);
    margin-left: 20px;
}

.reception_flow_img01_pc img, .reception_flow_img01_sp img {width: calc(100% - 2px); border: 1px solid #000;}

.reception_flow_img01 p {font-size: 0.8rem; margin-top: 0px;}

.reception_flow_img02 img {width: calc(60% - 2px); border: 1px solid #000;}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーー 電話での流れ */
.guidance_text {margin: 0; text-align: center;}
.guidance_tel {font-size: clamp(1.9rem, 1.272rem + 3.14vw, 5rem); margin: 0; font-weight: bold; text-align: center;}
.guidance_tel a {color: #503216;}
.guidance_tel_text {font-size: clamp(0.8rem, 0.354rem + 2.23vw, 3rem); font-weight: bold; margin: 30px 0 0;}

/* trim トリミング
========================================================================== */
@media (min-width: 1000px) {
    .sodaspa_box {
        display: flex;
        align-items: flex-start;
    }

    .sodaspa_box_text {
        width: calc(100% - 30% - 20px);
    }

    .sodaspa_box_img {
        width: 30%;
        margin-left: 20px;
    }

    .sodaspa_box_img img {width: calc(100% - 2px); border: 1px solid #000;}
}

@media (max-width: 999px) {
    .sodaspa_box_img {
        margin-top: 50px;
    }
    .sodaspa_box_img img {width: calc(100% - 2px); border: 1px solid #000;}
}

.trim_day p {
    margin: 0;
    font-size: clamp(1rem, 0.595rem + 2.03vw, 3rem);
    font-weight: bold;
    text-align: center;
}

.trim_off_box {
    display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
}

.trim_off_box_title {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #503216;
    color: #FFF;
    border: 1px solid #503216;
    font-size: clamp(0.9rem, 0.88rem + 0.1vw, 1rem);
	flex-grow: 1;
}

.trim_off_box_text {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #503216;
    font-size: clamp(0.9rem, 0.88rem + 0.1vw, 1rem);
	flex-grow: 1;
}
.trim_off_box_title, .trim_off_box_text p {margin: 0; padding: 10px 20px;}

.trim_course {margin: 0; padding-left: 10px;}
.trim_course li {font-weight: bold;}
.trim_course li p {font-weight: normal;}


.trim_table {
    overflow: scroll;
}

.trim_table table {
    width: 100%;
    min-width: 500px;
    text-align: center;
    border-collapse:  collapse;
    border-top: 1px solid #503216;
    border-left: 1px solid #503216;
    font-size: clamp(0.9rem, 0.88rem + 0.1vw, 1rem)
}

.trim_table th, .trim_table td {
    border-right: 1px solid #503216;
    border-bottom: 1px solid #503216;
    padding: 10px;
}

.trim_table th, .trim_table td:first-child {background-color: #FFF6DE;}
.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

.leftAnime{
    opacity: 0;
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX-100 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}