@charset "UTF-8";
* {
    box-sizing: border-box;
}
:root {
   --text-color : #1a1a1a;
   --base-color : #f5f5f5;
}
body {
    margin: 0;
    font-size: clamp(0px,(100vw / 80), 16px);
    font-family: 'Ubuntu', 'Noto Sans JP', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .025em;
    color: #1a1a1a;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
  }
  body.noscroll {
    overflow: hidden;
}
  @media (max-width: 769px) {
      body {
          font-size: clamp(0px,(100vw / 25), 16px);
      }
    }
/*=====================================
header
=====================================*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 20%;
    max-width: 260px;
    height: 100vh;
    background-color: #1a1a1a;
    box-shadow: .0625em 0 .5em 0 rgba(0,0,0,.125);
    overflow: scroll;
    z-index: 999;
}
header .container {
    display: flex;
    position: relative;
    flex-direction: column;
    height: 100%;
    margin: 0 auto 0 0 ;
    z-index: 10000;
}
header .container .official-site {
    margin: 0.5em 0 0;
    padding:  1em 1em 1em 1.25em;
}
header .container .official-site a {
    padding-left: 1.5em;
    font-size: .9375em;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-image: url(../../assets/image/arrow-circle.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 1.125em;
}
header .container .logo {
    width: 100%;
    margin: 0;
    padding: 1em 1em .5em 1em;
    font-size: 1em;
    box-sizing: border-box;
}
header .container .logo a {
    display: block;
    width: 100%;
    font-weight: bold;
    text-decoration: none;
    color: #1a1a1a;
}
header .container .logo a img {
    display: block;
    width: 7.375em;
    height: 100%;
    margin: 0 auto;
}
header .container .logo a span {
    display: block;
    padding: .5em 0 0 0;
    text-align: center;
    font-size: .875em;
    color: #fff;
}
header .container nav {
    display: block;
    margin: 0;
    padding: 2em 0;
    height: 100%;
    box-sizing: border-box;
    transition: left .2s;
    overflow-y: scroll;
    z-index: 99999;
}
header .container nav span {

}
header .container nav ul li {

}
header .container nav ul li a {
display: flex;
padding: 0.625em 1.75em;
height: auto;
font-size: .875em;
cursor: pointer;
}
header .container nav ul {
    display: flex;
    margin: 0;
    padding: 0;
    height: 100%;
    list-style-type: none;
    flex-direction: column;
}
header .container nav ul li.top a {
    justify-content: center;
}
header .container nav ul li:not(:first-child) {
    margin: 2em 0 0 0;
}
header .container nav ul li.parent:last-child {
    padding: 0 0 2em 0;
}
header .container nav ul li span {
    position: relative;
    margin: 0 0 0 1em;
    padding: 0 0 0 2em;
    color: #fff;
}
header .container nav ul li span.selected-category {
    
}
header .container nav ul li span::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    left: .25em;
    width: 1.25em;
    height: 1.25em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
header .container nav ul li span::before {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);

}
header .container nav ul li span.enter::before {
    background-image: url(../../assets/image/door-1.svg);
}
header .container nav ul li span.use::before {
    background-image: url(../../assets/image/camera-1.svg);
}
header .container nav ul li span.exit::before {
    background-image: url(../../assets/image/door-2.svg);
}
header .container nav ul li span.emergency::before {
    background-image: url(../../assets/image/emergency.svg);
}
header .container nav ul li span.enter.selected-category::before {
    background-image: url(../../assets/image/door-2.svg);
}
header .container nav ul li span.use.selected-category::before {
    background-image: url(../../assets/image/camera-2.svg);
}
header .container nav ul li span.exit.selected-category::before {
    background-image: url(../../assets/image/door-1.svg);
}
header .container nav ul li span.emergency.selected-category::before {
    background-image: url(../../assets/image/phone.svg);
    width: 1.25em;
    height: 1.25em;
    margin: 0 0 0 .25em;
}
header .container nav ul li a {
    color: #1a1a1a;
}
header .container nav ul li span,
header .container nav ul li a {
    display: flex;
    align-items: center;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
}
header .container nav ul li.parent .child {
    display: block;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 1000;
}
header .container nav ul li.parent .child ul {
    display: block;
    margin: 0;
}
header .container nav ul li.parent .child ul li {
    position: relative;
    margin: 0;
    transition: .3s;
    list-style: none;
}
header .container nav ul li.parent .child ul li::before {
    position: absolute;
    content: '●';
    font-size: .375em;
    color: #fff;
    top: 50%;
    left: 4em;
    transform: translateY(-50%);
}
header .container nav ul li.parent .child ul li:hover::before {
    color: var(--text-color);
}
header .container nav ul li.parent .child ul li a {
    padding: .75em 1em .75em 3em;
    height: auto;
    letter-spacing: 0;
    color: #fff;
    cursor: pointer;
}
header .container nav ul li.parent .child ul li a:hover{
    background-color: var(--base-color);
    color: var(--text-color);
}
header.site .container nav ul li .child ul li a:hover {
    opacity: 1;
}
/*=====================================
main共通
=====================================*
//* section共通 */
.wrapper .guide .section {
    max-width: 640px;
    margin: 2em auto;
    padding: 3em 0 0 0;
}
.wrapper .guide .section .container .title {
    display: block;
    position: relative;
    margin: 0 auto 1em;
    padding: .375em 0;
    max-width: 640px;
    font-size: 1.5em;
    color: var(--text-color);
    text-shadow: 0 0 2px white;
}
.wrapper .guide .section .container .title::before {
    content: "";
    position: absolute;
    background: #FFF200;
    width: 3.125em;
    height: 3.125em;
    border-radius: 50%;
    top: 50%;
    left: -.9375em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
}
.wrapper .guide .section .container h2 {
    margin: 0 0 2em 0;
    text-align: center;
}
.wrapper .guide .section .container .body {
    margin: 0 auto;
    text-align: left;
}
/* 警告 */
.warning {
    display: flex;
    gap: .5em;
    align-items: flex-start;
    margin: 1em 0 0 0;
    padding: .9375em 1em;
    font-size: .9375em;
    background-color: rgba(197, 27, 45, .9325);
    color: #fff;
    font-weight: bold;
    border-radius: .25em;
}
.warning i {
    font-size: 1.5em;
}
.warning p {
    margin: 0!important;
    line-height: 1.5;
}
/* 注意 */
.attention {
    display: flex;
    gap: .5em;
    align-items: flex-start;
    margin: 1em 0 0 0;
    padding: .9375em 1em;
    font-size: .9375em;
    background-color: rgba(255, 242, 0, .375);
    color: rgba(248, 197, 67, 1);
    font-weight: bold;
    border-radius: .25em;
}
.attention i {
    font-size: 1.75em;
}
.attention p {
    margin: 0!important;
    line-height: 1.5;
}
/* 案内 */
.info {
    display: flex;
    gap: .5em;
    align-items: flex-start;
    margin: 1em 0 0 0;
    padding: .9375em 1em;
    font-size: .9375em;
    background-color: rgba(248,197,67,.2);
    color: rgba(248,197,67,1);
    font-weight: bold;
    border-radius: .25em;
}
.info i {
    font-size: 1.5em;
}
.info p {
    margin: 0!important;
    line-height: 1.5;
    text-align: left;
}
/* 下線 */
u {
    display: inline;
    text-decoration: none;
    box-shadow: inset 0 -.7em 0 0 rgba(255, 242, 0, .25);
    padding-bottom: .1em;
    font-weight: bold;
}
u.red {
    display: inline;
    text-decoration: none; 
    box-shadow: inset 0 -.7em 0 0 rgba(197,27,45,.25);
    padding-bottom: .1em; 
}
/* 番号リスト */
ol.list-number {
    padding: 0;
    list-style-type: none;
    counter-reset: number;
}
ol.list-number li {
    margin: 0;
    line-height: 1.875em;
}
ol.list-number li::before {
    display: inline-block;
    margin-right: .625em;
    width: 1.5em;
    height: 1.5em;
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
    color: #fff;
    background-color: black;
    border-radius: 50%;
    counter-increment: number;
    content: counter(number);
}
/* ※ コメント */
ul.comment {
    margin: 2em 0 0;
    padding: 0;
    font-size: .75em!important;
    list-style: none;
}
ul.comment li a {
    color: #0693E3;
    cursor: pointer;
}
/*=====================================
wrapper
=====================================*/
.wrapper {
    margin: 3em 0 0 0;
    padding: 0 2.5em 0 calc(clamp(0px, 20%, 260px) + 2.5em);
}
.wrapper-container {
    display: flex;
    gap: 2.5em;
    margin: 0 auto;
    max-width: 1020px;
}
.wrapper.noscroll {
    overflow: hidden;
}
/*=====================================
main
=====================================*/
.wrapper .guide {
    width: 75%;
}
.wrapper .guide .contents {
    margin: 0 auto;
}
.wrapper .guide .contents .container {
    
}
.wrapper .guide .contents .container h1 {
    text-align: center;
}
.wrapper .guide .contents .container .content {
    
}
.wrapper .guide .contents .container .content .category {
    display: flex;
    align-items: center;
    gap: 3em;
}
.wrapper .guide .contents .container .content .category h2 {
     background-color: var(--base-color);
     height: inherit;
     border-radius: .125em;
}
.wrapper .guide .contents .container .content .category ul {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: .5em;
    width: 100%;
}
.wrapper .guide .contents .container .content .category ul li {
    position: relative;
}
.wrapper .guide .contents .container .content .category ul li::after {
    position: absolute;
    display: inline-block;
    content: "";
    top: 0;
    right: 1em;
    vertical-align: middle;
    line-height: 1;
    width: 0.65em;
    height: 0.65em;
    border: 0.15em solid var(--text-color);
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(35%) rotate(135deg);
}
.wrapper .guide .contents .container .content .category ul li a {
    display: block;
    text-decoration: none;
    color: var(--text-color);
}
/* ご利用当日の流れ */
.wrapper .guide .flow {
    margin: 0 auto;
}
.wrapper .guide .flow .container {
    
}
.wrapper .guide .flow .container .title {
    
}
.wrapper .guide .flow .container .content {
    
}
.wrapper .guide .flow .container .content p {
    margin: .375em 0;
}
.wrapper .guide .flow .container .content figure {
    margin: 1em 0 0 0;
}
.wrapper .guide .flow .container .content figure figcaption {
    text-align: left;
    margin: 0 0 1em 0;
}
.wrapper .guide .flow .container .content figure img {
    width: 100%;
}
/* 入室方法 */
.wrapper .guide .wrapper {

}
.wrapper .guide .enter .container {

}
.wrapper .guide .enter .container .title {

}
.wrapper .guide .enter .container .content {

}
.wrapper .guide .enter .container .content p {
    margin: .375em 0;
}
.wrapper .guide .enter .container .content p a {
    color: #0693E3;
    font-weight: bold;
    cursor: pointer;
}
.wrapper .guide .enter .container .content p small {
    
}
.wrapper .guide .enter .container .content .photos {
    display: flex;
    margin: 1em auto;
}
.wrapper .guide .enter .container .content .photos img {
    display: block;
    width: 50%;
}
.wrapper .guide .enter .container .content .box {
    display: flex;
    justify-content: left;
    gap: 2em;
    margin: 2em auto;
}
.wrapper .guide .enter .container .content .box figure {
    width: 20%;
    margin: 0;
}
.wrapper .guide .enter .container .content .box figure {
    width: 20%;
    margin: 0;
}
.wrapper .guide .enter .container .content .box figure img {
    display: block;
    width: 100%;
}
.wrapper .guide .enter .container .content .box .body {
    width: calc(80% - 2em);
    margin: 0;
}
.wrapper .guide .enter .container .content .box .body ol {
   
}
.wrapper .guide .enter .container .content .box .body ol li {
   
}
.wrapper .guide .enter .container .content .box .body ol li::before {

}
.wrapper .guide .enter .container .content .note {

}
.wrapper .guide .enter .container .content .note .warning {
    
}
.wrapper .guide .enter .container .content .note .text a {
    font-weight: bold;
    color: var(--text-color);
}
.wrapper .guide .enter .container .content .attention {

}
/* お支払い手続き */
.wrapper .guide .payment {

}
.wrapper .guide .payment .container {

}
.wrapper .guide .payment .container .title {

}
.wrapper .guide .payment .container p {
    margin: .375em 0;
}
.wrapper .guide .payment .container .image {
    display: flex;
    gap: 2em;
    justify-content: center;
    margin: 1em auto;
}
.wrapper .guide .payment .container .image figure {
    margin: 0;
    width: 10em;
}
.wrapper .guide .payment .container .image figure img {
    width: 100%;
}
/* チェックイン手続き */
.wrapper .guide .check-in {

}
.wrapper .guide .check-in .container {

}
.wrapper .guide .check-in .container .title {

}
.wrapper .guide .check-in .body {
    display: flex;
    gap: 1em;
}
.wrapper .guide .check-in .body .text {
   
}
.wrapper .guide .check-in .container .text p {
    margin: .375em 0;
    width: 100%;
}
.wrapper .guide .check-in .container figure {
    margin: 0;
    width: 10em;
}
.wrapper .guide .check-in .container figure img {
    width: 100%;
}
/* 靴裏の養生 */
.wrapper .guide .recuperation {

}
.wrapper .guide .recuperation .container {

}
.wrapper .guide .recuperation .container .title {

}
.wrapper .guide .recuperation .container p {
    margin: .375em 0;
}
.wrapper .guide .recuperation .container .box {
    margin: 2em 0 0 0;
}
.wrapper .guide .recuperation .container .box ol {
    display: flex;
    justify-content: center;
    gap: 1.5em;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.wrapper .guide .recuperation .container .box ol li {
    text-align: left;
    width: calc(50% - .5em);
}
.wrapper .guide .recuperation .container .box ol li figure {
    margin: 0;
}
.wrapper .guide .recuperation .container .box ol li figure img {
    width: 100%;
    border-radius: .3125em;
}
.wrapper .guide .recuperation .container .box ol li p {
    position: relative;
    padding: 0 0 0 2em;
    font-size: .9375em;
}
.wrapper .guide .recuperation .container .box ol li p::before {
    position: absolute;
    top: 0;
    left: 1em;
    display: inline-block;
    margin-right: .625em;
    width: 1.5em;
    height: 1.5em;
    font-weight: bold;
    line-height: 1.5em;
    text-align: center;
    color: #fff;
    background-color: black;
    border-radius: 50%;
    left: 0;
}
.wrapper .guide .recuperation .container .box ol li p.recuperation-1:before {
    content: "1";
}
.wrapper .guide .recuperation .container .box ol li p.recuperation-2:before {
    content: "2";
}
/* テープ利用時のルール */
.wrapper .guide .tape-usage {}
.wrapper .guide .tape-usage .container {}
.wrapper .guide .tape-usage .container  h3 {}
.wrapper .guide .tape-usage .container p {}
.wrapper .guide .tape-usage .container p span {}
.wrapper .guide .tape-usage .container .wrap {
    display: flex;
    gap: 1em;
}
.wrapper .guide .tape-usage .container .wrap .block {}
.wrapper .guide .tape-usage .container .wrap .block figure {
    margin: 0;
}
.wrapper .guide .tape-usage .container .wrap .block figure img {
    width: 100%;
}
.wrapper .guide .tape-usage .container .wrap .block h4 {
    margin: 0;
    text-align: center;
}
.wrapper .guide .tape-usage .container .wrap .block p {
    margin: .25em 0;
    font-size: .9375em;
}
.wrapper .guide .tape-usage .container .wrap .block ul {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding: 0;
}
.wrapper .guide .tape-usage .container .wrap .block ul li {
    display: flex;
    gap: 1em;
}
.wrapper .guide .tape-usage .container .wrap .block ul li img {
    width: 1.25em;
}
/* 白ホリ利用時の注意点 */
.wrapper .guide .notes {

}
.wrapper .guide .notes .container {

}
.wrapper .guide .notes .container .image {
    display: flex;
    width: 80%;
    margin: 0 auto 2em;
}
.wrapper .guide .notes .container .image figure {
    margin: 0;
}
.wrapper .guide .notes .container .image figure img {
    width: 100%;
}
.wrapper .guide .notes .container .image figure figcaption {
    text-align: center;
}
.wrapper .guide .notes .container .title {

}
.wrapper .guide .notes .container p {
    margin: .375em 0;
}
.wrapper .guide .notes .container p.attention {
    margin: 2em 0 0 0;
}
.wrapper .guide .notes .container p span {

}
.wrapper .guide .notes .container p small {

}
.wrapper .guide .notes .container .guidance {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;
    margin: 2em auto 0;
}
.wrapper .guide .notes .container .guidance figure {
    margin: 0;
    width: 10em;
}
.wrapper .guide .notes .container .guidance figure img {
    width: 100%;
    border-radius: .3125em;
}
.wrapper .guide .notes .container .guidance .body {
    width: calc(100% - (2em + 10em));
}
.wrapper .guide .notes .container .guidance .body .sub-title {
    display: inline-block;
    margin: 0 0 .5em 0;
    padding: .5em 1em;
    border-radius: 3.125em;
    background-color: var(--base-color);
    font-size: 0.875em;
    font-weight: bold;
}
.wrapper .guide .notes .container .guidance .body p {
    margin: 0;
}
/* Wi-Fi・電気・エアコン */
.wrapper .guide .facility {

}
.wrapper .guide .facility .container {

}
.wrapper .guide .facility .container .wi-fi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin: 0 auto;
    width: 30em;
}
.wrapper .guide .facility .container .wi-fi figure {
    margin: 0;
    width: 6em;
}
.wrapper .guide .facility .container .wi-fi figure img {
    width: 100%;
}
.wrapper .guide .facility .container .wi-fi .body {
    width: calc(100% - (2em + 10em));
}
.wrapper .guide .facility .container .wi-fi .body .item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .875em;
    font-size: 1.5em;
}
.wrapper .guide .facility .container .wi-fi .body .item .sub-title {
    width: 6em;
}
.wrapper .guide .facility .container .wi-fi .body .item .text {

}
.wrapper .guide .facility .container .wi-fi .body .item .text span {
    display: block;
}
.wrapper .guide .facility .container .power {
    margin: 2em 0 0 0;
}
.wrapper .guide .facility .container .power p {
    margin: 0;
}
.wrapper .guide .facility .container .power figure {
    margin: 1em auto 0;
    width: 30em;
}
.wrapper .guide .facility .container .power figure img {
    width: 100%;
}
/* 原状回復 */
.wrapper .guide .restore {

}
.wrapper .guide .restore .container {

}
.wrapper .guide .restore .container .title {

}
.wrapper .guide .restore .container p {
    display: inline-block;
    position: relative;
    margin: 0;
    text-align: left;
}
.wrapper .guide .restore .container ul {
    padding: 0;
    list-style: none;
    font-size: .875em;
}
.wrapper .guide .restore .container ul li {

}
.wrapper .guide .restore .container .row {
    display: flex;
    flex-wrap: wrap;
    margin: 2em 0 0 0;
}
.wrapper .guide .restore .container .row a {
    position: relative;
    width: calc(100% / 3);
}
.wrapper .guide .restore .container .row a img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #fff;
}
.wrapper .guide .restore .container .row a img.icon {
    position: absolute;
    top: 0.75em;
    left: 0.75em;
    width: 2.5em;
    height: auto;
    border: none;
}
/* セルフ清掃 */
.wrapper .guide .cleaning {
    
}
.wrapper .guide .cleaning .container {
    
}
.wrapper .guide .cleaning .container .note {
    font-size: .875em;
    font-weight: bold;
    color: red;
}
.wrapper .guide .cleaning .container .title {

}
.wrapper .guide .cleaning .container .lead {
    
}
.wrapper .guide .cleaning .container .description {
    margin: 1.5em 0 0 0;
}
.wrapper .guide .cleaning .container .description.first {
    margin: 2em 0 0 0;
}
.wrapper .guide .cleaning .container .description .sub-title {
    position: relative;
    margin: 0 0 .5em 0;
    padding: 0 0 0 1.2em;
    line-height: 1.4;
    font-size: 1.25em;
    font-weight: bold;
}
.wrapper .guide .cleaning .container .description .sub-title::before {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f00c";
    font-weight: 900;
    font-size: 1em;
    left: 0;
    top: 0;
    color: #1a1a1a; 
    font-weight: 900;
}
.wrapper .guide .cleaning .container .description p {
    margin: 0;
}
.wrapper .guide .cleaning .container .description a {
    color: #0693E3;
}
.wrapper .guide .cleaning .container .image {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 30em;
    margin: 1em auto 0;
}
.wrapper .guide .cleaning .container .image figure {
    margin: 0;
    width: 50%;
    height: 50%;
}
.wrapper .guide .cleaning .container .image figure figcaption {
    font-size: 0.75em;
}
.wrapper .guide .cleaning .container .image figure img {
    width: 100%;
    margin: 1em 0 0 0;
    border-radius: .3125em;
}
/* 白ホリが汚れてしまった場合 */
.wrapper .guide .dirt {

}
.wrapper .guide .dirt .container {

}
.wrapper .guide .dirt .container .title {

}
.wrapper .guide .dirt .container .lead {
    margin: .375em 0;
    text-align: left;
}
.wrapper .guide .dirt .container .description {
   margin: 2em 0 0 0;
}
.wrapper .guide .dirt .container .description .content {
    display: flex;
    gap: 1.5em;
    justify-content: center;
}
.wrapper .guide .dirt .container .description .content:not(:first-child) {
   margin: 2em 0 0 0;
}
.wrapper .guide .dirt .container .description .content figure {
    margin: 0;
    width: 30%;
}
.wrapper .guide .dirt .container .description .content figure img {
    width: 100%;
}
.wrapper .guide .dirt .container .description .content .body {
    width: calc(70% - 1.5em);
}
.wrapper .guide .dirt .container .description .content .body .sub-title {
    display: inline-block;
    margin: 0 0 .5em 0;
    padding: .25em 1em;
    font-size: 1em;
    font-weight: bold;
    border-radius: 3.125em;
    color: #fff;
}
.wrapper .guide .dirt .container .description .content .body .sub-title.blue {
   background-color: #48a4d3;
}
.wrapper .guide .dirt .container .description .content .body .sub-title.red {
   background-color: #c51b2d;
}
.wrapper .guide .dirt .container .description .content .body p {
    margin: 0;
    font-size: .9375em;
}
.dirt .container .description .content .note {

}
.wrapper .guide .dirt .container .description .content .note .warning {

}
/* チェックアウト手続き */
.wrapper .guide .checkout {

}
.wrapper .guide .checkout .container {

}
.wrapper .guide .checkout .container .title {

}
.wrapper .guide .checkout .container .body {
    display: flex;
    gap: 1em;
}
.wrapper .guide .checkout .container .body p {
    margin: .375em 0;
    width: 100%;
}
.wrapper .guide .checkout .container .body p span {
    position: relative;
    padding: 0 .75em 0 0;
}
.wrapper .guide .checkout .container .body p span .notes {
    position: absolute;
    top: -.0625em;
    right: -.025em;
    font-size: .75em;
}
.wrapper .guide .checkout .container .body figure {
    margin: 0;
    width: 10em;
}
.wrapper .guide .checkout .container .body figure img {
    display: block;
    width: 100%;
}
/* 退出方法 */
.wrapper .guide .exit {

}
.wrapper .guide .exit .container {

}
.wrapper .guide .exit .container .title {

}
.wrapper .guide .exit .container p {
    margin: .375em 0;
    text-align: left;
}
.wrapper .guide .exit .container .box {
    display: flex;
    justify-content: left;
    gap: 2em;
    margin: 2em auto;
}
.wrapper .guide .exit .container .box figure {
    width: 20%;
    margin: 0;
}
.wrapper .guide .exit .container .box figure img {
    display: block;
    width: 100%;
}
.wrapper .guide .exit .container .box .body {
    margin: 0;
}
.wrapper .guide .exit .container .box .body ol {

}
.wrapper .guide .exit .container .box .body ol li {

}
/* 緊急時 */
.wrapper .guide .contact {

}
.wrapper .guide .contact .container {

}
.wrapper .guide .contact .container .title {
    
}
.wrapper .guide .contact .container p {
    
}
.wrapper .guide .contact .container p a {
    color: #0693E3; 
}
.wrapper .guide .contact .container .body {
    display: flex;
    align-items: center;
    margin: 2em 0;
}
.wrapper .guide .contact .container .body .contact-info {
    flex: 5.5;
}
.wrapper .guide .contact .container .body .contact-info .info-item {
    margin: 1.2em 0 0 0;
    text-align: center;
}
.wrapper .guide .contact .container .body .contact-info .info-item .tel {
    display: block;
    position: relative;
    padding: 0 0 0 4em;
    font-size: 1em;
    font-weight: bold;
}
.wrapper .guide .contact .container .body .contact-info .info-item .tel::before {
    position: absolute;
    top: 52%;
    left: 1.375em;
    transform: translateY(-50%);
    background-image: url(../../assets/image/phone.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 2em;
    height: 2em;
    content: "";
}
.wrapper .guide .contact .container .body .contact-info .info-item .tel a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 2.25em;
    display: block;
    letter-spacing: .02em;
    text-align: left;
}
.wrapper .guide .contact .container .body .contact-info .info-item .hour {
    font-size: 1em;
}
.wrapper .guide .contact .container .body .emergency-contact-info {
    text-align: center;
    flex: 4.5;
}
.wrapper .guide .contact .container .body .emergency-contact-info .sub-title {
    margin: 0 0 .25em 0;
    font-size: 1em;
    text-align: left;
}
.wrapper .guide .contact .container .body .emergency-contact-info .info-item {
    display: flex;
    flex-direction: column;
    gap: .5em;
    margin: 0 auto;
    text-align: left;
}
.wrapper .contact .container .body .emergency-contact-info .info-item .tel {
    display: flex;
    position: relative;
    padding: 0 0 0 2em;
    font-size: .75em;
    font-weight: bold;
    align-items: center;
}
.wrapper .guide .contact .container .body .emergency-contact-info .info-item .tel::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-image: url(../../assets/image/smartphone.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 1.75em;
    height: 1.75em;
    content: "";
}
.wrapper .guide .contact .container .body .emergency-contact-info .info-item .tel a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.75em;
    letter-spacing: .01em;
}
/*=====================================
aside
=====================================*/
.wrapper aside {
  width: 25%;
}
.wrapper aside .banner {
  position: fixed;
  padding: 0 2.5em 0 0;
  width: 20%;
  max-width: 296px;
  height: 100vh;
  overflow: scroll; /* 縦方向のスクロールを維持 */
  -ms-overflow-style: none;  /* IE、Edge */
  scrollbar-width: none;
}
.wrapper aside .banner .container {
  display: none;
  padding: 0 0 6em 0;
  text-align: center;
}
.wrapper aside .banner .container .row {
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.wrapper aside .banner .container .row .column {

}
.wrapper aside .banner .container .row .column  a {}
.wrapper aside .banner .container .row .column  a img {
    display: block;
    width: 100%;
}
/*=====================================
popup_banner
=====================================*/
/* #popup_banner {
    display: none;
    position: fixed;
    bottom: 1em;
    right: 2em;
    width: 15em;
    z-index: 997;
}
#popup_banner.none {
    display: none !important;
}
#popup_banner a {
    display: block;
    transition: .1s;
}
#popup_banner a {
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
#popup_banner a img {
    display: block;
    width: 100%;
    box-shadow: .125em .125em .3125em rgba(0,0,0,.5); 
}
#popup_banner input[type=button].close {
    position: absolute;
    top: -.75em;
    right: -.75em;
    margin: 0;
    padding: 0 0 2px;
    width: 2em;
    height: 2em;
    font-size: 1em;
    line-height: 1;
    font-weight: bold;
    color: #fff;
    background-color: #040404;
    border: none;
    border-radius: 50%;
    -webkit-appearance: none;
    cursor: pointer;
    transition: .1s;
}
#popup_banner input[type=button].close:hover {
    opacity: .75;
} */
@media (min-width: 770px) {
    /* 共通設定 */
    .is-sp {
        display: none!important;
    }
    /* header以下 */
    header {
        z-index: 999;
    }
    .sp_bottom-menu {
        display: none;
    }
    /* back-to-top */
    .back-to-top {
        position: fixed;
        right: 1em;
        bottom: 1em;
        z-index: 800;
        transition: 0.4s;
        opacity: 0;
    }
    [data-scrolled="true"] .back-to-top {
        opacity: 1;
    }
    .back-to-top a {
        display: inline-block;
        padding: 0.5em;
        font-size: 1em;
        line-height: 1em;
        text-decoration: none;
        background-color: rgba(255, 255, 255, 0.8);
        color: #1a1a1a;
        border: 3px solid #1a1a1a;
        border-radius: 50%;
    }
}
@media (max-width: 769px) {
    /* 共通設定 */
    .is-pc {
        display: none!important;
    }
    /* オーバーレイのスタイル */
    .overlay {
        position: fixed;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        z-index: 998;
    }
    .note .warning {
        font-size: .875em;
    }
    .note .text {
        font-size: .75em;
    }
    .attention {
        font-size: .875em;
    }
    .attention::before {
        width: 2.5em;
        height: 2.5em;
    }
    .info::before {
        width: 2.5em;
        height: 2.5em;
    }
    /* header */
    header {
        top: 0;
        left: -100%;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0,0,0,.1);
    }
    header .container {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    header .container .official-site {
        margin: 3.5em 0 0;
    }
    header .container .logo {
        width: auto;
    }
    header .container .logo a img {
        width: 4em;
    }
    /* header toggle */
    header.site .container nav {
        padding: 2em 0;
    }
    header .container nav a.toggle {
        position: absolute;
        top: 8px;
        left: 8px;
        margin: 24px 17px 24px;
        width: 26px;
        height: 14px;
        z-index: 999999;
        cursor: pointer;
    }
    header .container nav a.toggle::before {
        display: block;
        position: absolute;
        content: "";
        width: 50px;
        height: 50px;
        top: -18px;
        left: -17px;
    }
    header .container nav a.toggle span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1.5px;
        background-color: #fff;
        border-radius: 4px;
    }
    header .container nav a.toggle span:nth-of-type(1) {
        top: 0;
    }
    header .container nav a.toggle span:nth-of-type(2) {
        top: 12px;
    }
    header .container nav a.toggle span:nth-of-type(1) {
        top: -1.5px;
        -webkit-transform: translateY(7px) rotate(-45deg);
        transform: translateY(7px) rotate(-45deg);
    }
    header .container nav a.toggle span:nth-of-type(2) {
        width: 100%;
        -webkit-transform: translateY(-7px) rotate(45deg);
        transform: translateY(-7px) rotate(45deg);
    }
    /* main */
    .wrapper {
        width: 92%;
        margin: 2em auto 0;
        padding: 0;
    }
    .wrapper .guide {
        width: 100%;
    }
    .wrapper .guide .contents .container .logo {
        width: 5.625em;
        margin: 0 auto;
        line-height: 1.1;
    }
    .wrapper .guide .contents .container .logo a {
        color: var(--text-color);
        text-decoration: none;
    }
    .wrapper .guide .contents .container .logo a img {
        
    }
    .wrapper .guide .contents .container .logo a span {
        font-size: .875em;
    }
    .wrapper .guide .section {
        padding: 1em 0 0 0;
        height: auto;
    }
    .wrapper .guide .contents {
        width: 100%;
    }
    .wrapper .guide .contents .container h1 {
        font-size: 1.25em;
    }
    .wrapper .guide .contents .container .content .category {
        flex-direction: column;
        align-items: baseline;
        gap: 0;
    }
    .wrapper .guide .contents .container .content .category h2 {
        margin: 0 auto 0 0;
        padding: 0.25em 0.5em;
        font-size: 1em;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .wrapper .guide .flow .container .content p {
        font-size: .875em;
    }
    .wrapper .guide .enter .container .content p {
        margin: 0;
        font-size: .875em;
    }
    .wrapper .guide .enter .container .content .box {
        flex-direction: row-reverse;
        gap: .5em;
        margin: 1.5em auto;
    }
    .wrapper .guide .enter .container .content .box .body {
        width: 100%;
    }
    .wrapper .guide .enter .container .content .box figure {
        width: 10em;
        margin: 0 auto;
    }
    .wrapper .guide .enter .container .content .box .body .sub-title {
        font-size: 1em;
    }
    .wrapper .guide .enter .container .content .box .body ol {
        margin: 0;
    }
    .wrapper .guide .payment .container p {
        margin: 0;
        font-size: .875em;
    }
    .wrapper .guide .payment .container .image {
        gap: 1em;
    }
    .wrapper .guide .payment .container .image figure {
        width: 5em;
    }
    .wrapper .guide .payment .container .payment-mail {
        width: 20em;
    }
    .wrapper .guide .check-in .container p {
        margin: 0;
        font-size: .875em;
    }
    .wrapper .guide .recuperation .container p {
        margin: 0;
        font-size: .875em;
    }
    .wrapper .guide .recuperation .container .box {
        margin: 1em 0;
    }
    .wrapper .guide .recuperation .container .box ol {
        width: 100%;
    }
    .wrapper .guide .tape-usage .container p {
        margin: 0;
        font-size: .875em;
    }
    .wrapper .guide .tape-usage .container .wrap .block h4 {
        font-size: .875em;
    }
    .wrapper .guide .tape-usage .container .wrap .block p {
        font-size: .75em;
    }
    .wrapper .guide .tape-usage .container .wrap .block:nth-child(3) ul {
        margin: 2em 0 0 0;
    }
    .wrapper .guide .tape-usage .container .wrap .block ul li {
        font-size: .875em;
    }
    .wrapper .guide .notes .container p {
        margin: 0;
        font-size: .875em;
    }
    .wrapper .guide .notes .container .guidance {
        width: 100%;
    }
    .wrapper .guide .notes .container .guidance .body {
        width: 100%;
        font-size: .875em;
    }
    .wrapper .guide .notes .container .guidance .body .note {
        font-size: .75em;
    }
    .wrapper .guide .notes .container .image figure figcaption {
        font-size: .75em;
    }
    .wrapper .guide .facility .container .power p {
        font-size: .875em;
    }
    .wrapper .guide .facility .container .wi-fi {
        gap: 2em;
        width: 100%;
    }
    .wrapper .guide .facility .container .wi-fi figure {
        width: 4em;
    }
    .wrapper .guide .facility .container .wi-fi .body {
        width: calc(100% - (1em + 4em));
    }
    .wrapper .guide .facility .container .wi-fi .body .item {
        font-size: 1.25em;
    }
    .wrapper .guide .facility .container .wi-fi .body .item:not(:first-child) {
        margin: .5em 0 0 0;
    }
    .wrapper .guide .facility .container .wi-fi .body .item .sub-title {
        font-size: .75em;
        font-weight: bold;
        line-height: 1;
    }
    .wrapper .guide .facility .container .power figure {
        width: 90%;
    }
    .wrapper .guide .restore .container p {
        margin: 0 auto;
        font-size: .875em;
        text-align: left;
    }
    .wrapper .guide .restore .container .note {
        font-size: .75em;
    }
    .wrapper .guide .restore .container .row {
        margin: 1.5em 0 0 0;
    }
    .wrapper .guide .restore .container .row a {
        width: 50%;
    }
    .wrapper .guide .cleaning .container .lead {
        font-size: .875em;
    }
    .wrapper .guide .cleaning .container .note {
        font-size: .75em;
    }
    .wrapper .guide .cleaning .container .description .sub-title  {
        font-size: 1em;
    }
    .wrapper .guide .cleaning .container .description p {
        font-size: .875em;
    }
    .wrapper .guide .cleaning .container .image {
        width: 80%;
        margin: 1em auto 0;
    }
    .wrapper .guide .cleaning .container .image figure figcaption {
        font-size: .625em;
    }
    .wrapper .guide .dirt .container .lead {
        font-size: 0.875em;
    }
    .wrapper .guide .dirt .container .description .content {
        gap: .5em;
        flex-direction: column;
    }
    .wrapper .guide .dirt .container .description .content:not(:first-child) {
        margin: 1em 0 0 0;
    }
    .wrapper .guide .dirt .container .description .content .body {
        width: 100%;
        margin-top: -1.25em;
    }
    .wrapper .guide .dirt .container .description .content .body .sub-title {
        font-size: .875em;
    }
    .wrapper .guide .dirt .container .description .content .body p {
        font-size: 0.875em;
    }
    .wrapper .guide .dirt .container .description .content figure {
        width: 100%;
        height: 8em;
    }
    .wrapper .guide .dirt .container .description .content figure img {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .wrapper .guide .checkout .container .body p {
        margin: 0;
        font-size: .875em;
    }
    .wrapper .guide .checkout .container figure {
        width: 10em;
        margin: 1em auto;
    }
    .wrapper .guide .exit .container p {
        margin: 0;
        font-size: 0.875em;
    }
    .wrapper .guide .exit .container .box {
        flex-direction: row-reverse;
    }
    .wrapper .guide .exit .container .box figure {
        width: 10em;
        margin: 0 auto;
    }
    .wrapper .guide .exit .container .box .body {
        width: 100%;
    }
    .wrapper .guide .exit .container .box .body h4 {
        font-size: 1em;
    }
    .wrapper .guide .contact {
        padding: 1em 0 5em 0;
    }
    .wrapper .guide .contact .container p {
        font-size: .875em;
    }
    .wrapper .guide .contact .container.body {
        flex-direction: column;
        gap: 2em;
    }
    .wrapper .guide .contact .container.body .contact-info .info-item .tel {
        padding: 0 0 0 2em;
    }
    .wrapper .guide .contact .container .body {
        flex-direction: column;
        gap: 2em;
        margin: 0 0 2em 0;
    }
    .wrapper .guide .contact .container .body .contact-info .info-item {
        margin: 0;
    }
    .wrapper .guide .contact .container .body .contact-info .info-item .tel {
        padding: 0 0 0 2em;
    }
    .wrapper .guide .contact .container .body .contact-info .info-item .tel a {
        font-size: 2.5em;
    }
    .wrapper .guide .contact .container .body .contact-info .info-item .tel::before {
        width: 2em;
        height: 2em ;
        top: 52%;
        left: -.1875em;
    }
    .wrapper .guide .contact .container .body .contact-info .info-item .hour {
        font-size: 1em;
    }
    .wrapper .guide .contact .container .body .emergency-contact-info .info-item {
        gap: 0;
        margin: .5em auto 0;
        width: 18em;
    }
    .wrapper .guide .contact .container .body .emergency-contact-info .sub-title {
        margin: 0;
        text-align: center;
        font-size: 1em;
    }
    .wrapper .guide .contact .container .body .emergency-contact-info .info-item .tel a {
        font-size: 2em;
    }
    .wrapper .guide .contact .container .body .emergency-contact-info p {
        font-size: .875em;
    }
    .wrapper aside {
        display: none;
    }
    .sp_bottom-menu {
        position: fixed;
        bottom: -100px;
        width: 100%;
        background-color: #fff;
        color: var(--text-color);
        text-align: center;
        transition: bottom 0.4s;
        box-shadow: 0 0 .25em rgba(0,0,0,.1);
    }
    [data-scrolled="true"] .sp_bottom-menu {
        bottom: 0;
    }
    .sp_bottom-menu .container {
        display: flex;
    }
    .sp_bottom-menu .container .menu-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 4em;
        background-color: #f1f1f1;
    }
    .sp_bottom-menu .container .menu-btn a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25em;
        padding: 0.85em 0.5em 0.5em;
        color: inherit;
        line-height: 1.3;
        text-decoration: none;
        width: 100%;
    }
    .sp_bottom-menu .container .menu-btn i {
        width: 1.25em;
        height: 1.25em;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .sp_bottom-menu .container .menu-btn span {
        font-size: .625em;
        line-height: 1.25;
    }
    .sp_bottom-menu .container .back-to-top {
        position: static;
        width: 2em;
        background-color: #1a1a1a;
    }
    .sp_bottom-menu .container .back-to-top a {
        padding: 0.5em;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
    }
    .sp_bottom-menu .container .back-to-top a i {
        width: 1.25em;
        height: 1.25em;
        color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .sp_bottom-menu .menu_list {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 6em);
        margin: 0;
        padding: .125em .625em 0;
        list-style-type: none;
        z-index: 1;
    }
    .sp_bottom-menu .menu_list .btn {
        flex: 1 1 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .sp_bottom-menu .menu_list .btn a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25em;
        padding: .75em 0 .5em;
        color: inherit;
        line-height: 1.3;
        text-decoration: none;
    }
    .sp_bottom-menu .menu_list .btn a i::before {
        display: inline-block;
        width: 1.25em;
        color: inherit;
    }
    .sp_bottom-menu .menu_list .btn a i::after {
        
    }
    .sp_bottom-menu .menu_list .btn a span {
        font-size: .625em;
        line-height: 1.25;
    }
    .sp_bottom-menu .menu_list li a i {
        width: 1.25em;
        height: 1.25em;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    /* #popup_banner {
        bottom: 8em;
        right: 1em;
        width: 150px;
      } */
}