@charset "UTF-8";


/* ───────── 
  #about - プレイについて
───────── */
.play-wrap{
    display: flex;
    flex-direction: column;
    gap:20px;
}

.play-wrap .list-nomal{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
.play-wrap .list-nomal li{
  font-weight: 500;
}

@media (min-width: 481px) { /*PC*/
.play-wrap .list-nomal li{
  width: calc((100% - 10px) / 2);
}
.note{
  text-align: right;
}
}

/*粘膜接触なしについて*/
.mucus-info{
    display: flex;
    flex-direction: column;
    gap:10px;
}
.mucus-ok {
  border:solid 1px #fc8e83;
  background: #fff6f8;
}
.mucus-ok h3{
  color: #fc8e83;
}
.mucus-ok .material-icons-round{
  color: #fc8e83;
}
.mucus-ok .list-nomal li{
  padding-left: 1.2em;
}
.mucus-ok .list-nomal li::before{
  content: '○';
  color: var(--color-pink);
}
.mucus-ng {
  border:solid 1px var(--color-gray);
  background: #f4f1f1;
}
.mucus-ng .material-icons-round{
  color: var(--color-gray);
}
.mucus-ng h3{
  color: var(--color-gray);
}
.mucus-ng .list-nomal li::before{
  content: '×';
}

@media (max-width: 480px) { /*SP*/
.mucus-ok .list-nomal,
.mucus-ng .list-nomal{
  flex-direction: column;
}
}



/* ───────── 
  #course - 特設コース
───────── */
.course-wrap{
  display: flex;
  flex-direction: column;
  gap:20px;
}
.course-box{
  display: flex;
  flex-direction: column;
  gap:10px;
}





/* ───────── 
  #option - プレイオプション
───────── */
.playoption-wrap{
  display: flex;
  flex-direction: column;
  gap:20px;
}
.playoption-list{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap:15px;
}
.opbox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 15px;
  background: var(--color-bggray);
  border-radius: 5px;
}
.opbox .op-item{
  color: var(--color-mid);
  font-weight: 500;
  width: calc(100% - 6em);
}
.opbox .op-price{
  padding: 5px 0;
  width: 6em;
  text-align: right;
  font-weight: 500;
}
.opbox .op-price .note{
  display: inline-block;
  line-height: 1.4;
  padding-top: 5px;
}

#info-photomovie.box-callout-icon div{
  display: flex;
  flex-direction: column;
  gap:10px;
}

@media (min-width: 481px) { /*PC*/
.playoption-list{
  flex-direction: row;
}
.opbox{
  width: calc((100% - 15px) / 2);
}
}