@charset "utf-8";


article {
  width: 100%;
}

article > .lout-grid {
  width: 100%;
  padding: 0;
}

article > .lout-grid > .lout-contents {
  width: 100%;
  padding: 0;
}

article > .lout-grid > .lout-contents h1 {
  width: 960px;
  margin: 0 auto 30px;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.pc {
  display: block!important;
}

.sp {
  display: none!important;
}

a:hover img{
  filter: alpha(opacity = 75);
  -ms-filter: "alpha( opacity=75 )";
  -moz-opacity: 0.75;
  opacity: 0.75;
}


/* ----------------------------------------
mv
----------------------------------------- */

#mv {
  margin-bottom: 48px;
}

#mv img {
  width: 100%;
  height: auto;
}

/* main */
#mv .main {
  background-color: #eae5da;
}

#mv .main .wrap {
  width: 1254px;
  margin: 0 auto;
  overflow: hidden;
}

#mv .main .column {
  width: 418px;
  float: left;
}

/* sub */
#mv .sub {
  padding-bottom: 56px;
  background-image: url(/wordpress/wp-content/uploads/2017/01/bg_mv01.png);
  background-repeat: repeat-x;
  background-position: 0 0;
  -webkit-background-size: cover;
  background-size: cover;
}

#mv .sub h1 {
  width: 1067px;
  margin: 0 auto 0;
  position: relative;
  top: -69px;
  border: none;
}
#mv .sub h1:after {
  display: none;
}

#mv .sub .txt {
  width: 960px;
  margin: -69px auto 2em;
  padding: 0 2.5em;
  line-height: 1.7;
  font-size: 17px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#mv .sub .txt strong {
  display: inline-block;
  width: 100%;
  padding-top: 1.5em;
  text-align: center;
  font-size: 22px;
}

#mv .sub .friend {
  width: 960px;
  margin: 0 auto;
  padding: 23px 22px;
  border-radius: 6px;
  border-style: solid;
  border-width: 3px;
  border-color: #e6e6e6;
  box-sizing: border-box;
  background-color: #ffffff;
}

#mv .sub .friend h2 {
  width: 645px;
  margin: 0 auto 13px;
  padding: 0;
  border: none;
}

#mv .sub .friend .list {
  margin: 0;
  padding-top: 1.2em;
  padding-left: 6em;
  border-top: 1px solid #f94b37;
  overflow: hidden;
}

#mv .sub .friend .list li {
  width: 46%;
  margin: 0 0 .3em 1em;
  vertical-align: top;
  font-size: 18px;
  font-weight: bold;
  color: #724701;
  list-style-position: outside;
  list-style-type: disc;
  float: left;
}

#mv .sub .friend .list li:last-child {
  margin-bottom: 0;
}


/* ----------------------------------------
contents
----------------------------------------- */

#contents {
  width: 960px;
  margin: 0 auto;
}

#contents h2, #contents h3 {
  border: none;
}

/*
benefit
*/

#contents .benefit {
  margin-bottom: 104px;
  overflow: hidden;
}

.benefit h2 {
  margin-bottom: 42px;
}

.benefit .list {
  padding: 16px;
  border-radius: 6px;
  border-style: solid;
  border-width: 3px;
  border-color: #e0cfb5;
  box-sizing: border-box;
  background-color: #fffdd4;
}

.benefit .list.txt01, .benefit .list.txt02 {
  width: 470px;
  float: left;
}

.benefit .list.txt01 {
  margin: 0 20px 20px 0;
}

.benefit .list.txt03 {
  clear: both;
}

.benefit .txt03 .first {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f94b37;
  overflow: hidden;
}

.benefit .txt03 .first li {
  width: 438px;
  float: left;
}
.benefit .txt03 .first li:last-child {
  width: 447px;
  float: right;
}

.benefit .txt03 .second {
  overflow: hidden;
}

.benefit .txt03 .second .left {
  width: 404px;
  float: left;
}

