body {
  margin:0;
  padding:0;
  font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  background-color:#FFF;
}

#wrapper {
  overflow:hidden;
}

.what_btn {
  position:fixed;
  bottom:1%;
  right:1%;
  z-index:1000;
}

.what_btn a {
  margin-left:auto;
  display:block;
}

.what_btn a img {
  width:100%;
}

@media screen and (max-width:1400px) {
  .what_btn a {
    width:90%;
  }
}
@media screen and (max-width:1200px) {
  .what_btn a {
    width:80%;
  }
}
@media screen and (max-width:1000px) {
  .what_btn a {
    width:70%;
  }
}
@media screen and (max-width:800px) {
  .what_btn a {
    width:60%;
  }
}
@media screen and (max-width:600px) {
  .what_btn a {
    width:50%;
  }
}
@media screen and (max-width:400px) {
  .what_btn a {
    width:40%;
  }
}

a {
  /* display:block; */
  cursor:pointer;
}

a:hover {
  opacity:0.8;
}

.pc {
  display:block;
}

.sp {
  display:none !important;
}

#overview h2,
#present h2,
#post h2,
#product h2 {
  text-align:center;
  padding:5% 0 2% !important;
}

h3 {
  text-align:center;
}

.overview_section {
  max-width:1000px;
  margin:0 auto;
  width:90%;
  padding-bottom:5%;
}

.top_flag {
  position:absolute;
  top:0;
  right:0;
  width:100%;
}



/*-------------------------
[1]top
-------------------------*/
#main_visial {
  background-image:url('../img/top_back.png');
  background-position:top center;
  background-size:100%;
  position:relative;
}

.top_item {
  max-width:1600px;
  margin:0 auto;
  position:relative;
}
@media screen and (max-width:1400px) {
  .top_item {
    display:none;
  }
}

.top_ballon_l {
  position:absolute;
  top:0;
  left:0;
  max-width:302px;
  width:18.87%;
}

.top_ballon_r {
  position:absolute;
  top:0;
  right:0;
  max-width:293px;
  width:18.31%;
}

.header_section {
  max-width:1200px;
  width:95%;
  margin:0 auto;
  position:relative;
}

.header_main {
  text-align:center;
}

.top_main,
.top_text {
  max-width:700px;
  width:58.33%;
}

.top_img1 {
  position:absolute;
  top:7%;
  left:0;
  max-width:316px;
  width:24.75%;
}

.top_img2 {
  position:absolute;
  top:15%;
  right:0;
  max-width:313px;
  width:24.56%;
}

.top_soap {
  position:absolute;
  bottom:-7%;
  left:0;
  max-width:210px;
  width:18.12%;
}

.top_present {
  position:absolute;
  bottom:-7%;
  right:0;
  max-width:369px;
  width:28.06%;
}

.header_subsection {
  background-color:#e84090;
  text-align:center;
}

.top_date {
  max-width:603px;
  width:37.68%;
  padding:1%;
}


/*-------------------------
[2]overview
-------------------------*/
#overview {
  background-image:url('../img/overview_back.png');
  background-position:top center;
  background-size:100%;
  position:relative;
}

.overview_title {
  max-width:388px;
  width:30%;
}

.overview_text img {
  width:100%;
}

.overview_ex {
  max-width:979px;
  width:97.9%;
}

.ex_img {
  justify-content:center;
  align-items:center;
  position:relative;
  content:"";
  height:350px;
}
@media screen and (max-width:1000px) {
  .ex_img {
    height:250px;
  }
}
@media screen and (max-width:748px) {
  .ex_img {
    height:220px;
  }
}
@media screen and (max-width:600px) {
  .ex_img {
    height:170px;
  }
}
@media screen and (max-width:460px) {
  .ex_img {
    height:130px;
  }
}

.ex_img1,
.ex_img2 {
  position:absolute;
  max-width:954px;
  width:100%;
}


/*-------------------------
[3]present
-------------------------*/
#present {
  position:relative;
  background-image:url('../img/present_back.png');
  background-position:top center;
  background-size:100%;
  background-repeat:no-repeat;
  overflow:hidden;
}

.present_section {
  padding-bottom:5%;
}

.present_carten_t {
  position:absolute;
  top:0;
  right:0;
  width:100%;
}

.present_carten_l {
  position:absolute;
  top:0;
  left:-5px;
  max-width:190px;
  width:10%;
  height:100%;
}

.present_carten_r {
  position:absolute;
  top:0;
  right:0;
  max-width:190px;
  width:10%;
  height:100%;
}

