@charset "utf-8";

/* ==========================================================================
   1. 全体設定
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

#wrapper {
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 780px;
  margin: 1% auto;
  color: #735b5d;
}

#wrapper img {
  width: 100%;
}

#wrapper a:hover img {
  opacity: 1;
}

/* ==========================================================================
   2. 共通テキスト・パーツ
   ========================================================================== */
#wrapper p {
  text-align: center;
  color: #735b5d;
  font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  line-height: 9vw;
}

#wrapper .bold {
  font-weight: bold;
}

#wrapper .section_title {
  padding: 8% 0 0;
}

#wrapper .section_title h2 {
  background: #f9f9f8;
  padding: 2% 0;
  text-align: center;
  box-shadow: 0 0 1px #cdb7b7;
  font-size: 3.3vw; font-weight: bold; letter-spacing: 0.3px;
}


#wrapper .l_beige p, #wrapper .d_beige p, #wrapper .pinks p, #wrapper .gray p, #wrapper .latte p { font-size: 2.8vw; }

#wrapper .point_area, #wrapper .heart_select, #wrapper .r_sec { position: relative; }

#wrapper .point, #wrapper .comment, #wrapper .comment2, #wrapper .item_name, #wrapper .item_name2, #wrapper .d_comment, #wrapper .d_comment2, #wrapper .item_name_db, #wrapper .beiges_name, #wrapper .beiges_name2, #wrapper .beiges_name3, #wrapper .dbeiges_name, #wrapper .dbeiges_name2, #wrapper .dbeiges_name3, #wrapper .pinks_name, #wrapper .pinks_name2, #wrapper .g_item_name, #wrapper .g_item_name2, #wrapper .pr_comment, #wrapper .pr_item_name, #wrapper .lt_item_name, #wrapper .lt_comment, #wrapper .g_comment, #wrapper .g_comment2 { position: absolute; }

#wrapper .d_comment, #wrapper .d_comment2, #wrapper .lt_comment, #wrapper .g_comment, #wrapper .g_comment2 { font-size: 3.1vw; line-height: 4.8vw; font-weight: bold; }

#wrapper .comment, #wrapper .comment2 { line-height: 4.8vw; font-weight: bold; }

/* ==========================================================================
   3. メインエリア
   ========================================================================== */
#wrapper .topview {
  background: #f9f9f8;
}

#wrapper .top_txt {
  padding-bottom: 3%;
}

#wrapper .point_inner {
  width: 90%;
  margin: 11% auto 10%;
  padding: 12% 0 1%;
  background: white;
  border: 1px solid #c8a8ab;
  border-radius: 13px;
  box-shadow: 1px 1px 2px #e4d9d7;
}

#wrapper .point_inner_txt {
  margin-bottom: 5%;
  font-size: 3.5vw;
  line-height: 7vw;
}

#wrapper .point {
  width: 58%;
  margin: 0 auto;
  background: #c8a8ab;
  padding: 3% 0;
  border-radius: 5px;
  top: -6%;
  right: 20%;
}

#wrapper .point_title {
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 3.3vw;
  letter-spacing: 2.5px;
}

#wrapper .click {
  width: 65%;
  margin: 0 auto 9%;
}

#wrapper .click_bra {
  width: 44.5%;
  margin: 0 auto 7%;
}

#wrapper .click_shorts {
  width: 40.5%;
  margin: 7% auto 7%;
}

#wrapper hr {
  border: 0;
  border-bottom: 1px dotted #d6bcbf;
}

#wrapper ul {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    padding: 0 20px;   
    box-sizing: border-box;
}

#wrapper ul li {
    text-align: center;
    margin-bottom: 5%;
    flex: 0 0 27.5%;
}

#wrapper .heart {
  width: 55%;
}

#wrapper .heart_txt {
  font-size: 2.7vw;
}

#wrapper .l_beige {
  background: #eedbd0;
  padding-bottom: 10%;
}

#wrapper .color_title {
  width: 70%;
  margin: 0 auto;
  padding: 10% 0 5%;
}