.benefit .txt03 .second .step {
  width: auto;
  float: right;
}

.benefit .txt03 .second .step li {
  width: 212px;
  margin-right: 16px;
  float: left;
}
.benefit .txt03 .second .step li:last-child {
  width: 243px;
}

/*
flow h2, form h2
*/

.flow h2, .form h2 {
  padding: 17px;
  margin: 0 0 32px;
  text-align: center;
  background-color:  #e1d4b9;
  font-size: 0;
}

.flow h2 span {
  display: inline-block;
  width: 213px;
}

.form h2 span {
  display: inline-block;
  width: 173px;
}

/*
flow
*/

#contents .flow {
  margin-bottom: 114px;
}

.flow .step {
  margin-bottom: 69px;
  overflow: hidden;
}

.flow .step li {
  width: 33%;
  padding-right: 5%;
  background-image: url(/wordpress/wp-content/uploads/2017/01/ico_arrow011.png);
  background-repeat: no-repeat;
  background-position: 94% 110px;
  -webkit-background-size: 18px;
  background-size: 18px;
  float: left;
}
.flow .step li:last-child {
  width: 24%;
  padding-right: 0;
  background: none;
}

.flow .step li .ist {
  width: 120px;
  margin: 48px 0 0 1em;
  float: right;
}

.flow .step li h3 {
  font-size: 20px;
  font-weight: bold;
  overflow: hidden;
}
.flow .step li.step02 h3 span {
  width: auto;
  line-height: 1.2;
  float: left;
}
.flow .step li.step03 h3 span {
  display: block;
  width: auto;
  line-height: 1.3;
  margin-top: .6em;
  padding: 13px;
  color: #57aa1e;
  font-size: 24px;
  text-align: center;
  border: 2px solid #409325;
}

.flow .step li h3:before {
  display: inline-block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  margin-right: .5em;
  vertical-align: middle;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  border-radius: 50%;
  background-color: #79dc36;
}
.flow .step li.step01 h3:before {
  content: '1';
}
.flow .step li.step02 h3:before {
  content: '2';
  float: left;
}
.flow .step li.step03 h3:before {
  content: '3';
}

.flow .step li .txt{
  line-height: 1.6;
  font-size: 14px;
}

/*
formlink
*/

.flow .formlink {
  margin-bottom: 75px;
  padding: 25px 0;
  background-color: #f0f0f0;
  clear: both;
}

.flow .formlink .btn {
  text-align: center;
}

/*
rules
*/

.flow .rules {
  padding: 42px 46px;
  background-color: #f6f1e9;
}

.flow .rules h3 {
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #d70909;
}

.flow .rules .list li {
  line-height: 1.5;
  margin-bottom: .5em;
  font-size: 14px;
  color: #69ccea;
  list-style-position: outside;
  list-style-type: disc;
}
.flow .rules .list li span {
  color: #000;
}

/*
form
*/

.form {
  width: 1000px;
  margin: 0 auto 0 -20px;
}

.form h2 {
  width: 960px;
  margin: 0 auto 30px;
  text-align: center;
}

.form iframe {
  width: 100%;
  min-height: 3142px;
}



