@charset "utf-8";

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}

q:before,
q:after {
    content: ''
}

abbr,
acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: text-top
}

sub {
    vertical-align: text-bottom
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

label {
    margin-right: 15px;
    cursor: pointer;
}

legend {
    color: #000;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* テキストボックス */
input[type='text'] {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 日付ボックス */
input[type='date'] {
    width: 200px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 数値ボックス */
input[type='number'] {
    width: 40px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* E-mail */
input[type='email'] {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* URLボックス */
input[type='url'] {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* パスワード */
input[type='password'] {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* テキストエリア */
textarea {
    width: 700px;
    height: 150px;
    display: block;
    box-sizing: border-box;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    resize: none;
}

/* セレクトボックス */
select {
    box-sizing: border-box;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    min-width: 100px;
    border: 1px solid #ccc;
}

/* 日付ボックス */
input[type='date'] {
    width: 200px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* ラジオボタン、チェックボックス */
input[type='radio'],
input[type='checkbox'] {
    margin-right: 5px;
}

/* 送信ボタン */
button[type='submit'] {
    font-size: 15px;
    border: none;
    min-width: 140px;
    padding: 10px 25px;
    border-radius: 5px;
    margin-top: 15px;
    color: #fff;
    font-weight: bold;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

button[type='submit']:hover {
    opacity: 0.7;
}

/* 戻るボタン */
button[type='button'] {
    font-size: 15px;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    margin-top: 15px;
    color: #fff;
    background-color: #666;
    font-weight: bold;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

button[type='button']:hover {
    opacity: 0.7;
}

/* ------------------------------------------------------------------- */

/* 本体 */
body {
    margin: 0;
    padding: 0;
    color: #000;
    height: auto;
    font-family: "メイリオ", "Arial", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    font-size: 11pt;
    background-color: #FFF;
}

a {
    color: #000;
}

/* エラーメッセージ */
.message:before {
    content: "\f06a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #FF0000;
    margin-right: 5px;
}

.message {
    color: #FF0000;
    font-weight: bold;
}

/* インフォメーション */
.info {
    padding: 15px;
    margin-top: 10px;
    box-sizing: border-box;
}

.info strong {
    font-weight: bold;
}

/* ヘッダ */
header {
    width: 90%;
    max-width: 1080px;
    margin: 30px auto;
    box-sizing: border-box;
}

header h1 {
    font-size: 24px;
    font-weight: bold;
    line-height: 2.0em;
}

/* コンテナ */
.container {
    width: 90%;
    max-width: 1080px;
    margin: 30px auto;
    line-height: 1.8em;
}

.container h1 {
    font-size: 16px;
    margin: 0;
    padding: 0;
    font-weight: bold;
    line-height: 3.0em;
}

.container h2 {
    font-size: 16px;
    margin: 0;
    padding: 0;
    font-weight: bold;
    line-height: 2.5em;
}

.container p {
    margin-top: 15px;
}

/* メンテナンス */
.maintenance {
    width: 100%;
    margin: 30px auto;
    padding: 15px 25px 30px;
    box-sizing: border-box;
    background-color: #FFF;
}

/* 非会員テーブル */
.non-member {
    width: 100%;
    margin: 30px auto;
    padding: 15px 25px 30px;
    box-sizing: border-box;
}

/* 会員テーブル */
.member {
    width: 100%;
    margin: 30px auto;
    padding: 15px 25px 30px;
    box-sizing: border-box;
}

.member .email {
    max-width: 400px;
}

.member .password {
    max-width: 400px;
}

/* プラン選択 */
.plan {
    width: 100%;
    margin: 20px auto;
    padding: 0px;
    box-sizing: border-box;
}

.plan table {
    width: 100%;
    margin-top: 15px;
    border-collapse: separate;
    border-spacing: 0px 5px;
}

.plan td {
    font-size: 15px;
    text-align: left;
    box-sizing: border-box;
}

.plan td a {
    display: block;
    text-decoration: none;
    padding: 12px 24px;
}

/* 予約人数入力 */
.number {
    width: 100%;
    margin: 20px auto;
    padding: 0px;
    box-sizing: border-box;
}

.number_form {
    width: 60px !important;
}

/* 予約日選択（カレンダー） */
.calendar {
    width: 100%;
    margin: 20px auto;
    padding: 0px;
    box-sizing: border-box;
}

.calendar_month table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    table-layout: fixed;
}

.calendar_month th {
    font-weight: bold;
    text-align: center;
}

.calendar_month td {
    font-size: 16px;
    text-align: center;
    height: 90px;
}

.calendar_month th a,
.calendar_month td a {
    display: block;
    text-decoration: none;
    padding: 8px;
    color: #000;
}

.calendar_month .yearmonth {
    font-size: 18px;
}

.calendar_month .today {
    font-weight: bold;
}

.calendar_month .sunday {
    color: #F00;
}

.calendar_month .saturday {
    color: #006699;
}

/* 予約日選択（週間表示） */
.calendar_week {
    width: 100%;
    margin: 20px auto;
    padding: 0px;
    box-sizing: border-box;
}

.calendar_week .calendar_header {
    font-size: 16px;
    font-weight: bold;
}

.calendar_week .navigation {
    line-height: 2.4em;
}

.calendar_week table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    table-layout: fixed;
}

.calendar_week th {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 15px;
}

.calendar_week td {
    font-size: 16px;
    text-align: center;
}

.calendar_week th a,
.calendar_week td a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 15px;
}

.calendar_week .not-select {
    padding: 15px;
}

.calendar_week .yearmonth {
    font-size: 18px;
}

.calendar_week .today {
    font-weight: bold;
}

.calendar_week .sunday {
    color: #F00;
}

.calendar_week .saturday {
    color: #006699;
}

/* リストカレンダー */
.calendar_list {
    width: 100%;
    margin: 0px auto;
    padding: 0px;
    box-sizing: border-box;
}

.calendar_list table {
    width: 100%;
    margin-top: 15px;
    border-collapse: separate;
    border-spacing: 0px 5px;
}

.calendar_list td {
    font-size: 15px;
    text-align: left;
    box-sizing: border-box;
}

.calendar_list td a {
    display: block;
    text-decoration: none;
    padding: 12px 24px;
}

.calendar_list .not-select {
    padding: 12px 24px;
}

/* 時間帯選択 */
.time {
    width: 100%;
    margin: 20px auto;
    padding: 0px;
    box-sizing: border-box;
}

.time table {
    width: 100%;
    border-collapse: separate;
    margin-top: 15px;
}

.time td {
    font-size: 16px;
    text-align: left;
}

.time td a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
}

.time .not-select {
    padding: 10px 20px;
}

/* 予約情報入力 */
.customer {
    width: 100%;
    margin: 20px auto;
    padding: 0px;
    box-sizing: border-box;
}

.customer dl {
    width: 100%;
    padding-bottom: 25px;
    border-bottom: 1px dotted #666;
}

.customer dt {
    font-weight: bold;
    margin-top: 15px;
    border-top: 1px dotted #666;
    padding-top: 15px;
}

.costomer dd {
    margin-top: 15px;
}

.customer small {
    color: #FFFFFF;
    background-color: #FF0000;
    margin-left: 5px;
    font-size: 10px;
    padding: 2px 5px;
    box-sizing: border-box;
}

.customer .text {
    width: 450px;
}

.customer .shorttext {
    width: 120px;
}

.customer .name1,
.customer .name2,
.customer .furigana1,
.customer .furigana2 {
    width: 120px;
    max-width: 120px;
}

.customer .email {
    width: 450px;
}

.customer .tel {
    width: 70px;
}

.customer .zip1 {
    width: 50px;
}

.customer .zip2 {
    width: 70px;
}

.customer .url {
    width: 450px;
}

.customer .num {
    width: 80px;
}

.customer .password {
    width: 120px;
}

.customer .image-checkbox {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.customer .image-label {
    cursor: pointer;
    display: inline-block;
    padding: 4px;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.customer .image-label img {
    display: block;
    width: auto;
    height: auto;
    max-width: 90px;
    max-height: 90px;
}

.customer .member_regist {
    margin-top: 20px;
}

.customer .member_regist dt {
    border: 0px;
    margin: 0px;
    padding: 15px;
    box-sizing: border-box;
}

.customer .member_regist dd {
    border: 0px;
    margin: 0px;
    padding: 0px 15px 5px 15px;
    box-sizing: border-box;
}

/* パスワード可視化アイコン */
#togglePassword {
    color: #000;
    background: none;
    border: 0px;
    cursor: pointer;
    padding: 0;
    outline: none;
}

#togglePassword:focus {
    outline: none;
}

/* パスワード再発行 */
form .reminder_email {
    width: 350px;
}

form .newpassword {
    width: 150px;
}

/* キャンセル */
form .cancel_email {
    width: 350px;
}

form .cancel_reason {
    width: 400px;
    height: 120px;
}

/* フッター */
footer {
    color: #666;
    font-size: 12px;
    width: 90%;
    max-width: 1080px;
    margin: 30px auto;
    box-sizing: border-box;
    text-align: left;
}

/* テーマ別カラー */
:root {
    --color1-bg: #FDF4E0;
    --color1-border: #db9823;
    --color1-member-bg: #f9e2ac;
    --color1-link: #db9823;
    --color1-user-name: #db9823;
    --color1-button: #db9823;
    --color1-th: #f9e2ac;
    --color1-td: #f7e8c5;
    --color1-hover: #f9e2ac;
    --color1-not-select: #e8dfca;

    --color2-bg: #E9F5FC;
    --color2-border: #1981bd;
    --color2-member-bg: #b5dff7;
    --color2-link: #61a3c9;
    --color2-user-name: #6498B7;
    --color2-button: #1981bd;
    --color2-th: #b5dff7;
    --color2-td: #c6e4f5;
    --color2-hover: #92d2f7;
    --color2-not-select: #bcd5e3;

    --color3-bg: #FFE5E5;
    --color3-border: #E67373;
    --color3-member-bg: #fcbebb;
    --color3-link: #E67373;
    --color3-user-name: #CC5C5C;
    --color3-button: #CC5C5C;
    --color3-th: #fcbebb;
    --color3-td: #f7d8d7;
    --color3-hover: #f7c5c5;
    --color3-not-select: #e3c3c3;

    --color4-bg: #FFFFFF;
    --color4-border: #666666;
    --color4-member-bg: #E4E4E4;
    --color4-link: #000000;
    --color4-user-name: #000000;
    --color4-button: #000000;
    --color4-th: #C0C0C0;
    --color4-td: #E6E6E6;
    --color4-hover: #C0C0C0;
    --color4-not-select: #666666;

    --color5-bg: #EAF7D6;
    --color5-border: #94BE4F;
    --color5-member-bg: #d1e8ae;
    --color5-link: #94BE4F;
    --color5-user-name: #7aa337;
    --color5-button: #7aa337;
    --color5-th: #B3DA76;
    --color5-td: #d5e8b7;
    --color5-hover: #B3DA76;
    --color5-not-select: #c1d4a5;

    --color6-bg: #E3E0FD;
    --color6-border: #7C66E0;
    --color6-member-bg: #cfccfc;
    --color6-link: #7C66E0;
    --color6-user-name: #6E55CC;
    --color6-button: #6E55CC;
    --color6-th: #bdbae8;
    --color6-td: #cfccfc;
    --color6-hover: #bdbae8;
    --color6-not-select: #c9c8de;
}

.color1,
.color2,
.color3,
.color4,
.color5,
.color6 {
    background-color: var(--color1-bg);
    border-top: 5px solid var(--color1-border);
}

.color1 .non-member,
.color1 .member,
.color2 .non-member,
.color2 .member,
.color3 .non-member,
.color3 .member,
.color4 .non-member,
.color4 .member,
.color5 .non-member,
.color5 .member,
.color6 .non-member,
.color6 .member {
    border: 1px solid var(--color1-member-bg);
    background-color: var(--color1-member-bg);
}

.color1 .link,
.color2 .link,
.color3 .link,
.color4 .link,
.color5 .link,
.color6 .link {
    color: var(--color1-link);
    font-weight: bold;
}

.color1 .info,
.color2 .info,
.color3 .info,
.color4 .info,
.color5 .info,
.color6 .info {
    border: 1px dotted var(--color1-link);
    background-color: #FFFFFF;
}

.color1 .user_name,
.color2 .user_name,
.color3 .user_name,
.color4 .user_name,
.color5 .user_name,
.color6 .user_name {
    color: var(--color1-user-name);
    font-weight: bold;
    font-size: 18px;
}

.color1 button[type='submit'],
.color2 button[type='submit'],
.color3 button[type='submit'],
.color4 button[type='submit'],
.color5 button[type='submit'],
.color6 button[type='submit'] {
    background-color: var(--color1-button);
}

.color1 table,
.color2 table,
.color3 table,
.color4 table,
.color5 table,
.color6 table {
    background-color: var(--color1-bg);
}

.color1 th,
.color2 th,
.color3 th,
.color4 th,
.color5 th,
.color6 th {
    background-color: var(--color1-th);
}

.color1 td,
.color2 td,
.color3 td,
.color4 td,
.color5 td,
.color6 td {
    background-color: var(--color1-td);
}

.color1 th,
.color1 td,
.color2 th,
.color2 td,
.color3 th,
.color3 td,
.color4 th,
.color4 td,
.color5 th,
.color5 td,
.color6 th,
.color6 td {
    border: 1px solid #FFFFFF;
}

.color1 .plan td.plan-select:hover,
.color2 .plan td.plan-select:hover,
.color3 .plan td.plan-select:hover,
.color4 .plan td.plan-select:hover,
.color5 .plan td.plan-select:hover,
.color6 .plan td.plan-select:hover {
    cursor: pointer;
    background-color: var(--color1-hover);
}

.color1 .calendar th.day-select:hover,
.color2 .calendar th.day-select:hover,
.color3 .calendar th.day-select:hover,
.color4 .calendar th.day-select:hover,
.color5 .calendar th.day-select:hover,
.color6 .calendar th.day-select:hover {
    cursor: pointer;
    background-color: var(--color1-border);
}

.color1 .calendar td.day-select:hover,
.color1 .time td.time-select:hover,
.color2 .calendar td.day-select:hover,
.color2 .time td.time-select:hover,
.color3 .calendar td.day-select:hover,
.color3 .time td.time-select:hover,
.color4 .calendar td.day-select:hover,
.color4 .time td.time-select:hover,
.color5 .calendar td.day-select:hover,
.color5 .time td.time-select:hover,
.color6 .calendar td.day-select:hover,
.color6 .time td.time-select:hover {
    cursor: pointer;
    background-color: var(--color1-hover);
}

.color1 .calendar .not-select,
.color1 .time .not-select,
.color2 .calendar .not-select,
.color2 .time .not-select,
.color3 .calendar .not-select,
.color3 .time .not-select,
.color4 .calendar .not-select,
.color4 .time .not-select,
.color5 .calendar .not-select,
.color5 .time .not-select,
.color6 .calendar .not-select,
.color6 .time .not-select {
    color: #999;
    background-color: var(--color1-not-select);
}

.color1 .image-checkbox:checked+.image-label,
.color2 .image-checkbox:checked+.image-label,
.color3 .image-checkbox:checked+.image-label,
.color4 .image-checkbox:checked+.image-label,
.color5 .image-checkbox:checked+.image-label,
.color6 .image-checkbox:checked+.image-label {
    border: 2px solid var(--color1-border);
}

.color1 .member_regist,
.color2 .member_regist,
.color3 .member_regist,
.color4 .member_regist,
.color5 .member_regist,
.color6 .member_regist {
    border: 1px solid var(--color1-border);
    background-color: var(--color1-member-bg);
}


.color2 {
    --color1-bg: var(--color2-bg);
    --color1-border: var(--color2-border);
    --color1-member-bg: var(--color2-member-bg);
    --color1-link: var(--color2-link);
    --color1-user-name: var(--color2-user-name);
    --color1-button: var(--color2-button);
    --color1-th: var(--color2-th);
    --color1-td: var(--color2-td);
    --color1-hover: var(--color2-hover);
    --color1-not-select: var(--color2-not-select);
}

.color3 {
    --color1-bg: var(--color3-bg);
    --color1-border: var(--color3-border);
    --color1-member-bg: var(--color3-member-bg);
    --color1-link: var(--color3-link);
    --color1-user-name: var(--color3-user-name);
    --color1-button: var(--color3-button);
    --color1-th: var(--color3-th);
    --color1-td: var(--color3-td);
    --color1-hover: var(--color3-hover);
    --color1-not-select: var(--color3-not-select);
}

.color4 {
    --color1-bg: var(--color4-bg);
    --color1-border: var(--color4-border);
    --color1-member-bg: var(--color4-member-bg);
    --color1-link: var(--color4-link);
    --color1-user-name: var(--color4-user-name);
    --color1-button: var(--color4-button);
    --color1-th: var(--color4-th);
    --color1-td: var(--color4-td);
    --color1-hover: var(--color4-hover);
    --color1-not-select: var(--color4-not-select);
}

.color5 {
    --color1-bg: var(--color5-bg);
    --color1-border: var(--color5-border);
    --color1-member-bg: var(--color5-member-bg);
    --color1-link: var(--color5-link);
    --color1-user-name: var(--color5-user-name);
    --color1-button: var(--color5-button);
    --color1-th: var(--color5-th);
    --color1-td: var(--color5-td);
    --color1-hover: var(--color5-hover);
    --color1-not-select: var(--color5-not-select);
}

.color6 {
    --color1-bg: var(--color6-bg);
    --color1-border: var(--color6-border);
    --color1-member-bg: var(--color6-member-bg);
    --color1-link: var(--color6-link);
    --color1-user-name: var(--color6-user-name);
    --color1-button: var(--color6-button);
    --color1-th: var(--color6-th);
    --color1-td: var(--color6-td);
    --color1-hover: var(--color6-hover);
    --color1-not-select: var(--color6-not-select);
}

/* スマートフォン用出力 */
@media only screen and (max-width: 768px) {

    input, textarea, select {
        vertical-align:middle;
        box-sizing: border-box;
    }

    input[type="email"] {
        max-width: 100%;
    }

    textarea {
        width: 100%;
    }

    select {
        color: #000;
        background-color: #FFF;
        border: 1px solid #CCC;
    }

    input[type="text"],
    input[type="url"],
    input[type="number"],
    input[type="password"] {
        max-width: 100%;
    }

    input[type="date"] {
        color: #000;
        background-color: #FFF;
        max-width: 100%;
    }

    .customer .year,
    .customer .month,
    .customer .day {
        width: 75px;
    }

    .cancel_reason {
        width: 100% !important;
        max-width: 100% !important;
    }

}