@charset "UTF-8";

/* 
common
------------------------ 
*/

.lower_top {
    position: relative;
    padding-top: 5%;
    /* padding-top: 12%; */
    /* padding-top: 20%; */
}

.lower_ttl {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16%;
    text-align: center;
}

.lower_ttl p {
    font-size: 2.8rem;
}

.lower_ttl h2 {
    font-size: 4.5rem;
    font-weight: 500;
}

.lower_h3 {
    font-size: 3.4rem;
    text-align: center;
    margin: 0 0 3%;
}

.inner {
    padding: 6% 5% 6%;
}

.w_bg {
    background: #fff;
}

/* 
price
------------------------ 
*/

#price .pk_bg {
    background: #e1f2fa;
}

#price .inner {
    padding: 8% 8%;
}
@media screen and (max-width: 450px) {
    #price .inner {
        padding: 8% 6%;
    }
}

#price .sec02 h3 {
    font-size: 3.5rem;
    text-align: center;
}

#price .sec02 .w_bg {
    padding: 8% 10%;
}

#price .sec02 .flex {
    border-bottom: 1px solid #000;
    padding: 0 4% 2%
}

#price .sec02 .fee_ttl {
    font-size: 3rem;
}

#price .sec02 .fee {
    font-size: 3rem;
}

#price .sec02 .btn_wrap {
    padding: 8% 0;
    margin-bottom: 4%;
}

#price .sec02 .btn_wrap ul li {
    margin-bottom: 4%;
}

#price .sec02 .btn_wrap ul li a {
    transition: .7s;
}

#price .sec02 .btn_wrap ul li a:hover {
    transition: .7s;
    opacity: .6;
}

#price .sec02 .btn_wrap .menu_list_btn {
    background: #fff;
    border-radius: 10px;
    padding: 4% 6%;
    border-bottom: none;
    border: 2px solid #6abfe6;
}

#price .sec02 .btn_wrap .link_ttl {
    font-size: 3rem;
}

#price .sec02 .btn_wrap .menu_list_btn figure {
    width: 6%;
}

#price .menu_wrap {
    margin-bottom: 10%;
}

#price .menuTtl {
    font-size: 3.2rem;
    text-align: center;
    margin: 6% 0 4%;
}

#price .menuTtl_s {
    font-size: 2.9rem;
}

#price .menu_subTtl {
    background: #82c8ea;
    color: #fff;
    padding: 3% 4%;
}

#price .menu_price {
    padding: 4% 4%;
    border: 2px solid #82c8ea;
    border-top: none;
    align-items: center;
}

#price .mens .menu_subTtl {
    background: #719ae5;
}

#price .mens .menu_price {
    border: 2px solid #719ae5;
    border-top: none;
}

#price section dl dd .add_txt {
    padding: 4% 4% 0;
    font-size: 2.4rem;
}

#price .btn_area .inner {
    padding: 8% 4% 6%;
}

#price .banner_line {
    padding: 4% 2%;
}

/* dr_menu */
#price .dr_menu {
    padding: 6% 0 0;
}

#price .dr_menu_ttl {
    background: #3aa9dd;
    color: #fff;
    text-align: center;
    font-size: 2.8rem;
    padding: 2% 0;
    margin: 0 4%;
    border-radius: 5px;
}

#price .dr_menu .menuTtl {
    display: flex;
    align-items: center;
    justify-content: center;
}

#price .dr_menu_txt {
    background: #82c8ea;
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
    padding: 1% 1%;
    margin-left: 3%;
}


/* 
faq
------------------------ 
*/

#faq .sec01 .inner {
    padding: 6% 5% 0;
}

#faq .faq_ttl {
    text-align: center;
    color: #fff;
    background: #6abfe6;
    font-size: 3.5rem;
    padding: 4% 0;
}

#faq .answer_l {
    display: none;
}

#faq .answer_s {
    display: none;
}

#faq .qa_wrap {
    background: #eff7fb;
    padding: 0 0 8%;
}

#faq .qa_l>li {
    border-bottom: 1px solid #6abfe6;
}

#faq .l_ttl {
    font-size: 3.2rem;
    color: #4ea8d4;
    font-weight: bold;
    padding: 4% 8%;
    position: relative;
    display: flex;
    align-items: center;
}

#faq .l_ttl::before {
    content: '';
    position: absolute;
    right: 10%;
    background: url("../images/lower/faq_plus_l.png") no-repeat;
    background-size: contain;
    width: 4%;
    height: 33%;
    display: inline-block;
}

#faq .l_ttl.active {
    background: #9fd5ee;
    color: #fff;
    border-top: 1px solid #9fd5ee;
    margin-top: -1px;
}