@media screen and (max-width: 786px) {

  .pc {
    display: none!important;
  }
  .sp {
    display: block!important;
  }

  article > .lout-grid > .lout-contents h1 {
    width: 100%;
    margin-bottom: 10px;
  }

  /*
  mv
  */

  #mv {
    width: 100%;
    margin-bottom: 12%;
  }

  #mv .main .wrap {
    width: 100%;
  }

  #mv .main .column:nth-child(1) {
    width: 50%;
  }
  #mv .main .column:nth-child(2) {
    width: 50%;
  }
  #mv .main .column:nth-child(3) {
    width: 100%;
  }

  #mv .sub h1 {
    width: 92%;
    margin-top: -12%;
    position: static;
  }

  #mv .sub .txt {
    width: 86%;
    margin-top: 2%;
    padding: 0;
    font-size: 15px;
    line-height: 2;
  }

  #mv .sub .txt strong {
    font-size: 19px;
    line-height: 1.5;
    text-align: left;
  }

  /* friend */
  #mv .sub .friend {
    width: 92%;
    padding: 8% 5%;
  }

  #mv .sub .friend h2 {
    width: 90%;
    margin-bottom: 6%;
  }

  #mv .sub .friend .list {
    padding: 5% 0 0;
    overflow: visible;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  #mv .sub .friend .list li {
    width: auto;
    line-height: 1.4;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: none;
  }

  /*
  contents
  */

  #contents {
    width: 92%;
    background-image: none;
  }

  /*
  benefit
  */

  #contents .benefit {
    margin-bottom: 12%;
  }

  .benefit h2 {
    margin: 0 0 8%;
  }

  .benefit .list {
    padding: 5%;
    margin-bottom: 5%;
  }
  .benefit .list.txt01, .benefit .list.txt02 {
    width: 100%;
    float: none;
  }
  .benefit .list.txt03 {
    margin-bottom: 0;
  }

  .benefit .txt03 .first {
    padding-bottom: 5%;
    margin-bottom: 5%;
  }

  .benefit .txt03 .first li {
    width: 100%;
    margin-bottom: 6%;
    float: none;
  }
  .benefit .txt03 .first li:last-child {
    width: 100%;
    margin-bottom: 0;
    float: none;
  }

  .benefit .txt03 .second .left {
    width: 100%;
    margin-bottom: 5%;
    float: none;
  }

  .benefit .txt03 .second .step {
    float: none;
  }

  .benefit .txt03 .second .step li {
    width: 45%;
    margin-right: 3%;
  }
  .benefit .txt03 .second .step li:last-child {
    width: 52%;
    margin: 0;
  }

  /*
  .flow h2 span, .form h2 span
  */

  .flow h2 {
    margin-bottom: 10%;
  }
  .flow h2 span {
    width: 50%;
  }

  .form h2 span {
    width: 40%;
  }

  /*
  flow
  */

  .flow .step {
    margin-bottom: 10%;
  }

  .flow .step li, .flow .step li:last-child {
    width: 80%;
    margin: 0 auto;
    padding: 0;
    float: none;
  }
  .flow .step li {
    margin-bottom: 5%;
    padding: 0 0 5%;
    background-image: url(/wordpress/wp-content/uploads/2017/01/ico_sp_arrow011.png);
    background-position: 50% 100%;
    -webkit-background-size: 30px;
    background-size: 30px;
  }

  .flow .step li .ist {
    width: 20%;
    margin: 0 0 0 1em;
  }

  .flow .step li h3 {
    margin: 0 0 1em;
    padding: 0;
    font-size: 19px;
  }

  .flow .step li h3:before {
    font-size: 17px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .flow .step li.step02 h3:before {
    float: none;
  }

  .flow .step li.step02 h3 span {
    float: none;
  }

  .flow .step li.step03 h3 span {
    font-size: 22px;
  }

  /* formlink */
  .flow .formlink {
    margin-bottom: 8%;
  }
  .flow .formlink .btn {
    width: 92%;
    margin: 0 auto;
  }

  .flow .rules {
    padding: 5% 8%;
  }

  .flow .rules h3 {
    font-size: 22px;
  }

  .flow .rules .list li {
    line-height: 1.6;
    font-size: 15px;
  }

  /*
  form
  */

  .form {
    width: 100%;
    margin: 10% 0;
  }

  .form h2 {
    width: 100%;
    margin-bottom: 1em;
  }

  .form .mod-movie {
    height: auto;
    min-height: 4000px;
  }

  .form iframe {
    width: 100%;
  }

  @media screen and (orientation: portrait) {
    .form .mod-movie {
      min-height: 4290px;
    }
  }
}