@charset "UTF-8";
:root {
  --gradation: linear-gradient(to right, #635442, #6D5E4A, #88785F, #B5A483, #C9B893, #A29174, #7F7058, #6A5B48, #635442);
}

/*-----------------------------------------
  common
-----------------------------------------*/
#themytol-mask {
  width: 1000px;
  max-width: 100%;
  margin: 10.667vw 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.875;
  color: #635443;
  border: none;
}
#themytol-mask h1,
#themytol-mask h2,
#themytol-mask h3,
#themytol-mask h4 {
  padding: 0;
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}
#themytol-mask a {
  color: inherit;
  transition: all .3s;
}
#themytol-mask a:hover,
#themytol-mask a:focus {
  text-decoration: none;
  opacity: 0.8;
}
#themytol-mask img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#themytol-mask sup {
  font-size: 0.6em;
  vertical-align: super;
}
#themytol-mask .inner {
  position: relative;
  padding: 0 min(40px,calc(40 / 430 * 100vw));
  z-index: 1;
}
#themytol-mask .title {
  position: relative;
  margin: 0 0 38px;
  text-align: center;
}
#themytol-mask .notice {
  margin: 7px 0 0;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
#themytol-mask .bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 816px;
  pointer-events: none;
}
#themytol-mask .bubble > *{
  position: absolute;
}
#themytol-mask .bubble01 {
  top: -25px;
  right: -70px;
  width: 210px;
}
#themytol-mask .bubble02 {
  top: 90px;
  left: -80px;
  width: 210px;
}
#themytol-mask .bubble03 {
  top: 380px;
  left: 5px;
  width: 90px;
}
#themytol-mask .bubble04 {
  top: 365px;
  left: 108px;
  width: 170px;
}
#themytol-mask .bubble05 {
  top: 500px;
  left: 35px;
  width: 140px;
}
#themytol-mask .bubble06 {
  top: 512px;
  right: -20px;
  width: 140px;
}
#themytol-mask .bubble07 {
  bottom: -10px;
  left: 15px;
  width: 90px;
}
#themytol-mask .bubble08 {
  bottom: -50px;
  left: 134px;
  width: 210px;
}
@media only screen and (min-width: 750px) {
  #themytol-mask .for-sp {
    display: none;
  }
  #themytol-mask {
    margin: 80px auto;
    font-size: 18px;
    line-height: 2.222;
  }
  #themytol-mask .inner {
    padding: 0 80px;
  }
  #themytol-mask .title {
    position: relative;
    margin: 0 0 38px;
    text-align: center;
  }
  #themytol-mask .notice {
    margin: 10px 0 0;
    font-size: 10px;
    text-align: right;
  }
}
@media only screen and (max-width: 749px) {
  #themytol-mask .for-pc {
    display: none;
  }
}

/*-----------------------------------------
  animation
-----------------------------------------*/
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.js-anime.is-slideIn {
  opacity: 0;
  transform: translateY(30px);
}
.js-anime.is-slideIn.active {
  animation: slideIn 0.6s ease-in forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.js-anime.is-fadeIn {
  opacity: 0;
}
.js-anime.is-fadeIn.active {
  animation: fadeIn 0.4s ease-in forwards;
}

@keyframes bubble {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(50px);
  }
}
.js-anime.is-bubble.is-floating {
  animation: bubble 2s ease-in-out infinite alternate;
}
.js-anime.is-bubble.bubble01.is-floating {
  animation-duration: 1.4s;
}
.js-anime.is-bubble.bubble02.is-floating {
  animation-duration: 1.6s;
}
.js-anime.is-bubble.bubble03.is-floating {
  animation-duration: 1.8s;
}
.js-anime.is-bubble.bubble04.is-floating {
  animation-duration: 2s;
}
.js-anime.is-bubble.bubble05.is-floating {
  animation-duration: 1.4s;
}
.js-anime.is-bubble.bubble06.is-floating {
  animation-duration: 1.6s;
}
.js-anime.is-bubble.bubble07.is-floating {
  animation-duration: 1.8s;
}
.js-anime.is-bubble.bubble08.is-floating {
  animation-duration: 2s;
}

