@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap");
/* =============================================
共通
============================================= */
#d_container .wrap {
  width: 100%;
}
#d_topic_path {
  width: 990px;
  margin: 0 auto 20px;
}

#acosme_keio-20220609 {
  /* width: 990px; */
  text-align: center;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.5;
  font-size: 22px;
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  background: #f1fafb;
}
#acosme_keio-20220609 a {
  text-decoration: none;
}
#acosme_keio-20220609 .link-hover {
  text-decoration: none;
  transition: 0.4s;
}
#acosme_keio-20220609 .link-hover:hover {
  opacity: 0.7;
  cursor: pointer;
}

#acosme_keio-20220609 .message,
#acosme_keio-20220609 .slider_cont,
#acosme_keio-20220609 .brand,
#acosme_keio-20220609 .movie,
#acosme_keio-20220609 .banner-area,
#acosme_keio-20220609 .attention {
  margin-bottom: 100px !important;
}

/* =============================================
タイトル
============================================= */
#acosme_keio-20220609 .top {
  background: url(/ec/shop/images/campaign/20220609_acosme_keio_2022/top_bg2.png)
    no-repeat;
  background-size: cover;
  padding-bottom: 40px;
}
#acosme_keio-20220609 .top h1 img {
  width: 990px;
}
#acosme_keio-20220609 .top p {
  color: #333;
  font-size: 22px;
  margin-top: 30px;
}
#acosme_keio-20220609 .top p.lead-txt {
  color: #8e753b;
  font-size: 30px;
  margin-top: -56px;
}
#acosme_keio-20220609 .top .date {
  width: 320px;
  border-top: #999 solid 2px;
  border-bottom: #999 solid 2px;
  margin: 30px auto 10px;
}
#acosme_keio-20220609 .top .date p {
  font-size: 24px;
  margin: 16px;
}
#acosme_keio-20220609 .top .navi {
  display: flex;
  width: 990px;
  margin: 0 auto;
  background-color: #fff;
  padding: 10px 30px 46px;
  box-sizing: border-box;
}
#acosme_keio-20220609 .top .navi > div {
  display: flex;
  flex-direction: column;
}
#acosme_keio-20220609 .top .navi > div > img {
  width: 200px;
  margin: 0 auto 36px;
}
#acosme_keio-20220609 .top .navi .navi-box {
  display: flex;
}
#acosme_keio-20220609 .top .navi .navi-box:not(:nth-of-type(3n)) {
  margin-right: 6px;
}
#acosme_keio-20220609 .top .navi .navi-box div {
  width: 100px;
  height: 94px;
  font-size: 22px;
  padding: 25px 0 23px;
  box-sizing: border-box;
}
#acosme_keio-20220609 .top .navi .navi-box div.font-s {
  font-size: 18px;
  line-height: 1.11;
  padding-top: 16px;
}
#acosme_keio-20220609 .top .navi .navi-box a:not(:nth-child(3n)) {
  margin-right: 3px;
}
#acosme_keio-20220609 .top .navi .navi01 {
  margin-top: 11px;
}
#acosme_keio-20220609 .top .navi .navi02 {
  margin-top: 64px;
}
#acosme_keio-20220609 .top .navi .navi03 {
  margin-top: 38px;
}

#acosme_keio-20220609 .top .navi .navi01 .navi-box div {
  background-color: #d9edff;
  color: #24b3dc;
  position: relative;
}
#acosme_keio-20220609 .top .navi .navi01 .navi-box div::after {
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  border-bottom: solid 2px #24b3dc;
  border-right: solid 2px #24b3dc;
  transform: rotate(45deg);
  position: absolute;
  left: 45px;
  bottom: 23px;
}
#acosme_keio-20220609 .top .navi .navi02 .navi-box div {
  background-color: #ffe3d2;
  color: #e5925d;
  position: relative;
}
#acosme_keio-20220609 .top .navi .navi02 .navi-box div::after {
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  border-bottom: solid 2px #e5925d;
  border-right: solid 2px #e5925d;
  transform: rotate(45deg);
  position: absolute;
  left: 45px;
  bottom: 23px;
}
#acosme_keio-20220609 .top .navi .navi03 .navi-box div {
  background-color: #ffd6dd;
  color: #dd74a3;
  position: relative;
}
#acosme_keio-20220609 .top .navi .navi03 .navi-box div::after {
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  border-bottom: solid 2px #dd74a3;
  border-right: solid 2px #dd74a3;
  transform: rotate(45deg);
  position: absolute;
  left: 45px;
  bottom: 23px;
}

