@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: "";
  content: none; }

q:before, q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

#wrapper {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "sans-serif";
  color: #343434; }

a {
  color: #2d2d2d;
  text-decoration: none; }
  a:link, a:visited, a:hover, a:active {
    color: #2d2d2d;
    text-decoration: none; }

.u-color-1 {
  color: #f0027f; }

.txt-link {
  text-decoration: underline;
  color: #f0027f; }
  .txt-link:hover {
    text-decoration: none; }

.u-mt0 {
  margin-top: 0 !important; }

.u-mt10 {
  margin-top: 10px !important; }

.u-mt20 {
  margin-top: 20px !important; }

.u-mt30 {
  margin-top: 30px !important; }

.u-mt40 {
  margin-top: 40px !important; }

.u-mt50 {
  margin-top: 50px !important; }

.u-mt60 {
  margin-top: 60px !important; }

.u-mt70 {
  margin-top: 70px !important; }

.u-mt80 {
  margin-top: 80px !important; }

.u-mt90 {
  margin-top: 90px !important; }

.u-mt100 {
  margin-top: 100px !important; }

.u-mb0 {
  margin-bottom: 0 !important; }

.u-mb10 {
  margin-bottom: 10px !important; }

.u-mb20 {
  margin-bottom: 20px !important; }

.u-mb30 {
  margin-bottom: 30px !important; }

.u-mb40 {
  margin-bottom: 40px !important; }

.u-mb50 {
  margin-bottom: 50px !important; }

.u-mb60 {
  margin-bottom: 60px !important; }

.u-mb70 {
  margin-bottom: 70px !important; }

.u-mb80 {
  margin-bottom: 80px !important; }

.u-mb90 {
  margin-bottom: 90px !important; }

.u-mb100 {
  margin-bottom: 100px !important; }

.u-ml0 {
  margin-left: 0 !important; }

.u-ml10 {
  margin-left: 10px !important; }

.u-ml20 {
  margin-left: 20px !important; }

.u-ml30 {
  margin-left: 30px !important; }

.u-ml40 {
  margin-left: 40px !important; }

.u-ml50 {
  margin-left: 50px !important; }

.u-ml60 {
  margin-left: 60px !important; }

.u-ml70 {
  margin-left: 70px !important; }

.u-ml80 {
  margin-left: 80px !important; }

.u-ml90 {
  margin-left: 90px !important; }

.u-ml100 {
  margin-left: 100px !important; }

.u-mr0 {
  margin-right: 0 !important; }

.u-mr10 {
  margin-right: 10px !important; }

.u-mr20 {
  margin-right: 20px !important; }

.u-mr30 {
  margin-right: 30px !important; }

.u-mr40 {
  margin-right: 40px !important; }

.u-mr50 {
  margin-right: 50px !important; }

.u-mr60 {
  margin-right: 60px !important; }

.u-mr70 {
  margin-right: 70px !important; }

.u-mr80 {
  margin-right: 80px !important; }

.u-mr90 {
  margin-right: 90px !important; }

.u-mr100 {
  margin-right: 100px !important; }

.u-mra {
  margin-right: auto !important; }

.u-mla {
  margin-left: auto !important; }

.u-mca {
  margin-left: auto !important;
  margin-right: auto !important; }

.u-pt0 {
  padding-top: 0 !important; }

.u-pt10 {
  padding-top: 10px !important; }

.u-pt20 {
  padding-top: 20px !important; }

.u-pt30 {
  padding-top: 30px !important; }

.u-pt40 {
  padding-top: 40px !important; }

.u-pt50 {
  padding-top: 50px !important; }

.u-pt60 {
  padding-top: 60px !important; }

.u-pt70 {
  padding-top: 70px !important; }

.u-pt80 {
  padding-top: 80px !important; }

.u-pt90 {
  padding-top: 90px !important; }

.u-pt100 {
  padding-top: 100px !important; }

.u-pb0 {
  padding-bottom: 0 !important; }

.u-pb10 {
  padding-bottom: 10px !important; }

.u-pb20 {
  padding-bottom: 20px !important; }

.u-pb30 {
  padding-bottom: 30px !important; }

.u-pb40 {
  padding-bottom: 40px !important; }

.u-pb50 {
  padding-bottom: 50px !important; }

.u-pb60 {
  padding-bottom: 60px !important; }

.u-pb70 {
  padding-bottom: 70px !important; }

.u-pb80 {
  padding-bottom: 80px !important; }

.u-pb90 {
  padding-bottom: 90px !important; }

.u-pb100 {
  padding-bottom: 100px !important; }

.u-pl0 {
  padding-left: 0 !important; }

.u-pl10 {
  padding-left: 10px !important; }

.u-pl20 {
  padding-left: 20px !important; }

.u-pl30 {
  padding-left: 30px !important; }

.u-pl40 {
  padding-left: 40px !important; }

.u-pl50 {
  padding-left: 50px !important; }

.u-pl60 {
  padding-left: 60px !important; }

.u-pl70 {
  padding-left: 70px !important; }

.u-pl80 {
  padding-left: 80px !important; }

.u-pl90 {
  padding-left: 90px !important; }

.u-pl100 {
  padding-left: 100px !important; }

.u-pr0 {
  padding-right: 0 !important; }

.u-pr10 {
  padding-right: 10px !important; }

.u-pr20 {
  padding-right: 20px !important; }

.u-pr30 {
  padding-right: 30px !important; }

.u-pr40 {
  padding-right: 40px !important; }

.u-pr50 {
  padding-right: 50px !important; }

.u-pr60 {
  padding-right: 60px !important; }

.u-pr70 {
  padding-right: 70px !important; }

.u-pr80 {
  padding-right: 80px !important; }

.u-pr90 {
  padding-right: 90px !important; }

.u-pr100 {
  padding-right: 100px !important; }

.u-tl {
  text-align: left !important; }

.u-tc {
  text-align: center !important; }

.u-tr {
  text-align: right !important; }

.u-db {
  display: block !important; }

.u-di {
  display: inline-block !important; }

.u-fl {
  float: left !important; }

.u-fr {
  float: right !important; }

.u-b {
  font-weight: bold !important; }

.u-cp {
  cursor: pointer !important; }

.u-vt {
  vertical-align: top !important; }

.u-vm {
  vertical-align: middle !important; }

.u-vba {
  vertical-align: baseline !important; }

.u-vbo {
  vertical-align: bottom !important; }

#wrapper .header .header-fixed-wrap.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: #ffffff; }
  #wrapper .header .header-fixed-wrap.fixed .header-fixed-wrap-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100px; }
    #wrapper .header .header-fixed-wrap.fixed .header-fixed-wrap-inner .header-logo-wrap {
      margin: 0;
      width: auto;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center; }

.sp {
  display: none !important; }

.opac {
  opacity: 1;
  filter: alpha(opacity=100);
  display: block;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out; }
  .opac:hover {
    -webkit-animation: backToOpac1 0.7s linear 0s;
    animation: backToOpac1 0.7s linear 0s; }

@-webkit-keyframes backToOpac1 {
  0% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }

@keyframes backToOpac1 {
  0% {
    opacity: 0.4; }
  100% {
    opacity: 1; } }

#page-up {
  z-index: 101;
  position: fixed;
  bottom: 40px;
  right: 40px;
  cursor: pointer;
  width: 80px;
  height: 80px;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out; }
  #page-up:hover {
    bottom: 50px; }
  #page-up img {
    width: 100%;
    height: auto; }

