@charset "UTF-8";
@media screen and (max-width: 768px) {
  .pc-only {
    display: none; } }

.sp-only {
  display: none; }
  @media screen and (max-width: 768px) {
    .sp-only {
      display: block; } }

.sp-s-only {
  display: none; }
  @media screen and (max-width: 768px) {
    .sp-s-only {
      display: none; } }
  @media screen and (max-width: 480px) {
    .sp-s-only {
      display: block; } }

.section02 .bodysoap-txt {
  text-align: center;
  margin: 30px auto 20px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 16px;
  padding: 0 100px;
  color: #3c3736; }
  .section02 .bodysoap-txt span {
    color: #d60050; }
  @media screen and (max-width: 768px) {
    .section02 .bodysoap-txt {
      padding: 0 40px;
      font-size: 14px; } }
.section02 .table-box {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  margin-top: 30px; }
  @media screen and (max-width: 768px) {
    .section02 .table-box {
      display: block; } }
  .section02 .table-box .col {
    width: 50%; }
    @media screen and (max-width: 768px) {
      .section02 .table-box .col {
        width: 100%;
        margin-bottom: 50px;
        padding: 0 10px; } }
    @media screen and (max-width: 480px) {
      .section02 .table-box .col {
        margin-bottom: 30px; } }
    .section02 .table-box .col .col-txt {
      background: url("../../../img/item/bodysoap/bk01.png") no-repeat center center;
      height: 429px;
      position: relative;
      background-size: contain; }
      .section02 .table-box .col .col-txt p {
        position: absolute;
        top: 157px;
        font-size: 16px;
        padding: 0 18%;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        color: #3c3736; }
        @media screen and (max-width: 768px) {
          .section02 .table-box .col .col-txt p {
            font-size: 14px;
            padding: 0 25%; } }
        @media screen and (max-width: 480px) {
          .section02 .table-box .col .col-txt p {
            padding: 0 10%; } }
    .section02 .table-box .col .bk02 {
      background: url("../../../img/item/bodysoap/bk02.png") no-repeat center center;
      background-size: contain; }
    .section02 .table-box .col .bk03 {
      background: url("../../../img/item/bodysoap/bk03.png") no-repeat center center;
      background-size: contain;
      height: 446px; }
      .section02 .table-box .col .bk03 .bk03-p {
        padding: 0 18%;
        top: 147px; }
        @media screen and (max-width: 768px) {
          .section02 .table-box .col .bk03 .bk03-p {
            font-size: 14px;
            padding: 0 25%; } }
        @media screen and (max-width: 480px) {
          .section02 .table-box .col .bk03 .bk03-p {
            padding: 0 10%; } }
    .section02 .table-box .col .bk04 {
      background: url("../../../img/item/bodysoap/bk04.png") no-repeat center center;
      background-size: contain;
      height: 446px; }
      .section02 .table-box .col .bk04 .bk04-list {
        position: absolute;
        top: 147px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        min-width: 210px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
        color: #3c3736; }
        @media screen and (max-width: 768px) {
          .section02 .table-box .col .bk04 .bk04-list {
            min-width: 180px; } }
        .section02 .table-box .col .bk04 .bk04-list li {
          font-size: 16px; }
          @media screen and (max-width: 768px) {
            .section02 .table-box .col .bk04 .bk04-list li {
              font-size: 14px; } }
    .section02 .table-box .col .col-ph {
      text-align: center; }
    .section02 .table-box .col .ph-txt {
      text-align: center;
      font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
      color: #3c3736; }
      .section02 .table-box .col .ph-txt span {
        letter-spacing: -0.4em; }
    .section02 .table-box .col .list-coment {
      text-align: right;
      font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
      color: #3c3736; }
      .section02 .table-box .col .list-coment p {
        padding-right: 25%; }
        @media screen and (max-width: 768px) {
          .section02 .table-box .col .list-coment p {
            padding-right: 30%; } }
        @media screen and (max-width: 480px) {
          .section02 .table-box .col .list-coment p {
            padding-right: 45px; } }
    .section02 .table-box .col .col-list {
      padding: 0 40px;
      font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
      color: #3c3736; }
      @media screen and (max-width: 768px) {
        .section02 .table-box .col .col-list {
          padding: 0 10%; } }
      @media screen and (max-width: 480px) {
        .section02 .table-box .col .col-list {
          padding: 0; } }
      .section02 .table-box .col .col-list li::before {
        content: "・"; }
.section02 .box02 {
  margin-top: 50px; }
  @media screen and (max-width: 480px) {
    .section02 .box02 {
      margin-top: 20px; } }
.section02 .nayami {
  margin: 40px auto;
  max-width: 754px; }
  @media screen and (max-width: 480px) {
    .section02 .nayami {
      margin: 0 auto 40px; } }
  .section02 .nayami .nayami-bk {
    position: relative;
    text-align: center; }
    @media screen and (max-width: 768px) {
      .section02 .nayami .nayami-bk img {
        width: 90%; } }
    @media screen and (max-width: 480px) {
      .section02 .nayami .nayami-bk img {
        width: 100%;
        height: 170px; } }
    .section02 .nayami .nayami-bk .nayami-txt {
      position: absolute;
      top: 110px;
      font-size: 16px;
      text-align: left;
      font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
      color: #3c3736; }
      @media screen and (max-width: 768px) {
        .section02 .nayami .nayami-bk .nayami-txt {
          top: 35%;
          font-size: 14px; } }
      @media screen and (max-width: 480px) {
        .section02 .nayami .nayami-bk .nayami-txt {
          font-size: 12px; } }
      .section02 .nayami .nayami-bk .nayami-txt p {
        padding: 0 7%; }
        @media screen and (max-width: 768px) {
          .section02 .nayami .nayami-bk .nayami-txt p {
            padding: 0 10%;
            font-size: 16px;
            line-height: 1.3em; } }
        @media screen and (max-width: 768px) {
          .section02 .nayami .nayami-bk .nayami-txt p {
            padding: 0 10%;
            font-size: 12px;
            line-height: 1.3em; } }

.femcare-link .link-box {
  max-width: 600px;
  margin: 30px auto;
  border: 1px solid #e98071;
  display: flex; }
  @media screen and (max-width: 480px) {
    .femcare-link .link-box {
      display: block;
      max-width: 300px; } }
  .femcare-link .link-box .link-col {
    width: 50%; }
    @media screen and (max-width: 480px) {
      .femcare-link .link-box .link-col {
        width: 100%; } }
    .femcare-link .link-box .link-col p {
      font-size: 15px;
      font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      color: #604c3f; }
      @media screen and (max-width: 768px) {
        .femcare-link .link-box .link-col p {
          font-size: 14px; } }
      @media screen and (max-width: 480px) {
        .femcare-link .link-box .link-col p {
          text-align: left; } }
    .femcare-link .link-box .link-col .fem-logo {
      margin: 15px auto 0;
      text-align: center; }
    .femcare-link .link-box .link-col .fem-txt {
      padding: 10px 5px 8px 15px;
      line-height: 1.3em; }
    .femcare-link .link-box .link-col .fem-link {
      text-align: center;
      margin-bottom: 10px; }

.product {
  margin-top: 30px; }
  .product .line-top {
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid #000;
    padding: 50px 0 70px; }
    .product .line-top::before, .product .line-top::after {
      content: "";
      display: table; }
    .product .line-top::after {
      clear: both; }
    .product .line-top .product-ph {
      float: left;
      width: 50%;
      text-align: center; }
      @media screen and (max-width: 768px) {
        .product .line-top .product-ph {
          float: none;
          width: 100%; } }
      .product .line-top .product-ph img {
        max-width: 350px; }
        @media screen and (max-width: 480px) {
          .product .line-top .product-ph img {
            padding: 0 30px; } }
    .product .line-top .product-txt {
      float: left;
      width: 50%;
      font-family: "小塚ゴシック Pro", "Kozuka Gothic Pro", sans-serif;
      color: #3c3736; }
      @media screen and (max-width: 768px) {
        .product .line-top .product-txt {
          float: none;
          width: 100%; } }
      .product .line-top .product-txt table {
        margin: 30px 0 0 0;
        width: 100%; }
        @media screen and (max-width: 480px) {
          .product .line-top .product-txt table {
            margin: 30px 0; } }
        .product .line-top .product-txt table tr th {
          width: 100px;
          text-align: right;
          padding: 0 10px 0 0; }
          @media screen and (max-width: 768px) {
            .product .line-top .product-txt table tr th {
              padding: 0 0 0 10px; } }
        @media screen and (max-width: 768px) {
          .product .line-top .product-txt table tr td {
            padding: 0 20px 0 10px; } }

.more-link {
  margin-top: 40px;
  text-align: center; }
  @media screen and (max-width: 480px) {
    .more-link {
      margin-top: 0; } }
  .more-link a {
    position: relative;
    display: block;
    background-color: #fff;
    border: 1px solid #e74473;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    padding: 8px 10px 12px;
    line-height: 1;
    color: #e74473;
    font-size: 1.25rem; }
    @media screen and (max-width: 480px) {
      .more-link a {
        max-width: 180px;
        font-size: 1rem; } }
    .more-link a::before {
      content: "";
      position: absolute;
      right: -3px;
      bottom: -3px;
      z-index: -1;
      background-color: #604d3f;
      width: 100%;
      height: 100%; }
    .more-link a:hover {
      opacity: 1;
      background-color: #e74473;
      color: #fff; }
  .more-link span {
    display: inline-block;
    text-decoration: underline; }
    .more-link span::after {
      content: " ＞＞"; }

/*# sourceMappingURL=index.css.map */