/*-----------------------------------------
  about
-----------------------------------------*/
#themytol-mask .sec-about {
  position: relative;
  padding: 60px 0 326px;
  background: url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_about.jpg) no-repeat center bottom / 100%;
}
#themytol-mask .sec-about .about-comment {
  position: relative;
  width: fit-content;
  margin: 95px 0 0;
  padding: 13px 16px;
  letter-spacing: 0.04em;
}
#themytol-mask .sec-about .about-comment::before,
#themytol-mask .sec-about .about-comment::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 16px;
  border-top: 1px solid #DDBD75;
  border-left: 1px solid #DDBD75;
}
#themytol-mask .sec-about .about-comment::after {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  transform: scale(-1,-1);
}
@media only screen and (min-width: 750px) {
  #themytol-mask .sec-about {
    padding: 94px 0 375px;
    background-image: url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_about_pc.jpg);
  }
  #themytol-mask .sec-about .about-lead {
    text-align: center;
  }
  #themytol-mask .sec-about .about-comment {
    margin: 168px 0 0;
    padding: 34px 40px;
    font-size: 22px;
    line-height: 2.18;
  }
  #themytol-mask .sec-about .about-comment::before,
  #themytol-mask .sec-about .about-comment::after {
    width: 60px;
    height: 45px;
  }
  #themytol-mask .sec-about .bubble {
    top: 220px;
    height: 736px;
  }
  #themytol-mask .sec-about .bubble01 {
    top: -13px;
    right: -90px;
  }
  #themytol-mask .sec-about .bubble02 {
    top: -40px;
    left: 0;
  }
  #themytol-mask .sec-about .bubble03 {
    top: 65px;
    left: 49%;
  }
  #themytol-mask .sec-about .bubble04 {
    top: 465px;
    left: auto;
    right: -80px;
  }
  #themytol-mask .sec-about .bubble05 {
    top: 375px;
    left: 26%;
  }
  #themytol-mask .sec-about .bubble06 {
    top: 270px;
    right: 40px;
  }
  #themytol-mask .sec-about .bubble07 {
    bottom: 170px;
    left: 30px;
  }
  #themytol-mask .sec-about .bubble08 {
    bottom: 40px;
    left: 40%;
  }
}

