@charset "UTF-8";

/**** 各ブラウザの初期cssをリセット ****/
/* 08/07　太田 */
*,
::after,
::before {
    box-sizing: border-box
}

html {
    line-height: 1.15;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block
}

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    background-color: #fff
}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit
}

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 1rem
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-bottom: 0
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote {
    margin: 0 0 1rem
}

b,
strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent
}

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

a:not([href]) {
    color: inherit;
    text-decoration: none
}

a:not([href]):hover {
    color: inherit;
    text-decoration: none
}

figure {
    margin: 0 0 1rem
}

img {
    vertical-align: middle;
    border-style: none
}

svg {
    overflow: hidden;
    vertical-align: middle
}

table {
    border-collapse: collapse
}

caption {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom
}

th {
    text-align: inherit
}

label {
    display: inline-block;
    margin-bottom: .5rem
}

button {
    border-radius: 0
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

select {
    word-wrap: normal
}

[type=button],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer
}

[type=button]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

textarea {
    overflow: auto;
    resize: vertical
}

/*fieldset{min-width:0;padding:0;margin:0;border:0}*/
/*legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[hidden] {
    display: none !important
}

/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ヘッダー・フッター 共通↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
/**** 変数の定義 ****/
:root {
    /* カラー */
    --mint-blue: #4bbcb8;
    /* メインカラー */
    --beige: #f9ebc5;
    /* ベースカラー */
    --brown: #d3a65f;
    /* アクセントカラー１ */
    --light-red: #ea7d68;
    /* アクセントカラー２ */

    /* 背景 */
    --bg: linear-gradient(180deg, var(--mint-blue), var(--mint-blue) 75%, var(--beige) 95%, var(--beige) 100%);
}



/* 基本 */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-color: #f9ebc5;

}

.page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.page-head img {
    width: 120px;
    vertical-align: bottom;
}

.page-btn,
.page-btn-close {
    z-index: 10000;
/*    display: none;*/
}

/* グリッド */
.page {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr;
    min-height: 100vh;
}

/* ヘッダー */
.page-head {
    grid-column: 1;
    grid-row: 1;
    width: 180px;
    text-align: center;
    padding: 0;
    display: grid;
    justify-content: center;
    position: sticky;
    top: 0;
    background-color: #f9ebc5;
    z-index: 10000;
}

.page-head a {
    width: 180px;
    /*    display: block;*/
}

.page-head img {
    width: 80px;
}

