@charset "UTF-8";
/* CSS Document */
.sectionWrap p .pre{
  font-size: 10px;
  font-family: "Cormorant Garamond", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
}
#Contents > table {
  margin: 0 auto;
}
#mainLP_Contents {
  margin: 60px auto;
}
#mainLP_Contents img{
  display: block;
  width: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

.main-area, .main_inner {
  font-family: "Hiragino Kaku Gothic ProN", "Karla", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  font-style: normal;
  font-weight: normal;
  margin: auto;
  max-width: 1200px;
  text-align: center;
  width: 100%;
}

/* toggle visibility for responsive object */
.sp-component {
  display: block;
}

@media only screen and (min-width: 560px) {
  .sp-component {
    display: none;
  }
}

.pc-component {
  display: none;
}

@media only screen and (min-width: 560px) {
  .pc-component {
    display: block;
  }
}

/* ===============================================
    ! Object !
=============================================== */
/* ===============================================
    ! Layout !
=============================================== */
/* =====================================
    * Style of SP-view *
===================================== */
/* =================================
    * common style *
================================= */
/* text-style */
.title__txt {
  font-size: calc(50 * (100vw / 750));
  font-weight: bold;
  letter-spacing: .05em;
  line-height: 1.5;
}

.ja {
  font-family: "Hiragino Kaku Gothic ProN", "Karla", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
}

.desc__txt {
  -webkit-font-feature-settings: 'palt';
          font-feature-settings: 'palt';
  font-size: calc(26 * (100vw / 750));
  letter-spacing: .03em;
  line-height: 1.75;
}

.happybag-name__txt {
  font-size: calc(30 * (100vw / 750));
  font-weight: bold;
  line-height: 1.7;
}

.happybag-desc__txt {
  margin: calc(30 * (100vw / 750)) auto 0;
  text-align: justify;
}

.price {
  font-weight: bold;
}

.annotation {
  color: rgba(0, 0, 0, 0.5);
  display: block;
  font-size: calc(24 * (100vw / 750));
  line-height: 1.5;
  margin-top: calc(20 * (100vw / 750));
  margin-bottom: calc(20 * (100vw / 750));
}

/* Structure */
.main-area.lp {
  padding-top: calc(60 * (100vw / 750));
}

.main-inner {
  padding: 0 calc(35 * (100vw / 750)) calc(100 * (100vw / 750));
}

.header-logo {
  margin: 0 auto 20px;
  width: calc(250 * (100vw / 750));
}

.sec-style {
  display: block;
}

.title__border {
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
  color: #000;
  font-size: calc(30 * (100vw / 750));
  font-weight: bold;
  line-height: 1;
  padding-top: calc(30 * (100vw / 750));
  padding-bottom: calc(30 * (100vw / 750));
}

.img__wrapper {
  display: block;
  margin: calc(50 * (100vw / 750)) auto 0;
  width: calc(400 * (100vw / 750));
}

.reserve__btn {
  color: #fff;
  display: block;
  font-size: calc(26 * (100vw / 750));
  line-height: calc(46 * (100vw / 750));
  padding: calc(10 * (100vw / 750));
  text-align: center;
}

.reserve__btn--bk {
  background-color: #000;
}

.reserve__btn--gy {
  background-color: #b4b4b4;
}

.reserve__btn .bold {
  font-weight: bold;
}

/* =================================
    * heading *
================================= */
.heading-title__txt {
  font-family: 'Abril Fatface';
  font-size: calc(76 * (100vw / 750));
  font-weight: normal;
  letter-spacing: .04em;
}

.heading-title__txt--sub {
  font-size: calc(34 * (100vw / 750));
  font-weight: normal;
  letter-spacing: .1em;
  line-height: 1.6;
  margin-top: calc(26 * (100vw / 750));
}

.heading-title__txt .ja {
  font-size: calc(30 * (100vw / 750));
  font-weight: bold;
  letter-spacing: .04em;
}

.heading-img__wrapper {
  margin: calc(80 * (100vw / 750)) auto;
}

.membership {
  margin: calc(60 * (100vw / 750)) auto;
}

.membership .reserve__btn {
  height: calc(40 * (100vw / 750));
  line-height: calc(40 * (100vw / 750));
  padding: 0;
  margin: 0 auto;
  width: calc(350 * (100vw / 750));
}




/* =================================
    * happybag-content *
================================= */
.happybag-content1 .reserve__btn {
  margin: 1rem auto;
}
.happybag-content2 {
  margin-top: calc(100 * (100vw / 750));
}

