/* CSS Document */

* {
    margin:0;
    padding:0;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif;
    list-style-type: none;
    font-size:100%;
}

html,body{
    height: 100%;

}

body {
background: #ADA996;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fff, #fff, #f5f5f5, #fff);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fff, #fff, #f5f5f5, #fff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: url(../img/wood01.jpg) repeat center center fixed;
}


body{

}

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.noto-sans-jp-bold {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/*////要見直し★★★★★★★★★★★★★★★★★★★★★★//*/
/*後からやり直し*/

.wrapper{
    margin-top: 50px;
}

.container{
/*    background: rgba(255,255,255,0.9);*/
}

h1,h2,h3 {
    text-align: center;
    padding: 15px;
}

h1{
/*    background: url(../img/wood_h1.jpg) no-repeat center bottom;*/
}

.emptyNone:empty{
    display:none;
}

.js-alertSave{
    font-size: 14px;
    text-align: left;
    margin: 15px 0 0;
    color: #f00;
    max-width: 300px;
    display:none;
}


/* validator */
.baloon{
    position:absolute;
}
.baloon div {
    background: #F60;
    padding: 3px 5px;
    color: #FFF;
    border-radius: 18px;
    font-size: 12px;
}
.baloon a {
    color: #F60;
    text-decoration: none;
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 5px;
    background: #FFF;
    border-radius: 100%;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
}

.required:after {
    content: "※必須";
    font-size: 10px;
    font-weight: normal;
    position: absolute;
    margin: 0 0 0 5px;
    color: #f00;
}

.required.select:after{
    content:"※必須";
}

.confirm .required:after{
    content:"";
}

.error_message {
    font-size: 12px;
    margin: 0;
}

.form-control {
    border-color: #ced4da !important;
}

.pWrapped p:last-of-type {
    margin: 0;
}

.selectIncludeP{
    display:inline;
    width:180px;
}

.lotDataTable td{
    text-align:center;
    vertical-align:middle;
}

.lotDataTable input{
    margin-bottom:0px;
}

.lotDataTable .conpact{
    max-width: 80px;
}

.lotDataTable label{
    cursor:pointer;
    width:100%;
    margin:0;
}

.lotDataTable .wi-80px{
    width:80px;
}

.lotDataTable .wi-120px{
    width:120px;
}

.sortheader{
    margin:0 0 0 5px;
}


.estimateTableWrapped{
    padding:0.75rem;
}

.estimateTableWrapped.scroll {
    padding:0;
    max-height:300px;
    overflow-y:scroll;
}

.estimateTableWrapped tr{
    background: none !important;
}

.estimateTableWrapped td{
    font-size: 14px;
    border:none !important;
}

.estimateTableWrapped .blank{
    height:.75rem;
}

.monthDayWrapped{
    font-size:12px;
}

.monthDayWrapped *{
    margin-bottom:0px;
}

.monthDayWrapped .date{
    font-size:18px;
    margin:0 0 0.50rem;
}

.monthDayWrapped a{
    font-size:16px;
    display:block;
    margin-bottom:0.25rem;
}

.valid_user_name, .invalid_user_name{
    margin-bottom:0.50rem;
}

.f00Text{
    color:#f00;
}

._00fText{
    color:#00f;
}

@media screen and (max-width: 992px) {
    .required:after{
        position: relative;
        display: block;
    }
}


@media screen and (max-width: 600px) {

    body{
        font-size: 14px;
    }

    .calender,.day_calender{
        font-size: 4vw;
        background: rgba(255,255,255,0.9);
    }

    .calender_controler_now{
        padding: 10px !important;
    }

    .prev_btn,.next_btn{
        font-size: 12px;
    }

    h1, h2{
        font-size: 7vw !important;
        padding: 1vh !important;
    }

    .lead{
        font-size: 1.25vh;
    }

}

.form-control{
    margin-bottom: 10px;
}

.readonly_form{
    border:none;
    background: none;
}

.past_day{
    background: #CCC;
}

.close_day{
    background: #BBB;
    position: relative;
}

.close_day:after{
    color: #999;
    content: "休";
    position: absolute;
    font-size: 14px;
    top: calc(50% - 7px);
    right: calc(50% - 7px);
}

.calender {
    word-wrap: break-word;
    overflow-wrap : break-word;
    word-break : break-all;
}

.calender td{
    width: 13%;
}

.calender_controler_now{
    padding: 30px;
    font-size: 140%;
}

.calender_div{
    max-width: 960px;
    margin: 0 auto;
}



.day_table_th{
    width:20%;
}

.form_div{
    /*max-width: 960px;*/
    margin-bottom: 60px;
}

.white_bg09{
    background: rgba(255,255,255,0.9)
}

.top_img{
/*    background: url(../img/top_image_bg.jpg);*/
    background: #FFFFFF30;
}

.this_day{
    font-weight: bold;
    color:#f69;
    position: relative;
}
/*
.this_day:before{
    content: "本日";
    color:#f69;
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 15px;
}
*/
.memo_td{
    /*width: 300px;*/
}

.user_list{
    display: none ;
}

.reserve_count{
    font-size: 12px;
    color:#999;
}

.reserve_over{
    color:#f00;
}

.mobile_reservation_form{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto; 
}

.reserve_full{
    background: repeating-linear-gradient(45deg, #ddd, #ddd 2px, #ccc 0, #ccc 4px);
}

.valid_user_name{
    color:#690;
}

.invalid_user_name{
    color:#999;
}

.invalid_user_name .name{
    text-decoration: line-through;
}

.disnone{
    display: none;
}

.price_thumbnail_img {
    width:30%;
    background: #fff;
    border: 1px solid #ccc;
    padding:5px;
}

.terms {
    display: none;
}

.select_option li , .select_price_down li{
    border: 1px solid none;
    background: #eee;
}

.selected_item{
    border: 1px solid #0062cc;
    background: #0069d9 !important;
    color:#fff;
}


.comment_balloon{
    position: fixed;
    top:100px;
    right: 80px;
    border: 2px solid #ccc;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    font-size:90%;
    z-index: 2;
    }


.comment_balloon:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -10px;
    border: 10px solid transparent;
    border-left: 10px solid #ccc; 
    }

.fixed_staff_div{
    position:fixed;
    top:90px;
    right: 10px;
    z-index: 2000;
    display:none;
}

.comment_balloon_staff{
    
}

.comment_balloon_staff:after{
    content:"担当者より";
    font-size:10px;
    padding: 3px 4px;
    text-align: center;
    background: #fff;
    position: absolute;
    top:60px;
    right: 10px;
}


.comment_balloon_staff img {
    border-radius: 100%;
    background: #fff;
    padding: 3px;
    border:1px solid #ccc;
}

.price_open_btn{
    position: fixed;
    right: 10px;
    bottom:16px;
    z-index: 12000;
}

.toggleStageString{
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    cursor:pointer;
}

.toggleStageString:hover{
    color: #0056b3;
    text-decoration: underline;
}

.price_ordered_section{
}

.total_price_str{
    position: absolute;
    left:10px;
    top:10px;
    display: block;
    font-size: 0.8rem;
}

.body-reserve__item--10016 #price_str{
    display: inline-block;
}

