@charset "UTF-8";
/*　////////////////////////////////
mixin
//////////////////////////////////　*/
/*
 @include css3(transition, 0.5s);
*/
/*　////////////////////////////////
clearfix[@extend .clearfix];
//////////////////////////////////　*/
.clearfix {
  zoom: 1; }
  .clearfix:after {
    display: block;
    content: "";
    clear: both; }

html {
  font-size: 62.5%; }

body {
  font-size: 3rem;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 4s ease 0s 1 normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-weight: 100; }
  body ul li {
    list-style-type: none; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

.pc-br {
  display: none; }
  @media (min-width: 480px) {
    .pc-br {
      display: block; } }

@media (min-width: 480px) {
  .sp-br {
    display: none; } }

.tb-br {
  display: none; }
  @media (min-width: 768px) {
    .tb-br {
      display: block; } }

@media (min-width: 768px) {
  .br-tb {
    display: none; } }

.md-br {
  display: none; }
  @media (min-width: 988px) {
    .md-br {
      display: block; } }

.pc-img {
  display: none !important; }

.sp-img {
  display: inline-block !important; }

@media (min-width: 768px) {
  .pc-img {
    display: block !important; }
  .sp-img {
    display: none !important; } }

/*　////////////////////////////////
a
//////////////////////////////////　*/
a:hover, a {
  text-decoration: none;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s; }

a:active {
  text-decoration: none; }

/*　////////////////////////////////
img
//////////////////////////////////　*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }
  @media (min-width: 480px) {
    img {
      max-width: 100%; } }

/* ------------reset ------------ */
body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

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

hr {
  display: block;
  height: 1px;
  border: 0;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle;  }

html {
  position: relative;
  overflow-y: scroll; }
  html input {
    font-size: 16px; }

body, html, main {
  height: 100%; }

#wrapper {
  background: #ffffff; }
  #wrapper #contents {
    margin: 0 auto;
    max-width: 1000px;
    text-align: center;
    background-color: #1c324a ;
    /*background: url(../img/body_back.jpg) no-repeat; */}
    #wrapper #contents .inner {
      background-position: 50% 100%; }
    #wrapper #contents section {
      padding: 0 10px; }
    #wrapper #contents .element-select a {
      display: inline-block; }
    #wrapper #contents .element-select a:hover {
      filter: drop-shadow(0px 0px 23px rgba(255, 255, 255, 0.8));
      -webkit-filter: drop-shadow(0px 0px 23px rgba(255, 255, 255, 0.8));
      -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
      transform: translateY(-3px);
      -webkit-transition-duration: 0.6s;
      -o-transition-duration: 0.6s; }
    #wrapper #contents .section01 {
      margin: 10px 0; }
    #wrapper #contents .section02 {
      background: url(../img/element_back.png) no-repeat;
      background-position: 50%;
      background-size: 100%;
      padding: 20px 0; }
      #wrapper #contents .section02 ul {
        /*ここから変更した*/
        width: 90%;
        overflow: hidden;
        margin: 0 auto; }
        #wrapper #contents .section02 ul li {
        /*ここから変更した*/
        float: left;
        width: 50%;
        margin-bottom: 20px; }
    #wrapper #contents .section03 {
      padding: 0px 10px 10px 10px; }
      @media (min-width: 768px) {
        #wrapper #contents .section03 {
          padding: 0px 0px; } }
      #wrapper #contents .section03 img {
        width: 100%;
        margin-bottom: 50px; }
        @media (min-width: 768px) {
          #wrapper #contents .section03 img {
            margin-bottom: 50px; } }
      #wrapper #contents .section03 a {
        display: inline-block;
        margin-bottom: 20px; }
  #wrapper .copyright {
    background-color: #1f023c;
    text-align: center;
    color: rgb(255, 255, 255);
    padding: 10px 0;
    font-size: 1.4rem;
    font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HGS明朝E", "MS P明朝", "yu-mincho-pr6", serif; }
  #wrapper .element .gender, #wrapper .element .birthday, #wrapper .element .name, #wrapper .element .form {
    margin: 50px 0; }
    @media (min-width: 768px) {
      #wrapper .element .gender, #wrapper .element .birthday, #wrapper .element .name, #wrapper .element .form {
        margin: 100px 0; } }
    #wrapper .element .gender p, #wrapper .element .birthday p, #wrapper .element .name p, #wrapper .element .form p {
      margin-bottom: 50px; }
  #wrapper .element .gender ul {
    display: inline-block; }
    #wrapper .element .gender ul li {
      display: inline-block;
      padding: 0 10px;
      margin-bottom: 20px; }
  #wrapper .element .birthday .next-btn {
    margin: 50px 0 0 0; }
  #wrapper .element .birthday select {
    font-size: 2.4rem;
    height: 50px;
    padding: 0 10px; }
    @media (min-width: 768px) {
      #wrapper .element .birthday select {
        padding: 0 30px;
        font-size: 3rem;
        height: 70px; } }
  #wrapper .element .name input.form_name {
    font-size: 2.0rem;
    height: 50px;
    width: 90%; }
    @media (min-width: 768px) {
      #wrapper .element .name input.form_name {
        width: 60%;
        padding: 0 30px;
        font-size: 3rem;
        height: 70px; } }
  #wrapper .element .form .data {
    background-color: #fff;
    width: 80%;
    margin: 0 auto;
    padding: 20px 10px 40px;
    border-collapse: separate;
    border: 3px solid #feca3f;
    -webkit-box-shadow: 0 0 20px 4px #feca3f;
    -moz-box-shadow: 0 0 20px 4px #feca3f;
    box-shadow: 0 0 20px 4px #feca3f; }
    @media (min-width: 768px) {
      #wrapper .element .form .data {
        padding: 30px 40px; } }
    #wrapper .element .form .data th, #wrapper .element .form .data td {
      text-align: left;
      font-size: 2rem;
      font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HGS明朝E", "MS P明朝", "yu-mincho-pr6", serif;
      font-weight: bold;
      display: block; }
      @media (min-width: 768px) {
        #wrapper .element .form .data th, #wrapper .element .form .data td {
          font-size: 2.8rem;
          display: table-cell; } }
    #wrapper .element .form .data th {
      color: #8000ff;
      margin-top: 20px; }
      @media (min-width: 768px) {
        #wrapper .element .form .data th {
          margin-top: 0px; } }
  #wrapper .element .form .next-btn {
    margin: 50px 0 0 0; }
  #wrapper .support #contents {
    max-width: 800px; }
    #wrapper .support #contents .section02 {
      padding: 50px 0; }
      @media (min-width: 768px) {
        #wrapper .support #contents .section02 {
          padding: 200px 0; } }
      #wrapper .support #contents .section02 .box {
        background-color: #fff;
        width: 80%;
        margin: 0 auto;
        padding: 50px 10px;
        border-collapse: separate;
        border: 3px solid #00a8ff;
        -webkit-box-shadow: 0 0 20px 4px #00a8ff;
        -moz-box-shadow: 0 0 20px 4px #00a8ff;
        box-shadow: 0 0 20px 4px #00a8ff;
        text-align: left; }
        #wrapper .support #contents .section02 .box p {
          text-align: left;
          margin-bottom: 10px; }
        #wrapper .support #contents .section02 .box p.f-style {
          font-size: 1.6rem;
          text-align: center;
          margin: 20px 0; }
          @media (min-width: 768px) {
            #wrapper .support #contents .section02 .box p.f-style {
              font-size: 2.4rem; } }
        #wrapper .support #contents .section02 .box .item {
          border-bottom: 3px solid #02a8fc;
          padding-bottom: 30px; }
        #wrapper .support #contents .section02 .box img {
          vertical-align: bottom; }
        #wrapper .support #contents .section02 .box .support-menu {
          background-color: #007ef6; }
      #wrapper .support #contents .section02 ul li {
        float: none;
        width: 100%;
        margin-bottom: 0;
        line-height: 0; }
        #wrapper .support #contents .section02 ul li a {
          display: inline-block; }
          #wrapper .support #contents .section02 ul li a img {
            line-height: 0; }
    #wrapper .support #contents .section03 a {
      margin-bottom: 0; }

/*【追加】生年月日のフォントをわかりやすく*/
.input {
  color: #000;
  font-weight: bold;
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
}