p, li, dt, dd, table {
  line-break: strict;
}

.whitelily h2,
.whitelily h3,
.whitelily h4 {
  line-height: 1.6;
  font-weight: normal;
}

.whitelily__header {
  width: 100%;
}

.whitelily__savon {
  background: #e0e9ee;
}

.whitelily__top,
.whitelily__detail,
.whitelily__schedule {
  background: #fff;
}

.whitelily__detail__pickup {
  height: 500px;
  padding: 15px;
  background: #f5f3f2;
  overflow-y: auto;
}

.whitelily__detail__pickup p {
  font-size: 14px !important;
}

.whitelily__detail__pickup p + p {
  border-top: 1px solid #79888b;
}

.whitelily__detail__commnets {
  width: 100%;
}

.whitelily__detail__commnet {
  display: flex;
  align-items: center;
}

.whitelily__detail__commnet-right {
  flex-direction: row-reverse;
}

.whitelily__detail__commnet-text {
  position: relative;
}

.whitelily__detail__commnet-left .whitelily__detail__commnet-text {
  background: #dfe1e2;
}

.whitelily__detail__commnet-left .whitelily__detail__commnet-text::before {
  content: '';
  position: absolute;
  top: 50%;
  border-style: solid;
  border-color: transparent transparent #dfe1e2 transparent;
  transform: translateY(-50%) rotate(-90deg);
}

.whitelily__detail__commnet-right .whitelily__detail__commnet-text {
  background: #fff;
  border: 1px solid #b7b0ac;
}

.whitelily__detail__commnet-right .whitelily__detail__commnet-text::before,
.whitelily__detail__commnet-right .whitelily__detail__commnet-text::after {
  content: '';
  position: absolute;
  top: 50%;
  border-style: solid;
  transform: translateY(-50%) rotate(90deg);
}

.whitelily__detail__commnet-right .whitelily__detail__commnet-text::before {
  z-index: 2;
  border-color: transparent transparent #fff transparent;
}

.whitelily__detail__commnet-right .whitelily__detail__commnet-text::after {
  z-index: 1;
  border-color: transparent transparent #b7b0ac transparent;
}

.whitelily__detail__commnet-text.bg-gray {
  color: #fff;
  background: #898989;
}

.whitelily__detail__commnet-text.bg-gray::before {
  border-color: transparent transparent #898989 transparent;
}

.whitelily__detail__commnet-text p {
  line-height: 1.5;
}

.whitelily__detail__text-block {
  padding: 20px 30px;
  border-top: 1px solid #231815;
  border-bottom: 1px solid #231815;
}