.ladies-happybag {
  padding-top: calc(60 * (100vw / 750));
}

.homme-happybag {
  margin-top: calc(150 * (100vw / 750));
}

.homme-happybag .img__wrapper {
  margin-top: 0;
}

.btn-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 4rem;
  gap: 2rem 0;
}

/* =================================
    * attention *
================================= */
.attention__container {
  border: solid 1px #000;
  margin: calc(100 * (100vw / 750)) auto 0;
  padding: 0 calc(30 * (100vw / 750)) calc(40 * (100vw / 750));
  text-align: left;
}

.attention-title__txt {
  font-size: calc(28 * (100vw / 750));
  margin-top: calc(40 * (100vw / 750));
  margin-bottom: calc(10 * (100vw / 750));
}

.attention-desc__txt {
  font-size: calc(24 * (100vw / 750));
  line-height: 1.6;
}

.attention-desc__txt:first-child {
  margin-top: 0;
}

.attention-desc__txt .annotation {
  margin-top: 0;
}

.attention-list {
  list-style: disc;
  padding-left: calc(30 * (100vw / 750));
}

			/* for happybag2 */
			.mail-magazine {
        margin-top: calc(80 * (100vw / 750));
        }

        .mail-magazine .annotation {
        color: #000;
        font-size: calc(24 * (100vw / 750));
        }

        .mail-magazine .reserve__btn {
        margin-top: calc(20 * (100vw / 750));
        }


@media only screen and (max-width:560px){
  .membership .reserve__btn {
    height: calc(90 * (100vw / 750));
    line-height: calc(90 * (100vw / 750));
    padding: 0;
    width: calc(500 * (100vw / 750));
  }
  .membership .annotation {
    font-size: calc(20 * (100vw / 750));
  }
}
/* =====================================
    * Style of Tablet-view *
===================================== */
@media only screen and (min-width: 560px) {
  /* =================================
    * common style *
================================= */
  /* text-style */
  .title__txt {
    font-size: calc(40 * (100vw / 1400));
  }
  .desc__txt {
    font-size: calc(14 * (100vw / 1400));
    text-align: center;
  }
  .happybag-name__txt {
    font-size: calc(18 * (100vw / 1400));
  }
  .happybag-desc__txt {
    margin-top: calc(15 * (100vw / 1400));
  }
  .price {
    font-size: calc(18 * (100vw / 1400));
  }
  .annotation {
    font-size: calc(12 * (100vw / 1400));
    margin-top: calc(10 * (100vw / 1400));
    margin-bottom: calc(10 * (100vw / 1400));
  }
  /* Structure */
  .main-area.lp {
    padding-top: calc(40 * (100vw / 1400));
  }
  .main-area h1 {
    margin: 0 auto 50px;
    width: calc(220 * (100vw / 1400));
  }
  .main-area .main-inner {
    width: 100%;
  }
  .header-logo {
    margin: 0 auto 50px;
    max-width: 130px;
    width: 100%;
  }
  .title__border {
    font-size: calc(22 * (100vw / 1400));
    border-top: solid calc(3 * (100vw / 1400)) #000;
    border-bottom: solid calc(3 * (100vw / 1400)) #000;
    margin: auto;
    padding-top: calc(25 * (100vw / 1400));
    padding-bottom: calc(25 * (100vw / 1400));
    width: 90%;
  }
  .img__wrapper {
    margin-top: calc(20 * (100vw / 1400));
    width: calc(300 * (100vw / 1400));
  }
  .reserve__btn {
    font-size: calc(14 * (100vw / 1400));
    line-height: calc(25 * (100vw / 1400));
    padding: calc(10 * (100vw / 1400));
    width: calc(380 * (100vw / 1400));
  }


  /* =================================
    * heading *
================================= */
  .heading-title__txt {
    font-size: calc(80 * (100vw / 1400));
  }
  .heading-title__txt--sub {
    font-size: calc(27 * (100vw / 1400));
    margin-top: calc(30 * (100vw / 1400));
  }
  .heading-title__txt .ja {
    display: block;
    font-size: calc(22 * (100vw / 1400));
  }
  .heading-img__wrapper {
    margin-top: calc(40 * (100vw / 1400));
  }
  /* =================================
    * happybag-content *
================================= */
  .happybag-content2 {
    margin-top: 0;
  }
  .ladies-happybag {
    border: none;
    margin: calc(50 * (100vw / 1400)) auto;
    padding-top: calc(20 * (100vw / 1400));
    width: 85%;
  }
  .ladies-happybag__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: auto;
    width: 100%;
  }
  .ladies-happybag .happybag-content {
    /* width: 55%; */
    margin: 0 auto;
  }
  .ladies-happybag .desc__txt {
    /* height: calc(150 * (100vw / 1400)); */
  }
  .ladies-happybag .reserve__btn {
    margin-top: calc(30* (100vw / 1400));
  }
  .homme-happybag {
    margin: calc(160 * (100vw / 1400)) auto;
    width: 85%;
  }
  /* =================================
    * attention *
================================= */
  .attention__container {
    margin: calc(75 * (100vw / 1400)) auto 0;
    padding: calc(20 * (100vw / 1400)) calc(40 * (100vw / 1400)) calc(40 * (100vw / 1400));
    width: 90%;
  }
  .attention-title__txt {
    font-size: calc(16 * (100vw / 1400));
    margin-top: calc(20 * (100vw / 1400));
    margin-bottom: calc(10 * (100vw / 1400));
  }
  .attention-desc__txt {
    font-size: calc(14 * (100vw / 1400));
    margin-top: calc(5 * (100vw / 1400));
    text-align: left;
  }
  .attention-list {
    padding-left: calc(20 * (100vw / 1400));
  }
  .attention1 .attention-desc__txt {
    padding-left: calc(20 * (100vw / 1400));
  }

  			/* for happybag2 */
        .mail-magazine {
          margin-top: calc(50 * (100vw / 1400));
        }
        .mail-magazine .annotation {
          font-size: calc(14 * (100vw / 1400));
        }
        .mail-magazine .reserve__btn {
          margin-top: calc(10 * (100vw / 1400));
        }
}

