.main_wrap {
  max-width: inherit;
  width: 100%;
  background: url("https://corporate.piano.or.jp/assets/img/ptnayroom_bk.webp");
}
hr.nikukyu {
  border: 0;
  height: 20px;
  background: url(https://corporate.piano.or.jp/assets/img/ptnayroom_nikukyu.svg) center repeat-x;
  background-size: contain;
  margin: 2rem auto;
  max-width: 820px;
}
.container {
  --maincolor: #9a5858;
  padding: 40px;
  & section {
    margin-bottom: 2rem;
  }
}
@media screen and (max-width:767px) {
  .container {
    padding: 6vw 5vw
  }
}
/**/
.heading_1 {
  margin: 2em 0 1em;
  background: var(--maincolor);
  color: #fff;
  font-size: 1.25rem;
  padding: .5rem;
}
.heading_3 {
  color: var(--maincolor);
}
@media screen and (max-width:767px) {
  .heading_1 {
    font-size: 4.25vw;
  }
}
/**/
.box_fff {
  border: 0;
  background: rgba(255, 255, 255, .8);
}
/*menu*/
.menu_wrap {
  max-width: 900px;
  margin: 0 auto 2rem;
}
.menu_item {
  display: block;
  background: var(--maincolor);
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 20px;
  font-size: 1.2rem;
  padding: .5rem;
  margin: 0 .25em .5em;
  position: relative;
  &:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(254, 88, 88, .6);
    &:after {
      content: '';
      display: block;
      width: 1.5rem;
      aspect-ratio: 19/15;
      object-fit: contain;
      background: url(https://corporate.piano.or.jp/assets/img/ptnayroom_nikukyu.svg) center no-repeat;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &:visited {
    color: #fff;
  }
}
@media screen and (max-width:767px) {
  .menu_item {
    font-size: 4vw;
  }
}
/*prf*/
.prf_wrap {
  max-width: 800px;
  margin: 0 auto 2rem;
}
.box_prf {
  padding: 1.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .8);
  box-sizing: border-box;
  & img {
    aspect-ratio: 1/1;
    object-fit: contain;
    background: #fff;
    padding: 1rem;
    margin: 0 0 1rem;
    box-sizing: border-box;
  }
  & dl {
    font-size: .9rem;
    margin-bottom: 1rem;
  }
  & dt {
    background: var(--maincolor);
    color: #fff;
    float: left;
    width: 4.5em;
    font-size: 90%;
    text-align: center;
    border-radius: 10px;
  }
  & dd {
    margin: 0 0 .5em 5em;
    font-weight: bold;
  }
}
.name {
  font-weight: bold;
  text-align: center;
  color: var(--maincolor);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
/*mainpin*/
.mainpic {
  aspect-ratio: 1000/500;
  position: relative;
  max-width:1200px;
  margin:0 auto 2rem;
  & a img:hover {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
  }
}
[class^="mainpic_item_"] {
  position: absolute;
  transition: .3s;
  &:hover {
    border-radius: 10px;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5))
  }
  & img {
    &:hover {
      filter: opacity(1);
    }
  }
}
.mainpic_item_picture {
  width: 10.8%;
  left: 6%;
  top: 3%;
  & ul {
    position: relative;
    aspect-ratio: 215/328;
    & li {
      position: absolute;
    }
    & li:first-child {
      top: 27%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 98%;
      border-radius: 10px;
    }
  }
}
.mainpic_item_window {
  width: 19.1%;
  left: 22%;
  top: 0%;
}
.mainpic_item_hondana {
  width: 21.7%;
  left: 47%;
  top: 1%;
}
.mainpic_item_door {
  width: 23.8%;
  left: 71%;
  top: 3%;
}
.mainpic_item_ptnyan {
  width: 44%;
  left: 10.9%;
  top: 15%;
  animation: fluffy1 3s infinite;
}
.mainpic_item_sofa {
  width: 30.9%;
  left: 50%;
  top: 40%;
  animation: fluffy2 3s infinite;
  &:hover {
    animation: none;
  }
}
@media screen and (max-width:767px) {
  .mainpic {
    aspect-ratio: 1000/1000;
  }
  .mainpic_item_picture {
    width: 18%;
    left: .8%;
    top: .6%;
    & ul {
      position: relative;
      aspect-ratio: 215/328;
      & li {
        position: absolute;
      }
      & li:first-child {
        top: 27%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 98%;
        border-radius: 10px;
      }
    }
  }
  .mainpic_item_window {
    width: 31.8%;
    left: 26%;
    top: 0.7%;
  }
  .mainpic_item_hondana {
    width: 33.8%;
    left: 64%;
    top: 0.26%;
  }
  .mainpic_item_door {
    display: none;
  }
  .mainpic_item_ptnyan {
    width: 67%;
    left: 0.6%;
    top: 24.84%;
    animation: fluffy1 3s infinite;
    &:hover {
      animation: none;
    }
  }
  .mainpic_item_sofa {
    width: 48%;
    left: 50%;
    top: 50%;
    animation: fluffy2 3s infinite;
    &:hover {
      animation: none;
    }
  }
}
.flicker-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  border-radius: 10px;
}
.flicker-image.active {
  opacity: 1;
}
@keyframes fluffy1 {
  0%, 100% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-3px)
  }
}
@keyframes fluffy2 {
  0%, 100% {
    transform: translateY(-3px)
  }
  50% {
    transform: translateY(-0)
  }
}
@keyframes blinking {
  0% {
    opacity: .8
  }
  100% {
    opacity: 1
  }
}
/**/
.calendar_wrap {
  max-width: 800px;
  margin: 0 auto 2rem;
  & summary {
    cursor: pointer;
  }
}