@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;300;600&display=swap");
/*--- import -------------------------------------*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  word-break: break-word;
  box-sizing: border-box;
  vertical-align: baseline;
  background: transparent; }

html, body {
  overflow-x: hidden; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

li {
  list-style-type: none; }

blockquote, q {
  quotes: none; }
  blockquote::before, blockquote::after, q::before, q::after {
    content: '';
    content: none; }

a {
  text-decoration: none;
  color: inherit; }

img, picture {
  vertical-align: top;
  max-width: 100%; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

input, select {
  vertical-align: middle; }

/* safariでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box; }
  input[type="submit"]::-webkit-search-decoration,
  input[type="button"]::-webkit-search-decoration {
    display: none; }
  input[type="submit"]::focus,
  input[type="button"]::focus {
    outline-offset: -2px; }

/*------------------------------------- import ---*/
main {
  font-family: 'Noto Sans JP', sans-serif;
  color: #595758; }

.mv {
  background: linear-gradient(90deg, #f7a8ab 0%, #dfb5e5 100%);
  padding: 100px 0 50px; }
  .mv h2 {
    position: relative;
    z-index: 1; }
  @media screen and (max-width: 750px) {
    .mv {
      padding: 50px 0;
      background-position: top 48% center; }
      .mv h2 {
        top: 5vw; }
        .mv h2 img {
          width: 61.7333333333vw; } }
  @media screen and (max-width: 480px) {
    .mv h2 {
      top: 9vw; } }

.wrap_content {
  padding-bottom: 60px; }

#bellaty_intro {
  position: relative;
  background: url("../images/bellaty/intro_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center center; }
  #bellaty_intro .box_in {
    padding: 60px 0 0 0;
    display: flex;
    align-items: center;
    max-width: 1200px;
    position: relative; }
    #bellaty_intro .box_in .message {
      position: relative;
      top: -40px; }

#intro .box_in {
  max-width: 1200px; }
  #intro .box_in .flex {
    justify-content: space-between;
    display: flex;
    align-items: center; }
    #intro .box_in .flex .txt_area {
      width: 40%;
      text-align: left; }
      #intro .box_in .flex .txt_area .num_area {
        color: #ff80b9;
        font-size: 17px;
        letter-spacing: 0; }
        #intro .box_in .flex .txt_area .num_area span {
          font-size: 27px;
          margin-left: 5px; }
      #intro .box_in .flex .txt_area h2 {
        font-weight: 500;
        margin-top: 60px;
        font-size: 21px; }
        #intro .box_in .flex .txt_area h2 span {
          color: #f37678; }
      #intro .box_in .flex .txt_area .txt {
        letter-spacing: 0.03rem;
        font-size: 15px;
        margin-top: 40px;
        line-height: 1.7; }
        #intro .box_in .flex .txt_area .txt span {
          color: #f37678;
          font-weight: bold; }
    #intro .box_in .flex .images {
      width: 57%; }
  #intro .box_in .reverse {
    flex-flow: row-reverse; }
    #intro .box_in .reverse .txt_area {
      width: 45%; }
    #intro .box_in .reverse .images {
      width: 47%; }

@media screen and (max-width: 750px) {
  #intro .box_in .flex {
    display: block; }
    #intro .box_in .flex .txt_area {
      width: 100%; }
      #intro .box_in .flex .txt_area .num_area {
        font-size: 17px; }
        #intro .box_in .flex .txt_area .num_area span {
          font-size: 27px;
          margin-left: 5px; }
      #intro .box_in .flex .txt_area h2 {
        letter-spacing: 0.02rem;
        margin-top: 8vw;
        font-size: 19px; }
        #intro .box_in .flex .txt_area h2 span {
          font-weight: bold; }
      #intro .box_in .flex .txt_area .txt {
        font-size: 15px;
        margin-top: 5.3333333333vw; }
    #intro .box_in .flex .images {
      margin: 0 auto;
      max-width: 450px;
      margin-top: 2.6666666667vw;
      width: 100%;
      text-align: center; }
  #intro .box_in .reverse {
    flex-flow: row-reverse; }
    #intro .box_in .reverse .txt_area {
      width: 100%; }
    #intro .box_in .reverse .images {
      width: 100%; } }
#intro .area1 {
  max-width: 1200px;
  margin: 60px auto;
  background: url("../images/bellaty/intro01_bg.jpg") no-repeat;
  background-size: cover;
  text-align: right;
  background-position: center center; }
  @media screen and (max-width: 750px) {
    #intro .area1 {
      margin: 8vw auto;
      background-position: center left 27%; } }
  #intro .area1 .box_in {
    padding: 0; }
  #intro .area1 .area1_wrap {
    margin-right: 0px;
    background: rgba(255, 255, 255, 0.8);
    padding: 60px 40px;
    max-width: 600px;
    width: 100%;
    display: inline-block; }
    @media screen and (max-width: 750px) {
      #intro .area1 .area1_wrap {
        padding: 10.6666666667vw 20px; } }
    #intro .area1 .area1_wrap h2 {
      font-weight: 500;
      font-size: 21px;
      text-align: center; }
      @media screen and (max-width: 750px) {
        #intro .area1 .area1_wrap h2 {
          letter-spacing: 0rem; } }
    #intro .area1 .area1_wrap .txt {
      text-align: left;
      letter-spacing: 0.03rem;
      font-size: 15px;
      margin-top: 40px;
      line-height: 1.7; }
      @media screen and (max-width: 750px) {
        #intro .area1 .area1_wrap .txt {
          margin-top: 5.3333333333vw; } }
      #intro .area1 .area1_wrap .txt span {
        color: #f37678;
        font-weight: bold; }
    #intro .area1 .area1_wrap .images {
      text-align: center;
      margin-top: 20px; }