#wrapper {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 500;
  overflow: hidden;
  min-width: 1080px; }
  #wrapper .con {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2; }
  #wrapper img {
    width: 100%;
    height: auto;
    vertical-align: bottom; }
  #wrapper .header {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 34px;
    z-index: 3;
    margin-bottom: 20px; }
    #wrapper .header .sp-menu {
      display: none; }
  #wrapper #main-wrapper, #wrapper #contents-wrapper {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    padding-bottom: 60px; }
  #wrapper h1 {
    font-size: 34px;
    font-weight: bold;
    padding: 40px 0 30px;
    line-height: 1; }
  #wrapper section {
    width: 960px;
    margin: 0px auto 50px;
    text-align: center;
    position: relative; }
    #wrapper section:last-of-type {
      margin-bottom: 0; }
    #wrapper section p {
      font-size: 28px;
      color: #fff;
      line-height: 1.5; }
    #wrapper section h2 {
      font-size: 18px;
      line-height: 1;
      padding: 16px 24px;
      text-align: left;
      background-color: #FFFF11;
      margin-bottom: 20px;
      font-weight: bold; }
  #wrapper #nav {
    width: 100%;
    background-color: #F6F6F6;
    margin-bottom: 20px; }
    #wrapper #nav .nav-wrap {
      width: 960px;
      height: 76px;
      margin: 0 auto;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center; }
      #wrapper #nav .nav-wrap a {
        width: 320px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        padding-right: 1em; }
        #wrapper #nav .nav-wrap a:hover {
          opacity: 0.6; }
        #wrapper #nav .nav-wrap a span {
          color: #343434;
          position: relative; }
          #wrapper #nav .nav-wrap a span::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -34px;
            width: 17px;
            height: 9px;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            background: url(../img/icon_arrow_down.png) no-repeat center top;
            background-size: contain; }
      #wrapper #nav .nav-wrap .line {
        width: 1px;
        height: 40px;
        border-right: 1px solid #E3E3E3; }
  #wrapper .text-style, #wrapper #about p, #wrapper #step .step .contents-area .txt-wrap p, #wrapper #step .step .contents-area .txt-wrap .attention, #wrapper #step .tips .txt-wrap, #wrapper #attention .txt p {
    font-size: 16px;
    line-height: 30px;
    color: #343434;
    text-align: left;
    font-weight: normal; }
  #wrapper #step .step {
    margin-bottom: 30px;
    padding-bottom: 40px;
    background: url(../img/step_line_pc.png) no-repeat center bottom;
    background-size: contain; }
    #wrapper #step .step:nth-child(3) {
      background: none;
      padding-bottom: 0; }
    #wrapper #step .step .ttl-area {
      width: 540px;
      margin-left: 220px;
      margin-bottom: 20px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center; }
      #wrapper #step .step .ttl-area .img-wrap {
        width: 66px;
        height: 66px;
        margin-right: 15px; }
      #wrapper #step .step .ttl-area h3 {
        font-weight: bold;
        font-size: 22px; }
    #wrapper #step .step .contents-area {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      #wrapper #step .step .contents-area .txt-wrap {
        width: 490px; }
        #wrapper #step .step .contents-area .txt-wrap p {
          margin-bottom: 10px; }
        #wrapper #step .step .contents-area .txt-wrap .attention {
          font-size: 14px;
          line-height: 22px; }
          #wrapper #step .step .contents-area .txt-wrap .attention li {
            margin-left: 1em;
            text-indent: -1em;
            margin-bottom: 6px; }
            #wrapper #step .step .contents-area .txt-wrap .attention li::before {
              content: "※"; }
            #wrapper #step .step .contents-area .txt-wrap .attention li:last-child {
              margin-bottom: 0; }
            #wrapper #step .step .contents-area .txt-wrap .attention li a {
              text-decoration: underline;
              color: #343434; }
              #wrapper #step .step .contents-area .txt-wrap .attention li a:hover {
                opacity: 0.6; }
      #wrapper #step .step .contents-area .img-wrap {
        width: 450px;
        height: auto; }
  #wrapper #step .tips {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: #FFFDE5;
    padding: 30px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 254px; }
    #wrapper #step .tips .ttl-area {
      width: 460px;
      text-align: left;
      margin-bottom: 18px; }
      #wrapper #step .tips .ttl-area .img-wrap {
        display: inline-block;
        width: 64px;
        height: auto;
        margin-right: 10px; }
      #wrapper #step .tips .ttl-area h3 {
        font-weight: bold;
        font-size: 22px;
        display: inline-block; }
    #wrapper #step .tips .txt-wrap {
      width: 460px;
      text-align: left; }
    #wrapper #step .tips .img-area {
      margin-left: 20px;
      width: 420px; }
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    #wrapper #step .tips .ttl-area .img-wrap img {
      margin-bottom: -1px; } }
  #wrapper #attention .txt {
    margin-bottom: 30px; }
    #wrapper #attention .txt h4 {
      text-align: left;
      font-weight: bold; }
  #wrapper .btn-wrap {
    display: block;
    margin: 0 auto; }
    #wrapper .btn-wrap a {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      width: 260px;
      height: 60px;
      background-color: #FFFF11;
      border-radius: 100px;
      margin: 0 auto;
      position: relative; }
      #wrapper .btn-wrap a::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 26px;
        width: 16px;
        height: 16px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        background: url(../img/icon_close.png) no-repeat center top;
        background-size: contain; }
      #wrapper .btn-wrap a:hover {
        opacity: 0.6; }
      #wrapper .btn-wrap a span {
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        padding-left: 0.5em;
        color: #343434; }
  #wrapper #windowclose {
    cursor: pointer; }