@charset "utf-8";

/*================================
    メインビジュアル
=================================*/
#fanclub-mv {
  background: url('../img/fanclub/mv_area_img.jpg') no-repeat;
  background-size: cover;
  text-align: center;
  height: 400px;
  background-color: #ffd400;
}

/*  #fanclub-list
---------------------------------*/
@media screen and (min-width:737px) {

  #fanclub-list .front-txt > img:nth-child(5) {
    position: absolute;
    right: -115px;
    bottom: -13px;
    z-index: 50;
  }

  #fanclub-list .front-txt > img:nth-child(4) {
    position: absolute;
    bottom: -10px;
    right: -40px;
    z-index: 100;
  }

  #fan-merit {
    background-image: url('../img/top/fan_vi.png');
    background-position: center;
    height: 350px;
    background-repeat: no-repeat;
  }

  #fan-merit ul {
    width: 1024px;
    margin: 0 auto;
    position: relative;
    top: 255px;
  }

  #fan-merit ul li {
    text-align: center;
    width: 312px;
    float: left;
    margin-right: 43px;
  }
}

#fanclub-list {
  background-color: #ffd300;
  padding-bottom: 215px;
  min-width: 1024px;
}

#fanclub-list .front-txt {
  text-align: center;
  position: relative;
  width: 730px;
  margin: 0 auto 15px;
  padding-top: 20px;
}

#fanclub-list .front-txt h1 {
  margin-bottom: 17px;
}

#fanclub-list .front-txt p {
  color: #111;
  line-height: 1.7;
}

#fanclub-list .front-txt p:nth-child(3) {
  margin-top: 12px;
}

#fanclub-list #fan-merit ul li:last-child {
  margin-right: 0;
}

#fan-merit li span {
  color: #111;
  line-height: 1.7;
  display: block;
  font-size: 16px;
  margin-top: 15px;
}

/*  form
---------------------------------*/
#fanclub-form {
  width: 702px;
  margin: 0 auto;
}

#fanclub-form .mail-form h3 {
  font-size: 32px;
  font-weight: bold;
  margin: 88px 0 17px;
  text-align: center;
}

#fanclub-form .mail-form p {
  margin-bottom: 48px;
  text-align: center;
  line-height: 1.8;
}

#fanclub-form iframe .public-form {
  background-color: #ffd300;
}

#fanclub-form input,
#fanclub-form button,
#fanclub-form textarea,
#fanclub-form select {
  margin: 0;
  padding: 0;
  background: none;
  border: solid 1px #111;
  border-radius: 0; 
  outline: none;   
}

#fanclub-form input[type=text]{
  font-size: 16px;
  padding: 14px 15px 13px;
  line-height: 1;
  border-radius: 5px;
  box-shadow: 0px 0px 3px #a7a7a7 inset;
  border: 1px solid #a7a7a7;
  width: 100%;
}

#fanclub-form table{
  background-color:#FFF; 
  text-align:left; 
  width:840px;
  margin: 0 auto;
}

#fanclub-form table tr td{
  background-color:#FFF; 
  padding:0px;
  vertical-align: middle;
  padding: 20px 20px;
  font-size: 16px;
}

#fanclub-form table tr.dotted{
  border-top: 1px dotted #999;
  border-bottom: 1px dotted #999;
}

#fanclub-form table tr td:nth-child(1) {
  background-color: #ffd300;
  width: 178px;
  font-weight: bold;    
}

#fanclub-form table tr.first td {
  background-color:#fff; 
  width:840px;
  color:#111; 
  font-size:14px; 
  font-weight:bold; 
  text-align:center; 
  padding-left:4px;
  vertical-align: middle;
  padding: 10px 20px;
}

#fanclub-form table td input[type=radio] {
  padding-left: 20px;
  position: relative;
  margin-right: 4px;
}

#fanclub-form table input[type=submit] {
  background-color: #ffd300;
  color: #111;
  width: 150px;
  height: 37px;
  font-size: 16px;
}

#fanclub-form table input[type=submit]:hover {
  opacity: 0.6;  
}

#fanclub-form table tr.last_tr td {
  background-color:#FFF; 
}

#fanclub-form table tr.last_tr td {
  padding-right:4px; 
  font-size:10px; 
  color:#999;
}