/*-----------------------------------------
  point
-----------------------------------------*/
#themytol-mask .sec-point .title {
  padding: 0 0 16px;
}
#themytol-mask .sec-point .title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 1px;
  margin: auto;
  background:var(--gradation);
}
#themytol-mask .sec-point .title img {
  width: 101px;
}
#themytol-mask .sec-point .point-subtitle {
  font-weight: 600;
  font-size: min(22px,calc(22 / 430 * 100vw));
  letter-spacing: 0.04em;
  line-height: 1.81;
  text-align: center;
}
#themytol-mask .sec-point .point-subtitle + .point-text {
  margin: 16px 0 0;
  text-align: center;
}
#themytol-mask .sec-point .point01 {
  padding: 82px 0 60px;
}
#themytol-mask .sec-point .point01 .point-list {
  display: flex;
  flex-direction: column;
  margin: 40px 0 0;
}
#themytol-mask .sec-point .point01 .point-list > li {
  position: relative;
  padding: 196px 0 0;
  z-index: 1;
}
#themytol-mask .sec-point .point01 .point-list-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#themytol-mask .sec-point .point01 .point-list-title {
  width: fit-content;
  margin: 0 0 0 auto;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
}
#themytol-mask .sec-point .point01 .point-list-title span {
  display: block;
  margin: 5px 0 0;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
}
#themytol-mask .sec-point .point01 .point-list-text {
  margin: 24px 0 0;
}
#themytol-mask .sec-point .point01 .notice {
  margin: 16px 0 0;
  padding: 0 10px;
  text-align: right;
}
#themytol-mask .sec-point .point02 {
  padding: 70px 0;
  background: #f9fcff url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_point02.jpg) no-repeat center top / 100% 750px;
}
#themytol-mask .sec-point .point02 .point-list-title {
  margin: 35px 0 0;
  padding: 10px 0;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.666;
  text-align: center;
  color: #fff;
  background: var(--gradation);
}
#themytol-mask .sec-point .point02 .point-list-text {
  margin: 20px 0 0;
}
#themytol-mask .sec-point .point02 .point-list-flex {
  display: flex;
  gap: 32px;
  margin: 0 -40px 0 0;
}
#themytol-mask .sec-point .point02 .point-list-img {
  margin: 24px 0 0;
}
#themytol-mask .sec-point .point02 .point-list-flex .point-list-text {
  flex: 1;
  font-size: min(16px,calc(16 / 430 * 100vw));
}
#themytol-mask .sec-point .point02 .point-list-flex .point-list-img {
  margin-top: 0;
}
#themytol-mask .sec-point .point02 .point-list-gif {
  width: 48.5%;
  margin: 24px 0 0;
}
#themytol-mask .sec-point .point02 .point-movie {
  margin: 30px 0 -35px;
  padding: 20px 0 40px;
  text-align: center;
  background: #f2f7fd;
}
#themytol-mask .sec-point .point02 .point-movie a {
  display: block;
  margin: 6px 0 0;
  padding: 10px;
  background: #234061;
}
#themytol-mask .sec-point .point02 .point-movie-title {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
#themytol-mask .sec-point .point03 {
  position: relative;
  padding: 70px 0 0;
  background: url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_point03.jpg) no-repeat center top / 100% 932px;
}
#themytol-mask .sec-point .point03 .bubble {
  top: -40px;
}
#themytol-mask .sec-point .point03 .point-list-title {
  margin: 40px 0 24px;
  padding: 16px 0;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.666;
  text-align: center;
  color: #fff;
  background: var(--gradation);
}
#themytol-mask .sec-point .point03 .point-list-text {
  margin: 22px 0 0;
}
#themytol-mask .sec-point .point03 .point-list-img {
  margin: 10px -40px 0;
}
#themytol-mask .sec-point .point03 .point-img {
  margin: 20px 0 0;
}
#themytol-mask .sec-point .point03 li:has(.point-list-ekisu) .point-list-title {
  margin-top: 0;
}
#themytol-mask .sec-point .point03 .point-list-flex {
  position: relative;
}
#themytol-mask .sec-point .point03 .point-list-flex .notice {
  position: absolute;
  bottom: 0;
  right: 0;
}
#themytol-mask .sec-point .point03 .point-list-ekisu {
  display: flex;
  flex-wrap: wrap;
  gap: 21px 16px;
}
#themytol-mask .sec-point .point03 .point-list-ekisu > li {
  width: calc((100% - 16px)/2);
}
#themytol-mask .sec-point .point03 .point-list-ekisu-name {
  margin: 14px 0 0;
  font-weight: 600;
}
#themytol-mask .sec-point .point03 .point-list-ekisu-text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.714;
}
#themytol-mask .sec-point .point03 .point-list-ekisu + .notice {
  text-align: right;
}
#themytol-mask .sec-point .point03 .point-free {
  margin: 44px 0 0;
  padding: 50px 0 46px;
  background: url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_point03_mask.jpg) no-repeat right top / cover;
}
#themytol-mask .sec-point .point03 .point-free-title {
  margin: 0 -20px 0 0;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
}
#themytol-mask .sec-point .point03 .point-free-list {
  width: 264px;
  margin: 35px 0 0 -20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