.body-reserve__item--10016 #price_str:before{
    content: "1リッターあたり ";
    font-size: 14px;
    color: #FFF;
    text-shadow: none;
    margin-right: 8px;
}

#price_str{
    color: #EE4035;
    text-shadow: 0 -1px 1px #999, 1px 1px 1px #333;
    text-shadow: 1px 1px 0px #fff,
     -1px 1px 0px #fff,
     -1px -1px 0px #fff,
     1px -1px 0px #fff;
     margin-right:10px;
}

/*見積ページのフッター用*/
.margin-bottom240{
    margin-bottom: 240px;
}

.margin-bottom600{
    margin-bottom: 600px;
}

.padding-bottom600{
    padding-bottom: 600px;
}

.form_step_bar{
    text-align: center;
    padding: 10px;
    position: relative;
    max-width: 600px;
    margin: 0 auto; 
}

.form_step_bar li{
    width: 25%;
    text-align: center;
    font-size: 12px;
    float: left;
}

.form_step_border{
    background: #eee;
    height: 1px;
    width: 100%;
    position: absolute;
    top:24px;
    z-index: -1;
}

.form_step_bar li b{
    display: block;
    width: 24px;
    height: 24px;
    color:#fff;
    font-weight: normal;
    margin:0 auto;
    text-align: center;
    padding: 3px;
    font-size: 12px;
    border-radius: 15px;
    border: 1px solid #f8f9fa;
    background: #f8f9fa;
    color:#999;
}

