@charset "utf-8";
/* CSS Document */
*{
  margin:0;
  padding:0;
}
body {
  margin:0 auto;
  font-family: "Montserrat", sans-serif;
}

*, ::after, ::before {
  box-sizing: border-box;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
img {
  vertical-align: middle;
  border-style: none;
}
.sns_name {
  font-size: 1.2em;
  font-weight: bold;
}
/*-----------------------------------*/

.wp1, .wp2, .wp3, .wp4, .wp5, .wp6, .wp7, .wp8 { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay_05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay_1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.delay_1_5s { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }
.delay_2s { animation-delay: 2s; -webkit-animation-delay: 2s; }


.effects .img { position: relative; position: relative; z-index: 1; overflow: hidden; }
.img img { width: -webkit-calc(100% + 20px) !important; width: calc(100% + 20px) !important; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); -ms-transform: translate3d(-20px, 0, 0); }
.img:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); }

/*-----------------------------------*/

/*-----------  #pageTop  -----------*/
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 15px;
  border-radius: 5%;
  background-color: rgba(29, 29, 29, 0.8);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

#pageTop a {
  animation: poyooon 0.9s linear 0s 1;
}
/*----------  End of #pageTop  ----------*/

/*----------  .main-header  ----------*/
.main_header {
  width: 100%;
  display: inline-block;
  line-height: 90px;
  border-bottom: 5px solid #b00000;
}

ul {
  list-style-type:none;
}
.sns {float:right;
  margin-right:5%;
}
.sns li{  
  display:inline-block;
  margin-left: 20px;
}
.logo {
  margin-left: 5%;
  width: 300px;
}
.li_sns {
  width: 32px;
}
.li_sns, .logo, .sns {
  vertical-align: middle;
}
/*----------  End of .main-header  ----------*/

/*--------------banner---------------*/
.banner {
  width: 100%;
  display: inline-block;
}
.banner_img_sp, .mod-exp {
  display: none;
}
/*----------  End of .banner  ----------*/

/*----------  first_div  ----------*/
.wrapper {
  max-width: 1280px;
  margin: 0 auto;
}
.first_div_wrap {
  display: inline-block;
  width: 100%;
  /*margin-top: 3%;*/
  margin-bottom: 18%;
}
.first_div {
  /*font-family: Osaka;*/
  margin-top: 2%;
  position: relative;
  text-align: center;
}
.main_h1, .feature_img {
  margin: 0 auto;
  /*font-family: Osaka;*/
}
.main_h1 {
  /*color: #ff6600;*/
  color: #000;
  /*text-shadow: 2px 2px 10px #4acaff;*/
  margin-top: 90px;
}
.fir_cont {
  position: relative;
  display: inline-block;
  margin-top: 2%;
}
.fir_cont_img {
  width: 60%;
  float: left;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
}
.h1_top {
  font-family: Toppan Bunkyu Gothic;
  font-size:1.4em;
  font-weight: lighter;
  color: white;
  text-align: left;
  width: 60%;
  position: absolute;
  right: 0;
  bottom: -43%;
  margin: 0;
  padding: 3%;
  /*background-color: #00c2f3;*/
  background-color: #00b3e0;
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
  /*text-shadow:
    black 1px 1px 1px, black -1px 1px 1px,
    black 1px -1px 1px, black -1px -1px 1px;*/
}
.h1_top p {
  font-size: 1.8em;
  text-align: center;
  margin-bottom: 10px;
  /*font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;*/
}
/*----------  End of first_div  ----------*/

/*----------  sign_btn  ----------*/
.sign_button {
  text-align: center;
  margin: 65px auto;
}
/*----------  end of sign_btn  ----------*/

/*----------  img_mul  ----------*/
.img_mul {
  text-align: center;
  /*filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));*/
}
/*----------  end of img_mul  ----------*/

/*----------  model_feature  ----------*/
.features {
  margin: 3% auto;
  display: inline-block;
  line-height: 2.0em;
}
.features_img {
  width: 55%;
}
.feature_title {
  text-align: center;
}
.features_title {
  font-size: 1.4em;
}
.feature_1_img {
  float: right;
  filter: drop-shadow(5px 5px 5px rgba(252,156,31,0.6));
}
.feature01_cont {
  float: right;
  width: 30%;
  padding-top: 1%;
  padding-right: 3%;
}
.feature01_title {
  color: #fc9c1f;
  padding: 3% 0;
}
.mid {
  /*line-height: 1.5em;*/
}
.feature_2_img {
  float: left;
  filter: drop-shadow(5px 5px 5px rgba(0,210,193,0.6));
}
.feature02_cont {
  float: left;
  width: 30%;
  padding-top: 1%;
  padding-left: 4%;
}
.feature02_title {
  color: #00d2c1;
  padding: 3% 0;
}
.feature_3_img {
  float: right;
  filter: drop-shadow(5px 5px 5px rgba(145,0,192,0.6));
}
.feature03_title {
  color: #9100c0;
  padding: 3% 0;
}
.feature03_cont {
  float: right;
  width: 35%;
  padding-top: 1%;
  padding-right: 3%;
}
.model_feature {
  margin-bottom: 3%;
}
/*----------  end of model_feature  ----------*/

/*----------  application_flow  ----------*/
.application_flow {
  background-color: #ff7d8b;
  text-align: center;
  padding-bottom: 2%;
  background-image: url(../img/pattern.png);
  margin-top: 100px;
}
.app_title_img {
  padding-top: 5%;
}
.app_fl_el {
  background-color: white;
  width: 85%;
  margin: 45px auto;
  position: relative;
}
.dtl2 {
  font-size:1.3em;
  /*padding:2% 3% 2% 8%;*/
  padding: 2% 5% 2% 80px;
  color:#000;
  text-align:left;
  font-weight:500;
  line-height: 1.8em;
}
.marks {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  color: white;
  font-size: 1.5em;
  transform: rotate(-15deg);
}
.sign_mark {
  background-color: #56cc8f;
}
.sign_mark p, .apply_mark p, .post_mark p {
  line-height: 3.6em;
}
.apply_mark {
  background-color: #d900d1;
}
.location_mark {
  background-color: #4b7aff;
}
.location_mark p, .reward_mark p {
  line-height: 1em;
  margin-top: 18px;
}
.post_mark {
  background-color: #9e599a;
}
.reward_mark {
  background-color: #f45148;
}
/*----------  end of application_flow  ----------*/

/*----------  footer  ----------*/
.footer {
  margin-top: 8%;
  text-align: center;
}
.footer_logo {
  width: 40%;
  margin-bottom: 2%;
}
.footer_link {
  width: 20%;
  /*float: left;*/
  text-align: left;
  padding: 0 1%;
}
.f_l_div {
  width: 100%;
  display: flex;
  margin: 1% auto 5% auto;
  font-size: 1em;
}

.footer_copy {
  width: 100%;
  line-height: 5.0em;
  /*background-color: #004f13;*/
  /*background-color: rgba(0,0,0,0.8);*/
  background-color: #640000;
  text-align: center;
}
.cright {
  color: white;
  font-size: 0.9em;
}
.arrow {
  vertical-align: middle;
  margin-right: 2%;
}
.f_link a {
  text-decoration: none;
  color: black;
  line-height: 2.0em;
}
.f_link a:hover {
  color: #aa0000;
  background-color: rgba(0,255,0,0.3);
}