@charset "UTF-8";

html {

  overflow-y: scroll; }



body {

  -webkit-text-size-adjust: 100%;

  -webkit-font-smoothing: antialiased; }

  body input[type="button"], body input[type="text"], body input[type="submit"] {

    -webkit-appearance: none;

    border-radius: 0; }

  body input::-webkit-input-placeholder {

    color: #c1c1c1;

    font-weight: normal; }

  body input:-ms-input-placeholder {

    color: #c1c1c1;

    font-weight: normal; }

  body input::-moz-placeholder {

    color: #c1c1c1;

    font-weight: normal; }

  body textarea::-webkit-input-placeholder {

    color: #c1c1c1;

    font-weight: normal; }

  body textarea:-ms-input-placeholder {

    color: #c1c1c1;

    font-weight: normal; }

  body textarea::-moz-placeholder {

    color: #c1c1c1;

    font-weight: normal; }

  body img {

    margin: 0;

    padding: 0;

    display: block; }



html, body {

  width: 100%;

  margin: 0;

  padding: 0;

  background-color: #FFF;

  position: relative; }



body {

  font-family: "游ゴシック" , "Yu Gothic" ,"ヒラギノ角ゴ Pro W6",'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka,"ＭＳ Ｐゴシック" ,sans-serif !important; }



.for_pc {

  display: block; }



.for_sp {

  display: none; }



/*header

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

#header {

  position: relative;

  width: 960px;

  background: #FFF;

  margin: 0 auto 25px auto; }

  #header .logo {

    display: block;

    width: 97px;

    height: 120px; }

  #header p {

    position: absolute;

    top: 44px;

    right: 0; }



/*footer

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

#footer {

  min-width: 960px;

  width: 100%;

  background: #dddddd;

  border-top: 1px solid #FFF;

  padding: 53px 0; }

  #footer .dotline {

    width: 963px;

    height: 1px;

    background-image: url(../IMAGES/dotline.png);

    margin: auto; }

  #footer .inner {

    position: relative;

    width: 630px;

    margin: 0 auto 50px auto; }

    #footer .inner p img {

      width: 374px;

      height: 48px; }

    #footer .inner .presentBtn {

      display: block;

      background: url(../IMAGES/footer_present_btn.gif) no-repeat;

      width: 226px;

      height: 44px;

      position: absolute;

      top: 2px;

      right: 0; }

    #footer .inner .presentBtn:hover {

      opacity: 0.7; }

    #footer .inner .chuki {

      font-size: 13px;

      color: #cf2242;

      text-align: center;

      margin-top: 20px; }

  #footer .inner2 {

    position: relative;

    width: 570px;

    margin: 0 auto 0 auto; }

    #footer .inner2 p, #footer .inner2 div {

      overflow: hidden;

      text-indent: -99999px;

      display: block; }

    #footer .inner2 .ttl {

      width: 278px;

      height: 40px;

      background: url(../IMAGES/happy_drive_ttl_pc.png) no-repeat;

      margin: 48px 0 0 143px; }

    #footer .inner2 .txt {

      width: 418px;

      height: 37px;

      background: url(../IMAGES/happy_drive_txt_pc.png) no-repeat;

      margin: 10px 0 0 143px; }

    #footer .inner2 .icon {

      width: 120px;

      height: 103px;

      background: url(../IMAGES/happy_drive_icon_pc.png) no-repeat;

      position: absolute;

      top: 0;

      left: 0; }

    #footer .inner2 .btn {

      margin: 43px 0 0 160px; }

      #footer .inner2 .btn a {

        display: block;

        width: 235px;

        height: 38px;

        background: url(../IMAGES/happy_drive_btn_pc.png) no-repeat; }

        #footer .inner2 .btn a:hover {

          opacity: 0.7; }



/*clearfix

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

.clearfix:after {

  content: " ";

  display: block;

  clear: both; }



/*clearfix

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

span.s_view {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  background-color: #ccc;

  width: 0;

  height: 100%; }



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

index

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

/*contents-wrap

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

#index.contents-wrap {

  padding: 40px 0 40px;

  margin: 0 auto 0 auto;

  background: url(../IMAGES/bg01.jpg) no-repeat top center;

  min-width: 960px;

  -moz-background-size: 100% 100%;

  background-size: 100% 100%; }



/*container

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

#index .container {

  visibility: hidden;

  padding: 60px 0 60px;

  position: relative;

  background: url(../IMAGES/bg02.jpg) no-repeat;

  width: 750px;

  margin: 0 auto 0 auto; }

  #index .container .contTitle {

    background: url(../IMAGES/title_copy02.png) 0 0 no-repeat;

    text-align: center;

    width: 477px;

    height: 75px;

    margin: 0 auto 0 144px; }

  #index .container .contTitle2 {

    display: none;

    text-align: center;

    margin: 0 auto 50px 280px; }

    #index .container .contTitle2 img {

      width: 174px;

      height: 35px; }

  #index .container p.attention {

    width: 113px;

    margin: 30px auto 60px auto;

    text-align: center; }

  #index .container p.attention img {

    width: 113px; }

  #index .container form {

    width: 520px;

    margin: 0 auto 0 auto; }

    #index .container form textarea {

      resize: none; }

    #index .container form p.ttl {

      display: block;

      width: 343px;

      padding-left: 10px;

      border-left: solid 3px #d54258; }

      #index .container form p.ttl img {

        width: 100%;

        height: auto; }

      #index .container form p.ttl img.tName01, #index .container form p.ttl img.tName03, #index .container form p.ttl img.tName04 {

        display: none;

        width: 225px; }

    #index .container form p.check {

      font-weight: bold;

      color: #c10346;

      text-align: center;

      margin-bottom: 10px;

      display: none; }

    #index .container form .txt01, #index .container form .txt02 {

      margin: 20px 0;

      width: 100%;

      height: 57px;

      line-height: 57px;

      font-size: 1.3em;

      border: none;

      letter-spacing: 2px;

      text-align: center;

      vertical-align: middle; }

    #index .container form .message {

      margin: 20px 0;

      padding: 2% 5% 2% 5%;

      width: 90%;

      font-size: 16px;

      line-height: 23px;

      text-align: left;

      color: #000;

      border: none;

      letter-spacing: 1px;

      overflow: hidden; }

    #index .container form .carSelect {

      margin: 20px 0 70px 0;

      width: 100%;

      height: 137px;

      background: #FFF; }

      #index .container form .carSelect ul {

        margin: 0 auto 0 auto;

        text-align: center; }

      #index .container form .carSelect li {

        cursor: pointer;

        display: inline-block;

        text-align: center;

        margin: 0 5px 0 5px; }

      #index .container form .carSelect li img {

        height: 70px;

        width: auto; }

      #index .container form .carSelect li .car_name {

        display: block;

        margin: 5px 0 5px;

        font-size: 14px;

        letter-spacing: 0.1em; }

    #index .container form .colorSelectArea {

      display: none;

      position: relative;

      width: 100%;

      margin-bottom: 70px; }

    #index .container form .colorSelect {

      position: relative;

      margin: 20px 0;

      padding: 15px 0 10px;

      width: 100%;

      background: #FFF; }

      #index .container form .colorSelect ul {

        margin: 0 auto 0 auto;

        text-align: center; }

      #index .container form .colorSelect li {

        width: 146px;

        cursor: pointer;

        display: inline-block;

        text-align: center;

        margin: 0 20px 0 0;

        vertical-align: top; }

      #index .container form .colorSelect li img {

        width: 40px;

        margin: 0 auto 10px;

        background: #333; }

      #index .container form .colorSelect li .color_name {

        margin: 2px 0 5px;

        font-size: 12px;

        letter-spacing: 0.1em; }

    #index .container form .countArea {

      position: relative;

      margin-bottom: 65px;

      width: 520px;

      height: 12px; }

      #index .container form .countArea p.formAt {

        color: #8a8a8a;

        line-height: 13px;

        font-size: 12px; }

      #index .container form .countArea p.txtCount {

        line-height: 13px;

        font-size: 12px;

        position: absolute;

        top: 0;

        right: 0; }

    #index .container form .submitArea {

      position: relative; }

      #index .container form .submitArea .offBtn {

        background: url(../IMAGES/movie_create_btn_off.gif);

        width: 520px;

        height: 57px;

        position: absolute;

        top: 0; }

    #index .container form .play_btn:hover {

      cursor: pointer;

      opacity: 0.7; }

    #index .container form .play_btn {

      display: none;

      border: none;

      background: url(../IMAGES/t1_stat_btn.gif) no-repeat;

      width: 520px;

      height: 57px; }

    #index .container form .submit_btn:hover {

      cursor: pointer;

      opacity: 0.7; }

    #index .container form .submit_btn {

      border: none;

      background: url(../IMAGES/movie_create_btn.gif) no-repeat;

      width: 520px;

      height: 57px; }

  #index .container .ribon01 {

    position: absolute;

    top: -2px;

    left: -2px; }

  #index .container .ribon02 {

    position: absolute;

    bottom: -3px;

    right: -1px; }



.mrB40 {

  margin-bottom: 40px !important; }



.count01, .count02, .textAreaCount {

  color: #8a8a8a; }



/*****************************************************************

for Middole

******************************************************************/

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

  html, body {

    overflow-x: hidden; }



  .for_pc {

    display: none; }



  .for_sp {

    display: block; }



  #header {

    width: 100%;

    margin: 0 5% 5% 5% !important; }

    #header .logo {

      display: block;

      width: 20%;

      height: 20%; }

      #header .logo img {

        width: 100%; }

    #header p {

      position: absolute;

      top: 45%;

      right: 8% !important;

      width: 50%; }

      #header p img {

        width: 100%; }



  #footer {

    min-width: inherit;

    width: 100% !important;

    height: 100% !important;

    background: #dddddd;

    border-top: 1px solid #FFF; }

    #footer .dotline {

      margin-bottom: 11% !important; }

    #footer .inner {

      position: relative;

      padding-bottom: 12%;

      width: 90%;

      margin: 0 auto 0 5%; }

      #footer .inner p {

        margin-bottom: 34px; }

        #footer .inner p img {

          width: 100%;

          height: auto; }

      #footer .inner .presentBtn {

        background: url(../IMAGES/sp_footer_present_btn.gif) 0 0 no-repeat;

        width: 580px;

        height: 0;

        padding-top: 13.27%;

        background-size: contain;

        position: static; }

      #footer .inner .chuki {

        text-align: left;

        line-height: 1.6em; }

        #footer .inner .chuki br {

          display: none; }

    #footer .inner2 {

      position: relative;

      width: 100%;

      margin: 0 auto 0 auto; }

      #footer .inner2 p, #footer .inner2 div {

        overflow: hidden;

        text-indent: -99999px;

        display: block; }

      #footer .inner2 .ttl {

        width: 64.53%;

        height: 0;

        padding-top: 8.9%;

        background: url(../IMAGES/happy_drive_ttl_sp.png) no-repeat;

        background-size: 100% auto;

        margin: 5% auto 0 auto; }

      #footer .inner2 .txt {

        width: 52.96%;

        height: 0;

        padding-top: 12.03%;

        background: url(../IMAGES/happy_drive_txt_sp.png) no-repeat;

        background-size: 100% auto;

        margin: 4% 0 0 38%; }

      #footer .inner2 .icon {

        width: 29.84%;

        height: 0;

        padding-top: 24.12%;

        background: url(../IMAGES/happy_drive_icon_sp.png) no-repeat;

        background-size: 100% auto;

        position: absolute;

        top: inherit;

        bottom: -5px;

        left: 7.2%; }

      #footer .inner2 .btn {

        width: 100%;

        margin: 2% 0 0 38%; }

        #footer .inner2 .btn a {

          display: block;

          width: 53.28%;

          height: 0;

          padding-top: 7.03%;

          background: url(../IMAGES/happy_drive_btn_sp.png) no-repeat;

          background-size: 100% auto; }



  #index.contents-wrap {

    min-width: inherit; }



  #index .container {

    width: 90% !important;

    background: url("../IMAGES/sp_bg02.jpg") 0 0;

    background-size: 100% 100%;

    padding: 15% 0 80px 0; }

    #index .container img {

      width: 100%;

      height: auto; }

    #index .container p.attention {

      margin: 0 auto 50px; }

    #index .container .contTitle {

      max-width: 476px;

      background: url(../IMAGES/sp_title_copy02.png) no-repeat;

      background-size: contain;

      width: 80% !important;

      height: 0;

      padding-bottom: 30.88%;

      margin: 0 auto; }

    #index .container .contTitle2 {

      width: 43.28%;

      margin: -5% auto 10% 28.75%; }

      #index .container .contTitle2 img {

        width: 100%;

        height: 100%; }

    #index .container .ribon01 {

      width: 23%; }

    #index .container .ribon02 {

      width: 23%; }

    #index .container form {

      width: 83.0%; }

      #index .container form p.ttl {

        width: 94%;

        padding-left: 3%;

        border-left: solid 5px #d54258; }

        #index .container form p.ttl img {

          width: 100%;

          height: auto; }

        #index .container form p.ttl img.tName01, #index .container form p.ttl img.tName03, #index .container form p.ttl img.tName04 {

          width: 65.46%;

          height: 65.46%; }

      #index .container form .txt01, #index .container form .txt02 {

        width: 100%;

        height: 40px;

        line-height: 40px !important;

        font-size: 1.0em;

        letter-spacing: 1px;

        margin-top: 5%; }

      #index .container form .carSelect {

        margin: 6% 0 20% 0;

        width: 100%;

        height: 100%;

        background: #FFF;

        padding-bottom: 10px; }

        #index .container form .carSelect ul {

          margin: 0 auto 0 auto;

          text-align: center; }

        #index .container form .carSelect li {

          width: 42%;

          cursor: pointer;

          display: inline-block;

          text-align: center;

          margin: 0 3% 0 2%; }

          #index .container form .carSelect li br {

            display: none; }

          #index .container form .carSelect li img {

            width: 100%;

            height: auto; }

          #index .container form .carSelect li .rd {

            margin-right: 5%; }

          #index .container form .carSelect li p.car_name {

            margin: 0;

            font-size: 13px;

            line-height: 0;

            letter-spacing: 0; }

      #index .container form .colorSelectArea {

        display: none;

        width: 100%;

        height: 100%;

        margin-bottom: 15%; }

        #index .container form .colorSelectArea .colorSelect {

          padding: 8% 0 9% 0;

          margin: 20px 0;

          width: 100%;

          background: #FFF; }

          #index .container form .colorSelectArea .colorSelect ul {

            margin: 0 auto 0 auto;

            text-align: center; }

          #index .container form .colorSelectArea .colorSelect li {

            width: 90%;

            cursor: pointer;

            display: inline-block;

            text-align: left;

            margin: 7% 0 7% 5%;

            position: relative;

            height: 20% !important; }

            #index .container form .colorSelectArea .colorSelect li img.color {

              margin: 0 0 0 10%;

              display: block;

              width: 15%;

              height: auto;

              top: 0;

              left: 10%; }

            #index .container form .colorSelectArea .colorSelect li input {

              display: block;

              position: absolute;

              top: 0;

              bottom: 0;

              left: 0;

              margin: auto; }

            #index .container form .colorSelectArea .colorSelect li p.color_name {

              text-align: left;

              line-height: 1.2em;

              position: absolute;

              left: 30%;

              font-size: 16px;

              top: 0;

              bottom: 0;

              margin: auto;

              height: 100%;

              display: inline-table; }

      #index .container form .messageArea {

        display: block; }

      #index .container form .message {

        margin: 20px 0;

        padding: 2% !important;

        width: 96% !important;

        font-size: 1em !important;

        line-height: 23px;

        text-align: left;

        color: #000;

        border: none;

        letter-spacing: 0.5px !important; }

      #index .container form .countArea {

        width: 100%; }

        #index .container form .countArea p.formAt {

          font-size: 14px; }

        #index .container form .countArea p.txtCount {

          font-size: 14px; }

      #index .container form .submitArea .offBtn {

        background: url(../IMAGES/movie_create_btn_off_sp.gif);

        background-size: 100% auto;

        width: 100%;

        height: 0;

        padding-bottom: 14.16%;

        margin: 20px auto; }

      #index .container form .play_btn {

        background: url(../IMAGES/sp_t1_start_btn.gif) no-repeat;

        background-size: 100% auto;

        width: 100%;

        height: 0;

        padding-bottom: 14.16%;

        margin: 20px auto; }

      #index .container form .submit_btn {

        background: url(../IMAGES/movie_create_btn_sp.gif) no-repeat;

        background-size: 100% auto;

        width: 100%;

        height: 0;

        padding-bottom: 14.16%;

        margin: 20px auto; } }

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

  form .carSelect li p.car_name {

    font-size: 12px !important;

    line-height: 12px !important; }



  .carNameSp {

    letter-spacing: -0.1em !important;

    position: relative;

    top: -3px !important; } }



/*# sourceMappingURL=common.css.map */