#faq .l_ttl.active::before {
    content: '';
    position: absolute;
    right: 10%;
    background: url("../images/lower/faq_minus_l.png") no-repeat;
    background-size: contain;
    width: 3.5%;
    height: 10%;
    display: inline-block;
}

#faq .qa_s>li {
    border-bottom: 1px solid #000;
    margin-bottom: 3%;
}

#faq .s_ttl {
    padding: 5% 0;
    position: relative;
}

#faq .s_ttl::before {
    content: '';
    position: absolute;
    right: 2.5%;
    background: url("../images/lower/faq_plus.png") no-repeat;
    background-size: contain;
    width: 4%;
    height: 33%;
    display: inline-block;
}

#faq .s_ttl.active::before {
    content: '';
    position: absolute;
    right: 2.5%;
    background: url("../images/lower/faq_minus.png") no-repeat;
    background-size: contain;
    width: 3.5%;
    height: 10%;
    display: inline-block;
}

#faq .s_ttl p {
    font-size: 2.8rem;
    max-width: 83%;
}

#faq .s_ttl figure {
    margin-right: 2%;
}

#faq .qa_s {
    padding: 0 8% 3%;
}

#faq .qa_s figure {
    width: 7%;
}

#faq .qa_s .w_bg {
    padding: 4% 4%;
    margin: 2% 4% 4%;
    position: relative;
}

#faq .qa_s .w_bg .qa_s_a {
    position: absolute;
    left: -4.2%;
    top: -2%;
    z-index: 5;
}

#faq .mail {
    border-bottom: 1px solid #6abfe6;
    display: inline-block;
}

#faq .link {
    border-bottom: 1px solid #6abfe6;
    display: inline-block;
}

#faq .link_txt {
    border-bottom: 1px solid #6abfe6;
    display: inline-block;
}

/* 
access
------------------------ 
*/

#access iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 5/3;
    margin: 0 auto 6%;
}


/* 
menu-trouble
------------------------ 
*/
#menu-trouble {
    margin-bottom: 10%;
}

#menu-trouble .lower_ttl {
    width: 100%;
}

#menu-trouble h2 {
    margin-top: 1%;
}

#menu-trouble .link_wrap {
    padding: 6% 4%;
}

#menu-trouble .link_area {
    background: #e1f2fa;
    padding: 4% 4%;
}

#menu-trouble .link_area1 {
    margin-bottom: 6%;
}

#menu-trouble .link_area h3 {
    font-size: 3.4rem;
    text-align: center;
    margin: 0 0 3%;
}

#menu-trouble .link_area .flex {
    flex-wrap: wrap;
}

#menu-trouble .link_area ul li {
    width: 48%;
    margin-bottom: 3%;
}

#menu-trouble .menu_wrap {
    padding: 0 0;
}

#menu-trouble .menu_wrap h3 {
    background: #6abee6;
    padding: 2.5% 0;
    color: #fff;
    font-size: 3.5rem;
    text-align: center;
    margin: 4% 0;
}

#menu-trouble .menu_wrap h4 {
    background: #e6f3f8;
    padding: 1% 0;
    text-align: center;
    font-size: 3rem;
    color: #4ea8d4;
    margin: 0 5% 4%;
}

#menu-trouble .menu_wrap ul {
    padding: 0 3%;
    flex-wrap: wrap;
}

#menu-trouble .menu_wrap ul li {
    width: 45%;
    margin: 0 2% 5%;
}

#menu-trouble .menu_wrap ul li a {
    transition: .4s;
}

#menu-trouble .menu_wrap ul li a:hover {
    opacity: .6;
    transition: .4s;
}

#menu-trouble .menu_wrap ul li img {
    width: 100%;
}


/* 
interval
------------------------ 
*/

#interval .interval_table {
    max-width: 100%;
    height: 80vh;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#interval .interval_table table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th, td {
    vertical-align: middle;
    padding: 20px 0;
    color: #000;
    font-size: 2rem;
    text-align: center;
    white-space: nowrap;
    min-width: 200px;
  }
  @media screen and (max-width: 690px) {
    th, td {
        min-width: 180px;
    }
  }
  @media screen and (max-width: 550px) {
    #interval .interval_table {
        height: 70vh;
    }

    th, td {
        min-width: 170px;
    }
  }
  @media screen and (max-width: 490px) {
    th, td {
        min-width: 150px;
        font-size: 2.4rem;
    }
  }
  @media screen and (max-width: 420px) {
    th, td {
        min-width: 120px;
    }
  }


  th {
    background: #9ae5d4;
    border: 2px solid #fff;
    padding: 15px 0;
  }

  td {
    background: #fff;
    border: 2px solid #e9e9e9;
    border-left: none;
  }

  .sticky_row {
    position: sticky;
    top: 0;
    left: 0;
    background: #afd9ed;
    border-left: none;
    border-right: none;
  }


  .sticky_row::before {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #fff;
    z-index: -1;
  }

  .sticky_col {
    position: sticky;
    top: -1px;
    left: 0;
  }

  .sticky_col::before {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    width: 100%;
    height: 100%;
    border-right: 2px solid #fff;
    z-index: -1;
  }

  .sticky_cross {
    position: sticky;
    top: -1px;
    left: 0;
    border-bottom: 1px solid #fff;
    z-index: 2;
  }

  .sticky_cross::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    background: linear-gradient(45deg, #afd9ed 0%, #afd9ed 50%, #9ae5d4 50%, #9ae5d4 100%);
    z-index: -1;
  }

  #interval .txt_area {
    padding: 4% 4%;
    border: 3px solid #afd9ed;
    margin: 8% 0 4%;
  }