.present_title {
  max-width:239px;
  width:14.9%;
  padding-top:1%;
}

.present_contents {
  max-width:1170px;
  width:85%;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
}

.present_text {
  max-width:450px;
  width:38%;
  margin-right:2%;
}

.present_img {
  max-width:720px;
  width:59.53%;
  margin-top:-3%;
}


/*-------------------------
[4]method
-------------------------*/
#method {
  position:relative;
  background-image:url('../img/method_back.png');
  background-position:top center;
  background-size:100%;
}

.method_ballon_l {
  position: absolute;
  top: 30%;
  left: 0;
  max-width: 302px;
  width: 18.87%;
}

.method_ballon_r {
  position: absolute;
  top: 30%;
  right: 0;
  max-width: 293px;
  width: 18.31%;
}

@media screen and (max-width:1400px) {
  .method_ballon_l,
  .method_ballon_r {
    display:none;
  }
}


#method h2 {
  padding-bottom:0 !important;
}

.method_title {
  max-width:1202px;
  width:75.12%;
}

.method_section h2 {
  padding-top:3%;
  text-align:center;
}

.method_contents {
  max-width:1000px;
  width:90%;
  margin:-2% auto 0;
}

.step_title {
  display:flex;
  position:relative;
}

.step1_2,
.step2_3 {
  position:absolute;
  max-width:25px;
  width:3%;
  height:100%;
}

.step1_2 {
  left:33.333%;
}

.step2_3 {
  left:66.666%;
}

.step1_title {
  width: 33.333%;
  background-color: #6dcef9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step1_title img {
  max-width: 256px;
  width: 76.8%;
  padding: 1em 0;
}

.step2_title {
  width: 33.333%;
  background-color: #33b4ee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step2_title img {
  max-width: 186px;
  width: 55.8%;
  padding: 1em 0;
}

.step3_title {
  width: 33.333%;
  background-color: #00a0e9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step3_title img {
  max-width: 232px;
  width: 69.6%;
  padding: 1em 0;
}

.step_contents {
  display:flex;
}

.step1_contents {
  width: 33.333%;
  border-left: 3px solid #6dcef9;
  border-right: 3px solid #6dcef9;
  border-bottom: 3px solid #6dcef9;
  background-color: #FFF;
  padding: 2%;
  text-align: center;
}

.step1_text {
  max-width: 286px;
  width: 100%;
}

.step1_img {
  max-width: 190px;
  width: 66%;
  padding-top: 5%;
}

.step1_contents a {
  padding-top:4%;
  display:block;
}

.step1_contents a img {
  max-width:256px;
  width:89%;
}

.step2_contents {
  width: 33.333%;
  border-bottom: 3px solid #33b4ee;
  border-right: 3px solid #33b4ee;
  background-color: #FFF;
  padding: 2%;
  text-align: center;
}

.step2_text {
  max-width: 286px;
  width: 100%;
}

.step2_img {
  max-width: 261px;
  width: 91%;
  padding-top: 5%;
}

.step3_contents {
  width: 33.333%;
  border-right: 3px solid #00a0e9;
  border-bottom: 3px solid #00a0e9;
  background-color: #FFF;
  padding: 2%;
  text-align: center;
}

.step3_text {
  max-width: 286px;
  width: 100%;
}

.step3_img {
  max-width: 210px;
  width: 73%;
}

.step3_hushtag {
  max-width:269px;
  width:93%;
}

.method_btn {
  margin:0 auto;
  max-width:1000px;
  width:90%;
  padding:3% 0;
}

.method_btn a {
  max-width:364px;
  width:37%;
  margin:0 auto;
  display:block;
}

.method_btn a img {
  width:100%;
}


/*-------------------------
[5]post
-------------------------*/
#post {
  background-image:url('../img/post_back.png');
  background-position:top center;
  background-size:100%;
}

.post_section {
  position:relative;
}

.post_subtitle {
  max-width:330px;
  width:17%;
  position:absolute;
  top:1.5%;
  right:24%;
}

.post_contents {
  max-width:900px;
  width:90%;
  margin:0 auto;
}

.post_title {
  max-width:239px;
  width:14.9%;
  padding-top:1%;
}

#post_more {
  max-width: 364px !important;
  width: 41% !important;
  margin: 0 auto !important;
  padding: 6% 0 12% !important;
  background-color:transparent !important;
}

#post_more a img {
  width:100% !important;
}


/*-------------------------
[6]product
-------------------------*/
#product {
  background-image:url('../img/product_back.png');
  background-position:top center;
  background-size:auto 100%;
}

