@charset "utf-8";

/*----------------------------
  PC
----------------------------*/
@media only screen and (min-width: 768px) {
  /* Common */
  body.page-contentspages {
    margin-top: 0 !important;
  }
  body > .wrapper {
    padding-top: 71px;
    overflow: hidden;
  }

  /* Header */
  .block-header-top,
  .block-headernav,
  .block-headernav--item-list {
    display: none;
  }
  .block-header-main {
    width: 100%;
    height: 71px;
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 102;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    background-color: #fff;
  }
  #header.fixed .block-header-main {
    padding: 0;
  }
  .block-header-main .container {
    width: auto;
    display: flex;
    align-items: center;
  }
  .block-header-logo {
    width: 110px;
    margin: 0;
    transition: none;
    transform: translateY(0);
  }

  /* Body */
  #trial_pack .sp {
    display: none !important;
  }
  #trial_pack {
    margin: 0 0 100px;
    line-height: 1.68;
  }
  #trial_pack .inner {
    width: 720px;
    margin: 0 auto;
  }

  /* visual_coupon */
  #trial_pack .visual_coupon {
    padding-top: 460px;
    background: url(../../../img/usr/freepage/trial-herb/main.jpg) top center
      no-repeat;
  }
  #trial_pack .visual_coupon.top {
    margin: 0 0 60px 0;
  }
  #trial_pack .visual_coupon .inner {
    position: relative;
  }
  #trial_pack .visual_coupon .coupon_btn {
    width: 720px;
    height: 290px;
    padding-bottom: 30px;
    margin: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("../../../img/usr/freepage/trial-herb/main_bg.png") top
      center no-repeat;
    box-sizing: border-box;
  }
  #trial_pack .visual_coupon .coupon_btn .price {
    margin-bottom: 10px;
  }
  #trial_pack .visual_coupon .coupon_btn a,
  #trial_pack .visual_coupon .coupon_btn a img {
    display: block;
    transition: 0.3s;
  }
  #trial_pack .visual_coupon .coupon_btn a:hover {
    opacity: 0.7;
  }
  #trial_pack .visual_coupon .coupon_bnr {
    text-align: center;
  }

  /* coupon */
  #trial_pack .coupon {
    padding-top: 30px;
  }
  #trial_pack .coupon .inner {
    position: relative;
  }
  #trial_pack .coupon .coupon_btn {
    width: 720px;
    height: 290px;
    margin: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fce5e3;
  }
  #trial_pack .coupon .coupon_btn .price {
    margin-bottom: 10px;
  }
  #trial_pack .coupon .coupon_btn a,
  #trial_pack .coupon .coupon_btn a img {
    display: block;
    transition: 0.3s;
  }
  #trial_pack .coupon .coupon_btn a:hover {
    opacity: 0.7;
  }
  #trial_pack .coupon .coupon_bnr {
    margin: 0 0 40px 0;
    text-align: center;
  }

  /* intro */
  #trial_pack .intro {
    padding-top: 36px;
    margin: 0 0 50px;
    position: relative;
    text-align: justify;
  }
  #trial_pack .intro .intro_sub_title {
    width: 720px;
    text-align: center;
    position: absolute;
    top: 0;
  }
  #trial_pack .intro .intro_box {
    width: 718px;
    padding: 4px;
    border-bottom: 1px solid #71655f;
    background: url(../../../img/usr/freepage/trial-herb/intro_bg.png) top
      center no-repeat;
    background-size: 100% auto;
  }
  #trial_pack .intro .intro_box > div,
  #trial_pack .intro .intro_box > div img {
    vertical-align: top;
  }
  #trial_pack .intro .intro_box .intro_txt {
    padding: 5px 54px;
    background-color: #f8f0e9;
    color: #4c3828;
    font-size: 15px;
  }
  #trial_pack .intro .intro_coupon {
    padding: 20px;
    text-align: center;
    background: #f8f0e9;
  }
  #trial_pack .intro .intro_box .intro_coupon_btn {
    padding-bottom: 25px;
    display: flex;
    justify-content: center;
    background-color: #f8f0e9;
  }
  #trial_pack .intro .intro_box .intro_coupon_btn a,
  #trial_pack .intro .intro_box .intro_coupon_btn a img {
    display: block;
  }
  #trial_pack .intro .intro_coupon_bnr {
    padding: 20px 0;
    text-align: center;
    background: #fff;
  }

  /* appeal, selfcare, food, five_taste */
  #trial_pack .appeal,
  #trial_pack .selfcare,
  #trial_pack .food {
    padding-top: 50px;
  }
  #trial_pack .appeal h2,
  #trial_pack .selfcare h2,
  #trial_pack .food h2 {
    margin: 0;
    text-align: center;
  }
  #trial_pack .appeal .appeal_text,
  #trial_pack .selfcare .selfcare_text {
    margin-top: 40px;
  }
  #trial_pack .appeal ul,
  #trial_pack .selfcare ul {
    margin-top: 30px;
  }

  /* appeal */
  #trial_pack .appeal {
    min-width: 800px;
    height: 760px;
    margin: 0 auto;
    background: #efeff4 url(../../../img/usr/freepage/trial-herb/appeal_bg.jpg)
      bottom center no-repeat;
  }
  #trial_pack .appeal h2 {
    margin: 0;
    text-align: center;
  }
  #trial_pack .appeal ul {
    margin-top: 30px;
  }
  #trial_pack .appeal ul li {
    position: relative;
  }
  #trial_pack .appeal ul li .appeal_text {
    width: 500px;
    height: 100px;
    margin-top: 0;
    position: absolute;
    top: 68px;
    left: 32px;
  }
  #trial_pack .appeal ul li .appeal_text .note {
    font-size: 13px;
  }

  /* selfcare */
  #trial_pack .selfcare {
    padding-top: 50px;
  }
  #trial_pack .selfcare h2 {
    margin: 0;
    text-align: center;
  }
  #trial_pack .selfcare ul {
    margin-top: 30px;
  }
  #trial_pack .selfcare ul li dl {
    display: flex;
    align-items: center;
  }
  #trial_pack .selfcare ul li:nth-child(2n) dl {
    display: flex;
    flex-direction: row-reverse;
  }
  #trial_pack .selfcare ul li dl dd {
    margin-left: 20px;
    flex-grow: 1;
  }
  #trial_pack .selfcare ul li:nth-child(2n) dl dd {
    margin-right: 20px;
    margin-left: 0px;
  }
  #trial_pack .selfcare ul li dl dd h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: bold;
  }
  #trial_pack .selfcare ul li dl dd h3 span {
    padding: 2px 5px;
    background-color: #f5f0ea;
  }

  /* five_taste */
  #trial_pack .five_taste {
    margin-top: 30px;
    padding-top: 60px;
    padding-bottom: 50px;
    background: #f1f6ee
      url(../../../img/usr/freepage/trial-herb/five_taste_bg.jpg);
    color: #44342c;
  }
  #trial_pack .five_taste .five_taste_mv {
    text-align: center;
  }
  #trial_pack .five_taste .taste_box {
    padding: 50px 0 36px;
    margin-top: 66px;
    position: relative;
    background-color: #fff;
  }
  #trial_pack .five_taste .taste_box .taste_title {
    width: 720px;
    text-align: center;
    position: absolute;
    top: -48px;
    left: 0;
  }
  #trial_pack .five_taste .taste_box .taste_main {
    padding: 0 0 0 50px;
    display: flex;
  }
  #trial_pack .five_taste .taste_box .taste_main .taste_txt {
    width: 290px;
    padding-top: 15px;
  }
  #trial_pack .five_taste .taste_box .taste_txt .taste_item_name {
    color: #606c29;
    font-size: 24px;
  }
  #trial_pack .five_taste .taste_box .taste_txt .taste_item_sub_title {
    margin-top: 14px;
    padding-left: 24px;
    background: url(../../../img/usr/freepage/trial-herb/icon_leaf.png) left top
      no-repeat;
    background-size: 18px 24px;
    font-size: 14px;
  }
  #trial_pack .five_taste .taste_box .taste_txt .taste_item_description {
    margin-top: 24px;
  }
  #trial_pack .five_taste .taste_box .taste_main .taste_graph {
    width: calc(100% - 24px - 290px);
    margin-left: 24px;
  }
  #trial_pack .five_taste .taste_box .taste_comment {
    padding: 0 50px 0 60px;
    margin-top: 30px;
  }
  #trial_pack .five_taste .taste_box .taste_comment ul {
    padding: 15px 0 17px;
    border-top: 1px solid #726660;
    border-bottom: 1px solid #726660;
    display: flex;
    align-items: center;
  }
  #trial_pack .five_taste .taste_box .taste_comment ul li {
    width: 50%;
  }
  #trial_pack .five_taste .taste_box .taste_comment ul li dl {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #trial_pack .five_taste .taste_box .taste_comment ul li dl dt img {
    display: block;
  }
  #trial_pack .five_taste .taste_box .taste_comment ul li dl dd {
    margin-left: 4px;
    font-size: 14px;
  }
  #trial_pack .five_taste .taste_box .taste_together {
    width: 650px;
    padding: 22px 0 16px;
    margin: 18px auto 0;
    background: url(../../../img/usr/freepage/trial-herb/taste_together_bg.jpg);
  }
  #trial_pack .five_taste .taste_box .taste_together_list {
    padding-right: 20px;
    display: flex;
    justify-content: flex-end;
  }
  #trial_pack .five_taste .taste_box .taste_together_list li {
    width: 306px;
  }
  #trial_pack .five_taste .taste_box .taste_together_list li + li {
    margin-left: 10px;
  }
  #trial_pack
    .five_taste
    .taste_box
    .taste_together_list
    li
    .taste_together_item
    dt,
  #trial_pack
    .five_taste
    .taste_box
    .taste_together_list
    li
    .taste_together_item
    dt
    img,
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_list_box_item
    .taste_together_item
    dt,
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_list_box_item
    .taste_together_item
    dt
    img {
    display: block;
  }
  #trial_pack
    .five_taste
    .taste_box
    .taste_together_list
    li
    .taste_together_item
    dd {
    padding-left: 25px;
    margin-top: 15px;
    font-size: 14px;
  }
  #trial_pack .five_taste .taste_together_uservoice {
    padding: 0 18px 20px 15px;
    margin-top: 8px;
    font-size: 14px;
    position: relative;
  }
  #trial_pack .five_taste .taste_together_uservoice_title {
    background: url(../../../img/usr/freepage/trial-herb/uservoice_title_bg.png)
      left 150px top 15px no-repeat;
  }
  #trial_pack .five_taste .taste_together_uservoice ul {
    padding: 5px 0 20px 18px;
    border-bottom: 1px solid #726660;
  }
  #trial_pack .five_taste .taste_together_uservoice ul li {
    line-height: 1.5;
  }
  #trial_pack .five_taste .taste_together_uservoice ul li + li {
    margin-top: 5px;
  }
  #trial_pack .five_taste .taste_together_uservoice_note {
    margin-top: 10px;
    font-size: 12px;
    text-align: right;
  }

  /* taste_taste_box_3 */
  #trial_pack .five_taste .taste_box.taste_taste_box_3 .taste_together_body {
    display: flex;
  }
  #trial_pack .five_taste .taste_box.taste_taste_box_3 .taste_together_list {
    padding-left: 10px;
  }
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_3
    .taste_together_list
    li
    .taste_together_item
    dd {
    margin-top: 10px;
  }
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_3
    .taste_together_uservoice {
    padding: 0 25px 0 0;
    margin-top: 0;
    position: relative;
  }
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_3
    .taste_together_uservoice_note,
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_uservoice_note {
    text-align: left;
  }

  /* taste_taste_box_4 */
  #trial_pack .five_taste .taste_box.taste_taste_box_4 .taste_together_list {
    padding-right: 20px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_list_box_item,
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_uservoice {
    width: 306px;
    margin-bottom: 24px;
  }
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_uservoice {
    width: 311px;
  }
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_list_box_item:nth-child(2) {
    margin-left: 10px;
  }
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_list_box_item
    .taste_together_item
    dd {
    padding-left: 25px;
    margin-top: 10px;
    font-size: 14px;
  }
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_uservoice {
    padding: 0 0 0 30px;
    margin-top: 0;
    box-sizing: border-box;
  }
  #trial_pack .five_taste .taste_box.taste_taste_box_4 .taste_together_list li {
    width: 100%;
  }
  #trial_pack
    .five_taste
    .taste_box.taste_taste_box_4
    .taste_together_list
    li
    + li {
    margin-left: 0;
  }
  #trial_pack
    .five_taste.taste_box.taste_taste_box_4
    .taste_together_uservoice_note {
    text-align: left;
  }

  /* your_favorite */
  #trial_pack .intro.your_favorite {
    margin-bottom: 0;
  }
  #trial_pack .intro.your_favorite .intro_box {
    padding-bottom: 36px;
  }
  #trial_pack .intro.your_favorite .intro_box .your_favorite_btn {
    padding-bottom: 25px;
    display: flex;
    justify-content: center;
    background-color: #f8f0e9;
  }
  #trial_pack .intro.your_favorite .your_favorite_btn a,
  #trial_pack .intro.your_favorite .your_favorite_btn a img {
    display: block;
  }

  /* before_buy */
  #trial_pack .intro .before_buy {
    padding: 0 10px;
    margin-top: 16px;
  }
  #trial_pack .intro .before_buy .before_buy_title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  #trial_pack .intro .before_buy ul {
    margin-top: 18px;
  }
  #trial_pack .intro .before_buy ul li {
    padding-left: 1em;
    text-indent: -1em;
  }
  #trial_pack .intro .before_buy ul li.red {
    color: #c82337;
  }

  /* entry_campaign */
  #trial_pack .entry_campaign {
    padding: 0 28px;
  }
  #trial_pack .entry_campaign_sub_title {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #trial_pack .entry_campaign_sub_title span {
    /* padding-left: 4px;
    padding-right: 92px; */
    font-size: 18px;
    font-weight: bold;
    color: #c82337;
  }
  #trial_pack .entry_campaign_title {
    border-bottom: 2px solid #fbe5e3;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
  }
  #trial_pack .entry_campaign_title .entry_campaign_title_main {
    font-size: 24px;
    font-weight: bold;
    color: #c82337;
  }
  #trial_pack .entry_campaign_text {
    margin-top: 16px;
    text-align: center;
    letter-spacing: -0.05em;
  }
  #trial_pack .entry_campaign_text span {
    font-weight: bold;
    color: #c82337;
  }
  #trial_pack .entry_campaign_step {
    margin-top: 30px;
  }
  #trial_pack .entry_campaign_step li + li {
    margin-top: 20px;
  }
  #trial_pack .entry_campaign_step dl {
    display: flex;
  }
  #trial_pack .entry_campaign_step dl dt {
    width: 44px;
  }
  #trial_pack .entry_campaign_step dl dd {
    width: calc(100% - 10px - 44px);
    margin-left: 10px;
    font-size: 14px;
    display: flex;
  }
  #trial_pack .entry_campaign_step li:nth-child(3) dl dd {
    display: block;
  }
  #trial_pack .entry_campaign_step .entry_campaign_step_text_area {
    width: calc(100% - 30px - 169px);
  }
  #trial_pack .entry_campaign_step .entry_campaign_step_img_area {
    width: 169px;
    margin-left: 30px;
  }
  #trial_pack .entry_campaign_step .entry_campaign_step_text span {
    font-size: 16px;
    font-weight: bold;
    color: #c82337;
  }
  #trial_pack .entry_campaign_step .entry_campaign_step_note {
    font-size: 12px;
  }
  #trial_pack .entry_campaign .entry_campaign_more {
    margin-top: 30px;
  }
  #trial_pack .entry_campaign .entry_campaign_more dl {
    display: flex;
  }
  #trial_pack .entry_campaign .entry_campaign_more dl dt {
    width: 88px;
  }
  #trial_pack .entry_campaign .entry_campaign_more dl dd {
    width: calc(100% - 24px - 88px);
    margin-left: 24px;
  }
  #trial_pack
    .entry_campaign
    .entry_campaign_more
    dl
    dd
    .entry_campaign_more_title {
    font-size: 16px;
    font-weight: bold;
    color: #c82337;
  }
  #trial_pack
    .entry_campaign
    .entry_campaign_more
    dl
    dd
    .entry_campaign_more_note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  /* howto */
  #trial_pack .howto {
    padding-bottom: 60px;
    margin-top: 30px;
    background-color: #f0efec;
  }
  #trial_pack .howto_movie {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
  #trial_pack .howto_movie a,
  #trial_pack .howto_movie a img {
    display: block;
  }
  #trial_pack .howto_movie_title {
    margin-top: 20px;
    text-align: center;
  }
  #trial_pack .howto_step_list {
    padding-left: 35px;
    margin-top: 50px;
  }
  #trial_pack .howto_step_list li + li {
    margin-top: 48px;
  }
  #trial_pack .howto_step_list li dl {
    display: flex;
  }
  #trial_pack .howto_step_list li dl dt {
    width: 30px;
  }
  #trial_pack .howto_step_list li dl dd {
    width: calc(100% - 30px);
  }

  /* howto_summer */
  #trial_pack .howto_summer {
    width: 680px;
    height: 148px;
    padding: 12px 44px 0;
    margin: 20px auto 0;
    display: flex;
    position: relative;
  }
  #trial_pack .howto_summer::before,
  #trial_pack .howto_summer::after {
    content: "";
    width: 37px;
    height: 148px;
    display: block;
    position: absolute;
    top: 0;
  }
  #trial_pack .howto_summer::before {
    background: url(../../../img/usr/freepage/trial-herb/howto_summer_bg_left.png)
      left top no-repeat;
    left: 0;
  }
  #trial_pack .howto_summer::after {
    background: url(../../../img/usr/freepage/trial-herb/howto_summer_bg_right.png)
      left top no-repeat;
    right: 0;
  }
  #trial_pack .howto_summer .howto_summer_text_area {
    width: calc(100% - 20px - 156px);
  }
  #trial_pack .howto_summer .howto_summer_img {
    width: 156px;
    margin-left: 20px;
  }
  #trial_pack .howto_summer .howto_summer_title,
  #trial_pack .howto_summer .howto_summer_text {
    margin-top: 6px;
  }
  #trial_pack .howto_summer .howto_summer_note {
    margin-top: 10px;
    font-size: 12px;
  }

  /* aboutus */
  #trial_pack .aboutus {
    height: 522px;
    margin-top: 48px;
    margin-bottom: 28px;
    background: url(../../../img/usr/freepage/trial-herb/aboutus_bg.jpg) center
      bottom no-repeat;
  }
  #trial_pack .aboutus .inner {
    width: 800px;
    height: 522px;
    padding-left: 40px;
    position: relative;
  }
  #trial_pack .aboutus .aboutus_text {
    margin-top: 28px;
  }
  #trial_pack .aboutus .inner .aboutus_link {
    position: absolute;
    bottom: -28px;
    right: 0;
  }
  #trial_pack .aboutus .inner .aboutus_link a,
  #trial_pack .aboutus .inner .aboutus_link a img {
    display: block;
  }

  /* followus */
  #trial_pack .followus {
    margin-top: 60px;
    margin-bottom: 28px;
  }
  #trial_pack .followus_text {
    margin-top: 30px;
  }
  #trial_pack .followus_insta_icon {
    margin-top: 24px;
  }
  #trial_pack .followus .ecbn-selection-to-nextpage,
  #trial_pack .followus .ecbn-selection-image-loading-more {
    display: none;
  }
  .followus_more_btn {
    max-height: none;
    max-width: none;
    line-height: 1;
    text-align: center;
  }
  .followus_more_btn a {
    width: auto;
    max-width: 500px;
    padding: 10px 2em;
    margin: 30px auto 20px;
    border: 1px #5a4a42 solid;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
    position: relative;
    background-image: none;
    background: #fff;
    color: #5a4a42;
    text-align: center;
    letter-spacing: 0.2em;
    font-size: 16px;
    line-height: 1.5;
  }
  .followus_more_btn a:hover {
    opacity: 0.75;
  }

  /* surely-read */
  #trial_pack .surely-read {
    width: 100%;
    padding: 0 15px;
    margin: 30px 0;
    font-size: 14px;
  }
  #trial_pack .surely-read .surely-read--title {
    padding: 5px 0;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    position: relative;
    background: #f5f0ea;
    display: block;
    cursor: pointer;
  }
  #trial_pack .surely-read .surely-read--title::after {
    content: "+";
    width: 20px;
    height: 20px;
    padding-bottom: 0;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: #44342c;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: normal;
    font-size: 20px;
    line-height: 1;
  }
  .Android #trial_pack .surely-read .surely-read--title::after {
    width: 30px;
    padding-bottom: 7px;
  }
  #trial_pack .surely-read .surely-read--title.open::after {
    content: "-";
    padding-bottom: 2px;
  }
  #trial_pack .surely-read .surely-read--body {
    display: none;
  }
  #trial_pack .surely-read ul {
    padding: 15px 0;
  }
  #trial_pack .surely-read ul li {
    padding: 2px 0;
    padding-left: 1em;
    font-size: 14px;
    line-height: 1.4;
    text-indent: -1em;
    letter-spacing: -0.015em;
  }
  #trial_pack .surely-read .surely-read--box {
    padding: 10px 0;
    border-top: 1px solid #968d89;
  }
  #trial_pack .surely-read .surely-read--box-title {
    font-size: 15px;
    font-weight: bold;
  }
  #trial_pack .surely-read .surely-read--box-item-name {
    font-size: 16px;
    font-weight: bold;
  }
  #trial_pack .surely-read .surely-read--box-item-sub-name {
    font-size: 12px;
  }
  #trial_pack .surely-read .surely-read--box-text dl {
    margin-bottom: 16px;
  }
  #trial_pack .surely-read .surely-read--box-text dt {
    font-weight: bold;
  }
}