#wrapper .comment {
  top: 21.3%;
  right: 10%;
}

#wrapper .item_name {
  bottom: -5%;
  left: 8%;
}

#wrapper .comment2 {
  bottom: 21.5%;
  left: 9%;
}

#wrapper .item_name2 {
    bottom: 3%;
    right: 8%;
}

#wrapper .d_beige {
  background: #d3b3a1;
}

#wrapper .item_name_db {
bottom: -5%;
  left: 8%;
}

#wrapper .d_comment {
  top: 22%;
  right: 7.5%;
}

#wrapper .d_comment2 {
	top: 39.5%;
	left: 10%;
}

#wrapper .latte {
  background: #f0e5e1;
  padding-bottom: 10%;
}

#wrapper .lt_comment {
    top: 39%;
    right: 8%;
}

#wrapper .lt_item_name {
    bottom: -5%;
    left: 15%;
}

#wrapper .gray {
  background: #dddbe6;
  padding-top: 10%;
}

#wrapper .g_comment {
  top: 34%;
  right: 9%;
}

#wrapper .g_item_name {
    bottom: -6%;
    left: 5%;
}

#wrapper .g_comment2 {
  top: 34%;
  left: 12%;
}

#wrapper .g_item_name2 {
	bottom: 4.5%;
  right: 11%;
  line-height: 5vw;
}

#wrapper .pinks {
  background: #eac6cd;
  padding-bottom: 10%;
}

#wrapper .pinks_name {
bottom: -14%;
right: 8%;
}

#wrapper .pinks_name2 {
  bottom: -3%;
  right: 8%;
}

#wrapper .flot_box {
  width: 90%;
  margin: 12% auto 0;
}

#wrapper .f-lift {
  width: 48%;
  float: left;
}

#wrapper .f-right {
  width: 48%;
  float: right;
}

#wrapper .clear {
  clear: both;
}

#wrapper .model2 {
  padding: 10% 0 7%;
}

#wrapper .model2_p {
  padding: 10% 0 6%;
}

#wrapper .purple_ct {
  background: #fcf9f7;
  width: 60%;
  padding: 3% 0;
  border-radius: 5px;
  text-align: center;
  margin: 0 auto;
  font-size: 3.3vw; font-weight: bold; letter-spacing: 1px;
}

#wrapper .shorts_bg {
  padding: 3% 0 5%;
}

#wrapper .beiges_name {
  bottom: -6%;
  left: 19%;
}

#wrapper .beiges_name2 {
	top: 29.5%;
    right: 9%;
    font-weight: bold;
}

#wrapper .beiges_name3 {
  bottom: 35%;
  right: 14%;
}

#wrapper .dbeiges_name {
    bottom: -14%;
    right: 19%;
}

#wrapper .dbeiges_name2 {
   top: 29.2%;
  right: 8.5%;
  font-weight: bold;
}

#wrapper .dbeiges_name3 {
  bottom: 35%;
  right: 15%;
}

#wrapper .color_title_g {
  width: 50%;
  margin: 0 auto;
  padding: 10% 0 3%;
}

#wrapper .last {
  background: #dddbe6;
  padding-bottom: 15%;
}

#wrapper .last_imgs img {
  vertical-align: bottom;
  display: block;
  padding-top: 6%;
}

#wrapper .f_box {
  display: flex;
  overflow-x: scroll;
  scrollbar-color: #b1adc6 #dddbe6;
  scrollbar-width: thin;
}

#wrapper .f_box div {
  width: 50%;
  margin: 5px;
  flex-shrink: 0;
}

#wrapper .f_box div:first-of-type {
  margin-left: 5%;
}