#themytol-mask .sec-point .point03 .point-free-list li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(120px,calc(120 / 430 * 100vw));
  height: min(120px,calc(120 / 430 * 100vw));
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.285;
  text-align: center;
  border: 1px solid #635443;
  border-radius: 50%;
}
#themytol-mask .sec-point .point03 .point-free-list li::before,
#themytol-mask .sec-point .point03 .point-free-list li::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 1px;
  background-color: #635443;
  transform: rotate(-45deg);
}
#themytol-mask .sec-point .point03 .point-free-list li::before {
  top: 20px;
  right: -10px;
}
#themytol-mask .sec-point .point03 .point-free-list li::after {
  bottom: 20px;
  left: -10px;
}
#themytol-mask .sec-point .point03 .point-free-list li:has(br)::before,
#themytol-mask .sec-point .point03 .point-free-list li:has(br)::after {
  width: 50px;
}
#themytol-mask .sec-point .point03 .point-free-list li:has(br)::before {
  top: 20px;
  right: -5px;
}
#themytol-mask .sec-point .point03 .point-free-list li:has(br)::after {
  bottom: 20px;
  left: -5px;
}
#themytol-mask .sec-point .point03 .point-free-text {
  margin: 37px 0 0;
  text-align: center;
}
@media only screen and (max-width: 749px) {
  #themytol-mask .sec-point .point01 .point-list > li:nth-child(2) {
    padding-top: 154px;
  }
  #themytol-mask .sec-point .point01 .point-list > li:nth-child(2) .point-list-title {
    margin: 0;
  }
}
@media only screen and (min-width: 750px) {
  #themytol-mask .sec-point .title::after {
    width: 135px;
  }
  #themytol-mask .sec-point .title img {
    width: 137px;
  }
  #themytol-mask .sec-point .point-subtitle {
    font-size: 28px;
    line-height: 1.78;
  }
  #themytol-mask .sec-point .point-subtitle + .point-text {
    margin: 34px 0 0;
  }
  #themytol-mask .sec-point .point01 {
    padding: 0 0 100px;
  }
  #themytol-mask .sec-point .point01 .point-list {
    flex-direction: row;
    margin: 0;
    overflow: hidden;
  }
  #themytol-mask .sec-point .point01 .point-list > li {
    flex: 1;
    padding: 200px 0 0;
  }
  #themytol-mask .sec-point .point01 .point-list-bg {
    top: -32px;
  }
  #themytol-mask .sec-point .point01 .point-list-title {
    margin: 0;
  }
  #themytol-mask .sec-point .point01 .point-list-text {
    font-size: 16px;
    line-height: 1.875;
  }
  #themytol-mask .sec-point .point01 .notice {
    margin: 20px 0 0;
    padding: 0 80px 0 0;
  }
  #themytol-mask .sec-point .point02 {
    padding: 86px 0 70px;
    text-align: center;
    background-image: url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_point02_pc.jpg);
    background-size: 100% 820px;
  }
  #themytol-mask .sec-point .point02 .point-list-title {
    margin: 50px 0 0;
    padding: 23px 0;
    font-size: 20px;
  }
  #themytol-mask .sec-point .point02 .point-list-flex {
    align-items: center;
    gap: 80px;
    margin: 0 -80px 0 0;
  }
  #themytol-mask .sec-point .point02 .point-list-flex .point-list-text {
    text-align: left;
  }
  #themytol-mask .sec-point .point02 .point-list-flex .point-list-img {
    margin-top: 40px;
    background: none;
  }
  #themytol-mask .sec-point .point02 .point-list-img {
    margin: 40px 0 0;
    padding: 18px 0;
    background: #fff;
  }
  #themytol-mask .sec-point .point02 .point-list-img img {
    width: 460px;
  }
  #themytol-mask .sec-point .point02 .point-list-gif {
    width: 400px;
    margin: 40px 0 0;
  }
  #themytol-mask .sec-point .point02 .point-movie {
    margin: 50px 0 -50px;
    padding: 64px 0;
  }
  #themytol-mask .sec-point .point02 .point-movie a {
    width: fit-content;
    margin: 10px auto 0;
    padding: 15px 25px;
  }
  #themytol-mask .sec-point .point02 .point-movie-title {
    font-size: 16px;
  }
  #themytol-mask .sec-point .point02 .point-movie-thumb img {
    max-width: 600px;
  }
  #themytol-mask .sec-point .point03 {
    padding: 88px 0 0;
    background-image: url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_point03_pc.jpg);
    background-size: 100% 810px;
  }
  #themytol-mask .sec-point .point03 .bubble {
    top: 60px;
    height: 1270px;
  }
  #themytol-mask .sec-point .point03 .bubble01 {
    top: -40px;
    right: -15px;
  }
  #themytol-mask .sec-point .point03 .bubble02 {
    top: 265px;
    left: 8px;
  }
  #themytol-mask .sec-point .point03 .bubble03 {
    top: 20px;
    left: 170px;
  }
  #themytol-mask .sec-point .point03 .bubble04 {
    top: auto;
    left: 0;
    bottom: -40px;
  }
  #themytol-mask .sec-point .point03 .bubble05 {
    top: 695px;
    left: 20px;
  }
  #themytol-mask .sec-point .point03 .bubble06 {
    top: auto;
    right: 70px;
    bottom: 50px;
  }
  #themytol-mask .sec-point .point03 .bubble07 {
    bottom: auto;
    left: 59%;
    top: 645px;
  }
  #themytol-mask .sec-point .point03 .bubble08 {
    bottom: auto;
    left: auto;
    top: 255px;
    right: -5px;
  }
  #themytol-mask .sec-point .point03 .point-list-title {
    margin: 50px 0 40px;
    padding: 23px 0;
    font-size: 20px;
  }
  #themytol-mask .sec-point .point03 .point-list-text {
    margin: 40px 0 0;
  }
  #themytol-mask .sec-point .point03 .point-list-img {
    margin: 0;
  }
  #themytol-mask .sec-point .point03 .point-img {
    margin: 40px 0 0;
    padding: 40px 0;
    text-align: center;
    background: #f9fcff;
  }
  #themytol-mask .sec-point .point03 .point-list-flex {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #themytol-mask .sec-point .point03 .point-list-flex > * {
    flex: 1;
    margin: 0;
  }
  #themytol-mask .sec-point .point03 .point-list-ekisu {
    gap: 40px;
  }
  #themytol-mask .sec-point .point03 .point-list-ekisu > li {
    width: calc((100% - (40px*3))/4);
  }
  #themytol-mask .sec-point .point03 .point-list-ekisu-name {
    font-size: 16px;
  }
  #themytol-mask .sec-point .point03 .point-free {
    margin: 100px 0 0;
    padding: 70px 0;
    background-image: url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_point03_mask_pc.jpg);
  }
  #themytol-mask .sec-point .point03 .point-free .inner {
    width: fit-content;
    padding: 0 40px;
  }
  #themytol-mask .sec-point .point03 .point-free-title {
    margin: 0;
    font-size: 28px;
  }
  #themytol-mask .sec-point .point03 .point-free-list {
    width: auto;
    margin: 50px 0 0 0;
  }
  #themytol-mask .sec-point .point03 .point-free-text {
    margin: 40px 0 0;
  }
  #themytol-mask .sec-point .point03 .point-free .notice {
    text-align: center;
  }
}