#fanclub-form table tr.last_tr td img {
  border:none; 
  padding:0; 
  margin:0; 
  margin-left:5px; 
  vertical-align:middle; 
  height:auto;
}

table.fc-form-table tr:not(:first-child) td:nth-child(1):after {
  content: "※";
  color: red;
}

#fanclub-form table tr td:last-child:after {
  color: #fff;
}

#fanclub-form .mail-form input.mail-form-in1 {
  width: 80%;
  max-width: 430px;
  display: inline;
  font-size: 13px;
  border: solid 1px #afafaf;
  background: #FFF;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  height: 47px;
}

#fanclub-form .mail-form input.mail-form-in2 {
  text-align: center;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  min-width: 120px;
  font-size: 13px;
  cursor: pointer;
  color: #000;
  background: #ffd300;
  width: 80px;
  height: 47px;
  border: none;
  padding: 0 24px;
  line-height: 1;
  display: inline;
  margin-left: 5px;
}

#fanclub-form form {
  padding-bottom: 40px;
}

#fanclub-form .mail-form-btn {
  width: 562px;
  margin: 0 auto;
}

#fanclub-form .step {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#fanclub-form .step > a {
  width: 25.51%;
}

#fanclub-form .step > a img {
  width: 100%;
}

#fanclub-form .step img:nth-child(2) {
  width: 7.11%;
  transform: rotate(-90deg);
}

#fanclub-form .step img:nth-child(3) {
  width: 52.64%;
}

/*================================
    レスポンシブ
=================================*/

/* ↓スマホ閲覧時適用 */
@media screen and (max-width:737px) {

  /*
    メインビジュアル
  ---------------------------------*/

  #fanclub-mv {
    background: url('../img/fanclub/sp/mv_area_img.jpg') no-repeat;
    height: 0;
    background-color: #ffd400;
    background-size: 100%;
    padding-top: 66.7%;
  }

  /*
    #fanclub-list
  ---------------------------------*/
  #fanclub-list {
    min-width: 100%;
    padding-bottom: 10px;
  }

  #fanclub-list .front-txt h2 {
    width: 87%;
    margin: 0 auto 4% auto;
    padding: 0 3%;
  }

  #fanclub-list .front-txt {
    width: 100%;
  }

  #fanclub-list .front-txt p {
    margin-bottom: 6%;
  }

  #fanclub-list .front-txt p:nth-child(2) img {
    width: 62%;
  }

  #fanclub-list #fan-merit ul {
    width: 100%;
  }

  #fanclub-list #fan-merit ul li {
    text-align: center;
    margin: 2% 0 10%;
  }

  /*  form
  ---------------------------------*/

  #fanclub-form {
    width: 100%;
    padding: 0 7%;
  }

  #fanclub-form .mail-form h3 {
    margin: 54px 0 17px;
    line-height: 1.3;
    font-size: 28px;
  }

  #fanclub-form .mail-form p {
    line-height: 1.3;
  }

  #fanclub-form .mail-form input.mail-form-in1 {
    width: 100%;
  }

  #fanclub-form .mail-form input.mail-form-in2 {
    display: block;
    margin: 11px auto 0;
    width: 100%;
  }

  #fanclub-form table {
    text-align: left;
    width: 94%;
  }

  #fanclub-form table tr.first td {
    width: 100%;
  }

  #fanclub-form table tr td:nth-child(1) {
    width: 100%;
    padding: 15px 20px;
  }

  #fanclub-form table tr td:nth-child(2) {
    padding: 20px 20px 35px;
  }

  #fanclub-form table,
  #fanclub-form tbody,
  #fanclub-form tr,
  #fanclub-form th,
  #fanclub-form td {
    display: block;
  }

  #fanclub-form .mail-form-btn {
    width: 100%;
  }

  #fanclub-form .step {
    display: block;
  }

  #fanclub-form .step > a {
    display: block;
    width: 52%;
    margin: 0 auto;
  }

  #fanclub-form .step img:nth-child(2) {
    transform: rotate(0deg);
    width: 12%;
    margin: 28px auto;
    display: block;
  }

  #fanclub-form .step img:nth-child(3) {
    width: 100%;
  }

}