.form_step_bar_active {
    background: #0069d9 !important;
    border: 1px solid #0062cc !important;
    color:#fff !important;
}

#btn_to_customer_info_sec{
    display: none;
}

.send_user_info_sec{
    display: none;
}

#select_car_type li,#select_course li{
        border: 1px solid #0366ee;
    }

#select_price_down li,#select_option li{
        border: 1px solid #d6d4d4;
    }

#price_fixed_bar{
    background: #EE4035;
    color:#fff;
}

.price_thumbnail_img {
        width:80px;
        height:80px;
        display: block;
        margin:0 auto !important;
        margin-bottom: 10px !important;
        background: #fff;
        border: 1px solid #ccc;
        padding:15px 0;
    }

.price_thumbnail_img_custom,
.price_thumbnail_img_option,
.price_thumbnail_img_discount {
    padding:10px;
}


/*----- bootstrap1にないから作った -----*/
.display-5 {
  font-size: 2.5rem;
}

.receipt_block{
    border-bottom:1px solid #eee;
    display: block;
    padding-bottom: 3px; 
}

/*----- animation -----*/

.purun {animation: purun 0.8s ease forwards ;}
@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
  30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.poyon {animation: poyon 1.1s linear 0s 1;}
@keyframes poyon {
  0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.poyooon {animation: poyooon 0.9s linear 0s 1;}
@keyframes poyooon {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  60%  { transform: scale(0.9, 1.2) translate(0%, -100%);}
  75%  { transform: scale(0.9, 1.2) translate(0%, -20%);}
  85%  { transform: scale(1.2, 0.8) translate(0%, 15%);}
  100% { transform: scale(1.0, 1.0) translate(0%, 0%);}
}

.iconWrapped {
    position: absolute;
    right: 0;
    top: 0;
}

.circleStringIcon{
    width: 28px;
    height: 28px;
    line-height: 28px;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 14px;
    opacity: 1;
    font-weight: normal;
    cursor: pointer;
    float: left;
    margin: 0 0.25rem 0 0;
}

.iconWrapped .circleStringIcon:last-of-type {
    margin: 0;
}

.circleStringIcon.open{
    background-color: #44f;
}

.circleStringIcon.open:after{
    content: "可";
    font-size:12px;
}

.circleStringIcon.close{
    background-color: #f44;
}

.circleStringIcon.close:after{
    content: "不可";
    font-size:10px;
}

.circleStringIcon.close:hover{
    background-color:#f44;
    color:#fff !important;
}

.circleStringIcon.reserve{
    background: #aaa;
}

.circleStringIcon.reserve:after{
    content:"予約";
    font-size:10px;
}

.circleStringIcon:hover{
    opacity:.8;
}

.reserve_deny{
    background: #d3d3d3;
    position: relative;
}


.open_q_a{
    cursor:pointer;
    display:inline-block;
}

.open_q_a:hover{
    text-decoration:underline;
}

.addQMark:before {
    content: "?";
    background: #333;
    color: #fff;
    width: 21px;
    height: 21px;
    font-size: 16px;
    line-height: 22px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin: 0 5px 0 0;
}

#piechart:empty:after {
    content: "データの読み込み中です...";
    position: absolute;
    width: 360px;
    top: calc(50% - 44px);
    right: 0;
    text-align: center;
}

#piechart div[dir=ltr]{
    float:right;
}

.google-visualization-tooltip {
    width:200px;
    left:0 !important;
    top:-10px !important;
}
.google-visualization-tooltip ul {
    padding:15px;
}
.google-visualization-tooltip li {
    display:inline;
    padding:0 5px 0 0;
}
.google-visualization-tooltip li:last-of-type{
    padding:0;
}