/*----------------------------
  SP
----------------------------*/
@media only screen and (max-width: 767px) {
  /* Common */
  .pane-header .block-header {
    padding: 12px 10px;
  }

  /* Header */
  .block-headernav--item-list li.block-menu-btn,
  .block-headernav--item-list li.block-mypage-btn,
  .block-headernav--item-list li.block-cart-btn {
    display: none;
  }
  .block-headernav--item-list li.block-header-logo {
    margin-left: 0;
    margin-right: 0;
  }

  /* Body */
  #trial_pack .pc {
    display: none !important;
  }
  #trial_pack {
    letter-spacing: 0;
    background: url(../../../img/usr/freepage/trial-herb/sp/trial_pack_bg.jpg)
      top left no-repeat;
    background-size: 100% auto;
  }
  #trial_pack
    div:not(.mv):not(.intro):not(.food):not(.coupon):not(.howto)
    .inner {
    padding: 0 24px;
  }
  #trial_pack h1,
  #trial_pack h2,
  #trial_pack h3 {
    padding: 0;
  }
  #trial_pack h2 span {
    margin: 0;
    display: inline-block;
    line-height: 1.4;
  }

  /* visual_coupon */
  #trial_pack .visual_coupon {
    padding-top: 85vw;
    background: url("../../../img/usr/freepage/trial-herb/sp/main_sp.jpg") top
      center no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
  }
  #trial_pack .visual_coupon.top {
    margin: 0 0 60px 0;
  }
  #trial_pack .visual_coupon .inner {
    position: relative;
  }
  #trial_pack .visual_coupon .coupon_btn {
    padding: 20px;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("../../../img/usr/freepage/trial-herb/main_bg.png") top
      center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
  }
  #trial_pack .visual_coupon .coupon_btn .price {
    margin-bottom: 10px;
  }
  #trial_pack .visual_coupon .coupon_btn a,
  #trial_pack .visual_coupon .coupon_btn a img {
    display: block;
    transition: 0.3s;
  }
  #trial_pack .visual_coupon .coupon_btn a:hover {
    opacity: 0.7;
  }
  #trial_pack .visual_coupon .coupon_bnr {
    text-align: center;
    padding: 0 20px;
  }

  /* coupon */
  #trial_pack .coupon {
    margin: 20px 20px 0;
  }
  #trial_pack .coupon .inner {
    position: relative;
  }
  #trial_pack .coupon .coupon_btn {
    padding: 20px;
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fce5e3;
  }
  #trial_pack .coupon .coupon_btn .price {
    margin-bottom: 10px;
  }
  #trial_pack .coupon .coupon_btn a,
  #trial_pack .coupon .coupon_btn a img {
    display: block;
    transition: 0.3s;
  }
  #trial_pack .coupon .coupon_btn a:hover {
    opacity: 0.7;
  }
  #trial_pack .coupon .coupon_bnr {
    margin: 0 0 40px 0;
    padding: 0 20px;
    text-align: center;
  }

  /* intro */
  #trial_pack .intro {
    padding: 0 24px;
    margin: 0 0 50px;
    position: relative;
  }
  #trial_pack .intro .inner {
    border-bottom: 1px solid #44342c;
    background: url(../../../img/usr/freepage/trial-herb/sp/intro_bg_sp.png) top
      12px left no-repeat;
    background-size: 100% 100%;
  }
  #trial_pack .intro .intro_box {
    padding: 6px;
  }
  #trial_pack .intro .intro_box .intro_txt {
    padding: 16px 6px 6px;
    background-color: #f8f0e9;
    color: #4c3828;
    font-size: 15px;
  }
  #trial_pack .intro .intro_box .intro_coupon_btn {
    padding: 0 6px 18px;
    background-color: #f8f0e9;
    display: flex;
    justify-content: center;
  }
  #trial_pack .intro .intro_box .intro_coupon_btn a,
  #trial_pack .intro .intro_box .intro_coupon_btn a img {
    display: block;
  }
  #trial_pack .intro .intro_coupon {
    padding: 20px;
    text-align: center;
    background: #f8f0e9;
  }
  #trial_pack .intro .intro_box .intro_coupon_btn {
    padding: 0 20px 20px;
    display: flex;
    justify-content: center;
    background-color: #f8f0e9;
  }
  #trial_pack .intro .intro_box .intro_coupon_btn a,
  #trial_pack .intro .intro_box .intro_coupon_btn a img {
    display: block;
  }
  #trial_pack .intro .intro_coupon_bnr {
    padding: 20px;
    text-align: center;
    background: #fff;
  }

  /* appeal, selfcare, food, five_taste */
  #trial_pack .appeal,
  #trial_pack .selfcare,
  #trial_pack .food {
    padding-top: 50px;
  }
  #trial_pack .appeal h2,
  #trial_pack .selfcare h2,
  #trial_pack .food h2 {
    margin: 0;
    text-align: center;
  }
  #trial_pack .appeal .appeal_text {
    margin-top: 40px;
  }
  #trial_pack .appeal ul {
    margin-top: 30px;
  }

  /* appeal */
  #trial_pack .appeal {
    margin: 0 auto;
    background: #efeff4
      url(../../../img/usr/freepage/trial-herb/sp/appeal_bg_sp.jpg) bottom
      center no-repeat;
    background-size: 100% auto;
  }
  #trial_pack .appeal h2 {
    margin: 0;
    text-align: center;
  }
  #trial_pack .appeal ul {
    margin-top: 30px;
    padding-bottom: 18px;
    display: flex;
    flex-direction: column;
  }
  #trial_pack .appeal ul li {
    width: 63.73vw;
    position: relative;
  }
  #trial_pack .appeal ul li + li {
    margin-top: 18px;
  }
  #trial_pack .appeal ul li .appeal_text {
    width: 55vw;
    margin: 0;
    position: absolute;
    top: 13.6vw;
    left: 6vw;
    letter-spacing: -0.05em;
    font-size: 12px;
    font-size: 3.2vw;
  }
  #trial_pack .appeal ul li .appeal_text .note {
    font-size: 9px;
    font-size: 2.4vw;
  }

  /* selfcare */
  #trial_pack .selfcare h2 {
    margin: 0;
    text-align: center;
  }
  #trial_pack .selfcare .selfcare_text {
    margin-top: 20px;
  }
  #trial_pack .selfcare ul {
    padding: 0 10px;
    margin-top: 20px;
  }
  #trial_pack .selfcare ul li + li {
    margin-top: 15px;
  }
  #trial_pack .selfcare ul li dl dd {
    margin-top: 10px;
    margin-left: 6.5vw;
    margin-right: 6.5vw;
  }
  #trial_pack .selfcare ul li dl dd h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: bold;
  }
  #trial_pack .selfcare ul li dl dd h3 span {
    padding: 2px 5px;
    background-color: #f5f0ea;
  }
  #trial_pack .selfcare ul li dl dd p {
    font-size: 13px;
  }

  /* five_taste */
  #trial_pack .five_taste {
    padding-bottom: 50px;
    margin-top: 30px;
    background: #f1f6ee
      url(../../../img/usr/freepage/trial-herb/five_taste_bg.jpg);
    color: #44342c;
  }
  #trial_pack .five_taste .five_taste_mv {
    text-align: center;
  }

  /* taste_box */
  #trial_pack .five_taste .taste_box {
    padding: 9.86vw 0 10px;
    margin-top: 10vw;
    position: relative;
    background-color: #fff;
  }
  #trial_pack .five_taste .taste_box + .taste_box {
    margin-top: calc(10vw + 16px);
  }
  #trial_pack .five_taste .taste_box .taste_title {
    width: 100%;
    text-align: center;
    position: absolute;
    top: -12vw;
    left: 0;
  }
  #trial_pack .five_taste .taste_box .taste_main .taste_txt {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #trial_pack .five_taste .taste_box .taste_txt .taste_item_name {
    font-size: 20px;
    text-align: center;
    color: #606c29;
  }
  #trial_pack .five_taste .taste_box .taste_txt .taste_item_sub_title {
    padding-left: 24px;
    margin-top: 14px;
    background: url(../../../img/usr/freepage/trial-herb/icon_leaf.png) left top
      no-repeat;
    background-size: 18px 24px;
    font-size: 14px;
  }
  #trial_pack .five_taste .taste_box .taste_txt .taste_item_description {
    margin-top: 24px;
    text-align: center;
  }
  #trial_pack .five_taste .taste_box .taste_main .taste_graph {
    margin-top: 12px;
    margin-left: 24px;
  }
  #trial_pack .five_taste .taste_box .taste_comment {
    padding: 0 24px 0 10vw;
    margin-top: 20px;
  }
  #trial_pack .five_taste .taste_box .taste_comment ul li dl {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #trial_pack .five_taste .taste_box .taste_comment ul li dl dt {
    width: 24px;
  }
  #trial_pack .five_taste .taste_box .taste_comment ul li dl dt img {
    width: 24px;
    display: block;
  }
  #trial_pack .five_taste .taste_box .taste_comment ul li dl dd {
    width: calc(100% - 5px - 24px);
    margin-left: 5px;
    font-size: 14px;
  }

  /* taste_together */
  #trial_pack .five_taste .taste_box .taste_together {
    margin: 22px 14px 0;
    padding: 0;
    background: url(../../../img/usr/freepage/trial-herb/taste_together_bg.jpg);
  }
  #trial_pack .five_taste .taste_box .taste_together .taste_together_header {
    padding: 12px 0 30px;
    background: url(../../../img/usr/freepage/trial-herb/sp/taste_together_header_down.png)
      center bottom 8px no-repeat;
    background-size: 28px auto;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    display: block;
  }
  #trial_pack .five_taste .taste_box .taste_together .taste_together_list {
    padding-right: 24px;
    padding-bottom: 24px;
  }
  #trial_pack
    .five_taste
    .taste_box
    .taste_together
    .taste_together_list.taste_together_list_box {
    padding-right: 0;
    padding-bottom: 0;
  }
  #trial_pack
    .five_taste
    .taste_box
    .taste_together_list.taste_together_list_box
    .taste_together_list_box_item {
    padding-right: 24px;
  }
  #trial_pack
    .five_taste
    .taste_box
    .taste_together_list.taste_together_list_box
    .taste_together_list_box_item:nth-child(3) {
    padding-bottom: 24px;
  }
  #trial_pack .five_taste .taste_box .taste_together .taste_together_item dd {
    padding-left: 6vw;
    margin-top: 12px;
  }
  #trial_pack
    .five_taste
    .taste_box
    .taste_together
    .taste_together_list
    > li
    + li,
  #trial_pack
    .five_taste
    .taste_box
    .taste_together
    .taste_together_list
    .taste_together_list_box_item
    + .taste_together_list_box_item {
    margin-top: 42px;
  }

  /* taste_together_uservoice */
  #trial_pack .five_taste .taste_together_uservoice {
    padding: 8px 0 0;
    position: relative;
    font-size: 14px;
    background-color: #fff;
  }
  #trial_pack .five_taste .taste_together_uservoice_title {
    height: 43px;
    position: relative;
    background: url(../../../img/usr/freepage/trial-herb/uservoice_title_bg.png)
      left 130px top 15px no-repeat;
  }
  #trial_pack .five_taste .taste_together_uservoice_title img {
    width: 143px;
    position: absolute;
    top: 0;
    left: -22px;
  }
  #trial_pack .five_taste .taste_together_uservoice ul {
    padding: 5px 0 20px 18px;
    border-bottom: 1px solid #726660;
  }
  #trial_pack .five_taste .taste_together_uservoice ul li {
    line-height: 1.5;
  }
  #trial_pack .five_taste .taste_together_uservoice ul li + li {
    margin-top: 5px;
  }
  #trial_pack .five_taste .taste_together_uservoice_note {
    margin-top: 6px;
    font-size: 8px;
    text-align: right;
  }

  /* your_favorite */
  #trial_pack .intro.your_favorite {
    padding-top: 0;
  }
  #trial_pack .intro.your_favorite .inner {
    border-bottom: none !important;
    background: none !important;
  }
  #trial_pack .intro.your_favorite .your_favorite_btn {
    padding: 0 6px 18px;
    display: flex;
    justify-content: center;
    background-color: #f8f0e9;
  }
  #trial_pack .intro.your_favorite .your_favorite_btn a,
  #trial_pack .intro.your_favorite .your_favorite_btn a img {
    display: block;
  }

  /* before_buy */
  #trial_pack .intro .before_buy {
    padding: 0 10px;
    margin-top: 36px;
  }
  #trial_pack .intro .before_buy .before_buy_title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
  #trial_pack .intro .before_buy ul {
    margin-top: 18px;
  }
  #trial_pack .intro .before_buy ul li {
    padding-left: 1em;
    text-indent: -1em;
  }
  #trial_pack .intro .before_buy ul li.red {
    color: #c82337;
  }

  /* surely-read */
  #trial_pack .surely-read {
    padding: 0 6px;
    margin: 30px 0;
  }
  #trial_pack .surely-read .surely-read--title {
    padding: 10px 12px;
    font-size: 4vw;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: block;
    position: relative;
    background: #f5f0ea;
    cursor: pointer;
  }
  #trial_pack .surely-read .surely-read--title:after {
    content: "+";
    width: 20px;
    height: 20px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: #44342c;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: normal;
    font-size: 20px;
    line-height: 1;
  }
  #trial_pack .surely-read .surely-read--title.open:after {
    content: "-";
    padding-bottom: 2px;
  }
  #trial_pack .surely-read .surely-read--body {
    display: none;
  }
  #trial_pack .surely-read ul {
    padding: 15px 0;
  }
  #trial_pack .surely-read ul li {
    padding: 2px 1em 2px 0;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.015em;
    text-indent: -1em;
  }
  #trial_pack .surely-read .surely-read--box {
    padding: 10px 0;
    border-top: 1px solid #968d89;
  }
  #trial_pack .surely-read .surely-read--box-title {
    font-size: 12px;
    font-weight: bold;
  }
  #trial_pack .surely-read .surely-read--box-item-name {
    font-size: 15px;
    font-weight: bold;
  }
  #trial_pack .surely-read .surely-read--box-item-sub-name {
    font-size: 11px;
  }
  #trial_pack .surely-read .surely-read--box-text {
    font-size: 12px;
  }
  #trial_pack .surely-read .surely-read--box-text dl {
    margin-bottom: 16px;
  }
  #trial_pack .surely-read .surely-read--box-text dt {
    font-weight: bold;
  }

  /* entry_campaign */
  #trial_pack .entry_campaign_sub_title {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #trial_pack .entry_campaign_sub_title img {
    width: 72px;
    height: auto;
    display: block;
  }
  #trial_pack .entry_campaign_sub_title span {
    /* padding-left: 4px;
    padding-right: 76px; */
    color: #c82337;
    font-size: 16px;
    font-weight: bold;
  }
  #trial_pack .entry_campaign_title {
    font-size: 19px;
    font-weight: bold;
    text-align: center;
  }
  #trial_pack .entry_campaign_title span {
    border-bottom: 1px solid #fbe5e3;
    text-align: center;
    font-size: 19px;
    font-weight: bold;
  }
  #trial_pack .entry_campaign_title span.entry_campaign_title_main {
    font-size: 21px;
    font-weight: bold;
    color: #c82337;
  }
  #trial_pack .entry_campaign_text {
    padding-left: 20px;
    margin-top: 16px;
  }
  #trial_pack .entry_campaign_text span {
    color: #c82337;
    font-weight: bold;
  }
  #trial_pack .entry_campaign_step {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
  }
  #trial_pack .entry_campaign_step li + li {
    margin-top: 20px;
  }
  #trial_pack .entry_campaign_step dl {
    display: flex;
  }
  #trial_pack .entry_campaign_step dl dt {
    width: 48px;
  }
  #trial_pack .entry_campaign_step dl dd {
    width: calc(100% - 10px - 48px);
    margin-left: 10px;
    font-size: 14px;
  }
  #trial_pack .entry_campaign_step li:nth-child(3) dl dd {
    display: block;
  }
  #trial_pack .entry_campaign_step .entry_campaign_step_img_area img {
    width: 226px;
    margin-top: 12px;
    display: block;
  }
  #trial_pack .entry_campaign_step .entry_campaign_step_text span {
    color: #c82337;
    font-size: 16px;
    font-weight: bold;
  }
  #trial_pack .entry_campaign_step .entry_campaign_step_note {
    width: 226px;
    font-size: 10px;
  }
  #trial_pack .entry_campaign .entry_campaign_more {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
  }
  #trial_pack .entry_campaign .entry_campaign_more dl dt img {
    width: 72px;
    display: block;
  }
  #trial_pack
    .entry_campaign
    .entry_campaign_more
    dl
    dd
    .entry_campaign_more_title {
    margin-top: 8px;
    color: #c82337;
    font-size: 16px;
    font-weight: bold;
  }
  #trial_pack
    .entry_campaign
    .entry_campaign_more
    dl
    dd
    .entry_campaign_more_note {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  /* howto */
  #trial_pack .howto {
    padding-bottom: 28px;
    background-color: #f0efec;
  }
  #trial_pack .howto .howto_step_list,
  #trial_pack .howto .howto_summer {
    padding-left: 24px;
    padding-right: 24px;
  }
  #trial_pack .howto_movie {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
  #trial_pack .howto_movie a,
  #trial_pack .howto_movie a img {
    display: block;
  }
  #trial_pack .howto_movie_title {
    width: 366px;
    margin: 20px auto 0;
    text-align: center;
  }
  #trial_pack .howto_step_list {
    padding-left: 35px;
    margin-top: 50px;
  }
  #trial_pack .howto_step_list li + li {
    margin-top: 48px;
  }
  #trial_pack .howto_step_list li dl {
    display: flex;
  }
  #trial_pack .howto_step_list li dl dt {
    width: 28px;
  }
  #trial_pack .howto_step_list li dl dd {
    width: calc(100% - 28px);
  }
  #trial_pack .howto_step_list li:nth-child(1) .howto_step_title {
    width: 258px;
  }
  #trial_pack .howto_step_list li:nth-child(2) .howto_step_title {
    width: 294px;
  }
  #trial_pack .howto_step_list li:nth-child(3) .howto_step_title {
    width: 236px;
  }
  #trial_pack .howto_step_list li .howto_step_text {
    margin-top: 9px;
  }

  /* howto_summer */
  #trial_pack .howto_summer {
    padding: 0 28px;
    margin: 26px auto 0;
  }

  /* aboutus */
  #trial_pack .aboutus img {
    width: 100%;
    display: block;
  }
  #trial_pack .aboutus .aboutus_link {
    padding-right: 24px;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
  #trial_pack .aboutus .aboutus_link a,
  #trial_pack .aboutus .aboutus_link a img {
    width: 31.2vw;
    display: block;
  }

  /* followus */
  #trial_pack .followus {
    padding-top: 20px;
    margin-bottom: 28px;
  }
  #trial_pack .block-top-free3--header h2 {
    padding-top: 0;
    padding-bottom: 7px;
    font-size: 22px;
    font-weight: bold;
  }
  #trial_pack .followus_text {
    margin-top: 30px;
  }
  #trial_pack .followus_insta_icon {
    margin-top: 20px;
  }
  #trial_pack .followus .ecbn-selection-to-nextpage {
    display: none;
  }
  .followus_more_btn {
    max-height: none;
    max-width: none;
    text-align: center;
    line-height: 1;
  }
  .followus_more_btn a {
    width: auto;
    max-width: 500px;
    padding: 10px 2em;
    margin: 10px;
    line-height: 1.5;
    letter-spacing: 0.2em;
    display: inline-block;
    color: #5a4a42;
    position: relative;
    border: 1px #5a4a42 solid;
    background: transparent;
    text-decoration: none;
  }
}

/*----------------------------
  SP
----------------------------*/
@media only screen and (max-width: 390px) {
  /* aboutus */
  #trial_pack .aboutus {
    height: 132.2vw;
  }
  #trial_pack .aboutus .inner {
    height: 132.2vw;
  }
}