/* =============================================
プレゼント
============================================= */
#acosme_keio-20220609 .present-top {
  background-color: #fff;
}
#acosme_keio-20220609 .present-top > div {
  display: flex;
  width: 990px;
  margin: 0 auto;
}
#acosme_keio-20220609 .present-top .present-limit {
  background-color: #f18091;
  border-radius: 110px;
  width: 220px;
  height: 220px;
  margin: 30px 0 16px;
  padding: 42px 34px;
  box-sizing: border-box;
  line-height: 1.18;
}
#acosme_keio-20220609 .present-top .present-limit p {
  color: #fff;
  font-size: 38px;
}
#acosme_keio-20220609 .present-top .present-limit p span {
  font-size: 52px;
}
#acosme_keio-20220609 .present-top img {
  margin: 70px 20px 36px;
  width: 516px;
  height: 158px;
}
#acosme_keio-20220609 .present-bottom {
  background-color: #fc99a8;
  margin-bottom: 100px;
}
#acosme_keio-20220609 .present-bottom img {
  margin: 42px auto 16px;
}
/* =============================================
ランキング
============================================= */
#acosme_keio-20220609 .rank-area {
  padding-bottom: 20px;
}
#acosme_keio-20220609 .rank-area1 {
  margin-top: 80px;
}
#acosme_keio-20220609 h2 img {
  width: 510px;
  margin-bottom: 30px;
}

#acosme_keio-20220609 .bumon-box h3 {
  width: 990px;
  height: 108px;
  padding-top: 26px;
  margin: 0 auto;
  box-sizing: border-box;
  font-size: 36px;
  font-weight: 600;
  position: relative;
}
#acosme_keio-20220609 .bumon-box h3::before {
  content: "";
  display: inline-block;
  background-image: url(/ec/shop/images/campaign/20220609_acosme_keio_2022/kira-l.png);
  background-repeat: no-repeat;
  width: 109px;
  height: 31px;
  background-size: contain;
  position: absolute;
  top: 41px;
  left: 302px;
}
#acosme_keio-20220609 .bumon-box h3::after {
  content: "";
  display: inline-block;
  background-image: url(/ec/shop/images/campaign/20220609_acosme_keio_2022/kira-r.png);
  background-repeat: no-repeat;
  width: 109px;
  height: 31px;
  background-size: contain;
  position: absolute;
  top: 41px;
  right: 302px;
}
#acosme_keio-20220609 .bumon-box h3.h3-02-01::before {
  left: 292px;
}
#acosme_keio-20220609 .bumon-box h3.h3-02-01::after {
  right: 292px;
}
#acosme_keio-20220609 .bumon-box h3.h3-03-01::before {
  left: 252px;
}
#acosme_keio-20220609 .bumon-box h3.h3-03-01::after {
  right: 252px;
}
#acosme_keio-20220609 .bumon-box h3.h3-02-02::before {
  left: 220px;
}
#acosme_keio-20220609 .bumon-box h3.h3-02-02::after {
  right: 220px;
}
#acosme_keio-20220609 .bumon01 h3 {
  background-color: #e8f1f6;
  color: #24b3dc;
}
#acosme_keio-20220609 .bumon02 h3 {
  background-color: #fcf0e5;
  color: #d15e3e;
}
#acosme_keio-20220609 .bumon03 h3 {
  background-color: #fbe5ef;
  color: #dd74a3;
}
#acosme_keio-20220609 .bumon-box .rank-box {
  display: flex;
  flex-direction: column;
  width: 990px;
  background-color: #fffbf6;
  padding: 78px 30px 50px;
  margin: 0 auto;
  box-sizing: border-box;
}

