@charset "utf-8";
@media screen and (min-width: 820px) {
  .top_wrap{
    flex-direction: row;
    margin-bottom: 0;
  }
  .carousel{
    height: 60vh;
  }
  .exterior{
    width: 50%;
    margin-bottom: 0;
  }
  .text_box{
    width: 45%;
  }
  .top_wrap .text_box .name{
    font-size: 230%;
    margin-bottom: 50px;
  }
  .top_wrap .text_box .text{
    font-size: 100%;
    line-height: 2;
  }
  .fee_box{
    width: fit-content;
    max-width: 95%;
    margin: 100px auto 80px;
  }
  .fee_wrap{
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 0;
  }
  .fee_wrap::before{
    content: '';
    width: 40%;
    height: 180px;
    background: var(--accent_pink);
    position: absolute;
    z-index: -1;
    top: -100%;
    left: -100%;
    transition: 0.5s;
  }
  .fee_wrap.active::before{
    top: -10px;
    left: 0;
  }
  .fee_wrap .fee_box > .title{
    font-size: 200%;
    padding: 13px 0 10px;
    margin-bottom: 70px;
    letter-spacing: 2px;
  }
  .fee_wrap .fee_box > .title::before{
    display: none;
  }
  .detail_box{
    display: flex;
    justify-content: center;
  }
  .detail_box > div{
    border: 2px solid var(--accent_pink);
  }
  .detail_box > div ul{
    padding: 10px 15px;
    font-size: 116%;
  }
  .detail_box > div ul li{
    margin-bottom: 5px;
  }
  .fee{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
  }
  .fee .table-box{
    width: 60%;
  }
  .fee_wrap .fee .table_title{
    background: var(--accent_pink);
    color: #fff;
    padding: 5px 35px;
    margin-bottom: 0;
  }
  .fee_wrap .fee table{
    border: 1px solid var(--accent_pink);
  }
  .fee_wrap .fee table tr:not(:last-child) th{
    border-bottom: 1px solid #fff;
  }
  .fee_wrap .fee table tr:not(:last-child) td{
    border-bottom: 1px solid var(--accent_pink);
  }
  .fee_box .fee .price{
    font-size: 160%;
    margin-bottom: 10px;
    color: #000;
    margin: 0;
  }
  .detail_box .conditions{
    margin-left: 80px;
  }
  .detail_box .ex .title{
    font-size: 116%;
    background: var(--accent_pink);
    border-bottom: unset;
    color: #fff;
    padding: 5px 20px 2px;
    line-height: 2;
  }
  .detail_box .conditions > p,
  .detail_box .conditions > ul{
    letter-spacing: 1px;
    line-height: 2;
  }
  .detail_box .conditions .title{
    font-size: 116%;
    background: var(--accent_pink);
    border-bottom: unset;
    color: #fff;
    padding: 5px 20px 2px;
  }
  .detail_box .conditions .text{
    border: 1px solid var(--page_color);
    padding: 10px 15px;
  }
  #faq{
    margin-bottom: 60px;
  }
  .about_wrap .title{
    width: fit-content;
    margin: 0 auto 80px;
    padding: 13px 20px 10px;
    font-size: 120%;
  }
  .about_wrap table{
    width: fit-content;
    margin: 0 auto;
    position: relative;
    border-bottom: unset;
  }
  .about_wrap table::before{
    content: '';
    width: 50vw;
    height: 120%;
    background: var(--page_color_thin);
    position: absolute;
    top: -10%;
    left: -150vw;
    z-index: -1;
    transition: 0.6s;
  }
  .about_wrap table.active::before{
    left: calc(-50vw + 145px);
  }
  .about_wrap table th{
    font-size: 108%;
    width: 145px;
    border-bottom: 2px solid #fff;
    color: #000;
    background: unset !important;
  }
  .about_wrap table td{
    font-size: 100%;
    border-bottom: 2px solid var(--page_color_thin);
    background: #fff !important;
    padding: 10px 20px;
  }
}