@media (min-width: 768px) {
  .pcOnly {
    display: block;
  }
  .spOnly {
    display: none;
  }

  .whitelily h2,
  .whitelily h3,
  .whitelily h4 {
    letter-spacing: 0.2em;
  }

  .whitelily h2 {
    margin-bottom: 30px;
    font-size: 22px;
    line-height: 1.8;
  }

  .whitelily h3 {
    margin-bottom: 25px;
    font-size: 22px;
  }

  .whitelily h4 {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .whitelily p {
    line-height: 1.6;
    font-size: 16px;
  }

  .whitelily__container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
  }

  .whitelily__contents {
    padding: 50px;
  }

  .whitelily__header {
    margin-top: -30px;
    padding-top: 25%;
    background: url('./images/bg_top_pc.jpg') center/cover no-repeat;
  }

  .whitelily__top {
    margin-top: -60px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .whitelily__top .annotation {
    margin-top: 30px;
    font-size: 14px;
  }

  .whitelily__detail {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .whitelily__detail__block {
    display: flex;
    justify-content: space-between;
  }

  .whitelily__instalive > iframe {
    width: 440px;
  }

  .whitelily__detail__text {
    width: calc(100% - 370px - 40px);
  }

  .whitelily__detail__img {
    width: 370px;
  }

  .whitelily__column__link {
    max-width: 510px;
    margin: 50px auto 0;
  }

  .whitelily__detail__separate {
    position: relative;
    height: 4px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .whitelily__detail__separate::after {
    content: '';
    position: absolute;
    left: -50px;
    width: calc(100% + 100px);
    height: 4px;
    background: #eee;
  }

  .whitelily__detail__items {
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .whitelily__detail__items-2col .whitelily__detail__item {
    width: calc(100% / 2);
  }

  .whitelily__detail__items-2col .whitelily__detail__item:nth-of-type(2) .whitelily__detail__pickup {
    margin-left: 30px;
  }

  .whitelily__detail__item {
    width: calc(100% / 2 - 30px);
  }

  .whitelily__detail__pickup-hdg {
    position: absolute;
    top: 400px;
    left: 0;
    right: 0;
    font-size: 28px !important;
    text-align: center;
  }

  .whitelily__detail__pickup {
    width: calc(100% - 30px);
    margin-top: 100px;
  }

  .whitelily__detail__pickup p + p {
    margin-top: 20px;
    padding-top: 20px;
  }

  .whitelily__instalive {
    margin-bottom: 30px;
  }

  .whitelily__detail__commnets {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .whitelily__detail__commnets li + li {
    margin-top: 20px;
  }

  .whitelily__detail__commnet-img {
    width: 100px;
  }

  .whitelily__detail__commnet-text {
    max-width: 620px;
    padding: 15px 20px;
  }

  .whitelily__detail__commnet-left .whitelily__detail__commnet-text {
    margin-left: 40px;
  }

  .whitelily__detail__commnet-right .whitelily__detail__commnet-text {
    margin-right: 40px;
  }

  .whitelily__detail__commnet-left .whitelily__detail__commnet-text::before,
  .whitelily__detail__commnet-right .whitelily__detail__commnet-text::before,
  .whitelily__detail__commnet-right .whitelily__detail__commnet-text::after {
    border-width: 25px 10px;
  }

  .whitelily__detail__commnet-left .whitelily__detail__commnet-text::before {
    left: -35px;
  }

  .whitelily__detail__commnet-right .whitelily__detail__commnet-text::before {
    right: -34px;
  }

  .whitelily__detail__commnet-right .whitelily__detail__commnet-text::after {
    right: -36px;
  }

  .whitelily__detail__text-block {
    padding: 20px 30px;
  }

  .whitelily__schedule {
    padding-top: 0;
  }
  .whitelily__schedule__date {
    margin-top: 20px;
  }
}


@media (max-width: 767px) {
  .pcOnly {
    display: none;
  }
  .spOnly {
    display: block;
  }

  .whitelily h2,
  .whitelily h3 {
    margin-bottom: 1em;
    font-size: 20px;
    letter-spacing: 0.1em;
  }

  .whitelily h4 {
    margin-bottom: 1em;
    font-size: 16px;
    letter-spacing: 0.2em;
  }

  .whitelily p {
    line-height: 1.6;
    font-size: 16px;
  }

  .whitelily__contents {
    padding: 10% 5%;
  }

  .whitelily__header {
    padding-top: 117%;
    background: url('./images/bg_top_sp.jpg') center/cover no-repeat;
  }

  .whitelily__top .annotation {
    margin-top: 20px;
    font-size: 14px;
  }

  .whitelily__detail {
    padding: 10% 5%;
  }

  .whitelily__column__link {
    margin-top: 30px;
  }

  .whitelily__detail__separate {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .whitelily__detail__pickup-hdg {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
  }

  .whitelily__detail__pickup p {
    line-height: 1.5;
  }

  .whitelily__detail__pickup p + p {
    margin-top: 10px;
    padding-top: 10px;
  }

  .whitelily__detail__item + .whitelily__detail__item {
    margin-top: 30px;
  }

  .whitelily__instalive {
    margin-bottom: 30px;
    padding-left: 5%;
    padding-right: 5%;
  }

  .whitelily__instalive > iframe {
    width: 100%;
  }

  .whitelily__instalive > iframe + iframe {
    margin-top: 10px;
  }

  .whitelily__detail__commnets {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .whitelily__detail__commnets li + li {
    margin-top: 20px;
  }

  .whitelily__detail__commnet-img {
    width: 50px;
  }

  .whitelily__detail__commnet-text {
    max-width: calc(100% - 70px);
    padding: 10px;
  }

  .whitelily__detail__commnet-text p {
    font-size: 14px;
  }

  .whitelily__detail__commnet-left .whitelily__detail__commnet-text {
    margin-left: 20px;
  }

  .whitelily__detail__commnet-right .whitelily__detail__commnet-text {
    margin-right: 20px;
  }

  .whitelily__detail__commnet-left .whitelily__detail__commnet-text::before,
  .whitelily__detail__commnet-right .whitelily__detail__commnet-text::before,
  .whitelily__detail__commnet-right .whitelily__detail__commnet-text::after {
    border-width: 15px 10px;
  }

  .whitelily__detail__commnet-left .whitelily__detail__commnet-text::before {
    left: -25px;
  }

  .whitelily__detail__commnet-right .whitelily__detail__commnet-text::before {
    right: -24px;
  }

  .whitelily__detail__commnet-right .whitelily__detail__commnet-text::after {
    right: -26px;
  }

  .whitelily__detail__text-block {
    padding: 15px 20px;
  }

  .whitelily__schedule {
    padding-top: 0;
  }

  .whitelily__schedule__date {
    margin-top: 30px;
  }
}