#js-closedHour:empty {
    overflow: hidden;
}

#js-closedHour:empty:after,
#js-regularClosedSelect:empty:after,
#js-closedSelect:empty:after {
    content: "データを読み込み中です...";
    font-size: 14px;
    display: block;
    text-align: left;
}

#price_sec .btn-primary {
    cursor: pointer;
}

@media screen and (max-width: 992px) {
    
    #piechart div[dir=ltr]{
        float:none;
        width:100% !important;
        text-align:center;
    }

    .analyzeCaption h3{
        text-align:center !important;
    }

}


@media screen and (max-width: 720px) {
    .sp_non_display{
        display: none;
    }
}


/**
.body-reserve__item--10015 #select_price_down,
.body-reserve__item--10015 #select_option,
.body-reserve__item--10015 #price_fixed_bar {
    display:none !important;
}

.body-reserve__item--10015 #select_course .open_q_a {
    display:none;
}

.body-reserve__item--10015.body-reserve__item--user .user-data-form__row-created-date {
    display:none !important;
}
**/

.body-setting__item .setting__row-item--discount,
.body-setting__item .setting__row-item--option{
    display:none;
}


.body-reserve__item--10015 .price_thumbnail_img {
    object-fit:scale-down;
    padding:5px;
}

.body-reserve__item--10015 .course_thumbnail_img {
    object-fit: fill;
}


.body-reserve__item--10016 .course_thumbnail_img{
    padding: 0;
}

.body-reserve__item--personal .reserve__h1-item {
    display:none;
}

/**
 * 2025-11-20 改修関連
 */
.day_calender_container{
    max-width: 500px;
}

.table{
    background: #FFF;
}

.table.day_calender{
    max-width: 100%;
    margin: 0 auto;
}

.table tr:nth-of-type(1) th{
    border-top: none;
}

.table.day_calender th, .table.day_calender td{
    border-right: 1px solid #dee2e6;
}

.table.day_calender tr th.minute_th:nth-last-of-type(1){
    border-right: none;
}

.table.day_calender tr td:nth-last-of-type(1){
    border-right: none;
}

.day_table_th.minute_th{
    position: sticky;
    top: 50px;
    background: #FFF;
    z-index: 1;
}

.day_table_th.small_padding{
    padding: 0.375rem .75rem;
}

.table .reserve_td{
/*    padding: 0;*/
}

.table .reserve_td.minute_0,
.table .reserve_td.minute_30{
    width: 40%;
    position: relative;

}

.header-wrap{
    background-color: #FFF9F5;
    min-height: 50px;
    transition: background .2s;
    box-shadow: 0 1px 10px -5px rgb(0 0 0 / 13%);
    padding: 5px 15px;
}

.header-wrap-no-login{
    background: #FFF;
}

.header-a,
.header-a:hover{
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

.header-a-logined{
    position: relative;
}

.header-a-logined:after{
    content: "管理画面";
    display: inline-block;
    padding: .125rem .5rem;
    background: #ff9b58;
    color: #4c0000;
    font-weight: 400;
    font-size: 11px;
    border-radius: 10px;
    margin-left: 5px;
    position: relative;
    top: -1px;
}

.header-shop-name{
    font-size: 14px;
}

/** ドロワーメニュー */
.drawer-menu__trigger {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

body.study-text .drawer-menu__trigger{
    display: none;
}


.drawer-menu__trigger--inner {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.3s;
}
.drawer-menu__trigger--inner span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: #333;
  border-radius: 2px;
  transition: 0.3s;
}
.drawer-menu__trigger--inner span:nth-child(1) {
  top: 3px;
}
.drawer-menu__trigger--inner span:nth-child(2) {
  top: 12px;
}
.drawer-menu__trigger--inner span:nth-child(3) {
  top: 21px;
}

/* トグル時（openクラス） */
.drawer-menu--show .drawer-menu__trigger .drawer-menu__trigger--inner span:nth-child(1) {
  top: 12px;
  transform: rotate(45deg);
}
.drawer-menu--show .drawer-menu__trigger .drawer-menu__trigger--inner span:nth-child(2) {
  opacity: 0;
}
.drawer-menu--show .drawer-menu__trigger .drawer-menu__trigger--inner span:nth-child(3) {
  top: 12px;
  transform: rotate(-45deg);
}

.drawer-nav__wrapper{
    background: #FFF9F5;
    position: fixed;
    left: -360px;
    top: 0;
    width: 300px;
    height: 100vh;
    transition: left .3s ease-in-out;
    z-index: 1021;
    box-shadow: -5px 1px 20px -3px rgb(0 0 0 / 75%);
}

.drawer-menu--show .drawer-nav__wrapper{
    left: 0;
}

.contents__overlay{
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.8);
    cursor: pointer;
    position: fixed;
    z-index: 1020;
    top: 0;
    left: 0;
    display: none;
}