/* ==========================================================================
   4. PC用設定 (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {
  #wrapper {
    width: 100%;
  }

  #wrapper p {
    font-size: 1.9rem;
    line-height: 4rem;
    letter-spacing: 0.2rem;
  }


  #wrapper .l_beige p, #wrapper .d_beige p, #wrapper .pinks p, #wrapper .gray p, #wrapper .latte p { font-size: 2rem; }


  #wrapper p.lt_comment, #wrapper p.g_comment, #wrapper p.g_comment2, #wrapper p.comment, #wrapper p.comment2, #wrapper p.d_comment, #wrapper p.d_comment2 { font-size: 1.9rem; }

  #wrapper p.lt_comment, #wrapper p.g_comment, #wrapper p.g_comment2, #wrapper p.comment { line-height: 3.5rem; }
  #wrapper p.comment2, #wrapper p.d_comment, #wrapper p.d_comment2 { line-height: 2rem; }
  
  #wrapper .g_item_name, #wrapper .g_item_name2 { line-height: 4rem; }


  #wrapper .point_title {
    font-size: 2.3rem;
    letter-spacing: 0.36rem;
  }

  #wrapper .point {
    width: 50%;
    padding: 2.5% 0;
    border-radius: 15px;
    top: -6%;
    right: 24%;
  }

  #wrapper .point_inner {
    width: 72%;
    margin: 11% auto 10%;
    padding: 12% 0 3%;
    border-radius: 13px;
  }

  #wrapper .point_inner_txt {
    margin-bottom: 5%;
    font-size: 2rem;
    line-height: 4rem;
  }

  #wrapper .click {
    width: 48%;
  }

  #wrapper .click_bra {
    width: 32%;
  }

  #wrapper .click_shorts {
    width: 28%;
    margin: 7% auto 7%;
  }

#wrapper ul {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 3%;
}
	
#wrapper ul li {
    flex: 0 0 20%;
}

  #wrapper ul li p {
    font-size: 1.5rem;
    line-height: 4rem;
    letter-spacing: 0rem;
  }

  #wrapper .heart {
    width: 75%;
  }

  #wrapper .heart_txt {
    font-size: 1.4rem;
  }

  #wrapper .section_title h2 {
    font-size: 2rem;
  }

  #wrapper .model2_p {
    padding: 10% 0 10%;
  }

  #wrapper .color_title {
    width: 60%;
  }

  #wrapper .lt_comment {
    top: 39.5%;
    right: 8%;
  }

  #wrapper .lt_item_name {
    bottom: -4%;
  }

  #wrapper .g_comment {
	top: 34.3%;
    right: 9%;
  }

  #wrapper .g_comment2 {
	top: 33.5%;
    left: 13%;
  }
	
#wrapper .g_item_name {
bottom: -4%;
    left: 5%;
}

  #wrapper .g_item_name2 {
    bottom: 7%;
    right: 11%;
  }

  #wrapper .beiges_name {
   bottom: -7%;
    left: 19%;
  }
	
#wrapper .pinks_name {
	bottom: -12%;
    right: 8%;
}

  #wrapper .pinks_name2 {
    bottom: 3%;
    right: 8%;
  }

  #wrapper .comment {
        top: 21.5%;
        right: 11%;
  }

  #wrapper .item_name {
        bottom: -4%;
  }

  #wrapper .comment2 {
    bottom: 22%;
    left: 9%;
  }

  #wrapper .item_name2 {
    bottom: 5%;
    right: 6%;
  }

  #wrapper .d_comment {
        top: 23.3%;
        right: 8%;
  }

  #wrapper .d_comment2 {
	top: 40.3%;
    left: 9.5%;
  }

  #wrapper .purple_ct {
    width: 45%;
    border-radius: 8px;
    font-size: 2rem;
    letter-spacing: 3px;
  }
	
#wrapper .beiges_name2 {
    top: 32.5%;
    right: 9%;
    font-weight: bold;
}
	
#wrapper .dbeiges_name {
    bottom: -11%;
    right: 17%;
}

#wrapper .dbeiges_name2 {
    top: 32%;
    right: 8.5%;
}

    #wrapper .dbeiges_name3 {
        bottom: 37%;
    }

  #wrapper .beiges_name3 {
    bottom: 37%;
  }
}