/* =====================================
    *  Style of PC-view *
===================================== */
@media only screen and (min-width: 1200px) {
  /* =================================
    * common style *
================================= */
  /* text-style */
  .title__txt {
    font-size: 40px;
  }
  .desc__txt {
    font-size: 14px;
    text-align: center;
  }
  .happybag-name__txt {
    font-size: 18px;
  }
  .happybag-desc__txt {
    margin-top: 15px;
  }
  .price {
    font-size: 18px;
  }
  .annotation {
    font-size: 12px;
    margin-top: 10px;
  }
  /* Structure */
  .main-area.lp {
    padding-top: 40px;
  }
  .main-area h1 {
    width: 220px;
    max-width: 100%;
  }
  .title__border {
    font-size: 22px;
    border-top: solid 3px #000;
    border-bottom: solid 3px #000;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .img__wrapper {
    margin-top: 20px;
    width: 300px;
  }
  .reserve__btn {
    font-size: 14px;
    line-height: 25px;
    padding: 10px;
    width: 380px;
  }
  .btn__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .signup {
    margin-right: 50px;
  }
  /* =================================
    * heading *
================================= */
  .heading-title__txt {
    font-size: 80px;
  }
  .heading-title__txt--sub {
    font-size: 27px;
    margin-top: 30px;
  }
  .heading-title__txt .ja {
    font-size: 22px;
  }
  .heading-img__wrapper {
    margin-top: 40px;
  }
  .membership {
    margin: 60px auto;
  }
  .membership .reserve__btn {
    height: 50px;
    line-height: 50px;
    padding: 0;
    margin: 0 auto;
    width: 380px;
  }
  .membership .annotation {
    font-size: 12px;
  }
  /* =================================
    * happybag-content *
================================= */
  .ladies-happybag {
    margin: 50px auto;
    padding-top: 20px;
  }
  .ladies-happybag .desc__txt {
    /* height: 150px; */
  }
  .ladies-happybag .reserve__btn {
    /* margin-top: 10px; */
  }
  .homme-happybag {
    margin: 160px auto;
  }
  /* =================================
    * attention *
================================= */
  .attention__container {
    margin-top: 75px;
    padding: 20px 40px 40px;
  }
  .attention-title__txt {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .attention-desc__txt {
    font-size: 14px;
    margin-top: 5px;
    text-align: left;
  }
  .attention-list {
    padding-left: 20px;
  }
  .attention1 .attention-desc__txt {
    padding-left: 20px;
  }

  			/* for happybag2 */
        .mail-magazine {
          margin-top: 50px;
        }
        .mail-magazine .annotation {
          font-size: 14px;
        }
        .mail-magazine .reserve__btn {
          margin-top: 10px;
        }
}