/*-----------------------------------------
  howto
-----------------------------------------*/
#themytol-mask .sec-howto {
  padding: 77px 0;
}
#themytol-mask .sec-howto .title img {
  width: 193px;
}
#themytol-mask .sec-howto .howto-text {
  font-size: min(16px,calc(16 / 430 * 100vw));
  text-align: center;
}
#themytol-mask .sec-howto .howto-list {
  display: flex;
  justify-content: space-between;
  margin: 28px -20px 0;
}
#themytol-mask .sec-howto .howto-list li {
  position: relative;
  width: 70px;
  text-align: center;
}
#themytol-mask .sec-howto .howto-list li.essence,
#themytol-mask .sec-howto .howto-list li.mask {
  width: 92px;
}
#themytol-mask .sec-howto .howto-list li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50px;
  left: -15px;
  width: 8px;
  height: 12px;
  background: #DBD5C6;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#themytol-mask .sec-howto .howto-list-text {
  font-size: 11px;
  line-height: 1.36;
}
#themytol-mask .sec-howto .howto-list-text span {
  display: block;
  width: fit-content;
  margin: 4px auto 0;
  padding: 3px 4px;
  font-size: 9px;
  line-height: 1;
  border: 1px solid #635443;
}
#themytol-mask .sec-howto .howto-list-text small {
  display: block;
  margin: 4px 0 0;
  font-size: 9px;
  white-space: nowrap;
}
#themytol-mask .sec-howto .howto-list-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 117px;
}
@media only screen and (min-width: 750px) {
  #themytol-mask .sec-howto {
    padding: 90px 0 100px;
  }
  #themytol-mask .sec-howto .title img {
    width: 216px;
  }
  #themytol-mask .sec-howto .howto-text {
    font-size: 18px;
  }
  #themytol-mask .sec-howto .howto-list {
    margin: 15px -80px 0;
  }
  #themytol-mask .sec-howto .howto-list li {
    width: auto;
  }
  #themytol-mask .sec-howto .howto-list li.essence {
    width: 205px;
  }
  #themytol-mask .sec-howto .howto-list li.mask {
    width: 233px;
  }
  #themytol-mask .sec-howto .howto-list li:not(:first-child)::before {
    top: 122px;
    left: -50px;
    width: 16px;
    height: 24px;
  }
  #themytol-mask .sec-howto .howto-list-text {
    margin: -15px 0 0;
    font-size: 16px;
    line-height: 1.5;
  }
  #themytol-mask .sec-howto .howto-list-text span {
    margin: 8px auto 0;
    padding: 5px 10px;
    font-size: 12px;
  }
  #themytol-mask .sec-howto .howto-list-text small {
    font-size: 12px;
  }
  #themytol-mask .sec-howto .howto-list-img {
    height: 270px;
  }
}

