@charset "utf-8";

/* ────────────────────── *
 *                                              *
 * コンテンツ                                   *
 *                                              *
 * ────────────────────── */

#contents {
    padding: 6.0rem 0;
    position: relative;
}
#contents .inner {
    background: #fff;
    width: 120.0rem;
    padding: 7.0rem 8.0rem 6.0rem;
    margin: 0 auto;
    border-radius: 1.0rem;
    box-sizing: border-box;
}
#contents .inner h1 {
    font-size: 3.0rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 1.5rem;
    margin: 0 auto 11.0rem;
    position: relative;
}
#contents .inner h1::after {
    content: "";
    background: url("../../image/common/bg-head.png") no-repeat center center / cover;
    width: 23.0rem;
    height: 1.4rem;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
}
#contents .inner h2 {
    font-size: 3.0rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 2.0rem;
    margin: 0 auto 6.0rem;
    position: relative;
}
#contents .inner h2::after {
    content: "";
    background: url("../../about/image/bg-subhead.png") repeat-x left center / auto 0.2rem;
    width: 44.8rem;
    height: 0.2rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
p#mainvisual {
    width: 80.0rem;
    margin: 0 auto 9.0rem;
    position: relative;
}
p#mainvisual::after {
    content: "";
    background: url("../../about/image/illust-mainvisual.png") no-repeat center center / cover;
    width: 104.0rem;
    height: 42.4rem;
    position: absolute;
    left: 50%;
    top: -2.0rem;
    transform: translateX(-50%);
    pointer-events: none;
}
#contents .inner table.outline {
    font-size: 1.8rem;
    line-height: 2;
    width: 87.0rem;
    margin: 0 auto 16.0rem;
    border-spacing: 0;
    border-collapse: collapse;
    border-top: 0.2rem solid #f08c8b;
    border-left: 0.2rem solid #f08c8b;
}
#contents .inner table.outline th {
    font-weight: 700;
    background: #fae9df;
    text-align: left;
    width: 18.0rem;
    padding: 1.5rem 2.0rem;
    border-bottom: 0.2rem solid #f08c8b;
    border-right: 0.2rem solid #f08c8b;
}
#contents .inner table.outline td {
    padding: 1.5rem 2.0rem;
    border-bottom: 0.2rem solid #f08c8b;
    border-right: 0.2rem solid #f08c8b;
}
#contents .inner table.outline td span.notice {
    font-size: 1.4rem;
    line-height: 1.7;
    display: block;
}
#contents .inner table.outline td ul#capacity {
    line-height: 1.8;
    margin-top: 3.0rem;
}
#contents .inner #personnel {
    width: 100.0rem;
    margin: 0 auto 11.0rem;
    position: relative;
}
#contents .inner #personnel::after {
    content: "";
    background: url("../../about/image/image-personnel.jpg") no-repeat center center / cover;
    width: 33.6rem;
    height: 52.4rem;
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
}
#contents .inner #personnel table {
    font-size: 1.8rem;
    line-height: 2;
    width: 60.0rem;
    margin-bottom: 2.0rem;
    border-spacing: 0;
    border-collapse: collapse;
    border-top: 0.2rem solid #f08c8b;
    border-left: 0.2rem solid #f08c8b;
}
#contents .inner #personnel table th {
    font-weight: 700;
    background: #fae9df;
    text-align: center;
    vertical-align: middle;
    padding: 1.0rem 2.0rem;
    border-bottom: 0.2rem solid #f08c8b;
    border-right: 0.2rem solid #f08c8b;
}
#contents .inner #personnel table td {
    text-align: center;
    vertical-align: middle;
    padding: 1.0rem;
    border-bottom: 0.2rem solid #f08c8b;
    border-right: 0.2rem solid #f08c8b;
}
#contents .inner #personnel table td.cell-01 {
    font-weight: 700;
    width: 6.0rem;
}
#contents .inner #personnel table td.cell-02 {
    font-weight: 700;
    width: 8.0rem;
}
#contents .inner #personnel table td span.indent {
    text-indent: -0.5em;
    display: inline-block;
}
#contents .inner #personnel p.notice {
    font-size: 1.8rem;
}
#contents .inner p.txt-photo {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin: 0 auto 5.0rem;
}
#contents .inner ol#floor {
    padding-bottom: 18.0rem;
    position: relative;
}
#contents .inner ol#floor::after {
    content: "";
    background: url("../../about/image/illust-floor.png") no-repeat center center / cover;
    width: 34.0rem;
    height: 19.4rem;
    position: absolute;
    left: 0;
    bottom: 0;
}
#contents .inner ol#floor > li {
    position: relative;
}
#contents .inner ol#floor > li:nth-child(1) {
    margin-bottom: 5.0rem;
}
#contents .inner ol#floor > li ul.spot li {
    position: absolute;
    transform: perspective(1px) translateZ(0);
}
#contents .inner ol#floor > li ul.spot li:hover,
#contents .inner ol#floor > li ul.spot li:focus,
#contents .inner ol#floor > li ul.spot li:active {
    animation-name: hvr-hang-sink, hvr-hang;
    animation-duration: .3s, 1.5s;
    animation-delay: 0s, .3s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards;
    animation-direction: normal, alternate;
}
@keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
#contents .inner ol#floor > li ul.spot li#spot-01 {
    width: 8.0rem;
    left: 71.0rem;
    top: -0.4rem;
}
#contents .inner ol#floor > li ul.spot li#spot-02 {
    width: 9.0rem;
    left: 8.8rem;
    top: 26.0rem;
}
#contents .inner ol#floor > li ul.spot li#spot-03 {
    width: 12.0rem;
    left: 40.4rem;
    top: 16.6rem;
}
#contents .inner ol#floor > li ul.spot li#spot-04 {
    width: 9.0rem;
    left: 74.0rem;
    top: 17.5rem;
}
#contents .inner ol#floor > li ul.spot li#spot-05 {
    width: 9.0rem;
    left: 26.4rem;
    top: 15.4rem;
}
#contents .inner ol#floor > li ul.spot li#spot-06 {
    width: 9.0rem;
    left: 45.4rem;
    top: 7.4rem;
}
#contents .inner ol#floor > li ul.spot li#spot-07 {
    width: 12.0rem;
    left: 67.2rem;
    top: 20.8rem;
}

.modal {
    display: none;
}
.modaal-container {
    max-width: 96.0rem;
}
.modaal-content-container {
    padding: 3.0rem;
}
.modaal-content-container p.image {
    margin-bottom: 2.0rem;
}
.modaal-content-container p.spot {
    font-size: 2.6rem;
    font-weight: 700;
    text-align: center;
}