.product_section {
  max-width:1000px;
  width:90%;
  margin:0 auto;
}

.product_title {
  max-width:208px;
  width:20.8%;
}

.product_contents {
  padding-bottom:5%;
}

.product_text {
  max-width:850px;
  width:85%;
  margin:0 auto;
}

.product_text img {
  width:100%;
}

.product_list1 {
  display:flex;
  padding-top:7%;
}

.product_index {
  text-align:left;
}

.product_1 a,
.product_2 a,
.product_3 a,
.product_4 a,
.product_5 a {
  display:block;
}

.product_1,
.product_2,
.product_3 {
  width:33.333%;
  padding:0 1%;
  text-align:center;
}

.product_1_img,
.product_2_img,
.product_3_img,
.product_4_img,
.product_5_img
 {
  max-width:245px;
  width:78%;
}

.product_1_title {
  max-width:304px;
  width:97%;
  padding-top:5%;
}

.product_1_text {
  max-width:303px;
  width:97%;
  padding-top:5%;
}

/* .product_2_img {
  max-width:105px;
  width:34%;
} */

.product_2_title {
  max-width:218px;
  width:70%;
  padding-top:5%;
}

.product_2_text {
  max-width:303px;
  width:97%;
  padding-top:5%;
}

/* .product_3_img {
  max-width:101px;
  width:33%;
} */

.product_3_title {
  max-width:302px;
  width:97%;
  padding-top:5%;
}

.product_3_text {
  max-width:304px;
  width:97%;
  padding-top:5%;
}

.product_list2 {
  width:66.666%;
  margin:0 auto;
  display:flex;
  padding-top:7%;
}

.product_4,
.product_5 {
  width:50%;
  padding:0 1%;
  text-align:center;
}

/* .product_4_img {
  max-width:105px;
  width:33%;
} */

.product_4_title {
  max-width:292px;
  width:92%;
  padding-top:5%;
}

.product_4_text {
  max-width:304px;
  width:97%;
  padding-top:5%;
}

/* .product_5_img {
  max-width:173px;
  width:54%;
} */

.product_5_title {
  max-width:303px;
  width:97%;
  padding-top:5%;
}

.product_5_text {
  max-width:303px;
  width:97%;
  padding-top:5%;
}

.product_btn {
  max-width:306px;
  width:98%;
  padding-top:10%;
}

.product_4 .product_btn {
  padding-top: 19.75%;
}




/*-------------------------
[7]規約
-------------------------*/
.requirements_contents {
  max-width:1000px;
  width:95%;
  margin:0 auto;
  padding-top:5%;
}

.requirements_section {
  text-align:center;
  padding:1.5em 0 2.8em;
}

.requirements_text {
  text-align:left;
  width:90%;
  margin:0 auto;
  padding-bottom:2em;
}

.requirements_text h6 {
  padding-top:1.5em;
}

.requirements_text h6,
.requirements_text ul li {
  list-style:none;
  color:#2d0000;
  font-size:16px;
  line-height:25px;
}

.requirements_text ul li span {
  font-size:13px;
}

/*---------------------------*/
/*hum*/
.requirements,
.terms,
.individual,
.inquiry {
  text-align:left;
  width:90%;
  margin:0 auto 15px;
}

.hum h3 {
  font-size:25px;
  color:#e33d77;
  font-weight:bold;
  line-height:60px;
  margin:0 auto;
}

/*
.hum:hover .menu_detail {
  width: 70%;
}
*/

.hum .click_menu {
  display: inline-block;
  position: absolute;
  width: 60px;
  height: 100%;
  top: 0;
  right: 0;
}

.hum .menu_detail {
  width: 40%;
  position: absolute;
  top: 50%;
  right: 70%;
  transition: all 0.2s;
}

.hum .menu_detail .bar {
  width: 100%;
  display: inline-block;
  height: 3px;
  background-color: #00a0e9;
  position: absolute;
}

.hum .menu_detail .bar_01 {
  transform: rotate(90deg);
  transition: all 0.6s;
}

.open .click_menu .menu_detail .bar_01 {
  transform: rotate(0deg);
}

.hum {
  width: 100%;
  height: 60px;
  text-align: center;
  background-color: #d5f0f6;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  border: 2px solid #00a0e9;
}

/*-----open時色変更-----*/
.open .hum {
  background-color:#e33d77;
  border:2px solid #e33d77;
}

.open .hum h3 {
  color:#FFF;
}

.open .hum .menu_detail .bar {
  background-color:#FFF;
}
/*--------------------*/