/* メインコンテンツ */
.page-main {
    grid-column: 1 / 3;
    grid-row: 2;
    background-image: linear-gradient(180deg, #f9ebc5, #f9ebc5 75%, #4bbcb8 95%, #4bbcb8 100%);
    background-attachment: fixed;
}

/* ナビゲーション */
.page-nav {
    grid-column: 2;
    grid-row: 1;
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 10000;
}

.page-nav ul {
    display: flex;
    padding: 0;
    list-style-type: none;

    /* height: 80px; ※ロゴにより可変 */

}

.page-nav ul li {
    width: 16.666667%;
    display: grid;
}

.page-nav ul a {
    display: grid;
    grid-template: auto auto / auto auto;
    text-decoration: none;
    height: 80px;
    text-align: center;
    align-self: center;
    text-shadow: 2px 2px 2px #aaaaaa;
    color: #ffffff;
    background-color: #ea7d68;
    border-left: 1px solid #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

/* それぞれのページにおいて、そこのナビゲーションの色を変更 */
.hotspring .page-nav ul li:nth-child(1) a {
    background-color: #d3a65f;
}

.restaurant .page-nav ul li:nth-child(2) a {
    background-color: #d3a65f;
}

.play .page-nav ul li:nth-child(3) a {
    background-color: #d3a65f;
}

.rooms .page-nav ul li:nth-child(4) a {
    background-color: #d3a65f;
}

.salon .page-nav ul li:nth-child(5) a {
    background-color: #d3a65f;
}

/************************/


.page-nav ul li a:hover {
    opacity: 0.5;
}

.page-nav ul a img {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: end;
    align-self: center;
    width: 40px;
    padding-right: 5px;
}

.page-nav ul a .menu-ja {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: start;
    align-self: end;
}

.page-nav ul a .menu-en {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: start;
    align-self: start;
    font-size: 0.8em;
}

/* ボタン */
.page-btn,
.page-btn-close {
    grid-column: 1;
    grid-row: 1;
    border-color: #ffffff;
    background-color: #ea7d68;
    color: #ffffff;
    width: 100px;
    position: sticky;
    top: 0;
    display: none;
}

.page-btn svg,
.page-btn-close svg {
    font-size: 30px;
}

/* フッター */
.page-foot {
    grid-column: 1 / 3;
    grid-row: 3;
    padding: 20px;
    background-color: #4bbcb8;
    text-align: center;
    color: #f9ebc5;
}

/*施設案内マップへ*/
.toMap {
    grid-column: 2;
    grid-row: 2;
    padding-top: 20px;
    background-color: var(--light-red);
    height: 250px;
    width : 80px;
    position: sticky;
    top: 290px;
    left: 100%;
    z-index: 10;
    letter-spacing: 4px;
    writing-mode: vertical-rl;
    color: #ffffff;
    font-size: 1.1em;
    opacity: .9;
    
    
}

.toMap a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    line-height: 80px;
}
.toMap img {
    width: 50px;
}

.link-height-up {
    padding-top:80px;
}



/* 追加　太田　08/07 */
img {
    width: 100%;
    height: auto;
}

/*******画面幅が959幅以下になったら*******/
@media (max-width: 959px) {
    .page-head {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }


    .page-nav {
        grid-column: 1 / 3;
        grid-row: 2;
        height: 100%;
        display: none;
        position: fixed;
        top: 80px;
        background-color: var(--light-red);
    }

    .page-nav ul {
        flex-direction: column;
    }

    .page-nav ul a {
        justify-content: center;
        padding-left: 10px;
        width: 100vw;
        border-bottom: solid 1px #ffffff;
    }

    .page-btn:hover,
    page-btn-close:hover {
        opacity: 0.5;
    }

}


/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑ヘッダー・フッター 共通↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/


/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓トップページ  (index.html)↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/


/* グリッド */
.index .page-main {
    display: grid;
    grid-template: repeat(16, auto) / repeat(5, 20%);
    text-align: center;
    width: 100%;
}

.index .topslide-pic {
    grid-column: 1 / 6;
    grid-row: 1;
    width: 100%;
}

.index .topslide-pic ul {
    list-style-type: none;
}

.index .covid19 {
    grid-column: 1 / 6;
    grid-row: 2;
    width: 85%;
    margin: 0 auto;
}
.index .map-title {
    grid-column: 1 / 6;
    grid-row: 3;
}

.index .map-pic {
    grid-column: 1 / 6;
    grid-row: 4;
    width: 85%;
    margin: 0 auto;
}

.index .hotspring-title {
    grid-column: 1 / 6;
    grid-row: 5;
}

.index .hotspring-pic {
    grid-column: 1 / 4;
    grid-row: 6;
}

.index .hotspring-ex {
    grid-column: 4 / 6;
    grid-row: 6;
    z-index: 3;
}

.index .restaurant-title {
    grid-column: 1 / 6;
    grid-row: 7;
}

.index .restaurant-pic {
    grid-column: 3 / 6;
    grid-row: 8;
}

.index .restaurant-ex {
    grid-column: 1 / 3;
    grid-row: 8;
    z-index: 3;
}

.index .play-title {
    grid-column: 1 / 6;
    grid-row: 9;
}

.index .play-pic {
    grid-column: 1 / 4;
    grid-row: 10;
}

.index .play-ex {
    grid-column: 4 / 6;
    grid-row: 10;
    z-index: 3;
}

.index .rooms-title {
    grid-column: 1 / 6;
    grid-row: 11;
}

.index .rooms-pic {
    grid-column: 3 / 6;
    grid-row: 12;
}

.index .rooms-ex {
    grid-column: 1 / 3;
    grid-row: 12;
    z-index: 3;
}

.index .salon-title {
    grid-column: 1 / 6;
    grid-row: 13;
}

.index .salon-pic {
    grid-column: 1 / 4;
    grid-row: 14;
}

.index .salon-ex {
    grid-column: 4 / 6;
    grid-row: 14;
    z-index: 3;
}

.index .access-title {
    grid-column: 1 / 6;
    grid-row: 15;
}

.index .access-pic {
    grid-column: 3 / 6;
    grid-row: 16;
}

.index .icon-hotspring {
    grid-column: 4 / 6;
    grid-row: 6;
    opacity: 0.15;
    justify-self: center;
    align-self: top;
    z-index: 2;
}
.index .icon-restaurant {
    grid-column: 1 / 3;
    grid-row: 8;
    opacity: 0.15;
    justify-self: center;
    align-self: top;
    z-index: 2;
}
.index .icon-play {
    grid-column: 4 / 6;
    grid-row: 10;
    opacity: 0.15;
    justify-self: center;
    align-self: top;
    z-index: 2;
}

.index .icon-rooms {
    grid-column: 1 / 3;
    grid-row: 12;
    opacity: 0.15;
    justify-self: center;
    align-self: top;
    z-index: 2;
}

.index .icon-salon {
    grid-column: 4 / 6;
    grid-row: 14;
    opacity: 0.15;
    justify-self: center;
    align-self: top;
    z-index: 2;
}

.index .icon-access {
    grid-column: 1 / 3;
    grid-row: 16;
    opacity: 0.15;
    justify-self: center;
    align-self: top;
    z-index: 2;
}



.ggmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.index .access-ex {
    grid-column: 1 / 3;
    grid-row: 16;
}

/*新型コロナウイルスについて*/
.index .covid19 {
    width: 90%;
    background-color: #ffffff;
    padding: 15px;
    outline: solid 2px var(--light-red);
    outline-offset: -8px;
    text-align: justify;
}



/*マップの注釈*/
.map-title {
    margin-top: 20px;
}

.map-pic {
    max-height: 51vw;
}
.map-pic map area{
    cursor: url(../img/mouspointer.png) 2 2, auto;
}
.zoon-guide {
    background-color: #ffffff;
    width: 25%;
    padding: 10px;
    border-radius: 15px;
    text-align: justify;
    display: none;
    box-shadow: 2px 2px 2px #777777;
}

.zoon-guide .guide-btn-close {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    padding: 0;
    margin: 0;
    display: grid;
    justify-items: center;
    align-items: center;
}
.zoon-guide .guide-btn-close svg {
    font-size: 15px;

}


.zoon-guide h3 {
    text-shadow: 2px 2px 2px #777777;
}

.zoon-guide button {
    display: inline-block;
    margin: 20px 5px;
    padding: 5px;
    background-image: linear-gradient(180deg, #ffffff, var(--light-red) 45%, var(--light-red) 100%);
    border: solid 2px var(--light-red);
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
}

.zoon-guide button:hover {
    opacity: 0.5;
}

.zoon-guide button img {
    width: 20px;
    height: 20px;
}


.zoon-guide1 {
    position: relative;
    top: -250px;
    left: 550px;
    border: 1px solid #0000dd;
}

.zoon-guide1 h3 {
    color: #0000dd;
}

.map-pic .z1:hover,
.map-pic .z2:hover,
.map-pic .z3:hover {
    opacity: 0.5;
}

.zoon-guide2 {
    position: relative;
    top: -650px;
    left: 250px;
    border: 1px solid #dd0000;
    z-index: 1;
}

.zoon-guide2 h3 {
    color: #dd0000;
}

.zoon-guide3 {
    position: relative;
    top: -400px;
    left: 500px;
    border: 1px solid #00ff00;
}

.zoon-guide3 h3 {
    color: #00ff00;
}

.zoon-guide4 {
    position: relative;
    top: -450px;
    left: 600px;
    border: 1px solid #ff6633;
}

.zoon-guide4 h3 {
    color: #ff6633;
}


/*各サービス紹介*/
.index h2 {
    padding: 45px 0 15px 0;
    text-shadow: 2px 2px 4px var(--brown);
}

.index .ex {
    text-align: justify;
    padding: 35px 10px 0 10px;
    border-top: 1px solid var(--light-red);
}

.index p .detail {
    color: #ffffff;
    text-align: justify;
    padding: 0 10px 0 10px;
}

.index .ex button {
    display: block;
    margin: 30px auto;
    padding: 10px;
    background-image: linear-gradient(180deg, #ffffff, var(--light-red) 45%, var(--light-red) 100%);
    border: solid 2px var(--light-red);
    border-radius: 5px;
    color: #ffffff;
    text-decoration: none;
}
.index .ex button a {
    color: #ffffff;
}

.index .ex button:hover {
    opacity: 0.5;
}

/*
.index .map-pic area:hover {
    opacity: 0.5;
}
*/









/*******画面幅が768幅以下になったら*******/
@media (max-width: 768px) {

    .index .page-main {
        display: block;

    }
    
    .map-pic {
    max-height: none;
}

    .zoon-guide {
        width: 60%;
    }

    .zoon-guide1 {
        position: relative;
        top: 10px;
        left: 50px;
        border: 1px solid #0000dd;
    }

    .zoon-guide2 {
        position: relative;
        top: 10px;
        left: 50px;
        border: 1px solid #dd0000;
    }

    .zoon-guide3 {
        position: relative;
        top: 10px;
        left: 50px;
        border: 1px solid #00ff00;
    }

    .zoon-guide4 {
        position: relative;
        top: 10px;
        left: 50px;
        border: 1px solid #00ff00;
    }

    .index h2 {
        border-top: 1px solid var(--light-red);
}
    
    .index .access-ex {
        margin-bottom: 80px;
}

    
    
    .index .icon-hotspring,
    .index .icon-restaurant,
    .index .icon-play,
    .index .icon-rooms,
    .index .icon-salon,
    .index .icon-access{
        display: none;
}
}



/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑トップページ  (index.html)↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/




/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓お客様情報入力（customer.php）↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.customer {
    margin: 80px auto 0 auto;
    grid-column: 1 / 6;
    grid-row: 1;
}

.customer p {
    padding-top: 20px;
    padding-bottom: 20px;
}

.comfirm {
    margin: 80px auto 0 auto;
    grid-column: 1 / 6;
    grid-row: 1;
}

.comfirm p {
    padding-top: 20px;
    padding-bottom: 20px;
}


/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑お客様情報入力（customer.php）↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/




/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓管理者ログイン画面  ↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.admin {
    margin: 80px auto 0 auto;
    grid-column: 1 / 6;
    grid-row: 1;
}

.admin p {
    padding-top: 20px;
    padding-bottom: 20px;
}


.admin input[type="button"], .admin input[type="submit"], .admin input[type="reset"]{
    background-color: var(--light-red);
    padding: 5px;
    margin:10px;
}
/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑管理者ログイン画面  ↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/


/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓予約者管理画面 ↓↓↓↓↓↓↓↓↓↓↓↓↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.contacts{
    margin: 80px auto 0 auto;
    grid-column: 1 / 6;
    grid-row: 1;
}

.contacts  input[type="button"],.contacts  input[type="submit"]{
    background-color: var(--light-red);
    padding: 5px;
}

.contacts p input[type="button"],.contacts p input[type="submit"]{
    margin-top: 30px;
}

.contacts table{
    padding-top: 20px;
    padding-bottom: 20px;
    width: 600px;
    margin-bottom: 20px;
}

.contacts table th{
    padding-top: 5px;
    padding-bottom: 5px;
}
.contacts table td{
    padding-top: 5px;
    padding-bottom: 5px;
}


.contacts table form{
    display: inline-block;
}

.contacts>form {
        margin-bottom: 20px;
}
/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑予約者管理画面  ↑↑↑↑↑↑↑↑↑↑↑↑↑
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/