@charset "UTF-8";

/*---------------------------------
トリニティーライン モイスト クリーム
---------------------------------*/
.moist-cream { color: #333;}
.moist-cream  h1,.moist-cream  h2,.moist-cream  h3 { padding: 0; margin: 0; font-weight: normal;}
.moist-cream img { max-width: 100%; height: auto; vertical-align: bottom;}
.moist-cream  sup { font-size: 0.5em; vertical-align: text-top;}
.moist-cream .pink { color: #d83358;}
@media screen and (min-width: 750px) {
  .moist-cream { width: 1000px; margin: 80px auto; border: none;}
  .moist-cream .text { font-size: 20px; letter-spacing: 0.1em; line-height: 2;}
  .moist-cream .notice { display: block; font-size: 14px; letter-spacing: 0.1em; line-height: 1.6;}
  .moist-cream .sec-mv { margin: 0 0 80px;}
  .moist-cream .sec-about { position: relative; margin: 154px 0 80px; padding: 85px 50px 45px; border: 1px solid #d83358; z-index: 1;}
  .moist-cream .sec-about::before { content: ""; position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; border: 1px dotted #d83358; z-index: -1;}
  .moist-cream .sec-about .about-title { position: absolute; top: -88px; left: 26px;}
  .moist-cream .sec-about .about-flex { display: flex; align-items: center; gap: 55px;}
  .moist-cream .sec-about .about-text { width: calc(calc(100% - 55px - 373px));}
  .moist-cream .sec-about .about-text .notice { margin: -3px 20px 0 0; text-align: right;}
  .moist-cream .sec-about .about-graph { width: 373px;}
  .moist-cream .sec-care { padding: 108px 20px 20px; background: url(/TL/img/usr/item/moist_cream/bg_pc.jpg) no-repeat center top / cover;}
  .moist-cream .sec-care .care-top { width: 50%; margin: 0 50px 80px auto;}
  .moist-cream .sec-care .care-top-title { margin: 0 0 23px;}
  .moist-cream .sec-care .care-top .text { margin: 0 2px 0;}
  .moist-cream .sec-care .care-contents { display: flex; flex-direction: column; gap: 54px;}
  .moist-cream .sec-care .care-box { position: relative; padding: 0 40px 20px; text-align: center; z-index: 1;}
  .moist-cream .sec-care .care-box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: #fff linear-gradient( 180deg, rgb(255,255,255,0.1) 0%, rgb(0,0,0,0.1) 100%); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5); opacity: 0.5; z-index: -1;}
  .moist-cream .sec-care .care-box .text { text-align: center;}
  .moist-cream .sec-care .care-title { margin: -20px 0 8px;}
  .moist-cream .sec-care .care-subtitle { margin: 0 0 7px; font-weight: bold; font-size: 26px; letter-spacing: 0.1em; text-align: center;}
  .moist-cream .sec-care .care-extract-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; margin: 20px 0 0;}
  .moist-cream .sec-care .care-extract-list li { width: 130px;}
  .moist-cream .sec-care .care-extract-list li figure figcaption { margin: 10px 0 0; font-size: 18px; letter-spacing: 0.1em; line-height: 1.44;}
  .moist-cream .sec-care .notice { text-align: left;}
  .moist-cream .sec-care .care-extract-notice { margin: 0 0 10px; text-align: right;}
  .moist-cream .sec-care .care02 .notice { margin: 20px 0 0; text-align: right;}
  .moist-cream .sec-care .care-img { max-width: 735px; margin: 30px auto 0;}
}

@media screen and (max-width: 749px) {
  .moist-cream { margin: 0 0 40px; border: none;}
  .moist-cream .text { font-size: 14px; letter-spacing: 0.1em; line-height: 1.7;}
  .moist-cream .notice { display: block; font-size: 10px; letter-spacing: 0.1em; line-height: 1.5;}
  .moist-cream .sec-mv { margin: 0 20px 40px;}
  .moist-cream .sec-about { position: relative; margin: 75px 20px 40px; padding: 76px 25px 40px; border: 1px solid #d83358; z-index: 1;}
  .moist-cream .sec-about::before { content: ""; position: absolute; top: 7px; left: 7px; bottom: 7px; right: 7px; border: 1px dotted #d83358; z-index: -1;}
  .moist-cream .sec-about .about-title { position: absolute; top: -43px; left: 8px; width: 316px;}
  .moist-cream .sec-about .about-flex { display: flex; flex-direction: column; gap: 26px;}
  .moist-cream .sec-about .about-text .notice { position: absolute; bottom: 15px; right: 12px;}
  .moist-cream .sec-care { padding: 47px 10px 40px; background: url(/TL/img/usr/item/moist_cream/bg_sp.jpg) no-repeat center top / 100%;}
  .moist-cream .sec-care .care-top { width: 63%; margin: 0 13px 32px auto;}
  .moist-cream .sec-care .care-top-title { margin: 0 0 14px;}
  .moist-cream .sec-care .care-top .text { margin: 0 0 0 2px;}
  .moist-cream .sec-care .care-contents { display: flex; flex-direction: column; gap: 40px;}
  .moist-cream .sec-care .care-box { position: relative; padding: 0 10px 15px; z-index: 1;}
  .moist-cream .sec-care .care-box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: #fff linear-gradient( 180deg, rgb(255,255,255,0.1) 0%, rgb(0,0,0,0.1) 100%); box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5); opacity: 0.5; z-index: -1;}
  .moist-cream .sec-care .care-box .text { padding: 0 10px;}
  .moist-cream .sec-care .care-title { width: 70%; margin: -20px auto 7px;}
  .moist-cream .sec-care .care-subtitle { margin: 0 0 7px; font-weight: bold; font-size: 17px; letter-spacing: 0.1em; line-height: 1.47; text-align: center;}
  .moist-cream .sec-care .care-extract-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 23px 20px; margin: 10px 0 0;}
  .moist-cream .sec-care .care-extract-list li { width: calc((100% - (23px*2))/3); max-width: 90px;}
  .moist-cream .sec-care .care-extract-list li figure figcaption { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.1em; line-height: 1.416; text-align: center;}
  .moist-cream .sec-care .care-extract-notice { margin: 2px 0 14px; text-align: right;}
  .moist-cream .sec-care .care02 .notice { margin: 10px 0 0; text-align: right;}
  .moist-cream .sec-care .care-img { margin: 15px auto 0;}
}