.requirements .drawer,
.terms .drawer,
.individual .drawer,
.inquiry .drawer {
  display: none;
}

.drawer {
	padding: 20px;
  background-color:#FFF;
  border: 2px solid #e33d77;
}

.drawer h4 {
  padding-top:1.5em;
  font-size:15px;
  width:100%;
  max-width:1000px;
  color:#2d0000;
  font-weight:bold;
}

.drawer_box {
  padding-bottom:2%;
}

.drawer h5 {
  font-size:120%;
  font-weight:bold;
  padding:1% 0;
}

.drawer p,
.drawer ul li {
  font-weight:normal;
  color:#2d0000;
  font-size:15px;
  line-height:25px;
  margin:0!important;
}

.drawer ul li {
  word-break: break-all;
}

.drawer ul li a {
  display:inline;
}



/*-----------------
[sp]
-----------------*/
@media screen and (max-width:767px) {
  .pc {
    display:none !important;
  }

  .sp {
    display:block !important;
  }

  /*-------------------------
  [1]header
  -------------------------*/
  .header_section {
    width:100%;
    padding-top:15%;
  }

  .top_main {
    width:100%;
  }

  .top_text {
    width:100%;
    padding-bottom:6%;
  }

  .top_img1 {
    top:1%;
    width:28%;
  }

  .top_img2 {
    display:none;
  }

  .top_soap {
    bottom:-15%;
  }

  .top_present {
    top:0;
  }

  .header_subsection {
    text-align:right;
  }

  .top_date {
    width:63%;
    padding:5% 10%;
  }

  .top_ballon_l {
    top: 55%;
    width: 14%;
  }

  .top_ballon_r {
    top:62%;
    width:18%;
  }


  /*-------------------------
  [2]overview
  -------------------------*/
  .overview_section {
    width:98%;
  }

  .overview_title {
    width:40%;
  }


  /*-------------------------
  [3]present
  -------------------------*/
  .present_title {
    width:23%;
  }

  .present_carten_l,
  .present_carten_r {
    width:15%;
  }

  .present_contents {
    display:block;
    text-align:center;
  }

  .present_img {
    width:80%;
  }

  .present_text {
    width:95%;
    margin:0;
    padding-top:3%;
  }


  /*-------------------------
  [4]method
  -------------------------*/
  .method_section {
    padding-bottom:10%;
  }

  .method_contents {
    width:75%;
  }

  .method_title {
    width:100%;
  }

  .step1,
  .step2 {
    position:relative;
  }

  .step1_2,
  .step2_3 {
    bottom:0;
    left:0;
    width:100%;
    height:auto;
    max-width:1000px;
  }

  .step1_title,
  .step2_title,
  .step3_title {
    width:100%;
  }

  .step1_title img {
    width:60%;
  }

  .step2_title img {
    width:45%;
  }

  .step3_title img {
    width:55%;
  }

  .step1_contents,
  .step2_contents,
  .step3_contents {
    width:89.7%;
    padding:4% 4% 8%;
  }

  .step2_contents {
    border-left:3px solid #33b4ee;
  }

  .step3_contents {
    border-left:3px solid #00a0e9;
  }

  .step1_img {
    width:50%;
  }

  .step1_contents a img {
    width:70%;
  }

  .method_btn {
    width:90%;
  }

  .method_btn a {
    width:50%;
  }


  /*-------------------------
  [5]post
  -------------------------*/
  .post_title {
    width:29%;
  }

  .post_subtitle {
    width:30%;
    top:0;
    right:0;
  }

  #post_more {
    width:50% !important;
  }

  /*-------------------------
  [6]product
  -------------------------*/
  .product_title {
    width:23%;
  }

  .product_text {
    width:85%;
  }

  .product_list1 {
    display:flex !important;
  }

  .product_1,
  .product_2,
  .product_3,
  .product_4 {
    width:50%;
  }

  .product_4 .product_btn {
    padding-top: 8%;
  }

  .product_list2 {
    width:50%;
  }

  .product_5 {
    width:100%;
  }


  /*-------------------------
  [7]規約
  -------------------------*/
  .hum {
    height:50px;
  }

  .hum h3 {
    font-size:20px;
    line-height:50px;
  }

  .click_menu {
    width:50px;
  }

  .requirements_section {
    padding:1.5em 0 2em;
  }

  .drawer h3 {
    padding-top:1em;
    font-size:14px;
  }

  .drawer p,
  .drawer ul li {
    font-weight:normal;
    color:#2d0000;
    font-size:14px;
    line-height:24px;
    margin:0!important;
  }
}