@charset "UTF-8";

.group-detail-area {
  width: 100%;
}

p {
  text-align: unset;
  line-height: 2;
}

img {
  width: 100%;
}




/*common
  ---------------------------------------*/
  html{font-size: 62.5%;}


  #CK_metoday_lp {
    letter-spacing: 0.07em;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    line-height: 2;
    color: #141414;
    background-color: #FFFDF4;
  }

  #CK_metoday_lp .en {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-style: normal;
  }

  /*-- main -------------------------------*/
  #CK_metoday_lp .main_mv {
    width: 100%;
    height: 56rem;
    padding: 9rem 0;
    margin-bottom: 12rem;
    background: linear-gradient(306deg, #ffed94 30%, #fff4d7 60%, #ffe6c2);
  }

  #CK_metoday_lp .main_img {
    width: 98.8rem;
    margin: auto;
  }

  #CK_metoday_lp .LP_img {
    border-radius: 2rem;
  }

  #CK_metoday_lp a:hover {
    opacity: 0.7;
    transition: all 0.6s;
  }

  .pc_only {
    display: none;
  }

  /*-- main -------------------------------*/
  

  /*-- main_text_area -------------------------------*/
  #CK_metoday_lp .main_text_area {
    font-size: 2.5rem;
    line-height: 2.4 !important;
    font-family: 'Noto Serif JP', serif;
    text-align: center !important;
    margin-bottom: 12rem;
  }

  #CK_metoday_lp .bold_text {
    font-weight: bold;
  }

  #CK_metoday_lp .main_text_area .small_text {
    font-size: 2rem;
  }

  #CK_metoday_lp .main_text_area .bold_text.more {
    font-size: 3rem;
  }

  #CK_metoday_lp .main_text_area .main_text {
    margin-bottom: 9rem;
  }

  #CK_metoday_lp .main_text_area .sub_text {
    position: relative;
    width: 57rem;
    margin: auto;
  }

  #CK_metoday_lp .point {
    background: linear-gradient(to top, #ffee9d 0% 50%, rgba(0,0,0,0) 50% 100%);
  }
  
  #CK_metoday_lp .main_text_area .sub_text::before {
    position: absolute;
    display: block;
    content: "";
    width: 4rem;
    height: 3rem;
    background: url(../../Contents/ImagesPkg/product/ProductList/CK_metoday/main_text_1.svg) no-repeat;
    background-size: 100%;
    top: 0;
    left: 0;
  }

  #CK_metoday_lp .main_text_area .sub_text::after {
    position: absolute;
    display: block;
    content: "";
    width: 4rem;
    height: 3rem;
    background: url(../../Contents/ImagesPkg/product/ProductList/CK_metoday/main_text_2.svg) no-repeat;
    background-size: 100%;
    bottom: 0;
    right: 0;
  }
  /*-- main_text_area -------------------------------*/


  /*-- staff_profile -------------------------------*/
  #CK_metoday_lp .staff_profile {
    position: relative;
    padding: 12rem 0;
    background-color: #FFF9E6;
  }

  #CK_metoday_lp .staff_profile::before {
    position: absolute;
    display: block;
    content: "";
    width: 0.1rem;
    height: 8rem;
    background-color: #141414;
    top: -4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  #CK_metoday_lp .ttl_blk {
    text-align: center;
    color: #EFD24B;
  }

  #CK_metoday_lp .ttl_blk h2 {
    font-size: 7rem;
    margin-bottom: 1rem;
    letter-spacing: 0;
    line-height: 1.2;
  }

  #CK_metoday_lp .ttl_blk p {
    font-size: 1.4rem;
    line-height: 1;
  }

  #CK_metoday_lp .staff_profile .flex {
    display: flex;
    justify-content: center;
    margin-top: 11.6rem;
    gap: 8rem;
  }

  #CK_metoday_lp .staff_profile .flex_blk {
    position: relative;
    width: 36rem;
    border-radius: 2rem;
    padding: 3rem;
    background-color: #fff;
    font-size: 1.4rem;
  }

  #CK_metoday_lp .staff_text {
    position: absolute;
    font-size: 3.8rem;
    color: #EFD24B;
    line-height: 1;
    top: -2.8rem;
    left: 4rem;
  }

  #CK_metoday_lp .border_1 {
    font-size: 2.5rem;
    padding: 0 1.5rem;
  }

  #CK_metoday_lp .number {
    font-size: 4.5rem;
    font-style: italic;
  }

  #CK_metoday_lp .flex_blk .image {
    width: 100%;
    margin-bottom: 3rem;
  }

  #CK_metoday_lp .flex_blk .border {
    width: 100%;
    border-top: dotted 0.2rem #BFBFBF;
    margin: 2rem 0;
  }
  /*-- staff_profile -------------------------------*/


  /*-- Challenge -------------------------------*/
  #CK_metoday_lp .Challenge {
    padding: 12rem 0 10rem;
    background-color: #FFF6D8;
  }

  #CK_metoday_lp .Challenge .ttl {
    position: relative;
    font-size: 2rem;
    margin: 8rem auto 6rem;
    text-align: center;
    width: 53rem;
    display: flex;
    justify-content: center;
  }

  #CK_metoday_lp .Challenge .ttl::before {
    position: absolute;
    display: block;
    content: "";
    width: 0.1rem;
    height: 4rem;
    background-color: #A5A5A5;
    transform: rotate(315deg);
    top: 2rem;
    left: 0;
  }

  #CK_metoday_lp .Challenge .ttl::after {
    position: absolute;
    display: block;
    content: "";
    width: 0.1rem;
    height: 4rem;
    background-color: #A5A5A5;
    transform: rotate(45deg);
    top: 2rem;
    right: 0;
  }

  #CK_metoday_lp .Challenge .staff_recommend {
    position: relative;
    width: 90rem;
    background-color: #fff;
    padding: 3rem 0;
    margin: 0 auto 6rem;
    border-radius: 2rem 0 2rem 2rem;
  }

  #CK_metoday_lp .Challenge .staff_recommend::after {
    position: absolute;
    display: block;
    content: "";
    width: 12.5rem;
    height: 3rem;
    background: url(../../Contents/ImagesPkg/product/ProductList/CK_metoday/recommend_icon_pc.png) no-repeat;
    background-size: 100%;
    top: -2.9rem;
    right: 0;
  }

  #CK_metoday_lp .Challenge .staff_recommend .staff_text {
    position: absolute;
    font-size: 3.8rem;
    color: #EFD24B;
    line-height: 1;
    top: -2.8rem;
    left: 6.8rem;
  }

  #CK_metoday_lp .Challenge .staff_recommend .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
  }

  #CK_metoday_lp .Challenge .staff_recommend .image {
    width: 21rem;
  }

  #CK_metoday_lp .Challenge .staff_recommend .text {
    width: 54rem;
  }

  #CK_metoday_lp .Challenge .staff_recommend .text p:nth-of-type(2) {
    margin: 2rem auto;
  }

  #CK_metoday_lp .Challenge .item_area {
    width: 76.6rem;
    display: flex;
    margin: 0 auto 11rem;
    justify-content: space-between;
  }

  #CK_metoday_lp .Challenge .item_area .item_area_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #CK_metoday_lp .Challenge .item_area .text {
    width: 25rem;
  }

  #CK_metoday_lp .Challenge .item_area .text .subttl {
    font-size: 1.6rem;
    font-weight: bold;
  }

  #CK_metoday_lp .Challenge .item_area .text .small_text {
    font-size: 1rem;
  }

  #CK_metoday_lp .Challenge .item_area .text .border {
    width: 100%;
    border-top: dotted 0.2rem #BFBFBF;
    margin: 1rem 0;
  }

  #CK_metoday_lp .Challenge .item_area .text .subtext {
    font-size: 1.2rem;
  }

  #CK_metoday_lp .Challenge .item_area_flex.first {
    width: 37.8rem;
  }

  #CK_metoday_lp .Challenge .item_area_flex.second {
    width: 33.8rem;
    margin-bottom: -15rem;
  }

  #CK_metoday_lp .Challenge .item_area_flex .image {
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
  }


  #CK_metoday_lp .Challenge .item_area_flex.first .image {
    width: 10rem;
  }

  #CK_metoday_lp .Challenge .item_area_flex.second .image {
    width: 6rem;
  }
  /*-- Challenge -------------------------------*/


  /*-- subttl_blk -------------------------------*/
  #CK_metoday_lp .subttl_blk {
    width: 100%;
    padding: 1.5rem 0 1.2rem;
    margin-bottom: 15rem;
    background-color: #fff;
    text-align: center;
    color: #EFD24B;
  }

  #CK_metoday_lp .subttl_blk h2 {
    font-size: 4rem;
  }

  #CK_metoday_lp .subttl_blk p {
    font-size: 1.4rem;
  }
  /*-- subttl_blk -------------------------------*/


  /*-- staff_comment -------------------------------*/
  #CK_metoday_lp .staff_comment {
    width: 85rem;
    margin: 0 auto 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #CK_metoday_lp .staff_comment .image {
    width: 20rem;
  }

  #CK_metoday_lp .staff_comment .text {
    position: relative;
    width: 61rem;
    padding: 2rem;
    background-color: #fff;
    border-radius: 1rem 0 1rem 1rem;
  }

  #CK_metoday_lp .staff_comment .text::after {
    position: absolute;
    display: block;
    content: "";
    width: 15.7rem;
    height: 3rem;
    background: url(../../Contents/ImagesPkg/product/ProductList/CK_metoday/commend_icon_pc.png) no-repeat;
    background-size: 100%;
    top: -2.9rem;
    right: 0;
  }

  /*-- staff_2 ----------*/
  #CK_metoday_lp .Challenge.staff_2 {
    position: relative;
    background-color: #FFF9E6;
  }

  #CK_metoday_lp .Challenge.staff_2::before {
    position: absolute;
    display: block;
    content: "";
    width: 0.1rem;
    height: 8rem;
    background-color: #141414;
    top: -4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  /*-- staff_2 ----------*/


  /*-- staff_comment -------------------------------*/

  /*-- point_area -------------------------------*/
  #CK_metoday_lp .point_area {
    width: 91rem;
    margin: auto;
    padding: 4rem;
    background-color: #fff;
    border-radius: 2rem;
  }

  #CK_metoday_lp .point_area .point_text {
    position: relative;
    font-size: 4rem;
    margin-bottom: 2rem;
    line-height: 1;
    color: #EFD24B;
  }

  #CK_metoday_lp .point_area .point_text::after {
    position: absolute;
    display: block;
    content: "";
    width: 69.6rem;
    height: 0.1rem;
    background-color: #EFD24B;
    bottom: 0.7rem;
    right: 0;
  }

  #CK_metoday_lp .point_area .point_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }

  #CK_metoday_lp .point_area .point_flex p {
    width: 40.5rem;
    margin-bottom: 2rem;
  }

  #CK_metoday_lp .point_area .text {
    font-size: 1.4rem;
  }

  /*-- point_area -------------------------------*/







  @media screen and (min-width:768px) and ( max-width:1280px) {
    html{font-size: calc(10 *(100vw / 1280));}
  }

  /*SmaertPhone
  ---------------------------------------*/
  @media screen and (max-width:768px) {

  .sp_only {
    display: block;
  }

    /*-- main -------------------------------*/
  #CK_metoday_lp .main_mv {
    width: 100%;
    height: unset;
    padding: unset;
    margin-bottom: calc(50 *(100vw/390));
    background: linear-gradient(306deg, #ffed94 30%, #fff4d7 60%, #ffe6c2);
  }

  #CK_metoday_lp .main_img {
    width: 100%;
    margin: auto;
  }

  #CK_metoday_lp .LP_img {
    border-radius: calc(10 *(100vw/390));
  }


  /*-- main -------------------------------*/
  

  /*-- main_text_area -------------------------------*/
  #CK_metoday_lp .main_text_area {
    font-size: calc(16 *(100vw/390));
    line-height: 2.4 !important;
    font-family: 'Noto Serif JP', serif;
    text-align: center !important;
    margin-bottom: calc(70 *(100vw/390));
  }

  #CK_metoday_lp .bold_text {
    font-weight: bold;
  }

  #CK_metoday_lp .main_text_area .small_text {
    font-size: calc(14 *(100vw/390));
  }

  #CK_metoday_lp .main_text_area .bold_text.more {
    font-size: calc(18 *(100vw/390));
  }

  #CK_metoday_lp .main_text_area .main_text {
    margin-bottom: calc(50 *(100vw/390));
  }

  #CK_metoday_lp .main_text_area .sub_text {
    position: relative;
    width: calc(300 *(100vw/390));
    margin: auto;
    padding: calc(10 *(100vw/390)) 0;
  }

  #CK_metoday_lp .point {
    background: linear-gradient(to top, #ffee9d 0% 50%, rgba(0,0,0,0) 50% 100%);
  }
  
  #CK_metoday_lp .main_text_area .sub_text::before {
    position: absolute;
    display: block;
    content: "";
    width: calc(30 *(100vw/390));
    height: calc(20 *(100vw/390));
    background: url(../../Contents/ImagesPkg/product/ProductList/CK_metoday/main_text_1.svg) no-repeat;
    background-size: 100%;
    top: 0;
    left: 0;
  }

  #CK_metoday_lp .main_text_area .sub_text::after {
    position: absolute;
    display: block;
    content: "";
    width: calc(30 *(100vw/390));
    height: calc(23 *(100vw/390));
    background: url(../../Contents/ImagesPkg/product/ProductList/CK_metoday/main_text_2.svg) no-repeat;
    background-size: 100%;
    bottom: 0;
    right: 0;
  }
  /*-- main_text_area -------------------------------*/


  /*-- staff_profile -------------------------------*/
  #CK_metoday_lp .staff_profile {
    padding: calc(70 *(100vw/390)) 0 calc(50 *(100vw/390));
  }

  #CK_metoday_lp .staff_profile::before {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: calc(60 *(100vw/390));
    background-color: #141414;
    top: calc(-30 *(100vw/390));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  #CK_metoday_lp .ttl_blk {
    text-align: center;
    color: #EFD24B;
  }

  #CK_metoday_lp .ttl_blk h2 {
    font-size: calc(40 *(100vw/390));
    margin-bottom: calc(5 *(100vw/390));
    letter-spacing: 0;
    line-height: 1.2;
  }

  #CK_metoday_lp .ttl_blk p {
    font-size: calc(14 *(100vw/390));
  }

  #CK_metoday_lp .staff_profile .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: calc(60 *(100vw/390));
    gap: calc(40 *(100vw/390));
  }

  #CK_metoday_lp .staff_profile .flex_blk {
    position: relative;
    width: calc(330 *(100vw/390));
    border-radius: calc(10 *(100vw/390));
    padding: calc(30 *(100vw/390)) calc(25 *(100vw/390)) calc(40 *(100vw/390));
    background-color: #fff;
    font-size: calc(12 *(100vw/390));
  }

  #CK_metoday_lp .staff_text {
    position: absolute;
    font-size: calc(30 *(100vw/390));
    color: #EFD24B;
    line-height: 1;
    top: calc(-25 *(100vw/390));
    left: 50%;
    transform: translateX(-50%);
  }

  #CK_metoday_lp .border_1 {
    font-size: calc(25 *(100vw/390));
    padding: 0 calc(10 *(100vw/390));
  }

  #CK_metoday_lp .number {
    font-size: calc(40 *(100vw/390));
  }

  #CK_metoday_lp .flex_blk .image {
    width: calc(240 *(100vw/390));
    margin: 0 auto calc(20 *(100vw/390));
  }

  #CK_metoday_lp .flex_blk .border {
    width: 100%;
    border-top: dotted 2px #BFBFBF;
    margin: calc(15 *(100vw/390)) 0;
  }
  /*-- staff_profile -------------------------------*/


  /*-- Challenge -------------------------------*/
  #CK_metoday_lp .Challenge {
    padding: calc(50 *(100vw/390)) 0;
  }

  #CK_metoday_lp .Challenge .ttl {
    font-size: calc(15 *(100vw/390));
    margin: calc(50 *(100vw/390)) auto;
    width: calc(358 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .ttl::before {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: calc(40 *(100vw/390));
    background-color: #A5A5A5;
    transform: rotate(315deg);
    top: calc(20 *(100vw/390));
    left: calc(20 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .ttl::after {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: calc(40 *(100vw/390));
    background-color: #A5A5A5;
    transform: rotate(45deg);
    top: calc(20 *(100vw/390));
    right: calc(20 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .staff_recommend {
    position: relative;
    width: calc(330 *(100vw/390));
    background-color: #fff;
    padding: calc(30 *(100vw/390)) calc(25 *(100vw/390)) calc(40 *(100vw/390));
    margin: 0 auto calc(30 *(100vw/390));
    border-radius: calc(10 *(100vw/390)) 0 calc(10 *(100vw/390)) calc(10 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .staff_recommend::after {
    position: absolute;
    display: block;
    content: "";
    width: calc(105 *(100vw/390));
    height: calc(25 *(100vw/390));
    background: url(../../Contents/ImagesPkg/product/ProductList/CK_metoday/recommend_icon_pc.png) no-repeat;
    background-size: 100%;
    top: calc(-25 *(100vw/390));
    right: 0;
  }

  #CK_metoday_lp .Challenge .staff_recommend .staff_text {
    position: absolute;
    font-size: calc(30 *(100vw/390));
    color: #EFD24B;
    line-height: 1;
    top: calc(-25 *(100vw/390));
    left: calc(90 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .staff_recommend .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(30 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .staff_recommend .image {
    width: calc(240 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .staff_recommend .text {
    width: 100%;
    font-size: calc(12 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .staff_recommend .text p:nth-of-type(2) {
    margin: calc(20 *(100vw/390)) auto;
  }

  #CK_metoday_lp .Challenge .item_area {
    width: 100%;
    display: block;
    margin: 0 auto calc(30 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .item_area .item_area_flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  #CK_metoday_lp .Challenge .item_area .text {
    width: calc(200 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .item_area .text .subttl {
    font-size: calc(16 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .item_area .text .small_text {
    font-size: calc(10 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .item_area .text .border {
    width: 100%;
    border-top: dotted 2px #BFBFBF;
    margin: calc(10 *(100vw/390)) 0;
  }

  #CK_metoday_lp .Challenge .item_area .text .subtext {
    font-size: calc(12 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .item_area_flex.first {
    width: calc(300 *(100vw/390));
    margin: 0 auto calc(15 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .item_area_flex.second {
    width: calc(300 *(100vw/390));
    margin: auto;
    margin-bottom: 0;
  }

  #CK_metoday_lp .Challenge .item_area_flex .image {
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
  }


  #CK_metoday_lp .Challenge .item_area_flex.first .image {
    width: calc(80 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .item_area_flex.second .image {
    width: calc(50 *(100vw/390));
  }

  #CK_metoday_lp .Challenge .item_area_flex.second .text {
    width: calc(220 *(100vw/390));
  }

  /*-- Challenge -------------------------------*/


  /*-- subttl_blk -------------------------------*/
  #CK_metoday_lp .subttl_blk {
    width: 100%;
    padding: calc(12 *(100vw/390)) 0 calc(5 *(100vw/390));
    margin-bottom: calc(30 *(100vw/390));
  }

  #CK_metoday_lp .subttl_blk h2 {
    font-size: calc(30 *(100vw/390));
    line-height: 1;
  }

  #CK_metoday_lp .subttl_blk p {
    font-size: calc(14 *(100vw/390));
    line-height: 1.5;
  }
  /*-- subttl_blk -------------------------------*/


  /*-- staff_comment -------------------------------*/
  #CK_metoday_lp .staff_comment {
    width: 100%;
    margin: 0 auto calc(30 *(100vw/390));
    display: block;
  }

  #CK_metoday_lp .staff_comment .image {
    width: calc(150 *(100vw/390));
    margin: 0 auto calc(40 *(100vw/390));
  }

  #CK_metoday_lp .staff_comment .text {
    position: relative;
    width: calc(330 *(100vw/390));
    margin: auto;
    font-size: calc(12 *(100vw/390));
    padding: calc(25 *(100vw/390));
    background-color: #fff;
    border-radius: 0 calc(10 *(100vw/390)) calc(10 *(100vw/390)) calc(10 *(100vw/390));
  }

  #CK_metoday_lp .staff_comment .text::after {
    position: absolute;
    display: block;
    content: "";
    width: calc(130 *(100vw/390));
    height: calc(25 *(100vw/390));
    background: url(../../Contents/ImagesPkg/product/ProductList/CK_metoday/commend_icon_pc.png) no-repeat;
    background-size: 100%;
    top: calc(-24 *(100vw/390));
    left: 0;
  }

  /*-- staff_2 ----------*/
  #CK_metoday_lp .Challenge.staff_2 {
    position: relative;
    background-color: #FFF9E6;
  }

  #CK_metoday_lp .Challenge.staff_2::before {
    display: none;
  }

  /*-- staff_2 ----------*/


  /*-- staff_comment -------------------------------*/

  /*-- point_area -------------------------------*/
  #CK_metoday_lp .point_area {
    width: calc(360 *(100vw/390));
    margin: auto;
    padding: calc(25 *(100vw/390));
    background-color: #fff;
    border-radius: calc(10 *(100vw/390));
  }

  #CK_metoday_lp .point_area .point_text {
    position: relative;
    font-size: calc(30 *(100vw/390));
    margin-bottom: calc(10 *(100vw/390));
  }

  #CK_metoday_lp .point_area .point_text::after {
    position: absolute;
    display: block;
    content: "";
    width: calc(210 *(100vw/390));
    height: 1px;
    background-color: #EFD24B;
    bottom: calc(7 *(100vw/390));
    right: 0;
  }

  #CK_metoday_lp .point_area .point_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(20 *(100vw/390));
  }

  #CK_metoday_lp .point_area .point_flex p {
    width: 100%;
    margin-bottom: calc(20 *(100vw/390));
  }

  #CK_metoday_lp .point_area .text {
    font-size: calc(12 *(100vw/390));
  }

  /*-- point_area -------------------------------*/


  
  }