.drawer-menu--show .contents__overlay{
    /*display: block;*/
}


.drawer-menu__container{
    padding: 48px 0 0;
}

.drawer-menu__item,.drawer-sub-menu__item{
    background: #FFF;
    border-bottom: 1px solid #E8E8E8;
    position: relative;
    list-style: none;
}

.drawer-menu__item > a{
    display: block;
    padding: 15px 30px 15px 60px;
    color: #333;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.03em;
    font-size: .875rem;
    user-select: none;
    background-size: 25px 25px;
}

.drawer-menu__item:hover,
.drawer-menu__item:has(.current){
    background: #FFD6BB;
}

[data-current = "home"] .drawer-menu__link[data-name = "home"],
[data-current = "calender"] .drawer-menu__link[data-name = "calender"],
[data-current = "open"] .drawer-menu__link[data-name = "open"],
[data-current = "setting"] .drawer-menu__link[data-name = "setting"],
[data-current = "logout"] .drawer-menu__link[data-name = "logout"]{
    background-color: #FFD6BB;
    pointer-events: none;
}

.drawer-menu__item:hover > a,
.drawer-menu__item > a.current{
    color: #333;
}



.drawer-menu__link[data-name="home"]{
    background-image: url(../img/icon_home.png);
    background-position: left 20px center;
    background-repeat: no-repeat;
}


.drawer-menu__link[data-name="calender"]{
    background-image: url(../img/icon_calender.png);
    background-position: left 20px center;
    background-repeat: no-repeat;
}

.drawer-menu__link[data-name="open"]{
    background-image: url(../img/icon_open.png);
    background-position: left 20px center;
    background-repeat: no-repeat;
}

.drawer-menu__link[data-name="setting"]{
    background-image: url(../img/icon_setting.png);
    background-position: left 20px center;
    background-repeat: no-repeat;
}

.drawer-menu__link[data-name="logout"]{
    background-image: url(../img/icon_logout.png);
    background-position: left 20px center;
    background-repeat: no-repeat;
}



.drawer-sub-menu__item > a{
    display: block;
    padding: 10px 20px 10px 40px;
    color: #FFCC00;
    text-decoration: none;
    line-height: 1.25;
    font-size: 14px;
    user-select: none;
    position: relative;

}

.drawer-sub-menu__item.current > a{
    background-color: #ebf3e7;
    font-weight: bold;
    pointer-events: none;
}

.drawer-sub-menu__container{
    display: none;
    padding: 0;
}

.drawer-sub-menu-open-trigger{
    background: url(../img/global_menu_hover_arrow.png) no-repeat center center;
    position: absolute;
    width: 50px;
    height: 50px;
    right: 0px;
    top: 0px;
    display: block;
    cursor: pointer;
    transition: transform .3s;
}

.drawer-menu__item .outer-link{
    position: relative;
}
.drawer-menu__item .outer-link:after{
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    background: url(../img/icon_outer_link.png) no-repeat center center;
    background-size: contain;
    font-size: 12px;
    color: #999;
    position: absolute;
    top: calc(50% - 8px);
    left: 125px;
}

@media screen and (max-width: 480px) {
    .header-wrap {
        padding: 5px 10px;
    }
    .header-shop-name{
        display: none;
    }
}