/*-----------------------------------------
  voice
-----------------------------------------*/
#themytol-mask .sec-voice {
  padding: 68px 0 40px;
  background: url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_voice.jpg) no-repeat center top / cover;
}
#themytol-mask .sec-voice .inner {
  padding: 0 20px;
}
#themytol-mask .sec-voice .title img {
  width: 241px;
}
#themytol-mask .sec-voice .voice-lead {
  text-align: center;
}
#themytol-mask .sec-voice .voice-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 30px 0 0;
}
#themytol-mask .sec-voice .voice-list > li {
  position: relative;
  padding: 36px 40px 40px;
  background: #fff;
}
#themytol-mask .sec-voice .voice-list > li::before,
#themytol-mask .sec-voice .voice-list > li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 40px;
  border-top: 1px solid #DDBD75;
  border-left: 1px solid #DDBD75;
}
#themytol-mask .sec-voice .voice-list > li::after {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
  transform: scale(-1,-1);
}
#themytol-mask .sec-voice .voice-list-title {
  font-weight: 600;
  font-size: min(22px,calc(22 / 430 * 100vw));
  letter-spacing: 0.04em;
  line-height: 1.81;
}
#themytol-mask .sec-voice .voice-list-text {
  margin: 16px 0 0;
}
#themytol-mask .sec-voice .voice-list-user {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
#themytol-mask .sec-voice .voice-list-user-text {
  flex: 1;
  font-size: 12px;
}
#themytol-mask .sec-voice .voice-list-user-text span {
  display: block;
  font-size: 16px;
}
#themytol-mask .sec-voice .voice-list-user-photo {
  width: 96px;
}
#themytol-mask .sec-voice .voice-list > li:nth-child(1) .voice-list-user {
  flex-direction: row-reverse;
}
#themytol-mask .sec-voice .voice-list > li:nth-child(1) .voice-list-user-text {
  text-align: right;
}
@media only screen and (min-width: 750px) {
  #themytol-mask .sec-voice {
    padding: 80px 0;
    background-image: url(/TB/img/usr/goodsdetail/mytol/dryrescue/2604/bg_voice_pc.jpg);
  }
  #themytol-mask .sec-voice .inner {
    padding: 0 40px;
  }
  #themytol-mask .sec-voice .title img {
    width: auto;
  }
  #themytol-mask .sec-voice .voice-list {
    flex-direction: row;
    gap: 40px;
    margin: 30px 0 0;
  }
  #themytol-mask .sec-voice .voice-list > li {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  #themytol-mask .sec-voice .voice-list-text {
    margin: 16px 0 24px;
    font-size: 16px;
    line-height: 1.875;
  }
  #themytol-mask .sec-voice .voice-list-user {
    gap: 20px;
    margin: auto 0 0;
  }
  #themytol-mask .sec-voice .notice {
    margin-top: 38px;
  }
}

/*-----------------------------------------
  全成分表示
-----------------------------------------*/
.trinityline-detail {
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  color: #635443;
}
.trinityline-detail-inner {
  padding: 0;
  border: 0;
}
.trinityline-detail h2 {
  margin: 0 0 24px;
  font-size: 20px;
}
.trinityline-detail-box dl dt {
  font-weight: 700;
  font-size: 13px;
}
.trinityline-detail-box dl dd {
  font-size: 14px;
}
@media only screen and (min-width: 750px) {
  .trinityline-detail h2 {
    margin: 0 0 30px;
  }
  .trinityline-detail-box {
    padding: 0;
  }
  .trinityline-detail-box dl dt {
    width: 120px;
  }
  .trinityline-detail-box dl dd {
    flex: 1;
  }
}