#size .box_in {
  max-width: 1200px; }
  #size .box_in .ttl {
    font-size: 18px;
    font-family: "游明朝", YuMincho, 'Noto Serif JP',"Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝",serif; }
  #size .box_in .flex {
    margin-top: 40px;
    display: flex;
    justify-content: space-between; }
    #size .box_in .flex .images {
      width: 35%; }
    #size .box_in .flex .table_area {
      width: 65%; }
      #size .box_in .flex .table_area ul li {
        font-size: 14px;
        text-align: left;
        letter-spacing: 0;
        display: flex; }
        #size .box_in .flex .table_area ul li:not(:last-child) {
          border-bottom: 1px dotted; }
        #size .box_in .flex .table_area ul li .ul_ttl {
          font-weight: bold;
          width: 160px;
          padding: 15px 10px;
          background: #ece5dd;
          display: flex;
          align-items: center; }
        #size .box_in .flex .table_area ul li .con {
          width: calc(100% - 160px);
          padding: 10px;
          text-align: left;
          display: flex;
          align-items: center; }

@media screen and (max-width: 750px) {
  #size .box_in .flex {
    margin-top: 40px;
    display: block; }
    #size .box_in .flex .images {
      width: 100%;
      text-align: center; }
      #size .box_in .flex .images img {
        width: 240px; }
    #size .box_in .flex .table_area {
      max-width: 750px;
      width: 100%;
      margin-top: 20px; }
      #size .box_in .flex .table_area ul li {
        font-size: 14px; }
        #size .box_in .flex .table_area ul li .ul_ttl {
          width: 140px;
          padding: 15px 10px; }
        #size .box_in .flex .table_area ul li .con {
          width: calc(100% - 140px);
          padding: 10px; } }
#use {
  margin-bottom: 120px; }
  @media screen and (max-width: 750px) {
    #use {
      margin-bottom: 16vw; } }
  #use .box_in {
    max-width: 960px;
    background: url("../images/bellaty/size_bg.jpg") no-repeat;
    background-size: cover;
    border-radius: 15px; }
    @media screen and (max-width: 1040px) {
      #use .box_in {
        padding: 60px 20px; } }
    @media screen and (max-width: 480px) {
      #use .box_in {
        padding: 60px 40px; } }
    #use .box_in .ttl {
      font-size: 18px;
      font-family: "游明朝", YuMincho, 'Noto Serif JP',"Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝",serif; }
    #use .box_in .flex ul {
      margin-top: 60px;
      display: flex;
      justify-content: space-between; }
      #use .box_in .flex ul li {
        width: 27%;
        position: relative; }
        #use .box_in .flex ul li .num {
          position: absolute;
          top: -30px;
          left: 0;
          width: 100%;
          text-align: center;
          z-index: 1; }
          @media screen and (max-width: 750px) {
            #use .box_in .flex ul li .num img {
              width: 12.2666666667vw; } }
          @media screen and (max-width: 480px) {
            #use .box_in .flex ul li .num img {
              width: 92px; } }
        #use .box_in .flex ul li .images {
          text-align: center; }
        #use .box_in .flex ul li .txt {
          margin-top: 20px;
          font-size: 14px;
          text-align: left;
          letter-spacing: 0; }
      #use .box_in .flex ul .li_2 .images {
        position: relative; }
        #use .box_in .flex ul .li_2 .images .images2 {
          position: absolute;
          bottom: -17px;
          right: -58px; }
          @media screen and (max-width: 1040px) {
            #use .box_in .flex ul .li_2 .images .images2 {
              bottom: -1.6346153846vw;
              right: -5.5769230769vw; }
              #use .box_in .flex ul .li_2 .images .images2 img {
                width: 11.619047619vw; } }
      @media screen and (max-width: 480px) {
        #use .box_in .flex ul {
          display: block; }
          #use .box_in .flex ul li {
            margin: 0 auto;
            max-width: 300px;
            width: 90%; }
            #use .box_in .flex ul li:not(:first-child) {
              margin-top: 40px; }
          #use .box_in .flex ul .li_2 .images .images2 {
            bottom: -3.5416666667vw;
            right: -7.083333vw; }
            #use .box_in .flex ul .li_2 .images .images2 img {
              width: 25.4166666667vw; } }

.buy_area {
  background: #c2e7ff; }
  .buy_area .box_in {
    padding-bottom: 0; }
    .buy_area .box_in a {
      display: inline-block; }
      .buy_area .box_in a img {
        width: 100%;
        border-radius: 15px; }

.sns_area {
  margin-top: 0; }