#acosme_keio-20220609 .bumon-box .rank-box a div {
  width: 250px;
  height: 62px;
  padding: 16px 0 16px 59px;
  box-sizing: border-box;
  color: #fff;
  font-size: 24px;
  position: relative;
  line-height: 27px;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-01 a {
  width: 250px;
  display: inline-block;
}
#acosme_keio-20220609 .bumon01 .rank-box a div {
  background-color: #24b3dc;
}
#acosme_keio-20220609 .bumon02 .rank-box a div {
  background-color: #d15e3e;
}
#acosme_keio-20220609 .bumon03 .rank-box a div {
  background-color: #d972a0;
}
#acosme_keio-20220609 .bumon-box .rank-box a div::before {
  content: "";
  display: inline-block;
  background-image: url(/ec/shop/images/campaign/20220609_acosme_keio_2022/cart.png);
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
  background-size: contain;
  position: absolute;
  top: 14px;
  left: 18px;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank,
#acosme_keio-20220609 .bumon-box .rank-box .rank-023 {
  display: flex;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-03 {
  margin-left: 10px;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-01 {
  margin: 0 auto 94px;
  width: 665px;
  position: relative;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-01 img {
  width: 286px;
  height: 330px;
  position: relative;
  z-index: 1;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-01::before {
  content: "";
  display: inline-block;
  background-image: url(/ec/shop/images/campaign/20220609_acosme_keio_2022/icon_rank01.png);
  background-repeat: no-repeat;
  width: 90px;
  height: 88px;
  background-size: contain;
  position: absolute;
  top: -62px;
  left: 98px;
  z-index: 10;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-txt {
  text-align: left;
  color: #444;
}

#acosme_keio-20220609 .bumon-box .rank-box .rank-01 .rank-txt {
  font-size: 24px;
  margin-left: 45px;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-txt .item-price .price-plus {
  color: #777;
  font-size: 14px;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-01 .rank-txt .item-point {
  color: #9b7b31;
  font-size: 18px;
  margin: 20px 0;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-01 .rank-txt .item-point span {
  font-size: 20px;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-023 img {
  width: 202px;
  height: 237px;
  position: relative;
  z-index: 1;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-02,
#acosme_keio-20220609 .bumon-box .rank-box .rank-03 {
  position: relative;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-02::before {
  content: "";
  display: inline-block;
  background-image: url(/ec/shop/images/campaign/20220609_acosme_keio_2022/icon_rank02.png);
  background-repeat: no-repeat;
  width: 60px;
  height: 50px;
  background-size: contain;
  position: absolute;
  top: -44px;
  left: 71px;
  z-index: 10;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-03::before {
  content: "";
  display: inline-block;
  background-image: url(/ec/shop/images/campaign/20220609_acosme_keio_2022/icon_rank03.png);
  background-repeat: no-repeat;
  width: 60px;
  height: 50px;
  background-size: contain;
  position: absolute;
  top: -44px;
  left: 71px;
  z-index: 10;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-023 .rank-txt {
  font-size: 18px;
  margin-left: 13px;
}
#acosme_keio-20220609 .bumon-box .rank-box .rank-023 .item-name,
#acosme_keio-20220609 .bumon-box .rank-box .rank-023 .item-price,
#acosme_keio-20220609 .bumon-box .rank-box .rank-023 .item-point {
  width: 225px;
}

#acosme_keio-20220609 .bumon-box .rank-box .rank-023 .rank-txt .item-point {
  color: #9b7b31;
  font-size: 13px;
  margin: 14px 0 18px;
  width: 210px;
}
#acosme_keio-20220609
  .bumon-box
  .rank-box
  .rank-023
  .rank-txt
  .item-point
  span {
  font-size: 15px;
}
/* =============================================
ALL
============================================= */
#acosme_keio-20220609 .all-btn {
  padding-top: 80px;
  display: flex;
  flex-direction: column;
}
#acosme_keio-20220609 .all-btn p {
  color: #8b702b;
  font-size: 26px;
}
#acosme_keio-20220609 .all-btn img {
  margin-top: -40px;
}

/* =============================================
オンライン相談
============================================= */
#acosme_keio-20220609 .online-soudan {
  padding-bottom: 80px;
  background-color: #fef3f6;
  margin-top: 146px;
}
#acosme_keio-20220609 .online-soudan .online-top {
  display: flex;
  width: 930px;
  margin: 0 auto;
  position: relative;
  padding-top: 100px;
}
#acosme_keio-20220609 .online-soudan .online-top .lead-txt {
  color: #fff;
  font-weight: 600;
  background: url(/ec/shop/images/campaign/20220609_acosme_keio_2022/fukidasi.png)
    no-repeat;
  background-size: contain;
  /* padding: 70px 100px 70px 80px; */
  width: 680px;
}
#acosme_keio-20220609 .online-soudan .online-top img {
  width: 193px;
  height: 253px;
  margin-top: 188px;
}

#acosme_keio-20220609 .online-soudan .online-top .lead-txt .lead-01 {
  font-size: 24px;
}
#acosme_keio-20220609 .online-soudan .online-top .lead-txt .lead-02 {
  font-size: 32px;
}
#acosme_keio-20220609 .online-soudan .online-top .lead-txt .lead-03 {
  font-size: 40px;
}
#acosme_keio-20220609 .online-soudan .lead-area {
  color: #fc90a1;
  margin-top: -40px;
  margin-right: 250px;
}
#acosme_keio-20220609 .online-soudan .lead-area span {
  font-size: 28px;
  font-weight: 600;
}
#acosme_keio-20220609 .online-soudan .lead-area .attention {
  font-size: 18px;
  margin-top: 14px;
  color: #ffb1bc;
}
#acosme_keio-20220609 .online-soudan .situ-area {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
}
#acosme_keio-20220609 .online-soudan .situ-area .situ-ttl {
  color: #e97184;
  font-size: 36px;
  font-weight: 500;
}
#acosme_keio-20220609 .online-soudan .situ-area .situ-ttl-line {
  width: 695px;
  margin: 24px auto 44px;
}
#acosme_keio-20220609 .online-soudan .situ-area .situ-contents {
  width: 990px;
  margin: 0 auto;
}
#acosme_keio-20220609 .online-soudan .btn-area {
  width: 990px;
  margin: 80px auto 52px;
}
#acosme_keio-20220609 .online-soudan .btn-area .app-date {
  color: #f28596;
  font-size: 30px;
  margin: 0 510px 10px 0;
  font-weight: 600;
}
#acosme_keio-20220609 .online-soudan .btn-area .btn-box {
  display: flex;
}
#acosme_keio-20220609 .online-soudan .btn-area .btn-box > a > div {
  width: 480px;
  height: 117px;
  padding: 23px 0 25px;
  font-size: 20px;
  box-sizing: border-box;
}
#acosme_keio-20220609 .online-soudan .btn-area .btn-box > a > div span {
  font-size: 30px;
  font-weight: 600;
}
#acosme_keio-20220609 .online-soudan .btn-area .btn-01 {
  background-color: #fff;
  border: #fc90a1 solid 2px;
  color: #fc90a1;
  margin-right: 30px;
  /*opacity: 0.4*/
  width: 480px;
  height: 117px;
  padding: 23px 0 25px;
  font-size: 20px;
  box-sizing: border-box;
}
#acosme_keio-20220609 .online-soudan .btn-area .btn-01 span {
  font-size: 30px;
  font-weight: 600;
}
#acosme_keio-20220609 .online-soudan .btn-area .btn-02 {
  background-color: #fc90a1;
  color: #fff;
}

/*
#acosme_keio-20220609 .online-soudan .last-area {
  background-color: #fff;
  width: 990px;
  height: 136px;
  padding: 30px 0 28px;
  margin: 0 auto;
  box-sizing: border-box;
  color: #e97184;
  font-size: 24px;
  border-radius: 82px;
  position: relative;
}
#acosme_keio-20220609 .online-soudan .last-area::before {
  content: "";
  display: inline-block;
  background-image: url(/ec/shop/images/campaign/20220609_acosme_keio_2022/icon_chat.png);
  background-repeat: no-repeat;
  width: 95px;
  height: 96px;
  background-size: contain;
  position: absolute;
  top: 20px;
  left: 90px;
}
#acosme_keio-20220609 .online-soudan .last-area .bold {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 2px;
}
*/
/* =============================================
PC・SP非表示
============================================= */
#acosme_keio-20220609 .pc {
  display: inline-block;
}
#acosme_keio-20220609 .sp {
  display: none;
}