/* 
menulist
------------------------ 
*/

#menulist {
    margin-bottom: 8%;
}

#menulist .lower_top .lower_ttl {
    width: 100%;
}

#menulist .lower_top .lower_ttl .add_txt {
    position: absolute;
    right: 1.5%;
    bottom: -50%;
    font-size: 2rem;
}

#menulist .menulist_ttl {
    background: #6abfe6;
    color: #fff;
    font-size: 3.3rem;
    text-align: center;
    padding: 4% 0;
    margin: 5% 0 4%;
}

#menulist .menulist_list li {
    padding: 0 3%;
    position: relative;
    transition: .4s;
    margin-bottom: 4%;
}

#menulist .menulist_list li:hover {
    opacity: .7;
    transition: .4s;
}

#menulist .menulist_list li::after {
    content: '';
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    background-image: url("../images/lower/menulist_arrow.png");
    width: 2.5%;
    aspect-ratio: 1 / 2;
    background-size: contain;
}

#menulist .menulist_list h4 {
    font-size: 3rem;
    padding-left: 2.5%;
    border-left: 10px double #6abfe6;
    margin-bottom: 2.5%;
    line-height: 1.1;
    color: #6abfe6;
}
@media screen and (max-width: 450px) {
    #menulist .menulist_list h4 {
        border-left: 6px double #6abfe6;
    }
} 

#menulist .menulist_list h4 span {
    font-size: 2.6rem;
    padding-left: 2%;
}

#menulist .menulist_list .menulist_box {
    border-bottom: 1px solid #6abfe6;
    padding-bottom: 4%;
}

#menulist .menulist_img {
    width: 25%;
}

#menulist .menulist_txt {
    width: 70%;
    padding-left: 3%;
}

#menulist .menulist_txt .menulist_desc {
    margin-bottom: 6%;
}

#menulist .menulist_txt .price_area_1line {
    padding-top: 11%;
}

#menulist .menulist_txt .pk_txt {
    color: #6abfe6;
}

@media screen and (max-width: 450px) {
    #menulist .menulist_txt .txt_s {
        font-size: 3.4vw;
    }

    #menulist .menulist_txt .txt_xs {
        font-size: 3.3vw;
    }
}

/* dr_menu */
/* #menulist .dr_menu {
    padding: 0 3%;
} */

#menulist .dr_menu_ttl {
    font-size: 3rem;
    background: #6abfe6;
    color: #fff;
    text-align: center;
    padding: 2% 0;
    margin: 8% 6% 6%;
}

#menulist .dr_menu .menulist_list h4 {
    display: flex;
    align-items: center;
}

#menulist .dr_menu_txt {
    background: #6abfe6;
    color: #fff;
    font-weight: 400;
    padding: 1% 1.5% 1% 0;
    margin-left: 4%;
    font-size: 2.3rem;
    font-feature-settings: "palt";
}


/* 
news
------------------------ 
*/

#news .news_list .date_txt {
    font-size: 2.5rem;
    opacity: .6;
}

#news .news_list .news_ttl {
    font-size: 3.3rem;
    color: #3aa9dd;
    margin: 1% 0 4%;
    border-bottom: 1px solid #3aa9dd;
    padding-bottom: 2%;
}

#news .news_list .bg_txt_half {
    background: linear-gradient(transparent 60%, #fffdc2 60%);
}

#news .news_list .news_subTtl {
    font-size: 2.8rem;
    color: #3aa9dd;
    border-left: 5px solid #3aa9dd;
    padding-left: 2%;
    margin-bottom: 4%;
}

#news .news_list li {
    padding-bottom: 15%;
    margin-bottom: 15%;
    background: url(../images/lower/news_dot_line.png)no-repeat bottom center;
    background-size: contain;
}


#news .news_list li:last-child {
    background: none;
    padding-bottom: 0;
}